/* ── Tokens ───────────────────────────────────────────────── */
    :root {
      --bg-dark:   #0d120e;
      --bg-darker: #080b09;
      --bg-light:  #f3f0e7;
      --green:        #6b8e3a;
      --green-bright: #9ec94a;
      --green-deep:   #2e3b22;
      --text-light:      #f3f0e7;
      --text-muted-light: rgba(243,240,231,0.58);
      --text-dark:       #1a1f17;
      --text-muted-dark:  rgba(26,31,23,0.55);
      --btn-text:  #17200f;
      --radius:    24px;
      --radius-lg: 36px;
      --ease:       cubic-bezier(0.22, 1, 0.36, 1);
      --transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);

      /*
       * ── Fluid Type Scale ── Perfect Fourth (×1.333) ───────────
       *
       * Formula: clamp(min, calc(min + (max - min) * (100vw - 375px) / (1280 - 375)), max)
       * Viewport range: 375px (mobile) → 1280px (desktop)
       * Base:  16px → 18px  (1rem → 1.125rem)
       *
       * Step  | Role              | Mobile  | Desktop
       * ──────┼───────────────────┼─────────┼────────
       * xs    | labels / captions | 11px    | 12px
       * sm    | small UI text     | 13px    | 14px
       * base  | body copy         | 16px    | 18px
       * md    | lead / body-lg    | 17px    | 20px
       * lg    | h3 (cards)        | 18px    | 22px
       * xl    | h3 (sections)     | 22px    | 28px
       * 2xl   | h3 (display)      | 26px    | 36px
       * 3xl   | h2                | 31px    | 48px
       * display | h1              | 42px    | 72px
       */

      /* xs: 11px → 12px */
      --fs-xs:   clamp(0.6875rem, calc(0.6875rem + 0.11vw), 0.75rem);

      /* sm: 13px → 14px */
      --fs-sm:   clamp(0.8125rem, calc(0.8125rem + 0.11vw), 0.875rem);

      /* base: 16px → 18px */
      --fs-base: clamp(1rem, calc(1rem + 0.22vw), 1.125rem);

      /* md: 17px → 20px */
      --fs-md:   clamp(1.0625rem, calc(1.0625rem + 0.33vw), 1.25rem);

      /* lg: 18px → 22px */
      --fs-lg:   clamp(1.125rem, calc(1.125rem + 0.44vw), 1.375rem);

      /* xl: 22px → 28px */
      --fs-xl:   clamp(1.375rem, calc(1.375rem + 0.66vw), 1.75rem);

      /* 2xl: 26px → 36px */
      --fs-2xl:  clamp(1.625rem, calc(1.625rem + 1.1vw), 2.25rem);

      /* 3xl: 31px → 48px */
      --fs-3xl:  clamp(1.9375rem, calc(1.9375rem + 1.87vw), 3rem);

      /* display: 42px → 72px */
      --fs-display: clamp(2.625rem, calc(2.625rem + 3.31vw), 4.5rem);

      /* ── Line-height tokens ────────────────────────────────── */
      --lh-tight:   1.05;   /* display headings */
      --lh-heading: 1.12;   /* h2, h3-display */
      --lh-snug:    1.25;   /* h3-section */
      --lh-normal:  1.5;    /* body */
      --lh-relaxed: 1.72;   /* lead / long-form */

      /* ── Letter-spacing tokens ─────────────────────────────── */
      --ls-tight:   -0.04em;  /* large display headings */
      --ls-snug:    -0.03em;  /* h2 / h3 */
      --ls-normal:   0em;     /* body */
      --ls-wide:     0.08em;  /* labels */
      --ls-wider:    0.14em;  /* eyebrows / uppercase */
    }
    @property --process-glow-angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }
    @property --card-glow-angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }

    /* ── Reset ────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html {
      scroll-behavior: smooth;
      overflow-x: clip;
    }
    body {
      margin: 0;
      font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
      background: var(--bg-dark);
      color: var(--text-light);
      overflow-x: clip;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input { font: inherit; }

    /* ── Layout ───────────────────────────────────────────────── */
    .wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
    .skip-link {
      position: absolute;
      top: -100%;
      left: 16px;
      padding: 8px 16px;
      background: var(--green);
      color: var(--btn-text);
      font-weight: 800;
      font-size: var(--fs-sm);
      border-radius: 0 0 var(--radius) var(--radius);
      z-index: 9999;
      transition: top 0.2s;
    }
    .skip-link:focus { top: 0; }

    /* ── Type helpers ─────────────────────────────────────────── */
    .eyebrow {
      margin: 0 0 16px;
      color: var(--green);
      font-size: var(--fs-xs);
      font-weight: 800;
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
    }
    .serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; }
    .italic { font-style: italic; }

    /* ── Buttons ──────────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 48px;
      padding: 0 22px;
      border-radius: 999px;
      font-weight: 800;
      border: 1px solid transparent;
      cursor: pointer;
      white-space: nowrap;
      transition: var(--transition);
    }
    .btn-primary {
      background: var(--green-bright);
      color: var(--btn-text);
      box-shadow: 0 14px 36px rgba(158,201,74,0.2);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 48px rgba(158,201,74,0.32); }
    .btn-ghost {
      color: var(--text-light);
      border-color: rgba(243,240,231,0.2);
      background: rgba(243,240,231,0.04);
    }
    .btn-ghost:hover { border-color: rgba(158,201,74,0.5); transform: translateY(-2px); }
    .btn-outline-dark {
      color: var(--text-dark);
      border-color: rgba(26,31,23,0.22);
      background: transparent;
    }
    .btn-outline-dark:hover { border-color: var(--green); background: rgba(107,142,58,0.06); }

    /* ── Nav ──────────────────────────────────────────────────── */
    .nav {
      position: fixed;
      z-index: 50;
      top: 12px;
      left: 16px;
      right: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 12px 18px;
      background: rgba(8,11,9,0.78);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(243,240,231,0.08);
      border-radius: 100px;
      transition: var(--transition);
    }
    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      flex: 1;
      min-width: 0;
    }
    .nav-link {
      color: rgba(243,240,231,0.68);
      font-size: var(--fs-base);
      font-weight: 600;
      letter-spacing: var(--ls-snug);
      line-height: 1;
      transition: color 0.2s ease;
      white-space: nowrap;
    }
    .nav-link:hover { color: var(--green); }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .nav.scrolled .brand {
      gap: 0;
      font-size: 0;
    }
    .mark {
      width: 30px; height: 30px;
      border-radius: 10px;
      display: inline-grid;
      place-items: center;
      background: transparent;
      flex: 0 0 30px;
    }
    .mark img { width: 30px; height: 30px; display: block; }

    /* ── Hero ─────────────────────────────────────────────────── */
    .hero {
      position: relative;
      padding: 140px 0 0;
      background:
        radial-gradient(circle at 74% 34%, rgba(158,201,74,0.13), transparent 26%),
        radial-gradient(circle at 82% 58%, rgba(92,62,90,0.42), transparent 38%),
        radial-gradient(circle at 18% 20%, rgba(243,240,231,0.05), transparent 30%),
        linear-gradient(140deg, #111315 0%, #1b171c 46%, #0b0d0c 100%);
      overflow: hidden;
      isolation: isolate;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(115deg, rgba(243,240,231,0.028) 0%, transparent 28%, rgba(96,56,91,0.14) 58%, rgba(158,201,74,0.06) 100%),
        radial-gradient(circle at 74% 31%, rgba(243,240,231,0.055) 0 1px, transparent 1.4px),
        radial-gradient(circle at 24% 72%, rgba(158,201,74,0.04) 0 1px, transparent 1.4px);
      background-size: 100% 100%, 28px 28px, 36px 36px;
      opacity: 0.55;
      pointer-events: none;
      z-index: 0;
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: auto -8% 0 -8%;
      height: 46%;
      background:
        radial-gradient(ellipse at 72% 34%, rgba(158,201,74,0.12), transparent 38%),
        linear-gradient(180deg, transparent 0%, rgba(8,11,9,0.32) 88%);
      pointer-events: none;
      z-index: 0;
    }
    .hero > .wrap { position: relative; z-index: 1; }
    .hero-wrap {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: minmax(0, 0.72fr) minmax(0, 0.86fr);
      grid-template-rows: 1fr auto;
      align-items: center;
      gap: 0 38px;
    }
    .hero-left { align-self: center; padding-bottom: 48px; }
    .hero-right { align-self: center; padding-bottom: 48px; }
    .hero-meta-row {
      grid-column: 1 / -1;
      padding: 40px 32px 40px;
      border-top: 1px solid rgba(243,240,231,0.12);
      margin-top: 24px;
    }
    .hero-meta {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-content: space-between;
      gap: 64px;
      width: 100%;
    }
    .hero-meta > div {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      column-gap: 12px;
      min-width: 150px;
    }
    .meta-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: var(--green);
      background: rgba(158,201,74,0.1);
      border: 1px solid rgba(158,201,74,0.18);
      box-shadow: 0 10px 28px rgba(158,201,74,0.08);
    }
    .meta-icon svg {
      width: 18px;
      height: 18px;
    }
    .hero h1 {
      margin: 0;
      font-size: var(--fs-display);
      line-height: var(--lh-tight);
      font-weight: 800;
      letter-spacing: var(--ls-tight);
      text-wrap: balance;
    }
    .hero-copy {
      max-width: 500px;
      margin: 24px 0 0;
      color: var(--text-muted-light);
      font-size: var(--fs-md);
      line-height: var(--lh-relaxed);
    }
    .hero-cta-stack {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      margin-top: 32px;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 0; }
    .hero-direct-btn {
      background: rgba(243,240,231,0.08);
      border-color: rgba(243,240,231,0.12);
      color: rgba(243,240,231,0.9);
      box-shadow: none;
    }
    .hero-direct-btn:hover {
      border-color: rgba(158,201,74,0.32);
      background: rgba(243,240,231,0.12);
      box-shadow: none;
    }
    .hero-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      align-items: center;
    }
    .hero-link {
      color: rgba(243,240,231,0.72);
      font-size: var(--fs-sm);
      font-weight: 700;
      line-height: 1.45;
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .hero-link:hover { color: var(--green); }
    .hero-link-secondary { color: rgba(243,240,231,0.56); }
    .booster {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 32px 0 0;
      color: rgba(243,240,231,0.65);
      font-size: var(--fs-sm);
      font-weight: 700;
      line-height: var(--lh-normal);
    }
    .meta-num { display: block; font-size: var(--fs-2xl); line-height: 1; font-weight: 800; letter-spacing: var(--ls-tight); }
    .meta-label { display: block; margin-top: 6px; color: var(--text-muted-light); font-size: var(--fs-sm); }

    /* ── Mockup Carousel ──────────────────────────────────────── */
    .hero-right {
      position: relative;
      height: 580px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-width: 0;
      perspective: 1200px;
    }
    .hero-right::before {
      content: "";
      position: absolute;
      width: 58%;
      height: 24%;
      right: 6%;
      bottom: 22%;
      background: radial-gradient(ellipse, rgba(158,201,74,0.1), rgba(158,201,74,0.04) 38%, transparent 72%);
      filter: blur(24px);
      opacity: 0.68;
      transform: rotate(-4deg);
      pointer-events: none;
    }
    .hero-right::after {
      content: "";
      position: absolute;
      width: 78%;
      height: 18%;
      right: 2%;
      bottom: 18%;
      background:
        radial-gradient(ellipse, rgba(0,0,0,0.32), rgba(0,0,0,0.14) 42%, transparent 74%);
      filter: blur(18px);
      opacity: 0.66;
      transform: rotate(-3deg);
      pointer-events: none;
    }
    .mockup-stack {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
      transform-style: preserve-3d;
      filter:
        drop-shadow(0 34px 46px rgba(0,0,0,0.14))
        drop-shadow(28px 42px 46px rgba(158,201,74,0.08));
    }
    .mockup-stack::before,
    .mockup-stack::after {
      content: "";
      position: absolute;
      border-radius: 18px;
      border: 1px solid rgba(243,240,231,0.08);
      pointer-events: none;
    }
    .mockup-stack::before {
      inset: 11% 2% 10% 10%;
      background:
        linear-gradient(90deg, rgba(243,240,231,0.075), rgba(243,240,231,0.018)),
        rgba(8,11,9,0.24);
      transform: translate3d(-22px, 22px, -46px) rotateZ(-1.4deg);
      opacity: 0.48;
      z-index: 0;
      box-shadow: 0 24px 58px rgba(0,0,0,0.2);
    }
    .mockup-stack::after {
      inset: 5% -2% 18% 8%;
      background:
        linear-gradient(180deg, rgba(243,240,231,0.08) 0 42px, rgba(243,240,231,0.015) 42px 100%);
      transform: translate3d(24px, -14px, -72px) rotateZ(1.2deg);
      opacity: 0.28;
      z-index: 0;
    }
    .mockup-frame {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) translateY(0px);
      width: 100%;
      height: 100%;
      background: var(--bg-darker);
      border-radius: 18px;
      border: 1px solid rgba(243,240,231,0.1);
      box-shadow:
        0 18px 32px rgba(0,0,0,0.14),
        0 56px 110px rgba(0,0,0,0.24),
        26px 38px 68px rgba(158,201,74,0.08),
        0 0 34px rgba(158,201,74,0.05),
        0 0 0 1px rgba(243,240,231,0.06);
      overflow: hidden;
      opacity: 0;
      transition: opacity 1.4s var(--ease);
      pointer-events: none;
    }
    .mockup-frame.active {
      opacity: 1;
      transform: translate(-50%, -50%) translateY(0px);
      pointer-events: auto;
    }
    .mockup-frame.prev {
      opacity: 0;
      transform: translate(-50%, -50%) translateY(0px);
    }
    .mockup-frame.next {
      opacity: 0;
      transform: translate(-50%, -50%) translateY(0px);
    }
    /* Browser chrome bar */
    .mockup-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 14px;
      background: rgba(243,240,231,0.05);
      border-bottom: 1px solid rgba(243,240,231,0.07);
    }
    .mockup-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(243,240,231,0.15); }
    .mockup-dot:first-child { background: rgba(255,100,80,0.4); }
    .mockup-dot:nth-child(2) { background: rgba(255,180,50,0.4); }
    .mockup-dot:nth-child(3) { background: rgba(80,200,80,0.4); }
    .mockup-url {
      flex: 1;
      margin-left: 8px;
      height: 22px;
      border-radius: 6px;
      background: rgba(243,240,231,0.06);
      display: flex;
      align-items: center;
      padding: 0 10px;
      font-size: var(--fs-xs);
      color: rgba(243,240,231,0.35);
    }
    /* Mockup content skins */
    .mockup-content {
      height: 100%;
      overflow: hidden;
      position: relative;
    }
    .mockup-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
    }
    .mockup-hero-bar {
      height: 48px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      gap: 8px;
      border-bottom: 1px solid rgba(243,240,231,0.06);
    }
    .mockup-hero-bar .mlogo { width: 22px; height: 22px; border-radius: 50%; }
    .mockup-hero-bar .mname { height: 8px; border-radius: 4px; background: rgba(243,240,231,0.2); }
    .mockup-hero-bar .mcta { height: 24px; border-radius: 12px; margin-left: auto; }
    .mockup-section { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
    .mline { height: 7px; border-radius: 4px; background: rgba(243,240,231,0.12); }
    .mline.h { height: 18px; background: rgba(243,240,231,0.22); }
    .mline.hh { height: 28px; background: rgba(243,240,231,0.28); border-radius: 6px; }
    .mline.accent { background: rgba(158,201,74,0.35); }
    .mcard-row { display: flex; gap: 10px; }
    .mcard {
      flex: 1;
      height: 72px;
      border-radius: 10px;
      background: rgba(243,240,231,0.06);
      border: 1px solid rgba(243,240,231,0.07);
    }
    /* Mockup skin: light */
    .skin-light { background: #f3f0e7; }
    .skin-light .mockup-bar { background: rgba(26,31,23,0.06); border-color: rgba(26,31,23,0.08); }
    .skin-light .mockup-dot { background: rgba(26,31,23,0.12); }
    .skin-light .mockup-dot:first-child { background: rgba(220,60,40,0.3); }
    .skin-light .mockup-dot:nth-child(2) { background: rgba(220,150,30,0.3); }
    .skin-light .mockup-dot:nth-child(3) { background: rgba(60,180,60,0.3); }
    .skin-light .mockup-url { background: rgba(26,31,23,0.06); color: rgba(26,31,23,0.3); }
    .skin-light .mockup-hero-bar { border-color: rgba(26,31,23,0.07); }
    .skin-light .mline { background: rgba(26,31,23,0.1); }
    .skin-light .mline.h { background: rgba(26,31,23,0.18); }
    .skin-light .mline.hh { background: rgba(26,31,23,0.22); }
    .skin-light .mline.accent { background: rgba(107,142,58,0.35); }
    .skin-light .mcard { background: rgba(26,31,23,0.04); border-color: rgba(26,31,23,0.06); }
    /* Floating label on mockup */
    .mockup-tag {
      position: absolute;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      background: rgba(8,11,9,0.82);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(243,240,231,0.1);
      border-radius: 999px;
      padding: 7px 16px;
      font-size: var(--fs-xs);
      font-weight: 700;
      color: var(--text-muted-light);
      z-index: 5;
      opacity: 0;
      transition: opacity 0.4s;
    }
    .mockup-frame.active .mockup-tag { opacity: 1; }

    /* ── Audience Marquee ─────────────────────────────────────── */
    .marquee {
      background: var(--bg-darker);
      border-bottom: 1px solid rgba(243,240,231,0.07);
      padding: 18px 0 30px;
      overflow: hidden;
    }
    .marquee-label {
      text-align: center;
      color: var(--text-muted-light);
      font-size: var(--fs-xs);
      font-weight: 800;
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      margin-bottom: 28px;
    }
    .marquee-window {
      overflow: hidden;
      overflow-x: clip;
      max-width: 100%;
      contain: paint;
      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }
    .marquee-track {
      display: flex;
      width: max-content;
      gap: 16px;
      animation: scroll-x 32s linear infinite;
    }
    .marquee-window:hover .marquee-track { animation-play-state: paused; }
    .logo-item {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-width: 200px;
      color: rgba(243,240,231,0.7);
      font-weight: 800;
      letter-spacing: -0.01em;
    }
    .logo-item::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: currentColor;
      opacity: 0.78;
      flex: 0 0 6px;
    }
    .logo-item svg { width: 16px; height: 16px; color: var(--green); }
    @keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* ── Sections ─────────────────────────────────────────────── */
    section { padding: 88px 0; }
    .section-focal { padding: 112px 0; }
    .cta { padding: 100px 0; }
    .section-light {
      background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,0.38), transparent 32%),
        linear-gradient(180deg, #f4f1e8 0%, #eee9dc 100%);
      color: var(--text-dark);
    }
    .section-dark  {
      background:
        radial-gradient(circle at 72% 28%, rgba(153,230,55,0.08), transparent 32%),
        radial-gradient(circle at 18% 74%, rgba(255,255,255,0.035), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.018), rgba(0,0,0,0.08)),
        var(--bg-dark);
    }
    .section-darker {
      background:
        radial-gradient(circle at 62% 22%, rgba(153,230,55,0.065), transparent 30%),
        radial-gradient(circle at 18% 80%, rgba(255,255,255,0.03), transparent 26%),
        var(--bg-darker);
    }
    .section-warum {
      background:
        radial-gradient(circle at 50% 10%, rgba(255,255,255,0.42), transparent 34%),
        radial-gradient(circle at 82% 74%, rgba(158,201,74,0.13), transparent 34%),
        linear-gradient(180deg, #e9f1dc 0%, #dbe8c8 58%, #d2dfbe 100%);
      color: var(--text-dark);
      padding: 88px 0;
      overflow: hidden;
    }
    .section-warum .eyebrow { color: var(--green); }
    .section-warum .section-head { margin-bottom: 48px; }
    .section-head {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      align-content: flex-end;
      gap: 80px;
      margin-bottom: 40px;
    }
    .section-head > *:first-child { flex: 0 1 55%; max-width: 55%; }
    .section-head > *:last-child:not(:first-child) { flex: 1; max-width: 100%; }
    .section-head.center {
      display: block;
      width: 100%;
      max-width: 1120px;
      margin: 0 auto 48px;
      text-align: center;
    }
    .section-head.center > * {
      max-width: none;
      margin-left: auto;
      margin-right: auto;
    }
    .section-head.center > *:first-child,
    .section-head.center > *:last-child:not(:first-child) {
      flex: none;
      max-width: 100%;
    }
    .section-head.center h2 {
      width: 100%;
      max-width: 1080px;
    }
    .section-head.center .lead {
      max-width: 760px;
    }
    h2 {
      margin: 0;
      font-size: var(--fs-3xl);
      line-height: var(--lh-heading);
      font-weight: 800;
      letter-spacing: var(--ls-tight);
      text-wrap: balance;
    }
    .accent-text { color: var(--green); }
    .section-light .accent-text,
    .section-warum .accent-text { color: var(--green); }
    .lead {
      margin: 16px 0 0;
      font-size: var(--fs-md);
      line-height: var(--lh-relaxed);
      color: var(--text-muted-dark);
    }
    .section-dark .lead, .section-darker .lead { color: var(--text-muted-light); }

    /* ── PAS ──────────────────────────────────────────────────── */
    .section-pas {
      background:
        radial-gradient(circle at 50% 2%, rgba(255,255,255,0.52), transparent 34%),
        radial-gradient(circle at 82% 78%, rgba(158,201,74,0.08), transparent 32%),
        linear-gradient(180deg, #f5f2ea 0%, #eee8dc 78%, #e7dfd1 100%);
      position: relative;
      overflow: hidden;
    }
    .section-pas::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 70%, rgba(46,59,34,0.035) 0 1px, transparent 1.3px);
      background-size: 30px 30px;
      opacity: 0.28;
      pointer-events: none;
    }
    .section-pas > .wrap {
      position: relative;
      z-index: 1;
    }
    .section-pas .eyebrow { color: rgba(46,59,34,0.92); }
    .pas-intro { margin-bottom: 48px; max-width: 980px; margin-left: auto; margin-right: auto; text-align: center; }
    .pas-headline {
      margin: 0;
      font-size: var(--fs-3xl);
      line-height: var(--lh-heading);
      font-weight: 800;
      letter-spacing: var(--ls-tight);
      color: var(--text-dark);
    }
    .pas-headline .accent-text {
      position: relative;
      display: inline-block;
      z-index: 0;
    }
    .pas-headline .accent-text::after {
      content: none;
    }
    .pas-lead {
      margin: 20px 0 0;
      font-size: var(--fs-md);
      line-height: var(--lh-relaxed);
      color: var(--text-muted-dark);
    }
    .pas-body {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
      padding-top: 40px;
    }
    .pas-body .pas-solution { grid-column: auto; }
    .pas-block {
      position: relative;
      padding: 32px;
      border-radius: var(--radius);
      background: rgba(255,255,255,0.54);
      border: 1px solid rgba(255,255,255,0.78);
      backdrop-filter: blur(30px) saturate(145%);
      -webkit-backdrop-filter: blur(30px) saturate(145%);
      box-shadow:
        0 18px 44px rgba(26,31,23,0.045),
        inset 0 1px 0 rgba(255,255,255,0.72);
      overflow: hidden;
      isolation: isolate;
      --card-glow-angle: 0deg;
      transform-style: preserve-3d;
      will-change: transform;
      transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
    }
    .pas-block::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.34) 52%, rgba(107,142,58,0.1) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: 1;
    }
    .pas-block::after {
      content: "";
      position: absolute;
      top: 22px;
      right: 18px;
      width: 110px;
      height: 110px;
      background: rgba(46,59,34,0.08);
      opacity: 0.6;
      z-index: 0;
      pointer-events: none;
      transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }
    .pas-block > * { position: relative; z-index: 1; }
    .pas-block:nth-child(1)::after {
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5l3 3'/%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5l3 3'/%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");
    }
    .pas-block:nth-child(2)::after {
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13l2 2 5-5'/%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13l2 2 5-5'/%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E");
    }
    .pas-block:nth-child(3)::after {
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
    }
    .pas-block:nth-child(1):hover {
      transform: perspective(1200px) translate3d(-4px, -8px, 0) rotateY(-7deg) rotateX(1.5deg) skewX(0.8deg);
    }
    .pas-block:nth-child(2):hover {
      transform: perspective(1200px) translate3d(0, -8px, 0) rotateY(2.5deg) rotateX(1.2deg) skewY(-0.4deg);
    }
    .pas-block:nth-child(3):hover {
      transform: perspective(1200px) translate3d(5px, -8px, 0) rotateY(7deg) rotateX(1.1deg) skewX(-0.7deg);
    }
    .pas-block:hover {
      box-shadow:
        0 26px 58px rgba(26,31,23,0.09),
        0 0 34px rgba(158,201,74,0.18),
        inset 0 1px 0 rgba(255,255,255,0.86);
      background: rgba(255,255,255,0.95);
      border-color: rgba(255,255,255,0.95);
    }
    .pas-block:hover::before {
      background: conic-gradient(from var(--card-glow-angle), rgba(158,201,74,0.95), rgba(243,240,231,0.62), rgba(107,142,58,0.36), rgba(158,201,74,0.82), rgba(243,240,231,0.46), rgba(158,201,74,0.95));
      filter: drop-shadow(0 0 9px rgba(158,201,74,0.38)) drop-shadow(0 0 18px rgba(158,201,74,0.18));
      animation: card-border-spin 5.2s linear infinite;
    }
    .pas-block:hover::after {
      transform: translate3d(6px, -4px, 0) scale(1.04);
      opacity: 0.78;
    }
    .pas-block h3 {
      margin: 0 0 12px;
      font-size: var(--fs-lg);
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text-dark);
    }
    .pas-block p { margin: 0; color: var(--text-muted-dark); line-height: var(--lh-relaxed); font-size: var(--fs-base); }
    .pas-block.pas-solution {
      background: rgba(255,255,255,0.54);
      border-color: rgba(107,142,58,0.18);
    }
    .pas-block.pas-solution h3 { color: var(--green-deep); }

    /* ── Process 2-col sticky ─────────────────────────────────── */
    .process-layout {
      display: grid;
      grid-template-columns: minmax(500px, 1fr) minmax(0, 1.3fr);
      gap: 52px;
      align-items: start;
    }
    .process-left {
      position: sticky;
      top: 120px;
      align-self: start;
      height: fit-content;
    }
    .process-right {
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 4px 0 8px;
    }
    .process-left .eyebrow { margin-bottom: 14px; }
    .process-left h2 {
      margin: 0;
      font-size: var(--fs-3xl);
      line-height: var(--lh-heading);
      letter-spacing: var(--ls-tight);
    }
    .process-left .lead {
      max-width: 36ch;
      margin-top: 22px;
    }
    .section-dark#process {
      background:
        radial-gradient(circle at 66% 18%, rgba(158,201,74,0.08), transparent 31%),
        radial-gradient(ellipse at 56% 48%, rgba(243,240,231,0.034), transparent 44%),
        radial-gradient(ellipse at 16% 72%, rgba(115,121,116,0.11), transparent 36%),
        linear-gradient(128deg, #050807 0%, #101412 48%, #07100c 100%);
      position: relative;
      overflow: visible;
      isolation: isolate;
    }
    .section-dark#process::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 20% 22%, rgba(243,240,231,0.035) 0 1px, transparent 1.2px),
        radial-gradient(circle at 72% 68%, rgba(158,201,74,0.03) 0 1px, transparent 1.2px),
        linear-gradient(112deg, rgba(180,185,180,0.055) 0%, transparent 30%, transparent 62%, rgba(158,201,74,0.035) 100%);
      background-size: 26px 26px, 34px 34px, 100% 100%;
      mask-image: linear-gradient(180deg, rgba(0,0,0,0.24), rgba(0,0,0,0.07));
      pointer-events: none;
      opacity: 0.5;
    }
    .section-dark#process > .wrap {
      position: relative;
      z-index: 1;
    }
    .process-panel {
      position: relative;
      min-height: 340px;
      border-radius: 30px;
      overflow: hidden;
      border: 1px solid transparent;
      background: #0e1712;
      --process-glow-angle: 0deg;
      transform-style: preserve-3d;
      will-change: transform;
      transition: transform 0.46s var(--ease), box-shadow 0.46s var(--ease), --process-glow-angle 0.46s linear;
    }
    .process-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background:
        radial-gradient(circle at 10% 92%, rgba(158,201,74,0.52) 0%, rgba(158,201,74,0.18) 16%, transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(243,240,231,0.22) 0%, transparent 24%),
        linear-gradient(145deg, rgba(243,240,231,0.18) 0%, rgba(243,240,231,0.06) 22%, rgba(158,201,74,0.07) 58%, rgba(158,201,74,0.26) 82%, rgba(243,240,231,0.16) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 3;
      opacity: 1;
      transition: opacity 0.35s var(--ease), filter 0.35s var(--ease), background 0.35s var(--ease);
    }
    .process-panel:hover {
      box-shadow:
        0 28px 70px rgba(0,0,0,0.32),
        0 0 0 1px rgba(158,201,74,0.18),
        0 0 34px rgba(158,201,74,0.24),
        0 0 70px rgba(243,240,231,0.06);
    }
    .process-panel:hover::before {
      background:
        conic-gradient(
          from var(--process-glow-angle),
          rgba(158,201,74,0.96),
          rgba(243,240,231,0.46),
          rgba(46,59,34,0.28),
          rgba(158,201,74,0.72),
          rgba(243,240,231,0.34),
          rgba(158,201,74,0.96)
        );
      filter:
        drop-shadow(0 0 9px rgba(158,201,74,0.54))
        drop-shadow(0 0 18px rgba(158,201,74,0.28));
      animation: process-border-spin 4.8s linear infinite;
    }
    @keyframes process-border-spin {
      to { --process-glow-angle: 360deg; }
    }
    @keyframes card-border-spin {
      to { --card-glow-angle: 360deg; }
    }
    .process-panel:nth-child(1):hover {
      transform: perspective(1300px) rotateY(-0.85deg) rotateX(0.18deg) skewX(0.22deg);
    }
    .process-panel:nth-child(2):hover {
      transform: perspective(1300px) rotateY(0.62deg) rotateX(0.16deg) skewY(-0.18deg);
    }
    .process-panel:nth-child(3):hover {
      transform: perspective(1300px) rotateY(0.78deg) rotateX(0.17deg) skewX(-0.2deg);
    }
    .process-panel:nth-child(4):hover {
      transform: perspective(1300px) rotateY(-0.68deg) rotateX(0.15deg) skewY(0.18deg);
    }
    .process-panel::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(8,11,9,0.98) 0%, rgba(8,11,9,0.94) 34%, rgba(8,11,9,0.78) 62%, rgba(8,11,9,0.34) 86%, rgba(8,11,9,0) 100%);
      z-index: 1;
    }
    .process-media {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: right center;
      z-index: 0;
      transition: transform 0.82s var(--ease);
      transform-origin: center center;
    }
    .process-panel:hover .process-media { transform: scale(1.07); }
    .process-copy {
      position: relative;
      z-index: 2;
      width: min(76%, 620px);
      min-height: 340px;
      padding: 34px 34px 30px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .process-step-num {
      display: inline-flex;
      align-self: flex-start;
      margin-bottom: 18px;
      padding: 7px 14px;
      border-radius: 999px;
      color: var(--green);
      background: rgba(158,201,74,0.14);
      font-size: var(--fs-xs);
      font-weight: 800;
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
    }
    .process-panel h3 {
      margin: 0;
      font-size: var(--fs-xl);
      letter-spacing: var(--ls-tight);
      line-height: var(--lh-snug);
      color: var(--text-light);
    }
    .process-panel p {
      margin: 16px 0 0;
      color: rgba(243,240,231,0.8);
      line-height: var(--lh-normal);
      font-size: var(--fs-base);
    }
    .process-copy .arrow-link { margin-top: 22px; }

    /* ── Stats (legacy, keep for responsive reset) ────────────── */
    .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
    .stat-card {
      position: relative;
      isolation: isolate;
      min-height: 208px;
      border-radius: var(--radius);
      background: rgba(255,255,255,0.54);
      padding: 24px;
      display: flex;
      flex-direction: column;
      transition: var(--transition);
      border: 1px solid rgba(255,255,255,0.7);
      backdrop-filter: blur(22px) saturate(128%);
      -webkit-backdrop-filter: blur(22px) saturate(128%);
      --card-glow-angle: 0deg;
    }
    .stat-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.22) 52%, rgba(107,142,58,0.12) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
    }
    .stat-card > * { position: relative; z-index: 1; }
    .stat-card:hover {
      background: rgba(255,255,255,0.95);
      transform: translateY(-4px);
      box-shadow: 0 20px 60px rgba(26,31,23,0.1), 0 0 34px rgba(158,201,74,0.18);
    }
    .stat-card:hover::before {
      background: conic-gradient(from var(--card-glow-angle), rgba(158,201,74,0.94), rgba(243,240,231,0.58), rgba(107,142,58,0.34), rgba(158,201,74,0.78), rgba(243,240,231,0.42), rgba(158,201,74,0.94));
      filter: drop-shadow(0 0 9px rgba(158,201,74,0.38)) drop-shadow(0 0 18px rgba(158,201,74,0.18));
      animation: card-border-spin 5.2s linear infinite;
    }
    .stat-card.accent { background: var(--green-deep); color: var(--text-light); border-color: transparent; }
    .icon-chip {
      width: 44px; height: 44px;
      border-radius: 12px;
      display: grid; place-items: center;
      color: var(--green);
      background: rgba(107,142,58,0.12);
    }
    .accent .icon-chip { color: var(--green); background: rgba(158,201,74,0.14); }
    .icon-chip svg { width: 22px; height: 22px; }
    .stat-num { margin-top: auto; font-size: var(--fs-2xl); font-weight: 800; line-height: 1; letter-spacing: var(--ls-tight); }
    .unit { font-size: var(--fs-md); letter-spacing: var(--ls-snug); }
    .stat-label { margin-top: 8px; color: var(--text-muted-dark); line-height: 1.45; font-weight: 700; }
    .accent .stat-label { color: rgba(243,240,231,0.7); }

    .arrow-link { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 800; }

    /* ── Benefits ─────────────────────────────────────────────── */
    .benefit-main {
      display: flex;
      flex-direction: column;
      gap: 24px;
      margin-top: 24px;
      margin-bottom: 24px;
    }
    .usp-band {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      min-height: 420px;
      border-radius: 32px;
      overflow: hidden;
      position: relative;
      isolation: isolate;
      background: rgba(255,255,255,0.5);
      border: 1px solid rgba(255,255,255,0.72);
      backdrop-filter: blur(24px) saturate(132%);
      -webkit-backdrop-filter: blur(24px) saturate(132%);
      box-shadow: 0 18px 48px rgba(26,31,23,0.08), inset 0 1px 0 rgba(255,255,255,0.48);
      --card-glow-angle: 0deg;
      transform-style: preserve-3d;
      will-change: transform;
      transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease);
    }
    .usp-band::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.24) 52%, rgba(107,142,58,0.12) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 4;
    }
    .usp-band:hover {
      background: rgba(255,255,255,0.95);
      border-color: rgba(255,255,255,0.95);
      box-shadow:
        0 24px 60px rgba(26,31,23,0.13),
        0 0 34px rgba(158,201,74,0.18),
        inset 0 1px 0 rgba(255,255,255,0.75);
    }
    .usp-band:hover::before {
      background: conic-gradient(from var(--card-glow-angle), rgba(158,201,74,0.94), rgba(243,240,231,0.58), rgba(107,142,58,0.34), rgba(158,201,74,0.78), rgba(243,240,231,0.42), rgba(158,201,74,0.94));
      filter: drop-shadow(0 0 9px rgba(158,201,74,0.38)) drop-shadow(0 0 18px rgba(158,201,74,0.18));
      animation: card-border-spin 5.2s linear infinite;
    }
    .usp-band:nth-child(1):hover {
      transform: perspective(1400px) translate3d(-1px, -4px, 0) rotateY(-1.35deg) rotateX(0.45deg) skewX(0.18deg);
    }
    .usp-band:nth-child(2):hover {
      transform: perspective(1400px) translate3d(1px, -4px, 0) rotateY(1.15deg) rotateX(0.38deg) skewY(-0.16deg);
    }
    .usp-band:nth-child(3):hover {
      transform: perspective(1400px) translate3d(0, -4px, 0) rotateY(-0.9deg) rotateX(0.42deg) skewX(-0.14deg);
    }
    .usp-band.reverse .usp-copy { order: 2; }
    .usp-band.reverse .usp-media-wrap { order: 1; }
    .usp-copy {
      padding: clamp(34px, 4vw, 54px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      background:
        radial-gradient(circle at top right, rgba(158,201,74,0.14), transparent 48%),
        linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.4));
      backdrop-filter: blur(18px) saturate(126%);
      -webkit-backdrop-filter: blur(18px) saturate(126%);
      transition: background 0.5s var(--ease);
    }
    .usp-band:hover .usp-copy {
      background:
        radial-gradient(circle at top right, rgba(158,201,74,0.12), transparent 48%),
        linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.92));
    }
    .usp-kicker {
      display: inline-flex;
      align-self: flex-start;
      margin-bottom: 18px;
      padding: 7px 13px;
      border-radius: 999px;
      background: rgba(107,142,58,0.12);
      color: var(--green-deep);
      font-size: var(--fs-xs);
      font-weight: 800;
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
    }
    .usp-copy h3 {
      margin: 0;
      font-size: var(--fs-2xl);
      line-height: var(--lh-heading);
      letter-spacing: var(--ls-tight);
      color: var(--text-dark);
      text-wrap: balance;
    }
    .usp-heading-single-line {
      white-space: nowrap;
      font-size: clamp(2.15rem, 3.35vw, 3.45rem);
    }
    .usp-copy p {
      margin: 18px 0 0;
      font-size: var(--fs-base);
      line-height: var(--lh-relaxed);
      color: var(--text-muted-dark);
      max-width: 40ch;
    }
    .usp-media-wrap {
      position: relative;
      min-height: 420px;
      background: #dce3d6;
      overflow: hidden;
    }
    .usp-media-wrap::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(270deg, rgba(6,9,7,0.72) 0%, rgba(8,11,9,0.46) 34%, rgba(107,142,58,0.26) 68%, rgba(107,142,58,0.08) 100%);
      transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
      z-index: 1;
    }
    .usp-media {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.8s var(--ease);
      transform-origin: center center;
    }
    .usp-band:hover .usp-media { transform: none; }
    .usp-band:hover .usp-media-wrap::after {
      opacity: 1;
      transform: scale(1.02);
    }
    .section-light#benefits {
      background:
        radial-gradient(circle at 50% 6%, rgba(255,255,255,0.48), transparent 28%),
        radial-gradient(circle at 48% 30%, rgba(158,201,74,0.22), transparent 34%),
        radial-gradient(circle at 12% 66%, rgba(47,76,52,0.06), transparent 30%),
        radial-gradient(circle at 86% 82%, rgba(107,142,58,0.18), transparent 34%),
        linear-gradient(180deg, #f6f3ea 0%, #eeeadd 58%, #e5dece 100%);
      position: relative;
      overflow: hidden;
    }
    .section-light#benefits::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, transparent 0%, transparent 72%, rgba(46,59,34,0.06) 100%),
        radial-gradient(circle at 30% 42%, rgba(255,255,255,0.24) 0 1px, transparent 1.4px);
      background-size: 100% 100%, 34px 34px;
      pointer-events: none;
      opacity: 0.42;
    }
    .section-light#benefits > .wrap {
      position: relative;
      z-index: 1;
    }
    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 24px;
      align-items: stretch;
    }
    .benefit-card {
      position: relative;
      isolation: isolate;
      background:
        radial-gradient(circle at top right, rgba(158,201,74,0.024), transparent 54%),
        linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.68));
      border-radius: var(--radius);
      padding: 24px;
      min-height: 224px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      border: 1px solid rgba(255,255,255,0.72);
      backdrop-filter: blur(24px) saturate(132%);
      -webkit-backdrop-filter: blur(24px) saturate(132%);
      box-shadow: 0 18px 48px rgba(26,31,23,0.08), inset 0 1px 0 rgba(255,255,255,0.48);
      --card-glow-angle: 0deg;
      transform-style: preserve-3d;
      will-change: transform;
      transition: transform 0.46s var(--ease), box-shadow 0.46s var(--ease), border-color 0.46s var(--ease), background 0.46s var(--ease);
      grid-column: span 2;
    }
    .benefit-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.5) 62%, rgba(107,142,58,0.035) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
    }
    .benefit-card > * { position: relative; z-index: 1; }
    .benefit-card:hover {
      box-shadow:
        0 24px 60px rgba(26,31,23,0.13),
        0 0 34px rgba(158,201,74,0.18),
        inset 0 1px 0 rgba(255,255,255,0.75);
      border-color: rgba(255,255,255,0.95);
      background:
        radial-gradient(circle at top right, rgba(158,201,74,0.026), transparent 54%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.94));
    }
    .benefit-card:hover::before {
      background: conic-gradient(from var(--card-glow-angle), rgba(158,201,74,0.94), rgba(243,240,231,0.58), rgba(107,142,58,0.34), rgba(158,201,74,0.78), rgba(243,240,231,0.42), rgba(158,201,74,0.94));
      filter: drop-shadow(0 0 9px rgba(158,201,74,0.38)) drop-shadow(0 0 18px rgba(158,201,74,0.18));
      animation: card-border-spin 5.2s linear infinite;
    }
    .benefit-card:nth-child(1):hover { transform: perspective(1200px) translate3d(-4px, -8px, 0) scale(1.018) rotateY(-6deg) rotateX(1.35deg) skewX(0.7deg); }
    .benefit-card:nth-child(2):hover { transform: perspective(1200px) translate3d(1px, -8px, 0) scale(1.016) rotateY(3.2deg) rotateX(1.1deg) skewY(-0.42deg); }
    .benefit-card:nth-child(3):hover { transform: perspective(1200px) translate3d(4px, -8px, 0) scale(1.018) rotateY(5.4deg) rotateX(1.2deg) skewX(-0.58deg); }
    .benefit-card:nth-child(4):hover { transform: perspective(1200px) translate3d(-3px, -8px, 0) scale(1.016) rotateY(-3.8deg) rotateX(1.05deg) skewY(0.36deg); }
    .benefit-card:nth-child(5):hover { transform: perspective(1200px) translate3d(4px, -8px, 0) scale(1.014) rotateY(4.5deg) rotateX(1deg) skewX(-0.44deg); }
    .benefit-card:nth-last-child(2),
    .benefit-card:last-child { grid-column: span 3; }
    .benefit-card .icon-chip { margin-bottom: 20px; }
    .benefit-card h3 { margin: 0 0 12px; font-size: var(--fs-lg); letter-spacing: var(--ls-snug); }
    .benefit-card p { margin: 0; color: var(--text-muted-dark); line-height: var(--lh-normal); font-size: var(--fs-base); }

    /* ── Consolidated conversion ─────────────────────────────── */
    .conversion-panel {
      max-width: 1120px;
      margin: 0 auto;
      display: grid;
      gap: clamp(24px,3vw,34px);
      min-width: 0;
    }
    .section-url-demo {
      background:
        radial-gradient(circle at 28% 34%, rgba(158,201,74,0.09), transparent 31%),
        radial-gradient(circle at 78% 70%, rgba(255,255,255,0.035), transparent 28%),
        linear-gradient(135deg, #070b08 0%, #101610 50%, #060907 100%);
      position: relative;
      overflow: hidden;
      isolation: isolate;
      border-top: 1px solid rgba(158,201,74,0.08);
    }
    .section-url-demo::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 78% 24%, rgba(158,201,74,0.03) 0 1px, transparent 1.2px),
        linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0.1));
      background-size: 32px 32px, 100% 100%;
      opacity: 0.5;
      pointer-events: none;
    }
    .section-url-demo > .wrap {
      position: relative;
      z-index: 1;
    }
    .conversion-head {
      text-align: center;
      max-width: 760px;
      margin: 0 auto;
      min-width: 0;
    }
    .conversion-head h2 {
      margin: 0;
      font-size: var(--fs-3xl);
      line-height: var(--lh-heading);
      letter-spacing: var(--ls-tight);
      color: var(--text-light);
      text-wrap: balance;
    }
    .title-line {
      display: block;
    }
    .title-line.nowrap {
      white-space: nowrap;
    }
    #url-demo-title .title-line.nowrap {
      font-size: var(--fs-3xl);
    }
    .conversion-head h2 .accent-text { color: var(--green); }
    .conversion-copy {
      max-width: 700px;
      margin: 18px auto 0;
      color: rgba(243,240,231,0.68);
      line-height: var(--lh-relaxed);
      font-size: var(--fs-base);
    }
    .conversion-actions {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 30px;
    }
    .conversion-trust {
      margin: 14px 0 0;
      color: rgba(243,240,231,0.62);
      font-size: var(--fs-sm);
      font-weight: 700;
      text-align: center;
    }
    .conversion-choices {
      display: grid;
      grid-template-columns: minmax(0, 1.16fr) auto minmax(0, 0.84fr);
      align-items: stretch;
      gap: 20px;
    }
    .conversion-option {
      padding: clamp(28px,4vw,44px);
      border-radius: var(--radius-lg);
      background: rgba(243,240,231,0.055);
      border: 1px solid rgba(243,240,231,0.08);
      box-shadow: 0 28px 80px rgba(0,0,0,0.22);
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 330px;
    }
    .conversion-option.primary {
      background:
        radial-gradient(circle at 88% 10%, rgba(158,201,74,0.16), transparent 32%),
        rgba(243,240,231,0.06);
      border-color: rgba(158,201,74,0.2);
    }
    .conversion-option .option-label {
      display: inline-flex;
      align-self: flex-start;
      margin: 0 0 16px;
      padding: 7px 13px;
      border-radius: 999px;
      background: rgba(158,201,74,0.13);
      color: var(--green);
      font-size: var(--fs-xs);
      font-weight: 800;
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
    }
    .conversion-option h3 {
      margin: 0;
      color: var(--text-light);
      font-size: var(--fs-2xl);
      line-height: var(--lh-heading);
      letter-spacing: var(--ls-tight);
      text-wrap: balance;
    }
    .conversion-option p {
      margin: 18px 0 0;
      color: rgba(243,240,231,0.72);
      line-height: 1.7;
      max-width: 62ch;
    }
    .conversion-option .url-intake { margin-top: 22px; }
    .conversion-separator {
      display: grid;
      place-items: center;
      color: rgba(243,240,231,0.62);
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      min-width: 72px;
    }
    .conversion-separator span {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border-radius: 999px;
      border: 1px solid rgba(243,240,231,0.12);
      background: rgba(243,240,231,0.045);
    }

    /* ── Quiz ─────────────────────────────────────────────────── */
    .section-focal#quiz {
      background:
        radial-gradient(circle at 50% 22%, rgba(158,201,74,0.22), transparent 34%),
        radial-gradient(circle at 84% 18%, rgba(88,58,85,0.08), transparent 30%),
        radial-gradient(circle at 14% 78%, rgba(255,255,255,0.55), transparent 32%),
        linear-gradient(180deg, #edf3df 0%, #e2ecd2 48%, #d7e5c6 100%);
      color: var(--text-dark);
      position: relative;
      overflow: hidden;
      isolation: isolate;
      padding-bottom: 250px;
    }
    .section-focal#quiz::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 24%, rgba(46,59,34,0.05) 0 1px, transparent 1.2px),
        radial-gradient(circle at 78% 72%, rgba(107,142,58,0.06) 0 1px, transparent 1.2px);
      background-size: 30px 30px, 42px 42px;
      opacity: 0.5;
      pointer-events: none;
    }
    .section-focal#quiz > .wrap {
      position: relative;
      z-index: 1;
    }
    .quiz-outer { max-width: 900px; margin: 0 auto; }
    .section-focal#quiz .section-head h2 { color: var(--text-dark); }
    .section-focal#quiz .lead { color: rgba(26,31,23,0.62); }
    .section-focal#quiz .progress-track { background: rgba(46,59,34,0.16); }
    .section-focal#quiz .progress-label { color: rgba(26,31,23,0.62); }

    /* progress bar */
    .quiz-progress {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 32px;
    }
    .progress-track {
      flex: 1;
      height: 4px;
      border-radius: 2px;
      background: rgba(26,31,23,0.1);
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      border-radius: 2px;
      background: var(--green);
      transition: width 0.4s var(--ease);
    }
    .progress-label {
      font-size: var(--fs-xs);
      font-weight: 800;
      color: var(--text-muted-dark);
      white-space: nowrap;
    }

    /* step card */
    .quiz-card {
      background:
        radial-gradient(circle at 92% 8%, rgba(158,201,74,0.24), transparent 30%),
        radial-gradient(circle at 14% 96%, rgba(243,240,231,0.08), transparent 28%),
        linear-gradient(145deg, rgba(34,50,28,0.98) 0%, rgba(24,37,22,0.98) 48%, rgba(14,23,17,0.99) 100%);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(158,201,74,0.26);
      box-shadow:
        0 28px 80px rgba(0,0,0,0.34),
        0 0 46px rgba(158,201,74,0.11);
      padding: clamp(28px,5vw,44px);
      color: var(--text-light);
      position: relative;
      overflow: hidden;
      --card-glow-angle: 0deg;
    }
    .quiz-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background:
        linear-gradient(135deg, rgba(158,201,74,0.56), rgba(158,201,74,0.08) 34%, rgba(255,255,255,0.04) 70%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
    .quiz-card:hover::before {
      background: conic-gradient(from var(--card-glow-angle), rgba(158,201,74,0.96), rgba(243,240,231,0.5), rgba(46,59,34,0.28), rgba(158,201,74,0.78), rgba(243,240,231,0.34), rgba(158,201,74,0.96));
      filter: drop-shadow(0 0 10px rgba(158,201,74,0.5)) drop-shadow(0 0 22px rgba(158,201,74,0.24));
      animation: card-border-spin 5.2s linear infinite;
    }
    .quiz-step { display: none; }
    .quiz-step.active { display: block; }
    .quiz-step h3 {
      margin: 0 0 8px;
      font-size: var(--fs-xl);
      letter-spacing: var(--ls-snug);
      color: var(--text-light);
    }
    .quiz-step h3 { margin-bottom: 24px; }
    .options { display: grid; gap: 10px; }
    .option {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px 18px;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(9,17,12,0.72), rgba(12,22,15,0.82));
      border: 1.5px solid rgba(158,201,74,0.14);
      cursor: pointer;
      transition: var(--transition);
      color: rgba(243,240,231,0.88);
    }
    .option:hover {
      border-color: rgba(158,201,74,0.34);
      background:
        linear-gradient(180deg, rgba(17,33,21,0.82), rgba(18,35,21,0.92));
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(0,0,0,0.18);
    }
    .option.selected {
      border-color: rgba(158,201,74,0.72);
      background:
        radial-gradient(circle at top right, rgba(158,201,74,0.18), transparent 45%),
        linear-gradient(180deg, rgba(25,46,25,0.94), rgba(16,31,19,0.96));
      box-shadow: 0 18px 38px rgba(0,0,0,0.22), 0 0 24px rgba(158,201,74,0.12);
    }
    .option input[type="radio"] { accent-color: var(--green); margin-top: 3px; flex-shrink: 0; }
    .option-text { flex: 1; }
    .option-text strong { display: block; font-weight: 700; font-size: var(--fs-base); }
    .option-text span { display: block; font-size: var(--fs-sm); color: rgba(243,240,231,0.58); margin-top: 2px; }

    .quiz-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 28px;
      gap: 12px;
    }
    .quiz-back {
      background: none;
      border: none;
      color: rgba(243,240,231,0.62);
      font-weight: 700;
      font-size: var(--fs-sm);
      cursor: pointer;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: color 0.2s;
    }
    .quiz-back:hover { color: var(--text-light); }
    .quiz-back svg { width: 16px; height: 16px; }

    /* ── Result Card ──────────────────────────────────────────── */
    .result-step { display: none; }
    .result-step.active {
      display: grid;
      grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
      gap: 24px;
      align-items: start;
    }
    .result-summary {
      position: sticky;
      top: 110px;
    }
    .result-offer { min-width: 0; }

    .tier-recommended {
      display: block;
    }
    .tier-card {
      border-radius: 28px;
      padding: clamp(18px,2.6vw,24px);
      background: var(--green-deep);
      color: var(--text-light);
      position: relative;
      overflow: visible;
      isolation: isolate;
      border: 1px solid rgba(158,201,74,0.32);
    }
    .tier-card::before {
      content: "";
      position: absolute;
      width: 320px; height: 320px;
      right: -120px; top: -120px;
      background: radial-gradient(circle, rgba(158,201,74,0.24), transparent 60%);
      z-index: -1;
    }
    .tier-card-best {
      border-color: rgba(158,201,74,0.68);
      box-shadow:
        0 0 0 1px rgba(158,201,74,0.18),
        0 24px 58px rgba(8,11,9,0.22),
        0 0 42px rgba(158,201,74,0.16);
      transform: translateY(-12px);
    }
    .best-choice-badge {
      position: absolute;
      top: -16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 4;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      padding: 8px 18px;
      border-radius: 999px;
      background: var(--green);
      color: #10170c;
      font-size: var(--fs-xs);
      font-weight: 900;
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow: 0 14px 34px rgba(158,201,74,0.26);
    }
    .tier-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(158,201,74,0.18);
      color: var(--green);
      font-size: var(--fs-xs);
      font-weight: 800;
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .tier-name {
      margin: 0 0 6px;
      font-size: var(--fs-2xl);
      letter-spacing: var(--ls-tight);
      line-height: var(--lh-snug);
      font-weight: 800;
    }
    .tier-tagline {
      margin: 0 0 14px;
      color: rgba(243,240,231,0.68);
      line-height: var(--lh-normal);
      font-size: var(--fs-sm);
    }
    .tier-price-block {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-bottom: 4px;
    }
    .tier-setup-price {
      font-size: var(--fs-2xl);
      font-weight: 800;
      letter-spacing: var(--ls-tight);
      line-height: 1;
    }
    .tier-setup-label { font-size: var(--fs-sm); color: rgba(243,240,231,0.6); }
    .tier-regular-price {
      margin: 8px 0 18px;
      color: rgba(243,240,231,0.72);
      font-size: var(--fs-base);
      font-weight: 760;
      line-height: var(--lh-normal);
      text-decoration: none;
    }
    .tier-cta-btn {
      width: 100%;
      justify-content: center;
      min-height: 46px;
      margin-top: 4px;
      text-align: center;
    }
    .tier-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      min-height: 32px;
      margin-bottom: 8px;
      padding-right: 132px;
    }
    .tier-card .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 7px 14px;
      border-radius: 999px;
      background: rgba(158,201,74,0.24);
      border: 1px solid rgba(158,201,74,0.38);
      color: rgba(243,240,231,0.98);
      font-size: 0.76rem;
      font-weight: 900;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      line-height: 1;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .tier-discount {
      position: absolute;
      top: 22px;
      right: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(158,201,74,0.18);
      border: 1px solid rgba(158,201,74,0.32);
      color: rgba(243,240,231,0.88);
      font-size: var(--fs-xs);
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
    }
    .tier-price {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 6px;
      margin: 18px 0 2px;
      color: rgba(243,240,231,0.68);
    }
    .tier-price .tier-name {
      margin: 0;
      color: var(--text-light);
      font-size: clamp(2.1rem, 4vw, 3rem);
      line-height: 0.95;
    }
    .tier-features {
      list-style: none;
      margin: 0 0 16px;
      padding: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      border: 1px solid rgba(243,240,231,0.18);
      border-radius: 14px;
      overflow: visible;
      background: rgba(8,11,9,0.16);
    }
    .tier-features li {
      position: relative;
      display: grid;
      grid-template-columns: 14px minmax(0, 1fr) auto;
      align-items: flex-start;
      gap: 7px;
      min-height: 48px;
      padding: 7px 9px;
      font-size: var(--fs-sm);
      color: rgba(243,240,231,0.82);
      line-height: 1.38;
      border-bottom: 1px solid rgba(243,240,231,0.14);
    }
    .tier-features li:hover,
    .tier-features li:focus-within,
    .tier-features li:has(.feat-info:hover),
    .tier-features li:has(.feat-info:focus-within) {
      z-index: 500;
    }
    .tier-features li:last-child { border-bottom: 0; }
    .tier-features li svg { width: 14px; height: 14px; color: var(--green); flex-shrink: 0; margin-top: 1px; }
    .tier-features li > span:not(.feat-info) { min-width: 0; }
    .commit-toggle {
      display: flex;
      gap: 0;
      border-radius: 999px;
      background: rgba(243,240,231,0.07);
      padding: 3px;
      margin-bottom: 12px;
    }
    .commit-btn {
      flex: 1;
      padding: 8px 14px;
      border-radius: 999px;
      border: none;
      background: none;
      color: rgba(243,240,231,0.55);
      font-weight: 700;
      font-size: var(--fs-sm);
      cursor: pointer;
      transition: var(--transition);
    }
    .commit-btn.active {
      background: var(--green);
      color: #14200e;
    }

    .pricing-toggle-note {
      max-width: 720px;
      margin: 14px auto 0;
      display: grid;
      gap: 5px;
      text-align: center;
      color: rgba(243,240,231,0.66);
      font-size: var(--fs-sm);
      line-height: var(--lh-normal);
    }
    .pricing-toggle-note p { margin: 0; }
    .pricing-toggle-note strong { color: rgba(243,240,231,0.9); }

    .other-packages-hint {
      margin-top: 10px;
      margin-bottom: 14px;
      text-align: center;
      font-size: var(--fs-sm);
      color: rgba(243,240,231,0.55);
    }
    .other-packages-hint a { color: rgba(158,201,74,0.85); font-weight: 700; text-decoration: underline; cursor: pointer; }
    .result-booster {
      margin-top: 14px;
      justify-content: center;
      gap: 12px;
      font-size: var(--fs-sm);
      color: rgba(243,240,231,0.68);
    }

    .feat-info {
      position: relative;
      display: inline-flex;
      align-items: center;
      margin-left: 6px;
      flex-shrink: 0;
      justify-self: end;
      z-index: 40;
    }
    .feat-info-btn {
      width: 16px; height: 16px;
      border-radius: 50%;
      background: rgba(158,201,74,0.18);
      border: 1px solid rgba(158,201,74,0.35);
      color: var(--green);
      font-size: var(--fs-xs);
      font-weight: 800;
      cursor: pointer;
      display: grid; place-items: center;
      line-height: 1;
      padding: 0;
      transition: background 0.2s;
      flex-shrink: 0;
    }
    .feat-info-btn:hover { background: rgba(158,201,74,0.32); }
    .feat-tooltip {
      display: none;
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      width: min(320px, 72vw);
      background: #1c2616;
      border: 1px solid rgba(158,201,74,0.2);
      border-radius: 12px;
      padding: 12px 14px;
      font-size: var(--fs-sm);
      font-weight: 700;
      line-height: var(--lh-normal);
      color: rgba(243,240,231,0.92);
      z-index: 9999;
      pointer-events: none;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }
    .feat-tooltip::after {
      content: "";
      position: absolute;
      top: 100%; left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: rgba(158,201,74,0.2);
    }
    .feat-info:hover .feat-tooltip,
    .feat-info-btn:focus + .feat-tooltip { display: block; }
    .feat-info:hover,
    .feat-info:focus-within { z-index: 10000; }

    .result-headline {
      margin: 0 0 16px;
      font-size: var(--fs-xl);
      letter-spacing: var(--ls-snug);
    }
    .result-text {
      margin: 0 0 18px;
      color: rgba(243,240,231,0.78);
      line-height: 1.7;
    }
    .result-cta-btn { display: block; width: 100%; text-align: center; }
    .tier-card .result-cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      line-height: 1.15;
      padding-top: 0;
      padding-bottom: 0;
    }
    .result-cta-note {
      margin-top: 20px;
      text-align: left;
      color: rgba(243,240,231,0.68);
      font-size: var(--fs-sm);
    }
    .result-cta-note a {
      color: var(--green) !important;
    }
    .retainer-recommendation {
      margin-top: 14px;
      padding: 16px;
      border-radius: 16px;
      border: 1px solid rgba(158,201,74,0.18);
      background: rgba(8,11,9,0.18);
      color: rgba(243,240,231,0.76);
      line-height: var(--lh-normal);
      font-size: var(--fs-sm);
    }
    .retainer-recommendation strong {
      display: block;
      color: var(--green);
      margin-bottom: 4px;
      font-size: var(--fs-base);
    }

    /* ── Pricing section ──────────────────────────────────────── */
    .pricing-section {
      position: relative;
      overflow: visible;
      background:
        radial-gradient(circle at 70% 16%, rgba(158,201,74,0.16), transparent 30%),
        radial-gradient(circle at 18% 72%, rgba(88,58,85,0.06), transparent 32%),
        radial-gradient(circle at 50% 40%, rgba(255,255,255,0.62), transparent 36%),
        linear-gradient(180deg, #f4f1e8 0%, #ece8dc 52%, #e2dfd1 100%);
      isolation: isolate;
    }
    .pricing-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 22% 30%, rgba(46,59,34,0.045) 0 1px, transparent 1.3px),
        radial-gradient(circle at 82% 66%, rgba(107,142,58,0.055) 0 1px, transparent 1.3px);
      background-size: 34px 34px, 46px 46px;
      opacity: 0.52;
      pointer-events: none;
    }
    .pricing-section > .wrap {
      position: relative;
      z-index: 1;
      overflow: visible;
    }
    .pricing-section .section-head h2,
    .pricing-section .retainer-intro {
      color: var(--text-dark);
    }
    .pricing-section .section-head .lead,
    .pricing-section .retainer-intro p {
      color: rgba(26,31,23,0.62);
    }
    section.pricing-section .section-head.center > p.lead {
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    .pricing-section .commit-toggle {
      background: rgba(26,31,23,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.52);
    }
    .pricing-section .commit-btn {
      color: rgba(26,31,23,0.56);
    }
    .pricing-section .commit-btn.active {
      color: #14200e;
    }
    .pricing-section .pricing-toggle-note,
    .pricing-section .pricing-note {
      color: rgba(26,31,23,0.58);
    }
    .pricing-section .pricing-toggle-note strong {
      color: rgba(26,31,23,0.82);
    }
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-top: 38px;
      position: relative;
      overflow: visible;
      z-index: 5;
    }
    .pricing-grid .tier-card {
      min-height: 100%;
    }
    .pricing-grid .tier-card:hover,
    .pricing-grid .tier-card:focus-within,
    .pricing-grid .tier-card:has(.feat-info:hover),
    .pricing-grid .tier-card:has(.feat-info:focus-within) {
      z-index: 60;
    }
    .retainer-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-top: 26px;
    }
    .retainer-intro {
      max-width: 780px;
      margin: 78px auto 0;
      text-align: center;
      color: var(--text-dark);
    }
    .retainer-intro h3 {
      margin: 0 0 16px;
      font-size: var(--fs-2xl);
      letter-spacing: var(--ls-tight);
      line-height: var(--lh-heading);
    }
    .retainer-intro p {
      margin: 0;
      color: rgba(26,31,23,0.62);
      line-height: var(--lh-relaxed);
      font-size: var(--fs-base);
    }
    .retainer-intro p + p { margin-top: 8px; }
    .retainer-required-note {
      margin: 20px auto 0;
      max-width: 860px;
      text-align: center;
      color: var(--green);
      font-weight: 800;
      line-height: 1.55;
    }
    .retainer-card {
      border-radius: var(--radius);
      padding: 24px;
      background:
        radial-gradient(circle at top right, rgba(158,201,74,0.08), transparent 48%),
        rgba(255,255,255,0.58);
      border: 1px solid rgba(255,255,255,0.58);
      color: var(--text-dark);
      backdrop-filter: blur(18px) saturate(126%);
      -webkit-backdrop-filter: blur(18px) saturate(126%);
      box-shadow:
        0 18px 48px rgba(46,59,34,0.08),
        inset 0 1px 0 rgba(255,255,255,0.7);
    }
    .retainer-card h3 {
      margin: 0 0 10px;
      font-size: var(--fs-lg);
      letter-spacing: var(--ls-snug);
    }
    .retainer-price {
      margin: 0 0 14px;
      color: var(--green);
      font-size: var(--fs-xl);
      font-weight: 800;
      letter-spacing: var(--ls-tight);
    }
    .retainer-card p {
      margin: 0;
      color: rgba(26,31,23,0.62);
      line-height: var(--lh-normal);
      font-size: var(--fs-sm);
    }
    .pricing-note {
      margin: 24px auto 0;
      max-width: 1120px;
      color: rgba(243,240,231,0.68);
      text-align: center;
      font-size: var(--fs-sm);
      line-height: var(--lh-normal);
    }
    .pricing-compare-section {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 18% 18%, rgba(158,201,74,0.1), transparent 30%),
        radial-gradient(circle at 84% 72%, rgba(243,240,231,0.045), transparent 28%),
        linear-gradient(180deg, #080d09 0%, #111910 52%, #070b08 100%);
      color: var(--text-light);
    }
    .pricing-compare-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 20% 30%, rgba(243,240,231,0.035) 0 1px, transparent 1.25px),
        radial-gradient(circle at 72% 64%, rgba(158,201,74,0.035) 0 1px, transparent 1.25px);
      background-size: 36px 36px, 52px 52px;
      opacity: 0.42;
      pointer-events: none;
    }
    .pricing-compare-section > .wrap {
      position: relative;
      z-index: 1;
    }
    .pricing-matrices {
      margin: 0;
      padding: 0;
      display: grid;
      gap: 24px;
      position: relative;
    }
    .pricing-matrices > * {
      position: relative;
      z-index: 1;
    }
    .pricing-matrices-head {
      max-width: 760px;
      margin: 0 auto -2px;
      text-align: center;
      color: var(--text-light);
    }
    .pricing-matrices-head h2 {
      margin: 0 0 8px;
      font-size: var(--fs-3xl);
      letter-spacing: var(--ls-tight);
      line-height: var(--lh-heading);
    }
    .pricing-matrices-head p {
      margin: 0;
      color: rgba(243,240,231,0.66);
      line-height: 1.6;
    }
    .pricing-matrix-card {
      border-radius: var(--radius);
      padding: clamp(22px,3vw,34px);
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(243,240,231,0.12);
      color: var(--text-light);
      backdrop-filter: blur(18px) saturate(126%);
      -webkit-backdrop-filter: blur(18px) saturate(126%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
      overflow: visible;
    }
    .pricing-accordion {
      overflow: visible;
    }
    .pricing-accordion summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin: 0;
      color: var(--text-light);
      font-size: var(--fs-lg);
      font-weight: 800;
      letter-spacing: var(--ls-snug);
    }
    .pricing-accordion summary::-webkit-details-marker { display: none; }
    .pricing-accordion summary::after {
      content: "▾";
      color: var(--green);
      font-size: 1rem;
      transition: transform 0.28s var(--ease);
      flex: 0 0 auto;
    }
    .pricing-accordion[open] summary::after { transform: rotate(180deg); }
    .pricing-accordion-body {
      margin-top: 18px;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
    }
    .pricing-matrix-card h3 {
      margin: 0 0 14px;
      font-size: var(--fs-lg);
      letter-spacing: var(--ls-snug);
    }
    .pricing-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 680px;
      font-size: var(--fs-sm);
    }
    .pricing-table th,
    .pricing-table td {
      position: relative;
      padding: 12px 10px;
      border-bottom: 1px solid rgba(243,240,231,0.11);
      text-align: center;
      color: rgba(243,240,231,0.76);
    }
    .pricing-table th:first-child,
    .pricing-table td:first-child {
      text-align: left;
      color: rgba(243,240,231,0.9);
      font-weight: 700;
      overflow: visible;
    }
    .pricing-table .feat-info {
      justify-self: auto;
      vertical-align: middle;
      z-index: 200;
    }
    .pricing-table .feat-tooltip {
      left: 0;
      transform: translateX(-12px);
      width: min(320px, 42vw);
    }
    .pricing-table .feat-tooltip::after {
      left: 20px;
      transform: none;
    }
    /* ── Warum wir Marquee ────────────────────────────────────── */
    .warum-track-outer {
      overflow: hidden;
      overflow-x: clip;
      max-width: 100%;
      contain: paint;
      padding: 34px 0 46px;
      margin: -34px 0 -46px;
      mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    }
    .warum-track {
      display: flex;
      width: max-content;
      align-items: center;
      gap: 20px;
      padding: 0 56px;
      min-height: 372px;
      animation: warum-scroll 36s linear infinite;
    }
    .warum-track:hover { animation-play-state: paused; }
    @keyframes warum-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .warum-card {
      flex: 0 0 318px;
      border-radius: var(--radius);
      background: rgba(255,255,255,0.56);
      padding: 28px 24px;
      border: 1px solid rgba(255,255,255,0.46);
      backdrop-filter: blur(22px) saturate(132%);
      -webkit-backdrop-filter: blur(22px) saturate(132%);
      box-shadow:
        0 16px 42px rgba(46,59,34,0.08),
        inset 0 1px 0 rgba(255,255,255,0.52);
      position: relative;
      isolation: isolate;
      --card-glow-angle: 0deg;
      transform-style: preserve-3d;
      translate: 0 0;
      will-change: transform, translate;
      animation: warum-card-drift 8.6s ease-in-out infinite alternate;
      transition: transform 0.46s var(--ease), box-shadow 0.46s var(--ease), background 0.46s var(--ease), border-color 0.46s var(--ease);
    }
    @keyframes warum-card-drift {
      from { translate: 0 -14px; }
      to { translate: 0 17px; }
    }
    .warum-card:nth-child(6n+1) { flex-basis: 312px; animation-duration: 8.8s; animation-delay: -1.2s; }
    .warum-card:nth-child(6n+2) { flex-basis: 336px; animation-duration: 9.6s; animation-delay: -3.4s; }
    .warum-card:nth-child(6n+3) { flex-basis: 324px; animation-duration: 10.2s; animation-delay: -2.1s; }
    .warum-card:nth-child(6n+4) { flex-basis: 344px; animation-duration: 9.1s; animation-delay: -4.6s; }
    .warum-card:nth-child(6n+5) { flex-basis: 304px; animation-duration: 10.8s; animation-delay: -1.8s; }
    .warum-card:nth-child(6n+6) { flex-basis: 330px; animation-duration: 9.9s; animation-delay: -5.2s; }
    .warum-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.22) 52%, rgba(107,142,58,0.12) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
    }
    .warum-card > * { position: relative; z-index: 1; }
    /* warum hover now defined below h3/p */
    .warum-card h3 { margin: 0 0 12px; font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--green-deep); }
    .warum-card p { margin: 0; color: var(--text-muted-dark); line-height: var(--lh-relaxed); font-size: var(--fs-base); }
    .warum-card:hover {
      box-shadow:
        0 26px 68px rgba(46,59,34,0.2),
        0 0 34px rgba(158,201,74,0.18),
        inset 0 1px 0 rgba(255,255,255,0.68);
      background: rgba(255,255,255,0.95);
      border-color: rgba(255,255,255,0.95);
    }
    .warum-card:hover::before {
      background: conic-gradient(from var(--card-glow-angle), rgba(158,201,74,0.94), rgba(243,240,231,0.58), rgba(107,142,58,0.34), rgba(158,201,74,0.78), rgba(243,240,231,0.42), rgba(158,201,74,0.94));
      filter: drop-shadow(0 0 9px rgba(158,201,74,0.38)) drop-shadow(0 0 18px rgba(158,201,74,0.18));
      animation: card-border-spin 5.2s linear infinite;
    }
    .warum-card:nth-child(4n+1):hover { transform: perspective(1200px) translate3d(-3px, -7px, 0) rotateY(-3.2deg) rotateX(0.9deg) skewX(0.35deg); }
    .warum-card:nth-child(4n+2):hover { transform: perspective(1200px) translate3d(1px, -7px, 0) rotateY(2.4deg) rotateX(0.8deg) skewY(-0.28deg); }
    .warum-card:nth-child(4n+3):hover { transform: perspective(1200px) translate3d(3px, -7px, 0) rotateY(3deg) rotateX(0.75deg) skewX(-0.24deg); }
    .warum-card:nth-child(4n+4):hover { transform: perspective(1200px) translate3d(-1px, -7px, 0) rotateY(-2.2deg) rotateX(0.7deg) skewY(0.24deg); }

    /* ── FAQ ──────────────────────────────────────────────────── */
    .faq-grid { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 820px; margin: 0 auto; }
    section[aria-labelledby="faq-title"].section-dark {
      background:
        radial-gradient(circle at 50% 18%, rgba(158,201,74,0.085), transparent 30%),
        radial-gradient(circle at 24% 76%, rgba(243,240,231,0.035), transparent 26%),
        radial-gradient(circle at 82% 72%, rgba(73,91,71,0.12), transparent 32%),
        linear-gradient(180deg, #060a07 0%, #0d120e 54%, #050807 100%);
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    section[aria-labelledby="faq-title"].section-dark::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(243,240,231,0.018), transparent 42%, rgba(0,0,0,0.14)),
        radial-gradient(circle at 70% 26%, rgba(243,240,231,0.03) 0 1px, transparent 1.2px);
      background-size: 100% 100%, 34px 34px;
      opacity: 0.42;
      pointer-events: none;
    }
    section[aria-labelledby="faq-title"].section-dark > .wrap {
      position: relative;
      z-index: 1;
    }
    details {
      position: relative;
      isolation: isolate;
      border-radius: 20px;
      background: rgba(243,240,231,0.048);
      border: 1px solid rgba(243,240,231,0.08);
      padding: 20px 22px;
      --card-glow-angle: 0deg;
      transition: var(--transition);
    }
    details::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: transparent;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
    }
    details > * { position: relative; z-index: 1; }
    details[open] {
      background: rgba(243,240,231,0.07);
      border-color: rgba(158,201,74,0.22);
      box-shadow: 0 18px 36px rgba(0,0,0,0.12), 0 0 32px rgba(158,201,74,0.16);
    }
    details[open]::before {
      background: linear-gradient(135deg, rgba(158,201,74,0.36), rgba(243,240,231,0.18) 42%, rgba(158,201,74,0.18));
    }
    details:hover::before {
      background: conic-gradient(from var(--card-glow-angle), rgba(158,201,74,0.96), rgba(243,240,231,0.5), rgba(46,59,34,0.28), rgba(158,201,74,0.78), rgba(243,240,231,0.34), rgba(158,201,74,0.96));
      filter: drop-shadow(0 0 9px rgba(158,201,74,0.44)) drop-shadow(0 0 18px rgba(158,201,74,0.22));
      animation: card-border-spin 5.2s linear infinite;
    }
    summary {
      cursor: pointer;
      font-weight: 800;
      letter-spacing: var(--ls-snug);
      font-size: var(--fs-base);
      line-height: 1.35;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    summary::-webkit-details-marker { display: none; }
    summary::before {
      content: "+";
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      background: rgba(158,201,74,0.14);
      color: var(--green);
      font-size: 1rem;
      font-weight: 900;
      flex: 0 0 28px;
      border: 1px solid rgba(158,201,74,0.2);
    }
    details[open] summary::before {
      content: "−";
      background: var(--green);
      color: #13200e;
      border-color: transparent;
    }
    details p { margin: 12px 0 0; color: var(--text-muted-light); line-height: 1.65; }

    /* ── CTA / TL;DR ──────────────────────────────────────────── */
    .cta { background: var(--green-deep); }
    .cta-panel {
      position: relative;
      overflow: hidden;
      border-radius: 44px;
      padding: clamp(40px,7vw,82px);
      background: linear-gradient(135deg, #3a4e28, #2e3b22);
      isolation: isolate;
      border: 1px solid rgba(158,201,74,0.12);
      text-align: center;
      margin-top: -250px;
    }
    .cta-panel::before { display: none; }
    .tldr-list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 30px;
      margin: 30px 0 0;
      padding: 0;
      list-style: none;
    }
    .tldr-list li {
      position: relative;
      isolation: isolate;
      border-radius: 18px;
      padding: 20px;
      background: rgba(243,240,231,0.07);
      color: rgba(243,240,231,0.8);
      font-weight: 400;
      line-height: var(--lh-normal);
      font-size: var(--fs-base);
      border: 1px solid rgba(243,240,231,0.08);
      --card-glow-angle: 0deg;
      transform-style: preserve-3d;
      transition: transform 0.46s var(--ease), box-shadow 0.46s var(--ease), background 0.46s var(--ease), border-color 0.46s var(--ease);
    }
    .tldr-list li::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: transparent;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
    }
    .tldr-list li > * { position: relative; z-index: 1; }
    .tldr-list li:hover {
      background: rgba(243,240,231,0.11);
      border-color: rgba(158,201,74,0.26);
      box-shadow: 0 18px 42px rgba(0,0,0,0.18), 0 0 32px rgba(158,201,74,0.16);
    }
    .tldr-list li:hover::before {
      background: conic-gradient(from var(--card-glow-angle), rgba(158,201,74,0.96), rgba(243,240,231,0.5), rgba(46,59,34,0.28), rgba(158,201,74,0.78), rgba(243,240,231,0.34), rgba(158,201,74,0.96));
      filter: drop-shadow(0 0 9px rgba(158,201,74,0.44)) drop-shadow(0 0 18px rgba(158,201,74,0.22));
      animation: card-border-spin 5.2s linear infinite;
    }
    .tldr-list li:nth-child(1):hover { transform: perspective(1100px) rotateY(-2.2deg) rotateX(0.7deg) skewX(0.28deg); }
    .tldr-list li:nth-child(2):hover { transform: perspective(1100px) rotateY(1.8deg) rotateX(0.58deg) skewY(-0.22deg); }
    .tldr-list li:nth-child(3):hover { transform: perspective(1100px) rotateY(-1.55deg) rotateX(0.62deg) skewX(-0.18deg); }
    .tldr-list li:nth-child(4):hover { transform: perspective(1100px) rotateY(1.65deg) rotateX(0.54deg) skewY(0.2deg); }
    .tldr-list li:nth-child(5):hover { transform: perspective(1100px) rotateY(-1.35deg) rotateX(0.52deg) skewX(0.16deg); }
    .cta .btn { margin-top: 40px; }
    .cta-panel h2 { margin: 0; text-align: center; }
    .cta-main-btn {
      display: flex;
      width: 100%;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
      justify-content: center;
    }
    .cta-booster {
      justify-content: center;
      margin-top: 16px;
      display: flex;
      width: 100%;
    }
    .cta-booster span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .cta-booster svg { flex-shrink: 0; }

    /* ── Persona Support ─────────────────────────────────────── */
    .persona-support {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      padding: 0;
      background:
        radial-gradient(circle at 78% 30%, rgba(158,201,74,0.10), transparent 30%),
        radial-gradient(circle at 16% 76%, rgba(243,240,231,0.04), transparent 30%),
        linear-gradient(140deg, #0e1310 0%, #12180f 48%, #0c100d 100%);
      border-top: 1px solid rgba(243,240,231,0.06);
    }
    .persona-support::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.28;
      background-image:
        linear-gradient(rgba(243,240,231,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(243,240,231,0.03) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
      pointer-events: none;
      z-index: -1;
    }
    .persona-support-inner {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
      padding: clamp(48px, 6vw, 92px) 32px 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) max-content;
      gap: clamp(28px, 3.2vw, 60px);
      align-items: stretch;
      min-height: clamp(420px, 42vw, 580px);
    }
    .persona-support-copy {
      align-self: center;
      max-width: 560px;
      padding-bottom: 0;
    }
    .persona-support-copy h2 {
      margin: 0;
      color: var(--text-light);
      font-size: clamp(2.3rem, 3.7vw, 4.1rem);
      line-height: 1.02;
      letter-spacing: var(--ls-tight);
    }
    .persona-support-copy p:not(.eyebrow) {
      max-width: 620px;
      margin: 26px 0 0;
      color: rgba(243,240,231,0.72);
      font-size: var(--fs-md);
      line-height: var(--lh-relaxed);
    }
    .persona-support-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }
    .persona-support-actions .btn {
      min-height: 56px;
      justify-content: center;
    }
    .persona-support-visual {
      position: relative;
      align-self: stretch;
      min-height: clamp(340px, 32vw, 440px);
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
    }
    .persona-portrait {
      position: relative;
      z-index: 1;
      margin: 0;
      height: auto;
      width: auto;
      max-width: 100%;
      display: block;
      filter: drop-shadow(28px 42px 64px rgba(0,0,0,0.36)) drop-shadow(0 0 34px rgba(158,201,74,0.16));
    }
    .persona-portrait::before {
      content: "";
      position: absolute;
      inset: auto 8% 0 8%;
      height: 34%;
      border-radius: 999px;
      background: radial-gradient(ellipse at center, rgba(158,201,74,0.22), transparent 68%);
      filter: blur(18px);
      z-index: -1;
    }
    .persona-portrait img {
      display: block;
      height: clamp(460px, 44vw, 620px);
      width: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: bottom center;
      margin-right: 160px;
    }
    .persona-portrait figcaption {
      position: absolute;
      right: 0;
      bottom: 0;
      display: grid;
      gap: 4px;
      margin: 0;
      padding: 0 4px clamp(24px, 3vw, 44px) 0;
      border-radius: 0;
      background: none;
      border: 0;
      color: var(--text-light);
      backdrop-filter: none;
      box-shadow: none;
      text-align: left;
      justify-items: start;
    }
    .persona-portrait figcaption strong {
      font-size: clamp(1.22rem, 1.65vw, 1.72rem);
      font-weight: 900;
      line-height: 1;
      letter-spacing: var(--ls-tight);
    }
    .persona-portrait figcaption span {
      color: rgba(243,240,231,0.62);
      font-size: var(--fs-sm);
      font-weight: 700;
      line-height: 1.35;
    }

    /* ── Footer ───────────────────────────────────────────────── */
    footer {
      background: var(--bg-darker);
      border-top: 1px solid rgba(243,240,231,0.07);
      padding: 60px 0 38px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(150px, 0.42fr) minmax(360px, 1.36fr);
      gap: 42px;
      align-items: start;
      padding-bottom: 34px;
      border-bottom: 1px solid rgba(243,240,231,0.08);
    }
    .footer-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; }
    .footer-tagline {
      max-width: 30ch;
      margin: 18px 0 0;
      color: rgba(243,240,231,0.68);
      line-height: var(--lh-relaxed);
      font-size: var(--fs-sm);
    }
    .footer-nav-title,
    .footer-cta-title {
      margin: 0 0 16px;
      color: var(--text-light);
      font-size: var(--fs-xs);
      font-weight: 800;
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
    }
    .footer-nav-links {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .footer-nav-links a {
      color: rgba(243,240,231,0.72);
      font-weight: 700;
      transition: color 0.2s ease;
    }
    .footer-nav-links a:hover { color: var(--green); }
    .url-intake-copy {
      margin: 0 0 16px;
      color: rgba(243,240,231,0.66);
      line-height: var(--lh-normal);
      font-size: var(--fs-sm);
    }
    .url-intake {
      display: grid;
      gap: 14px;
    }
    .url-intake-trigger {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
    }
    .field,
    .textarea,
    .checkline {
      width: 100%;
    }
    .field,
    .textarea {
      border-radius: 16px;
      border: 1px solid rgba(243,240,231,0.12);
      background: rgba(243,240,231,0.05);
      color: var(--text-light);
      padding: 14px 16px;
      outline: none;
      transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
    }
    .field:focus,
    .textarea:focus {
      outline: 2px solid var(--green);
      outline-offset: 2px;
      border-color: var(--green);
      background: rgba(243,240,231,0.075);
      box-shadow:
        0 0 0 4px rgba(107,142,58,0.15),
        0 0 18px rgba(107,142,58,0.2),
        0 0 42px rgba(107,142,58,0.12);
    }
    .field::placeholder,
    .textarea::placeholder { color: rgba(243,240,231,0.4); }
    .textarea,
    textarea.field {
      min-height: 110px;
      resize: vertical;
    }
    .checkline {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: rgba(243,240,231,0.68);
      font-size: var(--fs-sm);
      line-height: var(--lh-normal);
    }
    .checkline input { margin-top: 2px; accent-color: var(--green); }
    .url-intake-status {
      min-height: 1.2em;
      color: rgba(158,201,74,0.82);
      font-size: var(--fs-sm);
      font-weight: 700;
    }
    .url-intake-status a {
      color: var(--green);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .hp-field {
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .intake-modal {
      width: min(92vw, 680px);
      border: 1px solid rgba(158,201,74,0.22);
      border-radius: var(--radius-lg);
      padding: 0;
      color: var(--text-light);
      background:
        radial-gradient(circle at 92% 8%, rgba(158,201,74,0.18), transparent 32%),
        linear-gradient(145deg, rgba(26,38,29,0.96), rgba(11,18,14,0.98));
      box-shadow:
        0 36px 120px rgba(0,0,0,0.58),
        0 0 52px rgba(158,201,74,0.16);
      overflow: hidden;
    }
    .intake-modal::backdrop {
      background: rgba(3,7,5,0.72);
      backdrop-filter: blur(8px);
    }
    .pricing-quiz {
      margin-top: 48px;
      border-radius: var(--radius-lg);
    }
    .pricing-quiz .reveal {
      opacity: 1;
      transform: none;
    }
    .intake-modal-form {
      display: grid;
      gap: 16px;
      padding: clamp(26px,4vw,42px);
    }
    .intake-modal-head {
      display: grid;
      gap: 10px;
      padding-right: 42px;
    }
    .intake-modal-head h2 {
      margin: 0;
      color: var(--text-light);
      font-size: var(--fs-2xl);
      line-height: var(--lh-heading);
      letter-spacing: var(--ls-tight);
    }
    .intake-modal-head p:not(.eyebrow) {
      margin: 0;
      color: rgba(243,240,231,0.68);
      line-height: 1.6;
    }
    .modal-close {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid rgba(243,240,231,0.12);
      background: rgba(243,240,231,0.06);
      color: var(--text-light);
      cursor: pointer;
      font-size: 1.35rem;
      line-height: 1;
      transition: var(--transition);
    }
    .modal-close:hover {
      background: rgba(243,240,231,0.12);
      border-color: rgba(158,201,74,0.42);
      box-shadow: 0 0 24px rgba(158,201,74,0.18);
    }
    .modal-fields {
      display: grid;
      gap: 12px;
    }
    .modal-website-field[hidden] {
      display: none;
    }
    .modal-footnote {
      margin: 2px 0 0;
      color: rgba(243,240,231,0.48);
      font-size: var(--fs-xs);
      line-height: var(--lh-normal);
    }
    .modal-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 4px;
    }
    .intake-modal-form.is-submitted .modal-fields,
    .intake-modal-form.is-submitted .modal-actions {
      display: none;
    }
    .url-demo-panel {
      max-width: 920px;
      margin: 0 auto;
      padding: clamp(28px,4vw,44px);
      border-radius: var(--radius-lg);
      background: rgba(243,240,231,0.055);
      border: 1px solid rgba(243,240,231,0.08);
      box-shadow: 0 28px 80px rgba(0,0,0,0.22);
    }
    .url-demo-panel .url-intake-copy {
      max-width: 68ch;
      color: rgba(243,240,231,0.72);
    }
    .url-demo-booster {
      margin-top: 16px;
      color: rgba(243,240,231,0.7);
    }
    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      color: var(--text-muted-light);
      font-size: var(--fs-sm);
      margin-top: 22px;
      padding-top: 6px;
    }
    .bottom-note {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--text-muted-light);
      font-size: var(--fs-sm);
      font-weight: 700;
      line-height: 1.4;
    }
    .heart-icon {
      width: 14px;
      height: 14px;
      color: var(--green);
      flex: 0 0 14px;
    }
    .heart-emoji {
      color: var(--green);
      font-size: 0.95em;
      line-height: 1;
    }
    .legal { display: flex; gap: 16px; }

    /* ── Reveal ───────────────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
    }
    .process-panel.reveal,
    .usp-band.reveal,
    .benefit-card.reveal {
      transition:
        opacity 0.85s var(--ease),
        transform 0.5s var(--ease),
        box-shadow 0.5s var(--ease),
        border-color 0.5s var(--ease),
        background 0.5s var(--ease);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .benefit-card.reveal.visible:hover {
      box-shadow:
        0 24px 60px rgba(26,31,23,0.13),
        0 0 34px rgba(158,201,74,0.18),
        inset 0 1px 0 rgba(255,255,255,0.75);
      border-color: rgba(255,255,255,0.95);
      background:
        radial-gradient(circle at top right, rgba(158,201,74,0.026), transparent 54%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.94));
    }
    section#benefits .benefit-grid > .benefit-card.reveal.visible:nth-of-type(1):hover { transform: perspective(1200px) translate3d(-4px, -8px, 0) scale(1.018) rotateY(-6deg) rotateX(1.35deg) skewX(0.7deg); }
    section#benefits .benefit-grid > .benefit-card.reveal.visible:nth-of-type(2):hover { transform: perspective(1200px) translate3d(1px, -8px, 0) scale(1.016) rotateY(3.2deg) rotateX(1.1deg) skewY(-0.42deg); }
    section#benefits .benefit-grid > .benefit-card.reveal.visible:nth-of-type(3):hover { transform: perspective(1200px) translate3d(4px, -8px, 0) scale(1.018) rotateY(5.4deg) rotateX(1.2deg) skewX(-0.58deg); }
    section#benefits .benefit-grid > .benefit-card.reveal.visible:nth-of-type(4):hover { transform: perspective(1200px) translate3d(-3px, -8px, 0) scale(1.016) rotateY(-3.8deg) rotateX(1.05deg) skewY(0.36deg); }
    section#benefits .benefit-grid > .benefit-card.reveal.visible:nth-of-type(5):hover { transform: perspective(1200px) translate3d(4px, -8px, 0) scale(1.014) rotateY(4.5deg) rotateX(1deg) skewX(-0.44deg); }

    /* ── Subpage Template ────────────────────────────────────── */
    .subpage-body {
      background:
        radial-gradient(circle at 74% 14%, rgba(158,201,74,0.1), transparent 28%),
        radial-gradient(circle at 18% 72%, rgba(243,240,231,0.05), transparent 24%),
        linear-gradient(180deg, #090d0a 0%, #10150f 48%, #080b09 100%);
      color: var(--text-light);
    }
    .subpage-main {
      min-height: 100vh;
    }
    .subpage-header {
      position: relative;
      padding: clamp(142px, 16vw, 190px) 0 clamp(54px, 8vw, 86px);
      overflow: hidden;
      isolation: isolate;
      border-bottom: 1px solid rgba(243,240,231,0.08);
      background:
        radial-gradient(circle at 70% 30%, rgba(158,201,74,0.08), transparent 32%),
        radial-gradient(circle at 18% 85%, rgba(70,48,66,0.3), transparent 34%),
        linear-gradient(135deg, rgba(21,26,22,0.92), rgba(12,16,13,0.98));
    }
    .subpage-header::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0.28;
      background-image: radial-gradient(rgba(243,240,231,0.32) 0.7px, transparent 0.7px);
      background-size: 22px 22px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), transparent 88%);
    }
    .subpage-header .wrap {
      max-width: 1040px;
    }
    .subpage-header h1 {
      margin: 0;
      max-width: 940px;
      color: var(--text-light);
      font-size: clamp(2.45rem, 6vw, 5.2rem);
      line-height: 0.98;
      letter-spacing: var(--ls-tight);
    }
    .subpage-lead {
      max-width: 700px;
      margin: 24px 0 0;
      color: var(--text-muted-light);
      font-size: var(--fs-md);
      line-height: var(--lh-relaxed);
    }
    .subpage-content-section {
      padding: clamp(54px, 8vw, 92px) 0 clamp(74px, 10vw, 120px);
      background:
        radial-gradient(circle at 50% 14%, rgba(158,201,74,0.08), transparent 28%),
        linear-gradient(180deg, #f5f2ea 0%, #ece9df 100%);
      color: var(--text-dark);
    }
    .subpage-content-section .wrap {
      max-width: 1030px;
    }
    .subpage-content-card {
      position: relative;
      overflow: hidden;
      border-radius: 34px;
      padding: clamp(30px, 5vw, 58px);
      background:
        radial-gradient(circle at 86% 10%, rgba(158,201,74,0.08), transparent 28%),
        rgba(255,255,255,0.62);
      border: 1px solid rgba(255,255,255,0.88);
      box-shadow:
        0 28px 80px rgba(26,31,23,0.1),
        inset 0 1px 0 rgba(255,255,255,0.9);
      backdrop-filter: blur(18px);
    }
    .subpage-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      margin-bottom: clamp(28px, 4vw, 44px);
      color: rgba(26,31,23,0.48);
      font-size: var(--fs-sm);
      font-weight: 800;
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
    }
    .subpage-copy-block {
      max-width: 760px;
      padding: 0;
    }
    .subpage-copy-block + .subpage-copy-block {
      margin-top: clamp(32px, 5vw, 54px);
      padding-top: clamp(28px, 4vw, 40px);
      border-top: 1px solid rgba(26,31,23,0.1);
    }
    .subpage-copy-block h2 {
      margin: 0 0 14px;
      color: var(--text-dark);
      font-size: var(--fs-2xl);
      line-height: var(--lh-heading);
      letter-spacing: var(--ls-snug);
    }
    .subpage-copy-block p,
    .subpage-copy-block li {
      color: rgba(26,31,23,0.68);
      font-size: var(--fs-base);
      line-height: var(--lh-relaxed);
    }
    .subpage-copy-block p {
      margin: 0 0 16px;
    }
    .subpage-copy-block ul,
    .subpage-copy-block ol {
      margin: 18px 0 0;
      padding-left: 1.2em;
    }
    .subpage-copy-block li + li {
      margin-top: 8px;
    }
    .subpage-copy-block a {
      color: var(--green-deep);
      font-weight: 800;
      text-decoration: underline;
      text-decoration-color: rgba(107,142,58,0.34);
      text-underline-offset: 0.18em;
    }
    .subpage-copy-block em {
      color: rgba(26,31,23,0.6);
      font-style: normal;
    }
    .subpage-footer {
      padding: 34px 0;
      background: #080b09;
      border-top: 1px solid rgba(243,240,231,0.08);
    }
    .subpage-footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .subpage-footer .footer-brand {
      margin: 0;
      color: var(--text-light);
      text-decoration: none;
    }
    .subpage-footer .legal a {
      color: var(--text-muted-light);
    }
    .subpage-footer .legal a:hover {
      color: var(--green-bright);
    }

    /* ── Responsive ───────────────────────────────────────────── */
    @media (max-width: 1024px) {
      .hero { padding: 120px 0 32px; }
      .hero-wrap { grid-template-columns: 1fr; min-height: auto; gap: 48px; }
      .hero-right { height: 420px; }
      .process-layout { grid-template-columns: 1fr; gap: 40px; }
      .process-left { position: static; }
      .nav-links { display: none; }
      .footer-grid { grid-template-columns: 1fr; }
      .pricing-grid,
      .retainer-grid { grid-template-columns: 1fr; }
    }
    @media (min-width: 769px) and (max-width: 1024px) {
      .process-layout {
        grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr);
        gap: 32px;
      }
      .process-left {
        position: sticky;
        top: 96px;
        align-self: start;
        height: fit-content;
      }
      .process-left .lead { max-width: 30ch; }
    }
    @media (max-width: 980px) {
      .section-head:not(.center) { flex-direction: column; gap: 20px; }
      .section-head:not(.center) > *:first-child,
      .section-head:not(.center) > *:last-child:not(:first-child) { max-width: 100%; }
      .faq-grid { grid-template-columns: 1fr; }
      .conversion-actions { flex-direction: column; align-items: stretch; }
      .conversion-actions .btn {
        width: 100%;
        min-width: 0;
        white-space: normal;
        text-align: center;
        line-height: 1.25;
        padding-top: 12px;
        padding-bottom: 12px;
      }
      #url-demo-title .title-line.nowrap {
        white-space: normal;
      }
      .conversion-choices { grid-template-columns: 1fr; }
      .conversion-separator { min-width: 0; }
      .conversion-separator span { width: auto; height: auto; padding: 10px 16px; }
      .usp-band,
      .usp-band.reverse { grid-template-columns: 1fr; }
      .usp-band.reverse .usp-copy,
      .usp-band.reverse .usp-media-wrap { order: initial; }
      .benefit-grid { grid-template-columns: repeat(2,1fr); }
      .benefit-card { grid-column: span 1; }
      .benefit-card:nth-last-child(2) { grid-column: span 1; }
      .benefit-card:last-child { grid-column: 1 / -1; }
      .hero-meta { flex-wrap: wrap; gap: 20px; }
      .tldr-list { grid-template-columns: repeat(2,1fr); }
      .pas-body { grid-template-columns: 1fr; }
      .pas-body .pas-solution { grid-column: auto; }
      .result-step.active { grid-template-columns: 1fr; }
      .result-summary { position: static; }
      .pricing-grid,
      .retainer-grid { grid-template-columns: 1fr; }
      .process-panel { min-height: 320px; }
      .process-copy { width: min(72%, 560px); }
      .persona-support-inner {
        grid-template-columns: 1fr;
        min-height: auto;
      }
      .persona-support-copy {
        padding-bottom: 0;
      }
      .persona-support-visual {
        min-height: 460px;
        justify-content: center;
        align-items: flex-end;
      }
      .persona-portrait {
        height: auto;
        width: min(72vw, 440px);
        margin-right: 0;
      }
      .persona-portrait img {
        height: auto;
        width: 100%;
        margin-right: 0;
      }
      .persona-portrait figcaption {
        position: static;
        margin-top: 16px;
        padding: 0;
        text-align: left;
      }
    }
    @media (max-width: 620px) {
      .wrap { padding: 0 18px; }
      .hero-wrap { padding: 0 18px; }
      .nav { padding: 16px 18px; }
      .brand { font-size: 0; gap: 0; }
      .hero-right { height: 320px; }
      section { padding: 72px 0; }
      .hero-actions { width: 100%; }
      .hero-actions .btn { flex: 1 1 auto; }
      .tier-card {
        overflow: hidden;
      }
      .tier-card-best {
        transform: none;
      }
      .tier-top {
        padding-right: 0;
        flex-wrap: wrap;
      }
      .tier-discount {
        position: static;
      }
      .benefit-grid, .tldr-list { grid-template-columns: 1fr; }
      .pas-body { grid-template-columns: 1fr; }
      .pas-body .pas-block:last-child { grid-column: auto; }
      .benefit-card,
      .benefit-card:last-child { grid-column: span 1; }
      .process-panel { min-height: 420px; }
      .process-copy {
        width: 100%;
        min-height: 420px;
        justify-content: flex-end;
        padding: 24px 22px 22px;
      }
      .process-panel::after {
        background: linear-gradient(180deg, rgba(8,11,9,0.12) 0%, rgba(8,11,9,0.58) 40%, rgba(8,11,9,0.95) 100%);
      }
      .usp-copy { padding: 28px 22px; }
      .usp-copy h3 { font-size: var(--fs-xl); }
      .usp-media-wrap { min-height: 280px; }
      .cta-panel { border-radius: 30px; padding: 32px 20px; }
      .persona-support {
        padding-top: 72px;
      }
      .persona-support-inner {
        padding: 0 18px;
        gap: 24px;
      }
      .persona-support-copy h2 {
        font-size: clamp(2.3rem, 13vw, 3.7rem);
      }
      .persona-support-actions {
        flex-direction: column;
      }
      .persona-support-actions .btn {
        width: 100%;
      }
      .persona-support-visual {
        min-height: 430px;
        justify-content: center;
      }
      .persona-portrait {
        width: min(82vw, 360px);
        margin-right: 0;
      }
      .persona-portrait figcaption {
        position: static;
        margin: 12px 0 0;
        padding: 0;
        text-align: center;
        justify-items: center;
        width: auto;
        max-width: 92vw;
      }
      .url-intake-trigger { grid-template-columns: 1fr; }
      .bottom { flex-direction: column; align-items: flex-start; }
      .pas-lead { white-space: normal; }
      .subpage-footer-inner {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    /* ── Reduced motion ───────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
      .reveal { opacity: 1; transform: none; }
      .marquee-track { animation: none; }
    }