/* ==========================================================================
   Alpha Lotto — landing site
   Theme: "Draw Night" — navy stage, cream ticket, brand gold.
   Depth is tonal: grounds stack, hairlines separate. Only the lotto ball casts a shadow.
   ========================================================================== */

:root {
  --navy-950: #060f21;
  --navy-900: #0b1a33;
  --navy-800: #122747;
  --navy-700: #233d63;   /* brand navy */
  --navy-600: #33527f;
  --gold-600: #c98700;
  --gold-500: #eea200;   /* brand gold */
  --gold-400: #ffb82e;
  --gold-200: #ffe2a3;
  --cream-100: #fffdf8;
  --cream-200: #fbf6e9;
  --cream-300: #f1e8d2;
  --ink-900: #10182b;
  --ink-600: #4b5468;
  --ink-400: #646d85;    /* passes 4.5:1 on paper and cream */
  --line: rgba(16, 24, 43, 0.12);
  --line-strong: rgba(16, 24, 43, 0.28);
  --line-dark: rgba(255, 255, 255, 0.12);
  --success: #2fbf71;
  --danger: #c6402c;

  --display: "Syne", "Trebuchet MS", sans-serif;
  --body: "Albert Sans", "Segoe UI", sans-serif;

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 28px;
  --container: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--navy-600) var(--cream-200); }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--cream-100);
  overflow-x: hidden;
  caret-color: var(--gold-600);
}

::selection { background: var(--gold-500); color: var(--navy-950); }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.05; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h1:focus { outline: none; } /* focused programmatically after navigation */
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; }

/* Grid and flex children default to min-width:auto, which lets a large image push the
   track wider than the viewport on phones. Opt every layout child out of that. */
.hero-grid > *, .tickets > *, .ways > *, .payout-grid > *, .values > *, .contact-grid > *,
.footer-grid > *, .about-split > *, .step > *, .stats > *, .site-header .container > * { min-width: 0; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Buttons — firm pills, one colour each, no lift, no glow
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.8em 1.5em;
  border-radius: 999px;
  font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn-lg { padding: 1em 2em; font-size: 1.05rem; }
.btn-gold { background: var(--gold-500); color: var(--navy-950); }
.btn-gold:hover { background: var(--gold-400); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.btn-navy { background: var(--navy-700); color: #fff; }
.btn-navy:hover { background: var(--navy-800); }
.btn-outline { background: transparent; color: var(--navy-700); border-color: var(--navy-700); }
.btn-outline:hover { background: var(--navy-700); color: #fff; }
.btn .arrow { transition: transform .18s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 15, 33, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
  color: #fff;
}
.site-header .container { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em; }
.brand img { height: 44px; width: auto; }
.brand span small { display: block; font-family: var(--body); font-weight: 500; font-size: 0.72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-400); }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  display: block; padding: 10px 14px; border-radius: 999px;
  font-weight: 500; font-size: 0.95rem; text-decoration: none; color: rgba(255, 255, 255, .78);
  transition: color .15s, background .15s;
}
.nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(255, 255, 255, .08); }
.header-cta { display: flex; align-items: center; }
.header-cta .signin { color: rgba(255, 255, 255, .78); text-decoration: none; font-weight: 500; padding: 10px 12px; }
.header-cta .signin:hover { color: #fff; }
.header-play { flex: none; }
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 12px; flex: none;
  border: 1px solid var(--line-dark); background: transparent; color: #fff; cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; margin: 4px auto; transition: transform .2s, opacity .2s; }

@media (max-width: 980px) {
  .site-header .container { gap: 10px; }
  .brand { margin-right: auto; font-size: 1.05rem; order: 0; }
  .brand span { white-space: nowrap; }
  .brand img { height: 38px; }
  .header-play { padding: 0.7em 1.1em; order: 1; }
  .nav-toggle { display: block; order: 2; }
  .nav-links { order: 3; }
  .header-cta { order: 4; }
  .nav-links, .header-cta { display: none; }
  .site-header.open .nav-links, .site-header.open .header-cta {
    display: flex; flex-direction: column; align-items: stretch; width: 100%; margin: 0;
  }
  .site-header.open .nav-links a { padding: 12px 14px; }
  .site-header.open .container { flex-wrap: wrap; padding-bottom: 16px; }
  .site-header.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .site-header.open .nav-links { margin-top: 8px; }
  .site-header.open .header-cta .signin { padding: 12px 14px; }
}
@media (max-width: 480px) {
  /* The logo mark already reads "Alpha Lotto"; the wordmark is redundant at this width. */
  .brand span { display: none; }
  .brand img { height: 42px; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: var(--navy-900); /* flat stage: no glow behind the copy */
}
.hero::before {
  /* fine grain so the navy isn't a flat fill */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>");
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; z-index: 2; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238, 162, 0, .6), transparent);
}
.hero-grid {
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center;
  padding: clamp(40px, 8vw, 112px) 0 clamp(40px, 7vw, 96px);
}
.hero-copy { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Hero carousel — five slides on the stage. The track is a scroll-snap row, so it swipes
   and scrolls without JavaScript; the dots, arrows, pause and autoplay only appear with it.
   Each slide has its own copy column and studio photograph; the photograph is anchored to
   the slide (not the section) so it reaches the viewport edge on wide screens.
   -------------------------------------------------------------------------- */
.hero-carousel { padding: 0; }
.slides {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.slides::-webkit-scrollbar { display: none; }
.slides:focus-visible { outline-offset: -3px; }
.slide { position: relative; flex: 0 0 100%; width: 100%; max-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; overflow: hidden; }
/* The grid is a flex item here, so it must not take its min-content width or long copy pushes it past the slide. */
.slide > .hero-grid { min-width: 0; max-width: 100%; width: min(var(--container), 100% - 2 * var(--gutter)); padding-bottom: clamp(32px, 5vw, 64px); }
.slide .hero-title { font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
.slide:not(:first-child) .hero-title { max-width: 16ch; }

.carousel-bar { display: none; align-items: center; justify-content: space-between; gap: 16px; position: relative; z-index: 2; padding: 0 0 22px; }
.js .carousel-bar { display: flex; }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dot {
  width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .32); transition: width .25s ease, background .2s ease;
}
.carousel-dot:hover { background: rgba(255, 255, 255, .6); }
.carousel-dot[aria-current="true"] { width: 30px; background: var(--gold-500); }
.carousel-nav { display: flex; gap: 8px; }
.carousel-btn {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .3);
  transition: border-color .18s ease, background .18s ease;
}
.carousel-btn:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.carousel-pause .icon-play { display: none; }
.carousel-pause[aria-pressed="true"] .icon-pause { display: none; }
.carousel-pause[aria-pressed="true"] .icon-play { display: block; }

/* USSD slide: the four-item menu, read like a phone screen */
.ussd-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0 0 26px; padding: 0; font-size: .98rem; color: rgba(255, 255, 255, .85); max-width: 480px; }
.ussd-menu li { display: flex; align-items: center; gap: 12px; }
.ussd-menu li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); flex: none; }
.ussd-menu b { flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1px solid var(--line-dark); font-family: var(--display); font-weight: 800; color: var(--gold-400); font-variant-numeric: tabular-nums; }

/* Games slide: the nine logos as cream chips on the stage */
.hero-logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0 0 26px; max-width: 540px; }
.hero-logos li { height: 58px; padding: 8px 10px; border-radius: 12px; background: var(--cream-200); }
.hero-logos img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* Payout slide: bet types and multipliers in one row */
.hero-odds { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 26px; font-size: .95rem; color: rgba(255, 255, 255, .8); }
.hero-odds li { display: flex; align-items: baseline; gap: 6px; }
.hero-odds b { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--gold-400); font-variant-numeric: tabular-nums; }
/* The studio photograph: five drawn balls under the machine. On wide screens it is anchored to
   the section (not the container) so it reaches the viewport edge, and the image itself is masked
   so it dissolves into the navy behind the copy. On phones it follows the copy in normal flow. */
/* The studio photograph is anchored to the slide (not the container) so it reaches the viewport
   edge on wide screens, and the image itself is masked so it dissolves into the navy behind the copy. */
.hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; z-index: 0; }
.hero-photo picture { display: block; height: 100%; }
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 56% 62%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 22%, #000 46%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 22%, #000 46%);
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 26, 51, .3) 0%, transparent 30%, transparent 62%, rgba(11, 26, 51, .82) 100%);
}
.hero-photo-note {
  position: relative; z-index: 2; grid-column: 2; align-self: end; justify-self: end; margin: 0; max-width: 30ch;
  text-align: right; font-size: .85rem; line-height: 1.45; color: rgba(255, 255, 255, .85);
}
.hero-title { font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; max-width: 14ch; }
.hero-title em { font-style: normal; color: var(--gold-400); }
.hero-lead { font-size: clamp(1.02rem, 1.5vw, 1.25rem); color: rgba(255, 255, 255, .8); max-width: 54ch; margin: 22px 0 28px; }
.hero-lead a { color: #fff; font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-next {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 22px;
  padding: 10px 16px 10px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .85); text-decoration: none; font-size: .92rem;
}
.hero-next:hover { border-color: var(--gold-400); color: #fff; }
.hero-next i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; }
.hero-next b { font-family: var(--display); font-weight: 700; color: #fff; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; font-size: .9rem; color: rgba(255, 255, 255, .78); }
.hero-proof li { display: flex; align-items: center; gap: 8px; }
.hero-proof li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); flex: none; }
.hero-proof a { color: #fff; font-weight: 600; }

/* lotto ball — the number chip used on the results board */
.ball {
  --c: var(--gold-500); --ink: var(--navy-950);
  display: inline-grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  font-family: var(--display); font-weight: 800; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 50% 55%, var(--c) 0%, color-mix(in srgb, var(--c), #000 40%) 100%);
  box-shadow: inset -8px -12px 20px rgba(0, 0, 0, .28), 0 24px 40px -14px rgba(0, 0, 0, .55);
}
.ball.white { --c: #f4f1ea; }
.ball.navy { --c: var(--navy-600); --ink: #fff; }
.ball.red { --c: #e2503b; --ink: #fff; }

@media (max-width: 900px) {
  /* Copy first on phones: the message and the action are the fold, the photograph comes after. */
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-photo { position: relative; top: auto; right: auto; bottom: auto; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-dark); }
  .hero-photo img { object-position: 50% 62%; -webkit-mask-image: none; mask-image: none; }
  .hero-photo::after { background: linear-gradient(180deg, transparent 70%, rgba(11, 26, 51, .35) 100%); }
  .hero-photo-note { grid-column: 1; justify-self: start; text-align: left; max-width: 44ch; margin-top: -10px; }
  /* Slides share the tallest slide's height; keep a short slide's copy and photo together at the top. */
  .slide > .hero-grid { padding-bottom: 28px; align-content: start; }
  .carousel-bar { padding-bottom: 18px; }
  .ussd-menu { grid-template-columns: 1fr; gap: 8px; }
  .hero-logos { grid-template-columns: repeat(3, 1fr); max-width: none; }
  .hero-logos li { height: 54px; padding: 6px 8px; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-cream { background: var(--cream-200); }
.section-navy { background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); color: #fff; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 800; letter-spacing: -0.025em; max-width: 24ch; }
.section-sub { color: var(--ink-600); max-width: 56ch; margin: 12px 0 0; }
.section-navy .section-sub { color: rgba(255, 255, 255, .75); }
.section-date { display: block; margin-top: 10px; font-size: .9rem; font-weight: 600; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.label { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-600); }
.section-navy .label { color: var(--gold-400); }

/* --------------------------------------------------------------------------
   Game tickets (today's draws)
   -------------------------------------------------------------------------- */
.tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.ticket {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden; transition: border-color .2s ease;
}
.ticket:hover { border-color: var(--line-strong); }
.ticket-art { display: grid; place-items: center; height: 150px; background: var(--cream-200); border-bottom: 2px dashed var(--cream-300); }
.ticket-art img { max-height: 110px; max-width: 70%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.ticket-body { padding: 20px 22px 16px; }
.ticket-live { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
.ticket-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: pulse 1.6s ease-in-out infinite; }
.ticket.closed .ticket-live i { background: var(--ink-400); animation: none; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 191, 113, .5); } 60% { box-shadow: 0 0 0 7px rgba(47, 191, 113, 0); } }
.ticket h3 { font-size: 1.35rem; margin-top: 8px; }
.ticket-meta { color: var(--ink-600); font-size: .9rem; margin: 6px 0 14px; }
.ticket-meta b { font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* Countdown: digit flip, staggered entrance and the hairline accent are ported from
   21st.dev nexus-ui/animated-countdown ("modern" variant). */
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cd-unit {
  position: relative; display: grid; text-align: center; padding: 10px 4px 8px; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--navy-900); color: #fff; border: 1px solid rgba(255, 255, 255, .06);
}
.cd-unit::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(238, 162, 0, .85), transparent); }
.countdown.live .cd-unit { animation: cd-enter .35s ease-out both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes cd-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.cd-unit b { position: relative; display: grid; place-items: center; height: 1.4rem; font-family: var(--display); font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.cd-unit b .cd-v { grid-area: 1 / 1; }
.cd-unit b .cd-in { animation: cd-in .25s ease-out both; }
.cd-unit b .cd-out { animation: cd-out .25s ease-out both; }
@keyframes cd-in { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes cd-out { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translateY(-12px); filter: blur(4px); } }
.cd-unit small { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-400); margin-top: 4px; }
.countdown.closed .cd-unit { background: var(--cream-300); color: var(--ink-600); border-color: transparent; }
.countdown.closed .cd-unit::before { display: none; }
.countdown.closed .cd-unit small { color: var(--ink-600); }
.countdown-closed-note { display: none; margin: 10px 0 0; font-size: .9rem; color: var(--danger); font-weight: 600; }
.countdown.closed + .countdown-closed-note { display: block; }
.ticket-cta {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; background: var(--gold-500); color: var(--navy-950);
  font-family: var(--display); font-weight: 800; text-decoration: none; transition: background .15s;
}
.ticket-cta:hover { background: var(--gold-400); }
.ticket-cta span { transition: transform .15s; }
.ticket-cta:hover span { transform: translateX(4px); }
.ticket-cta.muted { background: var(--cream-300); color: var(--ink-900); }
.ticket-cta.muted:hover { background: var(--cream-200); }
.ticket-cta small { display: block; font-family: var(--body); font-weight: 500; font-size: .8rem; letter-spacing: 0; opacity: .8; }
.tickets-note { margin: 20px 0 0; font-size: .92rem; color: var(--ink-600); max-width: 70ch; }
.tickets-note a { color: var(--navy-700); font-weight: 600; }

.empty-state {
  display: grid; gap: 10px; justify-items: start;
  padding: 32px; border-radius: var(--radius); border: 2px dashed var(--cream-300); background: var(--cream-200);
}
.empty-state h3 { font-size: 1.3rem; }
.empty-state p { color: var(--ink-600); margin: 0; }
.empty-state a { color: var(--navy-700); font-weight: 600; }

/* --------------------------------------------------------------------------
   Ways to play
   -------------------------------------------------------------------------- */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.way-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 32px 28px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line);
}
.way-card h3 { font-size: 1.4rem; }
.way-card p { color: var(--ink-600); margin: 0; }
.way-card .ussd-code { font-family: var(--display); font-size: 2.4rem; font-weight: 800; color: var(--navy-700); letter-spacing: .04em; text-decoration: none; display: inline-block; }
.way-card .ussd-code:hover { color: var(--navy-900); text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--gold-500); }
.way-card .actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 10px; }
.way-card .fine { font-size: .88rem; color: var(--ink-400); margin: 0; }
.store-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.store-badges img { height: 44px; width: auto; }
.networks { display: flex; gap: 8px; align-items: center; }
.networks img { height: 36px; width: auto; border-radius: var(--radius-sm); }
.networks-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.networks-list li { padding: 7px 12px; border-radius: var(--radius-sm); background: var(--cream-200); font-size: .85rem; font-weight: 600; color: var(--navy-700); }
@media (max-width: 900px) { .ways { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */
.results-wrap { border-radius: var(--radius); border: 1px solid var(--line); background: #fff; overflow: hidden; }
.results-table { width: 100%; border-collapse: collapse; }
.results-table th { text-align: left; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); padding: 16px 20px; border-bottom: 1px solid var(--line); }
.results-table td { padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.results-table tr:last-child td { border-bottom: 0; }
.results-table tbody tr:hover { background: var(--cream-200); }
.result-game { display: flex; align-items: center; gap: 14px; }
.result-game img { width: 56px; height: 56px; object-fit: contain; border-radius: var(--radius-sm); background: var(--cream-200); padding: 6px; flex: none; }
.result-game strong { font-family: var(--display); font-size: 1.05rem; display: block; }
.result-game small { color: var(--ink-600); }
.result-date { font-variant-numeric: tabular-nums; }
.balls-row { display: flex; gap: 6px; flex-wrap: nowrap; }
.ball-sm { width: 38px; font-size: .95rem; flex: none; }
.ball-sm.machine { --c: #e8e4da; --ink: var(--navy-700); box-shadow: inset -4px -6px 10px rgba(0, 0, 0, .14), 0 8px 16px -8px rgba(0, 0, 0, .35); }
.balls-label { display: none; }
/* Under 760px each result becomes a card: name, date, then two unbroken rows of five balls. */
@media (max-width: 760px) {
  .results-table, .results-table tbody, .results-table tr, .results-table td { display: block; }
  .results-table thead { display: none; }
  .results-table tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .results-table tr:last-child { border-bottom: 0; }
  .results-table td { padding: 0; border: 0; }
  .results-table td.cell-date { margin: 2px 0 12px 70px; font-size: .9rem; color: var(--ink-600); }
  .results-table td.cell-balls { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; margin-top: 8px; }
  .balls-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-600); }
  .ball-sm { width: 34px; font-size: .9rem; }
  .balls-row { gap: 5px; }
  .result-game img { width: 56px; height: 56px; }
}
.date-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.date-form input[type="date"] {
  font: inherit; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-900);
}
.date-form .btn { padding: .7em 1.3em; }
.results-note { color: var(--ink-600); font-size: .92rem; margin-top: 14px; }

/* --------------------------------------------------------------------------
   Payouts
   -------------------------------------------------------------------------- */
.payout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .payout-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .payout-grid { grid-template-columns: 1fr; } }
.payout-card {
  display: grid; gap: 8px; padding: 26px 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
}
.payout-card .group { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); font-weight: 700; }
.payout-card h3 { font-size: 1.4rem; }
.payout-card p { color: var(--ink-600); margin: 0; font-size: .95rem; }
.payout-card .mult { font-family: var(--display); font-size: 2.2rem; font-weight: 800; color: var(--navy-700); margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.payout-card .mult small { font-family: var(--body); font-size: .85rem; font-weight: 500; color: var(--ink-600); display: block; margin-top: 4px; }
.payout-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.payout-table th, .payout-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.payout-table th { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
.payout-table td.num { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }
.payout-table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Logo marquee
   -------------------------------------------------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track figure { margin: 0; display: grid; justify-items: center; gap: 10px; }
.marquee-track img { height: 84px; width: auto; max-width: 140px; object-fit: contain; }
.marquee-track figcaption { font-family: var(--display); font-weight: 700; font-size: .9rem; color: var(--ink-600); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   About / stats
   -------------------------------------------------------------------------- */
.about-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.about-split picture { display: block; }
.about-split img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line-dark); }
.section:not(.section-navy) .about-split img { border-color: var(--line); }
/* Studio strip: three photographs under the about band, one row on desktop, a swipe row on phones */
.studio-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line-dark);
}
.studio-strip > * { min-width: 0; }
.studio-strip figure { margin: 0; }
.studio-strip picture { display: block; }
.studio-strip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line-dark); }
.studio-strip figcaption { margin-top: 12px; font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .75); }
@media (max-width: 900px) {
  .studio-strip {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: 4px;
    scroll-padding-inline: var(--gutter);
  }
  .studio-strip::-webkit-scrollbar { display: none; }
  .studio-strip li { flex: 0 0 78%; scroll-snap-align: start; }
}
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.stat { padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .04); }
.stat b { display: block; font-family: var(--display); font-size: 2rem; font-weight: 800; color: var(--gold-400); line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { font-size: .85rem; color: rgba(255, 255, 255, .75); }
@media (max-width: 900px) { .about-split { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   Inner page hero
   -------------------------------------------------------------------------- */
.page-hero {
  color: #fff; padding: clamp(48px, 7vw, 88px) 0;
  background:
    radial-gradient(700px 300px at 90% 0%, rgba(238, 162, 0, .25), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-800));
}
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; max-width: 20ch; }
.page-hero p { color: rgba(255, 255, 255, .78); max-width: 60ch; margin: 16px 0 0; font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   How to play steps
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 28px; }
.step {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
  padding: 28px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line);
}
.step:nth-child(even) .step-img { order: -1; }
.step-no { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-500); color: var(--navy-950); font-family: var(--display); font-weight: 800; }
.step h3 { font-size: 1.4rem; margin: 14px 0 8px; }
.step p { color: var(--ink-600); margin: 0; }
.step-img { display: grid; place-items: center; background: var(--cream-200); border-radius: var(--radius); padding: 16px; min-height: 220px; }
.step-img img { max-height: 320px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 760px) { .step { grid-template-columns: 1fr; } .step:nth-child(even) .step-img { order: 0; } }
.steps-note { margin: 24px 0 0; max-width: 70ch; color: var(--ink-600); font-size: .95rem; }

/* How to play: portal screenshots at phone width, and USSD screens as the phone's own dialog */
.step-img-phone { background: var(--navy-900); padding: 24px; }
.step-img-phone img { max-height: 540px; width: auto; border-radius: 18px; border: 1px solid var(--line-dark); background: #fff; }
.step-img-ussd { background: var(--navy-900); padding: 32px 24px; min-height: 260px; }
.ussd { width: min(100%, 300px); }
.ussd-dialog { background: #fff; border-radius: var(--radius); padding: 18px 20px 12px; color: var(--ink-900); }
.ussd-text { margin: 0; white-space: pre-line; font-size: .95rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.ussd-input { display: flex; align-items: center; gap: 2px; margin: 14px 0 0; padding: 6px 0; min-height: 34px; border-bottom: 2px solid var(--navy-700); font-size: 1.05rem; font-weight: 600; }
.ussd-input::after { content: ""; width: 2px; height: 20px; background: var(--navy-700); animation: ussd-caret 1.1s steps(1) infinite; }
.ussd-actions { display: flex; justify-content: flex-end; gap: 24px; margin-top: 12px; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); }
.ussd-send { color: var(--navy-700); }
@keyframes ussd-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ussd-input::after { animation: none; } }

/* --------------------------------------------------------------------------
   Prose (terms, privacy, about)
   -------------------------------------------------------------------------- */
.prose { max-width: 76ch; }
.prose h2 { font-size: 1.5rem; margin: 2.2em 0 .6em; }
.prose h3 { font-size: 1.15rem; margin: 1.6em 0 .5em; }
.prose p, .prose li { color: var(--ink-600); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .5em; }
.prose blockquote { margin: 0 0 1.4em; padding: 18px 24px; background: var(--cream-200); border: 1px solid var(--line); border-radius: var(--radius); }
.prose strong { color: var(--ink-900); }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.value-card { padding: 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.value-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.value-card p { color: var(--ink-600); margin: 0; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-card { padding: 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.contact-card h3 { font-size: 1.1rem; margin-bottom: 12px; color: var(--navy-700); }
.contact-card a { color: var(--navy-700); font-weight: 600; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }
.contact-card ul li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.contact-card ul li:last-child { border-bottom: 0; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Testimonials — ported from 21st.dev (kedhareswer/ink-orbit-testimonials):
   hatched background, bracketed frame, snap-scrolling quote cards, pager, marquee.
   -------------------------------------------------------------------------- */
.quotes { background-color: var(--cream-200); background-image: repeating-linear-gradient(135deg, rgba(16, 24, 43, .05) 0 1px, transparent 1px 10px); }
.quotes-muted { color: var(--ink-400); }
.quotes-notice { display: inline-block; margin: 14px 0 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--danger); color: var(--danger); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.quotes-frame { position: relative; }
.quotes-corner { position: absolute; width: 14px; height: 14px; border: 0 solid var(--ink-400); pointer-events: none; }
.quotes-corner.tl { top: -7px; left: -7px; border-top-width: 1.5px; border-left-width: 1.5px; }
.quotes-corner.tr { top: -7px; right: -7px; border-top-width: 1.5px; border-right-width: 1.5px; }
.quotes-corner.bl { bottom: -7px; left: -7px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.quotes-corner.br { bottom: -7px; right: -7px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.quotes-inner { padding: clamp(18px, 3vw, 34px) clamp(8px, 2vw, 26px); border: 1px solid var(--line); background: var(--cream-100); }
.quotes-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--q-gap, 16px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 6px 10px; scroll-behavior: smooth;
}
.quotes-track::-webkit-scrollbar { display: none; }
.quotes-track:focus-visible { outline-offset: -2px; }
@media (min-width: 640px) { .quotes-track { --q-gap: 20px; grid-auto-columns: calc((100% - var(--q-gap)) / 2); } }
@media (min-width: 980px) { .quotes-track { --q-gap: 22px; grid-auto-columns: calc((100% - 2 * var(--q-gap)) / 3); } }
.quote {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 18px; min-height: 250px; margin: 0;
  padding: 22px 20px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .25s ease;
}
.quote:hover { border-color: var(--line-strong); }
.quote-stars { display: flex; gap: 3px; color: var(--gold-500); }
.quote-stars svg.off { color: var(--cream-300); }
.quote blockquote { position: relative; margin: 0; padding: 0 18px; font-size: 1.02rem; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-900); }
.quote-mark { position: absolute; font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--gold-600); }
.quote-mark.open { left: 0; top: -2px; }
.quote-mark.close { right: 0; bottom: -6px; }
.quote-who { display: flex; align-items: center; gap: 11px; margin-top: auto; font-size: .85rem; color: var(--ink-600); line-height: 1.3; }
.quote-who strong { color: var(--ink-900); }
.quote-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--navy-800); color: var(--gold-400); font-family: var(--display); font-weight: 800; font-size: .8rem; }
.quotes-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.quotes-nav[hidden] { display: none; }
.quotes-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--ink-600); cursor: pointer; transition: color .2s, border-color .2s; }
.quotes-btn:hover { color: var(--ink-900); border-color: var(--line); }
.quotes-dots { display: flex; gap: 6px; }
.quotes-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: var(--cream-300); cursor: pointer; transition: width .35s cubic-bezier(.2, .8, .2, 1), background-color .3s; }
.quotes-dot[aria-current] { width: 24px; background: var(--navy-700); }
.partners { overflow: hidden; margin-top: clamp(28px, 4vw, 48px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.partners-row { display: flex; width: max-content; gap: clamp(36px, 5vw, 64px); padding: 6px 0; animation: marquee 34s linear infinite; }
.partners:hover .partners-row { animation-play-state: paused; }
.partner { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink-600); white-space: nowrap; }
.partner-glyph { width: 18px; height: 18px; flex: none; background: var(--gold-500); }
.partner-glyph.g0 { border-radius: 50%; }
.partner-glyph.g1 { border-radius: 3px; transform: rotate(45deg) scale(.85); }
.partner-glyph.g2 { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.partner-glyph.g3 { border-radius: 50%; background: transparent; border: 4px solid var(--gold-500); }

/* --------------------------------------------------------------------------
   FAQ — "slit type" accordion, ported from 21st.dev (kedhareswer/slit-type-faq)
   One ink on one paper: navy on cream. Rows are ruled edge to edge; opening a
   row floods it with ink from the left and inverts the question as the edge
   passes. Native <details>, so it works with no JavaScript.
   -------------------------------------------------------------------------- */
.faq {
  --p: var(--cream-200);
  --k: var(--navy-900);
  --o: var(--cream-100);
  --faq-rule: 1px;
  --faq-ease-flood: cubic-bezier(0.76, 0, 0.24, 1);
  --faq-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --faq-cut: 0.2em; /* how far each capital sits behind the slit at rest; hover lifts it clear */
  background: var(--p); color: var(--k);
  interpolate-size: allow-keywords;
  overflow: hidden;
}
.faq ::selection { background: var(--k); color: var(--o); }

.faq-title {
  font-size: clamp(3rem, 7vw, 6.5rem); font-weight: 800; line-height: 0.86; letter-spacing: -0.04em;
  text-transform: uppercase; cursor: default; word-spacing: 0.08em; text-wrap: initial;
}
.faq-line { display: block; }
/* Each word is its own slit, so a word that wraps on a narrow screen is still clipped correctly. */
.faq-word { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding-top: 0.06em; margin-top: -0.06em; }
.faq-ch {
  display: inline-block; transform: translateY(var(--faq-cut));
  transition: transform 820ms var(--faq-ease-out); transition-delay: min(calc(var(--i) * 26ms), 420ms);
}
.js .faq-title.reveal { opacity: 1; transform: none; transition: none; }
.js .faq-title.reveal:not(.in) .faq-ch { transform: translateY(104%); transition: none; }
@media (hover: hover) and (pointer: fine) {
  .faq-title:hover .faq-ch { transform: translateY(0); transition-duration: 420ms; transition-delay: min(calc(var(--i) * 14ms), 220ms); }
}

.faq-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin: clamp(32px, 4vw, 64px) 0 clamp(20px, 3vw, 36px); }
.faq-intro { max-width: 40ch; font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.faq-intro a { color: var(--k); font-weight: 700; }
.faq-count { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--k); margin: 0; }

/* Each item bleeds to the viewport gutter so the ink can run edge to edge; the rules
   stay inside the content width via pseudo-elements. Once the row flood has landed,
   the whole item turns ink so the answer (set in paper colour) is revealed on it. */
.faq-list { position: relative; }
.faq-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--faq-rule); background: var(--k); }
.faq-item {
  position: relative; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  background: transparent; transition: background-color 160ms ease;
}
.faq-item::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: var(--faq-rule); background: var(--k); }
.faq-item[open] { background: var(--k); transition: background-color 120ms ease 260ms; }
.faq-fill {
  position: absolute; top: calc(var(--faq-rule) * -1); bottom: 0;
  left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1);
  background: var(--k); clip-path: inset(0 100% 0 0); pointer-events: none;
  transition: clip-path 280ms var(--faq-ease-flood);
}
.faq-item[open] .faq-fill { clip-path: inset(0 0 0 0); transition: clip-path 400ms var(--faq-ease-flood); }

.faq-q { position: relative; list-style: none; cursor: pointer; color: var(--k); -webkit-tap-highlight-color: transparent; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:focus-visible { outline: none; }
.faq-q:focus-visible .faq-row:not(.faq-row-inv) { box-shadow: inset 0 0 0 2px var(--k); }
.faq-item[open] .faq-q:focus-visible .faq-row-inv { box-shadow: inset 0 0 0 2px var(--o); }
.faq-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px;
  min-height: 64px; padding: clamp(16px, 1.9vw, 26px) 0;
  font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 2.1rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em;
  text-wrap: balance;
}
.faq-row-inv {
  position: absolute; inset: 0; color: var(--o);
  clip-path: inset(0 100% 0 0); pointer-events: none;
  transition: clip-path 280ms var(--faq-ease-flood);
}
.faq-item[open] .faq-row-inv { clip-path: inset(0 0 0 0); transition: clip-path 400ms var(--faq-ease-flood); }
.faq-label { display: block; transition: transform 240ms var(--faq-ease-out); }
.faq-cell { position: relative; display: grid; place-items: center; width: clamp(44px, 3.9vw, 56px); height: clamp(44px, 3.9vw, 56px); }
.faq-cell::before { content: ""; position: absolute; inset: 0; background: var(--k); clip-path: inset(0 100% 0 0); transition: clip-path 220ms var(--faq-ease-out); }
.faq-row-inv .faq-cell::before { display: none; }
.faq-plus { position: relative; display: block; width: clamp(22px, 2.2vw, 32px); height: clamp(22px, 2.2vw, 32px); transition: transform 280ms var(--faq-ease-out), color 160ms ease; }
.faq-item[open] .faq-plus { transform: rotate(135deg); transition-duration: 400ms; }
@media (hover: hover) and (pointer: fine) {
  .faq-q:hover .faq-label { transform: translateX(0.3em); }
  .faq-item:not([open]) .faq-q:hover .faq-cell::before { clip-path: inset(0 0 0 0); }
  .faq-item:not([open]) .faq-q:hover .faq-plus { color: var(--o); }
}

.faq-item::details-content { height: 0; overflow: clip; transition: height 360ms var(--faq-ease-out), content-visibility 360ms allow-discrete; }
.faq-item[open]::details-content { height: auto; }
.faq-a { position: relative; padding: 0 0 clamp(24px, 2.8vw, 40px); color: var(--o); }
.faq-a p { max-width: 58ch; margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; font-weight: 500; }
@media (min-width: 760px) {
  .faq-a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 48px; }
  .faq-a p { grid-column: 2; }
}

.faq-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: clamp(36px, 5vw, 72px); }
.faq-contact p { margin: 0; font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.faq-cta {
  position: relative; display: inline-flex; min-height: 52px; border: 1.5px solid var(--k); border-radius: 999px; overflow: hidden;
  color: var(--k); text-decoration: none; font-family: var(--display); font-size: 1.05rem; font-weight: 700; white-space: nowrap;
}
.faq-cta > span { display: inline-flex; align-items: center; gap: 12px; padding: 0 26px; }
.faq-cta > span + span { position: absolute; inset: 0; background: var(--k); color: var(--o); clip-path: inset(0 100% 0 0); transition: clip-path 360ms var(--faq-ease-flood); }
.faq-cta svg { width: 18px; height: 18px; transition: transform 360ms var(--faq-ease-out); }
.faq-cta:hover > span + span, .faq-cta:focus-visible > span + span { clip-path: inset(0 0 0 0); }
.faq-cta:hover svg, .faq-cta:focus-visible svg { transform: translateX(4px); }
@media (max-width: 560px) { .faq-meta { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-950); color: rgba(255, 255, 255, .78); padding: 64px 0 28px; border-top: 1px solid var(--line-dark); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.site-footer h4 { color: #fff; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: var(--gold-400); }
.site-footer li { margin-bottom: 10px; }
.footer-brand img { height: 56px; margin-bottom: 14px; }
.footer-brand p { max-width: 36ch; }
.footer-brand strong { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: .85rem; }
.age-badge { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gold-500); color: var(--gold-400); font-family: var(--display); font-weight: 800; font-size: .85rem; flex: none; }
.responsible { display: flex; align-items: center; gap: 12px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Reveal — one authored entrance for the draw tickets and the FAQ headline.
   Only applied when JavaScript is present (the `js` class is set inline in
   App.razor), so a no-JS visitor sees everything rendered by the server.
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .tickets .reveal:nth-child(2) { transition-delay: 80ms; }
.js .tickets .reveal:nth-child(3) { transition-delay: 160ms; }
.js .hero .rise { animation: rise .7s cubic-bezier(.22, 1, .36, 1) both; }
.js .hero .rise:nth-child(2) { animation-delay: .08s; }
.js .hero .rise:nth-child(3) { animation-delay: .16s; }
.js .hero .rise:nth-child(4) { animation-delay: .24s; }
.js .hero .rise:nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Error UI (Blazor)
   -------------------------------------------------------------------------- */
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; width: 100%; padding: .6rem 1.25rem; background: var(--gold-200); color: var(--ink-900); border-top: 1px solid var(--line-strong); z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }