:root {
  --bg: #0b0908; --bg2: #14100d; --card: #1a1512; --line: #2c241e; --line2: #3b3028;
  --text: #f4ece0; --muted: #b5a796; --dim: #7d7064;
  --rust: #d9692c; --rust2: #f08a46; --neon: #2fe0d0; --warn: #f2b632; --magenta: #e03cc8;
  --serif: "Fraunces", Georgia, serif; --sans: "Manrope", system-ui, sans-serif; --display: "Fraunces", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--sans);
  background-image: radial-gradient(rgba(244, 236, 224, .07) 1px, transparent 1px); background-size: 22px 22px;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--rust2); letter-spacing: 0; }
.eyebrow { color: var(--dim); font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(11, 9, 8, .72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { text-decoration: none; display: flex; gap: 10px; align-items: center; font-weight: 800; letter-spacing: .5px; }
.logo .mark { font-family: var(--display); background: linear-gradient(135deg, var(--rust), var(--warn)); color: #140d08; border-radius: 9px; padding: 3px 8px; font-size: 15px; }
nav { display: flex; align-items: center; gap: 22px; }
nav a { text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 600; }
nav a:hover { color: var(--text); }
@media (max-width: 720px) { nav a.hide-sm { display: none; } }

.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; transition: transform .15s, background .15s; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--rust); color: #140d08; }
.btn.primary:hover { background: var(--rust2); }
.btn.line { border-color: var(--line2); color: var(--text); background: rgba(255, 255, 255, .03); }
.btn.line:hover { border-color: var(--muted); }
.btn.small { padding: 8px 16px; font-size: 14px; }

/* Hero */
.hero { text-align: center; padding: 96px 0 40px; position: relative; overflow: hidden; }
.hero h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(44px, 7.4vw, 92px); line-height: 1.02; letter-spacing: -2px; margin: 18px auto 18px; max-width: 13ch; }
.hero h1 .em { font-size: 1.08em; }
.hero p.lead { color: var(--muted); font-size: clamp(17px, 2vw, 20px); max-width: 52ch; margin: 0 auto; }
.hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.glow { position: absolute; inset: auto 0 -30% 0; height: 70%; background: radial-gradient(closest-side, rgba(217, 105, 44, .28), transparent); pointer-events: none; }

.stage { position: relative; height: clamp(420px, 56vw, 640px); margin-top: 56px; perspective: 1400px; }
.phone { position: absolute; left: 50%; top: 0; width: clamp(180px, 22vw, 270px); aspect-ratio: 9 / 18.5; border-radius: 36px; background: #0e0e10; padding: 9px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .7), inset 0 0 0 2px #2b2b2f; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 28px; }
.phone.a { transform: translateX(-160%) translateY(60px) rotate(-9deg); }
.phone.b { transform: translateX(-50%); z-index: 2; }
.phone.c { transform: translateX(60%) translateY(60px) rotate(9deg); }
.stage:hover .phone.a { transform: translateX(-170%) translateY(40px) rotate(-12deg); }
.stage:hover .phone.c { transform: translateX(70%) translateY(40px) rotate(12deg); }
@media (max-width: 640px) { .phone.a { transform: translateX(-118%) translateY(50px) rotate(-9deg); } .phone.c { transform: translateX(18%) translateY(50px) rotate(9deg); } }

/* Marquee */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding: 18px 0; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .track { display: inline-flex; gap: 48px; animation: slide 38s linear infinite; }
.marquee span { color: var(--dim); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 14px; }
.marquee span b { color: var(--rust2); font-weight: 700; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Sections */
section { padding: 96px 0; }
.head { max-width: 760px; margin-bottom: 40px; }
.head h2 { font-size: clamp(34px, 5vw, 58px); line-height: 1.05; letter-spacing: -1.2px; margin: 10px 0 12px; font-weight: 700; }
.head p { color: var(--muted); margin: 0; font-size: 18px; }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 210px; gap: 14px; }
.tile { position: relative; border-radius: 22px; overflow: hidden; background: var(--card); border: 1px solid var(--line); isolation: isolate; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s; z-index: -1; opacity: .85; }
.tile:hover img { transform: scale(1.05); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(11, 9, 8, .92)); z-index: -1; }
.tile .chip { position: absolute; top: 14px; left: 14px; font-size: 12px; font-weight: 700; background: rgba(11, 9, 8, .75); border: 1px solid var(--line2); border-radius: 999px; padding: 4px 10px; color: var(--text); }
.tile .txt { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.tile h3 { margin: 0 0 2px; font-size: 20px; }
.tile p { margin: 0; color: var(--muted); font-size: 14px; }
.t-a { grid-column: span 3; grid-row: span 2; } .t-b { grid-column: span 3; } .t-c { grid-column: span 3; }
.t-d { grid-column: span 2; grid-row: span 2; } .t-e { grid-column: span 2; grid-row: span 2; } .t-f { grid-column: span 2; grid-row: span 2; }
@media (max-width: 820px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; } .bento .tile { grid-column: span 1; grid-row: span 1; } .t-a { grid-column: span 2 !important; grid-row: span 2 !important; } }

/* Showcase (interactive) */
.showcase { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: stretch; }
@media (max-width: 860px) { .showcase { grid-template-columns: 1fr; } }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs button { font: 600 14px var(--sans); color: var(--muted); background: transparent; border: 1px solid var(--line2); padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.ctrl { display: grid; grid-template-columns: 120px 1fr 56px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.ctrl:last-child { border-bottom: 0; }
.ctrl .bar { height: 6px; background: var(--line2); border-radius: 6px; overflow: hidden; }
.ctrl .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--rust), var(--warn)); width: 0; transition: width .6s; }
.ctrl output { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.screen { position: relative; border-radius: 22px; overflow: hidden; background: #000; border: 1px solid var(--line); min-height: 420px; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s; }
.screen .cap { position: absolute; left: 16px; bottom: 14px; background: rgba(11, 9, 8, .8); border: 1px solid var(--line2); border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.range { margin-top: 18px; }
.range label { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.range input { width: 100%; accent-color: var(--rust); }

/* Principles */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px) { .cards3 { grid-template-columns: 1fr; } }
.quote { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.quote q { font-family: var(--serif); font-size: 26px; line-height: 1.2; quotes: "\201C" "\201D"; }
.quote span { color: var(--dim); font-size: 14px; }

/* Final CTA */
.final { text-align: center; padding: 120px 0; position: relative; overflow: hidden; }
.final h2 { font-size: clamp(40px, 6.4vw, 80px); line-height: 1.02; letter-spacing: -1.5px; margin: 0 0 20px; font-weight: 700; }

/* Game page bits */
.facts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.facts span { border: 1px solid var(--line2); border-radius: 999px; padding: 6px 14px; color: var(--muted); font-size: 14px; }
.reel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.reel figure { margin: 0; flex: none; width: 230px; scroll-snap-align: start; }
.reel img { border-radius: 22px; border: 1px solid var(--line); }
.reel figcaption { color: var(--muted); font-size: 14px; margin-top: 8px; }
.note { font-size: 13px; color: var(--dim); }

/* Legal */
.legal { max-width: 780px; padding: 64px 0; }
.legal h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -1px; margin: 0 0 8px; }
.legal h2 { font-size: 22px; margin-top: 40px; }
.legal p, .legal li { color: #ddd2c3; }
.legal a { color: var(--neon); }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--card); border-radius: 14px; overflow: hidden; }
.legal th, .legal td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }

footer { border-top: 1px solid var(--line); padding: 40px 0 56px; color: var(--dim); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
footer a { color: var(--muted); margin-right: 18px; text-decoration: none; }
footer a:hover { color: var(--text); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee .track { animation: none; }
  .phone, .tile img { transition: none; }
}

/* ===== Atmosphere (v3): elegant serif display, scroll-linked colour gradation, soft section blends ===== */
:root { --glow-a: 217, 105, 44; --glow-b: 242, 182, 50; --base: 11, 9, 8; }
body { background-color: rgb(var(--base)); transition: background-color .4s linear; }
.ambient { position: fixed; inset: -20vh -20vw; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42vw 36vh at 18% 28%, rgba(var(--glow-a), .22), transparent 70%),
    radial-gradient(48vw 40vh at 82% 72%, rgba(var(--glow-b), .16), transparent 70%);
  filter: blur(10px); transition: background .4s linear; animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(3vw, -2vh, 0) scale(1.05); } }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body { background-image: radial-gradient(rgba(244, 236, 224, .05) 1px, transparent 1px); }

/* Elegant display type: big serif headlines, italic accent filled with a warm gradient */
.hero h1, .head h2, .final h2, .legal h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -.5px; }
.hero h1 { font-size: clamp(52px, 8.6vw, 112px); line-height: .98; max-width: 12ch; }
.head h2 { font-size: clamp(40px, 5.6vw, 68px); line-height: 1; }
.final h2 { font-size: clamp(48px, 7.4vw, 96px); line-height: .98; }
.em { background: linear-gradient(100deg, rgb(var(--glow-a)), rgb(var(--glow-b))); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.eyebrow { color: rgba(var(--glow-b), .85); }

/* Sections melt into each other: no hard edges, soft tone washes */
section { position: relative; }
section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 50%, var(--wash, transparent), transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
[data-tone="ember"] { --wash: rgba(217, 105, 44, .10); }
[data-tone="tide"] { --wash: rgba(47, 160, 200, .10); }
[data-tone="neon"] { --wash: rgba(160, 70, 220, .11); }
[data-tone="dawn"] { --wash: rgba(242, 182, 50, .10); }
.marquee { border: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .03), transparent); }
.glow { background: radial-gradient(closest-side, rgba(var(--glow-a), .30), transparent); }

/* Cards: glassy, warm edge light */
.tile, .panel, .quote, .screen { border-color: rgba(255, 255, 255, .06); background-color: rgba(26, 21, 18, .55); backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 60px -30px rgba(0, 0, 0, .8); }
.quote q { font-size: 30px; }

/* Fun stays: tilted sticker chips, springy tiles, floating sparks in the hero */
.tile .chip { transform: rotate(-3deg); background: rgb(var(--glow-b)); color: #1b1410; border: 0; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.tile { transition: transform .5s cubic-bezier(.2, .9, .2, 1.2); }
.tile:hover { transform: translateY(-4px) rotate(-.4deg); }
.sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sparks i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--glow-b)); box-shadow: 0 0 10px rgb(var(--glow-a)); opacity: 0; animation: rise 7s linear infinite; }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translateY(-90vh) translateX(30px); opacity: 0; } }
.btn.primary { background: linear-gradient(100deg, rgb(var(--glow-a)), rgb(var(--glow-b))); box-shadow: 0 10px 30px -10px rgba(var(--glow-a), .8); }
.btn.primary:hover { filter: brightness(1.08); }
footer { border-top: 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35)); }

@media (prefers-reduced-motion: reduce) {
  .ambient { animation: none; }
  .sparks { display: none; }
  .tile, .tile:hover { transition: none; transform: none; }
}

/* ===== Editorial details (v3b): mono bracket labels, hairline grid, numbered cells, sticky story ===== */
:root { --mono: "JetBrains Mono", ui-monospace, monospace; }
.eyebrow { font-family: var(--mono); font-weight: 500; letter-spacing: 1.5px; font-size: 12.5px; }
.eyebrow::before { content: "[ "; color: var(--dim); }
.eyebrow::after { content: " ]"; color: var(--dim); }
.tile .chip { font-family: var(--mono); font-weight: 500; letter-spacing: .5px; }
section > .wrap { border-inline: 1px solid rgba(255, 255, 255, .045); padding-inline: clamp(0px, 2vw, 28px); }
section + section > .wrap { border-top: 1px solid rgba(255, 255, 255, .045); padding-top: 72px; }
.hero > .wrap, .final > .wrap { border-inline-color: transparent; }

.cells { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 48px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 18px; overflow: hidden; text-align: left; }
.cells div { position: relative; padding: 26px 22px 22px; color: var(--muted); font-size: 15px; background: rgba(26, 21, 18, .35); }
.cells div + div { border-left: 1px solid rgba(255, 255, 255, .07); }
.cells span { position: absolute; top: 12px; right: 14px; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.cells b { display: block; font-family: var(--serif); font-weight: 400; font-size: 54px; line-height: 1; color: var(--text); margin-bottom: 6px; }
@media (max-width: 640px) { .cells { grid-template-columns: 1fr; } .cells div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .07); } }

.story { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0 24px 22px; border-left: 1px solid rgba(255, 255, 255, .08); opacity: .35; transition: opacity .5s, border-color .5s; }
.step.on { opacity: 1; border-left-color: rgb(var(--glow-b)); }
.step .num { font-family: var(--mono); font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; color: rgb(var(--glow-b)); }
.step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; margin: 10px 0; }
.step p { color: var(--muted); margin: 0; max-width: 42ch; }
.story-view { position: sticky; top: 12vh; height: 76vh; display: flex; align-items: center; justify-content: center; }
.phone.solo { position: relative; left: auto; top: auto; transform: rotate(-3deg); width: min(300px, 70%); transition: transform .6s; }
.phone.solo img { transition: opacity .35s; }
@media (max-width: 820px) {
  .story { grid-template-columns: 1fr; }
  .story-view { order: -1; position: sticky; top: 64px; height: auto; padding: 12px 0; z-index: 1; background: linear-gradient(180deg, rgb(var(--base)) 70%, transparent); }
  .phone.solo { width: 150px; }
  .step { min-height: 46vh; }
}
@media (prefers-reduced-motion: reduce) { .step { opacity: 1; transition: none; } }

/* ===== Type (v4): Fraunces display with soft, slightly wonky forms; Manrope body; JetBrains Mono labels ===== */
.hero h1, .head h2, .final h2, .legal h1, .step h3, .cells b, .quote q {
  font-family: var(--serif); font-weight: 340; font-optical-sizing: auto; font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.02em; }
.hero h1 { letter-spacing: -.035em; }
.em { font-family: var(--serif); font-style: italic; font-weight: 420; font-variation-settings: "SOFT" 100, "WONK" 1; }
.quote q { font-weight: 360; font-size: 27px; }
.cells b { font-weight: 300; }
.logo { font-family: var(--sans); font-weight: 800; letter-spacing: 0; }
.logo .mark { font-family: var(--serif); font-weight: 800; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 16px; padding: 2px 8px; }
body, .btn, .tabs button { font-family: var(--sans); }
.btn { font-weight: 700; letter-spacing: .1px; }
.tile h3, .legal h2 { font-family: var(--serif); font-weight: 500; font-variation-settings: "SOFT" 60; letter-spacing: -.01em; }
.tile h3 { font-size: 22px; }
.final .eyebrow { display: block; margin-bottom: 16px; }

/* ===== Type (v5): one family. Archivo, an industrial grotesk with a width axis: expanded and heavy for headlines like workshop
   signage, normal width for reading, semi-condensed caps for labels. Hierarchy comes from width, weight and size, not from
   mixing families (the Epic Games Store does the same with one sans and lets the art carry the personality). ===== */
:root { --serif: "Archivo", system-ui, sans-serif; --sans: "Archivo", system-ui, sans-serif; --display: "Archivo", system-ui, sans-serif; --mono: "Archivo", system-ui, sans-serif; }
body { font-variation-settings: "wdth" 100; font-weight: 400; }
.hero h1, .head h2, .final h2, .legal h1, .step h3, .cells b {
  font-family: "Archivo", sans-serif; font-weight: 800; font-variation-settings: "wdth" 118; letter-spacing: -.035em; line-height: .95; }
.hero h1 { font-size: clamp(46px, 7.6vw, 100px); }
.head h2 { font-size: clamp(36px, 5vw, 62px); }
.final h2 { font-size: clamp(44px, 6.6vw, 88px); }
.step h3 { font-size: clamp(26px, 2.8vw, 36px); font-variation-settings: "wdth" 110; line-height: 1.02; }
.cells b { font-weight: 700; font-variation-settings: "wdth" 125; }
.em { font-family: "Archivo", sans-serif; font-style: italic; font-weight: 800; font-variation-settings: "wdth" 118; }
.quote q { font-family: "Archivo", sans-serif; font-weight: 600; font-variation-settings: "wdth" 104; font-size: 24px; letter-spacing: -.015em; line-height: 1.2; }
.tile h3, .legal h2 { font-family: "Archivo", sans-serif; font-weight: 700; font-variation-settings: "wdth" 108; letter-spacing: -.01em; }
.eyebrow, .step .num, .tile .chip, .cells span, .marquee span {
  font-family: "Archivo", sans-serif; font-weight: 600; font-variation-settings: "wdth" 88; text-transform: uppercase; letter-spacing: .14em; }
.logo, .logo .mark { font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 115; font-weight: 800; }
.btn, .tabs button { font-family: "Archivo", sans-serif; font-weight: 600; font-variation-settings: "wdth" 104; }
.lead, .head p, .step p, .tile p { font-weight: 400; }