:root {
  color-scheme: dark;
  --bg: #090b17;
  --panel: rgba(20, 22, 45, 0.9);
  --panel-soft: rgba(15, 17, 36, 0.86);
  --text: #f8f6ff;
  --muted: #bfbbcf;
  --violet: #c8a7ff;
  --cyan: #8de7e3;
  --gold: #e7c887;
  --line: rgba(216, 198, 255, 0.18);
  --display: "Cormorant Garamond", Georgia, serif;
  --body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 5%, rgba(83, 208, 220, 0.11), transparent 25rem),
    radial-gradient(circle at 90% 16%, rgba(157, 92, 226, 0.14), transparent 30rem),
    linear-gradient(180deg, #080a14, #0d1020 52%, #090a15);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.7;
}

a { color: inherit; }

img { display: block; max-width: 100%; height: auto; }

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 20;
  padding: 0.7rem 1rem;
  border-radius: 0.6rem;
  background: #fff;
  color: #111;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.shell { width: min(100% - 2rem, 72rem); margin-inline: auto; }

.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(8, 10, 20, 0.86);
  backdrop-filter: blur(14px);
}

.header-inner {
  display: flex;
  min-height: 4.6rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
}

.brand-mark { color: var(--gold); }

.nav { display: none; gap: 1.2rem; color: var(--muted); font-size: 0.9rem; }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--text); }

.button {
  display: inline-flex;
  min-height: 3rem;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.1rem;
  border: 1px solid rgba(141, 231, 227, 0.48);
  border-radius: 999px;
  background: linear-gradient(135deg, #8de7e3, #c8a7ff);
  box-shadow: 0 12px 30px rgba(117, 161, 226, 0.2);
  color: #101124;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.header-cta { display: none; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-top: 1.25rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.breadcrumbs a { text-underline-offset: 0.2em; }

.hero {
  display: grid;
  gap: 1.5rem;
  padding: clamp(2.5rem, 8vw, 5.5rem) 0 clamp(3rem, 8vw, 6rem);
}

.eyebrow {
  margin: 0 0 0.7rem;
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  line-height: 1.03;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1 { max-width: 13ch; font-size: clamp(2.4rem, 12vw, 5.7rem); }
h2 { font-size: clamp(2.15rem, 8vw, 3.6rem); }
h3 { font-size: clamp(1.45rem, 5vw, 1.8rem); }

.lead {
  max-width: 43rem;
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 4.8vw, 1.3rem);
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; margin-top: 1.5rem; }
.identity { color: var(--muted); font-size: 0.9rem; }

.hero-media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  box-shadow: 0 28px 70px rgba(2, 3, 12, 0.48);
}

.hero > * { min-width: 0; }

.hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.section { padding: clamp(3.5rem, 9vw, 6.5rem) 0; border-top: 1px solid var(--line); }
.section-intro { max-width: 46rem; margin-bottom: 2rem; }
.section-intro p:last-child { margin: 1rem 0 0; color: var(--muted); }

.grid { display: grid; gap: 1rem; }

.card {
  min-width: 0;
  padding: clamp(1.25rem, 5vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, var(--panel), var(--panel-soft));
  box-shadow: 0 18px 46px rgba(2, 3, 14, 0.2);
}

.card-symbol {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 1.4rem;
  place-items: center;
  border: 1px solid rgba(231, 200, 135, 0.3);
  border-radius: 50%;
  color: var(--gold);
}

.card p { margin: 0.8rem 0 0; color: var(--muted); }

.answer-box {
  padding: clamp(1.4rem, 6vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 85% 25%, rgba(141, 231, 227, 0.13), transparent 18rem),
    linear-gradient(145deg, rgba(31, 27, 59, 0.96), rgba(12, 14, 31, 0.97));
}

.answer-box p { max-width: 48rem; color: var(--muted); }

.check-list { display: grid; gap: 0.8rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 1.7rem; }
.check-list li::before { position: absolute; left: 0; color: var(--cyan); content: "✦"; }

.related a {
  display: block;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(18, 20, 42, 0.75);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.related a:hover { border-color: rgba(141, 231, 227, 0.5); color: var(--cyan); }

.faq { display: grid; gap: 0.75rem; }
.faq details { border: 1px solid var(--line); border-radius: 1rem; background: rgba(17, 19, 40, 0.78); }
.faq summary { padding: 1.1rem 1.2rem; cursor: pointer; font-weight: 700; }
.faq details p { margin: 0; padding: 0 1.2rem 1.2rem; color: var(--muted); }

.final-cta { text-align: center; }
.final-cta p { max-width: 42rem; margin: 1rem auto 1.5rem; color: var(--muted); }

.disclaimer {
  margin-top: 2rem;
  padding: 1rem;
  border-left: 3px solid var(--gold);
  background: rgba(231, 200, 135, 0.06);
  color: var(--muted);
  font-size: 0.86rem;
  text-align: left;
}

.site-footer { padding: 2rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.84rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 1.5rem; }
.footer-inner a { color: var(--text); }

@media (min-width: 48rem) {
  .shell { width: min(100% - 3rem, 72rem); }
  .nav { display: flex; }
  .header-cta { display: inline-flex; }
  .hero { grid-template-columns: minmax(0, 1.03fr) minmax(20rem, 0.97fr); align-items: center; }
  .hero-media img { aspect-ratio: 5 / 4; }
  .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}