*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --yellow:#FFE000; --black:#111111; --white:#FFFFFF; --grey:#1a1a1a; --mid:#2a2a2a; --accent:#FF3D00; --font:'Helvetica Neue',Helvetica,Arial,sans-serif; }
body { background:var(--black); color:var(--white); font-family:var(--font); overflow-x:hidden; }
a { text-decoration:none; color:inherit; }

/* NAV */
nav { background:var(--black); border-bottom:3px solid var(--yellow); display:flex; align-items:center; justify-content:space-between; padding:0 4vw; height:70px; position:sticky; top:0; z-index:100; }
.nav-brand { display:flex; align-items:center; gap:12px; }
.logo-circle { border-radius:50%; background:var(--yellow); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.logo-circle img { object-fit:cover; }
.logo-circle.sm { width:44px; height:44px; } .logo-circle.sm img { width:44px; height:44px; }
.logo-circle.xs { width:32px; height:32px; } .logo-circle.xs img { width:32px; height:32px; }
.nav-name { font-size:1.4rem; font-weight:800; color:var(--yellow); letter-spacing:1px; text-transform:uppercase; }
.nav-links { display:flex; gap:0; list-style:none; }
.nav-links a { color:#aaa; font-size:0.8rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:0 1rem; transition:color 0.2s; }
.nav-links a:hover, .nav-links a.active { color:var(--yellow); }
.nav-cta { background:var(--yellow); color:var(--black); font-size:0.8rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:0.6rem 1.4rem; transition:background 0.2s; white-space:nowrap; }
.nav-cta:hover { background:#e6c800; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span { width:24px; height:2px; background:var(--yellow); display:block; }
.mobile-menu { display:none; position:fixed; top:70px; left:0; right:0; background:var(--black); border-bottom:3px solid var(--yellow); z-index:99; padding:1rem 4vw 1.5rem; flex-direction:column; gap:0.75rem; }
.mobile-menu.open { display:flex; }
.mobile-menu a { color:#aaa; font-size:0.9rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:0.5rem 0; border-bottom:1px solid #222; }
.mobile-menu a:last-child { border-bottom:none; color:var(--yellow); }

/* TICKER */
.ticker-wrap { background:var(--yellow); overflow:hidden; white-space:nowrap; padding:0.6rem 0; border-top:3px solid #000; border-bottom:3px solid #000; }
.ticker-inner { display:inline-block; animation:ticker 16s linear infinite; }
.ticker-inner span { font-size:0.85rem; font-weight:800; color:var(--black); letter-spacing:2px; padding:0 1.5rem; text-transform:uppercase; }
.ticker-inner .dot { color:var(--accent); }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* HERO */
.hero { position:relative; overflow:hidden; background:var(--black); padding:5rem 4vw 4rem; text-align:center; min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.circles-bg { position:absolute; inset:0; pointer-events:none; z-index:0; }
.go-circle { position:absolute; border-radius:50%; background:var(--yellow); }
.go-circle.outline { background:transparent; border:4px solid var(--yellow); }
.go-circle:nth-child(1){width:600px;height:600px;top:-200px;left:-180px;animation:ci1 0.7s ease-out 0s both}
.go-circle:nth-child(2){width:480px;height:480px;top:-100px;right:-120px;animation:ci2 0.6s ease-out .15s both}
.go-circle:nth-child(3){width:320px;height:320px;bottom:-80px;left:5%;animation:ci3 .65s ease-out .25s both}
.go-circle:nth-child(4){width:200px;height:200px;bottom:40px;right:8%;animation:ci4 .55s ease-out .35s both}
.go-circle:nth-child(5){width:100px;height:100px;top:60px;left:42%;animation:ci5 .5s ease-out .4s both}
.go-circle:nth-child(6){width:60px;height:60px;top:30px;right:32%;animation:ci6 .45s ease-out .45s both}
.go-circle:nth-child(7){width:700px;height:700px;top:-300px;right:-250px;animation:ci7 .8s ease-out .1s both}
.go-circle:nth-child(8){width:260px;height:260px;bottom:20px;left:30%;animation:ci8 .6s ease-out .3s both}
.go-circle:nth-child(9){width:140px;height:140px;top:80px;left:15%;animation:ci9 .55s ease-out .5s both}
@keyframes ci1{from{opacity:0;transform:scale(.5)}to{opacity:.22;transform:scale(1)}}
@keyframes ci2{from{opacity:0;transform:scale(.5)}to{opacity:.15;transform:scale(1)}}
@keyframes ci3{from{opacity:0;transform:scale(.5)}to{opacity:.18;transform:scale(1)}}
@keyframes ci4{from{opacity:0;transform:scale(.5)}to{opacity:.25;transform:scale(1)}}
@keyframes ci5{from{opacity:0;transform:scale(.5)}to{opacity:.35;transform:scale(1)}}
@keyframes ci6{from{opacity:0;transform:scale(.5)}to{opacity:.40;transform:scale(1)}}
@keyframes ci7{from{opacity:0;transform:scale(.6)}to{opacity:.12;transform:scale(1)}}
@keyframes ci8{from{opacity:0;transform:scale(.6)}to{opacity:.18;transform:scale(1)}}
@keyframes ci9{from{opacity:0;transform:scale(.6)}to{opacity:.22;transform:scale(1)}}
.hero-inner { position:relative; z-index:2; max-width:800px; }
.hero-eyebrow { display:inline-block; background:var(--yellow); color:var(--black); font-size:0.75rem; font-weight:800; letter-spacing:4px; text-transform:uppercase; padding:0.4rem 1.2rem; margin-bottom:1.25rem; animation:fadeUp .5s ease .4s both; }
.hero-headline { font-size:clamp(3rem,9vw,7rem); font-weight:800; line-height:0.95; letter-spacing:-2px; animation:fadeUp .5s ease .5s both; }
.hero-headline .yellow { color:var(--yellow); }
.hero-sub { font-size:clamp(1rem,2.5vw,1.4rem); font-weight:500; color:#bbb; margin-top:1.25rem; line-height:1.6; animation:fadeUp .5s ease .6s both; }
.hero-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; animation:fadeUp .5s ease .7s both; }
.btn-primary { background:var(--yellow); color:var(--black); font-size:0.9rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:0.9rem 2rem; transition:transform .15s,box-shadow .15s; display:inline-block; }
.btn-primary:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--accent); }
.btn-outline { border:2px solid var(--yellow); color:var(--yellow); font-size:0.9rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:0.9rem 2rem; transition:background .2s,color .2s; display:inline-block; }
.btn-outline:hover { background:var(--yellow); color:var(--black); }
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}

/* SECTIONS */
.section { padding:5rem 4vw; }
.section.dark { background:var(--black); }
.section.grey { background:var(--grey); }
.section.yellow { background:var(--yellow); }
.section-label { font-size:0.7rem; font-weight:800; letter-spacing:4px; text-transform:uppercase; color:var(--yellow); margin-bottom:0.5rem; }
.section-label.dark { color:var(--black); }
.section-title { font-size:clamp(1.8rem,4vw,3rem); font-weight:800; line-height:1.1; margin-bottom:1rem; letter-spacing:-1px; }
.section-title.dark { color:var(--black); }
.section-sub { color:#888; font-size:1rem; line-height:1.7; max-width:600px; margin-bottom:3rem; }
.section-sub.dark { color:#333; }

/* USP GRID */
.usp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:#2a2a2a; }
.usp-card { background:var(--grey); padding:2rem; position:relative; overflow:hidden; transition:background .2s; }
.usp-card:hover { background:#222; }
.usp-card::after { content:''; position:absolute; bottom:0; left:0; width:0; height:3px; background:var(--yellow); transition:width .3s; }
.usp-card:hover::after { width:100%; }
.usp-card h3 { font-size:1rem; font-weight:800; color:var(--yellow); letter-spacing:1px; text-transform:uppercase; margin-bottom:0.5rem; }
.usp-card p { color:#888; font-size:0.9rem; line-height:1.6; }
.usp-icon { font-size:2rem; margin-bottom:1rem; display:block; }

/* CAR CARDS */
.cars-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.car-card { background:var(--grey); border:1px solid #2a2a2a; overflow:hidden; transition:transform .2s,border-color .2s; cursor:pointer; }
.car-card:hover { transform:translateY(-4px); border-color:var(--yellow); }
.car-thumb { background:var(--mid); height:160px; display:flex; align-items:center; justify-content:center; position:relative; font-size:4rem; }
.warranty-flag { position:absolute; top:10px; left:0; background:var(--yellow); color:var(--black); font-size:0.7rem; font-weight:800; letter-spacing:1px; padding:0.3rem 0.8rem; text-transform:uppercase; }
.car-info { padding:1.25rem; }
.car-info h4 { font-size:1rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.car-meta { color:#666; font-size:0.82rem; margin-top:0.25rem; }
.car-price { font-size:1.6rem; font-weight:800; color:var(--yellow); margin-top:0.75rem; }
.car-price span { font-size:0.75rem; color:#666; font-weight:400; display:block; margin-top:-4px; }

/* STEPS */
.steps { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem 1rem; max-width:1000px; margin:0 auto; align-items:flex-start; }
.step { display:flex; flex-direction:column; align-items:center; gap:1rem; width:190px; text-align:center; }
.step-circle { width:110px; height:110px; border-radius:50%; background:var(--yellow); display:flex; align-items:center; justify-content:center; font-size:2.4rem; font-weight:800; color:var(--black); flex-shrink:0; transition:transform .2s; }
.step-circle:hover { transform:scale(1.06); }
.step-circle.red { background:var(--accent); color:#fff; }
.step-circle.outline { background:transparent; border:4px solid var(--yellow); color:var(--yellow); }
.step h3 { font-size:0.9rem; font-weight:800; letter-spacing:1px; color:var(--yellow); text-transform:uppercase; }
.step p { color:#888; font-size:0.85rem; line-height:1.6; }
.step-arrow { color:#333; font-size:1.5rem; align-self:center; margin-top:-50px; }

/* MEGA PHONE ANIMATION */
@keyframes blast1{0%{opacity:0;transform:scale(.4)}40%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
@keyframes blast2{0%{opacity:0;transform:scale(.4)}40%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
@keyframes blast3{0%{opacity:0;transform:scale(.4)}40%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
@keyframes megashake{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}}
@keyframes wave1{0%{opacity:0;transform:translateX(0) scaleY(.6)}30%{opacity:1}100%{opacity:0;transform:translateX(28px) scaleY(1)}}
@keyframes wave2{0%{opacity:0;transform:translateX(0) scaleY(.6)}30%{opacity:.8}100%{opacity:0;transform:translateX(38px) scaleY(1)}}
@keyframes wave3{0%{opacity:0;transform:translateX(0) scaleY(.6)}30%{opacity:.6}100%{opacity:0;transform:translateX(50px) scaleY(1)}}
.mega-outer{position:relative;width:140px;height:140px;display:flex;align-items:center;justify-content:center}
.mega-blast{position:absolute;inset:0;border-radius:50%;border:3px solid var(--yellow)}
.mega-blast:nth-child(1){animation:blast1 1.6s ease-out 0s infinite}
.mega-blast:nth-child(2){animation:blast2 1.6s ease-out .5s infinite}
.mega-blast:nth-child(3){animation:blast3 1.6s ease-out 1s infinite}
.mega-inner{width:110px;height:110px;border-radius:50%;border:4px solid var(--yellow);background:var(--grey);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;overflow:visible}
.mega-emoji{animation:megashake 1.6s ease-in-out infinite;font-size:3.8rem;line-height:1;display:block;position:relative;z-index:3}
.mega-waves{position:absolute;right:-8px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:5px;z-index:4}
.mega-waves div:nth-child(1){width:14px;height:14px;border-radius:50% 50% 50% 0;border:3px solid var(--yellow);border-left:none;border-bottom:none;animation:wave1 1.6s ease-out .1s infinite}
.mega-waves div:nth-child(2){width:22px;height:22px;border-radius:50% 50% 50% 0;border:3px solid var(--yellow);border-left:none;border-bottom:none;animation:wave2 1.6s ease-out .25s infinite;margin-left:-4px}
.mega-waves div:nth-child(3){width:30px;height:30px;border-radius:50% 50% 50% 0;border:3px solid var(--yellow);border-left:none;border-bottom:none;animation:wave3 1.6s ease-out .4s infinite;margin-left:-8px}

/* RULES */
.rule-row { display:flex; align-items:flex-start; gap:1.5rem; padding:1.5rem 0; border-bottom:1px solid #222; }
.rule-row:last-child { border-bottom:none; }
.rule-num { width:44px; height:44px; border-radius:50%; background:var(--yellow); color:var(--black); font-size:1rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rule-text h4 { font-size:0.95rem; font-weight:800; color:var(--yellow); letter-spacing:1px; text-transform:uppercase; margin-bottom:0.3rem; }
.rule-text p { color:#888; font-size:0.9rem; line-height:1.6; }

/* PROMISE BANNER */
.promise { background:var(--yellow); padding:4rem 4vw; display:grid; grid-template-columns:1fr auto; align-items:center; gap:2rem; position:relative; overflow:hidden; }
.promise h2 { font-size:clamp(1.8rem,4vw,3rem); font-weight:800; color:var(--black); line-height:1.1; letter-spacing:-1px; position:relative; z-index:2; }
.promise h2 em { color:var(--accent); font-style:normal; }
.promise p { color:#333; font-size:1rem; margin-top:0.5rem; position:relative; z-index:2; }
.banner-circle { position:absolute; border-radius:50%; background:#000; opacity:0.06; pointer-events:none; }
.banner-circle:nth-child(1){width:400px;height:400px;top:-150px;left:-100px}
.banner-circle:nth-child(2){width:300px;height:300px;bottom:-100px;right:-60px}
.banner-circle:nth-child(3){width:180px;height:180px;top:20px;right:200px}

/* FORM */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-field { display:flex; flex-direction:column; gap:0.4rem; }
.form-field.full { grid-column:1/-1; }
.form-field label { font-size:0.75rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--yellow); }
.form-field input, .form-field textarea, .form-field select { background:#222; border:1px solid #333; color:var(--white); font-family:var(--font); font-size:0.95rem; padding:0.85rem 1rem; width:100%; outline:none; transition:border-color .2s; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color:var(--yellow); }
.form-field textarea { min-height:100px; resize:vertical; }
.form-field select option { background:#222; }
.btn-form { background:var(--yellow); color:var(--black); font-size:0.9rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; border:none; padding:1rem 2.5rem; cursor:pointer; transition:transform .15s,box-shadow .15s; }
.btn-form:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--accent); }

/* ACCORDION FAQ */
.faq-item { border-bottom:1px solid #222; }
.faq-q { width:100%; background:none; border:none; color:var(--white); font-family:var(--font); font-size:1rem; font-weight:700; text-align:left; padding:1.25rem 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-q:hover { color:var(--yellow); }
.faq-q .icon { font-size:1.2rem; color:var(--yellow); flex-shrink:0; transition:transform .3s; }
.faq-q.open .icon { transform:rotate(45deg); }
.faq-a { display:none; padding:0 0 1.25rem; color:#888; font-size:0.95rem; line-height:1.7; }
.faq-a.open { display:block; }

/* SAME DAY BADGE */
.same-day-badge { display:inline-flex; align-items:center; gap:0.5rem; background:var(--accent); color:#fff; font-size:0.85rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:0.5rem 1.2rem; margin-top:0.75rem; }

/* FINANCE CARDS */
.finance-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }
.finance-card { background:var(--grey); border:1px solid #2a2a2a; padding:2rem; transition:border-color .2s,transform .2s; }
.finance-card:hover { border-color:var(--yellow); transform:translateY(-4px); }
.finance-card h3 { font-size:1.1rem; font-weight:800; color:var(--yellow); text-transform:uppercase; letter-spacing:1px; margin-bottom:0.75rem; }
.finance-card p { color:#888; font-size:0.9rem; line-height:1.7; }
.finance-badge { display:inline-block; background:var(--yellow); color:var(--black); font-size:0.7rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:0.25rem 0.75rem; margin-bottom:1rem; }

/* FOOTER */
footer { background:#0a0a0a; border-top:3px solid var(--yellow); padding:3rem 4vw 2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:2rem; }
.footer-brand .nav-name { display:block; margin-bottom:0.75rem; }
.footer-brand p { color:#555; font-size:0.85rem; line-height:1.7; max-width:260px; }
.footer-col h4 { font-size:0.7rem; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--yellow); margin-bottom:1rem; }
.footer-col a { display:block; color:#555; font-size:0.85rem; margin-bottom:0.5rem; transition:color .2s; }
.footer-col a:hover { color:var(--yellow); }
.footer-bottom { border-top:1px solid #222; padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { color:#444; font-size:0.8rem; }

/* RESPONSIVE */
@media(max-width:768px) {
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:flex; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .promise { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .step-arrow { display:none; }
}
@media(max-width:480px) {
  .footer-grid { grid-template-columns:1fr; }
}
