@font-face{font-family:Inter;src:url(../fonts/intervariable-subset.woff2) format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
/* Medal — design tokens.
   --u is the design unit: 1px at the 1920-wide reference layout, scaling with the viewport and
   capped on very wide screens. Type sizes are proportional on desktop and clamped so they never
   drop below a readable size on tablets and phones. */
:root {
  --u: min(calc(100vw / 1920), 1.25px);
  --gutter: clamp(16px, 4vw, 40px);

  --surface: #000a10;
  --surface-end: #002a45;
  --text: #ffffff;
  --text-secondary: #a9a9a9;
  --text-muted: #a2a2a2;
  --accent: #009dff;
  --plate: #0b345a;
  --light-halo-opacity: .12;
  --light-beam-color: rgba(30,157,255,.14);
  --mobile-halo-width: 170vw;
  --mobile-halo-height: 100svh;
  --mobile-halo-top: -8svh;
  --mobile-halo-top-lower: 8svh;
  --mobile-halo-top-upper: -18svh;
  --mobile-halo-blur: 22vw;
  --mobile-beam-width: 24vw;
  --mobile-beam-height: 120svh;
  --mobile-beam-top: -20svh;
  --mobile-beam-blur: 9vw;
  --action-primary: #0097f5;
  --action-secondary: #263b49;
  --divider: rgba(255,255,255,.5);
  --rule: rgba(255,255,255,.14);
  --status-live: #45cf93;
  --status-coming: #f3c75c;
  --status-not-yet: #f07878;

  --font: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --tracking: -.03em;
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-move: cubic-bezier(.77,0,.175,1);
  --ease-scroll: cubic-bezier(.42,0,.58,1);
  --motion-fast: 160ms;
  --motion-scroll: 650ms;
  --motion-reveal: 700ms;
  --motion-shine: 4.8s;

  /* layout */
  --container: min(calc(100% - 2 * var(--gutter)), max(calc(1302 * var(--u)), 900px));
  --hero-height: 100vh;
  --logo-width: max(calc(1007 * var(--u)), min(80vw, 440px));
  --logo-top: calc(240 * var(--u));
  --logo-offset-x: calc(-45.5 * var(--u));
  --logo-aspect: 1007 / 329.06;
  --cu: var(--u); /* collage unit — re-based on narrow screens */

  /* type */
  --caption-size: clamp(1.5rem, calc(48 * var(--u)), 4rem);
  --beta-size: clamp(.95rem, calc(24 * var(--u)), 2rem);
  --hint-size: clamp(1rem, calc(36 * var(--u)), 3rem);
  --heading-size: clamp(1.7rem, calc(48 * var(--u)), 4rem);
  --section-heading-size: clamp(2rem, calc(64 * var(--u)), 5.25rem);
  --how-title-size: clamp(1.15rem, calc(32 * var(--u)), 2.6rem);
  --step-size: clamp(1.05rem, calc(25 * var(--u)), 2rem);
  --note-size: clamp(.9rem, calc(16 * var(--u)), 1.35rem);
  --value-size: clamp(1.2rem, calc(28 * var(--u)), 2.3rem);
  --copy-size: clamp(.98rem, calc(20 * var(--u)), 1.65rem);
  --qr-copy-size: clamp(1.25rem, calc(36 * var(--u)), 3rem);
  --ui-size: clamp(.8rem, calc(15 * var(--u)), 1.05rem);

  /* controls */
  --button-width: calc(255 * var(--u));
  --button-height: clamp(3rem, calc(72 * var(--u)), 5.5rem);
  --button-radius: 999px;
  --control-height: clamp(2.75rem, calc(56 * var(--u)), 4.25rem);
  --control-radius: clamp(10px, calc(12 * var(--u)), 16px);
  --lang-top: clamp(12px, calc(28 * var(--u)), 40px);
  --lang-right: clamp(12px, calc(40 * var(--u)), 56px);
  --lang-gap: .25em;
  --lang-width: 2.25rem;
  --lang-button-padding: 0 .25em;
  --lang-divider-width: 1px;
  --lang-divider-height: 1em;
  --lang-focus-offset: 2px;
  --lang-disabled-opacity: .45;
  --focus-width: 3px;
  --focus-offset: 5px;
  --reveal-distance: clamp(14px, calc(26 * var(--u)), 32px);
  --collage-shadow: 0 calc(20 * var(--cu)) calc(54.4 * var(--cu)) rgba(0,0,0,.24);
}
@supports (height: 100svh) {
  :root { --hero-height: 100svh; }
}
@media (max-width: 1023px) {
  :root {
    --container: calc(100% - 2 * var(--gutter));
    --cu: min(calc((100vw - 2 * var(--gutter)) / 634.5), 0.72px);
    --button-width: auto;
    --logo-top: clamp(140px, calc(var(--hero-height) * .28), 240px);
    --logo-offset-x: 0px;
  }
}

/* Medal — layout and components.
   Sections: 1 base · 2 language switch · 3 hero (3D intro) · 4 story + statement · 5 collage + how
   6 values · 7 manifesto · 8 QR · 9 what's live · 10 docs · 11 stores · 12 footer · 13 notice + lightbox
   14 reveal / typing · 15 narrow screens · 16 motion + forced colours */

/* 1. Base ---------------------------------------------------------------- */
* { box-sizing: border-box; letter-spacing: var(--tracking); }
html { background: var(--surface); scrollbar-width: none; overflow-x: clip; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--font); font-weight: 600; font-optical-sizing: none; letter-spacing: var(--tracking); overflow-x: clip; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; letter-spacing: inherit; }
a:focus-visible, button:focus-visible { outline: var(--focus-width) solid var(--text); outline-offset: var(--focus-offset); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -100%; z-index: 40; padding: .6rem .9rem; background: var(--text); color: var(--surface); border-radius: 8px; font-size: var(--ui-size); }
.skip-link:focus { top: 1rem; }
.container { width: var(--container); margin: 0 auto; }

/* 2. Language switch ------------------------------------------------------ */
.lang-switch { position: absolute; top: var(--lang-top); right: var(--lang-right); z-index: 20; }
.language-control { display: inline-flex; align-items: center; gap: var(--lang-gap); }
.language-control button { display: inline-flex; align-items: center; justify-content: center; min-width: var(--lang-width); height: var(--control-height); padding: var(--lang-button-padding); border: 0; background: transparent; color: var(--text-muted); font-size: var(--ui-size); font-weight: 600; line-height: 1; cursor: pointer; transition: color var(--motion-fast) ease; }
.language-control button.is-active { color: var(--text); }
.language-divider { display: block; width: var(--lang-divider-width); height: var(--lang-divider-height); color: var(--text-muted); flex-shrink: 0; }
.language-control button:focus-visible { outline-offset: var(--lang-focus-offset); }
.language-control button:active { color: var(--text); }
.language-control button:disabled { opacity: var(--lang-disabled-opacity); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .language-control button:not(.is-active):not(:disabled):hover { color: var(--text); }
}

/* 3. Hero / intro --------------------------------------------------------- */
.intro-runway { height: calc(var(--intro-distance) + var(--hero-height)); position: relative; }
.hero-stage { height: var(--hero-height); width: 100%; position: sticky; top: 0; overflow: hidden; background: var(--surface); }
html.intro-locked { overflow: hidden; }
.intro-locked body { position: fixed; top: var(--held-scroll-top); left: 0; width: 100%; }
.intro-locked .hero-stage { position: fixed; top: 0; left: 0; z-index: 10; }
.chips-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; }
.chip-lighting { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.light-halo { position: absolute; width: calc(982.48 * var(--u)); height: calc(679.89 * var(--u)); border-radius: 50%; background: var(--accent); opacity: var(--light-halo-opacity); filter: blur(calc(140.54 * var(--u))); }
.halo-1 { left: calc(-534 * var(--u)); top: calc(142.75 * var(--u)); }
.halo-2 { left: calc(516.66 * var(--u)); top: calc(-34.56 * var(--u)); }
.halo-3 { left: calc(-101.88 * var(--u)); top: calc(-196.6 * var(--u)); }
.halo-4 { left: calc(997.05 * var(--u)); top: calc(-44.21 * var(--u)); }
.halo-5 { left: calc(1364.32 * var(--u)); top: calc(-44.21 * var(--u)); }
.light-beam { position: absolute; width: calc(269.31 * var(--u)); background: linear-gradient(180deg, var(--light-beam-color), transparent); filter: blur(calc(40.9651 * var(--u))); transform: matrix(.96,-.27,.5,.87,0,0); }
.beam-1, .beam-4 { left: calc(598.67 * var(--u)); top: calc(-364.9 * var(--u)); height: calc(1073.56 * var(--u)); }
.beam-2 { left: calc(-25.72 * var(--u)); top: calc(-189.2 * var(--u)); height: calc(1312.83 * var(--u)); }
.beam-3, .beam-5 { left: calc(808.53 * var(--u)); top: calc(-693 * var(--u)); height: calc(1831.11 * var(--u)); }
@media (max-width: 820px) {
  .light-halo { width: var(--mobile-halo-width); height: var(--mobile-halo-height); top: var(--mobile-halo-top); filter: blur(var(--mobile-halo-blur)); }
  .halo-1 { left: -50vw; }
  .halo-2 { left: 25vw; top: var(--mobile-halo-top-lower); }
  .halo-3 { left: -15vw; top: var(--mobile-halo-top-upper); }
  .halo-4, .halo-5, .beam-4, .beam-5 { display: none; }
  .light-beam { width: var(--mobile-beam-width); height: var(--mobile-beam-height); top: var(--mobile-beam-top); filter: blur(var(--mobile-beam-blur)); }
  .beam-1 { left: 15vw; }
  .beam-2 { left: 45vw; }
  .beam-3 { left: 75vw; }
}
.fallback .chip-lighting { display: none; }
.finish { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: var(--logo-top) var(--gutter) 0; pointer-events: none; }
.wordmark { position: relative; left: var(--logo-offset-x); width: var(--logo-width); aspect-ratio: var(--logo-aspect); max-width: 100%; opacity: 0; will-change: opacity; }
.wordmark svg { display: block; width: 100%; height: 100%; }
/* The inscription as a dark glass plate behind the chips: it emerges while the medals gather, so the
   letterform the medals fill is explicit, then the white wordmark crossfades in on top of it. */
.finish-plate { z-index: 0; }
.wordmark-plate svg path { fill: var(--plate); }
.fallback .finish-plate, .scene-unavailable .finish-plate { display: none; }
.tagline { margin-top: calc(-2 * var(--u)); font-size: var(--caption-size); line-height: 1.2; font-weight: 600; text-align: center; opacity: 0; color: var(--accent); will-change: opacity, transform; }
.shine { position: relative; display: inline-block; color: var(--accent); }
.shine::after { content: attr(data-text); position: absolute; inset: 0; color: transparent; pointer-events: none; background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.45) 46%, white 50%, rgba(255,255,255,.45) 54%, transparent 58%); background-size: 300% 100%; background-position: 150% 50%; background-clip: text; -webkit-background-clip: text; animation: shine-pass var(--motion-shine) linear infinite; animation-play-state: paused; }
.intro-ready .shine::after { animation-play-state: running; }
@keyframes shine-pass { 0% { background-position: 150% 50%; } 30%, 100% { background-position: -50% 50%; } }
.beta { margin-top: clamp(8px, calc(13 * var(--u)), 20px); font-size: var(--beta-size); line-height: 1.2; text-align: center; opacity: 0; }
.intro-ready .beta { animation: fade-in var(--motion-reveal) var(--ease-out) 120ms both; }
.intro-forced .wordmark, .intro-forced .tagline, .intro-forced .beta, .fallback .wordmark, .fallback .tagline, .fallback .beta { opacity: 1 !important; transform: none !important; }
.scene-unavailable .chips-canvas, .scene-unavailable .chip-lighting { opacity: 0 !important; transition: opacity var(--motion-reveal) var(--ease-out); }
.scene-unavailable .wordmark, .scene-unavailable .tagline { opacity: 1 !important; transform: none !important; transition: opacity var(--motion-reveal) var(--ease-out), transform var(--motion-reveal) var(--ease-out); }
.scroll-hint { position: absolute; bottom: clamp(18px, calc(45 * var(--u)), 64px); left: clamp(16px, calc(60 * var(--u)), 80px); display: flex; align-items: center; gap: clamp(10px, calc(24 * var(--u)), 32px); padding: 0; font: 500 var(--hint-size)/1.2 var(--font); letter-spacing: var(--tracking); color: var(--text); background: none; border: 0; cursor: pointer; opacity: .2; transition: opacity var(--motion-fast) ease; }
.scroll-hint img { width: clamp(14px, calc(37 * var(--u)), 48px); height: auto; }
.scroll-hint.is-hidden { opacity: 0; pointer-events: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 4. Story + statement ---------------------------------------------------- */
.story { position: relative; background: linear-gradient(180deg, var(--surface) 4.33%, var(--surface-end) 100%); padding: calc(96 * var(--u)) 0 calc(88 * var(--u)); }
.statement { width: min(100%, calc(1000 * var(--u))); margin: 0 auto; text-align: center; font-size: var(--heading-size); line-height: 1.2; font-weight: 600; text-wrap: pretty; }
.nowrap { white-space: nowrap; }

/* 5. Collage + how it works ----------------------------------------------- */
.intro-row { display: grid; grid-template-columns: calc(634.5 * var(--cu)) minmax(0, calc(560 * var(--u))); column-gap: calc(85.5 * var(--u)); align-items: center; margin-top: calc(107 * var(--u)); margin-left: calc(-77 * var(--u)); }
.collage { position: relative; width: calc(634.5 * var(--cu)); height: calc(437 * var(--cu)); filter: drop-shadow(var(--collage-shadow)); }
.screen { position: absolute; top: 0; width: calc(285 * var(--cu)); height: calc(437 * var(--cu)); }
.screen-poker { left: 0; z-index: 1; }
.screen-hub { left: calc(159.85 * var(--cu)); z-index: 2; }
.screen-gifts { left: calc(349.87 * var(--cu)); z-index: 3; }
.screen-button { position: absolute; inset: calc(14.27 * var(--cu)) calc(27.6 * var(--cu)); padding: 0; border: 0; border-radius: calc(36 * var(--cu)); overflow: hidden; background: #0b1420; cursor: zoom-in; transform: rotate(-8deg); transition: transform var(--motion-fast) var(--ease-out); }
.screen-button img { width: 100%; height: 100%; object-fit: cover; }
.screen-button:focus-visible { outline-offset: 0; }
.intro-side { padding-top: calc(21 * var(--u)); min-width: 0; }
.how-title { color: var(--text-secondary); font-size: var(--how-title-size); line-height: 1.2; font-weight: 600; }
.steps { display: flex; flex-direction: column; gap: clamp(14px, calc(20 * var(--u)), 28px); margin-top: calc(23 * var(--u)); }
.step { display: flex; gap: clamp(8px, calc(10 * var(--u)), 16px); align-items: flex-start; min-height: calc(50 * var(--u)); }
.step-icon { width: clamp(40px, calc(50 * var(--u)), 64px); height: clamp(40px, calc(50 * var(--u)), 64px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.telegram-icon { width: 64%; height: auto; }
.medal-icon { width: 64%; height: auto; }
.gram-icon { width: 68%; height: auto; }
.step-title { font-size: var(--step-size); line-height: 1.2; font-weight: 600; }
.step-description { margin-top: .15em; color: var(--text-secondary); font-size: var(--note-size); line-height: 1.25; }
.actions { display: flex; flex-wrap: wrap; gap: clamp(12px, calc(20 * var(--u)), 28px); margin-top: calc(60 * var(--u)); }
.button { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; min-width: var(--button-width); height: var(--button-height); padding: 0 1.2em; border-radius: var(--button-radius); font-size: var(--step-size); line-height: 1.2; font-weight: 600; white-space: nowrap; transition: transform var(--motion-fast) var(--ease-out), filter var(--motion-fast) ease; }
.button-secondary { background: var(--action-secondary); }
.button-primary { background: var(--action-primary); }
.button:active { transform: translateY(1px); }

/* 6. How value moves ------------------------------------------------------ */
.values-title { margin-top: calc(232 * var(--u)); font-size: var(--section-heading-size); line-height: 1.2; font-weight: 600; }
.values { display: grid; grid-template-columns: minmax(0, 432.5fr) minmax(0, 417.5fr) minmax(0, 452fr); margin-top: calc(62.5 * var(--u)); }
.value { position: relative; padding: calc(15.5 * var(--u)) calc(45 * var(--u)) calc(13 * var(--u)) 0; }
.value + .value { padding-left: calc(48.5 * var(--u)); }
.value + .value::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: calc(217 * var(--u)); background: var(--divider); }
.value-heading { display: flex; align-items: center; gap: 0; min-height: calc(66 * var(--u)); font-size: var(--value-size); line-height: 1.2; font-weight: 600; }
.value-text [data-i18n] { white-space: nowrap; }
.value-heading .icon-box { display: flex; align-items: center; justify-content: center; width: clamp(48px, calc(66 * var(--u)), 84px); height: clamp(48px, calc(66 * var(--u)), 84px); flex-shrink: 0; }
.value-heading .medal-icon { width: 65%; }
.value-heading .gram-icon { width: 70%; }
.value-heading .accent { color: var(--accent); }
.value-copy { margin: calc(27 * var(--u)) 0 0 clamp(8px, calc(13 * var(--u)), 16px); max-width: calc(385 * var(--u)); color: var(--text-muted); font-size: var(--copy-size); line-height: 1.25; }
.cat { width: 100%; height: 100%; }
.cat svg { width: 100%; height: 100%; }
.goal { width: min(100%, calc(900 * var(--u))); margin: calc(20 * var(--u)) auto 0; text-align: center; font-size: var(--note-size); line-height: 1.3; color: var(--text-muted); text-wrap: balance; }

/* 7. Manifesto (Where the Winner Went) ------------------------------------- */
.manifesto { display: grid; grid-template-columns: minmax(0, 420fr) minmax(0, 762fr); column-gap: calc(120 * var(--u)); margin-top: calc(150 * var(--u)); }
.manifesto-title { font-size: var(--section-heading-size); line-height: 1.2; font-weight: 600; text-wrap: balance; }
.manifesto-body { font-size: var(--copy-size); line-height: 1.3; color: var(--text-muted); }
.manifesto-body p { margin: 0 0 1em; }
.manifesto-body p:last-child { margin-bottom: 0; }
.manifesto-lede { color: var(--text); font-size: var(--value-size); line-height: 1.25; }
.manifesto-clip { overflow: hidden; max-height: 0; transition: max-height .5s var(--ease-out); }
.manifesto-clip > :first-child { margin-top: 1em; }
.manifesto.is-open .manifesto-clip { max-height: var(--manifesto-full, 200em); }
.manifesto-toggle { display: inline-flex; align-items: center; gap: .7em; height: var(--control-height); margin-top: clamp(16px, calc(28 * var(--u)), 36px); padding: 0 1.3em 0 1.1em; border: 1px solid var(--rule); border-radius: var(--control-radius); background: transparent; color: var(--text); font-size: var(--copy-size); font-weight: 600; cursor: pointer; transition: background var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out); }
.manifesto-toggle:hover { background: var(--action-secondary); }
.manifesto-toggle svg { width: 1em; height: 1em; transition: transform .3s var(--ease-out); }
.manifesto.is-open .manifesto-toggle svg { transform: rotate(45deg); }

/* 8. QR ------------------------------------------------------------------- */
.qr-block { display: flex; align-items: center; justify-content: center; gap: calc(94 * var(--u)); margin-top: calc(150 * var(--u)); }
.qr-link { display: block; flex-shrink: 0; width: calc(246 * var(--u)); height: calc(246 * var(--u)); border-radius: calc(10 * var(--u)); transition: transform var(--motion-fast) var(--ease-out); }
.qr-link img { width: 100%; height: 100%; }
.qr-description { max-width: calc(462 * var(--u)); font-size: var(--qr-copy-size); line-height: 1.22; text-wrap: balance; }
.in-tg .qr-block { display: none; }

/* 9. What's live ---------------------------------------------------------- */
.roadmap { margin-top: calc(171 * var(--u)); }
.roadmap-title { font-size: var(--section-heading-size); line-height: 1.2; }
.roadmap-columns { display: grid; grid-template-columns: 1fr 1fr; gap: calc(120 * var(--u)); margin-top: calc(70 * var(--u)); }
.roadmap-column { min-width: 0; }
.roadmap-column + .roadmap-column { border-left: 1px solid var(--rule); padding-left: calc(60 * var(--u)); margin-left: calc(-60 * var(--u)); }
.phase { font-size: var(--value-size); line-height: 1.2; margin-bottom: calc(10 * var(--u)); }
.phase-live { color: var(--status-live); }
.phase-coming { color: var(--status-coming); }
.roadmap-column h3 { font-size: var(--qr-copy-size); line-height: 1.22; margin-bottom: calc(24 * var(--u)); }
.availability-list { list-style: none; margin: 0; padding: 0; }
.availability-list li { min-height: calc(76 * var(--u)); display: flex; justify-content: space-between; align-items: center; gap: clamp(12px, calc(20 * var(--u)), 28px); padding: clamp(8px, calc(10 * var(--u)), 14px) 0; border-bottom: 1px solid var(--rule); }
.availability-list li:last-child { border-bottom: 0; }
.availability-name { font-size: var(--value-size); line-height: 1.2; }
.availability-description { color: var(--text-muted); font-size: var(--note-size); line-height: 1.2; margin-top: calc(5 * var(--u)); }
.availability { display: inline-flex; align-items: center; flex-shrink: 0; gap: clamp(8px, calc(10 * var(--u)), 14px); font-size: var(--copy-size); line-height: 1.2; white-space: nowrap; color: var(--text-muted); }
.availability-live { color: var(--text); }
.status-dot { width: clamp(6px, calc(8 * var(--u)), 10px); height: clamp(6px, calc(8 * var(--u)), 10px); border-radius: 50%; background: var(--status-live); }
.availability-coming .status-dot { background: var(--status-coming); }
.availability-not-yet .status-dot { background: var(--status-not-yet); }

/* 10. Docs ---------------------------------------------------------------- */
.documents { margin-top: calc(115 * var(--u)); border-top: 1px solid var(--rule); padding-top: calc(38 * var(--u)); }
.documents h2 { font-size: var(--value-size); line-height: 1.2; }
.document-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(32 * var(--u)); margin-top: calc(24 * var(--u)); }
.document-link { display: flex; align-items: center; gap: clamp(8px, calc(12 * var(--u)), 16px); border: 0; border-bottom: 1px solid var(--rule); padding: clamp(14px, calc(20 * var(--u)), 28px) 0; background: transparent; color: var(--text-muted); font-size: var(--copy-size); line-height: 1.2; font-weight: 600; text-align: left; cursor: not-allowed; transition: color var(--motion-fast) ease; }
.document-link:hover, .document-link:focus-visible { color: var(--text); }
.document-link:active { color: var(--accent); }
a.document-link { color: var(--text); cursor: pointer; }
a.document-link:hover, a.document-link:focus-visible { color: var(--accent); }
.document-link svg { width: clamp(14px, calc(18 * var(--u)), 22px); height: clamp(14px, calc(18 * var(--u)), 22px); flex-shrink: 0; }

/* 11. More ways to play (optional strip) ---------------------------------- */
.stores { margin-top: calc(90 * var(--u)); }
.stores h2 { font-size: var(--value-size); line-height: 1.2; }
.store-links { display: flex; flex-wrap: wrap; gap: clamp(10px, calc(20 * var(--u)), 28px); margin-top: calc(24 * var(--u)); }
.store-link { display: inline-flex; align-items: center; gap: .75em; height: var(--control-height); padding: 0 1.3em 0 .8em; border: 1px solid var(--rule); border-radius: var(--control-radius); color: var(--text-muted); font-size: var(--copy-size); line-height: 1.2; cursor: default; }
.store-link img { width: 1.6em; height: 1.6em; border-radius: .4em; opacity: .85; }
.store-link .store-name { color: var(--text); }
.store-link .store-note::before { content: "·"; margin: 0 .45em; }

/* 12. Footer -------------------------------------------------------------- */
.site-footer { margin-top: calc(134 * var(--u)); text-align: center; }
.contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, calc(20 * var(--u)), 28px); margin-bottom: calc(30 * var(--u)); font-size: var(--copy-size); line-height: 1.2; }
.contact-link { display: inline-flex; align-items: center; justify-content: center; gap: .6em; height: var(--control-height); border: 1px solid var(--rule); border-radius: var(--control-radius); color: var(--text); transition: color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out); }
.social-link { width: var(--control-height); }
.email-link { padding: 0 1.2em; }
.contact-link svg, .contact-icon { width: clamp(20px, calc(24 * var(--u)), 30px); height: clamp(20px, calc(24 * var(--u)), 30px); }
.contact-link:hover { background: var(--action-secondary); }
.contact-link:active { transform: translateY(1px); }
.site-footer p { color: var(--text-muted); font-size: var(--note-size); line-height: 1.3; }
.site-footer .copyright { margin-top: calc(18 * var(--u)); }
.site-footer .copyright a { transition: color var(--motion-fast) ease; }
.site-footer .copyright a:hover { color: var(--accent); }
.footer-lang { width: max-content; margin: calc(14 * var(--u)) auto 0; }

/* 13. Locked notice + lightbox -------------------------------------------- */
.locked-notice { position: fixed; z-index: 30; bottom: clamp(16px, calc(32 * var(--u)), 44px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: clamp(16px, calc(32 * var(--u)), 40px); width: max-content; max-width: calc(100% - 2 * var(--gutter)); padding: clamp(12px, calc(20 * var(--u)), 26px) clamp(16px, calc(24 * var(--u)), 32px); border: 1px solid var(--rule); border-radius: var(--control-radius); background: var(--action-secondary); color: var(--text); font-size: var(--copy-size); line-height: 1.2; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.locked-notice[hidden] { display: none; }
.locked-notice button { display: flex; align-items: center; justify-content: center; padding: 5px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.locked-notice button:hover { color: var(--text); }
.locked-notice svg { width: clamp(20px, calc(24 * var(--u)), 30px); height: clamp(20px, calc(24 * var(--u)), 30px); }
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: clamp(16px, 4vw, 40px); }
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; border: 0; padding: 0; margin: 0; background: rgba(0,6,12,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: zoom-out; }
.lightbox-dialog { position: relative; z-index: 1; max-width: min(92vw, 640px); max-height: min(90vh, 920px); }
.lightbox-img { display: block; max-width: min(92vw, 640px); max-height: min(90vh, 920px); width: auto; height: auto; border-radius: clamp(14px, 2.5vw, 28px); background: #0b1420; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.lightbox-close { position: absolute; top: -14px; right: -14px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 999px; background: var(--action-secondary); color: var(--text); cursor: pointer; }
.lightbox-close svg { width: 22px; height: 22px; }
.lightbox-close:hover { background: var(--accent); }

/* 14. Reveal + typing ----------------------------------------------------- */
.reveal { opacity: 0; transition: opacity var(--motion-reveal) var(--ease-out), translate var(--motion-reveal) var(--ease-out); translate: 0 var(--reveal-distance); }
.reveal.is-visible { opacity: 1; translate: 0 0; }
.type-char { opacity: 0; }
.is-visible .type-char { animation: type-character 16ms steps(1, start) var(--type-delay) forwards; }
@keyframes type-character { to { opacity: 1; } }
.qr-link.reveal { scale: .94; transition: opacity var(--motion-reveal) var(--ease-out), translate var(--motion-reveal) var(--ease-out), scale var(--motion-reveal) var(--ease-out), transform var(--motion-fast) var(--ease-out); }
.qr-link.reveal.is-visible { scale: 1; }
.qr-description.reveal { transition-delay: 160ms; }
.screen-hub { transition-delay: 90ms; }
.screen-gifts { transition-delay: 180ms; }

/* 15. Narrow screens ------------------------------------------------------ */
@media (max-width: 1023px) {
  .story { padding: clamp(48px, 9vw, 96px) 0 clamp(40px, 8vw, 72px); }
  .statement { width: 100%; padding: 0 var(--gutter); }
  .intro-row { display: flex; flex-direction: column; align-items: center; margin: clamp(36px, 8vw, 72px) 0 0; }
  .collage { margin: 0 auto; }
  .intro-side { width: min(100%, 640px); padding-top: clamp(32px, 7vw, 56px); }
  .step { min-height: 0; }
  .actions { margin-top: clamp(24px, 5vw, 40px); }
  .button { flex: 1 1 auto; min-width: 0; }
  .values-title, .roadmap-title, .manifesto-title { margin-top: 0; }
  .values-title { margin-top: clamp(56px, 12vw, 120px); }
  .values { grid-template-columns: 1fr; margin-top: clamp(16px, 4vw, 40px); }
  .value { padding: clamp(18px, 4vw, 28px) 0; }
  .value + .value { padding-left: 0; border-top: 1px solid var(--rule); }
  .value + .value::before { display: none; }
  .value-copy { margin: .6em 0 0; max-width: 34rem; }
  .goal { width: 100%; margin-top: clamp(12px, 3vw, 24px); }
  .manifesto { grid-template-columns: 1fr; row-gap: clamp(16px, 4vw, 28px); margin-top: clamp(56px, 12vw, 120px); }
  .qr-block { flex-direction: column; gap: clamp(20px, 5vw, 36px); margin-top: clamp(56px, 12vw, 120px); text-align: center; }
  .qr-link { width: clamp(180px, 40vw, 246px); height: clamp(180px, 40vw, 246px); }
  .qr-description { max-width: 26rem; }
  .roadmap { margin-top: clamp(56px, 12vw, 120px); }
  .roadmap-columns { gap: clamp(32px, 7vw, 64px); margin-top: clamp(24px, 5vw, 48px); }
  .documents { margin-top: clamp(48px, 10vw, 96px); padding-top: clamp(24px, 5vw, 40px); }
  .document-links { grid-template-columns: repeat(2, 1fr); gap: 0 clamp(16px, 4vw, 32px); margin-top: clamp(8px, 2vw, 16px); }
  .stores { margin-top: clamp(40px, 9vw, 80px); }
  .site-footer { margin-top: clamp(56px, 12vw, 120px); }
  .contact-links { margin-bottom: clamp(18px, 4vw, 30px); }
}
@media (max-width: 1279px) {
  .button { flex: 1 1 auto; }
}
@media (max-width: 760px) {
  .roadmap-columns { grid-template-columns: 1fr; }
  .roadmap-column + .roadmap-column { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--rule); padding-top: clamp(28px, 6vw, 48px); }
  .availability-list li { min-height: 0; padding: 14px 0; }
}
@media (max-width: 520px) {
  .actions { flex-direction: column; }
  .button { flex: 0 0 auto; width: 100%; }
  .document-links { grid-template-columns: 1fr; }
  .email-link { width: 100%; }
  .lightbox-close { top: 8px; right: 8px; }
}
/* Touch phones cannot scan their own screen — the primary button already opens Telegram. */
@media (max-width: 640px) and (hover: none) and (pointer: coarse) {
  .qr-block { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { filter: brightness(1.1); transform: translateY(-2px); }
  .qr-link:hover { transform: scale(1.025); }
  .scroll-hint:not(.is-hidden):hover { opacity: .5; }
  .screen-button:hover { transform: rotate(-8deg) scale(1.02); }
}

/* 16. Motion + forced colours --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { translate: none; transition-duration: 160ms; }
  .shine::after { animation: none; opacity: 0; }
  .intro-ready .beta { animation-duration: 160ms; }
  .button, .qr-link, .screen-button, .manifesto-clip, .language-control button { transition: none; }
  .language-control button:active { transform: none; }
  .type-char { opacity: 1; animation: none !important; }
  .qr-link.reveal { scale: 1; }
  .qr-description.reveal { transition-delay: 0ms; }
}
@media (forced-colors: active) {
  .shine::after { display: none; }
  .value + .value::before { background: CanvasText; }
  .button, .contact-link, .manifesto-toggle, .lang-switch button.is-active { outline: 1px solid CanvasText; }
}