/* Hero, video variant (research 58). Screen 1: the frost is in the video itself; HTML on top: headline + the circle.
   Screen 2 opens as a circle growing from the button: code letters assemble Kaia's head. */
html, body { margin: 0; height: 100%; background: var(--paper); }
body { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; }
html, body { overflow-x: clip; }   /* nothing that flies or tilts may widen the page on phones */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate;
  /* one fluid unit for the hero (owner 14.10: elements adapt to the screen, not wider margins):
     1px at 1440 wide, scales with the viewport, from 0.82px (≈1180) up to 1.6px (≈2300+) */
  --k: clamp(0.82px, calc(100vw / 1440), 1.6px); --gutter: calc(56 * var(--k)); }
.s1, .s2 { position: absolute; inset: 0; }

/* screen 1 */
.s1 { background: radial-gradient(120% 90% at 100% 0%, #f6e9e2, transparent 60%), linear-gradient(180deg, #edf1f7, #e2ecf7); }   /* matches the video's own frosted background */
.s1__video { position: absolute; left: -2%; top: -2%; width: 104%; height: 104%; object-fit: fill; will-change: transform;
  /* the video is moved so the finger meets the circle; its edges fade out so a moved frame never shows a hard border */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect; }
/* no layout shift (CLS, check 20.10): the video and the button are drawn only once the script has placed them */
.s1__video:not(.is-placed) { visibility: hidden !important; }   /* !important: GSAP's autoAlpha writes an inline visibility */
.s1:not(.is-placed) .cta, .s1:not(.is-placed) .cta-waves { visibility: hidden; }
/* extra frost over the video: the body stays a silhouette (its design does not have to match Kaia's head on screen 2);
   only the spot where the fingertip meets the glass stays clear */
.s1__code { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; filter: blur(2px); }   /* code just behind the glass: soft, but readable as letters */
.s1__frost { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(244, 246, 250, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%);
  -webkit-mask-image: radial-gradient(circle at var(--kx, 70%) var(--ky, 40%), transparent 0 38px, #000 120px);
  mask-image: radial-gradient(circle at var(--kx, 70%) var(--ky, 40%), transparent 0 38px, #000 120px); }
.s1::after { content: ""; position: absolute; inset: 0; pointer-events: none;   /* keeps the headline side calm and readable */
  background: linear-gradient(90deg, rgba(246, 245, 250, 0.72) 0%, rgba(246, 245, 250, 0.35) 38%, transparent 58%); }
.s1__knock { position: absolute; z-index: 2; left: var(--kx, 70%); top: var(--ky, 50%); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 0 18px rgba(255, 255, 255, 0.8); }

.top { position: absolute; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: max(calc(20 * var(--k)), env(safe-area-inset-top)) var(--gutter) 0; }
.top img { height: calc(28 * var(--k)); width: auto; }
.top__menu { width: calc(48 * var(--k)); height: calc(48 * var(--k)); border: 0; border-radius: 50%; display: grid; place-content: center; grid-auto-flow: column; gap: 4px; cursor: pointer;
  background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: var(--blur-1); backdrop-filter: var(--blur-1);
  box-shadow: inset 0 0 4px 1px rgba(255, 255, 255, 0.9), 0 6px 16px -8px rgba(var(--shade), 0.35); }
.top__menu span { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }

.copy { position: absolute; z-index: 10; left: var(--edge-vw); top: 0; bottom: 0; width: min(calc(620 * var(--k)), calc(62vw - var(--edge-vw))); display: flex;   /* never into the right half (the button) */ flex-direction: column; justify-content: center; pointer-events: none; }
.copy__eyebrow { margin: 0 0 calc(18 * var(--k)); font-size: calc(13 * var(--k)); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.copy__h1 { margin: 0; font-size: calc(76 * var(--k)); font-weight: 400; line-height: 1.02; letter-spacing: -0.035em; }
.copy__sub { max-width: 36ch; margin: calc(28 * var(--k)) 0 0; font-size: calc(17 * var(--k)); line-height: 1.45; color: var(--text-2); }

/* the button (research 59): one pill = a familiar button shape. Left: the warm brand circle with a mic (the robot's
   finger presses it). Right: the action text and an arrow. Placed by JS: --bx/--by = centre of the whole button. */
.cta { --dot: calc(60 * var(--k)); position: absolute; z-index: 10; left: var(--bx, 75%); top: var(--by, 50%);   /* centred by GSAP xPercent/yPercent (GSAP also moves it) */
  display: inline-flex; align-items: center; gap: calc(14 * var(--k)); height: calc(76 * var(--k)); padding: calc(8 * var(--k)) calc(24 * var(--k)) calc(8 * var(--k)) calc(8 * var(--k)); border: 0; border-radius: 999px; overflow: hidden;
  font: 600 calc(18 * var(--k))/1 var(--font); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; will-change: transform; }
.cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
/* shape A · ink: the main button of the design system */
.cta[data-shape="ink"] { color: #fff; background: radial-gradient(120% 160% at 30% 0%, #4a4a52, #212121 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 18px 40px -16px rgba(0, 0, 0, 0.55); }
/* shape B · glass: Liquid Glass in the tone of the frosted pane */
.cta[data-shape="glass"] { color: var(--ink); background: linear-gradient(140deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.52));
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 0 6px 1px rgba(255, 255, 255, 0.95), inset 0 -3px 8px -4px rgba(var(--shade), 0.28), 0 18px 40px -16px rgba(var(--shade), 0.5); }
.cta__dot { position: relative; flex: none; width: var(--dot); height: var(--dot); border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 3px rgba(var(--warm-rgb), 0.18), 0 6px 16px -6px rgba(var(--warm-rgb), 0.8); }
.cta__dot canvas { grid-area: 1 / 1; width: 100%; height: 100%; }
.cta[data-dot="flat"] .cta__dot { background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); }
.cta[data-dot="flat"] .cta__dot canvas { display: none; }
.cta[data-dot="plasma"] .cta__dot::after { content: ""; grid-area: 1 / 1; width: 100%; height: 100%;   /* calm the bright centre under the mic */
  background: radial-gradient(circle, rgba(110, 32, 0, 0.5) 0, rgba(110, 32, 0, 0.2) 30%, transparent 55%); }
.cta__mic { grid-area: 1 / 1; z-index: 1; width: 46%; height: 46%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(80, 20, 0, 0.6)); }
.cta__arrow { width: calc(20 * var(--k)); height: calc(20 * var(--k)); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-left: -4px; }
/* a light sheen sweeps across once (on the first knock of a cycle and on hover) — a finite attention cue */
.cta__sheen { position: absolute; inset: 0; pointer-events: none; visibility: hidden;   /* position only via GSAP xPercent (set in JS) */
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); }
.cta[data-shape="glass"] .cta__sheen { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.95) 50%, transparent 70%); }
/* soft waves under the button (owner 14.10): pill-shaped rings drift out slowly and fade */
.cta-waves { position: absolute; z-index: 9; left: var(--bx, 75%); top: var(--by, 50%); width: var(--bw, 290px); height: var(--bh, 76px); pointer-events: none; }   /* centred by GSAP, moves with the button */
.cta-waves i { position: absolute; inset: 0; border-radius: 999px; opacity: 0;   /* smooth filled waves, no outline (owner 14.10) */
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25) 60%, rgba(var(--warm-rgb), 0.06) 85%, transparent);
  filter: blur(6px);
  animation: cta-wave 5.4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite; }
.cta-waves i:nth-child(2) { animation-delay: 1.8s; }
.cta-waves i:nth-child(3) { animation-delay: 3.6s; }
@keyframes cta-wave { 0% { opacity: 0; transform: scale(0.95, 0.9); } 20% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.35, 2.1); } }
@media (prefers-reduced-motion: reduce) { .cta-waves i { animation: none; } }
/* one impulse from the circle on every knock (drawn outside the pill, so it is a separate element) */
.cta-ring { position: absolute; z-index: 9; left: var(--ox); top: var(--oy); width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px rgba(var(--warm-rgb), 0.75), 0 0 22px rgba(var(--warm-rgb), 0.5); }

/* screen 2 */
.s1 { z-index: 2; }
/* screen 2 lies under screen 1: on press the glass of screen 1 dissolves (noise mask) and the head from code shows through */
.s2 { z-index: 1; background: var(--foehn); }
.s2__rain, .s2__head { position: absolute; inset: 0; width: 100%; height: 100%; }
.s2__face { position: absolute; opacity: 0; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.s2__cta { position: absolute; z-index: 10; left: 0; right: 0; bottom: clamp(28px, 8vh, 80px); display: flex; justify-content: center; opacity: 0; }
.btn-start { height: calc(60 * var(--k)); min-height: 52px; padding: 0 calc(32 * var(--k)); border: 0; border-radius: 999px; font: 600 calc(18 * var(--k))/1 var(--font); color: var(--ink); cursor: pointer;   /* same white glass as the main button (owner 14.10) */
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.56)); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 0 6px 1px rgba(255, 255, 255, 0.95), inset 0 -3px 8px -4px rgba(var(--shade), 0.28), 0 18px 40px -16px rgba(var(--shade), 0.5); }
.btn-start:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* phone (portrait): robot and circle on top, headline at the bottom (owner 14.10) */
@media (max-aspect-ratio: 4/5) {
  .stage { --k: 1px; --gutter: 16px; }
  .cta { --dot: 56px; height: 70px; font-size: 17px; padding-right: 20px; }
  .copy { width: auto; right: 16px; justify-content: flex-end; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  /* the eyebrow sits at the top, under the logo (owner 14.10); headline and subheading stay at the bottom */
  .copy__eyebrow { position: absolute; left: 0; right: 0; top: calc(max(14px, env(safe-area-inset-top)) + 58px); margin: 0; font-size: 12px; }
  .copy__h1 { font-size: clamp(32px, 9.4vw, 46px); }
  /* the subheading stays on the phone (owner 14.10): with the slogan as H1 it is the line that says what we do */
  .copy__sub { display: block; max-width: 40ch; margin-top: 14px; font-size: 15px; line-height: 1.45; }
  .s1::after { background: linear-gradient(0deg, rgba(246, 245, 250, 0.94) 0%, rgba(246, 245, 250, 0.7) 32%, transparent 56%); }
}



/* ---------- K loader (research 60): the same frosted glass as the hero; the glass stays, only the mark leaves ---------- */
.stage.is-loading .copy, .stage.is-loading .top, .stage.is-loading .cta, .stage.is-loading .cta-waves, .stage.is-loading .s1__code, .stage.is-loading .kbubble { visibility: hidden; }
.kl { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; align-content: center; gap: calc(28 * var(--k)); pointer-events: none; }
.kl__glass { position: absolute; inset: 0; background: var(--foehn); }
.kl__glass::after { content: ""; position: absolute; inset: 0; opacity: 0.22; mix-blend-mode: overlay;
  background-image: 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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* the full logo (K + laumo): large on desktop, almost the full width on the phone (owner 14.10) */
.kl__mark { position: relative; width: min(88vw, calc(780 * var(--k))); aspect-ratio: 398 / 108; }
.kl__svg { width: 100%; height: 100%; overflow: visible; }
/* while loading: a large warm circle with the counter inside and a progress arc around it */
.kl__orb { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(170px, 34vmin, 340px); aspect-ratio: 1; display: grid; place-items: center; container-type: inline-size; }
.kl__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; rotate: -90deg; }
.kl__track, .kl__arc { fill: none; stroke-width: 1.6; }
.kl__track { stroke: rgba(var(--warm-rgb), 0.22); }
.kl__arc { stroke: var(--warm); stroke-linecap: round; }
.kl__comet { fill: var(--warm); }
.kl__core { width: 78%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--warm);
  box-shadow: 0 10px 30px -12px rgba(var(--warm-rgb), 0.7); }
.kl__num { font: 600 30cqw/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: #fff; }
.kl__fly { position: fixed; z-index: 40; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: 0 6px 16px -6px rgba(var(--warm-rgb), 0.8); }
.kl__raster { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Kaia's speech bubble above the button (research 59 §10); nothing under the button (owner 14.10) ----------
   The outer box is placed by JS from the button's real box; only the inner box is animated
   by GSAP (GSAP would absorb a CSS translate on the element it moves). */
.kbubble { position: absolute; z-index: 11; left: 55%; bottom: 60%;   /* placed by JS from the button's real box */
  width: min(calc(360 * var(--k)), calc(100vw - 32px)); min-width: min(280px, calc(100vw - 32px)); pointer-events: none; }
@media (max-aspect-ratio: 4/5) {
  .kbubble { width: auto; left: 16px; right: 16px; min-width: 0; }
  .kbubble__in { margin: 0 auto; max-width: 360px; padding: 12px 16px 13px; }
  .kbubble__hello, .kbubble__text { font-size: 15px; }
  }
/* very short phones (iPhone SE 1st gen, 320×568): everything slightly tighter so eyebrow, bubble, button, headline and
   subheading all fit — German texts are the longest (check 14.10) */
@media (max-aspect-ratio: 4/5) and (max-height: 620px) {
  .copy { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .copy__eyebrow { top: calc(max(14px, env(safe-area-inset-top)) + 52px); font-size: 11px; }
  .copy__h1 { font-size: 28px; }
  .copy__sub { margin-top: 8px; font-size: 13.5px; line-height: 1.4; }
  .cta { --dot: 50px; height: 60px; font-size: 16px; }
  .kbubble__in { padding: 10px 14px 11px; }
  .kbubble__hello, .kbubble__text { font-size: 13.5px; }
}
/* the slogan breaks into even lines (no single word left on the second line: "Less busywork, more / time") */
.copy__h1 { text-wrap: balance; }
.kbubble__text, .copy__sub { text-wrap: pretty; }

/* ---------- headline accents (owner 15.10, prototype: ?fx=none|marker|line|letters) ---------- */

/* ---------- bubble variants (prototype: ?bubble=light|warm|warmw|ink) ---------- */
.kbubble[data-bubble="warm"] .kbubble__in, .kbubble[data-bubble="warmw"] .kbubble__in {
  background: radial-gradient(circle at 30% 20%, #f39a66, var(--warm) 60%, #db6630); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 14px 30px -14px rgba(var(--warm-rgb), 0.8); }
.kbubble[data-bubble="warm"] .kbubble__in::after, .kbubble[data-bubble="warmw"] .kbubble__in::after { background: #e06d34; box-shadow: none; }
.kbubble[data-bubble="warmw"] .kbubble__hello, .kbubble[data-bubble="warmw"] .kbubble__text { color: #fff; }
.kbubble[data-bubble="warm"] .kbubble__caret, .kbubble[data-bubble="warmw"] .kbubble__caret { background: currentColor; }