.hero{background:var(--bg-primary,#111);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.grain-overlay{z-index:2;opacity:.01;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");position:absolute;inset:0}.hero-overlay{z-index:1;background:#000000d6;position:absolute;inset:0}.hero-video-container{z-index:0;width:100%;height:100%;position:absolute;inset:0}.hero-video{object-fit:cover;width:100%;height:100%;animation:1.5s ease-out videoZoomIn}.hero-content{z-index:3;text-align:center;flex-direction:column;align-items:center;gap:1.5rem;display:flex;position:relative}.logo-wrapper{display:inline-block;position:relative}.hero-logo{opacity:0;transform-origin:50%;width:clamp(300px,45vw,600px);height:auto;transition:transform 1s ease-in-out,filter 1s ease-in-out;animation:1.2s ease-out .3s forwards logoReveal;transform:scale(1)}.hero-logo:hover{filter:brightness(0)invert()drop-shadow(0 0 35px #fff9);transform:scale(1.15)}.fallback-title{color:#fff;font-size:clamp(2rem,5vw,4rem)}.hero-tagline{color:#f0f0f0;letter-spacing:3px;font-size:clamp(1rem,2.5vw,1.4rem);font-weight:300}.reveal-text span{opacity:0;animation:1s ease-out 1s forwards wordReveal,1s ease-out 1s forwards wordRevealGlow;display:inline-block}.frame-system{pointer-events:none;z-index:10;position:absolute;inset:0}.frame-line{background:var(--accent,#00d4d4);box-shadow:0 0 15px var(--accent,#00d4d4),0 0 30px #00d4d480;position:absolute}.frame-right{transform-origin:top;border-radius:5px;width:3px;height:0;animation:3s ease-in-out 2s infinite framePulse,1.5s ease-out 2s forwards frameGrowVertical;top:19%;right:10%}.frame-bottom{transform-origin:100%;border-radius:5px;width:0;height:3px;animation:3s ease-in-out 2s infinite framePulse,1.5s ease-out 2s forwards frameGrowHorizontal;bottom:15%;right:8%}.corner-br{border-right:3px solid var(--accent,#00d4d4);border-bottom:3px solid var(--accent,#00d4d4);opacity:0;width:20px;height:20px;animation:.5s ease-out 3.5s forwards fadeIn;position:absolute;bottom:15%;right:10%;box-shadow:inset -5px -5px 10px -5px #00d4d480}@keyframes videoZoomIn{0%{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes logoReveal{0%{opacity:0}to{opacity:1}}@keyframes wordReveal{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes wordRevealGlow{0%{text-shadow:0 0 #00d4d400}50%{text-shadow:0 0 20px #fffc,0 0 10px #00d4d480}to{text-shadow:0 0 10px #00d4d466}}@keyframes framePulse{0%,to{opacity:.8;box-shadow:0 0 10px var(--accent,#00d4d4)}50%{opacity:1;box-shadow:0 0 20px var(--accent,#00d4d4),0 0 40px #00d4d499}}@keyframes frameGrowVertical{0%{opacity:0;height:0}to{opacity:1;height:70vh}}@keyframes frameGrowHorizontal{0%{opacity:0;width:0}to{opacity:1;width:80vw}}@keyframes fadeIn{to{opacity:1}}@media (width<=768px){.hero-logo{width:clamp(300px,75vw,550px)}.frame-right{right:15%}.frame-bottom{width:0;bottom:20%;right:10%}.corner-br{bottom:20%;right:15%}@keyframes frameGrowHorizontal{to{width:70vw}}}@media (width<=480px){.hero-logo{width:clamp(250px,85vw,400px)}.frame-right{right:10%}.frame-bottom{bottom:15%;right:5%}.corner-br{bottom:15%;right:10%}}