/* Rudr AI — site stylesheet
   Instrument-grade dark UI. Blue/red = event polarity. */

:root{
  --bg:#08090B; --bg2:#0E1013; --surface:#14171A; --surface2:#1A1E22;
  --hero:#06070A;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --text:#E9EBEE; --read:rgba(233,235,238,.84); --dim:#9BA1A8; --faint:#5B626A;
  --pos:#4D8CFF; --neg:#FF5B57;
  --disp:'Space Grotesk',sans-serif;
  --body:'Archivo',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1200px;
}
:root[data-theme="light"]{
  --bg:#F3F4F1; --bg2:#EAECE7; --surface:#FFFFFF; --surface2:#F7F8F5;
  --line:rgba(12,14,16,.10); --line2:rgba(12,14,16,.20);
  --text:#14171A; --read:#26292D; --dim:#565C63; --faint:#8A9098;
  --pos:#1E63E6; --neg:#DE352F;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;}
::selection{background:var(--pos); color:#fff;}
img,svg,canvas{display:block; max-width:100%;}
h1,h2,h3{text-wrap:balance;}
p{text-wrap:pretty;}

.container{max-width:var(--maxw); margin:0 auto; padding-left:32px; padding-right:32px;}
.section{padding:96px 0; border-bottom:1px solid var(--line);}
.section-tight{padding:0; border-bottom:1px solid var(--line);}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--pos); margin:0 0 16px;}
.eyebrow.neg{color:var(--neg);}
.h2{font-family:var(--disp); font-weight:600; font-size:clamp(28px,3.7vw,46px); letter-spacing:-.015em; line-height:1.03; margin:0 0 14px;}
.section-lede{color:var(--dim); font-size:17px; margin:0 0 44px; max-width:62ch;}

@keyframes rudrblink{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text);}
.brand-name{font-family:var(--disp); font-weight:700; font-size:19px; letter-spacing:.14em;}
.brand-sub{font-family:var(--mono); font-size:10px; color:var(--faint); letter-spacing:.18em; border-left:1px solid var(--line2); padding-left:12px;}
.site-nav{display:flex; align-items:center; gap:26px; font-family:var(--mono); font-size:12px; letter-spacing:.04em;}
.site-nav a{color:var(--dim); text-decoration:none; transition:color .15s;}
.site-nav a:hover{color:var(--text);}
.site-nav a[aria-current="page"]{color:var(--text);}
.status{display:inline-flex; align-items:center; gap:7px; color:var(--faint); font-family:var(--mono); font-size:12px;}
.status .dot{width:6px; height:6px; border-radius:50%; background:var(--pos); animation:rudrblink 1.6s infinite;}
.theme-toggle{background:transparent; border:1px solid var(--line2); color:var(--dim); font-family:var(--mono); font-size:11px; padding:6px 10px; border-radius:3px; cursor:pointer; letter-spacing:.06em;}
.theme-toggle:hover{color:var(--text);}

/* ---------- Glyph ---------- */
.glyph{display:grid; grid-template-columns:repeat(4,var(--gs,4px)); grid-auto-rows:var(--gs,4px); gap:var(--gg,3px);}
.glyph span{width:var(--gs,4px); height:var(--gs,4px); background:var(--faint); opacity:.32; border-radius:1px;}
.glyph span.on{background:var(--pos); opacity:1; box-shadow:0 0 6px var(--pos);}
.glyph span.off{background:var(--neg); opacity:1; box-shadow:0 0 6px var(--neg);}
.glyph.lg{--gs:20px; --gg:10px;}
.glyph.lg span{border-radius:3px;}
.glyph.lg span.on{box-shadow:0 0 18px var(--pos);}
.glyph.lg span.off{box-shadow:0 0 18px var(--neg);}
.glyph.md{--gs:7px; --gg:4px;}
.glyph.md span{border-radius:1px;}
.glyph.md span.on{box-shadow:0 0 8px var(--pos);}
.glyph.md span.off{box-shadow:0 0 8px var(--neg);}

/* ---------- Buttons ---------- */
.btn{display:inline-block; font-family:var(--mono); font-size:13px; letter-spacing:.03em; padding:12px 22px; border-radius:3px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .12s, background .15s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--pos); color:#fff; border-color:var(--pos);}
.btn-primary:hover{background:color-mix(in srgb,var(--pos) 88%, #fff);}
.btn-outline{background:transparent; color:var(--text); border-color:var(--line2);}
.btn-outline:hover{border-color:var(--text);}
.btn-sm{padding:9px 16px; font-size:12px;}
.cta-row{display:flex; gap:12px; flex-wrap:wrap;}

/* ---------- Tags ---------- */
.tag{font-family:var(--mono); font-size:11px; letter-spacing:.08em; padding:6px 11px; border-radius:2px; border:1px solid var(--line2); color:var(--dim); display:inline-block;}
.tag.pos{background:color-mix(in srgb,var(--pos) 16%,transparent); color:var(--pos); border-color:color-mix(in srgb,var(--pos) 40%,transparent);}
.tag.neg{background:color-mix(in srgb,var(--neg) 16%,transparent); color:var(--neg); border-color:color-mix(in srgb,var(--neg) 40%,transparent);}
.badge{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--dim); border:1px solid var(--line2); border-radius:2px; padding:6px 12px;}
.badge .dot{width:6px; height:6px; border-radius:50%; background:var(--pos); animation:rudrblink 1.6s infinite;}

/* ---------- Hero (always dark, hosts event stream) ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--hero);}
.hero .eventbg{position:absolute; inset:0; z-index:0;}
.hero .overlay{position:absolute; inset:0; z-index:1;}
.hero .hero-inner{position:relative; z-index:2;}
.display{font-family:var(--disp); font-weight:600; letter-spacing:-.025em; line-height:.95; margin:0 0 22px; color:#E9EBEE;}
.lede{font-size:20px; color:#9BA1A8; margin:0 0 34px;}

/* ---------- Stat band ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); background:var(--bg2);}
.stat{padding:36px 32px; border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
.stat-num{font-family:var(--disp); font-weight:600; font-size:clamp(30px,3.2vw,42px); line-height:1;}
.stat-num small{font-size:.5em; color:var(--dim); font-weight:400;}
.stat-label{font-family:var(--mono); font-size:12px; color:var(--dim); margin-top:8px;}

/* ---------- Cards / grids ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:32px;}
.card h3{font-family:var(--disp); font-weight:500; font-size:20px; margin:0 0 10px;}
.card p{color:var(--dim); font-size:15px; margin:0;}
.num-tag{font-family:var(--mono); font-size:12px; color:var(--pos);}
.num-tag.neg{color:var(--neg);}

/* module cards (what we build) */
.mod{display:flex; gap:18px; align-items:flex-start;}
.mod .idx{font-family:var(--mono); font-size:12px; color:var(--pos); margin-top:3px;}

/* stack cards */
.stack-card{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:40px;}
.stack-card .bar{position:absolute; top:0; left:0; right:0; height:3px;}
.stack-card h3{font-family:var(--disp); font-weight:600; font-size:28px; margin:0 0 14px;}
.stack-card p{color:var(--dim); font-size:15px; margin:0 0 24px;}
.code{font-family:var(--mono); font-size:13px; background:var(--hero); border:1px solid var(--line); border-radius:4px; padding:16px; color:var(--dim); overflow-x:auto;}
.code .b{color:var(--pos);} .code .r{color:var(--neg);} .code .t{color:var(--text);} .code .c{color:var(--faint);}

/* roadmap rows */
.rows{display:grid; gap:2px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.row{background:var(--surface); padding:28px 32px; display:grid; grid-template-columns:64px 1fr auto; gap:24px; align-items:center;}
.row .when{font-family:var(--mono); font-size:12px;}
.row .when.now{color:var(--pos);} .row .when.later{color:var(--faint);}
.row .title{font-family:var(--disp); font-weight:500; font-size:20px;}
.row .desc{color:var(--dim); font-size:14px; margin-top:4px;}

/* metric stat card (design system) */
.metric{background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:26px;}
.metric .lab{font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.12em; margin-bottom:14px;}
.metric .val{font-family:var(--disp); font-weight:600; font-size:34px; line-height:1;}
.metric .val small{font-size:.5em; color:var(--dim); font-weight:400;}
.metric .note{font-family:var(--mono); font-size:11px; margin-top:10px;}

/* swatches */
.swatch{border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.swatch .chip{height:82px;}
.swatch .meta{padding:12px; background:var(--surface); font-family:var(--mono); font-size:11px;}
.swatch .meta .hex{color:var(--dim);}

/* type specimen */
.spec-grid{border-top:1px solid var(--line);}
.spec-row{display:grid; grid-template-columns:130px 1fr; border-bottom:1px solid var(--line);}
.spec-row .k{padding:22px 0; font-family:var(--mono); font-size:11px; color:var(--faint);}
.spec-row .v{padding:22px 0;}

/* ---------- Callouts + prose (article) ---------- */
.callout{background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:24px 26px; margin:0 0 24px;}
.callout.pos{border-left:2px solid var(--pos);}
.callout.neg{border-left:2px solid var(--neg);}
.callout .k{font-family:var(--mono); font-size:11px; letter-spacing:.14em; margin-bottom:12px;}
.callout.pos .k{color:var(--pos);} .callout.neg .k{color:var(--neg);}
.callout .mono{font-family:var(--mono); font-size:16px; color:var(--text); margin-bottom:10px;}
.callout .txt{font-size:14px; color:var(--dim);}

.pullquote{border-left:3px solid var(--pos); padding:4px 0 4px 24px; margin:32px 0;}
.pullquote p{font-family:var(--disp); font-weight:500; font-size:23px; line-height:1.35; color:var(--text); margin:0;}

.article{max-width:680px; margin:0 auto; padding:64px 32px 40px;}
.article-header{max-width:760px; margin:0 auto; padding:88px 32px 56px; position:relative; z-index:2;}
.prose p{font-size:19px; line-height:1.72; color:var(--read); margin:0 0 22px;}
.prose p.lead{font-size:21px; color:var(--text);}
.prose strong{color:var(--text); font-weight:600;}
.prose h2{font-family:var(--disp); font-weight:600; font-size:clamp(26px,3vw,34px); letter-spacing:-.01em; color:var(--text); margin:56px 0 20px; scroll-margin-top:80px;}

/* ---------- Footer ---------- */
.site-footer{padding:56px 32px; max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.site-footer .fnote{font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.14em;}
.site-footer nav{display:flex; gap:24px; font-family:var(--mono); font-size:12px;}
.site-footer nav a{color:var(--dim); text-decoration:none;}
.site-footer nav a:hover{color:var(--text);}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grid-2,.grid-3,.stats,.split{grid-template-columns:1fr !important;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .stat{border-right:none; border-bottom:1px solid var(--line);}
  .brand-sub{display:none;}
  .section{padding:64px 0;}
}
@media (max-width:640px){
  .container{padding-left:20px; padding-right:20px;}
  .site-header{padding:0 20px;}
  .site-nav{gap:16px;}
  .row{grid-template-columns:1fr; gap:8px;}
}
.split{display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:start;}
.sticky{position:sticky; top:100px;}