
:root{
  --bg:#07101d;--panel:#0d1828;--panel2:#101e31;--line:#20314a;--text:#eef5ff;
  --muted:#9fb0c5;--blue:#58a6ff;--cyan:#56d4dd;--green:#48d597;--amber:#ffbf5b;
  --shadow:0 20px 60px rgba(0,0,0,.28)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 8% 0%,#112747 0,transparent 34%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit}
.shell{width:min(1460px,94vw);margin:0 auto}
.hero{display:grid;grid-template-columns:1.35fr .65fr;gap:32px;padding:72px 0 42px;align-items:center}
.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--cyan);font-weight:800}
h1{font-size:clamp(52px,7vw,96px);line-height:.92;margin:18px 0 10px;letter-spacing:-.055em}
.subtitle{font-size:clamp(22px,2.3vw,36px);font-weight:720;margin:0 0 20px;color:#cfe3ff}
.lede{font-size:18px;line-height:1.65;color:var(--muted);max-width:850px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{border:1px solid var(--line);border-radius:12px;padding:13px 18px;font-weight:800;background:#13253b;color:white;text-decoration:none;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,#1679ff,#44b9db);border:0}
.btn.secondary{background:transparent}
.disclaimer{font-size:12px;color:#778ba6;margin-top:18px}
.score-panel{background:linear-gradient(180deg,rgba(17,34,55,.94),rgba(9,20,35,.96));border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.score-title{text-transform:uppercase;letter-spacing:.12em;color:#91a9c5;font-weight:800;font-size:12px;margin-bottom:18px}
.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.score{background:#0a1524;border:1px solid #20324a;border-radius:14px;padding:18px}
.score strong{font-size:32px;color:var(--green);display:block}
.score span{font-size:12px;color:var(--muted);line-height:1.4}
.freeze{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(72,213,151,.09);color:#8aebbe;border:1px solid rgba(72,213,151,.25);font-weight:800;font-size:13px}
.tabs{position:sticky;top:0;z-index:20;display:flex;gap:4px;padding:10px;background:rgba(7,16,29,.91);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:15px;margin-bottom:28px;overflow:auto}
.tab,.query-tab{border:0;background:transparent;color:#9fb0c5;padding:11px 16px;border-radius:10px;font-weight:800;cursor:pointer;white-space:nowrap}
.tab.active,.query-tab.active{background:#15365d;color:white}
main{padding-bottom:50px}
.panel{display:none;animation:fade .24s ease}
.panel.active{display:block}
@keyframes fade{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
.section-heading{display:flex;gap:18px;align-items:flex-start;margin:32px 0 22px}
.section-heading>span{color:var(--blue);font-weight:900;font-size:13px;border:1px solid #315172;padding:5px 8px;border-radius:8px}
.section-heading h2{font-size:34px;margin:0 0 5px;letter-spacing:-.03em}
.section-heading p{margin:0;color:var(--muted)}
.cards{display:grid;gap:16px}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:linear-gradient(180deg,#0d1a2c,#0a1524);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 10px 35px rgba(0,0,0,.14)}
.card h3{margin:8px 0 10px}
.card p,.card li{color:var(--muted);line-height:1.6}
.icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#15355b;color:#9ccaff;font-weight:900}
.split{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;margin-top:16px}
.data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.data-grid div{background:#091422;padding:16px;border-radius:12px;border:1px solid #1d2f47}
.data-grid b{display:block;font-size:24px;color:#cfe5ff}
.data-grid span{display:block;font-size:11px;color:#879bb5;margin-top:4px}
.ticker-list{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.ticker-list span{background:#14355e;border:1px solid #255184;border-radius:999px;padding:8px 12px;font-weight:900;font-size:12px}
.muted{color:var(--muted)}
.architecture{padding:28px;border:1px solid var(--line);border-radius:20px;background:#081321}
.node{background:#10213a;border:1px solid #29415f;border-radius:13px;padding:16px;text-align:center}
.node small{display:block;color:#94abc6;margin-top:6px}
.node.wide{max-width:700px;margin:0 auto}
.node.accent{border-color:#287fbb;background:linear-gradient(135deg,#123c69,#123047)}
.node.qwen{border-color:#7157b5;background:#241c47}
.arrow{text-align:center;color:#6baae8;font-size:24px;padding:5px}
.route-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.route-grid.verify{grid-template-columns:repeat(4,1fr)}
.callout{margin-top:18px;padding:18px 20px;border-radius:14px;background:#0d2138;border:1px solid #25486f;color:#c6d8ec;line-height:1.65}
.callout.warning{background:rgba(255,191,91,.07);border-color:rgba(255,191,91,.32)}
.metric-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}
table{width:100%;border-collapse:collapse;background:#0a1524}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid #1b2b40}
th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#879db8}
td{color:#c7d4e5}
td.good{color:#5ce0a5;font-weight:900}
td.warn{color:#ffc86f;font-weight:900}
.mini-metrics{margin-top:16px}
.mini-metrics b{display:block;font-size:34px;color:#d9ebff}
.mini-metrics span{display:block;color:#85bfff;font-weight:800}
.mini-metrics small{display:block;color:#8194ac;margin-top:9px;line-height:1.5}
.demo-box{border:1px solid var(--line);border-radius:20px;background:#081321;overflow:hidden}
.query-tabs{display:flex;gap:4px;padding:10px;border-bottom:1px solid var(--line)}
.query-view{display:none;padding:24px}
.query-view.active{display:block}
.question{font-size:24px;font-weight:850;letter-spacing:-.02em;margin-bottom:10px}
.route{color:#8fa6c0;margin-bottom:20px}
.answer{background:#0d1c30;border:1px solid #29415e;border-radius:16px;padding:20px}
.answer-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--green);font-weight:900}
.answer p{font-size:18px;line-height:1.6;color:#d5e3f3}
code{display:inline-block;background:#07101d;border:1px solid #263a53;border-radius:8px;padding:8px 10px;color:#8bdac7;white-space:normal}
.static-note{margin-top:16px;font-size:13px;color:#92a5bd;padding:14px 16px;border:1px dashed #30465f;border-radius:12px}
.footer-links{display:flex;gap:12px;margin:22px 0}
.footer-links a{padding:12px 15px;border-radius:10px;background:#102a48;text-decoration:none;font-weight:800}
footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:#71859f;padding:28px 0 45px;font-size:12px}
@media(max-width:1000px){
  .hero,.split{grid-template-columns:1fr}
  .cards.four,.cards.three{grid-template-columns:1fr 1fr}
  .route-grid{grid-template-columns:1fr 1fr}
  .data-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .shell{width:min(94vw,100%)}
  .hero{padding-top:42px}
  .cards.four,.cards.three,.route-grid,.route-grid.verify{grid-template-columns:1fr}
  .score-grid{grid-template-columns:1fr 1fr}
  h1{font-size:54px}
  footer{flex-direction:column}
}


/* Deployment scope */
.runtime-banner{
  display:flex;justify-content:space-between;gap:24px;align-items:center;
  padding:24px;margin-bottom:16px;border-radius:18px;
  background:linear-gradient(135deg,rgba(72,213,151,.10),rgba(88,166,255,.08));
  border:1px solid rgba(72,213,151,.30)
}
.runtime-banner h3{margin:7px 0 8px;font-size:24px}
.runtime-banner p{margin:0;color:var(--muted);line-height:1.65;max-width:900px}
.runtime-kicker{font-size:11px;font-weight:900;letter-spacing:.14em;color:#77e9b8}
.runtime-badge{
  min-width:150px;text-align:center;border:1px solid rgba(72,213,151,.35);
  background:#091c1a;color:#86eabf;border-radius:16px;padding:15px;font-size:11px;letter-spacing:.08em
}
.runtime-badge strong{font-size:20px;display:block;margin-top:3px}
.deployment-compare{grid-template-columns:1fr 1fr}
.deployment-title{display:flex;align-items:center;gap:10px}
.deployment-title h3{margin:0}
.status-dot{width:10px;height:10px;border-radius:999px;display:inline-block;box-shadow:0 0 16px currentColor}
.status-dot.live{background:#48d597;color:#48d597}
.status-dot.static{background:#58a6ff;color:#58a6ff}
.deployment-list{padding-left:20px;margin-bottom:0}
.deployment-list li{margin:9px 0}
.deployment-callout{border-color:rgba(88,166,255,.38);background:rgba(88,166,255,.08)}
.deployment-pipeline{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:16px
}
.pipeline-step{
  min-height:118px;border:1px solid var(--line);background:#091522;border-radius:14px;
  padding:14px;display:flex;flex-direction:column;justify-content:center
}
.pipeline-step>span{font-size:21px;margin-bottom:7px}
.pipeline-step b{font-size:13px}
.pipeline-step small{margin-top:5px;color:var(--muted)}
.pipeline-step.done>span{color:var(--green)}
.pipeline-step.infra{border-color:rgba(255,191,91,.35);background:rgba(255,191,91,.06)}
.pipeline-step.infra>span{color:var(--amber)}
.recruiter-note{
  margin-top:16px;padding:20px 22px;border-left:3px solid var(--cyan);
  background:#0a1828;border-radius:0 14px 14px 0
}
.recruiter-note span{display:block;color:var(--cyan);text-transform:uppercase;font-size:11px;font-weight:900;letter-spacing:.12em}
.recruiter-note p{color:#c8d7e8;line-height:1.65;margin:8px 0 0}
@media(max-width:1000px){
  .deployment-pipeline{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:620px){
  .runtime-banner{align-items:flex-start;flex-direction:column}
  .deployment-compare{grid-template-columns:1fr}
  .deployment-pipeline{grid-template-columns:1fr 1fr}
}
