/* =========================================================================
   Diwa Fun - diwa-funs.com
   Direction: fairground at dusk. One dominant cerise, one sharp mint accent,
   amber only where a bulb would be. Signature ornament is the pennant
   garland: a bunting strip of triangles that opens every section head, caps
   every card and hangs the game wall.
   Radius rule: interactive = pill, cards/panels = 18px, inputs/chips = 8px.
   ========================================================================= */

:root{
  /* brand */
  --brand:#FF3D81;
  --brand-dark:#C41E5E;
  --brand-light:#FF86AE;

  --accent:#2FD0C5;
  --accent-warm:#FFC44D;
  --accent-soft:rgba(47,208,197,.14);

  /* ground */
  --bg:#130A1C;
  --bg-card:#1E1029;
  --bg-elevated:#291736;
  --bg-panel:#0C0613;

  /* type */
  --text:#F6EDF4;
  --text-muted:#C4AFC0;
  --text-dim:#917E90;
  --text-on-dark:#FFFFFF;

  /* lines */
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,61,129,.38);
  --border-soft:rgba(255,255,255,.05);

  --font-body:"Fira Sans",system-ui,sans-serif;
  --font-heading:"Zilla Slab",Georgia,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(8,3,14,.42);
  --shadow-card:0 1px 2px rgba(8,3,14,.5),0 16px 36px -18px rgba(196,30,94,.46);
  --shadow-card-hover:0 2px 4px rgba(8,3,14,.5),0 30px 58px -22px rgba(255,61,129,.44);
  --shadow-cta:0 10px 26px -10px rgba(255,61,129,.66);

  --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 pennant garland: alternating triangles cut from a cerise/amber bar */
  --garland:
    linear-gradient(135deg,var(--brand) 50%,transparent 50.5%) 0 0/14px 10px repeat-x,
    linear-gradient(45deg,var(--brand) 50%,transparent 50.5%) 7px 0/14px 10px repeat-x;
  --garland-accent:
    linear-gradient(135deg,var(--accent) 50%,transparent 50.5%) 0 0/14px 10px repeat-x,
    linear-gradient(45deg,var(--accent) 50%,transparent 50.5%) 7px 0/14px 10px repeat-x;
}

*,*::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.0125rem;
  line-height:1.78;
  color:var(--text);
  background:var(--bg);
  background-image:
    radial-gradient(900px 520px at 88% -8%,rgba(255,61,129,.17),transparent 62%),
    radial-gradient(760px 460px at -6% 12%,rgba(47,208,197,.12),transparent 60%),
    radial-gradient(620px 420px at 50% 104%,rgba(255,196,77,.07),transparent 64%);
  background-attachment:fixed;
  overflow-x:hidden;
}
@media (max-width:900px){body{background-attachment:scroll}}

img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--brand-light);text-decoration:none}
a:hover{color:var(--brand)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;line-height:1.18;margin:0 0 .6em;letter-spacing:-.012em}
h1{font-size:clamp(2.1rem,1.25rem + 3.2vw,3.5rem);line-height:1.1}
h2{font-size:clamp(1.65rem,1.12rem + 1.7vw,2.45rem)}
h3{font-size:clamp(1.14rem,1rem + .42vw,1.35rem)}
h4{font-size:1rem}
p{margin:0 0 1.15rem}
ul,ol{margin:0 0 1.15rem;padding-left:1.3rem}
li{margin-bottom:.55rem}

/* ---- D1 width law: one pair of guide lines, nothing narrower ------------ */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 1.5rem}

.kicker{
  display:block;font-family:var(--font-body);font-size:.69rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;color:var(--accent);
  margin:0 0 .85rem;padding-top:14px;position:relative;
}
.kicker::before{
  content:"";position:absolute;left:0;top:0;width:84px;height:10px;
  background:var(--garland);
}
.section-head{margin-bottom:2.1rem}
.section-head h2{margin-bottom:.55rem}
.section-head p{color:var(--text-muted);margin:0}

.highlight{
  font-style:italic;color:var(--brand-light);position:relative;
  line-height:1.1;padding-bottom:.12em;white-space:nowrap;
}
.highlight::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:.03em;height:.3em;
  background:rgba(255,61,129,.26);border-radius:3px;z-index:-1;
}

/* ---- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:700;font-size:.93rem;
  letter-spacing:.01em;white-space:nowrap;border:0;cursor:pointer;
  padding:.85rem 1.7rem;border-radius:var(--r-pill);
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,background .22s,color .22s;
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);color:#fff;box-shadow:var(--shadow-cta)}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(255,61,129,.78)}
.btn-accent{background:var(--accent);color:#06211F;box-shadow:0 10px 26px -12px rgba(47,208,197,.8)}
.btn-accent:hover{color:#06211F;transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--text);border:1px solid var(--border-strong)}
.btn-ghost:hover{background:rgba(255,61,129,.14);color:#fff;transform:translateY(-2px)}
.btn-sm{padding:.6rem 1.25rem;font-size:.85rem}

/* ---- header ------------------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg-panel);border-bottom:1px solid var(--border)}
.site-header.is-scrolled{box-shadow:0 10px 30px -14px rgba(0,0,0,.85)}
.header-top{background:#070310;border-bottom:1px solid var(--border-soft);font-size:.74rem;color:var(--text-dim)}
.header-top .container{height:var(--header-top-h);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.trust-note{display:inline-flex;align-items:center;gap:.5rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--text-muted)}
.trust-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-warm);box-shadow:0 0 0 0 rgba(255,196,77,.6);animation:dotPulse 2.6s ease-out infinite}
@keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(255,196,77,.55)}70%{box-shadow:0 0 0 9px rgba(255,196,77,0)}100%{box-shadow:0 0 0 0 rgba(255,196,77,0)}}
.utility-nav{display:flex;gap:1.15rem;align-items:center}
.utility-nav a{color:var(--text-dim);font-weight:500}
.utility-nav a:hover{color:var(--accent)}

.header-main .container{height:var(--header-main-h);display:flex;align-items:center;gap:1.5rem}
.brand-logo{display:inline-flex;align-items:center;flex:none}
.brand-logo img{height:42px;width:auto;object-fit:contain}
.main-nav{margin-left:auto;position:relative;display:flex;align-items:center;gap:1.6rem}
.main-nav a{color:var(--text-muted);font-weight:600;font-size:.9rem;padding:.4rem 0;position:relative}
.main-nav a:hover,.main-nav a.active{color:#fff}
.nav-indicator{position:absolute;bottom:0;height:2px;background:linear-gradient(90deg,var(--brand),var(--accent-warm));border-radius:2px;transition:transform .3s cubic-bezier(.16,1,.3,1),width .3s cubic-bezier(.16,1,.3,1);pointer-events:none;opacity:0}
.main-nav:hover .nav-indicator,.nav-indicator.is-on{opacity:1}
.header-cta{flex:none}
.nav-toggle{display:none;flex:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--border-strong);background:rgba(255,255,255,.04);border-radius:var(--r-pill);cursor:pointer;padding:0;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:19px;height:2px;background:var(--text);border-radius:2px;position:relative;transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--text);border-radius:2px;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
body.nav-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---- HERO: pinwheel quadrant ------------------------------------------- *
 * A 2x2 grid. Copy sits top-left on a solid ink panel, the art fills the
 * whole right column top-to-bottom and bleeds to the viewport edge, the CTA
 * band sits bottom-left, and the ferris-wheel ring straddles the grid's
 * centre seam. Nothing on the fleet composes a hero this way.                */
.hero{position:relative;overflow:hidden;padding:0;border-bottom:1px solid var(--border)}
.hero-grid{
  display:grid;grid-template-columns:1.06fr .94fr;grid-template-rows:auto auto;
  align-items:stretch;position:relative;
}
.hero-copy{
  grid-column:1;grid-row:1;padding:4.4rem 5.5rem 2rem 0;position:relative;z-index:3;
}
.hero-band{
  grid-column:1;grid-row:2;padding:0 5.5rem 4.6rem 0;position:relative;z-index:3;
}
.hero-media{
  grid-column:2;grid-row:1 / span 2;position:relative;min-height:28rem;
  margin-right:calc(50% - 50vw);border-left:1px solid var(--border);
}
.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.88}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(19,10,28,.72) 22%,rgba(19,10,28,.1) 58%,rgba(19,10,28,.42) 100%),
             linear-gradient(0deg,rgba(19,10,28,.72),transparent 46%);
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-warm);
  background:rgba(255,196,77,.1);border:1px solid rgba(255,196,77,.3);
  padding:.4rem 1rem;border-radius:var(--r-pill);margin-bottom:1.5rem;
}
.hero h1{margin-bottom:1.1rem;max-width:none}
.hero-sub{font-size:1.08rem;color:var(--text-muted);margin-bottom:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;padding-top:1.5rem;border-top:2px solid var(--border-strong);position:relative}
.hero-actions::before{content:"";position:absolute;left:0;top:-6px;width:112px;height:10px;background:var(--garland)}

/* the ferris-wheel gondola ring, pure CSS, straddling the quadrant seam */
.hero-wheel{
  position:absolute;z-index:4;left:58%;top:54%;transform:translate(-50%,-50%);
  width:clamp(170px,18vw,246px);aspect-ratio:1;pointer-events:none;
}
.wheel-ring{position:absolute;inset:0;animation:wheelSpin 52s linear infinite}
.wheel-ring::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:3px solid rgba(255,196,77,.8);
  box-shadow:inset 0 0 0 1px rgba(255,61,129,.3),0 22px 62px -16px rgba(255,61,129,.85);
}
/* spokes: 16 hairlines radiating from the hub, masked to a ring */
.wheel-ring::after{
  content:"";position:absolute;inset:11%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,196,77,.62) 0deg 0.7deg,transparent 0.7deg 22.5deg);
  -webkit-mask:radial-gradient(circle,transparent 11%,#000 12%,#000 100%);
          mask:radial-gradient(circle,transparent 11%,#000 12%,#000 100%);
}
.wheel-hub{
  position:absolute;left:50%;top:50%;width:17%;height:17%;transform:translate(-50%,-50%);
  border-radius:50%;background:linear-gradient(140deg,var(--accent-warm),var(--brand));
  box-shadow:0 0 24px rgba(255,196,77,.55);z-index:2;
}
/* Each gondola is a full-size box rotated about the hub; the car sits on the
   rim at the box's top edge and counter-rotates so it always hangs upright. */
.gondola{position:absolute;inset:0;transform:rotate(var(--a))}
.gondola::before{
  content:"";position:absolute;left:50%;top:0;width:1px;height:12%;
  transform:translateX(-50%);background:rgba(255,196,77,.4);
}
.gondola i{
  position:absolute;left:50%;top:0;width:34px;height:27px;
  display:grid;place-items:center;border-radius:5px 5px 12px 12px;
  background:linear-gradient(170deg,var(--bg-elevated),var(--bg-panel));
  border:1px solid rgba(255,196,77,.55);font-style:normal;font-size:.78rem;
  color:var(--accent-warm);box-shadow:0 4px 12px rgba(8,3,14,.6);
  transform:translate(-50%,8%) rotate(calc(var(--a) * -1));
  animation:wheelCounter 52s linear infinite;
}
@keyframes wheelSpin{to{transform:rotate(360deg)}}
@keyframes wheelCounter{
  from{transform:translate(-50%,8%) rotate(calc(var(--a) * -1))}
  to{transform:translate(-50%,8%) rotate(calc(var(--a) * -1 - 360deg))}
}
@media (prefers-reduced-motion:reduce){
  .wheel-ring,.gondola i{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 .container{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.stat-tile{
  background:linear-gradient(165deg,var(--bg-elevated),var(--bg-card));
  border:1px solid var(--border);border-radius:var(--card-radius);
  padding:1.3rem 1.35rem;box-shadow:var(--shadow-card);position:relative;overflow:hidden;
}
.stat-tile::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--brand),var(--accent-warm) 55%,var(--accent))}
.stat-num{font-family:var(--font-heading);font-size:1.6rem;font-weight:700;color:#fff;display:block;line-height:1.2}
.stat-label{font-size:.76rem;text-transform:uppercase;letter-spacing:.11em;color:var(--text-dim);font-weight:600}

/* ---- generic section rhythm -------------------------------------------- */
.section{padding:4.2rem 0}
.section--tight{padding:3rem 0}

/* card base: 18px, warm two-layer shadow, 5px gradient stripe, italic mark */
.card,.plain-card,.floor-tile,.support-card,.rich-tile,.bento-cell,.sec-cell,.reward-cell,.game-note{
  position:relative;background:linear-gradient(168deg,var(--bg-card),var(--bg-panel));
  border:1px solid var(--border);border-radius:var(--card-radius);
  box-shadow:var(--shadow-card);overflow:hidden;
}
.plain-card,.floor-tile,.support-card,.rich-tile{padding:2rem 2.1rem}
.card::before,.plain-card::before,.floor-tile::before,.support-card::before,.rich-tile::before,
.bento-cell::before,.sec-cell::before,.reward-cell::before{
  content:"";position:absolute;inset:0 0 auto;height:5px;
  background:linear-gradient(90deg,var(--brand),var(--accent-warm) 52%,var(--accent));
}
.floor-tile::after,.plain-card::after,.rich-tile::after,.support-card::after{
  content:"DF";position:absolute;right:.85rem;bottom:.1rem;pointer-events:none;
  font-family:var(--font-heading);font-style:italic;font-weight:700;font-size:3.1rem;
  color:rgba(255,255,255,.028);transition:color .3s;line-height:1;
}
.floor-tile:hover::after,.plain-card:hover::after,.rich-tile:hover::after,.support-card:hover::after{color:rgba(255,61,129,.1)}
.floor-tile,.rich-tile{transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s,border-color .28s}
.floor-tile:hover,.rich-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--border-strong)}
.plain-card h3,.floor-tile h3,.rich-tile h3{color:#fff}
.plain-card p:last-child,.floor-tile p:last-child,.rich-tile p:last-child{margin-bottom:0}

/* R3 column counts */
.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))}

/* R4b rich tiles: 1 column, generous padding, no inner cap */
.floor-grid--rich{grid-template-columns:minmax(0,1fr);gap:1.35rem}
.floor-grid--rich .rich-tile{padding:2.4rem}
.rich-tile h4{
  font-family:var(--font-body);font-size:.73rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--accent);border-top:2px solid var(--brand);
  padding-top:.95rem;margin:1.8rem 0 1rem;
}
.rich-tile ul{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;gap:.7rem}
.rich-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;overflow:hidden;color:var(--text-muted);
}
.rich-tile li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--brand),var(--accent))}

/* intro block (R8: ledes 1..n) */
.intro-block{display:grid;gap:1rem;margin-top:3.4rem;margin-bottom:2.4rem;padding:1.9rem 2.1rem;background:linear-gradient(168deg,rgba(47,208,197,.07),rgba(255,61,129,.05));border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--card-radius)}
.intro-block p{margin:0;color:var(--text-muted)}

/* split layout */
.split-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:2.2rem;align-items:center}
.split-layout--rev .split-media{order:-1}
.split-media{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-card)}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split-body p:last-child{margin-bottom:0}

/* feature check-list */
.feature-check-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.feature-check-list li{
  position:relative;margin:0;padding:.95rem 1.2rem .95rem 3.1rem;color:var(--text-muted);
  background:linear-gradient(100deg,rgba(255,196,77,.09),rgba(255,196,77,.02));
  border:1px solid var(--border-soft);border-left:4px solid var(--accent-warm);border-radius:var(--r-md);
}
.feature-check-list li::before{
  content:"";position:absolute;left:1.05rem;top:1.15rem;width:19px;height:19px;border-radius:50%;
  background:var(--accent-warm);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.3 14.3-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.3 14.3-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.feature-check-list--plain{margin-top:1.4rem}

/* R5b image divider: contained figure, never a full-bleed strip */
.image-divider{display:grid;grid-template-columns:1.35fr 1fr;gap:1.6rem;align-items:stretch;margin:2.6rem 0}
.divider-card{margin:0;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-card)}
.divider-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.divider-aside{
  display:flex;flex-direction:column;justify-content:center;gap:.6rem;
  padding:1.9rem;border:1px solid var(--border);border-radius:var(--r-xl);
  background:linear-gradient(160deg,var(--bg-card),var(--bg-panel));
}
.divider-aside .kicker{margin-bottom:.3rem}
.divider-aside h3{margin:0;color:#fff}

/* ---- home: bespoke sections -------------------------------------------- */
.home-intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:start}
.pull-panel{
  padding:2.1rem;border-radius:var(--card-radius);border:1px solid var(--border-strong);
  background:linear-gradient(160deg,rgba(255,61,129,.14),rgba(19,10,28,.9));position:relative;overflow:hidden;
}
.pull-panel::before{content:"";position:absolute;inset:0 0 auto;height:10px;background:var(--garland)}
.pull-panel p{margin:0;font-family:var(--font-heading);font-size:1.22rem;line-height:1.55;color:#fff}
.pull-panel .pull-note{font-family:var(--font-body);font-size:.92rem;color:var(--text-muted);margin-top:1rem}

.bento-floor{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.bento-cell{padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s}
.bento-cell:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.bento-cell h3{margin:0;font-size:1.1rem;color:#fff}
.bento-cell p{margin:0;font-size:.93rem;color:var(--text-muted)}
.bento-cell--wide{grid-column:span 2}
.bento-cell--media{padding:0;min-height:12rem}
.bento-cell--media img{width:100%;height:100%;object-fit:cover;min-height:12rem}
.bento-cell--media::before{z-index:2}

.security-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.security-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sec-cell{padding:1.7rem 1.5rem;background:linear-gradient(175deg,var(--bg-elevated),var(--bg-panel))}
.sec-cell h3{font-size:1.04rem;margin-bottom:.5rem;color:#fff}
.sec-cell p{margin:0;font-size:.92rem;color:var(--text-muted)}
.sec-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(140deg,var(--brand),var(--accent-warm));margin-bottom:1rem;display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--font-heading)}

.rewards-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.reward-cell{padding:1.8rem 1.65rem}
.reward-cell h3{color:#fff;margin-bottom:.5rem}
.reward-cell p{margin:0;color:var(--text-muted);font-size:.95rem}
.reward-cell--lead{grid-column:span 2;background:linear-gradient(150deg,rgba(255,61,129,.2),var(--bg-panel))}
.reward-cell--strip{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;background:linear-gradient(100deg,rgba(47,208,197,.13),var(--bg-panel))}

.support-card{padding:2.6rem 2.4rem;position:relative}
.support-card .support-watermark{
  position:absolute;right:1.4rem;bottom:-.9rem;font-family:var(--font-heading);font-style:italic;
  font-weight:700;font-size:clamp(4rem,9vw,7.5rem);color:rgba(255,61,129,.06);line-height:1;pointer-events:none;
}
.support-rails{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.rail-chip{font-size:.78rem;font-weight:600;padding:.45rem 1rem;border-radius:var(--r-pill);background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text-muted)}

/* ---- D6 game wall: the bunting swag ------------------------------------ *
 * Tiles hang from a 2px garland line; the vertical drop follows a catenary,
 * deepest at the centre of each row. One folder locked site-wide.           */
.game-swag{position:relative}
.swag-row{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1rem;
  position:relative;padding-top:2.2rem;margin-bottom:1.6rem;
}
.swag-row::before{
  content:"";position:absolute;left:0;right:0;top:10px;height:10px;
  background:var(--garland-accent);opacity:.55;
}
.swag-row:nth-child(even)::before{background:var(--garland);opacity:.5}
.swag-tile{
  display:block;position:relative;border-radius:var(--card-radius);
  border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--shadow-card);
  transform:translateY(var(--drop,0px));
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;
}
/* the string each tile hangs from, running up to the garland line */
.swag-tile::before{
  content:"";position:absolute;left:50%;bottom:100%;width:2px;height:var(--string,14px);
  transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,196,77,.15),rgba(255,196,77,.75));
}
.swag-tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:var(--card-radius) var(--card-radius) 0 0}
.swag-tile figcaption{
  padding:.6rem .55rem;font-size:.74rem;line-height:1.3;font-weight:600;color:var(--text-muted);
  text-align:center;border-top:1px solid var(--border-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.9em;border-radius:0 0 var(--card-radius) var(--card-radius);
}
.swag-tile:hover{transform:translateY(calc(var(--drop,0px) - 5px));box-shadow:var(--shadow-card-hover);border-color:var(--border-strong)}
/* the generic reveal sets transform:none, which would flatten the swag, so the
   hanging tiles carry their own reveal transforms */
.swag-tile.reveal{transform:translateY(calc(var(--drop,0px) + 22px))}
.swag-tile.reveal.is-visible{transform:translateY(var(--drop,0px))}
.swag-tile:hover figcaption{color:#fff}

/* ---- FAQ --------------------------------------------------------------- */
.faq-list{display:grid;gap:.8rem}
.faq-item{background:linear-gradient(168deg,var(--bg-card),var(--bg-panel));border:1px solid var(--border);border-radius:var(--card-radius);overflow:hidden;transition:box-shadow .26s,border-color .26s,transform .26s}
.faq-item[open]{border-color:var(--border-strong);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.2rem 3.4rem 1.2rem 1.5rem;position:relative;
  font-family:var(--font-heading);font-weight:600;font-size:1.04rem;color:#fff;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:1.35rem;top:1.3rem;width:21px;height:21px;
  background:var(--accent-warm);transition:transform .3s cubic-bezier(.16,1,.3,1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 11v4h-2v-4H7v-2h4V7h2v4h4v2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 11v4h-2v-4H7v-2h4V7h2v4h4v2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.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}

/* ---- page meta --------------------------------------------------------- */
.page-meta{font-size:.84rem;color:var(--text-dim);margin:0 0 1.4rem}
.page-meta-author{color:var(--accent);font-weight:600}

/* ---- footer ------------------------------------------------------------ */
.site-footer{margin-top:5rem;background:var(--bg-panel);border-top:1px solid var(--border);position:relative}
.footer-cta{position:relative;z-index:2;margin-top:-3.25rem}
.footer-cta-card{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:2.6rem 2.4rem;
  background:linear-gradient(120deg,var(--accent-warm) 0%,#F09A1E 52%,var(--brand) 170%);
  color:#2A1405;display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between;
  box-shadow:0 26px 60px -26px rgba(255,196,77,.6);
}
.footer-cta-card h2{margin:0 0 .35rem;color:#210F03}
.footer-cta-card p{margin:0;color:#4A2707;font-weight:500;max-width:none}
.footer-cta-card .fc-mark{
  position:absolute;right:1rem;bottom:-1.6rem;font-family:var(--font-heading);font-style:italic;
  font-weight:700;font-size:clamp(4.5rem,11vw,9rem);color:rgba(42,20,5,.12);line-height:1;pointer-events:none;
}
.footer-cta-card .btn-primary{box-shadow:0 12px 28px -10px rgba(42,20,5,.6)}
.footer-body{padding:3.4rem 0 0}
.footer-map{display:grid;grid-template-columns:1.35fr repeat(3,minmax(0,1fr));gap:2rem}
.footer-brand img{height:40px;width:auto;object-fit:contain;margin-bottom:1rem}
.footer-brand p{color:var(--text-dim);font-size:.92rem}
.pay-pills{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.pay-pills span{font-size:.72rem;font-weight:600;padding:.35rem .8rem;border-radius:var(--r-sm);background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text-muted)}
.footer-col h3{font-family:var(--font-heading);font-style:italic;font-size:1.05rem;color:#fff;margin-bottom:.9rem;padding-top:12px;position:relative}
.footer-col h3::before{content:"";position:absolute;left:0;top:0;width:46px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--accent-warm))}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:.55rem}
.footer-col a{color:var(--text-dim);font-size:.92rem}
.footer-col a:hover{color:var(--accent)}
.trust-pills{display:flex;flex-wrap:wrap;gap:.6rem;padding:2rem 0 1.6rem;margin-top:2.4rem;border-top:1px solid var(--border)}
.trust-pills span{font-size:.75rem;font-weight:600;padding:.42rem 1rem;border-radius:var(--r-pill);background:rgba(47,208,197,.08);border:1px solid rgba(47,208,197,.22);color:var(--accent)}
.footer-base{border-top:1px solid var(--border);padding:1.3rem 0 2rem;font-size:.82rem;color:var(--text-dim);display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between}

/* ---- 404 --------------------------------------------------------------- */
.nf-wrap{padding:5rem 0 3rem;text-align:left}
.nf-code{
  font-family:var(--font-heading);font-style:italic;font-weight:700;line-height:.86;
  font-size:clamp(5.5rem,16vw,22vw);margin:0 0 1rem;
  background:linear-gradient(120deg,var(--brand),var(--accent-warm) 48%,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nf-links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}

/* ---- 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}}

/* ---- mirror (hi) ------------------------------------------------------- */
:lang(hi) body,body:lang(hi){font-family:"Martel",var(--font-body)}
:lang(hi) h1,:lang(hi) h2,:lang(hi) h3,:lang(hi) h4{font-family:"Martel",var(--font-heading);letter-spacing:0}
:lang(hi) .highlight{font-style:normal}

/* ---- breakpoints ------------------------------------------------------- */
@media (max-width:1100px){
  .bento-floor,.security-grid,.security-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swag-row{grid-template-columns:repeat(5,minmax(0,1fr))}
  .footer-map{grid-template-columns:1fr 1fr;gap:1.8rem}
  .main-nav{gap:1.1rem}
  .main-nav a{font-size:.85rem}
}
@media (max-width:900px){
  .main-nav{
    position:fixed;inset:var(--header-h) 0 0;margin:0;flex-direction:column;align-items:flex-start;
    gap:.2rem;padding:1.8rem 1.5rem;background:rgba(12,6,19,.97);backdrop-filter:blur(14px);
    transform:translateX(100%);transition:transform .34s cubic-bezier(.16,1,.3,1);overflow-y:auto;z-index:48;
  }
  body.nav-open .main-nav{transform:none}
  body.nav-open{overflow:hidden}
  .main-nav a{font-size:1.14rem;padding:.75rem 0;width:100%;border-bottom:1px solid var(--border-soft)}
  .nav-indicator{display:none}
  .nav-toggle{display:inline-flex}
  .header-cta{display:none}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-copy{grid-column:1;grid-row:1;padding:2.8rem 0 1.4rem}
  .hero-band{padding:1.8rem 0 3rem}
  .hero-media{grid-column:1;grid-row:2;min-height:17rem;margin:0 calc(50% - 50vw);border-left:0;border-block:1px solid var(--border)}
  .hero-media::after{background:linear-gradient(0deg,var(--bg) 2%,rgba(19,10,28,.3) 60%,rgba(19,10,28,.55) 100%)}
  .hero-band{grid-column:1;grid-row:3;padding:1.8rem 0 3rem}
  .hero-wheel{left:auto;right:5%;top:auto;bottom:0;transform:translateY(38%);width:clamp(118px,26vw,164px)}
  .floor-grid--cols-3,.floor-grid--cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-layout,.home-intro-grid,.image-divider{grid-template-columns:minmax(0,1fr)}
  .split-layout--rev .split-media{order:0}
  .rewards-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reward-cell--lead{grid-column:span 2}
  .stat-strip .container{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swag-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .intro-block{margin-top:2.4rem}
}
@media (max-width:700px){
  .section{padding:3.1rem 0}
  .bento-cell--wide{grid-column:span 2}
  .footer-cta-card{padding:2rem 1.6rem}
  .swag-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .swag-tile,.swag-tile.reveal,.swag-tile.reveal.is-visible{transform:none}
  .swag-tile.reveal{transform:translateY(22px)}
  .swag-tile.reveal.is-visible{transform:none}
  .swag-tile:hover{transform:translateY(-5px)}
  .swag-tile::before{display:none}
}
@media (max-width:560px){
  .container{padding:0 1rem}
  .floor-grid--cols-2,.floor-grid--cols-3,.floor-grid--cols-4,.bento-floor,.security-grid,.security-grid--3,.rewards-bento{grid-template-columns:minmax(0,1fr)}
  .bento-cell--wide,.reward-cell--lead,.reward-cell--strip{grid-column:span 1}
  .plain-card,.floor-tile,.support-card,.rich-tile{padding:1.5rem 1.3rem}
  .floor-grid--rich .rich-tile{padding:1.7rem 1.4rem}
  .swag-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-map{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .stat-strip .container{grid-template-columns:minmax(0,1fr)}
  .hero-eyebrow{font-size:.64rem;padding:.35rem .8rem}
  .utility-nav{gap:.75rem;font-size:.7rem}
  .trust-note span:last-child{display:none}
}