/* =========================================================
   Grace 360 — CAR landing page
   Built on top of main.css. Adds car-specific elements:
   - Hero with photo + animated car SVG + road strip
   - Vehicle types grid
   - Eligibility quiz with conditional slider
   - Final CTA banner
   ========================================================= */

.page-car .header-logo-text em { color: var(--copper-2); }

/* Enlarge hero eyebrow on the CAR page (per Omer's note) */
.page-car .hero-eyebrow {
  font-size: 14px;
  letter-spacing: 0.18em;
  padding: 10px 20px;
  font-weight: 700;
}
@media (max-width: 768px) {
  .page-car .hero-eyebrow { font-size: 13px; padding: 9px 16px; }
}

/* Hero stats — 3 columns variant (after removing 60-payments stat) */
.hero-stats-3 {
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .hero-stats-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-stats-3 .stat:last-child { grid-column: 1 / 3; }
}

/* ===== Hero ===== */

.hero-car { padding-bottom: 0; }

/* Mobile + Tablet CTA — placed between title and image to fill the empty space.
   Hidden on desktop (≥1025px) since desktop already has CTA in hero-body. */
.hero-mobile-cta { display: none; }
@media (max-width: 1024px) {
  .hero-mobile-cta {
    display: inline-flex !important;
    margin: 24px auto 4px;
    padding: 18px 36px;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 14px 32px rgba(212, 165, 116, 0.36), 0 0 0 1px rgba(255,255,255,0.1);
    animation: pulse-hero-cta 2.2s ease-in-out infinite;
  }
  .hero-mobile-cta svg { transform: scaleX(-1); }
}
@keyframes pulse-hero-cta {
  0%, 100% { transform: scale(1); box-shadow: 0 14px 32px rgba(212, 165, 116, 0.36), 0 0 0 1px rgba(255,255,255,0.1); }
  50%      { transform: scale(1.03); box-shadow: 0 18px 40px rgba(212, 165, 116, 0.5), 0 0 0 2px rgba(255,255,255,0.18); }
}

/* Property question — same styling as financing yes/no, star colored */
.quiz-question .required-star { color: var(--copper-2); font-weight: 700; }

/* Use grid template areas for proper reorder mobile vs desktop */
.hero-car .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "head visual"
    "body visual";
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  padding-bottom: clamp(60px, 8vw, 100px);
}
.hero-head   { grid-area: head; position: relative; z-index: 3; }
.hero-body   { grid-area: body; position: relative; z-index: 3; }
.hero-car .hero-visual { grid-area: visual; }

.hero-car .hero-title {
  font-size: clamp(40px, 6.4vw, 76px);
  margin-bottom: 22px;
}
.hero-head { display: flex; flex-direction: column; }
.hero-body { display: flex; flex-direction: column; }

/* Hero Visual: photo + animated car */
.hero-car .hero-visual {
  position: relative;
  height: clamp(400px, 52vw, 600px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-photo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.hero-photo img {
  width: 90%;
  max-width: 460px;
  height: auto;
  border-radius: var(--radius-xl);
  border: 2px solid rgba(91, 155, 213, 0.35);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 60px rgba(91, 155, 213, 0.18);
  object-fit: cover;
  filter: brightness(1.04) saturate(1.1);
  opacity: 0;
  transform: scale(0.94);
  animation: photo-reveal 1.2s var(--ease) 0.8s forwards;
}
@keyframes photo-reveal {
  to { opacity: 1; transform: scale(1); }
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 5%;
  background: linear-gradient(135deg, rgba(30, 88, 214, 0.05) 0%, rgba(15, 47, 126, 0.35) 100%);
  border-radius: var(--radius-xl);
  pointer-events: none;
}

/* Animated car driving in */
.anim-car {
  position: absolute;
  bottom: 14%;
  width: clamp(220px, 28vw, 380px);
  z-index: 4;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 24px rgba(91, 155, 213, 0.35));
  animation: car-drive-in 2s var(--ease) 1.4s both, car-bob 3.5s ease-in-out 3.5s infinite;
}
@keyframes car-drive-in {
  0%   { transform: translateX(120%); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes car-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.anim-car .wheel { transform-origin: center; transform-box: fill-box; animation: wheel-spin 1.2s linear infinite; }
.anim-car .wheel-back { animation-duration: 1.1s; }
.anim-car .wheel-front { animation-duration: 1.0s; }
@keyframes wheel-spin { to { transform: rotate(360deg); } }

/* Road strip with animated lines */
.road-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 47, 126, 0.3) 50%, rgba(15, 47, 126, 0.5) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  overflow: hidden;
  z-index: 2;
}
.road-line {
  width: 80px;
  height: 6px;
  background: linear-gradient(90deg, transparent, var(--sky-light), transparent);
  border-radius: 3px;
  opacity: 0.6;
  animation: road-flow 1.6s linear infinite;
}
.road-line:nth-child(2) { animation-delay: -0.5s; }
.road-line:nth-child(3) { animation-delay: -1s; }
@keyframes road-flow {
  0%   { transform: translateX(0); opacity: 0; }
  20%  { opacity: 0.7; }
  100% { transform: translateX(-200px); opacity: 0; }
}

/* (Floating money symbols removed per Omer's note) */


/* ===== Benefits ===== */

.benefits { background: var(--bg-1); }
.benefits::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border-strong), transparent);
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.benefit-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.32s var(--ease), background 0.32s var(--ease), border-color 0.32s var(--ease), box-shadow 0.32s var(--ease);
  position: relative;
}
.benefit-card:hover {
  transform: translateY(-6px);
  background: var(--glass-strong);
  border-color: var(--silver-deep);
  box-shadow: var(--shadow-lg);
}
.benefit-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-4) 100%);
  color: var(--silver-1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 1px solid var(--glass-border-strong);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.benefit-card h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--t-1);
  margin-bottom: 10px;
}
.benefit-card p {
  font-size: 15px;
  color: var(--t-2);
  line-height: 1.65;
  margin: 0;
}
.benefit-card strong { color: var(--silver-1); }


/* ===== Vehicles grid ===== */

.vehicles { background: var(--bg-0); }

.vehicles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.vehicle-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: right;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.4s var(--ease), background 0.32s var(--ease), border-color 0.32s var(--ease), box-shadow 0.4s var(--ease);
  display: flex;
  flex-direction: column;
}
.vehicle-card:hover {
  transform: translateY(-8px);
  background: var(--glass-strong);
  border-color: var(--copper-2);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.5), 0 0 32px rgba(212, 165, 116, 0.18);
}

.vehicle-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg-3);
}
.vehicle-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
  filter: saturate(1.05) contrast(1.05);
}
.vehicle-card:hover .vehicle-photo img { transform: scale(1.08); }
.vehicle-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 34, 61, 0) 30%, rgba(20, 34, 61, 0.5) 100%);
  pointer-events: none;
}

.vehicle-card-body {
  padding: 24px 24px 28px;
}
.vehicle-card h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--t-1);
  position: relative;
  display: inline-block;
}
.vehicle-card h3::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--copper-2), transparent);
  transition: width 0.4s var(--ease);
}
.vehicle-card:hover h3::after { width: 100%; }
.vehicle-card p { font-size: 14.5px; color: var(--t-2); margin: 0; line-height: 1.6; }


/* ===== Process — 3 steps variant ===== */

.process-steps-3 {
  grid-template-columns: repeat(3, 1fr);
}
.process-steps-3::before {
  right: 14%;
  left: 14%;
}


/* ===== Quiz section ===== */

.quiz-section {
  background:
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(91, 155, 213, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(212, 165, 116, 0.10), transparent 60%),
    var(--bg-1);
  position: relative;
  overflow: hidden;
}

.quiz-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
  position: relative;
  z-index: 1;
}

.quiz-text {
  padding-top: 12px;
}
.quiz-text .section-title { text-align: right; margin-bottom: 18px; }
.quiz-text .section-lead { text-align: right; margin: 0 0 28px; }
.quiz-text .section-lead strong { color: var(--silver-1); }

.quiz-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  list-style: none;
  padding: 0;
}
.quiz-trust li {
  font-size: 15px;
  color: var(--t-2);
  font-weight: 500;
}

.quiz-illustration {
  max-width: 280px;
  width: 100%;
  height: auto;
  margin: 16px auto 0;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
}

/* Quiz form — extends contact-form style from main */
.quiz-form {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%),
    var(--bg-3);
  color: var(--t-1);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
}

.quiz-step {
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--glass-border);
}

.quiz-question {
  font-size: 17px;
  font-weight: 700;
  color: var(--t-1);
  margin: 0 0 14px;
}

.quiz-toggle {
  display: flex;
  gap: 12px;
}
.quiz-pill {
  flex: 1;
  position: relative;
  cursor: pointer;
}
.quiz-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.quiz-pill span {
  display: block;
  text-align: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--glass);
  border: 1.5px solid var(--glass-border-strong);
  font-size: 16px;
  font-weight: 700;
  color: var(--t-1);
  transition: background 0.2s var(--ease-soft), border-color 0.2s var(--ease-soft), color 0.2s var(--ease-soft);
}
.quiz-pill:hover span { background: var(--glass-strong); border-color: var(--silver-deep); }
.quiz-pill input:checked + span {
  background: linear-gradient(135deg, var(--silver-1) 0%, var(--copper-1) 100%);
  border-color: transparent;
  color: var(--bg-0);
  box-shadow: 0 8px 22px rgba(212, 165, 116, 0.32);
}
.quiz-pill input:focus-visible + span {
  outline: 2px solid var(--copper-1);
  outline-offset: 2px;
}

/* Conditional slider */
.quiz-slider-wrap {
  margin-top: 18px;
  padding: 18px;
  background: var(--glass);
  border: 1px dashed var(--copper-2);
  border-radius: 12px;
  animation: slider-reveal 0.4s var(--ease);
}
@keyframes slider-reveal {
  from { opacity: 0; transform: translateY(-6px); max-height: 0; padding-top: 0; padding-bottom: 0; }
  to   { opacity: 1; transform: translateY(0); max-height: 200px; }
}

.quiz-slider-label {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--t-2);
  margin-bottom: 12px;
}
.quiz-slider-label strong {
  font-size: 18px;
  color: var(--copper-1);
  font-weight: 800;
}

.quiz-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: linear-gradient(90deg, var(--copper-2) 0%, var(--copper-2) 50%, var(--bg-4) 50%, var(--bg-4) 100%);
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  direction: ltr;             /* sliders are inherently LTR — force LTR so visual matches value */
}
.quiz-slider-wrap .quiz-slider-marks { direction: ltr; }
.quiz-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--copper-1);
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(212, 165, 116, 0.5);
  cursor: pointer;
  transition: transform 0.18s var(--ease-bounce);
}
.quiz-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.quiz-slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--copper-1); border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(212, 165, 116, 0.5); cursor: pointer;
}

.quiz-slider-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--t-3);
  font-weight: 500;
}


/* ===== Final CTA banner ===== */

.final-cta { background: var(--bg-2); padding: clamp(60px, 8vw, 90px) 0; }

.cta-banner {
  background:
    radial-gradient(circle at 0% 0%, rgba(212, 165, 116, 0.18), transparent 50%),
    linear-gradient(135deg, var(--navy-deep) 0%, var(--blue) 100%);
  border: 1px solid rgba(212, 165, 116, 0.42);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}
.cta-banner-text { flex: 1; min-width: 280px; }
.cta-banner h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  color: var(--t-1);
  margin: 0 0 10px;
}
.cta-banner p { font-size: 15px; color: var(--t-2); margin: 0; line-height: 1.5; }
.cta-banner p strong { color: var(--copper-1); }
.cta-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; }


/* ===== Responsive ===== */

@media (max-width: 1024px) {
  .hero-car .hero-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "visual"
      "body";
    gap: 28px;
  }
  .hero-car .hero-visual { height: 320px; }
  .hero-head { text-align: center; align-items: center; }
  .hero-head .hero-eyebrow { margin-bottom: 18px; }
  .hero-head .hero-title { text-align: center; }
  .hero-body { text-align: center; align-items: center; }
  .hero-body .hero-sub { text-align: center; max-width: 600px; }
  .hero-body .hero-pills { justify-content: center; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .vehicles-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps-3 { grid-template-columns: repeat(2, 1fr); }
  .process-steps-3::before { display: none; }
  .quiz-container { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .vehicles-grid { grid-template-columns: 1fr; }
  .process-steps-3 { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-banner-actions { justify-content: center; }
  .hero-photo img { max-width: 320px; }
  .anim-car { width: 200px; bottom: 8%; }
  .quiz-form { padding: 28px 22px; }
}