/* =========================================================
   Expert Repair Hub — Page Section Styles
   ========================================================= */

/* Hero */
.hero { position: relative; padding-top: 3.5rem; padding-bottom: 6rem; overflow: hidden; background: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 65%); }
.hero-shape { position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; }
.hero-shape-1 { width: 420px; height: 420px; background: rgba(var(--primary-rgb), 0.10); top: -120px; right: -120px; }
.hero-shape-2 { width: 320px; height: 320px; background: rgba(var(--accent-rgb), 0.12); bottom: -80px; left: -100px; }
.hero-content { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2rem, 1.6rem + 2.4vw, 3.4rem); line-height: 1.18; margin-bottom: 1.25rem; }
.hero h1 .text-highlight { color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-style: wavy; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.hero-lead { font-size: 1.08rem; color: var(--gray-600); max-width: 540px; margin-bottom: 2rem; }
.hero-actions { gap: 0.85rem; }
.hero-emergency { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--primary-dark); margin-top: 1.25rem; }
.hero-emergency .pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #16A34A; animation: pulseDot 1.6s ease-in-out infinite; }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.trust-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin-top: 2.5rem; max-width: 520px; }
@media (min-width: 992px) { .trust-badges { grid-template-columns: repeat(4, 1fr); } }
.trust-badge { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--gray-700); }
.trust-badge .trust-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }

.hero-visual { position: relative; z-index: 1; padding: 1rem; }
.hero-illustration { width: 100%; max-width: 540px; display: block; margin: 0 auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: heroFloat 6s ease-in-out infinite; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.floating-card {
  position: absolute; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 0.75rem 1.1rem; display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.85rem; font-weight: 700; color: var(--gray-900); animation: cardFloat 5s ease-in-out infinite; z-index: 3;
}
.floating-card small { display: block; font-weight: 500; color: var(--gray-600); font-size: 0.72rem; }
.floating-card .fc-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.fc-icon.fc-accent { background: var(--accent-light); color: var(--accent); }
.fc-icon.fc-primary { background: var(--primary-light); color: var(--primary); }
.fc-icon.fc-green { background: #E6F7EE; color: #16A34A; }
.floating-card.fc-top { top: 6%; left: -4%; animation-delay: 0s; }
.floating-card.fc-mid { top: 42%; right: -8%; animation-delay: 1.2s; }
.floating-card.fc-bottom { bottom: 6%; left: 2%; animation-delay: 2.4s; }
@keyframes cardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (max-width: 991.98px) { .floating-card { display: none; } .hero-illustration { max-width: 420px; } }

/* Stats */
.stats-section { position: relative; z-index: 4; margin-top: -3.25rem; }
.stats-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 2.25rem 1.5rem; overflow: hidden; }
.stat-item { text-align: center; padding: 0.5rem; }
.stat-number { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); color: var(--primary); display: flex; align-items: center; justify-content: center; gap: 0.15rem; }
.stat-number .stat-suffix { color: var(--accent); }
.stat-label { color: var(--gray-600); font-weight: 600; font-size: 0.88rem; margin-top: 0.25rem; }
.ratio-icon-circle { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }

/* Services grid */
.service-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: var(--transition); }
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-img-wrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--primary-light); }
.service-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.service-card:hover .service-img-wrap img { transform: scale(1.07); }
.service-icon-badge { position: absolute; top: 1rem; right: 1rem; width: 46px; height: 46px; background: #fff; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--primary); box-shadow: var(--shadow-soft); }
.service-body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex-grow: 1; }
.service-body h3 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.service-body p { font-size: 0.88rem; color: var(--gray-600); margin-bottom: 1.1rem; flex-grow: 1; }
.service-link { color: var(--primary); font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.service-link i { transition: transform 0.3s ease; }
.service-card:hover .service-link i { transform: translateX(5px); }
.service-price { font-size: 0.8rem; font-weight: 700; color: var(--accent-dark); background: var(--accent-light); border-radius: 50px; padding: 0.2rem 0.7rem; display: inline-block; margin-bottom: 0.6rem; }

/* How It Works — Timeline */
.timeline { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 992px) {
  .timeline { flex-direction: row; justify-content: space-between; gap: 1rem; position: relative; }
  .timeline::before { content: ''; position: absolute; top: 38px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--gray-200) 0 10px, transparent 10px 20px); z-index: 0; }
}
.timeline-step { position: relative; z-index: 1; flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
@media (max-width: 991.98px) {
  .timeline-step { flex-direction: row; text-align: left; align-items: flex-start; gap: 1.1rem; }
  .timeline-step:not(:last-child)::after { content: ''; position: absolute; left: 38px; top: 80px; width: 2px; height: calc(100% + 2rem - 80px); background: repeating-linear-gradient(180deg, var(--gray-200) 0 8px, transparent 8px 16px); }
}
.timeline-icon-wrap { position: relative; flex-shrink: 0; }
.timeline-icon { width: 76px; height: 76px; border-radius: 50%; background: #fff; border: 2px solid var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: var(--primary); box-shadow: var(--shadow-soft); transition: var(--transition); margin: 0 auto; }
.timeline-step:hover .timeline-icon { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-4px); }
.timeline-step-number { position: absolute; top: -6px; right: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); }
.timeline-step h3 { font-size: 1rem; margin: 1.1rem 0 0.4rem; }
.timeline-step p { font-size: 0.85rem; color: var(--gray-600); margin-bottom: 0; }
@media (max-width: 991.98px) { .timeline-step h3 { margin-top: 0; } }

/* Why Choose Us */
.feature-card { background: var(--gray-100); border-radius: var(--radius-lg); padding: 1.9rem; height: 100%; transition: var(--transition); border: 1px solid transparent; }
.feature-card:hover { background: #fff; box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: var(--gray-200); }
.feature-icon { width: 58px; height: 58px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--primary); margin-bottom: 1.25rem; box-shadow: var(--shadow-soft); transition: var(--transition); }
.feature-card:hover .feature-icon { background: var(--primary); color: #fff; }
.feature-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.feature-card p { font-size: 0.88rem; color: var(--gray-600); margin-bottom: 0; }

/* Brands */
.brand-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1.4rem 0.8rem; text-align: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--gray-400); transition: var(--transition); height: 100%; display: flex; align-items: center; justify-content: center; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; }
.brand-card:hover { color: var(--primary); border-color: var(--primary-light); box-shadow: var(--shadow-soft); transform: translateY(-4px); background: var(--primary-light); }

/* Booking / final CTA gradient shared */
.booking-section { position: relative; background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); overflow: hidden; }
.booking-section .hero-shape-1 { background: rgba(255,255,255,0.08); top: -150px; right: -100px; }
.booking-section .hero-shape-2 { background: rgba(var(--accent-rgb), 0.18); bottom: -120px; left: -120px; }
.booking-intro { color: #fff; position: relative; z-index: 2; }
.booking-intro .section-eyebrow { background: rgba(255,255,255,0.12); color: #fff; }
.booking-intro h2 { color: #fff; }
.booking-intro p { color: rgba(255,255,255,0.82); }
.booking-points { margin-top: 1.5rem; }
.booking-points li { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.85rem; font-weight: 600; color: #fff; }
.booking-points li i { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.14); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; }
.booking-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 2.25rem; position: relative; z-index: 2; }
.booking-card h3 { margin-bottom: 1.5rem; }

/* Testimonials (Swiper) */
.testimonial-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 2.5rem; max-width: 720px; margin: 0 auto; text-align: center; border: 1px solid var(--gray-200); height: 100%; }
.testimonial-stars { color: var(--accent); font-size: 1.05rem; margin-bottom: 1.1rem; letter-spacing: 0.15rem; }
.testimonial-text { font-size: 1.02rem; color: var(--gray-900); font-style: italic; margin-bottom: 1.5rem; line-height: 1.7; }
.testimonial-avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; color: #fff; margin: 0 auto 0.75rem; font-family: 'Poppins', sans-serif; }
.testimonial-avatar.avatar-blue { background: var(--primary); }
.testimonial-avatar.avatar-orange { background: var(--accent); }
.testimonial-name { font-weight: 700; color: var(--gray-900); margin-bottom: 0; }
.testimonial-city { font-size: 0.84rem; color: var(--gray-600); }
.testimonial-swiper { padding-bottom: 3rem; }
.testimonial-swiper .swiper-pagination-bullet { background: var(--gray-200); opacity: 1; }
.testimonial-swiper .swiper-pagination-bullet-active { background: var(--primary); }
.testimonial-swiper .swiper-button-next, .testimonial-swiper .swiper-button-prev {
  width: 44px; height: 44px; background: #fff; border: 1px solid var(--gray-200); border-radius: 50%; box-shadow: var(--shadow-soft);
}
.testimonial-swiper .swiper-button-next::after, .testimonial-swiper .swiper-button-prev::after { font-size: 0.95rem; color: var(--primary); }

/* Blog teaser cards */
.blog-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; height: 100%; transition: var(--transition); }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.blog-card-img { aspect-ratio: 16/10; background: var(--primary-light); overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 1.4rem; }
.blog-card-date { font-size: 0.78rem; color: var(--gray-600); margin-bottom: 0.5rem; }
.blog-card-body h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.blog-coming-soon { background: var(--gray-100); border-radius: var(--radius-lg); padding: 3rem; text-align: center; color: var(--gray-600); }

/* Final CTA */
.final-cta { position: relative; background: linear-gradient(135deg, var(--primary-darker) 0%, var(--primary) 100%); color: #fff; overflow: hidden; }
.final-cta::before, .final-cta::after { content: ''; position: absolute; border-radius: 50%; }
.final-cta::before { width: 360px; height: 360px; background: rgba(255,255,255,0.06); top: -160px; left: -100px; }
.final-cta::after { width: 280px; height: 280px; background: rgba(var(--accent-rgb), 0.18); bottom: -120px; right: -60px; }
.final-cta h2 { color: #fff; }
.final-cta p { color: rgba(255,255,255,0.85); }

/* Footer */
.site-footer { background: var(--dark); color: #A8C7C2; }
.site-footer h5, .site-footer h6 { color: #fff; font-size: 1.05rem; margin-bottom: 1.3rem; }
.site-footer p { color: #A8C7C2; font-size: 0.92rem; }
.site-footer hr { border-color: rgba(255,255,255,0.08); }
.site-footer a { color: #A8C7C2; font-size: 0.92rem; transition: var(--transition); }
.site-footer a:hover { color: var(--accent); padding-left: 3px; }
.site-footer .footer-links li { margin-bottom: 0.65rem; }
.site-footer .footer-links a { display: inline-flex; align-items: center; gap: 0.5rem; }
.site-footer .footer-links i { color: var(--accent); font-size: 0.75rem; }
.footer-brand { display: flex; align-items: center; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.3rem; color: #fff; margin-bottom: 1rem; }
.footer-brand .logo-mark { margin-right: 0.6rem; }
.footer-contact li { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.footer-contact .fc-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.06); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.footer-areas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.footer-areas span { font-size: 0.78rem; padding: 0.35rem 0.85rem; border-radius: 50px; background: rgba(255,255,255,0.06); color: #BFE0DA; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; color: #fff; }
.footer-social a:hover { background: var(--accent); transform: translateY(-3px); padding-left: 0; }
.newsletter-form .form-control { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.newsletter-form .form-control::placeholder { color: #7FA39E; }
.newsletter-form .form-control:focus { background: rgba(255,255,255,0.1); border-color: var(--accent); box-shadow: none; color: #fff; }
.newsletter-form .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.25rem 0 5.5rem; font-size: 0.82rem; color: #7FA39E; }
.footer-bottom a { color: #A8C7C2; }
@media (min-width: 992px) { .footer-bottom { padding-bottom: 1.25rem; } }

/* Legal / long-form content pages */
.legal-content h2 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: 0.75rem; }
.legal-content p { color: var(--gray-700); line-height: 1.75; margin-bottom: 1rem; }
.legal-content ul { color: var(--gray-700); line-height: 1.75; margin-bottom: 1rem; padding-left: 1.25rem; }
.legal-content li { margin-bottom: 0.4rem; }

/* Stub pages */
.stub-page { padding: 6rem 0; text-align: center; }
.stub-page .stub-icon { font-size: 2.5rem; color: var(--primary); margin-bottom: 1rem; }