/* Ruzzo Kart website. Palette, type and construction follow docs/ART.md (§2 palette, §3 type,
   §4 outline / lip / gloss). No inline styles anywhere: the CSP is style-src 'self'. */

@font-face { font-family: 'Ruzzo Display'; src: url('/f/display.woff2') format('woff2'), url('/f/display.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Nunito'; font-weight: 700; src: url('/f/nunito-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito'; font-weight: 800; src: url('/f/nunito-800.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito'; font-weight: 900; src: url('/f/nunito-900.woff2') format('woff2'); font-display: swap; }

:root {
  --orange: #FF7A1A; --orange-deep: #E8530E; --peach: #FFB070;
  --teal: #14C8C0; --teal-deep: #0E8F8A;
  --sky: #3DB8FF; --sky-deep: #1E88D6; --sky-light: #A6E0FF;
  --navy: #1B1F4B; --navy-light: #2A2F6E; --navy-deep: #12143A;
  --sun: #FFD23F; --sun-deep: #F2A30F; --sun-light: #FFE98F;
  --pink: #FF4F9A; --pink-deep: #D42A74;
  --lime: #7BE04A; --lime-deep: #45A824;
  --purple: #8B5CFF; --purple-deep: #5B34CF;
  --danger: #FF3B3B;
  --cream: #FFF6E5; --cream-dim: #CFC6E8;
  --ink: #1A1330; --brown-ink: #5A2E00;
  --groove: #14163F;
  --display: 'Ruzzo Display', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body: 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: 16px;
  --focus: var(--sun);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--navy-deep);
  color: var(--cream);
  font: 800 17px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul[role='list'], .plain { list-style: none; padding: 0; }
button { font: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.on-light { --focus: var(--ink); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -80px; z-index: 100;
  background: var(--sun); color: var(--ink); padding: 10px 16px; border: 3px solid var(--ink);
  border-radius: 14px; font-family: var(--display); text-decoration: none; transition: top .15s;
}
.skip:focus { top: 12px; --focus: var(--ink); }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

/* ── Type ─────────────────────────────────────────────────────────────── */
.display { font-family: var(--display); font-weight: 400; letter-spacing: .01em; word-spacing: .1em; }
/* Outlined game text: ink stroke 0.12 x size and a hard ink drop of 3/32 x size (ART §3).
   The stroke is twice as wide because paint-order hides its inner half under the fill. */
.ot {
  font-family: var(--display); font-weight: 400;
  -webkit-text-stroke: .24em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 .094em 0 var(--ink);
  word-spacing: .1em;
  letter-spacing: .015em;
}
/* Round-joined outline for big text with sharp corners (4, 7): -webkit-text-stroke only
   has miter joins, which spike on those glyphs. 16 offset copies make a round 0.1em ring. */
.ot-round {
  -webkit-text-stroke: 0;
  text-shadow:
    0.1em 0 0 var(--ink),
    0.092em 0.038em 0 var(--ink),
    0.071em 0.071em 0 var(--ink),
    0.038em 0.092em 0 var(--ink),
    0 0.1em 0 var(--ink),
    -0.038em 0.092em 0 var(--ink),
    -0.071em 0.071em 0 var(--ink),
    -0.092em 0.038em 0 var(--ink),
    -0.1em 0 0 var(--ink),
    -0.092em -0.038em 0 var(--ink),
    -0.071em -0.071em 0 var(--ink),
    -0.038em -0.092em 0 var(--ink),
    -0 -0.1em 0 var(--ink),
    0.038em -0.092em 0 var(--ink),
    0.071em -0.071em 0 var(--ink),
    0.092em -0.038em 0 var(--ink),
    0 0.18em 0 var(--ink),
    -0.038em 0.172em 0 var(--ink),
    -0.071em 0.151em 0 var(--ink),
    -0.092em 0.118em 0 var(--ink),
    -0.1em 0.08em 0 var(--ink);
}
.ot-thin { -webkit-text-stroke-width: .2em; text-shadow: 0 .08em 0 var(--ink); }
.cap { font-feature-settings: 'ss01' 1; letter-spacing: .05em; } /* caption İ for display text < 17 px */
.hl-sun { color: var(--sun); }
.hl-orange { color: var(--orange); }
.hl-lime { color: var(--lime); }
.hl-sky { color: var(--sky); }

/* ── Chunky button (ART §4: outline, lip, gloss band, glint) ──────────── */
.btn {
  --face: var(--sky); --lip: var(--sky-deep); --lip-h: 7px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 10px 26px calc(10px + var(--lip-h));
  border: 3.5px solid var(--ink); border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--face) 86%, #fff) 0%, var(--face) 55%, color-mix(in srgb, var(--face) 94%, #000) 100%);
  box-shadow: inset 0 calc(var(--lip-h) * -1) 0 var(--lip), 0 4px 4px rgba(26, 19, 48, .33);
  color: var(--cream); text-decoration: none; cursor: pointer;
  font-family: var(--display); font-size: 22px; line-height: 1.1; letter-spacing: .03em; word-spacing: .1em;
  -webkit-text-stroke: .22em var(--ink); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--ink);
  transition: transform .07s ease-out, box-shadow .07s ease-out, padding .07s ease-out;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.btn::before { /* gloss band over the top ~42% of the face, under the label */
  content: ''; position: absolute; left: 4px; right: 4px; top: 3.5px; height: 40%;
  border-radius: 13px 13px 10px 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .1));
  pointer-events: none; z-index: -1;
}
.btn::after { /* glint */
  content: ''; position: absolute; left: 12px; top: 8px; width: 16px; height: 6px; border-radius: 6px;
  background: rgba(255, 255, 255, .9); box-shadow: 22px 0 0 -1px rgba(255, 255, 255, .9);
  pointer-events: none; z-index: -1;
}
.btn:hover { transform: translateY(-1px); }
.btn:active {
  transform: translateY(0);
  padding-top: calc(10px + var(--lip-h) - 3px); padding-bottom: 13px;
  box-shadow: inset 0 -3px 0 var(--lip), 0 2px 2px rgba(26, 19, 48, .33);
}
.btn > * { position: relative; }
.btn-lime { --face: var(--lime); --lip: var(--lime-deep); }
.btn-orange { --face: var(--orange); --lip: var(--orange-deep); }
.btn-navy { --face: var(--navy-light); --lip: var(--navy-deep); }
.btn-sm { min-height: 44px; font-size: 17px; padding: 6px 16px calc(6px + 6px); --lip-h: 6px; border-radius: 14px; border-width: 3px; }
.btn-sm::before { border-radius: 10px 10px 8px 8px; }
.btn-sm::after { left: 8px; top: 6px; width: 10px; height: 4px; box-shadow: 13px 0 0 -.5px rgba(255, 255, 255, .9); }
.btn-sm:active { padding-top: 9px; padding-bottom: 9px; box-shadow: inset 0 -3px 0 var(--lip); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }

/* Sticker chip ("ÇOK YAKINDA") */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px 5px; border: 3px solid var(--ink); border-radius: 999px;
  background: var(--sun); color: var(--brown-ink);
  box-shadow: inset 0 -3px 0 var(--sun-deep), 0 3px 0 rgba(26, 19, 48, .3);
  font-family: var(--display); font-size: 14px; line-height: 1.2; letter-spacing: .06em;
  font-feature-settings: 'ss01' 1; white-space: nowrap;
}
.chip-pink { background: var(--pink); color: var(--cream); box-shadow: inset 0 -3px 0 var(--pink-deep), 0 3px 0 rgba(26, 19, 48, .3);
  -webkit-text-stroke: .22em var(--ink); paint-order: stroke fill; }
.chip-teal { background: var(--teal); color: var(--cream); box-shadow: inset 0 -3px 0 var(--teal-deep), 0 3px 0 rgba(26, 19, 48, .3);
  -webkit-text-stroke: .22em var(--ink); paint-order: stroke fill; }

/* Kicker ribbon above section titles (RuzzoRibbon) */
.kicker {
  position: relative; display: inline-block; margin: 0 22px 14px;
  padding: 5px 16px 8px; background: var(--pink); color: var(--cream);
  border: 3px solid var(--ink); border-radius: 6px;
  box-shadow: inset 0 -4px 0 var(--pink-deep);
  font-family: var(--display); font-size: 15px; line-height: 1.2; letter-spacing: .08em;
  font-feature-settings: 'ss01' 1;
  -webkit-text-stroke: .22em var(--ink); paint-order: stroke fill;
  filter: drop-shadow(0 4px 0 rgba(26, 19, 48, .35));
}
.kicker::before, .kicker::after { /* swallow-tail ends, tucked behind the band */
  content: ''; position: absolute; top: 9px; width: 26px; height: 100%; z-index: -1;
  background: var(--pink-deep); border: 3px solid var(--ink);
}
.kicker::before { left: -20px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); border-right: 0; }
.kicker::after { right: -20px; clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); border-left: 0; }
.kicker-teal { background: var(--teal); box-shadow: inset 0 -4px 0 var(--teal-deep); }
.kicker-teal::before, .kicker-teal::after { background: var(--teal-deep); }
.kicker-sun { background: var(--sun); color: var(--brown-ink); -webkit-text-stroke: 0; box-shadow: inset 0 -4px 0 var(--sun-deep); }
.kicker-sun::before, .kicker-sun::after { background: var(--sun-deep); }
.kicker-sky { background: var(--sky); box-shadow: inset 0 -4px 0 var(--sky-deep); }
.kicker-sky::before, .kicker-sky::after { background: var(--sky-deep); }

/* Section heads */
.sec { position: relative; padding: 72px 0 80px; }
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.sec-title { font-size: clamp(34px, 8.6vw, 60px); line-height: 1.08; color: var(--cream); }
.sec-sub { margin-top: 18px; font-size: 18px; color: var(--cream-dim); }

/* Chunky panel (RuzzoPanel) */
.panel {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, #333983 0%, var(--navy-light) 45%, #262a64 100%);
  border: 4px solid var(--ink); border-radius: 26px;
  box-shadow: inset 0 -8px 0 #1c2058, 0 10px 18px rgba(26, 19, 48, .4);
}
.panel::before { /* inner top bevel */
  content: ''; position: absolute; inset: 3px 3px auto; height: 48%; border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* ── Top bar ──────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18, 20, 58, .92);
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 4px 0 rgba(26, 19, 48, .25);
}
@supports (backdrop-filter: blur(1px)) {
  .topbar { background: rgba(18, 20, 58, .8); backdrop-filter: blur(12px) saturate(1.3); }
}
.topbar-in { display: flex; align-items: center; gap: 14px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; border-radius: 12px; }
.brand img { width: 40px; height: 40px; border-radius: 11px; border: 3px solid var(--ink); box-shadow: 0 3px 0 rgba(26, 19, 48, .5); }
.brand span { font-size: 22px; color: var(--orange); -webkit-text-stroke-width: .22em; }
.brand span b { font-weight: 400; color: var(--sun); }
.nav { display: none; }
.nav a {
  font-family: var(--display); font-size: 17px; letter-spacing: .03em; text-decoration: none;
  color: var(--cream); padding: 8px 12px; border-radius: 12px;
}
.nav a:hover { color: var(--sun); background: rgba(255, 255, 255, .06); }
@media (min-width: 900px) {
  .nav { display: flex; gap: 4px; margin-right: 8px; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  --focus: var(--ink);
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #2B95EA 0%, #3DB8FF 42%, #8FD4FF 82%, #B7E5FF 100%);
}
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sun {
  position: absolute; left: 88%; top: 9%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF6C8 0 44%, #FFE98F 45% 60%, rgba(255, 233, 143, .35) 61% 70%, rgba(255, 233, 143, 0) 71%);
}
.rays {
  position: absolute; left: 88%; top: 9%; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .13) 0deg 9deg, rgba(255, 255, 255, 0) 9deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, rgba(0, 0, 0, .5) 34%, transparent 58%);
  mask: radial-gradient(circle, #000 0 18%, rgba(0, 0, 0, .5) 34%, transparent 58%);
  animation: spin 120s linear infinite;
}
.cloud { position: absolute; width: 240px; height: auto; opacity: .95; animation: drift 60s linear infinite alternate; }
.cloud.c1 { left: -60px; top: 16%; width: 210px; }
.cloud.c2 { right: -80px; top: 52%; width: 260px; animation-duration: 75s; animation-direction: alternate-reverse; }
.cloud.c3 { left: 44%; top: 6%; width: 150px; opacity: .8; animation-duration: 90s; }
.cloud.c4 { left: 6%; top: 70%; width: 180px; opacity: .85; animation-duration: 80s; }

.hero-grid { display: grid; gap: 8px; padding-top: 28px; text-align: center; justify-items: center; }
.logo { width: min(86vw, 420px); margin: 4px auto 0; }
.logo img { width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(26, 19, 48, .18)); animation: bob 4s ease-in-out infinite; }
.tagline { margin-top: 14px; font-size: clamp(30px, 8.4vw, 50px); line-height: 1.12; color: var(--cream); }
.tagline span { display: inline-block; }
.pitch {
  position: relative; margin: 22px auto 0; max-width: 520px;
  padding: 16px 20px 20px; font-size: 18px; line-height: 1.5; color: var(--cream);
  text-align: left;
}
.pitch strong { color: var(--sun); font-weight: 900; }
.stores-wrap { margin-top: 26px; display: grid; justify-items: center; gap: 12px; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 10px; padding: 0; list-style: none; }
.facts li {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 5px;
  background: rgba(18, 20, 58, .78); border: 2.5px solid var(--ink); border-radius: 999px;
  font-size: 15px; font-weight: 900; color: var(--cream);
}
.facts li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); }

.hero-art { position: relative; width: 100%; display: grid; justify-items: center; margin-top: 18px; }
.hero-phone { display: none; }
.mascot {
  position: relative; z-index: 2; width: min(80vw, 380px); height: auto;
  margin-bottom: -44px; /* the wheels sit on the asphalt, below the curb */
  animation: bob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 0 rgba(26, 19, 48, .12));
}
.speed { position: absolute; z-index: 1; left: 0; right: 0; bottom: 40px; height: 120px; pointer-events: none; }
.speed i {
  position: absolute; right: 50%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .8);
  animation: whoosh 1.6s linear infinite;
}
.speed i:nth-child(1) { top: 20%; width: 90px; margin-right: 140px; }
.speed i:nth-child(2) { top: 48%; width: 140px; margin-right: 170px; animation-delay: -.5s; }
.speed i:nth-child(3) { top: 74%; width: 70px; margin-right: 150px; animation-delay: -1.1s; }

/* Track under the hero: curb, asphalt, lane dashes (they roll while motion is allowed) */
.road {
  position: relative; z-index: 1; height: 76px;
  background:
    linear-gradient(var(--ink) 0 0) 0 11px / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, #fff 0 38px, var(--sky-deep) 38px 76px) 0 0 / 100% 11px no-repeat,
    linear-gradient(180deg, #474B72 0, #3A3E62 40%, #33375A 100%);
  border-bottom: 4px solid var(--ink);
}
.road::after {
  content: ''; position: absolute; left: 0; right: 0; top: 40px; height: 7px;
  background: repeating-linear-gradient(90deg, var(--cream) 0 46px, transparent 46px 104px);
  animation: lane 1.1s linear infinite;
}

/* ── Store badges ─────────────────────────────────────────────────────── */
/* Official artwork only, never altered, animated or tinted:
   Apple: https://developer.apple.com/app-store/marketing/guidelines/ (black preferred badge,
   App Store badge first, clear space >= 1/4 badge height, height >= 40 px on screen).
   Google: https://partnermarketinghub.withgoogle.com/brands/google-play/google-play/lockups-icons-badges/#badges
   (height >= 28 px, same size or larger than other store badges, clear space >= 1/4 height).
   Both are the same visible height here: --bh. The Play PNG carries 29/250 transparent
   padding above and below its 192 px-tall badge, cancelled with negative margins. */
.stores {
  --bh: clamp(40px, calc((100vw - 2 * var(--gutter)) / 7.6), 56px);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: calc(var(--bh) * .25) calc(var(--bh) * .25);
  padding: calc(var(--bh) * .25);
  margin: calc(var(--bh) * -.25);
}
.store { display: grid; justify-items: center; gap: calc(var(--bh) * .25 + 2px); text-decoration: none; border-radius: 10px; }
.store img { width: auto; height: var(--bh); }
.store-gp img { height: calc(var(--bh) * 250 / 192); margin: calc(var(--bh) * -29 / 192) 0; }
.store .chip { font-size: 13px; }
.feature h3 .chip { -webkit-text-stroke: 0; text-shadow: none; font-size: 12px; padding: 2px 10px 3px; vertical-align: .2em; margin-left: 4px; }
.store.is-live .chip, .store.is-live .soon-sr { display: none; }
a.store:not([href]) { cursor: default; }
.store-note { font-size: 15px; font-weight: 900; color: var(--navy); }
.store-note.is-hidden { display: none; }

/* ── Gallery ──────────────────────────────────────────────────────────── */
.dark {
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 30px, transparent 30px 60px),
    radial-gradient(ellipse at 50% 0%, #2A2F6E 0%, var(--navy) 45%, var(--navy-deep) 100%);
}
.shots-scroll {
  margin: 0 calc(var(--gutter) * -1);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--sky-deep) transparent;
  border-radius: 0;
}
.shots {
  display: flex; gap: 20px; margin: 0; padding: 16px var(--gutter) 30px; list-style: none;
  width: max-content;
}
.shots li { width: min(66vw, 270px); scroll-snap-align: center; }
.sec-shots { padding-bottom: 56px; }
.swipe-hint { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 4px; color: var(--cream-dim); font-size: 15px; }
.swipe-hint svg { width: 28px; height: 16px; animation: nudge 1.4s ease-in-out infinite; }

.shot, .phone-box { container-type: inline-size; }
.phone {
  position: relative; padding: 4.2cqi; border-radius: 15cqi;
  background: linear-gradient(160deg, #3A4090 0%, var(--navy) 38%, #151843 100%);
  border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), 0 8px 0 rgba(26, 19, 48, .55), 0 22px 30px rgba(8, 6, 30, .45);
}
.phone::after { /* bezel gloss */
  content: ''; position: absolute; inset: 1.5cqi; border-radius: 13.5cqi;
  background: linear-gradient(135deg, rgba(255, 255, 255, .14) 0 18%, rgba(255, 255, 255, 0) 32%);
  pointer-events: none;
}
.phone img {
  width: 100%; height: auto; aspect-ratio: 400 / 866;
  border-radius: 10.5cqi; border: 2.5px solid var(--ink); background: var(--navy-light);
}
.shot figcaption { margin-top: 18px; text-align: center; }
.shot figcaption b { display: block; font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--cream);
  -webkit-text-stroke: .22em var(--ink); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--ink); letter-spacing: .03em; }
.shot figcaption span { display: block; margin-top: 4px; font-size: 15px; color: var(--cream-dim); line-height: 1.35; }

@media (min-width: 720px) {
  .shots-scroll { overflow: visible; margin: 0; }
  .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; width: auto; padding: 8px 0 0; }
  .shots li { width: auto; }
  .swipe-hint { display: none; }
}
@media (min-width: 1100px) {
  .sec-shots .wrap { max-width: 1380px; }
  .shots { grid-template-columns: repeat(6, 1fr); gap: 26px; }
  .shots li:nth-child(even) { transform: translateY(46px); }
  .shots li:nth-child(odd) .phone { transform: rotate(-2deg); }
  .shots li:nth-child(even) .phone { transform: rotate(2deg); }
  .sec-shots { padding-bottom: 120px; }
}

/* ── Worlds strip ─────────────────────────────────────────────────────── */
.worlds {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 12px;
  margin: 0; padding: 0; list-style: none; position: relative;
}
.world { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; }
.world .medal { margin-bottom: 14px; }
.sec-worlds { padding-top: 64px; border-top: 3px solid rgba(255, 255, 255, .05); }
.medal {
  position: relative; width: min(26vw, 112px); aspect-ratio: 1; border-radius: 50%;
  border: 4px solid var(--ink);
  box-shadow: 0 0 0 5px var(--cream), 0 0 0 9px var(--ink), 0 12px 0 1px rgba(26, 19, 48, .45);
  overflow: hidden; background: var(--navy);
}
.medal img { width: 100%; height: 100%; object-fit: cover; }
.medal::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, .28) 0 22%, rgba(255, 255, 255, 0) 38%); }
.world b { font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1.15; letter-spacing: .03em;
  -webkit-text-stroke: .22em var(--ink); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--ink); margin-top: 6px; }
.world small { display: block; font-size: 14px; color: var(--cream-dim); font-weight: 900; }
.medal-usta {
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #A884FF 0%, var(--purple) 45%, var(--purple-deep) 100%);
  box-shadow: 0 0 0 5px var(--sun), 0 0 0 9px var(--ink), 0 12px 0 1px rgba(26, 19, 48, .45);
}
.medal-usta svg { width: 58%; height: 58%; }
@media (min-width: 720px) {
  .worlds { grid-template-columns: repeat(6, 1fr); }
  .medal { width: min(13vw, 150px); }
  .worlds::before { /* dashed road through the medallions */
    content: ''; position: absolute; left: 8%; right: 8%; top: calc(min(13vw, 150px) / 2 - 5px); height: 10px; z-index: 0;
    background: repeating-linear-gradient(90deg, var(--cream) 0 22px, transparent 22px 40px);
    opacity: .35; border-radius: 5px;
  }
  .world { position: relative; z-index: 1; }
}

/* ── Features ─────────────────────────────────────────────────────────── */
.sky-sec {
  --focus: var(--ink);
  background:
    repeating-conic-gradient(from 0deg at 50% -10%, rgba(255, 255, 255, .09) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 20deg),
    linear-gradient(180deg, #2B95EA 0%, var(--sky) 60%, #58C4FF 100%);
}
.sky-sec .sec-sub { color: var(--navy-deep); font-weight: 900; }
.sky-sec .panel { --focus: var(--sun); }
.features { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.feature { padding: 20px 20px 26px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start; }
.feature h3 { font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.15; color: var(--cream); letter-spacing: .02em;
  -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--ink); align-self: center; }
.feature p { grid-column: 1 / -1; margin-top: 8px; color: var(--cream-dim); font-size: 17px; line-height: 1.5; }
.feature p strong { color: var(--cream); font-weight: 900; }
.badge-ic {
  --face: var(--sky); --lip: var(--sky-deep);
  position: relative; width: 70px; height: 70px; border-radius: 50%;
  border: 3.5px solid var(--ink);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--face) 80%, #fff) 0%, var(--face) 55%, color-mix(in srgb, var(--face) 90%, #000) 100%);
  box-shadow: inset 0 -8px 0 var(--lip), 0 4px 4px rgba(26, 19, 48, .33);
  display: grid; place-items: center;
}
.badge-ic::before { content: ''; position: absolute; left: 12%; right: 12%; top: 6%; height: 34%; border-radius: 50% 50% 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .08)); }
.badge-ic svg { position: relative; width: 44px; height: 44px; margin-top: -5px; }
.ic-orange { --face: var(--orange); --lip: var(--orange-deep); }
.ic-teal { --face: var(--teal); --lip: var(--teal-deep); }
.ic-pink { --face: var(--pink); --lip: var(--pink-deep); }
.ic-purple { --face: var(--purple); --lip: var(--purple-deep); }
.ic-lime { --face: var(--lime); --lip: var(--lime-deep); }
@media (min-width: 720px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .features { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* ── Friends: 3 steps ─────────────────────────────────────────────────── */
.friends { background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 26px, transparent 26px 52px),
    radial-gradient(ellipse at 20% 0%, #7A4DF0 0%, var(--purple-deep) 40%, #2B1D78 75%, var(--navy-deep) 100%); }
.friends-grid { display: grid; gap: 40px; align-items: center; }
.steps { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; isolation: isolate; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; padding: 18px 20px 24px; }
.step:not(:last-child)::after { /* dashed track to the next card */
  content: ''; position: absolute; left: 47px; top: 100%; width: 8px; height: 34px; margin-top: -4px; z-index: -1;
  background: repeating-linear-gradient(180deg, var(--cream) 0 8px, transparent 8px 14px); opacity: .6;
}
.step-no {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, var(--sun-light) 0%, var(--sun) 55%, #F7BC22 100%);
  border: 3.5px solid var(--ink); box-shadow: inset 0 -7px 0 var(--sun-deep), 0 4px 0 rgba(26, 19, 48, .45);
  font-family: var(--display); font-size: 32px; line-height: 1; color: #fff; padding-bottom: 6px;
  -webkit-text-stroke: .28em var(--ink); paint-order: stroke fill;
}
.step h3 { font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.15; color: var(--cream); letter-spacing: .02em;
  -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--ink); }
.step p { grid-column: 1 / -1; margin-top: 8px; color: var(--cream-dim); font-size: 17px; }
.step p b, .callout b { color: var(--cream); font-weight: 900; }
.code-demo { display: inline-block; margin: 0 2px; padding: 0 8px 1px; border-radius: 8px; background: var(--groove); border: 2px solid var(--ink);
  font-family: var(--display); font-weight: 400; color: var(--sun); letter-spacing: .12em; }
.callout { margin-top: 26px; padding: 20px 22px 24px; display: grid; gap: 10px; }
.callout p { color: var(--cream-dim); font-size: 17px; }
.friends-phone { width: min(64vw, 300px); margin: 0 auto; transform: rotate(3deg); }
@media (min-width: 960px) {
  .friends-grid { grid-template-columns: 1.25fr .75fr; gap: 64px; }
  .friends-phone { width: 320px; }
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 16px; max-width: 860px; margin: 0 auto; }
.qa { border-radius: 22px; }
.qa summary {
  position: relative; list-style: none; cursor: pointer; padding: 20px 64px 22px 22px;
  font-family: var(--display); font-size: 20px; line-height: 1.25; letter-spacing: .02em; color: var(--cream);
  border-radius: 22px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { /* plus / minus button */
  content: ''; position: absolute; right: 16px; top: 50%; width: 38px; height: 38px; margin-top: -21px; border-radius: 50%;
  background:
    linear-gradient(var(--cream) 0 0) center / 16px 5px no-repeat,
    linear-gradient(var(--cream) 0 0) center / 5px 16px no-repeat,
    radial-gradient(circle at 50% 30%, #7FD0FF, var(--sky) 60%);
  border: 3px solid var(--ink); box-shadow: inset 0 -4px 0 var(--sky-deep), 0 3px 0 rgba(26, 19, 48, .35);
}
.qa[open] summary::after {
  background:
    linear-gradient(var(--cream) 0 0) center / 16px 5px no-repeat,
    radial-gradient(circle at 50% 30%, #FF86BA, var(--pink) 60%);
  box-shadow: inset 0 -4px 0 var(--pink-deep), 0 3px 0 rgba(26, 19, 48, .35);
}
.qa .ans { padding: 0 22px 24px; color: var(--cream-dim); font-size: 17px; }
.qa .ans p + p { margin-top: 10px; }
.qa .ans a { color: var(--sun); font-weight: 900; }

/* ── Final call to action ─────────────────────────────────────────────── */
.cta {
  --focus: var(--ink);
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  background: radial-gradient(circle at 50% 38%, #FFB070 0%, var(--orange) 45%, var(--orange-deep) 100%);
  padding: 64px 0 0;
}
.cta::before {
  content: ''; position: absolute; left: 50%; top: 38%; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .12) 0deg 8deg, rgba(255, 255, 255, 0) 8deg 24deg);
  animation: spin 140s linear infinite reverse;
}
.cta-title { font-size: clamp(34px, 8vw, 58px); line-height: 1.08; color: var(--cream); }
.cta-text { margin: 20px auto 0; max-width: 560px; font-size: 19px; font-weight: 900; color: var(--ink); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }
.cta .mascot { width: min(70vw, 340px); margin: 30px auto -40px; }
.cta .road { margin-top: 0; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.checker { height: 22px; background: repeating-conic-gradient(var(--ink) 0 25%, var(--cream) 0 50%) 0 0 / 22px 22px; border-bottom: 3px solid var(--ink); }
.foot { background: var(--navy-deep); color: var(--cream-dim); }
.foot-in { display: grid; gap: 18px; justify-items: center; text-align: center; padding-top: 36px; padding-bottom: 44px; }
.foot .brand { margin: 0; }
.foot-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; row-gap: 6px; font-size: 16px; font-weight: 900; color: var(--cream); }
.foot-line a { color: var(--cream); text-decoration-color: rgba(255, 246, 229, .45); text-underline-offset: 3px; }
.foot-line a:hover { color: var(--sun); }
.foot-line .dot { margin: 0 8px; color: var(--cream-dim); }
.foot-tm { max-width: 760px; font-size: 13px; font-weight: 700; line-height: 1.5; color: #9B96C0; }

/* ── Desktop hero ─────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  :root { --gutter: 28px; }
  .hero-grid { padding-top: 44px; }
  .logo { width: 460px; }
  .sun { width: 190px; height: 190px; margin: -95px 0 0 -95px; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.02fr .98fr; text-align: left; justify-items: start; align-items: center; gap: 24px; padding-top: 56px; }
  .hero-copy { padding-bottom: 70px; }
  .logo { width: 500px; margin: 0 0 0 -14px; }
  .tagline { margin-top: 10px; }
  .pitch { margin-left: 0; }
  .stores-wrap { justify-items: start; }
  .stores { justify-content: flex-start; }
  .facts { justify-content: flex-start; }
  .hero-art { align-self: end; min-height: 600px; margin-top: 0; }
  .hero-phone { display: block; position: absolute; right: 30px; top: 10px; width: 290px; transform: rotate(7deg); }
  .hero-art .mascot { position: absolute; left: -10px; bottom: 0; width: 430px; margin-bottom: -52px; }
  .speed { left: -140px; right: auto; width: 300px; bottom: 60px; }
  .sun { left: 86%; top: 22%; }
  .rays { left: 86%; top: 22%; }
}

/* ── Documents (gizlilik, destek, privacy) ────────────────────────────── */
.doc-hero { --focus: var(--ink); position: relative; overflow: hidden; isolation: isolate; text-align: center;
  background: linear-gradient(180deg, #2B95EA 0%, var(--sky) 100%); padding: 40px 0 70px; }
.doc-hero::before { content: ''; position: absolute; left: 50%; top: -30%; width: 2400px; height: 2400px; margin-left: -1200px; z-index: -1;
  background: repeating-conic-gradient(from 0deg at 50% 0%, rgba(255, 255, 255, .1) 0deg 6deg, rgba(255, 255, 255, 0) 6deg 18deg); }
.doc-hero h1 { font-size: clamp(30px, 7vw, 52px); line-height: 1.1; color: var(--cream); max-width: 900px; margin: 0 auto; }
.doc-hero .doc-meta { margin-top: 16px; font-weight: 900; color: var(--navy-deep); }
.doc-body { position: relative; margin-top: -40px; padding-bottom: 72px; }
.doc-grid { display: grid; gap: 24px; align-items: start; }
.paper {
  --focus: var(--ink);
  background: var(--cream); color: var(--ink);
  border: 4px solid var(--ink); border-radius: 26px;
  box-shadow: inset 0 -8px 0 #E7D9BC, 0 12px 22px rgba(8, 6, 30, .35);
  padding: 26px 20px 36px;
  font-weight: 700; font-size: 17px; line-height: 1.6;
  overflow-wrap: anywhere;
}
.paper h2 { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--ink); margin: 40px 0 12px; letter-spacing: .01em; scroll-margin-top: 84px; }
.paper h2:first-child { margin-top: 0; }
.paper h3 { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.25; color: var(--purple-deep); margin: 28px 0 8px; letter-spacing: .01em; scroll-margin-top: 84px; }
.paper p, .paper ul, .paper ol, .paper .table-wrap, .paper blockquote { margin: 0 0 14px; }
.paper ul, .paper ol { padding-left: 24px; }
.paper li { margin: 4px 0; }
.paper li > ul, .paper li > ol { margin: 6px 0 8px; }
.paper strong { font-weight: 900; }
.paper a { color: #0F5FA8; font-weight: 800; text-underline-offset: 3px; }
.paper a:hover { color: var(--purple-deep); }
.paper code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: #F1E4C8; border-radius: 6px; padding: 1px 5px; }
.paper hr { border: 0; height: 12px; margin: 34px 0; background: repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0 / 12px 12px; opacity: .15; border-radius: 3px; }
.table-wrap { overflow-x: auto; border: 3px solid var(--ink); border-radius: 16px; background: #fff; }
.paper table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.paper th, .paper td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 2px solid #EADFC8; }
.paper th { background: var(--navy-light); color: var(--cream); font-weight: 900; }
.paper tr:last-child td { border-bottom: 0; }
.paper td:first-child { font-weight: 900; }
.paper mark.todo { background: #FFE0EC; color: var(--pink-deep); border: 2px dashed var(--pink-deep); border-radius: 6px; padding: 0 6px; font-weight: 900; }
.draft-note { margin: 0 0 22px; padding: 12px 16px; border: 3px dashed var(--pink-deep); border-radius: 14px; background: #FFE9F1; color: #8A1648; font-weight: 800; font-size: 15px; }
.toc { padding: 20px 20px 22px; }
.toc-desk { display: none; }
.toc-m { border-radius: 22px; }
.toc-m summary { list-style: none; cursor: pointer; padding: 16px 60px 16px 20px; border-radius: 22px; position: relative;
  font-family: var(--display); font-size: 17px; letter-spacing: .06em; color: var(--sun); }
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m summary::after { content: ''; position: absolute; right: 18px; top: 50%; width: 14px; height: 14px; margin-top: -10px;
  border-right: 4px solid var(--cream); border-bottom: 4px solid var(--cream); transform: rotate(45deg); border-radius: 2px; }
.toc-m[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.toc-m ol { margin: 0; padding: 0 12px 16px; list-style: none; display: grid; gap: 2px; }
.toc h2 { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: .06em; color: var(--sun); margin-bottom: 10px; }
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.toc a, .toc-m a { display: block; padding: 5px 8px; border-radius: 10px; color: var(--cream); text-decoration: none; font-size: 15px; font-weight: 800; line-height: 1.35; }
.toc a:hover, .toc-m a:hover { background: rgba(255, 255, 255, .08); color: var(--sun); }
@media (min-width: 720px) { .paper { padding: 40px 48px 48px; } }
@media (min-width: 1024px) {
  .doc-grid { grid-template-columns: 280px 1fr; gap: 32px; }
  .toc-desk { display: block; }
  .toc-m { display: none; }
  .toc { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow: auto; }
}

/* ── 404 ──────────────────────────────────────────────────────────────── */
.lost { min-height: calc(100vh - 67px); min-height: calc(100svh - 67px); display: grid; grid-template-rows: 1fr auto; }
.lost .hero-grid { align-self: center; padding: 36px var(--gutter) 0; }
.lost h1 { font-size: clamp(40px, 11vw, 76px); line-height: 1.02; color: var(--cream); }
.lost .code404 { font-size: clamp(64px, 20vw, 140px); line-height: 1; color: var(--sun); }
.lost p.lead { margin-top: 22px; max-width: 520px; font-size: 19px; font-weight: 900; color: var(--navy-deep); }
.lost .btn { margin-top: 26px; }
.lost .hero-art { min-height: 0; align-self: end; margin-top: 26px; }
.dizzy { position: relative; width: min(78vw, 360px); margin: 0 auto -44px; }
.lost .hero-art .mascot { position: static; width: 100%; margin: 0; transform: rotate(-7deg); animation: none; }
.stars { position: absolute; left: 14%; top: -6%; width: 58%; height: 26%; z-index: 3; pointer-events: none; }
.stars svg { position: absolute; width: 34px; height: 34px; animation: orbit 2.4s ease-in-out infinite; }
.stars svg:nth-child(1) { left: 0; top: 55%; }
.stars svg:nth-child(2) { left: 42%; top: 0; animation-delay: -.8s; }
.stars svg:nth-child(3) { right: 0; top: 45%; animation-delay: -1.6s; }
@media (min-width: 1024px) {
  .lost .hero-copy { padding-bottom: 40px; }
  .dizzy { width: 440px; margin: 0 0 -54px auto; }
}

/* ── Motion ───────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(60px); } }
@keyframes lane { from { background-position: 0 0; } to { background-position: -104px 0; } }
@keyframes whoosh { 0% { transform: translateX(40px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(-120px); opacity: 0; } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(4deg); } }
@keyframes orbit { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(20deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .speed { display: none; }
}