/* =============================================================================
   BDG PLAY  —  Full Site Stylesheet (hand-written, no Tailwind)
   File    : style.css
   Author  : BDG Play
   Version : 1.0.0

   TABLE OF CONTENTS
   ─────────────────
    1.  Design Tokens          (CSS custom properties — single source of truth)
    2.  Reset & Base           (normalize + global element defaults)
    3.  Typography             (scale, weights, font-face assignments)
    4.  Layout Utilities       (container, flex/grid helpers, spacing)
    5.  Display Utilities      (visibility, overflow, position)
    6.  Colour Utilities       (text, background, border colour classes)
    7.  Spacing Utilities      (margin, padding — only what the HTML uses)
    8.  Border & Radius        (border widths, radii)
    9.  Shadow                 (box-shadow scale)
   10.  Transitions & Animation
   11.  Components
         11a. Header
         11b. Ticker / Marquee
         11c. Hero
         11d. Section eyebrows & headings
         11e. About — spec table
         11f. Games list
         11g. Registration steps
         11h. Bonus cards
         11i. Payment methods
         11j. APK download
         11k. Why-BDG cards
         11l. Trust checklist
         11m. FAQ Accordion
         11n. Footer
   12.  Grain texture overlay
   13.  Hover & Focus states
   14.  Responsive (md ≥ 768 px, sm ≥ 640 px, lg ≥ 1024 px)
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   1.  DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────────── */

:root {

  /* ── Palette ── */
  --color-primary          : oklch(83% .17 88);       /* warm gold / amber      */
  --color-primary-fg       : oklch(16% .02 250);      /* near-black on primary  */
  --color-accent           : oklch(72% .16 75);       /* slightly deeper gold   */
  --color-accent-fg        : oklch(16% .02 250);

  --color-background       : oklch(97.5% .012 85);    /* warm off-white         */
  --color-foreground       : oklch(18% .03 250);      /* near-black body text   */
  --color-ink              : oklch(16% .025 250);     /* deepest near-black     */
  --color-ink-soft         : oklch(32% .03 250);      /* secondary body text    */
  --color-cream            : oklch(96.5% .018 75);    /* warm cream surface     */
  --color-muted            : oklch(93% .015 85);      /* subtle background fill */
  --color-muted-fg         : oklch(45% .025 250);     /* de-emphasised text     */
  --color-card             : oklch(100% 0 0);         /* pure white card        */
  --color-destructive      : oklch(55% .23 28);       /* error / warning red    */

  --color-border           : oklch(18% .03 250 / .12);/* subtle divider line    */
  --color-border-strong    : oklch(18% .03 250 / .25);/* stronger divider       */
  --color-input            : oklch(18% .03 250 / .12);

  --color-white            : #ffffff;
  --color-black            : #000000;

  /* ── Typography ── */
  --font-sans    : "Inter",     system-ui, sans-serif;
  --font-display : "Fraunces",  "Times New Roman", serif;
  --font-mono    : "JetBrains Mono", ui-monospace, monospace;

  --text-xs   : 0.75rem;    /* 12 px */
  --text-sm   : 0.875rem;   /* 14 px */
  --text-base : 1rem;       /* 16 px */
  --text-lg   : 1.125rem;   /* 18 px */
  --text-xl   : 1.25rem;    /* 20 px */
  --text-2xl  : 1.5rem;     /* 24 px */
  --text-3xl  : 1.875rem;   /* 30 px */
  --text-4xl  : 2.25rem;    /* 36 px */
  --text-5xl  : 3rem;       /* 48 px */
  --text-6xl  : 3.75rem;    /* 60 px */
  --text-7xl  : 4.5rem;     /* 72 px */

  --lh-none    : 1;
  --lh-tight   : 1.25;
  --lh-snug    : 1.375;
  --lh-base    : 1.5;
  --lh-relaxed : 1.625;

  --fw-normal   : 400;
  --fw-medium   : 500;
  --fw-semibold : 600;
  --fw-bold     : 700;

  --tracking-tight   : -0.025em;
  --tracking-tighter : -0.05em;
  --tracking-wider   : 0.05em;
  --tracking-widest  : 0.1em;
  --tracking-200     : 0.2em;
  --tracking-250     : 0.25em;

  /* ── Spacing ── */
  --sp : 0.25rem;   /* 1 spacing unit = 4 px */

  /* ── Border radius ── */
  --radius-sm  : 0.25rem;   /*  4 px */
  --radius-md  : 0.375rem;  /*  6 px */
  --radius-lg  : 0.5rem;    /*  8 px */
  --radius-xl  : 0.75rem;   /* 12 px */
  --radius-2xl : 1rem;      /* 16 px */
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs : 0 1px 2px 0 oklch(0% 0 0 / .05);
  --shadow-sm : 0 1px 3px 0 oklch(0% 0 0 / .10), 0 1px 2px -1px oklch(0% 0 0 / .10);
  --shadow-md : 0 4px 6px -1px oklch(0% 0 0 / .10), 0 2px 4px -2px oklch(0% 0 0 / .10);
  --shadow-lg : 0 10px 15px -3px oklch(0% 0 0 / .10), 0 4px 6px -4px oklch(0% 0 0 / .10);
  --shadow-xl : 0 20px 25px -5px oklch(0% 0 0 / .10), 0 8px 10px -6px oklch(0% 0 0 / .10);

  /* ── Transitions ── */
  --ease      : cubic-bezier(.4, 0, .2, 1);
  --dur-fast  : 0.15s;
  --dur-base  : 0.25s;
  --dur-slow  : 0.35s;

  /* ── Layout ── */
  --max-width : 80rem;   /* 1280 px — max-w-7xl */
  --header-h  : 64px;    /* used for scroll offset in JS */

  /* ── Component-specific ── */
  --ticker-duration   : 40s;
  --faq-max-height    : 600px;
  --blur-2xl          : 40px;
  --blur-3xl          : 64px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2.  RESET & BASE
   ───────────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing : border-box;
  margin     : 0;
  padding    : 0;
  border     : 0 solid var(--color-border);
}

html {
  -webkit-text-size-adjust : 100%;
  tab-size                 : 4;
  line-height              : var(--lh-base);
  font-family              : var(--font-sans);
  -webkit-font-smoothing   : antialiased;
  -moz-osx-font-smoothing  : grayscale;
  scroll-behavior          : auto; /* JS handles smooth scrolling with offset */
}

body {
  background-color : var(--color-background);
  color            : var(--color-foreground);
  font-family      : var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  min-height       : 100svh;
}

img,
svg,
video {
  display   : block;
  max-width : 100%;
  height    : auto;
}

h1, h2, h3, h4, h5, h6 {
  font-size   : inherit;
  font-weight : inherit;
}

a {
  color           : inherit;
  text-decoration : none;
}

ol, ul {
  list-style : none;
}

button {
  cursor     : pointer;
  background : transparent;
  font       : inherit;
  color      : inherit;
}

table {
  border-collapse : collapse;
  text-indent     : 0;
}

[hidden] {
  display: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3.  TYPOGRAPHY  —  utility classes
   ───────────────────────────────────────────────────────────────────────────── */

/* Font families */
.font-sans    { font-family: var(--font-sans); }
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }

/* Font sizes */
.text-xs   { font-size: var(--text-xs);   line-height: var(--lh-base); }
.text-sm   { font-size: var(--text-sm);   line-height: var(--lh-base); }
.text-base { font-size: var(--text-base); line-height: var(--lh-base); }
.text-lg   { font-size: var(--text-lg);   line-height: var(--lh-snug); }
.text-xl   { font-size: var(--text-xl);   line-height: var(--lh-snug); }
.text-2xl  { font-size: var(--text-2xl);  line-height: var(--lh-snug); }
.text-3xl  { font-size: var(--text-3xl);  line-height: var(--lh-tight); }
.text-4xl  { font-size: var(--text-4xl);  line-height: var(--lh-tight); }
.text-5xl  { font-size: var(--text-5xl);  line-height: var(--lh-none); }
.text-6xl  { font-size: var(--text-6xl);  line-height: var(--lh-none); }
.text-7xl  { font-size: var(--text-7xl);  line-height: var(--lh-none); }

/* Custom sizes used in the HTML */
.text-\[10px\]  { font-size: 10px; }
.text-\[11px\]  { font-size: 11px; }
.text-\[0\.8rem\] { font-size: 0.8rem; }
.text-\[2\.75rem\] { font-size: 2.75rem; line-height: 0.95; }
.text-\[clamp\(2\.5rem\,12vw\,9rem\)\] { font-size: clamp(2.5rem, 12vw, 9rem); }
.\[6rem\] { font-size: 6rem; }

/* Font weights */
.font-normal   { font-weight: var(--fw-normal); }
.font-medium   { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold     { font-weight: var(--fw-bold); }

/* Line heights */
.leading-none    { line-height: var(--lh-none); }
.leading-tight   { line-height: var(--lh-tight); }
.leading-snug    { line-height: var(--lh-snug); }
.leading-relaxed { line-height: var(--lh-relaxed); }
.leading-\[0\.95\]  { line-height: 0.95; }
.leading-\[1\.05\]  { line-height: 1.05; }
.leading-\[1\.1\]   { line-height: 1.1; }

/* Letter spacing */
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-widest  { letter-spacing: var(--tracking-widest); }
.tracking-\[0\.2em\]  { letter-spacing: 0.2em; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }

/* Transforms */
.uppercase  { text-transform: uppercase; }
.italic     { font-style: italic; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Text decoration */
.underline             { text-decoration-line: underline; }
.underline-offset-4    { text-underline-offset: 4px; }
.underline-offset-\[10px\] { text-underline-offset: 10px; }
.decoration-\[6px\]   { text-decoration-thickness: 6px; }

/* Overflow */
.truncate {
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
}
.whitespace-nowrap { white-space: nowrap; }
.break-words       { overflow-wrap: break-word; }

/* Heading defaults — display family for h1-h3 */
h1, h2, h3 {
  font-family     : var(--font-display);
  letter-spacing  : -0.035em;
  font-weight     : var(--fw-semibold);
}


/* ─────────────────────────────────────────────────────────────────────────────
   4.  LAYOUT UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */

/* Container */
.container,
.mx-auto {
  margin-inline: auto;
}

.max-w-7xl  { max-width: var(--max-width); }
.max-w-5xl  { max-width: 64rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-lg   { max-width: 32rem; }
.max-w-md   { max-width: 28rem; }
.max-w-sm   { max-width: 24rem; }
.max-w-max  { max-width: max-content; }
.w-full     { width: 100%; }
.w-max      { width: max-content; }
.w-fit      { width: fit-content; }
.w-auto     { width: auto; }

/* Height */
.h-full  { height: 100%; }
.h-auto  { height: auto; }
.h-px    { height: 1px; }
.h-svh   { height: 100svh; }
.min-h-screen { min-height: 100vh; }
.min-h-svh    { min-height: 100svh; }

/* Sizes — common icon / avatar sizes used in this site */
.h-3    { height: calc(var(--sp) * 3); }
.h-3\.5 { height: calc(var(--sp) * 3.5); }
.h-4    { height: calc(var(--sp) * 4); }
.h-5    { height: calc(var(--sp) * 5); }
.h-7    { height: calc(var(--sp) * 7); }
.h-8    { height: calc(var(--sp) * 8); }
.h-9    { height: calc(var(--sp) * 9); }
.h-10   { height: calc(var(--sp) * 10); }
.h-11   { height: calc(var(--sp) * 11); }
.h-12   { height: calc(var(--sp) * 12); }
.h-16   { height: calc(var(--sp) * 16); }
.h-40   { height: calc(var(--sp) * 40); }
.h-1\.5 { height: calc(var(--sp) * 1.5); }
.h-2    { height: calc(var(--sp) * 2); }
.h-2\.5 { height: calc(var(--sp) * 2.5); }
.h-\[1px\]    { height: 1px; }
.h-\[26rem\]  { height: 26rem; }

.w-1    { width: calc(var(--sp) * 1); }
.w-1\.5 { width: calc(var(--sp) * 1.5); }
.w-2    { width: calc(var(--sp) * 2); }
.w-2\.5 { width: calc(var(--sp) * 2.5); }
.w-3    { width: calc(var(--sp) * 3); }
.w-3\.5 { width: calc(var(--sp) * 3.5); }
.w-4    { width: calc(var(--sp) * 4); }
.w-5    { width: calc(var(--sp) * 5); }
.w-7    { width: calc(var(--sp) * 7); }
.w-8    { width: calc(var(--sp) * 8); }
.w-9    { width: calc(var(--sp) * 9); }
.w-10   { width: calc(var(--sp) * 10); }
.w-11   { width: calc(var(--sp) * 11); }
.w-16   { width: calc(var(--sp) * 16); }
.w-40   { width: calc(var(--sp) * 40); }
.w-64   { width: calc(var(--sp) * 64); }
.w-\[1px\]   { width: 1px; }
.w-\[26rem\] { width: 26rem; }
.w-\[100px\] { width: 100px; }
.w-3\/4 { width: 75%; }

/* size shorthand */
.size-4 { width: calc(var(--sp) * 4); height: calc(var(--sp) * 4); }

/* Flex */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.flex-col     { flex-direction: column; }
.flex-row     { flex-direction: row; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1 1 0%; }
.shrink-0     { flex-shrink: 0; }
.grow         { flex-grow: 1; }
.grow-0       { flex-grow: 0; }
.basis-full   { flex-basis: 100%; }

/* Alignment */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.place-items-center  { place-items: center; }
.place-content-center { place-content: center; }

/* Grid */
.grid        { display: grid; }
.inline-grid { display: inline-grid; }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Gap */
.gap-1   { gap: calc(var(--sp) * 1); }
.gap-1\.5 { gap: calc(var(--sp) * 1.5); }
.gap-2   { gap: calc(var(--sp) * 2); }
.gap-3   { gap: calc(var(--sp) * 3); }
.gap-4   { gap: calc(var(--sp) * 4); }
.gap-5   { gap: calc(var(--sp) * 5); }
.gap-6   { gap: calc(var(--sp) * 6); }
.gap-7   { gap: calc(var(--sp) * 7); }
.gap-8   { gap: calc(var(--sp) * 8); }
.gap-10  { gap: calc(var(--sp) * 10); }
.gap-12  { gap: calc(var(--sp) * 12); }
.gap-px  { gap: 1px; }
.gap-x-6 { column-gap: calc(var(--sp) * 6); }
.gap-y-3 { row-gap: calc(var(--sp) * 3); }

/* Space-between children */
.space-y-1   > * + * { margin-top: calc(var(--sp) * 1); }
.space-y-1\.5 > * + * { margin-top: calc(var(--sp) * 1.5); }
.space-y-2   > * + * { margin-top: calc(var(--sp) * 2); }
.space-y-2\.5 > * + * { margin-top: calc(var(--sp) * 2.5); }
.space-y-4   > * + * { margin-top: calc(var(--sp) * 4); }
.space-y-5   > * + * { margin-top: calc(var(--sp) * 5); }
.space-x-1   > * + * { margin-left: calc(var(--sp) * 1); }
.space-x-2   > * + * { margin-left: calc(var(--sp) * 2); }

/* Dividers */
.divide-y > * + * {
  border-top-width: 1px;
  border-top-style: solid;
  border-color: var(--color-border);
}
.divide-border { border-color: var(--color-border); }


/* ─────────────────────────────────────────────────────────────────────────────
   5.  DISPLAY UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */

.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none !important; }
.table        { display: table; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.static   { position: static; }

.inset-0    { inset: 0; }
.inset-x-0  { inset-inline: 0; }
.inset-y-0  { inset-block: 0; }
.top-0      { top: 0; }
.right-0    { right: 0; }
.bottom-0   { bottom: 0; }
.left-0     { left: 0; }
.top-full   { top: 100%; }
.top-1\/2   { top: 50%; }
.left-1\/2  { left: 50%; }
.-top-10    { top: calc(var(--sp) * -10); }
.-right-10  { right: calc(var(--sp) * -10); }
.-bottom-40 { bottom: calc(var(--sp) * -40); }
.-right-20  { right: calc(var(--sp) * -20); }

.z-10  { z-index: 10; }
.z-20  { z-index: 20; }
.z-50  { z-index: 50; }
.z-\[1\] { z-index: 1; }

.overflow-hidden   { overflow: hidden; }
.overflow-auto     { overflow: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto   { overflow-y: auto; }

.invisible  { visibility: hidden; }
.sr-only {
  position   : absolute;
  width      : 1px;
  height     : 1px;
  padding    : 0;
  margin     : -1px;
  overflow   : hidden;
  clip-path  : inset(50%);
  white-space: nowrap;
  border     : 0;
}

.pointer-events-none { pointer-events: none; }
.select-none         { user-select: none; -webkit-user-select: none; }
.cursor-pointer      { cursor: pointer; }
.cursor-default      { cursor: default; }
.touch-none          { touch-action: none; }
.list-none           { list-style-type: none; }
.caption-bottom      { caption-side: bottom; }

.aspect-square { aspect-ratio: 1; }
.aspect-video  { aspect-ratio: 16 / 9; }

.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* Transforms */
.translate-x-\[-50\%\]  { transform: translateX(-50%); }
.translate-y-\[-50\%\]  { transform: translateY(-50%); }
.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.rotate-45  { transform: rotate(45deg); }
.rotate-90  { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

/* Opacity */
.opacity-0     { opacity: 0; }
.opacity-30    { opacity: 0.3; }
.opacity-50    { opacity: 0.5; }
.opacity-60    { opacity: 0.6; }
.opacity-70    { opacity: 0.7; }
.opacity-\[0\.06\] { opacity: 0.06; }

/* Filters */
.blur-2xl { filter: blur(var(--blur-2xl)); }
.blur-3xl { filter: blur(var(--blur-3xl)); }
.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Fill */
.fill-current { fill: currentColor; }
.fill-primary { fill: var(--color-primary); }


/* ─────────────────────────────────────────────────────────────────────────────
   6.  COLOUR UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */

/* Text colours */
.text-foreground        { color: var(--color-foreground); }
.text-ink               { color: var(--color-ink); }
.text-ink-soft          { color: var(--color-ink-soft); }
.text-primary           { color: var(--color-primary); }
.text-primary-foreground { color: var(--color-primary-fg); }
.text-muted-foreground  { color: var(--color-muted-fg); }
.text-background        { color: var(--color-background); }
.text-current           { color: currentColor; }
.text-destructive       { color: var(--color-destructive); }
.text-accent-foreground { color: var(--color-accent-fg); }
.text-card-foreground   { color: var(--color-foreground); }
.text-secondary-foreground { color: var(--color-foreground); }

/* Semi-transparent text variants */
.text-background\/10  { color: oklch(from var(--color-background) l c h / .10); }
.text-background\/40  { color: oklch(from var(--color-background) l c h / .40); }
.text-background\/60  { color: oklch(from var(--color-background) l c h / .60); }
.text-background\/75  { color: oklch(from var(--color-background) l c h / .75); }
.text-background\/80  { color: oklch(from var(--color-background) l c h / .80); }
.text-background\/90  { color: oklch(from var(--color-background) l c h / .90); }
.text-foreground\/30  { color: oklch(from var(--color-foreground) l c h / .30); }
.text-foreground\/40  { color: oklch(from var(--color-foreground) l c h / .40); }

/* Background colours */
.bg-background   { background-color: var(--color-background); }
.bg-foreground   { background-color: var(--color-foreground); }
.bg-ink          { background-color: var(--color-ink); }
.bg-cream        { background-color: var(--color-cream); }
.bg-card         { background-color: var(--color-card); }
.bg-primary      { background-color: var(--color-primary); }
.bg-muted        { background-color: var(--color-muted); }
.bg-accent       { background-color: var(--color-accent); }
.bg-border       { background-color: var(--color-border); }
.bg-white        { background-color: var(--color-white); }
.bg-transparent  { background-color: transparent; }
.bg-secondary    { background-color: var(--color-muted); }
.bg-destructive  { background-color: var(--color-destructive); }

/* Semi-transparent background variants */
.bg-background\/85  { background-color: color-mix(in oklch, var(--color-background) 85%, transparent); }
.bg-primary\/10     { background-color: color-mix(in oklch, var(--color-primary) 10%, transparent); }
.bg-primary\/15     { background-color: color-mix(in oklch, var(--color-primary) 15%, transparent); }
.bg-primary\/20     { background-color: color-mix(in oklch, var(--color-primary) 20%, transparent); }
.bg-muted\/50       { background-color: color-mix(in oklch, var(--color-muted) 50%, transparent); }
.bg-foreground\/30  { background-color: color-mix(in oklch, var(--color-foreground) 30%, transparent); }
.bg-foreground\/40  { background-color: color-mix(in oklch, var(--color-foreground) 40%, transparent); }
.bg-black\/80       { background-color: color-mix(in oklch, black 80%, transparent); }

/* Border colours */
.border-border       { border-color: var(--color-border); }
.border-primary      { border-color: var(--color-primary); }
.border-transparent  { border-color: transparent; }
.border-input        { border-color: var(--color-input); }
.border-destructive\/50 { border-color: color-mix(in oklch, var(--color-destructive) 50%, transparent); }
.border-background\/10  { border-color: color-mix(in oklch, var(--color-background) 10%, transparent); }
.border-background\/15  { border-color: color-mix(in oklch, var(--color-background) 15%, transparent); }
.border-primary\/30     { border-color: color-mix(in oklch, var(--color-primary) 30%, transparent); }
.border-primary\/50     { border-color: color-mix(in oklch, var(--color-primary) 50%, transparent); }

/* Text decoration colour */
.decoration-primary\/50 { text-decoration-color: color-mix(in oklch, var(--color-primary) 50%, transparent); }


/* ─────────────────────────────────────────────────────────────────────────────
   7.  SPACING UTILITIES  (margin / padding)
   ───────────────────────────────────────────────────────────────────────────── */

/* Padding — all sides */
.p-0 { padding: 0; }
.p-1 { padding: calc(var(--sp) * 1); }
.p-2 { padding: calc(var(--sp) * 2); }
.p-3 { padding: calc(var(--sp) * 3); }
.p-4 { padding: calc(var(--sp) * 4); }
.p-5 { padding: calc(var(--sp) * 5); }
.p-6 { padding: calc(var(--sp) * 6); }
.p-7 { padding: calc(var(--sp) * 7); }
.p-\[1px\] { padding: 1px; }

/* Padding inline (x) */
.px-1   { padding-inline: calc(var(--sp) * 1); }
.px-1\.5 { padding-inline: calc(var(--sp) * 1.5); }
.px-2   { padding-inline: calc(var(--sp) * 2); }
.px-2\.5 { padding-inline: calc(var(--sp) * 2.5); }
.px-3   { padding-inline: calc(var(--sp) * 3); }
.px-4   { padding-inline: calc(var(--sp) * 4); }
.px-5   { padding-inline: calc(var(--sp) * 5); }
.px-6   { padding-inline: calc(var(--sp) * 6); }
.px-7   { padding-inline: calc(var(--sp) * 7); }
.px-8   { padding-inline: calc(var(--sp) * 8); }

/* Padding block (y) */
.py-0\.5 { padding-block: calc(var(--sp) * .5); }
.py-1    { padding-block: calc(var(--sp) * 1); }
.py-1\.5 { padding-block: calc(var(--sp) * 1.5); }
.py-2    { padding-block: calc(var(--sp) * 2); }
.py-2\.5 { padding-block: calc(var(--sp) * 2.5); }
.py-3    { padding-block: calc(var(--sp) * 3); }
.py-3\.5 { padding-block: calc(var(--sp) * 3.5); }
.py-4    { padding-block: calc(var(--sp) * 4); }
.py-5    { padding-block: calc(var(--sp) * 5); }
.py-6    { padding-block: calc(var(--sp) * 6); }
.py-7    { padding-block: calc(var(--sp) * 7); }
.py-20   { padding-block: calc(var(--sp) * 20); }
.py-24   { padding-block: calc(var(--sp) * 24); }

/* Padding directional */
.pt-0  { padding-top: 0; }
.pt-0\.5 { padding-top: calc(var(--sp) * .5); }
.pt-3  { padding-top: calc(var(--sp) * 3); }
.pt-4  { padding-top: calc(var(--sp) * 4); }
.pt-6  { padding-top: calc(var(--sp) * 6); }
.pt-14 { padding-top: calc(var(--sp) * 14); }
.pt-16 { padding-top: calc(var(--sp) * 16); }
.pr-1  { padding-right: calc(var(--sp) * 1); }
.pr-2  { padding-right: calc(var(--sp) * 2); }
.pr-2\.5 { padding-right: calc(var(--sp) * 2.5); }
.pr-8  { padding-right: calc(var(--sp) * 8); }
.pb-2  { padding-bottom: calc(var(--sp) * 2); }
.pb-3  { padding-bottom: calc(var(--sp) * 3); }
.pb-4  { padding-bottom: calc(var(--sp) * 4); }
.pb-6  { padding-bottom: calc(var(--sp) * 6); }
.pb-10 { padding-bottom: calc(var(--sp) * 10); }
.pb-16 { padding-bottom: calc(var(--sp) * 16); }
.pl-2  { padding-left: calc(var(--sp) * 2); }
.pl-2\.5 { padding-left: calc(var(--sp) * 2.5); }
.pl-4  { padding-left: calc(var(--sp) * 4); }
.pl-8  { padding-left: calc(var(--sp) * 8); }
.pl-10 { padding-left: calc(var(--sp) * 10); }

/* Margin */
.mx-auto  { margin-inline: auto; }
.mx-2     { margin-inline: calc(var(--sp) * 2); }
.mx-3\.5  { margin-inline: calc(var(--sp) * 3.5); }
.-mx-1    { margin-inline: calc(var(--sp) * -1); }
.my-0\.5  { margin-block: calc(var(--sp) * .5); }
.my-1     { margin-block: calc(var(--sp) * 1); }
.mt-0\.5  { margin-top: calc(var(--sp) * .5); }
.mt-1     { margin-top: calc(var(--sp) * 1); }
.mt-1\.5  { margin-top: calc(var(--sp) * 1.5); }
.mt-2     { margin-top: calc(var(--sp) * 2); }
.mt-3     { margin-top: calc(var(--sp) * 3); }
.mt-4     { margin-top: calc(var(--sp) * 4); }
.mt-5     { margin-top: calc(var(--sp) * 5); }
.mt-6     { margin-top: calc(var(--sp) * 6); }
.mt-7     { margin-top: calc(var(--sp) * 7); }
.mt-8     { margin-top: calc(var(--sp) * 8); }
.mt-10    { margin-top: calc(var(--sp) * 10); }
.mt-12    { margin-top: calc(var(--sp) * 12); }
.mt-14    { margin-top: calc(var(--sp) * 14); }
.mt-16    { margin-top: calc(var(--sp) * 16); }
.mt-24    { margin-top: calc(var(--sp) * 24); }
.mt-auto  { margin-top: auto; }
.-mt-4    { margin-top: calc(var(--sp) * -4); }
.mr-2     { margin-right: calc(var(--sp) * 2); }
.mb-1     { margin-bottom: calc(var(--sp) * 1); }
.ml-1     { margin-left: calc(var(--sp) * 1); }
.ml-auto  { margin-left: auto; }
.-ml-4    { margin-left: calc(var(--sp) * -4); }

/* First / last child overrides */
.first\:pt-0:first-child  { padding-top: 0; }
.last\:pb-0:last-child    { padding-bottom: 0; }
.last\:border-0:last-child { border-width: 0; }


/* ─────────────────────────────────────────────────────────────────────────────
   8.  BORDER & RADIUS
   ───────────────────────────────────────────────────────────────────────────── */

/* Border widths */
.border     { border-width: 1px; border-style: solid; }
.border-2   { border-width: 2px; border-style: solid; }
.border-t   { border-top-width: 1px; border-top-style: solid; }
.border-r   { border-right-width: 1px; border-right-style: solid; }
.border-b   { border-bottom-width: 1px; border-bottom-style: solid; }
.border-l   { border-left-width: 1px; border-left-style: solid; }
.border-y   { border-block-width: 1px; border-block-style: solid; }
.border-dashed { border-style: dashed; }

/* Radius */
.rounded-none { border-radius: 0; }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-\[2px\]     { border-radius: 2px; }
.rounded-\[inherit\] { border-radius: inherit; }
.rounded-t-\[10px\]  { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.rounded-l-md { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.rounded-r-md { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

/* Ring (focus outline simulation) */
.ring-1 {
  box-shadow: 0 0 0 1px currentColor;
}
.ring-ink\/15 {
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-ink) 15%, transparent);
}
.outline-none { outline: none; }


/* ─────────────────────────────────────────────────────────────────────────────
   9.  SHADOW
   ───────────────────────────────────────────────────────────────────────────── */

.shadow     { box-shadow: var(--shadow-sm); }
.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow-md  { box-shadow: var(--shadow-md); }
.shadow-lg  { box-shadow: var(--shadow-lg); }
.shadow-xl  { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }


/* ─────────────────────────────────────────────────────────────────────────────
   10.  TRANSITIONS & ANIMATION
   ───────────────────────────────────────────────────────────────────────────── */

.transition {
  transition-property       : color, background-color, border-color, opacity, box-shadow, transform, filter;
  transition-timing-function: var(--ease);
  transition-duration       : var(--dur-fast);
}
.transition-colors {
  transition-property       : color, background-color, border-color;
  transition-timing-function: var(--ease);
  transition-duration       : var(--dur-fast);
}
.transition-transform {
  transition-property       : transform;
  transition-timing-function: var(--ease);
  transition-duration       : var(--dur-fast);
}
.transition-opacity {
  transition-property       : opacity;
  transition-timing-function: var(--ease);
  transition-duration       : var(--dur-fast);
}
.transition-all {
  transition-property       : all;
  transition-timing-function: var(--ease);
  transition-duration       : var(--dur-fast);
}
.duration-200 { transition-duration: .2s; }
.duration-300 { transition-duration: .3s; }
.duration-1000 { transition-duration: 1s; }
.ease-in-out  { transition-timing-function: var(--ease); }

/* Keyframes */
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pulse {
  50% { opacity: 0.5; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Animation utilities */
.animate-pulse { animation: pulse 2s var(--ease) infinite; }

.ticker-track {
  animation: ticker-scroll var(--ticker-duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .transition,
  .transition-colors,
  .transition-transform,
  .transition-all { transition: none !important; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   11.  COMPONENTS
   ───────────────────────────────────────────────────────────────────────────── */


/* ── 11a.  HEADER ──────────────────────────────────────────────────────────── */

header.sticky {
  top        : 0;
  z-index    : 50;
  border-bottom  : 1px solid var(--color-border);
  background-color: color-mix(in oklch, var(--color-background) 85%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition : box-shadow var(--dur-fast) var(--ease);
}

/* script.js adds .shadow-sm on scroll */
header.sticky.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.site-header-inner {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  gap             : calc(var(--sp) * 6);
  max-width       : var(--max-width);
  margin-inline   : auto;
  padding-inline  : calc(var(--sp) * 5);
  padding-block   : calc(var(--sp) * 3);
}

/* Logo badge */
.logo-badge {
  display         : inline-grid;
  place-items     : center;
  overflow        : hidden;
  border-radius   : var(--radius-xl);
  background-color: var(--color-primary);
  box-shadow      : 0 0 0 1px color-mix(in oklch, var(--color-ink) 15%, transparent), var(--shadow-sm);
  flex-shrink     : 0;
}


/* ── 11b.  TICKER / MARQUEE ────────────────────────────────────────────────── */
/*
   .ticker-track is defined in section 10 (animation).
   The wrapper clips the overflow; the track is twice the content width.
*/
.ticker-wrapper {
  overflow         : hidden;
  border-top       : 1px solid var(--color-border);
  border-bottom    : 1px solid var(--color-border);
  background-color : var(--color-ink);
  color            : var(--color-background);
  padding-block    : calc(var(--sp) * 4);
}


/* ── 11c.  HERO ────────────────────────────────────────────────────────────── */

.hero-section {
  position : relative;
  overflow : hidden;
}

.hero-inner {
  max-width     : var(--max-width);
  margin-inline : auto;
  padding-inline: calc(var(--sp) * 5);
  padding-top   : calc(var(--sp) * 14);
  padding-bottom: calc(var(--sp) * 16);
}

/* ── 11d.  SECTION EYEBROWS & SHARED SECTION LAYOUT ────────────────────────── */

.section-inner {
  max-width      : var(--max-width);
  margin-inline  : auto;
  padding-inline : calc(var(--sp) * 5);
  padding-block  : calc(var(--sp) * 24);
}

.section-bg-cream   { background-color: var(--color-cream); }
.section-bg-default { background-color: var(--color-background); }

.section-eyebrow {
  display     : flex;
  align-items : center;
  gap         : calc(var(--sp) * 3);
  font-size   : 11px;
  font-weight : var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color       : var(--color-muted-fg);
}

.section-badge {
  display      : inline-flex;
  align-items  : center;
  height       : calc(var(--sp) * 5);
  padding-inline: calc(var(--sp) * 2);
  border-radius: var(--radius-full);
  background-color: color-mix(in oklch, var(--color-primary) 20%, transparent);
  color        : var(--color-foreground);
  font-size    : 11px;
  font-weight  : var(--fw-semibold);
}

.section-rule {
  display         : inline-block;
  height          : 1px;
  width           : calc(var(--sp) * 8);
  background-color: color-mix(in oklch, var(--color-foreground) 30%, transparent);
}


/* ── 11e.  ABOUT — SPEC TABLE ──────────────────────────────────────────────── */

.spec-table {
  display               : grid;
  grid-template-columns : repeat(2, minmax(0, 1fr));
  gap-x                 : calc(var(--sp) * 6);
  gap-y                 : calc(var(--sp) * 3);
  border-top            : 1px solid var(--color-border);
  padding-top           : calc(var(--sp) * 6);
  margin-top            : calc(var(--sp) * 6);
  font-size             : var(--text-sm);
}

.spec-row {
  display         : flex;
  justify-content : space-between;
  border-bottom   : 1px solid var(--color-border);
  padding-bottom  : calc(var(--sp) * 2);
}

.spec-row dt { color: var(--color-muted-fg); }
.spec-row dd { font-weight: var(--fw-semibold); text-align: right; }


/* ── 11f.  GAMES LIST ──────────────────────────────────────────────────────── */

.games-list {
  margin-top    : calc(var(--sp) * 14);
  border-top    : 1px solid var(--color-border);
  border-bottom : 1px solid var(--color-border);
}

.game-item {
  display     : grid;
  gap         : calc(var(--sp) * 4);
  padding-block: calc(var(--sp) * 7);
  border-bottom: 1px solid var(--color-border);
  transition  : background-color var(--dur-fast) var(--ease);
}

.game-item:last-child { border-bottom: none; }

.game-thumbnail {
  display          : block;
  height           : calc(var(--sp) * 16);
  width            : calc(var(--sp) * 16);
  flex-shrink      : 0;
  overflow         : hidden;
  border-radius    : var(--radius-xl);
  border           : 1px solid var(--color-border);
  background-color : var(--color-ink);
  transition       : border-color var(--dur-fast) var(--ease);
}

.game-item:hover .game-thumbnail {
  border-color: var(--color-primary);
}

.game-arrow {
  display    : none;
  color      : var(--color-muted-fg);
  transition : transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.game-item:hover .game-arrow {
  transform : rotate(45deg);
  color     : var(--color-primary);
}


/* ── 11g.  REGISTRATION STEPS GRID ────────────────────────────────────────── */

.steps-grid {
  display          : grid;
  gap              : 1px;
  overflow         : hidden;
  border-radius    : var(--radius-2xl);
  border           : 1px solid var(--color-border);
  background-color : var(--color-border);
}

.step-item {
  display          : flex;
  align-items      : center;
  gap              : calc(var(--sp) * 5);
  background-color : var(--color-card);
  padding          : calc(var(--sp) * 5);
  transition       : background-color var(--dur-fast) var(--ease);
}

.step-item:hover { background-color: var(--color-cream); }

.step-number {
  display          : grid;
  place-items      : center;
  height           : calc(var(--sp) * 11);
  width            : calc(var(--sp) * 11);
  flex-shrink      : 0;
  border-radius    : var(--radius-full);
  border           : 1px solid var(--color-border);
  background-color : var(--color-background);
  font-family      : var(--font-display);
  font-weight      : var(--fw-semibold);
  font-size        : var(--text-sm);
  color            : var(--color-foreground);
  transition       : background-color var(--dur-fast) var(--ease),
                     border-color var(--dur-fast) var(--ease),
                     color var(--dur-fast) var(--ease);
}

.step-item:hover .step-number {
  background-color : var(--color-primary);
  border-color     : var(--color-primary);
  color            : var(--color-primary-fg);
}


/* ── 11h.  BONUS CARDS GRID ───────────────────────────────────────────────── */

.cards-grid {
  display          : grid;
  gap              : 1px;
  overflow         : hidden;
  border-radius    : var(--radius-2xl);
  border           : 1px solid var(--color-border);
  background-color : var(--color-border);
  margin-top       : calc(var(--sp) * 14);
}

.card-item {
  display          : flex;
  flex-direction   : column;
  gap              : calc(var(--sp) * 3);
  background-color : var(--color-card);
  padding          : calc(var(--sp) * 7);
  transition       : background-color var(--dur-fast) var(--ease);
}

.card-item:hover { background-color: var(--color-background); }

.card-icon {
  display          : grid;
  place-items      : center;
  height           : calc(var(--sp) * 10);
  width            : calc(var(--sp) * 10);
  border-radius    : var(--radius-xl);
  background-color : color-mix(in oklch, var(--color-primary) 15%, transparent);
  color            : var(--color-foreground);
  transition       : background-color var(--dur-fast) var(--ease),
                     color var(--dur-fast) var(--ease);
}

.card-item:hover .card-icon {
  background-color : var(--color-primary);
  color            : var(--color-primary-fg);
}

.card-dot {
  display          : inline-block;
  height           : calc(var(--sp) * 1.5);
  width            : calc(var(--sp) * 1.5);
  border-radius    : var(--radius-full);
  background-color : var(--color-primary);
}


/* ── 11i.  PAYMENT METHODS ─────────────────────────────────────────────────── */

.payment-card {
  border-radius    : var(--radius-2xl);
  border           : 1px solid var(--color-border);
  background-color : var(--color-card);
  padding          : calc(var(--sp) * 7);
}

.payment-method-item {
  display          : flex;
  align-items      : center;
  gap              : calc(var(--sp) * 3);
  border-radius    : var(--radius-xl);
  border           : 1px solid var(--color-border);
  background-color : var(--color-background);
  padding          : calc(var(--sp) * 3);
  transition       : border-color var(--dur-fast) var(--ease);
}

.payment-method-item:hover { border-color: var(--color-primary); }

.payment-logo {
  display          : grid;
  place-items      : center;
  height           : calc(var(--sp) * 11);
  width            : calc(var(--sp) * 11);
  flex-shrink      : 0;
  overflow         : hidden;
  border-radius    : var(--radius-lg);
  border           : 1px solid var(--color-border);
  background-color : var(--color-white);
}


/* ── 11j.  APK DOWNLOAD ────────────────────────────────────────────────────── */

.apk-install-card {
  border-radius    : var(--radius-2xl);
  border           : 1px solid var(--color-border);
  background-color : var(--color-card);
  padding          : calc(var(--sp) * 7);
}

.apk-step {
  display      : flex;
  gap          : calc(var(--sp) * 4);
  border-bottom: 1px solid var(--color-border);
  padding-block: calc(var(--sp) * 4);
}

.apk-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.apk-step-num {
  flex-shrink  : 0;
  font-family  : var(--font-display);
  font-weight  : var(--fw-semibold);
  font-size    : var(--text-sm);
  color        : var(--color-primary);
  padding-top  : calc(var(--sp) * .5);
}

.feature-list { display: grid; gap: calc(var(--sp) * 3); }

.feature-item {
  display     : flex;
  align-items : flex-start;
  gap         : calc(var(--sp) * 2);
  font-size   : var(--text-sm);
}


/* ── 11k.  WHY-BDG CARDS ───────────────────────────────────────────────────── */

.why-card {
  position         : relative;
  display          : flex;
  flex-direction   : column;
  gap              : calc(var(--sp) * 3);
  background-color : var(--color-card);
  padding          : calc(var(--sp) * 7);
  transition       : background-color var(--dur-fast) var(--ease);
}

.why-card:hover { background-color: var(--color-cream); }

.why-card-icon {
  display          : grid;
  place-items      : center;
  height           : calc(var(--sp) * 11);
  width            : calc(var(--sp) * 11);
  border-radius    : var(--radius-full);
  background-color : color-mix(in oklch, var(--color-primary) 15%, transparent);
  color            : var(--color-foreground);
  transition       : background-color var(--dur-fast) var(--ease),
                     color var(--dur-fast) var(--ease);
}

.why-card:hover .why-card-icon {
  background-color: var(--color-primary);
  color           : var(--color-primary-fg);
}


/* ── 11l.  TRUST CHECKLIST ─────────────────────────────────────────────────── */

.trust-item {
  display          : flex;
  align-items      : flex-start;
  gap              : calc(var(--sp) * 3);
  border-radius    : var(--radius-xl);
  border           : 1px solid var(--color-border);
  background-color : var(--color-card);
  padding          : calc(var(--sp) * 4);
  font-size        : var(--text-sm);
}


/* ── 11m.  FAQ ACCORDION ───────────────────────────────────────────────────── */

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-trigger {
  display         : flex;
  width           : 100%;
  align-items     : center;
  justify-content : space-between;
  gap             : calc(var(--sp) * 6);
  padding-block   : calc(var(--sp) * 5);
  text-align      : left;
  transition      : color var(--dur-fast) var(--ease);
}

.faq-trigger:hover { color: var(--color-primary); }

.faq-chevron {
  flex-shrink : 0;
  transition  : transform var(--dur-base) var(--ease);
}

/* When open, script.js adds .rotate-180 */
.faq-chevron.rotate-180 { transform: rotate(180deg); }

/* Answer — open state */
.faq-answer {
  overflow   : hidden;
  max-height : var(--faq-max-height);
  opacity    : 1;
  visibility : visible;
  transition :
    max-height var(--dur-slow) var(--ease),
    opacity    var(--dur-base) var(--ease),
    padding    var(--dur-base) var(--ease),
    visibility var(--dur-base) var(--ease);
}

/* Answer — closed state (toggled by script.js adding class="hidden") */
/*
   We use display:block !important to override the [hidden] rule at the top
   of this file, so the collapse transition can animate before disappearing.
   visibility:hidden then removes it from the accessibility tree once fully closed.
*/
.faq-answer.hidden {
  display        : block !important;
  max-height     : 0;
  opacity        : 0;
  visibility     : hidden;
  padding-top    : 0;
  padding-bottom : 0;
}


/* ── 11n.  FOOTER ──────────────────────────────────────────────────────────── */

.site-footer {
  position         : relative;
  overflow         : hidden;
  background-color : var(--color-ink);
  color            : var(--color-background);
}

.footer-inner {
  position      : relative;
  max-width     : var(--max-width);
  margin-inline : auto;
  padding-inline: calc(var(--sp) * 5);
  padding-top   : calc(var(--sp) * 16);
  padding-bottom: calc(var(--sp) * 10);
}

/* Decorative grid pattern on footer background */
.footer-pattern {
  position         : absolute;
  inset            : 0;
  pointer-events   : none;
  opacity          : 0.06;
  background-image :
    linear-gradient(60deg, var(--color-primary) 1px, transparent 1px),
    linear-gradient(-60deg, var(--color-primary) 1px, transparent 1px);
  background-size  : 38px 66px;
}

/* Decorative glow blob */
.footer-glow {
  position         : absolute;
  bottom           : calc(var(--sp) * -40);
  right            : calc(var(--sp) * -20);
  height           : 26rem;
  width            : 26rem;
  border-radius    : var(--radius-full);
  opacity          : 0.30;
  filter           : blur(var(--blur-3xl));
  background       : radial-gradient(closest-side, var(--color-primary), transparent 70%);
  pointer-events   : none;
}

/* Footer bottom bar */
.footer-bottom {
  display         : flex;
  flex-direction  : column;
  align-items     : flex-start;
  justify-content : space-between;
  gap             : calc(var(--sp) * 3);
  border-top      : 1px solid color-mix(in oklch, var(--color-background) 10%, transparent);
  padding-top     : calc(var(--sp) * 6);
  margin-top      : calc(var(--sp) * 10);
  font-size       : 11px;
  font-weight     : var(--fw-semibold);
  text-transform  : uppercase;
  letter-spacing  : var(--tracking-widest);
  color           : color-mix(in oklch, var(--color-background) 60%, transparent);
}

/* Footer wordmark row */
.footer-wordmark {
  position       : relative;
  margin-top     : calc(var(--sp) * 16);
  user-select    : none;
}

.footer-wordmark-rule {
  position : absolute;
  inset    : 0;
  display  : flex;
  align-items: center;
  justify-content: center;
}

.footer-wordmark-rule-line {
  height           : 1px;
  width            : 100%;
  background-image : linear-gradient(to right, transparent, color-mix(in oklch, var(--color-primary) 30%, transparent), transparent);
}

/* Trust badge pills in footer */
.trust-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : calc(var(--sp) * 2);
  border-radius: var(--radius-full);
  padding-inline: calc(var(--sp) * 3);
  padding-block : calc(var(--sp) * 1.5);
  font-size    : 10px;
  font-weight  : var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.trust-badge-primary {
  border           : 1px solid color-mix(in oklch, var(--color-primary) 30%, transparent);
  background-color : color-mix(in oklch, var(--color-primary) 10%, transparent);
  color            : var(--color-primary);
}

.trust-badge-outline {
  border : 1px solid color-mix(in oklch, var(--color-background) 15%, transparent);
  color  : color-mix(in oklch, var(--color-background) 80%, transparent);
}


/* ─────────────────────────────────────────────────────────────────────────────
   12.  GRAIN TEXTURE OVERLAY
   The .grain wrapper adds a subtle noise texture via a pseudo-element.
   Applied to the root .min-h-screen wrapper in the HTML.
   ───────────────────────────────────────────────────────────────────────────── */

.grain {
  position: relative;
}

.grain::before {
  content          : "";
  pointer-events   : none;
  opacity          : 0.4;
  mix-blend-mode   : multiply;
  background-image : radial-gradient(oklch(18% .03 250 / .08) 1px, transparent 1px);
  background-size  : 3px 3px;
  position         : absolute;
  inset            : 0;
  z-index          : 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   13.  HOVER & FOCUS STATES
   ───────────────────────────────────────────────────────────────────────────── */

/* CTA buttons */
.btn-ink {
  display          : inline-flex;
  align-items      : center;
  gap              : calc(var(--sp) * 2);
  border-radius    : var(--radius-full);
  background-color : var(--color-ink);
  padding-inline   : calc(var(--sp) * 6);
  padding-block    : calc(var(--sp) * 3.5);
  font-size        : var(--text-sm);
  font-weight      : var(--fw-semibold);
  color            : var(--color-background);
  transition       : transform var(--dur-fast) var(--ease),
                     background-color var(--dur-fast) var(--ease);
}

.btn-ink:hover { transform: translateY(calc(var(--sp) * -.5)); }

.btn-primary {
  display          : inline-flex;
  align-items      : center;
  gap              : calc(var(--sp) * 2);
  border-radius    : var(--radius-full);
  background-color : var(--color-primary);
  padding-inline   : calc(var(--sp) * 6);
  padding-block    : calc(var(--sp) * 3.5);
  font-size        : var(--text-sm);
  font-weight      : var(--fw-semibold);
  color            : var(--color-primary-fg);
  transition       : transform var(--dur-fast) var(--ease);
}

.btn-primary:hover { transform: translateY(calc(var(--sp) * -.5)); }

/* Group hover — icon rotation (arrow icons inside CTA buttons) */
.group:hover .group-hover\:rotate-45 { transform: rotate(45deg); }

/* Hover text colour shortcuts */
.hover\:text-primary:hover  { color: var(--color-primary); }
.hover\:underline:hover     { text-decoration-line: underline; }

/* Hover backgrounds */
.hover\:bg-accent:hover  { background-color: var(--color-accent); }
.hover\:bg-cream:hover   { background-color: var(--color-cream); }
.hover\:bg-primary:hover { background-color: var(--color-primary); }
.hover\:bg-muted:hover   { background-color: var(--color-muted); }
.hover\:bg-background:hover { background-color: var(--color-background); }

.hover\:border-primary:hover { border-color: var(--color-primary); }

/* Focus visible — keyboard navigation */
*:focus-visible {
  outline        : 2px solid var(--color-primary);
  outline-offset : 2px;
}

/* Disabled states */
:disabled,
[aria-disabled="true"] {
  pointer-events : none;
  opacity        : 0.5;
  cursor         : not-allowed;
}

/* Nav link hover */
nav a:hover { color: var(--color-primary); }

/* Footer nav link hover */
.site-footer a:hover { color: var(--color-primary); }

/* Gradient utilities used in hero / footer */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent));
}


/* ─────────────────────────────────────────────────────────────────────────────
   14.  RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

/* ── sm ≥ 640 px ─────────────────────────────────────────────────────────── */
@media (width >= 640px) {

  .sm\:inline-block { display: inline-block; }
  .sm\:flex         { display: flex; }
  .sm\:flex-row     { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:justify-end  { justify-content: flex-end; }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:text-left    { text-align: left; }
  .sm\:mt-0         { margin-top: 0; }
  .sm\:gap-2\.5     { gap: calc(var(--sp) * 2.5); }
  .sm\:text-5xl     { font-size: var(--text-5xl); line-height: var(--lh-none); }
  .sm\:rounded-lg   { border-radius: var(--radius-lg); }

  .hero-inner { padding-top: calc(var(--sp) * 14); }

  .footer-bottom {
    flex-direction : row;
    align-items    : center;
  }
}

/* ── md ≥ 768 px ─────────────────────────────────────────────────────────── */
@media (width >= 768px) {

  .md\:block   { display: block; }
  .md\:flex    { display: flex; }
  .md\:hidden  { display: none; }
  .md\:flex-row { flex-direction: row; }
  .md\:absolute { position: absolute; }
  .md\:items-center { align-items: center; }
  .md\:w-auto  { width: auto; }
  .md\:opacity-0 { opacity: 0; }
  .md\:text-sm { font-size: var(--text-sm); }
  .md\:text-lg { font-size: var(--text-lg); }
  .md\:text-xl { font-size: var(--text-xl); }
  .md\:text-4xl { font-size: var(--text-4xl); line-height: var(--lh-tight); }
  .md\:text-5xl { font-size: var(--text-5xl); line-height: var(--lh-none); }
  .md\:text-6xl { font-size: var(--text-6xl); line-height: var(--lh-none); }
  .md\:text-\[6rem\] { font-size: 6rem; }
  .md\:pt-24  { padding-top: calc(var(--sp) * 24); }
  .md\:gap-8  { gap: calc(var(--sp) * 8); }
  .md\:justify-self-end { justify-self: flex-end; }

  /* 12-column grid */
  .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  /* Column spans */
  .md\:col-span-1  { grid-column: span 1  / span 1; }
  .md\:col-span-2  { grid-column: span 2  / span 2; }
  .md\:col-span-3  { grid-column: span 3  / span 3; }
  .md\:col-span-4  { grid-column: span 4  / span 4; }
  .md\:col-span-5  { grid-column: span 5  / span 5; }
  .md\:col-span-7  { grid-column: span 7  / span 7; }
  .md\:col-span-8  { grid-column: span 8  / span 8; }

  /* Game list — desktop grid layout */
  .game-item {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items           : center;
    gap                   : calc(var(--sp) * 8);
  }

  .game-item .game-number { grid-column: span 1; }
  .game-item .game-info   { grid-column: span 3; }
  .game-item .game-desc   { grid-column: span 7; }
  .game-item .game-arrow  {
    display        : block;
    grid-column    : span 1;
    justify-self   : flex-end;
  }

  /* Steps grid — 2 columns */
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Hero */
  .hero-inner { padding-top: calc(var(--sp) * 24); }
}

/* ── lg ≥ 1024 px ────────────────────────────────────────────────────────── */
@media (width >= 1024px) {

  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Bonus & Why cards — 3-up */
  .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}