:root {
  --violet-800: #172554;
  --violet-700: #1e3a8a;
  --violet-600: #1d4ed8;
  --violet-500: #2563eb;
  --violet-400: #3b82f6;
  --violet-300: #60a5fa;
  --violet-200: #bfdbfe;
  --violet-50: #eff6ff;

  /* secondary accents for a richer, premium palette */
  --accent: #4f46e5;   /* indigo — refined secondary (was bright violet) */
  --accent-2: #22d3ee; /* cyan */

  --ink: #0d0f17;
  --text: #353a48;
  --muted: #71768a;
  --line: #ececf3;
  --line-strong: #d8dae5;
  --page: #ffffff;
  --soft: #f8f8fc;

  --shadow-sm: 0 1px 2px rgba(13,15,23,.06), 0 1px 1px rgba(13,15,23,.04);
  --shadow-md: 0 10px 30px rgba(13,15,23,.08);
  --shadow-lg: 0 30px 70px rgba(23,37,84,.16);

  --radius: 16px;
  --radius-lg: 22px;
  --maxw: 1160px;

  /* ---- vertical rhythm ----
     One owner for the space between page blocks. Sections pad on BOTH sides, so
     the gap a visitor actually sees between two neighbours is 2 x --section-y
     (88px phone -> 120px desktop). Every block-level gap below is one of these
     three tokens; nothing sets its own section-scale padding. */
  --section-y: clamp(44px, 5.5vw, 60px);   /* full beat  — between distinct sections */
  --section-y-sm: clamp(26px, 3.2vw, 34px);/* half beat  — blocks that read as one unit */
  --head-gap: clamp(30px, 3.4vw, 40px);    /* section head -> its content */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* min-height, not height: a fixed 100% body caps position:sticky's range at one
   viewport, which is why the header used to scroll away */
html, body { min-height: 100%; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
/* clip, not hidden: overflow-x hidden makes body a scroll container, which
   silently kills position:sticky on the header */
.site { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 760px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; }
.logo__mark { width: 34px; height: 34px; display: inline-block; flex: 0 0 auto; }
.logo__mark svg { width: 100%; height: 100%; display: block; }
.logo__word { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
/* the brand dot: a full stop in brand blue, sized to the wordmark */
.logo__dot { display: inline-block; width: .21em; height: .21em; border-radius: 50%; background: var(--violet-400); margin-left: 2px; vertical-align: baseline; }
.logo--light { color: #fff; }
.logo--dark { color: var(--ink); }
.logo--dark .logo__word { color: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15px; font-family: inherit;
  padding: 11px 20px; border-radius: 11px; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s, box-shadow .25s, background .2s, border-color .2s, color .2s;
  white-space: nowrap; position: relative;
}
.btn__arrow { transition: transform .2s; }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--primary { background: linear-gradient(135deg, var(--violet-400), var(--violet-500) 60%, var(--violet-600)); color: #fff; box-shadow: 0 8px 22px rgba(37,99,235,.34), inset 0 1px 0 rgba(255,255,255,.25); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(37,99,235,.44), inset 0 1px 0 rgba(255,255,255,.25); }
.btn--ghost { background: #fff; border-color: var(--line-strong); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { border-color: var(--violet-300); color: var(--violet-500); }
.btn--white { background: #fff; color: var(--violet-600); box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.btn--white:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.24); }
.btn--lg { padding: 14px 26px; font-size: 16px; }
.btn--sm { padding: 9px 16px; font-size: 14px; border-radius: 10px; }
.btn--block { width: 100%; }

/* ---------- Chip / eyebrow ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--violet-600); background: var(--violet-50); border: 1px solid #dbeafe;
}
.chip--light { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: transparent; backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, background .3s, transform .32s ease;
}
/* auto-hide on scroll down; keyboard focus always brings it back */
.header--hidden { transform: translateY(-100%); }
.header--hidden:focus-within { transform: none; }
.header.scrolled { border-color: var(--line); box-shadow: 0 1px 24px rgba(13,15,23,.06); background: rgba(255,255,255,.88); }
/* at the top the header is the same dark as the hero top, so they read as one band; flips to white on scroll */
.header:not(.scrolled) { background: #0b1736; border-bottom-color: transparent; }
.header:not(.scrolled) .logo--dark, .header:not(.scrolled) .logo--dark .logo__word { color: #fff; }
.header:not(.scrolled) .header__nav a { color: rgba(255,255,255,.82); }
.header:not(.scrolled) .header__nav a:hover { color: #fff; background: rgba(255,255,255,.12); }
.header:not(.scrolled) .burger span { background: #fff; }
.header:not(.scrolled) .lang { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
.header:not(.scrolled) .lang__btn { color: rgba(255,255,255,.75); }
.header:not(.scrolled) .lang__btn:hover { color: #fff; }
.header:not(.scrolled) .lang__btn.is-active { color: #fff; }
.header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 72px; }

.header__nav { display: flex; gap: 4px; justify-self: center; }
.header__nav a {
  color: var(--muted); font-weight: 500; font-size: 14.5px; padding: 8px 14px; border-radius: 9px;
  transition: color .2s, background .2s;
}
.header__nav a:hover { color: var(--ink); background: var(--soft); }

.header__right { display: flex; gap: 10px; align-items: center; justify-self: end; }
.header__sep { width: 1px; height: 22px; background: var(--line-strong); }

/* language switch */
.lang { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; }
.lang__btn {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: var(--muted);
  padding: 5px 10px; border-radius: 7px; transition: background .2s, color .2s;
}
.lang__btn:hover { color: var(--ink); }
.lang__btn.is-active { background: var(--violet-500); color: #fff; }

/* theme switch — segmented control, mirrors .lang */
.theme { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; }
.theme__btn {
  display: inline-grid; place-items: center; border: 0; background: none; cursor: pointer; font-family: inherit;
  color: var(--muted); padding: 5px 9px; border-radius: 7px; transition: background .2s, color .2s;
}
.theme__btn svg { width: 16px; height: 16px; display: block; }
.theme__btn:hover { color: var(--ink); }
.theme__btn.is-active { background: var(--violet-500); color: #fff; }
/* on the dark, un-scrolled header it reads as glass (mirrors .lang) */
.header:not(.scrolled) .theme { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
.header:not(.scrolled) .theme__btn { color: rgba(255,255,255,.75); }
.header:not(.scrolled) .theme__btn:hover { color: #fff; }
.header:not(.scrolled) .theme__btn.is-active { color: #fff; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: 4px; }
.burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 0 0 var(--section-y-sm); text-align: center; overflow-x: clip; }
/* dark band extends to ~the middle of the mockup; mockup's lower half is on white */
.hero__band { position: relative; padding: 60px 0 480px; }
.hero__mesh {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, #0b1736 0%, #102a63 55%, #1a3a86 100%);
}
/* soft glow for depth, centred behind the hero content like a lit stage */
.hero__mesh::before {
  content: ""; position: absolute; left: 50%; top: -120px; width: 1320px; height: 760px; margin-left: -660px;
  background: radial-gradient(closest-side, rgba(96,165,250,.36), transparent 70%);
}
/* curved bottom edge — the band dips and flows into the white page below (Aircall-style) */
.hero__curve {
  position: absolute; left: -1px; right: -1px; bottom: -1px; width: calc(100% + 2px);
  height: clamp(72px, 9vw, 140px); z-index: 0; display: block; pointer-events: none;
}
/* aurora blobs — curtain: start merged in the centre, open outward to the corners, fade (one-shot) */
.hero__blob {
  position: absolute; top: -90px; left: 50%; width: 1100px; height: 1100px; margin-left: -550px;
  border-radius: 50%; filter: blur(110px); mix-blend-mode: multiply; opacity: 0; will-change: transform, opacity;
}
.hero__blob--a {
  background: radial-gradient(circle at center, rgba(59,130,246,.28), transparent 72%);
  animation: blobA 5s cubic-bezier(.25,.8,.3,1) forwards;
}
.hero__blob--b {
  background: radial-gradient(circle at center, rgba(37,99,235,.24), transparent 72%);
  animation: blobB 5s cubic-bezier(.25,.8,.3,1) forwards;
}
@keyframes blobA {
  0%   { transform: translateX(0);     opacity: .04; }
  18%  { transform: translateX(-4vw);  opacity: .13; }  /* merged in the centre — barely visible */
  100% { transform: translateX(-52vw); opacity: 0; }    /* curtain opens to the left, fades */
}
@keyframes blobB {
  0%   { transform: translateX(0);     opacity: .035; }
  18%  { transform: translateX(4vw);   opacity: .12; }  /* merged in the centre — barely visible */
  100% { transform: translateX(52vw);  opacity: 0; }    /* curtain opens to the right, fades */
}
@media (prefers-reduced-motion: reduce) {
  .hero__blob { animation: none; opacity: 0; }
}
.hero__grid-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 55% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 55% at 50% 30%, #000 30%, transparent 75%);
}
.hero__inner { position: relative; z-index: 1; }
.badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.09); font-size: 13.5px; color: rgba(255,255,255,.9);
  margin-bottom: 28px; box-shadow: var(--shadow-sm); font-weight: 500; backdrop-filter: blur(6px);
}
.badge__tag { background: linear-gradient(135deg, var(--violet-500), var(--accent)); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.badge__arrow { color: rgba(255,255,255,.6); transition: transform .2s; margin-right: -3px; }
.badge:hover .badge__arrow { transform: translateX(3px); }
.hero__title { font-size: clamp(28px, 5.8vw, 72px); font-weight: 900; line-height: 1.1; letter-spacing: -.03em; color: #fff; white-space: nowrap; }
.hero__title .grad { display: inline-block; padding-bottom: .06em; }
/* light accent for the wordmark on the dark hero (scoped — leaves pillars .grad untouched) */
.hero__title .grad { background: linear-gradient(110deg, #7cb0ff, #a5b4fc 50%, #d6c9ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grad { background: linear-gradient(110deg, var(--violet-500), var(--violet-600) 45%, var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__sub { max-width: 980px; margin: 24px auto 0; color: rgba(255,255,255,.74); font-size: clamp(16px, 2.2vw, 20px); }
.hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
/* glass secondary button on the dark hero */
.hero .btn--ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; box-shadow: none; }
.hero .btn--ghost:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.55); color: #fff; }
.hero__proof { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; }
.avatars { display: flex; }
.avatars span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; box-shadow: var(--shadow-sm);
  background: linear-gradient(135deg, var(--violet-300), var(--violet-500)); }
.avatars span:first-child { margin-left: 0; }
.avatars span[style*="--i:1"] { background: linear-gradient(135deg, #f0abfc, var(--violet-400)); }
.avatars span[style*="--i:2"] { background: linear-gradient(135deg, #93c5fd, var(--violet-500)); }
.avatars span[style*="--i:3"] { background: linear-gradient(135deg, #a7f3d0, var(--violet-400)); }
.hero__proof-txt { text-align: left; line-height: 1.3; }
.hero__proof-txt b { display: block; color: #f59e0b; font-size: 14px; letter-spacing: 2px; }
.hero__proof-txt span { font-size: 13px; color: var(--muted); }

/* ---------- Product mockup ---------- */
.hero__stage { position: relative; z-index: 1; }
.mock { position: relative; margin: -430px auto 0; max-width: 980px; }

.mock__glow { position: absolute; inset: -6% 6% 12%; z-index: 0; background: radial-gradient(closest-side, rgba(59,130,246,.4), transparent); filter: blur(50px); }
.mock__win {
  position: relative; z-index: 1; text-align: left; background: #fff;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg), var(--shadow-md);
}
.mock__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--soft); }
.mock__bar span { width: 11px; height: 11px; border-radius: 50%; background: #d7d9e3; }
.mock__bar span:nth-child(1){ background:#ff5f57 } .mock__bar span:nth-child(2){ background:#febc2e } .mock__bar span:nth-child(3){ background:#28c840 }
.mock__bar em { margin-left: auto; color: var(--muted); font-style: normal; font-size: 12.5px; background:#fff; border:1px solid var(--line); padding:3px 12px; border-radius:8px; }
.mock__body { display: grid; grid-template-columns: 210px 1fr; min-height: 360px; }
.mock__side { background: linear-gradient(180deg, var(--violet-700), var(--violet-800)); color: #fff; padding: 13px 12px; display: flex; flex-direction: column; line-height: 1.3; }
.mock__brand { display:flex; align-items:center; gap:8px; font-weight: 800; letter-spacing: .06em; margin-bottom: 11px; padding: 0 4px; }
.mock__brand-mark { width:18px; height:18px; border-radius:6px; background: linear-gradient(135deg,#fff,var(--violet-200)); }
/* search affordance — the real app leads with it, so the mock does too */
.mock__search { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; padding: 6px 9px; border-radius: 8px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); font-size: 12.5px; color: rgba(255,255,255,.62); }
.mock__search i { font-style: normal; font-size: 13px; }
.mock__search em { font-style: normal; }
.mock__search kbd { margin-left: auto; font-family: inherit; font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
  background: rgba(255,255,255,.13); color: rgba(255,255,255,.72); }
.mock__nav { position: relative; list-style: none; display: grid; gap: 4px; }
.mock__nav-ind { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 9px;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .55s cubic-bezier(.34,1.3,.4,1), height .3s ease, background .22s ease; pointer-events: none; }
.mock__nav-ind.flash { background: rgba(255,255,255,.32); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.mock__nav li { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 7px 10px; border-radius: 8px;
  color: rgba(255,255,255,.72); transition: color .35s ease, background .2s ease; cursor: default; user-select: none; }
/* rows bound to a screen are real controls — the rest stay decorative */
.mock__nav li[role="tab"] { cursor: pointer; }
.mock__nav li[role="tab"]:hover { color: #fff; background: rgba(255,255,255,.08); }
.mock__nav li[role="tab"]:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.mock__nav li i { font-style: normal; font-size: 12px; width: 14px; text-align: center; opacity: .85; }
.mock__nav li.on { color: #fff; font-weight: 600; }
.mock__nav li.is-mute { color: rgba(255,255,255,.5); }
/* section headings inside the rail — not navigable, so no data-view and the
   indicator skips them, exactly as it does in the real app */
.mock__nav .mock__group { display: block; margin: 11px 0 3px; padding: 0 10px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.mock__side-foot { margin-top: auto; padding-top: 10px; display: grid; gap: 8px; }
.mock__timer { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.mock__timer i { font-style: normal; }
.mock__user { display: flex; align-items: center; gap: 9px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.14); }
.mock__user b { display: block; font-size: 12px; font-weight: 600; color: #fff; line-height: 1.25; }
.mock__user i { display: block; font-style: normal; font-size: 10.5px; line-height: 1.25; color: rgba(255,255,255,.55); }
.mock__av { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--violet-400), var(--accent)); }
.mock__main { padding: 20px; }
.mock__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
/* was an <h4> (decorative mock UI, not document structure — it skipped h1->h4).
   The reset zeroes margin/padding but not font-weight, so restate the UA bold. */
.mock__head .mock__h { font-size: 17px; font-weight: 700; color: var(--ink); }
.mock__head p { font-size: 13px; color: var(--muted); }
.mock__pill { font-size: 12.5px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; height: fit-content; }
.mock__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.mock__kpi { border: 1px solid var(--line); border-radius: 12px; padding: 13px; background:#fff; }
.mock__kpi span { font-size: 11.5px; color: var(--muted); display: block; }
.mock__kpi b { font-size: 21px; font-weight: 800; color: var(--ink); display: block; margin: 3px 0; }
.mock__kpi i { font-size: 11.5px; color: var(--muted); font-style: normal; }
.mock__kpi i.up { color: #16a34a; } .mock__kpi i.down { color: #dc2626; }
.mock__cards { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.mock__panel { border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.mock__panel-h { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.mock__panel-h span { color: var(--muted); font-weight: 400; }
.mock__bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; }
.mock__bars span { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--violet-300), var(--violet-500)); }
.mock__chart { display: grid; gap: 6px; }
.mock__xaxis { display: flex; gap: 10px; }
.mock__xaxis em { flex: 1; text-align: center; font-style: normal; font-size: 10px; color: var(--muted); }
.mock__feed { list-style: none; display: grid; gap: 11px; }
.mock__feed li { font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 9px; }
.mock__feed li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__feed li em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.mock__feed i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.mock__feed .d1 { background: var(--violet-400); } .mock__feed .d2 { background: #16a34a; } .mock__feed .d3 { background: #f59e0b; }

/* ----- Animated screens ----- */
.mock__main { position: relative; min-height: 376px; display: flex; flex-direction: column; }
.screen { display: none; }
.screen.is-active { flex: 1; }
.screen.is-active { display: flex; flex-direction: column; animation: scrIn .55s cubic-bezier(.2,.7,.2,1) both; }
/* The nav rail is taller than any single screen, so the screen box gets stretched.
   Let its main block absorb that slack instead of leaving the panel half empty. */
.screen.is-active > .mock__cards,
.screen.is-active > .mock__cols { flex: 1; min-height: 0; }
.screen.is-active > .notif:last-of-type,
.screen.is-active > .lv,
.screen.is-active > .tlog { flex: 1; min-height: 0; align-content: start; }
.mock__cards .mock__panel { display: flex; flex-direction: column; }
@keyframes scrIn {
  0% { opacity: 0; transform: translateY(12px) scale(.99); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

.screen.is-active .stagger > * { animation: itemIn .55s cubic-bezier(.22,1.2,.36,1) both; }
.screen.is-active .stagger > *:nth-child(1) { animation-delay: .05s; }
.screen.is-active .stagger > *:nth-child(2) { animation-delay: .11s; }
.screen.is-active .stagger > *:nth-child(3) { animation-delay: .17s; }
.screen.is-active .stagger > *:nth-child(4) { animation-delay: .23s; }
.screen.is-active .stagger > *:nth-child(5) { animation-delay: .29s; }
@keyframes itemIn {
  0% { opacity: 0; transform: translateY(14px); }
  60% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: none; }
}

.mock__bars span { transform: scaleY(0); transform-origin: bottom; }
.screen.is-active .mock__bars span { animation: barUp .75s cubic-bezier(.2,.85,.25,1) both; }
.screen.is-active .mock__bars span:nth-child(1) { animation-delay: .16s; }
.screen.is-active .mock__bars span:nth-child(2) { animation-delay: .22s; }
.screen.is-active .mock__bars span:nth-child(3) { animation-delay: .28s; }
.screen.is-active .mock__bars span:nth-child(4) { animation-delay: .34s; }
.screen.is-active .mock__bars span:nth-child(5) { animation-delay: .40s; }
.screen.is-active .mock__bars span:nth-child(6) { animation-delay: .46s; }
.screen.is-active .mock__bars span:nth-child(7) { animation-delay: .52s; }
@keyframes barUp { 0% { transform: scaleY(0); } 72% { transform: scaleY(1.05); } 100% { transform: scaleY(1); } }

/* ----- agent ----- */
.chat { display: grid; gap: 10px; margin-bottom: 12px; }
.chat__row { display: flex; gap: 8px; align-items: flex-start; }
.chat__row--me { justify-content: flex-end; }
.chat__av { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; display: grid; place-items: center;
  font-size: 11px; color: #fff; background: linear-gradient(135deg, var(--violet-400), var(--accent)); }
.chat__b { max-width: 78%; font-size: 12.5px; line-height: 1.5; padding: 9px 12px; border-radius: 12px;
  background: var(--soft); border: 1px solid var(--line); color: var(--text); }
.chat__b--me { background: var(--violet-500); border-color: var(--violet-500); color: #fff; }
.chat__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.chat__chips span { font-size: 11.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: #fff; }
/* pinned to the bottom of the screen box, the way a composer sits in a real chat */
.chat__bar { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; font-size: 12px; color: var(--muted); }
.chat__bar em { margin-left: auto; font-style: normal; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 7px; background: var(--violet-500); color: #fff; font-size: 12px; }

/* ----- leaves ----- */
.mock__row--3 { grid-template-columns: repeat(3, 1fr); }
.lv { list-style: none; display: grid; gap: 8px; align-content: start; }
.lv li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.lv li div { min-width: 0; }
.lv__av { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; color: var(--violet-600); background: var(--violet-50); border: 1px solid var(--violet-200); }
.lv__av--b { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.lv__av--c { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.lv li b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.lv li i { font-style: normal; font-size: 11.5px; color: var(--muted);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv__s { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; flex: 0 0 auto; }
.lv__s--wait { color: #b45309; background: #fffbeb; }
.lv__s--ok { color: #15803d; background: #f0fdf4; }

/* ----- reports ----- */
.prog { list-style: none; display: grid; gap: 12px; }
.prog li { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink); }
.prog li span { width: 96px; flex: 0 0 96px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog__bar { flex: 1; height: 7px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.prog__bar i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--violet-500), var(--violet-300)); }
.prog li em { font-style: normal; font-size: 11px; color: var(--muted); width: 34px; flex: 0 0 34px; text-align: right; }

/* a section heading between panels rather than inside one */
.mock__panel-h--sep { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 7px; }
.mock__panel-h--sep span { margin-left: auto; font-size: 11.5px; }
.tlog { list-style: none; display: grid; gap: 6px; align-content: start; }
.tlog li { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.tlog li div { min-width: 0; }
/* green = billable, grey = not; the Billable tile above gives it meaning */
.tlog__d { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--line-strong); }
.tlog__d--bill { background: #16a34a; }
.tlog li b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlog li i { font-style: normal; font-size: 11px; color: var(--muted); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlog li em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* ----- project board ----- */
.mock__tabs { display: flex; gap: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.mock__tabs span { position: relative; padding-bottom: 8px; font-size: 12.5px; color: var(--muted); }
.mock__tabs span.on { color: var(--violet-600); font-weight: 600; }
.mock__tabs span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--violet-500); }

.mock__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock__cols--4 { grid-template-columns: repeat(4, 1fr); }
.kb-col { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.kb-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 9px; }
.kb-h b { font-weight: 700; color: var(--text); }
.kb-card, .deal { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; font-size: 12.5px; color: var(--ink); margin-bottom: 7px; box-shadow: var(--shadow-sm); }
.kb-card:last-child, .deal:last-child { margin-bottom: 0; }
.kb-t { display: flex; gap: 5px; line-height: 1.3; }
.kb-t em { font-style: normal; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
.kb-t span { overflow: hidden; text-overflow: ellipsis; }
.kb-m { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.kb-tag { font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  color: var(--violet-600); background: var(--violet-50); }
/* base tag is API (violet); the rest are colour-coded by area */
.kb-tag--infra { color: #b45309; background: #fffbeb; }
.kb-tag--auth { color: #be123c; background: #fff1f2; }
.kb-tag--db { color: #15803d; background: #f0fdf4; }
.kb-hrs { font-size: 10.5px; color: var(--muted); }
.kb-av { margin-left: auto; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 8.5px; font-weight: 700; color: var(--violet-600); background: var(--violet-50); border: 1px solid var(--violet-200); }
.kb-av--b { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.kb-card--done .kb-t span { color: var(--muted); text-decoration: line-through; }
/* the pipeline variant is still used by the showcase section further down */
.deal { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.deal b { color: var(--violet-600); }
.deal--win { border-color: var(--violet-300); background: var(--violet-50); }

/* ----- notifications ----- */
.mock__seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); height: fit-content; }
.mock__seg span { font-size: 11.5px; padding: 4px 10px; border-radius: 6px; color: var(--muted); }
.mock__seg span.on { background: var(--violet-500); color: #fff; font-weight: 600; }
.mock__label { font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.notif { list-style: none; display: grid; gap: 7px; margin-bottom: 14px; }
.notif li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.notif__ic { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; display: grid; place-items: center;
  font-size: 11px; color: var(--violet-600); background: var(--violet-50); }
.notif__ic--win { color: #b45309; background: #fffbeb; }
.notif li div { min-width: 0; }
.notif b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif i { font-style: normal; font-size: 11.5px; color: var(--muted);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--muted); flex: 0 0 auto; }

/* ----- time tracking ----- */
.mock__timerbar { display: grid; grid-template-columns: 150px 1fr auto; gap: 8px; margin-bottom: 12px; }
.mock__select, .mock__input { font-size: 12px; color: var(--muted); padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__select::after { content: "▾"; float: right; margin-left: 8px; }
.mock__go { font-size: 12px; font-weight: 700; color: #fff; background: var(--violet-500); padding: 8px 18px; border-radius: 9px; }
.mock__summary { display: flex; align-items: center; gap: 16px; padding: 13px; }
/* conic ring — 72% of an 8h day, matching the 5h 45m logged */
/* flex, not grid: with `place-items:center` the two auto rows stretched to fill
   the circle and each label centred inside its own half, which shoved "of 8h"
   down against the arc. A centred column keeps them together. */
.ring { position: relative; width: 78px; height: 78px; flex: 0 0 78px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center;
  background: conic-gradient(var(--violet-500) 0 72%, var(--line) 72% 100%); }
.ring::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.ring b, .ring i { position: relative; z-index: 1; }
.ring b { font-size: 12.5px; font-weight: 800; line-height: 1.15; color: var(--ink); }
.ring i { font-style: normal; font-size: 9.5px; line-height: 1.15; color: var(--muted); }
.mock__sumtxt { min-width: 0; }
.mock__sumtxt > b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.mock__sumtxt > p { font-size: 12px; color: var(--muted); margin-top: 3px; }
.mock__sumrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.mock__sumrow div { border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; background: var(--soft); }
.mock__sumrow span { display: block; font-size: 10px; color: var(--muted); }
.mock__sumrow b { font-size: 13px; font-weight: 700; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .screen.is-active, .screen.is-active .stagger > *, .screen.is-active .mock__bars span { animation: none; }
  .mock__bars span { transform: none; }
}

/* click ripple */
.mock__ripple { position: absolute; z-index: 5; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: rgba(59,130,246,.45); pointer-events: none; animation: rip .62s cubic-bezier(.2,.7,.2,1) forwards; }
.mock__ripple.on-dark { background: rgba(255,255,255,.55); }
@keyframes rip {
  0% { transform: scale(.2); opacity: .8; }
  35% { opacity: .55; }
  65% { opacity: .26; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* element poke highlight — snappy press + settle */
.poke { animation: poke .6s cubic-bezier(.3,1.4,.5,1); }
@keyframes poke {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59,130,246,0); }
  18% { transform: scale(1.05); box-shadow: 0 0 0 4px rgba(59,130,246,.34); }
  40% { transform: scale(.985); box-shadow: 0 0 0 6px rgba(59,130,246,.12); }
  62% { transform: scale(1.015); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
  82% { transform: scale(.997); box-shadow: 0 0 0 1px rgba(59,130,246,.1); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}

/* ---------- Marquee ---------- */
.marquee-wrap { padding: var(--section-y-sm) 0; text-align: center; }
.marquee__label { color: var(--muted); font-size: 13px; letter-spacing: .04em; margin-bottom: 22px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: inline-flex; gap: 56px; white-space: nowrap; animation: scroll 32s linear infinite; }
.marquee__track span { font-weight: 700; font-size: 20px; color: #bcbfce; letter-spacing: .5px; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Pillars (modern cards) ---------- */
.pillars { padding: var(--section-y) 0 var(--section-y-sm); }
.pillars .section__head { max-width: none; }
.pillars .section__title { white-space: nowrap; }
.pillars .section__head { margin-bottom: var(--head-gap); }
.pillars__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pcard {
  position: relative; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 38px 28px 34px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s;
}
.pcard:hover { transform: translateY(-6px); border-color: var(--violet-200); box-shadow: 0 20px 44px rgba(23,37,84,.12); }
.pcard__ic {
  position: relative; width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
  color: var(--violet-600); margin: 0 auto 22px;
  background: var(--violet-50); border: 1px solid #dbeafe;
  transition: transform .25s cubic-bezier(.3,1.3,.5,1);
}
.pcard:hover .pcard__ic { transform: translateY(-2px) scale(1.05); }
.pcard__ic svg { width: 30px; height: 30px; display: block; }
.pcard h3 { font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); margin-bottom: 10px; }
.pcard p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* ---------- Integrations ---------- */
/* Built from the page's own components — .bento__cell for the panel, .chip for the
   status — so it inherits the card recipe, the hover and dark mode for free.
   Rows stack name over tools: side-by-side opened a ~450px gap the eye had to
   travel, which is what made the plain list read as a spreadsheet. */
.intg { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* as in #security: the head shares its columns with the panel grid below, so
   the lead text and the right panel meet on both edges */
#integrations .section__head--split { grid-template-columns: 1fr 1fr; column-gap: 18px; }
#integrations .section__head--split .section__lead { max-width: none; }
.intg__panel { display: flex; flex-direction: column; }
.intg__panel > .chip { align-self: flex-start; margin-bottom: 18px; }
.chip__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: 0 0 auto; }
.chip--on { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.chip--soon { color: var(--muted); background: var(--soft); border-color: var(--line); }
.intg__list { list-style: none; }
.intg__list li { padding: 15px 0; border-bottom: 1px solid var(--line); }
.intg__list li:first-child { padding-top: 0; }
.intg__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.intg__list b { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.intg__list span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.intg__ask { margin-top: 34px; text-align: center; font-size: 15px; color: var(--muted); }
.intg__ask a { color: var(--violet-500); font-weight: 600; white-space: nowrap; }
.intg__ask a:hover { text-decoration: underline; }

/* ---------- Security: vault panel + fact ledger ---------- */
/* The differentiator (bring your own AI) gets a dark navy panel — the only dark
   surfaces elsewhere are the hero and stats bands, so it reads as "important"
   without repeating another section's treatment. The remaining five points are
   verifiable facts, so they render as a ledger of hairline rows rather than six
   equal-weight cards fighting for attention. */
.sec-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 22px; align-items: stretch; }
/* the head sits directly above the vault/ledger grid — give it the same two
   columns so the lead shares both edges with the fact box below it. #customers
   has no two-column body to mirror, but its lead follows the same proportions
   so all the widened split heads read as one width. */
#security .section__head--split,
#customers .section__head--split { grid-template-columns: 0.92fr 1.08fr; column-gap: 22px; }
#security .section__head--split .section__lead,
#customers .section__head--split .section__lead { max-width: none; }
/* flush right edge: full lines end exactly on the card edge below; the last
   line stays left-ranged so it never letter-spaces itself apart */
#customers .section__head--split .section__lead {
  text-align: justify; text-align-last: left; hyphens: auto;
}
.sec-vault {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border-radius: var(--radius-lg); padding: 36px 34px 30px; color: #fff;
  /* same recipe as the benefits hero cell, so the two dark cards read as one family */
  background:
    radial-gradient(120% 120% at 88% 6%, rgba(34,211,238,.28), transparent 55%),
    linear-gradient(135deg, var(--violet-600), var(--violet-500) 58%, var(--accent));
  box-shadow: var(--shadow-md);
}
.sec-vault__ic {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  margin-bottom: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
}
.sec-vault__ic svg { width: 27px; height: 27px; }
.sec-vault h3 { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 10px; }
.sec-vault p { color: rgba(255,255,255,.82); font-size: 15.5px; max-width: 42ch; }
/* the flow diagram sits at the bottom of the panel, whatever the ledger's height */
.sec-flow { margin-top: auto; padding-top: 30px; display: flex; flex-direction: column; }
.sec-flow__node {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 12px;
  font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
}
.sec-flow__node svg { width: 20px; height: 20px; flex: 0 0 auto; opacity: .9; }
.sec-flow__node--hot { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
/* connector: dashed line through a lock badge, arrowhead at the receiving end */
.sec-flow__link { position: relative; height: 52px; display: grid; place-items: center; }
.sec-flow__link::before {
  content: ""; position: absolute; top: 4px; bottom: 10px; left: 50%;
  border-left: 2px dashed rgba(255,255,255,.34);
}
.sec-flow__link::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 7px; height: 7px; border-right: 2px solid rgba(255,255,255,.55); border-bottom: 2px solid rgba(255,255,255,.55);
}
.sec-flow__link svg {
  position: relative; width: 30px; height: 30px; padding: 6px; border-radius: 999px;
  color: #cffafe; background: #1d4ed8; border: 1px solid rgba(165,243,252,.4);
}
.sec-flow__nevers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sec-flow__nevers span {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.6);
  border: 1px dashed rgba(255,255,255,.28);
}
.sec-flow__nevers span::before { content: "✕"; font-size: 11px; color: rgba(255,255,255,.45); }
.sec-facts {
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(13,15,23,.04);
}
.sec-fact { display: flex; align-items: flex-start; gap: 16px; padding: 19px 24px; flex: 1; }
.sec-fact + .sec-fact { border-top: 1px solid var(--line); }
.sec-fact .bento__icon { width: 42px; height: 42px; border-radius: 11px; margin: 0; flex: 0 0 auto; }
.sec-fact .bento__icon svg { width: 22px; height: 22px; }
.sec-fact h3 { font-size: 16px; margin-bottom: 4px; }
.sec-fact p { font-size: 14.5px; color: var(--muted); max-width: 56ch; }

/* ---------- Sections ---------- */
.section { padding: var(--section-y) 0; }

/* ---- white-on-white seams ----
   A tinted .section--alt panel draws its own top and bottom edge, so a full beat
   either side of it is right. Where two UNTINTED blocks meet there is no
   background change doing that work, and 2 x --section-y of blank white reads as
   a hole in the page rather than a break between ideas — the heading already
   signals the new block. Worst case today is customers -> integrations ->
   security, three white sections in a row.
   So across a white seam we spend ONE beat in total, half from each side
   (~68px desktop, ~52px phone) instead of stacking two.
   This generalises the old `#features { padding-top }` one-off, which existed for
   exactly this reason and is now covered by the rule.
   One asymmetric beat everywhere: the leading section keeps its full half and the
   following section spends the small half, so every boundary on the page totals
   the same full-plus-half (~94px desktop) whether or not the background changes. */
:is(.hero, .section:not(.section--alt)) + :is(.section:not(.section--alt), .cta-wrap) {
  padding-top: var(--section-y-sm);
}
/* tinted and dark bands do their own separating with colour, so their white
   neighbours spend a reduced beat against them — a touch more white than the
   plain half, because the colour edge needs a little extra air to breathe */
.section:not(.section--alt):has(+ .section--alt) { padding-bottom: calc(var(--section-y) * .8); }
.section--alt + .section { padding-top: calc(var(--section-y) * .8); }

/* #problem is the exception the seam rule above gets wrong. It sits between the hero
   and #features, so it is halved on BOTH sides and ends up the tightest section on
   the page — and it is a full card grid, not the plain prose block the half-beat was
   written for. Give it the full beat top and bottom, plus a little more room inside:
   wider gutters between cards, and the accent CTA pushed clear of the three problem
   cards because it is a different kind of object, not a fourth one. */
#problem { padding-top: var(--section-y); padding-bottom: var(--section-y); }
#problem .bento { gap: 22px; }
#problem .bento__cell { padding: 30px; }
#problem .bento__cell--accent { margin-top: 10px; padding: 28px 30px; }

/* alternating sections are tinted panels. The tint + 1px rules already separate
   them; the old 14px margin added a page-coloured sliver that made alt-adjacent
   gaps 28px wider than every other gap, which is what broke the rhythm. */
.section--alt {
  position: relative; background: linear-gradient(180deg, #f3f7ff, #eef3ff);
  border-top: 1px solid #e6edfb; border-bottom: 1px solid #e6edfb;
  border-radius: 0; margin: 0;
}
/* offset anchor jumps for the sticky header */
:where(#top, #problem, #features, #showcase, #office, #achievements, #customers, #integrations, #security, #pricing, #faq) { scroll-margin-top: 92px; }
.section__head { max-width: 660px; margin-bottom: var(--head-gap); }
/* the FAQ head is only a chip since the title moved to an aria-label — the full
   head gap around one small pill reads as dead space, so it takes half */
#faq .section__head { margin-bottom: calc(var(--head-gap) / 2); }
#showcase { overflow-x: clip; }
.section__head--center { max-width: none; margin-left: auto; margin-right: auto; text-align: center; }
/* ONE measure for every centred lead. This had drifted to four competing widths
   (640 base / 820 features / 880 office+achievements / 900 customers), which made
   the page's rhythm read as accidental. ~92ch is wide for sustained body copy, but
   these are two-line marketing leads, and one honest width beats five tuned ones. */
.section__head--center .section__lead { max-width: 780px; margin-left: auto; margin-right: auto; }
/* ...with one exception: the features lead sits directly on top of the full-width
   bento, where the 780px cap reads as a mis-measure against that block's edge, so
   it takes the container width and the two line up. */
#features .section__lead { max-width: none; }
.section__head .chip { margin-bottom: 16px; }
.section__title { font-size: clamp(28px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.025em; color: var(--ink); line-height: 1.22; text-wrap: balance; }
.section__lead { color: var(--muted); font-size: 17px; margin-top: 14px; text-wrap: pretty; }

/* asymmetric editorial head, shared: the title holds the left column, the lead sits
   a column over, dropped to the title's baseline — weight against air instead of a
   centred stack. The page alternates this with centred and left-ranged heads so the
   centred ones (Why ONE, FAQ, CTA) read as deliberate anchor moments, not a default.
   Collapses back to a plain stack on one column. */
.section__head--split {
  max-width: none;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  column-gap: clamp(36px, 5vw, 90px); align-items: end;
}
.section__head--split .chip { grid-column: 1 / -1; justify-self: start; }
.section__head--split .section__title { grid-column: 1; max-width: 18ch; line-height: 1.14; letter-spacing: -.03em; }
.section__head--split .section__lead { grid-column: 2; margin-top: 0; padding-bottom: .55em; max-width: 52ch; }
/* deck treatment: the opening claim carries ink, the explanation stays muted —
   gives the lead a first line strong enough to hold its own against the title */
.section__lead strong { color: var(--ink); font-weight: 700; }
/* no underline at rest: the colour and weight already mark it as a link;
   the underline appears on hover as the affordance */
.section__lead a { color: var(--violet-600); font-weight: 600; text-decoration: none; }
.section__lead a:hover { text-decoration: underline; text-underline-offset: 3px; }
[data-theme="dark"] .section__lead a { color: var(--violet-300); }
@media (max-width: 960px) {
  .section__head--split { display: block; }
  .section__head--split .section__lead { padding-bottom: 0; margin-top: 14px; max-width: 56ch; }
}

/* pricing band: curved edges in the hero's family — the page dips INTO the band
   along the top and the band spills OUT into the page below, one inward and one
   outward, so the two edges are deliberately asymmetric. The hairline strokes on
   the curves stand in for the straight borders they replace. */
/* tinted bands share one treatment: taller, content centred, the page curving
   INWARD into the band on both edges, mirror images of each other */
:is(#achievements, #pricing) {
  border-top: 0; border-bottom: 0;
  padding-top: calc(var(--section-y) * 1.5); padding-bottom: calc(var(--section-y) * 1.5);
}
.band-curve {
  position: absolute; left: -1px; right: -1px; width: calc(100% + 2px);
  height: clamp(24px, 3.4vw, 40px); display: block; pointer-events: none;
}
.band-curve--top { top: -1px; }
.band-curve--bottom { bottom: -1px; }
.band-curve__page { fill: var(--page); }
.band-curve__line { fill: none; stroke: #e6edfb; stroke-width: 1.4; }
[data-theme="dark"] .band-curve__line { stroke: var(--line); }

/* the tinted bands get a whisper of film grain on top —
   texture under the cards, not on them */
:is(#achievements, #pricing)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.055'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* cards and copy ride above the grain */
:is(#achievements, #pricing) .container { position: relative; z-index: 1; }

/* the Why ONE head: the title is three short words, so it can afford display
   scale — the split's ranged-left weight against the lead's ragged right */
#customers .section__title { font-size: clamp(34px, 4.8vw, 56px); line-height: 1.05; letter-spacing: -.035em; }
/* the title is a single display line, so the lead's LAST line must land on it:
   the shared .55em lift is tuned for two-line titles and floats the lead here */
#customers .section__lead { font-size: 18px; padding-bottom: .1em; }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* no hover state: the cell is an <article>, not a link — a lift on hover promises a
   click target that isn't there. Interactive children (the accent CTA) keep theirs. */
.bento__cell { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: 0 2px 6px rgba(13,15,23,.04); }
.bento__cell--lg { grid-row: span 2; display: flex; flex-direction: column; }
.bento__cell--accent { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; background: linear-gradient(120deg, var(--violet-50), #fff 60%); border-color: #dbeafe; }
.bento__accent-cta { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
/* highlighted hero tile — spans two columns, brand gradient */
.bento__cell--hero { grid-column: span 2; border: 0; color: #fff; box-shadow: var(--shadow-md);
  background:
    radial-gradient(120% 120% at 88% 6%, rgba(34,211,238,.28), transparent 55%),
    linear-gradient(135deg, var(--violet-600), var(--violet-500) 58%, var(--accent)); }
.bento--benefits .bento__cell--hero h3 { color: #fff; font-size: 20px; }
.bento--benefits .bento__cell--hero p { color: rgba(255,255,255,.88); font-size: 15.5px; max-width: 46ch; }
.bento__cell--hero .bento__icon { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color: #fff; }
.ben-mods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ben-mods span { font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); padding: 6px 13px; border-radius: 999px; }
/* stats band sits inside the benefits bento, full width */
.bento--benefits .stats { grid-column: 1 / -1; }
.bento__cell--accent .bento__icon { margin-bottom: 0; flex: 0 0 auto; width: 56px; height: 56px; background: #fff; }
.bento__cell--accent .bento__icon svg { width: 28px; height: 28px; }
.bento__accent-body h3 { margin-bottom: 6px; }
.bento__icon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px; color: var(--violet-600); background: var(--violet-50); border: 1px solid #dbeafe; }
.bento__icon svg { width: 25px; height: 25px; }
/* the Problem cards describe the "before" state — neutral tiles, not brand blue */
.bento__icon--mute { color: var(--muted); background: var(--soft); border-color: var(--line); }
.bento__cell h3 { font-size: 18px; margin-bottom: 8px; color: var(--ink); }
.bento__cell p { color: var(--muted); font-size: 15px; }
.bento__viz { margin-top: auto; display: grid; gap: 10px; padding-top: 24px; }
.pipe { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-radius: 11px; background: var(--soft); border: 1px solid var(--line); font-size: 14px; }
.pipe span { color: var(--muted); } .pipe b { color: var(--ink); font-size: 16px; }
.pipe--hot { background: var(--violet-50); border-color: #cfe0fd; }
.pipe--hot b { color: var(--violet-600); }

/* ---------- Virtual office island scene ---------- */
/* text column left, island panel right — one hero block. The head sits centred
   against the panel; the panel's CSS background continues the SVG's own water
   gradient (the water rect goes transparent), so the wide scene floats centred
   in a taller card instead of being cropped or letterboxed. */
.office-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 56px); align-items: stretch; margin-bottom: 34px;
}
.office-split .section__head { max-width: none; margin-bottom: 0; align-self: center; }
#office .section__title { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.03em; max-width: 14ch; }
#office .section__lead { font-size: 17.5px; max-width: 44ch; }
/* no padding override: the white-seam rule's half beat is right now that the
   product section above is untinted — the old extra boost dated from when it was a
   tinted band and left the gap below the panel half again bigger than above it */
.isle-stage {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,.1); box-shadow: var(--shadow-lg);
  /* low floor: in the split grid the stage stretches to the row, and the row is
     sized by the text head, so both halves of the block end up exactly equal */
  min-height: 240px;
  background: linear-gradient(180deg, #5d79a6, #45608c);
}
/* the scene fills the panel and crops at the water's edges (slice), so it reads
   close-up — and the panel's height is exactly the text column's height (grid
   stretch), so the two halves of the block always match. */
.isle-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.isle-water { fill: transparent; }
@media (max-width: 960px) {
  .office-split { display: block; }
  .office-split .section__head { margin-bottom: var(--head-gap); }
  .isle-stage { min-height: 0; margin-bottom: 34px; aspect-ratio: 920 / 470; }
}
/* pills are drawn in SVG, so restate the type here rather than inline on every node */
.isle-pill rect { fill: rgba(255,255,255,.96); }
.isle-pill text { font-size: 13px; font-weight: 700; letter-spacing: -.01em; fill: #0d0f17; text-anchor: middle; }
.isle-pill--client rect { fill: rgba(255,255,255,.97); }
.isle-pill--client text { font-size: 13.5px; }
.isle-pill text.isle-cnt { fill: #fff; font-size: 11px; font-weight: 800; }
.isle-tag rect { fill: rgba(255,255,255,.94); }
.isle-tag text { font-size: 11.5px; font-weight: 600; fill: #353a48; text-anchor: middle; }
.isle-tag--name rect { fill: rgba(37,99,235,.94); }
.isle-tag--name text { fill: #fff; }

/* ---------- Gamification progress bar ---------- */
/* cards are equal height, so bottom-align the viz rather than leaving dead space
   under the shorter ones (.bento__viz already carries margin-top:auto) */
/* :not(--accent) — an id-scoped rule here would outrank the mobile stacking rule
   for the accent strip and pin it to a row on phones */
#achievements .bento__cell:not(.bento__cell--accent) { display: flex; flex-direction: column; }
#achievements .gbar { margin-top: auto; padding-top: 18px; }
.gbar { margin-top: 18px; }
.gbar__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 9px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.gbar__track { height: 8px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); overflow: hidden; }
.gbar__fill { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--violet-400), #4f46e5); }

/* bento mini-viz */
.btags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.btag { font-size: 12px; font-weight: 600; color: var(--muted); padding: 5px 11px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); }
.btag--on { color: var(--violet-600); background: var(--violet-50); border-color: #cfe0fd; }
.bavs { display: flex; align-items: center; margin-top: 18px; }
.bav { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; box-shadow: 0 1px 3px rgba(13,15,23,.12); background: var(--violet-300); }
.bav:first-child { margin-left: 0; }
.bav.a1 { background: linear-gradient(135deg,#60a5fa,#2563eb); }
.bav.a2 { background: linear-gradient(135deg,#818cf8,#4f46e5); }
.bav.a3 { background: linear-gradient(135deg,#34d399,#059669); }
.bav.a4 { background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.bav--n { display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--violet-600); background: var(--violet-50); }
.bspark { display: flex; align-items: flex-end; gap: 7px; height: 52px; margin-top: 18px; }
.bspark span { flex: 1; height: var(--h); border-radius: 5px 5px 3px 3px; background: linear-gradient(180deg, var(--violet-400), var(--violet-300)); opacity: .9; }
.bspark span:last-child { background: linear-gradient(180deg, var(--violet-500), var(--violet-400)); opacity: 1; }
.brule { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.brule__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--violet-500); box-shadow: 0 0 0 4px var(--violet-50); flex: 0 0 auto; }
.brule__bar { flex: 1; height: 7px; border-radius: 999px; background: linear-gradient(90deg, var(--violet-400), var(--violet-200)); }
.bswitch { width: 34px; height: 19px; border-radius: 999px; background: var(--violet-500); position: relative; flex: 0 0 auto; }
.bswitch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; }

/* ---------- Product section head ----------
   Bigger than the page default and left-ranged: this is the one section that opens
   into a scrolled sequence rather than a grid, so it earns a heavier title. The head
   drops its 660px cap so the lead measures the same as the panel below it. */
/* the head grid itself is the shared .section__head--split; only the display
   scale is showcase's own. */
/* display setting: tighter leading and tracking than the page default — at 58px the
   1.22 body-ish leading read as a gap between the two lines, not a headline */
#showcase .section__title { font-size: clamp(34px, 5vw, 58px); max-width: 17ch; line-height: 1.08; letter-spacing: -.035em; }
/* the German title runs longer than the English one and is capped by the split
   head's title COLUMN, not the ch limit — widen the column so the line breaks
   fall on the phrase boundaries, and balance the rag */
html[lang="de"] #showcase .section__head--split { grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); }
html[lang="de"] #showcase .section__title { max-width: none; text-wrap: balance; }
/* the pay-off words carry the brand: gradient-clipped text, the one decorated
   element in an otherwise plain head */
.section__title em {
  font-style: normal;
  background: linear-gradient(92deg, var(--violet-600), var(--violet-400) 55%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="dark"] .section__title em {
  background: linear-gradient(92deg, var(--violet-300), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
}
/* readable measure — full container width ran ~120ch, twice what a line can carry */
#showcase .section__lead { max-width: 62ch; font-size: 18px; }
/* the panel is a full-height pinned block, so it does not need the standard head gap
   or a full closing beat under it — both just read as dead colour here */
#showcase .section__head { margin-bottom: clamp(26px, 2.8vw, 40px); }
/* no padding override: the page-wide asymmetric beat already gives the panel the
   same ~94px of air above and below as every other boundary */

/* ---------- Product panel ----------
   One tinted panel: the areas accordion down the left, the matching mock on the
   right. .prod is a tall runway and the panel sticks inside it, so scrolling the
   runway is what opens each area in turn — the panel itself never moves.
   Every area's copy stays in the document (the accordion collapses with a 0fr grid
   row, not display:none), so with JS off this is three readable blocks and screen
   readers get all of it. */
.prod { position: relative; }
/* No sticky, no runway — deliberately. The scroll-driven version pinned this box
   and spent screens of empty scroll distance advancing the open area; that blank
   runway showed up as broken-looking voids around the panel at every window size.
   A plain in-flow panel with click-driven areas has nothing to leave a gap. */
.prod__frame {
  /* one padding token, used by the frame AND the viz, so the two halves sit on the
     same inner grid instead of each choosing its own inset */
  --pad: clamp(24px, 3vw, 44px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pad); padding: var(--pad);
  border-radius: clamp(20px, 2.2vw, 30px); box-shadow: var(--shadow-lg);
  background:
    radial-gradient(120% 120% at 6% 4%, rgba(96,165,250,.34), transparent 52%),
    radial-gradient(100% 100% at 96% 96%, rgba(79,70,229,.42), transparent 55%),
    linear-gradient(140deg, var(--violet-700), var(--violet-600) 46%, var(--accent));
}

/* the panel sizes to whichever area is open; the accordion's 0fr->1fr transition
   carries the resize smoothly, and the absolute-filled screen follows the row, so
   text column and screen are the same height in every state */
.prod__list { display: grid; align-content: start; gap: 16px; }
.prod__item {
  display: grid; text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid rgba(255,255,255,.16); border-radius: 16px;
  /* the open card holds a whole reading flow, so it gets a real inset — closed
     pills share it, which keeps their left edges ranged with the open card's */
  padding: clamp(24px, 2.4vw, 36px) clamp(24px, 2.6vw, 40px);
  background: rgba(255,255,255,.13);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.prod__item:hover { background: rgba(255,255,255,.2); }
.prod__item.is-active { background: var(--page); border-color: transparent; box-shadow: var(--shadow-md); cursor: default; }
.prod__item:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* the scale, all Inter: eyebrow 13 / headline 27 / lede 17 / body 15.5.
   The drama comes from the jumps between steps, not from new faces. */
.prod__label { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.92); transition: color .35s ease; }
.prod__item.is-active .prod__label { color: var(--violet-600); }
.prod__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; opacity: .75; }

/* 0fr -> 1fr is the one way to animate to a content-derived height. The inner
   wrapper carries the overflow so the collapsed copy is clipped, not deleted. */
.prod__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.prod__item.is-active .prod__body { grid-template-rows: 1fr; }
.prod__body-in { overflow: hidden; min-height: 0; }
.prod__h { display: block; font-size: clamp(21px, 1.9vw, 27px); font-weight: 800; letter-spacing: -.02em; line-height: 1.18; color: var(--ink); padding-top: 26px; text-wrap: balance; }
.prod__body p { color: var(--muted); font-size: 15.5px; line-height: 1.65; margin-top: 16px; text-wrap: pretty; }
/* the first paragraph is the lede: a half-step larger and a shade darker */
.prod__body-in > p:first-of-type { font-size: 17px; color: var(--text); margin-top: 18px; }
.prod__feats { list-style: none; display: grid; gap: 13px; margin: 26px 0 4px; padding-top: 22px; border-top: 1px solid var(--line); }
.prod__feats li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text); }
.prod__feats li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--violet-50); color: var(--violet-500); font-weight: 800; font-size: 11px; flex: 0 0 auto; }

/* the mocks share one cell and cross-fade, so the panel never changes height */
/* no inner frame: the screen IS the right-hand box, so its top and bottom edges
   land exactly on the text column's lines instead of 24px inside them.
   The mocks are ABSOLUTE, and that is a guarantee, not a convenience: an absolute
   child contributes nothing to the row's height, so the right side can never be
   taller or shorter than the text column — in any engine, under any content. */
.prod__viz { position: relative; }
.prod__mock { position: absolute; inset: 0; }
/* the screen fills the viz completely, so it stands exactly as tall as the text
   block beside it. (This is also why the old watermark numeral is gone — a full-
   height screen leaves it nowhere to sit.) */
.prod__mock { opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
.prod__mock.is-active { opacity: 1; transform: none; }
/* drawn as a little app window: title bar with traffic dots, then the content
   filling the full height — columns and bars stretch to spend it, so the screen
   never shows a dead bottom */
.prod__mock .vcard { height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--page); border-radius: var(--radius-lg); padding: 0; box-shadow: var(--shadow-md); }
.vcard__bar { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 13px 18px; background: var(--soft); border-bottom: 1px solid var(--line); }
.vcard__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.vcard__body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: clamp(20px, 2vw, 30px); }
.prod__mock .vcard__h { font-size: 16px; margin-bottom: 20px; }
.prod__mock .vcard__cols { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* ---- the Sales screen: CRM dashboard, not a kanban ----
   The kanban visual belongs to the Boards area; sales & invoicing is stage
   totals and a deal list with amounts. Three stat tiles reuse the translated
   stage labels, and below them a table of deal rows — a fundamentally different
   grid from the board's card columns. */
.vstats { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.vstat { padding: 12px 14px 14px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.vstat b { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
/* the big number, as a skeleton bar */
.vstat::after { content: ""; display: block; margin-top: 9px; height: 13px; width: 64%; border-radius: 7px; background: rgba(13, 15, 23, .12); }
.vstat--hot { background: var(--violet-50); border-color: #cfe0fd; }
.vstat--hot b { color: var(--violet-600); }
.vstat--hot::after { background: rgba(37, 99, 235, .32); }
/* the deal table: full-width rows — avatar, deal title, amount right-aligned */
.vtable { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.vtr {
  position: relative; overflow: hidden;
  flex: 1 1 auto; min-height: 38px; max-height: 74px; border-radius: 10px;
  --sk: rgba(13, 15, 23, .08);
  background-color: var(--soft);
  background-image:
    radial-gradient(circle closest-side, var(--sk) 0 92%, transparent 100%),  /* avatar */
    linear-gradient(var(--sk) 0 0),                                           /* deal title */
    linear-gradient(rgba(37, 99, 235, .2) 0 0);                               /* amount */
  background-repeat: no-repeat;
  background-size: 16px 16px, var(--w1, 42%) 9px, 44px 9px;
  background-position: 14px 50%, 42px 50%, calc(100% - 14px) 50%;
}
.vtable .vtr:nth-child(odd) { --w1: 46%; }
.vtable .vtr:nth-child(even) { --w1: 33%; }
.vtable .vtr:nth-child(3n) { --w1: 55%; }
.vtr--hot { background-color: var(--violet-50); }
[data-theme="dark"] .vtr { --sk: rgba(255, 255, 255, .1); }
/* dark theme: the light-theme blues vanish on a dark surface — lift the labels
   toward white and let the hot tile carry a readable sky blue */
[data-theme="dark"] .vstat::after { background: rgba(255, 255, 255, .26); }
[data-theme="dark"] .vstat b { color: rgba(226, 232, 248, .78); }
[data-theme="dark"] .vstat--hot { background: rgba(96, 165, 250, .16); border-color: rgba(147, 197, 253, .5); }
[data-theme="dark"] .vstat--hot b { color: #93c5fd; }
[data-theme="dark"] .vstat--hot::after { background: rgba(147, 197, 253, .6); }
[data-theme="dark"] .vcol b { color: rgba(226, 232, 248, .78); }
.prod__mock .vcol { display: flex; flex-direction: column; gap: 12px; }
.prod__mock .vcol b { font-size: 13px; margin-bottom: 0; }
/* Tickets are compact like the real thing, but flexible WITHIN a band: a hard
   104px height let the screen's natural size exceed the text column on wide
   windows, pushing the screen's bottom edge past the last pill. Flexing between
   64 and 126px means the column height always wins and the tickets absorb the
   difference — never dictating, never hollow. */
.prod__mock .vrow { flex: 1 1 auto; height: auto; max-height: 126px; min-height: 64px; border-radius: 12px; margin-bottom: 0; }
/* ---- the Team screen: three stacked zones ----
   week chart (time tracking), compact per-project bars, then a team list with
   status pills (directory + leave). Nothing spreads to fill — the team list is
   the flexible zone, so the bars stay grouped instead of drifting apart. */
.prod__mock .vbars { flex: 0 0 auto; display: grid; gap: 16px; margin-bottom: 18px; }
.vweek { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 10px; height: 104px; padding: 14px 16px; margin-bottom: 18px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.vweek i {
  flex: 1; height: var(--h, 40%); border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--violet-400), var(--violet-300));
}
/* weekend days sit muted */
.vweek i:nth-child(n+6) { background: var(--line); }
.vteam { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.vpr {
  position: relative; overflow: hidden;
  flex: 1 1 auto; min-height: 38px; max-height: 62px; border-radius: 10px;
  --sk: rgba(13, 15, 23, .08);
  background-color: var(--soft);
  background-image:
    radial-gradient(circle closest-side, var(--sk) 0 92%, transparent 100%),  /* avatar */
    linear-gradient(var(--sk) 0 0),                                           /* name */
    linear-gradient(rgba(37, 99, 235, .2) 0 0);                               /* status pill */
  background-repeat: no-repeat;
  background-size: 16px 16px, var(--w1, 34%) 9px, 40px 9px;
  background-position: 14px 50%, 42px 50%, calc(100% - 14px) 50%;
}
.vteam .vpr:nth-child(2) { --w1: 27%; }
.vteam .vpr:nth-child(3) { --w1: 40%; }
.vteam .vpr:nth-child(4) { --w1: 30%; }
/* away on leave: cyan pill, softened row */
.vpr--away { background-color: rgba(34, 211, 238, .07); }
.vpr--away { background-image:
    radial-gradient(circle closest-side, var(--sk) 0 92%, transparent 100%),
    linear-gradient(var(--sk) 0 0),
    linear-gradient(rgba(34, 211, 238, .45) 0 0); }
[data-theme="dark"] .vpr { --sk: rgba(255, 255, 255, .1); }
[data-theme="dark"] .vweek i:nth-child(n+6) { background: rgba(255, 255, 255, .08); }
.prod__mock .vbar { gap: 9px; }
.prod__mock .vbar span { height: 12px; }
.prod__mock .vbar em { font-size: 13.5px; }

/* ---- screen realism ----
   Every card is a ticket, drawn entirely with background gradients — no extra
   markup. Pipeline tickets: two title lines, a value chip and the avatar in a
   meta row at the foot. Board tickets: a coloured tag, one title line, then a
   ticket-key bar and the avatar at the foot — the anatomy of a real tracker
   card. Widths vary per row so the columns read as different records. */
.prod__mock .vrow {
  position: relative; overflow: hidden;
  --sk: rgba(13, 15, 23, .07);
  background-color: var(--soft);
  background-image:
    linear-gradient(var(--sk) 0 0),                                          /* title */
    linear-gradient(var(--sk) 0 0),                                          /* line 2 / key */
    linear-gradient(rgba(37, 99, 235, .16) 0 0),                             /* value chip */
    radial-gradient(circle closest-side, var(--sk) 0 92%, transparent 100%); /* avatar */
  background-repeat: no-repeat;
  background-size: var(--w1, 68%) 9px, var(--w2, 44%) 8px, 30px 10px, 17px 17px;
  background-position: 16px 17px, 16px 35px, 16px calc(100% - 24px), calc(100% - 15px) calc(100% - 15px);
}
.prod__mock .vcol .vrow:nth-of-type(odd) { --w1: 72%; --w2: 48%; }
.prod__mock .vcol .vrow:nth-of-type(even) { --w1: 55%; --w2: 38%; }
.prod__mock .vcol .vrow:nth-of-type(3n) { --w1: 78%; --w2: 30%; }
/* .on and .win must restate the whole stack: their base rules use the background
   SHORTHAND, which silently resets image and repeat for anything less specific */
.prod__mock .vrow.on {
  --sk: rgba(37, 99, 235, .18);
  background-color: var(--violet-50);
  background-image:
    linear-gradient(var(--sk) 0 0),
    linear-gradient(var(--sk) 0 0),
    linear-gradient(rgba(37, 99, 235, .22) 0 0),
    radial-gradient(circle closest-side, var(--sk) 0 92%, transparent 100%);
  background-repeat: no-repeat;
  background-size: var(--w1, 68%) 9px, var(--w2, 44%) 8px, 30px 10px, 17px 17px;
  background-position: 16px 17px, 16px 35px, 16px calc(100% - 24px), calc(100% - 15px) calc(100% - 15px);
}
.prod__mock .vrow.win {
  --sk: rgba(255, 255, 255, .45);
  background-color: transparent;
  background-image:
    linear-gradient(var(--sk) 0 0),
    linear-gradient(var(--sk) 0 0),
    linear-gradient(rgba(255, 255, 255, .55) 0 0),
    radial-gradient(circle closest-side, var(--sk) 0 92%, transparent 100%),
    linear-gradient(135deg, var(--violet-400), var(--violet-300));
  background-repeat: no-repeat;
  background-size: var(--w1, 68%) 9px, var(--w2, 44%) 8px, 30px 10px, 17px 17px, 100% 100%;
  background-position: 16px 17px, 16px 35px, 16px calc(100% - 24px), calc(100% - 15px) calc(100% - 15px), 0 0;
}

/* ---- the Board screen: tracker tickets ----
   tag pill top-left (::after — ::before is the shimmer), single title line, and a
   mono-ish ticket-key bar in the foot instead of the pipeline's value chip */
.prod__mock--board .vrow {
  background-image:
    linear-gradient(var(--sk) 0 0),                                          /* title */
    linear-gradient(var(--sk) 0 0),                                          /* key bar */
    linear-gradient(transparent 0 0),                                        /* (chip slot unused) */
    radial-gradient(circle closest-side, var(--sk) 0 92%, transparent 100%);
  background-size: var(--w1, 68%) 9px, 38px 8px, 0 0, 17px 17px;
  background-position: 16px 40px, 16px calc(100% - 23px), 0 0, calc(100% - 15px) calc(100% - 15px);
}
.prod__mock--board .vrow.on {
  background-color: var(--violet-50);
  background-image:
    linear-gradient(var(--sk) 0 0),
    linear-gradient(var(--sk) 0 0),
    linear-gradient(transparent 0 0),
    radial-gradient(circle closest-side, var(--sk) 0 92%, transparent 100%);
  background-size: var(--w1, 68%) 9px, 38px 8px, 0 0, 17px 17px;
  background-position: 16px 40px, 16px calc(100% - 23px), 0 0, calc(100% - 15px) calc(100% - 15px);
}
.prod__mock--board .vrow.win {
  background-color: transparent;
  background-image:
    linear-gradient(var(--sk) 0 0),
    linear-gradient(var(--sk) 0 0),
    linear-gradient(transparent 0 0),
    radial-gradient(circle closest-side, var(--sk) 0 92%, transparent 100%),
    linear-gradient(135deg, var(--violet-400), var(--violet-300));
  background-size: var(--w1, 68%) 9px, 38px 8px, 0 0, 17px 17px, 100% 100%;
  background-position: 16px 40px, 16px calc(100% - 23px), 0 0, calc(100% - 15px) calc(100% - 15px), 0 0;
}
/* the tag pill; a different colour per row position, brand-adjacent and quiet */
.prod__mock--board .vrow::after {
  content: ""; position: absolute; top: 13px; left: 16px; width: 42px; height: 11px;
  border-radius: 999px; background: var(--tag, rgba(37, 99, 235, .22));
}
.prod__mock--board .vcol .vrow:nth-of-type(2)::after { --tag: rgba(34, 211, 238, .32); width: 34px; }
.prod__mock--board .vcol .vrow:nth-of-type(3)::after { --tag: rgba(79, 70, 229, .24); width: 50px; }
.prod__mock--board .vcol .vrow:nth-of-type(4)::after { --tag: rgba(13, 15, 23, .1); width: 38px; }
.prod__mock--board .vcol .vrow:nth-of-type(5)::after { --tag: rgba(34, 211, 238, .26); width: 44px; }
.prod__mock--board .vrow.on::after { --tag: rgba(37, 99, 235, .3); }
.prod__mock--board .vrow.win::after { --tag: rgba(255, 255, 255, .55); }

[data-theme="dark"] .prod__mock .vrow { --sk: rgba(255, 255, 255, .2); }
[data-theme="dark"] .prod__mock .vrow.win { --sk: rgba(255, 255, 255, .6); }
[data-theme="dark"] .prod__mock--board .vrow::after { --tag: rgba(255, 255, 255, .24); }

/* ---- slight automated motion, all opt-out via reduced motion ----
   1. opening an area cascades its cards in with a small stagger
   2. a soft shimmer sweeps each column on a slow loop
   3. the hours bars fill from zero when their screen opens */
@media (prefers-reduced-motion: no-preference) {
  .prod__mock :is(.vrow, .vtr, .vpr) { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
  /* the two boards must not move alike: pipeline cards RISE into place, board
     cards SLIDE IN from the left — the direction work travels across statuses */
  .prod__mock--board .vrow { transform: translateX(-14px); }
  .prod__mock.is-active :is(.vrow, .vtr, .vpr) { opacity: 1; transform: none; }
  .prod__mock.is-active .vcol .vrow:nth-of-type(1) { transition-delay: .05s; }
  .prod__mock.is-active .vcol .vrow:nth-of-type(2) { transition-delay: .13s; }
  .prod__mock.is-active .vcol .vrow:nth-of-type(3) { transition-delay: .21s; }
  .prod__mock.is-active .vcol .vrow:nth-of-type(4) { transition-delay: .29s; }
  .prod__mock.is-active .vcol .vrow:nth-of-type(5) { transition-delay: .37s; }
  .prod__mock.is-active .vtable .vtr:nth-child(1) { transition-delay: .05s; }
  .prod__mock.is-active .vtable .vtr:nth-child(2) { transition-delay: .11s; }
  .prod__mock.is-active .vtable .vtr:nth-child(3) { transition-delay: .17s; }
  .prod__mock.is-active .vtable .vtr:nth-child(4) { transition-delay: .23s; }
  .prod__mock.is-active .vtable .vtr:nth-child(5) { transition-delay: .29s; }
  .prod__mock.is-active .vtable .vtr:nth-child(6) { transition-delay: .35s; }
  .prod__mock.is-active .vtable .vtr:nth-child(7) { transition-delay: .41s; }
  .prod__mock.is-active .vtable .vtr:nth-child(8) { transition-delay: .47s; }

  /* one sweep when the screen opens, then rest — a loop here pulls the eye
     away from the copy for as long as the panel is on screen */
  .prod__mock.is-active:not(.prod__mock--board) :is(.vrow, .vtr)::before {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
    animation: vshimmer 2.4s ease-in-out 1 forwards;
  }
  .prod__mock.is-active:not(.prod__mock--board) .vcol:nth-child(2) .vrow::before { animation-delay: .4s; }
  .prod__mock.is-active:not(.prod__mock--board) .vcol:nth-child(3) .vrow::before { animation-delay: .8s; }
  .prod__mock--board.is-active .vrow.on::after { animation: tagpulse 2.6s ease-in-out infinite; }

  .prod__mock .vteam .vpr:nth-child(1) { transition-delay: .5s; }
  .prod__mock .vteam .vpr:nth-child(2) { transition-delay: .58s; }
  .prod__mock .vteam .vpr:nth-child(3) { transition-delay: .66s; }
  .prod__mock .vteam .vpr:nth-child(4) { transition-delay: .74s; }
  /* the week chart grows out of its baseline, one day after the next */
  .vweek i { transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .prod__mock.is-active .vweek i { transform: none; }
  .prod__mock.is-active .vweek i:nth-child(2) { transition-delay: .06s; }
  .prod__mock.is-active .vweek i:nth-child(3) { transition-delay: .12s; }
  .prod__mock.is-active .vweek i:nth-child(4) { transition-delay: .18s; }
  .prod__mock.is-active .vweek i:nth-child(5) { transition-delay: .24s; }
  .prod__mock.is-active .vweek i:nth-child(6) { transition-delay: .3s; }
  .prod__mock.is-active .vweek i:nth-child(7) { transition-delay: .36s; }
  .prod__mock .vbar span::after { width: 0; transition: width .7s cubic-bezier(.2,.7,.2,1); }
  .prod__mock.is-active .vbar span::after { width: var(--w); }
  .prod__mock.is-active .vbar:nth-child(1) span::after { transition-delay: .1s; }
  .prod__mock.is-active .vbar:nth-child(2) span::after { transition-delay: .22s; }
  .prod__mock.is-active .vbar:nth-child(3) span::after { transition-delay: .34s; }
  .prod__mock.is-active .vbar:nth-child(4) span::after { transition-delay: .46s; }
}
@keyframes vshimmer {
  0% { transform: translateX(-100%); }
  45%, 100% { transform: translateX(120%); }
}
@keyframes tagpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
  .prod__body, .prod__item, .prod__label, .prod__mock { transition: none; }
}

/* the abstract record mocks, shared by every product panel */
.vcard__h { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 18px; }
.vcard__h span { color: var(--muted); font-weight: 500; }
.vcard__cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.vcol b { display: block; font-size: 12px; color: var(--muted); margin-bottom: 10px; font-weight: 600; }
.vrow { height: 38px; border-radius: 9px; background: var(--soft); border: 1px solid var(--line); margin-bottom: 9px; }
.vrow.on { background: var(--violet-50); border-color: #cfe0fd; }
.vrow.win { background: linear-gradient(135deg, var(--violet-400), var(--violet-300)); border: 0; }
.vbars { display: grid; gap: 16px; }
.vbar { display: grid; gap: 7px; }
.vbar em { font-size: 12.5px; color: var(--muted); font-style: normal; }
.vbar span { display: block; height: 9px; border-radius: 999px; background: var(--soft); position: relative; overflow: hidden; }
.vbar span::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--violet-500), var(--violet-300)); }

/* ---------- Stats ---------- */
.stats { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; padding: 52px 24px; border-radius: var(--radius-lg);
  background:
    radial-gradient(110% 80% at 84% 4%, rgba(34,211,238,.30), transparent 55%),
    radial-gradient(120% 110% at 6% 104%, rgba(79,70,229,.44), transparent 60%),
    linear-gradient(135deg, var(--violet-600), var(--violet-500) 55%, var(--accent));
  color:#fff; box-shadow: var(--shadow-lg); }
.stats::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 4px 4px; opacity: .5; pointer-events: none; }
.stat { position: relative; z-index: 1; }
.stat:not(:first-child)::after { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); height: 56%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.22), transparent); }
.stat b { display: block; font-size: clamp(34px, 4.6vw, 48px); font-weight: 800; letter-spacing: -.02em; line-height: 1; text-shadow: 0 2px 14px rgba(13,15,23,.18); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 10px; color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.45; max-width: 22ch; margin-left: auto; margin-right: auto; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.quote__stars { color: #f59e0b; letter-spacing: 2px; font-size: 14px; }
.quote blockquote { font-size: 15.5px; color: var(--text); margin: 14px 0 20px; line-height: 1.6; }
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.quote__av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--violet-300), var(--violet-500)); flex: 0 0 auto; }
.quote figcaption b { display: block; font-size: 14px; color: var(--ink); }
.quote figcaption i { font-size: 13px; color: var(--muted); font-style: normal; }

/* ---------- Pricing ---------- */
.toggle { display: inline-flex; gap: 4px; margin-top: 24px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); }
.toggle__btn { border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--muted); padding: 8px 18px; border-radius: 999px; transition: background .2s, color .2s; }
.toggle__btn.is-active { background: var(--violet-500); color: #fff; }
.toggle__btn em { font-style: normal; font-size: 11px; opacity: .85; }
/* the plan card itself isn't clickable — only its CTA is, so the card stays still */
.pricing .plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: 0 2px 6px rgba(13,15,23,.04); }
/* push CTAs to the bottom so all three align regardless of feature count */
.pricing .plan .btn { margin-top: auto; }
.plan h3 { font-size: 16px; color: var(--muted); font-weight: 600; }
.plan__price { display: flex; align-items: baseline; gap: 2px; margin: 10px 0; }
.plan__price .cur { font-size: 22px; font-weight: 700; color: var(--ink); }
.plan__price b { font-size: 42px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.plan__price .per { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.plan__desc { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.plan ul { list-style: none; margin-bottom: 24px; }
.plan li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--text); }
.plan li::before { content: "✓"; color: var(--violet-500); font-weight: 800; margin-right: 10px; }
/* needs .pricing prefix to outrank `.pricing .plan`; thin, soft violet featured outline */
.pricing .plan--featured { border-color: rgba(37,99,235,.34); box-shadow: 0 16px 40px rgba(37,99,235,.12); }
/* featured card gets a cool purple→blue gradient so it stands apart from the plain-blue CTAs */
.pricing .plan--featured .btn--primary { background: var(--violet-500); box-shadow: 0 8px 22px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.28); }
.pricing .plan--featured .btn--primary:hover { box-shadow: 0 12px 30px rgba(37,99,235,.42), inset 0 1px 0 rgba(255,255,255,.28); }
.pricing .plan--featured .plan__badge { background: var(--violet-500); }
.plan__badge { position: absolute; top: -12px; right: 24px; background: var(--violet-500); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; box-shadow: var(--shadow-sm); }

/* ---------- FAQ ---------- */
.faq details { border: 1px solid var(--line); border-radius: 13px; background: #fff; margin-bottom: 12px; overflow: hidden; transition: box-shadow .2s; }
/* the last item's list-gap margin must not leak into the section boundary */
.faq details:last-child { margin-bottom: 0; }
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary { padding: 19px 22px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 15.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--violet-500); font-size: 22px; transition: transform .2s; flex: 0 0 auto; margin-left: 16px; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 22px 20px; color: var(--muted); font-size: 15px; }

/* ---------- CTA ---------- */
/* the footer below opens with its curve overlay, which already reads as air —
   the band spends only the small half against it */
.cta-wrap { padding: var(--section-y) 0 var(--section-y-sm); }
.cta {
  position: relative; overflow: hidden; text-align: center; padding: 72px 24px; border-radius: 28px; color: #fff;
  background:
    radial-gradient(110% 80% at 82% 6%, rgba(34,211,238,.34), transparent 55%),
    radial-gradient(120% 100% at 8% 102%, rgba(79,70,229,.52), transparent 60%),
    linear-gradient(135deg, var(--violet-600), var(--violet-500) 55%, var(--accent));
  /* no drop shadow: the big 70px-blur smeared a grey band across the white gap
     below, right where the footer curve begins — the gradient carries the card */
}
.cta__noise { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 4px 4px; opacity: .5; }
.cta > * { position: relative; }
.cta .chip { margin-bottom: 18px; }
.cta h2 { font-size: clamp(30px, 5vw, 50px); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
.cta p { margin: 16px auto 30px; font-size: 18px; color: rgba(255,255,255,.9); max-width: 520px; }
.cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
/* dark footer — same blue as the hero band, with a curved top edge (mirror of the hero curve) */
/* top padding is NOT --section-y: the curve overlay above is up to 120px tall and
   footer content has to start below it, so this stays a deliberate larger value */
.footer { position: relative; overflow: hidden; background: linear-gradient(180deg, #0b1736 0%, #102a63 55%, #1a3a86 100%); padding: clamp(88px, 10vw, 132px) 0 32px; color: rgba(255,255,255,.7); }
.footer__curve { position: absolute; left: -1px; right: -1px; top: -1px; width: calc(100% + 2px); height: clamp(60px, 8vw, 120px); z-index: 1; display: block; pointer-events: none; }
.footer .logo--dark, .footer .logo--dark .logo__word { color: #fff; }
.footer__card { position: relative; }
.footer__glow { display: none; }
.footer__top { position: relative; display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.footer__brand { max-width: 300px; }
.footer__brand p { color: rgba(255,255,255,.66); margin-top: 12px; font-size: 14px; }
.footer__social { display: flex; gap: 10px; margin-top: 20px; }
.footer__social a {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: rgba(255,255,255,.82);
  transition: color .2s, border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.footer__social a svg { width: 19px; height: 19px; display: block; }
.footer__social a:hover { color: #fff; background: var(--violet-500); border-color: var(--violet-500); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(37,99,235,.4); }
.footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer__cols h3 { font-size: 14px; margin-bottom: 14px; color: #fff; }
.footer__cols a { display: block; color: rgba(255,255,255,.6); font-size: 14px; padding: 5px 0; transition: color .2s, transform .2s; }
.footer__cols a:hover { color: #fff; transform: translateX(2px); }
/* placeholder entries with no destination yet — swap the span back to an <a>
   once the page exists. Dimmer than links so they don't promise a click. */
.footer__cols .footer__soon { display: block; color: rgba(255,255,255,.38); font-size: 14px; padding: 5px 0; cursor: default; }
.footer__contact address { font-style: normal; color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.7; margin-bottom: 10px; }
.footer__contact address strong { display: block; color: rgba(255,255,255,.86); font-weight: 600; }
.footer__bottom { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.55); font-size: 13px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ================= Forms + get-started dialog =================
   The split-screen /login page was removed; its CTAs now open the dialog below.
   .form / .field / .btn-primary are that page's form primitives, kept verbatim
   because the dialog reuses them — everything else (split, panel, auth, password
   toggle, forgot/signup links) went with the page. */
.form { margin-top: 26px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
/* first + last name share a row now that the box is wide enough for both */
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .req { color: #dc2626; margin-left: 3px; }
.field input, .field textarea { width: 100%; height: 46px; padding: 0 14px; font-size: 15px; font-family: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.field textarea { height: auto; min-height: 92px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #9ca3af; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--violet-400); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.field input[aria-invalid="true"] { border-color: #dc2626; }
.field__err { margin-top: 6px; font-size: 13px; font-weight: 500; color: #dc2626; }

/* consent — the label is the real click target, so it carries the padding that
   gets this over the 44px minimum rather than the 18px box alone */
/* The consent row sat 22px below the email field but 0 above the button, so the
   button crowded the text. Gaps are now even on both sides: 24px each, matching
   the 18px rhythm between fields without the button feeling attached to it. */
.field--check { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 0; }
/* 5px centres the box on the label's first line (4px pad + half of 19.5px line) */
.field--check input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 5px 0 0; accent-color: var(--violet-500); cursor: pointer; }
.field--check input[type="checkbox"]:focus-visible { outline: 2px solid var(--violet-400); outline-offset: 2px; }
.field--check label { margin: 0; padding: 4px 0; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--muted); cursor: pointer; }
.field--check a { color: var(--violet-500); font-weight: 600; text-decoration: underline; }
.field--check a:hover { color: var(--violet-400); }
/* phone: the paired name fields go back to stacking */
@media (max-width: 520px) { .form__row { grid-template-columns: 1fr; gap: 0; } }

/* honeypot: off-screen, never display:none — see the note in index.html */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.btn-primary { width: 100%; height: 48px; font-size: 15px; font-weight: 700; font-family: inherit; color: #fff; background: var(--violet-500); border: 0; border-radius: 10px; cursor: pointer; transition: background .15s, transform .1s, box-shadow .2s; box-shadow: 0 6px 20px rgba(37,99,235,.28); }
/* scoped to .form so the success panel's own 22px offset is untouched */
.form .btn-primary { margin-top: 20px; }
.btn-primary:hover { background: var(--violet-400); box-shadow: 0 8px 26px rgba(37,99,235,.38); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }

/* ---------- Get-started dialog ---------- */
/* z-index 100 clears the sticky header (50) */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(10,15,29,.6); }
.modal__box {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px; box-shadow: var(--shadow-lg);
  animation: modalIn .22s cubic-bezier(.2,.7,.2,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal__box { animation: none; } }
.modal__x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 10px; cursor: pointer; color: var(--muted); font-size: 15px; font-family: inherit; transition: background .2s, color .2s; }
.modal__x:hover { background: var(--soft); color: var(--ink); }
.modal__x svg { width: 17px; height: 17px; display: block; }
.modal__x:focus-visible, .btn-primary:focus-visible { outline: 2px solid var(--violet-400); outline-offset: 2px; }
.modal__title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; padding-right: 44px; }
.modal__sub { color: var(--muted); margin-top: 8px; font-size: 15px; }
.modal__note { margin-top: 14px; font-size: 12.5px; color: var(--muted); text-align: center; }
.modal__done { text-align: center; padding: 10px 0 2px; }
.modal__tick { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.modal__tick svg { width: 24px; height: 24px; }
.modal__done h3 { font-size: 20px; font-weight: 800; color: var(--ink); }
.modal__done p { color: var(--muted); margin-top: 8px; font-size: 15px; }
.modal__done .btn-primary { margin-top: 22px; }
.modal__done:not([hidden]) .modal__tick { animation: tick-pop .55s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes tick-pop {
  0% { transform: scale(.3); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
/* confetti burst on the success screen — it lives on the .modal overlay (not in
   the box) so pieces fly past the dialog edges; movement is a small rAF physics
   loop in script.js, the stylesheet only pins the layers */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.confetti i { position: absolute; border-radius: 2px; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .modal__done:not([hidden]) .modal__tick { animation: none; }
  .confetti { display: none; }
}
body.modal-open { overflow: hidden; }

/* Generic grid utilities (used by Pricing). These must stay ABOVE the responsive
   block: media queries add no specificity, so declaring them after would override
   the mobile 1-column rules below. */
.grid { display: grid; gap: 18px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .pillars__grid { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell--lg { grid-row: auto; grid-column: span 2; }
  .quotes { grid-template-columns: 1fr; }
  .prod__frame { grid-template-columns: 1fr; }
  .prod__viz { min-height: 250px; }
  .mock__cards { grid-template-columns: 1fr; }
  .mock__row { grid-template-columns: repeat(2, 1fr); }
  .mock__body { grid-template-columns: 1fr; } .mock__side { display: none; }
  /* four board columns cannot hold a readable card below this width */
  .mock__cols--4 { grid-template-columns: repeat(2, 1fr); }
  .mock__timerbar { grid-template-columns: 1fr auto; }
  .mock__select { display: none; }
  /* vault + ledger stack; the flow no longer needs to chase the ledger's height */
  .sec-grid { grid-template-columns: 1fr; }
  .sec-flow { margin-top: 6px; }
}
@media (max-width: 820px) {
  .header__nav { display: none; }
  .header__right .btn, .header__sep { display: none; }
  .burger { display: flex; }
  .header__inner { display: flex; justify-content: space-between; }
  .header__nav.open { display: flex; flex-direction: column; gap: 4px; position: absolute; top: 72px; left: 0; right: 0; margin: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 14px 20px; box-shadow: var(--shadow-md); }
  .header__nav.open a { padding: 12px 14px; }
  .pillars__grid, .bento, .grid--3 { grid-template-columns: 1fr; }
  .intg { grid-template-columns: 1fr; }
  .sec-vault { padding: 28px 24px 24px; }
  .sec-fact { padding: 18px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .stat:nth-child(odd)::after { display: none; }
  .bento__cell--lg { grid-column: auto; }
  /* the island scene carries a lot of small labels — below 820 let it hold a legible
     size and pan inside its own box, rather than shrinking the text into noise.
     The svg drops back into flow here: absolute + slice would just shrink it. */
  .isle-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; aspect-ratio: auto; }
  .isle-stage svg { position: static; width: auto; height: auto; min-width: 820px; }
  /* the accent row is icon | text | CTA side-by-side — below 820 it has to stack,
     otherwise the text column collapses and the CTA pushes the page sideways */
  .bento__cell--accent { flex-direction: column; align-items: flex-start; gap: 16px; }
  .bento__accent-cta { margin-left: 0; }
  .footer__top { flex-direction: column; gap: 32px; }
  .footer { padding: clamp(70px, 16vw, 96px) 0 28px; }
  .section--alt { margin: 0; border-radius: 0; }
  .pillars .section__title { white-space: normal; }
  .modal__box { padding: 26px 22px; }
  /* phone: the mock keeps its shape but sheds the tightest columns */
  .mock__main { padding: 15px; }
  .mock__row { gap: 8px; }
  .mock__kpi { padding: 10px; }
  .mock__kpi b { font-size: 17px; }
  .mock__cols, .mock__cols--4 { grid-template-columns: 1fr 1fr; }
  .mock__row--3 { grid-template-columns: 1fr 1fr; }
  .prog li span { width: 72px; flex: 0 0 72px; }
  .mock__summary { flex-direction: column; align-items: flex-start; gap: 14px; }
  .mock__sumrow { width: 100%; }
  .mock__tabs { gap: 12px; overflow-x: auto; }
  .notif em { display: none; }
}
/* =========================================================
   DARK MODE
   The hero band, footer, stats and CTA are already dark/branded
   surfaces, so they carry over as-is. Here we flip the page +
   the light card surfaces, and re-tint the soft accents.
   ========================================================= */
/* Smooth crossfade when toggling light <-> dark.
   The .theme-anim class is added to <html> only for the duration of a
   user toggle, so it never fires on load and never fights hover states. */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color .5s ease, border-color .5s ease,
              color .45s ease, fill .5s ease, box-shadow .5s ease !important;
  transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim, html.theme-anim *,
  html.theme-anim *::before, html.theme-anim *::after { transition: none !important; }
}

[data-theme="dark"] {
  --ink: #eef2fb;
  --text: #c4ccdd;
  --muted: #8b93a8;
  --line: #232d44;
  --line-strong: #34405e;
  --page: #0a0f1d;
  --soft: #111a2c;
  --surface: #141d31;          /* elevated cards (replaces hardcoded #fff) */
  --violet-50: rgba(96,165,250,.12);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 12px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 30px 70px rgba(0,0,0,.6);
}

/* curved section edges that fill into the page (hero + footer) */
[data-theme="dark"] .hero__curve path,
[data-theme="dark"] .footer__curve path { fill: var(--page); }

/* header */
[data-theme="dark"] .header.scrolled { background: rgba(10,15,29,.85); border-color: var(--line); box-shadow: 0 1px 24px rgba(0,0,0,.5); }
[data-theme="dark"] .header__nav.open { background: #0d1424; border-color: var(--line); }
[data-theme="dark"] .lang,
[data-theme="dark"] .theme { background: var(--surface); }

/* buttons */
[data-theme="dark"] .btn--ghost { background: var(--surface); color: var(--ink); }
[data-theme="dark"] .btn--ghost:hover { border-color: var(--violet-400); color: var(--violet-300); }
/* the hero band is dark in both themes — keep its ghost button glass, not solid */
[data-theme="dark"] .hero .btn--ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; box-shadow: none; }
[data-theme="dark"] .hero .btn--ghost:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.55); color: #fff; }

/* chips, eyebrows & icon tiles */
[data-theme="dark"] .chip { color: #93c5fd; border-color: rgba(96,165,250,.24); }
/* status chips: must follow the rule above — equal specificity, source order decides */
[data-theme="dark"] .chip--on { color: #6ee7a8; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.28); }
[data-theme="dark"] .chip--soon { color: var(--muted); background: var(--soft); border-color: var(--line); }
[data-theme="dark"] .bento__icon,
[data-theme="dark"] .pcard__ic { color: #93c5fd; border-color: rgba(96,165,250,.22); }

/* sections */
[data-theme="dark"] .section--alt { background: linear-gradient(180deg, #0c1326, #0a1020); border-top-color: var(--line); border-bottom-color: var(--line); }

/* bento + pillar cards */
[data-theme="dark"] .bento__cell,
[data-theme="dark"] .pcard,
[data-theme="dark"] .toggle,
[data-theme="dark"] .pricing .plan,
[data-theme="dark"] .faq details,
[data-theme="dark"] .quote { background: var(--surface); }
/* security ledger: same elevated surface as cards; the vault panel paints itself */
[data-theme="dark"] .sec-facts { background: var(--surface); }
[data-theme="dark"] .bento__cell--accent { background: linear-gradient(120deg, rgba(96,165,250,.14), var(--surface) 60%); border-color: var(--line-strong); }
/* keep the featured plan visibly highlighted on the dark background */
[data-theme="dark"] .pricing .plan--featured {
  border-color: rgba(129,140,248,.42);
  background: linear-gradient(180deg, rgba(99,102,241,.06), var(--surface) 60%);
  box-shadow: 0 18px 46px rgba(79,70,229,.20);
}
[data-theme="dark"] .bento__cell--accent .bento__icon { background: rgba(96,165,250,.16); color: #93c5fd; }
/* problem tiles stay neutral in dark too */
[data-theme="dark"] .bento__icon--mute { color: var(--muted); background: var(--soft); border-color: var(--line); }

/* gamification progress bar — the track needs to read as a well on dark */
[data-theme="dark"] .gbar__track { background: rgba(0,0,0,.32); border-color: var(--line); }


/* bento mini-viz accents */
[data-theme="dark"] .pipe--hot,
[data-theme="dark"] .btag--on,
[data-theme="dark"] .vrow.on { border-color: rgba(96,165,250,.3); }
[data-theme="dark"] .pipe--hot b,
[data-theme="dark"] .btag--on,
[data-theme="dark"] .bav--n,
[data-theme="dark"] .deal b { color: #93c5fd; }
[data-theme="dark"] .bav { border-color: var(--surface); }

/* product mockup — turns dark to match the page */
[data-theme="dark"] .mock__win { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .mock__bar { background: var(--soft); }
[data-theme="dark"] .mock__bar em { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .mock__kpi,
[data-theme="dark"] .kb-card,
[data-theme="dark"] .notif li,
[data-theme="dark"] .lv li,
[data-theme="dark"] .tlog li,
[data-theme="dark"] .chat__chips span,
[data-theme="dark"] .chat__bar,
[data-theme="dark"] .mock__select,
[data-theme="dark"] .mock__input,
[data-theme="dark"] .deal,
[data-theme="dark"] .deal--win { background: rgba(96,165,250,.14); }
/* the ring's inner disc has to match the panel it sits on, not stay white */
[data-theme="dark"] .ring::after { background: var(--surface); }
[data-theme="dark"] .mock__sumrow div { background: rgba(96,165,250,.1); }

/* product rail: the panel is the raised surface, the mock inside it sits back */
/* the product panel draws its own gradient, so it needs no dark repaint — only
   the mocks floating on it, which follow the elevated surface colour */
[data-theme="dark"] .prod__mock .vcard { background: var(--surface); }
[data-theme="dark"] .vcard__bar { background: rgba(255,255,255,.04); }
[data-theme="dark"] .vcard__bar i { background: rgba(255,255,255,.16); }
[data-theme="dark"] .prod__item.is-active { background: var(--surface); }
[data-theme="dark"] .prod__item.is-active .prod__label { color: var(--violet-300); }

/* login page (shares the theme via localStorage) */
[data-theme="dark"] .modal__box { background: var(--surface); }
[data-theme="dark"] .modal__x:hover { background: rgba(255,255,255,.07); }
[data-theme="dark"] .modal__tick { background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.4); }
[data-theme="dark"] .field :is(input, textarea) { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
[data-theme="dark"] .field input::placeholder { color: var(--muted); }

/* ---------- Cookie banner ----------
   Blocks with a blur, not a blackout: the page stays recognizable behind the
   scrim so the banner reads as a pause, not a wall. Sits below the get-started
   modal (z 100) so a deep-linked dialog still wins. */
.cookiebar { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; }
/* .cookiebar's display:grid outranks the UA's [hidden]{display:none} — without
   this rule the banner never visually closes and the buttons look broken */
.cookiebar[hidden] { display: none; }
.cookiebar__scrim {
  position: absolute; inset: 0; background: rgba(13,15,23,.28);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.cookiebar__box {
  position: relative; width: 100%; max-width: 480px; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 28px 26px; box-shadow: var(--shadow-lg);
  animation: modalIn .22s cubic-bezier(.2,.7,.2,1);
}
/* the colour lives in the cookie itself — the card stays quiet around it */
.cookiebar__ic { display: block; width: 46px; height: 46px; margin: 0 auto 12px; }
.cookiebar__ic svg { width: 100%; height: 100%; display: block; }
.cookiebar__box h2 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); margin-bottom: 8px; }
.cookiebar__box p { font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 0 auto 20px; max-width: 44ch; }
.cookiebar__box p a { color: var(--violet-500); font-weight: 600; }
.cookiebar__box p a:hover { text-decoration: underline; }
.cookiebar__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
body.cookie-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .cookiebar__box { animation: none; } }
@media (max-width: 520px) { .cookiebar { padding: 14px; } .cookiebar__actions .btn { flex: 1 1 100%; } }
[data-theme="dark"] .cookiebar__box { background: var(--surface); }

/* ---------- Legal pages (impressum / datenschutz / agb / cookies) ----------
   Long-form German legal prose. One narrow measure (~72ch), generous leading,
   hairline separators between numbered sections. These pages load styles.css
   but not script.js, so the header carries .scrolled statically and the theme
   comes from the same pre-paint snippet index.html uses. */
.legal-main { padding: 46px 0 84px; }
.legal { max-width: 780px; margin: 0 auto; }
.legal .chip { margin-bottom: 18px; }
.legal h1 { font-size: clamp(30px, 4.6vw, 44px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); margin-bottom: 8px; }
.legal__meta { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.legal h2 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 38px 0 12px; padding-top: 26px; border-top: 1px solid var(--line); }
.legal h3 { font-size: 16.5px; font-weight: 700; color: var(--ink); margin: 22px 0 8px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.75; color: var(--text); }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--violet-500); font-weight: 600; }
.legal a:hover { text-decoration: underline; }
.legal__card {
  display: block; background: var(--soft); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; margin: 0 0 14px; font-style: normal;
  font-size: 15.5px; line-height: 1.75; color: var(--text);
}
.legal__card strong { color: var(--ink); }
[data-theme="dark"] .legal__card { background: var(--surface); }
.legal-footer { border-top: 1px solid var(--line); padding: 26px 0 34px; margin-top: 30px; }
.legal-footer .container { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--muted); }
.legal-footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.legal-footer a { color: var(--muted); }
.legal-footer a:hover { color: var(--violet-500); }
.legal-footer a[aria-current="page"] { color: var(--violet-500); font-weight: 600; }