/* Lightweight interaction layer: transform and opacity only on active motion. */
:root{--motion-ease:cubic-bezier(.2,.8,.2,1)}
body{isolation:isolate}
.brand-lockup{display:grid;gap:1px;line-height:1.05}
.brand-mode{color:var(--soft);font-size:.57rem;font-weight:800;letter-spacing:.14em;transition:color .22s ease,letter-spacing .3s ease}
.brand:hover .brand-mode{color:var(--purple-dark);letter-spacing:.18em}

/* Scroll choreography: elements arrive in small, readable waves. The classes
   are added by JS only after the observer is ready, so content stays visible
   when scripting is unavailable. */
html.motion-ready .scroll-reveal{
  --reveal-x:0px;
  --reveal-y:48px;
  --reveal-scale:.985;
  opacity:0;
  filter:blur(9px);
  transform:translate3d(var(--reveal-x),var(--reveal-y),0) scale(var(--reveal-scale));
  transition:
    opacity .78s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),
    transform .92s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),
    filter .68s ease var(--reveal-delay,0ms);
  will-change:opacity,transform,filter;
}
html.motion-ready .scroll-reveal.reveal-from-left{--reveal-x:-34px;--reveal-y:18px}
html.motion-ready .scroll-reveal.reveal-from-right{--reveal-x:34px;--reveal-y:18px}
html.motion-ready .scroll-reveal.is-inview{
  opacity:1;
  filter:blur(0);
  transform:translate3d(0,0,0) scale(1);
}
.section-head.scroll-reveal{position:relative}
.section-head.scroll-reveal::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-18px;
  width:min(220px,42vw);
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink),transparent);
  opacity:0;
  transform:scaleX(.08);
  transform-origin:left;
  transition:opacity .4s ease .32s,transform .9s cubic-bezier(.16,1,.3,1) .22s;
}
.section-head.scroll-reveal.is-inview::after{opacity:.72;transform:scaleX(1)}
.scroll-reveal.is-inview{will-change:auto}

/* Quiet ambient motion: small compositor layers, no blur or full-page repaint. */
.aurora{
  display:block!important;
  filter:none!important;
  opacity:.24;
  background:radial-gradient(circle at 42% 42%,rgba(118,87,255,.24),rgba(49,199,220,.11) 48%,transparent 72%)!important;
  animation:ambient-drift 16s var(--motion-ease) infinite alternate!important;
  will-change:transform;
  contain:strict;
}
.aurora.two{
  background:radial-gradient(circle at 55% 45%,rgba(241,119,192,.22),rgba(241,185,74,.1) 48%,transparent 72%)!important;
  animation-duration:19s!important;
}
.ambient-cursor{
  position:fixed;
  left:0;
  top:0;
  z-index:-1;
  width:28rem;
  height:28rem;
  border-radius:50%;
  background:radial-gradient(circle,rgba(118,87,255,.1),rgba(49,199,220,.045) 42%,transparent 70%);
  opacity:.72;
  pointer-events:none;
  transform:translate3d(-50%,-50%,0);
  transition:transform .48s var(--motion-ease),opacity .35s ease;
  will-change:transform;
  contain:strict;
}
.route-dock{
  --route-progress:8%;
  position:fixed;
  top:96px;
  right:max(18px,calc((100vw - var(--container))/2 - 12px));
  z-index:61;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  min-width:230px;
  padding:11px 12px 11px 14px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:15px;
  background:rgba(24,24,39,.91);
  box-shadow:0 18px 46px rgba(24,24,39,.18),inset 0 1px rgba(255,255,255,.08);
  color:#fff;
  opacity:0;
  pointer-events:none;
  transform:translate3d(18px,-8px,0) scale(.96);
  transition:opacity .2s ease,transform .42s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
.route-dock::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:var(--route-progress);
  height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));
  box-shadow:0 0 14px rgba(118,87,255,.56);
  transition:width .52s cubic-bezier(.2,.85,.2,1);
}
.route-code{font-size:.62rem;font-weight:840;letter-spacing:.11em;color:rgba(255,255,255,.44);writing-mode:vertical-rl;transform:rotate(180deg)}
.route-main{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:9px;min-width:0}
.route-index{font-size:1.45rem;line-height:1;font-weight:880;letter-spacing:-.06em;color:#fff}
.route-label{max-width:130px;overflow:hidden;color:rgba(255,255,255,.72);font-size:.78rem;font-weight:720;text-overflow:ellipsis;white-space:nowrap}
.route-signal{display:grid;gap:3px}
.route-signal i{display:block;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.16)}
.route-signal i:first-child{background:var(--cyan);box-shadow:0 0 0 4px rgba(49,199,220,.1)}
body.is-route-active .route-dock{opacity:1;transform:translate3d(0,0,0) scale(1)}
body.is-route-active .route-signal i{animation:signal-step .58s ease both}
body.is-route-active .route-signal i:nth-child(2){animation-delay:.09s}
body.is-route-active .route-signal i:nth-child(3){animation-delay:.18s}

.nav-links{
  --indicator-x:0px;
  --indicator-w:0px;
  position:relative;
  padding:3px;
  isolation:isolate;
}
.nav-links::before{
  content:"";
  position:absolute;
  inset:2px auto 2px 0;
  z-index:-1;
  width:var(--indicator-w);
  border:1px solid rgba(118,87,255,.16);
  border-radius:11px;
  background:linear-gradient(110deg,rgba(118,87,255,.12),rgba(49,199,220,.08),rgba(241,119,192,.1));
  box-shadow:0 7px 22px rgba(85,51,233,.08);
  opacity:0;
  transform:translate3d(var(--indicator-x),0,0);
  transition:transform .42s cubic-bezier(.2,.85,.2,1),width .42s cubic-bezier(.2,.85,.2,1),opacity .18s ease;
}
.nav-links.indicator-ready::before{opacity:1}
.nav-links a{position:relative;padding:7px 10px;border-radius:9px;transition:color .2s ease,transform .2s ease}
.nav-links a:hover{transform:translateY(-1px)}
.nav-links a.active{color:var(--purple-dark)}
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--purple);
  transform:translateX(-50%);
  box-shadow:0 0 0 4px rgba(118,87,255,.1);
}

.button,.command-step,.data-tab,.system-step{position:relative;isolation:isolate;overflow:hidden}
.button{
  --mag-x:0px;
  --mag-y:0px;
  --button-lift:0px;
  transform:translate3d(var(--mag-x),calc(var(--mag-y) + var(--button-lift)),0);
  transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease,border-color .26s ease,background-color .26s ease;
}
.button::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.22) 48%,transparent 74%);
  transform:translateX(-125%);
  transition:transform .62s cubic-bezier(.2,.75,.2,1);
}
.button:hover::before{transform:translateX(125%)}
.button:hover{--button-lift:-3px}
.button:active,.button.is-pressing{--button-lift:0px;transform:translate3d(var(--mag-x),var(--mag-y),0) scale(.975)}
.button.is-routing .arrow{transform:translateX(7px)}
.button.is-success{
  border-color:rgba(82,217,154,.45)!important;
  background:#f1fff8!important;
  color:#126b46!important;
}
.ui-ripple{
  position:absolute;
  z-index:2;
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(118,87,255,.22);
  pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  animation:ui-ripple .58s ease-out forwards;
}
.button.primary .ui-ripple,.command-step .ui-ripple,.system-step .ui-ripple{background:rgba(255,255,255,.32)}

.data-tab{
  transition:transform .35s cubic-bezier(.2,.85,.2,1),background-color .26s ease,color .26s ease,box-shadow .3s ease,border-color .26s ease;
}
.data-tab::before{
  content:"";
  position:absolute;
  left:0;
  top:18%;
  width:3px;
  height:64%;
  border-radius:0 4px 4px 0;
  background:linear-gradient(var(--cyan),var(--purple),var(--pink));
  opacity:0;
  transform:scaleY(.25);
  transition:opacity .25s ease,transform .35s cubic-bezier(.2,.85,.2,1);
}
.data-tab::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(100deg,transparent 25%,rgba(118,87,255,.09) 50%,transparent 75%);
  transform:translateX(-120%);
  transition:transform .62s ease;
}
.data-tab:hover::after{transform:translateX(120%)}
.data-tab.active{transform:translateX(10px);box-shadow:0 20px 48px rgba(24,24,39,.2)}
.data-tab.active::before{opacity:1;transform:scaleY(1)}
.data-tab .tab-icon{transition:transform .38s cubic-bezier(.2,.85,.2,1),border-radius .3s ease,background-color .3s ease}
.data-tab.active .tab-icon{transform:rotate(-6deg) scale(1.06);border-radius:18px}
.data-tab.is-reselected .tab-icon{animation:icon-pop .35s ease}
.overview-panel>*{transition:opacity .38s ease,transform .48s cubic-bezier(.16,1,.3,1),filter .3s ease}
.overview-panel.is-switching>*{
  opacity:0;
  filter:blur(7px);
  transform:translate3d(var(--panel-shift,22px),10px,0) scale(.985);
  transition-duration:.13s;
}
.overview-panel.is-entering .overview-top{animation:panel-materialize .58s both cubic-bezier(.16,1,.3,1)}
.overview-panel.is-entering .delivery-path{animation:panel-frame-in .18s both ease-out}
.overview-panel.is-entering .path-step{animation:panel-materialize .58s both cubic-bezier(.16,1,.3,1)}
.overview-panel.is-entering .path-step:nth-child(1){animation-delay:.09s}
.overview-panel.is-entering .path-step:nth-child(2){animation-delay:.17s}
.overview-panel.is-entering .path-step:nth-child(3){animation-delay:.25s}
.overview-panel.is-entering .path-step:nth-child(4){animation-delay:.33s}
.overview-panel.is-entering .overview-foot{animation:panel-frame-in .15s .34s both ease-out}
.overview-panel.is-entering .overview-foot .tag{animation:tag-materialize .42s both cubic-bezier(.16,1,.3,1)}
.overview-panel.is-entering .overview-foot .tag:nth-child(1){animation-delay:.38s}
.overview-panel.is-entering .overview-foot .tag:nth-child(2){animation-delay:.43s}
.overview-panel.is-entering .overview-foot .tag:nth-child(3){animation-delay:.48s}
.overview-panel.is-entering .overview-foot .tag:nth-child(4){animation-delay:.53s}
.overview-panel.is-entering .overview-foot .tag:nth-child(5){animation-delay:.58s}
.overview-panel.is-entering .overview-foot .tag:nth-child(6){animation-delay:.63s}
.path-step{transition:transform .26s ease,border-color .26s ease,background-color .26s ease}
.overview-panel:not(.is-switching) .path-step:hover{transform:translateY(-4px);border-color:rgba(118,87,255,.22);background:#fff}

/* Pointer spotlight is painted only inside the hovered card. */
.proof-card,.capability-card,.overview-panel{--spot-x:50%;--spot-y:50%}
.proof-card::after,.capability-card::after,.overview-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle 180px at var(--spot-x) var(--spot-y),rgba(255,255,255,.68),rgba(118,87,255,.055) 42%,transparent 72%);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.proof-card:hover::after,.capability-card:hover::after,.overview-panel:hover::after{opacity:.7}
.proof-card>* ,.capability-card>* ,.overview-panel>*{position:relative;z-index:1}

.hero-intro.visible .eyebrow{animation:hero-arrive .62s .06s both var(--motion-ease)}
.hero-intro.visible h1{animation:hero-arrive .72s .12s both var(--motion-ease)}
.hero-intro.visible .hero-copy{animation:hero-arrive .72s .2s both var(--motion-ease)}
.hero-intro.visible .hero-actions{animation:hero-arrive .72s .28s both var(--motion-ease)}
.hero-intro.visible .hero-note{animation:hero-arrive .72s .36s both var(--motion-ease)}
.gradient-word{background-size:180% 100%;animation:gradient-breathe 8s ease-in-out infinite alternate}

.command-main::before{
  content:"";
  position:absolute;
  z-index:0;
  top:-25%;
  bottom:-25%;
  left:0;
  width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.075),transparent);
  transform:translate3d(-220%,0,0) skewX(-14deg);
  animation:command-scan 7.5s ease-in-out infinite;
  animation-play-state:paused;
  pointer-events:none;
}
.command-card.motion-active .command-main::before{animation-play-state:running}
.command-card.motion-active .command-step.active{animation:flow-breathe 2.8s ease-in-out infinite}
.motion-paused .aurora,.motion-paused .gradient-word,.motion-paused .command-main::before,.motion-paused .command-step.active{animation-play-state:paused!important}
.command-main #command-kicker,.command-main #command-title,.command-main #command-copy{transition:opacity .28s ease,transform .38s cubic-bezier(.16,1,.3,1),filter .28s ease}
.command-main.is-switching #command-kicker{animation:command-content-in .36s both cubic-bezier(.16,1,.3,1)}
.command-main.is-switching #command-title{animation:command-content-in .42s .035s both cubic-bezier(.16,1,.3,1)}
.command-main.is-switching #command-copy{animation:command-content-in .46s .07s both cubic-bezier(.16,1,.3,1)}
.team-dots i{transition:transform .34s var(--motion-ease)}
.command-card:hover .team-dots i:nth-child(1){transform:translateY(-3px)}
.command-card:hover .team-dots i:nth-child(2){transform:translateY(-6px)}
.command-card:hover .team-dots i:nth-child(3){transform:translateY(-4px)}
.command-card:hover .team-dots i:nth-child(4){transform:translateY(-7px)}

.system-nav{
  --step-progress:8.33%;
  position:relative;
  isolation:isolate;
}
.system-nav::before,.system-nav::after{
  content:"";
  position:absolute;
  left:4%;
  top:50%;
  z-index:-1;
  height:2px;
  border-radius:999px;
  transform:translateY(-50%);
}
.system-nav::before{right:4%;background:rgba(255,255,255,.08)}
.system-nav::after{
  width:var(--step-progress);
  max-width:92%;
  background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));
  box-shadow:0 0 18px rgba(118,87,255,.35);
  transition:width .46s cubic-bezier(.2,.85,.2,1);
}
.system-step{
  z-index:1;
  transition:transform .34s cubic-bezier(.2,.85,.2,1),background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.system-step::after{
  content:"";
  position:absolute;
  inset:auto 18px 8px;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.85);
  opacity:0;
  transform:scaleX(.2);
  transition:opacity .26s ease,transform .34s ease;
}
.system-step.active{transform:translateY(-6px);box-shadow:0 14px 30px rgba(84,51,233,.34),0 0 0 3px rgba(118,87,255,.18)}
.system-step.active::after{opacity:1;transform:scaleX(1)}
.system-detail{position:relative;overflow:hidden}
.system-detail>*{transition:opacity .38s ease,transform .5s cubic-bezier(.16,1,.3,1),filter .3s ease}
.system-detail.is-switching>*{opacity:0;filter:blur(5px);transform:translate3d(var(--detail-shift,24px),8px,0)}
.system-detail::before{
  content:"";
  position:absolute;
  left:0;
  top:28px;
  width:34%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--purple),transparent);
  opacity:0;
  transform:translateX(-120%);
  pointer-events:none;
}
.system-detail.is-switching::before{animation:detail-trace .58s ease-out both}
.system-proof{transition:border-color .3s ease,background-color .3s ease,transform .34s cubic-bezier(.2,.85,.2,1)}
.system-detail:not(.is-switching) .system-proof{transform:translateY(-2px);border-color:rgba(118,87,255,.32);background:rgba(255,255,255,.075)}

.section.arrival .section-label,.contact.arrival .section-label{animation:arrival-pulse .82s cubic-bezier(.2,.8,.2,1)}
.section.arrival .section-title h2,.contact.arrival .contact-panel h2{animation:destination-settle .78s var(--motion-ease)}
.section.arrival .overview-shell,.section.arrival .capability-grid,.section.arrival .system-card,.section.arrival .profile-grid,.contact.arrival .contact-actions{animation:destination-content .82s .08s both cubic-bezier(.16,1,.3,1)}
.section[id]>.container,.contact[id]>.container{position:relative}
.section.arrival>.container::before,.contact.arrival>.container::before{
  content:"TARGET / LOCKED";
  position:absolute;
  top:-28px;
  right:0;
  z-index:3;
  padding-left:18px;
  color:var(--purple-dark);
  font-size:.62rem;
  font-weight:850;
  letter-spacing:.12em;
  opacity:0;
  animation:target-lock .82s cubic-bezier(.16,1,.3,1) both;
}
.section.arrival>.container::after,.contact.arrival>.container::after{
  content:"";
  position:absolute;
  top:-20px;
  right:104px;
  z-index:3;
  width:38px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--purple));
  transform-origin:right;
  animation:target-trace .82s ease-out both;
}
@keyframes ui-ripple{to{opacity:0;transform:translate(-50%,-50%) scale(18)}}
@keyframes icon-pop{50%{transform:rotate(7deg) scale(1.14)}}
@keyframes arrival-pulse{0%{box-shadow:0 0 0 0 rgba(118,87,255,.28)}100%{box-shadow:0 0 0 18px rgba(118,87,255,0)}}
@keyframes ambient-drift{from{transform:translate3d(-10px,-8px,0) scale(.96)}to{transform:translate3d(28px,22px,0) scale(1.08)}}
@keyframes signal-step{0%{opacity:.2;transform:scale(.65)}45%{opacity:1;transform:scale(1.35)}100%{opacity:.55;transform:scale(1)}}
@keyframes target-lock{0%{opacity:0;transform:translateX(16px)}28%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-5px)}}
@keyframes target-trace{0%{opacity:0;transform:scaleX(0)}30%,65%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(.35)}}
@keyframes hero-arrive{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes gradient-breathe{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes command-scan{0%,72%{opacity:0;transform:translate3d(-220%,0,0) skewX(-14deg)}78%{opacity:1}91%{opacity:.8}100%{opacity:0;transform:translate3d(410%,0,0) skewX(-14deg)}}
@keyframes flow-breathe{0%,100%{box-shadow:0 8px 18px rgba(118,87,255,.12)}50%{box-shadow:0 10px 28px rgba(118,87,255,.34)}}
@keyframes destination-settle{0%{opacity:.45;transform:translate3d(0,12px,0)}100%{opacity:1;transform:none}}
@keyframes destination-content{0%{opacity:.58;transform:translate3d(0,18px,0) scale(.992)}100%{opacity:1;transform:none}}
@keyframes detail-trace{0%{opacity:0;transform:translateX(-120%)}30%{opacity:1}100%{opacity:0;transform:translateX(340%)}}
@keyframes panel-frame-in{from{opacity:0}to{opacity:1}}
@keyframes panel-materialize{0%{opacity:0;filter:blur(9px);transform:translate3d(var(--panel-shift,22px),18px,0) scale(.955)}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes tag-materialize{0%{opacity:0;transform:translateY(12px) scale(.88)}100%{opacity:1;transform:none}}

@media(max-width:980px){
  .nav-links{padding:12px}
  .nav-links::before{display:none}
  .nav-links a.active{background:linear-gradient(110deg,rgba(118,87,255,.12),rgba(49,199,220,.07));color:var(--purple-dark)}
  .nav-links a.active::after{left:12px;top:50%;bottom:auto;transform:translateY(-50%)}
}
@media(max-width:720px){
  .ambient-cursor,.aurora{display:none!important}
  .brand-mode{display:none}
  html.motion-ready .scroll-reveal{
    --reveal-y:30px;
    --reveal-scale:.992;
    filter:blur(5px);
    transition-duration:.58s,.7s,.52s;
  }
  html.motion-ready .scroll-reveal.reveal-from-left,
  html.motion-ready .scroll-reveal.reveal-from-right{--reveal-x:0px;--reveal-y:30px}
  .route-dock{top:auto;right:12px;bottom:12px;left:12px;min-width:0}
  .route-code{writing-mode:horizontal-tb;transform:none}
  .overview-panel.is-entering .path-step{animation-duration:.46s}
  .overview-panel.is-entering .overview-foot .tag{animation-duration:.34s}
  .data-tab.active{transform:translateY(-2px)}
  .system-nav::before,.system-nav::after{display:none}
  .system-step.active{transform:translateY(-3px)}
}
@media(hover:none),(pointer:coarse){
  .ambient-cursor,.aurora{display:none!important}
  .button:hover::before,.data-tab:hover::after{transform:translateX(-125%)}
  .command-step:hover{transform:none}
  .data-tab.active{transform:none}
  .overview-panel:not(.is-switching) .path-step:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .ambient-cursor,.aurora{display:none!important}
  .route-dock{transition:none!important}
  html.motion-ready .scroll-reveal{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
  .section-head.scroll-reveal::after{opacity:.6!important;transform:scaleX(1)!important;transition:none!important}
  .nav-links::before,.button::before,.command-step,.data-tab,.data-tab::before,.data-tab::after,.data-tab .tab-icon,.overview-panel>*,.system-nav::after,.system-step,.system-step::after,.system-detail>*{transition:none!important}
  .ui-ripple{display:none}
  .gradient-word,.command-main::before,.command-step.active,.command-main.is-switching #command-kicker,.command-main.is-switching #command-title,.command-main.is-switching #command-copy,.hero-intro.visible>*,.section.arrival .section-label,.contact.arrival .section-label,.section.arrival .section-title h2,.contact.arrival .contact-panel h2,.section.arrival>.container::before,.section.arrival>.container::after,.contact.arrival>.container::before,.contact.arrival>.container::after,.route-signal i,.overview-panel.is-entering *{animation:none!important}
}

@keyframes command-content-in{
  from{opacity:.12;filter:blur(5px);transform:translate3d(var(--command-shift,18px),6px,0)}
  to{opacity:1;filter:blur(0);transform:none}
}
