/* 
 * PawConnect — Premium Redesign
 * Emotionally engaging, warm, organic UI with glassmorphism,
 * lush gradients, micro-animations, and modern depth.
 * All existing class selectors preserved for JS compatibility.
 */

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

/* ─────────────────────────────────────────────
   DESIGN TOKENS
   ───────────────────────────────────────────── */
:root {
  /* Primary — warm teal-green */
  --primary-green: #1db59a;
  --primary-green-rgb: 29, 181, 154;
  --primary-green-light: #e0f7f2;
  --primary-green-dark: #14876f;
  --primary-green-glow: rgba(29, 181, 154, 0.35);

  /* Accent — warm sunset peach */
  --primary-peach: #ff8a47;
  --primary-peach-rgb: 255, 138, 71;
  --primary-peach-light: #fff3eb;
  --primary-peach-dark: #e06e2e;
  --primary-peach-glow: rgba(255, 138, 71, 0.35);

  /* Extended palette */
  --soft-blue: #edf4ff;
  --soft-blue-dark: #dae8ff;
  --soft-lavender: #f0eeff;
  --soft-rose: #fff0f3;
  --warm-cream: #fffaf4;
  --warm-cream-dark: #fff0dd;

  /* Text */
  --text-dark: #1a2332;
  --text-heading: #0f1923;
  --text-muted: #5f6d7e;
  --text-light: #8896a6;

  /* Backgrounds */
  --bg-light: #f6f9fc;
  --bg-card: #ffffff;
  --bg-body: #fafcfe;

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Nunito', sans-serif;

  /* Radii */
  --border-radius-sm: 0.625rem;
  --border-radius-md: 1rem;
  --border-radius-lg: 1.375rem;
  --border-radius-xl: 2rem;
  --border-radius-pill: 100px;

  /* Transitions */
  --transition-smooth: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-fast: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background-color: var(--bg-body);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.25;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

::selection {
  background-color: rgba(29, 181, 154, 0.18);
  color: var(--text-heading);
}

/* ─────────────────────────────────────────────
   SUBTLE PAW PRINT BACKGROUND PATTERN
   ───────────────────────────────────────────── */
.bg-paw-pattern {
  position: relative;
}

.bg-paw-pattern::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 100 100' fill='%231db59a' fill-opacity='0.022'%3E%3Cpath d='M30,35 C35,35 38,28 35,22 C32,16 25,18 25,23 C25,29 27,35 30,35 Z M45,28 C50,28 52,22 49,16 C46,11 40,12 40,17 C40,23 42,28 45,28 Z M58,28 C62,28 65,22 62,17 C59,12 53,11 53,17 C53,23 55,28 58,28 Z M72,35 C75,35 77,29 77,23 C77,18 70,16 67,22 C64,28 68,35 72,35 Z M51,40 C43,40 35,46 35,58 C35,68 43,76 51,76 C59,76 67,68 67,58 C67,46 59,40 51,40 Z'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}

/* ─────────────────────────────────────────────
   SHADOWS
   ───────────────────────────────────────────── */
.shadow-soft {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.03),
    0 8px 24px rgba(0, 0, 0, 0.04);
}

.shadow-medium {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.05),
    0 12px 40px rgba(0, 0, 0, 0.07);
}

.shadow-hover {
  transition: var(--transition-bounce);
}

.shadow-hover:hover {
  transform: translateY(-10px);
  box-shadow:
    0 16px 40px rgba(29, 181, 154, 0.10),
    0 8px 20px rgba(0, 0, 0, 0.06);
}

/* ─────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────── */
.btn {
  font-family: var(--font-heading);
  font-weight: 600;
  padding: 0.8rem 2rem;
  border-radius: var(--border-radius-pill);
  transition: var(--transition-bounce);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.btn:hover::after {
  transform: translateX(100%);
}

.btn-primary-green {
  background: linear-gradient(135deg, var(--primary-green) 0%, #17c9a3 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 16px var(--primary-green-glow);
}

.btn-primary-green:hover,
.btn-primary-green:focus,
.btn-primary-green:active {
  background: linear-gradient(135deg, var(--primary-green-dark) 0%, var(--primary-green) 100%);
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 28px var(--primary-green-glow);
}

.btn-primary-peach {
  background: linear-gradient(135deg, var(--primary-peach) 0%, #ff6b3d 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 16px var(--primary-peach-glow);
}

.btn-primary-peach:hover,
.btn-primary-peach:focus,
.btn-primary-peach:active {
  background: linear-gradient(135deg, var(--primary-peach-dark) 0%, var(--primary-peach) 100%);
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 28px var(--primary-peach-glow);
}

.btn-outline-green {
  background-color: transparent;
  border: 2px solid var(--primary-green);
  color: var(--primary-green);
  position: relative;
  z-index: 1;
}

.btn-outline-green::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-green) 0%, #17c9a3 100%);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.btn-outline-green:hover,
.btn-outline-green:focus,
.btn-outline-green:active {
  color: #ffffff;
  border-color: var(--primary-green);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 20px var(--primary-green-glow);
}

.btn-outline-green:hover::before {
  opacity: 1;
}

.btn-outline-peach {
  background-color: transparent;
  border: 2px solid var(--primary-peach);
  color: var(--primary-peach);
  position: relative;
  z-index: 1;
}

.btn-outline-peach::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-peach) 0%, #ff6b3d 100%);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.btn-outline-peach:hover,
.btn-outline-peach:focus,
.btn-outline-peach:active {
  color: #ffffff;
  border-color: var(--primary-peach);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 20px var(--primary-peach-glow);
}

.btn-outline-peach:hover::before {
  opacity: 1;
}

/* ─────────────────────────────────────────────
   STICKY GLASSMORPHISM NAVBAR
   ───────────────────────────────────────────── */
.navbar-custom {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: var(--transition-smooth);
  padding: 0.9rem 0;
  z-index: 1000;
  position: sticky !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.navbar-custom.scrolled {
  padding: 0.55rem 0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ── Navbar Brand ── */
.navbar-brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.55rem;
  color: var(--text-heading) !important;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  letter-spacing: -0.02em;
}

.navbar-brand i {
  color: var(--primary-green);
  font-size: 1.3rem;
}

.navbar-brand span {
  color: var(--primary-green);
}

/* ── Nav Links ── */
.nav-link {
  font-family: var(--font-heading);
  color: var(--text-dark) !important;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.5rem 0.85rem !important;
  margin: 0 0.1rem;
  border-radius: var(--border-radius-pill);
  transition: var(--transition-fast);
  position: relative;
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary-green) !important;
  background: linear-gradient(135deg, rgba(29,181,154,0.08) 0%, rgba(29,181,154,0.04) 100%);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  border-radius: 3px;
  background: var(--primary-green);
}

/* ── Offcanvas Drawer (Mobile) ── */
@media (max-width: 1199.98px) {
  .offcanvas,
  .offcanvas-start,
  .offcanvas-header,
  .offcanvas-body {
    background-color: #ffffff !important;
    background: #ffffff !important;
    opacity: 1 !important;
  }

  .offcanvas {
    border-right: none !important;
    width: 320px !important;
    height: 100vh !important;
    top: 0 !important;
    bottom: 0 !important;
    position: fixed !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
    box-shadow: 8px 0 40px rgba(0,0,0,0.08) !important;
  }

  .offcanvas-header {
    border-bottom: 1px solid #f0f4f8;
    padding: 1.5rem 1.75rem;
  }

  .offcanvas-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--text-heading);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .offcanvas-title span {
    color: var(--primary-green);
  }

  .offcanvas-body {
    padding: 1.75rem 1.5rem;
  }

  .navbar-custom {
    background-color: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .navbar-nav {
    align-items: flex-start !important;
    gap: 0.35rem;
    width: 100%;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    width: 100%;
    padding: 0.85rem 1.25rem !important;
    font-size: 1.05rem !important;
    margin: 0 !important;
    color: var(--text-dark) !important;
    border-radius: var(--border-radius-md) !important;
  }

  .nav-link:hover,
  .nav-link.active {
    background: var(--primary-green-light) !important;
  }

  .nav-link.active::after {
    display: none;
  }
}

.navbar-toggler {
  border: none !important;
  padding: 0.35rem 0.55rem !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231db59a' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  width: 1.5em !important;
  height: 1.5em !important;
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .navbar-brand {
    font-size: 1.3rem;
  }

  .nav-link {
    font-size: 0.84rem !important;
    padding: 0.4rem 0.55rem !important;
    margin: 0 0.02rem !important;
  }

  .navbar-nav .ms-lg-4 {
    margin-left: 0.5rem !important;
  }
}

/* ─────────────────────────────────────────────
   FLOATING CTA "REPORT STRAY"
   ───────────────────────────────────────────── */
.floating-cta {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--primary-peach), #ff6b3d);
  color: white;
  padding: 0.85rem 1.5rem;
  border-radius: var(--border-radius-pill);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 6px 24px var(--primary-peach-glow);
  transition: var(--transition-bounce);
  animation: floatingPulse 3s ease-in-out infinite;
}

.floating-cta i {
  font-size: 1.15rem;
}

.floating-cta:hover {
  transform: translateY(-5px) scale(1.06);
  background: linear-gradient(135deg, #ff6b3d, var(--primary-peach-dark));
  color: white;
  box-shadow: 0 12px 36px rgba(255, 138, 71, 0.5);
}

@keyframes floatingPulse {
  0%, 100% {
    box-shadow: 0 6px 24px var(--primary-peach-glow), 0 0 0 0 rgba(255, 138, 71, 0.3);
  }
  50% {
    box-shadow: 0 6px 24px var(--primary-peach-glow), 0 0 0 14px rgba(255, 138, 71, 0);
  }
}

/* ─────────────────────────────────────────────
   HERO SECTION
   ───────────────────────────────────────────── */
.hero-section {
  padding: 7rem 0 5rem 0;
  background: linear-gradient(160deg, #fdfcfb 0%, #e8f5f0 35%, #dff3f9 65%, #fef9f0 100%);
  position: relative;
  overflow: hidden;
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%23ffffff' d='M0,60 C360,100 720,20 1440,60 L1440,100 L0,100 Z'/%3E%3C/svg%3E") no-repeat bottom center;
  background-size: cover;
  z-index: 2;
}

/* Organic shapes */
.hero-shapes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-shape-1 {
  position: absolute;
  top: -15%;
  right: -8%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(29,181,154,0.12) 0%, transparent 70%);
  border-radius: 50%;
  animation: floatShape 18s ease-in-out infinite;
}

.hero-shape-2 {
  position: absolute;
  bottom: -12%;
  left: -8%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,138,71,0.1) 0%, transparent 70%);
  border-radius: 50%;
  animation: floatShape 22s ease-in-out infinite reverse;
}

@keyframes floatShape {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -15px) scale(1.05); }
  66% { transform: translate(-10px, 10px) scale(0.97); }
}

/* Hero Badge */
.hero-badge {
  background: linear-gradient(135deg, var(--primary-green-light) 0%, rgba(29,181,154,0.08) 100%);
  color: var(--primary-green-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.55rem 1.4rem;
  border-radius: var(--border-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(29, 181, 154, 0.15);
}

/* Hero Title */
.hero-title {
  font-size: 3.75rem;
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--text-heading);
}

.hero-title span {
  color: transparent;
  background: linear-gradient(135deg, var(--primary-green) 0%, #17c9a3 60%, #0fc1a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
}

.hero-title span::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(90deg, rgba(29,181,154,0.15) 0%, rgba(29,181,154,0.08) 100%);
  z-index: -1;
  border-radius: 6px;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  line-height: 1.8;
}

/* Hero Image */
.hero-image-wrapper {
  position: relative;
  z-index: 2;
}

.hero-image-main {
  width: 100%;
  border-radius: var(--border-radius-xl);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.1),
    0 0 0 6px rgba(255,255,255,0.8);
  border: none;
  transform: rotate(-1deg);
  transition: var(--transition-bounce);
}

.hero-image-main:hover {
  transform: rotate(0deg) scale(1.015);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.12),
    0 0 0 6px rgba(255,255,255,0.9);
}

/* Floating Stat Badges */
.hero-floating-badge {
  position: absolute;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 1rem 1.35rem;
  border-radius: var(--border-radius-lg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 3;
  transition: var(--transition-bounce);
}

.hero-floating-badge:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}

.hero-floating-badge.badge-left {
  bottom: 12%;
  left: -4%;
  animation: badgeFloat 6s ease-in-out infinite;
}

.hero-floating-badge.badge-right {
  top: 12%;
  right: -4%;
  animation: badgeFloat 7s ease-in-out infinite 1s;
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero-floating-badge .icon-container {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
}

.hero-floating-badge.badge-left .icon-container {
  background: linear-gradient(135deg, var(--primary-green) 0%, #17c9a3 100%);
  box-shadow: 0 4px 12px var(--primary-green-glow);
}

.hero-floating-badge.badge-right .icon-container {
  background: linear-gradient(135deg, var(--primary-peach) 0%, #ff6b3d 100%);
  box-shadow: 0 4px 12px var(--primary-peach-glow);
}

.hero-floating-badge .badge-text h5 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-heading);
}

.hero-floating-badge .badge-text p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}
.section-tagline {
  color: var(--primary-green);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.section-tagline::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary-green), #17c9a3);
}

.section-title {
  font-size: 2.6rem;
  font-weight: 800;
  margin-bottom: 3.5rem;
  position: relative;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

/* ─────────────────────────────────────────────
   ABOUT SECTION
   ───────────────────────────────────────────── */
.about-section {
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}

.about-section::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(29,181,154,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.about-features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about-feature-item {
  display: flex;
  gap: 1.15rem;
  padding: 1.25rem;
  border-radius: var(--border-radius-md);
  background: linear-gradient(135deg, var(--primary-green-light) 0%, rgba(255,255,255,0.6) 100%);
  border: 1px solid rgba(29,181,154,0.08);
  transition: var(--transition-smooth);
}

.about-feature-item:hover {
  background: linear-gradient(135deg, rgba(29,181,154,0.1) 0%, var(--primary-green-light) 100%);
  transform: translateX(6px);
}

.about-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-green) 0%, #17c9a3 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--primary-green-glow);
}

.about-feature-item h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

/* About Images */
.about-image-wrapper {
  position: relative;
}

.about-image-base {
  width: 85%;
  border-radius: var(--border-radius-xl);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.about-image-overlay {
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 68%;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
  border: 5px solid #ffffff;
  z-index: 2;
  transition: var(--transition-bounce);
}

.about-image-overlay:hover {
  transform: translate(-5px, -5px);
}

/* ─────────────────────────────────────────────
   HOW IT WORKS SECTION
   ───────────────────────────────────────────── */
.how-it-works-section {
  background: linear-gradient(180deg, var(--soft-blue) 0%, #f0f7ff 100%);
  position: relative;
  overflow: hidden;
}

.how-it-works-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(29,181,154,0.04) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}

.step-card {
  background: #ffffff;
  border-radius: var(--border-radius-xl);
  padding: 2.75rem 2.25rem 2.5rem;
  position: relative;
  z-index: 2;
  height: 100%;
  border: 1px solid rgba(0,0,0,0.03);
  text-align: center;
  transition: var(--transition-bounce);
}

.step-card:hover {
  border-color: rgba(29,181,154,0.12);
}

.step-number {
  position: absolute;
  top: -22px;
  left: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-green) 0%, #17c9a3 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 6px 18px var(--primary-green-glow);
  z-index: 3;
}

.step-icon-container {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-green-light) 0%, rgba(29,181,154,0.08) 100%);
  color: var(--primary-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  transition: var(--transition-smooth);
}

.step-card:hover .step-icon-container {
  background: linear-gradient(135deg, var(--primary-green) 0%, #17c9a3 100%);
  color: #ffffff;
  box-shadow: 0 8px 24px var(--primary-green-glow);
  transform: scale(1.08);
}

.how-it-works-row {
  position: relative;
}

/* ─────────────────────────────────────────────
   ADOPTION LISTINGS SECTION
   ───────────────────────────────────────────── */
.listings-section {
  background: var(--bg-light);
}

.listings-filter-container {
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.filter-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.filter-chip {
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-dark);
  padding: 0.55rem 1.6rem;
  border-radius: var(--border-radius-pill);
  cursor: pointer;
  transition: var(--transition-bounce);
  font-size: 0.9rem;
}

.filter-chip:hover {
  border-color: var(--primary-green);
  color: var(--primary-green);
  background: var(--primary-green-light);
  transform: translateY(-2px);
}

.filter-chip.active {
  background: linear-gradient(135deg, var(--primary-green) 0%, #17c9a3 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 18px var(--primary-green-glow);
  transform: translateY(-2px);
}

.search-input-group {
  max-width: 460px;
  width: 100%;
  border-radius: var(--border-radius-pill) !important;
  overflow: hidden;
}

.search-input-group .form-control {
  border-radius: var(--border-radius-pill) 0 0 var(--border-radius-pill);
  border: 2px solid #e8edf2;
  padding: 0.85rem 1.6rem;
  font-size: 0.92rem;
  background: #ffffff;
}

.search-input-group .form-control:focus {
  border-color: var(--primary-green);
  box-shadow: none;
}

.search-input-group .btn {
  border-radius: 0 var(--border-radius-pill) var(--border-radius-pill) 0;
  padding: 0.85rem 1.6rem;
}

/* ── Pet Cards ── */
.pet-card {
  background: #ffffff;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04);
  height: 100%;
  transition: var(--transition-bounce);
}

.pet-card:hover {
  border-color: rgba(29,181,154,0.15);
}

.pet-image-container {
  position: relative;
  overflow: hidden;
  height: 260px;
}

.pet-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.pet-card:hover .pet-image {
  transform: scale(1.06);
}

.pet-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.35rem 0.95rem;
  border-radius: var(--border-radius-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--primary-green-dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  letter-spacing: 0.02em;
}

.pet-gender {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pet-gender.male {
  color: #3b82f6;
}

.pet-gender.female {
  color: #ec4899;
}

.pet-details {
  padding: 1.5rem 1.5rem 1.75rem;
}

.pet-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.pet-info-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  border-bottom: 1px solid #f3f6fa;
  padding-bottom: 1rem;
}

.pet-info-meta span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.pet-info-meta i {
  color: var(--primary-green);
  font-size: 0.78rem;
}

/* ─────────────────────────────────────────────
   VOLUNTEER / JOIN NETWORK SECTION
   ───────────────────────────────────────────── */
.volunteer-section {
  background: #ffffff;
  position: relative;
}

.volunteer-card {
  background: linear-gradient(145deg, #e4f9f4 0%, #edf5ff 40%, #fef6ee 100%);
  border-radius: var(--border-radius-xl);
  padding: 3.75rem;
  border: none;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.volunteer-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(29,181,154,0.1) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.volunteer-card::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255,138,71,0.08) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.volunteer-form .form-label {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.92rem;
}

.volunteer-form .form-control {
  border-radius: var(--border-radius-md);
  border: 2px solid #e8edf2;
  padding: 0.8rem 1.1rem;
  font-size: 0.95rem;
  background-color: #ffffff;
  transition: var(--transition-smooth);
}

.volunteer-form .form-control:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 4px rgba(29, 181, 154, 0.1);
}

.volunteer-form .form-check-input:checked {
  background-color: var(--primary-green);
  border-color: var(--primary-green);
}

/* ─────────────────────────────────────────────
   TESTIMONIALS SECTION
   ───────────────────────────────────────────── */
.testimonials-section {
  background: linear-gradient(180deg, var(--bg-light) 0%, #f0f4f9 100%);
}

.testimonial-card {
  background: #ffffff;
  border-radius: var(--border-radius-xl);
  padding: 2.5rem;
  border: 1px solid rgba(0, 0, 0, 0.03);
  height: 100%;
  position: relative;
  transition: var(--transition-bounce);
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.07);
  border-color: rgba(29,181,154,0.1);
}

.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: 10px;
  right: 28px;
  font-family: Georgia, serif;
  font-size: 6rem;
  color: rgba(29, 181, 154, 0.08);
  line-height: 1;
  pointer-events: none;
}

.testimonial-text {
  font-style: italic;
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
  line-height: 1.75;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-green-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.testimonial-author-name {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.1rem;
}

.testimonial-author-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */
.footer-section {
  background: linear-gradient(180deg, #0c1522 0%, #0a1018 100%);
  color: #8596a8;
  padding: 5.5rem 0 2rem 0;
  font-size: 0.92rem;
  margin-top: auto;
  position: relative;
  overflow: hidden;
}

.footer-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(29,181,154,0.3), transparent);
}

.footer-section h4 {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  position: relative;
}

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

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: #8596a8;
  text-decoration: none;
  transition: var(--transition-fast);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
}

.footer-links a:hover {
  color: var(--primary-green);
  transform: translateX(4px);
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-contact-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.footer-contact-item i {
  color: var(--primary-green);
  font-size: 1rem;
  margin-top: 0.2rem;
}

.emergency-card {
  background: linear-gradient(135deg, rgba(255,138,71,0.08) 0%, rgba(255,138,71,0.03) 100%);
  border-radius: var(--border-radius-md);
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--primary-peach);
  margin-top: 1rem;
}

.emergency-card h4,
.emergency-card h5 {
  color: #ffffff;
  font-size: 0.92rem;
  margin-bottom: 0.4rem;
  font-weight: 700;
}

.emergency-phone {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-peach) !important;
  text-decoration: none;
  display: block;
  transition: var(--transition-fast);
}

.emergency-phone:hover {
  color: #ffb07a !important;
}

.footer-social-icons {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.social-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #c0cdd8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--transition-bounce);
  font-size: 0.95rem;
  border: 1px solid rgba(255,255,255,0.06);
}

.social-icon-btn:hover {
  background: linear-gradient(135deg, var(--primary-green) 0%, #17c9a3 100%);
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 6px 18px var(--primary-green-glow);
  border-color: transparent;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 2rem;
  margin-top: 4rem;
}

/* ─────────────────────────────────────────────
   MODALS
   ───────────────────────────────────────────── */
.modal-content {
  border-radius: var(--border-radius-xl);
  border: none;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
}

.modal-header {
  background: linear-gradient(135deg, var(--primary-green-light) 0%, rgba(29,181,154,0.06) 100%);
  border-bottom: 1px solid rgba(29,181,154,0.08);
  padding: 1.5rem 1.75rem;
}

.modal-title {
  color: var(--primary-green-dark);
  font-weight: 700;
  font-size: 1.1rem;
}

.modal-body {
  padding: 2rem 1.75rem;
}

.modal-footer {
  border-top: 1px solid #f3f6fa;
  padding: 1.25rem 1.75rem;
}

.modal .form-control,
.modal .form-select {
  border-radius: var(--border-radius-md);
  border: 2px solid #e8edf2;
  padding: 0.8rem 1rem;
  transition: var(--transition-fast);
}

.modal .form-control:focus,
.modal .form-select:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 4px rgba(29, 181, 154, 0.1);
}

/* ─────────────────────────────────────────────
   TOAST NOTIFICATIONS
   ───────────────────────────────────────────── */
.toast-container {
  z-index: 1100;
}

.custom-toast {
  background-color: #ffffff;
  border-radius: var(--border-radius-md);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
  border-left: 4px solid var(--primary-green);
}

.custom-toast.toast-peach {
  border-left-color: var(--primary-peach);
}

/* ─────────────────────────────────────────────
   ANIMATION UTILITIES
   ───────────────────────────────────────────── */
.anim-fade-in {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp 0.9s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-delay-1 {
  animation-delay: 0.15s;
}

.anim-delay-2 {
  animation-delay: 0.3s;
}

.anim-delay-3 {
  animation-delay: 0.45s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Scroll Animations ── */
.scroll-fade {
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.scroll-fade.fade-up {
  transform: translateY(40px);
}

.scroll-fade.fade-down {
  transform: translateY(-40px);
}

.scroll-fade.fade-left {
  transform: translateX(-40px);
}

.scroll-fade.fade-right {
  transform: translateX(40px);
}

.scroll-fade.visible {
  opacity: 1;
  transform: translate(0, 0) !important;
}

.scroll-fade.delay-1 {
  transition-delay: 0.15s;
}

.scroll-fade.delay-2 {
  transition-delay: 0.3s;
}

.scroll-fade.delay-3 {
  transition-delay: 0.45s;
}

/* ─────────────────────────────────────────────
   TEXT UTILITY CLASSES (Bootstrap overrides)
   ───────────────────────────────────────────── */
.text-primary-green {
  color: var(--primary-green) !important;
}

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

/* ─────────────────────────────────────────────
   PAGE BANNER (Sub-pages like About, Browse, etc.)
   ───────────────────────────────────────────── */
.page-banner,
section[style*="linear-gradient(135deg, #f3faf9"] {
  position: relative;
}

/* ─────────────────────────────────────────────
   LOGIN PAGE STYLES (Keep inline overrides but
   add these as fallback enhancements)
   ───────────────────────────────────────────── */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #f6fbf9 0%, #fdfbf8 40%, #edf4ff 100%);
  padding: 2rem 1rem;
}

.login-card {
  max-width: 460px;
  width: 100%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--border-radius-xl);
  padding: 3.25rem 2.75rem;
}

/* ─────────────────────────────────────────────
   COUNTER ANIMATION (Stats section)
   ───────────────────────────────────────────── */
.display-5 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}

.font-heading {
  font-family: var(--font-heading);
}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .hero-section {
    padding: 5.5rem 0 4rem 0;
  }

  .hero-title {
    font-size: 2.7rem;
  }

  .hero-image-wrapper {
    margin-top: 3rem;
  }

  .hero-floating-badge.badge-left {
    left: 2%;
  }

  .hero-floating-badge.badge-right {
    right: 2%;
  }

  .about-image-wrapper {
    margin-bottom: 3rem;
  }

  .about-image-base {
    width: 90%;
  }

  .volunteer-card {
    padding: 2.25rem;
  }

  .section-title {
    font-size: 2.15rem;
  }

  .section-padding {
    padding: 5rem 0;
  }
}

@media (max-width: 767.98px) {
  .hero-title {
    font-size: 2.35rem;
  }

  .hero-subtitle {
    font-size: 1.05rem;
  }

  .pet-info-meta {
    flex-direction: column;
    gap: 0.4rem;
  }

  .testimonial-card {
    padding: 2rem;
  }
}

@media (max-width: 575.98px) {
  .hero-title {
    font-size: 2rem;
  }

  .hero-floating-badge {
    padding: 0.7rem 0.9rem;
  }

  .hero-floating-badge.badge-left {
    bottom: 3%;
  }

  .hero-floating-badge.badge-right {
    top: 3%;
  }

  .floating-cta {
    bottom: 18px;
    right: 18px;
    padding: 0.65rem 1.1rem;
    font-size: 0.88rem;
  }

  .section-title {
    font-size: 1.85rem;
  }

  .section-padding {
    padding: 4rem 0;
  }

  .volunteer-card {
    padding: 1.75rem;
  }

  .step-card {
    padding: 2.25rem 1.75rem 2rem;
  }
}

/* ─────────────────────────────────────────────
   MICRO-INTERACTION: LINK UNDERLINE EFFECT
   ───────────────────────────────────────────── */
.footer-links a::before {
  content: '→';
  opacity: 0;
  margin-right: 0;
  transition: var(--transition-fast);
  display: inline-block;
}

.footer-links a:hover::before {
  opacity: 1;
  margin-right: 6px;
}

/* ─────────────────────────────────────────────
   SCROLLBAR STYLING
   ───────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary-green) 0%, #17c9a3 100%);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-green-dark);
}

/* ─────────────────────────────────────────────
   SUB-PAGE ENHANCEMENTS
   ───────────────────────────────────────────── */

/* Page Banner sections (inline styled in sub-pages) */
.display-4 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-heading);
}

/* Generic cards used on about, volunteer, why-we-started pages */
.card {
  transition: var(--transition-bounce);
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 32px rgba(29, 181, 154, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* Form selects on sub-pages */
.form-select {
  border-radius: var(--border-radius-md);
  border: 2px solid #e8edf2;
  padding: 0.8rem 1.1rem;
  font-size: 0.95rem;
  transition: var(--transition-fast);
  font-family: var(--font-body);
}

.form-select:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 4px rgba(29, 181, 154, 0.1);
}

/* Input groups on add-listing page */
.input-group .input-group-text {
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
  border: 2px solid #e8edf2;
  border-right: none;
  background: #f8fafb;
  color: var(--text-muted);
}

.input-group .form-control {
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0 !important;
  border: 2px solid #e8edf2;
  border-left: none;
}

.input-group .form-control:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 4px rgba(29, 181, 154, 0.1);
}

.input-group .form-control:focus + .input-group-text,
.input-group:focus-within .input-group-text {
  border-color: var(--primary-green);
}

/* Dashed upload area on add-listing */
.border-dashed {
  border-style: dashed !important;
  border-color: #d0d8e2 !important;
  transition: var(--transition-smooth);
}

.border-dashed:hover {
  border-color: var(--primary-green) !important;
  background: var(--primary-green-light) !important;
}

/* Badge styles used on why-we-started page */
.badge {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.9rem;
  border-radius: var(--border-radius-pill);
  font-size: 0.75rem;
}

/* Max width utility for banner subtitles */
.max-width-md {
  max-width: 640px;
}

/* Contact page emergency card standalone */
.emergency-card.shadow-medium {
  background: linear-gradient(135deg, #1a2740 0%, #162030 100%);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
}

/* Smooth enter for all page content */
main,
section {
  position: relative;
  z-index: 1;
}

/* border-start on volunteer page question box */
.border-success {
  border-color: var(--primary-green) !important;
}

/* primary-green-dark text color utility (used in why page) */
.text-primary-green-dark {
  color: var(--primary-green-dark) !important;
}

/* primary-peach text color utility */
.text-primary-peach {
  color: var(--primary-peach) !important;
}

/* ─────────────────────────────────────────────
   SMOOTH PAGE LOAD ANIMATION
   ───────────────────────────────────────────── */
@keyframes pageLoad {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  animation: pageLoad 0.6s ease-out;
}

/* ─────────────────────────────────────────────
   FOCUS STYLES (Accessibility)
   ───────────────────────────────────────────── */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────
   PRINT STYLES
   ───────────────────────────────────────────── */
@media print {
  .navbar-custom,
  .floating-cta,
  .footer-section {
    display: none !important;
  }
}