/* =========================================================
   Studio Procrast — v2 dark theme
   The single stylesheet for every page. Pairs with animations-dark.css.
   Structural rules live here; motion lives in animations-dark.css.

   Palette sampled from Style.png:
     #07081A base · #131B59 deep · #3D61AD royal
     #5C88D1 bright · #B1BDD5 haze · #E5E0DC warm off-white
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --display: 'Outfit', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --base: #07081a;
  --base-2: #090d2b;
  --deep: #131b59;
  --royal: #3d61ad;
  --bright: #5c88d1;
  --haze: #b1bdd5;
  --warm: #e5e0dc;

  --fg: #f4f6fb;
  --fg-dim: #b9c3da;
  --fg-faint: #7d88a8;
  --line: rgba(177, 189, 213, 0.16);
  --line-soft: rgba(177, 189, 213, 0.09);

  /* elevated surfaces, each a step lighter than --base */
  --surface-1: #0c1130;
  --surface-2: #121838;
  --surface-3: #182046;

  --page: 1240px;
  --header-h: 78px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--base); }
body {
  margin: 0;
  background: var(--base);
  color: var(--fg);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--royal); color: #fff; }

.container { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 28px; }

/* Keyboard focus. The browser default ring is a dark outline, which is
   effectively invisible on #07081A — so every focusable element needs an
   explicit light ring. :focus-visible keeps it off mouse clicks. */
:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 3px;
  border-radius: 3px;
}
.btn:focus-visible,
.btn-demo:focus-visible,
.nav__link:focus-visible,
.nav__menu a:focus-visible { outline-offset: 4px; }

/* =========================================================
   HEADER — mono nav, arrow link left, pill CTA right
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(7, 8, 26, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}
.site-header__inner {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 34px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.nav { display: flex; align-items: center; gap: 30px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg);
  padding: 8px 0;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.nav__link:hover { opacity: 1; }
.nav__link .arw {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__item:hover .arw { transform: translateX(4px); }

.brand {
  justify-self: center;
  display: flex;
  align-items: center;
}
.brand img { height: 17px; width: auto; }

.header__right { justify-self: end; display: flex; align-items: center; gap: 16px; }

.btn-demo {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--base);
  background: var(--warm);
  padding: 11px 20px;
  border-radius: 7px;
  border: 1px solid transparent;
  transition: background 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.btn-demo:hover { background: #fff; transform: translateY(-1px); }

/* dropdown */
.nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: rgba(12, 16, 45, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
@media (min-width: 901px) {
  .nav__item:hover .nav__menu,
  .nav__item:focus-within .nav__menu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
}
.nav__menu a {
  display: block;
  font-size: 13px;
  color: var(--fg-dim);
  padding: 9px 12px;
  border-radius: 6px;
}
.nav__menu a:hover { background: rgba(93, 136, 209, 0.16); color: var(--fg); }

/* Current page. Set at build time from the page slug, so no runtime
   URL-matching and it works with JS off. */
.nav__menu a[aria-current='page'] {
  background: rgba(93, 136, 209, 0.22);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(146, 178, 228, 0.28);
}
.nav__item.is-active > .nav__link { opacity: 1; }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--fg); }
.nav-toggle span + span { margin-top: 5px; }

/* =========================================================
   HERO — the Lucien bloom
   A wide, soft radial rising from low-centre: dark navy edges,
   royal blue mid, near-white core, fading back to dark at the
   very bottom. Built from stacked radial-gradients so it costs
   one paint and no images.
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + 40px) 24px 80px;
  overflow: hidden;
  isolation: isolate;
  background: var(--base);
}

.hero__bloom {
  position: absolute;
  inset: -10% -10% -10% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(54% 30% at 50% 86%, rgba(244, 247, 253, 0.95) 0%, rgba(214, 227, 246, 0.6) 24%, rgba(124, 158, 215, 0.3) 46%, rgba(7, 8, 26, 0) 74%),
    radial-gradient(84% 50% at 50% 80%, rgba(70, 112, 186, 0.58) 0%, rgba(32, 51, 120, 0.4) 42%, rgba(9, 13, 43, 0) 74%),
    radial-gradient(120% 76% at 50% 44%, rgba(19, 27, 89, 0.72) 0%, rgba(7, 8, 26, 0) 70%);
  transform: translate3d(calc(var(--mx, 0) * 26px), calc(var(--my, 0) * 18px), 0) scale(1.02);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* the bloom fades back to base at the very bottom, as on Lucien */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 15%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 8, 26, 0) 0%, rgba(7, 8, 26, 0.72) 58%, var(--base) 100%);
}

.hero__inner { position: relative; z-index: 3; width: 100%; max-width: 1080px; }

.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(44px, 7.4vw, 104px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--fg);
}
.hero__l1, .hero__l2, .hero__l3 { display: block; }
.hero__l3 { color: rgba(244, 247, 253, 0.72); }

.hero__sub {
  max-width: 430px;
  margin: 40px auto 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.85;
  color: #d6ddec;
}

.hero__actions {
  margin-top: 38px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 13px;
  padding: 14px 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--light { background: var(--warm); color: var(--base); }
.btn--light:hover { background: #fff; }
/* The ghost button can land on the bright core of the bloom, where white
   text on the raw gradient measures 3.5:1. The translucent dark fill keeps
   it above 4.5:1 wherever the bloom happens to sit. */
.btn--ghost {
  border-color: rgba(228, 224, 220, 0.4);
  color: var(--fg);
  background: rgba(7, 8, 26, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--warm); background: rgba(7, 8, 26, 0.62); }

/* scroll cue — the thin vertical rule Lucien parks on the right */
.hero__cue {
  position: absolute;
  right: 40px;
  bottom: 0;
  z-index: 3;
  width: 1px;
  height: 130px;
  background: linear-gradient(180deg, rgba(177, 189, 213, 0) 0%, rgba(177, 189, 213, 0.5) 55%, rgba(177, 189, 213, 0) 100%);
}
.hero__cue::after {
  content: '';
  position: absolute;
  left: 0; top: -40%;
  width: 1px; height: 40%;
  background: linear-gradient(180deg, rgba(244, 247, 253, 0) 0%, var(--fg) 100%);
  animation: cue 2.8s ease-in-out infinite;
}
@keyframes cue {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(340%); opacity: 0; }
}

/* =========================================================
   STATS — hairline grid on dark
   ========================================================= */
.stats { position: relative; z-index: 2; padding: 120px 0 140px; background: var(--base); }
.stats__grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 64px; align-items: center; }
.stats__visual img { width: 100%; }

.stats__eyebrow {
  margin: 0 0 54px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
/* Three stats, so one row of three — a 2-up grid would leave a hole. */
.stats__numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 54px 30px; }

.stat__value {
  font-family: var(--display);
  font-size: 52px;
  font-weight: 200;
  line-height: 1;
  color: var(--fg);
}
.stat__rule { margin: 16px 0 16px; height: 1px; background: var(--line); position: relative; }
.stat__rule::before {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: 22%; height: 2px;
  background: var(--bright);
}
.stat__label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* =========================================================
   PAGE HERO — inner pages. Same bloom, shorter, sitting behind
   the title rather than under it.
   ========================================================= */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 108px) 0 92px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--base);
}
.page-hero__bloom {
  position: absolute;
  inset: -30% -10% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 46% at 50% 34%, rgba(124, 158, 215, 0.28) 0%, rgba(61, 97, 173, 0.14) 42%, rgba(7, 8, 26, 0) 72%),
    radial-gradient(110% 70% at 50% 18%, rgba(19, 27, 89, 0.72) 0%, rgba(7, 8, 26, 0) 70%);
}
.page-hero > .container { position: relative; z-index: 2; }

.page-hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--fg);
}
.page-hero__sub {
  max-width: 620px;
  margin: 26px auto 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.85;
  color: var(--fg-dim);
}

/* =========================================================
   HAPPY FEW — product hero
   ========================================================= */
.product-hero {
  position: relative;
  padding: calc(var(--header-h) + 90px) 0 110px;
  overflow: hidden;
  isolation: isolate;
  background: var(--base);
}
.product-hero__bloom {
  position: absolute;
  inset: -20% -10% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 46% at 74% 52%, rgba(124, 158, 215, 0.26) 0%, rgba(61, 97, 173, 0.12) 44%, rgba(7, 8, 26, 0) 74%),
    radial-gradient(110% 70% at 50% 20%, rgba(19, 27, 89, 0.6) 0%, rgba(7, 8, 26, 0) 72%);
}
.product-hero > .container { position: relative; z-index: 2; }
.product-hero__grid { display: grid; grid-template-columns: 1fr 0.95fr; gap: 50px; align-items: center; }

.product-hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.product-hero__text {
  max-width: 460px;
  margin: 30px 0 38px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--fg-dim);
}
.product-hero__visual img { width: 100%; }

/* =========================================================
   HAPPY FEW — bento
   ========================================================= */
.bento { padding: 20px 0 90px; background: var(--base); }
.bento__grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  grid-auto-rows: minmax(340px, auto);
  gap: 26px;
}
.bento__card {
  border-radius: 20px;
  padding: 38px 40px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  background: var(--surface-1);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease;
}
.bento__card:hover { transform: translateY(-4px); border-color: var(--line); }
.bento__card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.bento__card p { margin: 10px 0 0; font-size: 13px; color: var(--fg-dim); }
.bento__card img { margin: auto; width: 62%; max-width: 290px; }

/* All four cards share one surface. The two without artwork centre their
   text; nothing else differs. */
.bento__card--center { align-items: center; justify-content: center; text-align: center; }

/* Portrait phone (aspect ~0.50), so size it by height — a width rule would
   make it far taller than the card. */
.bento__card--seamless img {
  width: auto;
  max-width: 62%;
  max-height: 330px;
  margin: 16px auto 0;
}

/* =========================================================
   HAPPY FEW — download banner
   ========================================================= */
.download { padding: 30px 0 110px; background: var(--base); }
.download__inner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line-soft);
  border-radius: 26px;
  padding: 88px 70px;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 50px;
  align-items: center;
  background:
    radial-gradient(62% 130% at 22% 116%, rgba(124, 158, 215, 0.3) 0%, rgba(61, 97, 173, 0.14) 44%, rgba(7, 8, 26, 0) 74%),
    var(--surface-1);
}
.download__title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.download__text {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 24px 0 36px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--fg-dim);
}
.download__actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 14px; }
.download__visual { position: relative; z-index: 2; }
.download__visual img { width: 74%; margin: 0 0 0 auto; }
.arrow { font-size: 14px; }

/* =========================================================
   TEAM
   ========================================================= */
.team { padding: 10px 0 120px; background: var(--base); }
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.member {
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 40px 24px 32px;
  text-align: center;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease;
}
.member:hover { transform: translateY(-5px); border-color: var(--line); }
.member__avatar {
  width: 74%;
  max-width: 180px;
  aspect-ratio: 1;
  margin: 0 auto 32px;
  border-radius: 50%;
}
.member__avatar--1 {
  background:
    radial-gradient(circle at 78% 22%, #c2661a 0%, rgba(194,102,26,0) 62%),
    radial-gradient(circle at 20% 18%, #d9a37e 0%, rgba(217,163,126,0) 55%),
    radial-gradient(circle at 22% 74%, #6f8fd6 0%, rgba(111,143,214,0) 58%),
    radial-gradient(circle at 84% 86%, #f7f2ec 0%, rgba(247,242,236,0) 60%),
    linear-gradient(145deg, #b8874f 0%, #d78435 45%, #e8e2d8 100%);
}
.member__avatar--2 {
  background:
    radial-gradient(circle at 22% 16%, #f4d84c 0%, rgba(244,216,76,0) 58%),
    radial-gradient(circle at 84% 26%, #ee4a45 0%, rgba(238,74,69,0) 56%),
    radial-gradient(circle at 26% 78%, #ef5a4a 0%, rgba(239,90,74,0) 58%),
    radial-gradient(circle at 84% 86%, #fdf0ec 0%, rgba(253,240,236,0) 58%),
    linear-gradient(145deg, #f6c93f 0%, #f0603f 55%, #f4ded6 100%);
}
.member__avatar--3 {
  background:
    radial-gradient(circle at 18% 22%, #2f9a3a 0%, rgba(47,154,58,0) 60%),
    radial-gradient(circle at 24% 74%, #2c8a4a 0%, rgba(44,138,74,0) 58%),
    radial-gradient(circle at 82% 30%, #3d84d8 0%, rgba(61,132,216,0) 58%),
    radial-gradient(circle at 86% 84%, #e8f1fb 0%, rgba(232,241,251,0) 58%),
    linear-gradient(145deg, #37953e 0%, #3a86d4 60%, #dbe8f7 100%);
}
.member__avatar--4 {
  background:
    radial-gradient(circle at 24% 18%, #4159d6 0%, rgba(65,89,214,0) 58%),
    radial-gradient(circle at 34% 76%, #8c62dd 0%, rgba(140,98,221,0) 58%),
    radial-gradient(circle at 84% 30%, #6f8ce0 0%, rgba(111,140,224,0) 55%),
    radial-gradient(circle at 88% 80%, #c9ecd4 0%, rgba(201,236,212,0) 60%),
    linear-gradient(145deg, #4a63da 0%, #9370de 55%, #dcefe2 100%);
}
.member__name {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  color: var(--fg);
}
.member__role {
  margin: 8px 0 0;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bright);
}
/* The addresses shortened to the r.marcks@… format, so the longest is now
   193px inside a 230px card — 10px fits again and reads better than the 9px
   the old 38-character addresses forced. */
.member__mail {
  display: inline-block;
  margin-top: 14px;
  font-size: 10px;
  color: var(--fg-faint);
  overflow-wrap: anywhere;
}
.member__mail:hover { color: var(--fg-dim); }

/* =========================================================
   MISSION
   ========================================================= */
.mission { padding: 10px 0 120px; background: var(--base); }
.mission__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; align-items: stretch; }
.mission__card {
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  padding: 58px 48px 54px;
}
.mission__card h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 200;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}
.mission__quote {
  margin: 30px 0 38px;
  font-family: var(--display);
  font-size: 21px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: var(--haze);
}
.mission__item + .mission__item { margin-top: 28px; }
.mission__item h3 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bright);
}
.mission__item p { margin: 8px 0 0; font-size: 14px; line-height: 1.8; color: var(--fg-dim); }

/* =========================================================
   LEGAL
   ========================================================= */
.legal { padding: 10px 0 120px; background: var(--base); }
.legal__inner { max-width: 720px; margin: 0 auto; }

/* Language switcher — one row of real links to the sibling translations. */
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 36px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-soft);
}
.lang-switch a {
  font-size: 12px;
  line-height: 1;
  color: var(--fg-faint);
  padding: 8px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.lang-switch a:hover { color: var(--fg); border-color: var(--line); }
.lang-switch a[aria-current='page'] {
  color: var(--fg);
  background: rgba(93, 136, 209, 0.22);
  border-color: rgba(146, 178, 228, 0.34);
}
.legal__meta {
  margin: 0 0 40px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 2;
  color: var(--fg-faint);
}
.legal__meta strong { color: var(--fg-dim); font-weight: 500; }
.legal__lede {
  margin: 0;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--haze);
}
.legal__lede + h2 { margin-top: 46px; }
.legal h2 {
  margin: 58px 0 18px;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 200;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}
.legal h3 {
  margin: 32px 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bright);
}
.legal p { margin: 0 0 16px; font-size: 14px; line-height: 1.9; color: var(--fg-dim); }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin: 9px 0; font-size: 14px; line-height: 1.85; color: var(--fg-dim); }
.legal strong { color: var(--fg); font-weight: 500; }
.legal a { color: var(--bright); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--fg); }
.legal__table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: 13px; }
.legal__table th,
.legal__table td {
  text-align: left;
  padding: 13px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.7;
}
.legal__table th { color: var(--fg); font-weight: 500; }
.legal__table td { color: var(--fg-dim); }
.legal__note {
  margin: 54px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--fg-faint);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { position: relative; z-index: 2; border-top: 2px solid var(--line); background: var(--base); }
.site-footer__inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 48px 5% 22px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 36px;
  align-items: start;
}
.footer__col p { margin: 0 0 12px; font-size: 12px; color: var(--fg-dim); }
.footer__col a { display: block; font-size: 12px; color: var(--fg-dim); }
.footer__col > a { margin-bottom: 12px; }
.footer__col p a { margin: 0; }
.footer__col a:hover { color: var(--fg); }

.footer__col--offset { padding-top: 14px; }

/* The mark sits centred in the gap between the phone number and the email
   address in column 2. Measured, not guessed — re-check if the footer type
   scale changes, since the gap moves with it. */
.footer__brand { display: inline-block; margin: 0; padding-top: 27px; }
.footer__mark { height: 28px; width: auto; opacity: 0.9; transition: opacity 0.2s ease; }
.footer__brand:hover .footer__mark { opacity: 1; }

/* "Follow us on" sits on the same baseline as info@…
   Needs .footer__col in front: `.footer__col p` is (0,1,1) and would
   otherwise beat a bare `.footer__label` (0,1,0) and reset the margin. */
.footer__col .footer__label { margin: 12px 0 10px; color: var(--fg-faint); }
.footer__social { display: inline-flex; color: var(--fg-dim); }
.footer__social:hover { color: var(--fg); }
.footer__social svg { width: 21px; height: 21px; }

.site-footer__legal {
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px 5% 36px;
  font-size: 10px;
  line-height: 1.75;
  color: var(--fg-faint);
}
.site-footer__legal a { color: inherit; transition: color 0.2s ease; }
.site-footer__legal a:hover { color: var(--fg-dim); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  :root { --header-h: 68px; }

  .site-header__inner { grid-template-columns: auto 1fr auto; padding: 0 20px; }
  .brand { justify-self: start; }
  .brand img { height: 15px; }
  .header__right { gap: 10px; }
  .btn-demo { padding: 9px 14px; font-size: 12px; }
  .nav-toggle { display: block; order: 3; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(7, 8, 26, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line-soft);
    padding: 10px 22px 24px;
    display: none;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav__link { font-size: 15px; padding: 15px 0; justify-content: space-between; }

  .nav__item .nav__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    padding: 0 0 8px 16px;
    min-width: 0;
    display: none;
  }
  .nav__item.is-open .nav__menu { display: block; }
  .nav__menu a { font-size: 14px; padding: 9px 0; }

  .hero { min-height: 92vh; padding-top: calc(var(--header-h) + 20px); }
  .hero__bloom {
    background:
      radial-gradient(78% 24% at 50% 87%, rgba(244, 247, 253, 0.92) 0%, rgba(206, 222, 245, 0.55) 26%, rgba(124, 158, 215, 0.28) 48%, rgba(7, 8, 26, 0) 76%),
      radial-gradient(120% 44% at 50% 81%, rgba(70, 112, 186, 0.58) 0%, rgba(32, 51, 120, 0.38) 44%, rgba(9, 13, 43, 0) 76%),
      radial-gradient(150% 68% at 50% 42%, rgba(19, 27, 89, 0.7) 0%, rgba(7, 8, 26, 0) 72%);
  }
  .hero__sub { font-size: 13px; margin-top: 30px; }
  .hero__cue { display: none; }

  .stats { padding: 76px 0 84px; }
  .stats__grid { grid-template-columns: 1fr; gap: 46px; }
  .stats__visual { order: -1; }
  .stats__numbers { grid-template-columns: 1fr; gap: 36px; }
  .stat__value { font-size: 44px; }

  .page-hero { padding: calc(var(--header-h) + 64px) 0 56px; }

  .product-hero { padding: calc(var(--header-h) + 52px) 0 66px; }
  .product-hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .product-hero__text { margin: 22px 0 30px; }

  .bento__grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 18px; }
  .bento__card { padding: 30px 26px; min-height: 260px; }

  .download { padding: 10px 0 76px; }
  .download__inner { grid-template-columns: 1fr; padding: 48px 28px; border-radius: 20px; }
  .download__visual img { width: 44%; margin: 6px 0 0; }

  .team { padding: 0 0 76px; }
  .team__grid { grid-template-columns: 1fr; gap: 18px; }
  .member__avatar { max-width: 200px; }

  .mission { padding: 0 0 76px; }
  .mission__grid { grid-template-columns: 1fr; gap: 18px; }
  .mission__card { padding: 38px 26px; }
  .mission__card h2 { font-size: 22px; }
  .mission__quote { font-size: 18px; margin: 22px 0 28px; }

  .legal { padding: 0 0 76px; }
  .legal h2 { margin: 42px 0 14px; padding-top: 26px; font-size: 19px; }
  .legal__lede { font-size: 17px; }
  .legal__table { font-size: 12px; }
  .legal__table th, .legal__table td { padding: 10px 8px; }

  /* stacked on mobile, so the desktop offsets would just be dead space */
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; padding: 52px 24px 22px; }
  .footer__col--offset { padding-top: 0; }
  .footer__col .footer__label { margin: 20px 0 12px; }
  .site-footer__legal { padding: 20px 24px 44px; }
}

@media (max-width: 1080px) and (min-width: 901px) {
  .team__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Between the mobile breakpoint and ~1100px the three stat columns get tight
   enough that "In development" wraps. Tighten the tracking rather than let
   one label run to two lines while its neighbours stay on one. */
@media (max-width: 1100px) and (min-width: 901px) {
  .stats__grid { gap: 44px; }
  .stats__numbers { gap: 44px 20px; }
  .stat__value { font-size: 44px; }
  .stat__label { font-size: 11px; letter-spacing: 0.07em; }
}