/* ═══════════════════════════════════════════════════════════════════════════
   KAZUVA design system · kz.css · v1.0 · 8 Nov 2026

   SOURCE. This is the VRTKX portfolios system (vrtkx.vercel.app, frozen home
   v02-06, `04-vibes/vrtkx/src/components/vrtkx-home-v02-06/Home.module.css`
   and `04-vibes/vrtkx/DESIGN-SYSTEM.md`), carried over in full on Kav's call
   (7 Nov): same tokens, type, components and assets. Only the brand name,
   logo and copy change. Ported from a CSS Module to plain classes with a
   `kz-` prefix, so it works in static HTML demos, proposals and kazuva.com.

   THREE SWITCHES ON <html>, all attributes, all set before first paint:
     data-theme   dark (default) | light      no prefers-color-scheme, on purpose
     data-motion  calm (default) | full       the gear switch writes this
     data-preset  strict | standard (default) | expressive

   MOTION, the VRTKX policy. Two kinds of transition:
     FADE      colour, opacity, border, shadow. Always runs, in both tiers.
     MOVEMENT  transform, translate, clip-path, size. Springs in full, 1 ms in
               calm. Loops (electrons, bob) run in full only.
   Calm is the default without JS and when the OS asks for reduced motion
   (Kav's Windows does). `?motion=full` or the gear switch overrides it.

   NEVER Inter. Faces: Young Serif (display), Space Grotesk (body, stand-in for
   Kav's Chakra Petch), JetBrains Mono (numbers and codes only).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Faces ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "KZ Young Serif";
  src: url("fonts/young-serif-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "KZ Young Serif";
  src: url("fonts/young-serif-400-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "KZ Body";
  src: url("fonts/space-grotesk-var-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "KZ Body";
  src: url("fonts/space-grotesk-var-latin-ext.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "KZ Mono";
  src: url("fonts/jetbrains-mono-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ── Primitives · the VRTKX Framer tokens, unchanged ───────────────────── */

:root {
  --display: "KZ Young Serif", ui-serif, Georgia, "Times New Roman", serif;
  --body: "KZ Body", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "KZ Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --f-black: #120727;
  --f-accent: #7747f7;
  --f-secondary: #8e77ff;
  --f-shade: #9c9cf9;
  --f-bg: #fefdff;
  --f-ui1: #f4f3f5;
  --f-lightgrey: #e8e7e9;
  --f-ui2: #d8d7d9;
  --f-seasalt: #f7f7f8;
  --f-cardbody: #5f5e64;
  --magenta: #b41ef1; /* decorative and large text only */

  /* Kav's Framer springs, as linear() curves sampled from the spring maths. */
  --spring: linear(0, 0.0355, 0.1215, 0.2337, 0.355, 0.474, 0.5838, 0.6806, 0.7626, 0.8301, 0.8838, 0.9254, 0.9566, 0.9791, 0.9947, 1.0049, 1.011, 1.0141, 1.0151, 1.0148, 1.0136, 1.012, 1.0101, 1.0083, 1.0066, 1.0051, 1.0038, 1.0028, 1.0019, 1.0012, 1);
  --spring-btn: linear(0, 0.0224, 0.0789, 0.1562, 0.2444, 0.3363, 0.427, 0.5128, 0.5919, 0.6629, 0.7255, 0.7798, 0.826, 0.8648, 0.897, 0.9232, 0.9443, 0.961, 0.9741, 0.9841, 0.9915, 0.997, 1.0008, 1.0034, 1.005, 1.0059, 1.0063, 1.0062, 1.006, 1.0055, 1.005, 1.0044, 1.0038, 1.0033, 1.0028, 1.0023, 1);
  --glide: linear(0, 0.0889, 0.2194, 0.3371, 0.4379, 0.5235, 0.596, 0.6575, 0.7097, 0.7539, 0.7914, 0.8231, 0.8501, 0.8729, 0.8922, 0.9086, 0.9226, 0.9343, 0.9443, 0.9528, 0.96, 0.9661, 0.9713, 0.9756, 0.9793, 0.9825, 0.9852, 0.9874, 0.9893, 0.991, 1);

  /* MOVEMENT durations (collapse in calm) */
  --t: 0.4s;
  --t-btn: 0.7s;
  --t-glide: 1.1s;
  --t-peek: 5.5s;
  --t-reveal: 0.9s;
  /* FADE durations (run in both tiers) */
  --t-fade: 0.2s;
  --t-fade-fast: 0.14s;
  --ease-fade: cubic-bezier(0.33, 0, 0.2, 1);

  /* Space · 4px base, VRTKX steps only */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
  --s10: 40px; --s14: 56px; --s16: 64px; --s20: 80px; --s24: 96px;

  /* Radius */
  --r-chip: 3px;    /* section square */
  --r-inner: 10px;  /* screenshot inside a frame */
  --r-card: 20px;   /* cards, work frames */
  --r-pop: 16px;    /* popovers */
  --r-pill: 999px;  /* buttons, nav pill, toggles */

  /* Layout */
  --gutter: clamp(1.25rem, 0.6rem + 2.4vw, 2.75rem);
  --shell: min(100% - 2 * var(--gutter), 76rem);
  --frame: min(100% - 2.5rem, calc(var(--shell) + 2 * clamp(0.75rem, 3.5vw, 4rem)));
  --band-y: clamp(5rem, 3rem + 7vw, 9.5rem);
  --nav-h: 4.75rem;

  /* Type scale, as shipped on VRTKX */
  --fs-hero: clamp(2.9rem, 1.6rem + 5.6vw, 6.4rem);
  --fs-h2: clamp(2.4rem, 1.35rem + 3.9vw, 4.75rem);
  --fs-h2-sm: clamp(1.95rem, 1.3rem + 2.4vw, 3.25rem);
  --fs-h3: clamp(1.4rem, 1.2rem + 0.7vw, 1.8rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
}

/* ── Calm tier · movement collapses, fades stay ───────────────────────── */

html:not([data-motion="full"]) {
  --t: 1ms;
  --t-btn: 1ms;
  --t-glide: 1ms;
  --t-peek: 1ms;
  --t-reveal: 1ms;
  --spring: linear(0, 1);
  --spring-btn: linear(0, 1);
  --glide: linear(0, 1);
}
html[data-motion="full"] { scroll-behavior: smooth; }

/* ── Tones · dark default, light by attribute ─────────────────────────── */
/* .kz-fl follows the theme · .kz-lt light in both · .kz-dk dark in both
   .kz-inv a block that takes the opposite of its band */

.kz,
.kz-fl,
.kz-dk,
html[data-theme="light"] .kz-fl .kz-inv {
  --ground: #120727;
  --ground-alt: #1a0e36;
  --raised: #1d1336;
  --sunk: #0b0418;
  --ink: var(--f-seasalt);
  --ink-dim: rgb(247 247 248 / 0.76);
  --ink-mute: rgb(247 247 248 / 0.62);
  --pop: var(--f-secondary);
  --accent: var(--f-accent);
  --on-accent: var(--f-seasalt);
  --btn-bg: var(--f-seasalt);
  --btn-ink: var(--f-black);
  --line: rgb(247 247 248 / 0.1);
  --edge: rgb(247 247 248 / 0.12);
  --edge-strong: rgb(247 247 248 / 0.22);
  --wash: rgb(247 247 248 / 0.05);
  --glow: 0 0 18px rgb(119 71 247 / 0.5), 0 0 44px rgb(119 71 247 / 0.28);
  --glow-press: 0 0 10px rgb(142 119 255 / 0.55), 0 0 30px rgb(119 71 247 / 0.32);
  --card-sheen: linear-gradient(180deg, rgb(119 71 247 / 0.15), transparent 62%);
  --card-ring: inset 0 0 0 2px var(--edge), inset 0 1px 0 rgb(247 247 248 / 0.09);
  --card-drop: 0 18px 40px -22px rgb(0 0 0 / 0.65);
  --card-hover: linear-gradient(99deg, transparent 30%, rgb(142 119 255 / 0.17) 100%);
  --grad: linear-gradient(100deg, #cfc4ff 0%, var(--f-secondary) 45%, var(--magenta) 100%);
  --pulse-core: #efeaff;
  --pulse-glow: rgb(142 119 255 / 0.9);
  --plus: rgb(247 247 248 / 0.4);
  --focus: var(--f-seasalt);
  --pop-bg: #1d1336;
  --pop-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.7), inset 0 0 0 1px var(--edge-strong);
  color-scheme: dark;
}
.kz-lt,
html[data-theme="light"] .kz,
html[data-theme="light"] .kz-fl,
.kz-fl .kz-inv {
  --ground: var(--f-bg);
  --ground-alt: #f5f3fa;
  --raised: var(--f-ui1);
  --sunk: var(--f-lightgrey);
  --ink: var(--f-black);
  --ink-dim: var(--f-cardbody);
  --ink-mute: #68676d;
  --pop: var(--f-accent);
  --accent: var(--f-accent);
  --on-accent: var(--f-seasalt);
  --btn-bg: var(--f-black);
  --btn-ink: var(--f-seasalt);
  --line: #e7e6ea;
  --edge: rgb(18 7 39 / 0.08);
  --edge-strong: rgb(18 7 39 / 0.16);
  --wash: rgb(18 7 39 / 0.03);
  --glow: 0 6px 20px rgb(119 71 247 / 0.3);
  --glow-press: 0 2px 10px rgb(119 71 247 / 0.36);
  --card-sheen: none;
  --card-ring: inset 0 0 0 1px rgb(232 231 233 / 0.85);
  --card-drop: 0 0 4px rgb(0 0 0 / 0.05);
  --card-hover: linear-gradient(99deg, transparent 30%, rgb(119 71 247 / 0.13) 100%);
  --grad: linear-gradient(100deg, var(--f-accent) 0%, #9446f4 55%, var(--magenta) 100%);
  --pulse-core: var(--f-accent);
  --pulse-glow: rgb(119 71 247 / 0.45);
  --plus: rgb(18 7 39 / 0.35);
  --focus: var(--f-black);
  --pop-bg: #ffffff;
  --pop-shadow: 0 14px 34px -10px rgb(18 7 39 / 0.28), inset 0 0 0 1px var(--edge);
  color-scheme: light;
}

/* ── Presets · how much of the system shows ──────────────────────────────
   strict      audits, proposals, corporate. No grid, no glow, no gradient
               text, no electrons. Cards flat. Smaller display type.
   standard    the default. Grid hairlines + plus marks, glow, card sheen,
               electrons in full motion, gradient on one word at most.
   expressive  VRTKX home at full volume. Hero facets, footer orbits, bigger
               display, more electrons, the price bob and card lift.        */

:root {
  --show-grid: block;
  --show-electrons: block;
  --show-art: none;
  --display-k: 1;
  --glow-k: 1;
}
html[data-preset="strict"] {
  --show-grid: none;
  --show-electrons: none;
  --display-k: 0.86;
  --glow-k: 0;
}
html[data-preset="expressive"] {
  --show-art: block;
  --display-k: 1.08;
}
html[data-preset="strict"] .kz,
html[data-preset="strict"] .kz-fl,
html[data-preset="strict"] .kz-dk,
html[data-preset="strict"] .kz-lt {
  --glow: 0 0 0 0 transparent;
  --glow-press: 0 0 0 0 transparent;
  --card-sheen: none;
  --card-hover: none;
  --grad: linear-gradient(var(--pop), var(--pop));
}

/* ── Base ──────────────────────────────────────────────────────────────── */

html { background: #120727; -webkit-text-size-adjust: 100%; }
html[data-theme="light"] { background: #fefdff; }
.kz *, .kz *::before, .kz *::after { box-sizing: border-box; }
body.kz {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-synthesis: none;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  background: var(--ground);
  color: var(--ink);
  overflow-x: clip;
}
.kz :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  text-wrap: balance;
}
.kz :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
.kz :where(ul, ol) { padding: 0; list-style: none; }
.kz :where(a) { color: inherit; text-decoration: none; }
.kz :where(img, svg, video) { display: block; max-width: 100%; }
.kz :where(button, input, select, textarea) { font: inherit; color: inherit; }
.kz :where(a, button, summary, input, textarea, select, label, details) {
  transition:
    color var(--t-fade) var(--ease-fade),
    background-color var(--t-fade) var(--ease-fade),
    border-color var(--t-fade) var(--ease-fade),
    box-shadow var(--t-fade) var(--ease-fade),
    opacity var(--t-fade) var(--ease-fade),
    outline-color var(--t-fade) var(--ease-fade),
    text-decoration-color var(--t-fade) var(--ease-fade),
    transform var(--t) var(--spring),
    translate var(--t) var(--spring),
    scale var(--t) var(--spring);
}
.kz ::selection { background: var(--f-secondary); color: var(--f-black); }
.kz :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.kz-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.7rem 1rem; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-ink); font-weight: 600;
}
.kz-skip:focus { top: 1rem; }
.kz-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Bands, shell, grid lines, electrons ──────────────────────────────── */

.kz-band {
  position: relative;
  isolation: isolate;
  background-color: var(--ground);
  color: var(--ink);
  padding-block: var(--band-y);
}
.kz-band.kz-alt { background-color: var(--ground-alt); }
.kz-shell { width: var(--shell); margin-inline: auto; position: relative; z-index: 1; }
.kz-prose { max-width: 65ch; }

.kz-lines {
  display: var(--show-grid);
  position: absolute; inset: -3px 0 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.kz-hline, .kz-vline { position: absolute; overflow: hidden; }
.kz-hline {
  left: 0; right: 0; top: 0; height: 7px;
  background: linear-gradient(var(--line), var(--line)) 0 3px / 100% 1px no-repeat;
}
.kz-vline {
  top: 3px; bottom: 0; width: 7px;
  background: linear-gradient(var(--line), var(--line)) 3px 0 / 1px 100% no-repeat;
}
.kz-vl { left: calc(50% - var(--frame) / 2 - 3px); }
.kz-vr { left: calc(50% + var(--frame) / 2 - 4px); }
.kz-plus {
  position: absolute; top: -2px; width: 11px; height: 11px;
  background:
    linear-gradient(var(--plus), var(--plus)) 5px 0 / 1px 11px no-repeat,
    linear-gradient(var(--plus), var(--plus)) 0 5px / 11px 1px no-repeat;
}
.kz-plusL { left: calc(50% - var(--frame) / 2 - 5px); }
.kz-plusR { left: calc(50% + var(--frame) / 2 - 6px); }
.kz-pulseV, .kz-pulseH { position: absolute; inset: 0; display: none; opacity: 0; will-change: transform; }
.kz-pulseV {
  background: linear-gradient(90deg, transparent 0, var(--pulse-glow) 2.5px, var(--pulse-core) 3px, var(--pulse-core) 4px, var(--pulse-glow) 4.5px, transparent 7px);
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(100% - 220px), #000 calc(100% - 10px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent calc(100% - 220px), #000 calc(100% - 10px), transparent 100%);
}
.kz-pulseH {
  background: linear-gradient(180deg, transparent 0, var(--pulse-glow) 2.5px, var(--pulse-core) 3px, var(--pulse-core) 4px, var(--pulse-glow) 4.5px, transparent 7px);
  -webkit-mask-image: linear-gradient(to right, transparent calc(100% - 260px), #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(to right, transparent calc(100% - 260px), #000 calc(100% - 12px), transparent 100%);
}
html[data-motion="full"] .kz-pulseV { display: var(--show-electrons); opacity: 1; transform: translateY(-100%); animation: kz-runV var(--dur, 17s) var(--delay, 0s) infinite; }
html[data-motion="full"] .kz-pulseH { display: var(--show-electrons); opacity: 1; transform: translateX(-100%); animation: kz-runH var(--dur, 19s) var(--delay, 0s) infinite; }
@keyframes kz-runV {
  0% { transform: translateY(-100%); animation-timing-function: cubic-bezier(0.4, 0.05, 0.6, 0.95); }
  36%, 100% { transform: translateY(calc(0% + 230px)); }
}
@keyframes kz-runH {
  0% { transform: translateX(-100%); animation-timing-function: cubic-bezier(0.4, 0.05, 0.6, 0.95); }
  30%, 100% { transform: translateX(calc(0% + 270px)); }
}
@media (max-width: 47.99rem) { .kz-vline, .kz-plus { display: none; } }

/* Expressive art layers: hero facets and footer orbits from VRTKX */
.kz-art {
  display: var(--show-art);
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("bg/hero-facets-dark.svg") center / cover no-repeat;
  opacity: 0.55;
}
html[data-theme="light"] .kz-fl .kz-art { background-image: url("bg/hero-facets-light.svg"); }
.kz-art--orbits { background: url("bg/footer-orbits.svg") right bottom / min(60rem, 100%) auto no-repeat; opacity: 0.7; }

/* ── Type roles ────────────────────────────────────────────────────────── */

.kz-sechead {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1.75rem;
  font-size: 1rem; font-weight: 500; line-height: 1.3;
  color: var(--ink-dim);
}
.kz-sechead::before {
  content: ""; flex: none; width: 13px; height: 13px;
  border-radius: var(--r-chip); background: var(--accent);
}
.kz-sechead b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.kz-sechead i { font-style: normal; color: var(--ink-mute); opacity: 0.6; }
.kz-h1 {
  font-size: calc(var(--fs-hero) * var(--display-k));
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 14ch;
}
.kz-h2 {
  font-size: calc(var(--fs-h2) * var(--display-k));
  line-height: 1.03;
  letter-spacing: -0.026em;
  max-width: 19ch;
}
.kz-h2-sm {
  font-size: calc(var(--fs-h2-sm) * var(--display-k));
  line-height: 1.08;
  letter-spacing: -0.022em;
  max-width: 17ch;
}
.kz-h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.015em; }
.kz-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-dim); max-width: 56ch; text-wrap: pretty; }
.kz-body { color: var(--ink-dim); max-width: 60ch; text-wrap: pretty; }
.kz-small { font-size: var(--fs-sm); color: var(--ink-mute); }
.kz-code { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--pop); }
.kz-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kz-tint { color: var(--pop); }
.kz-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Buttons · Kav's Framer Primary Button ────────────────────────────────
   Markup (kz.js builds the inner spans if you only write the label):
   <a class="kz-btn" href="…">Get my free demo</a>                          */

.kz-btn {
  --h: 54px; --disc: 44px; --inset: 5px;
  --btn-ring: 0 0 0 0 rgb(0 0 0 / 0);
  --btn-fill: var(--accent);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 16px;
  height: var(--h);
  padding: var(--inset) 24px var(--inset) var(--inset);
  border: 0; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-ink);
  font-family: var(--body); font-size: 1rem; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.2;
  white-space: nowrap; cursor: pointer; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--btn-ring);
  transition:
    box-shadow var(--t-fade) var(--ease-fade),
    outline-color var(--t-fade) var(--ease-fade),
    transform var(--t-btn) var(--spring-btn) !important;
}
.kz-btn__bg {
  position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill);
  clip-path: inset(var(--inset) calc(100% - var(--inset) - var(--disc)) var(--inset) var(--inset) round 999px);
  transition: clip-path var(--t-btn) var(--spring-btn);
}
.kz-btn__disc { display: grid; place-items: center; flex: none; width: var(--disc); height: var(--disc); color: var(--on-accent); }
.kz-btn__arrows { display: flex; width: 18px; height: 18px; overflow: hidden; }
.kz-btn__arrows svg { flex: none; width: 18px; height: 18px; transform: translateX(-100%); transition: transform var(--t-btn) var(--spring-btn); }
.kz-btn__label { display: block; height: 1.2em; overflow: hidden; }
.kz-btn__label > span { display: block; transition: transform var(--t-btn) var(--spring-btn); }
.kz-btn__label > span:last-child { color: var(--on-accent); }
@media (hover: hover) {
  .kz-btn:hover .kz-btn__bg { clip-path: inset(0 0 0 0 round 999px); }
  .kz-btn:hover .kz-btn__arrows svg { transform: translateX(0); }
  .kz-btn:hover .kz-btn__label > span { transform: translateY(-100%); }
  .kz-btn:hover { box-shadow: var(--btn-ring), var(--glow); }
}
.kz-btn:focus-visible .kz-btn__bg { clip-path: inset(0 0 0 0 round 999px); }
.kz-btn:focus-visible .kz-btn__arrows svg { transform: translateX(0); }
.kz-btn:focus-visible .kz-btn__label > span { transform: translateY(-100%); }
.kz-btn:focus-visible { box-shadow: var(--btn-ring), var(--glow); }
.kz-btn:active { transform: scale(0.98); box-shadow: var(--btn-ring), var(--glow-press); }
/* Calm: nothing sweeps or rolls. The fill arrives as a fade, the label
   changes colour in place. Same end state as full motion. */
html:not([data-motion="full"]) .kz-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill); opacity: 0;
  transition: opacity var(--t-fade) var(--ease-fade);
}
html:not([data-motion="full"]) .kz-btn:is(:hover, :focus-visible)::before { opacity: 1; }
html:not([data-motion="full"]) .kz-btn:is(:hover, :focus-visible) .kz-btn__bg { clip-path: inset(var(--inset) calc(100% - var(--inset) - var(--disc)) var(--inset) var(--inset) round 999px); }
html:not([data-motion="full"]) .kz-btn:is(:hover, :focus-visible) .kz-btn__label > span { transform: none; }
html:not([data-motion="full"]) .kz-btn__label > span:first-child { transition: color var(--t-fade) var(--ease-fade); }
html:not([data-motion="full"]) .kz-btn:is(:hover, :focus-visible) .kz-btn__label > span:first-child { color: var(--on-accent); }
html:not([data-motion="full"]) .kz-btn--accent:is(:hover, :focus-visible) .kz-btn__label > span:first-child { color: var(--accent); }

.kz-btn--lg { --h: 62px; --disc: 52px; font-size: 1.0625rem; padding-right: 28px; }
.kz-btn--ghost { --btn-ring: inset 0 0 0 1px var(--edge-strong); background: transparent; color: var(--ink); }
.kz-btn--accent { --btn-ring: inset 0 0 0 2px var(--accent); background: var(--accent); color: var(--on-accent); }
.kz-btn--accent { --btn-fill: var(--f-seasalt); }
.kz-btn--accent .kz-btn__disc,
.kz-btn--accent .kz-btn__label > span:last-child { color: var(--accent); }
.kz-btn--compact { --h: 46px; --disc: 36px; gap: 10px; padding-right: 18px; font-size: 0.875rem; }
.kz-btn--compact .kz-btn__arrows, .kz-btn--compact .kz-btn__arrows svg { width: 15px; height: 15px; }
/* WhatsApp: same button, the disc carries the WhatsApp glyph instead of arrows */
.kz-btn--wa { --btn-fill: #1f9e55; }
.kz-btn--icon { padding-right: var(--inset); gap: 0; }
.kz-btn--block { width: 100%; justify-content: flex-start; }

.kz-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.25rem; }
.kz-link {
  font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--edge-strong); text-underline-offset: 5px;
  background: none; border: 0; padding: 0.5rem 0.25rem; cursor: pointer;
}
.kz-link:hover { color: var(--pop); text-decoration-color: var(--pop); }

/* ── Cards ───────────────────────────────────────────────────────────── */

.kz-grid { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .kz-grid--2, .kz-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .kz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kz-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  border-radius: var(--r-card);
  background-color: var(--raised);
  background-image: var(--card-sheen);
  color: var(--ink);
  box-shadow: var(--card-ring), var(--card-drop);
  overflow: hidden;
  transition: translate var(--t-glide) var(--glide);
}
.kz-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--card-hover); opacity: 0;
  transition: opacity var(--t-fade) var(--ease-fade);
}
@media (hover: hover) {
  .kz-card:hover { translate: 0 -4px; }
  .kz-card:hover::before { opacity: 1; }
}
.kz-card__n { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--pop); }
.kz-card__t { font-family: var(--display); font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.015em; }
.kz-card__b { color: var(--ink-dim); line-height: 1.55; text-wrap: pretty; }
.kz-card__foot { margin-top: auto; padding-top: 0.85rem; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-mute); }

/* Price card (offer). The bob is a loop, so full motion + expressive only. */
.kz-price { gap: 1rem; }
.kz-price__amt { font-family: var(--display); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; }
.kz-price__amt small { font-family: var(--body); font-size: 1rem; color: var(--ink-mute); letter-spacing: 0; }
.kz-price__list { display: grid; gap: 0.45rem; color: var(--ink-dim); }
.kz-price__list li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.55rem; }
.kz-price__list li::before { content: ""; width: 0.55rem; height: 0.55rem; margin-top: 0.5em; border-radius: 2px; background: var(--pop); }
.kz-badge {
  align-self: flex-start;
  padding: 0.3rem 0.7rem; border-radius: var(--r-pill);
  background: var(--wash); box-shadow: inset 0 0 0 1px var(--edge-strong);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink);
}
html[data-motion="full"][data-preset="expressive"] .kz-price--feature { animation: kz-bob 6s ease-in-out infinite; }
@keyframes kz-bob { 50% { translate: 0 -6px; } }

/* ── Work frame · proof of work on the page ──────────────────────────────
   Framer's Work Card: browser frame + phone overlap, story list beside it. */

.kz-case { display: grid; gap: 2.25rem; align-items: center; }
@media (min-width: 60rem) { .kz-case { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 5vw, 5rem); } }
@media (max-width: 59.99rem) { .kz-case .kz-visual { order: -1; } }
.kz-case__id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.85rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink-dim); }
.kz-case__id .kz-tilde { color: var(--ink-mute); }
.kz-case__name { margin-top: 0.85rem; font-family: var(--display); font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem); line-height: 1.02; letter-spacing: -0.025em; }
.kz-story { margin-top: 1.6rem; display: grid; gap: 1.1rem; }
.kz-story div { display: grid; gap: 0.25rem; }
@media (min-width: 40rem) { .kz-story div { grid-template-columns: 8.25rem minmax(0, 1fr); gap: 1rem; } }
.kz-story dt { font-size: 0.9375rem; font-weight: 600; color: var(--pop); line-height: 1.55; }
.kz-story dd { color: var(--ink-dim); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
.kz-story div:last-child dd { color: var(--ink); font-weight: 500; }

.kz-visual { position: relative; padding-bottom: 2.5rem; padding-right: clamp(2rem, 6vw, 4.5rem); }
.kz-frame {
  display: block; padding: 10px; border-radius: var(--r-card);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--edge), 0 0 4px rgb(0 0 0 / 0.05);
  transition: background-color var(--t-fade) var(--ease-fade), translate var(--t-glide) var(--glide) !important;
}
.kz-frame__bar { display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px 8px; }
.kz-frame__bar i { width: 8px; height: 8px; border-radius: 999px; background: var(--edge-strong); }
.kz-window { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-inner); background: var(--sunk); }
.kz-window img { width: 100%; height: auto; transition: transform var(--t-peek) cubic-bezier(0.65, 0, 0.35, 1); }
.kz-phone {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: clamp(7.5rem, 5rem + 7vw, 10.5rem); aspect-ratio: 9 / 19.5;
  padding: 5px; border-radius: 26px; background: #0b0418; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(247 247 248 / 0.12), 0 20px 40px -14px rgb(18 7 39 / 0.45);
  transition: translate var(--t-glide) var(--glide);
}
.kz-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 21px; }
.kz-visual:hover .kz-frame { background: var(--f-secondary); translate: 0 -4px; }
.kz-visual:hover .kz-phone { translate: 0 -10px; }
.kz-visual:hover .kz-window img { transform: translateY(var(--peek, 0%)); }

/* ── Nav · full-width docked, a pill once you scroll ─────────────────── */

.kz-nav { position: fixed; inset: 0 0 auto; z-index: 60; pointer-events: none; transition: padding var(--t) var(--spring); }
.kz-nav[data-stuck] { padding: 12px calc((100% - var(--frame)) / 2) 0; }
.kz-nav__in {
  pointer-events: auto; width: 100%; height: 4.25rem;
  display: flex; align-items: center; gap: 0.9rem; padding: 0 7px 0 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--ground) 84%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 -1px 0 var(--edge);
  transition:
    box-shadow var(--t-fade) var(--ease-fade),
    background-color var(--t-fade) var(--ease-fade),
    height var(--t) var(--spring),
    border-radius var(--t) var(--spring) !important;
}
.kz-nav[data-stuck] .kz-nav__in {
  height: 3.75rem; border-radius: var(--r-pill); padding-inline: 7px;
  box-shadow: inset 0 0 0 1px var(--edge), 0 14px 34px -14px rgb(119 71 247 / 0.55);
}
@media (min-width: 64rem) { .kz-nav__in { padding-left: 18px; } .kz-nav[data-stuck] .kz-nav__in { padding-left: 12px; } }
.kz-brand { display: inline-flex; align-items: center; gap: 0.6rem; margin-right: auto; border-radius: var(--r-pill); min-height: 44px; }
.kz-brand img { width: 2.25rem; height: 2.25rem; border-radius: 999px; }
.kz-brand span { font-family: var(--display); font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1; }
.kz-nav__links { display: none; gap: 0.3rem; font-size: 0.9375rem; font-weight: 500; }
.kz-nav__links a { padding: 0.5rem 0.8rem; border-radius: var(--r-pill); color: var(--ink-dim); }
.kz-nav__links a:hover, .kz-nav__links a[aria-current] { color: var(--ink); background: var(--wash); }
@media (min-width: 64rem) { .kz-nav__links { display: flex; } }
.kz-menu-btn {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 999px; background: var(--wash); cursor: pointer;
}
.kz-menu-btn svg { width: 20px; height: 20px; }
@media (min-width: 64rem) { .kz-menu-btn { display: none; } }
.kz-sheet {
  position: fixed; inset: 5rem 0.75rem auto; z-index: 59;
  display: grid; gap: 0.25rem; padding: 0.75rem;
  border-radius: var(--r-card); background: var(--pop-bg); box-shadow: var(--pop-shadow);
}
.kz-sheet[hidden] { display: none; }
.kz-sheet a { padding: 0.85rem 1rem; border-radius: 12px; font-size: 1.0625rem; font-weight: 500; }
.kz-sheet a:hover { background: var(--wash); }
@media (min-width: 64rem) { .kz-sheet { display: none !important; } }

/* Theme toggle · Framer toggle, 58×30, accent grows from the knob */
.kz-toggle {
  position: relative; flex: none; width: 58px; height: 30px; padding: 0;
  border: 0; border-radius: 30px; cursor: pointer;
  background: rgb(247 247 248 / 0.14); box-shadow: inset 0 0 4px rgb(0 0 0 / 0.25);
}
.kz-toggle::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--f-accent); clip-path: circle(0px at 15px 15px);
  transition: clip-path var(--t-btn) var(--spring-btn), opacity var(--t-fade) var(--ease-fade);
}
.kz-toggle::after { content: ""; position: absolute; inset: -7px -2px; }
.kz-toggle__ball {
  position: absolute; left: 2px; top: 2px; width: 26px; height: 26px; border-radius: 40px;
  background: var(--f-seasalt); box-shadow: 0 0 4px rgb(0 0 0 / 0.15);
  transition: translate var(--t-btn) var(--spring-btn);
}
.kz-toggle__icon { position: absolute; top: 7px; width: 16px; height: 16px; color: var(--f-black); z-index: 1; transition: opacity var(--t-fade) var(--ease-fade); }
.kz-toggle__icon svg { width: 16px; height: 16px; }
.kz-toggle__icon:first-of-type { left: 7px; }
.kz-toggle__icon:last-of-type { left: 35px; opacity: 0; }
html[data-theme="light"] .kz-toggle { box-shadow: inset 0 0 4px rgb(0 0 0 / 0.05); background: rgb(18 7 39 / 0.1); }
html[data-theme="light"] .kz-toggle::before { clip-path: circle(48px at 43px 15px); }
html[data-theme="light"] .kz-toggle__ball { translate: 28px 0; }
html[data-theme="light"] .kz-toggle__icon:first-of-type { opacity: 0; }
html[data-theme="light"] .kz-toggle__icon:last-of-type { opacity: 1; }
html:not([data-motion="full"]) .kz-toggle::before { clip-path: none; opacity: 0; }
html:not([data-motion="full"])[data-theme="light"] .kz-toggle::before { opacity: 1; }

/* ── Footer + KAZUVA credit ──────────────────────────────────────────── */

.kz-footer { position: relative; isolation: isolate; padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) 2rem; background: var(--ground); color: var(--ink); overflow: hidden; }
.kz-footer__top { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .kz-footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.kz-footer h2 { font-size: var(--fs-h2-sm); line-height: 1.05; letter-spacing: -0.022em; max-width: 14ch; }
.kz-footer__col { display: grid; gap: 0.35rem; align-content: start; }
.kz-footer__col p { font-size: var(--fs-sm); color: var(--ink-mute); margin-bottom: 0.35rem; }
.kz-footer__col a { color: var(--ink-dim); padding-block: 0.35rem; }
.kz-footer__col a:hover { color: var(--ink); }
.kz-footer__base {
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: var(--fs-sm); color: var(--ink-mute);
}

/* The credit every demo and client site carries (Kav, 7 Nov: logo visible,
   links home). Self-contained colours so it reads on any client palette:
   .kz-credit--dark on light pages, .kz-credit--light on dark pages. */
.kz-credit {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.3rem 0.85rem 0.3rem 0.3rem;
  border-radius: 999px;
  font: 500 0.8125rem/1 var(--body, system-ui, sans-serif);
  letter-spacing: 0.01em; text-decoration: none;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.kz-credit img { width: 30px; height: 30px; border-radius: 999px; flex: none; }
.kz-credit b { font-weight: 700; letter-spacing: 0.08em; }
.kz-credit--dark { background: #120727; color: #f7f7f8; box-shadow: inset 0 0 0 1px rgb(247 247 248 / 0.14); }
.kz-credit--dark:hover { box-shadow: inset 0 0 0 1px #8e77ff, 0 0 18px rgb(119 71 247 / 0.45); }
.kz-credit--light { background: #f7f7f8; color: #120727; box-shadow: inset 0 0 0 1px rgb(18 7 39 / 0.12); }
.kz-credit--light:hover { box-shadow: inset 0 0 0 1px #7747f7, 0 6px 20px rgb(119 71 247 / 0.3); }

/* ── Floating controls · gear motion switch (bottom right) and (i) notice
   (bottom left). DEMO-UI-RULES 1-3: 44px targets, Esc and outside tap close,
   aria-expanded. Colours from the page tokens.                            */

.kz-fab {
  position: fixed; bottom: 12px; z-index: 90;
  font-family: var(--body);
}
.kz-fab--r { right: 12px; }
.kz-fab--l { left: 12px; }
.kz-fab__btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--edge-strong); border-radius: 50%;
  background: var(--pop-bg); color: var(--ink); cursor: pointer;
  box-shadow: 0 6px 18px rgb(18 7 39 / 0.28);
}
.kz-fab__btn:hover, .kz-fab__btn[aria-expanded="true"] { border-color: var(--accent); color: var(--pop); }
.kz-fab__btn svg { width: 22px; height: 22px; }
.kz-fab__i { font: italic 700 20px/1 var(--display); }
html[data-motion="full"] .kz-fab__btn[aria-expanded="true"] svg { rotate: 60deg; transition: rotate var(--t) var(--spring); }
.kz-pop {
  position: absolute; bottom: 54px;
  width: min(17rem, calc(100vw - 24px)); padding: 0.9rem;
  border-radius: var(--r-pop); background: var(--pop-bg); color: var(--ink);
  box-shadow: var(--pop-shadow);
}
.kz-fab--r .kz-pop { right: 0; width: 12.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.kz-fab--l .kz-pop { left: 0; }
.kz-pop[hidden] { display: none !important; }
.kz-pop__label { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.kz-pop [data-m] {
  min-height: 44px; border-radius: var(--r-pill); cursor: pointer;
  border: 1.5px solid var(--edge-strong); background: transparent; color: var(--ink);
  font-size: 0.875rem; font-weight: 700;
}
.kz-pop [data-m][aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.kz-pop p { font-size: 0.875rem; line-height: 1.45; color: var(--ink-dim); }
.kz-pop p + p, .kz-pop p + a, .kz-pop p + .kz-ba { margin-top: 0.6rem; }
.kz-pop a { display: inline-block; min-height: 32px; line-height: 32px; color: var(--pop); text-decoration: underline; text-underline-offset: 4px; }
.kz-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #4ade80; }

/* ── Before / after toggle · audit and fix pages ─────────────────────── */

.kz-ba {
  display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px;
  border-radius: var(--r-pill); background: var(--wash); box-shadow: inset 0 0 0 1px var(--edge);
}
.kz-ba button {
  min-height: 40px; padding: 0 1rem; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-dim); font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.kz-ba button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-ink); }
[data-ba="before"] .kz-after, [data-ba="after"] .kz-before { display: none; }

/* ── Form fields · waitlist, audit start, contact ────────────────────── */

.kz-form { display: grid; gap: 1rem; max-width: 34rem; }
.kz-field { display: grid; gap: 0.4rem; }
.kz-field label, .kz-field legend { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.kz-field small { font-size: var(--fs-xs); color: var(--ink-mute); }
.kz-input {
  width: 100%; min-height: 52px; padding: 0.8rem 1.1rem;
  border: 0; border-radius: 14px;
  background: var(--sunk); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--edge-strong);
  font-size: 1rem;
}
.kz-input::placeholder { color: var(--ink-mute); }
.kz-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent), var(--glow); }
textarea.kz-input { min-height: 8rem; resize: vertical; }
.kz-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; padding: 0; margin: 0; }
.kz-chip { position: relative; }
.kz-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.kz-chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--edge-strong);
  color: var(--ink-dim); font-weight: 500;
  transition: background-color var(--t-fade) var(--ease-fade), color var(--t-fade) var(--ease-fade);
}
.kz-chip input:checked + span { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.kz-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ── Reveal on scroll · once, never on scroll-back; full motion only ── */

html[data-motion="full"] .kz-rv { opacity: 0; translate: 0 18px; transition: opacity 0.6s var(--ease-fade), translate var(--t-reveal) var(--glide); }
html[data-motion="full"] .kz-rv.is-in { opacity: 1; translate: 0 0; }