/* Motion enhances the approved identity; static HTML remains the baseline. */
.site-header{position:sticky;top:0;background:#080e19e8;backdrop-filter:blur(20px) saturate(140%);transition:background .3s,box-shadow .3s}
.site-header.is-scrolled{box-shadow:0 12px 45px #0000001f;background:#080e19f5}
.site-header:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#226bd8,#63b4ff);transform:scaleX(var(--read-progress,0));transform-origin:left;pointer-events:none}
[data-theme=light] .site-header{background:#f4f7fce8}[data-theme=light] .site-header.is-scrolled{background:#f4f7fcf5;box-shadow:0 10px 35px #3155810d}
.hero{isolation:isolate;background:#080e19;overflow:hidden}
.hero>.wrap{position:relative;z-index:1}
.hero-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:radial-gradient(ellipse at var(--light-x,75%) var(--light-y,45%),#123b6855,transparent 58%)}
.ambient-orb{position:absolute;width:58vw;height:58vw;max-width:900px;max-height:900px;min-width:380px;min-height:380px;border-radius:50%;filter:blur(70px);opacity:.23;animation:ambient-drift 19s ease-in-out infinite alternate;animation-play-state:paused;will-change:auto}
.orb-one{left:48%;top:-35%;background:radial-gradient(circle,#1b60c4aa,transparent 67%)}
.orb-two{left:35%;top:20%;background:radial-gradient(circle,#0e8da75e,transparent 65%);animation-delay:-8s;animation-duration:24s}
.atmosphere-grid{position:absolute;left:25%;top:12%;width:100%;height:105%;background-image:linear-gradient(#438bd118 1px,transparent 1px),linear-gradient(90deg,#438bd118 1px,transparent 1px);background-size:68px 68px;transform:perspective(750px) rotateX(64deg) rotateZ(-24deg);mask-image:radial-gradient(ellipse,#0009,transparent 64%);opacity:.65;animation:grid-drift 38s linear infinite;animation-play-state:paused}
.hero:after{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#73b8ff88 .7px,transparent .9px);background-size:91px 91px;mask-image:linear-gradient(90deg,transparent 35%,#0004 100%);opacity:.16;z-index:0}
.hero-scene{position:relative;width:100%;min-width:570px;flex:none;perspective:1100px;transform:perspective(1100px) rotateX(var(--scene-rx,0deg)) rotateY(var(--scene-ry,0deg)) translate3d(var(--scene-x,0px),var(--scene-y,0px),0);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.hero[data-pointer=true] .hero-scene{will-change:transform;transition:transform .3s ease-out}
.hero-scene:before{content:'';position:absolute;left:10%;top:26%;width:80%;height:60%;background:radial-gradient(ellipse,#2771cd24,transparent 65%);filter:blur(25px);pointer-events:none}
.scene-inner{position:relative;display:grid;align-items:center;animation:scene-float 8s ease-in-out infinite;animation-play-state:paused}
.hero-scene img{grid-area:1/1;min-width:0!important;width:100%;height:auto}
.signal-overlay{position:absolute;inset:0;width:100%;height:100%;fill:none;pointer-events:none;overflow:visible}
.signal-base{stroke:#4c9df8;stroke-width:1.2;opacity:.2}
.signal-packet{stroke:#75c6ff;stroke-width:3;stroke-linecap:round;stroke-dasharray:5 105;filter:drop-shadow(0 0 5px #36a0ff);animation:signal-flow 9s linear infinite;animation-play-state:paused}
.signal-packet.second{animation-delay:-3s;animation-duration:12s}.signal-packet.third{animation-delay:-7s;animation-duration:10s}
.scene-orbit{stroke:#56a0f4;stroke-width:.8;stroke-dasharray:2 11;opacity:.22;transform-origin:450px 440px;animation:orbit-breathe 12s ease-in-out infinite;animation-play-state:paused}
.scene-hotspot{position:absolute;display:flex;align-items:center;gap:7px;min-height:40px;color:#c8e3ff;font:9px var(--mono);letter-spacing:.5px;white-space:nowrap;z-index:3;transform:translate(-50%,-50%)}
.scene-hotspot .hotspot-point{position:relative;display:grid;place-items:center;width:24px;height:24px;border:1px solid #6eb9ff80;background:#102e50d9;border-radius:50%;font-size:15px;line-height:1;box-shadow:0 0 0 5px #357bce0d;transition:background .25s,box-shadow .25s,transform .25s}
.scene-hotspot .hotspot-point:before{content:'';position:absolute;inset:-6px;border:1px solid #60aeff40;border-radius:50%;animation:hotspot-pulse 4s ease-out infinite;animation-play-state:paused}
.scene-hotspot .hotspot-label{background:#0c1a2cda;border:1px solid #37649455;padding:5px 7px;border-radius:3px;transition:border-color .2s}
.scene-hotspot:hover .hotspot-point,.scene-hotspot:focus-visible .hotspot-point{background:#226bd8;box-shadow:0 0 22px #3b8bff55;transform:scale(1.08)}
.scene-hotspot:hover .hotspot-label{border-color:#75b4ff}
.hotspot-home{left:19%;top:61%}.hotspot-network{left:45%;top:87%}.hotspot-software{left:79%;top:42%}
.ambient-running .ambient-orb,.ambient-running .atmosphere-grid,.ambient-running .scene-inner,.ambient-running .signal-packet,.ambient-running .scene-orbit,.ambient-running .hotspot-point:before{animation-play-state:running}
.hero h1 em{background:linear-gradient(110deg,#4f92ff 10%,#9bdcff 50%,#6c9eff 88%);background-clip:text;-webkit-background-clip:text;color:transparent}
.eyebrow .dot{box-shadow:0 0 14px #3b8bff55}
.button{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 5px 18px #226bd812;transition:background .25s,transform .25s,box-shadow .25s}
.button:before{content:'';position:absolute;inset:-30% -60%;background:linear-gradient(110deg,transparent 38%,#fff2 48%,transparent 58%);transform:translateX(-65%);transition:transform .7s ease;pointer-events:none;z-index:-1}
.button:hover:before,.button:focus-visible:before{transform:translateX(65%)}
.button:hover{box-shadow:0 8px 28px #226bd830;transform:translateY(-2px)}
.audience-card{border-radius:6px;transition:transform .35s,border-color .35s,box-shadow .35s}
.audience-card:after,.project-card:after,.value:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(400px circle at var(--card-x,50%) var(--card-y,0px),#5c9dff12,transparent 65%);opacity:0;transition:opacity .35s;z-index:0}
.audience-card:hover:after,.project-card:hover:after,.value:hover:after{opacity:1}
.audience-card:hover{transform:translateY(-4px);border-color:#4e8fd075;box-shadow:0 18px 45px #0002}
.audience-card .audience-art{transition:transform .8s cubic-bezier(.2,.7,.2,1)}.audience-card:hover .audience-art{transform:translate(-5px,-7px)}
.project-card,.value{position:relative;isolation:isolate}.project-card>*:not(:after),.value>*:not(:after){position:relative;z-index:1}
.project-art{border-radius:5px}.project-art svg{transition:transform .6s}.project-card:hover .project-art svg{transform:translateY(-5px) scale(1.06)}
.service-row{position:relative;transition:color .25s,transform .3s,background .3s,padding .25s}
.service-row:before{content:'';position:absolute;inset:0 -15px;background:linear-gradient(90deg,#3b8bff08,transparent);opacity:0;transition:opacity .3s;pointer-events:none}
.service-row:hover{padding-left:0;transform:translateX(5px)}.service-row:hover:before{opacity:1}
.service-row .arrow{transition:transform .3s,color .3s}.service-row:hover .arrow{transform:translate(3px,-3px)}
.scroll-reveal{transition:opacity .8s cubic-bezier(.2,.65,.2,1),translate .8s cubic-bezier(.2,.65,.2,1);transition-delay:var(--reveal-delay,0ms)}
.scroll-reveal.reveal-pending{opacity:0;translate:0 24px}
.cta{position:relative;overflow:hidden}.cta:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 90% 90%,#246fdc0e,transparent 60%);pointer-events:none}
[data-theme=light] .hero{background:#f4f7fc}[data-theme=light] .hero-atmosphere{background:radial-gradient(ellipse at var(--light-x,75%) var(--light-y,45%),#a5d2ff42,transparent 60%)}
[data-theme=light] .ambient-orb{opacity:.19}[data-theme=light] .orb-one{background:radial-gradient(circle,#7cb7f7aa,transparent 67%)}[data-theme=light] .orb-two{background:radial-gradient(circle,#6dcae35e,transparent 65%)}
[data-theme=light] .atmosphere-grid{background-image:linear-gradient(#4f8bc11a 1px,transparent 1px),linear-gradient(90deg,#4f8bc11a 1px,transparent 1px);opacity:.65}
[data-theme=light] .hero h1 em{background:linear-gradient(110deg,#1d5ec0,#287fd4 55%,#1d5ec0);background-clip:text;-webkit-background-clip:text;color:transparent}
[data-theme=light] .scene-hotspot{color:#244f7b}[data-theme=light] .hotspot-point{background:#ecf6ffeb;border-color:#4c8dca80}
[data-theme=light] .hotspot-label{background:#f8fcffeb;border-color:#91b6db99}[data-theme=light] .scene-hotspot:hover .hotspot-point{color:#fff;background:#226bd8}
[data-theme=light] .signal-packet{stroke:#2f85dc;filter:drop-shadow(0 0 4px #57a6ff44)}[data-theme=light] .signal-base{stroke:#558ec0;opacity:.23}
[data-theme=light] .scene-orbit{stroke:#3d85c3}[data-theme=light] .audience-card:hover{box-shadow:0 20px 45px #1c5c9b0b}
@keyframes ambient-drift{from{transform:translate3d(-3%,-3%,0) scale(.95)}to{transform:translate3d(10%,8%,0) scale(1.08)}}
@keyframes grid-drift{to{background-position:136px 68px}}
@keyframes scene-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes signal-flow{to{stroke-dashoffset:-330}}
@keyframes orbit-breathe{0%,100%{opacity:.15;transform:scale(1)}50%{opacity:.3;transform:scale(1.025)}}
@keyframes hotspot-pulse{0%{transform:scale(.8);opacity:0}25%{opacity:.6}100%{transform:scale(1.6);opacity:0}}
@media(max-width:1150px){.hero-scene{min-width:520px}}
@media(max-width:950px){.hero-scene{min-width:440px}}
@media(max-width:700px){.hero-scene{min-width:0}.ambient-orb{filter:blur(45px);width:110vw;height:110vw;min-width:0;min-height:0}.orb-one{left:0;top:25%}.orb-two{left:30%;top:50%}.atmosphere-grid{left:0;top:20%;width:140%;background-size:50px 50px}.scene-hotspot{font-size:7px;gap:4px}.scene-hotspot .hotspot-point{width:21px;height:21px;font-size:13px}.hotspot-label{padding:4px!important}.hotspot-home{left:19%;top:64%}.hotspot-software{left:78%;top:40%}.hotspot-network{left:45%;top:88%}.scroll-reveal.reveal-pending{translate:0 16px}.service-row:hover{transform:none}.scene-inner{animation-duration:10s}}
[data-document-hidden=true] *,[data-document-hidden=true] *:before{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.ambient-orb,.atmosphere-grid,.scene-inner,.signal-packet,.scene-orbit,.hotspot-point:before{animation:none!important}.hero-scene{transform:none!important;transition:none!important}.scroll-reveal.reveal-pending{opacity:1;translate:none}.scroll-reveal,.button,.audience-card,.project-art svg{transition:none!important}}
@media(forced-colors:active){.hero h1 em{color:CanvasText;background:none}.hero-atmosphere,.signal-overlay{display:none}}

/* Keep all navigation links reachable in short landscape viewports. */
@media(max-width:950px){.mobile-nav{max-height:calc(100vh - 83px);max-height:calc(100dvh - 83px);overflow-y:auto;overscroll-behavior:contain}}
@media(max-width:700px){.mobile-nav{max-height:calc(100vh - 78px);max-height:calc(100dvh - 78px)}}

