/* ==================================================================================================
   NonameWin — "Street Energy Brasil"
   Unbounded display type, two-tone solid + neon-outline section titles, white sticker badges with a
   hard pink offset shadow, slab-shadow gradient CTAs, diagonal compliance tape, neon purple/pink on
   near-black. Mobile-first values live here; every override sits in the "responsive" block below.
   ================================================================================================== */

:root {
  --ink: #07060D;
  --ink2: #0A0816;
  --surf: rgba(245, 243, 255, .045);
  --surf2: rgba(245, 243, 255, .085);
  --txt: #F5F3FF;
  --mut: #A7A3BD;

  --pk: #DB2777;
  --pk2: #FF2D95;
  --pk3: #FF7AC0;
  --pu: #5B21B6;
  --pu2: #A855F7;
  --pu3: #7C3AED;
  --cy: #22D3EE;
  --gold: #FACC15;
  --ok: #34D399;

  --line: rgba(245, 243, 255, .10);
  --line2: rgba(245, 243, 255, .20);

  --fd: 'Unbounded', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --fb: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink); color: var(--txt); font: 500 16px/1.55 var(--fb);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh;
}
/* 1.05 is the display rhythm this identity was drawn with. It works for a single line; the moment a Serbian
   heading wraps, the caron of Č/Š/Ž on the lower line rises into the line above, so every heading that can
   wrap sets a slightly looser value of its own below. */
h1, h2, h3, h4 { font-family: var(--fd); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--pk2); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; } /* .modal/.cookie set display:*, which would beat the UA rule */
.no-js .js-only { display: none !important; }

.container { width: min(1240px, 100% - 48px); margin-inline: auto; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 200; padding: 12px 18px; border-radius: 12px;
  background: var(--txt); color: var(--ink); font: 800 13px/1 var(--fd); transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ ambient background */
.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.bg__blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.bg__blob--a { width: 620px; height: 620px; left: -180px; top: -200px; background: radial-gradient(circle, #7C3AED, transparent 68%); }
.bg__blob--b { width: 560px; height: 560px; right: -160px; top: 120px; background: radial-gradient(circle, #FF2D95, transparent 68%); opacity: .42; }
.bg__blob--c { width: 700px; height: 700px; left: 30%; bottom: -380px; background: radial-gradient(circle, #22D3EE, transparent 70%); opacity: .18; }
.bg__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(245, 243, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 243, 255, .04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.bg__grain { position: absolute; inset: 0; opacity: .5; 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='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------ display type */
.stroke {
  /* stroke as a fraction of the em: identical weight from a 30px phone title to a 96px desktop one.
     The glyphs are filled with the page ink and the stroke is painted UNDER that fill (paint-order),
     so the inner half of the stroke is covered and overlapping contours never show internal lines. */
  color: var(--ink); -webkit-text-stroke: .042em var(--pk2); text-stroke: .042em var(--pk2);
  paint-order: stroke fill; text-shadow: 0 0 34px rgba(255, 45, 149, .45);
  /* the stroke grows outward from every glyph: without positive tracking the outlines merge into mush */
  letter-spacing: .07em;
}

/* ------------------------------------------------------------------ stickers, chips, coins */
.sticker {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 999px;
  background: var(--txt); color: var(--ink); border: 2px solid var(--ink);
  font: 800 11px/1.25 var(--fd); text-transform: uppercase; letter-spacing: .07em;
  box-shadow: 4px 4px 0 var(--pk2);
}
.sticker .ic { color: var(--pu3); }
.sticker--tilt { transform: rotate(-2.2deg); }
.sticker--gold { background: var(--gold); box-shadow: 4px 4px 0 var(--ink); }
.sticker--gold .ic { color: var(--ink); }
.sticker--wip { background: var(--gold); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(2deg); flex: none; align-self: flex-start; margin-top: 4px; }
.sticker--wip .ic { color: var(--ink); }

.coin {
  --s: 30px; width: var(--s); height: var(--s); flex: none; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(140deg, #FDE68A, #FACC15 45%, #D97706);
  color: #7C2D12; border: 2px solid #B45309; font: 900 calc(var(--s) * .42) / 1 var(--fd);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.coin--xs { --s: 18px; }
.coin--md { --s: 54px; }

.age {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 9px; border-radius: 12px;
  background: var(--gold); color: var(--ink); border: 2px solid var(--ink); font: 900 14px/1 var(--fd);
  box-shadow: 3px 3px 0 var(--pk2);
}
.cta-age {
  display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 10px; flex: none;
  border-radius: 14px; background: var(--gold); color: var(--ink); border: 2px solid var(--ink);
  font: 900 15px/1 var(--fd); box-shadow: 3px 3px 0 var(--ink);
}

.compliance { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.compliance li {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--surf); color: var(--txt);
  font: 800 12px/1 var(--fd); text-transform: uppercase; letter-spacing: .05em;
}
.compliance li .ic { color: var(--ok); }
.compliance__age { background: var(--gold) !important; color: var(--ink) !important; border-color: var(--ink) !important; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 19px;
  border-radius: 14px; border: 2px solid transparent; font: 800 13.5px/1 var(--fd);
  text-transform: uppercase; letter-spacing: .045em; white-space: nowrap;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .22s, border-color .22s, color .22s;
}
.btn .ic { flex: none; }
.btn--primary {
  background: linear-gradient(112deg, var(--pk2) 0%, var(--pu2) 100%); color: #fff; border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink), 0 14px 34px rgba(255, 45, 149, .28);
}
.btn--primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink), 0 20px 44px rgba(255, 45, 149, .38); }
.btn--primary:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.btn--outline { border-color: var(--line2); color: var(--txt); background: var(--surf); }
.btn--outline:hover { border-color: var(--pk2); color: var(--pk3); background: var(--surf2); }
.btn--ghost { color: var(--txt); background: transparent; border-color: transparent; }
.btn--ghost:hover { color: var(--pk3); background: var(--surf); }
.btn--lg { padding: 16px 24px; font-size: 14.5px; border-radius: 16px; }
.btn--sm { padding: 10px 13px; font-size: 11.5px; border-radius: 11px; gap: 7px; }
.btn--block { width: 100%; }

/* ------------------------------------------------------------------ header */
.header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, backdrop-filter .3s;
}
.header.is-scrolled {
  background: rgba(7, 6, 13, .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
}
.header__in { height: 100%; display: flex; align-items: center; gap: 18px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 900 22px/1 var(--fd); letter-spacing: -.03em; flex: none; }
.logo__mark { display: block; filter: drop-shadow(0 6px 14px rgba(255, 45, 149, .4)); }
.logo__word em { font-style: normal; color: var(--pk3); }
.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav__link {
  padding: 10px 12px; border-radius: 10px; font: 700 13.5px/1 var(--fb); color: var(--mut);
  transition: color .2s, background .2s;
}
.nav__link:hover { color: var(--txt); background: var(--surf); }
.nav__link.is-active { color: var(--txt); }
.nav__mobile-actions, .nav__fine { display: none; }
.header__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.burger {
  display: none; width: 46px; height: 46px; border-radius: 13px; border: 2px solid var(--line2);
  background: var(--surf); flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--txt); transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; padding: 46px 0 84px; }
.hero__deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__ring { position: absolute; border-radius: 50%; border: 2px dashed rgba(245, 243, 255, .10); }
.hero__ring--1 { width: 420px; height: 420px; right: -120px; top: -80px; }
.hero__ring--2 { width: 240px; height: 240px; left: -110px; bottom: 60px; border-style: solid; border-color: rgba(255, 45, 149, .16); }
.hero__spark { position: absolute; color: var(--gold); opacity: .85; animation: float 5s var(--ease) infinite alternate; }
.hero__spark--1 { left: 46%; top: 6px; }
.hero__spark--2 { left: 2%; top: 46%; color: var(--pk3); animation-delay: -1.6s; }
.hero__spark--3 { right: 40%; bottom: 12%; color: var(--cy); animation-delay: -3.2s; }
.hero__ghost {
  position: absolute; right: -2%; bottom: 4%; font: 900 clamp(90px, 13vw, 200px)/1 var(--fd);
  color: transparent; -webkit-text-stroke: 2px rgba(245, 243, 255, .05); letter-spacing: -.04em; user-select: none;
}
@keyframes float { from { transform: translateY(-8px) rotate(-6deg); } to { transform: translateY(8px) rotate(6deg); } }

.hero__in {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "copy visual" "more visual"; column-gap: 44px; row-gap: 26px; align-items: start;
}
.hero__copy { grid-area: copy; }
.hero__visual { grid-area: visual; }
.hero__more { grid-area: more; align-self: start; margin-top: 10px; }
.hero__title { font-size: clamp(46px, 5.6vw, 84px); line-height: 1.16; text-transform: uppercase; letter-spacing: -.035em; margin: 20px 0 18px; }
.hero__title span { display: block; }
.hero__l1 { text-shadow: 0 0 48px rgba(168, 85, 247, .45); }
.hero__l2 { -webkit-text-stroke-width: .045em; }
.hero__sub { font-size: 17.5px; line-height: 1.6; color: #CFCADF; max-width: 54ch; }
.hero__cta { display: flex; align-items: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero__fine { margin-top: 20px; font-size: 12.5px; line-height: 1.5; color: var(--mut); font-weight: 600; }
.hero__fine span { display: block; }

/* three product facts: a fixed 3-track grid (never wraps, so a divider can only sit between two visible
   siblings) that collapses to one column on a phone */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.stat { position: relative; padding: 0 20px; min-width: 0; }
.stat:first-child { padding-left: 0; }
.stat:last-child { padding-right: 0; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 1px; background: var(--line2); }
.stat dt { display: flex; align-items: flex-start; gap: 6px; font: 800 11.5px/1.35 var(--fd); text-transform: uppercase; letter-spacing: .05em; color: var(--mut); order: 2; margin-top: 6px; }
.stat dt .ic { color: var(--pk3); flex: none; margin-top: -1px; }
.stat dd { font: 900 27px/1 var(--fd); letter-spacing: -.02em; }
.stat > * { display: block; }
/* The row owns both tracks (value, then icon+label) and every .stat borrows them, so a value that wraps
   to two lines — "Svaki dan" does, at ~1024px — grows the whole row instead of pushing its own label 24px
   below its neighbours'. Without subgrid the labels at least end up on a shared bottom edge. */
.stat { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
@supports not (grid-template-rows: subgrid) {
  .stat { display: flex; flex-direction: column; }
  .stat dt { margin-top: auto; padding-top: 6px; }
}

/* hero card fan */
.stage { position: relative; height: 470px; }
.fcard {
  position: absolute; width: 218px; border-radius: 18px; overflow: hidden; border: 3px solid var(--ink);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .65); animation: bob 6s var(--ease) infinite alternate;
}
.fcard img { width: 100%; height: auto; }
.fcard__shine { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%); }
.fcard--1 { width: 176px; left: 0; top: 70px; transform: rotate(-9deg); z-index: 1; animation-delay: -1s; }
.fcard--2 { left: 50%; margin-left: -109px; top: 16px; z-index: 3; transform: rotate(1.5deg); }
.fcard--3 { width: 184px; right: 0; top: 52px; transform: rotate(9deg); z-index: 2; animation-delay: -2.4s; }
@keyframes bob { from { translate: 0 -6px; } to { translate: 0 6px; } }
.gcoin {
  position: absolute; --s: 54px; width: var(--s); height: var(--s); display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(140deg, #FDE68A, #FACC15 45%, #D97706); color: #7C2D12; border: 3px solid #B45309;
  font: 900 calc(var(--s) * .42)/1 var(--fd); z-index: 4; animation: bob 4.5s var(--ease) infinite alternate;
}
.gcoin--1 { left: calc(50% + 74px); top: -12px; }
.gcoin--2 { --s: 34px; left: 4%; top: 16px; animation-delay: -1.2s; }
.gcoin--3 { --s: 62px; right: 6%; bottom: 46px; animation-delay: -2.2s; }
.gcoin--4 { --s: 26px; left: 16%; bottom: 8px; animation-delay: -3s; }
.chip {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 14px; background: rgba(13, 10, 31, .92); border: 2px solid var(--line2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5); backdrop-filter: blur(8px); font-size: 13px; font-weight: 700;
}
.chip__label { color: var(--mut); font: 800 10.5px/1 var(--fd); text-transform: uppercase; letter-spacing: .06em; }
/* second line of the multiplier chip: the launch qualifier, same weight as a stat label */
.chip__note { margin-top: 4px; color: var(--mut); font: 800 9.5px/1.25 var(--fd); text-transform: uppercase; letter-spacing: .06em; }
.chip strong { font: 900 17px/1 var(--fd); }
.chip__ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: var(--ink); }
/* a single-column grid, not a wrapping flex row: shrink-to-fit then sizes the chip to the wider of its two
   rows instead of laying label + value + note out on one 480px line */
.chip--mult { display: grid; justify-items: start; left: -8px; top: 336px; border-color: var(--pk2); }
.chip__row { display: flex; align-items: center; gap: 8px; }
.chip--mult strong { color: var(--pk3); }
.chip--win { right: -6px; top: 410px; border-color: var(--ok); }
.chip--win strong { color: var(--ok); font-size: 14px; }

.welcome {
  position: relative; display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 20px 16px 16px;
  border-radius: 18px; background: var(--txt); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--pk2); transform: rotate(-1.4deg);
}
.welcome__kicker { font: 800 10.5px/1 var(--fd); text-transform: uppercase; letter-spacing: .09em; color: var(--pu3); }
.welcome__title { font: 900 17px/1.1 var(--fd); margin-top: 5px; }
.welcome__title b { font-size: 26px; letter-spacing: -.02em; }
.welcome__desc { margin-top: 5px; font-size: 13px; font-weight: 700; color: #46405F; }
.welcome__fine { display: block; font-size: 11.5px; color: #6B6485; font-weight: 700; }

/* ------------------------------------------------------------------ essentials band + compliance tape */
.bands { margin-top: -34px; position: relative; z-index: 2; overflow: hidden; } /* the tape is rotated and 3% oversized on purpose: clip the bleed here, never on the document */
.ticker { display: flex; align-items: stretch; border-block: 2px solid var(--line2); background: rgba(13, 10, 31, .75); backdrop-filter: blur(10px); }
.ticker__label {
  display: flex; align-items: center; gap: 8px; padding: 0 18px; flex: none; background: var(--pk2); color: #fff;
  font: 800 11px/1 var(--fd); text-transform: uppercase; letter-spacing: .08em;
}
.ticker__label-short { display: none; }
.ticker__viewport {
  overflow: hidden; flex: 1; min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent);
}
.ticker__track { display: flex; width: max-content; animation: marq 46s linear infinite; }
.is-paused .ticker__track, .is-paused .stripe__track { animation-play-state: paused; }
.ticker__list { display: flex; }
.ticker__item { display: flex; align-items: center; gap: 9px; height: 54px; padding: 0 22px; font-size: 14px; font-weight: 700; white-space: nowrap; border-right: 1px solid var(--line); }
.ticker__ic { display: grid; place-items: center; color: var(--gold); }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marq-pause {
  align-self: center; margin: 0 10px; flex: none; width: 34px; height: 34px; border-radius: 10px;
  border: 2px solid var(--line2); background: var(--surf); display: grid; place-items: center; color: var(--txt);
}
.marq-pause .ic:nth-child(2) { display: none; }
.marq-pause[aria-pressed="true"] .ic:nth-child(1) { display: none; }
.marq-pause[aria-pressed="true"] .ic:nth-child(2) { display: block; }

.stripe {
  overflow: hidden; background: linear-gradient(90deg, var(--pk2), var(--pu2)); transform: rotate(-1.2deg) scale(1.03);
  margin-top: 22px; box-shadow: 0 14px 40px rgba(124, 58, 237, .3); border-block: 2px solid var(--ink);
}
.stripe__track { display: flex; width: max-content; animation: marq 40s linear infinite; }
.stripe__list { display: flex; align-items: center; gap: 26px; padding: 11px 13px; font: 800 12.5px/1 var(--fd); text-transform: uppercase; letter-spacing: .1em; color: #fff; white-space: nowrap; }
.stripe__list i { font-style: normal; color: var(--gold); }

/* ------------------------------------------------------------------ section shell */
.sec { padding: 78px 0; position: relative; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.sec__head--center { flex-direction: column; align-items: center; text-align: center; }
.sec__kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--surf); color: var(--pk3);
  font: 800 11px/1 var(--fd); text-transform: uppercase; letter-spacing: .09em; white-space: normal;
}
.sec__kicker .ic { flex: none; }
.sec__title { font-size: clamp(32px, 3.9vw, 54px); line-height: 1.12; text-transform: uppercase; letter-spacing: -.03em; margin: 16px 0 12px; }
.sec__title .stroke { -webkit-text-stroke-width: .045em; }
.sec__sub { color: #CFCADF; font-size: 16.5px; line-height: 1.6; max-width: 66ch; }
.sec__head--center .sec__sub { margin-inline: auto; }
.sec__fine { display: flex; align-items: flex-start; gap: 8px; margin-top: 22px; font-size: 12.5px; line-height: 1.5; color: var(--mut); font-weight: 600; }
.sec__fine .ic { flex: none; color: var(--gold); margin-top: 2px; }
.sec__fine--center { justify-content: center; text-align: center; max-width: 76ch; margin-inline: auto; }

/* ------------------------------------------------------------------ games */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tab {
  padding: 11px 17px; border-radius: 999px; border: 2px solid var(--line2); background: var(--surf);
  font: 800 12.5px/1 var(--fd); text-transform: uppercase; letter-spacing: .05em; color: var(--mut);
  transition: all .2s var(--ease);
}
.tab:hover { color: var(--txt); border-color: var(--pk2); }
.tab.is-active { background: var(--txt); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--pk2); }

.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.tile { position: relative; border-radius: 16px; transition: transform .3s var(--ease); }
.tile.is-hidden { display: none; }
.tile__cover { position: relative; border-radius: 16px; overflow: hidden; border: 2px solid var(--line2); background: var(--ink2); box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }
.tile__cover img { width: 100%; height: auto; aspect-ratio: 10 / 13; object-fit: cover; }
.tile:hover .tile__cover { border-color: var(--pk2); }
.tile__badges { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 5px; z-index: 2; }
.badge { padding: 5px 7px; border-radius: 7px; font: 900 9.5px/1 var(--fd); letter-spacing: .06em; border: 1.5px solid var(--ink); color: var(--ink); background: var(--txt); }
.badge--hot { background: var(--pk2); color: #fff; }
.badge--new { background: var(--cy); }
.badge--top { background: var(--gold); }
.badge--rs { background: var(--ok); }
.tile__soon {
  position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 8px; border-radius: 999px; background: rgba(7, 6, 13, .84); border: 1px solid rgba(250, 204, 21, .45);
  color: var(--gold); font: 800 9px/1 var(--fd); text-transform: uppercase; letter-spacing: .03em;
  backdrop-filter: blur(6px);
}
.tile__soon .ic { width: 11px; height: 11px; }
.tile__hover {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; gap: 14px; padding: 18px 14px;
  background: linear-gradient(180deg, rgba(7, 6, 13, .78), rgba(10, 8, 22, .95));
  backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s var(--ease);
}
.tile:hover .tile__hover, .tile:focus-within .tile__hover { opacity: 1; }
.tile__tag { font-size: 12.5px; line-height: 1.4; font-weight: 700; color: #DCD8EC; }
.tile__meta { display: flex; flex-direction: column; gap: 6px; width: 100%; }
/* the tiles are ~195px at 1440: everything inside the hover panel wraps instead of running off the cover */
.tile__meta > span { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; padding: 5px 6px; border-radius: 8px; background: var(--surf2); font-size: 11px; font-weight: 700; }
.tile__meta b { font: 800 9px/1.25 var(--fd); text-transform: uppercase; letter-spacing: .04em; color: var(--mut); }
.tile__hover .btn { white-space: normal; text-align: center; line-height: 1.28; font-size: 10.5px; padding: 9px 10px; max-width: 100%; }
.vol { display: inline-flex; gap: 3px; align-items: center; }
.vol i { width: 6px; height: 6px; border-radius: 50%; background: var(--line2); }
.vol i.on { background: var(--pk3); }
/* Caption alignment: "Grom nad Beogradom" wraps to two lines while its row neighbours do not, which used to
   drop its studio line below theirs. The title now always reserves two lines, and the tile is a column whose
   last row is pushed to the bottom, so even a three-line title keeps the whole row on one baseline. */
.tile { display: flex; flex-direction: column; }
.tile__cover { flex: none; }
.tile__body { display: flex; flex-direction: column; flex: 1; padding: 12px 4px 0; }
.tile__title { font-size: 14.5px; line-height: 1.25; min-height: 2.5em; letter-spacing: -.02em; }
.tile__sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 11px; font-weight: 700; color: var(--mut); }
.grid__empty { margin-top: 28px; text-align: center; color: var(--mut); font-weight: 700; }
.grid__more { display: flex; justify-content: center; margin-top: 30px; }

/* ------------------------------------------------------------------ rewards */
.promos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.promo {
  position: relative; padding: 30px 20px 22px; border-radius: 20px; border: 2px solid var(--line2);
  background: linear-gradient(180deg, rgba(245, 243, 255, .06), rgba(245, 243, 255, .02));
  display: flex; flex-direction: column; gap: 10px; transition: transform .25s var(--ease), border-color .25s;
}
.promo:nth-child(odd) { transform: rotate(-.8deg); }
.promo:nth-child(even) { transform: rotate(.8deg); }
.promo:hover { transform: rotate(0) translateY(-6px); border-color: var(--pk2); }
.promo__badge { position: absolute; right: 14px; top: -14px; font-size: 10px; padding: 7px 11px; }
.promo__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.promo--pink .promo__icon { background: var(--pk2); color: #fff; }
.promo--purple .promo__icon { background: var(--pu2); color: #fff; }
.promo--hot .promo__icon { background: var(--gold); color: var(--ink); }
.promo--grad .promo__icon { background: linear-gradient(130deg, var(--cy), var(--ok)); color: var(--ink); }
.promo__title { font-size: 19px; line-height: 1.2; margin-top: 4px; }
.promo__desc { font-size: 14px; line-height: 1.55; color: #CFCADF; flex: 1; }
.promo__cta { align-self: flex-start; margin-top: 4px; }

/* ------------------------------------------------------------------ how it works */
.how { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 48px; align-items: start; }
.how__head { display: block; margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 24px); }
.how__head .sec__title { font-size: clamp(30px, 3vw, 44px); }
.how__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 26px; }
.how__fine { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--mut); }
.how__fine .ic { color: var(--ok); flex: none; }
.steps { display: flex; flex-direction: column; gap: 16px; }
/* 104px + a 12px gutter, not 96px + 8px: the outline "03" is wider than its column and used to touch the
   first character of the description once a step title wrapped to two lines. */
.step {
  display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; padding: 20px 22px 20px 16px;
  border-radius: 18px; border: 2px solid var(--line2); background: linear-gradient(120deg, rgba(245, 243, 255, .06), rgba(245, 243, 255, .015));
}
.step:nth-child(even) { border-color: rgba(255, 45, 149, .3); }
.step__num { font: 900 56px/1 var(--fd); -webkit-text-stroke-width: .04em; }
/* the global heading line-height of 1.05 is for one-liners; "Igraj i skupljaj virtuelne novčiće na otvaranju"
   wraps, and at 1.05 the descenders of the first line landed on the caps of the second. */
.step__title { font-size: 18px; line-height: 1.22; }
.step__desc { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: #CFCADF; }

/* ------------------------------------------------------------------ tournament */
.tour { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; align-items: start; }
.tour__card {
  padding: 30px 24px 26px; border-radius: 22px; border: 2px solid var(--ink);
  background: linear-gradient(160deg, #1A1033, #0C0919); box-shadow: 8px 8px 0 var(--pk2), 0 34px 70px rgba(0, 0, 0, .5);
}
.tour__how-title { font-size: 20px; line-height: 1.16; margin: 16px 0 14px; text-transform: uppercase; letter-spacing: -.02em; }
.tour__how { display: flex; flex-direction: column; gap: 12px; }
.tour__how li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.5; color: #CFCADF; }
.tour__how-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: var(--pk2); color: #fff; font: 900 12px/1 var(--fd); }
.launchbox { margin: 20px 0 18px; padding: 16px 16px 14px; border-radius: 16px; border: 2px dashed rgba(255, 45, 149, .45); background: rgba(255, 45, 149, .08); text-align: center; }
.launchbox__label { display: inline-flex; align-items: center; gap: 7px; font: 800 10.5px/1 var(--fd); text-transform: uppercase; letter-spacing: .09em; color: var(--pk3); }
.launchbox__text { margin-top: 9px; font: 900 18px/1.2 var(--fd); letter-spacing: -.02em; }
.launchbox__fine { margin-top: 7px; font-size: 12px; font-weight: 700; color: var(--mut); }

.board { border-radius: 22px; border: 2px solid var(--line2); background: rgba(13, 10, 31, .72); overflow: hidden; }
.board__head { padding: 24px 26px 8px; }
.board__title { display: flex; align-items: center; gap: 9px; font-size: 19px; line-height: 1.2; text-transform: uppercase; }
.board__title .ic { color: var(--gold); }
.board__intro { margin-top: 8px; font-size: 13.5px; color: var(--mut); font-weight: 600; }
.board__table { margin-top: 12px; font-size: 15px; }
.board__table th, .board__table td { padding: 13px 26px; text-align: left; border-bottom: 1px solid var(--line); }
.board__table th { font: 800 10.5px/1 var(--fd); text-transform: uppercase; letter-spacing: .08em; color: var(--mut); }
.board__table tbody tr:last-child td { border-bottom: 0; }
.board__table tbody tr.is-all { background: rgba(255, 45, 149, .07); }
.rank { display: inline-grid; place-items: center; min-width: 36px; height: 34px; padding: 0 9px; border-radius: 10px; background: var(--surf2); font: 900 13px/1 var(--fd); white-space: nowrap; }
.is-top-1 .rank { background: var(--gold); color: var(--ink); }
.is-top-2 .rank { background: #D8D6E6; color: var(--ink); }
.is-top-3 .rank { background: #C98A55; color: var(--ink); }
.coins { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.status-inline { display: none; margin-top: 5px; font-size: 11.5px; font-weight: 700; color: var(--pk3); }
.prize-pill { display: inline-block; padding: 6px 10px; border-radius: 999px; font: 800 11px/1 var(--fd); letter-spacing: .04em; border: 1px solid var(--line2); background: var(--surf); }
.prize-pill--vip { color: var(--gold); border-color: rgba(250, 204, 21, .4); }
.board__none { color: var(--mut); }
.board__note { display: flex; gap: 8px; padding: 16px 26px 22px; font-size: 12.5px; line-height: 1.5; color: var(--mut); font-weight: 600; }
.board__note .ic { flex: none; color: var(--ok); margin-top: 2px; }

/* ------------------------------------------------------------------ club */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tier { position: relative; padding: 26px 20px 22px; border-radius: 20px; border: 2px solid var(--line2); background: linear-gradient(180deg, rgba(245, 243, 255, .06), rgba(245, 243, 255, .015)); display: flex; flex-direction: column; }
.tier__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); }
.tier--bronze .tier__icon { background: #C98A55; }
.tier--silver .tier__icon { background: #D8D6E6; }
.tier--gold .tier__icon { background: var(--gold); }
.tier--diamond .tier__icon { background: linear-gradient(140deg, var(--cy), var(--pu2)); color: #fff; }
.tier--diamond { border-color: rgba(34, 211, 238, .35); }
.tier__name { font-size: 22px; line-height: 1.16; margin-top: 14px; text-transform: uppercase; }
.tier__req { margin-top: 5px; font-size: 12.5px; color: var(--mut); font-weight: 600; }
.tier__req b { color: var(--txt); }
.tier__perks { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; flex: 1; }
/* checkmark centred against a wrapped bullet, not pinned to its first line */
.tier__perks li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: center; font-size: 13.5px; line-height: 1.45; color: #CFCADF; }
.tier__tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(52, 211, 153, .16); color: var(--ok); }
.tier__soon { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line2); font: 800 10px/1.3 var(--fd); text-transform: uppercase; letter-spacing: .05em; color: var(--gold); white-space: nowrap; }
.vip__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 34px; }

/* ------------------------------------------------------------------ trust */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.trust__item { position: relative; overflow: hidden; padding: 26px 22px 24px; border-radius: 20px; border: 2px solid var(--line2); background: rgba(13, 10, 31, .6); transition: transform .25s var(--ease), border-color .25s; }
.trust__item:nth-child(odd) { transform: rotate(-.6deg); }
.trust__item:nth-child(even) { transform: rotate(.6deg); }
.trust__item:hover { transform: rotate(0) translateY(-5px); }
.trust__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); }
.trust__item--pink .trust__icon { background: var(--pk2); color: #fff; }
.trust__item--gold .trust__icon { background: var(--gold); }
.trust__item--green .trust__icon { background: var(--ok); }
.trust__item--purple .trust__icon { background: var(--pu2); color: #fff; }
.trust__item--cyan .trust__icon { background: var(--cy); }
.trust__item--hot .trust__icon { background: linear-gradient(130deg, var(--pk2), var(--gold)); color: var(--ink); }
.trust__n { position: absolute; right: 14px; top: 6px; font: 900 54px/1 var(--fd); -webkit-text-stroke-width: .04em; opacity: .3; }
.trust__title { font-size: 19px; line-height: 1.2; margin-top: 16px; }
.trust__desc { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: #CFCADF; }

/* ------------------------------------------------------------------ FAQ */
/* Two columns that start and finish together. The accordion is ~170px taller than the heading block, which
   used to leave the left column stopping short for no visible reason; the help card is pushed to the foot of
   its column instead, so both edges line up and the gap between heading and card reads as composition. */
.faq__in { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 44px; align-items: stretch; }
.faq__aside { display: flex; flex-direction: column; gap: 20px; }
.faq__head { display: block; margin-bottom: 0; }
.faq__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.faq__help { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 22px; border-radius: 20px; background: var(--txt); color: var(--ink); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--pu3); transform: rotate(-.8deg); }
.faq__help-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--pk2); color: #fff; border: 2px solid var(--ink); }
.faq__help h3 { font-size: 20px; line-height: 1.18; margin-top: 14px; text-transform: uppercase; }
.faq__help p { margin-top: 8px; font-size: 14px; line-height: 1.5; font-weight: 600; color: #46405F; }
.faq__help .btn, .modal .btn--block, .form__row .btn { margin-top: 18px; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq__item { border-radius: 16px; border: 2px solid var(--line2); background: rgba(13, 10, 31, .6); overflow: hidden; }
.faq__item[open] { border-color: var(--pk2); }
.faq__item summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; font: 800 16px/1.35 var(--fb); list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__n { font: 900 12px/1 var(--fd); color: var(--pk3); flex: none; }
.faq__q { flex: 1; }
.faq__plus { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--line2); color: var(--pk3); transition: transform .25s var(--ease); }
.faq__item[open] .faq__plus { transform: rotate(45deg); background: var(--pk2); color: #fff; border-color: var(--pk2); }
.faq__a { padding: 0 20px 20px 54px; font-size: 15px; line-height: 1.6; color: #CFCADF; }

/* ------------------------------------------------------------------ footer */
.footer { padding: 76px 0 44px; border-top: 2px solid var(--line2); background: linear-gradient(180deg, rgba(13, 10, 31, .5), rgba(7, 6, 13, .9)); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer__about { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--mut); max-width: 46ch; }
.footer__social { display: flex; gap: 12px; margin-top: 14px; font-weight: 700; font-size: 14px; }
/* Full-width trust strip under the link columns. The three badges need ~490px together; inside the 373px
   brand column the last one was orphaned on a line of its own at every desktop width. */
.footer__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.resp-badge { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--surf); font: 800 11px/1 var(--fd); text-transform: uppercase; letter-spacing: .05em; }
.resp-badge .ic { color: var(--ok); }
.footer__col h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--pk3); }
.footer__col ul { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.footer__col a { font-size: 14px; font-weight: 600; color: var(--mut); }
.footer__col a:hover { color: var(--txt); }
.footer__info { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
/* The two info cards share a row, so they share a height. "Dados da empresa" is the taller of the two and
   used to leave ~100px of dead card under the responsible-play paragraph; the auto margin below that
   paragraph hands the spare height to the gap and parks "Saiba mais" on the foot of its card. */
.footer__resp, .footer__company { display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 18px; border: 2px solid var(--line2); background: rgba(13, 10, 31, .6); }
.footer__resp p { margin-bottom: auto; }
.footer__more { align-self: flex-start; }
.footer__resp h3, .footer__company h3 { display: flex; align-items: center; gap: 9px; font-size: 15px; text-transform: uppercase; letter-spacing: -.01em; }
.footer__resp h3 .ic { color: var(--ok); }
.footer__company h3 .ic { color: var(--pk3); }
.footer__resp p { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--mut); }
.footer__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font: 800 12px/1 var(--fd); text-transform: uppercase; letter-spacing: .05em; color: var(--pk3); }
.company { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.company div { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.company dt { font: 800 10.5px/1.3 var(--fd); text-transform: uppercase; letter-spacing: .07em; color: var(--mut); }
.company dd { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.company__mail { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--txt); text-decoration: underline; text-underline-offset: 3px; }
.company__mail:hover { color: var(--pk3); }
.company__mail .ic { color: var(--pk3); flex: none; }
.company__sla { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--txt); }
.company__sla .ic { color: var(--ok); flex: none; }
.company__hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--mut); font-weight: 600; }
.company__hint .ic { color: var(--pk3); flex: none; margin-top: 2px; }
.company__a { color: var(--txt); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.company__a:hover { color: var(--pk3); }
.footer__disclaimer { margin-top: 30px; padding: 20px 22px; border-radius: 16px; border: 1px dashed var(--line2); font-size: 12.5px; line-height: 1.65; color: var(--mut); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--mut); }
.footer__country { display: inline-flex; align-items: center; gap: 8px; }
/* Serbian tricolour (crveno-plavo-belo), the market the footer names one line to the right. */
.flag { width: 20px; height: 14px; border-radius: 3px; border: 1px solid rgba(245, 243, 255, .22); background: linear-gradient(180deg, #C6363C 0 33.34%, #0C4076 33.34% 66.67%, #F5F3FF 66.67%); }

/* ------------------------------------------------------------------ mobile bar (shown by the responsive block) */
.mbar { display: none; }
body.has-nav .mbar { display: none !important; } /* the burger menu already offers both actions */

/* ------------------------------------------------------------------ cookie banner */
.cookie {
  /* right side on desktop: the hero CTAs are left-aligned and the banner must not sit on top of them */
  position: fixed; right: 22px; bottom: 22px; z-index: 96; width: min(420px, calc(100% - 44px)); padding: 16px 18px;
  border-radius: 16px; background: var(--txt); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--pk2); font-size: 13px; line-height: 1.5; font-weight: 600;
}
.cookie__more { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.cookie__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.cookie__actions .btn--ghost { color: var(--ink); border-color: var(--ink); }

/* ------------------------------------------------------------------ modals */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.modal__overlay { position: absolute; inset: 0; background: rgba(7, 6, 13, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal__box {
  position: relative; z-index: 1; width: min(480px, 100%);
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto;
  padding: 0 30px 26px; border-radius: 22px; border: 2px solid var(--ink);
  background: linear-gradient(165deg, #17102E, #0B0918); box-shadow: 8px 8px 0 var(--pk2), 0 50px 120px rgba(0, 0, 0, .75);
}
.modal__box--wide { width: min(560px, 100%); }
/* The box is the scroll container, so an absolutely positioned close button scrolled away with the form and
   left phone users no way out once they reached the submit button. The X now rides a sticky bar that bleeds
   to the box edges: the form scrolls UNDER it and the control is on screen at every scroll position. */
.modal__bar {
  position: sticky; top: 0; z-index: 4; display: flex; justify-content: flex-end;
  margin: 0 -30px 8px; padding: 12px 14px 4px;
  background: #17102E; border-radius: 20px 20px 0 0;
}
.modal__close { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; border: 2px solid var(--line2); background: rgba(7, 6, 13, .5); color: var(--txt); }
.modal__close:hover { border-color: var(--pk2); color: var(--pk3); }
.modal__title { font-size: 27px; line-height: 1.14; margin-top: 16px; text-transform: uppercase; letter-spacing: -.03em; }
.modal__sub { margin-top: 8px; font-size: 15px; color: #CFCADF; }
.modal__notice { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 11px 14px; border-radius: 12px; border: 1px dashed rgba(255, 45, 149, .5); background: rgba(255, 45, 149, .09); font-size: 13.5px; line-height: 1.45; font-weight: 700; }
.modal__notice .ic { flex: none; color: var(--pk3); margin-top: 1px; }
.modal__notice--form { margin-top: 0; }
.form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.form__fields { display: flex; flex-direction: column; gap: 14px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form.is-done .form__fields { display: none; }
.form__fine--meta { color: #CFCADF; }
.form__fine--meta .ic { color: var(--pk3); }

/* ------------------------------------------------------------------ 404 */
.notfound { padding: 48px 0 90px; }
.notfound__head { max-width: none; }
.notfound__lead, .notfound__cta { max-width: 62ch; }
.notfound__title { font-size: clamp(26px, 4.6vw, 64px); line-height: 1.14; text-transform: uppercase; letter-spacing: -.035em; margin: 20px 0 18px; overflow-wrap: anywhere; hyphens: auto; }
.notfound__title span { display: block; }
.notfound__l1 { text-shadow: 0 0 44px rgba(168, 85, 247, .4); }
.notfound__title .stroke { -webkit-text-stroke-width: .045em; }
.notfound__lead { font-size: 17px; line-height: 1.6; color: #CFCADF; }
.notfound__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.notfound__links { margin-top: 46px; padding: 26px 24px 22px; border-radius: 20px; border: 2px solid var(--line2); background: rgba(13, 10, 31, .6); }
.notfound__links h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--pk3); }
.notfound__links ul { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.notfound__links li a { display: inline-flex; align-items: center; gap: 8px; font: 800 14px/1 var(--fd); }
.notfound__links li a:hover { color: var(--pk3); }
.notfound__links .ic { color: var(--pk3); }
.notfound__contact { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--mut); font-weight: 600; }


/* ==================================================================================================
   forms, reveal, legal pages and every responsive override
   ================================================================================================== */

.form__row--one { grid-template-columns: minmax(0, 1fr); } /* pre-launch: no password field beside the birthdate */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span, .field > label { font: 800 11px/1 var(--fd); text-transform: uppercase; letter-spacing: .1em; color: var(--mut); }
.field input { width: 100%; padding: 13px 14px; border-radius: 12px; border: 2px solid var(--line2); background: rgba(255, 255, 255, .05); color: var(--txt); font: 600 15px/1.3 var(--fb); transition: border-color .2s, box-shadow .2s; color-scheme: dark; }
.field input::placeholder { color: rgba(167, 163, 189, .8); }
.field input:focus { outline: none; border-color: var(--pk2); box-shadow: 0 0 0 4px rgba(255, 45, 149, .2); }
.field.has-err input { border-color: var(--pk2); }
.field__err { display: block; font-size: 12px; font-weight: 700; color: var(--pk3); min-height: 0; }
.field__err:empty { display: none; }
.check { display: flex; flex-direction: column; gap: 4px; }
.check__in { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 600; cursor: pointer; position: relative; }
.check .field__err { padding-left: 34px; }
.form__a { color: var(--txt); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.form__a:hover { color: var(--pk3); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check i { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line2); background: var(--surf); position: relative; transition: all .2s; margin-top: 1px; }
.check i::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--ease); }
.check input:checked + i { background: var(--txt); border-color: var(--txt); box-shadow: 2px 2px 0 var(--pk2); }
.check input:checked + i::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + i { outline: 3px solid var(--pk2); outline-offset: 2px; }
.check.has-err i { border-color: var(--pk2); }
.form__link { align-self: flex-end; font-size: 13px; font-weight: 700; color: var(--pk3); margin-top: -4px; }
.form__msg { display: none; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; border: 2px solid; }
.form__msg.is-err { display: block; color: #FFD1E6; border-color: var(--pk2); background: rgba(255, 45, 149, .12); }
.form__msg.is-ok { display: block; color: #C7F9E5; border-color: var(--ok); background: rgba(52, 211, 153, .12); }
.form__msg:focus { outline: none; } /* receives focus only to place the reading cursor after a submit; it is not a control */
.form__switch { text-align: center; font-size: 14px; color: var(--mut); margin-top: 4px; }
.form__switch a { color: var(--txt); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.form__fine { display: flex; align-items: flex-start; justify-content: center; gap: 6px; font-size: 12px; line-height: 1.45; color: var(--mut); font-weight: 700; text-align: center; }
.form__fine .ic { color: var(--ok); flex: none; margin-top: 3px; }
.btn.is-loading { opacity: .7; pointer-events: none; }
body.has-modal, body.has-nav { overflow: hidden; }
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.nav, .modal__box { overscroll-behavior: contain; }

/* ------------------------------------------------------------------ scroll reveal (JS-only, visible without JS) */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .tile.reveal { transform: translateY(26px); }
.js .tile.reveal.in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); }
.js .grid .tile.reveal { transition-delay: 0s; }
.js .hero .reveal { transition-delay: calc(var(--i, 0) * 80ms + 80ms); }
.js .hero__copy > .reveal:nth-child(1) { --i: 0; } .js .hero__copy > .reveal:nth-child(2) { --i: 1; } .js .hero__copy > .reveal:nth-child(3) { --i: 2; } .js .hero__copy > .reveal:nth-child(4) { --i: 3; }
.js .hero__more > .reveal:nth-child(1) { --i: 4; } .js .hero__more > .reveal:nth-child(2) { --i: 5; }
.js .hero__visual.reveal { --i: 2; }
/* Stagger index for the four card decks. It used to arrive as style="--i:N" on every card; the
   Content-Security-Policy bans style attributes outright, so the position in the deck supplies it. */
.js .promos > .reveal:nth-child(1), .js .steps > .reveal:nth-child(1), .js .tiers > .reveal:nth-child(1), .js .trust > .reveal:nth-child(1) { --i: 0; }
.js .promos > .reveal:nth-child(2), .js .steps > .reveal:nth-child(2), .js .tiers > .reveal:nth-child(2), .js .trust > .reveal:nth-child(2) { --i: 1; }
.js .promos > .reveal:nth-child(3), .js .steps > .reveal:nth-child(3), .js .tiers > .reveal:nth-child(3), .js .trust > .reveal:nth-child(3) { --i: 2; }
.js .promos > .reveal:nth-child(4), .js .steps > .reveal:nth-child(4), .js .tiers > .reveal:nth-child(4), .js .trust > .reveal:nth-child(4) { --i: 3; }
.js .promos > .reveal:nth-child(5), .js .steps > .reveal:nth-child(5), .js .tiers > .reveal:nth-child(5), .js .trust > .reveal:nth-child(5) { --i: 4; }
.js .promos > .reveal:nth-child(6), .js .steps > .reveal:nth-child(6), .js .tiers > .reveal:nth-child(6), .js .trust > .reveal:nth-child(6) { --i: 5; }
.js .promos > .reveal:nth-child(7), .js .steps > .reveal:nth-child(7), .js .tiers > .reveal:nth-child(7), .js .trust > .reveal:nth-child(7) { --i: 6; }
.js .promos > .reveal:nth-child(8), .js .steps > .reveal:nth-child(8), .js .tiers > .reveal:nth-child(8), .js .trust > .reveal:nth-child(8) { --i: 7; }

/* ------------------------------------------------------------------ legal pages (/uslovi-koriscenja, /privatnost, /odgovorna-igra) */
.legal { padding: 40px 0 80px; position: relative; }
.legal::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 40% at 15% 0%, rgba(124, 58, 237, .18), transparent 70%), radial-gradient(40% 40% at 90% 30%, rgba(255, 45, 149, .1), transparent 70%); }
.legal__head { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 2px solid var(--line2); }
.legal__lead, .legal__badges { max-width: 72ch; }
.legal__title { font-size: clamp(38px, 5.4vw, 74px); line-height: 1.14; text-transform: uppercase; letter-spacing: -.03em; margin: 20px 0 18px; overflow-wrap: anywhere; hyphens: auto; }
.legal__title span { display: block; }
.legal__l1 { text-shadow: 0 0 40px rgba(168, 85, 247, .35); }
.legal__lead { font-size: 17px; line-height: 1.6; color: var(--txt); font-weight: 500; }
.legal__head .compliance { margin-top: 22px; }
.legal__body { display: grid; grid-template-columns: 280px minmax(0, 72ch); gap: 48px; align-items: start; }
.legal__toc { position: sticky; top: calc(var(--header-h) + 20px); padding: 20px 20px 18px; border-radius: 16px; background: rgba(13, 10, 31, .85); border: 2px solid var(--line2); box-shadow: 6px 6px 0 var(--pu3); }
.legal__toc h2 { font: 800 11px/1 var(--fd); text-transform: uppercase; letter-spacing: .12em; color: var(--pk3); margin-bottom: 12px; }
.legal__toc ol { counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }
.legal__toc ol a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 700; color: var(--mut); transition: color .2s, background .2s; }
.legal__toc ol a:hover { color: var(--txt); background: var(--surf2); }
.legal__toc-other { margin-top: 20px; }
.legal__other { display: flex; flex-direction: column; gap: 6px; }
.legal__other a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--txt); }
.legal__other a:hover { color: var(--pk3); }
.legal__other .ic { color: var(--pk3); }
.legal__back { margin-top: 18px; }
.legal__doc { font-size: 16px; line-height: 1.65; color: #D9D5EE; }
.legal__sec + .legal__sec { margin-top: 36px; }
.legal__sec h2 { font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 14px; scroll-margin-top: calc(var(--header-h) + 20px); padding-left: 16px; border-left: 4px solid var(--pk2); }
.legal__sec p + p { margin-top: 12px; }
.legal__a { color: var(--txt); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal__a:hover { color: var(--pk3); }
.legal__contact { display: flex; gap: 18px; align-items: flex-start; margin-top: 44px; padding: 24px; border-radius: 18px; background: var(--txt); color: var(--ink); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--pk2); transform: rotate(-.6deg); }
.legal__contact h2 { font-size: 22px; text-transform: uppercase; }
.legal__contact p { margin-top: 8px; font-size: 15px; font-weight: 600; color: #2A2440; }
.legal__contact .legal__a { color: var(--ink); }
.legal__contact .legal__a:hover { color: var(--pu3); }
.legal__contact .age { flex: none; }
.legal__contact-fine { font-size: 12.5px !important; color: #5A5474 !important; font-weight: 700 !important; }
.legal__foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ------------------------------------------------------------------ responsive */
/* 1001-1340: container margins are < 50px, so the star spark outside the copy column would touch the CTA row */
@media (max-width: 1340px) and (min-width: 1001px) {
  .hero__spark--2 { display: none; }
}
@media (max-width: 1240px) {
  /* the mission chip sits under the multiplier chip instead of on top of it while the stage narrows.
     The multiplier chip is two lines tall (label+value, then the launch note), so it needs the extra room. */
  .chip--win { top: 414px; }
}
@media (max-width: 1200px) {
  /* the +18 sticker must stay on the CTA row: tighten the hero buttons instead of wrapping 'Pogledaj igre' */
  .hero__cta { gap: 9px; }
  .hero__cta .btn--lg { padding: 15px 17px; font-size: 14.5px; }
  .cta-age { min-width: 38px; height: 38px; font-size: 13px; }
  .header__in { gap: 14px; }
  .nav__link { padding: 10px 10px; font-size: 13px; white-space: nowrap; }
  .hero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 28px; }
  .stat { padding: 0 14px; }
  .stat dt { font-size: 11px; letter-spacing: .04em; }
  .stat dd { font-size: 24px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .promos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { height: 430px; }
  .fcard { width: 200px; }
  .fcard--1 { width: 160px; }
  .fcard--3 { width: 168px; }
  .chip--mult { top: 290px; }
  .chip--win { top: 366px; }
}
@media (max-width: 1240px) and (min-width: 1101px) {
  /* desktop header at its narrowest: logo + 7 links + "Entrar" + "Lista de espera" */
  .header__in { gap: 10px; }
  .nav__link { padding: 9px 7px; font-size: 12.5px; }
  .header__actions { gap: 8px; }
  .header__actions .btn { padding: 11px 14px; font-size: 13px; }
  .logo { font-size: 20px; gap: 8px; }
}
@media (max-width: 1130px) {
  .tour { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .hero { min-height: 0; padding: 36px 0 64px; }
  .hero__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "visual" "more"; row-gap: 28px; }
  .hero__visual { margin-top: 6px; }
  /* stacked hero: the sparks leave the headline column (top-right beside the eyebrow, and the stage's right edge) */
  .hero__spark--1 { left: auto; right: 6%; top: 18px; }
  .hero__spark--2 { left: auto; right: 3%; top: auto; bottom: 30%; }
  /* Once the hero stacks there is no empty gutter left at the bottom: the facts row runs the full width,
     so the third spark landed straight on the hero fact line. It has nowhere to go here — drop it. */
  .hero__spark--3 { display: none; }
  .stage { height: 380px; max-width: 560px; margin: 0 auto; }
  .fcard { width: 190px; }
  .fcard--1 { width: 150px; left: 4%; top: 60px; }
  .fcard--3 { width: 156px; right: 4%; top: 40px; }
  .gcoin--3 { --s: 60px; bottom: 112px; } /* clears the mission chip, which now sits at the foot of the stage */
  /* the multiplier chip is two lines tall here, so the two chips stack from the foot of the stage instead of
     sitting side by side — side by side they overlapped and the launch note got cut off */
  .chip--mult { top: auto; bottom: 96px; }
  .chip--win { top: auto; bottom: 28px; }
  .welcome { margin-top: -12px; }
  .how { grid-template-columns: 1fr; gap: 28px; }
  .faq__in { grid-template-columns: 1fr; gap: 24px; }
  .faq__head { position: static; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
/* The desktop header (logo + 7 links + "Entrar" + "Lista de espera") needs ~1046px and started to overflow
   at 1070. Below 1100 the links move into the burger drawer — but the two actions stay in the bar down to
   768, so a 1024 tablet never shows a logo, a lone burger and a stretch of empty space. */
@media (max-width: 1100px) {
  :root { --header-h: 64px; }
  /* the nav becomes a fixed drawer, so it can no longer push the actions right: do it explicitly */
  .header__actions { margin-left: auto; }
  .nav { position: fixed; top: var(--header-h); left: 0; right: 0; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px 24px 24px; background: #0A0816; border-bottom: 2px solid var(--pk2); box-shadow: 0 30px 60px rgba(0, 0, 0, .6); margin: 0; transform: translateY(-10px); opacity: 0; visibility: hidden; transition: transform .35s var(--ease), opacity .3s, visibility 0s .35s; z-index: 99; }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  body.has-nav::after { content: ""; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 98; background: rgba(7, 6, 13, .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .nav__link { font: 800 24px/1.2 var(--fd); padding: 12px 16px; border-radius: 14px; color: var(--txt); }
  .nav__link.is-active { background: var(--surf2); box-shadow: inset 4px 0 0 var(--pk2); }
  .nav__mobile-actions { display: none; gap: 10px; margin-top: 20px; }
  .nav__mobile-actions .btn { flex: 1; }
  /* fine print as small chips: wraps cleanly at any width, no dangling separators */
  .nav__fine { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; font: 800 10.5px/1 var(--fd); text-transform: uppercase; letter-spacing: .06em; color: var(--mut); text-align: center; }
  .nav__fine span { white-space: nowrap; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line2); background: var(--surf); }
  .nav__fine i { display: none; }
  .burger { display: flex; }
  .header__in { gap: 12px; }
  .header__actions .btn { padding: 11px 14px; font-size: 12.5px; }
}
/* real phones: the header keeps only the logo and the burger, and the sticky bar takes over the two actions */
@media (max-width: 767px) {
  .header__actions .btn { display: none; }
  .nav__mobile-actions { display: flex; }
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(7, 6, 13, .85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line2); }
  .mbar .btn { flex: 1; padding: 14px 12px; }
  .mbar .btn--ghost { flex: 0 0 auto; }
  body { padding-bottom: 70px; }
  .cookie { bottom: 80px; }
}
@media (max-width: 900px) {
  .sec { padding: 64px 0; }
  .sec__head { flex-direction: column; align-items: flex-start; }
  .sec__head--center { align-items: center; }
  .ticker__label { padding: 0 12px; font-size: 10px; letter-spacing: .06em; }
  .ticker__item { height: 44px; padding: 0 16px; font-size: 13px; }
  .hero__ghost { display: none; }
}
@media (max-width: 1200px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal__body { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 1000px) {
  .footer__info { grid-template-columns: 1fr; }
  .legal__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .legal__toc { position: static; box-shadow: none; }
  .legal__toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
}
/* 4-column tiles (641-800) are 135-170px wide: the hover stack drops the tagline and the meta pills may wrap */
@media (max-width: 800px) {
  .tile__hover { padding: 12px 10px; gap: 8px; }
  .tile__tag { display: none; }
  .tile__meta { gap: 4px; }
  .tile__meta > span { white-space: normal; text-align: center; font-size: 10.5px; padding: 3px 6px; }
  .tile__badges { left: 8px; top: 8px; gap: 4px; }
  .badge { font-size: 9px; padding: 5px 5px; }
}
/* <=700 the tiles are <150px: three badges would wrap into the hover stack, so the third one goes */
@media (max-width: 700px) {
  .tile__badges .badge:nth-child(n+3) { display: none; }
}
@media (max-width: 640px) {
  .container { width: min(1240px, 100% - 32px); }
  .hero { padding: 22px 0 56px; }
  .hero__spark--1 svg { width: 26px; height: 26px; }
  .hero__spark--2, .hero__spark--3 { display: none; } /* no sparks inside the stats / +18 block on phones */
  .hero__in { row-gap: 22px; }
  .sticker--tilt { line-height: 1.3; }
  .hero__copy > .sticker { font-size: 9.5px; letter-spacing: .03em; padding: 8px 9px; gap: 5px; } /* 'Uskoro otvaramo · lista čekanja' on one line from 360px */
  .hero__copy > .sticker .ic { width: 12px; height: 12px; }
  .hero__title { font-size: clamp(40px, 12vw, 56px); margin: 16px 0 14px; }
  .hero__l2 { -webkit-text-stroke-width: .045em; }
  .hero__sub { font-size: 15.5px; }
  /* the waitlist label is long: a 2-track grid keeps the +18 badge welded to the primary CTA and drops
     'Pogledaj igre' onto its own full-width row instead of orphaning the badge between them */
  .hero__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 22px; }
  .hero__cta .btn { min-width: 0; padding: 15px 12px; font-size: 13.5px; white-space: normal; text-align: center; }
  .hero__cta .btn--primary { grid-column: 1; }
  .hero__cta .btn--outline { grid-column: 1 / -1; }
  .cta-age { grid-column: 2; min-width: 46px; height: auto; align-self: stretch; font-size: 13.5px; }
  .how__cta .btn, .vip__cta .btn, .tour__card .btn, .faq__help .btn, .modal .btn--block, .form__row .btn, .notfound__cta .btn { white-space: normal; text-align: center; max-width: 100%; }
  .hero__visual { margin: 0 -16px; }
  /* full-bleed stage: the fanned cards and coins are decoration, so they get clipped at the screen edge
     instead of adding a few pixels of document overflow (the chips already sit inside the box here) */
  .stage { height: 300px; max-width: none; overflow: hidden; }
  .fcard { width: 168px; border-radius: 14px; }
  .fcard--2 { top: 8px; }
  .fcard--1 { width: 126px; left: 2%; top: 44px; }
  .fcard--3 { width: 132px; right: 2%; top: 30px; }
  .gcoin--1 { --s: 44px; left: calc(50% + 58px); top: -4px; }
  .gcoin--2 { --s: 28px; left: 6%; top: 8px; }
  .gcoin--3 { --s: 50px; right: 10%; bottom: 62px; }
  .gcoin--4 { display: none; }
  /* the stage is full-bleed here, so both chips are pinned 12px inside the screen and capped at the width
     that leaves the same 12px on the other side — a long label wraps inside the chip, never off the edge */
  .chip { flex-wrap: wrap; max-width: calc(100% - 24px); }
  .chip--mult { left: 12px; top: auto; bottom: 74px; padding: 8px 12px; }
  .chip--mult strong { font-size: 15px; }
  .chip--win { right: 12px; top: auto; bottom: 16px; font-size: 12px; padding: 8px 11px; }
  .chip--win strong { font-size: 13px; }
  .welcome { width: calc(100% - 32px); margin: 14px auto 0; padding: 14px 16px 14px 14px; transform: rotate(-1deg); }
  .welcome__coin { --s: 44px; }
  .welcome__title b { font-size: 20px; }
  .compliance { margin-top: 0; }
  .stat dt { font-size: 10.5px; letter-spacing: .05em; }
  .stat dd { font-size: 22px; }
  .bands { margin-top: -30px; padding-bottom: 0; }
  .ticker__label-full { display: none; }
  .ticker__label-short { display: inline; }
  .ticker__viewport { mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
  .stripe { transform: none; margin-top: 0; box-shadow: none; }
  .stripe__list { font-size: 11px; padding: 9px 8px; gap: 16px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px 48px; padding-bottom: 4px; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scroll-behavior: smooth; overscroll-behavior-x: contain; mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; scroll-snap-align: start; }
  .promos { grid-template-columns: 1fr; }
  .promo { transform: none; }
  .step { grid-template-columns: 80px 1fr; gap: 10px; padding: 16px 16px 16px 14px; }
  .step__num { font-size: 40px; }
  .tiers { grid-template-columns: 1fr; }
  .board__table th, .board__table td { padding: 12px 14px; }
  .rank { min-width: 30px; height: 30px; font-size: 11.5px; padding: 0 7px; }
  .coins { font-size: 12.5px; white-space: nowrap; }
  /* narrow board: the club status folds under the coin reward instead of scrolling off-screen */
  .board__table th.status, .board__table td.status { display: none; }
  .status-inline { display: block; }
  .board__table td:first-child, .board__table th:first-child { width: 1%; }
  .is-all .rank { white-space: normal; max-width: 118px; height: auto; padding: 6px 8px; line-height: 1.25; text-align: center; }
  .board__head { padding: 18px 16px 4px; }
  .board__note { padding: 12px 16px 16px; }
  .trust { grid-template-columns: 1fr; }
  .trust__item { transform: none; }
  .legal { padding: 24px 0 64px; }
  /* 'RESPONSÁVEL' is the longest single word on the site: at this size it fits on one line from 320px,
     and hyphens:auto handles anything longer without the anywhere-break dropping a stray letter */
  .legal__title { font-size: clamp(23px, 7.4vw, 44px); }
  .legal__lead { font-size: 15.5px; }
  .legal__toc ol { grid-template-columns: 1fr; }
  .legal__doc { font-size: 15.5px; }
  .legal__contact { flex-direction: column; padding: 20px; transform: none; box-shadow: 6px 6px 0 var(--pk2); }
  .legal__foot .btn { flex: 1 1 100%; white-space: normal; min-width: 0; }
  .footer__resp, .footer__company { padding: 18px 16px 16px; }
  .company div { grid-template-columns: 1fr; gap: 2px; }
  .tour__card { padding: 26px 18px 22px; box-shadow: 6px 6px 0 var(--pk2), 0 30px 60px rgba(0, 0, 0, .5); }
  .launchbox__text { font-size: 16px; }
  .faq__item summary { padding: 16px 16px; font-size: 15px; gap: 12px; }
  .faq__a { padding: 0 16px 18px 48px; font-size: 14.5px; }
  .footer { padding: 56px 0 40px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer__col:last-child { grid-column: 1 / -1; }
  .modal { padding: 12px; }
  .modal__box { padding: 0 20px 22px; border-radius: 18px; box-shadow: 6px 6px 0 var(--pk2), 0 40px 100px rgba(0, 0, 0, .7); }
  .modal__bar { margin: 0 -20px 6px; padding: 10px 12px 4px; border-radius: 16px 16px 0 0; }
  .form__row { grid-template-columns: 1fr; }
  .modal__title { font-size: 24px; margin-top: 14px; }
  .modal__sub { margin-top: 6px; }
  .modal__notice { margin-top: 10px; padding: 9px 12px; font-size: 13px; }
  .form { margin-top: 16px; gap: 12px; }
  /* phones: the +18 / entertainment line sits right above the submit button instead of below the fold */
  .form__fields { order: 0; } .form__msg { order: 1; } .form__fine { order: 2; } .form button[type=submit], .form .form__cta { order: 3; } .form__switch { order: 4; }
  /* stacked, not a squeezed row: the text keeps its full width and the buttons sit on their own line */
  .cookie { left: 8px; right: 8px; bottom: 76px; width: auto; display: block; padding: 12px 14px; font-size: 12.5px; line-height: 1.35; box-shadow: 4px 4px 0 var(--pk2); }
  .cookie p { margin: 0 0 10px; }
  .cookie__actions { margin-top: 0; gap: 8px; justify-content: stretch; }
  .cookie__actions .btn { flex: 1; }
  .cookie__actions .btn { padding: 9px 12px; font-size: 11px; }
}
/* below ~520 the three facts stack: no dividers to orphan, no two-up rhythm to break */
@media (max-width: 520px) {
  .stats { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 18px; margin-top: 22px; }
  /* stacked, one fact per row: there is nothing left to align across columns, and a shared subgrid would
     inherit the 14px row gap between the value and its label */
  .stat { padding: 0; display: flex; flex-direction: column; grid-row: auto; }
  .stat + .stat::before { display: none; }
  .stat + .stat { padding-top: 14px; border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .board__table th, .board__table td { padding: 11px 10px; }
  .board__table { font-size: 14px; }
  .hero__fine { font-size: 12.5px; }
  .coins { font-size: 12px; gap: 5px; }
  .coins .coin { --s: 14px; }
}
@media (max-width: 380px) {
  .hero__spark--1 { display: none; }
  .mbar { gap: 8px; padding-inline: 10px; }
  .mbar .btn { padding: 14px 8px; font-size: 13px; }
  .mbar .btn--primary .ic { display: none; }
  .tour__card { padding: 22px 12px 20px; }
  .is-all .rank { max-width: 112px; font-size: 10.5px; padding: 6px 6px; }
  .coins { font-size: 12px; gap: 5px; }
  .board__table th, .board__table td { padding: 10px 8px; }
  .launchbox { padding: 13px 11px 11px; }
  .launchbox__text { font-size: 15px; }
  /* both chips wrap to two lines at this width: lift the multiplier so it clears the mission chip */
  .chip--mult { bottom: 92px; padding: 7px 10px; font-size: 12px; }
  .modal { padding: 8px; }
  .modal__box { padding: 0 16px 18px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .modal__bar { margin: 0 -16px 4px; padding: 8px 10px 4px; }
  .modal__close { width: 34px; height: 34px; }
  .modal__title { font-size: 21px; margin-top: 12px; }
  .modal__sub { font-size: 14px; margin-top: 6px; }
  .form, .form__fields { gap: 10px; }
  .form { margin-top: 16px; }
  .field input { padding: 11px 12px; }
  .fcard { width: 150px; }
  .fcard--1 { width: 112px; }
  .fcard--3 { width: 118px; }
  .compliance li { padding: 8px 10px; font-size: 11.5px; }
}

@media (max-width: 340px) {
  .coins { white-space: normal; line-height: 1.25; }
  .is-all .rank { max-width: 106px; }
}

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ticker__track, .stripe__track { animation: none !important; }
  .marq-pause { display: none; }
  .js .reveal { opacity: 1; transform: none; }
  .tile { transform: none !important; }
  .welcome, .fcard, .gcoin, .chip { animation: none !important; }
}

/* footer: reopen the cookie choice (the privacy policy points at this control) */
.footer__cookies {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  padding: 0; color: var(--mut); font: 600 12.5px/1.2 var(--fb); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line2);
}
.footer__cookies:hover { color: var(--txt); text-decoration-color: var(--pk2); }