/* ============================================================
   LeadEx — design tokens & base styles
   Serif: Lora (headings)  ·  Sans: Golos Text (UI/body)
   ============================================================ */

:root {
  /* Navy scale */
  --navy-900: #0a1426;
  --navy-800: #0e1a33;
  --navy-700: #14213d;
  --navy-600: #1b2c4f;
  --navy-500: #29406b;

  /* Accent (teal) */
  --teal:     #ED9B52;
  --teal-bright: #f4b374;
  --teal-600: #d9883c;
  --teal-700: #b56a26;

  /* Light surfaces */
  --paper:   #f6f5f0;
  --paper-2: #efeee7;
  --card:    #ffffff;

  /* Ink / text on light */
  --ink:      #15233f;
  --ink-soft: #41506b;
  --muted:    #6c7890;
  --line:     rgba(21,35,63,0.11);
  --line-2:   rgba(21,35,63,0.07);

  /* On dark */
  --on-dark:       #eef3fc;
  --on-dark-soft:  #aab9d6;
  --on-dark-faint: #6f80a4;
  --line-dark:     rgba(190,210,255,0.13);

  /* Type */
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans:  "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.em-it { font-style: italic; font-weight: 500; }

p { margin: 0; text-wrap: pretty; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 9vw, 140px); }

.eyebrow {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-700);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1.5px;
  background: var(--teal-600);
  display: inline-block;
}
.eyebrow.on-dark { color: var(--teal); }
.eyebrow.on-dark::before { background: var(--teal); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: 0.005em;
  padding: 14px 26px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  transition: all .35s var(--ease);
  white-space: nowrap;
}
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

.btn-primary {
  background: var(--teal);
  color: var(--navy-900);
  border-color: var(--teal);
}
.btn-primary:hover { background: var(--teal-bright); border-color: var(--teal-bright); box-shadow: 0 10px 30px -8px rgba(237,155,82,.5); transform: translateY(-1px); }

.btn-ghost-dark {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--line-dark);
}
.btn-ghost-dark:hover { border-color: var(--on-dark-soft); background: rgba(255,255,255,.04); }

.btn-ink {
  background: var(--navy-800);
  color: #fff;
  border-color: var(--navy-800);
}
.btn-ink:hover { background: var(--navy-700); transform: translateY(-1px); box-shadow: 0 10px 26px -10px rgba(14,26,51,.5); }

.btn-ghost-ink {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn-ghost-ink:hover { border-color: var(--ink-soft); }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}