/* Zalez redesign — shared design system
   Tokens, base, nav, footer, buttons, common section primitives, reveal */

:root {
  --sans: "Geist", -apple-system, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --accent-h: 282;
  --accent: oklch(0.62 0.22 var(--accent-h));
  --accent-2: oklch(0.78 0.16 295);
  --accent-soft: oklch(0.62 0.22 var(--accent-h) / 0.18);
  --accent-line: oklch(0.62 0.22 var(--accent-h) / 0.45);
  --accent-glow: oklch(0.62 0.22 var(--accent-h) / 0.6);
  --ok: oklch(0.78 0.16 155);
  --warn: oklch(0.78 0.16 75);
  --err: oklch(0.7 0.18 25);
}
[data-theme="dark"] {
  --bg: #06060e;
  --bg-elev: #0c0d1a;
  --bg-card: #10112a;
  --bg-deep: #030309;
  --ink: #f0eef9;
  --ink-soft: #a6a2c2;
  --ink-mute: #66627f;
  --rule: #1c1d3a;
  --rule-soft: #14152d;
  --line: #29294a;
}
[data-theme="light"] {
  --bg: #f6f4ee; --bg-elev: #efece4; --bg-card: #fff; --bg-deep: #e8e3d6;
  --ink: #0d0a18; --ink-soft: #4a4560; --ink-mute: #8a8499;
  --rule: #d9d3c4; --rule-soft: #e6e1d2; --line: #c8c2b3;
  --accent: oklch(0.55 0.2 var(--accent-h));
  --accent-soft: oklch(0.55 0.2 var(--accent-h) / 0.1);
  --accent-line: oklch(0.55 0.2 var(--accent-h) / 0.3);
  --accent-glow: oklch(0.55 0.2 var(--accent-h) / 0.2);
}

*, *::before, *::after { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .35s, color .35s;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none }
::selection { background: var(--accent); color: #fff }

body::before {
  content: ""; position: fixed; top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 1600px; height: 900px;
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 60%);
  opacity: .55; pointer-events: none; z-index: 0; filter: blur(40px);
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px),
                    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 90px 90px;
  opacity: .35;
  mask-image: radial-gradient(ellipse at top, #000 8%, transparent 65%);
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 48px; position: relative; z-index: 2 }
@media (max-width: 720px) { .container { padding: 0 20px } }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 84px }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em }
.brand img { height: 42px; width: auto; display: block; filter: drop-shadow(0 0 12px var(--accent-glow)) }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 13px; color: var(--ink-soft) }
.nav-links a { transition: color .2s }
.nav-links a:hover, .nav-links a.active { color: var(--ink) }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1px solid var(--accent-line);
  border-radius: 999px; font-family: var(--mono); font-size: 12px;
  color: var(--ink); background: var(--accent-soft); white-space: nowrap;
  transition: all .2s;
}
.nav-cta:hover { background: var(--accent); color: #fff; border-color: var(--accent) }
@media (max-width: 820px) { .nav-links a:not(.nav-cta) { display: none } }

/* sections */
section { position: relative; z-index: 2; padding: 120px 0 }
.section-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 20px;
  display: inline-flex; align-items: center; gap: 10px;
}
.section-eyebrow::before {
  content: ""; display: inline-block; width: 24px; height: 1px; background: var(--accent);
}
.section-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 5.2vw, 68px); line-height: 1; letter-spacing: -.015em;
  margin: 0 0 24px; max-width: 18ch;
}
.section-title em { font-style: italic; color: var(--accent) }
.section-lead {
  font-size: 18px; line-height: 1.55; color: var(--ink-soft); max-width: 640px; margin: 0 0 60px;
}

/* eyebrow chip */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
  padding: 7px 14px; border: 1px solid var(--rule); border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 60%, transparent);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent) }

/* buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  background: var(--accent); color: #fff; font-family: var(--mono); font-size: 13px;
  border: none; cursor: pointer;
  box-shadow: 0 0 0 1px var(--accent), 0 0 32px var(--accent-glow);
  transition: transform .2s, box-shadow .2s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--accent), 0 0 48px var(--accent-glow) }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  background: transparent; color: var(--ink); font-family: var(--mono); font-size: 13px;
  border: 1px solid var(--rule); cursor: pointer;
  transition: border-color .2s, background .2s;
}
.btn-secondary:hover { border-color: var(--ink-soft); background: color-mix(in srgb, var(--bg-card) 50%, transparent) }

/* footer */
footer { padding: 48px 0; border-top: 1px solid var(--rule-soft); position: relative; z-index: 2 }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute) }
.footer-inner a { color: var(--ink-soft); transition: color .2s }
.footer-inner a:hover { color: var(--ink) }

/* reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s, transform .8s }
.reveal.in { opacity: 1; transform: none }

/* page hero (compact, used on subpages) */
.page-hero {
  padding: 96px 0 60px; text-align: center; position: relative;
}
.page-hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 6vw, 84px); line-height: .98; letter-spacing: -.02em;
  margin: 22px auto 0; max-width: 18ch;
}
.page-hero h1 em { font-style: italic; color: var(--accent); font-weight: 400 }
.page-hero p.lead {
  margin: 28px auto 0; max-width: 620px;
  color: var(--ink-soft); font-size: 18px; line-height: 1.55;
}

/* prose for long-form pages */
.prose { max-width: 760px; margin: 0 auto; font-size: 15.5px; line-height: 1.7; color: var(--ink-soft) }
.prose h2 {
  font-family: var(--serif); font-weight: 400; color: var(--ink);
  font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -.01em;
  margin: 56px 0 14px;
}
.prose h2:first-child { margin-top: 0 }
.prose h3 {
  font-family: var(--serif); font-weight: 400; color: var(--ink);
  font-size: 22px; margin: 32px 0 10px;
}
.prose p { margin: 0 0 16px }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px }
.prose li { margin: 0 0 6px }
.prose a { color: var(--accent); border-bottom: 1px solid var(--accent-line) }
.prose a:hover { color: var(--ink); border-color: var(--ink) }
.prose strong { color: var(--ink); font-weight: 500 }
.prose code { font-family: var(--mono); font-size: .92em; background: var(--bg-card); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--rule) }
.prose hr { border: none; border-top: 1px solid var(--rule); margin: 48px 0 }