@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ===========================================================
   Leading Social, design tokens & base
   =========================================================== */

:root {
  /* Color, Leading Social brand palette */
  --ink: #0A0A0B;
  --ink-2: #131316;
  --ink-3: #1C1C20;
  --paper: #F2EDE3;
  --paper-2: #E8E2D4;
  --bone: #FAF7F0;
  --line: rgba(255, 255, 255, 0.08);
  --line-dark: rgba(10, 10, 11, 0.12);
  --mute: rgba(255, 255, 255, 0.92);
  --mute-dark: rgba(10, 10, 11, 0.55);

  /* Brand accents */
  --brand: #3399FF;          /* logo blue */
  --brand-soft: #7FBEFF;     /* light tint */
  --brand-deep: #1A6FCC;     /* deeper for hover */
  --navy: #274978;
  --orange: #F0A04B;
  --pink: #E8446F;

  /* Legacy alias kept so any leftover `--acid` references still work */
  --acid: var(--brand);
  --acid-soft: var(--brand-soft);
  --warm: var(--orange);

  /* Type, Hanken Grotesk everywhere; the "mono" var is kept as an alias
     so any legacy references resolve to the sans stack, but rendered with
     wider tracking + smaller size to keep a structured/eyebrow feel. */
  --display: 'Lato', -apple-system, Helvetica, sans-serif;
  --sans:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  --mono:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;

  /* Layout */
  --gutter: clamp(20px, 4vw, 64px);
  --maxw: 1480px;

  /* Motion */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--ink); color: var(--paper); }
body {
  font-family: var(--sans);
  font-feature-settings: "ss01" on, "ss02" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--brand); color: #fff; }

/* Typography utilities */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--brand);
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-1px);
}
.serif { font-family: var(--display); font-weight: 700; font-style: normal; letter-spacing: -0.02em; }
.serif-it { font-family: var(--display); font-style: italic; font-weight: 700; letter-spacing: -0.02em; }

/* Wrap */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Section header pattern */
.sect {
  position: relative;
  padding: clamp(72px, 9vw, 140px) 0;
}
.sect-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.sect-head h2 {
  font-family: var(--display);
  font-size: clamp(40px, 5.6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
}
.sect-head .lede {
  font-size: clamp(15px, 1.1vw, 17px);
  max-width: 46ch;
  color: var(--mute);
  line-height: 1.5;
}
.sect.is-light .sect-head .lede { color: var(--mute-dark); }
@media (max-width: 800px) {
  .sect-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
}

/* Light section variant */
.sect.is-light { background: var(--paper); color: var(--ink); }

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px 16px 24px;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: transform .35s var(--ease-out), background .25s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--brand-deep); transform: translateY(-1px); }
.btn .arr {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  color: currentColor;
}
.btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line);
  padding: 15px 22px;
}
.btn-ghost:hover { border-color: var(--paper); background: rgba(255,255,255,0.04); }
.sect.is-light .btn-ghost { color: var(--ink); border-color: var(--line-dark); }
.sect.is-light .btn-ghost:hover { border-color: var(--ink); background: rgba(0,0,0,0.04); }

/* Hairline */
.rule { height: 1px; background: var(--line); }
.sect.is-light .rule { background: var(--line-dark); }

/* Scroll lock for marquee */
.marquee-track {
  display: flex;
  gap: 60px;
  width: max-content;
  will-change: transform;
  animation: marq 50s linear infinite;
}
@keyframes marq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* tag pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.sect.is-light .pill {
  background: rgba(0,0,0,0.04);
  border-color: var(--line-dark);
}

/* Focus */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }