/* Wracam: marketing site. The night façade of the app, lit in the fallback café colour.
   A page that arrives switched off and warms up sign by sign. */

@font-face {
  font-family: 'Comfortaa Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(../fonts/comfortaa-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Comfortaa Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(../fonts/comfortaa-latin-wght-normal.woff2) format('woff2-variations');
  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;
}

:root {
  /* Night façade, fallback café colour (#8a4b2a) through cafePalette() */
  --wall: #21120a;
  --wall-deep: #2e1d15;
  --wall-shade: #170c07;
  --black: #0b0402;
  --tube: #de9875;
  --core: #fef3ed;
  --glass: #423129;
  --glass-line: #806457;
  --glow: #de987599;
  --ink: #f4ede9;
  --ink-soft: #c0b5b0;
  --rule: #3a2e27;
  /* Wracam porcelain and ink */
  --porcelain: #faf8f5;
  --porcelain-deep: #f0ebe4;
  --p-ink: #2a1b12;
  --p-soft: #6b5a4e;
  --p-rule: #e4dcd2;
  --terracotta: #d36c45;
  --amber: #ffc86b;
  --enamel: #ffffff;
  --plate-caption: #2b2622;

  --font-sign: 'Comfortaa Variable', 'Comfortaa', system-ui, sans-serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --gutter: clamp(16px, 4.5vw, 56px);
  --max: 74rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sec-space: clamp(96px, 16vw, 200px);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font: 400 17px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
/* Plaster: a fixed grain over the wall */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .bar, .foot { position: relative; z-index: 1; }
main { overflow-x: clip; }

::selection { background: color-mix(in oklab, var(--tube) 38%, transparent); color: var(--core); }
:focus-visible { outline: 3px solid var(--tube); outline-offset: 3px; border-radius: 6px; }
input { caret-color: var(--tube); }
html { scrollbar-color: var(--glass-line) var(--wall-shade); }

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--porcelain); color: var(--p-ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- Top bar ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 14px;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
}
.bar-mark img { height: 32px; width: auto; }
.bar-nav { display: flex; align-items: center; gap: clamp(8px, 2vw, 18px); }
.bar-link { font-size: 15px; font-weight: 600; color: var(--ink-soft); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.bar-link:hover { color: var(--ink); text-decoration: underline; }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--wall-deep); }
.lang button { min-height: 38px; min-width: 44px; border: 0; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); }
.lang button[aria-pressed='true'] { background: var(--ink); color: var(--p-ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.4); }
.pill-call {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1.5px solid color-mix(in oklab, var(--ink) 30%, transparent);
  font-size: 15px; font-weight: 700; text-decoration: none; color: var(--ink);
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.pill-call:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); border-color: var(--ink); }
@media (max-width: 560px) {
  .bar-link { display: none; }
  .pill-call span { display: none; }
  .pill-call { padding: 0; width: 44px; justify-content: center; }
  .bar-mark img { height: 28px; }
}

/* ---------- Neon lettering ----------
   A lit letter is a white-hot core (the fill) inside a coloured tube (the stroke), with a tight halo.
   Unlit, the fill goes dark and the stroke is bare glass: still legible (3.4:1 on the wall). */
.neon {
  font-family: var(--font-sign);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--core);
  -webkit-text-stroke: 0.05em var(--tube);
  paint-order: normal;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.neon .w { display: inline-block; white-space: nowrap; }
.neon .l {
  display: inline-block;
  filter: drop-shadow(0 0 2px var(--glow)) drop-shadow(0 0 12px var(--glow));
}
.neon.ready .l { transition: color 60ms linear, -webkit-text-stroke-color 60ms linear; }

/* off: bare glass */
.js[data-power='off'] .neon .l,
.js .neon[data-neon]:not(.is-lit) .l {
  color: var(--glass);
  -webkit-text-stroke-color: var(--glass-line);
  filter: none;
}
/* ignition: each letter stutters on at its own moment, then holds */
.js[data-power='on'] .neon.is-lit.igniting .l { animation: ignite var(--dur, 900ms) steps(1, end) var(--d, 0ms) both; }
@keyframes ignite {
  0%   { color: var(--glass); -webkit-text-stroke-color: var(--glass-line); filter: none; }
  12%  { color: var(--core); -webkit-text-stroke-color: var(--tube); filter: drop-shadow(0 0 2px var(--glow)); }
  20%  { color: var(--glass); -webkit-text-stroke-color: var(--glass-line); filter: none; }
  34%  { color: var(--core); -webkit-text-stroke-color: var(--tube); filter: drop-shadow(0 0 2px var(--glow)) drop-shadow(0 0 12px var(--glow)); }
  40%  { color: var(--glass); -webkit-text-stroke-color: var(--glass-line); filter: none; }
  58%, 100% { color: var(--core); -webkit-text-stroke-color: var(--tube); filter: drop-shadow(0 0 2px var(--glow)) drop-shadow(0 0 12px var(--glow)); }
}
.js[data-power='on'] .neon .l.strike { animation: ignite var(--dur, 260ms) steps(1, end) var(--d, 0ms) both; }
/* the one tired letter that keeps buzzing (hero only, very rarely) */
.js[data-power='on'] .neon-hero.is-lit:not(.igniting) .l.tired { animation: tired 7s steps(1, end) 2s infinite; }
@keyframes tired {
  0%, 91%, 93%, 95.5%, 100% { opacity: 1; }
  92%, 94.5% { opacity: 0.35; }
}

/* ---------- The glass tube (signature) ---------- */
.tube { display: grid; gap: 10px; }
.tube svg { display: block; width: 100%; height: auto; overflow: visible; }
.tube .glass-off { stroke: var(--glass); }
.tube .glass-hl { stroke: color-mix(in oklab, var(--wall) 45%, white); opacity: 0.32; }
.tube .blackout, .tube .electrode { stroke: var(--black); fill: var(--black); }
.tube .lit { stroke: var(--tube); filter: drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 12px var(--glow)); transition: opacity 120ms linear; }
.tube .core { stroke: var(--core); opacity: 0.9; }
.tube .seg { transition: opacity 90ms steps(1, end); }
.tube .seg.off { opacity: 0; }
.tube .seg.flick .lit, .tube .seg.flick .core { animation: flicker 420ms steps(1, end) both; }
@keyframes flicker {
  0% { opacity: 0; } 18% { opacity: 1; } 32% { opacity: 0.15; } 52% { opacity: 1; } 66% { opacity: 0.3; } 82%, 100% { opacity: 1; }
}
.tube.powering .seg .lit, .tube.powering .seg .core { animation: power-down 900ms var(--ease-out) both; }
@keyframes power-down { from { opacity: 1; } to { opacity: 0; } }
.js[data-power='off'] .tube-hero .seg,
.js[data-power='off'] .tube-steps .seg { opacity: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - 72px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(14px, 2.4vh, 28px);
  padding: clamp(8px, 2vh, 28px) var(--gutter) clamp(56px, 9vh, 96px);
  text-align: center;
  isolation: isolate;
}
.spill {
  position: absolute; inset: -10% -20% 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 30% at 50% 34%, color-mix(in oklab, var(--tube) 34%, transparent), transparent 70%),
    radial-gradient(ellipse 80% 55% at 50% 36%, color-mix(in oklab, var(--tube) 10%, transparent), transparent 75%);
  opacity: 1;
  transition: opacity 900ms var(--ease-out);
}
.js[data-power='off'] .spill { opacity: 0; transition-duration: 160ms; }
.spill.striking { animation: spill-strike 1100ms steps(1, end) both; }
@keyframes spill-strike { 0% { opacity: 0; } 14% { opacity: .55; } 22% { opacity: .1; } 38% { opacity: .8; } 46% { opacity: .25; } 64%, 100% { opacity: 1; } }
.hero-sign { position: relative; width: min(100%, 64rem); display: grid; justify-items: center; gap: clamp(10px, 2vh, 22px); padding-top: clamp(24px, 5vh, 52px); }
.wires { position: absolute; top: 0; left: 22%; right: 22%; height: calc(clamp(24px, 5vh, 52px) + 0.12em); display: flex; justify-content: space-between; }
.wires i { width: 1.5px; height: 100%; background: linear-gradient(var(--black), color-mix(in oklab, var(--glass-line) 60%, var(--black))); }
.neon-hero { font-size: clamp(4.2rem, min(17vw, 24vh), 13rem); letter-spacing: 0; line-height: 1; padding: 0 0.06em; }
.tube-hero { width: min(86%, 46rem); }

/* the switch */
.switch-wrap { display: grid; justify-items: center; }
.switch {
  display: grid; justify-items: center; gap: 8px;
  border: 0; background: none; padding: 6px; border-radius: 22px;
}
.switch-plate {
  position: relative; width: 64px; height: 92px; border-radius: 18px;
  background: var(--porcelain);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.08), 0 10px 28px -12px rgb(0 0 0 / 0.7);
}
/* the system's switch, stood on end: a rule-coloured slot and a white knob that travels 20px */
.switch-lever {
  position: absolute; left: 50%; top: 14px; width: 26px; height: 46px; margin-left: -13px;
  border-radius: 999px; background: var(--p-rule);
  transition: background-color 200ms var(--ease-out);
}
.switch-lever::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  transform: translateY(20px); transition: transform 200ms var(--ease-out);
}
.switch[aria-pressed='true'] .switch-lever { background: #935433; }
.switch[aria-pressed='true'] .switch-lever::after { transform: none; }
.switch-pilot {
  position: absolute; left: 50%; bottom: 9px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 6px var(--amber);
  transition: background-color 200ms, box-shadow 200ms;
}
.switch[aria-pressed='true'] .switch-pilot { background: #c9bfb4; box-shadow: none; }
.js[data-power='off'] .switch:not([aria-pressed='true']) .switch-pilot { animation: pilot 1.6s ease-in-out infinite; }
@keyframes pilot { 50% { opacity: 0.35; box-shadow: 0 0 2px var(--amber); } }
.switch-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.switch .when-on { display: none; }
.switch[aria-pressed='true'] .when-on { display: inline; }
.switch[aria-pressed='true'] .when-off { display: none; }
.switch:hover .switch-plate { box-shadow: 0 1px 1px rgb(0 0 0 / 0.25), 0 14px 30px -10px rgb(0 0 0 / 0.8), 0 0 0 4px color-mix(in oklab, var(--ink) 10%, transparent); }
.switch:active .switch-plate { transform: scale(0.97); }
.switch-plate { transition: transform 120ms var(--ease-out), box-shadow 160ms var(--ease-out); }

.plaque { display: grid; justify-items: center; gap: 14px; max-width: 46rem; }
.plaque h1 {
  font-family: var(--font-sign); font-weight: 700;
  font-size: clamp(1.75rem, 4.4vw, 3.1rem); line-height: 1.12; letter-spacing: -0.015em;
  text-wrap: balance; color: var(--ink);
}
.lede { font-size: clamp(17px, 1.6vw, 19px); color: var(--ink-soft); max-width: 40rem; text-wrap: pretty; }
.cta-row { display: grid; justify-items: center; gap: 10px; margin-top: 6px; }
.cta-note { font-size: 14px; color: var(--ink-soft); }

/* the call button: a porcelain enamel plaque. Buttons never glow. */
.btn-call {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border-radius: 14px;
  background: var(--porcelain); color: var(--p-ink);
  font-size: 18px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.2), 0 10px 26px -12px rgb(0 0 0 / 0.8);
  transition: transform 120ms var(--ease-out), filter 160ms var(--ease-out);
}
.btn-call:hover { filter: brightness(1.04); text-decoration: none; }
.btn-call:active { transform: scale(0.985); }
.btn-call .ico { width: 22px; height: 22px; }

/* ---------- Sections ---------- */
.sec {
  position: relative;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--sec-space) var(--gutter) 0;
}
.neon-sec { font-size: clamp(2.6rem, 8.2vw, 6.4rem); margin-bottom: clamp(28px, 4vw, 52px); }
.lead { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.35; font-weight: 600; color: var(--ink); text-wrap: balance; }
.copy { display: grid; gap: 18px; align-content: start; max-width: 34rem; }
.copy p:not(.lead):not(.fine) { color: var(--ink-soft); text-wrap: pretty; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.measure { max-width: 38rem; color: var(--ink-soft); }
.fine { font-size: 13px; color: var(--ink-soft); }
.fine-lg { font-size: 15px; color: var(--ink-soft); margin-top: 36px; }
.sec-counter .neon-sec, .sec-make .neon-sec, .sec-steps .neon-sec { text-align: center; }

/* ---------- Café scope: a demo café's own palette arrives as --c-* ---------- */
.cafe {
  --c-facade: #14212f; --c-deep: #1c2c3d; --c-ink: #eef2f7; --c-soft: #b7c2cf; --c-tube: #8fb7e6;
  --c-core: #f2f7fd; --c-off: #2a3a4c; --c-black: #050a10; --c-glow: #8fb7e699; --c-action: #3d6a98; --c-on: #ffffff;
}
.cafe .tube .glass-off { stroke: var(--c-off); }
.cafe .tube .glass-hl { stroke: color-mix(in oklab, var(--c-facade) 45%, white); }
.cafe .tube .blackout, .cafe .tube .electrode { stroke: var(--c-black); fill: var(--c-black); }
.cafe .tube .lit { stroke: var(--c-tube); filter: drop-shadow(0 0 2px var(--c-glow)) drop-shadow(0 0 8px var(--c-glow)); }
.cafe .tube .core { stroke: var(--c-core); }

/* ---------- 1. Join: the phone ---------- */
.join-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: start; }
.sec-join .copy { max-width: 40rem; padding-top: clamp(0px, 4vw, 48px); }
.sec-join .neon-sec { margin-bottom: clamp(8px, 2vw, 24px); }
.beats { display: flex; flex-wrap: wrap; gap: 8px 6px; margin-top: 6px; counter-reset: beat; }
.beats li {
  counter-increment: beat;
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 6px;
  border-radius: 999px; border: 1.5px solid var(--rule); font-size: 14px; font-weight: 600; color: var(--ink-soft);
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out), background-color 240ms var(--ease-out);
}
.beats li::before {
  content: counter(beat); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--wall-deep); font-size: 12px; font-variant-numeric: tabular-nums;
}
.beats li.on { color: var(--ink); border-color: var(--glass-line); background: var(--wall-deep); }
.beats li.on::before { background: var(--tube); color: var(--p-ink); }

.phone {
  width: clamp(250px, 26vw, 300px); aspect-ratio: 300 / 610;
  border-radius: 44px; padding: 10px;
  background: linear-gradient(160deg, #3a2e27, #120a06 60%);
  box-shadow: 0 0 0 1.5px #4b3b31, 0 40px 70px -30px rgb(0 0 0 / 0.9), inset 0 0 0 1px rgb(255 255 255 / 0.05);
}
.phone-screen {
  position: relative; height: 100%; border-radius: 35px; overflow: hidden;
  background: var(--c-facade); color: var(--c-ink); font-size: 13px;
}
.phone-screen::before { /* notch */
  content: ''; position: absolute; top: 9px; left: 50%; width: 76px; height: 20px; margin-left: -38px;
  border-radius: 12px; background: #0a0604; z-index: 5;
}
.scene {
  position: absolute; inset: 0; padding: 46px 16px 18px; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 380ms var(--ease-out), transform 520ms var(--ease-out), visibility 0s linear 380ms;
}
.phone[data-scene='1'] .scene-1, .phone[data-scene='2'] .scene-2, .phone[data-scene='3'] .scene-3, .phone[data-scene='4'] .scene-4 {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
/* scene 1: viewfinder over the poster */
.scene-1 { background: #1a1410; justify-content: center; align-items: center; gap: 16px; }
.viewfinder { position: relative; width: 82%; aspect-ratio: 0.74; display: grid; place-items: center; }
.mini-poster {
  width: 78%; aspect-ratio: 0.707; background: #fff; border-radius: 3px; padding: 10px 9px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  box-shadow: 0 10px 20px -8px rgb(0 0 0 / 0.6); transform: rotate(-2deg) scale(0.92); transition: transform 1600ms var(--ease-out);
}
.phone[data-scene='1'] .mini-poster { transform: rotate(-1deg) scale(1.02); }
.mp-name { font-family: var(--font-sign); font-weight: 700; font-size: 12px; line-height: 1.1; color: #2f5d8a; }
.mp-head { font-size: 7.5px; line-height: 1.25; color: #2a1b12; font-weight: 600; }
.mp-qr { width: 72%; margin-top: auto; }
.vf-corner { position: absolute; width: 22px; height: 22px; border: 3px solid #fff; transition: inset 900ms var(--ease-out); }
.vf-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.vf-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.vf-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.vf-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.vf-scan { position: absolute; left: 6%; right: 6%; height: 2px; top: 10%; background: #fff; opacity: 0; box-shadow: 0 0 8px #fff; }
.phone[data-scene='1'].run .vf-scan { animation: vfscan 1.4s var(--ease-in-out) 0.5s 2 alternate both; }
@keyframes vfscan { from { top: 12%; opacity: 0.85; } to { top: 86%; opacity: 0.85; } }
.ph-hint { color: #e9e2d8; font-size: 12px; font-weight: 600; }
/* scenes 2-4: café façade */
.ph-sign {
  font-family: var(--font-sign); font-weight: 700; font-size: 26px; line-height: 1.08; color: var(--c-tube);
  text-shadow: 0 0 2px var(--c-glow), 0 0 10px var(--c-glow); margin-top: 6px; text-wrap: balance;
}
.ph-sign.small { font-size: 18px; }
.ph-rule { font-weight: 700; font-size: 14px; margin-top: 10px; }
.ph-sheet {
  margin: auto -16px -18px; padding: 18px 16px 20px; background: var(--porcelain); color: var(--p-ink);
  border-radius: 22px 22px 0 0; display: grid; gap: 8px;
  box-shadow: 0 -16px 32px -24px rgb(0 0 0 / 0.6);
  transform: translateY(100%); transition: transform 620ms var(--ease-out) 120ms;
}
.phone[data-scene='2'] .scene-2 .ph-sheet, .phone[data-scene='3'] .scene-3 .ph-sheet { transform: none; }
.ph-sheet-title { font-family: var(--font-sign); font-weight: 700; font-size: 17px; margin-bottom: 2px; }
.ph-label { font-size: 11px; font-weight: 600; }
.ph-field { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 11px; border: 1.5px solid var(--c-action); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-action) 22%, transparent); background: #fff; font-size: 13.5px; }
.caret { width: 1.5px; height: 17px; background: var(--c-action); margin-left: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ph-btn { display: grid; place-items: center; height: 42px; border-radius: 11px; background: var(--c-action); color: var(--c-on); font-weight: 700; font-size: 14px; margin-top: 4px; }
.ph-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.ph-code span {
  height: 40px; display: grid; place-items: center; border-radius: 9px; border: 1.5px solid var(--p-rule); background: #fff;
  font-size: 18px; font-variant-numeric: tabular-nums; color: transparent; transition: color 80ms, border-color 120ms;
}
.ph-code span.in { color: var(--p-ink); border-color: var(--c-action); }
.ph-check { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px; border-radius: 12px; border: 1.5px solid var(--p-rule); font-size: 11.5px; line-height: 1.35; transition: border-color 200ms, background-color 200ms; }
.ph-check .box, .check .box { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #8f8076; background: #fff; display: grid; place-items: center; transition: background-color 160ms, border-color 160ms; }
.ph-check.on { border-color: var(--c-action); background: color-mix(in oklab, var(--c-action) 6%, white); }
.ph-check.on .box { background: var(--c-action); border-color: var(--c-action); }
.ph-check.on .box::after, .check.on .box::after { content: ''; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.scene-4 { gap: 0; }
.tube-phone { margin-top: 12px; }
.ph-count { font-weight: 700; font-size: 16px; margin-top: 12px; }
.ph-sub { color: var(--c-soft); font-size: 12.5px; }
.plate {
  background: var(--enamel); color: var(--plate-caption); border-radius: 18px; padding: 14px 14px 10px;
  display: grid; justify-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.08), 0 10px 28px -12px rgb(0 0 0 / 0.55);
}
.plate .qr-svg { width: 100%; shape-rendering: crispEdges; }
.scene-4 .plate { margin-top: auto; }
.scene-4 .plate .qr-svg { width: 150px; }

/* ---------- 2. Counter ---------- */
.sec-counter .lead { max-width: 36rem; margin-bottom: clamp(40px, 6vw, 72px); }
.counter-stage { position: relative; display: grid; place-items: center; padding: 0 0 clamp(16px, 3vw, 32px); }
.tablet {
  position: relative; width: min(100%, 860px); aspect-ratio: 4 / 2.45;
  border-radius: clamp(20px, 3vw, 34px); padding: clamp(14px, 2.2vw, 26px);
  background: var(--c-facade); color: var(--c-ink);
  box-shadow: 0 0 0 clamp(8px, 1.3vw, 14px) #0d0805, 0 0 0 calc(clamp(8px, 1.3vw, 14px) + 1.5px) #3a2e27, 0 50px 90px -40px rgb(0 0 0 / 0.95);
  display: grid; grid-template-rows: auto 1fr auto auto auto; justify-items: center; text-align: center;
  transition: transform 90ms;
}
.counter-stage.buzz .tablet { animation: buzz 260ms linear; }
@keyframes buzz { 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-1px); } 80% { transform: translateX(1px); } }
.cam {
  position: relative; width: 34%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #2a2420, #0b0806); box-shadow: 0 0 0 2px var(--c-off);
  transition: box-shadow 200ms;
}
.counter-stage.scanning .cam { box-shadow: 0 0 0 2px var(--c-tube), 0 0 12px var(--c-glow); }
.cam-scan { position: absolute; left: 0; right: 0; height: 2px; top: 0; background: var(--c-tube); opacity: 0; box-shadow: 0 0 10px var(--c-tube); }
.counter-stage.scanning .cam-scan { animation: camscan 520ms var(--ease-in-out) both; }
@keyframes camscan { from { top: 8%; opacity: 1; } to { top: 92%; opacity: 1; } }
.tab-outcome { position: relative; width: 100%; display: grid; place-items: center; min-height: 1.3em; font-size: clamp(30px, 5.4vw, 58px); }
.out {
  grid-area: 1 / 1; font-family: var(--font-sign); font-weight: 700; line-height: 1.1;
  opacity: 0; transform: translateY(8px); transition: opacity 200ms var(--ease-out), transform 360ms var(--ease-out);
}
.out-stamp, .out-reward, .out-given { color: var(--c-tube); text-shadow: 0 0 3px var(--c-glow), 0 0 12px var(--c-glow); }
.out-soon { color: var(--amber); }
.out-idle { color: var(--c-soft); font-size: 0.5em; font-weight: 600; }
.counter-stage[data-step='0'] .out-idle,
.counter-stage[data-step='1'] .out-stamp, .counter-stage[data-step='2'] .out-soon,
.counter-stage[data-step='3'] .out-reward, .counter-stage[data-step='4'] .out-given { opacity: 1; transform: none; }
.tube-tablet { width: 82%; }
.tab-sub { position: relative; display: grid; place-items: center; min-height: 1.5em; margin-top: clamp(8px, 1.5vw, 16px); font-size: clamp(14px, 1.9vw, 21px); color: var(--c-soft); }
.sub { grid-area: 1 / 1; opacity: 0; transition: opacity 240ms var(--ease-out); }
.counter-stage[data-step='1'] .sub-stamp, .counter-stage[data-step='2'] .sub-soon,
.counter-stage[data-step='3'] .sub-reward, .counter-stage[data-step='4'] .sub-given { opacity: 1; }
.tab-edge { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: clamp(10px, 2vw, 22px); padding-top: clamp(8px, 1.4vw, 14px); border-top: 1px solid var(--c-off); font-size: clamp(11px, 1.4vw, 15px); }
.tab-who { color: var(--c-soft); font-weight: 600; margin-right: auto; }
.tab-btn {
  display: inline-grid; place-items: center; min-height: clamp(30px, 4.4vw, 50px); padding: 0 clamp(12px, 2vw, 22px); border-radius: 12px; font-weight: 700;
  opacity: 0; transform: translateY(6px); transition: opacity 220ms var(--ease-out), transform 300ms var(--ease-out), background-color 120ms;
}
.tab-btn.give { background: var(--c-action); color: var(--c-on); }
.tab-btn.undo { border: 1.5px solid var(--c-off); color: var(--c-ink); }
.counter-stage[data-step='1'] .undo, .counter-stage[data-step='3'] .give { opacity: 1; transform: none; }
.counter-stage.press .give { transform: scale(0.95); filter: brightness(1.15); }

.hand-phone {
  position: absolute; z-index: 2; bottom: -6%; right: 2%;
  width: clamp(110px, 17vw, 190px); aspect-ratio: 0.5; border-radius: clamp(18px, 2.6vw, 28px);
  padding: clamp(6px, 1vw, 10px); background: #14212f;
  box-shadow: 0 0 0 2px #3a2e27, 0 30px 50px -20px rgb(0 0 0 / 0.9);
  display: grid; place-items: center;
  transform: translate(130%, 18%) rotate(12deg); opacity: 0;
  transition: transform 640ms var(--ease-out), opacity 300ms var(--ease-out);
}
.counter-stage.phone-in .hand-phone { transform: translate(0, 0) rotate(-6deg); opacity: 1; }
.counter-stage.phone-out .hand-phone { transform: translate(-30%, 80%) rotate(-14deg); opacity: 0; transition-duration: 420ms; }
.hand-phone .plate { width: 100%; padding: 8%; border-radius: 12px; }

.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 72px); margin-top: clamp(56px, 8vw, 96px); }
.rules li { padding: 20px 0; border-top: 1px solid var(--rule); color: var(--ink-soft); text-wrap: pretty; }
.rules strong { display: block; color: var(--ink); font-size: 19px; margin-bottom: 4px; }

/* ---------- 3. Owner: the porcelain panel ---------- */
.owner-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.owned { color: var(--ink) !important; font-weight: 600; padding-top: 18px; border-top: 1px solid var(--rule); }
.panel {
  background: var(--porcelain); color: var(--p-ink); border-radius: 26px; padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 40px 80px -40px rgb(0 0 0 / 0.95);
  display: grid; gap: 18px;
}
.panel-title { font-family: var(--font-sign); font-weight: 700; font-size: 22px; color: #2f5d8a; }
.panel-meta { font-size: 13px; color: var(--p-soft); }
.ledger { display: grid; }
.ledger div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--p-rule); }
.ledger dt { display: grid; font-weight: 600; font-size: 15px; }
.ledger dt small { font-weight: 400; font-size: 13px; color: var(--p-soft); }
.ledger dd { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.chart { width: 100%; height: auto; overflow: visible; }
.chart .bar { fill: #3d6a98; transform-box: fill-box; transform-origin: 50% 100%; }
.chart .stub { fill: var(--p-rule); }
.chart .dot { fill: #2f5d8a; }
.js .panel:not(.shown) .chart .bar { transform: scaleY(0); }
.panel.shown .chart .bar { transform: scaleY(1); transition: transform 700ms var(--ease-out) var(--d, 0ms); }
.chart-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--p-soft); margin-top: -10px; }
.people { display: grid; font-size: 14px; }
.people-head, .person { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--p-rule); }
.people-head { font-size: 12px; font-weight: 700; color: var(--p-soft); letter-spacing: 0.02em; }
.person .yes { font-weight: 700; color: #2f5d8a; }
.person .no { color: var(--p-soft); }
.compose { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--porcelain-deep); font-size: 14px; }
.compose-btn { flex: none; padding: 8px 16px; border-radius: 10px; background: #3d6a98; color: #fff; font-weight: 700; }

/* ---------- 4. Your neon: the maker ---------- */
.sec-make { isolation: isolate; }
@property --m-facade { syntax: '<color>'; inherits: true; initial-value: #21120a; }
@property --m-tube { syntax: '<color>'; inherits: true; initial-value: #de9875; }
.make-wall {
  position: absolute; z-index: -1; left: 50%; width: 100vw; margin-left: -50vw; top: calc(var(--sec-space) * 0.55); bottom: calc(var(--sec-space) * -0.55);
  background: radial-gradient(ellipse 60% 50% at 50% 55%, color-mix(in oklab, var(--m-tube, var(--tube)) 16%, transparent), transparent 70%), var(--m-facade, var(--wall));
  transition: --m-facade 600ms var(--ease-out), --m-tube 600ms var(--ease-out);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.sec-make .lead { max-width: 34rem; margin-bottom: 14px; }
.maker { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 6vw, 72px); align-items: stretch; }
.maker-preview {
  position: relative; border-radius: 26px; padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 56px);
  background: var(--c-facade); color: var(--c-ink);
  display: grid; align-content: center; gap: clamp(14px, 2vw, 22px); min-height: 380px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 40px 80px -40px rgb(0 0 0 / 0.9), inset 0 0 0 1px color-mix(in oklab, var(--c-ink) 8%, transparent);
  transition: background-color 500ms var(--ease-out), color 500ms var(--ease-out);
}
.maker-sign {
  --tube: var(--c-tube); --core: var(--c-core); --glow: var(--c-glow); --glass: var(--c-off); --glass-line: var(--c-soft);
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  min-height: 1.1em;
}
.maker-preview[data-scheme='day'] .maker-sign { -webkit-text-stroke-width: 0; color: var(--c-tube); }
.maker-preview[data-scheme='day'] .maker-sign .l { filter: drop-shadow(0 0 1px var(--c-glow)) drop-shadow(0 0 4px color-mix(in oklab, var(--c-glow) 45%, transparent)); }
.maker-preview[data-scheme='day'] .tube .lit { filter: drop-shadow(0 0 1.5px var(--c-glow)); }
.maker-preview[data-scheme='day'] .tube .core { opacity: 0.5; }
.maker-preview[data-scheme='day'] .tube .electrode { fill: color-mix(in oklab, var(--c-black) 62%, var(--c-facade)); stroke: none; }
.maker-rule { font-weight: 700; font-size: clamp(17px, 1.8vw, 20px); }
.maker-addr { font-size: 13px; color: var(--c-soft); overflow-wrap: anywhere; }
.maker-controls { display: grid; gap: 20px; align-content: start; }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > span, .field legend { font-size: 14px; font-weight: 600; color: var(--ink); padding: 0; }
.field output { color: var(--tube); font-weight: 700; margin-left: 4px; }
.field input[type='text'] {
  height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--rule); background: var(--wall-shade); color: var(--ink);
  font: 400 17px var(--font-ui); width: 100%;
  transition: border-color 140ms, box-shadow 140ms;
}
.field input[type='text']:focus { outline: none; border-color: var(--tube); box-shadow: 0 0 0 3px color-mix(in oklab, var(--tube) 22%, transparent); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches label { position: relative; width: 44px; height: 44px; cursor: pointer; }
.swatches input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatches span {
  position: absolute; inset: 5px; border-radius: 50%; background: var(--sw);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); transition: inset 140ms var(--ease-out), box-shadow 140ms, transform 160ms var(--ease-out);
}
.swatches label:active span { transform: scale(0.95); }
.seg button, .lang button { transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.seg button:active, .lang button:active { transform: scale(0.95); }
.swatches input:checked + span { inset: 3px; box-shadow: 0 0 0 2px var(--wall), 0 0 0 4px var(--ink); }
.swatches input:focus-visible + span { box-shadow: 0 0 0 2px var(--wall), 0 0 0 4px var(--tube); }
.swatches .custom input { width: 44px; height: 44px; }
.custom-ring { background: conic-gradient(from 0deg, #d9578a, #c99a1e, #2f7a5b, #3aa6a0, #2f5d8a, #7a3d8a, #d9578a) !important; }
.custom.on .custom-ring { inset: 3px; box-shadow: 0 0 0 2px var(--wall), 0 0 0 4px var(--ink); }
input[type='range'] { width: 100%; height: 44px; accent-color: var(--tube); margin: 0; background: transparent; }
.seg { display: inline-flex; justify-self: start; padding: 3px; border-radius: 999px; background: var(--wall-deep); }
.seg button { min-height: 40px; min-width: 72px; border: 0; border-radius: 999px; background: transparent; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.seg button[aria-pressed='true'] { background: var(--ink); color: var(--p-ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.4); }

/* ---------- 5. RODO ---------- */
.rodo-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.consents {
  background: var(--porcelain); color: var(--p-ink); border-radius: 22px; padding: 22px 20px 18px; display: grid; gap: 10px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 30px 60px -36px rgb(0 0 0 / 0.95);
  transform: rotate(-1.2deg);
}
.consent-title { font-family: var(--font-sign); font-weight: 700; font-size: 20px; margin-bottom: 4px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--p-rule); transition: border-color 220ms, background-color 220ms; }
.check > span:last-child { display: grid; gap: 1px; font-size: 15px; }
.check small { font-size: 13px; color: var(--p-soft); }
.check .box { width: 22px; height: 22px; border-radius: 6px; margin-top: 1px; }
.check.on { border-color: var(--p-ink); background: color-mix(in oklab, var(--p-ink) 5%, white); }
.check.on .box { background: var(--p-ink); border-color: var(--p-ink); }
.stamp-time { justify-self: end; font-size: 12px; color: var(--p-soft); opacity: 0; transition: opacity 400ms; }
.consents.timed .stamp-time { opacity: 1; }
.rodo-list { display: grid; counter-reset: none; }
.rodo-list li { padding: 18px 0 18px 36px; border-top: 1px solid var(--rule); color: var(--ink-soft); position: relative; text-wrap: pretty; }
.rodo-list li::before {
  content: ''; position: absolute; left: 2px; top: 25px; width: 14px; height: 7px;
  border: solid var(--tube); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}

/* ---------- 6. Steps ---------- */
.steps-tube { width: min(100%, 66rem); margin: 0 auto 8px; padding: 0 2%; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 36px); width: min(100%, 66rem); margin: 0 auto; }
.steps li { display: grid; gap: 6px; align-content: start; transition: opacity 300ms var(--ease-out); }
.steps h3 { font-family: var(--font-sign); font-weight: 700; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.2; color: var(--ink); }
.steps p { color: var(--ink-soft); font-size: 16px; text-wrap: pretty; }
.steps .num { color: var(--ink); }
.addr { white-space: nowrap; }
.js .sec-steps:not(.static) .steps li:not(.on) h3 { color: var(--ink-soft); }
.steps h3 { transition: color 120ms steps(1, end) 90ms; }

/* ---------- 7. Close ---------- */
.sec-close { display: grid; justify-items: center; gap: 22px; padding-bottom: clamp(80px, 12vw, 140px); text-align: center; }
.neon-phone { font-size: clamp(3rem, 12.5vw, 10rem); text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; line-height: 1.05; }
.neon-phone:hover { text-decoration: none; }
.neon-phone:focus-visible { outline-offset: 10px; border-radius: 18px; }
.close-plate { margin-top: clamp(28px, 4vw, 48px); width: 200px; }
.close-plate .plate { font-size: 13px; padding: 16px 16px 12px; }

/* ---------- Footer & floating call ---------- */
.foot {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 28px var(--gutter) max(28px, env(safe-area-inset-bottom)); border-top: 1px solid var(--rule);
  color: var(--ink-soft); font-size: 14px;
}
.foot img { height: 26px; width: auto; }
.foot .fine { margin-left: auto; }
.foot a { color: var(--ink); font-weight: 600; }
.float-call {
  position: fixed; z-index: 20; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: 999px;
  background: var(--porcelain); color: var(--p-ink); font-weight: 700; text-decoration: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 14px 30px -10px rgb(0 0 0 / 0.85);
  transform: translateY(140%); opacity: 0; pointer-events: none;
  transition: transform 420ms var(--ease-out), opacity 240ms var(--ease-out);
}
.float-call.show { transform: none; opacity: 1; pointer-events: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .join-grid, .owner-grid, .rodo-grid, .maker { grid-template-columns: minmax(0, 1fr); }
  .phone { justify-self: center; }
  .maker-preview { min-height: 300px; }
  .consents { max-width: 26rem; }
}
@media (max-width: 720px) {
  .rules { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 34px; position: relative; }
  .steps li { padding: 16px 0 22px; }
  .steps-tube { position: absolute; left: var(--gutter); width: auto; margin: 0; padding: 0; }
  .steps-tube { display: none; }
  .steps::before { content: ''; position: absolute; left: 8px; top: 20px; bottom: 30px; width: 6px; border-radius: 3px; background: var(--glass); }
  .steps li { position: relative; }
  .steps li::before {
    content: ''; position: absolute; left: -29px; top: 21px; width: 10px; height: 22px; border-radius: 4px;
    background: var(--glass); transition: background-color 120ms steps(1, end), box-shadow 200ms;
  }
  .steps li.on::before, .js .sec-steps.static .steps li::before { background: var(--tube); box-shadow: 0 0 4px var(--glow), 0 0 12px var(--glow); }
  .hand-phone { width: 92px; right: -1%; top: -9%; bottom: auto; }
  .tablet { aspect-ratio: auto; min-height: 330px; grid-template-rows: auto auto auto auto auto; gap: 10px; }
  .cam { width: 48%; }
  .tab-outcome { min-height: 1.4em; margin-top: 6px; }
  .tube-tablet { width: 92%; }
  .tab-edge { flex-wrap: wrap; }
  .foot .fine { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .make-wall { transition: --m-facade 200ms linear, --m-tube 200ms linear !important; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
}