:root {
  --red: #ff1717;
  --orange: #ff6a00;
  --yellow: #ffd800;
  --green: #00a63c;
  --blue: #0758f8;
  --purple: #7f0396;
  --black: #080808;
  --white: #f7f7f4;
  --line: 5px solid var(--black);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }
body {
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
  background: var(--black);
  color: var(--black);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.topbar {
  position: fixed;
  z-index: 50;
  left: 18px;
  right: 18px;
  top: 16px;
  height: 58px;
  display: flex;
  align-items: stretch;
  background: rgba(247,247,244,.96);
  border: 4px solid var(--black);
  box-shadow: 8px 8px 0 var(--black);
}

.brand {
  display: grid;
  place-items: center;
  padding: 0 20px;
  font-size: 28px;
  letter-spacing: -1px;
  background: var(--yellow);
  border-right: 4px solid var(--black);
}

.topnav { display: flex; align-items: stretch; flex: 1; }
.topnav a {
  display: grid;
  place-items: center;
  min-width: 105px;
  padding: 0 14px;
  font-family: Arial, sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-right: 2px solid var(--black);
}
.topnav a:hover { background: var(--orange); }

.mini-cta {
  display: grid;
  place-items: center;
  padding: 0 22px;
  font-size: 14px;
  letter-spacing: 1px;
  background: var(--red);
  color: var(--white);
}
.mini-cta:hover { background: var(--purple); }

.slide {
  position: relative;
  min-height: 100svh;
  scroll-snap-align: start;
  overflow: hidden;
  padding: 110px clamp(24px, 5vw, 84px) 56px;
}

.hero {
  background: var(--yellow);
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
}

.rainbow-rail {
  position: absolute;
  inset: 0 auto 0 0;
  width: 20px;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
}
.rainbow-rail span:nth-child(1){background:var(--red)}
.rainbow-rail span:nth-child(2){background:var(--orange)}
.rainbow-rail span:nth-child(3){background:var(--yellow)}
.rainbow-rail span:nth-child(4){background:var(--green)}
.rainbow-rail span:nth-child(5){background:var(--blue)}
.rainbow-rail span:nth-child(6){background:var(--purple)}

.kicker {
  margin: 0 0 18px;
  font-family: Arial, sans-serif;
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--black);
}
.kicker.dark { color: var(--black); }

.hero h1,
.launch h2,
.chart-heading h2,
.final-copy h2 {
  margin: 0;
  text-transform: uppercase;
  line-height: .79;
  letter-spacing: -.065em;
}

.hero h1 {
  font-size: clamp(116px, 18vw, 300px);
  color: var(--black);
  text-shadow: 10px 10px 0 var(--white);
}
.hero h1 span { color: var(--red); }
.hero-sub {
  display: inline-block;
  margin: 28px 0 12px;
  padding: 10px 14px;
  border: var(--line);
  background: var(--white);
  font-size: clamp(22px, 2.4vw, 42px);
  line-height: 1;
  transform: rotate(-1deg);
}
.hero-text {
  max-width: 650px;
  margin: 12px 0 0;
  font-family: Arial, sans-serif;
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 700;
  line-height: 1.45;
}
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  min-height: 56px;
  padding: 0 22px;
  display: inline-grid;
  place-items: center;
  border: 4px solid var(--black);
  font-size: 15px;
  letter-spacing: 1px;
  box-shadow: 6px 6px 0 var(--black);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translate(4px,4px); box-shadow: 2px 2px 0 var(--black); }
.btn-black { background: var(--black); color: var(--white); }
.btn-white { background: var(--white); }

.hero-art { margin: 0; position: relative; justify-self: end; width: min(48vw, 660px); }
.hero-art img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 8px solid var(--black);
  box-shadow: 16px 16px 0 var(--black);
  transform: rotate(2deg);
}
.hero-art figcaption {
  position: absolute;
  left: -18px;
  bottom: -18px;
  background: var(--white);
  border: 4px solid var(--black);
  padding: 9px 14px;
  font-size: 20px;
}
.scroll-hint {
  position: absolute;
  right: 40px;
  bottom: 25px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
  border-bottom: 3px solid var(--black);
}

.section-label {
  position: absolute;
  left: 24px;
  top: 100px;
  font-family: Arial, sans-serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.section-label.light { color: var(--white); }

.launch {
  background: var(--orange);
  display: grid;
  grid-template-columns: minmax(300px, .88fr) 1.12fr;
  align-items: center;
  gap: clamp(36px, 6vw, 90px);
}
.launch::before {
  content: "";
  position: absolute;
  width: 42vw;
  height: 42vw;
  right: -18vw;
  top: -14vw;
  border-radius: 50%;
  background: var(--purple);
  border: 8px solid var(--black);
}
.launch-art { position: relative; z-index: 2; }
.launch-art img {
  width: min(42vw, 620px);
  border: 8px solid var(--black);
  box-shadow: -14px 14px 0 var(--black);
  transform: rotate(-2deg);
}
.launch-copy { position: relative; z-index: 2; }
.launch h2 {
  font-size: clamp(74px, 9vw, 160px);
  color: var(--white);
  -webkit-text-stroke: 4px var(--black);
  text-shadow: 10px 10px 0 var(--black);
}
.route { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 38px; }
.route article {
  min-height: 210px;
  padding: 18px;
  background: var(--white);
  border: 5px solid var(--black);
  box-shadow: 7px 7px 0 var(--black);
}
.route article:nth-child(2) { background: var(--yellow); }
.route article:nth-child(3) { background: var(--green); }
.route span { font-size: 16px; }
.route h3 { margin: 28px 0 8px; font-size: 34px; }
.route p { margin: 0; font-family: Arial, sans-serif; font-weight: 800; line-height: 1.35; }

.chart-slide {
  background: var(--blue);
  color: var(--white);
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  align-items: center;
  gap: clamp(28px, 4vw, 62px);
}
.chart-slide::after {
  content: "LIVE";
  position: absolute;
  left: -20px;
  bottom: -48px;
  font-size: clamp(140px, 24vw, 400px);
  line-height: .8;
  color: rgba(255,255,255,.08);
  pointer-events: none;
}
.chart-heading { position: relative; z-index: 2; }
.chart-heading .kicker { color: var(--yellow); }
.chart-heading h2 {
  font-size: clamp(80px, 9vw, 156px);
  color: var(--white);
  text-shadow: 10px 10px 0 var(--black);
}
.chart-heading p:last-child {
  max-width: 480px;
  margin-top: 26px;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.5;
}
.chart-shell {
  position: relative;
  z-index: 2;
  height: min(72vh, 720px);
  min-height: 520px;
  border: 7px solid var(--black);
  background: #111;
  box-shadow: 14px 14px 0 var(--black);
}
.chart-bar {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: var(--yellow);
  color: var(--black);
  border-bottom: 5px solid var(--black);
  font-family: Arial, sans-serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .12em;
}
.chart-bar a { border-bottom: 2px solid var(--black); }
.chart-shell iframe { width: 100%; height: calc(100% - 48px); border: 0; background: #111; }

.finale {
  background: var(--green);
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  align-items: center;
  gap: clamp(34px, 6vw, 90px);
}
.finale::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 21%;
  background: var(--purple);
  border-top: 7px solid var(--black);
}
.final-art { margin: 0; position: relative; z-index: 2; }
.final-art img {
  width: min(42vw, 620px);
  border: 8px solid var(--black);
  box-shadow: 15px 15px 0 var(--black);
  transform: rotate(2deg);
}
.final-copy { position: relative; z-index: 2; }
.final-copy h2 {
  font-size: clamp(86px, 10vw, 176px);
  color: var(--yellow);
  -webkit-text-stroke: 4px var(--black);
  text-shadow: 9px 9px 0 var(--black);
}
.final-note {
  max-width: 650px;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
}
.link-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}
.link-grid a {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px;
  background: var(--white);
  border: 5px solid var(--black);
  box-shadow: 6px 6px 0 var(--black);
  transition: transform .15s ease, background .15s ease;
}
.link-grid a:nth-child(2) { background: var(--yellow); }
.link-grid a:nth-child(3) { background: var(--red); color: var(--white); }
.link-grid a:nth-child(4) { background: var(--blue); color: var(--white); }
.link-grid a:hover { transform: translate(3px,3px); }
.link-grid span { font-size: clamp(21px, 2vw, 32px); }
.link-grid b { font-family: Arial, sans-serif; font-size: 10px; letter-spacing: .15em; }
.risk {
  margin-top: 20px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.side-dots {
  position: fixed;
  z-index: 60;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 9px;
}
.side-dots a {
  width: 15px;
  height: 15px;
  border: 3px solid var(--black);
  background: var(--white);
  box-shadow: 2px 2px 0 var(--black);
}
.side-dots a.active { background: var(--red); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.reveal-delay { transition-delay: .12s; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1000px) {
  .topnav { display: none; }
  .mini-cta { margin-left: auto; }
  .slide { padding: 105px 24px 58px; }
  .section-label { top: 88px; }
  .hero, .launch, .chart-slide, .finale { grid-template-columns: 1fr; }
  .hero { padding-top: 130px; }
  .hero-art, .launch-art img, .final-art img { width: min(82vw, 620px); justify-self: center; }
  .hero-copy { order: 1; }
  .hero-art { order: 2; justify-self: center; }
  .route { grid-template-columns: 1fr; }
  .route article { min-height: 0; }
  .chart-shell { height: 70vh; min-height: 520px; }
  .final-art { justify-self: center; }
  .side-dots { display: none; }
}

@media (max-width: 620px) {
  html { scroll-snap-type: none; }
  .topbar { left: 10px; right: 10px; top: 10px; height: 52px; box-shadow: 5px 5px 0 var(--black); }
  .brand { font-size: 22px; padding: 0 14px; }
  .mini-cta { padding: 0 12px; font-size: 11px; }
  .hero h1 { font-size: clamp(92px, 32vw, 160px); }
  .hero-sub { font-size: 20px; }
  .button-row { display: grid; grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .launch h2, .chart-heading h2, .final-copy h2 { font-size: clamp(68px, 22vw, 118px); }
  .launch-art img, .final-art img, .hero-art { width: 90vw; }
  .link-grid { grid-template-columns: 1fr; }
  .chart-shell { min-height: 480px; height: 72vh; box-shadow: 8px 8px 0 var(--black); }
  .chart-bar { font-size: 9px; }
  .chart-bar span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .link-grid a { transition: none; }
}