/* Tokens from the 1in1m design system. */
:root {
  --surface: #f3f4f7; --surface-raised: #ffffff; --ink: #101a33; --ink-muted: #4a5370;
  --line: #d5d9e4; --crowd: #b9c0d4; --primary: #2b4bff; --on-primary: #ffffff; --the-one: #2b4bff;
  --font-display: Unbounded, "Arial Black", system-ui, sans-serif;
  --font-sans: Onest, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0e1220; --surface-raised: #171c2e; --ink: #eef1fa; --ink-muted: #a3abc6;
    --line: #2a3150; --crowd: #343c5c; --primary: #7d93ff; --on-primary: #0e1220; --the-one: #ffb800;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); color: var(--ink); font: 400 16px/24px var(--font-sans); }
a { color: var(--primary); }
a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.bar, .hero, .foot { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: max(16px, 5vw); }
.bar { display: flex; justify-content: space-between; align-items: center; padding-block: 24px; }
.lang { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; }
.lang a { min-height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; color: var(--ink-muted); text-decoration: none; font: 600 12px/16px var(--font-sans); letter-spacing: .06em; }
.lang a[aria-current] { background: var(--ink); color: var(--surface); }
.hero { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; padding-block: 40px; }
.copy { display: flex; flex-direction: column; gap: 20px; }
.label { margin: 0; font: 600 13px/18px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
h1 { margin: 0; font: 700 clamp(40px, 6vw, 72px)/1.06 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.lead { margin: 0; max-width: 34em; font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.cta { align-self: flex-start; display: inline-flex; align-items: center; min-height: 56px; padding: 0 40px; border-radius: 999px; background: var(--primary); color: var(--on-primary); text-decoration: none; font: 600 17px/22px var(--font-sans); }
.data { margin: 0; font: 500 13px/18px var(--font-mono); color: var(--ink-muted); }
.crowd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(10px, 2vw, 24px); padding: clamp(20px, 3vw, 40px); border-radius: 20px; background: var(--surface-raised); }
.crowd span { width: 100%; max-width: 16px; aspect-ratio: 1; justify-self: center; border-radius: 999px; background: var(--crowd); }
.crowd span.one { max-width: 26px; background: var(--the-one); transform: scale(1.4); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 24px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; }
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .crowd { order: -1; grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .crowd span:nth-child(n+65) { display: none; }
  .cta { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .crowd span.one { transition: transform .6s ease-out; }
}