/* =======================================================================
   DIRECTION 6 — "Deck"
   The existing Technology & Product deck language: one continuous
   background windowed by scroll, the flowing-line hero, the dot rail,
   white product cards riding the blue.
   ======================================================================= */
:root{
  --blue:#0098FF; --blue-2:#7FD0FF;
  --ink:#0A0A11; --line:rgba(255,255,255,.22); --line-2:rgba(255,255,255,.38);
  --grey:rgba(255,255,255,.80); --grey-2:rgba(255,255,255,.62);
}
html{background:#0A0A11;}
body{background:transparent; color:#fff;}
.mono{color:var(--grey-2);}

.deckbg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,#0A0A11 0%,#0E0F17 7%,#141C2E 15%,#0B4F87 42%,#0098FF 72%,#FFFFFF 88%,#FFFFFF 100%);
  background-repeat:no-repeat; z-index:-1;
}


.nav{position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center;
  justify-content:space-between; padding:14px var(--pad); background:rgba(10,10,17,.55);
  backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.14); transition:background .4s ease, color .4s ease;}
.nav__mark{height:15px; filter:brightness(0) invert(1); transition:filter .4s ease;}
.nav__meta{color:rgba(255,255,255,.6); transition:color .4s ease;}
.nav.is-light{background:rgba(255,255,255,.72); border-bottom-color:rgba(10,10,17,.12);}
.nav.is-light .nav__mark{filter:none;}
.nav.is-light .nav__meta{color:#7A828C;}
.dots{position:fixed; left:calc(var(--pad) * .45); top:50%; transform:translateY(-50%); z-index:50;
  display:flex; flex-direction:column; gap:11px;}
.dots i{width:7px; height:7px; border-radius:6px; border:1px solid rgba(255,255,255,.5); display:block; transition:all .3s ease;}
.dots i.is-on{background:#fff; border-color:#fff; height:18px;}

/* --------------------------------------------------------------- hero */
.hero{position:relative; min-height:100svh; padding-top:80px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--pad) var(--pad) clamp(56px,9vh,96px); overflow:hidden;}
.waves{position:absolute; inset:0; width:100%; height:100%;}
.hero__inner{position:relative; z-index:2;}
.hero__h1{margin:0; font-weight:400; letter-spacing:-.025em; line-height:1.14; font-size:clamp(28px,3.9vw,56px);}
.hero__wordmark{height:clamp(28px,3.4vw,50px); width:auto; margin-top:22px; filter:brightness(0) invert(1);}
.hero__stats{display:grid; grid-template-columns:repeat(4,1fr); max-width:1080px;
  margin-top:clamp(26px,4vh,46px); border-top:1px solid rgba(255,255,255,.30);}
.hero__stats div{padding:15px 18px 0 0; display:flex; flex-direction:column;}
.hero__stats div+div{border-left:1px solid rgba(255,255,255,.30); padding-left:18px;}
.hero__stats span{display:block; color:rgba(255,255,255,.55);}
.hero__stats b{display:block; margin-top:auto; padding-top:8px; font-weight:400;
  font-size:clamp(19px,1.85vw,29px); letter-spacing:-.03em;}
.hero__stats div:first-child b{color:var(--blue-2);}
@media (max-width:900px){ .hero__stats{grid-template-columns:1fr 1fr;}
  .hero__stats div+div{border-left:none; padding-left:0;}
  .hero__stats div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.20); margin-top:4px;} }
.hero__meta{position:absolute; right:var(--pad); bottom:var(--pad); text-align:right; color:var(--grey-2); z-index:2; line-height:1.7;}

/* ------------------------------------------------------------- headings */
.kicker{margin:0 0 20px; display:flex; align-items:center; color:var(--grey-2);}
.kicker .dotmark{color:var(--blue-2);}
.h2{margin:0; font-weight:400; letter-spacing:-.03em; line-height:1.04; font-size:clamp(30px,4.2vw,60px); max-width:19ch;}
.lede{margin:22px 0 0; max-width:62ch; font-size:clamp(14.5px,1.1vw,18px); line-height:1.6; color:var(--grey);}

/* ----------------------------------------------------------- eco / cards */
.eco{background:transparent;}
.eco__stage{--cmeta:150; --railh:80; --railw:0.21;}
.connlab{font-weight:400; font-size:clamp(15px,1.7vw,26px); letter-spacing:-.025em; color:#fff;}
.connlab b{font-weight:400; color:var(--blue-2);}
.conn{color:rgba(255,255,255,.55);}
.conn .spark{fill:#fff;}

.pcard{background:#fff; color:var(--ink); border:1px solid transparent; border-radius:6px;
  transition:background .35s ease, border-color .35s ease;}
.pcard__vis{border-radius:4px; outline:1px solid rgba(10,10,17,.10);}
.pcard__num{color:#0098FF;}
.pcard__aud{color:#9AA0AA; margin-top:11px;}
.pcard__name{color:var(--ink); font-weight:400;}
.pcard__line{color:#5A6068;}
.pcard__bar{background:#0098FF;}
.pcard.is-rail{background:transparent; border-color:transparent; border-radius:0;
  border-bottom:1px solid rgba(255,255,255,.16); color:#fff;}
.pcard.is-rail .pcard__name{color:rgba(255,255,255,.62);}
.pcard.is-rail .pcard__num{color:rgba(255,255,255,.42);}
.pcard.is-rail .pcard__vis{opacity:.45; filter:saturate(.2);}
.pcard.is-active{background:#fff; border-color:#fff; border-radius:6px;}
.pcard.is-active .pcard__name{color:var(--ink);}
.pcard.is-active .pcard__num{color:#0098FF;}
.pcard.is-active .pcard__vis{opacity:1; filter:none;}

.panel__label{color:#fff;} .panel__label .dotmark{color:var(--blue-2);}
.panel__h{font-weight:400; color:#fff;}
.panel__p{color:var(--grey);}
.panel__p--mech{border-left:1px solid rgba(255,255,255,.5); padding-left:16px; color:rgba(255,255,255,.58);}
.panel__vis .mkwrap{border-radius:6px; overflow:hidden;}
.tiers{border:1px solid var(--line); background:rgba(255,255,255,.06); border-radius:5px; overflow:hidden;}
.tier{border-right:1px solid var(--line);}
.tier:last-child{border-right:none;}
.tier__lab{color:var(--grey-2);}
.tier__p{color:var(--grey);}
.tier.is-on{background:rgba(255,255,255,.14);}
.tier.is-on .tier__lab{color:#fff;}
.stats{border-top:1px solid var(--line);}
.stats li+li{border-left:1px solid var(--line);}
.stats b{font-weight:400; color:#fff;}
.stats span{color:var(--grey-2);}

/* --------------------------------------------------------------- hfpp */
.hfpp{background:transparent; padding:clamp(84px,13vh,160px) 0;}
.eq{display:flex; border:1px solid rgba(255,255,255,.32); border-radius:6px; overflow:hidden; margin-top:clamp(34px,5vw,58px); flex-wrap:wrap; background:rgba(4,26,48,.34);}
.eq__part{padding:22px 26px; flex:1 1 200px;}
.eq__part .mono{display:block; margin-bottom:10px; color:var(--grey-2);}
.eq__part b{font-weight:400; font-size:clamp(17px,1.6vw,26px); letter-spacing:-.03em; line-height:1.15; display:block;}
.eq__part--out{background:#fff; color:var(--ink);} .eq__part--out .mono{color:#9AA0AA;}
.eq__op{display:flex; align-items:center; padding:0 18px; color:var(--grey-2); border-left:1px solid var(--line-2); border-right:1px solid var(--line-2);}
.engines{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(34px,5vw,56px);}
.engine{background:rgba(4,26,48,.34); border:1px solid rgba(255,255,255,.28); border-radius:6px; padding:24px 22px 28px; backdrop-filter:blur(6px);}
.engine__num{color:#fff; display:block; opacity:.7;}
.engine h4{margin:26px 0 0; font-weight:400; font-size:clamp(22px,2.1vw,32px); letter-spacing:-.03em;}
.engine__sub{color:var(--grey-2); margin:8px 0 0;}
.engine p:last-child{margin:14px 0 0; font-size:13.5px; line-height:1.55; color:var(--grey);}
.pipe{position:relative; height:1px; background:var(--line-2); margin-top:42px;}
.pipe__node{position:absolute; left:var(--p); top:50%; width:6px; height:6px; background:#fff; border-radius:50%; transform:translate(-50%,-50%);}
.pipe__dot{position:absolute; top:50%; left:0; width:9px; height:9px; background:#fff; border-radius:50%; transform:translate(-50%,-50%);}

/* ---------------------------------------------------------------- cta */
.cta{background:transparent; color:var(--ink); padding:clamp(84px,13vh,150px) 0 0; position:relative;}
.cta__canvas{display:none;}
.cta .kicker{color:#7A828C;} .cta .kicker .dotmark{color:#0098FF;}
.cta__h{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:0 26px;}
.cta__big{font-weight:400; font-size:clamp(78px,14vw,210px); letter-spacing:-.05em; line-height:.86; color:#0098FF;}
.cta__h2{font-weight:400; font-size:clamp(16px,1.7vw,25px); letter-spacing:-.033em; line-height:1.06; max-width:16ch; color:var(--ink);}
.cta__p{margin:clamp(26px,3.4vw,40px) 0 0; max-width:56ch; font-size:clamp(14.5px,1.12vw,17.5px); line-height:1.6; color:#4A505A;}
.cta__acts{display:flex; gap:12px; flex-wrap:wrap; margin:clamp(26px,3.4vw,40px) 0 0;}
.btn{display:inline-block; background:var(--ink); color:#fff; text-decoration:none; padding:14px 28px; border-radius:76px; font-size:14.5px; border:1px solid var(--ink); transition:all .2s ease;}
.btn:hover{background:#0098FF; border-color:#0098FF;}
.btn--ghost{background:transparent; color:var(--ink); border-color:rgba(10,10,17,.25);}
.btn--ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.logos{display:flex; align-items:center; gap:clamp(22px,3.4vw,52px); flex-wrap:wrap; margin:clamp(50px,8vh,88px) 0 0; padding-top:24px; border-top:1px solid rgba(10,10,17,.16);}
.logos img{height:21px; opacity:.75;}
.foot{display:flex; align-items:center; justify-content:space-between; margin-top:clamp(50px,8vh,84px); padding:20px var(--pad); border-top:1px solid rgba(10,10,17,.16);}
.foot__mark{height:14px; opacity:.6;}
.foot .mono{color:#7A828C;}

@media (max-width:900px){
  .dots{display:none;}
  .engines{grid-template-columns:1fr;}
  .eq{flex-direction:column;}
  .eq__op{border:none; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:8px 24px;}
  .cards{grid-template-columns:1fr;} .cta__h{flex-direction:column; gap:12px;}
  .pcard.is-rail .pcard__vis{opacity:1; filter:none;}
}

.cta__lead{margin:clamp(22px,2.8vw,38px) 0 0; font-weight:400; letter-spacing:-.032em; line-height:1.06; font-size:clamp(24px,3vw,44px); max-width:20ch;}
.cta__p{margin-top:clamp(16px,1.8vw,24px);}
.eq__part{flex:1 1 210px; min-width:0;}


.engines.is-armed .engine.is-on{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.55);}
.pipe__node.is-on{transform:translate(-50%,-50%) scale(1.6);}

.econn{color:#7FD0FF;}

.eco__sub{color:var(--grey);}