/* ==========================================================================
   Diwa Ace · diwaaces.net
   "Card-room editorial": card-back cobalt + logo marigold on cool paper.
   Signature ornament: playing-card-back crosshatch lattice + spade pip.
   ========================================================================== */

:root {
  --brand: #2A44C4;
  --brand-dark: #172A86;
  --brand-light: #DCE3FF;
  --accent: #F2A93B;
  --accent-warm: #FF7A2F;
  --accent-soft: #FFF1D6;

  --bg: #EEF1F6;
  --bg-card: #FBFCFE;
  --bg-elevated: #FDFDFE;
  --bg-panel: #E2E7F1;
  --ink: #0E1330;
  --ink-2: #161D45;

  --text: #121833;
  --text-muted: #454E70;
  --text-dim: #6C7493;
  --text-on-dark: #EEF1FA;

  --border: #D3D9E6;
  --border-strong: #B4BDD2;
  --border-soft: #E4E8F1;

  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Playfair Display", 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 1px 2px rgba(23, 42, 134, .06), 0 6px 18px rgba(23, 42, 134, .06);
  --shadow-card: 0 2px 4px rgba(23, 42, 134, .06), 0 14px 32px -12px rgba(23, 42, 134, .22);
  --shadow-card-hover: 0 4px 8px rgba(23, 42, 134, .08), 0 24px 44px -14px rgba(23, 42, 134, .32);
  --shadow-cta: 0 10px 24px -10px rgba(242, 169, 59, .75);

  --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));

  --lattice-ink: rgba(42, 68, 196, .28);
  --grad-stripe: linear-gradient(90deg, var(--brand), var(--brand-dark) 55%, var(--accent));
  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #6E86FF;
    --brand-dark: #3E57DA;
    --brand-light: #1C2552;
    --accent-soft: #3A2C12;
    --bg: #0B0F24;
    --bg-card: #121838;
    --bg-elevated: #161D44;
    --bg-panel: #0F1430;
    --text: #E8ECF8;
    --text-muted: #B2BAD6;
    --text-dim: #8790B2;
    --border: #262F5E;
    --border-strong: #37417A;
    --border-soft: #1C2450;
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
    --shadow-card: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 32px -12px rgba(0, 0, 0, .55);
    --shadow-card-hover: 0 4px 8px rgba(0, 0, 0, .35), 0 24px 44px -14px rgba(0, 0, 0, .65);
    --lattice-ink: rgba(110, 134, 255, .3);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  font-variant-numeric: lining-nums;
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.7;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }
h1, h2, h3, h4 { font-variant-numeric: lining-nums; font-family: var(--font-heading); color: var(--text); line-height: 1.15; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.45rem); }
h3 { font-size: 1.28rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--ink); padding: .6rem 1rem; font-weight: 700; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* The one width law: every band shares these guide lines (D1). */
.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; width: 100%; }

/* ---------- ornament: card-back lattice ---------- */
.lattice-rule {
  display: block; height: 10px; width: 100%; margin: .2rem 0 1.1rem;
  border-top: 2px solid var(--brand); border-radius: 2px;
  background:
    repeating-linear-gradient(45deg, var(--lattice-ink) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, var(--lattice-ink) 0 1px, transparent 1px 7px);
  -webkit-mask: linear-gradient(90deg, #000 0 30%, transparent 85%);
          mask: linear-gradient(90deg, #000 0 30%, transparent 85%);
}
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 700 .74rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--brand);
  margin-bottom: .8rem;
}
.kicker::before { content: "\2660"; color: var(--accent); font-size: .95rem; letter-spacing: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.5rem; border-radius: var(--r-pill);
  font: 800 .95rem/1 var(--font-body); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, color .25s;
}
.btn:active { transform: translateY(1px) scale(.98); }
/* CTA variant 1: marigold (primary) */
.btn--gold { background: var(--accent); color: var(--ink); box-shadow: var(--shadow-cta); }
.btn--gold:hover { background: #FFBA4E; color: var(--ink); transform: translateY(-2px); }
/* CTA variant 2: cobalt (secondary) */
.btn--cobalt { background: var(--brand); color: #fff; }
.btn--cobalt:hover { background: var(--brand-dark); color: #fff; transform: translateY(-2px); }
/* CTA variant 3: outline (tertiary) */
.btn--line { background: transparent; color: var(--brand); border-color: currentColor; }
.btn--line:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--sm { min-height: 40px; padding: .55rem 1.1rem; font-size: .88rem; }

/* ==========================================================================
   Header: sticky, two rows, dark ink (logo is light-on-transparent)
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--text-on-dark); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -12px rgba(5, 8, 25, .7); }
.util-bar { height: var(--header-top-h); background: #080B20; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: .78rem; }
.util-bar .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.util-status { display: flex; align-items: center; gap: .55rem; color: #C9CFEA; white-space: nowrap; }
.util-status .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(242, 169, 59, .6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(242, 169, 59, .55); } 70% { box-shadow: 0 0 0 8px rgba(242, 169, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 169, 59, 0); } }
.util-links { display: flex; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.util-links a { color: #C9CFEA; text-decoration: none; }
.util-links a:hover, .util-links a.active { color: var(--accent); }

.main-bar { height: var(--header-main-h); }
.main-bar .container { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.brand-link { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-link img { height: 42px; width: auto; object-fit: contain; }
.primary-nav { position: relative; margin-left: auto; }
.primary-nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.primary-nav a {
  display: block; padding: .55rem .8rem; color: #E3E7F7; text-decoration: none;
  font-weight: 700; font-size: .92rem; white-space: nowrap; border-radius: var(--r-sm);
}
.primary-nav a:hover, .primary-nav a.active { color: #fff; }
.nav-indicator {
  position: absolute; bottom: -2px; left: 0; height: 3px; width: 0; border-radius: 3px;
  background: var(--accent); opacity: 0; pointer-events: none;
  transition: transform .35s var(--ease), width .35s var(--ease), opacity .2s;
}
.header-cta { flex-shrink: 0; }
.nav-mobile-extra { display: none; }
.burger {
  display: none; width: 46px; height: 46px; margin-left: auto; border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px; background: transparent; cursor: pointer; position: relative; z-index: 60;
}
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 29px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero: art canopy with a rosette hanging from its top edge
   ========================================================================== */
.hero { position: relative; padding: 4.25rem 0 5.5rem; background:
  radial-gradient(900px 420px at 88% 0%, rgba(42, 68, 196, .16), transparent 60%),
  radial-gradient(700px 380px at -5% 90%, rgba(242, 169, 59, .14), transparent 60%),
  var(--bg-panel); overflow: hidden; }
.canopy {
  position: relative; border-radius: var(--r-xl); overflow: visible;
  height: clamp(250px, 40vh, 430px); background: var(--ink-2);
  box-shadow: var(--shadow-card); isolation: isolate;
}
.canopy-art, .canopy::after { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.canopy-art { object-fit: cover; z-index: -2; }
.canopy::after {
  content: ""; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 19, 48, .15) 0%, rgba(14, 19, 48, 0) 40%, rgba(14, 19, 48, .55) 100%),
    linear-gradient(90deg, rgba(14, 19, 48, .6) 0%, rgba(14, 19, 48, 0) 45%);
}
.canopy::before { /* card-back lattice hem along the bottom edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; z-index: 1;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background:
    repeating-linear-gradient(45deg, rgba(242, 169, 59, .55) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(242, 169, 59, .55) 0 1px, transparent 1px 7px);
}

/* Rosette medal (decorative, aria-hidden). Hangs across the canopy's top edge. */
.medal {
  position: absolute; top: -58px; left: clamp(1.25rem, 6%, 4.5rem); width: 136px; height: 136px; z-index: 3;
  transform-origin: 50% -30%;
}
.medal-tails { position: absolute; left: 50%; top: 58%; width: 0; height: 0; }
.medal-tails::before, .medal-tails::after {
  content: ""; position: absolute; top: 0; width: 38px; height: 104px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.medal-tails::before { left: -40px; background: linear-gradient(180deg, var(--brand), var(--brand-dark)); transform: rotate(14deg); transform-origin: top right; }
.medal-tails::after { left: 2px; background: linear-gradient(180deg, var(--accent), #D98A18); transform: rotate(-14deg); transform-origin: top left; }
.medal-rosette {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #F7BE55 0 5deg, #D48A1C 5deg 10deg);
  box-shadow: 0 16px 30px -10px rgba(14, 19, 48, .6), 0 0 0 4px rgba(255, 255, 255, .15);
}
.medal-face {
  position: absolute; inset: 20px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #3C57DC, var(--brand-dark) 70%);
  box-shadow: inset 0 0 0 3px #F7BE55, inset 0 0 0 6px var(--brand-dark), inset 0 0 0 7px rgba(247, 190, 85, .6);
  color: #FFE3A8; line-height: 1;
}
.medal-face b { font: italic 700 2.6rem/1 var(--font-heading); display: block; }
.medal-face i { font-style: normal; font-size: 1.05rem; color: var(--accent); display: block; margin-top: .15rem; }

.hero-copy { padding-top: 2.4rem; }
.hero h1 {
  font-size: clamp(2.15rem, 4.3vw, 3.7rem); line-height: 1.1; margin-bottom: 1.35rem; letter-spacing: -.02em;
}
.highlight {
  font-style: italic; color: var(--brand); position: relative; white-space: nowrap;
  display: inline-block; line-height: 1.1; padding-bottom: .08em;
  background: linear-gradient(transparent 62%, rgba(242, 169, 59, .42) 62%, rgba(242, 169, 59, .42) 92%, transparent 92%);
}
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: end; }
.hero-sub { font-size: 1.12rem; color: var(--text-muted); margin: 0; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Stat strip: normal flow, bridges hero and first section. */
.stat-strip { position: relative; z-index: 2; margin-top: -3.25rem; }
.stat-strip-inner {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  background: var(--ink); color: var(--text-on-dark); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-card); border-top: 3px solid var(--accent);
}
.stat { padding: 1.35rem 1.5rem; border-left: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.stat:first-child { border-left: 0; }
.stat b { font-variant-numeric: lining-nums tabular-nums; display: block; font: 700 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--font-heading); color: var(--accent); }
.stat span { display: block; font-size: .86rem; color: #BFC6E4; margin-top: .3rem; }

/* ==========================================================================
   Inner-page hero (same canopy vocabulary, shorter)
   ========================================================================== */
.page-hero { padding: 2.25rem 0 2.5rem; background:
  radial-gradient(800px 360px at 92% 0%, rgba(42, 68, 196, .14), transparent 60%), var(--bg-panel); }
.canopy--page { height: clamp(190px, 28vh, 300px); overflow: hidden; }
.crumb { position: absolute; left: 1.5rem; bottom: 1.4rem; z-index: 2; }
.crumb ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: .35rem .85rem; border-radius: var(--r-pill); background: rgba(14, 19, 48, .66); font-size: .82rem; color: #DDE2F6; }
.crumb li + li::before { content: "\2660"; color: var(--accent); margin-right: .4rem; font-size: .72rem; }
.crumb a { color: #fff; text-decoration: none; }
.page-hero-copy { padding-top: 1.9rem; }
.page-hero h1 { font-size: clamp(1.95rem, 3.6vw, 3rem); letter-spacing: -.015em; }
.page-meta { margin: 1rem 0 0; font-size: .88rem; color: var(--text-dim); }
.page-meta-author { font-weight: 700; color: var(--text-muted); }

/* ==========================================================================
   Sections + builder components
   ========================================================================== */
.sec { padding: clamp(3rem, 6vw, 4.75rem) 0; }
.sec--intro { padding-bottom: 0; }
.sec-head { margin: 0 0 2rem; }
.sec-head p { color: var(--text-muted); font-size: 1.05rem; }

.intro-block {
  margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border-soft);
  border-left: 4px solid var(--brand); border-radius: var(--card-radius); padding: 1.6rem 1.9rem;
  font-size: 1.06rem; color: var(--text-muted); box-shadow: var(--shadow-soft);
}

/* Cards (D7): 18px corners, two-layer shadow, 5px gradient stripe, italic watermark. */
.tile, .plain-card {
  position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--card-radius); padding: 1.7rem 1.6rem 2.1rem; box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tile::before, .plain-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--grad-stripe); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.tile h3 { padding-right: 1.5rem; }
.tile p { color: var(--text-muted); }
.tile-mark {
  position: absolute; right: .9rem; bottom: -1.1rem; pointer-events: none;
  font: italic 700 5.2rem/1 var(--font-heading); color: var(--brand); opacity: .07;
  transition: color .35s, opacity .35s;
}
.tile:hover .tile-mark, .plain-card:hover .tile-mark { color: var(--accent); opacity: .22; }
.plain-card { margin: 0 auto; padding: 2rem 2.2rem 2.4rem; font-size: 1.05rem; color: var(--text-muted); }

.floor-grid { display: grid; gap: 1.25rem; margin: 0 auto; }
.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: one column, H4 kicker, list items become sub-cards. */
.floor-grid--rich { grid-template-columns: minmax(0, 1fr); }
.floor-grid--rich .tile { padding: 2.4rem; }
.tile-kicker {
  font: 800 .78rem/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .18em; color: var(--brand);
  border-top: 2px solid var(--brand); padding-top: .9rem; margin: 1.4rem 0 .9rem;
}
.sub-cards { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.sub-cards li {
  position: relative; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  padding: 1rem 1.15rem 1rem 1.45rem; color: var(--text);
}
.sub-cards li::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--brand), var(--accent)); }

/* Feature check-list: gold tick circles on a golden gradient panel. */
.feature-check-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .65rem; }
.feature-check-list li { position: relative; padding-left: 2.1rem; }
.feature-check-list li::before {
  content: ""; position: absolute; left: 0; top: .2rem; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8 6-6.4' fill='none' stroke='%230E1330' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
ol.feature-check-list { list-style: decimal; padding-left: 1.4rem; }
ol.feature-check-list li { padding-left: .4rem; }
ol.feature-check-list li::before { display: none; }
ol.feature-check-list li::marker { color: var(--brand); font-weight: 800; }
.feature-check-list--plain {
  margin: 0 auto; border-radius: var(--card-radius); padding: 1.9rem 2.1rem;
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-card) 70%);
  border: 1px solid var(--border-soft); border-left: 4px solid var(--accent); box-shadow: var(--shadow-soft);
}
.feature-check-list--plain--wide .feature-check-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1.6rem; }

.split-layout {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2.5rem; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: 2rem; box-shadow: var(--shadow-card);
}
.split-copy { color: var(--text-muted); }
.split-copy .feature-check-list { color: var(--text); }
.split-media { margin: 0; }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }

/* Tables */
.table-card { overflow-x: auto; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--card-radius); box-shadow: var(--shadow-card); }
.table-card table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table-card th, .table-card td { padding: .9rem 1.1rem; text-align: left; vertical-align: top; }
.table-card thead th { background: var(--ink); color: var(--text-on-dark); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.table-card tbody tr:nth-child(even) { background: var(--bg); }
.table-card tbody th { color: var(--brand); font-weight: 800; white-space: nowrap; }
.table-note { margin-top: 1rem; color: var(--text-dim); font-size: .92rem; }
.spec-grid { display: grid; gap: .9rem; }
.spec-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spec-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spec-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spec-grid-head { grid-column: 1 / -1; display: flex; gap: .5rem; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); font-weight: 800; }
.spec-grid-head span + span::before { content: "/ "; }
.spec-cell { background: var(--bg-card); border: 1px solid var(--border-soft); border-top: 3px solid var(--brand); border-radius: var(--r-md); padding: 1rem 1.15rem; box-shadow: var(--shadow-soft); }
.spec-key { display: block; font-size: .8rem; color: var(--text-dim); font-weight: 700; }
.spec-val { font-variant-numeric: lining-nums; display: block; font: 700 1.12rem/1.3 var(--font-heading); color: var(--text); margin-top: .25rem; }

/* R5b image divider: contained figure + decorative aside. */
.image-divider {
  margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.5rem; align-items: stretch;
}
.image-divider-media { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.image-divider-media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.image-divider-aside {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem;
  padding: 2rem; border-radius: var(--r-xl); background: var(--ink); color: var(--text-on-dark); overflow: hidden;
}
.image-divider-aside::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background:
    repeating-linear-gradient(45deg, rgba(242, 169, 59, .22) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(242, 169, 59, .22) 0 1px, transparent 1px 9px);
  -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%);
}
.image-divider-aside .pip { position: relative; font-size: 2.4rem; color: var(--accent); line-height: 1; margin-bottom: auto; }
.aside-kicker { position: relative; font: 800 .72rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: #AEB6DA; }
.aside-title { position: relative; font: 700 1.35rem/1.25 var(--font-heading); color: #fff; text-decoration: none; }
.aside-title:hover { color: var(--accent); }
.image-divider-aside .lattice-rule { position: relative; margin: .6rem 0 0; border-color: var(--accent); }

/* FAQ accordion */
.faq-list { margin: 0 auto; display: grid; gap: .8rem; }
.faq-item {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.faq-item[open] { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--border-strong); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem; font: 700 1.08rem/1.4 var(--font-heading); color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex-shrink: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--ink); font: 800 1.2rem/1 var(--font-body); transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0 1.35rem 1.25rem; color: var(--text-muted); }

/* ==========================================================================
   Homepage bespoke sections
   ========================================================================== */
/* home-intro: sticky heading column + 2x2 tiles */
.home-intro-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: start; }
.home-intro-lead { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.home-intro-lead p { color: var(--text-muted); font-size: 1.05rem; }
.home-intro .floor-grid--cols-2 .tile { padding: 1.5rem 1.4rem 1.9rem; }

/* home-floor: game bento with two real images and a lattice cell */
.bento-floor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); gap: 1.1rem; }
.bento-cell {
  position: relative; overflow: hidden; border-radius: var(--card-radius); padding: 1.6rem;
  background: var(--bg-card); border: 1px solid var(--border-soft); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.bento-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.bento-cell p { color: var(--text-muted); font-size: .96rem; }
.bento-cell h3 a { color: inherit; text-decoration: none; }
.bento-cell h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.bento-cell .go { margin-top: .9rem; font-weight: 800; font-size: .88rem; color: var(--brand); }
.bento-cell--hero { grid-column: span 2; grid-row: span 2; color: var(--text-on-dark); background: var(--ink); min-height: 440px; }
.bento-cell--hero img, .bento-cell--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bento-cell--hero::after, .bento-cell--img::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14, 19, 48, 0) 25%, rgba(14, 19, 48, .92) 88%); }
.bento-cell--hero > :not(img), .bento-cell--img > :not(img) { position: relative; z-index: 3; }
.bento-cell--hero h3, .bento-cell--img h3 { color: #fff; }
.bento-cell--hero p, .bento-cell--img p { color: #D3D9F0; }
.bento-cell--hero .go, .bento-cell--img .go { color: var(--accent); }
.bento-cell--img { grid-column: 1 / -1; min-height: 280px; color: var(--text-on-dark); background: var(--ink); }
.bento-cell--img::after { background: linear-gradient(90deg, rgba(14, 19, 48, .94) 0%, rgba(14, 19, 48, .7) 45%, rgba(14, 19, 48, 0) 80%); }
.bento-cell--img { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-content: end; column-gap: 1.5rem; }
.bento-cell--img > :not(img) { grid-column: 1; }
.bento-cell--lattice { background:
  repeating-linear-gradient(45deg, var(--lattice-ink) 0 1px, transparent 1px 8px),
  repeating-linear-gradient(-45deg, var(--lattice-ink) 0 1px, transparent 1px 8px), var(--brand-light); }
.bento-cell--gold { background: linear-gradient(150deg, var(--accent-soft), var(--bg-card) 75%); border-top: 4px solid var(--accent); }

/* payment tickets */
.pay-tickets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.pay-ticket {
  position: relative; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--card-radius);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.pay-ticket header { padding: 1.1rem 1.3rem; background: var(--ink); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.pay-ticket header b { font: 700 1.2rem/1.2 var(--font-heading); }
.pay-ticket header span { font-size: .78rem; color: var(--accent); font-weight: 800; white-space: nowrap; }
.pay-ticket dl { margin: 0; padding: 1rem 1.3rem 1.2rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem 1rem; font-size: .9rem; }
.pay-ticket dt { color: var(--text-dim); }
.pay-ticket dd { margin: 0; font-weight: 800; text-align: right; color: var(--text); }
.pay-ticket::after { /* perforation between header and body */
  content: ""; position: absolute; left: 12px; right: 12px; top: 3.35rem; border-top: 2px dashed var(--border); }

/* home-secure: 4-up art-deco frames */
.deco-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.deco-cell {
  position: relative; padding: 2rem 1.4rem 1.7rem; background: var(--bg-card); border-radius: 6px;
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-soft);
  outline: 1px solid var(--border); outline-offset: -8px;
}
.deco-cell::before { /* stepped deco crown */
  content: ""; position: absolute; top: -1px; left: 50%; width: 88px; height: 10px; transform: translateX(-50%);
  background: linear-gradient(var(--brand), var(--brand)) center top / 88px 4px no-repeat,
              linear-gradient(var(--accent), var(--accent)) center 5px / 56px 3px no-repeat,
              linear-gradient(var(--brand), var(--brand)) center 9px / 24px 2px no-repeat;
}
.deco-cell .suit { display: block; text-align: center; font-size: 1.6rem; color: var(--brand); margin-bottom: .6rem; }
.deco-cell h3 { text-align: center; font-size: 1.18rem; }
.deco-cell p { color: var(--text-muted); font-size: .95rem; }

/* home-live: split with image, stacked access rows */
.live-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.live-media { margin: 0; position: relative; }
.live-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.access-rows { display: grid; gap: 0; }
.access-row { padding: 1.15rem 0 1.15rem 1.3rem; border-left: 3px solid var(--border); transition: border-color .3s; }
.access-row:hover { border-left-color: var(--accent); }
.access-row h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.access-row p { color: var(--text-muted); font-size: .97rem; }

/* home-rewards bento: welcome top-left, promo-code strip across the bottom */
.rewards-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.reward--wide { grid-column: span 2; }
.reward { position: relative; overflow: hidden; border-radius: var(--card-radius); padding: 1.6rem; background: var(--bg-card); border: 1px solid var(--border-soft); box-shadow: var(--shadow-card); }
.reward p { color: var(--text-muted); font-size: .96rem; }
.reward--welcome { grid-column: span 2; grid-row: span 2; background: var(--ink); color: var(--text-on-dark); display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; }
.reward--welcome img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reward--welcome::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 19, 48, .05), rgba(14, 19, 48, .92) 80%); }
.reward--welcome > :not(img) { position: relative; z-index: 1; }
.reward--welcome h3 { color: #fff; font-size: 1.7rem; }
.reward--welcome p { color: #D3D9F0; font-size: 1.02rem; }
.reward--strip { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto; gap: 1.5rem; align-items: center;
  background: linear-gradient(100deg, var(--accent-soft), var(--bg-card) 60%); border-top: 4px solid var(--accent); }
.reward--strip h3 { margin: 0; }

/* payments ledger: deposits + withdrawals side by side */
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.ledger-col { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: 2rem; box-shadow: var(--shadow-card); }
.ledger-col h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.ledger-col > p { color: var(--text-muted); }
.ledger-item { padding: 1rem 0; border-top: 1px dashed var(--border); }
.ledger-item h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.ledger-item p { color: var(--text-muted); font-size: .95rem; }

/* home-support: editorial card with oversized italic watermark */
.support-card {
  position: relative; overflow: hidden; margin: 0 auto; border-radius: var(--r-xl); padding: clamp(2rem, 4vw, 3.2rem);
  background: var(--bg-card); border: 1px solid var(--border-soft); box-shadow: var(--shadow-card);
}
.support-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--grad-stripe); }
.support-watermark { position: absolute; right: -1rem; bottom: -4.5rem; font: italic 700 clamp(9rem, 22vw, 17rem)/1 var(--font-heading); color: var(--brand); opacity: .06; pointer-events: none; }
.support-card > :not(.support-watermark) { position: relative; }
.support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.4rem; margin-top: 1.4rem; }
.support-grid h3 { font-size: 1.12rem; margin-bottom: .35rem; display: flex; align-items: center; gap: .5rem; }
.support-grid h3::before { content: "\2660"; color: var(--accent); font-size: .9rem; }
.support-grid p { color: var(--text-muted); font-size: .96rem; }

.closing-card { margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem 2.4rem; }
.closing-card p { color: var(--text-muted); font-size: 1.04rem; margin: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { margin-top: 6rem; background: var(--ink); color: #C4CAE6; padding-bottom: 1.5rem; }
.footer-cta { position: relative; top: -3.5rem; margin-bottom: -1.5rem; }
.footer-cta-card {
  position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 2.2rem 2.4rem;
  background: linear-gradient(120deg, #F7BE55, var(--accent) 45%, #E58B1B); color: var(--ink);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55);
}
.footer-cta-card h2 { color: var(--ink); margin: 0 0 .35rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.footer-cta-card p { margin: 0; font-weight: 600; }
.footer-cta-card .btn--cobalt { position: relative; z-index: 1; }
.footer-watermark { position: absolute; right: 8rem; top: 50%; transform: translateY(-50%); font: italic 700 clamp(4rem, 12vw, 9rem)/1 var(--font-heading); color: rgba(14, 19, 48, .1); white-space: nowrap; pointer-events: none; }
.footer-map { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.2rem; padding: 1rem 0 2.5rem; }
.footer-brand img { height: 44px; width: auto; object-fit: contain; margin-bottom: 1rem; }
.footer-brand p { font-size: .93rem; }
.pay-pills { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.pay-pills li { font-size: .78rem; font-weight: 800; padding: .35rem .75rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #E3E7F7; }
.footer-col h3 { font: italic 700 1.15rem/1.2 var(--font-heading); color: #fff; margin-bottom: 1rem; }
.footer-col h3::after { content: ""; display: block; width: 28px; height: 3px; background: var(--accent); border-radius: 3px; margin-top: .55rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-col a { color: #C4CAE6; text-decoration: none; font-size: .94rem; }
.footer-col a:hover { color: var(--accent); }
.trust-row { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1.3rem 0; border-top: 1px solid rgba(255, 255, 255, .08); list-style: none; margin: 0; }
.trust-row li { font-size: .8rem; font-weight: 700; padding: .4rem .85rem; border-radius: var(--r-pill); border: 1px solid rgba(242, 169, 59, .4); color: #F4D9A6; }
.copyright { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .8rem; color: #8F97BC; }
.copyright p { margin: 0; }

/* ==========================================================================
   404
   ========================================================================== */
.err { padding: 4rem 0 2rem; text-align: left; }
.err-code {
  font: italic 700 clamp(8rem, 22vw, 18rem)/.9 var(--font-heading); margin: 0 0 1rem; padding-bottom: .1em;
  background: linear-gradient(120deg, var(--brand), var(--brand-dark) 45%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.err .hero-ctas { margin-top: 1.5rem; }

/* ==========================================================================
   Reveal + motion
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .medal { animation: sway 6s ease-in-out infinite; }
}
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Breakpoints: 1100 / 900 / 700 / 560 / 480
   ========================================================================== */
@media (max-width: 1100px) {
  .util-links li.u-opt { display: none; }
  .primary-nav a { padding: .55rem .55rem; font-size: .88rem; }
  .pay-tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .burger { display: block; }
  .header-cta { display: none; }
  .primary-nav {
    position: fixed; inset: 0; z-index: 55; margin: 0; padding: calc(var(--header-h) + 1.5rem) 1.5rem 2rem;
    background: rgba(9, 12, 32, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto;
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; }
  .primary-nav ul { flex-direction: column; gap: .2rem; }
  .primary-nav a { font: 700 1.5rem/1.3 var(--font-heading); padding: .55rem 0; }
  .nav-indicator { display: none; }
  .nav-mobile-extra { display: block; }
  .nav-mobile-extra ul { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.2rem; }
  .nav-mobile-extra a { font: 600 .95rem/1.4 var(--font-body); color: #C9CFEA; }
  .util-links { display: none; }

  .floor-grid--cols-3, .floor-grid--cols-4, .spec-grid--cols-3, .spec-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-check-list--plain--wide .feature-check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-layout, .home-intro-grid, .live-split, .ledger, .image-divider { grid-template-columns: minmax(0, 1fr); }
  .home-intro-lead { position: static; }
  .bento-floor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .08); }
  .hero-row { grid-template-columns: minmax(0, 1fr); }
  .rewards-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward--strip { grid-template-columns: minmax(0, 1fr); }
  .bento-cell--img { grid-template-columns: minmax(0, 1fr); }
  .bento-cell--img::after { background: linear-gradient(180deg, rgba(14, 19, 48, 0) 20%, rgba(14, 19, 48, .92) 85%); }
  .live-media img { aspect-ratio: 16 / 10; }
}
@media (max-width: 700px) {
  .closing-card, .support-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-cta-card { grid-template-columns: minmax(0, 1fr); }
  .footer-watermark { right: -1rem; }
  .medal { width: 104px; height: 104px; top: -44px; }
  .medal-face { inset: 15px; }
  .medal-face b { font-size: 1.95rem; }
  .medal-tails::before, .medal-tails::after { width: 28px; height: 76px; }
  .medal-tails::before { left: -30px; }
}
@media (max-width: 560px) {
  .container { padding: 0 1rem; }
  .floor-grid--cols-2, .floor-grid--cols-3, .floor-grid--cols-4, .spec-grid--cols-2, .spec-grid--cols-3, .spec-grid--cols-4,
  .bento-floor, .deco-grid, .pay-tickets, .rewards-bento, .footer-map { grid-template-columns: minmax(0, 1fr); }
  .feature-check-list--plain--wide .feature-check-list { grid-template-columns: minmax(0, 1fr); }
  .bento-cell--hero, .bento-cell--img, .reward--welcome, .reward--wide { grid-column: auto; grid-row: auto; }
  .bento-cell--hero, .reward--welcome { min-height: 380px; }
  .bento-cell--hero::after, .bento-cell--img::after, .reward--welcome::after { background: linear-gradient(180deg, rgba(14, 19, 48, .1) 0%, rgba(14, 19, 48, .88) 42%, rgba(14, 19, 48, .96) 100%); }
  .hero { padding-top: 3.6rem; }
  .plain-card, .intro-block, .feature-check-list--plain, .split-layout, .ledger-col { padding: 1.4rem; }
  .floor-grid--rich .tile { padding: 1.6rem 1.3rem; }
  .crumb { left: 1rem; bottom: 1rem; }
  .hero-ctas .btn { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  .brand-link img { height: 40px; }
  .stat { padding: 1rem; }
  .table-card thead { display: none; }
  .table-card tr { display: block; padding: .8rem 1rem; border-bottom: 1px solid var(--border-soft); }
  .table-card th, .table-card td { display: block; padding: .15rem 0; }
  .table-card td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--text-dim); }
}