/* MapMonarchs — homepage (product experience). Distinct from the trust pages:
   cinematic, dark, hex-cartographic. Legal pages keep styles.css. */
:root{
  --void:#06080D; --ink:#0B0E14; --raise:#121826; --edge:#1C2536;
  --text:#EAEEF6; --muted:#8B95A9; --faint:#5A6478;
  --sovereign:#4C8DFF; --sovereign-hi:#7DA9FF; --crest:#E68A3D; --contest:#E5484D;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--void); color:var(--text); font-family:var(--sans);
  line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--sovereign)}
::selection{background:rgba(76,141,255,.28)}

/* fixed 3D stage behind everything */
#stage{position:fixed; inset:0; z-index:0; background:
  radial-gradient(120% 80% at 50% -10%, #0d1524 0%, var(--void) 60%);}
#stage canvas{display:block; width:100%; height:100%}
/* CSS fallback grid when WebGL/reduced-motion */
#stage.fallback::before{content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(60deg, transparent 49.3%, rgba(76,141,255,.10) 49.6%, transparent 50%),
    linear-gradient(-60deg, transparent 49.3%, rgba(76,141,255,.10) 49.6%, transparent 50%),
    linear-gradient(0deg, transparent 49.3%, rgba(76,141,255,.10) 49.6%, transparent 50%);
  background-size:64px 111px; mask-image:radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 75%);}
.scrim{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(100% 60% at 50% 100%, rgba(6,8,13,.85), transparent 60%);}

/* nav */
header.nav{position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; gap:18px; padding:16px 24px;
  background:linear-gradient(180deg, rgba(6,8,13,.72), transparent);}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  font-weight:700; letter-spacing:.16em; font-size:13px; text-transform:uppercase}
.brand svg{width:24px; height:24px; color:var(--sovereign)}
.brand .by{color:var(--faint); font-weight:600; letter-spacing:.18em; font-size:10px; margin-left:2px}
.nav .spacer{margin-left:auto}
.nav a.link{color:var(--muted); text-decoration:none; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; padding:8px 12px; border-radius:9px}
.nav a.link:hover{color:var(--text); background:rgba(255,255,255,.04)}
.nav a.cta{color:var(--text); border:1px solid var(--edge); border-radius:10px; padding:9px 15px;
  font-size:12px; letter-spacing:.09em; text-transform:uppercase; text-decoration:none; background:rgba(76,141,255,.08)}
.nav a.cta:hover{border-color:var(--sovereign)}
@media (max-width:720px){ .nav a.link{display:none} }

/* scroll-progress = territory bar */
#progress{position:fixed; left:0; top:0; height:2px; width:0; z-index:30;
  background:linear-gradient(90deg, var(--sovereign), var(--sovereign-hi)); box-shadow:0 0 12px rgba(76,141,255,.6)}

/* content */
main{position:relative; z-index:10}
.sec{min-height:100vh; display:flex; align-items:center; padding:120px 24px}
.wrap{max-width:1080px; margin:0 auto; width:100%}
.col{max-width:640px}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--sovereign)}
.step{font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--faint)}
h1{font-size:clamp(40px,7vw,84px); line-height:.98; letter-spacing:-.02em; font-weight:800; margin:.35em 0 .3em; text-wrap:balance}
h2{font-size:clamp(30px,4.6vw,54px); line-height:1.02; letter-spacing:-.015em; font-weight:800; margin:.4em 0 .35em; text-wrap:balance}
.lede{font-size:clamp(18px,2.2vw,22px); color:var(--muted); max-width:52ch}
p.body{color:var(--muted); max-width:56ch}
.kicker{color:var(--text)}
.mono-note{font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; color:var(--faint)}

/* the mechanic chip row: REAL LOCATION -> HEX -> CLAIM -> TERRITORY */
.flow{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; align-items:center}
.flow .chip{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--edge); border-radius:999px; padding:7px 13px; color:var(--text); background:rgba(18,24,38,.6)}
.flow .arr{color:var(--faint)}

.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; padding:13px 20px; border-radius:12px; border:1px solid var(--edge); color:var(--text)}
.btn.primary{border-color:transparent; background:linear-gradient(180deg, rgba(76,141,255,.22), rgba(76,141,255,.08));
  box-shadow:inset 0 0 0 1px rgba(76,141,255,.5)}
.btn.primary:hover{box-shadow:inset 0 0 0 1px var(--sovereign), 0 8px 30px rgba(76,141,255,.18)}
.btn.ghost:hover{border-color:var(--sovereign)}
.badge{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.badge b{color:var(--sovereign-hi); font-weight:600}

/* live readout HUD (hero corner) */
.readout{position:fixed; right:20px; bottom:20px; z-index:15; font-family:var(--mono); font-size:11px;
  color:var(--faint); text-align:right; line-height:1.7; pointer-events:none}
.readout b{color:var(--muted); font-weight:500}
@media (max-width:720px){ .readout{display:none} }

/* right-aligned sections alternate */
.sec.right .wrap{display:flex; justify-content:flex-end}
.sec.center .wrap{display:flex; justify-content:center; text-align:center}
.sec.center .col{max-width:720px}
.sec.center .lede{margin-left:auto; margin-right:auto}

/* state legend (real vs future honesty) */
.legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:24px}
.legend span{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--muted)}
.dot{width:9px; height:9px; border-radius:2px}
.dot.mine{background:var(--crest)} .dot.rival{background:var(--contest)} .dot.open{background:#3a465e}

/* roadmap cards (clearly future) */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:28px}
.card{border:1px solid var(--edge); border-radius:14px; padding:18px; background:rgba(12,16,26,.55); backdrop-filter:blur(6px)}
.card .tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.card .tag.live{color:var(--sovereign-hi)}
.card .tag.soon{color:var(--crest)}
.card h3{margin:.5em 0 .3em; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:14.5px}

/* trust strip */
.trust{border-top:1px solid var(--edge); border-bottom:1px solid var(--edge); background:rgba(9,12,20,.6)}
.trust ul{list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.trust li{color:var(--muted); font-size:15px; padding-left:20px; position:relative; max-width:36ch}
.trust li::before{content:""; position:absolute; left:0; top:9px; width:9px; height:9px; background:var(--sovereign);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}

/* footer */
footer{position:relative; z-index:10; border-top:1px solid var(--edge); background:var(--ink); padding:44px 24px 70px}
footer .wrap{display:flex; gap:14px 26px; flex-wrap:wrap; align-items:baseline; color:var(--faint); font-size:13px}
footer a{color:var(--muted); text-decoration:none} footer a:hover{color:var(--text)}
footer .sig{margin-left:auto; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; font-size:11px}

/* reveal */
.reveal{opacity:0; transform:translateY(22px)}
.reveal.in{opacity:1; transform:none; transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none} }

/* real crown mark (replaces the invented hex) */
.brand .mark{width:28px; height:24px; object-fit:contain; flex:none;
  filter:drop-shadow(0 1px 5px rgba(120,170,255,.35))}

/* footer — the world going dark */
footer{background:linear-gradient(180deg, var(--ink), #05070b)}
.foot-top{display:grid; grid-template-columns:1.1fr 1.2fr 1.4fr; gap:34px; align-items:start; padding-bottom:30px}
.foot-brand{display:flex; align-items:center; gap:14px}
.foot-brand .mark.lg{width:46px; height:40px; object-fit:contain; filter:drop-shadow(0 2px 10px rgba(120,170,255,.3))}
.foot-name{font-weight:700; letter-spacing:.05em; font-size:16px; color:var(--text)}
.foot-rel{color:var(--muted); font-size:13px; margin-top:2px}
.foot-rel b{color:var(--sovereign-hi); font-weight:600; letter-spacing:.04em}
.foot-stmt{color:var(--muted); font-size:15px; margin:0; max-width:34ch; line-height:1.55}
.foot-nav{display:flex; flex-wrap:wrap; gap:9px 16px; align-content:flex-start}
.foot-nav a{color:var(--muted); text-decoration:none; font-size:14px}
.foot-nav a:hover{color:var(--text)}
.foot-h{width:100%; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-top:4px}
.foot-h:first-child{margin-top:0}
.foot-base{display:flex; gap:18px; flex-wrap:wrap; align-items:baseline; padding-top:22px; border-top:1px solid var(--edge);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.foot-base .sig{color:var(--muted)}
.foot-base .foot-yr{margin-left:auto}
@media (max-width:760px){ .foot-top{grid-template-columns:1fr; gap:24px} .foot-base .foot-yr{margin-left:0} }

/* ---------- mobile-first corrections ---------- */
@media (max-width:760px){
  /* stronger top scrim so hero copy always beats the board behind it */
  .scrim{background:
    linear-gradient(180deg, rgba(6,8,13,.82) 0%, rgba(6,8,13,.5) 38%, rgba(6,8,13,.2) 58%, transparent 80%),
    radial-gradient(120% 50% at 50% 100%, rgba(6,8,13,.6), transparent 60%);}
  .sec{padding:96px 20px}
  #hero{padding-top:112px}
  .lede{font-size:17px}
  /* flow reads as clean wrapped chips, no orphan arrows */
  .flow{gap:8px}
  .flow .arr{display:none}
  .flow .chip{font-size:11px; padding:6px 11px}
  .actions{gap:10px}
}
@media (max-width:560px){
  header.nav{padding:12px 14px; gap:10px}
  .brand{font-size:12px; letter-spacing:.1em; gap:8px}
  .brand .by{display:none}                 /* keep the header from clipping the CTA */
  .brand .mark{width:24px; height:21px}
  .nav a.cta{padding:8px 12px; font-size:11px; letter-spacing:.06em}
  h1{font-size:clamp(34px,10vw,46px)}
}

/* ---- /how-it-works : pinned single-hex mechanic ---- */
.how-intro{padding:150px 24px 40px}
.pin{position:relative}
.pin .sticky{position:sticky; top:0; height:100vh; overflow:hidden}
#howstage{position:absolute; inset:0}
#howstage canvas{display:block; width:100%; height:100%}
#howstage.fallback::before{content:""; position:absolute; inset:0; opacity:.4;
  background:radial-gradient(40% 40% at 60% 45%, rgba(230,138,61,.18), transparent 60%),
  radial-gradient(60% 60% at 50% 50%, rgba(76,141,255,.06), transparent 70%)}
.pin .steps{position:absolute; inset:0; display:flex; align-items:center; pointer-events:none}
.pin .steps .inner{position:relative; max-width:1080px; margin:0 auto; width:100%; padding:0 24px; height:220px}
.stepcard{position:absolute; top:0; width:min(440px,calc(100% - 48px)); background:linear-gradient(180deg, rgba(10,14,22,.84), rgba(10,14,22,.64));
  border:1px solid var(--edge); border-left:2px solid var(--sovereign); border-radius:14px; padding:22px 24px;
  backdrop-filter:blur(8px); opacity:0; transform:translateY(14px); transition:opacity .45s, transform .45s}
.stepcard.on{opacity:1; transform:none}
.stepcard .n{font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--sovereign-hi)}
.stepcard h3{margin:.4em 0 .3em; font-size:clamp(24px,3vw,32px); letter-spacing:-.01em}
.stepcard p{margin:0; color:var(--muted); font-size:15.5px}
.stepcard .meta{margin-top:12px; font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.02em}
/* spacer blocks that drive the scrub */
.pin .track{position:relative}
.pin .track .mark{height:100vh}
.how-legend{position:absolute; left:24px; bottom:22px; font-family:var(--mono); font-size:11px; color:var(--faint); line-height:1.7; pointer-events:none}
.how-legend b{color:var(--muted); font-weight:500}
@media (max-width:760px){ .stepcard{max-width:none} .how-legend{display:none} }