/* ============================================================
   Pflegestimme – Hero
   Design tokens per Brand Guide
   ============================================================ */
:root {
  /* Farben */
  --color-primary-sage: #7F9279;
  --color-deep-sage:    #40513E;
  --color-soft-sage:    #DDE7D8;
  --color-offwhite:     #F7F5EF;
  --color-cream:        #EFEBDD;
  --color-offblack:     #1E211D;
  --color-muted-grey:   #73786F;
  --color-success-glow: #BFD8B8;

  /* Typografie */
  --font-sans:   "Satoshi", "Inter", "DM Sans", Arial, sans-serif;
  --font-accent: "Cormorant Garamond", Georgia, serif;

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

  /* Layout */
  --frame-pad:   14px;   /* white frame around the hero panel          */
  --notch-fill:  28px;   /* radius of the concave fillet on the notch  */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-sans);
  color: var(--color-offblack);
  background: #ffffff;              /* outer frame */
  min-height: 100vh;
  overflow-x: hidden;              /* contain the flying caller cards */
}

a { color: inherit; text-decoration: none; }

/* ============================================================
   NOTCH HEADER
   A centered white tab that dips into the hero panel, with
   convex bottom corners and concave fillets at the top sides.
   ============================================================ */
.notch {
  position: fixed;
  top: var(--frame-pad);
  left: 0;
  right: 0;
  z-index: 50;

  width: min(800px, 94vw);
  margin-inline: auto;
  height: 64px;
  background: #ffffff;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 14px 30px -16px rgba(64,81,62,.30);

  /* smooth grow-to-full-width on scroll */
  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),
    box-shadow .4s ease;
}

/* scrolled: full-width header bar */
.notch.is-scrolled {
  width: 100%;
  top: 0;
  border-radius: 0;
  box-shadow: 0 10px 28px -14px rgba(64,81,62,.22);
}

.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 frame */
.notch::before,
.notch::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--notch-fill);
  height: var(--notch-fill);
  background: #ffffff;
  pointer-events: none;
  transition: opacity .3s ease;
}
.notch::before {
  left: calc(-1 * var(--notch-fill));
  -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));
  -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));
}
/* fillets disappear as the bar reaches full width */
.notch.is-scrolled::before,
.notch.is-scrolled::after { opacity: 0; }

/* brand */
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.brand__mark {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  background: var(--color-deep-sage);
  color: var(--color-success-glow);
}
.brand__name { color: var(--color-offblack); }

/* nav */
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.nav a {
  font-size: 15px; font-weight: 500; color: var(--color-muted-grey);
  white-space: nowrap;
  transition: color .2s ease;
}
.nav a:hover { color: var(--color-offblack); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-weight: 700; font-size: 15px;
  border: none; cursor: pointer; white-space: nowrap;
  border-radius: var(--radius-pill);
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn--header {
  height: 42px; padding: 0 22px;
  background: var(--color-deep-sage); color: var(--color-offwhite);
}
.btn--header:hover { background: #34432f; box-shadow: 0 6px 18px rgba(64,81,62,.28); }

.btn--primary {
  background: var(--color-primary-sage); color: #fff;
  box-shadow: 0 10px 26px rgba(127,146,121,.35);
}
.btn--primary:hover { background: #74866e; box-shadow: 0 14px 32px rgba(127,146,121,.45); }

/* ============================================================
   HERO PANEL
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  margin: var(--frame-pad) var(--frame-pad) 0;   /* white frame; no gap below */
  min-height: calc(100vh - 2 * var(--frame-pad));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(44% 24% at 50% 0%, rgba(127,146,121,.16) 0%, rgba(127,146,121,0) 72%),
    radial-gradient(95% 70% at 50% 112%, rgba(221,231,216,.5) 0%, rgba(239,235,221,0) 60%),
    radial-gradient(120% 95% at 50% -8%, #fcfbf6 0%, var(--color-offwhite) 48%, var(--color-cream) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 140px 24px 0;
  isolation: isolate;
}
/* distribute free space: equal gap above content, between content↔trust, and below trust */
.hero__content { margin-top: auto; }
.hero .trustbar { margin: auto 0; padding-block: clamp(34px, 5vh, 60px); }

/* ----- HERO CONTENT ----- */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* badge */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-deep-sage);
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(127,146,121,.28);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(64,81,62,.08);
}
.badge__spark { color: var(--color-primary-sage); display: inline-flex; }
.badge__chevron { color: var(--color-muted-grey); display: inline-flex; }

/* headline */
.hero__title {
  margin-top: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  font-size: clamp(1.95rem, 5.4vw, 4.2rem);
}
.hero__title .line { display: block; white-space: nowrap; }
.hero__title .line--accent {
  font-family: var(--font-accent);
  font-size: 1.1em;            /* match optical size of the sans */
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary-sage);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-top: .04em;
}

/* subheadline */
.hero__sub {
  margin-top: 26px;
  max-width: 520px;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--color-muted-grey);
}
.hero__sub strong { color: var(--color-offblack); font-weight: 700; }

/* ============================================================
   CALL BOX (phone input + CTA)
   ============================================================ */
.callbox {
  position: relative;
  margin-top: 38px;
  width: 100%;
  max-width: 440px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(127,146,121,.18);
  border-radius: var(--radius-lg);
  padding: 18px;
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 60px rgba(64,81,62,.14);
}

/* ---- continuous border beam (vanilla port of the BorderBeam component) ----
   A light travels around the border: a conic gradient with one bright,
   trailing-fade arc, confined to a thin ring via a padding/border mask and
   rotated continuously. duration: 8s, sage light, soft glow. */
@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.callbox::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 2.5px;               /* beam ring thickness */
  pointer-events: none;
  background: conic-gradient(from var(--beam-angle),
    var(--color-deep-sage) 0deg,
    var(--color-primary-sage) 22deg,
    rgba(127,146,121,0.35) 60deg,
    rgba(127,146,121,0) 100deg,
    transparent 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(64,81,62,.45));
  animation: beam-travel 8s linear infinite;
}
.callbox > * { position: relative; z-index: 2; }

@keyframes beam-travel {
  to { --beam-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .callbox::before { animation: none; }
}

.callbox__input {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-offwhite);
  border: 1px solid rgba(115,120,111,.18);
  border-radius: var(--radius-md);
  padding: 0 16px;
  height: 56px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.callbox__input:focus-within {
  border-color: var(--color-primary-sage);
  box-shadow: 0 0 0 3px rgba(127,146,121,.18);
}
.callbox__flag { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.callbox__flag svg:first-child { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); overflow: hidden; }
.callbox__flagchev { color: var(--color-muted-grey); }
.callbox__input input {
  flex: 1; min-width: 0;
  border: none; background: transparent; outline: none;
  font-family: inherit; font-size: 16px; color: var(--color-offblack);
}
.callbox__input input::placeholder { color: var(--color-muted-grey); }

.callbox__cta { width: 100%; height: 56px; margin-top: 12px; font-size: 16px; }

.callbox__consent {
  margin-top: 14px;
  font-size: 12.5px; line-height: 1.55;
  color: var(--color-muted-grey);
}
.callbox__consent a { color: var(--color-primary-sage); font-weight: 600; }
.callbox__consent a:hover { text-decoration: underline; }

/* trust strip under the call box */
.trustbar {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 30px;
}
.trustbar li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #525648;
}
.trustbar svg { color: var(--color-primary-sage); flex-shrink: 0; }

/* ============================================================
   ORB — smooth, organic, "Siri"-like background motion
   Each layer has its own rotating wrapper-free animation: the
   spin runs on the layer, the drift on a transform applied to a
   second pseudo so the two compose without overriding each other.
   ============================================================ */
.orb {
  position: absolute;
  z-index: 1;
  top: 46%; left: 50%;
  width: min(860px, 96vw);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: blur(46px) saturate(1.08);
}

/* Each layer is a soft blob whose gradient fades fully to transparent
   well before its edges, so nothing ever reads as a hard disc. The
   layers drift, scale and rotate on independent, non-synced timings,
   which gives the slow, organic, "Siri"-like wander. */
.orb__layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  mix-blend-mode: multiply;
  will-change: transform;
}

/* soft central breathing glow — the calm "voice" core */
.orb__layer--core {
  background:
    radial-gradient(circle at 50% 50%, rgba(191,216,184,.50) 0%, rgba(191,216,184,.18) 32%, rgba(247,245,239,0) 58%);
  animation: breathe 10s ease-in-out infinite;
}

.orb__layer--a {
  background:
    radial-gradient(closest-side at 40% 38%, rgba(127,146,121,.42) 0%, rgba(127,146,121,0) 60%);
  animation: drift-a 19s ease-in-out infinite;
}
.orb__layer--b {
  background:
    radial-gradient(closest-side at 64% 58%, rgba(191,216,184,.55) 0%, rgba(191,216,184,0) 62%);
  animation: drift-b 23s ease-in-out infinite;
}
.orb__layer--c {
  background:
    radial-gradient(closest-side at 58% 30%, rgba(221,231,216,.6) 0%, rgba(221,231,216,0) 64%),
    radial-gradient(closest-side at 36% 70%, rgba(127,146,121,.30) 0%, rgba(127,146,121,0) 60%);
  animation: drift-c 17s ease-in-out infinite;
}

/* faint warm bloom in the centre so the green never feels cold */
.orb__grain {
  position: absolute; inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 50%);
  animation: breathe 13s ease-in-out infinite reverse;
}

@keyframes breathe {
  0%, 100% { transform: scale(.96); opacity: .9; }
  50%      { transform: scale(1.06); opacity: 1; }
}

@keyframes drift-a {
  0%, 100% { transform: translate(-6%, -4%) scale(1.04) rotate(0deg); }
  33%      { transform: translate(7%, 5%)  scale(1.12) rotate(40deg); }
  66%      { transform: translate(-4%, 8%) scale(.98) rotate(-30deg); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(6%, 4%)  scale(1.08) rotate(0deg); }
  40%      { transform: translate(-8%, -6%) scale(.95) rotate(-50deg); }
  75%      { transform: translate(5%, -8%) scale(1.14) rotate(35deg); }
}
@keyframes drift-c {
  0%, 100% { transform: translate(3%, -7%) scale(1) rotate(0deg); }
  50%      { transform: translate(-7%, 5%) scale(1.16) rotate(60deg); }
}

@media (prefers-reduced-motion: reduce) {
  .orb__layer, .orb__grain { animation: none !important; }
  .orb__layer--core { opacity: .85; }
}

/* ============================================================
   TEXT REVEAL (scroll-driven, word by word)
   ============================================================ */
.reveal {
  position: relative;
  z-index: 0;
  background: #ffffff;           /* same as the hero's outer frame */
  padding: 20vh 24px 6vh;        /* room for the text to travel through the viewport */
}
.reveal__sticky {
  max-width: 900px;
  margin: 0 auto;
}
.reveal__text {
  max-width: 900px;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: var(--color-offblack);
}
.reveal-word {
  opacity: 1;                    /* readable fallback if JS is off */
  transition: opacity .15s linear;
}
.reveal.is-ready .reveal-word { opacity: .12; }     /* dimmed until revealed */
.reveal-word--accent { color: var(--color-primary-sage); }

@media (prefers-reduced-motion: reduce) {
  .reveal { height: auto; }
  .reveal__sticky { position: static; height: auto; padding: 96px 24px; }
  .reveal-word { opacity: 1 !important; }
}

/* ============================================================
   CALL FLOW (scroll-pinned: caller cards fly in, stack, then
   merge into one Pflegestimme card that grows and holds)
   ============================================================ */
.flow {
  position: relative;
  height: 320vh;                 /* scroll length of the whole sequence */
  margin-top: -80vh;             /* overlap the benefits section → cards start flying in from that viewport */
  background: transparent;
}
.flow__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: transparent;       /* cards appear over/around the still-visible text */
}
.flow__eyebrow {
  position: absolute;
  top: clamp(84px, 17vh, 170px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-muted-grey);
  white-space: nowrap;
  opacity: 0;
}
.flow__cards { position: absolute; inset: 0; }

/* caller cards + final card share the centred anchor */
.caller,
.flow__final {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.caller {
  width: clamp(250px, 25vw, 320px);
  background: #ffffff;
  border: 1px solid rgba(127,146,121,.16);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: 0 28px 55px -26px rgba(64,81,62,.40);
  opacity: 0;
}
.caller__head { display: flex; align-items: center; gap: 12px; }
.caller__avatar {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-primary-sage);
  color: #fff; font-weight: 700; font-size: 15px;
}
.caller--deep  .caller__avatar { background: var(--color-deep-sage); }
.caller--mute  .caller__avatar { background: var(--color-muted-grey); }
.caller--urgent .caller__avatar { background: #C2563E; font-size: 22px; }
.caller__name { font-size: 16px; font-weight: 700; color: var(--color-offblack); margin-bottom: 6px; }
.caller__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--color-deep-sage);
  background: var(--color-soft-sage);
  padding: 3px 9px; border-radius: var(--radius-pill);
}
.caller__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary-sage); }
.caller--urgent .caller__badge { color: #8c3a28; background: #f3d9d1; }
.caller--urgent .caller__badge i { background: #C2563E; }
.caller__quote {
  margin: 14px 0 0;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-muted-grey);
}

/* final Pflegestimme card */
.flow__final {
  width: clamp(300px, 40vw, 470px);
  background: #ffffff;
  border: 1px solid rgba(127,146,121,.18);
  border-radius: var(--radius-xl);
  padding: 32px 30px;
  text-align: center;
  box-shadow: 0 50px 100px -34px rgba(64,81,62,.45);
  opacity: 0;
  z-index: 20;
}
.flow__final-mark {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-deep-sage);
  color: var(--color-success-glow);
  margin-bottom: 18px;
}
.flow__final-text {
  margin: 0 0 22px;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-offblack);
}
.flow__final-text em {
  font-family: var(--font-accent);
  font-size: 1.1em;            /* match optical size of the sans */
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary-sage);
}
.flow__final-form { display: flex; gap: 10px; }
.flow__final-input {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  background: var(--color-offwhite);
  border: 1px solid rgba(115,120,111,.18);
  border-radius: var(--radius-md);
  padding: 0 14px; height: 52px;
}
.flow__final-input input {
  flex: 1; min-width: 0;
  border: none; background: transparent; outline: none;
  font-family: inherit; font-size: 15px; color: var(--color-offblack);
}
.flow__final-input input::placeholder { color: var(--color-muted-grey); }
.flow__final-form .btn { height: 52px; padding: 0 24px; flex-shrink: 0; }

/* iPhone mockup (active call) — cards vanish behind it, then it morphs into the card */
.flow__phone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(228px, 22vw, 274px);
  aspect-ratio: 9 / 19.3;
  padding: 11px;
  background: #14160F;
  border-radius: 46px;
  box-shadow: 0 50px 95px -34px rgba(20,22,15,.55), inset 0 0 0 2px rgba(255,255,255,.05);
  z-index: 15;
  opacity: 0;
  will-change: transform, opacity;
}
.flow__phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: linear-gradient(168deg, #ffffff 0%, #EAF0E6 55%, #DDE7D8 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 48px 18px 24px;
}
.flow__phone-island {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 25px; border-radius: 999px; background: #14160F;
}
.flow__phone-label {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-muted-grey);
}
.flow__phone-call { display: flex; flex-direction: column; align-items: center; }
.flow__phone-avatar {
  position: relative;
  width: 78px; height: 78px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-deep-sage);
  color: var(--color-success-glow);
  margin-bottom: 16px;
}
.flow__phone-avatar::before {
  content: ""; position: absolute; inset: -8px;
  border-radius: 50%; border: 2px solid rgba(127,146,121,.5);
  animation: phone-ring 1.8s ease-out infinite;
}
.flow__phone-name { font-size: 20px; font-weight: 700; color: var(--color-offblack); }
.flow__phone-status {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--color-muted-grey);
}
.flow__phone-status i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-primary-sage);
  animation: phone-blink 1.4s ease-in-out infinite;
}
.flow__phone-actions { display: flex; align-items: center; gap: 14px; }
.flow__phone-btn {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(30,33,29,.07);
  color: var(--color-deep-sage);
}
.flow__phone-btn--end { background: #E5484D; color: #fff; }
.flow__phone-btn--end svg { transform: rotate(135deg); }

@keyframes phone-ring {
  0%   { transform: scale(1);    opacity: .7; }
  100% { transform: scale(1.28); opacity: 0; }
}
@keyframes phone-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (max-width: 560px) {
  .flow__final-form { flex-direction: column; }
  .flow__final-form .btn { width: 100%; }
}

/* static, no-animation fallback */
@media (prefers-reduced-motion: reduce) {
  .flow { height: auto; }
  .flow__stage { position: static; height: auto; overflow: visible; padding: 96px 20px; }
  .flow__cards { position: static; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
  .flow__eyebrow { position: static; transform: none; opacity: 1; margin-bottom: 28px; text-align: center; }
  .caller, .flow__final {
    position: static; transform: none !important; opacity: 1 !important;
  }
  .flow__final { margin: 24px auto 0; }
  .flow__phone { display: none; }
}

/* ============================================================
   HERZSTÜCK — dark split screen, sticky stacking priority cards
   ============================================================ */
.herz {
  background: #E9F0E4;
  color: var(--color-offblack);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: clamp(70px, 10vh, 120px) 24px clamp(90px, 12vh, 150px);
}
.herz__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* left: sticky intro */
.herz__intro { position: sticky; top: clamp(110px, 18vh, 200px); }
.herz__eyebrow {
  margin: 0 0 18px;
  font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #9DBE93;
}
.herz__title {
  margin: 0;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  color: var(--color-offblack);
}
.herz__title em {
  font-family: var(--font-accent);
  font-size: 1.1em;            /* match optical size of the sans */
  font-style: italic; font-weight: 500;
  color: var(--color-primary-sage);
}
.herz__sub {
  margin: 22px 0 0; max-width: 440px;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6;
  color: var(--color-muted-grey);
}
.herz__note {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 32px; max-width: 460px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid rgba(127,146,121,.22);
  border-radius: var(--radius-md);
}
.herz__note-icon { color: var(--color-primary-sage); flex-shrink: 0; margin-top: 1px; }
.herz__note p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-muted-grey); }
.herz__note strong { color: var(--color-offblack); font-weight: 700; }

/* right: stacking cards */
.herz__cards { display: block; }
/* real content spacer (NOT padding) so every card stays pinned and they overlap */
.hcard-spacer { height: 7vh; }
.hcard {
  position: sticky;
  top: clamp(110px, 16vh, 180px);
  margin-bottom: 46vh;
  transform-origin: center top;
  will-change: transform, opacity;

  background: #ffffff;
  border: 1px solid rgba(127,146,121,.18);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 38px);
  box-shadow: 0 30px 60px -34px rgba(64,81,62,.4);
}
.hcard:last-child { margin-bottom: 0; }

.hcard__top { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.hcard__dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-grid; place-items: center;
  position: relative;
}
.hcard__dot::after {
  content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor;
}
.hcard__label {
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.hcard__tags {
  margin: 0 0 14px;
  font-size: 14px; font-weight: 600;
  color: var(--color-muted-grey);
}
.hcard__title {
  margin: 0 0 16px;
  font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.12;
  color: var(--color-offblack);
}
.hcard__body {
  margin: 0; max-width: 460px;
  font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6;
  color: var(--color-muted-grey);
}

/* per-state accent colours */
.hcard--routine .hcard__dot { color: #9DBE93; box-shadow: 0 0 0 6px rgba(157,190,147,.12), 0 0 22px rgba(157,190,147,.45); }
.hcard--routine .hcard__label { color: var(--color-primary-sage); }
.hcard--wichtig .hcard__dot { color: #D8A93A; box-shadow: 0 0 0 6px rgba(216,169,58,.14), 0 0 18px rgba(216,169,58,.4); }
.hcard--wichtig .hcard__label { color: #B5891E; }
.hcard--notfall .hcard__dot { color: #E5746B; box-shadow: 0 0 0 6px rgba(229,116,107,.14), 0 0 18px rgba(229,116,107,.45); }
.hcard--notfall .hcard__label { color: #C2563E; }
.hcard--notfall { border-color: rgba(229,116,107,.28); }

@media (max-width: 860px) {
  .herz__grid { grid-template-columns: 1fr; gap: 36px; }
  .herz__intro { position: static; }
  .hcard { top: 90px; margin-bottom: 30vh; }
}
@media (prefers-reduced-motion: reduce) {
  .hcard { position: static; margin-bottom: 22px; transform: none !important; opacity: 1 !important; }
}

/* ============================================================
   HOW IT WORKS — flowchart with animated data-flow lines
   ============================================================ */
.how {
  background: #ffffff;
  padding: clamp(40px, 6vh, 72px) 24px clamp(80px, 12vh, 150px);
}
.how__head { max-width: 760px; margin: 0 auto clamp(40px, 6vh, 72px); text-align: center; }
.how__eyebrow {
  margin: 0 0 16px;
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-primary-sage);
}
.how__title {
  margin: 0;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: var(--color-offblack);
}
.how__sub {
  margin: 20px auto 0; max-width: 600px;
  font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.6;
  color: var(--color-muted-grey);
}

.flowchart {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 1100 / 640;
}
.flowchart__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.fc-line {
  fill: none;
  stroke: rgba(127,146,121,.30);
  stroke-width: 1.6;
  stroke-dasharray: 2 4;
  stroke-linecap: round;
  animation: fc-drift 1.8s linear infinite;
}
.fc-flow {
  fill: none;
  stroke: var(--color-success-glow);
  stroke-width: 2.2;
  stroke-dasharray: 4 96;          /* small soft glide point, not a hard block */
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(127,146,121,.55)) drop-shadow(0 0 9px rgba(191,216,184,.4));
  animation: fc-flow 7s ease-in-out infinite;
}
/* spread across the cycle so only a few glide at once → calmer, more organic */
.fc-flows path:nth-child(1) { animation-delay: 0s;   }
.fc-flows path:nth-child(2) { animation-delay: 2.6s; }
.fc-flows path:nth-child(3) { animation-delay: 5.1s; }
.fc-flows path:nth-child(4) { animation-delay: 1.3s; }
.fc-flows path:nth-child(5) { animation-delay: 3.9s; }
.fc-flows path:nth-child(6) { animation-delay: 0.7s; }
.fc-flows path:nth-child(7) { animation-delay: 5.8s; }
.fc-flows path:nth-child(8) { animation-delay: 2.1s; }
.fc-flows path:nth-child(9) { animation-delay: 4.4s; }
@keyframes fc-drift { to { stroke-dashoffset: -6; } }
@keyframes fc-flow {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  14%  { opacity: .85; }
  46%  { opacity: .85; }
  60%  { stroke-dashoffset: -100; opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }   /* quiet pause before the next glide */
}

/* nodes */
.fc-label {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-muted-grey);
}
.fc-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 18%;
  display: flex; align-items: center; gap: 9px;
  background: #ffffff;
  border: 1px solid rgba(127,146,121,.20);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 600; line-height: 1.25;
  color: var(--color-offblack);
  box-shadow: 0 14px 30px -18px rgba(64,81,62,.40);
}
.fc-in i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-primary-sage); flex-shrink: 0;
}
.fc-in--urgent i, .fc-out--urgent { }
.fc-in--urgent i { background: #C2563E; }
.fc-out i { display: inline-flex; flex-shrink: 0; color: var(--color-primary-sage); }
.fc-out--urgent i { color: #C2563E; }

/* hub */
.fc-hub {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 11%;
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-deep-sage);
  color: #fff;
  box-shadow: 0 0 0 10px rgba(127,146,121,.12), 0 0 60px rgba(127,146,121,.45), 0 24px 50px -18px rgba(64,81,62,.5);
  animation: fc-pulse 3.4s ease-in-out infinite;
}
@keyframes fc-pulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(127,146,121,.10), 0 0 45px rgba(127,146,121,.35), 0 24px 50px -18px rgba(64,81,62,.5); }
  50%      { box-shadow: 0 0 0 14px rgba(127,146,121,.16), 0 0 70px rgba(127,146,121,.55), 0 24px 50px -18px rgba(64,81,62,.5); }
}
.fc-hublabel {
  position: absolute;
  transform: translate(-50%, -100%);   /* sits above the symbol */
  text-align: center; white-space: nowrap;
}
.fc-hublabel strong { display: block; font-size: clamp(14px, 1.4vw, 18px); font-weight: 700; color: var(--color-offblack); }
.fc-hublabel span   { display: block; margin-top: 2px; font-size: clamp(11px, 1.1vw, 13px); color: var(--color-muted-grey); }

/* systems panel */
.fc-systems {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30%;
  text-align: center;
  background: var(--color-offwhite);
  border: 1px solid rgba(127,146,121,.20);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 16px 36px -20px rgba(64,81,62,.35);
}
.fc-systems__title {
  display: block; margin-bottom: 12px;
  font-size: clamp(11px, 1.05vw, 13px); font-weight: 700;
  letter-spacing: .04em; color: var(--color-deep-sage);
}
.fc-systems__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fc-systems__chips span {
  font-size: clamp(11px, 1vw, 13px); font-weight: 600;
  color: var(--color-deep-sage);
  background: var(--color-soft-sage);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .fc-line, .fc-flow, .fc-hub { animation: none !important; }
}

/* mobile: stack the flow vertically, drop the SVG connectors */
@media (max-width: 860px) {
  .flowchart {
    aspect-ratio: auto;
    max-width: 420px;
    display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  }
  .flowchart__lines { display: none; }
  .fc-node, .fc-hub, .fc-hublabel, .fc-systems, .fc-label {
    position: static !important;
    transform: none !important;
    left: auto !important; top: auto !important;
    width: auto !important;
  }
  .fc-label { text-align: center; margin: 14px 0 2px; }
  .fc-node { width: auto !important; justify-content: center; }
  .fc-hub { width: 64px !important; aspect-ratio: 1; margin: 4px auto 0; }
  .fc-hublabel { text-align: center; margin-bottom: 4px; }
  .fc-systems { width: auto !important; }
}

/* ============================================================
   WIRTSCHAFTLICHKEIT — comparison table
   ============================================================ */
.roi {
  background: var(--color-offwhite);
  padding: clamp(70px, 10vh, 120px) 24px clamp(80px, 11vh, 130px);
}
.roi__head { max-width: 780px; margin: 0 auto clamp(40px, 6vh, 64px); text-align: center; }
.roi__eyebrow {
  margin: 0 0 16px;
  font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-primary-sage);
}
.roi__title {
  margin: 0;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--color-offblack);
}
.roi__title em {
  font-family: var(--font-accent);
  font-size: 1.1em;            /* match optical size of the sans */
  font-style: italic; font-weight: 500;
  color: var(--color-primary-sage);
}

.roi__tablewrap {
  max-width: 920px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 34px 80px -38px rgba(64,81,62,.32);
  overflow: hidden;
}
.roi__table { width: 100%; border-collapse: collapse; }
.roi__table th,
.roi__table td {
  padding: clamp(15px, 2vw, 22px) clamp(16px, 2.6vw, 32px);
  text-align: left;
  font-size: clamp(.92rem, 1.2vw, 1.05rem);
  vertical-align: middle;
}
.roi__table thead th {
  font-weight: 700;
  color: var(--color-muted-grey);
  font-size: clamp(.95rem, 1.3vw, 1.1rem);
}
.roi__table tbody th {           /* row labels */
  font-weight: 700;
  color: var(--color-offblack);
  white-space: nowrap;
}
.roi__table tbody td { color: var(--color-muted-grey); }
.roi__table tbody tr:not(:last-child) th,
.roi__table tbody tr:not(:last-child) td {
  border-bottom: 1px solid rgba(127,146,121,.14);
}

/* highlighted Pflegestimme column */
.roi__table td.is-hl,
.roi__table tbody td.is-hl { background: rgba(221,231,216,.30); color: var(--color-deep-sage); font-weight: 700; }
.roi__table thead th.is-hl {
  background: var(--color-soft-sage);
  color: var(--color-deep-sage);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.roi__note {
  max-width: 660px;
  margin: clamp(28px, 4vh, 40px) auto 0;
  text-align: center;
  font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6;
  color: var(--color-muted-grey);
}
.roi__note strong { color: var(--color-offblack); font-weight: 700; }

.roi__cta { text-align: center; margin-top: clamp(28px, 4vh, 40px); }
.roi__btn { height: 56px; padding: 0 34px; font-size: 16px; }

@media (max-width: 640px) {
  .roi__tablewrap { overflow-x: auto; }
  .roi__table { min-width: 460px; }
}

/* ============================================================
   INTEGRATIONEN — endless, non-interactive logo marquee
   ============================================================ */
.integ {
  background: #ffffff;
  padding: clamp(70px, 10vh, 120px) 0 clamp(80px, 11vh, 130px);
  overflow: hidden;
}
.integ__head { max-width: 760px; margin: 0 auto clamp(44px, 6vh, 72px); padding: 0 24px; text-align: center; }
.integ__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700;
  color: var(--color-deep-sage);
  background: var(--color-soft-sage);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  margin-bottom: 22px;
}
.integ__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary-sage); }
.integ__title {
  margin: 0;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
  font-size: clamp(2rem, 4vw, 3.1rem);
  color: var(--color-offblack);
}
.integ__title em {
  font-family: var(--font-accent);
  font-size: 1.1em;
  font-style: italic; font-weight: 500;
  color: var(--color-primary-sage);
}
.integ__sub {
  margin: 20px auto 0; max-width: 600px;
  font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.6;
  color: var(--color-muted-grey);
}

.integ__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 18px);
  pointer-events: none;          /* not interactive, no hover */
}
.marquee {
  overflow: hidden;
  -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__track { display: flex; width: max-content; will-change: transform; }
.marquee--l .marquee__track { animation: marquee-x 55s linear infinite; }
.marquee--r .marquee__track { animation: marquee-x 55s linear infinite reverse; }
.marquee:nth-child(2) .marquee__track { animation-duration: 47s; }
.marquee:nth-child(3) .marquee__track { animation-duration: 63s; }
.marquee__group { display: flex; }
@keyframes marquee-x { to { transform: translateX(-50%); } }

.intlogo {
  flex: 0 0 auto;
  margin-right: clamp(12px, 1.5vw, 18px);
  width: clamp(168px, 16vw, 208px);
  height: clamp(76px, 9vh, 94px);
  display: flex; align-items: center; justify-content: center; gap: 11px;
  background: #ffffff;
  border: 1px solid rgba(127,146,121,.14);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 26px -20px rgba(64,81,62,.32);
}
.intlogo__mark {
  position: relative;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 9px;
  background: rgba(127,146,121,.16);
}
.intlogo__mark::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(115,120,111,.5);
}
.intlogo span {
  font-weight: 700; font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: -0.01em; color: #9aa093;
}
.intlogo img {
  max-height: 42px;
  max-width: 76%;
  width: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none !important; }
}

/* ============================================================
   VERTRAUEN / SICHERHEIT — dark 3-up cards
   ============================================================ */
.trust {
  background: #E9F0E4;
  color: var(--color-offblack);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: clamp(70px, 10vh, 120px) 24px clamp(80px, 11vh, 130px);
}
.trust__head { max-width: 780px; margin: 0 auto clamp(44px, 6vh, 72px); text-align: center; }
.trust__eyebrow {
  margin: 0 0 18px;
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #9DBE93;
}
.trust__title {
  margin: 0;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--color-offblack);
}
.trust__title em {
  font-family: var(--font-accent);
  font-size: 1.1em;
  font-style: italic; font-weight: 500;
  color: var(--color-primary-sage);
}
.trust__sub {
  margin: 20px auto 0; max-width: 620px;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6;
  color: var(--color-muted-grey);
}

.trust__grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
}
.tcard {
  background: #ffffff;
  border: 1px solid rgba(127,146,121,.18);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.2vw, 32px);
  box-shadow: 0 24px 50px -36px rgba(64,81,62,.35);
}
.tcard__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--color-soft-sage);
  color: var(--color-deep-sage);
  margin-bottom: 18px;
}
.tcard__title {
  margin: 0 0 7px;
  font-size: clamp(1.1rem, 1.4vw, 1.28rem); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.2;
  color: var(--color-offblack);
}
.tcard__text {
  margin: 0;
  font-size: clamp(.95rem, 1.15vw, 1.05rem); line-height: 1.5;
  color: var(--color-muted-grey);
}

@media (max-width: 860px) {
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .trust__grid { grid-template-columns: 1fr; max-width: 380px; }
}

/* ============================================================
   SECTION EYEBROWS — soft-sage badge style (matches integ badge)
   ============================================================ */
.how__eyebrow,
.herz__eyebrow,
.roi__eyebrow,
.trust__eyebrow,
.faq__eyebrow,
.benefits__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-soft-sage);
  color: var(--color-deep-sage);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.how__eyebrow::before,
.herz__eyebrow::before,
.roi__eyebrow::before,
.trust__eyebrow::before,
.faq__eyebrow::before,
.benefits__eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-primary-sage);
  flex-shrink: 0;
}

/* ============================================================
   BENEFITS — 3 biggest daily relievers
   ============================================================ */
.benefits {
  background: #ffffff;
  padding: clamp(70px, 10vh, 120px) 24px clamp(70px, 10vh, 120px);
}
.benefits__head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vh, 60px); }
.benefits__title {
  margin: 0;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--color-offblack);
}
.benefits__title em {
  font-family: var(--font-accent);
  font-size: 1.1em;
  font-style: italic; font-weight: 500;
  color: var(--color-primary-sage);
}
.benefits__sub {
  margin: 18px auto 0; max-width: 560px;
  font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6;
  color: var(--color-muted-grey);
}
.benefits__grid {
  max-width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
}
.bcard {
  display: flex; flex-direction: column;
  background: #E9F0E4;
  border: 1px solid rgba(127,146,121,.20);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 44px -28px rgba(64,81,62,.32);
}
.bcard__media {
  position: relative;
  aspect-ratio: 4 / 3.2;
  background-size: cover;
  background-position: center;
}
.bcard__badge {
  position: absolute; top: 14px; left: 14px;
  font-size: 12.5px; font-weight: 700;
  color: var(--color-deep-sage);
  background: rgba(255,255,255,.92);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  box-shadow: 0 4px 12px rgba(30,33,29,.12);
  backdrop-filter: blur(4px);
}
.bcard__body { padding: clamp(22px, 2.2vw, 30px); }
.bcard__body h3 {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.2;
  color: var(--color-offblack);
}
.bcard__body p {
  margin: 0;
  font-size: clamp(.98rem, 1.2vw, 1.05rem); line-height: 1.55;
  color: var(--color-muted-grey);
}
@media (max-width: 860px) {
  .benefits__grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* ============================================================
   FAQ — accordion
   ============================================================ */
.faq {
  background: var(--color-offwhite);
  padding: clamp(70px, 10vh, 120px) 24px clamp(80px, 11vh, 130px);
}
.faq__head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vh, 60px); }
.faq__title {
  margin: 0;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--color-offblack);
}
.faq__title em {
  font-family: var(--font-accent);
  font-size: 1.1em;
  font-style: italic; font-weight: 500;
  color: var(--color-primary-sage);
}
.faq__list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq__item {
  background: #ffffff;
  border: 1px solid rgba(127,146,121,.16);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 32px -24px rgba(64,81,62,.32);
  overflow: hidden;
  transition: border-color .25s ease;
}
.faq__item.is-open { border-color: rgba(127,146,121,.34); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem); font-weight: 700;
  color: var(--color-offblack);
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.4vw, 28px);
}
.faq__icon { flex-shrink: 0; color: var(--color-primary-sage); transition: transform .3s ease; }
.faq__item.is-open .faq__icon { transform: rotate(180deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a p {
  margin: 0;
  padding: 0 clamp(20px, 2.4vw, 28px) clamp(20px, 2.2vw, 24px);
  max-width: 680px;
  font-size: clamp(.98rem, 1.2vw, 1.08rem); line-height: 1.6;
  color: var(--color-muted-grey);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--color-deep-sage);
  color: rgba(247,245,239,.7);
  padding: clamp(56px, 8vh, 88px) 24px 28px;
}
.footer__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
}
.footer__logo {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(20px, 2vw, 24px); font-weight: 700; color: #F7F5EF;
}
.footer__mark {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(221,231,216,.16);
  color: var(--color-success-glow);
}
.footer__tag {
  margin: 22px 0 26px; max-width: 360px;
  font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.55;
  color: rgba(247,245,239,.6);
}
.footer__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.footer__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: rgba(247,245,239,.85);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}
.footer__badge svg { color: var(--color-success-glow); }
.footer__flag { display: inline-flex; line-height: 0; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.footer__eu { display: inline-flex; line-height: 0; }
.footer__col h3 { margin: 0 0 22px; font-size: 18px; font-weight: 700; color: #F7F5EF; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.footer__col li { position: relative; padding-left: 20px; }
.footer__col li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(191,216,184,.7);
}
.footer__col a {
  color: rgba(247,245,239,.72);
  font-size: clamp(.98rem, 1.1vw, 1.05rem);
  transition: color .2s ease;
}
.footer__col a:hover { color: #F7F5EF; }
.footer__bottom {
  max-width: 1200px; margin: clamp(40px, 6vh, 64px) auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: rgba(247,245,239,.5);
}
.footer__bottom p { margin: 0; }

@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr; gap: 38px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .nav { display: none; }
  .notch { height: 58px; }
  .notch__inner { gap: 14px; padding: 0 10px 0 16px; }
  .flow { margin-top: -45vh; }
  .hero { padding: 120px 18px 0; }
  .hero__title { margin-top: 22px; }
}

@media (max-width: 420px) {
  .brand__name { display: none; }
}