/* =========================================================================
   diagnostic.ge — design system
   Premium / modern / minimal / futuristic / trustworthy / mobile-first
   ========================================================================= */

:root {
  /* --- color tokens --- */
  --bg: #05070d;
  --bg-alt: #070b14;
  --bg-elevated: #0c1120;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: #f3f6fb;
  --text-muted: #9aa7bd;
  --text-faint: #64708a;

  --primary: #3b7dff;
  --primary-strong: #5b93ff;
  --cyan: #22d3ee;
  --success: #34d399;
  --danger: #f97066;

  --grad-primary: linear-gradient(135deg, #3b7dff 0%, #22d3ee 100%);
  --grad-surface: linear-gradient(180deg, rgba(59, 125, 255, 0.10) 0%, rgba(34, 211, 238, 0.02) 100%);
  --glow-primary: 0 0 0 1px rgba(59, 125, 255, 0.25), 0 8px 40px -8px rgba(59, 125, 255, 0.45);
  --glow-cyan: 0 0 40px -8px rgba(34, 211, 238, 0.55);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --shadow-soft: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 50px -24px rgba(0, 0, 0, 0.7);

  --container: 1180px;
  --header-h: 72px;
  --mobile-bar-h: 68px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;

  --font-geo: "Noto Sans Georgian", "BPG Arial", "Sylfaen", -apple-system, "Segoe UI", sans-serif;
  --font-display: "Manrope", var(--font-geo);
}

/* =========================================================================
   Reset
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-geo);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: var(--mobile-bar-h);
}
@media (min-width: 900px) {
  body { padding-bottom: 0; }
}
img, svg { display: block; max-width: 100%; }
/* Default icon size — any more specific contextual rule below (higher
   specificity, e.g. ".icon-badge svg") overrides this safely. */
.icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: -0.15em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display), var(--font-geo); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =========================================================================
   Layout helpers
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 640px) { .container { padding: 0 32px; } }

.section { padding: 72px 0; position: relative; }
@media (min-width: 900px) { .section { padding: 110px 0; } }
.section--tight { padding: 56px 0; }
@media (min-width: 900px) { .section--tight { padding: 80px 0; } }
.section--alt { background: var(--bg-alt); }

.section-head { max-width: 680px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
@media (min-width: 900px) { .section-head { margin-bottom: 56px; } }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.22);
  padding: 7px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }
.eyebrow svg { width: 15px; height: 15px; }

h1, .h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); }
h2, .h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }

.lede { font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--text-muted); margin-top: 16px; }

.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 15px 26px;
  border-radius: var(--radius-full);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--grad-primary);
  color: #04070d;
  box-shadow: var(--glow-primary);
}
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(59,125,255,.35), 0 14px 44px -10px rgba(34,211,238,.55); transform: translateY(-1px); }

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: var(--surface-strong); border-color: rgba(255,255,255,0.28); }

.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--outline:hover { border-color: var(--cyan); color: var(--cyan); }

.btn--sm { padding: 10px 18px; font-size: 0.88rem; }
.btn--block { width: 100%; }
.btn--lg { padding: 18px 32px; font-size: 1.02rem; }

/* --- CTA hierarchy: Call (tier 1) > Book (tier 2) > WhatsApp (tier 3) ---
   Call must read as the single strongest action on every page: solid
   blue/cyan gradient + a slow breathing glow. Book stays a clean outline
   (already defined above). WhatsApp gets its own green language so it
   never competes visually with Call, but stays clearly tappable. */
.btn--call {
  background: var(--grad-primary);
  color: #04070d;
  box-shadow: var(--glow-primary);
  animation: callPulse 2.6s ease-in-out infinite;
}
.btn--call:hover {
  box-shadow: 0 0 0 1px rgba(59,125,255,.4), 0 16px 50px -8px rgba(34,211,238,.7);
  transform: translateY(-1px);
  animation-play-state: paused;
}
@keyframes callPulse {
  0%, 100% { box-shadow: var(--glow-primary); }
  50% { box-shadow: 0 0 0 1px rgba(59,125,255,.35), 0 10px 54px -6px rgba(34,211,238,.8); }
}

.btn--whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #04140c;
  box-shadow: 0 0 0 1px rgba(37,211,102,0.28), 0 8px 32px -8px rgba(37,211,102,0.55);
}
.btn--whatsapp:hover {
  box-shadow: 0 0 0 1px rgba(37,211,102,.4), 0 14px 42px -8px rgba(37,211,102,.7);
  transform: translateY(-1px);
}
.btn--whatsapp-outline {
  background: rgba(37,211,102,0.06);
  color: #3fe07d;
  border-color: rgba(37,211,102,0.35);
}
.btn--whatsapp-outline:hover { background: rgba(37,211,102,0.12); border-color: #25d366; color: #3fe07d; }
.btn--whatsapp-ghost {
  background: rgba(37,211,102,0.1);
  color: #3fe07d;
  border-color: rgba(37,211,102,0.32);
  width: 40px; padding: 0; aspect-ratio: 1; flex-shrink: 0;
}
.btn--whatsapp-ghost:hover { background: rgba(37,211,102,0.18); border-color: #25d366; }
.btn--whatsapp-ghost svg { width: 18px; height: 18px; }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(5, 7, 13, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--border); background: rgba(5, 7, 13, 0.92); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; color: var(--text); }
.logo .logo-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--grad-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--glow-primary);
}
.logo .logo-mark svg { width: 19px; height: 19px; color: #04070d; }
.logo .logo-dot { color: var(--cyan); }

.main-nav { display: none; }
@media (min-width: 980px) {
  .main-nav { display: flex; align-items: center; gap: 4px; }
  .main-nav a {
    padding: 10px 15px; border-radius: var(--radius-full); font-size: 0.94rem; font-weight: 600; color: var(--text-muted);
    transition: color 0.2s ease, background 0.2s ease;
  }
  .main-nav a:hover, .main-nav a.is-active { color: var(--text); background: var(--surface); }
}

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions .header-whatsapp { display: none; }
@media (min-width: 780px) { .header-actions .header-whatsapp { display: inline-flex; } }
.header-actions .btn--outline { display: none; }
@media (min-width: 980px) { .header-actions .btn--outline { display: inline-flex; } }
.header-actions .btn--call { display: none; }
@media (min-width: 560px) { .header-actions .btn--call { display: inline-flex; } }

.nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
}
.nav-toggle svg { width: 20px; height: 20px; }
@media (min-width: 980px) { .nav-toggle { display: none; } }

/* mobile drawer */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 90;
  visibility: hidden; pointer-events: none;
  /* the closed-state panel sits just off-screen via translateX(100%).
     `contain: paint` makes this box the containing block for its
     fixed/absolute descendants and clips them to it — safe, since the
     open/close slide animation never needs to render outside this box. */
  overflow: hidden;
  contain: paint;
}
.mobile-drawer.is-open { visibility: visible; pointer-events: auto; }
.mobile-drawer .backdrop {
  position: absolute; inset: 0; background: rgba(2,4,9,0.7); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.3s ease;
}
.mobile-drawer.is-open .backdrop { opacity: 1; }
.mobile-drawer .panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(340px, 86vw);
  background: var(--bg-elevated); border-left: 1px solid var(--border);
  padding: 22px; display: flex; flex-direction: column; gap: 6px;
  transform: translateX(100%); transition: transform 0.35s var(--ease);
  overflow-y: auto;
}
.mobile-drawer.is-open .panel { transform: translateX(0); }
.mobile-drawer .panel-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.mobile-drawer a.nav-link {
  padding: 14px 12px; border-radius: var(--radius-sm); font-weight: 700; font-size: 1.05rem; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.mobile-drawer .drawer-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.mobile-drawer .close-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--surface); }
.mobile-drawer .close-btn svg { width: 18px; height: 18px; }

/* =========================================================================
   Mobile sticky CTA bar
   ========================================================================= */
.mobile-cta-bar {
  position: fixed; bottom: var(--vv-bottom-offset, 0px); left: 0; right: 0; z-index: 70;
  height: var(--mobile-bar-h);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) minmax(0, 0.85fr);
  background: rgba(8, 11, 20, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 900px) { .mobile-cta-bar { display: none; } }
.mobile-cta-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-weight: 700; font-size: 0.7rem; text-align: center; line-height: 1.1;
}
.mobile-cta-bar a svg { width: 18px; height: 18px; }
.mobile-cta-bar .book { color: var(--text-muted); background: transparent; border-right: 1px solid var(--border); }
.mobile-cta-bar .whatsapp { color: var(--text-muted); background: transparent; border-left: 1px solid var(--border); }
.mobile-cta-bar .call {
  color: #04070d;
  background: var(--grad-primary);
  font-size: 0.78rem;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.mobile-cta-bar .call svg { width: 20px; height: 20px; }

/* =========================================================================
   Floating desktop call button
   Desktop-only (mobile already has Call as the strongest item in the
   sticky bottom bar, so this would be redundant there). Sits above
   everything, always visible, gently pulsing to keep Call the single
   most prominent action on the page.
   ========================================================================= */
.floating-call {
  display: none;
  position: fixed; right: 26px; bottom: 26px; z-index: 65;
  align-items: center; gap: 12px;
  padding: 14px 22px 14px 15px;
  border-radius: var(--radius-full);
  background: var(--grad-primary);
  color: #04070d;
  box-shadow: var(--glow-primary);
  opacity: 1; transform: translateY(0) scale(1);
  transition: transform 0.3s var(--ease), box-shadow 0.25s var(--ease), opacity 0.3s var(--ease);
}
@media (min-width: 900px) { .floating-call { display: inline-flex; } }
/* On the homepage the hero already has its own prominent Call button and
   a tall booking form directly beneath the fixed bottom-right corner, so
   JS hides this floating button while any part of .hero is on screen and
   reveals it once the visitor scrolls past — avoiding any overlap. Pages
   without a .hero (services, about, etc.) never get this class, so the
   button stays visible there by default; same if JS doesn't run. */
.floating-call.is-hero-hidden { opacity: 0; transform: translateY(14px) scale(0.94); pointer-events: none; }
.floating-call:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(59,125,255,.4), 0 18px 50px -10px rgba(34,211,238,.7); }
.floating-call-icon {
  position: relative;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,7,13,0.12);
  flex-shrink: 0;
}
.floating-call-icon svg { width: 15px; height: 15px; position: relative; z-index: 1; }
.floating-call-ring {
  position: absolute; inset: -7px; border-radius: inherit;
  border: 1.5px solid rgba(34,211,238,0.6);
  animation: floatingCallRing 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes floatingCallRing {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}
.floating-call-text { display: flex; flex-direction: column; line-height: 1.2; }
.floating-call-text strong { font-size: 0.92rem; font-weight: 800; }
.floating-call-text span { font-size: 0.82rem; font-weight: 700; opacity: 0.85; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  padding: 40px 0 60px;
  overflow: hidden;
}
@media (min-width: 900px) { .hero { padding: 64px 0 90px; } }

/* =========================================================================
   Hero background — layered "automotive-tech" system
   Layers (back to front): base wash -> technical grid -> atmospheric glow
   -> circuit/diagnostic lines -> particle nodes -> scan sweep -> vignette.
   Pure CSS/SVG, GPU-cheap (opacity/transform/background-position only),
   stays behind content (z-index:0) and respects prefers-reduced-motion.
   ========================================================================= */
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}
.hero-bg::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 82% 8%, rgba(59,125,255,0.22) 0%, transparent 60%),
    radial-gradient(45% 40% at 8% 85%, rgba(34,211,238,0.14) 0%, transparent 60%),
    linear-gradient(180deg, #05070d 0%, #070b17 55%, #05070d 100%);
}

.hero-bg-grid {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(rgba(140,175,255,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,175,255,0.09) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(70% 70% at 60% 28%, black, transparent);
  -webkit-mask-image: radial-gradient(70% 70% at 60% 28%, black, transparent);
  animation: heroGridDrift 30s linear infinite;
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 0.6s var(--ease);
  will-change: transform;
}
@keyframes heroGridDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 46px 46px, 46px 46px; }
}

.hero-bg-glow {
  position: absolute;
  width: 46vw; height: 46vw; max-width: 560px; max-height: 560px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  animation: heroGlowFloat 17s ease-in-out infinite;
}
.hero-bg-glow--a { top: -16%; right: -8%; background: radial-gradient(circle, rgba(59,125,255,0.55), transparent 70%); }
.hero-bg-glow--b {
  bottom: -20%; left: -10%;
  background: radial-gradient(circle, rgba(34,211,238,0.4), transparent 70%);
  animation-delay: -8s; animation-duration: 21s;
}
@keyframes heroGlowFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-3%, 4%) scale(1.06); }
}

.hero-bg-circuit {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.85;
  transform: translate(var(--px2, 0px), var(--py2, 0px));
  transition: transform 0.6s var(--ease);
  will-change: transform;
}
.circuit-line {
  fill: none; stroke: rgba(89,150,255,0.55); stroke-width: 1.4;
  stroke-dasharray: 6 10;
  filter: drop-shadow(0 0 2px rgba(59,125,255,0.35));
  animation: circuitFlow 5.5s linear infinite;
}
.circuit-line--2 { stroke: rgba(34,211,238,0.48); animation-duration: 7s; animation-direction: reverse; }
.circuit-line--3 { stroke: rgba(89,150,255,0.36); animation-duration: 8s; }
.circuit-line--4 { stroke: rgba(34,211,238,0.36); animation-duration: 6.4s; animation-direction: reverse; }
@keyframes circuitFlow { to { stroke-dashoffset: -160; } }
.circuit-node { fill: var(--cyan); opacity: 0.75; filter: drop-shadow(0 0 4px rgba(34,211,238,0.9)); animation: heroNodePulse 2.8s ease-in-out infinite; }
.circuit-node:nth-child(odd) { animation-delay: -1.4s; }
@keyframes heroNodePulse {
  0%, 100% { opacity: 0.35; r: 3; }
  50% { opacity: 0.9; r: 4.2; }
}

.hero-bg-particles { position: absolute; inset: 0; }
.hero-bg-particles span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px 1px rgba(34,211,238,0.8);
  opacity: 0;
  animation: heroParticleDrift 9s ease-in-out infinite;
}
.hero-bg-particles span:nth-child(1) { top: 18%; left: 14%; animation-delay: 0s; }
.hero-bg-particles span:nth-child(2) { top: 64%; left: 8%; animation-delay: -1.2s; }
.hero-bg-particles span:nth-child(3) { top: 30%; left: 48%; animation-delay: -2.4s; }
.hero-bg-particles span:nth-child(4) { top: 78%; left: 38%; animation-delay: -3.6s; }
.hero-bg-particles span:nth-child(5) { top: 12%; left: 72%; animation-delay: -4.8s; }
.hero-bg-particles span:nth-child(6) { top: 52%; left: 86%; animation-delay: -6s; }
.hero-bg-particles span:nth-child(7) { top: 86%; left: 64%; animation-delay: -7.2s; }
.hero-bg-particles span:nth-child(8) { top: 40%; left: 22%; animation-delay: -8.4s; }
@keyframes heroParticleDrift {
  0% { opacity: 0; transform: translateY(10px); }
  15% { opacity: 0.8; }
  50% { opacity: 0.45; transform: translateY(-14px); }
  85% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-24px); }
}

.hero-bg-scan {
  position: absolute; top: 0; left: -30%; width: 22%; height: 140%;
  background: linear-gradient(100deg, transparent 0%, rgba(34,211,238,0.05) 45%, rgba(34,211,238,0.12) 50%, rgba(34,211,238,0.05) 55%, transparent 100%);
  transform: skewX(-12deg);
  animation: heroScanSweep 9s ease-in-out infinite;
}
@keyframes heroScanSweep {
  0%, 100% { left: -30%; }
  50% { left: 110%; }
}

.hero-bg-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 20% 18%, transparent 28%, rgba(5,7,13,0.55) 78%),
    linear-gradient(180deg, rgba(5,7,13,0.12) 0%, rgba(5,7,13,0.62) 100%);
}

/* responsive tiering — simplify progressively for smaller viewports */
@media (max-width: 899px) {
  .hero-bg-scan { display: none; }
  .hero-bg-particles span:nth-child(n+6) { display: none; }
  .hero-bg-glow { filter: blur(42px); opacity: 0.45; }
}
@media (max-width: 640px) {
  .hero-bg-circuit { opacity: 0.32; }
  .hero-bg-particles { display: none; }
  .hero-bg-grid { animation: none; }
}

/* static, legible fallback for reduced motion — freeze every layer in a
   calm resting state instead of relying on near-zero animation duration */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-particles, .hero-bg-scan { display: none; }
  .hero-bg-grid, .hero-bg-circuit, .hero-bg-glow, .circuit-node {
    animation: none !important;
    transform: none !important;
  }
  .circuit-line { stroke-dasharray: none; opacity: 0.3; }
  .circuit-node { opacity: 0.55; }
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid; gap: 40px;
}
@media (min-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; gap: 32px; }
}

/* Two-column detail layout (service/location pages): main content + sticky
   sidebar card. Single column on mobile — a forced inline 2-column grid
   here previously caused horizontal overflow on narrow viewports, since
   the sidebar's buttons/padding can't shrink below their own min-content. */
.detail-grid {
  display: grid; gap: 28px;
}
@media (min-width: 900px) {
  .detail-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; gap: 32px; }
}

.hero-copy h1 { margin-bottom: 6px; }
.hero-copy .accent { color: transparent; background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; }

.hero-meta-strip { margin-top: 14px; font-size: 0.92rem; font-weight: 600; color: var(--cyan); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hero-meta-strip .dot-sep { color: var(--text-muted); opacity: 0.6; font-weight: 400; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px; }
.hero-trust .item { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--text-muted); font-weight: 600; }
.hero-trust svg { width: 17px; height: 17px; color: var(--success); flex-shrink: 0; }

/* hero visual: scanning car */
.hero-visual {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--grad-surface);
  padding: 30px 20px;
  overflow: hidden;
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
}
.hero-visual .glow-blob {
  position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,0.35), transparent 70%);
  filter: blur(10px);
  top: -60px; right: -60px;
}
.hero-visual .scan-car { position: relative; width: 100%; max-width: 380px; z-index: 1; }
.hero-visual .scan-car svg { width: 100%; height: auto; overflow: visible; }
.hero-visual .car-outline { fill: none; stroke: rgba(243,246,251,0.65); stroke-width: 1.4; }
.hero-visual .car-fill { fill: rgba(59,125,255,0.05); }
.hero-visual .scan-line {
  stroke: var(--cyan);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 6px rgba(34,211,238,0.9));
  animation: scanMove 2.6s ease-in-out infinite;
}
@keyframes scanMove {
  0%, 100% { transform: translateY(-46px); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translateY(46px); opacity: 1; }
  90% { opacity: 1; }
}
.hero-visual .pulse-dot { fill: var(--success); }
.hero-visual .pulse-dot circle:nth-child(2) { animation: pulseRing 2.2s ease-out infinite; }
@keyframes pulseRing {
  0% { r: 4; opacity: 0.8; }
  100% { r: 16; opacity: 0; }
}
.hero-visual .data-readout {
  position: absolute; bottom: 18px; left: 18px; right: 18px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.hero-visual .chip {
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  padding: 6px 10px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--text-muted); font-family: var(--font-display);
  display: flex; align-items: center; gap: 6px;
}
.hero-visual .chip .led { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success); }
.hero-visual .chip.warn .led { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

/* =========================================================================
   Booking form
   ========================================================================= */
.booking-card {
  position: relative; z-index: 2;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) { .booking-card { padding: 34px; } }
.booking-card .form-title { margin-bottom: 4px; }
.booking-card .form-sub { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 22px; }

.form-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.83rem; font-weight: 700; color: var(--text-muted); }
.field input, .field select, .field textarea {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  color: var(--text);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary-strong); background: rgba(59,125,255,0.06);
}
.field textarea { resize: vertical; min-height: 88px; }
.form-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.form-note { font-size: 0.78rem; color: var(--text-faint); text-align: center; }
.form-status { font-size: 0.86rem; font-weight: 700; text-align: center; min-height: 1.2em; }
.form-status.ok { color: var(--success); }
.form-status.err { color: var(--danger); }

/* =========================================================================
   Stats bar
   ========================================================================= */
.stats-bar {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 46px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}
.stats-bar .stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 800;
  color: transparent; background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
}
.stats-bar .stat-label { color: var(--text-muted); font-size: 0.86rem; margin-top: 4px; }

/* =========================================================================
   Cards grid — services / why-us / blog
   ========================================================================= */
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: rgba(59,125,255,0.4); background: var(--surface-strong); box-shadow: var(--shadow-soft); }

.icon-badge {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(59,125,255,0.12);
  border: 1px solid rgba(59,125,255,0.28);
  margin-bottom: 16px;
  color: var(--cyan);
}
.icon-badge svg { width: 23px; height: 23px; }

.service-card h3 { margin-bottom: 8px; }
.service-card p { color: var(--text-muted); font-size: 0.93rem; margin-bottom: 16px; }
.service-card .card-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.88rem; color: var(--cyan); }
.card-link svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
.service-card:hover .card-link svg, .blog-card:hover .card-link svg { transform: translateX(3px); }
.service-card.featured { border-color: rgba(34,211,238,0.4); background: linear-gradient(180deg, rgba(34,211,238,0.07), rgba(255,255,255,0.03)); }

/* =========================================================================
   How it works
   ========================================================================= */
.steps { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); position: relative; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { position: relative; padding: 26px 20px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); }
.step .step-num {
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
  color: transparent; -webkit-text-stroke: 1.3px rgba(59,125,255,0.75);
  margin-bottom: 14px;
}
@media (min-width: 860px) {
  .steps::before {
    content: "";
    position: absolute; top: 44px; left: 12.5%; right: 12.5%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-strong) 15%, var(--border-strong) 85%, transparent);
    z-index: 0;
  }
  .step { z-index: 1; }
}
.step h3 { margin-bottom: 8px; font-size: 1.05rem; }
.step p { color: var(--text-muted); font-size: 0.9rem; }

/* =========================================================================
   Why-mobile comparison
   ========================================================================= */
.compare { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare-col { border-radius: var(--radius-md); padding: 26px 24px; border: 1px solid var(--border); }
.compare-col.old { background: rgba(255,255,255,0.02); }
.compare-col.new { background: var(--grad-surface); border-color: rgba(59,125,255,0.35); }
.compare-col h3 { margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.compare-col h3 svg { width: 22px; height: 22px; }
.compare-col ul { display: flex; flex-direction: column; gap: 12px; }
.compare-col li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.94rem; color: var(--text-muted); }
.compare-col.new li { color: var(--text); }
.compare-col li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.compare-col.old svg { color: var(--text-faint); }
.compare-col.new svg { color: var(--success); }

/* =========================================================================
   Brands
   ========================================================================= */
.brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px) { .brand-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.brand-chip {
  display: flex; align-items: center; justify-content: center;
  padding: 20px 14px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  color: var(--text-muted);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.brand-chip:hover { color: var(--text); border-color: rgba(59,125,255,0.4); }

/* --- fuel/powertrain type coverage row --- */
.fuel-types-head {
  display: flex; justify-content: center;
  margin-top: 44px; margin-bottom: 20px;
}
.fuel-types-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 700; color: var(--text-muted);
}
.fuel-types-label svg { width: 16px; height: 16px; color: var(--success); }
.fuel-types {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .fuel-types { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Clickable "mini-blog" fuel-type cards: each carries its own accent color
   (--accent, set inline per item) and a subtle always-on "electric" flow
   animation along the top edge, GPU-cheap (background-position + box-shadow
   only). */
.fuel-type-item {
  position: relative;
  display: flex; flex-direction: column;
  text-align: left;
  padding: 24px 20px 20px;
  border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border);
  overflow: hidden;
  text-decoration: none; color: inherit;
  --accent: var(--cyan);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.fuel-type-item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 220% 100%;
  animation: fuelAccentFlow 3.4s linear infinite;
  opacity: 0.85;
}
@keyframes fuelAccentFlow {
  0% { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}
.fuel-type-item:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -14px color-mix(in srgb, var(--accent) 60%, transparent);
}
.fuel-type-item .icon-badge {
  margin: 0 0 16px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--accent);
  animation: fuelIconPulse 2.6s ease-in-out infinite;
}
@keyframes fuelIconPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.fuel-type-item h3 { margin-bottom: 6px; font-size: 1.05rem; }
.fuel-type-item p { font-size: 0.85rem; flex-grow: 1; }
.fuel-type-item .fuel-read-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; font-size: 0.82rem; font-weight: 700;
  color: var(--accent);
}
.fuel-type-item .fuel-read-more svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.fuel-type-item:hover .fuel-read-more svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .fuel-type-item::before, .fuel-type-item .icon-badge { animation: none; }
}

/* =========================================================================
   Pricing
   ========================================================================= */
.pricing-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.price-card {
  position: relative;
  border-radius: var(--radius-lg); padding: 30px 26px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}
.price-card.highlight {
  border-color: rgba(34,211,238,0.45);
  background: var(--grad-surface);
  box-shadow: var(--glow-cyan);
}
@media (min-width: 860px) {
  /* the recommended plan reads as the visual centerpiece even at rest */
  .price-card.highlight { transform: scale(1.045); z-index: 1; }
}
.price-card .badge {
  position: absolute; top: -14px; left: 26px;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--grad-primary); color: #04070d;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em;
  padding: 6px 13px; border-radius: var(--radius-full);
  box-shadow: 0 6px 18px -4px rgba(34,211,238,0.55);
}
.price-card .badge svg { width: 12px; height: 12px; }
.price-card .plan-name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.price-card .plan-sub { color: var(--text-muted); font-size: 0.86rem; margin-top: 4px; margin-bottom: 20px; }
.price-card .plan-price {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--cyan);
  padding: 14px 0; margin-bottom: 20px;
  border-top: 1px dashed var(--border-strong); border-bottom: 1px dashed var(--border-strong);
  transition: border-color 0.35s var(--ease);
}
.price-card ul { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; flex-grow: 1; }
.price-card li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.9rem; color: var(--text-muted); }
.price-card li svg { width: 17px; height: 17px; color: var(--success); flex-shrink: 0; margin-top: 2px; }
.price-card .btn { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); }

/* desktop-only hover lift/glow — mobile stays flat, no hover states to
   accidentally trigger on tap, no carousels, no heavy 3D tilt */
@media (min-width: 860px) and (hover: hover) and (pointer: fine) {
  .price-card:hover {
    transform: translateY(-6px);
    border-color: rgba(59,125,255,0.5);
    background: var(--surface-strong);
    box-shadow: var(--shadow-soft);
  }
  .price-card.highlight:hover {
    transform: translateY(-6px) scale(1.045);
    box-shadow: 0 0 0 1px rgba(34,211,238,0.5), 0 24px 60px -14px rgba(34,211,238,0.5);
  }
  .price-card:hover .plan-price { border-color: rgba(34,211,238,0.5); }
  .price-card:hover .btn--outline { border-color: var(--cyan); color: var(--cyan); }
  .price-card:hover .btn--primary { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(59,125,255,.35), 0 16px 46px -10px rgba(34,211,238,.6); }
}

/* =========================================================================
   Reviews
   ========================================================================= */
.google-reviews-badge {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 20px 24px; margin-bottom: 28px;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
}
.grb-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3);
  color: #fbbf24;
}
.grb-icon svg { width: 22px; height: 22px; }
.grb-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 200px; }
.grb-text strong { font-size: 1rem; }
.grb-text span { font-size: 0.86rem; color: var(--text-muted); }
.grb-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.review-card { padding: 24px 22px; }
.review-card .stars { display: flex; gap: 3px; color: #fbbf24; margin-bottom: 14px; }
.review-card .stars svg { width: 16px; height: 16px; }
.review-card p.quote { font-size: 0.96rem; color: var(--text); margin-bottom: 16px; }
.review-card .reviewer { font-size: 0.85rem; color: var(--text-muted); font-weight: 700; }
.reviews-note { margin-top: 18px; font-size: 0.8rem; color: var(--text-faint); text-align: center; }

/* =========================================================================
   FAQ accordion
   ========================================================================= */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.faq-item {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); overflow: hidden;
}
.faq-item[open] { border-color: rgba(59,125,255,0.4); }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; font-weight: 700; font-size: 0.98rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { transition: transform 0.25s var(--ease); color: var(--cyan); }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item .faq-answer { padding: 0 20px 20px; color: var(--text-muted); font-size: 0.92rem; }

/* =========================================================================
   Final CTA
   ========================================================================= */
.final-cta {
  border-radius: var(--radius-lg);
  padding: 46px 28px;
  background: linear-gradient(135deg, rgba(59,125,255,0.16), rgba(34,211,238,0.08));
  border: 1px solid rgba(59,125,255,0.35);
  text-align: center;
}
@media (min-width: 900px) { .final-cta { padding: 64px 60px; } }
.final-cta .btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 60px 0 26px; }
.footer-top { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; }
@media (min-width: 780px) { .footer-top { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 24px; } }
.footer-brand p { color: var(--text-muted); font-size: 0.9rem; margin-top: 14px; max-width: 280px; }
.footer-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 0.92rem; color: var(--text-muted); transition: color 0.2s ease; }
.footer-col a:hover { color: var(--text); }
.footer-meta { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--text-muted); }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
}
.footer-social svg { width: 17px; height: 17px; }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  font-size: 0.82rem; color: var(--text-faint);
}
.footer-bottom .legal-links { display: flex; gap: 16px; flex-wrap: wrap; }

/* =========================================================================
   Map embed (keyless Google Maps iframe, no API key required)
   ========================================================================= */
.map-embed {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 10;
  background: var(--surface);
}
.map-embed iframe {
  width: 100%; height: 100%; border: 0; display: block;
  background: #e5e3df; /* Google Maps' own default canvas color, avoids a dark flash while the iframe loads */
}
.map-embed-cta {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: rgba(8,11,20,0.88);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  color: var(--text); font-weight: 700; font-size: 0.85rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.map-embed-cta:hover { border-color: var(--cyan); color: var(--cyan); }
.map-embed-cta svg { width: 16px; height: 16px; }

/* =========================================================================
   Breadcrumbs
   ========================================================================= */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.83rem; color: var(--text-faint); margin-bottom: 22px; }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--cyan); }
.breadcrumbs .sep { opacity: 0.5; }

/* =========================================================================
   Generic content page (about/legal/blog article)
   ========================================================================= */
.page-hero { padding: 44px 0 8px; }
@media (min-width: 900px) { .page-hero { padding: 60px 0 8px; } }
.prose { max-width: 760px; }
.prose h2 { margin-top: 34px; margin-bottom: 12px; font-size: 1.35rem; }
.prose p { color: var(--text-muted); margin-bottom: 4px; }
.prose p + p { margin-top: 14px; }
.prose .updated-date { color: var(--text-faint); font-size: 0.85rem; margin-bottom: 30px; }
.disclaimer-box {
  margin-top: 32px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: rgba(249,112,102,0.07); border: 1px solid rgba(249,112,102,0.28);
  font-size: 0.85rem; color: var(--text-muted);
}

/* blog list */
.blog-card { display: flex; flex-direction: column; }
.blog-card .blog-meta { display: flex; gap: 10px; font-size: 0.78rem; color: var(--text-faint); margin-bottom: 10px; }
.blog-card h3 { margin-bottom: 10px; }
.blog-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 16px; flex-grow: 1; }

/* related service box on blog articles */
.related-box {
  margin-top: 40px; padding: 22px; border-radius: var(--radius-md);
  background: var(--grad-surface); border: 1px solid rgba(59,125,255,0.3);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}

/* pricing note (services page inline) */
.inline-note {
  font-size: 0.82rem; color: var(--text-faint); text-align: center; margin-top: 14px;
}

/* =========================================================================
   Scroll reveal
   ========================================================================= */
/* Progressive enhancement: only animate when JS confirms it can also reveal
   the content again (html.js-enabled is set by an inline script in <head>).
   Without JS (or if it fails/is blocked), all content is visible by default. */
.js-enabled .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.js-enabled .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.32s; }
.reveal-stagger.is-visible > *:nth-child(n+7) { transition-delay: 0.36s; }

/* =========================================================================
   Utilities
   ========================================================================= */
.mt-0 { margin-top: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}