:root {
    --bg:        #0a0e14;
    --bg-soft:   #111722;
    --panel:     #141b28;
    --panel-2:   #18212f;
    --line:      #243044;
    --ink:       #e7eef7;
    --ink-soft:  #9fb0c4;
    --ink-dim:   #6b7c92;
    --ice:       #6cc6ff;
    --ice-deep:  #2a7fb8;
    --frost:     #a9e3ff;
    --gold:      #d8b66a;
    --raven:     #c7d3e2;
    --radius:    16px;
    --maxw:      1080px;
    --shadow:    0 20px 60px -20px rgba(0,0,0,.7);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background:
      radial-gradient(1100px 700px at 78% -10%, rgba(108,198,255,.10), transparent 60%),
      radial-gradient(900px 600px at 8% 8%, rgba(42,127,184,.10), transparent 55%),
      var(--bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--frost); text-decoration: none; }
  a:hover { color: #fff; }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

  /* ---------- nav ---------- */
  header.nav {
    position: sticky; top: 0; z-index: 20;
    backdrop-filter: blur(10px);
    background: linear-gradient(to bottom, rgba(10,14,20,.86), rgba(10,14,20,.55));
    border-bottom: 1px solid var(--line);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 62px; }
  .brand { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: .2px; }
  .brand .mark { width: 26px; height: 26px; color: var(--ice); }
  .nav-links { display: flex; gap: 22px; font-size: .94rem; color: var(--ink-soft); }
  .nav-links a { color: var(--ink-soft); }
  .nav-links a:hover { color: #fff; }

  /* ---------- hero ---------- */
  .hero { padding: 92px 0 64px; position: relative; overflow: hidden; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ice); border: 1px solid var(--line);
    padding: 6px 14px; border-radius: 999px; background: var(--panel);
  }
  .hero h1 {
    font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.04;
    margin: 22px 0 0; letter-spacing: -1.2px; font-weight: 800;
  }
  .hero h1 .accent {
    background: linear-gradient(120deg, var(--frost), var(--ice) 45%, var(--ice-deep));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--ink-soft); max-width: 640px; margin: 22px 0 0; }
  .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
  .btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 22px; border-radius: 11px; font-weight: 600; font-size: .98rem;
    border: 1px solid var(--line); color: var(--ink); background: var(--panel);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
  }
  .btn:hover { transform: translateY(-2px); border-color: var(--ice-deep); color: #fff; }
  .btn.primary {
    background: linear-gradient(120deg, var(--ice-deep), var(--ice));
    border-color: transparent; color: #04121d;
  }
  .btn.primary:hover { box-shadow: 0 12px 30px -12px rgba(108,198,255,.6); }

  .ravens-bg {
    position: absolute; right: -40px; top: 40px; width: min(46%, 460px);
    opacity: .14; color: var(--ice); pointer-events: none;
    filter: drop-shadow(0 10px 40px rgba(108,198,255,.3));
  }
  /* second raven — Huginn & Muninn, a pair in flight (smaller, up and to the left) */
  .ravens-bg.raven-2 {
    right: min(34%, 360px); top: -14px;
    width: min(28%, 250px); opacity: .10;
    transform: rotate(-11deg);
  }
  /* docs index hero is shorter than the landing hero — shrink + raise the pair
     so the bigger raven isn't clipped by the hero's bottom edge */
  .docs-hero .ravens-bg { top: 10px; width: min(30%, 280px); }
  .docs-hero .ravens-bg.raven-2 { top: -10px; right: min(28%, 280px); width: min(20%, 180px); }
  @media (max-width: 760px) { .ravens-bg { display: none; } }

  /* one faint per-page raven behind the doc text (position set inline per page) */
  .doc-main { position: relative; overflow: hidden; }
  .doc-main > section { position: relative; z-index: 1; }
  .doc-raven {
    position: absolute; z-index: 0; color: var(--ice); pointer-events: none;
    filter: drop-shadow(0 8px 30px rgba(108,198,255,.15));
  }
  @media (max-width: 760px) { .doc-raven { display: none; } }

  /* ---------- meaning strip ---------- */
  .meaning { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 30px 0 8px; }
  @media (max-width: 680px) { .meaning { grid-template-columns: 1fr; } }
  .meaning .m {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(180deg, var(--panel), var(--bg-soft));
    padding: 22px 24px;
  }
  .meaning .m h3 { margin: 0; font-size: 1.15rem; display: flex; align-items: baseline; gap: 10px; }
  .meaning .m h3 .norse { color: var(--gold); font-weight: 600; font-size: .92rem; letter-spacing: .04em; }
  .meaning .m p { margin: 8px 0 0; color: var(--ink-soft); font-size: .98rem; }

  /* ---------- sections ---------- */
  section { padding: 58px 0; }
  .sec-head { margin-bottom: 30px; }
  .sec-head .kicker { color: var(--ice); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; }
  .sec-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 8px 0 0; letter-spacing: -.5px; }
  .sec-head p { color: var(--ink-soft); max-width: 620px; margin: 12px 0 0; }

  /* ---------- project cards ---------- */
  .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  @media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }
  .card {
    position: relative; border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(180deg, var(--panel-2), var(--bg-soft));
    padding: 26px 26px 24px; display: flex; flex-direction: column;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    overflow: hidden;
  }
  .card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--ice-deep), var(--ice), transparent);
    opacity: .0; transition: opacity .18s ease;
  }
  .card:hover { transform: translateY(-4px); border-color: var(--ice-deep); box-shadow: var(--shadow); }
  .card:hover::before { opacity: 1; }
  .card.flagship { border-color: #2c3c54; }
  .card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .card h3 { font-size: 1.32rem; margin: 0; letter-spacing: -.3px; }
  .card .role { color: var(--gold); font-size: .82rem; font-weight: 600; letter-spacing: .03em; }
  .tag {
    font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
    padding: 4px 9px; border-radius: 6px; white-space: nowrap;
  }
  .tag.flag  { background: rgba(216,182,106,.14); color: var(--gold); border: 1px solid rgba(216,182,106,.35); }
  .tag.live  { background: rgba(108,198,255,.13); color: var(--frost); border: 1px solid rgba(108,198,255,.35); }
  .tag.soon  { background: rgba(159,176,196,.10); color: var(--ink-dim); border: 1px solid var(--line); }
  .card p.desc { color: var(--ink-soft); margin: 14px 0 0; font-size: .98rem; }
  .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
  .chip { font-size: .76rem; color: var(--ink-soft); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); }
  .chip.hl { color: var(--frost); font-weight: 600; border-color: var(--ice-deep); background: rgba(108,198,255,.12); }
  .card-links { display: flex; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .92rem; }
  .card-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
  .card-links .disabled { color: var(--ink-dim); cursor: default; }
  .card-links .disabled:hover { color: var(--ink-dim); }

  /* ---------- about ---------- */
  .about { border-top: 1px solid var(--line); }
  .about .cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
  @media (max-width: 760px) { .about .cols { grid-template-columns: 1fr; } }
  .about p { color: var(--ink-soft); }
  .principles { list-style: none; padding: 0; margin: 6px 0 0; }
  .principles li { padding: 10px 0 10px 28px; position: relative; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
  .principles li:last-child { border-bottom: 0; }
  .principles li::before { content: "▲"; position: absolute; left: 0; top: 11px; color: var(--ice); font-size: .7rem; }
  .principles b { color: var(--ink); }

  /* ---------- footer ---------- */
  footer { border-top: 1px solid var(--line); padding: 40px 0 56px; color: var(--ink-dim); }
  .foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
  .foot-links { display: flex; gap: 20px; }
  .foot-links a { color: var(--ink-soft); }
  .whisper { font-size: .86rem; color: var(--ink-dim); font-style: italic; }

  /* ====================================================================
     Showcase / detail pages (huginn.html, muninn.html, docs)
     ==================================================================== */

  /* page hero (smaller than landing) */
  .page-hero { padding: 70px 0 30px; position: relative; overflow: hidden; }
  .page-hero .eyebrow { margin-bottom: 18px; }
  .page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; margin: 0; letter-spacing: -1px; font-weight: 800; }
  .page-hero h1 .accent {
    background: linear-gradient(120deg, var(--frost), var(--ice) 45%, var(--ice-deep));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .page-hero .role { color: var(--gold); font-weight: 600; letter-spacing: .04em; margin-top: 12px; font-size: 1rem; }
  .page-hero .lede { font-size: clamp(1.02rem, 2vw, 1.22rem); color: var(--ink-soft); max-width: 680px; margin: 20px 0 0; }

  /* breadcrumb / back link */
  .crumb { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-dim); font-size: .9rem; margin-bottom: 6px; }
  .crumb a { color: var(--ink-soft); }

  /* proof / stat banner */
  .proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 34px 0 0; }
  @media (max-width: 720px) { .proof { grid-template-columns: 1fr; } }
  .stat {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(180deg, var(--panel-2), var(--bg-soft));
    padding: 22px 22px;
  }
  .stat .big {
    font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.5px;
    background: linear-gradient(120deg, var(--frost), var(--ice) 50%, var(--ice-deep));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .stat .small { color: var(--ink-soft); font-size: .92rem; margin-top: 6px; }

  /* feature grid */
  .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  @media (max-width: 760px) { .features { grid-template-columns: 1fr; } }
  .feat {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(180deg, var(--panel), var(--bg-soft));
    padding: 20px 22px;
  }
  .feat h3 { margin: 0 0 8px; font-size: 1.06rem; display: flex; align-items: center; gap: 10px; }
  .feat h3 .ic { color: var(--ice); flex: none; }
  .feat p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

  /* prose blocks */
  .prose { max-width: 760px; }
  .prose p { color: var(--ink-soft); }
  .prose strong, .prose b { color: var(--ink); }

  /* loop / step list */
  .steps { list-style: none; padding: 0; margin: 8px 0 0; counter-reset: step; }
  .steps li {
    position: relative; padding: 14px 0 14px 52px; border-bottom: 1px solid var(--line); color: var(--ink-soft);
  }
  .steps li:last-child { border-bottom: 0; }
  .steps li::before {
    counter-increment: step; content: "L" counter(step);
    position: absolute; left: 0; top: 12px;
    width: 36px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .82rem; color: var(--ice);
    background: var(--panel); border: 1px solid var(--line);
  }
  .steps li b { color: var(--ink); }

  /* comparison table */
  .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
  table.cmp { width: 100%; border-collapse: collapse; font-size: .94rem; }
  table.cmp th, table.cmp td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
  table.cmp thead th { color: var(--ice); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
  table.cmp tbody tr:last-child td { border-bottom: 0; }
  table.cmp tbody tr.hi td { background: rgba(108,198,255,.05); color: var(--ink); font-weight: 600; }
  table.cmp td.num { font-variant-numeric: tabular-nums; }

  /* pill row (how to reach it / tech) */
  .pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
  .pill { font-size: .84rem; color: var(--ink-soft); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; background: var(--bg-soft); }
  .pill b { color: var(--frost); font-weight: 600; }

  /* section divider tint */
  section.tint { background: linear-gradient(180deg, transparent, rgba(20,27,40,.4)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

  /* CTA row */
  .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }

  /* docs typography (rendered markdown) */
  .doc { max-width: 820px; }
  .doc h1, .doc h2, .doc h3 { letter-spacing: -.3px; line-height: 1.25; }
  .doc h1 { font-size: 2rem; margin: 0 0 18px; }
  .doc h2 { font-size: 1.5rem; margin: 38px 0 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .doc h3 { font-size: 1.18rem; margin: 26px 0 10px; color: var(--frost); }
  .doc p, .doc li { color: var(--ink-soft); }
  .doc a { color: var(--frost); }
  .doc code { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: .88em; color: var(--frost); }
  .doc pre { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; overflow-x: auto; }
  .doc pre code { background: none; border: 0; padding: 0; color: var(--ink); }
  .doc blockquote { border-left: 3px solid var(--ice-deep); margin: 16px 0; padding: 4px 18px; color: var(--ink-soft); background: rgba(20,27,40,.4); border-radius: 0 8px 8px 0; }
  .doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .92rem; }
  .doc th, .doc td { padding: 9px 14px; border: 1px solid var(--line); text-align: left; }
  .doc th { color: var(--ice); }
  .doc ul, .doc ol { padding-left: 22px; }
  .doc hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }

  /* docs index list */
  .doclist { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
  @media (max-width: 720px) { .doclist { grid-template-columns: 1fr; } }
  .doclink {
    display: block; border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(180deg, var(--panel), var(--bg-soft)); padding: 18px 20px;
    transition: transform .15s ease, border-color .15s ease;
  }
  .doclink:hover { transform: translateY(-3px); border-color: var(--ice-deep); }
  .doclink .t { font-weight: 700; color: var(--ink); }
  .doclink .d { color: var(--ink-soft); font-size: .9rem; margin-top: 4px; }

  /* ====================================================================
     Doc component classes (Muninn's authored HTML fragments).
     Scoped under .doc so they override the showcase meanings of
     .card / .grid / .stat and stay inside the rendered doc body only.
     ==================================================================== */
  .doc .subtitle { color: var(--ink-dim); font-size: 1.05rem; margin: -6px 0 26px; }

  .doc .card {
    display: block; position: static;
    border: 1px solid var(--line); border-radius: 12px;
    background: linear-gradient(180deg, var(--panel), var(--bg-soft));
    padding: 16px 20px; margin: 16px 0;
  }
  .doc .card::before { display: none; }
  .doc .card:hover { transform: none; box-shadow: none; border-color: var(--line); }
  .doc .card h3 { margin-top: 0; color: var(--frost); }
  .doc .card p:last-child { margin-bottom: 0; }

  .doc .grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px; margin: 16px 0;
  }

  .doc .flow-step { display: flex; align-items: flex-start; gap: 14px; margin: 12px 0; }
  .doc .step-num {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; color: var(--ice);
    background: var(--panel); border: 1px solid var(--line);
  }

  .doc .phase-tag, .doc .badge {
    display: inline-block; border-radius: 999px; font-weight: 600;
  }
  .doc .phase-tag { font-size: .72rem; padding: .12rem .55rem; margin-left: .5rem; }
  .doc .badge { font-size: .7rem; padding: .1rem .45rem; margin-right: .35rem; border-radius: 6px; }
  .doc .p1, .doc .sync  { background: rgba(86,211,100,.14);  color: #7ee787; }
  .doc .p2              { background: rgba(188,140,255,.16); color: #c8a2ff; }
  .doc .p3, .doc .async { background: rgba(240,136,62,.16);  color: #f0a05e; }
  .doc .p4              { background: rgba(108,198,255,.14); color: var(--frost); }

  .doc .formula {
    background: var(--bg-soft); border-left: 3px solid var(--ice-deep);
    padding: .7rem 1rem; border-radius: 8px; margin: .6rem 0; color: var(--ink);
    font-family: ui-monospace, "JetBrains Mono", "Fira Code", monospace; font-size: .9rem;
    overflow-x: auto;
  }
  .doc .stat { font-size: 1.8rem; font-weight: 700; color: var(--frost);
               border: 0; background: none; padding: 0; border-radius: 0; }
  .doc .stat-label { font-size: .85rem; color: var(--ink-dim); }