/* ==========================================================================
   CoFlo Medical — site styles
   Desktop layout is built on the 1920px Figma frame: 1 design px = var(--u).
   Mobile layout (< 960px) follows the 402px iPhone frames in plain px.
   ========================================================================== */

@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/inter-tight-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-tight-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-tight-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-tight-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Brand palette (Brand Guidelines Lite) + values used in the Figma file */
  --ink: #0E0D19;
  --black: #191826;
  --blue: #2857F5;          /* Bright Blue 1 — digital preferred */
  --blue-2: #5892FF;        /* Bright Blue 2 */
  --blue-deep: #3751A2;     /* Deep Blue — pressed state */
  --blue-team: #1437AB;
  --navy: #061E67;
  --yellow: #FFB201;
  --light-blue: #D6E6F6;
  --light-gray: #D3D3D3;
  --cool-gray-1: #474752;
  --cool-gray-2: #73767D;
  --muted: #8E939E;
  --footer-muted: #8E9DCF;
  --surface: #F7F7F7;
  --card: #E7E7E7;

  --font: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --u: calc(min(100vw, 1920px) / 1920);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
strong { font-weight: inherit; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.footer :focus-visible, .barrier :focus-visible, .team :focus-visible { outline-color: #fff; }

.wrap { width: 100%; max-width: 1920px; margin-inline: auto; }
.lg-only { display: none; }
.nowrap { white-space: nowrap; }

/* ---------- Type scale (Type System) ---------- */
.h1  { font-size: max(36px, calc(56 * var(--u))); font-weight: 500; line-height: 1.1; letter-spacing: 0; }
.h2  { font-size: max(28px, calc(40 * var(--u))); font-weight: 500; line-height: 1.1; }
.h3  { font-size: max(22px, calc(32 * var(--u))); font-weight: 500; line-height: 1.1; }
.h4  { font-size: max(18px, calc(24 * var(--u))); font-weight: 400; line-height: 1.5; }
.body { font-size: max(15px, calc(16 * var(--u))); font-weight: 300; line-height: 1.5; }
.caps {
  font-size: max(12px, calc(15 * var(--u)));
  font-weight: 700; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: max(44px, calc(54 * var(--u)));
  padding: 0 max(19px, calc(21 * var(--u)));
  border-radius: 999px;
  font-size: max(16px, calc(20 * var(--u)));
  font-weight: 300; line-height: 1;
  color: #fff; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}
.btn--primary { background: var(--blue); }
.btn--primary:hover, .btn--primary:active { background: var(--blue-deep); }
.btn--secondary { background: var(--ink); }
.btn--secondary:hover, .btn--secondary:active { background: var(--cool-gray-1); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .33em;
  text-decoration: none; color: inherit;
}
.link-arrow .i-arrow { width: max(18px, calc(22 * var(--u))); height: auto; flex: none; transition: transform .25s var(--ease-out); }
a.link-arrow:hover .i-arrow, .card__link:hover .i-arrow { transform: translate(2px, -2px); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav { position: absolute; inset: 0 0 auto 0; z-index: 10; }
.nav__inner {
  max-width: 1920px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(51 * var(--u)) calc(60 * var(--u)) 0 calc(80 * var(--u));
}
.nav__logo { display: block; width: max(170px, calc(249 * var(--u))); }
.nav__logo img { width: 100%; height: auto; }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero { position: relative; height: calc(1366 * var(--u)); min-height: 600px; overflow: hidden; background: #fff; }
.hero__bg { position: absolute; inset: 0; }
.hero__grad { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__grad--sm { display: none; }
.hero__inner { position: relative; height: 100%; max-width: 1920px; margin-inline: auto; }
.hero__device { position: absolute; left: calc(-64.5 * var(--u)); top: 0; width: calc(2049 * var(--u)); max-width: none; pointer-events: none; }
.hero__device img { width: 100%; height: auto; }
.hero__title {
  position: absolute; left: calc(80 * var(--u)); top: calc(588.4 * var(--u));
  font-size: max(44px, calc(84 * var(--u))); font-weight: 500; line-height: 1.1;
}
.hero__sub {
  position: absolute; left: calc(1301 * var(--u)); top: calc(650.7 * var(--u));
  width: max(260px, calc(540 * var(--u)));
  font-size: max(17px, calc(24 * var(--u))); font-weight: 400; line-height: 1.5;
  color: var(--muted);
}
.hero__sub strong { color: var(--ink); }

/* ==========================================================================
   3 · DELIVER ANY VISCOSITY
   ========================================================================== */
.viscosity { background: var(--surface); padding: calc(200 * var(--u)) 0; }
.viscosity__grid {
  display: grid; align-items: center;
  grid-template-columns: calc(560 * var(--u)) 1fr;
  column-gap: calc(40 * var(--u));
  padding: 0 calc(230 * var(--u));
}
.eyebrow { color: var(--blue); }
.viscosity__text .h2 { margin-top: calc(11 * var(--u)); }
.viscosity__lead { margin-top: calc(40 * var(--u)); }
.stat {
  margin-top: calc(136 * var(--u));
  min-height: calc(208 * var(--u));
  border-left: 1px solid #000;
  padding-left: calc(30 * var(--u));
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.stat__value { font-size: max(56px, calc(100 * var(--u))); font-weight: 500; line-height: 1.1; white-space: nowrap; }
.chart-card { background: #fff; border-radius: calc(24 * var(--u)); aspect-ratio: 860 / 859; overflow: hidden; }
.chart { width: 100%; height: 100%; overflow: visible; }
.chart text { font-family: var(--font); }
.chart__ticks text { font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.chart__label { font-size: 20px; font-weight: 300; }
.viscosity__link { margin: calc(24 * var(--u)) 0 0 calc(12 * var(--u)); }

/* ==========================================================================
   Shared split heading (sections 4 & 7)
   ========================================================================== */
.split-head {
  display: grid; align-items: start;
  grid-template-columns: max(270px, calc(449 * var(--u))) 1fr;
  column-gap: calc(40 * var(--u));
  padding: 0 calc(230 * var(--u));
}
.split-head .body { max-width: calc(871 * var(--u)); min-width: 0; }

/* ==========================================================================
   4 · INTRODUCING CORE ANNULAR FLOW (looping animation — assets/js/coflo-flow.js)
   ========================================================================== */
.intro { padding: calc(200 * var(--u)) 0; background: #fff; }
.intro__line { display: block; }
.intro__visual {
  max-width: calc(1652 * var(--u) + 0px);
  margin: calc(138 * var(--u)) auto 0;
  aspect-ratio: 1652 / 929; overflow: hidden; background: #F2F2F2;
}
.intro__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Animation (v6): on white, half the v5 size. Desktop: it sits under the body-copy column (x = 719 of the 1920 frame).
   The doubled class beats the .intro__visual rules above and in the mobile block. */
.intro__visual.intro__visual--flow {
  aspect-ratio: auto;
  background: transparent;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: max(20px, calc(36 * var(--u)));
  padding: 0;
  max-width: none;
  width: max(560px, calc(826 * var(--u)));
  margin: max(48px, calc(100 * var(--u))) 0 0 calc((100% - min(100%, 1920px)) / 2 + 719 * var(--u));
}
.intro__lane { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: max(6px, calc(10 * var(--u))); min-width: 0; }
/* Keep a small gutter on the right for the needle mouth (half of v5's 120). */
.intro__visual--flow .coflo-flow { width: calc(100% - max(16px, calc(60 * var(--u)))); }
.intro__lane-label { color: var(--ink); }
.intro__lane-label--coflo { color: var(--blue); }

/* ==========================================================================
   6 · BREAK THE INJECTABILITY BARRIER
   ========================================================================== */
.barrier { background: var(--ink); color: #fff; }
.barrier__inner { padding: calc(156 * var(--u)) calc(236 * var(--u)); }
.benefits { margin-top: calc(120 * var(--u)); }
.benefit {
  display: grid; align-items: center;
  grid-template-columns: calc(74 * var(--u)) calc(104 * var(--u)) calc(466 * var(--u)) 1fr;
  min-height: calc(208 * var(--u));
  padding: calc(24 * var(--u)) 0 calc(24 * var(--u)) calc(294 * var(--u));
  border-top: 1px solid var(--cool-gray-1);
}
.benefit:last-child { border-bottom: 1px solid var(--cool-gray-1); }
.benefit__num { color: var(--light-blue); }
.benefit__icon { width: max(36px, calc(48 * var(--u))); height: auto; overflow: visible; }
.benefit__title { padding-right: calc(32 * var(--u)); }
.benefit__desc { color: var(--light-gray); }

/* 6b · Partnership contact: navy panel under the five benefits */
.partner {
  margin-top: max(56px, calc(120 * var(--u)));
  display: flex; align-items: center; justify-content: space-between;
  gap: max(32px, calc(64 * var(--u)));
  padding: max(32px, calc(64 * var(--u))) max(32px, calc(80 * var(--u)));
  border-radius: max(16px, calc(24 * var(--u)));
  background: linear-gradient(115deg, #16223F 0%, #1E3358 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.partner__text {
  max-width: max(480px, calc(920 * var(--u)));
  font-size: max(20px, calc(28 * var(--u))); font-weight: 300; line-height: 1.4; color: #fff;
}
.partner__btn { flex: none; }
.btn--gold {
  gap: .4em; background: var(--yellow); color: var(--ink); font-weight: 400;
  box-shadow: 0 0 max(20px, calc(32 * var(--u))) rgba(255, 178, 1, .35);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.btn--gold:hover, .btn--gold:active { background: #FFC233; box-shadow: 0 0 max(26px, calc(44 * var(--u))) rgba(255, 178, 1, .5); }
.btn .i-arrow-r { width: max(18px, calc(22 * var(--u))); height: auto; flex: none; transition: transform .25s var(--ease-out); }
.btn:hover .i-arrow-r { transform: translateX(3px); }

/* ==========================================================================
   7 · ONE TECHNOLOGY, MULTIPLE FORM FACTORS
   ========================================================================== */
.platform { padding: calc(200 * var(--u)) 0; background: #fff; }
.platform .split-head .h2 br.lg-only { display: inline; }
.platform__stage { position: relative; max-width: 1920px; margin: calc(100 * var(--u)) auto 0; }
.platform__visual { position: relative; aspect-ratio: 1920 / 1211; overflow: hidden; }
.platform__img img { position: absolute; left: 0; top: -5.285%; width: 100%; height: auto; }
.platform__leaders { position: absolute; inset: 0; width: 100%; height: 100%; }
.platform__leaders path { fill: none; stroke: #000; stroke-width: 1; vector-effect: non-scaling-stroke; }
.platform__marker { display: none; }
.parts { position: absolute; inset: 0; pointer-events: none; padding: 0; max-width: none; }
.part { position: absolute; pointer-events: auto; }
.part__num { display: none; }
.part__name { color: #000; }
.part__desc { margin-top: calc(12 * var(--u)); color: var(--cool-gray-1); }
/* anchored so text grows upward, never across its leader line */
.part--1 { left: 11.72%; bottom: 36.66%; width: max(250px, calc(397 * var(--u))); }
.part--2 { left: 68.28%; bottom: 54.50%; width: max(250px, calc(403 * var(--u))); }
.part--3 { left: 68.28%; bottom: 32.70%; width: max(250px, calc(383 * var(--u))); }

/* ==========================================================================
   8 · TEAM
   ========================================================================== */
.team { background: var(--blue-team); color: #fff; padding: calc(200 * var(--u)) 0; }
.team__grid { padding: 0 calc(200 * var(--u)); }
.team__intro { max-width: max(560px, calc(1000 * var(--u))); }
.team__intro .btn { margin-top: calc(45 * var(--u)); }
/* 2 × 2 tiles across the full width; photo sits beside the name, bio below the name */
.people {
  margin-top: max(56px, calc(96 * var(--u)));
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid #fff; border-left: 1px solid #fff;
}
.person {
  border-right: 1px solid #fff; border-bottom: 1px solid #fff;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: max(24px, calc(40 * var(--u))) max(24px, calc(48 * var(--u))) max(32px, calc(48 * var(--u)));
}
.person__photo { width: max(180px, calc(400 * var(--u))); max-width: 100%; position: relative; aspect-ratio: 1; overflow: hidden; background: #0f2f95; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__photo::after { content: ""; position: absolute; inset: 0; background: #003BFF; opacity: .2; pointer-events: none; }
.person__meta { margin-top: max(20px, calc(28 * var(--u))); }
.person__role { margin-top: calc(12 * var(--u)); color: var(--yellow); }
.person__bio { margin-top: max(16px, calc(20 * var(--u))); max-width: max(320px, calc(600 * var(--u))); }

/* ==========================================================================
   9 · LATEST FROM COFLO
   ========================================================================== */
.news { padding: calc(200 * var(--u)) 0; background: #fff; }
.news__grid {
  display: grid; align-items: start;
  grid-template-columns: calc(560 * var(--u)) 1fr;
  column-gap: calc(40 * var(--u));
  padding: 0 calc(96 * var(--u)) 0 calc(80 * var(--u));
}
.cards { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(24 * var(--u)); row-gap: calc(80 * var(--u)); }
.card__link { display: block; text-decoration: none; color: inherit; }
.card__media { position: relative; aspect-ratio: 560 / 345; border-radius: calc(20 * var(--u)); overflow: hidden; background: var(--card); isolation: isolate; }
.card__media > img { position: absolute; max-width: none; height: auto; transition: transform .6s var(--ease-out); transform-origin: 50% 50%; }
.card__link:hover .card__media > img { transform: scale(1.03); }
.card__media--mit > img { width: 160.714%; left: -60.714%; top: -24.928%; }
.card__media--mit::after { content: ""; position: absolute; inset: 0; background: #3765FF; opacity: .29; z-index: 1; }
.card__media--fierce > img { width: 197.143%; left: -48.482%; top: -95.362%; }
.card__media--ahm > img { width: 123.913%; left: -20.536%; top: -113.913%; }
.card__media--odd > img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tag {
  position: absolute; z-index: 2; top: calc(30 * var(--u)); left: calc(30 * var(--u));
  background: var(--blue); color: #fff;
  padding: max(6px, calc(12 * var(--u))) max(10px, calc(16 * var(--u)));
}
.card__logo { margin-top: calc(24 * var(--u)); width: max(80px, calc(110 * var(--u))); height: auto; }
.card__logo--wide { width: max(126px, calc(174 * var(--u))); }
.card__title { margin-top: calc(12 * var(--u)); }
.card__desc { margin-top: calc(12 * var(--u)); }
.card__more { margin-top: calc(12 * var(--u)); }

/* ==========================================================================
   10 · CTA + FOOTER
   ========================================================================== */
.cta {
  position: relative; z-index: 2;
  background: #fff;
  border-radius: 0 0 max(32px, calc(72 * var(--u))) max(32px, calc(72 * var(--u)));
  margin-bottom: calc(-68 * var(--u));
}
.cta__inner {
  max-width: 1920px; margin-inline: auto;
  min-height: calc(596 * var(--u));
  padding: calc(224 * var(--u)) 24px calc(120 * var(--u));
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cta__inner .btn { margin-top: calc(32 * var(--u)); }

.footer { background: var(--blue); color: #fff; }
.footer__inner {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
  padding: calc(180 * var(--u)) calc(106 * var(--u)) calc(271 * var(--u)) calc(100 * var(--u));
}
.footer__logo { width: calc(771 * var(--u)); min-width: 300px; height: auto; }
.footer__meta { width: max(220px, calc(234 * var(--u))); flex: none; }
.footer__social { display: flex; align-items: center; gap: 10px; }
.footer__social a { display: block; color: #fff; transition: opacity .2s ease; }
.footer__social a:hover { opacity: .75; }
.footer__social a:first-child svg { width: 24px; height: 24px; }
.footer__social a:last-child svg { width: 28px; height: 28px; }
.footer__links { margin-top: calc(32 * var(--u)); display: grid; row-gap: calc(16 * var(--u)); }
.footer__links a { text-decoration: none; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__copy { margin-top: calc(16 * var(--u)); color: var(--footer-muted); max-width: 234px; }

/* ==========================================================================
   DEMO PAGES — unlisted video pages (/double-barrel-demo/, /genone-demo/; see assets/js/demo.js)
   ========================================================================== */
.demo { padding: max(150px, calc(260 * var(--u))) 0 max(96px, calc(200 * var(--u))); background: #fff; }
.demo__wrap { padding: 0 calc(230 * var(--u)); }
.demo__lead { margin-top: max(16px, calc(24 * var(--u))); max-width: max(560px, calc(1000 * var(--u))); font-weight: 300; color: var(--cool-gray-1); }
.demo__player {
  --ar: 1.7778;                                         /* 16:9 until the player reports the real shape */
  position: relative;
  margin-top: max(32px, calc(64 * var(--u)));
  width: 100%;
  max-width: calc(80vh * var(--ar));                    /* a portrait video never runs taller than the screen */
  aspect-ratio: var(--ar);
  border-radius: max(12px, calc(24 * var(--u)));
  overflow: hidden;
  background: var(--ink);
}
.demo__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; max-width: none; }
.demo__soon { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--light-gray); text-align: center; padding: 24px; }
.demo__player.is-ready .demo__soon { display: none; }
.demo__soon--noscript { background: var(--ink); z-index: 1; }

/* ==========================================================================
   MOTION
   Content is fully visible without JavaScript; the .js class enables
   the entrance states below.
   ========================================================================== */
.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s ease, transform .9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 120ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Hero sequence: big text → product → small text */
.js [data-hero-step] { opacity: 0; transition: opacity .9s ease, transform 1.1s var(--ease-out); }
.js [data-hero-step="1"] { transform: translateY(28px); }
.js [data-hero-step="2"] { transform: translateY(48px); transition-duration: 1.4s, 1.6s; }
.js [data-hero-step="3"] { transform: translateY(20px); }
.js .hero-go [data-hero-step], .js.hero-go [data-hero-step] { opacity: 1; transform: none; }
.js.hero-go [data-hero-step="0"] { transition-delay: 0s; }
.js.hero-go [data-hero-step="1"] { transition-delay: .15s; }
.js.hero-go [data-hero-step="2"] { transition-delay: .75s; }
.js.hero-go [data-hero-step="3"] { transition-delay: 1.55s; }

/* Viscosity sequence: text → "Up to 10,000 cP" → graph → curves */
.js [data-seq-step] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s var(--ease-out); }
.js .seq-go [data-seq-step] { opacity: 1; transform: none; }
.js .seq-go [data-seq-step="1"] { transition-delay: 0s; }
.js .seq-go [data-seq-step="2"] { transition-delay: .55s; }
.js .seq-go [data-seq-step="3"] { transition-delay: 1.2s; }
.js .chart__arrow, .js .chart__label { opacity: 0; transition: opacity .5s ease; }
.js .chart__arrow.is-on, .js .chart__label.is-on { opacity: 1; }

/* Benefit icons: 03 arrows move apart, 05 funnel opens (SMIL, see site.js) */
.js .icon-arrows__l { transform: translateX(6px); }
.js .icon-arrows__r { transform: translateX(-6px); }
.icon-arrows__l, .icon-arrows__r { transition: transform 1.1s var(--ease-out) .45s; }
.js .benefit.is-in .icon-arrows__l, .js .benefit.is-in .icon-arrows__r { transform: none; }

/* Oct 14, 2026 (Simon): animations play for every visitor, including those with the OS "Reduce Motion"
   setting on, so there is deliberately no prefers-reduced-motion override here. */

/* ==========================================================================
   MOBILE (< 960px) — iPhone 17 frames (402px wide)
   ========================================================================== */
@media (max-width: 959px) {
  .h1 { font-size: 32px; line-height: 1.1; }
  .h2 { font-size: 24px; line-height: 1.2; }
  .h3 { font-size: 20px; line-height: 1.2; }
  .h4 { font-size: 20px; font-weight: 500; line-height: 1.2; }
  .body { font-size: 15px; }
  .caps { font-size: 15px; }
  .btn { height: 44px; padding: 0 19px; font-size: 16px; }
  .link-arrow .i-arrow { width: 22px; }

  .nav__inner { padding: 16px 24px 0; }
  .nav__logo { width: 170px; }

  /* 1 · Hero */
  .hero { height: 100vh; height: 100svh; min-height: 640px; max-height: 940px; }
  .hero__grad--lg { display: none; }
  .hero__grad--sm { display: block; }
  .hero__inner { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 24px 140px 32px; }
  .hero__device { left: 0; top: 0; width: 100%; }
  .hero__device img { width: 100%; height: auto; }
  .hero__title, .hero__sub { position: relative; left: auto; top: auto; }
  .hero__title { font-size: 40px; line-height: 1.1; }
  .hero__sub { width: auto; max-width: 240px; margin-top: 24px; font-size: 15px; font-weight: 300; }

  /* 3 · Viscosity */
  .viscosity { padding: 100px 0; }
  .viscosity__grid { display: block; padding: 0 24px; max-width: 608px; }
  .viscosity__text .h2 { margin-top: 12px; }
  .viscosity__lead { margin-top: 32px; }
  .stat { margin-top: 56px; min-height: 153px; padding-left: 12px; }
  .stat__value { font-size: 72px; }
  .viscosity__chart { margin-top: 56px; }
  .chart-card { border-radius: 0; }
  .viscosity__link { margin: 56px 0 0 12px; }

  /* split headings */
  .split-head { display: block; padding: 0 24px; max-width: 608px; }
  .split-head .body { max-width: none; margin-top: 16px; }

  /* 4 · Intro (no mobile frame in Figma — follows the mobile pattern) */
  .intro { padding: 72px 0; }
  .intro__visual { margin: 24px 24px 0; max-width: 560px; aspect-ratio: 354 / 440; }
  .intro__visual.intro__visual--flow { width: auto; max-width: 560px; margin: 32px 24px 0; }
  @media (min-width: 608px) { .intro__visual, .intro__visual.intro__visual--flow { margin-inline: auto; } }

  /* 6 · Barrier */
  .barrier__inner { padding: 120px 36px 72px; max-width: 608px; }
  .benefits { margin-top: 48px; }
  .benefit { display: block; min-height: 0; padding: 32px 0; }
  .benefit__icon { width: 48px; margin-top: 36px; }
  .benefit__title { margin-top: 36px; padding-right: 0; }
  .benefit__desc { margin-top: 12px; }
  .partner { margin-top: 48px; flex-direction: column; align-items: flex-start; gap: 28px; padding: 32px 24px; border-radius: 16px; }
  .partner__text { font-size: 20px; max-width: none; }

  /* 7 · Platform */
  .platform { padding: 72px 0; }
  .platform .split-head .h2 br.lg-only { display: none; }
.nowrap { white-space: nowrap; }
  .platform__stage { margin: 24px auto 0; padding: 0 24px; max-width: 608px; }
  .platform__visual { aspect-ratio: 354 / 666; }
  .platform__img img { position: absolute; inset: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .platform__leaders { display: none; }
  .platform__marker {
    position: absolute; display: grid; place-items: center;
    width: 25px; height: 25px; background: var(--blue); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; line-height: 1;
  }
  .platform__marker::after { content: ""; position: absolute; top: 50%; height: 1px; background: var(--light-gray); }
  .platform__marker--1 { left: 0; top: 69.52%; }
  .platform__marker--1::after { left: calc(100% + 3px); width: 30px; }
  .platform__marker--2 { right: 0; top: 58.26%; }
  .platform__marker--2::after { right: calc(100% + 4px); width: 20px; }
  .platform__marker--3 { right: 0; top: 74.17%; }
  .platform__marker--3::after { right: calc(100% + 4px); width: 30px; }
  .parts { position: static; margin-top: 24px; border-top: 1px solid var(--light-gray); }
  .part { position: static; width: auto !important; padding: 24px 0; border-bottom: 1px solid var(--light-gray); display: grid; grid-template-columns: 33px 1fr; }
  .part__name { grid-column: 1 / -1; display: grid; grid-template-columns: 33px 1fr; }
  .part__num { display: block; color: var(--blue); }
  .part__desc { grid-column: 2; margin-top: 12px; color: #000; }

  /* 8 · Team */
  .team { padding: 72px 0; }
  .team__grid { padding: 0 32px; max-width: 608px; }
  .team__intro .h1 { font-size: 24px; line-height: 1.2; }
  .team__intro .btn { margin-top: 20px; }
  .people { grid-template-columns: 1fr; margin-top: 48px; }
  .person { padding: 32px 24px; }
  .person__photo { width: 176px; }
  .person__meta { margin-top: 20px; }
  .person__role { margin-top: 8px; }
  .person__bio { margin-top: 16px; }

  /* 9 · News */
  .news { padding: 72px 0; }
  .news__grid { display: block; padding: 0 24px; max-width: 608px; }
  .cards { grid-template-columns: 1fr; row-gap: 72px; margin-top: 56px; }
  .card__media { aspect-ratio: 354 / 230; border-radius: 12px; }
  .tag { top: 12px; left: 12px; padding: 8px 12px; font-size: 12px; }
  .card__more { margin-top: 24px; }
  .card__logo { margin-top: 16px; width: 110px; }
  .card__logo--wide { width: 174px; }
  .card__desc { color: var(--muted); }

  /* Demo pages */
  .demo { padding: 120px 0 72px; }
  .demo__wrap { padding: 0 24px; max-width: 720px; }
  .demo__title { font-size: 32px; }
  .demo__lead { margin-top: 12px; font-size: 18px; line-height: 1.5; }
  .demo__player { margin-top: 32px; border-radius: 12px; }

  /* 10 · CTA + footer */
  .cta { border-radius: 0 0 40px 40px; margin-bottom: -22px; }
  .cta__inner { min-height: 415px; padding: 142px 24px 80px; }
  .cta__inner .btn { margin-top: 32px; }
  .footer__inner { flex-direction: column; gap: 0; padding: 80px 37px 60px; }
  .footer__logo { width: 327px; min-width: 0; max-width: 100%; }
  .footer__meta { margin-top: 246px; width: auto; }
  .footer__links { margin-top: 32px; row-gap: 16px; }
  .footer__copy { margin-top: 16px; }
}

/* Tablets (mobile layout, more room) */
@media (min-width: 600px) and (max-width: 959px) {
  .hero__device { left: auto; right: -4%; width: min(78%, 620px); }
  .hero__inner { padding-left: 48px; padding-bottom: 96px; }
  .hero__title { font-size: 56px; }
  .hero__sub { max-width: 340px; font-size: 17px; }
  .people { grid-template-columns: 1fr 1fr; }
  .team__grid, .news__grid, .viscosity__grid, .split-head, .platform__stage, .barrier__inner { max-width: 720px; }
  .cards { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 56px; }
  .intro__visual.intro__visual--flow { max-width: 672px; }
}

@media (max-width: 380px) {
  .hero__title { font-size: 36px; }
  .stat__value { font-size: 60px; }
  .team__grid { padding: 0 24px; }
  .person { padding: 20px; }
  .person__name { overflow-wrap: anywhere; }
}