:root {
  --purple: #6f23c9;
  --purple-dark: #1b0c2c;
  --purple-mid: #33124f;
  --orange: #ff7518;
  --cream: #fff2d2;
  --pink: #f240b8;
  --ink: #170a23;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--purple);
  color: var(--cream);
  font-family: Arial Black, Impact, system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; }
.nav {
  height: 78px;
  padding: 0 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid rgba(255,242,210,.22);
  background: rgba(27,12,44,.25);
  position: relative;
  z-index: 10;
}
.brand { text-decoration: none; font-size: 1.35rem; letter-spacing: -.05em; transform: rotate(-1deg); }
.brand span { color: var(--orange); text-shadow: 2px 2px 0 var(--ink); }
nav { display: flex; gap: 2rem; font-family: system-ui, sans-serif; font-weight: 800; }
nav a { text-decoration: none; font-size: .95rem; }
nav a:hover, nav a:focus-visible { color: var(--orange); }
.hero {
  min-height: calc(100vh - 78px);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: 6rem 5vw;
  position: relative;
}
.hero::before { content:""; position:absolute; inset:6% 48% 12% -15%; border:4px solid rgba(255,255,255,.08); border-radius:50%; transform:rotate(-9deg); }
.eyebrow { color: var(--orange); text-transform: uppercase; letter-spacing: .13em; font-size: .85rem; margin: 0 0 1rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(4rem, 8vw, 8.5rem); letter-spacing: -.075em; line-height: .83; margin-bottom: 2rem; text-transform: uppercase; position: relative; }
h1 span { color: var(--orange); -webkit-text-stroke: 2px var(--ink); text-shadow: 6px 6px 0 var(--pink); }
.lede { font-family: system-ui, sans-serif; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.5; font-weight: 650; max-width: 590px; }
.actions { margin-top: 2.3rem; display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; }
.store-button { display:flex; align-items:center; gap:.7rem; background:var(--ink); border:2px solid var(--cream); border-radius:12px; padding:.65rem 1rem; min-width:190px; box-shadow:5px 5px 0 var(--orange); }
.store-button svg { width:31px; fill:white; }
.store-button span { display:flex; flex-direction:column; font-family:system-ui,sans-serif; font-size:1.3rem; line-height:1.05; font-weight:700; }
.store-button small { font-size:.58rem; letter-spacing:.08em; }
.text-link { font-family:system-ui,sans-serif; font-weight:850; text-decoration-thickness:2px; text-underline-offset:5px; }
.purchase-note { margin-top:1.4rem; max-width:500px; font-family:system-ui,sans-serif; font-size:.85rem; line-height:1.5; font-weight:700; opacity:.82; }
.hero-art { position:relative; min-height:680px; display:grid; place-items:center; }
.hero-art::before { content:""; width:min(41vw,590px); height:86%; border-radius:48% 52% 42% 58%; background:var(--orange); position:absolute; transform:rotate(4deg); box-shadow:18px 22px 0 var(--ink); }
.hero-art img { width:min(35vw,500px); max-height:680px; object-fit:contain; position:relative; z-index:2; border-radius:28px; box-shadow:12px 16px 0 rgba(23,10,35,.75); }
.scribble { position:absolute; z-index:3; color:var(--cream); -webkit-text-stroke:2px var(--ink); text-shadow:4px 4px 0 var(--pink); font-size:clamp(1.6rem,3vw,3rem); transform:rotate(-11deg); }
.scribble.one { top:12%; right:3%; }
.scribble.two { bottom:14%; left:5%; transform:rotate(8deg); }
.manifesto { background:var(--orange); color:var(--ink); padding:7rem 5vw; text-align:center; transform:rotate(-1.2deg) scale(1.02); border-block:5px solid var(--ink); }
.manifesto p { font-family:system-ui,sans-serif; text-transform:uppercase; letter-spacing:.2em; font-weight:900; }
.manifesto h2 { font-size:clamp(3rem,7vw,7rem); line-height:.9; letter-spacing:-.055em; text-transform:uppercase; margin:0; }
.modes { background:var(--cream); color:var(--ink); padding:10rem 5vw 7rem; display:grid; gap:2rem; }
.mode-card { max-width:1200px; width:100%; margin:0 auto; border:4px solid var(--ink); padding:clamp(2rem,5vw,5rem); box-shadow:12px 12px 0 var(--ink); display:grid; grid-template-columns:.25fr 1fr; align-items:center; position:relative; overflow:hidden; }
.mode-card h3 { font-size:clamp(2.2rem,5vw,5rem); line-height:.93; letter-spacing:-.05em; text-transform:uppercase; }
.mode-card p:not(.eyebrow) { font-family:system-ui,sans-serif; max-width:730px; line-height:1.65; font-weight:650; font-size:1.05rem; }
.number { font-size:7rem; color:var(--orange); -webkit-text-stroke:3px var(--ink); transform:rotate(-8deg); }
.mode-card ul { padding:0; display:flex; gap:.7rem; flex-wrap:wrap; list-style:none; font-family:system-ui,sans-serif; font-weight:850; }
.mode-card li { background:var(--ink); color:var(--cream); padding:.65rem .9rem; border-radius:100px; }
.let-it-go { background:var(--purple-dark); color:var(--cream); grid-template-columns:1.2fr .8fr; }
.box-art { width:min(28vw,320px); aspect-ratio:1.2; margin:auto; background:var(--orange); border:5px solid var(--cream); box-shadow:10px 12px 0 var(--pink); display:grid; place-items:center; transform:rotate(5deg); position:relative; }
.lid { position:absolute; top:-22px; left:-18px; width:calc(100% + 36px); height:32px; background:var(--orange); border:5px solid var(--cream); transform:rotate(-3deg); }
.box-face { text-align:center; font-size:clamp(1.4rem,3vw,2.6rem); line-height:.9; color:var(--ink); }
.privacy-note { border-left:5px solid var(--orange); padding-left:1rem; }
.showdown { background:var(--purple-mid); padding:7rem 5vw; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:5vw; }
.gremlin-stage { min-height:500px; display:grid; place-items:center; background:var(--orange); border-radius:50%; border:5px solid var(--cream); box-shadow:14px 16px 0 var(--ink); transform:rotate(-3deg); }
.showdown img { width:88%; max-height:530px; object-fit:contain; filter:drop-shadow(12px 15px 0 rgba(23,10,35,.6)); transform:rotate(3deg); }
.showdown h2, .support h2 { font-size:clamp(2.8rem,5.5vw,6rem); line-height:.92; letter-spacing:-.05em; text-transform:uppercase; }
.showdown p:not(.eyebrow), .support p { font-family:system-ui,sans-serif; font-size:1.1rem; line-height:1.6; font-weight:650; }
.ideas { background:var(--cream); color:var(--ink); padding:7rem 5vw; display:grid; grid-template-columns:1.15fr .85fr; gap:7vw; align-items:center; border-block:5px solid var(--ink); }
.ideas h2 { font-size:clamp(2.8rem,5vw,5.7rem); line-height:.92; letter-spacing:-.05em; text-transform:uppercase; margin:0; }
.ideas div:last-child { font-family:system-ui,sans-serif; font-size:1.1rem; line-height:1.6; font-weight:650; }
.idea-button { display:inline-block; margin-top:1.2rem; padding:1rem 1.3rem; background:var(--purple); color:var(--cream); border:3px solid var(--ink); box-shadow:6px 7px 0 var(--orange); text-decoration:none; font-weight:900; }
.idea-button:hover, .idea-button:focus-visible { transform:translate(-2px,-2px); box-shadow:8px 9px 0 var(--orange); }
.support { text-align:center; padding:8rem 5vw; background:var(--orange); color:var(--ink); }
.support .eyebrow { color:var(--purple-dark); }
.support h2 { max-width:900px; margin-left:auto; margin-right:auto; }
.support a { font-size:clamp(1.2rem,3vw,2rem); }
.support small { display:block; margin-top:1rem; font-family:system-ui,sans-serif; font-weight:750; }
footer { padding:2.2rem 5vw; background:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1.5rem; font-family:system-ui,sans-serif; font-size:.9rem; }
footer .small { font-family:Arial Black,Impact,sans-serif; }
footer div { display:flex; gap:1.5rem; }

@media (max-width: 820px) {
  .nav { padding:0 1.2rem; }
  nav { gap:1rem; }
  nav a:first-child { display:none; }
  .hero { grid-template-columns:1fr; padding:4rem 1.35rem 3rem; text-align:center; }
  .lede { margin-inline:auto; }
  .actions { justify-content:center; }
  .hero-art { min-height:430px; margin-top:2rem; }
  .hero-art::before { width:min(84vw,430px); }
  .hero-art img { width:min(72vw,360px); max-height:540px; }
  .mode-card, .let-it-go, .showdown, .ideas { grid-template-columns:1fr; }
  .number { font-size:4rem; }
  .box-art { width:min(65vw,300px); margin-top:2rem; }
  .showdown { text-align:center; }
  footer { flex-direction:column; text-align:center; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-art img { animation:float 3.5s ease-in-out infinite; }
  @keyframes float { 50% { transform:translateY(-12px) rotate(1deg); } }
}