/* =====================================================================
   KIA SERVICE — Premium Automotive Design System
   Pure HTML5 / CSS3 / Vanilla JS
   Theme: Luxury · Dark · Black / White / Red · Glassmorphism
   ===================================================================== */

/* ---------- Design Tokens ---------- */
:root{
    --black:#050506;
    --bg:#08080b;
    --bg-soft:#0e0e13;
    --bg-card:#121218;
    --bg-glass:rgba(255,255,255,.045);
    --line:rgba(255,255,255,.09);
    --line-strong:rgba(255,255,255,.16);

    --white:#f6f6f8;
    --muted:#9b9ba7;
    --muted-2:#6f6f7c;

    --red:#e01933;
    --red-2:#ff2d4a;
    --red-dark:#a80f22;
    --red-glow:rgba(224,25,51,.45);

    --grad-red:linear-gradient(135deg,#ff2d4a 0%,#e01933 45%,#a80f22 100%);
    --grad-dark:linear-gradient(180deg,#0e0e13 0%,#08080b 100%);

    --shadow-soft:0 20px 60px rgba(0,0,0,.5);
    --shadow-red:0 18px 50px rgba(224,25,51,.35);

    --radius:22px;
    --radius-sm:14px;
    --maxw:1280px;

    --ease:cubic-bezier(.16,1,.3,1);
    --font:'Manrope','Montserrat',system-ui,-apple-system,sans-serif;
    --display:'Sora','Manrope',system-ui,sans-serif;
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--white);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    cursor:none;
}
@media (max-width:900px){body{cursor:auto}}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--red);color:#fff}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#0a0a0d}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--red),var(--red-dark));border-radius:10px}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
section{position:relative;padding:clamp(80px,10vw,140px) 0}
.accent{color:var(--red)}
.grad-text{
    background:var(--grad-red);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
}

.eyebrow{
    display:inline-flex;align-items:center;gap:9px;
    font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
    color:var(--red);margin-bottom:18px;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--red)}

.section-head{max-width:720px;margin:0 auto clamp(48px,6vw,80px);text-align:center}
.section-head .eyebrow{justify-content:center}
.section-head h2{
    font-family:var(--display);
    font-size:clamp(30px,5vw,54px);
    font-weight:800;line-height:1.08;letter-spacing:-1px;
}
.section-head p{color:var(--muted);margin-top:16px;font-size:clamp(15px,2vw,18px)}

/* ---------- Custom Cursor ---------- */
.cursor-dot,.cursor-ring{
    position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
    transform:translate(-50%,-50%);border-radius:50%;
}
.cursor-dot{width:7px;height:7px;background:var(--red)}
.cursor-ring{
    width:38px;height:38px;border:1.5px solid rgba(255,255,255,.4);
    transition:width .25s var(--ease),height .25s var(--ease),border-color .25s,background .25s;
}
.cursor-ring.hover{width:60px;height:60px;border-color:var(--red);background:rgba(224,25,51,.12)}
@media (max-width:900px){.cursor-dot,.cursor-ring{display:none}}

/* ---------- Animated Background ---------- */
.bg-fx{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg)}
.bg-fx .orb{
    position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
    animation:float 18s ease-in-out infinite;
}
.bg-fx .orb.r{width:520px;height:520px;background:radial-gradient(circle,rgba(224,25,51,.5),transparent 70%);top:-120px;right:-80px}
.bg-fx .orb.w{width:420px;height:420px;background:radial-gradient(circle,rgba(120,120,160,.25),transparent 70%);bottom:-100px;left:-60px;animation-delay:-6s}
.bg-fx .orb.r2{width:360px;height:360px;background:radial-gradient(circle,rgba(224,25,51,.28),transparent 70%);top:45%;left:40%;animation-delay:-11s}
.bg-fx .grid-lines{
    position:absolute;inset:0;opacity:.35;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:60px 60px;
    -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%);
            mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%);
}
#particles{position:fixed;inset:0;z-index:-1;pointer-events:none}
@keyframes float{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(40px,-30px) scale(1.1)}
}

/* ---------- Buttons ---------- */
.btn{
    position:relative;display:inline-flex;align-items:center;gap:10px;
    padding:15px 30px;border-radius:50px;font-weight:700;font-size:15px;
    letter-spacing:.3px;transition:.35s var(--ease);overflow:hidden;
    white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--grad-red);color:#fff;box-shadow:var(--shadow-red)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 24px 60px rgba(224,25,51,.5)}
.btn-primary::after{
    content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);
    transform:translateX(-120%);transition:.6s var(--ease);
}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-glass{background:var(--bg-glass);border:1px solid var(--line-strong);backdrop-filter:blur(12px)}
.btn-glass:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.btn-ghost{border:1.5px solid var(--line-strong)}
.btn-ghost:hover{background:#fff;color:#000}
.btn-wa{background:#25d366;color:#04240f}
.btn-wa:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(37,211,102,.35)}
.btn-tg{background:#2aabee;color:#04283a}
.btn-tg:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(42,171,238,.35)}

/* ---------- Header ---------- */
header{
    position:fixed;inset:0 0 auto 0;z-index:1000;
    display:flex;align-items:center;justify-content:space-between;
    padding:20px clamp(20px,4vw,50px);transition:.4s var(--ease);
}
header.scrolled{
    background:rgba(8,8,11,.7);backdrop-filter:blur(18px) saturate(140%);
    border-bottom:1px solid var(--line);padding-top:13px;padding-bottom:13px;
}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;letter-spacing:1px}
.brand .mark{
    width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
    background:var(--grad-red);box-shadow:var(--shadow-red);font-size:18px;font-weight:900;color:#fff;
}
.brand .txt{font-size:20px;line-height:1}
.brand .txt small{display:block;font-size:10px;letter-spacing:4px;color:var(--muted);font-weight:600}

.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:15px;font-weight:600;color:var(--white);position:relative;transition:.25s}
.nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--red);transition:.3s var(--ease)}
.nav a:hover::after{width:100%}
.nav a:hover{color:#fff}
.header-cta{display:flex;align-items:center;gap:14px}

.burger{display:none;flex-direction:column;gap:6px;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--line)}
.burger span{width:22px;height:2px;background:#fff;transition:.3s var(--ease)}
.burger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:1080px){
    .nav{
        position:fixed;inset:0 0 0 auto;width:min(80vw,340px);flex-direction:column;
        justify-content:center;gap:28px;padding:60px 40px;
        background:rgba(10,10,14,.97);backdrop-filter:blur(20px);border-left:1px solid var(--line);
        transform:translateX(100%);transition:.45s var(--ease);z-index:999;
    }
    .nav.open{transform:translateX(0)}
    .nav a{font-size:20px}
    .burger{display:flex}
    .header-cta .btn-primary{display:none}
}

/* ---------- Hero ---------- */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:120px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;width:100%}
.hero-badge{
    display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:50px;
    background:var(--bg-glass);border:1px solid var(--line);backdrop-filter:blur(10px);
    font-size:13px;color:var(--muted);margin-bottom:26px;
}
.hero-badge .pulse{width:9px;height:9px;border-radius:50%;background:#28c76f;box-shadow:0 0 0 0 rgba(40,199,111,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(40,199,111,.6)}70%{box-shadow:0 0 0 12px rgba(40,199,111,0)}100%{box-shadow:0 0 0 0 rgba(40,199,111,0)}}

.hero h1{
    font-family:var(--display);
    font-size:clamp(44px,7.5vw,96px);font-weight:800;line-height:1.02;letter-spacing:-2px;
    margin-bottom:22px;
}
.hero h1 .line{display:block;overflow:hidden}
.hero p.lead{font-size:clamp(16px,2vw,20px);color:var(--muted);max-width:520px;margin-bottom:36px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px}
.hero-mini{display:flex;gap:30px;flex-wrap:wrap}
.hero-mini .m b{font-family:var(--display);font-size:26px;font-weight:800}
.hero-mini .m span{color:var(--muted);font-size:13px}

.hero-visual{position:relative;height:520px;display:grid;place-items:center}
.hero-logo{
    position:relative;width:min(100%,420px);aspect-ratio:1;border-radius:50%;
    display:grid;place-items:center;
    background:radial-gradient(circle at 50% 40%,rgba(224,25,51,.22),transparent 60%);
}
.hero-logo .ring{position:absolute;border:1px solid var(--line);border-radius:50%;inset:0}
.hero-logo .ring.r2{inset:40px;border-color:var(--line-strong);animation:spin 24s linear infinite}
.hero-logo .ring.r3{inset:80px;border-style:dashed;animation:spin 34s linear infinite reverse}
.hero-logo .kia{
    font-family:var(--display);font-size:clamp(60px,11vw,120px);font-weight:900;letter-spacing:-4px;
    background:linear-gradient(180deg,#fff,#9b9ba7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    text-shadow:0 0 60px rgba(255,255,255,.1);
}
.hero-logo .kia small{display:block;text-align:center;font-size:15px;letter-spacing:10px;color:var(--red);-webkit-text-fill-color:var(--red)}
@keyframes spin{to{transform:rotate(360deg)}}
.floating-chip{
    position:absolute;padding:12px 16px;border-radius:14px;background:var(--bg-glass);
    border:1px solid var(--line);backdrop-filter:blur(12px);font-size:13px;font-weight:600;
    box-shadow:var(--shadow-soft);animation:floaty 5s ease-in-out infinite;
}
.floating-chip small{display:block;color:var(--muted);font-weight:500;font-size:11px}
.floating-chip.c1{top:8%;left:-4%}
.floating-chip.c2{bottom:12%;right:-6%;animation-delay:-2s}
.floating-chip.c3{bottom:36%;left:-8%;animation-delay:-3.5s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.scroll-ind{
    position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:12px;letter-spacing:2px;
}
.scroll-ind .mouse{width:24px;height:38px;border:2px solid var(--line-strong);border-radius:14px;position:relative}
.scroll-ind .mouse::after{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:4px;height:8px;background:var(--red);border-radius:3px;animation:scroll 1.6s infinite}
@keyframes scroll{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}

@media(max-width:960px){
    .hero-grid{grid-template-columns:1fr;text-align:center}
    .hero-actions,.hero-mini{justify-content:center}
    .hero p.lead{margin-left:auto;margin-right:auto}
    .hero-visual{height:420px;margin-top:10px}
    .floating-chip.c1{left:2%}.floating-chip.c2{right:2%}.floating-chip.c3{display:none}
}

/* ---------- Marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;background:var(--bg-soft)}
.marquee-track{display:flex;gap:60px;white-space:nowrap;animation:marq 22s linear infinite;width:max-content}
.marquee-track span{font-family:var(--display);font-size:22px;font-weight:800;color:var(--muted-2);display:inline-flex;align-items:center;gap:60px}
.marquee-track span::after{content:"◆";color:var(--red);font-size:12px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(46px);transition:.9s var(--ease)}
.reveal.show{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}
.reveal-l{opacity:0;transform:translateX(-50px);transition:.9s var(--ease)}
.reveal-l.show{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(50px);transition:.9s var(--ease)}
.reveal-r.show{opacity:1;transform:none}
.reveal-s{opacity:0;transform:scale(.9);transition:.9s var(--ease)}
.reveal-s.show{opacity:1;transform:none}

/* ---------- Glass card base ---------- */
.glass{
    background:var(--bg-glass);border:1px solid var(--line);border-radius:var(--radius);
    backdrop-filter:blur(14px);position:relative;overflow:hidden;
}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
    background:linear-gradient(140deg,rgba(255,255,255,.25),transparent 40%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;pointer-events:none}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-visual{position:relative;border-radius:var(--radius);overflow:hidden;min-height:460px;
    background:
      radial-gradient(circle at 30% 20%,rgba(224,25,51,.3),transparent 55%),
      linear-gradient(160deg,#16161d,#0b0b0f);
    border:1px solid var(--line);display:grid;place-items:center}
.about-visual .car-silhouette{width:80%;opacity:.9;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
.about-visual .exp-badge{
    position:absolute;bottom:26px;left:26px;background:var(--grad-red);
    padding:20px 26px;border-radius:18px;box-shadow:var(--shadow-red);
}
.about-visual .exp-badge b{font-family:var(--display);font-size:40px;line-height:1;display:block}
.about-visual .exp-badge span{font-size:13px}
.about-text h2{font-family:var(--display);font-size:clamp(28px,4vw,44px);font-weight:800;line-height:1.1;margin-bottom:20px;letter-spacing:-.5px}
.about-text p{color:var(--muted);margin-bottom:16px}
.about-feats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0 30px}
.about-feats .f{display:flex;gap:12px;align-items:flex-start}
.about-feats .f .ic{flex-shrink:0;width:40px;height:40px;border-radius:11px;background:rgba(224,25,51,.12);display:grid;place-items:center;color:var(--red)}
.about-feats .f b{font-size:15px}
.about-feats .f span{display:block;color:var(--muted);font-size:13px}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:36px}.about-feats{grid-template-columns:1fr}}

/* ---------- Stats / Counters ---------- */
.stats{background:var(--bg-soft)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{padding:38px 26px;text-align:center;border-radius:var(--radius);background:var(--bg-glass);border:1px solid var(--line);transition:.4s var(--ease)}
.stat:hover{transform:translateY(-8px);border-color:var(--red)}
.stat .num{font-family:var(--display);font-size:clamp(38px,5vw,58px);font-weight:800;line-height:1}
.stat .num span{color:var(--red)}
.stat p{color:var(--muted);margin-top:8px;font-weight:600}
@media(max-width:760px){.stats-grid{grid-template-columns:1fr 1fr;gap:16px}}

/* ---------- Why Choose ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why-card{padding:34px 30px;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--line);transition:.4s var(--ease)}
.why-card:hover{transform:translateY(-10px);border-color:rgba(224,25,51,.5);box-shadow:var(--shadow-soft)}
.why-card .ic{width:60px;height:60px;border-radius:16px;background:var(--grad-red);display:grid;place-items:center;margin-bottom:22px;box-shadow:var(--shadow-red)}
.why-card .ic svg{width:28px;height:28px;stroke:#fff}
.why-card h3{font-size:20px;margin-bottom:10px}
.why-card p{color:var(--muted);font-size:15px}
@media(max-width:900px){.why-grid{grid-template-columns:1fr}}

/* ---------- Services ---------- */
.svc-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.chip{padding:10px 20px;border-radius:50px;border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--muted);transition:.3s var(--ease)}
.chip:hover{color:#fff;border-color:var(--line-strong)}
.chip.active{background:var(--grad-red);color:#fff;border-color:transparent}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.svc-card{
    position:relative;padding:30px 28px;border-radius:var(--radius);
    background:var(--bg-card);border:1px solid var(--line);overflow:hidden;
    transition:.4s var(--ease);
}
.svc-card::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(224,25,51,.14),transparent 45%);opacity:0;transition:.4s}
.svc-card:hover{transform:translateY(-8px);border-color:rgba(224,25,51,.5)}
.svc-card:hover::before{opacity:1}
.svc-card .ic{width:56px;height:56px;border-radius:14px;background:rgba(224,25,51,.1);display:grid;place-items:center;margin-bottom:20px;color:var(--red);transition:.4s var(--ease)}
.svc-card:hover .ic{background:var(--grad-red);color:#fff;transform:rotate(-6deg) scale(1.05)}
.svc-card .ic svg{width:26px;height:26px}
.svc-card h3{font-size:18px;margin-bottom:8px}
.svc-card p{color:var(--muted);font-size:14px}
.svc-card .go{position:absolute;top:26px;right:26px;opacity:0;transform:translateX(-6px);transition:.4s var(--ease);color:var(--red)}
.svc-card:hover .go{opacity:1;transform:none}

/* ---------- Advantages / Equipment ---------- */
.adv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.adv{display:flex;gap:14px;align-items:center;padding:22px;border-radius:var(--radius-sm);background:var(--bg-glass);border:1px solid var(--line);transition:.35s var(--ease)}
.adv:hover{transform:translateY(-5px);border-color:var(--red)}
.adv .ic{flex-shrink:0;width:46px;height:46px;border-radius:12px;background:rgba(224,25,51,.12);display:grid;place-items:center;color:var(--red)}
.adv b{font-size:15px;display:block}
.adv span{color:var(--muted);font-size:13px}

/* ---------- Before / After ---------- */
.ba-wrap{max-width:900px;margin:0 auto}
.ba{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line);user-select:none}
.ba .layer{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:30px}
.ba .before{background:linear-gradient(160deg,#2a2a30,#141418)}
.ba .after{background:linear-gradient(160deg,#3a0d15,#e01933);clip-path:inset(0 0 0 50%)}
.ba .label{position:absolute;top:16px;padding:6px 14px;border-radius:50px;background:rgba(0,0,0,.5);font-size:12px;letter-spacing:2px;font-weight:700}
.ba .label.l{left:16px}.ba .label.r{right:16px}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--red);cursor:ew-resize;box-shadow:0 0 20px var(--red-glow)}
.ba .handle .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--grad-red);display:grid;place-items:center;box-shadow:var(--shadow-red)}

/* ---------- Gallery ---------- */
.gal-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px}
.masonry{columns:3;column-gap:18px}
@media(max-width:900px){.masonry{columns:2}}
@media(max-width:560px){.masonry{columns:1}}
.gal-item{break-inside:avoid;margin-bottom:18px;position:relative;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;border:1px solid var(--line);transition:.4s var(--ease)}
.gal-item:hover{transform:scale(.985);border-color:var(--red)}
.gal-item .ph{aspect-ratio:var(--ar,4/3);position:relative;overflow:hidden}
.gal-item .ph img{width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)}
.gal-item:hover .ph img{transform:scale(1.1)}
.gal-item .ov{position:absolute;inset:auto 0 0 0;padding:40px 18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.85));transform:translateY(8px);opacity:0;transition:.4s var(--ease)}
.gal-item:hover .ov{transform:none;opacity:1}
.gal-item .ov span{color:var(--red);font-size:11px;font-weight:700;letter-spacing:2px}
.gal-item .ov h4{font-size:16px}
.gal-item.hide{display:none}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:3000;background:rgba(3,3,5,.94);backdrop-filter:blur(10px);display:none;place-items:center;padding:30px}
.lightbox.open{display:grid}
.lightbox img,.lightbox .lb-media{max-width:90vw;max-height:82vh;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.lightbox .lb-cap{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:14px}
.lb-close,.lb-prev,.lb-next{position:absolute;background:var(--bg-glass);border:1px solid var(--line);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:22px;transition:.3s;backdrop-filter:blur(8px)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--red);border-color:var(--red)}
.lb-close{top:26px;right:26px}
.lb-prev{left:26px;top:50%;transform:translateY(-50%)}
.lb-next{right:26px;top:50%;transform:translateY(-50%)}

/* ---------- Video ---------- */
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.vid-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);cursor:pointer;aspect-ratio:16/9;background:linear-gradient(160deg,#1a1a20,#0c0c10)}
.vid-card .thumb{position:absolute;inset:0;object-fit:cover}
.vid-card .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:var(--grad-red);display:grid;place-items:center;box-shadow:var(--shadow-red);transition:.4s var(--ease)}
.vid-card:hover .play{transform:translate(-50%,-50%) scale(1.12)}
.vid-card .play svg{width:26px;height:26px;fill:#fff;margin-left:3px}
.vid-card .meta{position:absolute;inset:auto 0 0 0;padding:40px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.vid-card .meta h4{font-size:17px}
.vid-card .meta span{color:var(--muted);font-size:13px}

/* ---------- Work Process Timeline ---------- */
.timeline{position:relative;max-width:900px;margin:0 auto}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(var(--red),transparent);transform:translateX(-50%)}
.tl-step{position:relative;width:50%;padding:20px 40px;margin-bottom:14px}
.tl-step:nth-child(odd){left:0;text-align:right}
.tl-step:nth-child(even){left:50%}
.tl-step .dot{position:absolute;top:28px;width:20px;height:20px;border-radius:50%;background:var(--grad-red);box-shadow:0 0 0 6px rgba(224,25,51,.15),var(--shadow-red)}
.tl-step:nth-child(odd) .dot{right:-10px}
.tl-step:nth-child(even) .dot{left:-10px}
.tl-step .card{padding:24px;border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--line);transition:.4s var(--ease)}
.tl-step .card:hover{border-color:var(--red);transform:translateY(-4px)}
.tl-step .n{font-family:var(--display);color:var(--red);font-weight:800;font-size:14px;letter-spacing:2px}
.tl-step h4{font-size:19px;margin:6px 0}
.tl-step p{color:var(--muted);font-size:14px}
@media(max-width:760px){
    .timeline::before{left:18px}
    .tl-step{width:100%;left:0!important;text-align:left!important;padding-left:52px;padding-right:0}
    .tl-step .dot{left:8px!important;right:auto!important}
}

/* ---------- Specialists ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.member{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg-card);transition:.4s var(--ease)}
.member:hover{transform:translateY(-8px);border-color:var(--red);box-shadow:var(--shadow-soft)}
.member .avatar{aspect-ratio:1;position:relative;display:grid;place-items:center;
    background:radial-gradient(circle at 50% 30%,rgba(224,25,51,.3),transparent 60%),linear-gradient(160deg,#1a1a20,#0c0c10);overflow:hidden}
.member .avatar .init{font-family:var(--display);font-size:64px;font-weight:900;color:rgba(255,255,255,.9)}
.member .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.member .info{padding:22px}
.member .info h4{font-size:18px}
.member .info .role{color:var(--red);font-size:13px;font-weight:700;margin-bottom:8px}
.member .info p{color:var(--muted);font-size:13px}
.member .info .exp{margin-top:12px;display:inline-block;padding:5px 12px;border-radius:50px;background:rgba(224,25,51,.12);color:var(--red);font-size:12px;font-weight:700}

/* ---------- Reviews Slider ---------- */
.reviews{background:var(--bg-soft)}
.slider{position:relative;max-width:1000px;margin:0 auto;overflow:hidden}
.slides{display:flex;transition:.6s var(--ease)}
.slide{min-width:100%;padding:10px}
.review-card{padding:44px;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--line);text-align:center}
.review-card .stars{color:#ffc531;font-size:20px;letter-spacing:3px;margin-bottom:18px}
.review-card p{font-size:clamp(16px,2vw,21px);line-height:1.6;margin-bottom:26px}
.review-card .who{display:flex;align-items:center;justify-content:center;gap:14px}
.review-card .who .av{width:50px;height:50px;border-radius:50%;background:var(--grad-red);display:grid;place-items:center;font-weight:800;overflow:hidden;flex:none}
.review-card .who .av img{width:100%;height:100%;object-fit:cover}
.review-card .who b{display:block}
.review-card .who span{color:var(--muted);font-size:13px}
.slider-nav{display:flex;justify-content:center;gap:14px;margin-top:26px}
.slider-nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:.3s}
.slider-nav button:hover{background:var(--red);border-color:var(--red)}
.dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);cursor:pointer;transition:.3s}
.dots i.active{width:26px;border-radius:8px;background:var(--red)}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-card);overflow:hidden;transition:.3s}
.faq-item.open{border-color:var(--red)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;font-size:17px;font-weight:700;text-align:left}
.faq-q .ic{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:.4s var(--ease)}
.faq-item.open .faq-q .ic{background:var(--red);border-color:var(--red);transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-a p{padding:0 26px 24px;color:var(--muted)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.c-card{padding:24px;border-radius:var(--radius-sm);background:var(--bg-glass);border:1px solid var(--line);transition:.35s var(--ease)}
.c-card:hover{transform:translateY(-5px);border-color:var(--red)}
.c-card .ic{width:46px;height:46px;border-radius:12px;background:rgba(224,25,51,.12);display:grid;place-items:center;color:var(--red);margin-bottom:14px}
.c-card b{display:block;font-size:15px}
.c-card a,.c-card span{color:var(--muted);font-size:14px}
.map-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:380px}
.map-wrap iframe{width:100%;height:100%;min-height:380px;border:0;filter:grayscale(.3) invert(.9) hue-rotate(180deg)}
.socials{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.socials a{width:46px;height:46px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;transition:.3s var(--ease)}
.socials a:hover{background:var(--red);border-color:var(--red);transform:translateY(-4px)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px;font-weight:600}
.field input,.field select,.field textarea{
    width:100%;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.04);
    border:1px solid var(--line);color:#fff;font-family:inherit;font-size:15px;transition:.3s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);background:rgba(224,25,51,.06)}
.field textarea{resize:vertical;min-height:90px}
.field select option{background:#14141a}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.two-col{grid-template-columns:1fr}}

/* ---------- Modal ---------- */
.modal-back{position:fixed;inset:0;z-index:2500;background:rgba(3,3,5,.8);backdrop-filter:blur(8px);display:none;place-items:center;padding:20px;overflow-y:auto}
.modal-back.open{display:grid}
.modal{width:100%;max-width:560px;border-radius:var(--radius);background:linear-gradient(160deg,#14141b,#0c0c11);border:1px solid var(--line-strong);box-shadow:var(--shadow-soft);animation:pop .5s var(--ease)}
.modal-lg{max-width:620px}
@keyframes pop{from{transform:translateY(30px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:26px 28px 14px}
.modal-head h3{font-family:var(--display);font-size:24px}
.modal-head p{color:var(--muted);font-size:14px}
.modal-close{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:20px;transition:.3s}
.modal-close:hover{background:var(--red);border-color:var(--red)}
.modal-body{padding:6px 28px 28px}
.modal-note{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);margin-top:8px}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,80px);z-index:4000;padding:14px 24px;border-radius:50px;background:#12331d;border:1px solid #1f7a3d;color:#7dffa8;font-weight:600;opacity:0;transition:.5s var(--ease)}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ---------- Floating actions ---------- */
.fab{position:fixed;right:22px;bottom:22px;z-index:900;display:flex;flex-direction:column;gap:12px}
.fab a{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--shadow-soft);transition:.3s var(--ease)}
.fab a:hover{transform:scale(1.1)}
.fab .wa{background:#25d366}
.fab .tg{background:#2aabee}
.fab .call{background:var(--grad-red);animation:pulse-red 2.4s infinite}
.fab a svg{width:26px;height:26px}
@keyframes pulse-red{0%{box-shadow:0 0 0 0 var(--red-glow)}70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- Footer ---------- */
footer{background:var(--black);border-top:1px solid var(--line);padding:70px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:50px}
.foot-grid h4{font-size:16px;margin-bottom:18px}
.foot-grid p,.foot-grid a{color:var(--muted);font-size:14px;display:block;margin-bottom:10px;transition:.25s}
.foot-grid a:hover{color:var(--red);padding-left:4px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line);color:var(--muted-2);font-size:13px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding-top:180px;padding-bottom:60px;text-align:center}
.page-hero h1{font-family:var(--display);font-size:clamp(36px,6vw,68px);font-weight:800;letter-spacing:-1.5px}
.page-hero .crumb{color:var(--muted);margin-top:12px;font-size:14px}
.page-hero .crumb a:hover{color:var(--red)}

/* ---------- Parts store ---------- */
.parts-layout{display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:start}
.parts-side{position:sticky;top:100px;padding:26px;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--line)}
.parts-side h4{font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:20px 0 12px}
.parts-side h4:first-child{margin-top:0}
.filter-list li{margin-bottom:4px}
.filter-list button{width:100%;text-align:left;padding:9px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--muted);transition:.25s}
.filter-list button:hover{color:#fff;background:rgba(255,255,255,.04)}
.filter-list button.active{background:var(--grad-red);color:#fff}
.parts-search{display:flex;gap:10px;margin-bottom:24px}
.parts-search input{flex:1}
.parts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.part-card{border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);background:var(--bg-card);transition:.4s var(--ease);display:flex;flex-direction:column}
.part-card:hover{transform:translateY(-8px);border-color:var(--red);box-shadow:var(--shadow-soft)}
.part-card .pimg{aspect-ratio:4/3;position:relative;overflow:hidden;background:linear-gradient(160deg,#1a1a20,#0c0c10);display:grid;place-items:center}
.part-card .pimg img{width:100%;height:100%;object-fit:cover}
.part-card .tag{position:absolute;top:10px;left:10px;padding:5px 11px;border-radius:50px;font-size:11px;font-weight:700;letter-spacing:.5px}
.tag.orig{background:var(--grad-red)}
.tag.oem{background:#2aabee;color:#04283a}
.tag.used{background:#3a3a44}
.part-card .stock{position:absolute;top:10px;right:10px;padding:5px 11px;border-radius:50px;font-size:11px;font-weight:700;background:rgba(0,0,0,.5)}
.part-card .stock.in{color:#7dffa8}
.part-card .stock.out{color:#ff8a8a}
.part-card .pbody{padding:18px;display:flex;flex-direction:column;flex:1}
.part-card .code{color:var(--muted-2);font-size:12px;letter-spacing:1px;margin-bottom:6px}
.part-card h4{font-size:16px;margin-bottom:6px}
.part-card .pdesc{color:var(--muted);font-size:13px;margin-bottom:14px;flex:1}
.part-card .prow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.part-card .price{font-family:var(--display);font-size:22px;font-weight:800}
.part-card .price span{font-size:13px;color:var(--muted);font-weight:600}
.part-card .order-btn{padding:11px 18px;border-radius:50px;background:var(--grad-red);font-weight:700;font-size:13px;transition:.3s}
.part-card .order-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-red)}
.part-card .order-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.parts-empty{grid-column:1/-1;text-align:center;padding:60px;color:var(--muted)}
@media(max-width:860px){.parts-layout{grid-template-columns:1fr}.parts-side{position:static}}

/* ---------- Utilities ---------- */
.text-center{text-align:center}
.mt-40{margin-top:40px}
.hidden{display:none!important}

/* =====================================================================
   PREMIUM ADD-ONS — preloader, theme, selector, tools, cases, blog,
   comparison, bottom-nav, booking success, light theme
   ===================================================================== */

/* ---------- Preloader ---------- */
#preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--black);transition:opacity .6s var(--ease),visibility .6s}
#preloader.done{opacity:0;visibility:hidden}
#preloader .pl-logo{position:relative;width:80px;height:80px;display:grid;place-items:center;margin-bottom:16px}
#preloader .pl-k{font-family:var(--display);font-size:38px;font-weight:900;background:var(--grad-red);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#preloader .pl-ring{position:absolute;inset:0;border:3px solid rgba(255,255,255,.08);border-top-color:var(--red);border-radius:50%;animation:spin 1s linear infinite}
#preloader .pl-text{font-family:var(--display);font-weight:800;letter-spacing:5px;font-size:14px;color:var(--muted)}

/* ---------- Theme toggle ---------- */
.theme-toggle{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;color:var(--white);transition:.3s}
.theme-toggle:hover{border-color:var(--red);color:var(--red)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .ic-sun{display:none}
html.light .theme-toggle .ic-sun{display:block}
html.light .theme-toggle .ic-moon{display:none}

/* ---------- Smart Vehicle Selector ---------- */
.selector-box{max-width:1000px;margin:0 auto;padding:34px}
.selector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
@media(max-width:760px){.selector-grid{grid-template-columns:1fr 1fr}}
.vs-result{margin-top:22px}
.vs-card{padding:28px;border-radius:var(--radius)}
.vs-badge{display:inline-block;padding:5px 14px;border-radius:50px;background:rgba(224,25,51,.14);color:var(--red);font-size:12px;font-weight:700;letter-spacing:1px;margin-bottom:12px}
.vs-card h3{font-family:var(--display);font-size:24px;margin-bottom:8px}
.vs-card p{color:var(--muted);margin-bottom:14px}
.vs-car{display:inline-block;padding:8px 16px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-weight:700;margin-bottom:18px}
.vs-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Tools: calculator + VIN ---------- */
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:860px){.tools-grid{grid-template-columns:1fr}}
.tool-card{padding:34px}
.tool-card h3{font-family:var(--display);font-size:24px;margin:6px 0 8px}
.tool-sub{color:var(--muted);font-size:14px;margin-bottom:20px}
.calc-out{margin-top:18px}
.calc-label{color:var(--muted);font-size:13px;letter-spacing:1px;text-transform:uppercase}
.calc-price{font-family:var(--display);font-size:clamp(28px,4vw,42px);font-weight:800;margin:6px 0 4px}
.calc-price small{font-size:18px;color:var(--muted)}
.calc-note{color:var(--muted-2);font-size:13px;margin-bottom:16px}
.vin-out{margin-top:18px}
.vin-msg{padding:16px 18px;border-radius:14px;font-size:14px;line-height:1.6}
.vin-msg.ok{background:rgba(40,199,111,.1);border:1px solid rgba(40,199,111,.3)}
.vin-msg.err{background:rgba(224,25,51,.1);border:1px solid rgba(224,25,51,.3);color:#ff9a9a}
.vin-msg .btn{display:inline-flex}

/* ---------- Case Studies ---------- */
.cases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:24px}
.case-card{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg-card);transition:.4s var(--ease);display:flex;flex-direction:column}
.case-card:hover{transform:translateY(-8px);border-color:rgba(224,25,51,.5);box-shadow:var(--shadow-soft)}
.case-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.case-img img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease)}
.case-card:hover .case-img img{transform:scale(1.07)}
.case-tag{position:absolute;top:12px;left:12px;padding:5px 12px;border-radius:50px;background:var(--grad-red);font-size:11px;font-weight:700;letter-spacing:1px}
.case-body{padding:24px;display:flex;flex-direction:column;gap:10px}
.case-body h3{font-family:var(--display);font-size:20px}
.case-body h3 span{color:var(--red);font-size:15px}
.case-row b{color:var(--white);font-size:13px}
.case-row p{color:var(--muted);font-size:13px;margin-top:2px}
.case-result{margin-top:6px;padding:12px 14px;border-radius:12px;background:rgba(40,199,111,.1);border:1px solid rgba(40,199,111,.25);color:#8fffb6;font-size:13px;font-weight:600}

/* ---------- Blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.blog-card{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg-card);transition:.4s var(--ease);display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-8px);border-color:rgba(224,25,51,.5);box-shadow:var(--shadow-soft)}
.blog-img{position:relative;aspect-ratio:16/9;overflow:hidden}
.blog-img img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease)}
.blog-card:hover .blog-img img{transform:scale(1.07)}
.blog-tag{position:absolute;top:12px;left:12px;padding:5px 12px;border-radius:50px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);font-size:11px;font-weight:700;letter-spacing:1px;color:var(--red)}
.blog-body{padding:22px;display:flex;flex-direction:column;flex:1}
.blog-date{color:var(--muted-2);font-size:12px;letter-spacing:1px}
.blog-body h3{font-family:var(--display);font-size:19px;margin:8px 0 10px;line-height:1.25}
.blog-body p{color:var(--muted);font-size:14px;flex:1}
.blog-more{margin-top:14px;align-self:flex-start;color:var(--red);font-weight:700;font-size:14px;transition:.25s}
.blog-more:hover{letter-spacing:.3px}

/* ---------- Comparison table ---------- */
.compare{max-width:1000px;margin:0 auto;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.cmp-row{display:grid;grid-template-columns:1.1fr 1fr 1.3fr;border-bottom:1px solid var(--line)}
.cmp-row:last-child{border-bottom:none}
.cmp-c{padding:16px 20px;font-size:14px;display:flex;align-items:center}
.cmp-head{background:var(--bg-soft)}
.cmp-head .cmp-c{font-weight:700;font-size:13px;letter-spacing:.5px}
.cmp-c.ord{color:var(--muted);background:rgba(255,255,255,.01)}
.cmp-c.us{color:#fff;font-weight:600;background:rgba(224,25,51,.07)}
.cmp-head .cmp-c.us{color:var(--red)}
@media(max-width:640px){.cmp-c{padding:12px 12px;font-size:12.5px}}

/* ---------- Booking success ---------- */
.book-success{text-align:center;padding:26px 6px}
.book-success .bs-icon{width:70px;height:70px;border-radius:50%;background:var(--grad-red);display:grid;place-items:center;font-size:34px;margin:0 auto 18px;box-shadow:var(--shadow-red);animation:pop .5s var(--ease)}
.book-success h3{font-family:var(--display);font-size:22px;margin-bottom:10px}
.book-success p{color:var(--muted);margin-bottom:22px}

/* ---------- Mobile bottom nav ---------- */
.bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:950;background:rgba(10,10,14,.92);backdrop-filter:blur(18px);border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom,0));justify-content:space-around;align-items:center}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:10px;font-weight:600;padding:6px 8px;transition:.25s}
.bottom-nav a svg{width:22px;height:22px}
.bottom-nav a.active{color:var(--red)}
.bottom-nav .bn-cta{background:var(--grad-red);color:#fff;border-radius:14px;padding:8px 14px;margin-top:-22px;box-shadow:var(--shadow-red)}
.bottom-nav .bn-cta svg{width:24px;height:24px}
@media(max-width:760px){
    .bottom-nav{display:flex}
    .fab{bottom:78px}
    body{padding-bottom:64px}
}

/* ---------- Light theme ---------- */
html.light{
    --black:#ececef;--bg:#f5f5f8;--bg-soft:#ececf1;--bg-card:#ffffff;
    --bg-glass:rgba(0,0,0,.025);--line:rgba(0,0,0,.1);--line-strong:rgba(0,0,0,.18);
    --white:#15151b;--muted:#5c5c68;--muted-2:#8a8a95;
}
html.light body{cursor:auto}
html.light header.scrolled{background:rgba(245,245,248,.8);border-bottom:1px solid var(--line)}
html.light .nav{background:rgba(245,245,248,.98)}
html.light .burger span{background:#15151b}
html.light .bg-fx .orb{opacity:.28}
html.light .bg-fx .grid-lines{opacity:.5}
html.light .btn-ghost:hover{background:#15151b;color:#fff}
html.light .marquee-track span{color:#c9c9d0}
html.light .bottom-nav{background:rgba(255,255,255,.95)}
html.light .cursor-dot,html.light .cursor-ring{display:none}