/* ═══════════════════════════════════════════════
     EASY FIX AUTO — COSMETIC UPGRADE
     Visual polish only — no layout changes
  ═══════════════════════════════════════════════ */

  /* ── Enhanced design tokens ── */
  :root {
    --accent-glow: rgba(230,57,70,0.25);
    --accent-subtle: rgba(230,57,70,0.08);
    --gradient-dark: linear-gradient(135deg,#0f0f0f 0%,#1a1a1a 60%,#1f1f1f 100%);
    --gradient-card: linear-gradient(145deg,#ffffff 0%,#fafafa 100%);
    --transition-smooth: all 0.3s cubic-bezier(0.4,0,0.2,1);
    --radius-lg: 16px;
    --radius-xl: 24px;
  }

  /* ── Hero section — more depth and texture ── */
  .hero::before {
    content:'';
    position:absolute;
    inset:0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(230,57,70,0.12) 0%, transparent 70%);
    pointer-events:none;
    z-index:0;
  }
  .hero::after {
    content:'';
    position:absolute;
    bottom:0;left:0;right:0;
    height:120px;
    background:linear-gradient(to bottom,transparent,rgba(26,26,26,0.4));
    pointer-events:none;
    z-index:0;
  }
  .hero-inner { position:relative; z-index:1; }

  /* ── Buttons — pill shape, gradient, lift ── */
  .btn {
    border-radius: 50px !important;
    letter-spacing: 0.3px;
    transition: var(--transition-smooth) !important;
    position: relative;
    overflow: hidden;
  }
  .btn::after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(255,255,255,0.12),rgba(255,255,255,0));
    border-radius:inherit;
    pointer-events:none;
  }
  .btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px var(--accent-glow) !important;
  }
  .btn.btn-dark:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.35) !important;
  }
  .btn-outline:hover {
    box-shadow: 0 8px 28px rgba(255,255,255,0.15) !important;
  }

  /* ── Cards — gradient bg, stronger hover, accent border ── */
  .card {
    background: var(--gradient-card) !important;
    border-radius: var(--radius-lg) !important;
    transition: var(--transition-smooth) !important;
    border: 1px solid rgba(229,231,235,0.8) !important;
  }
  .card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12) !important;
    border-color: rgba(230,57,70,0.2) !important;
  }

  /* ── Service items — left accent bar on hover ── */
  .service-item {
    border-radius: var(--radius-lg) !important;
    transition: var(--transition-smooth) !important;
    border-left: 3px solid transparent !important;
  }
  .service-item:hover {
    transform: translateX(4px) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
    border-left-color: var(--accent) !important;
    background: linear-gradient(to right, rgba(230,57,70,0.03), white) !important;
  }

  /* ── Section labels — pill shape, subtle glow ── */
  .label {
    border-radius: 50px !important;
    letter-spacing: 2px;
    box-shadow: 0 2px 12px var(--accent-glow);
    transition: var(--transition-smooth);
  }

  /* ── Divider — animated width ── */
  .divider {
    height: 3px !important;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent), rgba(230,57,70,0.3)) !important;
    transition: width 0.6s ease;
  }

  /* ── Hero trust badges — glass effect ── */
  .hero-trust-item {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: var(--radius-lg) !important;
    padding: 14px 18px !important;
    backdrop-filter: blur(8px);
    transition: var(--transition-smooth) !important;
  }
  .hero-trust-item:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(230,57,70,0.4) !important;
    transform: translateY(-2px) !important;
  }
  .hero-trust-icon {
    background: rgba(230,57,70,0.2) !important;
    border-radius: 10px !important;
    transition: var(--transition-smooth) !important;
  }
  .hero-trust-item:hover .hero-trust-icon {
    background: rgba(230,57,70,0.35) !important;
    transform: scale(1.1);
  }

  /* ── Section dark — subtle noise texture feel ── */
  .section-dark {
    background: linear-gradient(135deg,#111 0%,#1a1a1a 50%,#151515 100%) !important;
    position:relative;
    overflow:hidden;
  }
  .section-dark::before {
    content:'';
    position:absolute;
    top:-50%;left:-50%;
    width:200%;height:200%;
    background: radial-gradient(ellipse 40% 40% at 70% 30%, rgba(230,57,70,0.06) 0%, transparent 60%);
    pointer-events:none;
  }

  /* ── CTA banners — gradient border glow ── */
  .cta-banner {
    background: linear-gradient(135deg,#E63946 0%,#c0303b 100%) !important;
    box-shadow: 0 8px 40px rgba(230,57,70,0.35) !important;
  }

  /* ── Service category headers ── */
  .service-cat-header {
    transition: var(--transition-smooth);
  }
  .service-cat-icon {
    border-radius: 12px !important;
    transition: var(--transition-smooth) !important;
  }
  .service-cat-header:hover .service-cat-icon {
    transform: scale(1.08) rotate(-3deg);
  }

  /* ── Why choose cards (city pages) ── */
  .why-item, [style*="align-items:flex-start"][style*="gap:14px"] {
    transition: var(--transition-smooth);
  }

  /* ── Nav — bottom border glow on scroll ── */
  nav {
    transition: box-shadow 0.3s ease !important;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }

  /* ── Active nav link — underline instead of just color ── */
  .nav-links li a.active {
    color: var(--accent) !important;
    position: relative;
  }
  .nav-links li a.active::after {
    content:'';
    position:absolute;
    bottom:-2px;left:0;right:0;
    height:2px;
    background:var(--accent);
    border-radius:2px;
  }

  /* ── Desktop nav — shrink links a little on narrow laptops/tablets so all items fit
        (same size as before from ~1280px up; phones use the hamburger menu) ── */
  @media (min-width:769px) {
    .nav-links li a {
      padding: 8px clamp(4px, 0.78vw, 10px);
      font-size: clamp(0.7rem, 1vw, 0.8rem);
    }
  }

  /* ── Footer — subtle top border ── */
  footer {
    border-top: 3px solid var(--accent) !important;
    position: relative;
  }

  /* ── Service price — badge style ── */
  .service-price {
    background: var(--accent-subtle);
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.85rem !important;
  }

  /* ── Scroll fade-in animation classes ── */
  .fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .fade-up.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .fade-up-delay-1 { transition-delay: 0.1s; }
  .fade-up-delay-2 { transition-delay: 0.2s; }
  .fade-up-delay-3 { transition-delay: 0.3s; }
  .fade-up-delay-4 { transition-delay: 0.4s; }

  /* ── Hero staggered load animation ── */
  @keyframes heroFadeUp {
    from { opacity:0; transform:translateY(32px); }
    to   { opacity:1; transform:translateY(0); }
  }
  @keyframes heroFadeIn {
    from { opacity:0; }
    to   { opacity:1; }
  }
  @keyframes float {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-6px); }
  }
  @keyframes pulse-glow {
    0%,100% { box-shadow:0 0 0 0 var(--accent-glow); }
    50%      { box-shadow:0 0 0 10px transparent; }
  }
  @keyframes shimmer {
    0%   { background-position:-200% center; }
    100% { background-position:200% center; }
  }

  .hero h1 {
    animation: heroFadeUp 0.7s ease both;
    animation-delay: 0.1s;
  }
  .hero p {
    animation: heroFadeUp 0.7s ease both;
    animation-delay: 0.25s;
  }
  .hero-btns {
    animation: heroFadeUp 0.7s ease both;
    animation-delay: 0.4s;
  }
  .hero-trust {
    animation: heroFadeUp 0.7s ease both;
    animation-delay: 0.55s;
  }
  .logo-img-lg {
    animation: heroFadeIn 0.5s ease both;
  }

  /* ── Float animation on primary CTA ── */
  .btn-lg.btn:not(.btn-outline):not(.btn-dark) {
    animation: float 3.5s ease-in-out infinite;
    animation-delay: 2s;
  }
  .btn-lg.btn:not(.btn-outline):not(.btn-dark):hover {
    animation: none;
  }

  /* ── Pulse glow on mobile book btn ── */
  @media(max-width:768px){
    .mobile-book-btn {
      animation: pulse-glow 2s ease-in-out infinite !important;
    }
  }

  /* ── Section gray — subtle pattern ── */
  .section-gray {
    background: linear-gradient(180deg,#f7f7f7 0%,#f2f2f2 100%) !important;
  }

  /* ── Table rows — hover highlight ── */
  table tbody tr {
    transition: background 0.2s ease;
  }
  table tbody tr:hover {
    background: rgba(230,57,70,0.04) !important;
  }

  /* ── FAQ items hover ── */
  [style*="border-bottom:1px solid var(--light-gray)"] {
    transition: var(--transition-smooth);
    padding-left: 0;
  }
  [style*="border-bottom:1px solid var(--light-gray)"]:hover {
    padding-left: 6px;
    border-left: 3px solid var(--accent);
  }

  /* ── Neighborhood grid bubbles ── */
  .neighborhood-grid span:hover {
    border-color: var(--accent) !important;
    background: var(--accent-subtle) !important;
    transform: translateY(-2px) scale(1.03);
    transition: var(--transition-smooth);
  }