@charset "UTF-8";
/* ==========================================================================
   Pak Rummy Casino — site.css

   Design direction: "Felt & Brass".
   A cream paper catalogue laid over a pine-green rummy table. Every colour is
   sampled from the brand mark: the pine of the diamond, the lemon-gold of the
   PAK lettering, the tangerine of its bevel, the teal-green of the backdrop.

   Signature ornament: the diamond pip (a rotated square) taken from the logo.
   It marks list bullets, section rules, divider nodes and FAQ toggles.

   LAYOUT LAW — one shared content width.
   Header rows, hero, stat strip, every section, every card, every grid, every
   image divider, the FAQ list and all four footer rows share exactly one
   measure: .container = var(--container) wide with 1.5rem side padding.
   Nothing inside a container gets its own narrower max-width. Typographic
   comfort widths were deliberately removed: visual alignment wins.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Brand, sampled from content/images/logo.webp ---------------------- */
  --brand:        #0F7A32;   /* pine green — the logo diamond               */
  --brand-dark:   #0A5222;
  --brand-light:  #23A64B;
  --brand-teal:   #0E5C4A;   /* the teal-green backdrop of the mark         */

  --accent:       #FCDE3B;   /* lemon gold — the PAK lettering              */
  --accent-warm:  #E27C21;   /* tangerine — the bevel under the lettering   */
  --accent-soft:  #FFF4C2;
  --accent-ink:   #7A5406;   /* AA-safe gold for small text on cream        */

  /* --- Surfaces --------------------------------------------------------- */
  --bg:           #FBF7EA;   /* warm cream paper                            */
  --bg-card:      #FFFFFF;
  --bg-elevated:  #FFFDF6;
  --bg-sunk:      #F2ECD9;
  --bg-panel:     #06291E;   /* deep table green — header, footer, panels   */
  --bg-panel-2:   #0B3A2A;

  /* --- Ink -------------------------------------------------------------- */
  --text:         #10231A;
  --text-muted:   #4A5C51;
  --text-dim:     #7A8A80;
  --text-on-dark: #F3F8F0;
  --muted-on-dark: rgba(243, 248, 240, .74);
  --dim-on-dark:   rgba(243, 248, 240, .56);

  /* --- Lines ------------------------------------------------------------ */
  --border:        #E2DCC6;
  --border-strong: #CBC3A6;
  --border-soft:   #EFEADA;
  --line-on-dark:  rgba(243, 248, 240, .16);

  /* --- Type ------------------------------------------------------------- */
  --font-body:    'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Anybody', 'Arial Narrow', system-ui, sans-serif;

  /* --- Radius ----------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --card-radius: 18px;

  /* --- Shadow — warm, two-layer ---------------------------------------- */
  --shadow-soft:       0 1px 2px rgba(16, 35, 26, .05), 0 6px 18px rgba(16, 35, 26, .05);
  --shadow-card:       0 2px 4px rgba(16, 35, 26, .05), 0 14px 34px rgba(16, 35, 26, .08);
  --shadow-card-hover: 0 4px 8px rgba(16, 35, 26, .07), 0 22px 48px rgba(16, 35, 26, .13);
  --shadow-cta:        0 4px 14px rgba(226, 124, 33, .30), 0 12px 30px rgba(16, 35, 26, .16);

  /* --- Layout ----------------------------------------------------------- */
  --container:     1200px;
  --gutter:        1.5rem;
  --header-top-h:  2.25rem;
  --header-main-h: 4.5rem;
  --header-h:      calc(var(--header-top-h) + var(--header-main-h));
  --section-gap:   clamp(3.25rem, 6vw, 5.5rem);
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--text);
  background: var(--bg);
  counter-reset: img-div;                       /* R5b divider numbering */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Off-canvas warmth: a pool of pine at top-left, gold at right. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58rem 40rem at -10% -8%,  rgba(15, 122, 50, .10), transparent 62%),
    radial-gradient(46rem 34rem at 108% 12%,  rgba(252, 222, 59, .16), transparent 60%),
    radial-gradient(50rem 42rem at 50% 118%,  rgba(14, 92, 74, .09),  transparent 64%);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* The UA sheet gives <figure> a 1em 40px margin, which would inset media
   columns out of the shared content width. */
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--brand-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 .6em;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); letter-spacing: -.01em; }
h4 { font-size: 1rem; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.05em; padding-left: 1.25rem; }
li { margin-bottom: .5rem; }
li:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--accent-warm);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -100%;
  z-index: 200; padding: .7rem 1.1rem;
  background: var(--accent); color: #1B1400;
  font-weight: 700; border-radius: var(--r-sm);
}
.skip-link:focus { top: 1rem; }

/* ==========================================================================
   THE shared measure — every bounded element on the page uses this.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Nothing inside a container narrows itself. This block is the enforcement
   point for the single-width law; do not add max-width to these elsewhere. */
.plain-card,
.support-card,
.intro-block,
.feature-check-list--plain,
.faq-list,
.floor-grid,
.floor-grid--rich,
.floor-grid--cols-1,
.split-layout,
.bento-floor,
.security-grid,
.rewards-bento,
.section-head,
.section-intro,
.hero-stats-strip {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
/* .image-divider-inner is NOT in that list: it carries .container itself, so
   clearing its max-width would let the divider run the full window width and
   break the very alignment the list exists to enforce. It is the divider's
   CHILDREN (figure + aside) that must fill it. */
.image-divider-inner > * { max-width: none; }

/* ==========================================================================
   Brand ornament — the diamond pip
   ========================================================================== */

.pip {
  display: inline-block;
  width: .5rem; height: .5rem;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}

/* A short gold rule with a pip at its end. Sits under section headings. */
.rule-pip {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1rem;
}
.rule-pip::before {
  content: "";
  width: 3.25rem; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
  border-radius: 2px;
}
.rule-pip::after {
  content: "";
  width: .45rem; height: .45rem;
  background: var(--brand);
  transform: rotate(45deg);
}

.kicker {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: .95rem 1.7rem;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-warm) 100%);
  color: #241A00;
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover {
  color: #241A00;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(226, 124, 33, .38), 0 18px 40px rgba(16, 35, 26, .20);
}

.btn-secondary {
  background: transparent;
  color: var(--brand-dark);
  border-color: var(--brand);
}
.btn-secondary:hover {
  background: var(--brand);
  color: #fff;
  transform: translateY(-2px);
}

.btn-ghost {
  background: rgba(243, 248, 240, .08);
  color: var(--text-on-dark);
  border-color: var(--line-on-dark);
}
.btn-ghost:hover {
  background: rgba(243, 248, 240, .16);
  color: var(--text-on-dark);
  transform: translateY(-2px);
}

/* ==========================================================================
   Header — sticky, two rows, both pine (the logo is a colour app mark)
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-panel);
  border-bottom: 1px solid rgba(252, 222, 59, .18);
}

.header-top {
  background: #041D15;
  border-bottom: 1px solid rgba(243, 248, 240, .08);
  font-size: .78rem;
}
.header-top .container {
  height: var(--header-top-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.header-trust {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--muted-on-dark);
  letter-spacing: .02em;
  white-space: nowrap;
}
.header-dot {
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(252, 222, 59, .6);
  animation: pulse-dot 2.6s ease-out infinite;
  flex: none;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(252, 222, 59, .55); }
  70%  { box-shadow: 0 0 0 .5rem rgba(252, 222, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(252, 222, 59, 0); }
}

.header-util {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0; padding: 0;
}
.header-util a {
  color: var(--dim-on-dark);
  text-decoration: none;
  white-space: nowrap;
}
.header-util a:hover { color: var(--accent); }

.header-main .container {
  height: var(--header-main-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: height .22s ease;
}
.site-header.is-scrolled .header-main .container { height: 3.9rem; }
.site-header.is-scrolled .header-top { display: none; }

/* R6 — the mark is a square app icon, shown contained, never cropped round. */
.brand-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  border-radius: 12px;
}
.brand-logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
  border-radius: 11px;
  display: block;
}

.primary-nav { margin-left: auto; }
.primary-nav ul {
  position: relative;
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0; padding: 0;
}
/* Scoped to the list: .primary-nav also contains the overlay CTA button,
   which must keep its own pill shape, padding and centring. */
.primary-nav ul a {
  display: block;
  padding: .55rem .8rem;
  font-size: .92rem;
  font-weight: 500;
  color: rgba(243, 248, 240, .85);
  text-decoration: none;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color .18s ease;
}
.primary-nav ul a:hover,
.primary-nav ul a.active { color: var(--accent-soft); }

.nav-indicator {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 3px;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
  opacity: 0;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
  pointer-events: none;
}

.header-cta { flex: none; padding: .72rem 1.35rem; font-size: .88rem; }

.nav-toggle {
  display: none;
  flex: none;
  width: 2.9rem; height: 2.9rem;
  padding: 0;
  background: rgba(243, 248, 240, .08);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-md);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 1.15rem; height: 2px;
  margin: 4px auto;
  background: var(--text-on-dark);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Home hero — asymmetric editorial
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--bg-panel) 0%, #0A3627 55%, #073122 100%);
  color: var(--text-on-dark);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4.5rem, 7vw, 6.5rem);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 88% 18%, rgba(252, 222, 59, .16), transparent 66%),
    radial-gradient(30rem 26rem at 6% 92%, rgba(35, 166, 75, .22), transparent 62%);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .20;
  filter: saturate(.85);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.hero-content .kicker { color: var(--accent); }
.hero h1 {
  color: var(--text-on-dark);
  margin: 1rem 0 1.25rem;
  font-size: clamp(2.3rem, 5.4vw, 3.9rem);
  letter-spacing: -.025em;
}
.hero h1 .highlight {
  position: relative;
  font-style: italic;
  color: var(--accent);
  white-space: nowrap;
}
.hero h1 .highlight::after {
  content: "";
  position: absolute;
  left: -.06em; right: -.06em; bottom: .06em;
  height: .30em;
  background: rgba(252, 222, 59, .22);
  border-radius: 3px;
  z-index: -1;
}

.hero .lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--muted-on-dark);
  margin-bottom: 1.9rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-bottom: 1.9rem;
}
.hero .btn-secondary {
  color: var(--accent-soft);
  border-color: rgba(252, 222, 59, .45);
}
.hero .btn-secondary:hover {
  background: var(--accent);
  color: #241A00;
  border-color: var(--accent);
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
  padding: .65rem 1.1rem .65rem .8rem;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-pill);
  background: rgba(243, 248, 240, .06);
  width: fit-content;
  max-width: 100%;
}
.hero-proof .stack { display: inline-flex; }
.hero-proof .chip {
  width: 1.65rem; height: 1.65rem;
  border-radius: 50%;
  border: 2px solid #0A3627;
  margin-right: -.55rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-warm));
}
.hero-proof .chip:nth-child(2) { background: linear-gradient(135deg, var(--brand-light), var(--brand)); }
.hero-proof .chip:nth-child(3) { background: linear-gradient(135deg, #FFF3C4, var(--accent)); }
.hero-proof .text { font-size: .88rem; color: var(--muted-on-dark); }
.hero-proof .text strong { color: var(--text-on-dark); }

/* --- Hero art: three rotated cards, a chip and pip sparkles -------------- */

.hero-art {
  position: relative;
  min-height: 22rem;
  display: grid;
  place-items: center;
}
.hero-art-card {
  position: absolute;
  width: 8.6rem;
  aspect-ratio: 5 / 7;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #FFFDF6 0%, #F2ECD9 100%);
  border: 1px solid rgba(16, 35, 26, .12);
  box-shadow: 0 18px 40px rgba(3, 20, 13, .45);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 3rem;
  color: var(--brand-dark);
  transition: transform .4s cubic-bezier(.2, .8, .3, 1);
}
.hero-art-card::before,
.hero-art-card::after {
  content: attr(data-corner);
  position: absolute;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.hero-art-card::before { top: .6rem; left: .65rem; }
.hero-art-card::after  { bottom: .6rem; right: .65rem; transform: rotate(180deg); }

.hero-art-card--c1 { transform: translate(-5.4rem, .6rem) rotate(-16deg); }
/* Hearts and diamonds are red; the spade keeps the brand pine. The corner
   pips and the big letter must agree - a red K with a green corner reads as a
   mistake. */
.hero-art-card--c2 { transform: translate(0, -1.4rem) rotate(-1deg); z-index: 2; color: #B3252B; }
.hero-art-card--c3 { transform: translate(5.4rem, .6rem) rotate(15deg); color: #B3252B; }

.hero-art:hover .hero-art-card--c1 { transform: translate(-6.2rem, .2rem) rotate(-21deg); }
.hero-art:hover .hero-art-card--c3 { transform: translate(6.2rem, .2rem) rotate(20deg); }

.hero-art-chip {
  position: absolute;
  right: .5rem; bottom: 1rem;
  z-index: 3;
  width: 7.4rem; height: 7.4rem;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  gap: .1rem;
  background: radial-gradient(circle at 30% 25%, #FFF0A6, var(--accent) 45%, var(--accent-warm) 100%);
  border: 4px dashed rgba(36, 26, 0, .28);
  box-shadow: 0 14px 34px rgba(3, 20, 13, .45);
  color: #241A00;
}
.hero-art-chip .num {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1;
}
.hero-art-chip .lbl {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
}

.hero-art-spark {
  position: absolute;
  color: var(--accent);
  opacity: .7;
  font-size: 1.4rem;
  animation: twinkle 3.4s ease-in-out infinite;
}
.hero-art-spark--a { top: 4%;  left: 8%;  }
.hero-art-spark--b { top: 16%; right: 4%; animation-delay: .9s; font-size: 1rem; }
.hero-art-spark--c { bottom: 6%; left: 16%; animation-delay: 1.8s; font-size: 1.1rem; }
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50%      { opacity: .85; transform: scale(1.1); }
}

/* --- Stat strip: normal flow, pulled up over the hero -------------------- */

.hero-bridge {
  position: relative;
  z-index: 5;
  margin-top: -3.25rem;
}
.hero-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.hero-stat {
  background: var(--bg-card);
  padding: 1.4rem 1.35rem;
  text-align: center;
}
.hero-stat .val {
  display: block;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  color: var(--brand-dark);
}
.hero-stat .lbl {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
}

/* ==========================================================================
   Inner-page hero
   ========================================================================== */

.page-hero {
  position: relative;
  background: linear-gradient(165deg, var(--bg-panel) 0%, #0A3627 100%);
  color: var(--text-on-dark);
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(34rem 24rem at 92% 8%, rgba(252, 222, 59, .14), transparent 66%);
}
.page-hero-inner { position: relative; z-index: 2; }
.page-hero h1 { color: var(--text-on-dark); margin-bottom: .9rem; }
.page-hero-sub {
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  color: var(--muted-on-dark);
  margin-bottom: 1rem;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  margin-bottom: 1.1rem;
  color: var(--dim-on-dark);
}
.breadcrumb a { color: var(--accent-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb span[aria-hidden] { color: rgba(243, 248, 240, .35); }

.page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  font-size: .82rem;
  color: var(--dim-on-dark);
  margin: 0;
}
.page-meta-author { color: var(--muted-on-dark); font-weight: 600; }
.page-meta-author::after {
  content: "";
  display: inline-block;
  width: .34rem; height: .34rem;
  margin-left: .6rem;
  background: var(--accent);
  transform: rotate(45deg);
  vertical-align: .12em;
}

.page-hero-figure {
  margin: 1.8rem 0 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-on-dark);
  box-shadow: 0 22px 50px rgba(3, 20, 13, .40);
}
.page-hero-figure img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }

/* ==========================================================================
   Sections — the builder's output
   ========================================================================== */

.section { padding-block: var(--section-gap); }
.section + .section { padding-top: 0; }

.section-head { margin-bottom: 1.9rem; }
.section-head h2 { margin-bottom: 0; }
.section-head::after {
  content: "";
  display: block;
  width: 3.25rem; height: 3px;
  margin-top: 1rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
}

.section-intro { margin-bottom: 1.7rem; }
.section-intro p { color: var(--text-muted); font-size: 1.08rem; }

/* --- Lede / intro block ------------------------------------------------- */

.section-intro-block { padding-top: var(--section-gap); }
.intro-block {
  position: relative;
  padding-left: 1.6rem;
  border-left: 4px solid var(--accent);
}
.intro-block p {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.75;
  color: var(--text-muted);
}
.intro-block p:first-child { color: var(--text); }

/* --- Universal card look ------------------------------------------------ */

.plain-card,
.support-card,
.tile,
.hero-stat,
.faq-item,
.sec-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
}

.plain-card,
.support-card,
.tile {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .22s ease, box-shadow .22s ease;
}

/* 5px gold→tangerine stripe on the top edge of every card. */
.plain-card::before,
.support-card::before,
.tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-warm) 100%);
}

/* Oversized italic display watermark, bottom-right. */
.plain-card::after,
.support-card::after,
.tile::after {
  content: "◆";
  position: absolute;
  right: -.35em;
  bottom: -.5em;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 900;
  font-size: 6.5rem;
  line-height: 1;
  color: rgba(15, 122, 50, .05);
  pointer-events: none;
  transition: color .25s ease;
}
.plain-card:hover::after,
.support-card:hover::after,
.tile:hover::after { color: rgba(226, 124, 33, .13); }

.plain-card,
.support-card { padding: clamp(1.7rem, 3vw, 2.6rem); }
.plain-card p,
.support-card p { position: relative; z-index: 1; }

.tile { padding: 1.75rem 1.6rem; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.tile h3 { margin-bottom: .65rem; position: relative; z-index: 1; }
.tile p, .tile ul, .tile ol { position: relative; z-index: 1; color: var(--text-muted); font-size: .98rem; }
.tile p:last-child { margin-bottom: 0; }

.tile-index {
  display: block;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--accent-warm);
  margin-bottom: .6rem;
}

/* --- Floor grids (R3) --------------------------------------------------- */

.floor-grid {
  display: grid;
  gap: 1.15rem;
  align-items: stretch;
}
.floor-grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
.floor-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.floor-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.floor-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- R4b rich tiles: sub-cards + bold dividers --------------------------- */

.floor-grid--rich { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }

.tile-rich { padding: clamp(1.8rem, 3vw, 2.4rem); }
.tile-rich h3 { font-size: clamp(1.25rem, 2.1vw, 1.55rem); margin-bottom: .9rem; }
.tile-rich p { font-size: 1.02rem; }

.tile-rich h4 {
  position: relative;
  z-index: 1;
  margin: 1.7rem 0 .9rem;
  padding-top: .9rem;
  border-top: 2px solid var(--brand);
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-dark);
}

/* Each list item in a rich tile becomes its own sub-card. */
.sub-cards {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.sub-cards li {
  position: relative;
  margin: 0;
  padding: 1rem 1.15rem 1rem 1.45rem;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: .98rem;
  color: var(--text-muted);
}
.sub-cards li::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-warm));
}
.sub-cards li strong { color: var(--text); }

/* --- Split layout ------------------------------------------------------- */

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: center;
}
.split-copy > p { color: var(--text-muted); }
.split-figure {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.split-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* --- Check list --------------------------------------------------------- */

.feature-check-list {
  list-style: none;
  margin: 1.2rem 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}
.feature-check-list li {
  position: relative;
  margin: 0;
  padding-left: 2.35rem;
  line-height: 1.65;
}
.feature-check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .28em;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-warm));
}
.feature-check-list li::after {
  content: "";
  position: absolute;
  left: .5rem; top: .58em;
  width: .38rem; height: .72rem;
  border: solid #241A00;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* The no-image variant is a full-width pine panel — the page's dark break. */
.feature-check-list--plain {
  position: relative;
  overflow: hidden;
  padding: clamp(1.8rem, 3.2vw, 2.8rem);
  border-radius: var(--card-radius);
  background: linear-gradient(150deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%);
  color: var(--text-on-dark);
  border-left: 5px solid var(--accent);
  box-shadow: var(--shadow-card);
}
.feature-check-list--plain::after {
  content: "◆";
  position: absolute;
  right: -.3em; bottom: -.55em;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 900;
  font-size: 8rem;
  line-height: 1;
  color: rgba(252, 222, 59, .07);
  pointer-events: none;
}
.feature-check-list--plain > p { position: relative; z-index: 1; color: var(--muted-on-dark); }
.feature-check-list--plain h4 { position: relative; z-index: 1; color: var(--accent); }
.feature-check-list--plain .feature-check-list { position: relative; z-index: 1; }
.feature-check-list--plain .feature-check-list li { color: var(--text-on-dark); }
.feature-check-list--plain .feature-check-list li strong { color: var(--accent-soft); }

/* ==========================================================================
   R5b — image divider: a contained two-column figure, never a full-bleed band
   ========================================================================== */

.image-divider {
  counter-increment: img-div;
  padding-block: clamp(2rem, 4vw, 3rem);
}
.image-divider-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
.image-divider-card {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.image-divider-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.image-divider-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
}
.image-divider-num::before {
  content: counter(img-div, decimal-leading-zero);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: .85;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent-warm);
  display: block;
}
.image-divider-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.25;
  color: var(--text);
  margin: 0;
}

/* ==========================================================================
   Hand-authored homepage sections
   ========================================================================== */

/* --- Bento game floor --------------------------------------------------- */

.bento-floor {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.15rem;
}
.bento-cell {
  position: relative;
  overflow: hidden;
  grid-column: span 2;
  padding: 1.7rem 1.55rem;
  border-radius: var(--card-radius);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  transition: transform .22s ease, box-shadow .22s ease;
}
.bento-cell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
}
.bento-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.bento-cell h3 { margin-bottom: .5rem; }
.bento-cell p { margin: 0; color: var(--text-muted); font-size: .98rem; }

.bento-cell--wide { grid-column: span 3; }
.bento-cell--full { grid-column: 1 / -1; }

/* The lead cell carries the section's image and reads as pine, not paper. */
.bento-cell--feature {
  grid-column: span 3;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 0;
  background: linear-gradient(150deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%);
  color: var(--text-on-dark);
}
.bento-cell--feature figure { margin: 0; }
.bento-cell--feature img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.bento-cell--feature .bento-body { padding: 0 1.55rem 1.7rem; }
.bento-cell--feature h3 { color: var(--text-on-dark); }
.bento-cell--feature p { color: var(--muted-on-dark); }

.bento-tag {
  display: inline-block;
  margin-bottom: .55rem;
  padding: .22rem .6rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bento-cell--feature .bento-tag { background: rgba(252, 222, 59, .16); color: var(--accent); }

/* --- Security grid: four art-deco trust plates --------------------------- */

.security-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
}
.security-plate {
  position: relative;
  padding: 1.9rem 1.4rem 1.6rem;
  text-align: center;
  border-radius: var(--card-radius);
  background: linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-sunk) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
/* Art-deco stepped corner brackets drawn in gold. */
.security-plate::before,
.security-plate::after {
  content: "";
  position: absolute;
  width: 1.3rem; height: 1.3rem;
  border: 2px solid var(--accent-warm);
  opacity: .55;
}
.security-plate::before { top: .7rem; left: .7rem; border-right: 0; border-bottom: 0; }
.security-plate::after  { bottom: .7rem; right: .7rem; border-left: 0; border-top: 0; }

.security-plate .pip-mark {
  display: block;
  width: 1.35rem; height: 1.35rem;
  margin: 0 auto .95rem;
  background: linear-gradient(135deg, var(--brand-light), var(--brand-dark));
  transform: rotate(45deg);
  border-radius: 3px;
}
.security-plate h3 { font-size: 1.02rem; margin-bottom: .45rem; }
.security-plate p { margin: 0; font-size: .92rem; color: var(--text-muted); }

/* --- Rewards bento ------------------------------------------------------ */

.rewards-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}
.reward-card {
  position: relative;
  overflow: hidden;
  padding: 1.75rem 1.6rem;
  border-radius: var(--card-radius);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}
.reward-card h3 { margin-bottom: .5rem; }
.reward-card p { margin: 0; color: var(--text-muted); font-size: .98rem; }

/* Welcome card, top-left, spans two columns and reads gold. */
.reward-card--welcome {
  grid-column: span 2;
  background: linear-gradient(140deg, var(--accent-soft) 0%, #FFE9A0 100%);
  border-color: rgba(226, 124, 33, .3);
}
.reward-card--welcome h3 { color: #3B2A00; }
.reward-card--welcome p { color: #5A4207; }

/* VIP strip spans the full bottom row. */
.reward-card--vip {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  background: linear-gradient(150deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%);
  border-color: rgba(252, 222, 59, .22);
  color: var(--text-on-dark);
}
.reward-card--vip h3 { color: var(--accent); margin: 0; }
.reward-card--vip p { color: var(--muted-on-dark); flex: 1 1 22rem; }

.reward-figure {
  margin: 0;
  grid-column: span 1;
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.reward-figure img { width: 100%; height: 100%; object-fit: cover; }

/* --- Support card: editorial, oversized italic watermark ---------------- */

.support-card { text-align: center; }
.support-card::after { font-size: 9rem; right: -.25em; }
.support-card h2 { margin-bottom: 1rem; }
.support-card p { color: var(--text-muted); }
.support-card .support-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center;
  margin-top: 1.6rem;
}

/* --- Generic two-column prose split used on /about/ ---------------------- */

.about-lead p { font-size: clamp(1.05rem, 1.5vw, 1.18rem); color: var(--text-muted); }
.about-lead p:first-child { color: var(--text); }

.editorial-note {
  position: relative;
  z-index: 1;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--brand);
  font-size: .95rem;
  color: var(--text-muted);
}

.age-note {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.4rem;
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq-section { padding-block: var(--section-gap); }
.faq-list { display: grid; gap: .75rem; }

.faq-item {
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: box-shadow .22s ease, transform .22s ease;
}
.faq-item[open] {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: var(--border-strong);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.45rem;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.03rem;
  line-height: 1.4;
  color: var(--text);
}
.faq-icon {
  position: relative;
  flex: none;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-warm));
  transition: transform .25s ease;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: .72rem; height: 2px;
  background: #241A00;
  transform: translate(-50%, -50%);
  border-radius: 2px;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon { transform: rotate(135deg); }

.faq-answer {
  padding: 0 1.45rem 1.35rem;
  border-top: 1px solid var(--border-soft);
}
.faq-answer p { padding-top: 1.1rem; margin: 0; color: var(--text-muted); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  position: relative;
  margin-top: var(--section-gap);
  padding-top: 5.5rem;
  background: var(--bg-panel);
  color: var(--text-on-dark);
}

/* Overlapping gold CTA card, pulled up out of the footer. */
.footer-cta-wrap { margin-top: calc(-5.5rem - 3.5rem); }
.footer-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: clamp(1.9rem, 3.5vw, 2.8rem);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-warm) 100%);
  box-shadow: 0 18px 44px rgba(16, 35, 26, .22);
  color: #241A00;
}
.footer-cta::after {
  content: "Pak Rummy";
  position: absolute;
  right: -.06em; bottom: -.34em;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(4rem, 11vw, 8.5rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(36, 26, 0, .09);
  white-space: nowrap;
  pointer-events: none;
}
.footer-cta-copy { position: relative; z-index: 1; flex: 1 1 24rem; }
.footer-cta h2 { color: #241A00; margin-bottom: .4rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.footer-cta p { margin: 0; color: #3A2A00; font-weight: 500; }
.footer-cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}
.footer-cta .btn-primary {
  background: var(--bg-panel);
  color: var(--accent);
  box-shadow: 0 6px 18px rgba(6, 41, 30, .3);
}
.footer-cta .btn-primary:hover { background: #041D15; color: var(--accent); }
.footer-cta .btn-secondary { border-color: rgba(36, 26, 0, .4); color: #241A00; }
.footer-cta .btn-secondary:hover { background: #241A00; color: var(--accent); border-color: #241A00; }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: 2.2rem;
  padding-block: 3.5rem 2.5rem;
}
.footer-brand-logo { display: inline-block; margin-bottom: 1rem; }
.footer-brand-logo img { height: 52px; width: auto; object-fit: contain; border-radius: 12px; }
.footer-tagline { color: var(--muted-on-dark); font-size: .95rem; max-width: 34ch; }

.payment-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.1rem;
  list-style: none;
  padding: 0;
}
.payment-pills li {
  margin: 0;
  padding: .34rem .75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-on-dark);
  background: rgba(243, 248, 240, .05);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted-on-dark);
}

.footer-col h3 {
  position: relative;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-on-dark);
  margin-bottom: 1.1rem;
  padding-bottom: .7rem;
}
.footer-col h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 2rem; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-col li { margin: 0; }
.footer-col a {
  color: var(--muted-on-dark);
  text-decoration: none;
  font-size: .93rem;
  transition: color .18s ease, padding-left .18s ease;
}
.footer-col a:hover { color: var(--accent); padding-left: .28rem; }

.trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  list-style: none;
  margin: 0;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line-on-dark);
}
.trust-pills li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-on-dark);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--muted-on-dark);
}
.trust-pills li::before {
  content: "";
  width: .4rem; height: .4rem;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-block: 1.3rem;
  border-top: 1px solid var(--line-on-dark);
  font-size: .82rem;
  color: var(--dim-on-dark);
}
.footer-bottom em { font-style: italic; color: var(--muted-on-dark); }

/* ==========================================================================
   404
   ========================================================================== */

.err-404 {
  text-align: center;
  padding-block: clamp(4rem, 10vw, 8rem);
}
.err-404 .glyph {
  display: block;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(8rem, 22vw, 18rem);
  line-height: .82;
  letter-spacing: -.05em;
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 55%, var(--accent-warm) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.err-404 p { color: var(--text-muted); margin: 1rem auto 2rem; }
.err-404 .err-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
.err-404 .err-links {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  list-style: none; margin: 2.5rem 0 0; padding: 0;
}
.err-404 .err-links a {
  display: inline-block;
  padding: .45rem .95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: .86rem;
  text-decoration: none;
  color: var(--text-muted);
}
.err-404 .err-links a:hover { border-color: var(--brand); color: var(--brand-dark); }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

/* Scoped to html.js: without JavaScript the content must still be visible,
   so the hidden starting state is only applied when the script that reveals
   it is guaranteed to be running. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .3, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Urdu mirror (/pk/) — RTL
   ========================================================================== */

html[dir="rtl"] body { font-family: 'Noto Nastaliq Urdu', var(--font-body); line-height: 2.15; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 {
  font-family: 'Noto Nastaliq Urdu', var(--font-heading);
  line-height: 1.9;
  letter-spacing: 0;
}
html[dir="rtl"] .primary-nav { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .intro-block { padding-left: 0; padding-right: 1.6rem; border-left: 0; border-right: 4px solid var(--accent); }
html[dir="rtl"] .feature-check-list li { padding-left: 0; padding-right: 2.35rem; }
html[dir="rtl"] .feature-check-list li::before { left: auto; right: 0; }
html[dir="rtl"] .feature-check-list li::after { left: auto; right: .5rem; }
html[dir="rtl"] .feature-check-list--plain { border-left: 0; border-right: 5px solid var(--accent); }
html[dir="rtl"] .sub-cards li { padding: 1rem 1.45rem 1rem 1.15rem; }
html[dir="rtl"] .sub-cards li::before { left: auto; right: 0; }
html[dir="rtl"] .footer-col a:hover { padding-left: 0; padding-right: .28rem; }
html[dir="rtl"] .footer-col h3::after { left: auto; right: 0; }
html[dir="rtl"] .tile-index { letter-spacing: 0; }

/* The Urdu mirror keeps English navigation and footer labels. In an RTL
   paragraph, trailing Latin punctuation jumps to the front ("Is It Legit?"
   renders as "?Is It Legit"), so each label resolves its own direction from
   its first strong character - the CSS equivalent of dir="auto". */
html[dir="rtl"] .header-util a,
html[dir="rtl"] .header-trust,
html[dir="rtl"] .primary-nav ul a,
html[dir="rtl"] .footer-col a,
html[dir="rtl"] .footer-tagline,
html[dir="rtl"] .footer-bottom span,
html[dir="rtl"] .footer-bottom em,
html[dir="rtl"] .payment-pills li,
html[dir="rtl"] .trust-pills li,
html[dir="rtl"] .footer-cta-copy,
html[dir="rtl"] .breadcrumb { unicode-bidi: plaintext; }

/* ==========================================================================
   Responsive — 1100 / 900 / 700 / 560 / 480
   ========================================================================== */

@media (max-width: 1100px) {
  :root { --container: 100%; }
  .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .primary-nav a { padding: .5rem .55rem; font-size: .86rem; }
  .footer-grid { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
  .floor-grid--cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; margin-left: auto; }
  .header-cta { display: none; }
  .nav-indicator { display: none; }

  /* Full-screen glass overlay nav. */
  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    margin: 0;
    background: rgba(4, 29, 21, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 1.5rem var(--gutter) 3rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    visibility: hidden;
  }
  .site-header.is-scrolled .primary-nav { inset: 3.9rem 0 0; }
  .primary-nav.is-open { transform: none; visibility: visible; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: .15rem; }
  .primary-nav ul a {
    padding: .95rem .4rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line-on-dark);
    border-radius: 0;
  }
  .primary-nav .nav-cta-mobile { margin-top: 1.5rem; }
  .primary-nav .nav-cta-mobile .btn-primary { width: 100%; }

  body.nav-open { overflow: hidden; }

  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-art { min-height: 19rem; margin-top: 1rem; }
  .hero-stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split-layout { grid-template-columns: minmax(0, 1fr); }
  .split-figure img { aspect-ratio: 16 / 10; }
  .image-divider-inner { grid-template-columns: minmax(0, 1fr); }
  .image-divider-aside { flex-direction: row; align-items: center; gap: 1rem; }
  .image-divider-num::before { font-size: 2.6rem; }

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

  .bento-floor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-cell,
  .bento-cell--wide { grid-column: span 1; }
  .bento-cell--feature { grid-column: 1 / -1; grid-row: auto; }
  .bento-cell--full { grid-column: 1 / -1; }

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

  .rewards-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-card--welcome { grid-column: 1 / -1; }
  .reward-figure { grid-column: 1 / -1; max-height: 18rem; }

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

@media (max-width: 700px) {
  body { font-size: 1rem; }
  :root { --gutter: 1.15rem; }
  .header-util { display: none; }
  .header-top .container { justify-content: center; }
  .page-hero-figure img { aspect-ratio: 16 / 10; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
  .footer-cta-actions { width: 100%; }
  .footer-cta-actions .btn-primary,
  .footer-cta-actions .btn-secondary { flex: 1 1 12rem; }
}

@media (max-width: 560px) {
  .floor-grid--cols-2,
  .floor-grid--cols-3,
  .floor-grid--cols-4 { grid-template-columns: minmax(0, 1fr); }
  .security-grid { grid-template-columns: minmax(0, 1fr); }
  .bento-floor { grid-template-columns: minmax(0, 1fr); }
  .rewards-bento { grid-template-columns: minmax(0, 1fr); }
  .reward-card--welcome { grid-column: auto; }
  .hero-stats-strip { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { flex: 1 1 100%; }
}

@media (max-width: 480px) {
  .hero-art { min-height: 16rem; }
  .hero-art-card { width: 6.6rem; font-size: 2.2rem; }
  .hero-art-card--c1 { transform: translate(-4.1rem, .5rem) rotate(-16deg); }
  .hero-art-card--c3 { transform: translate(4.1rem, .5rem) rotate(15deg); }
  .hero-art-chip { width: 5.9rem; height: 5.9rem; right: 0; bottom: .5rem; }
  .hero-art-chip .num { font-size: 1.25rem; }
  .plain-card::after,
  .support-card::after,
  .tile::after { font-size: 5rem; }
  .brand-logo img { height: 38px; }
}

/* ==========================================================================
   Motion + print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .hero-art, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .plain-card, .tile, .faq-item { box-shadow: none; border: 1px solid #ccc; }
}

/* Mobile-only CTA that lives inside the overlay nav. */
.nav-cta-mobile { display: none; }
@media (max-width: 900px) { .nav-cta-mobile { display: block; } }

/* If a section's image is missing the split must not keep a dead second
   column — collapse it so the copy uses the full shared width. */
.split-layout:not(:has(.split-figure)) { grid-template-columns: minmax(0, 1fr); }
.rewards-bento:not(:has(.reward-figure)) .reward-card--welcome { grid-column: 1 / -1; }