/* Self-hosted fonts (latin subsets, OFL). Browsers only download the faces a page actually uses. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/poppins-900.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* WSF — shared tokens + brand treatments (from design.md WSF) */
:root {
  --pink: #F76A9B;
  --blue-mid: #5089D0;
  --title: #2B5CAB;
  --blue-deep: #3D6FB8;
  --blue-soft: #A5CCFA;
  --blue-wash: #EAF3FE;
  --mint: #66C7BD;
  --mint-deep: #3FA396;
  --canvas: #FDFDFD;
  --white: #FFFFFF;
  --sun: #FCE96A;
  --sun-glow: #FDF19E;
  --coral: #F2853F;
  --grape: #9B6BD6;
  --ink: #2B2B2B;
  --ink-muted: #6F7680;
  --surface: #F1F1F1;

  --grad-text: linear-gradient(180deg, #A5CCFA 0%, #5089D0 78%, #4A7FC4 100%);
  --grad-pink: linear-gradient(165deg, #FBA8C4 0%, #F76A9B 55%, #E14E80 100%);
  --grad-mint: linear-gradient(150deg, #8FDCD2 0%, #66C7BD 50%, #3FA396 100%);
  --grad-blue: linear-gradient(160deg, #A5CCFA 0%, #5089D0 60%, #3D6FB8 100%);
  --grad-wash: linear-gradient(180deg, rgba(165,204,250,0) 55%, rgba(165,204,250,0.28) 100%);

  --font-display: "Poppins", "Nunito", system-ui, sans-serif;
  --font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;

  --shadow-card: 0 2px 6px rgba(43,43,43,0.05), 0 12px 32px rgba(80,137,208,0.14);
  --shadow-lift: 0 4px 10px rgba(43,43,43,0.06), 0 22px 48px rgba(80,137,208,0.22);
  --shadow-pink: 0 14px 34px rgba(247,106,155,0.32);
  --r-card: 28px;
  --r-pill: 999px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--canvas);
  color: var(--ink);
  font: 400 17px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-mid); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue-mid); outline-offset: 3px; border-radius: 8px; }

/* Display type: solid deep blue, tight and heavy. Periods pick up the logo's pink dot. */
.display {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: -0.045em;
  line-height: 1;
  padding-bottom: 0.06em;
  margin: 0;
  color: var(--title);
}
.display .dot { color: var(--pink); }
.display.on-pink { color: #D1487A; }
.display.on-mint { color: var(--mint-deep); }

/* Header lockup */
.lockup {
  font: italic 700 14px/1.3 var(--font-ui);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
.lockup b { color: var(--ink); font-weight: 800; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; cursor: pointer; text-decoration: none;
  font: 700 16px/1 var(--font-display);
  padding: 15px 26px; border-radius: var(--r-pill);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary {
  color: #fff; background: var(--grad-blue);
  box-shadow: inset 0 2px 6px rgba(255,255,255,.45), inset 0 -4px 10px rgba(0,0,0,.12), 0 10px 24px rgba(80,137,208,.35);
}
.btn-primary:hover { box-shadow: inset 0 2px 6px rgba(255,255,255,.45), inset 0 -4px 10px rgba(0,0,0,.12), 0 14px 30px rgba(80,137,208,.45); }
.btn-pink {
  color: #fff; background: var(--grad-pink);
  box-shadow: inset 0 2px 6px rgba(255,255,255,.45), inset 0 -4px 10px rgba(0,0,0,.10), var(--shadow-pink);
}
.btn-ghost { background: var(--surface); color: var(--ink); }
.btn-ghost:hover { background: #e8e8e8; }

/* Decorations (max 3 per frame, edges only) */
.deco { position: absolute; pointer-events: none; }
.sparkle { width: 64px; aspect-ratio: 1; }
.sparkle path { fill: currentColor; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}