/* ===== tokens/fonts.css ===== */

/* Cal Sans UI — variable font, axes: wght 300–700, GEOM 0–100.
   GEOM 0 = "core" letterforms (display), 50 = "Text", 100 = "Geo". */
@font-face{font-family:"Cal Sans UI";src:url("fonts/CalSansUI.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
/* Named instance families, so `font-family` alone selects an optical mode. */
@font-face{font-family:"Cal Sans UI Text";src:url("fonts/CalSansUI.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;font-variation-settings:"GEOM" 50}
@font-face{font-family:"Cal Sans UI Geo";src:url("fonts/CalSansUI.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;font-variation-settings:"GEOM" 100}

/* ===== tokens/colors.css ===== */

/* Viscerex 3.0 — colour tokens. Every value transcribed from the Figma frame. */
:root{
  /* Base palette */
  --vx-ink:#2E4746;            /* rgb(46,71,70)   primary text, filled CTA, outline stroke */
  --vx-ink-deep:#173332;       /* rgb(23,51,50)   dark card surface, nav text */
  --vx-ink-line:#144543;       /* rgb(20,69,67)   hairline rule on dark */
  --vx-mint:#B0D5D0;           /* rgb(176,213,208) eyebrow tag, bullet dots */
  --vx-mint-wash:rgba(176,213,208,.25); /* stat-card footer wash */
  --vx-sand:#EDD7AB;           /* rgb(237,215,171) footnote number chips */
  --vx-cream:#FEF7E9;          /* rgb(254,247,233) page background */
  --vx-taupe:#776D5A;          /* rgb(119,109,90)  image placeholder fill */
  --vx-white:#FFFFFF;
  --vx-track:#F5F5F5;          /* rgb(245,245,245) progress track */

  /* Data / semantic accents (stat bars) */
  --vx-green:#00C21D;          /* rgb(0,194,29)   live dot, activity bar */
  --vx-indigo:#202884;         /* rgb(32,40,132)  sleep bar */
  --vx-cyan:#00B2FF;           /* rgb(0,178,255)  stress bar */

  /* Semantic aliases */
  --vx-bg-page:var(--vx-cream);
  --vx-text-primary:var(--vx-ink);
  --vx-border-hairline:var(--vx-ink-line);
}

/* ===== tokens/typography.css ===== */

/* Viscerex 3.0 — typography tokens. Sizes are the exact values from the frame. */
:root{
  --vx-font-display:"Cal Sans UI",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --vx-font-text:"Cal Sans UI Text","Cal Sans UI",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --vx-font-geo:"Cal Sans UI Geo","Cal Sans UI",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --vx-weight-regular:400;
  --vx-weight-medium:490;
  --vx-weight-bold:700;

  /* Sizes in use */
  --vx-size-64:64px;  /* hero headline */
  --vx-size-46:46px;
  --vx-size-32:32px;
  --vx-size-30:30px;  /* stat readout (127/81) */
  --vx-size-28:28px;  /* trustpilot score */
  --vx-size-24:24px;  /* eyebrow tag, testimonial name */
  --vx-size-22:22px;  /* benefit list */
  --vx-size-20:20px;  /* section headline, CTA label, stat value */
  --vx-size-16:16px;  /* nav, small CTA, LIVE, stat caption */
  --vx-size-15:15px;  /* stat label */
  --vx-size-14:14px;  /* announcement bar, stat row label */
  --vx-size-11:11px;  /* footnote chip */

  --vx-leading-tight:1;      /* 100% — the frame's default for almost all text */
  --vx-leading-display:1.15; /* hero headline only */
  --vx-tracking-tight:-0.02em;
  --vx-tracking-none:0;
}

/* ===== tokens/layout.css ===== */

/* Viscerex 3.0 — spacing, radii, shadows, layout. Values taken from the frame. */
:root{
  /* Spacing steps observed in the frame */
  --vx-space-6:6px;    /* CTA icon gap */
  --vx-space-20:20px;  /* small CTA horizontal padding, tag inset */

  /* Radii */
  --vx-radius-chip:2px;    /* footnote number chip */
  --vx-radius-sm:5px;      /* eyebrow tag, LIVE badge */
  --vx-radius-card:15px;   /* every card + progress-bar caps */
  --vx-radius-photo:35px;  /* testimonial photo mask */
  --vx-radius-pill-sm:25px;/* 40px & 50px tall CTAs */
  --vx-radius-pill:30px;   /* 60px tall CTA */
  --vx-radius-round:50%;

  /* Borders */
  --vx-border-width:2px;   /* outline CTA */
  --vx-border-width-thick:3px; /* filled CTA ring */

  /* Elevation — the frame uses exactly one shadow */
  --vx-shadow-card:0 4px 20px 0 rgba(0,0,0,.15);

  /* Layout */
  --vx-announce-height:30px;

  /* Motion */
  --vx-ease:cubic-bezier(.2,.7,.3,1); /* @kind other */
  --vx-duration-fast:120ms; /* @kind other */
  --vx-duration:200ms; /* @kind other */
}

/* ===== tokens/base.css ===== */

/* Viscerex 3.0 — minimal global reset / defaults. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--vx-bg-page);color:var(--vx-text-primary);font-family:var(--vx-font-text);font-size:var(--vx-size-16);line-height:var(--vx-leading-tight);letter-spacing:var(--vx-tracking-tight)}
h1,h2,h3,h4{margin:0;font-family:var(--vx-font-display);font-weight:var(--vx-weight-bold);text-transform:uppercase;letter-spacing:var(--vx-tracking-tight);line-height:var(--vx-leading-display)}
h1{font-size:var(--vx-size-64)}h2{font-size:var(--vx-size-46)}h3{font-size:var(--vx-size-32)}h4{font-size:var(--vx-size-24)}
p{margin:0;text-wrap:pretty}
a{color:var(--vx-text-primary);text-decoration:none;transition:opacity var(--vx-duration) var(--vx-ease)}
a:hover{opacity:.7}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;letter-spacing:inherit}
img{display:block;max-width:100%}

/* ===== tokens/core.css ===== */

/* Interaction states for Viscerex primitives.
   The Figma frame documents rest states only; hover/press below are the
   system's defined behaviour — swap the fill, never the geometry. */
.vx-btn:hover{background:var(--vx-ink-deep)!important;color:var(--vx-white)!important;box-shadow:inset 0 0 0 var(--vx-border-width) var(--vx-ink-deep)}
.vx-btn--outlineInverse:hover{background:var(--vx-white)!important;color:var(--vx-ink-deep)!important;box-shadow:inset 0 0 0 var(--vx-border-width) var(--vx-white)}
.vx-btn:active{transform:scale(.98)}

/* ===== page styles (was inline <style>) ===== */

  html, body { margin: 0; background: var(--vx-cream); }
  /* The source design is a fixed 1920px frame. `zoom` scales it to fit the
     viewport AND shrinks its layout box, so the page keeps a single scrollbar. */
  #stage { width: 100%; overflow-x: clip; }
  #frame {
    width: 1920px;
    margin: 0 auto;
  }

  /* ---- Announcement bar (full-bleed 30px ink strip) ---- */
  .vx-announce {
    height: var(--vx-announce-height);
    background: var(--vx-ink);
    color: var(--vx-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vx-font-text);
    font-size: var(--vx-size-14);
    line-height: 1;
    letter-spacing: var(--vx-tracking-none);
  }
  .vx-announce span { text-align: center; padding: 0 24px; }
  .vx-announce b { font-weight: var(--vx-weight-bold); }

  /* ---- Page canvas ---- */
  #page {
    position: relative;
    width: 1920px;
    height: 1600px;
    overflow: hidden;
    background: var(--vx-cream);
  }

  /* ---- Header ---- */
  .vx-header { position: relative; height: 110px; }
  .vx-wordmark {
    display: inline-block;
    color: var(--vx-ink);
    /* solid ink base + a translucent light streak that sweeps across */
    background:
      linear-gradient(115deg,
        rgba(207,230,227,0) 42%,
        rgba(214,236,233,.9) 50%,
        rgba(207,230,227,0) 58%) 150% 0 / 250% 100% no-repeat,
      var(--vx-ink);
    -webkit-mask: url("../svg/logo-viscerex.svg") no-repeat;
    mask: url("../svg/logo-viscerex.svg") no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    animation: vx-logo-gloss 7s var(--vx-ease) infinite;
  }
  @keyframes vx-logo-gloss {
    0%   { background-position: 150% 0, 0 0; }
    34%  { background-position: -90% 0, 0 0; }
    100% { background-position: -90% 0, 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .vx-wordmark { background: var(--vx-ink); animation: none; }
  }
  .vx-nav {
    position: absolute; left: 550px; top: 0; width: 820px; height: 110px;
    display: flex; justify-content: center; align-items: center; gap: 60px;
  }
  .vx-nav a {
    position: relative;
    font-family: var(--vx-font-text);
    font-size: var(--vx-size-16);
    line-height: 1;
    letter-spacing: var(--vx-tracking-none);
    color: var(--vx-ink-deep);
    transition: color .4s var(--vx-ease);
  }
  /* underline draws in left→right on hover, retracts right→left on leave */
  .vx-nav a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
    background: #000;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .4s var(--vx-ease);
  }
  .vx-nav a:hover {
    opacity: 1;
    color: #000;
  }
  .vx-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
  @media (prefers-reduced-motion: reduce) {
    .vx-nav a, .vx-nav a::after { transition: none; }
  }

  /* ---- Button ---- */
  .vx-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--vx-space-6);
    border: 0;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--vx-duration) var(--vx-ease),
                color var(--vx-duration) var(--vx-ease),
                transform var(--vx-duration-fast) var(--vx-ease);
  }
  .vx-btn--solid {
    background: var(--vx-ink); color: var(--vx-white);
    box-shadow: inset 0 0 0 var(--vx-border-width-thick) var(--vx-ink);
  }
  .vx-btn--outline {
    background: transparent; color: var(--vx-ink);
    box-shadow: inset 0 0 0 var(--vx-border-width) var(--vx-ink);
  }
  .vx-btn--outlineInverse {
    background: transparent; color: var(--vx-white);
    box-shadow: inset 0 0 0 var(--vx-border-width) var(--vx-white);
  }
  .vx-btn--lg { height: 60px; padding: 0 40px; border-radius: var(--vx-radius-pill); font-size: var(--vx-size-20); }
  .vx-btn--md { height: 50px; padding: 0 20px; border-radius: var(--vx-radius-pill-sm); font-size: var(--vx-size-16); }
  .vx-btn--sm { height: 40px; padding: 0 29px; border-radius: var(--vx-radius-pill-sm); font-size: var(--vx-size-16); }
  .vx-btn__icon { display: flex; width: 24px; height: 24px; align-items: center; justify-content: center; }

  /* ---- Hero ---- */
  .vx-hero {
    position: absolute; left: 255px; top: 110px;
    width: 1410px; height: 786px;
    border-radius: var(--vx-radius-card);
    background: var(--vx-white);
  }
  .vx-hero__copy { position: absolute; left: 53px; top: 92px; width: 640px; }
  .vx-tag {
    display: inline-flex; align-items: center;
    min-height: 50px;
    padding: 10px var(--vx-space-20);
    border-radius: var(--vx-radius-sm);
    background: var(--vx-mint); color: var(--vx-ink);
    font-family: var(--vx-font-display);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-24);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
  }
  .vx-hero h1 {
    margin-top: 31px; width: 640px; font-size: var(--vx-size-46);
    min-height: 2.3em;                 /* reserve two lines so the copy below never shifts */
  }
  .vx-hero h1 > span { display: block; white-space: nowrap; }   /* two fixed lines */
  .vx-hero h1 .hl-2 { min-height: 1em; }
  /* line 1's trailing "e" — fades in only for the 3rd phrase, on the baseline */
  .vx-hero h1 .hl-e {
    opacity: 0;
    transition: opacity .3s var(--vx-ease);
  }
  .vx-hero h1 .hl-1.is-e .hl-e { opacity: 1; }
  /* typing caret at the end of line 2 */
  .vx-hero h1 .hl-caret {
    display: inline-block; width: 3px; height: 0.82em;
    margin-left: 3px; background: var(--vx-ink);
    transform: translateY(3px);
    animation: vx-caret 1s steps(1) infinite;
  }
  @keyframes vx-caret { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .vx-hero h1 .hl-caret { display: none; }
    .vx-hero h1 .hl-e { transition: none; }
  }

  .vx-benefits { margin-top: 31px; padding-left: 24px; display: flex; flex-direction: column; gap: 32px; }
  .vx-benefits li { display: flex; align-items: baseline; gap: 18px; }
  .vx-benefits .dot {
    flex-shrink: 0; width: 10px; height: 10px;
    border-radius: var(--vx-radius-round);
    background: var(--vx-mint);
    transform: translateY(-4px);
  }
  .vx-benefits .claim {
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-regular);
    font-size: var(--vx-size-22);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-ink);
  }
  .vx-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 15px; margin-left: 8px;
    border-radius: var(--vx-radius-chip);
    background: var(--vx-sand); color: var(--vx-ink-deep);
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-11);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
    vertical-align: super;
  }
  .vx-hero__cta { margin-top: 48px; }
  .vx-hero__cta .vx-btn { width: 320px; }
  /* magnetic CTA: JS drives transform each frame, so drop it from the CSS transition */
  .vx-magnetic {
    transition: background var(--vx-duration) var(--vx-ease), color var(--vx-duration) var(--vx-ease);
    will-change: transform;
  }

  /* ---- Testimonial slider ---- */
  .vx-media { position: absolute; left: 717px; top: 53px; width: 627px; height: 684px; }
  .vx-slider {
    position: absolute; left: 0; top: 0; width: 627px; height: 680px;
    border-radius: var(--vx-radius-photo);
    overflow: hidden;
    background: var(--vx-taupe);
  }
  .vx-slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity var(--vx-duration) var(--vx-ease), visibility 0s linear var(--vx-duration);
  }
  .vx-slide.is-active {
    opacity: 1; visibility: visible;
    transition: opacity var(--vx-duration) var(--vx-ease);
  }
  .vx-slide__video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.12);   /* overscan so the parallax nudge never bares an edge */
    will-change: transform;
  }
  /* Parallax layers — JS writes transform each frame; keep them promoted. */
  .vx-stats,
  .vx-slide .vx-media__caption { will-change: transform; }

  /* Dark fade rising from the bottom of the testimonial frame. */
  .vx-slide__fade {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 220px;
    background: linear-gradient(to top, rgba(23,51,50,.65), rgba(23,51,50,0));
    pointer-events: none;
    z-index: 1;
  }

  .vx-media__caption { position: absolute; left: 42px; bottom: 55px; display: flex; align-items: center; gap: 17px; z-index: 2; }
  .vx-media__caption .name {
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-regular);
    font-size: var(--vx-size-24);
    line-height: 1;
    color: var(--vx-white);
  }

  /* Slider controls */
  .vx-slider__nav {
    position: absolute; top: 318px; z-index: 4;
    width: 44px; height: 44px; padding: 0; border: 0;
    border-radius: var(--vx-radius-round);
    background: rgba(255,255,255,.92);
    box-shadow: var(--vx-shadow-card);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--vx-duration) var(--vx-ease);
  }
  .vx-slider__nav:hover { background: var(--vx-ink); }
  .vx-slider__nav:active { transform: scale(.98); }
  .vx-slider__nav::before {
    content: ""; width: 9px; height: 9px;
    border-left: 2px solid var(--vx-ink);
    border-bottom: 2px solid var(--vx-ink);
    transition: border-color var(--vx-duration) var(--vx-ease);
  }
  .vx-slider__nav:hover::before { border-color: var(--vx-white); }
  .vx-slider__nav--prev { left: 20px; }
  .vx-slider__nav--prev::before { transform: rotate(45deg); margin-left: 3px; }
  .vx-slider__nav--next { right: 20px; }
  .vx-slider__nav--next::before { transform: rotate(-135deg); margin-right: 3px; }

  .vx-slider__dots {
    position: absolute; left: 0; right: 0; bottom: 22px; z-index: 4;
    display: flex; justify-content: center; gap: 8px;
  }
  .vx-slider__dot {
    width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer;
    border-radius: var(--vx-radius-round);
    background: rgba(255,255,255,.5);
    transition: background var(--vx-duration) var(--vx-ease), width var(--vx-duration) var(--vx-ease);
  }
  .vx-slider__dot.is-active { width: 22px; border-radius: var(--vx-radius-card); background: var(--vx-white); }

  @media (prefers-reduced-motion: reduce) {
    .vx-slide__video { transform: none; }
    .vx-live .live-dot { animation: none; }
    .vx-stats__readout .rvalue { animation: none; }
  }
  .vx-live {
    display: inline-flex; align-items: center; gap: 7px;
    height: 28px; padding: 0 9px;
    border-radius: var(--vx-radius-sm);
    background: var(--vx-white); color: var(--vx-ink-deep);
    font-family: var(--vx-font-geo);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-16);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
  }
  .vx-live .live-dot {
    width: 12px; height: 12px;
    border-radius: var(--vx-radius-round);
    background: var(--vx-green);
    animation: vx-live-pulse 1.8s ease-in-out infinite;
  }
  @keyframes vx-live-pulse {
    0%, 100% { background: var(--vx-green); }
    50%      { background: #067d16; }
  }

  /* ---- Stats card — floats over the video, overhangs its right edge ---- */
  .vx-media { overflow: visible; }
  .vx-stats {
    position: absolute; left: 359px; top: 380px;
    width: 290px; height: 242px;
    border-radius: var(--vx-radius-card);
    background: var(--vx-white);
    box-shadow: var(--vx-shadow-card), 0 20px 44px -14px rgba(0,0,0,.4);
    z-index: 3;
    overflow: hidden;
    opacity: 0; visibility: hidden;
    transition: opacity var(--vx-duration) var(--vx-ease), visibility 0s linear var(--vx-duration);
  }
  .vx-stats.is-active {
    opacity: 1; visibility: visible;
    transition: opacity var(--vx-duration) var(--vx-ease);
  }
  .vx-stats__caption {
    position: absolute; left: 25px; top: 24px;
    font-family: var(--vx-font-text);
    font-size: var(--vx-size-16);
    line-height: 1;
    text-transform: uppercase;
    color: var(--vx-ink);
  }
  .vx-stats__rows { position: absolute; left: 25px; top: 56px; display: flex; flex-direction: column; gap: 22px; }
  .vx-bar { position: relative; width: 240px; height: 26px; }
  .vx-bar .label {
    position: absolute; left: 0; top: 0;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-regular);
    font-size: var(--vx-size-14);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-ink);
  }
  .vx-bar .value {
    position: absolute; right: 0; top: 0;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-20);
    line-height: 1;
    text-transform: uppercase;
    color: var(--vx-ink);
  }
  .vx-bar .track {
    position: absolute; left: 0; top: 22px; width: 100%; height: 4px;
    border-radius: var(--vx-radius-card);
    background: var(--vx-track);
  }
  .vx-bar .fill {
    height: 4px; border-radius: var(--vx-radius-card);
    width: 0;
    transition: width 1s var(--vx-ease);
  }
  .vx-stats.is-active .vx-bar .fill { width: var(--w, 0); }
  @media (prefers-reduced-motion: reduce) {
    .vx-bar .fill { transition: none; width: var(--w, 0); }
  }
  .vx-stats__readout {
    position: absolute; left: 0; top: 182px; width: 100%; height: 60px;
    background: var(--vx-mint-wash);
    border-radius: 0 0 var(--vx-radius-card) var(--vx-radius-card);
    display: flex; align-items: center; padding: 0 25px; gap: 10px;
  }
  .vx-stats__readout .rlabel {
    font-family: var(--vx-font-text);
    font-size: var(--vx-size-15);
    text-transform: uppercase;
    color: var(--vx-ink);
  }
  .vx-stats__readout .rvalue {
    margin-left: auto;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-30);
    line-height: 1;
    color: var(--vx-ink);
    transform-origin: center;
    animation: vx-heartbeat 1.8s var(--vx-ease) infinite;
  }
  /* Two quick beats, then a rest — the numbers swell a touch on each beat. */
  @keyframes vx-heartbeat {
    0%, 34%, 100% { transform: scale(1); }
    6%            { transform: scale(1.11); }
    13%           { transform: scale(1); }
    20%           { transform: scale(1.07); }
    27%           { transform: scale(1); }
  }
  .vx-stats__readout .ricon { display: flex; width: 31px; height: 31px; align-items: center; justify-content: center; }

  /* ---- Icon (mask layers) ---- */
  .vx-icon { position: relative; display: inline-block; color: currentColor; }
  .vx-icon i {
    position: absolute; display: block;
    background: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  }
  .vx-icon--cart { width: 24px; height: 24px; }
  .vx-icon--cart i {
    left: 4.013px; top: 4.011px; width: 15.987px; height: 15.977px;
    -webkit-mask-image: url("../svg/cart-shopping.svg"); mask-image: url("../svg/cart-shopping.svg");
  }
  .vx-icon--heart { width: 31px; height: 31px; }
  .vx-icon--heart i.top {
    left: 2.583px; top: 3.875px; width: 25.833px; height: 14.014px;
    -webkit-mask-image: url("../svg/heart-pulse-top.svg"); mask-image: url("../svg/heart-pulse-top.svg");
  }
  .vx-icon--heart i.bottom {
    left: 3.881px; top: 13.046px; width: 23.239px; height: 14.079px;
    -webkit-mask-image: url("../svg/heart-pulse-bottom.svg"); mask-image: url("../svg/heart-pulse-bottom.svg");
  }

  /* ---- Conversion panel (ink-deep) ---- */
  .vx-conv {
    position: absolute; left: 255px; top: 946px;
    width: 680px; height: 620px;
    border-radius: var(--vx-radius-card);
    background: var(--vx-ink-deep);
    overflow: hidden;
  }
  .vx-conv__mark {
    position: absolute; left: 430px; top: 400px;
    width: 330px; height: calc(330px * 37 / 42);
    color: rgba(255,255,255,.05);
    background: currentColor;
    -webkit-mask: url("../svg/mark-x.svg") no-repeat; mask: url("../svg/mark-x.svg") no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
  }
  .vx-trustpilot { position: absolute; left: 53px; top: 74px; display: flex; align-items: center; gap: 16px; height: 45px; }
  .vx-trustpilot .stars { display: flex; gap: 3px; }
  .vx-trustpilot .score {
    font-family: var(--vx-font-display);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-28);
    line-height: 1;
    color: var(--vx-white);
  }
  .vx-conv__headline {
    position: absolute; left: 53px; top: 148px; width: 620px;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-46);
    line-height: 1.15;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-white);
  }
  .vx-conv__rule { position: absolute; left: 54px; top: 269px; width: 571px; height: 1px; background: var(--vx-ink-line); }
  .vx-conv__body {
    position: absolute; left: 53px; top: 300px; width: 586px;
    font-family: var(--vx-font-text);
    font-size: var(--vx-size-20);
    line-height: 1.35;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-white);
  }
  .vx-conv__price {
    position: absolute; left: 53px; top: 424px;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-32);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-white);
  }
  .vx-conv__cta { position: absolute; left: 53px; top: 501px; }
  .vx-conv__cta .vx-btn { width: 220px; justify-content: space-between; }

  /* ---- Product panel ---- */
  .vx-product {
    position: absolute; left: 982px; top: 946px;
    width: 680px; height: 620px;
    border-radius: var(--vx-radius-card);
    background: var(--vx-white);
    overflow: hidden;
  }
  .vx-product img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transform: scale(1.08);   /* overscan so the parallax nudge never bares an edge */
    transform-origin: center;
    will-change: transform;
  }

  /* ==== Section 03 — Symptome (full-bleed dark) ==== */
  .vx-symptoms {
    position: relative;
    width: 1920px;
    min-height: 760px;
    background: var(--vx-ink-deep);
    overflow: hidden;
    padding: 104px 248px 92px 237px;
  }
  .vx-symptoms__mark {
    position: absolute; top: 79px; right: -420px;
    width: 1000px; height: calc(1000px * 60 / 340);
    background: rgba(176,213,208,.12);
    -webkit-mask: url("../svg/logo-viscerex.svg") no-repeat right center;
    mask: url("../svg/logo-viscerex.svg") no-repeat right center;
    -webkit-mask-size: contain; mask-size: contain;
    pointer-events: none;
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    .vx-symptoms__mark { transform: translateX(-380px); }
  }
  .vx-symptoms__title {
    position: relative; margin: 0;
    font-family: var(--vx-font-display);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-46);
    line-height: 1.15;
    letter-spacing: var(--vx-tracking-tight);
    text-transform: none;
    color: var(--vx-white);
  }
  .vx-symptoms__grid {
    position: relative; margin: 66px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    list-style: none;
  }
  .vx-symptoms__grid li { display: flex; flex-direction: column; gap: 20px; }
  .vx-symptoms__media {
    position: relative;
    width: 100%; height: 315px;
    border-radius: var(--vx-radius-card);
    overflow: hidden;
  }
  .vx-symptoms__media img,
  .vx-symptoms__media video {
    position: absolute; inset: 0;
    display: block; width: 100%; height: 100%;
    object-fit: cover;
  }
  .vx-symptoms__media img { transition: transform 400ms var(--vx-ease); }
  .vx-symptoms__media video {
    opacity: 0;
    transition: opacity var(--vx-duration) var(--vx-ease);
  }
  .vx-symptoms__media:hover img { transform: scale(1.04); }
  .vx-symptoms__media:hover video { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .vx-symptoms__media:hover img { transform: none; }
    .vx-symptoms__media video { display: none; }
  }
  .vx-symptoms__grid p {
    margin: 0;
    font-family: var(--vx-font-text);
    font-size: var(--vx-size-16);
    line-height: 1.3;
    letter-spacing: var(--vx-tracking-tight);
    color: rgba(255,255,255,.66);
  }

  /* ==== Section 04 — Antwort (cream, image slider) ==== */
  .vx-answer {
    position: relative;
    width: 1920px;
    min-height: 920px;
    background: var(--vx-cream);
  }
  .vx-answer__copy {
    position: absolute; left: 308px; top: 50%;
    transform: translateY(-50%);
    width: 588px;
  }
  .vx-answer__badge {
    display: block;
    width: 392px; height: auto;
    margin: 0 0 30px;
  }
  .vx-answer__title {
    margin: 0;
    font-family: var(--vx-font-display);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-46);
    line-height: 1.1;
    letter-spacing: var(--vx-tracking-tight);
    text-transform: none;
    white-space: nowrap;
    color: var(--vx-ink);
  }
  .vx-answer__title .ah-caret {
    display: inline-block; width: 3px; height: 0.82em;
    margin-left: 3px; background: var(--vx-ink);
    transform: translateY(3px);
    animation: vx-caret 1s steps(1) infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .vx-answer__title .ah-caret { display: none; }
  }
  .vx-answer__body {
    margin: 28px 0 0;
    font-family: var(--vx-font-text);
    font-size: var(--vx-size-20);
    line-height: 1.5;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-ink);
  }
  .vx-answer__copy .vx-btn { margin-top: 44px; width: 320px; }
  .vx-answer__media {
    position: absolute; left: 978px; top: 115px;
    width: 687px; height: 685px;
  }
  .vx-answer__slider {
    position: absolute; inset: 0;
    border-radius: var(--vx-radius-card);
    overflow: hidden;
    background: var(--vx-taupe);
  }
  .vx-answer__slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity var(--vx-duration) var(--vx-ease), visibility 0s linear var(--vx-duration);
  }
  .vx-answer__slide.is-active {
    opacity: 1; visibility: visible;
    transition: opacity var(--vx-duration) var(--vx-ease);
  }
  .vx-answer__slide img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transform: scale(1.08);   /* overscan for the cursor parallax */
    transform-origin: center;
    will-change: transform;
  }
  .vx-answer__slider .vx-slider__nav { top: calc(50% - 22px); }
  @media (prefers-reduced-motion: reduce) {
    .vx-answer__slide img { transform: none; }
  }

  /* ==== Section 05 — Dreifach-Wirkformel (dark card, 3X + accordion) ==== */
  .vx-formula {
    position: relative;
    width: 1920px;
    background: var(--vx-cream);
    padding: 44px 0 84px;
  }
  .vx-formula__card {
    position: relative;
    width: 1410px; margin: 0 auto;
    background: var(--vx-ink-deep);
    border-radius: var(--vx-radius-card);
    padding: 53px;
    display: grid;
    grid-template-columns: 636px 1fr;
    column-gap: 48px;
  }
  .vx-formula__title {
    grid-column: 1;
    margin: 0 0 38px;
    font-family: var(--vx-font-display);
    font-weight: var(--vx-weight-bold);
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: var(--vx-tracking-tight);
    text-transform: none;
    color: var(--vx-white);
  }
  .vx-formula__title > span { display: block; white-space: nowrap; }
  .vx-formula__title .fh-caret {
    display: inline-block; width: 3px; height: 0.82em;
    margin-left: 3px; background: var(--vx-white);
    transform: translateY(3px);
    animation: vx-caret 1s steps(1) infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .vx-formula__title .fh-caret { display: none; }
  }
  .vx-formula__left { grid-column: 1; }
  .vx-formula__media {
    position: relative;
    width: 100%; aspect-ratio: 1 / 1;
  }
  .vx-formula__frame {
    position: absolute; inset: 0;
    border-radius: var(--vx-radius-card);
    overflow: hidden;
  }
  .vx-formula__frame img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transform: scale(1.08);          /* overscan for the cursor parallax */
    transform-origin: center;
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    .vx-formula__frame img { transform: none; }
  }
  .vx-formula__badge {
    display: block;
    position: absolute; top: -24px; left: 50%;
    width: 150px; height: 150px;
    transform: translateX(-50%);
    transition: transform .35s var(--vx-ease);
    cursor: pointer;
    text-decoration: none;
  }
  .vx-formula__badge:hover { transform: translateX(-50%) scale(1.05); opacity: 1; }
  .vx-formula__badge svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .vx-formula__badge .vx-badge-ring {
    animation: vx-badge-spin 24s linear infinite;
    transform-origin: 60px 60px;
  }
  @keyframes vx-badge-spin { to { transform: rotate(360deg); } }
  /* hover: the arrow grows to ~150% */
  .vx-formula__badge .arr-2 { display: none; }
  .vx-formula__badge .arr {
    transition: transform .3s var(--vx-ease);
    transform-origin: 60px 60px;
  }
  .vx-formula__badge:hover .arr-1 { transform: scale(1.5); }
  @media (prefers-reduced-motion: reduce) {
    .vx-formula__badge, .vx-formula__badge .arr { transition: none; }
    .vx-formula__badge:hover { transform: translateX(-50%); }
    .vx-formula__badge:hover .arr-1 { transform: none; }
  }
  .vx-formula__left .vx-btn {
    display: flex; width: 220px; margin: 40px auto 0;
    justify-content: space-between;
  }

  .vx-formula__right { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .vx-formula__3x-img {
    display: block; width: 100%; height: auto;
    margin: -2px 0 6px;
  }

  .vx-accordion__item { border-top: 1px solid var(--vx-border-hairline); }
  .vx-accordion__item:last-child { border-bottom: 1px solid var(--vx-border-hairline); }
  .vx-accordion__head {
    width: 100%;
    display: flex; align-items: center; gap: 22px;
    padding: 28px 2px;
    background: none; border: 0; cursor: pointer;
    text-align: left; color: var(--vx-white);
    font: inherit; letter-spacing: inherit;
  }
  .vx-accordion__icon {
    flex-shrink: 0; width: 56px; height: 56px;
    background: var(--vx-white);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
  }
  .vx-i-pulse  { -webkit-mask-image: url("../svg/icon-pulse.svg");  mask-image: url("../svg/icon-pulse.svg"); }
  .vx-i-heart  { -webkit-mask-image: url("../svg/icon-heart.svg");  mask-image: url("../svg/icon-heart.svg"); }
  .vx-i-weight { -webkit-mask-image: url("../svg/icon-weight.svg"); mask-image: url("../svg/icon-weight.svg"); }
  .vx-accordion__title {
    flex: 1;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-22);
    line-height: 1.25;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-white);
  }
  .vx-accordion__sign {
    flex-shrink: 0; position: relative;
    width: 28px; height: 28px;
  }
  .vx-accordion__sign::before, .vx-accordion__sign::after {
    content: ""; position: absolute; background: var(--vx-white);
    transition: opacity var(--vx-duration) var(--vx-ease), transform var(--vx-duration) var(--vx-ease);
  }
  .vx-accordion__sign::before { left: 3px; right: 3px; top: 13px; height: 2px; }        /* dash — always shown */
  .vx-accordion__sign::after  { top: 3px; bottom: 3px; left: 13px; width: 2px; }        /* upright bar — shown when closed → plus */
  .vx-accordion__item.is-open .vx-accordion__sign::after { opacity: 0; transform: scaleY(0); }   /* open → minus */
  .vx-accordion__body {
    overflow: hidden; max-height: 0;
    transition: max-height var(--vx-duration) var(--vx-ease);
  }
  .vx-accordion__item.is-open .vx-accordion__body { max-height: 400px; }
  .vx-accordion__body p {
    margin: 0; padding: 4px 2px 30px 78px;
    font-family: var(--vx-font-text);
    font-size: var(--vx-size-15);
    line-height: 1.55;
    letter-spacing: var(--vx-tracking-tight);
    color: rgba(255,255,255,.72);
  }
  @media (prefers-reduced-motion: reduce) {
    .vx-formula__badge .vx-badge-ring { animation: none; }
  }

  /* ==== Section 06 — Zusätzliche Gesundheitsvorteile (accordion + product image) ==== */
  .vx-benefits2 {
    position: relative;
    width: 1920px;
    background: var(--vx-cream);
    padding: 84px 0 104px;
  }
  .vx-benefits2__title {
    margin: 0 0 54px;
    text-align: center;
    font-family: var(--vx-font-display);
    font-weight: var(--vx-weight-bold);
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: var(--vx-tracking-tight);
    text-transform: none;
    color: var(--vx-ink);
  }
  .vx-benefits2__grid {
    width: 1410px; margin: 0 auto;
    display: grid;
    grid-template-columns: 705px 1fr;      /* left col right edge = page centre (255 + 705 = 960) */
    column-gap: 60px;
    align-items: start;
  }
  .vx-benefits2__list { grid-column: 1; display: flex; flex-direction: column; gap: 20px; }

  /* uniform gap open OR closed, so opening a row never shifts the others */
  .vx-b2item {
    border-radius: var(--vx-radius-card);
    background: transparent;
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transition: background var(--vx-duration) var(--vx-ease), box-shadow var(--vx-duration) var(--vx-ease);
  }
  .vx-b2item.is-open {
    background: var(--vx-white);
    box-shadow: var(--vx-shadow-card);
  }
  .vx-b2item__head {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 22px 26px;
    background: none; border: 0; cursor: pointer; text-align: left;
    font: inherit; letter-spacing: inherit;
  }
  .vx-b2item__label { display: flex; flex-direction: column; gap: 7px; }
  .vx-b2item__num {
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #c9b083;
  }
  .vx-b2item__title {
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-20);
    line-height: 1.25;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-ink);
  }
  .vx-b2item__sign { position: relative; flex-shrink: 0; width: 24px; height: 24px; }
  .vx-b2item__sign::before, .vx-b2item__sign::after {
    content: ""; position: absolute; background: var(--vx-ink);
    transition: opacity var(--vx-duration) var(--vx-ease), transform var(--vx-duration) var(--vx-ease);
  }
  .vx-b2item__sign::before { left: 2px; right: 2px; top: 11px; height: 2px; }
  .vx-b2item__sign::after  { top: 2px; bottom: 2px; left: 11px; width: 2px; }
  .vx-b2item.is-open .vx-b2item__sign::after { opacity: 0; transform: scaleY(0); }
  .vx-b2item__body {
    overflow: hidden; max-height: 0;
    transition: max-height var(--vx-duration) var(--vx-ease);
  }
  .vx-b2item.is-open .vx-b2item__body { max-height: 240px; }
  .vx-b2item__body p {
    margin: 0; padding: 2px 26px 24px;
    font-family: var(--vx-font-text);
    font-size: var(--vx-size-15);
    line-height: 1.55;
    letter-spacing: var(--vx-tracking-tight);
    color: rgba(46,71,70,.8);
  }

  .vx-benefits2__media { grid-column: 2; position: relative; }
  .vx-benefits2__img {
    display: block; width: 100%; height: auto;
    transform: scale(1.05);
    transform-origin: center;
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    .vx-benefits2__img { transform: none; }
  }

  /* ==== Section 07 — Echte Menschen, echte Ergebnisse (voices carousel) ==== */
  .vx-voices {
    position: relative;
    width: 1920px;
    background: var(--vx-mint);
    padding: 84px 0 92px;
    overflow: hidden;
  }
  .vx-voices__title {
    margin: 0 auto 30px;
    width: 1404px;
    text-align: center;
    font-family: var(--vx-font-display);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-46);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
    text-transform: none;
    color: var(--vx-ink-deep);
  }
  .vx-voices__controls {
    display: flex; justify-content: center; align-items: center; gap: 20px;
    margin-bottom: 44px;
    position: relative; z-index: 3;
  }
  .vx-voices__btn {
    width: 140px; height: 50px; padding: 0; border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.35);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--vx-duration) var(--vx-ease);
  }
  .vx-voices__btn:hover { background: rgba(255,255,255,.6); }
  .vx-voices__btn:active { transform: scale(.98); }
  .vx-voices__btn .arw {
    position: relative; width: 90px; height: 12px;
  }
  .vx-voices__btn .arw::before {                 /* shaft */
    content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 3px;
    background: var(--vx-ink-deep);
  }
  .vx-voices__btn .arw::after {                   /* head */
    content: ""; position: absolute; width: 12px; height: 12px;
    border-left: 3px solid var(--vx-ink-deep);
    border-bottom: 3px solid var(--vx-ink-deep);
  }
  .vx-voices__btn--prev .arw::after { left: 0;  top: 0; transform: rotate(45deg); }
  .vx-voices__btn--next .arw::after { right: 0; top: 0; transform: rotate(225deg); }
  .vx-voices__counter {
    width: 100px; height: 50px;
    border-radius: 10px;
    background: var(--vx-ink-deep);
    color: var(--vx-white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-20);
    letter-spacing: var(--vx-tracking-tight);
  }
  .vx-voices__viewport {
    position: relative; z-index: 1;
    overflow: hidden;
    padding-left: calc(50% - 200px);             /* current card (400px) centred on the page */
  }
  .vx-voices__track {
    display: flex; gap: 32px;
    align-items: flex-start;
    transition: transform 420ms var(--vx-ease);
    will-change: transform;
  }
  .vx-voice {
    flex: 0 0 400px;
    background: var(--vx-white);
    border-radius: 20px;
    padding: 20px 25px 30px;
  }
  .vx-voice__photo {
    width: 100%; height: 300px;
    border-radius: var(--vx-radius-card);
    overflow: hidden;
    background: var(--vx-taupe);
  }
  .vx-voice__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .vx-voice__meta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 18px;
  }
  .vx-voice__name {
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-18, 18px);
    line-height: 1.4;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-ink);
  }
  .vx-voice__stars { display: flex; gap: 2px; flex-shrink: 0; }
  .vx-voice__stars i {
    width: 26px; height: 26px; display: block;
    background: var(--vx-green);
    -webkit-mask: url("../svg/star.svg") no-repeat center / contain;
    mask: url("../svg/star.svg") no-repeat center / contain;
  }
  .vx-voice__text {
    margin: 16px 0 0;
    font-family: var(--vx-font-text);
    font-size: var(--vx-size-18, 18px);
    line-height: 24px;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-ink-deep);
    /* every collapsed card keeps the same height: exactly 5 lines,
       padded out if shorter, clamped with an ellipsis if longer */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    min-height: 120px;
  }
  .vx-voice.is-expanded .vx-voice__text {
    -webkit-line-clamp: unset;
    overflow: visible;
    min-height: 0;
  }
  .vx-voice__text a {
    color: var(--vx-ink-deep);
    font-weight: var(--vx-weight-bold);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .vx-voice__more {
    margin-top: 12px;
    padding: 0; border: 0; background: none;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-16, 16px);
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-ink-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: opacity var(--vx-duration) var(--vx-ease);
  }
  .vx-voice__more:hover { opacity: .65; }
  /* mint fades at both edges */
  .vx-voices::before, .vx-voices::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 300px;
    z-index: 2; pointer-events: none;
  }
  .vx-voices::before { left: 0;  background: linear-gradient(to right, var(--vx-mint) 12%, rgba(176,213,208,0)); }
  .vx-voices::after  { right: 0; background: linear-gradient(to left,  var(--vx-mint) 12%, rgba(176,213,208,0)); }
  @media (prefers-reduced-motion: reduce) {
    .vx-voices__track { transition: none; }
  }
  .vx-voices__cta {
    position: relative; z-index: 3;
    display: flex; justify-content: center;
    margin-top: 56px;
  }
  .vx-voices__cta .vx-btn { width: 320px; }

  /* ==== Section 08 — Die kraftvollen Inhaltsstoffe von Viscerex ==== */
  .vx-ingredients {
    position: relative;
    width: 1920px;
    background: var(--vx-cream);
    padding: 96px 0 90px;
    overflow: hidden;
  }
  .vx-ingredients__grid {
    position: relative;
    width: 1410px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 620px 1fr;
    column-gap: 40px;
    align-items: start;
  }
  .vx-ingredients__copy { grid-column: 1; }
  .vx-ingredients__banner {
    position: relative;
    display: inline-flex; align-items: center;
    width: fit-content;                  /* hug the text instead of filling the column */
    height: 51px;
    padding: 0 20px 0 108px;             /* clear the overhanging badge (right edge ≈ 92px) */
    background: var(--vx-mint);
    border-radius: var(--vx-radius-sm);
  }
  .vx-ingredients__badge {
    position: absolute; left: -18px; top: 50%;
    width: 110px; height: 110px;
    transform: translateY(-50%);
  }
  .vx-ingredients__badge img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
  .vx-ingredients__banner span {
    font-family: var(--vx-font-display);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-24);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-ink);
  }
  .vx-ingredients__title {
    margin: 48px 0 0;
    font-family: var(--vx-font-display);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-46);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
    text-transform: none;
    color: var(--vx-ink);
  }
  .vx-ingredients__intro {
    margin: 26px 0 0;
    max-width: 590px;
    font-family: var(--vx-font-text);
    font-size: var(--vx-size-20);
    line-height: 1.6;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-ink);
  }
  .vx-ingredients__controls {
    display: flex; align-items: center; gap: 20px;
    margin-top: 40px;
    position: relative; z-index: 3;
  }
  .vx-ingredients__btn {
    width: 140px; height: 50px; padding: 0; border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--vx-duration) var(--vx-ease);
  }
  .vx-ingredients__btn:hover { background: rgba(255,255,255,.85); }
  .vx-ingredients__btn:active { transform: scale(.98); }
  .vx-ingredients__btn .arw { position: relative; width: 90px; height: 12px; }
  .vx-ingredients__btn .arw::before {
    content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 3px;
    background: var(--vx-ink-deep);
  }
  .vx-ingredients__btn .arw::after {
    content: ""; position: absolute; width: 12px; height: 12px;
    border-left: 3px solid var(--vx-ink-deep);
    border-bottom: 3px solid var(--vx-ink-deep);
  }
  .vx-ingredients__btn--prev .arw::after { left: 0;  top: 0; transform: rotate(45deg); }
  .vx-ingredients__btn--next .arw::after { right: 0; top: 0; transform: rotate(225deg); }
  .vx-ingredients__counter {
    width: 100px; height: 50px;
    border-radius: 10px;
    background: var(--vx-ink-deep);
    color: var(--vx-white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-20);
    letter-spacing: var(--vx-tracking-tight);
  }
  .vx-ingredients__viewport {
    grid-column: 2;
    position: relative; z-index: 1;
    overflow: hidden;
    padding-left: 4px;
    width: calc(100% + 255px);          /* bleed right to the page edge — 3 cards visible */
  }
  /* page-background fade on the right edge only (same idea as .vx-voices, cream instead of mint) */
  .vx-ingredients__viewport::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 200px;
    z-index: 2; pointer-events: none;
    background: linear-gradient(to left, var(--vx-cream) 12%, rgba(254,247,233,0));
  }
  .vx-ingredients__track {
    display: flex; gap: 24px;
    align-items: flex-start;
    transition: transform 420ms var(--vx-ease);
    will-change: transform;
  }
  .vx-ing {
    flex: 0 0 300px;
    min-height: 420px;
    background: var(--vx-white);
    border-radius: var(--vx-radius-card);
    padding: 24px;
    display: flex; flex-direction: column;
  }
  .vx-ing__photo {
    width: 100%; height: 176px;
    border-radius: var(--vx-radius-card);
    overflow: hidden;
    background: var(--vx-white);
  }
  .vx-ing__photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .vx-ing__name {
    margin: 30px 0 0;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-24);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-ink-deep);
  }
  .vx-ing__text {
    margin: 16px 0 0;
    font-family: var(--vx-font-text);
    font-size: var(--vx-size-18, 18px);
    line-height: 25px;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-ink);
  }
  .vx-ingredients__label {
    width: 1196px; margin: 74px auto 0;
    display: block;
  }
  .vx-ingredients__label img { display: block; width: 100%; height: auto; border-radius: var(--vx-radius-card); }
  .vx-ingredients__cta {
    display: flex; justify-content: center;
    margin-top: 64px;
  }
  .vx-ingredients__cta .vx-btn { width: 395px; }
  @media (prefers-reduced-motion: reduce) {
    .vx-ingredients__track { transition: none; }
  }

  /* ==== Sonderangebot — 3 bundle offer cards (Figma node 130:135) ==== */
  .vx-offer {
    position: relative;
    width: 1920px;
    background: var(--vx-cream);
    padding: 96px 0 100px;
  }
  .vx-offer__title {
    max-width: 1404px; margin: 0 auto 60px;
    font-family: var(--vx-font-display);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-46);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
    text-transform: none;
    text-align: center;
    text-wrap: balance;
    color: var(--vx-ink-deep);
  }
  .vx-offer__grid {
    width: 1440px; margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 464px);
    gap: 24px;
    align-items: stretch;
  }
  .vx-offer__card {
    background: var(--vx-mint);
    border-radius: 20px;
    padding: 32px 22px 30px;
    display: flex; flex-direction: column; align-items: center;
    gap: 14px;
  }
  .vx-offer__deal {
    margin: 0 0 4px;
    min-height: 2em;                       /* two-line titles keep cards aligned */
    display: flex; align-items: center;
    font-family: var(--vx-font-display);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-32);
    line-height: 1.05;
    letter-spacing: var(--vx-tracking-tight);
    text-transform: none;
    text-align: center;
    color: var(--vx-ink-deep);
  }
  .vx-offer__banner {
    width: 100%;
    margin-bottom: 6px;
  }
  /* the white card + floating GRATIS badge are baked into the artwork; show it
     at its natural aspect with the transparent top rising over the mint */
  .vx-offer__banner img {
    display: block;
    width: 100%; height: auto;
  }
  .vx-offer__pill {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    min-height: 46px; padding: 6px 22px;
    border-radius: 30px;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-medium);
    font-size: var(--vx-size-20);
    line-height: 1.15;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-ink-deep);
    text-align: center;
  }
  .vx-offer__pill--dur  { background: var(--vx-white); }
  .vx-offer__pill--save,
  .vx-offer__pill--ship { background: var(--vx-sand); }
  .vx-offer__ic { display: block; flex-shrink: 0; }
  .vx-offer__was {
    margin: 12px 0 0;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-medium);
    font-size: var(--vx-size-24);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
    text-decoration: line-through;
    color: rgba(0, 0, 0, .5);
    text-align: center;
  }
  .vx-offer__rule {
    display: block; width: 360px; max-width: 100%; height: 1px;
    background: rgba(23, 51, 50, .28);
    margin: 6px 0;
  }
  .vx-offer__price {
    margin: 4px 0 0;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: 48px;
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-ink-deep);
    text-align: center;
  }
  .vx-offer__perday {
    margin: 6px 0 0;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-regular);
    font-size: var(--vx-size-20);
    line-height: 1;
    color: var(--vx-ink-deep);
    text-align: center;
  }
  .vx-offer__cta {
    margin-top: auto;                      /* bottom-align across cards of unequal content */
    width: 100%; max-width: 395px;
    min-height: 60px; padding: 8px 20px;
    border: 0; border-radius: 30px;
    background: var(--vx-ink-deep);
    color: var(--vx-white);
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-20);
    line-height: 1.1;
    letter-spacing: var(--vx-tracking-tight);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--vx-duration) var(--vx-ease),
                transform var(--vx-duration-fast) var(--vx-ease);
  }
  .vx-offer__cta:hover { background: var(--vx-ink); }
  .vx-offer__cta:active { transform: scale(.98); }

  /* ==== Geld-Zurück-Garantie band (Figma node 129:97) ==== */
  .vx-guarantee {
    width: 1920px;
    background: var(--vx-cream);
    padding: 40px 0 124px;
  }
  .vx-guarantee__card {
    width: 1440px; margin: 0 auto;
    min-height: 300px;
    background: var(--vx-ink-deep);
    border-radius: 20px;
    display: flex; align-items: center;
    padding: 0 78px 0 50px;
  }
  .vx-guarantee__badge {
    flex: 0 0 200px;
    width: 200px; height: 200px;
    object-fit: contain;
  }
  .vx-guarantee__num {
    position: relative;
    flex: 0 0 auto;
    margin-left: 24px;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: 250px;
    line-height: 1;
    letter-spacing: -0.05em;              /* ≈ -12.5px at 250px */
    color: var(--vx-white);
    white-space: nowrap;
  }
  .vx-guarantee__lock {
    position: absolute;
    width: 44px; height: 44px;
    right: 52px; top: 48.4%;              /* optical centre of the "0" glyph within the line box */
    transform: translateY(-50%);
  }
  .vx-guarantee__text {
    flex: 1 1 auto; min-width: 0;
    margin-left: 46px;
    max-width: 660px;
    color: var(--vx-white);
  }
  .vx-guarantee__text h2 {
    margin: 0;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: 42px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--vx-white);
  }
  .vx-guarantee__rule {
    display: block; width: 100%; height: 1px;
    background: rgba(255, 255, 255, .25);
    margin: 22px 0 20px;
  }
  .vx-guarantee__text p {
    margin: 0;
    font-family: var(--vx-font-text);
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: var(--vx-tracking-tight);
    color: var(--vx-white);
  }

  /* ==== Section 09 — Lebe das Leben, das du dir wünschst (photo carousel) ==== */
  .vx-life {
    position: relative;
    width: 1920px;
    background: var(--vx-ink-deep);
    padding: 118px 0 96px;
    overflow: hidden;
  }
  .vx-life__mark {
    position: absolute; top: 92px; right: -280px;
    width: 846px; height: calc(846px * 60 / 340);
    background: rgba(176,213,208,.12);
    -webkit-mask: url("../svg/logo-viscerex.svg") no-repeat right center;
    mask: url("../svg/logo-viscerex.svg") no-repeat right center;
    -webkit-mask-size: contain; mask-size: contain;
    pointer-events: none;
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    .vx-life__mark { transform: translateX(-394px); }
  }
  .vx-life__title {
    position: relative;
    margin: 0 0 46px 240px;
    font-family: var(--vx-font-display);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-46);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
    text-transform: none;
    color: var(--vx-white);
  }
  .vx-life__title > span { display: block; white-space: nowrap; }
  .vx-life__title .lf-caret {
    display: inline-block; width: 3px; height: 0.82em;
    margin-left: 3px; background: var(--vx-white);
    transform: translateY(3px);
    animation: vx-caret 1s steps(1) infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .vx-life__title .lf-caret { display: none; }
  }
  .vx-life__viewport {
    position: relative; z-index: 1;
    overflow: hidden;
    padding-left: 240px;
  }
  .vx-life__track {
    display: flex; gap: 24px;
    align-items: flex-start;
    transition: transform 420ms var(--vx-ease);
    will-change: transform;
  }
  .vx-life__slide {
    position: relative;
    flex: 0 0 342px;
    height: 312px;
    border-radius: var(--vx-radius-card);
    overflow: hidden;
    background: rgba(255,255,255,.06);
  }
  .vx-life__slide img,
  .vx-life__slide video {
    position: absolute; inset: 0;
    display: block; width: 100%; height: 100%;
    object-fit: cover;
  }
  .vx-life__slide img { transition: transform 400ms var(--vx-ease); }
  .vx-life__slide video {
    opacity: 0;
    transition: opacity var(--vx-duration) var(--vx-ease);
  }
  .vx-life__slide:hover img { transform: scale(1.04); }
  .vx-life__slide:hover video { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .vx-life__slide:hover img { transform: none; }
    .vx-life__slide video { display: none; }
  }
  .vx-life__controls {
    display: flex; justify-content: center; align-items: center; gap: 20px;
    margin-top: 52px;
    position: relative; z-index: 3;
  }
  .vx-life__btn {
    width: 140px; height: 50px; padding: 0; border: 0;
    border-radius: 10px;
    background: var(--vx-mint-wash);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--vx-duration) var(--vx-ease);
  }
  .vx-life__btn:hover { background: rgba(176,213,208,.4); }
  .vx-life__btn:active { transform: scale(.98); }
  .vx-life__btn .arw { position: relative; width: 90px; height: 12px; }
  .vx-life__btn .arw::before {
    content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 3px;
    background: var(--vx-ink-deep);
  }
  .vx-life__btn .arw::after {
    content: ""; position: absolute; width: 12px; height: 12px;
    border-left: 3px solid var(--vx-ink-deep);
    border-bottom: 3px solid var(--vx-ink-deep);
  }
  .vx-life__btn--prev .arw::after { left: 0;  top: 0; transform: rotate(45deg); }
  .vx-life__btn--next .arw::after { right: 0; top: 0; transform: rotate(225deg); }
  .vx-life__counter {
    width: 100px; height: 50px;
    border-radius: 10px;
    background: var(--vx-ink-deep);
    box-shadow: inset 0 0 0 1px rgba(176,213,208,.35);
    color: var(--vx-white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--vx-font-text);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-20);
    letter-spacing: var(--vx-tracking-tight);
  }
  @media (prefers-reduced-motion: reduce) {
    .vx-life__track { transition: none; }
  }

  /* ==== Footer (node 89:171) ==== */
  .vx-footer {
    position: relative;
    width: 1920px;
    height: 500px;
    background: var(--vx-ink-deep);
    overflow: hidden;
    font-family: var(--vx-font-text);
  }
  .vx-footer__rule {
    position: absolute; left: 240px; width: 1440px; height: 1px;
    background: rgba(255,255,255,.2);
  }
  .vx-footer__rule--top { top: 10px; }
  .vx-footer__rule--bottom { top: 310px; }
  .vx-footer__vr {
    position: absolute; top: 33px; width: 1px; height: 254px;
    background: rgba(255,255,255,.2);
  }
  .vx-footer__vr--a { left: 900px; }
  .vx-footer__vr--b { left: 1268px; }

  .vx-footer__logo {
    position: absolute; left: 275px; top: 35px;
    width: 351px; height: 62px;
    background: var(--vx-white);
    -webkit-mask: url("../svg/logo-viscerex.svg") no-repeat left center;
    mask: url("../svg/logo-viscerex.svg") no-repeat left center;
    -webkit-mask-size: contain; mask-size: contain;
  }

  .vx-footer__disclaimer {
    position: absolute; left: 275px; top: 121px;
    width: 551px; margin: 0;
    font-size: 14px; line-height: 18px;
    color: var(--vx-white);
  }

  .vx-footer__col {
    position: absolute; top: 46px; width: 342px;
    display: flex; flex-direction: column;
  }
  .vx-footer__col--mid { left: 972px; }
  .vx-footer__col--right { left: 1338px; }
  .vx-footer__col a {
    position: relative;
    align-self: flex-start;
    font-size: 18px; line-height: 50px;
    color: var(--vx-white);
    transition: color .4s var(--vx-ease);
  }
  /* underline draws in left→right on hover, retracts right→left on leave */
  .vx-footer__col a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 10px; height: 2px;
    background: var(--vx-mint);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .4s var(--vx-ease);
  }
  .vx-footer__col a:hover { color: var(--vx-mint); }
  .vx-footer__col a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
  @media (prefers-reduced-motion: reduce) {
    .vx-footer__col a, .vx-footer__col a::after { transition: none; }
  }

  .vx-footer__address {
    position: absolute; left: 275px; top: 340px;
    width: 553px; margin: 0;
    font-size: 14px; line-height: 18px;
    color: var(--vx-white);
  }
  .vx-footer__address strong { font-weight: var(--vx-weight-bold); }

  .vx-footer__cards {
    position: absolute; left: 1342px; top: 340px;
    width: 333px; height: 34px;
    object-fit: contain;
    mix-blend-mode: luminosity;
  }

  .vx-footer__copyright {
    position: absolute; left: 275px; top: 455px;
    width: 553px; margin: 0;
    font-weight: var(--vx-weight-bold);
    font-size: 16px; line-height: 18px;
    color: var(--vx-mint);
  }

  /* ==== Quellen / references (node 90:252) ==== */
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  /* footnote chips are now in-page anchor links to the Quellen list */
  a.vx-chip { text-decoration: none; cursor: pointer; scroll-margin-top: 24px; }
  a.vx-chip:hover { background: var(--vx-ink-deep); color: var(--vx-sand); opacity: 1; }

  .vx-refs {
    width: 1920px;
    background: var(--vx-cream);
    padding: 67px 240px 72px 280px;
  }
  .vx-refs__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 400px);
    grid-template-rows: repeat(5, 36px);
    grid-auto-flow: column;
    column-gap: 88px;
  }
  .vx-refs__item {
    display: flex; align-items: flex-start; gap: 19px;
    font-family: var(--vx-font-text);
    font-size: var(--vx-size-14);
    line-height: 18px;
    color: var(--vx-ink-deep);
    scroll-margin-top: 40px;
  }
  .vx-refs__num {
    flex: 0 0 15px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; margin-top: 1px;
    border-radius: 2px;
    background: var(--vx-sand);
    color: var(--vx-ink-deep);
    font-weight: var(--vx-weight-bold);
    font-size: var(--vx-size-14);
    line-height: 1;
    letter-spacing: var(--vx-tracking-tight);
    white-space: nowrap;
  }
  .vx-refs__item a {
    color: var(--vx-ink-deep);
    text-decoration: none;
    word-break: break-all;
    transition: color var(--vx-duration) var(--vx-ease);
  }
  .vx-refs__item a:hover { color: var(--vx-taupe); }

  /* header nav jump targets — a little breathing room above when scrolled to */
  #produkt, #symptome, #ergebnisse, #inhaltsstoffe { scroll-margin-top: 16px; }
  #angebot { scroll-margin-top: 24px; }
  /* CTA buttons + footer "Shop" link scroll here — keep a small gap above the heading */
  .vx-offer__title { scroll-margin-top: 28px; }

  /* ============================================================
     MOBILE  —  viewport < 992px : unpin the fixed 1920 canvas
     ============================================================ */
  .vx-navtoggle { display: none; }
  .vx-nav__rule, .vx-nav__promo { display: none; }   /* mobile-menu extras — off on desktop */

  @media (max-width: 991.98px) {
    /* smaller type scale — cascades to every token-driven size */
    :root {
      --vx-size-64: 32px;
      --vx-size-46: 25px;
      --vx-size-32: 21px;
      --vx-size-30: 23px;
      --vx-size-28: 22px;
      --vx-size-24: 18px;
      --vx-size-22: 16px;
      --vx-size-20: 16px;
    }

    html, body { overflow-x: hidden; }
    #stage { overflow-x: hidden; }
    #frame { width: 100%; margin: 0; zoom: 1 !important; }

    /* ---- announcement strip ---- */
    .vx-announce { height: auto; min-height: 30px; padding: 6px 14px; }
    .vx-announce span { padding: 0; font-size: 12px; line-height: 1.4; }

    /* ---- page canvas: stop clipping, flow vertically ---- */
    #page {
      position: relative; width: 100%; height: auto;
      overflow: visible; display: flex; flex-direction: column;
    }
    /* relative (not static) so inset:0 image layers stay contained, not full-page */
    #page > section { position: relative !important; }

    /* ---- header + mobile nav ---- */
    .vx-header {
      height: 58px; display: flex; align-items: center; gap: 12px;
      padding: 0 16px; background: var(--vx-cream); z-index: 60;
    }
    .vx-header .vx-wordmark {
      position: static !important; left: auto !important; top: auto !important;
      /* box hugs the glyph (true ~5.65:1 ratio) and centres it, so the
         wordmark and the menu icon share a horizontal centre line */
      width: 192px !important; height: 34px !important; margin-right: auto;
      -webkit-mask-position: left center; mask-position: left center;
    }
    .vx-header__cta { display: none; }   /* mobile header = logo + menu icon only */
    .vx-navtoggle {
      display: flex; flex-direction: column; justify-content: center; gap: 5px;
      width: 40px; height: 40px; padding: 9px; border: 0; background: none;
      cursor: pointer; flex-shrink: 0;
    }
    .vx-navtoggle span {
      display: block; height: 2px; width: 100%; background: var(--vx-ink);
      transition: transform .25s var(--vx-ease), opacity .2s var(--vx-ease);
    }
    .vx-header.is-nav-open .vx-navtoggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .vx-header.is-nav-open .vx-navtoggle span:nth-child(2) { opacity: 0; }
    .vx-header.is-nav-open .vx-navtoggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .vx-nav {
      position: absolute; left: 0; right: 0; top: 100%;
      width: 100%; height: auto;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--vx-cream);
      box-shadow: 0 14px 22px -16px rgba(0, 0, 0, .35);
      padding: 10px 0 0; display: none; z-index: 60;
    }
    .vx-header.is-nav-open .vx-nav { display: flex; }
    .vx-nav a {
      padding: 15px 24px;
      font-size: 17px;
      color: var(--vx-ink-deep);
    }
    .vx-nav a::after { display: none; }
    .vx-nav__rule {                        /* divider under the last link */
      display: block; height: 1px;
      margin: 12px 24px 6px;
      background: rgba(46, 71, 70, .28);
    }
    .vx-nav__promo {
      display: flex; flex-direction: column; align-items: center;
      gap: 18px; padding: 10px 24px 26px;
    }
    .vx-nav__promo img {
      width: 100%; height: 220px;
      object-fit: cover; object-position: center;
      border-radius: var(--vx-radius-card);
    }
    .vx-nav__promo .vx-btn { width: 100%; }

    /* ---- generic: kill oversized fixed widths / paddings ---- */
    .vx-symptoms, .vx-answer, .vx-formula, .vx-benefits2,
    .vx-voices, .vx-ingredients, .vx-life, .vx-footer, .vx-refs {
      width: 100% !important;
    }
    .vx-symptoms { padding: 25px 20px; min-height: 0; margin-top: 8px; }
    .vx-answer   { min-height: 0; padding: 40px 0; }
    .vx-formula  { padding: 32px 0 48px; }
    .vx-benefits2{ padding: 48px 0 56px; }
    .vx-voices   { padding: 48px 0 56px; }
    .vx-ingredients { padding: 48px 0 56px; }
    .vx-life     { padding: 56px 0 56px; }

    /* decorative watermarks / bg logos — hide on mobile */
    .vx-symptoms__mark, .vx-life__mark, .vx-conv__mark { display: none; }

    /* parallax overscan not needed without a cursor */
    .vx-slide__video, .vx-product img, .vx-answer__slide img,
    .vx-formula__frame img, .vx-benefits2__img { transform: none !important; }

    /* ---- HERO ---- */
    .vx-hero {
      position: relative !important; left: auto !important; top: auto !important;
      width: auto !important; height: auto !important;
      /* top gap 0 so the logo sits centred between the green strip and the
         hero card — same 14px above the logo as below it */
      margin: 0 8px 0; border-radius: var(--vx-radius-card);
      padding-bottom: 14px;
    }
    .vx-hero__copy {
      position: static !important; left: auto !important; top: auto !important;
      width: auto !important; padding: 16px 13px 0;
    }
    .vx-hero .vx-tag { width: auto !important; min-height: 0; font-size: 15px; padding: 4px 10px; }
    .vx-hero h1 { width: auto; margin-top: 12px; min-height: 0; font-size: 24px; letter-spacing: -0.04em; }
    .vx-hero h1 > span { white-space: normal; }
    .vx-benefits { margin-top: 14px; padding-left: 4px; gap: 12px; }
    .vx-benefits li { gap: 9px; }
    .vx-benefits .claim { font-size: 15px; }
    .vx-benefits .vx-chip { margin-left: 4px; }
    .vx-hero__cta { margin-top: 34px; }
    .vx-hero__cta .vx-btn { width: 100%; }

    .vx-media {
      position: static !important; left: auto !important; top: auto !important;
      width: auto !important; height: auto !important; margin: 22px 13px 0;
    }
    .vx-slider {
      position: relative; width: 100%; height: auto; aspect-ratio: 4 / 5;
    }
    .vx-slider__nav { top: calc(50% - 22px); }
    .vx-media__caption { left: 16px; bottom: 24px; }
    .vx-slider__dots { bottom: 12px; }   /* clear of the name caption */
    .vx-media .vx-stats {
      position: static !important; left: auto !important; top: auto !important;
      margin: 18px auto 0;
    }
    .vx-media .vx-stats:not(.is-active) { display: none; }

    /* ---- CONVERSION panel (ink) ---- */
    .vx-conv {
      position: relative !important; left: auto !important; top: auto !important;
      width: auto !important; height: auto !important;
      margin: 6px 8px 0; padding: 34px 13px;
    }
    .vx-conv > * {
      position: static !important; left: auto !important; top: auto !important;
      width: auto !important;
    }
    .vx-trustpilot { height: auto; margin-bottom: 18px; gap: 9px; flex-wrap: nowrap; }
    .vx-trustpilot .stars { gap: 2px; }
    .vx-trustpilot .stars img { width: 24px; height: 24px; }
    .vx-trustpilot .score { font-size: 19px; }
    .vx-trustpilot > img { width: 112px; height: auto; }
    .vx-conv__headline { margin-bottom: 16px; }
    .vx-conv__rule { height: 1px; margin: 18px 0; }
    .vx-conv__body { margin-bottom: 18px; }
    .vx-conv__price { margin-bottom: 20px; }
    .vx-conv__cta .vx-btn { width: 100% !important; }

    /* ---- PRODUCT panel ---- */
    .vx-product {
      position: static !important; left: auto !important; top: auto !important;
      width: auto !important; height: auto !important;
      margin: 12px 8px 0; aspect-ratio: 16 / 11;
    }

    /* ---- S3 Symptome ---- */
    .vx-symptoms__grid { grid-template-columns: 1fr; gap: 26px; margin-top: 32px; }
    .vx-symptoms__media { height: 210px; }

    /* ---- S4 Antwort ---- */
    .vx-answer__copy {
      position: static !important; left: auto !important; top: auto !important;
      transform: none !important; width: auto !important; padding: 0 13px;
    }
    .vx-answer__badge { width: 260px; margin-bottom: 22px; }
    .vx-answer__title { white-space: normal; }
    .vx-answer__copy .vx-btn { width: 100%; margin-top: 30px; }
    .vx-answer__media {
      position: relative !important; left: auto !important; top: auto !important;
      width: auto !important; height: auto !important;
      margin: 26px 13px 0; aspect-ratio: 1 / 1;
    }

    /* ---- S5 Formel ---- */
    .vx-formula__card {
      width: auto; margin: 0 8px; padding: 30px 12px;
      grid-template-columns: 1fr; column-gap: 0; row-gap: 22px;
    }
    .vx-formula__title { margin-bottom: 4px; font-size: 22px; }
    .vx-formula__title > span { white-space: normal; }
    .vx-formula__right { grid-column: 1; grid-row: auto; }
    .vx-formula__left .vx-btn { margin-top: 26px; }
    .vx-accordion__head { gap: 14px; padding: 20px 2px; }
    .vx-accordion__icon { width: 40px; height: 40px; }
    .vx-accordion__body p { padding-left: 54px; }

    /* ---- S6 Weitere Vorteile ---- */
    .vx-benefits2__title { margin-bottom: 30px; font-size: 24px; padding: 0 12px; }
    .vx-benefits2__grid {
      width: auto; margin: 0 8px;
      grid-template-columns: 1fr; column-gap: 0; row-gap: 26px;
    }
    .vx-benefits2__media { grid-column: auto; }

    /* ---- S7 Voices carousel ---- */
    .vx-voices__title { width: auto; padding: 0 12px; margin-bottom: 22px; }
    .vx-voices__controls { margin-bottom: 30px; }
    .vx-voice { flex: 0 0 84vw; }
    .vx-voices__viewport { padding-left: 8vw; }   /* (100 - 84) / 2 → active card dead-centre */
    .vx-voice__photo { height: 230px; }
    .vx-voices::before, .vx-voices::after { width: 32px; }
    .vx-voices__cta { margin-top: 40px; padding: 0 13px; }
    .vx-voices__cta .vx-btn { width: 100%; }

    /* ---- S8 Ingredients carousel ---- */
    .vx-ingredients__grid {
      width: auto; margin: 0; grid-template-columns: 1fr;
      column-gap: 0; row-gap: 24px;
    }
    .vx-ingredients__copy { padding: 0 12px; }
    .vx-ingredients__banner { padding-left: 92px; }
    .vx-ingredients__badge { width: 88px; height: 88px; left: -8px; }
    .vx-ingredients__title { margin-top: 30px; }
    .vx-ingredients__intro { max-width: none; }
    .vx-ingredients__controls { margin-top: 28px; }
    .vx-ing { flex: 0 0 84vw; min-height: 0; }
    .vx-ingredients__viewport {
      grid-column: auto; width: 100% !important;
      padding-left: 8vw;   /* (100 - 84) / 2 → active card dead-centre */
    }
    .vx-ingredients__viewport::after { width: 32px; }
    .vx-ingredients__label { width: auto; margin: 44px 12px 0; }
    .vx-ingredients__cta { margin-top: 40px; padding: 0 13px; }
    .vx-ingredients__cta .vx-btn { width: 100%; }

    /* ---- Sonderangebot cards ---- */
    .vx-offer { width: 100% !important; padding: 48px 0 52px; }
    .vx-offer__title { font-size: 23px; padding: 0 18px; margin-bottom: 28px; }
    .vx-offer__grid {
      width: auto; margin: 0 12px;
      grid-template-columns: 1fr; gap: 16px;
    }
    .vx-offer__card { padding: 24px 16px 22px; gap: 7px; min-width: 0; }
    .vx-offer__deal { font-size: 21px; min-height: 0; margin-bottom: 2px; }
    .vx-offer__rule { width: 100%; margin: 1px 0; }
    .vx-offer__banner img { max-width: 100%; }
    .vx-offer__pill { font-size: 15px; padding: 6px 16px; min-height: 42px; max-width: 100%; white-space: normal; }
    .vx-offer__was { font-size: 19px; margin-top: 3px; }
    .vx-offer__price { font-size: 38px; margin-top: 1px; }
    .vx-offer__perday { font-size: 15px; margin-top: 2px; }
    .vx-offer__cta { font-size: 16px; min-height: 54px; margin-top: 12px; }

    /* ---- Geld-Zurück-Garantie band ---- */
    .vx-guarantee { width: 100% !important; padding: 24px 0 104px; }
    .vx-guarantee__card {
      width: auto; margin: 0 12px; min-height: 0;
      flex-direction: column; align-items: center; text-align: center;
      padding: 30px 22px 32px; gap: 12px;
    }
    .vx-guarantee__badge { flex: 0 0 auto; width: 116px; height: 116px; }
    .vx-guarantee__num { margin-left: 0; font-size: 96px; letter-spacing: -0.045em; }
    .vx-guarantee__lock { width: 22px; height: 22px; right: 18px; }
    .vx-guarantee__text { margin-left: 0; max-width: none; }
    .vx-guarantee__text h2 { font-size: 22px; }
    .vx-guarantee__rule { margin: 14px 0 12px; }
    .vx-guarantee__text p { font-size: 15px; line-height: 1.45; }

    /* ---- S9 Life carousel ---- */
    .vx-life__title { margin: 0 12px 28px; }
    .vx-life__title > span { white-space: normal; }
    .vx-life__viewport { padding-left: 4vw; }
    .vx-life__slide { flex: 0 0 82vw; height: 260px; }
    .vx-life__controls { margin-top: 36px; }

    /* shared carousel control buttons — a touch smaller */
    .vx-voices__btn, .vx-ingredients__btn, .vx-life__btn { width: 96px; height: 46px; }
    .vx-voices__btn .arw, .vx-ingredients__btn .arw, .vx-life__btn .arw { width: 56px; }
    .vx-voices__counter, .vx-life__counter { width: 84px; height: 46px; }
    .vx-ingredients__counter { width: 84px; height: 46px; }

    /* ---- FOOTER ---- */
    .vx-footer {
      height: auto; padding: 40px 13px 44px;
      display: flex; flex-direction: column; gap: 22px;
    }
    .vx-footer > * {
      position: static !important; left: auto !important; top: auto !important;
      width: auto !important;
    }
    .vx-footer__rule, .vx-footer__vr { display: none; }
    .vx-footer__logo { width: 240px !important; height: 42px !important; -webkit-mask-position: left center; mask-position: left center; }
    .vx-footer__disclaimer, .vx-footer__address, .vx-footer__copyright { width: auto !important; }
    .vx-footer__col { flex-direction: column; }
    .vx-footer__col a { line-height: 2.4; }
    .vx-footer__cards { margin-top: 4px; }

    /* ---- Quellen ---- */
    .vx-refs { padding: 36px 12px 44px; }
    .vx-refs__grid {
      grid-template-columns: 1fr; grid-template-rows: none;
      grid-auto-flow: row; column-gap: 0; row-gap: 14px;
    }
    .vx-refs__item { font-size: 13px; }
    .vx-refs__item a { font-size: 12px; }
  }