/* ═══════════════════════════════════════════════
   Final Boss Productions — Article / SEO pages
   Lightweight, static, no JS dependencies.
   Shares design tokens with style.css.
   ═══════════════════════════════════════════════ */

:root {
  --brand: #8c52ff;
  --brand-soft: #a97dff;
  --brand-deep: #5b2ec4;
  --bg: #0a0614;
  --bg-2: #100a1f;
  --bg-3: #171029;
  --ink: #f2eefc;
  --ink-dim: #b3a9cc;
  --ink-faint: #6f6590;
  --line: rgba(140, 82, 255, 0.18);
  --glow: 0 0 40px rgba(140, 82, 255, 0.35);
  --font-body: "Heebo", system-ui, sans-serif;
  --font-display: "Karantina", "Heebo", sans-serif;
  --font-mono: "Space Grotesk", monospace;
  --nav-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
img, video { max-width: 100%; display: block; }
a { color: var(--brand-soft); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.container { width: min(1100px, 92vw); margin-inline: auto; }
.container--narrow { width: min(780px, 92vw); }

/* ─────────── Nav ─────────── */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 6, 20, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-nav__inner {
  width: min(1200px, 94vw); margin-inline: auto;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-nav__logo {
  font-family: var(--font-mono); font-weight: 700; font-size: 15px;
  color: var(--ink); letter-spacing: 0.06em; white-space: nowrap;
}
.site-nav__logo em { color: var(--brand-soft); font-style: normal; }
.site-nav__logo:hover { text-decoration: none; }
.site-nav__links { display: flex; gap: 22px; align-items: center; }
.site-nav__links a { color: var(--ink-dim); font-size: 15px; font-weight: 500; }
.site-nav__links a:hover { color: var(--ink); text-decoration: none; }
.site-nav__links a[aria-current="page"] { color: var(--brand-soft); }
.btn-cta {
  display: inline-block; background: var(--brand); color: #fff;
  padding: 10px 22px; border-radius: 999px; font-weight: 700; font-size: 15px;
  box-shadow: var(--glow); transition: background 0.2s, transform 0.2s;
}
.btn-cta:hover { background: var(--brand-deep); text-decoration: none; transform: translateY(-1px); }
@media (max-width: 760px) {
  .site-nav__links { display: none; }
}

/* ─────────── Breadcrumbs ─────────── */
.breadcrumbs {
  padding: 18px 0 0;
  font-size: 13.5px; color: var(--ink-faint);
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li:not(:last-child)::after { content: "‹"; margin-inline-start: 6px; color: var(--ink-faint); }
.breadcrumbs a { color: var(--ink-dim); }
.breadcrumbs [aria-current] { color: var(--brand-soft); }

/* ─────────── Article header ─────────── */
.article-head { padding: 34px 0 10px; }
.article-head h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.22; font-weight: 800; letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.article-head .lead {
  font-size: clamp(17px, 2.4vw, 20px);
  color: var(--ink-dim); max-width: 60ch;
}
.article-meta {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-faint);
}
.article-meta strong { color: var(--ink-dim); font-weight: 600; }

/* ─────────── Article body ─────────── */
.article-body { padding: 26px 0 40px; }
.article-body > * + * { margin-top: 1.15em; }
.article-body h2 {
  font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; line-height: 1.3;
  margin-top: 2em; padding-top: 0.6em; border-top: 1px solid var(--line);
}
.article-body h2:first-child { margin-top: 0.4em; border-top: 0; padding-top: 0; }
.article-body h3 { font-size: clamp(19px, 2.6vw, 24px); font-weight: 700; margin-top: 1.6em; }
.article-body h4 { font-size: 17.5px; font-weight: 700; margin-top: 1.3em; color: var(--brand-soft); }
.article-body p { color: var(--ink-dim); }
.article-body strong { color: var(--ink); }
.article-body ul, .article-body ol { padding-inline-start: 1.4em; color: var(--ink-dim); }
.article-body li { margin-top: 0.45em; }
.article-body li::marker { color: var(--brand-soft); }
.article-body blockquote {
  border-inline-start: 3px solid var(--brand);
  padding: 10px 18px; background: var(--bg-2); border-radius: 8px;
  color: var(--ink-dim); font-style: normal;
}

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.article-body th, .article-body td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--line); }
.article-body th { background: var(--bg-3); color: var(--ink); font-weight: 700; white-space: nowrap; }
.article-body td { color: var(--ink-dim); }
.article-body tr:last-child td { border-bottom: 0; }

/* highlight box */
.note-box {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; color: var(--ink-dim);
}
.note-box strong:first-child { color: var(--brand-soft); }

/* ─────────── FAQ (native details) ─────────── */
.faq-block { margin-top: 2.2em; }
.faq-block details {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-2); margin-top: 10px; overflow: hidden;
}
.faq-block summary {
  cursor: pointer; list-style: none; padding: 16px 20px;
  font-weight: 700; color: var(--ink); position: relative;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-block summary::-webkit-details-marker { display: none; }
.faq-block summary::after { content: "+"; color: var(--brand-soft); font-size: 22px; font-weight: 400; }
.faq-block details[open] summary::after { content: "–"; }
.faq-block .faq-a { padding: 0 20px 18px; color: var(--ink-dim); }
.faq-block .faq-a > * + * { margin-top: 0.7em; }

/* ─────────── CTA banner ─────────── */
.cta-banner {
  margin: 3em 0 1em; padding: 34px 30px;
  background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line); border-radius: 18px;
  text-align: center;
}
.cta-banner h2, .cta-banner .cta-title {
  font-size: clamp(22px, 3vw, 30px); font-weight: 800;
  border: 0; padding: 0; margin: 0 0 10px;
}
.cta-banner p { color: var(--ink-dim); max-width: 55ch; margin-inline: auto; }
.cta-banner .btn-cta { margin-top: 20px; font-size: 17px; padding: 13px 34px; }

/* ─────────── Related links ─────────── */
.related { padding: 10px 0 60px; }
.related h2 { font-size: 22px; font-weight: 800; margin-bottom: 18px; }
.related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.related__grid a {
  display: block; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg-2); color: var(--ink);
  font-weight: 600; font-size: 15px; line-height: 1.5;
  transition: border-color 0.2s, transform 0.2s;
}
.related__grid a:hover { border-color: var(--brand); text-decoration: none; transform: translateY(-2px); }
.related__grid a span { display: block; font-size: 12.5px; color: var(--ink-faint); font-weight: 400; margin-top: 4px; }

/* ─────────── Index/hub cards ─────────── */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; padding: 30px 0 60px; }
.hub-card {
  display: block; padding: 24px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-2); color: var(--ink); transition: border-color 0.2s, transform 0.2s;
}
.hub-card:hover { border-color: var(--brand); text-decoration: none; transform: translateY(-3px); }
.hub-card h2, .hub-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; border: 0; padding: 0; }
.hub-card p { color: var(--ink-dim); font-size: 14.5px; }
.hub-card .hub-card__tag { display: inline-block; font-size: 12px; color: var(--brand-soft); font-family: var(--font-mono); margin-bottom: 10px; }

/* ─────────── Footer ─────────── */
.site-footer {
  border-top: 1px solid var(--line); background: var(--bg-2);
  padding: 40px 0 30px; margin-top: 20px;
  font-size: 14px; color: var(--ink-faint);
}
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px; }
.site-footer h2 { font-size: 15px; color: var(--ink); font-weight: 700; margin-bottom: 12px; }
.site-footer ul { list-style: none; }
.site-footer li { margin-top: 7px; }
.site-footer a { color: var(--ink-dim); }
.site-footer a:hover { color: var(--brand-soft); }
.site-footer__bottom {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
}

/* ─────────── Offer box ─────────── */
.offer-box {
  margin: 2.4em 0;
  padding: 28px 26px;
  border: 1px solid var(--brand);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(140, 82, 255, 0.14), var(--bg-2));
  box-shadow: 0 0 40px rgba(140, 82, 255, 0.18);
  text-align: center;
}
.offer-box__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--brand-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 14px;
}
.offer-box__title {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 10px;
}
.offer-box p { color: var(--ink-dim); max-width: 52ch; margin-inline: auto; }
.offer-box .btn-cta { margin-top: 18px; font-size: 16px; padding: 12px 32px; }
.offer-box__disclaimer {
  margin-top: 16px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}