/* Urban Care — Shared Styles */
* { font-family: 'DM Sans', sans-serif; }
h1,h2,h3,h4,h5,h6,.font-display { font-family: 'Syne', sans-serif; }

.nav-blur {
  background: rgba(10,15,30,0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.card-glass {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
}
.service-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  transition: all 0.3s ease;
}
.service-card:hover {
  background: rgba(14,165,233,0.08);
  border-color: rgba(14,165,233,0.3);
  transform: translateY(-4px);
}
.btn-primary {
  background: linear-gradient(135deg, #0ea5e9, #0369a1);
  color: white;
  border-radius: 8px;
  padding: 12px 28px;
  font-weight: 600;
  font-family: 'Syne', sans-serif;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-primary:hover {
  box-shadow: 0 8px 30px rgba(14,165,233,0.4);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  border: 1.5px solid #0ea5e9;
  color: #0ea5e9;
  border-radius: 8px;
  padding: 12px 28px;
  font-weight: 600;
  font-family: 'Syne', sans-serif;
  transition: all 0.25s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-outline:hover { background: #0ea5e9; color: white; }
.tag {
  background: rgba(14,165,233,0.12);
  color: #38bdf8;
  border: 1px solid rgba(56,189,248,0.25);
  border-radius: 999px;
  padding: 4px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-block;
}
.input-field {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: white;
  border-radius: 8px;
  padding: 10px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
}
.input-field:focus { border-color: #0ea5e9; }
.input-field::placeholder { color: rgba(255,255,255,0.35); }
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  z-index: 1000;
}
.modal-overlay.active { display: flex; }
.modal-box {
  background: #111827;
  border: 1px solid rgba(14,165,233,0.25);
  border-radius: 16px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.mobile-menu { display: none; }
.mobile-menu.open { display: flex; flex-direction: column; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0f1e; }
::-webkit-scrollbar-thumb { background: #0369a1; border-radius: 3px; }
.page-hero {
  background: radial-gradient(ellipse 80% 60% at 50% 30%, #0369a1 0%, #0a0f1e 65%);
  padding-top: 120px;
  padding-bottom: 80px;
}
.star-badge {
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: white;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-block;
}
.check-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.check-item svg { flex-shrink: 0; margin-top: 2px; }
section { scroll-margin-top: 80px; }
.pricing-card {
  background: linear-gradient(135deg, rgba(3,105,161,0.12) 0%, rgba(14,165,233,0.06) 100%);
  border: 1px solid rgba(14,165,233,0.2);
  transition: all 0.3s ease;
}
.pricing-card:hover, .pricing-card.featured {
  border-color: #0ea5e9;
  box-shadow: 0 0 40px rgba(14,165,233,0.2);
  transform: translateY(-6px);
}
.pricing-card.featured {
  background: linear-gradient(135deg, rgba(3,105,161,0.25) 0%, rgba(14,165,233,0.15) 100%);
}
.duration-tab {
  cursor: pointer;
  padding: 8px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s;
}
.duration-tab.active { background: #0ea5e9; color: white; }
.duration-tab:not(.active) { color: rgba(255,255,255,0.5); }

/* Theme variables and global overrides to enforce blue/black theme */
:root{
  --brand-50:#f0f9ff; --brand-100:#e0f2fe; --brand-200:#bae6fd; --brand-300:#7dd3fc; --brand-400:#38bdf8; --brand-500:#0ea5e9; --brand-600:#0284c7; --brand-700:#0369a1; --brand-800:#075985; --brand-900:#0c4a6e;
  --dark-1:#071025; --dark-2:#0a0f1e; --dark-3:#111827; --muted:rgba(255,255,255,0.55);
}

html,body{height:100%;}
body{background:var(--dark-1);color:#eef6ff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Make any element using Tailwind-like "bg-white" utilities fit the dark theme */
[class*="bg-white"]{background-color:rgba(255,255,255,0.04) !important;color:inherit !important}
[class*="bg-white/"]{background-color:rgba(255,255,255,0.04) !important;color:inherit !important}

/* Tweak borders and muted text for contrast */
[class*="border-white"]{border-color:rgba(255,255,255,0.06) !important}
.text-gray-500, .text-gray-400, .text-gray-300 { color: rgba(255,255,255,0.62) !important }
.text-gray-200, .text-gray-100 { color: rgba(255,255,255,0.8) !important }

/* Cards and containers default to subtle dark glass */
.card, .card-glass, .service-card, .pricing-card, .modal-box, details { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important; border-color: rgba(255,255,255,0.06) !important }

/* Links and accents */
a, a:hover { color: var(--brand-400) }
.nav-link { color: rgba(255,255,255,0.8) }

/* Utility: ensure text on very light inline elements remains readable */
[style*="background:"] { color: inherit }