/* ═══════════════════════════════════════════════════════════════
   Bookizo — Landing
   Tokens taken verbatim from the product (src/styles.css), which in turn
   took them from goranmikac.com. Product, agency and landing read as one
   house. Do not invent new colours here.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-latin-ext.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB;
}

:root {
  /* Backgrounds */
  --bg-base: #080F20;
  --bg-surface: #0F172A;
  --bg-elevated: #111827;
  --bg-overlay: #1E293B;

  /* Accent — #2563EB carries white text at 5.17:1, the lighter #3B82F6 is
     tint only and never sits under text. */
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-hi: #3B82F6;
  --accent-soft: rgba(59, 130, 246, 0.12);
  --accent-ring: rgba(59, 130, 246, 0.46);
  --accent-glow: rgba(59, 130, 246, 0.22);
  --accent-glow-strong: rgba(59, 130, 246, 0.5);

  /* Status */
  --success: #34D399;
  --success-soft: rgba(52, 211, 153, 0.12);
  --warning: #FBBF24;

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #CBD5E1;
  --text-tertiary: #9CA3AF;
  --text-accent: #93C5FD;

  --border: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.28);

  /* Type */
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', var(--font-ui);

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* Radius */
  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms; --dur: 200ms; --dur-slow: 300ms;

  --container: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.25rem, 6vw, 3.9rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
img, video, svg { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-6); }
.section { padding-block: clamp(var(--sp-16), 9vw, var(--sp-24)); }
.section--muted { background: var(--bg-surface); border-block: 1px solid var(--border); }

.eyebrow {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-accent); margin-bottom: var(--sp-4);
}
.lede { color: var(--text-secondary); font-size: clamp(1.05rem, 2vw, 1.2rem); max-width: 62ch; }
.section-head { max-width: 44rem; margin-bottom: var(--sp-12); }
.section-head p { margin-top: var(--sp-4); }

/* ── Skip link ───────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  background: var(--accent); color: #fff; padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r); font-weight: 600; transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* ── Nav ─────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(8, 15, 32, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; gap: var(--sp-6); height: 68px; }
.nav__logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
/* The logotype, carried over from the app so the landing and the product
   show one mark: the wordmark with its final "o" drawn as a ring holding a
   check. The landing used to pair a blue rounded square with the plain word,
   which the app has never used - anyone who saw both saw two companies.
   The square SVG stays as the favicon, where a filled shape is what works. */
.bkz-logo { display: inline-flex; align-items: center; }
.bkz-o {
  display: inline-grid; place-items: center; flex: none;
  width: 0.78em; height: 0.78em; margin-left: 0.09em;
  border: 0.115em solid var(--accent-hi); border-radius: 999px;
  color: var(--accent-hi);
}
.bkz-o svg { width: 0.44em; height: 0.44em; display: block; }
.nav__links { display: none; gap: var(--sp-6); margin-left: auto; }
.nav__links a { text-decoration: none; color: var(--text-secondary); font-size: 0.95rem; font-weight: 500; padding: var(--sp-2) 0; transition: color var(--dur) var(--ease); }
.nav__links a:hover { color: var(--text-primary); }
.nav__actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.nav__lang {
  display: flex; align-items: center; gap: 2px;
  font-size: 0.82rem; color: var(--text-tertiary);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 8px 2px 10px; margin-right: var(--sp-2);
}
.nav__globe { flex: 0 0 auto; margin-right: var(--sp-2); opacity: 0.8; }
.nav__lang a {
  text-decoration: none; padding: 0 8px; border-radius: 999px;
  min-height: 34px; display: inline-flex; align-items: center; font-weight: 600;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__lang a:hover { color: var(--text-primary); background: var(--bg-overlay); }
.nav__lang [aria-current="true"] { color: var(--text-primary); background: var(--accent-soft); }
@media (min-width: 900px) { .nav__links { display: flex; } .nav__actions { margin-left: 0; } }
/* Under 620px the header CTA fights the logo for room and wraps to two lines.
   The hero CTA sits one screenful below, so the bar keeps the logo and the
   language switch and lets the hero do the asking. */
@media (max-width: 619px) {
  .nav__inner { gap: var(--sp-4); }
  .nav__actions .btn { display: none; }
  .nav__lang { gap: var(--sp-2); font-size: 0.9rem; }
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-6);
  border-radius: var(--r-lg); border: 1px solid transparent;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.btn:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 3px; }
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 0 0 1px var(--accent-hi), 0 8px 28px var(--accent-glow-strong); }
.btn--primary:hover { background: var(--accent-hover); box-shadow: 0 0 0 1px var(--accent-hi), 0 10px 34px var(--accent-glow-strong); }
.btn--ghost { background: rgba(255,255,255,0.04); color: var(--text-primary); border-color: var(--border-strong); }
.btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--accent-ring); }
.btn--lg { min-height: 54px; padding: 0 var(--sp-8); font-size: 1.05rem; }
.btn--sm { min-height: 44px; padding: 0 var(--sp-5); font-size: 0.92rem; }

/* ── Hero ────────────────────────────────────────────────────── */
/* The source videos are 9:16 and 4:5, shot for reels. Used full-bleed they
   would be cropped to a sliver on desktop, so the vertical cut sits inside a
   phone instead, where its aspect ratio is the point rather than a problem. */
.hero { position: relative; overflow: hidden; padding-block: clamp(var(--sp-16), 9vw, 116px) clamp(var(--sp-16), 8vw, var(--sp-24)); }
.hero__scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 12% 18%, rgba(37,99,235,0.30) 0%, transparent 72%),
    radial-gradient(46% 40% at 88% 8%, rgba(59,130,246,0.20) 0%, transparent 70%),
    linear-gradient(180deg, transparent 60%, var(--bg-base) 100%);
}
.hero__grid { position: relative; z-index: 2; display: grid; gap: clamp(var(--sp-12), 6vw, var(--sp-16)); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.hero__inner { max-width: 34rem; }

/* App shot — the real product UI in the visitor's own language. The frame
   follows the screenshot's natural ratio; cropping a booking grid to fit a
   phone outline would hide the one thing worth showing. */
.appshot {
  position: relative; margin-inline: auto; width: min(420px, 88vw);
  border-radius: var(--r-2xl); padding: 8px;
  background: linear-gradient(160deg, rgba(30,41,59,0.9), rgba(11,18,32,0.9));
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg), 0 0 80px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.06);
}
.appshot__screen { border-radius: 18px; overflow: hidden; background: var(--bg-base); }
.appshot__screen img, .appshot__screen video { width: 100%; height: auto; display: block; }
.appshot__halo {
  position: absolute; inset: -16% -14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 68%); filter: blur(8px);
}
.appshot__caption {
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  white-space: nowrap; font-size: 0.82rem; color: var(--text-tertiary);
}
.hero h1 { margin-bottom: var(--sp-6); text-wrap: balance; }
.hero__sub { color: var(--text-secondary); font-size: clamp(1.1rem, 2.2vw, 1.32rem); max-width: 40rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-10); }
.hero__note { margin-top: var(--sp-5); font-size: 0.92rem; color: var(--text-tertiary); }

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
  color: var(--text-accent); border-radius: 999px;
  padding: var(--sp-2) var(--sp-4); font-size: 0.85rem; font-weight: 600;
  margin-bottom: var(--sp-6);
}
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }

/* ── Pain list ───────────────────────────────────────────────── */
.pain { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; margin-top: var(--sp-10); }
@media (min-width: 760px) { .pain { grid-template-columns: repeat(3, 1fr); } }
.pain__item { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--sp-6); }
.pain__item h3 { margin-bottom: var(--sp-3); }
.pain__item p { color: var(--text-secondary); font-size: 0.98rem; }

/* ── Feature grid ────────────────────────────────────────────── */
.features { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .features { grid-template-columns: repeat(3, 1fr); } }
/* Five cards in a three-column grid leave a hole in the second row, which
   reads as something missing rather than as a decision. The last one is the
   positioning claim, not a feature, so it takes the space instead. */
@media (min-width: 1040px) { .card--wide { grid-column: span 2; } }
.card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-6);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { border-color: var(--accent-ring); transform: translateY(-3px); box-shadow: 0 10px 30px var(--accent-glow); }
.card__icon {
  width: 44px; height: 44px; border-radius: var(--r-lg);
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
  display: grid; place-items: center; margin-bottom: var(--sp-5); color: var(--text-accent);
}
.card__icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--text-secondary); font-size: 0.98rem; }

/* ── Steps ───────────────────────────────────────────────────── */
.steps { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.step { position: relative; padding-top: calc(2.4rem + var(--sp-4)); }
/* line-height must be stated: the numeral's default line box is about 1.2x
   its 2.4rem size, which is taller than the 40px of padding reserved for it,
   so the digit sat on top of the heading. */
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0; line-height: 1;
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 700;
  color: transparent; -webkit-text-stroke: 1.5px var(--accent-hi); opacity: 0.85;
}
.step h3 { margin-bottom: var(--sp-3); }
.step p { color: var(--text-secondary); font-size: 0.98rem; }

/* ── Showcase ────────────────────────────────────────────────── */
.showcase { display: grid; gap: var(--sp-10); align-items: center; grid-template-columns: 1fr; }
/* One column, picture underneath. The admin shot is now a wide strip - it
   has to be, or its own topbar clips - and a wide strip squeezed into half a
   container renders at about a third of its size, which is a screenshot
   nobody can read. Full width it is legible. */
@media (min-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: var(--sp-12); }
  .showcase > .reveal:first-child { max-width: 62ch; }
}
.showcase__frame {
  border-radius: var(--r-2xl); overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg), 0 0 60px var(--accent-glow);
  background: var(--bg-surface);
}
/* The height attribute on the markup is a presentational hint the global
   img rule does not cancel: max-width shrank the width to the column while
   height stayed at the attribute's 741px, so the frame's overflow cut the
   right edge off. The hero shot had this rule; this one never did. */
.showcase__frame img { width: 100%; height: auto; }

.checklist { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--text-secondary); }
.checklist svg { flex: none; width: 21px; height: 21px; color: var(--success); margin-top: 3px; }

/* ── Pricing ─────────────────────────────────────────────────── */
.plans { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 680px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan {
  display: flex; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--sp-6);
}
.plan--featured { border-color: var(--accent-hi); box-shadow: 0 0 0 1px var(--accent-hi), 0 12px 40px var(--accent-glow); }
.plan__tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-accent); margin-bottom: var(--sp-3); min-height: 1.2em; }
.plan__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.plan__price { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-2); font-variant-numeric: tabular-nums; }
.plan__price b { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; }
.plan__price span { color: var(--text-tertiary); font-size: 0.95rem; }
.plan__meta { color: var(--text-tertiary); font-size: 0.9rem; min-height: 2.6em; }
.plan__list { list-style: none; margin: var(--sp-6) 0 var(--sp-8); padding: 0; display: grid; gap: var(--sp-3); font-size: 0.95rem; color: var(--text-secondary); }
.plan__list li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.plan__list svg { flex: none; width: 18px; height: 18px; color: var(--success); margin-top: 4px; }
.plan .btn { margin-top: auto; width: 100%; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq { display: grid; gap: var(--sp-3); max-width: 46rem; }
/* On the pricing page the FAQ is one of only two blocks, and a 46rem column
   leaves the right half of the screen empty. Two columns fill the page while
   each item keeps a readable measure; the questions are independent, so
   reading across rather than down costs nothing. */
@media (min-width: 980px) {
  .faq { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); max-width: none; }
}
.faq details { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.faq details[open] { border-color: var(--accent-ring); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--sp-5) var(--sp-6);
  font-weight: 600; font-size: 1.02rem; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  transition: background var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: rgba(255,255,255,0.03); }
.faq summary:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: -3px; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--text-tertiary); border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(45deg) translateY(-2px); transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq__body { padding: 0 var(--sp-6) var(--sp-5); color: var(--text-secondary); }

/* ── Final CTA ───────────────────────────────────────────────── */
.cta-band {
  border: 1px solid var(--accent-ring); border-radius: var(--r-2xl);
  background: linear-gradient(150deg, rgba(37,99,235,0.20), rgba(15,23,42,0.6));
  padding: clamp(var(--sp-10), 6vw, var(--sp-16));
  text-align: center;
}
.cta-band p { margin: var(--sp-5) auto 0; color: var(--text-secondary); max-width: 40rem; }
.cta-band .hero__cta { justify-content: center; }

/* ── Footer ──────────────────────────────────────────────────── */
.footer { background: var(--bg-surface); border-top: 1px solid var(--border); padding-block: var(--sp-12); font-size: 0.92rem; }
.footer__grid { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer h4 { font-family: var(--font-display); font-size: 0.95rem; margin: 0 0 var(--sp-4); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.footer a { color: var(--text-tertiary); text-decoration: none; transition: color var(--dur) var(--ease); }
.footer a:hover { color: var(--text-primary); }
.footer__bottom { margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid var(--border); color: var(--text-tertiary); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; }
.footer__desc { color: var(--text-tertiary); max-width: 34ch; }

/* ── Language pair ───────────────────────────────────────────── */
/* Two shots of the same booking page, side by side. Deliberately cropped
   above the service name: the interface is translated into all 51 languages,
   but a service name is whatever the salon typed, and the demo salon has not
   filled in a Vietnamese one. Showing that row would have argued against the
   claim the section makes. */
.langpair { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); margin-top: var(--sp-10); }
@media (min-width: 900px) { .langpair { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
.langpair figure { margin: 0; }
.langpair img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
}
.langpair figcaption { margin-top: var(--sp-3); font-size: 0.9rem; color: var(--text-tertiary); }
.langnote { margin-top: var(--sp-10); max-width: 44rem; color: var(--text-secondary); }

/* ── Language split (home) ───────────────────────────────────── */
/* Two sides of the same calendar, joined by the bridge. On a phone the cards
   stack and the bridge lands between them, which is where it reads best —
   so the bridge is a grid child rather than a decoration on the gap. */
.langsplit { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-10); }
@media (min-width: 860px) { .langsplit { grid-template-columns: 1fr auto 1fr; gap: var(--sp-6); align-items: stretch; } }
.langcard {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.langcard__head { display: flex; align-items: center; gap: var(--sp-3); }
.langcard__icon {
  width: 44px; height: 44px; border-radius: var(--r-lg); flex-shrink: 0;
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
  display: grid; place-items: center; color: var(--text-accent);
}
.langcard__icon svg { width: 22px; height: 22px; }
.langcard--guest .langcard__icon { background: var(--success-soft); border-color: rgba(52,211,153,0.4); color: var(--success); }
.langcard__role { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.langcard h3 { margin-top: 2px; }
.langcard p { color: var(--text-secondary); font-size: 0.98rem; }
.langchip {
  align-self: flex-start; border-radius: 999px; padding: var(--sp-1) var(--sp-3);
  font-size: 0.85rem; font-weight: 600;
  background: var(--accent-soft); border: 1px solid var(--accent-ring); color: var(--text-accent);
}
.langcard--guest .langchip { background: var(--success-soft); border-color: rgba(52,211,153,0.4); color: var(--success); }
.langbridge {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  font-family: var(--font-display); font-weight: 600; color: var(--text-primary);
}
.langbridge::before, .langbridge::after { content: ""; background: var(--border-strong); }
.langbridge::before, .langbridge::after { height: 1px; flex-grow: 1; }
@media (min-width: 860px) {
  .langbridge { flex-direction: column; padding-inline: var(--sp-2); }
  .langbridge::before, .langbridge::after { height: auto; width: 1px; flex-grow: 1; }
}
.langnote--home { margin-top: var(--sp-10); max-width: 46rem; color: var(--text-secondary); }

/* Two doors, not three: "Für wen" now has its own section above and the
   card repeated it word for word. */
@media (min-width: 700px) { .pain--two { grid-template-columns: repeat(2, 1fr); } }

/* ── Billing toggle ──────────────────────────────────────────── */
/* Monthly is the markup default, so a page that cannot run the script still
   shows a complete, honest price list — it just cannot switch. */
.billing { display: flex; justify-content: center; margin-bottom: var(--sp-10); }
.billing__inner {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: var(--sp-1);
  background: var(--bg-elevated);
}
.billing button {
  min-height: 44px; padding: 0 var(--sp-5); border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--text-secondary); cursor: pointer;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.billing button:hover { color: var(--text-primary); }
.billing button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.billing__save {
  font-size: 0.78rem; font-weight: 700; border-radius: 999px; padding: 2px var(--sp-2);
  background: var(--success-soft); color: var(--success); border: 1px solid rgba(52,211,153,0.4);
}
.billing button[aria-pressed="true"] .billing__save { background: rgba(255,255,255,0.16); color: #fff; border-color: transparent; }
.plan__was { margin-top: var(--sp-2); font-size: 0.85rem; color: var(--text-tertiary); }
.plan__was s { color: var(--text-tertiary); }
.plan__was b { color: var(--success); font-weight: 600; }

/* ── Contact ─────────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-8); }
@media (min-width: 760px) { .contact { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }
.contact__card {
  display: flex; align-items: flex-start; gap: var(--sp-4); text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: var(--sp-6); background: var(--bg-elevated);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.contact__card:hover { border-color: var(--accent-ring); transform: translateY(-2px); }
.contact__icon {
  width: 44px; height: 44px; border-radius: var(--r-lg); flex-shrink: 0;
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
  display: grid; place-items: center; color: var(--text-accent);
}
.contact__icon svg { width: 22px; height: 22px; }
.contact__card--wa .contact__icon { background: var(--success-soft); border-color: rgba(52,211,153,0.4); color: var(--success); }
.contact__card h3 { margin-bottom: var(--sp-1); }
.contact__card p { color: var(--text-secondary); font-size: 0.95rem; }
.contact__card b { display: block; margin-top: var(--sp-3); color: var(--text-accent); font-weight: 600; font-size: 0.95rem; }

/* ── Before / after ──────────────────────────────────────────── */
/* The three cards described the chaos; this stages it. Their copy survives as
   the messages in the left panel, which is where it always belonged. */
.ba { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 900px) { .ba { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
.ba__panel {
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: var(--sp-6); background: var(--bg-elevated);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.ba__panel--after { border-color: rgba(52,211,153,0.28); background: linear-gradient(160deg, rgba(52,211,153,0.06), var(--bg-elevated)); }
.ba__label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--text-tertiary); }
.ba__panel--after .ba__label { color: var(--success); }
.ba__panel h3 { font-size: 1.15rem; }
.ba__msg {
  display: flex; align-items: baseline; gap: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4); background: var(--bg-surface);
}
.ba__msg span { color: var(--text-secondary); font-size: 0.95rem; flex-grow: 1; }
.ba__msg time { color: var(--text-tertiary); font-size: 0.8rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ba__row {
  display: flex; align-items: center; gap: var(--sp-3);
  border: 1px solid rgba(52,211,153,0.24); border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4); background: var(--success-soft);
}
.ba__row svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; }
.ba__row span { color: var(--text-secondary); font-size: 0.95rem; }
.ba__row b { color: var(--text-primary); font-weight: 600; }

/* ── Branch chips ────────────────────────────────────────────── */
/* ── FAQ ─────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-8); }
@media (min-width: 900px) { .faq { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-8); } }
.faq__item {
  border-top: 1px solid var(--border); padding-top: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.faq__item h3 { font-size: 1.05rem; }
.faq__item p { color: var(--text-secondary); font-size: 0.98rem; }

/* ── Reveal on scroll ────────────────────────────────────────── */
/* The hidden state is gated on .js, which the inline script in <head> sets
   before first paint. Without it every .reveal stayed at opacity 0 forever:
   with JavaScript off or broken the page showed the hero and the footer and
   nothing in between — forty blocks across the four pages. Anything that reads
   the page without running scripts saw the same empty page. */
.reveal { transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ── Legal pages ─────────────────────────────────────────────── */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: var(--sp-12) 0 var(--sp-4); }
.prose h2:first-of-type { margin-top: var(--sp-8); }
.prose h3 { margin: var(--sp-8) 0 var(--sp-3); font-size: 1.05rem; }
.prose p, .prose li { color: var(--text-secondary); }
.prose p + p { margin-top: var(--sp-4); }
.prose ul { margin: var(--sp-4) 0 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.prose a { color: var(--text-accent); }
.prose .dl { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.prose .dl div { display: grid; grid-template-columns: 1fr; gap: var(--sp-1); }
@media (min-width: 600px) { .prose .dl div { grid-template-columns: 190px 1fr; gap: var(--sp-4); } }
.prose .dl dt, .prose .dl b { color: var(--text-primary); font-weight: 600; }
.prose .note {
  margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6);
  background: var(--accent-soft); border: 1px solid var(--accent-ring); border-radius: var(--r-lg);
  color: var(--text-secondary);
}
.page-head { padding-block: clamp(var(--sp-12), 7vw, var(--sp-20)) var(--sp-8); position: relative; }
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 60% at 15% 0%, rgba(37,99,235,0.22) 0%, transparent 70%);
}
.page-head p { color: var(--text-tertiary); margin-top: var(--sp-3); }

/* ── Verlustrechner ──
   The three cards above it name the problem; this one prices it. Two steppers
   rather than free-entry fields: a visitor who has to think about the format
   has already stopped reading, and a wrong keystroke would put an absurd
   number under the biggest type on the page. */
.calc {
  margin-top: var(--sp-10);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  padding: var(--sp-8);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-surface));
}
@media (min-width: 860px) { .calc { grid-template-columns: 1fr 1fr; align-items: center; } }

.calc__field + .calc__field { margin-top: var(--sp-6); }
.calc__label { display: block; color: var(--text-secondary); font-size: 0.95rem; margin-bottom: var(--sp-3); }
.calc__stepper { display: flex; align-items: center; gap: var(--sp-3); }
.calc__btn {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  background: var(--bg-base); color: var(--text-primary);
  font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.calc__btn:hover { border-color: var(--accent-hi); }
.calc__value {
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem;
  font-variant-numeric: tabular-nums; min-width: 5ch; text-align: center;
}

.calc__outlabel { color: var(--text-secondary); font-size: 0.95rem; }
/* Amber, not the accent: this is the number they lose, and the accent belongs
   to the things they can click. */
.calc__sum {
  font-family: var(--font-display); font-weight: 700; line-height: 1.05;
  font-size: clamp(2.4rem, 7vw, 3.8rem); color: var(--warning);
  font-variant-numeric: tabular-nums; margin: var(--sp-3) 0;
}
.calc__note { color: var(--text-tertiary); font-size: 0.92rem; max-width: 42ch; margin-bottom: var(--sp-6); }

/* ── Für wen ── */
.segs {
  list-style: none; margin: var(--sp-10) 0 0; padding: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* Some tiles are links now and some are not — every trade that has its own
   page got one. The li is the grid cell and the .seg is what fills it, so both
   shapes end up the same size instead of the linked ones shrinking to their
   text and long names spilling out of the box. */
.segs > li { display: flex; }
.seg {
  flex: 1 1 auto;
  display: flex; align-items: center;
  padding: var(--sp-5); border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg-elevated);
  font-weight: 500; text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* The arrow marks the clickable ones. It comes from CSS rather than the markup
   so the translation table keeps matching ">Friseure</a>" exactly. */
a.seg::after { content: " →"; margin-left: auto; padding-left: var(--sp-3); color: var(--text-accent); }
a.seg:hover { border-color: var(--accent-ring); color: var(--text-accent); }
.seg--more { color: var(--text-tertiary); font-weight: 400; }

/* ── Doors on the home page ──
   These are .pain__item cards that happen to be links. Without this the whole
   card body renders underlined, which reads as broken rather than clickable.
   The arrow does the job the underline was accidentally doing. */
a.pain__item {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
a.pain__item:hover { border-color: var(--accent-hi); background: var(--bg-overlay); }
a.pain__item h3::after {
  content: "→";
  margin-inline-start: var(--sp-2);
  color: var(--accent-hi);
  transition: transform var(--dur) var(--ease);
  display: inline-block;
}
a.pain__item:hover h3::after { transform: translateX(3px); }
a.pain__item:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }

/* ── Branchen-Coverflow ──────────────────────────────────────────
   A 3D carousel for the six trades that have their own page. Two
   layouts, one markup: below 900px the cards are a scroll-snap row
   and the 3D never runs, above it they fan out in perspective. The
   alternative — separate mobile markup — is how card text drifts
   apart between breakpoints, so it is deliberately avoided.

   Geometry (22° / 255px / -92px per step) is measured, not guessed:
   it matches a build whose motion already reads well at this card
   width. Scale stops shrinking past the second neighbour because
   below ~0.6 the type inside stops being legible. */
.cf { position: relative; margin-top: var(--sp-8); }
/* Glass over a flat background is just a dark box: the blur has nothing to
   work on. This glow is what the cards are made of, not decoration behind
   them - remove it and the whole effect reads as six grey rectangles. */
.cf::before {
  content: ""; position: absolute; left: 50%; top: 46%;
  width: 980px; height: 440px; transform: translate(-50%, -50%);
  /* A gradient rather than a blurred disc: the disc was strong enough to
     reach the clip edge, and a pool of light with a straight side reads as a
     lit box. This one is already transparent at its own bounds, so the clip
     never shows. */
  background: radial-gradient(closest-side,
    rgba(59, 130, 246, 0.40), rgba(59, 130, 246, 0.13) 55%, transparent 78%);
  filter: blur(46px);
  pointer-events: none; z-index: 0;
}

.cf__stage {
  display: flex; gap: var(--sp-4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--sp-2) var(--sp-1) var(--sp-6);
  -webkit-overflow-scrolling: touch;
}
.cf__card {
  flex: 0 0 82%; max-width: 330px; scroll-snap-align: center;
  text-decoration: none; color: inherit; display: block;
}

.cf__glass {
  height: 100%; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--border-strong); border-radius: var(--r-xl);
  background: rgba(15, 23, 42, 0.78);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  /* Brand-tinted and shaped as glow rather than a drop: large blur, negative
     spread, so the light spills outward instead of the card casting a black
     shadow onto a background that is already almost black. --cf-glow is set
     per card by the script, so the one in front carries the most light. */
  box-shadow: 0 20px 64px -26px rgba(59, 130, 246, var(--cf-glow, 0.30)), var(--shadow-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cf__trade { font-family: var(--font-display); font-size: 1.35rem; color: var(--text-primary); }
.cf__svc { font-size: 0.95rem; color: var(--text-tertiary); }
.cf__more { margin-top: var(--sp-2); font-size: 0.9rem; color: var(--text-accent); font-weight: 600; }

.cf__card:hover .cf__glass,
.cf__card:focus-visible .cf__glass {
  border-color: var(--accent-ring);
  box-shadow: 0 22px 70px -22px rgba(59, 130, 246, 0.72), var(--shadow-lg);
}
.cf__card:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 4px; border-radius: var(--r-xl); }

/* Controls stay useful in both layouts, so they live outside the media query. */
.cf__controls { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-2); }
.cf__nav {
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: rgba(255,255,255,0.03);
  color: var(--text-secondary); font-size: 1.1rem; line-height: 1;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cf__nav:hover { border-color: var(--accent-ring); color: var(--text-accent); }
.cf__nav:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.cf__dots { display: flex; gap: var(--sp-2); }
.cf__dot {
  width: 8px; height: 8px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 0; background: var(--border-strong);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cf__dot[aria-selected="true"] { background: var(--accent-hi); transform: scale(1.4); }
.cf__dot:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }

@media (min-width: 900px) {
  /* Overflow is clipped here rather than on the section: the outer cards are
     meant to run past the container and fade, not widen the page. */
  .cf { overflow: hidden; }
  .cf__stage {
    z-index: 1;
    display: block; position: relative; height: 300px;
    overflow: visible; perspective: 1300px; padding: 0;
  }
  /* No transform transition here on purpose: the ring is driven frame by
     frame, and a 500ms interpolation would be fighting every one of them.
     Motion that needs easing (an arrow press) is eased in the script. */
  .cf__card {
    position: absolute; left: 50%; top: 50%; width: 330px; max-width: none;
    transform-origin: 50% 50%; will-change: transform;
  }
  /* Dragging a page selects text, and dragging a link drags its URL. Both
     happen the moment someone tries to spin this by hand, and the blue
     selection is what they see instead of motion. */
  .cf__stage { cursor: grab; }
  .cf__stage:active { cursor: grabbing; }
  .cf, .cf__card { user-select: none; -webkit-user-select: none; }
  .cf__card { -webkit-user-drag: none; }
  .cf__card img, .cf__card svg { pointer-events: none; }
  .cf__glass { min-height: 150px; }
}

.cf__rest { margin-top: var(--sp-5); color: var(--text-tertiary); font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
  .cf__card { transition: none; }
  .cf__stage { scroll-behavior: auto; }
}