.hero-section{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(135deg,#0f172a,#1e1b4b);scroll-snap-align:start;scroll-snap-stop:always}.hero-background{position:absolute;inset:0;overflow:hidden}.hero-background:before{content:"";position:absolute;inset:0;background:radial-gradient(circle 400px at 50% 300px,#7c3aed,transparent);z-index:0}.particles{position:absolute;inset:0;z-index:1}.particle{position:absolute;background:#fff;border-radius:50%;pointer-events:none;opacity:.6;width:var(--size, 5px);height:var(--size, 5px);left:var(--x, 50%);top:var(--y, 50%);animation:float3d var(--duration, 15s) ease-in-out infinite var(--delay, 0s)}.hero-content{position:relative;z-index:10;transform:translateY(0);transition:all .5s ease-out}.scroll-indicator{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem}.scroll-indicator span{font-size:.875rem;color:#9ca3af;font-weight:500}.scroll-indicator .scroll-icon{width:1.5rem;height:2.5rem;border:2px solid #4b5563;border-radius:9999px;display:flex;justify-content:center;padding:.25rem}.scroll-indicator .scroll-dot{width:.25rem;height:.5rem;background:linear-gradient(to bottom,#a78bfa,#c084fc);border-radius:9999px;animation:scroll 2s ease-in-out infinite}@keyframes scroll{0%{transform:translateY(0);opacity:0}50%{opacity:1}to{transform:translateY(12px);opacity:0}}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes float3d{0%,to{transform:translateZ(0) rotate(0) scale(1);opacity:.8}25%{transform:translate3d(10px,-20px,20px) rotate(2deg) scale(1.05);opacity:1}50%{transform:translate3d(0,-40px,0) rotate(0) scale(1.1);opacity:.8}75%{transform:translate3d(-10px,-20px,-20px) rotate(-2deg) scale(1.05);opacity:1}}.animate-gradient{background-size:200% 200%;animation:gradient 8s ease infinite}.animate-scroll{animation:scroll 2s ease-in-out infinite}.phone-scroll-container{width:350px;height:700px;perspective:1000px;position:relative}.phone-container{width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.16,1,.3,1)}.phone-tilt{width:100%;height:100%;transform-style:preserve-3d;transition:transform .1s ease-out;will-change:transform}.phone-image{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;border-radius:16px;box-shadow:0 25px 50px -12px #00000040;border:1px solid rgba(255,255,255,.1)}.screenshot-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;border-radius:16px}.screenshot-track{position:absolute;width:100%;height:300%;display:flex;flex-direction:column;transition:transform 1s cubic-bezier(.16,1,.3,1)}.screenshot{flex:1;background-size:cover;background-position:center;background-repeat:no-repeat}.mockup-frame{position:absolute;width:100%;height:100%;border-radius:44px;background:linear-gradient(145deg,#0a0f1a,#1a202c);transform:translateZ(0);box-shadow:inset 0 0 40px #00000080,inset 0 0 0 1px #ffffff0d;pointer-events:none;overflow:hidden}.mockup-side{position:absolute;background:linear-gradient(145deg,#0f172a,#1e293b);transform-style:preserve-3d}.mockup-side-top{top:0;left:20px;right:20px;height:20px;transform:translateZ(-10px) rotateX(-90deg);transform-origin:bottom center;border-radius:8px 8px 0 0}.mockup-side-right{top:20px;right:0;bottom:20px;width:20px;transform:translateZ(-10px) rotateY(90deg);transform-origin:left center;border-radius:0 8px 8px 0}.mockup-side-bottom{bottom:0;left:20px;right:20px;height:20px;transform:translateZ(-10px) rotateX(90deg);transform-origin:top center;border-radius:0 0 8px 8px}.mockup-side-left{top:20px;left:0;bottom:20px;width:20px;transform:translateZ(-10px) rotateY(-90deg);transform-origin:right center;border-radius:8px 0 0 8px}.mockup-reflections{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:40px;pointer-events:none}.reflection{position:absolute;background:linear-gradient(45deg,rgba(255,255,255,.1),transparent);border-radius:50%;pointer-events:none;filter:blur(8px);opacity:.6;transition:opacity .4s ease}.mockup-stand{position:absolute;width:120px;height:60px;background:linear-gradient(145deg,#0a0f1a,#1a202c);border-radius:4px 4px 20px 20px;bottom:-50px;left:50%;transform:translate(-50%);box-shadow:0 10px 20px #0003}@media (max-width: 768px){.phone-scroll-container{width:280px;height:560px;margin:0 auto}.hero-section{padding-top:6rem;padding-bottom:6rem}.scroll-indicator{bottom:.4rem;z-index:11}}.video-wrapper{max-width:100%;padding:0 1.5rem;display:flex;justify-content:center;margin:0 auto}.video-container{position:relative;width:100%;max-width:960px;aspect-ratio:16 / 9;overflow:hidden;border-radius:1rem;box-shadow:0 0 60px #ffffff0d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1)}.video-container iframe{position:absolute;width:100%;height:100%;inset:0;border:none}.blog-hero{scroll-snap-align:start;scroll-snap-stop:always}.blog-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle 480px at 50% 320px,#ec4899 0%,transparent 70%);mix-blend-mode:soft-light;z-index:0}@media (min-width: 768px) and (max-width: 1023.98px){.hero-section{min-height:auto;padding-block:6rem;align-items:flex-start}#hero-content h1{font-size:3.25rem;line-height:1.1}#hero-content .mt-10{flex-direction:row;gap:1.5rem}.phone-scroll-container{width:320px;height:640px;margin-top:3rem}}