:root {
  --orange: #f05a36;
  --orange-dark: #c84125;
  --cream: #fff4df;
  --ink: #3d251f;
  --muted: #70554b;
  --paper: #fffaf0;
  --yellow: #ffc84a;
  --green: #f0a52d;
  --line: rgba(32, 36, 42, .14);
  --shadow: 0 24px 70px rgba(31, 39, 45, .18);
  --radius: 28px;
  --ink-blue: #4a271e;
  --paper-warm: #fff3d5;
}
@font-face {
  font-family: "Gomarice Rocks";
  src: url("assets/fonts/gomarice-rocks.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Super Kindly";
  src: url("assets/fonts/super-kindly.ttf") format("truetype");
  font-display: swap;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Super Kindly", "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  background-color: var(--paper-warm);
  background-image:
    radial-gradient(circle at 10% 20%, rgba(240,90,54,.055) 0 2px, transparent 2.5px),
    radial-gradient(circle at 80% 70%, rgba(255,174,48,.09) 0 1.5px, transparent 2px);
  background-size: 39px 43px, 31px 37px;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(135deg, rgba(255,200,74,.2), transparent 35%),
    linear-gradient(315deg, rgba(255,151,45,.16), transparent 38%),
    var(--paper-warm);
}
.party-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.party-bg [data-parallax] { --parallax-y: 0px; --spin-deg: 0deg; transform: translate3d(0, var(--parallax-y), 0); will-change: transform; }
.rock-ridge { position: absolute; width: 74vw; height: 260px; opacity: .15; background: #72584a; clip-path: polygon(0 72%, 7% 44%, 14% 67%, 22% 25%, 29% 58%, 38% 35%, 46% 66%, 56% 18%, 64% 57%, 73% 34%, 82% 70%, 91% 41%, 100% 64%, 100% 100%, 0 100%); }
.ridge-one { left: -16vw; top: 30%; transform: rotate(-4deg); }
.ridge-two { right: -25vw; top: 77%; transform: rotate(8deg) scale(.8); background: #9a4b27; }
.color-blob { position: absolute; width: 520px; height: 520px; border-radius: 45% 55% 62% 38% / 56% 42% 58% 44%; filter: blur(2px); opacity: .28; }
.blob-one { left: -180px; top: 18%; background: #ff9b45; transform: translate3d(0, var(--parallax-y), 0) rotate(18deg) !important; }
.blob-two { right: -170px; top: 58%; background: #ffd05a; transform: translate3d(0, var(--parallax-y), 0) rotate(-12deg) !important; }
.bg-flopo, .bg-eggs { position: absolute; user-select: none; }
.bg-flopo { width: min(390px, 31vw); opacity: .2; filter: saturate(1.15) drop-shadow(8px 10px 0 rgba(91,43,29,.1)); }
.flopo-one { left: -105px; top: 12%; transform: translate3d(0, var(--parallax-y), 0) rotate(calc(14deg + var(--spin-deg))) !important; }
.flopo-two { right: -118px; top: 36%; transform: translate3d(0, var(--parallax-y), 0) rotate(calc(-18deg + var(--spin-deg))) scaleX(-1) !important; }
.flopo-three { left: -145px; top: 64%; transform: translate3d(0, var(--parallax-y), 0) rotate(9deg) scale(.86) !important; }
.flopo-four { right: 4%; top: 76%; width: min(285px, 24vw); opacity: .16; transform: translate3d(0, var(--parallax-y), 0) rotate(calc(24deg + var(--spin-deg))) scaleX(-1) !important; }
.flopo-five { left: 26%; top: 91%; width: min(230px, 20vw); opacity: .14; transform: translate3d(0, var(--parallax-y), 0) rotate(-17deg) !important; }
.flopo-six { right: -65px; top: 57%; width: min(310px, 25vw); opacity: .18; transform: translate3d(0, var(--parallax-y), 0) rotate(calc(13deg + var(--spin-deg))) !important; }
.bg-eggs { width: min(330px, 26vw); opacity: .3; filter: saturate(1.2); }
.eggs-one { right: -80px; top: 22%; transform: translate3d(0, var(--parallax-y), 0) rotate(15deg) !important; }
.eggs-two { left: 5%; top: 50%; transform: translate3d(0, var(--parallax-y), 0) rotate(calc(-13deg + var(--spin-deg))) scale(.72) !important; }
.cave-marks { position: absolute; color: rgba(104,70,48,.18); font-family: "Gomarice Rocks", sans-serif; font-size: clamp(26px, 3vw, 48px); letter-spacing: .34em; white-space: nowrap; }
.marks-one { left: 19%; top: 34%; transform: rotate(-8deg); }
.marks-two { right: 9%; top: 68%; transform: rotate(11deg); color: rgba(153,65,31,.16); }
.tree-layer { position: absolute; left: -10vw; width: 120vw; height: auto; opacity: .12; filter: saturate(.85) sepia(.18); }
.trees-one { top: 20%; transform: translate3d(0, var(--parallax-y), 0) scaleX(1.08) !important; }
.trees-two { top: 48%; left: -22vw; width: 138vw; opacity: .09; transform: translate3d(0, var(--parallax-y), 0) scaleX(-1) !important; }
.trees-three { top: 79%; left: -4vw; width: 112vw; opacity: .1; transform: translate3d(0, var(--parallax-y), 0) !important; }
.bg-nest { position: absolute; left: -190px; top: 84%; width: 560px; opacity: .18; transform: translate3d(0, var(--parallax-y), 0) rotate(-7deg) !important; }
.wood-plank { position: absolute; width: 48vw; height: 76px; opacity: .18; background: repeating-linear-gradient(4deg, #7b482b 0 7px, #9b6239 8px 15px, #5f3825 16px 19px); clip-path: polygon(0 18%, 6% 2%, 34% 8%, 58% 0, 91% 10%, 100% 28%, 98% 82%, 88% 100%, 53% 91%, 18% 100%, 2% 78%); }
.plank-one { left: -8vw; top: 42%; transform: rotate(-13deg); }
.plank-two { right: -13vw; top: 70%; transform: rotate(17deg); }
.confetti-field { position: absolute; inset: 0; opacity: .75; }
.confetti-field i { position: absolute; width: 10px; height: 24px; border: 3px solid var(--ink-blue); border-radius: 3px; background: var(--yellow); transform: rotate(22deg); }
.confetti-field i:nth-child(1) { left: 7%; top: 12%; background: #ff8a3d; transform: rotate(42deg); }
.confetti-field i:nth-child(2) { left: 24%; top: 25%; background: #fff4df; transform: rotate(-28deg); }
.confetti-field i:nth-child(3) { right: 16%; top: 10%; background: #ffc84a; transform: rotate(68deg); }
.confetti-field i:nth-child(4) { right: 7%; top: 31%; background: #ffad32; transform: rotate(-15deg); }
.confetti-field i:nth-child(5) { left: 13%; top: 42%; background: #ffe37a; transform: rotate(74deg); }
.confetti-field i:nth-child(6) { left: 44%; top: 52%; background: #ff7956; transform: rotate(15deg); }
.confetti-field i:nth-child(7) { right: 23%; top: 58%; background: #ff963f; transform: rotate(-51deg); }
.confetti-field i:nth-child(8) { left: 6%; top: 67%; background: #fff4df; transform: rotate(28deg); }
.confetti-field i:nth-child(9) { right: 8%; top: 74%; background: #ffc84a; transform: rotate(81deg); }
.confetti-field i:nth-child(10) { left: 30%; top: 82%; background: #ffad32; transform: rotate(-26deg); }
.confetti-field i:nth-child(11) { right: 34%; top: 89%; background: #ffe37a; transform: rotate(49deg); }
.confetti-field i:nth-child(12) { left: 52%; top: 18%; background: #ff7956; transform: rotate(-63deg); }
main { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 12px clamp(18px, 4vw, 64px);
  background: rgba(255, 245, 217, .92);
  backdrop-filter: blur(18px);
  border-bottom: 3px solid var(--ink-blue);
  box-shadow: 0 5px 0 rgba(240,90,54,.2);
}
.brand { justify-self: start; }
.brand img { width: 150px; max-height: 48px; object-fit: contain; }
.site-header nav { display: flex; gap: 26px; font-family: "Gomarice Rocks", sans-serif; font-size: 15px; letter-spacing: .02em; }
.site-header nav a:hover { color: var(--orange); }
.site-header .button { justify-self: end; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 3px solid var(--ink-blue);
  border-radius: 17px 24px 15px 22px;
  background: var(--orange);
  color: white;
  font-weight: 1000;
  letter-spacing: .03em;
  box-shadow: 5px 6px 0 var(--ink-blue);
  font-family: "Gomarice Rocks", sans-serif;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translate(2px, 2px) rotate(-1deg); box-shadow: 3px 4px 0 var(--ink-blue); background: #f36a48; }
.button.small { min-height: 42px; padding: 0 18px; font-size: 13px; }
.button.ghost { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); box-shadow: none; }
.button.huge { min-height: 66px; padding: 0 38px; font-size: 18px; }
.hero {
  min-height: 900px;
  padding: 140px clamp(22px, 6vw, 96px) 80px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 90px);
  color: white;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(24, 29, 31, .86) 0%, rgba(24, 29, 31, .68) 44%, rgba(24, 29, 31, .22) 100%),
    linear-gradient(180deg, rgba(24,29,31,.08), rgba(24,29,31,.55)),
    url('assets/hero.webp') center/cover no-repeat;
  transform: scale(1.02);
}
.hero::after {
  content: "";
  position: absolute;
  left: -5%; right: -5%; bottom: -72px;
  height: 140px;
  background: var(--paper-warm);
  transform: rotate(-2.2deg);
}
.hero-content, .hero-video-card { position: relative; z-index: 2; }
.hero-logo { width: min(520px, 90%); margin: 12px 0 12px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.25)); }
.eyebrow { margin: 0 0 10px; font-family: "Gomarice Rocks", sans-serif; font-size: 15px; letter-spacing: .12em; color: var(--orange); }
.hero .eyebrow { color: var(--yellow); }
h1, h2, h3 { margin: 0; font-family: "Gomarice Rocks", "Arial Black", sans-serif; font-weight: 400; letter-spacing: -.025em; line-height: .95; }
h1 { font-size: clamp(48px, 5.4vw, 84px); text-transform: uppercase; text-shadow: 0 8px 30px rgba(0,0,0,.18); }
h1 span { color: var(--yellow); }
h2 { font-size: clamp(44px, 5vw, 76px); }
h3 { font-size: 34px; }
.hero-copy { max-width: 720px; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.55; color: rgba(255,255,255,.9); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.launch-pill { display: inline-flex; gap: 12px; align-items: center; margin-top: 24px; padding: 9px 14px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.18); font-size: 12px; letter-spacing: .06em; }
.launch-pill strong { color: var(--yellow); }
.hero-video-card { border-radius: 22px 34px 20px 30px; overflow: hidden; border: 7px solid #fff7df; outline: 4px solid var(--ink-blue); box-shadow: 12px 14px 0 rgba(15,30,35,.58); transform: rotate(1.4deg); background: #111; }
.hero-video-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.media-label { position: absolute; left: 16px; bottom: 16px; background: rgba(0,0,0,.65); color: white; padding: 8px 12px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 30px; font-size: 36px; animation: bob 1.5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(7px); } }
.strip { position: relative; z-index: 3; max-width: 1160px; margin: -16px auto 0; padding: 26px 34px; display: flex; justify-content: space-between; gap: 24px; border: 4px solid var(--ink-blue); border-radius: 15px 24px 18px 28px; background: var(--ink); color: white; box-shadow: 8px 9px 0 var(--orange); font-family: "Gomarice Rocks", sans-serif; font-size: 15px; letter-spacing: .06em; transform: rotate(-1deg); }
.strip p:nth-child(2) { color: var(--yellow); }
.section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 120px 0; }
.feature-grid { display: grid; gap: 34px; }
.feature-card { min-height: 480px; display: grid; grid-template-columns: .9fr 1.1fr; border-radius: 20px 30px 24px 16px; overflow: hidden; background: #fffdf4; border: 4px solid var(--ink-blue); box-shadow: 9px 10px 0 rgba(38,56,66,.18); }
.feature-card:nth-child(odd) { transform: rotate(-.45deg); }
.feature-card:nth-child(even) { transform: rotate(.55deg); }
.feature-card:nth-child(1) { margin-right: 4%; }
.feature-card:nth-child(2) { margin-left: 6%; }
.feature-card:nth-child(3) { margin-right: 9%; }
.feature-card.reverse { grid-template-columns: 1.05fr .95fr; }
.feature-card.reverse .copy { order: 2; }
.feature-card.reverse img { order: 1; }
.feature-card .copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 70px); }
.feature-card h2 { margin-bottom: 22px; }
.feature-card p { font-size: 18px; line-height: 1.65; color: #515b61; }
.feature-card .punchline { font-weight: 900; color: var(--ink); }
.feature-card img, .feature-card video { width: 100%; height: 100%; min-height: 430px; object-fit: cover; }
.section-heading { max-width: 780px; margin-bottom: 50px; }
.section-heading h2 { margin-bottom: 20px; }
.section-heading > p:last-child { font-size: 19px; line-height: 1.6; color: var(--muted); }
.modes { padding-top: 60px; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.mode-card { overflow: hidden; border-radius: 22px 31px 20px 27px; background: var(--ink); color: white; border: 4px solid var(--ink-blue); box-shadow: 8px 9px 0 var(--orange); }
.mode-card:first-child { transform: rotate(-.8deg); }
.mode-card:last-child { transform: translateY(30px) rotate(.8deg); }
.mode-card video { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #111; }
.mode-copy { padding: 30px 34px 36px; }
.mode-copy h3 { margin: 13px 0 16px; font-size: 42px; color: var(--yellow); }
.mode-copy p { min-height: 100px; line-height: 1.55; color: rgba(255,255,255,.78); }
.status { display: inline-block; padding: 7px 10px; border-radius: 999px; font-size: 11px; font-weight: 1000; letter-spacing: .08em; }
.status.live { background: var(--green); color: white; }
.danger-band { position: relative; min-height: 650px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: stretch; background: #3a1d18; color: white; overflow: hidden; }
.danger-band img { width: 100%; height: 100%; min-height: 650px; object-fit: cover; }
.danger-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(50px, 7vw, 100px); }
.danger-copy h2 { margin-bottom: 28px; }
.danger-copy p:last-child { font-size: 19px; line-height: 1.65; color: rgba(255,255,255,.75); }
.play-way { text-align: center; }
.play-way .section-heading { margin-left: auto; margin-right: auto; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat-grid > div { padding: 40px 20px; border-radius: 16px 24px 18px 27px; background: #fffdf4; border: 3px solid var(--ink-blue); box-shadow: 5px 6px 0 rgba(240,90,54,.25); }
.stat-grid > div:nth-child(odd) { transform: rotate(-1deg); }
.stat-grid > div:nth-child(even) { transform: rotate(1deg); }
.stat-grid strong { display: block; font-size: 70px; line-height: .9; color: var(--orange); }
.stat-grid span { display: block; margin-top: 14px; font-weight: 900; }
.ea-details { padding-top: 20px; }
.ea-card { display: grid; grid-template-columns: .8fr 1fr .9fr; gap: 34px; align-items: start; padding: clamp(34px, 5vw, 68px); border-radius: var(--radius); background: #ffe8a8; border: 2px solid #efbd37; transform: rotate(.35deg); box-shadow: 0 16px 44px rgba(116, 81, 21, .10); }
.ea-card h2 { font-size: 54px; }
.ea-card ul { margin: 0; padding-left: 22px; line-height: 1.8; font-weight: 700; }
.ea-note { padding: 24px; border-radius: 20px; background: rgba(255,255,255,.6); line-height: 1.55; }
.roadmap { padding-top: 80px; }
.timeline { position: relative; display: grid; gap: 20px; }
.timeline::before { content: ""; position: absolute; left: 37px; top: 40px; bottom: 40px; width: 3px; background: linear-gradient(var(--orange), #e0c9a1); }
.road-card { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 20px; align-items: center; min-height: 150px; padding: 24px 26px; border-radius: 17px 25px 20px 28px; background: #fffdf4; border: 3px solid var(--ink-blue); box-shadow: 7px 8px 0 rgba(38,56,66,.13); }
.road-card:nth-child(odd) { transform: rotate(-.3deg); }
.road-card:nth-child(even) { transform: rotate(.3deg); }
.road-card.media { grid-template-columns: 76px 1fr minmax(280px, 380px); }
.road-card.current { background: #e9f7da; border-color: #b8dc91; }
.road-card.next { background: #fff0c7; border-color: #e8c764; }
.step { position: relative; z-index: 2; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: white; font-weight: 1000; font-size: 13px; box-shadow: 0 7px 18px rgba(240,90,54,.23); }
.road-card.current .step { background: var(--green); }
.road-card h3 { font-size: 30px; margin-bottom: 9px; }
.road-card p { margin: 0; line-height: 1.55; color: var(--muted); }
.road-card video, .road-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 16px; }
.founder { padding-top: 50px; }
.founder-card { padding: clamp(40px, 7vw, 90px); border-radius: 34px; background: var(--ink); color: white; position: relative; overflow: hidden; }
.founder-card::after { content: "EGG!"; position: absolute; right: -15px; bottom: -50px; font-size: 170px; font-weight: 1000; color: rgba(255,255,255,.035); transform: rotate(-8deg); }
.founder-card h2 { max-width: 720px; margin-bottom: 28px; color: var(--yellow); }
.founder-card p { max-width: 850px; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.76); }
.final-cta { text-align: center; padding: 120px 20px 140px; background: var(--orange); color: white; clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); }
.final-cta .eyebrow { color: var(--yellow); }
.final-cta h2 { margin: 0 auto 34px; font-size: clamp(56px, 8vw, 110px); text-transform: uppercase; }
.final-cta .button { background: var(--ink); box-shadow: 0 18px 40px rgba(0,0,0,.22); }
footer { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; padding: 44px clamp(20px,6vw,90px); background: #351b17; color: rgba(255,255,255,.72); font-size: 12px; }
footer img { width: 140px; }
.doodle { position: absolute; z-index: 3; fill: none; stroke: var(--yellow); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; filter: drop-shadow(3px 3px 0 rgba(20,30,32,.28)); }
.doodle-burst { width: 110px; right: 5%; top: 16%; transform: rotate(9deg); }
.doodle-squiggle { width: 230px; right: 8%; bottom: 12%; transform: rotate(-8deg); }
.hand-note { position: absolute; z-index: 4; right: 7%; bottom: 24%; padding: 9px 13px; color: var(--ink-blue); background: var(--yellow); border: 3px solid var(--ink-blue); box-shadow: 4px 5px 0 var(--ink-blue); font-family: "Super Kindly", sans-serif; font-size: 19px; transform: rotate(-7deg); }
.doodle-divider { width: min(1100px, calc(100% - 44px)); height: 60px; margin: 52px auto -50px; }
.doodle-divider svg { width: 100%; height: 100%; fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: round; }
.section-scribble { width: 210px; margin: -38px 0 34px 12px; fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: round; }
.roadmap { position: relative; }
.roadmap-stamp { position: absolute; right: 2%; top: 105px; width: 128px; height: 128px; display: grid; place-content: center; text-align: center; border: 5px double var(--orange); border-radius: 50%; color: var(--orange); font-family: "Gomarice Rocks", sans-serif; font-size: 17px; line-height: 1.05; transform: rotate(10deg); opacity: .8; }
.roadmap-stamp small { font-family: "Super Kindly", sans-serif; font-size: 12px; }
.feature-card, .mode-card, .road-card { position: relative; }
.gate-locked { overflow: hidden; }
.egg-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; min-height: 100svh; padding: 28px; overflow: hidden; color: white; text-align: center; background: radial-gradient(circle at 50% 42%, #f36a48 0 18%, #c9442b 42%, #253940 100%); }
.egg-gate::before { content: ""; position: absolute; inset: 0; opacity: .2; background: repeating-linear-gradient(121deg, transparent 0 38px, rgba(255,200,74,.5) 39px 42px, transparent 43px 82px); }
.gate-logo { position: relative; z-index: 6; width: min(520px, 70vw); margin-bottom: -52px; filter: drop-shadow(8px 10px 0 rgba(31,38,42,.48)); transform: rotate(-1.5deg); }
.gate-stage { position: relative; z-index: 2; display: grid; place-items: center; width: 520px; height: 520px; padding: 0; border: 0; color: var(--ink-blue); background: transparent; cursor: pointer; }
.gate-stage:focus-visible { outline: 7px solid var(--yellow); outline-offset: 6px; }
.gate-rays { position: absolute; z-index: 2; left: 50%; top: 50%; width: 170vmax; height: 170vmax; border-radius: 50%; opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(255,215,74,.95) 0deg 8deg, transparent 8deg 17deg, rgba(255,255,255,.78) 17deg 23deg, transparent 23deg 34deg); transform: translate(-50%, -50%) scale(.08); mix-blend-mode: screen; }
.gate-egg { position: relative; z-index: 4; display: block; width: 390px; height: 390px; object-fit: contain; object-position: center; filter: drop-shadow(13px 17px 0 rgba(31,38,42,.48)); transform-origin: 50% 54%; }
.gate-stage.cracking .gate-egg { animation: egg-hop .44s cubic-bezier(.2,.8,.25,1); }
.gate-shards { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.gate-shard { --shard-x: 0vw; --shard-y: 0vh; --shard-r: 0deg; position: absolute; left: 50%; top: 50%; width: 390px; height: 390px; object-fit: contain; opacity: 0; transform: translate(-50%, -50%); filter: drop-shadow(8px 10px 0 rgba(31,38,42,.28)); }
.shard-one { --shard-x: -55vw; --shard-y: -38vh; --shard-r: -95deg; clip-path: polygon(0 0, 51% 0, 48% 45%, 0 50%); }
.shard-two { --shard-x: 5vw; --shard-y: -58vh; --shard-r: 120deg; clip-path: polygon(49% 0, 100% 0, 100% 48%, 52% 45%); }
.shard-three { --shard-x: 57vw; --shard-y: -24vh; --shard-r: 155deg; clip-path: polygon(51% 43%, 100% 46%, 100% 79%, 52% 73%); }
.shard-four { --shard-x: -58vw; --shard-y: 24vh; --shard-r: -165deg; clip-path: polygon(0 47%, 49% 43%, 49% 73%, 0 80%); }
.shard-five { --shard-x: -30vw; --shard-y: 57vh; --shard-r: 135deg; clip-path: polygon(0 78%, 50% 70%, 49% 100%, 0 100%); }
.shard-six { --shard-x: 48vw; --shard-y: 52vh; --shard-r: -125deg; clip-path: polygon(51% 70%, 100% 77%, 100% 100%, 49% 100%); }
.gate-flopo { position: absolute; z-index: 3; left: 50%; top: 50%; width: 360px; opacity: 0; transform: translate(-50%, -25%) scale(.15) rotate(-12deg); filter: drop-shadow(12px 15px 0 rgba(31,38,42,.35)); }
.egg-gate.hatching .gate-egg { animation: egg-hatch 1.15s cubic-bezier(.2,.8,.25,1) forwards; }
.egg-gate.hatching .gate-shard { animation: shell-burst 1.12s .22s cubic-bezier(.12,.72,.22,1) forwards; }
.egg-gate.hatching .gate-flopo { animation: flopo-pop .95s .62s cubic-bezier(.16,1.3,.35,1) forwards; }
.egg-gate.hatching .gate-rays { animation: ray-spin .72s linear infinite, ray-flash 1.55s ease forwards; }
.egg-gate.hatching .gate-confetti i { animation: confetti-burst 1.2s .28s cubic-bezier(.15,.75,.25,1) forwards; }
.egg-gate.hatching { animation: gate-away .65s 1.65s ease forwards; }
@keyframes egg-hop { 0%, 100% { transform: translateY(0) rotate(0) scale(1); } 42% { transform: translateY(-48px) rotate(-7deg) scale(1.05); } 68% { transform: translateY(-10px) rotate(5deg) scale(.98); } }
@keyframes egg-hatch { 0% { transform: translateY(0) rotate(0) scale(1); opacity: 1; } 18% { transform: translateY(-54px) rotate(14deg) scale(1.08); opacity: 1; } 28% { transform: translateY(0) rotate(0) scale(1); opacity: 1; } 29%, 100% { transform: scale(1); opacity: 0; } }
@keyframes shell-burst { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(1); } 3% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--shard-x)), calc(-50% + var(--shard-y))) rotate(var(--shard-r)) scale(.72); } }
@keyframes flopo-pop { 0% { opacity: 0; transform: translate(-50%, -10%) scale(.15) rotate(-12deg); } 68% { opacity: 1; transform: translate(-50%, -62%) scale(1.12) rotate(5deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
@keyframes ray-spin { from { transform: translate(-50%, -50%) rotate(0deg) scale(1); } to { transform: translate(-50%, -50%) rotate(360deg) scale(1); } }
@keyframes ray-flash { 0% { opacity: 0; } 18%, 75% { opacity: .82; } 100% { opacity: 0; } }
@keyframes confetti-burst { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.2); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) rotate(var(--burst-r)) scale(1); } }
@keyframes gate-away { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }
.gate-confetti i { --burst-x: 0vw; --burst-y: 0vh; --burst-r: 180deg; position: absolute; z-index: 5; left: 50%; top: 55%; width: clamp(14px, 1.3vw, 22px); height: clamp(32px, 3vw, 48px); border: 3px solid var(--ink-blue); opacity: 0; background: var(--yellow); }
.gate-confetti i:nth-child(1) { --burst-x: -49vw; --burst-y: -48vh; --burst-r: -410deg; background: #fff4df; }
.gate-confetti i:nth-child(2) { --burst-x: 48vw; --burst-y: -51vh; --burst-r: 520deg; background: #ff8a3d; }
.gate-confetti i:nth-child(3) { --burst-x: -43vw; --burst-y: 43vh; --burst-r: 610deg; background: #ffad32; }
.gate-confetti i:nth-child(4) { --burst-x: 45vw; --burst-y: 42vh; --burst-r: -540deg; background: #ffc84a; }
.gate-confetti i:nth-child(5) { --burst-x: -54vw; --burst-y: -5vh; --burst-r: 470deg; background: #ffe37a; }
.gate-confetti i:nth-child(6) { --burst-x: 54vw; --burst-y: -3vh; --burst-r: -620deg; background: #ff7956; }
.gate-confetti i:nth-child(7) { --burst-x: -31vw; --burst-y: -54vh; --burst-r: 740deg; background: #ffc84a; }
.gate-confetti i:nth-child(8) { --burst-x: 30vw; --burst-y: -56vh; --burst-r: -680deg; background: #fff4df; }
.gate-confetti i:nth-child(9) { --burst-x: -19vw; --burst-y: 51vh; --burst-r: -520deg; background: #ff8a3d; }
.gate-confetti i:nth-child(10) { --burst-x: 20vw; --burst-y: 53vh; --burst-r: 590deg; background: #ffad32; }
.gate-confetti i:nth-child(11) { --burst-x: -51vw; --burst-y: 22vh; --burst-r: 430deg; background: #ff7956; }
.gate-confetti i:nth-child(12) { --burst-x: 52vw; --burst-y: 20vh; --burst-r: -570deg; background: #ffc84a; }
.gate-confetti i:nth-child(13) { --burst-x: -40vw; --burst-y: -31vh; --burst-r: -390deg; background: #ffe37a; }
.gate-confetti i:nth-child(14) { --burst-x: 39vw; --burst-y: -29vh; --burst-r: 490deg; background: #fff4df; }
.gate-confetti i:nth-child(15) { --burst-x: -10vw; --burst-y: -58vh; --burst-r: 650deg; background: #ffad32; }
.gate-confetti i:nth-child(16) { --burst-x: 9vw; --burst-y: -59vh; --burst-r: -720deg; background: #ff8a3d; }
.gate-confetti i:nth-child(17) { --burst-x: -35vw; --burst-y: 49vh; --burst-r: 560deg; background: #ffc84a; }
.gate-confetti i:nth-child(18) { --burst-x: 37vw; --burst-y: 48vh; --burst-r: -610deg; background: #ff7956; }

/* Text safety and color hierarchy inside the existing jagged containers. */
h1, h2, h3 { text-transform: uppercase; }
.feature-card, .mode-card, .road-card, .ea-card, .founder-card, .stat-grid > div {
  --surface: #8f351f;
  background-color: var(--surface);
  background-image: linear-gradient(var(--surface), var(--surface));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-clip: border-box;
  color: white;
  isolation: isolate;
  backface-visibility: hidden;
}
.feature-card:nth-child(1) { --surface: #8f351f; }
.feature-card:nth-child(2) { --surface: #bd4b25; }
.feature-card:nth-child(3) { --surface: #713023; }
.mode-card:first-child { --surface: #a43d20; }
.mode-card:last-child { --surface: #d15b27; }
.ea-card { --surface: #9f3b20; border-color: transparent; }
.founder-card { --surface: var(--ink); }
.road-card:nth-child(4n+1) { --surface: #8f351f; }
.road-card:nth-child(4n+2) { --surface: #b74722; }
.road-card:nth-child(4n+3) { --surface: #703025; }
.road-card:nth-child(4n) { --surface: #d06427; }
.stat-grid > div:nth-child(1) { --surface: #8f351f; }
.stat-grid > div:nth-child(2) { --surface: #bd4b25; }
.stat-grid > div:nth-child(3) { --surface: #713023; }
.stat-grid > div:nth-child(4) { --surface: #d06427; }
.section-heading { --surface: #8f351f; padding: 38px 48px 44px; color: white; background-color: var(--surface); background-image: linear-gradient(var(--surface), var(--surface)); background-repeat: no-repeat; background-size: 100% 100%; background-clip: border-box; isolation: isolate; clip-path: polygon(1% 10%, 7% 1%, 94% 4%, 100% 18%, 97% 89%, 88% 100%, 4% 95%, 0 78%); filter: drop-shadow(8px 9px 0 rgba(240,90,54,.45)); }
.play-way .section-heading { --surface: #b74722; }
.roadmap .section-heading { --surface: #713025; }
.feature-card p, .mode-copy p, .road-card p, .danger-copy p:last-child, .founder-card p, .section-heading > p:last-child, footer p { color: white; }
.feature-card .punchline, .mode-copy strong, .ea-card strong, .stat-grid strong { color: var(--yellow); }
.feature-card h2, .road-card h3, .section-heading h2, .ea-card h2, .founder-card h2, .danger-copy h2, .play-way h2 { color: var(--yellow); }
.feature-card:nth-child(2) h2, .road-card:nth-child(even) h3 { color: #fff4df; }
.feature-card .eyebrow, .mode-card .status, .section-heading .eyebrow, .ea-card .eyebrow, .danger-copy .eyebrow, .founder-card .eyebrow { color: #ffe37a; }
.status.live { background: #6b2b1e; color: white; }
.ea-note { background: #fff1c9; color: var(--ink); }
.ea-note p, .ea-note strong { color: var(--ink); }
.final-cta { background-color: #b93e26; background-image: linear-gradient(#b93e26, #b93e26); background-repeat: no-repeat; background-size: 100% 100%; }
.button { background: #c84125; color: white; }
.button:hover { background: #ae351f; }
.button.ghost { background: rgba(15,25,29,.7); border: 2px solid rgba(255,255,255,.75); color: white; }
.final-cta .button { background: var(--ink); color: white; }
.final-cta .button:hover { background: #19272d; }
.launch-pill { background: rgba(0,0,0,.6); border: 2px solid rgba(255,255,255,.55); }
.media-label { background: rgba(0,0,0,.82); }
.status, .media-label, .launch-pill { line-height: 1.35; }
h1, h2, h3, .eyebrow, .button, .status, .launch-pill, .stat-grid span {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
h1, h2, h3 {
  width: fit-content;
  padding: .08em .12em .12em .04em;
  text-wrap: balance;
}
p, li { overflow-wrap: break-word; }
.feature-card .copy { padding: clamp(56px, 6vw, 86px); min-width: 0; }
.mode-copy { padding: 44px 48px 50px; min-width: 0; }
.road-card { padding: 38px 42px; }
.road-card > div, .ea-card > *, .founder-card > *, .stat-grid > div > * { min-width: 0; }
.road-card h3, .ea-card h2, .founder-card h2, .stat-grid span { overflow-wrap: normal; word-break: normal; }
.ea-card { padding: clamp(52px, 6vw, 82px); }
.founder-card { padding: clamp(66px, 8vw, 105px); }
.stat-grid > div { padding: 48px 30px; }
.feature-card:nth-child(1) .copy { transform: rotate(-.65deg); }
.feature-card:nth-child(2) .copy { transform: rotate(.8deg); }
.feature-card:nth-child(3) .copy { transform: rotate(-.45deg); }
.mode-card:first-child .mode-copy { transform: rotate(-.7deg); }
.mode-card:last-child .mode-copy { transform: rotate(.7deg); }
.road-card:nth-child(odd) > div { transform: rotate(-.35deg); }
.road-card:nth-child(even) > div { transform: rotate(.4deg); }
.section-heading h2 { transform: rotate(-.65deg); transform-origin: left center; }
.ea-card > div:first-child { transform: rotate(-.8deg); }
.founder-card > * { transform: rotate(-.3deg); transform-origin: left center; }
.section-heading > *, .feature-card .copy > *, .mode-copy > *, .ea-card > *, .road-card > *, .founder-card > *, .danger-copy > *, .final-cta > * {
  position: relative;
  z-index: 2;
}
/* Prehistoric cut-paper surfaces: deliberately sharp, uneven and non-mirrored. */
.feature-card, .mode-card, .road-card, .ea-card, .founder-card, .stat-grid > div {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(8px 10px 0 rgba(91,43,29,.25));
}
.feature-card:nth-child(1) { clip-path: polygon(2% 0, 91% 3%, 100% 15%, 97% 84%, 89% 100%, 7% 96%, 0 81%, 1% 13%); }
.feature-card:nth-child(2) { clip-path: polygon(0 9%, 12% 1%, 96% 4%, 100% 29%, 98% 94%, 78% 98%, 5% 100%, 2% 72%); }
.feature-card:nth-child(3) { clip-path: polygon(5% 2%, 82% 0, 100% 10%, 96% 74%, 100% 93%, 83% 100%, 2% 95%, 0 24%); }
.mode-card:first-child { clip-path: polygon(0 7%, 11% 0, 88% 4%, 100% 17%, 97% 92%, 83% 100%, 6% 96%, 2% 77%); }
.mode-card:last-child { clip-path: polygon(6% 0, 96% 5%, 100% 34%, 96% 100%, 16% 96%, 0 84%, 3% 17%); }
.ea-card { clip-path: polygon(0 11%, 8% 2%, 37% 5%, 62% 0, 96% 6%, 100% 23%, 97% 91%, 88% 100%, 9% 96%, 2% 84%); }
.road-card:nth-child(3n+1) { clip-path: polygon(1% 10%, 6% 1%, 92% 3%, 100% 16%, 98% 87%, 91% 100%, 4% 96%, 0 79%); }
.road-card:nth-child(3n+2) { clip-path: polygon(0 5%, 13% 1%, 96% 7%, 100% 32%, 97% 96%, 73% 100%, 3% 94%); }
.road-card:nth-child(3n) { clip-path: polygon(4% 0, 86% 3%, 100% 13%, 98% 77%, 100% 95%, 89% 100%, 0 94%, 2% 19%); }
.founder-card { clip-path: polygon(0 14%, 7% 2%, 39% 5%, 62% 0, 97% 9%, 100% 31%, 96% 88%, 84% 100%, 8% 95%, 2% 79%); }
.stat-grid > div:nth-child(1) { clip-path: polygon(4% 0, 100% 8%, 94% 100%, 0 91%); }
.stat-grid > div:nth-child(2) { clip-path: polygon(0 11%, 94% 0, 100% 91%, 8% 100%); }
.stat-grid > div:nth-child(3) { clip-path: polygon(8% 0, 100% 4%, 91% 100%, 0 87%); }
.stat-grid > div:nth-child(4) { clip-path: polygon(0 4%, 91% 0, 100% 84%, 12% 100%); }
.button { border: 0; border-radius: 0; box-shadow: none; clip-path: polygon(4% 0, 91% 4%, 100% 19%, 96% 86%, 85% 100%, 6% 94%, 0 72%, 2% 16%); filter: drop-shadow(5px 6px 0 var(--ink-blue)); }
.button:hover { box-shadow: none; filter: drop-shadow(3px 4px 0 var(--ink-blue)); }
.strip, .launch-pill, .status, .media-label, .ea-note { border-radius: 0; clip-path: polygon(2% 0, 96% 5%, 100% 28%, 97% 88%, 87% 100%, 3% 93%, 0 67%); }
.strip { border: 0; background: repeating-linear-gradient(3deg, #563522 0 8px, #70462a 9px 17px, #422b20 18px 21px); filter: drop-shadow(8px 9px 0 var(--orange)); padding: 34px 48px; }
.step { border-radius: 0; clip-path: polygon(50% 0, 91% 14%, 100% 58%, 78% 100%, 31% 93%, 0 63%, 9% 18%); }
.section-heading { transform: rotate(-.55deg); }
.mode-copy, .feature-card .copy { position: relative; z-index: 2; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.feature-card.reveal.visible:nth-child(1) { transform: translateX(-2.5%) rotate(-1.1deg); }
.feature-card.reveal.visible:nth-child(2) { transform: translateX(3.5%) rotate(.9deg); }
.feature-card.reveal.visible:nth-child(3) { transform: translateX(-1%) rotate(-.6deg); }
.mode-card.reveal.visible:first-child { transform: translateY(-12px) rotate(-1.3deg); }
.mode-card.reveal.visible:last-child { transform: translateY(34px) rotate(1.5deg); }
.road-card.reveal.visible:nth-child(odd) { transform: translateX(-1.4%) rotate(-.35deg); }
.road-card.reveal.visible:nth-child(even) { transform: translateX(1.8%) rotate(.4deg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue { animation: none; }
  .party-bg [data-parallax] { transform: none !important; }
  .egg-gate.hatching { animation: gate-away .16s .02s ease forwards; }
  .gate-stage.cracking .gate-egg { animation: none; }
  .egg-gate.hatching .gate-egg { animation: none; opacity: 0; }
  .egg-gate.hatching .gate-shard { animation: none; opacity: 0; }
  .egg-gate.hatching .gate-flopo { animation: none; opacity: 1; transform: translate(-50%, -50%); }
  .egg-gate.hatching .gate-rays, .egg-gate.hatching .gate-confetti i { animation: none; opacity: 0; }
}
@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 125px; padding-bottom: 130px; }
  .hero-content { max-width: 760px; }
  .hero-video-card { max-width: 760px; transform: none; }
  .hand-note { right: 8%; bottom: 8%; }
  .roadmap-stamp { display: none; }
  .strip { width: calc(100% - 32px); flex-direction: column; text-align: center; gap: 8px; }
  .feature-card, .feature-card.reverse { grid-template-columns: 1fr; }
  .feature-card:nth-child(n) { margin-left: 0; margin-right: 0; }
  .feature-card.reveal.visible:nth-child(n), .road-card.reveal.visible:nth-child(n) { transform: none; }
  .feature-card.reverse .copy, .feature-card.reverse img { order: initial; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card:last-child { transform: rotate(.8deg); }
  .mode-card.reveal.visible:first-child, .mode-card.reveal.visible:last-child { transform: none; }
  .danger-band { grid-template-columns: 1fr; }
  .danger-band img { min-height: 400px; max-height: 560px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .ea-card { grid-template-columns: 1fr; }
  .road-card.media { grid-template-columns: 76px 1fr; }
  .road-card.media video, .road-card.media img { grid-column: 2; }
}
@media (max-width: 620px) {
  .egg-gate { padding: 20px 14px; }
  .gate-logo { width: min(330px, 84vw); margin-bottom: -34px; }
  .gate-stage { width: 360px; height: 390px; margin-top: -8px; }
  .gate-egg { width: 292px; height: 292px; }
  .gate-shard { width: 292px; height: 292px; }
  .gate-rays { width: 180vmax; height: 180vmax; }
  .gate-flopo { width: 252px; }
  .site-header { height: 66px; padding: 10px 14px; }
  .brand img { width: 118px; }
  .site-header .button { min-height: 38px; padding: 0 13px; font-size: 11px; }
  .hero { padding: 110px 18px 120px; }
  .doodle-burst { width: 72px; top: 10%; right: 3%; }
  .doodle-squiggle, .hand-note { display: none; }
  .bg-flopo { width: 250px; opacity: .13; }
  .bg-eggs { width: 210px; opacity: .2; }
  .flopo-two { top: 48%; }
  .flopo-four, .flopo-five, .cave-marks { display: none; }
  .confetti-field { opacity: .5; }
  h1 { font-size: clamp(34px, 10.5vw, 44px); line-height: 1.12; letter-spacing: -.01em; }
  h2 { font-size: clamp(30px, 8.8vw, 40px); line-height: 1.12; letter-spacing: -.01em; }
  h3 { line-height: 1.12; letter-spacing: -.01em; }
  .eyebrow { font-size: 13px; line-height: 1.45; letter-spacing: .08em; }
  .hero-copy { font-size: 17px; }
  .section { width: min(100% - 28px, 1180px); padding: 84px 0; }
  .section-heading { padding: 52px 46px 56px; transform: rotate(-.25deg); }
  .section-heading h2 { font-size: clamp(30px, 8.8vw, 40px); }
  .feature-card .copy { padding: 58px 46px 62px; }
  .feature-card img, .feature-card video { min-height: 260px; }
  .mode-copy { padding: 50px 46px 56px; }
  .mode-copy p { min-height: 0; }
  .mode-copy h3 { font-size: clamp(29px, 9vw, 38px); }
  .status { padding: 10px 18px; }
  .strip { padding: 42px 34px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-grid > div { min-height: 158px; padding: 44px 24px; display: flex; flex-direction: column; justify-content: center; }
  .stat-grid strong { font-size: 50px; }
  .stat-grid span { font-size: 14px; line-height: 1.35; }
  .timeline::before { left: 28px; }
  .road-card, .road-card.media { grid-template-columns: 56px 1fr; padding: 38px 28px 42px; gap: 14px; }
  .step { width: 44px; height: 44px; }
  .road-card h3 { font-size: clamp(22px, 6.5vw, 28px); line-height: 1.15; }
  .road-card.media video, .road-card.media img { grid-column: 1 / -1; }
  .ea-card { padding: 58px 46px 62px; gap: 28px; }
  .ea-card h2 { font-size: clamp(30px, 8.8vw, 40px); line-height: 1.12; }
  .ea-note { padding: 28px; }
  .founder-card { padding: 66px 46px 72px; }
  .final-cta { padding-left: 28px; padding-right: 28px; }
  .final-cta h2 { font-size: clamp(38px, 11vw, 56px); line-height: 1.12; }
  .button.huge { width: min(100%, 340px); min-height: 72px; padding: 12px 30px; text-align: center; line-height: 1.25; }
  .site-header .button { padding: 0 18px; line-height: 1.15; text-align: center; }
  footer { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .stat-grid { grid-template-columns: 1fr; gap: 14px; }
  .stat-grid > div { min-height: 142px; padding: 42px 32px; }
  .timeline::before { left: 68px; }
  .road-card, .road-card.media { grid-template-columns: 1fr; padding: 48px 46px 52px; gap: 16px; }
  .road-card.media video, .road-card.media img { grid-column: 1; }
  .road-card p { line-height: 1.62; }
  .section-heading, .feature-card .copy, .mode-copy, .ea-card, .founder-card { padding-left: 46px; padding-right: 46px; }
}

/* Final contrast and clipping fixes. Keep jagged silhouettes without border slivers. */
.feature-card::before,
.mode-card::before,
.road-card::after {
  content: none;
  display: none;
}

.button.ghost,
.launch-pill {
  border: 0;
  outline: 0;
  background-clip: border-box;
}

.button.ghost {
  background-color: #3d251f;
  background-image: linear-gradient(#3d251f, #3d251f);
}

.launch-pill {
  background-color: #3d251f;
  background-image: linear-gradient(#3d251f, #3d251f);
}

.timeline > .road-card {
  --surface: #7a2b1e;
  background: var(--surface);
  color: #fff;
}

.timeline > .road-card:nth-child(4n+2) { --surface: #96371f; }
.timeline > .road-card:nth-child(4n+3) { --surface: #5f2a21; }
.timeline > .road-card:nth-child(4n) { --surface: #87301d; }

.timeline > .road-card h3 {
  color: #ffd65a;
  text-shadow: 0 2px 0 rgba(61,37,31,.38);
}

.timeline > .road-card p {
  color: #fff;
  opacity: 1;
}

.timeline > .road-card .step,
.timeline > .road-card.current .step {
  background: #c74626;
  color: #fff;
  text-shadow: 0 1px 0 rgba(61,37,31,.35);
}