@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair-display-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --canvas: #faf7f2;
  --surface: #ffffff;
  --sand: #ede7e0;
  --line: #ddd6ce;
  --ink: #18181b;
  --muted: #5f6873;
  --violet: #7c3aed;
  --violet-dark: #6d28d9;
  --violet-soft: #f3edff;
  --terracotta: #d97768;
  --sage: #84a98c;
  font-family: "Inter", system-ui, sans-serif;
  background: var(--canvas);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; text-wrap: balance; }
p { line-height: 1.7; }

.seo-header,
.seo-footer,
.seo-page main {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.seo-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.seo-brand img { width: 178px; height: auto; }
.seo-header nav { display: flex; align-items: center; gap: 20px; font-size: .92rem; font-weight: 700; }
.seo-header nav a { text-decoration: none; }

.seo-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 8px;
  background: var(--violet);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.seo-button:hover { background: var(--violet-dark); transform: translateY(-1px); }
.seo-button:focus-visible, a:focus-visible { outline: 3px solid #d4a017; outline-offset: 3px; }
.seo-button-small { min-height: 40px; padding: 9px 16px; }
.seo-text-link { font-weight: 700; }
.seo-kicker { display: block; margin-bottom: 18px; color: var(--violet); font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }

.seo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(36px, 7vw, 88px);
  align-items: center;
  padding: clamp(64px, 10vw, 124px) 0;
}
.seo-hero-copy h1 { max-width: 760px; margin-bottom: 24px; font-size: clamp(2.85rem, 5vw, 4.8rem); line-height: 1; letter-spacing: -.04em; }
.seo-hero-copy > p { max-width: 690px; color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.25rem); }
.seo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 32px; }
.seo-hero figure { min-height: 540px; margin: 0; overflow: hidden; border-radius: 12px; background: var(--sand); }
.seo-hero figure img { width: 100%; height: 100%; min-height: 540px; object-fit: cover; filter: saturate(.76) contrast(.96); }
.seo-hero-audience figure { min-height: 480px; }
.seo-hero-audience figure img { min-height: 480px; }

.seo-intro,
.seo-privacy {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 120px) clamp(24px, 6vw, 80px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.seo-intro h2, .seo-privacy h2 { margin-bottom: 24px; font-size: clamp(2.2rem, 4.4vw, 4.2rem); line-height: 1.05; }
.seo-intro p, .seo-privacy p { color: var(--muted); font-size: 1.08rem; }

.seo-benefits { padding: clamp(80px, 11vw, 136px) 0; }
.seo-section-heading { display: grid; grid-template-columns: .55fr 1.45fr; gap: 48px; align-items: end; margin-bottom: 48px; }
.seo-section-heading h2 { margin: 0; font-size: clamp(2.3rem, 4.2vw, 4rem); line-height: 1.05; }
.seo-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.seo-card-grid article { min-height: 270px; padding: 32px; border: 1px solid var(--line); border-top: 4px solid var(--violet); border-radius: 10px; background: var(--surface); }
.seo-card-grid article:nth-child(2) { border-top-color: var(--terracotta); }
.seo-card-grid article:nth-child(3) { border-top-color: var(--sage); }
.seo-card-grid h3 { margin-bottom: 42px; font-size: 1.65rem; }
.seo-card-grid p { color: var(--muted); }

.seo-flow {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 72px;
  padding: clamp(72px, 9vw, 112px);
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
}
.seo-flow h2 { font-size: clamp(2.4rem, 4vw, 4rem); line-height: 1.05; }
.seo-flow ol { display: grid; gap: 22px; margin: 0; padding-left: 24px; }
.seo-flow li { padding-left: 12px; font-size: 1.08rem; line-height: 1.6; }

.seo-audience-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 48px 0; }
.seo-audience-nav a { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-weight: 700; text-align: center; text-decoration: none; }
.seo-audience-nav a:hover { border-color: var(--violet); color: var(--violet); }
.seo-final-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 36px 0 96px; padding: clamp(36px, 6vw, 72px); border: 1px solid #ded2f4; border-radius: 12px; background: var(--violet-soft); }
.seo-final-cta h2 { max-width: 760px; margin: 0; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.04; }
.seo-breadcrumb { display: flex; gap: 10px; padding-top: 28px; color: var(--muted); font-size: .88rem; }

.seo-footer { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 36px; align-items: start; padding: 56px 0 44px; border-top: 1px solid var(--line); }
.seo-footer-brand { font-family: "Playfair Display", Georgia, serif; font-size: 1.7rem; font-weight: 700; text-decoration: none; }
.seo-footer p { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; }
.seo-language-nav { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.seo-language-nav a[aria-current="page"] { color: var(--violet); font-weight: 800; }
.seo-footer address { display: grid; gap: 10px; font-style: normal; }
.seo-footer small { grid-column: 1 / -1; color: var(--muted); }

@media (max-width: 820px) {
  .seo-hero, .seo-section-heading, .seo-flow { grid-template-columns: 1fr; }
  .seo-card-grid { grid-template-columns: 1fr; }
  .seo-card-grid article { min-height: auto; }
  .seo-audience-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-footer { grid-template-columns: 1fr 1fr; }
  .seo-footer address { grid-column: 2; grid-row: 1; }
}

@media (max-width: 560px) {
  .seo-header, .seo-footer, .seo-page main { width: min(100% - 28px, 1180px); }
  .seo-header { min-height: 76px; }
  .seo-brand img { width: 142px; }
  .seo-header nav > a:first-child { display: none; }
  .seo-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 54px 0 72px; }
  .seo-hero-copy h1 { font-size: clamp(2.6rem, 14vw, 4rem); }
  .seo-hero figure, .seo-hero figure img, .seo-hero-audience figure, .seo-hero-audience figure img { min-height: 320px; }
  .seo-intro, .seo-privacy { padding: 52px 24px; }
  .seo-benefits { padding: 76px 0; }
  .seo-section-heading { gap: 6px; }
  .seo-card-grid h3 { margin-bottom: 24px; }
  .seo-flow { gap: 28px; padding: 48px 24px; }
  .seo-audience-nav { grid-template-columns: 1fr; padding: 36px 0; }
  .seo-final-cta { align-items: flex-start; flex-direction: column; margin-bottom: 72px; padding: 40px 24px; }
  .seo-footer { grid-template-columns: 1fr; }
  .seo-footer address { grid-column: auto; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .seo-button { transition: none; }
}