/* ════════════════════════════════════════════════════════════
   HUBSAVI — Main Stylesheet v6
   Enterprise Design System
   Behaviour Influence | Networks | AI & Technology
   ════════════════════════════════════════════════════════════

   NOTE: Google Fonts (Inter) is loaded via <link> in base.html —
   NOT via @import here. This avoids render-blocking behaviour.

   SECTIONS:
    1.  Design Tokens
    2.  Reset & Base
    3.  Accessibility
    4.  Navbar
    5.  Auth Nav (user state)
    6.  Buttons
    7.  Forms
    8.  Typography Utilities
    9.  Layout Utilities
    10. CTA Section
    11. Scroll Reveal
    12. Footer
    13. Hero
    14. Operational Visual
    15. Intent Routing Cards
    16. Ecosystem Flow Diagram
    17. Value Cards
    18. How It Works
    19. Trust Strip
    20. Floating Contact Buttons
    21. Responsive
    22. Motion Preferences
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ════════════════════════════════════════════════════════════ */
:root {

  /* ── Brand colours ──────────────────────────────────────── */
  --blue:        #2563eb;
  --blue-dark:   #1d4ed8;
  --blue-soft:   #eff6ff;
  --blue-mid:    #bfdbfe;

  --orange:      #f97316;
  --orange-dark: #ea6e0f;
  --orange-soft: #fff7ed;
  --orange-mid:  #fed7aa;

  --violet:      #7c3aed;
  --violet-dark: #6d28d9;
  --violet-soft: #f5f3ff;
  --violet-mid:  #ddd6fe;

  /* ── Neutrals ────────────────────────────────────────────── */
  --ink:         #0f172a;
  --text:        #1e293b;
  --text-2:      #334155;
  --muted:       #64748b;
  --muted-light: #94a3b8;

  --border:      #e2e8f0;
  --border-dark: #cbd5e1;

  --bg:          #f8fafc;
  --bg-2:        #f1f5f9;
  --white:       #ffffff;

  /* ── Status ──────────────────────────────────────────────── */
  --success:     #059669;
  --danger:      #dc2626;
  --warning:     #d97706;

  /* ── Typography ──────────────────────────────────────────── */
  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing scale ───────────────────────────────────────── */
  --s1:  0.25rem;
  --s2:  0.5rem;
  --s3:  0.75rem;
  --s4:  1rem;
  --s5:  1.25rem;
  --s6:  1.5rem;
  --s8:  2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --s24: 6rem;

  /* ── Border radius ───────────────────────────────────────── */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 24px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs: 0 1px 3px rgba(15,23,42,0.05);
  --shadow-sm: 0 2px 8px rgba(15,23,42,0.07);
  --shadow-md: 0 4px 20px rgba(15,23,42,0.09);
  --shadow-lg: 0 8px 40px rgba(15,23,42,0.12);
  --shadow-xl: 0 16px 64px rgba(15,23,42,0.15);

  /* ── Transitions ─────────────────────────────────────────── */
  --t-fast:   0.12s ease;
  --t-base:   0.2s ease;
  --t-slow:   0.35s ease;
  --t-spring: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Icon sizes ──────────────────────────────────────────── */
  --icon-sm: 32px;
  --icon-md: 44px;
  --icon-lg: 56px;
  --icon-xl: 72px;
}

/* ════════════════════════════════════════════════════════════
   2. RESET & BASE
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:            var(--font);
  font-size:              1rem;
  line-height:            1.7;
  color:                  var(--text);
  background:             var(--white);
  margin:                 0;
  padding:                0;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); }

/* ════════════════════════════════════════════════════════════
   3. ACCESSIBILITY
   ════════════════════════════════════════════════════════════ */

/* Skip-to-content link — visible on keyboard focus only */
.skip-to-content {
  position:      absolute;
  top:           -100px;
  left:          0;
  background:    var(--ink);
  color:         var(--white) !important;
  padding:       0.75rem 1.25rem;
  font-size:     0.875rem;
  font-weight:   600;
  z-index:       9999;
  text-decoration: none;
  border-radius: 0 0 var(--r-md) 0;
  transition:    top var(--t-fast);
}

.skip-to-content:focus {
  top:            0;
  outline:        2px solid var(--blue);
  outline-offset: 2px;
}

/* Focus visible: keyboard users only, not mouse users */
:focus { outline: none; }

:focus-visible {
  outline:        2px solid var(--blue);
  outline-offset: 2px;
  border-radius:  var(--r-sm);
}

.savi-cta-btn:focus-visible,
.savi-btn-secondary:focus-visible {
  outline:        2px solid var(--blue);
  outline-offset: 3px;
}

/* Visually hidden — accessible to screen readers */
.visually-hidden,
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border:     0;
}

/* ════════════════════════════════════════════════════════════
   4. NAVBAR
   ════════════════════════════════════════════════════════════ */
.savi-navbar {
  background:    var(--white) !important;
  border-bottom: 1px solid var(--border);
  padding:       0.75rem 0;
  box-shadow:    var(--shadow-xs);
  transition:    box-shadow var(--t-base);
}

.savi-navbar.scrolled { box-shadow: var(--shadow-sm); }

/* Logo */
.savi-logo {
  font-size:       1.45rem;
  font-weight:     800;
  letter-spacing:  -0.04em;
  text-decoration: none !important;
  line-height:     1;
}

.logo-hub  { color: var(--ink)  !important; }
.logo-savi { color: var(--blue) !important; }

/* Nav links */
.savi-navbar .nav-link {
  color:         var(--text-2) !important;
  font-size:     0.875rem;
  font-weight:   500;
  padding:       0.45rem 0.7rem !important;
  border-radius: var(--r-md);
  transition:    color var(--t-base), background var(--t-base);
}

.savi-navbar .nav-link:hover,
.savi-navbar .nav-link.active {
  color:      var(--blue)      !important;
  background: var(--blue-soft);
}

/* Dropdown */
.savi-dropdown {
  background:    var(--white)  !important;
  border:        1px solid var(--border) !important;
  border-radius: var(--r-lg);
  padding:       0.5rem;
  min-width:     240px;
  margin-top:    0.5rem;
  box-shadow:    var(--shadow-md);
}

.savi-dropdown .dropdown-item {
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
  color:         var(--text-2) !important;
  font-size:     0.875rem;
  font-weight:   450;
  padding:       0.55rem 0.9rem;
  border-radius: var(--r-md);
  transition:    all var(--t-fast);
}

.savi-dropdown .dropdown-item svg {
  width:           15px;
  height:          15px;
  min-width:       15px;
  fill:            none;
  stroke:          var(--muted);
  stroke-width:    1.75;
  stroke-linecap:  round;
  stroke-linejoin: round;
  flex-shrink:     0;
}

.savi-dropdown .dropdown-item:hover {
  background: var(--blue-soft) !important;
  color:      var(--blue)      !important;
}

.savi-dropdown .dropdown-item:hover svg { stroke: var(--blue); }

.savi-dropdown .dropdown-item-danger:hover {
  background: #fef2f2 !important;
  color:      var(--danger) !important;
}

.savi-dropdown .dropdown-item-danger:hover svg { stroke: var(--danger); }

.savi-dropdown .dropdown-divider {
  border-color: var(--border);
  margin:       0.35rem 0.5rem;
}

/* ════════════════════════════════════════════════════════════
   5. AUTH NAV (user state in navbar)
   ════════════════════════════════════════════════════════════ */
.savi-user-nav {
  display:     flex !important;
  align-items: center;
  gap:         0.5rem;
}

.user-nav-avatar {
  width:           28px;
  height:          28px;
  min-width:       28px;
  background:      var(--blue-soft);
  border:          1px solid var(--blue-mid);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.7rem;
  font-weight:     700;
  color:           var(--blue);
  line-height:     1;
}

.user-nav-name {
  font-size:   0.875rem;
  font-weight: 500;
  color:       var(--text-2);
  max-width:   120px;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   6. BUTTONS
   ════════════════════════════════════════════════════════════ */

/* Primary CTA — always orange (RULE 4) */
.savi-cta-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             0.45rem;
  background:      var(--orange);
  color:           var(--white) !important;
  font-family:     var(--font);
  font-size:       0.875rem;
  font-weight:     600;
  padding:         0.6rem 1.3rem;
  border-radius:   var(--r-md);
  border:          none;
  text-decoration: none !important;
  white-space:     nowrap;
  cursor:          pointer;
  transition:      background var(--t-base), transform var(--t-spring), box-shadow var(--t-base);
  box-shadow:      0 2px 8px rgba(249,115,22,0.2);
  letter-spacing:  -0.01em;
}

.savi-cta-btn:hover {
  background:  var(--orange-dark);
  color:       var(--white) !important;
  transform:   translateY(-2px);
  box-shadow:  0 6px 20px rgba(249,115,22,0.3);
}

.savi-cta-btn:active { transform: translateY(0); }

/* Secondary button */
.savi-btn-secondary {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4rem;
  background:      var(--white);
  color:           var(--text-2) !important;
  font-family:     var(--font);
  font-size:       0.875rem;
  font-weight:     500;
  padding:         0.6rem 1.25rem;
  border-radius:   var(--r-md);
  border:          1px solid var(--border-dark);
  text-decoration: none !important;
  cursor:          pointer;
  transition:      all var(--t-base);
}

.savi-btn-secondary:hover {
  background:   var(--blue-soft);
  color:        var(--blue) !important;
  border-color: var(--blue-mid);
}

/* ════════════════════════════════════════════════════════════
   7. FORMS
   Consistent styles used across all platform forms
   ════════════════════════════════════════════════════════════ */
.form-label {
  font-size:     0.85rem;
  font-weight:   500;
  color:         var(--text-2);
  margin-bottom: 0.35rem;
  display:       block;
}

.form-control,
.form-select {
  font-family:   var(--font);
  font-size:     0.9rem;
  color:         var(--text);
  background:    var(--white);
  border:        1px solid var(--border-dark);
  border-radius: var(--r-md);
  padding:       0.65rem 0.9rem;
  transition:    border-color var(--t-base), box-shadow var(--t-base);
  width:         100%;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--blue);
  box-shadow:   0 0 0 3px rgba(37,99,235,0.1);
  outline:      none;
}

.form-control::placeholder { color: var(--muted-light); }

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--danger);
  box-shadow:   0 0 0 3px rgba(220,38,38,0.08);
}

.invalid-feedback {
  font-size: 0.8rem;
  color:     var(--danger);
  margin-top: 0.3rem;
}

/* Form error banner */
.form-error-banner {
  background:    #fef2f2;
  border:        1px solid #fecaca;
  border-radius: var(--r-md);
  padding:       0.75rem 1rem;
  font-size:     0.875rem;
  color:         var(--danger);
  margin-bottom: 1rem;
  display:       none;
}

.form-error-banner.visible { display: block; }

/* Form success state */
.form-success {
  text-align:    center;
  padding:       2rem 1rem;
  display:       none;
}

.form-success.visible { display: block; }

.form-success-icon {
  display:         flex;
  justify-content: center;
  margin-bottom:   1rem;
}

/* ════════════════════════════════════════════════════════════
   8. TYPOGRAPHY UTILITIES
   ════════════════════════════════════════════════════════════ */
.section-label {
  display:        block;
  font-size:      0.6875rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--blue);
  margin-bottom:  var(--s3);
}

.section-title {
  font-size:      clamp(1.5rem, 3vw, 2.25rem);
  font-weight:    700;
  color:          var(--ink);
  letter-spacing: -0.025em;
  line-height:    1.25;
  margin-bottom:  var(--s4);
}

.section-sub {
  font-size:   0.9375rem;
  color:       var(--muted);
  line-height: 1.7;
  max-width:   600px;
}

/* ════════════════════════════════════════════════════════════
   9. LAYOUT UTILITIES
   ════════════════════════════════════════════════════════════ */
.section-pad    { padding: var(--s20) 0; }
.section-pad-sm { padding: var(--s12) 0; }
.section-pad-lg { padding: var(--s24) 0; }

.bg-soft   { background: var(--bg)   !important; }
.bg-soft-2 { background: var(--bg-2) !important; }

/* ════════════════════════════════════════════════════════════
   10. CTA SECTION (dark strip)
   ════════════════════════════════════════════════════════════ */
.savi-cta-section {
  background: var(--ink);
  padding:    var(--s20) 0;
  text-align: center;
  position:   relative;
  overflow:   hidden;
}

.savi-cta-section::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37,99,235,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.cta-heading {
  font-size:      clamp(1.5rem, 3vw, 2.25rem);
  font-weight:    700;
  color:          var(--white) !important;
  letter-spacing: -0.025em;
  line-height:    1.25;
  margin-bottom:  var(--s3);
}

.cta-sub {
  font-size:   1rem;
  color:       rgba(255,255,255,0.6);
  line-height: 1.7;
}

/* ════════════════════════════════════════════════════════════
   11. SCROLL REVEAL
   ════════════════════════════════════════════════════════════ */
.reveal {
  opacity:    0;
  transform:  translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }

/* ════════════════════════════════════════════════════════════
   12. FOOTER
   ════════════════════════════════════════════════════════════ */
.savi-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding:    var(--s20) 0 var(--s8);
}

.footer-brand {
  font-size:      1.45rem;
  font-weight:    800;
  letter-spacing: -0.04em;
  line-height:    1;
}

.logo-hub-footer  { color: var(--ink)  !important; }
.logo-savi-footer { color: var(--blue) !important; }

.footer-services {
  font-size:   0.8rem;
  color:       var(--muted);
  margin:      0.4rem 0 0.3rem;
  line-height: 1.5;
}

.footer-tagline {
  font-size:   0.78rem;
  color:       var(--muted-light);
  font-style:  italic;
  line-height: 1.6;
}

.footer-heading {
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--ink);
  margin-bottom:  var(--s4);
}

.footer-links {
  list-style: none;
  padding:    0;
  margin:     0;
}

.footer-links li {
  font-size:     0.875rem;
  margin-bottom: var(--s2);
}

.footer-links a {
  color:           var(--muted) !important;
  text-decoration: none;
  transition:      color var(--t-base);
}

.footer-links a:hover { color: var(--blue) !important; }

.footer-social {
  display:    flex;
  gap:        0.5rem;
  flex-wrap:  wrap;
  margin-top: var(--s4);
}

.footer-social a {
  color:           var(--muted) !important;
  font-size:       0.8rem;
  text-decoration: none;
  padding:         0.3rem 0.7rem;
  border:          1px solid var(--border);
  border-radius:   var(--r-sm);
  background:      var(--white);
  transition:      all var(--t-base);
}

.footer-social a:hover {
  color:        var(--blue)     !important;
  border-color: var(--blue-mid);
  background:   var(--blue-soft);
}

.footer-payment {
  background:    var(--white);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       var(--s4) var(--s5);
}

.footer-payment-title {
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--muted-light);
  margin-bottom:  var(--s3);
}

.footer-payment-item {
  display:       flex;
  gap:           0.5rem;
  font-size:     0.82rem;
  color:         var(--text-2);
  margin-bottom: var(--s2);
  line-height:   1.5;
}

.footer-payment-item span.label {
  color:       var(--orange);
  font-weight: 600;
  font-size:   0.75rem;
  min-width:   54px;
  flex-shrink: 0;
}

.footer-divider {
  border-color: var(--border);
  margin:       var(--s10) 0 var(--s6);
}

.footer-bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             0.5rem;
  font-size:       0.75rem;
  color:           var(--muted-light);
}

.footer-bottom a {
  color:           var(--muted-light) !important;
  text-decoration: none;
  transition:      color var(--t-base);
}

.footer-bottom a:hover { color: var(--muted) !important; }

/* ════════════════════════════════════════════════════════════
   13. HERO
   ════════════════════════════════════════════════════════════ */
.savi-hero {
  background:    linear-gradient(160deg, var(--blue-soft) 0%, var(--white) 50%, #fafcff 100%);
  border-bottom: 1px solid var(--border);
  padding:       var(--s24) 0 var(--s20);
  position:      relative;
  overflow:      hidden;
}

.savi-hero::before {
  content:        '';
  position:       absolute;
  top:            -20%;
  right:          -10%;
  width:          600px;
  height:         600px;
  background:     radial-gradient(circle, rgba(37,99,235,0.055) 0%, transparent 65%);
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 1; }

.hero-overline {
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--orange);
  margin-bottom:  var(--s4);
}

.hero-headline {
  font-size:      clamp(2rem, 4.5vw, 3.25rem);
  font-weight:    800;
  color:          var(--ink) !important;
  line-height:    1.12;
  letter-spacing: -0.04em;
  margin-bottom:  var(--s6);
}

.hero-sub {
  font-size:     1rem;
  color:         var(--muted);
  max-width:     520px;
  line-height:   1.75;
  margin-bottom: var(--s8);
}

.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════
   14. OPERATIONAL VISUAL (Hero panel)
   ════════════════════════════════════════════════════════════ */
.op-panel {
  background:    var(--white);
  border:        1px solid var(--border);
  border-radius: var(--r-2xl);
  padding:       1.75rem;
  box-shadow:    var(--shadow-lg);
  position:      relative;
}

.op-panel-header {
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
  margin-bottom:  var(--s5);
  padding-bottom: var(--s4);
  border-bottom:  1px solid var(--bg-2);
}

.op-panel-dots { display: flex; gap: 5px; }

.op-panel-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
}

.op-panel-dot-r { background: #fca5a5; }
.op-panel-dot-y { background: #fcd34d; }
.op-panel-dot-g { background: #6ee7b7; }

.op-panel-title {
  font-size:      0.72rem;
  font-weight:    600;
  color:          var(--muted-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.op-node-row {
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
  margin-bottom: var(--s3);
}

.op-node-row:last-child { margin-bottom: 0; }

.op-node {
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  padding:       0.5rem 0.75rem;
  flex:          1;
  transition:    border-color var(--t-base);
}

.op-node:hover { border-color: var(--blue-mid); }

.op-node-icon {
  width:           28px;
  height:          28px;
  min-width:       28px;
  border-radius:   var(--r-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.op-node-icon svg {
  width:           13px;
  height:          13px;
  fill:            none;
  stroke-width:    2;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.op-node-label {
  font-size:     0.75rem;
  font-weight:   500;
  color:         var(--text-2);
  flex:          1;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.op-node-status {
  font-size:     0.65rem;
  font-weight:   600;
  border-radius: 20px;
  padding:       0.15rem 0.5rem;
  white-space:   nowrap;
}

.op-status-active  { background: #f0fdf4; color: #059669; border: 1px solid #a7f3d0; }
.op-status-running { background: var(--blue-soft); color: var(--blue); border: 1px solid var(--blue-mid); }
.op-status-queued  { background: var(--orange-soft); color: var(--orange-dark); border: 1px solid var(--orange-mid); }

.op-connector {
  width:      1px;
  height:     14px;
  background: var(--border);
  margin-left: 14px;
  position:   relative;
}

.op-connector::after {
  content:       '';
  position:      absolute;
  bottom:        -4px;
  left:          -3px;
  width:         7px;
  height:        7px;
  border-right:  1.5px solid var(--border);
  border-bottom: 1.5px solid var(--border);
  transform:     rotate(45deg);
}

.op-panel-footer {
  margin-top:      var(--s5);
  padding-top:     var(--s4);
  border-top:      1px solid var(--bg-2);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.op-panel-stat { text-align: center; }

.op-panel-stat-num {
  font-size:      1.1rem;
  font-weight:    800;
  color:          var(--ink);
  letter-spacing: -0.03em;
  line-height:    1;
}

.op-panel-stat-label {
  font-size:  0.65rem;
  color:      var(--muted-light);
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════
   15. INTENT ROUTING CARDS
   ════════════════════════════════════════════════════════════ */
.intent-card {
  display:         block;
  background:      var(--white);
  border:          1px solid var(--border);
  border-radius:   var(--r-xl);
  padding:         var(--s8) var(--s6);
  text-decoration: none !important;
  color:           var(--ink) !important;
  transition:      all var(--t-base);
  height:          100%;
  position:        relative;
  overflow:        hidden;
}

.intent-card::before {
  content:          '';
  position:         absolute;
  bottom:           0; left: 0; right: 0;
  height:           3px;
  background:       var(--intent-accent, var(--blue));
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform var(--t-base);
}

.intent-card:hover {
  border-color: var(--intent-accent, var(--blue));
  box-shadow:   var(--shadow-md);
  transform:    translateY(-4px);
  color:        var(--ink) !important;
}

.intent-card:hover::before { transform: scaleX(1); }

.intent-icon-wrap {
  width:           48px;
  height:          48px;
  border-radius:   var(--r-lg);
  background:      var(--intent-bg, var(--blue-soft));
  border:          1px solid var(--intent-border, var(--blue-mid));
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   var(--s5);
  transition:      background var(--t-base);
}

.intent-icon-wrap svg {
  width:           22px;
  height:          22px;
  fill:            none;
  stroke:          var(--intent-accent, var(--blue));
  stroke-width:    1.75;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.intent-title {
  font-size:      1rem;
  font-weight:    700;
  color:          var(--ink);
  letter-spacing: -0.01em;
  margin-bottom:  var(--s2);
}

.intent-desc {
  font-size:     0.875rem;
  color:         var(--muted);
  line-height:   1.6;
  margin-bottom: var(--s5);
}

.intent-link {
  display:     flex;
  align-items: center;
  gap:         0.35rem;
  font-size:   0.8125rem;
  font-weight: 600;
  color:       var(--intent-accent, var(--blue));
  transition:  gap var(--t-base);
}

.intent-card:hover .intent-link { gap: 0.55rem; }

.intent-link svg {
  width:           12px;
  height:          12px;
  fill:            none;
  stroke:          currentColor;
  stroke-width:    2.5;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

/* ════════════════════════════════════════════════════════════
   16. ECOSYSTEM FLOW DIAGRAM
   ════════════════════════════════════════════════════════════ */
.eco-flow {
  display:                    flex;
  align-items:                stretch;
  gap:                        0;
  overflow-x:                 auto;
  padding-bottom:             var(--s2);
  scroll-snap-type:           x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:            none;
}

.eco-flow::-webkit-scrollbar { display: none; }

.eco-step {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  flex:             1;
  min-width:        100px;
  position:         relative;
  scroll-snap-align: center;
}

.eco-step:not(:last-child)::after {
  content:    '';
  position:   absolute;
  top:        22px;
  right:      -1px;
  width:      calc(50% + 1px);
  height:     2px;
  background: linear-gradient(90deg, var(--blue-mid), var(--border));
  z-index:    0;
}

.eco-step:not(:first-child)::before {
  content:    '';
  position:   absolute;
  top:        22px;
  left:       -1px;
  width:      calc(50% + 1px);
  height:     2px;
  background: linear-gradient(90deg, var(--border), var(--blue-mid));
  z-index:    0;
}

.eco-node {
  width:           44px;
  height:          44px;
  background:      var(--white);
  border:          2px solid var(--border);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
  z-index:         1;
  transition:      all var(--t-base);
  margin-bottom:   var(--s3);
}

.eco-step.active .eco-node {
  border-color: var(--blue);
  background:   var(--blue-soft);
}

.eco-node svg {
  width:           18px;
  height:          18px;
  fill:            none;
  stroke:          var(--muted-light);
  stroke-width:    1.75;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.eco-step.active .eco-node svg { stroke: var(--blue); }

.eco-label {
  font-size:   0.72rem;
  font-weight: 600;
  color:       var(--muted);
  text-align:  center;
  line-height: 1.3;
  max-width:   80px;
}

.eco-step.active .eco-label { color: var(--blue); font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   17. VALUE CARDS
   ════════════════════════════════════════════════════════════ */
.value-card {
  background:    var(--white);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  padding:       var(--s8) var(--s6);
  text-align:    center;
  transition:    all var(--t-base);
  height:        100%;
}

.value-card:hover {
  border-color: var(--blue-mid);
  box-shadow:   var(--shadow-sm);
  transform:    translateY(-2px);
}

.value-from  { font-size: 0.82rem; color: var(--muted-light); margin-bottom: var(--s3); font-style: italic; }

.value-arrow {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  background:      var(--orange-soft);
  border:          1px solid var(--orange-mid);
  border-radius:   50%;
  margin:          0 auto var(--s3);
}

.value-arrow svg {
  width:           14px;
  height:          14px;
  fill:            none;
  stroke:          var(--orange);
  stroke-width:    2.5;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.value-to { font-size: 0.9375rem; font-weight: 700; color: var(--ink); }

/* ════════════════════════════════════════════════════════════
   18. HOW IT WORKS STEPS
   ════════════════════════════════════════════════════════════ */
.how-step {
  display:        flex;
  gap:            var(--s5);
  position:       relative;
  padding-bottom: var(--s8);
}

.how-step:last-child { padding-bottom: 0; }

.how-step:not(:last-child)::after {
  content:    '';
  position:   absolute;
  left:       19px;
  top:        40px;
  bottom:     0;
  width:      2px;
  background: var(--border);
}

.how-num {
  width:           40px;
  height:          40px;
  min-width:       40px;
  border-radius:   50%;
  background:      var(--blue-soft);
  border:          2px solid var(--blue-mid);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.875rem;
  font-weight:     700;
  color:           var(--blue);
  flex-shrink:     0;
  position:        relative;
  z-index:         1;
}

.how-content strong {
  display:       block;
  font-size:     0.9375rem;
  font-weight:   600;
  color:         var(--ink);
  margin-bottom: var(--s1);
  margin-top:    var(--s2);
}

.how-content p {
  font-size:   0.875rem;
  color:       var(--muted);
  line-height: 1.65;
  margin:      0;
}

/* ════════════════════════════════════════════════════════════
   19. TRUST STRIP
   ════════════════════════════════════════════════════════════ */
.trust-strip {
  background:  var(--white);
  border-top:  1px solid var(--border);
  padding:     var(--s10) 0;
}

.trust-item { text-align: center; padding: var(--s3); }

.trust-icon {
  width:           40px;
  height:          40px;
  background:      var(--blue-soft);
  border:          1px solid var(--blue-mid);
  border-radius:   var(--r-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto var(--s3);
}

.trust-icon svg {
  width:           18px;
  height:          18px;
  stroke:          var(--blue);
  fill:            none;
  stroke-width:    1.75;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.trust-title { font-size: 0.875rem; font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; }
.trust-desc  { font-size: 0.78rem;  color: var(--muted); line-height: 1.5; }

/* ════════════════════════════════════════════════════════════
   20. FLOATING CONTACT BUTTONS
   ════════════════════════════════════════════════════════════ */
.float-contact {
  position:       fixed;
  right:          1.25rem;
  bottom:         1.75rem;
  z-index:        999;
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            0.6rem;
}

.float-btn {
  display:         flex;
  align-items:     center;
  gap:             0;
  border-radius:   28px;
  padding:         0.65rem;
  text-decoration: none !important;
  cursor:          pointer;
  transition:      all var(--t-base);
  box-shadow:      var(--shadow-md);
  overflow:        hidden;
  max-width:       44px;
  white-space:     nowrap;
  border:          none;
}

.float-btn:hover {
  max-width: 200px;
  padding:   0.65rem 1rem 0.65rem 0.75rem;
  gap:       0.5rem;
}

.float-btn svg {
  width:           20px;
  height:          20px;
  min-width:       20px;
  fill:            none;
  stroke:          var(--white);
  stroke-width:    2;
  stroke-linecap:  round;
  stroke-linejoin: round;
  flex-shrink:     0;
}

.float-label {
  font-family: var(--font);
  font-size:   0.8125rem;
  font-weight: 600;
  color:       var(--white);
  opacity:     0;
  max-width:   0;
  overflow:    hidden;
  transition:  opacity 0.15s ease, max-width 0.2s ease;
}

.float-btn:hover .float-label { opacity: 1; max-width: 120px; }

.float-wa       { background: #25d366; box-shadow: 0 3px 12px rgba(37,211,102,0.35); }
.float-wa:hover { background: #1fba58; }

.float-email       { background: var(--blue); box-shadow: 0 3px 12px rgba(37,99,235,0.3); }
.float-email:hover { background: var(--blue-dark); }

.float-schedule       { background: var(--orange); box-shadow: 0 3px 12px rgba(249,115,22,0.3); }
.float-schedule:hover { background: var(--orange-dark); }

/* ════════════════════════════════════════════════════════════
   21. RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .savi-navbar .navbar-collapse {
    background:    var(--white);
    padding:       var(--s4);
    border-top:    1px solid var(--border);
    margin-top:    0.5rem;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow:    var(--shadow-md);
  }

  .savi-dropdown { box-shadow: none !important; border: none !important; background: var(--bg) !important; }
  .savi-hero     { padding: var(--s16) 0 var(--s12); }
  .section-pad   { padding: var(--s12) 0; }
}

@media (max-width: 767px) {
  .savi-hero       { padding: var(--s12) 0; }
  .hero-headline   { letter-spacing: -0.02em; }
  .footer-bottom   { flex-direction: column; text-align: center; }
  .eco-step        { min-width: 72px; }
  .eco-label       { font-size: 0.65rem; }
  .eco-node        { width: 36px; height: 36px; }
  .eco-node svg    { width: 14px; height: 14px; }
}

@media (max-width: 575px) {
  .savi-cta-btn,
  .savi-btn-secondary       { width: 100%; justify-content: center; }
  .hero-actions             { flex-direction: column; }
  .hero-actions > *         { width: 100%; justify-content: center; }
  .hero-stats               { gap: 1.25rem; }
  .svc-row-tagline          { white-space: normal; }
  .svc-row-card             { grid-template-columns: 48px 1fr; gap: 0.85rem; padding: 1.25rem; }
  .svc-row-arrow            { display: none; }
  .intent-card              { padding: 1.5rem; }
  .opp-card-header          { flex-direction: column; gap: 0.5rem; }
  .progress-step-label      { font-size: 0.62rem; }
  .contact-grid             { grid-template-columns: 1fr 1fr; }
  .savi-footer .col-6       { width: 100% !important; flex: 0 0 100% !important; }
  .float-contact            { right: 0.85rem; bottom: 1.25rem; gap: 0.5rem; }
  .float-btn                { padding: 0.55rem; max-width: 38px; width: 40px; height: 40px; }
  .float-btn:hover          { max-width: 38px; padding: 0.55rem; gap: 0; }
  .float-label              { display: none; }
  .float-btn svg            { width: 17px; height: 17px; min-width: 17px; }
  .savi-cta-section .d-flex { flex-direction: column; align-items: center; }
  .savi-cta-section .d-flex > * { width: 100%; max-width: 280px; justify-content: center; }
  .guarantee-strip          { padding: 2rem 1.5rem; }
  .commitment-card          { padding: 1.5rem; }
  .commitment-value         { font-size: 1.2rem; }
}

/* ════════════════════════════════════════════════════════════
   22. MOTION PREFERENCES
   Respects user's system-level reduce-motion preference (WCAG AA)
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  /* Disable all transitions and animations */
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }

  /* Show scroll-reveal elements immediately — no animate-in */
  .reveal {
    opacity:    1;
    transform:  none;
    transition: none;
  }

  /* Float buttons: no expand on hover */
  .float-btn:hover {
    max-width: 44px;
    padding:   0.65rem;
    gap:       0;
  }

  .float-btn:hover .float-label { opacity: 0; max-width: 0; }

  /* Intent cards: no lift */
  .intent-card:hover { transform: none; }
  .value-card:hover  { transform: none; }
  .savi-cta-btn:hover { transform: none; }
}