:root {
  --paper: oklch(0.961 0.014 80);
  --paper-2: oklch(0.935 0.020 78);
  --paper-3: oklch(0.905 0.024 75);
  --ink: oklch(0.18 0.012 50);
  --ink-soft: oklch(0.40 0.012 50);
  --ink-muted: oklch(0.58 0.012 50);
  --accent: oklch(0.56 0.18 28);
  --amber:  oklch(0.78 0.13 70);
  --hairline: color-mix(in oklab, var(--ink) 14%, transparent);

  --serif: "Instrument Serif", "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --body:  "Newsreader", "EB Garamond", Georgia, serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.12;
}
.nav-menu-btn {
  display: none;
  appearance: none;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  color: var(--ink);
  width: 42px;
  height: 42px;
  border-radius: 999;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-mobile-panel { display: none; }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 80px !important; }
  .hero-visual { height: 460px !important; }
  .how-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .faq-grid { grid-template-columns: 1fr !important; }
  .vs-chat-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .pain-grid { grid-template-columns: 1fr !important; }
  .nav-links { display: none !important; }
  .nav-join-link { display: none !important; }
  .nav-menu-btn { display: inline-flex; }
  .nav-mobile-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 0 8px;
    border-top: 1px solid var(--hairline);
    margin-top: 12px;
    font-family: var(--body);
    font-size: 16px;
  }
  .nav-mobile-panel a {
    color: var(--ink-soft);
    text-decoration: none;
    padding: 4px 0;
  }
  .nav-mobile-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .nav-mobile-lang-active { color: var(--ink); font-weight: 600; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .reveal-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .hero-stamp { display: none !important; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}
.marquee { animation: marquee 38s linear infinite; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}