/* ============================================
   COMPONENTS.CSS — Reusable UI Components
   Maddy's Dancing Tails
   ============================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
}

.btn:active {
  transform: scale(0.98);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.btn:hover::before {
  opacity: 1;
}

.btn-accent {
  background: var(--color-brand);
  color: #FFFFFF;
  border-color: var(--color-brand);
}

.btn-accent:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  transform: scale(1.02) translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.btn-primary {
  background: var(--color-brand);
  color: #FFFFFF;
  border-color: var(--color-brand);
}

.btn-primary:hover {
  background: var(--color-brand-hover);
  transform: scale(1.02) translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-outline-light {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.02) translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.btn-ghost {
  background: transparent;
  color: var(--color-accent);
  padding: 8px 0;
  border-radius: 0;
}

.btn-ghost:hover {
  color: var(--color-accent-dark);
}

.btn-ghost i {
  transition: transform var(--transition-base);
}

.btn-ghost:hover i {
  transform: translateX(4px);
}

.btn-lg {
  padding: 18px 40px;
  font-size: var(--fs-body);
}

.btn-sm {
  padding: 10px 20px;
  font-size: var(--fs-caption);
}

.btn-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--radius-md);
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border-light);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow;
}

.card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-border);
}

/* Service Card */
.card-service {
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Premium SVG Icon Container */
.card-service__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.si-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  /* Soft ambient shadow + glass look */
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
  background: linear-gradient(145deg, var(--color-card) 0%, var(--color-bg) 100%);
  overflow: visible;
  will-change: transform;
}

.si-svg {
  width: 56px;
  height: 56px;
  display: block;
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* Remove old hover transform — GSAP handles it now */
.card-service:hover .card-service__icon {
  background: linear-gradient(145deg, var(--color-card) 0%, var(--color-bg) 100%);
  color: var(--color-brand);
  transform: none;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.card-service__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}

.card-service__desc {
  font-size: var(--fs-small);
  color: var(--color-secondary);
  line-height: var(--lh-relaxed);
}

/* SI Link / Animated Arrow */
.card-service__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  margin-top: auto;
  transition: gap var(--transition-base);
}

.si-link {
  gap: 8px;
}

.si-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent);
  will-change: transform;
}

.card-service:hover .card-service__link {
  gap: 12px;
}

/* ============================================
   Service Card — Premium Luxury Paper Background
   5-Layer System:
     L1  Paper background (#FFFCF8) + texture
     L2  Spotlight (::before)
     L3  Texture (handled by L1)
     L4  Outline doodles (::after)
     L5  Content (> *)
   ============================================ */

/* ── Keyframes ── */
@keyframes spotlightDrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(25px, 15px) scale(1.04); }
  66%  { transform: translate(-15px, 25px) scale(0.96); }
  100% { transform: translate(0, 0) scale(1); }
}

/* ── Layer 1 & 3: Paper Background & Texture ── */
.service-card--doodle {
  isolation: isolate;
  overflow: hidden;
  background: 
    repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(0,0,0,0.012) 1px, rgba(0,0,0,0.012) 3px),
    repeating-linear-gradient(-45deg, transparent, transparent 1px, rgba(0,0,0,0.012) 1px, rgba(0,0,0,0.012) 3px),
    #FFFCF8 !important;
  border: 1.5px solid rgba(220,205,185,.7) !important;
  box-shadow: 
    0 10px 30px rgba(0,0,0,.03), 
    0 2px 8px rgba(0,0,0,.02) !important;
  transition: 
    transform 0.4s ease, 
    border-color 0.4s ease, 
    box-shadow 0.4s ease;
}

.service-card--doodle:hover {
  transform: translateY(-8px);
  border-color: rgba(190,160,120,.9) !important;
  box-shadow: 
    0 20px 40px rgba(0,0,0,.06), 
    0 8px 16px rgba(0,0,0,.03) !important;
}

/* ── Layer 5: Content on top ── */
.service-card--doodle > * {
  position: relative;
  z-index: 5;
}

.service-card--doodle .card-service__icon {
  transition: transform 0.4s ease;
}

.service-card--doodle:hover .card-service__icon {
  transform: scale(1.05);
}

/* ── Layer 2: Soft Spotlight ── */
.service-card--doodle::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,223,170,.22) 0%, transparent 60%);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s ease;
  animation: spotlightDrift 22s ease-in-out infinite alternate;
}

.service-card--doodle:hover::before {
  opacity: 1.5;
}

/* Per-Card Spotlight Direction */
.service-card--puppy::before          { top: -200px; left: -200px; }
.service-card--obedience::before      { top: -250px; left: 50%; margin-left: -300px; }
.service-card--transportation::before { top: 50%; left: -300px; margin-top: -300px; }
.service-card--boarding::before       { bottom: -200px; right: -200px; }
.service-card--grooming::before       { bottom: -200px; left: -200px; }
.service-card--advanced::before       { top: -200px; right: -200px; }

/* ── Layer 4: Outline Doodles ── */
.service-card--doodle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  z-index: 3;
  pointer-events: none;
  opacity: 0.10;
  transition: opacity 0.4s ease;
}

.service-card--doodle:hover::after {
  opacity: 0.14;
}

/* ── Puppy Sale ── */
.service-card--puppy::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' fill='none' stroke='%23BDB7AE' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- puppy face --%3E%3Ccircle cx='440' cy='80' r='22'/%3E%3Cellipse cx='430' cy='60' rx='8' ry='14' transform='rotate(-15 430 60)'/%3E%3Cellipse cx='454' cy='62' rx='8' ry='14' transform='rotate(15 454 62)'/%3E%3Ccircle cx='434' cy='77' r='2.5'/%3E%3Ccircle cx='448' cy='77' r='2.5'/%3E%3Cellipse cx='441' cy='86' rx='4' ry='2.5'/%3E%3C!-- heart --%3E%3Cpath d='M520 55c0-6-5-11-11-11s-11 5-11 11c0 12 11 20 11 20s11-8 11-20z'/%3E%3C!-- paw 1 --%3E%3Ccircle cx='380' cy='160' r='8'/%3E%3Ccircle cx='370' cy='145' r='4.5'/%3E%3Ccircle cx='383' cy='142' r='4.5'/%3E%3Ccircle cx='394' cy='147' r='4.5'/%3E%3C!-- bone --%3E%3Cpath d='M480 150c3-3 8-3 11 0s3 8 0 11l-30 30c-3 3-8 3-11 0s-3-8 0-11z'/%3E%3Ccircle cx='487' cy='148' r='5'/%3E%3Ccircle cx='493' cy='154' r='5'/%3E%3Ccircle cx='449' cy='190' r='5'/%3E%3Ccircle cx='455' cy='184' r='5'/%3E%3C!-- baby bottle --%3E%3Crect x='530' y='120' width='12' height='30' rx='3'/%3E%3Crect x='528' y='115' width='16' height='8' rx='2'/%3E%3Cpath d='M536 150l3 12-9 0 3-12'/%3E%3C!-- toy ball --%3E%3Ccircle cx='490' cy='260' r='14'/%3E%3Cpath d='M480 252c5 4 10 4 15 0M481 268c4-5 10-5 14 0'/%3E%3Cline x1='483' y1='256' x2='483' y2='264'/%3E%3Cline x1='497' y1='256' x2='497' y2='264'/%3E%3C!-- sparkle --%3E%3Cpath d='M555 90l0-8M555 90l0 8M555 90l-8 0M555 90l8 0M555 90l-5-5M555 90l5 5M555 90l-5 5M555 90l5-5'/%3E%3C!-- paw 2 --%3E%3Ccircle cx='540' cy='210' r='6'/%3E%3Ccircle cx='532' cy='199' r='3.5'/%3E%3Ccircle cx='542' cy='196' r='3.5'/%3E%3Ccircle cx='550' cy='200' r='3.5'/%3E%3C!-- treat --%3E%3Crect x='410' y='280' width='20' height='12' rx='6'/%3E%3C!-- tiny stars --%3E%3Cpath d='M470 50l2 5 5 0-4 3 2 5-5-3-5 3 2-5-4-3 5 0z'/%3E%3Cpath d='M560 170l1.5 3.5 4 0-3 2.5 1.5 3.5-4-2.5-4 2.5 1.5-3.5-3-2.5 4 0z'/%3E%3C!-- small hearts --%3E%3Cpath d='M420 230c0-4-3.5-7-7-7s-7 3-7 7c0 8 7 13 7 13s7-5 7-13z'/%3E%3C!-- paw trail --%3E%3Ccircle cx='510' cy='320' r='5'/%3E%3Ccircle cx='504' cy='310' r='3'/%3E%3Ccircle cx='512' cy='308' r='3'/%3E%3Ccircle cx='518' cy='312' r='3'/%3E%3Ccircle cx='460' cy='340' r='5'/%3E%3Ccircle cx='454' cy='330' r='3'/%3E%3Ccircle cx='462' cy='328' r='3'/%3E%3Ccircle cx='468' cy='332' r='3'/%3E%3C/svg%3E");
}

/* ── Show & Obedience Training ── */
.service-card--obedience::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' fill='none' stroke='%23BDB7AE' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- ribbon/medal --%3E%3Ccircle cx='450' cy='75' r='18'/%3E%3Ccircle cx='450' cy='75' r='10'/%3E%3Cpath d='M438 88l-6 24 10-6 8 8-2-26M462 88l6 24-10-6-8 8 2-26'/%3E%3C!-- whistle --%3E%3Cellipse cx='530' cy='60' rx='14' ry='8'/%3E%3Crect x='540' y='55' width='20' height='10' rx='2'/%3E%3Ccircle cx='530' cy='60' r='3'/%3E%3Cpath d='M520 56l-10-12'/%3E%3C!-- cone --%3E%3Cpath d='M400 200l15-50 15 50z'/%3E%3Cline x1='403' y1='185' x2='427' y2='185'/%3E%3Cline x1='406' y1='170' x2='424' y2='170'/%3E%3C!-- paw prints trail --%3E%3Ccircle cx='480' cy='170' r='7'/%3E%3Ccircle cx='472' cy='158' r='4'/%3E%3Ccircle cx='483' cy='155' r='4'/%3E%3Ccircle cx='491' cy='160' r='4'/%3E%3Ccircle cx='530' cy='150' r='6'/%3E%3Ccircle cx='523' cy='140' r='3.5'/%3E%3Ccircle cx='532' cy='137' r='3.5'/%3E%3Ccircle cx='539' cy='141' r='3.5'/%3E%3C!-- stars --%3E%3Cpath d='M540 230l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Cpath d='M390 90l2 4 5 1-4 3 1 5-4-2-4 2 1-5-4-3 5-1z'/%3E%3Cpath d='M480 310l2 4 5 0-3 3 1 5-5-2-5 2 1-5-3-3 5 0z'/%3E%3C!-- collar --%3E%3Cellipse cx='460' cy='260' rx='22' ry='10'/%3E%3Ccircle cx='460' cy='270' r='5'/%3E%3Crect x='456' y='268' width='8' height='6' rx='1'/%3E%3C!-- sparkles --%3E%3Cpath d='M510 100l0-6M510 100l0 6M510 100l-6 0M510 100l6 0'/%3E%3Cpath d='M420 330l0-5M420 330l0 5M420 330l-5 0M420 330l5 0'/%3E%3C!-- leash --%3E%3Cpath d='M500 270c10-15 25-10 20 5s-20 15-15 30'/%3E%3Ccircle cx='505' cy='310' r='6'/%3E%3C/svg%3E");
}

/* ── Transportation ── */
.service-card--transportation::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' fill='none' stroke='%23BDB7AE' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- van --%3E%3Crect x='410' y='55' width='70' height='40' rx='6'/%3E%3Cpath d='M480 65l25 12v18h-25'/%3E%3Ccircle cx='430' cy='100' r='8'/%3E%3Ccircle cx='490' cy='100' r='8'/%3E%3Crect x='488' y='68' width='14' height='12' rx='2'/%3E%3Crect x='418' y='65' width='15' height='12' rx='2'/%3E%3Crect x='440' y='65' width='15' height='12' rx='2'/%3E%3C!-- leash --%3E%3Cpath d='M540 140c-8 10-5 25 5 30s20-5 15-20'/%3E%3Ccircle cx='540' cy='135' r='6'/%3E%3C!-- paw path --%3E%3Ccircle cx='400' cy='170' r='6'/%3E%3Ccircle cx='393' cy='160' r='3.5'/%3E%3Ccircle cx='403' cy='157' r='3.5'/%3E%3Ccircle cx='410' cy='161' r='3.5'/%3E%3Ccircle cx='440' cy='200' r='5.5'/%3E%3Ccircle cx='434' cy='191' r='3'/%3E%3Ccircle cx='443' cy='189' r='3'/%3E%3Ccircle cx='449' cy='193' r='3'/%3E%3Ccircle cx='480' cy='235' r='5'/%3E%3Ccircle cx='474' cy='227' r='3'/%3E%3Ccircle cx='483' cy='225' r='3'/%3E%3Ccircle cx='488' cy='228' r='3'/%3E%3C!-- suitcase --%3E%3Crect x='510' y='200' width='28' height='22' rx='4'/%3E%3Cpath d='M518 200v-6a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v6'/%3E%3Cline x1='510' y1='210' x2='538' y2='210'/%3E%3C!-- road arrows --%3E%3Cpath d='M420 280l8-8 8 8M428 272v20'/%3E%3Cpath d='M470 310l6-6 6 6M476 304v16'/%3E%3C!-- sparkles --%3E%3Cpath d='M550 80l0-6M550 80l0 6M550 80l-6 0M550 80l6 0'/%3E%3Cpath d='M390 320l0-5M390 320l0 5M390 320l-5 0M390 320l5 0'/%3E%3C!-- tiny stars --%3E%3Cpath d='M530 270l2 4 4 0-3 3 1 5-4-3-4 3 1-5-3-3 4 0z'/%3E%3Cpath d='M410 340l1.5 3 3.5 0-2.5 2 1 4-3.5-2-3.5 2 1-4-2.5-2 3.5 0z'/%3E%3C!-- bone --%3E%3Cpath d='M500 320c2-2 6-2 8 0s2 6 0 8l-22 22c-2 2-6 2-8 0s-2-6 0-8z'/%3E%3Ccircle cx='505' cy='318' r='4'/%3E%3Ccircle cx='510' cy='323' r='4'/%3E%3Ccircle cx='477' cy='349' r='4'/%3E%3Ccircle cx='482' cy='344' r='4'/%3E%3C/svg%3E");
}

/* ── Boarding ── */
.service-card--boarding::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' fill='none' stroke='%23BDB7AE' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- kennel / dog house --%3E%3Cpath d='M420 110l30-25 30 25'/%3E%3Crect x='425' y='110' width='50' height='35' rx='2'/%3E%3Cpath d='M443 145v-20a7 7 0 0 1 14 0v20'/%3E%3C!-- bowl --%3E%3Cpath d='M510 90c0 8-10 14-22 14s-22-6-22-14'/%3E%3Cellipse cx='510' cy='86' rx='22' ry='6'/%3E%3C!-- moon --%3E%3Cpath d='M540 55a18 18 0 1 0 0 36 14 14 0 1 1 0-36z'/%3E%3C!-- pillow --%3E%3Cellipse cx='430' cy='250' rx='28' ry='12' transform='rotate(-10 430 250)'/%3E%3Cpath d='M405 246c8-2 18-2 25 0M408 254c7 2 16 2 22 0'/%3E%3C!-- bone --%3E%3Cpath d='M510 180c3-3 8-3 11 0s3 8 0 11l-25 25c-3 3-8 3-11 0s-3-8 0-11z'/%3E%3Ccircle cx='517' cy='178' r='5'/%3E%3Ccircle cx='523' cy='184' r='5'/%3E%3Ccircle cx='485' cy='215' r='5'/%3E%3Ccircle cx='491' cy='209' r='5'/%3E%3C!-- tiny stars --%3E%3Cpath d='M560 55l1.5 3 3.5 0-2.5 2.5 1 3.5-3.5-2-3.5 2 1-3.5-2.5-2.5 3.5 0z'/%3E%3Cpath d='M570 75l1 2 2.5 0-2 1.5.5 2.5-2-1.5-2 1.5.5-2.5-2-1.5 2.5 0z'/%3E%3C!-- paw prints --%3E%3Ccircle cx='500' cy='290' r='7'/%3E%3Ccircle cx='492' cy='278' r='4'/%3E%3Ccircle cx='503' cy='275' r='4'/%3E%3Ccircle cx='511' cy='280' r='4'/%3E%3Ccircle cx='450' cy='320' r='6'/%3E%3Ccircle cx='443' cy='310' r='3.5'/%3E%3Ccircle cx='452' cy='307' r='3.5'/%3E%3Ccircle cx='459' cy='311' r='3.5'/%3E%3C!-- sparkles --%3E%3Cpath d='M540 140l0-6M540 140l0 6M540 140l-6 0M540 140l6 0'/%3E%3C!-- zzz sleep --%3E%3Ctext x='480' y='260' font-size='14' font-family='sans-serif' stroke-width='0.8'%3Ez%3C/text%3E%3Ctext x='492' y='250' font-size='11' font-family='sans-serif' stroke-width='0.8'%3Ez%3C/text%3E%3Ctext x='500' y='242' font-size='8' font-family='sans-serif' stroke-width='0.8'%3Ez%3C/text%3E%3C/svg%3E");
}

/* ── Dog Grooming ── */
.service-card--grooming::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' fill='none' stroke='%23BDB7AE' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- scissors --%3E%3Ccircle cx='440' cy='72' r='12'/%3E%3Ccircle cx='440' cy='108' r='12'/%3E%3Cline x1='440' y1='84' x2='470' y2='90'/%3E%3Cline x1='440' y1='96' x2='470' y2='90'/%3E%3Ccircle cx='470' cy='90' r='3'/%3E%3C!-- brush --%3E%3Crect x='520' y='55' width='12' height='35' rx='3'/%3E%3Cpath d='M520 90l-3 20h18l-3-20'/%3E%3Cline x1='524' y1='93' x2='524' y2='105'/%3E%3Cline x1='528' y1='93' x2='528' y2='105'/%3E%3Cline x1='532' y1='93' x2='532' y2='105'/%3E%3C!-- shampoo bottle --%3E%3Crect x='400' y='170' width='20' height='40' rx='5'/%3E%3Crect x='405' y='160' width='10' height='14' rx='2'/%3E%3Cpath d='M415 167h8v-5'/%3E%3C!-- bubbles --%3E%3Ccircle cx='460' cy='170' r='8'/%3E%3Ccircle cx='475' cy='158' r='5'/%3E%3Ccircle cx='480' cy='175' r='6'/%3E%3Ccircle cx='495' cy='165' r='4'/%3E%3Ccircle cx='465' cy='152' r='3'/%3E%3Ccircle cx='490' cy='185' r='3.5'/%3E%3C!-- paw --%3E%3Ccircle cx='530' cy='230' r='8'/%3E%3Ccircle cx='522' cy='218' r='4.5'/%3E%3Ccircle cx='533' cy='215' r='4.5'/%3E%3Ccircle cx='541' cy='220' r='4.5'/%3E%3C!-- comb --%3E%3Crect x='450' y='270' width='35' height='10' rx='3'/%3E%3Cline x1='455' y1='280' x2='455' y2='292'/%3E%3Cline x1='460' y1='280' x2='460' y2='292'/%3E%3Cline x1='465' y1='280' x2='465' y2='292'/%3E%3Cline x1='470' y1='280' x2='470' y2='292'/%3E%3Cline x1='475' y1='280' x2='475' y2='292'/%3E%3Cline x1='480' y1='280' x2='480' y2='292'/%3E%3C!-- sparkles --%3E%3Cpath d='M510 130l0-6M510 130l0 6M510 130l-6 0M510 130l6 0M510 130l-4-4M510 130l4 4M510 130l-4 4M510 130l4-4'/%3E%3Cpath d='M550 280l0-5M550 280l0 5M550 280l-5 0M550 280l5 0'/%3E%3C!-- tiny hearts --%3E%3Cpath d='M420 320c0-4-3-6.5-6.5-6.5s-6.5 2.5-6.5 6.5c0 7 6.5 11 6.5 11s6.5-4 6.5-11z'/%3E%3C!-- water drops --%3E%3Cpath d='M500 300c0 5-4 8-4 8s-4-3-4-8a4 4 0 0 1 8 0z'/%3E%3Cpath d='M540 310c0 4-3 6-3 6s-3-2-3-6a3 3 0 0 1 6 0z'/%3E%3C/svg%3E");
}

/* ── Advanced Training ── */
.service-card--advanced::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' fill='none' stroke='%23BDB7AE' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- target --%3E%3Ccircle cx='450' cy='75' r='22'/%3E%3Ccircle cx='450' cy='75' r='14'/%3E%3Ccircle cx='450' cy='75' r='6'/%3E%3C!-- trophy --%3E%3Cpath d='M520 55h30v10c0 12-6 20-15 24v8h-12v0'/%3E%3Cpath d='M520 55c-8 0-12 5-12 10s5 8 12 8'/%3E%3Cpath d='M550 55c8 0 12 5 12 10s-5 8-12 8'/%3E%3Crect x='523' y='97' width='24' height='5' rx='2'/%3E%3C!-- agility hurdle --%3E%3Cline x1='400' y1='180' x2='400' y2='220'/%3E%3Cline x1='445' y1='180' x2='445' y2='220'/%3E%3Cline x1='400' y1='190' x2='445' y2='190'/%3E%3Cline x1='400' y1='200' x2='445' y2='200'/%3E%3C!-- whistle --%3E%3Cellipse cx='510' cy='170' rx='12' ry='7'/%3E%3Crect x='519' y='165' width='18' height='10' rx='2'/%3E%3Ccircle cx='510' cy='170' r='2.5'/%3E%3Cpath d='M502 165l-8-10'/%3E%3C!-- stars cluster --%3E%3Cpath d='M540 230l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Cpath d='M490 260l2 4 5 1-4 3 1 5-4-2-4 2 1-5-4-3 5-1z'/%3E%3Cpath d='M560 150l1.5 3 3.5 .5-2.5 2.5 1 3.5-3.5-2-3.5 2 1-3.5-2.5-2.5 3.5-.5z'/%3E%3C!-- paw prints --%3E%3Ccircle cx='470' cy='300' r='7'/%3E%3Ccircle cx='462' cy='288' r='4'/%3E%3Ccircle cx='473' cy='285' r='4'/%3E%3Ccircle cx='481' cy='290' r='4'/%3E%3Ccircle cx='530' cy='320' r='6'/%3E%3Ccircle cx='523' cy='310' r='3.5'/%3E%3Ccircle cx='532' cy='307' r='3.5'/%3E%3Ccircle cx='539' cy='311' r='3.5'/%3E%3C!-- sparkles --%3E%3Cpath d='M400 90l0-6M400 90l0 6M400 90l-6 0M400 90l6 0'/%3E%3Cpath d='M550 290l0-5M550 290l0 5M550 290l-5 0M550 290l5 0'/%3E%3C!-- dog silhouette running --%3E%3Cpath d='M420 340c3-5 8-8 14-6s6 8 12 8c4 0 6-3 8-6l4 2c-3 5-6 8-12 8s-8-6-14-6c-4 0-8 2-10 5z'/%3E%3C/svg%3E");
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .service-card--doodle::after {
    opacity: 0.10;
  }
  .service-card--doodle:hover::after {
    opacity: 0.13;
  }
}

@media (max-width: 768px) {
  .service-card--doodle::after {
    opacity: 0.08;
  }
  .service-card--doodle:hover::after {
    opacity: 0.11;
  }
}



/* Blog Card */
.card-blog {
  padding: 0;
  overflow: hidden;
}

.card-blog__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.card-blog__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.card-blog:hover .card-blog__image img {
  transform: scale(1.05);
}

.card-blog__category {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-full);
  font-size: var(--fs-tag);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-blog__content {
  padding: var(--space-xl);
}

.card-blog__date {
  font-size: var(--fs-caption);
  color: var(--color-secondary);
  margin-bottom: var(--space-sm);
}

.card-blog__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-sm);
  transition: color var(--transition-base);
}

.card-blog:hover .card-blog__title {
  color: var(--color-accent);
}

.card-blog__excerpt {
  font-size: var(--fs-small);
  color: var(--color-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-lg);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Testimonial Card */
.card-testimonial {
  position: relative;
  min-width: 360px;
  max-width: 420px;
  padding: var(--space-2xl);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: all var(--transition-smooth);
}

.card-testimonial::before {
  content: '"';
  font-family: var(--font-heading);
  font-size: 8rem;
  color: var(--color-brand);
  opacity: 0.05;
  position: absolute;
  top: -10px;
  right: 20px;
  line-height: 1;
  animation: float-slow 6s ease-in-out infinite;
  pointer-events: none;
}

.card-testimonial:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card-testimonial__stars {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-lg);
}

.card-testimonial__stars i {
  color: var(--color-accent-dark);
  width: 18px;
  height: 18px;
  transition: transform var(--transition-base);
}

.card-testimonial:hover .card-testimonial__stars i {
  transform: scale(1.1);
}
.card-testimonial:hover .card-testimonial__stars i:nth-child(1) { transition-delay: 0.05s; }
.card-testimonial:hover .card-testimonial__stars i:nth-child(2) { transition-delay: 0.1s; }
.card-testimonial:hover .card-testimonial__stars i:nth-child(3) { transition-delay: 0.15s; }
.card-testimonial:hover .card-testimonial__stars i:nth-child(4) { transition-delay: 0.2s; }
.card-testimonial:hover .card-testimonial__stars i:nth-child(5) { transition-delay: 0.25s; }

.card-testimonial__text {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-primary);
  margin-bottom: var(--space-xl);
  font-style: italic;
}

.card-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.card-testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.card-testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-testimonial__name {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
}

.card-testimonial__dog {
  font-size: var(--fs-caption);
  color: var(--color-secondary);
}

/* Stat Card */
.stat-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-align: center;
  min-width: 140px;
}

.stat-card__number {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.stat-card__number .suffix {
  font-size: var(--fs-h3);
  color: var(--color-accent);
}

.stat-card__label {
  font-size: var(--fs-caption);
  color: var(--color-secondary);
  font-weight: var(--fw-medium);
  margin-top: 4px;
}

/* ---------- Navbar ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: 24px 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(to bottom, rgba(17, 17, 17, 0.25) 0%, rgba(17, 17, 17, 0) 100%);
}

.navbar.scrolled {
  background: var(--color-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(232, 226, 216, 0.5);
}

/* Internal Page Nav (Light Background) */
.navbar.navbar--internal {
  background: transparent;
}

.navbar--internal .navbar__links a {
  color: var(--color-primary);
}

.navbar--internal .navbar__links a:hover,
.navbar--internal .navbar__links a.active {
  color: var(--color-brand);
}

.navbar--internal .navbar__toggle span {
  background: var(--color-primary);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar__logo {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: var(--fw-extrabold);
  color: #fff;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--transition-base);
}

.site-logo {
  height: 52px;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

.navbar.scrolled .navbar__logo {
  color: var(--color-primary);
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}

.navbar__links a {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: #FFFFFF;
  position: relative;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s;
  padding: 8px 0;
}

.navbar__links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-brand);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-smooth);
}

.navbar__links a:hover,
.navbar__links a.active {
  color: #FFFFFF;
}

.navbar__links a:hover::after,
.navbar__links a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Scrolled state — dark text on light frosted background */
.navbar.scrolled .navbar__links a {
  color: var(--color-primary);
}

.navbar.scrolled .navbar__links a:hover,
.navbar.scrolled .navbar__links a.active {
  color: var(--color-primary);
}

.navbar__cta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Mobile Menu Toggle */
.navbar__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  cursor: pointer;
  z-index: calc(var(--z-overlay) + 1);
  background: none;
  border: none;
  padding: 4px;
}

.navbar__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.navbar.scrolled .navbar__toggle span {
  background: var(--color-primary);
}

.navbar__toggle.active span {
  background: var(--color-primary) !important;
}

.navbar__toggle.active span:nth-child(1) {
  transform: rotate(45deg) translateY(5px) translateX(5px);
}

.navbar__toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.navbar__toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-5px) translateX(5px);
}

/* Mobile Menu — Premium Editorial Full-Screen Navigation */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(255, 253, 249, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.active {
  opacity: 1;
  visibility: visible;
}

/* Subtle Gradient Background System */
.mobile-menu__bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: 
    radial-gradient(circle at 10% 20%, rgba(220, 215, 205, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 90% 75%, rgba(210, 205, 195, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 50% 95%, rgba(180, 175, 165, 0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.mobile-menu.active .mobile-menu__bg {
  opacity: 1;
  transition-delay: 0.1s;
}

/* Mobile Menu Header */
.mobile-menu__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--container-px);
  flex-shrink: 0;
}

.mobile-menu__logo {
  display: flex;
  align-items: center;
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  transform: rotate(-90deg);
}

.mobile-menu.active .mobile-menu__close {
  opacity: 1;
  transform: rotate(0);
  transition-delay: 0.15s;
}

.mobile-menu__close:hover {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

.mobile-menu__close:active {
  transform: scale(0.92);
}

.mobile-menu__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Navigation Container */
.mobile-menu__nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: var(--space-xl) var(--container-px) 0;
  flex: 1;
}

/* Individual Navigation Items */
.mobile-menu__item {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 3vw, 20px);
  padding: clamp(14px, 2.5vw, 20px) 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu__item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.mobile-menu.active .mobile-menu__item {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered entry for each nav item */
.mobile-menu.active .mobile-menu__item:nth-child(1) { transition-delay: 0.12s; }
.mobile-menu.active .mobile-menu__item:nth-child(2) { transition-delay: 0.18s; }
.mobile-menu.active .mobile-menu__item:nth-child(3) { transition-delay: 0.24s; }
.mobile-menu.active .mobile-menu__item:nth-child(4) { transition-delay: 0.30s; }
.mobile-menu.active .mobile-menu__item:nth-child(5) { transition-delay: 0.36s; }

/* Sequential Number */
.mobile-menu__number {
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 1.5vw, 0.8rem);
  font-weight: var(--fw-medium);
  color: rgba(0, 0, 0, 0.28);
  letter-spacing: 0.04em;
  min-width: 22px;
  transition: color 0.3s ease;
}

/* Navigation Label */
.mobile-menu__label {
  font-family: var(--font-heading);
  font-size: clamp(32px, 6vw, 42px);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  transition: transform 0.3s ease, color 0.3s ease;
  position: relative;
}

/* Active Page Indicator */
.mobile-menu__item.active .mobile-menu__label {
  font-weight: var(--fw-bold);
}

.mobile-menu__item.active .mobile-menu__label::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
}

.mobile-menu__item.active .mobile-menu__number {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

/* Hover / Touch interactions */
@media (hover: hover) {
  .mobile-menu__item:hover .mobile-menu__label {
    transform: translateX(8px);
    color: var(--color-brand);
  }
  .mobile-menu__item:hover .mobile-menu__number {
    color: var(--color-primary);
  }
}

.mobile-menu__item:active .mobile-menu__label {
  transform: scale(0.98);
}

/* Focus state for keyboard nav */
.mobile-menu__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Bottom Section (Trainer Card + CTA) */
.mobile-menu__bottom-section {
  padding: var(--space-xl) var(--container-px) var(--space-xl);
  margin-top: auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.active .mobile-menu__bottom-section {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
}

/* Trainer Profile Card */
.trainer-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(145deg, #1f1f1f 0%, #0a0a0a 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.trainer-card__photo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.trainer-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trainer-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.trainer-card__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 2px;
}

.trainer-card__name {
  font-family: var(--font-heading);
  font-size: 18px;
  color: #FFFFFF;
  margin: 0 0 2px 0;
  font-weight: 500;
}

.trainer-card__role {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}

.trainer-card__desc {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  max-width: 95%;
}

.trainer-card__bg-paw {
  position: absolute;
  right: -10px;
  bottom: -15px;
  pointer-events: none;
  z-index: 1;
}

/* CTA Button */
.mobile-menu__cta {
  width: 100%;
}

.mobile-menu__cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--color-primary);
  color: #FFFFFF;
  padding: 18px 24px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.mobile-menu__cta-btn svg {
  transition: transform 0.35s ease;
  flex-shrink: 0;
}

.mobile-menu__cta-btn:hover {
  background: #000000;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.mobile-menu__cta-btn:hover svg {
  transform: translateX(4px);
}

.mobile-menu__cta-btn:active {
  transform: translateY(-2px) scale(0.98);
}

.mobile-menu__cta-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Sophisticated Decorative Patterns */
.mobile-menu__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.mobile-menu__decor-item {
  position: absolute;
  color: var(--color-primary);
  opacity: 0.03;
}

.mobile-menu__decor-item--paw-1 {
  top: 15%;
  right: 8%;
  transform: rotate(20deg);
}

.mobile-menu__decor-item--paw-2 {
  top: 40%;
  left: -2%;
  transform: rotate(-15deg);
}

.mobile-menu__decor-item--paw-3 {
  bottom: 28%;
  right: 5%;
  transform: rotate(-30deg);
}

.mobile-menu__decor-item--paw-4 {
  bottom: 12%;
  left: 6%;
  transform: rotate(35deg);
}

/* Scroll lock when mobile menu is active */
body.mobile-menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  touch-action: none;
}

/* ---- Tablet adjustments (641px – 1023px) ---- */
@media (min-width: 641px) and (max-width: 1023px) {
  .mobile-menu__nav {
    padding-top: var(--space-3xl);
    max-width: 520px;
  }

  .mobile-menu__cta {
    max-width: 520px;
  }

  .mobile-menu__item {
    padding: clamp(16px, 2.5vw, 22px) 0;
  }

  .mobile-menu__label {
    font-size: clamp(34px, 5vw, 38px);
  }
}

/* ---- Small mobile (320px – 375px) ---- */
@media (max-width: 375px) {
  .mobile-menu__label {
    font-size: 28px;
  }

  .mobile-menu__item {
    padding: 12px 0;
  }

  .mobile-menu__cta-btn {
    padding: 16px 20px;
    font-size: var(--fs-body);
  }
}

/* ---------- Footer ---------- */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-secondary);
  padding: var(--space-4xl) 0 var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.footer::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  bottom: -150px;
  right: -50px;
  border-radius: 30% 70% 50% 40% / 50% 30% 70% 60%;
  background: #000000;
  filter: blur(80px);
  opacity: 0.02;
  pointer-events: none;
  z-index: 0;
}

.footer .container {
  position: relative;
  z-index: 1;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.footer__brand p {
  color: var(--color-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-md);
  max-width: 300px;
}

.footer__logo {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
}


.footer__heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-lg);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__list a {
  font-size: var(--fs-small);
  color: var(--color-secondary);
  transition: all var(--transition-base);
  position: relative;
  display: inline-block;
}

.footer__list a::after,
.footer__legal a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-smooth);
}

.footer__list a:hover {
  color: var(--color-accent);
}

.footer__list a:hover::after,
.footer__legal a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-secondary);
}

.footer__contact-item i {
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.footer__social a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-section-bg);
  border: 1px solid var(--color-border);
  color: var(--color-secondary);
  transition: all var(--transition-smooth);
}

.footer__social a[aria-label="Instagram"] { color: #E1306C; }
.footer__social a[aria-label="Facebook"] { color: #1877F2; }
.footer__social a[aria-label="WhatsApp"] { color: #25D366; }
.footer__social a[aria-label="YouTube"] { color: #FF0000; }

.footer__social a:hover {
  transform: translateY(-4px) rotate(8deg);
}

.footer__social a[aria-label="Instagram"]:hover { background: #E1306C; border-color: #E1306C; color: #fff; }
.footer__social a[aria-label="Facebook"]:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.footer__social a[aria-label="WhatsApp"]:hover { background: #25D366; border-color: #25D366; color: #fff; }
.footer__social a[aria-label="YouTube"]:hover { background: #FF0000; border-color: #FF0000; color: #fff; }

.footer__bottom {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer__bottom p {
  font-size: var(--fs-caption);
  color: var(--color-secondary);
}

.footer__legal {
  display: flex;
  gap: var(--space-lg);
}

.footer__legal a {
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.4);
  transition: color var(--transition-base);
  position: relative;
}

.footer__legal a:hover {
  color: var(--color-accent);
}

/* ---------- Form Elements ---------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}

.form-label .required {
  color: var(--color-accent);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 14px 18px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  color: var(--color-primary);
  transition: all var(--transition-base);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(200, 155, 94, 0.1);
  background: var(--color-card);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-secondary);
  opacity: 0.5;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.form-error {
  font-size: var(--fs-caption);
  color: var(--color-error);
  display: none;
}

.form-group.error .form-input,
.form-group.error .form-select,
.form-group.error .form-textarea {
  border-color: var(--color-error);
}

.form-group.error .form-error {
  display: block;
}

/* ---------- Accordion ---------- */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.accordion__item {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  transition: all var(--transition-base);
}

.accordion__item:hover {
  border-color: var(--color-border);
}

.accordion__item.active {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border);
}

.accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-lg) var(--space-xl);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  gap: var(--space-md);
}

.accordion__icon {
  flex-shrink: 0;
  transition: transform var(--transition-base);
  color: var(--color-accent);
}

.accordion__item.active .accordion__icon {
  transform: rotate(180deg);
}

.accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.accordion__content {
  padding: 0 var(--space-xl) var(--space-lg);
  font-size: var(--fs-small);
  color: var(--color-secondary);
  line-height: var(--lh-relaxed);
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  cursor: zoom-out;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  transform: scale(0.9);
  transition: transform var(--transition-smooth);
}

.lightbox.active .lightbox__img {
  transform: scale(1);
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

/* ---------- Page Hero ---------- */
.page-hero {
  padding: calc(100px + var(--space-3xl)) 0 var(--space-3xl);
  background: var(--color-card);
  text-align: center;
  border-bottom: 1px solid var(--color-border-light);
}

.page-hero .section-tag {
  justify-content: center;
}

.page-hero h1 {
  margin-bottom: var(--space-md);
}

.page-hero .text-accent {
  color: var(--color-brand);
}

.page-hero p {
  font-size: var(--fs-body-lg);
  max-width: 560px;
  margin: 0 auto;
}

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  font-size: var(--fs-caption);
  color: var(--color-secondary);
}

.breadcrumb a:hover {
  color: var(--color-accent);
}

.breadcrumb .separator {
  color: var(--color-border);
}

/* ---------- Back to Top ---------- */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-base);
  z-index: var(--z-dropdown);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: translateY(-4px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .navbar__links,
  .navbar__cta {
    display: none;
  }

  .navbar__toggle {
    display: flex;
  }

  .card-testimonial {
    min-width: 300px;
  }

  .site-logo {
    height: 46px;
  }
}

@media (max-width: 767px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer__legal {
    justify-content: center;
  }

  .site-logo {
    height: 40px;
  }

  .card-testimonial {
    min-width: 280px;
  }

  .stat-card {
    min-width: 110px;
    padding: var(--space-md) var(--space-lg);
  }

  .page-hero {
    padding: calc(80px + var(--space-2xl)) 0 var(--space-2xl);
  }
}