/* ============================================================
   JUNG UNTERNEHMENSLÖSUNGEN — Landing Page Stylesheet
   Design system: dark, high-end, futuristic · purple accent
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Colors */
  --color-bg:             #0A0A0A;
  --color-surface:        #141414;
  --color-surface-2:      #1C1C1C;
  --color-border:         rgba(255, 255, 255, 0.06);
  --color-border-hover:   rgba(124, 58, 237, 0.35);
  --color-accent:         #7C3AED;
  --color-accent-bright:  #9333EA;
  --color-accent-muted:   rgba(124, 58, 237, 0.12);
  --color-text-primary:   #F5F5F5;
  --color-text-secondary: #A1A1AA;
  --color-text-muted:     #52525B;

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Spacing */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   48px;
  --space-xl:   80px;
  --space-2xl:  120px;

  /* Border radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 100px;

  /* Shadows / Glows */
  --glow-card:   0 0 30px rgba(124, 58, 237, 0.18);
  --glow-button: 0 0 24px rgba(124, 58, 237, 0.45);
  --shadow-card: 0 4px 32px rgba(0, 0, 0, 0.5);

  /* Transitions */
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;

  /* Layout */
  --container-max: 1280px;
  --nav-height-desktop: 64px;
  --nav-height-mobile:  56px;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg, canvas {
  display: block;
  max-width: 100%;
}

ul, ol { list-style: none; }
li { list-style: none; }

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

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}


/* ============================================================
   3. LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-lg); }
}

.section-inner {
  padding-block: var(--space-xl);
}

@media (min-width: 1024px) {
  .section-inner { padding-block: var(--space-2xl); }
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

@media (min-width: 1024px) {
  .section-header { margin-bottom: 72px; }
}

.section-headline {
  color: var(--color-text-primary);
  margin-block: var(--space-sm) var(--space-lg);
}

.section-sub {
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin-inline: auto;
}


/* ============================================================
   TYPE SCALE — single source of truth
   All headings across every page use exactly one of these
   classes for typography. Context classes (hero-headline,
   section-headline, sp-hero-headline, etc.) handle ONLY
   color, max-width, margin, and spacing.
   ============================================================ */

/* T1 — Hero / page-defining headline */
.t-hero {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* T2 — CTA / section-opening statement */
.t-cta {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* T3 — Section headline */
.t-section {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

/* T4 — Sub-section / solution card headline */
.t-sub {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* T5 — Component / card title (Inter for best small-size rendering) */
.t-card {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* TM — Metric / stat display */
.t-metric {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}


/* ============================================================
   4. TYPOGRAPHY COMPONENTS
   ============================================================ */

/* Eyebrow / label chip */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-bright);
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  margin-bottom: var(--space-sm);
}

/* Gradient text (white → purple) */
.gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #C084FC 50%, #7C3AED 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 12px 24px;
  min-height: 48px;
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base),
    filter var(--transition-base);
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-accent);
  color: #ffffff;
  border: none;
}

.btn--primary:hover {
  background: var(--color-accent-bright);
  box-shadow: var(--glow-button);
  transform: scale(1.02);
  filter: brightness(1.08);
}

.btn--primary:active {
  transform: scale(0.98);
}

.btn--large {
  font-size: 16px;
  padding: 15px 32px;
  min-height: 56px;
}

.btn--glow {
  box-shadow: 0 0 40px rgba(124, 58, 237, 0.3);
}

.btn--glow:hover {
  box-shadow: 0 0 60px rgba(124, 58, 237, 0.6);
}

/* Focus ring for accessibility */
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 3px;
}


/* ============================================================
   6. ANIMATIONS — KEYFRAMES
   ============================================================ */
@keyframes heroEntrance {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}


/* ============================================================
   7. HERO ENTRANCE ANIMATION CLASSES
   ============================================================ */
.animate-hero {
  opacity: 0;
  animation: heroEntrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-hero[data-delay="0"] { animation-delay: 0.1s; }
.animate-hero[data-delay="1"] { animation-delay: 0.25s; }
.animate-hero[data-delay="2"] { animation-delay: 0.40s; }
.animate-hero[data-delay="3"] { animation-delay: 0.55s; }
.animate-hero[data-delay="4"] { animation-delay: 0.70s; }
.animate-hero[data-delay="5"] { animation-delay: 0.95s; }
.animate-hero[data-delay="6"] { animation-delay: 1.15s; }


/* ============================================================
   8. SCROLL-TRIGGERED ANIMATION CLASSES
      JS adds .is-visible via IntersectionObserver
   ============================================================ */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll[data-stagger="1"] { transition-delay: 0.10s; }
.animate-on-scroll[data-stagger="2"] { transition-delay: 0.20s; }
.animate-on-scroll[data-stagger="3"] { transition-delay: 0.30s; }


/* ============================================================
   9. NAVBAR
   ============================================================ */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height-mobile);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    backdrop-filter 0.4s ease;
}

#navbar.scrolled {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(124, 58, 237, 0.2);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-logo-img {
  height: 48px;
  width: auto;
  max-width: 200px;
  display: block;
  flex-shrink: 0;
}

.nav-logo-img--footer {
  height: 40px;
  opacity: 0.85;
}

/* Legacy text class — kept so nothing breaks if referenced elsewhere */
.nav-logo-text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

/* Desktop nav links */
.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-lg);
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--transition-base);
}

.nav-link:hover {
  color: var(--color-text-primary);
}

.nav-cta {
  font-size: 14px;
  padding: 9px 20px;
  min-height: 40px;
}

/* Hamburger */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}

.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav overlay */
.nav-links.is-open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: fixed;
  inset: var(--nav-height-mobile) 0 0 0;
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: var(--space-lg) var(--space-md);
  gap: var(--space-sm);
  z-index: 99;
}

.nav-links.is-open .nav-link {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.nav-links.is-open .nav-cta {
  width: 100%;
  justify-content: center;
  font-size: 16px;
  padding: 14px;
  margin-top: var(--space-sm);
}

/* Desktop breakpoint */
@media (min-width: 768px) {
  #navbar {
    height: var(--nav-height-desktop);
  }
  .nav-links {
    display: flex;
  }
  .nav-hamburger {
    display: none;
  }
}


/* ============================================================
   10. HERO SECTION — full-screen cinematic scroll intro
   ============================================================ */

/* Tall outer container — creates the scroll room.
   margin-top pushes #hero below the fixed navbar in document flow.
   Without this, the hero starts at y=0 and the sticky panel loads
   directly behind the navbar on page load. */
#hero {
  position: relative;
  height: 240vh;             /* mobile: ~140 vh of sticky scroll */
  margin-top: var(--nav-height-mobile);
  background: var(--color-bg);
}

/* Sticky viewport panel.
   top: nav-height  → panel sticks at the bottom edge of the navbar, never above it.
   height: 100vh - nav-height  → fills exactly the visible area below the navbar.
   #hero's margin-top ensures the panel's natural start position matches this
   stick point, so it is already pinned below the navbar on page load. */
.hero-sticky {
  position: sticky;
  top: var(--nav-height-mobile);
  height: calc(100vh - var(--nav-height-mobile));
  overflow: hidden;
}

/* Full-screen animated visual — fills the entire sticky viewport */
.hero-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;          /* clips the oversized parallax layers */
}

/* ── Cinematic vignette ─────────────────────────────────────────── */
/* Darkens edges so text stays readable over any frame content      */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    /* Bottom gradient — starts late so animation stays visible until CTA moment */
    linear-gradient(
      to top,
      rgba(10, 10, 10, 0.90) 0%,
      rgba(10, 10, 10, 0.60) 14%,
      rgba(10, 10, 10, 0.22) 28%,
      transparent 42%
    ),
    /* Top darkening — strong enough for top-left text readability */
    linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.70) 0%,
      rgba(10, 10, 10, 0.30) 22%,
      transparent 40%
    ),
    /* Left-edge shadow — grounds the text column */
    linear-gradient(
      to right,
      rgba(10, 10, 10, 0.28) 0%,
      transparent 38%
    );
}

/* ── Text overlay ───────────────────────────────────────────────── */
/* Full-screen stacking context; stages anchor to bottom-left       */
.hero-copy {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;      /* individual stages enable pointer-events */
}

/* All stages share the same left-column anchor.
   max-width defines the safe text zone — text never enters the visual area. */
.hero-stage {
  position: absolute;
  bottom: clamp(40px, 6vh, 72px);
  left:   clamp(20px, 5vw, 72px);
  right:  auto;
  max-width: min(480px, 78vw);      /* left column: stays clear of the visual focus */
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
}

/* Stage 0 starts fully visible — JS takes control once scrolling begins */
#hero-stage-0 {
  opacity: 1;
  pointer-events: auto;
}

/* Stages 1-2 anchor to top-left — mid-scroll context lines */
#hero-stage-1,
#hero-stage-2 {
  bottom: auto;
  top: clamp(24px, 4vh, 52px);
}

/* Stage 3 (CTA) returns to bottom-left — feels like a natural final step */
#hero-stage-3 {
  top: auto;
  bottom: clamp(40px, 6vh, 72px);
}

.hero-stage-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-bright);
  margin-bottom: 16px;
}

/* ── Typography ─────────────────────────────────────────────────── */
.hero-headline {
  color: #ffffff;
  margin-bottom: 0;
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.5);
  overflow-wrap: normal;  /* never break mid-word */
  hyphens: none;          /* no auto-hyphenation */
  word-break: normal;
}

.hero-headline span {
  display: block;
}

/* Mid-scroll statement lines — slightly smaller than the opening h1,
   used for "Struktur statt Chaos." and "Automatisierung, die funktioniert." */
.hero-statement {
  color: #ffffff;
  margin-bottom: var(--space-md);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}

.hero-sub {
  font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(245, 245, 245, 0.80);
  line-height: 1.7;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-lg);
  max-width: 44ch;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.hero-text-link {
  font-size: 14px;
  color: rgba(245, 245, 245, 0.55);
  transition: color var(--transition-base);
}

.hero-text-link:hover {
  color: rgba(245, 245, 245, 0.85);
}

.hero-trust {
  font-size: 12px;
  color: rgba(245, 245, 245, 0.38);
  letter-spacing: 0.04em;
}

/* ── Visual layer internals ─────────────────────────────────────── */

/* Persistent CSS glow halo */
.hero-glow {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulseGlow 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}

/* Three.js canvas — ambient geometry, kept subtle so the sequence dominates */
#hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: block;
  opacity: 0.3;
}

/* Logo animation canvas — cover-fills entire hero viewport */
#logo-seq {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /*
    screen blend: dark/black JPEG pixels become transparent, letting the
    purple atmosphere layers show through behind the animation.
    Switch to "normal" if the animation has a transparent background (PNG)
    or if screen-blending makes it look washed-out.
  */
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* CSS glow fallback when WebGL is unavailable */
.hero-visual-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at center, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
  display: none;
}


/* Bottom fade — dissolves into the next section */
.hero-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  z-index: 11;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}

@media (min-width: 768px) {
  /* More scroll room on desktop — gives the full animation time to breathe */
  #hero {
    height: 300vh;
    margin-top: var(--nav-height-desktop);
  }

  .hero-sticky {
    top: var(--nav-height-desktop);
    height: calc(100vh - var(--nav-height-desktop));
  }

  .hero-stage {
    bottom: clamp(56px, 8vh, 96px);
    left:   clamp(48px, 6vw, 96px);
    right:  auto;
    max-width: min(620px, 44vw);    /* left column: ~44 % of viewport, clear of visual */
  }

  #hero-stage-1,
  #hero-stage-2 {
    bottom: auto;
    top: clamp(40px, 6vh, 72px);
  }

  #hero-stage-3 {
    top: auto;
    bottom: clamp(56px, 8vh, 96px);
  }

  .hero-actions {
    flex-direction: row;
    align-items: center;
  }
}


/* ============================================================
   11. SOCIAL PROOF BAR
   ============================================================ */
#social-proof {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: 18px;
  overflow: hidden;
}

.marquee-track {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.proof-item {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.proof-dot {
  color: var(--color-accent-bright);
  font-size: 16px;
  flex-shrink: 0;
}


/* ============================================================
   12. PROBLEM SECTION
   ============================================================ */
#problem {
  background: var(--color-bg);
}

.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.problem-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.problem-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-hover);
  box-shadow: var(--glow-card);
}

/* Clickable card variant */
.problem-card--link {
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.problem-card--link:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: var(--color-accent);
  box-shadow: 0 0 40px rgba(124, 58, 237, 0.28), 0 8px 32px rgba(0, 0, 0, 0.4);
}

.card-link-hint {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent-bright);
  transition: gap var(--transition-base), opacity var(--transition-base);
  opacity: 0.75;
}

.problem-card--link:hover .card-link-hint {
  opacity: 1;
}

.card-icon {
  width: 48px;
  height: 48px;
  color: var(--color-accent-bright);
  margin-bottom: var(--space-sm);
  flex-shrink: 0;
}

.card-icon svg {
  width: 100%;
  height: 100%;
}

.card-title {
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

.card-body {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

@media (min-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .problem-card {
    padding: var(--space-md) var(--space-md) var(--space-lg);
  }
}


/* ============================================================
   13. SOLUTION SECTION
   ============================================================ */
#solution {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.solution-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.solution-row:last-of-type {
  border-bottom: none;
}

/* Visual placeholder */
.solution-visual {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}

.solution-placeholder {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
}

.solution-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(124, 58, 237, 0.08) 0%, transparent 70%);
}

.solution-svg {
  width: 160px;
  height: 160px;
  position: relative;
  z-index: 1;
}

.placeholder-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  position: relative;
  z-index: 1;
}

/* Solution copy */
.solution-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.solution-num {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-bright);
}

.solution-title {
  color: var(--color-text-primary);
}

.solution-body {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.feature-list li {
  font-size: 14px;
  color: var(--color-text-secondary);
  padding-left: 20px;
  position: relative;
}

.feature-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-accent-bright);
  font-size: 12px;
  top: 1px;
}

@media (min-width: 900px) {
  .solution-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .solution-row--reverse {
    direction: rtl;
  }

  .solution-row--reverse > * {
    direction: ltr;
  }

  .solution-visual {
    margin-inline: 0;
  }
}


/* ============================================================
   14. PROCESS SECTION
   ============================================================ */
#process {
  background: var(--color-bg);
}

.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  position: relative;
}

/* Connecting line — hidden on mobile, shown on desktop */
.process-connector {
  display: none;
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  position: relative;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.process-step:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--glow-card);
}

.step-icon {
  width: 40px;
  height: 40px;
  color: var(--color-accent-bright);
  background: var(--color-accent-muted);
  border-radius: var(--radius-sm);
  padding: 8px;
  flex-shrink: 0;
}

.step-icon svg {
  width: 100%;
  height: 100%;
}

.step-number {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: rgba(124, 58, 237, 0.15);
  line-height: 1;
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  letter-spacing: -0.04em;
  user-select: none;
}

.step-title {
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

.step-body {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.process-cta {
  text-align: center;
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .process-steps {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }

  .process-connector {
    display: block;
    position: absolute;
    top: 38px;
    left: calc(33.33% + 16px);
    width: calc(33.33% - 32px);
    height: 1px;
    background: linear-gradient(to right, var(--color-accent), transparent);
    z-index: 0;
    pointer-events: none;
  }
}


/* ============================================================
   15. TRUST SECTION
   ============================================================ */
#trust {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

/* Positioning statement */
.trust-statement {
  max-width: 560px;       /* tighter column prevents the headline filling the full width */
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-xl);
}

.trust-headline {
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
}

.trust-body {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--color-text-secondary);
  line-height: 1.75;
  max-width: 48ch;        /* keeps line length readable, avoids very long lines */
  margin-inline: auto;
}

/* Trust signals grid */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.trust-signal {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.trust-signal:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--glow-card);
}

.signal-icon {
  width: 40px;
  height: 40px;
  color: var(--color-accent-bright);
  margin-bottom: 4px;
}

.signal-icon svg {
  width: 100%;
  height: 100%;
}

.signal-stat {
  font-family: var(--font-body);  /* Inter — Syne's ß glyph renders incorrectly */
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.signal-sub {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Testimonial */
.testimonial {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  max-width: 720px;
  margin-inline: auto;
}

.testimonial-quote {
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.testimonial-author {
  font-size: 13px;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .trust-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ============================================================
   16. FINAL CTA SECTION
   ============================================================ */
#cta {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

#cta-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.cta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: pulseGlow 5s ease-in-out infinite;
  z-index: 0;
}

.cta-inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-2xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-width: 760px;
  margin-inline: auto;
}

.cta-headline {
  color: var(--color-text-primary);
}

.cta-sub {
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--color-text-secondary);
  max-width: 580px;
  line-height: 1.65;
}

.cta-reassurance {
  font-size: 13px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}


/* ============================================================
   17. FOOTER
   ============================================================ */
#footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-tagline {
  font-size: 14px;
  color: var(--color-text-muted);
  max-width: 260px;
  line-height: 1.6;
  margin-top: 4px;
}

.footer-col-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.footer-nav ul,
.footer-contact ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav a,
.footer-contact a {
  font-size: 14px;
  color: var(--color-text-secondary);
  transition: color var(--transition-base);
}

.footer-nav a:hover,
.footer-contact a:hover {
  color: var(--color-text-primary);
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-md);
}

.footer-bottom p {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
}

@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr auto auto;
    align-items: start;
    gap: var(--space-2xl);
  }
}


/* ============================================================
   18. SCROLL PROGRESS BAR
   ============================================================ */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-bright), #C084FC);
  z-index: 200;
  pointer-events: none;
  transition: width 0.1s linear;
  will-change: width;
}


/* ============================================================
   19. ACTIVE NAV LINK (scroll spy)
   ============================================================ */
.nav-link.is-active {
  color: var(--color-text-primary);
  position: relative;
}

.nav-link.is-active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--color-accent-bright);
  border-radius: 1px;
}


/* ============================================================
   20. HERO BACKGROUND — folded into section 10 above; kept here as comment
   ============================================================ */
/* Background gradients for #hero are set in section 10 and its media query. */


/* ============================================================
   21. SOLUTION SECTION — external SVG image styles
   ============================================================ */

/* Clean up placeholder padding now that the img handles internal spacing */
.solution-placeholder {
  padding: 0;
  overflow: hidden;
}

.solution-visual-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  /* Subtle scale-in on hover for the card feel */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.solution-placeholder:hover .solution-visual-img {
  transform: scale(1.03);
}


/* ============================================================
   22. COUNTER ANIMATION — trust signal numbers
   ============================================================ */
.counter-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  /* Inherits signal-stat size/weight */
  min-width: 1ch;
}


/* ============================================================
   23. PROCESS CONNECTOR — improved full-span line
   ============================================================ */
@media (min-width: 768px) {
  /* Ensure steps render above the connector line */
  .process-step {
    position: relative;
    z-index: 1;
  }

  /* Override the old single-segment connector with a full-width span.
     Step cards have a background color that naturally masks the portion
     behind them, leaving two visible gap segments. */
  .process-connector {
    top: 44px; /* centers on the 40px icon + 24px card padding */
    left: calc(16.67% + 24px);
    right: calc(16.67% + 24px);
    width: auto;
    background: linear-gradient(
      to right,
      transparent,
      var(--color-accent) 12%,
      rgba(147, 51, 234, 0.5) 50%,
      var(--color-accent) 88%,
      transparent
    );
  }
}


/* ============================================================
   24. HERO PARALLAX — layered visual system
   ============================================================ */

/*
  All layers share the same base: absolute, oversized by 15% on each edge
  so they can shift via translate3d without revealing the container edge.
  JS writes transform on each layer every rAF tick.
*/
.hero-layer {
  position: absolute;
  /* Extend 15% beyond each edge (total 130% × 130%) */
  top:    -15%;
  left:   -15%;
  width:  130%;
  height: 130%;
  pointer-events: none;
  will-change: transform;
  /* Load reveal: fade + deblur on page paint */
  animation: hero-layer-reveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Stacking order */
#layer-bg        { z-index: 0; animation-delay: 0.05s; }
#layer-grid      { z-index: 1; animation-delay: 0.15s; }
#layer-rings     { z-index: 2; animation-delay: 0.25s; }
#layer-orbs      { z-index: 3; animation-delay: 0.35s; }
#layer-particles { z-index: 4; animation-delay: 0.45s; }

@keyframes hero-layer-reveal {
  from { opacity: 0; filter: blur(8px);  }
  to   { opacity: 1; filter: blur(0px); }
}


/* ── Layer 1: Background glow ── */
#layer-bg {
  background:
    radial-gradient(ellipse 62% 55% at 65% 38%, rgba(124, 58, 237, 0.24) 0%, transparent 62%),
    radial-gradient(ellipse 40% 40% at 28% 70%, rgba(147, 51, 234, 0.14) 0%, transparent 58%);
}


/* ── Layer 2: Dot-grid tile ── */
#layer-grid {
  background: url('assets/hero-visuals/hero-grid.svg') repeat;
  background-size: 48px 48px;
  /* Fade out toward edges — keeps the grid centred and organic */
  -webkit-mask-image: radial-gradient(
    ellipse 68% 68% at center,
    black 15%, rgba(0,0,0,0.5) 45%, transparent 72%
  );
  mask-image: radial-gradient(
    ellipse 68% 68% at center,
    black 15%, rgba(0,0,0,0.5) 45%, transparent 72%
  );
  opacity: 0.55;
}


/* ── Layer 3: Orbital SVG rings ── */
#layer-rings {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rings-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Ring rotation — transform-origin uses SVG coordinate space */
@keyframes spin-hero-cw  { to { transform: rotate( 360deg); } }
@keyframes spin-hero-ccw { to { transform: rotate(-360deg); } }

.ring-outer { transform-origin: 300px 300px; animation: spin-hero-cw  54s linear infinite; }
.ring-mid   { transform-origin: 300px 300px; animation: spin-hero-ccw 34s linear infinite; }
.ring-inner { transform-origin: 300px 300px; animation: spin-hero-cw  20s linear infinite; }
.arc-a      { transform-origin: 300px 300px; animation: spin-hero-cw  54s linear infinite; }
.arc-b      { transform-origin: 300px 300px; animation: spin-hero-ccw 34s linear infinite; }


/* ── Layer 4: Floating colour orbs ── */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-orb--a {
  width: 58%;
  aspect-ratio: 1;
  top:  -8%;
  left: 12%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.38) 0%, transparent 70%);
  filter: blur(38px);
  animation: orb-drift-a 12s ease-in-out infinite alternate;
}

.hero-orb--b {
  width: 42%;
  aspect-ratio: 1;
  bottom: -4%;
  right:  4%;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.28) 0%, transparent 70%);
  filter: blur(28px);
  animation: orb-drift-b 9s ease-in-out infinite alternate;
}

.hero-orb--c {
  width: 26%;
  aspect-ratio: 1;
  top:  48%;
  left: 48%;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.32) 0%, transparent 70%);
  filter: blur(18px);
  animation: orb-drift-c 16s ease-in-out infinite alternate;
}

@keyframes orb-drift-a {
  from { transform: translate(  0px,   0px) scale(1.00); }
  to   { transform: translate( 22px, -20px) scale(1.12); }
}

@keyframes orb-drift-b {
  from { transform: translate(  0px,   0px) scale(1.00); }
  to   { transform: translate(-18px,  14px) scale(0.88); }
}

@keyframes orb-drift-c {
  from { transform: translate( 0px,  0px); }
  to   { transform: translate(16px, 18px); }
}


/* ── Layer 5: Floating particles (DOM spans injected by JS) ── */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: #C084FC;
  opacity: var(--p-opacity, 0.4);
  transform-origin: center;
  animation: particle-float linear infinite both;
}

@keyframes particle-float {
  0%,100% {
    transform: translateY(0)     scale(1.0);
    opacity:   var(--p-opacity, 0.4);
  }
  50% {
    transform: translateY(-20px) scale(1.35);
    opacity:   calc(var(--p-opacity, 0.4) * 1.65);
  }
}


/* ============================================================
   25. FOUNDER / ABOUT TRUST SECTION
   ============================================================ */

#founder {
  background: var(--color-bg);
}

.founder-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

/* ── Photo column ── */
.founder-photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

@keyframes founder-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(124, 58, 237, 0.28),
      0 0 32px rgba(124, 58, 237, 0.12),
      0 28px 72px rgba(0, 0, 0, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(124, 58, 237, 0.55),
      0 0 56px rgba(124, 58, 237, 0.26),
      0 28px 72px rgba(0, 0, 0, 0.55);
  }
}

.founder-photo-wrap {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  animation: founder-glow 4s ease-in-out infinite;
}

.founder-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: brightness(0.96) saturate(0.92);
}

.founder-identity {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.founder-name {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.founder-role {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ── Content column ── */
.founder-content {}

.founder-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-bright);
  margin-bottom: var(--space-sm);
}

.founder-headline {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.founder-body {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--color-text-secondary);
  line-height: 1.75;
  max-width: 44ch;
  margin-bottom: var(--space-lg);
}

/* ── Trust bullet cards ── */
.founder-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@keyframes icon-pulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 14px rgba(124, 58, 237, 0.45); }
}

.founder-bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition:
    border-color var(--transition-base),
    box-shadow   var(--transition-base),
    transform    var(--transition-base);
}

.founder-bullet:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--glow-card);
  transform: translateY(-1px);
}

.founder-bullet-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--color-accent-muted);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-bright);
}

.founder-bullet[data-stagger="0"] .founder-bullet-icon {
  animation: icon-pulse 3s ease-in-out infinite;
}
.founder-bullet[data-stagger="1"] .founder-bullet-icon {
  animation: icon-pulse 3s ease-in-out infinite;
  animation-delay: -1s;
}
.founder-bullet[data-stagger="2"] .founder-bullet-icon {
  animation: icon-pulse 3s ease-in-out infinite;
  animation-delay: -2s;
}

@keyframes icon-float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-5px); }
}

/* On card hover: only that card's icon floats — glow continues alongside */
.founder-bullet:hover .founder-bullet-icon {
  animation:
    icon-float 1.4s ease-in-out infinite,
    icon-pulse 3s   ease-in-out infinite;
}

/* ── Founder section: custom scroll-reveal overrides ──────────
   Photo slides in from the left; headline, body, and cards
   reveal in a sequenced cascade once the section is in view.
   Icons keep their existing icon-pulse loop (defined above).
──────────────────────────────────────────────────────────── */

/* Slide-from-left variant — applied alongside animate-on-scroll */
.animate-from-left {
  transform: translateX(-28px) translateY(10px) !important;
  transition-duration: 0.80s !important;
}
.animate-from-left.is-visible {
  transform: none !important;
}

/* Sequenced cascade delays within #founder */
#founder .founder-photo-wrap.animate-on-scroll   { transition-delay: 0s;    }
#founder .founder-identity.animate-on-scroll     { transition-delay: 0.20s; }
#founder .founder-headline.animate-on-scroll     { transition-delay: 0.12s; }
#founder .founder-body.animate-on-scroll         { transition-delay: 0.26s; }
#founder .founder-bullet[data-stagger="0"].animate-on-scroll { transition-delay: 0.40s; }
#founder .founder-bullet[data-stagger="1"].animate-on-scroll { transition-delay: 0.56s; }
#founder .founder-bullet[data-stagger="2"].animate-on-scroll { transition-delay: 0.72s; }

.founder-bullet-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.founder-bullet-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.founder-bullet-sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

@media (min-width: 768px) {
  .founder-inner {
    grid-template-columns: minmax(0, 340px) 1fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
  }

  .founder-photo-col {
    align-items: flex-start;
  }

  .founder-identity {
    text-align: left;
  }
}


/* ============================================================
   26. TESTIMONIALS SECTION
   ============================================================ */

#testimonials {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.testimonials-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.tcard {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.tcard:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--glow-card);
}

.tcard-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 4px;
}

.tcard-star {
  color: #C084FC;
  font-size: 14px;
  line-height: 1;
}

.tcard-quote {
  font-size: clamp(14px, 1.5vw, 15px);
  color: var(--color-text-secondary);
  line-height: 1.72;
  flex: 1;
}

.tcard-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
  margin-top: 4px;
}

.tcard-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-accent-muted);
  border: 1px solid rgba(124, 58, 237, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent-bright);
  flex-shrink: 0;
  overflow: hidden;   /* clips the circular image */
}

.tcard-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* favour the face over the chest */
  display: block;
  border-radius: 50%;
  filter: brightness(0.92) saturate(0.9);  /* soften into the dark UI */
}

.tcard-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tcard-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.tcard-role {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.3;
}

@media (min-width: 768px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ============================================================
   18. REDUCED MOTION — Respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-hero {
    opacity: 1;
    animation: none;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .marquee-inner {
    animation: none;
  }

  .hero-glow,
  .cta-glow {
    animation: none;
  }
}


/* ============================================================
   27. MOBILE OPTIMISATIONS  (≤ 767 px)
   Supplements the mobile-first base styles above.
   Tightens spacing, ensures thumb-friendly tap targets, and
   reduces GPU-expensive effects on low-power devices.
   ============================================================ */
@media (max-width: 767px) {

  /* ─── 1. Section spacing ───────────────────────────────── */
  .section-inner {
    padding-block: clamp(40px, 10vw, 52px);
  }

  .section-header {
    margin-bottom: var(--space-lg);
  }

  /* Smaller translate → snappier reveal, less layout thrash */
  .animate-on-scroll {
    transform: translateY(20px);
  }


  /* ─── 2. Buttons / CTAs ────────────────────────────────── */
  .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }

  .btn--large {
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;
    justify-content: center;
  }

  /* Inline secondary links — keep 44 px minimum tap height */
  .hero-text-link {
    font-size: 15px;
    padding-block: 10px;
    display: inline-block;
  }


  /* ─── 3. Hero ───────────────────────────────────────────── */
  .hero-stage {
    left:      clamp(16px, 4vw, 24px);
    right:     clamp(16px, 4vw, 24px);
    max-width: none;
    bottom:    clamp(28px, 5vh, 56px);
  }

  #hero-stage-1,
  #hero-stage-2 {
    top:    clamp(16px, 3vh, 32px);
    bottom: auto;
  }

  #hero-stage-3 {
    bottom: clamp(28px, 5vh, 56px);
    top:    auto;
  }

  .hero-sub {
    font-size:     15px;
    margin-bottom: var(--space-md);
  }

  .hero-actions {
    width:       100%;
    align-items: stretch;
  }

  /* Reduce GPU-expensive blur on mobile */
  .hero-orb--a { filter: blur(20px); }
  .hero-orb--b { filter: blur(14px); }
  .hero-orb--c { filter: blur(10px); }

  /* Less visual noise on small screens */
  #layer-grid  { opacity: 0.28; }
  #layer-rings { opacity: 0.60; }


  /* ─── 4. Social proof bar ─────────────────────────────── */
  .proof-item {
    font-size: 12px;
  }

  /* Faster marquee on small screens — content fits less space */
  .marquee-inner {
    animation-duration: 22s;
  }


  /* ─── 5. Solution section ───────────────────────────────── */
  .solution-row {
    gap:           var(--space-md);
    padding-block: var(--space-md);
  }

  .solution-visual {
    max-width: min(300px, 88vw);   /* never wider than viewport */
  }

  .solution-placeholder {
    max-height: 280px;
    aspect-ratio: auto;
  }

  .solution-copy {
    gap: 12px;
  }

  .solution-body {
    font-size: 15px;
  }


  /* ─── 6. Process section ─────────────────────────────────── */
  .process-steps {
    gap: var(--space-md);
  }

  .step-number {
    font-size: 36px;   /* oversized number — scale down slightly */
  }

  /* Full-width CTA below process steps */
  .process-cta .btn--large {
    width:     100%;
    min-width: 0;
  }


  /* ─── 7. Trust section ───────────────────────────────────── */
  .trust-statement {
    margin-bottom: var(--space-lg);
    padding-inline: 0;
  }

  .trust-grid {
    gap: 12px;
  }

  .trust-signal {
    padding: 16px;
  }

  .signal-stat {
    font-size: 15px;
  }

  /* Blockquote: 48 px horizontal padding is too wide on phone */
  .testimonial {
    padding: var(--space-md);
  }


  /* ─── 8. Founder section ─────────────────────────────────── */
  .founder-inner {
    gap: var(--space-lg);
  }

  .founder-photo-wrap {
    max-width: min(240px, 72vw);   /* responsive on very small phones */
  }

  .founder-headline {
    font-size: clamp(22px, 5.5vw, 32px);
  }

  .founder-body {
    max-width: 100%;
    font-size: 15px;
  }

  .founder-bullet {
    padding: 14px var(--space-sm);
  }


  /* ─── 9. Testimonials ────────────────────────────────────── */
  .testimonials-header {
    margin-bottom: var(--space-lg);
  }

  .tcard {
    padding: 16px;
  }

  .tcard-quote {
    font-size: 14px;
  }


  /* ─── 10. CTA section ─────────────────────────────────────── */
  .cta-inner {
    padding-block: clamp(48px, 12vw, 72px);
    gap:           var(--space-sm);
  }

  /* Contain the glow blob — 600 px overflows on any phone */
  .cta-glow {
    width:  300px;
    height: 300px;
  }

  .cta-sub {
    font-size: 15px;
  }

  .cta-reassurance {
    letter-spacing: 0;
    line-height: 1.7;
    text-align: center;
  }


  /* ─── 11. Footer ─────────────────────────────────────────── */
  .footer-inner {
    padding-block: var(--space-lg);
    gap:           var(--space-md);
  }

  .footer-tagline {
    max-width: 100%;
  }

  /* Ensure footer links meet 44 px tap target recommendation */
  .footer-nav a,
  .footer-contact a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding-block: 4px;
  }


  /* ─── 12. Mobile nav menu ────────────────────────────────── */
  /* Ensure each nav link is a comfortable 52 px tap target */
  .nav-links.is-open .nav-link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding-block: 6px;
    width: 100%;
    border-bottom: 1px solid var(--color-border);
  }

  /* Remove bottom border on the last nav link before the CTA */
  .nav-links.is-open .nav-link:last-of-type {
    border-bottom: none;
  }

}


/* ============================================================
   28. TOUCH DEVICES — remove hover-only effects
   On touchscreen devices hover states get "stuck" after a tap,
   creating ghost borders and transforms. Strip them cleanly.
   ============================================================ */
@media (hover: none) {

  .problem-card:hover,
  .problem-card--link:hover {
    transform:    none;
    box-shadow:   none;
    border-color: var(--color-border);
  }

  .process-step:hover {
    box-shadow:   none;
    border-color: var(--color-border);
  }

  .trust-signal:hover {
    box-shadow:   none;
    border-color: var(--color-border);
  }

  .tcard:hover {
    box-shadow:   none;
    border-color: var(--color-border);
  }

  .founder-bullet:hover {
    transform:    none;
    box-shadow:   none;
    border-color: var(--color-border);
  }

  /* Keep the resting icon-pulse; drop the float-on-tap */
  .founder-bullet:hover .founder-bullet-icon {
    animation: icon-pulse 3s ease-in-out infinite;
  }

  /* No scale on solution visual — no hover on touch */
  .solution-placeholder:hover .solution-visual-img {
    transform: none;
  }

  /* Buttons: no scale transform on tap (feels laggy) */
  .btn--primary:hover {
    transform: none;
  }

}