/* ============================================================
   1muse — credential broker for Meta Muse connectors

   Conventions follow a modern dark product site:
   · 1152px container, full-bleed sections divided by a hairline
   · centred hero and centred section headers
   · translucent cards separated by GAPS, never by shared borders
   · white-alpha text ramp for a soft, premium feel
   · one indigo accent, sampled from the mark; status colour is semantic
   ============================================================ */
:root{
  --bg:         #08080e;
  --bg-2:       #0b0b13;

  --line:       rgba(255,255,255,.10);
  --line-2:     rgba(255,255,255,.06);
  --line-3:     rgba(255,255,255,.18);

  --card:       rgba(255,255,255,.035);
  --card-2:     rgba(255,255,255,.055);

  /* text ramp — alpha over the dark surface rather than flat greys */
  --t1:         #ffffff;
  --t2:         rgba(255,255,255,.68);
  --t3:         rgba(255,255,255,.48);
  --t4:         rgba(255,255,255,.34);

  /* accent, sampled from the mark */
  --accent:     #5b52ff;
  --accent-hi:  #837dff;
  --accent-dim: rgba(91,82,255,.16);

  /* semantic status */
  --ok:         #46d6a1;
  --hold:       #f2b45c;
  --deny:       #ff6b78;

  --maxw:       1152px;
  --gut:        28px;   /* container gutter — rails align to this, not the box edge */
  --r:          16px;
  --r-sm:       10px;
  --r-pill:     999px;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--t1);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }

/* atmospheric wash behind the hero, in the accent hue */
.glow{
  position:absolute; inset:-240px 0 auto 0; height:900px; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 42% at 50% 34%, rgba(91,82,255,.30), transparent 68%),
    radial-gradient(34% 34% at 22% 22%, rgba(120,110,255,.16), transparent 70%),
    radial-gradient(38% 36% at 80% 26%, rgba(64,52,220,.16), transparent 72%);
  filter:blur(18px);
}

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.sec{ position:relative; border-top:1px solid var(--line-2); padding-block:clamp(64px,8vw,112px); }
.sec--flush{ border-top:0; }

/* ---------- type ---------- */
h1,h2,h3,h4{ margin:0; font-weight:500; letter-spacing:-.025em; line-height:1.08; }
.h1{ font-size:clamp(38px,5.4vw,64px); line-height:1.04; letter-spacing:-.028em; }
.h2{ font-size:clamp(27px,3.3vw,38px); }
.h3{ font-size:18px; font-weight:500; letter-spacing:-.015em; }
.lede{ color:var(--t2); font-size:18px; line-height:1.62; margin:18px 0 0; }
.small{ font-size:14px; color:var(--t3); }

.eyebrow{
  display:inline-flex; align-items:center;
  font-size:13px; color:var(--t3); letter-spacing:.01em;
}

/* centred section header */
.shead{ text-align:center; max-width:640px; margin:0 auto clamp(40px,5vw,64px); }
.shead .lede{ margin-inline:auto; }

/* ---------- buttons ----------
   Both variants borrow from the mark: the solid one is lit from the top edge
   like the glossy shell, the outline one carries a gradient hairline that
   fades from indigo through white the way the shell rim does. The trailing
   arrow sits in its own round well so it reads as a control, not a glyph. */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 22px; border-radius:var(--r-pill); border:1px solid transparent;
  font-size:14.5px; font-weight:500; letter-spacing:-.005em; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease,
             transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

/* solid: vertical gradient + inner top highlight + accent-tinted cast shadow */
.btn--primary{
  color:#fff;
  background:linear-gradient(180deg,#6f67ff 0%,#5b52ff 52%,#4a40f0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 8px 22px -10px rgba(91,82,255,.95);
}
.btn--primary:hover{
  background:linear-gradient(180deg,#8079ff 0%,#6c64ff 52%,#5b52ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    0 12px 28px -10px rgba(91,82,255,1);
}

/* outline: frosted fill via padding-box, gradient rim via border-box */
.btn--ghost{
  color:var(--t1);
  background:
    linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.03)) padding-box,
    linear-gradient(135deg, rgba(147,139,255,.55), rgba(255,255,255,.12) 46%, rgba(147,139,255,.38)) border-box;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{
  background:
    linear-gradient(rgba(255,255,255,.11),rgba(255,255,255,.06)) padding-box,
    linear-gradient(135deg, rgba(168,161,255,.95), rgba(255,255,255,.22) 46%, rgba(168,161,255,.65)) border-box;
  box-shadow:0 8px 22px -12px rgba(91,82,255,.8);
}

.btn--sm{ padding:8px 17px; font-size:13.5px; }

.btn__x{
  display:inline-grid; place-items:center; flex:none;
  width:22px; height:22px; border-radius:50%; font-size:12px; line-height:1;
  margin-right:-8px;   /* pulls the well toward the pill edge, no :has() needed */
  background:rgba(255,255,255,.18);
  transition:background .18s ease, transform .18s ease;
}
.btn--social{ gap:8px; margin-left:6px; }
.btn--social .ico{ width:14px; height:14px; fill:currentColor; flex:none; }

.btn--ghost .btn__x{ background:rgba(147,139,255,.22); }
.btn:hover .btn__x{ background:rgba(255,255,255,.32); transform:translateX(3px); }
.btn--ghost:hover .btn__x{ background:rgba(168,161,255,.4); }

/* ---------- nav ---------- */
/* Translucent by default so the hero glow reads through the bar, then
   deepens slightly and gains a hairline once scrolled. `.stuck` from main.js. */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(8,8,14,.55);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease;
}
.nav.stuck{
  background:rgba(8,8,14,.74);
  border-bottom-color:var(--line-2);
}
.nav__in{ display:flex; align-items:center; height:62px; }
.brand{ display:flex; align-items:center; gap:10px; font-size:16.5px; font-weight:600; letter-spacing:-.02em; }
.brand img{ width:25px; height:25px; }
.nav__links{ display:flex; align-items:center; gap:2px; margin-left:34px; }
.nav__links a{ padding:8px 14px; border-radius:var(--r-sm); font-size:14.5px; color:var(--t2); transition:color .15s, background .15s; }
.nav__links a:hover{ color:var(--t1); background:rgba(255,255,255,.06); }
.nav__end{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.nav__end > a:not(.btn){ padding:8px 14px; font-size:14.5px; color:var(--t2); border-radius:var(--r-sm); transition:color .15s, background .15s; }
.nav__end > a:not(.btn):hover{ color:var(--t1); background:rgba(255,255,255,.06); }
.burger{ display:none; margin-left:auto; border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 11px; cursor:pointer; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(30px,3.6vw,50px) clamp(20px,2.2vw,32px); text-align:center; }
.hero .wrap{ position:relative; z-index:2; }
.hero h1{ max-width:18ch; margin-inline:auto; }
.hero h1 .q{ color:var(--t3); }
.hero .lede{ max-width:576px; margin:18px auto 0; }
.hero__act{ display:flex; justify-content:center; flex-wrap:wrap; gap:11px; margin-top:26px; }
.hero__meta{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px; margin-top:16px; }

.cmd{
  display:inline-flex; align-items:stretch; cursor:pointer; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(255,255,255,.035);
  font-family:var(--mono); font-size:13px;
}
.cmd span{ display:flex; align-items:center; padding:10px 14px; }
.cmd .p{ color:var(--t4); padding-right:2px; }
.cmd .t{ color:var(--t2); }
.cmd .c{ border-left:1px solid var(--line); color:var(--t4); font-size:11px; letter-spacing:.08em; transition:background .15s, color .15s; }
.cmd:hover .c{ background:var(--accent); color:#fff; }

/* ---------- live scanner (hero) ---------- */
.scan{
  max-width:672px; margin:26px auto 0; text-align:left; padding:14px;
  border:1px solid var(--line); border-radius:var(--r);
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 26px 64px -28px rgba(0,0,0,.9);
}
.scan__top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.scan__cap{
  margin:0; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--t3);
}
.scan__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.pchip{
  border:1px solid var(--line); background:rgba(255,255,255,.05); border-radius:var(--r-pill);
  padding:5px 12px; font-size:12px; color:var(--t2); cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.pchip:hover{ background:rgba(255,255,255,.13); color:var(--t1); }
.pchip.on{ border-color:rgba(147,139,255,.6); background:rgba(91,82,255,.2); color:#fff; }
.scan textarea{
  display:block; width:100%; resize:vertical; min-height:88px;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:rgba(0,0,0,.45);
  padding:13px; font-family:var(--mono); font-size:13px; line-height:1.65;
  color:rgba(255,255,255,.9); outline:none; transition:border-color .15s;
}
.scan textarea:focus{ border-color:rgba(255,255,255,.3); }
.scan textarea::placeholder{ color:rgba(255,255,255,.3); }
.scan__act{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:12px; }
.scan__hint{ font-size:12px; color:var(--t4); }

.res{ margin-top:15px; padding-top:15px; border-top:1px solid var(--line-2); animation:fade .22s ease; }
.res__head{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.res__v{ font-size:12.5px; font-weight:500; padding:5px 13px; border-radius:var(--r-pill); border:1px solid currentColor; }
.res__v.clean{ color:var(--ok); background:rgba(70,214,161,.09); }
.res__v.warn { color:var(--hold); background:rgba(242,180,92,.09); }
.res__v.bad  { color:var(--deny); background:rgba(255,107,120,.09); }
.res__score{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--t4); }
.bar{ height:4px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:12px; }
.bar i{ display:block; height:100%; border-radius:2px; transition:width .45s ease; }
.finds{ margin-top:12px; }
.find{ display:flex; gap:11px; padding:9px 0; border-bottom:1px dashed var(--line-2); }
.find:last-child{ border-bottom:0; }
.find__s{ width:6px; height:6px; border-radius:50%; flex:none; margin-top:8px; }
.find__t{ font-size:13.5px; font-weight:500; }
.find__d{ font-size:12.5px; color:var(--t3); line-height:1.5; margin-top:2px; }
.res__act{ margin-top:14px; padding-left:13px; border-left:2px solid var(--accent); font-size:13.5px; color:var(--t2); line-height:1.6; }

/* ---------- ticker ---------- */
.ticker{ border-block:1px solid var(--line-2); padding-block:17px; }
/* the rules stay full-bleed; the moving track is clipped to the container so it
   never runs past the frame rails into the side margins */
.ticker__clip{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
}
.ticker__track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.ticker span{
  display:inline-flex; align-items:center; gap:38px; padding-right:38px; white-space:nowrap;
  font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--t3);
}
.ticker span::after{ content:"\2726"; color:var(--accent); font-size:11px; }

/* ---------- brokering-for strip ---------- */
.brokers{ border-bottom:1px solid var(--line-2); }
.brokers__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 22px; padding-block:20px; }
.brokers__lab{ font-size:12.5px; color:var(--t4); }
.brokers__i{ font-size:14.5px; font-weight:500; color:var(--t2); letter-spacing:-.01em; }

/* ---------- card ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:26px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .18s ease, background .18s ease;
}
.card:hover{ border-color:var(--line-3); background:var(--card-2); }
.card__t{ font-size:18.5px; font-weight:500; letter-spacing:-.018em; }
.card__s{ font-size:14.5px; color:var(--t3); margin-top:7px; line-height:1.55; }

.card[id]{ scroll-margin-top:86px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }

/* bullet list inside cards */
.blist{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.blist li{ display:flex; gap:11px; font-size:14.5px; color:var(--t2); line-height:1.55; }
.blist li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; margin-top:8px; }
.blist--plain li::before{ background:var(--t4); }

/* ---------- problem / solution ---------- */
.pcard{ display:flex; flex-direction:column; gap:20px; }
.pcard__h{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:500; color:var(--t2); }
.pcard__h .sq{ width:8px; height:8px; border-radius:2px; }
.sq--bad{ background:var(--deny); }
.sq--good{ background:var(--accent); }

.term{ border:1px solid var(--line-2); border-radius:var(--r-sm); background:rgba(0,0,0,.34); overflow:hidden; margin-top:auto; }
.term__h{
  display:flex; align-items:center; gap:10px; padding:11px 15px; border-bottom:1px solid var(--line-2);
  font-size:12.5px; color:var(--t4);
}
.term__h .tag{ margin-left:auto; padding:3px 9px; border-radius:var(--r-pill); font-size:11px; border:1px solid currentColor; }
.tag--bad{ color:var(--deny); }
.tag--good{ color:var(--ok); }
.term__b{ padding:15px; display:flex; flex-direction:column; gap:12px; }
.msg{ font-size:14px; line-height:1.55; }
.msg b{ display:block; font-size:11.5px; color:var(--t4); font-weight:400; margin-bottom:4px; }
.msg--u{ color:var(--t1); }
.msg--a{ color:var(--t2); }
.leak{ font-family:var(--mono); font-size:13px; color:var(--deny); }
.aside{ font-size:12.5px; color:var(--t4); line-height:1.6; }

pre.code{
  font-family:var(--mono); font-size:12.5px; line-height:1.8; color:var(--t2);
  white-space:pre; overflow-x:auto; padding:15px; margin:0; max-width:100%;
}
.code .c{ color:var(--t4); }
.code .k{ color:var(--accent-hi); }
.code .s{ color:#9ec5ff; }
.code .f{ color:var(--t1); }
.code .g{ color:var(--ok); }
/* grid/flex children default to min-width:auto, which lets a wide <pre>
   stretch its track past the container; pin them so the code scrolls instead */
.pcard,.card,.insp__l,.insp__r,.grid-2>*,.grid-3>*,.grid-4>*{ min-width:0; }

/* ---------- decision log ---------- */
.insp{ border:1px solid var(--line); border-radius:var(--r); background:var(--card); overflow:hidden; backdrop-filter:blur(12px); }
.insp__h{ display:flex; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid var(--line-2); font-size:13.5px; color:var(--t3); }
.insp__grid{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
.insp__l{ border-right:1px solid var(--line-2); }
.insp__r{ background:rgba(0,0,0,.22); }
.insp__cap{ padding:13px 20px; border-bottom:1px solid var(--line-2); font-size:12.5px; color:var(--t4); }

.scn{
  display:flex; align-items:flex-start; gap:13px; width:100%; text-align:left;
  padding:16px 20px; border-bottom:1px solid var(--line-2); cursor:pointer;
  transition:background .15s ease;
}
.scn:last-child{ border-bottom:0; }
.scn:hover{ background:rgba(255,255,255,.04); }
.scn.on{ background:rgba(91,82,255,.11); }
.scn__i{ width:7px; height:7px; border-radius:50%; background:var(--t4); flex:none; margin-top:7px; transition:background .15s; }
.scn.on .scn__i{ background:var(--accent); }
.scn__t{ display:block; font-size:15px; font-weight:500; line-height:1.35; }
.scn__d{ display:block; font-size:13.5px; color:var(--t3); margin-top:4px; line-height:1.45; }

.vd{ padding:20px; }
.vd__top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.vd__chip{ font-size:12.5px; font-weight:500; letter-spacing:.02em; padding:6px 14px; border-radius:var(--r-pill); border:1px solid currentColor; }
.vd__chip.allow{ color:var(--ok); background:rgba(70,214,161,.09); }
.vd__chip.hold { color:var(--hold); background:rgba(242,180,92,.09); }
.vd__chip.deny { color:var(--deny); background:rgba(255,107,120,.09); }
.vd__ms{ margin-left:auto; font-size:12.5px; color:var(--t4); }
.kv{ display:flex; flex-direction:column; gap:0; margin-bottom:18px; }
.kv__r{ display:flex; gap:16px; padding:9px 0; border-bottom:1px solid var(--line-2); }
.kv__r:last-child{ border-bottom:0; }
.kv__k{ font-size:13px; color:var(--t4); width:96px; flex:none; }
.kv__v{ font-size:13.5px; color:var(--t2); line-height:1.5; }
.kv__v.a{ color:var(--ok); } .kv__v.h{ color:var(--hold); } .kv__v.d{ color:var(--deny); }
.vd__note{ font-size:14px; color:var(--t3); line-height:1.65; border-top:1px solid var(--line-2); padding-top:16px; }
.swap{ animation:fade .22s ease; }
@keyframes fade{ from{opacity:0} to{opacity:1} }

/* ---------- steps ---------- */
.step__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:var(--accent-dim);
  color:var(--accent-hi); font-size:13.5px; font-weight:500; margin-bottom:16px;
}
.step h3{ font-size:18px; }
.step p{ margin:10px 0 0; font-size:14.5px; color:var(--t3); line-height:1.65; }

/* ---------- rows (integrations) ---------- */
.rows{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--line-2); }
.row:last-child{ border-bottom:0; }
.row__t{ font-size:14.5px; }
.row__s{ font-size:12.5px; color:var(--t4); }
.row__x{ margin-left:auto; font-size:12px; color:var(--t4); }

/* ---------- stats ---------- */
.stat__n{ font-size:clamp(38px,4.4vw,52px); font-weight:400; letter-spacing:-.04em; line-height:1; }
.stat__n s{ text-decoration:none; color:var(--t4); font-size:.5em; }
.stat__l{ margin-top:14px; font-size:14px; color:var(--t3); line-height:1.55; }

/* ---------- pricing ---------- */
.tier{ display:flex; flex-direction:column; gap:18px; }
.tier--pop{ border-color:rgba(91,82,255,.45); background:rgba(91,82,255,.07); }
.tier__n{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:500; }
.tier__n .f{ margin-left:auto; font-size:11px; padding:3px 10px; border-radius:var(--r-pill); background:var(--accent); color:#fff; }
.tier__p{ font-size:36px; font-weight:400; letter-spacing:-.035em; line-height:1; }
.tier__p s{ text-decoration:none; font-size:14px; color:var(--t4); margin-left:6px; letter-spacing:0; }
.tier .btn{ margin-top:auto; width:100%; }

/* ---------- compare ---------- */
.cmp{
  display:flex; align-items:center; gap:14px; padding:17px 20px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card);
  font-size:15px; transition:border-color .16s, background .16s;
}
.cmp:hover{ border-color:var(--line-3); background:var(--card-2); }
.cmp__x{ margin-left:auto; color:var(--t4); font-size:13px; }

/* ---------- closing ---------- */
.close{ text-align:center; }
.close h2{ max-width:17ch; margin-inline:auto; }
.close__act{ display:flex; justify-content:center; flex-wrap:wrap; gap:11px; margin-top:32px; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line-2); padding-block:56px 36px; }
.foot__grid{ display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:30px; }
.foot h5{ margin:0 0 15px; font-size:13px; color:var(--t4); font-weight:500; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot ul a{ font-size:14px; color:var(--t2); transition:color .15s; }
.foot ul a:hover{ color:var(--t1); }
.foot__bot{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:14px; font-size:13px; color:var(--t4);
}
.foot__bot .sp{ margin-left:auto; }
.notice{ margin-top:20px; padding:16px 18px; border:1px solid var(--line-2); border-radius:var(--r-sm); font-size:12.5px; color:var(--t4); line-height:1.7; }
.notice b{ color:var(--t3); font-weight:500; }

/* ---------- broker flow ----------
   Agent → broker → upstream, with the credential visibly stopping in the
   middle. Five columns on desktop; on narrow screens the connectors rotate
   and the whole thing becomes a vertical stack. */
.flow{
  display:grid; grid-template-columns:1fr auto 1.1fr auto 1fr;
  align-items:stretch; gap:0; margin-bottom:22px;
}
.flownode{
  display:flex; flex-direction:column; gap:9px; min-width:0;
  border:1px solid var(--line); border-radius:var(--r); padding:22px 20px;
  background:var(--card); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.flownode--core{ border-color:rgba(91,82,255,.45); background:rgba(91,82,255,.09); }
.flownode img{ width:40px; height:40px; margin-bottom:2px; }
.flownode__t{ font-size:16.5px; font-weight:500; letter-spacing:-.015em; }
.flownode p{ margin:0; font-size:14px; color:var(--t3); line-height:1.55; }
.keychip{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:4px;
  padding:6px 13px; border-radius:var(--r-pill);
  border:1px solid rgba(147,139,255,.5); background:rgba(91,82,255,.16);
  font-size:12.5px; color:var(--accent-hi);
}
.keychip svg{ width:14px; height:14px; flex:none; }

.flowlink{
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px;
  padding-inline:14px; min-width:118px;
}
.flowlink__l,.flowlink__r{ font-size:11.5px; color:var(--t4); white-space:nowrap; }
.flowlink__l{ color:var(--accent-hi); }
.flowlink__line{
  position:relative; width:100%; height:1px;
  background:repeating-linear-gradient(90deg, var(--line-3) 0 5px, transparent 5px 10px);
}
/* arrow head */
.flowlink__line::after{
  content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  border-left:6px solid var(--line-3);
  border-top:4px solid transparent; border-bottom:4px solid transparent;
}
.flow__cap{
  text-align:center; margin:0 0 clamp(36px,4vw,52px);
  font-size:13.5px; color:var(--t3);
}

@media (max-width:900px){
  .flow{ grid-template-columns:1fr; }
  .flowlink{ min-width:0; padding:14px 0; flex-direction:row; gap:12px; }
  .flowlink__line{ width:1px; height:34px; background:repeating-linear-gradient(180deg, var(--line-3) 0 5px, transparent 5px 10px); }
  .flowlink__line::after{
    right:auto; left:50%; top:auto; bottom:-1px; transform:translateX(-50%);
    border-left:4px solid transparent; border-right:4px solid transparent;
    border-top:6px solid var(--line-3); border-bottom:0;
  }
}

/* ---------- closing arc ---------- */
.close{ position:relative; overflow:hidden; }
.arc{
  position:absolute; left:0; right:0; bottom:0; width:100%; height:clamp(220px,32vw,420px);
  z-index:0; pointer-events:none;
}
.arc__glow{ filter:blur(18px); opacity:.55; }
.close .wrap{ position:relative; z-index:1; }

/* ---------- ecosystem orbit ----------
   Nodes are placed on a circle with per-element --x/--y so the positions stay
   readable in the markup. Below 700px the ring is dropped and the nodes reflow
   into a plain wrapped row, which is legible where a 300px circle is not. */
.orbit{
  position:relative; width:min(560px,100%); aspect-ratio:1; margin:0 auto;
}
.orbit__ring{ position:absolute; inset:0; width:100%; height:100%; }
.orbit__core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:132px; height:132px; border-radius:50%;
  background:radial-gradient(circle, rgba(91,82,255,.30), transparent 68%);
}
.orbit__core img{ width:84px; height:84px; }
.onode{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  padding:9px 16px 9px 12px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:rgba(14,14,22,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:14px; color:var(--t2);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.9);
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.onode:hover{ border-color:rgba(147,139,255,.6); color:var(--t1); transform:translate(-50%,-50%) scale(1.04); }
.onode__i{ display:grid; place-items:center; width:17px; height:17px; color:var(--accent-hi); flex:none; }
.onode__i svg{ width:17px; height:17px; }
.orbit__cap{
  text-align:center; margin:34px 0 0; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--t4);
}

@media (max-width:700px){
  .orbit{
    aspect-ratio:auto; display:flex; flex-wrap:wrap;
    justify-content:center; align-items:center; gap:10px;
  }
  .orbit__ring{ display:none; }
  /* full-width so the nodes wrap onto their own rows beneath the mark */
  .orbit__core{ position:static; transform:none; flex:0 0 100%; margin-bottom:12px; }
  .onode{ position:static; transform:none; }
  .onode:hover{ transform:none; }
}

/* ---------- auth pages ---------- */
.authpage{
  position:relative; overflow:hidden;
  min-height:100vh; min-height:100dvh;
  display:grid; place-items:center; padding:72px 20px 48px;
}
.auth__back{
  position:absolute; top:22px; left:24px; z-index:2;
  font-size:13.5px; color:var(--t3); transition:color .15s;
}
.auth__back:hover{ color:var(--t1); }
.authcard{
  position:relative; z-index:1; width:100%; max-width:448px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:32px 30px;
  box-shadow:0 30px 70px -32px rgba(0,0,0,.9);
}
.auth__brand{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:19px; font-weight:600; letter-spacing:-.02em;
}
.auth__brand img{ width:28px; height:28px; }
.auth__sub{ text-align:center; color:var(--t3); font-size:14.5px; margin:11px 0 26px; }
.auth__div{
  display:flex; align-items:center; gap:14px; margin:22px 0;
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--t4);
}
.auth__div::before,.auth__div::after{ content:""; flex:1; height:1px; background:var(--line-2); }
.oauth{ width:100%; }
.oauth .ico{ width:17px; height:17px; flex:none; }
.auth__row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.auth__alt{ display:flex; flex-direction:column; gap:9px; }
.auth__alt .btn{ width:100%; }
.auth__foot{ text-align:center; margin-top:24px; font-size:14px; color:var(--t3); }
.auth__note{
  margin:0 0 20px; padding:11px 13px; border-radius:var(--r-sm);
  border:1px solid rgba(242,180,92,.28); background:rgba(242,180,92,.07);
  font-size:12.5px; color:var(--t3); line-height:1.55; text-align:center;
}
.auth__note b{ color:var(--hold); }
.authpage .form .btn[disabled]{ opacity:.5; cursor:not-allowed; }
.authpage .form .btn[disabled]:hover{ transform:none; }

.authsent{
  margin:0 0 22px; padding:14px 16px; border-radius:var(--r-sm);
  border:1px solid rgba(70,214,161,.3); background:rgba(70,214,161,.08);
  font-size:14px; color:var(--t2); line-height:1.6; text-align:center;
}
.authsent b{ color:#8ff0c6; font-weight:500; word-break:break-all; }
.autherr{
  margin:0 0 18px; padding:11px 14px; border-radius:var(--r-sm);
  border:1px solid rgba(255,107,120,.35); background:rgba(255,107,120,.10);
  font-size:13.5px; color:#ffb4bb; line-height:1.5;
}
.hint{ font-size:12.5px; color:var(--t4); }
.form label .hint{ margin-top:-2px; }

/* ---------- docs layout ---------- */
.docs{
  display:grid; grid-template-columns:232px minmax(0,1fr) 196px; gap:44px;
  align-items:start; padding-block:36px 88px;
}
.dsb{ position:sticky; top:80px; max-height:calc(100vh - 104px); overflow-y:auto; padding-right:6px; }
.dsb::-webkit-scrollbar{ width:6px; }
.dsb::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.dsearch{ position:relative; margin-bottom:22px; }
.dsearch input{
  width:100%; font:inherit; font-size:14px; color:var(--t1);
  background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 40px 9px 12px; outline:none; transition:border-color .15s;
}
.dsearch input:focus{ border-color:rgba(147,139,255,.6); }
.dsearch input::placeholder{ color:var(--t4); }
.dsearch kbd{
  position:absolute; right:9px; top:50%; transform:translateY(-50%); pointer-events:none;
  font-family:var(--mono); font-size:10.5px; color:var(--t4);
  border:1px solid var(--line); border-radius:5px; padding:2px 6px; background:rgba(255,255,255,.04);
}
.dsb h6{
  margin:20px 0 8px; font-size:11.5px; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; color:var(--t4);
}
.dsb h6:first-of-type{ margin-top:0; }
.dsb a{
  display:block; padding:6px 11px; margin-left:-11px; border-radius:7px;
  font-size:14px; color:var(--t3); transition:color .14s, background .14s;
}
.dsb a:hover{ color:var(--t1); background:rgba(255,255,255,.05); }
.dsb a.on{ color:var(--accent-hi); background:var(--accent-dim); }
.dsb .nores{ font-size:13px; color:var(--t4); padding:6px 0; }

.dmain h2{ scroll-margin-top:92px; }
.dmain > h2{ margin-top:52px; margin-bottom:14px; font-size:clamp(24px,2.7vw,30px); }
.dmain > h2:first-child{ margin-top:0; }
.dmain h3{ margin-top:28px; margin-bottom:10px; font-size:17px; }
.dmain p{ color:var(--t2); line-height:1.72; margin:0 0 16px; }
.dmain ul{ margin-bottom:20px; }
.dmain pre.code{
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:rgba(0,0,0,.42); margin:0 0 20px;
}
.dmain .tbl{ margin-bottom:24px; }
.dnote{
  border:1px solid rgba(91,82,255,.3); background:rgba(91,82,255,.08);
  border-radius:var(--r-sm); padding:14px 16px; margin:0 0 22px;
  font-size:14px; color:var(--t2); line-height:1.65;
}
.dnote b{ color:var(--accent-hi); }

.dtoc{ position:sticky; top:80px; }
.dtoc h6{ margin:0 0 12px; font-size:11.5px; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--t4); }
.dtoc a{
  display:block; padding:5px 0 5px 13px; border-left:2px solid var(--line-2);
  font-size:13.5px; color:var(--t3); transition:color .14s, border-color .14s;
}
.dtoc a:hover{ color:var(--t1); }
.dtoc a.on{ color:var(--accent-hi); border-left-color:var(--accent); }

.dpage{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:56px; padding-top:26px; border-top:1px solid var(--line-2);
}
.dpage a{
  flex:1 1 240px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--card); padding:15px 18px; transition:border-color .16s, background .16s;
}
.dpage a:hover{ border-color:var(--line-3); background:var(--card-2); }
.dpage span{ display:block; font-size:12.5px; color:var(--t4); margin-bottom:4px; }
.dpage b{ font-weight:500; font-size:15px; }
.dpage .nx{ text-align:right; }

.dsbtoggle{ display:none; }

@media (max-width:1140px){
  .docs{ grid-template-columns:220px minmax(0,1fr); gap:36px; }
  .dtoc{ display:none; }
}
@media (max-width:880px){
  .docs{ grid-template-columns:1fr; gap:0; }
  .dsb{
    position:static; max-height:none; overflow:visible;
    border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:28px;
  }
  .dsbtoggle{
    display:flex; align-items:center; gap:9px; width:100%; cursor:pointer;
    font-size:14px; color:var(--t2); padding:0 0 14px;
  }
  .dsb.collapsed .dsb__body{ display:none; }
  .dsb.collapsed{ padding-bottom:4px; }
}

/* ---------- sub-pages ---------- */
.phero{ position:relative; overflow:hidden; padding-block:clamp(48px,6vw,84px) clamp(32px,4vw,52px); text-align:center; }
.phero .wrap{ position:relative; z-index:2; }
.glow--page{ inset:-320px 0 auto 0; height:640px; opacity:.7; }
.crumb{ display:inline-block; font-size:13.5px; color:var(--t3); margin-bottom:22px; transition:color .15s; }
.crumb:hover{ color:var(--t1); }
.phero__h{ max-width:20ch; margin-inline:auto; }
.phero__l{ max-width:600px; margin-inline:auto; }

.prose{ max-width:720px; margin-inline:auto; }
.prose > h2{ margin-top:48px; margin-bottom:14px; }
.prose > h2:first-child{ margin-top:0; }
.prose p{ color:var(--t2); font-size:16px; line-height:1.72; margin:0 0 16px; }
.prose ul{ margin-bottom:22px; }
.prose pre.code{
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:rgba(0,0,0,.4); margin:0 0 20px;
}
code{
  font-family:var(--mono); font-size:.88em;
  background:rgba(255,255,255,.08); padding:2px 6px; border-radius:5px; color:var(--t1);
}
pre.code code{ background:none; padding:0; }
.ilink{ color:var(--accent-hi); }
.ilink:hover{ text-decoration:underline; }

.pblock{ margin-bottom:16px; }
.pblock__t{ font-size:clamp(22px,2.6vw,30px); }
.pblock__s{ color:var(--t3); font-size:15px; margin:8px 0 16px; }
.pblock p{ color:var(--t2); line-height:1.7; margin:0 0 14px; }
.vcase{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.vcase h3{ margin-bottom:8px; }

.tbl{ width:100%; border-collapse:collapse; margin:0 0 24px; font-size:14.5px; }
.tbl th,.tbl td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line-2); vertical-align:top; }
.tbl th{ color:var(--t4); font-weight:500; font-size:13px; }
.tbl td{ color:var(--t2); }
.tbl td:first-child{ white-space:nowrap; }

.narrow{ max-width:900px; margin-inline:auto; }
.narrow-1{ max-width:460px; margin-inline:auto; }
.form{ display:flex; flex-direction:column; gap:15px; margin-top:4px; }
.form label{ display:flex; flex-direction:column; gap:7px; font-size:14px; color:var(--t2); }
.form input,.form select,.form textarea{
  width:100%; font:inherit; font-size:14.5px; color:var(--t1);
  background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 13px; outline:none; transition:border-color .15s;
}
.form textarea{ resize:vertical; }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:rgba(147,139,255,.6); }
.form input::placeholder,.form textarea::placeholder{ color:rgba(255,255,255,.28); }
.form .btn[disabled]{ opacity:.45; cursor:not-allowed; }
.form .btn[disabled]:hover{ transform:none; }
.formnote{
  margin:0 0 18px; padding:13px 15px; border-radius:var(--r-sm);
  border:1px solid rgba(242,180,92,.3); background:rgba(242,180,92,.08);
  font-size:13px; color:var(--t2); line-height:1.6;
}
.formnote b{ color:var(--hold); }

.statusline{ display:flex; align-items:center; gap:11px; font-size:15px; }
.sdot{ width:9px; height:9px; border-radius:50%; flex:none; }
.sdot.ok{ background:var(--ok); box-shadow:0 0 0 4px rgba(70,214,161,.14); }
.chlog{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.chlog__d{ font-family:var(--mono); font-size:13px; color:var(--t3); }
.chlog__t{ font-size:12px; padding:3px 10px; border-radius:var(--r-pill); background:var(--accent-dim); color:var(--accent-hi); }
.cta-row{ display:flex; flex-wrap:wrap; gap:11px; margin-top:32px; }

@media (max-width:760px){
  .vcase{ grid-template-columns:1fr; }
  .tbl td:first-child{ white-space:normal; }
}

/* ---------- reveal (gated on .js so a script failure shows everything) ---------- */
.js [data-rv]{ opacity:0; transform:translateY(12px); }
.js [data-rv].rv-in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .js [data-rv]{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__end > a:not(.btn){ display:none; }
  .nav__end{ margin-left:auto; }
  .burger{ display:block; margin-left:8px; }
  .nav__links.open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:62px; margin:0; padding:10px 24px 18px;
    background:rgba(8,8,14,.98); border-bottom:1px solid var(--line);
  }
  .nav__links.open a{ padding:13px 8px; border-radius:0; }
  .insp__grid,.grid-2{ grid-template-columns:1fr; }
  .insp__l{ border-right:0; border-bottom:1px solid var(--line-2); }
}
@media (max-width:640px){
  :root{ --gut:18px; }
  .grid-3,.grid-4{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .card{ padding:22px; }
  .kv__k{ width:84px; }
}