/* ============================================================
   eSevaPoint – Global Design System
   Primary: #083d77  |  Accent Gold: #f3c93e
   Applies to ALL pages (website + blog)
   ============================================================ */

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

/* ── CSS Variables ─────────────────────────────────────── */
:root {
  --primary:       #083d77;
  --primary-dark:  #05264c;
  --primary-mid:   #0f5ab0;
  --primary-light: #d1e3ff;
  --accent:        #f3c93e;
  --accent-dark:   #d4a800;
  --success:       #10b981;
  --danger:        #ef4444;

  /* Surfaces */
  --bg:            #f0f4ff;
  --surface:       #f9fbfd;
  --glass:         rgba(255,255,255,0.72);
  --glass-border:  rgba(255,255,255,0.55);
  --glass-shadow:  rgba(8,61,119,0.10);

  /* Typography */
  --fg:    #1a1f36;
  --fg-2:  #4a5680;
  --muted: #6b7a99;

  /* Spacing */
  --space-1:  4px;  --space-2:  8px;  --space-3:  12px;
  --space-4:  16px; --space-5:  20px; --space-6:  24px;
  --space-8:  32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* Motion */
  --ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --motion-fast:   150ms;
  --motion-base:   260ms;

  /* Containers */
  --container-max: 1180px;

  /* Elevation */
  --elev-raised:  0 16px 40px rgba(8,61,119,0.10);
  --elev-card:    0 4px 20px rgba(8,61,119,0.08);
  --focus-ring:   0 0 0 3px rgba(8,61,119,0.18);
}

/* ── Reset / Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background:  linear-gradient(135deg, #e8efff 0%, #f0f4ff 45%, #ddeeff 100%);
  min-height:  100vh;
  color:       var(--fg);
  -webkit-font-smoothing: antialiased;
}
img   { max-width: 100%; display: block; }
a     { text-decoration: none; color: inherit; }

/* ── Container ─────────────────────────────────────────── */
.esp-container {
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 36px;
  position:  relative;
  z-index:   1;
}
@media (max-width: 768px) { .esp-container { padding: 0 16px; } }

/* ── Section helper ─────────────────────────────────────── */
.esp-section { padding: 80px 0; position: relative; }
@media (max-width: 768px) { .esp-section { padding: 48px 0; } }

.section-label {
  font-size:      13px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--primary);
  margin-bottom:  8px;
}
.section-title {
  font-size:   clamp(26px, 4vw, 48px);
  font-weight: 800;
  color:       var(--fg);
  line-height: 1.15;
  margin-bottom: 12px;
}
.section-sub {
  font-size:   1.05rem;
  color:       var(--fg-2);
  line-height: 1.65;
  max-width:   580px;
}

/* ── Glassmorphic ambient orbs ──────────────────────────── */
.glass-orb {
  position:      absolute;
  border-radius: 50%;
  filter:        blur(90px);
  pointer-events:none;
  z-index:       0;
  opacity:       0.18;
  animation:     floatOrb 14s infinite alternate ease-in-out;
}
.glass-orb-1 { width:340px; height:340px; background:radial-gradient(circle,var(--primary),#3b82f6); top:5%;  right:3%; }
.glass-orb-2 { width:220px; height:220px; background:radial-gradient(circle,var(--accent),#e8b61c); bottom:10%; left:2%; animation-delay:-6s; }
@keyframes floatOrb {
  0%   { transform: translateY(0)    scale(1); }
  100% { transform: translateY(36px) scale(1.06); }
}

/* ── Shared utility buttons ─────────────────────────────── */
.btn-primary-esp {
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
  padding:      10px 28px;
  background:   linear-gradient(135deg,var(--primary),var(--primary-mid));
  color:        #fff;
  border:       none;
  border-radius:var(--radius-pill);
  font-size:    0.9rem;
  font-weight:  600;
  cursor:       pointer;
  box-shadow:   0 4px 16px rgba(8,61,119,0.28);
  transition:   all var(--motion-base) var(--ease);
}
.btn-primary-esp:hover {
  background:   linear-gradient(135deg,var(--accent-dark),var(--accent));
  color:        var(--primary-dark);
  transform:    translateY(-2px);
  box-shadow:   0 8px 24px rgba(243,201,62,0.38);
}
.btn-ghost-esp {
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
  padding:      10px 28px;
  background:   transparent;
  color:        var(--primary);
  border:       1.5px solid var(--primary);
  border-radius:var(--radius-pill);
  font-size:    0.9rem;
  font-weight:  600;
  cursor:       pointer;
  transition:   all var(--motion-base) var(--ease);
}
.btn-ghost-esp:hover { background:var(--primary); color:#fff; }

/* ── Glassmorphic card ──────────────────────────────────── */
.glass-card {
  background:           var(--glass);
  border:               1px solid var(--glass-border);
  border-radius:        var(--radius-md);
  backdrop-filter:      blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:           var(--elev-card);
  transition:           all var(--motion-base) var(--ease);
}
.glass-card:hover {
  transform:    translateY(-5px);
  background:   rgba(255,255,255,0.88);
  border-color: rgba(8,61,119,0.22);
  box-shadow:   var(--elev-raised);
}

/* ── WhatsApp floating button ───────────────────────────── */
.esp-whatsapp-float {
  position:      fixed;
  bottom:        24px;
  right:         24px;
  z-index:       999;
  width:         56px;
  height:        56px;
  border-radius: 50%;
  background:    #25D366;
  color:         #fff;
  font-size:     26px;
  display:       flex;
  align-items:   center;
  justify-content:center;
  box-shadow:    0 4px 18px rgba(37,211,102,0.40);
  text-decoration: none;
  transition:    transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.esp-whatsapp-float:hover { transform: scale(1.12); box-shadow: 0 8px 28px rgba(37,211,102,0.50); color:#fff; }

/* ── Scroll-reveal ──────────────────────────────────────── */
.reveal {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Pagination (Bootstrap override) ───────────────────── */
.pagination .page-link {
  background:    var(--glass) !important;
  border:        1px solid rgba(8,61,119,0.15) !important;
  color:         var(--primary) !important;
  border-radius: var(--radius-sm) !important;
  margin:        0 3px !important;
  font-weight:   500;
  transition:    all var(--motion-fast) var(--ease);
}
.pagination .page-link:hover        { background:var(--primary) !important; color:#fff !important; }
.pagination .page-item.active .page-link {
  background:  linear-gradient(135deg,var(--primary),var(--primary-mid)) !important;
  border-color:var(--primary) !important;
  color:       #fff !important;
}