/* ── Grain overlay ─────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.018;
  pointer-events: none;
  z-index: 9998;
}

/* ── Nav ──────────────────────────────────────────────────── */
#nav { transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease; }
#nav.scrolled {
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(92,144,168,0.15);
}
.nav-link {
  position: relative;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: #5c90a8;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-link:hover::after,
.nav-link.nav-active::after { transform: scaleX(1); }
.nav-link.nav-active { color: #1d1d1b !important; }

/* ── Scroll reveal ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; }
.d5 { transition-delay: 0.40s; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  background: #5c90a8;
  color: white;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  background: #4a7d94;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(92,144,168,0.38);
}
.btn-primary:active { transform: translateY(0); box-shadow: none; }

.btn-outline {
  border: 1.5px solid rgba(92,144,168,0.4);
  color: #5c90a8;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-outline:hover { border-color: #5c90a8; background: rgba(92,144,168,0.06); }

.btn-ghost-dark {
  border: 1px solid rgba(255,255,255,0.28);
  color: white;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-ghost-dark:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.07); }

/* ── Cards ─────────────────────────────────────────────────── */
.product-card {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 64px rgba(92,144,168,0.14), 0 8px 16px rgba(29,29,27,0.06);
}
.vert-card {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), background 0.25s ease, box-shadow 0.25s ease;
}
.vert-card:hover { transform: translateY(-4px); border-color: rgba(92,144,168,0.35); box-shadow: 0 16px 40px rgba(92,144,168,0.1), 0 4px 16px rgba(29,29,27,0.06); }
.vert-card:hover .w-14 { background: rgba(92,144,168,0.14) !important; }
.feature-card {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(92,144,168,0.1); border-color: rgba(92,144,168,0.3) !important; }

/* ── Link arrow ────────────────────────────────────────────── */
.link-arrow { transition: gap 0.2s ease; }
.link-arrow:hover { gap: 0.625rem; }

/* ── Check icon ────────────────────────────────────────────── */
.check-icon { color: #5c90a8; flex-shrink: 0; margin-top: 2px; }

/* ── Waveform bars ─────────────────────────────────────────── */
@keyframes bar { 0%,100%{height:4px} 50%{height:24px} }
.bar { display:inline-block; width:3px; background:#5c90a8; border-radius:2px; }
.bar:nth-child(1){animation:bar 1.1s ease-in-out 0s infinite}
.bar:nth-child(2){animation:bar 1.1s ease-in-out 0.1s infinite}
.bar:nth-child(3){animation:bar 1.1s ease-in-out 0.2s infinite}
.bar:nth-child(4){animation:bar 1.1s ease-in-out 0.05s infinite}
.bar:nth-child(5){animation:bar 1.1s ease-in-out 0.15s infinite}
.bar:nth-child(6){animation:bar 1.1s ease-in-out 0.25s infinite}
.bar:nth-child(7){animation:bar 1.1s ease-in-out 0.08s infinite}
.bar:nth-child(8){animation:bar 1.1s ease-in-out 0.18s infinite}

/* ── Pulse dot ─────────────────────────────────────────────── */
@keyframes pulseRing { 0%{transform:scale(0.9);opacity:0.7} 100%{transform:scale(2.4);opacity:0} }
.pulse-ring  { animation: pulseRing 2.4s cubic-bezier(0.215,0.61,0.355,1) infinite; }
.pulse-ring2 { animation: pulseRing 2.4s cubic-bezier(0.215,0.61,0.355,1) 0.9s infinite; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #f8f7f5; }
::-webkit-scrollbar-thumb { background: #5c90a8; border-radius: 2px; }

/* ── Dividers ───────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #e2ddd8 20%, #e2ddd8 80%, transparent);
}
.divider-teal {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(92,144,168,0.2) 20%, rgba(92,144,168,0.2) 80%, transparent);
}

/* ── Inner page hero ────────────────────────────────────────── */
.page-hero {
  background: linear-gradient(160deg, #f0f6f9 0%, #e8f2f7 100%);
  padding-top: 9rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(92,144,168,0.12);
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb a { transition: color 0.2s ease; }
.breadcrumb a:hover { color: #5c90a8; }

/* ── GDPR section ───────────────────────────────────────────── */
.gdpr-section {
  background: linear-gradient(160deg, #e8f3f8 0%, #d8ecf5 50%, #e4f0f6 100%);
}

/* ── Hero entrance animation ────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(36px); }
  to   { opacity:1; transform:translateY(0); }
}
.hu { animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) both; }

/* ── Pills ──────────────────────────────────────────────────── */
.hero-pill {
  display:inline-flex; align-items:center; gap:8px;
  border: 1px solid rgba(92,144,168,0.25);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  padding: 6px 16px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #545250;
}
.feature-pill {
  border: 1px solid rgba(92,144,168,0.2);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  padding: 6px 16px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #545250;
}
.tag-pill {
  display: inline-block;
  border: 1px solid rgba(92,144,168,0.25);
  background: rgba(92,144,168,0.06);
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #5c90a8;
}

/* ── Process step line ──────────────────────────────────────── */
.step-connector {
  position: relative;
}
.step-connector::after {
  content: '';
  position: absolute;
  left: 18px;
  top: 40px;
  bottom: -28px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(92,144,168,0.3), transparent);
}
.step-connector:last-child::after { display: none; }

/* ── Stats card ─────────────────────────────────────────────── */
.stats-card {
  border: 1px solid rgba(226,221,216,0.5);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 1rem;
}