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

:root {
  --navy:    #0f2847;
  --blue:    #1d4ed8;
  --cyan:    #0891b2;
  --orange:  #d97706;
  --orange2: #ea580c;
  --green:   #10b981;
  --purple:  #7c3aed;
  --slate:   #475569;
  --muted:   #64748b;
  --border:  #e2e8f0;
  --bg:      #f8fafc;
  --white:   #ffffff;
  --font:    'Montserrat', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--navy);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ─── UTILITIES ─────────────────────────────────── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-weight: 700; font-size: 15px;
  padding: 13px 28px; border-radius: 10px; cursor: pointer;
  text-decoration: none; transition: all 0.2s ease; border: none;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color: #fff;
  box-shadow: 0 4px 18px rgba(217,119,6,0.28);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(217,119,6,0.38);
}
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--border);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

.tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--blue);
  background: rgba(29,78,216,0.07);
  padding: 5px 14px; border-radius: 20px; margin-bottom: 16px;
}

.section-header { text-align: center; margin-bottom: 56px; }
.section-header h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900; color: var(--navy); line-height: 1.2;
}
.section-header p {
  font-size: 16px; color: var(--muted); margin-top: 12px;
  max-width: 540px; margin-left: auto; margin-right: auto;
}

/* ─── SCROLL REVEAL ─────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* ─── RESPONSIVE MISC ────────────────────────────── */
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; }
  .btn { width: 100%; justify-content: center; }
  .flow-wrapper { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-fan-line .dot,
  .flow-arrow-h .pulse,
  .agent-dot { animation: none; }
  .reveal { opacity: 1; transform: none; }
}