/* ==========================================================================
   Yes Spin APK - yesspinapk.org
   Direction: "High Voltage" - a cold indigo ink page cut by one live green
   current. Signature ornament: the jag rule (a hairline broken by a bolt).
   ========================================================================== */

:root{
  /* --- brand: neon voltaic green, read off the app icon's electric ground --- */
  --brand:#10F937;
  --brand-dark:#0B8F21;
  --brand-light:#8CFF9E;

  /* --- the single sharp accent: bolt amber, the icon's YES letterforms --- */
  --accent:#FFC51F;
  --accent-warm:#FF8A1F;
  --accent-soft:rgba(255,197,31,.13);

  /* --- cold indigo ink ground --- */
  --bg:#0A0C16;
  --bg-card:#141829;
  --bg-elevated:#1C2138;
  --bg-panel:#06070F;

  --text:#E8EDF7;
  --text-muted:#A3B0C6;
  --text-dim:#6E7C95;
  --text-on-dark:#F4F7FF;

  --border:#1F2740;
  --border-strong:#2F3A58;
  --border-soft:#161C2E;

  --font-body:"Fustat","Helvetica Neue",Helvetica,sans-serif;
  --font-heading:"Vollkorn",Georgia,"Times New Roman",serif;

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

  --shadow-soft:0 2px 10px rgba(2,4,10,.42);
  --shadow-card:0 1px 0 rgba(255,255,255,.035),0 18px 38px -18px rgba(2,4,10,.92);
  --shadow-card-hover:0 1px 0 rgba(255,255,255,.07),0 30px 58px -20px rgba(2,4,10,.96);
  --shadow-cta:0 10px 26px -10px rgba(16,249,55,.48);

  --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:1.0225rem;
  line-height:1.78;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
figure{margin:0}
dl,dt,dd{margin:0}
a{color:var(--brand-light);text-decoration:none}
a:hover{color:var(--brand)}
ul,ol{margin:0 0 1.15rem;padding-left:1.25rem}
li{margin:0 0 .55rem}
p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}

h1,h2,h3,h4,h5{
  font-family:var(--font-heading);
  font-weight:800;
  line-height:1.17;
  letter-spacing:-.012em;
  color:var(--text-on-dark);
  margin:0 0 1rem;
}
h1{font-size:clamp(2.2rem,4.3vw,3.4rem);line-height:1.1}
h2{font-size:clamp(1.78rem,3.1vw,2.6rem)}
h3{font-size:clamp(1.24rem,1.85vw,1.5rem)}
h4{font-size:1.02rem}

strong,b{font-weight:700;color:var(--text-on-dark)}
em,i{font-style:italic}

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

::selection{background:var(--brand);color:#04060C}

/* ======================= THE WIDTH LAW (D1) ===============================
   One pair of vertical guide lines down the whole page. The container cap is
   the ONLY max-width on the site. Nothing inside a section narrows itself.
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 1.5rem;
}

/* ======================= THE JAG RULE (signature ornament) ================ */
.jag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  vertical-align:middle;
  margin-right:.72rem;
}
.jag::before{
  content:"";
  width:26px;height:2px;
  background:linear-gradient(90deg,transparent,var(--brand));
}
.jag::after{
  content:"";
  width:9px;height:15px;
  background:var(--accent);
  clip-path:polygon(58% 0,0 56%,38% 56%,28% 100%,100% 40%,54% 40%);
}
.jag--solo::before{background:var(--brand)}

/* ======================= BUTTONS: three CTA variants ====================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.88rem 1.7rem;
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-size:.955rem;
  font-weight:700;
  letter-spacing:.012em;
  line-height:1.2;
  white-space:nowrap;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
}
.btn:active{transform:translateY(1px) scale(.985)}

/* 1 - voltage: the live current. Primary action everywhere. */
.btn-voltage{
  background:var(--brand);
  color:#04060C;
  box-shadow:var(--shadow-cta);
}
.btn-voltage:hover{
  background:var(--brand-light);
  color:#04060C;
  transform:translateY(-2px);
  box-shadow:0 16px 34px -10px rgba(16,249,55,.6);
}

/* 2 - bolt: amber. The one-per-page heavy ask (footer CTA card). */
.btn-bolt{
  background:var(--accent);
  color:#1A1203;
  box-shadow:0 10px 26px -10px rgba(255,197,31,.5);
}
.btn-bolt:hover{
  background:#FFD75C;
  color:#1A1203;
  transform:translateY(-2px);
  box-shadow:0 16px 34px -10px rgba(255,197,31,.62);
}

/* 3 - wire: stroked ghost, safe over art because it carries its own backdrop. */
.btn-wire{
  background:rgba(10,12,22,.62);
  color:var(--brand-light);
  border-color:var(--brand-dark);
  backdrop-filter:blur(6px);
}
.btn-wire:hover{
  background:var(--brand);
  color:#04060C;
  border-color:var(--brand);
  transform:translateY(-2px);
}

.btn-sm{padding:.62rem 1.2rem;font-size:.875rem}
.btn-block{width:100%}

/* ======================= HEADER (sticky, 2 rows) ========================== */
.site-header{
  position:sticky;
  top:0;
  z-index:120;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border-soft);
  transition:box-shadow .3s ease,border-color .3s ease;
}
.site-header.is-scrolled{
  box-shadow:0 14px 34px -22px rgba(0,0,0,.98);
  border-bottom-color:var(--border);
}

.header-top{
  background:#04060C;
  border-bottom:1px solid var(--border-soft);
  font-size:.78rem;
  color:var(--text-dim);
}
.header-top .container{
  height:var(--header-top-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.header-trust{display:flex;align-items:center;gap:.55rem;letter-spacing:.055em;text-transform:uppercase;font-size:.695rem;font-weight:600}
.trust-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(255,197,31,.55);
  animation:dotPulse 2.6s ease-out infinite;
  flex:none;
}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 0 rgba(255,197,31,.5)}
  70%{box-shadow:0 0 0 8px rgba(255,197,31,0)}
  100%{box-shadow:0 0 0 0 rgba(255,197,31,0)}
}
.header-util{display:flex;align-items:center;gap:1.35rem;list-style:none;margin:0;padding:0}
.header-util a{color:var(--text-dim);font-size:.775rem;font-weight:500}
.header-util a:hover{color:var(--brand-light)}

.header-main .container{
  height:var(--header-main-h);
  display:flex;
  align-items:center;
  gap:1.5rem;
}
.brand-link{display:flex;align-items:center;flex:none}
.brand-link img{height:42px;width:42px;object-fit:contain}

.primary-nav{margin-left:auto;position:relative}
.nav-list{display:flex;align-items:center;gap:1.55rem;list-style:none;margin:0;padding:0}
.nav-list a{
  color:var(--text-muted);
  font-size:.925rem;
  font-weight:500;
  padding:.3rem 0;
  display:inline-block;
  transition:color .2s ease;
}
.nav-list a:hover,.nav-list a.active{color:var(--text-on-dark)}
.nav-indicator{
  position:absolute;
  bottom:-6px;left:0;
  height:2px;width:0;
  background:var(--brand);
  box-shadow:0 0 10px rgba(16,249,55,.65);
  opacity:0;
  transition:transform .32s cubic-bezier(.16,1,.3,1),width .32s cubic-bezier(.16,1,.3,1),opacity .2s ease;
  pointer-events:none;
}
.header-cta{flex:none}
.nav-toggle{
  display:none;
  flex:none;
  width:44px;height:44px;
  margin-left:auto;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  cursor:pointer;
  padding:0;
  position:relative;
}
.nav-toggle span{
  position:absolute;
  left:12px;
  width:20px;height:2px;
  background:var(--text-on-dark);
  border-radius:2px;
  transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s ease;
}
.nav-toggle span:nth-child(1){top:15px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:27px}
.nav-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ======================= HERO - "the bolt mask" (D3.2) ===================
   The art plane is clipped to the site's own ornament blown up to hero scale:
   one giant lightning bolt struck down the right of the container, rimmed in
   voltage green. The copy sits on the clear ink field to its left, so the
   headline never fights the picture. Nothing on the fleet masks hero art to
   the brand's ornament; the lever is bolted to the bolt's lower terminal.
   ========================================================================== */
.hero{
  position:relative;
  background:var(--bg-panel);
  padding:2.2rem 0 0;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-18% -16% auto auto;
  width:720px;height:720px;
  background:radial-gradient(circle,rgba(16,249,55,.13),transparent 62%);
  pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:center;
  min-height:502px;
  --bolt:polygon(56% 0,100% 0,64% 36%,100% 36%,42% 100%,54% 58%,34% 58%);
}
/* the voltage rim: the same bolt, struck 3px larger, behind the art */
.hero-bolt{
  position:absolute;
  inset:-3px 0 51px calc(33% - 3px);
  z-index:0;
  background:linear-gradient(168deg,var(--brand),var(--brand) 42%,var(--accent));
  clip-path:var(--bolt);
  filter:drop-shadow(0 22px 46px rgba(2,4,10,.95));
  pointer-events:none;
}
.hero-art{
  position:absolute;
  inset:0 0 54px 33%;
  z-index:1;
  overflow:visible;
  background:#070A12;
  clip-path:var(--bolt);
}
.hero-art img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 42%;
}
.hero-art::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(145deg,rgba(16,249,55,.2),rgba(6,7,15,.2) 52%,rgba(255,197,31,.18));
  mix-blend-mode:screen;
  pointer-events:none;
}
.hero-copy{
  grid-column:1;
  grid-row:1;
  position:relative;
  z-index:3;
  /* the stat strip rides up 3.25rem, so clear it plus a real gap below the CTAs */
  padding:2.4rem 2.4rem 6rem 0;
}
.hero-kicker{
  display:block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brand-light);
  margin:0 0 1.1rem;
}
.hero h1{margin:0 0 1.15rem}
.hero h1 .highlight{
  font-style:italic;
  font-weight:900;
  color:var(--brand);
  line-height:1.1;
  padding-bottom:.08em;
  display:inline-block;
  background-image:linear-gradient(180deg,transparent 68%,rgba(16,249,55,.22) 68%,rgba(16,249,55,.22) 92%,transparent 92%);
}
.hero-sub{
  font-size:1.095rem;
  color:var(--text-muted);
  margin:0 0 1.5rem;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:.35rem}

/* --- the bandit lever (hero foreground object, pure CSS) ---
   Bolted to the bolt's lower terminal, so the arm reads as the thing that
   struck it. Decorative only, hidden to assistive tech, still under
   prefers-reduced-motion, dropped below 900px. */
.bandit-lever{
  position:absolute;
  left:calc(57% - 30px);
  bottom:62px;
  width:64px;
  height:172px;
  z-index:4;
  pointer-events:none;
}
.bandit-lever .lv-plinth{
  position:absolute;
  left:50%;bottom:0;
  transform:translateX(-50%);
  width:62px;height:17px;
  border-radius:4px 4px 7px 7px;
  background:linear-gradient(180deg,#2C3A58,#111626);
  box-shadow:0 10px 22px -8px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.12);
}
.bandit-lever .lv-collar{
  position:absolute;
  left:50%;bottom:14px;
  transform:translateX(-50%);
  width:30px;height:16px;
  border-radius:50% 50% 5px 5px;
  background:linear-gradient(180deg,#43527A,#1A2138);
}
.bandit-lever .lv-arm{
  position:absolute;
  left:50%;bottom:22px;
  width:9px;height:120px;
  transform-origin:50% 100%;
  transform:translateX(-50%) rotate(-7deg);
  animation:leverPull 8s cubic-bezier(.5,0,.3,1) infinite;
}
.bandit-lever .lv-rod{
  position:absolute;
  inset:0;
  border-radius:5px;
  background:linear-gradient(90deg,#1A2138,#8795B8 38%,#D6DEF2 52%,#6C7999 70%,#141A2B);
}
.bandit-lever .lv-knob{
  position:absolute;
  left:50%;top:-19px;
  transform:translateX(-50%);
  width:38px;height:38px;
  border-radius:50%;
  background:radial-gradient(circle at 33% 28%,#FFE9A8,#FFC51F 44%,#C97F05 86%);
  box-shadow:0 0 22px rgba(255,197,31,.42),inset 0 -3px 7px rgba(120,70,0,.5);
}
.bandit-lever .lv-arc{
  position:absolute;
  left:50%;bottom:18px;
  transform:translateX(-50%);
  width:96px;height:96px;
  border-radius:50%;
  border:1px dashed rgba(16,249,55,.28);
  border-bottom-color:transparent;
  border-left-color:transparent;
}
@keyframes leverPull{
  0%,56%{transform:translateX(-50%) rotate(-7deg)}
  66%{transform:translateX(-50%) rotate(31deg)}
  74%{transform:translateX(-50%) rotate(27deg)}
  88%,100%{transform:translateX(-50%) rotate(-7deg)}
}
@media (prefers-reduced-motion:reduce){
  .bandit-lever .lv-arm{animation:none}
  .trust-dot{animation:none}
}

/* --- hero-bridge stat strip: NORMAL FLOW, never absolute --- */
.stat-strip{position:relative;z-index:6;margin-top:-3.25rem}
.stat-strip dl{
  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.45rem 1.4rem 1.35rem;
  min-width:0;
}
.stat-cell dt{
  font-family:var(--font-heading);
  font-size:1.62rem;
  font-weight:800;
  color:var(--brand);
  line-height:1.1;
  margin:0 0 .3rem;
}
.stat-cell dd{
  margin:0;
  font-size:.785rem;
  color:var(--text-dim);
  letter-spacing:.07em;
  text-transform:uppercase;
  font-weight:600;
  line-height:1.5;
}

/* --- page meta line --- */
.page-meta{
  font-size:.83rem;
  color:var(--text-dim);
  margin:-.5rem 0 1.5rem;
  letter-spacing:.015em;
}
.page-meta-author{color:var(--brand-light);font-weight:600}

/* ======================= SECTION SCAFFOLD ================================ */
main{display:block}
.section{padding:4.3rem 0}
.section--tight{padding:3rem 0}
.section--panel{background:var(--bg-panel);border-block:1px solid var(--border-soft)}

.section-head{margin:0 0 2.1rem}
.kicker{
  display:flex;
  align-items:center;
  font-size:.695rem;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--brand-light);
  margin:0 0 .85rem;
}
.section-head h2{margin:0 0 .75rem}
.section-head h2 .highlight{
  font-style:italic;
  font-weight:900;
  color:var(--brand);
  line-height:1.1;
  padding-bottom:.08em;
  display:inline-block;
}
.section-sub{
  font-size:1.045rem;
  color:var(--text-muted);
  margin:0;
}

/* --- intro block: all the ledes after the first (R8) --- */
.intro-block{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-left:4px solid var(--brand);
  border-radius:var(--card-radius);
  padding:1.9rem 2rem;
  margin:0 0 2.6rem;
  color:var(--text-muted);
  font-size:1.045rem;
}
.intro-block > p:last-child{margin-bottom:0}

/* ======================= CARDS (D7) ====================================== */
.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 .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease;
}
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(90deg,var(--brand),var(--accent) 72%,var(--accent-warm));
  opacity:.85;
}
.card::after{
  content:attr(data-mark);
  position:absolute;
  right:.75rem;bottom:-.32em;
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:900;
  font-size:4.1rem;
  line-height:1;
  color:rgba(163,176,198,.055);
  pointer-events:none;
  transition:color .3s ease;
  letter-spacing:-.03em;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card-hover);
  border-color:var(--border-strong);
}
.card:hover::after{color:rgba(16,249,55,.1)}

/* --- plain card (paragraphs only) --- */
.plain-card{padding:2.1rem 2.2rem}

/* --- floor grid: column count follows item count (R3) --- */
.floor-grid{display:grid;gap:1.25rem}
.floor-grid--cols-1{grid-template-columns:minmax(0,1fr)}
.floor-grid--cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.floor-grid--cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.floor-grid--cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.floor-tile{padding:1.8rem 1.75rem}
.floor-tile h3{margin:0 0 .7rem;font-size:1.22rem}
.floor-tile p:last-child{margin-bottom:0}
.floor-tile p{color:var(--text-muted)}

/* --- R4b rich tile layout: 1 column, generous padding, no inner cap --- */
.floor-grid--rich{grid-template-columns:minmax(0,1fr);gap:1.4rem}
.floor-grid--rich .floor-tile{padding:2.4rem}
.floor-grid--rich .floor-tile h3{font-size:1.46rem;margin-bottom:.95rem}
.floor-grid--rich .floor-tile h4{
  margin:1.9rem 0 1rem;
  padding-top:1.05rem;
  border-top:2px solid var(--brand);
  font-family:var(--font-body);
  font-size:.735rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.floor-grid--rich .floor-tile ul,
.floor-grid--rich .floor-tile ol{
  list-style:none;
  margin:1.15rem 0 0;
  padding:0;
  display:grid;
  gap:.72rem;
}
.floor-grid--rich .floor-tile li{
  position:relative;
  margin:0;
  background:var(--bg);
  border:1px solid var(--border-soft);
  border-radius:var(--r-md);
  padding:1rem 1.15rem 1rem 1.45rem;
  color:var(--text-muted);
  overflow:hidden;
}
.floor-grid--rich .floor-tile li::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--brand),var(--accent));
}

/* --- feature check list --- */
.feature-check-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.85rem;
}
.feature-check-list li{
  position:relative;
  margin:0;
  padding:1.02rem 1.3rem 1.02rem 3.3rem;
  background:linear-gradient(100deg,rgba(255,197,31,.07),rgba(255,197,31,0) 58%),var(--bg);
  border:1px solid var(--border-soft);
  border-left:3px solid var(--accent);
  border-radius:var(--r-md);
  color:var(--text-muted);
}
.feature-check-list li::before{
  content:"";
  position:absolute;
  left:1.2rem;top:1.28rem;
  width:19px;height:19px;
  border-radius:50%;
  background:var(--accent);
}
.feature-check-list li::after{
  content:"";
  position:absolute;
  left:1.44rem;top:1.56rem;
  width:9px;height:5px;
  border-left:2px solid #1A1203;
  border-bottom:2px solid #1A1203;
  transform:rotate(-45deg);
}
.feature-check-list--plain{padding:2.1rem 2.2rem}
.feature-check-list--plain > p{color:var(--text-muted)}
.feature-check-list--plain .feature-check-list{margin-top:1.5rem}

/* --- split layout (list + paragraphs + image) --- */
.split-layout{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:2.1rem;
  align-items:start;
}
.split-layout__body{padding:2.1rem 2.2rem}
.split-layout__body > p{color:var(--text-muted)}
.split-layout__media{
  border-radius:var(--card-radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  position:relative;
}
.split-layout__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split-layout--rev .split-layout__body{order:2}
.split-layout--rev .split-layout__media{order:1}

/* --- image divider: a contained figure, never a full-bleed strip (R5b) --- */
.image-divider{
  display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  gap:1.5rem;
  align-items:stretch;
  margin:2.8rem 0;
}
.image-divider__fig{
  margin:0;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
}
.image-divider__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.image-divider__aside{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.9rem;
  padding:2rem 2.1rem;
  border-radius:var(--r-xl);
  background:
    radial-gradient(130% 100% at 100% 0,rgba(16,249,55,.09),transparent 58%),
    var(--bg-card);
  border:1px solid var(--border);
}
.image-divider__kicker{
  display:flex;
  align-items:center;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--brand-light);
}
.image-divider__aside h3{margin:0;font-size:1.3rem}

/* ======================= HOMEPAGE BESPOKE SECTIONS ======================= */

/* --- home-intro: the lede band.
   Two equal columns of plain body copy under a voltage-tipped rule, with the
   CTA row on a hairline below. The lede is body text, never display type. --- */
.home-intro{
  position:relative;
  border-top:1px solid var(--border);
  padding-top:2.3rem;
}
.home-intro::before{
  content:"";
  position:absolute;
  top:-2px;left:0;
  width:132px;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
}
.home-intro__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.6rem 3rem;
}
.home-intro__grid p{
  margin:0;
  font-size:1.07rem;
  line-height:1.82;
  color:var(--text);
  font-weight:400;
}
.home-intro__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-top:2.1rem;
  padding-top:1.7rem;
  border-top:1px solid var(--border-soft);
}

/* --- home-floor: bento category wall --- */
.bento-floor{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(132px,auto);
  gap:1.1rem;
}
.bento-cell{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:.45rem;
  padding:1.45rem 1.5rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  overflow:hidden;
  color:inherit;
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease;
}
.bento-cell:hover{transform:translateY(-4px);border-color:var(--brand-dark);box-shadow:var(--shadow-card-hover);color:inherit}
.bento-cell img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.3;
  transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.bento-cell:hover img{opacity:.42;transform:scale(1.045)}
.bento-cell::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,7,15,.52),rgba(6,7,15,.95));
}
.bento-cell > *{position:relative;z-index:2}
.bento-cell h3{margin:0;font-size:1.22rem}
.bento-cell p{margin:0;font-size:.88rem;color:var(--text-muted);line-height:1.55}
.bento-cell--wide{grid-column:span 2}
.bento-cell--tall{grid-row:span 2}
.bento-cell--ink{background:linear-gradient(145deg,var(--bg-elevated),var(--bg-card))}

/* --- home-live: split with art --- */
.home-live{
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:2.2rem;
  align-items:center;
}
.home-live__media{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
}
.home-live__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.home-live__copy > p{color:var(--text-muted)}

/* --- home-secure: 4-up art-deco cells --- */
.security-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.1rem;
}
.security-cell{
  position:relative;
  padding:2rem 1.6rem 1.8rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  overflow:hidden;
}
.security-cell::before{
  content:"";
  position:absolute;
  left:1.6rem;top:0;
  width:46px;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
}
.security-cell::after{
  content:"";
  position:absolute;
  right:-30px;bottom:-30px;
  width:110px;height:110px;
  border:1px solid var(--border-strong);
  transform:rotate(45deg);
  opacity:.5;
}
.security-cell h3{font-size:1.1rem;margin:0 0 .6rem;position:relative;z-index:2}
.security-cell p{margin:0;font-size:.92rem;color:var(--text-muted);position:relative;z-index:2}

/* --- home-rewards: bento, welcome card top-left, VIP strip across the base --- */
.rewards-bento{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.1rem;
}
.reward-cell{
  position:relative;
  padding:1.9rem 1.8rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  overflow:hidden;
}
.reward-cell h3{margin:0 0 .65rem;font-size:1.16rem}
.reward-cell p{margin:0;color:var(--text-muted);font-size:.95rem}
.reward-cell--welcome{
  grid-column:span 2;
  background:
    radial-gradient(120% 130% at 0 0,rgba(16,249,55,.16),transparent 56%),
    var(--bg-elevated);
  border-color:var(--brand-dark);
}
.reward-cell--welcome h3{font-size:1.5rem}
.reward-cell--vip{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.2rem 2rem;
  background:
    linear-gradient(100deg,rgba(255,197,31,.12),transparent 52%),
    var(--bg-elevated);
  border-color:#4A3A10;
}
.reward-cell--vip h3{margin:0;flex:none}
.reward-cell--vip p{flex:1 1 340px;min-width:0}

/* --- home-support: editorial card with oversized italic watermark --- */
.support-card{
  position:relative;
  padding:2.7rem 2.6rem;
  background:
    radial-gradient(120% 140% at 100% 0,rgba(16,249,55,.09),transparent 55%),
    var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  overflow:hidden;
}
.support-card__mark{
  position:absolute;
  right:-.5rem;bottom:-2.8rem;
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:900;
  font-size:clamp(7rem,15vw,12.5rem);
  line-height:1;
  letter-spacing:-.05em;
  color:rgba(163,176,198,.05);
  pointer-events:none;
  user-select:none;
}
.support-card > *{position:relative;z-index:2}
.support-card p{color:var(--text-muted)}
.support-card__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.6rem}

/* ======================= GAME SECTION - "the rim arc" ====================
   Nine portrait posters laid along a shallow wheel rim: each tile rotates
   with its distance from the centre and drops by the square of it, so the
   row's top edge traces an arc. Flattens to a plain grid under 1025px.
   ========================================================================== */
.game-rim{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:.6rem;
  padding:2.4rem 0 7.5rem;
}
.game-tile{
  --i:0;
  display:block;
  min-width:0;
  transform:rotate(calc(var(--i) * 2.6deg)) translateY(calc(var(--i) * var(--i) * 6px));
  transition:transform .4s cubic-bezier(.16,1,.3,1),filter .3s ease;
}
.game-tile:nth-child(1){--i:-4}
.game-tile:nth-child(2){--i:-3}
.game-tile:nth-child(3){--i:-2}
.game-tile:nth-child(4){--i:-1}
.game-tile:nth-child(5){--i:0}
.game-tile:nth-child(6){--i:1}
.game-tile:nth-child(7){--i:2}
.game-tile:nth-child(8){--i:3}
.game-tile:nth-child(9){--i:4}
.game-tile:hover{
  transform:rotate(calc(var(--i) * 2.6deg)) translateY(calc(var(--i) * var(--i) * 6px - 12px)) scale(1.05);
  z-index:3;
}
.game-tile figure{
  position:relative;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  background:var(--bg-card);
}
.game-tile img{width:100%;aspect-ratio:26/38;object-fit:cover}
.game-tile figcaption{
  display:block;
  margin-top:.55rem;
  font-size:.68rem;
  line-height:1.35;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--text-dim);
  text-align:center;
}
.game-tile:hover figcaption{color:var(--brand-light)}
.game-rim-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.6rem;
  padding-top:1.4rem;
  border-top:1px solid var(--border-soft);
}
.game-rim-foot p{margin:0;color:var(--text-muted);flex:1 1 320px}

/* --- homepage variants --- */
.bento-floor--trio{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(208px,auto)}
.bento-floor--trio .bento-cell--wide{grid-column:span 2}

/* three tiles, no empty cells: tall lead on the left, two wide tiles stacked right */
.bento-floor--pillar{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(192px,auto)}
.bento-floor--pillar > :nth-child(1){grid-column:1;grid-row:1 / span 2}
.bento-floor--pillar > :nth-child(2){grid-column:2 / span 2;grid-row:1}
.bento-floor--pillar > :nth-child(3){grid-column:2 / span 2;grid-row:2}

/* two-column prose field (home-account) */
.prose-field{padding:2.2rem 2.3rem}
.prose-field__cols{columns:2;column-gap:2.6rem;column-rule:1px solid var(--border-soft)}
.prose-field__cols p{break-inside:avoid;color:var(--text-muted)}

/* a navigational cell inside the rewards bento */
.reward-cell--link{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1rem;
  background:linear-gradient(150deg,var(--bg-elevated),var(--bg-card));
}
.reward-cell--link .jag{margin:0}

/* game section head sits beside its copy */
.game-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.2rem 2rem;
}
.game-head .section-head{margin:0;flex:1 1 420px;min-width:0}

/* ======================= FAQ ACCORDION =================================== */
.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:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.faq-item[open]{
  border-color:var(--brand-dark);
  box-shadow:var(--shadow-card);
  transform:translateY(-2px);
}
.faq-item summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.2rem;
  padding:1.2rem 1.5rem;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-heading);
  font-size:1.07rem;
  font-weight:700;
  color:var(--text-on-dark);
  line-height:1.4;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";
  flex:none;
  width:22px;height:22px;
  margin-top:.22rem;
  border-radius:50%;
  background:
    linear-gradient(var(--accent),var(--accent)) center/10px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/2px 10px no-repeat,
    var(--bg-elevated);
  border:1px solid var(--border-strong);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.faq-item[open] summary::after{transform:rotate(135deg)}
.faq-answer{padding:0 1.5rem 1.4rem;color:var(--text-muted)}
.faq-answer p:last-child{margin-bottom:0}

/* ======================= FOOTER ========================================== */
.site-footer{
  position:relative;
  margin-top:5.5rem;
  background:var(--bg-panel);
  border-top:1px solid var(--border-soft);
  padding-bottom:1.6rem;
}
.footer-cta{
  position:relative;
  margin-top:-3.8rem;
  z-index:4;
  padding:2.6rem 2.6rem;
  border-radius:var(--r-xl);
  background:linear-gradient(118deg,var(--accent) 0%,#FFB00C 46%,var(--accent-warm) 100%);
  color:#1A1203;
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.6rem 2.4rem;
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95);
}
.footer-cta__mark{
  position:absolute;
  right:-1rem;bottom:-3.6rem;
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:900;
  font-size:clamp(6rem,14vw,11rem);
  line-height:1;
  letter-spacing:-.05em;
  color:rgba(26,18,3,.09);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}
.footer-cta > *{position:relative;z-index:2}
.footer-cta__copy{flex:1 1 440px;min-width:0}
.footer-cta h2{color:#1A1203;margin:0 0 .5rem;font-size:clamp(1.6rem,2.6vw,2.15rem)}
.footer-cta p{margin:0;color:rgba(26,18,3,.78);font-weight:500}
.footer-cta .btn-voltage{background:#0A0C16;color:var(--brand);box-shadow:0 10px 24px -10px rgba(0,0,0,.7)}
.footer-cta .btn-voltage:hover{background:#04060C;color:var(--brand-light)}

.footer-map{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));
  gap:2.2rem;
  padding:3.4rem 0 2.6rem;
}
.footer-brand img{height:52px;width:52px;object-fit:contain;margin-bottom:1rem}
.footer-brand p{color:var(--text-dim);font-size:.93rem;margin:0 0 1.2rem}
.pay-pills{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:0}
.pay-pills li{
  margin:0;
  padding:.33rem .78rem;
  font-size:.735rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--text-muted);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
}
.footer-col h3{
  font-family:var(--font-heading);
  font-style:italic;
  font-size:1.05rem;
  margin:0 0 .35rem;
  color:var(--text-on-dark);
}
.footer-col .jag{margin:0 0 1rem;display:flex}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0 0 .6rem}
.footer-col a{color:var(--text-dim);font-size:.925rem}
.footer-col a:hover{color:var(--brand-light)}

.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  list-style:none;
  margin:0;
  padding:1.6rem 0;
  border-top:1px solid var(--border-soft);
}
.trust-row li{
  margin:0;
  padding:.42rem .95rem;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-dim);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
}
.footer-base{
  border-top:1px solid var(--border-soft);
  padding-top:1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:.8rem 2rem;
  align-items:center;
  justify-content:space-between;
  font-size:.82rem;
  color:var(--text-dim);
}
.footer-base p{margin:0;max-width:none}

/* ======================= 404 ============================================= */
.error-wrap{padding:5.5rem 0 4rem;text-align:left}
.error-code{
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:900;
  font-size:clamp(8vw,18vw,22vw);
  line-height:.86;
  letter-spacing:-.045em;
  margin:0 0 1.2rem;
  background:linear-gradient(118deg,var(--brand),var(--accent) 62%,var(--accent-warm));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.error-wrap h1{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:0 0 1rem}
.error-wrap p{color:var(--text-muted);margin:0 0 1.8rem}
.error-links{display:flex;flex-wrap:wrap;gap:.85rem}

/* ======================= ABOUT PAGE EXTRAS =============================== */
.about-hero{padding:3.4rem 0 1rem;background:var(--bg-panel);border-bottom:1px solid var(--border-soft)}
.editorial-block{
  padding:2.4rem 2.4rem;
  background:
    linear-gradient(100deg,rgba(16,249,55,.07),transparent 54%),
    var(--bg-card);
  border:1px solid var(--border);
  border-left:4px solid var(--brand);
  border-radius:var(--card-radius);
}
.editorial-block p{color:var(--text-muted)}
.editorial-block dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:1.8rem}
.editorial-block dt{
  font-size:.7rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.4rem;
}
.editorial-block dd{margin:0;color:var(--text-muted);font-size:.94rem}

/* ======================= REVEAL ========================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s 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;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ======================= RESPONSIVE ====================================== */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);min-height:460px}
  .hero-art{inset:0 0 54px 38%}
  .hero-bolt{inset:-3px 0 51px calc(38% - 3px)}
  .bandit-lever{left:calc(59% - 30px)}
  .floor-grid--cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .security-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-floor{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-cell--wide{grid-column:span 2}
  .bento-cell--tall{grid-row:span 1}
  .footer-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
  .nav-list{gap:1.1rem}
  .nav-list a{font-size:.875rem}
}

@media (max-width:1024px){
  /* the rim flattens: nine posters become a plain three-up grid */
  .game-rim{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding:2rem 0 1rem}
  .game-tile{transform:none}
  .game-tile:hover{transform:translateY(-6px) scale(1.02)}
  .game-tile figcaption{font-size:.8rem}
}

@media (max-width:900px){
  .header-main .container{gap:1rem}
  .primary-nav{
    position:fixed;
    inset:var(--header-h) 0 0 0;
    margin:0;
    background:rgba(6,7,15,.97);
    backdrop-filter:blur(14px);
    padding:2.2rem 1.5rem 3rem;
    transform:translateX(100%);
    transition:transform .34s cubic-bezier(.16,1,.3,1);
    overflow-y:auto;
    visibility:hidden;
  }
  .primary-nav.is-open{transform:translateX(0);visibility:visible}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list li{border-bottom:1px solid var(--border-soft)}
  .nav-list a{display:block;padding:1.05rem 0;font-size:1.08rem;font-family:var(--font-heading);font-weight:700}
  .nav-indicator{display:none}
  .header-cta{display:none}
  .nav-toggle{display:block}
  .header-util{gap:1rem}
  body.nav-locked{overflow:hidden}

  /* the bolt unstrikes: a plain art band above the copy */
  .hero{padding-top:1.6rem}
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;min-height:0;gap:1.6rem}
  .hero-bolt{display:none}
  .hero-art{
    position:relative;
    inset:auto;
    grid-column:1;grid-row:1;
    aspect-ratio:16/9;
    border-radius:var(--r-xl);
    overflow:hidden;
    clip-path:none;
    filter:none;
    border:1px solid var(--border);
    box-shadow:var(--shadow-card);
  }
  .hero-art::after{
    background:linear-gradient(180deg,rgba(6,7,15,.3),rgba(6,7,15,.62));
    mix-blend-mode:normal;
  }
  .hero-copy{grid-column:1;grid-row:2;padding:0 0 5.4rem}
  .bandit-lever{display:none}

  .home-intro__grid,.home-live,.split-layout,.image-divider{grid-template-columns:minmax(0,1fr)}
  .split-layout--rev .split-layout__body,.split-layout--rev .split-layout__media{order:0}
  .rewards-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reward-cell--welcome{grid-column:1 / -1}
  .bento-floor--trio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-floor--pillar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-floor--pillar > :nth-child(1){grid-column:auto;grid-row:auto}
  .bento-floor--pillar > :nth-child(2){grid-column:auto;grid-row:auto}
  .bento-floor--pillar > :nth-child(3){grid-column:span 2;grid-row:auto}
  .prose-field__cols{columns:1;column-rule:none}
  .floor-grid--cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editorial-block dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-strip dl{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:700px){
  .section{padding:3.1rem 0}
  .footer-cta{padding:2.1rem 1.6rem;margin-top:-3rem}
  .footer-map{grid-template-columns:minmax(0,1fr);gap:1.9rem;padding:2.6rem 0 2rem}
  .plain-card,.split-layout__body,.feature-check-list--plain{padding:1.6rem 1.5rem}
  .floor-grid--rich .floor-tile{padding:1.7rem 1.5rem}
  .support-card{padding:2rem 1.6rem}
  .editorial-block{padding:1.7rem 1.5rem}
  .image-divider__aside{padding:1.6rem 1.5rem}
}

@media (max-width:560px){
  .container{padding:0 1rem}
  .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,.bento-floor--trio,.bento-floor--pillar{grid-template-columns:minmax(0,1fr)}
  .bento-cell--wide,.bento-floor--trio .bento-cell--wide,
  .bento-floor--pillar > :nth-child(3){grid-column:span 1}
  .rewards-bento{grid-template-columns:minmax(0,1fr)}
  .reward-cell--welcome{grid-column:span 1}
  .editorial-block dl{grid-template-columns:minmax(0,1fr)}
  .header-util li:nth-child(2),.header-util li:nth-child(3){display:none}
  .header-util{gap:.9rem}
  .header-util a{font-size:.72rem}
  .hero-actions .btn,.support-card__actions .btn,.error-links .btn{flex:1 1 100%}
}

@media (max-width:480px){
  .stat-strip{margin-top:-2rem}
  .stat-strip dl{grid-template-columns:minmax(0,1fr)}
  .stat-cell{padding:1.1rem 1.2rem}
  .game-rim{gap:.7rem}
  .game-tile figcaption{font-size:.7rem}
  .header-trust span{display:none}
}

/* ======================= LOCALE MIRROR (hi) ============================== */
html[lang="hi"] body{font-family:"Martel","Fustat",sans-serif}
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3,
html[lang="hi"] h4,html[lang="hi"] .faq-item summary{
  font-family:"Martel","Vollkorn",serif;
  letter-spacing:0;
}
html[lang="hi"] .hero h1 .highlight,
html[lang="hi"] .section-head h2 .highlight{font-style:normal;text-decoration:none}