/* ============================================================
   DARK GLASS THEME — silver headings, liquid glass surfaces
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* backgrounds */
  --bg:      #050507;
  --bg-2:    #0c0c10;
  --bg-3:    #111118;
  --bg-hover:#16161e;

  /* glass surfaces */
  --glass-bg:    rgba(255,255,255,0.035);
  --glass-bg-2:  rgba(255,255,255,0.06);
  --glass-bg-3:  rgba(255,255,255,0.09);
  --glass-border:rgba(255,255,255,0.10);
  --glass-border-2:rgba(255,255,255,0.16);
  --glass-border-3:rgba(255,255,255,0.22);

  /* lines */
  --line:  rgba(255,255,255,0.07);
  --line-2:rgba(255,255,255,0.11);
  --line-3:rgba(255,255,255,0.18);

  /* text — silver palette */
  --text:       #f0f0f4;
  --text-dim:   #9898a8;
  --text-mute:  #5c5c70;
  --text-faint: #2e2e3a;
  --silver:     #c8cad8;
  --silver-2:   #a0a3b5;
  --silver-bright:#e8eaf2;

  /* accent / status */
  --ink:      #050507;
  --accent:   #e0e2ee;
  --accent-hover:#fff;
  --ok:   #4ade80;
  --warn: #f5b454;
  --err:  #f87171;
  --info: #93c5fd;

  /* silver gradient for headings — matches hero */
  --silver-grad: linear-gradient(150deg,#fff 0%,#d8dae8 35%,#a0a3b5 70%,#c8cad8 100%);

  /* glow colors */
  --glow-1: rgba(100,120,255,0.12);
  --glow-2: rgba(200,202,216,0.06);

  /* radii */
  --r-xs:4px; --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px;

  /* fonts */
  --mono: 'JetBrains Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;
  --sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ── reset ── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* background mesh */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(80,100,220,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(60,80,180,0.06) 0%, transparent 55%);
  pointer-events:none;
  z-index:0;
}

img,svg{display:block;max-width:100%}
a{color:var(--text);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--accent-hover)}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
::selection{background:rgba(200,202,216,0.25);color:#fff}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.14)}

/* ── typography ── */
h1,h2,h3,h4,h5,h6{
  margin:0 0 16px;
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:1.2;
  background:var(--silver-grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
h1{font-size:36px;letter-spacing:-0.03em}
h2{font-size:26px}
h3{font-size:19px}
h4{font-size:15px}
p{margin:0 0 16px;color:var(--text-dim)}
small{font-size:12px;color:var(--text-mute)}
strong{color:var(--silver-bright);font-weight:600}
ul,ol{color:var(--text-dim);padding-left:20px;margin:0 0 16px}
li{margin:4px 0}
code,pre,.mono{font-family:var(--mono)}
code.inline{
  font-size:12.5px;padding:2px 7px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xs);
  color:var(--silver);
}
pre.code,.code{
  margin:0;padding:18px 20px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--glass-border);
  border-radius:var(--r);
  font-family:var(--mono);
  font-size:13px;line-height:1.7;
  color:var(--silver-bright);
  overflow-x:auto;white-space:pre;
}
.code-comment{color:var(--text-mute)}
.code-string{color:#c8b994}
.code-key{color:#93c5fd}
.code-keyword{color:#d4a8e8}

/* ── layout ── */
.container{max-width:1140px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.container-sm{max-width:720px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.row{display:flex;align-items:center}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}
.muted{color:var(--text-dim)}
.mute-2{color:var(--text-mute)}
.text-sm{font-size:13px}.text-xs{font-size:12px}

/* spacing */
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.section{padding:80px 0;border-bottom:1px solid var(--line)}
.section .sub{color:var(--text-dim);font-size:16px;max-width:640px}

/* ── nav ── */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(5,5,7,0.7);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--glass-border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--silver-bright);letter-spacing:-0.01em}
.brand-logo{height:22px;width:auto;object-fit:contain}
.brand-mark{
  width:28px;height:28px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,rgba(255,255,255,0.15),rgba(255,255,255,0.06));
  border:1px solid var(--glass-border-2);
  color:var(--silver-bright);
  display:grid;place-items:center;
  font-weight:700;font-size:13px;font-family:var(--mono);
  backdrop-filter:blur(8px);
}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--text-mute);font-size:13.5px;font-weight:400;transition:color .15s}
.nav-links a:hover,.nav-links a.active{color:var(--silver)}
.nav-cta{display:flex;gap:8px;align-items:center}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 16px;
  border-radius:var(--r-sm);
  font-size:13.5px;font-weight:500;font-family:var(--sans);
  border:1px solid var(--glass-border-2);
  background:var(--glass-bg-2);
  color:var(--silver);
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
  text-decoration:none;white-space:nowrap;
  backdrop-filter:blur(8px);
}
.btn:hover{
  background:var(--glass-bg-3);
  border-color:var(--glass-border-3);
  color:var(--silver-bright);
  box-shadow:0 0 0 1px rgba(255,255,255,0.04),0 4px 16px rgba(0,0,0,0.3);
}
.btn-primary{
  background:linear-gradient(135deg,rgba(255,255,255,0.95),rgba(220,222,234,0.9));
  color:#050507;
  border-color:rgba(255,255,255,0.8);
  font-weight:600;
}
.btn-primary:hover{
  background:linear-gradient(135deg,#fff,rgba(230,232,244,1));
  color:#050507;
  box-shadow:0 0 24px rgba(200,202,216,0.25),0 4px 12px rgba(0,0,0,0.4);
  border-color:#fff;
}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-mute)}
.btn-ghost:hover{background:var(--glass-bg);color:var(--silver);border-color:var(--glass-border)}
.btn-danger{background:transparent;color:var(--err);border-color:rgba(248,113,113,0.2)}
.btn-danger:hover{background:rgba(248,113,113,0.08);border-color:rgba(248,113,113,0.35);color:var(--err)}
.btn-sm{height:30px;padding:0 12px;font-size:12.5px}
.btn-lg{height:46px;padding:0 24px;font-size:15px;border-radius:var(--r)}
.btn-block{width:100%}
.btn-icon{width:36px;padding:0}

/* ── glass card (base) ── */
.glass-surface{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 8px 32px rgba(0,0,0,0.4);
}
.card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  padding:24px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 4px 24px rgba(0,0,0,0.3);
}
.card-tight{padding:16px}
.card-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.card-row:first-child{border-top:0}

/* ── flash ── */
.flash{padding:10px 14px;border-radius:var(--r-sm);font-size:13.5px;border:1px solid var(--glass-border);background:var(--glass-bg)}
.flash-ok{border-color:rgba(74,222,128,0.25);background:rgba(74,222,128,0.07);color:#86efac}
.flash-err{border-color:rgba(248,113,113,0.25);background:rgba(248,113,113,0.07);color:#fca5a5}

/* ── form ── */
.form{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;color:var(--silver-2);font-weight:500;background:none;-webkit-text-fill-color:var(--silver-2)}
.field .hint{font-size:12px;color:var(--text-mute)}
input,select,textarea{
  font-family:var(--sans);font-size:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--glass-border-2);
  color:var(--text);
  border-radius:var(--r-sm);
  padding:9px 12px;
  outline:none;width:100%;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--glass-border-3);
  background:rgba(255,255,255,0.06);
  box-shadow:0 0 0 3px rgba(200,202,216,0.07);
}
input::placeholder,textarea::placeholder{color:var(--text-mute)}
textarea{min-height:80px;resize:vertical;font-family:var(--mono);font-size:13px}
select option{background:#0c0c10;color:var(--text)}

/* ── table ── */
.table-wrap{
  border:1px solid var(--glass-border);
  border-radius:var(--r);
  overflow:hidden;overflow-x:auto;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
thead th{background:rgba(255,255,255,0.03);color:var(--silver-2);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,0.025)}
td.mono,th.mono,.mono{font-family:var(--mono);font-size:12.5px}

/* ── badge ── */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border:1px solid var(--glass-border);border-radius:999px;font-size:11.5px;font-weight:500;color:var(--text-mute);background:var(--glass-bg);backdrop-filter:blur(8px)}
.badge-ok{color:var(--ok);border-color:rgba(74,222,128,0.25);background:rgba(74,222,128,0.07)}
.badge-warn{color:var(--warn);border-color:rgba(245,180,84,0.25);background:rgba(245,180,84,0.07)}
.badge-err{color:var(--err);border-color:rgba(248,113,113,0.25);background:rgba(248,113,113,0.07)}
.badge-pro{color:var(--silver-bright);border-color:var(--glass-border-2);background:var(--glass-bg-2)}

/* ── stat ── */
.stat{
  padding:18px 20px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--r);
  backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.stat:hover{background:var(--glass-bg-2);border-color:var(--glass-border-2);box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 4px 20px rgba(0,0,0,0.3)}
.stat-label{font-size:11.5px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.stat-value{font-size:28px;font-weight:700;letter-spacing:-0.03em;color:var(--silver-bright);font-variant-numeric:tabular-nums;background:linear-gradient(150deg,#fff 0%,#d8dae8 35%,#a0a3b5 70%,#c8cad8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-sub{font-size:12px;color:var(--text-mute);margin-top:4px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}

/* ============================================================
   HERO
   ============================================================ */
.hero-new{
  position:relative;
  padding:80px 0 80px;
  border-bottom:1px solid var(--glass-border);
  overflow:hidden;
}
/* ambient orbs */
.hero-new::before{
  content:'';
  position:absolute;
  top:-160px;left:50%;transform:translateX(-50%);
  width:900px;height:600px;
  background:radial-gradient(ellipse at center,rgba(80,100,230,0.13) 0%,transparent 65%);
  pointer-events:none;
}
.hero-new::after{
  content:'';
  position:absolute;
  bottom:-100px;left:50%;transform:translateX(-50%);
  width:700px;height:400px;
  background:radial-gradient(ellipse at center,rgba(150,160,220,0.06) 0%,transparent 60%);
  pointer-events:none;
}
.hero-new-glow{display:none}
.hero-new-inner{max-width:800px;margin:0 auto;text-align:center;position:relative;z-index:1}
.hero-new-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;
  border:1px solid var(--glass-border-2);
  border-radius:999px;
  font-size:12px;color:var(--silver-2);
  background:var(--glass-bg-2);
  backdrop-filter:blur(12px);
  margin-bottom:36px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
  letter-spacing:.02em;
}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(74,222,128,0.18),0 0 8px rgba(74,222,128,0.4);animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,0.18),0 0 8px rgba(74,222,128,0.3)}50%{box-shadow:0 0 0 5px rgba(74,222,128,0.1),0 0 16px rgba(74,222,128,0.5)}}
.hero-new-title{
  font-size:64px;
  line-height:1.02;
  letter-spacing:-0.04em;
  font-weight:700;
  margin:0 0 8px;
  background:linear-gradient(150deg,#fff 0%,#d8dae8 35%,#a0a3b5 70%,#c8cad8 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-new-title--black{color:var(--text-mute)}
.hero-new-desc{
  font-size:18px;
  color:var(--text-dim);
  max-width:580px;
  margin:24px auto 40px;
  line-height:1.6;
  font-weight:300;
}
.hero-new-api{margin:0 auto 36px;max-width:580px}
.hero-new-api-label{font-size:11px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;text-align:left}
.hero-new-api-box{
  display:flex;align-items:center;gap:8px;
  padding:10px 10px 10px 18px;
  background:var(--glass-bg-2);
  border:1px solid var(--glass-border-2);
  border-radius:var(--r);
  font-family:var(--mono);font-size:13px;
  backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 4px 20px rgba(0,0,0,0.3);
  transition:border-color .2s;
}
.hero-new-api-box:hover{border-color:var(--glass-border-3)}
.hero-new-api-box code{flex:1;color:var(--silver);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.hero-new-api-box button{
  height:32px;padding:0 14px;
  background:var(--glass-bg-3);
  border:1px solid var(--glass-border-2);
  color:var(--silver-2);font-size:12px;
  border-radius:var(--r-sm);cursor:pointer;
  font-family:var(--sans);font-weight:500;
  transition:all .15s;
  backdrop-filter:blur(8px);
}
.hero-new-api-box button:hover{background:rgba(255,255,255,0.12);color:var(--silver-bright);border-color:var(--glass-border-3)}
.hero-new-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}

/* lab logos strip */
.hero-labs{margin-top:0;text-align:center}
.hero-labs-label{font-size:11px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px}
.hero-labs-logos{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;
  gap:28px;
  max-width:760px;
  margin:0 auto;
}
.hero-lab{
  display:flex;flex-direction:column;align-items:center;
  gap:7px;
  transition:opacity .2s;
  cursor:default;
}
.hero-lab:hover{opacity:0.75}
.hero-lab-icon{
  width:36px;height:36px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  border:1px solid var(--glass-border-2);
  background:var(--glass-bg-2);
  backdrop-filter:blur(8px);
  flex-shrink:0;
  overflow:hidden;
}
.hero-lab-icon img{display:block;max-width:22px;max-height:22px;object-fit:contain}
.hero-lab-name{font-size:11px;color:var(--text-mute);font-weight:500;letter-spacing:.02em;white-space:nowrap}

/* ── hero split layout ── */
.hero-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  position:relative;z-index:1;
}
.hero-split-left{text-align:left}
.hero-split-left .hero-new-badge{display:inline-flex;margin-bottom:28px}
.hero-split-left .hero-new-title{text-align:left;font-size:52px}
.hero-split-left .hero-new-desc{text-align:left;margin:20px 0 32px;max-width:480px}
.hero-split-left .hero-new-actions{justify-content:flex-start}
.hero-api-center{max-width:640px;margin:48px auto 0;position:relative;z-index:1}

/* ── router flow (hub → models) ── */
.router-flow{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:0;
  align-items:center;
  min-height:380px;
  position:relative;
}

/* Hub (left side) */
.rf-hub{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  position:relative;z-index:2;
  animation:rfHubIn .6s ease-out both;
}
.rf-hub-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(100,120,255,0.12) 0%,rgba(100,120,255,0.04) 40%,transparent 70%);
  animation:rfGlowPulse 3s ease-in-out infinite;
  pointer-events:none;
}
.rf-hub-glow::after{
  content:'';position:absolute;inset:20px;border-radius:50%;
  border:1px solid rgba(100,120,255,0.08);
  animation:rfRingPulse 4s ease-in-out infinite;
}
.rf-hub-icon{
  width:60px;height:60px;border-radius:15px;
  background:linear-gradient(135deg,rgba(255,255,255,0.14),rgba(255,255,255,0.04));
  border:1.5px solid var(--glass-border-3);
  display:grid;place-items:center;
  box-shadow:0 0 40px rgba(100,120,255,0.15),0 0 80px rgba(100,120,255,0.05),inset 0 1px 0 rgba(255,255,255,0.18);
  backdrop-filter:blur(16px);
  position:relative;z-index:1;
}
.rf-hub-icon img{width:34px;height:34px;object-fit:contain;border-radius:6px}
.rf-hub-label{font-size:10.5px;color:var(--silver-2);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
@keyframes rfRingPulse{0%,100%{opacity:0.3;transform:scale(1)}50%{opacity:0.7;transform:scale(1.08)}}
@keyframes rfHubIn{0%{opacity:0;transform:scale(0.4)}100%{opacity:1;transform:scale(1)}}
@keyframes rfGlowPulse{0%,100%{opacity:0.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}

/* SVG lines (middle) */
.rf-lines{
  width:100%;height:100%;
  min-height:380px;
  overflow:visible;
}
@keyframes rfLineIn{0%{opacity:0}100%{opacity:1}}
@keyframes rfDotIn{0%{opacity:0}100%{opacity:0.9}}

/* Model nodes (right side, stacked) */
.rf-models{
  display:flex;flex-direction:column;gap:6px;
  position:relative;z-index:2;
}
.rf-model-node{
  display:flex;align-items:center;gap:10px;
  padding:7px 14px 7px 7px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:10px;
  backdrop-filter:blur(10px);
  opacity:0;
  animation:rfNodeIn .4s ease-out forwards;
  transition:border-color .2s,background .2s,transform .15s,box-shadow .2s;
  cursor:default;
  position:relative;
}
.rf-model-node::before{
  content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;
  background:rgba(100,120,255,0.5);
  box-shadow:0 0 6px rgba(100,120,255,0.4);
  opacity:0;
  transition:opacity .2s;
}
.rf-model-node:hover::before{opacity:1}
.rf-model-node:hover{
  border-color:var(--glass-border-3);
  background:var(--glass-bg-3);
  transform:translateX(4px);
  box-shadow:0 0 16px rgba(100,120,255,0.06);
}
.rf-model-icon{
  width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--glass-border-2);
  flex-shrink:0;
  overflow:hidden;
}
.rf-model-icon img{width:17px;height:17px;object-fit:contain}
.rf-model-name{font-size:12px;color:var(--silver);font-weight:500;white-space:nowrap;letter-spacing:.01em}
@keyframes rfNodeIn{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}

@media(max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero-split-left{text-align:center}
  .hero-split-left .hero-new-title{text-align:center;font-size:44px}
  .hero-split-left .hero-new-desc{text-align:center;margin-left:auto;margin-right:auto}
  .hero-split-left .hero-new-actions{justify-content:center}
  .router-flow{max-width:420px;margin:0 auto;min-height:320px}
  .rf-hub-icon{width:48px;height:48px}
  .rf-hub-icon img{width:26px;height:26px}
  .rf-model-node{padding:5px 10px 5px 5px}
  .rf-model-icon{width:24px;height:24px}
  .rf-model-icon img{width:14px;height:14px}
  .rf-model-name{font-size:10.5px}
}
@media(max-width:600px){
  .hero-split-left .hero-new-title{font-size:32px}
  .router-flow{min-height:280px;max-width:340px}
  .rf-hub-icon{width:40px;height:40px;border-radius:11px}
  .rf-hub-icon img{width:22px;height:22px}
  .rf-hub-glow{width:80px;height:80px}
  .rf-model-node{padding:4px 8px 4px 4px;gap:6px;border-radius:8px}
  .rf-model-icon{width:22px;height:22px;border-radius:6px}
  .rf-model-icon img{width:12px;height:12px}
  .rf-model-name{font-size:9.5px}
  .rf-models{gap:4px}
}

/* ── features strip ── */
.features-strip{border-bottom:1px solid var(--glass-border);padding:40px 0}
.features-strip-grid{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.feature-strip-item{display:flex;align-items:center;gap:16px;flex:1;min-width:160px}
.feature-strip-icon{
  width:40px;height:40px;
  border:1px solid var(--glass-border-2);
  border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:var(--glass-bg-2);
  color:var(--silver-2);
  font-size:16px;font-family:var(--mono);
  backdrop-filter:blur(8px);
  flex-shrink:0;
}
.feature-strip-value{font-size:20px;font-weight:700;color:var(--silver-bright);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;background:var(--silver-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.feature-strip-label{font-size:12px;color:var(--text-mute);margin-top:1px}
.feature-strip-divider{width:1px;height:36px;background:var(--glass-border)}

/* ── section headers ── */
.how-section,.features-section,.pricing-section{padding:104px 0;border-bottom:1px solid var(--glass-border)}
.section-header-new{text-align:center;max-width:640px;margin:0 auto 64px}
.section-header-new h2{font-size:40px;letter-spacing:-0.03em;margin:0 0 14px}
.section-header-new p{font-size:16px;color:var(--text-dim);margin:0;font-weight:300}

/* ── code showcase ── */
.code-showcase{
  max-width:820px;margin:0 auto;
  border:1px solid var(--glass-border-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 8px 40px rgba(0,0,0,0.5);
}
.code-showcase-tabs{
  display:flex;
  background:rgba(255,255,255,0.025);
  border-bottom:1px solid var(--glass-border);
  padding:0 6px;
}
.code-tab{
  appearance:none;background:transparent;border:0;
  padding:11px 16px;font-size:12.5px;
  color:var(--text-mute);font-family:var(--sans);font-weight:500;
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s,border-color .15s;letter-spacing:.01em;
}
.code-tab:hover{color:var(--silver-2)}
.code-tab.active{color:var(--silver-bright);border-bottom-color:var(--silver-bright)}
.code-showcase-panel{display:none;padding:0}
.code-showcase-panel.active{display:block}
.code-showcase-panel pre.code{border:0;border-radius:0;background:transparent;padding:22px 24px;color:var(--silver)}

/* ── features grid ── */
.features-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--glass-border);
  border:1px solid var(--glass-border-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.feature-card{
  background:var(--glass-bg);
  padding:36px 28px;
  transition:background .2s;
  backdrop-filter:blur(12px);
}
.feature-card:hover{background:var(--glass-bg-2)}
.feature-card-icon{
  width:36px;height:36px;
  border:1px solid var(--glass-border-2);
  border-radius:var(--r-sm);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:14px;
  color:var(--silver-2);margin-bottom:20px;
  background:var(--glass-bg-2);
  backdrop-filter:blur(8px);
}
.feature-card h3{font-size:15px;font-weight:600;margin:0 0 8px}
.feature-card p{font-size:13.5px;color:var(--text-dim);margin:0;line-height:1.6}

/* ── pricing ── */
.pricing-grid-new{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto}
.plan-new{
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  padding:36px 30px;
  display:flex;flex-direction:column;
  backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  transition:border-color .2s,box-shadow .2s;
}
.plan-new:hover{border-color:var(--glass-border-2);box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 8px 32px rgba(0,0,0,0.4)}
.plan-new--featured{
  border-color:var(--glass-border-2);
  background:linear-gradient(160deg,rgba(255,255,255,0.07),rgba(255,255,255,0.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 4px 24px rgba(0,0,0,0.4);
}
.plan-new-badge{position:absolute;top:18px;right:18px;font-size:11px;color:var(--silver-2);background:var(--glass-bg-3);border:1px solid var(--glass-border-2);padding:3px 10px;border-radius:999px;font-weight:500;backdrop-filter:blur(8px)}
.plan-new-name{font-size:12px;color:var(--text-mute);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;background:none;-webkit-text-fill-color:var(--text-mute)}
.plan-new-price{font-size:46px;font-weight:700;letter-spacing:-0.03em;margin-bottom:6px;font-variant-numeric:tabular-nums;background:var(--silver-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.plan-new-price small{font-size:14px;font-weight:400;-webkit-text-fill-color:var(--text-mute);margin-left:4px}
.plan-new-desc{font-size:13.5px;color:var(--text-dim);margin:0 0 24px;font-weight:300}
.plan-new-features{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.plan-new-features li{font-size:13.5px;color:var(--silver-2);padding-left:22px;position:relative;margin:0}
.plan-new-features li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:7px;border-left:1.5px solid var(--silver-2);border-bottom:1.5px solid var(--silver-2);transform:rotate(-45deg);transform-origin:left center}

/* legacy pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.plan{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;backdrop-filter:blur(20px)}
.plan.featured{border-color:var(--glass-border-2)}
.plan-name{font-size:12px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;font-weight:500}
.plan-title{font-size:18px;font-weight:600;margin:0 0 4px}
.plan-desc{font-size:13.5px;color:var(--text-dim);margin:0 0 16px}
.plan-price{font-size:38px;font-weight:700;letter-spacing:-0.025em;margin-bottom:20px;font-variant-numeric:tabular-nums;background:var(--silver-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.plan-price small{font-size:13px;font-weight:400;-webkit-text-fill-color:var(--text-mute);margin-left:4px}
.plan-features{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:7px;flex:1}
.plan-features li{font-size:13.5px;color:var(--silver-2);padding-left:22px;position:relative;margin:0}
.plan-features li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:7px;border-left:1.5px solid var(--silver-2);border-bottom:1.5px solid var(--silver-2);transform:rotate(-45deg);transform-origin:left center}

/* ── footer CTA ── */
.footer-cta{padding:104px 0;text-align:center;border-bottom:1px solid var(--glass-border);position:relative;overflow:hidden}
.footer-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(80,100,220,0.08) 0%,transparent 65%);pointer-events:none}
.footer-cta h2{font-size:40px;letter-spacing:-0.03em;margin:0 0 16px}
.footer-cta p{color:var(--text-dim);margin:0 0 32px;font-size:17px;font-weight:300}

/* ── footer ── */
.footer{
  padding:48px 0;
  border-top:1px solid var(--glass-border);
  background:rgba(5,5,7,0.8);
  backdrop-filter:blur(20px);
  position:relative;z-index:1;
}
.footer .muted{color:var(--text-mute)}
.footer a{color:var(--text-mute);font-size:13px;transition:color .15s}
.footer a:hover{color:var(--silver)}

/* ── docs ── */
.docs{display:grid;grid-template-columns:240px 1fr;gap:0;padding:0;max-width:none;width:100%;margin:0}
.docs-side{position:fixed;top:60px;left:0;bottom:0;width:240px;padding:20px 16px;background:var(--bg-2);border-right:1px solid var(--glass-border);overflow-y:auto;display:flex;flex-direction:column;gap:4px;z-index:40}
.docs-side h4{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-mute);margin:20px 8px 6px;font-weight:600;background:none;-webkit-text-fill-color:var(--text-mute)}
.docs-side h4:first-child{margin-top:0}
.docs-side a{display:block;padding:6px 12px;font-size:13.5px;color:var(--text-dim);border-radius:var(--r-sm);transition:all .12s}
.docs-side a:hover{color:var(--silver);background:var(--glass-bg-2)}
.docs-content{max-width:860px;min-width:0;margin-left:240px;padding:32px 40px 96px;grid-column:1/-1}
.docs-content h1{font-size:32px;letter-spacing:-0.03em;margin:0 0 16px}
.docs-content h2{font-size:22px;margin:48px 0 14px;padding-top:8px;letter-spacing:-0.02em}
.docs-content h3{font-size:16px;margin:28px 0 10px}
.docs-content p{font-size:14.5px;line-height:1.75;color:var(--text-dim)}
.docs-content ul,.docs-content ol{font-size:14.5px;line-height:1.8}
.docs-content pre.code{margin:14px 0}

/* ── auth ── */
.auth-wrap{min-height:calc(100vh - 60px);display:grid;place-items:center;padding:48px 24px;position:relative;z-index:1}
.auth-card{
  width:100%;max-width:400px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border-2);
  border-radius:var(--r-xl);
  padding:40px 36px;
  backdrop-filter:blur(24px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 16px 64px rgba(0,0,0,0.6);
}
.auth-card h1{font-size:22px;margin:0 0 6px;letter-spacing:-0.02em}
.auth-card .muted{font-size:13.5px;margin-bottom:8px;-webkit-text-fill-color:var(--text-dim)}
.auth-foot{margin-top:20px;padding-top:18px;border-top:1px solid var(--glass-border);font-size:13px;color:var(--text-mute);text-align:center}
.auth-foot a{color:var(--silver-2)}

/* ── dashboard / admin layout ── */
.layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 60px)}
.sidebar{
  border-right:1px solid var(--glass-border);
  padding:24px 16px;
  background:rgba(5,5,7,0.6);
  backdrop-filter:blur(20px);
  position:sticky;top:60px;align-self:start;
  height:calc(100vh - 60px);overflow-y:auto;
}
.sidebar h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-mute);margin:18px 8px 6px;font-weight:600;background:none;-webkit-text-fill-color:var(--text-mute)}
.sidebar h4:first-child{margin-top:0}
.sidebar a{display:flex;align-items:center;gap:10px;padding:7px 10px;font-size:13.5px;color:var(--text-dim);border-radius:var(--r-sm);transition:all .12s;margin-bottom:1px}
.sidebar a:hover{color:var(--silver);background:var(--glass-bg-2)}
.sidebar a.active{color:var(--silver-bright);background:var(--glass-bg-2);border:1px solid var(--glass-border)}
.main{padding:32px 32px 64px;min-width:0}
.main h1{font-size:24px;letter-spacing:-0.02em;margin:0 0 4px}
.main .page-sub{color:var(--text-dim);margin-bottom:28px;font-size:14px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.page-head h1{margin:0 0 4px}

/* ── misc ── */
.divider{height:1px;background:var(--glass-border);margin:24px 0}
.kbd{display:inline-block;padding:2px 6px;font-family:var(--mono);font-size:11.5px;background:var(--glass-bg-2);border:1px solid var(--glass-border-2);border-radius:var(--r-xs);color:var(--silver-2);box-shadow:0 1px 0 var(--glass-border)}

/* ── dashboard / admin app shell ── */
body:has(.container.app) .nav{display:none}
.container.app{display:grid;grid-template-columns:240px 1fr;gap:0;padding:0;align-items:start;max-width:none;width:100%}
.container.app .sidebar{position:fixed;top:0;left:0;bottom:0;width:240px;padding:20px 16px;background:var(--bg-2);border-right:1px solid var(--glass-border);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:1px;backdrop-filter:none;z-index:50}
.container.app .sidebar .sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;margin-bottom:8px;border-bottom:1px solid var(--glass-border);font-weight:600;font-size:14px;color:var(--silver-bright);text-decoration:none}
.container.app .sidebar .sidebar-brand .brand-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--glass-bg-3);border:1px solid var(--glass-border-2);border-radius:var(--r-sm);font-family:var(--mono);font-weight:700;font-size:14px;color:var(--silver-bright)}
.container.app .sidebar .sidebar-section{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-mute);font-weight:600;margin:20px 8px 6px;background:none;-webkit-text-fill-color:var(--text-mute)}
.container.app .sidebar .sidebar-section:first-child{margin-top:0}
.container.app .sidebar a{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13.5px;color:var(--text-dim);border-radius:var(--r-sm);transition:all .12s;text-decoration:none;border:1px solid transparent}
.container.app .sidebar a:hover{color:var(--silver);background:var(--glass-bg-2);border-color:var(--glass-border)}
.container.app .sidebar a.active{color:var(--silver-bright);background:var(--glass-bg-2);border-color:var(--glass-border-2)}
.container.app .main{padding:32px 40px 64px;min-width:0;margin-left:240px;grid-column:1/-1}
.container.app .main h1{font-size:28px;letter-spacing:-0.03em;margin:0 0 6px;font-weight:700;background:linear-gradient(150deg,#fff 0%,#d8dae8 35%,#a0a3b5 70%,#c8cad8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.container.app .main > p:first-of-type,.container.app .main .page-sub{color:var(--text-dim);font-size:14px;margin-bottom:24px}

/* ── glass-card (dashboard) ── */
.glass-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  padding:24px;
  backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 4px 24px rgba(0,0,0,0.3);
  transition:border-color .2s,box-shadow .2s;
}
.glass-card:hover{border-color:var(--glass-border-2);box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 8px 32px rgba(0,0,0,0.4)}

/* ── stats / grids ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* ── copy row ── */
.copy-row{
  display:flex;align-items:center;gap:8px;
  padding:10px 10px 10px 16px;
  background:var(--glass-bg-2);
  border:1px solid var(--glass-border);
  border-radius:var(--r-sm);
  font-family:var(--mono);font-size:13px;
  backdrop-filter:blur(8px);
}
.copy-row code{flex:1;color:var(--silver);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent;border:0;padding:0}
.copy-row button{height:28px;padding:0 12px;background:transparent;border:1px solid var(--glass-border-2);color:var(--silver-2);font-size:12px;border-radius:var(--r-xs);cursor:pointer;font-family:var(--sans);font-weight:500;transition:all .15s;backdrop-filter:blur(4px)}
.copy-row button:hover{background:var(--glass-bg-3);color:var(--silver-bright);border-color:var(--glass-border-3)}

/* ── empty state ── */
.empty{text-align:center;padding:40px 24px;color:var(--text-dim)}
.empty p{margin:0;color:var(--text-dim)}

/* ── pager ── */
.pager{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--glass-border);font-size:13px}
.pager .info{flex:1;color:var(--text-mute);font-size:12.5px}

/* ── admin chart ── */
.admin-chart{display:flex;align-items:flex-end;gap:3px;height:180px;padding:8px 4px;border:1px solid var(--glass-border);border-radius:var(--r-sm);background:var(--glass-bg);backdrop-filter:blur(8px)}
.admin-chart .bar{flex:1;min-width:4px;background:rgba(255,255,255,0.08);border-radius:2px 2px 0 0;transition:background .15s}
.admin-chart .bar:hover{background:rgba(200,202,216,0.25)}

/* ── page-head ── */
.page-head{margin-bottom:24px}
.page-head h1{margin-bottom:4px}
.page-head p{margin:0;color:var(--text-dim);font-size:14px}

/* ── CSS variables aliases (legacy compat) ── */
:root{
  --border:var(--glass-border);
  --border-strong:var(--glass-border-2);
  --green:var(--ok);
  --bg-2:var(--bg-2);
  --bg-3:var(--bg-3);
  --bg-hover:var(--bg-hover);
  --line:rgba(255,255,255,0.07);
  --line-2:rgba(255,255,255,0.11);
  --line-3:rgba(255,255,255,0.18);
  --text-dim:#9898a8;
  --text-mute:#5c5c70;
}

/* ── responsive ── */
@media (max-width:900px){
  .nav-links{display:none}
  .hero-new{padding:90px 0 64px}
  .hero-new-title{font-size:44px}
  .hero-new-desc{font-size:16px}
  .features-grid{grid-template-columns:1fr}
  .pricing-grid-new,.pricing-grid{grid-template-columns:1fr}
  .features-strip-grid{flex-direction:column;align-items:stretch;gap:14px}
  .feature-strip-divider{display:none}
  .docs{grid-template-columns:1fr;gap:0;padding:0}
  .docs-side{position:static;width:100%;flex-direction:row;flex-wrap:wrap;gap:6px;border-right:0;border-bottom:1px solid var(--glass-border);padding:14px 18px;overflow:visible}
  .docs-side h4{display:none}
  .docs-content{margin-left:0;padding:24px 18px 64px}
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--glass-border);display:flex;flex-wrap:wrap;gap:4px;padding:14px 18px}
  .sidebar h4{display:none}
  .sidebar a{padding:6px 10px}
  .main{padding:24px 18px 48px}
  .section-header-new h2,.footer-cta h2{font-size:30px}
  .how-section,.features-section,.pricing-section,.footer-cta{padding:72px 0}
  h1{font-size:28px}
  h2{font-size:22px}
  .container.app{grid-template-columns:1fr;gap:0;padding:0}
  .container.app .sidebar{position:static;width:100%;flex-direction:row;flex-wrap:wrap;gap:4px;padding:14px 18px;border-right:0;border-bottom:1px solid var(--glass-border);margin-bottom:0;overflow:visible}
  .container.app .sidebar .sidebar-brand{display:none}
  .brand-logo{height:20px}
  .container.app .sidebar .sidebar-section{display:none}
  .container.app .sidebar a{padding:6px 10px;font-size:13px}
  .container.app .main{margin-left:0;padding:24px 18px 48px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .hero-labs-logos{gap:20px}
}
@media (max-width:600px){
  .container{padding:0 18px}
  .hero-new-title{font-size:36px}
  .hero-new-actions .btn{flex:1}
  .hero-new-api-box{flex-direction:column;align-items:stretch;padding:12px}
  .hero-new-api-box code{text-align:center;padding:4px 0}
  .hero-new-api-box button{width:100%}
  .brand-logo{height:18px}
  .nav-cta .btn:not(.btn-primary){display:none}
  .stats{grid-template-columns:1fr}
  .hero-labs-logos{gap:16px}
  .hero-new-title{font-size:32px;letter-spacing:-0.03em}
}

/* ============================================================
   USE CASES SECTION — split layout
   ============================================================ */
.usecases-section{padding:104px 0;border-bottom:1px solid var(--glass-border)}
.usecases-layout{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:80px;
  align-items:start;
}
.usecases-left{
  position:sticky;top:100px;
  display:flex;flex-direction:column;gap:20px;
}
.usecases-overline{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--silver-2);
}
.usecases-title{
  margin:0;font-size:36px;letter-spacing:-0.03em;line-height:1.15;
}
.usecases-body{
  margin:0;font-size:15px;color:var(--text-dim);line-height:1.7;font-weight:300;
}
.usecases-right{
  display:flex;flex-direction:column;
  border-top:1px solid var(--glass-border);
}
.usecase-row{
  display:flex;gap:24px;
  padding:28px 0;
  border-bottom:1px solid var(--glass-border);
  transition:background .2s;
}
.usecase-row-num{
  font-size:12px;font-weight:600;font-family:var(--mono);
  color:var(--text-mute);
  min-width:24px;
  padding-top:3px;
}
.usecase-row-content{display:flex;flex-direction:column;gap:6px}
.usecase-row-title{font-size:17px;font-weight:600;letter-spacing:-0.01em;color:var(--silver)}
.usecase-row-desc{font-size:14px;color:var(--text-dim);line-height:1.7;font-weight:300}

/* ============================================================
   MODEL BROWSER PREVIEW SECTION
   ============================================================ */
.models-preview-section{padding:104px 0;border-bottom:1px solid var(--glass-border)}
.models-preview-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.model-preview-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--r);
  padding:18px 20px;
  backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  transition:border-color .2s,background .2s;
  display:flex;flex-direction:column;gap:8px;
}
.model-preview-card:hover{background:var(--glass-bg-2);border-color:var(--glass-border-2)}
.model-preview-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.model-preview-id{
  font-family:var(--mono);font-size:12.5px;
  color:var(--silver);
  line-height:1.4;
  word-break:break-all;
  flex:1;
}
.model-preview-free{
  font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  padding:2px 7px;
  border:1px solid rgba(74,222,128,0.3);
  border-radius:999px;
  color:var(--ok);
  background:rgba(74,222,128,0.07);
  flex-shrink:0;
  white-space:nowrap;
}
.model-preview-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.model-preview-ctx{
  font-size:11px;color:var(--text-mute);
  padding:2px 7px;
  background:var(--glass-bg-2);
  border:1px solid var(--glass-border);
  border-radius:999px;
  font-family:var(--mono);
}
.model-preview-lab{font-size:11px;color:var(--text-mute);font-family:var(--mono)}
.model-preview-more{
  align-items:center;justify-content:center;
  text-align:center;
  border-style:dashed;
  border-color:var(--glass-border-2);
  background:transparent;
}
.model-preview-more-num{font-size:28px;font-weight:700;background:var(--silver-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.model-preview-more-label{font-size:12px;color:var(--text-mute)}

/* ============================================================
   COMPARISON TABLE SECTION
   ============================================================ */
.compare-section{padding:104px 0;border-bottom:1px solid var(--glass-border)}
.compare-wrap{
  max-width:820px;margin:0 auto;
  border:1px solid var(--glass-border-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 8px 40px rgba(0,0,0,0.4);
}
.compare-table{width:100%;border-collapse:collapse;font-size:14px}
.compare-table th,.compare-table td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--glass-border);vertical-align:middle}
.compare-table tbody tr:last-child td{border-bottom:0}
.compare-table thead tr{background:rgba(255,255,255,0.03)}
.compare-table thead th{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--silver-2);background:none;-webkit-text-fill-color:var(--silver-2)}
.compare-table tbody tr{background:var(--glass-bg);transition:background .15s}
.compare-table tbody tr:hover{background:var(--glass-bg-2)}
.compare-table td:first-child{color:var(--text-dim);font-size:13.5px}
th.compare-us,td.compare-us{background:rgba(200,202,216,0.04)}
th.compare-them{color:var(--text-mute) !important;-webkit-text-fill-color:var(--text-mute) !important}
th.compare-us{color:var(--silver-bright) !important;-webkit-text-fill-color:var(--silver-bright) !important}
.compare-good{color:var(--ok);font-weight:500;font-size:13.5px}
.compare-bad{color:var(--text-mute);font-size:13.5px}

/* ============================================================
   TRUST STRIP SECTION
   ============================================================ */
.trust-section{padding:56px 0;border-bottom:1px solid var(--glass-border)}
.trust-grid{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.trust-item{display:flex;align-items:flex-start;gap:14px;flex:1;min-width:200px}
.trust-icon{
  width:40px;height:40px;flex-shrink:0;
  border:1px solid var(--glass-border-2);
  border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:var(--glass-bg-2);
  color:var(--silver-2);
  backdrop-filter:blur(8px);
}
.trust-label{font-size:13.5px;font-weight:600;color:var(--silver);margin-bottom:3px}
.trust-sub{font-size:12.5px;color:var(--text-mute);line-height:1.5}
.trust-sub a{color:var(--silver-2);text-decoration:none}
.trust-sub a:hover{color:var(--silver)}
.trust-divider{width:1px;height:48px;background:var(--glass-border);flex-shrink:0}

/* ── responsive for new sections ── */
@media(max-width:900px){
  .usecases-section,.models-preview-section,.compare-section{padding:72px 0}
  .usecases-layout{grid-template-columns:1fr;gap:40px}
  .usecases-left{position:static}
  .models-preview-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{flex-direction:column;gap:20px}
  .trust-divider{width:100%;height:1px}
}
@media(max-width:600px){
  .models-preview-grid{grid-template-columns:1fr}
  .compare-table th,.compare-table td{padding:10px 14px;font-size:12.5px}
}

/* ── integration tabs (docs) ── */
.itab-nav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:0;border-bottom:1px solid var(--glass-border);padding-bottom:0}
.itab-btn{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 14px;font-size:13px;color:var(--text-mute);font-family:var(--sans);cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap}
.itab-btn:hover{color:var(--silver-2)}
.itab-btn.active{color:var(--silver-bright);border-bottom-color:var(--silver-bright)}
.itab-panel{display:none;padding-top:24px}
.itab-panel.active{display:block}
.itab-panel h3{font-size:17px;margin:0 0 10px}
.itab-panel p{font-size:14px;line-height:1.7;color:var(--text-dim)}
.itab-panel ol{font-size:14px;line-height:1.85;color:var(--text-dim)}
.itab-panel pre.code{margin:14px 0}
@media(max-width:600px){
  .itab-nav{gap:2px}
  .itab-btn{padding:7px 10px;font-size:12px}
}