/* ─────────────────────────────────────────────────────────────────────
 *  Fixheim Website — Premium Styles
 * ───────────────────────────────────────────────────────────────────── */

:root {
  --bg: #0B1020;
  --bg-2: #0F1530;
  --surface: #ffffff;
  --ink: #0B1020;
  --ink-soft: #4B5675;
  --ink-mute: #8794AD;
  --line: #E6EAF3;
  --line-dark: rgba(255,255,255,0.08);

  --violet: #7C3AED;
  --violet-2: #A78BFA;
  --fuchsia: #D946EF;
  --blue: #2563EB;
  --emerald: #059669;
  --amber: #D97706;
  --rose: #E11D48;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(11,16,32,.04), 0 1px 1px rgba(11,16,32,.03);
  --shadow:    0 6px 24px rgba(11,16,32,.06), 0 2px 6px rgba(11,16,32,.04);
  --shadow-lg: 0 24px 60px rgba(11,16,32,.14), 0 8px 16px rgba(11,16,32,.06);
  --shadow-glow: 0 30px 80px -20px rgba(124,58,237,.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: "cv02","cv03","cv04","cv11";
  color: var(--ink);
  background: #FAFBFD;
  line-height: 1.55;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 768px) {
  .container { padding: 0 40px; }
}

/* ─── Brand mark ──────────────────────────────────────────────────── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(43, 111, 181, .35), 0 0 0 1px rgba(0,0,0,.04);
}
.brand-light { color: #fff; }
.brand-light .brand-mark { box-shadow: 0 6px 22px rgba(43, 111, 181, .5), 0 0 0 1px rgba(255,255,255,.08); }

/* ─── Navigation ──────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(230, 234, 243, .6);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 24px rgba(11, 16, 32, .06);
  border-bottom-color: transparent;
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 32px;
}

/* Underline-on-hover for nav links — refined "site grows with you" feel */
.nav-links {
  display: none;
  gap: 36px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.nav-links a {
  position: relative;
  padding: 6px 2px;
  transition: color .18s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #2A6FB5;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .22s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: calc(100% - 4px); }

@media (min-width: 900px) {
  .nav-links { display: flex; }
}

/* CTA — brand blue, refined depth, subtle micro-interaction */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #2F7AC4 0%, #2A6FB5 100%);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  padding: 11px 20px;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .22) inset,
    0 6px 18px rgba(42, 111, 181, .35);
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .25) inset,
    0 12px 28px rgba(42, 111, 181, .45);
}
.nav-cta:active { transform: translateY(0); }

/* Mobile hamburger — only visible <900px */
.nav-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
}
.nav-burger svg { width: 20px; height: 20px; }
@media (min-width: 900px) {
  .nav-burger { display: none; }
}

/* Mobile menu panel (toggled via .is-open class on .nav) */
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px 20px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.nav-mobile a {
  padding: 14px 12px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.nav-mobile a:hover { background: #F4F6FC; }
.nav.is-open .nav-mobile { display: flex; }
@media (min-width: 900px) {
  .nav-mobile { display: none !important; }
}

/* ─── Hero — modern SaaS hero ─────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(140% 110% at 50% 0%, #2F7AC4 0%, #205B96 55%, #15406D 100%);
  color: #fff;
  padding: 80px 0 100px;
  isolation: isolate;
}
@media (min-width: 900px) { .hero { padding: 110px 0 130px; } }

/* Mesh gradient blobs — soft, expensive look (no more drips) */
.hero-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hero-mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.hero-mesh-blob-1 {
  width: 520px; height: 520px;
  top: -120px; left: -120px;
  background: radial-gradient(circle, #7CB7F0 0%, transparent 70%);
  animation: blob-drift 24s ease-in-out infinite;
}
.hero-mesh-blob-2 {
  width: 620px; height: 620px;
  top: 30%; right: -160px;
  background: radial-gradient(circle, #5B9BD5 0%, transparent 70%);
  animation: blob-drift 30s ease-in-out infinite reverse;
}
.hero-mesh-blob-3 {
  width: 480px; height: 480px;
  bottom: -160px; left: 30%;
  background: radial-gradient(circle, #1E4E82 0%, transparent 70%);
  animation: blob-drift 26s ease-in-out infinite;
}
@keyframes blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.05); }
  66%      { transform: translate(-30px, 25px) scale(0.96); }
}

/* Subtle dot grid — premium tech look, very faint */
.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.2) 60%, transparent);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.2) 60%, transparent);
}

/* Two-column layout */
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 72px;
  }
}

/* Copy column */
.hero-copy { max-width: 600px; }
@media (min-width: 1000px) { .hero-copy { max-width: none; } }

/* Hero badge — refined glassmorphism */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  margin-bottom: 28px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset;
}

/* Hero typography — refined, tighter, with gradient accent */
.hero-title {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  color: #fff;
}
.hero-title-grad {
  background: linear-gradient(180deg, #fff 0%, #BAD9F4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, .82);
  max-width: 520px;
  margin: 0 0 36px;
  line-height: 1.6;
  letter-spacing: -0.005em;
}
.hero-sub strong { color: #fff; font-weight: 700; }

/* Action row — refined CTA + outlined ghost button */
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 44px;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .38);
  transform: translateY(-1px);
}
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  border-radius: 999px;
  background: #fff;
  color: #1F5891;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.005em;
  box-shadow:
    0 1px 0 rgba(31, 88, 145, .08) inset,
    0 14px 36px rgba(15, 40, 75, .25),
    0 4px 8px rgba(15, 40, 75, .12);
  transition: transform .18s ease, box-shadow .25s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(31, 88, 145, .08) inset,
    0 20px 44px rgba(15, 40, 75, .32),
    0 6px 12px rgba(15, 40, 75, .16);
}
.btn-primary:active { transform: translateY(0); }
.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
}
.btn-play .play-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform .2s, background .2s;
}
.btn-play:hover .play-circle {
  transform: scale(1.08);
  background: rgba(255,255,255,.25);
}

/* ─── Hero Trust signals — honest, no fake metrics ───────────────── */
.hero-trust {
  display: flex;
  align-items: stretch;
  gap: 22px;
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-width: 480px;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.hero-trust-num {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
  display: flex;
  align-items: center;
}
.hero-trust-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  line-height: 1.25;
}
.hero-trust-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .22), transparent);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION DIVIDERS — premium animated gradient lines.

   Each divider lives in its own padding band (96px tall), so the
   surrounding sections breathe. The line itself is a 1px-tall
   gradient that draws outward from the centre when scrolled into
   view. A centred diamond + brand-blue dots at the ends make the
   line look "anchored", not floating.
   ═══════════════════════════════════════════════════════════════════ */
.section-divider {
  position: relative;
  width: 100%;
  padding: 64px 0;
  background: transparent;
  z-index: 1;
}
@media (min-width: 900px) {
  .section-divider { padding: 96px 0; }
}

/* Container for the line and the centre node */
.divider-line {
  position: relative;
  width: min(86%, 1100px);
  height: 1px;
  margin: 0 auto;
  transform: scaleX(0);
  transform-origin: center;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 111, 181, 0.22) 15%,
    rgba(42, 111, 181, 0.7) 50%,
    rgba(42, 111, 181, 0.22) 85%,
    transparent 100%
  );
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Brand-blue dots at the ends of the line */
.divider-line::before,
.divider-line::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2A6FB5;
  transform: translateY(-50%) scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s;
  box-shadow: 0 0 0 4px rgba(42, 111, 181, 0.12);
}
.divider-line::before { left: 0; }
.divider-line::after  { right: 0; }

/* Soft horizontal halo glow centred on the line */
.divider-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 460px;
  max-width: 60%;
  height: 80px;
  transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(
    ellipse at center,
    rgba(42, 111, 181, 0.35) 0%,
    rgba(42, 111, 181, 0.05) 45%,
    transparent 70%
  );
  filter: blur(20px);
  opacity: 0;
  transition: transform 1.2s ease 0.2s, opacity 1.2s ease 0.2s;
  pointer-events: none;
}

/* Centre "node" — a rotated diamond marker that pops in last */
.section-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: #fff;
  border: 2px solid #2A6FB5;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s;
  box-shadow: 0 0 0 6px rgba(42, 111, 181, 0.08),
              0 4px 14px -4px rgba(42, 111, 181, 0.5);
  z-index: 2;
}

/* Variant for dividers on a light background (e.g. inside .services) */
.section-divider-onto-light .divider-glow {
  background: radial-gradient(
    ellipse at center,
    rgba(42, 111, 181, 0.22) 0%,
    rgba(42, 111, 181, 0.03) 45%,
    transparent 70%
  );
}

/* Reveal state — toggled by IntersectionObserver */
.section-divider.is-revealed .divider-line {
  transform: scaleX(1);
}
.section-divider.is-revealed .divider-line::before,
.section-divider.is-revealed .divider-line::after {
  transform: translateY(-50%) scale(1);
}
.section-divider.is-revealed .divider-glow {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.section-divider.is-revealed::after {
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

/* Reduced motion — fully drawn, no animation */
@media (prefers-reduced-motion: reduce) {
  .divider-line,
  .divider-line::before,
  .divider-line::after,
  .divider-glow,
  .section-divider::after { transition: none; }
  .divider-line { transform: scaleX(1); }
  .divider-line::before { transform: translateY(-50%) scale(1); }
  .divider-line::after  { transform: translateY(-50%) scale(1); }
  .divider-glow { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .section-divider::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLL-REVEAL UTILITY — `.reveal` and `.reveal-stagger > *`
   Any element with `.reveal` fades in + slides up when scrolled into
   view. `.reveal-stagger` on a parent makes its direct children
   reveal in sequence with a small delay between each.
   ═══════════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children so a grid of cards reveals one after the other */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-stagger.is-revealed > *      { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-revealed > *:nth-child(1)  { transition-delay: 0s; }
.reveal-stagger.is-revealed > *:nth-child(2)  { transition-delay: 0.06s; }
.reveal-stagger.is-revealed > *:nth-child(3)  { transition-delay: 0.12s; }
.reveal-stagger.is-revealed > *:nth-child(4)  { transition-delay: 0.18s; }
.reveal-stagger.is-revealed > *:nth-child(5)  { transition-delay: 0.24s; }
.reveal-stagger.is-revealed > *:nth-child(6)  { transition-delay: 0.30s; }
.reveal-stagger.is-revealed > *:nth-child(7)  { transition-delay: 0.36s; }
.reveal-stagger.is-revealed > *:nth-child(8)  { transition-delay: 0.42s; }
.reveal-stagger.is-revealed > *:nth-child(9)  { transition-delay: 0.48s; }
.reveal-stagger.is-revealed > *:nth-child(10) { transition-delay: 0.54s; }
.reveal-stagger.is-revealed > *:nth-child(11) { transition-delay: 0.60s; }
.reveal-stagger.is-revealed > *:nth-child(12) { transition-delay: 0.66s; }
.reveal-stagger.is-revealed > *:nth-child(13) { transition-delay: 0.72s; }
.reveal-stagger.is-revealed > *:nth-child(14) { transition-delay: 0.78s; }
.reveal-stagger.is-revealed > *:nth-child(15) { transition-delay: 0.84s; }
.reveal-stagger.is-revealed > *:nth-child(n + 16) { transition-delay: 0.9s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ─── iPhone Mockup (CSS only) ────────────────────────────────────── */
.hero-device {
  position: relative;
  display: none;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1000px) { .hero-device { display: flex; } }

.device-glow {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 183, 240, 0.4) 0%, transparent 60%);
  filter: blur(40px);
  z-index: 0;
}

.phone {
  position: relative;
  width: 290px;
  height: 600px;
  background: #0F1530;
  border-radius: 46px;
  padding: 12px;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .04) inset,
    0 1px 0 rgba(255, 255, 255, .08) inset,
    0 30px 70px -20px rgba(0, 0, 0, .55),
    0 12px 30px -10px rgba(0, 0, 0, .4);
  transform: rotate(-2.5deg);
  transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
.phone:hover { transform: rotate(-1deg) translateY(-4px); }
.phone-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 26px;
  background: #0B1020;
  border-radius: 14px;
  z-index: 5;
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #F4F6FB 0%, #EDF1F8 100%);
  border-radius: 34px;
  overflow: hidden;
}

/* ─── Auto-cycling screen slides ────────────────────────────────────
   Only one slide is ever rendered at a time. The previous slide is
   removed via `visibility: hidden` BEFORE the next one fades in, so
   we can never see two layered slides at the same time (the bug the
   first attempt had).

   Timeline (20s total cycle, 5s per slide):
     • 0.0s – 0.4s : fade in
     • 0.4s – 4.5s : fully visible (≈4.1s reading time)
     • 4.5s – 4.9s : fade out
     • 4.9s – 20s  : completely hidden (visibility: hidden)
*/
.phone-slide {
  position: absolute;
  inset: 0;
  padding: 50px 18px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: slide-cycle 20s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.phone-slide-1 { animation-delay: 0s; }
.phone-slide-2 { animation-delay: 5s; }
.phone-slide-3 { animation-delay: 10s; }
.phone-slide-4 { animation-delay: 15s; }

@keyframes slide-cycle {
  /* 0%   = 0.0s — start hidden                                     */
  /* 2%   = 0.4s — fully faded in                                   */
  /* 22%  = 4.4s — still fully visible                              */
  /* 25%  = 5.0s — fully faded out                                  */
  /* 100% = 20s  — stays hidden until the next loop                 */
  0%        { opacity: 0; visibility: hidden; transform: translateY(6px); }
  1%        { opacity: 0; visibility: visible; transform: translateY(6px); }
  2%, 22%   { opacity: 1; visibility: visible; transform: translateY(0); }
  25%       { opacity: 0; visibility: visible; transform: translateY(-6px); }
  26%, 100% { opacity: 0; visibility: hidden; transform: translateY(0); }
}

/* Respect users who turn off motion — show slide 1 statically */
@media (prefers-reduced-motion: reduce) {
  .phone-slide { animation: none; }
  .phone-slide-1 {
    opacity: 1;
    visibility: visible;
  }
}

/* ─── Slide-indicator dots ─────────────────────────────────────────
   Sit above the home indicator. The active dot stretches into a pill
   and gets the brand colour. Timing is in lock-step with the slides. */
.phone-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 6;
}
.phone-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(15, 21, 48, .18);
  animation: dot-cycle 20s linear infinite;
}
.phone-dot-1 { animation-delay: 0s; }
.phone-dot-2 { animation-delay: 5s; }
.phone-dot-3 { animation-delay: 10s; }
.phone-dot-4 { animation-delay: 15s; }

@keyframes dot-cycle {
  0%, 25%, 100% { background: rgba(15, 21, 48, .18); width: 5px; border-radius: 50%; }
  2%, 22%       { background: #2A6FB5; width: 16px; border-radius: 3px; }
}

/* Phone status bar */
.phone-statusbar {
  position: absolute;
  top: 18px;
  left: 22px;
  right: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #0F1530;
  z-index: 4;
}
.phone-signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}
.phone-signal span {
  width: 3px;
  background: #0F1530;
  border-radius: 1px;
}
.phone-signal span:nth-child(1) { height: 4px; }
.phone-signal span:nth-child(2) { height: 6px; }
.phone-signal span:nth-child(3) { height: 8px; }
.phone-signal span:nth-child(4) { height: 10px; }

/* In-app: greeting */
.phone-app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 8px;
}
.phone-app-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2A6FB5, #5B9BD5);
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(42, 111, 181, .35);
}
.phone-app-greeting {
  font-size: 11px;
  color: #6B7B96;
  font-weight: 500;
  margin-bottom: 1px;
}
.phone-app-name {
  font-size: 16px;
  font-weight: 800;
  color: #0F1530;
  letter-spacing: -0.01em;
}

/* In-app: primary CTA card */
.phone-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0F1530 0%, #1A2347 100%);
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(15, 21, 48, .35);
}
.phone-cta-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}
.phone-cta-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 1px;
}
.phone-cta-sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .65);
  font-weight: 500;
}

/* In-app: section heading */
.phone-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B7B96;
  padding: 4px 6px 2px;
}

/* In-app: order rows */
.phone-order {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(15, 21, 48, .04),
    0 4px 12px -4px rgba(15, 21, 48, .08);
}
.phone-order-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.phone-order-icon-blue   { background: #E8F2FB; color: #2A6FB5; }
.phone-order-icon-amber  { background: #FEF3C7; color: #B45309; }
.phone-order-icon-orange { background: #FFEDD5; color: #C2410C; }
.phone-order-content { flex: 1; min-width: 0; }
.phone-order-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #0F1530;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.phone-order-meta {
  font-size: 10.5px;
  color: #6B7B96;
  font-weight: 500;
}
.phone-order-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #059669;
  background: #D1FAE5;
  padding: 4px 8px;
  border-radius: 999px;
}

/* Order row with price (Firma view) */
.phone-order-price {
  font-size: 13px;
  font-weight: 800;
  color: #0F1530;
  letter-spacing: -0.01em;
}

/* Amber accent for firma avatar */
.phone-app-avatar-amber {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  box-shadow: 0 4px 10px rgba(217, 119, 6, .35);
}

/* ═══════════════════════════════════════════════════════════════════
   SLIDE DESIGN SYSTEM — shared primitives for all four phone screens.
   Every slide uses these so they look like ONE coherent app, not four
   different mockups bolted together.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Slide heading (eyebrow + title) ───────────────────────────────
   The first thing the eye reaches inside any slide. Tight letter
   spacing, generous line-height — feels app-native, not web. */
.slide-heading {
  padding: 2px 4px 4px;
}
.slide-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B7B96;
  margin-bottom: 6px;
}
.slide-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0F1530;
}

/* ─── Generic action button (used on slides 2 & 3) ─────────────── */
.slide-action {
  margin-top: auto;
  text-align: center;
  padding: 13px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2F7AC4 0%, #2A6FB5 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .2) inset,
    0 8px 16px -4px rgba(42, 111, 181, .45);
}

/* ─── Slide 1: "In 3 Schritten" — step cards ──────────────────────
   Numbered cards with subtle hierarchy. The third (active) card
   carries the brand colour so the eye lands on the outcome. */
.step-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(15, 21, 48, .04),
    0 4px 12px -4px rgba(15, 21, 48, .08);
}
.step-num {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #F4F6FB;
  color: #6B7B96;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-body { flex: 1; min-width: 0; }
.step-title {
  font-size: 13px;
  font-weight: 700;
  color: #0F1530;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.step-sub {
  font-size: 11px;
  color: #6B7B96;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.step-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #F4F6FB;
  color: #6B7B96;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-card-active {
  background: linear-gradient(135deg, #2A6FB5 0%, #1F5891 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .15) inset,
    0 12px 24px -6px rgba(42, 111, 181, .5);
}
.step-card-active .step-num,
.step-card-active .step-icon {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}
.step-card-active .step-title { color: #fff; }
.step-card-active .step-sub   { color: rgba(255, 255, 255, .8); }

/* ─── Slide 2: Offer cards ─────────────────────────────────────────
   Three competing offers — one marked as the chosen one. Strong
   pricing typography, calm rest of the row. */
.offer-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(15, 21, 48, .04),
    0 4px 12px -4px rgba(15, 21, 48, .08);
}
.offer-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.offer-avatar-blue    { background: linear-gradient(135deg, #2A6FB5, #1F5891); }
.offer-avatar-emerald { background: linear-gradient(135deg, #10B981, #059669); }
.offer-avatar-amber   { background: linear-gradient(135deg, #F59E0B, #D97706); }
.offer-body { flex: 1; min-width: 0; }
.offer-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #0F1530;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.offer-meta {
  font-size: 10.5px;
  color: #6B7B96;
  font-weight: 500;
}
.offer-price {
  font-size: 14px;
  font-weight: 800;
  color: #0F1530;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.offer-card-selected {
  background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%);
  box-shadow:
    0 1px 0 rgba(16, 185, 129, .25) inset,
    0 8px 18px -4px rgba(16, 185, 129, .2);
}
.offer-card-selected .offer-name  { color: #064E3B; }
.offer-card-selected .offer-meta  { color: #047857; }
.offer-card-selected .offer-price { color: #064E3B; }
.offer-pick {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #10B981;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -2px rgba(16, 185, 129, .45);
}

/* ─── Slide 3: KPI tiles + anfrage rows ────────────────────────────
   Two big numbers up top — one light, one inverse — then two
   notification-style rows. Dark tile sells "Umsatz" emotionally. */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kpi-tile {
  background: #fff;
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow:
    0 1px 0 rgba(15, 21, 48, .04),
    0 4px 12px -4px rgba(15, 21, 48, .08);
}
.kpi-tile-num {
  font-size: 22px;
  font-weight: 800;
  color: #0F1530;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 6px;
}
.kpi-tile-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #6B7B96;
  line-height: 1.25;
}
.kpi-tile-dark {
  background: linear-gradient(135deg, #0F1530 0%, #1A2347 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .08) inset,
    0 10px 22px -6px rgba(15, 21, 48, .4);
}
.kpi-tile-dark .kpi-tile-num { color: #fff; font-size: 20px; }
.kpi-tile-label-dark { color: rgba(255, 255, 255, .65); }

.anfrage-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(15, 21, 48, .04),
    0 4px 12px -4px rgba(15, 21, 48, .08);
}
.anfrage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2A6FB5;
  box-shadow: 0 0 0 4px rgba(42, 111, 181, .15);
  flex-shrink: 0;
}
.anfrage-dot-quiet {
  background: #CBD5E1;
  box-shadow: none;
}
.anfrage-body { flex: 1; min-width: 0; }
.anfrage-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #0F1530;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.anfrage-meta {
  font-size: 10.5px;
  color: #6B7B96;
  font-weight: 500;
}
.anfrage-action {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #2A6FB5;
  padding: 7px 11px;
  border-radius: 999px;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 10px -2px rgba(42, 111, 181, .45);
}
.anfrage-action-quiet {
  background: #F4F6FB;
  color: #6B7B96;
  box-shadow: none;
  padding: 7px 12px;
  font-size: 14px;
  line-height: 1;
}

/* ─── Slide 4: Chat — refined, iMessage-precision ─────────────── */
.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid #E6EAF3;
  margin-bottom: 8px;
}
.chat-back {
  font-size: 22px;
  color: #2A6FB5;
  font-weight: 400;
  line-height: 1;
}
.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2A6FB5, #1F5891);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -2px rgba(42, 111, 181, .35);
}
.chat-meta { flex: 1; min-width: 0; }
.chat-name {
  font-size: 13px;
  font-weight: 800;
  color: #0F1530;
  letter-spacing: -0.005em;
  margin-bottom: 1px;
}
.chat-status {
  font-size: 10.5px;
  color: #059669;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.chat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}

.chat-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.chat-day {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #8794AD;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 0 8px;
}
.chat-bubble {
  max-width: 75%;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.4;
  border-radius: 18px;
  letter-spacing: -0.005em;
}
.chat-bubble-them {
  background: #fff;
  color: #0F1530;
  border-bottom-left-radius: 6px;
  align-self: flex-start;
  box-shadow: 0 2px 6px -2px rgba(15, 21, 48, .08);
}
.chat-bubble-you {
  background: linear-gradient(135deg, #2A6FB5 0%, #1F5891 100%);
  color: #fff;
  border-bottom-right-radius: 6px;
  align-self: flex-end;
  box-shadow: 0 4px 12px -4px rgba(42, 111, 181, .4);
}

/* "is typing" indicator — three pulsing dots */
.chat-typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  box-shadow: 0 2px 6px -2px rgba(15, 21, 48, .08);
  margin-top: 2px;
}
.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8794AD;
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

.chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
}
.chat-input-field {
  flex: 1;
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 11.5px;
  color: #8794AD;
  font-weight: 500;
  box-shadow: 0 2px 6px -2px rgba(15, 21, 48, .08);
}
.chat-input-send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2A6FB5, #1F5891);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -2px rgba(42, 111, 181, .45);
}

/* ─── Slide 2: Order detail / timeline ─────────────────────────────── */
.phone-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 4px;
}
.phone-detail-back {
  font-size: 24px;
  font-weight: 400;
  color: #2A6FB5;
  line-height: 1;
}
.phone-detail-title {
  font-size: 15px;
  font-weight: 800;
  color: #0F1530;
  letter-spacing: -0.01em;
}

.phone-handwerker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px -4px rgba(15, 21, 48, .08);
}
.phone-handwerker-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2A6FB5, #5B9BD5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(42, 111, 181, .35);
}
.phone-handwerker-info { flex: 1; min-width: 0; }
.phone-handwerker-name {
  font-size: 13px;
  font-weight: 700;
  color: #0F1530;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.phone-handwerker-meta {
  font-size: 10.5px;
  color: #6B7B96;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}
.phone-stars { color: #D97706; font-weight: 700; }
.phone-handwerker-dot { opacity: 0.4; }
.phone-handwerker-cta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: #2A6FB5;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 10px -2px rgba(42, 111, 181, .45);
}

.phone-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px -4px rgba(15, 21, 48, .08);
}
.phone-timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}
.phone-timeline-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 22px;
  bottom: -16px;
  width: 2px;
  background: #E6EAF3;
}
.phone-timeline-step.phone-timeline-done:not(:last-child)::before { background: #2A6FB5; }
.phone-timeline-bullet {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E6EAF3;
  border: 2px solid #F4F6FB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: transparent;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.phone-timeline-done .phone-timeline-bullet {
  background: #2A6FB5;
  color: #fff;
}
.phone-timeline-active .phone-timeline-bullet {
  background: #fff;
  border: 2px solid #2A6FB5;
  box-shadow: 0 0 0 4px rgba(42, 111, 181, .15);
  animation: pulse-bullet 2s ease-in-out infinite;
}
@keyframes pulse-bullet {
  0%, 100% { box-shadow: 0 0 0 4px rgba(42, 111, 181, .15); }
  50%      { box-shadow: 0 0 0 7px rgba(42, 111, 181, .05); }
}
.phone-timeline-body { padding-top: 1px; }
.phone-timeline-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #0F1530;
  letter-spacing: -0.005em;
  margin-bottom: 1px;
}
.phone-timeline-step:not(.phone-timeline-done):not(.phone-timeline-active) .phone-timeline-title {
  color: #6B7B96;
  font-weight: 600;
}
.phone-timeline-meta {
  font-size: 10.5px;
  color: #6B7B96;
  font-weight: 500;
}

/* ─── Slide 3: Firma KPI dashboard ─────────────────────────────────── */
.phone-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.phone-kpi {
  background: #fff;
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  box-shadow: 0 4px 12px -4px rgba(15, 21, 48, .08);
}
.phone-kpi-num {
  font-size: 22px;
  font-weight: 800;
  color: #0F1530;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.phone-kpi-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6B7B96;
}

/* ─── Slide 4: Chat ────────────────────────────────────────────────── */
.phone-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 8px;
  border-bottom: 1px solid #E6EAF3;
  margin-bottom: 6px;
}
.phone-chat-back {
  font-size: 22px;
  color: #2A6FB5;
  font-weight: 400;
  line-height: 1;
}
.phone-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2A6FB5, #5B9BD5);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(42, 111, 181, .35);
}
.phone-chat-info { flex: 1; min-width: 0; }
.phone-chat-name {
  font-size: 13px;
  font-weight: 800;
  color: #0F1530;
  letter-spacing: -0.005em;
}
.phone-chat-status {
  font-size: 10.5px;
  color: #059669;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}
.phone-chat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}

.phone-chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.phone-chat-day {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #8794AD;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 0 6px;
}

.phone-bubble {
  max-width: 78%;
  padding: 9px 13px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 16px;
  color: #0F1530;
  word-wrap: break-word;
}
.phone-bubble-them {
  background: #fff;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  box-shadow: 0 2px 6px -2px rgba(15, 21, 48, .08);
}
.phone-bubble-you {
  background: linear-gradient(135deg, #2A6FB5, #1F5891);
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
  box-shadow: 0 4px 12px -4px rgba(42, 111, 181, .4);
}
.phone-chat-read {
  align-self: flex-end;
  font-size: 9.5px;
  color: #8794AD;
  font-weight: 500;
  margin-top: 2px;
}

.phone-chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
}
.phone-chat-input-field {
  flex: 1;
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 11.5px;
  color: #8794AD;
  font-weight: 500;
  box-shadow: 0 2px 6px -2px rgba(15, 21, 48, .08);
}
.phone-chat-input-send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2A6FB5, #1F5891);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -2px rgba(42, 111, 181, .45);
}

/* Responsive — hide phone below 1000px, stack everything cleanly */
@media (max-width: 1000px) {
  .hero-copy { max-width: 100%; }
  .hero-trust { max-width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { justify-content: center; }
}
@media (max-width: 560px) {
  .hero-trust {
    flex-direction: column;
    gap: 14px;
    padding: 18px;
  }
  .hero-trust-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  }
}

/* Reusable glow blob (used in CTA section) */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .55;
  pointer-events: none;
}
.hero-glow-1 { background: #7C3AED; }
.hero-glow-2 { background: #D946EF; }

.badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 4px rgba(52,211,153,.25);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(52,211,153,.25); }
  50%      { box-shadow: 0 0 0 8px rgba(52,211,153,.05); }
}

/* Used inside CTA section (dark backgrounds) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  margin-bottom: 22px;
}
.badge-light {
  background: rgba(124,58,237,.18);
  border-color: rgba(124,58,237,.4);
  color: #E9D5FF;
}

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 14px;
  background: #fff;
  color: #0B1020;
  font-weight: 600;
  transition: transform .15s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.store-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.store-name { font-size: 10px; opacity: .65; text-transform: uppercase; letter-spacing: .5px; }
.store-val { font-size: 15px; font-weight: 700; }
.store-btn-light {
  background: #fff;
  color: #0B1020;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hero-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.hero-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.78);
  font-weight: 600;
  margin-top: 2px;
}
.hero-stat-sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.25);
}


/* ─── Section Heads ────────────────────────────────────────────────── */
.section-head {
  margin-bottom: 56px;
  max-width: 720px;
}
.section-head-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.kicker {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(124,58,237,.1);
  color: var(--violet);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 16px;
}
.section-head h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  color: var(--ink);
}
.section-sub {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.65;
}

/* ─── Service Categories ──────────────────────────────────────────── */
.services {
  padding: 90px 0 80px;
  background: #fff;
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 600px)  { .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 900px)  { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .cat-grid { grid-template-columns: repeat(5, 1fr); } }

.cat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .2s, box-shadow .25s, border-color .2s;
}
.cat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(43, 111, 181, .25);
}
.cat-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cat h3 {
  font-size: 15px;
  font-weight: 800;
  margin: 4px 0 2px;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.cat p {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.5;
}

/* Per-category icon tints */
.cat-blue        { background: #E8F2FB; color: #2A6FB5; }
.cat-amber       { background: #FEF3C7; color: #B45309; }
.cat-orange      { background: #FFEDD5; color: #C2410C; }
.cat-rose        { background: #FFE4E6; color: #BE185D; }
.cat-violet      { background: #EDE9FE; color: #6D28D9; }
.cat-cyan        { background: #CFFAFE; color: #0E7490; }
.cat-emerald     { background: #D1FAE5; color: #047857; }
.cat-red         { background: #FEE2E2; color: #B91C1C; }
.cat-sky         { background: #E0F2FE; color: #0369A1; }
.cat-yellow      { background: #FEF9C3; color: #A16207; }
.cat-lime        { background: #ECFCCB; color: #4D7C0F; }
.cat-teal        { background: #CCFBF1; color: #0F766E; }
.cat-indigo      { background: #E0E7FF; color: #4338CA; }
.cat-orange-warm { background: #FFEDD5; color: #EA580C; }
.cat-zinc        { background: #F4F4F5; color: #52525B; }

/* ─── Two Worlds ──────────────────────────────────────────────────── */
.two-worlds {
  padding: 100px 0;
  background: #fff;
}
.worlds-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .worlds-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
.world {
  background: linear-gradient(180deg, #FAFBFD 0%, #F5F6FA 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.world:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(124,58,237,.2);
}
.world-private { border-top: 4px solid var(--violet); }
.world-pro     { border-top: 4px solid var(--blue); }

.world-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px -8px currentColor;
}
.world-icon-violet {
  background: linear-gradient(135deg, #7C3AED 0%, #D946EF 100%);
  color: #fff;
}
.world-icon-blue {
  background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
  color: #fff;
}

.world h3 {
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  color: var(--ink);
}
.pro-tag {
  display: inline-block;
  vertical-align: middle;
  background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
  color: #fff;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: .04em;
  margin-left: 6px;
}
.world p {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 24px;
  line-height: 1.7;
}
.world-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 16px;
}
.world-pill-violet {
  background: rgba(124,58,237,.12);
  color: var(--violet);
}
.world-pill-blue {
  background: rgba(37,99,235,.12);
  color: var(--blue);
}
.world-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 10px;
}
.world-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
}
.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--violet);
  transition: gap .2s;
}
.link-cta:hover { gap: 10px; }
.link-cta span { transition: transform .2s; }

/* ─── Features Grid ───────────────────────────────────────────────── */
.features {
  padding: 100px 0;
  background: #FAFBFD;
}
.feat-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .feat-grid { grid-template-columns: repeat(3, 1fr); }
}
.feat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform .2s, box-shadow .25s, border-color .2s;
}
.feat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(124,58,237,.2);
}
.feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.feat-icon-violet { background: rgba(124,58,237,.1); color: var(--violet); }
.feat-icon-blue { background: rgba(37,99,235,.1); color: var(--blue); }
.feat-icon-emerald { background: rgba(5,150,105,.1); color: var(--emerald); }
.feat-icon-amber { background: rgba(217,119,6,.1); color: var(--amber); }
.feat-icon-rose { background: rgba(225,29,72,.08); color: var(--rose); }
.feat-icon-zinc { background: rgba(11,16,32,.06); color: var(--ink); }

.feat h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.feat p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.6;
}

/* ─── Stats Strip ─────────────────────────────────────────────────── */
.stats {
  padding: 60px 0;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  text-align: center;
}
@media (min-width: 700px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-num {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--ink);
  background: linear-gradient(135deg, #7C3AED 0%, #D946EF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-mute);
  margin-top: 6px;
}

/* ─── How it works ────────────────────────────────────────────────── */
.how {
  padding: 100px 0;
  background: #FAFBFD;
}
.how-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 800px) {
  .how-grid {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
  }
}
.how-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
  position: relative;
}
.how-num {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED 0%, #D946EF 100%);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(124,58,237,.3);
}
.how-step h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--ink);
}
.how-step p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.6;
}
.how-arrow {
  font-size: 24px;
  color: var(--violet);
  font-weight: 700;
  text-align: center;
  display: none;
}
@media (min-width: 800px) {
  .how-arrow { display: block; }
}

/* ─── CTA ─────────────────────────────────────────────────────────── */
.cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #1A1B3A 0%, #0B1020 100%);
  color: #fff;
  padding: 100px 0;
  text-align: center;
}
.cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cta-bg .hero-glow-1 {
  width: 700px; height: 700px;
  top: -200px; left: -200px;
  opacity: .4;
}
.cta-bg .hero-glow-2 {
  width: 600px; height: 600px;
  bottom: -200px; right: -150px;
  opacity: .35;
}
.cta-inner {
  position: relative;
}
.cta h2 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 14px 0 10px;
  line-height: 1.05;
}
.cta p {
  font-size: 17px;
  color: rgba(255,255,255,.72);
  margin: 0 0 32px;
  line-height: 1.6;
}
.cta .store-buttons {
  justify-content: center;
  margin: 0;
}

/* ─── Footer ──────────────────────────────────────────────────────── */
.footer {
  background: #0B1020;
  color: rgba(255,255,255,.72);
  padding: 64px 0 0;
}
.footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  padding-bottom: 48px;
}
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.footer-brand .brand { color: #fff; }
.footer-tag {
  font-size: 14px;
  margin: 14px 0 0;
  color: rgba(255,255,255,.55);
  max-width: 280px;
  line-height: 1.6;
}
.footer-col h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  margin-bottom: 10px;
  color: rgba(255,255,255,.6);
  transition: color .15s;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding: 24px 0;
  font-size: 12px;
  color: rgba(255,255,255,.45);
  text-align: center;
}

/* ─── Legal pages (impressum, agb, datenschutz, etc.) ─────────────── */
.legal-page {
  background: #FAFBFD;
  min-height: calc(100vh - 68px);
  padding: 56px 0 96px;
}
.legal-page .container {
  max-width: 820px;
}
.legal-paper {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 700px) {
  .legal-paper { padding: 56px 64px; }
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mute);
  margin-bottom: 24px;
  transition: color .15s, transform .15s;
}
.legal-back:hover { color: var(--violet); }
.legal-back:hover .arrow-back { transform: translateX(-3px); }
.arrow-back { transition: transform .15s; display: inline-block; }
.legal-page h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  color: var(--ink);
  line-height: 1.1;
}
.legal-meta {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.legal-page h2 {
  font-size: 20px;
  font-weight: 800;
  margin: 36px 0 12px;
  color: var(--ink);
  letter-spacing: -.01em;
}
.legal-page h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 24px 0 8px;
  color: var(--ink);
}
.legal-page p, .legal-page li {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.75;
}
.legal-page p { margin: 0 0 12px; }
.legal-page ul {
  margin: 8px 0 16px;
  padding-left: 22px;
}
.legal-page li { margin-bottom: 6px; }
.legal-page strong { color: var(--ink); font-weight: 700; }
.legal-page a {
  color: var(--violet);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(124,58,237,.3);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}
.legal-page a:hover { text-decoration-color: var(--violet); }

.contact-box {
  background: #FAFBFD;
  border: 1px solid var(--line);
  border-left: 3px solid var(--violet);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 12px 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.contact-box strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-weight: 700;
}


/* ════════════════════════════════════════════════════════════════════
 *  ╔══════════════════════════════════════════════════════════════╗
 *  ║                                                              ║
 *  ║     EDITORIAL DESIGN LAYER — Anthropic-inspired refresh      ║
 *  ║                                                              ║
 *  ║  This block sits at the END of the stylesheet on purpose so  ║
 *  ║  it overrides every earlier declaration. It re-skins the     ║
 *  ║  whole site with a calm, editorial aesthetic: warm cream     ║
 *  ║  background, serif headlines, restrained accents, hairline   ║
 *  ║  rules between sections. The iPhone mockup is intentionally  ║
 *  ║  NOT touched — its dark frame contrasts beautifully against  ║
 *  ║  the cream backdrop.                                         ║
 *  ║                                                              ║
 *  ╚══════════════════════════════════════════════════════════════╝
 * ════════════════════════════════════════════════════════════════════ */


/* ─── Palette (warm, editorial, restrained) ─────────────────────── */
:root {
  --paper:        #F5F1E8;   /* warm cream — the page itself          */
  --paper-soft:   #EEE8DA;   /* slightly deeper cream for alt strips  */
  --canvas:       #FFFFFF;   /* card / surface white                  */
  --ink-deep:     #1A1815;   /* warm near-black, used for headings    */
  --ink-body:     #2D2A24;   /* body text                             */
  --ink-muted:    #6B6354;   /* secondary copy, eyebrows              */
  --ink-quiet:    #A39B8C;   /* tertiary copy, captions               */
  --hairline:     rgba(26, 24, 21, 0.10);  /* thin dividing lines     */
  --hairline-soft: rgba(26, 24, 21, 0.06);
  --accent:       #2A6FB5;   /* Fixheim blue — used sparingly         */
  --accent-deep:  #1F5891;
  --accent-soft:  rgba(42, 111, 181, 0.10);
}


/* ─── Global typography reset ──────────────────────────────────── */
body {
  background: var(--paper) !important;
  color: var(--ink-body);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: "ss01", "cv11";
  line-height: 1.6;
}

h1, h2, h3, .hero-title, .section-head h2 {
  font-family: 'Fraunces', 'Source Serif Pro', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink-deep);
  /* Fraunces "soft" axis = rounder, more contemporary terminals */
  font-variation-settings: "SOFT" 50, "opsz" 144;
}


/* ─── Nav header — quieter, more refined ──────────────────────── */
.nav {
  background: rgba(245, 241, 232, 0.85);
  border-bottom: 1px solid var(--hairline-soft);
}
.nav.is-scrolled {
  background: rgba(245, 241, 232, 0.96);
  border-bottom-color: var(--hairline);
  box-shadow: none;
}
.nav-links {
  font-family: 'Inter', sans-serif;
  color: var(--ink-muted);
  font-weight: 500;
}
.nav-links a:hover { color: var(--ink-deep); }
.nav-links a::after { background: var(--ink-deep); }
.nav-cta {
  background: var(--ink-deep) !important;
  color: var(--paper) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  padding: 11px 22px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 4px 14px -2px rgba(26, 24, 21, 0.18) !important;
}
.nav-cta:hover {
  background: #000 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 8px 22px -2px rgba(26, 24, 21, 0.28) !important;
}
.brand { color: var(--ink-deep); }


/* ─── Hero — cream backdrop, serif title, calmer rhythm ──────── */
.hero {
  background: var(--paper) !important;
  color: var(--ink-deep);
  padding: 80px 0 100px;
}
@media (min-width: 900px) { .hero { padding: 120px 0 140px; } }

/* Kill the radial gradient + dot grid — they fight the editorial mood */
.hero-mesh,
.hero-grid { display: none !important; }

.hero-badge {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 14px;
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.04);
  backdrop-filter: none;
}
.badge-dot {
  background: #16A34A;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

/* Serif hero title — the centrepiece */
.hero-title {
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--ink-deep);
}
.hero-title-grad {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--ink-muted);
  font-style: italic;
  font-weight: 400;
}
.hero-sub {
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1.6;
  max-width: 540px;
}
.hero-sub strong { color: var(--ink-deep); }

/* Buttons — calm, sturdy, editorial */
.btn-primary {
  background: var(--ink-deep);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  padding: 14px 28px;
  font-size: 15px;
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 22px -6px rgba(26, 24, 21, 0.25);
}
.btn-primary:hover {
  background: #000;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 14px 32px -8px rgba(26, 24, 21, 0.35);
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-deep);
  font-family: 'Inter', sans-serif;
  backdrop-filter: none;
}
.btn-ghost:hover {
  background: var(--canvas);
  border-color: rgba(26, 24, 21, 0.18);
}

/* Trust strip — editorial chip row */
.hero-trust {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.03);
  backdrop-filter: none;
  padding: 20px 24px;
}
.hero-trust-num { color: var(--ink-deep); font-family: 'Fraunces', serif; font-weight: 600; font-size: 28px; }
.hero-trust-label { color: var(--ink-muted); font-family: 'Inter', sans-serif; }
.hero-trust-divider { background: linear-gradient(180deg, transparent, var(--hairline), transparent); }


/* ─── Section dividers — clean editorial hairline ──────────────
 *
 * No more diamonds, no more glows. Just a single warm hairline
 * that "draws" itself outward when scrolled into view.
 */
.section-divider {
  padding: 80px 0;
  background: var(--paper);
}
@media (min-width: 900px) { .section-divider { padding: 120px 0; } }

.divider-line {
  width: min(80%, 920px);
  background: var(--hairline) !important;
  /* Override the old gradient line entirely */
}
.divider-line::before,
.divider-line::after { display: none; }
.divider-glow { display: none; }
.section-divider::after { display: none; }
.section-divider.is-revealed .divider-line {
  transform: scaleX(1);
}


/* ─── Section heads — editorial rhythm ─────────────────────── */
.section-head {
  margin-bottom: 64px;
}
@media (min-width: 900px) { .section-head { margin-bottom: 96px; } }

.kicker {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--ink-muted);
}

.section-head h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink-deep);
  max-width: 720px;
  margin: 0 0 24px;
  font-variation-settings: "SOFT" 50, "opsz" 144;
}
.section-head-center {
  text-align: center;
}
.section-head-center .kicker {
  display: inline-flex;
}
.section-head-center h2 {
  margin-left: auto;
  margin-right: auto;
}
.section-sub {
  font-family: 'Inter', sans-serif;
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1.6;
  max-width: 580px;
}
.section-head-center .section-sub { margin: 0 auto; }


/* ─── All section backgrounds set to cream ─────────────────── */
.services,
.two-worlds,
.features,
.stats,
.how {
  background: var(--paper) !important;
  padding: 0;
}

/* Inner padding lives on the container instead so dividers
   provide the breathing room consistently */
.services > .container,
.two-worlds > .container,
.features > .container,
.stats > .container,
.how > .container { padding-top: 0; padding-bottom: 0; }


/* ─── Cards — calm, hairline-bordered, soft shadow ───────── */
.cat,
.world,
.feat,
.how-step,
.stat-block {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              border-color 0.25s ease;
}
.cat:hover,
.world:hover,
.feat:hover,
.how-step:hover {
  transform: translateY(-2px);
  border-color: rgba(26, 24, 21, 0.16);
  box-shadow: 0 8px 24px -8px rgba(26, 24, 21, 0.12);
}

/* Card heading typography */
.cat h3,
.world h3,
.feat h3,
.how-step h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-deep);
  font-variation-settings: "SOFT" 50, "opsz" 36;
}
.cat p,
.world p,
.feat p,
.how-step p {
  font-family: 'Inter', sans-serif;
  color: var(--ink-muted);
  line-height: 1.55;
}

/* Category icon background — softer */
.cat-ico {
  background: var(--paper-soft) !important;
}
.cat-blue   { color: var(--accent); }
.cat-amber  { color: #B45309; }
.cat-orange { color: #C2410C; }
.cat-rose   { color: #BE185D; }
.cat-violet { color: #6D28D9; }
.cat-cyan   { color: #0E7490; }
.cat-emerald{ color: #047857; }
.cat-red    { color: #B91C1C; }
.cat-sky    { color: #0369A1; }
.cat-yellow { color: #B45309; }
.cat-lime   { color: #4D7C0F; }
.cat-teal   { color: #0F766E; }
.cat-indigo { color: #4338CA; }
.cat-orange-warm { color: #C2410C; }
.cat-zinc   { color: #52525B; }


/* ─── Stats block — large serif numbers ─────────────────────── */
.stat-block {
  text-align: left;
  padding: 32px 28px;
}
.stat-num {
  font-family: 'Fraunces', serif !important;
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 56px);
  letter-spacing: -0.03em;
  color: var(--ink-deep);
  font-variation-settings: "SOFT" 50, "opsz" 144;
  margin-bottom: 8px;
}
.stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  text-transform: none;
}


/* ─── How-it-works — numbered steps, editorial ────────────── */
.how-step { padding: 32px 28px; }
.how-num {
  font-family: 'Fraunces', serif;
  color: var(--accent);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.how-num::before {
  content: '0';
  opacity: 0.5;
}
.how-arrow {
  color: var(--hairline);
}


/* ─── World cards (Privat / Pro) — editorial 2-column ─────── */
.world {
  padding: 40px 36px;
}
.world h3 {
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.15;
}
.world-pill {
  font-family: 'Inter', sans-serif;
  background: var(--paper-soft) !important;
  color: var(--ink-muted) !important;
  border: 1px solid var(--hairline);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}
.world-icon {
  background: var(--paper-soft) !important;
  color: var(--ink-deep) !important;
  box-shadow: none !important;
}
.link-cta {
  color: var(--ink-deep);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.link-cta:hover { color: var(--accent); }
.check { color: var(--accent); }


/* ─── Feature icons ────────────────────────────────────────── */
.feat-icon {
  background: var(--paper-soft) !important;
  color: var(--ink-deep) !important;
  box-shadow: none !important;
}


/* ─── CTA strip ────────────────────────────────────────────── */
.cta {
  background: var(--ink-deep) !important;
  color: var(--paper);
}
.cta h2 { color: var(--paper); }


/* ─── Footer ───────────────────────────────────────────────── */
.footer {
  background: var(--paper-soft);
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted);
}


/* ─── Reduced-motion safety: ensure everything is visible ──── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .divider-line { transform: scaleX(1) !important; }
}


/* ════════════════════════════════════════════════════════════════════
 *  ╔══════════════════════════════════════════════════════════════╗
 *  ║                                                              ║
 *  ║      PREMIUM PRO DESIGN LAYER — Fixheim Brand Blue           ║
 *  ║                                                              ║
 *  ║  Overrides the editorial cream layer. Targets a polished,    ║
 *  ║  pro-level SaaS look — Stripe / Linear / Vercel-grade —      ║
 *  ║  with Fixheim's blue as the unmissable brand colour.         ║
 *  ║                                                              ║
 *  ║  Design pillars                                              ║
 *  ║   • Clean white canvas, blue-tinted subtle backgrounds       ║
 *  ║   • Generous whitespace, precise spacing scale               ║
 *  ║   • Inter throughout — tight tracking, deliberate weights    ║
 *  ║   • Brand blue used purposefully: CTAs, accents, gradients   ║
 *  ║   • Refined micro-shadows, never heavy                       ║
 *  ║   • Subtle blue-tinted dividers between sections             ║
 *  ║                                                              ║
 *  ╚══════════════════════════════════════════════════════════════╝
 * ════════════════════════════════════════════════════════════════════ */


/* ─── Brand-led palette ─────────────────────────────────────────── */
:root {
  /* Surfaces */
  --pro-page:        #FFFFFF;        /* page canvas — pure white       */
  --pro-tint:        #F7FAFD;        /* faint blue-tinted alt strip    */
  --pro-tint-soft:   #FBFCFE;        /* subtler blue tint              */
  --pro-card:        #FFFFFF;        /* card surface                   */

  /* Text */
  --pro-ink:         #0A1628;        /* deep brand-ink, near-black     */
  --pro-ink-soft:    #2E3D52;        /* secondary heading colour       */
  --pro-ink-muted:   #5B6B82;        /* body grey-blue                 */
  --pro-ink-quiet:   #8A98AE;        /* tertiary captions              */

  /* Brand */
  --pro-blue:        #2A6FB5;        /* Fixheim brand blue             */
  --pro-blue-deep:   #1F5891;        /* hover / pressed                */
  --pro-blue-bright: #3D8AD6;        /* highlight / glow               */
  --pro-blue-soft:   #E8F1FB;        /* tinted backgrounds             */
  --pro-blue-tint:   #F2F7FC;        /* faintest blue wash             */
  --pro-blue-line:   rgba(42, 111, 181, 0.16); /* divider tone        */

  /* Lines / hairlines */
  --pro-line:        #E6ECF4;        /* default neutral hairline       */
  --pro-line-soft:   #F0F4FA;        /* subtler hairline               */

  /* Brand gradients */
  --pro-grad:        linear-gradient(180deg, #3082CC 0%, #2A6FB5 50%, #1F5891 100%);
  --pro-grad-soft:   linear-gradient(180deg, #F7FAFD 0%, #FFFFFF 100%);
}


/* ─── Body — clean white canvas ───────────────────────────────── */
body {
  background: var(--pro-page) !important;
  color: var(--pro-ink) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01" !important;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* All headings — back to Inter, but with precise pro-level setup */
h1, h2, h3, h4,
.hero-title,
.section-head h2,
.cat h3, .world h3, .feat h3, .how-step h3 {
  font-family: 'Inter', sans-serif !important;
  color: var(--pro-ink) !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  font-variation-settings: normal;
}


/* ─── Nav — refined, brand blue CTA ──────────────────────────── */
.nav {
  background: rgba(255, 255, 255, 0.72) !important;
  border-bottom: 1px solid var(--pro-line-soft) !important;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: var(--pro-line) !important;
  box-shadow: 0 1px 0 var(--pro-line-soft), 0 4px 24px rgba(10, 22, 40, 0.04) !important;
}
.brand { color: var(--pro-ink) !important; }
.nav-links { color: var(--pro-ink-muted) !important; }
.nav-links a:hover { color: var(--pro-ink) !important; }
.nav-links a::after { background: var(--pro-blue) !important; }
.nav-cta {
  background: var(--pro-grad) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 8px 22px -6px rgba(42, 111, 181, 0.45) !important;
}
.nav-cta:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 14px 32px -8px rgba(42, 111, 181, 0.55) !important;
}


/* ─── Hero — premium blue with refined gradient ──────────────── */
.hero {
  background: var(--pro-grad) !important;
  color: #fff !important;
  padding: 80px 0 110px !important;
  position: relative;
  overflow: hidden;
}
@media (min-width: 900px) { .hero { padding: 120px 0 140px !important; } }

/* Bring back the mesh glow blobs — they read premium against blue */
.hero-mesh,
.hero-grid { display: block !important; }
.hero-mesh-blob-1 { background: radial-gradient(circle, rgba(124, 183, 240, 0.45) 0%, transparent 70%); }
.hero-mesh-blob-2 { background: radial-gradient(circle, rgba(91, 155, 213, 0.4) 0%, transparent 70%); }
.hero-mesh-blob-3 { background: radial-gradient(circle, rgba(30, 78, 130, 0.4) 0%, transparent 70%); }

.hero-badge {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-transform: none;
  font-size: 12.5px;
  padding: 8px 14px;
  margin-bottom: 28px;
}
.badge-dot { background: #34D399 !important; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.22) !important; }

.hero-title {
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(40px, 5.5vw, 64px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
}
.hero-title-grad {
  background: linear-gradient(180deg, #fff 0%, #C5DCF3 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-style: normal !important;
  font-weight: 800 !important;
}
.hero-sub {
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 400 !important;
}

/* Hero CTAs */
.btn-primary {
  background: #fff !important;
  color: var(--pro-ink) !important;
  font-weight: 600 !important;
  padding: 15px 30px !important;
  font-size: 15px !important;
  box-shadow:
    0 1px 0 rgba(10, 22, 40, 0.08) inset,
    0 14px 32px -6px rgba(10, 22, 40, 0.3),
    0 4px 8px -2px rgba(10, 22, 40, 0.16) !important;
}
.btn-primary:hover {
  box-shadow:
    0 1px 0 rgba(10, 22, 40, 0.08) inset,
    0 20px 40px -6px rgba(10, 22, 40, 0.38),
    0 6px 12px -2px rgba(10, 22, 40, 0.2) !important;
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  color: #fff !important;
  font-weight: 600 !important;
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Trust strip on blue */
.hero-trust {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: none !important;
}
.hero-trust-num {
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 26px !important;
}
.hero-trust-label { color: rgba(255, 255, 255, 0.78) !important; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; }
.hero-trust-divider {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.22), transparent) !important;
}


/* ─── Section dividers — premium animated blue gradient ─────── */
.section-divider {
  padding: 80px 0 !important;
  background: var(--pro-page) !important;
}
@media (min-width: 900px) { .section-divider { padding: 120px 0 !important; } }

.divider-line {
  width: min(80%, 920px) !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--pro-blue-line) 20%,
    var(--pro-blue) 50%,
    var(--pro-blue-line) 80%,
    transparent 100%
  ) !important;
}
.divider-line::before,
.divider-line::after {
  display: block !important;
  background: var(--pro-blue) !important;
  box-shadow: 0 0 0 4px rgba(42, 111, 181, 0.12) !important;
  width: 5px !important;
  height: 5px !important;
}
.divider-glow {
  display: block !important;
  background: radial-gradient(
    ellipse at center,
    rgba(42, 111, 181, 0.18) 0%,
    transparent 60%
  ) !important;
  width: 360px !important;
  max-width: 50% !important;
  height: 50px !important;
  filter: blur(14px) !important;
}
.section-divider::after {
  display: block !important;
  background: #fff !important;
  border: 2px solid var(--pro-blue) !important;
  width: 8px !important;
  height: 8px !important;
  box-shadow:
    0 0 0 5px rgba(42, 111, 181, 0.10),
    0 4px 14px -4px rgba(42, 111, 181, 0.45) !important;
}


/* ─── All white sections ───────────────────────────────────── */
.services,
.two-worlds,
.features,
.stats,
.how {
  background: var(--pro-page) !important;
}


/* ─── Section heads — pro-level type hierarchy ─────────────── */
.section-head { margin-bottom: 56px !important; }
@media (min-width: 900px) { .section-head { margin-bottom: 80px !important; } }

.kicker {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--pro-blue) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
  padding: 6px 12px;
  background: var(--pro-blue-soft);
  border-radius: 999px;
}
.kicker::before { display: none !important; }

.section-head h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(34px, 4vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  color: var(--pro-ink) !important;
  margin: 0 0 18px !important;
}
.section-sub {
  font-family: 'Inter', sans-serif !important;
  color: var(--pro-ink-muted) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  max-width: 580px !important;
  font-weight: 400 !important;
}


/* ─── Cards — premium pro feel ─────────────────────────────── */
.cat,
.world,
.feat,
.how-step,
.stat-block {
  background: var(--pro-card) !important;
  border: 1px solid var(--pro-line) !important;
  box-shadow:
    0 1px 0 rgba(10, 22, 40, 0.02),
    0 1px 2px rgba(10, 22, 40, 0.04) !important;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease !important;
}
.cat:hover,
.world:hover,
.feat:hover,
.how-step:hover {
  transform: translateY(-4px) !important;
  border-color: var(--pro-blue-line) !important;
  box-shadow:
    0 1px 0 rgba(10, 22, 40, 0.02),
    0 14px 32px -10px rgba(42, 111, 181, 0.18),
    0 4px 12px -4px rgba(10, 22, 40, 0.08) !important;
}

.cat h3, .world h3, .feat h3, .how-step h3 {
  color: var(--pro-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}
.cat p, .world p, .feat p, .how-step p {
  color: var(--pro-ink-muted) !important;
  line-height: 1.55 !important;
}


/* ─── Category icons — keep their colours, soften the chips ── */
.cat-ico {
  background: var(--pro-blue-tint) !important;
  border: 1px solid var(--pro-blue-line) !important;
}


/* ─── Stats — large, brand-blue numbers ─────────────────────── */
.stat-block {
  text-align: left !important;
  padding: 32px 28px !important;
}
.stat-num {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(36px, 4vw, 52px) !important;
  letter-spacing: -0.03em !important;
  background: var(--pro-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  margin-bottom: 8px;
}
.stat-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--pro-ink-muted) !important;
  text-transform: none !important;
  letter-spacing: 0.005em !important;
}


/* ─── How — step counters ───────────────────────────────────── */
.how-step { padding: 36px 32px !important; }
.how-num {
  font-family: 'Inter', sans-serif !important;
  color: #fff !important;
  background: var(--pro-grad);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 8px 18px -4px rgba(42, 111, 181, 0.45);
  margin-bottom: 20px;
}
.how-num::before { content: '' !important; }
.how-arrow { color: var(--pro-blue) !important; opacity: 0.4; }


/* ─── World cards (Privat / Pro) ───────────────────────────── */
.world { padding: 44px 40px !important; }
.world h3 { font-size: clamp(28px, 3vw, 36px) !important; line-height: 1.1; }
.world-pill {
  font-family: 'Inter', sans-serif !important;
  background: var(--pro-blue-soft) !important;
  color: var(--pro-blue) !important;
  border: 1px solid var(--pro-blue-line) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}
.world-icon {
  background: var(--pro-grad) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -6px rgba(42, 111, 181, 0.4) !important;
}
.world-icon-violet { background: var(--pro-grad) !important; }
.world-icon-blue   { background: var(--pro-grad) !important; }
.link-cta {
  color: var(--pro-blue) !important;
  font-weight: 700 !important;
}
.link-cta:hover { color: var(--pro-blue-deep) !important; }
.check { color: var(--pro-blue) !important; }


/* ─── Feature icons — brand-blue gradient chip ─────────────── */
.feat-icon {
  background: var(--pro-grad) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -4px rgba(42, 111, 181, 0.4) !important;
}
.feat-icon-violet,
.feat-icon-blue,
.feat-icon-emerald,
.feat-icon-amber,
.feat-icon-rose,
.feat-icon-zinc { background: var(--pro-grad) !important; color: #fff !important; }


/* ─── CTA strip ────────────────────────────────────────────── */
.cta {
  background: var(--pro-grad) !important;
  color: #fff !important;
}
.cta h2 { color: #fff !important; }


/* ─── Footer ───────────────────────────────────────────────── */
.footer {
  background: var(--pro-tint-soft) !important;
  border-top: 1px solid var(--pro-line) !important;
  color: var(--pro-ink-muted) !important;
}


/* ════════════════════════════════════════════════════════════════════
 *  ╔══════════════════════════════════════════════════════════════╗
 *  ║                                                              ║
 *  ║         LUMINA HERO — radiating rings on light canvas        ║
 *  ║                                                              ║
 *  ║  A bright, premium take on the Lunaris reference — adapted   ║
 *  ║  to Fixheim's blue brand. Concentric rings emanate from a    ║
 *  ║  soft blue aura at the top, three floating icon orbs hover   ║
 *  ║  over them, and a centered headline + CTAs anchor the        ║
 *  ║  composition. Everything pulses and drifts subtly so the     ║
 *  ║  page never feels static.                                    ║
 *  ║                                                              ║
 *  ╚══════════════════════════════════════════════════════════════╝
 * ════════════════════════════════════════════════════════════════════ */


/* ─── Refined navigation for the bright hero ─────────────────── */
.nav {
  background: rgba(255, 255, 255, 0.78) !important;
  border-bottom: 1px solid rgba(42, 111, 181, 0.08) !important;
  backdrop-filter: saturate(180%) blur(18px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: rgba(42, 111, 181, 0.12) !important;
  box-shadow: 0 1px 0 rgba(42, 111, 181, 0.04),
              0 10px 30px -10px rgba(10, 22, 40, 0.06) !important;
}
.nav-row { height: 72px !important; }


/* ─── Section frame ──────────────────────────────────────────── */
.lumina-hero {
  position: relative;
  overflow: hidden;
  min-height: 720px;
  padding: 120px 0 100px;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, #DCEAF8 0%, transparent 65%),
    linear-gradient(180deg, #F2F7FC 0%, #FBFCFE 60%, #FFFFFF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
@media (min-width: 900px) {
  .lumina-hero {
    min-height: 820px;
    padding: 160px 0 140px;
  }
}


/* ─── Aura — soft glow behind the rings ─────────────────────── */
.lumina-aura {
  position: absolute;
  left: 50%;
  top: -160px;
  width: 880px;
  max-width: 110%;
  height: 880px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle at center,
    rgba(42, 111, 181, 0.28) 0%,
    rgba(124, 183, 240, 0.16) 30%,
    transparent 70%
  );
  filter: blur(40px);
  z-index: 0;
  animation: lumina-aura-breathe 8s ease-in-out infinite;
}
@keyframes lumina-aura-breathe {
  0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.06); }
}


/* ─── Concentric rings ──────────────────────────────────────── */
.lumina-rings {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}
.lumina-ring {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(42, 111, 181, 0.18);
  background: radial-gradient(
    circle at center,
    rgba(42, 111, 181, 0.04) 0%,
    transparent 70%
  );
  animation: lumina-ring-pulse 6s ease-in-out infinite;
}
/* Each ring slightly larger, slightly fainter — layered glow */
.lumina-ring-1 { width: 360px;  height: 360px;  border-color: rgba(42, 111, 181, 0.32); animation-delay: 0s;    }
.lumina-ring-2 { width: 560px;  height: 560px;  border-color: rgba(42, 111, 181, 0.24); animation-delay: 0.8s;  }
.lumina-ring-3 { width: 780px;  height: 780px;  border-color: rgba(42, 111, 181, 0.18); animation-delay: 1.6s;  }
.lumina-ring-4 { width: 1020px; height: 1020px; border-color: rgba(42, 111, 181, 0.12); animation-delay: 2.4s;  }
.lumina-ring-5 { width: 1280px; height: 1280px; border-color: rgba(42, 111, 181, 0.07); animation-delay: 3.2s;  }

@keyframes lumina-ring-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1;   }
  50%      { transform: translate(-50%, -50%) scale(1.025); opacity: 0.7; }
}


/* ─── Floating icon orbs ────────────────────────────────────── */
.lumina-orbs {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.lumina-orb {
  position: absolute;
  left: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F0F5FB 100%);
  border: 1px solid rgba(42, 111, 181, 0.18);
  color: #2A6FB5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 16px -2px rgba(42, 111, 181, 0.22),
    0 12px 32px -8px rgba(42, 111, 181, 0.18);
  backdrop-filter: blur(4px);
}
.lumina-orb svg { width: 22px; height: 22px; }

/* Position each orb relative to the centred ring stack */
/* Top centre */
/* OLD per-orb positioning + float animations — disabled because
   they fight the v5 orbit animation. The v5 selector
   `.lumina-orbs .lumina-orb` has higher specificity and runs the
   orbit, but these direct rules previously interfered. */
.lumina-orb-bolt,
.lumina-orb-tool,
.lumina-orb-shield {
  /* All positioning + per-orb animation handled by v5 (end of file) */
  animation: none;
}

/* Subtle float keyframes — each orb has its own rhythm */
@keyframes lumina-orb-float-a {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -8px); }
}
@keyframes lumina-orb-float-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0, -6px); }
}
@keyframes lumina-orb-float-c {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0, -7px); }
}


/* ─── Content stack — centred, narrative ────────────────────── */
.lumina-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 1000px) {
  .lumina-content { margin-top: 60px; }
}

/* Badge */
.lumina-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(42, 111, 181, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1F5891;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04);
  margin-bottom: 28px;
}
.lumina-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
  animation: lumina-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes lumina-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.06); }
}

/* Title — bold, with a brand-blue gradient on the second line */
.lumina-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(38px, 5.4vw, 64px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #0A1628;
  margin: 0 0 22px;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
}
.lumina-title-glow {
  background: linear-gradient(180deg, #3D8AD6 0%, #2A6FB5 60%, #1F5891 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 24px rgba(42, 111, 181, 0.25));
}

/* Sub */
.lumina-sub {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #5B6B82;
  max-width: 540px;
  margin: 0 auto 36px;
  font-weight: 400;
}

/* Actions */
.lumina-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.lumina-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3082CC 0%, #2A6FB5 50%, #1F5891 100%);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 12px 28px -6px rgba(42, 111, 181, 0.5),
    0 4px 10px -2px rgba(42, 111, 181, 0.3);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease;
}
.lumina-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 18px 38px -8px rgba(42, 111, 181, 0.6),
    0 6px 14px -2px rgba(42, 111, 181, 0.36);
}
.lumina-cta-primary:active { transform: translateY(0); }
.lumina-cta-primary svg { display: block; }

.lumina-cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(42, 111, 181, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #1F5891;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.03);
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.18s ease;
}
.lumina-cta-secondary:hover {
  background: #fff;
  border-color: rgba(42, 111, 181, 0.35);
  transform: translateY(-1px);
}


/* ─── Responsive — keep the rings centred, scale icons down ─── */
@media (max-width: 900px) {
  .lumina-ring-4,
  .lumina-ring-5 { display: none; }
  .lumina-orb-tool   { margin-left: -200px; top: 180px; }
  .lumina-orb-shield { margin-left: 144px;  top: 180px; }
  .lumina-orb        { width: 48px; height: 48px; }
  .lumina-orb svg    { width: 18px; height: 18px; }
  .lumina-aura       { width: 600px; height: 600px; top: -100px; }
}
@media (max-width: 560px) {
  .lumina-orb-tool   { margin-left: -130px; top: 150px; }
  .lumina-orb-shield { margin-left: 80px;  top: 150px; }
  .lumina-orb        { width: 44px; height: 44px; }
  .lumina-orb svg    { width: 16px; height: 16px; }
  .lumina-ring-1 { width: 260px;  height: 260px; }
  .lumina-ring-2 { width: 400px;  height: 400px; }
  .lumina-ring-3 { width: 560px;  height: 560px; }
  .lumina-hero   { padding: 90px 0 70px; min-height: 620px; }
}


/* ─── Respect reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lumina-aura,
  .lumina-ring,
  .lumina-orb-bolt,
  .lumina-orb-tool,
  .lumina-orb-shield,
  .lumina-badge-dot { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
 *  LUMINA HERO — REFINEMENTS
 *  Larger orbs with finer shadows, tighter type, floating sparkle dots,
 *  and a quieter background mix. Reads more premium / less busy.
 * ════════════════════════════════════════════════════════════════════ */

/* Quieter, slightly cooler page-top background */
.lumina-hero {
  padding: 130px 0 120px !important;
  background:
    radial-gradient(ellipse 70% 55% at 50% -8%, rgba(124, 183, 240, 0.32) 0%, transparent 60%),
    linear-gradient(180deg, #F4F8FC 0%, #FBFCFE 55%, #FFFFFF 100%) !important;
}
@media (min-width: 900px) {
  .lumina-hero { padding: 170px 0 150px !important; min-height: 860px !important; }
}

/* Refined orb — softer, slightly larger, finer ring-light edge */
.lumina-orb {
  width: 64px !important;
  height: 64px !important;
  border: 1px solid rgba(42, 111, 181, 0.16) !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.96) 0%, rgba(247, 251, 255, 0.92) 60%, rgba(232, 241, 251, 0.9) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 5px rgba(255, 255, 255, 0.55),
    0 12px 30px -6px rgba(42, 111, 181, 0.22),
    0 22px 50px -16px rgba(42, 111, 181, 0.18) !important;
}
.lumina-orb svg { width: 24px !important; height: 24px !important; stroke-width: 1.8 !important; }

/* Slightly larger spread between orbs on desktop */
@media (min-width: 1000px) {
  .lumina-orb-bolt   { top: 96px !important; }
  .lumina-orb-tool   { top: 230px !important; margin-left: -340px !important; }
  .lumina-orb-shield { top: 230px !important; margin-left: 276px !important; }
}

/* Floating sparkle dots — small light specks scattered between the
   rings. Pure CSS, no extra DOM. They give the same "lit space"
   quality the Lunaris reference has. */
.lumina-rings::before,
.lumina-rings::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 2px rgba(42, 111, 181, 0.18),
    0 0 14px rgba(42, 111, 181, 0.35);
  pointer-events: none;
}
.lumina-rings::before {
  width: 5px; height: 5px;
  left: 50%; top: 60px;
  margin-left: -170px;
  animation: lumina-spark-a 4s ease-in-out infinite;
}
.lumina-rings::after {
  width: 4px; height: 4px;
  left: 50%; top: 130px;
  margin-left: 200px;
  animation: lumina-spark-b 5s ease-in-out infinite;
}
@keyframes lumina-spark-a {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-4px); }
}
@keyframes lumina-spark-b {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-3px); }
}

/* Title — tighter, larger, more confident */
.lumina-title {
  font-size: clamp(40px, 5.8vw, 70px) !important;
  letter-spacing: -0.038em !important;
  line-height: 1.02 !important;
  margin-bottom: 26px !important;
}

/* Sub — slightly larger, calmer */
.lumina-sub {
  font-size: 18px !important;
  line-height: 1.6 !important;
  max-width: 520px !important;
  margin-bottom: 40px !important;
}

/* Reduced motion respects */
@media (prefers-reduced-motion: reduce) {
  .lumina-rings::before,
  .lumina-rings::after { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
 *  MINIMAL SECTION SEPARATION
 *  Replaces the heavy animated divider with a calm two-part marker:
 *  a single 1px hairline, then a small numbered eyebrow above the
 *  section title (rendered via CSS counter, no markup changes needed).
 * ════════════════════════════════════════════════════════════════════ */

/* Hide the old elaborate divider visuals. We keep the .section-divider
   element itself (it carries the IntersectionObserver hooks) but turn
   it into a calm hairline + breathing space. */
.section-divider {
  padding: 60px 0 !important;
  background: transparent !important;
}
@media (min-width: 900px) {
  .section-divider { padding: 96px 0 !important; }
}

.section-divider .divider-glow { display: none !important; }
.section-divider::after        { display: none !important; }
.divider-line::before,
.divider-line::after           { display: none !important; }

/* Pure hairline — single 1px line, brand-tinted but very subtle */
.divider-line {
  width: min(80%, 920px) !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 111, 181, 0.18) 50%,
    transparent 100%
  ) !important;
  border: none !important;
}

/* Auto-numbered section eyebrows.
   The body acts as the counter scope; each .section-divider increments
   it and the next sibling section reads the count via .section-head::before.
   This gives every section a small "01 — Kategorien"-style marker
   without any HTML changes. */
body { counter-reset: lumina-section; }
.section-divider { counter-increment: lumina-section; }
.services > .container > .section-head::before,
.two-worlds > .container > .section-head::before,
.features > .container > .section-head::before,
.how > .container > .section-head::before {
  content: counter(lumina-section, decimal-leading-zero);
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #2A6FB5;
  background: transparent;
  margin-bottom: 14px;
  padding: 0;
  position: relative;
}
.services > .container > .section-head::before,
.features > .container > .section-head::before,
.how > .container > .section-head::before {
  /* Centered sections get a centered counter */
  display: block;
  text-align: center;
}
.two-worlds > .container > .section-head::before {
  display: block;
  text-align: left;
}


/* ════════════════════════════════════════════════════════════════════
 *  LUMINA HERO v2 — centred rings, 6 orbiting icons, modern dividers
 *
 *  • Rings now form full circles centred on the headline (not arcs
 *    hanging from the top of the section).
 *  • Six floating icon orbs distributed around the central content
 *    using transform: rotate() + translate() — clean clock-face layout.
 *  • Each orb has its own delay so the float animation never syncs.
 *  • Section dividers get a single centred dot accent + animated gleam.
 * ════════════════════════════════════════════════════════════════════ */


/* ─── Ring stack — centred on hero ────────────────────────── */
.lumina-rings {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Override the earlier "top: 0" rings so each ring is a FULL circle
   centred on the hero's vertical centre. */
.lumina-ring {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background: radial-gradient(
    circle at center,
    rgba(42, 111, 181, 0.015) 0%,
    transparent 70%
  ) !important;
  animation: lumina-ring-pulse-v2 6s ease-in-out infinite !important;
}
.lumina-ring-1 { width: 320px;  height: 320px;  border-color: rgba(42, 111, 181, 0.32) !important; animation-delay: 0s   !important; }
.lumina-ring-2 { width: 500px;  height: 500px;  border-color: rgba(42, 111, 181, 0.22) !important; animation-delay: 0.8s !important; }
.lumina-ring-3 { width: 700px;  height: 700px;  border-color: rgba(42, 111, 181, 0.15) !important; animation-delay: 1.6s !important; }
.lumina-ring-4 { width: 920px;  height: 920px;  border-color: rgba(42, 111, 181, 0.10) !important; animation-delay: 2.4s !important; }
.lumina-ring-5 { width: 1180px; height: 1180px; border-color: rgba(42, 111, 181, 0.06) !important; animation-delay: 3.2s !important; }

@keyframes lumina-ring-pulse-v2 {
  0%, 100% { transform: translate(-50%, -50%) scale(1);     opacity: 1;   }
  50%      { transform: translate(-50%, -50%) scale(1.02);  opacity: 0.6; }
}

/* Re-position aura to match the centred ring stack */
.lumina-aura {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 760px !important;
  height: 760px !important;
}
@keyframes lumina-aura-breathe {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1);    }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}


/* ─── Reset old sparkles (they were anchored to the top edge) ─ */
.lumina-rings::before,
.lumina-rings::after { display: none !important; }


/* ─── Six floating orbs — clock-face layout around centre ──── */
.lumina-orbs {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Reset position overrides from v1 — every orb is now placed via
   a translate offset from the centred origin. */
.lumina-orb {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.98) 0%, rgba(247, 251, 255, 0.94) 55%, rgba(232, 241, 251, 0.88) 100%) !important;
  border: 1px solid rgba(42, 111, 181, 0.18) !important;
  color: #2A6FB5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 4px rgba(255, 255, 255, 0.5),
    0 10px 26px -4px rgba(42, 111, 181, 0.24),
    0 22px 52px -16px rgba(42, 111, 181, 0.2) !important;

  /* Animation runs forever, but uses the per-orb --orb-delay so they
     stagger naturally. transform-origin is centred and the keyframes
     handle the float. */
  /* animation: lumina-orb-bob ... ← disabled, replaced by v5 orbit */
  /* animation-delay: var(--orb-delay, 0s); */
}
.lumina-orb svg { width: 24px !important; height: 24px !important; }

/* Position each orb around an invisible orbital ring.
   Mid orbit radius = 260px on desktop; clock positions in degrees:
     12 o'clock = 0deg (top)
     2 o'clock  = 60deg
     4 o'clock  = 120deg
     6 o'clock  = 180deg (bottom)
     8 o'clock  = 240deg
     10 o'clock = 300deg
   We rotate, translate out, then rotate back so the orb stays upright. */
.lumina-orb-bolt     { --orbit: 0deg;   }   /* 12 o'clock */
.lumina-orb-shield   { --orbit: 60deg;  }   /* 2  o'clock */
.lumina-orb-calendar { --orbit: 120deg; }   /* 4  o'clock */
.lumina-orb-star     { --orbit: 180deg; }   /* 6  o'clock */
.lumina-orb-chat     { --orbit: 240deg; }   /* 8  o'clock */
.lumina-orb-tool     { --orbit: 300deg; }   /* 10 o'clock */

/* Old static transform — disabled. The v5 orbit animation now owns
   transform on .lumina-orb. Kept as comment for reference.
.lumina-orb {
  transform: translate(-50%, -50%)
             rotate(var(--orbit))
             translateY(-260px)
             rotate(calc(-1 * var(--orbit))) !important;
}
*/

/* Float keyframes: each orb pulses up and down within its placed slot.
   We apply the float OVER the placement transform via an extra layer:
   wrap the SVG inside the orb. (We don't — instead we re-declare the
   full transform here using the orbit + a Y nudge, which keeps things
   simple and css-only.) */
@keyframes lumina-orb-bob {
  0%, 100% {
    transform: translate(-50%, -50%)
               rotate(var(--orbit))
               translateY(-260px)
               rotate(calc(-1 * var(--orbit)));
  }
  50% {
    transform: translate(-50%, -50%)
               rotate(var(--orbit))
               translateY(-272px)
               rotate(calc(-1 * var(--orbit)));
  }
}

/* Hover the whole hero, the orbs scale up slightly — sells interactivity */
.lumina-hero:hover .lumina-orb {
  filter: brightness(1.05);
}


/* ─── Responsive — pull the orbit in on smaller screens ────── */
/* OLD responsive transform rules — DISABLED.  The v5 orbit animation
   handles sizing + radius itself at the end of the stylesheet. */
@media (max-width: 1000px) {
  .lumina-ring-4,
  .lumina-ring-5 { display: none !important; }
  .lumina-ring-1 { width: 240px !important; height: 240px !important; }
  .lumina-ring-2 { width: 380px !important; height: 380px !important; }
  .lumina-ring-3 { width: 540px !important; height: 540px !important; }
}
@media (max-width: 640px) {
  .lumina-ring-1 { width: 200px !important; height: 200px !important; }
  .lumina-ring-2 { width: 320px !important; height: 320px !important; }
  .lumina-ring-3 { width: 440px !important; height: 440px !important; }
}

/* Hero needs more vertical space now that rings are centred on content */
.lumina-hero {
  min-height: 760px !important;
  padding: 140px 0 130px !important;
}
@media (min-width: 1000px) {
  .lumina-hero { min-height: 880px !important; padding: 180px 0 160px !important; }
}


/* ════════════════════════════════════════════════════════════════════
 *  REFINED SECTION DIVIDERS — clean + modern
 *  A single horizontal hairline that "gleams" — a small bright spot
 *  travels left to right across the line when scrolled into view.
 *  Plus a small centred Fixheim-blue dot anchoring the centre.
 * ════════════════════════════════════════════════════════════════════ */

.section-divider {
  padding: 70px 0 !important;
  background: transparent !important;
  position: relative !important;
}
@media (min-width: 900px) {
  .section-divider { padding: 110px 0 !important; }
}

.divider-line {
  position: relative !important;
  width: min(76%, 860px) !important;
  height: 1px !important;
  margin: 0 auto !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 111, 181, 0.06) 18%,
    rgba(42, 111, 181, 0.28) 50%,
    rgba(42, 111, 181, 0.06) 82%,
    transparent 100%
  ) !important;
  overflow: visible !important;
}

/* Centred dot — anchors the line visually */
.divider-line::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1.5px solid #2A6FB5 !important;
  transform: translate(-50%, -50%) scale(0) !important;
  box-shadow:
    0 0 0 5px rgba(42, 111, 181, 0.08),
    0 4px 12px -2px rgba(42, 111, 181, 0.35) !important;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s !important;
}
.section-divider.is-revealed .divider-line::before {
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Gleam — a small bright spot travels along the line */
.divider-line::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 80px !important;
  height: 1px !important;
  transform: translate(-100%, -50%) !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(124, 183, 240, 0.9) 50%,
    transparent 100%
  ) !important;
  opacity: 0 !important;
  transition: none !important;
}
.section-divider.is-revealed .divider-line::after {
  animation: lumina-gleam 2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s 1 forwards !important;
}
@keyframes lumina-gleam {
  0%   { transform: translate(-100%, -50%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(calc(min(76vw, 860px) + 100%), -50%); opacity: 0; }
}

/* Hide leftover decorations from earlier layers */
.section-divider .divider-glow { display: none !important; }
.section-divider::after { display: none !important; }


/* Reduced-motion respects */
@media (prefers-reduced-motion: reduce) {
  .lumina-orb { animation: none !important; }
  .divider-line::after { display: none !important; }
  .section-divider.is-revealed .divider-line::before { transform: translate(-50%, -50%) scale(1) !important; transition: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
 *  LUMINA HERO v3 — orb layout fix
 *
 *  v2 placed orbs on a circular orbit at radius 260px. That happened
 *  to sit INSIDE the headline column (max-width ~720px ÷ 2 = 360px),
 *  so icons overlapped the text. v3 fixes this with an elliptical
 *  orbit: wider horizontally than tall. The icons now sit clearly
 *  OUTSIDE the text and on top of the visible rings.
 *
 *  Horizontal radius: 440px (clears any text up to ~880px wide)
 *  Vertical radius:   240px (keeps top/bottom icons inside the hero)
 * ════════════════════════════════════════════════════════════════════ */


/* Each orb gets explicit X / Y coordinates as CSS custom properties.
   That keeps positions readable and easy to tune per breakpoint. */
.lumina-orb-bolt     { --orb-x:    0px; --orb-y: -240px; }   /* 12 */
.lumina-orb-shield   { --orb-x:  381px; --orb-y: -120px; }   /*  2 */
.lumina-orb-calendar { --orb-x:  381px; --orb-y:  120px; }   /*  4 */
.lumina-orb-star     { --orb-x:    0px; --orb-y:  240px; }   /*  6 */
.lumina-orb-chat     { --orb-x: -381px; --orb-y:  120px; }   /*  8 */
.lumina-orb-tool     { --orb-x: -381px; --orb-y: -120px; }   /* 10 */

/* DISABLED — v5 orbit animation owns transform on .lumina-orb.
.lumina-orb {
  transform: translate(-50%, -50%)
             translate(var(--orb-x), var(--orb-y)) !important;
}
*/

@keyframes lumina-orb-bob {
  0%, 100% {
    transform: translate(-50%, -50%)
               translate(var(--orb-x), var(--orb-y));
  }
  50% {
    transform: translate(-50%, -50%)
               translate(var(--orb-x), calc(var(--orb-y) - 10px));
  }
}


/* Make rings expand outward so they sit BEHIND the orbs, not in
   front of them. Each ring now passes through one ring of orbs. */
.lumina-ring-1 { width: 380px  !important; height: 380px  !important; border-color: rgba(42, 111, 181, 0.30) !important; }
.lumina-ring-2 { width: 580px  !important; height: 580px  !important; border-color: rgba(42, 111, 181, 0.22) !important; }
.lumina-ring-3 { width: 800px  !important; height: 800px  !important; border-color: rgba(42, 111, 181, 0.14) !important; }
.lumina-ring-4 { width: 1040px !important; height: 1040px !important; border-color: rgba(42, 111, 181, 0.09) !important; }
.lumina-ring-5 { width: 1320px !important; height: 1320px !important; border-color: rgba(42, 111, 181, 0.05) !important; }


/* ─── Responsive — tighter ellipse on smaller screens ──────── */

@media (max-width: 1000px) {
  /* Vertical radius shrinks more than horizontal so icons stay off the text */
  .lumina-orb-bolt     { --orb-x:    0px; --orb-y: -200px; }
  .lumina-orb-shield   { --orb-x:  280px; --orb-y: -100px; }
  .lumina-orb-calendar { --orb-x:  280px; --orb-y:  100px; }
  .lumina-orb-star     { --orb-x:    0px; --orb-y:  200px; }
  .lumina-orb-chat     { --orb-x: -280px; --orb-y:  100px; }
  .lumina-orb-tool     { --orb-x: -280px; --orb-y: -100px; }

  @keyframes lumina-orb-bob {
    0%, 100% { transform: translate(-50%, -50%) translate(var(--orb-x), var(--orb-y)); }
    50%      { transform: translate(-50%, -50%) translate(var(--orb-x), calc(var(--orb-y) - 8px)); }
  }

  .lumina-ring-1 { width: 280px  !important; height: 280px  !important; }
  .lumina-ring-2 { width: 430px  !important; height: 430px  !important; }
  .lumina-ring-3 { width: 600px  !important; height: 600px  !important; }
  .lumina-ring-4 { display: none !important; }
  .lumina-ring-5 { display: none !important; }
}

@media (max-width: 700px) {
  /* On phones the side orbs sit just outside the title; the 6 o'clock
     star moves up so it doesn't collide with the CTAs. */
  .lumina-orb-bolt     { --orb-x:    0px; --orb-y: -170px; }
  .lumina-orb-shield   { --orb-x:  170px; --orb-y:  -60px; }
  .lumina-orb-calendar { --orb-x:  170px; --orb-y:   60px; }
  .lumina-orb-star     { display: none; }   /* skip bottom orb on phones */
  .lumina-orb-chat     { --orb-x: -170px; --orb-y:   60px; }
  .lumina-orb-tool     { --orb-x: -170px; --orb-y:  -60px; }

  .lumina-orb { width: 50px !important; height: 50px !important; }
  .lumina-orb svg { width: 20px !important; height: 20px !important; }

  .lumina-ring-1 { width: 220px !important; height: 220px !important; }
  .lumina-ring-2 { width: 340px !important; height: 340px !important; }
  .lumina-ring-3 { width: 460px !important; height: 460px !important; }
}


/* Content stays comfortably inside the orbit ring */
.lumina-content {
  max-width: 720px !important;
}

/* The hero needs enough height for the ±240px vertical ellipse to
   fit comfortably above/below the content. */
.lumina-hero {
  min-height: 820px !important;
  padding: 160px 0 140px !important;
}
@media (min-width: 1000px) {
  .lumina-hero { min-height: 920px !important; padding: 180px 0 160px !important; }
}


/* ════════════════════════════════════════════════════════════════════
 *  CATEGORY DECK — stacked cards with click-to-fan animation
 *
 *  Each `.cat` card is rendered as a deck of three:
 *    • Main card  (the actual element)
 *    • Phantom 2  (::before — slightly offset back-right)
 *    • Phantom 1  (::after  — slightly offset back-left)
 *
 *  Phantoms are pure CSS pseudo-elements — no extra HTML needed.
 *  On click (toggled via JS adding `is-open`), the phantoms fan
 *  outward and tilt; the front card lifts subtly. Click again to
 *  collapse. Inspired by the "deck of cards" reference.
 * ════════════════════════════════════════════════════════════════════ */


/* Grid spacing — give each deck room to "breathe" when fanned out */
.cat-grid {
  gap: 32px 24px !important;
  perspective: 1200px;
}

.cat {
  position: relative;
  z-index: 1;
  /* The card itself stays clean; phantoms live underneath */
  padding: 28px 24px !important;
  border-radius: 22px !important;
  cursor: pointer;
  transform-style: preserve-3d;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* The two phantom cards behind the front card.
   We use neutral white surfaces with a subtle border so the stack
   reads as "more of the same" rather than as decoration. */
.cat::before,
.cat::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pro-card, #ffffff);
  border: 1px solid var(--pro-line, #E6ECF4);
  box-shadow: 0 1px 0 rgba(10, 22, 40, 0.02);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease;
  pointer-events: none;
}

/* Phantom 1 — back-left, slightly rotated */
.cat::after {
  z-index: -1;
  transform: translate(-6px, 6px) rotate(-2deg);
  opacity: 0.85;
}

/* Phantom 2 — back-right, slightly more rotated */
.cat::before {
  z-index: -2;
  transform: translate(6px, 10px) rotate(2.5deg);
  opacity: 0.55;
}


/* Hover — phantoms peek a little further out (gentle invitation) */
.cat:hover::after  { transform: translate(-10px, 8px) rotate(-3deg); }
.cat:hover::before { transform: translate(10px, 14px) rotate(4deg); }
.cat:hover {
  transform: translateY(-3px) !important;
}


/* Open state — phantoms fan out dramatically, front card lifts */
.cat.is-open {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow:
    0 1px 0 rgba(10, 22, 40, 0.04),
    0 30px 60px -20px rgba(42, 111, 181, 0.35),
    0 12px 24px -8px rgba(10, 22, 40, 0.12) !important;
  border-color: rgba(42, 111, 181, 0.35) !important;
  z-index: 10;
}
.cat.is-open::after {
  transform: translate(-58px, 24px) rotate(-9deg);
  opacity: 0.95;
  box-shadow: 0 18px 32px -12px rgba(42, 111, 181, 0.22) !important;
}
.cat.is-open::before {
  transform: translate(58px, 28px) rotate(9deg);
  opacity: 0.85;
  box-shadow: 0 18px 32px -12px rgba(42, 111, 181, 0.18) !important;
}

/* When open, show a small "expand chevron" on the front card */
.cat::marker { content: ''; }

/* On open, the icon chip gets a subtle brand glow */
.cat.is-open .cat-ico {
  background: linear-gradient(135deg, #E8F1FB 0%, #C5DCF3 100%) !important;
  box-shadow: 0 6px 14px -2px rgba(42, 111, 181, 0.25);
}


/* Accessibility — focus ring respects design language */
.cat:focus-visible {
  outline: none;
  box-shadow:
    0 1px 0 rgba(10, 22, 40, 0.04),
    0 0 0 4px rgba(42, 111, 181, 0.18),
    0 14px 32px -10px rgba(42, 111, 181, 0.18) !important;
}


/* Reduced motion — show flat cards, no fan animation */
@media (prefers-reduced-motion: reduce) {
  .cat::before,
  .cat::after,
  .cat,
  .cat.is-open,
  .cat.is-open::before,
  .cat.is-open::after {
    transition: none !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
 *  CATEGORY MODAL — zoom-in popup on click
 *
 *  Replaces the earlier fan-out interaction with a calm modal that
 *  scales up from the card the user clicked. Backdrop blurs the
 *  page; the panel itself is a premium white card with the icon,
 *  title, full service list, and a download CTA.
 * ════════════════════════════════════════════════════════════════════ */


/* ─── Disable the old fan-out animation entirely ───────────── */
.cat.is-open,
.cat.is-open::before,
.cat.is-open::after {
  transform: none !important;
  z-index: 1 !important;
  border-color: var(--pro-line, #E6ECF4) !important;
  box-shadow:
    0 1px 0 rgba(10, 22, 40, 0.02),
    0 1px 2px rgba(10, 22, 40, 0.04) !important;
  opacity: 1 !important;
}
.cat.is-open .cat-ico { box-shadow: none !important; }


/* Keep the subtle stack appearance from before (one phantom each side) */
.cat:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 1px 0 rgba(10, 22, 40, 0.04),
    0 18px 36px -14px rgba(42, 111, 181, 0.22),
    0 6px 14px -6px rgba(10, 22, 40, 0.08) !important;
  border-color: rgba(42, 111, 181, 0.28) !important;
}


/* ─── Modal container ──────────────────────────────────────── */
.cat-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}
.cat-modal.is-active {
  visibility: visible;
  pointer-events: auto;
}

/* Backdrop — blurred dim layer */
.cat-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 40, 0.45);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-modal.is-active .cat-modal-backdrop { opacity: 1; }

/* Panel — premium card with zoom-from-origin animation */
.cat-modal-panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 480px);
  max-height: 86vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 36px 32px 30px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 50px 100px -30px rgba(10, 22, 40, 0.5),
    0 20px 40px -10px rgba(10, 22, 40, 0.18);
  transform-origin: var(--cat-origin-x, 50%) var(--cat-origin-y, 50%);
  transform: scale(0.42) translateY(20px);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity  0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-modal.is-active .cat-modal-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Close button */
.cat-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: #5B6B82;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cat-modal-close:hover {
  background: #F4F6FB;
  color: #0A1628;
  border-color: rgba(10, 22, 40, 0.08);
}
.cat-modal-close:focus-visible {
  outline: none;
  background: #F4F6FB;
  box-shadow: 0 0 0 3px rgba(42, 111, 181, 0.25);
}

/* Head — icon + titles */
.cat-modal-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  padding-right: 32px; /* leave room for close button */
}
.cat-modal-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
  background: #F2F7FC;
  border: 1px solid rgba(42, 111, 181, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2A6FB5;
  box-shadow: 0 6px 14px -4px rgba(42, 111, 181, 0.18);
}
.cat-modal-icon svg { width: 26px; height: 26px; }
.cat-modal-titles { flex: 1; min-width: 0; }
.cat-modal-title {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0A1628;
  margin: 0 0 4px;
  line-height: 1.15;
}
.cat-modal-sub {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #5B6B82;
  margin: 0;
  line-height: 1.4;
}

/* Divider between head and list */
.cat-modal-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 111, 181, 0.16) 50%,
    transparent 100%
  );
  margin: 0 -8px 22px;
}

/* Services list — small rows with brand-blue check */
.cat-modal-services {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
@media (min-width: 480px) {
  .cat-modal-services { grid-template-columns: 1fr 1fr; gap: 4px 16px; }
}
.cat-modal-services li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #2E3D52;
  letter-spacing: -0.005em;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.cat-modal-services li:hover {
  background: #F4F8FC;
}
.cat-modal-check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #2A6FB5, #1F5891);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px -2px rgba(42, 111, 181, 0.4);
}

/* CTA inside modal */
.cat-modal-cta {
  display: block;
  text-align: center;
  width: 100%;
  padding: 14px 24px;
  border-radius: 14px;
  background: linear-gradient(180deg, #3082CC 0%, #2A6FB5 50%, #1F5891 100%);
  color: #fff !important;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 12px 28px -6px rgba(42, 111, 181, 0.5),
    0 4px 10px -2px rgba(42, 111, 181, 0.28);
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}
.cat-modal-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 18px 38px -8px rgba(42, 111, 181, 0.6),
    0 6px 14px -2px rgba(42, 111, 181, 0.36);
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .cat-modal-panel,
  .cat-modal-backdrop { transition: opacity 0.2s ease !important; transform: none !important; }
}

/* Responsive — full screen on small phones */
@media (max-width: 480px) {
  .cat-modal-panel {
    width: 100%;
    max-width: 100%;
    margin: 0 16px;
    padding: 28px 22px 22px;
  }
  .cat-modal-title { font-size: 20px; }
  .cat-modal-icon { width: 48px; height: 48px; border-radius: 14px; }
  .cat-modal-icon svg { width: 22px; height: 22px; }
}


/* ════════════════════════════════════════════════════════════════════
 *  SECTION DIVIDERS — CLEARLY VISIBLE BUT STILL MINIMAL
 *
 *  Previous version used a faint 1px hairline with low opacity — almost
 *  invisible on the white background. This iteration keeps the design
 *  language clean but makes the divider impossible to miss:
 *
 *    • Two short rules with a centered brand-blue dot
 *    • Stronger opacity, full visibility against white
 *    • Subtle scroll-reveal animation (line extends from centre)
 *    • Generous whitespace above / below
 *
 *  Visual feel: a magazine chapter break.
 * ════════════════════════════════════════════════════════════════════ */


.section-divider {
  padding: 60px 0 !important;
  background: transparent !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (min-width: 900px) {
  .section-divider { padding: 96px 0 !important; }
}


/* The "line" container hosts both rules + the centre node */
.divider-line {
  position: relative !important;
  width: min(78%, 880px) !important;
  height: auto !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  transform: none !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

/* Left line + right line — two solid, clearly-visible bars */
.divider-line::before,
.divider-line::after {
  content: '' !important;
  display: block !important;
  position: static !important;
  flex: 1 !important;
  height: 1.5px !important;
  width: auto !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 111, 181, 0.30) 30%,
    rgba(42, 111, 181, 0.45) 100%
  ) !important;
  border-radius: 2px !important;
  transform: scaleX(0) !important;
  transform-origin: right center !important;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  border: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}
.divider-line::after {
  background: linear-gradient(
    90deg,
    rgba(42, 111, 181, 0.45) 0%,
    rgba(42, 111, 181, 0.30) 70%,
    transparent 100%
  ) !important;
  transform-origin: left center !important;
}

/* Centre node — a brand-blue dot with white core (compass-style marker) */
.divider-line > .divider-node,
.divider-line::marker {
  /* placeholder — actual marker rendered below */
}

/* We add a real centre dot via a span attached by JS… or simpler,
   use the divider-glow element from the existing markup as our dot. */
.section-divider .divider-glow {
  position: static !important;
  display: flex !important;
  width: 12px !important;
  max-width: none !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 2px solid #2A6FB5 !important;
  box-shadow:
    0 0 0 5px rgba(42, 111, 181, 0.10),
    0 4px 12px -2px rgba(42, 111, 181, 0.45) !important;
  filter: none !important;
  transform: scale(0) !important;
  opacity: 1 !important;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s !important;
  flex-shrink: 0 !important;
  pointer-events: none;
}

/* Hide the previous decorative ::after pseudo on the section */
.section-divider::after { display: none !important; }


/* Reveal — both rules extend outward + dot pops in */
.section-divider.is-revealed .divider-line::before {
  transform: scaleX(1) !important;
}
.section-divider.is-revealed .divider-line::after {
  transform: scaleX(1) !important;
}
.section-divider.is-revealed .divider-glow {
  transform: scale(1) !important;
}


/* Reduced motion — show divider statically */
@media (prefers-reduced-motion: reduce) {
  .divider-line::before,
  .divider-line::after { transform: scaleX(1) !important; transition: none !important; }
  .section-divider .divider-glow { transform: scale(1) !important; transition: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
 *  SECTION DIVIDER — final layout fix
 *  The markup has .divider-line and .divider-glow as SIBLINGS inside
 *  .section-divider. We position the dot absolutely over the line so
 *  the visual reads line · dot · line, regardless of source order.
 * ════════════════════════════════════════════════════════════════════ */

.section-divider {
  position: relative !important;
  display: block !important;
  padding: 70px 0 !important;
  text-align: center !important;
}
@media (min-width: 900px) {
  .section-divider { padding: 100px 0 !important; }
}

/* The line wrapper sits centred; ::before and ::after are the two
   visible halves. */
.divider-line {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(78%, 880px) !important;
  height: 20px !important;
  gap: 18px !important;
  margin: 0 auto !important;
  background: transparent !important;
  transform: none !important;
  overflow: visible !important;
}

.divider-line::before,
.divider-line::after {
  content: '' !important;
  position: static !important;
  display: block !important;
  flex: 1 !important;
  height: 1.5px !important;
  width: auto !important;
  border-radius: 2px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 111, 181, 0.30) 30%,
    rgba(42, 111, 181, 0.45) 100%
  ) !important;
  transform: scaleX(0) !important;
  transform-origin: right center !important;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  border: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}
.divider-line::after {
  background: linear-gradient(
    90deg,
    rgba(42, 111, 181, 0.45) 0%,
    rgba(42, 111, 181, 0.30) 70%,
    transparent 100%
  ) !important;
  transform-origin: left center !important;
}

/* Dot — absolutely positioned in the centre of the line area.
   Crucially placed in the SECTION-DIVIDER, not inside the line. */
.section-divider .divider-glow {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 12px !important;
  height: 12px !important;
  max-width: none !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 2px solid #2A6FB5 !important;
  box-shadow:
    0 0 0 5px rgba(42, 111, 181, 0.10),
    0 4px 12px -2px rgba(42, 111, 181, 0.45) !important;
  filter: none !important;
  transform: translate(-50%, -50%) scale(0) !important;
  opacity: 1 !important;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s !important;
  display: block !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Reveal — animate everything in */
.section-divider.is-revealed .divider-line::before {
  transform: scaleX(1) !important;
}
.section-divider.is-revealed .divider-line::after {
  transform: scaleX(1) !important;
}
.section-divider.is-revealed .divider-glow {
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Kill any leftover decorations from older layers */
.section-divider::before,
.section-divider::after { display: none !important; content: none !important; }

@media (prefers-reduced-motion: reduce) {
  .divider-line::before,
  .divider-line::after { transform: scaleX(1) !important; transition: none !important; }
  .section-divider .divider-glow { transform: translate(-50%, -50%) scale(1) !important; transition: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
 *  TWO-WORLDS — premium card + zoom modal
 *
 *  Each card now:
 *    • Has a stronger gradient header strip behind the icon
 *    • Lifts and tilts very subtly on hover (premium feel)
 *    • Shows a "Details ansehen →" hint at the bottom
 *    • Is keyboard-focusable and reads as a button for screen readers
 *
 *  Click → opens a centred modal with full info, zooming from the
 *  card's origin. Same animation grammar as the category modal so
 *  the site feels cohesive.
 * ════════════════════════════════════════════════════════════════════ */


/* ─── World cards — premium polish ───────────────────────────── */
.worlds-grid {
  gap: 32px !important;
}

.world {
  position: relative !important;
  padding: 44px 40px 36px !important;
  background: #fff !important;
  border: 1px solid var(--pro-line, #E6ECF4) !important;
  border-radius: 28px !important;
  box-shadow:
    0 1px 0 rgba(10, 22, 40, 0.02),
    0 1px 2px rgba(10, 22, 40, 0.04) !important;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease !important;
}

/* Subtle brand-blue ambient glow at the top of each card */
.world::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  height: 240px;
  background: radial-gradient(
    ellipse at center,
    rgba(42, 111, 181, 0.16) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.4s ease, transform 0.5s ease;
}
.world-pro::before {
  background: radial-gradient(
    ellipse at center,
    rgba(99, 102, 241, 0.18) 0%,
    transparent 70%
  );
}

.world:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(42, 111, 181, 0.3) !important;
  box-shadow:
    0 1px 0 rgba(10, 22, 40, 0.02),
    0 24px 50px -16px rgba(42, 111, 181, 0.28),
    0 10px 24px -6px rgba(10, 22, 40, 0.08) !important;
}
.world:hover::before {
  opacity: 1.2;
  transform: translateX(-50%) translateY(8px);
}

.world:focus-visible {
  outline: none;
  border-color: rgba(42, 111, 181, 0.4) !important;
  box-shadow:
    0 0 0 4px rgba(42, 111, 181, 0.18),
    0 1px 0 rgba(10, 22, 40, 0.02),
    0 24px 50px -16px rgba(42, 111, 181, 0.28) !important;
}

.world-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3082CC 0%, #1F5891 100%) !important;
  color: #fff !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 22px -6px rgba(42, 111, 181, 0.42) !important;
  margin-bottom: 22px;
}
.world-pro .world-icon {
  background: linear-gradient(135deg, #6366F1 0%, #4338CA 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 22px -6px rgba(99, 102, 241, 0.45) !important;
}

.world-pill {
  display: inline-block;
  background: rgba(42, 111, 181, 0.08) !important;
  border: 1px solid rgba(42, 111, 181, 0.18) !important;
  color: #2A6FB5 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 16px;
}
.world-pro .world-pill {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.22) !important;
  color: #4338CA !important;
}

.world h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(28px, 3vw, 36px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: #0A1628 !important;
  line-height: 1.1 !important;
  margin: 0 0 16px !important;
}
.pro-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #6366F1, #4338CA);
  color: #fff;
  border-radius: 8px;
  font-size: 0.55em;
  vertical-align: middle;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.world p {
  font-family: 'Inter', sans-serif !important;
  color: #5B6B82 !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  margin: 0 0 22px !important;
}

.world-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.world-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: #2E3D52;
  line-height: 1.4;
}
.world-list .check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #2A6FB5, #1F5891);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px -2px rgba(42, 111, 181, 0.35);
}
.world-pro .world-list .check {
  background: linear-gradient(135deg, #6366F1, #4338CA);
  box-shadow: 0 3px 8px -2px rgba(99, 102, 241, 0.35);
}

/* "Details ansehen →" call-out at the bottom of the card */
.world-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #2A6FB5;
  letter-spacing: -0.005em;
  transition: color 0.2s ease, gap 0.2s ease;
}
.world-pro .world-more { color: #4338CA; }
.world:hover .world-more { gap: 10px; }


/* ════════════════════════════════════════════════════════════════════
 *  WORLD MODAL — zoom popup
 * ════════════════════════════════════════════════════════════════════ */

.world-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}
.world-modal.is-active {
  visibility: visible;
  pointer-events: auto;
}

.world-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 40, 0.5);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.world-modal.is-active .world-modal-backdrop { opacity: 1; }

.world-modal-panel {
  position: relative;
  z-index: 1;
  width: min(94vw, 580px);
  max-height: 88vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 28px;
  padding: 40px 36px 32px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 60px 120px -30px rgba(10, 22, 40, 0.55),
    0 24px 50px -10px rgba(10, 22, 40, 0.22);
  transform-origin: var(--world-origin-x, 50%) var(--world-origin-y, 50%);
  transform: scale(0.45) translateY(20px);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity  0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.world-modal.is-active .world-modal-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Theme variant — Pro modal uses indigo accent */
.world-modal-panel[data-world="pro"] .world-modal-icon {
  background: linear-gradient(135deg, #6366F1, #4338CA) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 12px 28px -6px rgba(99, 102, 241, 0.45) !important;
}
.world-modal-panel[data-world="pro"] .world-modal-tag {
  background: rgba(99, 102, 241, 0.1);
  color: #4338CA;
  border-color: rgba(99, 102, 241, 0.22);
}
.world-modal-panel[data-world="pro"] .world-modal-check {
  background: linear-gradient(135deg, #6366F1, #4338CA);
  box-shadow: 0 3px 8px -2px rgba(99, 102, 241, 0.4);
}
.world-modal-panel[data-world="pro"] .world-modal-cta-primary {
  background: linear-gradient(180deg, #818CF8 0%, #6366F1 50%, #4338CA 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 14px 32px -6px rgba(99, 102, 241, 0.5),
    0 4px 10px -2px rgba(99, 102, 241, 0.3);
}

/* Close button */
.world-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: #5B6B82;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.world-modal-close:hover {
  background: #F4F6FB;
  color: #0A1628;
  border-color: rgba(10, 22, 40, 0.08);
}
.world-modal-close:focus-visible {
  outline: none;
  background: #F4F6FB;
  box-shadow: 0 0 0 3px rgba(42, 111, 181, 0.28);
}

/* Hero band — icon + tag + title + sub */
.world-modal-hero {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
  padding-right: 40px;
}
.world-modal-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3082CC 0%, #1F5891 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 12px 28px -6px rgba(42, 111, 181, 0.45);
}
.world-modal-icon svg { width: 30px; height: 30px; }
.world-modal-meta { flex: 1; min-width: 0; padding-top: 2px; }
.world-modal-tag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2A6FB5;
  background: rgba(42, 111, 181, 0.1);
  border: 1px solid rgba(42, 111, 181, 0.18);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.world-modal-title {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0A1628;
  margin: 0 0 4px;
  line-height: 1.1;
}
.world-modal-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #5B6B82;
  letter-spacing: -0.005em;
}

/* Long description */
.world-modal-desc {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #2E3D52;
  margin: 0 0 24px;
}

/* Two-column feature list */
.world-modal-features {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 18px;
}
@media (min-width: 520px) {
  .world-modal-features { grid-template-columns: 1fr 1fr; }
}
.world-modal-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #2E3D52;
  border-radius: 8px;
  line-height: 1.35;
  transition: background 0.15s ease;
}
.world-modal-features li:hover {
  background: #F4F8FC;
}
.world-modal-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #2A6FB5, #1F5891);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px -2px rgba(42, 111, 181, 0.4);
}

/* Pricing strip */
.world-modal-pricing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #5B6B82;
  padding: 12px;
  background: #F4F8FC;
  border-radius: 12px;
  margin-bottom: 22px;
  letter-spacing: -0.005em;
}
.world-modal-pricing::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

/* Actions */
.world-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 520px) {
  .world-modal-actions { flex-direction: row; }
  .world-modal-cta-primary { flex: 1; }
  .world-modal-cta-secondary { flex: 0 0 auto; }
}
.world-modal-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 14px;
  background: linear-gradient(180deg, #3082CC 0%, #2A6FB5 50%, #1F5891 100%);
  color: #fff !important;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 14px 32px -6px rgba(42, 111, 181, 0.5),
    0 4px 10px -2px rgba(42, 111, 181, 0.3);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.world-modal-cta-primary:hover {
  transform: translateY(-2px);
}
.world-modal-cta-secondary {
  padding: 14px 24px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid rgba(42, 111, 181, 0.2);
  color: #2A6FB5;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.world-modal-panel[data-world="pro"] .world-modal-cta-secondary {
  border-color: rgba(99, 102, 241, 0.25);
  color: #4338CA;
}
.world-modal-cta-secondary:hover {
  background: #F4F8FC;
  border-color: rgba(42, 111, 181, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .world-modal-panel,
  .world-modal-backdrop { transition: opacity 0.2s ease !important; transform: none !important; }
}

@media (max-width: 520px) {
  .world-modal-panel { padding: 32px 22px 24px; border-radius: 22px; }
  .world-modal-title { font-size: 22px; }
  .world-modal-icon { width: 52px; height: 52px; border-radius: 14px; }
  .world-modal-icon svg { width: 26px; height: 26px; }
}


/* ════════════════════════════════════════════════════════════════════
 *  FEATURES BENTO — pro-level redesign
 *
 *  Layout: 3-column grid where the first card (Notfall-Modus) spans
 *  two columns AND has a dark premium treatment. Everything else is
 *  a clean white card with hairline border. Each card gets:
 *
 *    • Refined head row (icon + chip)
 *    • Title + body with disciplined hierarchy
 *    • Lift + brand-blue shadow on hover
 *    • Micro-shimmer on the icon when card is hovered
 *
 *  The hero card additionally carries a soft glow blob, brighter
 *  copy, and a stats strip with live-Antwortzeit / Angebote / 24/7.
 * ════════════════════════════════════════════════════════════════════ */


/* ─── Bento grid layout ─────────────────────────────────────── */
.feat-grid-bento {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}
@media (min-width: 700px) {
  .feat-grid-bento {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
  }
  .feat-hero { grid-column: 1 / -1 !important; }
}
@media (min-width: 1000px) {
  .feat-grid-bento {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 24px !important;
  }
  .feat-hero { grid-column: span 2 !important; grid-row: span 1 !important; }
}


/* ─── Standard card — refined ───────────────────────────────── */
.feat {
  position: relative;
  background: #fff !important;
  border: 1px solid var(--pro-line, #E6ECF4) !important;
  border-radius: 22px !important;
  padding: 30px 28px !important;
  box-shadow:
    0 1px 0 rgba(10, 22, 40, 0.02),
    0 1px 2px rgba(10, 22, 40, 0.04) !important;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease !important;
  overflow: hidden;
  isolation: isolate;
}
.feat:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(42, 111, 181, 0.28) !important;
  box-shadow:
    0 1px 0 rgba(10, 22, 40, 0.02),
    0 20px 40px -16px rgba(42, 111, 181, 0.22),
    0 8px 18px -6px rgba(10, 22, 40, 0.08) !important;
}

/* Subtle blue glow seeping from the top-right of every card on hover */
.feat::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle at center,
    rgba(42, 111, 181, 0.0) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
  transition: background 0.4s ease;
}
.feat:hover::before {
  background: radial-gradient(
    circle at center,
    rgba(42, 111, 181, 0.18) 0%,
    transparent 70%
  );
}


/* Head row — icon + chip on a single line */
.feat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

/* Icon — refined blue gradient with sheen */
.feat-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3082CC 0%, #1F5891 100%) !important;
  color: #fff !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 8px 16px -4px rgba(42, 111, 181, 0.38) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.feat:hover .feat-icon {
  transform: scale(1.05);
}
/* Diagonal sheen that sweeps across the icon on hover */
.feat-icon::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -40%;
  width: 60%;
  height: 220%;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 70%
  );
  transform: translateX(-180%) skewX(-12deg);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.feat:hover .feat-icon::after { transform: translateX(280%) skewX(-12deg); }


/* Chip — small caps tag */
.feat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(42, 111, 181, 0.08);
  border: 1px solid rgba(42, 111, 181, 0.16);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2A6FB5;
}
.feat-chip-trust {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.2);
  color: #166534;
  letter-spacing: 0.03em;
}
.feat-chip-live {
  background: rgba(22, 163, 74, 0.15);
  border-color: rgba(22, 163, 74, 0.35);
  color: #fff;
}
.feat-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
  animation: feat-chip-pulse 2.2s ease-in-out infinite;
}
@keyframes feat-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22); }
  50%      { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.06); }
}


/* Title + body */
.feat h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0A1628 !important;
  margin: 0 0 10px !important;
  line-height: 1.2;
}
.feat p {
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #5B6B82 !important;
  margin: 0 !important;
}


/* ─── HERO FEATURE — dark, premium ──────────────────────────── */
.feat-hero {
  background: linear-gradient(180deg, #0F1936 0%, #0A1628 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  padding: 36px 36px 32px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 28px 60px -20px rgba(10, 22, 40, 0.5),
    0 12px 24px -8px rgba(10, 22, 40, 0.25) !important;
}
.feat-hero:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(124, 183, 240, 0.2) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 40px 80px -20px rgba(42, 111, 181, 0.45),
    0 16px 32px -8px rgba(10, 22, 40, 0.4) !important;
}

/* Glow blob behind the hero card content */
.feat-hero-glow {
  position: absolute;
  inset: -40% -20% auto auto;
  width: 80%;
  height: 80%;
  background: radial-gradient(
    circle at center,
    rgba(91, 155, 213, 0.32) 0%,
    rgba(42, 111, 181, 0.12) 35%,
    transparent 70%
  );
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  animation: feat-hero-drift 14s ease-in-out infinite;
}
@keyframes feat-hero-drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-30px, 20px); }
}

/* Override .feat::before for hero card — we already have the glow blob */
.feat-hero::before { display: none; }

/* All hero internals sit ABOVE the glow */
.feat-hero > .feat-head,
.feat-hero > .feat-body,
.feat-hero > .feat-stats { position: relative; z-index: 1; }

/* Hero icon — brighter, bolder */
.feat-hero .feat-icon,
.feat-icon-bright {
  background: linear-gradient(135deg, #5B9BD5 0%, #2A6FB5 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 12px 24px -4px rgba(42, 111, 181, 0.55),
    0 0 0 1px rgba(124, 183, 240, 0.4) inset !important;
  width: 52px !important;
  height: 52px !important;
}
.feat-hero .feat-icon svg { width: 24px; height: 24px; }

/* Hero body */
.feat-hero h3 {
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 12px !important;
  line-height: 1.1;
}
.feat-hero .feat-lead {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #C5DCF3;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  line-height: 1.35;
}
.feat-hero p {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}


/* Hero stats — three live KPI pills */
.feat-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.feat-stat {
  text-align: left;
}
.feat-stat-num {
  font-family: 'Inter', sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
  background: linear-gradient(180deg, #fff 0%, #C5DCF3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.feat-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}


/* ─── Responsive tweaks ─────────────────────────────────────── */
@media (max-width: 700px) {
  .feat { padding: 26px 22px !important; }
  .feat-hero { padding: 30px 26px 24px !important; }
  .feat-hero h3 { font-size: 24px !important; }
  .feat-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .feat-stat-num { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .feat-icon::after,
  .feat-hero-glow,
  .feat-chip-dot { animation: none !important; transition: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
 *  STATS RIBBON — pro-level redesign
 *
 *  Replaces the four equal-width tiles with a single cohesive ribbon
 *  card. Each stat carries:
 *    • A small brand-blue icon chip (top)
 *    • A large gradient-text number (animated count-up on reveal)
 *    • A bold label
 *    • A small caption explaining the stat's meaning
 *
 *  Subtle vertical dividers separate the four columns on desktop, so
 *  the ribbon reads as a single specification sheet, not four cards.
 * ════════════════════════════════════════════════════════════════════ */


.stats {
  background: var(--pro-page, #ffffff) !important;
}

/* Outer ribbon — a single card that hosts all four stats */
.stats-ribbon {
  position: relative;
  border-radius: 28px !important;
  padding: 12px !important;
  background:
    linear-gradient(180deg, rgba(247, 251, 255, 0.7) 0%, rgba(232, 241, 251, 0.5) 100%),
    #ffffff !important;
  border: 1px solid rgba(42, 111, 181, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 2px rgba(10, 22, 40, 0.03),
    0 24px 50px -20px rgba(42, 111, 181, 0.18) !important;
  overflow: hidden;
  isolation: isolate;
}

/* Soft brand-blue aura behind the ribbon */
.stats-ribbon::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 200%;
  background: radial-gradient(
    ellipse at center,
    rgba(124, 183, 240, 0.22) 0%,
    transparent 60%
  );
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.stats-grid {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1px !important;
  background: transparent !important;
}
@media (min-width: 700px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1000px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr) !important; }
}


/* Individual stat block — calm typography, subtle vertical divider */
.stat-block {
  position: relative !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 24px !important;
  background: transparent !important;
  text-align: center !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.stat-block:hover { transform: translateY(-3px) !important; }

/* Vertical hairline dividers between columns (desktop) */
@media (min-width: 1000px) {
  .stat-block:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(42, 111, 181, 0.18) 50%,
      transparent 100%
    );
  }
}

/* Icon chip — small, refined, brand-coloured */
.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3082CC 0%, #1F5891 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 8px 18px -4px rgba(42, 111, 181, 0.4);
  margin-bottom: 4px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-block:hover .stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

/* Number — large, gradient text */
.stat-num {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(34px, 4vw, 48px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  background: linear-gradient(180deg, #2A6FB5 0%, #1F5891 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  margin: 0 !important;
}
.stat-num span {
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Label — bold, primary text */
.stat-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  color: #0A1628 !important;
  text-transform: none !important;
  line-height: 1.3;
}

/* Caption — smaller, muted, sells the stat's meaning */
.stat-caption {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #5B6B82;
  line-height: 1.4;
  letter-spacing: -0.003em;
  max-width: 200px;
}


/* ─── Responsive — keep readable on small screens ───────────── */
@media (max-width: 700px) {
  .stats-ribbon { padding: 8px !important; }
  .stat-block { padding: 28px 18px !important; gap: 10px; }
  .stat-num { font-size: 32px !important; }
}
@media (max-width: 700px) {
  /* Horizontal dividers on stacked mobile layout */
  .stat-block:not(:first-child) {
    border-top: 1px solid rgba(42, 111, 181, 0.1);
  }
}


/* ════════════════════════════════════════════════════════════════════
 *  HOW-IT-WORKS STEPPER — pro-level redesign
 *
 *  A 3-step horizontal stepper with an animated "rail" running behind
 *  the numbered badges. The rail fills with the brand gradient as the
 *  section scrolls into view — visually saying "this is a sequence."
 *
 *  Each step:
 *    • Large gradient-numbered badge with a pulsing ring on the active
 *    • Time chip in the head row ("~60 Sek.", "~3 Min.", "Erledigt")
 *    • Title + body
 *    • Three mini feature tags below
 * ════════════════════════════════════════════════════════════════════ */


.how-stepper {
  position: relative;
  padding: 20px 0 8px;
}

/* Rail — runs along the centre of the numbered badges */
.how-rail {
  position: absolute;
  top: 70px;          /* aligns with centre of the number badges */
  left: 13%;
  right: 13%;
  height: 3px;
  z-index: 0;
  pointer-events: none;
  display: none;
}
@media (min-width: 900px) { .how-rail { display: block; } }

.how-rail-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(42, 111, 181, 0.10);
}
.how-rail-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #3082CC 0%,
    #2A6FB5 50%,
    #1F5891 100%
  );
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  box-shadow: 0 4px 14px -2px rgba(42, 111, 181, 0.45);
}
.how-stepper.is-revealed .how-rail-fill {
  transform: scaleX(1);
}


.how-grid {
  position: relative !important;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
  align-items: stretch !important;
}
@media (min-width: 900px) {
  .how-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 32px !important;
  }
}

/* Hide the old arrows — the rail replaces them */
.how-arrow { display: none !important; }


/* Step card */
.how-step {
  position: relative !important;
  background: #fff !important;
  border: 1px solid var(--pro-line, #E6ECF4) !important;
  border-radius: 22px !important;
  padding: 28px 26px !important;
  box-shadow:
    0 1px 0 rgba(10, 22, 40, 0.02),
    0 1px 2px rgba(10, 22, 40, 0.04) !important;
  text-align: left !important;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease !important;
}
.how-step:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(42, 111, 181, 0.28) !important;
  box-shadow:
    0 1px 0 rgba(10, 22, 40, 0.02),
    0 20px 40px -16px rgba(42, 111, 181, 0.22),
    0 8px 18px -6px rgba(10, 22, 40, 0.08) !important;
}


/* Head row — numbered badge + time chip */
.how-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

/* Badge — overrides the old .how-num styles */
.how-num {
  position: relative !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #3082CC 0%, #2A6FB5 50%, #1F5891 100%) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 12px 24px -4px rgba(42, 111, 181, 0.5),
    0 0 0 4px #fff !important; /* white halo separates from the rail */
  font-family: 'Inter', sans-serif !important;
  font-size: 0 !important; /* hide direct text — we render via .how-num-glyph */
  margin-bottom: 0 !important;
}
.how-num::before { content: '' !important; }
.how-num-glyph {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
}

/* Pulsing ring around the badge */
.how-num-ring {
  position: absolute;
  inset: -8px;
  border-radius: 22px;
  border: 1px solid rgba(42, 111, 181, 0.3);
  opacity: 0;
  pointer-events: none;
  animation: how-num-ring 3.5s ease-in-out infinite;
}
.how-step[data-step="1"] .how-num-ring { animation-delay: 0s; }
.how-step[data-step="2"] .how-num-ring { animation-delay: 1.1s; }
.how-step[data-step="3"] .how-num-ring { animation-delay: 2.2s; }
@keyframes how-num-ring {
  0%, 100% { opacity: 0; transform: scale(0.92); }
  20%      { opacity: 0.9; transform: scale(1); }
  60%      { opacity: 0; transform: scale(1.12); }
}


/* Time chip — small caps duration */
.how-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(42, 111, 181, 0.08);
  border: 1px solid rgba(42, 111, 181, 0.18);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2A6FB5;
}
.how-time-done {
  background: rgba(22, 163, 74, 0.10);
  border-color: rgba(22, 163, 74, 0.25);
  color: #15803D;
}


/* Body */
.how-step h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -0.022em !important;
  color: #0A1628 !important;
  margin: 0 0 10px !important;
  line-height: 1.2;
}
.how-step p {
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #5B6B82 !important;
  margin: 0 0 20px !important;
}


/* Tag row — three mini chips per step */
.how-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.how-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: #F4F8FC;
  border: 1px solid #E1EBF5;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #2E3D52;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.how-tag svg {
  width: 11px;
  height: 11px;
  color: #2A6FB5;
}
.how-step:hover .how-tag {
  background: #fff;
  border-color: rgba(42, 111, 181, 0.22);
}
.how-step:hover .how-tag:nth-child(1) { transform: translateY(-2px); transition-delay: 0s; }
.how-step:hover .how-tag:nth-child(2) { transform: translateY(-2px); transition-delay: 0.05s; }
.how-step:hover .how-tag:nth-child(3) { transform: translateY(-2px); transition-delay: 0.1s; }


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .how-rail-fill { transform: scaleX(1) !important; transition: none !important; }
  .how-num-ring { animation: none !important; }
}

/* Tablet — keep 3 cards in row when there's space */
@media (max-width: 900px) and (min-width: 600px) {
  .how-grid { grid-template-columns: 1fr !important; }
}


/* ════════════════════════════════════════════════════════════════════
 *  CTA SECTION — pro-level redesign
 *
 *  Dark brand-blue canvas with a multi-layered background:
 *    • Animated mesh blobs (slow drift)
 *    • Subtle dot grid overlay (premium tech feel)
 *    • Spotlight gradient anchored to the top centre
 *
 *  Content stack: eyebrow chip → headline (with gradient accent line)
 *  → sub → two store buttons in dark surfaces → trust signal row.
 *  Store buttons get a refined inset + drop shadow on hover.
 * ════════════════════════════════════════════════════════════════════ */


.cta {
  position: relative !important;
  background: linear-gradient(180deg, #133564 0%, #0F2A52 50%, #0A1F3E 100%) !important;
  color: #fff !important;
  padding: 110px 0 !important;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 900px) {
  .cta { padding: 140px 0 !important; }
}


/* ─── Background layers ────────────────────────────────────── */
.cta-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none;
  overflow: hidden;
}

/* Spotlight — soft glow falling from top centre */
.cta-spot {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  max-width: 110%;
  height: 700px;
  background: radial-gradient(
    ellipse at center,
    rgba(124, 183, 240, 0.28) 0%,
    rgba(91, 155, 213, 0.12) 30%,
    transparent 65%
  );
  filter: blur(30px);
}

/* Drifting mesh blobs */
.cta-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}
.cta-blob-1 {
  width: 500px; height: 500px;
  top: 10%; left: -120px;
  background: radial-gradient(circle, #5B9BD5 0%, transparent 70%);
  animation: cta-blob-drift 22s ease-in-out infinite;
}
.cta-blob-2 {
  width: 580px; height: 580px;
  bottom: -180px; right: -150px;
  background: radial-gradient(circle, #4470A8 0%, transparent 70%);
  animation: cta-blob-drift 28s ease-in-out infinite reverse;
}
.cta-blob-3 {
  width: 380px; height: 380px;
  bottom: 20%; left: 35%;
  background: radial-gradient(circle, #1F4A82 0%, transparent 70%);
  animation: cta-blob-drift 24s ease-in-out infinite;
}
@keyframes cta-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.05); }
  66%      { transform: translate(-30px, 25px) scale(0.97); }
}

/* Dot grid overlay */
.cta-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0, 0, 0, 0.7), transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0, 0, 0, 0.7), transparent);
}


/* ─── Inner content stack ──────────────────────────────────── */
.cta-inner {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
}

/* Eyebrow chip */
.cta-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin-bottom: 28px !important;
}
.cta-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.22);
  animation: cta-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes cta-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.22); }
  50%      { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.06); }
}


/* Headline */
.cta h2,
.cta-title {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(36px, 5vw, 60px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
  color: #fff !important;
  margin: 0 0 22px !important;
}
.cta-title-glow {
  background: linear-gradient(180deg, #fff 0%, #BAD9F4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 4px 24px rgba(124, 183, 240, 0.35));
}

/* Sub */
.cta-sub,
.cta p {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  max-width: 540px !important;
  margin: 0 auto 40px !important;
  font-weight: 400 !important;
}


/* ─── Store buttons ────────────────────────────────────────── */
.cta-stores {
  display: inline-flex !important;
  gap: 14px !important;
  margin-bottom: 36px !important;
  flex-wrap: wrap;
  justify-content: center;
}

.cta-store {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 26px 14px 22px !important;
  background: linear-gradient(180deg, #0F2243 0%, #0A1A33 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 10px 22px -4px rgba(0, 0, 0, 0.4),
    0 4px 10px -2px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease,
              border-color 0.25s ease !important;
}
.cta-store:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(124, 183, 240, 0.3) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 18px 36px -8px rgba(42, 111, 181, 0.55),
    0 6px 14px -4px rgba(0, 0, 0, 0.3) !important;
}
.cta-store:active { transform: translateY(0) !important; }

.cta-store svg {
  flex-shrink: 0;
  color: #fff;
}
.cta-store-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.cta-store-top {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.cta-store-name {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  margin-top: 1px;
}


/* ─── Trust signal row ─────────────────────────────────────── */
.cta-trust {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 22px !important;
}
.cta-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -0.005em;
}
.cta-trust li svg {
  width: 14px;
  height: 14px;
  color: #34D399;
  flex-shrink: 0;
  padding: 2px;
  background: rgba(52, 211, 153, 0.18);
  border-radius: 50%;
  box-sizing: content-box;
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cta-blob,
  .cta-eyebrow-dot { animation: none !important; }
}

/* Responsive */
@media (max-width: 640px) {
  .cta-stores { width: 100%; flex-direction: column; gap: 12px; }
  .cta-store { width: 100%; justify-content: center; }
  .cta-trust { gap: 14px; }
}


/* ════════════════════════════════════════════════════════════════════
 *  FOOTER — pro-level redesign
 *
 *  Three-column upper area (brand + 3 link columns) sitting on a soft
 *  light-blue tint, then a separated bottom bar with copyright + small
 *  legal links + social icons. Hairline divider between the two zones.
 * ════════════════════════════════════════════════════════════════════ */


.footer {
  background: linear-gradient(180deg, #F7FAFD 0%, #EEF3F9 100%) !important;
  border-top: 1px solid rgba(42, 111, 181, 0.10) !important;
  color: #2E3D52 !important;
  padding: 80px 0 0 !important;
  position: relative;
}
@media (min-width: 900px) {
  .footer { padding: 100px 0 0 !important; }
}

/* Subtle top-edge glow for premium feel */
.footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 920px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 111, 181, 0.3) 50%,
    transparent 100%
  );
}


/* Upper grid */
.footer-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 40px !important;
  padding-bottom: 56px !important;
}
@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
    gap: 48px !important;
  }
}


/* Brand block */
.footer-brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  max-width: 320px;
}
.footer-brand .brand {
  color: #0A1628 !important;
  font-size: 20px !important;
}
.footer-brand .brand-mark {
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 8px 18px -4px rgba(42, 111, 181, 0.32) !important;
}
.footer-tag {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #5B6B82 !important;
  margin: 0 !important;
  max-width: 280px;
}


/* Link columns */
.footer-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.footer-col h4 {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #2A6FB5 !important;
  margin: 0 0 6px !important;
}
.footer-col a {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: #2E3D52 !important;
  text-decoration: none !important;
  position: relative;
  width: fit-content;
  transition: color 0.18s ease, transform 0.18s ease !important;
}
.footer-col a:hover {
  color: #2A6FB5 !important;
  transform: translateX(2px);
}
.footer-col a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1.5px;
  background: #2A6FB5;
  border-radius: 2px;
  transition: width 0.22s ease;
}
.footer-col a:hover::after { width: 100%; }


/* Bottom bar — copyright + secondary links */
.footer-bottom {
  border-top: 1px solid rgba(42, 111, 181, 0.10) !important;
  padding: 22px 0 !important;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-top: 0 !important;
}
.footer-bottom .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #8A98AE !important;
  letter-spacing: -0.005em !important;
}
.footer-bottom .container::before {
  /* Add small accent dot at the start */
  content: '';
  display: none;
}


/* Optional: small "Made with" callout on the right side */
@media (max-width: 700px) {
  .footer-bottom .container { justify-content: center; text-align: center; }
}


/* Two-side layout for the footer bottom bar */
.footer-bottom-left,
.footer-bottom-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-bottom-right {
  font-weight: 600;
  color: #5B6B82;
}
.footer-flag {
  font-size: 14px;
  line-height: 1;
}


/* ════════════════════════════════════════════════════════════════════
 *  WORLD CHECK ICONS — fix
 *  The card lists previously used a Unicode "✓" text glyph which
 *  doesn't render reliably across fonts. We now inject an SVG inside
 *  the .check circle — guaranteed visible everywhere.
 * ════════════════════════════════════════════════════════════════════ */

.world-list .check {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  background: linear-gradient(135deg, #2A6FB5 0%, #1F5891 100%) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 8px -2px rgba(42, 111, 181, 0.4) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.world-list .check svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* Pro variant — indigo tint to match the Pro card identity */
.world-pro .world-list .check {
  background: linear-gradient(135deg, #6366F1 0%, #4338CA 100%) !important;
  box-shadow: 0 3px 8px -2px rgba(99, 102, 241, 0.4) !important;
}

/* List row spacing tidy-up so the larger SVG icons sit clean */
.world-list li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  line-height: 1.45 !important;
}


/* ════════════════════════════════════════════════════════════════════
 *  LUMINA HERO v4 — orbital orbs
 *
 *  Icons now travel slowly ALONG the ring. They sit further outward
 *  (so the headline has space) and rotate around the centre as one
 *  formation — like a clock-face whose hands are decorations.
 *
 *  Pattern per orb:
 *    transform: rotate(--start)
 *               translateY(-radius)
 *               rotate(--start * -1)     ← keeps icon upright
 *
 *  An animation increments the angle by 360° over 60 seconds, so the
 *  whole formation revolves once per minute — meditative, never busy.
 * ════════════════════════════════════════════════════════════════════ */


/* Hero needs more vertical room for the larger circular orbit */
.lumina-hero {
  min-height: 880px !important;
  padding: 150px 0 140px !important;
}
@media (min-width: 1000px) {
  .lumina-hero { min-height: 980px !important; padding: 190px 0 170px !important; }
}


/* Reset the previous absolute x/y placement — we use angle + radius */
.lumina-orb {
  /* Reset margin-based offsets from earlier versions */
  margin: 0 !important;
  /* Width / height taken from earlier rules */
  /* Default radius — overridden per-orb below */
  --orb-radius: 440px;
}

/* Angular placement around the centre */
.lumina-orb-bolt     { --orb-start: 0deg;   }  /* 12 o'clock */
.lumina-orb-shield   { --orb-start: 60deg;  }  /*  2 o'clock */
.lumina-orb-calendar { --orb-start: 120deg; }  /*  4 o'clock */
.lumina-orb-star     { --orb-start: 180deg; }  /*  6 o'clock */
.lumina-orb-chat     { --orb-start: 240deg; }  /*  8 o'clock */
.lumina-orb-tool     { --orb-start: 300deg; }  /* 10 o'clock */

/* Override v3 keyframes — DISABLED, v5 owns the orbit (end of file) */
.lumina-orb {
  /* animation: lumina-orb-orbit 60s linear infinite !important;   ← v4 (disabled) */
  transform-origin: center !important;
}

@keyframes lumina-orb-orbit {
  from {
    transform: translate(-50%, -50%)
               rotate(var(--orb-start))
               translateY(calc(-1 * var(--orb-radius)))
               rotate(calc(-1 * var(--orb-start)));
  }
  to {
    transform: translate(-50%, -50%)
               rotate(calc(var(--orb-start) + 360deg))
               translateY(calc(-1 * var(--orb-radius)))
               rotate(calc(-1 * (var(--orb-start) + 360deg)));
  }
}


/* Rings get bigger to match the new outer placement of the orbs */
.lumina-ring-1 { width: 360px  !important; height: 360px  !important; border-color: rgba(42, 111, 181, 0.30) !important; }
.lumina-ring-2 { width: 540px  !important; height: 540px  !important; border-color: rgba(42, 111, 181, 0.22) !important; }
.lumina-ring-3 { width: 740px  !important; height: 740px  !important; border-color: rgba(42, 111, 181, 0.16) !important; }
.lumina-ring-4 { width: 960px  !important; height: 960px  !important; border-color: rgba(42, 111, 181, 0.10) !important; }
.lumina-ring-5 { width: 1200px !important; height: 1200px !important; border-color: rgba(42, 111, 181, 0.06) !important; }


/* ─── Slightly bigger aura for the more open layout ─────────── */
.lumina-aura {
  width: 820px !important;
  height: 820px !important;
}


/* ─── Polished orb chrome ───────────────────────────────────── */
.lumina-orb {
  width: 68px !important;
  height: 68px !important;
  background:
    radial-gradient(circle at 32% 26%, #FFFFFF 0%, #F4F8FC 55%, #E6EFF8 100%) !important;
  border: 1px solid rgba(42, 111, 181, 0.18) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 5px rgba(255, 255, 255, 0.6),
    0 12px 30px -6px rgba(42, 111, 181, 0.28),
    0 28px 60px -20px rgba(42, 111, 181, 0.22) !important;
}
.lumina-orb svg { width: 26px !important; height: 26px !important; stroke-width: 1.8 !important; }


/* ─── Responsive — pull the radius in on smaller screens ───── */
@media (max-width: 1100px) {
  .lumina-orb { --orb-radius: 360px; }
  .lumina-ring-4,
  .lumina-ring-5 { display: none !important; }
  .lumina-ring-1 { width: 300px  !important; height: 300px  !important; }
  .lumina-ring-2 { width: 460px  !important; height: 460px  !important; }
  .lumina-ring-3 { width: 640px  !important; height: 640px  !important; }
  .lumina-hero { min-height: 820px !important; }
}
@media (max-width: 760px) {
  .lumina-orb { --orb-radius: 240px; width: 52px !important; height: 52px !important; }
  .lumina-orb svg { width: 20px !important; height: 20px !important; }
  .lumina-ring-1 { width: 220px !important; height: 220px !important; }
  .lumina-ring-2 { width: 340px !important; height: 340px !important; }
  .lumina-ring-3 { width: 460px !important; height: 460px !important; }
  /* On very small screens hide the bottom orb so it doesn't collide with the CTAs */
  .lumina-orb-star { display: none !important; }
  .lumina-hero { min-height: 720px !important; padding: 110px 0 90px !important; }
}


/* DISABLED — this v4 reduced-motion override used --orb-start /
   --orb-radius which v5 doesn't define. The v5 file-end block has
   its own reduced-motion rule. */
@media (prefers-reduced-motion: reduce) {
  /* .lumina-orb {
       animation: none !important;
       transform: translate(-50%, -50%)
                  rotate(var(--orb-start))
                  translateY(calc(-1 * var(--orb-radius)))
                  rotate(calc(-1 * var(--orb-start))) !important;
     } */
}


/* ════════════════════════════════════════════════════════════════════
 *  LUMINA HERO v5 — FINAL FIX
 *  Earlier layers (v1, v2, v3, v4) all wrote their own transform with
 *  !important on .lumina-orb. Even though animations should override
 *  static transforms, the layering became unpredictable. v5 wins by
 *  being LAST in the cascade AND using a higher specificity selector.
 *
 *  Changes:
 *    • Orbit radius bumped to 500px (Desktop) — icons clearly OUTSIDE
 *      the headline column
 *    • Faster rotation: 35 seconds per full revolution (was 60s — too
 *      slow to notice)
 *    • Hero grows taller to accommodate larger orbit
 *    • Old keyframes orb-bob / orb-orbit / orb-sway are all redefined
 * ════════════════════════════════════════════════════════════════════ */


/* Hero shell — taller so the 500px orbit fits */
section.lumina-hero {
  min-height: 980px !important;
  padding: 170px 0 160px !important;
}
@media (min-width: 1000px) {
  section.lumina-hero {
    min-height: 1080px !important;
    padding: 200px 0 180px !important;
  }
}


/* Per-orb angular position */
.lumina-orbs .lumina-orb-bolt     { --start: 0deg;   }
.lumina-orbs .lumina-orb-shield   { --start: 60deg;  }
.lumina-orbs .lumina-orb-calendar { --start: 120deg; }
.lumina-orbs .lumina-orb-star     { --start: 180deg; }
.lumina-orbs .lumina-orb-chat     { --start: 240deg; }
.lumina-orbs .lumina-orb-tool     { --start: 300deg; }


/* Common orb chrome + orbit animation (high-specificity selector so
   it wins over every earlier rule, !important or not) */
.lumina-orbs .lumina-orb {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 72px !important;
  height: 72px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 26%, #FFFFFF 0%, #F4F8FC 55%, #E6EFF8 100%) !important;
  border: 1px solid rgba(42, 111, 181, 0.22) !important;
  color: #2A6FB5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 6px rgba(255, 255, 255, 0.55),
    0 12px 30px -4px rgba(42, 111, 181, 0.3),
    0 30px 60px -20px rgba(42, 111, 181, 0.22) !important;
  /* The orbit animation drives the entire transform — no static
     transform here. */
  animation: lumina-orbit 28s linear infinite !important;
  transform-origin: center !important;
  z-index: 5 !important;
  will-change: transform !important;
}
.lumina-orbs .lumina-orb > svg {
  width: 28px !important;
  height: 28px !important;
  stroke-width: 1.9 !important;
  display: block !important;
}


/* The orbit: each orb rotates around the centre at radius --r, and
   counter-rotates to stay upright. The angle goes from --start to
   --start + 360deg over the animation duration. */
@keyframes lumina-orbit {
  from {
    transform: translate(-50%, -50%)
               rotate(var(--start))
               translateY(calc(-1 * var(--r, 500px)))
               rotate(calc(-1 * var(--start)));
  }
  to {
    transform: translate(-50%, -50%)
               rotate(calc(var(--start) + 360deg))
               translateY(calc(-1 * var(--r, 500px)))
               rotate(calc(-1 * (var(--start) + 360deg)));
  }
}


/* Per-breakpoint orbit radius — drives the actual outward distance */
.lumina-orbs .lumina-orb                       { --r: 500px; }
@media (max-width: 1200px) { .lumina-orbs .lumina-orb { --r: 420px; } }
@media (max-width: 900px)  { .lumina-orbs .lumina-orb { --r: 330px; width: 60px !important; height: 60px !important; } .lumina-orbs .lumina-orb > svg { width: 24px !important; height: 24px !important; } }
@media (max-width: 600px)  { .lumina-orbs .lumina-orb { --r: 230px; width: 52px !important; height: 52px !important; } .lumina-orbs .lumina-orb > svg { width: 20px !important; height: 20px !important; } }


/* Rings expand to match the new orbit radius */
.lumina-rings .lumina-ring-1 { width: 380px  !important; height: 380px  !important; border-color: rgba(42, 111, 181, 0.32) !important; }
.lumina-rings .lumina-ring-2 { width: 580px  !important; height: 580px  !important; border-color: rgba(42, 111, 181, 0.24) !important; }
.lumina-rings .lumina-ring-3 { width: 800px  !important; height: 800px  !important; border-color: rgba(42, 111, 181, 0.16) !important; }
.lumina-rings .lumina-ring-4 { width: 1040px !important; height: 1040px !important; border-color: rgba(42, 111, 181, 0.10) !important; }
.lumina-rings .lumina-ring-5 { width: 1300px !important; height: 1300px !important; border-color: rgba(42, 111, 181, 0.06) !important; }
@media (max-width: 1200px) {
  .lumina-rings .lumina-ring-5 { display: none !important; }
}
@media (max-width: 900px) {
  .lumina-rings .lumina-ring-4 { display: none !important; }
  .lumina-rings .lumina-ring-1 { width: 270px !important; height: 270px !important; }
  .lumina-rings .lumina-ring-2 { width: 420px !important; height: 420px !important; }
  .lumina-rings .lumina-ring-3 { width: 580px !important; height: 580px !important; }
}
@media (max-width: 600px) {
  .lumina-rings .lumina-ring-1 { width: 200px !important; height: 200px !important; }
  .lumina-rings .lumina-ring-2 { width: 320px !important; height: 320px !important; }
  .lumina-rings .lumina-ring-3 { width: 440px !important; height: 440px !important; }
  .lumina-orbs .lumina-orb-star { display: none !important; }
}


/* Respect reduced motion — stop the orbit, freeze at start position */
@media (prefers-reduced-motion: reduce) {
  .lumina-orbs .lumina-orb {
    animation: none !important;
    transform: translate(-50%, -50%)
               rotate(var(--start))
               translateY(calc(-1 * var(--r, 500px)))
               rotate(calc(-1 * var(--start))) !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
 *  FOOTER — 5-column grid (Brand + 4 link columns)
 * ════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important;
    gap: 40px !important;
  }
}
@media (min-width: 700px) and (max-width: 899px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* External-link styling: small ↗ icon, gap, fades in on hover */
.footer-link-ext {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  position: relative;
}
.footer-link-ext svg {
  opacity: 0.45;
  transition: opacity 0.18s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.footer-link-ext:hover svg {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* Subtle "external" caret colour aligns with brand-blue on hover */
.footer-link-ext:hover svg {
  color: #2A6FB5;
}


/* ════════════════════════════════════════════════════════════════════
 *  "BALD" badge on the Google Play store button — honest signalling
 *  that the Android app isn't published yet without hiding the button.
 * ════════════════════════════════════════════════════════════════════ */
.cta-store {
  position: relative;
}
.cta-store-soon {
  opacity: 0.7;
  cursor: not-allowed;
}
.cta-store-soon:hover {
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 10px 22px -4px rgba(0, 0, 0, 0.4) !important;
}
.cta-store-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 4px 12px -2px rgba(217, 119, 6, 0.5);
  white-space: nowrap;
}