/* =====================================================================
   OX GAMES — site.css  ·  CLAYMORPHIC SOFT UI re-skin
   --------------------------------------------------------------------
   Design system: "Claymorphism Narrative" (Google Stitch) — soft tactile,
   puffy/inflated 3D clay surfaces, dual-shadow convex depth, exaggerated
   corner radii, inset "carved" recesses, Plus Jakarta Sans throughout.
   BRAND OVERRIDE: blue is the dominant colour (royal blue clay), with
   casino gold as the soft secondary accent. Blue-tinted cream canvas so
   the clay components pop.
   --------------------------------------------------------------------
   SHARED CONTENT WIDTH (non-negotiable): every bounded element shares the
   same edges — max-width var(--container) (1200px) and 1.5rem (24px)
   horizontal padding. Cards/lists/grids fill their container.
   ===================================================================== */

:root{
  /* Colors — blue dominant, gold secondary, clay neutrals */
  --brand:        #2a64e6;   /* royal blue (primary clay) */
  --brand-dark:   #14347e;   /* deep blue */
  --brand-light:  #7aa0ff;   /* light blue highlight */
  --accent:       #f6b41a;   /* casino gold (secondary) */
  --accent-warm:  #f59016;
  --accent-soft:  #ffe6ab;

  --bg:           #e7ecfa;   /* canvas — soft blue-lavender clay base */
  --bg-card:      #eef2fd;   /* clay surface */
  --bg-elevated:  #f6f8ff;
  --bg-panel:     #14347e;   /* deep blue clay (footer / dark panels) */

  --text:         #1a2348;
  --text-muted:   #525c82;
  --text-dim:     #8b93b4;
  --text-on-dark: #eef3ff;

  --border:        rgba(255,255,255,.7);
  --border-strong: rgba(30,48,110,.12);
  --border-soft:   rgba(255,255,255,.55);

  /* Typography — Plus Jakarta Sans only */
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Radius — exaggerated, no sharp corners */
  --r-sm: 0.75rem; --r-md: 1.25rem; --r-lg: 1.75rem; --r-xl: 2rem; --r-pill: 999px;
  --card-radius: 1.75rem;     /* 28px */
  --btn-radius: 1.5rem;       /* 24px */

  /* Dual-shadow clay model */
  --clay:        10px 10px 24px rgba(30,48,110,.16), -8px -8px 18px rgba(255,255,255,.92);
  --clay-sm:     6px 6px 14px rgba(30,48,110,.14),  -4px -4px 10px rgba(255,255,255,.88);
  --clay-hover:  16px 16px 36px rgba(30,48,110,.22), -10px -10px 24px rgba(255,255,255,.96);
  --clay-inset:  inset 5px 5px 12px rgba(30,48,110,.17), inset -5px -5px 12px rgba(255,255,255,.92);
  --clay-blue:   10px 10px 26px rgba(15,40,110,.40), -7px -7px 18px rgba(120,160,255,.45);
  --clay-blue-hover: 16px 16px 38px rgba(15,40,110,.48), -9px -9px 22px rgba(120,160,255,.55);
  --clay-gold:   10px 10px 24px rgba(180,120,10,.34), -7px -7px 16px rgba(255,236,180,.8);
  --inner-glow:  inset 1.5px 1.5px 0 rgba(255,255,255,.85);

  /* legacy shadow aliases (so any leftover refs still resolve) */
  --shadow-soft: var(--clay-sm);
  --shadow-card: var(--clay);
  --shadow-card-hover: var(--clay-hover);
  --shadow-cta: var(--clay-blue);

  /* Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --content-pad: 1.5rem;
  --header-top-h: 2.25rem;
  --header-main-h: 4.75rem;
  --header-h: calc(var(--header-top-h) + var(--header-main-h));

  --grad-blue:  linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 55%, var(--brand-dark) 110%);
  --grad-gold:  linear-gradient(135deg, #ffd45e 0%, var(--accent) 55%, var(--accent-warm) 100%);
}

/* ---------- Reset & base ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  font-weight:400;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(55% 45% at 8% -5%,  rgba(42,100,230,.16), transparent 60%),
    radial-gradient(50% 42% at 100% 4%, rgba(246,180,26,.14), transparent 60%),
    radial-gradient(55% 45% at 100% 100%, rgba(42,100,230,.10), transparent 60%);
}
img{ max-width:100%; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-dark); }
ul,ol{ margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-heading); font-weight:800; line-height:1.12; color:var(--brand-dark); margin:0; letter-spacing:-.02em; }
h1{ font-size:clamp(2.2rem,5vw,3.4rem); }
h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); letter-spacing:-.015em; }
h3{ font-size:clamp(1.12rem,1.8vw,1.35rem); font-weight:700; }
p{ margin:0 0 1rem; }
:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:8px; }

/* ---------- Shared container ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--content-pad);
}

/* ---------- Buttons (puffy clay) ---------- */
.btn-primary,.btn-secondary,.btn-ghost,.btn-cta-gold{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:700; font-size:1rem;
  padding:.9rem 1.7rem; border-radius:var(--btn-radius);
  cursor:pointer; border:0; line-height:1; white-space:nowrap;
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
}
.btn-primary{ background:var(--grad-blue); color:#fff; box-shadow:var(--clay-blue), var(--inner-glow); }
.btn-primary:hover{ color:#fff; transform:translateY(-3px); box-shadow:var(--clay-blue-hover), var(--inner-glow); }
.btn-primary:active{ transform:translateY(0); box-shadow:var(--clay-inset); }
.btn-secondary,.btn-cta-gold{ background:var(--grad-gold); color:var(--brand-dark); box-shadow:var(--clay-gold), var(--inner-glow); }
.btn-secondary:hover,.btn-cta-gold:hover{ color:var(--brand-dark); transform:translateY(-3px); }
.btn-secondary:active,.btn-cta-gold:active{ transform:translateY(0); box-shadow:var(--clay-inset); }
.btn-ghost{ background:var(--bg-card); color:var(--brand-dark); box-shadow:var(--clay-sm), var(--inner-glow); }
.btn-ghost:hover{ color:var(--brand); transform:translateY(-3px); box-shadow:var(--clay), var(--inner-glow); }
.btn-ghost:active{ transform:translateY(0); box-shadow:var(--clay-inset); }

/* ---------- Kicker / eyebrow (clay chip) ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:700; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.14em; color:var(--brand-dark);
  background:var(--bg-card); padding:.45rem .9rem; border-radius:var(--r-pill);
  box-shadow:var(--clay-sm), var(--inner-glow); margin-bottom:1.1rem;
}
.kicker::before{ content:"✦"; color:var(--accent); font-size:.95em; }
.kicker--on-dark{ color:var(--accent-soft); background:rgba(255,255,255,.08); box-shadow:none; }

/* ============================================================
   HEADER — sticky 2-row clay
   ============================================================ */
.site-header{ position:sticky; top:0; z-index:1000; }
.header-top{
  background:var(--grad-blue); color:rgba(238,243,255,.92);
  font-size:.8rem; transition:height .25s ease, opacity .2s ease;
}
.header-top .container{ display:flex; align-items:center; justify-content:space-between; min-height:var(--header-top-h); gap:1rem; }
.trust-line{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; letter-spacing:.02em; }
.trust-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(246,180,26,.6); animation:pulse 2.2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)} 70%{box-shadow:0 0 0 7px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} }
.util-nav{ display:flex; gap:1.25rem; }
.util-nav a{ color:rgba(238,243,255,.9); font-weight:600; }
.util-nav a:hover{ color:#fff; text-decoration:underline; }

.header-main{ background:var(--bg); transition:box-shadow .25s ease, background .25s ease; }
.header-main .container{ display:flex; align-items:center; gap:1.5rem; min-height:var(--header-main-h); }
.brand-logo{ display:inline-flex; align-items:center; flex-shrink:0; }
.brand-logo img{ height:58px; width:auto; object-fit:contain; border-radius:18px; box-shadow:var(--clay-sm); transition:height .25s ease; }
.primary-nav{ display:flex; align-items:center; gap:.3rem; margin-left:.4rem; position:relative; flex:1; }
.primary-nav a{
  position:relative; color:var(--text); font-weight:600; font-size:.95rem;
  padding:.55rem .85rem; border-radius:var(--r-pill); transition:color .18s ease, box-shadow .2s ease, background .2s ease;
}
.primary-nav a:hover{ color:var(--brand-dark); background:var(--bg-card); box-shadow:var(--clay-sm); }
.primary-nav a.active{ color:var(--brand-dark); background:var(--bg-card); box-shadow:var(--clay-inset); }
.nav-indicator{ display:none; } /* clay nav uses pill highlight instead of underline */
.header-cta{ margin-left:auto; display:flex; align-items:center; gap:.75rem; }
.header-cta .btn-primary{ padding:.72rem 1.35rem; }

.is-scrolled .header-top{ height:0; min-height:0; padding-block:0; overflow:hidden; opacity:0; }
.is-scrolled .header-main{ background:var(--bg-card); box-shadow:0 12px 30px -14px rgba(30,48,110,.35); }
.is-scrolled .brand-logo img{ height:50px; }

/* burger (clay) */
.nav-toggle{ display:none; margin-left:auto; width:48px; height:48px; border:0; background:var(--bg-card); border-radius:var(--r-md); cursor:pointer; position:relative; box-shadow:var(--clay-sm), var(--inner-glow); }
.nav-toggle:active{ box-shadow:var(--clay-inset); }
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:50%; top:50%; width:22px; height:2.5px; background:var(--brand-dark); border-radius:3px;
  transform:translate(-50%,-50%); transition:.25s ease;
}
.nav-toggle span::before{ transform:translate(-50%,-7px); }
.nav-toggle span::after{  transform:translate(-50%,7px); }
.nav-open .nav-toggle span{ background:transparent; }
.nav-open .nav-toggle span::before{ transform:translate(-50%,0) rotate(45deg); }
.nav-open .nav-toggle span::after{ transform:translate(-50%,0) rotate(-45deg); }

/* ============================================================
   SECTIONS
   ============================================================ */
main{ display:block; }
/* 40px top + 40px bottom => 80px gap between adjacent sections */
.section{ padding-block:clamp(1.5rem,4vw,2.5rem); position:relative; }
.section--tint{ background:radial-gradient(70% 60% at 50% 0%, rgba(42,100,230,.06), transparent 70%); }
.section-head{ max-width:760px; margin:0 0 2.4rem; }
.section-head.is-centered{ margin-inline:auto; text-align:center; }
.section-head.is-centered .kicker{ margin-inline:auto; }
.section-head .kicker{ margin-bottom:.95rem; }
.section-head p{ color:var(--text-muted); font-size:1.06rem; margin-top:.8rem; margin-bottom:0; }

/* ---------- Universal clay card ---------- */
.card{
  position:relative; background:var(--bg-card); border-radius:var(--card-radius);
  padding:2rem; overflow:hidden; box-shadow:var(--clay), var(--inner-glow);
  transition:transform .22s ease, box-shadow .25s ease;
}
.card .watermark{
  position:absolute; right:.6rem; bottom:-.2rem; font-family:var(--font-heading); font-style:italic;
  font-weight:800; font-size:4.5rem; line-height:1; color:rgba(42,100,230,.07);
  pointer-events:none; transition:color .3s ease; user-select:none;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--clay-hover), var(--inner-glow); }
.card:hover .watermark{ color:rgba(246,180,26,.16); }
.card h3{ margin-bottom:.6rem; }
.card p:last-child{ margin-bottom:0; }

/* ---------- intro-block ---------- */
.intro-block{
  width:100%; background:var(--bg-card); border-radius:var(--r-xl);
  padding:clamp(1.7rem,3vw,2.5rem) clamp(1.7rem,3vw,2.7rem);
  box-shadow:var(--clay), var(--inner-glow); position:relative;
}
.intro-block::before{ content:""; position:absolute; left:1.4rem; top:1.7rem; bottom:1.7rem; width:6px; border-radius:var(--r-pill); background:var(--grad-gold); box-shadow:var(--clay-sm); }
.intro-block p{ font-size:1.12rem; color:var(--text-muted); padding-left:1.4rem; }
.intro-block p:first-child{ font-size:1.22rem; color:var(--text); font-weight:600; }
.intro-block p:last-child{ margin-bottom:0; }

/* ---------- plain-card ---------- */
.plain-card{
  width:100%; background:var(--bg-card); border-radius:var(--r-xl);
  box-shadow:var(--clay), var(--inner-glow);
  padding:clamp(1.9rem,3.5vw,3rem); position:relative; overflow:hidden;
}
.plain-card > :last-child{ margin-bottom:0; }
.plain-card .lead-line{ font-size:1.15rem; color:var(--text); font-weight:600; }

/* ---------- floor-grid (column variants) ---------- */
.floor-grid{ display:grid; gap:1.5rem; width:100%; }
.floor-grid--cols-1{ grid-template-columns: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--rich (clay tiles + carved sub-cards) ---------- */
.floor-grid--rich{ width:100%; display:grid; gap:1.5rem; grid-template-columns:1fr; }
.rich-tile{
  position:relative; background:var(--bg-card); border-radius:var(--r-xl);
  padding:2.4rem; box-shadow:var(--clay), var(--inner-glow); overflow:hidden;
}
.rich-tile > h3{ margin-bottom:.85rem; }
.rich-tile .watermark{
  position:absolute; right:.7rem; bottom:-.2rem; font-family:var(--font-heading); font-style:italic;
  font-size:4.2rem; font-weight:800; line-height:1; color:rgba(42,100,230,.06); pointer-events:none; user-select:none;
}
.rich-tile h4{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:.16em;
  font-size:.8rem; font-weight:800; color:var(--brand);
  margin:1.8rem 0 1rem; display:inline-block;
  background:var(--bg-card); padding:.5rem .9rem; border-radius:var(--r-pill); box-shadow:var(--clay-sm);
}
.rich-tile h4:first-of-type{ margin-top:1.1rem; }
.rich-sub{ list-style:none; display:grid; gap:.8rem; margin:0; }
.rich-sub li{
  position:relative; background:var(--bg); border-radius:var(--r-md);
  padding:1rem 1.2rem 1rem 1.5rem; box-shadow:var(--clay-inset); /* carved-in clay */
  color:var(--text-muted);
}
.rich-sub li::before{
  content:""; position:absolute; left:.7rem; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(246,180,26,.18);
}

/* ---------- bento-floor (homepage signature) ---------- */
.bento-floor{ display:grid; gap:1.5rem; width:100%; grid-template-columns:repeat(6,1fr); }
.bento-tile{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:var(--bg-card); box-shadow:var(--clay), var(--inner-glow);
  padding:1.9rem; transition:transform .22s ease, box-shadow .25s ease;
}
.bento-tile:hover{ transform:translateY(-6px); box-shadow:var(--clay-hover), var(--inner-glow); }
.bento-tile .tile-tag{ display:inline-block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--brand); background:var(--bg); padding:.35rem .7rem; border-radius:var(--r-pill); box-shadow:var(--clay-inset); margin-bottom:.6rem; }
.bento-tile h3{ margin-bottom:.55rem; }
.bento-tile .watermark{ position:absolute; right:.5rem; bottom:-.4rem; font-family:var(--font-heading); font-style:italic; font-size:3.8rem; font-weight:800; color:rgba(42,100,230,.07); pointer-events:none; user-select:none; }
.bento-tile span.suit{ font-size:1.5rem; }
.bento-tile--feature{ color:#fff; background:var(--grad-blue); box-shadow:var(--clay-blue), var(--inner-glow); }
.bento-tile--feature h3{ color:#fff; }
.bento-tile--feature .tile-tag{ color:#fff; background:rgba(255,255,255,.16); box-shadow:none; }
.bento-tile--feature .watermark{ color:rgba(255,255,255,.14); }

/* ---------- security-grid (blue clay 4-up) ---------- */
.security-grid{ display:grid; gap:1.5rem; width:100%; grid-template-columns:repeat(4,minmax(0,1fr)); }
.deco-tile{
  position:relative; text-align:center; background:var(--grad-blue); color:var(--text-on-dark);
  border-radius:var(--r-xl); padding:2.1rem 1.5rem; overflow:hidden;
  box-shadow:var(--clay-blue), var(--inner-glow); transition:transform .22s ease, box-shadow .25s ease;
}
.deco-tile:hover{ transform:translateY(-5px); box-shadow:var(--clay-blue-hover), var(--inner-glow); }
.deco-tile .deco-num{ display:inline-block; font-family:var(--font-heading); font-style:italic; font-weight:800; font-size:1.05rem; color:var(--accent-soft); }
.deco-tile h3{ color:#fff; font-size:1.16rem; margin:.7rem 0 .55rem; }
.deco-tile p{ color:rgba(238,243,255,.85); font-size:.95rem; margin:0; }
.deco-icon{ font-size:1.7rem; width:3.4rem; height:3.4rem; margin:0 auto .4rem; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.12); box-shadow:inset 2px 2px 6px rgba(0,0,0,.2), inset -2px -2px 6px rgba(255,255,255,.18); }

/* ---------- rewards-bento ---------- */
.rewards-bento{ display:grid; gap:1.5rem; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); }
.reward-tile{
  position:relative; background:var(--bg-card); border-radius:var(--r-xl);
  padding:1.9rem; box-shadow:var(--clay), var(--inner-glow); overflow:hidden;
  transition:transform .22s ease, box-shadow .25s ease;
}
.reward-tile:hover{ transform:translateY(-6px); box-shadow:var(--clay-hover), var(--inner-glow); }
.reward-tile h3{ margin-bottom:.5rem; }
.reward-tile--welcome{ background:var(--grad-gold); color:var(--brand-dark); box-shadow:var(--clay-gold), var(--inner-glow); }
.reward-tile--welcome h3{ color:var(--brand-dark); }
.reward-tile--vip{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; background:var(--grad-blue); color:#fff; box-shadow:var(--clay-blue), var(--inner-glow);
}
.reward-tile--vip h3{ color:#fff; }
.reward-tile--vip p{ color:rgba(238,243,255,.85); max-width:60ch; margin:0; }

/* ---------- support-card (deep blue clay) ---------- */
.support-card{
  position:relative; width:100%; background:var(--grad-blue); color:var(--text-on-dark);
  border-radius:var(--r-xl); padding:clamp(2.4rem,5vw,4rem); overflow:hidden; text-align:center;
  box-shadow:var(--clay-blue), var(--inner-glow);
}
.support-card::after{
  content:"Ox"; position:absolute; right:.4rem; bottom:-3rem; font-family:var(--font-heading);
  font-style:italic; font-weight:800; font-size:clamp(8rem,22vw,15rem); line-height:1;
  color:rgba(255,255,255,.08); pointer-events:none; user-select:none;
}
.support-card .kicker{ color:#fff; background:rgba(255,255,255,.14); box-shadow:none; }
.support-card h2{ color:#fff; position:relative; }
.support-card p{ color:rgba(238,243,255,.88); position:relative; max-width:62ch; margin-inline:auto; }
.support-card .hero-actions{ justify-content:center; position:relative; }

/* ---------- split-layout ---------- */
.split-layout{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.2rem; width:100%; align-items:center; }
.split-layout.is-reverse .split-media{ order:2; }
.split-media{
  position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--clay), var(--inner-glow);
  aspect-ratio:4/3; background:var(--grad-blue);
}
.split-media img{ width:100%; height:100%; object-fit:cover; }
.split-media .media-fallback{
  position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.5);
  font-family:var(--font-heading); font-style:italic; font-weight:800; font-size:3rem;
}
.split-body > :last-child{ margin-bottom:0; }

/* ---------- feature-check-list ---------- */
.feature-check-list{
  width:100%; list-style:none; display:grid; gap:.95rem;
  background:var(--bg-card); border-radius:var(--r-xl);
  padding:clamp(1.7rem,3vw,2.3rem); box-shadow:var(--clay), var(--inner-glow);
}
.feature-check-list li{ position:relative; padding-left:2.7rem; color:var(--text); font-weight:600; }
.feature-check-list li::before{
  content:"✓"; position:absolute; left:0; top:-2px; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--grad-gold); color:var(--brand-dark); display:grid; place-items:center;
  font-weight:800; font-size:.95rem; box-shadow:var(--clay-sm), var(--inner-glow);
}
.feature-check-list--plain{ background:var(--bg-card); }

/* generic content list */
.content-list{ list-style:none; display:grid; gap:.6rem; margin:1rem 0; }
.content-list li{ position:relative; padding-left:1.7rem; color:var(--text-muted); }
.content-list li::before{ content:"✦"; position:absolute; left:0; top:.05em; color:var(--accent); font-size:.85em; }

/* numbered step tiles (clay) */
.step-grid{ display:grid; gap:1.4rem; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); }
.step-tile{
  position:relative; background:var(--bg-card); border-radius:var(--r-xl);
  padding:1.9rem; box-shadow:var(--clay), var(--inner-glow); transition:transform .2s ease, box-shadow .25s ease;
}
.step-tile:hover{ transform:translateY(-5px); box-shadow:var(--clay-hover), var(--inner-glow); }
.step-tile .step-num{
  display:inline-grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:50%;
  background:var(--grad-blue); color:#fff; font-family:var(--font-heading); font-weight:800; font-size:1.1rem;
  margin-bottom:.9rem; box-shadow:var(--clay-blue), var(--inner-glow);
}
.step-tile h3{ font-size:1.1rem; margin-bottom:.45rem; }
.step-tile p{ margin:0; color:var(--text-muted); font-size:.97rem; }

/* ============================================================
   IMAGE DIVIDER — contained clay figure (full container width)
   ============================================================ */
.image-divider{
  width:100%; display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; align-items:stretch;
}
.image-divider .img-card{
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--clay), var(--inner-glow);
  aspect-ratio:4/3; background:var(--grad-blue);
}
.image-divider .img-card img{ width:100%; height:100%; object-fit:cover; }
.image-divider .img-aside{
  display:flex; flex-direction:column; justify-content:center; gap:.6rem;
  background:var(--bg-card); border-radius:var(--r-xl); padding:2rem;
  position:relative; overflow:hidden; box-shadow:var(--clay), var(--inner-glow);
}
.image-divider .img-aside .div-num{ display:inline-grid; place-items:center; width:3rem; height:3rem; border-radius:50%; background:var(--bg); box-shadow:var(--clay-inset); }
.image-divider .img-aside .div-num::before{
  content:""; font-family:var(--font-heading); font-style:italic; font-weight:800; font-size:1.4rem; color:var(--brand);
}
.image-divider .img-aside .div-kicker{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--brand); }
.image-divider .img-aside h3{ font-size:1.35rem; }

/* ============================================================
   HERO — asymmetric, clay accents
   ============================================================ */
.hero{ position:relative; overflow:hidden; padding-block:clamp(3rem,6vw,5.5rem) clamp(4rem,7vw,6.5rem); }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.14; }
.hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(231,236,250,.7),var(--bg)); }
.hero .container,.page-hero .container{ position:relative; z-index:1; }
.hero-inner{ display:grid; grid-template-columns:1.08fr .92fr; gap:2.5rem; align-items:center; }
.hero-content h1{ margin-bottom:1.1rem; }
.hero-content h1 .highlight{ position:relative; color:var(--brand); white-space:nowrap; }
.hero-content h1 .highlight::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:.06em; height:.34em; z-index:-1;
  background:var(--grad-gold); border-radius:var(--r-pill); box-shadow:var(--clay-sm); opacity:.9;
}
.hero-content .lead{ font-size:1.18rem; color:var(--text-muted); max-width:54ch; font-weight:500; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.7rem 0 1.5rem; }
.hero-proof{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  background:var(--bg-card); border-radius:var(--r-pill);
  padding:.55rem 1rem .55rem .65rem; box-shadow:var(--clay-sm), var(--inner-glow); width:max-content; max-width:100%;
}
.hero-proof .stack{ display:inline-flex; }
.hero-proof .chip{ width:32px; height:32px; border-radius:50%; border:3px solid var(--bg-card); margin-left:-12px;
  background:var(--grad-gold); box-shadow:var(--clay-sm); }
.hero-proof .chip:first-child{ margin-left:0; background:var(--grad-blue); }
.hero-proof .chip:nth-child(3){ background:linear-gradient(135deg,#ff8a8a,#e23b3b); }
.hero-proof .text{ font-size:.92rem; color:var(--text-muted); }
.hero-proof .text strong{ color:var(--brand-dark); }

/* hero art — clay-framed showcase image */
.hero-art{ position:relative; min-height:400px; }
.hero-art-figure{
  position:absolute; inset:0; margin:0; z-index:1; overflow:hidden;
  border-radius:var(--r-xl); background:var(--grad-blue);
  box-shadow:var(--clay-hover), var(--inner-glow);
}
.hero-art-figure img{ width:100%; height:100%; object-fit:cover; }
.hero-art-card{
  position:absolute; width:144px; height:200px; border-radius:24px; background:var(--bg-elevated);
  box-shadow:var(--clay-hover), var(--inner-glow);
  display:grid; place-items:center; font-family:var(--font-heading); font-size:3.6rem; font-weight:800; color:var(--brand-dark);
}
.hero-art-card::before,.hero-art-card::after{
  content:attr(data-corner); position:absolute; font-family:var(--font-body); font-weight:800; font-size:.9rem;
}
.hero-art-card::before{ top:10px; left:12px; }
.hero-art-card::after{ bottom:10px; right:12px; transform:rotate(180deg); }
.hero-art-card--c1{ left:6%;  top:18%; transform:rotate(-12deg); z-index:2; color:var(--brand-dark); }
.hero-art-card--c2{ left:34%; top:6%;  transform:rotate(3deg);  z-index:3; color:#e23b3b; }
.hero-art-card--c3{ left:60%; top:22%; transform:rotate(14deg); z-index:2; color:var(--accent-warm); }
.hero-art-card:hover{ transform:translateY(-8px) rotate(0deg); transition:transform .3s ease; z-index:5; }
.hero-art-chip{
  position:absolute; right:6%; bottom:8%; width:136px; height:136px; border-radius:50%;
  background:var(--grad-gold); color:var(--brand-dark); display:grid; place-content:center; text-align:center;
  box-shadow:var(--clay-gold), var(--inner-glow); z-index:4;
}
.hero-art-chip .num{ font-family:var(--font-heading); font-weight:800; font-size:1.9rem; line-height:1; }
.hero-art-chip .lbl{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.hero-art-spark{ position:absolute; z-index:3; color:var(--accent); opacity:.85; animation:twinkle 3s ease-in-out infinite; }
.hero-art-spark--a{ left:0; top:4%; font-size:1.5rem; }
.hero-art-spark--b{ right:2%; top:40%; font-size:1.1rem; color:var(--brand); animation-delay:.8s; }
.hero-art-spark--c{ left:40%; bottom:2%; font-size:1.3rem; animation-delay:1.4s; }
@keyframes twinkle{ 0%,100%{ transform:scale(1); opacity:.4 } 50%{ transform:scale(1.3); opacity:.95 } }

/* ---------- hero-bridge stat strip (clay panel, carved tiles) ---------- */
.hero-bridge{ position:relative; z-index:5; margin-top:-3.25rem; }
.hero-stats-strip{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem;
  background:var(--bg-card); border-radius:var(--r-xl); padding:1.2rem;
  box-shadow:var(--clay), var(--inner-glow);
}
.stat-tile{ background:var(--bg); border-radius:var(--r-lg); padding:1.4rem 1rem; text-align:center; box-shadow:var(--clay-inset); }
.stat-tile .stat-num{ font-family:var(--font-heading); font-weight:800; font-size:1.9rem; color:var(--brand); line-height:1; letter-spacing:-.02em; }
.stat-tile .stat-num .unit{ color:var(--accent-warm); }
.stat-tile .stat-label{ font-size:.82rem; color:var(--text-muted); margin-top:.45rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{ position:relative; overflow:hidden; padding-block:clamp(2.6rem,5vw,4rem) clamp(2.4rem,4vw,3.2rem); }
.page-hero .hero-bg img{ opacity:.12; }
.breadcrumb{ font-size:.85rem; color:var(--text-muted); margin-bottom:1rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.breadcrumb a{ color:var(--brand); font-weight:700; }
.breadcrumb span[aria-current]{ color:var(--text-muted); }
.page-hero h1{ max-width:18ch; }
.page-hero .page-sub{ font-size:1.14rem; color:var(--text-muted); max-width:62ch; margin-top:1rem; font-weight:500; }
.page-meta{ font-size:.85rem; color:var(--text-dim); margin-top:1.1rem; display:inline-flex; gap:.5rem; flex-wrap:wrap; align-items:center;
  background:var(--bg-card); padding:.5rem 1rem; border-radius:var(--r-pill); box-shadow:var(--clay-sm); }
.page-meta .page-meta-author{ font-weight:700; color:var(--brand-dark); }
.page-meta time{ color:var(--text-dim); }

/* ============================================================
   FAQ accordion (clay)
   ============================================================ */
.faq-section{ padding-block:clamp(1.5rem,4vw,2.5rem); }
.faq-list{ width:100%; display:grid; gap:1.1rem; }
.faq-item{
  background:var(--bg-card); border-radius:var(--r-lg);
  box-shadow:var(--clay-sm), var(--inner-glow); overflow:hidden; transition:box-shadow .25s ease;
}
.faq-item[open]{ box-shadow:var(--clay), var(--inner-glow); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.3rem 1.6rem; font-family:var(--font-heading); font-weight:700; font-size:1.1rem; color:var(--brand-dark);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-icon{ flex-shrink:0; width:2.2rem; height:2.2rem; border-radius:50%; background:var(--bg); color:var(--brand-dark);
  display:grid; place-items:center; font-weight:800; box-shadow:var(--clay-sm); transition:transform .25s ease, box-shadow .2s ease, background .2s ease; }
.faq-icon::before{ content:"+"; font-size:1.3rem; line-height:1; }
.faq-item[open] .faq-icon{ transform:rotate(135deg); background:var(--grad-gold); box-shadow:var(--clay-inset); }
.faq-answer{ padding:0 1.6rem 1.5rem; }
.faq-answer p{ margin:0; color:var(--text-muted); }

/* ============================================================
   FOOTER — deep blue clay
   ============================================================ */
.site-footer{ position:relative; margin-top:clamp(1.5rem,4vw,2.5rem); background:var(--bg-panel); color:var(--text-on-dark); }
.footer-cta{ position:relative; margin-top:-2.5rem; z-index:2; }
.footer-cta-card{
  position:relative; overflow:hidden; background:var(--grad-gold); color:var(--brand-dark);
  border-radius:var(--r-xl); padding:clamp(2rem,4vw,3rem); display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:1.5rem; box-shadow:var(--clay-gold), var(--inner-glow);
}
.footer-cta-card::after{
  content:"Ox Games"; position:absolute; right:-.5rem; bottom:-2.6rem; font-family:var(--font-heading);
  font-style:italic; font-weight:800; font-size:clamp(5rem,13vw,9rem); color:rgba(20,52,126,.10); pointer-events:none; user-select:none; white-space:nowrap;
}
.footer-cta-card h2{ color:var(--brand-dark); position:relative; margin-bottom:.3rem; }
.footer-cta-card p{ color:rgba(20,52,126,.82); position:relative; margin:0; }
.footer-cta-card .hero-actions{ margin:0; position:relative; }
.footer-cta-card .btn-ghost{ background:rgba(255,255,255,.25); color:var(--brand-dark); }

.footer-main{ padding-block:clamp(2.8rem,5vw,4rem) 1.5rem; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem; width:100%; }
.footer-brand .brand-logo img{ height:74px; border-radius:20px; box-shadow:0 10px 22px rgba(0,0,0,.35); }
.footer-brand p{ color:rgba(238,243,255,.78); font-size:.95rem; margin-top:1rem; max-width:34ch; }
.pay-pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.pay-pills span{ font-size:.72rem; font-weight:700; letter-spacing:.04em; padding:.4rem .8rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.08); color:rgba(238,243,255,.9); box-shadow:inset 2px 2px 5px rgba(0,0,0,.25), inset -2px -2px 5px rgba(255,255,255,.06); }
.footer-col h4{ font-family:var(--font-heading); font-weight:800; font-size:1.1rem; color:#fff;
  margin-bottom:1.1rem; position:relative; padding-bottom:.6rem; }
.footer-col h4::after{ content:""; position:absolute; left:0; bottom:0; width:36px; height:4px; border-radius:var(--r-pill); background:var(--grad-gold); }
.footer-col ul{ list-style:none; display:grid; gap:.6rem; }
.footer-col a{ color:rgba(238,243,255,.78); font-size:.95rem; }
.footer-col a:hover{ color:var(--accent-soft); }
.footer-trust{ display:flex; flex-wrap:wrap; gap:.7rem; padding:1.5rem 0; border-top:1px solid rgba(255,255,255,.1); }
.footer-trust span{ font-size:.78rem; font-weight:700; letter-spacing:.04em; padding:.5rem .95rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.06); color:rgba(238,243,255,.88); box-shadow:inset 2px 2px 5px rgba(0,0,0,.22), inset -2px -2px 5px rgba(255,255,255,.06); }
.footer-bottom{ padding:1.3rem 0 2rem; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; font-size:.83rem; color:rgba(238,243,255,.6); }
.footer-bottom .rg-disclaimer{ font-style:italic; }

/* ============================================================
   404
   ============================================================ */
.err-404{ text-align:center; padding-block:clamp(3rem,8vw,7rem); }
.err-404 .glyph{
  font-family:var(--font-heading); font-style:italic; font-weight:800; font-size:clamp(8rem,22vw,17rem);
  line-height:.9; background:var(--grad-blue); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.err-404 p{ color:var(--text-muted); font-size:1.15rem; max-width:46ch; margin-inline:auto; }
.err-404 .hero-actions{ justify-content:center; }

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================
   Lightbox
   ============================================================ */
.lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(20,52,126,.92); display:none; place-items:center; padding:2rem; }
.lightbox.is-open{ display:grid; }
.lightbox img{ max-width:90vw; max-height:85vh; border-radius:var(--r-xl); box-shadow:0 30px 60px rgba(0,0,0,.5); }
.lightbox-close{ position:absolute; top:1.3rem; right:1.6rem; background:none; border:0; color:#fff; font-size:2.2rem; cursor:pointer; line-height:1; }

/* ============================================================
   Mobile nav overlay (blue clay)
   ============================================================ */
.mobile-overlay{
  position:fixed; inset:0; z-index:999; background:var(--grad-blue);
  display:flex; flex-direction:column; gap:.4rem; padding:6.5rem 2rem 2rem; transform:translateY(-100%);
  transition:transform .35s cubic-bezier(.7,0,.2,1); overflow-y:auto;
}
.nav-open .mobile-overlay{ transform:translateY(0); }
.mobile-overlay a{ color:var(--text-on-dark); font-family:var(--font-heading); font-weight:700; font-size:1.4rem; padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.mobile-overlay a:hover{ color:var(--accent-soft); }
.mobile-overlay .btn-primary{ margin-top:1.3rem; justify-content:center; background:var(--bg-card); color:var(--brand-dark); box-shadow:var(--clay-sm), var(--inner-glow); }
.mobile-overlay .mobile-util{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:1rem; }
.mobile-overlay .mobile-util a{ font-family:var(--font-body); font-weight:600; font-size:.95rem; border:0; padding:0; color:rgba(238,243,255,.75); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .hero-inner{ grid-template-columns:1.15fr .85fr; gap:1.5rem; }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .footer-col--last{ grid-column:span 1; }
}
@media (max-width:980px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .primary-nav,.header-cta{ display:none; }
  .nav-toggle{ display:block; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-art{ min-height:300px; order:-1; }
  .floor-grid--cols-3,.floor-grid--cols-4{ grid-template-columns:repeat(2,1fr); }
  .security-grid{ grid-template-columns:repeat(2,1fr); }
  .step-grid{ grid-template-columns:repeat(2,1fr); }
  .bento-tile--feature,.bento-tile{ grid-column:span 3 !important; }
  .bento-floor{ grid-template-columns:repeat(6,1fr); }
  .rewards-bento{ grid-template-columns:repeat(2,1fr); }
  .split-layout{ grid-template-columns:1fr; }
  .split-layout.is-reverse .split-media{ order:0; }
  .image-divider{ grid-template-columns:1fr; }
  .hero-stats-strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px){
  body{ font-size:16px; }
  .section{ padding-block:2rem; }
  .bento-tile,.bento-tile--feature{ grid-column:span 6 !important; }
  .reward-tile--welcome{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .floor-grid--cols-2,.floor-grid--cols-3,.floor-grid--cols-4{ grid-template-columns:1fr; }
  .security-grid,.step-grid,.rewards-bento{ grid-template-columns:1fr; }
  .hero-stats-strip{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-cta-card{ flex-direction:column; align-items:flex-start; }
  .hero-actions{ width:100%; }
  .hero-actions .btn-primary,.hero-actions .btn-secondary{ flex:1; justify-content:center; }
}
@media (max-width:480px){
  .header-cta .btn-primary{ display:none; }
  .hero-art{ transform:scale(.85); }
  .util-nav{ gap:.85rem; font-size:.74rem; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}