/* home.css — light-theme landing homepage (the only stylesheet on layouts/home.html).
   Ported verbatim from the design mockup. Single brand color #2567ff.
   Mono falls back to a system stack (no external font CDN); Inter is self-hosted. */
:root{
  --font-inter:'Inter', 'Inter Fallback';--font-sans:var(--font-inter), Inter, ui-sans-serif, system-ui;
  --font-mono:ui-monospace,'JetBrains Mono', 'JetBrains Mono Fallback',SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#ffffff;
  --canvas:#ffffff;
  --ink:#080b14;
  --ink-2:#0d1220;
  --border:#e7ebf2;
  --border-hover:#ccd4e0;
  --text:#0b1220;
  --text-2:#525c72;
  --text-3:#5a6a86;        /* muted — AA (≥4.6:1) on #eef2f7/#f8fafc/#fff */
  /* ── brand: a single electric blue ── */
  --cyan:#2567ff;          /* primary brand */
  --cyan-bright:#5b86ff;   /* lighter — gradient tops, glows, code */
  --cyan-deep:#1d4ed8;     /* accessible brand text on white */
  --cyan-ink:#ffffff;      /* text on brand fills (buttons/badges) */
  --cyan-tint:#eaf1ff;     /* soft brand wash */
  --cyan-line:#bfd3ff;     /* brand borders */
  --violet:#1d4ed8;        /* deep brand (gradient ends) */
  --blue:#2567ff;          /* = brand */
  --green:#2567ff;         /* success now reads as brand */
  --amber:#f59e0b;--rose:#f43f5e;  /* kept: warning / error status only */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.3,0.64,1);
  --ease-smooth:cubic-bezier(0.65,0,0.35,1);
  --sh-sm:0 1px 2px rgba(8,11,20,0.05);
  --sh-md:0 6px 20px rgba(8,11,20,0.06);
  --sh-lg:0 16px 44px rgba(8,11,20,0.09);
  --sh-xl:0 28px 70px rgba(8,11,20,0.12);
  --sh-cyan:0 10px 30px rgba(37,103,255,0.30);
  --r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:24px;
  --globe-dot:#c9d4ea;     /* desaturated brand-tinted slate — hero dotted-globe dots */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip (not hidden) at the root: prevents transient horizontal
   overflow during progressive render / font swap from widening the mobile
   layout viewport (which re-positions the right-anchored fixed glows and
   registers as layout shifts), without creating a scroll container that
   would break the sticky header. */
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:clip}
body{font-family:var(--font-sans);color:var(--text);background:var(--bg);line-height:1.5;overflow-x:hidden;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--font-mono)}

.glows{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
/* will-change keeps the float transform composited (blur(90px) otherwise pushes
   it to the main thread, where Chrome books the movement as layout shifts). The
   float is fully off until the first interaction adds body.ambient (home.js):
   even a paused negative-delay animation applies a static mid-cycle transform,
   which Chrome records as a shift when the style lands. :not() outranks the
   .glow.b/.glow.c delay rules, and those delays kick back in once ambient. */
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.5;animation:float 16s ease-in-out infinite;will-change:transform}
body:not(.ambient) .glow{animation:none}
.glow.a{width:520px;height:520px;top:-180px;left:-120px;background:radial-gradient(circle,rgba(37,103,255,0.42),transparent 70%)}
.glow.b{width:460px;height:460px;top:-120px;right:-100px;background:radial-gradient(circle,rgba(29,78,216,0.30),transparent 70%);animation-delay:-6s}
.glow.c{width:380px;height:380px;top:520px;left:44%;background:radial-gradient(circle,rgba(83,133,255,0.18),transparent 70%);animation-delay:-11s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,30px) scale(1.06)}}

.announce{background:var(--ink);color:#fff;text-align:center;font-size:13px;padding:9px 20px;line-height:1.4;position:relative;z-index:60;animation:slideDown .5s var(--ease-out) both}
.announce .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:8px;box-shadow:0 0 0 3px rgba(37,103,255,0.25);animation:blink 2.4s ease-in-out infinite;vertical-align:middle}
.announce a{color:var(--cyan-bright);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{opacity:1;transform:translateY(0)}}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.site-header.scrolled{background:rgba(255,255,255,0.92);border-color:var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1160px;margin:0 auto;padding:0 24px}
.header-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-0.4px}
.header-logo .mark{color:var(--cyan-deep)}
.header-logo span{background:linear-gradient(120deg,var(--ink),var(--cyan-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.header-nav{display:flex;align-items:center;gap:24px}
.header-nav a{font-size:14px;font-weight:500;color:var(--text-2);transition:color .2s;position:relative}
.header-nav a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:2px;background:var(--cyan);transition:width .3s var(--ease-out)}
.header-nav a:hover{color:var(--text)}.header-nav a:hover::after{width:100%}
.header-actions{display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:-0.005em;padding:0 22px;height:44px;border-radius:999px;border:1px solid transparent;transition:background .18s var(--ease-out),box-shadow .18s var(--ease-out),color .18s,border-color .18s;white-space:nowrap;line-height:1}
.btn .arr{width:16px;height:16px;flex-shrink:0;transition:transform .18s var(--ease-out)}
.btn:hover .arr{transform:translate(2px,-2px)}
.btn:active{transform:scale(.985)}
.btn-ghost{color:var(--text);background:transparent}
.btn-ghost:hover{background:rgba(8,11,20,0.05)}
.btn-accent{background:var(--cyan);color:#fff;box-shadow:0 8px 24px -8px rgba(37,103,255,0.45)}
.btn-accent:hover{background:var(--cyan-deep);box-shadow:0 10px 28px -8px rgba(37,103,255,0.55)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:rgba(26,26,26,0.82)}
.btn-soft{color:var(--text);background:rgba(120,132,168,0.10);border-color:rgba(20,24,40,0.07)}
.btn-soft:hover{background:rgba(120,132,168,0.18)}
.btn-ondark{color:#fff;background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15)}
.btn-ondark:hover{background:rgba(255,255,255,0.16)}
.btn-outline{border-color:var(--border);color:var(--text);background:var(--bg)}
.btn-outline:hover{border-color:var(--cyan-line);background:var(--cyan-tint);box-shadow:var(--sh-sm)}
.mobile-toggle{display:none;background:none;border:none;padding:8px;color:var(--text)}
.askai-nav-btn svg{width:16px;height:16px;flex-shrink:0}
/* ghost "Sign in ↗" text link in the header actions (underline-grow like .header-nav a) */
.header-signin{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:500;color:var(--text-2);padding:0 4px;transition:color .2s;position:relative}
.header-signin::after{content:'';position:absolute;bottom:-3px;left:4px;right:4px;width:auto;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.header-signin:hover{color:var(--text)}
.header-signin:hover::after{transform:scaleX(1)}
.header-signin .arr{width:14px;height:14px;flex-shrink:0;transition:transform .18s var(--ease-out)}
.header-signin:hover .arr{transform:translate(2px,-2px)}
.header-signin:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
@media(max-width:860px){.header-nav,.header-actions .btn-ghost,.askai-nav-btn,.header-signin{display:none}.mobile-toggle{display:block}}

.pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pill{font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:0.2px;color:var(--text-2);background:var(--bg);border:1px solid var(--border);border-radius:100px;padding:5px 12px;transition:all .25s var(--ease-out)}
.pill:hover{color:var(--cyan-deep);border-color:var(--cyan-line);background:var(--cyan-tint);transform:translateY(-2px)}
.pill .d{color:var(--cyan);margin-right:6px}

/* ── centered hero (big ambient dotted-globe background; full-height flex COLUMN:
      middle band grows to center the copy, bottom band pins the builds strip
      ABOVE THE FOLD inside min-height:calc(100svh - 104px)) ── */
.hero{position:relative;min-height:calc(100svh - 104px);display:flex;flex-direction:column;z-index:1;overflow:hidden}
.hero--center{text-align:center}
.hero-anchor{position:absolute;inset:0;z-index:0;pointer-events:none}
/* middle band: flex:1 so it fills the space between header and bottom band, keeping copy vertically centered */
.hero-main{position:relative;z-index:2;flex:1 1 auto;display:flex;align-items:center;width:100%;padding:56px 0 28px}
.hero .container{position:relative;z-index:2;width:100%}
.hero-copy--center{max-width:820px;margin:0 auto}
.hero-eyebrow{display:inline-block;margin-bottom:22px;font:600 clamp(.68rem,.62rem + .2vw,.75rem)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);animation:hFade .7s var(--ease-out) .04s both}
.hero h1{font-size:clamp(2.2rem,1.1rem + 4.4vw,4.2rem);font-weight:600;line-height:1.06;letter-spacing:-.03em;margin:0;animation:hFade .7s var(--ease-out) .08s both}
.hero h1 .hl{-webkit-text-fill-color:initial;background:none;color:var(--cyan)}
.hero p.lead{font-size:clamp(1.05rem,.98rem + .5vw,1.25rem);line-height:1.6;color:#33415a;max-width:42rem;margin:1.6rem auto 32px;animation:hFade .7s var(--ease-out) .18s both}
.hero p.lead b{color:var(--text);font-weight:700}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:hFade .7s var(--ease-out) .28s both}
.hero-actions .btn{font-size:15px;height:48px;padding:0 26px}
.hero-actions .btn-outline:hover{border-color:var(--border-hover);background:#f7f9fc;box-shadow:var(--sh-sm)}
/* bottom band pinned inside the hero (in-flow, flex-shrink:0) — Didit-style logo band (builds strip only) */
.hero-bottom{position:relative;z-index:2;flex:0 0 auto;width:100%;padding-top:8px;padding-bottom:20px;animation:hFade .7s var(--ease-out) .4s both}
.hero-bottom .builds-strip{margin-bottom:14px}
.hero-bottom .builds-oss{margin-top:12px;margin-bottom:0}
.hero-pills{margin-bottom:40px;animation:hFade .7s var(--ease-out) .38s both}
@keyframes hFade{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
/* Short viewports (laptops ~768–820px tall): compress the middle band so the
   pinned bottom band (builds strip) stays ABOVE THE FOLD. Only kicks in by
   HEIGHT, so tall desktops (1080p+) keep the full-size hero. min-height (not
   fixed) means very short screens still scroll — nothing is clipped. */
@media(max-height:860px){
  .hero-main{padding:18px 0 10px}
  .hero-eyebrow{margin-bottom:12px}
  .hero h1{font-size:clamp(1.9rem,1rem + 3.2vw,2.9rem);line-height:1.05}
  .hero p.lead{font-size:clamp(1rem,.95rem + .3vw,1.1rem);margin:.9rem auto 16px;line-height:1.5}
  .hero-actions .btn{height:44px}
  .hero-bottom{padding-top:4px;padding-bottom:14px}
  .hero-bottom .builds-strip{margin-bottom:8px}
  .hero-bottom .builds-oss{margin-top:6px}
  .bld{padding:6px 12px;font-size:12.5px}
  .builds-eyebrow{margin-bottom:10px}
}
@media(max-height:680px){
  .hero h1{font-size:clamp(1.7rem,1rem + 2.6vw,2.4rem)}
  .hero p.lead{margin:.75rem auto 16px}
  .hero-main{padding:16px 0 12px}
}

/* keyboard focus — visible brand ring, never on mouse click (a11y) */
.btn:focus-visible,
.header-nav a:focus-visible,
.nav-dd-btn:focus-visible,
.nav-dd-panel a:focus-visible,
.hw-doclink:focus-visible,
.builds-strip a:focus-visible,
.builds-oss a:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
  border-radius:6px;
}

/* ── "Builds and runs your stack" strip (honest capability statement) ── */
.builds-eyebrow{text-align:center;font:600 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px}
.builds-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:860px;margin:0 auto}
.bld{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--text-3);font-size:13px;font-weight:600;transition:color .22s var(--ease-out),border-color .22s var(--ease-out),transform .22s var(--ease-out)}
.bld svg{width:20px;height:20px;flex-shrink:0;opacity:.72;transition:opacity .22s}   /* currentColor tint via .bld color */
.bld:hover{color:var(--cyan-deep);border-color:var(--cyan-line);transform:translateY(-2px)}
.bld:hover svg{opacity:1}
.bld em{font-style:normal;font-weight:500;color:var(--text-3);margin-left:2px}
.builds-oss{text-align:center;margin-top:18px;font-size:13px}
.builds-oss a{color:var(--cyan-deep);font-weight:600}

.term{max-width:720px;margin:0 auto;background:var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-xl),0 0 0 1px rgba(255,255,255,0.04);overflow:hidden;text-align:left;animation:termRise .9s var(--ease-out) .5s both}
@keyframes termRise{from{opacity:0;transform:translateY(34px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.06)}
.term-bar .dot{width:11px;height:11px;border-radius:50%}
.term-bar .r{background:#ff5f57}.term-bar .y{background:#febc2e}.term-bar .g{background:#28c840}
.term-bar .title{margin-left:8px;font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
.term-body{padding:18px 20px;font-family:var(--font-mono);font-size:13px;line-height:1.85;color:#cfd6e6}
.term-body .cmd{color:#e9edf5}
.term-body .cmd .pr{color:var(--cyan)}
.term-body .ok{color:var(--cyan-bright)}
.term-body .mut{color:#6b7690}
.term-feed{margin-top:10px;border-top:1px solid rgba(255,255,255,0.06);padding-top:12px}
.hero-visual .term-body{height:178px;overflow:hidden;background:#fff}
.hero-visual .term-bar{background:#fff;border-bottom:1px solid var(--border);padding:12px 15px;gap:9px}
.term-ic{width:16px;height:16px;color:var(--cyan-deep);flex-shrink:0}
.term-name{font-weight:700;font-size:13px;color:var(--text)}
.term-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-3)}
.term-live .lv-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16)}
.term-body .cur{color:var(--cyan);margin-left:1px;animation:termCur 1.05s step-end infinite}
@keyframes termCur{50%{opacity:0}}
.term-in{animation:termInAnim .3s var(--ease-out) both}
@keyframes termInAnim{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* ── One-cloud hub animation (hero visual) ── */
.oapi-col{display:flex;align-items:center;justify-content:center;min-width:0}
.oapi{position:relative;width:100%;max-width:480px;margin:0 auto;aspect-ratio:1;overflow:visible;--oapi-r0:52px;--oapi-r1:158px}
.oapi-scene{position:absolute;inset:0}
.oapi-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.oapi-guide{fill:none;stroke:var(--cyan-line);transform-box:fill-box;transform-origin:center}
.oapi-guide:nth-of-type(1){stroke-width:1.2;opacity:.4;animation:oapiGuidePulse 3.4s ease-in-out infinite}
.oapi-guide:nth-of-type(2){stroke-width:1.2;stroke-dasharray:3 9;opacity:.55;animation:oapiSpin 34s linear infinite}
@keyframes oapiSpin{to{transform:rotate(360deg)}}
.oapi-wire{stroke:var(--cyan-line);stroke-width:1.6;opacity:.55;stroke-dasharray:110;stroke-dashoffset:110;animation:oapiWire .8s var(--ease-out) forwards;animation-delay:calc(var(--i)*.07s + .25s)}
@keyframes oapiWire{to{stroke-dashoffset:0}}
.oapi-streak{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px 1px var(--cyan-bright);opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--oapi-r0)) scale(.5);animation:oapiStreak 3s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i)*.34s + 1.1s)}
@keyframes oapiStreak{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--oapi-r0)) scale(.5)}18%{opacity:1}82%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--oapi-r1)) scale(1)}}
.oapi-node{position:absolute;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:14px;background:#fff;border:1px solid var(--border);box-shadow:var(--sh-md);display:flex;align-items:center;justify-content:center;color:var(--cyan-deep);opacity:0;transform:scale(.72);animation:oapiPop .5s var(--ease-out) forwards,oapiShimmer 3s ease-in-out infinite;animation-delay:calc(var(--i)*.08s + .5s),calc(var(--i)*.34s + 2.3s);z-index:2}
.oapi-node svg{width:19px;height:19px}
@keyframes oapiPop{to{opacity:1;transform:scale(1)}}
.oapi-lbl{position:absolute;transform:translate(-50%,0);font-size:11px;font-weight:600;letter-spacing:-.2px;color:var(--text-2);white-space:nowrap;opacity:0;animation:oapiFade .5s ease forwards;animation-delay:calc(var(--i)*.07s + .62s)}
.oapi-lbl--up{margin-top:-54px}
.oapi-lbl--down{margin-top:36px}
@keyframes oapiFade{to{opacity:1}}
.oapi-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--cyan-bright),var(--cyan-deep));display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:var(--sh-cyan);z-index:3;animation:oapiCore 3.4s ease-in-out infinite}
.oapi-core::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px solid var(--cyan-line);opacity:.55}
.oapi-core .mark{font-weight:800;font-size:28px;line-height:1;letter-spacing:-1.5px}
.oapi-core .tag{font-size:10px;font-weight:600;opacity:.9;margin-top:2px;letter-spacing:.2px}
@keyframes oapiCore{0%,100%{box-shadow:0 0 0 8px rgba(37,103,255,.10),var(--sh-cyan)}50%{box-shadow:0 0 0 18px rgba(37,103,255,0),var(--sh-cyan)}}
.oapi-core::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--cyan);opacity:0;animation:oapiSonar 3s cubic-bezier(.2,.55,.3,1) infinite}
@keyframes oapiSonar{0%{transform:scale(1);opacity:.5}80%,100%{transform:scale(3.8);opacity:0}}
@keyframes oapiShimmer{0%,100%{box-shadow:var(--sh-md)}50%{box-shadow:var(--sh-md),0 0 0 3px rgba(37,103,255,.13),0 0 16px rgba(37,103,255,.32)}}
@keyframes oapiGuidePulse{0%,100%{opacity:.4}50%{opacity:.14}}
@media(max-width:560px){.oapi{max-width:320px;--oapi-r0:34px;--oapi-r1:104px}.oapi-node{width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:13px}.oapi-node svg{width:19px;height:19px}.oapi-lbl{font-size:9px}.oapi-lbl--up{margin-top:-42px}.oapi-lbl--down{margin-top:28px}.oapi-core{width:74px;height:74px}.oapi-core .mark{font-size:28px}.oapi-core .tag{font-size:8px}}
@media(max-width:380px){.oapi{max-width:280px;--oapi-r0:30px;--oapi-r1:90px}.oapi-node{width:38px;height:38px;margin:-19px 0 0 -19px}.oapi-node svg{width:17px;height:17px}.oapi-lbl{font-size:8px}.oapi-lbl--up{margin-top:-36px}.oapi-lbl--down{margin-top:24px}}

/* ── "01 · ONE CLOUD" opener — enlarged hub, first row inside #how (text left / hub right) ── */
.onecloud-lead{color:var(--text-2);font-size:16px;line-height:1.65;max-width:34rem}
.onecloud-lead b{color:var(--text);font-weight:700}
/* text-link with the 45° arrow that nudges on hover (reuses .btn .arr motion) */
.hw-doclink{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;color:var(--cyan-deep);font-weight:600;font-size:15px}
.hw-doclink .arr{width:16px;height:16px;transition:transform .18s var(--ease-out)}
.hw-doclink:hover .arr{transform:translate(2px,-2px)}
/* enlarged hub — bigger than the old hero sizing, spokes read clearly */
.oapi--lg{max-width:560px;--oapi-r0:60px;--oapi-r1:210px}
.oapi--lg .oapi-core{width:96px;height:96px}
.oapi--lg .oapi-core .mark{font-size:34px}
.oapi--lg .oapi-node{width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:16px}
.oapi--lg .oapi-node svg{width:22px;height:22px}
.oapi--lg .oapi-lbl{font-size:12px}
.oapi--lg .oapi-lbl--up{margin-top:-62px}
.oapi--lg .oapi-lbl--down{margin-top:42px}
@media(max-width:900px){.oapi--lg{max-width:420px;--oapi-r0:48px;--oapi-r1:150px}}
@media(max-width:560px){.oapi--lg{max-width:320px;--oapi-r0:36px;--oapi-r1:108px}.oapi--lg .oapi-core{width:78px;height:78px}}
.req{display:grid;grid-template-columns:64px 1fr auto auto;gap:12px;align-items:center;padding:3px 0;opacity:0;transform:translateY(6px);animation:reqIn .5s var(--ease-out) forwards}
.req .m{font-weight:700}
.req .m.get{color:var(--cyan-bright)}.req .m.post{color:var(--green)}.req .m.patch{color:var(--amber)}.req .m.del{color:var(--rose)}
.req .path{color:#c3cbdc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.req .st{color:var(--green);font-weight:600}.req .st.warn{color:var(--amber)}.req .st.block{color:var(--rose)}
.req .lat{color:#6b7690}
@keyframes reqIn{to{opacity:1;transform:translateY(0)}}

section{padding:84px 0;position:relative;z-index:1}
.sec-head{margin-bottom:48px}
.sec-head.center{text-align:center}
.sec-eyebrow{display:inline-flex;align-items:baseline;gap:10px;margin-bottom:14px}
.sec-eyebrow .n{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--cyan-deep)}
.sec-eyebrow .n::after{content:'';display:inline-block;width:22px;height:1px;background:var(--cyan-line);margin:0 2px 4px 8px}
.sec-eyebrow .l{font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:0.2px;text-transform:uppercase}
.sec-title{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;line-height:1.12;letter-spacing:-0.8px;margin-bottom:14px}
.sec-sub{font-size:17px;color:var(--text-2);max-width:620px;line-height:1.65}
.sec-head.center .sec-eyebrow{justify-content:center}
.sec-head.center .sec-sub{margin:0 auto}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-smooth),transform .9s var(--ease-smooth)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.r1{transition-delay:0s}.r2{transition-delay:.1s}.r3{transition-delay:.2s}.r4{transition-delay:.3s}
.count-up{display:inline-block}

.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-card{padding:26px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);transition:all .4s var(--ease-spring);box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.feature-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--cyan-line)}
.feature-card:hover::after{transform:scaleX(1)}
.feature-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:15px;transition:transform .4s var(--ease-spring)}
.feature-card:hover .feature-icon{transform:scale(1.1) rotate(-4deg)}
.feature-card h3{font-size:15.5px;font-weight:700;margin-bottom:7px}
.feature-card p{font-size:13.5px;color:var(--text-2);line-height:1.6}
.feature-card p a{color:var(--cyan-deep);font-weight:600}
@media(max-width:820px){.features-grid{grid-template-columns:1fr 1fr}}@media(max-width:540px){.features-grid{grid-template-columns:1fr}}

.uc-section{background:var(--canvas)}
.usecases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.usecase-card{padding:22px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);transition:all .4s var(--ease-spring);position:relative;overflow:hidden}
.usecase-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--cyan);transition:height .4s var(--ease-out)}
.usecase-card:hover::before{height:100%}
.usecase-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--cyan-line)}
.uc-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:11px;transition:transform .3s var(--ease-spring)}
.usecase-card:hover .uc-icon{transform:scale(1.12)}
.usecase-card h3{font-size:14.5px;font-weight:700;margin-bottom:6px}
.usecase-card p{font-size:13px;color:var(--text-2);line-height:1.6}
.uc-sub{font-family:var(--font-mono);font-size:11px;color:var(--cyan-deep);margin-top:8px;letter-spacing:.2px}
@media(max-width:820px){.usecases-grid{grid-template-columns:1fr 1fr}}@media(max-width:540px){.usecases-grid{grid-template-columns:1fr}}

.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;margin:0 auto}
.compare-card{padding:26px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);text-align:center;transition:all .4s var(--ease-spring)}
.compare-card:hover{box-shadow:var(--sh-lg);transform:translateY(-5px)}
.compare-card.featured{border-color:var(--cyan);background:var(--cyan-tint);position:relative;box-shadow:var(--sh-cyan)}
.compare-card.featured::before{content:'Best value';position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--cyan-bright);font-size:10px;font-weight:700;letter-spacing:.4px;padding:3px 12px;border-radius:100px;text-transform:uppercase}
.cc-amt{font-size:34px;font-weight:900;letter-spacing:-1px;margin-bottom:4px}
.cc-amt.green{color:var(--cyan-deep)}.cc-amt.amber{color:var(--amber)}.cc-amt.rose{color:var(--rose)}
.cc-amt .u{font-size:15px;font-weight:600;color:var(--text-2)}
.cc-lbl{font-size:13px;color:var(--text-2);margin-bottom:11px;font-weight:600}
.cc-desc{font-size:12px;color:var(--text-3);line-height:1.55}
.compare-note{text-align:center;margin-top:28px;font-family:var(--font-mono);font-size:12.5px;color:var(--text-3)}
.compare-note b{color:var(--cyan-deep)}
@media(max-width:820px){.compare-grid{grid-template-columns:1fr;max-width:400px}}

.pricing-section{background:var(--canvas)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:940px;margin:0 auto}
.pricing-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:30px;box-shadow:var(--sh-sm);transition:all .45s var(--ease-spring);position:relative;display:flex;flex-direction:column}
.pricing-card:hover{box-shadow:var(--sh-lg);transform:translateY(-7px)}
.pricing-card.featured{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),var(--sh-cyan)}
.pricing-card.featured .p-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,var(--cyan-bright),var(--cyan));color:var(--cyan-ink);font-size:11px;font-weight:700;padding:4px 14px;border-radius:100px;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,103,255,0.45)}50%{box-shadow:0 0 0 8px rgba(37,103,255,0)}}
.p-name{font-size:16px;font-weight:700;margin-bottom:4px}
.p-sub{font-size:12.5px;color:var(--text-2);margin-bottom:18px}
.p-amount{font-size:34px;font-weight:900;letter-spacing:-1px;margin-bottom:4px}
.p-amount .prd{font-size:14px;font-weight:500;color:var(--text-3)}
.p-desc{font-size:12.5px;color:var(--text-2);margin-bottom:18px;line-height:1.5}
.p-feats{list-style:none;margin-bottom:22px;flex:1}
.p-feats li{font-size:13px;padding:5px 0;display:flex;align-items:center;gap:8px;color:var(--text-2);transition:transform .2s}
.p-feats li:hover{transform:translateX(3px)}
.p-feats li::before{content:'';width:15px;height:15px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%232567ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat}
.pricing-card .btn{width:100%;justify-content:center;padding:11px;font-size:14px}
.pricing-trust{text-align:center;margin-top:24px;font-family:var(--font-mono);font-size:12.5px;color:var(--text-3);display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.pricing-trust span::before{content:'✓ ';color:var(--cyan-deep)}
.pricing-more{text-align:center;margin-top:22px}
.addons-head{text-align:center;font-size:13px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.6px;margin:48px 0 18px}
.addons-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:940px;margin:0 auto}
.addon-card{border:1px solid var(--border);border-radius:var(--r-md);padding:22px;text-align:center;background:var(--bg);transition:all .4s var(--ease-spring)}
.addon-card:hover{box-shadow:var(--sh-lg);transform:translateY(-5px);border-color:var(--cyan-line)}
.ac-price{font-size:20px;font-weight:800;color:var(--cyan-deep);margin-bottom:4px}
.ac-price .u{font-size:11px;font-weight:400;color:var(--text-2)}
.ac-name{font-size:14px;font-weight:600;margin-bottom:6px}
.ac-desc{font-size:12px;color:var(--text-3);line-height:1.5}
@media(max-width:820px){.pricing-grid{grid-template-columns:1fr;max-width:400px}.addons-grid{grid-template-columns:1fr 1fr}}@media(max-width:540px){.addons-grid{grid-template-columns:1fr}}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat-card{text-align:center;padding:26px 14px;transition:all .4s var(--ease-spring);cursor:default}
.stat-card:hover{transform:scale(1.06)}
.stat-num{font-size:38px;font-weight:900;letter-spacing:-1px;margin-bottom:4px;background:linear-gradient(120deg,var(--text),var(--cyan-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-lbl{font-size:13.5px;color:var(--text-2)}
@media(max-width:820px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:14px}.stat-num{font-size:30px}}

.compliance-section{background:var(--canvas)}
.compliance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 18px;max-width:860px;margin:0 auto}
.comp-card{text-align:center;padding:24px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);transition:all .4s var(--ease-spring)}
.comp-card:hover{box-shadow:var(--sh-lg);transform:translateY(-5px);border-color:var(--cyan-line)}
.comp-ico{width:40px;height:40px;border-radius:11px;background:var(--cyan-tint);color:var(--cyan-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.comp-name{font-size:14.5px;font-weight:700;margin-bottom:6px}
.comp-desc{font-size:12.5px;color:var(--text-3);line-height:1.62}
@media(max-width:820px){.compliance-grid{grid-template-columns:1fr 1fr}}@media(max-width:540px){.compliance-grid{grid-template-columns:1fr}}

.cta-section{background:radial-gradient(58% 50% at 12% 14%,rgba(37,103,255,0.22),rgba(37,103,255,0) 70%),radial-gradient(58% 50% at 88% 14%,rgba(99,102,241,0.18),rgba(99,102,241,0) 70%),radial-gradient(75% 55% at 50% 52%,rgba(37,103,255,0.12),rgba(37,103,255,0) 75%),radial-gradient(55% 45% at 16% 88%,rgba(186,230,253,0.22),rgba(186,230,253,0) 72%),radial-gradient(55% 45% at 84% 86%,rgba(199,210,254,0.24),rgba(199,210,254,0) 72%),linear-gradient(180deg,#F4F7FF 0%,#FFFFFF 50%,#F4F6FF 100%);color:var(--text);text-align:center;padding:96px 0;position:relative;overflow:hidden;border-top:1px solid var(--border)}
.cta-section .in{position:relative;z-index:2}
.cta-section h2{font-size:clamp(2rem,4.2vw,3rem);font-weight:800;letter-spacing:-.8px;margin-bottom:14px}
.cta-section h2 .hl{background:linear-gradient(115deg,#5b86ff,#1d4ed8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cta-section p{font-size:17px;color:var(--text-2);margin:0 auto 30px;max-width:520px}
.cta-section .btn{font-size:16px;height:52px;padding:0 30px}
.cta-secondary{display:inline-flex;align-items:center;margin-left:10px;color:rgba(255,255,255,0.75);font-size:15px;font-weight:600;padding:14px 20px;transition:all .3s}
.cta-secondary:hover{color:#fff;transform:translateX(5px)}

.site-footer{background:var(--ink);color:rgba(255,255,255,0.55);padding:56px 0 30px;position:relative;z-index:1;border-top:1px solid rgba(255,255,255,0.06)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
.footer-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;color:#fff;margin-bottom:14px}
.footer-brand .mark{color:var(--cyan)}
.footer-about{font-size:13px;line-height:1.7;max-width:280px}
.footer-col h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#fff;margin-bottom:14px}
.footer-col a{font-size:13px;line-height:2;display:block;transition:all .2s}
.footer-col a:hover{color:var(--cyan-bright);transform:translateX(3px)}
.footer-bot{border-top:1px solid rgba(255,255,255,0.07);padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13px}
.footer-soc{display:flex;gap:14px}
.footer-soc a{opacity:.5;transition:all .3s}
.footer-soc a:hover{opacity:1;color:var(--cyan);transform:translateY(-3px)}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}

/* overflow:hidden clips the off-canvas panel (translateX(100%) parks it past
   the right edge, which otherwise inflates the mobile layout viewport to
   532px and re-anchors every right-positioned fixed element — a layout
   shift on load). The panel slides in from under the clip, so nothing
   visible changes. */
.mdrawer{position:fixed;inset:0;z-index:100;background:rgba(8,11,20,0.4);opacity:0;pointer-events:none;transition:opacity .3s;overflow:hidden}
.mdrawer.open{opacity:1;pointer-events:all}
.mdrawer-inner{position:absolute;right:0;top:0;bottom:0;width:300px;background:var(--bg);padding:22px;transform:translateX(100%);transition:transform .4s var(--ease-out);display:flex;flex-direction:column;gap:14px}
.mdrawer.open .mdrawer-inner{transform:translateX(0)}
.mdrawer-inner a{font-size:16px;font-weight:600;padding:8px 0;color:var(--text);transition:color .2s}
.mdrawer-inner a:hover{color:var(--cyan-deep)}
.mdrawer-close{align-self:flex-end;background:none;border:none;padding:4px;color:var(--text)}

.quick-section{background:var(--canvas)}
.quick-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:36px;align-items:center;max-width:980px;margin:0 auto}
.quick-steps{display:flex;flex-direction:column;gap:8px}
.qstep{display:flex;gap:16px;align-items:flex-start;padding:16px;border:1px solid transparent;border-radius:var(--r-md);transition:all .3s var(--ease-out)}
.qstep:hover{background:var(--bg);border-color:var(--border);box-shadow:var(--sh-sm)}
.qstep .qn{flex-shrink:0;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--cyan-ink);background:linear-gradient(180deg,var(--cyan-bright),var(--cyan))}
.qstep h3{font-size:15px;font-weight:700;margin-bottom:3px}
.qstep p{font-size:13.5px;color:var(--text-2);line-height:1.55}
.qstep code{font-family:var(--font-mono);font-size:12.5px;background:var(--ink);color:var(--cyan-bright);padding:1px 6px;border-radius:5px}
.qcmd{display:flex;align-items:center;gap:6px;margin-top:11px;font-family:var(--font-mono);font-size:12px;color:var(--cyan-deep);background:var(--cyan-tint);border:1px solid var(--cyan-line);border-radius:8px;padding:6px 6px 6px 10px}
.qcmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none;background:none;color:var(--cyan-deep);padding:0;border-radius:0}
.qcmd code::-webkit-scrollbar{display:none}
.qcmd-os{flex-shrink:0;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--cyan-ink);background:var(--cyan);border-radius:5px;padding:2px 7px}
.code-card{background:var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-xl),0 0 0 1px rgba(255,255,255,0.04);overflow:hidden}
.code-card .term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.06)}
.code-card .dot{width:11px;height:11px;border-radius:50%}
.code-card .r{background:#ff5f57}.code-card .y{background:#febc2e}.code-card .g{background:#28c840}
.code-card .title{margin-left:8px;font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
.code-card pre{margin:0;padding:18px 20px;font-family:var(--font-mono);font-size:12.5px;line-height:1.9;color:#cfd6e6;overflow-x:auto}
.code-card .pr{color:var(--cyan)}.code-card .ok{color:var(--cyan-bright)}.code-card .mut{color:#6b7690}.code-card .kw{color:#93b4ff}.code-card .str{color:#bcd0ff}
/* unify all feature / use-case icon tints to the single brand color */
.feature-icon,.uc-icon{background:var(--cyan-tint)!important;color:var(--cyan-deep)!important}
@media(max-width:820px){.quick-grid{grid-template-columns:1fr;gap:24px}}

.sdk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 16px;max-width:900px;margin:0 auto}
.sdk-card{padding:20px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);transition:all .35s var(--ease-spring);text-align:left;min-width:0}
.sdk-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--cyan-line)}
.sdk-card .sk{font-family:var(--font-mono);font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.sdk-card .sk::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--cyan)}
.sdk-card .cmd{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11.5px;color:var(--cyan-deep);background:var(--cyan-tint);border:1px solid var(--cyan-line);border-radius:6px;padding:4px 5px 4px 9px;margin-bottom:8px;min-width:0}
.sdk-card .cmd code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdk-card .cmd .cmd-copy{flex-shrink:0}
.sdk-card .cmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.sdk-card .cmd code::-webkit-scrollbar{display:none}
.cmd-copy{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;background:transparent;border:none;color:var(--cyan-deep);cursor:pointer;transition:background .18s,color .18s}
.cmd-copy:hover{background:#fff;color:var(--cyan-ink)}
.cmd-copy.copied{color:var(--green)}
.cmd-copy svg{width:14px;height:14px}
.sdk-card .sd{font-size:12px;color:var(--text-3);line-height:1.62}
@media(max-width:820px){.sdk-grid{grid-template-columns:1fr 1fr}}@media(max-width:540px){.sdk-grid{grid-template-columns:1fr}}

.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-cat{font-family:var(--font-mono);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);margin:16px 4px 0}
.faq-cat:first-child{margin-top:0}
.faq-item{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faq-item.open{border-color:var(--cyan-line);box-shadow:var(--sh-sm)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;background:none;border:none;text-align:left;font-size:15px;font-weight:600;color:var(--text)}
.faq-q .ic{flex-shrink:0;width:20px;height:20px;position:relative;transition:transform .3s var(--ease-out)}
.faq-q .ic::before,.faq-q .ic::after{content:'';position:absolute;background:var(--cyan-deep);border-radius:2px;top:50%;left:50%}
.faq-q .ic::before{width:12px;height:2px;transform:translate(-50%,-50%)}
.faq-q .ic::after{width:2px;height:12px;transform:translate(-50%,-50%);transition:transform .3s var(--ease-out)}
.faq-item.open .faq-q .ic::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-out)}
.faq-a p{padding:0 22px 20px;font-size:14px;color:var(--text-2);line-height:1.65}

.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);max-width:760px;margin:0 auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);box-shadow:var(--sh-sm);overflow:hidden}
.trust-strip .ts{padding:18px 14px;text-align:center;border-right:1px solid var(--border)}
.trust-strip .ts:last-child{border-right:none}
.trust-strip .tv{font-family:var(--font-mono);font-size:22px;font-weight:700;letter-spacing:-.5px;background:linear-gradient(120deg,var(--text),var(--cyan-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.trust-strip .tl{font-size:11.5px;line-height:1.45;color:var(--text-2);margin-top:6px}
@media(max-width:820px){.trust-strip{grid-template-columns:1fr 1fr}.trust-strip .ts:nth-child(2){border-right:none}.trust-strip .ts:nth-child(1),.trust-strip .ts:nth-child(2){border-bottom:1px solid var(--border)}}

.insp-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;max-width:1000px;margin:0 auto}
.insp-callouts{display:flex;flex-direction:column;gap:16px}
.insp-callout{display:flex;gap:14px;align-items:flex-start}
.insp-callout .ico{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:var(--cyan-tint);color:var(--cyan-deep);display:flex;align-items:center;justify-content:center}
.insp-callout h3{font-size:14.5px;font-weight:700;margin-bottom:3px}
.insp-callout p{font-size:13px;color:var(--text-2);line-height:1.55}
.insp-demo{background:var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-xl),0 0 0 1px rgba(255,255,255,0.04);overflow:hidden}
.insp-demo .term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.06)}
.insp-demo .dot{width:11px;height:11px;border-radius:50%}
.insp-demo .r{background:#ff5f57}.insp-demo .y{background:#febc2e}.insp-demo .g{background:#28c840}
.insp-demo .title{margin-left:8px;font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
.insp-rows{padding:10px 6px;font-family:var(--font-mono);font-size:12.5px}
.insp-rows .req{padding:7px 14px;border-radius:8px;transition:background .2s}
.insp-rows .req:hover{background:rgba(255,255,255,0.04)}
@media(max-width:820px){.insp-grid{grid-template-columns:1fr;gap:28px}}

/* ── how-it-works animated rows (ported from ngris-frontend) ── */
.hw-rows{display:flex;flex-direction:column;gap:64px;max-width:1060px;margin:0 auto}
#features .hw-rows{gap:92px}
.hw-row{--accent:var(--cyan);display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
/* diagram always occupies the WIDE column (7fr) on both sides → identical size every row */
@media(min-width:900px){.hw-row{grid-template-columns:5fr 7fr;gap:56px}.hw-row.rev{grid-template-columns:7fr 5fr}.hw-row.rev .hw-text-col{order:2}.hw-row.rev .hw-diagram-wrap,.hw-row.rev .oapi-col{order:1}}
.hw-text-col{display:flex;flex-direction:column;gap:14px}
.hw-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent)}
.hw-badge svg{width:14px;height:14px}
.hw-text-col h3{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;color:var(--text);line-height:1.18;letter-spacing:-.02em}
.hw-text-col p{color:var(--text-2);font-size:15px;line-height:1.62}
.hw-bullets{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:2px}
.hw-bullets li{display:flex;align-items:center;gap:10px;color:var(--text);font-size:13.5px;font-weight:500}
.hw-bullets li svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}
.hw-diagram-wrap{position:relative;width:100%;aspect-ratio:8/5;border-radius:18px;overflow:hidden}
.hw-diagram{position:absolute;inset:0;width:100%;height:100%;display:block}
.hw-diagram pattern circle{fill:rgba(8,11,20,0.06)}
.hw-cluster{fill:color-mix(in srgb,var(--accent) 7%,transparent);stroke:color-mix(in srgb,var(--accent) 45%,transparent);stroke-width:1;stroke-dasharray:4 6}
.hw-cluster-label{font-size:11px;font-weight:700;letter-spacing:.12em;fill:color-mix(in srgb,var(--accent) 55%,black);font-family:var(--font-mono)}
.hw-path-track{fill:none;stroke:rgba(8,11,20,0.10);stroke-width:1.5}
.hw-path-flow{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:8 14;opacity:.9;filter:drop-shadow(0 0 4px var(--accent));animation:hw-flow 1.4s linear infinite}
@keyframes hw-flow{from{stroke-dashoffset:22}to{stroke-dashoffset:0}}
.hw-packet{fill:var(--accent);filter:drop-shadow(0 0 6px var(--accent))}
.hw-nodes{position:absolute;inset:0;pointer-events:none}
.hw-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:5}
.hw-node-disc{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border);color:var(--cyan-deep);box-shadow:var(--sh-md)}
.hw-node-disc svg{width:22px;height:22px;color:var(--cyan-deep)}
.hw-node-disc--sm{width:42px;height:42px;border-radius:13px}.hw-node-disc--sm svg{width:18px;height:18px}
.hw-node-label{font-size:.76rem;color:var(--text-2);font-weight:600;white-space:nowrap;text-align:center}
.hw-node-label--sm{font-size:.68rem}
.hw-hub{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:8}
.hw-hub-core-wrap{position:relative;width:66px;height:66px;display:flex;align-items:center;justify-content:center}
.hw-hub-ring,.hw-hub-ring--mid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.hw-hub-ring{width:124px;height:124px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);animation:hw-hub-pulse 3s ease-out infinite}
.hw-hub-ring--mid{width:92px;height:92px;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);animation:hw-hub-rotate 16s linear infinite}
@keyframes hw-hub-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.85}70%{transform:translate(-50%,-50%) scale(1.1);opacity:.15}100%{transform:translate(-50%,-50%) scale(1.1);opacity:0}}
@keyframes hw-hub-rotate{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.hw-hub-core{position:relative;z-index:2;width:80px;height:80px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--cyan-bright),var(--cyan-deep));color:#fff;box-shadow:var(--sh-cyan);animation:oapiCore 3.4s ease-in-out infinite}
.hw-hub-core::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px solid var(--cyan-line);opacity:.55}
.hw-hub-core::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--cyan);opacity:0;animation:oapiSonar 3s cubic-bezier(.2,.55,.3,1) infinite}
.hw-hub-mark{font-weight:800;font-size:28px;line-height:1;letter-spacing:-1.5px}
.hw-hub-tag{font-size:10px;font-weight:600;opacity:.9;margin-top:2px;letter-spacing:.2px}
.hw-hub-core svg{width:26px;height:26px;filter:drop-shadow(0 0 4px rgba(0,0,0,0.4))}
.hw-hub-label{font-size:.74rem;font-weight:800;letter-spacing:.04em;color:var(--text);background:#fff;padding:3px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border));box-shadow:var(--sh-sm)}
.hw-hub-chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;max-width:200px}
.hw-chip{font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.hw-chip svg{width:10px;height:10px}
.hw-chat{width:100%;display:flex;align-items:center}
.irx{width:100%;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 20px 48px -16px rgba(8,11,20,.15);overflow:hidden;text-align:left}
.irx-head{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid var(--border)}
.irx-mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--cyan-bright),var(--cyan-deep));color:#fff;font-weight:800;font-size:15px;letter-spacing:-1px;display:flex;align-items:center;justify-content:center}
.irx-name{font-weight:700;font-size:14px;color:var(--text)}
.irx-status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--cyan-deep)}
.irx-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:irxPulse 1.4s ease-in-out infinite}
.irx-body{padding:15px;display:flex;flex-direction:column;gap:11px;background:#f7f9fc}
.irx-row{display:flex}
.irx-row--user{justify-content:flex-end}
.irx-bubble{max-width:84%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5}
.irx-bubble--user{background:linear-gradient(135deg,var(--cyan),var(--cyan-deep));color:#fff;border-bottom-right-radius:5px}
.irx-bubble--user code{background:rgba(255,255,255,.22);padding:1px 5px;border-radius:5px;font-family:var(--font-mono);font-size:12px}
.irx-bubble--ai{background:#fff;border:1px solid var(--border);color:var(--text);border-bottom-left-radius:5px}
.irx-rules{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.irx-rule{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--cyan-deep);background:var(--cyan-tint);border:1px solid var(--cyan-line);border-radius:8px;padding:5px 9px}
.irx-rule svg{width:14px;height:14px;flex-shrink:0}
.irx-confirm{border:1px solid var(--cyan-line);background:color-mix(in srgb,var(--cyan) 6%,#fff);border-radius:12px;padding:12px 13px}
.irx-confirm-head{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:6px}
.irx-confirm-head svg{width:15px;height:15px;color:var(--amber);flex-shrink:0}
.irx-confirm-body{font-size:12.5px;color:var(--text-2);line-height:1.5;margin-bottom:11px}
.irx-confirm-body b{color:var(--text)}
.irx-confirm-actions{display:flex;gap:8px}
.irx-btn{font:600 12.5px/1 var(--font-sans);padding:9px 14px;border-radius:8px;border:1px solid transparent}
.irx-btn--approve{background:linear-gradient(135deg,var(--cyan-bright),var(--cyan-deep));color:#fff;animation:irxApprove 2.2s ease-in-out infinite}
.irx-btn--cancel{background:#fff;border-color:var(--border);color:var(--text-2)}
@keyframes irxApprove{0%,100%{box-shadow:0 0 0 0 rgba(37,103,255,.4)}50%{box-shadow:0 0 0 7px rgba(37,103,255,0)}}
@keyframes irxPulse{0%,100%{opacity:1}50%{opacity:.25}}
.hw-dash{width:100%;display:flex;align-items:center}
.dash{width:100%;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 20px 48px -16px rgba(8,11,20,.15);overflow:hidden;text-align:left}
.dash-head{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--border);font-weight:700;font-size:13.5px;color:var(--text)}
.dash-head>svg{width:16px;height:16px;color:var(--cyan-deep);flex-shrink:0}
.dash-meta{margin-left:auto;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-3)}
.pol-row{display:flex;align-items:center;gap:11px;padding:9px 15px;border-bottom:1px solid var(--border)}
.pol-row:last-child{border-bottom:none}
.pol-badge{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.03em;padding:3px 0;border-radius:5px;flex-shrink:0;width:46px;text-align:center}
.pol-badge.waf{color:#d0163e;background:#fdecef}
.pol-badge.rate{color:#b45309;background:#fef2e2}
.pol-badge.geo{color:var(--cyan-deep);background:var(--cyan-tint)}
.pol-badge.auth{color:#6d28d9;background:#f2ecfd}
.pol-badge.route{color:#0a7a53;background:#e6f6ef}
.pol-badge.ip{color:var(--text-2);background:#eef1f6}
.pol-desc{font-size:13px;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pol-toggle{width:32px;height:18px;border-radius:20px;background:var(--cyan);position:relative;flex-shrink:0}
.pol-toggle::after{content:"";position:absolute;top:2px;left:16px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.pol-toggle.off{background:#cbd3df}
.pol-toggle.off::after{left:2px}
.dash-foot{display:flex;align-items:center;gap:10px;padding:11px 15px;border-top:1px solid var(--border)}
.dash-add{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--cyan-deep)}
.dash-add svg{width:14px;height:14px}
.dash-hint{margin-left:auto;font-size:11px;color:var(--text-3)}
/* ── Dashboard showcase (tabbed) ── */
.dashx{max-width:780px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-xl);overflow:hidden}
.dashx-chrome{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--border);background:#f7f9fc}
.dashx-chrome .dot{width:11px;height:11px;border-radius:50%}
.dashx-chrome .dot.r{background:#ff5f57}.dashx-chrome .dot.y{background:#febc2e}.dashx-chrome .dot.g{background:#28c840}
.dashx-url{margin-left:9px;font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
.dashx-tabs{display:flex;gap:2px;padding:6px 10px 0;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.dashx-tabs::-webkit-scrollbar{display:none}
.dashx-tab{display:inline-flex;align-items:center;gap:6px;padding:10px 13px;font-size:13px;font-weight:600;color:var(--text-2);border:none;background:none;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.dashx-tab svg{width:15px;height:15px}
.dashx-tab:hover{color:var(--text)}
.dashx-tab.active{color:var(--cyan-deep);border-bottom-color:var(--cyan)}
.dashx-panel{display:none}
.dashx-panel.active{display:block;animation:dashxFade .35s var(--ease-out)}
@keyframes dashxFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.dashx-phead{display:flex;align-items:center;padding:13px 16px;font-weight:700;font-size:13.5px;color:var(--text);border-bottom:1px solid var(--border)}
.dashx-phead .dash-meta{margin-left:auto}
.insx-row{display:grid;grid-template-columns:52px 1fr auto auto auto;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border)}
.insx-row:last-child{border-bottom:none}
.insx-m{font-family:var(--font-mono);font-size:10px;font-weight:700;text-align:center;padding:3px 0;border-radius:5px}
.insx-m.get{color:#0a7a53;background:#e6f6ef}.insx-m.post{color:var(--cyan-deep);background:var(--cyan-tint)}.insx-m.del{color:#d0163e;background:#fdecef}
.insx-path{font-family:var(--font-mono);font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insx-st{font-family:var(--font-mono);font-size:12px;font-weight:700}
.insx-st.ok{color:#0a7a53}.insx-st.err{color:#d0163e}
.insx-lat{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);min-width:42px;text-align:right}
.insx-replay{font-size:11px;font-weight:600;color:var(--cyan-deep);background:var(--cyan-tint);border:1px solid var(--cyan-line);border-radius:6px;padding:3px 9px}
.alrt-row{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px}
.alrt-row:last-child{border-bottom:none}
.alrt-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.alrt-dot.crit{background:#f43f5e;box-shadow:0 0 0 3px rgba(244,63,94,.16)}.alrt-dot.warn{background:#f59e0b}.alrt-dot.ok{background:#22c55e}
.alrt-name{flex:1;color:var(--text);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alrt-val{font-family:var(--font-mono);font-size:11.5px;color:var(--text-2)}
.sec-chk{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text)}
.sec-chk:last-child{border-bottom:none}
.sec-chk>svg{width:17px;height:17px;flex-shrink:0}
.sec-chk .ck-ok{color:#0a7a53}.sec-chk .ck-warn{color:#b45309}
.sec-chk .txt{flex:1;min-width:0}
.sec-chk .tag-warn{margin-left:auto;font-size:10.5px;font-weight:700;color:#b45309;background:#fef2e2;padding:3px 8px;border-radius:20px}
.mem-row{display:flex;align-items:center;gap:11px;padding:10px 16px;border-bottom:1px solid var(--border)}
.mem-row:last-child{border-bottom:none}
.mem-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--cyan-bright),var(--cyan-deep));color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mem-name{display:flex;flex-direction:column;font-size:13px;font-weight:600;color:var(--text);min-width:0}
.mem-email{font-size:11px;font-weight:400;color:var(--text-3)}
.mem-role{margin-left:auto;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.mem-role.owner{color:var(--cyan-deep);background:var(--cyan-tint)}.mem-role.admin{color:#6d28d9;background:#f2ecfd}.mem-role.member{color:var(--text-2);background:#eef1f6}
.sso-row{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--border);font-size:13.5px;font-weight:600;color:var(--text)}
.sso-row:last-child{border-bottom:none}
.sso-badge{margin-left:auto;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;color:var(--text-2);background:#eef1f6}
.sso-badge.conn{color:#0a7a53;background:#e6f6ef}
@media(max-width:560px){.insx-row{grid-template-columns:48px 1fr auto auto;gap:9px}.insx-replay{display:none}.dashx-tab{padding:10px 10px;font-size:12px}}
@media(max-width:640px){.hw-node-disc{width:42px;height:42px}.hw-node-disc svg{width:18px;height:18px}.hw-node-disc--sm{width:34px;height:34px}.hw-node-label{font-size:.66rem}.hw-node-label--sm{font-size:.6rem}.hw-hub-core{width:64px;height:64px}.hw-hub-mark{font-size:23px}}

/* ── ask-AI row ── */
.askai{background:var(--ink);color:rgba(255,255,255,0.85);border-top:1px solid rgba(255,255,255,0.08);position:relative;z-index:1;padding:0}
.askai-inner{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:26px 24px;max-width:1160px;margin:0 auto}
@media(min-width:768px){.askai-inner{flex-direction:row;align-items:center;justify-content:space-between;padding:20px 24px}}
.askai-label{font-family:var(--font-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,0.55)}
.askai-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none}
.askai-btn{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:999px;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.85);transition:background .2s,color .2s,transform .2s}
.askai-btn:hover{background:rgba(255,255,255,0.15);color:#fff;transform:translateY(-2px)}
.askai-btn svg{width:18px;height:18px}

/* ── nav dropdowns / mega-menu ── */
.header-nav{gap:22px}
.nav-item{position:relative;display:flex;align-items:center}
.nav-dd-btn{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:500;color:var(--text-2);background:none;border:none;padding:6px 0;transition:color .2s}
.nav-dd-btn svg{width:13px;height:13px;transition:transform .25s}
.nav-item:hover .nav-dd-btn,.nav-item:focus-within .nav-dd-btn{color:var(--text)}
.nav-item:hover .nav-dd-btn svg,.nav-item:focus-within .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-panel{position:absolute;top:100%;left:0;margin-top:12px;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;background:var(--bg);border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-xl);padding:12px;transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility .22s;z-index:70}
.nav-dd-panel::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-item:hover .nav-dd-panel,.nav-item:focus-within .nav-dd-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.nav-mega{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:2px 14px;width:610px}
.mega-col{display:flex;flex-direction:column;gap:1px;padding:4px}
.mega-col.ai{background:linear-gradient(180deg,var(--cyan-tint),transparent);border-radius:12px}
.mega-h{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);padding:8px 10px 5px}
.mega-link{display:flex;gap:11px;align-items:flex-start;padding:9px 10px;border-radius:10px;transition:background .18s}
.mega-link:hover{background:var(--cyan-tint)}
.mega-link .mi{flex-shrink:0;width:32px;height:32px;border-radius:8px;background:var(--cyan-tint);color:var(--cyan-deep);display:flex;align-items:center;justify-content:center}
.mega-link:hover .mi{background:#fff}
.mega-link .mi svg{width:16px;height:16px}
.mega-link>span:last-child{display:flex;flex-direction:column;min-width:0}
.mega-link .mt{font-size:13px;font-weight:600;color:var(--text);line-height:1.2}
.mega-link .md{font-size:11px;color:var(--text-3);line-height:1.35;margin-top:2px}
.nav-list{display:flex;flex-direction:column;gap:1px;min-width:236px}
.nav-list a{display:flex;gap:11px;align-items:center;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--text-2);transition:background .18s,color .18s}
.nav-list a:hover{background:var(--cyan-tint);color:var(--text)}
.nav-list a svg{width:15px;height:15px;color:var(--cyan-deep);flex-shrink:0}
.nav-list a .nd{font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:var(--cyan-deep);background:var(--cyan-tint);border:1px solid var(--cyan-line);border-radius:5px;padding:2px 6px;margin-left:auto;text-transform:uppercase}
@media(max-width:1040px){.nav-mega{grid-template-columns:1fr 1fr;width:440px}}

/* ── mobile drawer groups ── */
.mdrawer-grp{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-top:10px;padding-bottom:2px}
.mdrawer-inner a.sub{font-size:14px;font-weight:500;color:var(--text-2);padding:6px 0 6px 12px}

/* ── footer v2 ── */
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,0.08)}
.footer-lead{max-width:340px}
.footer-status{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,0.72);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:999px;padding:6px 13px;margin-top:14px}
.footer-status .sd{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(37,103,255,0.2);animation:blink 2.4s ease-in-out infinite}
.footer-cols{display:grid;grid-template-columns:repeat(7,1fr);gap:22px;margin-bottom:36px}
@media(max-width:1000px){.footer-cols{grid-template-columns:repeat(4,1fr);gap:26px}}
@media(max-width:900px){.footer-cols{grid-template-columns:repeat(3,1fr);gap:26px}}
@media(max-width:540px){.footer-cols{grid-template-columns:1fr 1fr}}
.learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.learn-card{display:block;padding:24px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-sm);transition:all .35s var(--ease-spring)}
.learn-card:hover{border-color:var(--cyan-line);box-shadow:var(--sh-md);transform:translateY(-3px)}
.learn-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.learn-card h3{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:8px}
.learn-card p{font-size:14px;line-height:1.55;color:var(--text-2)}
.learn-card code{font-family:var(--font-mono);font-size:.9em;background:var(--cyan-tint);color:var(--cyan-deep);padding:1px 5px;border-radius:5px}
@media(max-width:900px){.learn-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.learn-grid{grid-template-columns:1fr}}
.footer-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.footer-badge{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:6px;padding:4px 9px}

/* Sticky footer: on short pages (search, 404, contact) the footer is the last
   in-flow child of <main class="nx-main">; margin-top:auto pins it to the
   viewport bottom so the white body never shows below the dark footer. */
.nx-main{display:flex;flex-direction:column;min-height:100vh}
.nx-main > .askai{margin-top:auto}

/* ── shared light-page components (used by /pricing, /compare, /ai-features) ── */
.page-hero{text-align:center;max-width:760px;margin:0 auto 8px}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.2rem);font-weight:800;letter-spacing:-1px;line-height:1.08;margin-bottom:14px}
.page-hero h1 .hl{background:linear-gradient(115deg,#5b86ff 0%,#2567ff 50%,#1d4ed8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.page-hero p{font-size:17px;color:var(--text-2);line-height:1.6;max-width:600px;margin:0 auto}

.section-h{text-align:center;margin:0 auto 32px;max-width:680px}
.section-h h2{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;letter-spacing:-.5px;margin-bottom:8px}
.section-h p{font-size:15px;color:var(--text-2)}

.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin:26px auto 0;font-size:13.5px;color:var(--text-2)}
.trust-row .ti{display:inline-flex;align-items:center;gap:7px}
.trust-row .ti svg,.trust-row .ti i{width:16px;height:16px;color:var(--cyan-deep)}

.cmp-wrap{max-width:1000px;margin:0 auto}
.cmp-group{margin-bottom:34px}
.cmp-group > h3{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;color:var(--text);margin-bottom:14px}
.cmp-group > h3 svg,.cmp-group > h3 i{width:18px;height:18px;color:var(--cyan-deep)}
.cmp{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);box-shadow:var(--sh-sm);overflow:hidden;overflow-x:auto}
.cmp table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.cmp thead th{padding:14px 16px;font-weight:700;background:var(--cyan-tint);border-bottom:1px solid var(--border);white-space:nowrap}
.cmp thead th:first-child{text-align:left;color:var(--text)}
.cmp thead th:not(:first-child){text-align:center;color:var(--text-2)}
.cmp thead th.feat{color:var(--cyan-deep)}
.cmp tbody td{padding:12px 16px;border-bottom:1px solid var(--border)}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp tbody tr:hover{background:var(--cyan-tint)}
.cmp tr.grp td{padding:9px 16px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);background:var(--canvas)}
.cmp td.row-lbl{text-align:left;color:var(--text-2);font-weight:500}
.cmp td.cell{text-align:center;color:var(--text)}
.cmp td.cell.green{color:var(--cyan-deep);font-weight:700}
.cmp td.cell.sky{color:var(--cyan-deep);font-weight:600}
.cmp td.cell.no{color:var(--rose)}
.cmp td.cell.muted{color:var(--text-3)}
.cmp .ic-yes{width:17px;height:17px;color:var(--cyan-deep);display:inline-block;vertical-align:middle}
.cmp .ic-no{width:16px;height:16px;color:var(--text-3);display:inline-block;vertical-align:middle}
.cmp .gt{background:linear-gradient(120deg,var(--text),var(--cyan-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.cmp-note{text-align:center;margin-top:16px;font-size:13.5px;color:var(--text-2)}
.cmp-note b{color:var(--cyan-deep)}

/* ── LIGHT terminal / code blocks (override the original dark styling) ──
   The hero terminal, quickstart code card, and request-inspector panel used a
   near-black (--ink) surface. Recolor them to a soft light surface with dark
   text + brand/semantic accents so they match the light theme. */
.term,.code-card,.insp-demo{background:#f8fafc;border:1px solid var(--border);box-shadow:var(--sh-lg)}
.term-bar,.code-card .term-bar,.insp-demo .term-bar{background:#eef2f7;border-bottom:1px solid var(--border)}
.term-body{color:var(--text)}
.term-body .cmd{color:var(--text)}
.term-body .cmd .pr,.code-card .pr{color:var(--cyan-deep)}
.term-body .ok,.code-card .ok{color:#0a7a53}
.term-body .mut,.code-card .mut{color:var(--text-3)}
.term-feed{border-top:1px solid var(--border)}
.code-card pre{color:var(--text)}
.code-card .kw{color:#7c3aed}
.code-card .str{color:#0f766e}
.qstep code{background:#eef2f8;color:var(--cyan-deep)}
.req .m.get{color:var(--cyan-deep)}.req .m.post{color:#0a7a53}.req .m.patch{color:#a34a08}.req .m.del{color:#d0163e}
.req .path{color:var(--text)}
.req .st{color:#0a7a53}.req .st.warn{color:#a34a08}.req .st.block{color:#d0163e}
.req .lat{color:var(--text-3)}
.insp-rows .req:hover{background:var(--cyan-tint)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.req{opacity:1;transform:none}.hw-path-flow,.hw-hub-ring,.hw-hub-ring--mid{animation:none!important}.hw-packet{display:none}}

/* Wrapper for server-inlined lucide svgs that used to carry utility classes on
   the icon element itself: the svg fills the sized wrapper exactly as before. */
span.lucide-wrap{display:inline-flex}
span.lucide-wrap>svg.lucide{width:100%;height:100%}

/* Below-the-fold sections skip initial layout/paint until scrolled near
   (content-visibility:auto): ~1100 of the page's ~1450 nodes sit below the
   hero, and styling them during load is the page's single long task on
   throttled mobile. contain-intrinsic-size 'auto' remembers the real size
   after first render so scroll position and anchors stay stable. */
#how,#features,#usecases,#inspector,#compare,#pricing,#security,#faq,
.quick-section,.cta-section,.askai,.site-footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}
/* Closer per-section estimates so cold-load anchor scrolls (/#pricing, /#faq)
   land near the target; 'auto' snaps to the real size after first render. */
.quick-section{contain-intrinsic-size:auto 1250px}
.cta-section{contain-intrinsic-size:auto 460px}
.askai{contain-intrinsic-size:auto 140px}
.site-footer{contain-intrinsic-size:auto 620px}

/* ── ngris-support additions on top of the verbatim ngris.com light home.css ── */
.askai-nav-btn svg{width:16px;height:16px;flex-shrink:0}
@media(max-width:860px){.header-nav,.header-actions .btn-ghost,.askai-nav-btn{display:none}.mobile-toggle{display:block}}