/* ============================================================
   routsi — shared theme (landing + docs)
   colour = emotion:  violet = intelligence/trust · cyan = speed
   amber→coral = action (CTAs).  Dark default, full light theme.
   ============================================================ */
:root{
  --ink:#0b0b14; --ink-2:#12121f; --panel:#161627; --panel-2:#1c1c30;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
  --fg:#ececf4; --fg-dim:#a9a9c2; --fg-mute:#7a7a95;
  --violet:#8b7bff; --violet-deep:#6c5ce7; --violet-glow:rgba(124,108,231,.5);
  --cyan:#3fe0d0; --cyan-deep:#18b6c9;
  --amber:#ff9a55; --coral:#ff6b6b;
  --grad:linear-gradient(120deg,#8b7bff 0%,#6c5ce7 45%,#18b6c9 100%);
  --grad-warm:linear-gradient(120deg,#ff9a55,#ff6b6b);
  --radius:16px; --radius-sm:10px; --maxw:1120px;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Space Grotesk',var(--sans);
  --ok:#7ee787;
}
:root[data-theme="light"]{
  --ink:#f7f7fb; --ink-2:#ffffff; --panel:#ffffff; --panel-2:#f2f2f8;
  --line:rgba(20,20,45,.10); --line-2:rgba(20,20,45,.16);
  --fg:#191927; --fg-dim:#4a4a63; --fg-mute:#6f6f88;
  --violet:#6c5ce7; --violet-deep:#5b4bd6; --violet-glow:rgba(108,92,231,.28);
  --cyan:#0e9fb0; --cyan-deep:#0b8494; --ok:#1a8f3c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.02em;margin:0}
p{margin:0}
code,pre,kbd{font-family:var(--mono)}
em{color:var(--fg)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ambient glow */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg::before,.bg::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.bg::before{width:600px;height:600px;background:var(--violet-deep);top:-180px;left:-120px}
.bg::after{width:520px;height:520px;background:var(--cyan-deep);top:240px;right:-160px;opacity:.35}
:root[data-theme="light"] .bg::before{opacity:.16}
:root[data-theme="light"] .bg::after{opacity:.12}

/* nav */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--ink) 72%,transparent);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:24px;height:64px;max-width:1200px}
.brand{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.03em;display:flex;align-items:center;gap:9px}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--grad);box-shadow:0 0 14px var(--violet-glow)}
.nav-links{display:flex;gap:24px;margin-left:auto;align-items:center;font-size:15px;color:var(--fg-dim);font-weight:500}
.nav-links a:hover{color:var(--fg)}
.themebtn{background:none;border:1px solid var(--line-2);color:var(--fg-dim);width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:15px;display:grid;place-items:center}
.themebtn:hover{color:var(--fg);border-color:var(--violet)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:11px;font-weight:600;font-size:15px;font-family:var(--sans);cursor:pointer;border:1px solid transparent;transition:transform .12s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--grad-warm);color:#1a0f0a;box-shadow:0 8px 24px rgba(255,107,107,.28)}
.btn-ghost{border-color:var(--line-2);color:var(--fg)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet)}
@media(max-width:820px){.nav-links a:not(.nav-cta){display:none}}

/* buttons row */
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* section shell */
section{padding:80px 0;scroll-margin-top:80px}
header{scroll-margin-top:80px}
.sec-head{max-width:660px;margin-bottom:40px}
.sec-head .kicker{color:var(--violet);font-weight:600;font-size:13.5px;text-transform:uppercase;letter-spacing:.07em}
.sec-head h2{font-size:clamp(27px,3.5vw,38px);margin:12px 0 12px}
.sec-head p{color:var(--fg-dim);font-size:17.5px}

/* eyebrow / pill */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--cyan);border:1px solid var(--line-2);padding:6px 13px;border-radius:100px;margin-bottom:20px;text-transform:uppercase}
.eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* hero */
header.hero-wrap{padding:72px 0 40px}
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:34px}}
h1.big{font-size:clamp(37px,5.4vw,60px);font-weight:700}
.hero p.lede{color:var(--fg-dim);font-size:19px;margin:20px 0 28px;max-width:34ch}
.trust{display:flex;gap:18px;margin-top:26px;flex-wrap:wrap;font-size:14px;color:var(--fg-mute)}
.trust b{color:var(--fg);font-weight:600}

/* terminal (typed) */
.term{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.38);overflow:hidden;font-family:var(--mono);font-size:13px}
:root[data-theme="light"] .term{box-shadow:0 18px 46px rgba(60,50,120,.14)}
.term-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.term-bar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.tb-r{background:#ff5f57}.tb-y{background:#febc2e}.tb-g{background:#28c840}
.term-bar span{margin-left:9px;color:var(--fg-mute);font-size:12px}
.term-body{padding:16px 16px 20px;line-height:1.72}
.term.mini .term-body{min-height:184px}
#hero-term .term-body{min-height:300px}
.term-body .l{white-space:pre-wrap;word-break:break-word}
.prompt{color:var(--cyan)}
.hdr{color:var(--fg-mute)}
.str{color:var(--amber)}
.pick{color:var(--ok);font-weight:700}
.warn{color:var(--coral);font-weight:600}
.stream{color:var(--fg)}
.cursor{display:inline-block;width:7px;height:15px;background:var(--cyan);vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* demo grid */
.demos{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){.demos{grid-template-columns:1fr}}
.demo-cap{display:flex;align-items:center;gap:9px;margin-bottom:11px;font-weight:600;font-size:15.5px}
.demo-cap .em{font-size:18px}
.demo-cap small{color:var(--fg-mute);font-weight:500;font-size:13px}

/* answerer chips */
.chips{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;border:1px solid var(--line-2);
  background:var(--panel);font-size:14.5px;font-weight:500}
.chip b{font-weight:700}
.chip .ci{color:var(--cyan)}

/* comparison table */
.cmp-scroll{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line)}
table.cmp{width:100%;border-collapse:collapse;min-width:680px;font-size:14.5px;background:var(--panel)}
table.cmp th,table.cmp td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.cmp thead th{font-family:var(--display);font-size:14px;font-weight:600;color:var(--fg-mute);background:var(--panel-2)}
table.cmp thead th.hl{color:var(--fg)}
table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp td:first-child{color:var(--fg-dim);font-weight:500}
table.cmp td.c{text-align:center;font-size:16px}
table.cmp col.hl,table.cmp th.hl,table.cmp td.hl{background:color-mix(in srgb,var(--violet-deep) 14%,var(--panel))}
.yes{color:var(--ok);font-weight:700}.no{color:var(--fg-mute)}.mid{color:var(--amber);font-weight:700}
.cmp-note{color:var(--fg-mute);font-size:13.5px;margin-top:12px}

/* who it's for */
.aud{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:760px){.aud{grid-template-columns:1fr}}
.aud .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:border-color .2s,transform .2s}
.aud .card:hover{border-color:var(--violet);transform:translateY(-3px)}
.aud .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:21px;margin-bottom:14px;
  background:color-mix(in srgb,var(--violet) 16%,transparent);border:1px solid var(--line-2)}
.aud h3{font-size:18px;margin-bottom:8px}
.aud p{color:var(--fg-dim);font-size:14.5px;line-height:1.55}
.aud .tag{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--cyan);font-family:var(--mono)}

/* generic code block */
.code{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  font-family:var(--mono);font-size:13.5px;line-height:1.7;overflow:hidden}
.code .top{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);color:var(--fg-mute);font-size:12px}
.code pre{margin:0;padding:15px 17px;overflow-x:auto;white-space:pre}
.copy{background:none;border:1px solid var(--line-2);color:var(--fg-dim);border-radius:7px;padding:3px 10px;font-family:var(--sans);font-size:12px;cursor:pointer}
.copy:hover{color:var(--fg);border-color:var(--violet)}

/* live dashboard shot */
.shot{margin:0;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;
  background:var(--panel);box-shadow:0 26px 70px rgba(0,0,0,.42)}
:root[data-theme="light"] .shot{box-shadow:0 20px 54px rgba(60,50,120,.15)}
.shot img{display:block;width:100%;height:auto}

/* CTA band */
.band{text-align:center;background:var(--grad);border-radius:26px;padding:52px 26px;color:#fff;position:relative;overflow:hidden}
.band h2{font-size:clamp(26px,3.8vw,40px);color:#fff}
.band p{color:rgba(255,255,255,.92);font-size:17.5px;margin:13px 0 24px}
.band .btn-primary{background:#0b0b14;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.band .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.band .cta-row{justify-content:center}

footer{border-top:1px solid var(--line);padding:34px 0;color:var(--fg-mute);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer a{color:var(--fg-dim)}footer a:hover{color:var(--fg)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============ DOCS layout ============ */
.docshell{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:248px 1fr;gap:52px;padding:44px 32px 96px}
@media(max-width:900px){.docshell{grid-template-columns:1fr;gap:20px}}
.sidebar{position:sticky;top:84px;align-self:start;font-size:14.5px;max-height:calc(100vh - 100px);overflow:auto}
@media(max-width:900px){.sidebar{position:static;max-height:none;border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--panel)}}
.sidebar .grp{margin-bottom:20px}
.sidebar .grp h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-mute);margin-bottom:9px}
.sidebar a{display:block;padding:5px 10px;border-radius:8px;color:var(--fg-dim);margin-left:-10px}
.sidebar a:hover{color:var(--fg);background:var(--panel)}
.sidebar a.active{color:var(--violet);background:color-mix(in srgb,var(--violet) 12%,transparent);font-weight:600}
.sidebar .sub{margin-left:8px;border-left:1px solid var(--line);padding-left:2px}
.sidebar .sub a{padding-left:14px;font-size:13.5px}
.doc-main{min-width:0;max-width:820px}
.doc-main h1{font-size:clamp(30px,4vw,42px);margin-bottom:14px}
.doc-main h2{font-size:26px;margin:46px 0 14px;padding-top:8px;scroll-margin-top:80px;border-top:1px solid var(--line);padding-top:32px}
.doc-main h2:first-of-type{border-top:none;padding-top:8px}
.doc-main h3{font-size:18px;margin:26px 0 10px}
.doc-main p,.doc-main li{color:var(--fg-dim);font-size:16px;line-height:1.7}
.doc-main ul,.doc-main ol{padding-left:22px}
.doc-main li{margin:6px 0}
.doc-main strong{color:var(--fg);font-weight:600}
.doc-main a.link{color:var(--violet);border-bottom:1px solid color-mix(in srgb,var(--violet) 40%,transparent)}
.doc-main .lede{font-size:18.5px;color:var(--fg-dim);margin-bottom:8px}
.doc-main code:not(pre code){background:var(--panel-2);border:1px solid var(--line);padding:1px 6px;border-radius:6px;font-size:14px;color:var(--cyan)}
.doc-main .code{margin:16px 0}
.callout{border:1px solid var(--line-2);border-left:3px solid var(--violet);background:var(--panel);border-radius:10px;padding:14px 18px;margin:18px 0;font-size:15px;color:var(--fg-dim)}
.callout.warn{border-left-color:var(--coral)}
.callout b{color:var(--fg)}