/* ===== CPG Custom Performance Garage — Къстъм Рефиниш ===== */
:root{
  --bg:#0b0d0f; --bg2:#12151a; --bg3:#1a1e24;
  --red:#e10600; --red-d:#b00500; --amber:#ffb800;
  --txt:#eef1f4; --mut:#9aa3ad; --line:rgba(255,255,255,.08);
  --hd:'Barlow Condensed',sans-serif; --bd:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--bd);background:var(--bg);color:var(--txt);line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--hd);text-transform:uppercase;letter-spacing:.02em;line-height:1.05;font-weight:800}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--hd);font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:.85rem;color:var(--red)}
.tag::before{content:'';width:34px;height:2px;background:var(--red)}
.sec{padding:100px 0;position:relative}
.sec-title{font-size:clamp(2.2rem,5vw,3.6rem);margin:14px 0 18px}
.sec-sub{color:var(--mut);max-width:640px;font-size:1.05rem}
/* carbon texture */
.carbon{background-image:radial-gradient(rgba(255,255,255,.028) 1px,transparent 1px);background-size:22px 22px}
/* ===== Header ===== */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;transition:.3s;padding:18px 0}
.hdr.on{background:rgba(11,13,15,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:10px 0}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:52px;width:auto}
.logo span{font-family:var(--hd);font-weight:800;text-transform:uppercase;font-size:1.3rem;letter-spacing:.04em}
.logo b{color:var(--red)}
nav.main{display:flex;gap:6px;align-items:center}
nav.main>a, .drop>a{padding:10px 14px;font-weight:600;font-size:.92rem;color:var(--txt);position:relative;display:block}
nav.main>a::after,.drop>a::after{content:'';position:absolute;left:14px;right:100%;bottom:4px;height:2px;background:var(--red);transition:right .3s}
nav.main>a:hover::after,.drop>a:hover::after{right:14px}
.drop{position:relative}
.dm{position:absolute;top:100%;left:0;min-width:300px;background:var(--bg2);border:1px solid var(--line);border-top:2px solid var(--red);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;padding:8px 0}
.drop:hover .dm{opacity:1;visibility:visible;transform:translateY(0)}
.dm a{display:block;padding:10px 18px;font-size:.9rem;color:var(--mut);transition:.2s}
.dm a:hover{color:#fff;background:rgba(225,6,0,.12);padding-left:24px}
.hdr-call{display:flex;align-items:center;gap:10px;background:var(--red);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);padding:11px 26px;font-family:var(--hd);font-weight:700;font-size:1.1rem;letter-spacing:.06em;transition:.25s}
.hdr-call:hover{background:var(--red-d)}
.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--line);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:20px;height:2px;background:#fff;transition:.3s}
/* ===== Hero ===== */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,10,12,.95) 30%,rgba(8,10,12,.55) 65%,rgba(8,10,12,.35)),linear-gradient(0deg,var(--bg) 0%,transparent 30%)}
.hero-in{position:relative;z-index:2;padding-top:120px;padding-bottom:80px}
.hero h1{font-size:clamp(3rem,9vw,6.5rem);max-width:900px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p{margin:22px 0 36px;font-size:clamp(1.05rem,2vw,1.3rem);color:#cfd6dd;max-width:560px}
.btns{display:flex;gap:16px;flex-wrap:wrap}
.btn{font-family:var(--hd);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1.15rem;padding:16px 38px;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:.25s;display:inline-flex;align-items:center;gap:10px}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-d);transform:translateY(-2px)}
.btn-ghost{border:2px solid rgba(255,255,255,.35);color:#fff;clip-path:none}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.hero-stripe{position:absolute;right:-60px;top:0;bottom:0;width:180px;background:repeating-linear-gradient(115deg,transparent 0 34px,rgba(225,6,0,.85) 34px 44px);opacity:.5;z-index:1}
/* ===== Stats strip ===== */
.stats{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateY(-1px)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:34px 20px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{font-family:var(--hd);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;color:#fff;display:block;line-height:1}
.stat b i{font-style:normal;color:var(--red)}
.stat span{color:var(--mut);font-size:.85rem;text-transform:uppercase;letter-spacing:.14em}
/* ===== Services grid ===== */
.sv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
.sv{position:relative;overflow:hidden;background:var(--bg3);border:1px solid var(--line);aspect-ratio:3/3.6;display:flex;align-items:flex-end;transition:.35s}
.sv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.6s;filter:saturate(.85)}
.sv::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,10,12,.96) 8%,rgba(8,10,12,.35) 55%,rgba(8,10,12,.15))}
.sv-body{position:relative;z-index:2;padding:24px;width:100%}
.sv-num{font-family:var(--hd);font-weight:800;color:var(--red);font-size:1rem;letter-spacing:.14em}
.sv h3{font-size:1.45rem;margin:6px 0 10px}
.sv-more{font-size:.82rem;text-transform:uppercase;letter-spacing:.16em;color:var(--mut);display:inline-flex;align-items:center;gap:8px;transition:.3s}
.sv-more svg{transition:.3s}
.sv:hover{border-color:rgba(225,6,0,.6);transform:translateY(-6px)}
.sv:hover img{transform:scale(1.07)}
.sv:hover .sv-more{color:var(--red)}
.sv:hover .sv-more svg{transform:translateX(5px)}
.sv-top{position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:.4s;z-index:3}
.sv:hover .sv-top{transform:scaleX(1)}
/* ===== About ===== */
.about{background:var(--bg2)}
.about-in{display:grid;grid-template-columns:1.05fr 1fr;gap:70px;align-items:center}
.about-img{position:relative}
.about-img img{width:100%;height:520px;object-fit:cover;clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),calc(100% - 48px) 100%,0 100%)}
.about-img::before{content:'';position:absolute;inset:-16px auto auto -16px;width:120px;height:120px;border-top:3px solid var(--red);border-left:3px solid var(--red)}
.about-badge{position:absolute;right:-14px;bottom:26px;background:var(--red);padding:20px 26px;font-family:var(--hd);text-transform:uppercase;font-weight:800;line-height:1.1;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.about-badge b{font-size:2.4rem;display:block}
.checks{margin-top:26px;display:grid;gap:14px}
.checks li{list-style:none;display:flex;gap:14px;align-items:flex-start;color:#d5dbe1}
.checks svg{flex:0 0 22px;margin-top:3px}
/* ===== Marquee ===== */
.marq{background:var(--red);overflow:hidden;padding:16px 0;transform:rotate(-1.2deg);margin:10px -20px}
.marq-in{display:flex;gap:48px;white-space:nowrap;animation:marq 26s linear infinite;font-family:var(--hd);font-weight:800;text-transform:uppercase;font-size:1.4rem;letter-spacing:.08em}
.marq-in span{display:flex;align-items:center;gap:48px}
@keyframes marq{to{transform:translateX(-50%)}}
/* ===== Steps ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:56px;counter-reset:st}
.step{background:var(--bg3);border:1px solid var(--line);padding:34px 26px;position:relative;counter-increment:st;transition:.3s}
.step::before{content:counter(st,decimal-leading-zero);font-family:var(--hd);font-weight:800;font-size:3.4rem;color:transparent;-webkit-text-stroke:1.5px rgba(225,6,0,.75);line-height:1;display:block;margin-bottom:14px}
.step h3{font-size:1.3rem;margin-bottom:10px}
.step p{color:var(--mut);font-size:.94rem}
.step:hover{border-color:rgba(225,6,0,.5);transform:translateY(-5px)}
/* ===== CTA band ===== */
.cta{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--red-d),var(--red));clip-path:polygon(0 0,100% 6%,100% 100%,0 94%);padding:110px 0}
.cta::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 60px,rgba(0,0,0,.08) 60px 74px)}
.cta-in{position:relative;z-index:2;text-align:center}
.cta h2{font-size:clamp(2rem,5vw,3.4rem);max-width:860px;margin:0 auto 30px}
.cta .btn{background:#0b0d0f;color:#fff}
.cta .btn:hover{background:#000;transform:translateY(-2px)}
/* ===== Contacts ===== */
.cont-in{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start}
.c-item{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.c-ic{flex:0 0 52px;height:52px;background:rgba(225,6,0,.12);border:1px solid rgba(225,6,0,.4);display:grid;place-items:center;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.c-item h4{font-size:1.15rem;letter-spacing:.06em;margin-bottom:4px}
.c-item a,.c-item p{color:var(--mut);transition:.2s}
.c-item a:hover{color:var(--red)}
.c-phone a{font-family:var(--hd);font-size:1.7rem;font-weight:800;color:#fff!important;display:block;line-height:1.25}
.c-phone a:hover{color:var(--red)!important}
.map{clip-path:polygon(0 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%);border:1px solid var(--line)}
.map iframe{width:100%;height:480px;display:block;filter:grayscale(1) invert(.92) contrast(.9)}
/* ===== Footer ===== */
footer{background:#07090b;border-top:1px solid var(--line);padding:56px 0 0}
.ft-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;padding-bottom:46px}
.ft-in p{color:var(--mut);font-size:.92rem;margin-top:16px;max-width:340px}
footer h4{font-size:1.1rem;letter-spacing:.1em;margin-bottom:18px;position:relative;padding-bottom:10px}
footer h4::after{content:'';position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--red)}
.ft-l{display:grid;gap:9px}
.ft-l a{color:var(--mut);font-size:.92rem;transition:.2s}
.ft-l a:hover{color:#fff;padding-left:6px}
.ft-bar{border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#68727c;font-size:.85rem}
.ft-bar a{color:#8b949d}
/* ===== Floating call (mobile) ===== */
.fab{position:fixed;right:18px;bottom:18px;z-index:120;width:60px;height:60px;border-radius:50%;background:var(--red);display:none;place-items:center;box-shadow:0 8px 28px rgba(225,6,0,.45);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(225,6,0,.5)}55%{box-shadow:0 0 0 16px rgba(225,6,0,0)}}
/* ===== Service page ===== */
.p-hero{min-height:56svh;display:flex;align-items:flex-end;position:relative;overflow:hidden;padding-bottom:60px}
.p-hero .hero-bg::after{background:linear-gradient(0deg,var(--bg) 4%,rgba(8,10,12,.65) 50%,rgba(8,10,12,.4))}
.p-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);position:relative;z-index:2;max-width:900px}
.crumbs{position:relative;z-index:2;color:var(--mut);font-size:.85rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px}
.crumbs a:hover{color:var(--red)}
.p-body{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:start}
.p-body .lead{font-size:1.15rem;color:#d5dbe1;margin-bottom:20px}
.p-body p{color:var(--mut);margin-bottom:16px}
.p-side{background:var(--bg3);border:1px solid var(--line);border-top:3px solid var(--red);padding:32px;position:sticky;top:100px}
.p-side h3{font-size:1.3rem;margin-bottom:16px}
.p-side .btn{width:100%;justify-content:center;margin-top:8px}
.p-side .c-phone a{font-size:1.5rem}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.gal img{width:100%;height:230px;object-fit:cover;border:1px solid var(--line);transition:.35s;filter:saturate(.85)}
.gal img:hover{transform:scale(1.03);border-color:rgba(225,6,0,.5);filter:saturate(1)}
/* ===== Responsive ===== */
@media(max-width:1020px){
  .sv-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .about-in,.cont-in,.p-body{grid-template-columns:1fr;gap:44px}
  .stats-in{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .p-side{position:static}
}
@media(max-width:760px){
  nav.main{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:var(--bg2);flex-direction:column;align-items:stretch;padding:90px 26px 30px;gap:2px;transform:translateX(100%);transition:.35s;z-index:99;overflow-y:auto;border-left:1px solid var(--line)}
  nav.main.open{transform:none}
  .dm{position:static;opacity:1;visibility:visible;transform:none;border:0;border-left:2px solid var(--red);margin:4px 0 8px 14px;display:none}
  .drop.open .dm{display:block}
  .burger{display:flex}
  .hdr-call{display:none}
  .fab{display:grid}
  .sec{padding:70px 0}
  .sv-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr 1fr}
  .gal img{height:160px}
  .about-img img{height:380px}
  .map iframe{height:360px}
  .ft-in{grid-template-columns:1fr}
  .hero-stripe{display:none}
}