/* =========================================================
   Auto Servis & Pjesë BEXHI — style.css
   Palette: asphalt black / graphite / signal yellow
   ========================================================= */

:root{
  --bg:#050505;
  --bg-2:#08090B;
  --panel:#0E0F12;
  --panel-2:#131418;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --white:#fff;
  --mute:#9096A1;
  --mute-2:#6B7079;
  --yellow:#FFD000;
  --yellow-2:#FFE566;
  --yellow-dim:rgba(255,208,0,.14);

  --shell:1280px;
  --pad:clamp(20px,4vw,44px);
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;

  --f-display:'Sora',system-ui,sans-serif;
  --f-body:'Manrope',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--white);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%; display:block}
[hidden]{display:none !important}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a,button,.btn,.qv,.gal__i{touch-action:manipulation; -webkit-tap-highlight-color:rgba(255,208,0,.18)}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:700; letter-spacing:-.03em; margin:0; line-height:1.06}
p{margin:0}
::selection{background:var(--yellow); color:#000}
:focus-visible{outline:2px solid var(--yellow); outline-offset:3px; border-radius:4px}

.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad)}
.mono{font-family:var(--f-mono)}
.ic{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.ic--lg{width:26px; height:26px; stroke-width:1.5}
.ic use[href="#i-tiktok"],.ic use[href="#i-facebook"],.ic use[href="#i-zap"]{fill:currentColor; stroke-width:1.2}
.skip-link{position:fixed; top:-100px; left:16px; z-index:200; background:var(--yellow); color:#000; padding:10px 16px; border-radius:8px}
.skip-link:focus{top:16px}

/* ---------- eyebrow / headings ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.24em;
  color:var(--mute); text-transform:uppercase; margin-bottom:22px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);box-shadow:0 0 14px 2px rgba(255,208,0,.7)}

.sect{position:relative; padding:clamp(80px,10vw,150px) 0}
.sect--alt{background:
  radial-gradient(90% 60% at 50% 0%, rgba(255,208,0,.045), transparent 60%),
  linear-gradient(180deg,#070709,#050505 70%)}
.sect--alt::before,.sect--alt::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.sect--alt::before{top:0} .sect--alt::after{bottom:0}

.sect__head{max-width:760px; margin-bottom:clamp(44px,6vw,72px)}
.sect__head--row{display:flex; gap:40px; justify-content:space-between; align-items:flex-end; max-width:none; flex-wrap:wrap}
.sect__h2{font-size:clamp(34px,5.4vw,64px); letter-spacing:-.045em}
.sect__h2 em{font-style:normal; color:var(--yellow)}
.sect__lead{margin-top:22px; color:var(--mute); font-size:clamp(15px,1.4vw,18px); max-width:60ch}
.sect__note{color:var(--mute); max-width:38ch; font-size:15px; padding-bottom:6px}

/* ---------- buttons ---------- */
.btn{
  --h:54px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--h); padding:0 24px; border-radius:100px;
  font-family:var(--f-body); font-weight:700; font-size:14.5px; letter-spacing:-.01em;
  transition:transform .35s var(--ease), background .3s, box-shadow .4s, border-color .3s;
  will-change:transform; white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sm{--h:44px; padding:0 18px; font-size:13.5px}
.btn--lg{--h:60px; padding:0 30px; font-size:15.5px}
.btn--yellow{background:var(--yellow); color:#0A0A0A; box-shadow:0 10px 34px -12px rgba(255,208,0,.75)}
.btn--yellow:hover{background:var(--yellow-2); box-shadow:0 18px 44px -12px rgba(255,208,0,.9)}
.btn--glass{
  background:rgba(255,255,255,.045); color:#fff;
  border:1px solid var(--line-2); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.btn--glass:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.3)}

/* =========================================================
   LOADER
   ========================================================= */
.loader{position:fixed; inset:0; z-index:300; background:#040404; display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s}
.loader.is-done{opacity:0; visibility:hidden}
.loader__inner{width:min(420px,72vw)}
.loader__mark{font-family:var(--f-display); font-weight:800; font-size:clamp(40px,8vw,64px); letter-spacing:-.05em; text-align:center}
.loader__mark span{color:var(--yellow)}
.loader__meta{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; color:var(--mute-2); margin:16px 0 10px}
.loader__bar{height:2px; background:rgba(255,255,255,.1); overflow:hidden}
.loader__bar i{display:block; height:100%; width:0%; background:var(--yellow); box-shadow:0 0 16px rgba(255,208,0,.8)}

/* =========================================================
   MOUSE GLOW
   ========================================================= */
.mouse-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%; pointer-events:none; z-index:1; opacity:0;
  background:radial-gradient(circle, rgba(255,208,0,.11), rgba(255,208,0,.03) 42%, transparent 68%);
  transition:opacity .5s; mix-blend-mode:screen;
}

/* =========================================================
   HEADER
   ========================================================= */
.hdr{position:fixed; top:0; left:0; right:0; z-index:120; transition:background .4s, border-color .4s, backdrop-filter .4s}
.hdr::after{content:""; position:absolute; inset:0; border-bottom:1px solid transparent; transition:border-color .4s; pointer-events:none}
.hdr.is-stuck{background:rgba(6,6,8,.72); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%)}
.hdr.is-stuck::after{border-bottom-color:var(--line)}
.hdr__row{display:flex; align-items:center; justify-content:space-between; gap:24px; height:84px; transition:height .4s var(--ease)}
.hdr.is-stuck .hdr__row{height:70px}

.brand{display:flex; flex-direction:column; line-height:1}
.brand__mark{font-family:var(--f-display); font-weight:800; font-size:24px; letter-spacing:-.05em}
.brand__mark span{color:var(--yellow)}
.brand__mark--lg{font-size:36px}
.brand__sub{font-family:var(--f-mono); font-size:8.5px; letter-spacing:.3em; color:var(--mute-2); margin-top:6px}

.nav{display:flex; gap:6px; align-items:center}
.nav__a{position:relative; padding:10px 14px; font-size:14px; font-weight:500; color:var(--mute); transition:color .3s}
.nav__a::after{content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.nav__a:hover{color:#fff}
.nav__a.is-active{color:#fff}
.nav__a.is-active::after,.nav__a:hover::after{transform:scaleX(1)}

.hdr__end{display:flex; align-items:center; gap:12px}
.burger{display:none; width:46px; height:46px; position:relative; z-index:2; border-radius:12px; border:1px solid var(--line-2); align-items:center; justify-content:center; background:rgba(255,255,255,.04)}

.mmenu{
  position:fixed; inset:0 0 0 0; z-index:115; background:rgba(5,5,6,.96);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  display:flex; flex-direction:column; justify-content:center; gap:8px; padding:0 var(--pad);
  opacity:0; transition:opacity .35s var(--ease);
}
.mmenu.is-open{opacity:1}
.mmenu nav{display:flex; flex-direction:column; gap:4px; margin-bottom:28px}
.mmenu a{font-family:var(--f-display); font-weight:700; font-size:clamp(30px,9vw,44px); letter-spacing:-.04em; padding:8px 0}
.mmenu .btn{align-self:flex-start}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; padding:120px 0 90px; overflow:hidden; isolation:isolate}
.hero__bg{position:absolute; inset:-6% 0 0; z-index:-2}
.hero__video{position:absolute; inset:0; width:100%; height:112%; object-fit:cover; opacity:.55;
  animation:slowZoom 26s ease-in-out infinite alternate; will-change:transform}
@keyframes slowZoom{from{transform:scale(1.02)} to{transform:scale(1.14)}}
.hero__veil{position:absolute; inset:0;
  background:linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,.65),rgba(0,0,0,.82)),
             radial-gradient(120% 80% at 15% 20%, rgba(255,208,0,.09), transparent 55%)}
.hero__canvas{position:absolute; inset:0; width:100%; height:100%}
.smoke{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; will-change:transform}
.smoke--1{width:56vw; height:46vw; left:-14vw; top:6vh; background:radial-gradient(circle,rgba(255,208,0,.13),transparent 65%); animation:drift1 24s ease-in-out infinite alternate}
.smoke--2{width:50vw; height:44vw; right:-12vw; bottom:-6vh; background:radial-gradient(circle,rgba(90,110,160,.16),transparent 65%); animation:drift2 30s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(9vw,5vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-8vw,-6vh,0) scale(1.2)}}
.beam{position:absolute; top:-30%; left:50%; width:52vw; height:150%; transform:translateX(-50%) rotate(14deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent); filter:blur(24px); animation:beam 14s ease-in-out infinite}
@keyframes beam{0%,100%{opacity:.25; transform:translateX(-70%) rotate(14deg)} 50%{opacity:.6; transform:translateX(-30%) rotate(14deg)}}
.grid-lines{position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 78%)}

.hero__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,64px); align-items:center; width:100%}
.hero__h1{font-size:clamp(34px,5.2vw,68px); font-weight:800; letter-spacing:-.055em; text-transform:uppercase}
.hero__h1 .line{display:block; overflow:hidden}
.hero__h1 .line--amp{color:var(--mute-2); font-size:.5em; padding:.06em 0}
.hero__h1 .line--brand{color:var(--yellow); text-shadow:0 0 60px rgba(255,208,0,.35)}
.hero__h1 .ch{display:inline-block; transform:translateY(105%); opacity:0}
.is-ready .hero__h1 .ch{animation:chIn .9s var(--ease) forwards; animation-delay:calc(var(--i)*.022s + .15s)}
@keyframes chIn{to{transform:translateY(0); opacity:1}}

.hero__sub{margin-top:26px; color:#B9BEC7; font-size:clamp(15px,1.5vw,18.5px); max-width:46ch}
.hero__cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:36px}
.trust{list-style:none; display:flex; flex-wrap:wrap; gap:10px 12px; padding:0; margin:38px 0 0}
.trust li{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#CFD3DA;
  padding:9px 15px; border-radius:100px; border:1px solid var(--line); background:rgba(255,255,255,.035);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.trust .ic{width:14px; height:14px; color:var(--yellow); stroke-width:2.6}

/* --- hero stage / floating car --- */
.hero__stage{position:relative; aspect-ratio:1/1; display:grid; place-items:center}
.stage__glow{position:absolute; width:62%; height:70%; border-radius:50%; filter:blur(70px);
  background:radial-gradient(circle,rgba(255,208,0,.28),rgba(255,208,0,.06) 45%,transparent 70%)}
.stage__car{position:relative; margin:0; width:56%; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2); background:var(--panel);
  box-shadow:0 60px 90px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08);
  animation:floatCar 9s ease-in-out infinite; will-change:transform}
@keyframes floatCar{0%,100%{transform:translateY(0) rotate(-2.4deg)} 50%{transform:translateY(-16px) rotate(2.4deg)}}
.stage__car img{width:100%; height:auto; display:block}
.stage__car::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(82% 74% at 50% 48%, transparent 45%, rgba(0,0,0,.45) 100%),
    linear-gradient(200deg,rgba(255,255,255,.12),transparent 40%),
    linear-gradient(0deg,rgba(0,0,0,.45),transparent 46%)}
.stage__tag{position:absolute; left:16px; bottom:14px; z-index:2; display:flex; align-items:baseline; gap:10px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:#D6DAE1}
.stage__tag b{color:var(--yellow); font-weight:500}
.stage__shadow{position:absolute; bottom:8%; width:38%; height:34px; border-radius:50%; filter:blur(26px); background:rgba(0,0,0,.85)}

.chip{position:absolute; display:flex; align-items:center; gap:11px; padding:11px 15px; border-radius:16px;
  background:rgba(16,17,21,.62); border:1px solid var(--line-2);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.9); will-change:transform}
.chip .ic{color:var(--yellow)}
.chip b{display:block; font-family:var(--f-display); font-size:12.5px; font-weight:600; letter-spacing:-.01em}
.chip span{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; color:var(--mute)}
.chip--1{top:9%; left:3%; animation:fl 7s ease-in-out infinite}
.chip--2{top:27%; right:-1%; animation:fl 8.6s ease-in-out .6s infinite}
.chip--3{bottom:22%; left:-2%; animation:fl 9.4s ease-in-out 1.2s infinite}
.chip--4{bottom:5%; right:5%; animation:fl 7.8s ease-in-out .3s infinite}
@keyframes fl{0%,100%{transform:translateY(0)} 50%{transform:translateY(-13px)}}

.scroll-hint{position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:10px; letter-spacing:.28em; color:var(--mute-2)}
.scroll-hint span{width:1px; height:34px; background:linear-gradient(var(--yellow),transparent); animation:sc 2.2s ease-in-out infinite}
@keyframes sc{0%,100%{opacity:.25; transform:scaleY(.5); transform-origin:top} 50%{opacity:1; transform:scaleY(1)}}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0; overflow:hidden; background:#070709;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex; align-items:center; gap:34px; width:max-content; animation:mq 42s linear infinite}
.marquee span{font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:.14em; color:#63676F}
.marquee i{color:var(--yellow); font-style:normal; font-size:12px}
@keyframes mq{to{transform:translateX(-50%)}}

/* =========================================================
   CARDS (shared)
   ========================================================= */
.card{position:relative; border-radius:var(--r-lg); padding:30px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--line); transition:transform .5s var(--ease), border-color .4s, background .4s}
.card::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; opacity:0;
  background:linear-gradient(140deg,rgba(255,208,0,.7),transparent 45%,rgba(255,208,0,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .45s; pointer-events:none}
.card:hover{transform:translateY(-6px); background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.card:hover::before{opacity:1}
.card .ic--lg{color:var(--yellow); margin-bottom:22px}
.card h3{font-size:19px; margin-bottom:10px}
.card p{color:var(--mute); font-size:14.5px}

.why{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.card--why{min-height:250px; display:flex; flex-direction:column}
.card--why h3{margin-top:auto}

/* --- counters --- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px;
  border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(28px,4vw,46px) 30px;
  background:radial-gradient(120% 140% at 50% 0%,rgba(255,208,0,.07),transparent 60%),rgba(255,255,255,.02)}
.stat{text-align:center; position:relative}
.stat+.stat::before{content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:var(--line)}
.stat b{font-family:var(--f-display); font-weight:800; font-size:clamp(38px,5.6vw,68px); letter-spacing:-.05em; line-height:1}
.stat .plus{font-family:var(--f-display); font-weight:800; font-size:clamp(24px,3vw,38px); color:var(--yellow)}
.stat small{display:block; margin-top:12px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; color:var(--mute); text-transform:uppercase}

/* =========================================================
   PARTS
   ========================================================= */
.parts{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.part{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--panel); transition:transform .55s var(--ease), border-color .4s, box-shadow .55s}
.part::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; opacity:0; z-index:3;
  background:conic-gradient(from var(--a,0deg),transparent 0deg,rgba(255,208,0,.9) 70deg,transparent 150deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .4s; pointer-events:none}
@property --a{syntax:'<angle>'; inherits:false; initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.part:hover{transform:translateY(-8px); box-shadow:0 40px 70px -40px rgba(0,0,0,.9)}
.part:hover::before{opacity:1; animation:spin 4s linear infinite}
.part__img{position:relative; aspect-ratio:4/3; overflow:hidden; background:#0A0B0D}
.part__img img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), filter .6s; filter:saturate(.85) contrast(1.05)}
.part:hover .part__img img{transform:scale(1.07); filter:saturate(1) contrast(1.05)}
.part__img::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,var(--panel) 2%,transparent 55%)}
.part__body{padding:22px 24px 24px; position:relative; z-index:2}
.code{display:inline-block; font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; color:var(--yellow);
  padding:5px 9px; border:1px solid rgba(255,208,0,.28); border-radius:6px; background:var(--yellow-dim); margin-bottom:14px}
.part h3{font-size:19px; margin-bottom:8px}
.part p{color:var(--mute); font-size:13.5px}
.part__foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
.tag{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--mute); text-transform:uppercase}
.qv{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#fff; transition:color .3s, gap .3s}
.qv .ic{width:15px; height:15px; color:var(--yellow)}
.qv:hover{color:var(--yellow); gap:11px}

.parts__cta{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:26px; padding:26px 30px; border:1px dashed var(--line-2); border-radius:var(--r-lg)}
.parts__cta p{color:var(--mute)}

/* =========================================================
   SERVICES
   ========================================================= */
.svc{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.card--svc{display:flex; flex-direction:column; min-height:230px}
.card--svc p{flex:1}
.card--svc .meta{margin-top:20px; font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; color:var(--mute-2)}
.card--book{background:linear-gradient(150deg,rgba(255,208,0,.16),rgba(255,208,0,.02) 60%); border-color:rgba(255,208,0,.28); justify-content:flex-end}
.card--book .btn{align-self:flex-start; margin-top:20px}

.supply{margin-top:18px; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,4vw,42px);
  background:radial-gradient(110% 140% at 50% 0%,rgba(255,208,0,.07),transparent 60%),rgba(255,255,255,.02)}
.supply h3{font-size:clamp(22px,3vw,30px)}
.supply .eyebrow{margin-bottom:16px}
.supply__list{list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.supply__list li{display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:22px;
  border:1px solid var(--line); border-radius:var(--r-md); background:rgba(255,255,255,.025);
  transition:border-color .35s, transform .45s var(--ease)}
.supply__list li:hover{border-color:rgba(255,208,0,.35); transform:translateY(-4px)}
.supply__list b{font-family:var(--f-display); font-weight:700; font-size:17px; letter-spacing:-.02em}
.supply__list small{color:var(--mute); font-size:12.5px}

/* =========================================================
   GALLERY
   ========================================================= */
.gal{columns:3; column-gap:16px}
.gal__i{position:relative; display:block; width:100%; padding:0; margin:0 0 16px; break-inside:avoid;
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:#0A0B0D}
.gal__i img{width:100%; transition:transform 1.1s var(--ease), filter .6s; filter:grayscale(.35) contrast(1.03)}
.gal__i::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 45%); opacity:.65; transition:opacity .5s}
.gal__i span{position:absolute; left:16px; bottom:14px; z-index:2; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.14em; color:#fff; opacity:0; transform:translateY(8px); transition:opacity .45s, transform .45s var(--ease)}
.gal__i:hover img{transform:scale(1.07); filter:grayscale(0) contrast(1.05)}
.gal__i:hover::after{opacity:1}
.gal__i:hover span{opacity:1; transform:translateY(0)}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.tst{position:relative}
.tst__viewport{overflow:hidden; border-radius:var(--r-lg)}
.tst__track{display:flex; transition:transform .8s var(--ease)}
.tst__c{flex:0 0 100%; margin:0; padding:clamp(32px,5vw,60px);
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  border:1px solid var(--line); border-radius:var(--r-lg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px)}
.stars{color:var(--yellow); letter-spacing:.32em; font-size:14px; margin-bottom:22px}
.tst__c blockquote{margin:0; font-family:var(--f-display); font-weight:600; font-size:clamp(19px,2.5vw,30px);
  line-height:1.36; letter-spacing:-.03em; max-width:26ch}
.tst__c figcaption{margin-top:28px; display:flex; align-items:center; gap:12px}
.tst__c figcaption b{font-size:14.5px}
.tst__c figcaption span{font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--mute)}
.tst__c figcaption span::before{content:"— "}
.tst__dots{display:flex; gap:8px; justify-content:center; margin-top:26px}
.tst__dots button{width:26px; height:3px; border-radius:2px; background:rgba(255,255,255,.18); transition:background .35s, width .35s}
.tst__dots button[aria-selected="true"]{background:var(--yellow); width:46px}

/* =========================================================
   CTA BAND
   ========================================================= */
.band{position:relative; padding:clamp(60px,8vw,110px) 0; overflow:hidden;
  background:linear-gradient(120deg,#0B0B0D,#08090B)}
.band::before{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 130% at 85% 50%,rgba(255,208,0,.14),transparent 60%)}
.band::after{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.band__in{position:relative; display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap}
.band h2{font-size:clamp(28px,4.4vw,52px); letter-spacing:-.045em; max-width:16ch}
.band p{color:var(--mute); margin-top:16px; max-width:46ch}
.band__btns{display:flex; gap:12px; flex-wrap:wrap}

/* =========================================================
   FOOTER
   ========================================================= */
.ftr{position:relative; background:#040405; border-top:1px solid var(--line); padding-top:clamp(60px,7vw,96px)}
.ftr__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:44px 32px; padding-bottom:52px}
.ftr__desc{color:var(--mute); font-size:14.5px; margin-top:20px; max-width:40ch}
.soc{display:flex; gap:10px; margin-top:24px}
.soc a{width:42px; height:42px; border-radius:12px; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--mute); transition:color .3s, border-color .3s, transform .35s var(--ease), background .3s}
.soc a:hover{color:#0A0A0A; background:var(--yellow); border-color:var(--yellow); transform:translateY(-3px)}
.ftr__col h4{font-family:var(--f-mono); font-weight:500; font-size:10.5px; letter-spacing:.24em; color:var(--mute-2);
  text-transform:uppercase; margin-bottom:20px}
.ftr__col a,.ftr__col p{display:block; color:#C6CAD2; font-size:14.5px; padding:6px 0; transition:color .3s}
.ftr__col a:hover{color:var(--yellow)}
.ftr__line{display:flex !important; align-items:center; gap:10px}
.ftr__line .ic{color:var(--yellow); width:15px; height:15px}
.ftr__line--dim{color:var(--mute-2) !important; padding-left:25px}

.map{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); height:300px; filter:grayscale(1) invert(.92) contrast(.86)}
.map iframe{width:100%; height:100%; border:0; display:block}

.ftr__bar{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:26px; padding-bottom:30px; margin-top:34px; border-top:1px solid var(--line)}
.ftr__bar p{font-size:12.5px; color:var(--mute-2)}
.ftr__bar .mono{font-family:var(--f-mono); letter-spacing:.18em; font-size:10.5px}

/* =========================================================
   TO TOP
   ========================================================= */
.totop{position:fixed; right:22px; bottom:22px; z-index:110; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; background:rgba(16,17,21,.7); border:1px solid var(--line-2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; visibility:hidden; transform:translateY(14px); transition:.45s var(--ease)}
.totop.is-on{opacity:1; visibility:visible; transform:translateY(0)}
.totop:hover{background:var(--yellow); color:#0A0A0A; border-color:var(--yellow)}

.callfab{display:none}
@media (max-width:960px){
  .callfab{
    display:inline-flex; align-items:center; gap:9px; position:fixed; z-index:110;
    left:16px; bottom:calc(16px + env(safe-area-inset-bottom));
    height:50px; padding:0 20px; border-radius:100px;
    background:var(--yellow); color:#0A0A0A; font-weight:700; font-size:14.5px;
    box-shadow:0 16px 36px -12px rgba(255,208,0,.85);
  }
  .callfab .ic{stroke-width:2.2}
  .callfab:active{transform:scale(.97)}
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lbx{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:70px 20px;
  background:rgba(3,3,4,.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); opacity:0; transition:opacity .4s}
.lbx.is-on{opacity:1}
.lbx__f{margin:0; max-width:min(1000px,92vw); text-align:center}
.lbx__f img{max-height:78vh; width:auto; margin-inline:auto; border-radius:var(--r-md); border:1px solid var(--line-2)}
.lbx__f figcaption{margin-top:18px; font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; color:var(--mute)}
.lbx__x{position:absolute; top:22px; right:22px; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center}
.lbx__nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line-2); display:grid; place-items:center; background:rgba(255,255,255,.04); transition:background .3s}
.lbx__nav:hover,.lbx__x:hover{background:var(--yellow); color:#0A0A0A; border-color:var(--yellow)}
.lbx__nav--p{left:20px} .lbx__nav--n{right:20px}

/* =========================================================
   QUICK VIEW
   ========================================================= */
.qvm{position:fixed; inset:0; z-index:210; display:grid; place-items:center; padding:24px;
  background:rgba(3,3,4,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); opacity:0; transition:opacity .4s}
.qvm.is-on{opacity:1}
.qvm__card{position:relative; display:grid; grid-template-columns:1.05fr 1fr; width:min(940px,100%); max-height:88vh; overflow:auto;
  border-radius:var(--r-lg); border:1px solid var(--line-2); background:var(--panel-2);
  transform:translateY(18px) scale(.98); transition:transform .5s var(--ease)}
.qvm.is-on .qvm__card{transform:none}
.qvm__img{background:#08090B}
.qvm__img img{width:100%; height:100%; min-height:260px; object-fit:cover}
.qvm__body{padding:clamp(26px,3.4vw,42px)}
.qvm__body h3{font-size:clamp(24px,3vw,32px); margin-bottom:12px}
.qvm__body>p{color:var(--mute); font-size:14.5px}
.qvm__specs{list-style:none; padding:0; margin:24px 0 28px; border-top:1px solid var(--line)}
.qvm__specs li{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.qvm__specs li span{color:var(--mute-2); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase}
.qvm__cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.qvm__note{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:var(--mute-2)}
.qvm__x{position:absolute; top:14px; right:14px; z-index:3; width:40px; height:40px; border-radius:50%;
  background:rgba(5,5,6,.7); border:1px solid var(--line-2); display:grid; place-items:center}
.qvm__x:hover{background:var(--yellow); color:#0A0A0A}

/* =========================================================
   REVEAL
   ========================================================= */
[data-rise]{opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0ms)}
[data-rise].is-in{opacity:1; transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .why,.svc{grid-template-columns:repeat(2,1fr)}
  .parts{grid-template-columns:repeat(2,1fr)}
  .gal{columns:2}
  .ftr__grid{grid-template-columns:1fr 1fr; gap:40px}
}
@media (max-width:960px){
  .nav{display:none}
  .burger{display:flex}
  .hdr__end .btn--yellow{display:none}
  .sect__head--row{align-items:flex-start}

  /* --- hero: single column, car on top of a 2x2 chip grid --- */
  .hero{min-height:auto; padding:108px 0 68px}
  .hero__grid{grid-template-columns:1fr; gap:40px}
  .hero__h1{font-size:clamp(32px,8.6vw,60px)}
  .hero__sub{margin-top:20px; font-size:15.5px; max-width:38ch}
  .hero__cta{margin-top:28px; gap:10px}
  .hero__cta .btn{flex:1 1 190px}
  .trust{margin-top:26px; gap:8px}
  .trust li{font-size:12px; padding:8px 13px}
  .scroll-hint{display:none}

  .hero__stage{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    aspect-ratio:auto; max-width:540px; width:100%; margin-inline:auto;
    transform:none !important;
  }
  .stage__glow{left:0; right:0; top:-4%; width:100%; height:62%; margin-inline:auto; filter:blur(58px)}
  .stage__car{grid-column:1/-1; width:70%; margin:0 auto 14px; animation:floatCarM 9s ease-in-out infinite}
  .stage__shadow{display:none}
  .chip{position:static; margin:0 !important; animation:none; padding:13px 14px; border-radius:14px}
  .chip b{font-size:12px}
  .chip span{font-size:9px}
}
@keyframes floatCarM{0%,100%{transform:translateY(0) rotate(-1.2deg)} 50%{transform:translateY(-10px) rotate(1.2deg)}}
@media (max-width:680px){
  .why,.svc,.parts{grid-template-columns:1fr}
  .supply__list{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr; gap:30px; padding:34px 24px}
  .stat+.stat::before{display:none}
  .stat+.stat{padding-top:30px; border-top:1px solid var(--line)}
  .gal{columns:1}
  .ftr__grid{grid-template-columns:1fr}
  .qvm__card{grid-template-columns:1fr}
  .qvm__img img{max-height:230px; min-height:0}
  .lbx__nav--p{left:8px} .lbx__nav--n{right:8px}
  .hero{padding:96px 0 56px}
  .hero__h1{font-size:clamp(29px,8.2vw,50px)}
  .hero__cta .btn{flex:1 1 100%}
  .trust{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .trust li{justify-content:flex-start}
  .smoke{filter:blur(60px)}
  .beam{display:none}
  .band__in{flex-direction:column; align-items:flex-start}
  .parts__cta{flex-direction:column; align-items:flex-start}
  .marquee span{font-size:13px}
}

@media (max-width:400px){
  .hero__stage{grid-template-columns:1fr}
  .stage__car{width:80%}
  .chip{padding:12px 14px}
  .trust{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  [data-rise]{opacity:1; transform:none}
  .hero__h1 .ch{opacity:1; transform:none}
  .mouse-glow{display:none}
}