:root[data-theme="light"] .card,
:root[data-theme="light"] .date-card,
:root[data-theme="light"] .ms { box-shadow: var(--cm-shadow-md); }

/* ─────────────── HERO ─────────────── */
.hero {
  position: relative; overflow: hidden;
  min-height: clamp(440px, 72vh, 760px);
  background: var(--cm-bg-elevated);
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover;
  background: linear-gradient(135deg, #0f1a14 0%, #1C1912 40%, #12100A 100%);
}
.hero-curve {
  position: absolute; left: -8%; right: -8%; bottom: -2px; height: 92px; z-index: 2;
  background: var(--cm-bg-base);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: 0 -2px 30px -6px rgba(26,122,82,0.45);
}

/* hero coming-soon overlay text */
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 80px 20px 120px;
}
.hero-overlay-title {
  font: var(--cm-w-bold) clamp(48px, 10vw, 120px)/0.95 var(--cm-font-display);
  color: #fff; text-shadow: 0 2px 40px rgba(0,0,0,0.6), 0 0 80px rgba(26,122,82,0.3);
  margin: 0 0 16px;
}
.hero-overlay-sub {
  font: var(--cm-w-semibold) clamp(14px, 2vw, 20px)/1.4 var(--cm-font-ui);
  color: rgba(255,255,255,0.85); letter-spacing: 0.15em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* particles */
.particles { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.particles span { position: absolute; bottom: -12px; width: 5px; height: 5px; border-radius: 50%; opacity: 0; animation: floatUp linear infinite; }
.particles span.j { background: #2AAE72; box-shadow: 0 0 9px rgba(42,174,114,.9); }
.particles span.g { background: #E2C76A; box-shadow: 0 0 9px rgba(226,199,106,.9); }
@keyframes floatUp { 0%{ transform: translateY(0) scale(1); opacity:0; } 12%{ opacity:.75; } 88%{ opacity:.45; } 100%{ transform: translateY(-600px) scale(.55); opacity:0; } }

/* hero gold glint sweep */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,242,205,0.16) 47%, rgba(226,199,106,0.3) 50%, rgba(255,242,205,0.16) 53%, transparent 68%);
  transform: translateX(-120%); animation: heroSweep 2.4s cubic-bezier(.4,0,.1,1) 0.35s 1 both;
}
@keyframes heroSweep { to { transform: translateX(120%); } }

/* brand glyph shimmer */
.hero-nav .brand-glyph::after {
  content: ''; position: absolute; inset: -3px; border-radius: inherit;
  border: 1px solid rgba(226,199,106,0.6); opacity: 0; animation: brandRing 4.8s ease-in-out infinite;
}
@keyframes brandRing { 0%,100%{ opacity:0; transform:scale(1); } 50%{ opacity:.7; transform:scale(1.14); } }

/* ─────────────── INTRO ─────────────── */
.intro {
  position: relative; z-index: 4;
  text-align: center; background: var(--cm-bg-base);
  padding: clamp(20px,3vw,40px) clamp(20px,5vw,56px) clamp(8px,2vw,16px);
}
.coming-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 13px; border-radius: var(--cm-radius-full);
  background: var(--cm-bg-surface);
  border: 1px solid color-mix(in srgb, var(--cm-secondary) 50%, var(--cm-border));
  color: var(--cm-secondary-text);
  font: var(--cm-w-bold) 11px/1 var(--cm-font-ui);
  letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 26px;
}
.coming-badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cm-secondary);
  box-shadow: 0 0 0 0 rgba(200,168,75,0.6); animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(200,168,75,0.5);} 70%{box-shadow:0 0 0 8px rgba(200,168,75,0);} 100%{box-shadow:0 0 0 0 rgba(200,168,75,0);} }
.hero-title {
  font: var(--cm-w-bold) clamp(60px, 12vw, 148px)/0.92 var(--cm-font-display);
  letter-spacing: -0.01em;
  color: var(--cm-text-primary);
  margin: 0 0 14px;
}
.hero-sub {
  font: var(--cm-w-medium) clamp(15px, 2vw, 19px)/1.5 var(--cm-font-ui);
  color: var(--cm-text-secondary); letter-spacing: 0.01em;
  max-width: 30ch; margin: 0 auto 32px;
}
.hero-sub em { color: var(--cm-secondary-text); font-style: normal; font-weight: 700; }

/* email capture */
.notify {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center;
  max-width: 520px; margin: 0 auto;
}
.notify-field {
  flex: 1 1 240px; display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 16px; border-radius: var(--cm-radius-md);
  background: var(--cm-bg-surface);
  border: 1px solid var(--cm-border);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.notify-field:focus-within { border-color: var(--cm-secondary); box-shadow: 0 0 0 3px rgba(200,168,75,0.18); }
.notify-field i { width: 18px; height: 18px; color: var(--cm-text-tertiary); flex: none; }
.notify-field input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  color: var(--cm-text-primary); font: var(--cm-w-medium) 15px/1 var(--cm-font-ui); text-align: left;
}
.notify-field input::placeholder { color: var(--cm-text-tertiary); }
.notify .btn-primary { height: 52px; padding: 0 26px; font-size: 14px; flex: none; }
.notify-note {
  margin: 16px auto 0; font: var(--cm-w-medium) 12.5px/1.4 var(--cm-font-ui);
  color: var(--cm-text-tertiary);
}
.notify-success {
  display: none; align-items: center; gap: 10px; justify-content: center;
  color: var(--cm-secondary-text); font: var(--cm-w-bold) 15px/1.4 var(--cm-font-ui);
  padding: 6px 0;
}
.notify-success i { width: 20px; height: 20px; }
.notify.done .notify-field, .notify.done .btn-primary { display: none; }
.notify.done .notify-success { display: flex; }

/* ─────────────── DATE STRIP ─────────────── */
.dates {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(40px,6vw,72px) clamp(20px,5vw,56px) clamp(20px,3vw,32px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.date-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-xl);
  background: var(--cm-bg-surface);
  padding: 28px 30px;
  display: flex; flex-direction: column; gap: 4px;
}
.date-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.date-card.beta::before { background: linear-gradient(90deg, var(--cm-primary), #2AAE72); }
.date-card.launch::before { background: linear-gradient(90deg, var(--cm-secondary), #E2C76A); }
.date-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font: var(--cm-w-bold) 11px/1 var(--cm-font-ui); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cm-text-tertiary); margin-bottom: 10px;
}
.date-card.beta .date-kicker i { color: var(--cm-primary); }
.date-card.launch .date-kicker i { color: var(--cm-secondary); }
.date-kicker i { width: 15px; height: 15px; }
.date-big {
  font: var(--cm-w-bold) clamp(30px,4vw,44px)/1 var(--cm-font-display);
  color: var(--cm-text-primary); letter-spacing: 0.01em;
}
.date-card.launch .date-big { color: var(--cm-secondary-text); }
.date-desc { font: var(--cm-w-medium) 13.5px/1.5 var(--cm-font-ui); color: var(--cm-text-secondary); margin-top: 8px; max-width: 38ch; }

/* gradient fills + corner glow */
.date-card.beta { background: linear-gradient(150deg, color-mix(in srgb, var(--cm-primary) 13%, var(--cm-bg-surface)), var(--cm-bg-surface) 62%); }
.date-card.launch { background: linear-gradient(150deg, color-mix(in srgb, var(--cm-secondary) 17%, var(--cm-bg-surface)), var(--cm-bg-surface) 62%); }
.date-card::after { content: ''; position: absolute; right: -44px; top: -44px; width: 150px; height: 150px; border-radius: 50%; opacity: .55; pointer-events: none; }
.date-card.beta::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--cm-primary) 32%, transparent), transparent); }
.date-card.launch::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--cm-secondary) 36%, transparent), transparent); }

/* ─────────────── ROADMAP ─────────────── */
.roadmap {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(28px,4vw,48px) clamp(20px,5vw,56px) clamp(48px,7vw,88px);
  background:
    radial-gradient(80% 46% at 50% 0%, color-mix(in srgb, var(--cm-primary) 7%, transparent), transparent 72%),
    radial-gradient(72% 46% at 50% 100%, color-mix(in srgb, var(--cm-secondary) 8%, transparent), transparent 72%);
}
.rm-head { text-align: center; margin-bottom: 44px; }
.rm-label { display: inline-block; background: linear-gradient(180deg, #D4B455, #B89638); color: #2A2310;
  font: var(--cm-w-bold) 11px/1 var(--cm-font-ui); letter-spacing: 0.22em; text-transform: uppercase;
  padding: 9px 26px; margin-bottom: 16px;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
  box-shadow: 0 6px 18px -8px rgba(184,150,56,0.7); }
.rm-title { font: var(--cm-w-bold) clamp(28px,4vw,40px)/1.1 var(--cm-font-display); color: var(--cm-text-primary); margin: 0 0 12px; }
.rm-desc { font: var(--cm-w-regular) 15px/1.6 var(--cm-font-ui); color: var(--cm-text-secondary); max-width: 60ch; margin: 0 auto; }
.rm-orn { color: var(--cm-secondary); letter-spacing: 10px; font-size: 9px; opacity: 0.55; margin-top: 2px; }

.board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.board::before {
  content: ''; position: absolute; top: 7px; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cm-secondary) 12%, var(--cm-border-strong) 50%, var(--cm-secondary) 88%, transparent);
  opacity: 0.5;
}
/* traveling gold glint */
.board::after {
  content: ''; position: absolute; top: 5px; width: 96px; height: 5px; border-radius: 5px; z-index: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(226,199,106,0.95), rgba(200,168,75,0.25), transparent);
  filter: blur(1px); animation: glintRun 6.5s linear infinite;
}
@keyframes glintRun { 0%{ left:4%; opacity:0; } 10%{ opacity:1; } 88%{ opacity:1; } 100%{ left:90%; opacity:0; } }

.stream { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.node { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; position: relative; z-index: 2; }
.node-dot {
  width: 15px; height: 15px; border-radius: 4px; transform: rotate(45deg);
  background: var(--cat, var(--cm-secondary));
  box-shadow: 0 0 0 3px var(--cm-bg-base), 0 0 0 4px color-mix(in srgb, var(--cat, var(--cm-secondary)) 80%, transparent), 0 0 16px color-mix(in srgb, var(--cat, var(--cm-secondary)) 55%, transparent);
  margin-bottom: 13px;
  animation: dotPulse 4.5s ease-in-out infinite;
}
@keyframes dotPulse { 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.22); } }
.node-num { font: var(--cm-w-bold) 9px/1 var(--cm-font-ui); letter-spacing: 0.15em; color: var(--cm-text-tertiary); margin-bottom: 3px; }
.node-label { font: var(--cm-w-bold) 11px/1 var(--cm-font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-secondary-text); white-space: nowrap; }

.card {
  position: relative; width: 100%; flex: 1; display: flex; flex-direction: column;
  background: var(--cm-bg-surface); border: 1px solid var(--cm-border-subtle);
  border-radius: var(--cm-radius-lg); overflow: hidden;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.card-top { height: 4px; background: linear-gradient(90deg, var(--cat), var(--cat2)); }
.card-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 135%, color-mix(in srgb, var(--cat) 24%, transparent), transparent 70%);
  opacity: 0.5; transition: opacity 0.3s; }
.card:hover .card-glow { opacity: 1; }
.card-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px;
  padding: 14px 13px 12px; border-bottom: 1px solid var(--cm-border-subtle);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 9%, transparent), transparent); }
.crest { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  color: #fff; position: relative; transition: transform 0.25s;
  background: linear-gradient(140deg, var(--cat), var(--cat2));
  box-shadow: 0 5px 14px -5px color-mix(in srgb, var(--cat) 75%, transparent), inset 0 1px 0 rgba(255,255,255,0.4); }
.crest::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255,255,255,0.28); }
.crest i { width: 23px; height: 23px; }
.card:hover .crest { transform: translateY(-1px) scale(1.05); }
.card-eyebrow { font: var(--cm-w-bold) 9px/1 var(--cm-font-ui); letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cat) 62%, var(--cm-text-tertiary)); margin-bottom: 5px; }
.card-title { font: var(--cm-w-bold) 14px/1.2 var(--cm-font-ui); color: var(--cm-text-primary); letter-spacing: 0.01em; }
.card-body { position: relative; z-index: 1; padding: 13px 14px 16px; flex: 1; }
.feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.feat li { position: relative; padding-left: 16px; font: var(--cm-w-regular) 11.5px/1.4 var(--cm-font-ui); color: var(--cm-text-secondary); }
.feat li::before { content: '◆'; position: absolute; left: 0; top: 1px; font-size: 6px; line-height: 16px; color: color-mix(in srgb, var(--cat) 45%, var(--cm-text-tertiary)); }
.feat li.key { color: var(--cm-text-primary); font-weight: 600; }
.feat li.key::before { color: var(--cat); text-shadow: 0 0 6px color-mix(in srgb, var(--cat) 55%, transparent); }

/* card hover glow */
.card:hover { border-color: color-mix(in srgb, var(--cat) 50%, var(--cm-border)); transform: translateY(-5px);
  box-shadow: var(--cm-shadow-lg), 0 16px 38px -14px color-mix(in srgb, var(--cat) 50%, transparent); }

/* category palette */
.cat-system    { --cat:#15683F; --cat2:#1A7A52; }
.cat-collection{ --cat:#1A7A52; --cat2:#2AAE72; }
.cat-play      { --cat:#208A5E; --cat2:#35C882; }
.cat-commerce  { --cat:#B89638; --cat2:#E2C76A; }
.cat-shopkeep  { --cat:#1A7A52; --cat2:#D4B455; }
.cat-polish    { --cat:#8E8468; --cat2:#C8A84B; }

/* milestone banners */
.milestones { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px,5vw,56px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
.ms {
  position: relative; overflow: hidden; border-radius: var(--cm-radius-xl);
  padding: 26px 30px; border: 1px solid var(--cm-border);
  background: var(--cm-bg-surface);
}
.ms.beta { background: linear-gradient(135deg, color-mix(in srgb, var(--cm-primary) 12%, var(--cm-bg-surface)), var(--cm-bg-surface)); border-color: color-mix(in srgb, var(--cm-primary) 35%, var(--cm-border)); }
.ms.launch { background: linear-gradient(135deg, color-mix(in srgb, var(--cm-secondary) 14%, var(--cm-bg-surface)), var(--cm-bg-surface)); border-color: color-mix(in srgb, var(--cm-secondary) 38%, var(--cm-border)); }
.ms-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ms-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none;
  position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.ms-icon::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255,255,255,0.28); }
.ms.beta .ms-icon { background: linear-gradient(140deg, #1A7A52, #2AAE72); color: #fff; box-shadow: 0 5px 14px -5px rgba(26,122,82,0.7), inset 0 1px 0 rgba(255,255,255,0.4); }
.ms.launch .ms-icon { background: linear-gradient(140deg, #B89638, #E2C76A); color: #2A2310; box-shadow: 0 5px 14px -5px rgba(184,150,56,0.7), inset 0 1px 0 rgba(255,255,255,0.5); }
.ms::after { content: ''; position: absolute; right: -50px; top: -50px; width: 170px; height: 170px; border-radius: 50%; opacity: 0.5; pointer-events: none; }
.ms.beta::after { background: radial-gradient(closest-side, rgba(26,122,82,0.22), transparent); }
.ms.launch::after { background: radial-gradient(closest-side, rgba(200,168,75,0.26), transparent); }
.ms-icon i { width: 20px; height: 20px; }
.ms-eyebrow { font: var(--cm-w-bold) 10px/1 var(--cm-font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cm-text-tertiary); margin-bottom: 4px; }
.ms-when { font: var(--cm-w-bold) 22px/1 var(--cm-font-display); color: var(--cm-text-primary); }
.ms.launch .ms-when { color: var(--cm-secondary-text); }
.ms-body { font: var(--cm-w-regular) 13.5px/1.55 var(--cm-font-ui); color: var(--cm-text-secondary); }
.ms-body strong { color: var(--cm-text-primary); font-weight: 700; }

/* ─────────────── SCROLL REVEAL STAGGER ─────────────── */
html.js .board .stream:nth-child(2) .card { transition-delay: .05s; }
html.js .board .stream:nth-child(3) .card { transition-delay: .10s; }
html.js .board .stream:nth-child(4) .card { transition-delay: .15s; }
html.js .board .stream:nth-child(5) .card { transition-delay: .20s; }

/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width: 860px) {
  .hero-nav { flex-wrap: wrap; gap: 10px; }
  .hero-nav .nav-links { gap: 12px; }
  .board { grid-template-columns: repeat(2, 1fr); }
  .board::before, .board::after { display: none; }
  .dates, .milestones { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .board { grid-template-columns: 1fr; }
}