/* TopCarRepay — STYLE F: Performance & Sport */
:root {
  --bg: #0a0a0a;
  --bg2: #141414;
  --bg3: #1e1e1e;
  --accent: #f97316;
  --accent2: #fb923c;
  --text: #ffffff;
  --text2: #888888;
  --border: rgba(255,255,255,0.06);
  --card-bg: rgba(249,115,22,0.06);
  --font-head: 'Oswald', 'Impact', sans-serif;
  --font-body: 'Barlow', 'Arial', sans-serif;
  --radius: 6px;
  --transition: 0.25s cubic-bezier(0.23,1,0.32,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6}
a{color:var(--accent);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent2)}
h1,h2,h3,h4{font-family:var(--font-head);letter-spacing:0.01em;line-height:1.2}
h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.5vw,2.8rem);font-weight:700}
h3{font-size:clamp(1.1rem,2vw,1.6rem);font-weight:600}
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
#main-nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);transition:box-shadow var(--transition)}
#main-nav.scrolled{box-shadow:0 4px 30px rgba(0,0,0,0.12)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;max-width:1200px;margin:0 auto}
.nav-logo{font-family:var(--font-head);font-size:1.4rem;font-weight:800;color:var(--text);letter-spacing:0.03em}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{color:var(--text2);font-size:0.88rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;transition:color var(--transition)}
.nav-links a:hover{color:var(--accent)}
.nav-cta{background:var(--accent);color:#fff;padding:0.5rem 1.25rem;border-radius:var(--radius);font-weight:700;font-size:0.85rem;letter-spacing:0.04em;text-transform:uppercase;transition:background var(--transition),transform var(--transition)}
.nav-cta:hover{background:var(--accent2);color:#fff;transform:scale(0.97)}
#theme-toggle{background:none;border:1px solid var(--border);color:var(--text2);padding:0.4rem 0.7rem;border-radius:var(--radius);cursor:pointer;font-size:1rem}
#mobile-menu-btn{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer}
#mobile-menu{display:none}
.hero{min-height:88vh;display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(135deg, #0a0a0a 0%, #1a0800 60%, #0a0a0a 100%)}
.hero-content{position:relative;z-index:2;max-width:680px}
.hero-badge{display:inline-block;background:rgba(0,0,0,0.06);border:1px solid var(--border);color:var(--accent);padding:0.3rem 0.9rem;border-radius:3px;font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:1.25rem}
.hero h1{color:#ffffff;margin-bottom:1rem}
.hero h1 em{color:var(--accent);font-style:normal}
.hero-sub{font-size:1.05rem;color:#888888;margin-bottom:2rem;max-width:520px;line-height:1.7}
.btn-primary{display:inline-block;background:var(--accent);color:#fff;padding:0.8rem 1.8rem;border-radius:var(--radius);font-weight:700;font-size:0.9rem;letter-spacing:0.05em;text-transform:uppercase;transition:background var(--transition),transform var(--transition),box-shadow var(--transition);box-shadow:0 4px 16px rgba(0,0,0,0.15)}
.btn-primary:hover{background:var(--accent2);color:#fff;transform:translateY(-2px)}
.btn-outline{display:inline-block;border:1px solid var(--border);color:var(--text2);padding:0.8rem 1.8rem;border-radius:var(--radius);font-weight:600;font-size:0.9rem;letter-spacing:0.05em;text-transform:uppercase;margin-left:1rem;transition:border-color var(--transition),color var(--transition)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.hero-stats{display:flex;gap:2.5rem;margin-top:2.5rem}
.stat-num{font-family:var(--font-head);font-size:2rem;font-weight:800;color:var(--accent)}
.stat-label{font-size:0.78rem;color:var(--text2);text-transform:uppercase;letter-spacing:0.08em}
section{padding:5rem 0}
.section-label{font-size:0.75rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);margin-bottom:0.75rem}
.section-title{color:var(--text);margin-bottom:1rem}
.section-sub{color:var(--text2);max-width:600px;line-height:1.7;margin-bottom:3rem}
.section-divider{width:48px;height:3px;background:var(--accent);margin:1rem 0 2rem}
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem}
.service-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1.5rem;transition:border-color var(--transition),transform var(--transition)}
.service-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.service-card h3{font-size:1.05rem;color:var(--text);margin-bottom:0.5rem}
.service-card p{font-size:0.88rem;color:var(--text2);line-height:1.6}
.trust-section{background:var(--bg2)}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2rem}
.trust-item{text-align:center;padding:2rem 1rem}
.trust-item h3{font-size:1rem;color:var(--text);margin-bottom:0.5rem}
.trust-item p{font-size:0.85rem;color:var(--text2)}
.vehicle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.25rem}
.vehicle-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1rem;text-align:center;transition:border-color var(--transition)}
.vehicle-card:hover{border-color:var(--accent)}
.vehicle-card h4{font-size:0.88rem;color:var(--text);font-weight:600}
.faq-section{background:var(--bg3)}
.faq-list{max-width:800px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-question{width:100%;background:none;border:none;color:var(--text);text-align:left;padding:1.25rem 0;font-size:1rem;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:color var(--transition);font-family:var(--font-body)}
.faq-question:hover{color:var(--accent)}
.faq-question::after{content:'+';font-size:1.4rem;color:var(--accent);transition:transform var(--transition)}
.faq-item.open .faq-question::after{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.35s cubic-bezier(0.23,1,0.32,1)}
.faq-answer p{color:var(--text2);padding-bottom:1.25rem;line-height:1.7;font-size:0.95rem}
.info-list{list-style:none}
.info-list li{padding:0.75rem 0;border-bottom:1px solid var(--border);color:var(--text2);font-size:0.92rem;display:flex;gap:0.75rem}
.info-list li::before{content:'→';color:var(--accent);flex-shrink:0}
footer{background:var(--bg2);border-top:1px solid var(--border);padding:4rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand p{color:var(--text2);font-size:0.88rem;margin-top:0.75rem;line-height:1.6;max-width:280px}
.footer-col h4{font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text);margin-bottom:1rem}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:0.6rem}
.footer-col a{color:var(--text2);font-size:0.86rem;transition:color var(--transition)}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--border);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.5rem}
.footer-bottom p{color:var(--text2);font-size:0.82rem}
.animate-on-scroll{opacity:0;transform:translateY(24px);transition:opacity 0.5s ease,transform 0.5s ease}
.animate-on-scroll.visible{opacity:1;transform:none}
.page-hero{background:linear-gradient(135deg, #0a0a0a 0%, #1a0800 60%, #0a0a0a 100%);padding:5rem 0 3rem;border-bottom:1px solid var(--border)}
.page-hero h1{font-size:clamp(1.8rem,4vw,3rem)}
.breadcrumb{font-size:0.82rem;color:var(--text2);margin-bottom:1rem}
.breadcrumb a{color:var(--text2)}
.breadcrumb span{color:var(--accent)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.nav-links{display:none}#mobile-menu-btn{display:block}#mobile-menu.open{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;background:var(--bg2);border-top:1px solid var(--border)}#mobile-menu a{color:var(--text2);}.footer-grid{grid-template-columns:1fr}.hero-stats{flex-wrap:wrap;gap:1.5rem}}