/* =====================================================================
   Oltre one-page site
   Theme: light page, dark navy hero and demo blocks, teal accent (from the logo gradient).
   Shape rule: cards 20px, inputs 12px, buttons and chips full-pill.
   ===================================================================== */

:root {
  --navy: #092948;
  --navy-700: #0d3a63;
  --navy-600: #124a7b;
  --accent: #1577a8;
  --accent-strong: #0f6190;
  --accent-soft: #e4f1f8;
  --accent-tint: #f1f8fb;
  --ink: #0b1f33;
  --ink-2: #3f5468;
  --ink-3: #6b7d8f;
  --line: #d9e4ec;
  --line-2: #e9f0f5;
  --bg: #f6fafc;
  --surface: #ffffff;
  --surface-2: #f0f6f9;

  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  /* Masthead and hero: a high-contrast serif over a precise grotesque, and a
     wider, softer face kept for the wordmark alone (it has to hold at 365px). */
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-micro: "Instrument Sans", system-ui, sans-serif;
  --font-wordmark: "Marko One", Georgia, serif;

  --r-card: 20px;
  --r-input: 12px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(9, 41, 72, 0.06), 0 2px 8px rgba(9, 41, 72, 0.05);
  --shadow-md: 0 8px 24px rgba(9, 41, 72, 0.10), 0 2px 6px rgba(9, 41, 72, 0.05);
  --shadow-lg: 0 30px 80px rgba(9, 41, 72, 0.22), 0 10px 24px rgba(9, 41, 72, 0.10);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 72px;
  --container: 1280px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--ink); letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: 16px; top: -60px; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 12px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.section__head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.section__head .lead { margin-top: 18px; }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-strong); margin-bottom: 16px;
}
.eyebrow--light { color: #9bd4ea; }
.h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; font-weight: 600; }
.lead { font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.lead a { color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
[data-split] .w > span { display: inline-block; will-change: transform; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 14px 22px; border-radius: var(--r-pill); white-space: nowrap;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background-color 0.25s, color 0.25s, border-color 0.25s;
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn i { font-size: 18px; transition: transform 0.35s var(--ease-out); }
.btn:hover i.ph-arrow-right { transform: translateX(3px); }
.btn--primary {
  color: #fff; background: linear-gradient(135deg, #1b8fc4 0%, var(--accent) 60%, var(--navy-600) 100%);
  box-shadow: 0 10px 24px rgba(21, 119, 168, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.btn--primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform 0.9s var(--ease-out);
}
.btn--primary:hover { box-shadow: 0 14px 30px rgba(21, 119, 168, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.btn--primary:hover::after { transform: translateX(120%); }
.btn--glass { color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); }
.btn--glass:hover { background: rgba(255, 255, 255, 0.18); }
.btn--sm { padding: 11px 18px; font-size: 14px; }
.btn--lg { padding: 17px 28px; font-size: 16px; }
.btn--block { width: 100%; }

/* A micro-label: uppercase, tracked out, set small. Masthead links and hero eyebrows. */
.micro, .nav__links a, .nav__cta {
  font-family: var(--font-micro); font-size: 12px; line-height: 1; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* ---------- Nav (masthead) ----------
   Over the hero it is type on the ground: tracked micro links, one solid pill,
   and a soft wash that fades out rather than ending at a hard edge. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color 0.35s, box-shadow 0.35s, border-color 0.35s;
  border-bottom: 1px solid transparent;
}
.nav::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 132px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 20, 38, 0.62) 0%, rgba(4, 20, 38, 0.28) 46%, rgba(4, 20, 38, 0) 100%);
  transition: opacity 0.35s;
}
.nav.is-scrolled::before, .nav.is-open::before { opacity: 0; }
.nav__inner { padding: 0 48px; height: var(--nav-h); display: flex; align-items: center; gap: 24px; }
.nav__logo { position: relative; display: block; flex: 0 0 auto; height: 32px; width: 134px; }
.nav__logo img { position: absolute; inset: 0; height: 32px; width: auto; transition: opacity 0.3s; }
.nav__logo-dark { opacity: 0; }
.nav__logo-light { opacity: 1; }
.nav__links { flex: 1; display: flex; justify-content: center; gap: 44px; }
.nav__links a { padding: 10px 0; color: rgba(255, 255, 255, 0.66); transition: color 0.25s; }
.nav__links a:hover, .nav__links a.is-active { color: #fff; }
.nav__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.nav__cta {
  display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: var(--r-pill);
  letter-spacing: 0.12em; background: #f1f3f4; color: var(--navy); transition: background-color 0.3s, color 0.3s;
}
.nav__cta:hover { background: #fff; }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: var(--r-pill); flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.nav__burger span { width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.3s var(--ease-out), background-color 0.3s; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav__mobile { display: none; flex-direction: column; padding: 8px 24px 20px; background: rgba(246, 250, 252, 0.97); border-bottom: 1px solid var(--line); }
.nav__mobile a { padding: 14px 4px; font-weight: 600; font-size: 17px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.nav__mobile-cta { color: var(--accent-strong) !important; }
.nav.is-open .nav__mobile { display: flex; }
/* light state: after scrolling past the dark hero, or when the mobile menu is open */
.nav.is-scrolled, .nav.is-open { background: rgba(246, 250, 252, 0.82); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-color: var(--line-2); box-shadow: 0 6px 24px rgba(9, 41, 72, 0.06); }
.nav.is-scrolled .nav__logo-dark, .nav.is-open .nav__logo-dark { opacity: 1; }
.nav.is-scrolled .nav__logo-light, .nav.is-open .nav__logo-light { opacity: 0; }
.nav.is-scrolled .nav__links a { color: var(--ink-3); }
.nav.is-scrolled .nav__links a:hover, .nav.is-scrolled .nav__links a.is-active { color: var(--navy); }
.nav.is-scrolled .nav__cta, .nav.is-open .nav__cta { background: var(--navy); color: #fff; }
.nav.is-scrolled .nav__cta:hover, .nav.is-open .nav__cta:hover { background: var(--navy-600); }
.nav.is-scrolled .nav__burger span, .nav.is-open .nav__burger span { background: var(--navy); }

/* ---------- Hero (footage + artboard) ----------
   Not a flow layout. Two 1920x1080 boxes, with two scales that are not
   interchangeable (js/hero.js keeps both current):
     --hero-cover  max(w/1920, h/1080): the scene, centred, always fills the frame
     --hero-scale  w/1920: the UI artboard, width-locked, anchored top-left
   The frame is max(56.25vw, 100vh) tall, so on a window taller than 16:9 the
   footage carries on past the artboard instead of stopping at an edge.

   Ink follows the footage, not taste: a dark plate carries light type, a pale
   one wants dark type. The tokens below are one decision; for a pale clip add
   class="hero-pale" to <body> and all of them switch together. */
.hero {
  --hero-ink: #f3f7fa;
  --hero-ink-soft: rgba(243, 247, 250, 0.68);
  --hero-ink-body: rgba(243, 247, 250, 0.82);
  --hero-em: #9fdcf0;
  --hero-rule: rgba(243, 247, 250, 0.4);
  --hero-accent: #7fd1ea;   /* the light end of the logo gradient */
  --hero-scrim: 6, 28, 51;  /* rgb, so the scrim can ramp its own alpha */
  position: relative; overflow: hidden;
  height: max(calc(100vw * 1080 / 1920), 100vh);
  background: var(--navy); color: var(--hero-ink); font-family: var(--font-micro);
}
.hero-pale .hero {
  --hero-ink: #0b1f33;
  --hero-ink-soft: rgba(11, 31, 51, 0.62);
  --hero-ink-body: rgba(11, 31, 51, 0.74);
  --hero-em: #124a7b;
  --hero-rule: rgba(11, 31, 51, 0.3);
  --hero-accent: var(--navy);
  --hero-scrim: 246, 250, 252;
}
.hero-pale .hero__btn { color: #fff; }
.hero-pale .nav:not(.is-scrolled):not(.is-open)::before { background: linear-gradient(180deg, rgba(246, 250, 252, 0.72) 0%, rgba(246, 250, 252, 0.34) 46%, rgba(246, 250, 252, 0) 100%); }
.hero-pale .nav:not(.is-scrolled):not(.is-open) .nav__links a { color: rgba(11, 31, 51, 0.62); }
.hero-pale .nav:not(.is-scrolled):not(.is-open) .nav__links a:hover,
.hero-pale .nav:not(.is-scrolled):not(.is-open) .nav__links a.is-active { color: var(--navy); }
.hero-pale .nav:not(.is-scrolled):not(.is-open) .nav__cta { background: var(--navy); color: #fff; }
.hero-pale .nav:not(.is-scrolled):not(.is-open) .nav__logo-dark { opacity: 1; }
.hero-pale .nav:not(.is-scrolled):not(.is-open) .nav__logo-light { opacity: 0; }
.hero-pale .nav:not(.is-scrolled):not(.is-open) .nav__burger span { background: var(--navy); }

/* The scene: still, clip and wordmark share ONE coordinate system scaled to
   cover, so the swap from the clip's last frame to the still is invisible at
   any aspect ratio. */
.hero__scene {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--hero-cover, 1));
}
.hero__still, .hero__video, .hero__subject { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The still and the cutout are the clip's last frame, so they only show when
   that frame is what is on screen (see the hero states below). */
.hero__still, .hero__subject { opacity: 0; }
.hero__subject { transition: opacity 0.4s ease-in; }
.hero__backdrop { position: absolute; inset: 0; }
.hero__wordmark {
  position: absolute; left: 16px; top: 259px; width: 1888px; height: 255px;
  font-family: var(--font-wordmark); font-size: 365px; line-height: 365px; letter-spacing: -14.59px;
  text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* The artboard: every element sits at the coordinate it was designed at. */
.hero__stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 3;
  transform: scale(var(--hero-scale, 1)); transform-origin: top left;
}
.hero__stage > *, .hero__line { position: absolute; margin: 0; }
.hero__stage > .hero__title { position: static; font-weight: 400; }

/* Legibility scrim: a soft shadow behind the copy block and nothing more,
   fading out well before the subject. Oversized (-20%) because a background
   paints only inside its own box. The noise is a dither: a ramp this shallow
   quantises to 8-bit and the steps show as rings without it.
   Copy block x 60-900, y 530-970 in artboard px -> 23% x 25% at 32% 64%. */
.hero__scrim {
  inset: -20%; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 23% 25% at 32% 64%,
      rgba(var(--hero-scrim), 0.34) 0%, rgba(var(--hero-scrim), 0.3) 30%, rgba(var(--hero-scrim), 0.22) 50%,
      rgba(var(--hero-scrim), 0.11) 72%, rgba(var(--hero-scrim), 0.03) 88%, transparent 100%);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, 100% 100%;
}

.hero .micro { font-size: 13px; }
.hero__eyebrow { left: 80px; top: 546px; display: flex; align-items: center; gap: 12px; color: var(--hero-ink-soft); white-space: nowrap; }
.hero__tick { width: 22px; height: 1px; background: var(--hero-accent); }
.hero__line {
  left: 76px; width: 960px; white-space: nowrap;
  font-family: var(--font-serif); font-weight: 400; font-size: 88px; line-height: 92px; letter-spacing: -0.015em; color: var(--hero-ink);
}
.hero__line--1 { top: 578px; }
.hero__line--2 { top: 666px; }
.hero__line em { font-style: italic; color: var(--hero-em); }
.hero__lead { left: 80px; top: 790px; width: 540px; font-size: 19px; line-height: 30px; color: var(--hero-ink-body); }
.hero__cta { left: 80px; top: 912px; display: flex; align-items: center; gap: 28px; }
.hero__btn {
  display: inline-flex; align-items: center; height: 54px; padding: 0 28px; border-radius: var(--r-pill);
  background: var(--hero-accent); color: #061c33; font-size: 16px; font-weight: 600; line-height: 1;
  box-shadow: 0 14px 30px -14px rgba(127, 209, 234, 0.85);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.hero__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(127, 209, 234, 0.95); }
.hero__link { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 500; color: var(--hero-ink); }
.hero__link span { border-bottom: 1px solid var(--hero-rule); padding-bottom: 2px; transition: border-color 0.25s; }
.hero__link:hover span { border-color: var(--hero-ink); }
.hero__link svg { transition: transform 0.35s var(--ease-out); }
.hero__link:hover svg { transform: translate(2px, -2px); }

.hero__cards { left: 1284px; top: 593px; width: 556px; height: 360px; display: flex; gap: 24px; }
.hero__card { flex: 1; min-width: 0; }

/* Entrance, as the page loads: everything starts offset (some faded) and
   settles on its own timing. Pure CSS, so it needs no script and cannot wait
   on the clip. The two headline lines travel without a fade, from far enough
   out that they start fully off the left edge. */
@keyframes hero-in { from { transform: translate(var(--fx, 0), var(--fy, 0)); opacity: var(--fo, 1); } }
@keyframes hero-fade { from { opacity: 0; } }
.hero__reveal { animation: hero-in 0.9s var(--ease-out) calc(0.15s + var(--fd, 0s)) both; }
.hero__backdrop { animation: hero-fade 1.4s ease 0.3s both; }
.hero__eyebrow { --fx: -260px; --fo: 0; }
.hero__line--1 { --fx: -1100px; }
.hero__line--2 { --fx: -1000px; }
.hero__lead { --fx: -360px; --fo: 0; }
.hero__cta { --fx: -280px; --fo: 0; --fd: 0.06s; }
.hero__card:nth-child(1) { --fy: 240px; --fo: 0; }
.hero__card:nth-child(2) { --fy: 286px; --fo: 0; --fd: 0.08s; }

/* Hero states (js/hero.js):
     is-static   reduced motion, or the clip cannot play: the still stands in for it
     is-settled  play-once mode (no `loop`): the clip has stopped on its last frame
   Either way the last frame is on screen, so the cutout goes on and the wordmark
   sits behind the ship. While the clip loops, the wordmark sits over the footage. */
.hero.is-static .hero__video { visibility: hidden; }
.hero.is-static .hero__still { opacity: 1; }
.hero.is-static .hero__subject, .hero.is-settled .hero__subject { opacity: 1; }

/* ---------- Bookmark cards (hero and features) ----------
   A raised tab across the top right and a matching bite out of the bottom
   right, cut with one SVG mask. The path is precomputed (300 x 405.41 viewBox:
   aspect 0.74, tab 0.26, tail 0.685, notches 36/28, radius 0.088), so the tab
   is 36 / 405.41 = 8.88% of the height. The hover lift rides a damped spring
   sampled into linear(). Type is set in em off 5.4% of the card's width, so a
   card reads the same at any size. */
.cb-card {
  --cb-bg: #04182c;
  --cb-label: #eef5f9;
  --cb-headline: #eef5f9;
  --cb-headline-hover: #b9e9f7;
  --cb-statement: rgba(238, 245, 249, 0.55);
  --cb-statement-hover: #eef5f9;
  --cb-accent: #7fd1ea;
  --cb-dot: rgba(238, 245, 249, 0.16);
  --cb-glow: none;
  --cb-art: #0b3354;
  --cb-tab-h: 8.88%;
  --cb-dur: 620ms;
  --cb-zoom-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cb-slide-ease: var(--cb-ease);
  position: relative; display: block; width: 100%;
  transform: translate3d(0, 0, 0);
  /* drop-shadow reads the mask's alpha, so the shadow follows the tab and the bite */
  filter: drop-shadow(0 14px 28px rgba(2, 10, 22, 0.34));
  transition: transform var(--cb-dur) var(--cb-slide-ease), filter var(--cb-dur) var(--cb-ease);
  container-type: inline-size;
  font-family: var(--font-micro);
}
@supports (transition-timing-function: linear(0, 1)) {
  .cb-card { --cb-slide-ease: linear(0, 0.0203, 0.073, 0.1475, 0.2351, 0.3288, 0.4235, 0.5152, 0.6012, 0.6797, 0.7496, 0.8105, 0.8626, 0.906, 0.9415, 0.9698, 0.9918, 1.0082, 1.0199, 1.0277, 1.0324, 1.0345, 1.0348, 1.0336, 1.0315, 1.0287, 1.0256, 1.0223, 1.019, 1.0158, 1.0129, 1.0103, 1.008, 1.0059, 1.0042, 1.0028, 1.0017, 1.0008, 1.0001, 0.9996, 1); }
}
/* Two skins from the logo gradient. `glow` blooms in behind the artwork on
   hover; `art` is the drawn artwork (light rays off a top-left source) used
   wherever a card has no photograph. */
.cb-card--tide {
  --cb-glow: radial-gradient(125% 88% at 34% 14%, #3fb2d9 0%, #1577a8 34%, #0b3a63 66%, #031222 100%);
  --cb-art:
    repeating-conic-gradient(from 200deg at 16% 4%, rgba(255, 255, 255, 0.16) 0deg 0.9deg, transparent 0.9deg 3.2deg),
    radial-gradient(110% 120% at 16% 10%, #c9eef9 0%, #3fb2d9 24%, #1577a8 52%, #04121f 100%);
}
.cb-card--deep {
  --cb-accent: #4fb3dd;
  --cb-headline-hover: #9fdcf0;
  --cb-glow: radial-gradient(125% 88% at 32% 14%, #4d7ea6 0%, #124a7b 34%, #0a2742 66%, #020c17 100%);
  --cb-art:
    repeating-conic-gradient(from 196deg at 12% 2%, rgba(255, 255, 255, 0.14) 0deg 0.9deg, transparent 0.9deg 3.2deg),
    radial-gradient(110% 120% at 12% 8%, #a9c4da 0%, #4d7ea6 26%, #123a63 52%, #020c17 100%);
}
.cb-shape {
  position: relative; display: block; width: 100%; aspect-ratio: 0.74; overflow: hidden; background: var(--cb-bg);
  font-size: 5.4cqw;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 405.41' preserveAspectRatio='none'%3E%3Cpath d='M0 62.4A26.4 26.4 0 0 1 26.4 36H60A18 18 0 0 0 78 18A18 18 0 0 1 96 0H273.6A26.4 26.4 0 0 1 300 26.4V351.01A26.4 26.4 0 0 1 273.6 377.41H219.5A14 14 0 0 0 205.5 391.41A14 14 0 0 1 191.5 405.41H26.4A26.4 26.4 0 0 1 0 379.01Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 405.41' preserveAspectRatio='none'%3E%3Cpath d='M0 62.4A26.4 26.4 0 0 1 26.4 36H60A18 18 0 0 0 78 18A18 18 0 0 1 96 0H273.6A26.4 26.4 0 0 1 300 26.4V351.01A26.4 26.4 0 0 1 273.6 377.41H219.5A14 14 0 0 0 205.5 391.41A14 14 0 0 1 191.5 405.41H26.4A26.4 26.4 0 0 1 0 379.01Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
/* Colour bloom under the artwork, so the artwork dissolves into it on hover. */
.cb-glow { position: absolute; inset: 0; background: var(--cb-glow); opacity: 0; transition: opacity var(--cb-dur) var(--cb-ease); }
.cb-media {
  position: absolute; left: 4.6%; right: 4.6%; top: calc(var(--cb-tab-h) + 0.8em); height: 47.7%;
  overflow: hidden; border-radius: 0.72em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.cb-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.14) 26%, transparent 52%);
}
.cb-art {
  position: absolute; inset: 0; background: var(--cb-art); background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: scale(1); transform-origin: 46% 42%;
  transition: transform calc(var(--cb-dur) * 1.9) var(--cb-zoom-ease), opacity var(--cb-dur) var(--cb-ease);
}
/* An icon over the artwork, clear of the light source in the top left. It sits
   outside .cb-art so the hover zoom does not push it into the edge. */
.cb-icon {
  position: absolute; z-index: 1; top: 0.62em; right: 0.7em; font-size: 2.4em; color: #fff;
  transition: color var(--cb-dur) var(--cb-ease);
}
.cb-headline {
  position: absolute; z-index: 1; left: 1.2em; right: 1.2em; bottom: 2.1em; max-width: 15em; margin: 0;
  font-family: inherit; font-size: 0.95em; font-weight: 700; line-height: 1.32; letter-spacing: -0.012em; text-wrap: balance;
  color: var(--cb-headline); transition: color var(--cb-dur) var(--cb-ease);
}
/* First in the markup so it is read first; the z-index keeps it above the glow. */
.cb-label {
  position: absolute; z-index: 1; inset: 0 0 auto auto; display: flex; align-items: center; height: var(--cb-tab-h);
  padding: 0.45em 1.4em 0; font-size: 0.82em; font-weight: 700; letter-spacing: -0.01em; color: var(--cb-label); white-space: nowrap;
}
.cb-foot { position: absolute; inset: auto auto 0 0; display: flex; flex-direction: column; padding: 0 4.6% 1.85em; }
.cb-statement {
  font-size: 3.05em; font-weight: 400; line-height: 1.08; letter-spacing: -0.042em;
  color: var(--cb-statement); transition: color var(--cb-dur) var(--cb-ease);
}
.cb-dots { display: flex; gap: 0.4em; margin-top: 2.35em; }
.cb-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--cb-dot); transition: background var(--cb-dur) var(--cb-ease); }
.cb-dot.is-on { background: var(--cb-accent); }
/* Body copy in the foot, in place of the statement (feature cards). */
.cb-text {
  margin: 0; font-size: 0.76em; line-height: 1.55;
  color: var(--cb-statement); transition: color var(--cb-dur) var(--cb-ease);
}

/* Feature cards: the same silhouette at aspect 0.8 (viewBox 300 x 375, tab
   36 / 375 = 9.6% of the height, bite 28 / 375 = 7.47%), short enough that the
   copy has no dead band. The copy hangs a fixed gap under the artwork; at four
   lines, the longest, it ends 0.08 of the width above the bite. */
/* A tighter shadow than the hero's: it has to fade out inside the slider's
   24px frame padding (blur 16-22px), or the scroll box clips it to a hard edge. */
.fcard .cb-card { --cb-tab-h: 9.6%; filter: drop-shadow(0 10px 16px rgba(2, 10, 22, 0.22)); }
.fcard .cb-card:hover { filter: drop-shadow(0 18px 22px rgba(2, 10, 22, 0.3)); }
.fcard .cb-shape {
  aspect-ratio: 0.8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 375' preserveAspectRatio='none'%3E%3Cpath d='M0 62.4A26.4 26.4 0 0 1 26.4 36H60A18 18 0 0 0 78 18A18 18 0 0 1 96 0H273.6A26.4 26.4 0 0 1 300 26.4V320.6A26.4 26.4 0 0 1 273.6 347H219.5A14 14 0 0 0 205.5 361A14 14 0 0 1 191.5 375H26.4A26.4 26.4 0 0 1 0 348.6Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 375' preserveAspectRatio='none'%3E%3Cpath d='M0 62.4A26.4 26.4 0 0 1 26.4 36H60A18 18 0 0 0 78 18A18 18 0 0 1 96 0H273.6A26.4 26.4 0 0 1 300 26.4V320.6A26.4 26.4 0 0 1 273.6 347H219.5A14 14 0 0 0 205.5 361A14 14 0 0 1 191.5 375H26.4A26.4 26.4 0 0 1 0 348.6Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.fcard .cb-foot { inset: calc(var(--cb-tab-h) + 0.8em + 47.7% + 1.1em) 0 auto 0; padding: 0 6% 0 4.6%; }
.cb-card:hover { transform: translate3d(0, -6px, 0); filter: drop-shadow(0 26px 44px rgba(2, 10, 22, 0.44)); }
.cb-card:hover .cb-glow { opacity: 1; }
.cb-card:hover .cb-art { opacity: 0.5; transform: scale(1.28); }
.cb-card:hover .cb-headline, .cb-card:hover .cb-icon { color: var(--cb-headline-hover); }
.cb-card:hover .cb-statement, .cb-card:hover .cb-text { color: var(--cb-statement-hover); }

/* ---------- Problems ---------- */
.problems__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.problems__intro { position: sticky; top: calc(var(--nav-h) + 40px); }
.problems__intro .lead { margin-top: 18px; }
.problems__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.spot-card {
  --mx: 50%; --my: 50%;
  position: relative; padding: 26px 24px 28px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line-2);
  overflow: hidden; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.spot-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(21, 119, 168, 0.12), transparent 55%);
}
.spot-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.spot-card:hover::before { opacity: 1; }
.spot-card > i { font-size: 30px; color: var(--accent); margin-bottom: 16px; display: block; }
.spot-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.spot-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

/* ---------- Features slider ---------- */
.features { background: var(--surface); overflow: hidden; }
.features__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.features__head .section__head { margin-bottom: 0; }
.slider__controls { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding-bottom: 6px; }
.slider__count { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink-3); margin-right: 8px; font-variant-numeric: tabular-nums; }
.slider__btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--navy); font-size: 18px;
  display: grid; place-items: center; transition: background-color 0.25s, color 0.25s, transform 0.3s var(--ease-out), border-color 0.25s;
}
.slider__btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-2px); }
.slider__btn:disabled { opacity: 0.35; pointer-events: none; }
.slider { margin-top: clamp(32px, 4vw, 52px); }
/* The frame is the container: --per whole cards fill its content width, and
   the inline padding equals the gap, so on a snapped page the neighbours sit
   just outside the frame. Snap points fall only on the first card of each page,
   so the slider moves a page at a time. Vertical padding leaves room for the
   card's hover lift and drop shadow, which an overflow-x track would clip. */
.slider__track {
  --per: 3; --gap: 24px;
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  max-width: var(--container); margin: 0 auto;
  padding: 14px var(--gap) 56px;
  scroll-padding-inline: var(--gap);
  cursor: grab; -webkit-overflow-scrolling: touch;
  /* fade the padding zone, so shadow tails thin out to nothing instead of stopping at the frame */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gap), #000 calc(100% - var(--gap)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--gap), #000 calc(100% - var(--gap)), transparent);
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.slider__track.is-dragging .fcard { pointer-events: none; }
/* Each slide is a plain wrapper, so the entrance (GSAP, on .fcard) and the
   card's own hover lift (CSS, on .cb-card) never fight over one transform. */
.fcard { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align: none; user-select: none; }
.fcard:nth-child(3n + 1) { scroll-snap-align: start; scroll-snap-stop: always; }
@media (max-width: 1023px) {
  .slider__track { --per: 2; }
  .fcard:nth-child(n) { scroll-snap-align: none; }
  .fcard:nth-child(2n + 1) { scroll-snap-align: start; scroll-snap-stop: always; }
}
@media (max-width: 640px) {
  .slider__track { --per: 1; --gap: 16px; }
  .fcard:nth-child(n) { scroll-snap-align: start; }
}

/* ---------- How it works ---------- */
.how__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.how__sticky { position: sticky; top: calc(var(--nav-h) + 48px); }
.how__counter { display: flex; align-items: baseline; gap: 10px; margin-top: 40px; font-family: var(--font-display); }
.how__num { font-size: clamp(72px, 9vw, 120px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--navy); font-variant-numeric: tabular-nums; }
.how__of { font-size: 22px; color: var(--ink-3); font-weight: 500; }
.how__progress { height: 4px; border-radius: 4px; background: var(--line); margin: 24px 0 28px; max-width: 320px; overflow: hidden; }
.how__progress span { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--accent), var(--navy-600)); border-radius: 4px; transition: width 0.6s var(--ease-out); }
.how__note { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); max-width: 40ch; }
.how__note i { color: var(--accent); font-size: 18px; margin-top: 3px; }
.how__steps { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.step {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; align-items: start;
  padding: 28px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line-2);
  transition: border-color 0.5s, box-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.step.is-active { border-color: #bcd8e8; box-shadow: var(--shadow-md); transform: translateX(6px); }
.step__icon {
  width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; background: var(--accent-tint); border: 1px solid #d6e7f0;
  color: var(--accent); font-size: 30px;
  transition: transform 0.5s var(--ease-out), background 0.5s, color 0.5s, border-color 0.5s;
}
.step.is-active .step__icon { background: linear-gradient(135deg, var(--accent), var(--navy-600)); color: #fff; border-color: transparent; transform: scale(1.06); }
.step__label { display: block; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 6px; }
.step h3 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; margin-bottom: 8px; }
.step p { font-size: 15.5px; color: var(--ink-2); max-width: 52ch; }

/* ---------- Product tour tabs ---------- */
.tour { background: var(--surface); }
.tabs__list {
  position: relative; display: flex; gap: 4px; padding: 6px; margin: 0 auto 28px; width: max-content; max-width: 100%;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-pill); overflow-x: auto; scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; transition: color 0.3s;
}
.tabs__tab i { font-size: 17px; }
.tabs__tab.is-active { color: var(--navy); }
.tabs__indicator { position: absolute; top: 6px; left: 0; height: calc(100% - 12px); width: 0; border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-sm); z-index: 0; transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out); }
.browser { border-radius: var(--r-card); overflow: hidden; background: #0b2238; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,0.08); }
.browser__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: linear-gradient(180deg, #16314d, #0f2a45); }
.browser__bar > span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.browser__url { margin-left: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 8px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); font-size: 12.5px; font-family: var(--font-display); letter-spacing: 0.02em; }
.browser__viewport { position: relative; aspect-ratio: 1920 / 1018; background: #0b2238; }
.tabs__panel { position: absolute; inset: 0; }
.tabs__panel[hidden] { display: none; }
.tabs__panel img { width: 100%; height: 100%; object-fit: cover; }
.tabs__caption { text-align: center; margin-top: 22px; color: var(--ink-2); font-size: 15.5px; }

/* ---------- Versions: bookmark cards with content height ----------
   The feature-card silhouette, but these cards grow with their copy, so the
   mask is cut at each card's real size by main.js: a fixed 40px tab across
   the top right and a 30px bite out of the bottom right, so corners stay round
   at any width. Without script they keep a plain rounded card. Type is set in
   px here rather than off the card's width, since the cards are wide.
   The article is a plain wrapper: the scroll entrance (GSAP) moves it, the
   card inside lifts on hover, and the two never fight over one transform. */
.versions__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 20px; }
.vcard { display: flex; }
.vcard--featured { grid-row: span 2; }
.vcard > .cb-card { --cb-tab-h: 40px; flex: 1; display: flex; }
.vcard .cb-shape {
  aspect-ratio: auto; flex: 1; display: flex; flex-direction: column; font-size: 16px; border-radius: 20px;
  padding: calc(var(--cb-tab-h) + 12px) 22px 52px; -webkit-mask-image: none; mask-image: none;
}
.vcard .cb-label { padding: 2px 22px 0; font-size: 13px; }
.vcard .cb-media { position: relative; left: auto; right: auto; top: auto; flex: none; height: 150px; border-radius: 14px; }
/* the featured card is as tall as the two beside it, so its artwork takes up the slack */
.vcard--featured .cb-media { flex: 1; height: auto; min-height: 220px; }
.vcard .cb-headline { left: 18px; right: 18px; bottom: 16px; max-width: none; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.vcard--featured .cb-headline { font-size: 30px; }
.vcard .cb-icon { top: 14px; right: 16px; font-size: 34px; }
/* positioned, so it paints above the hover glow like the feature cards' absolute foot */
.vcard__body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.vcard--featured .vcard__body { flex: none; }
.vcard__for { font-size: 15px; font-weight: 600; color: var(--cb-accent); }
.vcard .cb-text { font-size: 15px; line-height: 1.6; color: rgba(238, 245, 249, 0.7); }
.vcard__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 8px 0 18px; }
.vcard__list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: #e6f3f8; }
.vcard__list li i { width: 22px; height: 22px; display: grid; place-items: center; flex: none; border-radius: 50%; font-size: 12px; color: var(--cb-accent); background: rgba(127, 209, 234, 0.16); }
.vcard__platform {
  margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 13.5px; color: rgba(238, 245, 249, 0.75);
}
.vcard__platform i { font-size: 22px; color: var(--cb-accent); flex: none; }

/* ---------- Who it's for (dark) ----------
   Grouped by where people work: the Master on board, the four shore roles
   beside. Glass panels on navy with hairline edges, role names in the site's
   display face, and a soft light that follows the pointer (main.js sets --mx/--my).
   Icons sit in their own badge span: a duotone icon's two layers come apart if
   the icon element itself is made a grid or flex box. */
.who {
  color: #fff; overflow: hidden;
  background:
    radial-gradient(55% 60% at 0% 0%, rgba(21, 119, 168, 0.3), transparent 62%),
    radial-gradient(45% 55% at 100% 100%, rgba(127, 209, 234, 0.12), transparent 62%),
    linear-gradient(180deg, #061c33 0%, var(--navy) 100%);
}
.who .h2 { color: #fff; }
.who__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; margin-bottom: clamp(36px, 4vw, 56px); }
.who__head .section__head { margin-bottom: 0; }
.who__head .lead { justify-self: end; max-width: 40ch; color: rgba(230, 243, 248, 0.72); }
.who__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: stretch; }
.who__col { display: flex; flex-direction: column; gap: 14px; }
.who__label { display: inline-flex; align-items: center; gap: 10px; color: #7fd1ea; }
.who__label::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.who-card {
  --mx: 50%; --my: 50%;
  position: relative; display: flex; flex-direction: column; padding: 26px; overflow: hidden; border-radius: var(--r-card);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.4s, transform 0.45s var(--ease-out);
}
.who-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(127, 209, 234, 0.16), transparent 60%);
}
.who-card:hover { transform: translateY(-3px); border-color: rgba(127, 209, 234, 0.35); }
.who-card:hover::before { opacity: 1; }
.who__icon {
  width: 46px; height: 46px; display: grid; place-items: center; flex: none; margin-bottom: 20px; border-radius: 14px;
  font-size: 22px; color: #7fd1ea; background: rgba(127, 209, 234, 0.1); border: 1px solid rgba(127, 209, 234, 0.22);
  transition: background-color 0.35s, color 0.35s;
}
.who-card:hover .who__icon { color: var(--navy); background: #7fd1ea; }
.who-card h3 { margin-bottom: 8px; font-family: var(--font-display); font-weight: 600; font-size: 23px; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.who-card p { font-size: 15px; line-height: 1.6; color: rgba(230, 243, 248, 0.7); }
.who-card--ship { flex: 1; padding: 32px; background: linear-gradient(165deg, rgba(21, 119, 168, 0.32), rgba(255, 255, 255, 0.03) 62%); border-color: rgba(127, 209, 234, 0.24); }
.who-card--ship .who__icon { width: 60px; height: 60px; font-size: 30px; border-radius: 18px; margin-bottom: 28px; }
.who-card--ship h3 { margin-bottom: 12px; font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; }
.who-card--ship > p { max-width: 34ch; margin-bottom: 28px; font-size: 16.5px; }
.who__crew { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.who__crew p { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: rgba(230, 243, 248, 0.82); }
.who__crew p i { margin-top: 3px; font-size: 18px; color: #7fd1ea; }
.who__ranks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.who__ranks li { padding: 6px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; color: #e6f3f8; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); }
.who__cards { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* ---------- Benefits (sticky stack) ---------- */
.benefits { background: var(--bg); }
.stack { position: relative; display: flex; flex-direction: column; gap: 24px; padding-bottom: 8vh; }
.stack__card {
  position: sticky; top: calc(var(--nav-h) + 24px + var(--i) * 16px);
  display: grid; grid-template-columns: 1fr minmax(0, 3fr); gap: 32px; align-items: end;
  min-height: 340px; padding: 36px 40px; border-radius: 24px;
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-md);
  transform-origin: top center; will-change: transform;
}
.stack__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 8vw, 112px); line-height: 0.9; letter-spacing: -0.04em; color: var(--line); align-self: start; }
.stack__body i { font-size: 36px; color: var(--accent); margin-bottom: 18px; display: block; }
.stack__body h3 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; margin-bottom: 12px; }
.stack__body p { font-size: clamp(16px, 1.2vw, 18px); color: var(--ink-2); max-width: 46ch; }
.stack__card--navy { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-700) 100%); border-color: transparent; }
.stack__card--navy .stack__num { color: rgba(255,255,255,0.14); }
.stack__card--navy .stack__body i { color: #7fd1ea; }
.stack__card--navy .stack__body h3 { color: #fff; }
.stack__card--navy .stack__body p { color: rgba(255,255,255,0.8); }
.stack__card--teal { background: linear-gradient(160deg, #1b8fc4 0%, var(--accent) 100%); border-color: transparent; }
.stack__card--teal .stack__num { color: rgba(255,255,255,0.2); }
.stack__card--teal .stack__body i { color: #fff; }
.stack__card--teal .stack__body h3 { color: #fff; }
.stack__card--teal .stack__body p { color: rgba(255,255,255,0.88); }

/* ---------- About ---------- */
.about { background: var(--surface); }
.about__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.about__photo { margin: 0; position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 5 / 6; box-shadow: var(--shadow-lg); background: var(--navy); }
/* 20% spare height, split above and below: the scroll parallax moves it ±8% of its own height (±9.6% of the frame) */
.about__photo img { position: relative; top: -10%; width: 100%; height: 120%; object-fit: cover; object-position: 50% 50%; will-change: transform; }
.about__photo figcaption {
  position: absolute; left: 20px; right: 20px; bottom: 20px; padding: 14px 18px; border-radius: 14px;
  background: rgba(9, 41, 72, 0.55); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 15px;
}
.about__copy .lead { margin: 18px 0 14px; }
.about__copy > p:not(.lead) { color: var(--ink-2); font-size: 16px; max-width: 60ch; }
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
.founder { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; background: var(--bg); border: 1px dashed var(--line); }
.founder__avatar { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 24px; }
.founder h3 { font-size: 16px; font-weight: 600; }
.founder h3 small { font-weight: 500; color: var(--ink-3); font-family: var(--font-body); font-size: 12px; }
.founder p { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq__intro { position: sticky; top: calc(var(--nav-h) + 40px); }
.faq__intro .lead { margin-top: 18px; }
.accordion { display: flex; flex-direction: column; gap: 10px; }
.accordion__item { border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; }
.accordion__item[open] { border-color: #cfe0ea; box-shadow: var(--shadow-sm); }
.accordion__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--navy);
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: 14px; transition: transform 0.4s var(--ease-out), background-color 0.3s, color 0.3s; }
.accordion__item[open] summary i { transform: rotate(45deg); background: var(--accent); color: #fff; }
.accordion__body { padding: 0 22px 22px; }
.accordion__body p { font-size: 15.5px; color: var(--ink-2); max-width: 64ch; }

/* ---------- Demo ---------- */
.demo { background: var(--navy); color: #fff; overflow: hidden; }
.demo__bg { position: absolute; inset: 0; }
.demo__bg img { width: 100%; height: 125%; object-fit: cover; object-position: center 30%; opacity: 0.28; will-change: transform; }
.demo__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,41,72,0.92) 0%, rgba(9,41,72,0.7) 55%, rgba(9,41,72,0.55) 100%); }
.demo__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.demo .h2 { color: #fff; }
.demo .lead { color: rgba(255,255,255,0.8); margin-top: 18px; }
.demo__points { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.demo__points li { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 15px; color: #e6f3f8; }
.demo__points li i { color: #8fd3e8; font-size: 20px; }
.demo__alt { margin-top: 28px; font-size: 14.5px; color: rgba(255,255,255,0.65); }
.demo__alt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.form { position: relative; background: var(--surface); color: var(--ink); border-radius: var(--r-card); padding: 32px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--navy); }
.field .opt { color: var(--ink-3); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--r-input); border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(21, 119, 168, 0.14); }
.field textarea { resize: vertical; min-height: 84px; }
.field__error { display: none; font-size: 12.5px; color: #b42318; }
.field.is-invalid .field__error { display: block; }
.field.is-invalid input, .field.is-invalid select { border-color: #d92d20; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check { position: relative; }
.check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.check span { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg); font-weight: 600; font-size: 14px; color: var(--ink-2); transition: all 0.25s; }
.check input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.check input:focus-visible + span { box-shadow: 0 0 0 4px rgba(21, 119, 168, 0.2); }
.form__fine { font-size: 12.5px; color: var(--ink-3); text-align: center; }
.form__success { position: absolute; inset: 0; border-radius: inherit; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; gap: 10px; }
.form__success[hidden] { display: none; }
.form__success i { font-size: 64px; color: var(--accent); margin-bottom: 8px; }
.form__success h3 { font-size: 22px; max-width: 24ch; }
.form__success p { color: var(--ink-2); }
.form.is-sending #demoSubmit { opacity: 0.7; pointer-events: none; }

/* ---------- Footer ---------- */
.footer { background: #061c33; color: rgba(255,255,255,0.72); padding: 64px 0 32px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer__brand img { height: 36px; width: auto; margin-bottom: 14px; }
.footer__brand p { font-family: var(--font-display); color: #fff; font-weight: 500; }
.footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; align-content: start; }
.footer__links a { font-size: 14.5px; transition: color 0.25s; }
.footer__links a:hover { color: #fff; }
.footer__contact p { font-size: 14.5px; line-height: 1.7; }
.footer__contact p + p { margin-top: 12px; }
.footer__contact strong { color: #fff; }
.footer__bottom { padding-top: 24px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.55); }
.footer__legal { max-width: 90ch; line-height: 1.6; }

/* ---------- Reveal defaults (JS adds motion; without JS everything is visible) ---------- */
.js [data-stagger] > * { opacity: 0; transform: translateY(28px); }
.js .section__head, .js .problems__intro, .js .faq__intro, .js .about__copy, .js .demo__copy, .js .form, .js .about__photo, .js .browser, .js .tabs__list, .js .slider, .js .who__head .lead, .js .slider__controls { opacity: 0; transform: translateY(24px); }

/* ---------- Responsive ---------- */
/* Below 1100px the width-locked artboard would set the copy too small to read,
   so the hero drops into a stacked column over the same footage. The scene stops
   scaling and simply covers the frame; the wordmark moves to the top. */
@media (max-width: 1099px) {
  .hero {
    height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
    padding: calc(var(--nav-h) + 23vw) 0 48px;
  }
  .hero__scene { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
  .hero__wordmark { left: 0; top: calc(var(--nav-h) + 6px); width: 100%; height: 18vw; font-size: 24vw; line-height: 24vw; letter-spacing: -0.04em; }
  .hero__stage { position: static; width: auto; height: auto; transform: none; display: flex; flex-direction: column; padding: 0 24px; max-width: 760px; }
  .hero__stage > *, .hero__line { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .hero__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(var(--hero-scrim), 0.05) 0%, rgba(var(--hero-scrim), 0.5) 42%, rgba(var(--hero-scrim), 0.88) 100%);
  }
  .hero__eyebrow { margin-bottom: 18px; white-space: normal; }
  .hero__title { margin-bottom: 20px; }
  .hero__line { display: block; white-space: normal; font-size: clamp(44px, 8.6vw, 80px); line-height: 1.04; }
  .hero__lead { max-width: 54ch; font-size: 17px; line-height: 1.6; margin-bottom: 28px; }
  .hero__cta { flex-wrap: wrap; gap: 14px 28px; margin-bottom: 40px; }
  .hero__cards { max-width: 560px; }
}
@media (max-width: 960px) {
  .nav__inner { padding: 0 24px; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .problems__grid, .how__grid, .about__grid, .faq__grid, .demo__grid, .who__head { grid-template-columns: 1fr; }
  .problems__intro, .faq__intro, .how__sticky { position: static; }
  .how__counter, .how__progress { display: none; }
  .features__head { flex-direction: column; align-items: flex-start; }
  .versions__grid { grid-template-columns: 1fr; }
  .vcard--featured { grid-row: auto; }
  .who__head .lead { justify-self: start; }
  .who__grid { grid-template-columns: 1fr; }
  .stack__card { grid-template-columns: 1fr; gap: 12px; min-height: 0; padding: 28px; }
  .stack__num { font-size: 48px; }
  .about__photo { max-width: 560px; aspect-ratio: 4 / 3; }
  .footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .nav__inner { padding: 0 16px; }
  .section { padding: 64px 0; }
  .hero__stage { padding: 0 16px; }
  .hero__line { font-size: clamp(40px, 11vw, 52px); }
  .hero__cards { margin: 0 -16px; padding: 0 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hero__cards::-webkit-scrollbar { display: none; }
  .hero__card { flex: 0 0 228px; scroll-snap-align: start; }
  .problems__list { grid-template-columns: 1fr; }
  .step { grid-template-columns: 56px 1fr; gap: 16px; padding: 22px; }
  .step__icon { width: 56px; height: 56px; font-size: 24px; border-radius: 16px; }
  .step.is-active { transform: none; }
  .tabs__list { width: 100%; justify-content: flex-start; }
  .who__cards { grid-template-columns: 1fr; }
  .who-card--ship h3 { font-size: 36px; }
  .founders { grid-template-columns: 1fr; }
  .vcard .cb-shape { padding-left: 18px; padding-right: 18px; }
  .vcard .cb-media { height: 130px; }
  .vcard--featured .cb-media { min-height: 170px; }
  .vcard__list { grid-template-columns: 1fr; }
  .form { padding: 22px; }
  .form__row { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js [data-stagger] > *, .js .section__head, .js .problems__intro, .js .faq__intro, .js .about__copy, .js .demo__copy, .js .form, .js .about__photo, .js .browser, .js .tabs__list, .js .slider, .js .who__head .lead, .js .slider__controls { opacity: 1; transform: none; }
  .stack__card { position: relative; top: auto; }
}