/* Hallmark · shape: scroll story · genre: modern-minimal · theme: custom · job: hire · built: the project · redesign: polish · idea: "a studio whose own page runs like the systems it builds: a turning key, a pipe that gets stuck, a stack that fills" · vibe: "instrument-like, calm, orange signal"
 * paper: oklch(96% 0.004 95) · accent: oklch(66% 0.2 45) · display: IBM Plex Sans Hebrew · body: Geist · hero: Settled, a headline with a turning key over a sunrise gradient · nav: edge-aligned · footer: four columns · imagery: photographs and the product built live · signature: the turning key in the headline
 * axes: light/grotesk-sans/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R3 V4 · weakest: E, many colour literals sit outside the token block, kept because the renders use them as materials */
/* H.T.Z Studios — V6 landing page (V5 + 3D stack, steadier scroll, tighter copy).
   Instrument-like, one continuous scroll story, in a dark and a light theme.
   No external requests: fonts are self-hosted and every dynamic value is set
   from v6.js through CSS custom properties (CSP: style-src 'self'). */

/* ── Fonts ─────────────────────────────────────────────────────────────
   One family per role. Latin glyphs come from Geist; Hebrew from IBM Plex
   Sans Hebrew, stitched in by unicode-range so mixed lines just work. */
@font-face { font-family: "Sans"; src: url(/fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-058F, U+0600-FFFF; }
@font-face { font-family: "Sans"; src: url(/fonts/plex-hebrew-300-hebrew.woff2) format("woff2"); font-weight: 100 349; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F, U+20AA; }
@font-face { font-family: "Sans"; src: url(/fonts/plex-hebrew-400-hebrew.woff2) format("woff2"); font-weight: 350 449; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F, U+20AA; }
@font-face { font-family: "Sans"; src: url(/fonts/plex-hebrew-500-hebrew.woff2) format("woff2"); font-weight: 450 900; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F, U+20AA; }

@font-face { font-family: "Mono"; src: url(/fonts/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-001F, U+0021-058F, U+0600-FFFF; }
@font-face { font-family: "Mono"; src: url(/fonts/plex-hebrew-400-hebrew.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0020, U+0590-05FF, U+FB1D-FB4F, U+20AA; }

@font-face { font-family: "Display"; src: url(/fonts/plex-hebrew-300-latin.woff2) format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Display"; src: url(/fonts/plex-hebrew-300-hebrew.woff2) format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F, U+20AA; }

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  --sans: "Sans", system-ui, sans-serif;
  --mono: "Mono", ui-monospace, monospace;
  --display: "Display", "Sans", sans-serif;

  --wrap: 1100px;
  --gut: 24px;
  --bar: 54px;
  --banner: 36px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --press: cubic-bezier(.16, .84, .32, 1);
  --orange: #ef5a00;
  --ok: #46c97d;

  --okey-face: linear-gradient(156deg, #ee6a1f 14%, #c64a0b 88%);
  --okey-edge: rgb(255 210 184 / .7);
  --okey-lit: inset 1px 1px 0 rgb(255 255 255 / .25);
  --lkey-face: linear-gradient(135deg, #f3f1ee 0%, #ebe8e4 50%, #dfdbd7 100%);
  --lkey-bevel: inset -1px -1.5px 1.5px rgb(130 124 122 / .35), inset 1px 1px 0 rgb(255 255 255 / .9);
  --lkey-cast: 1.5px 2px 1px rgb(95 89 86 / .54), 4px 6px 4px rgb(95 89 86 / .34);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Dark — the default */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --ink-rgb: 232 237 239;
  --bg: #000;
  --bg-2: #0b0b0c;
  --ink: rgb(var(--ink-rgb));
  --ink-2: rgb(var(--ink-rgb) / .72);
  --ink-3: rgb(var(--ink-rgb) / .57);
  --line: rgb(255 255 255 / .08);
  --line-2: rgb(255 255 255 / .14);
  --rule: rgb(255 255 255 / .055);
  --px-gap: rgb(232 237 239 / .28);
  --menu: rgb(22 20 19 / .96);
  --glass: rgb(10 10 11 / .5);
  --shadow: rgb(0 0 0 / .6);

  --key-face: linear-gradient(123deg, #3b3b3e 14%, #2a2a2d 88%);
  --key-edge: rgb(255 255 255 / .12);
  --key-ink: rgb(232 237 239 / .88);
  --key-lit: inset 1px 1px 0 rgb(255 255 255 / .08);
  --key-shadow: 4px 6px 5px rgb(0 0 0 / .5), 2px 4px 2.5px rgb(0 0 0 / .6);
  --key-down: 1px 2px 2px rgb(0 0 0 / .5), 1px 1px 1px rgb(0 0 0 / .6);
  --okey-cast: 8px 12px 18px rgb(0 0 0 / .35), 4px 6px 8px rgb(0 0 0 / .45), 2px 4px 6px rgb(0 0 0 / .5);

  --well-glass: linear-gradient(162deg, #141517 5%, #030405 95%);
  --well-edge: rgb(255 255 255 / .08);
  --well-edge-hover: rgb(255 255 255 / .14);
  --well-edge-focus: rgb(255 255 255 / .24);
  --well-rim: -1px -1px 0 rgb(0 0 0 / .55), 1px 1px 0 rgb(255 255 255 / .07);
  --well-inset: inset 2px 3px 6px rgb(0 0 0 / .85);

  --hero-sky: linear-gradient(180deg, #2a2208 0%, #6e4a0c 8%, #a2440f 18%, #6e1f2c 38%, #3a1f33 56%, #18375a 74%, #0d2f45 88%, #08161f 100%);
  --hero-dim: rgb(0 0 0 / .32);
  --hero-lede: rgb(255 255 255 / .92);
  --glow-o: .28;

  --card-panel: linear-gradient(140deg, #3a3a3c, #262628);
  --card-big: rgb(232 237 239 / .62);
  --card-big-b: #fff;
  --case: #111113;

  --phone: linear-gradient(170deg, #121214, #050506 70%);
  --bubble: #f2f1ec;
  --bubble-ink: #1a1918;
  --phone-foot: linear-gradient(180deg, #3a3a3c, #232325);
  --phone-foot-edge: rgb(255 255 255 / .1);
  --send-hot: #f2f1ec;
  --send-hot-ink: #111;

  --bar-bg: rgb(40 40 42 / .7);
  --tab-on: #fff;
  --badge: #1b1b1d;
  --cta-o: .5;
  --sel: rgb(239 90 0 / .45);
}

[data-theme="light"] {
  color-scheme: light;
  --ink-rgb: 11 11 12;
  --bg: #f5f4f1;
  --bg-2: #fbfaf8;
  --line: rgb(0 0 0 / .08);
  --line-2: rgb(0 0 0 / .13);
  --rule: rgb(0 0 0 / .06);
  --px-gap: rgb(11 11 12 / .22);
  --menu: rgb(251 250 248 / .97);
  --glass: rgb(245 244 241 / .66);
  --shadow: rgb(60 50 40 / .18);

  --key-face: var(--lkey-face);
  --key-edge: #fff;
  --key-ink: #1f1d1b;
  --key-lit: var(--lkey-bevel);
  --key-shadow: var(--lkey-cast);
  --key-down: inset -1px -1px 1px rgb(130 124 122 / .25), inset 1px 1px 0 rgb(255 255 255 / .4), .5px .5px .5px rgb(95 89 86 / .3);
  --okey-cast: 4px 6px 10px rgb(150 70 20 / .25), 2px 3px 4px rgb(120 60 20 / .25);

  --well-glass: linear-gradient(162deg, #fdfcfa 5%, #efede9 95%);
  --well-edge: rgb(0 0 0 / .09);
  --well-edge-hover: rgb(0 0 0 / .16);
  --well-edge-focus: rgb(0 0 0 / .3);
  --well-rim: -1px -1px 0 rgb(0 0 0 / .04), 1px 1px 0 #fff;
  --well-inset: inset 1px 2px 4px rgb(80 70 60 / .14);

  --hero-sky: linear-gradient(180deg, #f6ead6 0%, #f4d3ae 10%, #f0b48d 22%, #e5a7b2 40%, #dcc3cc 58%, #a9cbe6 76%, #d9e6ee 90%, #f5f4f1 100%);
  --hero-dim: rgb(255 255 255 / .12);
  --hero-lede: rgb(11 11 12 / .82);
  --glow-o: .22;

  --card-panel: linear-gradient(140deg, #ecebe7, #dedbd6);
  --card-big: rgb(11 11 12 / .55);
  --card-big-b: #0b0b0c;
  --case: #fbfaf8;

  --phone: linear-gradient(170deg, #fdfcfa, #f1efeb 70%);
  --bubble: #1f1d1b;
  --bubble-ink: #f2f1ec;
  --phone-foot: linear-gradient(180deg, #e7e4e0, #d4d1cc);
  --phone-foot-edge: rgb(255 255 255 / .8);
  --send-hot: #1f1d1b;
  --send-hot-ink: #f2f1ec;
  --ok: #1f9d55;

  --bar-bg: rgb(251 250 248 / .8);
  --tab-on: #0b0b0c;
  --badge: #fbfaf8;
  --cta-o: .32;
  --sel: rgb(239 90 0 / .25);
}

/* A short cross-fade when the theme is switched, never on load. */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), fill .45s, stroke .45s !important;
}

/* ── Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 16px); }
body { margin: 0; font: 400 16px/1.5 var(--sans); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, canvas { display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 1.5px solid rgb(var(--ink-rgb) / .7); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--sel); }
[hidden] { display: none !important; }

.skip { position: fixed; inset-inline-start: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: 8px; transition: top .2s; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* Theme-aware logo: the white file in the dark theme, the black one in light */
.logo-d, .logo-l { width: 104px; height: auto; }
.logo-l { display: none; }
[data-theme="light"] .logo-d { display: none; }
[data-theme="light"] .logo-l { display: block; }

/* Faint 6-column rules behind sections */
.grid-bg { position: relative; }
.grid-bg::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 0; pointer-events: none;
  width: min(100% - var(--gut) * 2, var(--wrap)); transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px calc(100% / 6));
  border-right: 1px solid var(--rule);
  -webkit-mask: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.grid-bg > * { position: relative; z-index: 1; }

/* ── Type ────────────────────────────────────────────────────────────── */
/* "px": thin display face drawn as scanlines — the Hebrew stand-in for a
   pixel-line typeface. Lines are clipped to the glyphs. */
.px {
  font-family: var(--display); font-weight: 300; letter-spacing: .01em;
  color: transparent;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 2px, var(--px-gap) 2px 3px);
  -webkit-background-clip: text; background-clip: text;
}
.hero__title { font-size: clamp(44px, 5.4vw, 78px); line-height: 1.06; }
.h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.12; }
.h2--c { text-align: center; }
.sub { margin-top: 18px; max-width: 440px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.sub--c { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font: 500 11px/1 var(--mono); letter-spacing: 0; color: rgb(var(--ink-rgb) / .8);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--orange); border-radius: 1px; }
.eyebrow--c { display: flex; justify-content: center; }

/* reveal — hidden only when JS is there to reveal it */
.js [data-rise] { opacity: 0; transform: translateY(14px); filter: blur(4px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-rise].in { opacity: 1; transform: none; filter: none; }

/* ── Keys (buttons) ──────────────────────────────────────────────────── */
.key, .okey, .lkey {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: 8px; white-space: nowrap;
  font: 500 13.5px/1 var(--sans); letter-spacing: 0;
  transition: transform .15s var(--press), box-shadow .15s var(--press), filter .15s;
}
.key { background: var(--key-face); color: var(--key-ink); box-shadow: var(--key-lit), var(--key-shadow); border: 1px solid var(--key-edge); }
.okey { background: var(--okey-face); color: #fff; box-shadow: var(--okey-lit), var(--okey-cast); border: 1px solid var(--okey-edge); }
.lkey { background: var(--lkey-face); color: #1f1d1b; box-shadow: var(--lkey-bevel), var(--lkey-cast); border: 1px solid #fff; font: 500 14px/1 var(--sans); letter-spacing: 0; text-transform: none; height: 38px; padding: 0 16px; }
.key:hover, .okey:hover, .lkey:hover { filter: brightness(1.08); }
.key:active, .okey:active, .lkey:active { transform: translate(1px, 2px); box-shadow: var(--key-down); }
.key--sq { width: 34px; height: 34px; padding: 0; }
.key--sq svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.key[disabled] { opacity: .5; background: var(--line-2); color: var(--ink-3); box-shadow: none; cursor: not-allowed; pointer-events: none; }

/* recessed input */
.well {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px; padding-inline-start: 16px;
  background: var(--well-glass); border: 1px solid var(--well-edge); border-radius: 10px; box-shadow: var(--well-rim), var(--well-inset);
  transition: border-color .2s;
}
.well:hover { border-color: var(--well-edge-hover); }
.well:focus-within { border-color: var(--well-edge-focus); }
.well input, .well textarea { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 15px; color: var(--ink); resize: none; }
.well input::placeholder, .well textarea::placeholder { color: rgb(var(--ink-rgb) / .38); }
.well.shake { animation: shake .4s var(--ease); border-color: rgb(239 90 0 / .6); }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .22; mix-blend-mode: overlay; pointer-events: none; border-radius: inherit; z-index: -1; }

.caret { font-style: normal; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ── Chrome: banner + nav ─────────────────────────────────────────────── */
.chrome { position: fixed; inset: 0 0 auto; z-index: 50; }
.banner {
  position: relative; display: flex; align-items: center; justify-content: center; height: var(--banner); padding: 0 48px;
  background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2);
  transition: margin-top .45s var(--ease);
}
.banner__msg { display: flex; gap: 10px; white-space: nowrap; overflow: hidden; }
.banner__msg a { color: var(--ink); text-decoration: underline; text-decoration-color: rgb(var(--ink-rgb) / .35); text-underline-offset: 3px; }
.banner__msg a:hover { text-decoration-color: var(--ink); }
.banner__short { display: none; }
.banner__x { position: absolute; inset-inline-end: 12px; top: 6px; width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink-3); border-radius: 6px; }
.banner__x:hover { color: var(--ink); }
.banner__x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.chrome.is-scrolled .banner, .chrome.no-banner .banner { margin-top: calc(var(--banner) * -1); }

.nav {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--bar); padding: 0 56px;
  background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.nav__logo { justify-self: start; }
.nav__items { display: flex; gap: 4px; }
.ng { position: relative; }
.ng__btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; font-size: 15px; color: rgb(var(--ink-rgb) / .78); border-radius: 8px; transition: color .2s; }
.ng__btn:hover, .ng__btn[aria-expanded="true"] { color: var(--ink); }
.chev { width: 7px; height: 7px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .55; transition: transform .25s var(--ease); }
.ng__btn[aria-expanded="true"] .chev { transform: translateY(1px) rotate(-135deg); }

.menu {
  position: absolute; top: calc(100% + 10px); inset-inline-start: -8px; min-width: 220px; padding: 8px;
  display: grid; gap: 2px;
  background: var(--menu); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 24px 60px var(--shadow);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top; transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.ng.open .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .35s var(--ease); }
.menu > a { padding: 9px 12px; border-radius: 8px; font-size: 14px; color: rgb(var(--ink-rgb) / .8); }
.menu > a:hover { background: rgb(var(--ink-rgb) / .06); color: var(--ink); }
.menu--wide { grid-template-columns: 1fr 1fr; gap: 24px; width: 600px; padding: 20px; }
.menu__col { display: grid; align-content: start; gap: 4px; }
.menu__h { font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); margin-bottom: 8px; }
.menu__lead, .menu__step { display: grid; gap: 3px; padding: 10px; border-radius: 8px; }
.menu__lead:hover, .menu__step:hover { background: rgb(var(--ink-rgb) / .06); }
.menu__lead b, .menu__step b { font-weight: 500; font-size: 14px; }
.menu__lead span, .menu__step > span:last-child { font-size: 13px; color: var(--ink-3); }
.menu__step { grid-template-columns: 28px 1fr; }
.menu__step b, .menu__step > span:last-child { grid-column: 2; }
.menu__n { grid-row: span 2; font: 11px/20px var(--mono); color: var(--ink-3); }
.menu__rule { border: 0; height: 1px; background: var(--line-2); margin: 6px 0; }

.nav__end { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.nav__link { font-size: 15px; color: rgb(var(--ink-rgb) / .9); }
.nav__link:hover { color: var(--ink); }
.nav .okey { height: 40px; padding: 0 22px; }
.nav__menu { display: none; width: 36px; height: 36px; border-radius: 8px; position: relative; }
.nav__menu span { position: absolute; inset-inline: 9px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.nav__menu span:first-child { top: 14px; }
.nav__menu span:last-child { top: 21px; }
.nav__menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* theme switch: a small physical toggle */
.theme {
  position: relative; width: 52px; height: 28px; border-radius: 8px; flex: none;
  background: var(--well-glass); border: 1px solid var(--well-edge); box-shadow: var(--well-rim), var(--well-inset);
}
.theme__knob {
  position: absolute; top: 2px; inset-inline-start: 2px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  background: var(--key-face); border: 1px solid var(--key-edge); box-shadow: var(--key-lit), 1px 2px 3px rgb(0 0 0 / .35);
  color: var(--key-ink); transition: inset-inline-start .35s var(--ease);
}
[data-theme="light"] .theme__knob { inset-inline-start: 26px; }
.theme svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.theme .i-sun { display: none; }
[data-theme="light"] .theme .i-sun { display: block; }
[data-theme="light"] .theme .i-moon { display: none; }
.theme:hover .theme__knob { filter: brightness(1.1); }
.nav__items .theme-row { display: none; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: calc(var(--bar) + var(--banner) + 72px) 0 120px; isolation: isolate; }
.hero__bg { position: absolute; inset: 0 0 -10%; z-index: -1; overflow: hidden; opacity: var(--bgo, 1); }
.hero__bg::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, var(--bg)); }
.hero__glow { position: absolute; inset: -10%; background: var(--hero-sky); }
.hero__glow i { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; opacity: var(--glow-o); animation: drift 18s ease-in-out infinite alternate; }
[data-theme="light"] .hero__glow i { mix-blend-mode: normal; }
.hero__glow i:nth-child(1) { width: 60vw; height: 40svh; top: 0; inset-inline-start: 10%; background: #f59e0b; }
.hero__glow i:nth-child(2) { width: 50vw; height: 45svh; top: 30%; inset-inline-end: 0; background: #db2777; animation-duration: 22s; }
.hero__glow i:nth-child(3) { width: 55vw; height: 40svh; top: 55%; inset-inline-start: 0; background: #2563eb; animation-duration: 26s; }
.hero__glow i:nth-child(4) { width: 35vw; height: 30svh; top: 70%; inset-inline-end: 20%; background: #06b6d4; animation-duration: 20s; }
@keyframes drift { from { transform: translate3d(-6%, -4%, 0) scale(1); } to { transform: translate3d(8%, 6%, 0) scale(1.15); } }
/* reeded glass */
.hero__reeds {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / .2) 0, rgb(255 255 255 / .07) 40px, rgb(255 255 255 / .02) 70px, rgb(0 0 0 / .24) 92px),
    linear-gradient(var(--hero-dim), var(--hero-dim));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transform: translateX(var(--reed, 0px));
}
[data-theme="light"] .hero__reeds { background: repeating-linear-gradient(90deg, rgb(120 80 60 / .08) 0, rgb(255 255 255 / .22) 40px, rgb(255 255 255 / .06) 70px, rgb(120 80 60 / .1) 92px), linear-gradient(var(--hero-dim), var(--hero-dim)); }
.hero__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 72px; }
.hero__lede { max-width: 400px; justify-self: end; margin-top: 30px; font-size: 18px; line-height: 1.55; color: var(--hero-lede); }

/* device — the same hardware in both themes */
.device {
  display: grid; grid-template-columns: 1fr 1fr; height: 470px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 40px 80px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .06);
  transform: perspective(1600px) rotateX(var(--tilt, 0deg)); transform-origin: 50% 100%;
  color: #e8edef;
}
[data-theme="light"] .device { box-shadow: 0 40px 80px rgb(80 50 30 / .25), 0 0 0 1px rgb(0 0 0 / .06); }
.device__screen { position: relative; display: flex; flex-direction: column; padding: 26px; background: radial-gradient(120% 70% at 30% 0%, #1a1a1c, #050505 60%); }
.screen { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.screen__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.screen__hello { font: 300 24px/1 var(--mono); color: rgb(232 237 239 / .85); letter-spacing: .02em; }
.screen__mode { font: 500 11px/1 var(--mono); letter-spacing: 0; color: rgb(232 237 239 / .4); }
.screen__chat { position: absolute; inset: 44px 0 4px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; overflow: hidden; transition: opacity .4s; }
.screen__chat li { max-width: 80%; padding: 8px 12px; border-radius: 10px; font-size: 14px; line-height: 1.4; animation: pop .45s var(--ease) both; transition: opacity .6s; }
.screen__chat li.out { opacity: 0; }
.screen__chat .u { align-self: flex-start; background: #ece9e5; color: #1a1918; }
.screen__chat .a { align-self: flex-end; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .08); }
.screen__chat .s { align-self: flex-end; padding: 2px 10px; border-inline-end: 1px solid rgb(255 255 255 / .14); border-radius: 0; font: 11px/1.6 var(--mono); color: rgb(232 237 239 / .4); }
.screen__chat .s b { color: #46c97d; font-weight: 400; }
.screen__chat .typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.screen__chat .typing i { width: 5px; height: 5px; border-radius: 50%; background: rgb(232 237 239 / .5); animation: dot 1s ease-in-out infinite; }
.screen__chat .typing i:nth-child(2) { animation-delay: .15s; }
.screen__chat .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.screen__voice { position: absolute; inset: 44px 0 18px; display: grid; grid-template-rows: 1fr auto; opacity: 0; transition: opacity .4s; pointer-events: none; }
.screen.voice .screen__voice { opacity: 1; }
.screen.voice .screen__chat { opacity: 0; }
.screen__wave { display: flex; align-items: center; justify-content: center; gap: 4px; }
.screen__wave i { width: 3px; height: calc(4px + var(--h, 0) * 80px); background: linear-gradient(#f7732b, #dd520c); border-radius: 2px; opacity: calc(.35 + var(--h, 0)); }
.screen__caption { min-height: 44px; font-size: 15px; line-height: 1.45; text-align: center; color: rgb(232 237 239 / .9); }
.screen__caption em { font-style: normal; color: rgb(232 237 239 / .35); }

.unlock__q { display: block; margin-bottom: 18px; font-size: 17px; line-height: 1.4; color: rgb(255 255 255 / .9); }
.unlock__note { margin-top: 10px; font-size: 11.5px; color: rgb(232 237 239 / .4); }
/* the screen is always dark, whatever the page theme */
.device .well { --well-glass: linear-gradient(162deg, #141517 5%, #030405 95%); --well-edge: rgb(255 255 255 / .08); --well-edge-hover: rgb(255 255 255 / .14); --well-edge-focus: rgb(255 255 255 / .24); --well-rim: -1px -1px 0 rgb(0 0 0 / .55), 1px 1px 0 rgb(255 255 255 / .07); --well-inset: inset 2px 3px 6px rgb(0 0 0 / .85); --ink-rgb: 232 237 239; color: #e8edef; }
.device .well input { color: #e8edef; }

.device__console {
  position: relative; color: #3a3836;
  background-image: var(--grain), linear-gradient(140deg, #c3bfba, #aaa6a1 60%, #9f9b96);
  box-shadow: inset 1px 0 0 rgb(255 255 255 / .35);
}
.device__console::before, .device__console::after { content: ""; position: absolute; background: rgb(0 0 0 / .14); box-shadow: 1px 1px 0 rgb(255 255 255 / .3); }
.device__console::before { inset-inline: 0; top: 50%; height: 1px; }
.device__console::after { top: 50%; bottom: 0; inset-inline-start: 50%; width: 1px; }
.screw { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgb(0 0 0 / .25); background: radial-gradient(circle at 35% 35%, rgb(255 255 255 / .5), transparent 60%); }
.screw::after { content: ""; position: absolute; inset: 5px 2px; background: rgb(0 0 0 / .3); transform: rotate(40deg); }
.screw--a { top: 12px; inset-inline-start: 12px; }
.screw--b { top: 12px; inset-inline-end: 12px; }
.grille { position: absolute; top: 28px; inset-inline-start: 38px; width: 84px; height: 16px; background: radial-gradient(circle, rgb(40 38 36 / .75) 1.2px, transparent 1.6px) 0 0 / 12px 8px; }
.console__brand { position: absolute; top: calc(50% - 22px); inset-inline-end: 24px; font: 9px/1 var(--mono); letter-spacing: 0; color: rgb(0 0 0 / .25); }
.dial { position: absolute; top: 50%; inset-inline-start: 50%; width: 216px; height: 216px; translate: 50% -50%; border-radius: 50%; }
[dir="ltr"] .dial { translate: -50% -50%; }
.dial__ring { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(145deg, #c9c5c0, #9e9a95); box-shadow: inset 2px 3px 6px rgb(0 0 0 / .28), inset -2px -2px 3px rgb(255 255 255 / .35), 0 0 0 1px rgb(0 0 0 / .08); }
.dial__ring::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgb(239 90 0 / 0); transition: border-color .3s; }
.dial.on .dial__ring::after { border-color: rgb(239 90 0 / .55); animation: ring 1.4s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.12); opacity: 0; } }
.dial__face {
  position: absolute; inset: 14px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 12px;
  background: radial-gradient(circle at 35% 30%, #d8d5d1, #b9b5b0 70%); box-shadow: 0 6px 10px rgb(0 0 0 / .25), 0 2px 3px rgb(0 0 0 / .25), inset 1px 1px 0 rgb(255 255 255 / .6);
  transition: transform .18s var(--press), box-shadow .18s var(--press);
}
.dial__face::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .35); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .05); }
.dial__face b { font: 500 12px/1 var(--mono); letter-spacing: 0; color: #4a4744; }
.dial__led { width: 22px; height: 3px; border-radius: 2px; background: #c2410c; transition: background .3s, box-shadow .3s; }
.dial:hover .dial__face { transform: scale(1.01); }
.dial:active .dial__face, .dial.on .dial__face { transform: scale(.985); box-shadow: 0 2px 3px rgb(0 0 0 / .25), inset 1px 1px 0 rgb(255 255 255 / .5); }
.dial.on .dial__led { background: #ff7a2b; box-shadow: 0 0 10px rgb(255 122 43 / .9); }
.pad { position: absolute; bottom: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px; margin: -6px -8px; border-radius: 6px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: #4a4744; }
.pad i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #6b6763; transition: background .25s, border-color .25s, box-shadow .25s; }
.pad:hover i { border-color: #3a3836; }
.pad[aria-pressed="true"] { color: #262422; }
.pad[aria-pressed="true"] i { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 8px rgb(239 90 0 / .7); }
.pad--a { inset-inline-start: 24px; }
.pad--b { inset-inline-start: calc(50% + 24px); }

/* ── Marquee ─────────────────────────────────────────────────────────── */
.logos { padding: 40px 0 120px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.logos__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.logos:hover .logos__track { animation-play-state: paused; }
.logos__row { display: flex; align-items: center; gap: 96px; padding-inline-end: 96px; }
.lg { font-size: 26px; color: rgb(var(--ink-rgb) / .72); white-space: nowrap; transition: color .3s; }
.lg:hover { color: var(--ink); }
.lg--a { font-weight: 700; letter-spacing: -.02em; }
.lg--b { font-weight: 500; letter-spacing: .02em; }
.lg--c { font-weight: 300; font-size: 30px; }
.lg--d { font: 600 22px/1 var(--mono); letter-spacing: 0; }
.lg--e { font-weight: 800; font-style: italic; }
.lg--f { font-weight: 400; }
@keyframes marquee { to { transform: translateX(50%); } }
[dir="ltr"] .logos__track { animation-name: marquee-ltr; }
@keyframes marquee-ltr { to { transform: translateX(-50%); } }

/* ── Scenarios ───────────────────────────────────────────────────────── */
.flex { padding: 40px 0 160px; }
.flex__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.flex__head .sub { max-width: 520px; font-size: 16px; }
.arrows { display: flex; gap: 8px; }
.track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  padding-inline: max(var(--gut), (100% - var(--wrap)) / 2); scroll-padding-inline: max(var(--gut), (100% - var(--wrap)) / 2);
  outline: 0; cursor: grab;
}
.track.drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.track.drag * { pointer-events: none; }
.track::-webkit-scrollbar { display: none; }
.track__end { flex: 0 0 1px; }
.card { flex: 0 0 auto; scroll-snap-align: start; height: 400px; border-radius: 4px; overflow: hidden; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.card--intro { width: min(100%, var(--wrap)); display: grid; grid-template-columns: 1fr 1fr; }
.card__panel { display: flex; flex-direction: column; justify-content: space-between; padding: 28px; background: var(--card-panel); }
.card__big { font-size: 27px; line-height: 1.3; letter-spacing: -.01em; color: var(--card-big); max-width: 460px; }
.card__big b { color: var(--card-big-b); font-weight: 400; }
.card__form { display: grid; gap: 18px; justify-items: start; }
[dir="ltr"] .card__form { justify-items: end; }
.card__form .well { width: 100%; align-items: flex-start; padding-top: 14px; }
.card__form .okey { height: 34px; }
.well--tall { min-height: 78px; }
.card__strip { display: grid; grid-template-columns: 2.1fr 1.1fr .7fr .45fr; transition: grid-template-columns .9s var(--ease); }
.card__strip:hover { grid-template-columns: 1.4fr 1.4fr 1fr .8fr; }
.slice { position: relative; overflow: hidden; }
.slice::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .25; mix-blend-mode: overlay; }
.slice--1 { background: radial-gradient(60% 50% at 60% 40%, #f3efe9, transparent 70%), linear-gradient(170deg, #cfd8de 0%, #e7e3dc 40%, #8f8a84 100%); }
.slice--1::before { content: ""; position: absolute; inset: 22% 20% 18% 22%; border-radius: 22px; background: linear-gradient(160deg, #1d1d1f, #0b0b0c); box-shadow: 14px 20px 40px rgb(0 0 0 / .35), inset 0 0 0 2px #2f2f31; transform: rotate(-14deg); animation: float 7s ease-in-out infinite alternate; }
.slice--2 { background: linear-gradient(180deg, #2b1e12, #b07a43 45%, #dcb47c 60%, #3d2a18); }
.slice--3 { background: linear-gradient(100deg, transparent 46%, #ef5a00 46.5% 49%, transparent 49.5%), linear-gradient(80deg, transparent 62%, rgb(239 90 0 / .7) 62.5% 64%, transparent 64.5%), linear-gradient(180deg, #2a2724, #0f0e0d 40%, #3a332c 75%, #191715); }
.slice--4 { background: linear-gradient(180deg, #91a9bd, #e9eef2 30%, #2c5e8c 70%, #0f2a44); }
@keyframes float { to { transform: rotate(-10deg) translateY(-10px); } }

.card--case { width: min(84vw, 760px); display: grid; grid-template-columns: 1fr 1fr; background: var(--case); border: 1px solid var(--line); }
.card--case.flash { animation: flash 1.2s var(--ease); }
@keyframes flash { 30% { border-color: rgb(239 90 0 / .7); box-shadow: 0 0 0 3px rgb(239 90 0 / .18); } }
.case__art { position: relative; overflow: hidden; }
.case__art::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .3; mix-blend-mode: overlay; }
.case__art > b { position: absolute; inset: -20%; transition: transform 1.2s var(--ease); }
.card--case:hover .case__art > b { transform: scale(1.06) translateX(2%); }
.case__art--1 > b { background: radial-gradient(40% 30% at 30% 30%, #f7732b, transparent 70%), radial-gradient(40% 40% at 75% 80%, #7c3aed, transparent 70%), #1a0f0a; }
.case__art--2 > b { background: radial-gradient(40% 30% at 70% 25%, #38bdf8, transparent 70%), radial-gradient(35% 35% at 25% 80%, #f59e0b, transparent 70%), #08131d; }
.case__art--3 > b { background: radial-gradient(40% 30% at 40% 75%, #ef4444, transparent 70%), radial-gradient(35% 30% at 75% 25%, #fbbf24, transparent 70%), #1b0b06; }
.case__art--4 > b { background: radial-gradient(40% 30% at 60% 40%, #22c55e, transparent 70%), radial-gradient(35% 35% at 15% 15%, #0ea5e9, transparent 70%), #06140d; }
.case__art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(90deg, rgb(0 0 0 / .25) 0, rgb(255 255 255 / .05) 22px, rgb(0 0 0 / .3) 46px); }
.case__tag { position: absolute; bottom: 18px; inset-inline-start: 18px; z-index: 2; padding: 6px 10px; border-radius: 6px; background: rgb(0 0 0 / .45); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 11px/1 var(--mono); letter-spacing: 0; }
.case__body { display: flex; flex-direction: column; padding: 28px; gap: 18px; }
.case__k { font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.case__body h3 { font-size: 26px; font-weight: 400; letter-spacing: -.01em; }
.case__body dl { display: grid; gap: 14px; flex: 1; }
.case__body dl div { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.case__body dt { font: 11px/1.9 var(--mono); color: var(--ink-3); }
.case__body dd { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.case__body div:last-child dd { color: var(--ink); }
.case__body .key { align-self: flex-start; }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }
.dots button { width: 18px; height: 3px; border-radius: 2px; background: rgb(var(--ink-rgb) / .18); transition: background .3s, width .3s var(--ease); }
.dots button[aria-current="true"] { width: 32px; background: var(--ink); }

/* ── Sticky chat ─────────────────────────────────────────────────────── */
.better { height: 560vh; }
.better__pin { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); height: calc(100svh - var(--bar)); display: flex; align-items: center; }
.better__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; height: min(100%, 820px); padding: 36px 0; }
.better__text { display: flex; flex-direction: column; }
.steps { margin-top: auto; max-width: 470px; }
.steps li { border-top: 1px solid var(--line); position: relative; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps button { display: flex; align-items: center; gap: 22px; width: 100%; height: 46px; font-size: 15px; color: var(--ink-3); text-align: start; transition: color .35s; }
.steps button:hover { color: var(--ink-2); }
.steps button span { font: 11px/1 var(--mono); color: inherit; }
.steps li::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; height: 1px; width: calc(var(--p, 0) * 100%); background: rgb(var(--ink-rgb) / .55); }
.steps li.on button { color: var(--ink); }
.steps li.done button { color: var(--ink-2); }

.phone {
  justify-self: end; width: min(100%, 470px); display: flex; flex-direction: column; min-height: 0;
  background: var(--phone); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden;
  box-shadow: 0 40px 80px var(--shadow);
}
.phone__head { display: flex; align-items: center; justify-content: space-between; margin: 0 24px; padding: 22px 0 14px; border-bottom: 1px solid var(--line); }
.phone__state { font-size: 27px; line-height: 1.1; }
.phone__mood { font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.phone__mood b { font-weight: 500; color: var(--ink); }
.phone__body { position: relative; flex: 1; min-height: 0; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 40px); mask: linear-gradient(transparent, #000 40px); }
.thread { position: absolute; inset: 0 24px auto; display: flex; flex-direction: column; gap: 14px; padding: 24px 0 18px; transform: translateY(var(--ty, 0px)); transition: transform .5s var(--ease); }
.thread > li { display: none; }
.thread > li.on { display: block; animation: pop .5s var(--ease) both; }
.thread .u { align-self: flex-start; max-width: 76%; padding: 10px 14px; background: var(--bubble); color: var(--bubble-ink); border-radius: 6px; font-size: 14.5px; line-height: 1.45; box-shadow: 2px 3px 8px rgb(0 0 0 / .25); }
.thread .a { align-self: stretch; max-width: 88%; font-size: 15px; line-height: 1.55; }
.thread .a em { font-style: normal; color: var(--ink-3); }
.thread .log { align-self: stretch; padding-inline-start: 10px; border-inline-start: 1px solid var(--line-2); font: 11.5px/1.75 var(--mono); color: var(--ink-3); }
.thread .log span { display: block; }
.thread .log .lit { color: var(--ink); }
.thread .log .ok { color: var(--ok); }
.phone__input { padding: 12px 24px 18px; }
.well--msg { min-height: 44px; padding-inline-end: 10px; font-size: 14px; color: var(--ink); }
.well--msg .ph { color: rgb(var(--ink-rgb) / .38); }
.well--msg .caret--bar { font-weight: 200; color: rgb(var(--ink-rgb) / .7); }
.send { margin-inline-start: auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; color: var(--ink-3); transition: background .2s, color .2s; }
.send svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.send.hot { background: var(--send-hot); color: var(--send-hot-ink); }
.phone__foot { display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 20px; background-image: var(--grain), var(--phone-foot); border-top: 1px solid var(--phone-foot-edge); }
.phone__foot .ring { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgb(var(--ink-rgb) / .25); }
.tiny { font: 9px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.chan { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; font: 500 11px/1 var(--mono); letter-spacing: 0; }
.chan i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px rgb(239 90 0 / .7); animation: led 2.4s ease-in-out infinite; }
@keyframes led { 50% { opacity: .55; } }
.grille--sm { position: static; width: 70px; height: 12px; background: radial-gradient(circle, rgb(var(--ink-rgb) / .25) 1px, transparent 1.4px) 0 0 / 10px 6px; }
.phone__foot .screw { position: relative; flex: none; border-color: rgb(var(--ink-rgb) / .2); width: 14px; height: 14px; }

/* ── How it works ────────────────────────────────────────────────────── */
.how { position: relative; }
.how__intro { padding: 120px 0 40px; }
.stage { height: 1000vh; position: relative; }
.stage__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; outline: 0; }
.stage__canvas.hot { cursor: crosshair; }
.stage__help { position: absolute; }
.chapters { position: absolute; inset: 0; pointer-events: none; }
.chapter {
  position: absolute; top: 18%; inset-inline: 0; text-align: center; padding: 0 var(--gut);
  opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 10px)); filter: blur(calc((1 - var(--o, 0)) * 6px));
}
.chapter h3 { font-size: clamp(40px, 4.4vw, 64px); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; }
.chapter p { margin-top: 12px; font-size: 16px; color: var(--ink-2); }
.chapter--end { top: 11%; }
.chapter--end h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; }
.legend { position: absolute; top: 11%; inset-inline: 0; display: flex; justify-content: center; gap: 22px; font-size: 12px; color: var(--ink-2); opacity: var(--lo, 0); pointer-events: none; }
.legend li { display: inline-flex; align-items: center; gap: 7px; transition: opacity .3s; }
.legend.focus li { opacity: .35; }
.legend.focus li.on { opacity: 1; color: var(--ink); }
.legend li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.legend .c0 { --c: #f7732b; } .legend .c1 { --c: #e5b93b; } .legend .c2 { --c: #a78bfa; } .legend .c3 { --c: #38bdf8; }
.tip {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; padding: 7px 10px; border-radius: 8px;
  background: var(--menu); border: 1px solid var(--line-2); box-shadow: 0 10px 30px var(--shadow);
  font: 500 11px/1.4 var(--mono); letter-spacing: 0; white-space: nowrap;
  transform: translate(var(--tx, 0px), var(--ty, 0px)); opacity: 0; transition: opacity .2s;
}
.tip.on { opacity: 1; }
.tip b { display: block; font: 500 13px/1.3 var(--sans); letter-spacing: 0; }
.tip span { color: var(--ink-3); }
.stagebar {
  position: absolute; bottom: 28px; inset-inline-start: 50%; translate: 50% 0;
  display: flex; gap: 4px; padding: 4px; border-radius: 10px;
  background: var(--bar-bg); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px var(--shadow);
  opacity: var(--so, 0); transition: opacity .4s;
}
[dir="ltr"] .stagebar { translate: -50% 0; }
.stagebar__tabs { display: flex; gap: 2px; }
.stagebar button, .stagebar__cta { height: 30px; padding: 0 14px; border-radius: 7px; font: 500 11px/30px var(--mono); letter-spacing: 0; color: var(--ink-3); transition: color .25s, background .25s; white-space: nowrap; }
.stagebar button:hover { color: var(--ink); }
.stagebar button.on { background: var(--key-face); color: var(--tab-on); box-shadow: var(--key-lit), 0 2px 4px rgb(0 0 0 / .3); }
.stagebar__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); background: var(--key-face); box-shadow: var(--key-lit); }
.stagebar__cta i { width: 0; height: 2px; background: var(--orange); border-radius: 1px; transition: width .4s var(--ease); }
.stagebar.end .stagebar__cta i { width: 10px; }
.stagebar__cta:hover { color: var(--ink); }

/* ── Story ───────────────────────────────────────────────────────────── */
.story { position: relative; min-height: 880px; padding: 200px 0 140px; overflow: hidden; display: flex; align-items: flex-end; }
.story__art { position: absolute; top: 60px; bottom: 0; inset-inline-end: 0; width: 62%; z-index: 0; -webkit-mask: radial-gradient(90% 80% at 55% 50%, #000 40%, transparent 78%); mask: radial-gradient(90% 80% at 55% 50%, #000 40%, transparent 78%); }
.story__art canvas { width: 100%; height: 100%; }
.story__tag { position: absolute; top: 26%; inset-inline-start: 58%; display: grid; gap: 2px; padding-inline-start: 10px; border-inline-start: 1px solid rgb(var(--ink-rgb) / .5); font: 11px/1.4 var(--mono); letter-spacing: 0; color: var(--ink-2); opacity: var(--tag, 0); transition: opacity .8s; }
.story__tag b { font-weight: 500; color: var(--ink); }
.story__wrap { position: relative; z-index: 1; }
.story__text { max-width: 520px; }
.quote { margin-top: 22px; font-size: 15.5px; line-height: 1.75; color: var(--ink-3); }
.quote b { font-weight: 500; color: var(--ink); }
.byline { display: flex; gap: 28px; margin: 28px 0 26px; }
.byline__who { display: flex; align-items: center; gap: 12px; padding-inline-end: 28px; border-inline-end: 1px solid var(--line-2); }
.avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(140deg, #2a2a2d, #111); border: 1px solid var(--line-2); }
.byline b { display: block; font-size: 14px; font-weight: 500; }
.byline small { display: block; font-size: 12.5px; color: var(--ink-3); }
.byline__stat b { font-size: 15px; }

/* ── CTA ─────────────────────────────────────────────────────────────── */
.cta { position: relative; padding: 180px 0 200px; overflow: hidden; isolation: isolate; }
.cta__inner { display: grid; justify-items: center; }
.cta__light { position: absolute; inset: 0; z-index: -1; }
.cta__light i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: var(--cta-o); animation: drift 16s ease-in-out infinite alternate; }
.cta__light i:nth-child(1) { width: 260px; height: 160px; top: 52%; inset-inline-end: 50%; margin-inline-end: 120px; background: #c2410c; }
.cta__light i:nth-child(2) { width: 220px; height: 120px; top: 60%; inset-inline-start: 50%; background: #1d4ed8; animation-duration: 21s; }
.cta__light i:nth-child(3) { width: 160px; height: 100px; top: 54%; inset-inline-start: 50%; margin-inline-start: 140px; background: #6d28d9; animation-duration: 25s; }
.cta__form { width: min(100%, 470px); margin-top: 32px; }
.well--glow { position: relative; padding-inline-start: 18px; box-shadow: var(--well-rim), var(--well-inset), 0 18px 60px var(--shadow); }
.well--glow::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, rgb(247 115 43 / .6), rgb(var(--ink-rgb) / .05) 40%, rgb(56 189 248 / .45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.well--glow input { font-family: var(--mono); font-size: 13px; }
.sent { margin-top: 14px; min-height: 18px; font-size: 13px; color: var(--ink-3); text-align: center; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding: 64px 0 40px; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.foot__brand .logo-d, .foot__brand .logo-l { width: 108px; }
.foot__ok { display: flex; align-items: center; gap: 8px; margin: 28px 0 12px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-2); }
.foot__ok i { width: 6px; height: 6px; background: var(--ok); border-radius: 1px; }
.badges { display: flex; gap: 8px; }
.badges li { width: 38px; height: 38px; display: grid; place-items: center; text-align: center; border-radius: 50%; background: var(--badge); border: 1px solid var(--line-2); font: 600 8px/1.1 var(--mono); color: var(--ink-2); }
.social { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.social a svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linejoin: round; transition: stroke .2s; }
.social .fill { fill: var(--ink-2); stroke: none; }
.social a:hover svg { stroke: var(--ink); }
.foot__col { display: grid; align-content: start; gap: 10px; }
.foot__h { margin-bottom: 4px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.foot__col a { font-size: 14px; color: var(--ink-2); width: fit-content; transition: color .2s; }
.foot__col a:hover { color: var(--ink); }
.foot__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.foot__legal nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot__legal a:hover { color: var(--ink); }
.foot__theme { display: inline-flex; align-items: center; gap: 10px; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav { padding: 0 24px; }
  .menu--wide { width: 520px; }
}
@media (max-width: 900px) {
  :root { --gut: 20px; }
  .nav { grid-template-columns: 1fr auto; }
  .nav__menu { display: block; }
  .nav__link, .nav__end > .theme { display: none; }
  .nav__items {
    position: fixed; inset: calc(var(--bar) + var(--top, var(--banner))) 0 auto; display: grid; gap: 0; padding: 12px 20px 24px;
    max-height: calc(100vh - var(--bar)); overflow: auto;
    background: var(--menu); border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  }
  .chrome.is-scrolled .nav__items, .chrome.no-banner .nav__items { --top: 0px; }
  .nav__items.open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .nav__items .theme-row { display: flex; align-items: center; justify-content: space-between; height: 56px; font-size: 17px; color: rgb(var(--ink-rgb) / .78); }
  .ng { border-bottom: 1px solid var(--line); }
  .ng__btn { width: 100%; justify-content: space-between; height: 52px; padding: 0; font-size: 17px; }
  .menu, .menu--wide { position: static; width: auto; display: none; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0 0 12px; grid-template-columns: 1fr; gap: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ng.open .menu { display: grid; }
  .menu__h { display: none; }
  .nav__end { gap: 10px; }
  .nav .okey { height: 36px; padding: 0 14px; }

  .hero { padding-top: calc(var(--bar) + var(--banner) + 48px); padding-bottom: 80px; }
  .hero__head { grid-template-columns: 1fr; gap: 0; margin-bottom: 40px; }
  .hero__lede { justify-self: start; margin-top: 20px; font-size: 16px; }
  .device { grid-template-columns: 1fr; height: auto; }
  .device__screen { min-height: 470px; }
  .screen { min-height: 230px; }
  .device__console { height: 300px; }
  .dial { width: 170px; height: 170px; }

  .flex__head { flex-direction: column; align-items: flex-start; }
  .card { height: auto; }
  .card--intro, .card--case { grid-template-columns: 1fr; width: 86vw; }
  .card__strip { height: 180px; }
  .case__art { height: 180px; }
  .card__big { font-size: 21px; margin-bottom: 24px; }

  .better { height: 520vh; }
  .better__grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 16px; padding: 20px 0; }
  .better__text .sub { display: none; }
  .better__text .h2 { font-size: 28px; }
  .steps { display: none; }
  .phone { justify-self: stretch; width: 100%; }
  .phone__state { font-size: 22px; }

  .how__intro { padding-top: 80px; }
  .stage { height: 900vh; }
  .chapter { top: 14%; }
  .legend { top: 9%; flex-wrap: wrap; gap: 8px 14px; padding: 0 20px; }
  .stagebar { flex-direction: column; bottom: 18px; }
  .stagebar__cta { justify-content: center; }

  .story { flex-direction: column; align-items: stretch; padding: 0 0 100px; min-height: 0; }
  .story__art { position: relative; top: 0; width: 100%; height: 420px; }
  .story__tag { top: auto; bottom: 12%; inset-inline-start: 64%; }
  .byline { flex-direction: column; gap: 14px; }
  .byline__who { border: 0; padding: 0; }

  .cta { padding: 120px 0 140px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .banner__long { display: none; }
  .banner__short { display: inline; }
  .nav .okey { display: none; }
  .hero__title { font-size: 46px; }
  .pad--b { inset-inline-start: calc(50% + 14px); }
  .lg { font-size: 21px; }
  .logos__row { gap: 56px; padding-inline-end: 56px; }
  .foot__legal { flex-direction: column; align-items: flex-start; }
}

/* ── Reduced motion: land on final states ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-rise] { opacity: 1; transform: none; filter: none; }
  .logos__track { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   V4 — sections brought over from V1, drawn in this page's language
   ════════════════════════════════════════════════════════════════════ */

.mark-d, .mark-l { width: 22px; height: auto; }
.mark-l { display: none; }
[data-theme="light"] .mark-d { display: none; }
[data-theme="light"] .mark-l { display: block; }
.key--sm { height: 30px; padding: 0 12px; font-size: 11px; }
.key--ghost { background: none; box-shadow: none; border-color: var(--line-2); }
.okey--lg { height: 46px; padding: 0 26px; font-size: 15px; }

/* ── Manifesto: words light up as you scroll ── */
.mani { height: 240vh; }
.mani__pin { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); height: calc(100svh - var(--bar)); display: flex; align-items: center; }
.mani__wrap { max-width: 900px; }
.mani__text { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.45; letter-spacing: -.01em; }
.mani__text--b { margin-top: 1.1em; }
.mani__text .w { color: rgb(var(--ink-rgb) / .16); transition: color .35s; }
.mani__text .w.lit { color: var(--ink); }
.mani__text:first-of-type::first-letter { font-family: var(--display); font-weight: 300; font-size: 2.6em; line-height: .8; float: right; margin: .08em 0 0 .12em; color: var(--orange); }
.mani__punch { margin-top: 1.2em; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.25; }
.mani__punch .w { opacity: .14; transition: opacity .35s; }
.mani__punch .w.lit { opacity: 1; }
.mani__sig { display: flex; align-items: center; gap: 10px; margin-top: 32px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }

/* ── A new layer: pains on one side, the stack on the other ── */
.layer { height: 320vh; }
.layer__pin { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); height: calc(100svh - var(--bar)); display: flex; align-items: center; }
.layer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.pains { margin-top: 34px; display: grid; gap: 0; }
.pains li { position: relative; padding: 16px 0; border-top: 1px solid var(--line); cursor: pointer; }
.pains li:last-child { border-bottom: 1px solid var(--line); }
.pains li::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; height: 1px; width: calc(var(--p, 0) * 100%); background: var(--orange); }
.pains__k { display: block; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); margin-bottom: 8px; }
.pains b { display: block; font-size: 19px; font-weight: 400; color: var(--ink-3); transition: color .35s; }
.pains p { display: grid; grid-template-rows: 0fr; max-width: 440px; font-size: 15px; line-height: 1.55; color: var(--ink-2); opacity: 0; transition: opacity .4s, margin .4s var(--ease); overflow: hidden; height: 0; }
.pains li.on b { color: var(--ink); }
.pains li.on p { opacity: 1; height: auto; margin-top: 8px; }
.pains li.on .pains__k { color: var(--orange); }

.stack { position: relative; display: grid; gap: calc(10px + var(--spread, 0) * 26px); perspective: 1400px; justify-items: center; }
.plate {
  width: min(100%, 460px); padding: 16px 18px; border-radius: 10px;
  background: var(--case); border: 1px solid var(--line-2); box-shadow: 0 18px 40px var(--shadow);
  transform: rotateX(calc(var(--tiltx, 18) * 1deg)) translateY(calc((1 - var(--in, 1)) * 40px)); opacity: var(--in, 1);
  transition: border-color .4s, box-shadow .4s, background-color .4s;
}
.plate b { display: block; font-size: 15px; font-weight: 500; }
.plate span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.plate.hot { border-color: rgb(239 90 0 / .55); box-shadow: 0 0 0 3px rgb(239 90 0 / .12), 0 18px 40px var(--shadow); }
.plate--owner { background-image: var(--grain), linear-gradient(140deg, #f2f1ec, #dcd9d4); color: #1a1918; border-color: #fff; }
.plate--owner span { color: rgb(26 25 24 / .55); }
.plate--sys { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; padding: 10px; position: relative; }
.cell { padding: 10px 12px; border-radius: 7px; background: var(--key-face); border: 1px solid var(--key-edge); box-shadow: var(--key-lit); color: var(--key-ink); }
.cell span { color: rgb(var(--ink-rgb) / .45); }
[data-theme="light"] .cell span { color: rgb(31 29 27 / .55); }
.cell--more { display: grid; place-items: center; padding: 10px 14px; }
.plate--tools { display: flex; justify-content: space-between; gap: 6px; padding: 10px 12px; }
.plate--tools li { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line-2); background: var(--well-glass); box-shadow: var(--well-inset); }
.plate--tools svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.plate--tools li.ping { border-color: rgb(239 90 0 / .6); }
.plate--tools li.ping svg { stroke: var(--orange); }
.plate--biz { border-style: dashed; }
.stack::before { content: ""; position: absolute; top: 10%; bottom: 10%; inset-inline-start: 50%; width: 1px; background: repeating-linear-gradient(to bottom, rgb(var(--ink-rgb) / .25) 0 4px, transparent 4px 9px); z-index: -1; }

/* ── Dashboard ── */
.dash { padding: 140px 0 120px; }
.dash__stage { margin-top: 48px; perspective: 1800px; }
.app {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: var(--phone); box-shadow: 0 50px 100px var(--shadow);
  transform: rotateX(var(--tilt, 0deg)) scale(var(--sc, 1)); transform-origin: 50% 0;
}
.app__bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgb(var(--ink-rgb) / .03); }
.app__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--ink-rgb) / .14); }
.app__bar span { margin-inline-start: auto; margin-inline-end: auto; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.app__body { display: grid; grid-template-columns: 1fr 300px; }
.app__main { padding: 26px; min-width: 0; }
.app__greet { font-size: 34px; line-height: 1.1; }
.app__sum { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.app__sum b { color: var(--ink); font-weight: 500; }
.app__sum .app__wait { color: var(--orange); }
.app__h { margin: 26px 0 10px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }
.kpi { padding: 14px; border-radius: 10px; border: 1px solid var(--line); background: rgb(var(--ink-rgb) / .02); }
.kpi--wide { grid-column: span 4; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.kpi__k { display: flex; gap: 12px; align-items: center; font: 500 11px/1.3 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.kpi__lg { display: inline-flex; gap: 6px; align-items: center; }
.kpi__lg i { width: 7px; height: 7px; border-radius: 2px; }
.kpi__lg .a, .grid14 i.a { background: var(--orange); }
.kpi__lg .h, .grid14 i.h { background: rgb(var(--ink-rgb) / .3); }
.kpi__v { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.kpi__v b { font: 300 34px/1 var(--display); letter-spacing: -.02em; }
.kpi__v span { font-size: 15px; color: var(--ink-2); }
.kpi__v small { font-size: 12px; color: var(--ink-3); }
.kpi__v--s { margin-top: 4px; }
.kpi__v--s b { font-size: 22px; }
.kpi__n { margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.kpi__n--ok { color: var(--ok); }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: 8px; }
.bars i { flex: 1; border-radius: 2px; background: rgb(var(--ink-rgb) / .2); height: calc(var(--b, .3) * 100% * var(--grow, 1)); transition: height .9s var(--ease); }
.bars i:nth-child(1) { --b: .55; } .bars i:nth-child(2) { --b: .7; } .bars i:nth-child(3) { --b: .45; } .bars i:nth-child(4) { --b: .8; } .bars i:nth-child(5) { --b: 1; background: var(--orange); } .bars i:nth-child(6) { --b: .6; } .bars i:nth-child(7) { --b: .35; }
.grid14 { display: grid; grid-template-columns: repeat(28, 1fr); gap: 3px; }
.grid14 i { aspect-ratio: 1; border-radius: 2px; background: rgb(var(--ink-rgb) / .08); transition: background .4s; }
.asks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ask { padding: 16px; border-radius: 10px; border: 1px solid var(--line-2); background: rgb(var(--ink-rgb) / .02); transition: border-color .4s, opacity .4s; }
.ask h3 { margin: 10px 0 4px; font-size: 15px; font-weight: 500; }
.ask > p:not(.ask__meta):not(.ask__btns) { font-size: 13px; color: var(--ink-2); }
.ask__meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink-3); }
.ask__btns { display: flex; gap: 8px; margin-top: 14px; }
.ask.done { border-color: rgb(70 201 125 / .45); }
.ask.done .ask__btns { color: var(--ok); font: 500 11px/30px var(--mono); letter-spacing: 0; }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 5px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-2); border: 1px solid var(--line-2); white-space: nowrap; }
.tag--o { color: var(--orange); border-color: rgb(239 90 0 / .35); }
.tag--v { color: #a78bfa; border-color: rgb(167 139 250 / .35); }
[data-theme="light"] .tag--v { color: #6d45d6; }
.tag--w { color: #e5b93b; border-color: rgb(229 185 59 / .4); }
[data-theme="light"] .tag--w { color: #a87a00; }
.pulse li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.pulse li a, .pulse li em { margin-inline-start: auto; font: 500 11px/1 var(--mono); font-style: normal; color: var(--ink-3); white-space: nowrap; }
.pulse li a:hover { color: var(--ink); }
.app__ask { display: flex; flex-direction: column; gap: 12px; padding: 26px 20px; border-inline-start: 1px solid var(--line); background: rgb(var(--ink-rgb) / .02); }
.app__askh { font-size: 24px; line-height: 1.15; }
.app__askp { font-size: 13px; color: var(--ink-3); }
.qa { flex: 1; min-height: 120px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.qa .q { align-self: flex-start; padding: 7px 11px; border-radius: 6px; background: var(--bubble); color: var(--bubble-ink); animation: pop .4s var(--ease) both; }
.qa .r { color: var(--ink); animation: pop .4s var(--ease) both; }
.qa .r em { font-style: normal; color: var(--ink-3); }
.prompts { display: grid; gap: 6px; }
.prompts button { display: grid; gap: 2px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line-2); text-align: start; font-size: 13px; transition: background .2s, border-color .2s; }
.prompts button small { font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.prompts button:hover { background: rgb(var(--ink-rgb) / .05); border-color: rgb(var(--ink-rgb) / .25); }
.prompts button[aria-pressed="true"] { border-color: rgb(239 90 0 / .5); }
.app__in { font-size: 13px; color: var(--ink-3); }

/* ── Services ── */
.svc { padding: 140px 0; }
.svc__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.svc__head { position: sticky; top: calc(var(--bar) + 40px); }
.svc__art { position: relative; height: 230px; margin-top: 36px; border-radius: 12px; border: 1px solid var(--line-2); overflow: hidden; background: var(--phone); }
.art { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.art.on { opacity: 1; transform: none; }
.art i { font-style: normal; }
.art--0 { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 28px; }
.art--0 .b { width: fit-content; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.art--0 .b1 { background: var(--bubble); color: var(--bubble-ink); }
.art--0 .b2 { align-self: flex-end; border: 1px solid var(--line-2); }
.art--0 .b3 { align-self: flex-end; font: 11px/1 var(--mono); color: var(--ok); padding: 0 12px; }
.art--1 svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgb(var(--ink-rgb) / .3); stroke-dasharray: 4 6; animation: flow 2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.art--1 .n { position: absolute; padding: 6px 10px; border-radius: 6px; font: 500 11px/1 var(--mono); background: var(--key-face); border: 1px solid var(--key-edge); color: var(--key-ink); box-shadow: var(--key-lit); }
.art--1 .n1 { top: 20%; inset-inline-end: 12%; } .art--1 .n2 { top: 70%; inset-inline-end: 12%; } .art--1 .n3 { top: 45%; inset-inline-start: 12%; } .art--1 .n4 { top: 45%; inset-inline-start: 46%; background: var(--okey-face); color: #fff; border-color: var(--okey-edge); }
.art--2 { display: grid; place-items: center; }
.art--2 .ph { width: 110px; height: 190px; margin-top: 50px; border-radius: 18px; border: 1px solid var(--line-2); background: linear-gradient(170deg, #1d1d1f, #0b0b0c); padding: 30px 10px; }
.art--2 .ph__n { display: block; padding: 8px; border-radius: 8px; background: rgb(255 255 255 / .08); color: #e8edef; font-size: 11px; }
.art--2 .ph__n small { display: block; color: rgb(232 237 239 / .5); }
.art--3 { display: grid; place-items: center; }
.art--3 .br { width: 74%; height: 70%; border-radius: 8px; border: 1px solid var(--line-2); background: var(--case); display: grid; grid-template-rows: 18px 10px 10px 1fr; gap: 8px; padding: 0 0 12px; overflow: hidden; }
.art--3 .br__bar { background: rgb(var(--ink-rgb) / .06); border-bottom: 1px solid var(--line); }
.art--3 .br__row { margin: 0 12px; border-radius: 3px; background: rgb(var(--ink-rgb) / .18); width: 60%; }
.art--3 .br__row--s { width: 40%; background: rgb(var(--ink-rgb) / .1); }
.art--3 .br__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 12px 0; }
.art--3 .br__cols i { border-radius: 5px; background: rgb(var(--ink-rgb) / .07); border: 1px solid var(--line); }
.art--3 .br__cols i:first-child { background: rgb(239 90 0 / .25); }
.svc__list li { border-top: 1px solid var(--line); }
.svc__list li:last-child { border-bottom: 1px solid var(--line); }
.svc__list a { position: relative; display: block; padding: 34px 0 34px 40px; transition: padding .4s var(--ease); }
[dir="ltr"] .svc__list a { padding: 34px 40px 34px 0; }
.svc__n { font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.svc__list b { display: block; margin-top: 12px; font: 300 clamp(30px, 3vw, 42px)/1.1 var(--display); color: var(--ink-2); transition: color .35s; }
.svc__list p { margin-top: 10px; max-width: 460px; font-size: 15px; line-height: 1.55; color: var(--ink-3); transition: color .35s; }
.svc__go { position: absolute; top: 50%; inset-inline-end: 0; translate: 0 -50%; font-style: normal; font-size: 22px; color: var(--ink-3); transition: transform .35s var(--ease), color .35s; }
[dir="ltr"] .svc__go { transform: scaleX(-1); }
.svc__list li.on b, .svc__list a:hover b { color: var(--ink); }
.svc__list li.on p, .svc__list a:hover p { color: var(--ink-2); }
.svc__list a:hover .svc__go { color: var(--orange); transform: translateX(-6px); }

/* ── Feed ── */
.feed { padding: 120px 0; }
.feed__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post { border-radius: 10px; border: 1px solid var(--line); background: var(--case); padding: 14px 14px 22px; transition: border-color .3s, transform .4s var(--ease); }
.post:hover { border-color: var(--line-2); transform: translateY(-4px); }
.post__art { position: relative; height: 180px; border-radius: 7px; overflow: hidden; display: grid; place-items: center; margin-bottom: 18px; }
.post__art::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .3; mix-blend-mode: overlay; }
.post__art--0 { background: radial-gradient(60% 70% at 30% 30%, #f7732b, transparent 70%), radial-gradient(60% 60% at 80% 90%, #6d28d9, transparent 70%), #160c08; color: #fff; align-content: center; gap: 4px; }
.post__art--0 b { font: 300 64px/1 var(--display); }
.post__art--0 small { font: 500 11px/1 var(--mono); letter-spacing: 0; opacity: .8; }
.post__art--1 { background: radial-gradient(60% 60% at 70% 30%, #38bdf8, transparent 70%), #08131d; }
.post__phone { width: 64px; height: 120px; border-radius: 14px; background: linear-gradient(170deg, #1d1d1f, #0b0b0c); border: 1px solid rgb(255 255 255 / .2); margin-top: 60px; box-shadow: 0 20px 40px rgb(0 0 0 / .5); animation: float 6s ease-in-out infinite alternate; }
.post__art--2 { background: linear-gradient(180deg, #2a2208, #a2440f 30%, #6e1f2c 60%, #18375a); }
.post__win { width: 70%; height: 64%; border-radius: 7px; background: rgb(0 0 0 / .6); border: 1px solid rgb(255 255 255 / .2); display: grid; grid-template-rows: 14px 1fr 1fr; gap: 6px; padding-bottom: 8px; }
.post__win i { margin: 0 10px; border-radius: 3px; background: rgb(255 255 255 / .14); }
.post__win i:first-child { margin: 0; border-radius: 0; background: rgb(255 255 255 / .08); }
.post__meta { display: flex; justify-content: space-between; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.dot { display: inline-flex; align-items: center; gap: 6px; }
.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.dot--on { color: var(--ok); }
.dot--on::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: led 2.4s ease-in-out infinite; }
.dot--soon::before { background: #e5b93b; }
.post h3 { margin-top: 14px; font-size: 19px; font-weight: 500; }
.post > p:last-child { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* ── FAQ ── */
.faq { padding: 120px 0; }
.faq__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.faq__head { position: sticky; top: calc(var(--bar) + 40px); }
.qa-item { border-top: 1px solid var(--line); }
.qa-item:last-child { border-bottom: 1px solid var(--line); }
.qa-item summary { position: relative; display: block; padding: 22px 0; padding-inline-end: 40px; list-style: none; cursor: pointer; font-size: 18px; color: var(--ink-2); transition: color .25s; }
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary:hover, .qa-item[open] summary { color: var(--ink); }
.qa-item summary i { position: absolute; top: 50%; inset-inline-end: 4px; width: 22px; height: 22px; translate: 0 -50%; border-radius: 6px; background: var(--key-face); border: 1px solid var(--key-edge); box-shadow: var(--key-lit); }
.qa-item summary i::before, .qa-item summary i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 1.4px; background: var(--key-ink); translate: -50% -50%; transition: transform .35s var(--ease); }
.qa-item summary i::after { transform: rotate(90deg); }
.qa-item[open] summary i::after { transform: rotate(0deg); }
.qa-item__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.qa-item__a > p { overflow: hidden; max-width: 600px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.qa-item.show .qa-item__a { grid-template-rows: 1fr; }
.qa-item.show .qa-item__a > p { padding-bottom: 24px; }

/* ── Contact: full form ── */
.contact { position: relative; padding: 140px 0 160px; overflow: hidden; isolation: isolate; border-top: 1px solid var(--line); }
.contact .cta__light i:nth-child(1) { top: 40%; inset-inline-end: 8%; inset-inline-start: auto; margin: 0; width: 360px; height: 220px; }
.contact .cta__light i:nth-child(2) { top: 62%; inset-inline-start: 12%; margin: 0; width: 320px; height: 180px; }
.contact .cta__light i:nth-child(3) { top: 30%; inset-inline-start: 30%; margin: 0; }
.contact__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }
.contact__h { margin: 36px 0 12px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.chans li { border-top: 1px solid var(--line); }
.chans li:last-child { border-bottom: 1px solid var(--line); }
.chans a { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 14px 0; }
.chans small { grid-column: 1; font-size: 12px; color: var(--ink-3); }
.chans b { grid-column: 1; font-size: 17px; font-weight: 400; }
.chans i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; color: var(--ink-3); transition: transform .3s var(--ease), color .3s; }
[dir="ltr"] .chans i { transform: scaleX(-1); }
.chans a:hover i { color: var(--orange); transform: translateX(-5px); }
.next { display: grid; gap: 14px; }
.next li { display: grid; grid-template-columns: 32px 1fr; gap: 2px 8px; }
.next span { grid-row: span 2; font: 500 11px/22px var(--mono); color: var(--orange); }
.next b { font-size: 15px; font-weight: 500; }
.next small { font-size: 13px; color: var(--ink-3); }

.form {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; padding: 30px;
  border-radius: 14px; border: 1px solid var(--line-2); background: var(--phone); box-shadow: 0 40px 80px var(--shadow);
}
.form__head { grid-column: 1 / -1; margin-bottom: 6px; }
.form__title { font-size: 30px; line-height: 1.1; }
.form__note { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.field { grid-column: 1 / -1; min-width: 0; border: 0; margin: 0; padding: 0; }
.field--half { grid-column: auto; }
.field label, .field legend { display: block; margin-bottom: 8px; padding: 0; font-size: 13.5px; color: var(--ink-2); }
.field label span[aria-hidden] { color: var(--orange); margin-inline-start: 2px; }
.field .well { min-height: 46px; }
.field .well--tall { align-items: flex-start; padding-top: 12px; min-height: 110px; }
.well--select { position: relative; padding-inline-end: 14px; }
.well select { flex: 1; appearance: none; -webkit-appearance: none; background: none; border: 0; outline: 0; font-size: 15px; color: var(--ink); cursor: pointer; }
.well select option { background: var(--bg-2); color: var(--ink); }
.well--select .chev { pointer-events: none; }
.field.bad .well { border-color: rgb(239 90 0 / .7); }
.err { min-height: 0; margin-top: 6px; font-size: 12.5px; color: var(--orange); }
.err:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { margin: 0; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); border: 1px solid var(--line-2); background: var(--well-glass); transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.chips span:hover { border-color: rgb(var(--ink-rgb) / .3); }
.chips input:checked + span { background: var(--key-face); color: var(--key-ink); border-color: var(--key-edge); box-shadow: var(--key-lit), 0 2px 4px rgb(0 0 0 / .25); }
.chips input:checked + span::before { content: ""; width: 6px; height: 6px; margin-inline-end: 8px; border-radius: 50%; background: var(--orange); }
.chips input:focus-visible + span { outline: 1.5px solid rgb(var(--ink-rgb) / .7); outline-offset: 2px; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.consent { display: flex !important; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 13px !important; line-height: 1.5; color: var(--ink-3) !important; }
.consent input { position: absolute; opacity: 0; }
.consent i { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; background: var(--well-glass); border: 1px solid var(--well-edge-hover); box-shadow: var(--well-inset); display: grid; place-items: center; }
.consent input:checked + i { background: var(--okey-face); border-color: var(--okey-edge); }
.consent input:checked + i::after { content: ""; width: 8px; height: 4px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.consent input:focus-visible + i { outline: 1.5px solid rgb(var(--ink-rgb) / .7); outline-offset: 2px; }
.consent a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.field.bad .consent i { border-color: rgb(239 90 0 / .7); }
.form__go { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.form__mail { font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(var(--ink-rgb) / .3); }
.form__mail:hover { color: var(--ink); }
.form__done { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 14px; padding: 40px; border-radius: inherit; background: var(--phone); animation: pop .5s var(--ease) both; }
.form__done p:not(.form__title) { max-width: 380px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.form__done a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.form__done:focus { outline: 0; }

@media (max-width: 900px) {
  .mani { height: 200vh; }
  .layer { height: auto; }
  .layer__pin { position: static; height: auto; padding: 90px 0; }
  .layer__grid { grid-template-columns: 1fr; gap: 40px; }
  .pains p { opacity: 1; height: auto; margin-top: 8px; }
  .pains b { color: var(--ink); }
  .plate--sys { grid-template-columns: 1fr 1fr; }
  .cell--more { grid-column: 1 / -1; }
  .plate--tools li { width: 32px; height: 32px; }
  .dash { padding: 90px 0; }
  .app__body { grid-template-columns: 1fr; }
  .app__ask { border-inline-start: 0; border-top: 1px solid var(--line); }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi--wide { grid-column: span 2; grid-template-columns: 1fr; gap: 10px; }
  .grid14 { grid-template-columns: repeat(14, 1fr); }
  .asks { grid-template-columns: 1fr; }
  .pulse li { flex-wrap: wrap; }
  .svc { padding: 90px 0; }
  .svc__grid, .faq__grid, .contact__grid { grid-template-columns: 1fr; gap: 32px; }
  .svc__head, .faq__head { position: static; }
  .svc__art { display: none; }
  .svc__list b { color: var(--ink); }
  .feed, .faq { padding: 90px 0; }
  .feed__grid { grid-template-columns: 1fr; }
  .contact { padding: 90px 0 110px; }
  .form { grid-template-columns: 1fr; padding: 22px; }
  .field--half { grid-column: 1 / -1; }
  .form__go { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .app__main { padding: 18px; }
  .kpis { grid-template-columns: 1fr; }
  .kpi--wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mani { height: auto; }
  .mani__pin { position: static; height: auto; padding: 120px 0; }
  .mani__text .w { color: var(--ink); }
  .mani__punch .w { opacity: 1; }
}

/* V4: the hero line is longer now — give it the room */
.hero__head { grid-template-columns: 1.5fr 1fr; }
.hero .hero__title { font-size: clamp(40px, 4.7vw, 68px); }
@media (max-width: 900px) { .hero__head { grid-template-columns: 1fr; } .hero .hero__title { font-size: 40px; } }

/* ════════════════════════════════════════════════════════════════════
   V5 — the dial hero: an arc of dots with a light sweeping across it,
   ticks that lean in as it passes, and one line saying who this is for
   ════════════════════════════════════════════════════════════════════ */
.hero--dial { min-height: 100svh; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--bar) + var(--banner) + 40px) 0 90px; overflow: hidden; }
.hero--dial .hero__bg { opacity: calc(var(--bgo, 1) * .9); }
.arc { position: absolute; inset: auto 0 0; width: 100%; height: 88%; z-index: 0; opacity: var(--bgo, 1); pointer-events: none; }
.arc .d { fill: rgb(var(--ink-rgb) / .28); }
.arc .t { stroke: rgb(var(--ink-rgb) / .3); stroke-width: 1.4; stroke-linecap: round; }
.arc .base { stroke: rgb(var(--ink-rgb) / .14); stroke-width: 1; }
.dhero { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; padding-top: 4vh; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border-radius: 9px; margin-bottom: 26px;
  background: var(--key-face); border: 1px solid var(--key-edge); box-shadow: var(--key-lit), var(--key-shadow); color: var(--key-ink);
  font: 500 12px/1 var(--mono); letter-spacing: 0;
}
.pill__led { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px rgb(239 90 0 / .8); animation: led 2.4s ease-in-out infinite; }
.pill__k { color: rgb(var(--ink-rgb) / .5); }
[data-theme="light"] .pill__k { color: rgb(31 29 27 / .5); }
.pill__w { display: inline-block; min-width: 9ch; text-align: start; font: 500 13px/1 var(--sans); transition: opacity .3s var(--ease), transform .3s var(--ease), filter .3s; }
.pill__w.out { opacity: 0; transform: translateY(-6px); filter: blur(3px); }
.dhero__title { font-size: clamp(42px, 5.6vw, 84px); line-height: 1.06; }
.dhero__sub { max-width: 560px; margin-top: 22px; font-size: 18px; line-height: 1.55; color: var(--hero-lede); }
.askbox { width: min(100%, 560px); margin-top: 36px; }
.askbox__well { min-height: 58px; padding: 6px; padding-inline-start: 16px; }
.askbox__ic { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; }
.askbox input { font-size: 15px; font-family: var(--sans); }
.askbox .okey { height: 44px; padding: 0 20px; }
.dhero__near { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 13.5px; color: var(--ink-2); }
.dhero__near b { color: var(--ink); font-weight: 500; }
.dhero__alt { margin-top: 16px; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgb(var(--ink-rgb) / .3); }
.dhero__alt:hover { color: var(--ink); }
@media (max-width: 900px) {
  .hero--dial { min-height: 0; padding-top: calc(var(--bar) + var(--banner) + 56px); padding-bottom: 120px; }
  .arc { height: 60%; }
  .dhero__title { font-size: 40px; }
  .dhero__sub { font-size: 16px; }
}
@media (max-width: 520px) {
  .askbox .okey span { font-size: 13px; }
  .askbox__ic { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   V5.1 — a bigger dial, one boxed word, an intro, a ticker for the offer,
   real photos in the feed, and a calmer contact form
   ════════════════════════════════════════════════════════════════════ */
:root { --banner: 0px; }

/* ── Hero ── */
.hero--dial { padding: calc(var(--bar) + 40px) 0 140px; }
.arc { left: -10%; width: 120%; height: 104%; bottom: 46px; transform-origin: 50% 100%; transform: translateY(calc(var(--hp, 0) * 60px)) scale(calc(1 + var(--hp, 0) * .38)); opacity: calc(1 - var(--hp, 0) * 1.1); }
.arc .d { fill: rgb(var(--ink-rgb) / .32); }
.arc .t { stroke-width: 1.6; }
.dhero { padding-top: 6vh; transform: translateY(calc(var(--hp, 0) * -70px)); opacity: calc(1 - var(--hp, 0) * 1.3); filter: blur(calc(var(--hp, 0) * 6px)); }
.dhero__title { font-size: clamp(46px, 6.6vw, 104px); line-height: 1.04; }
.dhero__title .ln { display: block; overflow: hidden; padding: .04em .08em .1em; margin: -.04em -.08em -.1em; }
.dhero__title .ln > * { display: inline-block; }
.dhero__sub { max-width: 520px; margin-top: 26px; }

/* the boxed word: a frame with crop marks, drawn in on load */
.boxw { position: relative; display: inline-block; padding: 0 .16em .02em; margin-inline-start: .06em; vertical-align: baseline; }
.boxw::before {
  content: ""; position: absolute; inset: .1em 0 0; border: 1.5px solid rgb(var(--ink-rgb) / .55); border-radius: .08em;
  background: linear-gradient(180deg, rgb(239 90 0 / .14), rgb(239 90 0 / .04)); box-shadow: inset 0 0 40px rgb(239 90 0 / .12);
  clip-path: inset(0 0 0 0);
}
.boxw__c, .boxw__c::before, .boxw__c::after { position: absolute; width: 9px; height: 9px; background: var(--orange); }
.boxw__c { top: calc(.1em - 4px); inset-inline-start: -4px; }
.boxw__c::before { content: ""; top: 0; inset-inline-start: calc(100% + 0px); }
.boxw__c::after { content: ""; }
.boxw::after { content: ""; position: absolute; bottom: -4px; inset-inline-end: -4px; width: 9px; height: 9px; background: var(--orange); }
.boxw__c::before, .boxw__c::after { display: none; }
.boxw > .px { position: relative; }

/* intro: everything waits for .intro on <html>, set once the fonts are in */
.js .dhero__title .ln > * { transform: translateY(105%); }
.js .boxw::before { clip-path: inset(0 50% 0 50%); }
.js .boxw__c, .js .boxw::after { transform: scale(0); }
.js .intro-up { opacity: 0; transform: translateY(16px); filter: blur(6px); }
.js .ticker { transform: translateY(100%); opacity: 0; }
.intro .dhero__title .ln > * { transform: none; transition: transform 1.1s cubic-bezier(.19, 1, .22, 1); }
.intro .dhero__title .ln:nth-child(2) > * { transition-delay: .12s; }
.intro .dhero__title .ln:nth-child(2) > .boxw { transition-delay: .2s; }
.intro .boxw::before { clip-path: inset(0 0 0 0); transition: clip-path .9s cubic-bezier(.65, 0, .35, 1) .75s; }
.intro .boxw__c, .intro .boxw::after { transform: none; transition: transform .45s var(--ease) 1.45s; }
.intro .intro-up { opacity: 1; transform: none; filter: none; transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: .9s; }
.intro .askbox.intro-up { transition-delay: 1.05s; }
.intro .ticker { transform: none; opacity: 1; transition: transform .9s var(--ease) 1.3s, opacity .9s var(--ease) 1.3s; }

/* ── Ticker: the launch offer, running ── */
.ticker {
  position: absolute; inset: auto 0 0; z-index: 2; display: block; height: 46px; overflow: hidden;
  border-block: 1px solid var(--line-2); background: rgb(var(--ink-rgb) / .04);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ticker__track { display: flex; width: max-content; height: 100%; animation: marquee 34s linear infinite; }
[dir="ltr"] .ticker__track { animation-name: marquee-ltr; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__row { display: flex; align-items: center; gap: 26px; padding-inline-end: 26px; white-space: nowrap; font: 500 12.5px/1 var(--mono); letter-spacing: 0; color: var(--ink-2); }
.ticker__row span:nth-child(4n+1) { color: var(--orange); }
.ticker__row i { width: 6px; height: 6px; background: var(--orange); border-radius: 1px; transform: rotate(45deg); }
.ticker:hover .ticker__row { color: var(--ink); }

/* ── Feed: photographs, graded to sit in the page ── */
.post__art--photo { background: #0b0b0c; }
.post__art--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.04); transform: scale(1.02); transition: transform 1.2s var(--ease), filter .6s; }
.post__art--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / .45)), linear-gradient(120deg, rgb(239 90 0 / .1), transparent 50%); pointer-events: none; }
.post:hover .post__art--photo img { transform: scale(1.07); filter: saturate(1) contrast(1.04); }
.post__badge { position: absolute; z-index: 2; bottom: 12px; inset-inline-start: 12px; padding: 6px 10px; border-radius: 6px; background: var(--okey-face); color: #fff; font: 500 11px/1 var(--mono); letter-spacing: 0; box-shadow: var(--okey-cast); }

/* ── Contact: calmer ── */
.contact { padding: 130px 0 150px; }
.contact__grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.contact .sub { max-width: 400px; }
.next { margin-top: 34px; gap: 0; }
.next li { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.next li:last-child { border-bottom: 1px solid var(--line); }
.next span { font: 500 11px/1 var(--mono); color: var(--orange); }
.form { display: block; padding: 28px; border-radius: 14px; border: 1px solid var(--line); background: rgb(var(--ink-rgb) / .025); box-shadow: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; }
.form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s; }
.form .field label { margin-bottom: 7px; font: 400 13px/1.2 var(--sans); color: var(--ink-2); }
.form .field label small { font: inherit; color: var(--ink-3); }
.form .well { min-height: 44px; border-radius: 9px; box-shadow: var(--well-rim), inset 1px 2px 4px rgb(0 0 0 / .35); }
[data-theme="light"] .form .well { box-shadow: var(--well-rim), var(--well-inset); }
.form .well--tall { min-height: 96px; }
.form .well input, .form .well textarea { font-size: 15px; }
.form__go { display: flex; align-items: center; gap: 18px; margin-top: 4px; grid-column: 1 / -1; }
.form__fine { font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.form__fine a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* the send button: a key that turns into a ring, then a tick */
.send-btn {
  position: relative; flex: none; display: grid; place-items: center; width: 132px; height: 46px; border-radius: 10px;
  background: var(--okey-face); border: 1px solid var(--okey-edge); color: #fff; box-shadow: var(--okey-lit), var(--okey-cast);
  font: 500 13px/1 var(--mono); letter-spacing: 0;
  transition: width .5s cubic-bezier(.65, 0, .35, 1), border-radius .5s cubic-bezier(.65, 0, .35, 1), transform .15s var(--press), filter .15s;
}
.send-btn:hover { filter: brightness(1.08); }
.send-btn:active { transform: translate(1px, 2px); }
.send-btn__t { transition: opacity .2s; }
.send-btn__ring, .send-btn__ok { position: absolute; inset: 1px; width: 42px; height: 42px; margin: auto; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.send-btn__ring circle { stroke-dasharray: 120; stroke-dashoffset: 90; transform-origin: 22px 22px; }
.send-btn__ok path { stroke-dasharray: 30; stroke-dashoffset: 30; }
.form.sending .send-btn { width: 46px; border-radius: 50%; pointer-events: none; }
.form.sending .send-btn__t { opacity: 0; }
.form.sending .send-btn__ring { opacity: 1; transition: opacity .2s .3s; }
.form.sending .send-btn__ring circle { animation: spin .9s linear infinite; }
.form.sent .send-btn__ring { opacity: 0; }
.form.sent .send-btn__ok { opacity: 1; }
.form.sent .send-btn__ok path { stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--ease); }
@keyframes spin { to { transform: rotate(360deg); } }
.form.sending .field { opacity: .45; transition: opacity .4s; }
.form.leaving .form__fields { opacity: 0; transform: translateY(-14px) scale(.98); filter: blur(6px); }

.form__done { background: none; text-align: center; justify-items: center; gap: 10px; animation: none; }
.form__done:not([hidden]) .done__mark circle { animation: draw 1s cubic-bezier(.65, 0, .35, 1) both; }
.form__done:not([hidden]) .done__mark path { animation: draw .55s var(--ease) .75s both; }
.form__done:not([hidden]) > :not(svg) { animation: pop .7s var(--ease) both; }
.form__done:not([hidden]) > .form__title { animation-delay: .9s; }
.form__done:not([hidden]) > .done__t { animation-delay: 1.05s; }
.form__done:not([hidden]) > .key { animation-delay: 1.25s; }
.done__mark { width: 84px; height: 84px; margin-bottom: 8px; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 12px rgb(239 90 0 / .5)); }
.done__mark circle { stroke-dasharray: 230; stroke-dashoffset: 0; }
.done__mark path { stroke: var(--ink); stroke-dasharray: 46; stroke-dashoffset: 0; }
@keyframes draw { from { stroke-dashoffset: var(--len, 230); } }
.done__mark path { --len: 46; }
.done__t { font-size: 15px; color: var(--ink-2); }
.form__done .key { margin-top: 10px; }
/* a ring of light that blooms out of the form when it lands */
.form.burst::after { content: ""; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 1.5px solid rgb(239 90 0 / .7); animation: bloom 1.1s var(--ease) forwards; pointer-events: none; }
@keyframes bloom { from { transform: scale(.4); opacity: 1; } to { transform: scale(7); opacity: 0; } }

@media (max-width: 900px) {
  .hero--dial { padding-bottom: 120px; }
  .arc { left: -30%; width: 160%; height: 70%; }
  .dhero__title { font-size: clamp(40px, 11vw, 60px); }
  .contact__grid { grid-template-columns: 1fr; gap: 36px; }
  .form { padding: 20px; }
  .form__fields { grid-template-columns: 1fr; }
  .form__go { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .js .dhero__title .ln > *, .js .intro-up, .js .ticker { transform: none; opacity: 1; filter: none; }
  .js .boxw::before { clip-path: none; }
  .js .boxw__c, .js .boxw::after { transform: none; }
  .ticker__track { animation: none; }
}
/* the arc spans the full width, top always in view */
.arc { left: 0; width: 100%; height: calc(100% - 110px); bottom: 46px; }
@media (max-width: 900px) { .arc { left: -30%; width: 160%; height: 62%; } }
@media (max-width: 900px) {
  .hero--dial { min-height: 88svh; min-height: 88svh; }
  .arc { left: -40%; width: 180%; height: 64%; }
  .dhero { padding-top: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   V6 — one 3D language (panels with real thickness, tilt on hover),
   steadier pinned sections, and the mobile dial
   ════════════════════════════════════════════════════════════════════ */

/* Pinned sections: shorter, and sized in svh so the mobile address bar
   can't make them jump. */
.better { height: 420svh; }
.stage { height: 720svh; }
.better__pin, .stage__pin { will-change: transform; }

/* ── Tilt: any [data-tilt] leans toward the pointer ── */
[data-tilt] { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); transform-style: preserve-3d; }

/* ── Manifesto ── */
.thesis { padding: 150px 0 140px; }
.thesis__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.thesis__p { margin-top: 18px; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.5; letter-spacing: -.005em; }
.thesis__p .w { color: rgb(var(--ink-rgb) / .17); transition: color .4s; }
.thesis__p .w.lit { color: var(--ink); }
.thesis__punch { margin-top: 26px; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.2; }
.thesis__punch .w { opacity: .15; transition: opacity .4s; }
.thesis__punch .w.lit { opacity: 1; }
.chart3d { margin: 0; perspective: 1400px; }
.chart3d__plane {
  position: relative; padding: 28px 24px 44px; border-radius: 14px; border: 1px solid var(--line-2);
  background: var(--phone); box-shadow: 0 50px 90px var(--shadow);
  transform: rotateY(calc(var(--side, 1) * 16deg)) rotateX(8deg); transform-style: preserve-3d;
}
[dir="rtl"] .chart3d__plane { --side: -1; }
/* the plane's thickness */
.chart3d__plane::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgb(var(--ink-rgb) / .08), rgb(var(--ink-rgb) / .02)); transform: translateZ(-14px); z-index: -1; filter: blur(.5px); }
.chart3d svg { width: 100%; height: auto; direction: ltr; overflow: visible; }
.chart3d .ax line { stroke: rgb(var(--ink-rgb) / .4); stroke-width: 1; }
.chart3d .grid line { stroke: rgb(var(--ink-rgb) / .07); stroke-width: 1; stroke-dasharray: 2 5; }
.chart3d .ln { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.chart3d .ln-a { stroke: rgb(var(--ink-rgb) / .55); }
.chart3d .ln-b { stroke: var(--orange); filter: drop-shadow(0 0 6px rgb(239 90 0 / .6)); }
.chart3d .hd-a { fill: var(--ink); }
.chart3d .hd-b { fill: var(--orange); filter: drop-shadow(0 0 8px rgb(239 90 0 / .9)); }
.chart3d__y, .chart3d__x { position: absolute; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.chart3d__y { top: 24px; left: 28px; }
.chart3d__x { bottom: 18px; right: 28px; }
.chart3d__leg { position: absolute; top: 26px; right: 26px; display: grid; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.chart3d__leg li { display: flex; align-items: center; gap: 8px; }
.chart3d__leg li::before { content: ""; width: 14px; height: 2px; border-radius: 1px; background: rgb(var(--ink-rgb) / .55); }
.chart3d__leg li.b::before { background: var(--orange); }

/* ── A new layer ── */
.layer { height: auto; padding: 140px 0 60px; }
.layer__head { margin-bottom: 40px; }
.layer__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.lcard-wrap { height: 66svh; min-height: 420px; }
.lcard-wrap:last-child { height: auto; min-height: 0; padding-bottom: 14svh; }
.lcard {
  position: sticky; top: calc(var(--bar) + 18svh); padding: 30px 30px 32px; border-radius: 12px;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
  transition: background .55s var(--ease), color .55s var(--ease), border-color .55s, box-shadow .55s, transform .55s var(--ease);
}
.lcard__k { display: flex; gap: 12px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.lcard__k span { color: var(--orange); }
.lcard h3 { margin: 18px 0 14px; font: 300 clamp(28px, 2.6vw, 38px)/1.1 var(--display); color: var(--ink-2); transition: color .55s; }
.lcard > p:last-child { font-size: 15.5px; line-height: 1.5; color: var(--ink-3); transition: color .55s; }
.lcard.on { background: var(--key-face); border-color: var(--key-edge); box-shadow: var(--key-lit), 0 30px 60px var(--shadow); transform: translateY(-4px); }
.lcard.on h3 { color: var(--key-ink); }
.lcard.on > p:last-child { color: var(--key-ink); opacity: .7; }

.iso-art { position: sticky; top: calc(var(--bar) + 6svh); height: 78svh; min-height: 520px; display: grid; place-items: center; perspective: 1500px; }
.iso {
  width: min(100%, 470px); display: grid; gap: 10px; transform-style: preserve-3d;
  transform: rotateY(calc(var(--side, 1) * -24deg)) rotateX(10deg) rotateZ(calc(var(--side, 1) * -2deg)) rotateY(calc(var(--side, 1) * var(--turn, 0) * 1deg));
}
[dir="rtl"] .iso { --side: -1; }
.slab, .tile { position: relative; transform-style: preserve-3d; border: 1px solid var(--line-2); background: var(--phone); transition: transform .9s var(--ease), border-color .5s, box-shadow .5s, background .5s; }
/* thickness: a right face and a top face, like a key cap */
.slab::before, .slab::after, .tile::before, .tile::after { content: ""; position: absolute; pointer-events: none; background: linear-gradient(90deg, rgb(var(--ink-rgb) / .1), rgb(var(--ink-rgb) / .03)); border: 1px solid rgb(var(--ink-rgb) / .1); }
.slab::before, .tile::before { top: -1px; left: 100%; width: var(--th, 26px); height: calc(100% + 2px); transform-origin: left; transform: rotateY(90deg); }
.slab::after, .tile::after { bottom: 100%; left: -1px; width: calc(100% + 2px); height: var(--th, 26px); transform-origin: bottom; transform: rotateX(-90deg); background: linear-gradient(0deg, rgb(var(--ink-rgb) / .12), rgb(var(--ink-rgb) / .04)); }
.tile { --th: 12px; }
.slab { padding: 16px 18px; min-height: 74px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 4px; }
.slab b { font: 400 19px/1.1 var(--sans); }
.slab small { margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }
.slab--owner { background-image: var(--grain), linear-gradient(140deg, #f2f1ec, #dcd9d4); color: #1a1918; border-color: #fff; }
.slab--owner small { color: rgb(26 25 24 / .55); }
.iso__row { display: grid; grid-template-columns: 1fr 120px; gap: 10px; transform-style: preserve-3d; }
.iso__col { display: grid; gap: 10px; transform-style: preserve-3d; }
.slab--sys { background: var(--key-face); border-color: var(--key-edge); color: var(--key-ink); box-shadow: var(--key-lit); }
.slab--sys small { color: rgb(var(--ink-rgb) / .45); }
[data-theme="light"] .slab--sys small { color: rgb(31 29 27 / .55); }
.slab--mark { align-items: center; justify-content: center; }
.slab--mark img { width: 58px; height: auto; }
.tiles { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; transform-style: preserve-3d; transition: transform .9s var(--ease); }
.tile { aspect-ratio: 1; display: grid; place-items: center; border-radius: 4px; background: var(--well-glass); }
.tile svg { width: 52%; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.slab--biz { border-style: dashed; background: transparent; }
/* the layers lift apart as you scroll (--sp), the lit one rises further */
.iso [data-l="2"] { transform: translateZ(calc(var(--sp, 0) * 1px)); }
.iso [data-l="1"] { transform: translateZ(calc(var(--sp, 0) * .55px)); }
.iso [data-l="0"] { transform: translateZ(calc(var(--sp, 0) * .2px)); }
.iso [data-l="-1"] { transform: translateZ(calc(var(--sp, 0) * -.3px)); }
.iso .hot { --lift: 22px; }
.iso [data-l="2"].hot { transform: translateZ(calc(var(--sp, 0) * 1px + 26px)); box-shadow: 0 0 0 1px var(--orange), 0 30px 50px var(--shadow); }
.iso [data-l="1"].hot { transform: translateZ(calc(var(--sp, 0) * .55px + 26px)); }
.iso [data-l="1"].hot .slab--sys { border-color: var(--orange); box-shadow: var(--key-lit), 0 0 22px rgb(239 90 0 / .35); }
.iso [data-l="0"].hot { transform: translateZ(calc(var(--sp, 0) * .2px + 26px)); }
.iso [data-l="0"].hot .tile { animation: tilePulse 3.2s var(--ease) infinite; }
.iso [data-l="0"].hot .tile:nth-child(2) { animation-delay: .2s; } .iso [data-l="0"].hot .tile:nth-child(3) { animation-delay: .4s; }
.iso [data-l="0"].hot .tile:nth-child(4) { animation-delay: .6s; } .iso [data-l="0"].hot .tile:nth-child(5) { animation-delay: .8s; }
.iso [data-l="0"].hot .tile:nth-child(6) { animation-delay: 1s; } .iso [data-l="0"].hot .tile:nth-child(7) { animation-delay: 1.2s; }
.iso [data-l="0"].hot .tile:nth-child(8) { animation-delay: 1.4s; }
@keyframes tilePulse { 0%, 70%, 100% { transform: translateZ(0); } 20% { transform: translateZ(16px); border-color: var(--orange); } }
.iso [data-l="0"].hot .tile svg { stroke: var(--ink); }

/* ── Dashboard: enters in 3D, like the stack ── */
.app { transform: rotateX(var(--tilt, 0deg)) rotateY(calc(var(--side, 1) * var(--tilt, 0deg) * -.6)) scale(var(--sc, 1)); }
[dir="rtl"] .app { --side: -1; }

/* ── Mobile ── */
@media (max-width: 900px) {
  /* the dial: a wide dome whose crown sits behind the headline */
  .hero--dial { min-height: 92svh; }
  .arc { left: -95%; width: 290%; height: auto; aspect-ratio: 1460 / 665; bottom: 46px; }
  .better { height: 380svh; }
  .stage { height: 600svh; }
  .thesis { padding: 90px 0; }
  .thesis__grid { grid-template-columns: 1fr; gap: 44px; }
  .chart3d__plane { transform: rotateY(calc(var(--side, 1) * 8deg)) rotateX(6deg); }
  .layer { padding: 90px 0 40px; }
  .layer__grid { grid-template-columns: 1fr; gap: 10px; }
  .iso-art { position: relative; top: 0; height: 380px; min-height: 0; order: -1; overflow: visible; }
  .iso { width: 420px; transform: rotateY(calc(var(--side, 1) * -24deg)) rotateX(10deg) scale(.72); }
  .lcard-wrap, .lcard-wrap:last-child { height: auto; min-height: 0; padding: 0 0 12px; }
  .lcard { position: relative; top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none; }
  .thesis__p .w { color: var(--ink); }
  .thesis__punch .w { opacity: 1; }
}

/* ── The word in a key: "עסקים" sits on a raised key cap with a lit LED ── */
.wkey {
  position: relative; display: inline-flex; align-items: center; gap: .28em; vertical-align: .06em;
  margin-inline-start: .12em; padding: .06em .34em .1em; border-radius: .2em;
  font: 400 .78em/1.05 var(--sans); letter-spacing: -.01em; color: var(--key-ink);
  background: var(--key-face); border: 1px solid var(--key-edge); box-shadow: var(--key-lit), var(--key-shadow);
}
.wkey__led { width: .16em; height: .16em; border-radius: 50%; background: var(--orange); box-shadow: 0 0 .14em rgb(239 90 0 / .9); animation: led 2.4s ease-in-out infinite; }
/* intro: the key drops into place and its LED lights */
.js .dhero__title .ln > .wkey { transform: translateY(110%) rotateX(40deg); }
.intro .dhero__title .ln > .wkey { transform: none; transition: transform 1.1s cubic-bezier(.34, 1.4, .64, 1) .35s; }
.js .wkey__led { opacity: 0; }
.intro .wkey__led { opacity: 1; transition: opacity .4s 1.3s; }
.dhero__title .ln { overflow: visible; }
.dhero__title .ln:first-child { overflow: hidden; }

/* ── The dial on desktop: the original V5 size ── */
@media (min-width: 901px) {
  .arc { left: 0; width: 100%; height: 88%; bottom: 0; }
}

/* ── Dark glass: blurred surfaces read as glass in the dark theme too ── */
[data-theme="dark"] {
  --glass: rgb(22 22 26 / .38);
  --menu: rgb(24 24 28 / .62);
  --bar-bg: rgb(30 30 34 / .45);
  --glass-edge: rgb(255 255 255 / .1);
  --glass-sheen: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .015) 60%, rgb(255 255 255 / .03));
}
[data-theme="dark"] .nav,
[data-theme="dark"] .menu,
[data-theme="dark"] .stagebar,
[data-theme="dark"] .ticker,
[data-theme="dark"] .tip,
[data-theme="dark"] .case__tag {
  background-image: var(--glass-sheen);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), inset 0 0 0 1px rgb(255 255 255 / .03), 0 18px 40px rgb(0 0 0 / .35);
}
[data-theme="dark"] .nav { border-bottom-color: var(--glass-edge); box-shadow: inset 0 -1px 0 rgb(255 255 255 / .04), 0 10px 30px rgb(0 0 0 / .25); }
[data-theme="dark"] .menu, [data-theme="dark"] .stagebar, [data-theme="dark"] .tip { border-color: var(--glass-edge); }
@media (max-width: 900px) {
  [data-theme="dark"] .nav__items { background: rgb(18 18 22 / .72); background-image: var(--glass-sheen); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); }
}

/* ── Mobile: nothing may widen the page ── */
html { overflow-x: clip; }
@media (max-width: 900px) {
  .layer__grid { grid-template-columns: minmax(0, 1fr); }
  .iso-art { overflow: clip; }
  .iso { position: absolute; left: 50%; top: 50%; width: 420px; translate: -50% -50%; }
  .thesis__grid { grid-template-columns: minmax(0, 1fr); }
  .wkey { box-shadow: var(--key-lit), 2px 3px 4px rgb(0 0 0 / .35); }
}
/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* the key word's LED: its parent is a flex row, not an inline box */
.dhero__title .ln > .wkey { display: inline-flex; }
.wkey__led { display: block; flex: none; }

/* ════════════════════════════════════════════════════════════════════
   Identity from V1: dashed hairlines and bracketed corners, on objects
   that are still sketches; they fill in when they become real.
   ════════════════════════════════════════════════════════════════════ */
:root { --dash: rgb(var(--ink-rgb) / .38); }
.brk { position: relative; --bc: var(--orange); --bl: 9px; --bw: 1.5px; }
.brk::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(var(--bc), var(--bc)) 0 0 / var(--bl) var(--bw), linear-gradient(var(--bc), var(--bc)) 0 0 / var(--bw) var(--bl),
    linear-gradient(var(--bc), var(--bc)) 100% 0 / var(--bl) var(--bw), linear-gradient(var(--bc), var(--bc)) 100% 0 / var(--bw) var(--bl),
    linear-gradient(var(--bc), var(--bc)) 0 100% / var(--bl) var(--bw), linear-gradient(var(--bc), var(--bc)) 0 100% / var(--bw) var(--bl),
    linear-gradient(var(--bc), var(--bc)) 100% 100% / var(--bl) var(--bw), linear-gradient(var(--bc), var(--bc)) 100% 100% / var(--bw) var(--bl);
  background-repeat: no-repeat;
}
/* sketches: dashed until they're the lit one */
.lcard { border-style: dashed; border-color: var(--dash); }
.lcard.on { border-style: solid; }
.slab--biz, .iso .tile { border-style: dashed; border-color: var(--dash); }
.post, .card--case { border-style: dashed; border-color: var(--dash); }
.qa-item { border-top-style: dashed; border-color: var(--dash); }
.qa-item:last-child { border-bottom-style: dashed; }
.svc__list li, .next li, .steps li { border-top-style: dashed; }
.svc__list li:last-child, .next li:last-child, .steps li:last-child { border-bottom-style: dashed; }
.form { border-style: dashed; border-color: var(--dash); }
.feed, .faq, .contact, .svc { border-top: 1px dashed var(--line-2); }
.foot { border-top-style: dashed; }

/* ════════════════════════════════════════════════════════════════════
   The process scene: one stack, sketched → built → launched
   ════════════════════════════════════════════════════════════════════ */
.scene3d { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1700px; padding-top: 12vh; }
.world {
  position: relative; width: min(560px, 86vw); display: grid; gap: 14px; transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx, 14) * 1deg)) rotateY(calc(var(--side, 1) * var(--ry, -30) * 1deg));
}
[dir="rtl"] .world { --side: -1; }
.sl { position: relative; transform-style: preserve-3d; transition: transform .9s var(--ease); }
.world [data-l="3"] { transform: translateZ(calc(var(--sp, 0) * 1px)); }
.world [data-l="2"] { transform: translateZ(calc(var(--sp, 0) * .6px)); }
.world [data-l="1"] { transform: translateZ(calc(var(--sp, 0) * .25px)); }
.world [data-l="0"] { transform: translateZ(calc(var(--sp, 0) * -.2px)); }
/* every block starts as a dashed sketch */
.world .slab, .world .tile {
  border: 1px dashed var(--dash); background: transparent; box-shadow: none; color: var(--ink-2);
  opacity: calc(.25 + var(--sketch, 1) * .75);
  transition: background .7s var(--ease), border-color .7s, box-shadow .7s, color .7s, transform .9s var(--ease);
}
.world .slab::before, .world .slab::after, .world .tile::before, .world .tile::after { border-style: dashed; background: transparent; border-color: rgb(var(--ink-rgb) / .16); }
.world .slab { min-height: 66px; }
.world .slab small { color: var(--ink-3); }
.sl--sys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mod { min-height: 70px; padding: 12px; justify-content: space-between !important; }
.mod b { font-size: 14px; }
.mod__bar { display: block; height: 3px; margin-top: 10px; border-radius: 2px; background: rgb(var(--ink-rgb) / .1); overflow: hidden; }
.mod__bar i { display: block; height: 100%; width: calc(var(--f, 0) * 100%); background: var(--orange); }
.sl--tools { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.st { aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 5px; --th: 12px;
  transform: translate3d(var(--tx, 0), var(--ty, 0), var(--tz, 0)) rotate(var(--tr, 0deg)) !important; transition: background .7s, border-color .7s, box-shadow .7s !important; }
.st svg { width: 46%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.st small { font-size: 8.5px; line-height: 1; white-space: nowrap; color: var(--ink-3); }
/* built: solid faces */
.world .slab.solid, .world .sl--tools.solid .tile { border-style: solid; }
.sl--biz.solid { background: var(--phone); border-color: var(--line-2); color: var(--ink); box-shadow: 0 30px 50px var(--shadow); }
.sl--tools.solid .tile { background: var(--well-glass); border-color: var(--line-2); color: var(--ink-2); }
.mod.solid { background: var(--key-face); border-color: var(--key-edge); color: var(--key-ink); box-shadow: var(--key-lit), 0 16px 30px var(--shadow); }
.mod.solid small { color: inherit; }
.sl--owner.solid { background-image: var(--grain), linear-gradient(140deg, #f2f1ec, #dcd9d4); border-color: #fff; color: #1a1918; box-shadow: 0 30px 60px var(--shadow); }
.sl--owner.solid small { color: rgb(26 25 24 / .55); }
.world .solid::before, .world .solid::after, .world .sl--tools.solid .tile::before, .world .sl--tools.solid .tile::after { border-style: solid; background: linear-gradient(90deg, rgb(var(--ink-rgb) / .1), rgb(var(--ink-rgb) / .03)); }
.sl--owner { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; }
.sl--owner b { margin-inline-end: auto; }
.sl--owner > b, .sl--owner > small { display: block; }
.sl--owner { display: grid !important; grid-template-columns: 1fr auto; }
.sl--owner small { grid-column: 1; }
.sl__live { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: #1f9d55; opacity: 0; transition: opacity .5s; }
.sl__live i { width: 7px; height: 7px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 8px #1f9d55; animation: led 1.6s ease-in-out infinite; }
.world.live .sl__live { opacity: 1; }
.world.live .mod.solid { border-color: rgb(239 90 0 / .55); }
/* data flowing down through the layers once it's live */
.flow { position: absolute; top: 8%; bottom: 8%; inset-inline-start: 50%; width: 2px; transform: translateZ(calc(var(--sp, 0) * .5px)); opacity: 0; transition: opacity .5s; pointer-events: none; }
.world.live .flow { opacity: 1; }
.flow i { position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px var(--orange); animation: drop 2.4s linear infinite; }
.flow i:nth-child(2) { animation-delay: .8s; } .flow i:nth-child(3) { animation-delay: 1.6s; }
@keyframes drop { from { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { top: 100%; opacity: 0; } }
/* week counter (build) and the climbing line (launch) */
.weeks { position: absolute; bottom: 110px; inset-inline-start: 50%; translate: 50% 0; display: flex; align-items: baseline; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); opacity: var(--o, 0); }
[dir="ltr"] .weeks { translate: -50% 0; }
.weeks b { font: 300 34px/1 var(--display); color: var(--ink); }
.weeks__bar { position: absolute; top: calc(100% + 10px); left: 0; right: 0; height: 2px; background: rgb(var(--ink-rgb) / .1); }
.weeks__bar i { display: block; height: 100%; width: calc(var(--f, 0) * 100%); background: var(--orange); }
.lift { position: absolute; top: 22%; inset-inline-start: calc(50% + min(330px, 34vw)); width: 240px; margin: 0; opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 20px)); }
.lift svg { width: 100%; overflow: visible; direction: ltr; }
[dir="rtl"] .lift svg { transform: scaleX(-1); }
.lift__ax { fill: none; stroke: rgb(var(--ink-rgb) / .35); stroke-dasharray: 3 4; }
.lift__base { fill: none; stroke: rgb(var(--ink-rgb) / .2); }
.lift__ln { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgb(239 90 0 / .6)); }
.lift__hd { fill: var(--orange); filter: drop-shadow(0 0 8px var(--orange)); }
.lift figcaption { display: grid; gap: 2px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.lift figcaption b { font-weight: 500; color: var(--ink); }
.stage .chapter { top: 9%; }
.stage .chapter--end { top: 7%; }
@media (max-width: 1100px) { .lift { inset-inline-start: auto; inset-inline-end: 4%; top: auto; bottom: 150px; width: 180px; } }
@media (max-width: 900px) {
  .scene3d { padding-top: 18vh; }
  .world { width: 520px; scale: .62; }
  .weeks { bottom: 120px; }
  .lift { display: none; }
}
/* scene: bigger, centred under the chapter title */
.scene3d { padding-top: 14vh; }
.world { width: min(700px, 88vw); gap: 16px; }
.world .slab { min-height: 78px; }
.mod { min-height: 84px; }
.mod b { font-size: 15.5px; }
.st small { font-size: 9.5px; }
.lift { width: 300px; top: 30%; inset-inline-start: calc(50% + min(400px, 36vw)); }
@media (max-width: 1280px) { .lift { inset-inline-start: auto; inset-inline-end: 3%; top: auto; bottom: 140px; width: 220px; } }
@media (max-width: 900px) { .world { width: 640px; scale: .54; } .scene3d { padding-top: 16vh; } }

/* ── The key in the headline: a real key cap ───────────────────────────
   Bevelled face, a thick bottom edge, a soft cast shadow and a small
   orange LED at its side — the same object as the V5 pill. */
.wkey {
  --cap-face: linear-gradient(135deg, #f7f5f2 0%, #ece9e5 52%, #dfdbd6 100%);
  --cap-ink: #1f1d1b;
  --cap-rim: #fff;
  --cap-bevel: inset -1px -2px 2px rgb(130 124 122 / .32), inset 1px 1px 0 rgb(255 255 255 / .95);
  --cap-edge: 0 .06em 0 #cfcac4, 0 .085em 0 #b9b3ad;
  --cap-cast: .05em .16em .14em rgb(70 60 50 / .35), .12em .34em .5em rgb(40 30 20 / .28);
  position: relative; display: inline-flex; align-items: center; gap: .26em; vertical-align: .08em;
  margin-inline-start: .14em; padding: .1em .38em .14em; border-radius: .2em;
  font: 400 .72em/1.05 var(--sans); letter-spacing: -.012em; color: var(--cap-ink); white-space: nowrap;
  background: var(--cap-face); border: 1px solid var(--cap-rim);
  box-shadow: var(--cap-bevel), var(--cap-edge), var(--cap-cast);
  transform: translateY(-.04em);
}
[data-theme="dark"] .wkey {
  --cap-face: linear-gradient(135deg, #47474b 0%, #333336 52%, #28282b 100%);
  --cap-ink: #eef1f2;
  --cap-rim: rgb(255 255 255 / .14);
  --cap-bevel: inset -1px -2px 2px rgb(0 0 0 / .45), inset 1px 1px 0 rgb(255 255 255 / .12);
  --cap-edge: 0 .06em 0 #1c1c1f, 0 .085em 0 #111113;
  --cap-cast: .05em .16em .14em rgb(0 0 0 / .55), .12em .34em .5em rgb(0 0 0 / .45);
}
.wkey__led { width: .14em; height: .14em; border-radius: 50%; background: var(--orange); box-shadow: 0 0 .12em rgb(239 90 0 / .95), 0 0 .3em rgb(239 90 0 / .4); }
.wkey__t { display: inline-block; overflow: hidden; width: var(--w, auto); transition: width .7s cubic-bezier(.65, 0, .35, 1); }
.wkey__t > span { display: inline-block; transition: opacity .45s var(--ease), transform .45s var(--ease), filter .45s; }
.wkey__t.out > span { opacity: 0; transform: translateY(-.35em); filter: blur(4px); }
.wkey__t.in > span { opacity: 0; transform: translateY(.35em); filter: blur(4px); transition: none; }
@media (max-width: 900px) {
  .dhero__title { font-size: clamp(36px, 10vw, 56px); }
  .wkey { font-size: .66em; }
}

/* ── Headline key, take two: only the noun sits on the key; it floats a
   little above the line, the same height as the words around it. ── */
.dhero__title { font-size: clamp(46px, 6.4vw, 100px); }
.wkey {
  font: 400 .64em/1 var(--sans); padding: .14em .36em .18em; gap: .3em; border-radius: .22em; margin: 0 .06em;
  vertical-align: .14em; transform: none;
  --cap-edge: 0 .045em 0 #cfcac4, 0 .065em 0 #bdb7b1;
  --cap-cast: 0 .2em .32em rgb(60 50 40 / .22), 0 .5em .9em rgb(40 30 20 / .14);
  animation: hover 5s ease-in-out infinite;
}
[data-theme="dark"] .wkey {
  --cap-edge: 0 .045em 0 #1d1d20, 0 .065em 0 #131315;
  --cap-cast: 0 .22em .34em rgb(0 0 0 / .5), 0 .55em 1em rgb(0 0 0 / .35);
}
@keyframes hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.05em; } }
.wkey__led { width: .17em; height: .17em; }
.intro .dhero__title .ln > .wkey { transform: none; }
.hero--dial .askbox { margin-top: 44px; }
@media (max-width: 900px) { .dhero__title { font-size: clamp(38px, 10.5vw, 58px); } .wkey { font-size: .64em; } }
@media (prefers-reduced-motion: reduce) { .wkey { animation: none; } }

/* ════════ The headline key, take three ════════
   Frosted glass in the headline's own face, sitting on the same baseline
   as the words around it; a small orange LED at its side. No dial. */
.arc { display: none !important; }
.dhero__title .ln > .wkey { display: inline-block; }
.wkey {
  position: relative; display: inline-block; vertical-align: baseline; margin: 0 .08em; transform: none;
  padding: .1em .32em .16em; padding-inline-start: .62em; border-radius: .16em;
  font: 300 .9em/1 var(--display); letter-spacing: .005em; color: var(--ink); white-space: nowrap;
  background: rgb(255 255 255 / .42); border: 1px solid rgb(255 255 255 / .75);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -1px 0 rgb(0 0 0 / .05), 0 .04em 0 rgb(0 0 0 / .05), 0 .3em .7em -.15em rgb(60 40 30 / .28);
  animation: hover 6s ease-in-out infinite;
}
[data-theme="dark"] .wkey {
  background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .16);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .3), 0 .3em .8em -.15em rgb(0 0 0 / .6);
}
.wkey__led { position: absolute; top: 50%; inset-inline-start: .24em; width: .13em; height: .13em; margin-top: -.065em; border-radius: 50%; background: var(--orange); box-shadow: 0 0 .1em rgb(239 90 0 / .95), 0 0 .26em rgb(239 90 0 / .45); }
.wkey__t { vertical-align: baseline; }
.wkey__t > span { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.wkey__t.out > span { opacity: 0; transform: translateY(-.18em); filter: none; }
.wkey__t.in > span { opacity: 0; transform: translateY(.18em); filter: none; }
@keyframes hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.035em; } }
.js .dhero__title .ln > .wkey { transform: translateY(110%); }
.intro .dhero__title .ln > .wkey { transform: none; }
.hero--dial .dhero { padding-top: 0; }
@media (max-width: 900px) { .dhero__title { font-size: 9.2vw; } .dhero__title .ln { white-space: nowrap; } .wkey { font-size: .9em; } }

/* ════════════════════════════════════════════════════════════════════
   V6.2 — the manifesto chart and the stack, drawn as V1 drew them:
   dashed hairlines, translucent panels, thick dashed sides, brackets.
   ════════════════════════════════════════════════════════════════════ */
:root, [data-theme="dark"] { --bg-rgb: 0 0 0; --paper: rgb(242 241 236 / .94); --paper-ink: #1a1918; }
[data-theme="light"] { --bg-rgb: 245 244 241; --paper: rgb(11 11 12 / .92); --paper-ink: #f2f1ec; }
.brk { --bc: rgb(var(--ink-rgb) / .85); }

/* manifesto */
.thesis { padding: 140px 0 120px; }
.thesis__grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.chart svg { width: 100%; height: auto; overflow: visible; direction: ltr; }
.chart .ax line { stroke: rgb(var(--ink-rgb) / .45); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .tk line { stroke: rgb(var(--ink-rgb) / .5); stroke-width: 1; }
.chart text { font-family: var(--mono); font-size: 11px; letter-spacing: 0; fill: rgb(var(--ink-rgb) / .6); }
.chart .ln { fill: none; stroke-width: 2; stroke-linecap: round; }
.chart .ln-a { stroke: var(--orange); }
.chart .ln-b { stroke: var(--ok); }
.chart .hd-a { fill: var(--orange); filter: drop-shadow(0 0 4px rgb(239 90 0 / .8)); }
.chart .hd-b { fill: var(--ok); transition: opacity .3s; }
.chart .la { fill: var(--orange); } .chart .lb { fill: var(--ok); }
.chart .leg { transition: opacity .5s; }
.thesis__p { font: 300 clamp(21px, 1.9vw, 27px)/1.3 var(--display); }
.cap { float: right; display: grid; place-items: center; width: 52px; height: 60px; margin: 4px 0 2px 14px; border: 1px dashed var(--dash); font: 300 54px/1 var(--display); color: var(--orange); --bl: 7px; }
[dir="ltr"] .cap { float: left; margin: 4px 14px 2px 0; }
.thesis__p .cap.w, .thesis__p .cap { color: var(--orange) !important; }

/* the cards: one inverted at a time, the others dashed with brackets */
.layer__grid { grid-template-columns: 1fr 1fr; gap: 64px; }
.lcard-wrap { height: 72svh; min-height: 470px; }
.lcard-wrap:last-child { height: auto; min-height: 0; padding-bottom: 12svh; }
.lcard { top: 128px; padding: 38px 33px 34px; min-height: 260px; border-radius: 0; border: 1px dashed transparent; background: var(--paper); color: var(--paper-ink); box-shadow: none; transform: none; transition: background .55s var(--ease), color .55s var(--ease), border-color .55s; }
.lcard::after { opacity: 0; transition: opacity .4s; }
.lcard h3 { margin: 14px 0 34px; font: 300 clamp(28px, 2.6vw, 38px)/1.06 var(--display); color: inherit; }
.lcard > p:last-child { font-size: 15px; line-height: 1.45; color: inherit; opacity: .66; }
.lcard__k { color: inherit; opacity: .6; }
.lcard:not(.on) { background: transparent; color: var(--ink); border-color: var(--dash); }
.lcard:not(.on)::after { opacity: 1; }
.lcard:not(.on) .lcard__k, .lcard:not(.on) > p:last-child { opacity: .5; }
.lcard.on { background: var(--paper); border-color: transparent; color: var(--paper-ink); box-shadow: none; transform: none; }
.lcard.on h3, .lcard.on > p:last-child { color: var(--paper-ink); }

/* the stack */
.iso-art { position: sticky; top: calc(50svh - 260px); height: 560px; min-height: 0; display: grid; place-items: center; perspective: 1600px; }
.iso { width: 520px; display: grid; gap: 10px; transform: rotateY(-24deg) rotateX(8deg) rotateZ(-2deg); transform-style: preserve-3d; direction: ltr; }
.iso .slab, .iso .tile {
  position: relative; transform-style: preserve-3d; border: 1px dashed rgb(var(--ink-rgb) / .45); border-radius: 0;
  background: rgb(var(--bg-rgb) / .55); box-shadow: none; color: var(--ink);
  transition: transform .8s var(--ease), background .5s, border-color .5s, box-shadow .5s;
}
.iso .slab::before, .iso .slab::after { content: ""; position: absolute; border: 1px dashed rgb(var(--ink-rgb) / .22); background: none; pointer-events: none; }
.iso .slab::before { top: -1px; left: 100%; width: 54px; height: calc(100% + 2px); transform-origin: left; transform: rotateY(90deg); }
.iso .slab::after { bottom: 100%; left: -1px; width: calc(100% + 2px); height: 54px; transform-origin: bottom; transform: rotateX(-90deg); }
.iso .tile::before, .iso .tile::after { display: none; }
.iso .slab { direction: rtl; padding: 18px 18px 16px; min-height: 76px; display: flex; flex-direction: column; justify-content: flex-end; }
.iso .slab b { font: 300 20px/1.1 var(--display); }
.iso .slab small { margin-top: 3px; font-size: 11px; color: var(--ink-3); }
.iso .slab-row { display: grid; grid-template-columns: 1fr 172px; gap: 10px; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.iso .slab-col { display: grid; gap: 10px; transform-style: preserve-3d; }
.iso .s-mark { align-items: center; justify-content: center; }
.iso .s-mark img { width: 76px; height: auto; }
.iso .tiles { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.iso .tile { aspect-ratio: 1; display: grid; place-items: center; }
.iso .tile svg { width: 58%; fill: none; stroke: rgb(var(--ink-rgb) / .75); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.iso .tile-more { font-family: var(--mono); font-size: 9px; color: var(--ink-3); direction: rtl; }
.iso .is-hot, .iso .tiles.is-hot .tile { background: rgb(var(--ink-rgb) / .1); border-color: rgb(var(--ink-rgb) / .85); box-shadow: 0 24px 40px -24px rgb(var(--ink-rgb) / .45); }
[data-theme="light"] .iso .is-hot, [data-theme="light"] .iso .tiles.is-hot .tile { background: rgb(255 255 255 / .9); }
.iso .is-hot b { color: var(--ink); }
.iso .s-team.is-hot { box-shadow: 0 0 0 1px rgb(239 90 0 / .5), 0 24px 40px -24px rgb(239 90 0 / .5); }
.iso .s-team { transform: translateZ(calc(var(--sp, 0) * 1px)); }
.iso .slab-row { transform: translateZ(calc(var(--sp, 0) * .5px)); }
.iso .tiles { transform: translateZ(calc(var(--sp, 0) * -.25px)); }
.iso .s-biz { transform: translateZ(calc(var(--sp, 0) * -.5px)); }
.iso [data-l] { }
.iso.is-live .tile { animation: tilePulse1 3.6s var(--ease) infinite; }
.iso.is-live .tile:nth-child(2) { animation-delay: .2s; } .iso.is-live .tile:nth-child(3) { animation-delay: .4s; }
.iso.is-live .tile:nth-child(4) { animation-delay: .6s; } .iso.is-live .tile:nth-child(5) { animation-delay: .8s; }
.iso.is-live .tile:nth-child(6) { animation-delay: 1s; } .iso.is-live .tile:nth-child(7) { animation-delay: 1.2s; }
.iso.is-live .tile:nth-child(8) { animation-delay: 1.4s; } .iso.is-live .tile:nth-child(9) { animation-delay: 1.6s; }
@keyframes tilePulse1 { 0%, 70%, 100% { transform: translateZ(0); } 20% { transform: translateZ(14px); border-color: rgb(var(--ink-rgb) / .85); } }

@media (max-width: 900px) {
  .thesis__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .chart { order: 2; }
  .layer__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .iso-art { position: relative; top: auto; height: 420px; overflow: clip; order: -1; }
  .iso { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transform: rotateY(-24deg) rotateX(8deg) rotateZ(-2deg) scale(.66); }
  .lcard-wrap, .lcard-wrap:last-child { height: auto; min-height: 0; padding: 0 0 10px; }
  .lcard { position: relative; top: auto; }
}
@media (max-width: 520px) { .iso-art { height: 340px; } .iso { transform: rotateY(-24deg) rotateX(8deg) rotateZ(-2deg) scale(.54); } }

/* pinned scenes: the V5 lengths again — animations unhurried */
.better { height: 560svh; }
.stage { height: 1000svh; }
@media (max-width: 900px) { .better { height: 520svh; } .stage { height: 900svh; } }

/* the process scene in V1's lighter hand: built blocks are tinted glass
   with a fine solid edge, not heavy keys */
.mod.solid { background: rgb(var(--ink-rgb) / .1); border-color: rgb(var(--ink-rgb) / .8); color: var(--ink); box-shadow: 0 24px 40px -24px rgb(var(--ink-rgb) / .45); }
[data-theme="light"] .mod.solid { background: rgb(255 255 255 / .9); }
.sl--biz.solid { background: rgb(var(--bg-rgb) / .55); border-color: rgb(var(--ink-rgb) / .6); box-shadow: none; }
.sl--tools.solid .tile { background: rgb(var(--bg-rgb) / .55); border-color: rgb(var(--ink-rgb) / .6); }
.sl--owner.solid { background: var(--paper); background-image: none; color: var(--paper-ink); border-color: transparent; }
.sl--owner.solid small { color: var(--paper-ink); opacity: .6; }
.world .slab, .world .tile { border-radius: 0; }
.world .slab::before, .world .slab::after { border-color: rgb(var(--ink-rgb) / .22); }
.world .solid::before, .world .solid::after { background: none !important; border-style: dashed !important; }

/* gentle hand-offs: a pinned scene fades up as it arrives and down as it
   leaves, so nothing vanishes at once */
.better__pin > .wrap, .stage__pin > * { opacity: calc(.2 + .8 * var(--edge, 1)); transform: translateY(calc((1 - var(--edge, 1)) * 28px)); }

/* ════════ The headline, take four ════════ */
/* heavier cuts of the display face, for a firmer headline */
@font-face { font-family: "Display"; src: url(/fonts/plex-hebrew-400-hebrew.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F, U+20AA; }
@font-face { font-family: "Display"; src: url(/fonts/plex-hebrew-500-hebrew.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F, U+20AA; }
.dhero__title .px { font-weight: 400; background: repeating-linear-gradient(to bottom, var(--ink) 0 2.6px, rgb(var(--ink-rgb) / .62) 2.6px 3.4px); -webkit-background-clip: text; background-clip: text; }

/* The key: a three-sided prism with a fixed width. It sits a touch high so
   its middle lines up with the middle of the letters beside it. */
.wkey {
  --kh: 1.22em; --r: calc(var(--kh) * .2887);
  position: relative; display: inline-block; width: calc(var(--kw, 4em) + .9em); height: var(--kh);
  margin: 0 .1em; padding: 0; vertical-align: -.1em; border: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font: 500 .82em/1 var(--display); letter-spacing: 0; color: inherit; perspective: 7em; animation: none; translate: none;
}
.wkey::after { /* its shadow on the page */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -.22em; height: .3em; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(30 20 10 / .32), transparent); filter: blur(2px); z-index: -1;
}
[data-theme="dark"] .wkey::after { background: radial-gradient(closest-side, rgb(0 0 0 / .7), transparent); }
.prism { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--r) * -1)) rotateX(calc(var(--turn, 0) * -120deg)); transition: transform 1.05s cubic-bezier(.68, -0.12, .3, 1.18); }
.face {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0 .45em; border-radius: .13em;
  white-space: nowrap; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: rotateX(calc(var(--i) * 120deg)) translateZ(var(--r));
}
.face[data-f="0"] { --i: 0; background: linear-gradient(135deg, #f4f2ef 0%, #e6e3df 50%, #d6d2cd 100%); color: #1d1b19; box-shadow: inset -1px -2px 2px rgb(110 104 100 / .35), inset 1px 1px 0 #fff, 0 0 0 1px rgb(255 255 255 / .9); }
.face[data-f="1"] { --i: 1; background: linear-gradient(156deg, #f7732b 14%, #dd520c 88%); color: #fff; box-shadow: inset -1px -2px 2px rgb(120 40 0 / .35), inset 1px 1px 0 rgb(255 255 255 / .35), 0 0 0 1px rgb(255 210 184 / .7); }
.face[data-f="2"] { --i: 2; background: linear-gradient(123deg, #3d3d40 14%, #29292c 88%); color: #f2f1ec; box-shadow: inset -1px -2px 2px rgb(0 0 0 / .45), inset 1px 1px 0 rgb(255 255 255 / .1), 0 0 0 1px rgb(255 255 255 / .12); }
.face--probe { position: absolute; visibility: hidden; transform: none; inset: auto; padding: 0; }
.js .dhero__title .ln > .wkey { transform: translateY(110%); }
.intro .dhero__title .ln > .wkey { transform: none; }

/* glass mode (the toggle beside light/dark): a narrower frosted key, no LED */
[data-key="glass"] .wkey { width: calc(var(--kw, 4em) + .5em); }
[data-key="glass"] .face { padding: 0 .25em; background: rgb(255 255 255 / .42); color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px rgb(255 255 255 / .75); }
[data-theme="dark"][data-key="glass"] .face { background: rgb(255 255 255 / .08); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 0 0 1px rgb(255 255 255 / .16); }
[data-key="glass"] .wkey::after { opacity: .5; }

/* the toggle's two icons */
.keymode .i-glass { display: none; }
[data-key="glass"] .keymode .i-glass { display: block; }
[data-key="glass"] .keymode .i-cube { display: none; }
[data-key="glass"] .keymode .theme__knob { inset-inline-start: 26px; }
.keymode .theme__knob { inset-inline-start: 2px; }
[data-theme="light"] .keymode .theme__knob { inset-inline-start: 2px; }
[data-theme="light"][data-key="glass"] .keymode .theme__knob { inset-inline-start: 26px; }
.nav__end { gap: 12px; }

/* dark theme: text boxes are glass you can see, not holes */
[data-theme="dark"] {
  --well-glass: linear-gradient(162deg, rgb(255 255 255 / .09) 5%, rgb(255 255 255 / .035) 95%);
  --well-edge: rgb(255 255 255 / .16);
  --well-edge-hover: rgb(255 255 255 / .24);
  --well-edge-focus: rgb(255 255 255 / .36);
  --well-rim: 0 0 0 0 transparent;
  --well-inset: inset 0 1px 0 rgb(255 255 255 / .08), inset 0 -1px 0 rgb(0 0 0 / .25);
}
[data-theme="dark"] .well { -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
[data-theme="dark"] .well input::placeholder, [data-theme="dark"] .well textarea::placeholder { color: rgb(232 237 239 / .5); }
[data-theme="dark"] .askbox__well { background-color: rgb(20 20 24 / .35); }
@media (max-width: 900px) { .wkey { font-size: .86em; } }
@media (prefers-reduced-motion: reduce) { .prism { transition: none; } }

/* ════════ One rhythm, unhurried ════════
   Every transition shares one curve and a longer beat, so things arrive
   and leave the same way everywhere. */
:root { --ease: cubic-bezier(.25, .8, .25, 1); --beat: 1.25s; }
.js [data-rise] { transition-duration: var(--beat); }
.node__card, .node__dot, .turn__t, .wins li, .wire .stop, .wire__head,
.lcard, .iso .slab, .iso .tile, .iso .slab-row, .iso .tiles,
.world .slab, .world .tile, .sl, .mod__bar i, .sl__live, .flow,
.steps button, .pains b, .svc__list b, .svc__list p, .art,
.thesis__p .w, .thesis__punch .w, .mani__text .w,
.ask, .qa .q, .qa .r, .post, .card, .case__art > b { transition-duration: var(--beat) !important; transition-timing-function: var(--ease) !important; }
.thread > li.on, .screen__chat li { animation-duration: .9s; }
.prism { transition-duration: 1.35s; }

/* the key centred on the letters beside it (measured: ink centre of the line) */
.wkey { vertical-align: -.17em; }
@media (max-width: 900px) { .wkey { vertical-align: -.19em; } }

/* ════════════════════════════════════════════════════════════════════
   The problem: a pile of tools in dashed outline, and a pipe that winds
   between them as you scroll — and gets stuck near the top.
   ════════════════════════════════════════════════════════════════════ */
.prob { height: 260svh; position: relative; }
.prob__pin { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); display: flex; align-items: center; overflow: clip; }
.prob__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.prob__list { margin-top: 34px; display: grid; }
.prob__list li { display: flex; align-items: center; gap: 18px; padding: 15px 0; border-top: 1px dashed var(--dash); font: 300 clamp(19px, 1.7vw, 24px)/1.3 var(--display); color: var(--ink-3); transition: color var(--beat) var(--ease); }
.prob__list li:last-child { border-bottom: 1px dashed var(--dash); }
.prob__list li span { font: 500 11px/1 var(--mono); color: var(--ink-3); transition: color var(--beat) var(--ease); }
.prob__list li.on { color: var(--ink); }
.prob__list li.on span { color: var(--orange); }

.prob__art { perspective: 1400px; }
.prob__plane { position: relative; aspect-ratio: 1; width: min(100%, 560px); margin-inline: auto; transform-style: preserve-3d; transform: rotateX(16deg) rotateY(calc(var(--side, 1) * -14deg)); }
[dir="rtl"] .prob__plane { --side: -1; }
.cube {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 76px; height: 76px; margin: -38px 0 0 -38px; z-index: 2;
  transform-style: preserve-3d; transform: rotate(calc(var(--r) * 1deg)) translateZ(var(--z, 0px)) translateY(var(--bob, 0px));
  animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--x) * -.08s);
}
@keyframes bob { 50% { translate: 0 -6px; } }
.cube__f { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; border: 1px dashed rgb(var(--ink-rgb) / .5); background: rgb(var(--bg-rgb) / .6); color: var(--ink-2); transition: border-color var(--beat) var(--ease), background var(--beat) var(--ease), color var(--beat) var(--ease), box-shadow var(--beat) var(--ease); }
.cube__f::before, .cube__f::after { content: ""; position: absolute; border: 1px dashed rgb(var(--ink-rgb) / .24); pointer-events: none; }
.cube__f::before { top: -1px; left: 100%; width: 30px; height: calc(100% + 2px); transform-origin: left; transform: rotateY(90deg); }
.cube__f::after { bottom: 100%; left: -1px; width: calc(100% + 2px); height: 30px; transform-origin: bottom; transform: rotateX(-90deg); }
.cube svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cube small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.cube.hit .cube__f { border-color: rgb(239 90 0 / .8); color: var(--ink); background: rgb(var(--bg-rgb) / .85); box-shadow: 0 18px 30px -18px rgb(239 90 0 / .6); }
.pipe { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.pipe__track { fill: none; stroke: var(--dash); stroke-width: 1.2; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.pipe__ink { fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 6px 10px rgb(239 90 0 / .35)); opacity: .92; }
.pipe__head { position: absolute; left: calc(var(--hx, 50) * 1%); top: calc(var(--hy, 100) * 1%); width: 18px; height: 18px; margin: -9px 0 0 -9px; z-index: 3; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgb(239 90 0 / .2), 0 0 20px rgb(239 90 0 / .7); opacity: var(--ho, 0); }
.prob__plane.is-stuck .pipe__head { animation: stuckPulse 1.4s ease-in-out infinite; background: #c2410c; }
@keyframes stuckPulse { 50% { box-shadow: 0 0 0 12px rgb(239 90 0 / 0), 0 0 30px rgb(239 90 0 / .9); } }
.stuck { position: absolute; left: 52%; top: 8%; z-index: 4; display: inline-flex; align-items: center; gap: 8px; margin: -42px 0 0 18px; padding: 7px 12px; border-radius: 8px; border: 1px dashed rgb(239 90 0 / .7); background: rgb(var(--bg-rgb) / .8); font: 500 12px/1 var(--mono); letter-spacing: 0; color: var(--orange); opacity: 0; transform: translateY(8px); transition: opacity var(--beat) var(--ease), transform var(--beat) var(--ease); }
.stuck i { width: 10px; height: 10px; position: relative; }
.stuck i::before, .stuck i::after { content: ""; position: absolute; top: 4px; left: 0; width: 10px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.stuck i::after { transform: rotate(-45deg); }
.prob__plane.is-stuck .stuck { opacity: 1; transform: none; }
.prob__plane.is-stuck .cube { animation-duration: 1.6s; }

@media (max-width: 900px) {
  .prob { height: 240svh; }
  .prob__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .prob__list { margin-top: 16px; }
  .prob__list li { padding: 9px 0; font-size: 17px; }
  .prob__plane { width: min(86vw, 360px); }
  .cube { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .cube svg { width: 20px; height: 20px; }
  .cube small { font-size: 8.5px; }
  .pipe__ink { stroke-width: 5; }
}
@media (prefers-reduced-motion: reduce) { .cube { animation: none; } }

/* ════════ A new layer: the stack faces right, and fills in ════════
   Mirrored so the side faces fall to the left. Over the pinned stretch each
   part, bottom-up, turns from a dashed outline into a solid block; the stack
   spreads, then settles back together as one whole object. */
.iso { transform: rotateY(24deg) rotateX(8deg) rotateZ(2deg); }
.iso .slab::before { left: auto; right: 100%; transform-origin: right; transform: rotateY(-90deg); }
.lcard-wrap:last-child { padding-bottom: 34svh; }
.iso .slab, .iso .tile { transition-property: transform, background, border-color, box-shadow, color; }
.iso .slab::before, .iso .slab::after { transition: background var(--beat) var(--ease), border-color var(--beat) var(--ease); }
.iso .is-solid { border-style: solid; border-color: rgb(var(--ink-rgb) / .16); background: linear-gradient(160deg, rgb(255 255 255 / .06), rgb(var(--ink-rgb) / .07)), rgb(var(--bg-rgb)); box-shadow: 0 26px 40px -26px rgb(var(--ink-rgb) / .5); }
[data-theme="light"] .iso .is-solid { background: linear-gradient(160deg, #fff, #ebe9e4); }
.iso .slab.is-solid::before { border-style: solid; border-color: rgb(var(--ink-rgb) / .12); background: linear-gradient(90deg, rgb(var(--ink-rgb) / .2), rgb(var(--ink-rgb) / .1)); }
.iso .slab.is-solid::after { border-style: solid; border-color: rgb(var(--ink-rgb) / .12); background: linear-gradient(0deg, rgb(var(--ink-rgb) / .14), rgb(var(--ink-rgb) / .06)); }
[data-theme="light"] .iso .slab.is-solid::before { background: linear-gradient(90deg, #cfccc6, #dedbd5); }
[data-theme="light"] .iso .slab.is-solid::after { background: linear-gradient(0deg, #e2dfd9, #f3f2ee); }
.iso .tile.is-solid svg { stroke: var(--ink); }
.iso .s-team.is-solid { background: var(--paper); color: var(--paper-ink); border-color: transparent; }
.iso .s-team.is-solid b { color: var(--paper-ink); }
.iso .s-team.is-solid small { color: var(--paper-ink); opacity: .6; }
.iso .s-mark.is-solid { background: var(--orange); border-color: transparent; }
.iso .s-mark.is-solid img { filter: brightness(0) invert(1); }
.iso .s-mark.is-solid::before { background: linear-gradient(90deg, #a83c00, #c94b00); border-color: transparent; }
.iso .s-mark.is-solid::after { background: linear-gradient(0deg, #ff8a3d, #ff9d5c); border-color: transparent; }
.iso.is-whole .is-solid { box-shadow: 0 34px 50px -30px rgb(var(--ink-rgb) / .55); }
.iso.is-whole .tile { animation: none; }
.iso.is-whole .s-team { box-shadow: 0 0 0 1px rgb(239 90 0 / .45), 0 34px 50px -30px rgb(var(--ink-rgb) / .55); }
@media (max-width: 900px) {
  .lcard-wrap:last-child { padding-bottom: 10px; }
  .iso { transform: rotateY(24deg) rotateX(8deg) rotateZ(2deg) scale(.66); }
}
@media (max-width: 520px) { .iso { transform: rotateY(24deg) rotateX(8deg) rotateZ(2deg) scale(.54); } }

/* ════════ Dashboard: wakes up in order, at the pace of the scroll ════════ */
.js .app .dz { opacity: 0; transform: translateY(14px); transition: opacity var(--beat) var(--ease), transform var(--beat) var(--ease), border-color .4s; }
.js .app .ask.dz { transform: translateX(calc(var(--side, 1) * 26px)); }
.js .app .dz.in { opacity: 1; transform: none; }
.bars i { transition: none; }
.grid14 i { transition: background .6s var(--ease); }
@media (min-width: 901px) and (min-height: 640px) {
  .dash { padding-bottom: 40px; }
  .dash__track { height: 340svh; }
  .dash__stage { position: sticky; top: calc(var(--bar) + 28px); transform: scale(var(--fit, 1)); transform-origin: 50% 0; }
}
@media (prefers-reduced-motion: reduce) { .js .app .dz { opacity: 1; transform: none; } }

/* ════════ Services: a little smaller, with photographs ════════ */
.svc { padding: 120px 0; }
.svc__list a { padding-top: 26px; padding-bottom: 26px; }
.svc__list b { font-size: clamp(26px, 2.4vw, 34px); margin-top: 10px; }
.svc__list p { font-size: 14.5px; }
.svc__art { height: 300px; border: 1px dashed var(--dash); border-radius: 4px; padding: 8px; background: transparent; }
.art { inset: 8px; overflow: hidden; border-radius: 2px; transform: none; transition: opacity 1.1s var(--ease) !important; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 3.2s var(--ease); }
.art.on img { transform: scale(1); }
.art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / .45), transparent 45%); }
.art__tag { position: absolute; bottom: 14px; inset-inline-start: 14px; z-index: 1; padding: 6px 10px; border-radius: 6px; background: rgb(0 0 0 / .45); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 11px/1 var(--mono); letter-spacing: 0; opacity: 0; transform: translateY(6px); transition: opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s; }
.art.on .art__tag { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .svc { padding: 90px 0; }
  .svc__art { display: block; height: 210px; margin-top: 28px; }
}

/* ════════ Scenarios: photographs, and a slower glide ════════ */
.slice--1 { background: url(/assets/img/strip-1.webp) center / cover; }
.slice--2 { background: url(/assets/img/strip-2.webp) center / cover; }
.slice--3 { background: url(/assets/img/strip-3.webp) center / cover; }
.slice--4 { background: url(/assets/img/strip-4.webp) center / cover; }
.slice--1::before { display: none; }
.card__strip { transition: grid-template-columns 1.6s var(--ease); }
.case__art::before { display: none; }
.case__art { background: #111; }
.case__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.6s var(--ease); }
.card--case:hover .case__img, .card--case.flash .case__img { transform: scale(1); }
.case__art::after { z-index: 1; background: linear-gradient(0deg, rgb(0 0 0 / .4), transparent 50%); opacity: 1; mix-blend-mode: normal; }
.case__tag { z-index: 2; }
.track.tween { scroll-snap-type: none; scroll-behavior: auto; }
.js .card--case[data-rise] { transition-duration: 1.4s; }

/* ════════ Portfolio: dashed device frames, waiting for demo videos ════════ */
.work { padding: 130px 0; border-top: 1px dashed var(--line-2); }
.work__head { max-width: 560px; margin-bottom: 52px; }
.work__grid { display: grid; grid-template-columns: 1.35fr .62fr 1.35fr; gap: 22px; align-items: end; perspective: 1600px; }
.wk { margin: 0; }
.wk__frame { position: relative; aspect-ratio: 16 / 10; border: 1px dashed rgb(var(--ink-rgb) / .4); background: rgb(var(--bg-rgb) / .55); overflow: hidden; transform-style: preserve-3d; transition: transform var(--beat) var(--ease), border-color var(--beat) var(--ease); }
.wk--phone .wk__frame { aspect-ratio: 9 / 18.5; border-radius: 26px; }
.wk--phone .wk__frame.brk::after { display: none; }
.wk__frame::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgb(var(--ink-rgb) / .045) 0 1px, transparent 1px 4px); pointer-events: none; }
.wk__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); }
.wk.has-video video { opacity: 1; }
.wk.has-video .wk__soon { display: none; }
.wk__soon { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.wk__soon i { width: 46px; height: 46px; border-radius: 50%; border: 1px dashed rgb(var(--ink-rgb) / .45); position: relative; animation: wkSpin 14s linear infinite; }
.wk__soon i::after { content: ""; position: absolute; top: 50%; left: 50%; translate: -35% -50%; border: 8px solid transparent; border-inline-start: 0; border-left: 12px solid rgb(var(--ink-rgb) / .55); animation: wkSpin 14s linear infinite reverse; }
@keyframes wkSpin { to { rotate: 360deg; } }
.wk figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--dash); margin-top: 14px; }
.wk figcaption b { font: 300 20px/1.2 var(--display); }
.wk figcaption span { font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.wk:hover .wk__frame { transform: rotateX(4deg) rotateY(calc(var(--side, 1) * -5deg)) translateY(-4px); border-color: rgb(var(--ink-rgb) / .7); }
[dir="rtl"] .wk { --side: -1; }
.js .wk[data-rise]:nth-child(2) { --d: 180ms; } .js .wk[data-rise]:nth-child(3) { --d: 360ms; }
@media (max-width: 900px) {
  .work { padding: 90px 0; }
  .work__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .55fr); }
  .wk--wide:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .wk__soon i, .wk__soon i::after { animation: none; } }
.wk figcaption { flex-wrap: wrap; }

/* ════════ Accessibility menu ════════ */
.ax { position: fixed; z-index: 90; bottom: 18px; left: 18px; transition: bottom .6s var(--ease); }
.cb-open .ax { bottom: 18px; }
.ax__fab { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--key-face); border: 1px solid var(--key-edge); box-shadow: var(--key-lit), 0 12px 26px var(--shadow); color: var(--key-ink); transition: transform .3s var(--ease); }
.ax__fab:hover { transform: translateY(-2px); }
.ax__fab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ax__fab svg circle { fill: currentColor; stroke: none; }
.ax__panel { position: absolute; bottom: 58px; left: 0; width: min(320px, calc(100% - 36px)); padding: 16px; border: 1px dashed rgb(var(--ink-rgb) / .35); border-radius: 6px; background: rgb(var(--bg-rgb) / .92); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 30px 60px var(--shadow); color: var(--ink); animation: axIn .45s var(--ease); }
@keyframes axIn { from { opacity: 0; transform: translateY(10px); } }
.ax__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ax__t { font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.ax__x { width: 28px; height: 28px; position: relative; border-radius: 6px; }
.ax__x i::before, .ax__x i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: var(--ink-2); translate: -50% -50%; rotate: 45deg; }
.ax__x i::after { rotate: -45deg; }
.ax__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ax__opt { min-height: 46px; padding: 8px 10px; border-radius: 6px; border: 1px dashed var(--dash); text-align: start; font-size: 13.5px; color: var(--ink-2); transition: background .3s, border-color .3s, color .3s; }
.ax__opt:hover { border-color: rgb(var(--ink-rgb) / .5); color: var(--ink); }
.ax__opt[aria-pressed="true"] { border-style: solid; border-color: var(--orange); color: var(--ink); background: rgb(239 90 0 / .08); }
.ax__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--dash); font-size: 13px; }
.ax__reset { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.ax__link { color: var(--ink-2); }
.ax__link:hover, .ax__reset:hover { color: var(--orange); }

/* the choices themselves */
html.a11y-font-1 body { zoom: 1.12; }
html.a11y-font-2 body { zoom: 1.25; }
html.a11y-font-1 .ax, html.a11y-font-2 .ax, html.a11y-font-1 .cb, html.a11y-font-2 .cb { zoom: 1; }
html.a11y-contrast { --ink-2: var(--ink); --ink-3: var(--ink); --dash: rgb(var(--ink-rgb) / .7); --line: rgb(var(--ink-rgb) / .5); --line-2: rgb(var(--ink-rgb) / .7); }
html.a11y-contrast .px { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
html.a11y-contrast .hero__bg, html.a11y-contrast .grid-bg::before { opacity: .15; }
html.a11y-stop-motion *, html.a11y-stop-motion *::before, html.a11y-stop-motion *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
html.a11y-readable, html.a11y-readable body, html.a11y-readable * { font-family: Arial, "Helvetica Neue", sans-serif !important; letter-spacing: normal !important; }
html.a11y-readable .px { background: none; -webkit-text-fill-color: currentColor; }
html.a11y-links a:not(.ax__link) { text-decoration: underline !important; text-underline-offset: 3px; outline: 1px dashed var(--orange); outline-offset: 2px; }

/* ════════ Cookie consent ════════ */
.cb { position: fixed; z-index: 95; bottom: 18px; right: 18px; width: min(460px, calc(100% - 100px)); padding: 18px 18px 16px; border: 1px dashed rgb(var(--ink-rgb) / .35); border-radius: 6px; background: rgb(var(--bg-rgb) / .9); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 30px 60px var(--shadow); color: var(--ink); animation: cbIn .9s var(--ease) both; }
.cb.out { animation: cbOut .6s var(--ease) both; }
@keyframes cbIn { from { opacity: 0; transform: translateY(18px); } }
@keyframes cbOut { to { opacity: 0; transform: translateY(18px); } }
.cb__p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.cb__p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cb__set { display: grid; gap: 8px; margin-top: 12px; }
.cb__row { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px dashed var(--dash); border-radius: 4px; cursor: pointer; }
.cb__row input { margin-top: 3px; accent-color: var(--orange); width: 16px; height: 16px; }
.cb__row b { display: block; font-size: 13.5px; font-weight: 500; }
.cb__row small { display: block; font-size: 12px; color: var(--ink-3); }
.cb__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cb__b { height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; background: var(--key-face); border: 1px solid var(--key-edge); box-shadow: var(--key-lit); color: var(--key-ink); }
.cb__b--go { background: var(--okey-face); border-color: var(--okey-edge); color: #fff; box-shadow: var(--okey-lit); }
.cb__b--ghost { background: none; border: 0; box-shadow: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .cb { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .cb-open .ax { bottom: calc(var(--cbh, 180px) + 22px); }
}

/* hero ask box: smaller on phones (16px input text keeps iOS from zooming in) */
@media (max-width: 520px) {
  .askbox, .hero--dial .askbox { width: min(100%, 320px); margin-top: 30px; margin-inline: auto; }
  .askbox__well { min-height: 46px; padding: 4px; padding-inline-start: 14px; border-radius: 12px; }
  .askbox input { font-size: 16px; transform: scale(.875); transform-origin: right center; width: 114%; margin-inline-end: -14%; }
  .askbox .okey { height: 36px; padding: 0 13px; border-radius: 9px; }
  .askbox .okey span { font-size: 13px; }
}

/* ════════ Display settings: a quiet gear above the accessibility button ════════ */
.dset { position: fixed; z-index: 89; bottom: 72px; left: 18px; transition: bottom .6s var(--ease); }
.cb-open .dset { bottom: 72px; }
.dset__fab { width: 46px; height: 32px; display: grid; place-items: center; border-radius: 10px; border: 1px dashed rgb(var(--ink-rgb) / .35); background: rgb(var(--bg-rgb) / .7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink-3); opacity: .7; transition: opacity .4s, color .4s, border-color .4s; }
.dset__fab:hover, .dset.open .dset__fab { opacity: 1; color: var(--ink); border-color: rgb(var(--ink-rgb) / .6); }
.dset__fab svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform .8s var(--ease); }
.dset.open .dset__fab svg { transform: rotate(90deg); }
.dset__panel { position: absolute; bottom: 0; left: 56px; display: grid; gap: 10px; min-width: 210px; padding: 14px 16px; border: 1px dashed rgb(var(--ink-rgb) / .35); border-radius: 6px; background: rgb(var(--bg-rgb) / .92); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 24px 50px var(--shadow); animation: axIn .45s var(--ease); }
.dset__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 600px) { .cb-open .dset { bottom: calc(var(--cbh, 180px) + 76px); } }

/* ════════ Ticker: the launch offer, quiet ════════
   No band, no blur: one hairline, small light type, a dot between phrases,
   slow drift, and edges that fade into the page. */
.ticker, [data-theme="dark"] .ticker {
  height: 40px; border-block: 0; border-top: 1px dashed rgb(var(--ink-rgb) / .18); background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.ticker__track { animation-duration: 70s; }
.ticker__row { gap: 18px; padding-inline-end: 18px; font: 300 13px/1 var(--sans); letter-spacing: 0; color: var(--ink-3); }
.ticker__row span:nth-child(4n+1) { color: var(--ink-3); }
.ticker__row b { font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink); }
.ticker__row i { width: 3px; height: 3px; border-radius: 50%; background: var(--orange); transform: none; opacity: .8; }
.ticker:hover .ticker__row { color: var(--ink-2); }

/* ════════ The problem: a growing pipe, a running current, problems popping up ════════ */
.prob { height: 220svh; }
.pipe__track { display: none; }
.pipe__ink { stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.pipe__mask { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pipe__flow { fill: none; stroke: rgb(255 240 228 / .95); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1.5 4.5; vector-effect: non-scaling-stroke; animation: pipeFlow .9s linear infinite; }
@keyframes pipeFlow { to { stroke-dashoffset: -6; } }
.prob__plane.is-stuck .pipe__flow { animation-play-state: paused; opacity: .45; }
.prob__plane.is-stuck .pipe__ink { stroke: #c2410c; transition: stroke 1.2s var(--ease); }
.pipe__head { width: 20px; height: 20px; margin: -10px 0 0 -10px; box-shadow: 0 0 0 6px rgb(239 90 0 / .18), 0 0 24px rgb(239 90 0 / .75); animation: headRun .7s ease-in-out infinite; }
@keyframes headRun { 50% { box-shadow: 0 0 0 10px rgb(239 90 0 / .08), 0 0 30px rgb(239 90 0 / .9); } }
.issue {
  position: absolute; left: calc(var(--ix) * 1%); top: calc(var(--iy) * 1%); z-index: 5;
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 9px; translate: -50% -50%;
  border: 1px dashed rgb(239 90 0 / .75); border-radius: 7px; background: rgb(var(--bg-rgb) / .9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 12px; white-space: nowrap; color: var(--ink);
  opacity: 0; transform: scale(.6) translateY(8px); transition: opacity .7s var(--ease), transform .9s var(--ease);
  box-shadow: 0 14px 28px -14px rgb(239 90 0 / .55);
}
.issue i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--orange); color: #fff; font: 600 11px/1 var(--mono); font-style: normal; }
.issue.on { opacity: 1; transform: none; animation: issueBob 4s ease-in-out infinite .9s; }
@keyframes issueBob { 50% { transform: translateY(-4px); } }
@media (max-width: 900px) {
  .prob { height: 200svh; }
  .issue { font-size: 11px; padding: 4px 7px; gap: 5px; }
  .issue i { width: 12px; height: 12px; font-size: 8px; }
  .pipe__ink { stroke-width: 7; }
  .pipe__mask { stroke-width: 11; }
}
@media (prefers-reduced-motion: reduce) { .pipe__flow, .pipe__head, .issue.on { animation: none; } }
/* the pipe runs over the tools, so it reads as one continuous line */
.pipe { z-index: 3; }
.pipe__head { z-index: 4; }
.cube__f { background: rgb(var(--bg-rgb) / .35); }
.cube.hit .cube__f { background: rgb(var(--bg-rgb) / .55); }
.pipe { transform: translateZ(40px); }
.pipe__head { transform: translateZ(42px); }
.issue { transform: translateZ(60px) scale(.6) translateY(8px); }
.issue.on { transform: translateZ(60px); animation: issueBob2 4s ease-in-out infinite .9s; }
@keyframes issueBob2 { 50% { transform: translateZ(60px) translateY(-4px); } }
.stuck { transform: translateZ(60px) translateY(8px); }
.prob__plane.is-stuck .stuck { transform: translateZ(60px); }
/* dashes measured in the SVG's own units (the plane is square, so it scales evenly) */
.pipe__ink, .pipe__mask, .pipe__flow { vector-effect: none; }
.pipe__ink { stroke-width: 1.7; }
.pipe__mask { stroke-width: 2.8; }
.pipe__flow { stroke-width: .42; stroke-dasharray: .3 .85; animation-name: pipeFlow2; }
@keyframes pipeFlow2 { to { stroke-dashoffset: -1.15; } }
@media (max-width: 900px) { .pipe__ink { stroke-width: 2; } .pipe__mask { stroke-width: 3.2; } .pipe__flow { stroke-width: .5; } }

/* ════════ Mobile pass ════════ */
@media (max-width: 900px) {
  /* process: the stack is centred on the screen and scaled to fit, not pushed off the edge */
  .scene3d { display: block; padding-top: 0; }
  .world { position: absolute; left: 50%; top: 54%; translate: -50% -50%; width: 600px; scale: .62; }
  .stage .chapter { top: calc(var(--bar) + 4%); padding-inline: 20px; }
  .chapter h3 { font-size: 40px; }
  .chapter p { font-size: 15px; }
  .weeks { bottom: 132px; }
  /* problem: the plane never taller than the room left under the text */
  .prob__plane { width: min(86vw, 360px, 44svh); }
  /* portfolio: one frame per row; the phone stands narrow in the middle */
  .work__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .wk--phone { width: min(56%, 220px); margin-inline: auto; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .prob__list li { padding: 7px 0; font-size: 15px; }
  .prob .h2 { font-size: 30px; }
}
@media (max-width: 520px) { .world { scale: .55; } }
@media (max-width: 380px) { .world { scale: .5; } }
@media (max-width: 380px) { .world { scale: .46; } }
/* the corner buttons take less room on phones */
@media (max-width: 600px) {
  .ax { left: 12px; bottom: 12px; }
  .ax__fab { width: 40px; height: 40px; border-radius: 10px; }
  .ax__fab svg { width: 19px; height: 19px; }
  .ax__panel { bottom: 50px; }
  .dset { left: 12px; bottom: 60px; }
  .dset__fab { width: 40px; height: 28px; }
  .dset__panel { left: 50px; }
  .cb-open .ax { bottom: calc(var(--cbh, 180px) + 18px); }
  .cb-open .dset { bottom: calc(var(--cbh, 180px) + 66px); }
}

/* ════════ The problem, redrawn: a tidy flow map ════════
   Three aligned columns — tool · pipe · problem. The pipe climbs from a new
   request through each tool, a problem settles beside every station, and the
   line stops short of the customer. */
.prob { height: auto; padding: 130px 0 120px; }
.prob__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.prob__count { display: flex; align-items: baseline; gap: 12px; margin-top: 34px; padding-top: 18px; border-top: 1px dashed var(--dash); max-width: 340px; }
.prob__count b { font: 300 52px/1 var(--display); color: var(--orange); min-width: 1ch; }
.prob__count span { font: 500 11px/1.4 var(--mono); letter-spacing: 0; color: var(--ink-3); }

.fm { position: relative; width: min(100%, 560px); margin-inline: auto; --col: 56px; }
.fm__rows, .fm__goal, .fm__start { position: relative; z-index: 2; }
.fm__row, .fm__goal, .fm__start { display: grid; grid-template-columns: minmax(0, 1fr) var(--col) minmax(0, 1fr); align-items: center; }
.fm__row { height: 74px; }
.fm__goal, .fm__start { height: 58px; }
.fm .fm__node { grid-column: 2; justify-self: center; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgb(var(--ink-rgb) / .35); background: rgb(var(--bg-rgb)); transition: border-color .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease); }
.fm__row.on .fm__node { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 5px rgb(239 90 0 / .14); }
.fm__start .fm__node { border-color: var(--orange); background: var(--orange); }
.fm__node--goal { width: 18px !important; height: 18px !important; border-style: dashed !important; }
.fm__goal > span:not(.fm__stuck), .fm__start > span { grid-column: 1; grid-row: 1; justify-self: end; padding-inline-end: 4px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.fm__goal > span:not(.fm__stuck) { color: var(--ink-2); }

.fm__tool { grid-column: 1; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px dashed rgb(var(--ink-rgb) / .35); border-radius: 4px; background: rgb(var(--bg-rgb) / .7); font-size: 14px; color: var(--ink-2); transition: border-color .8s var(--ease), color .8s var(--ease), background .8s var(--ease); }
.fm__tool svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fm__row.on .fm__tool { border-style: solid; border-color: rgb(var(--ink-rgb) / .2); color: var(--ink); background: rgb(var(--bg-rgb)); box-shadow: 0 10px 22px -16px rgb(var(--ink-rgb) / .5); }
.fm__issue { grid-column: 3; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); white-space: nowrap; opacity: 0; transform: translateX(calc(var(--side, 1) * -10px)); transition: opacity .9s var(--ease) .15s, transform .9s var(--ease) .15s; }
[dir="rtl"] .fm { --side: -1; }
.fm__issue i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: rgb(239 90 0 / .12); color: var(--orange); font: 600 11px/1 var(--mono); font-style: normal; }
.fm__row.on .fm__issue { opacity: 1; transform: none; }

.fm__pipe { position: absolute; inset: 0; z-index: 1; overflow: visible; pointer-events: none; }
.fm__track { fill: none; stroke: rgb(var(--ink-rgb) / .22); stroke-width: 1.2; stroke-dasharray: 3 5; }
.fm__ink { fill: none; stroke: var(--orange); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 4px 8px rgb(239 90 0 / .3)); }
.fm__mask { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; }
.fm__flow { fill: none; stroke: rgb(255 244 236 / .95); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 7; animation: fmFlow 1s linear infinite; }
@keyframes fmFlow { to { stroke-dashoffset: -8; } }
.fm__head { position: absolute; z-index: 3; left: var(--hx, 0); top: var(--hy, 0); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgb(239 90 0 / .18); opacity: 0; transition: opacity .4s; }
.fm.is-going .fm__head { opacity: 1; }
.fm.is-stuck .fm__flow { animation-play-state: paused; opacity: .4; }
.fm.is-stuck .fm__head { background: #c2410c; animation: stuckPulse 1.6s ease-in-out infinite; }
.fm__stuck { grid-column: 3; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px dashed rgb(239 90 0 / .7); border-radius: 6px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--orange); opacity: 0; transform: translateY(6px); transition: opacity 1s var(--ease) .3s, transform 1s var(--ease) .3s; }
.fm__stuck i { width: 9px; height: 9px; position: relative; }
.fm__stuck i::before, .fm__stuck i::after { content: ""; position: absolute; top: 4px; left: 0; width: 9px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.fm__stuck i::after { transform: rotate(-45deg); }
.fm.is-stuck .fm__stuck { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .prob { padding: 90px 0 80px; }
  .prob__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .prob__count { margin-top: 24px; }
  .prob__count b { font-size: 40px; }
  .fm { --col: 38px; }
  .fm__row { height: 60px; }
  .fm__goal, .fm__start { height: 46px; }
  .fm__tool { padding: 7px 10px; gap: 7px; font-size: 13px; }
  .fm__tool svg { width: 15px; height: 15px; }
  .fm__issue { font-size: 12.5px; gap: 6px; white-space: normal; line-height: 1.25; }
  .fm__ink { stroke-width: 5; }
}
@media (prefers-reduced-motion: reduce) { .fm__flow, .fm.is-stuck .fm__head { animation: none; } }
@media (min-width: 901px) {
  .fm { width: min(100%, 620px); --col: 64px; }
  .fm__row { height: 86px; }
  .fm__tool { padding: 11px 16px; font-size: 15.5px; gap: 10px; }
  .fm__tool svg { width: 18px; height: 18px; }
  .fm__issue { font-size: 15.5px; }
  .fm__ink { stroke-width: 7; }
}

/* ════════ Phone mode (html.is-phone, set by boot.js) ════════
   Ordinary scrolling: no pinned scenes. Each scene sits in the flow at a
   phone-sized height and plays by itself when it comes into view. Flatter
   3D, smaller type, more air — fewer things on screen at once. */
.is-phone .better { height: auto; }
.is-phone .better__pin { position: relative; top: auto; height: auto; display: block; padding: 70px 0 30px; }
.is-phone .better__grid { height: auto; padding: 0; }
.is-phone .phone { height: min(560px, 74svh); }
.is-phone .better__pin > .wrap, .is-phone .stage__pin > * { opacity: 1; transform: none; }
.is-phone .stage { height: auto; }
.is-phone .stage__pin { position: relative; top: auto; height: min(640px, 86svh); }
.is-phone .stage .chapter { top: 6%; }
.is-phone .how__intro { padding-bottom: 10px; }
.is-phone .dash__track { height: auto; }
.is-phone .dash__stage { position: static; transform: none; }
.is-phone .app { transform: none; box-shadow: 0 24px 50px var(--shadow); }
.is-phone .iso-art { position: relative; top: auto; }
.is-phone .iso { transform: rotateY(12deg) rotateX(4deg) scale(.66); }
.is-phone .lcard-wrap:last-child { padding-bottom: 10px; }
.is-phone .hero__reeds { transform: none; }
.is-phone .h2 { font-size: clamp(28px, 8vw, 36px); }
.is-phone .sub { font-size: 15.5px; }
.is-phone .lcard { padding: 26px 22px; min-height: 0; }
.is-phone .lcard h3 { font-size: 26px; }
.is-phone .wk:hover .wk__frame, .is-phone .rel:hover { transform: none; }
.is-phone [data-tilt] { --rx: 0deg !important; --ry: 0deg !important; }
@media (max-width: 520px) { .is-phone .iso { transform: rotateY(12deg) rotateX(4deg) scale(.56); } }

/* portfolio: the films (16:10 for the web pieces, 9:16 for the app) */
.work__grid { grid-template-columns: 1.35fr .5fr 1.35fr; }
.wk--phone .wk__frame { aspect-ratio: 9 / 16; border-radius: 4px; }
.wk--phone .wk__frame.brk::after { display: block; }
.wk__frame { background: #f4f2ee; }
.wk.has-video .wk__frame::before { display: none; }
.wk__frame video { opacity: 1; }
@media (max-width: 900px) {
  .work__grid { grid-template-columns: minmax(0, 1fr); }
  .wk--phone { width: min(64%, 300px); }
}
.face::after { content: attr(data-t); }

/* portfolio: click to watch large */
.wk__frame[role="button"] { cursor: zoom-in; }
.wk__frame[role="button"]::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 10px; z-index: 2;
  background: rgb(11 11 12 / .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E") center / 16px no-repeat;
  opacity: 0; transform: scale(.9); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.wk__frame[role="button"]:hover::after, .wk__frame[role="button"]:focus-visible::after { opacity: 1; transform: none; }
.is-phone .wk__frame[role="button"]::after { opacity: .9; transform: none; }
.lb { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 4vmin; background: rgb(10 10 12 / .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.lb.open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.lb__box { position: relative; width: min(92vw, calc(88vh * 1.6)); aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #f4f2ee;
  box-shadow: 0 40px 120px rgb(0 0 0 / .5); transform: scale(.94) translateY(12px); transition: transform .55s var(--ease); }
.lb--tall .lb__box { width: min(92vw, calc(88vh * .5625)); aspect-ratio: 9 / 16; }
.lb.open .lb__box { transform: none; }
.lb video { width: 100%; height: 100%; display: block; object-fit: cover; }
.lb__x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 12px; background: rgb(11 11 12 / .6); }
.lb__x i::before, .lb__x i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background: #fff; translate: -50% -50%; rotate: 45deg; }
.lb__x i::after { rotate: -45deg; }
.lb-open body { overflow: hidden; }

/* the bar: one button, straight to the contact form (also on phones) */
@media (max-width: 760px) { .nav .okey.nav__cta { display: inline-flex; height: 34px; padding: 0 13px; } .nav .okey.nav__cta span { font-size: 13px; } }

/* ════════ Hero: the questionnaire button ════════ */
.qstart { position: relative; width: min(100%, 560px); margin: 44px auto 0; }
.qbtn { width: 100%; min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px; padding-inline-start: 22px; cursor: pointer; text-align: start; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.qbtn:hover { transform: translateY(-2px); }
.qbtn__t { display: grid; gap: 4px; min-width: 0; }
.qbtn__t b { font: 400 18px/1.15 var(--sans); color: var(--ink); }
.qbtn__t small { font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.qbtn .okey { height: 50px; padding: 0 22px; flex: none; display: inline-flex; align-items: center; }
.qbtn .okey span::after { content: " ←"; }
/* the bubble */
.qhint { position: absolute; top: calc(100% + 16px); inset-inline-start: 50%; translate: 50% 0; width: min(330px, 86vw); z-index: 6; display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 14px 14px 12px; border-radius: 14px; background: var(--ink); color: var(--bg); box-shadow: 0 24px 50px -18px rgb(0 0 0 / .45);
  opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .6s var(--ease), transform .7s var(--ease); }
[dir="ltr"] .qhint { translate: -50% 0; }
.qhint::before { content: ""; position: absolute; top: -7px; inset-inline-start: 50%; width: 14px; height: 14px; margin-inline-start: -7px; background: inherit; border-radius: 3px; transform: rotate(45deg); }
.qhint.show { opacity: 1; transform: none; animation: qhFloat 3.2s ease-in-out 1s infinite; }
@keyframes qhFloat { 50% { transform: translateY(-4px); } }
.qhint p { font-size: 14.5px; line-height: 1.45; flex: 1; }
.qhint__x { position: relative; flex: none; width: 24px; height: 24px; border-radius: 7px; background: rgb(var(--bg-rgb) / .14); }
.qhint__x i::before, .qhint__x i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; background: currentColor; translate: -50% -50%; rotate: 45deg; }
.qhint__x i::after { rotate: -45deg; }
@media (max-width: 520px) { .qstart { margin-top: 30px; width: min(100%, 340px); } .qbtn { min-height: 56px; padding: 5px; padding-inline-start: 16px; } .qbtn__t b { font-size: 15.5px; } .qbtn .okey { height: 42px; padding: 0 15px; } .qbtn .okey span { font-size: 13px; } }

/* ════════ The questionnaire ════════ */
.qz { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; background: rgb(10 10 12 / .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
.qz.open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.qz-open body { overflow: hidden; }
.qz__card { position: relative; width: min(540px, 100%); max-height: calc(100svh - 32px); overflow: auto; border-radius: 20px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); box-shadow: 0 50px 120px -30px rgb(0 0 0 / .5); transform: translateY(18px) scale(.97); transition: transform .55s var(--ease); }
.qz.open .qz__card { transform: none; }
.qz__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; }
.qz__n { font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.qz__x, .qz__back { position: relative; width: 36px; height: 36px; border-radius: 10px; border: 1px dashed var(--dash); }
.qz__x i::before, .qz__x i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 1.5px; background: var(--ink-2); translate: -50% -50%; rotate: 45deg; }
.qz__x i::after { rotate: -45deg; }
.qz__back i::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border: solid var(--ink-2); border-width: 1.5px 1.5px 0 0; translate: -70% -50%; rotate: 45deg; }
[dir="ltr"] .qz__back i::before { rotate: -135deg; translate: -30% -50%; }
.qz__bar { height: 3px; margin: 0 18px; border-radius: 3px; background: rgb(var(--ink-rgb) / .08); overflow: hidden; }
.qz__bar i { display: block; height: 100%; width: 0; background: var(--orange); border-radius: inherit; transition: width .6s var(--ease); }
.qz__body { position: relative; display: grid; padding: 26px 26px 28px; }
.qz__pane { grid-area: 1 / 1; }
.qz__pane.in-r { animation: qzInR .5s var(--ease) both; } .qz__pane.in-l { animation: qzInL .5s var(--ease) both; }
.qz__pane.out-l { animation: qzOutL .35s var(--ease) both; pointer-events: none; } .qz__pane.out-r { animation: qzOutR .35s var(--ease) both; pointer-events: none; }
@keyframes qzInR { from { opacity: 0; transform: translateX(-34px); } } @keyframes qzInL { from { opacity: 0; transform: translateX(34px); } }
@keyframes qzOutL { to { opacity: 0; transform: translateX(34px); } } @keyframes qzOutR { to { opacity: 0; transform: translateX(-34px); } }
.qz__q { font: 300 clamp(24px, 4.6vw, 30px)/1.2 var(--display); }
.qz__q--s { margin-top: 24px; font-size: 22px; }
.qz__h { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.qz__opts { display: grid; gap: 8px; margin-top: 20px; }
.qz__o { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: 12px; text-align: start;
  border: 1px dashed rgb(var(--ink-rgb) / .3); background: rgb(var(--bg-rgb) / .6); font-size: 16px; color: var(--ink); transition: border-color .3s, background .3s, transform .3s var(--ease); }
.qz__o:hover { border-color: rgb(var(--ink-rgb) / .6); transform: translateX(-3px); }
.qz__o i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgb(var(--ink-rgb) / .3); position: relative; transition: background .3s, border-color .3s; }
.qz__opts.multi .qz__o i { border-radius: 6px; }
.qz__o[aria-pressed="true"] { border-style: solid; border-color: var(--orange); background: rgb(239 90 0 / .07); }
.qz__o[aria-pressed="true"] i { background: var(--orange); border-color: var(--orange); }
.qz__o[aria-pressed="true"] i::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; }
.qz__next, .qz__send { margin-top: 18px; height: 50px; width: 100%; justify-content: center; display: inline-flex; align-items: center; }
.qz__next[disabled] { opacity: .6; background: var(--line-2); color: var(--ink-3); box-shadow: none; border-color: transparent; cursor: not-allowed; pointer-events: none; }
.qz__rec { padding: 18px; border-radius: 14px; background: var(--paper); color: var(--paper-ink); }
.qz__rk { font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--orange); }
.qz__rec b { display: block; margin-top: 10px; font: 400 21px/1.2 var(--sans); }
.qz__rec p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; opacity: .75; }
.qz__form { display: grid; gap: 10px; margin-top: 14px; }
.qz__f { display: grid; gap: 6px; }
.qz__f span { font-size: 13px; color: var(--ink-3); }
.qz__f input { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgb(var(--bg-rgb)); color: var(--ink); font: 400 16px var(--sans); }
.qz__f input:focus { outline: 2px solid rgb(239 90 0 / .5); outline-offset: 1px; }
.qz__err { min-height: 1em; font-size: 13.5px; color: #d03a2f; }
.qz__form.sending .qz__send { opacity: .6; pointer-events: none; }
.qz__legal { font-size: 12.5px; color: var(--ink-3); text-align: center; }
.qz__legal a { text-decoration: underline; }
.qz__done { text-align: center; display: grid; justify-items: center; gap: 12px; padding: 8px 0; }
.qz__ok { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #1fa45a; animation: qzPop .7s var(--ease) both; }
.qz__ok svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: qzDraw .5s .35s var(--ease) forwards; }
@keyframes qzPop { from { transform: scale(.3); opacity: 0; } } @keyframes qzDraw { to { stroke-dashoffset: 0; } }
.qz__done p { color: var(--ink-2); line-height: 1.5; max-width: 360px; }
@media (max-width: 600px) {
  .qz { padding: 0; place-items: end stretch; }
  .qz__card { width: 100%; border-radius: 20px 20px 0 0; max-height: 92svh; transform: translateY(40px); }
  .qz__body { padding: 20px 18px 24px; }
}
@media (prefers-reduced-motion: reduce) { .qhint.show { animation: none; } }

/* ── UX pass: shorter scenes, visible focus, touch targets, floating controls ── */
.better { height: 340svh; }
.stage { height: 560svh; }
@media (max-height: 760px), (max-width: 1100px) { .better { height: 320svh; } .stage { height: 500svh; } }

.well:focus-within { border-color: rgb(239 90 0 / .7); box-shadow: var(--well-rim), var(--well-inset), 0 0 0 3px rgb(239 90 0 / .18); }
.track:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
.js .app .dz:focus-visible { opacity: 1; transform: none; }

.dots button { position: relative; }
.dots button::after { content: ""; position: absolute; inset: -16px -3px; }
.social { gap: 4px; margin-inline-start: -13px; }
.social a { display: grid; place-items: center; padding: 13px; }

/* the films keep their own light posters; dim them a touch on the dark page */
[data-theme="dark"] .wk__frame video, [data-theme="dark"] .wk__frame img { filter: brightness(.9); }

/* the floating controls step aside while a field is in use */
:is(.ax, .dset) { transition: bottom .6s var(--ease), opacity .25s; }
html:has(.well :focus, .qz__form :focus) :is(.ax, .dset) { opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
  html.a11y-font-1 .dhero__title { font-size: calc(9.2vw / 1.12); }
  html.a11y-font-2 .dhero__title { font-size: calc(9.2vw / 1.25); }
}

@media (max-width: 760px) {
  /* 16px stops iOS from zooming into a field on focus */
  .well input, .well textarea, .well select, .form .well input, .form .well textarea, .well--glow input { font-size: 16px; }
  /* room under the footer so the floating buttons never cover the last links */
  .foot { padding-bottom: 128px; }
  .nav__menu { width: 44px; height: 44px; }
  .nav__menu span { inset-inline: 12px; }
  .nav__menu span:first-child { top: 18px; }
  .nav__menu span:last-child { top: 25px; }
  .nav .okey.nav__cta { height: 40px; }
  .key--sq { width: 44px; height: 44px; }
  .qz__x, .qz__back { width: 44px; height: 44px; }
  .cb__b { height: 44px; }
  .foot__col { gap: 0; }
  .foot__col a, .foot__legal a { display: inline-block; padding-block: 11px; }
}
/* names and free text follow what is typed: an English line sits left, Hebrew right */
.well input:not([dir]), .well textarea, .qz__f input:not([dir]) { unicode-bidi: plaintext; }

/* ── Hero: what we do, and the direct ways in ── */
.hero--dial .dhero__sub { margin: 22px auto 0; max-width: 46ch; text-wrap: balance; text-align: center; font-size: 19px; line-height: 1.5; color: var(--hero-lede); }
.dhero__ways { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; margin-top: 16px; font-size: 14px; color: var(--hero-lede); }
.dhero__ways span { opacity: .75; }
.dhero__ways a { display: inline-block; padding-block: 10px; color: var(--ink); text-decoration: underline; text-decoration-color: rgb(var(--ink-rgb) / .35); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.dhero__ways a:hover { text-decoration-color: var(--orange); }
.dhero__ways i { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); }
@media (max-width: 760px) {
  .hero--dial .dhero__sub { font-size: 16px; margin-top: 16px; }
  .dhero__ways { font-size: 13px; gap: 0 10px; }
}

/* ── Contact: WhatsApp and email right beside the form ── */
.reach { display: grid; gap: 10px; margin-top: 28px; max-width: 420px; }
.reach a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border: 1px dashed var(--dash); border-radius: 12px; font-size: 15px; color: var(--ink); background: rgb(var(--ink-rgb) / .02); transition: border-color .25s, background .25s; }
.reach a:hover { border-color: var(--orange); background: rgb(239 90 0 / .05); }
.reach svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--orange); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.reach bdi { margin-inline-start: auto; font: 400 14px/1 var(--mono); color: var(--ink-2); direction: ltr; }

/* ── Scenarios intro card: actions instead of a second form ── */
.card__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.card__ctas .okey, .card__ctas .key { height: 40px; }

/* the nav button drops "חינם" where space is tight */
@media (max-width: 400px) { .nav__cta-x { display: none; } }
@media (max-width: 360px) { .dhero__ways span { display: none; } }


/* ── polish: readable orange and green text on the light theme, visible field edges, 44px hit areas ── */
:root { --field-edge: rgb(255 255 255 / .42); }
[data-theme="light"] { --orange-ink: #b23c00; --ok-ink: #16703f; --field-edge: rgb(0 0 0 / .42); }
[data-theme="light"] :is(.tag--o, .app__wait, .fm__stuck, .stuck, .issue i) { color: var(--orange-ink); }
[data-theme="light"] :is(.ok, .kpi__n--ok, .ask.done .ask__btns) { color: var(--ok-ink); }
.form .well, .card__form .well { border-color: var(--field-edge); }
.key--sm { position: relative; }
.key--sm::after { content: ""; position: absolute; inset: -8px 0; }

/* labels speak in the body face (Hebrew already did); mono stays for figures and code */
:is(.eyebrow, .case__tag, .story__tag, .badges li, .tag, .prompts button small, .post__art--0 small, .post__badge, .art__tag, .wk figcaption span, .qbtn__t small) { font-family: var(--sans); }
[data-theme="light"] :is(.tag--w) { color: var(--orange-ink); }
[data-theme="light"] .dot--on { color: var(--ok-ink); }
.well input:focus-visible, .well textarea:focus-visible, .well select:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }