/* NeuroWaves Labz / Design One — Cinematic Interaction Layer, Oct 2026 */
:root{--electric:#66d9ff;--violet:#e66fff;--halo:rgba(103,194,255,.2)}
html{scroll-padding-top:84px}
body{background:radial-gradient(ellipse 70vw 40vw at 55% 54%,#071329 0%,#02060b 75%)}
.hero-cinema{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;mix-blend-mode:screen;filter:saturate(1.35);transition:opacity 1.8s ease}
.hero-cinema.is-playing{opacity:.18}
.hero-content{transition:transform .3s ease}
.hero h1{background:linear-gradient(110deg,#f1faff 10%,#96d7ff 45%,#f6f3ff 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero:after{content:"";position:absolute;top:40px;right:0;width:1px;height:225px;background:linear-gradient(transparent,rgba(129,194,244,.28),transparent);pointer-events:none}
.hero-cta .outline-button{position:relative}
.site-header{transition:filter .35s}
.icon-btn{border-radius:50%}
.icon-btn:hover{background:rgba(69,158,230,.075)}
.nav-link:after{background:linear-gradient(90deg,#68cfff,#d56cff);box-shadow:0 0 9px rgba(98,202,255,.5)}
.feature-card{isolation:isolate;transform:translate3d(0,0,0);will-change:transform;transition:transform .45s cubic-bezier(.21,.8,.22,1),box-shadow .4s,border-color .4s}
.feature-card:hover,.feature-card:focus-visible{z-index:3;box-shadow:0 18px 52px rgba(17,110,202,.17),0 0 28px rgba(126,61,203,.13);border-color:rgba(117,202,250,.36)}
.feature-image{background:#07172a}
.feature-image img{will-change:transform}
.feature-image:before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(110deg,transparent 27%,rgba(151,213,255,.14) 46%,transparent 64%);transform:translateX(-140%);transition:transform .8s ease;pointer-events:none}
.feature-card:hover .feature-image:before{transform:translateX(140%)}
.feature-label{background:linear-gradient(180deg,rgba(5,13,25,.97),rgba(3,8,16,.98))}
.feature-label h2{transition:color .3s}
.feature-card:hover .feature-label h2{color:#a9e1ff}
.feature-card:before{content:"";position:absolute;inset:0;border:1px solid transparent;pointer-events:none;transition:border-color .3s}
.feature-card:hover:before{border-color:rgba(120,203,255,.28)}
.capability-track{border-top:1px solid rgba(123,186,225,.09);border-bottom:1px solid rgba(123,186,225,.10);padding:12px 0;max-width:var(--wide);margin:30px auto 0;overflow:hidden;white-space:nowrap;background:linear-gradient(90deg,transparent,rgba(17,40,64,.15),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.capability-track-inner{display:flex;align-items:center;gap:33px;width:max-content;animation:capabilityRoll 42s linear infinite}
.capability-track-inner span{font-size:10px;letter-spacing:.23em;color:#a9bfd7;font-weight:600}
.capability-track-inner i{color:#6ba9df;font-style:normal;font-size:12px}
.capability-track:hover .capability-track-inner{animation-play-state:paused}
@keyframes capabilityRoll{to{transform:translateX(-50%)}}
.content-section{z-index:1}
.content-section .section-topline{position:relative}
.content-section .section-topline:after{content:"";position:absolute;width:50px;height:1px;background:linear-gradient(90deg,#6acfff,#e880ff);bottom:-13px;left:0;box-shadow:0 0 15px rgba(96,196,255,.4)}
.category-chip{background:rgba(53,135,203,.08)}
.product-showcase{box-shadow:0 25px 70px rgba(0,0,0,.15)}
.product-visual{transform-style:preserve-3d}
.product-visual img{transition:filter .35s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.product-visual:hover img{transform:scale(1.018)}
.product-copy h3{filter:drop-shadow(0 0 12px rgba(111,168,255,.1))}
.product-features span{padding:7px 10px;border:1px solid rgba(109,191,249,.15);color:#bad3e8;background:rgba(22,57,95,.16)}
.experience-section{padding-top:80px}
.experience-heading{max-width:930px}
.experience-window{display:grid;grid-template-columns:minmax(270px,29%) minmax(0,71%);border:1px solid rgba(114,182,238,.23);background:#040b16;min-height:490px;box-shadow:0 25px 100px rgba(0,0,0,.22);overflow:hidden}
.experience-side{display:flex;flex-direction:column;justify-content:space-between;min-width:0;border-right:1px solid rgba(114,182,238,.16);background:linear-gradient(140deg,rgba(13,40,64,.45),transparent 55%),#040a12}
.mode-selector{display:grid;grid-template-columns:1fr}
.mode-button{border:0;border-bottom:1px solid rgba(143,196,240,.13);background:transparent;color:#9aafc5;min-height:85px;padding:18px 23px;text-align:left;display:grid;grid-template-columns:32px 1fr;gap:0 10px;position:relative;transition:color .3s,background .3s}
.mode-button span{grid-row:1/3;font-size:10px;letter-spacing:.1em;color:#6e849d;margin-top:4px}
.mode-button strong{font-size:16px;letter-spacing:.13em;font-weight:650}
.mode-button small{font-size:9px;letter-spacing:.15em;align-self:end}
.mode-button:before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:linear-gradient(#69caff,#dd5df9);transform:scaleY(0);transition:transform .3s;transform-origin:center}
.mode-button:hover,.mode-button:focus-visible,.mode-button.active{color:#f1f8ff;background:linear-gradient(90deg,rgba(45,119,185,.2),transparent 90%)}
.mode-button.active:before,.mode-button:hover:before{transform:scaleY(1)}
.mode-button.active span{color:#69d3ff}
.mode-copy{padding:34px 24px 38px;min-height:215px}
.mode-count{color:#82c4ea;letter-spacing:.19em;font-size:10px}
.mode-copy h3{font-size:26px;font-weight:400;letter-spacing:-.03em;color:#f0f7ff;margin:16px 0 12px}
.mode-copy p{color:#9eafc4;font-size:13px;line-height:1.8;margin:0 0 21px}
.mode-copy .text-link{font-size:10px;letter-spacing:.14em}
.experience-visual{padding:16px;display:flex;flex-direction:column;min-width:0;background:radial-gradient(ellipse at 50% 50%,rgba(35,97,147,.13),transparent 65%),#02070e}
.experience-preview-top,.experience-preview-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 3px 15px;font-size:9px;letter-spacing:.16em;color:#8bbad7;white-space:nowrap}
.experience-preview-top span:nth-child(2){margin-right:auto}
.live-indicator{width:6px;height:6px;background:#6bd7fa;border-radius:50%;box-shadow:0 0 10px #51c8ff;animation:ledPulse 2.4s ease-in-out infinite}
@keyframes ledPulse{50%{opacity:.38;box-shadow:0 0 3px #51c8ff}}
.experience-image-wrap{position:relative;min-height:0;flex:1;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(83,169,225,.3);background:#02070e}
.experience-image-wrap img{width:100%;height:auto;max-height:450px;object-fit:contain;display:block;opacity:1;transition:opacity .22s ease,transform .65s ease,filter .45s ease;filter:saturate(.91)}
.experience-image-wrap img.out{opacity:.12;transform:scale(1.025)}
.experience-image-wrap:hover img{filter:saturate(1.2) brightness(1.08);transform:scale(1.015)}
.scan-glint{position:absolute;inset:0;background:linear-gradient(120deg,transparent 37%,rgba(95,216,248,.07) 50%,transparent 63%);transform:translateX(-130%);pointer-events:none}
.experience-image-wrap:hover .scan-glint{animation:scanPreview 1.1s ease-out}
@keyframes scanPreview{to{transform:translateX(130%)}}
.experience-preview-bottom{padding:13px 3px 0;color:#90c8e7}
.technology-visual{background-image:linear-gradient(180deg,rgba(1,7,18,.28),rgba(1,7,18,.37)),url('assets/neural-sphere-new.webp');background-position:center;background-size:cover;position:relative}
.technology-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 15%,rgba(1,7,14,.35) 84%);pointer-events:none}
.technology-visual .visual-vignette{pointer-events:none}
.flow-section{padding-top:75px}
.flow-intro{display:grid;grid-template-columns:60% 40%;align-items:end;gap:25px;margin-bottom:45px}
.flow-intro>p{color:#a1b6c8;line-height:1.95;max-width:440px;font-size:15px;padding:0 22px 12px}
.flow-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.flow-connector{position:absolute;left:9%;right:9%;height:1px;top:90px;background:linear-gradient(90deg,rgba(53,147,221,.2),rgba(102,207,250,.55),rgba(222,83,239,.5),rgba(53,147,221,.2));overflow:hidden}
.flow-connector:after{content:"";position:absolute;left:-20%;top:0;height:100%;width:20%;background:linear-gradient(90deg,transparent,#e0efff,transparent);animation:signalTravel 5s linear infinite}
@keyframes signalTravel{to{left:120%}}
.flow-step{position:relative;border:1px solid rgba(113,177,231,.17);min-height:285px;padding:25px 24px 29px;background:linear-gradient(160deg,rgba(19,46,74,.23),rgba(1,6,13,.7));transition:transform .35s,border-color .35s,box-shadow .35s}
.flow-step:hover{transform:translateY(-9px);border-color:rgba(94,194,249,.55);box-shadow:0 17px 42px rgba(15,62,121,.2)}
.flow-index{font-size:10px;letter-spacing:.14em;color:#75b5e4}
.flow-symbol{height:112px;display:grid;place-items:center}
.flow-symbol svg{max-width:120px;width:100%;height:78px;stroke:#8dd7ff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(80,194,255,.35));transition:stroke .3s,transform .4s}
.flow-step:nth-child(5) .flow-symbol svg{stroke:#d58cff}
.flow-step:hover .flow-symbol svg{transform:scale(1.13);stroke:#e3f9ff}
.flow-step h3{font-size:13px;letter-spacing:.15em;margin:6px 0 11px}
.flow-step p{font-size:13px;line-height:1.8;color:#96a9bf;margin:0}
.cinema-section{min-height:510px;max-width:var(--wide);margin:0 auto 15px;position:relative;border:1px solid rgba(124,182,224,.2);display:flex;align-items:center;overflow:hidden;background:#030915}
.cinema-background{position:absolute;inset:0}
.cinema-background img{width:100%;height:100%;object-fit:cover;opacity:.7;filter:saturate(1.25) brightness(.55);transition:filter .8s,transform 3s}
.cinema-section:hover .cinema-background img{filter:saturate(1.45) brightness(.68);transform:scale(1.04)}
.cinema-background:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,6,13,.95) 0%,rgba(2,8,20,.72) 35%,rgba(2,6,12,.10) 100%)}
.cinema-content{position:relative;z-index:1;max-width:690px;padding:60px 70px}
.cinema-content h2{font-size:clamp(44px,5.5vw,83px);font-weight:300;letter-spacing:-.05em;line-height:1.07;margin:0 0 18px}
.cinema-content h2 em{font-style:normal;color:#95d5ff}
.cinema-content>p:not(.eyebrow){color:#b1c4d7;font-size:15px;line-height:1.8;margin-bottom:28px}
.cinema-play{color:#f4f8ff;display:flex;align-items:center;gap:20px;border:0;background:transparent;text-align:left;padding:0;font-size:12px;letter-spacing:.12em;font-weight:700}
.cinema-play small{display:block;color:#94adc5;font-size:9px;font-weight:500;letter-spacing:.13em;margin-top:8px}
.cinema-play:hover .play-circle{transform:scale(1.12);border-color:#78ddff;box-shadow:0 0 35px rgba(111,190,255,.29)}
.cinema-line{position:absolute;z-index:1;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#52b9f4 0%,transparent 30%,#cf6efc 85%,transparent)}
.studio-photo img{transition:transform 1s ease,filter .5s}
.studio-photo:hover img{transform:scale(1.055);filter:saturate(1.16)}
.reveal-motion{transition:opacity .8s cubic-bezier(.18,.8,.26,1),transform .85s cubic-bezier(.18,.8,.26,1)}
body.motion-ready .reveal-motion:not(.is-visible){opacity:0;transform:translateY(34px)}
body.motion-ready .reveal-motion.is-visible{opacity:1;transform:translateY(0)}
.pointer-aura{width:310px;height:310px;position:fixed;top:0;left:0;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(77,163,230,.11),transparent 66%);pointer-events:none;z-index:9;opacity:0;transition:opacity .3s;mix-blend-mode:screen}
@media(pointer:fine){body:hover .pointer-aura{opacity:1}}
@media (max-width:1050px){.experience-window{grid-template-columns:minmax(230px,31%) minmax(0,69%)}.mode-button{min-height:77px}.mode-copy{padding:24px}.flow-step{padding:20px 17px}.cinema-section{min-height:440px}}
@media (max-width:800px){.hero-cinema{display:none}.experience-window{grid-template-columns:1fr}.experience-side{border-right:0;border-bottom:1px solid rgba(114,182,238,.2)}.mode-selector{grid-template-columns:repeat(3,minmax(0,1fr))}.mode-button{grid-template-columns:1fr;gap:7px;min-height:88px;padding:16px 18px}.mode-button span{grid-row:auto}.mode-button strong{font-size:13px}.mode-button small{font-size:8px}.mode-copy{min-height:auto;padding:19px 22px 24px}.mode-copy h3{font-size:22px}.mode-copy p{margin-bottom:13px}.experience-visual{padding:14px}.flow-intro{grid-template-columns:1fr;gap:0}.flow-intro>p{padding:0}.flow-steps{grid-template-columns:repeat(2,1fr)}.flow-connector{display:none}.cinema-section{min-height:400px}.cinema-content{padding:45px}}
@media (max-width:580px){.capability-track{margin-top:26px}.capability-track-inner{gap:22px}.capability-track-inner span{font-size:9px}.feature-card:hover{transform:none!important}.experience-section{padding-top:52px}.experience-window{min-height:auto}.mode-button{padding:14px 10px;min-height:75px}.mode-button strong{font-size:12px}.mode-button small{font-size:7px;letter-spacing:.09em}.experience-preview-top,.experience-preview-bottom{font-size:7px;letter-spacing:.1em}.experience-preview-top>span:last-child{display:none}.experience-image-wrap img{min-height:150px}.flow-steps{grid-template-columns:1fr;gap:10px}.flow-step{min-height:176px;display:grid;grid-template-columns:105px 1fr;grid-template-rows:auto auto;column-gap:15px;align-items:center;padding:18px}.flow-index{position:absolute;right:18px;top:15px}.flow-symbol{grid-row:1/3;height:auto}.flow-symbol svg{max-width:95px}.flow-step h3{align-self:end;margin-bottom:4px}.flow-step p{align-self:start}.cinema-section{min-height:360px}.cinema-content{padding:30px 22px}.cinema-content h2{font-size:46px}.cinema-content>p:not(.eyebrow){font-size:13px}.pointer-aura{display:none}}
@media (prefers-reduced-motion:reduce){.hero-cinema,.pointer-aura{display:none}.reveal-motion{opacity:1!important;transform:none!important}.capability-track-inner,.flow-connector:after,.live-indicator{animation:none!important}}