/* ════════════════════════════════════════════
   AutoGarage Landing — Galaxy × Auto Service
   ════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --space-dark:   #060b17;
    --space-mid:    #0d1b2e;
    --space-card:   rgba(255,255,255,0.04);
    --space-border: rgba(255,255,255,0.08);
    --gold:         #f59e0b;
    --gold-light:   #fbbf24;
    --gold-dim:     rgba(245,158,11,0.15);
    --indigo:       #818cf8;
    --cyan:         #22d3ee;
    --text-primary: #f1f5f9;
    --text-muted:   #94a3b8;
    --success:      #10b981;
    --danger:       #ef4444;
}
body { font-family:'Vazirmatn',Tahoma,Arial,sans-serif; background:var(--space-dark); color:var(--text-primary); overflow-x:hidden; line-height:1.7; }

/* ═══ CANVAS / NEBULAS ═══ */
#galaxyCanvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.nebula-1 { position:fixed; width:800px; height:800px; border-radius:50%; background:radial-gradient(ellipse,rgba(99,102,241,.12) 0%,transparent 70%); top:-200px; right:-200px; pointer-events:none; z-index:0; }
.nebula-2 { position:fixed; width:600px; height:600px; border-radius:50%; background:radial-gradient(ellipse,rgba(236,72,153,.08) 0%,transparent 70%); bottom:-100px; left:-100px; pointer-events:none; z-index:0; }
.nebula-3 { position:fixed; width:500px; height:500px; border-radius:50%; background:radial-gradient(ellipse,rgba(6,182,212,.07) 0%,transparent 70%); top:50%; left:30%; pointer-events:none; z-index:0; }

/* ═══ NAVBAR ═══ */
.landing-nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:1rem 0; transition:background .4s,box-shadow .4s,padding .4s; }
.landing-nav.scrolled { background:rgba(6,11,23,.95); backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--space-border); padding:.6rem 0; }
.nav-logo { font-size:1.5rem; font-weight:800; background:linear-gradient(135deg,var(--gold),var(--indigo)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-decoration:none; }
.nav-link-custom { color:var(--text-muted); text-decoration:none; font-size:.9rem; font-weight:500; padding:.4rem 1rem; border-radius:8px; transition:color .25s,background .25s; }
.nav-link-custom:hover { color:var(--text-primary); background:var(--space-card); }
.nav-btn { background:linear-gradient(135deg,var(--gold),#d97706); color:#000; font-weight:700; border:none; border-radius:30px; padding:.5rem 1.5rem; font-size:.9rem; cursor:pointer; transition:transform .2s,box-shadow .2s; text-decoration:none; }
.nav-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(245,158,11,.4); color:#000; }

/* ═══ HERO ═══ */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; padding:8rem 0 4rem; z-index:1; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 70% 40%,rgba(99,102,241,.15) 0%,transparent 70%),radial-gradient(ellipse 50% 60% at 20% 60%,rgba(245,158,11,.08) 0%,transparent 60%); }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3); border-radius:30px; padding:.4rem 1.2rem; font-size:.8rem; font-weight:600; color:var(--gold); margin-bottom:1.5rem; }
.hero-badge .dot { width:8px; height:8px; background:var(--gold); border-radius:50%; animation:pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
.hero-title { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:900; line-height:1.2; margin-bottom:1.5rem; }
.hero-title .line { display:block; }
.hero-title .accent { background:linear-gradient(135deg,var(--gold),var(--gold-light)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-subtitle { font-size:1.1rem; color:var(--text-muted); max-width:500px; margin-bottom:2rem; line-height:1.9; }
.hero-mini-stats { display:flex; gap:1.5rem; margin-bottom:2.5rem; }
.hero-mini-stat-num { font-size:1.4rem; font-weight:900; color:var(--gold); display:block; }
.hero-mini-stat-lbl { font-size:.72rem; color:var(--text-muted); }
.hero-buttons { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-gold { background:linear-gradient(135deg,var(--gold),#d97706); color:#000; font-weight:800; border:none; border-radius:50px; padding:.85rem 2.5rem; font-size:1rem; cursor:pointer; transition:transform .2s,box-shadow .3s; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; }
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(245,158,11,.45); color:#000; }
.btn-outline-light-custom { background:transparent; color:var(--text-primary); font-weight:600; border:1px solid var(--space-border); border-radius:50px; padding:.85rem 2.5rem; font-size:1rem; cursor:pointer; transition:all .25s; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; }
.btn-outline-light-custom:hover { border-color:var(--indigo); color:var(--indigo); background:rgba(129,140,248,.08); }

/* ═══ HERO CAR VISUAL ═══ */
.hero-car-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}
.hero-car-svg {
    width: 100%;
    max-width: 600px;
    height: auto;
    filter:
        drop-shadow(0 0 32px rgba(245,158,11,0.28))
        drop-shadow(0 0 80px rgba(245,158,11,0.10))
        drop-shadow(0 30px 50px rgba(0,0,0,0.55));
    will-change: transform;
}
/* Wheel rotation */
.wheel-group {
    transform-box: fill-box;
    transform-origin: center;
    animation: wheel-spin 3s linear infinite;
}
@keyframes wheel-spin { to { transform: rotate(360deg); } }

/* Headlight glow pulse */
.hl-glow {
    animation: hl-pulse 2.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes hl-pulse { 0%,100%{opacity:.15} 50%{opacity:.55} }

/* Scan line sweep */
.scan-line-anim {
    animation: scan-sweep 3.5s ease-in-out infinite;
    transform-box: fill-box;
}
@keyframes scan-sweep {
    0%   { transform:translateY(-70px); opacity:0; }
    12%  { opacity:0.7; }
    88%  { opacity:0.7; }
    100% { transform:translateY(70px); opacity:0; }
}

/* ═══ NAVBAR AVATAR PILL ═══ */
.nav-avatar-pill {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.22);
    border-radius: 30px;
    padding: .3rem .9rem .3rem .35rem;
    text-decoration: none;
    transition: background .25s, border-color .25s;
}
.nav-avatar-pill:hover {
    background: rgba(245,158,11,0.14);
    border-color: rgba(245,158,11,0.4);
}
.nav-avatar-ring {
    position: relative;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #f59e0b, #818cf8, #22d3ee, #f59e0b);
    animation: nav-av-spin 4s linear infinite;
    display: flex; align-items: center; justify-content: center;
}
@keyframes nav-av-spin { to { transform: rotate(360deg); } }
.nav-avatar-inner {
    position: absolute;
    inset: 2.5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #b45309);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 900; color: #000;
}
.nav-avatar-name {
    font-size: .82rem;
    font-weight: 700;
    color: var(--gold);
}

/* Floating service badge pills on car */
.car-badge-pill {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .4rem;
    border-radius: 20px;
    padding: .35rem .9rem;
    font-size: .72rem;
    font-weight: 700;
    backdrop-filter: blur(12px);
    border: 1px solid;
    white-space: nowrap;
}
.car-badge-pill.gold  { background:rgba(245,158,11,.1);  border-color:rgba(245,158,11,.35);  color:var(--gold);    top:8%;  right:0; animation:cbp-float 5s ease-in-out infinite; }
.car-badge-pill.cyan  { background:rgba(34,211,238,.1);  border-color:rgba(34,211,238,.35);  color:var(--cyan);    bottom:18%; left:0; animation:cbp-float 6s ease-in-out infinite .8s; }
.car-badge-pill.green { background:rgba(16,185,129,.1);  border-color:rgba(16,185,129,.35);  color:var(--success); bottom:2%; right:5%; animation:cbp-float 4.5s ease-in-out infinite 1.6s; }
@keyframes cbp-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* Ground glow under car */
.car-ground-glow {
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 30px;
    background: radial-gradient(ellipse, rgba(245,158,11,.18) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(8px);
}

/* Tech rings behind car */
.car-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid;
    animation: ring-rotate 12s linear infinite;
}
.car-ring-1 { width:280px; height:280px; top:50%; left:50%; transform:translate(-50%,-50%); border-color:rgba(245,158,11,.08); animation-duration:18s; }
.car-ring-2 { width:380px; height:380px; top:50%; left:50%; transform:translate(-50%,-50%); border-color:rgba(129,140,248,.06); animation-duration:25s; animation-direction:reverse; }
.car-ring-3 { width:480px; height:480px; top:50%; left:50%; transform:translate(-50%,-50%); border-color:rgba(34,211,238,.04); animation-duration:35s; }
@keyframes ring-rotate { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* ═══ SECTIONS ═══ */
section { position:relative; z-index:1; }
.section-title { font-size:clamp(1.8rem,4vw,2.5rem); font-weight:800; margin-bottom:1rem; }
.section-subtitle { color:var(--text-muted); font-size:1rem; max-width:520px; margin:0 auto 3rem; line-height:1.9; }
.section-badge { display:inline-block; background:rgba(129,140,248,.12); border:1px solid rgba(129,140,248,.3); color:var(--indigo); border-radius:30px; padding:.3rem 1.2rem; font-size:.8rem; font-weight:600; margin-bottom:1rem; }

/* ═══ SERVICES ═══ */
.services-section { padding:6rem 0; }
.service-card { background:var(--space-card); border:1px solid var(--space-border); border-radius:20px; padding:2rem; text-align:center; transition:border-color .3s,transform .3s,box-shadow .3s; height:100%; position:relative; overflow:hidden; }
.service-card::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(245,158,11,.06),transparent 70%); opacity:0; transition:opacity .3s; }
.service-card:hover { border-color:rgba(245,158,11,.4); transform:translateY(-8px); box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 0 1px rgba(245,158,11,.12); }
.service-card:hover::after { opacity:1; }
.service-icon-wrap { width:72px; height:72px; border-radius:20px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:1.2rem; position:relative; transition:transform .3s; }
.service-card:hover .service-icon-wrap { transform:scale(1.12) rotate(-4deg); }
.svc-svg { width:38px; height:38px; }
.service-card h3 { font-size:1rem; font-weight:700; margin-bottom:.6rem; }
.service-card p  { font-size:.85rem; color:var(--text-muted); line-height:1.8; margin:0; }
.icon-oil    { background:rgba(245,158,11,.12); }
.icon-filter { background:rgba(34,211,238,.12); }
.icon-brake  { background:rgba(239,68,68,.12); }
.icon-wheel  { background:rgba(129,140,248,.12); }
.icon-wash   { background:rgba(6,182,212,.12); }
.icon-check  { background:rgba(16,185,129,.12); }

/* SVG icon hover animations */
.svc-svg-oil   { transform-origin:bottom center; transition:transform .3s; }
.service-card:hover .svc-svg-oil   { animation:oil-drip .8s ease-in-out forwards; }
.svc-svg-filter { transform-origin:center; }
.service-card:hover .svc-svg-filter { animation:spin360 .7s ease-out forwards; }
.svc-svg-brake  { transform-origin:center; }
.service-card:hover .svc-svg-brake  { animation:spin360 .8s ease-out forwards; }
.svc-svg-wheel  { transform-origin:center; }
.service-card:hover .svc-svg-wheel  { animation:spin360 .9s linear forwards; }
.svc-svg-wash   { transform-origin:center; }
.service-card:hover .svc-svg-wash   { animation:shake-h .5s ease-in-out; }
.svc-svg-check  { transform-origin:center; }
.service-card:hover .svc-svg-check  { animation:pulse-scale .6s ease-in-out; }
@keyframes oil-drip    { 0%{transform:translateY(0)} 40%{transform:translateY(6px)} 70%{transform:translateY(-3px)} 100%{transform:translateY(0)} }
@keyframes spin360     { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes shake-h     { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@keyframes pulse-scale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

/* ═══ STATS ═══ */
.stats-section { padding:5rem 0; background:linear-gradient(180deg,transparent,rgba(129,140,248,.04),transparent); border-top:1px solid var(--space-border); border-bottom:1px solid var(--space-border); }
.stat-item { text-align:center; padding:1.5rem; }
.stat-number { font-size:clamp(2.5rem,5vw,4rem); font-weight:900; background:linear-gradient(135deg,var(--gold),var(--gold-light)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block; line-height:1; margin-bottom:.4rem; }
.stat-label { font-size:.9rem; color:var(--text-muted); font-weight:500; }

/* ═══ HOW IT WORKS ═══ */
.how-section { padding:6rem 0; }
.step-item { display:flex; gap:1.5rem; align-items:flex-start; padding:1.5rem 0; }
.step-number { min-width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--gold),#d97706); display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:900; color:#000; flex-shrink:0; box-shadow:0 8px 24px rgba(245,158,11,.3); }
.step-content h4 { font-size:1rem; font-weight:700; margin-bottom:.4rem; }
.step-content p  { font-size:.88rem; color:var(--text-muted); line-height:1.8; margin:0; }

/* Car journey visual (how it works right col) */
.car-journey { position:relative; height:280px; display:flex; align-items:center; justify-content:center; }
.garage-bg { position:absolute; inset:0; border:1px solid var(--space-border); border-radius:24px; background:linear-gradient(135deg,rgba(245,158,11,.03),rgba(129,140,248,.03)); overflow:hidden; }
.garage-road { position:absolute; bottom:20%; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.garage-road::before { content:''; position:absolute; top:10px; left:0; right:0; height:1px; background:repeating-linear-gradient(90deg,transparent,transparent 20px,rgba(245,158,11,.3) 20px,rgba(245,158,11,.3) 36px); }
.journey-step { display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:1rem; position:relative; z-index:1; }
.journey-icon { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.journey-icon.j-arrive  { background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.25); animation:j-bob 3s ease-in-out infinite; }
.journey-icon.j-service { background:rgba(129,140,248,.12); border:1px solid rgba(129,140,248,.25); animation:j-bob 3s ease-in-out infinite .5s; }
.journey-icon.j-leave   { background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.25); animation:j-bob 3s ease-in-out infinite 1s; }
.journey-label { font-size:.75rem; font-weight:600; color:var(--text-muted); }
.journey-arrow { color:var(--space-border); font-size:1.2rem; align-self:center; position:relative; z-index:1; }
@keyframes j-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.journey-mini-car { position:absolute; bottom:calc(20% + 6px); animation:drive-across 5s linear infinite; }
@keyframes drive-across { 0%{left:-10%;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{left:110%;opacity:0} }

/* ═══ APPOINTMENT ═══ */
.appt-section { padding:6rem 0; background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(99,102,241,.06) 0%,transparent 70%); }
.appt-card { background:var(--space-card); border:1px solid var(--space-border); border-radius:28px; padding:3rem; backdrop-filter:blur(20px); position:relative; overflow:hidden; max-width:680px; margin:0 auto; }
.appt-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--indigo),var(--gold),var(--cyan)); }
.steps-indicator { display:flex; align-items:center; justify-content:center; margin-bottom:2.5rem; }
.step-dot { width:36px; height:36px; border-radius:50%; border:2px solid var(--space-border); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:var(--text-muted); background:var(--space-dark); transition:all .4s; flex-shrink:0; z-index:1; }
.step-dot.active { border-color:var(--gold); background:var(--gold); color:#000; box-shadow:0 0 0 4px rgba(245,158,11,.2); }
.step-dot.done   { border-color:var(--success); background:var(--success); color:#fff; }
.step-line { flex:1; height:2px; background:var(--space-border); transition:background .4s; }
.step-line.active { background:var(--gold); }
.form-step { display:none; }
.form-step.active { display:block; animation:fadeInUp .4s ease; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.form-label-custom { font-size:.88rem; font-weight:600; color:var(--text-muted); margin-bottom:.5rem; display:block; }
.form-control-custom { background:rgba(255,255,255,.05); border:1px solid var(--space-border); border-radius:12px; color:var(--text-primary); padding:.85rem 1.2rem; font-size:.95rem; width:100%; font-family:inherit; outline:none; transition:border-color .25s,box-shadow .25s; direction:rtl; }
.form-control-custom:focus { border-color:var(--indigo); box-shadow:0 0 0 3px rgba(129,140,248,.15); background:rgba(255,255,255,.07); }
.form-control-custom::placeholder { color:var(--text-muted); }
.form-control-custom option { background:var(--space-mid); color:var(--text-primary); }
.otp-wrapper { display:flex; gap:.75rem; justify-content:center; margin:1.5rem 0; direction:ltr; }
.otp-box { width:52px; height:60px; background:rgba(255,255,255,.05); border:2px solid var(--space-border); border-radius:14px; text-align:center; font-size:1.5rem; font-weight:800; color:var(--text-primary); outline:none; transition:border-color .25s,box-shadow .25s,transform .2s; font-family:'Courier New',monospace; caret-color:transparent; }
.otp-box:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,158,11,.2); transform:scale(1.05); }
.otp-box.filled { border-color:var(--success); background:rgba(16,185,129,.08); color:var(--success); }
.btn-appt-primary { background:linear-gradient(135deg,var(--gold),#d97706); color:#000; font-weight:800; border:none; border-radius:14px; padding:.9rem 2rem; font-size:1rem; width:100%; cursor:pointer; transition:transform .2s,box-shadow .3s,opacity .2s; font-family:inherit; margin-top:1rem; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.btn-appt-primary:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 12px 32px rgba(245,158,11,.4); }
.btn-appt-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-appt-secondary { background:transparent; color:var(--text-muted); border:1px solid var(--space-border); border-radius:14px; padding:.9rem 2rem; font-size:.95rem; cursor:pointer; font-family:inherit; transition:all .25s; width:100%; margin-top:.6rem; }
.btn-appt-secondary:hover { border-color:var(--text-muted); color:var(--text-primary); }
.appt-alert { padding:.75rem 1.2rem; border-radius:10px; font-size:.88rem; font-weight:500; display:none; margin-top:.8rem; }
.appt-alert.show { display:block; animation:fadeInUp .3s ease; }
.appt-alert-error   { background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.25);  color:#fca5a5; }
.appt-alert-success { background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.25); color:#6ee7b7; }
.resend-row { text-align:center; margin-top:1rem; font-size:.85rem; color:var(--text-muted); }
.resend-link { color:var(--gold); cursor:pointer; text-decoration:underline; }
.success-screen { text-align:center; padding:1rem 0; }
.success-icon-wrap { width:90px; height:90px; background:rgba(16,185,129,.12); border:2px solid var(--success); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:2.5rem; color:var(--success); margin-bottom:1.5rem; animation:success-pop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes success-pop { from{transform:scale(.3);opacity:0} to{transform:scale(1);opacity:1} }
.success-screen h4 { font-size:1.3rem; font-weight:800; margin-bottom:.5rem; }
.success-screen p  { color:var(--text-muted); font-size:.9rem; margin-bottom:1.5rem; }
.time-slots { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.time-slot { padding:.4rem 1rem; border:1px solid var(--space-border); border-radius:8px; font-size:.85rem; cursor:pointer; transition:all .2s; color:var(--text-muted); background:transparent; font-family:inherit; }
.time-slot:hover,.time-slot.selected { border-color:var(--gold); color:var(--gold); background:rgba(245,158,11,.08); }


/* ═══ FOOTER ═══ */
.landing-footer { padding:3rem 0 2rem; border-top:1px solid var(--space-border); color:var(--text-muted); font-size:.85rem; }
.footer-logo { font-size:1.4rem; font-weight:800; background:linear-gradient(135deg,var(--gold),var(--indigo)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block; margin-bottom:.5rem; }

/* ═══ SPINNER ═══ */
.spinner { width:18px; height:18px; border:2px solid rgba(0,0,0,.2); border-top-color:#000; border-radius:50%; animation:spin .7s linear infinite; display:none; }
@keyframes spin { to{transform:rotate(360deg)} }
.loading .btn-text { display:none; }
.loading .spinner { display:inline-block; }

/* ═══ SCROLL INDICATOR ═══ */
.scroll-indicator { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--text-muted); font-size:.75rem; cursor:pointer; }
.scroll-mouse { width:24px; height:38px; border:2px solid var(--space-border); border-radius:12px; position:relative; }
.scroll-mouse::before { content:''; width:4px; height:8px; background:var(--gold); border-radius:2px; position:absolute; top:5px; left:50%; transform:translateX(-50%); animation:scroll-ball 2s ease-in-out infinite; }
@keyframes scroll-ball { 0%{top:5px;opacity:1} 80%{top:18px;opacity:.3} 100%{top:5px;opacity:1} }

@media(max-width:768px) {
    .hero { padding-top:6rem; }
    .appt-card { padding:2rem 1.5rem; }
    .hero-buttons { flex-direction:column; }
    .btn-gold,.btn-outline-light-custom { justify-content:center; width:100%; }
    .otp-box { width:44px; height:54px; font-size:1.3rem; }
    .car-ring-2,.car-ring-3 { display:none; }
.hero-mini-stats { gap:1rem; }
    .car-badge-pill { display:none; }
}