/* ==========================================================================
   JJ55 - jj55slot.com
   Dark petrol-teal + brass gold. Urdu-first (RTL), Nastaliq display.
   Signature ornament: eight-point khatam star.
   Layout law: the container is the ONLY max-width on the page.
   ========================================================================== */

:root{
  /* brand ---------------------------------------------------------------- */
  --brand:#0F8B8D;
  --brand-dark:#075B5E;
  --brand-light:#4CC3C4;

  --accent:#E8B33C;
  --accent-warm:#F2743D;
  --accent-soft:rgba(232,179,60,.14);

  /* surfaces ------------------------------------------------------------- */
  --bg:#0B1416;
  --bg-card:#101E21;
  --bg-elevated:#16292D;
  --bg-panel:#0E1A1D;

  /* ink ------------------------------------------------------------------ */
  --text:#ECF4F4;
  --text-muted:#A6BBBD;
  --text-dim:#728A8D;
  --text-on-dark:#FFFFFF;

  /* lines ---------------------------------------------------------------- */
  --border:rgba(236,244,244,.10);
  --border-strong:rgba(232,179,60,.34);
  --border-soft:rgba(236,244,244,.055);

  /* type ----------------------------------------------------------------- */
  --font-body:"Noto Naskh Arabic","Noto Sans Arabic",system-ui,sans-serif;
  --font-heading:"Noto Nastaliq Urdu","Noto Naskh Arabic",serif;
  --font-latin:"Jost","Noto Naskh Arabic",sans-serif;

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

  /* shadow --------------------------------------------------------------- */
  --shadow-soft:0 2px 10px rgba(3,10,11,.34);
  --shadow-card:0 1px 2px rgba(3,10,11,.5),0 18px 42px -16px rgba(3,10,11,.74);
  --shadow-card-hover:0 2px 6px rgba(3,10,11,.55),0 30px 62px -18px rgba(3,10,11,.86);
  --shadow-cta:0 10px 30px -10px rgba(232,179,60,.5);

  /* frame ---------------------------------------------------------------- */
  --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{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.95;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 520px at 88% -6%,rgba(15,139,141,.20),transparent 62%),
    radial-gradient(700px 420px at 4% 12%,rgba(232,179,60,.07),transparent 60%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:inherit;text-decoration:none}

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

/* Direction-agnostic visually-hidden skip link: a negative inline offset would
   be pushed off the RIGHT edge under dir="rtl" and widen the page. */
.skip-link{
  position:absolute;inline-size:1px;block-size:1px;
  margin:-1px;padding:0;overflow:hidden;white-space:nowrap;
  clip:rect(0 0 0 0);clip-path:inset(50%);border:0;
}
.skip-link:focus{
  position:fixed;inset-block-start:.75rem;inset-inline-start:.75rem;z-index:100;
  inline-size:auto;block-size:auto;margin:0;padding:.7rem 1.2rem;
  clip:auto;clip-path:none;overflow:visible;
  background:var(--accent);color:#17110A;border-radius:var(--r-pill);
  font-family:var(--font-latin);font-weight:600;box-shadow:var(--shadow-cta);
}

/* --- the one and only width rule ----------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:1.5rem;
}

/* --- headings ------------------------------------------------------------ */
h1,h2,h3,h4{
  font-family:var(--font-heading);
  font-weight:700;
  line-height:2.1;
  margin:0;
  color:var(--text);
  letter-spacing:0;
}
h1{font-size:clamp(1.6rem,1.05rem + 2.3vw,2.85rem)}
h2{font-size:clamp(1.35rem,.98rem + 1.5vw,2.1rem)}
h3{font-size:clamp(1.08rem,.95rem + .55vw,1.35rem);line-height:1.95}
h4{font-size:1rem;line-height:1.8}
p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}

/* Latin faces read at a tighter rhythm than Nastaliq. */
[lang="en"] h1,[lang="en"] h2,[lang="en"] h3,[lang="en"] h4{
  font-family:var(--font-latin);line-height:1.18;letter-spacing:-.015em;font-weight:600;
}
[lang="en"] body,[lang="en"]{line-height:1.7}
.latin{font-family:var(--font-latin);font-variant-numeric:tabular-nums}

/* --- Urdu bidi inside an LTR layout --------------------------------------
   The page LAYOUT is LTR: logo left, nav left to right, flex order, logical
   borders and auto margins all flow from the left. Urdu is an RTL script
   though, so a mixed Urdu/Latin/number string needs an RTL BASE DIRECTION or
   the Unicode bidi algorithm reorders it on screen (the "+" of "18+" jumps to
   the far left, a colon detaches from its Latin word).

   `unicode-bidi: plaintext` is the right tool: it resolves each paragraph's
   base direction from its first strong character WITHOUT changing the
   `direction` property. Setting `direction: rtl` here instead would also flip
   every layout decision that depends on it - the FAQ summary's flex order
   (icon to the left of the question), the check-list ticks, the gradient bar
   on rich-list items and every `*-inline-start` border. */
[lang="ur"] h1,[lang="ur"] h2,[lang="ur"] h3,[lang="ur"] h4,
[lang="ur"] p,[lang="ur"] li,[lang="ur"] summary,
[lang="ur"] .stat-label,[lang="ur"] .footer-col a,[lang="ur"] .utility-nav a{
  unicode-bidi:plaintext;
  text-align:left;
}
[lang="ur"] .stat-cell .stat-label{text-align:center}
[lang="ur"] .page-meta{text-align:left}
/* Inline runs inside flex chrome, isolated so a neutral at either end cannot
   leak into the surrounding layout. */
.bidi{unicode-bidi:plaintext}

/* --- the signature ornament: eight-point khatam star --------------------- */
.ornament{
  position:relative;display:inline-block;
  inline-size:16px;block-size:16px;flex:0 0 auto;vertical-align:middle;
}
.ornament::before,.ornament::after{
  content:"";position:absolute;inset:0;
  border:1.5px solid var(--accent);
  border-radius:2px;
}
.ornament::after{transform:rotate(45deg)}
.ornament--lg{inline-size:26px;block-size:26px}
.ornament--muted::before,.ornament--muted::after{border-color:var(--border-strong)}

/* --- kickers (no numbering anywhere - R13) ------------------------------- */
.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-latin);
  font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--accent);
  margin:0 0 .85rem;
}

/* ==========================================================================
   HEADER - sticky, two rows, never floating
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(8,16,18,.92);
  border-block-end:1px solid var(--border);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  transition:box-shadow .25s ease,background .25s ease;
}
.site-header.is-scrolled{background:rgba(8,16,18,.98);box-shadow:0 10px 34px -18px rgba(0,0,0,.95)}

.header-top{
  block-size:var(--header-top-h);
  background:#070E10;
  border-block-end:1px solid var(--border-soft);
  font-size:.74rem;
  color:var(--text-dim);
}
.header-top .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;block-size:100%}
.trust-line{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.trust-dot{
  inline-size:7px;block-size:7px;border-radius:50%;
  background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(232,179,60,.55);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(232,179,60,.5)}
  70%{box-shadow:0 0 0 7px rgba(232,179,60,0)}
  100%{box-shadow:0 0 0 0 rgba(232,179,60,0)}
}
.utility-nav{display:flex;align-items:center;gap:1.1rem;white-space:nowrap}
.utility-nav a{color:var(--text-dim);transition:color .2s ease}
.utility-nav a:hover{color:var(--accent)}

.header-main{block-size:var(--header-main-h)}
.header-main .container{display:flex;align-items:center;gap:1.25rem;block-size:100%}

.brand-mark{display:flex;align-items:center;flex:0 0 auto}
.brand-mark img{block-size:42px;inline-size:auto;object-fit:contain}

.primary-nav{
  display:flex;align-items:center;gap:.35rem;
  margin-inline-start:auto;position:relative;
}
.primary-nav a{
  position:relative;padding:.5rem .72rem;border-radius:var(--r-sm);
  font-size:.92rem;color:var(--text-muted);
  transition:color .2s ease,background .2s ease;white-space:nowrap;
}
.primary-nav a:hover{color:var(--text)}
.primary-nav a.active{color:var(--accent)}
.nav-indicator{
  position:absolute;block-size:2px;inset-block-end:-2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-warm));
  border-radius:2px;opacity:0;
  transition:left .32s cubic-bezier(.16,1,.3,1),width .32s cubic-bezier(.16,1,.3,1),opacity .2s ease;
  pointer-events:none;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.4rem;border-radius:var(--r-pill);
  font-family:var(--font-latin);font-size:.9rem;font-weight:600;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:linear-gradient(135deg,var(--accent) 0%,#D79A24 100%);
  color:#17110A;box-shadow:var(--shadow-cta);
}
.btn-primary:hover{box-shadow:0 14px 38px -10px rgba(232,179,60,.62);transform:translateY(-2px)}
.btn-ghost{
  background:rgba(236,244,244,.05);color:var(--text);
  border-color:var(--border);
}
.btn-ghost:hover{background:rgba(236,244,244,.1);border-color:var(--border-strong);color:var(--text)}
.btn-teal{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
  color:#F2FBFB;box-shadow:0 10px 30px -12px rgba(15,139,141,.72);
}
.btn-teal:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(15,139,141,.8)}
.header-cta{flex:0 0 auto}

.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  inline-size:44px;block-size:44px;padding:0 10px;
  background:transparent;border:1px solid var(--border);border-radius:var(--r-sm);
  cursor:pointer;flex:0 0 auto;
}
.burger span{
  display:block;block-size:2px;inline-size:100%;background:var(--text);border-radius:2px;
  transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:70;
  background:rgba(7,14,16,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:flex;flex-direction:column;justify-content:center;
  gap:.35rem;padding:5rem 1.5rem 2rem;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
  overflow-y:auto;
}
.mobile-nav.is-open{opacity:1;visibility:visible;transform:none}
.mobile-nav a{
  font-family:var(--font-heading);font-size:1.15rem;
  padding:.75rem .25rem;border-block-end:1px solid var(--border-soft);
  color:var(--text-muted);
}
.mobile-nav a.active{color:var(--accent)}
.mobile-nav .btn{margin-block-start:1.5rem;align-self:flex-start}
body.nav-open{overflow:hidden}

/* ==========================================================================
   HERO - archetype: low-anchored. Art fills the band, copy sits at the
   bottom inline-start, the multiplier gauge floats at the top inline-end.
   ========================================================================== */
.hero{position:relative;isolation:isolate;overflow:hidden;border-block-end:1px solid var(--border-soft)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{inline-size:100%;block-size:100%;object-fit:cover;object-position:center}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(8,16,18,.98) 4%,rgba(8,16,18,.82) 38%,rgba(8,16,18,.44) 70%,rgba(8,16,18,.72) 100%),
    linear-gradient(to right,rgba(8,16,18,.9) 0%,rgba(8,16,18,.30) 52%,transparent 100%);
}
.hero .container{
  position:relative;
  min-block-size:min(78vh,620px);
  padding-block:3.25rem 4.5rem;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-copy{position:relative;z-index:2}
.hero h1{
  margin:0 0 1.1rem;
  text-shadow:0 2px 24px rgba(3,10,11,.8);
  max-inline-size:none;
}
.highlight{
  position:relative;color:var(--accent);
  padding-block-end:.14em;
  line-height:1.15;
  display:inline-block;
}
.highlight::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:.02em;
  block-size:.36em;background:rgba(232,179,60,.2);
  border-radius:3px;z-index:-1;
}
[lang="en"] .highlight{font-style:italic;line-height:1.1;padding-block-end:.18em}
.hero-sub{
  font-size:1.03rem;color:var(--text-muted);
  margin:0 0 1.75rem;text-shadow:0 1px 14px rgba(3,10,11,.7);
  max-inline-size:none;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* the gauge arc - decorative foreground object */
.hero-gauge{
  position:absolute;z-index:2;
  inset-block-start:2.5rem;inset-inline-end:1.5rem;
  inline-size:168px;block-size:168px;
  display:grid;place-items:center;
  border-radius:50%;
  background:
    conic-gradient(from .5turn,var(--accent) 0 calc(var(--gauge,97) * .5%),rgba(236,244,244,.1) calc(var(--gauge,97) * .5%) 50%,transparent 50%),
    radial-gradient(circle at center,rgba(8,16,18,.9) 0 61%,transparent 61%);
  filter:drop-shadow(0 12px 30px rgba(3,10,11,.7));
}
.hero-gauge::before{
  content:"";position:absolute;inset:14px;border-radius:50%;
  background:rgba(10,20,22,.94);
  border:1px solid var(--border-strong);
}
.hero-gauge-face{position:relative;text-align:center;line-height:1.1}
.hero-gauge-num{
  display:block;font-family:var(--font-latin);font-weight:600;
  font-size:2.1rem;color:var(--accent);font-variant-numeric:tabular-nums;
}
.hero-gauge-cap{
  display:block;font-size:.68rem;color:var(--text-dim);
  letter-spacing:.1em;margin-block-start:.2rem;
}
@media (max-width:900px){.hero-gauge{inline-size:124px;block-size:124px;inset-block-start:1.75rem}
  .hero-gauge-num{font-size:1.5rem}}
@media (max-width:560px){.hero-gauge{position:relative;inset:auto;margin:0 0 1.5rem;inline-size:108px;block-size:108px}
  .hero .container{min-block-size:0;padding-block:2.5rem 3rem}
  .hero-gauge-num{font-size:1.35rem}}

/* --- hero-bridge stat strip - NORMAL FLOW, never absolute ---------------- */
.stat-strip{position:relative;z-index:5;margin-block-start:-3.25rem}
/* The grid lives INSIDE .container, so its edges land on the same guide lines
   as every other section without needing a width cap of its own (D1). */
.stat-grid{
  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);
  max-inline-size:none;
}
.stat-cell{background:var(--bg-card);padding:1.35rem 1.1rem;text-align:center;min-inline-size:0}
.stat-num{
  display:block;font-family:var(--font-latin);font-weight:600;
  font-size:clamp(1.3rem,1.05rem + .8vw,1.75rem);
  color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.2;
}
.stat-label{display:block;font-size:.8rem;color:var(--text-dim);margin-block-start:.3rem;line-height:1.6}
@media (max-width:700px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{padding-block:3.75rem}
.section:first-of-type{padding-block-start:4.25rem}
.section-head{margin-block-end:1.9rem;max-inline-size:none}
.section-head h2{margin:0}
.section-head p{margin-block-start:.75rem;color:var(--text-muted);max-inline-size:none}

.intro-block{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-inline-start:3px solid var(--accent);
  border-radius:var(--card-radius);
  padding:1.6rem 1.75rem;
  margin-block-end:2rem;
  color:var(--text-muted);
  max-inline-size:none;
}

/* --- card shell (D7): 18px corners, two-layer warm shadow, 5px gradient
       top stripe, italic watermark bottom-end that shifts on hover -------- */
.card{
  position:relative;overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  padding:1.75rem;
  box-shadow:var(--shadow-card);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease;
  max-inline-size:none;
}
.card::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:5px;
  background:linear-gradient(90deg,var(--accent),var(--accent-warm) 42%,var(--brand));
  opacity:.85;
}
.card::after{
  content:attr(data-mark);
  position:absolute;inset-block-end:-.35em;inset-inline-end:.4rem;
  font-family:var(--font-latin);font-style:italic;font-weight:600;
  font-size:4.1rem;line-height:1;
  color:rgba(236,244,244,.035);
  pointer-events:none;transition:color .35s ease;
  letter-spacing:-.02em;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--border-strong)}
.card:hover::after{color:rgba(232,179,60,.1)}
.card h3{margin:0 0 .6rem}
.card p{color:var(--text-muted)}

.plain-card,.support-card{
  position:relative;overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  padding:1.85rem;
  box-shadow:var(--shadow-card);
  max-inline-size:none;
}
.plain-card::before,.support-card::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:5px;
  background:linear-gradient(90deg,var(--accent),var(--accent-warm) 42%,var(--brand));
  opacity:.85;
}
.plain-card p,.support-card p{color:var(--text-muted)}

/* --- R3 floor grids ------------------------------------------------------ */
.floor-grid{display:grid;gap:1.25rem;max-inline-size:none}
.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: 1 column, no max-width, generous padding ------------ */
.floor-grid--rich{grid-template-columns:minmax(0,1fr);gap:1.5rem;max-inline-size:none}
.floor-grid--rich .card{padding:2.4rem;max-inline-size:none}
.floor-grid--rich .card h4{
  font-family:var(--font-latin);
  text-transform:uppercase;letter-spacing:.18em;
  font-size:.76rem;font-weight:600;color:var(--accent);
  border-block-start:2px solid var(--brand);
  padding-block-start:1rem;margin-block:1.6rem .9rem;
}
.rich-list{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.75rem}
.rich-list li{
  position:relative;overflow:hidden;
  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);line-height:1.85;
}
.rich-list li::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:3px;
  background:linear-gradient(180deg,var(--accent),var(--brand));
}

/* --- split layout -------------------------------------------------------- */
.split-layout{
  display:grid;gap:1.75rem;align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  max-inline-size:none;
}
.split-layout .split-media{
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-card);
  aspect-ratio:4/3;background:var(--bg-panel);
}
.split-layout .split-media img{inline-size:100%;block-size:100%;object-fit:cover}
.split-layout .split-body{min-inline-size:0}

/* --- feature check-list -------------------------------------------------- */
.feature-check-list{
  list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.85rem;
  max-inline-size:none;
}
/* Not a flex container: an inline <strong> lead-in must flow with the text
   that follows it, instead of becoming its own narrow flex column. The tick is
   positioned out of flow and the inline-start padding reserves its gutter. */
.feature-check-list li{
  position:relative;
  background:linear-gradient(135deg,rgba(232,179,60,.09),rgba(232,179,60,.02));
  border:1px solid var(--border-soft);
  border-inline-start:3px solid var(--accent);
  border-radius:var(--r-md);
  padding:1rem 1.2rem;
  padding-inline-start:3.3rem;
  color:var(--text-muted);line-height:1.85;
}
.feature-check-list li::before{
  content:"";position:absolute;
  inset-block-start:1.3rem;inset-inline-start:1.2rem;
  inline-size:19px;block-size:19px;border-radius:50%;
  background:
    linear-gradient(135deg,var(--accent),#D79A24);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow:0 0 0 3px rgba(232,179,60,.12);
}
.feature-check-list--plain{margin-block-start:0}

/* --- R5b image divider: a contained figure, never a full-bleed strip ----- */
.image-divider{
  display:grid;gap:1.5rem;align-items:center;margin:0;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  max-inline-size:none;
}
.image-divider .divider-card{
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-card);
  aspect-ratio:4/3;background:var(--bg-panel);
}
.image-divider .divider-card img{inline-size:100%;block-size:100%;object-fit:cover}
.image-divider .divider-aside{
  position:relative;padding-inline-start:1.25rem;
  border-inline-start:2px solid var(--border-strong);
  min-inline-size:0;
}
.image-divider .divider-aside .kicker{margin-block-end:.6rem}
.image-divider .divider-aside h3{color:var(--text);margin:0}

/* ==========================================================================
   HOMEPAGE - bespoke sections
   ========================================================================== */
.home-intro .intro-grid{
  display:grid;gap:1.5rem;align-items:start;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
}

/* game floor bento: 5 cells for 5 categories, no empty tiles */
.bento-floor{
  display:grid;gap:1.1rem;max-inline-size:none;
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.bento-tile{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--card-radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  min-block-size:206px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.35rem;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease;
}
.bento-tile img{
  position:absolute;inset:0;z-index:-2;
  inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.bento-tile::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(8,16,18,.96) 10%,rgba(8,16,18,.56) 55%,rgba(8,16,18,.2) 100%);
}
.bento-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--border-strong)}
.bento-tile:hover img{transform:scale(1.06)}
.bento-tile h3{margin:0 0 .3rem;font-size:1.15rem}
.bento-tile p{margin:0;font-size:.86rem;color:var(--text-muted);line-height:1.75}
.bento-tile--span4{grid-column:span 4;min-block-size:250px}
.bento-tile--span3{grid-column:span 3}
.bento-tile--span2{grid-column:span 2}

/* security - four-up */
.security-grid{
  display:grid;gap:1.1rem;max-inline-size:none;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.security-cell{
  position:relative;overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  padding:1.6rem 1.35rem;
  box-shadow:var(--shadow-card);
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease;
}
.security-cell::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:5px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
}
.security-cell:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.security-cell .ornament{margin-block-end:.9rem}
.security-cell h3{font-size:1.05rem;margin:0 0 .45rem}
.security-cell p{margin:0;font-size:.88rem;color:var(--text-muted)}

/* rewards bento: welcome card top-start, VIP strip spanning the bottom */
.rewards-bento{
  display:grid;gap:1.1rem;max-inline-size:none;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.rewards-welcome{
  grid-column:span 2;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(232,179,60,.14),rgba(15,139,141,.1));
  border:1px solid var(--border-strong);
  border-radius:var(--card-radius);
  padding:2rem;box-shadow:var(--shadow-card);
}
.rewards-media{
  border-radius:var(--card-radius);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-card);
  min-block-size:200px;background:var(--bg-panel);
}
.rewards-media img{inline-size:100%;block-size:100%;object-fit:cover;min-block-size:200px}
.rewards-vip{
  grid-column:1/-1;
  position:relative;overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  padding:1.75rem;box-shadow:var(--shadow-card);
  display:grid;gap:1.1rem;grid-template-columns:repeat(3,minmax(0,1fr));
}
.rewards-vip::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:5px;
  background:linear-gradient(90deg,var(--accent),var(--accent-warm) 42%,var(--brand));
}
.rewards-vip h3{font-size:1.02rem;margin:0 0 .4rem}
.rewards-vip p{margin:0;font-size:.88rem;color:var(--text-muted)}

/* support - editorial card with oversized italic watermark */
.support-card{padding:2.4rem}
.support-card .support-inner{position:relative;z-index:1}
.support-card .support-mark{
  position:absolute;inset-block-end:-.3em;inset-inline-end:.5rem;z-index:0;
  font-family:var(--font-latin);font-style:italic;font-weight:600;
  font-size:clamp(5rem,14vw,11rem);line-height:1;
  color:rgba(232,179,60,.055);pointer-events:none;letter-spacing:-.03em;
}
.support-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:1.5rem}

/* ==========================================================================
   GAME SECTION (D6) - locked folder: "square"
   Variant for this site: uniform six-up tile grid, set off from the bento above
   ========================================================================== */
.game-rail{
  max-inline-size:none;
  display:grid;
  gap:1.15rem;
  grid-template-columns:repeat(6,minmax(0,1fr));
  margin-block-start:2.75rem;
}
.game-card{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--card-radius);
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
  aspect-ratio:1/1;
  display:flex;align-items:flex-end;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease;
}
.game-card img{
  position:absolute;inset:0;z-index:-2;
  inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.game-card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(8,16,18,.94) 6%,rgba(8,16,18,.38) 48%,transparent 78%);
  opacity:0;transition:opacity .3s ease;
}
.game-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);border-color:var(--border-strong)}
.game-card:hover img{transform:scale(1.07)}
.game-card:hover::before{opacity:1}
.game-name{
  position:relative;inline-size:100%;
  padding:.7rem .8rem;
  font-family:var(--font-latin);font-size:.76rem;font-weight:500;
  color:var(--text-on-dark);line-height:1.35;
  background:linear-gradient(to top,rgba(8,16,18,.95),rgba(8,16,18,0));
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease;
}
.game-card:hover .game-name,.game-card:focus-within .game-name{opacity:1;transform:none}
@media (max-width:900px){
  .game-rail{grid-template-columns:repeat(4,minmax(0,1fr));margin-block-start:2.25rem}
}
@media (max-width:560px){
  .game-rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{display:grid;gap:.85rem;max-inline-size:none}
.faq-item{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
  max-inline-size:none;
}
.faq-item[open]{border-color:var(--border-strong);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.2rem 1.4rem;
  font-family:var(--font-heading);font-weight:700;
  font-size:1.02rem;line-height:1.95;color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";flex:0 0 auto;margin-inline-start:auto;margin-block-start:.55rem;
  inline-size:20px;block-size:20px;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%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 9h4v2h-4v4h-2v-4H7v-2h4V7h2z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf8,%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 9h4v2h-4v4h-2v-4H7v-2h4V7h2z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.faq-item[open] summary::after{transform:rotate(135deg)}
.faq-answer{padding:0 1.4rem 1.3rem;color:var(--text-muted);max-inline-size:none}

/* ==========================================================================
   PAGE META
   ========================================================================== */
.page-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-family:var(--font-latin);font-size:.82rem;color:var(--text-dim);
  margin:0 0 1.5rem;
}
.page-meta-author{color:var(--text-muted)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{margin-block-start:4rem;background:#070E10;border-block-start:1px solid var(--border)}
.footer-cta-wrap{position:relative;z-index:2;transform:translateY(-3rem)}
.footer-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--accent) 0%,#D79A24 55%,var(--accent-warm) 100%);
  border-radius:var(--r-xl);
  padding:2.5rem 2.25rem;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.9);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
  max-inline-size:none;
}
.footer-cta::after{
  content:attr(data-mark);
  position:absolute;inset-block-end:-.34em;inset-inline-end:1rem;
  font-family:var(--font-latin);font-style:italic;font-weight:600;
  font-size:clamp(5rem,15vw,12rem);line-height:1;
  color:rgba(23,17,10,.1);pointer-events:none;letter-spacing:-.03em;
}
.footer-cta-body{position:relative;z-index:1;min-inline-size:0}
.footer-cta h2{color:#17110A;margin:0 0 .5rem}
.footer-cta p{color:rgba(23,17,10,.78);margin:0}
.footer-cta .btn{position:relative;z-index:1}
.footer-cta .btn-dark{background:#0B1416;color:var(--text);box-shadow:0 10px 28px -12px rgba(0,0,0,.8)}
.footer-cta .btn-dark:hover{transform:translateY(-2px);background:#101E21}

.footer-map{
  display:grid;gap:2rem;
  grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  padding-block:0 2.5rem;
}
.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;margin:0 0 1.15rem}
.pay-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pay-pill{
  font-family:var(--font-latin);font-size:.76rem;font-weight:500;
  padding:.4rem .8rem;border-radius:var(--r-pill);
  background:rgba(236,244,244,.05);border:1px solid var(--border);
  color:var(--text-muted);
}
.footer-col h3{
  font-family:var(--font-latin);font-style:italic;font-weight:600;
  font-size:1rem;color:var(--text);margin:0 0 .5rem;
}
.footer-col .accent-bar{
  display:block;inline-size:34px;block-size:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-warm));
  margin-block-end:1rem;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.footer-col a{font-size:.9rem;color:var(--text-dim);transition:color .2s ease}
.footer-col a:hover{color:var(--accent)}

.trust-row{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  padding-block:1.4rem;border-block-start:1px solid var(--border-soft);
}
.trust-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;color:var(--text-dim);
  padding:.42rem .9rem;border-radius:var(--r-pill);
  background:rgba(236,244,244,.04);border:1px solid var(--border-soft);
}
.copyright{
  padding-block:1.25rem 2rem;border-block-start:1px solid var(--border-soft);
  font-size:.8rem;color:var(--text-dim);line-height:1.8;
}
.copyright p{margin:0 0 .4rem}

/* ==========================================================================
   404
   ========================================================================== */
.err-wrap{padding-block:5rem 3rem;text-align:center}
.err-code{
  font-family:var(--font-latin);font-style:italic;font-weight:600;
  font-size:clamp(5rem,18vw,22vw);line-height:.9;margin:0 0 1rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-warm) 45%,var(--brand));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  letter-spacing:-.04em;
}
.err-wrap .hero-actions{justify-content:center}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (max-width:1100px){
  .footer-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem}
  .bento-floor{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bento-tile--span4,.bento-tile--span3,.bento-tile--span2{grid-column:span 2}
  .security-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .primary-nav,.header-cta{display:none}
  .burger{display:flex;margin-inline-start:auto}
  .floor-grid--cols-3,.floor-grid--cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-layout,.image-divider,.home-intro .intro-grid{grid-template-columns:minmax(0,1fr)}
  .image-divider .divider-aside{padding-inline-start:0;padding-block-start:1rem;
    border-inline-start:0;border-block-start:2px solid var(--border-strong)}
  .rewards-bento{grid-template-columns:minmax(0,1fr)}
  .rewards-welcome{grid-column:span 1}
  .rewards-vip{grid-template-columns:minmax(0,1fr)}
  .section{padding-block:3rem}
}

@media (max-width:700px){
  .utility-nav{display:none}
  .header-top .container{justify-content:center}
  .footer-cta{padding:2rem 1.5rem}
  .support-card{padding:1.75rem}
}

@media (max-width:560px){
  .floor-grid--cols-2,.floor-grid--cols-3,.floor-grid--cols-4{grid-template-columns:minmax(0,1fr)}
  .bento-floor{grid-template-columns:minmax(0,1fr)}
  .bento-tile--span4,.bento-tile--span3,.bento-tile--span2{grid-column:span 1}
  .security-grid{grid-template-columns:minmax(0,1fr)}
  .footer-map{grid-template-columns:minmax(0,1fr)}
  .floor-grid--rich .card{padding:1.6rem}
  .card,.plain-card{padding:1.4rem}
  .section{padding-block:2.5rem}
}

@media (max-width:480px){
  body{font-size:.96rem}
  .hero-actions .btn{inline-size:100%}
  .stat-grid{grid-template-columns:minmax(0,1fr)}
}