/* ============================================================
   home.css — homepage-only composition
   ============================================================ */

/* ---------- HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3.5rem, 2rem + 6vw, 7rem);
  background:
    radial-gradient(ellipse 90% 60% at 78% 18%, rgba(196,30,58,.16), transparent 62%),
    radial-gradient(ellipse 70% 50% at 8% 88%, rgba(201,169,97,.09), transparent 66%),
    var(--ink-obsidian);
}
.hero .guilloche { top: -22%; right: -20%; }
.hero .shaft { top: -30%; right: 8%; }

.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

/* No ch-based cap here: `ch` resolves against this element's 16px body font,
   which would clamp the whole column to ~290px and wrap the display headline
   mid-phrase. The grid column governs width; the headline and lede set their
   own measures below. */
.hero-copy { max-width: 34rem; }
.hero h1 {
  font-size: var(--fs-display);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--ink-50);
  max-width: 12ch;
}
.hero h1 em {
  display: block;
  font-style: italic;
  font-weight: 400;
}
.hero-sub {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  color: var(--ink-200);
  max-width: 46ch;
  line-height: 1.66;
}
.hero-cta { margin-top: var(--sp-6); }
.hero-assure {
  margin-top: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
}
.hero-assure li {
  display: flex; align-items: center; gap: .45rem;
  font-size: var(--fs-xs); color: var(--ink-300);
}
.hero-assure svg { width: 13px; height: 13px; color: var(--gold-500); flex: none; }

.hero-stage { position: relative; display: flex; justify-content: center; }

/* ---------- CHAPTER RIBBON STRIP (under hero) ---------- */
.strip {
  border-block: 1px solid var(--ink-line-soft);
  background: var(--ink-900);
  overflow: hidden;
}
.strip-in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-line-soft);
}
.strip-cell {
  background: var(--ink-900);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  transition: background-color var(--t) var(--ease);
}
.strip-cell:hover { background: var(--ink-850); }
.strip-cell b {
  display: block;
  font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 500; letter-spacing: -0.03em;
  color: var(--gold-300);
  line-height: 1.1;
}
.strip-cell span {
  display: block; margin-top: .4rem;
  font-size: var(--fs-micro); letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--ink-400);
}

/* ---------- BONUS SHOWCASE BAND ---------- */
.bonus {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 3rem + 5vw, 7rem);
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(196,30,58,.22), transparent 70%),
    linear-gradient(160deg, #1A0A10 0%, #12070B 55%, #0A0708 100%);
  border-block: 1px solid var(--gold-hair-soft);
  text-align: center;
}
.bonus .guilloche { top: 50%; left: 50%; translate: -50% -50%; opacity: .1; }

.bonus-in { position: relative; z-index: 1; }
.bonus-card {
  position: relative;
  max-width: 780px; margin-inline: auto;
  padding: clamp(2rem, 1.4rem + 3vw, 3.4rem) clamp(1.2rem, .8rem + 2vw, 3rem);
  border: 1px solid var(--gold-hair);
  border-radius: var(--radius);
  background: rgba(10,7,8,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bonus-fig {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 1.6rem + 10.5vw, 9rem);
  font-weight: 600;
  line-height: .94;
  letter-spacing: -0.045em;
  margin-block: var(--sp-3);
}
.bonus-fig .cur { font-size: .5em; vertical-align: .28em; margin-right: .04em; }
.bonus-label {
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--gold-400);
}
.bonus-note {
  max-width: 56ch; margin: var(--sp-5) auto 0;
  font-size: var(--fs-sm); color: var(--ink-300); line-height: 1.7;
}
.bonus-cta { margin-top: var(--sp-6); justify-content: center; }
.bonus-terms {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs); color: var(--ink-400);
}
.bonus-terms a { color: var(--gold-400); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- SHOWCASE (OG banner frame) ---------- */
.showcase-frame {
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-850);
}
.showcase-frame img { width: 100%; height: auto; display: block; }
/* Caption sits BELOW the art — the banner has its own baked-in text
   that an overlay gradient would obscure. */
.showcase-cap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--ink-line);
  background: var(--ink-900);
}
.showcase-cap p { font-size: var(--fs-xs); color: var(--ink-300); max-width: 62ch; }
.showcase-cap b { color: var(--gold-300); }

/* ---------- THE VAULT (dark rail) ---------- */
.vault {
  background: linear-gradient(180deg, #060405 0%, #0C0708 100%);
  border-block: 1px solid var(--ink-line);
  padding-block: var(--section-y);
  position: relative;
  overflow: hidden;
}
.vault .guilloche-b { bottom: -40%; left: -14%; }
.vault-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  position: relative; z-index: 1;
}
.vault-rail {
  display: flex; gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-4);
  /* bleed to the viewport edge so the rail reads as continuous */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  position: relative; z-index: 1;
}
.vault-rail > li { scroll-snap-align: start; flex: 0 0 auto; width: 168px; }
.vault-rail .gcard { background: var(--ink-800); }

/* ---------- ROTARY DIAL ("how it works") ---------- */
.dial-wrap {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.dial { position: relative; width: 100%; max-width: 380px; margin-inline: auto; }
.dial svg { width: 100%; height: auto; overflow: visible; }
.dial-ring { fill: none; stroke: var(--ink-line); stroke-width: 1; }
.dial-track { fill: none; stroke: var(--gold-500); stroke-width: 1.5; stroke-linecap: round; }
.dial-track-2 { fill: none; stroke: var(--ruby-500); stroke-width: 1.5; stroke-linecap: round; }
.dial-node { fill: var(--ink-obsidian); stroke: var(--gold-500); stroke-width: 1.5; }
.dial-num {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  fill: var(--gold-300); text-anchor: middle; dominant-baseline: central;
}
.dial-center {
  font-family: var(--font-ui); font-size: 9px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  fill: var(--ink-400); text-anchor: middle;
}
.dial-tick { stroke: var(--ink-500); stroke-width: 1; }

.dial-steps li {
  position: relative;
  padding: var(--sp-5) 0 var(--sp-5) 4.2rem;
  border-bottom: 1px solid var(--ink-line-soft);
}
.dial-steps li:last-child { border-bottom: 0; }
.dial-steps li::before {
  content: attr(data-n);
  position: absolute; left: 0; top: var(--sp-5);
  width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center;
  border: 1px solid var(--gold-hair); border-radius: 50%;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  color: var(--gold-300);
}
.dial-steps h3 { margin-bottom: .4rem; }
.dial-steps p { color: var(--ink-200); font-size: var(--fs-sm); }

/* ---------- FEATURE GRID ---------- */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-line-soft);
  border: 1px solid var(--ink-line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.feat {
  background: var(--ink-obsidian);
  padding: var(--sp-6);
  transition: background-color var(--t) var(--ease);
}
.feat:hover { background: var(--ink-850); }
.feat .plate { margin-bottom: var(--sp-4); }
.feat:hover .plate { border-color: var(--gold-hair); color: var(--gold-300); }
.feat h3 { font-size: var(--fs-h4); margin-bottom: .6rem; }
.feat p { font-size: var(--fs-sm); color: var(--ink-300); }

/* ---------- CATEGORY BREAKDOWN ---------- */
.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.cat {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-5);
}
.cat-art {
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 1px solid var(--ink-line);
  aspect-ratio: 211 / 260;
}
.cat-art img { width: 100%; height: 100%; object-fit: cover; }
.cat-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-bottom: .55rem;
}
.cat-head h3 { font-size: var(--fs-h4); margin: 0; }
.cat-count {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--gold-400);
  border: 1px solid var(--gold-hair-soft);
  border-radius: var(--radius-pill);
  padding: .18rem .5rem;
}
.cat p { font-size: var(--fs-sm); color: var(--ink-300); }
.cat .link-kink { margin-top: var(--sp-3); }

/* ---------- DEEP DIVE (split prose) ---------- */
.dive { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.dive-col { padding: var(--sp-6); }
.dive-col h3 { display: flex; align-items: center; gap: .7rem; margin-bottom: var(--sp-4); }
.dive-col h3 svg { width: 19px; height: 19px; color: var(--gold-400); flex: none; }
.dive-col p { font-size: var(--fs-sm); color: var(--ink-200); }
.dive-col p + p { margin-top: .95em; }
.dive-list { margin-top: var(--sp-4); }
.dive-list li {
  display: flex; gap: .7rem;
  padding-block: .55rem;
  font-size: var(--fs-sm); color: var(--ink-200);
  border-top: 1px solid var(--ink-line-soft);
}
.dive-list li b { color: var(--ink-50); flex: none; min-width: 8.5rem; font-family: var(--font-ui); font-weight: 600; }

/* ---------- TRUST STRIP ---------- */
.trust {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-line-soft);
  border-block: 1px solid var(--ink-line-soft);
}
.trust-cell {
  background: var(--ink-obsidian);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  transition: background-color var(--t) var(--ease);
}
.trust-cell:hover { background: var(--ink-900); }
.trust-cell svg { width: 22px; height: 22px; color: var(--gold-500); margin-inline: auto; margin-bottom: .7rem; }
.trust-cell b {
  display: block;
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-50);
  margin-bottom: .25rem;
}
.trust-cell span { display: block; font-size: 11px; color: var(--ink-400); line-height: 1.5; }

/* ---------- RESPONSIBLE GAMING ---------- */
.rg {
  background: linear-gradient(150deg, rgba(196,30,58,.07), transparent 60%), var(--ink-900);
  border-block: 1px solid var(--ink-line);
}
.rg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
.rg-tools li {
  display: flex; gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--ink-line-soft);
}
.rg-tools li:first-child { border-top: 0; padding-top: 0; }
.rg-tools .plate { width: 40px; height: 40px; }
.rg-tools .plate svg { width: 18px; height: 18px; }
.rg-tools h4 { font-size: var(--fs-body); margin-bottom: .25rem; }
.rg-tools p { font-size: var(--fs-sm); color: var(--ink-300); }
.rg-help {
  padding: var(--sp-5);
  border: 1px solid var(--ruby-800);
  border-radius: var(--radius);
  background: rgba(92,7,21,.22);
}
.rg-help h4 { color: var(--ruby-300); margin-bottom: var(--sp-3); }
.rg-help dl { display: grid; gap: .8rem; }
.rg-help dt {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink-50);
}
.rg-help dd { font-size: var(--fs-sm); color: var(--ink-200); margin: 0; }
.rg-help dd a { color: var(--gold-300); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- TELEGRAM SPLIT ---------- */
.tg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.tg-card {
  position: relative;
  padding: var(--sp-6);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.tg-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
/* Support: Telegram blue. Community: house ruby. Deliberately
   different silhouettes so the two can never be mistaken. */
.tg-support {
  background: linear-gradient(150deg, rgba(34,158,217,.16), rgba(34,158,217,.03));
  border: 1px solid rgba(34,158,217,.36);
}
.tg-community {
  background: linear-gradient(150deg, rgba(196,30,58,.16), rgba(196,30,58,.03));
  border: 1px solid rgba(224,48,76,.36);
}
.tg-ico {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  margin-bottom: var(--sp-4);
}
.tg-support .tg-ico {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tg-blue), var(--tg-blue-2));
  color: #fff;
}
.tg-community .tg-ico {
  border-radius: var(--radius-sm);
  rotate: 45deg;
  background: var(--grad-ruby);
  color: #fff;
}
.tg-community .tg-ico svg { rotate: -45deg; }
.tg-ico svg { width: 24px; height: 24px; }
.tg-card h3 { margin-bottom: .5rem; }
.tg-card p { font-size: var(--fs-sm); color: var(--ink-200); margin-bottom: var(--sp-5); }
.tg-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

/* ---------- SEO LONG-FORM ---------- */
.seo { background: var(--ink-900); border-block: 1px solid var(--ink-line-soft); }
.seo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}
.seo-grid p { font-size: var(--fs-sm); color: var(--ink-300); line-height: 1.8; }
.seo-grid p + p { margin-top: 1.1em; }
.seo-grid h3 { font-size: var(--fs-h4); margin-bottom: .7rem; }
.seo-grid h3 + p { margin-top: 0; }
.seo-grid a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- FINAL CTA ---------- */
.final {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 3rem + 5vw, 7.5rem);
  background:
    radial-gradient(ellipse 70% 70% at 50% 110%, rgba(196,30,58,.24), transparent 66%),
    linear-gradient(180deg, #0A0708, #140A0E);
  text-align: center;
}
.final .guilloche { bottom: -70%; left: 50%; translate: -50% 0; }
.final-in { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; }
.final h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-h1); letter-spacing: var(--ls-display); line-height: var(--lh-tight);
}
.final p { margin-top: var(--sp-4); color: var(--ink-200); font-size: var(--fs-lead); }
.final .btn-group { justify-content: center; margin-top: var(--sp-6); }
.final-fine { margin-top: var(--sp-5); font-size: var(--fs-xs); color: var(--ink-400); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .hero-copy { max-width: 100%; }
  .hero h1 { max-width: 14ch; }
  .dial-wrap { grid-template-columns: minmax(0, 1fr); }
  .rg-grid { grid-template-columns: minmax(0, 1fr); }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seo-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .cats { grid-template-columns: minmax(0, 1fr); }
  .dive { grid-template-columns: minmax(0, 1fr); }
  .tg { grid-template-columns: minmax(0, 1fr); }
  .strip-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vault-rail > li { width: 148px; }
}

@media (max-width: 560px) {
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat { grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-4); }
  .dive-list li { flex-direction: column; gap: .2rem; }
  .dive-list li b { min-width: 0; }
  .showcase-cap { flex-direction: column; align-items: flex-start; }
}