/* ============================================================
   PAPILIOHOST · clean & solid · frost/ice dark · single file
   Philosophy: zero janky JS. CSS-only motion. Content always visible.
   ============================================================ */
:root{
  --bg:#05080f; --bg-2:#080e18; --bg-3:#0c1422; --bg-4:#111d30; --bg-5:#17263d;
  --ice-0:#eaf8ff; --ice-1:#bfeeff; --ice-2:#7dd3fc; --ice-3:#38bdf8; --ice-4:#0ea5e9; --ice-5:#0284c7;
  --violet:#8aa0ff; --good:#34d399; --warn:#fbbf24; --bad:#fb7185;
  --text:#e9f4ff; --dim:#8295ab; --faint:#46596f;
  --line:rgba(125,211,252,.08); --line-2:rgba(125,211,252,.16); --line-3:rgba(125,211,252,.30);
  --glass:rgba(12,20,34,.6);
  --r:16px;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.7,.3,1);
}
[data-theme="light"]{
  --bg:#eef5fd; --bg-2:#e6f0fb; --bg-3:#ffffff; --bg-4:#e0ecf8; --bg-5:#d3e4f6;
  --ice-0:#06141f; --ice-1:#0b3a55;
  --text:#08182a; --dim:#43596f; --faint:#9cb2c8;
  --line:rgba(2,132,199,.10); --line-2:rgba(2,132,199,.18); --line-3:rgba(2,132,199,.32);
  --glass:rgba(255,255,255,.78);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
svg{display:block}
img{display:block;max-width:100%}
::selection{background:var(--ice-2);color:#04111c}
h1,h2,h3,h4,h5{font-family:var(--sans);font-weight:600;letter-spacing:-.02em;line-height:1.06}
.mono{font-family:var(--mono)}
.grad{background:linear-gradient(108deg,var(--ice-0) 6%,var(--ice-2) 50%,var(--violet) 98%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bg-5);border-radius:9px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--ice-5)}

/* ---- background: CSS-only, cannot jank ---- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg .aurora{position:absolute;inset:-25%;background:
  radial-gradient(40% 35% at 18% 14%,rgba(56,189,248,.18),transparent 70%),
  radial-gradient(38% 42% at 86% 26%,rgba(138,160,255,.12),transparent 72%),
  radial-gradient(46% 40% at 60% 96%,rgba(14,165,233,.10),transparent 70%);
  filter:blur(20px);animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{100%{transform:translate3d(-2%,1.5%,0) scale(1.06)}}
.bg .grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:62px 62px;mask-image:radial-gradient(ellipse 72% 55% at 50% 20%,#000 4%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 72% 55% at 50% 20%,#000 4%,transparent 80%)}

#progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;background:linear-gradient(90deg,var(--ice-3),var(--violet));transition:width .1s linear}
.skip{position:absolute;left:-999px;top:0;z-index:999;background:var(--ice-1);color:#04111c;padding:8px 16px;border-radius:8px;font-weight:600}
.skip:focus{left:12px;top:12px}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2}
section{position:relative;z-index:2;padding:96px 0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ice-2);margin-bottom:18px}
.eyebrow::before{content:"";width:24px;height:1px;background:linear-gradient(90deg,var(--ice-3),transparent)}
.s-title{font-size:clamp(30px,4.2vw,50px);max-width:20ch}
.s-sub{color:var(--dim);font-size:16px;max-width:60ch;margin-top:16px}
.s-head{margin-bottom:52px}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .s-title,.center .s-sub{margin-inline:auto}

/* ---- statusbar ---- */
.statusbar{position:absolute;top:0;left:0;right:0;z-index:52;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:7px 26px;font-family:var(--mono);font-size:11px;color:var(--dim);background:transparent;border-bottom:1px solid var(--line);letter-spacing:.04em}
[data-theme="light"] .statusbar{background:transparent}
.statusbar .seg{display:flex;gap:18px;align-items:center;overflow:hidden;white-space:nowrap}
.statusbar b{color:var(--ice-1);font-weight:500}
.dot{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
@media(max-width:720px){.statusbar .seg:last-child{display:none}}

/* ---- nav ---- */
nav{position:fixed;top:30px;left:0;right:0;z-index:55;transition:top .3s}
nav.small{top:10px}
.nav-in{max-width:var(--maxw);margin:0 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 18px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line-2);border-radius:100px;box-shadow:0 8px 36px -22px rgba(0,0,0,.8)}
@media(min-width:1232px){.nav-in{margin:0 auto}}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand{position:relative}
.brand .mark{width:34px;height:34px;flex-shrink:0;object-fit:contain;position:relative;z-index:2;transform-origin:center;animation:orbit 11s ease-in-out infinite}
.brand:hover .mark{animation-duration:5s}
@keyframes orbit{0%,50%{transform:translate(0,0) scale(1) rotate(0)}58%{transform:translate(10px,-30px) scale(.85) rotate(-16deg)}68%{transform:translate(90px,-34px) scale(.78) rotate(6deg)}78%{transform:translate(165px,-12px) scale(.76) rotate(22deg)}86%{transform:translate(150px,18px) scale(.84) rotate(44deg)}93%{transform:translate(60px,22px) scale(.93) rotate(18deg)}100%{transform:translate(0,0) scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){.brand .mark{animation:none}}
.brand .ac{color:var(--ice-2);font-weight:400}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{padding:8px 13px;border-radius:100px;font-size:13.5px;color:var(--dim);font-weight:500;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--text);background:var(--line)}
.nav-links a.active{color:var(--ice-1);background:rgba(56,189,248,.1)}
.nav-act{display:flex;align-items:center;gap:8px}
.ibtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--dim);transition:.2s}
.ibtn:hover{color:var(--ice-1);border-color:var(--line-3);background:var(--line)}
.ibtn svg{width:16px;height:16px}
.theme .sun{display:none}
[data-theme="light"] .theme .sun{display:block}
[data-theme="light"] .theme .moon{display:none}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:100px;background:var(--ice-1);color:#04111c;font-weight:600;font-size:13.5px;transition:transform .2s var(--ease),box-shadow .2s;white-space:nowrap}
.pill:hover{transform:translateY(-1px);box-shadow:0 10px 26px -10px var(--ice-3)}
.pill svg{width:14px;height:14px}
.burger{display:none}
@media(max-width:1020px){.nav-links{display:none}.burger{display:grid}}
@media(max-width:560px){.nav-act .pill{display:none}.nav-in{padding:9px 10px 9px 14px}.brand{font-size:17px}.brand .mark{width:29px;height:29px}}

.sheet{position:fixed;inset:0;z-index:70;background:rgba(5,8,15,.95);backdrop-filter:blur(16px);display:flex;flex-direction:column;padding:84px 28px 40px;gap:2px;transform:translateY(-100%);transition:transform .4s var(--ease)}
[data-theme="light"] .sheet{background:rgba(238,245,253,.97)}
.sheet.open{transform:translateY(0)}
.sheet a{padding:15px 4px;font-family:var(--sans);font-size:22px;font-weight:600;border-bottom:1px solid var(--line)}
.sheet .x{position:absolute;top:24px;right:24px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:100px;font-family:var(--sans);font-weight:600;font-size:15px;transition:transform .2s var(--ease),box-shadow .2s,background .2s,border-color .2s}
.btn svg{width:16px;height:16px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn-1{background:linear-gradient(118deg,var(--ice-1),var(--ice-3));color:#04111c}
.btn-1:hover{transform:translateY(-2px);box-shadow:0 16px 44px -18px var(--ice-3)}
.btn-2{border:1px solid var(--line-3);color:var(--text)}
.btn-2:hover{background:var(--line);border-color:var(--ice-3)}

/* ============================ HERO ============================ */
.hero{padding:160px 0 70px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}
.live-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ice-1);border:1px solid var(--line-2);background:var(--glass);padding:7px 14px;border-radius:100px;margin-bottom:24px}
.hero h1{font-size:clamp(40px,5.6vw,72px);line-height:1.02;margin-bottom:22px}
.hero-sub{font-size:18px;color:var(--dim);max-width:48ch;margin-bottom:32px}
.hero-sub b{color:var(--text);font-weight:600}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust svg{width:15px;height:15px;color:var(--ice-2);flex-shrink:0}

/* hero dashboard card — fully static */
.hcard{border:1px solid var(--line-2);border-radius:var(--r);background:var(--glass);backdrop-filter:blur(16px);overflow:hidden;box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.hcard-bar{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.hcard-bar i{width:10px;height:10px;border-radius:50%;background:var(--faint)}
.hcard-bar i:nth-child(1){background:var(--bad)}.hcard-bar i:nth-child(2){background:var(--warn)}.hcard-bar i:nth-child(3){background:var(--good)}
.hcard-bar .t{font-family:var(--mono);font-size:11px;color:var(--dim);margin-inline:auto}
.hcard-body{padding:18px}
.hkpi{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:16px}
.hkpi .b{background:var(--bg-2);padding:14px 13px}
.hkpi .l{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.hkpi .n{font-family:var(--sans);font-size:21px;font-weight:600;line-height:1}
.hkpi .n .u{font-size:.5em;color:var(--dim);margin-left:2px}
.hchart{border:1px solid var(--line);border-radius:11px;background:var(--bg-2);padding:13px;margin-bottom:14px}
.hchart .lg{display:flex;gap:13px;font-family:var(--mono);font-size:9.5px;color:var(--dim);margin-bottom:8px}
.hchart .lg i{display:inline-flex;align-items:center;gap:5px}
.hchart .lg i::before{content:"";width:8px;height:2px;border-radius:2px;background:var(--ice-3)}
.hchart .lg i.v::before{background:var(--violet)}
.hnodes{display:flex;flex-direction:column;gap:7px}
.hnode{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2);font-family:var(--mono);font-size:11px;color:var(--dim)}
.hnode .s{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 6px var(--good);flex-shrink:0;animation:pulse 2.4s infinite}
.hnode b{color:var(--text);font-weight:500}
.hnode .r{margin-left:auto;color:var(--ice-2)}

.hero-stats{margin-top:58px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--glass);backdrop-filter:blur(12px)}
.hstat{padding:22px;border-right:1px solid var(--line)}
.hstat:last-child{border-right:none}
.hstat .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.hstat .v{font-family:var(--sans);font-size:clamp(24px,2.8vw,34px);font-weight:600;line-height:1}
.hstat .v .u{font-size:.42em;color:var(--dim);margin-left:3px}
.hstat .v .pre{font-size:.32em;color:var(--dim);margin-right:4px;vertical-align:middle}
@media(max-width:1020px){.hero-grid{grid-template-columns:1fr;gap:40px}.hcard{max-width:520px}.hero-stats{grid-template-columns:repeat(2,1fr)}.hstat:nth-child(2){border-right:none}.hstat:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* hero · aurora bloom */
.hero.aurora{position:relative;min-height:94vh;display:flex;align-items:center;text-align:center;padding:150px 0 80px;overflow:hidden}
.hero.aurora .wrap{position:relative;z-index:5}
.hero.aurora .bloom{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(960px,128vw);height:min(960px,128vw);border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.26),rgba(138,160,255,.11) 40%,transparent 66%);filter:blur(42px);z-index:0;pointer-events:none;animation:bloom 9s ease-in-out infinite alternate}
@keyframes bloom{100%{transform:translate(-50%,-50%) scale(1.07);opacity:.85}}
.hero.aurora .eyebrow{justify-content:center;margin-bottom:26px}
.hero.aurora h1{font-size:clamp(46px,8vw,100px);letter-spacing:-.04em;margin-bottom:24px}
.hero.aurora .hero-sub{max-width:52ch;margin:0 auto 38px}
.hero.aurora .hero-cta{justify-content:center;margin-bottom:52px}
.chips{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.chip{background:var(--glass);border:1px solid var(--line-2);border-radius:14px;padding:16px 24px;backdrop-filter:blur(12px);min-width:148px;transition:transform .25s var(--ease),border-color .25s}
.chip:hover{transform:translateY(-3px);border-color:var(--line-3)}
.chip .v{font-family:var(--sans);font-size:28px;font-weight:600;line-height:1}
.chip .v .u{font-size:.42em;color:var(--dim);margin-left:2px}
.chip .v .pre{font-size:.36em;color:var(--dim);margin-right:3px;vertical-align:middle}
.chip .l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:7px}
@media(max-width:560px){.hero.aurora{padding:130px 0 60px}.chips{gap:10px}.chip{min-width:calc(50% - 5px);padding:14px 16px}}

/* ---- logos ---- */
.logos{display:flex;align-items:center;justify-content:center;gap:18px 46px;flex-wrap:wrap;opacity:.65}
.logos .lab{width:100%;text-align:center;font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.1em;margin-bottom:20px}
.logos span{font-family:var(--sans);font-size:18px;font-weight:700;color:var(--dim);transition:color .2s}
.logos span:hover{color:var(--ice-1)}

/* ---- marquee (CSS only) ---- */
.marquee{overflow:hidden;border-block:1px solid var(--line-2);padding:15px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq{display:flex;gap:40px;width:max-content;animation:mq 42s linear infinite;font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.mq:hover{animation-play-state:paused}
.mq span{display:inline-flex;align-items:center;gap:40px;white-space:nowrap}
.mq b{color:var(--ice-1);font-weight:500}
.mq span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--ice-3)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---- features ---- */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fcard{position:relative;border:1px solid var(--line-2);border-radius:var(--r);background:var(--glass);backdrop-filter:blur(12px);padding:26px;transition:transform .25s var(--ease),border-color .25s}
.fcard:hover{transform:translateY(-4px);border-color:var(--line-3)}
.fcard .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--ice-1);margin-bottom:18px;background:linear-gradient(160deg,var(--bg-4),transparent)}
.fcard .ico svg{width:23px;height:23px}
.fcard h3{font-size:19px;margin-bottom:8px}
.fcard p{color:var(--dim);font-size:14px}
.fcard .spec{margin-top:15px;display:flex;flex-wrap:wrap;gap:6px}
.fcard .spec b{font-family:var(--mono);font-size:10.5px;color:var(--ice-2);border:1px solid var(--line-2);border-radius:100px;padding:4px 9px;font-weight:500}
@media(max-width:860px){.feat{grid-template-columns:1fr}}

/* ---- configurator ---- */
.cfg{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start}
.cfg-panel{border:1px solid var(--line-2);border-radius:var(--r);background:var(--glass);backdrop-filter:blur(14px);padding:28px}
.crow{margin-bottom:24px}.crow:last-child{margin-bottom:0}
.crow .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.crow .top label{font-family:var(--sans);font-weight:600;font-size:15px}
.crow .top .val{font-family:var(--mono);font-size:13px;color:var(--ice-1)}
.crow .top .val b{color:var(--ice-0);font-size:17px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--bg-4);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:21px;height:21px;border-radius:50%;background:linear-gradient(150deg,var(--ice-0),var(--ice-3));cursor:pointer;border:3px solid var(--bg);box-shadow:0 0 0 1px var(--ice-3)}
input[type=range]::-moz-range-thumb{width:21px;height:21px;border-radius:50%;background:var(--ice-2);cursor:pointer;border:3px solid var(--bg)}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1;min-width:78px;padding:11px;border-radius:10px;border:1px solid var(--line-2);font-family:var(--mono);font-size:12px;color:var(--dim);transition:.2s;background:var(--bg-3)}
.seg button.on{border-color:var(--ice-3);color:var(--ice-0);background:rgba(56,189,248,.08)}
.seg button:hover{color:var(--text)}
.tog{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border:1px solid var(--line-2);border-radius:11px;background:var(--bg-3);cursor:pointer}
.tog .lt{font-size:14px}.tog .lt small{display:block;color:var(--dim);font-size:12px;font-family:var(--mono)}
.sw{width:44px;height:25px;border-radius:100px;background:var(--bg-5);position:relative;transition:background .2s;flex-shrink:0}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--dim);transition:.2s}
.sw.on{background:var(--ice-4)}.sw.on::after{left:22px;background:#fff}
.cfg-sum{border:1px solid var(--line-2);border-radius:var(--r);background:linear-gradient(180deg,var(--bg-3),var(--bg-2));overflow:hidden;position:sticky;top:90px}
.cfg-sum .h{padding:18px 22px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.cfg-sum .bd{padding:22px}
.cline{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;color:var(--dim);font-family:var(--mono)}
.cline b{color:var(--text);font-weight:500}
.cprice{margin:16px 0;padding-top:16px;border-top:1px solid var(--line)}
.cprice .pp{font-family:var(--sans);font-weight:600;line-height:1;display:flex;align-items:flex-start;gap:2px}
.cprice .cur{font-size:22px;margin-top:6px;color:var(--dim)}
.cprice .amt{font-size:50px}
.cprice .per{font-size:13px;color:var(--dim);align-self:flex-end;margin-bottom:9px;font-family:var(--mono)}
.cprice .sv{font-family:var(--mono);font-size:11px;color:var(--good);margin-top:5px}
.cfg-sum .go{display:flex;justify-content:center;gap:8px;align-items:center;margin-top:4px;padding:14px;border-radius:100px;background:linear-gradient(118deg,var(--ice-1),var(--ice-3));color:#04111c;font-family:var(--sans);font-weight:600;font-size:14px;transition:.2s}
.cfg-sum .go:hover{transform:translateY(-1px);box-shadow:0 12px 28px -12px var(--ice-3)}
.cfg-sum .go svg{width:15px;height:15px}
.cfg-note{font-family:var(--mono);font-size:10.5px;color:var(--faint);text-align:center;margin-top:11px}
@media(max-width:860px){.cfg{grid-template-columns:1fr}.cfg-sum{position:static}}

/* ---- stats band ---- */
.statband{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--glass);backdrop-filter:blur(12px)}
.sb{padding:38px 24px;border-right:1px solid var(--line)}
.sb:last-child{border-right:none}
.sb .v{font-family:var(--sans);font-size:clamp(32px,4vw,50px);font-weight:600;line-height:1;margin-bottom:8px}
.sb .v .u{font-size:.4em;color:var(--dim);margin-left:3px}
.sb .l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.sb .bar{height:2px;background:var(--line);border-radius:2px;margin-top:15px;overflow:hidden}
.sb .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ice-3),var(--ice-1));transition:width 1.3s var(--ease)}
@media(max-width:760px){.statband{grid-template-columns:repeat(2,1fr)}.sb:nth-child(2){border-right:none}.sb:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ---- pricing ---- */
.bt{display:inline-flex;align-items:center;gap:13px;font-family:var(--mono);font-size:13px;color:var(--dim);margin-top:22px}
.bt .on{color:var(--ice-1)}
.bt .save{font-size:10px;background:rgba(52,211,153,.12);color:var(--good);border:1px solid rgba(52,211,153,.25);border-radius:100px;padding:3px 9px}
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.plan{position:relative;border:1px solid var(--line-2);border-radius:var(--r);padding:26px 22px;background:var(--glass);backdrop-filter:blur(12px);transition:transform .25s var(--ease),border-color .25s;display:flex;flex-direction:column}
.plan:hover{transform:translateY(-4px);border-color:var(--line-3)}
.plan.feat{border-color:var(--ice-3);box-shadow:0 0 0 1px var(--ice-3),0 28px 64px -42px var(--ice-4)}
.plan.feat::before{content:var(--feat-label,"Most Popular");position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;background:linear-gradient(118deg,var(--ice-1),var(--ice-3));color:#04111c;padding:5px 14px;border-radius:100px;white-space:nowrap}
.plan .pn{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ice-2);margin-bottom:6px}
.plan .pt{font-size:13px;color:var(--dim);margin-bottom:18px;min-height:38px}
.plan .pp{font-family:var(--sans);font-size:40px;font-weight:600;line-height:1;display:flex;align-items:flex-start;gap:2px}
.plan .pp .cur{font-size:.45em;margin-top:6px;color:var(--dim)}
.plan .pp .per{font-size:.3em;color:var(--dim);align-self:flex-end;margin-bottom:8px;font-family:var(--mono)}
.plan ul{list-style:none;margin:20px 0;display:flex;flex-direction:column;gap:10px;flex:1}
.plan li{display:flex;gap:10px;font-size:13.5px;color:var(--dim)}
.plan li svg{width:16px;height:16px;color:var(--ice-2);flex-shrink:0;margin-top:2px}
.plan li b{color:var(--text);font-weight:600}
.plan .pb{display:flex;justify-content:center;padding:13px;border-radius:100px;font-family:var(--sans);font-weight:600;font-size:14px;transition:.2s;border:1px solid var(--line-3);color:var(--text)}
.plan .pb:hover{background:var(--line);border-color:var(--ice-3)}
.plan.feat .pb{background:linear-gradient(118deg,var(--ice-1),var(--ice-3));color:#04111c;border:none}
.plan.feat .pb:hover{transform:translateY(-1px);box-shadow:0 12px 28px -12px var(--ice-3)}
@media(max-width:920px){.prices{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.prices{grid-template-columns:1fr}}

/* ---- network ---- */
.net{display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;align-items:center}
.nrow{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.nrow:first-child{border-top:1px solid var(--line)}
.nrow .code{font-family:var(--mono);font-size:11px;color:var(--ice-2);font-weight:500}
.nrow h4{font-size:16px}
.nrow .sub{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.nrow .ping{font-family:var(--mono);font-size:12px;color:var(--dim)}
.nrow .ping b{color:var(--ice-1)}
.bdg{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;padding:5px 10px;border-radius:100px}
.bdg.live{background:rgba(52,211,153,.12);color:var(--good);border:1px solid rgba(52,211,153,.25)}
.bdg.soon{color:var(--faint);border:1px solid var(--line-2)}
.map{position:relative;aspect-ratio:1.35/1;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:radial-gradient(ellipse at 40% 35%,var(--bg-3),var(--bg))}
.map svg{width:100%;height:100%}
@media(max-width:860px){.net{grid-template-columns:1fr;gap:32px}}

/* ---- compare ---- */
.cmp{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--glass);backdrop-filter:blur(12px)}
.cr{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;border-bottom:1px solid var(--line)}
.cr:last-child{border-bottom:none}
.cc{padding:15px 20px;font-size:13.5px;border-right:1px solid var(--line);display:flex;align-items:center;gap:8px}
.cc:last-child{border-right:none}
.cr.h .cc{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);background:var(--bg-3);font-weight:500}
.cr.h .cc.us{color:var(--ice-1)}
.cc.lbl{font-weight:600;color:var(--text)}
.cc.us{background:rgba(125,211,252,.04)}
.ck{color:var(--ice-2);font-weight:700}.cx{color:var(--faint);font-weight:700}.cp{color:var(--warn);font-weight:700}
@media(max-width:760px){.cr{grid-template-columns:1.3fr 1fr}.cc{font-size:12px;padding:12px 13px}.cr .cc:nth-child(3),.cr .cc:nth-child(4){display:none}}

/* ---- testimonials (static grid) ---- */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tc{border:1px solid var(--line-2);border-radius:var(--r);background:var(--glass);backdrop-filter:blur(12px);padding:26px;display:flex;flex-direction:column}
.tc .stars{display:flex;gap:3px;color:var(--warn);margin-bottom:16px}
.tc .stars svg{width:15px;height:15px}
.tc p{font-size:14.5px;color:var(--text);line-height:1.5;flex:1}
.tc p .grad{font-weight:600}
.tc .who{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.tc .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:14px;color:#04111c;background:linear-gradient(150deg,var(--ice-1),var(--ice-4))}
.tc .who b{display:block;font-size:14px}
.tc .who span{font-family:var(--mono);font-size:11px;color:var(--dim)}
@media(max-width:860px){.tg{grid-template-columns:1fr}}

/* ---- security ---- */
.sec{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.scard{border:1px solid var(--line-2);border-radius:14px;background:var(--glass);backdrop-filter:blur(12px);padding:24px;text-align:center;transition:transform .25s var(--ease),border-color .25s}
.scard:hover{transform:translateY(-3px);border-color:var(--line-3)}
.scard .si{width:42px;height:42px;margin:0 auto 15px;color:var(--ice-1)}
.scard h4{font-size:15px;margin-bottom:6px}
.scard p{font-size:12.5px;color:var(--dim)}
@media(max-width:760px){.sec{grid-template-columns:repeat(2,1fr)}}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--glass);backdrop-filter:blur(12px)}
.step{padding:28px 24px;border-right:1px solid var(--line)}
.step:last-child{border-right:none}
.step .n{font-family:var(--mono);font-size:11px;color:var(--ice-2);letter-spacing:.1em;margin-bottom:16px}
.step .si{width:40px;height:40px;color:var(--ice-1);margin-bottom:15px}
.step h4{font-size:16px;margin-bottom:7px}
.step p{font-size:13px;color:var(--dim)}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}.step:nth-child(2){border-right:none}.step:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:500px){.steps{grid-template-columns:1fr}.step{border-right:none;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:none}}

/* ---- faq ---- */
.faq{max-width:820px;margin:0 auto}
.qa{border-top:1px solid var(--line-2)}.qa:last-child{border-bottom:1px solid var(--line-2)}
.qa .q{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:21px 4px;cursor:pointer;font-family:var(--sans);font-size:17px;font-weight:600;transition:color .2s}
.qa .q:hover{color:var(--ice-1)}
.qa .pm{width:29px;height:29px;border-radius:50%;border:1px solid var(--line-3);display:grid;place-items:center;flex-shrink:0;transition:.3s}
.qa .pm svg{width:13px;height:13px;color:var(--ice-1);transition:transform .3s}
.qa.open .pm{background:var(--ice-1);border-color:var(--ice-1)}
.qa.open .pm svg{transform:rotate(45deg);color:#04111c}
.qa .a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.qa .a p{color:var(--dim);font-size:14.5px;padding:0 4px 21px}
.qa.open .a{max-height:340px}

/* ---- cta + footer ---- */
.cta{position:relative;border:1px solid var(--line-3);border-radius:26px;overflow:hidden;padding:76px 32px;text-align:center;background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(56,189,248,.15),transparent 60%),linear-gradient(180deg,var(--bg-2),var(--bg))}
.cta::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse 55% 60% at 50% 45%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 55% 60% at 50% 45%,#000,transparent 75%)}
.cta>*{position:relative;z-index:1}
.cta h2{font-size:clamp(32px,4.6vw,58px);margin-bottom:16px}
.cta p{color:var(--dim);font-size:16px;max-width:44ch;margin:0 auto 30px}
footer{position:relative;z-index:2;border-top:1px solid var(--line-2);margin-top:60px;padding-top:60px}
.ft{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:38px;padding-bottom:46px}
.fb p{color:var(--dim);font-size:13.5px;max-width:32ch;margin-top:15px}
.fsoc{display:flex;gap:10px;margin-top:18px}
.fsoc a{width:36px;height:36px;border-radius:10px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--dim);transition:.2s}
.fsoc a:hover{color:var(--ice-1);border-color:var(--line-3);background:var(--line)}
.fsoc svg{width:16px;height:16px}
.fc h5{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:15px}
.fc a{display:block;color:var(--text);font-size:13.5px;margin-bottom:10px;transition:color .2s;width:fit-content}
.fc a:hover{color:var(--ice-1)}
.fn h5{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:13px}
.fn p{font-size:13px;color:var(--dim);margin-bottom:13px}
.nf{display:flex;gap:8px}
.nf input{flex:1;background:var(--bg-3);border:1px solid var(--line-2);border-radius:100px;padding:11px 16px;color:var(--text);font-size:13px;outline:none;transition:border-color .2s}
.nf input:focus{border-color:var(--ice-3)}
.nf button{width:42px;height:42px;border-radius:50%;background:var(--ice-1);color:#04111c;display:grid;place-items:center;flex-shrink:0;transition:.2s}
.nf button:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px var(--ice-3)}
.nf button svg{width:16px;height:16px}
.fmega{font-family:var(--sans);font-size:clamp(54px,15vw,196px);font-weight:700;line-height:.85;color:transparent;-webkit-text-stroke:1px var(--line-3);letter-spacing:-.04em;overflow:hidden;white-space:nowrap;margin-bottom:8px;user-select:none}
.fbot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--faint)}
.fbot .lk{display:flex;gap:16px}.fbot a:hover{color:var(--ice-1)}
@media(max-width:880px){.ft{grid-template-columns:1fr 1fr;gap:28px}.fn{grid-column:span 2}}

/* ---- reveal (guarded: only hides when JS active) ---- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

.sticky{position:fixed;left:14px;right:14px;bottom:14px;z-index:50;display:none;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px 11px 18px;border-radius:100px;background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--line-3);box-shadow:0 16px 36px -16px rgba(0,0,0,.8);transform:translateY(140%);transition:transform .35s var(--ease)}
.sticky.show{transform:translateY(0)}
.sticky .st{font-family:var(--mono);font-size:11px;color:var(--dim);line-height:1.2}
.sticky .st b{display:block;font-family:var(--sans);font-size:14px;color:var(--text);font-weight:600}
@media(max-width:1020px){.sticky{display:flex}}
#top{position:fixed;right:22px;bottom:22px;z-index:49;width:46px;height:46px;border-radius:50%;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line-3);color:var(--ice-1);display:grid;place-items:center;opacity:0;transform:translateY(18px) scale(.85);transition:.3s var(--ease);pointer-events:none}
#top.show{opacity:1;transform:none;pointer-events:auto}
#top svg{width:18px;height:18px}
@media(max-width:1020px){#top{bottom:78px}}

/* ---- category cards (services overview) ---- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat{position:relative;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--r);background:var(--glass);backdrop-filter:blur(12px);padding:26px;transition:transform .25s var(--ease),border-color .25s;overflow:hidden}
.cat:hover{transform:translateY(-4px);border-color:var(--line-3)}
.cat .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--ice-1);margin-bottom:18px;background:linear-gradient(160deg,var(--bg-4),transparent)}
.cat .ico svg{width:23px;height:23px}
.cat h3{font-size:19px;margin-bottom:7px}
.cat p{color:var(--dim);font-size:13.5px;flex:1}
.cat .meta{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.cat .from{font-family:var(--sans);font-weight:600;font-size:16px}
.cat .from span{font-family:var(--mono);font-size:10px;color:var(--dim);font-weight:400;display:block;text-transform:uppercase;letter-spacing:.1em}
.cat .cnt{font-family:var(--mono);font-size:11px;color:var(--ice-2);display:inline-flex;align-items:center;gap:7px}
.cat .cnt svg{width:14px;height:14px;transition:transform .2s}
.cat:hover .cnt svg{transform:translateX(3px)}
@media(max-width:1000px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cats{grid-template-columns:1fr}}

/* ---- page header (internal pages) ---- */
.phead{padding:150px 0 24px;text-align:center;position:relative;overflow:hidden}
.phead .bloom{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);width:min(820px,120vw);height:560px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.18),transparent 64%);filter:blur(40px);z-index:0;pointer-events:none}
.phead .wrap{position:relative;z-index:2}
.phead .eyebrow{justify-content:center;margin-bottom:20px}
.phead h1{font-size:clamp(38px,6vw,66px);letter-spacing:-.03em;margin-bottom:18px}
.phead .lead{color:var(--dim);font-size:17px;max-width:56ch;margin:0 auto}
.crumbs{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-bottom:24px;letter-spacing:.04em}
.crumbs a{color:var(--ice-2)}.crumbs a:hover{color:var(--ice-1)}
.secthead{margin-bottom:32px}
.secthead .eyebrow{margin-bottom:14px}
.secthead h2{font-size:clamp(26px,3.4vw,40px)}
.secthead p{color:var(--dim);font-size:15px;margin-top:10px;max-width:60ch}

/* ============================================================
   POLISH & SVG ANIMATION LAYER (CSS-only, reduced-motion safe)
   ============================================================ */

/* --- brand butterfly: orbit defined in nav block above (flies around the wordmark) --- */

/* --- animated gradient sheen on signature headings --- */
.hero.aurora h1 .grad,.cta h2 .grad,.phead h1 .grad{background-size:220% auto;animation:sheen 7s linear infinite}
@keyframes sheen{to{background-position:220% center}}

/* --- eyebrow line: subtle travelling glow --- */
.eyebrow::before{background:linear-gradient(90deg,var(--ice-3),transparent);background-size:200% 100%;animation:eline 3.5s ease-in-out infinite}
@keyframes eline{0%,100%{background-position:0 0;opacity:.6}50%{background-position:100% 0;opacity:1}}

/* --- spec lines: icon tiles + hover lift --- */
.plan li{display:flex;gap:11px;font-size:13.5px;color:var(--dim);align-items:center}
.plan li svg{width:27px;height:27px;padding:5.5px;border-radius:8px;background:var(--bg-3);border:1px solid var(--line-2);color:var(--ice-2);flex-shrink:0;box-sizing:border-box;transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.plan:hover li svg{border-color:var(--line-3);color:var(--ice-1)}
.plan li:hover svg{background:rgba(56,189,248,.12);color:var(--ice-0);transform:translateY(-1px) scale(1.06)}
.plan:hover{box-shadow:0 22px 56px -34px var(--ice-4)}

/* --- feature / category / security icon: hover bob + glow --- */
.fcard .ico,.cat .ico,.scard .si,.step .si{transition:transform .3s var(--ease),border-color .3s,box-shadow .3s,color .3s}
.fcard:hover .ico,.cat:hover .ico{transform:translateY(-3px);border-color:var(--ice-3);box-shadow:0 0 26px -8px var(--ice-3)}
.fcard:hover .ico svg,.cat:hover .ico svg,.scard:hover .si{animation:bob 1.1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
.scard:hover .si{color:var(--ice-2)}

/* --- buttons: shine sweep on hover --- */
.pb,.go,.btn-1,.pill{position:relative;overflow:hidden}
.pb::after,.go::after,.btn-1::after,.pill::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);pointer-events:none}
.pb:hover::after,.go:hover::after,.btn-1:hover::after,.pill:hover::after{animation:shine .85s ease}
@keyframes shine{from{left:-130%}to{left:140%}}

/* --- live dot: add expanding ping ring --- */
.dot{position:relative}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--good);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}

/* --- chips: floating shimmer top border --- */
.chip{position:relative;overflow:hidden}
.chip::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--ice-2),transparent);opacity:0;transition:opacity .3s}
.chip:hover::before{opacity:.8}

/* --- category card: animated corner accent --- */
.cat::before{content:"";position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(circle at top right,rgba(56,189,248,.16),transparent 70%);opacity:0;transition:opacity .3s}
.cat:hover::before{opacity:1}

/* --- network map: soft breathing glow already animated via SVG --- */

/* ============================================================
   NEW SECTIONS: butterflies · datacenter rack · looking glass
   ============================================================ */

/* floating butterflies in hero */
.flutters{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.flut{position:absolute;color:var(--ice-2);will-change:transform}
.flut svg,.flut img{width:100%;height:100%;display:block;transform-origin:50% 50%;animation:flap 1.8s ease-in-out infinite}
.flut.f1{width:24px;height:24px;top:22%;opacity:.22;animation:drA 28s linear infinite}
.flut.f2{width:17px;height:17px;top:60%;opacity:.15;animation:drB 36s linear infinite 5s}
.flut.f3{width:30px;height:30px;top:44%;opacity:.12;animation:drC 32s linear infinite 11s}
.flut.f4{width:14px;height:14px;top:74%;opacity:.13;animation:drA 41s linear infinite 18s}
.flut.f5{width:20px;height:20px;top:33%;opacity:.10;animation:drB 30s linear infinite 24s}
@keyframes flap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.4)}}
@keyframes drA{0%{transform:translate(-8vw,0) rotate(-6deg)}100%{transform:translate(116vw,-46px) rotate(8deg)}}
@keyframes drB{0%{transform:translate(-8vw,0) rotate(5deg)}100%{transform:translate(118vw,64px) rotate(-8deg)}}
@keyframes drC{0%{transform:translate(-10vw,0)}100%{transform:translate(120vw,-86px)}}

/* datacenter rack */
.dc{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.rack{border:1px solid var(--line-2);border-radius:16px;background:linear-gradient(180deg,var(--bg-3),var(--bg-2));padding:16px;box-shadow:0 30px 80px -50px #000}
.rack-u{display:flex;align-items:center;gap:9px;height:36px;padding:0 14px;margin-bottom:7px;border-radius:7px;background:var(--bg);border:1px solid var(--line);position:relative}
.rack-u:last-child{margin-bottom:0}
.rack-u .led{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.rack-u .led.a{background:var(--good);box-shadow:0 0 6px var(--good);animation:led 1.5s infinite}
.rack-u .led.b{background:var(--ice-3);box-shadow:0 0 6px var(--ice-3);animation:led 2.2s infinite .3s}
.rack-u .led.c{background:var(--warn);box-shadow:0 0 6px var(--warn);animation:led 3.1s infinite .7s}
@keyframes led{0%,100%{opacity:1}50%{opacity:.18}}
.rack-u .slots{display:flex;gap:3px;margin-left:5px}
.rack-u .slots i{width:14px;height:9px;border-radius:2px;background:var(--bg-4);border:1px solid var(--line)}
.rack-u .act{display:flex;align-items:flex-end;gap:2px;height:13px;margin-left:auto}
.rack-u .act i{width:2.5px;background:var(--ice-3);opacity:.55;border-radius:1px;height:2px;animation:actbar 1.1s infinite}
@keyframes actbar{0%,100%{height:2px}50%{height:12px}}
.rack-u .lbl{font-family:var(--mono);font-size:10px;color:var(--faint);width:64px;text-align:right}
.dc-stats{display:flex;flex-direction:column}
.dc-stat{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px;color:var(--dim)}
.dc-stat:last-child{border-bottom:none}
.dc-stat b{font-family:var(--sans);font-size:21px;color:var(--text);font-weight:600}
.dc-stat b.up{color:var(--ice-1);font-variant-numeric:tabular-nums}
@media(max-width:860px){.dc{grid-template-columns:1fr;gap:30px}}

/* looking glass terminal */
.lg{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;align-items:start}
.lg-term{border:1px solid var(--line-2);border-radius:16px;overflow:hidden;background:rgba(2,5,10,.78);box-shadow:0 30px 80px -50px #000}
.lg-tabs{display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--bg-2);position:relative}
.lg-tabs::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:34px;height:8px;border-radius:100px;background:radial-gradient(circle 3px at 5px 50%,var(--bad) 60%,transparent),radial-gradient(circle 3px at 17px 50%,var(--warn) 60%,transparent),radial-gradient(circle 3px at 29px 50%,var(--good) 60%,transparent);opacity:.85}
.lg-tabs{padding-left:60px}
.lg-tabs button{padding:7px 14px;border-radius:8px;font-family:var(--mono);font-size:11.5px;color:var(--dim);transition:.2s}
.lg-tabs button.on{background:rgba(56,189,248,.1);color:var(--ice-1)}
.lg-tabs button:hover{color:var(--text)}
.lg-out{font-family:var(--mono);font-size:12px;line-height:1.9;padding:18px;min-height:300px;white-space:pre-wrap;color:var(--dim)}
.lg-out .h{color:var(--ice-1)}.lg-out .g{color:var(--good)}.lg-out .w{color:var(--warn)}.lg-out .b{color:var(--ice-0)}
.lg-cur{display:inline-block;width:8px;height:14px;vertical-align:-2px;background:var(--ice-2);animation:lgblink 1.1s steps(1) infinite}
@keyframes lgblink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.lg-points li{display:flex;gap:13px;padding:14px 0;border-top:1px solid var(--line);align-items:flex-start}
.lg-points li:last-child{border-bottom:1px solid var(--line)}
.lg-points .pi{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--bg-3);border:1px solid var(--line-2);color:var(--ice-2);flex-shrink:0}
.lg-points .pi svg{width:15px;height:15px}
.lg-points h4{font-size:15px;margin-bottom:2px}.lg-points p{font-size:13px;color:var(--dim)}
@media(max-width:860px){.lg{grid-template-columns:1fr;gap:30px}}

/* dual-cpu badge on plan cards */
.cpu-badge{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--ice-2);border:1px solid var(--line-2);border-radius:100px;padding:2px 8px;vertical-align:middle;font-weight:500}

/* ====== editorial rebuild ====== */
.s-title{font-size:clamp(34px,5vw,62px);line-height:1.04;letter-spacing:-.02em;max-width:18ch}
.s-head{margin-bottom:60px}

/* editorial feature rows */
.efeat{border-top:1px solid var(--line)}
.erow{display:grid;grid-template-columns:.42fr 1.1fr 1fr;gap:34px;align-items:start;padding:42px 0;border-bottom:1px solid var(--line);transition:background .3s}
.erow:hover{background:linear-gradient(90deg,rgba(56,189,248,.035),transparent 60%)}
.erow .ek{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice-2);padding-top:8px;display:flex;align-items:center;gap:11px}
.erow .ek .ei{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--ice-1);background:linear-gradient(160deg,var(--bg-4),transparent);flex-shrink:0;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.erow .ek .ei svg{width:18px;height:18px}
.erow:hover .ek .ei{transform:translateY(-3px);border-color:var(--ice-3);box-shadow:0 0 24px -8px var(--ice-3)}
.erow .et{font-size:clamp(21px,2.3vw,29px);letter-spacing:-.015em;line-height:1.12}
.erow:hover .et{color:var(--ice-1)}
.erow .et,.erow .et *{transition:color .3s}
.erow .ed{color:var(--dim);font-size:15px;line-height:1.62}
.erow .echips{margin-top:15px;display:flex;flex-wrap:wrap;gap:7px}
.erow .echips b{font-family:var(--mono);font-size:10.5px;color:var(--ice-2);border:1px solid var(--line-2);border-radius:100px;padding:4px 10px;font-weight:500}
@media(max-width:940px){.erow{grid-template-columns:.5fr 1fr;grid-template-rows:auto auto;gap:8px 28px}.erow .ek{grid-row:1/3;grid-column:1}.erow .et{grid-column:2;grid-row:1}.erow>div:last-child{grid-column:2;grid-row:2}}
@media(max-width:680px){.erow{grid-template-columns:1fr;grid-template-rows:none;gap:14px;padding:30px 0}.erow .ek{grid-row:auto;grid-column:1;padding-top:0}.erow .et,.erow>div:last-child{grid-column:1;grid-row:auto}}

/* compliance microstrip */
.compstrip{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center;margin-top:44px;padding:22px 28px;border:1px solid var(--line-2);border-radius:16px;background:var(--glass);backdrop-filter:blur(12px)}
.compstrip .ci{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--dim)}
.compstrip .ci svg{width:18px;height:18px;color:var(--ice-2);flex-shrink:0}
.compstrip .ci b{color:var(--text);font-weight:600}

/* big single quote */
.bigq{max-width:780px;margin:0 auto;text-align:center}
.bigq .qstars{display:flex;gap:4px;justify-content:center;color:var(--warn);margin-bottom:22px}
.bigq .qstars svg{width:18px;height:18px}
.bigq blockquote{font-family:var(--sans);font-weight:500;font-size:clamp(24px,3.6vw,42px);line-height:1.22;letter-spacing:-.02em;margin:0 auto 30px}
.bigq blockquote .grad{font-weight:600}
.bigq .qwho{display:inline-flex;align-items:center;gap:13px}
.bigq .qav{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:15px;color:#04111c;background:linear-gradient(150deg,var(--ice-1),var(--ice-4))}
.bigq .qn{text-align:left}
.bigq .qn b{display:block;font-size:15px}
.bigq .qn span{font-family:var(--mono);font-size:11.5px;color:var(--dim)}

/* statement headline (facility) */
.statement .s-title{font-size:clamp(36px,5.6vw,70px)}

/* alternating section panels — break the uniformity */
.panel{position:relative;background:linear-gradient(180deg,var(--bg-2),transparent 92%);border-top:1px solid var(--line)}
.panel::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--line-3),transparent)}
.panel::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(900px,90%);height:340px;background:radial-gradient(60% 100% at 50% 0%,color-mix(in srgb,var(--ice-4),transparent 88%),transparent 70%);pointer-events:none;z-index:0}

/* traveling-glow divider between sections */
.divider{position:relative;height:8px;max-width:1080px;margin:0 auto;overflow:hidden}
.divider::before{content:"";position:absolute;top:3px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent)}
.divider::after{content:"";position:absolute;top:1px;left:0;width:70px;height:6px;border-radius:6px;background:radial-gradient(closest-side,var(--ice-2),transparent);filter:blur(1px);animation:trace 7s linear infinite}
@keyframes trace{0%{transform:translateX(-90px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(1080px);opacity:0}}

/* hero aurora ribbons */
.hero .ribbons{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden;opacity:.55}
.hero .ribbons path{fill:none;stroke:url(#wing);stroke-width:1.4;stroke-linecap:round}
.hero .ribbons path:nth-child(1){opacity:.5;animation:rib1 14s ease-in-out infinite alternate}
.hero .ribbons path:nth-child(2){opacity:.35;animation:rib2 18s ease-in-out infinite alternate}
.hero .ribbons path:nth-child(3){opacity:.28;animation:rib1 22s ease-in-out infinite alternate-reverse}
@keyframes rib1{100%{transform:translate(-1.5%,2%)}}
@keyframes rib2{100%{transform:translate(2%,-1.5%)}}

/* butterfly divider — Papilio brand separator */
.bdiv{display:flex;align-items:center;gap:20px;max-width:1000px;margin:0 auto;padding:0 24px}
.bdiv::before,.bdiv::after{content:"";height:1px;flex:1}
.bdiv::before{background:linear-gradient(90deg,transparent,var(--line-2))}
.bdiv::after{background:linear-gradient(90deg,var(--line-2),transparent)}
.bdiv svg,.bdiv img{width:32px;height:32px;flex-shrink:0;opacity:.95;animation:flutter 7s ease-in-out infinite;transform-origin:center}
.bdiv svg path{stroke:url(#wing)}
.bdiv svg line{stroke:var(--ice-1)}

/* butterfly watermark behind CTA */
.cta .bwm{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:min(620px,96%);color:var(--ice-2);opacity:.05;z-index:0;pointer-events:none}
.cta .bwm svg,.cta .bwm img{width:100%;height:auto;display:block;animation:bloomspin 26s ease-in-out infinite alternate}
@keyframes bloomspin{100%{transform:scale(1.05) rotate(2deg)}}

/* butterfly watermark in footer */
.fbf{position:absolute;right:2%;top:18px;width:150px;color:var(--ice-2);opacity:.07;pointer-events:none;z-index:0}
.fbf svg,.fbf img{width:100%;height:auto;display:block;animation:flutter 9s ease-in-out infinite}

/* distinct per-tier section headers (inner pages) */
.tierhead{display:flex;align-items:center;gap:30px;margin-bottom:42px;flex-wrap:wrap;position:relative}
.tier-emblem{position:relative;width:96px;height:96px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex-shrink:0;background:linear-gradient(158deg,color-mix(in srgb,var(--accent,var(--ice-3)),#04111c 18%),color-mix(in srgb,var(--accent,var(--ice-3)),#04111c 64%));border:1px solid color-mix(in srgb,var(--accent,var(--ice-3)),transparent 38%);box-shadow:0 24px 50px -20px var(--accent,var(--ice-3)),inset 0 1px 0 color-mix(in srgb,var(--accent,var(--ice-3)),#fff 32%)}
.tier-emblem::before{content:"";position:absolute;inset:0;border-radius:24px;background:radial-gradient(62% 52% at 50% 0%,color-mix(in srgb,var(--accent,var(--ice-3)),#fff 45%),transparent 72%);opacity:.55;pointer-events:none}
.tier-emblem .tn{position:relative;font-family:var(--sans);font-weight:700;font-size:32px;letter-spacing:-.04em;color:#f2fbff;line-height:1;text-shadow:0 2px 14px color-mix(in srgb,var(--accent,var(--ice-3)),transparent 20%)}
.tier-emblem .ts{position:relative;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;color:color-mix(in srgb,var(--accent,var(--ice-3)),#fff 45%)}
.th-body{flex:1;min-width:260px}
.th-body .eyebrow{color:var(--accent,var(--ice-2));margin-bottom:10px}
.th-body .eyebrow::before{background:linear-gradient(90deg,var(--accent,var(--ice-3)),transparent)}
.th-body h2{font-size:clamp(25px,3.2vw,38px);letter-spacing:-.015em}
.th-body p{color:var(--dim);font-size:14.5px;margin-top:8px;max-width:56ch}
.tier-specs{display:flex;flex-direction:column;gap:11px;padding-left:20px;border-left:2px solid color-mix(in srgb,var(--accent,var(--ice-3)),transparent 55%)}
.tier-specs b{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;color:var(--ice-1);font-weight:500;white-space:nowrap}
.tier-specs b::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent,var(--ice-3));box-shadow:0 0 8px var(--accent,var(--ice-3));flex-shrink:0}
.tierhead.center{flex-direction:column;text-align:center;align-items:center;gap:18px}
.tierhead.center .th-body .eyebrow{justify-content:center}
.tierhead.center .th-body p{margin-inline:auto}
.tierhead.center .tier-specs{flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px 22px;padding-left:0;border-left:none}
@media(max-width:760px){.tier-specs{flex-direction:row;flex-wrap:wrap;align-items:flex-start}.tier-emblem{width:58px;height:58px;font-size:18px;border-radius:15px}.tierhead{gap:18px}}
/* per-tier accent on the cards within a section */
.tierwrap .plan:hover{border-color:var(--accent,var(--line-3))}
.tierwrap .plan .pp .amt,.tierwrap .plan .pp .cur{color:var(--accent,inherit)}

/* hero live pill + deploy command line */
.hero-live{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--ice-1);border:1px solid var(--line-2);background:var(--glass);backdrop-filter:blur(10px);padding:8px 16px;border-radius:100px;margin-bottom:26px}
.hero-live .dot{margin:0}
.hero-live .sep{color:var(--faint)}
.hero-cmd{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:34px;font-family:var(--mono);font-size:13px;color:var(--dim);border:1px solid var(--line-2);background:rgba(2,5,10,.62);backdrop-filter:blur(10px);border-radius:14px;padding:13px 20px;box-shadow:0 24px 60px -44px #000}
.hero-cmd .pr{color:var(--ice-3)}
.hero-cmd .cmd-main{color:var(--text)}
.hero-cmd .cmd-flag{color:var(--ice-2)}
.hero-cmd .cmd-ok{display:inline-flex;align-items:center;gap:7px;color:var(--good);padding-left:14px;border-left:1px solid var(--line)}
.hero-cmd .cmd-ok .dot{margin:0;width:6px;height:6px}
@media(max-width:560px){.hero-cmd{font-size:11.5px;padding:11px 14px}.hero-cmd .cmd-ok{border-left:none;padding-left:0;width:100%;justify-content:center}}

/* product showcase (inner pages) */
.showcase{display:grid;grid-template-columns:.95fr 1.05fr;gap:50px;align-items:center}
.sc-visual{position:relative}
.srv{width:100%;height:auto;filter:drop-shadow(0 36px 60px rgba(0,0,0,.55))}
.srv .led{animation:led 1.6s ease-in-out infinite}
.srv .led.b{animation-delay:.4s}.srv .led.c{animation-delay:.9s}
.sc-tag{position:absolute;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ice-1);background:rgba(5,8,15,.8);border:1px solid var(--line-2);border-radius:100px;padding:5px 12px;backdrop-filter:blur(8px)}
.sc-tag.t1{top:6%;right:-2%}.sc-tag.t2{bottom:8%;left:-3%}
.sc-tag b{color:var(--ice-2);font-weight:500}
.incl-list{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;margin-top:30px}
.incl-list li{display:flex;gap:13px;align-items:flex-start}
.incl-list .ii{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--ice-1);background:linear-gradient(160deg,var(--bg-4),transparent);flex-shrink:0;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.incl-list li:hover .ii{transform:translateY(-3px);border-color:var(--ice-3);box-shadow:0 0 24px -8px var(--ice-3)}
.incl-list .ii svg{width:20px;height:20px}
.incl-list h4{font-size:14.5px;margin-bottom:3px}
.incl-list p{font-size:12.5px;color:var(--dim);line-height:1.5}
@media(max-width:900px){.showcase{grid-template-columns:1fr;gap:38px}.sc-visual{max-width:480px;margin:0 auto;width:100%}}
@media(max-width:520px){.incl-list{grid-template-columns:1fr}}

/* IP allocation card (add-ons showcase) */
.ipcard{border:1px solid var(--line-2);border-radius:16px;background:rgba(2,5,10,.72);overflow:hidden;font-family:var(--mono);box-shadow:0 32px 72px -46px #000}
.ipcard-h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg-2);font-size:13px}
.ipcard-h span{color:var(--ice-1)}.ipcard-h b{color:var(--ice-2);font-weight:500;font-size:11px}
.iprow{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:13px}
.iprow .ipa{color:var(--text);flex:1;letter-spacing:.02em}
.iprow .ipd{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.iprow .ipd::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
.iprow .ipd.live{color:var(--good)}.iprow .ipd.live::before{background:var(--good);box-shadow:0 0 8px var(--good);animation:pulse 2s infinite}
.iprow .ipt{font-size:10.5px;color:var(--ice-2)}
.ipcard-f{display:flex;align-items:center;gap:10px;padding:13px 18px;font-size:11px;color:var(--dim)}
.ipcard-f .bw{flex:1;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.ipcard-f .bw i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--ice-3),var(--ice-1));animation:bwfill 3.5s ease-in-out infinite alternate}
@keyframes bwfill{0%{width:18%}100%{width:88%}}

/* interactive network globe */
/* world map */
.worldmap{position:relative;padding:0;overflow:hidden;aspect-ratio:auto}
.worldmap .wmap{width:100%;height:auto;display:block}
.wland path{fill:rgba(125,211,252,.05);stroke:rgba(125,211,252,.16);stroke-width:.5;vector-effect:non-scaling-stroke}
.wland-hi path{fill:rgba(56,189,248,.20);stroke:rgba(186,234,255,.85);stroke-width:1;vector-effect:non-scaling-stroke}
[data-theme="light"] .wland path{fill:rgba(15,40,70,.06);stroke:rgba(15,60,100,.22)}
[data-theme="light"] .wland-hi path{fill:rgba(14,124,200,.30);stroke:rgba(8,80,140,.9)}
[data-theme="light"] .worldmap .wmap rect{fill:#eaf2fb}
.wlink{fill:none;stroke:#58c7f7;stroke-width:1.4;stroke-opacity:.55;stroke-dasharray:5 7;vector-effect:non-scaling-stroke;animation:wflow 1.1s linear infinite}
@keyframes wflow{to{stroke-dashoffset:-12}}
.wpkt{fill:#bfeeff}
.wpulse{fill:none;stroke:#7dd3fc;stroke-width:1.2;opacity:.7;transform-box:fill-box;transform-origin:center;animation:wping 2.4s ease-out infinite}
.wpin.hub .wpulse{stroke:#bfeeff;animation-duration:2s}
@keyframes wping{0%{transform:scale(.5);opacity:.8}70%,100%{transform:scale(2.6);opacity:0}}
.wdot{fill:#7dd3fc;stroke:#04070d;stroke-width:1}
.wpin.hub .wdot{fill:#eafaff;stroke:#0a84c7;stroke-width:1.4}
.wlab{font-family:var(--mono);font-size:13px;font-weight:500;fill:#dff1ff;letter-spacing:.02em;paint-order:stroke;stroke:rgba(4,7,13,.9);stroke-width:3.5px}
.wpin.hub .wlab{fill:#fff;font-weight:600}
[data-theme="light"] .wlab,[data-theme="light"] .wpin.hub .wlab{fill:#06243f;stroke:rgba(255,255,255,.92)}
.globe-legend{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(125,211,252,.6);pointer-events:none}
@media(prefers-reduced-motion:reduce){.wlink,.wpulse{animation:none}.wpkt{display:none}.wlink{stroke-opacity:.45}}
@media(max-width:560px){.wlab{font-size:16px}}

/* VPS intro feature row */
.vps-feats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 16px;margin:28px auto 50px;max-width:840px}
.vps-feats .vf{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--dim);border:1px solid var(--line-2);background:var(--glass);backdrop-filter:blur(10px);padding:10px 16px;border-radius:12px;transition:border-color .25s,transform .25s var(--ease)}
.vps-feats .vf:hover{border-color:var(--line-3);transform:translateY(-2px)}
.vps-feats .vf svg{width:18px;height:18px;color:var(--ice-2);flex-shrink:0}
.vps-feats .vf b{color:var(--text);font-weight:600}

/* network mini-stats (fills the left column) */
.net-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.net-stats .ns{border:1px solid var(--line-2);border-radius:13px;background:var(--glass);backdrop-filter:blur(10px);padding:15px 17px;transition:border-color .25s,transform .25s var(--ease)}
.net-stats .ns:hover{border-color:var(--line-3);transform:translateY(-2px)}
.net-stats .ns b{display:block;font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:-.01em}
.net-stats .ns b .u{font-size:.55em;color:var(--dim);margin-left:2px}
.net-stats .ns span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);display:block;margin-top:4px}

/* outcomes / social proof */
.outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.oc{position:relative;border:1px solid var(--line-2);border-radius:var(--r);background:var(--glass);backdrop-filter:blur(12px);padding:32px 28px;overflow:hidden;transition:transform .25s var(--ease),border-color .25s}
.oc:hover{transform:translateY(-4px);border-color:var(--line-3)}
.oc::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--accent,var(--ice-3)),transparent);opacity:.7}
.oc .ov{font-family:var(--sans);font-weight:700;font-size:clamp(36px,4.4vw,52px);line-height:1;letter-spacing:-.025em;color:var(--accent,var(--ice-2))}
.oc .ov .us{font-size:.42em;color:var(--dim);margin-left:4px;font-weight:500}
.oc .ol{font-size:14.5px;color:var(--text);margin-top:16px;line-height:1.55}
.oc .ow{display:flex;align-items:center;gap:11px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.oc .ow .av{width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(155deg,var(--accent,var(--ice-2)),color-mix(in srgb,var(--accent,var(--ice-4)),#04111c 45%));display:flex;align-items:flex-end;justify-content:center;border:1.5px solid color-mix(in srgb,var(--accent,var(--ice-3)),transparent 55%)}
.oc .ow .av svg{width:38px;height:38px}
.oc .ow .av svg .sk{fill:#eaf8ff;opacity:.95}
.oc .ow .on{font-size:12.5px;color:var(--text);font-weight:600}
.oc .ow .od{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
@media(max-width:820px){.outcomes{grid-template-columns:1fr}}

/* decorative quote glyph */
.bigq{position:relative}
.bigq .qglyph{position:absolute;top:-46px;left:50%;transform:translateX(-50%);font-family:var(--sans);font-size:140px;line-height:1;color:var(--ice-3);opacity:.12;pointer-events:none;z-index:0}
.bigq>*{position:relative;z-index:1}

/* anchor jumps clear the fixed nav */
section[id],header[id]{scroll-margin-top:96px}

/* top scrim — stops page content bleeding through the translucent fixed bars on scroll */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:128px;z-index:50;pointer-events:none;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 68%,color-mix(in srgb,var(--bg),transparent 55%) 86%,transparent 100%)}

/* ambient drifting frost particles (global, seamless tile) */
.bg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;background-repeat:repeat;background-size:380px 380px;background-image:
  radial-gradient(1.6px 1.6px at 40px 70px,rgba(191,238,255,.7),transparent 60%),
  radial-gradient(1.4px 1.4px at 150px 300px,rgba(125,211,252,.55),transparent 60%),
  radial-gradient(1px 1px at 240px 120px,rgba(191,238,255,.6),transparent 60%),
  radial-gradient(1.6px 1.6px at 330px 250px,rgba(125,211,252,.5),transparent 60%),
  radial-gradient(1px 1px at 90px 200px,rgba(191,238,255,.5),transparent 60%),
  radial-gradient(1.3px 1.3px at 300px 40px,rgba(125,211,252,.55),transparent 60%),
  radial-gradient(1px 1px at 200px 350px,rgba(191,238,255,.45),transparent 60%);
  animation:frostfall 32s linear infinite}
@keyframes frostfall{from{background-position:0 0}to{background-position:0 380px}}
[data-theme="light"] .bg::after{opacity:.35;background-image:
  radial-gradient(1.6px 1.6px at 40px 70px,rgba(2,132,199,.5),transparent 60%),
  radial-gradient(1.4px 1.4px at 150px 300px,rgba(2,132,199,.4),transparent 60%),
  radial-gradient(1px 1px at 240px 120px,rgba(2,132,199,.45),transparent 60%),
  radial-gradient(1.6px 1.6px at 330px 250px,rgba(2,132,199,.4),transparent 60%),
  radial-gradient(1px 1px at 90px 200px,rgba(2,132,199,.4),transparent 60%),
  radial-gradient(1.3px 1.3px at 300px 40px,rgba(2,132,199,.45),transparent 60%),
  radial-gradient(1px 1px at 200px 350px,rgba(2,132,199,.35),transparent 60%)}

/* slow life in the grid */
.bg .grid{animation:gridbreath 26s ease-in-out infinite alternate}
@keyframes gridbreath{100%{opacity:.55;transform:translateY(8px)}}

/* staggered cascade reveal for grids */
.prices .plan:nth-child(2),.cats .cat:nth-child(2),.efeat .erow:nth-child(2),.glance .gr:nth-child(2){transition-delay:.06s}
.prices .plan:nth-child(3),.cats .cat:nth-child(3),.efeat .erow:nth-child(3),.glance .gr:nth-child(3){transition-delay:.12s}
.prices .plan:nth-child(4),.cats .cat:nth-child(4),.efeat .erow:nth-child(4),.glance .gr:nth-child(4){transition-delay:.18s}
.prices .plan:nth-child(5),.cats .cat:nth-child(5),.glance .gr:nth-child(5){transition-delay:.24s}
.prices .plan:nth-child(6),.cats .cat:nth-child(6){transition-delay:.30s}
.prices .plan:nth-child(7){transition-delay:.36s}
.prices .plan:nth-child(8){transition-delay:.42s}

/* quick section nav (inner pages) */
.qnav{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:36px}
.qnav a{display:inline-flex;align-items:center;gap:11px;padding:8px 18px 8px 9px;border-radius:15px;border:1px solid var(--line-2);background:var(--glass);backdrop-filter:blur(12px);transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.qnav a:hover{border-color:var(--accent,var(--line-3));background:var(--line);transform:translateY(-3px);box-shadow:0 14px 30px -18px var(--accent,#000)}
.qnav a .qi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--accent,var(--ice-1));background:linear-gradient(160deg,var(--bg-4),transparent);flex-shrink:0;transition:transform .2s,border-color .2s}
.qnav a:hover .qi{transform:translateY(-1px);border-color:var(--accent,var(--ice-3))}
.qnav a .qi svg{width:18px;height:18px}
.qnav a .ql{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.qnav a .ql b{font-family:var(--sans);font-weight:600;font-size:13.5px;color:var(--text);letter-spacing:-.01em}
.qnav a .ql small{font-family:var(--mono);font-size:10.5px;color:var(--accent,var(--ice-2));margin-top:1px}

/* at-a-glance lineup table (clickable) */
.glance{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--glass);backdrop-filter:blur(12px)}
.glance .gr{display:grid;grid-template-columns:1.05fr 1.5fr 1.5fr .95fr .7fr;border-bottom:1px solid var(--line);transition:background .2s}
.glance .gr:last-child{border-bottom:none}
.glance a.gr:hover{background:rgba(56,189,248,.05)}
.glance .gc{padding:16px 20px;font-size:13.5px;display:flex;align-items:center;gap:8px;color:var(--dim);border-right:1px solid var(--line);min-width:0}
.glance .gc:last-child{border-right:none;justify-content:flex-end}
.glance .gr.h .gc{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--bg-3);color:var(--dim)}
.glance .gname{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--text)}
.glance .gfrom{font-family:var(--sans);font-weight:600;color:var(--ice-1)}
.glance .garrow{color:var(--ice-2);transition:transform .2s}
.glance a.gr:hover .garrow{transform:translateX(3px)}
@media(max-width:760px){.glance .gr{grid-template-columns:1fr 1fr .7fr}.glance .gc:nth-child(2),.glance .gc:nth-child(3){display:none}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}