/* ZULF prototype · night, chalk and one emerald signal */
:root {
  color-scheme: dark;
  --night: #000000;
  --ink: #0a0a0b;
  --graphite: #141416;
  --line: rgba(236, 234, 228, 0.1);
  --chalk: #eceae4;
  --haze: #8d9096;
  --emerald: #1fcc84;
  --emerald-deep: #12844f;
  --frost: #dfe4e8;        /* frosted grey: light band ground */
  --frost-2: #c9d0d6;      /* frost borders and tracks */
  --frost-ink: #0d1216;    /* text on frost */
  --frost-mute: #4a545c;   /* secondary text on frost (7:1) */
  --glass: rgba(214, 222, 228, .07);
  --noise: 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 0.05 0 0 0 0 0.07 0 0 0 0 0.09 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --glass-line: rgba(214, 222, 228, .16);

  --gutter: 16px;
  --max: 1320px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (min-width: 720px) { :root { --gutter: 40px; } }
@media (min-width: 1100px) { :root { --gutter: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--night);
  color: var(--chalk);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
::selection { background: var(--emerald); color: var(--night); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 12px; z-index: 100; background: var(--chalk); color: var(--night); padding: 8px 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* Type */
.h2 {
  margin: 0 0 32px;
  font-size: clamp(40px, 6vw, 92px);
  line-height: .95;
  font-weight: 760;
  font-stretch: 112%;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.h3 { margin: 0 0 10px; font-size: clamp(22px, 2vw, 28px); line-height: 1.12; font-weight: 650; letter-spacing: -.015em; }
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--chalk); max-width: 34ch; }
p { margin: 0 0 16px; color: #c9c8c3; max-width: 62ch; }
.em { color: var(--emerald); }
.link { text-decoration: underline; text-decoration-color: var(--emerald); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link:hover { color: var(--emerald); }

/* Wordmark (traced SVG injected by JS; falls back to text) */
.wordmark { display: block; width: 100%; line-height: 0; }
.wordmark svg { width: 100%; height: auto; display: block; }
.wordmark:empty::before { content: "ZULF"; font: 900 1em/1 var(--font); font-stretch: 125%; letter-spacing: -.04em; line-height: 1; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 4px; border: 1px solid transparent;
  font: 560 15px/1 var(--font); text-decoration: none; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn--primary { background: var(--emerald); color: var(--night); }
.btn--primary:hover { background: var(--chalk); }
.btn--ghost { border-color: rgba(236, 234, 228, .28); color: var(--chalk); }
.btn--ghost:hover { border-color: var(--chalk); }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }

/* Nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 18px var(--gutter);
  transition: background-color .4s var(--ease), padding .4s var(--ease);
}
.nav.is-solid { background: rgba(0, 0, 0, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-block: 12px; border-bottom: 1px solid var(--line); }
.nav__brand { width: 92px; color: var(--chalk); font-size: 26px; }
.nav__links { display: none; gap: 28px; margin-left: auto; }
.nav__links a { font-size: 15px; text-decoration: none; color: var(--haze); transition: color .3s var(--ease); }
.nav__links a:hover { color: var(--chalk); }
.nav__cta { margin-left: auto; padding: 11px 16px; font-size: 14px; }
@media (min-width: 900px) { .nav__links { display: flex; } .nav__cta { margin-left: 12px; } }

/* 1. Hero: the blade weaves through the wordmark.
   Back word -> black sword matte (hides letters behind the blade) -> sword video (screen) -> front word clipped to "L". */
.hero {
  --word-top: clamp(92px, 13vh, 150px);
  position: relative; min-height: 100svh; display: grid; align-items: end; overflow: clip; isolation: isolate;
  padding: calc(var(--word-top) + (100vw - 2 * var(--gutter)) * 0.3 + 28px) var(--gutter) 56px;
}
.hero__word { position: absolute; z-index: 0; left: var(--gutter); right: var(--gutter); top: var(--word-top); color: var(--chalk); }
.hero__word--front { z-index: 3; clip-path: inset(-12% 26.2% -12% 53.7%); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .75)) drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.hero__word--f { clip-path: inset(-30% -2% -30% 76.1%); }
.hero__blade { position: absolute; right: 3vw; top: calc(var(--word-top) - 4vw); width: 66vw; aspect-ratio: 1928 / 1076; pointer-events: none; }
.hero__matte, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__matte { z-index: 1; filter: blur(3px) drop-shadow(0 0 10px rgba(0, 0, 0, .95)) drop-shadow(0 8px 22px rgba(0, 0, 0, .7)); }
.hero__video { z-index: 2; object-fit: contain; mix-blend-mode: screen; max-width: none; }
/* Floating glass objects (cut from the floating-objects render; screen-blended so black disappears) */
.float {
  position: absolute; z-index: 0; pointer-events: none; height: auto; max-width: none;
  mix-blend-mode: screen; will-change: transform;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.float--hero-sphere { width: clamp(60px, 6vw, 110px); left: 46%; bottom: 8%; opacity: .9; }
.float--hero-orb { width: clamp(46px, 4.5vw, 80px); right: 12%; bottom: 26%; z-index: 4; }
.float--edges-cube { width: clamp(90px, 11vw, 190px); right: 7%; top: 70px; rotate: 8deg; }
.float--edges-torus { width: clamp(110px, 12vw, 210px); left: 46%; bottom: 120px; opacity: .85; }
.float--studio-ring { width: clamp(120px, 13vw, 230px); left: 44%; top: 14%; rotate: -14deg; opacity: .9; }
.float--start-shard { width: clamp(90px, 10vw, 180px); right: 4%; top: 40px; rotate: -6deg; }
.edges, .studio, .start { position: relative; }
.edges > .wrap, .studio > .wrap, .start > .wrap { position: relative; z-index: 1; }
@media (max-width: 719px) { .float--desk { display: none; } .float--hero-orb { display: none; } .float--start-shard { top: 16px; } }
.hero__copy { position: relative; z-index: 4; max-width: 1200px; }
.hero__title {
  margin: 0 0 20px;
  font-size: clamp(36px, 3.9vw, 64px); line-height: .98;
  font-weight: 800; font-stretch: 115%; letter-spacing: -.04em; text-wrap: balance;
}
.hero__lead { font-size: clamp(17px, 1.4vw, 20px); color: #cfcdc7; max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__meta { position: absolute; z-index: 4; right: var(--gutter); bottom: 56px; display: none; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; color: var(--haze); font-size: 13px; letter-spacing: .02em; }
@media (min-width: 1000px) { .hero__meta { display: flex; } }
@media (max-width: 719px) {
  .hero { align-items: end; padding-bottom: 40px; }
  .hero { --word-top: 104px; min-height: auto; padding-top: calc(var(--word-top) + 52vw); }
  .hero__blade { width: 118vw; right: -10vw; top: calc(var(--word-top) - 16vw); }
}

/* 2. Edges */
.edges { padding: clamp(96px, 14vw, 200px) 0 clamp(64px, 8vw, 120px); }
.edges__grid { display: grid; gap: 40px; align-items: center; }
.edge__label { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--haze); }
.edge__label--em { color: var(--emerald); }
.edge__list { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }
.edge__list li { padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.edges__media { margin: 0; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; }
.edges__note { margin-top: 64px; font-size: clamp(18px, 1.5vw, 21px); color: var(--chalk); max-width: 46ch; }
@media (min-width: 1000px) {
  .edges__grid { grid-template-columns: 1fr minmax(320px, 1.15fr) 1fr; gap: 48px; }
  .edge:last-child { text-align: left; }
}

/* 3. Services */
.services { padding: clamp(80px, 10vw, 160px) 0; border-top: 1px solid var(--line); }
.services__wrap { display: grid; gap: 40px; }
.services__stage { position: relative; aspect-ratio: 4 / 3; margin-top: 8px; }
.services__list { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.service { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 32px 0; border-top: 1px solid var(--line); transition: opacity .5s var(--ease); }
.service:last-child { border-bottom: 1px solid var(--line); }
.service__n { font-size: 14px; font-weight: 600; color: var(--haze); padding-top: 8px; transition: color .4s var(--ease); }
.service.is-active .service__n { color: var(--emerald); }
.service .h3 { font-size: clamp(26px, 2.6vw, 38px); }
@media (min-width: 1000px) {
  .services__wrap { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .services__head { position: sticky; top: 100px; }
  .service { padding: 48px 0; }
  .service .h3, .service p { color: var(--haze); transition: color .5s var(--ease); }
  .service.is-active .h3 { color: var(--chalk); }
  .service.is-active p { color: #c9c8c3; }
}

/* 5. Process */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.step { border-top: 1px solid var(--line); padding-top: 20px; }
.step__n { display: block; font-size: 14px; font-weight: 600; color: var(--emerald); margin-bottom: 18px; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* 6. Studio */
.studio { padding: clamp(80px, 10vw, 160px) 0; border-top: 1px solid var(--line); overflow: clip; }
.studio__grid { display: grid; gap: 40px; align-items: center; }
.facts { margin: 32px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 120px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--haze); font-size: 14px; }
.facts dd { margin: 0; font-weight: 550; }
.studio__media { margin: 0; }
.studio__media img { width: 100%; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(closest-side, #000 75%, transparent 100%); mask-image: radial-gradient(closest-side, #000 75%, transparent 100%); }
@media (min-width: 1000px) { .studio__grid { grid-template-columns: 1fr 1.1fr; gap: 72px; } }

/* 7. Start */
.start { padding: clamp(80px, 10vw, 160px) 0; border-top: 1px solid var(--line); background: radial-gradient(60% 50% at 80% 100%, rgba(31, 204, 132, .09), transparent 70%); }
.start__grid { display: grid; gap: 40px; }
.start__alt { color: var(--haze); }
@media (min-width: 1000px) { .start__grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } }
.form { display: grid; gap: 18px; padding: clamp(24px, 3vw, 40px); background: linear-gradient(rgba(10, 10, 11, .62), rgba(10, 10, 11, .62)), url("assets/img/glass-panel.webp") center / cover no-repeat; border: 1px solid var(--line); border-radius: 4px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 550; color: var(--chalk); }
.field input, .field textarea {
  width: 100%; padding: 13px 14px; border-radius: 4px; border: 1px solid rgba(236, 234, 228, .14);
  background: rgba(0, 0, 0, .55); color: var(--chalk); font: 400 16px/1.4 var(--font); resize: vertical;
  transition: border-color .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #6c6f74; }
.field input:hover, .field textarea:hover { border-color: rgba(236, 234, 228, .3); }
.field input[aria-invalid="true"] { border-color: #ff6b6b; }
.form .btn { justify-self: start; }
.form__msg { margin: 0; min-height: 1.6em; font-size: 15px; color: var(--emerald); }
.form__msg.is-error { color: #ff8a8a; }

/* Footer */
.footer { padding: clamp(64px, 8vw, 120px) 0 32px; border-top: 1px solid var(--line); }
.footer__origin { color: var(--haze); max-width: 52ch; }
.footer__word { margin: clamp(32px, 6vw, 80px) 0; color: var(--emerald); filter: drop-shadow(0 0 2px rgba(120, 255, 190, .9)) drop-shadow(0 0 18px rgba(31, 204, 132, .7)) drop-shadow(0 0 60px rgba(31, 204, 132, .45)); animation: glow 4s ease-in-out infinite alternate; font-size: 24vw; }
.footer__row { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; color: var(--haze); font-size: 14px; }

/* Reveal motion: transform and opacity only */
.reveal { opacity: 1; translate: 0 18px; transition: translate .9s var(--ease); }
.reveal.is-in { translate: 0 0; }
.no-js .reveal { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; translate: none; transition: none; }
  .stage, .bub { transition: none; }
  [data-parallax], [data-slide] { transform: none !important; }
}

[hidden] { display: none !important; }

/* ---------- v3: frost band, estimator, consultation card ---------- */
.eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald); }

/* Savings estimator on a frosted light band */
.worth { background: var(--noise), radial-gradient(80% 90% at 85% 0%, #f1f4f6, transparent 60%), radial-gradient(70% 80% at 0% 100%, #b9c2c9, transparent 65%), linear-gradient(160deg, #e6eaed, #cfd6db 55%, #bfc8ce); color: var(--frost-ink); padding: clamp(80px, 10vw, 150px) 0; position: relative; overflow: clip; }
.worth::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(31, 204, 132, .16), transparent 70%); pointer-events: none; }
.worth .wrap { position: relative; }
.worth .eyebrow { color: var(--emerald-deep); }
.worth p { color: var(--frost-mute); }
.worth__head { max-width: 720px; margin-bottom: 48px; }
.worth__grid { display: grid; gap: 24px; }
@media (min-width: 1000px) { .worth__grid { grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: stretch; } }
.worth__inputs, .worth__out { border-radius: 20px; padding: clamp(22px, 3vw, 36px); }
.worth__inputs { background: rgba(255, 255, 255, .38); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 20px 50px -30px rgba(13, 18, 22, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: grid; gap: 28px; }
.slider { display: grid; gap: 14px; }
.slider__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.slider label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--frost-mute); }
.slider output { font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; font-stretch: 115%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--frost-ink); min-width: 4ch; text-align: right; line-height: 1; }
input[type="range"] { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: grab; margin: 0; }
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 99px; background: linear-gradient(90deg, var(--emerald-deep), var(--emerald) var(--p), rgba(13, 18, 22, .14) var(--p)); }
input[type="range"]::-moz-range-track { height: 2px; border-radius: 99px; background: rgba(13, 18, 22, .14); }
input[type="range"]::-moz-range-progress { height: 2px; border-radius: 99px; background: linear-gradient(90deg, var(--emerald-deep), var(--emerald)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 18px; margin-top: -8px; border-radius: 99px; background: var(--frost-ink); border: 0; box-shadow: inset 0 0 0 5px var(--frost-ink), inset 0 0 0 9px var(--emerald), 0 0 0 0 rgba(31, 204, 132, .35), 0 6px 14px -4px rgba(13, 18, 22, .5); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
input[type="range"]::-moz-range-thumb { width: 30px; height: 18px; border-radius: 99px; border: 0; background: var(--frost-ink); box-shadow: inset 0 0 0 5px var(--frost-ink), inset 0 0 0 9px var(--emerald), 0 6px 14px -4px rgba(13, 18, 22, .5); }
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 5px var(--frost-ink), inset 0 0 0 9px var(--emerald), 0 0 0 8px rgba(31, 204, 132, .18), 0 6px 14px -4px rgba(13, 18, 22, .5); }
input[type="range"]:active::-webkit-slider-thumb { transform: scaleX(1.25); }
input[type="range"]:focus-visible { outline: none; }
.worth__out { background: var(--frost-ink); color: var(--chalk); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-content: start; }
.stat { display: grid; gap: 6px; padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.stat--big { grid-column: 1 / -1; }
.stat__label { font-size: 13px; color: var(--haze); }
.stat__num { font-size: clamp(26px, 3vw, 38px); font-weight: 760; font-stretch: 110%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.stat--big .stat__num { font-size: clamp(56px, 7vw, 104px); color: var(--emerald); }
.stat--em .stat__num { color: var(--emerald); }
.worth__out .btn { grid-column: 1 / -1; margin-top: 6px; }
.btn--dark { background: var(--frost); color: var(--frost-ink); border-radius: 12px; }
.btn--dark:hover { background: #fff; }
.worth__note { margin-top: 24px; font-size: 14px; max-width: 80ch; }
@media (max-width: 600px) { .worth__out { grid-template-columns: 1fr; } }
.stat .stat__num { font-size: clamp(24px, 2.4vw, 34px); }
.stat--big .stat__num { font-size: clamp(56px, 7vw, 104px); }

/* Consultation card: rounded frosted glass, floating labels */
.book { position: relative; border-radius: 24px; padding: clamp(24px, 3.4vw, 44px); background: linear-gradient(rgba(16, 20, 24, .6), rgba(16, 20, 24, .6)), url("assets/img/glass-panel.webp") center / cover no-repeat; border: 1px solid var(--glass-line); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: border-color .4s var(--ease); }
.book:focus-within { border-color: rgba(31, 204, 132, .45); }
.book__form { display: grid; gap: 16px; }
.book__step { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--emerald); }
.fl { position: relative; }
.fl input { width: 100%; height: 62px; padding: 24px 46px 8px 18px; border-radius: 14px; border: 1px solid var(--glass-line); background: rgba(0, 0, 0, .45); color: var(--chalk); font: 400 17px/1.2 var(--font); transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); }
.fl input:hover { border-color: rgba(214, 222, 228, .32); }
.fl input:focus { outline: none; border-color: var(--emerald); background: rgba(0, 0, 0, .6); box-shadow: 0 0 0 4px rgba(31, 204, 132, .16); }
.fl label { position: absolute; left: 19px; top: 21px; font-size: 16px; color: #9aa3aa; pointer-events: none; transform-origin: left top; transition: transform .25s var(--ease), color .25s var(--ease); }
.fl input:focus + label, .fl input:not(:placeholder-shown) + label { transform: translateY(-12px) scale(.78); color: var(--chalk); }
.fl::after { content: ""; position: absolute; right: 18px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; border-radius: 50%; background: var(--emerald) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; scale: 0; transition: scale .3s var(--ease); }
.fl.is-valid::after { scale: 1; }
.fl input[aria-invalid="true"] { border-color: #ff7a7a; box-shadow: 0 0 0 4px rgba(255, 122, 122, .14); }
.book .form__msg { margin: 0; min-height: 0; font-size: 14px; }
.book .form__msg:empty { display: none; }
.btn--arrow { justify-content: space-between; width: 100%; border-radius: 14px; height: 58px; font-size: 16px; }
.btn--arrow span { transition: translate .3s var(--ease); }
.btn--arrow:hover span { translate: 4px 0; }
.book__fine { margin: 0; font-size: 13px; color: var(--haze); text-align: center; }
.book.is-shake { animation: shake .4s var(--ease); }
@keyframes shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.book__done { display: grid; justify-items: start; gap: 10px; padding: 8px 0; }
.book__tick { width: 56px; height: 56px; margin-bottom: 6px; }
.book__tick circle { fill: none; stroke: var(--emerald); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .6s var(--ease) forwards; }
.book__tick path { fill: none; stroke: var(--emerald); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: draw .4s .45s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .book.is-shake { animation: none; } .book__tick circle, .book__tick path { animation: none; stroke-dashoffset: 0; } }

/* Frost touches elsewhere */
.btn { border-radius: 10px; }

/* Sample-work scenes: MacBook + iPhone mockups of invented brands, built in HTML/CSS.
   Scenes tilt toward the pointer (--rx/--ry) and drift with scroll (--sp); glass objects sit in front of and behind the devices. */
.scene { position: relative; container-type: inline-size; perspective: 1600px; }
.scene__in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.scene__cap { position: absolute; left: 0; bottom: -4px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--haze); }
.edges__media.scene { aspect-ratio: 1 / .86; max-width: 760px; }
@media (min-width: 1000px) { .edges__grid { grid-template-columns: 1fr minmax(380px, 1.7fr) 1fr; gap: 40px; } }

/* MacBook (space black) */
.mac { position: absolute; left: 0; top: 6%; width: 84%; translate: 0 calc(var(--sp, 0) * 14px); filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .85)); }
.mac__lid { position: relative; padding: 1.7cqw 1.7cqw 2.2cqw; border-radius: 2.6cqw 2.6cqw .6cqw .6cqw; background: #0a0a0b; box-shadow: 0 0 0 .25cqw #2e3034, 0 0 0 .4cqw #121315, inset 0 0 0 .1cqw #26282c; }
.mac__lid::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 1.7cqw; translate: -50% 0; width: 9%; height: 1.5cqw; border-radius: 0 0 .8cqw .8cqw; background: #0a0a0b; }
.mac__screen { position: relative; container-type: inline-size; aspect-ratio: 16 / 10; border-radius: .6cqw; overflow: clip; background: #111; }
.mac__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 38%); }
.mac__base { position: relative; height: 2.2cqw; margin: 0 -7%; border-radius: .3cqw .3cqw 2.6cqw 2.6cqw / .3cqw .3cqw 1.6cqw 1.6cqw; background: linear-gradient(#5a5d63, #2c2e32 35%, #18191c); box-shadow: inset 0 .15cqw 0 rgba(255, 255, 255, .25); }
.mac__base::before { content: ""; position: absolute; left: 50%; top: 0; translate: -50% 0; width: 15%; height: 45%; border-radius: 0 0 1.2cqw 1.2cqw; background: linear-gradient(#26282b, #3a3d42); }

/* iPhone (natural titanium) */
.iphone { position: absolute; right: 2%; bottom: 3%; width: 26%; aspect-ratio: 9 / 19.3; padding: .9cqw; border-radius: 4.6cqw; background: linear-gradient(140deg, #8d9197, #3b3e43 22%, #1c1d20 55%, #6a6e74); box-shadow: 0 0 0 .12cqw #9da1a6 inset, 0 50px 60px -18px rgba(0, 0, 0, .95); translate: 0 calc(var(--sp, 0) * -46px); transform: translateZ(60px); }
.iphone::before, .iphone::after { content: ""; position: absolute; width: .45cqw; border-radius: .3cqw; background: #4a4d52; }
.iphone::before { right: -.35cqw; top: 26%; height: 11%; }
.iphone::after { left: -.35cqw; top: 20%; height: 7%; box-shadow: 0 5.5cqw 0 #4a4d52; }
.iphone__screen { position: relative; height: 100%; border-radius: 3.8cqw; overflow: clip; background: var(--frost); container-type: inline-size; box-shadow: 0 0 0 .6cqw #000; }
.iphone__screen::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 3.4cqw; translate: -50% 0; width: 30cqw; height: 8.6cqw; border-radius: 9cqw; background: #000; }
.iphone__screen::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 34%); }
.iphone--hero { width: 31%; right: auto; left: 8%; bottom: 2%; }

/* Glass objects around the devices */
.obj { position: absolute; pointer-events: none; translate: 0 calc(var(--sp, 0) * -60px * var(--d, 1)); }
.obj--back { z-index: 0; transform: translateZ(-80px); }
.obj--front { z-index: 5; transform: translateZ(120px); }
.mac { z-index: 1; } .iphone { z-index: 2; } .proof { z-index: 4; }
.obj--e1 { width: 30%; right: 4%; top: -6%; }
.obj--e2 { width: 9%; right: 23%; top: 34%; }
.obj--e3 { width: 15%; left: -5%; bottom: 0; rotate: -10deg; }
.obj--s0 { width: 34%; right: -4%; top: -8%; }
.obj--s1 { width: 30%; left: -6%; top: -8%; }
.obj--s1b { width: 9%; right: 26%; bottom: 46%; }
.obj--s2 { width: 18%; right: 20%; top: 2%; rotate: 8deg; }
.obj--s3 { width: 30%; right: -2%; bottom: -6%; }
.obj--s4 { width: 22%; left: -4%; bottom: -2%; rotate: 10deg; }

/* Screen pages: sized in cqw of the screen */
.pg { position: absolute; inset: 0; font-size: 2.2cqw; line-height: 1.3; overflow: clip; }
.pg p, .ycm p, .chat p, .call p, .reel p { max-width: none; }
.autoscroll { bottom: auto; animation: autoscroll 16s var(--ease) infinite alternate; }
.scene:hover .autoscroll { animation-play-state: paused; }
@keyframes autoscroll { 0%, 12% { translate: 0 0; } 88%, 100% { translate: 0 calc(-100% + 62.5cqw); } }
/* Chat */
.chat { display: flex; flex-direction: column; gap: 3cqw; height: 100%; padding: 17cqw 5cqw 6cqw; font-size: 6cqw; line-height: 1.3; color: var(--frost-ink); }
.chat__top { display: flex; align-items: center; gap: 3cqw; padding-bottom: 4cqw; margin-bottom: 1cqw; border-bottom: 1px solid var(--frost-2); }
.chat__top span:last-child { display: grid; }
.chat__top b { font-size: 6.6cqw; }
.chat__top small { font-size: 5cqw; color: var(--emerald-deep); }
.chat__av { display: grid; place-items: center; width: 13cqw; height: 13cqw; border-radius: 50%; background: var(--frost-ink); color: var(--emerald); font-weight: 800; }
.bub { margin: 0; max-width: 84%; padding: 3cqw 4.4cqw; border-radius: 6cqw; transition: opacity .4s var(--ease), translate .4s var(--ease); }
.bub.is-hidden { opacity: 0; translate: 0 3cqw; }
.bub--in { align-self: flex-end; background: var(--frost-ink); color: var(--chalk); border-bottom-right-radius: 1.6cqw; }
.bub--out { align-self: flex-start; background: #fff; color: var(--frost-ink); border-bottom-left-radius: 1.6cqw; box-shadow: 0 1px 2px rgba(13, 18, 22, .08); }
.bub--ok { background: #d2f5e5; }
.bub--typing { display: flex; gap: 1.6cqw; padding: 4cqw 5cqw; }
.bub--typing i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--frost-mute); animation: dot 1.2s infinite ease-in-out; }
.bub--typing i:nth-child(2) { animation-delay: .15s; } .bub--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; translate: 0 0; } 30% { opacity: 1; translate: 0 -1cqw; } }

/* Services stage */
.services__stage { aspect-ratio: 4 / 3.3; }
.stage { position: absolute; inset: 0; opacity: 0; scale: .96; transition: opacity .6s var(--ease), scale .9s var(--ease); pointer-events: none; transform-style: preserve-3d; }
.stage.is-active { opacity: 1; scale: 1; }

/* Content: reel + editor */
.reel { position: absolute; inset: 0; background: #000; }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel__ui { position: absolute; inset: auto 0 0; display: grid; gap: 4cqw; padding: 8cqw 7cqw; color: #fff; font-size: 5.4cqw; line-height: 1.3; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.reel__ui p { margin: 0; color: #fff; }
.reel__ui b { display: block; font-size: 6.4cqw; }
.reel__bar { height: 1.2cqw; border-radius: 9px; background: rgba(255, 255, 255, .3); overflow: clip; }
.reel__bar i { display: block; height: 100%; background: var(--emerald); animation: play 9s linear infinite; }
@keyframes play { from { width: 0; } to { width: 100%; } }
.stage--content .mac { left: auto; right: 0; top: 2%; width: 74%; }
.proof { position: absolute; right: 6%; bottom: 8%; display: grid; padding: 3cqw 4cqw; border-radius: 3cqw; background: rgba(13, 18, 22, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--glass-line); transform: translateZ(140px); translate: 0 calc(var(--sp, 0) * -70px); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .9); }
.proof b { font-size: 9cqw; line-height: 1; font-weight: 800; font-stretch: 115%; letter-spacing: -.04em; color: var(--emerald); }
.proof span { font-size: 2.4cqw; color: var(--chalk); }

/* AI: dashboard + call */
.pg--dash { display: grid; grid-template-columns: 18cqw 1fr; background: var(--frost); color: var(--frost-ink); }
.db__side { display: grid; align-content: start; gap: 2cqw; padding: 4cqw 3cqw; background: var(--frost-ink); color: var(--haze); }
.db__side b { margin-bottom: 2cqw; color: var(--chalk); }
.db__side .is-on { color: var(--emerald); }
.db__main { display: grid; align-content: start; gap: 2.4cqw; padding: 3cqw; }
.db__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.db__stats div { display: grid; padding: 2cqw; border-radius: 1.6cqw; background: #fff; }
.db__stats small { font-size: 1.7cqw; color: var(--frost-mute); }
.db__stats b { font-size: 5cqw; line-height: 1.1; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4cqw; }
.flow li { display: grid; grid-template-columns: 4.4cqw 1fr; align-items: center; gap: 2cqw; padding: 1.6cqw 2cqw; border-radius: 1.4cqw; background: #fff; font-size: 2cqw; line-height: 1.25; }
.flow li > span { display: grid; place-items: center; width: 4.4cqw; aspect-ratio: 1; border-radius: 50%; background: var(--frost-2); font-weight: 700; color: var(--frost-mute); animation: lit 4.8s infinite; }
.flow li div { display: grid; }
.flow small { color: var(--frost-mute); font-size: 1.7cqw; }
.flow li:nth-child(2) > span { animation-delay: 1.2s; } .flow li:nth-child(3) > span { animation-delay: 2.4s; } .flow li:nth-child(4) > span { animation-delay: 3.6s; }
@keyframes lit { 0%, 22% { background: var(--emerald); color: var(--frost-ink); } 30%, 100% { background: var(--frost-2); color: var(--frost-mute); } }
.call { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4cqw; padding: 22cqw 6cqw 10cqw; background: radial-gradient(90% 50% at 50% 20%, #12844f, #0d1216 70%); color: var(--chalk); font-size: 5.4cqw; text-align: center; }
.call small { color: var(--emerald); letter-spacing: .1em; text-transform: uppercase; font-size: 4.4cqw; }
.call__wave { display: flex; align-items: center; gap: 2cqw; height: 18cqw; margin: 2cqw 0; }
.call__wave i { width: 3cqw; height: 100%; border-radius: 3cqw; background: var(--emerald); animation: wave 1s ease-in-out infinite alternate; transform-origin: center; }
.call__wave i:nth-child(2n) { animation-duration: .7s; } .call__wave i:nth-child(3n) { animation-duration: 1.3s; } .call__wave i:nth-child(4n) { animation-delay: .2s; }
@keyframes wave { from { scale: 1 .2; } to { scale: 1 1; } }
.call__t { margin: 0; align-self: stretch; padding: 3cqw 4cqw; border-radius: 4cqw; background: rgba(255, 255, 255, .08); color: var(--chalk); text-align: left; font-size: 5cqw; }
.call__t span { display: block; font-size: 4cqw; color: var(--haze); }
.call__t--ai { background: rgba(31, 204, 132, .16); }
.call__end { margin-top: auto; width: 16cqw; aspect-ratio: 1; border-radius: 50%; background: #e2502e; }

@media (max-width: 999px) {
  .scene__cap { display: none; }
  /* phones and tablets: keep the mockup pinned while the list scrolls beneath it */
  .services__head { position: sticky; top: 56px; z-index: 3; padding-bottom: 24px; background: linear-gradient(var(--night) 85%, transparent); }
  .services__head .h2 { margin-bottom: 8px; }
  .services__stage { max-width: 520px; }
}
@media (prefers-reduced-motion: reduce) { .autoscroll, .ic--heart, .footer__word, .reel__bar i, .flow li > span, .call__wave i { animation: none !important; } .scene__in { transform: none; } }

@keyframes glow { to { filter: drop-shadow(0 0 2px rgba(120, 255, 190, .9)) drop-shadow(0 0 26px rgba(31, 204, 132, .85)) drop-shadow(0 0 90px rgba(31, 204, 132, .55)); } }

/* Sample brand: "Your Company", in ZULF colours */
.pg--yc { background: #050607; color: var(--chalk); }
.yc__nav { display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw 4cqw; color: var(--haze); }
.yc__nav b { margin-right: auto; color: var(--chalk); font-weight: 800; font-stretch: 115%; letter-spacing: -.02em; font-size: 2.6cqw; }
.yc__pill { padding: 1cqw 2.4cqw; border-radius: 99px; background: var(--emerald); color: #000; font-weight: 700; }
.yc__pill--ink { background: #000; color: var(--emerald); }
.yc__hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2cqw; align-items: center; padding: 3cqw 4cqw 4cqw; }
.yc__hero img { width: 100%; border-radius: 3cqw; }
.yc__kick { margin: 0 0 1.6cqw; font-size: 1.8cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald); }
.yc__h { margin: 0; font-size: 5.6cqw; line-height: 1; font-weight: 800; font-stretch: 115%; letter-spacing: -.04em; color: var(--chalk); }
.yc__sub { margin: 2cqw 0 3cqw; color: var(--haze); font-size: 2cqw; }
.yc__btn { display: inline-block; margin-right: 1.4cqw; padding: 1.3cqw 2.8cqw; border-radius: 1.2cqw; background: var(--emerald); color: #000; font-weight: 700; }
.yc__btn--ghost { background: transparent; color: var(--chalk); box-shadow: inset 0 0 0 1px rgba(236, 234, 228, .3); }
.yc__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding: 0 4cqw 4cqw; }
.yc__cards div { display: grid; gap: 1cqw; padding: 3cqw; border-radius: 2cqw; background: var(--noise), linear-gradient(160deg, #e6eaed, #c9d0d6); color: var(--frost-ink); }
.yc__cards span { color: var(--frost-mute); }
.yc__rev { margin: 0 4cqw 4cqw; padding: 4cqw; border-radius: 2cqw; border: 1px solid var(--line); }
.yc__stars { color: var(--emerald); letter-spacing: .2em; }
.yc__rev p { margin: 1cqw 0 0; font-size: 3.2cqw; font-weight: 700; letter-spacing: -.02em; color: var(--chalk); }
.yc__cta { display: flex; justify-content: space-between; align-items: center; padding: 5cqw 4cqw; background: var(--emerald); color: #000; }
.yc__cta b { font-size: 3.4cqw; font-weight: 800; font-stretch: 115%; letter-spacing: -.03em; }
.autoscroll--slow { animation-duration: 20s; }
.ycm { height: 100%; padding: 15cqw 6cqw 6cqw; background: #050607; color: var(--chalk); display: grid; align-content: start; gap: 4cqw; font-size: 5cqw; }
.ycm__nav { display: flex; justify-content: space-between; align-items: center; }
.ycm__nav b { font-weight: 800; font-stretch: 115%; font-size: 6cqw; }
.ycm__nav i { width: 8cqw; height: 4cqw; border-block: .8cqw solid var(--chalk); }
.ycm img { width: 100%; border-radius: 5cqw; }
.ycm .yc__kick { margin: 0; font-size: 4cqw; }
.ycm__h { margin: 0; font-size: 10cqw; line-height: 1; font-weight: 800; font-stretch: 115%; letter-spacing: -.04em; color: var(--chalk); }
.ycm .yc__btn { justify-self: start; padding: 3cqw 6cqw; border-radius: 3cqw; }
.ycm__card { display: grid; padding: 5cqw; border-radius: 4cqw; background: var(--noise), linear-gradient(160deg, #e6eaed, #c9d0d6); color: var(--frost-ink); }
.ycm__card span { color: var(--frost-mute); }

/* Instagram: desktop profile + reel */
.pg--ig { background: #000; color: var(--chalk); padding: 4cqw 8cqw; font-size: 2cqw; }
.igd__head { display: flex; align-items: center; gap: 5cqw; padding-bottom: 3cqw; }
.igd__av { display: grid; place-items: center; flex: none; width: 13cqw; aspect-ratio: 1; border-radius: 50%; background: #000; color: var(--emerald); font-weight: 800; font-size: 5cqw; box-shadow: 0 0 0 .4cqw #000, 0 0 0 .8cqw var(--emerald); }
.igd__head div { display: grid; gap: .8cqw; }
.igd__head div > b { font-size: 2.8cqw; }
.igd__head small { color: var(--haze); font-size: 1.8cqw; }
.igd__tabs { display: flex; justify-content: center; gap: 6cqw; padding: 1.6cqw 0; border-top: 1px solid var(--line); color: var(--haze); font-size: 1.6cqw; letter-spacing: .12em; text-transform: uppercase; }
.igd__tabs .is-on { color: var(--chalk); }
.igd__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5cqw; }
.igd__cell { aspect-ratio: 4 / 5; overflow: clip; background: #0b0d0f; }
.igd__cell img, .igd__cell video { width: 100%; height: 100%; object-fit: cover; }
.reel__side { position: absolute; right: 4cqw; bottom: 30cqw; z-index: 2; display: grid; justify-items: center; gap: 1.6cqw; color: #fff; font-size: 4cqw; }
.ic { display: block; width: 9cqw; aspect-ratio: 1; background: #fff; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic--heart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z'/%3E%3C/svg%3E"); background: var(--emerald); animation: beat 2.4s ease-in-out infinite; }
.ic--chat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0-7.8 13.5L3 21l4.6-1.2A9 9 0 1 0 12 3z'/%3E%3C/svg%3E"); }
.ic--send { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11 21 3l-8 18-2-8z'/%3E%3C/svg%3E"); }
@keyframes beat { 0%, 70%, 100% { scale: 1; } 80% { scale: 1.25; } }

/* Straight answers */
.answers { padding: clamp(80px, 10vw, 160px) 0; border-top: 1px solid var(--line); }
.answers__grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .answers__grid { grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: start; } .answers__head { position: sticky; top: 120px; } }
.answers__list { display: grid; gap: 12px; }
.qa { border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-line); transition: background .3s var(--ease), border-color .3s var(--ease); }
.qa[open] { background: rgba(214, 222, 228, .1); border-color: rgba(31, 204, 132, .4); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; cursor: pointer; font-size: clamp(18px, 1.5vw, 21px); font-weight: 650; letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(var(--chalk), var(--chalk)) center / 12px 2px no-repeat, linear-gradient(var(--chalk), var(--chalk)) center / 2px 12px no-repeat; box-shadow: inset 0 0 0 1px var(--glass-line); transition: rotate .3s var(--ease), background-color .3s; }
.qa[open] summary::after { rotate: 45deg; background-color: var(--emerald); background-image: linear-gradient(#000, #000), linear-gradient(#000, #000); box-shadow: none; }
.qa summary:focus-visible { outline: 2px solid var(--emerald); outline-offset: -2px; border-radius: 18px; }
.qa p { margin: 0; padding: 0 24px 24px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn:disabled { opacity: .6; cursor: progress; }

/* Booking success: emerald burst, glowing tick, next steps */
.book { position: relative; }
.book__burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.book.is-done { animation: bookglow 1.6s var(--ease); }
@keyframes bookglow { 0% { box-shadow: 0 0 0 0 rgba(31, 204, 132, .55); border-color: var(--emerald); } 100% { box-shadow: 0 0 0 28px rgba(31, 204, 132, 0); } }
.book__tick { overflow: visible; filter: drop-shadow(0 0 10px rgba(31, 204, 132, .7)); animation: tickpop .7s var(--ease); }
@keyframes tickpop { 0% { scale: .4; } 60% { scale: 1.15; } 100% { scale: 1; } }
.book__done .h3 { font-size: clamp(26px, 2.6vw, 34px); }
.next { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: n; width: 100%; }
.next li { display: grid; grid-template-columns: 30px 1fr; gap: 2px 12px; padding: 14px 16px; border-radius: 14px; background: rgba(31, 204, 132, .07); border: 1px solid rgba(31, 204, 132, .22); opacity: 0; translate: 0 10px; animation: nextin .6s var(--ease) forwards; }
.next li:nth-child(1) { animation-delay: .7s; } .next li:nth-child(2) { animation-delay: .85s; } .next li:nth-child(3) { animation-delay: 1s; }
.next li::before { counter-increment: n; content: counter(n); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--emerald); color: #000; font-weight: 800; font-size: 14px; }
.next b { color: var(--chalk); } .next span { color: var(--haze); font-size: 15px; }
@keyframes nextin { to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .book.is-done, .book__tick { animation: none; } .next li { animation: none; opacity: 1; translate: 0 0; } }
.hero__proof { color: var(--emerald); font-weight: 600; }

.hero__title .em, .hero__line { display: block; }
.hero__line { text-wrap: pretty; }
.hero__em { color: var(--emerald); font-weight: 600; }

/* Loading screen: holds the page for a moment so the hero video is buffered before it shows. */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 22px; background: #000; transition: opacity .6s var(--ease), visibility 0s linear .6s; animation: loaderFailsafe 0s linear 5s forwards; }
.loader__mark { width: clamp(120px, 18vw, 180px); color: var(--chalk); }
.loader__mark svg { display: block; width: 100%; height: auto; }
.loader__bar { position: relative; width: clamp(120px, 18vw, 180px); height: 2px; border-radius: 2px; background: rgba(236, 234, 228, .12); overflow: hidden; }
.loader__bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, .08)); background: var(--emerald); box-shadow: 0 0 12px var(--emerald); transition: transform .35s var(--ease); }
.loader.is-done { opacity: 0; visibility: hidden; }
body.is-loading { overflow: hidden; }
@keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; } }

/* iOS shows its own play button when autoplay is blocked (Low Power Mode). Hide it; the poster stays until playback starts. */
video::-webkit-media-controls, video::-webkit-media-controls-start-playback-button, video::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; }