/* ==========================================================================
   Drive Babylon — Custom CSS
   Branding: Primary (Teal), Secondary (Gold)
   ========================================================================== */

/* ===== CSS Variables (Theme) ===== */
:root{
  /* Brand Colors */
  --brand-teal:        #136f72;
  --brand-teal-700:    #0f5c5e;
  --brand-teal-100:    #e7f4f4;

  --brand-gold:        rgb(252,166,0);
  --brand-gold-700:    rgb(214,141,0);
  --brand-gold-100:    rgba(252,166,0,.12);

  /* Neutral Palette */
  --ink-900:           #183e41;
  --ink-700:           #3e585a;
  --ink-500:           #6b8385;

  --bg-page:           #ffffff;
  --bg-subtle:         #fafcfc;

  /* Radii */
  --radius-lg:         18px;
  --radius-md:         14px;
  --radius-pill:       999px;

  /* Shadows */
  --shadow-base:       0 8px 24px rgba(0,0,0,.06);
  --shadow-hover:      0 14px 32px rgba(0,0,0,.12);

  /* Focus Ring */
  --focus-ring:        0 0 0 0.25rem rgba(19,111,114,.25);
}

/* ===== Base ===== */
html, body { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body{
  background: var(--bg-page);
  color: var(--ink-900);
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans';
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.section-title{
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 1rem;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

.text-brand{ color: var(--brand-teal) !important; }
.text-brand-secondary{ color: var(--brand-gold) !important; }

.bg-verylight{ background: var(--bg-subtle); }

/* ===== Navbar ===== */
.navbar{
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  background: #fff;
}
.brand-mark{ width:48px; height:48px; object-fit:contain; }
.brand-word{ font-weight:700; letter-spacing:.02em; color:var(--brand-teal); }

/* ===== Buttons ===== */
.btn-brand{
  --bs-btn-bg: var(--brand-teal);
  --bs-btn-border-color: var(--brand-teal);
  --bs-btn-hover-bg: var(--brand-teal-700);
  --bs-btn-hover-border-color: var(--brand-teal-700);
  --bs-btn-color:#fff;
}

.btn-brand-secondary{
  --bs-btn-bg: var(--brand-gold);
  --bs-btn-border-color: var(--brand-gold);
  --bs-btn-hover-bg: var(--brand-gold-700);
  --bs-btn-hover-border-color: var(--brand-gold-700);
  --bs-btn-color:#fff;
}

.btn-ghost{
  color: var(--brand-teal);
  border: 1px solid var(--brand-teal);
  background: transparent;
}
.btn-ghost:hover{
  color: #fff;
  background: var(--brand-teal);
}

/* ===== Hero ===== */
.hero{
  background: radial-gradient(900px 420px at 10% 10%, var(--brand-teal-100), #ffffff);
}

/* ===== Cards ===== */
.card,
.feature-card,
.shadow-soft{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
  transition: transform .2s ease, box-shadow .2s ease;
}

.feature-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

/* ===== Icon Pills ===== */
.icon-pill{
  width: 3rem;
  height: 3rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-teal-100);
  color: var(--brand-teal);
}

/* Services + How It Works enhanced pills */
.feature-card .icon-pill,
#how + section .icon-pill{
  background: var(--brand-teal);
  color: #fff;
  box-shadow:
    0 6px 16px rgba(0,0,0,.12),
    0 0 0 6px rgba(19,111,114,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card .icon-pill:hover,
#how + section .icon-pill:hover{
  transform: scale(1.06);
  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    0 0 0 6px rgba(19,111,114,.10);
}

/* ===== Specialty Blocks ===== */
.stat{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-md);
  padding:1rem 1.25rem;
  box-shadow: var(--shadow-base);
}

/* Badges */
.badge-soft{
  background: var(--brand-teal-100);
  color: var(--brand-teal);
  border:1px solid rgba(0,0,0,.05);
}
.badge-soft-secondary{
  background: var(--brand-gold-100);
  color: var(--brand-gold);
  border:1px solid rgba(0,0,0,.05);
}

/* Accordion */
.accordion-button:not(.collapsed){
  background-color: var(--brand-teal-100) !important;
  color: var(--brand-teal) !important;
  box-shadow: none;
}
.accordion-button:focus{ box-shadow: var(--focus-ring); }

/* ===== Footer ===== */
.footer a{ color: inherit; text-decoration: none; }
.footer a:hover{ text-decoration: underline; }

/* ===== How It Works fallback (if HTML not updated) ===== */
#how + section .text-center.p-3.h-100{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
  padding: 1.25rem !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
#how + section .text-center.p-3.h-100:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

/* ===== Focus & Motion ===== */
:where(button, [href], input, select, textarea):focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition: none !important; animation: none !important; }
}

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  .brand-mark{ width:40px; height:40px; }
}
@media (max-width: 575.98px){
  .icon-pill{ width:2.75rem; height:2.75rem; }
  .section-title{ font-size: 1.35rem; }
}