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

/* Shared theme and compact typography */
:root{
  --accent-1: #0b5ed7;
  --accent-2: #064e9b;
  --accent-rgba: rgba(11,94,215,0.18);
}
html{ scroll-behavior: smooth; font-size:14px; }
body, *{ font-family: 'Poppins', sans-serif; }
h1,h2,h3,h4,h5,h6,.font-heading{ font-family: 'Montserrat', sans-serif; font-weight:700; line-height:1.05; }
/* Reduced heading sizes for compact layout */
h1{ font-size:1.6rem; }
h2{ font-size:1.25rem; }
h3{ font-size:1.05rem; }

/* Common utilities used across pages */
.marquee-track{ display:flex; gap:4rem; animation:marquee 22s linear infinite; white-space:nowrap; }
@keyframes marquee{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-50%);} }

.car-card{ transition: transform .4s ease, box-shadow .4s ease; }
.car-card:hover{ transform:translateY(-8px); box-shadow:0 25px 60px rgba(0,0,0,0.12); }
.car-img{ transition: transform .6s ease; }

.why-card{ transition:border-color .4s ease, box-shadow .4s ease; }
.why-card:hover{ border-color:transparent !important; box-shadow:0 25px 60px rgba(0,0,0,0.1); }
.why-icon{ transition: transform .3s ease; }
.why-card:hover .why-icon{ transform:scale(1.12); }

.testi-card{ transition:border-color .4s ease; }
.testi-card:hover{ border-color: rgba(11,94,215,0.28) !important; }

.form-input:focus{ outline:none; border-color:var(--accent-1); box-shadow:0 0 0 3px var(--accent-rgba); }
.brand-pill.active{ background: linear-gradient(135deg,var(--accent-1),var(--accent-2)); color:#fff; box-shadow:0 4px 14px var(--accent-rgba); border-color:transparent; }
.grad-text{ background: linear-gradient(90deg,var(--accent-1),#0a58ca,var(--accent-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* compact CTA shadows */
.btn-accent{ background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); box-shadow:0 4px 20px rgba(11,94,215,0.22); color:#fff; }

/* small tweaks */
.text-compact{ font-size:0.95rem; }

/* SEO guide pages */
.seo-nav{ background:rgba(255,255,255,0.88); backdrop-filter:blur(10px); border-bottom:1px solid #e5e7eb; }
.seo-hero{ position:relative; overflow:hidden; border-radius:1.5rem; }
.seo-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(3,7,18,0.85),rgba(3,7,18,0.55),rgba(3,7,18,0.2)); }
.seo-hero-content{ position:relative; z-index:2; }
.seo-chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .75rem; border-radius:999px; border:1px solid #dbeafe; background:#eff6ff; color:#1d4ed8; font-size:.78rem; font-weight:600; }
.seo-card{ background:#fff; border:1px solid #e5e7eb; border-radius:1rem; box-shadow:0 6px 24px rgba(15,23,42,0.05); }
.seo-card:hover{ box-shadow:0 12px 36px rgba(2,6,23,0.09); border-color:#dbeafe; }
.seo-stat{ background:linear-gradient(145deg,#eff6ff,#ffffff); border:1px solid #dbeafe; border-radius:.9rem; }
.seo-section-title{ font-size:1.45rem; line-height:1.2; font-weight:800; color:#0f172a; }
.seo-list li{ margin-top:.55rem; color:#334155; }
.seo-table-wrap{ overflow-x:auto; border:1px solid #e5e7eb; border-radius:1rem; }
.seo-table{ width:100%; border-collapse:collapse; background:#fff; }
.seo-table th,.seo-table td{ padding:.85rem .9rem; border-bottom:1px solid #f1f5f9; text-align:left; font-size:.92rem; }
.seo-table th{ background:#f8fafc; color:#1e293b; font-weight:700; }
.seo-faq-item{ border:1px solid #e5e7eb; border-radius:.9rem; background:#fff; }
.seo-faq-item summary{ cursor:pointer; list-style:none; padding:1rem 1.1rem; font-weight:700; color:#0f172a; }
.seo-faq-item p{ padding:0 1.1rem 1rem; color:#475569; }
.seo-faq-item summary::-webkit-details-marker{ display:none; }

/* Global logo on all pages */
body::after{
  content:"";
  position:fixed;
  right:14px;
  bottom:14px;
  width:72px;
  height:72px;
  border-radius:999px;
  background:#fff url('/assets/branding/buy-cars-nigeria-logo.png') center/contain no-repeat;
  box-shadow:0 8px 24px rgba(2,6,23,0.22);
  border:1px solid #e2e8f0;
  z-index:70;
  pointer-events:none;
}
@media (max-width: 768px){
  body::after{ width:56px; height:56px; right:10px; bottom:10px; }
}