/* ============================================================
   SOLUTION 86 — LANDING
   Ink & paper, with one charge of cyan.
   System: soft elevation (no strokes) · 0px radius · flush left · air
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family:'General Sans'; src:url('../assets/fonts/GeneralSans-Variable.woff2') format('woff2'), url('../assets/fonts/GeneralSans-Variable.woff') format('woff'); font-weight:200 700; font-style:normal; font-display:swap; }
@font-face { font-family:'Panchang'; src:url('../assets/fonts/Panchang-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Cabinet Grotesk'; src:url('../assets/fonts/CabinetGrotesk-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Cabinet Grotesk'; src:url('../assets/fonts/CabinetGrotesk-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Cabinet Grotesk'; src:url('../assets/fonts/CabinetGrotesk-Extrabold.otf') format('opentype'); font-weight:800; font-display:swap; }
@font-face { font-family:'Recia'; src:url('../assets/fonts/Recia-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Recia'; src:url('../assets/fonts/Recia-Medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Recia'; src:url('../assets/fonts/Recia-Italic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Recia'; src:url('../assets/fonts/Recia-MediumItalic.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --ink:    #000000;
  --paper:  #ffffff;
  --cyan:   #23e0fc;
  --mist:   #e6e6e6;
  --grey:   #8a8a8a;
  --body-c: #3a3a3a;

  --rule: 2px;
  --margin: clamp(20px, 5vw, 64px);
  --gap: 2px;
  --tile-gap: clamp(10px, 1.1vw, 16px);

  /* Frosted-glass surface tokens (no shadows anywhere) — cool tint so panels
     read on white yet stay glassy over the ambient cyan wash */
  --glass:        rgba(226,234,244,.62);
  --glass-strong: rgba(235,241,249,.82);
  --glass-line:   rgba(255,255,255,.75);
  --panel:        #eef1f6;

  --font-display: 'Panchang', 'Cabinet Grotesk', sans-serif;
  --font-sans: 'Cabinet Grotesk', 'Helvetica Neue', Arial, sans-serif; /* headings + body (original) */
  --font-ui: 'General Sans', 'Helvetica Neue', Arial, sans-serif;       /* nav · buttons · links · lists · FAQ · footer */
  --font-serif: 'Recia', Georgia, serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; background:var(--paper); }
body {
  font-family:var(--font-sans);
  font-size:16px; line-height:1.6; color:var(--ink);
  background:transparent;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Faint cyan wash behind everything — gives the frosted-glass surfaces something to refract */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58vw 58vw at 88% 6%,  rgba(35,224,252,.16), transparent 60%),
    radial-gradient(52vw 52vw at 4% 52%,  rgba(35,224,252,.11), transparent 58%),
    radial-gradient(46vw 46vw at 96% 82%, rgba(35,224,252,.10), transparent 60%);
}
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection { background:rgba(35,224,252,.5); color:var(--ink); }
:focus-visible { outline:3px solid var(--cyan); outline-offset:2px; }

.container { padding-inline:var(--margin); max-width:1680px; margin-inline:auto; }

/* ---------- Type utilities ---------- */
.meta {
  font-weight:700; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase;
}
.meta--cyan { color:#0aa8c4; }
.meta--serif { font-family:var(--font-serif); font-weight:400; font-size:12.5px; letter-spacing:.06em; text-transform:none; color:var(--grey); }
.body { font-size:16px; line-height:1.62; color:var(--body-c); max-width:46ch; }

.h2 {
  font-family:var(--font-sans); font-weight:800;
  font-size:clamp(32px, 4.2vw, 58px);
  line-height:1.02; letter-spacing:-.02em;
}
.h2 em { font-style:normal; color:#0aa8c4; }

/* ---------- Meta rows (labels only — the dividing rules are gone) ---------- */
.rule-b, .rule-t { border:0; }

.meta-row {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding-bottom:6px;
}
.rule-t.meta-row { padding-top:6px; }

.section { padding-block:clamp(72px, 10vw, 160px) 0; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:12px; white-space:nowrap; text-align:center;
  font-family:var(--font-ui); font-weight:600; font-size:15px;
  letter-spacing:-.01em; text-transform:none;
  padding:16px 28px; border:0;
  background:var(--ink); color:var(--paper);
  transition:background .22s ease, color .22s ease;
  cursor:pointer;
}
.btn span { transition:transform .22s ease; }
.btn:hover { background:var(--cyan); color:var(--ink); }
.btn:hover span { transform:translateX(4px); }
.btn--lg { padding:20px 36px; font-size:17px; }
/* secondary: solid soft fill instead of an outline stroke */
.btn--outline { background:rgba(15,18,25,.07); color:var(--ink); }
.btn--outline:hover { background:var(--ink); color:var(--paper); }
.btn--cyan { background:var(--cyan); color:var(--ink); }
.btn--cyan:hover { background:var(--paper); }

.link-arrow {
  font-family:var(--font-ui); font-weight:600; font-size:16px; letter-spacing:-.01em;
}
.link-arrow:hover { color:#0aa8c4; }

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  transition:background .35s ease, backdrop-filter .35s ease;
}
.site-header.is-scrolled {
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(26px) saturate(1.6); backdrop-filter:blur(26px) saturate(1.6);
}
.header-inner {
  display:flex; align-items:center; gap:32px;
  padding:18px var(--margin);
  max-width:1680px; margin-inline:auto;
}
.brand { display:flex; align-items:center; gap:12px; flex:none; }
.brand-mark { width:30px; height:auto; }
.brand-word { height:15px; width:auto; }
.site-nav { display:flex; gap:clamp(18px, 2.4vw, 34px); margin-left:auto; }
.site-nav a {
  font-family:var(--font-ui); font-weight:600; font-size:16px;
  letter-spacing:-.01em; text-transform:none;
  position:relative; padding-bottom:4px; white-space:nowrap;
}
.site-nav a::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--cyan); transition:width .25s ease;
}
.site-nav a:hover::after { width:100%; }
.site-header .btn { padding:12px 20px; }

/* ---------- Hero ---------- */
.hero { padding-top:clamp(28px, 4vw, 56px); padding-bottom:clamp(48px, 6vw, 96px); }
/* desktop: reserve height so the right-anchored phones always fit above the next
   section, with comfortable breathing room below them */
@media (min-width: 821px) {
  .hero { min-height:clamp(600px, calc(48vw + 120px), 880px); overflow:hidden; }
}
.hero-title {
  font-family:var(--font-display); font-weight:700;
  /* longest line "Suppliers." ≈ 6.9em wide in Panchang → always one line */
  font-size:min(calc((100vw - 2 * var(--margin)) / 7.5), 168px);
  line-height:.96; letter-spacing:-.015em;
  text-transform:none;
  padding-block:clamp(28px, 4vw, 56px) clamp(24px, 3vw, 44px);
}
.hero-title .line { display:block; white-space:nowrap; }
.hero-title .cyan { font-style:normal; color:var(--cyan); }

/* Two-column hero (desktop): size the title to the LEFT column so the phones
   sit clear on the right — matches the intended composition, no overlap. */
@media (min-width: 821px) {
  .hero-title { font-size:min(calc((100vw - 2 * var(--margin)) * 0.47 / 7.6), 118px); }
}

.hero-foot {
  /* left column: sub + CTA together — the whole right half stays free for the phones */
  display:flex; flex-direction:column; align-items:flex-start;
  gap:26px; padding-bottom:clamp(32px, 4vw, 56px);
  max-width:620px;
}
.hero-sub { font-size:clamp(16px,1.4vw,19px); line-height:1.6; color:var(--body-c); max-width:44ch; }
.hero-cta { display:flex; align-items:center; gap:32px; flex-wrap:wrap; }

/* ---------- Photo grids (floating tiles, lifted by shadow) ---------- */
.photo-grid {
  display:grid; gap:var(--tile-gap);
  background:none; border:0;
}
.ph {
  position:relative; overflow:hidden; background:var(--mist); min-height:0;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.ph img {
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.08);
  transition:filter .5s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.ph:hover img { filter:grayscale(0) contrast(1); transform:scale(1.05); }
/* frosted-glass caption chip floating over the photo */
.ph figcaption {
  position:absolute; left:12px; bottom:12px; right:12px;
  display:flex; gap:10px; align-items:baseline;
  font-family:var(--font-serif); font-size:12px; color:var(--paper);
  padding:8px 12px;
  background:rgba(18,20,26,.32);
  -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
}
.ph figcaption span {
  font-family:var(--font-sans); font-weight:600; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
}

.hero-strip { grid-template-columns:repeat(4, 1fr); }
.hero-strip .ph { aspect-ratio:4 / 4.6; }

/* photo strip is its own band just below the hero */
.strip-section { padding-block:clamp(48px, 6vw, 96px) clamp(56px, 8vw, 120px); }

/* ---------- Hero phone mockups ----------
   Anchored at their landing spot (top-right, beside the shrunken title).
   Clean: no shadows, no overlap — two devices side by side. */
.hero { position:relative; }
.hero-strip-wrap { position:relative; }
.hero-visual {
  position:absolute; z-index:5;
  top:clamp(80px, 8vw, 116px); right:clamp(72px, 7vw, 150px);
  display:flex; align-items:flex-start; gap:clamp(14px, 1.6vw, 26px);
  pointer-events:none;
  will-change:transform;
}
.phone {
  width:clamp(190px, 19.5vw, 320px); height:auto;
  will-change:transform;
}
.phone--back { margin-top:clamp(28px, 3vw, 48px); }

@media (max-width:820px) {
  /* no pin scene on mobile — phones sit in the flow, under the CTA row (nudged up slightly) */
  .hero-visual {
    position:static; margin:-14px var(--margin) 24px;
    justify-content:flex-start; gap:16px;
  }
  .phone { width:min(41vw, 230px); }
  .phone--back { margin-top:22px; }
}

/* ---------- Marquee ---------- */
.trusted { padding-top:clamp(56px, 7vw, 96px); }
.marquee { overflow:hidden; white-space:nowrap; padding-block:clamp(22px,3vw,38px); }
.marquee-track { display:inline-flex; align-items:baseline; gap:48px; will-change:transform; }
.marquee-track span {
  font-family:var(--font-sans); font-weight:800;
  font-size:clamp(28px, 3.6vw, 54px); letter-spacing:-.02em;
}
.marquee-track i {
  font-family:var(--font-display); font-style:normal; font-weight:700;
  font-size:clamp(14px, 1.6vw, 22px); color:#0aa8c4;
}

/* ---------- Platform (grayscale photo band, color reveals under the cursor) ---------- */
.platform { position:relative; overflow:hidden; padding-bottom:clamp(64px, 8vw, 130px); }
.platform-media { position:absolute; inset:0; z-index:0; pointer-events:none; }
.platform-media > * { position:absolute; inset:0; }
.platform-bg { background:#0a0c10 url('../assets/img/kitchen-rush.jpg') center/cover no-repeat; }
.platform-bg--gray { filter:grayscale(1) contrast(1.06); }
.platform-scrim { background:linear-gradient(180deg, rgba(5,7,10,.93) 0%, rgba(5,7,10,.87) 46%, rgba(5,7,10,.95) 100%); }

/* Cursor colour-reveal: a stack of lagging masked layers.
   The soft circle is moved with mask-POSITION (not a var inside mask-image) so it
   reliably repaints on every browser. Each layer lags more → comet tail; a per-layer
   wobble keeps the blob organic. Colour is boosted so it pops off the dark photo. */
.platform-reveal { position:absolute; inset:0; opacity:0; will-change:opacity; }
.platform-bg--color {
  opacity:var(--lo,.5);
  filter:saturate(1.45) brightness(1.18);
  -webkit-mask-image:radial-gradient(circle closest-side, #000 0%, #000 22%, rgba(0,0,0,0) 74%);
          mask-image:radial-gradient(circle closest-side, #000 0%, #000 22%, rgba(0,0,0,0) 74%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:calc(var(--r,280px) * 2) calc(var(--r,280px) * 2);
          mask-size:calc(var(--r,280px) * 2) calc(var(--r,280px) * 2);
  -webkit-mask-position:calc((var(--mx,-4000) + var(--wx,0)) * 1px - var(--r,280px)) calc((var(--my,-4000) + var(--wy,0)) * 1px - var(--r,280px));
          mask-position:calc((var(--mx,-4000) + var(--wx,0)) * 1px - var(--r,280px)) calc((var(--my,-4000) + var(--wy,0)) * 1px - var(--r,280px));
  will-change:mask-position;
}
.platform-bg--color[data-trail="0"] { --r:280px; --lo:.62; }
.platform-bg--color[data-trail="1"] { --r:215px; --lo:.42; }
.platform-bg--color[data-trail="2"] { --r:165px; --lo:.28; }
.platform-bg--color[data-trail="3"] { --r:120px; --lo:.18; }
.platform > .container { position:relative; z-index:1; }
.platform .h2 { color:#fff; }
.platform .h2 em { color:var(--cyan); }
.platform .body { color:rgba(255,255,255,.85); }
/* list rows become the same frosted boxes as the cards below — full-width 2x2
   grid so every box shares the section's left/right margins and equal heights */
.platform .platform-list {
  display:grid; grid-template-columns:repeat(2, 1fr); grid-auto-rows:1fr;
  gap:var(--tile-gap);
}
.platform .platform-list li {
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5);
  padding:26px 26px;
}
.platform .platform-list li:hover { background:rgba(255,255,255,.17); }
.platform .platform-list .no { color:var(--cyan); }
.platform .platform-list h3 { color:#fff; }
.platform .platform-list p { color:rgba(255,255,255,.8); }
.platform .btn--outline { background:rgba(255,255,255,.16); color:#fff; }
.platform .btn--outline:hover { background:#fff; color:var(--ink); }
/* benefit cards → dark frosted glass with light type, frosting the photo */
.platform .cell { background:rgba(255,255,255,.10); color:#fff; }
.platform .cell .material-symbols-rounded { color:var(--cyan); }
.platform .cell h3 { color:#fff; }
.platform .cell p { color:rgba(255,255,255,.8); }
.platform .cell:hover { background:rgba(255,255,255,.17); color:#fff; transform:translateY(-6px); }
.platform .cell:hover p { color:rgba(255,255,255,.9); }

.platform-grid {
  display:grid; grid-template-columns:1fr;
  gap:clamp(30px, 4vw, 56px);
  padding-block:clamp(44px, 6vw, 88px);
}
.platform-copy { display:flex; flex-direction:column; align-items:flex-start; gap:26px; }
.platform-list { list-style:none; display:flex; flex-direction:column; gap:6px; }
.platform-list li {
  display:flex; gap:22px; padding:20px 22px 20px 20px;
  transition:background .3s ease, transform .3s ease;
}
.platform-list li:hover { background:#f5f6f7; transform:translateX(4px); }
.platform-list .no { font-family:var(--font-serif); font-size:13px; color:#0aa8c4; min-width:28px; padding-top:5px; }
.platform-list h3 { font-family:var(--font-ui); font-weight:600; font-size:19px; letter-spacing:-.01em; line-height:1.25; }
.platform-list p { font-family:var(--font-ui); font-weight:400; font-size:14.5px; color:var(--body-c); margin-top:6px; max-width:52ch; }

/* ---------- Cell grids (benefits / features) — elevated cards ---------- */
.cellgrid {
  display:grid; gap:var(--tile-gap);
  background:none; border:0;
}
.bench-grid { grid-template-columns:repeat(3, 1fr); }
.feature-grid { grid-template-columns:repeat(3, 1fr); margin-top:clamp(36px, 5vw, 64px); }

.cell {
  background:var(--glass); padding:clamp(26px, 2.6vw, 42px);
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5);
  transition:background .3s ease, color .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.cell .material-symbols-rounded {
  font-size:34px; line-height:1; color:#0aa8c4;
  font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  transition:color .3s ease;
}
.cell h3 { font-weight:800; font-size:20px; letter-spacing:-.01em; }
.cell p { font-size:14.5px; line-height:1.58; color:var(--body-c); transition:color .3s ease; }
.cell:hover { background:var(--ink); color:var(--paper); transform:translateY(-6px); }
.cell:hover p { color:#c9c9c9; }
.cell:hover .material-symbols-rounded { color:var(--cyan); }

.stat { display:flex; align-items:baseline; gap:4px; margin-top:6px; }
.stat-num { font-family:var(--font-display); font-weight:700; font-size:clamp(40px, 4.4vw, 64px); line-height:1; }
.stat-unit { font-family:var(--font-display); font-weight:700; font-size:clamp(20px, 2vw, 30px); color:#0aa8c4; }

/* ---------- Wild / collage ---------- */
.wild-head {
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:24px; padding-block:clamp(36px, 5vw, 72px);
}
.collage {
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:clamp(180px, 24vw, 340px);
}
.collage .ph, .collage .cell--cyan { height:100%; }
/* Parallax images overflow the tile (±10% headroom) so the scroll shift never
   exposes the grey tile backing at the top/bottom edge. */
.collage .ph img {
  position:absolute; top:-10%; left:0;
  width:100%; height:120%;
}
.ph--tall { grid-row:span 2; }
.ph--wide { grid-column:span 2; }

.cell--cyan {
  background:var(--cyan); padding:clamp(20px, 2vw, 32px);
  display:flex; flex-direction:column; justify-content:space-between; gap:16px;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.cell--cyan:hover { transform:translateY(-5px); }
.cyan-note {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(19px, 1.9vw, 30px); line-height:1.12; letter-spacing:-.01em;
}
.cyan-note strong { -webkit-text-stroke:0; }
.cyan-foot { color:#0d3f47; }

/* black statement box — fills the open collage cell, mirrors the cyan one */
.collage .cell--ink { height:100%; }
.cell--ink {
  background:var(--ink); color:var(--paper); padding:clamp(22px, 2vw, 34px);
  display:flex; flex-direction:column; justify-content:space-between; gap:16px;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.cell--ink:hover { transform:translateY(-5px); }
.ink-note {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(19px, 1.9vw, 30px); line-height:1.12; letter-spacing:-.01em;
}
.ink-note strong { color:var(--cyan); }
.ink-foot { color:#8a8a8a; }

/* ---------- Cyan break ---------- */
.break-cyan {
  background:var(--cyan); color:var(--ink);
  margin-top:clamp(72px, 10vw, 150px);
  padding-block:clamp(72px, 9vw, 140px);
}
.break-kicker { color:var(--ink); }
.break-title {
  font-family:var(--font-display); font-weight:700;
  /* longest line "Fewer spreadsheets." ≈ 12.5em → always one line */
  font-size:min(calc((100vw - 2 * var(--margin)) / 15.7), 132px);
  line-height:.98; letter-spacing:-.015em;
  padding-block:clamp(20px, 3vw, 40px);
}
.break-title .line { display:block; white-space:nowrap; }
.break-foot {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px; padding-top:28px;
}
.break-sub { font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:clamp(17px, 1.6vw, 22px); color:#0d3f47; max-width:40ch; }
.break-cyan .btn--ink:hover { background:var(--paper); color:var(--ink); }

/* ---------- Insights ---------- */
.insights-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px, 6vw, 96px);
  padding-block:clamp(44px, 6vw, 88px);
  align-items:center;
}
.insights-photo { aspect-ratio:4/4.4; }
.insights-copy { display:flex; flex-direction:column; align-items:flex-start; gap:26px; }
.checklist { list-style:none; width:100%; display:flex; flex-direction:column; gap:2px; }
.checklist li {
  position:relative; padding:14px 0 14px 34px;
  font-family:var(--font-ui); font-weight:600; font-size:16px; letter-spacing:-.01em;
}
.checklist li::before {
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:13px; height:13px; background:var(--cyan);
}

/* ---------- Features ---------- */
.features-title { padding-block:clamp(36px, 5vw, 72px) 0; max-width:22ch; }

/* ---------- FAQ ---------- */
.faq-grid {
  display:grid; grid-template-columns:1fr 1.6fr;
  gap:clamp(40px, 6vw, 96px);
  padding-block:clamp(44px, 6vw, 88px);
  align-items:start;
}
.faq-list { display:flex; flex-direction:column; gap:clamp(10px, 1vw, 14px); }
.faq-item {
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5);
  transition:background .4s ease;
}
.faq-item:hover { background:var(--glass-strong); }
.faq-item.open { background:var(--glass-strong); }
.faq-q {
  display:flex; align-items:baseline; gap:20px; width:100%;
  padding:24px clamp(22px, 2vw, 30px); text-align:left;
}
.faq-q .no { font-family:var(--font-serif); font-size:13px; color:#0aa8c4; min-width:26px; }
.faq-q .q { font-family:var(--font-ui); font-weight:600; font-size:clamp(17px, 1.7vw, 22px); letter-spacing:-.01em; flex:1; }
.faq-q .ic {
  font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1;
  transition:transform .3s ease;
}
.faq-item.open .ic { transform:rotate(45deg); color:#0aa8c4; }
.faq-a { overflow:hidden; max-height:0; }
.faq-a p { padding:0 clamp(22px, 2vw, 30px) 26px 68px; color:var(--body-c); max-width:64ch; }

/* ---------- Footer ---------- */
.footer {
  background:var(--ink); color:var(--paper);
  position:relative; overflow:hidden;
}
.footer-cta {
  display:grid; grid-template-columns:1.4fr 1fr;
  gap:clamp(32px, 5vw, 80px); align-items:end;
  padding-block:clamp(72px, 9vw, 130px) clamp(48px, 6vw, 80px);
  border-bottom:var(--rule) solid rgba(255,255,255,.18);
}
.footer-title {
  font-family:var(--font-sans); font-weight:800;
  font-size:clamp(36px, 5vw, 72px); line-height:1; letter-spacing:-.02em;
  margin-top:18px;
}
.footer-title em { font-style:normal; color:var(--cyan); }
.footer-cta-side { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.footer-cta-side p { color:#c9c9c9; max-width:36ch; }
.footer .btn--cyan:hover { background:var(--paper); color:var(--ink); }

.footer-mid {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:32px; padding-block:clamp(40px, 5vw, 64px);
}
.footer-col { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.footer-col h4 { font-family:var(--font-ui); font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); margin-bottom:8px; }
.footer-col a { font-family:var(--font-ui); font-weight:500; font-size:14.5px; color:#c9c9c9; }
.footer-col a:hover { color:var(--cyan); }
.footer-col .meta--serif { color:#8a8a8a; margin-top:10px; }

.footer-base {
  display:flex; justify-content:space-between; gap:16px;
  padding-block:20px 26px;
  border-top:1px solid rgba(255,255,255,.14);
}
.footer-base .meta--serif { color:#8a8a8a; }

/* ---------- Reveal defaults (JS enhances) ---------- */
[data-reveal], [data-split] .split-line { will-change:transform; }

/* ---------- Responsive ---------- */
@media (max-width:1024px) {
  .platform-grid, .insights-grid, .faq-grid { grid-template-columns:1fr; }
  .insights-photo { aspect-ratio:16/10; }
  .collage { grid-template-columns:repeat(2, 1fr); grid-auto-rows:clamp(170px, 30vw, 300px); }
  .footer-cta { grid-template-columns:1fr; align-items:start; }
  .footer-mid { grid-template-columns:1fr 1fr; }
}
@media (max-width:960px) {
  .site-nav { display:none; }
  .hero-strip { grid-template-columns:repeat(2, 1fr); }
  .bench-grid, .feature-grid, .platform .platform-list { grid-template-columns:1fr; }
  .faq-a p { padding-left:clamp(22px, 2vw, 30px); }
}
@media (max-width:520px) {
  .collage { grid-template-columns:1fr; grid-auto-rows:clamp(220px, 60vw, 320px); }
  .ph--wide { grid-column:span 1; }
  .ph--tall { grid-row:span 1; }
  .hero-strip { grid-template-columns:1fr 1fr; }
  .marquee-track { gap:28px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}