/* Hand & Logic · vibrant/ · a 1:1 rebuild of Vibrant Wellness's UI language (our code, our assets).
   Values follow docs/vibrant-uiux-spec.md; section numbers in comments point there. */

/* ------------------------------------------------------------------ tokens (3.1–3.3) */
:root {
  --ink: #282F3C;
  --ink-2: #4B5468;
  --accent: #0774C4;            /* their "brand-green" (a blue) */
  --accent-200: #88AAFB;
  --blue-100: #A8BFFD;
  --purple-100: #D9CFFB;
  --white-200: #E5EAF8;
  --navy: #010835;
  --bg: #C9DCEC;
  --hero-ink: #FFFFFF;
  --hero-sub: rgba(255, 255, 255, .9);
  --line: rgba(255, 255, 255, .55);

  --ease: cubic-bezier(.65, .05, .36, 1);
  --ease-d: cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.25, 1, .5, 1);

  --irid: linear-gradient(226.74deg, #E8EFFF 14.97%, #C1E8FF 20.41%, #FFF6FE 29.94%, #E6DFFF 38.78%, #FFFFFF 46.6%, #D5E8FF 57.14%, #FFFFFF 66.33%, #F6EAFF 70.41%, #E8EFFF 77.89%);
  --hair: linear-gradient(270deg, #E8EFFF -13.01%, #C1E8FF 1.33%, #FFF6FE 26.42%, #E6DFFF 49.72%, #FFFFFF 70.33%, #D5E8FF 98.11%, #FFFFFF 122.3%, #F6EAFF 133.06%, #E8EFFF 152.77%);
  --hair-v: linear-gradient(180deg, #E8EFFF 0%, #C1E8FF 12%, #FFF6FE 30%, #E6DFFF 50%, #FFFFFF 68%, #D5E8FF 86%, #F6EAFF 100%);
  --shine: linear-gradient(91.11deg, #DEE9FF 16.15%, #F2F3FF 26.11%, #D7EEFF 40.04%, #FFF 46.02%, #F2F3FF 52.39%, #D7EEFF 58.62%, #F2F3FF 69.63%, #DEE9FF 80.16%);
  --tabs-grad: linear-gradient(268.96deg, #0A6ACC -12.99%, #98D1EE 124.12%, #07213A 231.11%);
  --glass: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
  --glass-b: rgb(255 255 255 / .21);
  --panel: linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .4) 108.25%);
  --panel-b: rgb(255 255 255 / .51);
  --row: rgb(255 255 255 / .61);
  --card-w: rgb(255 255 255 / .81);
  --next: linear-gradient(#FFFFFF66 20%, #FFFFFF33);
  --tag-red: linear-gradient(67.45deg, #FF467B -38.2%, #FF5213 99.88%);
  --tag-orange: linear-gradient(253.01deg, #FFB246 -6.02%, #FF8930 107.66%);
  --tag-green: linear-gradient(67.45deg, #00C9CC -38.2%, #00CC6C 99.88%);
  --panel-shadow: none;

  /* roles (each mode sets them): signature fill + its ink, pills (Start / CTA), focus, dots on body circles */
  --hl: #0774C4;                /* active states, chips, rings */
  --on-hl: #FFFFFF;
  --hl-line: #0774C4;
  --hl-edge: none;              /* studio: an ink hairline, because saffron alone is 1.8:1 against white */
  --hl-soft: #DCE6FA;
  --pill: #FFFFFF;              /* Start / header CTA inner pill */
  --pill-ink: #0774C4;
  --pill-ring: rgb(255 255 255 / .41);
  --pill-ring-hover: rgb(7 116 196 / .41);
  --btn: #0774C4;               /* solid buttons inside modals */
  --on-btn: #FFFFFF;
  --focus: #0774C4;
  --focus-soft: rgba(7, 116, 196, .15);
  --dot: #0774C4;
  --tag-ink: #FFFFFF;
  --c: #1F5F7A;                 /* clinic colour inside the mock UIs (personal mode overrides it) */
  /* neutral surfaces + shadow tints (studio warms them) */
  --soft: #F3F6FD;              /* quiet fills: rows, notes, disabled arrows */
  --soft-2: #EEF2FB;
  --soft-3: #DCE6FA;            /* hover on quiet fills */
  --edge: #EEF0F5;              /* hairlines inside white panels */
  --edge-2: #DDE2EC;            /* control borders */
  --sh: 28, 38, 92;             /* shadow tint (rgb triplet) */
  --ink-rgb: 40, 47, 60;
  --scrim: rgba(28, 34, 60, .26);
  --jak: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Ubuntu Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --hdr: 88px;
}
/* ?bg=white: pure white base (Alik's earlier wish). Glass becomes white cards with a hairline and a soft shadow. */
html:not([data-bg="vibrant"]) {
  --bg: #FFFFFF;
  --hero-ink: #282F3C;
  --hero-sub: #4B5468;
  --line: rgba(40, 47, 60, .12);
  --glass: linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .7));
  --glass-b: rgba(40, 47, 60, .09);
  --panel: linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%);
  --panel-b: rgba(40, 47, 60, .08);
  --row: #F3F6FD;
  --card-w: #FFFFFF;
  --next: linear-gradient(#F3F6FD 20%, #EEF2FB);
  --panel-shadow: 0 30px 80px -30px rgba(40, 47, 60, .18);
  --shine: linear-gradient(91.11deg, #282F3C 16.15%, #3B4A66 30%, #0774C4 46.02%, #3B4A66 60%, #282F3C 80.16%);
  --shine-o: linear-gradient(100deg, transparent 30%, rgba(7, 116, 196, .75) 47%, rgba(59, 74, 102, .6) 53%, transparent 70%);
}
html[data-bg="vibrant"] { --hero-ink: #1B2130; --hero-sub: #26304A; --tabs-grad: linear-gradient(90deg, #07213A, #0A5CB0);
  --shine-o: linear-gradient(100deg, transparent 30%, rgba(7, 116, 196, .8) 47%, rgba(38, 48, 74, .6) 53%, transparent 70%); }
html[data-bg="white"] { --tabs-grad: linear-gradient(90deg, #07213A, #0A5CB0); }
html:not([data-bg="studio"]) { --accent: #0A5CB0; --tag-ink: #13202F; }
html:not([data-bg="studio"]) .tag--red { color: var(--tag-ink); }
/* DEFAULT · "B Bright Studio" (Alik's pick, 2026-10-13): pure white, near-black type and buttons, ONE warm saffron.
   Saffron = glows, highlights, chips, active states, the measuring ring and the warm light behind the body.
   Contrast (WCAG 2.x): ink on white 19.6 · ink on saffron 10.4 · deep saffron #7A4F00 text on white 7.1 · grey #55524B on white 7.8.
   Saffron fills on white are 1.8:1, so they always carry ink text and an ink hairline (--hl-edge). */
html[data-bg="studio"] {
  --ink: #0E0F12;
  --ink-2: #55524B;
  --accent: #7A4F00;            /* deep saffron: kickers, links, hover text */
  --accent-200: #FFD34D;
  --blue-100: #F5B400;
  --purple-100: #FFEBD0;
  --white-200: #F3EDE0;
  --navy: #0E0F12;
  --hl: #F5B400;
  --on-hl: #0E0F12;
  --hl-line: #0E0F12;
  --hl-edge: inset 0 0 0 1.5px #0E0F12;
  --hl-soft: #FFEDB3;
  --pill: #0E0F12;
  --pill-ink: #FFFFFF;
  --pill-ring: rgba(245, 180, 0, .22);
  --pill-ring-hover: rgba(245, 180, 0, .5);
  --btn: #0E0F12;
  --on-btn: #FFFFFF;
  --focus: #0E0F12;
  --focus-soft: rgba(245, 180, 0, .35);
  --dot: #0E0F12;
  --tag-ink: #0E0F12;
  --hero-ink: #0E0F12;
  --hero-sub: #3A3832;
  --irid: linear-gradient(226.74deg, #FFF6DA 14.97%, #FFE7A3 24%, #FFFFFF 34%, #FFEBD0 46%, #FFFFFF 58%, #FFF1C4 70%, #FFFFFF 80%);
  --hair: linear-gradient(270deg, #EFEBE3 0%, #FFE39A 30%, #F3EFE7 55%, #FFEDBC 80%, #EFEBE3 100%);
  --hair-v: linear-gradient(180deg, #F3EFE7 0%, #FFD86B 30%, #FFEDBC 60%, #F3EFE7 100%);
  --tabs-grad: linear-gradient(90deg, #0E0F12, #3A372F);
  --shine-o: linear-gradient(100deg, transparent 32%, rgba(201, 141, 0, .9) 47%, rgba(245, 180, 0, .85) 51%, transparent 66%);
  --tag-red: #0E0F12;
  --tag-orange: #FFE39A;
  --tag-green: #F5B400;
  --c: #1F5F7A;
  /* warm neutrals: no cool blue-greys anywhere in the default mode */
  --soft: #F6F5F2;
  --soft-2: #F1EFEA;
  --soft-3: #FFF3CC;
  --edge: #EEECE7;
  --edge-2: #E2DED6;
  --sh: 14, 15, 18;
  --ink-rgb: 14, 15, 18;
  --scrim: rgba(14, 15, 18, .34);
  --line: rgba(14, 15, 18, .12);
  --glass: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .76));
  --glass-b: rgba(14, 15, 18, .09);
  --panel: #FFFFFF;
  --panel-b: rgba(14, 15, 18, .08);
  --row: #F6F5F2;
  --card-w: #FFFFFF;
  --next: linear-gradient(#F8F7F4 20%, #F2F0EB);
  --panel-shadow: 0 1px 2px rgba(14, 15, 18, .04), 0 24px 64px -28px rgba(14, 15, 18, .16);
  --hl-rgb: 245, 180, 0;
  --warm-glow: radial-gradient(closest-side, rgba(255, 211, 77, .34), rgba(255, 211, 77, .12) 55%, rgba(255, 211, 77, 0));
  caret-color: #0E0F12;
  accent-color: #F5B400;
}
::selection { background: rgba(160, 182, 255, .45); color: inherit; }
html[data-bg="studio"] ::selection { background: #FFE39A; color: #0E0F12; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; scroll-behavior: auto; overflow-x: clip; }
/* Lenis smooth scroll (desktop wheel only; phones keep native momentum) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 600 16px/1.4 var(--jak); letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
a:not([class]):focus-visible { border-radius: 4px; }
.hotspot:focus-visible { outline: none; }
.hotspot:focus-visible .hs-circle { outline: 2px solid var(--focus); outline-offset: 4px; background: var(--hl); }
.bcircle:focus-visible { outline: none; }
.bcircle:focus-visible .bc-outer { width: 64px; height: 64px; margin: -32px; border: 2px solid var(--focus); opacity: 1; }
.wk-range:focus-visible { outline: none; }
.sr-only, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; z-index: 100; left: 16px; top: 16px; background: #fff; padding: 10px 16px; border-radius: 999px; }
[hidden] { display: none !important; }

/* logo: the final files from brand/logo/final (copied to assets/logo). One flat colour: ink, or white on dark / lavender.
   Under 140 px wide the small cut is used; under 80 px only the mark. */
.lg { display: block; height: auto; }
.lg--white { display: none; }

.lg--small { display: none; }

/* shared micro type */
.kick { font: 700 13px/1 var(--mono); letter-spacing: .146em; text-transform: uppercase; color: var(--ink); }
.kick b { color: var(--accent); margin-right: .7em; }
.kick--blue { color: var(--accent); }
.dots { display: inline-block; width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 33%, #fff 0 2.1px, transparent 2.6px), radial-gradient(circle at 34% 62%, #fff 0 2.1px, transparent 2.6px), radial-gradient(circle at 66% 62%, #fff 0 2.1px, transparent 2.6px), rgba(160, 182, 255, .62); }
html[data-bg="studio"] .dots { background: radial-gradient(circle at 50% 33%, #0E0F12 0 2.1px, transparent 2.6px), radial-gradient(circle at 34% 62%, #0E0F12 0 2.1px, transparent 2.6px), radial-gradient(circle at 66% 62%, #0E0F12 0 2.1px, transparent 2.6px), #F5B400; }
.dots--dark { background: radial-gradient(circle at 50% 33%, var(--accent) 0 2.1px, transparent 2.6px), radial-gradient(circle at 34% 62%, var(--accent) 0 2.1px, transparent 2.6px), radial-gradient(circle at 66% 62%, var(--accent) 0 2.1px, transparent 2.6px), rgba(255, 255, 255, .7); }
.dotsp { display: block; width: 20px; height: 20px;
  background: radial-gradient(circle at 50% 30%, var(--accent) 0 2.2px, transparent 2.7px), radial-gradient(circle at 30% 64%, var(--accent) 0 2.2px, transparent 2.7px), radial-gradient(circle at 70% 64%, var(--accent) 0 2.2px, transparent 2.7px); }
.hr { display: block; height: 2px; border: 0; margin: 32px 0 0; background: var(--hair); }
html:not([data-bg="vibrant"]) .hr { background: linear-gradient(270deg, #E8EFFF, #C1E8FF 20%, #E6DFFF 50%, #D5E8FF 80%, #F6EAFF); }
.chev { display: inline-block; width: 8px; height: 12px; flex: none; transition: transform .3s var(--ease);
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' fill='none'%3E%3Cpath d='M1.5 1l5 5-5 5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' fill='none'%3E%3Cpath d='M1.5 1l5 5-5 5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

/* iridescent blob that follows the cursor inside buttons (3.1) */
.blob-host { position: relative; isolation: isolate; }
.blob { position: absolute; left: 0; top: 0; width: 98px; height: 98px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: var(--irid); filter: blur(12px); mix-blend-mode: multiply; opacity: 0; transition: opacity .3s ease-in-out;
  transform: translate3d(var(--bx, -200px), var(--by, -200px), 0); }
.blob-host:hover > .blob, .blob-host:hover > * > .blob { opacity: .8; }

/* letter roll (Start button, 5.3) */
.roll { display: inline-flex; overflow: hidden; height: 1.4em; line-height: 1.4; white-space: nowrap; }
.roll .ch { display: inline-block; position: relative; transition: transform .3s var(--ease); transition-delay: calc(var(--i, 0) * 10ms); }
.roll .ch::after { content: attr(data-c); position: absolute; left: 0; top: 100%; }
.roll .ch.sp { width: .28em; }
a:hover .roll .ch, button:hover .roll .ch, .roll-host:hover .roll .ch { transform: translateY(-100%); }

/* tags (biomarker tag) */
.tag { display: inline-flex; align-items: center; height: 42px; padding: 0 15px; border-radius: 16px; flex: none; white-space: nowrap;
  font: 700 15px/1 var(--mono); color: #fff; letter-spacing: .02em; background: var(--ink); }
.tag--red { background: var(--tag-red); }
.tag--orange { background: var(--tag-orange); color: var(--tag-ink); }
.tag--green { background: var(--tag-green); color: var(--tag-ink); }
.tag--dark { background: var(--ink); }
.tag--down, .tag--up { padding-left: 29px; position: relative; }
.tag--down::before, .tag--up::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 12px; margin-top: -6px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' fill='none'%3E%3Cpath d='M5 1v10M1 7l4 4 4-4' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' fill='none'%3E%3Cpath d='M5 1v10M1 7l4 4 4-4' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.tag--up::before { transform: rotate(180deg); }

/* biomarker list (5.7.3) */
.bm { border-radius: 10px; overflow: hidden; }
.bm-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 20px 10px 16px 20px; background: #fff; position: relative; }
.bm-row:first-child > div:first-child { }
.bm-row + .bm-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--hair); }
.bm-n { font: 600 16px/1.35 var(--jak); margin-bottom: 8px; }
.bm-c { font: 400 13px/1.15 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }

/* ------------------------------------------------------------------ 3D layer + crosshair (4.6) */
.stage { position: fixed; inset: 0; z-index: 0; background: var(--bg); }
.stage.b3d { position: fixed; }
.crosshair { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s; }
.crosshair.on { opacity: 1; }
.crosshair i { position: absolute; left: 0; top: 0; background: rgba(255, 255, 255, .3); }
html:not([data-bg="vibrant"]) .crosshair i { background: rgba(var(--ink-rgb), .16); }
html:not([data-bg="vibrant"]) .ch-c { border-color: rgba(var(--ink-rgb), .6); }
.ch-h { width: 100%; height: 1px; transform: translate3d(0, var(--cy, -10px), 0); }
.ch-v { width: 1px; height: 100%; transform: translate3d(var(--cx, -10px), 0, 0); }
.ch-c { width: 7px; height: 7px; border-radius: 50%; background: transparent !important; border: 1px solid rgba(255, 255, 255, .45); transform: translate3d(calc(var(--cx, -10px) - 3px), calc(var(--cy, -10px) - 3px), 0); }

/* ------------------------------------------------------------------ preloader (5.1) */
.preloader { position: fixed; inset: 0; z-index: 50; background: #fff; display: grid; place-items: center; --pr: -20%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--pr), #000 calc(var(--pr) + 22%));
  mask-image: radial-gradient(circle at 50% 50%, transparent var(--pr), #000 calc(var(--pr) + 22%)); }
.preloader.fade { -webkit-mask-image: none; mask-image: none; transition: opacity .7s ease-in-out .9s; opacity: 0; }
.pl-core { position: relative; width: max(12vw, 128px); height: max(12vw, 128px); margin-top: -1.5vw; display: grid; place-items: center; }
.pl-core > i { position: absolute; inset: 0; border-radius: 50%; }
.pl-blur { background: #A8BFFD; transform: scale(3); filter: blur(28px); animation: pulseBlur 2s ease-in-out infinite; }
.pl-purple { background: #D9CFFB; transform: scale(0); filter: blur(20px); transition: transform .9s ease-in-out; }
.pl-white { background: #fff; transform: scale(0); filter: blur(20px); transition: transform 1s ease-in-out .45s; }
.pl-ring { border: 1px solid #E5EAF8; opacity: 0; animation: pulseLogoBorder 3s linear infinite; }
.pl-ring:nth-of-type(4) { animation-delay: 1s; }
.pl-ring:nth-of-type(5) { animation-delay: 2s; }
.pl-amp { position: relative; z-index: 1; width: 6.4vw; min-width: 72px; height: auto; overflow: visible; transform: translateY(-.7vw); animation: pulseLogo 1.6s ease-in-out infinite; }
.pl-amp-base { fill: rgba(255, 255, 255, .38); }
.pl-amp-gold { fill: #fff; opacity: .7; }
.pl-amp-ink { fill: #fff; }
html[data-bg="studio"] .pl-amp-base { fill: rgba(14, 15, 18, .1); }
html[data-bg="studio"] .pl-amp-gold { fill: #F5B400; opacity: 1; }
html[data-bg="studio"] .pl-amp-ink { fill: #0E0F12; }
html[data-bg="white"] .pl-amp-base { fill: rgba(40, 47, 60, .12); }
html[data-bg="white"] .pl-amp-gold { fill: #88AAFB; }
html[data-bg="white"] .pl-amp-ink { fill: #282F3C; }
html[data-bg="studio"] .pl-blur { background: #FFD34D; opacity: .55; }
html[data-bg="studio"] .pl-purple { background: #FFEDB3; }
html[data-bg="studio"] .pl-ring { border-color: rgba(245, 180, 0, .55); }
.pl-note { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font: 700 12px/1 var(--mono); letter-spacing: .19em; text-transform: uppercase; color: rgba(14, 15, 18, .62); }
.preloader.out .pl-note { opacity: 0; transition: opacity .3s ease-out; }
.preloader.out .pl-purple { transform: scale(3.4); }
.preloader.out .pl-white { transform: scale(16); }
.preloader.out .pl-amp, .preloader.out .pl-ring { opacity: 0; transition: opacity .35s ease-in-out .55s; }
@keyframes pulseBlur { 0%, 100% { filter: blur(28px); transform: scale(3); } 50% { filter: blur(22px); transform: scale(3.6); } }
@keyframes pulseLogo { 0%, 100% { transform: translateY(-.7vw) scale(1); } 50% { transform: translateY(-.7vw) scale(1.1); } }
@keyframes pulseLogoBorder { 0% { opacity: 0; transform: scale(1.3); } 50% { opacity: 1; transform: scale(1.9); } 100% { opacity: 0; transform: scale(2.5); } }

/* ------------------------------------------------------------------ header + chrome (5.4) */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 41; pointer-events: none; }
.hdr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 116px; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: linear-gradient(var(--scrim-top, rgba(255, 255, 255, .94)) 0%, var(--scrim-mid, rgba(255, 255, 255, .78)) 52%, rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
body[data-zone="sections"]:not([data-sec="build"]) .hdr::before { opacity: 1; }
html[data-bg="vibrant"] { --scrim-top: rgba(214, 226, 250, .9); --scrim-mid: rgba(214, 226, 250, .6); }
.hdr-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px 20px 0; }
.hdr-in > * { pointer-events: auto; }
.hdr-l { display: flex; align-items: center; gap: 18px; min-height: 48px; justify-self: start; }
.hdr-c { display: grid; justify-items: center; }
.hdr-c > * { grid-area: 1 / 1; }
.hdr-r { display: flex; align-items: center; gap: 22px; justify-self: end; min-height: 48px; }

.back { position: relative; width: 32px; height: 32px; margin-left: 4px; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.back::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgb(255 255 255 / .41); transform: scale(1.4); }
.back::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid #fff; opacity: 0; }
.back-in { position: absolute; inset: 0; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #000; transition: color .3s var(--ease); }
.back:hover .back-in { color: var(--accent); }
.back:hover::after { animation: pulseBorder 1.5s ease-out infinite; }
body.can-back .back { opacity: 1; pointer-events: auto; }
@keyframes pulseBorder { 0% { opacity: .8; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1.8); } }
html:not([data-bg="vibrant"]) .back::before { background: rgba(var(--ink-rgb), .06); }
html:not([data-bg="vibrant"]) .back-in { box-shadow: 0 2px 10px rgba(var(--ink-rgb), .12); }
.step-pill { display: none; }

/* body switch (FEMALE/MALE → WEEK 0 / WEEK 13) */
.switch { display: flex; align-items: center; gap: 0; height: 48px; padding: 0 7px; border-radius: 999px; overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-b); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .5s var(--ease), opacity .5s var(--ease); }
.switch-ind { position: absolute; left: 0; top: 7px; height: 32px; width: 93px; border-radius: 999px; background: var(--hl); box-shadow: var(--hl-edge);
  transform: translateX(var(--ix, 7px)); width: var(--iw, 93px); transition: transform .8s var(--ease), width .8s var(--ease); z-index: 0; }
.sw-btn { position: relative; z-index: 1; flex: none; white-space: nowrap; height: 32px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  font: 700 13px/1 var(--mono); letter-spacing: 1.9px; text-transform: uppercase; color: var(--ink); transition: color .6s var(--ease); }
.sw-btn svg { width: 15px; height: 15px; }
.sw-btn.is-on { color: var(--on-hl); }
.switch .blob { opacity: 0; }
.switch:hover .blob { opacity: .6; }

/* section tabs (Vibrant's story tabs bar, 5.7) */
.tabsbar { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px; border-radius: 999px; overflow: hidden; white-space: nowrap;
  background: var(--glass); border: 1px solid var(--glass-b); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(-50px); pointer-events: none; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.tabs-title { margin: 0 18px; font: 600 14px/1.2 var(--jak); background: var(--tabs-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tabsbar a { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px; font: 600 14px/1.2 var(--jak); color: var(--ink); transition: color .3s var(--ease), background-color .3s var(--ease); }
.tabsbar a:hover { color: var(--accent); }
.tabsbar a.is-on { background: var(--hl); color: var(--on-hl); box-shadow: var(--hl-edge); }
.tabsbar .blob { opacity: 0; }
.tabsbar:hover .blob { opacity: .6; }
body[data-zone="sections"] .hdr .switch { transform: translateY(-80px); opacity: 0; pointer-events: none; }
body[data-zone="sections"]:not([data-sec="build"]) .tabsbar--sec, body[data-zone="sections"][data-sec="build"] .tabsbar--pat { opacity: 1; transform: none; pointer-events: auto; }
.tabsbar .ptab { flex: none; }

.logo { display: inline-flex; align-items: center; color: var(--navy); }
.logo .lg--big { width: 168px; }
.logo .lg--small { width: 120px; }
@media (max-width: 1280px) { .logo .lg--big { display: none; } .logo .lg--small { display: block; } }
.logo { opacity: 0; transform: translateY(-40px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
body.show-logo .logo { opacity: 1; transform: none; }
.cta-sm { display: inline-flex; align-items: center; height: 48px; padding: 0 6px; border-radius: 999px; background: var(--pill-ring); transition: background-color .3s var(--ease); }
.cta-sm::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--blue-100); animation: pulseButton 1.5s linear infinite; pointer-events: none; }
.cta-sm-in { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font: 600 14px/1.4 var(--jak); overflow: hidden; }
.cta-sm-in.roll { height: 36px; line-height: 36px; }
.cta-sm-in.roll .ch::after { top: 100%; }
.cta-sm-short { display: none; }
.cta-sm:hover { background: var(--pill-ring-hover); }
.cta-sm .blob { width: 70px; height: 70px; filter: blur(10px); }
html[data-bg="white"] .cta-sm { background: rgba(7, 116, 196, .1); }

.motion { position: fixed; left: 20px; bottom: 20px; z-index: 41; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.mo-top { display: flex; align-items: center; justify-content: center; gap: 2px; width: 48px; height: 20px; border-radius: 999px; background: var(--accent-200); }
.mo-top i { width: 2px; height: 2px; border-radius: 50%; background: #fff; }
.motion[aria-pressed="true"] .mo-top i { animation: moDot 1.6s ease-in-out infinite; animation-delay: calc(var(--d) * 90ms); }
.mo-top i:nth-child(1) { --d: 0 } .mo-top i:nth-child(2) { --d: 1 } .mo-top i:nth-child(3) { --d: 2 } .mo-top i:nth-child(4) { --d: 3 } .mo-top i:nth-child(5) { --d: 4 }
.mo-top i:nth-child(6) { --d: 5 } .mo-top i:nth-child(7) { --d: 6 } .mo-top i:nth-child(8) { --d: 7 } .mo-top i:nth-child(9) { --d: 8 }
@keyframes moDot { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(4); border-radius: 1px; } }
.mo-label { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 8px; min-width: 72px; border-radius: 999px; background: var(--accent-200);
  font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.credit { position: fixed; right: 34px; bottom: 17px; z-index: 41; display: flex; align-items: center; gap: 10px; color: var(--hero-ink);
  font: 700 13px/1 var(--mono); letter-spacing: 1.9px; text-transform: uppercase; transition: opacity .5s var(--ease); }
.credit i { font-style: normal; opacity: .6; }
.credit a { text-transform: none; letter-spacing: .02em; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .3s; }
.credit a:hover { text-decoration-color: currentColor; }
html:not([data-bg="vibrant"]) .credit { color: var(--ink-2); }
html[data-bg="studio"] .credit { color: var(--ink); }
body:not([data-zone="journey"]) .credit { opacity: 0; }
body[data-zone="sections"] .motion { opacity: 0; transform: translateX(-90px); pointer-events: none; }

/* intro: chrome enters at +2100 ms (5.2) */
body.pre .hdr-in { opacity: 0; transform: translateY(-90px); }
body.pre .motion { opacity: 0; transform: translateX(-90px); }
body.pre .credit { opacity: 0; }
.hdr-in { transition: opacity .6s var(--ease), transform .6s var(--ease); }

/* ------------------------------------------------------------------ journey (hero → explore → 4 steps) */
.journey { position: relative; z-index: 2; height: 600vh; height: 600svh; }
.j-stage { position: sticky; top: 0; height: 100vh; height: 100svh; pointer-events: none; }
.j-stage > * { pointer-events: auto; }

/* HERO (5.3) */
.hero { position: absolute; inset: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.hero > * { pointer-events: auto; }
body:not([data-j="0"]) .hero { opacity: 0; pointer-events: none; }
body:not([data-j="0"]) .hero > * { pointer-events: none; }
.hero-l { position: absolute; left: 53px; top: 50%; transform: translateY(-52%); color: var(--hero-ink); }
.hero-logo { padding-left: 3px; margin-bottom: 18px; opacity: 0; transition: opacity .8s var(--ease); }
.hero-logo .lg { width: 200px; }
body.intro-2 .hero-logo { opacity: 1; }
/* personal mode (?for=<clinic>): the clinic's name is the first thing the owner reads */
.hero-for { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 540px; margin: 0 0 26px; padding: 14px 22px 16px 16px; border-radius: 24px;
  background: rgba(255, 255, 255, .86); border: 1px solid rgba(var(--ink-rgb), .08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .04), 0 18px 48px -24px rgba(var(--ink-rgb), .22); color: var(--ink); }
.hf-k { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.hf-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); flex: none; }
.hf-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 26px/1.15 var(--jak); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
body.personal .hero-logo { margin-bottom: 14px; }
body.personal .hero-h { --hero-size: 50px; }
.hero-h { font: 400 var(--hero-size, 60px)/1 var(--jak); letter-spacing: -.035em; font-kerning: none; color: var(--hero-ink); }
.hero-h .hl, .book-h .hl { display: block; position: relative; overflow: hidden; padding: .04em 0 .12em; margin: -.04em 0 -.12em; white-space: nowrap; }
.hero-h .lc, .book-h .lc { display: inline-block; transform: translateY(90px); opacity: 0; transition: transform .9s var(--ease), opacity .9s var(--ease); white-space: pre; }
.hero-h.in .lc, .book-h.in .lc { transform: none; opacity: 1; }
/* shine: the glyphs stay solid (white on lavender, ink on white); a gradient copy of the line sweeps over them (Vibrant's <i> overlay) */
.hl-shine { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: .04em 0 .12em; font-style: normal; white-space: inherit; pointer-events: none;
  background: var(--shine-o); background-repeat: no-repeat; background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 5s linear infinite; animation-delay: var(--sd, 0s); }
@keyframes shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }

.hero-r { position: absolute; right: 171px; top: 50%; transform: translateY(-46%); text-align: right; color: var(--hero-ink); }
/* two short lines, so the right column stays clear of the 3D head on laptop screens (Alik 2026-10-14) */
.hero-r .hero-eyebrow { line-height: 1.6; }
.hero-eyebrow { font: 700 13px/1.1 var(--mono); letter-spacing: .19rem; text-transform: uppercase; color: var(--hero-ink); margin: 0 0 22px; overflow: hidden; }
.hero-eyebrow, .hero-list li { overflow: hidden; }
.hero-eyebrow > span, .hero-list li > span { display: inline-flex; align-items: center; transform: translateY(90px); transition: transform .9s var(--ease); }
.hero-eyebrow--m { display: none; }
.hero-list { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.hero-list li > span { gap: 10px; height: 24px; font: 500 18px/24px var(--jak); letter-spacing: -.02em; }
body.intro-1 .hero-eyebrow > span, body.intro-1 .hero-list li > span { transform: none; }

.hero-start { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; opacity: 0; translate: 0 90px; transition: opacity .5s var(--ease), translate .5s var(--ease); }
body.intro-3 .hero-start { opacity: 1; translate: 0 0; }

/* Start Experience pill */
.start { position: relative; display: inline-flex; align-items: center; height: 81px; padding: 0 8px; border-radius: 999px; background: var(--pill-ring); transition: background-color .3s var(--ease); }
.start::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--blue-100); animation: pulseButton 1.5s linear infinite; pointer-events: none; }
.start:hover { background: var(--pill-ring-hover); }
.start-in { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 65px; padding: 0 32px; border-radius: 999px; background: var(--pill); overflow: hidden; color: var(--pill-ink); font: 600 16px/1.4 var(--jak); }
.start--sm { height: 64px; padding: 0 6px; }
.start--sm .start-in { height: 52px; padding: 0 26px; }
html[data-bg="white"] .start { background: rgba(7, 116, 196, .1); }
html[data-bg="white"] .start-in { box-shadow: 0 4px 20px rgba(7, 116, 196, .12); }
@keyframes pulseButton { 0% { opacity: 0; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1, 1.2); } 100% { opacity: 0; transform: scale(1.2, 1.3); } }

/* EXPLORE panel (5.5) */
.pick { position: absolute; right: 20px; bottom: 53px; width: 360px; border-radius: 40px; padding: 30px 0 8px; z-index: 9;
  background: var(--glass); border: 1px solid var(--glass-b); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--panel-shadow);
  opacity: 0; transform: translateX(50px); pointer-events: none; visibility: hidden; transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s .5s; }
body[data-j="1"] .pick { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s; }
.pick-head { display: flex; width: 100%; justify-content: center; margin-bottom: 30px; font: 700 15px/1 var(--mono); letter-spacing: .08rem; text-transform: uppercase; cursor: default; }
.pick-chev { display: none; }
.pick-list { padding: 0 16px; }
.pick-row { display: flex; align-items: center; width: 100%; height: 64px; padding: 0 30px 0 24px; margin-bottom: 8px; border-radius: 100px; overflow: hidden;
  background: var(--row); font: 600 16px/1 var(--jak); color: var(--ink); transition: background-color .3s var(--ease), color .3s var(--ease); }
.pick-row .ico { margin-right: 20px; }
.pick-row > span { flex: 1; }
.pick-row .chev { color: var(--ink); }
.pick-row:hover, .pick-row.is-hover { background: #fff; color: var(--accent); }
.pick-row:hover .chev, .pick-row.is-hover .chev { color: var(--accent); transform: translateX(10px); }
.pick-row .blob { filter: blur(8px); }
.pick-row:hover .blob { opacity: .6; }
.pick-note { padding: 10px 24px 18px; font: 400 14px/1.45 var(--jak); color: var(--ink-2); letter-spacing: -.005em; }

/* line icons (ours) */
.ico { display: inline-block; width: 30px; height: 30px; flex: none; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.ico--44 { width: 44px; height: 44px; }
.ico-web { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='23' height='17' rx='3'/%3E%3Cpath d='M3.5 10h23M7 8h.01M9.5 8h.01M8 14h8M8 17.5h5M19 14.5h4v4h-4z'/%3E%3Cpath d='M11 26h8M15 22.5V26'/%3E%3C/svg%3E"); }
.ico-app { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='3' width='13' height='24' rx='3'/%3E%3Cpath d='M13 6h4M12 12h6M12 15.5h6M12 19h3.5'/%3E%3Ccircle cx='15' cy='23.6' r='.6'/%3E%3C/svg%3E"); }
.ico-chat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8.5A3.5 3.5 0 0 1 8.5 5h13A3.5 3.5 0 0 1 25 8.5v8a3.5 3.5 0 0 1-3.5 3.5H13l-5 4v-4.2A3.5 3.5 0 0 1 5 16.5z'/%3E%3Cpath d='M17.6 9.2a3.4 3.4 0 1 0 3.2 4.5 2.7 2.7 0 0 1-3.2-4.5z'/%3E%3Cpath d='M9.5 11h3M9.5 14h4.5'/%3E%3C/svg%3E"); }
.ico-ring { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='15' cy='15' rx='11' ry='4.5'/%3E%3Cpath d='M6 15v2.5M10 18.8v2M15 19.5v2.5M20 18.8v2M24 17v1.5'/%3E%3Cpath d='M15 4v6M12.5 7.5 15 10l2.5-2.5'/%3E%3C/svg%3E"); }

/* STEP CARDS */
.steps { position: absolute; inset: 0; pointer-events: none; }
.step { position: absolute; left: 53px; top: calc(50% - 50px); width: 440px; padding: 34px 34px 30px; border-radius: 24px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--panel-b); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: var(--panel-shadow);
  opacity: 0; transform: translateY(calc(-50% + 100px)); transition: opacity .3s var(--ease), transform .5s var(--ease); }
.step.is-on { opacity: 1; transform: translateY(-50%); pointer-events: auto; transition: opacity .6s var(--ease) .45s, transform .8s var(--ease) .45s; }
.step > *, .step-xi > * { transition: opacity .6s var(--ease), transform .8s var(--ease); }
.step:not(.is-on) > *, .step:not(.is-on) .step-xi > * { opacity: 0; transform: translateY(30px); }
.step.is-on > * { transition-delay: .55s; }
.step.is-on .step-xi > * { transition-delay: .62s; }
.step .kick { margin-bottom: 20px; }
.step h2 { font: 700 30px/1.25 var(--jak); letter-spacing: -.02em; margin-bottom: 16px; text-wrap: balance; }
.step-p { font: 400 16px/24px var(--jak); color: var(--ink); margin-bottom: 22px; }
.step-tog, .step-mock { display: none; }
.step .bm-row { padding: 16px 10px 13px 18px; }
.step .bm-n { font-size: 15px; margin-bottom: 6px; }
.step .bm-c { font-size: 12px; }
.step .tag { height: 38px; font-size: 14px; }
/* Results: week 0 → 13 scrubber (the weight morph lives only in this step) */
.wk { display: flex; align-items: center; gap: 14px; margin: 2px 0 20px; }
.wk-play { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--soft); color: var(--ink);
  transition: background-color .2s var(--out), transform .15s var(--out); }
.wk-play:hover { background: var(--hl-soft); }
.wk-play:active { transform: scale(.96); }
.wk-play svg { transition: transform .5s var(--out); }
.wk-play:hover svg { transform: rotate(-40deg); }
.wk-track { flex: 1; min-width: 0; }
.wk-range { --p: 0%; display: block; width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.wk-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--hl) var(--p), var(--edge-2) var(--p)); box-shadow: var(--hl-edge-soft, none); }
.wk-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ink), 0 2px 10px rgba(var(--sh), .22); transition: transform .15s var(--out); }
.wk-range:active::-webkit-slider-thumb { transform: scale(1.08); }
.wk-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--edge-2); }
.wk-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--hl); }
.wk-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ink), 0 2px 10px rgba(var(--sh), .22); }
.wk-range:focus-visible { outline: none; }
.wk-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--ink), 0 0 0 7px var(--focus-soft); }
.wk-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--ink), 0 0 0 7px var(--focus-soft); }
.wk-ends { display: flex; justify-content: space-between; margin-top: 4px; font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ring-lb, .ring-wk { font-variant-numeric: tabular-nums; }
.mini-next { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; font: 600 15px/1 var(--jak); color: var(--accent); }
.mini-next:hover .chev { transform: translateX(6px); }

/* STEP SCREENS (product UI per step) */
.screens { position: absolute; inset: 0; pointer-events: none; }
.scr { position: absolute; right: 62px; top: calc(50% - 46px); width: 352px; transform: translateY(-50%) scale(.94); opacity: 0;
  transition: opacity .4s var(--ease), transform .6s var(--ease); }
.scr.is-on { opacity: 1; transform: translateY(-50%) scale(1); transition: opacity .6s var(--ease) .45s, transform .9s var(--ease) .45s; }
body.past .step, body.past .scr, body.past .sbar { opacity: 0 !important; pointer-events: none !important; transition: opacity .35s var(--ease), transform .5s var(--ease) !important; }
body.past .sbar { transform: translateY(80px) !important; }
/* results: the chart card sits up high so the waist label (at the tape) never covers it */
.scr--res { top: 118px; transform: scale(.94); transform-origin: right top; }
.scr--res.is-on { transform: none; }
.scr-cap { margin-top: 12px; text-align: center; font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* shared mock styling */
.mock-browser, .mock-chat, .mock-res { border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 30px 60px -20px rgba(var(--sh), .35), 0 0 0 6px rgba(255, 255, 255, .28); font-family: var(--jak); color: #1B2130; letter-spacing: -.01em; }
.mb-bar { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; background: #F2F4F9; }
.mb-bar > i { width: 7px; height: 7px; border-radius: 50%; background: #D3D8E4; }
.mb-url { flex: 1; margin-left: 10px; height: 18px; border-radius: 6px; background: #fff; display: flex; align-items: center; padding: 0 8px; font: 500 10px/1 var(--jak); color: #7B8396; }
.mb-url b { font-weight: 500; }
.mb-page { padding: 0 0 14px; }
.mw-nav { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font: 500 10.5px/1 var(--jak); color: #5D6577; border-bottom: 1px solid #EEF0F5; }
.mw-nav b { flex: 1; font: 700 12px/1.1 var(--jak); color: var(--c); }
.mw-btn { padding: 6px 10px; border-radius: 999px; color: #fff; font-weight: 600; }
.c-bg { background: var(--c); }
.mw-hero { padding: 18px 16px 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, #fff), #fff 70%); }
.mw-k { font: 600 9.5px/1 var(--jak); letter-spacing: .06em; text-transform: uppercase; color: var(--c); margin-bottom: 8px; }
.mw-h { font: 700 21px/1.12 var(--jak); letter-spacing: -.03em; margin-bottom: 12px; }
.mw-prices { display: flex; gap: 6px; flex-wrap: wrap; }
.mw-prices span { padding: 6px 9px; border-radius: 8px; background: #fff; border: 1px solid #E6E9F0; font: 500 10px/1.1 var(--jak); color: #5D6577; }
.mw-prices b { display: block; color: #1B2130; font-weight: 700; margin-top: 2px; }
.mw-book { margin: 0 16px; padding: 12px; border-radius: 14px; background: #F6F7FB; }
.mw-bt { font: 700 12px/1 var(--jak); margin-bottom: 10px; }
.mw-slots { display: flex; gap: 6px; margin-bottom: 10px; }
.mw-slots span { flex: 1; text-align: center; padding: 8px 2px; border-radius: 8px; background: #fff; border: 1px solid #E3E6EE; font: 600 9.5px/1 var(--jak); color: #39404F; }
.mw-slots .is-pick { color: #fff; border-color: transparent; background: var(--c); }
.mw-cta { display: block; text-align: center; padding: 10px; border-radius: 10px; color: #fff; font: 600 11px/1 var(--jak); }

.mock-phone { width: 250px; margin: 0 auto; padding: 9px; border-radius: 42px; background: linear-gradient(160deg, #fff, #E9EEFb); box-shadow: 0 30px 60px -20px rgba(var(--sh), .4), 0 0 0 6px rgba(255, 255, 255, .28); position: relative; }
.mp-notch { position: absolute; left: 50%; top: 17px; width: 70px; height: 20px; margin-left: -35px; border-radius: 12px; background: #1B2130; z-index: 2; }
.mp-screen { border-radius: 34px; background: #F7F8FC; padding: 46px 16px 18px; font-family: var(--jak); color: #1B2130; overflow: hidden; }
.ma-top { display: flex; align-items: center; gap: 8px; font: 700 11px/1.1 var(--jak); color: var(--c); margin-bottom: 14px; }
.ma-logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #fff; font: 700 11px/1 var(--jak); flex: none; }
.ma-h { font: 700 20px/1.1 var(--jak); letter-spacing: -.03em; margin-bottom: 12px; }
.ma-card { padding: 12px; border-radius: 14px; background: #fff; margin-bottom: 10px; box-shadow: 0 1px 0 #EDF0F6; }
.ma-k { font: 600 9px/1 var(--jak); letter-spacing: .08em; text-transform: uppercase; color: #8A92A6; margin-bottom: 6px; }
.ma-med { font: 500 14px/1.2 var(--jak); }
.ma-med b { font-weight: 700; }
.ma-s { font: 500 9.5px/1.3 var(--jak); color: #8A92A6; margin-top: 4px; }
.ma-site { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #fff; margin-bottom: 12px; }
.ma-site svg { width: 74px; height: auto; flex: none; }
.ma-site .c-fill { fill: var(--c); }
.ma-v { font: 700 14px/1.15 var(--jak); }
.ma-btn { display: block; text-align: center; padding: 12px; border-radius: 12px; color: #fff; font: 600 12px/1 var(--jak); margin-bottom: 10px; }
.ma-chk { display: flex; align-items: center; gap: 8px; font: 600 10.5px/1 var(--jak); color: #5D6577; padding: 9px 10px; border-radius: 10px; background: #EEF2FB; }
.ma-chk i { width: 8px; height: 8px; border-radius: 50%; background: #00C98A; }

.mc-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #EEF0F5; }
.mc-top div { display: flex; flex-direction: column; gap: 3px; }
.mc-top b { font: 700 12.5px/1.1 var(--jak); color: var(--c); }
.mc-top span:not(.ma-logo) { font: 500 10px/1 var(--jak); color: #7B8396; }
.mc-body { padding: 12px 14px 6px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(#FBFCFF, #F4F6FC); }
.mc-time { align-self: center; font: 700 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8A92A6; margin-bottom: 2px; }
.mc-q, .mc-a { max-width: 84%; padding: 9px 12px; border-radius: 14px; font: 500 11.5px/1.4 var(--jak); }
.mc-q { align-self: flex-end; background: var(--c); color: #fff; border-bottom-right-radius: 4px; }
.mc-a { align-self: flex-start; background: #fff; border: 1px solid #E6E9F0; border-bottom-left-radius: 4px; }
.mc-chip { display: inline-flex; margin-top: 7px; padding: 4px 8px; border-radius: 999px; font: 700 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.mc-chip--ok { background: #E3F8EF; color: #058A57; }
.mc-chip--staff { background: #FFF1E2; color: #B85C00; }
.mc-input { display: flex; align-items: center; justify-content: space-between; margin: 8px 12px 12px; height: 34px; padding: 0 6px 0 12px; border-radius: 999px; background: #fff; border: 1px solid #E3E6EE; font: 500 11px/1 var(--jak); color: #9AA1B2; }
.mc-input i { width: 24px; height: 24px; border-radius: 50%; background: var(--c); }

.mock-res { padding: 18px 18px 14px; }
.mr-k { font: 600 10px/1 var(--jak); letter-spacing: .06em; text-transform: uppercase; color: #8A92A6; margin-bottom: 10px; }
.mr-k .c-name { color: var(--c); }
.mr-big { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.mr-big > b { font: 700 34px/1 var(--jak); letter-spacing: -.04em; color: #1B2130; font-variant-numeric: tabular-nums; }
.mr-big span { font: 600 13px/1 var(--jak); color: #5D6577; }
.mr-chart { width: 100%; height: auto; }
.mr-chart .mr-line { stroke: var(--c); }
.mr-axis { display: flex; justify-content: space-between; font: 700 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8A92A6; margin-top: 4px; }
.mr-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid #EEF0F5; font: 700 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8A92A6; }

/* SLIDER BAR (5.6) */
.sbar { position: absolute; left: 0; right: 0; bottom: 20px; padding: 0 max(20px, calc(50vw - 464px)); z-index: 10; opacity: 0; transform: translateY(80px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
body[data-j="2"] .sbar, body[data-j="3"] .sbar, body[data-j="4"] .sbar, body[data-j="5"] .sbar { opacity: 1; transform: none; pointer-events: auto; }
.sbar-in { display: flex; align-items: center; justify-content: space-between; height: 106px; padding: 8px; border-radius: 100px;
  background: var(--glass); border: 1px solid var(--glass-b); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--panel-shadow); }
.sbar-pill { position: relative; height: 88px; width: var(--pw, 420px); border-radius: 80px; background: #fff; overflow: hidden; transition: width .6s var(--ease); }
.sbar-slide { position: absolute; left: 0; top: 0; height: 88px; display: flex; align-items: center; padding: 0 35px 0 22px; white-space: nowrap;
  font: 600 35px/1.2 var(--jak); letter-spacing: -.01em; color: var(--ink); opacity: 0; transform: scale(.9) translateX(-30px); transform-origin: left center;
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
.sbar-slide .ico { margin-right: 22px; }
.sbar-slide.is-on { opacity: 1; transform: none; transition-delay: .3s; }
.sbar-arrows { display: flex; gap: 8px; }
.sarrow { position: relative; width: 121px; height: 88px; border-radius: 80px; background: #fff; display: grid; place-items: center; color: var(--navy); transition: color .3s var(--ease); }
.sarrow > svg { position: relative; z-index: 1; }
.sarrow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid #0108351A; transform: scale(.9); opacity: 0; transition: opacity .3s var(--ease); }
.sarrow:hover { color: var(--accent); }
.sarrow:hover::after { opacity: 1; }
.sarrow.is-dim { background: linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .1)); box-shadow: inset 0 4px 40px #FFFFFF66; color: #fff; }
.pn-card { position: absolute; bottom: calc(100% + 28px); right: 0; width: 220px; height: 100px; padding: 0 24px; border-radius: 24px; display: flex; flex-direction: column; justify-content: center; gap: 4px; text-align: left;
  background: rgb(255 255 255 / .5); -webkit-backdrop-filter: blur(100px); backdrop-filter: blur(100px); box-shadow: inset 0 0 20px #FFFFFF3D;
  opacity: 0; transform: translateY(0); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.sarrow--prev .pn-card { right: auto; left: 0; }
.sarrow:hover .pn-card { opacity: 1; transform: translateY(-10px); }
.pn-k { font: 400 13px/1.4 var(--jak); letter-spacing: -.01em; text-transform: uppercase; color: var(--ink-2); }
.pn-n { font: 600 20px/1.2 var(--jak); color: var(--ink); }

/* ------------------------------------------------------------------ 3D-anchored HTML (4.8) */
.anchors { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.anchors > * { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); will-change: transform; }
.anchors > .is-on { opacity: 1; pointer-events: auto; transition: opacity .3s var(--ease) .7s; }

/* body circles (list state) */
.bcircle { width: 80px; height: 80px; margin: -40px 0 0 -40px; transform: translate3d(var(--x, -200px), var(--y, -200px), 0); }
.bcircle i { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; }
.bc-glow { width: 50px; height: 50px; margin: -25px; background: radial-gradient(circle, var(--accent-200) 0%, transparent 70%); transition: opacity .4s; }
.bc-outer { width: 50px; height: 50px; margin: -25px; border: .6px solid #FFFFFF66; transition: width .5s var(--out), height .5s var(--out), margin .5s var(--out), opacity .5s var(--out); }
.bc-inner { width: 40px; height: 40px; margin: -20px; background: var(--hair); -webkit-mask: radial-gradient(circle, transparent 17.5px, #000 18px); mask: radial-gradient(circle, transparent 17.5px, #000 18px); transition: transform .4s var(--spring); }
.bc-dot { width: 8px; height: 8px; margin: -4px; background: #fff; transition: all .4s var(--spring); }
.bc-d2, .bc-d3 { width: 4px; height: 4px; margin: -2px; opacity: 0; }
.bcircle:hover .bc-inner, .bcircle.is-hover .bc-inner { transform: scale(1.2); }
.bcircle:hover .bc-outer, .bcircle.is-hover .bc-outer { width: 64px; height: 64px; margin: -32px; opacity: .4; }
.bcircle:hover .bc-glow, .bcircle.is-hover .bc-glow { opacity: .2; }
.bcircle:hover .bc-dot, .bcircle.is-hover .bc-dot { width: 4px; height: 4px; margin: -2px; transform: translate(0, -4px); }
.bcircle:hover .bc-d2, .bcircle.is-hover .bc-d2 { opacity: 1; transform: translate(-4px, 3px); }
.bcircle:hover .bc-d3, .bcircle.is-hover .bc-d3 { opacity: 1; transform: translate(4px, 3px); }

/* test hotspots (slider state) */
.hotspot { display: flex; align-items: center; height: 57px; padding-right: 24px; border-radius: 100px; white-space: nowrap;
  background: linear-gradient(90deg, #FFF0, #FFF); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transform: translate3d(calc(var(--x, -400px) - 28.5px), calc(var(--y, -400px) - 28.5px), 0); }
.hs-circle { position: relative; width: 57px; height: 57px; margin-right: 24px; border-radius: 50%; border: 2px solid #fff; background: rgb(255 255 255 / .1);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); flex: none; transition: background-color .3s var(--ease); }
.hs-circle::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
.hs-dot { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #fff; }
.hs-vfx { position: absolute; inset: -2px; border-radius: 50%; transform: scale(1.5); animation: rotateVFX 10s linear infinite; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(255, 190, 230, .9) 14%, transparent 24%, rgba(255, 255, 255, .85) 44%, transparent 56%, rgba(190, 210, 255, .9) 72%, transparent 84%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 63%, #000 68%, transparent 71%); mask: radial-gradient(circle, transparent 60%, #000 63%, #000 68%, transparent 71%); filter: blur(1.5px); }
@keyframes rotateVFX { to { transform: scale(1.5) rotate(-360deg); } }
.hs-label { font: 600 16px/1 var(--jak); color: var(--ink); -webkit-text-stroke: .25px var(--ink); }
.hs-label em { font-style: normal; font-weight: 500; color: var(--ink-2); -webkit-text-stroke: 0; }
.hs-label b { font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-arrow { width: .1rem; margin-left: .1rem; height: 18px; opacity: 0; background: var(--accent); transition: all .3s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='18' fill='none'%3E%3Cpath d='M1.5 1.5 8.5 9l-7 7.5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left center/auto 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='18' fill='none'%3E%3Cpath d='M1.5 1.5 8.5 9l-7 7.5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left center/auto 18px no-repeat; }
.hotspot:hover .hs-circle, .hotspot.is-hover .hs-circle { background: var(--hl); }
.hotspot:hover .hs-circle::after, .hotspot.is-hover .hs-circle::after { animation: pulseCircle 1.5s ease-out infinite; }
.hotspot:hover .hs-arrow, .hotspot.is-hover .hs-arrow { width: .9rem; margin-left: 1.7rem; opacity: 1; }
@keyframes pulseCircle { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.hotspot--ring .hs-label { font-size: 17px; }

/* ------------------------------------------------------------------ WHAT WE BUILD (story panel, 5.7) */
.build { position: relative; z-index: 3; display: grid; grid-template-columns: 54.55% 45.45%; min-height: 100vh; }
.build-panel { grid-column: 1; position: relative; z-index: 2; border-radius: 0 24px 0 0; border: 1px solid var(--panel-b); border-left: 0; border-bottom: 0;
  background: var(--panel); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: var(--panel-shadow); padding-top: 9vw; }
/* top: clipped under the header line; bottom: the panel dissolves into the page instead of showing a flat end edge */
.build-panel { -webkit-mask-image: linear-gradient(to bottom, transparent var(--clip, 0px), #000 var(--clip, 0px), #000 calc(100% - 150px), transparent);
  mask-image: linear-gradient(to bottom, transparent var(--clip, 0px), #000 var(--clip, 0px), #000 calc(100% - 150px), transparent); }
.build-col { width: 444px; margin: 0 auto; }
.build-top { margin-bottom: 56px; }
.build-top .kick { margin-bottom: 18px; }
.ptabs { display: inline-flex; flex-wrap: wrap; gap: 8px; padding: 8px; border-radius: 28px; overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-b); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-bg="vibrant"] .ptabs { background: rgba(255, 255, 255, .35); border-color: rgba(255, 255, 255, .6); }
.ptab { position: relative; z-index: 1; height: 32px; padding: 0 16px; border-radius: 999px; font: 600 14px/1.2 var(--jak); color: var(--ink); transition: color .3s var(--ease), background-color .3s var(--ease); }
.ptab:hover { color: var(--accent); }
.ptab.is-on { background: var(--hl); color: var(--on-hl); box-shadow: var(--hl-edge); }
.ptabs .blob { opacity: 0; }
.ptabs:hover .blob { opacity: .6; }
.pat { animation: patIn .6s var(--ease) both; }
@keyframes patIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.blk { padding-bottom: 32px; }
.blk--title { padding-bottom: 32px; }
.h1 { font: 700 40px/56px var(--jak); letter-spacing: -.01em; margin-bottom: 24px; }
.sub { font: 600 16px/1.4 var(--jak); }
.h2 { position: relative; font: 700 22px/1.4 var(--jak); letter-spacing: -.01em; margin-bottom: 24px; }
.h2 .dotsp { position: absolute; left: -25px; top: 7px; }
.blk > p { font: 400 16px/24px var(--jak); margin-bottom: 24px; }
.blk > p b { font-weight: 700; }
.blk > p.note, .note { font: 400 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: -8px 0 0; }
.bm--lg { margin-bottom: 0; }
.pcard { background: #fff; padding: 10px; border-radius: 10px; margin-bottom: 15px; }
.pc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 50px; padding: 0 16px; border-radius: 8px; background: var(--hair); font: 600 16px/1.2 var(--jak); color: var(--accent); }
html:not([data-bg="vibrant"]) .pc-bar { background: linear-gradient(270deg, #E8EFFF, #DDF1FF 20%, #F1EBFF 50%, #E2EEFF 80%, #F6EAFF); }
.dl { padding: 24px 30px 0; }
.dl li { position: relative; padding-left: 15px; margin-bottom: 24px; font: 400 16px/24px var(--jak); }
.dl li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.ul { padding-left: 17px; list-style: disc; margin-bottom: 32px; }
.ul li { font: 400 16px/24px var(--jak); margin-bottom: 15px; }
.blk--next { padding-bottom: 180px; }
.ncard { position: relative; display: flex; align-items: center; justify-content: space-between; width: 444px; max-width: 100%; height: 100px; padding: 0 6px 0 36px; border-radius: 44px; overflow: hidden; text-align: left;
  background: var(--next); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); }
html:not([data-bg="vibrant"]) .ncard { border: 1px solid var(--panel-b); }
.nc-txt { display: flex; flex-direction: column; gap: 4px; max-width: 300px; }
.nc-k { font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.nc-t { font: 600 16px/1.4 var(--jak); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s var(--ease); }
.nc-btn { position: relative; display: grid; place-items: center; width: 76px; height: 88px; border-radius: 40px; background: #fff; color: var(--navy); flex: none; transition: color .3s var(--ease); }
.nc-btn svg { position: relative; z-index: 1; }
.nc-glow { position: absolute; inset: 10px; border-radius: 50%; background: var(--irid); filter: blur(10px); opacity: 0; transition: opacity .3s var(--ease); }
.ncard:hover .nc-t, .ncard:hover .nc-btn { color: var(--accent); }
.ncard:hover .nc-glow { opacity: 1; }
.ncard:hover .blob { opacity: .8; }
.qr { display: flex; align-items: center; gap: 32px; min-height: 153px; padding: 16px 40px 16px 16px; border-radius: 16px; background: linear-gradient(#FFFFFF66, #FFFFFF33); margin-bottom: 32px; }
html:not([data-bg="vibrant"]) .qr { background: var(--soft); }
.qr-mark { display: grid; place-items: center; width: 121px; height: 121px; border-radius: 10px; background: #fff; flex: none; }
.qr-mark span { font: 700 34px/1 var(--jak); letter-spacing: -.04em; background: var(--tabs-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qr-k { font: 700 13px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.qr-t { font: 700 18px/1.35 var(--jak); max-width: 540px; margin-bottom: 12px; }
.qr-link { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1 var(--jak); color: var(--accent); }
.mobile-visual { display: none; }

/* right column (5.7): a frosted glass lens over the glowing region. It stays a circle while it grows past the column's
   corners as you read "What we build for it", then shrinks back (scroll-scrubbed in main.js: --cd diameter, --g progress). */
.build-right { grid-column: 2; position: relative; z-index: 1; display: block; margin-bottom: -70vh; pointer-events: none; }
.vis-circle { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); height: calc(100svh - var(--hdr)); width: 48vw; margin-left: -2.55vw; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
.vis-inner { position: absolute; left: 50%; top: 50%; width: var(--cd, 208px); height: var(--cd, 208px); border-radius: 50%; overflow: hidden; isolation: isolate;
  background: var(--lens, rgba(255, 255, 255, .4)); -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 0 44px rgba(255, 255, 255, .5);
  opacity: 0; transform: translate(-50%, -50%) scale(.25); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.build.vis-on .vis-inner { opacity: 1; transform: translate(-50%, -50%); transition: opacity .6s var(--ease) .3s, transform .6s var(--ease) .3s; }
.vis-ring { position: absolute; left: 50%; top: 50%; width: calc(var(--cd, 208px) + 12px); height: calc(var(--cd, 208px) + 12px); transform: translate(-50%, -50%); border-radius: 50%;
  border: 6px solid rgb(255 255 255 / .6); box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .07), 0 24px 60px -24px rgba(var(--ink-rgb), .32); pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease); }
.build.vis-on .vis-ring { opacity: clamp(0, calc(1 - var(--g, 0) * 1.6), 1); }
.vis { position: absolute; left: 50%; top: 50%; width: 48vw; height: calc(100svh - var(--hdr)); transform: translate(-50%, -50%); opacity: 0; transition: opacity .6s var(--ease); }
.vis.is-on { opacity: 1; }
.vis::before { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 38% at 50% 46%, rgba(var(--hl-rgb, 136, 170, 251), .2), rgba(var(--hl-rgb, 136, 170, 251), 0) 72%); pointer-events: none; }
.vis > .vis-ui { position: absolute; left: 50%; top: 50%; z-index: 1; width: 340px; transform: translate(-50%, -50%) scale(var(--vs, .58)); transform-origin: 50% 50%; }
.vis-chip { position: absolute; z-index: 2; padding: 9px 14px; border-radius: 999px; background: #fff; font: 600 12px/1 var(--jak); color: var(--ink); white-space: nowrap;
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .06), 0 12px 30px -10px rgba(var(--ink-rgb), .28); animation: bob 6s ease-in-out infinite; opacity: clamp(0, calc((var(--g, 1) - .45) * 3), 1); }
.vis-chip i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--hl); margin-right: 7px; vertical-align: 1px; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.vis-badge { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); white-space: nowrap; font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  opacity: clamp(0, calc((var(--g, 1) - .55) * 3), 1); }
.vis > .vis-ui .mock-phone { width: 250px; }
.mobile-visual .vis > .vis-ui { --vs: 1; }
.mobile-visual .vis-chip, .mobile-visual .vis-badge { opacity: 1; }
.mobile-visual .vis-badge { bottom: -28px; }

/* ------------------------------------------------------------------ generic sections */
.sec { position: relative; z-index: 3; }
.h-xl { font: 400 64px/1 var(--jak); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.lead { font: 400 18px/1.5 var(--jak); letter-spacing: -.015em; color: var(--ink); max-width: 600px; }
.sec-label { position: absolute; left: 26px; top: 151px; display: flex; align-items: center; gap: 10px; font: 600 18px/1 var(--jak); letter-spacing: -.02em; }
.glass-card { background: var(--panel); border: 1px solid var(--panel-b); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); border-radius: 24px; box-shadow: var(--panel-shadow); }

/* ------------------------------------------------------------------ CONCEPT PROJECTS (Monolog "Success Stories", 10.1) */
.concepts { padding: 151px 64px 120px 260px; }
.concepts .sec-label { position: sticky; top: 112px; left: auto; margin: 0 0 -18px -234px; width: 220px; }
.cx-head { margin: 0 0 72px; max-width: 900px; }
.cx-head .kick { margin-bottom: 20px; }
.cx-head .h-xl { margin-bottom: 24px; max-width: 820px; }
.cx { display: grid; grid-template-columns: minmax(0, 666fr) minmax(0, 434fr); gap: 16px; padding: 32px 0; border-top: 1px dashed var(--line); }
.cx + .cx { margin-top: 0; }
.cx-img { position: relative; aspect-ratio: 666 / 444; overflow: hidden; padding: 0; }
.cx-slides { position: absolute; inset: 0; }
.cx-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); display: grid; place-items: center; padding: 56px 28px 28px; }
.cx-slide.is-on { opacity: 1; }
.badge { position: absolute; left: 18px; top: 18px; z-index: 2; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.cx-txt { padding: 4px 0 0; display: flex; flex-direction: column; align-items: flex-start; }
.cx-idx { display: flex; align-items: center; gap: 8px; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 18px; }
.cx-idx span { padding: 2px 5px; border: 1px solid var(--ink); border-radius: 5px; letter-spacing: .06em; }
.cx-t { font: 700 24px/1.1 var(--jak); letter-spacing: -.015em; margin-bottom: 8px; }
.cx-city { font: 400 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px; }
.cx-d { font: 500 17.5px/1.3 var(--jak); color: var(--ink-2); margin-bottom: 18px; letter-spacing: -.015em; }
.dl--plain { padding: 0; }
.dl--plain li { font-size: 15px; line-height: 22px; margin-bottom: 10px; }
.cx-metric { display: flex; align-items: center; gap: 14px; margin: 14px 0 22px; font: 500 15px/1.3 var(--jak); }
.ncard--sm { width: 100%; height: 88px; }
.ncard--sm .nc-btn { height: 76px; width: 70px; }
/* personal mode: their own concept first, built from the themed product screens */
.cmp-you { display: grid; place-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 12%, #fff), #F6F7FB); box-shadow: none; overflow: hidden; }
.cmp-you > .mock-browser, .cmp-you > .mock-chat { width: 352px; max-width: 88%; }
.cmp-you > .mock-phone { transform: scale(.7); margin: -80px 0; }
.cx--you { border-top-style: solid; }
.cx--you .cx-idx { color: var(--accent); }
.cx-foot { margin-top: 24px; font: 400 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }

/* concept compositions (all HTML/CSS, fictional clinics) */
.cmp { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: #fff; font-family: var(--jak); color: #1B2130; box-shadow: 0 30px 60px -30px rgba(var(--sh), .35); letter-spacing: -.01em; }
.cs-nav { display: flex; align-items: center; gap: 18px; padding: 14px 22px; font: 500 12px/1 var(--jak); color: #5D6577; border-bottom: 1px solid #EEF0F5; }
.cs-nav b { flex: 1; font: 700 14px/1 var(--jak); color: var(--c); }
.cs-btn { display: inline-flex; padding: 9px 14px; border-radius: 999px; background: var(--c); color: #fff; font: 600 12px/1 var(--jak); }
.cs-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; padding: 22px 22px 16px; background: var(--c2, #F6F7FB); }
.cs-k { font: 600 10px/1 var(--jak); letter-spacing: .08em; text-transform: uppercase; color: var(--c); margin-bottom: 10px; }
.cs-h { font: 700 24px/1.08 var(--jak); letter-spacing: -.035em; margin-bottom: 10px; }
.cs-p { font: 500 12.5px/1.45 var(--jak); color: #5D6577; margin-bottom: 14px; }
/* mock hero art: the clinic's own booking card + care team (UI, not a stock photo or abstract blobs) */
.cs-art { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, #fff), color-mix(in srgb, var(--c) 55%, #fff)); }
.ca-card { padding: 11px 13px; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px -14px rgba(16, 24, 40, .35); }
.ca-k { font: 600 9.5px/1 var(--jak); letter-spacing: .08em; text-transform: uppercase; color: #5D6577; margin-bottom: 6px; }
.ca-v { font: 700 16px/1.1 var(--jak); letter-spacing: -.02em; color: #1B2130; margin-bottom: 8px; }
.ca-btn { display: inline-flex; padding: 7px 11px; border-radius: 999px; background: var(--c); color: #fff; font: 600 10.5px/1 var(--jak); }
.ca-team { display: flex; align-items: center; gap: 0; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .78); }
.ca-av { position: relative; display: grid; place-items: center; width: 26px; height: 26px; margin-right: -4px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 0 0 2px #fff; font: 700 8.5px/1 var(--jak); letter-spacing: -.02em; }
.ca-av:nth-child(2) { background: color-mix(in srgb, var(--c) 70%, #fff); color: #1B2130; }
.ca-av:nth-child(3) { background: color-mix(in srgb, var(--c) 40%, #fff); color: #1B2130; }
.ca-av:nth-child(1) { z-index: 3; } .ca-av:nth-child(2) { z-index: 2; }
.ca-team p { flex: 1; margin-left: 12px; font: 600 11px/1.3 var(--jak); color: #39404F; white-space: nowrap; }
.cs-row { position: relative; display: flex; gap: 10px; padding: 12px 22px 22px; }
.cs-row span { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid #E6E9F0; font: 500 11px/1.2 var(--jak); color: #5D6577; }
.cs-row span b { display: block; margin-top: 3px; font: 700 12.5px/1.2 var(--jak); color: #1B2130; }
.cs-sample, .mw-sample { position: absolute; right: 22px; bottom: 6px; font: 700 8.5px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #5D6577; }
.mw-prices { position: relative; padding-bottom: 14px; }
.mw-sample { right: auto; left: 0; bottom: 0; }
.cs-first { padding: 24px 26px; }
.cs-first ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; counter-reset: s; margin-top: 16px; }
.cs-first li { padding: 14px; border-radius: 12px; background: var(--c2); font: 500 12px/1.4 var(--jak); color: #5D6577; }
.cs-first li b { display: block; font: 700 14px/1.2 var(--jak); color: var(--c); margin-bottom: 6px; }
.cmp-chatwide { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; }
.cw-col { padding: 22px; background: #F7F8FC; display: flex; flex-direction: column; gap: 10px; }
.cw-q, .cw-a { max-width: 88%; padding: 10px 13px; border-radius: 14px; font: 500 12.5px/1.4 var(--jak); }
.cw-q { align-self: flex-end; background: var(--c); color: #fff; }
.cw-a { background: #fff; border: 1px solid #E6E9F0; }
.cw-a span { display: block; margin-top: 6px; font: 700 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #058A57; }
.cw-a span.w { color: #B85C00; }
.cw-book { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.cw-days, .cw-times { display: flex; gap: 6px; }
.cw-days span, .cw-times span { flex: 1; text-align: center; padding: 9px 4px; border-radius: 10px; border: 1px solid #E3E6EE; font: 600 11px/1.2 var(--jak); color: #5D6577; }
.cw-days b { display: block; font-size: 15px; color: #1B2130; }
.cw-days .on, .cw-times .on { background: var(--c); color: #fff; border-color: transparent; }
.cw-days .on b { color: #fff; }
.cmp-phones { display: flex; align-items: center; justify-content: center; gap: 26px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, #fff), #F6F7FB); box-shadow: none; }
.ph { width: 188px; padding: 7px; border-radius: 32px; background: #fff; box-shadow: 0 24px 50px -20px rgba(var(--sh), .4); }
.ph--b { transform: translateY(18px); }
.ph-s { border-radius: 26px; background: #F7F8FC; padding: 22px 13px 14px; height: 330px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ph-brand { font: 700 11px/1 var(--jak); color: var(--c); }
.ph-h { font: 700 17px/1.1 var(--jak); letter-spacing: -.03em; margin-bottom: 2px; }
.ph-q { display: flex; justify-content: space-between; padding: 9px 10px; border-radius: 10px; background: #fff; font: 500 11px/1 var(--jak); color: #5D6577; }
.ph-q b { color: #1B2130; }
.ph-btn { margin-top: auto; text-align: center; padding: 10px; border-radius: 10px; background: var(--c); color: #fff; font: 600 11px/1 var(--jak); }
.ph-note { font: 700 8.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8A92A6; text-align: center; }
.ph-s svg { width: 100%; height: auto; }
.ph-steps { display: flex; gap: 4px; }
.ph-steps span { flex: 1; text-align: center; padding: 8px 2px; border-radius: 8px; background: #E9ECF4; font: 600 9px/1 var(--jak); color: #8A92A6; }
.ph-steps .on { background: var(--c); color: #fff; }
.ph-msg { padding: 9px 11px; border-radius: 12px; background: #fff; font: 500 11px/1.4 var(--jak); max-width: 92%; }
.ph-msg--me { align-self: flex-end; background: var(--c); color: #fff; }
.cmp-dash { display: grid; grid-template-columns: 150px 1fr; }
.cd-side { padding: 20px 16px; background: color-mix(in srgb, var(--c) 92%, #000); color: rgba(255, 255, 255, .7); display: flex; flex-direction: column; gap: 6px; font: 500 12px/1 var(--jak); }
.cd-side b { color: #fff; font: 700 14px/1 var(--jak); margin-bottom: 14px; }
.cd-side span { padding: 9px 10px; border-radius: 8px; }
.cd-side .on { background: rgba(255, 255, 255, .14); color: #fff; }
.cd-main { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.cd-h { font: 700 19px/1.1 var(--jak); letter-spacing: -.03em; margin-bottom: 6px; }
.cd-row { display: grid; grid-template-columns: 10px 90px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; border: 1px solid #EEF0F5; font: 500 11.5px/1.3 var(--jak); color: #5D6577; }
.cd-row span:nth-child(2) { color: #1B2130; font-weight: 600; }
.cd-row b { padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font: 600 11px/1 var(--jak); }
.cd-row i { width: 10px; height: 10px; border-radius: 50%; }
i.r { background: #FF4F5E; } i.a { background: #FFB246; } i.g { background: #00C98A; }
.cmp-sms { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; padding: 0 28px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 12%, #fff), #F6F7FB); box-shadow: none; }
.ph-s--sms { gap: 7px; }
.sms-from { font: 700 10px/1.2 var(--jak); color: #5D6577; text-align: center; margin-bottom: 4px; }
.sms-in, .sms-out { padding: 8px 10px; border-radius: 12px; font: 500 10.5px/1.35 var(--jak); max-width: 86%; }
.sms-in { background: #E9ECF4; }
.sms-out { align-self: flex-end; background: #34C759; color: #fff; }
.sms-flag { padding: 22px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -20px rgba(var(--sh), .3); }
.sf-h { font: 700 20px/1.1 var(--jak); letter-spacing: -.03em; margin-bottom: 14px; }
.sf-li { padding: 11px 12px; border-radius: 10px; background: #FFF4F2; font: 500 12.5px/1.35 var(--jak); margin-bottom: 8px; }
.sf-li b { color: var(--c); }
.sf-note { font: 500 11px/1.4 var(--jak); color: #8A92A6; margin-top: 6px; }
.cmp-report { padding: 26px 30px; display: flex; flex-direction: column; }
.rp-h { font: 700 22px/1.1 var(--jak); letter-spacing: -.03em; margin-bottom: 18px; }
.rp-bars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: end; }
.rp-bars div { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 6px; font: 600 12px/1.2 var(--jak); color: #5D6577; }
.rp-bars span { display: block; border-radius: 10px; }
.rp-bars span.g { background: linear-gradient(#00C9CC, #00CC6C); } .rp-bars span.a { background: linear-gradient(#FFB246, #FF8930); }
.rp-bars span.r { background: linear-gradient(#FF467B, #FF5213); } .rp-bars span.b { background: linear-gradient(#88AAFB, #0774C4); }
.rp-bars em { font: 700 20px/1 var(--jak); font-style: normal; color: #1B2130; }
.rp-note { margin-top: 14px; font: 700 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8A92A6; }

/* ------------------------------------------------------------------ HOW IT WORKS (Significa steps, 10.2) */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 694px); gap: 48px; padding: 151px 48px 120px; }
.how-l { position: sticky; top: 140px; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.how-l .lead { max-width: 440px; }
.how-r { position: relative; padding-left: 120px; }
.how-r::before { content: ""; position: absolute; left: 48px; top: 8px; bottom: 8px; width: 2px; background: var(--hair-v); border-radius: 2px; }
html:not([data-bg="vibrant"]) .how-r::before { background: linear-gradient(#C1E8FF, #E6DFFF 50%, #D5E8FF); }
.hstep { position: relative; margin-bottom: 24px; }
.hs-num { position: absolute; left: -88px; top: 26px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--jak);
  background: #fff; color: var(--accent); box-shadow: 0 0 0 6px rgb(255 255 255 / .41); }
.hs-card { padding: 28px 32px 30px; border-radius: 24px; background: var(--panel); border: 1px solid var(--panel-b); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: var(--panel-shadow); }
.hs-card .kick { margin-bottom: 14px; }
.hs-card h3 { font: 700 22px/1.4 var(--jak); margin-bottom: 10px; }
.hs-card p:not(.kick) { font: 400 16px/24px var(--jak); color: var(--ink); margin-bottom: 18px; max-width: 520px; }

/* ------------------------------------------------------------------ PRICING (10.3): protocol cards on one glass tray, Monolog-size numerals */
.pricing { padding: 151px 48px 120px; }
.pr-head { max-width: 760px; margin-bottom: 48px; }
.pr-head .h-xl { margin-bottom: 24px; }
.pr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; padding: 16px; border-radius: 32px;
  background: var(--panel); border: 1px solid var(--panel-b); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: var(--panel-shadow); }
html[data-bg="studio"] .pr-grid { background: var(--soft); border-color: transparent; box-shadow: none; }
.price { position: relative; display: flex; flex-direction: column; padding: 10px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(var(--ink-rgb), .04), 0 12px 32px -18px rgba(var(--ink-rgb), .18);
  transition: transform .5s var(--out), box-shadow .5s var(--out); }
.price:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(var(--ink-rgb), .04), 0 24px 48px -22px rgba(var(--ink-rgb), .26); }
.price .pc-bar { height: 50px; border-radius: 12px; font-size: 15px; }
.price .pc-bar span:last-child { white-space: nowrap; font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.price-main { position: relative; padding: 26px 20px 4px; }
.price-flag { position: absolute; right: 18px; top: 40px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--hl); color: var(--on-hl); box-shadow: var(--hl-edge);
  font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.price-n { display: flex; align-items: baseline; gap: 10px; font: 500 56px/1 var(--jak); letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.price-n small { font: 600 15px/1 var(--jak); letter-spacing: -.01em; color: var(--ink-2); }
.price-t { font: 400 15px/1.45 var(--jak); color: var(--ink-2); max-width: 340px; }
.price-t b { font-weight: 700; color: var(--ink); }
.price .dl { padding: 22px 20px 6px; border-top: 1px solid var(--edge); margin: 22px 10px 0; padding-left: 10px; padding-right: 10px; }
.price .dl li { font-size: 15px; line-height: 22px; margin-bottom: 14px; }
.price-cta { position: relative; display: flex; align-items: center; justify-content: center; height: 52px; margin: auto 10px 10px; border-radius: 999px; overflow: hidden;
  font: 600 15px/1 var(--jak); color: var(--ink); background: var(--soft); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .08);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .15s var(--out); }
.price-cta span { position: relative; z-index: 1; }
.price-cta:hover { background: var(--soft-3); }
.price-cta--hl { background: var(--pill); color: var(--pill-ink); box-shadow: none; }
.price-cta--hl:hover { background: color-mix(in srgb, var(--pill) 86%, #fff); }
.price-cta .blob { filter: blur(10px); }
.price-cta:hover .blob { opacity: .55; }
.price--hl { box-shadow: 0 0 0 1.5px var(--hl-line), 0 0 0 6px rgba(var(--hl-rgb, 7, 116, 196), .22), 0 24px 48px -22px rgba(var(--ink-rgb), .3); }
.price--hl:hover { box-shadow: 0 0 0 1.5px var(--hl-line), 0 0 0 6px rgba(var(--hl-rgb, 7, 116, 196), .3), 0 30px 56px -22px rgba(var(--ink-rgb), .34); }
.offer { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 32px 32px 32px 40px; border-radius: 40px;
  background: var(--panel); border: 1px solid var(--panel-b); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: var(--panel-shadow); }
.offer-k { display: flex; align-items: center; gap: 14px; font: 700 13px/1 var(--mono); letter-spacing: .146em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.offer-k .tag { height: 32px; font-size: 13px; border-radius: 12px; }
.offer-t { font: 700 26px/1.25 var(--jak); letter-spacing: -.015em; margin-bottom: 10px; max-width: 760px; text-wrap: balance; }
.offer-p { font: 400 16px/24px var(--jak); max-width: 760px; color: var(--ink-2); }

/* ------------------------------------------------------------------ FAQ (Monolog split + Vibrant rows, 10.4) */
.faq { display: grid; grid-template-columns: 468px minmax(0, 1fr); padding: 106px 64px 120px 26px; }
.faq-l { position: sticky; top: 112px; height: calc(100vh - 150px); display: flex; flex-direction: column; justify-content: space-between; align-self: start; }
.sec-label--in { position: static; }
.founder { max-width: 320px; }
/* founder name card: an elegant ID card (photo slot appears only when data-photo is set) */
.f-card { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; row-gap: 18px; padding: 22px 22px 20px; margin-bottom: 22px; border-radius: 24px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--panel-b); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: var(--panel-shadow); }
.f-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--hl), color-mix(in srgb, var(--hl) 35%, #fff) 60%, transparent); }
.f-photo { display: none; width: 64px; height: 64px; border-radius: 50%; background: var(--soft) center/cover no-repeat; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px rgba(var(--ink-rgb), .1); }
.founder.has-photo .f-photo { display: block; }
.founder:not(.has-photo) .f-id { grid-column: 1 / -1; }
.f-nm { font: 600 34px/1 var(--jak); letter-spacing: -.035em; color: var(--ink); margin-bottom: 8px; }
.f-role { font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.f-hours { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--edge); font: 500 15px/1.3 var(--jak); color: var(--ink); }
.f-hours i { width: 8px; height: 8px; border-radius: 50%; background: #00B86B; box-shadow: 0 0 0 4px rgba(0, 184, 107, .16); flex: none; }
.f-mark { position: absolute; right: 18px; top: 20px; width: 28px; height: 28px; opacity: .9; }
.f-q { font: 600 22px/1.2 var(--jak); letter-spacing: -.02em; margin-bottom: 16px; }
.f-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 18px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font: 600 15px/1 var(--jak); overflow: hidden; }
.f-btn:hover .blob { opacity: .8; }
.h-faq { font: 400 64px/1 var(--jak); letter-spacing: -.03em; margin-bottom: 48px; max-width: 728px; }
.qa-list { max-width: 920px; }
.qa { margin-bottom: 8px; border-radius: 32px; transition: background-color .3s var(--ease); }
.qa.open { background: var(--card-w); }
.qa h3 { margin: 0; font: inherit; }
.qa-q { display: flex; align-items: center; width: 100%; min-height: 64px; padding: 12px 30px 12px 24px; border-radius: 100px; overflow: hidden; text-align: left;
  background: var(--row); font: 600 16px/1.3 var(--jak); color: var(--ink); transition: background-color .3s var(--ease), color .3s var(--ease); }
.qa-q > span { flex: 1; padding-right: 20px; transition: transform .65s cubic-bezier(.16, 1, .35, 1); }
.qa-q .chev { transition: transform .3s var(--ease); }
.qa-q:hover { background: #fff; color: var(--accent); }
.qa-q:hover > span { transform: translateX(10px); }
.qa-q:hover .chev { transform: translateX(10px); }
.qa-q:hover .blob { opacity: .6; }
.qa-q .blob { filter: blur(8px); }
.qa.open .qa-q { background: #fff; color: var(--accent); }
.qa.open .qa-q .chev { transform: rotate(90deg); }
.qa-a { padding: 18px 24px 26px; max-width: 668px; }
.qa-a p { font: 400 16px/24px var(--jak); color: var(--ink); }

/* ------------------------------------------------------------------ BOOK (Vibrant hero language, 10.5) */
.book { position: relative; z-index: 3; height: 100vh; height: 100svh; min-height: 640px; color: var(--hero-ink); }
.book-l { position: absolute; left: 53px; top: 50%; transform: translateY(-56%); max-width: 520px; }
.book-k { font: 700 13px/1 var(--mono); letter-spacing: 1.9px; text-transform: uppercase; color: var(--hero-sub); margin-bottom: 22px; }
.book-h { font: 400 72px/1 var(--jak); letter-spacing: -.035em; color: var(--hero-ink); font-kerning: none; margin-bottom: 24px; }
/* small laptops: the big headlines shrink just enough that their longest line (hero ~8.1 em, book ~6.2 em) ends before
   the 3D head (centre ± 14vh); big screens keep their sizes (Alik 2026-10-14: no text over the body) */
@media (min-width: 901px) {
  .hero-h { font-size: min(var(--hero-size, 60px), max(34px, calc((50vw - 14vh - 80px) / 8.2))); }
  .book-h { font-size: min(72px, max(40px, calc((50vw - 14vh - 80px) / 6.2))); }
}
.book-p { font: 400 18px/1.45 var(--jak); letter-spacing: -.02em; color: var(--hero-sub); max-width: 420px; }
.book-r { position: absolute; right: 171px; top: 50%; transform: translateY(-46%); text-align: right; }
.book-list li > span { transform: none; }
.book-cta { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.book-doors { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; justify-content: center; }
.door2 { display: inline-flex; align-items: center; height: 65px; padding: 0 32px; border-radius: 999px; overflow: hidden; font: 600 16px/1 var(--jak); color: var(--ink);
  background: var(--glass); border: 1px solid rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .3s var(--ease); }
.door2:hover { background-color: rgb(255 255 255 / .61); }
.door2:hover .blob { opacity: .6; }
.book-mail { margin-top: 14px; font: 500 14px/1 var(--jak); color: var(--hero-ink); }
.book-mail a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ footer */
.foot { position: relative; z-index: 3; padding: 0 20px 20px; }
.foot-in { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; padding: 36px 40px 28px; border-radius: 40px;
  background: var(--panel); border: 1px solid var(--panel-b); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: var(--panel-shadow); }
.foot-logo { display: block; width: 200px; height: auto; margin-bottom: 14px; }
.foot-a p, .foot-b p { font: 400 15px/1.5 var(--jak); color: var(--ink-2); }
.foot-b { justify-self: end; text-align: right; }
.foot-b a { color: var(--accent); font-weight: 600; }
.foot-links { display: flex; gap: 18px; justify-content: flex-end; }
.foot-note { grid-column: 1 / -1; padding-top: 22px; border-top: 2px solid transparent; border-image: var(--hair) 1; font: 400 13px/1.4 var(--mono); letter-spacing: .04em; color: var(--ink-2); max-width: 900px; }
.foot-c { grid-column: 1 / -1; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }

/* ------------------------------------------------------------------ modals (Cal.com frame in Vibrant glass) */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; }
.modal-bg { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fadeIn .4s var(--ease); }
.modal-panel { position: relative; width: min(1040px, 100%); max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); overflow: auto; border-radius: 40px; padding: 80px 28px 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .7)); border: 1px solid var(--panel-b); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  box-shadow: 0 40px 120px -30px rgba(var(--sh), .4); animation: panelIn .8s var(--ease); scrollbar-width: none; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes panelIn { from { opacity: 0; transform: translateY(60px); } }
.modal-x { position: absolute; right: 22px; top: 22px; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink); z-index: 2; }
.modal-x:hover { color: var(--accent); }
.switch--modal { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); background: rgba(var(--ink-rgb), .05); border-color: rgba(var(--ink-rgb), .08); }
.switch--modal .sw-btn { padding: 0 18px; }
.door--call { display: grid; grid-template-columns: 270px minmax(0, 1fr) 250px; gap: 0; border-radius: 24px; background: #fff; overflow: hidden; min-height: 470px; }
.cal-info { padding: 26px 24px; border-right: 1px solid var(--edge); }
.cal-brand { display: flex; align-items: center; gap: 10px; font: 600 14px/1 var(--jak); color: var(--ink-2); margin-bottom: 14px; }
.cal-mark { display: block; width: 30px; height: 30px; border-radius: 9px; }
.cal-t { font: 700 22px/1.2 var(--jak); letter-spacing: -.02em; margin-bottom: 12px; }
.cal-d { font: 400 14px/1.5 var(--jak); color: var(--ink-2); margin-bottom: 20px; }
.cal-meta li { display: flex; align-items: center; gap: 10px; font: 500 14px/1.2 var(--jak); margin-bottom: 14px; }
.cm-ico { width: 20px; height: 20px; flex: none; color: var(--ink); }
.cal-note { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--soft); font: 500 12.5px/1.45 var(--jak); color: var(--ink-2); }
.cal-grid { padding: 24px 20px; border-right: 1px solid var(--edge); }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.cal-m { font: 700 16px/1 var(--jak); }
.cal-nav { width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--ink-2); text-align: center; }
.cal-nav:hover { background: var(--soft); color: var(--accent); }
.cal-dow, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow span { text-align: center; font: 600 11px/1 var(--jak); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 10px; }
.cal-days button, .cal-days span { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font: 600 14px/1 var(--jak); color: #A2A9B8; }
.cal-days button { background: var(--soft-2); color: var(--ink); transition: background-color .2s, color .2s; }
.cal-days button:hover { background: var(--soft-3); }
.cal-days button.is-on { background: var(--hl); color: var(--on-hl); box-shadow: var(--hl-edge); }
.cal-slots { padding: 24px 18px; display: flex; flex-direction: column; min-height: 0; }
.cal-day { font: 700 15px/1 var(--jak); margin-bottom: 14px; }
.slots { display: flex; flex-direction: column; gap: 8px; overflow: auto; max-height: 330px; scrollbar-width: thin; }
.slots button { height: 40px; border-radius: 10px; border: 1px solid var(--edge-2); background: #fff; font: 600 14px/1 var(--jak); text-align: center; flex: none; }
.slots button:hover { border-color: var(--accent); color: var(--accent); }
.slots button.is-on { background: var(--hl); color: var(--on-hl); border-color: var(--hl-line); }
.slots-empty { font: 400 14px/1.45 var(--jak); color: var(--ink-2); }
.slot-go { margin-top: 14px; display: grid; place-items: center; height: 48px; border-radius: 16px; background: var(--btn); color: var(--on-btn); font: 600 14px/1 var(--jak); transition: transform .15s var(--out), opacity .2s; }
.cal-alt { margin-top: 12px; font: 400 12.5px/1.5 var(--jak); color: var(--ink-2); }
.cal-alt b { font-weight: 600; color: var(--ink); }
.copy-mail { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; margin-left: 4px; border-radius: 999px; background: var(--soft); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .1);
  font: 600 12px/1 var(--jak); color: var(--ink); vertical-align: middle; transition: background-color .2s var(--ease), transform .15s var(--out); }
.copy-mail:hover { background: var(--soft-3); }
.copy-mail:active { transform: scale(.96); }
.copy-mail.is-done { background: var(--hl); color: var(--on-hl); box-shadow: var(--hl-edge); }
.copy-mail--lg { height: 56px; padding: 0 22px; border-radius: 20px; font-size: 15px; margin: 0; }
.door--done { display: flex; flex-direction: column; gap: 14px; max-width: 700px; margin: 0 auto; }
.bd-k { font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.bd-p { font: 400 15px/1.5 var(--jak); color: var(--ink-2); }
.bd-p b { color: var(--ink); font-weight: 600; }
.door--done textarea { height: 170px; font: 400 14px/1.5 var(--mono); }
.bd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bd-back { height: 56px; padding: 0 12px; font: 600 15px/1 var(--jak); color: var(--accent); }
.bd-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.door--brief { display: flex; flex-direction: column; gap: 16px; max-width: 700px; margin: 0 auto; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { width: 100%; padding: 0; margin-bottom: 10px; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; }
.chips span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--edge-2); font: 600 14px/1 var(--jak); cursor: pointer; transition: all .2s; }
.chips input:checked + span { background: var(--hl); border-color: var(--hl-line); color: var(--on-hl); }
.chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fld { display: flex; flex-direction: column; gap: 8px; font: 600 14px/1 var(--jak); }
.fld input, .fld textarea { height: 56px; border-radius: 20px; padding: 16px 20px; border: 1px solid rgba(23, 23, 23, .1); background: rgba(255, 255, 255, .8); font: 400 16px/1.4 var(--jak); color: var(--ink); outline: none; }
.fld textarea { height: 144px; resize: vertical; }
.fld input:focus, .fld textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus-soft); }
.f-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.f-foot p { font: 400 14px/1.4 var(--jak); color: var(--ink-2); }
.f-foot a { color: var(--accent); font-weight: 600; }
.f-send { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 24px; border-radius: 20px; background: var(--btn); color: var(--on-btn); font: 600 16px/1 var(--jak); }
.f-err { font: 500 14px/1.4 var(--jak); color: #D02B4B; }
.modal-panel--concept { width: min(1040px, 100%); max-height: min(90vh, 100% - 48px); max-height: min(90svh, 100% - 48px); padding: 72px 28px 28px; }
.cm-body .cx-img { width: 100%; aspect-ratio: auto; overflow: visible; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cm-body .cx-slides { position: static; display: grid; gap: 18px; }
.cm-body .cx-slide { position: relative; inset: auto; opacity: 1; display: block; padding: 0; }
.cm-body .cmp { height: auto; container-type: inline-size; }
.cm-body .cmp-phones { padding: 30px 20px 40px; }
.cm-body .cmp-sms { padding: 30px; }
.cm-body .cmp-report { min-height: 320px; }
.cm-body .badge { position: static; margin-bottom: 18px; }
.cm-sub { font: 400 15px/1.5 var(--jak); color: var(--ink-2); margin: -4px 0 18px; max-width: 640px; }
/* narrow lightbox (phones): the mocks reflow instead of shrinking */
@container (max-width: 560px) {
  .cs-nav span:not(.cs-btn) { display: none; }
  .cs-hero { grid-template-columns: 1fr; }
  .cs-row { flex-wrap: wrap; }
  .cs-row span { flex: 1 1 40%; }
  .cs-first ol { grid-template-columns: 1fr 1fr; }
  .cmp-chatwide { grid-template-columns: 1fr; }
  .cmp-phones { flex-wrap: wrap; gap: 14px; }
  .cmp-phones .ph { width: 158px; }
  .cmp-phones .ph--b { transform: none; }
  .cmp-dash { grid-template-columns: 1fr; }
  .cd-side { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cd-side b { margin: 0 8px 0 0; }
  .cd-row { grid-template-columns: 10px 1fr auto; }
  .cd-row span:nth-child(3) { grid-column: 2 / 3; }
  .cmp-sms { grid-template-columns: 1fr; justify-items: center; }
  .rp-bars { gap: 10px; }
}

/* ------------------------------------------------------------------ white mode details */
html:not([data-bg="vibrant"]) .hero-l, html:not([data-bg="vibrant"]) .hero-r { color: var(--ink); }
html:not([data-bg="vibrant"]) .scr-cap { color: var(--ink-2); }
html:not([data-bg="vibrant"]) .hotspot { background: linear-gradient(90deg, #FFF0, #FFF 40%); box-shadow: 0 8px 30px -10px rgba(var(--ink-rgb), .2); }
html:not([data-bg="vibrant"]) .hs-circle { border-color: var(--accent-200); background: rgba(136, 170, 251, .12); }
html:not([data-bg="vibrant"]) .hs-dot { background: var(--dot); }
html:not([data-bg="vibrant"]) .bc-outer { border-color: rgba(7, 116, 196, .35); }
html:not([data-bg="vibrant"]) .bc-dot { background: var(--dot); }
html:not([data-bg="vibrant"]) .sarrow.is-dim { background: var(--soft); box-shadow: none; color: #B9C4DA; }
html:not([data-bg="vibrant"]) .pn-card { background: rgba(255, 255, 255, .9); box-shadow: 0 10px 40px -10px rgba(var(--ink-rgb), .2); }
html:not([data-bg="vibrant"]) .sbar-pill, html:not([data-bg="vibrant"]) .sarrow { box-shadow: 0 2px 12px rgba(var(--ink-rgb), .08); }
html:not([data-bg="vibrant"]) .bm-row, html:not([data-bg="vibrant"]) .pcard { box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .06); }
html:not([data-bg="vibrant"]) .qa-q { border: 1px solid rgba(var(--ink-rgb), .06); }
html:not([data-bg="vibrant"]) .mock-browser, html:not([data-bg="vibrant"]) .mock-chat, html:not([data-bg="vibrant"]) .mock-res { border-color: rgba(var(--ink-rgb), .08); box-shadow: 0 30px 60px -24px rgba(var(--sh), .25); }
html:not([data-bg="vibrant"]) .door2 { border-color: rgba(var(--ink-rgb), .12); }
html:not([data-bg="vibrant"]) .mo-top, html:not([data-bg="vibrant"]) .mo-label { background: var(--btn); }
html[data-bg="vibrant"] .mo-top, html[data-bg="vibrant"] .mo-label { background: #0774C4; }
/* ?bg=white: panels keep their shape on the white page; the disabled arrow stays visible */
html[data-bg="white"] { --panel: #F7F9FE; --panel-b: rgba(40, 47, 60, .08); --panel-shadow: 0 30px 80px rgba(40, 47, 60, .06); }
html[data-bg="white"] .build-panel { border: 1px solid rgba(40, 47, 60, .08); border-left: 0; }
html[data-bg="white"] .sarrow.is-dim { background: rgba(40, 47, 60, .05); color: #A7AFC0; }

/* ------------------------------------------------------------------ studio (default) details: white + ink + one warm saffron */
html[data-bg="studio"] .hr { background: linear-gradient(90deg, rgba(14, 15, 18, .1), rgba(245, 180, 0, .55) 35%, rgba(14, 15, 18, .1) 70%, rgba(14, 15, 18, .06)); height: 1px; }
html[data-bg="studio"] .pc-bar { background: linear-gradient(90deg, #FFF6D6, #FFFBEF 60%, #FFF3CC); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(245, 180, 0, .28); }
html[data-bg="studio"] .how-r::before { background: linear-gradient(rgba(14, 15, 18, .08), #F5B400 18%, rgba(245, 180, 0, .5) 60%, rgba(14, 15, 18, .06)); }
html[data-bg="studio"] .hs-num { background: #fff; color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 7px #fff, 0 0 0 8px rgba(245, 180, 0, .45); }
html[data-bg="studio"] .hs-circle { border-color: #0E0F12; background: rgba(255, 255, 255, .7); }
html[data-bg="studio"] .hs-vfx { background: conic-gradient(from 0deg, transparent 0 8%, rgba(245, 180, 0, .95) 16%, transparent 28%, rgba(255, 255, 255, .9) 44%, transparent 56%, rgba(255, 211, 77, .8) 72%, transparent 84%); }
html[data-bg="studio"] .hotspot:hover .hs-circle, html[data-bg="studio"] .hotspot.is-hover .hs-circle { background: #F5B400; }
html[data-bg="studio"] .hs-circle::after { border-color: #F5B400; }
html[data-bg="studio"] .bc-outer { border-color: rgba(14, 15, 18, .32); }
html[data-bg="studio"] .bc-inner { background: linear-gradient(135deg, #F5B400, #FFE39A 50%, #F5B400); }
html[data-bg="studio"] .bc-glow { background: radial-gradient(circle, rgba(245, 180, 0, .55) 0%, transparent 70%); }
html[data-bg="studio"] .tag--orange::before, html[data-bg="studio"] .tag--green::before { background: currentColor; }
html[data-bg="studio"] .sarrow.is-dim { background: var(--soft); color: #B7B2A8; }
html[data-bg="studio"] .mo-top, html[data-bg="studio"] .mo-label { background: var(--ink); }
html[data-bg="studio"] .mo-top i { background: #F5B400; }

/* ------------------------------------------------------------------ responsive */
@media (min-width: 1600px) {
  .build-col { width: 620px; }
  .hero-h { --hero-size: 72px; }
}
@media (max-width: 1440px) and (min-width: 1181px) {
  body[data-zone="sections"] .logo { display: none; }
}
@media (max-width: 1280px) {
  .scr { right: 32px; width: 320px; transform-origin: right center; }
  .step { width: 410px; }
  .concepts { padding-left: 64px; }
  .concepts .sec-label { display: none; }
  .faq { grid-template-columns: 360px minmax(0, 1fr); }
  .hero-h { --hero-size: 54px; }
}
/* tablet */
@media (max-width: 1180px) {
  .hero-r { right: 40px; }
  .hero-l { left: 40px; }
  .hero-h { --hero-size: 48px; }
  .scr { display: none; }
  .tabs-title { display: none; }
  body[data-zone="sections"] .logo { display: none; }
  .build { grid-template-columns: 1fr; }
  .build-right { display: none; }
  .build-panel { border-radius: 24px 24px 0 0; border-left: 1px solid var(--panel-b); }
  .mobile-visual { display: block; position: relative; height: 440px; border-radius: 24px; overflow: hidden; margin-bottom: 40px; padding-bottom: 0;
    background: radial-gradient(58% 52% at 50% 46%, rgba(var(--hl-rgb, 136, 170, 251), .2), rgba(var(--hl-rgb, 136, 170, 251), 0) 72%), var(--soft); }
  .mobile-visual .vis { width: 100%; height: 100%; opacity: 1; }
  .mobile-visual .vis::before { content: none; }
  .mobile-visual .vis-chip { display: none; }
  .cx { grid-template-columns: 1fr; gap: 24px; }
  .how { grid-template-columns: 1fr; }
  .how-l { position: static; }
  .pr-grid { grid-template-columns: 1fr; max-width: 560px; }
  .offer { flex-direction: column; align-items: flex-start; }
  .faq { grid-template-columns: 1fr; padding-left: 48px; padding-right: 48px; }
  .faq-l { position: static; height: auto; margin-bottom: 40px; gap: 40px; }
  .door--call { grid-template-columns: 1fr 1fr; }
  .cal-info { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--edge); }
}
/* tablets: short header CTA so the centred tabs never touch it */
@media (max-width: 1180px) and (min-width: 768px) {
  .cta-sm-in { display: none; }
  .cta-sm-short { display: inline-flex; align-items: center; white-space: nowrap; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font: 600 14px/1 var(--jak); position: relative; z-index: 1; }
  .tabsbar a, .tabsbar .ptab { padding: 0 11px; font-size: 13.5px; }
}
@media (max-width: 900px) and (min-width: 768px) {
  .hero-r { display: none; }
  .hero-l { right: 40px; top: auto; bottom: 150px; transform: none; }
}
/* portrait tablets: the step card becomes a wide card above the slider bar, the figure keeps the top of the screen */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) {
  .step { left: 50%; width: min(600px, calc(100% - 48px)); top: auto; bottom: 146px; padding: 26px 30px 24px; transform: translate(-50%, 60px); }
  .step.is-on { transform: translate(-50%, 0); }
  .step h2 { font-size: 26px; margin-bottom: 10px; }
  .step-p { margin-bottom: 16px; }
  .step .bm-row + .bm-row { display: none; }
}

/* the phone CTA bar exists only on phones */
.mcta { display: none; }
.t-short { display: none; }

/* phones (7) */
@media (max-width: 767px) {
  :root { --hdr: 76px; }
  .hdr-in { grid-template-columns: 44px 1fr auto; padding: 18px 12px 0; gap: 6px; }
  .hdr-l { min-height: 44px; position: relative; }
  .hdr-c { justify-self: center; }
  .switch { height: 44px; padding: 0 5px; }
  .switch-ind { top: 5px; height: 32px; }
  .sw-btn { padding: 0 12px; font-size: 12px; letter-spacing: 1.4px; }
  .sw-btn svg { display: none; }
  .logo { display: none; transform: none; }
  .logo .lg--big { display: none; }
  .logo .lg--small { display: block; width: 112px; }
  body[data-zone="sections"]:not([data-sec="build"]) .logo { display: inline-flex; opacity: 1; }
  .cta-sm { height: 44px; padding: 0 4px; }
  .cta-sm-in { display: none; }
  .cta-sm-short { display: inline-flex; align-items: center; white-space: nowrap; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font: 600 14px/1 var(--jak); position: relative; z-index: 1; }
  body.mcta-on .cta-sm { display: none; }
  .back { margin-left: 6px; }
  .credit, .motion { display: none; }
  .crosshair { display: none; }

  /* story pill (Vibrant mobile story name): the pattern you are reading in What we build */
  .step-pill { position: absolute; left: 50px; top: 1px; display: inline-flex; align-items: center; gap: 8px; height: 43px; padding: 0 16px; border-radius: 20px; background: #fff; box-shadow: 0 4px 80px rgba(0, 0, 0, .24);
    font: 700 15px/1 var(--mono); letter-spacing: .06rem; text-transform: uppercase; color: var(--ink); white-space: nowrap; max-width: calc(100vw - 196px); overflow: hidden;
    opacity: 0; transform: translateX(30px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .sp-num { color: var(--accent); }
  .sp-name { overflow: hidden; text-overflow: ellipsis; }
  body.mpill .step-pill { opacity: 1; transform: none; pointer-events: auto; }

  /* What we build: the pattern tabs dock to the bottom (Vibrant 7); short labels fit 390 without scrolling */
  .t-long { display: none; }
  .t-short { display: inline; }
  .hdr-c .tabsbar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: 67px; padding: 0 10px calc(env(safe-area-inset-bottom) * .5); border-radius: 24px 24px 0 0; background: #fff; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 -20px 80px rgba(0, 0, 0, .2); overflow-x: auto; scrollbar-width: none; transform: translateY(110%); justify-content: space-around; gap: 0; }
  .tabsbar::-webkit-scrollbar { display: none; }
  .tabsbar--sec { display: none !important; }
  .hdr-c .tabsbar .ptab { height: 67px; padding: 0 12px; font-size: 16px; background: none !important; color: var(--ink) !important; border-radius: 0; box-shadow: none; flex: none; }
  .hdr-c .tabsbar .ptab.is-on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 9px; height: 4px; border-radius: 2px; background: var(--hl); box-shadow: var(--hl-edge); }
  body[data-zone="sections"] .hdr .switch { transform: translateY(-80px); }
  body[data-zone="sections"][data-sec="build"] .hdr-c .tabsbar--pat { transform: none; }
  .tabsbar .blob { display: none; }

  /* hero (7): content pinned to the bottom, centred */
  .hero-l { left: 16px; right: 16px; top: auto; bottom: 146px; transform: none; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero-logo { margin-bottom: 10px; }
  .hero-logo .lg { width: 150px; }
  .hero-for { align-items: center; text-align: center; max-width: 100%; padding: 12px 18px 14px; margin-bottom: 14px; }
  .hf-name { font-size: 21px; }
  .hero-h { --hero-size: 38px; }
  body.personal .hero-h { --hero-size: 31px; }
  .hero-h .hl { white-space: normal; }
  .hero-r { display: none; }
  .hero-eyebrow--m { display: block; font-size: 12.5px; letter-spacing: .12rem; line-height: 1.35; margin: 0 0 14px; color: var(--hero-ink); max-width: 330px; text-wrap: balance; }
  .hero-start { bottom: 40px; }

  /* explore bottom sheet (7) */
  .pick { left: 0; right: 0; bottom: 0; width: auto; border-radius: 40px 40px 0 0; padding: 18px 0 20px; transform: translateY(100%); background: var(--glass); }
  html[data-bg="vibrant"] .pick { background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5)); }
  body[data-j="1"] .pick { transform: translateY(calc(100% - 87px)); }
  body[data-j="1"] .pick.open { transform: none; }
  .pick-head { cursor: pointer; align-items: center; gap: 12px; height: 50px; margin-bottom: 14px; }
  .pick-chev { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; transform: rotate(-90deg); transition: transform .5s var(--ease); box-shadow: 0 2px 10px rgba(var(--ink-rgb), .12); }
  .pick.open .pick-chev { transform: rotate(90deg); }
  .pick-list { padding: 0 17px; }
  .pick-row { height: 58px; }
  .pick-note { font-size: 13px; }

  /* steps: Vibrant's mobile slider bar at the bottom (‹ name ›) */
  .sbar { left: 12px; right: 12px; bottom: 16px; padding: 0; }
  .sbar-in { height: 76px; padding: 0 7px; border-radius: 100px; gap: 0; background: #fff; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, .5), 0 0 0 8px rgba(var(--ink-rgb), .06), 0 22px 44px -18px rgba(var(--ink-rgb), .32); }
  .sbar-pill { order: 1; flex: 1; min-width: 0; width: auto !important; height: 62px; background: none; box-shadow: none !important; }
  .sbar-slide { left: 0; right: 0; height: 62px; justify-content: center; padding: 0; font-size: 23px; transform: scale(.94); transform-origin: center; }
  .sbar-slide .ico { display: none; }
  .sbar-arrows { display: contents; }
  .sarrow { width: 58px; height: 58px; flex: none; border-radius: 50%; background: transparent !important; box-shadow: none !important; }
  .sarrow::after { inset: 4px; border-radius: 50%; transform: none; }
  .sarrow--prev { order: 0; }
  .sarrow--next { order: 2; }
  .sarrow > svg { width: 12px; height: 18px; }
  .sarrow.is-dim { opacity: .35; color: var(--navy) !important; }
  .pn-card { display: none; }

  /* step card = a bottom sheet above the bar: the title peeks, "More" opens the story, the stat and the matching screen */
  .step { left: 12px; right: 12px; width: auto; top: auto; bottom: 106px; max-height: calc(100svh - 196px); padding: 18px 18px 14px 20px; border-radius: 28px; background: var(--card-w);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; transform: translateY(60px); box-shadow: 0 1px 2px rgba(var(--ink-rgb), .05), 0 24px 60px -24px rgba(var(--ink-rgb), .35); }
  .step::-webkit-scrollbar { display: none; }
  .step.is-on { transform: none; }
  .step .kick { margin-bottom: 8px; font-size: 11px; }
  .step h2 { font-size: 20px; line-height: 1.25; margin: 0; }
  .step-x { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
  .step-xi { overflow: hidden; min-height: 0; }
  .step.is-open .step-x { grid-template-rows: 1fr; }
  .step-p { font-size: 15px; line-height: 22px; margin: 12px 0 14px; }
  .step .bm-row { padding: 12px 10px 10px 14px; }
  .step .bm-n { font-size: 14px; }
  .step-mock { display: block; position: relative; height: 304px; margin: 14px 0 2px; border-radius: 20px; overflow: hidden;
    background: radial-gradient(60% 55% at 50% 50%, rgba(var(--hl-rgb, 136, 170, 251), .18), rgba(var(--hl-rgb, 136, 170, 251), 0) 75%), var(--soft); }
  .step-mock > * { position: absolute; left: 50%; top: calc(50% - 12px); width: 330px; transform: translate(-50%, -50%) scale(.74); }
  .step-mock > .mock-phone { width: 250px; transform: translate(-50%, -50%) scale(.6); }
  .step-mock .scr-cap { display: none; }
  .step-mock > .sm-cap { position: absolute; left: 0; right: 0; top: auto; bottom: 10px; width: auto; transform: none; text-align: center; font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
  .mini-next { margin: 14px 0 4px; }
  .step-tog { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 16px; margin-top: 12px; border-radius: 999px; background: var(--soft); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .06);
    font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); transition: background-color .3s var(--ease), transform .15s var(--out); }
  .step-tog:active { transform: scale(.96); }
  .step-tog .chev { transform: rotate(90deg); width: 7px; height: 11px; }
  .step.is-open .step-tog .chev { transform: rotate(-90deg); }
  .st-less, .step.is-open .st-more { display: none; }
  .step.is-open .st-less { display: inline; }
  .wk { margin: 12px 0 0; }
  .scr { display: none; }
  /* hotspots (7): circle, 8 px gap, white label pill; never a white halo */
  .hotspot, html:not([data-bg="vibrant"]) .hotspot { height: auto; flex-direction: column; align-items: center; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    transform: translate3d(calc(var(--x, -400px) - 50%), calc(var(--y, -400px) - 24px), 0); }
  .hotspot .hs-circle { margin: 0 0 8px; width: 48px; height: 48px; }
  .hotspot .hs-label { display: inline-block; height: 36px; line-height: 36px; padding: 0 14px; border-radius: 100px; background: #fff; font-size: 14px; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(var(--ink-rgb), .35); }
  .hotspot .hs-arrow { display: none; }

  /* build: transparent window onto the 3D, then white cards (7) */
  .build-panel { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding-top: 0; }
  .build-col { width: auto; }
  .blk { background: var(--card-w); padding-left: 20px; padding-right: 20px; }
  .blk--title { padding-top: 36px; border-radius: 40px 40px 0 0; }
  .build { padding-top: 30vh; }
  .h1 { font-size: 32px; line-height: 44.8px; }
  .h2 .dotsp { display: none; }
  .blk--next { padding-bottom: 120px; }
  .ncard { width: 100%; }
  .nc-txt { max-width: 64%; }
  .mobile-visual { height: 380px; margin-left: -4px; margin-right: -4px; }
  .mobile-visual .vis > .vis-ui { --vs: .8; }
  .mobile-visual .vis-chip { display: none; }
  /* the header gets its scrim wherever page content scrolls under it */
  body[data-zone="sections"][data-sec="build"] .hdr::before, body[data-zone="sections"][data-sec="book"] .hdr::before { opacity: 1; }
  .qr { flex-direction: column; align-items: flex-start; padding: 16px; gap: 16px; }

  /* page sections: never start under the header (>= 96 px), sticky CTA bar at the bottom */
  .h-xl, .h-faq { font-size: 40px; }
  .lead { font-size: 16px; }
  .concepts { padding: 104px 16px 64px; }
  .cx-head { margin-bottom: 40px; }
  .cx-img { aspect-ratio: auto; height: 300px; }
  .cx-slide { display: block; padding: 0; }
  .cx-slide > .cmp { position: absolute; left: 50%; top: calc(50% + 16px); width: 600px; height: 380px; transform: translate(-50%, -50%) scale(var(--k, .5)); transform-origin: 50% 50%; }
  /* the lightbox shows the real (reflowing) mocks, not the card thumbnails */
  .cm-body .cx-img { height: auto; }
  .cm-body .cx-slide > .cmp { position: relative; left: auto; top: auto; width: auto; height: auto; transform: none; }
  .cm-body .cal-t { font-size: 22px; padding-right: 52px; }
  .cm-sub { font-size: 14px; }
  .ncard--sm .nc-txt { max-width: 70%; }
  .how { padding: 104px 16px 64px; gap: 40px; }
  .how-r { padding-left: 52px; }
  .how-r::before { left: 16px; }
  .hs-num { left: -52px; }
  .hs-card { padding: 22px 20px; }
  .pricing { padding: 104px 16px 64px; }
  .pr-grid { padding: 8px; border-radius: 26px; gap: 10px; }
  .price-n { font-size: 46px; }
  .price-flag { position: static; margin-bottom: 12px; }
  .price-main { padding: 22px 14px 2px; }
  .price .dl { margin: 18px 4px 0; }
  .pc-bar { font-size: 15px; padding: 0 12px; }
  .offer { padding: 24px 20px; border-radius: 32px; gap: 24px; }
  .offer-t { font-size: 21px; }
  .faq { display: flex; flex-direction: column; padding: 104px 16px 64px; }
  .faq-l { display: contents; }
  .faq .sec-label--in { order: 0; margin-bottom: 18px; }
  .faq-r { order: 1; }
  .founder { order: 2; margin-top: 44px; max-width: none; }
  .h-faq { margin-bottom: 32px; }
  .f-q { font-size: 19px; }
  .qa-q { padding: 14px 22px 14px 20px; }
  .qa-a { padding: 14px 20px 22px; }
  .book { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 104px 12px 40px; text-align: center; }
  .book-l, .book-r, .book-cta { position: static; transform: none; }
  .book-l { margin: 0 auto 28px; display: flex; flex-direction: column; align-items: center; }
  .book-h { font-size: 44px; }
  .book-p { font-size: 16px; }
  .book-r { display: none; }
  .book-doors { flex-direction: column; gap: 10px; }
  .foot { padding: 0 10px 20px; }
  .foot-in { grid-template-columns: 1fr; padding: 28px 22px; border-radius: 32px; }
  .foot-b { justify-self: start; text-align: left; }
  .modal { padding: 0; align-items: end; }
  .modal-panel { border-radius: 32px 32px 0 0; max-height: 92svh; padding: 76px 14px 18px; }
  .modal-panel--concept { max-height: 92svh; padding: 64px 14px 18px; }
  .switch--modal { top: 16px; }
  .door--call { grid-template-columns: 1fr; }
  .cal-grid { border-right: 0; border-bottom: 1px solid var(--edge); }
  .f-row { grid-template-columns: 1fr; }
  .f-foot { flex-direction: column-reverse; align-items: stretch; }

  .mcta { display: flex; flex-direction: column; align-items: stretch; gap: 7px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 24px 24px 0 0; box-shadow: 0 -16px 60px rgba(0, 0, 0, .16);
    transform: translateY(110%); visibility: hidden; transition: transform .5s var(--ease), visibility 0s .5s; }
  body.mcta-on .mcta { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
  .mcta-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font: 600 16px/1 var(--jak); transition: transform .15s var(--out); }
  .mcta-btn:active { transform: scale(.98); }
  .mcta-note { text-align: center; font: 500 12.5px/1.2 var(--jak); color: var(--ink-2); }
}
@media (max-width: 359px) {
  .sw-btn { padding: 0 9px; font-size: 11px; letter-spacing: 1px; }
  .cta-sm-short { padding: 0 11px; font-size: 13px; }
  .hero-h { --hero-size: 34px; }
  .sbar-slide { font-size: 20px; }
}

@media (hover: none) {
  .blob { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .hero-h .lc, .book-h .lc { transform: none; opacity: 1; }
  .hl-shine { display: none; }
}
/* screenshot mode (?shot, review captures only): no pulsing rings, and every transition / animation jumps to its end state
   (headless Chrome's virtual time does not advance compositor transitions, so faded-in states would stay invisible) */
.is-shot .start::before, .is-shot .cta-sm::before { animation: none; opacity: 0; }
.is-shot .hl-shine { animation: none; opacity: 0; }
.is-shot *, .is-shot *::before, .is-shot *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }

/* anchors only live in the journey */
.anchors { transition: opacity .4s var(--ease); }
body:not([data-zone="journey"]) .anchors { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
/* motion off: freeze decorative CSS loops */
html.still .vis-chip, html.still .hl-shine, html.still .start::before, html.still .cta-sm::before,
html.still .hs-vfx, html.still .mo-top i { animation-play-state: paused !important; }

/* mobile: the explore sheet sits above the body circles when open */
body.sheet-open .anchors { opacity: 0; pointer-events: none; }

/* press feedback: small, fast, on everything you tap */
.start-in, .cta-sm-in, .cta-sm-short, .door2, .f-btn, .f-send, .nc-btn, .sarrow, .wk-play, .modal-x, .back-in, .pick-row, .qa-q, .price-cta, .slots button, .cal-days button, .chips span { -webkit-tap-highlight-color: transparent; }
.start:active .start-in, .cta-sm:active .cta-sm-in, .cta-sm:active .cta-sm-short, .door2:active, .f-btn:active, .f-send:active, .ncard:active .nc-btn, .sarrow:active > svg,
.modal-x:active, .back:active .back-in, .price-cta:active, .slots button:active, .cal-days button:active { transform: scale(.97); }
.start-in, .cta-sm-in, .cta-sm-short, .f-btn, .f-send, .modal-x, .back-in, .slots button, .cal-days button { transition: color .3s var(--ease), background-color .3s var(--ease), transform .15s var(--out); }
.door2 { transition: background-color .3s var(--ease), transform .15s var(--out); }
.sarrow > svg { transition: transform .15s var(--out); }
.nc-btn { transition: color .3s var(--ease), transform .15s var(--out); }