/* N555 - site.css
   Direction: "Raspberry Lacquer". One dark theme, raspberry dominant, sodium-gold accent.
   Ornament: the five-pip die face (.pip / .dice), a nod to the three fives in the name.
   Width law: .container is the only max-width on the page. Nothing inside it is narrower. */

:root {
  --brand: #E01F93;
  --brand-dark: #B00E6E;
  --brand-light: #FF6FBF;
  --accent: #FFC94D;
  --accent-warm: #FF9F2E;
  --accent-soft: rgba(255, 201, 77, .13);

  --bg: #080C1C;
  --bg-card: #10162C;
  --bg-elevated: #182040;
  --bg-panel: #0C1124;
  --ink: #1B1030;

  --text: #EEF0FA;
  --text-muted: #A9B0CC;
  --text-dim: #7F87AA;
  --text-on-dark: #FFFFFF;

  --border: rgba(160, 175, 255, .14);
  --border-strong: rgba(160, 175, 255, .28);
  --border-soft: rgba(160, 175, 255, .08);

  --font-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --font-heading: 'Anybody', 'Arial Narrow', system-ui, sans-serif;

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

  --shadow-soft: 0 6px 18px rgba(3, 5, 16, .35);
  --shadow-card: 0 2px 6px rgba(3, 5, 16, .4), 0 18px 40px rgba(3, 5, 16, .45);
  --shadow-card-hover: 0 4px 10px rgba(3, 5, 16, .45), 0 26px 56px rgba(224, 31, 147, .22);
  --shadow-cta: 0 10px 26px rgba(224, 31, 147, .38);

  --grad-brand: linear-gradient(135deg, #E01F93 0%, #B00E6E 100%);
  --grad-gold: linear-gradient(135deg, #FFD978 0%, #FFC94D 45%, #FF9F2E 100%);
  --grad-stripe: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);

  --container: 1200px;
  --container-wide: 1320px;
  --gutter: 1.5rem;

  --header-top-h: 2.25rem;
  --header-main-h: 4.5rem;
  --header-h: calc(var(--header-top-h) + var(--header-main-h));

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ── base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 108% -6%, rgba(224, 31, 147, .16), transparent 62%),
    radial-gradient(760px 480px at -12% 34%, rgba(255, 201, 77, .07), transparent 60%),
    var(--bg);
  background-attachment: scroll;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-light); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
p { margin: 0 0 1.05rem; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; line-height: 1.14; margin: 0; color: var(--text-on-dark); letter-spacing: -.01em; }
strong { color: var(--text-on-dark); font-weight: 700; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

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

.skip-link {
  position: absolute; top: 0; inset-inline-start: 1rem; z-index: 300;
  transform: translateY(-130%);
  background: var(--accent); color: var(--ink); font-weight: 700;
  padding: .6rem 1rem; border-radius: 0 0 var(--r-sm) var(--r-sm); text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* ── ornament: five-pip die ───────────────────────────── */
.pip, .dice i {
  display: inline-block; flex: none;
  width: 1.05rem; height: 1.05rem; border-radius: 4px;
  background:
    radial-gradient(circle at 26% 26%, var(--ink) 0 11%, transparent 13%),
    radial-gradient(circle at 74% 26%, var(--ink) 0 11%, transparent 13%),
    radial-gradient(circle at 50% 50%, var(--ink) 0 11%, transparent 13%),
    radial-gradient(circle at 26% 74%, var(--ink) 0 11%, transparent 13%),
    radial-gradient(circle at 74% 74%, var(--ink) 0 11%, transparent 13%),
    var(--grad-gold);
}
.dice { display: inline-flex; gap: .5rem; }
.dice i { width: 2.5rem; height: 2.5rem; border-radius: 9px; box-shadow: var(--shadow-soft); }
.dice i:nth-child(2) { transform: translateY(-.35rem) rotate(8deg); }
.dice i:nth-child(3) { transform: rotate(-6deg); }

.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 .9rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}

/* ── buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.6rem;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--font-body); font-size: .98rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, border-color .25s;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-cta); }
.btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(224, 31, 147, .5); }
.btn--gold { background: var(--grad-gold); color: var(--ink); box-shadow: 0 10px 26px rgba(255, 159, 46, .28); }
.btn--gold:hover { color: var(--ink); transform: translateY(-2px); }
.btn--ghost { background: rgba(16, 22, 44, .72); color: var(--text-on-dark); border-color: var(--border-strong); }
.btn--ghost:hover { color: var(--text-on-dark); border-color: var(--accent); transform: translateY(-2px); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { color: #fff; transform: translateY(-2px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; position: relative; z-index: 2; }

/* ── header: sticky, two dark rows ────────────────────── */
.site-header { position: sticky; top: 0; z-index: 120; background: #05081A; transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.topbar { height: var(--header-top-h); background: #03051080; border-bottom: 1px solid var(--border-soft); font-size: .78rem; color: var(--text-muted); }
.topbar .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar__trust { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; }
.pulse-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255, 201, 77, .6); }
.topbar__links { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.topbar__links a { color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.topbar__links a:hover, .topbar__links a.active { color: var(--accent); }

.mainbar { height: var(--header-main-h); border-bottom: 1px solid var(--border); }
.mainbar .container { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand img { height: 42px; width: auto; object-fit: contain; }
.primary-nav { position: relative; margin-inline-start: auto; }
.primary-nav ul { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.primary-nav a {
  display: block; padding: .55rem .78rem;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: .93rem; white-space: nowrap;
  transition: color .2s;
}
.primary-nav a:hover, .primary-nav a.active { color: var(--accent); }
.nav-indicator {
  position: absolute; bottom: -.15rem; left: 0; height: 3px; width: 0; border-radius: 3px;
  background: var(--grad-stripe); opacity: 0;
  transition: transform .35s var(--ease), width .35s var(--ease), opacity .2s;
}
.header-cta { flex: none; min-height: 2.6rem; padding: .5rem 1.25rem; font-size: .92rem; }
.burger { display: none; flex: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: transparent; cursor: pointer; position: relative; z-index: 140; }
.burger span { position: absolute; left: 50%; width: 1.25rem; height: 2px; margin-left: -.625rem; background: var(--text-on-dark); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: calc(50% - 6px); }
.burger span:nth-child(2) { top: calc(50% - 1px); }
.burger span:nth-child(3) { top: calc(50% + 4px); }
.nav-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.nav-extra { display: none; }

/* ── home hero: centre-spine flank ────────────────────── */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 4.25rem 0 6.5rem; }
.hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 12, 28, .94) 0%, rgba(8, 12, 28, .74) 36%, rgba(8, 12, 28, .46) 56%, rgba(8, 12, 28, .66) 100%),
    linear-gradient(180deg, rgba(8, 12, 28, .35) 0%, transparent 40%, var(--bg) 100%);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.32fr) 9.25rem minmax(0, 1fr); gap: 2.75rem; min-height: 27rem; }
.hero__lead { align-self: start; }
.hero__close { align-self: end; padding-bottom: .5rem; }
.hero h1 { font-size: clamp(2rem, 3.5vw, 3.1rem); line-height: 1.12; }
.hero__sub { font-size: 1.1rem; color: var(--text); }
.highlight {
  font-style: italic; color: var(--brand-light); line-height: 1.1;
  padding: 0 .14em .08em; margin: 0 -.06em;
  background: linear-gradient(transparent 64%, rgba(224, 31, 147, .38) 64%, rgba(224, 31, 147, .38) 92%, transparent 92%);
}

.spine {
  position: relative; container-type: size; overflow: hidden;
  border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(224, 31, 147, .3) 0%, rgba(16, 22, 44, .72) 42%, rgba(255, 201, 77, .2) 100%);
  box-shadow: inset 0 0 46px rgba(224, 31, 147, .28), var(--shadow-card);
}
.spine::before, .spine::after { content: ""; position: absolute; left: 0; right: 0; height: 22%; z-index: 2; pointer-events: none; }
.spine::before { top: 0; background: linear-gradient(180deg, rgba(8, 12, 28, .9), transparent); }
.spine::after { bottom: 0; background: linear-gradient(0deg, rgba(8, 12, 28, .9), transparent); }
.coin {
  position: absolute; left: 50%; width: 5rem; height: 5rem; margin-left: -2.5rem;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FFF3C4 0%, #FFC94D 46%, #E08A12 100%);
  box-shadow: inset 0 0 0 5px rgba(150, 84, 0, .32), inset 0 0 0 7px rgba(255, 240, 190, .4), 0 12px 26px rgba(0, 0, 0, .5);
  font: italic 900 2.1rem/1 var(--font-heading); color: #7A4300;
}
.coin:nth-child(1) { top: 9%; }
.coin:nth-child(2) { top: 39%; margin-left: -2.9rem; }
.coin:nth-child(3) { top: 69%; margin-left: -2.2rem; }
@keyframes coin-fall {
  from { transform: translateY(-110%) rotate(-18deg); }
  to   { transform: translateY(100cqh) rotate(22deg); }
}
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(255, 201, 77, .6); } 100% { box-shadow: 0 0 0 .6rem rgba(255, 201, 77, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .pulse-dot { animation: pulse-dot 1.8s ease-out infinite; }
  @media (min-width: 901px) {
    .coin { top: 0 !important; animation: coin-fall 7.5s linear infinite; }
    .coin:nth-child(2) { animation-delay: -2.5s; }
    .coin:nth-child(3) { animation-delay: -5s; }
  }
}

/* stat strip: normal flow, pulled up over the hero */
.stat-strip {
  position: relative; z-index: 3; margin-top: -3.25rem;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.stat-strip::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad-stripe); }
.stat { padding: 1.6rem 1.4rem 1.4rem; border-inline-start: 1px solid var(--border-soft); }
.stat:first-child { border-inline-start: 0; }
.stat__num { display: block; font: italic 900 2.2rem/1.1 var(--font-heading); color: var(--accent); padding-bottom: .15rem; }
.stat__label { display: block; margin-top: .3rem; font-size: .9rem; color: var(--text-muted); line-height: 1.45; }

/* ── inner page hero ──────────────────────────────────── */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: 3.25rem 0 3.75rem; border-bottom: 1px solid var(--border); }
.page-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; z-index: -2; }
.page-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 12, 28, .96) 0%, rgba(8, 12, 28, .82) 44%, rgba(8, 12, 28, .28) 100%), linear-gradient(180deg, transparent 60%, rgba(8, 12, 28, .85) 100%); }
[dir="rtl"] .page-hero__scrim, [dir="rtl"] .hero__scrim { transform: scaleX(-1); }
.page-hero h1 { font-size: clamp(1.75rem, 3.1vw, 2.7rem); }
.page-hero__sub { margin-top: 1.1rem; font-size: 1.08rem; color: var(--text); }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; font-size: .85rem; color: var(--text-dim); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.page-meta { margin: 1.1rem 0 0; font-size: .88rem; color: var(--text-muted); }
.page-meta-author { color: var(--accent); font-weight: 600; }

/* ── sections ─────────────────────────────────────────── */
.section { padding: 4rem 0; }
.section + .section { padding-top: .5rem; }
.section-head { margin-bottom: 1.6rem; }
.section-head h2 { font-size: clamp(1.5rem, 2.5vw, 2.15rem); }
.section-intro { margin-bottom: 1.75rem; color: var(--text); }
.section--intro { padding-bottom: 1.5rem; }

/* card base: 18px corners, two-layer shadow, 5px gradient top stripe */
.plain-card, .floor-tile, .feature-check-list--plain, .intro-block, .support-card, .bento-tile, .reward-card, .secure-cell, .step-tile, .faq-item, .about-card {
  position: relative; margin: 0 auto; width: 100%;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
}
.plain-card, .feature-check-list--plain, .intro-block { padding: 2rem 2.1rem; overflow: hidden; }
.plain-card::before, .floor-tile::before, .feature-check-list--plain::before, .bento-tile::before, .reward-card::before, .step-tile::before, .about-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad-stripe); border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.intro-block { border-inline-start: 4px solid var(--accent); background: linear-gradient(120deg, var(--accent-soft), transparent 55%), var(--bg-card); font-size: 1.06rem; }

/* floor grid (R3) */
.floor-grid { display: grid; gap: 1.25rem; }
.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)); }
.floor-grid--cols-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.floor-grid--cols-5 > * { grid-column: span 2; }
.floor-grid--cols-5 > :nth-child(n+4) { grid-column: span 3; }
.floor-tile { padding: 1.9rem 1.6rem 1.7rem; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.floor-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--border-strong); }
.floor-tile h3 { font-size: 1.2rem; margin-bottom: .8rem; position: relative; z-index: 1; }
.floor-tile p, .floor-tile ul, .floor-tile ol, .floor-tile h4 { position: relative; z-index: 1; }
.floor-tile p { color: var(--text-muted); }
.tile-mark {
  position: absolute; inset-inline-end: .6rem; bottom: -1.6rem; z-index: 0; pointer-events: none;
  font: italic 900 7.5rem/1 var(--font-heading); color: rgba(160, 175, 255, .06);
  transition: color .35s;
}
.floor-tile:hover .tile-mark, .bento-tile:hover .tile-mark, .reward-card:hover .tile-mark { color: rgba(224, 31, 147, .2); }

/* rich tiles (R4b): one column, generous padding, sub-cards for list items */
.floor-grid--rich { grid-template-columns: minmax(0, 1fr); }
.floor-grid--rich .floor-tile { padding: 2.4rem; }
.floor-grid--rich .floor-tile h3 { font-size: 1.35rem; }
.tile-kicker {
  margin: 1.5rem 0 1rem; padding-top: 1rem; border-top: 2px solid var(--brand);
  font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.rich-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .7rem; }
ol.rich-list { list-style: decimal inside; }
.rich-list li {
  position: relative; padding: 1rem 1.15rem 1rem 1.45rem;
  background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--r-md); color: var(--text);
}
.rich-list li::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--brand), var(--accent)); }
ol.rich-list li::marker { color: var(--accent); font-weight: 700; }
[dir="rtl"] .rich-list li { padding: 1rem 1.45rem 1rem 1.15rem; }

/* feature check-list: gold ticks, golden panel, gold left border */
.feature-check-list { list-style: none; margin: 1.1rem 0; padding: 1.15rem 1.3rem; display: grid; gap: .8rem; border-radius: var(--r-md); border-inline-start: 4px solid var(--accent); background: linear-gradient(120deg, var(--accent-soft), rgba(255, 201, 77, .03)); }
.feature-check-list li { position: relative; padding-inline-start: 2.1rem; color: var(--text); }
.feature-check-list li::before {
  content: "✓"; position: absolute; inset-inline-start: 0; top: .18rem;
  width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--grad-gold); color: var(--ink); font-size: .78rem; font-weight: 900; line-height: 1;
}
ol.feature-check-list--ordered { list-style: decimal; padding-inline-start: 2.9rem; }
ol.feature-check-list--ordered li { padding-inline-start: .4rem; }
ol.feature-check-list--ordered li::before { content: none; }
ol.feature-check-list--ordered li::marker { color: var(--accent); font-weight: 800; font-family: var(--font-heading); }
.feature-check-list--plain > .feature-check-list:last-child, .split-layout__copy > .feature-check-list:last-child { margin-bottom: 0; }

/* split layout */
.split-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.split-layout__copy { position: relative; padding: 2rem 2.1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: var(--shadow-card); }
.split-layout__media { margin: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; }
.split-layout__media img { width: 100%; height: 100%; object-fit: cover; }

/* image divider (R5b): contained figure, 4:3 card + aside */
.image-divider { margin: 0 0 4rem; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.image-divider__media { aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.image-divider__media img { width: 100%; height: 100%; object-fit: cover; }
.image-divider__aside { padding: 1.5rem 0; border-top: 1px solid var(--border-strong); }
.image-divider__aside .dice { margin-bottom: 1.4rem; }
.image-divider__aside .kicker { display: flex; margin-bottom: .5rem; }
.image-divider__title { font: 800 1.5rem/1.2 var(--font-heading); color: var(--text-on-dark); }

/* ── home sections ────────────────────────────────────── */
.home-intro__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.25rem; align-items: stretch; }
.home-intro__grid .intro-block { display: flex; flex-direction: column; justify-content: center; font-size: 1.15rem; }

.bento-floor { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; }
.bento-tile { overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.bento-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.bento-tile:nth-child(1), .bento-tile:nth-child(4) { grid-column: span 7; }
.bento-tile:nth-child(2), .bento-tile:nth-child(3) { grid-column: span 5; }
.bento-tile__media { aspect-ratio: 16 / 9; overflow: hidden; }
.bento-tile:nth-child(2) .bento-tile__media, .bento-tile:nth-child(3) .bento-tile__media { aspect-ratio: 5 / 4; }
.bento-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.bento-tile:hover .bento-tile__media img { transform: scale(1.04); }
.bento-tile__body { position: relative; padding: 1.5rem 1.6rem 1.7rem; flex: 1; overflow: hidden; }
.bento-tile__body h3 { font-size: 1.25rem; margin-bottom: .7rem; }
.bento-tile__body p { color: var(--text-muted); position: relative; z-index: 1; }

.rewards-bento { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; }
.reward-card { padding: 1.8rem 1.7rem; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.reward-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.reward-card h3 { font-size: 1.25rem; margin-bottom: .6rem; position: relative; z-index: 1; }
.reward-card p { color: var(--text-muted); position: relative; z-index: 1; }
.reward-card--welcome { grid-row: span 2; padding: 0; display: flex; flex-direction: column; }
.reward-card--welcome .reward-card__media { aspect-ratio: 16 / 9; overflow: hidden; }
.reward-card--welcome .reward-card__media img { width: 100%; height: 100%; object-fit: cover; }
.reward-card--welcome .reward-card__body { position: relative; padding: 1.7rem 1.8rem 1.9rem; flex: 1; }
.reward-card--welcome h3 { font-size: 1.55rem; }
.reward-card--vip { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: center; background: linear-gradient(110deg, rgba(224, 31, 147, .22), rgba(255, 201, 77, .1) 70%), var(--bg-card); }
.reward-card--vip .dice { align-self: center; }

.security-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.secure-cell { padding: 1.5rem 1.35rem; overflow: hidden; background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card)); }
.secure-cell::after { content: ""; position: absolute; inset: .45rem; border: 1px solid var(--border-soft); border-radius: 12px; pointer-events: none; }
.secure-cell .pip { width: 1.6rem; height: 1.6rem; border-radius: 6px; margin-bottom: .9rem; }
.secure-cell p { color: var(--text); font-size: .98rem; }

.responsible-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.25rem; align-items: start; }
.responsible-grid .floor-tile h3 { font-size: 1.3rem; }

.support-card { overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.support-card__copy { position: relative; padding: 2.4rem 2.2rem; z-index: 1; }
.support-card__copy p { font-size: 1.05rem; }
.support-card__media { position: relative; min-height: 18rem; }
.support-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.support-card__mark { position: absolute; inset-inline-start: 1.4rem; bottom: -2.4rem; z-index: 0; pointer-events: none; font: italic 900 11rem/1 var(--font-heading); color: rgba(255, 201, 77, .07); white-space: nowrap; }

.steps-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.step-tile { grid-column: span 2; padding: 1.7rem 1.5rem 1.5rem; overflow: hidden; color: var(--text); font-weight: 600; }
.step-tile:nth-child(n+4) { grid-column: span 3; }
.step-tile .pip { display: block; margin-bottom: .8rem; }
.closing-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.6rem 1.9rem; border-radius: var(--card-radius); border: 1px solid var(--border-strong); background: linear-gradient(110deg, rgba(224, 31, 147, .2), transparent 70%), var(--bg-panel); }
.closing-note p { font-size: 1.08rem; color: var(--text-on-dark); margin: 0; }

/* ── about ────────────────────────────────────────────── */
.about-card { padding: 1.9rem 1.7rem; overflow: hidden; }
.about-card h3 { font-size: 1.2rem; margin-bottom: .7rem; }
.about-card p { color: var(--text-muted); }

/* ── FAQ ──────────────────────────────────────────────── */
.faq-list { display: grid; gap: .8rem; }
.faq-item { overflow: hidden; box-shadow: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.faq-item[open] { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--border-strong); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; cursor: pointer; list-style: none; font: 700 1.05rem/1.4 var(--font-heading); color: var(--text-on-dark); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "⊕"; flex: none; font: 400 1.5rem/1 var(--font-body); color: var(--accent); transition: transform .35s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 1.4rem 1.3rem; color: var(--text-muted); }

/* ── footer ───────────────────────────────────────────── */
.site-footer { margin-top: 9rem; background: #05081A; border-top: 1px solid var(--border); padding-bottom: 2rem; }
.footer-cta {
  position: relative; overflow: hidden; margin-top: -5.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center;
  padding: 2.4rem 2.6rem; border-radius: var(--r-xl); background: var(--grad-gold); color: var(--ink);
  box-shadow: 0 24px 60px rgba(255, 159, 46, .22);
}
.footer-cta h2 { position: relative; z-index: 1; font-size: clamp(1.3rem, 2.2vw, 1.8rem); color: var(--ink); }
.footer-cta p { position: relative; z-index: 1; margin: .6rem 0 0; color: #3A2452; font-weight: 600; }
.footer-cta .btn { position: relative; z-index: 1; }
.footer-cta__mark { position: absolute; inset-inline-end: -1rem; bottom: -3.2rem; font: italic 900 13rem/1 var(--font-heading); color: rgba(27, 16, 48, .09); pointer-events: none; white-space: nowrap; }
.footer-map { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding: 3.5rem 0 2.5rem; }
.footer-brand img { height: 44px; width: auto; object-fit: contain; }
.footer-brand p { margin: 1.1rem 0 1.2rem; color: var(--text-muted); font-size: .95rem; }
.pay-pills, .trust-pills { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.pay-pills li, .trust-pills li { padding: .32rem .8rem; border: 1px solid var(--border-strong); border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; color: var(--text); background: var(--bg-card); }
.footer-col h3 { font: italic 800 1.1rem/1.3 var(--font-heading); padding-bottom: .1rem; }
.footer-col h3::after { content: ""; display: block; width: 2.2rem; height: 3px; margin-top: .55rem; border-radius: 3px; background: var(--grad-gold); }
.footer-col ul { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.footer-col a { color: var(--text-muted); text-decoration: none; font-size: .95rem; }
.footer-col a:hover { color: var(--accent); }
.trust-pills { padding: 1.5rem 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.trust-pills li { background: transparent; color: var(--text-muted); }
.footer-legal { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; padding-top: 1.4rem; font-size: .82rem; color: var(--text-dim); }
.footer-legal p { margin: 0; }

/* ── 404 ──────────────────────────────────────────────── */
.notfound { padding: 4rem 0 2rem; text-align: center; }
.notfound__num {
  font: italic 900 clamp(8rem, 22vw, 20rem)/1 var(--font-heading); padding-bottom: .1em;
  background: linear-gradient(120deg, var(--brand-light), var(--brand) 40%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.notfound h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: .5rem 0 1rem; }
.notfound .hero-actions { justify-content: center; }
.notfound__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; list-style: none; padding: 0; margin: 2rem 0 0; }
.notfound__links a { display: block; padding: .45rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--r-pill); color: var(--text); text-decoration: none; }
.notfound__links a:hover { border-color: var(--accent); color: var(--accent); }

/* ── reveal: content is visible by default; JS hides only what starts below the fold ── */
.reveal.is-hidden { opacity: 0; transform: translateY(18px); }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.floor-tile.reveal.is-visible, .bento-tile.reveal.is-visible, .reward-card.reveal.is-visible { transition: opacity .6s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }

/* ── Urdu mirror ──────────────────────────────────────── */
html[lang="ur"] body { font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif; line-height: 2.3; }
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="ur"] .faq-item summary, html[lang="ur"] .footer-col h3, html[lang="ur"] .image-divider__title { font-family: 'Noto Nastaliq Urdu', serif; font-style: normal; line-height: 2; letter-spacing: 0; }
html[lang="ur"] .hero h1 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); }
html[lang="ur"] .kicker { letter-spacing: 0; text-transform: none; font-size: .9rem; }
html[lang="ur"] .highlight { font-style: normal; }
html[lang="ur"] .btn { font-family: 'Noto Nastaliq Urdu', serif; line-height: 1.9; }
html[lang="ur"] .primary-nav a, html[lang="ur"] .topbar { line-height: 1.9; }
html[lang="ur"] .stat__num, html[lang="ur"] .coin, html[lang="ur"] .tile-mark, html[lang="ur"] .footer-cta__mark { font-family: var(--font-heading); }

/* ── breakpoints ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .primary-nav a { padding: .55rem .55rem; font-size: .88rem; }
  .mainbar .container { gap: 1rem; }
  .hero__grid { gap: 2rem; grid-template-columns: minmax(0, 1.25fr) 8rem minmax(0, 1fr); }
  .footer-map { gap: 1.75rem; }
}

@media (max-width: 900px) {
  .burger { display: block; margin-inline-start: auto; }
  .header-cta { display: none; }
  .topbar__links { display: none; }
  .primary-nav {
    position: fixed; inset: 0; z-index: 130; margin: 0;
    padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
    background: rgba(5, 8, 26, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  }
  .nav-open .primary-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav a { padding: 1rem .25rem; font-size: 1.2rem; border-bottom: 1px solid var(--border-soft); }
  .nav-indicator { display: none; }
  .nav-extra { display: block; margin-top: 1.5rem; }
  .nav-extra ul { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.25rem; }
  .nav-extra a { font-size: .98rem; padding: .4rem 0; border: 0; color: var(--text-muted); }
  .nav-extra .btn { margin-top: 1.25rem; width: 100%; font-size: 1rem; color: #fff; border: 0; padding: .7rem 1.6rem; }
  body.nav-open { overflow: hidden; }

  .hero { padding: 3rem 0 5.5rem; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-height: 0; }
  .spine { container-type: normal; height: 5.75rem; display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
  .spine::before, .spine::after { content: none; }
  .coin { position: static; margin: 0 !important; width: 3.9rem; height: 3.9rem; font-size: 1.6rem; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-inline-start: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--border-soft); }

  .floor-grid--cols-3, .floor-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .floor-grid--cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .floor-grid--cols-5 > *, .floor-grid--cols-5 > :nth-child(n+4) { grid-column: auto; }
  .security-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-tile, .step-tile:nth-child(n+4) { grid-column: auto; }
  .split-layout, .image-divider, .support-card, .responsible-grid, .home-intro__grid { grid-template-columns: minmax(0, 1fr); }
  .support-card__media { min-height: 14rem; }
  .bento-tile:nth-child(n) { grid-column: span 6; }
  .footer-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-cta { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .section { padding: 3rem 0; }
  .rewards-bento { grid-template-columns: minmax(0, 1fr); }
  .reward-card--welcome { grid-row: auto; }
  .reward-card--vip { grid-template-columns: minmax(0, 1fr); }
  .closing-note { grid-template-columns: minmax(0, 1fr); }
  .footer-legal { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .footer-cta { padding: 2rem 1.6rem; }
  .image-divider { margin-bottom: 3rem; gap: 1.25rem; }
}

@media (max-width: 560px) {
  :root { --gutter: 1.15rem; }
  .floor-grid--cols-2, .floor-grid--cols-3, .floor-grid--cols-4, .floor-grid--cols-5, .security-grid, .steps-grid { grid-template-columns: minmax(0, 1fr); }
  .bento-tile:nth-child(n) { grid-column: 1 / -1; }
  .plain-card, .feature-check-list--plain, .intro-block, .split-layout__copy { padding: 1.5rem 1.3rem; }
  .floor-grid--rich .floor-tile { padding: 1.6rem 1.3rem; }
  .support-card__copy { padding: 1.7rem 1.4rem; }
  .footer-map { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .topbar { font-size: .72rem; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.75rem; }
  .page-hero h1 { font-size: 1.55rem; }
  .stat { padding: 1.2rem 1rem 1.1rem; }
  .stat__num { font-size: 1.7rem; }
  .hero-actions .btn { flex: 1 1 100%; }
  .brand img { height: 40px; }
  .footer-cta__mark { font-size: 8rem; bottom: -2rem; }
}

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