/* ============ AIOOS — polish pass (perf-friendly: transform/opacity only) ============ */

/* ---------- scroll progress bar ---------- */
.progress{position:fixed; top:0; left:0; height:3px; width:100%; z-index:99; pointer-events:none;
  background:linear-gradient(90deg,#2D6CF6,#22D3EE 55%,#7C5CFC);
  transform-origin:0 50%; transform:scaleX(0); will-change:transform}

/* ---------- nav shrinks on scroll ---------- */
.nav-shell{transition:top .3s cubic-bezier(.2,.7,.3,1)}
nav{transition:padding .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s}
.nav-shell.scrolled{top:12px}
.nav-shell.scrolled nav{padding:8px 8px 8px 22px;
  box-shadow:inset 0 4px 4px 0 rgba(255,255,255,.25), 0 24px 60px -24px rgba(20,50,110,.5)}

/* ---------- hero trust chips ---------- */
.hero-chips{display:flex; gap:22px; margin-top:30px; flex-wrap:wrap}
.hero-chips span{display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#5A6B86}
.hero-chips .dotk{width:14px;height:14px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(20,184,166,.15); color:#0E9F8E}

/* ---------- channel cards: hairline + reveal link ---------- */
.chan{overflow:hidden}
.chan::before{content:""; position:absolute; top:0; left:24px; right:24px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(45,108,246,.5) 30%, rgba(34,211,238,.5) 70%, transparent)}
.chan .more{display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  font-size:13.5px; font-weight:700; color:var(--blue); text-decoration:none;
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s}
.chan:hover .more{opacity:1; transform:none}
.chan .ic{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.chan:hover .ic{transform:rotate(-6deg) scale(1.06)}

/* ---------- steps: flowing connector ---------- */
@media (min-width:981px){
  .step{overflow:visible}
  .step:not(:last-child)::after{content:""; position:absolute; top:52px; right:-26px; width:28px; height:2px;
    background-image:linear-gradient(90deg, #2D6CF6 50%, transparent 50%);
    background-size:8px 2px; opacity:.5}
  @media (prefers-reduced-motion:no-preference){
    .step:not(:last-child)::after{animation:dashSlide 1s linear infinite}
  }
}
@keyframes dashSlide{to{background-position:8px 0}}

/* ---------- billing toggle ---------- */
.bill-toggle{position:relative; display:flex; width:fit-content; margin:-26px auto 44px; padding:5px;
  border-radius:100px; background:rgba(255,255,255,.7); border:1px solid rgba(24,54,120,.12);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.6), 0 12px 30px -18px rgba(20,50,110,.45); cursor:pointer; user-select:none}
.bt-opt{position:relative; z-index:1; padding:9px 20px; border-radius:100px; font-size:14px; font-weight:700;
  color:#5A6B86; transition:color .25s}
.bt-opt em{font-style:normal; font-size:11px; font-weight:800; color:#0E9F8E; margin-left:5px;
  background:rgba(20,184,166,.14); padding:2px 7px; border-radius:100px}
.bt-opt.active{color:#fff}
.bt-opt.active em{color:#5EEAD4; background:rgba(255,255,255,.14)}
.bt-knob{position:absolute; top:5px; bottom:5px; left:5px; width:0; border-radius:100px; z-index:0;
  background:linear-gradient(135deg,#0F1B33,#27406e);
  box-shadow:0 10px 22px -10px rgba(15,27,51,.8);
  transition:transform .35s cubic-bezier(.3,.8,.3,1), width .35s cubic-bezier(.3,.8,.3,1)}
.price .amt .v{transition:opacity .18s, transform .18s}
.price .amt .v.swap{opacity:0; transform:translateY(8px) scale(.96)}
.save-note{text-align:center; font-size:13px; font-weight:600; color:#0E9F8E; margin-top:-30px; margin-bottom:40px;
  opacity:0; transition:opacity .3s}
.save-note.on{opacity:1}

/* ---------- quotes: oversized mark ---------- */
.quote{position:relative; overflow:hidden}
.quote::after{content:"\201E"; position:absolute; right:10px; top:-44px;
  font-family:'Instrument Serif', Georgia, serif; font-size:150px; line-height:1; color:rgba(45,108,246,.08);
  pointer-events:none}

/* ---------- CTA band: floating channel chips ---------- */
.cta-chip{position:absolute; width:54px; height:54px; border-radius:17px; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  box-shadow:0 18px 36px -16px rgba(0,30,80,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:1}
.cta-chip.c1{left:7%; top:24%}
.cta-chip.c2{right:8%; top:18%}
.cta-chip.c3{right:14%; bottom:20%}
@media (prefers-reduced-motion:no-preference){
  .cta-chip{animation:floaty 6s ease-in-out infinite}
  .cta-chip.c2{animation-delay:1.3s}
  .cta-chip.c3{animation-delay:2.4s}
}
@media (max-width:980px){ .cta-chip{display:none} }

/* ---------- footer v2: quiet enterprise ---------- */
.footer{background:linear-gradient(180deg,#0C1628 0%, #080F1E 100%); padding:84px 0 40px; position:relative}
.footer::before{content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(45,108,246,.55) 30%, rgba(34,211,238,.55) 70%, transparent)}
.foot-grid{grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:48px}
.foot-brand .brand .mk{width:33px; height:26px; display:block}
.foot-brand .brand .mk svg{display:block; width:100%; height:100%}
.foot-brand p{color:rgba(214,226,244,.55); font-size:14px; line-height:1.65; margin-top:18px; max-width:280px}
.status{display:inline-flex; align-items:center; gap:9px; margin-top:22px;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6EE7C9;
  background:rgba(20,184,166,.08); border:1px solid rgba(20,184,166,.22); padding:8px 14px; border-radius:100px}
.status i{width:7px; height:7px; border-radius:50%; background:#2DD4A0}
@media (prefers-reduced-motion:no-preference){
  .status i{animation:statusPing 2.4s ease-out infinite}
}
@keyframes statusPing{0%{box-shadow:0 0 0 0 rgba(45,212,160,.45)}70%,100%{box-shadow:0 0 0 8px rgba(45,212,160,0)}}
.foot-col h5{font-size:11.5px; letter-spacing:.18em; color:rgba(214,226,244,.38)}
.foot-col ul{gap:13px; margin-top:20px}
.foot-col a{color:rgba(214,226,244,.72); font-size:14px; transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bot{margin-top:64px; padding-top:24px; border-top:1px solid rgba(255,255,255,.07);
  font-size:12.5px; color:rgba(214,226,244,.4); align-items:center}
.foot-legal{display:flex; gap:26px}
.foot-legal a{color:rgba(214,226,244,.55); text-decoration:none; font-size:12.5px; font-weight:600; transition:color .2s}
.foot-legal a:hover{color:#fff}
.foot-soc{display:flex; gap:10px; margin-top:0}
.foot-soc a{width:34px; height:34px; border-radius:10px; color:rgba(214,226,244,.6);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); transition:color .2s, background .2s}
.foot-soc a:hover{color:#fff; background:rgba(255,255,255,.12)}
@media (max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-bot{flex-direction:column; align-items:flex-start; gap:14px}
}