/** Shopify CDN: Minification failed

Line 88:0 All "@import" rules must come first

**/
/*
  ============================================================
  FILE:    assets/benefits-grid-glowora.css
  BRAND:   FLO — Premium Hair Gummies
  STYLE:   Dark Luxury | Editorial Grid | Numbered Cards
  VERSION: 3.0.0

  TABLE OF CONTENTS
  1.  Custom Properties
  2.  Font Import
  3.  Section Scaffold
  4.  Grain Overlay
  5.  Ambient Orbs
  6.  Inner Wrapper
  7.  Section Header
      7a. Eyebrow
      7b. Heading
      7c. Subheading
  8.  Benefits Grid
  9.  Benefit Card (Base)
      9a. Card Top Row (number + icon)
      9b. Number Ornament
      9c. Icon
      9d. Card Body (title + description)
      9e. Card Tag
      9f. Corner Accents (hover decoration)
  10. Card Style Modifiers
      10a. Bordered (default)
      10b. Filled
  11. Hover & Active States
  12. CTA Block
  13. Scroll-Reveal Animations
  14. Grid Layout Logic (count-aware)
  15. Responsive: Tablet (≤ 1024px)
  16. Responsive: Mobile (≤ 749px)
  17. Reduced Motion
  ============================================================
*/


/* ── 1. CUSTOM PROPERTIES ─────────────────────────────────── */

.glow-benefits {
  /* Palette — overridden by Shopify inline settings */
  --ben-bg:      #1A1511;
  --ben-text:    #F5F0EA;
  --ben-accent:  #D8B8A2;

  /* Derived — wärmer, passend zu Hero-Palette */
  --ben-text-muted:   color-mix(in srgb, var(--ben-text) 52%, transparent);
  --ben-text-subtle:  color-mix(in srgb, var(--ben-text) 18%, transparent);
  --ben-accent-dim:   color-mix(in srgb, var(--ben-accent) 12%, transparent);
  --ben-accent-mid:   color-mix(in srgb, var(--ben-accent) 38%, transparent);
  --ben-border:       color-mix(in srgb, var(--ben-text)   8%, transparent);
  --ben-card-bg:      color-mix(in srgb, var(--ben-text)   3.5%, transparent);
  --ben-card-hover:   color-mix(in srgb, var(--ben-accent) 6%, transparent);

  /* Spacing (8pt grid) */
  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2rem;
  --sp-6:  3rem;
  --sp-8:  4rem;
  --sp-12: 6rem;
  --sp-16: 8rem;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', sans-serif;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-reveal:   cubic-bezier(0.22, 1, 0.36, 1);

  /* Card corner size — etwas größer für mehr Präsenz */
  --corner-size: 22px;
}


/* ── 2. FONT IMPORT ───────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@300;400;500&display=swap');


/* ── 3. SECTION SCAFFOLD ──────────────────────────────────── */

.glow-benefits {
  position: relative;
  background-color: var(--ben-bg);
  color: var(--ben-text);
  /* Mehr vertikaler Raum — Premium Feeling */
  padding-block: clamp(var(--sp-12), 12vw, var(--sp-16))
                 clamp(var(--sp-12), 12vw, var(--sp-16));
  overflow: hidden;
  isolation: isolate;
}

.glow-benefits .page-width {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 3rem);
  width: 100%;
}


/* ── 4. GRAIN OVERLAY ─────────────────────────────────────── */

.glow-benefits__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}


/* ── 5. AMBIENT ORBS ──────────────────────────────────────── */

.glow-benefits__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.glow-benefits__ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
}

.glow-benefits__ambient-orb--1 {
  width: clamp(280px, 38vw, 560px);
  height: clamp(280px, 38vw, 560px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--ben-accent) 14%, transparent),
    transparent 70%
  );
  top: -15%;
  left: -5%;
  animation: ben-orb-1 24s ease-in-out infinite alternate;
}

.glow-benefits__ambient-orb--2 {
  width: clamp(220px, 28vw, 460px);
  height: clamp(220px, 28vw, 460px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--ben-accent) 8%, transparent),
    transparent 70%
  );
  bottom: -10%;
  right: 5%;
  animation: ben-orb-2 30s ease-in-out infinite alternate;
}

@keyframes ben-orb-1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5%, 8%) scale(1.08); }
}

@keyframes ben-orb-2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-5%, -6%) scale(1.06); }
}


/* ── 6. INNER WRAPPER ─────────────────────────────────────── */

.glow-benefits__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* Mehr Luft zwischen Header und Grid */
  gap: clamp(var(--sp-8), 8vw, var(--sp-12));
}


/* ── 7. SECTION HEADER ────────────────────────────────────── */

.glow-benefits__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: end;
  padding-block-end: var(--sp-8);
  border-bottom: 1px solid var(--ben-border);

  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--ease-reveal),
    transform 0.9s var(--ease-reveal);
}

.glow-benefits__header[data-visible] {
  opacity: 1;
  transform: translateY(0);
}


/* ── 7a. EYEBROW ──────────────────────────────────────────── */

.glow-benefits__eyebrow {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ben-accent);
  margin: 0;
}

.glow-benefits__eyebrow-pip {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ben-accent);
  flex-shrink: 0;
  opacity: 0.55;
}


/* ── 7b. HEADING ──────────────────────────────────────────── */

/*
  Großzügig — dominiert die Section wie ein Editorial-Titel
  Konsistent mit Hero headline tone
*/
.glow-benefits__heading {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 6vw, 7rem);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ben-text);
  margin: 0;
  grid-column: 1;
  hyphens: auto;
  text-wrap: pretty;
}

.glow-benefits__heading em {
  font-style: italic;
  color: var(--ben-accent);
  opacity: 0.9;
}


/* ── 7c. SUBHEADING ───────────────────────────────────────── */

.glow-benefits__subheading {
  font-family: var(--font-body);
  /* Deutlich größer als vorher (war 1.0625rem) */
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--ben-text-muted);
  margin: 0;
  grid-column: 2;
  align-self: end;
  max-width: 44ch;
}


/* ── 8. BENEFITS GRID ─────────────────────────────────────── */

.glow-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 2px gap für bessere Sichtbarkeit der Trennlinien */
  gap: 1px;
  background: var(--ben-border);
  border: 1px solid var(--ben-border);
  border-radius: 1px;
  overflow: hidden;
}

.glow-benefits__grid[data-count="2"],
.glow-benefits__grid[data-count="4"] {
  grid-template-columns: repeat(2, 1fr);
}

.glow-benefits__grid[data-count="8"] {
  grid-template-columns: repeat(4, 1fr);
}


/* ── 9. BENEFIT CARD (BASE) ───────────────────────────────── */

.glow-benefits__card {
  position: relative;
  background: var(--ben-bg);
  /* Deutlich mehr Innenabstand — Cards wirken großzügiger */
  padding: clamp(var(--sp-6), 4vw, var(--sp-8)) clamp(var(--sp-4), 3vw, var(--sp-6));
  display: flex;
  flex-direction: column;
  /* Mehr vertikale Luft zwischen den Card-Elementen */
  gap: var(--sp-4);
  overflow: hidden;
  cursor: default;

  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity    0.8s var(--ease-reveal) var(--card-delay, 0ms),
    transform  0.8s var(--ease-reveal) var(--card-delay, 0ms),
    background 0.35s ease;
}

.glow-benefits__card[data-visible] {
  opacity: 1;
  transform: translateY(0);
}

.glow-benefits__card:hover {
  background: var(--ben-card-hover);
}


/* ── 9a. CARD TOP ROW ─────────────────────────────────────── */

.glow-benefits__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* Mehr Abstand nach unten zur Nummer */
  margin-block-end: var(--sp-1);
}


/* ── 9b. NUMBER ORNAMENT ──────────────────────────────────── */

/*
  Kernänderung: 01–06 Nummern sind das visuelle Ankerelement der Card.
  Von 1.75rem auf 4rem — fast doppelt so groß.
  Werden zum bewussten Design-Detail wie bei Aesop, Byredo, Gisou.
*/
.glow-benefits__card-num {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 4vw, 4rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--ben-accent);
  /* Besser sichtbar als vorher (war 0.65) */
  opacity: 0.7;
  line-height: 1;
  user-select: none;
  transition: opacity 0.3s ease;
}

.glow-benefits__card:hover .glow-benefits__card-num {
  opacity: 1;
}


/* ── 9c. ICON ─────────────────────────────────────────────── */

/* Etwas größer als vorher (40px → 46px) */
.glow-benefits__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--ben-accent-mid);
  color: var(--ben-accent);
  flex-shrink: 0;
  transition:
    border-color 0.35s ease,
    background   0.35s ease,
    transform    0.4s var(--ease-out-expo),
    color        0.35s ease;
}

.glow-benefits__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.glow-benefits__card:hover .glow-benefits__icon {
  background: var(--ben-accent-mid);
  border-color: var(--ben-accent);
  color: var(--ben-text);
  transform: rotate(-8deg) scale(1.08);
}


/* ── 9d. CARD BODY ────────────────────────────────────────── */

.glow-benefits__card-body {
  display: flex;
  flex-direction: column;
  /* Mehr Luft zwischen Titel und Beschreibung */
  gap: var(--sp-2);
  flex: 1;
}

/*
  Card-Titel: deutlich größer, mehr Gewicht.
  Vorher: clamp(1.375rem, 2vw, 1.875rem)
  Jetzt:  clamp(1.625rem, 2.4vw, 2.25rem)
  → Kurze Titel wie "EU-zugelassen" füllen die Card besser
*/
.glow-benefits__card-title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.4vw, 2.25rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--ben-text);
  margin: 0;
  transition:
    letter-spacing 0.35s var(--ease-out-expo),
    color 0.25s ease;
}

.glow-benefits__card:hover .glow-benefits__card-title {
  letter-spacing: 0.025em;
}

/*
  Card-Beschreibung: war zu klein (13–17px reicht nicht).
  Jetzt: mindestens 16px, max 19px — bequem lesbar.
  Vorher: clamp(0.9375rem, 1.1vw, 1.0625rem)
  Jetzt:  clamp(1rem, 1.2vw, 1.1875rem)
*/
.glow-benefits__card-desc {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  font-weight: 300;
  line-height: 1.85;
  color: var(--ben-text-muted);
  margin: 0;
}


/* ── 9e. CARD TAG ─────────────────────────────────────────── */

/* Größer und klarer — kein Minitext mehr */
.glow-benefits__card-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  /* Mehr Padding */
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--ben-accent-mid);
  font-family: var(--font-body);
  /* Größer als vorher (war 0.5625rem = 9px, viel zu klein) */
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ben-accent);
  white-space: nowrap;
  margin-top: auto;
  padding-top: var(--sp-2);

  transition:
    border-color 0.3s ease,
    box-shadow   0.3s ease;
}

.glow-benefits__card:hover .glow-benefits__card-tag {
  border-color: var(--ben-accent);
  box-shadow: 0 0 12px var(--ben-accent-dim);
}


/* ── 9f. CORNER ACCENTS ───────────────────────────────────── */

.glow-benefits__card-corner {
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glow-benefits__card:hover .glow-benefits__card-corner {
  opacity: 1;
}

.glow-benefits__card-corner--tl {
  top: 0;
  left: 0;
  border-top: 1px solid var(--ben-accent);
  border-left: 1px solid var(--ben-accent);
}

.glow-benefits__card-corner--br {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid var(--ben-accent);
  border-right: 1px solid var(--ben-accent);
}


/* ── 10. CARD STYLE MODIFIERS ─────────────────────────────── */

/* ── 10a. BORDERED (default) ──────────────────────────────── */
/* Cards separated by 1px grid gap = border illusion. */

/* ── 10b. FILLED ──────────────────────────────────────────── */

.glow-benefits--cards-filled .glow-benefits__card {
  background: var(--ben-card-bg);
}

.glow-benefits--cards-filled .glow-benefits__card:hover {
  background: color-mix(in srgb, var(--ben-accent) 10%, transparent);
}


/* ── 11. HOVER & ACTIVE STATES ────────────────────────────── */

/* Accent-Linie von unten — eleganter Hover-Indicator */
.glow-benefits__card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(
    90deg,
    var(--ben-accent) 0%,
    transparent 100%
  );
  transition: width 0.6s var(--ease-out-expo);
  pointer-events: none;
}

.glow-benefits__card:hover::after {
  width: 65%;
}


/* ── 12. CTA BLOCK ────────────────────────────────────────── */

.glow-benefits__cta-wrap {
  display: flex;
  justify-content: center;
  padding-block-start: var(--sp-6);

  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s var(--ease-reveal) 0.5s,
    transform 0.8s var(--ease-reveal) 0.5s;
}

.glow-benefits__cta-wrap[data-visible] {
  opacity: 1;
  transform: translateY(0);
}

/* CTA-Button — Premium, nicht nach Shopify-Standard */
.glow-benefits__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  /* Großzügiges Padding */
  padding: 1.2rem 3.5rem;

  font-family: var(--font-body);
  /* Gut lesbar */
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ben-bg);

  background: var(--ben-accent);
  border: 1px solid var(--ben-accent);
  border-radius: 2px;
  position: relative;
  overflow: hidden;

  transition:
    background  0.35s var(--ease-reveal),
    color       0.35s var(--ease-reveal),
    transform   0.25s ease,
    box-shadow  0.35s ease,
    border-color 0.35s ease;
}

/* Shimmer */
.glow-benefits__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(255,255,255,0.12) 50%,
    transparent 62%
  );
  transform: translateX(-100%);
  transition: transform 0.55s ease;
}

.glow-benefits__cta:hover::before {
  transform: translateX(110%);
}

.glow-benefits__cta:hover {
  background: var(--ben-text);
  border-color: var(--ben-text);
  color: var(--ben-bg);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ben-accent) 22%, transparent);
}

.glow-benefits__cta:focus-visible {
  outline: 2px solid var(--ben-accent);
  outline-offset: 3px;
}

.glow-benefits__cta:active {
  transform: translateY(0);
  box-shadow: none;
}

.glow-benefits__cta-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.glow-benefits__cta:hover .glow-benefits__cta-arrow {
  transform: translateX(5px);
}


/* ── 13. SCROLL-REVEAL ANIMATIONS ─────────────────────────── */

/* Header — handled in §7 */
/* Cards — handled in §9 */
/* CTA — handled in §12 */


/* ── 14. GRID LAYOUT LOGIC ────────────────────────────────── */

.glow-benefits__grid[data-count="5"] .glow-benefits__card:nth-child(4) {
  grid-column-start: 1;
}


/* ── 15. RESPONSIVE: TABLET (≤ 1024px) ───────────────────── */

@media (max-width: 1024px) {
  .glow-benefits {
    padding-block: var(--sp-12);
  }

  .glow-benefits .page-width {
    padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  }

  .glow-benefits__inner {
    gap: var(--sp-8);
  }

  .glow-benefits__header {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding-block-end: var(--sp-6);
  }

  .glow-benefits__heading {
    grid-column: 1;
    font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  }

  .glow-benefits__subheading {
    grid-column: 1;
    max-width: none;
    font-size: 1.0625rem;
  }

  /* 3-col → 2-col on tablet */
  .glow-benefits__grid,
  .glow-benefits__grid[data-count="6"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .glow-benefits__grid[data-count="8"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .glow-benefits__card {
    padding: var(--sp-6) var(--sp-4);
    gap: var(--sp-3);
  }

  .glow-benefits__card-num {
    font-size: clamp(2.25rem, 4vw, 3rem);
  }

  .glow-benefits__card-title {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
  }
}


/* ── 16. RESPONSIVE: MOBILE (≤ 749px) ────────────────────── */
/* ═══════════════════════════════════════════════════
   Komplett neu geschrieben — gleiche Aggressivität
   wie flo-hero Mobile-Block. Desktop unverändert.
═══════════════════════════════════════════════════ */

@media screen and (max-width: 749px) {

  /* Kein horizontaler Overflow */
  .glow-benefits {
    overflow-x: hidden;
    padding-block: var(--sp-6) var(--sp-8);
  }

  .glow-benefits .page-width {
    padding-inline: 18px;
  }

  /* Inner: weniger Luft auf Mobile */
  .glow-benefits__inner {
    gap: var(--sp-4);
  }

  /* ── HEADER ── */
  .glow-benefits__header {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding-block-end: var(--sp-4);
    border-bottom: 1px solid var(--ben-border);
    /* Scroll-Reveal sofort sichtbar auf Mobile */
    opacity: 1;
    transform: none;
  }

  /* Eyebrow: kompakter */
  .glow-benefits__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    gap: var(--sp-1);
  }

  /* Heading: deutlich kleiner, gut lesbar */
  .glow-benefits__heading {
    grid-column: 1;
    font-size: clamp(2rem, 8.5vw, 2.75rem);
    line-height: 1.08;
    word-break: break-word;
    hyphens: auto;
  }

  /* Subheading: volle Breite, kompakter */
  .glow-benefits__subheading {
    grid-column: 1;
    max-width: 100%;
    font-size: 0.9375rem;
    line-height: 1.65;
  }

  /* ── GRID: 1 Spalte, alle Varianten ── */
  .glow-benefits__grid,
  .glow-benefits__grid[data-count="2"],
  .glow-benefits__grid[data-count="4"],
  .glow-benefits__grid[data-count="6"],
  .glow-benefits__grid[data-count="8"] {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  /* Horizontal scroll variant */
  .glow-benefits__grid--scroll-mobile {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .glow-benefits__grid--scroll-mobile::-webkit-scrollbar {
    display: none;
  }

  .glow-benefits__grid--scroll-mobile .glow-benefits__card {
    scroll-snap-align: start;
    min-width: 280px;
  }

  /* ── CARDS ── */
  .glow-benefits__card {
    padding: 22px 18px 20px;
    gap: var(--sp-2);
    transition-delay: 0ms;
    /* Scroll-Reveal sofort auf Mobile */
    opacity: 1;
    transform: none;
  }

  /* Accent-Linie ausblenden auf Mobile */
  .glow-benefits__card::after {
    display: none;
  }

  /* Card Top Row: kompakter */
  .glow-benefits__card-top {
    margin-block-end: 0;
  }

  /* Nummer: proportional kleiner */
  .glow-benefits__card-num {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    opacity: 0.75;
  }

  /* Icon: kleiner */
  .glow-benefits__icon {
    width: 38px;
    height: 38px;
  }

  .glow-benefits__icon svg {
    width: 17px;
    height: 17px;
  }

  /* Card Body: engere Gaps */
  .glow-benefits__card-body {
    gap: var(--sp-1);
  }

  /* Titel: gut lesbar, nicht zu groß */
  .glow-benefits__card-title {
    font-size: clamp(1.25rem, 5.5vw, 1.625rem);
    line-height: 1.2;
    word-break: break-word;
    hyphens: auto;
  }

  /* Beschreibung: 15px — gut lesbar */
  .glow-benefits__card-desc {
    font-size: 0.9375rem;
    line-height: 1.75;
    word-break: break-word;
  }

  /* Tag: kompakter, aber sichtbar */
  .glow-benefits__card-tag {
    font-size: 0.5625rem;
    padding: 0.25rem 0.75rem;
    padding-top: var(--sp-1);
    margin-top: var(--sp-1);
    white-space: normal;
  }

  /* Corner Accents: auf Mobile ausblenden */
  .glow-benefits__card-corner {
    display: none;
  }

  /* ── CTA BUTTON ── */
  .glow-benefits__cta-wrap {
    padding-block-start: var(--sp-4);
    opacity: 1;
    transform: none;
  }

  .glow-benefits__cta {
    width: 100%;
    justify-content: center;
    padding: 15px 20px;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    min-height: 50px;
    border-radius: 4px;
  }

  /* Touch: alle Hover-Effekte deaktivieren */
  @media (hover: none) {
    .glow-benefits__card:hover {
      background: var(--ben-bg);
    }
    .glow-benefits__card:hover .glow-benefits__card-num {
      opacity: 0.75;
    }
    .glow-benefits__card:hover .glow-benefits__icon {
      background: transparent;
      border-color: var(--ben-accent-mid);
      color: var(--ben-accent);
      transform: none;
    }
    .glow-benefits__card:hover .glow-benefits__card-tag {
      border-color: var(--ben-accent-mid);
      box-shadow: none;
    }
    .glow-benefits__cta:hover {
      background: var(--ben-accent);
      border-color: var(--ben-accent);
      color: var(--ben-bg);
      transform: none;
      box-shadow: none;
    }
  }

  /* ── Sehr kleine Screens (360px) ── */
  @media (max-width: 360px) {
    .glow-benefits {
      padding-block: var(--sp-4) var(--sp-6);
    }
    .glow-benefits .page-width {
      padding-inline: 14px;
    }
    .glow-benefits__heading {
      font-size: 1.875rem;
    }
    .glow-benefits__card {
      padding: 18px 14px 16px;
    }
    .glow-benefits__card-title {
      font-size: 1.125rem;
    }
  }
}


/* ── 17. REDUCED MOTION ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .glow-benefits__ambient-orb {
    animation: none;
  }

  .glow-benefits__header,
  .glow-benefits__card,
  .glow-benefits__cta-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .glow-benefits__card::after,
  .glow-benefits__card-corner {
    transition: none;
  }

  .glow-benefits__icon {
    transition: none;
  }

  .glow-benefits__cta {
    transition: none;
  }

  .glow-benefits__cta::before {
    display: none;
  }
}