/* qMachina design system — dark professional fintech. Vanilla CSS, no build. */
:root{
  --bg:#0b0d12; --bg2:#0f1218; --panel:#141823; --panel2:#191e2b;
  --ink:#e8ebf2; --mut:#8a93a6; --faint:#5c6577;
  --accent:#6fa8ff; --accent2:#9b7bff;
  --on:#33d17a; --off:#ff5d5d; --warm:#ffc94d;
  --line:#222838; --line2:#2c3346;
  --pos:#33d17a; --neg:#ff5d5d;
  --radius:12px; --radius-sm:8px;
  --maxw:1080px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.62 var(--sans); color:var(--ink);
  background:
    radial-gradient(1100px 520px at 50% -180px, rgba(111,168,255,.10), transparent 70%),
    radial-gradient(900px 500px at 90% -120px, rgba(155,123,255,.07), transparent 70%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
main{display:block}
em{font-style:normal; color:var(--ink)}
.hl{color:var(--accent)}

/* ---- nav ---- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--maxw); margin:0 auto; padding:14px 22px;
  background:rgba(11,13,18,.78); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.wordmark{
  font-weight:800; font-size:21px; letter-spacing:-.02em; color:var(--ink);
  font-family:var(--sans);
}
.wordmark span{color:var(--accent)}
.wordmark:hover{text-decoration:none}
.wordmark.small{font-size:18px}
.navlinks{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.navlinks a{color:var(--mut); font-size:14px; font-weight:500}
.navlinks a:hover{color:var(--ink); text-decoration:none}
.navcta{
  background:var(--accent); color:#07101f !important; font-weight:700;
  padding:7px 15px; border-radius:999px;
}
.navcta:hover{background:#8bb9ff}

/* ---- hero ---- */
.hero{padding:78px 22px 36px}
.badgerow{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px}
.chip{
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--accent); background:rgba(111,168,255,.10);
  border:1px solid rgba(111,168,255,.22); padding:5px 12px; border-radius:999px;
}
.chip-mut{color:var(--warm); background:rgba(255,201,77,.08); border-color:rgba(255,201,77,.22)}
h1{font-size:clamp(34px,6vw,58px); line-height:1.04; letter-spacing:-.025em; margin:0 0 18px; font-weight:800}
.lede{font-size:clamp(17px,2.2vw,21px); color:var(--mut); max-width:720px; margin:0 0 28px}
.ctarow{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.microcopy{color:var(--faint); font-size:13.5px}
.microcopy b{color:var(--mut)}

/* ---- buttons ---- */
.btn{
  display:inline-block; text-align:center; font-weight:700; font-size:15px;
  padding:12px 22px; border-radius:999px; cursor:pointer;
  background:var(--accent); color:#07101f; border:1px solid transparent;
}
.btn:hover{background:#8bb9ff; text-decoration:none}
.btn.ghost{background:transparent; color:var(--accent); border-color:var(--line2)}
.btn.ghost:hover{background:rgba(111,168,255,.08); color:var(--ink)}
.btn.full{display:block; width:100%}

/* ---- sections / headings ---- */
section{padding:30px 0}
.eyebrow{
  font-size:12.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--mut);
  font-weight:700; margin:0 0 20px; padding-bottom:0; border:0;
}
h2{font-size:26px; letter-spacing:-.01em; margin:0 0 16px; font-weight:700}
h3{font-size:17px; margin:0 0 8px; font-weight:700}

/* ---- story grid ---- */
.storygrid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.storycard{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line); border-radius:var(--radius); padding:22px;
}
.storycard p{color:var(--mut); font-size:14.5px; margin:0}
.icon{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:15px; margin-bottom:14px;
  background:rgba(111,168,255,.12); color:var(--accent);
  border:1px solid rgba(111,168,255,.22);
}
.icon-good{background:rgba(51,209,122,.12); color:var(--on); border-color:rgba(51,209,122,.22)}
.icon-warm{background:rgba(255,201,77,.12); color:var(--warm); border-color:rgba(255,201,77,.22)}

/* ---- diff band ---- */
.diffband p{
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--on); border-radius:var(--radius);
  padding:22px 24px; color:var(--mut); font-size:15.5px; margin:0;
}

/* ---- tiers ---- */
.tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.tier{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px; display:flex; flex-direction:column;
}
.tier.feature{border-color:rgba(111,168,255,.45); box-shadow:0 0 0 1px rgba(111,168,255,.15), 0 12px 40px -18px rgba(111,168,255,.4)}
.ribbon{
  position:absolute; top:-11px; left:22px; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:#07101f;
  background:var(--accent); padding:3px 10px; border-radius:999px;
}
.tiername{font-weight:700; font-size:14.5px; color:var(--mut)}
.price{font-size:33px; font-weight:800; margin:6px 0 0; letter-spacing:-.02em}
.price small{font-size:14px; color:var(--mut); font-weight:600}
.per{font-size:12.5px; color:var(--faint); margin-bottom:14px}
.tier ul{list-style:none; padding:0; margin:0 0 18px; flex:1}
.tier ul li{color:var(--mut); font-size:13.5px; padding:6px 0 6px 20px; position:relative; border-top:1px solid var(--line)}
.tier ul li:first-child{border-top:0}
.tier ul li::before{content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700}

/* ---- badges ---- */
.badge{
  display:inline-block; padding:2px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.03em; white-space:nowrap;
}
.badge.on{background:rgba(51,209,122,.14); color:var(--on)}
.badge.off{background:rgba(255,93,93,.14); color:var(--off)}
.badge.warmup{background:rgba(255,201,77,.14); color:var(--warm)}
.badge.pending{background:rgba(138,147,166,.14); color:var(--mut)}

/* ---- disclaimer ---- */
.discl{
  background:#150f04; border:1px solid #3a2c0a; border-radius:var(--radius);
  padding:22px 24px; font-size:13px; color:#d9c9a3;
}
.discl p{margin:0 0 12px} .discl p:last-child{margin:0}
.discl-title{color:var(--warm); font-weight:800; letter-spacing:.02em}
.discl b{color:var(--warm)}

/* ---- tables ---- */
table{border-collapse:collapse; width:100%; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:14px}
th{color:var(--mut); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; background:var(--bg2)}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono)}
.pos{color:var(--pos)} .neg{color:var(--neg)}

/* ---- generic cards / panels ---- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.stat .v{font-size:26px; font-weight:800; letter-spacing:-.02em; font-family:var(--mono)}
.stat .k{font-size:12px; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; margin-top:4px}
.stat .sub{font-size:12px; color:var(--faint); margin-top:6px}

/* ---- banners ---- */
.banner{
  border-radius:var(--radius); padding:14px 18px; font-size:13.5px; font-weight:600;
  margin-bottom:22px; border:1px solid;
}
.banner.hypo{background:rgba(255,201,77,.07); border-color:rgba(255,201,77,.3); color:#e7cf94}
.banner.hypo b{color:var(--warm)}

/* ---- mono / code ---- */
code,.mono{font-family:var(--mono); font-size:13px}
.codeblock{
  background:#06080d; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 16px; overflow-x:auto; font-family:var(--mono); font-size:12.5px;
  color:#bcd0ef; white-space:pre; line-height:1.5;
}
.hashline{word-break:break-all; color:var(--accent2); font-family:var(--mono); font-size:12.5px}

/* ---- bars (inline svg via flex) ---- */
.barchart{display:flex; align-items:center; gap:0; height:72px}

/* ---- page header block ---- */
.pagehead{padding:64px 22px 8px}
.pagehead h1{font-size:clamp(30px,5vw,44px)}
.pagehead .lede{margin-top:10px}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line); margin-top:40px; padding-top:34px; padding-bottom:48px}
.footcols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; margin-bottom:24px}
.footcols a{display:block; color:var(--mut); font-size:13.5px; padding:3px 0}
.footcols a:hover{color:var(--ink)}
.foothd{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; margin:0 0 8px}

/* ---- methodology / falsified specifics ---- */
.steplist{counter-reset:step; list-style:none; padding:0; margin:0; display:grid; gap:14px}
.steplist li{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px 18px 58px; position:relative;
}
.steplist li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:18px; top:18px; width:28px; height:28px; border-radius:8px;
  background:rgba(111,168,255,.12); color:var(--accent); border:1px solid rgba(111,168,255,.22);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
}
.steplist h3{margin-bottom:6px}
.steplist p{color:var(--mut); font-size:14px; margin:0}

.fcards{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.fcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; border-top:3px solid var(--neg)}
.fcard .verdict{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--neg); background:rgba(255,93,93,.12); padding:3px 10px; border-radius:999px; margin-bottom:12px}
.fcard.partial{border-top-color:var(--warm)}
.fcard.partial .verdict{color:var(--warm); background:rgba(255,201,77,.12)}
.fcard h3{font-size:16px}
.fcard dl{margin:10px 0 0; font-size:13.5px}
.fcard dt{color:var(--faint); text-transform:uppercase; letter-spacing:.05em; font-size:11px; font-weight:700; margin-top:10px}
.fcard dd{margin:3px 0 0; color:var(--mut)}
.fcard dd.q{color:var(--ink)}

/* ====================================================================== */
/* ---- homepage data visuals (server-side SVG, generated by dashboard.py) */
/* ====================================================================== */
.viz-hero{
  position:relative; margin:6px 0 6px;
  background:
    radial-gradient(680px 280px at 18% -40%, rgba(111,168,255,.10), transparent 70%),
    linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px 16px; overflow:hidden;
}
.viz-hero .vh-top{display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:12px}
.viz-hero .vh-title{font-size:14px; font-weight:700; letter-spacing:-.01em}
.viz-hero .vh-title .hl{color:var(--accent)}
.viz-hero .vh-fig{font-family:var(--mono); font-size:13px; color:var(--pos); font-weight:700}
.viz-hero svg{display:block; width:100%; height:auto}
.viz-cap{color:var(--faint); font-size:12px; margin:10px 0 0}
.viz-cap b{color:var(--warm)}

.vizgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:18px}
.vizcard{
  position:relative; background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 14px;
  display:flex; flex-direction:column; overflow:hidden;
}
.vizcard .vc-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px}
.vizcard .vc-title{font-size:14.5px; font-weight:700}
.vizcard .vc-tag{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--warm); background:rgba(255,201,77,.10); border:1px solid rgba(255,201,77,.22);
  padding:2px 8px; border-radius:999px; white-space:nowrap}
.vizcard .vc-sub{color:var(--mut); font-size:12.5px; margin:0 0 12px}
.vizcard svg{display:block; width:100%; height:auto; margin-top:auto}
.vizcard .vc-foot{color:var(--faint); font-size:11.5px; margin:10px 0 0}
.vizcard .vc-foot b{color:var(--warm)}

/* shared SVG primitives for the generated charts */
svg .qm-grid{stroke:var(--line); stroke-width:1}
svg .qm-zero{stroke:var(--line2); stroke-width:1; stroke-dasharray:3 3}
svg .qm-axis{stroke:var(--line2); stroke-width:1}
svg .qm-line{fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round}
svg .qm-line-pos{stroke:var(--pos)}
svg .qm-bar-pos{fill:var(--pos)}
svg .qm-bar-neg{fill:var(--neg)}
svg .qm-mut{fill:var(--mut)}
svg .qm-faint{fill:var(--faint)}
svg .qm-ink{fill:var(--ink)}
svg text{font-family:var(--mono)}

/* gate ribbon */
.gate-ribbon svg rect.cell-on{fill:var(--on); opacity:.82}
.gate-ribbon svg rect.cell-off{fill:var(--off); opacity:.16}
.gate-ribbon svg rect.cell-warm{fill:var(--warm); opacity:.5}

/* live pulse strip — sits near the record CTA */
.viz-pulse{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line); border-left:3px solid var(--accent2);
  border-radius:var(--radius); padding:16px 18px 12px; margin-top:18px;
}
.viz-pulse .vp-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.viz-pulse .vp-title{font-size:13.5px; font-weight:700}
.viz-pulse .vp-title .dot{display:inline-block; width:7px; height:7px; border-radius:999px; background:var(--on); margin-right:7px; vertical-align:middle; box-shadow:0 0 0 3px rgba(51,209,122,.18)}
.viz-pulse .vp-net{font-family:var(--mono); font-size:13px; font-weight:700}
.viz-pulse svg{display:block; width:100%; height:auto}
.viz-pulse .vc-foot{color:var(--faint); font-size:11.5px; margin:8px 0 0}

.viz-missing{color:var(--faint); font-size:12.5px; padding:18px; text-align:center;
  border:1px dashed var(--line2); border-radius:var(--radius); background:var(--bg2)}

/* ====================================================================== */
/* ---- Studies gallery (clickable research-chart thumbnails) ----------- */
/* ====================================================================== */
.studygrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px}
.studycard{
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.studycard:hover{
  text-decoration:none; border-color:rgba(111,168,255,.45); transform:translateY(-2px);
  box-shadow:0 14px 34px -20px rgba(111,168,255,.5);
}
.studycard .thumb{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  background:#0e0e12; border-bottom:1px solid var(--line);
}
.studycard .thumb img{display:block; width:100%; height:100%; object-fit:cover; object-position:center}
.studycard .thumb .open{
  position:absolute; top:10px; right:10px; font-size:10.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--accent);
  background:rgba(11,13,18,.72); border:1px solid rgba(111,168,255,.3);
  padding:3px 9px; border-radius:999px; backdrop-filter:blur(4px);
  opacity:0; transition:opacity .15s ease;
}
.studycard:hover .thumb .open{opacity:1}
.studycard .sc-body{padding:14px 16px 16px}
.studycard .sc-title{font-size:15px; font-weight:700; color:var(--ink); margin:0 0 5px}
.studycard .sc-cap{font-size:13px; color:var(--mut); margin:0; line-height:1.5}
.studycard .sc-tag{
  display:inline-block; margin-top:10px; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  background:rgba(111,168,255,.10); border:1px solid rgba(111,168,255,.22);
  padding:2px 8px; border-radius:999px;
}
.studycard .sc-tag.warm{color:var(--warm); background:rgba(255,201,77,.08); border-color:rgba(255,201,77,.22)}

/* ---- responsive ---- */
@media(max-width:900px){
  .storygrid,.grid3,.fcards,.vizgrid{grid-template-columns:1fr}
  .studygrid{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .footcols{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .nav{flex-direction:column; align-items:flex-start; gap:10px; padding:12px 18px}
  .navlinks{gap:14px}
  .tiers,.grid2,.studygrid{grid-template-columns:1fr}
  .hero{padding:48px 18px 28px}
  .footcols{grid-template-columns:1fr}
  table{display:block; overflow-x:auto; white-space:nowrap}
}
</content>