/* Hero: intro text on the left, website + phone mockups on the right */
.hero { min-height: calc(100vh - 76px); display: grid; align-items: center; padding-block: var(--space-12) var(--space-16); }
.hero-inner { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--space-12); align-items: center; }
/* Capped so the longest rotating word fits on one line next to the mockups (from 320 px up).
   With strongly enlarged text a single word may be wider than the screen: only then it breaks inside. */
.hero h1 { margin-top: var(--space-4); font-size: clamp(2.75rem, 1.6rem + 4vw, 5rem); overflow-wrap: anywhere; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* Typefaces of the three concepts: one self-hosted cut each (Latin + Czech subset), used only in the mockups.
   A face is downloaded only when text of its theme is shown. Licences in fonts/OFL-*.txt. */
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-400-subset.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-500-subset.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Archivo Expanded"; src: url("../fonts/archivo-expanded-900-subset.woff2") format("woff2"); font-weight: 900; font-display: swap; }

/* Mockup stage */
.hero-stage { position: relative; height: 540px; perspective: 1600px; }
.mock-browser {
  position: absolute; top: 30px; left: 0; width: 88%; height: 380px;
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--color-line-strong);
  box-shadow: 0 50px 100px #000a;
  background: var(--mock-bg);
  transform: rotateY(-12deg) rotateX(5deg);
}
.mock-bar { height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #1b1b26; }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ffffff38; }
.mock-bar span { margin-left: var(--space-3); padding: 2px 12px; border-radius: 6px; background: #ffffff10; color: #ffffff80; font-size: 0.75rem; }

.mock-phone {
  position: absolute; right: 0; top: 120px; width: 210px; height: 420px; z-index: 2;
  border-radius: 34px; border: 6px solid #1b1b26; overflow: hidden;
  background: var(--mock-bg);
  box-shadow: 0 40px 80px #000b;
  transform: rotateY(-16deg) rotateX(4deg);
}

/* Mock website content: one small screen per concept, modelled on the approved demos (/ukazky/...).
   Only the colors shared by all screens are variables; everything else belongs to the screen itself. */
.mock-site { position: relative; height: calc(100% - 32px); overflow: hidden; color: var(--mock-text); font-family: var(--font-body); font-synthesis: none; }
.mock-phone .mock-site { height: 100%; }
.mock-screen { position: absolute; inset: 0; padding: 16px 22px; }
.mock-phone .mock-screen { padding: 22px 14px 16px; }
.mock-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The shade lies between the photo and the content */
.mock-screen::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--mock-shade, none); }
.mock-head, .mock-copy, .mock-slots, .mock-ba { position: relative; z-index: 2; }
.mock-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.5625rem; }
.mock-site h2 { color: var(--mock-text); }
.mock-kicker { display: block; font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; }
.mock-logo { display: flex; align-items: center; gap: 6px; }

/* Barber Studio: walnut black and brass, symmetrical header with an emblem, centered headline over the photo */
.mock-barber { --mock-shade: radial-gradient(ellipse 75% 65% at 50% 58%, #120e0bf0, #120e0bc4 60%, #120e0bf2), linear-gradient(#120e0bf0 0, #120e0b00 32%); text-align: center; }
.mock-barber .mock-photo { object-position: 50% 35%; }
.mock-barber .mock-head { display: grid; grid-template-columns: 1fr auto 1fr; letter-spacing: 0.2em; text-transform: uppercase; }
.mock-barber .mock-head > :first-child { justify-self: start; }
.mock-barber .mock-head > :last-child { justify-self: end; }
.mock-emblem { display: grid; justify-items: center; gap: 5px; font: 400 0.5625rem/1 "Fraunces", Georgia, serif; letter-spacing: 0.24em; }
.mock-emblem i { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #c9a46a; border-radius: 50%; outline: 1px solid #c9a46a55; outline-offset: 2px; color: #c9a46a; font-size: 0.8125rem; font-style: normal; letter-spacing: 0; }
.mock-line { padding: 5px 9px; border: 1px solid #c9a46a; color: #c9a46a; }
/* The phone covers the right part of the browser, so the text is centered in the free part */
.mock-barber .mock-copy { margin: 40px 150px 0 0; }
.mock-barber .mock-kicker { display: flex; justify-content: center; align-items: center; gap: 8px; color: #c9a46a; letter-spacing: 0.28em; }
.mock-barber .mock-kicker::before, .mock-barber .mock-kicker::after { content: ""; width: 18px; height: 1px; background: currentColor; }
.mock-barber h2 { margin-top: 12px; font: 400 2.25rem/0.98 "Fraunces", Georgia, serif; letter-spacing: -0.015em; }
.mock-barber h2 em { font-style: normal; color: #c9a46a; }
.mock-barber .mock-cta { display: inline-block; margin-top: 18px; padding: 8px 14px; background: #c9a46a; color: #120e0b; font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.mock-phone .mock-barber .mock-copy { margin: 42px 0 0; }
.mock-phone .mock-barber h2 { font-size: 1.5rem; }
/* Booking step of the barber demo: time slots in the phone */
.mock-slots { display: grid; gap: 6px; margin-top: 24px; text-align: left; }
.mock-slots span { display: flex; justify-content: space-between; padding: 7px 10px; border: 1px solid #efe4d02e; background: #120e0bb3; font: 400 0.6875rem "Fraunces", Georgia, serif; }
.mock-slots em { font-style: normal; }
.mock-slots .is-selected { border-color: #c9a46a; background: #c9a46a; color: #120e0b; }

/* Zakázkové truhlářství: paper, a pencil drawing of a chair that fills with wood, wooden plank buttons */
.mock-joinery { color: #2b2219; }
.mock-joinery .mock-head { font-weight: 500; }
.mock-joinery .mock-logo { font: 500 0.8125rem/1 "Cormorant Garamond", Georgia, serif; }
.mock-joinery .mock-logo i { width: 16px; height: 16px; border: 1px solid #2b2219; border-radius: 50%; background: repeating-radial-gradient(circle at 46% 54%, #0000 0 2px, #3b231255 2px 2.6px), #c99a64; }
.mock-plank {
  position: relative; display: inline-block; padding: 6px 16px 5px; border-radius: 3px; white-space: nowrap;
  background: var(--mock-plank) center / 300px 60px, #cf9f68;
  color: #3b2312; font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.04em; text-shadow: 0 1px 0 #f6dcb2aa;
  box-shadow: inset 0 1px 0 #ffffff55, 0 2px 0 #8a5d34, 0 5px 10px -4px #4a2c1480;
}
/* Two screw heads */
.mock-plank::before, .mock-plank::after { content: ""; position: absolute; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: #6b6358; }
.mock-plank::before { left: 5px; }
.mock-plank::after { right: 5px; }
.mock-joinery .mock-copy { max-width: 205px; margin-top: 34px; }
.mock-joinery .mock-kicker { color: #75695c; }
.mock-joinery h2 { margin-top: 10px; font: 500 2.05rem/0.95 "Cormorant Garamond", Georgia, serif; letter-spacing: -0.02em; }
.mock-joinery h2 em { font-style: normal; color: #8a5a2b; white-space: nowrap; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 50 1, 110 9, 198 4' fill='none' stroke='%23c99a64' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 0.16em no-repeat; }
.mock-joinery .mock-copy .mock-plank { margin-top: 18px; }
/* Drawing board with a drafting grid, slightly turned like a sheet on a desk */
.mock-board {
  position: absolute; top: 62px; right: 150px; width: 150px; aspect-ratio: 1 / 1.02; border-radius: 4px;
  background-color: #f8f4ec;
  background-image: linear-gradient(#2b22190f 1px, transparent 1px), linear-gradient(90deg, #2b22190f 1px, transparent 1px);
  background-size: 10px 10px;
  box-shadow: 0 0 0 1px #2b221926, 0 16px 30px -16px #4a2c1466;
  rotate: 1.2deg;
}
.mock-chair { display: block; width: 100%; height: 100%; }
.mock-draw { fill: none; stroke: #4a4036; stroke-width: 5; stroke-linejoin: round; }
.mock-draw-thin { fill: none; stroke: #4a4036; stroke-width: 2; stroke-dasharray: 10 8; opacity: 0.5; }
.mock-dim { fill: none; stroke: #8a5a2b; stroke-width: 3; }
.mock-dim-text { font: 600 40px var(--font-body); fill: #8a5a2b; }
/* The wood fills the drawing from left to right each time the theme appears (off with reduced motion) */
.mock-reveal { animation: mock-reveal 2s 0.3s cubic-bezier(0.6, 0, 0.2, 1) both; }
@keyframes mock-reveal { from { width: 0; } }
.mock-phone .mock-joinery .mock-copy { max-width: none; margin-top: 26px; }
.mock-phone .mock-joinery h2 { font-size: 1.45rem; }
.mock-phone .mock-joinery .mock-copy .mock-plank { margin-top: 14px; }
.mock-phone .mock-board { position: relative; top: auto; right: auto; width: 82%; margin: 22px auto 0; }

/* Autodetailing: black and signal orange, wide uppercase type, cut corners, mono labels */
.mock-detailing { --mock-shade: linear-gradient(90deg, #0a0b0df2 0, #0a0b0dcc 34%, #0a0b0d00 72%), linear-gradient(0deg, #0a0b0d 0, #0a0b0d00 45%), linear-gradient(180deg, #0a0b0df2 0, #0a0b0d00 30%); }
.mock-detailing .mock-photo { object-position: 50% 58%; }
.mock-detailing .mock-head { padding-bottom: 10px; border-bottom: 1px solid #ffffff1c; }
.mock-detailing .mock-logo { font: 900 0.625rem/1 "Archivo Expanded", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.mock-detailing .mock-logo i { width: 12px; height: 12px; background: #ff4d12; clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); }
.mock-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase; }
.mock-mono em { font-style: normal; color: #ff4d12; }
.mock-detailing .mock-cta { display: inline-block; padding: 7px 12px; background: #ff4d12; color: #000; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
/* The phone overlaps the browser by 210px minus the part of the stage beside the browser (12 % of the stage,
   i.e. 13.6 % of the browser): the text ends 6px before the phone */
.mock-detailing .mock-copy { position: absolute; left: 22px; bottom: 22px; max-width: min(240px, 113.6% - 238px); }
.mock-detailing .mock-kicker { color: #ff4d12; letter-spacing: 0.06em; }
.mock-detailing h2 { margin-top: 10px; font: 900 1.375rem/0.92 "Archivo Expanded", system-ui, sans-serif; letter-spacing: -0.01em; text-transform: uppercase; }
.mock-detailing h2 em { font-style: normal; color: #ff4d12; }
.mock-detailing .mock-copy .mock-cta { margin-top: 14px; padding: 8px 14px; font-size: 0.5625rem; }
.mock-phone .mock-detailing .mock-copy { position: relative; left: auto; bottom: auto; max-width: none; margin-top: 30px; }
.mock-phone .mock-detailing h2 { font-size: 1rem; }
/* Before / after split of the detailing demo, in miniature */
.mock-ba { height: 150px; margin-top: 20px; overflow: hidden; }
.mock-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.mock-ba img:first-child { filter: saturate(0.25) brightness(0.62) contrast(0.85) sepia(0.35); }
.mock-ba img + img { clip-path: inset(0 0 0 52%); }
.mock-ba i { position: absolute; top: 0; bottom: 0; left: 52%; width: 2px; background: #ff4d12; }
.mock-ba i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; translate: -50% -50%; background: #ff4d12; }
.mock-ba b, .mock-ba em { position: absolute; bottom: 6px; font: 500 0.5rem/1 ui-monospace, Consolas, monospace; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.mock-ba b { left: 6px; }
.mock-ba em { right: 6px; }

/* Concept themes. Colors are registered so they can transition smoothly. */
@property --mock-bg { syntax: "<color>"; inherits: true; initial-value: #120e0b; }
@property --mock-text { syntax: "<color>"; inherits: true; initial-value: #efe4d0; }

.hero-stage {
  /* Barber Studio (default); the joinery wood grain is shared by its plank buttons */
  --mock-bg: #120e0b; --mock-text: #efe4d0;
  --mock-plank: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.16' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.17 0 0 0 0 0.07 2.1 0 0 0 -0.78'/%3E%3C/filter%3E%3Crect width='600' height='120' fill='%23cf9f68'/%3E%3Crect width='600' height='120' filter='url(%23f)'/%3E%3C/svg%3E");
  transition: --mock-bg 0.6s var(--ease-out), --mock-text 0.6s var(--ease-out);
}
.hero:has(input[value="joinery"]:checked) .hero-stage { --mock-bg: #f3ede2; --mock-text: #2b2219; }
.hero:has(input[value="detailing"]:checked) .hero-stage { --mock-bg: #0a0b0d; --mock-text: #f2f3f5; }
.mock-defs { position: absolute; }

/* Show only the content of the selected theme; it fades in when it appears */
[data-theme] { display: none; }
.hero:has(input[value="barber"]:checked) [data-theme~="barber"],
.hero:has(input[value="joinery"]:checked) [data-theme~="joinery"],
.hero:has(input[value="detailing"]:checked) [data-theme~="detailing"] { display: block; animation: mock-in 0.5s var(--ease-out); }
@keyframes mock-in { from { opacity: 0; transform: translateY(8px); } }

/* Background glow follows the selected theme */
.backdrop .glow-1 { transition: background 1s var(--ease-out); }
body:has(.hero input[value="barber"]:checked) .backdrop .glow-1 { background: #7c4a1a; }
body:has(.hero input[value="joinery"]:checked) .backdrop .glow-1 { background: #8a6a3c; }
body:has(.hero input[value="detailing"]:checked) .backdrop .glow-1 { background: #c2410c; }

/* Narrower desktops: no room for the drawing board next to the text in the browser, the phone shows it */
@media (width < 1300px) {
  .mock-browser .mock-board { display: none; }
  /* Narrower browser: the header keeps logo and button only, on one line */
  .mock-head .mock-cta, .mock-head .mock-plank { white-space: nowrap; }
}

/* Theme switcher: native radio buttons styled as chips (keyboard: arrow keys) */
.theme-switch { margin-top: var(--space-12); max-width: 600px; padding: var(--space-4); border: 1px solid var(--color-line-strong); border-radius: 20px; background: #ffffff08; backdrop-filter: blur(8px); }
.theme-switch legend { float: left; width: 100%; margin-bottom: var(--space-3); padding: 0 var(--space-1); font-size: 0.8125rem; color: var(--color-muted); }
.theme-switch legend b { color: var(--color-text); font-weight: 600; }
.theme-chips { clear: both; display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* A chip name longer than the screen (only with strongly enlarged text) breaks instead of sticking out;
   the fieldset would otherwise keep its content width */
.theme-switch { min-inline-size: 0; }
.theme-chip { overflow-wrap: anywhere; }
.theme-chip { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.6rem 1rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast); }
.theme-chip:hover { background: #ffffff10; }
.theme-chip input { position: absolute; opacity: 0; pointer-events: none; }
.theme-chip i { width: 10px; height: 10px; border-radius: 50%; }
/* Colour dot of each concept (in CSS, not inline: the CSP allows no inline styles) */
.theme-chip input[value="barber"] + i { background: #c9a46a; }
.theme-chip input[value="joinery"] + i { background: #e6d5b8; }
.theme-chip input[value="detailing"] + i { background: #ff4d12; }
.theme-chip:has(input:checked) { background: #fff; border-color: #fff; color: #000; }
.theme-chip:has(input:focus-visible) { outline: 2px solid var(--color-cyan); outline-offset: 3px; }
/* High contrast mode replaces the white fill, so mark the selected chip with system colors */
@media (forced-colors: active) {
  .theme-chip:has(input:checked) { forced-color-adjust: none; background: SelectedItem; border-color: SelectedItem; color: SelectedItemText; }
  .theme-chip:has(input:focus-visible) { outline-color: CanvasText; }
}

/* Motion control: a quiet text button below the theme switcher (main.js). Both labels share one cell,
   so the button keeps its size when the label changes; the hidden one is not read. */
.motion-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: var(--space-3); padding: 0 var(--space-2);
  border: 0; border-radius: 10px; background: none; color: var(--color-text); font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.motion-labels { display: inline-grid; text-decoration: underline; text-decoration-color: #ffffff3d; text-underline-offset: 5px; }
.motion-labels > span { grid-area: 1 / 1; }
.motion-toggle:hover .motion-labels { text-decoration-color: currentColor; }
:root.motion-paused .motion-label-pause,
:root:not(.motion-paused) .motion-label-play { visibility: hidden; }
/* Icon (decoration only, the text says it all): two bars = pause, triangle = play */
.motion-icon { flex: none; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
:root.motion-paused .motion-icon { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (forced-colors: active) {
  .motion-icon { forced-color-adjust: none; border-color: ButtonText; }
  :root.motion-paused .motion-icon { background: ButtonText; }
}

/* Browsers without :has(): show the barber concept and hide the switcher, which would do nothing */
@supports not selector(:has(*)) {
  [data-theme="barber"] { display: block; }
  .theme-switch { display: none; }
}

/* Floating labels */
.hero-tag { position: absolute; z-index: 3; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--color-line-strong); background: #11111ae0; backdrop-filter: blur(10px); font-size: 0.8125rem; line-height: 1.35; color: var(--color-muted); }
.hero-tag b { display: block; color: var(--color-text); font-size: 0.875rem; }
.hero-tag-concept { left: 40px; bottom: 30px; }
.hero-tag-devices { right: 170px; top: 0; }

/* Rotating word in the headline (pure CSS); all words share one grid cell so nothing jumps.
   The words go round twice (20 s), then "nestárnou." stays for good: moving content must not run
   endlessly without a way to stop it (WCAG 2.2.2). With reduced motion the first word is shown at once. */
.rotator { display: inline-grid; vertical-align: top; }
.rotator-word { grid-area: 1 / 1; opacity: 0; animation: rotate-word 10s var(--ease-out) 2 both; }
.rotator-word:nth-child(1) { opacity: 1; animation: rotate-word 10s var(--ease-out) 2 both, rotate-word-final 0.5s var(--ease-out) 20s forwards; }
.rotator-word:nth-child(2) { animation-delay: 2.5s; }
.rotator-word:nth-child(3) { animation-delay: 5s; }
.rotator-word:nth-child(4) { animation-delay: 7.5s; }
@keyframes rotate-word {
  0% { opacity: 0; transform: translateY(0.35em); filter: blur(6px); }
  5%, 21% { opacity: 1; transform: none; filter: blur(0); }
  25%, 100% { opacity: 0; transform: translateY(-0.35em); filter: blur(6px); }
}
/* Set by js/main.js once the words have stopped: entrance and rotation never start again */
.hero.is-settled :is(.rotator-word, .hero-text > *, .hero-stage) { animation: none; }
/* Stopped by the motion control: only the words, for good; the entrance (if still running) ends on its own */
.hero.is-words-stopped .rotator-word { animation: none; }
/* Without JavaScript the words do not rotate: the first one (nestárnou.) stays (step 4.17) */
@media (scripting: none) {
  .hero .rotator-word { animation: none; }
}
/* Same entrance as one rotation step (5 % of 10 s), then the word stays */
@keyframes rotate-word-final {
  from { opacity: 0; transform: translateY(0.35em); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* Entrance on page load */
.hero-text > *, .hero-stage { animation: hero-rise 0.9s var(--ease-out) both; }
.hero-text > :nth-child(2) { animation-delay: 0.08s; }
.hero-text > :nth-child(3) { animation-delay: 0.16s; }
.hero-text > :nth-child(4) { animation-delay: 0.24s; }
.hero-text > :nth-child(5) { animation-delay: 0.32s; }
.hero-stage { animation-delay: 0.2s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(24px); } }

/* Pointer effects (values are set by js/main.js for mouse users only) */
.hero { position: relative; }
.hero-inner { position: relative; z-index: 1; }
.hero-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(520px circle at var(--pointer-x, 50%) var(--pointer-y, 30%), #8b5cf62e, transparent 65%);
  transition: opacity 0.4s;
}
.hero.has-pointer .hero-glow { opacity: 1; }
.mock-browser { transform: rotateY(calc(-12deg + var(--tilt-x, 0) * 10deg)) rotateX(calc(5deg - var(--tilt-y, 0) * 8deg)); transition: transform 0.4s var(--ease-out); }
.mock-phone { transform: rotateY(calc(-16deg + var(--tilt-x, 0) * 14deg)) rotateX(calc(4deg - var(--tilt-y, 0) * 10deg)) translateZ(40px); transition: transform 0.4s var(--ease-out); }

@media (max-width: 960px) {
  .hero { min-height: auto; padding-top: var(--space-8); }
  /* Mobile order: text, buttons, mockups, then the switcher right below them */
  .hero-inner { grid-template-columns: 1fr; gap: 0; }
  .hero-text { display: contents; }
  .hero-stage { order: 1; margin-top: var(--space-12); }
  .theme-switch { order: 2; margin-top: var(--space-6); }
  .motion-control { order: 3; }
  /* Mockups share one grid cell, so the stage is always as tall as the lower of them
     and the switcher below can never be overlapped */
  .hero-stage { --phone-width: 150px; display: grid; height: auto; perspective: none; }
  .mock-browser, .mock-phone { position: relative; grid-area: 1 / 1; }
  .mock-browser { width: 100%; height: 330px; top: 0; transform: none; }
  .mock-phone { justify-self: end; width: var(--phone-width); height: 300px; top: auto; margin-top: 200px; right: -4px; transform: none; border-width: 5px; border-radius: 26px; }
  /* The phone covers the lower right part of the browser: text stays left of it */
  .mock-browser .mock-screen { padding: 14px 16px; }
  .mock-browser :is(.mock-joinery, .mock-detailing) .mock-head > :nth-child(2) { display: none; }
  /* The phone sticks out 4px, the screen has 16px padding: keep the centered text left of the phone */
  .mock-browser .mock-barber .mock-copy { margin: 36px calc(var(--phone-width) - 12px) 0 0; }
  .mock-browser .mock-barber h2 { font-size: 1.625rem; }
  .mock-browser .mock-joinery .mock-copy { max-width: calc(100% - var(--phone-width) + 20px); margin-top: 28px; }
  .mock-browser .mock-joinery h2 { font-size: 1.625rem; }
  .mock-browser .mock-detailing .mock-copy { left: 16px; bottom: 18px; max-width: calc(100% - var(--phone-width) - 12px); }
  .mock-browser .mock-detailing h2 { font-size: 1.125rem; }
  .mock-phone .mock-screen { padding: 16px 10px 12px; }
  .mock-phone .mock-barber .mock-copy { margin-top: 26px; }
  .mock-phone .mock-barber h2 { font-size: 1.125rem; }
  .mock-phone .mock-slots { margin-top: 16px; }
  .mock-phone .mock-slots span { padding: 5px 7px; font-size: 0.5625rem; }
  .mock-phone .mock-joinery .mock-copy { margin-top: 18px; }
  .mock-phone .mock-joinery h2 { font-size: 1.0625rem; }
  .mock-phone .mock-board { width: 70%; margin-top: 16px; }
  .mock-phone .mock-plank { padding-inline: 12px; font-size: 0.5rem; }
  .mock-phone .mock-barber .mock-kicker { letter-spacing: 0.14em; }
  .mock-phone .mock-barber .mock-kicker::before, .mock-phone .mock-barber .mock-kicker::after { display: none; }
  .mock-phone .mock-detailing .mock-logo { font-size: 0.5rem; }
  .mock-phone .mock-detailing .mock-head > :last-child { display: none; }
  /* Smaller screen: the text sits over the car, so the photo is darkened more (as in the demo on a phone) */
  .mock-browser .mock-detailing { --mock-shade: linear-gradient(0deg, #0a0b0d 0, #0a0b0de6 45%, #0a0b0d99 75%, #0a0b0dcc 100%); }
  .mock-phone .mock-detailing .mock-copy { margin-top: 20px; }
  .mock-phone .mock-detailing h2 { font-size: 0.75rem; }
  .mock-phone .mock-ba { height: 100px; margin-top: 14px; }
  .hero-tag-devices { display: none; }
  /* The label stays in the free space left of the phone (the phone sticks out 4px to the right) */
  .hero-tag-concept { left: 0; bottom: 0; max-width: calc(100% - var(--phone-width) + 4px - var(--space-3)); }
}

/* Scroll effect (step 4.6): while the page scrolls from 32 to 320 px, the browser and the phone move apart.
   Desktop only, driven by the scroll itself (no JS). Only the separate translate property moves, so the pointer
   tilt keeps transform and the rise-in animation on .hero-stage is untouched. Without scroll-driven animations
   or with reduced motion the hero stays static.
   From 1300 px ±12 px sideways; below that the content fills almost the whole window, so only ±6 px keeps the
   phone away from the screen edge. Vertically ±8 px everywhere. */
@supports (animation-timeline: scroll()) and (animation-range: 0px 1px) {
  @media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
    .mock-browser, .mock-phone { animation: stage-spread linear both; animation-timeline: scroll(root block); animation-range: 32px 320px; }
    .mock-browser { --spread-x: -12px; --spread-y: -8px; }
    .mock-phone { --spread-x: 12px; --spread-y: 8px; }
  }
  @media (min-width: 961px) and (width < 1300px) and (prefers-reduced-motion: no-preference) {
    .mock-browser { --spread-x: -6px; }
    .mock-phone { --spread-x: 6px; }
  }
}
@keyframes stage-spread { to { translate: var(--spread-x) var(--spread-y); } }