/* ==========================================================================
   JJ Game - jjgameapp.com
   Palette  : "Sabz Barq" (Green Lightning) - acid lime #76E02B + ultraviolet
              #6B3BFF on a near-black charcoal with a green undertone.
   Type     : Reem Kufi (geometric Kufi display) + Vazirmatn (Arabic/Latin sans)
   Ornament : the khatam - an eight-point star (two squares at 45deg), used as
              the eyebrow mark, the list bullet and the arch keystone.
   Hero     : "mihrab aperture" - the art is masked into a tall pointed arch on
              the inline-start side; copy flows into the negative space.
   Direction: Urdu, RTL. Every box uses logical properties.
   ========================================================================== */

:root{
  --brand:#76E02B; --brand-dark:#3C7D14; --brand-light:#ACF472;
  --accent:#6B3BFF; --accent-warm:#9D74FF; --accent-soft:rgba(118,224,43,.13);

  --bg:#0A0F08; --bg-card:#111A0C; --bg-elevated:#17230F; --bg-panel:#0D1409;

  --text:#EFF7E8; --text-muted:#AABE99; --text-dim:#7D8F6F; --text-on-dark:#F7FBF2;

  --border:#1F2D16; --border-strong:#33491E; --border-soft:#161F0E;

  --font-body:'Vazirmatn',system-ui,sans-serif;
  --font-heading:'Reem Kufi','Vazirmatn',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 2px 10px rgba(0,0,0,.34);
  --shadow-card:0 10px 26px rgba(0,0,0,.42),0 2px 6px rgba(118,224,43,.07);
  --shadow-card-hover:0 20px 44px rgba(0,0,0,.52),0 4px 14px rgba(118,224,43,.16);
  --shadow-cta:0 10px 26px rgba(118,224,43,.26);

  --container:1200px; --container-wide:1320px;
  --header-top-h:2.25rem; --header-main-h:4.5rem;
  --header-h:calc(var(--header-top-h) + var(--header-main-h));
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:1.02rem;line-height:1.95;
  overflow-x:hidden;
}
body::before{ /* off-canvas atmosphere */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(760px 520px at 88% -6%,rgba(118,224,43,.11),transparent 68%),
    radial-gradient(620px 460px at 4% 18%,rgba(107,59,255,.13),transparent 70%),
    radial-gradient(900px 700px at 50% 108%,rgba(118,224,43,.06),transparent 72%);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-light);text-decoration:none}
a:hover{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4,h5{font-family:var(--font-heading);font-weight:700;color:var(--text-on-dark);margin:0 0 .7em}
h1{font-size:clamp(2.05rem,4.4vw,3.5rem);line-height:1.45;letter-spacing:0}
h2{font-size:clamp(1.6rem,2.8vw,2.45rem);line-height:1.6}
h3{font-size:clamp(1.18rem,1.7vw,1.5rem);line-height:1.7}
h4{font-size:1.02rem;line-height:1.7}
p{margin:0 0 1.15rem}
ul,ol{margin:0 0 1.15rem;padding-inline-start:0}

/* ---- the width law (D1): the container cap is the ONLY cap on the page ---- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 1.5rem}

/* ---- the khatam: eight-point star ornament ---- */
.khatam{
  display:inline-block;inline-size:12px;block-size:12px;flex:0 0 12px;
  background:var(--brand);
  clip-path:polygon(50% 0,61% 28%,89% 15%,80% 44%,100% 50%,80% 56%,89% 85%,
                    61% 72%,50% 100%,39% 72%,11% 85%,20% 56%,0 50%,20% 44%,11% 15%,39% 28%);
}
.khatam--lg{inline-size:22px;block-size:22px;flex-basis:22px}
.khatam--accent{background:var(--accent-warm)}

/* ---------- kicker / eyebrow ---------- */
.kicker{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-heading);font-size:.8rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand);
  margin:0 0 .85rem;
}
.section-head{margin:0 0 2.1rem}
.section-head p{color:var(--text-muted);margin:0}

/* =======================  HEADER (sticky, two rows)  ====================== */
.site-header{position:sticky;inset-block-start:0;z-index:70;background:#070B05;
  border-block-end:1px solid var(--border);transition:box-shadow .25s ease}
.site-header.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.55)}
.header-top{background:#050704;border-block-end:1px solid var(--border-soft)}
.header-top .container{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;block-size:var(--header-top-h)}
.trust-strip{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--text-muted);
  letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-inline-size:0;flex:1 1 auto;margin:0}
.pulse-dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 0 rgba(118,224,43,.6);animation:pulse 2.4s infinite;flex:0 0 8px}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(118,224,43,0)}100%{box-shadow:0 0 0 0 rgba(118,224,43,0)}}
.util-nav{display:flex;align-items:center;gap:1.15rem;font-size:.78rem;
  min-inline-size:0;flex:0 1 auto;overflow:hidden;white-space:nowrap}
.util-nav a{color:var(--text-dim)}
.util-nav a:hover{color:var(--brand-light)}

.header-main .container{display:flex;align-items:center;gap:1.4rem;block-size:var(--header-main-h)}
.brand-link{display:flex;align-items:center;flex:0 0 auto;min-inline-size:0}
.brand-link img{block-size:42px;inline-size:auto;object-fit:contain}
.primary-nav{position:relative;display:flex;align-items:center;gap:.25rem;
  margin-inline-start:auto;flex-wrap:nowrap;min-inline-size:0}
.primary-nav a{position:relative;padding:.5rem .72rem;border-radius:var(--r-sm);
  font-size:.9rem;color:var(--text-muted);white-space:nowrap;transition:color .2s}
.primary-nav a:hover,.primary-nav a.active{color:var(--text-on-dark)}
.nav-indicator{position:absolute;inset-block-end:-2px;left:0;block-size:2px;background:var(--brand);
  border-radius:2px;transition:transform .32s cubic-bezier(.4,0,.2,1),inline-size .32s;
  inline-size:0;transform-origin:center;pointer-events:none}
.btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.45rem;border-radius:var(--r-pill);border:0;cursor:pointer;
  font-family:var(--font-heading);font-weight:700;font-size:.92rem;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
  color:#07140B;box-shadow:var(--shadow-cta);transition:transform .2s,box-shadow .2s}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(118,224,43,.36);color:#07140B}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.45rem;border-radius:var(--r-pill);cursor:pointer;
  font-family:var(--font-heading);font-weight:700;font-size:.92rem;
  background:transparent;border:1px solid var(--border-strong);color:var(--text);
  transition:border-color .2s,background .2s,transform .2s}
.btn-ghost:hover{border-color:var(--brand);background:var(--accent-soft);
  color:var(--text-on-dark);transform:translateY(-2px)}
.header-main .btn-cta{flex:0 0 auto}
.nav-toggle{display:none;inline-size:44px;block-size:44px;border:1px solid var(--border-strong);
  background:transparent;border-radius:var(--r-sm);cursor:pointer;padding:0;
  margin-inline-start:auto;position:relative}
.nav-toggle span{position:absolute;inset-inline:11px;block-size:2px;background:var(--text);
  border-radius:2px;transition:transform .3s,opacity .2s}
.nav-toggle span:nth-child(1){inset-block-start:15px}
.nav-toggle span:nth-child(2){inset-block-start:21px}
.nav-toggle span:nth-child(3){inset-block-start:27px}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* =============================  HERO  ===================================
   Archetype: "the glyph window" - the art fills the whole band under a heavy
   ink scrim, and an oversized Kufi wordmark is the only aperture through it:
   the same frame, unscrimmed, shows through the letterforms. Copy sits in a
   column beneath the glyph.
   Foreground object: "the scratch-card peel" - a foil panel with its corner
   curled back off a lit win face.
   ======================================================================== */
.hero{position:relative;z-index:1;overflow:hidden;
  padding-block:clamp(2.2rem,4.5vw,3.6rem) 5.6rem;
  background:var(--bg-panel);border-block-end:1px solid var(--border)}
.hero-art{position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover;filter:brightness(.56) saturate(.95);z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,15,8,.46) 0%,rgba(10,15,8,.66) 46%,var(--bg) 100%),
    radial-gradient(70% 90% at 76% 18%,rgba(107,59,255,.3),transparent 70%)}
.hero .container{position:relative;z-index:2}

.hero-glyph{
  display:block;margin:0 0 clamp(1rem,2.4vw,1.9rem);
  font-family:var(--font-heading);font-weight:700;line-height:.98;
  font-size:clamp(2.7rem,12vw,9.5rem);letter-spacing:.01em;
  color:var(--brand);
  background-image:var(--hero-art);background-size:cover;background-position:center 34%;
  -webkit-text-stroke:1px rgba(118,224,43,.42);
  user-select:none}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-glyph{-webkit-background-clip:text;background-clip:text;color:transparent}
}

.hero-grid{display:grid;gap:clamp(1.6rem,4vw,3.2rem);
  grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);align-items:center}
.hero-copy{position:relative}
.hero h1{margin-block-end:1rem;padding-block-end:.18em}
.hero h1 .highlight{position:relative;color:var(--brand);white-space:nowrap;
  line-height:1.1;padding-block-end:.1em}
.hero h1 .highlight::after{content:"";position:absolute;inset-inline:-.08em;
  inset-block-end:.02em;block-size:.34em;background:rgba(118,224,43,.2);
  border-radius:3px;z-index:-1}
.hero-sub{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--text-muted);margin-block-end:1.5rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-block-start:1.6rem}
.hero-badges{display:flex;flex-wrap:wrap;gap:.55rem;margin-block-start:1.6rem}
.hero-badges span{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;
  color:var(--text-muted);background:rgba(13,20,9,.72);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:.38rem .85rem}

/* ---- the scratch-card peel ---- */
.scratch-card{position:relative;aspect-ratio:4/4.6;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--border-strong);box-shadow:var(--shadow-card);
  background:
    radial-gradient(90% 62% at 50% 34%,rgba(118,224,43,.3),transparent 70%),
    radial-gradient(120% 90% at 78% 8%,rgba(107,59,255,.34),transparent 66%),
    linear-gradient(170deg,var(--bg-elevated),var(--bg-panel))}
.scratch-win{position:absolute;inset-block-start:0;inset-inline:0;block-size:58%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.65rem;padding:1.2rem;text-align:center}
.scratch-win .khatam{filter:drop-shadow(0 0 16px rgba(118,224,43,.85))}
.scratch-win b{font-family:var(--font-heading);font-size:1.08rem;color:var(--brand-light);
  letter-spacing:.1em;line-height:1.6}
.scratch-win span{font-size:.78rem;color:var(--text-dim);letter-spacing:.05em}
/* the un-scratched foil still covering the lower face */
.scratch-foil{position:absolute;inset:0;z-index:2;
  background:
    repeating-linear-gradient(116deg,rgba(255,255,255,.06) 0 2px,transparent 2px 6px),
    linear-gradient(150deg,#2B3A1E 0%,#1A2412 46%,#232F17 74%,#10180A 100%);
  clip-path:polygon(0 72%,100% 46%,100% 100%,0 100%);
  box-shadow:inset 0 2px 0 rgba(118,224,43,.3)}
/* the strip already peeled back - the pale underside of the foil, curling over */
.scratch-curl{position:absolute;z-index:3;inset-inline:-2%;inset-block-start:30%;
  block-size:34%;
  background:
    linear-gradient(183deg,rgba(255,255,255,.3) 0 6%,transparent 22%),
    linear-gradient(168deg,#C8D9B4 0%,#92A97A 26%,#53663B 62%,#1E2A13 100%);
  clip-path:polygon(0 56%,100% 30%,100% 86%,0 100%);
  box-shadow:0 18px 30px rgba(0,0,0,.72);
  transform:rotate(-1deg)}

/* ---- hero-bridge stat strip: normal flow, pulled up ---- */
.stat-strip{position:relative;z-index:5;margin-block-start:-3.25rem}
.stat-strip .container{display:grid;gap:1px;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--border);border:1px solid var(--border);border-radius:var(--card-radius);
  overflow:hidden;box-shadow:var(--shadow-card)}
.stat-cell{background:var(--bg-card);padding:1.4rem 1.2rem;text-align:center}
.stat-cell b{display:block;font-family:var(--font-heading);font-size:clamp(1.3rem,2.2vw,1.85rem);
  color:var(--brand);line-height:1.5}
.stat-cell span{display:block;font-size:.8rem;color:var(--text-dim);letter-spacing:.05em}

/* =========================  SHARED CARDS  ================================ */
.card,.plain-card,.support-card,.tile,.faq-list details,.rich-tile,.sec-cell,.bento-cell{
  position:relative;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--card-radius);box-shadow:var(--shadow-card);overflow:hidden}
.card::before,.plain-card::before,.tile::before,.rich-tile::before,
.sec-cell::before,.bento-cell::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:5px;
  background:linear-gradient(90deg,var(--brand),var(--accent) 75%,transparent)}
.watermark{position:absolute;inset-block-end:-.34em;inset-inline-end:.3rem;
  font-family:var(--font-heading);font-size:4.6rem;line-height:1;color:rgba(118,224,43,.05);
  pointer-events:none;user-select:none;transition:color .3s}
.card:hover .watermark,.tile:hover .watermark,.rich-tile:hover .watermark,
.plain-card:hover .watermark{color:rgba(107,59,255,.12)}
.tile:hover,.rich-tile:hover,.sec-cell:hover,.bento-cell:hover{
  box-shadow:var(--shadow-card-hover);transform:translateY(-4px)}
.tile,.rich-tile,.sec-cell,.bento-cell{transition:transform .25s,box-shadow .25s}

/* =========================  BUILDER SECTIONS  ============================ */
.page-section{padding-block:clamp(2.6rem,5vw,4rem);position:relative;z-index:1}
.intro-block{background:var(--bg-panel);border:1px solid var(--border);
  border-inline-start:3px solid var(--brand);border-radius:var(--r-md);
  padding:1.5rem 1.7rem;margin-block:1.8rem;color:var(--text-muted)}
.intro-block p:last-child{margin-block-end:0}

.floor-grid{display:grid;gap:1.3rem}
.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))}
.tile{padding:1.65rem 1.55rem}
.tile h3{margin-block-end:.55rem}
.tile p:last-child{margin-block-end:0}
.tile p{color:var(--text-muted)}

/* R4b - rich tiles: one column, generous padding, no inner cap */
.floor-grid--rich{grid-template-columns:minmax(0,1fr);gap:1.5rem}
.rich-tile{padding:2.4rem}
.rich-tile>h3{margin-block-end:.9rem}
.rich-tile p{color:var(--text-muted)}
.rich-tile h4{
  font-family:var(--font-heading);font-size:.84rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand);
  border-block-start:2px solid var(--brand);padding-block-start:.95rem;
  margin-block:1.9rem .95rem}
.rich-tile ul{list-style:none;display:grid;gap:.75rem;margin-block-end:1.1rem}
.rich-tile li{position:relative;background:var(--bg);border:1px solid var(--border-soft);
  border-radius:var(--r-md);padding:1rem 1.15rem 1rem 1.45rem;color:var(--text-muted);
  overflow:hidden}
.rich-tile li::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;
  inline-size:3px;background:linear-gradient(var(--brand),var(--accent))}
.rich-tile li:last-child{margin-block-end:0}

/* split layout */
.split-layout{display:grid;gap:clamp(1.5rem,3vw,2.6rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.split-media{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);
  box-shadow:var(--shadow-card);aspect-ratio:16/10}
.split-media img{inline-size:100%;block-size:100%;object-fit:cover}
.split-body p{color:var(--text-muted)}

/* feature check-list */
.feature-check-list{list-style:none;display:grid;gap:.8rem;margin:0;padding:0}
.feature-check-list li{display:flex;gap:.9rem;align-items:flex-start;
  background:linear-gradient(135deg,rgba(118,224,43,.09),rgba(107,59,255,.05));
  border:1px solid var(--border);border-inline-start:3px solid var(--brand);
  border-radius:var(--r-md);padding:1rem 1.2rem;color:var(--text-muted)}
.feature-check-list li::before{
  content:"";flex:0 0 20px;inline-size:20px;block-size:20px;border-radius:50%;
  margin-block-start:.42rem;background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23000'/%3E%3C/svg%3E") center/13px no-repeat,
    linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23000'/%3E%3C/svg%3E") center/13px no-repeat,
    linear-gradient(#000,#000);mask-composite:exclude}
.plain-card{padding:2.1rem 2.2rem}
.plain-card p{color:var(--text-muted)}
.plain-card p:last-child,.plain-card>:last-child{margin-block-end:0}
.feature-check-list--plain .feature-check-list{margin-block-start:1.3rem}

/* R5b - image divider: a contained figure, never a full-bleed strip */
.image-divider{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:stretch;margin-block:1rem}
.image-divider figure{margin:0;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-card);aspect-ratio:4/3}
.image-divider figure img{inline-size:100%;block-size:100%;object-fit:cover}
.divider-aside{display:flex;flex-direction:column;justify-content:center;gap:.7rem;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:1.9rem 1.8rem}
.divider-aside .kicker{margin:0}
.divider-aside h3{margin:0;font-size:1.22rem}
.divider-rule{block-size:2px;inline-size:72px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),transparent)}

/* page-meta line */
.page-meta{font-size:.84rem;color:var(--text-dim);margin-block:0 1.5rem}
.page-meta-author{color:var(--brand-light)}

/* =============================  FAQ  ===================================== */
.faq-section{padding-block:clamp(2.6rem,5vw,4rem);position:relative;z-index:1}
.faq-list{display:grid;gap:.85rem}
.faq-list details{padding:0}
.faq-list details::before{display:none}
.faq-list summary{list-style:none;cursor:pointer;display:flex;gap:1rem;align-items:flex-start;
  padding:1.25rem 1.5rem;font-family:var(--font-heading);font-weight:700;
  font-size:1.02rem;color:var(--text-on-dark)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";flex:0 0 22px;inline-size:22px;block-size:22px;margin-inline-start:auto;
  background:var(--brand);transition:transform .3s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 11v4h-2v-4H7v-2h4V7h2v4h4v2z' fill='%23000'/%3E%3C/svg%3E") center/22px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 11v4h-2v-4H7v-2h4V7h2v4h4v2z' fill='%23000'/%3E%3C/svg%3E") center/22px no-repeat}
.faq-list details[open]{box-shadow:var(--shadow-card-hover);border-color:var(--border-strong)}
.faq-list details[open] summary::after{transform:rotate(135deg)}
.faq-answer{padding:0 1.5rem 1.4rem;color:var(--text-muted)}
.faq-answer p:last-child{margin-block-end:0}

/* ======================  BESPOKE HOME SECTIONS  ========================== */
.home-intro .plain-card{padding:2.4rem}
.bento-floor{display:grid;gap:1.3rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.bento-cell{padding:1.7rem 1.6rem}
.bento-cell p{color:var(--text-muted);margin-block-end:0}
.bento-cell--wide{grid-column:span 2}

.security-grid{display:grid;gap:1.3rem;grid-template-columns:repeat(4,minmax(0,1fr))}
.sec-cell{padding:1.8rem 1.5rem;text-align:center}
.sec-cell .khatam{margin:0 auto .9rem}
.sec-cell h3{font-size:1.06rem}
.sec-cell p{color:var(--text-muted);font-size:.93rem;margin-block-end:0}

.rewards-bento{display:grid;gap:1.3rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.rewards-bento .reward-hero{grid-column:span 1;grid-row:span 2;
  background:linear-gradient(165deg,rgba(118,224,43,.14),var(--bg-card) 58%)}
.rewards-bento .reward-strip{grid-column:1/-1;display:flex;flex-wrap:wrap;
  align-items:center;gap:1.2rem;justify-content:space-between}
.reward-strip .btn-cta{flex:0 0 auto}

.home-support .support-card{padding:2.6rem 2.4rem;
  background:linear-gradient(140deg,var(--bg-elevated),var(--bg-card) 62%)}
.home-support .support-card .watermark{font-size:7.5rem;color:rgba(118,224,43,.06)}

/* =====================  GAME SECTION: "arch colonnade"  ==================
   Square tiles each seated inside a pointed-arch plate; a lime spring-line
   rule runs the full width behind every row, with a khatam keystone at the
   crown of each arch. The art is inset, never masked, so nothing is cropped.
   ======================================================================== */
.game-colonnade{display:grid;gap:1.6rem 1.1rem;grid-template-columns:repeat(6,minmax(0,1fr))}
.arch-tile{position:relative;padding-block-start:26px}
.arch-plate{position:relative;background:linear-gradient(175deg,var(--bg-elevated),var(--bg-panel));
  border:1px solid var(--border-strong);padding:.6rem;
  border-start-start-radius:74% 54px;border-start-end-radius:74% 54px;
  border-end-start-radius:6px;border-end-end-radius:6px;
  box-shadow:var(--shadow-card);transition:transform .25s,box-shadow .25s,border-color .25s}
.arch-tile:hover .arch-plate{transform:translateY(-6px);border-color:var(--brand);
  box-shadow:var(--shadow-card-hover)}
.arch-plate img{inline-size:100%;aspect-ratio:1/1;object-fit:cover;
  border-start-start-radius:70% 46px;border-start-end-radius:70% 46px;
  border-end-start-radius:4px;border-end-end-radius:4px}
.arch-keystone{position:absolute;inset-block-start:0;inset-inline-start:50%;
  transform:translateX(-50%);z-index:2}
.arch-name{display:block;margin-block-start:.6rem;text-align:center;font-size:.8rem;
  color:var(--text-muted);line-height:1.6}
.spring-line{position:relative;block-size:2px;margin-block:.2rem 1.4rem;
  background:linear-gradient(90deg,transparent,rgba(118,224,43,.5) 14%,
             rgba(107,59,255,.45) 86%,transparent)}

/* =============================  FOOTER  ================================== */
.site-footer{position:relative;z-index:1;margin-block-start:clamp(3rem,6vw,5rem);
  background:#070B05;border-block-start:1px solid var(--border);padding-block-end:0}
.footer-cta{margin-block-start:-3.2rem}
.footer-cta-card{position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
  color:#07140B;padding:2.4rem 2.2rem;display:flex;flex-wrap:wrap;gap:1.4rem;
  align-items:center;justify-content:space-between;box-shadow:var(--shadow-cta)}
.footer-cta-card h2{color:#07140B;margin:0 0 .35rem;font-size:clamp(1.35rem,2.4vw,1.95rem)}
.footer-cta-card p{color:rgba(7,20,11,.78);margin:0}
.footer-cta-card .btn-cta{background:#07140B;color:var(--brand-light);box-shadow:none}
.footer-cta-card .btn-cta:hover{background:#000;color:var(--brand-light)}
.footer-cta-card .watermark{font-size:9rem;color:rgba(7,20,11,.09);inset-block-end:-.42em}
.footer-main{padding-block:3rem 2rem}
.footer-main .container{display:grid;gap:2rem;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
.footer-brand img{block-size:44px;inline-size:auto;object-fit:contain;margin-block-end:1rem}
.footer-brand p{color:var(--text-dim);font-size:.9rem}
.pay-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:1rem}
.pay-pills span{font-size:.76rem;color:var(--text-muted);background:var(--bg-panel);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:.34rem .8rem}
.footer-col h3{font-family:var(--font-heading);font-size:1rem;margin-block-end:.9rem;
  position:relative;padding-block-end:.6rem}
.footer-col h3::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  inline-size:34px;block-size:2px;background:var(--brand);border-radius:2px}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer-col a{color:var(--text-dim);font-size:.9rem}
.footer-col a:hover{color:var(--brand-light)}
.footer-trust{border-block-start:1px solid var(--border-soft);padding-block:1.2rem}
.footer-trust .container{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.footer-trust span{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;
  color:var(--text-dim);background:var(--bg-panel);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:.36rem .9rem}
.footer-legal{border-block-start:1px solid var(--border-soft);padding-block:1.1rem;
  font-size:.78rem;color:var(--text-dim)}
.footer-legal .container{display:flex;flex-wrap:wrap;gap:.6rem;
  align-items:center;justify-content:space-between}

/* =============================  404  ===================================== */
.page-404{position:relative;z-index:1;padding-block:clamp(3rem,9vw,7rem);text-align:center}
.page-404 .code{font-family:var(--font-heading);font-weight:700;
  font-size:clamp(8vw,16vw,22vw);line-height:1;margin:0 0 1rem;
  background:linear-gradient(135deg,var(--brand),var(--accent) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.page-404 .hero-actions{justify-content:center}

/* ==========================  REVEAL MOTION  ============================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* ===========================  BREAKPOINTS  =============================== */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .primary-nav a{padding:.5rem .55rem;font-size:.85rem}
  .footer-main .container{grid-template-columns:repeat(2,minmax(0,1fr))}
  .game-colonnade{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .primary-nav{position:fixed;inset:0;z-index:80;flex-direction:column;
    justify-content:center;gap:.4rem;background:rgba(7,11,5,.97);
    backdrop-filter:blur(14px);transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);margin:0}
  .nav-open .primary-nav{transform:none}
  .nav-open{overflow:hidden}
  .primary-nav a{font-size:1.15rem;padding:.75rem 1.5rem}
  .nav-indicator{display:none}
  .nav-toggle{display:block;z-index:90}
  .header-main .btn-cta{display:none}
  .floor-grid--cols-3,.floor-grid--cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .security-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-floor,.rewards-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-cell--wide,.rewards-bento .reward-hero{grid-column:span 1;grid-row:span 1}
  .split-layout,.image-divider{grid-template-columns:minmax(0,1fr)}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .scratch-card{aspect-ratio:16/5.4}
  .scratch-win{block-size:60%}
  .scratch-curl{inset-block-start:34%;block-size:40%}
  .stat-strip .container{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .util-nav{gap:.75rem;font-size:.74rem}
  .trust-strip{font-size:.7rem}
  .header-top .container{gap:.6rem}
  .game-colonnade{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-cta-card{text-align:center;justify-content:center}
  .rich-tile{padding:1.7rem 1.4rem}
  .plain-card{padding:1.6rem 1.5rem}
}
@media (max-width:560px){
  .trust-strip span:not(.pulse-dot),.trust-strip{display:none}
  .header-top .container{justify-content:center}
  .hero-glyph{font-size:clamp(2.1rem,13vw,4rem)}
  .floor-grid--cols-2,.floor-grid--cols-3,.floor-grid--cols-4,
  .security-grid,.bento-floor,.rewards-bento{grid-template-columns:minmax(0,1fr)}
  .game-colonnade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scratch-card{aspect-ratio:16/7.5}
  .container{padding:0 1.1rem}
}
@media (max-width:480px){
  body{font-size:.98rem}
  .stat-strip .container{grid-template-columns:minmax(0,1fr)}
  .hero-actions .btn-cta,.hero-actions .btn-ghost{inline-size:100%}
  .footer-legal .container{justify-content:center;text-align:center}
}