/* Inverted — studio site.
   Built on the Inverted OS tokens: black canvas, hairline rules, one accent.
   Restraint is the point: flat surfaces, no glow, type doing the work. */

:root {
  --bg: #0F0F0E;
  --surface: #151516;
  --raised: #1C1C1E;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --fg: #FFFFFF;
  --fg-2: #AFAFB6;
  --fg-3: #7C7C85;
  --accent: #007AFF;
  --accent-2: #3395FF;
  --radius: 12px;
  --gutter: clamp(20px, 5vw, 60px);
  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
/* No CSS smooth scrolling: Lenis drives the scroll and the two fight each other. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.008em;
  font-feature-settings: "ss01", "cv05";
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, dt, figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Header ─────────────────────────────────────────────────────────────── */

/* A floating bar in tinted glass, the same width as the page's content. */
/* A floating bar in tinted glass: nav to the left, the mark centred, the action right. */
.header { position: sticky; top: 0; z-index: 40; padding: 16px 0 0; background: transparent; }
.header-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 72px; padding: 0 12px;
}

.brand { grid-area: 1 / 1; justify-self: start; display: flex; align-items: center; padding-left: 16px; }
.brand img { height: 28px; width: auto; }
.header-nav { grid-area: 1 / 2; justify-self: center; display: flex; align-items: center; gap: 28px; }
.header-nav a { font-size: 15px; color: var(--fg-2); transition: color 0.2s var(--ease); }
.header-nav a:hover { color: var(--fg); }
.header-bar .btn { grid-area: 1 / 3; justify-self: end; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--accent); color: #FFFFFF; font-size: 15px; font-weight: 500; letter-spacing: -0.006em;
  transition: background 0.2s var(--ease);
}
.btn:hover { background: var(--accent-2); }
.btn.sm { height: 38px; padding: 0 18px; font-size: 14px; }
.btn.lg { height: 50px; padding: 0 26px; font-size: 16px; }

.link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--fg-2); transition: color 0.2s var(--ease); }
.link:hover { color: var(--fg); }
.link svg { transition: transform 0.25s var(--ease); }
.link:hover svg { transform: translateX(3px); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero { position: relative; }
.hero::before {
  content: ""; position: absolute; inset: -140px 0 auto 0; height: 420px; pointer-events: none;
  background: radial-gradient(80% 100% at 50% 0%, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0) 72%);
}
.hero > * { position: relative; }

.hero-in {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 64px); align-items: end;
  padding: clamp(52px, 7.5vw, 104px) 0 clamp(34px, 4vw, 54px);
}
.hero h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.06; font-weight: 500; letter-spacing: -0.032em; text-wrap: balance; }
.hero-side { display: flex; flex-direction: column; gap: 26px; padding-bottom: 6px; }
.hero-lede { font-size: 17px; line-height: 1.62; color: var(--fg-2); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

/* The frame dissolves into the page rather than stopping at a hard edge. */
.hero-frame { padding-bottom: clamp(30px, 4vw, 54px); }
.hero-frame .frame { -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0.35) 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0.35) 88%, transparent 100%); }

/* ── Frames ─────────────────────────────────────────────────────────────── */

.frame { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.frame-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-bottom: 1px solid var(--line); }
.frame-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.13); }
.frame-url { margin-left: 10px; font-size: 11px; color: var(--fg-3); letter-spacing: 0; }
.shot { display: block; width: 100%; border: 0; background: var(--raised); object-fit: cover; object-position: top center; }
.missing {
  display: flex; align-items: center; justify-content: center; padding: 28px 24px;
  min-height: 190px;
  color: var(--fg-3); font-size: 14px; text-align: center;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px), var(--raised);
}
.frame .missing { aspect-ratio: auto !important; }
.hero-frame .missing { min-height: 260px; }
.device .missing { min-height: 0; padding: 20px 16px; font-size: 13px; }

/* ── Sections ───────────────────────────────────────────────────────────── */

.sec { border-top: 1px solid var(--line); }
.sec-in { padding: clamp(56px, 7vw, 96px) 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-bottom: clamp(30px, 3.6vw, 46px); }
.sec-title { font-size: clamp(26px, 2.9vw, 36px); line-height: 1.14; font-weight: 500; letter-spacing: -0.028em; }
.sec-note { font-size: 16px; line-height: 1.6; color: var(--fg-3); max-width: 50ch; padding-top: 6px; }

/* ── Cards ──────────────────────────────────────────────────────────────
   Lovable's three-up: a tinted media well with a fragment of UI floating in it,
   then the words underneath. Same structure, our black. */

.sec-head--stack { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sec-head--stack .sec-note { max-width: 58ch; padding-top: 0; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }

.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.card:hover { border-color: var(--line-strong); background: var(--raised); }

/* The wash is the only colour in the section, and it stays under the UI, never on it. */
.card-media {
  position: relative; height: clamp(180px, 17vw, 232px); padding: 26px 26px 0; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  background:
    radial-gradient(120% 86% at 50% 0%, rgba(0, 122, 255, 0.16) 0%, rgba(0, 122, 255, 0.05) 42%, rgba(0, 122, 255, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 60%);
}
.card-text { display: flex; flex-direction: column; gap: 9px; padding: 24px 26px 28px; }
.card-text h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.022em; }
.card-text p { font-size: 15px; line-height: 1.62; color: var(--fg-3); }

.mk-site { position: relative; background: var(--raised); border: 1px solid var(--line); border-bottom: 0; }
.mk-site .mk-bar { position: relative; }
.mk-url { position: absolute; left: 50%; transform: translateX(-50%); width: 96px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); }
.mk-page { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px 26px; }
.mk-cta { width: 78px; height: 22px; border-radius: 999px; background: var(--accent); margin-top: 6px; }
.mk-edit {
  position: absolute; right: 12px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--fg);
  background: rgba(20, 20, 24, 0.92); border: 1px solid var(--line-strong);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 1);
}
.mk-pen { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }

/* Bolt-on: the site you already have, wired to a panel you control. */
.mk-bolt { display: flex; flex-direction: column; align-items: center; gap: 0; }
.mk-existing { display: grid; place-items: center; width: 100%; padding: 13px; border-radius: 10px; background: rgba(255, 255, 255, 0.045); border: 1px dashed rgba(255, 255, 255, 0.2); }
.mk-existing span { font-size: 11px; letter-spacing: 0.02em; color: var(--fg-3); }
.mk-plug { display: grid; place-items: center; height: 24px; }
.mk-plug span { width: 1px; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), var(--accent)); }
.mk-panel { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 18px; border-radius: 12px 12px 0 0; background: var(--raised); border: 1px solid var(--line); border-bottom: 0; }
.mk-panel-top { display: flex; align-items: center; justify-content: space-between; }
.mk-live { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.18); }

/* iOS: a phone, cropped by the bottom of the well like the others. */
.mk-ios { display: grid; place-items: end center; }
.mk-phone { position: relative; display: flex; flex-direction: column; gap: 11px; width: 152px; padding: 22px 15px 16px; border-radius: 22px 22px 0 0; background: var(--raised); border: 1px solid var(--line); border-bottom: 0; }
.mk-notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 44px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.mk-row { display: flex; gap: 8px; }
.mk-row i { flex: 1; height: 30px; border-radius: 7px; background: rgba(255, 255, 255, 0.06); }
.mk-tabbar { display: flex; justify-content: space-around; align-items: center; margin-top: 6px; padding-top: 11px; border-top: 1px solid var(--line); }
.mk-tabbar i { width: 16px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.mk-tabbar i.on { background: var(--accent); }

/* ── Card mocks ─────────────────────────────────────────────────────────
   Suggestions of software, not screenshots: hairlines and skeleton bars only. */

.mk { width: 100%; max-width: 288px; border-radius: 12px 12px 0 0; }
.mk b { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.mk b.mk-faint { background: rgba(255, 255, 255, 0.07); }

.mk-app { background: var(--raised); border: 1px solid var(--line); border-bottom: 0; }
.mk-bar { display: flex; align-items: center; gap: 5px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.mk-bar i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.mk-body { display: grid; grid-template-columns: 54px minmax(0, 1fr); min-height: 132px; }
.mk-rail { display: flex; flex-direction: column; gap: 9px; padding: 14px 10px; border-right: 1px solid var(--line); }
.mk-rail u { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.mk-rail u:first-child { background: rgba(0, 122, 255, 0.55); }
.mk-main { display: flex; flex-direction: column; gap: 11px; padding: 14px 14px 0; }
.mk-pill { width: 62px; height: 20px; border-radius: 999px; background: var(--accent); margin-top: 3px; }

.mk-flow { display: flex; flex-direction: column; align-items: center; gap: 0; }
.mk-chip { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line-strong); }
.mk-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.18); }
.mk-wire { width: 1px; height: 26px; background: linear-gradient(180deg, var(--line-strong), rgba(0, 122, 255, 0.6)); }
.mk-out { width: 100%; display: flex; flex-direction: column; gap: 11px; padding: 16px 16px 18px; border-radius: 12px 12px 0 0; background: var(--raised); border: 1px solid var(--line); border-bottom: 0; }

.mk-design { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 20px; background: var(--raised); border: 1px solid var(--line); border-bottom: 0; }
.mk-sel { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 13px; border: 1px solid var(--accent); border-radius: 6px; }
.mk-sel b { height: 11px; background: rgba(255, 255, 255, 0.3); }
.mk-tag { position: absolute; top: -10px; right: -8px; padding: 2px 7px; border-radius: 5px; background: var(--accent); color: #fff; font-size: 10px; line-height: 1.5; font-weight: 500; letter-spacing: 0.01em; }

/* ── Split: accordion + stage ───────────────────────────────────────────
   Lovable's "For building and beyond": a list on the left that steps itself,
   one large panel on the right that changes with it. */

.split { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: clamp(30px, 5vw, 76px); align-items: center; }
.split-side { display: flex; flex-direction: column; align-items: flex-start; }
.vertical-logo { height: clamp(30px, 2.8vw, 38px); width: auto; margin-bottom: 18px; }
.split-note { font-size: 16px; line-height: 1.62; color: var(--fg-3); max-width: 44ch; margin-bottom: clamp(24px, 3vw, 38px); }

.acc { width: 100%; }
.acc-row {
  display: block; width: 100%; padding: 0; text-align: left; cursor: pointer;
  background: none; border: 0; color: inherit; font: inherit;
  -webkit-appearance: none; appearance: none;
}
.acc-head { display: flex; flex-direction: column; gap: 3px; padding: 20px 0 0; }
.acc-title { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: var(--fg-3); transition: color 0.3s var(--ease); }
.acc-row.is-on .acc-title, .acc-row:hover .acc-title { color: var(--fg); }
.acc-lede { font-size: 14px; color: var(--fg-3); opacity: 0; height: 0; overflow: hidden; transition: opacity 0.3s var(--ease); }
.acc-row.is-on .acc-lede { opacity: 1; height: auto; }

/* The body opens by animating its own height via a grid row, so nothing is hard-coded. */
.acc-drop { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s var(--ease); }
.acc-row.is-on .acc-drop { grid-template-rows: 1fr; }
.acc-inner { overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.acc-blurb { display: block; font-size: 15px; line-height: 1.62; color: var(--fg-2); max-width: 46ch; padding-top: 10px; }
.acc-points { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.acc-points span { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.55; color: var(--fg-3); }
.acc-points span::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 999px; background: var(--accent); }

.acc-rule { display: block; height: 1px; margin-top: 20px; background: var(--line); overflow: hidden; }
.acc-rule i { display: block; height: 100%; width: 0; background: var(--accent); }
@keyframes acc-fill { from { width: 0; } to { width: 100%; } }

.split-stage { position: relative; display: grid; place-items: center; min-height: clamp(320px, 42vw, 520px); border-radius: 24px; overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(0, 122, 255, 0.20) 0%, rgba(0, 122, 255, 0.05) 46%, rgba(0, 122, 255, 0) 74%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 55%),
    var(--surface);
  border: 1px solid var(--line);
  padding: clamp(26px, 3.4vw, 48px);
}
.stage-panel { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; opacity: 0; transform: translateY(14px) scale(0.985); pointer-events: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.stage-panel.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* ── Proof: case studies ────────────────────────────────────────────────
   One open, the rest shut to their logo beside it. Click a shut one to swap. */

.sec-head--center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 12px; }
.sec-head--center .sec-note { max-width: 46ch; padding-top: 0; }

.cases { display: flex; gap: clamp(10px, 1.2vw, 16px); align-items: stretch; }
.case { flex: 0 0 clamp(104px, 11vw, 152px); min-width: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden; transition: flex-basis 0.55s var(--ease), flex-grow 0.55s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); }
.case.is-on { flex: 1 1 auto; }
.case:not(.is-on):hover { background: var(--raised); border-color: var(--line-strong); }

.case-shut { display: grid; place-items: center; width: 100%; height: 100%; padding: 20px 12px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.case.is-on .case-shut { display: none; }
.case-shut img, .case-shut .case-wordmark { opacity: 0.62; transition: opacity 0.3s var(--ease); }
.case-shut:hover img, .case-shut:hover .case-wordmark { opacity: 0.9; }

.case-open { display: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 3.4vw, 52px); padding: clamp(26px, 3vw, 40px); }
.case.is-on .case-open { display: grid; }
.case-left { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.case-logo { width: auto; filter: brightness(0) invert(1); pointer-events: none; user-select: none; }
.case-wordmark { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; }
.case-blurb { font-size: 16px; line-height: 1.64; color: var(--fg-2); max-width: 52ch; }
.case-quote { display: flex; flex-direction: column; gap: 16px; padding-left: 18px; border-left: 2px solid var(--accent); }
.case-quote p { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.42; font-weight: 500; letter-spacing: -0.022em; max-width: 30ch; }
.case-quote cite { display: flex; flex-direction: column; gap: 1px; font-style: normal; }
.case-quote strong { font-size: 15px; font-weight: 500; }
.case-quote span { font-size: 14px; color: var(--fg-3); }
.case-tags { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); margin-top: auto; }
.case-right { display: flex; align-items: center; }
.case-stats { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); width: 100%; }
.case-stats dt { font-size: clamp(30px, 3.4vw, 46px); line-height: 1; font-weight: 500; letter-spacing: -0.035em; }
.case-stats dd { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg-3); max-width: 28ch; }
.case-shot { width: 100%; }

/* ── Numbers ────────────────────────────────────────────────────────────
   The curve sits behind the whole block and the figures run across it, so the
   numbers read as the headline rather than a column beside a graphic.
   The curve is a graphic, not a data plot. */

.numbers { position: relative; padding: clamp(30px, 4vw, 56px) 0 clamp(10px, 1.6vw, 20px); }
.numbers-chart { position: absolute; inset: auto 0 0 0; height: clamp(230px, 30vw, 400px); pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 100%);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 100%); }
.numbers-chart svg { display: block; width: 100%; height: 100%; }
.numbers-head { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; max-width: 46ch; }
.numbers-head .sec-note { padding-top: 0; }

.numbers-list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); margin: clamp(44px, 6vw, 92px) 0 0; }
.numbers-list > div { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.numbers-list dt {
  font-size: clamp(44px, 6vw, 86px); line-height: 0.92; font-weight: 500; letter-spacing: -0.05em;
  background: linear-gradient(168deg, #FFFFFF 26%, #8FC4FF 72%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.numbers-list dt.is-word { font-size: clamp(30px, 3.2vw, 50px); line-height: 1.02; letter-spacing: -0.035em; }
.numbers-list dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-3); }

/* ── Liquid glass ──────────────────────────────────────────────────────────
   Three layers. The element itself is transparent and carries the border and
   shadow; ::after holds the frosted, refracted backdrop; ::before holds the tint
   and inner sheen. The SVG filter sits on the pseudo-element, never the element,
   so what is behind the glass warps while the content on top stays sharp.

   Variants set how hard it bends: .lg--pill, .lg--card, .lg--bar.
   Firefox and iOS web views will not stack filter: url() on backdrop-filter, so
   they get plain frosted glass. That is the expected fallback, not a bug — and the
   refraction only reads over busy, high-contrast backgrounds anyway. */
.liquid-glass {
  --lg-radius: 24px;
  --lg-blur: 6px;
  --lg-tint: 255, 255, 255;
  --lg-tint-opacity: 0.06;
  --lg-rim: 0.45;
  --lg-filter: url(#lg-card);

  position: relative;
  isolation: isolate;
  background: transparent;
  border-radius: var(--lg-radius);
  border: 1px solid rgba(255, 255, 255, var(--lg-rim));
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.liquid-glass::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  backdrop-filter: blur(var(--lg-blur));
  -webkit-backdrop-filter: blur(var(--lg-blur));
  filter: var(--lg-filter);
  -webkit-filter: var(--lg-filter);
}
.liquid-glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(var(--lg-tint), var(--lg-tint-opacity));
  box-shadow: inset 0 0 20px -6px rgba(255, 255, 255, 0.7);
}
.lg--pill { --lg-filter: url(#lg-pill); }
.lg--card { --lg-filter: url(#lg-card); }
.lg--bar { --lg-filter: url(#lg-bar); }

/* Without backdrop-filter there is nothing to frost, so the tint carries it alone. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass::before { background: rgba(10, 10, 12, 0.86); }
}

/* The bar's own glass: dark smoke rather than a white film, no refraction, and thin
   enough to read what passes under it. Settings live after the component so they win
   the cascade — both are single-class selectors. */
.header .header-bar {
  --lg-radius: 999px;
  --lg-blur: 22px;
  --lg-rim: 0.14;
  --lg-filter: none;
  /* Dark smoked glass. */
  --lg-tint: 14, 14, 18;
  --lg-tint-opacity: 0.66;
  box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 1);
  border-color: rgba(255, 255, 255, 0.13);
}
/* Real-glass vibrancy: strong blur plus a saturation boost, dimmed so the bar stays
   dark — whatever passes under it blooms through without lifting the tone. */
.header .header-bar::after {
  backdrop-filter: blur(22px) saturate(150%) brightness(0.8);
  -webkit-backdrop-filter: blur(22px) saturate(150%) brightness(0.8);
}
/* Specular sheen: a soft top edge and faint interior glow, kept subtle so it reads dark. */
.header .header-bar::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 46%),
    rgba(var(--lg-tint), var(--lg-tint-opacity));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 24px -10px rgba(255, 255, 255, 0.14);
}

/* ── Logo carousel ────────────────────────────────────────────────────────
   Real builds, moving slowly. Logos sit at partial opacity so they support the
   headline rather than compete with it, and come up on hover. */
.marquee { margin-inline: calc(var(--gutter) * -1); margin-bottom: clamp(52px, 7vw, 96px); padding-top: 26px; border-top: 1px solid var(--line); }
.marquee-note { margin-bottom: 26px; font-size: 15px; line-height: 1.6; color: var(--fg-3); max-width: 62ch; }
.marquee-window {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.marquee-track { display: flex; align-items: center; gap: clamp(56px, 7vw, 104px); width: max-content; animation: marquee 20s linear infinite; }
/* Every logo rendered as a white silhouette, whatever colour the source file is —
   brightness(0) flattens it to black, invert(1) turns that white. */
.marquee-track img { width: auto; opacity: 0.6; filter: brightness(0) invert(1); pointer-events: none; user-select: none; -webkit-user-drag: none; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
}

/* ── Hero mock ──────────────────────────────────────────────────────────
   Drawn rather than screenshotted, so the frame is never an empty box. */

.mock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); grid-template-rows: auto 1fr auto; gap: clamp(18px, 2.4vw, 30px); padding: clamp(20px, 2.6vw, 34px); }
.bar { display: block; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.bar.dim { background: rgba(255, 255, 255, 0.07); }
.mock-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mock-nav { display: flex; align-items: center; gap: 14px; }
.mock-pill { width: 54px; height: 20px; border-radius: 999px; background: var(--accent); }
.mock-lines { display: flex; flex-direction: column; gap: 12px; }
.mock-tiles { grid-column: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mock-tile { height: clamp(44px, 5vw, 66px); border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.mock-panel { grid-column: 2; grid-row: 2 / 4; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); }
.mock-panel-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--fg-3); }
.mock-live { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: rgba(0, 122, 255, 0.16); color: var(--accent-2); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.mock-panel-row { padding: 9px 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.45; color: var(--fg-3); }

/* ── Proof container ────────────────────────────────────────────────────*/

.proof { position: relative; }

/* ── Studio ─────────────────────────────────────────────────────────────*/

.who { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.who-body { display: flex; flex-direction: column; gap: 20px; max-width: 60ch; }
.who-body p { font-size: 17px; line-height: 1.66; color: var(--fg-2); }
.quote { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding-left: 20px; border-left: 2px solid var(--accent); }
.quote p { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; font-weight: 500; letter-spacing: -0.022em; color: var(--fg); max-width: 34ch; }
.quote cite { font-style: normal; font-size: 14px; color: var(--fg-3); }

.who-side { display: flex; flex-direction: column; gap: 22px; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.who-name { display: flex; flex-direction: column; gap: 2px; }
.who-name strong { font-size: 16px; font-weight: 500; letter-spacing: -0.014em; }
.who-name span { font-size: 14px; color: var(--fg-3); }
.who-list { display: flex; flex-direction: column; gap: 0; margin: 0; }
.who-list > div { padding: 14px 0; border-top: 1px solid var(--line); }
.who-list dt { font-size: 15px; font-weight: 500; letter-spacing: -0.012em; }
.who-list dd { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg-3); }

/* ── Steps ──────────────────────────────────────────────────────────────*/

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 34px); }
.step { display: flex; flex-direction: column; gap: 10px; padding: 26px 0 0; border-top: 1px solid var(--line-strong); }
.step h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.step p { font-size: 15px; line-height: 1.62; color: var(--fg-2); }

/* ── Contact ────────────────────────────────────────────────────────────*/

.contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.contact-title { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.14; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 16px; }
.contact p { font-size: 17px; line-height: 1.66; color: var(--fg-2); max-width: 54ch; }
.contact-action { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.contact-mail { font-size: 15px; color: var(--fg-3); transition: color 0.2s var(--ease); }
.contact-mail:hover { color: var(--accent-2); }

/* ── Footer ─────────────────────────────────────────────────────────────*/

.footer { border-top: 1px solid var(--line); }
.footer-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 0 40px; font-size: 14px; color: var(--fg-3); }
.footer-mark { height: 15px; width: auto; opacity: 0.6; }

/* ── Reveals ────────────────────────────────────────────────────────────
   Content moves once, a little, and never stays hidden. */

.reveal, .sec-in, .hero-in, .hero-frame { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in, .sec-in.in, .hero-in.in, .hero-frame.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .sec-in, .hero-in, .hero-frame { opacity: 1; transform: none; transition: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────────*/

@media (max-width: 940px) {
  .hero-in, .sec-head, .who, .contact, .numbers { grid-template-columns: minmax(0, 1fr); }
  .hero-in { align-items: start; gap: 24px; }
  .sec-head { align-items: start; gap: 14px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .case-open { grid-template-columns: minmax(0, 1fr); }
  .split-stage { min-height: 300px; }
  .split .device { margin: 0 auto; }
  .cases { flex-direction: column; }
  .numbers-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case { flex: 0 0 auto; }
  .case-shut { padding: 26px 16px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock { grid-template-columns: minmax(0, 1fr); }
  .mock-panel { grid-column: 1; grid-row: auto; }
  .header-nav { display: none; }
}

@media (max-width: 680px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: clamp(32px, 8.6vw, 40px); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .step { padding: 22px 0 24px; }
  .numbers-list { grid-template-columns: minmax(0, 1fr); }
  .contact-action { align-items: stretch; }
  .contact-action .btn { width: 100%; }
  .footer-in { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Shorter header on small screens */
@media (max-width: 640px) {
  .header { padding: 8px 0 0; }
  .header-bar { height: 54px; padding: 0 8px; }
  .brand { padding-left: 12px; }
  .brand img { height: 21px; }
  .header-bar .btn.sm { height: 34px; padding: 0 14px; font-size: 13px; }
}

/* ── Browser-surface polish: theme the parts the browser draws by default ── */
::selection { background: rgba(0, 122, 255, 0.30); color: #fff; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px;
}
input, textarea, select { caret-color: var(--accent-2); }
html { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }
::-webkit-scrollbar-track { background: transparent; }

/* WCAG-AA: darken the filled button blue so the white label clears 4.5:1 */
.btn { background: #0061db; }
.btn:hover { background: #0056c6; }

/* ── Zoah-style hero + morphing header ─────────────────────────────────────
   The header is a bare full-width row at the top of the page (logo left, nav
   centred, action right) sitting over a progressive-blur scrim; once the page
   scrolls it contracts and frosts into the floating liquid-glass pill. */

.header-scrim { position: absolute; left: 0; right: 0; top: 0; height: 122px; z-index: -1; pointer-events: none; transition: opacity 0.4s var(--ease); }
.header-scrim__blur { position: absolute; inset: 0; }
.header-scrim__blur--1 { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(#000 0%, #000 45%, transparent 80%); mask-image: linear-gradient(#000 0%, #000 45%, transparent 80%); }
.header-scrim__blur--2 { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(#000 0%, #000 30%, transparent 62%); mask-image: linear-gradient(#000 0%, #000 30%, transparent 62%); }
.header-scrim__blur--3 { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(#000 0%, #000 18%, transparent 46%); mask-image: linear-gradient(#000 0%, #000 18%, transparent 46%); }
.header-scrim__tint { position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, transparent 100%); }
/* The scrim stays behind the glass pill once scrolled, so content blurs as it passes under the header. */

/* Top of page: full-width bar like Zoah — logo hard left, action hard right,
   modest edge gutters. On scroll it contracts into the centred pill. */
.header-wrap { max-width: 1520px; transition: max-width 0.5s var(--ease), padding 0.5s var(--ease); }
.header:not(.is-scrolled) .header-wrap { padding-left: clamp(22px, 3.2vw, 46px); padding-right: clamp(22px, 3.2vw, 46px); }
.header.is-scrolled .header-wrap { max-width: 940px; }
.header-bar { transition: height 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
/* The glass film is drawn by the pseudo-elements; fade it in only once scrolled. */
.header .header-bar::before, .header .header-bar::after { opacity: 0; transition: opacity 0.4s var(--ease); }
.header.is-scrolled .header-bar::before, .header.is-scrolled .header-bar::after { opacity: 1; }
.header:not(.is-scrolled) .header-bar { border-color: transparent; box-shadow: none; }
.header.is-scrolled .header-bar { height: 60px; }

/* Hero: centred column, the headline rotating through what we build. */
.hero-in--center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; padding: clamp(60px, 8vw, 132px) 0 clamp(40px, 5vw, 68px); }
.hero-in--center h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.04; letter-spacing: -0.038em; max-width: 18ch; margin: 0 auto; }
.hero-in--center .hero-lede { max-width: 58ch; margin: 0 auto; }
.hero-in--center .hero-actions { justify-content: center; }

.hero-rotator { text-wrap: balance; transition: min-height 0.3s; }
.hero-rotator__lead { display: inline-block; will-change: transform; }
.hero-rotator__ch { opacity: 1; transition: opacity 0.26s, color 0.6s; }
.hero-rotator__sp { white-space: pre-wrap; }
.hero-rotator__word.is-wiping .hero-rotator__ch { color: var(--accent); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero-rotator__word { transition: none; }
  .hero-rotator__lead { transition: none !important; transform: none !important; }
}

/* Interactive CTA (Zoah): the chevron draws its own tail into a full arrow on
   hover, and the button lifts on a soft accent ring. Blue stays. */
.btn.cta-arrow { gap: 8px; padding-left: 20px; padding-right: 17px; }
.btn.cta-arrow::after {
  content: ""; flex: 0 0 auto; width: 17px; height: 12px; transform: translateX(0);
  background: currentColor;
  -webkit-mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M3.6 1.2 L7.4 5 L3.6 8.8' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") right center / 12px 12px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'><path d='M1.2 5 L7.4 5' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round'/></svg>") left center / 0 12px no-repeat;
  mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M3.6 1.2 L7.4 5 L3.6 8.8' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") right center / 12px 12px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'><path d='M1.2 5 L7.4 5' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round'/></svg>") left center / 0 12px no-repeat;
  transition: -webkit-mask-size 0.24s var(--ease), mask-size 0.24s var(--ease), transform 0.24s var(--ease);
}
.btn.cta-arrow:hover::after { -webkit-mask-size: 12px 12px, 15px 12px; mask-size: 12px 12px, 15px 12px; transform: translateX(2px); }
/* A live glow that runs on its own — a soft blue halo that breathes behind the
   pill, contained tight to the button and lifting brighter on hover. */
.btn.cta-arrow { position: relative; transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease); animation: cta-glow 3.4s ease-in-out infinite; }
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 6px 20px -8px rgba(0, 122, 255, 0.42); }
  50% { box-shadow: 0 8px 27px -8px rgba(0, 122, 255, 0.62); }
}
.btn.cta-arrow:hover { transform: translateY(-1px); animation: none; box-shadow: 0 12px 40px -6px rgba(0, 122, 255, 0.9), 0 0 0 2px rgba(255, 255, 255, 0.85); }
.btn.cta-arrow:active { transform: translateY(0); box-shadow: 0 6px 20px -6px rgba(0, 122, 255, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6); }
@media (prefers-reduced-motion: reduce) {
  .btn.cta-arrow { animation: none; }
}

@media (max-width: 720px) {
  .hero-in--center { padding-top: clamp(52px, 15vw, 88px); gap: 20px; }
  .hero-in--center h1 { font-size: clamp(35px, 9.8vw, 52px); line-height: 1.04; letter-spacing: -0.04em; max-width: 100%; }
  .hero-in--center .hero-lede { font-size: 15.5px; line-height: 1.6; max-width: 40ch; }
  .hero-in--center .hero-actions { flex-direction: column; align-items: center; gap: 16px; width: 100%; margin-top: 8px; }
  .hero-in--center .hero-actions .btn { width: auto; }
  .header.is-scrolled .header-wrap { max-width: 100%; }
}

/* ── Landing page: centre every section, like the hero ─────────────────────
   Scoped to #top:not(.lbn) so the LBN page (same stylesheet) is untouched. */
#top:not(.lbn) .sec-head,
#top:not(.lbn) .sec-head--stack,
#top:not(.lbn) .sec-head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 14px; }
#top:not(.lbn) .sec-note { max-width: 60ch; margin-left: auto; margin-right: auto; padding-top: 0; }
#top:not(.lbn) .steps .step { text-align: center; align-items: center; }
#top:not(.lbn) .card-text { text-align: center; align-items: center; }
#top:not(.lbn) .card-text > * { margin-left: auto; margin-right: auto; }
#top:not(.lbn) .numbers-head { align-items: center; text-align: center; max-width: 60ch; margin-left: auto; margin-right: auto; }
#top:not(.lbn) .numbers-list > div { align-items: center; text-align: center; }

/* Studio + contact: stack and centre on the landing page too. */
#top:not(.lbn) .who { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: clamp(30px, 4vw, 48px); }
#top:not(.lbn) .who-body { align-items: center; max-width: 68ch; }
#top:not(.lbn) .quote { border-left: 0; padding-left: 0; align-items: center; text-align: center; margin-top: 4px; }
#top:not(.lbn) .quote p { max-width: 48ch; margin-left: auto; margin-right: auto; }
#top:not(.lbn) .who-side { width: 100%; max-width: 560px; text-align: center; }

#top:not(.lbn) .contact { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: clamp(22px, 3vw, 34px); }
#top:not(.lbn) .contact p { max-width: 60ch; margin-left: auto; margin-right: auto; }
#top:not(.lbn) .contact-action { align-items: center; }

/* ── Header nav links: white ───────────────────────────────────────────── */
.header-nav a { color: var(--fg); }
.header-nav a:hover { color: var(--fg); opacity: 0.66; }

/* ── Mobile menu: a dark-glass panel that fades down from the header ────── */
.header-wrap { position: relative; }
.header-actions { grid-area: 1 / 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; }
.mobile-nav { display: none; }

/* Dark glass for the dropdown, matching the bar. */
.header .mobile-nav.liquid-glass {
  --lg-radius: 27px; --lg-blur: 24px; --lg-rim: 0.16; --lg-filter: none;
  --lg-tint: 14, 14, 18; --lg-tint-opacity: 0.9;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.95);
}
/* One shared component: the open panel starts at the bar's own top edge and
   reserves the header row, so logo/action/close sit INSIDE it. The bar's own
   glass switches off while open, leaving a single container rather than a pill
   stacked on a card. */
.header .header-bar { z-index: 61; }
.header.menu-open .header-bar::before, .header.menu-open .header-bar::after { opacity: 0; }
.header.menu-open .header-bar { border-color: transparent; box-shadow: none; }

@media (max-width: 720px) {
  /* Keep the pill and the menu on the same 16px inset so they line up. */
  .header-wrap,
  .header:not(.is-scrolled) .header-wrap { padding-left: 16px; padding-right: 16px; }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border-radius: 999px;
    border: 0; background: none;
    color: var(--fg); cursor: pointer; transition: opacity 0.2s var(--ease);
  }
  .nav-toggle:hover { opacity: 0.7; }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 17px; height: 1.6px; background: currentColor; border-radius: 2px;
    transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -5.5px; }
  .nav-toggle-bars::after { top: 5.5px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(5.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-5.5px) rotate(-45deg); }

  .mobile-nav {
    display: flex; flex-direction: column; gap: 8px;
    /* Starts at the bar's own top edge; the top padding is the header row. */
    position: absolute; top: 0; left: 16px; right: 16px; z-index: 60;
    padding: 62px 8px 8px;
    opacity: 0; transform: scaleY(0.86); transform-origin: top center;
    pointer-events: none; visibility: hidden;
    transition: opacity 0.26s var(--ease), transform 0.34s var(--ease), visibility 0s linear 0.34s;
  }
  .mobile-nav__links { display: flex; flex-direction: column; }
  .mobile-nav.is-open {
    opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .mobile-nav a:not(.btn) {
    padding: 15px 16px; font-size: 16px; color: var(--fg);
    transition: background 0.18s var(--ease);
  }
  .mobile-nav a:not(.btn):hover, .mobile-nav a:not(.btn):active { background: rgba(255, 255, 255, 0.06); }
  .mobile-nav .btn { width: 100%; height: 50px; }
}

/* ── Scroll sequence (Zoah) ────────────────────────────────────────────────
   A sticky stage that grows from an inset card to full bleed, then cross-fades
   four panels as the track scrolls past. Base rules are the no-JS / reduced
   motion layout (panels stacked in flow); `.js-scroll-steps` turns on the pin. */
:root { --scroll-dark: #0b0b0a; --scroll-dark-ink: #f6f6f5; --scroll-dark-muted: #8f8f8d; --scroll-dark-line: #2a2a28; }
.steps-seq { overflow-x: clip; }

.scroll-stage__frame { background: var(--scroll-dark); border-radius: 40px; padding: 8px clamp(24px, 4vw, 56px); }
.scroll-panel { padding: 40px 0; }
.scroll-progress, .scroll-orb { display: none; }
/* Eyebrow: a step counter, a hairline, then the label. */
.scroll-panel__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-size: 12px; line-height: 1; color: var(--scroll-dark-ink);
}
.eb-num { letter-spacing: 0.04em; color: var(--scroll-dark-muted); }
.eb-num b { font-weight: 500; color: var(--scroll-dark-ink); }
.eb-sep { width: 18px; height: 1px; background: rgba(255, 255, 255, 0.22); }
.eb-label { font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
@keyframes eb-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--eb, #f4f4f4) 60%, transparent); }
  75%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--eb, #f4f4f4) 0%, transparent); }
}
[data-scroll-palette="ink"] { --eb: #f4f4f4; }
[data-scroll-palette="blue"] { --eb: #2f7bff; }
[data-scroll-palette="deep"] { --eb: #6d72ff; }
[data-scroll-palette="ice"] { --eb: #2cc7f2; }
/* It arrives just ahead of the title's wipe. */
.js-scroll-steps .scroll-panel .scroll-panel__eyebrow { opacity: 0; transform: translateY(10px); filter: blur(6px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), filter 0.6s var(--ease); }
.js-scroll-steps .seq-live .scroll-panel.is-active .scroll-panel__eyebrow { opacity: 1; transform: none; filter: none; }

/* The first panel's subheading sets up what the section is about. */
.scroll-panel__note { margin-top: 24px; max-width: 44ch; font-size: 17px; line-height: 1.6; color: var(--scroll-dark-muted); }
.js-scroll-steps .scroll-panel .scroll-panel__note { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.7s var(--ease); }
.js-scroll-steps .seq-live .scroll-panel.is-active .scroll-panel__note { opacity: 1; transform: none; transition-delay: 0.45s; }
@media (max-width: 720px) { .scroll-panel__note { font-size: 15px; margin-top: 18px; } }
/* Same face, size, tracking and leading as the hero headline. */
.scroll-panel__title { font-size: clamp(34px, 4.9vw, 60px); line-height: 0.98; font-weight: 500; letter-spacing: -0.038em; max-width: 19ch; color: var(--scroll-dark-ink); text-wrap: balance; }
/* And the hero's wipe: characters arrive through blue, staggered. */
.scroll-panel__title .hero-rotator__ch { opacity: 1; transition: opacity 0.26s, color 0.6s; }
.scroll-panel__title.is-wiping .hero-rotator__ch { color: var(--accent); opacity: 0; }
.scroll-progress__bar { position: relative; height: 2px; background: var(--scroll-dark-line); overflow: hidden; }
.scroll-progress__bar i { position: absolute; inset: 0; background: var(--scroll-dark-ink); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s; }
.scroll-progress__bar.is-active i, .scroll-progress__bar.is-passed i { transform: scaleX(1); }

.js-scroll-steps .scroll-track { position: relative; height: 460vh; margin-top: 0; }
.js-scroll-steps .scroll-stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; }
.js-scroll-steps .scroll-stage::before { content: ""; position: absolute; inset: 0; background: var(--scroll-dark); opacity: var(--scroll-fill, 0); pointer-events: none; }
.js-scroll-steps .scroll-stage__frame { position: relative; z-index: 1; padding: 0; width: calc(72% + 28% * var(--scroll-scale, 0)); height: calc(62% + 38% * var(--scroll-scale, 0)); border-radius: calc(40px * (1 - var(--scroll-scale, 0))); overflow: hidden; will-change: width, height; }
/* The canvas is 1.25x the sphere (room for its glow), centred where the sphere sits. */
.js-scroll-steps .scroll-orb { --orb: clamp(600px, 110vh, 1400px); display: block; position: absolute; z-index: 0; width: calc(var(--orb) * 1.25); height: calc(var(--orb) * 1.25); left: calc(50% - var(--orb) * 0.125); top: calc(var(--orb) * 0.075); border-radius: 50%; user-select: none; }
.js-scroll-steps .scroll-stage__panels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.js-scroll-steps .scroll-panel { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 56px clamp(32px, 5vw, 80px); opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0.6s; }
.js-scroll-steps .scroll-panel.is-active { opacity: 1; visibility: visible; }
.js-scroll-steps .scroll-panel__copy { max-width: 48%; }
.js-scroll-steps .scroll-progress { opacity: 0; transition: opacity 0.5s var(--ease); }
.js-scroll-steps .seq-live .scroll-progress { opacity: 1; }
.js-scroll-steps .scroll-progress { display: grid; position: absolute; z-index: 1; left: clamp(32px, 5vw, 80px); right: clamp(32px, 5vw, 80px); bottom: 32px; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 1300px) {
  .js-scroll-steps .scroll-track { height: 420vh; }
  .js-scroll-steps .scroll-panel, .scroll-panel { grid-template-columns: 1fr; align-content: start; padding: 160px 28px 64px; }
  .js-scroll-steps .scroll-orb { --orb: clamp(560px, 160vw, 1200px); left: auto; right: calc(var(--orb) * -0.365); bottom: calc(var(--orb) * -0.465); top: initial; }
  .js-scroll-steps .scroll-panel__copy { max-width: none; }
  .scroll-panel__title { max-width: none; font-size: clamp(31px, 8.8vw, 46px); line-height: 1; letter-spacing: -0.04em; }
  .js-scroll-steps .scroll-progress { left: 28px; right: 28px; bottom: 24px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-scroll-steps .scroll-track, .js-scroll-steps .scroll-stage, .js-scroll-steps .scroll-stage__frame, .js-scroll-steps .scroll-panel, .js-scroll-steps .scroll-progress { position: static; }
  .js-scroll-steps .scroll-track, .js-scroll-steps .scroll-stage, .js-scroll-steps .scroll-stage__frame { height: auto; width: auto; overflow: visible; }
  .js-scroll-steps .scroll-stage { margin-left: 0; margin-right: 0; }
  .js-scroll-steps .scroll-stage::before, .js-scroll-steps .scroll-orb, .js-scroll-steps .scroll-progress { display: none; }
  .js-scroll-steps .scroll-panel { opacity: 1; visibility: visible; padding: 40px 0; transition: none; }
}

/* Landing page: no divider rules between sections. */
#top:not(.lbn) .sec { border-top: 0; }
#top:not(.lbn) ~ .footer { border-top: 0; }

/* Larger section headline (same scale as the scroll-sequence titles). */
.sec-title--xl { font-size: clamp(34px, 4.9vw, 60px); line-height: 0.98; letter-spacing: -0.038em; max-width: 20ch; text-wrap: balance; }
@media (max-width: 720px) { .sec-title--xl { font-size: clamp(31px, 8.8vw, 46px); line-height: 1; } }
/* Headlines that wipe in like the hero once they're on screen. */
[data-wipe] .hero-rotator__ch { opacity: 1; transition: opacity 0.26s, color 0.6s; }
[data-wipe].is-wiping .hero-rotator__ch { color: var(--accent); opacity: 0; }

/* Landing page: cards sit on their fill alone, no outline. */
#top:not(.lbn) .card, #top:not(.lbn) .card:hover { border-color: transparent; }

/* Landing page: cards turn white on hover as a circular wipe that grows from
   where the cursor enters and retreats toward where it leaves. A light copy of
   the UI mock is revealed by the same wave, so there's no murky mid-state. */
#top:not(.lbn) .card { position: relative; isolation: isolate; }
#top:not(.lbn) .card::before,
#top:not(.lbn) .mk--light {
  clip-path: circle(0px at var(--hx, 50%) var(--hy, 50%));
  transition: clip-path 0.65s cubic-bezier(0.33, 0.85, 0.4, 1);
}
#top:not(.lbn) .card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #FFFFFF; }
#top:not(.lbn) .card.is-lit::before,
#top:not(.lbn) .card.is-lit .mk--light { clip-path: circle(var(--hr, 150%) at var(--hx, 50%) var(--hy, 50%)); }
#top:not(.lbn) .card-media { display: grid; grid-template-columns: minmax(0, 1fr); place-items: end center; }
#top:not(.lbn) .card-media > .mk { grid-area: 1 / 1; }
#top:not(.lbn) .mk--light { filter: invert(1) hue-rotate(180deg); pointer-events: none; }
#top:not(.lbn) .card-text h3, #top:not(.lbn) .card-text p { transition: color 0.5s var(--ease) 0.05s; }
#top:not(.lbn) .card.is-lit .card-text h3 { color: #0B0B0C; }
#top:not(.lbn) .card.is-lit .card-text p { color: #5A5A62; }
@media (prefers-reduced-motion: reduce) {
  #top:not(.lbn) .card::before, #top:not(.lbn) .mk--light { transition: none; }
}
/* The mock dissolves into the card instead of stopping at a hard edge. */
#top:not(.lbn) .card-media .mk { -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); }

/* ── The studio, as an iMessage thread ───────────────────────────────────── */
.imsg {
  --imsg-bg: #050505; --in: #262629; --out: #0A84FF;
  max-width: 600px; margin: clamp(8px, 2vw, 20px) auto 0; overflow: hidden;
  border-radius: 34px; background: var(--imsg-bg); text-align: left;
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  font-family: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: proportional-nums;
}
/* iOS 26 header: no bar — floating glass controls over the thread, which fades
   and blurs out beneath them. */
.imsg { position: relative; }
.imsg-top {
  position: absolute; inset: 0 0 auto 0; z-index: 2; height: 118px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 18px 18px 0;
}
.imsg-top::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0.94) 0%, rgba(5, 5, 5, 0.7) 55%, rgba(5, 5, 5, 0) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent);
}
.imsg-glass {
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(58, 58, 62, 0.5); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
}
.imsg-back { justify-self: start; gap: 10px; height: 46px; padding: 0 8px 0 16px; border-radius: 999px; }
.imsg-badge { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: #F2F2F7; color: #111; font-size: 14px; font-weight: 600; }
.imsg-video { justify-self: end; width: 46px; height: 46px; border-radius: 50%; }
.imsg-who { display: flex; flex-direction: column; align-items: center; gap: 0; }
.imsg-avatars { display: flex; position: relative; z-index: 1; }
.imsg-avatars .av {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(180deg, #4DA0FF, #0058D6); color: #fff; font-size: 22px; font-weight: 600; letter-spacing: 0.01em;
  box-shadow: 0 0 0 2px #050505;
}
.imsg-avatars .av--k { margin-left: -16px; background: linear-gradient(180deg, #FF6FB8, #E0207E); }
.imsg-name { margin-top: -6px; gap: 5px; padding: 7px 13px 6px; border-radius: 999px; font-size: 13px; }
.imsg-name svg { color: rgba(255, 255, 255, 0.6); }
.imsg-thread { display: flex; flex-direction: column; gap: 14px; padding: 124px clamp(16px, 3vw, 22px) 26px; }
.imsg-time { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 0 6px; font-size: 12px; line-height: 1.3; color: #8e8e93; }
.imsg-svc { font-weight: 500; }
.imsg-enc { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.imsg-when { margin-top: 12px; font-weight: 500; }
.imsg-group { display: flex; flex-direction: column; gap: 3px; }
.imsg-group--in { align-items: flex-start; position: relative; padding-left: 40px; }
/* Sender avatar beside the last bubble of their run, as in iOS group chats. */
.imsg-av {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(180deg, #4DA0FF, #0058D6); color: #fff; font-size: 12px; font-weight: 600;
}
.imsg-av--k { background: linear-gradient(180deg, #FF6FB8, #E0207E); }
/* A tapback reaction on the corner of a bubble. */
.tapback {
  position: absolute; top: -16px; right: -12px; z-index: 1;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #3A3A3C; color: #FF4D6D; box-shadow: 0 0 0 2px var(--imsg-bg);
}
.tapback::after { content: ""; position: absolute; right: 1px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; background: #3A3A3C; box-shadow: 0 0 0 2px var(--imsg-bg); }
.imsg-group--out { align-items: flex-end; }
.imsg-sender { margin: 0 0 2px 14px; font-size: 11px; color: #8e8e93; }
.imsg-status { margin: 2px 4px 0 0; font-size: 11px; color: #8e8e93; }

.bubble {
  position: relative; max-width: 78%; padding: 8px 14px; border-radius: 19px;
  background: var(--in); color: #fff; font-size: 16px; line-height: 1.34; letter-spacing: -0.01em;
}
.bubble--out { background: var(--out); color: #fff; transition: filter 0.2s var(--ease); }
.bubble--out:hover { filter: brightness(1.1); }
/* iMessage tails on the last bubble of each run. */
.bubble.tail::before, .bubble.tail::after { content: ""; position: absolute; bottom: 0; height: 22px; }
.imsg-group--in .bubble.tail::before { left: -7px; width: 20px; background: var(--in); border-bottom-right-radius: 16px 14px; }
.imsg-group--in .bubble.tail::after { left: -26px; width: 26px; background: var(--imsg-bg); border-bottom-right-radius: 10px; }
.imsg-group--out .bubble.tail::before { right: -7px; width: 20px; background: var(--out); border-bottom-left-radius: 16px 14px; }
.imsg-group--out .bubble.tail::after { right: -26px; width: 26px; background: var(--imsg-bg); border-bottom-left-radius: 10px; }
.bubble--typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; }
.bubble--typing i { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: imsg-dot 1.3s ease-in-out infinite; }
.bubble--typing i:nth-child(2) { animation-delay: 0.16s; }
.bubble--typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes imsg-dot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Pop-in: items wait hidden until the thread plays, then spring in one by one. */
.js-imsg .imsg-thread > .imsg-group > *, .js-imsg .imsg-time > *, .js-imsg .imsg-top > * { opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.7s var(--ease), transform 0.8s cubic-bezier(0.22, 1.12, 0.36, 1); }
.js-imsg .imsg-group--in > * { transform-origin: bottom left; }
.js-imsg .imsg-group--out > * { transform-origin: bottom right; }
.js-imsg .imsg .is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bubble--typing i { animation: none; opacity: 0.6; } }
@media (max-width: 720px) {
  .imsg { border-radius: 26px; }
  .bubble { max-width: 84%; font-size: 15px; }
}

/* The tapback pops in on its own, after its bubble. */
.js-imsg .tapback { opacity: 0; transform: scale(0.4); transition: opacity 0.3s var(--ease), transform 0.5s cubic-bezier(0.34, 1.6, 0.64, 1); }
.js-imsg .tapback.is-shown { opacity: 1; transform: none; }
.js-imsg .imsg-av { transform-origin: center; }

/* ── Figures, restyled as stat cards (landing page) ─────────────────────── */
#top:not(.lbn) .numbers { padding: 0; }
#top:not(.lbn) .numbers-head { max-width: none; }
#top:not(.lbn) .numbers-list { margin-top: clamp(36px, 4.4vw, 56px); gap: clamp(14px, 1.6vw, 20px); }
#top:not(.lbn) .numbers-list > .stat {
  border-top: 0; padding: clamp(30px, 3.4vw, 44px) 20px clamp(26px, 3vw, 36px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(0, 122, 255, 0.16) 0%, rgba(0, 122, 255, 0.05) 45%, rgba(0, 122, 255, 0) 75%),
    var(--surface);
}
#top:not(.lbn) .numbers-list dt {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--fg);
  font-variant-numeric: normal; display: flex; align-items: flex-end; justify-content: center;
  height: clamp(44px, 6vw, 80px); font-size: clamp(44px, 6vw, 80px); line-height: 1; letter-spacing: -0.05em;
  transition: color 0.5s var(--ease) 0.05s;
}
#top:not(.lbn) .numbers-list dt.is-word { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -0.035em; padding-bottom: 0.08em; }
#top:not(.lbn) .numbers-list dd { max-width: 22ch; font-size: 14.5px; transition: color 0.5s var(--ease) 0.05s; }
#top:not(.lbn) .stat.is-lit dt { color: #0B0B0C; }
#top:not(.lbn) .stat.is-lit dd { color: #5A5A62; }

/* The curve draws in behind the stat cards (it never reaches the heading). */
#top:not(.lbn) .numbers-stage { position: relative; margin-top: clamp(36px, 4.4vw, 56px); }
#top:not(.lbn) .numbers-stage .numbers-list { margin-top: 0; }
.numbers-curve {
  position: absolute; z-index: 0; left: -4%; right: -4%; top: -18%; bottom: -14%; width: 108%; height: 132%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.numbers-curve .curve-line { stroke-dasharray: 1.2; stroke-dashoffset: 1.2; transition: stroke-dashoffset 2.2s cubic-bezier(0.45, 0.05, 0.2, 1); }
.numbers-curve .curve-area { opacity: 0; transition: opacity 1.4s var(--ease) 1.1s; }
.numbers-stage.is-drawn .curve-line { stroke-dashoffset: 0; }
.numbers-stage.is-drawn .curve-area { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .numbers-curve .curve-line { stroke-dashoffset: 0; transition: none; }
  .numbers-curve .curve-area { opacity: 1; transition: none; }
}
/* Stat cards become frosted glass so the curve reads through them; no outline. */
#top:not(.lbn) .numbers-list { position: relative; z-index: 1; }
#top:not(.lbn) .numbers-list > .stat {
  border: 0;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(0, 122, 255, 0.14) 0%, rgba(0, 122, 255, 0.04) 45%, rgba(0, 122, 255, 0) 75%),
    rgba(21, 21, 22, 0.62);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

.wipe-note { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.7s var(--ease); }
.wipe-note.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .wipe-note { opacity: 1; transform: none; transition: none; } }

/* ── Work showcase: the pinned sequence with a product mockup per panel ──── */
.steps-seq--work .scroll-track { margin-top: clamp(20px, 3vw, 36px); }
.scroll-shots { position: relative; display: grid; gap: 28px; margin: 24px 0; }
.scroll-shot { position: relative; }
.js-scroll-steps .scroll-shots {
  position: absolute; z-index: 1; display: block; margin: 0;
  right: clamp(32px, 5vw, 80px); top: 50%; width: min(46%, 640px); aspect-ratio: 16 / 11; transform: translateY(-50%);
}
.js-scroll-steps .scroll-shot {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(24px) scale(0.97);
  transition: opacity 0.6s var(--ease), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.6s;
}
.js-scroll-steps .seq-live .scroll-shot.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0.15s; }
/* A soft brand glow behind each product. */
.scroll-shot::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: 0.55; background: radial-gradient(closest-side, var(--glow, rgba(0, 122, 255, 0.5)), transparent); }
.shot--smc { --glow: rgba(255, 79, 163, 0.42); --acc: #FF4FA3; }
.shot--empire { --glow: rgba(214, 170, 90, 0.34); --acc: #D6AA5A; }
.shot--os { --glow: rgba(0, 122, 255, 0.45); --acc: #3395FF; }
.shot--morso { --glow: rgba(52, 211, 153, 0.36); --acc: #34D399; }

/* Desktop window */
.mw { width: 100%; border-radius: 16px; overflow: hidden; background: #111113; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.07); font-size: 12px; color: #e8e8ec; text-align: left; }
.mw-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #19191c; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.mw-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.mw-bar span { margin-left: 10px; font-size: 11px; color: #7c7c85; }
.mw-body { display: grid; min-height: 330px; }
.mw-body--side { grid-template-columns: 118px 1fr; }
.mw-body--split { grid-template-columns: 1fr 190px; }
.mw-side { display: flex; flex-direction: column; gap: 4px; padding: 16px 10px; background: #141416; border-right: 1px solid rgba(255, 255, 255, 0.05); }
.mw-side span { padding: 7px 10px; border-radius: 8px; color: #8e8e96; }
.mw-side span.on { background: color-mix(in srgb, var(--acc) 18%, transparent); color: #fff; }
.mw-brand { margin: 0 10px 10px; font-size: 13px; letter-spacing: 0.08em; color: var(--acc); }
.mw-main { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mw-h { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.mw-sub { font-size: 11px; color: #7c7c85; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
.mw u { display: block; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); text-decoration: none; }
.mw u.dim { background: rgba(255, 255, 255, 0.08); }
.mw-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mw-tiles div { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: #19191c; }
.mw-tiles em { font-style: normal; font-size: 10.5px; color: #7c7c85; }
.mw-tiles u { width: 50%; height: 12px; background: color-mix(in srgb, var(--acc) 55%, transparent); }
.mw-rows { display: flex; flex-direction: column; gap: 8px; }
.mw-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; background: #17171a; }
.mw-row .date { display: grid; place-items: center; width: 38px; padding: 4px 0; border-radius: 9px; background: color-mix(in srgb, var(--acc) 16%, transparent); font-size: 8.5px; letter-spacing: 0.06em; color: var(--acc); line-height: 1.1; }
.mw-row .date b { font-size: 14px; color: #fff; letter-spacing: 0; }
.mw-row .lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.pill { padding: 4px 9px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 10px; font-weight: 500; }
.pill--ghost { background: none; color: var(--acc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 60%, transparent); }

.mw-table { display: flex; flex-direction: column; }
.mw-tr { display: grid; grid-template-columns: 1fr 86px 28px; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.mw-th { border-top: 0; font-size: 10px; color: #6c6c74; text-transform: uppercase; letter-spacing: 0.08em; }
.st { justify-self: start; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: #9a9aa3; font-size: 10px; }
.st--ok { background: rgba(52, 211, 153, 0.14); color: #5fe3b0; }
.st--wip { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); }
.mw-tr .av { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #26262a; font-size: 10px; color: #cfcfd6; }
.mw-ai { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; background: #141416; border-left: 1px solid rgba(255, 255, 255, 0.05); }
.mw-ai-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: #fff; }
.spark { width: 12px; height: 12px; background: var(--acc); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.ai-q { align-self: flex-end; max-width: 92%; padding: 7px 10px; border-radius: 12px 12px 3px 12px; background: #2a2a2e; font-size: 11px; line-height: 1.35; }
.ai-a { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px 12px 12px 3px; background: color-mix(in srgb, var(--acc) 12%, #17171a); }
.ai-a u { background: color-mix(in srgb, var(--acc) 40%, rgba(255,255,255,0.12)); }
.ai-in { margin-top: auto; padding: 8px 10px; border-radius: 999px; background: #1c1c1f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); color: #6c6c74; font-size: 11px; }

.os-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.os-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: #17171a; }
.os-card p { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #dcdce2; }
.os-card .dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); }
.os-card svg { width: 100%; height: 34px; }
.os-card path { fill: none; stroke: var(--acc); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.os-foot { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.os-foot div { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #17171a; }
.os-foot em { font-style: normal; font-size: 10.5px; color: #7c7c85; }
.os-foot .ok { font-size: 11.5px; color: #5fe3b0; }
.os-foot u { width: 60%; height: 10px; }

/* Phone */
.mp { position: relative; width: 44%; min-width: 210px; aspect-ratio: 9 / 18.5; padding: 34px 16px 18px; border-radius: 36px; background: #0d0d0f; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 0 0 6px #050505; display: flex; flex-direction: column; gap: 14px; color: #e8e8ec; font-size: 11px; text-align: left; }
.mp-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 34%; height: 16px; border-radius: 999px; background: #000; }
.mp-h { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.mp-ring { position: relative; width: 62%; align-self: center; aspect-ratio: 1; }
.mp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mp-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.mp-ring .trk { stroke: #1f1f22; }
.mp-ring .val { stroke: var(--acc); stroke-dasharray: 68 100; }
.mp-ring div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.mp-ring b { font-size: 15px; font-weight: 600; color: #fff; }
.mp-ring em { font-style: normal; font-size: 9.5px; color: #7c7c85; }
.mp-macros { display: flex; flex-direction: column; gap: 8px; }
.mp-macros div { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 8px; }
.mp-macros em { font-style: normal; color: #9a9aa3; font-size: 10px; }
.mp-macros span { height: 6px; border-radius: 999px; background: #1f1f22; overflow: hidden; }
.mp-macros i { display: block; height: 100%; border-radius: inherit; background: var(--acc); }
.mp-log { display: flex; flex-direction: column; gap: 7px; }
.mp-log div { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 12px; background: #17171a; }
.mp-log .tag { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #26262a; font-size: 9.5px; color: #cfcfd6; }
.mp-log u { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); text-decoration: none; }
.mp-actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mp-actions span { padding: 9px 6px; border-radius: 999px; background: #1c1c1f; text-align: center; font-size: 10px; color: #cfcfd6; }
.mp-actions .pri { background: var(--acc); color: #04150e; font-weight: 600; }

@media (max-width: 1300px) {
  .js-scroll-steps .scroll-shots { left: 28px; right: 28px; width: auto; top: auto; bottom: 64px; height: 46%; aspect-ratio: auto; transform: none; }
  .js-scroll-steps .scroll-shot { place-items: end center; }
  .js-scroll-steps .scroll-shot .mw { max-width: 560px; }
  .mw-body { min-height: 0; }
}
@media (max-width: 720px) {
  .mw-body--side { grid-template-columns: 1fr; }
  .mw-side { display: none; }
  .mw-body--split { grid-template-columns: 1fr; }
  .mw-ai { display: none; }
  .mp { width: 52%; min-width: 0; }
}
#numbers { overflow-x: clip; }
@media (max-width: 720px) {
  .js-scroll-steps .steps-seq--work .scroll-shots { bottom: 52px; height: 38%; }
  .js-scroll-steps .steps-seq--work .scroll-shot .mw { transform: scale(0.8); transform-origin: bottom center; }
  .mw-row:nth-child(3), .mw-tr:nth-child(n+5), .os-foot div:nth-child(3) { display: none; }
  .js-scroll-steps .steps-seq--work .scroll-panel { padding-top: 130px; }
  .steps-seq--work .scroll-panel__note { font-size: 14.5px; }
  .js-scroll-steps .shot--morso .mp { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: auto; min-width: 0; height: 100%; aspect-ratio: 9 / 16; padding: 26px 12px 12px; gap: 10px; border-radius: 28px; }
  .mp-h { font-size: 14px; }
  .mp-ring { width: 54%; }
  .mp-log { display: none; }
  .mp-actions span { white-space: nowrap; font-size: 9px; padding: 8px 4px; }
}

/* ── Work showcase: bigger frames, screenshot + logo slots ─────────────── */
.js-scroll-steps .steps-seq--work .scroll-shots { width: min(55%, 900px); aspect-ratio: 16 / 10.5; right: clamp(28px, 4vw, 64px); }
.js-scroll-steps .steps-seq--work .scroll-panel__copy { max-width: 38%; }
.steps-seq--work .mw { font-size: 13.5px; }
.steps-seq--work .mw-body { min-height: 420px; }
.steps-seq--work .mp { width: 40%; }
/* Screenshot slot: once work/<name>.png loads, it replaces the mockup. */
.shot-img { display: none; }
.mw.has-shot .mw-body { display: none; }
.mw.has-shot .shot-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.mp.has-shot > :not(.shot-img) { display: none; }
.mp.has-shot { padding: 10px; }
.mp.has-shot .shot-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 28px; }
/* Logo slot: a logo in logos/<name>.png replaces the text label. */
.eb-logo { display: none; height: 28px; width: auto; max-width: 300px; object-fit: contain; }
.eb-logo--tall { height: 40px; }
.scroll-panel__eyebrow.has-logo .eb-label { display: none; }
.scroll-panel__eyebrow.has-logo .eb-logo { display: block; }
@media (max-width: 1300px) {
  .js-scroll-steps .steps-seq--work .scroll-shots { width: auto; aspect-ratio: auto; right: 28px; }
  .js-scroll-steps .steps-seq--work .scroll-panel__copy { max-width: none; }
  .steps-seq--work .mw-body { min-height: 0; }
}

@media (max-width: 1300px) {
  .js-scroll-steps .steps-seq--work .scroll-shots { top: var(--shots-top, 45%); bottom: 64px; height: auto; }
  .js-scroll-steps .steps-seq--work .scroll-shot { place-items: center; }
  .js-scroll-steps .steps-seq--work .scroll-shot .mw { transform-origin: center; }
}
@media (max-width: 720px) {
  .js-scroll-steps .steps-seq--work .scroll-shots { bottom: 52px; }
  .js-scroll-steps .shot--morso .mp { top: 0; bottom: 0; margin: auto 0; height: 100%; }
}

/* Mobile/tablet: `.sec-in` / `.hero-in` zero the side padding they share with
   `.wrap`, so content ran to the screen edges. Restore the gutter (desktop is
   unaffected — there the content is centred at max width). */
@media (max-width: 900px) {
  .wrap.sec-in, .wrap.hero-in { padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* Footer: the same centred footer as the LBN page. */
.lbn-footer .footer-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  padding: clamp(56px, 7vw, 92px) 0 clamp(40px, 5vw, 60px);
}
.lbn-footer .footer-mark { height: 20px; opacity: 0.85; }
.lbn-footer .footer-tag { max-width: 44ch; font-size: 14px; line-height: 1.6; color: var(--fg-3); }
.lbn-footer .footer-inner .btn.sm { margin-top: 4px; }
.lbn-footer .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 12px; }
.lbn-footer .footer-links a { font-size: 14px; color: var(--fg-2); transition: color 0.2s var(--ease); }
.lbn-footer .footer-links a:hover { color: var(--fg); }
.lbn-footer .footer-copy { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--line); width: 100%; font-size: 13px; color: var(--fg-3); }
@media (max-width: 900px) { .lbn-footer .footer-inner { padding-left: var(--gutter); padding-right: var(--gutter); } }

/* Mobile/tablet: anchor the inset card to the top of its stage instead of
   centring it, so there's no dead band above the sequence. It still grows to
   full screen the same way. Desktop unchanged. */
@media (max-width: 900px) {
  .js-scroll-steps .scroll-stage { align-items: flex-start; }
  .eb-logo { height: 24px; }
  .eb-logo--tall { height: 34px; }
}
@media (max-width: 900px) { .js-scroll-steps .steps-seq--work .scroll-track { margin-top: 40px; } }

/* ── How a build runs: numbered step cards (same card system as 'One studio') ── */
.how-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
#top:not(.lbn) .how-card {
  border: 0; text-align: left; gap: 14px; padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.2vw, 28px) clamp(28px, 3vw, 38px);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(0, 122, 255, 0.14) 0%, rgba(0, 122, 255, 0.04) 45%, rgba(0, 122, 255, 0) 75%),
    var(--surface);
}
.how-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; line-height: 1; color: var(--fg); }
.how-card h3 { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; color: var(--fg); transition: color 0.5s var(--ease) 0.05s; }
.how-card p { font-size: 15px; line-height: 1.62; color: var(--fg-3); transition: color 0.5s var(--ease) 0.05s; }
.how-card .eb-label, .how-card .eb-num, .how-card .eb-num b { transition: color 0.5s var(--ease) 0.05s; }
#top:not(.lbn) .how-card.is-lit h3, #top:not(.lbn) .how-card.is-lit .eb-label, #top:not(.lbn) .how-card.is-lit .eb-num b { color: #0B0B0C; }
#top:not(.lbn) .how-card.is-lit p, #top:not(.lbn) .how-card.is-lit .eb-num { color: #5A5A62; }
#top:not(.lbn) .how-card.is-lit .eb-sep { background: rgba(0, 0, 0, 0.2); }
@media (max-width: 1000px) { .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .how-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Closing CTA: one large panel with the blue wash ─────────────────────── */
.cta-panel {
  position: relative; overflow: hidden; border-radius: 32px; text-align: center;
  padding: clamp(56px, 8vw, 110px) clamp(22px, 5vw, 80px);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(0, 122, 255, 0.26) 0%, rgba(0, 122, 255, 0.07) 45%, rgba(0, 122, 255, 0) 75%),
    var(--surface);
}
.cta-panel .sec-head { margin-bottom: clamp(26px, 3vw, 36px); }
.cta-panel .sec-title--xl { max-width: 17ch; margin-left: auto; margin-right: auto; }
.cta-panel .sec-note { max-width: 56ch; color: var(--fg-2); }
.cta-panel__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cta-panel__mail { font-size: 15px; color: var(--fg-3); transition: color 0.2s var(--ease); }
.cta-panel__mail:hover { color: var(--fg); }

/* Bottom-edge progressive blur: fixed, and faded in once the page moves. */
.edge-scrim { position: fixed; left: 0; right: 0; bottom: 0; height: 110px; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease); }
.header.is-scrolled ~ .edge-scrim, body:has(.header.is-scrolled) .edge-scrim { opacity: 1; }
.edge-scrim__blur { position: absolute; inset: 0; }
.edge-scrim__blur--1 { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 80%); mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 80%); }
.edge-scrim__blur--2 { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 62%); mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 62%); }
.edge-scrim__blur--3 { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(to top, #000 0%, #000 18%, transparent 46%); mask-image: linear-gradient(to top, #000 0%, #000 18%, transparent 46%); }
.edge-scrim__tint { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--bg) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 45%, transparent 100%); }

/* ── Vertical: restyled list + device mockups (no pinned sequence) ───────── */
#vertical .vertical-logo { margin-bottom: clamp(18px, 2.4vw, 28px); }
#vertical .acc-row { border: 0; }
#vertical .acc-eyebrow { margin: 0 0 8px; }
#vertical .acc-title { font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: -0.03em; }
#vertical .acc-lede { font-size: 14.5px; margin-top: 4px; }
#vertical .acc-rule { background: rgba(255, 255, 255, 0.07); }
#top:not(.lbn) #vertical .split-stage {
  border: 0; min-height: clamp(380px, 46vw, 600px);
  background:
    radial-gradient(80% 70% at 50% 30%, rgba(0, 122, 255, 0.22) 0%, rgba(0, 122, 255, 0.06) 45%, rgba(0, 122, 255, 0) 75%),
    var(--surface);
  border-radius: 32px;
}
#vertical .stage-panel { padding: clamp(28px, 4vw, 52px); }
#vertical .mp--v { --acc: #3395FF; width: min(52%, 250px); min-width: 0; }
.mp.has-shot > :not(.shot-img) { display: none; }
/* Tablet */
.mt { --acc: #3395FF; position: relative; width: 100%; max-width: 560px; aspect-ratio: 4 / 3; padding: 14px; border-radius: 30px; background: #0d0d0f; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 0 0 6px #050505; }
.mt-screen { height: 100%; border-radius: 18px; background: #111113; padding: 18px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; color: #e8e8ec; font-size: 12px; text-align: left; }
.mt.has-shot .mt-screen { display: none; }
.mt.has-shot .shot-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 18px; }
/* Mock parts */
.vm-h { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.vm-sub { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #6c6c74; }
.vm-live, .vm-pill { padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 500; }
.vm-live { background: rgba(255, 69, 58, 0.16); color: #ff6961; }
.vm-pill { background: rgba(255, 255, 255, 0.07); color: #9a9aa3; }
.vt-top { display: flex; align-items: center; justify-content: space-between; }
.vm-court { border-radius: 12px; background: #17171a; padding: 8px; }
.vm-court svg { display: block; width: 100%; height: auto; }
.vm-court .ln { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1.2; }
.vm-court .shot circle { fill: var(--acc); }
.vm-court .miss circle { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.2; }
.vm-court .home circle { fill: var(--acc); stroke: #111113; stroke-width: 1.5; }
.vm-bars { display: flex; flex-direction: column; gap: 7px; }
.vm-bars div { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; }
.vm-bars em { font-style: normal; font-size: 10px; color: #9a9aa3; }
.vm-bars span { height: 6px; border-radius: 999px; background: #1f1f22; overflow: hidden; }
.vm-bars i { display: block; height: 100%; border-radius: inherit; background: var(--acc); }
.vm-rows { display: flex; flex-direction: column; gap: 6px; }
.vm-rows div { display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 10px; background: #17171a; }
.vm-rows .tag { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: #26262a; font-size: 9px; color: #cfcfd6; }
.vm-rows u, .vm-card u, .vm-tr u { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); text-decoration: none; }
.vm-card u.dim { background: rgba(255, 255, 255, 0.08); }
.vt-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.vm-court--full { display: grid; place-items: center; }
.vt-side { display: flex; flex-direction: column; gap: 8px; }
.vm-card { display: flex; flex-direction: column; gap: 6px; padding: 9px; border-radius: 10px; background: color-mix(in srgb, var(--acc) 12%, #17171a); }
.vm-rows--tight div { padding: 5px 7px; }
.vm-table { display: flex; flex-direction: column; gap: 6px; }
.vm-tr { display: grid; grid-template-columns: 24px 1fr 90px; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: #17171a; }
.vm-tr .av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #26262a; font-size: 10px; color: #cfcfd6; }
.vm-tr .spark { display: flex; align-items: flex-end; gap: 4px; height: 22px; }
.vm-tr .spark i { flex: 1; border-radius: 2px; background: var(--acc); opacity: 0.8; }
@media (max-width: 720px) {
  .vt-body { grid-template-columns: 1fr; }
  .vt-side { display: none; }
  .mt { padding: 10px; border-radius: 24px; }
  .mt-screen { padding: 12px; gap: 8px; }
}
/* Extend the blur bands past the screen edges (and clip back) so the blur's own
   boundary — which shows as a faint seam — is never on screen. */
.header { overflow-x: clip; }
.header-scrim { left: -60px; right: -60px; }
.edge-scrim { left: -60px; right: -60px; }
/* Morso's phone sizes to the frame's height (not its width), so it sits inside
   the same box as the desktop windows instead of running past it. */
@media (min-width: 721px) {
  .js-scroll-steps .shot--morso .mp { position: absolute; left: 50%; top: 4%; bottom: 4%; transform: translateX(-50%); width: auto; min-width: 0; height: 92%; aspect-ratio: 9 / 18.5; }
}
/* The pinned stages sit above the bottom blur band (still under the header),
   so their progress bars stay crisp. */
.js-scroll-steps .scroll-stage { z-index: 31; }

/* Fallback sheet for email links that didn't open a mail app. */
.mail-sheet {
  position: fixed; z-index: 70; left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 32px)); padding: 20px 20px 18px; border-radius: 22px;
  background: rgba(24, 24, 27, 0.9); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  text-align: center; opacity: 0; visibility: hidden; transform: translate(-50%, 16px);
  transition: opacity 0.3s var(--ease), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
}
.mail-sheet.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mail-sheet__x { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; background: none; color: var(--fg-3); font-size: 22px; line-height: 1; cursor: pointer; }
.mail-sheet__h { font-size: 13px; color: var(--fg-3); }
.mail-sheet__addr { margin-top: 6px; font-size: 18px; font-weight: 500; letter-spacing: -0.015em; color: var(--fg); user-select: all; word-break: break-all; }
.mail-sheet__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.mail-sheet__btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.08); color: var(--fg); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.mail-sheet__btn--pri { background: #0061db; }

/* Real screenshots keep their own shape instead of being cropped to the mock's. */
.mw.has-shot .shot-img { aspect-ratio: auto; height: auto; }
.mt.has-shot { aspect-ratio: auto; }
.mt.has-shot .shot-img { height: auto; }
.steps-seq--work .scroll-progress { grid-template-columns: repeat(3, 1fr); }

/* Real device frames (from the Vertical website) around real screenshots.
   Screen insets are the ones Vertical's PhoneMockup / iPadMockup use. */
.mp.has-shot {
  aspect-ratio: 500 / 1005 !important; padding: 0 !important; gap: 0; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.55));
}
.mp.has-shot .shot-img {
  position: absolute; left: 6.4%; top: 3.18%; width: 87.2%; height: 94.2%;
  border-radius: 12.8% / 5.9%; object-fit: cover; object-position: top center;
}
.mp.has-shot::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("frames/vertical-iphone.webp") center / 100% 100% no-repeat; }
.mt.has-shot {
  aspect-ratio: 2583 / 1863; padding: 0; border-radius: 0; max-width: none;
  background: none; box-shadow: none; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.55));
}
.mt.has-shot .shot-img {
  position: absolute; left: 3.87%; top: 5.37%; width: 92.45%; height: 89.53%;
  border-radius: 1.2%; object-fit: cover; object-position: top left;
}
.mt.has-shot::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("frames/vertical-ipad.webp") center / 100% 100% no-repeat; }
/* Vertical stage: let the tablets fill it. */
#vertical .stage-panel { padding: clamp(14px, 2vw, 26px); }
#vertical .mt { width: 100%; max-width: none; }
#vertical .mp--v { width: min(48%, 270px); }
/* Morso's glow in the brand blue. */
.shot--morso { --glow: rgba(0, 122, 255, 0.45); }
/* Give the Vertical stage more of the row and let the tablet run nearly edge to edge. */
@media (min-width: 901px) { #vertical .split { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 60px); } }
#top:not(.lbn) #vertical .split-stage { padding: clamp(14px, 1.6vw, 22px); }
#vertical .stage-panel { padding: 0; }
/* Morso's capture has no status bar: zoom it out inside the screen, clear of the
   Dynamic Island, on the app's own background so the edges read as its canvas. */
.shot--morso .mp.has-shot .shot-img {
  box-sizing: border-box; padding: 11% 3.5% 1.5%; object-fit: contain; object-position: center top;
  background: linear-gradient(#d9e3f9 0%, #e1e7f8 18%, #f1f1f8 50%, #f3f3f7 100%);
}

/* Vertical's web apps in a browser window. */
#vertical .mw--v { width: 100%; }
#vertical .mw--v .mt-screen { height: auto; min-height: 0; aspect-ratio: 16 / 10; border-radius: 0; }
#vertical .mw--v:not(.has-shot) .mw-body { display: flex; }

/* Closing CTA: two buttons side by side. */
.cta-panel__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn--ghost { background: rgba(255, 255, 255, 0.09); color: var(--fg); box-shadow: none; transition: background 0.2s var(--ease); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.15); }
/* The bottom blur steps aside once the footer is on screen, so it never smears it. */
body.at-footer .edge-scrim { opacity: 0 !important; }

/* Mobile only: desktop windows in the work showcase run full width (phones
   unchanged), and Vertical's device sits above its list. */
@media (max-width: 720px) {
  .js-scroll-steps .steps-seq--work .scroll-shot .mw { transform: none; max-width: none; }
  .js-scroll-steps .steps-seq--work .scroll-shots { left: 14px; right: 14px; }
  #vertical .split { gap: 22px; }
  #vertical .split-side { display: contents; }
  #vertical .vertical-logo { order: 0; }
  #vertical .split-stage { order: 1; min-height: 0; padding: 12px; border-radius: 24px; }
  #vertical .acc { order: 2; }
  #vertical .mp--v { width: 58%; }
}

/* Mobile: each Vertical step carries its own device, above its title when open;
   the shared stage is desktop-only. */
.acc-drop--media { display: none; }
@media (max-width: 720px) {
  #vertical .split-stage { display: none; }
  #vertical .acc-drop--media { display: grid; }
  #vertical .acc-media {
    display: grid; place-items: center; margin: 18px 0 2px; padding: 14px; border-radius: 22px;
    background: radial-gradient(80% 70% at 50% 30%, rgba(0, 122, 255, 0.22) 0%, rgba(0, 122, 255, 0.06) 45%, rgba(0, 122, 255, 0) 75%), var(--surface);
  }
  #vertical .acc-media .mp--v { width: 62%; }
  #vertical .acc-media .mt, #vertical .acc-media .mw--v { width: 100%; }
}

/* iOS Safari: run the pinned stage behind the bottom toolbar (large viewport)
   so there's no band under it; keep bars and shots above the toolbar.
   Phones/tablets only — desktop is untouched. */
@media (max-width: 900px) {
  @supports (height: 100lvh) {
    .js-scroll-steps .scroll-stage { height: 100lvh; }
    .js-scroll-steps .scroll-progress { bottom: calc(100lvh - 100svh + 24px); }
    .js-scroll-steps .steps-seq--work .scroll-shots { bottom: calc(100lvh - 100svh + 64px); }
  }
  /* The orb sits just below the tallest panel copy. */
  .js-scroll-steps .scroll-stage__frame[style*="--copy-max"] .scroll-orb {
    top: calc(var(--copy-max) + 28px - var(--orb) * 0.125); bottom: auto;
  }
}
@media (max-width: 720px) {
  @supports (height: 100lvh) {
    .js-scroll-steps .steps-seq--work .scroll-shots { bottom: calc(100lvh - 100svh + 52px); }
  }
}