:root {
  color-scheme: dark;
  --seo-bg: #071016;
  --seo-panel: #0d1b22;
  --seo-line: rgba(131, 214, 194, 0.22);
  --seo-copy: #d9e7e3;
  --seo-muted: #9bb0aa;
  --seo-accent: #71ddc4;
  --seo-gold: #e0bd72;
}

* { box-sizing: border-box; }

html { background: var(--seo-bg); }

body {
  margin: 0;
  color: var(--seo-copy);
  background:
    radial-gradient(circle at 12% 8%, rgba(50, 148, 132, 0.12), transparent 28rem),
    var(--seo-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: var(--seo-accent); }

.seo-main {
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
  padding: 54px 0 80px;
}

.seo-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
  color: var(--seo-muted);
  font-size: 0.86rem;
}

.seo-breadcrumbs a { color: inherit; }

.seo-hero {
  max-width: 880px;
  margin-bottom: 34px;
}

.seo-kicker {
  margin: 0 0 8px;
  color: var(--seo-gold);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.seo-hero h1 {
  margin: 0;
  color: #f4f1e7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 6vw, 4.9rem);
  line-height: 0.98;
}

.seo-lede {
  max-width: 820px;
  margin: 20px 0 0;
  color: #c4d4cf;
  font-size: clamp(1.04rem, 2vw, 1.25rem);
  line-height: 1.65;
}

.seo-notice {
  padding: 14px 16px;
  border: 1px solid rgba(224, 189, 114, 0.28);
  border-radius: 12px;
  background: rgba(224, 189, 114, 0.07);
  color: #d8cda9;
  line-height: 1.55;
}

.seo-section {
  margin-top: 34px;
  padding-top: 10px;
}

.seo-section h2 {
  margin: 0 0 14px;
  color: #f0eee6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
}

.seo-section > p,
.seo-card p,
.seo-step p,
.seo-facts dd,
.seo-list li { line-height: 1.65; }

.seo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.seo-card,
.seo-step,
.seo-facts > div {
  padding: 18px;
  border: 1px solid var(--seo-line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(17, 37, 45, 0.96), rgba(9, 24, 30, 0.96));
}

.seo-card { display: block; text-decoration: none; }
.seo-card:hover { border-color: rgba(113, 221, 196, 0.6); }
.seo-card strong, .seo-step strong { color: #f2efe5; font-size: 1.05rem; }
.seo-card span { display: block; margin-top: 8px; color: var(--seo-muted); line-height: 1.5; }

.seo-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 0;
}

.seo-facts dt {
  margin-bottom: 7px;
  color: var(--seo-gold);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.seo-facts dd { margin: 0; }
.seo-list { padding-left: 1.25rem; }
.seo-list li + li { margin-top: 8px; }

.seo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.seo-actions a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 17px;
  border: 1px solid rgba(113, 221, 196, 0.45);
  border-radius: 999px;
  background: rgba(113, 221, 196, 0.09);
  font-weight: 750;
  text-decoration: none;
}

.seo-disclaimer {
  margin-top: 46px;
  color: var(--seo-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .seo-main { width: min(100% - 22px, 1160px); padding-top: 34px; }
  .seo-card, .seo-step, .seo-facts > div { padding: 15px; }
}