:root {
  --accent: #1A91D4;
  --primary: #001337;
  --accent-glow: rgba(26, 145, 212, 0.18);
}

* { box-sizing: border-box; }

html { background: var(--primary); }

body {
  font-family: 'IBM Plex Sans', sans-serif;
  background-color: var(--primary);
  color: #e8edf5;
  overflow-x: hidden;
}

/* Shrinking header on scroll */
.header-inner {
  height: 5rem;
  transition: height 0.35s ease;
}
header.scrolled .header-inner {
  height: 3.5rem;
}

.header-logo {
  height: 2.75rem;
  transition: height 0.35s ease;
}
header.scrolled .header-logo {
  height: 1.75rem;
}

.nav-text {
  font-size: 1rem;
  transition: font-size 0.35s ease;
}
header.scrolled .nav-text {
  font-size: 0.875rem;
}

#mobile-menu {
  top: 5rem;
  transition: top 0.35s ease;
}
header.scrolled #mobile-menu {
  top: 3.5rem;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000d24; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, var(--accent) 60%, #7dd3fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Nav link hover underline */
.nav-link {
  position: relative;
  color: rgba(232, 237, 245, 0.75);
  transition: color 0.3s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-link:hover { color: #ffffff; }
.nav-link:hover::after { transform: scaleX(1); }

/* Primary button glow */
.btn-primary {
  background: var(--accent);
  color: #ffffff;
  transition: all 0.3s ease;
  position: relative;
}
.btn-primary:hover {
  transform: scale(1.04);
  box-shadow: 0 0 28px rgba(26, 145, 212, 0.55), 0 0 60px rgba(26, 145, 212, 0.2);
}

/* Ghost button */
.btn-ghost {
  border: 1px solid rgba(26, 145, 212, 0.4);
  color: rgba(232, 237, 245, 0.85);
  transition: all 0.3s ease;
}
.btn-ghost:hover {
  border-color: var(--accent);
  background: rgba(26, 145, 212, 0.08);
  color: #ffffff;
}

/* Feature card */
.feature-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(26, 145, 212, 0.18);
  transition: all 0.35s ease;
  opacity: 0;
  transform: translateY(32px);
}
.feature-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(26, 145, 212, 0.75);
  box-shadow: 0 8px 40px rgba(26, 145, 212, 0.12), 0 0 0 1px rgba(26, 145, 212, 0.12);
  background: rgba(26, 145, 212, 0.05);
}

/* Dot grid background */
.dot-grid {
  background-image: radial-gradient(circle, rgba(26, 145, 212, 0.18) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Float animation for hero art */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}
.float-anim { animation: float 6s ease-in-out infinite; }

/* Pulse glow */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}
.pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }

/* Slide up for sections */
.slide-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Step connector line */
.step-connector {
  border-top: 2px dashed rgba(26, 145, 212, 0.35);
}

/* Hamburger */
.hamburger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: #e8edf5;
  transition: all 0.3s ease;
}
#menu-toggle:checked ~ label .bar1 { transform: rotate(45deg) translate(4px, 4px); }
#menu-toggle:checked ~ label .bar2 { opacity: 0; transform: scaleX(0); }
#menu-toggle:checked ~ label .bar3 { transform: rotate(-45deg) translate(4px, -4px); }
#menu-toggle:checked ~ #mobile-menu { display: flex; }

/* Process step card */
.process-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(26, 145, 212, 0.15);
  transition: all 0.3s ease;
}
.process-card:hover {
  border-color: rgba(26, 145, 212, 0.5);
  background: rgba(26, 145, 212, 0.04);
}

/* ════════════════════════════════════════════════
   TONWERT-BÄNDER — Section-Rhythmus innerhalb des CD
   Alle Töne aus der Navy-Familie; ein heller Bruch.
════════════════════════════════════════════════ */
.band-deep   { background: #000d24; }
.band-base   { background: #001337; }
.band-raised {
  background: #04183f;
  border-top: 1px solid rgba(26, 145, 212, 0.12);
  border-bottom: 1px solid rgba(26, 145, 212, 0.12);
}

/* Heller, invertierter Bruch (mutiger Kontrast, gleiche CD-Farben) */
.band-light {
  background: #eef3fb;
  color: #001337;
  border-top: 1px solid rgba(26, 145, 212, 0.18);
  border-bottom: 1px solid rgba(26, 145, 212, 0.18);
}
/* Heller Text → dunkles Navy invertieren */
.band-light .text-white { color: #001337; }
.band-light .text-\[\#e8edf5\]\/45,
.band-light .text-\[\#e8edf5\]\/50,
.band-light .text-\[\#e8edf5\]\/55,
.band-light .text-\[\#e8edf5\]\/60,
.band-light .text-\[\#e8edf5\]\/65,
.band-light .text-\[\#e8edf5\]\/70,
.band-light .text-\[\#e8edf5\]\/75 { color: rgba(0, 19, 55, 0.62); }
/* Gradient-Text auf hell: dunkel → blau statt weiß → blau */
.band-light .gradient-text {
  background: linear-gradient(135deg, #001337 0%, #1A91D4 95%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* Cards auf hellem Grund */
.band-light .feature-card {
  background: #ffffff;
  border-color: rgba(0, 19, 55, 0.10);
}
.band-light .feature-card:hover {
  border-color: rgba(26, 145, 212, 0.55);
  background: #ffffff;
  box-shadow: 0 10px 40px rgba(0, 19, 55, 0.10), 0 0 0 1px rgba(26, 145, 212, 0.12);
}
/* Ghost-Button auf hell lesbar halten */
.band-light .btn-ghost { color: rgba(0, 19, 55, 0.75); }
.band-light .btn-ghost:hover { color: #001337; }

/* ════════════════════════════════════════════════
   CARD-VARIANTEN — Abwechslung bei gleichem Vokabular
════════════════════════════════════════════════ */
.feature-card.feature-card--solid {
  background: rgba(26, 145, 212, 0.08);
  border-color: rgba(26, 145, 212, 0.30);
}
.feature-card.feature-card--solid:hover {
  background: rgba(26, 145, 212, 0.12);
}
.feature-card.feature-card--ghost {
  background: transparent;
  border-color: rgba(232, 237, 245, 0.12);
}