:root {
  --bg:       #f7f4ee;
  --surface:  #ffffff;
  --surface-2:#fbf9f3;
  --ink:      #18181b;
  --ink-soft: #3f3f46;
  --muted:    #71717a;
  --border:   #e7e2d6;
  --accent:   #b45309;
  --accent-2: #7c2d12;
  --accent-soft:#fef3c7;
  --shadow:   0 20px 60px -20px rgba(180,83,9,0.15);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ============ Language switcher: hide non-active translations ============ */
/* Hide all language variants by default; show only the one matching body's
   data-lang. Selector excludes body itself (we match descendants only). */
body[data-lang="ru"] [data-lang="ab"],
body[data-lang="ru"] [data-lang="en"],
body[data-lang="ab"] [data-lang="ru"],
body[data-lang="ab"] [data-lang="en"],
body[data-lang="en"] [data-lang="ru"],
body[data-lang="en"] [data-lang="ab"] { display: none !important; }

/* ============ HEADER / NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,244,238,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav .container {
  display: flex; align-items: center;
  padding-top: 18px; padding-bottom: 18px;
  gap: 32px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; letter-spacing: -0.02em;
}
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, #f59e0b, #b45309 60%, #7c2d12);
  color: white; display: grid; place-items: center;
  font-weight: 700; font-size: 15px;
  box-shadow: 0 6px 18px -6px rgba(180,83,9,0.5);
}
.brand-text { font-size: 16px; }
.nav-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }

.lang-switcher {
  display: inline-flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.lang-switcher button {
  appearance: none; border: 0; background: transparent;
  font: 600 12px/1 Inter, sans-serif;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lang-switcher button:hover { color: var(--ink-soft); }
.lang-switcher button.active {
  background: var(--ink);
  color: white;
}

.nav-cta {
  background: var(--ink) !important; color: white !important;
  padding: 9px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 600;
  transition: background 0.15s ease;
}
.nav-cta:hover { background: var(--accent-2) !important; }

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 100px 0 120px;
  /* No overflow:hidden — Fraunces italic glyphs ("ы", "а") have wide right
     side-bearings and were being clipped at the container edge. The body
     already has overflow-x:hidden, so no horizontal scroll appears. */
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 600px 400px at 80% 20%, rgba(245,158,11,0.10), transparent),
    radial-gradient(ellipse 800px 500px at 15% 80%, rgba(124,45,18,0.05), transparent);
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 28px;
  letter-spacing: 0.02em;
}
.hero-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,0.15);
}
.hero-title {
  font-family: "Fraunces", "Noto Serif", "Inter", serif;
  font-weight: 700;
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
  /* Italic Fraunces has decorative swashes on letters like "e", "g", "ы", "а"
     with long tails that extend past the glyph bounding box. Reserve trailing
     space so they aren't clipped at the container/viewport edge. */
  padding-right: 0.6em;
  /* Turn off Fraunces' optional stylistic swashes so we get more predictable
     glyph widths. Decorative tails of standard italic letters still appear,
     but the more aggressive ones are off. */
  font-feature-settings: "ss01" off, "ss02" off, "swsh" off;
  color: var(--ink);
}
.hero-lead {
  /* First two lines: black + italic */
  color: var(--ink);
  font-style: italic;
}
.hero-accent {
  padding-right: 0.2em;
  font-feature-settings: "ss01" off, "swsh" off;
}
.hero-accent {
  /* Third line: accent gradient, upright (roman) */
  background: linear-gradient(135deg, #d97706, #7c2d12);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
  font-weight: 500;
}
.hero-sub {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 720px;
  margin-bottom: 40px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-stats {
  display: grid; grid-template-columns: repeat(4, auto);
  gap: 48px;
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
  max-width: 760px;
}
.hero-stats > div { display: flex; flex-direction: column; gap: 4px; }
.hero-stats dt {
  font-family: "Fraunces", "Noto Serif", serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.hero-stats dd {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 15px; font-weight: 600;
  border: 0; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  font-family: inherit;
}
.btn-primary {
  background: var(--ink);
  color: white;
  box-shadow: 0 4px 14px -4px rgba(24,24,27,0.4);
}
.btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 8px 24px -6px rgba(124,45,18,0.5); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface); }
.btn-big { padding: 18px 36px; font-size: 17px; border-radius: 14px; }

/* ============ SECTIONS ============ */
.section { padding: 96px 0; }
.section-alt { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { margin-bottom: 56px; max-width: 760px; }
.eyebrow {
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.section h2 {
  font-family: "Fraunces", "Noto Serif", serif;
  font-weight: 700; font-size: clamp(32px, 3.6vw, 48px);
  letter-spacing: -0.025em; line-height: 1.06;
  color: var(--ink);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.grid-2 p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.grid-2 .lede { font-size: 19px; color: var(--ink); font-weight: 500; }

/* ============ Goals (6 cards) ============ */
.goals {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.goals li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.goals li:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.g-num {
  font-family: "Fraunces", "Noto Serif", serif;
  font-size: 13px; font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.goals h3 {
  font-family: "Inter", sans-serif;
  font-size: 18px; font-weight: 700;
  margin-bottom: 10px; letter-spacing: -0.01em;
  color: var(--ink);
}
.goals p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }

/* ============ Text categories (5 cards) ============ */
.text-cats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
}
.text-cat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.text-cat:hover { transform: translateY(-3px); border-color: #fbbf24; }
.cat-mark {
  font-size: 32px; display: block; margin-bottom: 14px;
  filter: saturate(0.85);
}
.text-cat h3 {
  font-family: "Inter", sans-serif;
  font-size: 15px; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

/* ============ Mission ============ */
.mission-text {
  font-family: "Fraunces", "Noto Serif", serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  max-width: 920px;
  letter-spacing: -0.015em;
}

/* ============ Team / Funding ============ */
#team .lede { font-size: 19px; color: var(--ink); margin-bottom: 32px; }
#team .lede strong { color: var(--accent-2); font-weight: 700; }

.funding {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 36px;
  margin-top: 16px;
  max-width: 920px;
}
.funding-head {
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.funding p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); }

/* ============ CTA strip ============ */
.cta {
  background: var(--ink);
  color: #fafaf9;
  padding: 100px 0;
  text-align: center;
}
.cta h2 {
  font-family: "Fraunces", "Noto Serif", serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700; letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.cta p { font-size: 18px; color: rgba(250,250,249,0.7); margin-bottom: 40px; }
.cta .btn-primary {
  background: white; color: var(--ink);
}
.cta .btn-primary:hover { background: var(--accent-soft); color: var(--accent-2); }

/* ============ Footer ============ */
.footer {
  padding: 32px 0;
  font-size: 13px; color: var(--muted);
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.footer .container { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 24px; }
.footer-links a:hover { color: var(--ink); }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .goals { grid-template-columns: repeat(2, 1fr); }
  .text-cats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .nav .container { gap: 16px; }
  .nav-right { gap: 10px; }
  .nav-cta { display: none; }
  .hero { padding: 60px 0 80px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; padding-top: 28px; }
  .grid-2 { grid-template-columns: 1fr; gap: 24px; }
  .goals, .text-cats { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .funding { padding: 22px 22px; }
}