/* ==========================================================================
   Stake Bet India - futsaluruguay.com
   Palette locked to the client design reference (atmanandam.org.in).
   Signature: the rotor tick + the corner cut. Hero: passepartout window.
   ========================================================================== */

:root{
  /* --- brand ------------------------------------------------------------ */
  --brand:#1475e1;
  --brand-dark:#0d57ab;
  --brand-light:#4f9bf0;

  --accent:#f9cb16;
  --accent-warm:#ffd94f;
  --accent-soft:rgba(249,203,22,.13);

  /* --- surfaces --------------------------------------------------------- */
  --bg:#1a2c38;
  --bg-card:#0f212e;
  --bg-elevated:#213743;
  --bg-panel:#12192c;
  --bg-deep:#071d2a;

  /* --- type ------------------------------------------------------------- */
  --text:#d7e0ea;
  --text-muted:#b1bad3;
  --text-dim:#7685ad;
  --text-on-dark:#ffffff;

  /* --- lines ------------------------------------------------------------ */
  --border:#2f4553;
  --border-strong:#3f5c6e;
  --border-soft:rgba(47,69,83,.55);

  /* --- fonts ------------------------------------------------------------ */
  --font-body:"Spline Sans","Segoe UI",system-ui,sans-serif;
  --font-heading:"Source Serif 4",Georgia,"Times New Roman",serif;

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

  /* --- shadows ---------------------------------------------------------- */
  --shadow-soft:0 2px 10px rgba(3,10,16,.34);
  --shadow-card:0 10px 26px rgba(3,10,16,.42),0 2px 6px rgba(3,10,16,.3);
  --shadow-card-hover:0 20px 46px rgba(3,10,16,.55),0 4px 12px rgba(3,10,16,.38);
  --shadow-cta:0 10px 24px rgba(20,117,225,.34);

  /* --- measure ---------------------------------------------------------- */
  --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));

  /* --- the rotor tick (3-blade pinwheel), the site ornament ------------- */
  --rotor:conic-gradient(from 8deg,
      var(--accent) 0 17deg, transparent 17deg 120deg,
      var(--accent) 120deg 137deg, transparent 137deg 240deg,
      var(--accent) 240deg 257deg, transparent 257deg 360deg);
}

*,*::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;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.72;
  font-weight:300;
  color:var(--text-muted);
  background:var(--bg);
  background-image:
    radial-gradient(60rem 36rem at 86% -8%,rgba(20,117,225,.16),transparent 62%),
    radial-gradient(48rem 30rem at -6% 36%,rgba(249,203,22,.055),transparent 60%);
  background-attachment:fixed;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4,h5{
  font-family:var(--font-heading);
  color:var(--text-on-dark);
  font-weight:600;
  line-height:1.2;
  margin:0 0 .75rem;
  letter-spacing:-.012em;
}
h1{font-size:clamp(2.05rem,4.6vw,3.35rem);line-height:1.12}
h2{font-size:clamp(1.62rem,3.1vw,2.35rem)}
h3{font-size:clamp(1.2rem,2vw,1.48rem)}
h4{font-size:1.02rem}

p{margin:0 0 1.1rem}
a{color:var(--brand-light);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--accent)}

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

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

/* --- the rotor tick ----------------------------------------------------- */
.rotor{
  display:inline-block;
  inline-size:12px;block-size:12px;
  background:var(--rotor);
  border-radius:50%;
  flex:none;
}
.rotor--lg{inline-size:17px;block-size:17px}

/* --- kicker ------------------------------------------------------------- */
.kicker{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-body);
  font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
  margin:0 0 .85rem;
}
.kicker::before{
  content:"";inline-size:12px;block-size:12px;flex:none;
  background:var(--rotor);border-radius:50%;
}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-body);
  font-size:.95rem;font-weight:600;line-height:1;
  white-space:nowrap;
  padding:.95rem 1.7rem;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease;
}
.btn:active{transform:translateY(1px)}

.btn--primary{
  background:linear-gradient(180deg,var(--brand-light),var(--brand) 54%,var(--brand-dark));
  color:#fff;
  box-shadow:var(--shadow-cta);
}
.btn--primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px rgba(20,117,225,.46)}

.btn--gold{
  background:linear-gradient(180deg,var(--accent-warm),var(--accent) 56%,#d9a800);
  color:#14202b;
  box-shadow:0 10px 24px rgba(249,203,22,.26);
}
.btn--gold:hover{color:#14202b;transform:translateY(-2px);box-shadow:0 16px 34px rgba(249,203,22,.36)}

.btn--slate{
  background:var(--bg-elevated);
  color:#fff;
  border-color:var(--border-strong);
}
.btn--slate:hover{color:#fff;background:#2b4654;border-color:var(--accent);transform:translateY(-2px)}

.btn--sm{padding:.68rem 1.25rem;font-size:.85rem}
.btn--wide{padding:1.05rem 2.1rem;font-size:1rem}

/* ==========================================================================
   HEADER - sticky, two rows
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{box-shadow:0 10px 30px rgba(3,10,16,.5)}

.header-top{
  background:#0b1222;
  border-bottom:1px solid rgba(47,69,83,.5);
  font-size:.74rem;
  letter-spacing:.04em;
}
.header-top .container{
  min-block-size:var(--header-top-h);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.header-trust{display:flex;align-items:center;gap:.55rem;color:var(--text-dim);margin:0}
.live-dot{
  inline-size:8px;block-size:8px;border-radius:50%;flex:none;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(249,203,22,.6);
  animation:dotPulse 2.4s ease-out infinite;
}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 0 rgba(249,203,22,.55)}
  70%{box-shadow:0 0 0 9px rgba(249,203,22,0)}
  100%{box-shadow:0 0 0 0 rgba(249,203,22,0)}
}
.header-utility{display:flex;align-items:center;gap:1.35rem;list-style:none;margin:0;padding:0}
.header-utility a{color:var(--text-dim);font-size:.74rem;font-weight:400}
.header-utility a:hover{color:var(--accent)}

.header-main .container{
  min-block-size:var(--header-main-h);
  display:flex;align-items:center;gap:1.75rem;
}
.site-logo{display:inline-flex;align-items:center;flex:none}
.site-logo img{block-size:42px;inline-size:auto;object-fit:contain}

.primary-nav{margin-inline-start:auto;position:relative}
.primary-nav ul{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0}
.primary-nav a{
  color:var(--text-muted);
  font-size:.92rem;font-weight:400;
  padding-block:.4rem;
  display:block;
}
.primary-nav a:hover,.primary-nav a.active{color:#fff}
.nav-indicator{
  position:absolute;bottom:-.1rem;block-size:2px;
  background:linear-gradient(90deg,var(--accent),var(--brand));
  border-radius:2px;
  inline-size:0;left:0;opacity:0;
  transition:inline-size .3s cubic-bezier(.16,1,.3,1),left .3s cubic-bezier(.16,1,.3,1),opacity .2s ease;
  pointer-events:none;
}
.header-cta{flex:none}
.primary-nav .mobile-cta{display:none}

.nav-toggle{
  display:none;
  margin-inline-start:auto;
  inline-size:44px;block-size:44px;
  background:none;border:1px solid var(--border);border-radius:var(--r-sm);
  cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.nav-toggle span{
  display:block;inline-size:20px;block-size:2px;background:#fff;border-radius:2px;
  position:relative;transition:transform .25s ease,background .25s ease;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;inline-size:20px;block-size:2px;background:#fff;border-radius:2px;
  transition:transform .25s ease,top .25s ease;
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle.is-open span{background:transparent}
.nav-toggle.is-open span::before{top:0;transform:rotate(45deg)}
.nav-toggle.is-open span::after{top:0;transform:rotate(-45deg)}

/* ==========================================================================
   HERO - passepartout window
   ========================================================================== */
.hero{
  position:relative;
  isolation:isolate;
  background:#0a1620;
  background-size:cover;
  background-position:center;
  padding:26px;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(7,21,32,.42),rgba(7,21,32,.76));
}
.hero-mat{
  position:relative;z-index:1;
  max-width:calc(var(--container) - 3rem);
  margin-inline:auto;
  background:
    linear-gradient(180deg,rgba(15,33,46,.97),rgba(26,44,56,.99));
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding-block:clamp(2.6rem,5vw,4.2rem);
  box-shadow:0 24px 60px rgba(3,10,16,.5);
}
.hero-mat > .container{padding-inline:clamp(1.25rem,2.4vw,2.1rem);max-width:none}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(2rem,4vw,3.6rem);
  align-items:center;
}
.hero-copy{min-inline-size:0}
.hero h1{margin-bottom:1rem}
.hero h1 .highlight{
  font-style:italic;
  color:var(--accent);
  line-height:1.1;
  padding-bottom:.08em;
  display:inline-block;
  background:linear-gradient(transparent 68%,rgba(249,203,22,.22) 68%);
}
.hero-lede{
  font-size:clamp(1rem,1.5vw,1.14rem);
  color:var(--text-muted);
  margin-bottom:1.6rem;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem}

/* the cut window */
.hero-window{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--border-strong);
  box-shadow:0 20px 48px rgba(3,10,16,.55),inset 0 1px 0 rgba(255,255,255,.07);
  min-inline-size:0;
}
.hero-window::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(20,117,225,.16),transparent 52%,rgba(7,21,32,.5));
  pointer-events:none;
}
.hero-window img{
  inline-size:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

/* the turnstile rotor - three blades on a hub, overlapping the window */
.turnstile{
  position:absolute;
  left:-34px;bottom:-34px;
  inline-size:148px;block-size:148px;
  z-index:2;
  pointer-events:none;
}
.turnstile-ring{
  position:absolute;inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(15,33,46,.94) 0 46%,transparent 47%),
    conic-gradient(from 0deg,rgba(249,203,22,.75),rgba(20,117,225,.75) 38%,rgba(249,203,22,.2) 68%,rgba(249,203,22,.75));
  border:1px solid rgba(249,203,22,.3);
  box-shadow:0 14px 34px rgba(3,10,16,.6);
}
.turnstile-blades{
  position:absolute;inset:18px;
  border-radius:50%;
  background:var(--rotor);
  animation:rotorSpin 22s linear infinite;
}
.turnstile-hub{
  position:absolute;top:50%;left:50%;
  inline-size:22px;block-size:22px;margin:-11px 0 0 -11px;
  border-radius:50%;
  background:linear-gradient(145deg,#e6edf5,#8fa3b5 58%,#4d6473);
  box-shadow:0 2px 6px rgba(3,10,16,.6);
}
@keyframes rotorSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .turnstile-blades{animation:none}
  .live-dot{animation:none}
}

/* --- hero stat strip - normal flow, bridges onto the mat ---------------- */
.stat-strip{
  position:relative;z-index:3;
  margin-top:-3.25rem;
  margin-bottom:3.2rem;
}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.stat-cell{
  background:var(--bg-card);
  padding:1.35rem 1.4rem;
  min-inline-size:0;
}
.stat-cell strong{
  display:block;
  font-family:var(--font-heading);
  font-size:1.42rem;font-weight:600;color:#fff;
  line-height:1.2;margin-bottom:.15rem;
}
.stat-cell span{
  display:block;
  font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-dim);
}

/* ==========================================================================
   SECTIONS + CARDS
   ========================================================================== */
.page-body{padding-top:1rem}
.builder-section{padding-block:2.2rem}
.section-head{margin-bottom:1.7rem}
.section-head h2{margin-bottom:.55rem}
.section-head p{color:var(--text-muted);margin:0}

/* the corner cut - the second half of the signature */
.cut{position:relative}
.cut::before{
  content:"";
  position:absolute;top:13px;right:-6px;
  inline-size:40px;block-size:2px;
  background:linear-gradient(90deg,transparent,var(--accent));
  transform:rotate(-45deg);
  transform-origin:right center;
  opacity:.8;
  pointer-events:none;
}

.card{
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.card::after{
  content:"";position:absolute;top:0;left:0;right:0;block-size:5px;
  background:linear-gradient(90deg,var(--accent),var(--brand) 62%,transparent);
  opacity:.85;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:var(--border-strong)}

.card-mark{
  position:absolute;right:1rem;bottom:.2rem;
  font-family:var(--font-heading);font-style:italic;font-size:2.9rem;
  color:rgba(177,186,211,.055);
  pointer-events:none;user-select:none;
  transition:color .3s ease;
  line-height:1;
}
.card:hover .card-mark{color:rgba(249,203,22,.1)}

.plain-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  box-shadow:var(--shadow-card);
  padding:2rem 2.1rem;
  position:relative;
  overflow:hidden;
}
.plain-card::after{
  content:"";position:absolute;top:0;left:0;right:0;block-size:5px;
  background:linear-gradient(90deg,var(--accent),var(--brand) 62%,transparent);
}
.plain-card > :last-child{margin-bottom:0}

.intro-block{
  background:linear-gradient(180deg,rgba(33,55,67,.6),rgba(15,33,46,.6));
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--r-md);
  padding:1.5rem 1.7rem;
  margin-bottom:2rem;
}
.intro-block > :last-child{margin-bottom:0}

/* --- floor grid (R3) ---------------------------------------------------- */
.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))}

.floor-tile{
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  box-shadow:var(--shadow-card);
  padding:1.65rem 1.75rem;
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.floor-tile::after{
  content:"";position:absolute;top:0;left:0;right:0;block-size:5px;
  background:linear-gradient(90deg,var(--accent),var(--brand) 62%,transparent);
  opacity:.85;
}
.floor-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:var(--border-strong)}
.floor-tile h3{margin-bottom:.6rem}
.floor-tile > :last-child{margin-bottom:0}

/* --- rich tiles (R4b) --------------------------------------------------- */
.floor-grid--rich{grid-template-columns:minmax(0,1fr);gap:1.5rem}
.floor-grid--rich .floor-tile{padding:2.4rem}
.floor-grid--rich .tile-kicker{
  font-family:var(--font-body);
  font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--accent);
  border-top:2px solid var(--brand);
  padding-top:.85rem;
  margin:1.7rem 0 .9rem;
}
.floor-grid--rich ul{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.7rem}
.floor-grid--rich li{
  position:relative;
  background:var(--bg);
  border:1px solid var(--border-soft);
  border-radius:var(--r-md);
  padding:1rem 1.15rem 1rem 1.45rem;
  overflow:hidden;
}
.floor-grid--rich li::before{
  content:"";position:absolute;left:0;top:0;bottom:0;inline-size:3px;
  background:linear-gradient(180deg,var(--accent),var(--brand));
}

/* --- split layout ------------------------------------------------------- */
.split-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,3vw,2.8rem);
  align-items:center;
}
.split-layout--reverse .split-media{order:-1}
.split-media{
  border-radius:var(--card-radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  position:relative;
  min-inline-size:0;
}
.split-media img{inline-size:100%;aspect-ratio:16/10;object-fit:cover}
.split-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(20,117,225,.14),transparent 60%);
  pointer-events:none;
}
.split-body{min-inline-size:0}
.split-body > :last-child{margin-bottom:0}

/* --- feature check list ------------------------------------------------- */
.feature-check-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.85rem}
.feature-check-list li{
  display:flex;gap:.9rem;align-items:flex-start;
  background:linear-gradient(100deg,rgba(249,203,22,.07),rgba(15,33,46,0) 62%);
  border:1px solid var(--border-soft);
  border-left:3px solid var(--accent);
  border-radius:var(--r-md);
  padding:.95rem 1.2rem;
}
.feature-check-list li::before{
  content:"";
  flex:none;margin-top:.42rem;
  inline-size:17px;block-size:17px;border-radius:50%;
  background:var(--accent-soft);
  border:1px solid rgba(249,203,22,.5);
  background-image:var(--rotor);
  background-size:9px 9px;
  background-position:center;
  background-repeat:no-repeat;
}
.feature-check-list--plain{margin-top:0}

/* --- image divider (R5b) ------------------------------------------------ */
.image-divider{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(1.3rem,2.6vw,2.4rem);
  align-items:center;
  margin:0;
  padding-block:1.4rem;
}
.image-divider figure{margin:0}
.divider-media{
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
}
.divider-media img{inline-size:100%;aspect-ratio:4/3;object-fit:cover}
.divider-aside{
  border-left:2px solid var(--border);
  padding-left:1.5rem;
}
.divider-aside .rotor{margin-bottom:.9rem}
.divider-kicker{
  font-size:.73rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--accent);
  margin:0 0 .5rem;
}
.divider-aside h3{font-size:1.25rem;margin:0}

/* --- content lists ------------------------------------------------------ */
.builder-section ul:not(.feature-check-list):not(.floor-grid--rich ul){
  list-style:none;margin:0 0 1.1rem;padding:0;
}
.builder-section ul:not(.feature-check-list) li{
  position:relative;padding-left:1.55rem;margin-bottom:.6rem;
}
.builder-section ul:not(.feature-check-list) li::before{
  content:"";position:absolute;left:0;top:.62em;
  inline-size:11px;block-size:11px;border-radius:50%;
  background:var(--rotor);
}
.builder-section ol{margin:0 0 1.1rem;padding-left:1.4rem}
.builder-section ol li{margin-bottom:.6rem}
.builder-section ol li::marker{color:var(--accent);font-weight:600}

/* --- tables ------------------------------------------------------------- */
.table-wrap{overflow-x:auto;margin:0 0 1.2rem;border-radius:var(--r-md);border:1px solid var(--border)}
table{border-collapse:collapse;inline-size:100%;font-size:.95rem}
th,td{padding:.85rem 1.05rem;text-align:left;border-bottom:1px solid var(--border-soft)}
th{background:var(--bg-panel);color:#fff;font-weight:600;font-family:var(--font-heading)}
tr:last-child td{border-bottom:none}

/* --- page meta ---------------------------------------------------------- */
.page-meta{
  font-size:.82rem;color:var(--text-dim);
  margin:.9rem 0 0;
}
.page-meta-author{color:var(--text-muted)}

/* ==========================================================================
   HOMEPAGE BESPOKE SECTIONS
   ========================================================================== */
.home-section{padding-block:2.6rem}

/* home-intro */
.home-intro .intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(1.6rem,3vw,3rem);
  align-items:stretch;
}
.intro-aside{
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  padding:1.8rem 1.9rem;
  box-shadow:var(--shadow-card);
  position:relative;overflow:hidden;
}
.intro-aside::after{
  content:"";position:absolute;top:0;left:0;right:0;block-size:5px;
  background:linear-gradient(90deg,var(--accent),var(--brand) 62%,transparent);
}
.intro-aside h3{font-size:1.18rem}

/* home-floor - bento */
.bento-floor{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1.2rem;
}
.bento-cell{
  position:relative;
  grid-column:span 2;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  padding:1.6rem 1.7rem;
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.bento-cell::after{
  content:"";position:absolute;top:0;left:0;right:0;block-size:5px;
  background:linear-gradient(90deg,var(--accent),var(--brand) 62%,transparent);
  opacity:.85;
}
.bento-cell:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:var(--border-strong)}
.bento-cell--wide{grid-column:span 3}
.bento-cell h3{font-size:1.16rem;margin-bottom:.5rem}
.bento-cell p{margin-bottom:0;font-size:.98rem}

/* home-secure - 4-up */
.security-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.security-cell{
  background:linear-gradient(180deg,var(--bg-elevated),var(--bg-card));
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  padding:1.7rem 1.5rem;
  box-shadow:var(--shadow-card);
  position:relative;overflow:hidden;
}
.security-cell .rotor{margin-bottom:.95rem}
.security-cell h3{font-size:1.06rem;margin-bottom:.45rem}
.security-cell p{font-size:.94rem;margin-bottom:0;color:var(--text-muted)}
.security-cell::before{
  content:"";position:absolute;inset:auto -28px -28px auto;
  inline-size:92px;block-size:92px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,117,225,.2),transparent 68%);
}

/* home-rewards - bento */
.rewards-bento{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2rem;
}
.reward-cell{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  padding:1.7rem 1.75rem;
  box-shadow:var(--shadow-card);
  position:relative;overflow:hidden;
}
.reward-cell h3{font-size:1.12rem}
.reward-cell p{margin-bottom:0;font-size:.97rem}
.reward-cell--welcome{
  grid-column:span 1;
  background:linear-gradient(170deg,rgba(20,117,225,.2),var(--bg-card) 56%);
  border-color:rgba(20,117,225,.42);
}
.reward-cell--strip{
  grid-column:span 3;
  background:linear-gradient(100deg,rgba(249,203,22,.14),var(--bg-card) 58%);
  border-color:rgba(249,203,22,.38);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1.4rem;align-items:center;
}

/* home-support - editorial watermark card */
.support-card{
  position:relative;
  background:linear-gradient(140deg,var(--bg-elevated),var(--bg-card) 58%);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:clamp(2rem,4vw,3.2rem);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.support-card::after{
  content:attr(data-watermark);
  position:absolute;right:-.4rem;bottom:-2.6rem;
  font-family:var(--font-heading);font-style:italic;font-weight:600;
  font-size:clamp(5rem,13vw,10rem);
  color:rgba(177,186,211,.045);
  line-height:1;pointer-events:none;user-select:none;white-space:nowrap;
}
.support-card > *{position:relative;z-index:1}
.support-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.4rem}

/* ==========================================================================
   GAME SECTION - "sprocket columns"
   4 vertical filmstrips, 3 edge-to-edge 4:3 frames each
   ========================================================================== */
.game-floor{padding-block:2.6rem}
.sprocket-wall{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.15rem;
}
.sprocket-col{
  position:relative;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:12px 15px;
  box-shadow:var(--shadow-card);
  min-inline-size:0;
}
/* the sprocket perforations down both edges of every column */
.sprocket-col::before,
.sprocket-col::after{
  content:"";
  position:absolute;top:14px;bottom:14px;
  inline-size:5px;
  background-image:repeating-linear-gradient(
    180deg,
    rgba(177,186,211,.22) 0 6px,
    transparent 6px 18px);
  border-radius:2px;
}
.sprocket-col::before{left:4px}
.sprocket-col::after{right:4px}

.sprocket-frame{
  position:relative;
  display:block;
  overflow:hidden;
  border-block-end:1px solid rgba(47,69,83,.8);
  isolation:isolate;
}
.sprocket-col .sprocket-frame:first-of-type{border-start-start-radius:10px;border-start-end-radius:10px}
.sprocket-col .sprocket-frame:last-of-type{border-end-start-radius:10px;border-end-end-radius:10px;border-block-end:none}
.sprocket-frame img{
  inline-size:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.sprocket-frame:hover img{transform:scale(1.07)}
.sprocket-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.4rem .85rem .6rem;
  background:linear-gradient(180deg,transparent,rgba(7,21,32,.92));
  display:flex;align-items:center;gap:.5rem;
}
.sprocket-cap .rotor{inline-size:9px;block-size:9px}
.sprocket-cap span{
  font-family:var(--font-heading);
  font-size:.92rem;font-weight:600;color:#fff;
  line-height:1.25;
  text-shadow:0 1px 4px rgba(3,10,16,.8);
}
.game-note{margin:1.4rem 0 0;font-size:.88rem;color:var(--text-dim)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-section{padding-block:2.8rem}
.faq-list{display:grid;gap:.8rem}
.faq-item{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease;
}
.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;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.4rem;
  font-family:var(--font-heading);
  font-size:1.04rem;font-weight:600;color:#fff;
  line-height:1.4;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";flex:none;margin-top:.22rem;
  inline-size:19px;block-size:19px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/9px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/2px 9px no-repeat;
  border:1px solid rgba(249,203,22,.45);
  border-radius:50%;
  transition:transform .3s ease;
}
.faq-item[open] summary::after{transform:rotate(135deg)}
.faq-answer{padding:0 1.4rem 1.3rem}
.faq-answer > :last-child{margin-bottom:0}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background:var(--bg-deep);
  border-top:1px solid var(--border);
  margin-top:3.2rem;
  padding-bottom:1.5rem;
}
.footer-cta{
  position:relative;
  margin-top:-3rem;
  background:linear-gradient(135deg,var(--accent-warm),var(--accent) 48%,#dba800);
  border-radius:var(--r-xl);
  padding:clamp(1.9rem,4vw,2.9rem);
  color:#14202b;
  overflow:hidden;
  box-shadow:0 22px 50px rgba(3,10,16,.5);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1.6rem;align-items:center;
}
.footer-cta::after{
  content:attr(data-watermark);
  position:absolute;right:-1rem;bottom:-2.2rem;
  font-family:var(--font-heading);font-style:italic;font-weight:600;
  font-size:clamp(4.5rem,11vw,8.5rem);
  color:rgba(20,32,43,.09);
  line-height:1;pointer-events:none;user-select:none;white-space:nowrap;
}
.footer-cta > *{position:relative;z-index:1}
.footer-cta h2{color:#14202b;margin-bottom:.4rem}
.footer-cta p{color:rgba(20,32,43,.82);margin:0;max-inline-size:none}
.footer-cta .btn--slate{background:#14202b;border-color:#14202b}
.footer-cta .btn--slate:hover{background:#1f3242;border-color:#14202b}

.footer-map{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.9fr));
  gap:2rem;
  padding-block:2.8rem 2rem;
}
.footer-brand img{block-size:40px;inline-size:auto;object-fit:contain;margin-bottom:1rem}
.footer-brand p{font-size:.93rem;color:var(--text-dim)}
.footer-col .pay-pills{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.1rem 0 0;padding:0}
.footer-col .pay-pills li{
  font-size:.74rem;letter-spacing:.05em;
  padding:.4rem .8rem;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  color:var(--text-muted);
  background:rgba(15,33,46,.7);
}
.footer-col h3{
  font-style:italic;font-size:1.04rem;margin-bottom:.9rem;
  position:relative;padding-bottom:.6rem;
}
.footer-col h3::after{
  content:"";position:absolute;left:0;bottom:0;
  inline-size:30px;block-size:2px;background:var(--accent);
}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer-col a{color:var(--text-dim);font-size:.92rem}
.footer-col a:hover{color:var(--accent)}

.trust-row{
  display:flex;flex-wrap:wrap;gap:.6rem;
  padding-block:1.4rem;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  list-style:none;margin:0;
}
.trust-row li{
  display:flex;align-items:center;gap:.5rem;
  font-size:.78rem;color:var(--text-dim);
  padding:.45rem .95rem;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
}
.copyright{
  padding-top:1.5rem;
  font-size:.82rem;color:var(--text-dim);
}
.copyright p{margin:0 0 .5rem}
.copyright p:last-child{margin:0}

/* ==========================================================================
   404
   ========================================================================== */
.error-page{padding-top:5rem;padding-bottom:3rem;text-align:center}
.error-code{
  font-family:var(--font-heading);font-style:italic;font-weight:700;
  font-size:clamp(8vw,16vw,22vw);
  line-height:.9;margin:0 0 1rem;
  background:linear-gradient(130deg,var(--accent),var(--brand) 62%,var(--brand-dark));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.error-actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:1.6rem}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,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}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   RTL safety (shared stylesheet, mirror may be RTL on other builds)
   ========================================================================== */
[dir="rtl"] .feature-check-list li{border-left:1px solid var(--border-soft);border-right:3px solid var(--accent)}
[dir="rtl"] .divider-aside{border-left:none;border-right:2px solid var(--border);padding-left:0;padding-right:1.5rem}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (max-width:1100px){
  .footer-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem}
  .security-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .primary-nav ul{gap:1.1rem}
  .primary-nav a{font-size:.87rem}
  .sprocket-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .header-cta{display:none}
  .nav-indicator{display:none}
  .primary-nav{
    position:fixed;inset:var(--header-h) 0 0;
    margin:0;
    background:rgba(11,18,34,.97);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    padding:2rem 1.5rem 3rem;
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.16,1,.3,1);
    overflow-y:auto;
    z-index:55;
  }
  .primary-nav.is-open{transform:none}
  .primary-nav ul{flex-direction:column;align-items:stretch;gap:.2rem}
  .primary-nav ul li{border-bottom:1px solid var(--border-soft)}
  .primary-nav a{font-size:1.05rem;padding:.95rem .2rem}
  .primary-nav .mobile-cta{display:flex;margin-top:1.6rem;inline-size:100%}
  body.nav-locked{overflow:hidden}

  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-window{order:-1}
  .turnstile{inline-size:116px;block-size:116px;left:-22px;bottom:-22px}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .floor-grid--cols-3,.floor-grid--cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-layout{grid-template-columns:minmax(0,1fr)}
  .split-layout--reverse .split-media{order:0}
  .image-divider{grid-template-columns:minmax(0,1fr)}
  .divider-aside{border-left:none;border-top:2px solid var(--border);padding-left:0;padding-top:1.2rem}
  [dir="rtl"] .divider-aside{border-right:none;padding-right:0}
  .home-intro .intro-grid{grid-template-columns:minmax(0,1fr)}
  .bento-floor{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-cell,.bento-cell--wide{grid-column:span 1}
  .rewards-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reward-cell--welcome{grid-column:span 2}
  .reward-cell--strip{grid-column:span 2;grid-template-columns:minmax(0,1fr)}
  .footer-cta{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:700px){
  .header-utility{gap:.95rem}
  .sprocket-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding:14px}
  body{font-size:1rem}
}

@media (max-width:560px){
  .header-top .container{flex-direction:column;align-items:flex-start;gap:.25rem;padding-block:.4rem}
  .header-utility{flex-wrap:wrap}
  :root{--header-top-h:3.4rem}
  .floor-grid--cols-2,.floor-grid--cols-3,.floor-grid--cols-4{grid-template-columns:minmax(0,1fr)}
  .security-grid{grid-template-columns:minmax(0,1fr)}
  .bento-floor,.rewards-bento{grid-template-columns:minmax(0,1fr)}
  .reward-cell--welcome,.reward-cell--strip{grid-column:span 1}
  .stat-grid{grid-template-columns:minmax(0,1fr)}
  .sprocket-wall{grid-template-columns:minmax(0,1fr)}
  .footer-map{grid-template-columns:minmax(0,1fr)}
  .floor-grid--rich .floor-tile{padding:1.5rem 1.3rem}
  .plain-card{padding:1.5rem 1.3rem}
  .turnstile{inline-size:92px;block-size:92px}
  .hero-actions .btn{inline-size:100%}
}

@media (max-width:480px){
  .container{padding-inline:1rem}
  .hero-mat{padding-block:2rem}
  .site-logo img{block-size:34px}
  .footer-brand img{block-size:34px}
}

/* ==========================================================================
   HOMEPAGE-ONLY LAYOUT FAMILIES
   ========================================================================== */

/* full-width bento strip */
.bento-cell--full{grid-column:span 6}

/* the question rail - hairline rows, heading left, answer right */
.qa-rail{display:grid;gap:0;margin-top:1.6rem}
.qa-row{
  display:grid;
  grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  gap:clamp(1rem,2.4vw,2.4rem);
  padding-block:1.4rem;
  border-top:1px solid var(--border);
}
.qa-row:last-child{border-bottom:1px solid var(--border)}
.qa-row h3{font-size:1.1rem;margin:0;display:flex;gap:.6rem;align-items:flex-start}
.qa-row h3 .rotor{margin-top:.42rem}
.qa-row p{margin:0}

/* the odds columns - ruled columns, no cards */
.odds-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin-top:1.5rem;
}
.odds-col{
  padding:0 clamp(1rem,2vw,1.9rem);
  border-left:1px solid var(--border);
}
.odds-col:first-child{padding-left:0;border-left:none}
.odds-col:last-child{padding-right:0}
.odds-col h3{font-size:1.1rem;margin-bottom:.65rem;padding-top:1.1rem;border-top:2px solid var(--accent);display:inline-block}
.odds-col p{margin-bottom:0;font-size:.98rem}

/* the voice grid - reader quotes */
.voice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:1.5rem}
.voice-card{
  position:relative;
  background:linear-gradient(170deg,rgba(33,55,67,.72),var(--bg-card) 62%);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  padding:1.7rem 1.75rem 1.5rem;
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.voice-card::before{
  content:"\201C";
  position:absolute;top:-1.6rem;right:.6rem;
  font-family:var(--font-heading);font-style:italic;
  font-size:7rem;line-height:1;
  color:rgba(249,203,22,.12);
  pointer-events:none;
}
.voice-card h3{font-size:1.02rem;margin-bottom:.7rem;position:relative}
.voice-card p{margin-bottom:0;font-size:.97rem;font-style:italic;position:relative}

/* the step card - a genuine numbered procedure from the brief */
.step-card ol{margin:1.1rem 0 0;padding-left:1.5rem}
.step-card ol li{margin-bottom:.75rem;padding-left:.3rem}
.step-card ol li::marker{color:var(--accent);font-weight:600}

/* responsible-gaming check list carrying full headings */
.feature-check-list--headed li{flex-direction:row}
.feature-check-list--headed h3{font-size:1.04rem;margin-bottom:.4rem}
.feature-check-list--headed p{margin-bottom:0;font-size:.97rem}

/* support card inner pairs */
.support-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2.2rem;margin-top:1.6rem}
.support-pair h3{font-size:1.05rem;margin-bottom:.45rem}
.support-pair p{margin-bottom:0;font-size:.97rem}

@media (max-width:900px){
  .bento-cell--full{grid-column:span 1}
  .qa-row{grid-template-columns:minmax(0,1fr);gap:.6rem}
  .odds-columns{grid-template-columns:minmax(0,1fr)}
  .odds-col{padding:0;border-left:none;margin-bottom:1.6rem}
  .odds-col:last-child{margin-bottom:0}
  .voice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .support-pairs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .voice-grid{grid-template-columns:minmax(0,1fr)}
}