@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#050607;--panel:#0d1013;--text:#f7f8f9;--muted:#92999f;--line:rgba(255,255,255,.09);--red:#ed1c24;--gold:#ffbd16;--max:1280px}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;overflow-x:hidden} a{color:inherit;text-decoration:none}
.container{width:min(var(--max),calc(100% - 56px));margin:auto}
.header{height:74px;position:fixed;z-index:100;inset:0 0 auto;background:rgba(3,4,5,.20);backdrop-filter:blur(14px);}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:30px} .brand img{display:block;width:174px}
.menu{display:flex;align-items:center;gap:34px;font-size:11px;font-weight:700;letter-spacing:.05em} .menu>a:not(.navphone){color:#d5d9dc} .menu>a:hover{color:white}
.navphone{display:flex;align-items:center;gap:10px;padding-left:24px;border-left:1px solid rgba(237,28,36,.8);font-size:15px;letter-spacing:0} .navphone svg{width:18px;stroke:#fff}

.hero{min-height:760px;position:relative;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background:
linear-gradient(90deg,rgba(2,3,4,.97) 0%,rgba(2,3,4,.90) 27%,rgba(2,3,4,.50) 52%,rgba(2,3,4,.08) 78%),
linear-gradient(0deg,rgba(2,3,4,.68),transparent 48%),
url('assets/hero.png') 64% center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:150px;background:linear-gradient(transparent,#050607)}
.hero-content{position:relative;z-index:2;padding-top:65px;max-width:670px}
.kicker{display:flex;align-items:center;gap:14px;color:#c7cbd0;font-size:10px;letter-spacing:.22em} .kicker::before{content:"";width:30px;height:2px;background:var(--red)}
.hero h1{font-family:Manrope,sans-serif;font-size:clamp(53px,5.5vw,82px);line-height:.91;letter-spacing:-.055em;margin:26px 0 22px} .hero .strong{font-weight:800} .hero .light{font-weight:400;color:#e0e2e4}
.hero-copy{font-size:17px;line-height:1.55;color:#c1c6ca} .cta{display:inline-flex;align-items:center;gap:24px;margin-top:27px;padding:16px 22px;background:var(--red);border-radius:4px;font-size:11px;font-weight:800;transition:.25s} .cta:hover{transform:translateY(-2px);background:#ff2630}
.hero-note{position:absolute;z-index:3;right:max(28px,calc((100vw - var(--max))/2));bottom:66px;border-left:2px solid var(--red);padding-left:18px;font-size:10px;line-height:1.9;letter-spacing:.12em;color:#d4d8db} .hero-note b{color:#fff}

.section{padding:76px 0;border-bottom:1px solid var(--line)} .sectionhead{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:28px} .label{color:var(--red);font-size:10px;font-weight:800;letter-spacing:.15em} .section h2{font-family:Manrope,sans-serif;font-size:40px;letter-spacing:-.04em;margin:6px 0 0} .textlink{font-size:11px;color:#d9dcde;border-bottom:1px solid #5f6569;padding-bottom:5px}
.cartrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 54px)/4);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 8px} .cartrack::-webkit-scrollbar{display:none}
.car{scroll-snap-align:start;background:linear-gradient(180deg,#111518,#090b0c);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:.25s} .car:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.car-media{aspect-ratio:1.5;background:#15191c;overflow:hidden} .car-media img{width:100%;height:100%;object-fit:cover;display:block} .car-body{padding:17px} .car-name{font-size:17px;margin:0;font-weight:800} .car-version{font-size:10px;color:#8f979d;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .specs{display:flex;gap:7px;flex-wrap:wrap;font-size:10px;color:#aeb4b8;margin-top:12px} .specs span+span::before{content:"•";color:#4e555a;margin-right:7px} .price{color:var(--red);font-family:Manrope;font-size:21px;font-weight:800;margin:12px 0 14px} .car-button{display:flex;justify-content:space-between;padding:10px 12px;border:1px solid #596167;border-radius:5px;font-size:9px;font-weight:800}
.carousel-controls{display:flex;justify-content:flex-end;gap:9px;margin-top:16px} .arrow{width:42px;height:42px;border:1px solid #353b40;border-radius:50%;background:#080a0b;color:white;font-size:19px;cursor:pointer}

.reviews-layout{display:grid;grid-template-columns:300px 1fr;gap:44px} .rating{font-family:Manrope;font-size:43px;font-weight:800;letter-spacing:-.045em;margin:6px 0} .stars{color:var(--gold);font-size:23px;letter-spacing:2px} .review-meta{font-size:13px;line-height:1.6;color:#a3aaaf;margin:13px 0 22px} .review-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .review-card{background:#0d1114;border:1px solid var(--line);border-radius:9px;padding:18px;min-height:175px} .review-head{display:flex;align-items:center;gap:10px} .avatar{width:36px;height:36px;border-radius:50%;background:#252a2e;display:grid;place-items:center;font-weight:700} .review-name{font-size:12px;font-weight:700} .review-time{font-size:9px;color:#7f878d;margin-top:3px} .review-stars{color:var(--gold);font-size:12px;letter-spacing:2px;margin:13px 0 9px} .review-copy{font-size:12px;line-height:1.55;color:#d2d6d8;margin:0}

.appointment{border-bottom:1px solid var(--line)} .appointment-card{min-height:410px;display:grid;grid-template-columns:55% 45%} .appointment-visual{min-height:410px;background:linear-gradient(90deg,transparent 0%,rgba(5,6,7,.1) 60%,#070809 100%),url('assets/appointment.png') center/cover no-repeat} .appointment-copy{display:flex;flex-direction:column;justify-content:center;padding:56px 60px;background:radial-gradient(circle at 100% 0%,rgba(237,28,36,.09),transparent 32%),#070809} .appointment-copy h2{font-family:Manrope;font-size:38px;line-height:1.08;letter-spacing:-.04em;margin:9px 0 15px} .appointment-copy p{font-size:13px;line-height:1.7;color:#aab1b6;margin:0;max-width:540px} .call-pill{margin-top:24px;display:flex;align-items:center;gap:13px;width:max-content;font-family:Manrope;font-size:22px;font-weight:800} .call-pill::before{content:"☎";color:var(--red);font-size:25px}

.contact-section{padding:60px 0 48px;border-bottom:1px solid var(--line)} .contact-line{display:grid;grid-template-columns:240px 1.2fr .75fr .9fr;align-items:center;gap:24px} .contact-title h2{font-family:Manrope;font-size:26px;margin:6px 0 0} .contact-item{border-left:1px solid #343a3f;padding-left:22px} .contact-item small{display:block;color:#747c82;font-size:9px;letter-spacing:.1em;margin-bottom:5px} .contact-item a,.contact-item strong{font-size:13px} .socials{display:flex;gap:10px;margin-top:13px} .socials a{font-size:10px;color:#c4c9cc;border-bottom:1px solid #555b5f;padding-bottom:3px}
.footer{padding:22px 0 46px} .footer-inner{display:flex;justify-content:space-between;gap:30px;align-items:center;font-size:9px;color:#6f777d} .footer-links{display:flex;gap:20px;color:#9da4a9} .mobilebar{display:none}

@media(max-width:900px){.menu>a:not(.navphone){display:none}.cartrack{grid-auto-columns:48%}.reviews-layout{grid-template-columns:1fr}.review-cards{grid-template-columns:repeat(2,1fr)}.appointment-card{grid-template-columns:48% 52%}.contact-line{grid-template-columns:1fr 1fr}}
@media(max-width:650px){
.container{width:calc(100% - 28px)} .header{height:64px} .brand img{width:145px} .navphone{font-size:0;border:0;padding:0} .navphone svg{width:23px}
.hero{min-height:720px;align-items:flex-end;padding-bottom:88px} .hero::before{background:linear-gradient(0deg,rgba(2,3,4,.99) 0%,rgba(2,3,4,.91) 42%,rgba(2,3,4,.30) 74%,rgba(2,3,4,.08)),url('assets/hero.png') 67% 35%/auto 62% no-repeat,#030405} .hero-content{padding-top:0} .hero h1{font-size:46px} .hero-copy{font-size:14px} .hero-note{display:none}
.section{padding:56px 0} .sectionhead{display:block} .section h2{font-size:32px} .textlink{display:inline-block;margin-top:14px} .cartrack{grid-auto-columns:86%} .carousel-controls{justify-content:center}
.review-cards{grid-template-columns:1fr} .review-card:nth-child(n+3){display:none}
.appointment-card{display:block} .appointment-visual{min-height:270px;background:linear-gradient(0deg,#070809 0%,transparent 45%),url('assets/appointment.png') center/cover no-repeat} .appointment-copy{padding:38px 24px 48px} .appointment-copy h2{font-size:31px}
.contact-line{grid-template-columns:1fr;gap:0} .contact-item{border-left:0;border-top:1px solid #2c3236;padding:17px 0} .footer-inner{display:block;line-height:1.8} .footer-links{margin-top:10px;flex-wrap:wrap}
.mobilebar{display:grid;grid-template-columns:1fr 1fr;position:fixed;z-index:120;left:0;right:0;bottom:0;background:#090b0d;border-top:1px solid #2a3034} .mobilebar a{text-align:center;padding:14px;font-size:10px;font-weight:800} .mobilebar a:first-child{background:var(--red)}
}

.menuToggle{display:none;width:34px;height:34px;padding:8px 5px;border:0;background:transparent;cursor:pointer}.menuToggle span{display:block;height:1.5px;background:#fff;margin:6px 0;transition:.25s}.mobileMenu{display:none}
@media(max-width:650px){
body.menu-open{overflow:hidden}.header{height:64px;background: rgba(3, 4, 5, .20);
    backdrop-filter: blur(14px);}.nav{gap:12px}.brand img{width:132px}.menu{gap:13px}.menu>a:not(.navphone){display:none}
.navphone{padding:0!important;margin:0!important;border:0!important;gap:0!important;font-size:0!important}.navphone .phoneNumber{display:none}.phoneGlyph{font-size:21px;color:#fff;line-height:1}
.menuToggle{display:block}.mobileMenu{display:block;position:fixed;z-index:95;left:0;right:0;top:64px;height:calc(100dvh - 64px);background:rgba(5,6,7,.985);transform:translateX(100%);transition:transform .28s ease;pointer-events:none}
.mobileMenu.open{transform:translateX(0);pointer-events:auto}.mobileMenuInner{padding:36px 22px}.mobileMenuInner>a{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.10);font-family:Manrope,sans-serif;font-size:21px;font-weight:700}
.mobileMenuInner>a span{color:#ed1c24}.mobileMenuInner .mobileMenuPhone{justify-content:flex-start;border:0;font-size:18px;margin-top:24px}.mobileMenuInner .mobileMenuPhone:before{content:"☎";color:#ed1c24;margin-right:12px}
.menuToggle.active span:first-child{transform:translateY(3.8px) rotate(45deg)}.menuToggle.active span:last-child{transform:translateY(-3.8px) rotate(-45deg)}
.hero{min-height:620px;padding-bottom:54px}.hero::before{background:linear-gradient(0deg,rgba(2,3,4,.98) 0%,rgba(2,3,4,.82) 40%,rgba(2,3,4,.12) 76%),url('assets/hero.png') 68% center/cover no-repeat}
.hero h1{font-size:42px;line-height:.94;margin:20px 0 18px}.kicker{font-size:8px;letter-spacing:.16em}.section{padding:48px 0}.cartrack{grid-auto-columns:84%}.reviews-layout{gap:28px}
.appointment-visual{min-height:245px;background:linear-gradient(0deg,#070809 0%,transparent 48%),url('assets/appointment.png') center/cover no-repeat}.contact-section{padding:44px 0}
}
/* === V3 exact phone icon + final generated hero/appointment images === */
.phone-icon{
    width:18px;
    height:18px;
    display:block;
    object-fit:contain;
    flex:0 0 auto;
}
.navphone .phone-icon{
    width:18px;
    height:18px;
}
.call-pill::before{
    content:none !important;
    display:none !important;
}
.call-pill{
    display:inline-flex;
    align-items:center;
    gap:12px;
}
.call-pill .appointment-phone-icon{
    width:23px;
    height:23px;
}
.mobileMenuInner .mobileMenuPhone::before{
    content:none !important;
    display:none !important;
}
.mobileMenuPhone{
    display:flex !important;
    align-items:center !important;
    gap:12px;
}
.mobileMenuPhone .mobile-menu-phone-icon{
    width:22px;
    height:22px;
}
@media(max-width:650px){
    .navphone .phone-icon{
        width:22px;
        height:22px;
    }
}
.phone-icon {
    filter: invert(18%) sepia(99%) saturate(5687%) hue-rotate(351deg) brightness(99%) contrast(91%);
}
@media (max-width: 650px) {
    .mobileMenuInner > a span {
        color: #fff;
    }
}