/* ╔══════════════════════════════════════════════════════════════════╗
   ║ Onyx·Realms — Marketing CSS (about/lore/tokenomics/roadmap)      ║
   ║ Shared brand: onyx purple + gilded gold + obsidian black.        ║
   ║ Mobile-first. Imported by /about/, /lore/, /tokenomics/,         ║
   ║ /roadmap/ index.html files. All tap targets ≥44px.               ║
   ╚══════════════════════════════════════════════════════════════════╝ */

:root{
  --onyx-bg:        #0a0710;
  --onyx-panel:     #150c20;
  --onyx-panel-2:   #1d1430;
  --onyx-border:    #3b215f;
  --onyx-border-2:  rgba(124,58,237,.35);
  --onyx-purple:    #a47dff;
  --onyx-purple-2:  #c084fc;
  --onyx-gold:      #f3c969;
  --onyx-gold-2:    #fbbf24;
  --onyx-text:      #ece4ff;
  --onyx-dim:       #8c7ab2;
  --onyx-row:       #100820;
  --onyx-good:      #22c55e;
  --onyx-warn:      #f59e0b;
  --onyx-tap:       44px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--onyx-bg);
  color:var(--onyx-text);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(164,125,255,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(243,201,105,.10), transparent 60%),
    var(--onyx-bg);
}
img{max-width:100%;display:block;}
a{color:var(--onyx-purple);text-decoration:none;}
a:hover,a:focus{color:var(--onyx-gold);}

/* ── Header strip ───────────────────────────────────────── */
.om-hd{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  border-bottom:1px solid var(--onyx-border);
  background:linear-gradient(180deg,rgba(21,12,32,.95),rgba(21,12,32,.65));
  position:sticky;top:0;z-index:10;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.om-hd .om-logo{
  font-family:'Cinzel',serif;
  letter-spacing:.18em;
  color:var(--onyx-gold);
  font-weight:700;font-size:13px;
  white-space:nowrap;
}
.om-hd .om-nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.om-hd .om-nav a{
  color:var(--onyx-dim);font-size:12px;
  padding:10px 12px;border-radius:8px;
  min-height:var(--onyx-tap);
  display:inline-flex;align-items:center;
  letter-spacing:.5px;text-transform:uppercase;font-weight:600;
}
.om-hd .om-nav a:hover,
.om-hd .om-nav a.on{color:var(--onyx-text);background:rgba(124,58,237,.18);}

/* ── Layout ─────────────────────────────────────────────── */
main.om{
  max-width:1100px;margin:0 auto;
  padding:24px 18px 80px;
}
.om-hero{
  padding:28px 0 24px;
  border-bottom:1px solid var(--onyx-border-2);
  margin-bottom:28px;
}
.om-hero .om-kicker{
  font-family:'Cinzel',serif;letter-spacing:.32em;
  color:var(--onyx-purple-2);font-size:11px;font-weight:600;
  margin-bottom:14px;text-transform:uppercase;
}
.om-hero h1{
  font-family:'Cinzel',serif;
  font-size:clamp(28px,7vw,46px);
  line-height:1.1;letter-spacing:.04em;
  color:var(--onyx-gold);
  margin:0 0 14px;
  background:linear-gradient(135deg,#f3c969 0%,#fff7d9 40%,#a47dff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 30px rgba(164,125,255,.18);
}
.om-hero p.lede{
  font-size:16px;color:var(--onyx-text);
  max-width:680px;margin:0 0 18px;line-height:1.6;
}
.om-hero p.sub{color:var(--onyx-dim);font-size:13px;margin:0;}

/* ── Section ────────────────────────────────────────────── */
section.om-sec{margin:36px 0;}
section.om-sec > h2{
  font-family:'Cinzel',serif;
  font-size:22px;letter-spacing:.12em;
  color:var(--onyx-gold);
  margin:0 0 6px;text-transform:uppercase;
}
section.om-sec > p.sec-sub{
  color:var(--onyx-dim);font-size:13px;
  margin:0 0 18px;
}

/* ── Tile grid (about page 4-tile) ──────────────────────── */
.om-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.om-tile{
  background:linear-gradient(135deg,var(--onyx-panel) 0%,var(--onyx-panel-2) 100%);
  border:1px solid var(--onyx-border-2);
  border-radius:14px;
  padding:18px 18px 20px;
  position:relative;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease;
}
.om-tile:hover{transform:translateY(-2px);border-color:var(--onyx-purple-2);}
.om-tile::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(164,125,255,.08),transparent 60%);
  pointer-events:none;
}
.om-tile h3{
  font-family:'Cinzel',serif;
  font-size:14px;letter-spacing:.14em;
  color:var(--onyx-purple-2);
  margin:0 0 8px;text-transform:uppercase;
  position:relative;
}
.om-tile .om-sub{
  font-size:11px;color:var(--onyx-gold-2);
  letter-spacing:.08em;margin-bottom:8px;
  text-transform:uppercase;font-weight:600;
}
.om-tile p{margin:0;font-size:14px;color:var(--onyx-text);line-height:1.55;position:relative;}

/* ── Lore card (animated gradient bg) ──────────────────── */
.om-card{
  background:linear-gradient(135deg,rgba(30,15,55,.85) 0%,rgba(10,10,26,.95) 100%);
  border:1px solid var(--onyx-border-2);
  border-radius:14px;padding:18px;
  margin-bottom:14px;
  position:relative;overflow:hidden;
}
.om-card::after{
  content:"";position:absolute;inset:-2px;border-radius:14px;
  background:linear-gradient(120deg,
    transparent 0%,
    rgba(164,125,255,.18) 30%,
    rgba(243,201,105,.12) 50%,
    rgba(164,125,255,.18) 70%,
    transparent 100%);
  background-size:200% 100%;
  animation:omShimmer 8s linear infinite;
  pointer-events:none;mix-blend-mode:overlay;opacity:.6;
}
@keyframes omShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.om-card > *{position:relative;z-index:1;}
.om-card h3{
  font-family:'Cinzel',serif;font-size:15px;letter-spacing:.1em;
  color:var(--onyx-gold);margin:0 0 4px;text-transform:uppercase;
}
.om-card .om-card-sub{
  font-size:11px;color:var(--onyx-purple-2);
  letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:10px;
}
.om-card p{margin:0 0 8px;font-size:14px;line-height:1.6;color:var(--onyx-text);}

/* Lightbringer (twin) variant — gold border, warmer */
.om-card.solar{
  background:linear-gradient(135deg,rgba(55,40,15,.85) 0%,rgba(20,15,8,.95) 100%);
  border-color:rgba(243,201,105,.35);
}
.om-card.solar h3{color:#fde68a;}
.om-card.solar .om-card-sub{color:var(--onyx-gold);}

/* ── Faction roster ─────────────────────────────────────── */
.om-faction-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.om-faction{
  border:1px solid var(--onyx-border-2);
  background:rgba(15,8,30,.6);
  border-left:3px solid var(--onyx-purple-2);
  border-radius:0 8px 8px 0;
  padding:10px 12px;
}
.om-faction.solar{border-left-color:var(--onyx-gold);background:rgba(30,20,8,.6);}
.om-faction .om-fn-name{
  font-family:'Cinzel',serif;font-size:12px;
  color:var(--onyx-purple-2);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:4px;
}
.om-faction.solar .om-fn-name{color:var(--onyx-gold);}
.om-faction .om-fn-tag{font-size:11px;color:var(--onyx-dim);line-height:1.4;}

/* ── Tables (tokenomics distribution) ───────────────────── */
.om-table{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--onyx-border-2);border-radius:10px;overflow:hidden;
  font-size:13px;
}
.om-table th,.om-table td{
  text-align:left;padding:10px 12px;
  border-bottom:1px solid var(--onyx-border-2);
}
.om-table thead th{
  background:rgba(124,58,237,.16);
  color:var(--onyx-purple-2);
  font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;
}
.om-table tbody tr:last-child td{border-bottom:none;}
.om-table tbody tr:nth-child(odd) td{background:rgba(15,8,30,.4);}
.om-table .num{font-variant-numeric:tabular-nums;color:var(--onyx-gold);font-weight:600;}
.om-table .tbd{color:var(--onyx-warn);font-style:italic;font-size:12px;}

/* ── Distribution bar ───────────────────────────────────── */
.om-dist-bar{
  display:flex;height:32px;border-radius:8px;overflow:hidden;
  border:1px solid var(--onyx-border-2);margin:10px 0 6px;
}
.om-dist-bar > span{
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:.06em;
  color:#0a0710;
}
.om-dist-bar > span.p-mine{background:linear-gradient(90deg,#a47dff,#c084fc);}
.om-dist-bar > span.p-liq{background:linear-gradient(90deg,#f3c969,#fbbf24);}
.om-dist-bar > span.p-fnd{background:linear-gradient(90deg,#7c3aed,#5b21b6);color:#ece4ff;}
.om-dist-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--onyx-dim);margin-bottom:14px;}
.om-dist-legend .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle;}

/* ── Roadmap columns ────────────────────────────────────── */
.om-roadmap{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.om-col{
  background:linear-gradient(135deg,var(--onyx-panel) 0%,var(--onyx-panel-2) 100%);
  border:1px solid var(--onyx-border-2);border-radius:12px;
  padding:16px;
}
.om-col.shipped{border-top:3px solid var(--onyx-good);}
.om-col.inflight{border-top:3px solid var(--onyx-gold);}
.om-col.planned{border-top:3px solid var(--onyx-purple);}
.om-col h3{
  font-family:'Cinzel',serif;font-size:14px;letter-spacing:.12em;
  margin:0 0 4px;text-transform:uppercase;
}
.om-col.shipped h3{color:var(--onyx-good);}
.om-col.inflight h3{color:var(--onyx-gold);}
.om-col.planned h3{color:var(--onyx-purple);}
.om-col .om-col-sub{font-size:11px;color:var(--onyx-dim);margin:0 0 12px;letter-spacing:.06em;}
.om-col ul{list-style:none;padding:0;margin:0;}
.om-col li{
  padding:10px 0;border-top:1px dashed var(--onyx-border-2);
  font-size:13px;line-height:1.5;
}
.om-col li:first-child{border-top:none;}
.om-col li .mark{font-weight:700;margin-right:6px;}
.om-col.shipped li .mark{color:var(--onyx-good);}
.om-col.inflight li .mark{color:var(--onyx-gold);}
.om-col.planned li .mark{color:var(--onyx-purple-2);}
.om-col li .ttl{color:var(--onyx-text);font-weight:600;display:block;margin-bottom:2px;}
.om-col li .dsc{color:var(--onyx-dim);font-size:12px;}

/* ── CTA buttons ────────────────────────────────────────── */
.om-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--onyx-tap);min-width:140px;
  padding:12px 20px;border-radius:10px;
  background:linear-gradient(135deg,var(--onyx-gold) 0%,var(--onyx-gold-2) 100%);
  color:#0a0710;font-weight:700;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;
  border:none;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}
.om-cta:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(243,201,105,.3);color:#0a0710;}
.om-cta.alt{
  background:transparent;color:var(--onyx-purple-2);
  border:1px solid var(--onyx-purple-2);
}
.om-cta.alt:hover{color:var(--onyx-gold);border-color:var(--onyx-gold);box-shadow:0 0 12px rgba(243,201,105,.2);}

/* ── Callouts ───────────────────────────────────────────── */
.om-call{
  border:1px solid var(--onyx-border-2);
  border-left:3px solid var(--onyx-gold);
  background:linear-gradient(135deg,rgba(243,201,105,.06),rgba(164,125,255,.04));
  border-radius:0 10px 10px 0;
  padding:14px 16px;margin:14px 0;
  font-size:13px;color:var(--onyx-text);line-height:1.55;
}
.om-call strong{color:var(--onyx-gold);}
.om-call.warn{border-left-color:var(--onyx-warn);}
.om-call.warn strong{color:var(--onyx-warn);}

/* ── Wallet block ───────────────────────────────────────── */
.om-wallet{
  background:rgba(0,0,0,.4);
  border:1px solid var(--onyx-border-2);
  border-radius:10px;padding:12px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;color:var(--onyx-gold);
  word-break:break-all;
  margin:8px 0 14px;
}

/* ── Disclaimer ─────────────────────────────────────────── */
.om-disclaim{
  margin-top:36px;padding-top:18px;
  border-top:1px solid var(--onyx-border-2);
  font-size:11px;color:var(--onyx-dim);line-height:1.6;
  letter-spacing:.02em;
}
.om-disclaim strong{color:var(--onyx-text);}

/* ── Footer ─────────────────────────────────────────────── */
footer.om-ft{
  border-top:1px solid var(--onyx-border-2);
  padding:24px 18px;margin-top:48px;
  text-align:center;font-size:12px;color:var(--onyx-dim);
}
footer.om-ft a{color:var(--onyx-purple-2);margin:0 8px;min-height:var(--onyx-tap);display:inline-flex;align-items:center;}

/* ── Mobile portrait (≤480) ─────────────────────────────── */
@media (max-width:480px){
  .om-hd{padding:12px 14px;gap:10px;}
  .om-hd .om-logo{font-size:11px;letter-spacing:.14em;}
  .om-hd .om-nav{gap:2px;}
  .om-hd .om-nav a{padding:10px 8px;font-size:11px;}
  main.om{padding:18px 14px 60px;}
  .om-hero{padding:18px 0 16px;margin-bottom:20px;}
  .om-hero h1{font-size:30px;}
  .om-hero p.lede{font-size:15px;}
  section.om-sec{margin:28px 0;}
  section.om-sec > h2{font-size:19px;}
  .om-grid{grid-template-columns:1fr;}
  .om-roadmap{grid-template-columns:1fr;}
  .om-faction-grid{grid-template-columns:1fr;}
}

/* ── Print friendly fallback ────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .om-card::after{animation:none;}
  .om-tile{transition:none;}
}