/* ═══════════════════════════════════════════════════════════
   seventimes — v3 fris & vriendelijk
   Geïnspireerd door: Intercom, Calendly, Linear (light mode)
   Brandkleuren: Oranje #FF8C00 | Blauw #4B92DB | Groen #00A693
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ══════════════════════════════════════
   TOKENS
══════════════════════════════════════ */
:root {
  /* Brand */
  --orange:        #FF8C00;
  --orange-dk:     #d97600;
  --orange-lt:     #fff5e6;
  --orange-mid:    #ffe0b2;
  --green:         #00A693;
  --green-dk:      #007a6c;
  --green-lt:      #e6f7f5;
  --blue:          #4B92DB;
  --blue-dk:       #1e5fa8;
  --blue-lt:       #e8f2fb;

  /* Neutrals */
  --navy:          #0f1f38;
  --ink:           #1a2332;
  --ink-soft:      #3d4f63;
  --slate:         #64748b;
  --mist:          #94a3b8;
  --surface:       #f8fafc;
  --surface-warm:  #fdf8f3;
  --surface-cool:  #f0f7ff;
  --surface-mint:  #f0faf8;
  --border:        #e2e8f0;
  --border-soft:   #f1f5f9;

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Geometry */
  --r-xs:   .25rem;
  --r-sm:   .5rem;
  --r-md:   .875rem;
  --r-lg:   1.25rem;
  --r-xl:   1.75rem;
  --r-2xl:  2.5rem;
  --r-pill: 100px;

  /* Shadows — warm, zacht */
  --sh-xs:  0 1px 3px rgba(15,31,56,.06);
  --sh-sm:  0 2px 8px rgba(15,31,56,.07), 0 1px 3px rgba(15,31,56,.04);
  --sh-md:  0 6px 24px rgba(15,31,56,.08), 0 2px 8px rgba(15,31,56,.05);
  --sh-lg:  0 16px 48px rgba(15,31,56,.10), 0 4px 16px rgba(15,31,56,.06);
  --sh-xl:  0 28px 72px rgba(15,31,56,.13), 0 8px 24px rgba(15,31,56,.07);

  /* Transitions */
  --ease:   cubic-bezier(.4,0,.2,1);
  --fast:   160ms;
  --normal: 260ms;
}

/* ══════════════════════════════════════
   RESET & BASE
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--ink);
}

/* brand utilities */
.text-st-orange { color: var(--orange) !important; }
.text-st-blue   { color: var(--blue)   !important; }
.text-st-green  { color: var(--green)  !important; }
.bg-st-dark     { background-color: var(--navy) !important; }

/* ══════════════════════════════════════
   NAVBAR
   Wit met subtiele schaduw — Calendly-stijl
══════════════════════════════════════ */
.st-navbar {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding-top: .875rem;
  padding-bottom: .875rem;
  box-shadow: 0 1px 0 var(--border-soft);
  transition: box-shadow var(--fast) var(--ease);
}

.st-navbar.navbar-dark .nav-link { color: var(--ink-soft); }

.st-brand {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink) !important;
  text-decoration: none;
  letter-spacing: -.025em;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.st-logo-icon {
  width: 2rem; height: 2rem;
  background: var(--orange);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 900;
  font-size: .82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(255,140,0,.35);
}

.st-navbar .nav-link {
  color: var(--slate) !important;
  font-size: .875rem;
  font-weight: 500;
  padding: .45rem .75rem;
  border-radius: var(--r-sm);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.st-navbar .nav-link:hover,
.st-navbar .nav-link:focus {
  color: var(--ink) !important;
  background: var(--surface);
}

/* ── Knoppen ── */
.btn-st-primary {
  background: var(--orange);
  border: 1px solid var(--orange);
  color: #fff;
  font-family: var(--font);
  font-weight: 600;
  font-size: .875rem;
  border-radius: var(--r-sm);
  transition:
    background var(--fast) var(--ease),
    box-shadow  var(--fast) var(--ease),
    transform   var(--fast) var(--ease);
}
.btn-st-primary:hover,
.btn-st-primary:focus {
  background: var(--orange-dk);
  border-color: var(--orange-dk);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,140,0,.32);
}

.btn-st-outline {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--ink-soft);
  font-family: var(--font);
  font-weight: 500;
  font-size: .875rem;
  border-radius: var(--r-sm);
  transition:
    border-color var(--fast) var(--ease),
    background   var(--fast) var(--ease),
    color        var(--fast) var(--ease);
}
.btn-st-outline:hover,
.btn-st-outline:focus {
  border-color: var(--ink-soft);
  background: var(--surface);
  color: var(--ink);
}

/* ══════════════════════════════════════
   HERO — parallax + blur + brand overlay
   Geïnspireerd op Intercom: sterk maar toegankelijk
══════════════════════════════════════ */
.st-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 8rem 0 7rem;
}

/* Achtergrond-afbeelding met parallax */
.st-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('https://picsum.photos/seed/seventimes-workspace/1920/1080');
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;   /* ← parallax */
  z-index: 0;
  /* Fallback voor iOS Safari (geen fixed attachment op mobile) */
  will-change: transform;
}

/* Blur + kleur-overlay over de achtergrondafbeelding */
.st-hero-overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: linear-gradient(
    145deg,
    rgba(15, 31, 56, 0.82) 0%,
    rgba(0,  90, 80, 0.74) 55%,
    rgba(15, 31, 56, 0.78) 100%
  );
  z-index: 1;
}

.st-hero > .container { position: relative; z-index: 2; }

/* Badge */
.st-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(255,140,0,.15);
  border: 1px solid rgba(255,140,0,.3);
  color: #ffa940;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .38rem 1rem;
  border-radius: var(--r-pill);
  margin-bottom: 2rem;
}

/* Heading */
.st-hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.st-hero h1 em {
  font-style: normal;
  background: linear-gradient(95deg, var(--orange) 0%, #ffb347 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.st-hero .lead {
  color: rgba(255,255,255,.65);
  font-size: 1.1rem;
  font-weight: 400;
  max-width: 480px;
  margin-bottom: 2.5rem;
  line-height: 1.82;
}

.st-hero-cta { display: flex; flex-wrap: wrap; gap: .875rem; }

/* Visueel gedeelte */
.st-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Zachte gloed achter de afbeelding */
.st-hero-visual::before {
  content: '';
  position: absolute;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(0,166,147,.32) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  filter: blur(48px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* App-screenshot (dummy) */
.st-hero-img {
  width: 100%;
  max-width: 430px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 40px 90px rgba(0,0,0,.5);
  position: relative;
  z-index: 1;
}

/* Glassmorphism status-kaart */
.st-hero-card {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  width: 100%;
  max-width: 310px;
}

.st-hero-card .st-status-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .72rem 1rem;
  border-radius: var(--r-sm);
  margin-bottom: .5rem;
  font-size: .82rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
}
.st-hero-card .st-status-row:last-child { margin-bottom: 0; }
.st-status-row.open    { background: rgba(255,140,0,.14); }
.st-status-row.claimed { background: rgba(0,166,147,.14); }
.st-status-row.done    { background: rgba(75,146,219,.14); }

.st-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.st-status-dot.orange { background: var(--orange); box-shadow: 0 0 8px rgba(255,140,0,.75); }
.st-status-dot.green  { background: var(--green);  box-shadow: 0 0 8px rgba(0,166,147,.75); }
.st-status-dot.purple { background: var(--blue);   box-shadow: 0 0 8px rgba(75,146,219,.75); }

/* ══════════════════════════════════════
   GOLF-OVERGANG — hero naar content
══════════════════════════════════════ */
.st-wave {
  display: block;
  width: 100%;
  height: 60px;
  background: #fff;
  clip-path: ellipse(55% 100% at 50% 100%);
  margin-top: -2px;
}

/* ══════════════════════════════════════
   HERBRUIKBARE SECTION-ELEMENTEN
══════════════════════════════════════ */
.st-section-label {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .875rem;
}
.st-section-label.blue  { color: var(--blue);  }
.st-section-label.green { color: var(--green); }

.st-section-title {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: var(--ink);
}

/* ══════════════════════════════════════
   PROBLEM SECTIE — licht warm
══════════════════════════════════════ */
.st-problem {
  background: #fff;
  padding: 6rem 0;
}

.st-problem-quote {
  font-size: 1.05rem;
  line-height: 2;
  color: var(--ink-soft);
}
.st-problem-quote em {
  font-style: italic;
  color: var(--orange);
  font-weight: 500;
}

/* Chaos lijst — vriendelijke kaarten */
.st-chaos-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.st-chaos-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.125rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange-mid);
  transition:
    border-left-color var(--fast) var(--ease),
    background        var(--fast) var(--ease),
    transform         var(--fast) var(--ease),
    box-shadow        var(--fast) var(--ease);
}

.st-chaos-list li:hover {
  border-left-color: var(--orange);
  background: var(--surface-warm);
  transform: translateX(5px);
  box-shadow: var(--sh-xs);
  color: var(--ink);
}

.st-chaos-list .bi {
  color: var(--orange);
  font-size: 1rem;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   HOW IT WORKS — koel licht blauw
══════════════════════════════════════ */
.st-how {
  padding: 6rem 0;
  background: var(--surface-cool);
  position: relative;
}

/* Decoratieve golvende rand bovenaan */
.st-how::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0; right: 0;
  height: 40px;
  background: #fff;
  clip-path: ellipse(55% 100% at 50% 0%);
}

.st-step {
  text-align: center;
  padding: 2.5rem 1.875rem;
  background: #fff;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition:
    box-shadow  var(--normal) var(--ease),
    transform   var(--normal) var(--ease);
}

/* Groot decoratief getal in de achtergrond */
.st-step::before {
  content: attr(data-step);
  position: absolute;
  bottom: -.75rem; right: .75rem;
  font-size: 6.5rem;
  font-weight: 900;
  color: rgba(0,0,0,.04);
  line-height: 1;
  letter-spacing: -.06em;
  pointer-events: none;
  user-select: none;
}

.st-step:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-6px);
}

.st-step-number {
  display: inline-flex;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: var(--orange-lt);
  color: var(--orange);
  font-size: 1.2rem;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border: 2px solid rgba(255,140,0,.18);
}
.st-step-number.green { background: var(--green-lt); color: var(--green); border-color: rgba(0,166,147,.18); }
.st-step-number.blue  { background: var(--blue-lt);  color: var(--blue);  border-color: rgba(75,146,219,.18); }

.st-step h4 { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; color: var(--ink); }
.st-step p  { font-size: .85rem; color: var(--slate); margin: 0; line-height: 1.65; }

.st-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1.75rem;
  color: var(--mist);
  font-size: .9rem;
}

/* ══════════════════════════════════════
   FEATURE CARDS — wit met gekleurde top-accent
══════════════════════════════════════ */
.st-features {
  background: #fff;
  padding: 6rem 0;
  position: relative;
}

.st-features::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0; right: 0;
  height: 40px;
  background: var(--surface-cool);
  clip-path: ellipse(55% 100% at 50% 0%);
}

.st-feature-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 2rem;
  height: 100%;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  border-top-width: 3px;
  border-top-color: var(--orange);
  transition:
    box-shadow  var(--normal) var(--ease),
    transform   var(--normal) var(--ease);
}

.st-feature-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-5px);
}

.st-feature-icon {
  width: 2.75rem; height: 2.75rem;
  background: var(--orange-lt);
  color: var(--orange);
  border-radius: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}
.st-feature-icon.green { background: var(--green-lt); color: var(--green); }
.st-feature-icon.blue  { background: var(--blue-lt);  color: var(--blue);  }

.st-feature-card h5 {
  font-size: .93rem;
  font-weight: 700;
  margin-bottom: .45rem;
  color: var(--ink);
}
.st-feature-card p {
  font-size: .83rem;
  color: var(--slate);
  margin: 0;
  line-height: 1.65;
}

/* ══════════════════════════════════════
   CALLOUT BAND — licht warm gradient
   NIET donker — vriendelijk en uitnodigend
══════════════════════════════════════ */
.st-callout {
  background: linear-gradient(135deg, var(--surface-warm) 0%, var(--surface-mint) 100%);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Decoratief oranje cirkel-element */
.st-callout::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,140,0,.08) 0%, transparent 70%);
  pointer-events: none;
}

.st-callout h2 {
  color: var(--ink);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
}

.st-tried-list { list-style: none; padding: 0; margin: 0 0 2rem; }

.st-tried-list li {
  padding: .45rem 0;
  color: var(--slate);
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.st-tried-list li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

.st-insight {
  color: var(--ink-soft);
  font-size: 1.05rem;
  font-style: italic;
}

/* Quote-kaart in de callout */
.st-callout-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 2.5rem;
  box-shadow: var(--sh-md);
  border: 1px solid var(--border);
}

/* ══════════════════════════════════════
   COLLABORATION — licht cool
══════════════════════════════════════ */
.st-collab {
  background: var(--surface);
  padding: 6rem 0;
}

.st-collab-icon-row { display: flex; gap: .625rem; flex-wrap: wrap; margin-top: 2rem; }

.st-collab-pill {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border-radius: var(--r-pill);
  padding: .5rem 1.1rem;
  font-size: .8rem;
  font-weight: 500;
  border: 1px solid var(--border);
  color: var(--slate);
  box-shadow: var(--sh-xs);
  transition:
    border-color var(--fast) var(--ease),
    color        var(--fast) var(--ease),
    box-shadow   var(--fast) var(--ease);
}
.st-collab-pill:hover {
  border-color: var(--green);
  color: var(--green-dk);
  box-shadow: var(--sh-sm);
}
.st-collab-pill .bi { color: var(--green); font-size: .9rem; }

/* ══════════════════════════════════════
   ABOUT PERRY — wit, helder
══════════════════════════════════════ */
.st-about { background: #fff; padding: 6rem 0; }
.st-about-photo-wrap { display: flex; justify-content: center; }

.st-about-photo {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  border: 1px solid var(--border);
}

.st-about-photo-placeholder {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 3 / 4;
  background: linear-gradient(145deg, var(--green-dk) 0%, var(--green) 60%);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: rgba(255,255,255,.45);
  box-shadow: var(--sh-xl);
  font-size: .8rem;
}
.st-about-photo-placeholder .bi { font-size: 3rem; color: rgba(255,255,255,.45); }

.st-founder-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--orange-lt);
  color: var(--orange-dk);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem .875rem;
  border-radius: var(--r-pill);
  margin-bottom: 1rem;
  border: 1px solid var(--orange-mid);
}

.st-about-quote {
  border-left: 3px solid var(--green);
  padding-left: 1.25rem;
  margin: 1.75rem 0;
  font-style: italic;
  color: var(--slate);
  font-size: .975rem;
  line-height: 1.85;
}

/* ══════════════════════════════════════
   CTA SECTIE — warm oranje gradient
══════════════════════════════════════ */
.st-cta {
  background: linear-gradient(135deg, #f07300 0%, var(--orange) 45%, #ff7c00 100%);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.st-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 100% 50%, rgba(255,255,255,.09) 0%, transparent 60%),
    radial-gradient(ellipse 30% 50% at 0%   50%, rgba(0,0,0,.07)       0%, transparent 60%);
  pointer-events: none;
}

/* Decoratieve grote cirkel */
.st-cta::after {
  content: '';
  position: absolute;
  bottom: -120px; right: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  pointer-events: none;
}

.st-cta > .container { position: relative; z-index: 1; }

.st-cta h2 {
  color: #fff;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -.035em;
}

.st-cta p { color: rgba(255,255,255,.82); font-size: 1.05rem; margin-bottom: 2.5rem; }

.btn-st-white {
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  color: var(--orange-dk);
  font-family: var(--font);
  font-weight: 700;
  font-size: .875rem;
  border-radius: var(--r-sm);
  padding: .9rem 2.25rem;
  transition:
    transform  var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease),
    background var(--fast) var(--ease);
}
.btn-st-white:hover,
.btn-st-white:focus {
  background: rgba(255,255,255,.95);
  color: var(--orange-dk);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
}

.btn-st-white-outline {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.92);
  font-family: var(--font);
  font-weight: 600;
  font-size: .875rem;
  border-radius: var(--r-sm);
  padding: .875rem 2.25rem;
  transition:
    border-color var(--fast) var(--ease),
    background   var(--fast) var(--ease),
    color        var(--fast) var(--ease);
}
.btn-st-white-outline:hover,
.btn-st-white-outline:focus {
  border-color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* ══════════════════════════════════════
   CONTACT
══════════════════════════════════════ */
.st-contact { background: var(--surface); padding: 6rem 0; }

.st-contact-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 2.5rem;
  border: 1px solid var(--border);
  box-shadow: var(--sh-md);
}

.st-contact-card .form-control,
.st-contact-card .form-select {
  border-radius: var(--r-md);
  border-color: var(--border);
  padding: .72rem 1rem;
  font-size: .875rem;
  font-family: var(--font);
  background: var(--surface);
}
.st-contact-card .form-control:focus,
.st-contact-card .form-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(75,146,219,.14);
  background: #fff;
}

/* ══════════════════════════════════════
   FOOTER — navy, minimaal
══════════════════════════════════════ */
.st-footer {
  background: var(--navy);
  color: rgba(255,255,255,.6);
  border-top: 1px solid rgba(255,255,255,.07);
}

.st-footer-heading {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  margin-bottom: 1.25rem;
}

.st-footer-tagline { font-size: .83rem; color: rgba(255,255,255,.42); line-height: 1.8; margin: 0; }
.st-footer-copy    { font-size: .72rem; color: rgba(255,255,255,.28); }

.footer-link {
  font-size: .85rem;
  color: rgba(255,255,255,.52);
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}
.footer-link:hover, .footer-link:focus { color: rgba(255,255,255,.9); }

.st-footer-divider { border-color: rgba(255,255,255,.07); }

/* Logo zichtbaar op donkere footer */
.st-footer img { filter: brightness(0) invert(1); opacity: .85; }

/* ══════════════════════════════════════
   UTILITIES
══════════════════════════════════════ */
.ls-1 { letter-spacing: .04em; }
section { scroll-margin-top: 5rem; }

/* ══════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .st-hero-bg { background-attachment: scroll; }
  * { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 991.98px) {
  .st-hero,
  .st-problem, .st-how, .st-features,
  .st-callout, .st-collab, .st-about,
  .st-cta, .st-contact { padding: 5rem 0; }
}

@media (max-width: 767.98px) {
  .st-hero {
    padding: 6rem 0 4.5rem;
    min-height: auto;
    align-items: flex-start;
  }
  /* Op mobiel: background-attachment: fixed geeft issues — terugval */
  .st-hero-bg { background-attachment: scroll; }

  .st-hero-visual { margin-top: 3rem; }

  .st-connector { display: none; }

  .st-problem, .st-how, .st-features,
  .st-callout, .st-collab, .st-about,
  .st-cta, .st-contact { padding: 4rem 0; }

  .st-step::before { font-size: 5rem; }

  .st-how::before,
  .st-features::before { display: none; }
}