/*
 * Ural Auto Group — visual clarity layer
 * Keeps the existing content and document structure intact while giving every
 * page a calmer hierarchy and a shared responsive rhythm.
 */

:root {
  --bg: #08090b;
  --bg-soft: #101216;
  --card: #17191e;
  --card-soft: #121419;
  --text: #f7f7f8;
  --muted: #aeb2bc;
  --line: rgba(255,255,255,.11);
  --line-strong: rgba(255,255,255,.18);
  --accent: #ed1c18;
  --accent-hover: #ff3933;
  --container: 1200px;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  --section-space: clamp(68px, 7vw, 104px);
}

html { scroll-padding-top: 86px; }

body {
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.012) 1px, transparent 1px),
    radial-gradient(circle at 8% 3%, rgba(181,20,16,.12), transparent 26rem),
    #08090b;
  background-size: 88px 88px, 88px 88px, auto, auto;
  font-size: 16px;
  line-height: 1.55;
}

main { overflow: clip; }

.container { width: min(var(--container), calc(100% - 48px)); }

.topbar {
  background: rgba(8,9,11,.94);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.topbar-inner { min-height: 76px; }
.brand-logo { border-radius: 10px; box-shadow: none; }
.nav { color: #c7c9cf; }
.nav a, .services-toggle { font-weight: 700; }
.phone-link { border-color: var(--line-strong); background: rgba(255,255,255,.035); }

.hero { padding: clamp(34px, 4vw, 58px) 0 48px; }

.section {
  position: relative;
  margin-top: 0 !important;
  padding: var(--section-space) 0;
}

.hero + .section { padding-top: 30px; }

.section:nth-of-type(odd):not(.trust-strip) {
  background:
    radial-gradient(circle at 92% 16%, rgba(237,28,24,.055), transparent 24rem),
    #111319;
  box-shadow: inset 0 1px rgba(255,255,255,.055), inset 0 -1px rgba(255,255,255,.055);
}

.section:nth-of-type(even):not(.trust-strip) {
  background:
    linear-gradient(120deg, rgba(255,255,255,.018), transparent 38%),
    #08090b;
}

/* Light pauses make the long dark page feel calmer and more approachable. */
.section.section-light {
  color: #17191e;
  background:
    radial-gradient(circle at 88% 14%, rgba(237,28,24,.055), transparent 25rem),
    linear-gradient(135deg, #faf9f6, #f0f1f3);
  box-shadow: inset 0 1px rgba(255,255,255,.9), inset 0 -1px rgba(16,20,28,.1);
}

.section-light .section-head h2,
.section-light .section-head h3,
.section-light .step h3,
.section-light .mini-card h3,
.section-light .home-faq-question {
  color: #17191e;
}

.section-light .section-head p,
.section-light .step p,
.section-light .mini-card p,
.section-light .home-faq-answer p {
  color: #5e6470;
}

.section-light .step,
.section-light .mini-card,
.section-light .faq-item {
  border-color: rgba(20,24,31,.1);
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 34px rgba(27,32,42,.08);
}

.section-light .steps-grid .step:not(:last-child)::after {
  background: linear-gradient(90deg, rgba(28,32,40,.18), rgba(237,28,24,.55));
}

.section-light .home-faq-question:hover {
  color: #17191e;
  background: rgba(18,22,29,.035);
}

.section-light .home-faq-icon {
  background: #fff;
  border-color: rgba(237,28,24,.55);
  color: var(--accent);
}

.section-light .home-faq-answer a { color: #b71410; }

/*
 * New thematic photography is used as atmosphere, never as foreground content.
 * Sources: Unsplash photo-1619284111834-34efc7051f0e (showroom),
 *          Unsplash photo-1533558701576-23c65e0272fb (car key).
 */
#services,
#purchased-cars {
  background:
    linear-gradient(90deg, rgba(8,9,11,.97) 0%, rgba(8,9,11,.88) 48%, rgba(8,9,11,.78) 100%),
    linear-gradient(180deg, rgba(8,9,11,.28), rgba(8,9,11,.72)),
    url('../img/bg-showroom-unsplash.webp') center 58% / cover no-repeat;
  background-attachment: scroll;
}

main .section.documents-section:not(.section-light),
#cities {
  background:
    linear-gradient(90deg, rgba(8,9,11,.98) 0%, rgba(8,9,11,.91) 58%, rgba(8,9,11,.76) 100%),
    url('../img/bg-car-key-unsplash.webp') 84% 53% / cover no-repeat;
  background-attachment: scroll;
}

.trust-panel {
  background:
    linear-gradient(90deg, rgba(18,20,25,.99) 0%, rgba(18,20,25,.94) 55%, rgba(18,20,25,.78) 100%),
    url('../img/bg-showroom-unsplash.webp') 78% 58% / cover no-repeat;
}

.documents-panel {
  background:
    linear-gradient(90deg, rgba(18,20,25,.99) 0%, rgba(18,20,25,.94) 62%, rgba(18,20,25,.72) 100%),
    url('../img/bg-car-key-unsplash.webp') 82% 53% / cover no-repeat;
}

.section-head {
  margin-bottom: clamp(28px, 3vw, 42px);
}

.section-head h2,
.panel > h2,
.cta h2 {
  max-width: 850px;
  margin: 0 0 12px;
  font-size: clamp(30px, 3.3vw, 48px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.section-head p,
.panel > p,
.cta p {
  max-width: 760px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

/* The large hero is the only deliberately prominent framed composition. */
.hero-main .hero-grid {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: #121419;
  box-shadow: 0 28px 80px rgba(0,0,0,.38);
}

.hero-main .hero-copy,
.hero-main .hero-form {
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero-main .hero-copy { padding: clamp(34px, 4vw, 58px); }

.hero-main .hero-copy::after { opacity: .52; }

.hero-main h1 {
  max-width: 650px;
  margin-bottom: 20px;
  font-size: clamp(40px, 4.4vw, 62px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.hero-main .hero-lead {
  max-width: 620px;
  color: #d3d5da;
  font-size: 16px;
  line-height: 1.58;
}

.eyebrow {
  width: fit-content;
  max-width: 100%;
  border-color: rgba(255,255,255,.16);
  background: rgba(8,9,11,.68);
  color: #f0f0f2;
}

.hero-main .hero-badges { gap: 10px; margin-top: 22px; }
.hero-main .badge { border-color: rgba(255,255,255,.14); background: rgba(8,9,11,.7); }

.hero-main .hero-form {
  justify-content: center;
  padding: clamp(34px, 4vw, 54px);
  border-left: 1px solid var(--line-strong);
  background: #191b20;
}

.hero-main .hero-form::before { display: none; }

.hero-form h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.03em;
}

.hero-form p { color: var(--muted); }
.hero-form label { color: #e7e7e9; }

.hero-form input,
.hero-form textarea,
.hero-form select {
  border-color: rgba(255,255,255,.15);
  background: #0d0f13;
}

.button-primary,
.hero-form button,
.situation-link {
  background: var(--accent);
  box-shadow: 0 10px 26px rgba(237,28,24,.2);
}

.button-primary:hover,
.hero-form button:hover,
.situation-link:hover { background: var(--accent-hover); }

.button-primary:link,
.button-primary:visited,
.button-primary:focus,
.button-primary:active {
  color: #fff;
}

@media (hover: none) {
  .button-primary:hover,
  .button-primary:focus,
  .button-primary:active {
    color: #fff;
    background: var(--accent);
    transform: none;
  }
}

/* Outer panels define sections; inner items stay light and easy to scan. */
.trust-panel,
.documents-panel,
.panel,
.cta,
.reviews-map-card {
  border-color: var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, #1a1d23, #111318 72%);
  box-shadow: var(--shadow);
}

.trust-panel,
.documents-panel { padding: clamp(24px, 3vw, 38px); }

.trust-head { padding-bottom: 22px; }
.trust-grid { gap: 10px; margin-top: 20px; }
.trust-item { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.025); }

.steps-grid { gap: 18px; }
.steps-grid .step {
  padding: 24px;
  border-color: rgba(255,255,255,.09);
  background: var(--card-soft);
  box-shadow: none;
}
.step-index { background: var(--accent); color: #fff; }

.documents-grid { gap: 16px; }
.document-item {
  padding: 20px;
  border-color: rgba(255,255,255,.09);
  background: rgba(255,255,255,.025);
}
.document-icon { border: 0; background: rgba(255,255,255,.055); }

.why-grid,
.benefits-grid,
.damage-grid,
.services-grid,
.topic-grid,
.contacts-grid,
.social-grid { gap: 18px; }

.mini-card,
.service-card,
.topic-card,
.contact-card,
.social-card,
.faq-item,
.footer-card {
  border-color: rgba(255,255,255,.09);
  background: var(--card-soft);
  box-shadow: none;
}

.why-grid .mini-card,
.benefits-grid .mini-card {
  padding: 26px;
  border-radius: 16px;
  box-shadow: none;
}

.situation-grid { gap: 18px; }
.situation-card {
  min-height: 230px;
  padding: 26px;
  border-color: rgba(255,255,255,.1);
  border-radius: 16px;
  background: var(--card-soft);
  box-shadow: none;
}
.situation-card::before { width: 2px; background: rgba(237,28,24,.7); }
.situation-kicker { border: 0; background: rgba(237,28,24,.1); color: #ff7772; }

.carousel-card,
.purchased-car-card {
  border-color: rgba(255,255,255,.1);
  border-radius: 18px;
  background: var(--card-soft);
  box-shadow: none;
}
.purchased-car-card img { border-radius: 17px 17px 0 0; }

.city-card-link {
  border-color: rgba(255,255,255,.09);
  background: rgba(255,255,255,.025);
  box-shadow: none;
}

.home-faq-item { border-radius: 14px; }
.home-faq-question { min-height: 78px; padding: 22px 24px; font-size: 19px; }

.final-cta {
  padding: clamp(34px, 4vw, 54px);
  background:
    linear-gradient(110deg, rgba(237,28,24,.17), transparent 46%),
    #15171c;
}

.footer {
  padding: 64px 0 36px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: #07080a;
}
.footer-card { padding: 0; border: 0; background: transparent; }

@media (max-width: 1120px) {
  .hero-main .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-main .hero-copy, .hero-main .hero-form { min-height: 0; }
}

@media (max-width: 820px) {
  .container { width: min(100% - 32px, var(--container)); }
  .topbar-inner { min-height: 64px; }
  .hero { padding: 22px 0 34px; }
  .section { padding: 58px 0; }
  .hero + .section { padding-top: 18px; }

  .hero-main .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    border-radius: 18px;
  }

  .hero-main .hero-copy,
  .hero-main .hero-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 26px;
  }

  .hero-main .hero-form { border-top: 1px solid var(--line-strong); border-left: 0; }
  .hero-main h1 { font-size: clamp(34px, 10.5vw, 46px); overflow-wrap: anywhere; }
  .hero-main .hero-lead { font-size: 15px; }
  .hero-main .hero-badges { grid-template-columns: 1fr; }
  .hero-main .hero-links, .hero-main .hero-links .button { width: 100%; max-width: 100%; }
  .hero-safe-note { max-width: 100%; }

  .trust-panel,
  .documents-panel { padding: 22px; }
  .trust-head { display: grid; }
  .trust-actions { width: 100%; }
  .trust-actions .button { flex: 1 1 180px; }

  .steps-grid { gap: 12px; }
  .documents-grid { grid-template-columns: 1fr; }
  #cities .panel-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { gap: 34px 22px; }
}

@media (max-width: 620px) {
  .container { width: calc(100% - 24px); }
  .hero-main .hero-copy, .hero-main .hero-form { padding: 22px 20px; }
  .hero-main h1 { font-size: clamp(31px, 10vw, 40px); }
  .eyebrow { font-size: 10px; line-height: 1.35; }
  .section-head h2, .panel > h2, .cta h2 { font-size: 30px; }
  .section-head p, .panel > p, .cta p { font-size: 14px; }
  .trust-panel, .documents-panel { padding: 18px; }
  .trust-grid { grid-template-columns: 1fr; }
  .situation-card { min-height: 0; padding: 22px; }
  .home-faq-question { min-height: 70px; padding: 18px; font-size: 17px; }
  .home-faq-answer p { padding: 0 18px 20px; }
  .final-cta { padding: 28px 22px; }
}

.floating-action-telegram {
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(28,28,32,.94), rgba(9,9,11,.96));
}

.floating-action-telegram svg {
  fill: currentColor;
  stroke: none;
}

.floating-action-telegram:hover,
.floating-action-telegram:focus-visible {
  border-color: rgba(255,255,255,.28);
  background: linear-gradient(180deg, rgba(36,36,40,.98), rgba(12,12,14,.98));
}

/* Mobile first screen: benefits and the actionable part of the form stay above the fold. */
@media (max-width: 620px) {
  .mobile-phone-bar .mobile-contact-row { padding-block: 4px; }
  .mobile-phone-link { min-height: 34px; font-size: 15px; }

  .hero-main { padding-top: 10px; }
  .hero-main .hero-grid { border-radius: 16px; }
  .hero-main .hero-copy { padding: 16px 18px 15px; }
  .hero-main .eyebrow,
  .hero-main .hero-lead,
  .hero-main .hero-links { display: none; }
  .hero-main h1 {
    margin: 0 0 8px;
    font-size: clamp(28px, 8.7vw, 36px);
    line-height: 1;
  }
  .hero-main .hero-badges {
    grid-template-columns: 1fr;
    gap: 5px;
    margin-top: 8px;
  }
  .hero-main .badge:nth-child(n+3) { display: none; }
  .hero-main .badge {
    min-height: 32px;
    padding: 6px 7px 6px 20px;
    font-size: 10px;
  }
  .hero-main .badge::before { left: 8px; }
  .hero-main .hero-safe-note { display: none; }

  .hero-main .hero-form { padding: 15px 18px 18px; }
  .hero-main .hero-form h2 { margin: 0 0 4px; font-size: 21px; }
  .hero-main .hero-form > p { display: none; }
  .hero-main .hero-form form { gap: 8px; margin-top: 8px; }
  .hero-main .hero-form .field { display: grid; }
  .hero-main .hero-form .field { gap: 3px; }
  .hero-main .hero-form label { font-size: 10px; }
  .hero-main .hero-form input { min-height: 40px; padding: 8px 11px; }
  .hero-main .hero-form button { min-height: 42px; font-size: 12px; }
  .hero-main .hero-form .form-promise,
  .hero-main .hero-form .form-note { display: none; }

  .floating-actions { bottom: 16px; }

  #services,
  #purchased-cars,
  .documents-section,
  #cities {
    background-attachment: scroll;
    background-position: 62% center;
  }
}

/* Keep the light theme authoritative over legacy component overrides. */
main .section.section-light:not(.trust-strip) {
  color: #17191e;
  background:
    radial-gradient(circle at 88% 14%, rgba(237,28,24,.055), transparent 25rem),
    linear-gradient(135deg, #faf9f6, #f0f1f3);
  box-shadow: inset 0 1px rgba(255,255,255,.9), inset 0 -1px rgba(16,20,28,.1);
}

main .section.section-light .section-head h2,
main .section.section-light .section-head h3,
main .section.section-light .step h3,
main .section.section-light .mini-card h3,
main .section.section-light .home-faq-question {
  color: #17191e;
}

main .section.section-light .section-head p,
main .section.section-light .step p,
main .section.section-light .mini-card p,
main .section.section-light .home-faq-answer p {
  color: #5e6470;
}

main .section.section-light .steps-grid .step,
main .section.section-light .why-grid .mini-card,
main .section.section-light .faq-item {
  border-color: rgba(20,24,31,.1);
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 34px rgba(27,32,42,.08);
}

main .section.section-light .home-faq-question:hover {
  color: #17191e;
  background: rgba(18,22,29,.035);
}

/* Softer slate theme: less black, while preserving contrast and automotive character. */
body {
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 8% 3%, rgba(151,28,25,.14), transparent 28rem),
    #27323c;
  background-size: 88px 88px, 88px 88px, auto, auto;
}

main .section:not(.section-light):not(.trust-strip) {
  background:
    radial-gradient(circle at 92% 16%, rgba(237,28,24,.055), transparent 24rem),
    linear-gradient(135deg, #2c3742, #26313b);
  box-shadow: inset 0 1px rgba(255,255,255,.065), inset 0 -1px rgba(8,12,17,.18);
}

main .trust-strip { background: #27323c; }

.hero-main .hero-grid {
  background: #29343f;
  border-color: rgba(255,255,255,.2);
}

.hero-main .hero-form {
  background: #303b46;
}

.hero-form input,
.hero-form textarea,
.hero-form select {
  background: #202a33;
  border-color: rgba(255,255,255,.18);
}

.trust-panel,
.documents-panel,
.panel,
.cta,
.reviews-map-card {
  background: linear-gradient(145deg, #35414d, #2b3641 72%);
  border-color: rgba(255,255,255,.16);
}

.mini-card,
.step,
.service-card,
.topic-card,
.contact-card,
.social-card,
.faq-item,
.carousel-card,
.purchased-car-card,
.situation-card,
.city-card-link {
  background: #303b46;
  border-color: rgba(255,255,255,.14);
}

#services,
#purchased-cars {
  background:
    linear-gradient(90deg, rgba(39,50,60,.97) 0%, rgba(39,50,60,.88) 48%, rgba(39,50,60,.78) 100%),
    linear-gradient(180deg, rgba(39,50,60,.24), rgba(39,50,60,.7)),
    url('../img/bg-showroom-unsplash.webp') center 58% / cover no-repeat;
}

.section.documents-section,
#cities {
  background:
    linear-gradient(90deg, rgba(39,50,60,.98) 0%, rgba(39,50,60,.9) 58%, rgba(39,50,60,.74) 100%),
    url('../img/bg-car-key-unsplash.webp') 84% 53% / cover no-repeat;
}

.footer { background: #202a33; }

/* Final contrast pass: deeper slate surfaces and clearer section transitions. */
body {
  background:
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.014) 1px, transparent 1px),
    radial-gradient(circle at 8% 3%, rgba(151,28,25,.13), transparent 28rem),
    #1b252e;
  background-size: 88px 88px, 88px 88px, auto, auto;
}

main .section:not(.section-light):not(.trust-strip) {
  background:
    radial-gradient(circle at 92% 16%, rgba(237,28,24,.045), transparent 24rem),
    linear-gradient(135deg, #222e38, #1b2630);
  border-top: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px rgba(255,255,255,.025), inset 0 -1px rgba(5,9,13,.3);
}

main .trust-strip { background: #1b252e; }

.hero-main .hero-grid { background: #222e39; }
.hero-main .hero-form { background: #283642; }

.hero-form input,
.hero-form textarea,
.hero-form select { background: #17212a; }

.trust-panel,
.documents-panel,
.panel,
.cta,
.reviews-map-card {
  background: linear-gradient(145deg, #293743, #222e38 72%);
  border-color: rgba(255,255,255,.16);
}

.mini-card,
.step,
.service-card,
.topic-card,
.contact-card,
.social-card,
.faq-item,
.carousel-card,
.purchased-car-card,
.situation-card,
.city-card-link {
  background: #202c36;
  border-color: rgba(255,255,255,.17);
  box-shadow: 0 14px 34px rgba(5,9,13,.16);
}

#services {
  background:
    linear-gradient(90deg, rgba(27,38,48,.97) 0%, rgba(27,38,48,.9) 50%, rgba(27,38,48,.82) 100%),
    url('../img/bg-showroom-unsplash.webp') center 58% / cover no-repeat;
}

#services .situation-card {
  background: rgba(39,53,65,.96);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 18px 42px rgba(2,6,10,.32);
}

#purchased-cars {
  background:
    linear-gradient(90deg, rgba(18,27,35,.97), rgba(22,32,41,.9)),
    url('../img/bg-showroom-unsplash.webp') center 74% / cover no-repeat;
}

#purchased-cars .carousel-card {
  background: #263540;
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 18px 42px rgba(2,6,10,.3);
}

#purchased-cars,
#cities,
.section.documents-section {
  position: relative;
}

#purchased-cars::before,
#cities::before,
.section.documents-section::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  z-index: 2;
  width: min(112px, 24vw);
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-50%);
}

main .section.documents-section:not(.section-light),
#cities {
  background:
    linear-gradient(90deg, rgba(25,35,44,.98) 0%, rgba(25,35,44,.92) 60%, rgba(25,35,44,.78) 100%),
    url('../img/bg-car-key-unsplash.webp') 84% 53% / cover no-repeat;
}

.footer { background: #141d24; }

/* Black conversion surfaces against the slate page, shared by every page. */
.hero .hero-form,
#cities .city-lead-form,
.conversion-quiz {
  background:
    radial-gradient(circle at 100% 0, rgba(237,28,24,.07), transparent 18rem),
    linear-gradient(145deg, #111317, #080a0d 76%);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 22px 58px rgba(2,5,8,.42);
}

#cities .city-lead-form::before {
  background: linear-gradient(180deg, var(--accent), rgba(237,28,24,.18));
}

.hero .hero-form input,
#cities .city-lead-form input,
.conversion-quiz input {
  background: #141c23;
  border-color: rgba(255,255,255,.2);
}

.hero .form-promise,
#cities .city-lead-form .form-promise,
.conversion-quiz-step:not([data-quiz-step="0"]) {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.13);
}

@media (max-width: 620px) {
  .hero .hero-form,
  #cities .city-lead-form,
  .conversion-quiz {
    background:
      radial-gradient(circle at 100% 0, rgba(237,28,24,.08), transparent 14rem),
      #0a0c0f;
    box-shadow: 0 18px 42px rgba(2,5,8,.38);
  }
}

/* User-provided hero photograph, shared by the first screen of every page. */
.hero .hero-copy {
  background:
    linear-gradient(90deg, rgba(5,7,9,.68) 0%, rgba(5,7,9,.42) 44%, rgba(5,7,9,.08) 100%),
    linear-gradient(180deg, rgba(5,7,9,.06) 0%, rgba(5,7,9,.12) 62%, rgba(5,7,9,.28) 100%),
    url('../img/hero-home-road.webp') 54% 58% / cover no-repeat;
}

@media (max-width: 620px) {
  .hero .hero-copy {
    background:
      linear-gradient(90deg, rgba(5,7,9,.58), rgba(5,7,9,.12)),
      linear-gradient(180deg, rgba(5,7,9,.04) 0%, rgba(5,7,9,.1) 58%, rgba(5,7,9,.24) 100%),
      url('../img/hero-home-road.webp') 53% 61% / cover no-repeat;
  }
}

/* Darker page backgrounds and a softer off-white rhythm. */
body {
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.012) 1px, transparent 1px),
    radial-gradient(circle at 8% 3%, rgba(151,28,25,.12), transparent 28rem),
    #171f27;
  background-size: 88px 88px, 88px 88px, auto, auto;
}

main .section:not(.section-light):not(.trust-strip) {
  background:
    radial-gradient(circle at 92% 16%, rgba(237,28,24,.04), transparent 24rem),
    linear-gradient(135deg, #1d272f, #171f27);
}

main .trust-strip { background: #171f27; }

main .section.section-light:not(.trust-strip) {
  background:
    radial-gradient(circle at 88% 14%, rgba(237,28,24,.05), transparent 25rem),
    linear-gradient(135deg, #efeeeb, #e4e5e7);
}

main .section.section-light .steps-grid .step,
main .section.section-light .why-grid .mini-card,
main .section.section-light .faq-item {
  background: rgba(247,247,245,.88);
}

/* Car photograph inside the quick-estimate block on every page. */
.conversion-quiz {
  background:
    linear-gradient(90deg, rgba(5,7,9,.91) 0%, rgba(5,7,9,.78) 58%, rgba(5,7,9,.58) 100%),
    linear-gradient(180deg, rgba(5,7,9,.16), rgba(5,7,9,.56)),
    url('../img/hero-home-road.webp') 68% 58% / cover no-repeat;
}

@media (max-width: 620px) {
  .conversion-quiz {
    background:
      linear-gradient(90deg, rgba(5,7,9,.88), rgba(5,7,9,.64)),
      linear-gradient(180deg, rgba(5,7,9,.12), rgba(5,7,9,.52)),
      url('../img/hero-home-road.webp') 61% 58% / cover no-repeat;
  }
}

/* Alternate graphite sections so inner pages do not merge into one surface. */
main .section:nth-of-type(odd):not(.section-light):not(.trust-strip) {
  background:
    radial-gradient(circle at 92% 16%, rgba(237,28,24,.045), transparent 24rem),
    linear-gradient(135deg, #1d272f, #171f27);
}

main .section:nth-of-type(even):not(.section-light):not(.trust-strip) {
  background:
    radial-gradient(circle at 8% 82%, rgba(237,28,24,.035), transparent 22rem),
    linear-gradient(135deg, #141c23, #1a242c);
}