/* ============================================================
   Boxenfunk.ai — Dark Theme
   Inspired by: pitch-black surfaces, Racing Red accent,
   bold display type, glow-button CTAs, dark cards.
   ============================================================ */
:root {
  /* Surfaces */
  --bg:           #0A0A0A;
  --bg-elev:      #0F0F12;
  --bg-card:      #131316;
  --bg-card-hi:   #1A1A1F;
  --border:       rgba(255,255,255,0.08);
  --border-hi:    rgba(255,255,255,0.16);

  /* Text */
  --text:         #FFFFFF;
  --text-dim:     #B7B7BE;
  --text-muted:   #7A7A82;

  /* Accent — Racing Red */
  --accent:       #FF3B30;
  --accent-hot:   #FF6961;
  --accent-deep:  #C72A22;
  --accent-soft:  rgba(255, 59, 48, 0.12);
  --accent-glow:  rgba(255, 59, 48, 0.45);

  /* Radii */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* Type */
  --f-sans: "Inter", "Inter Tight", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-display: "Russo One", "Inter", system-ui, sans-serif;

  /* Notch layout */
  --frame-pad:  14px;   /* gap between the notch and viewport edge */
  --notch-fill: 28px;   /* radius of the concave fillet */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
em { text-decoration: none; font-style: normal; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.section { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.section--tight { padding: clamp(60px, 7vw, 90px) 0; }
.section-head { max-width: 880px; margin: 0 auto clamp(48px, 6vw, 72px); }
.section-head--left { margin-left: 0; }

/* ============================================================
   EYEBROW CHIP
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
}
.chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 15.5px; letter-spacing: -0.005em;
  height: 52px; padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease, border-color .2s;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 0 0 0 var(--accent-glow), 0 14px 38px -10px var(--accent-glow);
}
.btn--primary:hover {
  background: var(--accent-hot);
  box-shadow: 0 0 0 6px var(--accent-soft), 0 18px 46px -8px var(--accent-glow);
}
.btn--ghost {
  background: transparent; color: var(--text);
  border-color: var(--border-hi);
}
.btn--ghost:hover { background: var(--bg-card); border-color: rgba(255,255,255,0.28); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ============================================================
   NOTCH HEADER — centered dark tab that dips into the hero,
   with concave fillets at the top sides; grows to full-width on scroll.
   ============================================================ */
.notch {
  position: fixed;
  top: var(--frame-pad);
  left: 0; right: 0;
  z-index: 60;

  width: min(880px, 94vw);
  margin-inline: auto;
  height: 60px;

  background: rgba(15, 15, 18, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,0.7);

  transition:
    width    .55s cubic-bezier(.4, 0, .2, 1),
    top      .55s cubic-bezier(.4, 0, .2, 1),
    border-radius .55s cubic-bezier(.4, 0, .2, 1),
    background .35s ease,
    box-shadow .4s ease;
}

/* Scrolled: full-width header bar */
.notch.is-scrolled {
  width: 100%;
  top: 0;
  border-radius: 0;
  background: rgba(10, 10, 10, 0.92);
  border-left: none;
  border-right: none;
}

.notch__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
  height: 100%;
  max-width: 1180px; margin-inline: auto;
  padding: 0 12px 0 22px;
  transition: padding-inline .55s cubic-bezier(.4, 0, .2, 1);
}
.notch.is-scrolled .notch__inner { padding-inline: clamp(22px, 5vw, 56px); }

/* concave fillets that blend the notch into the surrounding background */
.notch::before,
.notch::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--notch-fill);
  height: var(--notch-fill);
  background: rgba(15, 15, 18, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  pointer-events: none;
  transition: opacity .3s ease;
}
.notch::before {
  left: calc(-1 * var(--notch-fill));
  border-left: 1px solid var(--border);
  -webkit-mask: radial-gradient(circle at 0 100%, transparent var(--notch-fill), #000 calc(var(--notch-fill) + 0.5px));
          mask: radial-gradient(circle at 0 100%, transparent var(--notch-fill), #000 calc(var(--notch-fill) + 0.5px));
}
.notch::after {
  right: calc(-1 * var(--notch-fill));
  border-right: 1px solid var(--border);
  -webkit-mask: radial-gradient(circle at 100% 100%, transparent var(--notch-fill), #000 calc(var(--notch-fill) + 0.5px));
          mask: radial-gradient(circle at 100% 100%, transparent var(--notch-fill), #000 calc(var(--notch-fill) + 0.5px));
}
.notch.is-scrolled::before,
.notch.is-scrolled::after { opacity: 0; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__logo { height: 30px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.nav a {
  font-size: 14.5px; font-weight: 500; color: var(--text-dim);
  white-space: nowrap;
  transition: color .2s;
}
.nav a:hover { color: var(--text); }

@media (max-width: 880px) {
  .nav { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 160px 0 clamp(80px, 10vw, 140px);
  overflow: hidden;
  isolation: isolate;
  background: #000;
}
.hero__bg { display: none; }
.hero::before, .hero::after { display: none; }

.hero__inner {
  max-width: 1100px; margin: 0 auto; padding: 0 28px;
  text-align: center;
}

/* --- Split-Layout: Video links, Text rechts --- */
.hero--split .hero__inner {
  max-width: 1240px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 4.5vw, 80px);
  align-items: center;
  text-align: left;
}
.hero--split .hero__logo { margin-left: 0; margin-right: auto; }
.hero--split .hero__title { margin-inline: 0; max-width: none; }
.hero--split .hero__sub { margin-inline: 0; }
.hero--split .hero__cta { justify-content: flex-start; }

.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero__visual-glow {
  position: absolute; inset: -10%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,59,48,0.35) 0%,
    rgba(255,59,48,0.10) 28%,
    rgba(255,59,48,0) 60%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  animation: heroVisualPulse 3.6s ease-in-out infinite;
}
@keyframes heroVisualPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
.hero__video {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
}

/* Mobile: stack video on top, text below */
@media (max-width: 880px) {
  .hero--split .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero--split .hero__logo { margin-inline: auto; }
  .hero--split .hero__title,
  .hero--split .hero__sub { margin-inline: auto; }
  .hero--split .hero__cta { justify-content: center; }
  .hero__visual { max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__visual-glow { animation: none; }
}
.hero__chip { margin: 0 auto 32px; }

.hero__logo {
  display: block;
  max-width: min(220px, 40vw);
  width: 100%;
  height: auto;
  margin: 0 auto 32px;
}
.hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  font-weight: 400; /* Russo One is single-weight */
  letter-spacing: 0;
  line-height: 1.0;
  margin-bottom: 36px;
  color: var(--text);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 18ch;
  margin-inline: auto;
}
.hero__title em {
  color: var(--accent);
  font-style: normal;
  /* subtle glow on the highlighted phrase */
  text-shadow: 0 0 60px rgba(255,59,48,0.45);
}
.hero__sub {
  max-width: 760px; margin: 0 auto 44px;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.55;
  color: var(--text-dim);
}
.hero__sub strong { color: var(--text); font-weight: 600; }
.hero__cta { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ============================================================
   STATS TILES
   ============================================================ */
.stats { padding-top: 20px; }
.stats__grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stats__grid { grid-template-columns: 1fr; } }

.stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  transition: border-color .2s, transform .2s;
}
.stat:hover { border-color: var(--border-hi); }
.stat__num {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 400;
  letter-spacing: 0; line-height: 1;
  color: var(--text); margin-bottom: 12px;
  text-transform: uppercase;
}
.stat__label { font-size: 14.5px; color: var(--text-dim); line-height: 1.45; }

/* ============================================================
   PROBLEM SECTION — light cream variant (pairs with phone animation)
   ============================================================ */
#problem {
  background: linear-gradient(180deg, #F4F1EC 0%, #ECE7DF 100%);
  color: #15191F;
  padding-top: clamp(80px, 10vw, 130px);
  padding-bottom: clamp(40px, 6vw, 80px);
  position: relative;
}
#problem .chip {
  background: rgba(255,255,255,0.7);
  border-color: rgba(0,0,0,0.10);
  color: #6E7681;
}
.problem__title {
  font-family: var(--f-display);
  text-align: center;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.05;
  max-width: 760px; margin: 0 auto;
  color: #15191F;
  text-transform: uppercase;
  text-wrap: balance;
}
.problem__title em {
  color: var(--accent);
  font-style: normal;
  text-decoration: none;
  border: none;
  background: none;
}

/* ============================================================
   GENERIC HEADER (used by use-cases, roi, etc.)
   ============================================================ */
.head__chip { margin-bottom: 22px; }
.head__title {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 400;
  letter-spacing: 0; line-height: 1.05;
  max-width: 880px;
  text-transform: uppercase;
  text-wrap: balance;
}
.head__title em { color: var(--accent); font-style: normal; }
.head__sub {
  margin-top: 22px; max-width: 660px;
  font-size: clamp(1rem, 1.2vw, 1.1rem); color: var(--text-dim); line-height: 1.55;
}

/* ============================================================
   USE CASES
   ============================================================ */
.uc__grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) { .uc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .uc__grid { grid-template-columns: 1fr; } }

.uc {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 22px 24px;
  transition: border-color .2s, transform .2s, background .2s;
  display: flex; flex-direction: column;
}
.uc:hover { border-color: var(--border-hi); background: var(--bg-card-hi); }
.uc--urgent { border-color: rgba(255,184,0,0.30); }

.uc__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.uc__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -0.02em;
}
.uc__avatar--deep { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-hi); }
.uc__avatar--urgent { background: #FFB800; color: #15191F; }
.uc__name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; }
.uc__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  margin-top: 3px;
}
.uc__badge i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
  animation: callerPulse 1.4s ease-in-out infinite;
}
.uc__badge--urgent i { background: #FFB800; box-shadow: 0 0 8px rgba(255,184,0,0.45); }
.uc__tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 11px;
  border: 1px solid var(--border-hi);
  border-radius: var(--r-pill);
  color: var(--text-dim);
}

.uc__quote {
  margin: 4px 0 18px;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  font-size: 1.02rem; font-style: italic; color: var(--text-dim);
  line-height: 1.5;
}
.uc--urgent .uc__quote { border-left-color: #FFB800; }

.uc__divider {
  height: 1px; background: var(--border);
  margin: 4px 0 16px;
}
.uc__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 14px;
}
.uc__list { list-style: none; display: grid; gap: 10px; }
.uc__list li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14.5px; color: var(--text-dim);
}
.uc__list li::before {
  content: ""; flex-shrink: 0;
  width: 14px; height: 14px; border-radius: 4px;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
  position: relative;
}
.uc__check { display: none; }
.uc__list li::after {
  content: ""; position: absolute; margin-left: 3px; margin-top: 2px;
  width: 4px; height: 8px;
  border: solid var(--accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

/* simpler red check icon via inline svg */
.uc__list li {
  position: relative; padding-left: 26px;
}
.uc__list li::before {
  position: absolute; left: 0; top: 5px;
  width: 14px; height: 14px;
  background: transparent; border: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.5l3 3 7-7' stroke='%23FF3B30' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
}

/* ============================================================
   30-TAGE-PILOT CTA
   ============================================================ */
.pilot {
  position: relative; overflow: hidden;
}
.pilot::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 40% 50% at 50% 0%, rgba(255,59,48,0.14) 0%, rgba(255,59,48,0) 65%);
}
.pilot__grid {
  display: grid; gap: clamp(40px, 5vw, 80px);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
@media (max-width: 980px) { .pilot__grid { grid-template-columns: 1fr; } }

.pilot__left .head__title { margin-top: 20px; }
.pilot__left .head__title em { color: var(--accent); font-style: normal; }
.pilot__left .head__sub {
  margin-top: 26px;
}
.pilot__checks { list-style: none; display: grid; gap: 14px; margin-top: 30px; }
.pilot__checks li {
  display: flex; align-items: center; gap: 14px;
  font-size: 1rem; color: var(--text-dim);
}
.pilot__checks li svg { color: var(--accent); flex-shrink: 0; }

.form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
}
.form__title { font-size: 1.15rem; font-weight: 700; margin-bottom: 22px; }
.form__field {
  display: block; width: 100%; height: 54px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 0 18px;
  color: var(--text); font-family: inherit; font-size: 15px;
  transition: border-color .2s, background .2s;
}
.form__field::placeholder { color: var(--text-muted); }
.form__field:focus { outline: none; border-color: var(--border-hi); background: var(--bg-card-hi); }
.form__field + .form__field { margin-top: 12px; }
.form__submit {
  margin-top: 18px; width: 100%; height: 56px;
}
.form__note {
  margin-top: 16px; text-align: center;
  font-size: 12.5px; color: var(--text-muted); letter-spacing: 0.02em;
}

/* ============================================================
   BENEFITS — 3 large cards with KFZ illustrations (Dark)
   ============================================================ */
.benefits__grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) { .benefits__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

.bcard {
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color .25s, transform .25s;
}
.bcard:hover { border-color: var(--border-hi); transform: translateY(-3px); }
.bcard__media {
  position: relative;
  aspect-ratio: 4 / 3.2;
  display: grid; place-items: center;
  overflow: hidden;
}
.bcard__media--red { background: linear-gradient(150deg, #FF3B30, #8E0F0A); }
.bcard__media--carbon { background: linear-gradient(150deg, #2A2F38, #0E1218); }
.bcard__media--amber { background: linear-gradient(150deg, #FFB800, #8E6200); }
.bcard__media--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.bcard__media--photo::before {
  /* dark gradient overlay at the bottom for the badge / soft mood */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0) 35%, rgba(10,10,10,0.55) 100%);
  z-index: 1;
}
.bcard__media--photo .bcard__badge { z-index: 3; }
/* Blueprint grid removed — photos look better clean */
.bcard__art {
  position: relative; z-index: 1;
  width: clamp(140px, 48%, 200px);
  color: rgba(255,255,255,0.95);
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5));
}
.bcard__art svg { width: 100%; height: auto; display: block; }
.bcard__badge {
  position: absolute; top: 16px; left: 16px;
  z-index: 2;
  font-size: 12.5px; font-weight: 700;
  color: var(--text);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-pill);
  padding: 7px 14px;
}
.bcard__body { padding: clamp(24px, 2.4vw, 32px); }
.bcard__body h3 {
  font-family: var(--f-display);
  margin: 0 0 12px;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 400;
  letter-spacing: 0; line-height: 1.1;
  color: var(--text);
  text-transform: uppercase;
}
.bcard__body p {
  margin: 0;
  font-size: clamp(.98rem, 1.2vw, 1.05rem); line-height: 1.55;
  color: var(--text-dim);
}

/* ============================================================
   PRIORITY (Sticky-stacking cards — Routine / Termin / Panne)
   ============================================================ */
.prio__grid {
  display: grid; gap: clamp(40px, 5vw, 80px);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
@media (max-width: 980px) { .prio__grid { grid-template-columns: 1fr; } }

.prio__left {
  position: sticky;
  top: clamp(110px, 14vh, 180px);
  /* the left intro stays pinned for the whole stack duration */
  align-self: start;
}

.prio__note {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 28px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.prio__note-icon { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.prio__note p { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; margin: 0; }
.prio__note strong { color: var(--text); font-weight: 600; }

/* Stacking cards: each pcard is sticky. The gaps below define how long the
   user has to scroll before the next card slides up. The trailing spacer keeps
   the last card pinned at the top for an extra beat before the page moves on. */
.prio__cards {
  display: flex; flex-direction: column;
  gap: clamp(420px, 55vh, 620px);
}
.prio__cards::after {
  content: "";
  display: block;
  height: clamp(360px, 60vh, 620px);
}
.pcard {
  position: sticky;
  top: clamp(110px, 16vh, 180px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px 30px 34px;
  transform-origin: 50% 0;
  will-change: transform, opacity;
}
.pcard-spacer { height: 1px; visibility: hidden; }
@media (max-width: 980px) {
  .prio__left { position: relative; top: auto; }
  .prio__cards { gap: 18px; }
  .pcard { position: relative; top: auto; }
}
.pcard__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pcard__dot {
  width: 14px; height: 14px; border-radius: 50%;
  position: relative;
}
.pcard__dot::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  opacity: 0.18; background: currentColor;
}
.pcard--routine .pcard__dot { color: #2BD37B; background: #2BD37B; box-shadow: 0 0 16px rgba(43,211,123,0.5); }
.pcard--termin .pcard__dot { color: #FFB800; background: #FFB800; box-shadow: 0 0 16px rgba(255,184,0,0.5); }
.pcard--panne .pcard__dot { color: var(--accent); background: var(--accent); box-shadow: 0 0 16px var(--accent-glow); }

.pcard__label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.pcard--routine .pcard__label { color: #2BD37B; }
.pcard--termin .pcard__label { color: #FFB800; }
.pcard--panne .pcard__label { color: var(--accent); }

.pcard__tags { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.pcard__title {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-weight: 400;
  letter-spacing: 0; line-height: 1.15;
  margin-bottom: 10px; color: var(--text);
  text-transform: uppercase;
}
.pcard__body { color: var(--text-dim); font-size: 15px; line-height: 1.55; margin: 0; }

/* ============================================================
   INTEGRATIONS — endless marquee
   ============================================================ */
.integ {
  padding: clamp(70px, 8vw, 110px) 0;
  background: linear-gradient(180deg, var(--bg) 0%, #050507 100%);
}
.integ__head { text-align: center; max-width: 820px; margin: 0 auto clamp(40px, 5vw, 60px); padding: 0 28px; }
.integ__head .head__title { margin: 22px auto 0; }
.integ__head .head__sub { margin: 22px auto 0; }

.integ__rows {
  display: grid; gap: 16px;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee { overflow: hidden; }
.marquee__track {
  display: flex; width: max-content;
  animation: marqueeL 38s linear infinite;
}
.marquee--r .marquee__track { animation-name: marqueeR; animation-duration: 44s; }
.marquee__group { display: flex; flex-shrink: 0; }
@keyframes marqueeL { to { transform: translateX(-50%); } }
@keyframes marqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none !important; } }

.intlogo {
  flex: 0 0 auto;
  margin-right: clamp(12px, 1.4vw, 18px);
  width: clamp(180px, 16vw, 220px);
  height: clamp(76px, 9vh, 92px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px 22px;
  background: #FAF8F4;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.intlogo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
}

/* ============================================================
   FLOWCHART — replaces the simple version with lines + nodes
   ============================================================ */
.fc-board {
  position: relative;
  max-width: 1100px; margin: 0 auto;
  aspect-ratio: 1100 / 640;
  background: linear-gradient(180deg, var(--bg-card), var(--bg-elev));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  overflow: hidden;
}
.fc-board__lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.fc-board .fc-line { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 1.6; stroke-dasharray: 6 7; }
.fc-board .fc-flow { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 100; stroke-dashoffset: 100; animation: fcFlow 4s ease-in-out infinite; }
.fc-board .fc-flow:nth-child(2) { animation-delay: 0.3s; }
.fc-board .fc-flow:nth-child(3) { animation-delay: 0.6s; }
.fc-board .fc-flow:nth-child(4) { animation-delay: 0.9s; }
.fc-board .fc-flow:nth-child(5) { animation-delay: 1.2s; }
.fc-board .fc-flow:nth-child(6) { animation-delay: 1.5s; }
.fc-board .fc-flow:nth-child(7) { animation-delay: 1.8s; }
.fc-board .fc-flow:nth-child(8) { animation-delay: 2.1s; }
@keyframes fcFlow {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
.fc-label {
  position: absolute;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
  transform: translate(-50%, 0);
  white-space: nowrap;
}
.fc-node {
  position: absolute;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-pill);
  font-size: 13.5px; color: var(--text);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.fc-node i {
  display: inline-flex;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
}
.fc-in--urgent i { background: #FFB800; box-shadow: 0 0 8px rgba(255,184,0,0.5); }
.fc-out i { width: 16px; height: 16px; background: transparent; box-shadow: none; color: var(--accent); }
.fc-out--urgent i { color: #FFB800; }

.fc-hub {
  position: absolute;
  width: 110px; height: 110px;
  background: var(--accent);
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  transform: translate(-50%, -50%);
  z-index: 3;
  box-shadow: 0 0 0 8px rgba(255,59,48,0.15), 0 0 60px var(--accent-glow);
}
.fc-hublabel {
  position: absolute;
  text-align: center;
  transform: translate(-50%, -100%);
  z-index: 2;
}
.fc-hublabel strong { display: block; font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.fc-hublabel span { font-size: 12px; color: var(--text-muted); }

.fc-systems {
  position: absolute;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  padding: 12px 18px 14px;
  text-align: center;
  z-index: 2;
  max-width: 340px;
  width: max-content;
}
.fc-systems__title {
  display: block;
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; margin-bottom: 10px;
}
.fc-systems__chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fc-systems__chips span {
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--bg-elev); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-dim);
}

/* responsive flowchart fallback */
@media (max-width: 720px) {
  .fc-board { aspect-ratio: auto; min-height: 720px; }
}

/* ============================================================
   FLOW STAGE — scroll-driven caller cards merging into phone
   ============================================================ */
.flow {
  position: relative;
  height: 320vh; /* tall pinned section for scroll-driven animation */
  /* Same gradient as #problem so the two sections fade into each other */
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(255,59,48,0.06) 0%, rgba(255,59,48,0) 70%),
    linear-gradient(180deg, #ECE7DF 0%, #ECE7DF 50%, #E4DDD2 100%);
  color: #15191F;
}
.flow__eyebrow { color: #6E7681 !important; }
/* darker caller cards stand out beautifully on the warm cream background */
.flow .caller {
  background: #15191F;
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.4);
}
.flow .caller__name { color: #fff; }
.flow .caller__badge { color: rgba(255,255,255,0.6); }
.flow .caller__quote { color: rgba(255,255,255,0.7); }
.flow .caller--deep { background: #FAF6EE; border-color: rgba(0,0,0,0.12); }
.flow .caller--deep .caller__name { color: #15191F; }
.flow .caller--deep .caller__badge { color: #6E7681; }
.flow .caller--deep .caller__quote { color: #555a63; }
.flow .caller--deep .caller__avatar { background: #15191F; color: #fff; border: none; }

.flow .flow__phone {
  background: linear-gradient(180deg, #1F1F24, #0E0E12);
  border-color: rgba(0,0,0,0.20);
  box-shadow:
    0 60px 130px -30px rgba(0,0,0,0.5),
    inset 0 0 0 2px rgba(0,0,0,0.6);
}
.flow .flow__final {
  background: #15191F;
  border-color: rgba(0,0,0,0.16);
  box-shadow: 0 50px 110px -30px rgba(0,0,0,0.45), 0 0 60px rgba(255,59,48,0.18);
  color: #fff;
}
.flow .flow__final-text { color: #fff; }
.flow .flow__final-text em { color: var(--accent); }
.flow__stage {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  display: grid; place-items: center;
  overflow: hidden;
}
.flow__eyebrow {
  position: absolute; top: clamp(96px, 14vh, 140px); left: 50%;
  transform: translateX(-50%);
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0; transition: opacity .3s ease;
}
.flow__cards {
  position: relative;
  width: min(1200px, 92vw); height: 100%;
  perspective: 1200px;
}

/* --- Caller card (flying around the phone) --- */
.caller {
  position: absolute; left: 50%; top: 50%;
  width: clamp(260px, 26vw, 320px);
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8);
  will-change: transform, opacity;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}
.caller__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.caller__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -0.02em;
  overflow: hidden;
  flex-shrink: 0;
}
.caller__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caller__avatar--icon { background: rgba(255,59,48,0.14); color: var(--accent); border: 1px solid rgba(255,59,48,0.30); }
.caller--deep .caller__avatar { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-hi); }
.caller--deep .caller__avatar--icon { background: rgba(255,255,255,0.06); color: var(--text); }
.caller--urgent { border-color: rgba(255,184,0,0.35); }
.caller--urgent .caller__avatar { background: #FFB800; color: #15191F; }
.caller__name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.caller__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  margin-top: 2px;
}
.caller__badge i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
  animation: callerPulse 1.4s ease-in-out infinite;
}
.caller--urgent .caller__badge i { background: #FFB800; box-shadow: 0 0 8px rgba(255,184,0,0.45); }
@keyframes callerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
.caller__quote {
  font-size: 14.5px; color: var(--text-dim); font-style: italic; line-height: 1.5;
}

/* --- Phone mockup in the centre --- */
.flow__phone {
  position: absolute; left: 50%; top: 50%;
  width: clamp(260px, 28vw, 320px);
  aspect-ratio: 300 / 620;
  border-radius: 48px;
  background: linear-gradient(180deg, #1f1f24, #0E0E12);
  border: 2px solid rgba(255,255,255,0.08);
  box-shadow:
    0 50px 120px -30px rgba(0,0,0,0.9),
    inset 0 0 0 2px rgba(0,0,0,0.6),
    0 0 0 8px rgba(255,255,255,0.02);
  padding: 14px;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.flow__phone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 36px; overflow: hidden;
  background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(255,59,48,0.16) 0%, rgba(255,59,48,0) 70%), #0F0F12;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 24px 18px 28px;
}
.flow__phone-island {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 26px; border-radius: 999px;
  background: #000;
}
.flow__phone-label {
  margin-top: 50px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
}
.flow__phone-call { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.flow__phone-avatar {
  position: relative;
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(255,59,48,0.15), 0 0 40px var(--accent-glow);
}
.flow__phone-mark {
  position: relative; z-index: 2;
}
.flow__phone-pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: phonePulse 2s ease-out infinite;
}
.flow__phone-pulse--2 { animation-delay: 1s; }
@keyframes phonePulse {
  0%   { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__phone-pulse { animation: none; opacity: 0; }
}
.flow__phone-name { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.flow__phone-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-dim);
}
.flow__phone-status i {
  width: 7px; height: 7px; border-radius: 50%; background: #2BD37B;
  box-shadow: 0 0 8px rgba(43,211,123,0.55);
  animation: callerPulse 1.6s ease-in-out infinite;
}
.flow__phone-actions {
  display: flex; gap: 14px; margin-bottom: 8px;
}
.flow__phone-btn {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.08);
  color: var(--text);
}
.flow__phone-btn { border: none; cursor: default; }
.flow__phone-btn--end {
  background: var(--accent); color: #fff;
  box-shadow: 0 0 20px var(--accent-glow);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.flow__phone-btn--end:hover { transform: scale(1.06); box-shadow: 0 0 30px var(--accent-glow); }
.flow__phone-btn--end:active { transform: scale(.94); }

/* Joke speech bubble */
.flow__phone-joke {
  position: absolute; left: 50%; bottom: 22%;
  transform: translate(-50%, 0) scale(.96);
  max-width: 86%;
  padding: 12px 16px;
  background: #fff;
  color: #15191F;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 5;
}
.flow__phone-joke::after {
  content: ""; position: absolute; left: 50%; bottom: -7px;
  transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px; background: #fff;
  box-shadow: 4px 4px 8px -2px rgba(0,0,0,0.15);
}
.flow__phone-joke.is-visible {
  opacity: 1; transform: translate(-50%, -8px) scale(1);
}
.flow__phone-joke p {
  margin: 0; font-size: 13.5px; line-height: 1.4; font-weight: 600;
  text-align: center;
}

/* --- Final morph card --- */
.flow__final {
  position: absolute; left: 50%; top: 50%;
  width: min(720px, 90vw);
  padding: 40px 36px;
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-xl);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.9), 0 0 60px rgba(255,59,48,0.12);
  text-align: center;
  will-change: transform, opacity;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
}
.flow__final-mark {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent);
  color: #fff;
  margin-bottom: 18px;
  box-shadow: 0 0 0 8px rgba(255,59,48,0.14), 0 0 40px var(--accent-glow);
}
.flow__final-text {
  font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--text); margin-bottom: 28px;
}
.flow__final-text em { color: var(--accent); font-style: normal; }

@media (max-width: 720px) {
  .flow { height: 260vh; }
  .caller { width: clamp(220px, 80vw, 280px); }
  .flow__phone { width: clamp(220px, 60vw, 280px); }
}

/* ============================================================
   REVEAL (word-by-word, dark)
   ============================================================ */
.reveal {
  padding: clamp(120px, 18vw, 220px) 0;
  position: relative;
}
.reveal__text {
  font-family: var(--f-display);
  max-width: 1080px; margin: 0 auto; padding: 0 28px;
  font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 400;
  letter-spacing: 0; line-height: 1.18;
  text-align: center; color: var(--text);
  text-transform: uppercase;
  text-wrap: balance;
}
.reveal-word { opacity: 0.18; transition: opacity .25s ease; margin-right: 0.18em; display: inline-block; }
.reveal-word--accent { color: var(--accent); }

/* ============================================================
   FLOWCHART (so funktioniert's)
   ============================================================ */
.flow-chart {
  position: relative;
  max-width: 1100px; margin: 0 auto;
  padding: 28px; min-height: 540px;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-elev));
}
.fc__row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 60px;
  align-items: center; padding: 30px 20px;
}
@media (max-width: 860px) {
  .fc__row { grid-template-columns: 1fr; gap: 24px; }
}
.fc__col { display: grid; gap: 14px; }
.fc__node {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 14.5px; color: var(--text);
}
.fc__node .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent-glow);
}
.fc__node--urgent .dot { background: #ffb800; box-shadow: 0 0 12px rgba(255,184,0,0.45); }
.fc__hub {
  width: 110px; height: 110px; margin: 0 auto;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -0.02em;
  box-shadow: 0 0 0 8px rgba(255,59,48,0.15), 0 0 60px var(--accent-glow);
}
.fc__systems {
  margin: 24px auto 0; max-width: 720px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px 24px;
  text-align: center;
}
.fc__systems h4 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 14px; }
.fc__chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fc__chips span {
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: 13px; color: var(--text-dim);
}

/* ============================================================
   ROI TABLE
   ============================================================ */
.roi-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden;
  background: var(--bg-card);
}
.roi-table th, .roi-table td {
  padding: 18px 22px; text-align: left;
  font-size: 14.5px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.roi-table thead th {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); background: var(--bg-elev);
}
.roi-table tbody tr:last-child th,
.roi-table tbody tr:last-child td { border-bottom: none; }
.roi-table tbody th { font-weight: 600; color: var(--text); }
.roi-table tbody td { color: var(--text-dim); }
.roi-table .hl { background: rgba(255,59,48,0.06); color: var(--text); font-weight: 600; }
.roi-table thead .hl { color: var(--accent); }

/* ============================================================
   WIRTSCHAFTLICHKEIT — clean value cards (Hilfe statt Ersatz)
   ============================================================ */
.wirt__grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) { .wirt__grid { grid-template-columns: 1fr; } }

.wirt {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px 30px 34px;
  transition: border-color .2s, transform .2s;
}
.wirt:hover { border-color: var(--border-hi); transform: translateY(-2px); }
.wirt__num {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--accent);
  padding: 6px 14px;
  border: 1px solid rgba(255,59,48,0.30);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  margin-bottom: 22px;
}
.wirt__title {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 400;
  letter-spacing: 0; line-height: 1.15;
  margin-bottom: 14px; color: var(--text);
  text-transform: uppercase;
}
.wirt__body {
  font-size: 15px; line-height: 1.6; color: var(--text-dim); margin: 0;
  text-wrap: pretty;
}

.wirt__note {
  margin-top: 36px;
  display: flex; align-items: flex-start; gap: 16px;
  max-width: 880px; margin-left: auto; margin-right: auto;
  padding: 22px 26px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.wirt__note-icon { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.wirt__note p {
  margin: 0; font-size: 14.5px; color: var(--text-dim); line-height: 1.55;
}
.wirt__note strong { color: var(--text); font-weight: 600; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color .2s;
}
.faq-item.is-open { border-color: var(--border-hi); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px;
  background: transparent; border: none;
  color: var(--text); font-size: 1rem; font-weight: 600; text-align: left;
  cursor: pointer;
}
.faq-q .chev { transition: transform .25s ease; color: var(--text-muted); }
.is-open .faq-q .chev { transform: rotate(180deg); color: var(--accent); }
.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq-a > div { overflow: hidden; }
.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a p {
  padding: 0 26px 24px; color: var(--text-dim); line-height: 1.55;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--border);
  padding: 70px 0 50px;
  background: #050507;
}
.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 50px;
}
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
}
.footer__brand { max-width: 380px; }
.footer__brand .brand__logo { height: 44px; }
.footer__tag { margin-top: 18px; color: var(--text-dim); line-height: 1.55; }
.footer__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.footer__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-dim);
}
.footer__col h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.footer__col ul { list-style: none; display: grid; gap: 12px; }
.footer__col a { color: var(--text-dim); font-size: 14.5px; transition: color .2s; }
.footer__col a:hover { color: var(--text); }
.footer__bottom {
  margin-top: 50px; padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  font-size: 13px; color: var(--text-muted);
}

/* ============================================================
   SCROLL CAR — top-down minimalist car indicator on the left
   ============================================================ */
.scroll-car {
  position: fixed;
  /* sit between viewport edge (~12px) and the container's left edge
     ((100vw - 1200px) / 2) — only show when there's clear room outside content. */
  left: clamp(10px, calc((100vw - 1200px) / 2 - 20px), 50px);
  top: 110px;
  bottom: 100px;
  width: 28px;
  pointer-events: none;
  z-index: 30;
  display: none;
}
@media (min-width: 1320px) { .scroll-car { display: block; } }

.scroll-car__road {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg,
      transparent 0,
      rgba(255,255,255,0.04) 6%,
      rgba(255,255,255,0.08) 50%,
      rgba(255,255,255,0.04) 94%,
      transparent 100%);
  border-radius: 999px;
}
/* dashed centre marks for the road */
.scroll-car__road::after {
  content: ""; position: absolute; inset: 8% 0;
  left: 50%; transform: translateX(-50%);
  width: 1px;
  background-image: linear-gradient(180deg, transparent 50%, rgba(255,255,255,0.10) 50%);
  background-size: 1px 14px;
  border-radius: 999px;
}
/* Tire tracks left behind by the car as it drives downward.
   The trail extends from the top of the road down to the car's current Y. */
.scroll-car__trail {
  position: absolute;
  left: 50%;
  top: 0;
  width: 16px;
  height: calc(var(--y, 0) * 1px + 28px);
  transform: translateX(-50%);
  pointer-events: none;
  background-image:
    /* left tire track */
    linear-gradient(180deg,
      transparent 0,
      rgba(255,255,255,0.05) 4%,
      rgba(255,255,255,0.16) 12%,
      rgba(255,255,255,0.20) 100%),
    /* right tire track */
    linear-gradient(180deg,
      transparent 0,
      rgba(255,255,255,0.05) 4%,
      rgba(255,255,255,0.16) 12%,
      rgba(255,255,255,0.20) 100%);
  background-size: 2px 100%, 2px 100%;
  background-position: 3px 0, 11px 0;
  background-repeat: no-repeat;
  /* Fade out the top portion (older tracks) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 0;
}
.scroll-car.has-driven .scroll-car__trail {
  opacity: 1;
}

.scroll-car__car {
  position: absolute;
  left: 50%; top: 0;
  width: 30px;
  height: 56px;
  /* car drives downward as you scroll — driven by --y */
  transform: translate(-50%, calc(var(--y, 0) * 1px));
  transition: transform .18s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  opacity: 0;
  animation: carIntro .8s ease .4s forwards;
}
@keyframes carIntro { to { opacity: 1; } }

.scroll-car__car svg { width: 100%; height: 100%; display: block; }

/* headlight beam under the car (front-facing, downward) — narrower so it doesn't overlap content */
.scroll-car__car::before {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 50px; height: 80px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 60% at 50% 0%,
    rgba(255,232,170,0.14) 0%,
    rgba(255,232,170,0.05) 35%,
    rgba(255,232,170,0) 75%);
  opacity: 0.85;
  pointer-events: none;
}

/* taillight glow when scrolling has slowed/stopped */
.scroll-car.is-braking .scroll-car__car::after {
  opacity: 1;
}
.scroll-car__car::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 100%;
  width: 40px; height: 24px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 80% at 50% 100%,
    rgba(255,59,48,0.45) 0%,
    rgba(255,59,48,0.10) 50%,
    rgba(255,59,48,0) 80%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-car__car { transition: none; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal-word { opacity: 1 !important; }
}