/* base.css — reset, tokens, typography */
:root {
  --c-bg: #fbfaff;
  --c-ink: #161430;
  --c-ink-soft: #4b4869;
  --c-line: #e7e3f5;
  --c-card: #ffffff;

  /* multicolor palette */
  --c-grape: #6c4cf1;
  --c-grape-d: #4a2fd0;
  --c-pink: #ff4d8d;
  --c-coral: #ff7a45;
  --c-amber: #ffb020;
  --c-lime: #2fd07a;
  --c-sky: #20c4e0;
  --c-blue: #2f6bff;

  --grad-hero: linear-gradient(135deg, #6c4cf1 0%, #2f6bff 38%, #20c4e0 72%, #2fd07a 100%);
  --grad-warm: linear-gradient(120deg, #ff4d8d 0%, #ff7a45 55%, #ffb020 100%);
  --grad-cool: linear-gradient(120deg, #2f6bff 0%, #20c4e0 100%);
  --grad-violet: linear-gradient(135deg, #6c4cf1, #ff4d8d);

  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 28px;
  --shadow-s: 0 2px 10px rgba(28,18,80,.06);
  --shadow-m: 0 10px 30px rgba(40,24,110,.10);
  --shadow-l: 0 24px 60px rgba(40,24,110,.16);

  --maxw: 1180px;
  --space: clamp(16px, 4vw, 28px);

  --font-head: "Onest", "Inter", system-ui, sans-serif;
  --font-body: "Inter", "Onest", system-ui, sans-serif;
}

* { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-ink);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--c-ink);
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

p { color: var(--c-ink-soft); }
p + p { margin-top: 1em; }

a { color: var(--c-grape-d); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--c-pink); }

img { max-width: 100%; display: block; }

ul, ol { padding-left: 1.25em; color: var(--c-ink-soft); }
li + li { margin-top: .4em; }

strong { color: var(--c-ink); font-weight: 700; }

:focus-visible { outline: 3px solid var(--c-grape); outline-offset: 2px; border-radius: 4px; }

::selection { background: var(--c-pink); color: #fff; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space); }

.section { padding: clamp(48px, 8vw, 96px) 0; }
.section--tight { padding: clamp(32px, 5vw, 56px) 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head);
  font-weight: 700; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-grape-d);
  background: rgba(108,76,241,.10);
  padding: 6px 14px; border-radius: 999px;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-warm); }

.lede { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--c-ink-soft); max-width: 62ch; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--c-ink); color: #fff; padding: 10px 16px;
  border-radius: 8px; z-index: 200; transition: top .2s;
}
.skip-link:focus { top: 12px; color: #fff; }