:root {
  color-scheme: dark;

  --bg:        #0b1120;
  --bg-raised: #101a2e;
  --line:      #1e293b;
  --line-soft: rgba(148, 163, 184, .14);

  --ink:       #f1f5f9;
  --ink-body:  #cbd5e1;
  --ink-mute:  #94a3b8;
  --ink-faint: #64748b;

  --accent:      #5eead4;
  --accent-deep: #2dd4bf;

  --step--1: .875rem;
  --step-0:  1rem;
  --step-1:  1.125rem;
  --step-2:  1.375rem;
  --step-3:  1.875rem;
  --step-4:  2.5rem;

  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;
  --s4: 2rem;   --s5: 3rem;   --s6: 4.5rem;  --s7: 7rem;

  --ease: cubic-bezier(.2, .6, .2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 var(--s3); }

h1, h2, h3 { color: var(--ink); letter-spacing: -.025em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2.25rem, 6vw, var(--step-4)); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 4vw, var(--step-3)); font-weight: 600; }
h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: -.015em; }
p  { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }

/* ---------- header ---------- */

header {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
  background: rgba(11, 17, 32, .88);
  backdrop-filter: blur(8px);
}
header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: 4rem;
}
.wordmark {
  color: var(--ink); font-weight: 600; font-size: var(--step-1);
  letter-spacing: .06em;
}
nav { display: flex; gap: var(--s3); font-size: var(--step--1); }
nav a { color: var(--ink-mute); }
nav a:hover { color: var(--ink); }
@media (max-width: 34rem) { nav a.optional { display: none; } }

/* ---------- rhythm ---------- */

section { padding: var(--s6) 0; border-bottom: 1px solid var(--line-soft); }
section:last-of-type { border-bottom: 0; }
.lede { font-size: var(--step-2); line-height: 1.45; color: var(--ink); font-weight: 400; }
.kicker {
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s2); font-weight: 500;
}
.measure { max-width: 40rem; }
/* `.wrap` centres itself with auto margins, so narrowing it with
   `.measure` would centre the whole column. Keep the container at full
   width and constrain its children instead. */
.wrap.measure { max-width: 62rem; }
.wrap.measure > * { max-width: 40rem; }
.stack > * + * { margin-top: var(--s3); }

/* ---------- hero ---------- */

.hero { padding: var(--s7) 0 var(--s6); border-bottom: 1px solid var(--line-soft); }
.hero h1 { max-width: 22ch; }
.hero .sub { max-width: 46ch; font-size: var(--step-1); color: var(--ink-body); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.btn {
  display: inline-flex; align-items: center;
  padding: .625rem 1.125rem; border-radius: .5rem;
  font-size: var(--step--1); font-weight: 500;
  border: 1px solid transparent;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn-primary { background: var(--accent); color: #042f2e; }
.btn-primary:hover { background: var(--accent-deep); color: #042f2e; }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-mute); color: var(--ink); }

/* ---------- pull line ---------- */

.pull {
  font-size: clamp(1.375rem, 3.5vw, var(--step-3));
  color: var(--ink); font-weight: 500; letter-spacing: -.02em;
  line-height: 1.3;
}

/* ---------- grids ---------- */

.grid {
  display: grid; gap: var(--s4);
  grid-template-columns: 1fr;
  margin-top: var(--s5);
}
/* Two columns, not auto-fit: there are four items, and auto-fit lands on
   three across at this width, leaving one orphaned on its own row. */
@media (min-width: 46rem) { .grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--s5); } }
.item h3 { margin-bottom: var(--s1); }
.item p  { color: var(--ink-mute); font-size: var(--step--1); }

.products { display: grid; gap: var(--s2); margin-top: var(--s4); }
.product {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  padding: var(--s3) 0; border-top: 1px solid var(--line-soft);
}
.product strong { color: var(--ink); font-weight: 600; min-width: 7rem; }
.product span { color: var(--ink-mute); font-size: var(--step--1); }

/* ---------- sovereignty ---------- */

.panel {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: .75rem; padding: var(--s4); margin-top: var(--s4);
}
.panel dl { margin: 0; display: grid; gap: var(--s2); }
.panel dt {
  color: var(--ink); font-weight: 600; font-size: var(--step--1);
}
.panel dd { margin: .125rem 0 0; color: var(--ink-mute); font-size: var(--step--1); }

/* ---------- close ---------- */

.close { padding: var(--s7) 0; text-align: center; }
.close .actions { justify-content: center; margin-top: var(--s4); }

footer.site {
  border-top: 1px solid var(--line);
  padding: var(--s4) 0; font-size: var(--step--1); color: var(--ink-faint);
}
footer.site .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); }

/* No `both` fill mode, deliberately. With it, the hero's resting state is
   opacity 0 and the text is invisible whenever the animation does not run
   - a background tab, a deferred paint, anything that stops it starting.
   Without it the element is visible by default and the animation is
   decoration on top, which is the way round that can only fail safe. */
@media (prefers-reduced-motion: no-preference) {
  .hero > .wrap > * { animation: rise .5s var(--ease); }
  .hero > .wrap > :nth-child(2) { animation-delay: .06s; }
  .hero > .wrap > :nth-child(3) { animation-delay: .12s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
}