:root{
  --accent: #00ff85;
  --accent-rgb: 0,255,133;
  --bg0: #05070b;
  --bg1: #0b0f16;
  --panel: rgba(0,255,133,.07);
  --panel2: rgba(0,255,133,.11);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.52);
  --shadow: 0 20px 70px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 28px;
  --max: 1180px;
  --grad: linear-gradient(90deg, var(--accent), rgba(0,201,106,1) 55%, rgba(0,255,133,1));
  --grad2: linear-gradient(180deg, rgba(0,255,133,.16), rgba(0,255,133,.03));
}

*{box-sizing:border-box}
html,body{height:100%}

html{
  scrollbar-width:auto;
  scrollbar-color: rgba(var(--accent-rgb),.72) rgba(0,0,0,.75);
}

body{
  margin:0;
  font-family: Rajdhani, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background: radial-gradient(1200px 900px at 70% 0%, rgba(var(--accent-rgb),.12), transparent 60%),
              radial-gradient(900px 700px at 10% 30%, rgba(var(--accent-rgb),.08), transparent 62%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%, rgba(0,0,0,.82)),
    radial-gradient(1400px 900px at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,.52) 70%, rgba(0,0,0,.92) 100%);
}

a,button,input,select,textarea,[role="button"]{cursor:inherit !important}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

img{
  -webkit-user-drag:none;
  user-select:none;
}

input,select,textarea{
  width:100%;
  color:var(--text);
  background:rgba(var(--accent-rgb),.08);
  border:1px solid rgba(var(--accent-rgb),.20);
  border-radius:14px;
  padding:12px 14px;
  outline:none;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  -webkit-user-select:text;
  user-select:text;
}

input:focus,select:focus,textarea:focus{
  border-color:rgba(var(--accent-rgb),.55);
  background:rgba(var(--accent-rgb),.11);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10);
  transform:translateY(-1px);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  appearance:none;
  -webkit-appearance:none;
  margin:0;
}

input[type="number"]{
  appearance:textfield;
  -moz-appearance:textfield;
}

label{
  display:block;
  font-size:14px;
  color:var(--muted2);
  margin:0 0 6px 2px;
  letter-spacing:.02em;
}

select{
  appearance:none;
  padding-right:46px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(var(--accent-rgb),.88) 50%),
    linear-gradient(135deg, rgba(var(--accent-rgb),.88) 50%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,.00), rgba(255,255,255,.00));
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat:no-repeat;
}

select option, select optgroup{
  background:rgba(0,255,133,.12);
  color:rgba(255,255,255,.92);
}

:focus-visible{
  outline:2px solid rgba(var(--accent-rgb),.55);
  outline-offset:3px;
  border-radius:14px;
}

::-webkit-scrollbar{width:16px;height:16px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.78)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.82), rgba(0,120,70,.62));
  border-radius:14px;
  border:3px solid rgba(0,0,0,.78);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.95), rgba(0,120,70,.74));
}

.bgParallax{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}

.bgLayer{
  position:absolute;
  inset:-6%;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  transform:translate3d(0,0,0);
  will-change:transform, filter, opacity;
}

.bgBase{
  background-image:url("/assets/background.png");
  opacity:.26;
  filter:saturate(1.05) contrast(1.05);
  transform:translate3d(calc(var(--bgx, 0) * 1px), calc(var(--bgy, 0) * 1px), 0) scale(1.04);
}

.bgOver{
  background-image:url("/assets/background_paralax.png");
  opacity:.18;
  filter:saturate(1.1) contrast(1.1);
  mix-blend-mode:screen;
  transform:translate3d(calc(var(--bgx2, 0) * 1px), calc(var(--bgy2, 0) * 1px), 0) scale(1.06);
}

.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}

.bgTires{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}

.tireTrack{
  position:absolute;
  opacity:.14;
  filter:contrast(1.06) saturate(1.06);
  transform:translate3d(0,0,0);
  will-change:transform, opacity;
  mix-blend-mode:screen;
  mask-image: radial-gradient(560px 380px at 50% 50%, rgba(0,0,0,1), rgba(0,0,0,0) 72%);
}

.tireTrack.t1{
  width:min(760px, 78vw);
  top:-18%;
  left:-18%;
  transform:
    translate3d(calc(var(--tireX, 0) * 1px), calc(var(--tire1y, 0) * 1px), 0)
    rotate(14deg)
    scale(1);
}

.tireTrack.t2{
  width:min(720px, 76vw);
  top:28%;
  right:-22%;
  transform:
    translate3d(calc(var(--tireX, 0) * -0.8px), calc(var(--tire2y, 0) * 1px), 0)
    rotate(-18deg)
    scale(1);
}

.tireTrack.t3{
  width:min(840px, 86vw);
  bottom:-26%;
  left:10%;
  transform:
    translate3d(calc(var(--tireX, 0) * 0.55px), calc(var(--tire3y, 0) * 1px), 0)
    rotate(22deg)
    scale(1);
}

.blob{
  position:absolute;
  filter:blur(90px);
  opacity:.10;
  border-radius:50%;
}

.b1{
  width:560px;height:560px;
  background:var(--grad);
  top:-260px;right:-260px;
  animation:spin 24s linear infinite;
}

.b2{
  width:560px;height:560px;
  background:linear-gradient(90deg, rgba(0,255,133,1), rgba(0,120,70,1));
  bottom:-280px;left:-280px;
  animation:spin 30s linear infinite reverse;
}

.gridNoise{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.08;
  mix-blend-mode:overlay;
  mask-image:radial-gradient(800px 600px at 55% 10%, rgba(0,0,0,1), transparent 70%);
}

@keyframes spin{
  0%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(180deg) scale(1.10)}
  100%{transform:rotate(360deg) scale(1)}
}

.top{
  position:sticky;
  top:0;
  z-index:50;
  background:linear-gradient(180deg, rgba(5,7,11,.86), rgba(5,7,11,.35), transparent)
}

.nav{
  max-width:var(--max);
  margin:0 auto;
  padding:calc(18px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) 18px calc(18px + env(safe-area-inset-left));
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  z-index:2;
}

.brand{display:flex;align-items:center;gap:10px;min-width:240px}
.logo{width:42px;height:42px;border-radius:12px;object-fit:cover;box-shadow:0 10px 35px rgba(0,0,0,.55)}
.brandText{line-height:1}
.brandName{font-weight:700;font-size:20px;letter-spacing:.02em}
.brandTag{margin-top:2px;color:var(--muted2);font-size:13px}

.navLinks{display:flex;gap:6px;flex:1;justify-content:flex-end;align-items:center}
.navBtn{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  padding:10px 14px;
  border-radius:999px;
  transition:background .18s ease, transform .18s ease, color .18s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.navBtn:hover{background:rgba(var(--accent-rgb),.08);transform:translateY(-1px);color:var(--text)}
.navBtn.active{background:rgba(var(--accent-rgb),.12);color:var(--text)}

.main{
  max-width:var(--max);
  margin:0 auto;
  padding:0 calc(18px + env(safe-area-inset-right)) 0 calc(18px + env(safe-area-inset-left));
  position:relative;
  z-index:2
}

.section{padding:72px 0}
.sectionHead{
  margin:0 0 22px 0;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
section[id]{scroll-margin-top:92px}

.h1{
  margin:10px 0 14px 0;
  font-size:clamp(40px, 6vw, 78px);
  line-height:1.02;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.line{display:block}

.hero .h1 .line{
  white-space:nowrap;
  overflow:visible;
  align-self:center;
}

.h2{
  margin:0;
  font-size:clamp(28px, 3.2vw, 44px);
  text-transform:uppercase;
  letter-spacing:.02em;
}

.h2Sm{
  margin:0 0 10px 0;
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.sub{margin:6px 0 0 0;color:var(--muted2);font-size:18px}

.typewriter{
  display:inline-flex;
  align-items:baseline;
  position:relative;
  transform:translate3d(0,0,0);
  will-change:transform;
}

.twText{display:inline-block}
.twCaret{
  width:2px;
  height:.86em;
  margin-left:2px;
  margin-top:.12em;
  border-radius:2px;
  background:rgba(var(--accent-rgb),.78);
  animation:caretBlink 1.1s steps(1,end) infinite;
}

.twNoCaret .twCaret{display:none}

@keyframes caretBlink{
  50%{opacity:0}
}

[data-swipe]{
  transform:translate3d(0,0,0);
  will-change:transform;
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .85s ease, transform .85s ease;
  will-change:opacity, transform;
}

.reveal.in{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .b1,.b2{animation:none}
  [data-swipe]{transform:none}
  .twCaret{animation:none}
}

.hero{
  padding:44px 0 0px 0;
  display:flex;
  gap:20px;
  align-items:center;
}

.heroInner{position:relative}

.pill{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(var(--accent-rgb),.30);
  background:rgba(var(--accent-rgb),.08);
  border-radius:999px;
  padding:6px 10px;
  letter-spacing:.18em;
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
}

.lead{margin:0 0 18px 0;color:var(--muted);font-size:20px;max-width:640px}

.heroCtas{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 22px 0}

.heroStats{display:flex;gap:12px;flex-wrap:wrap}

.stat{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  padding:14px 16px;
  min-width:170px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.stat:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.25);background:var(--panel2)}

.statVal{font-size:22px;font-weight:700;letter-spacing:.02em}
.statLbl{color:var(--muted2);margin-top:2px;font-size:14px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:11px 16px;
  border:1px solid rgba(255,255,255,.10);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
}

.btn:active{transform:translateY(0px) scale(.99)}

.btnGhost{background:var(--panel)}
.btnGhost:hover{background:var(--panel2);transform:translateY(-1px)}

.btnGrad{
  background:var(--grad);
  border-color:rgba(var(--accent-rgb),.44);
  box-shadow:0 14px 40px rgba(var(--accent-rgb),.12);
}

.btnGrad:hover{transform:translateY(-1px);box-shadow:0 18px 55px rgba(var(--accent-rgb),.20)}

.heroMedia{
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  isolation:isolate;
}

.heroMedia::before{content:none}
.heroMedia::after{content:none}

.heroImg{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  transform:translate3d(0,0,0) scale(1);
  animation:carGlow 5.8s ease-in-out infinite;
}

.heroMedia:hover .heroImg{
  animation:carGlow 5.8s ease-in-out infinite, carHoverPulse 1.1s ease-in-out infinite;
}

@keyframes carFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-.15deg)}
  50%{transform:translate3d(0,-9px,0) rotate(.25deg)}
}

@keyframes carGlow{
  0%,100%{
    filter:drop-shadow(0 22px 58px rgba(0,0,0,.56)) drop-shadow(0 0 22px rgba(var(--accent-rgb),.10));
  }
  50%{
    filter:drop-shadow(0 26px 66px rgba(0,0,0,.62)) drop-shadow(0 0 30px rgba(var(--accent-rgb),.16));
  }
}

@keyframes carHoverPulse{
  0%,100%{transform:translate3d(0,0,0) scale(.985)}
  50%{transform:translate3d(0,0,0) scale(1.02)}
}

.speedLines{
  position:absolute;
  inset:-160px -180px;
  background:repeating-linear-gradient(115deg, rgba(var(--accent-rgb),.0) 0, rgba(var(--accent-rgb),.0) 16px, rgba(var(--accent-rgb),.07) 16px, rgba(var(--accent-rgb),.07) 18px),
             repeating-linear-gradient(115deg, rgba(var(--accent-rgb),.0) 0, rgba(var(--accent-rgb),.0) 30px, rgba(var(--accent-rgb),.04) 30px, rgba(var(--accent-rgb),.04) 32px);
  opacity:.20;
  transform:skewX(-12deg);
  animation:drift 14s linear infinite;
  z-index:1;
  filter:blur(.2px);
  border-radius:999px;
  mask-image:radial-gradient(circle at 55% 50%, rgba(0,0,0,1) 54%, rgba(0,0,0,0) 78%);
}

@keyframes drift{
  0%{transform:translateX(0) skewX(-12deg)}
  100%{transform:translateX(-160px) skewX(-12deg)}
}

.panel{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius2);
  padding:16px 16px;
  box-shadow:0 12px 40px rgba(0,0,0,.30);
}

.filters{
  display:grid;
  grid-template-columns: 1.3fr 1fr .8fr 1fr auto auto;
  gap:12px;
  align-items:end;
}

.field{min-width:0}
.filters .btn{height:44px;padding:0 16px;border-radius:16px}

.selectFx{
  position:relative;
}

.selectNativeHidden{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}

.selectBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:14px;
  padding:12px 14px;
  color:var(--text);
  background:rgba(var(--accent-rgb),.08);
  border:1px solid rgba(var(--accent-rgb),.20);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.selectBtn:hover{background:rgba(var(--accent-rgb),.11);border-color:rgba(var(--accent-rgb),.32)}
.selectFx.open .selectBtn{
  border-color:rgba(var(--accent-rgb),.55);
  background:rgba(var(--accent-rgb),.13);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10);
  transform:translateY(-1px);
}

.selectVal{font-weight:600;letter-spacing:.02em}
.selectChevron{opacity:.9;transform:translateY(-1px)}

.selectMenu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 10px);
  display:none;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(0,255,133,.16), rgba(0,255,133,.08));
  border:1px solid rgba(var(--accent-rgb),.30);
  box-shadow:0 22px 70px rgba(0,0,0,.60);
  overflow:hidden;
  z-index:80;
  backdrop-filter: blur(14px);
}

.selectFx.open .selectMenu{display:block}

.selectOpt{
  width:100%;
  text-align:left;
  padding:12px 14px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.90);
  font-weight:600;
  letter-spacing:.02em;
  transition:background .14s ease, color .14s ease;
}

.selectOpt:hover{background:rgba(0,0,0,.18);color:rgba(255,255,255,.96)}
.selectOpt[aria-selected="true"]{background:rgba(0,0,0,.22);color:rgba(255,255,255,.98)}

.syncInfo{
  margin-top:12px;
  color:var(--muted2);
  font-size:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.cardV{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius2);
  overflow:hidden;
  box-shadow:0 14px 45px rgba(0,0,0,.35);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  position:relative;
}

.cardV:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--accent-rgb),.32);
  background:var(--panel2);
  box-shadow:0 18px 60px rgba(0,0,0,.42);
}

.cardV:active{transform:translateY(-1px)}

.cardVMedia{
  position:relative;
  outline:none;
  touch-action:pan-y;
}

.cardVMedia.dragging{
  user-select:none;
}

.cardVImg{
  width:100%;
  height:208px;
  object-fit:cover;
  display:block;
  filter:contrast(1.03) saturate(1.03);
  background:rgba(0,0,0,.25);
  transform:translate3d(var(--dragx, 0px),0,0);
  transition:transform .20s ease;
}

.cardVMedia.dragging .cardVImg{
  transition:none;
  cursor:grabbing;
}

@media (pointer:fine){
  .cardVMedia{cursor:grab}
}

.cardVNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.30);
  color:rgba(255,255,255,.92);
  font-size:28px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 60px rgba(0,0,0,.48);
  opacity:0;
  transition:opacity .16s ease, transform .16s ease, background .16s ease;
  backdrop-filter: blur(12px);
}

.cardVPrev{left:10px}
.cardVNext{right:10px}

.cardV:hover .cardVNav,
.cardV:focus-within .cardVNav{
  opacity:1;
}

.cardVNav:hover{
  background:rgba(var(--accent-rgb),.14);
  transform:translateY(-50%) scale(1.03);
}

.cardVDots{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  opacity:.0;
  transition:opacity .16s ease;
}

.cardV:hover .cardVDots,
.cardV:focus-within .cardVDots{
  opacity:1;
}

.cardVDot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.30);
}

.cardVDot.on{
  background:rgba(var(--accent-rgb),.92);
  box-shadow:0 0 16px rgba(var(--accent-rgb),.22);
}

@media (pointer:coarse){
  .cardVNav{opacity:1}
  .cardVDots{opacity:1}
}

.cardVBody{padding:14px 14px 16px 14px}
.cardVTitle{font-weight:700;font-size:20px;letter-spacing:.02em;text-transform:uppercase}
.cardVPrice{margin-top:10px;font-weight:700;font-size:22px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.cardVStats{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.78);
  font-size:13px;
  letter-spacing:.02em;
  text-transform:uppercase;
  backdrop-filter: blur(10px);
}

.pager{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:18px;flex-wrap:wrap}
.pager .btn{min-width:46px}

.empty{
  display:none;
  margin-top:22px;
  padding:18px;
  border-radius:var(--radius2);
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(var(--accent-rgb),.05);
}

.empty.show{display:block}
.emptyTitle{font-weight:700;font-size:18px;text-transform:uppercase}
.emptyText{margin-top:6px;color:var(--muted2);font-size:16px;max-width:680px}

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius2);
  padding:18px 18px;
  box-shadow:0 14px 45px rgba(0,0,0,.32);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.card:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.24);background:var(--panel2)}

.card h3{margin:0 0 10px 0;font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.card p{margin:0 0 12px 0;color:var(--muted);font-size:18px;line-height:1.4}
.bullets{margin:0;padding:0 0 0 18px;color:var(--muted2)}
.bullets li{margin:8px 0;font-size:16px}

.strip{
  margin-top:18px;
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background:var(--grad2);
  overflow:hidden;
}

.stripInner{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1px;
  background:rgba(255,255,255,.08);
}

.stripItem{
  padding:16px 16px;
  background:rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}

.stripTitle{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:rgba(255,255,255,.78)}
.stripText{margin-top:6px;font-size:18px;color:var(--text)}

.link{color:rgba(var(--accent-rgb),.88)}
.link:hover{text-decoration:underline}

.location{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  align-items:stretch;
}

.locationCard{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius2);
  padding:18px 18px;
  box-shadow:0 14px 45px rgba(0,0,0,.32);
  text-align:center;
}

.locationCard h3{margin:0 0 10px 0;font-size:24px;text-transform:uppercase}
.addr{color:var(--muted);font-size:18px;line-height:1.4}
.locActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;justify-content:center}
.tiny{margin-top:12px;color:var(--muted2);font-size:14px}

.mapFrame{
  position:relative;
  border-radius:var(--radius2);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  min-height:280px;
  background:rgba(0,0,0,.18);
}

.mapFrameLg{min-height:480px}

.mapFrame img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.02) saturate(1.02)}
.mapFrame iframe{width:100%;height:100%;border:0;display:block}

.contactSolo{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:14px;
  align-items:stretch;
}

.contactInfo{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius2);
  padding:18px;
  box-shadow:0 14px 45px rgba(0,0,0,.32);
}

.contactItem{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.contactItem:last-child{border-bottom:0}
.contactKey{color:var(--muted2);font-size:13px;text-transform:uppercase;letter-spacing:.12em}
.contactVal{margin-top:4px;font-size:18px}
.notice{margin-top:14px;color:var(--muted2);font-size:16px;line-height:1.35}

.legal{padding-bottom:38px}
.legalGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.legalCard{
  background:rgba(var(--accent-rgb),.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius2);
  padding:18px;
  text-align:center;
}

.legalText{color:var(--muted);font-size:16px;line-height:1.5;text-align:center}
.legalText p{margin:0 0 10px 0}
.sp{height:10px}

.footer{
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
  padding:18px 0 calc(18px + env(safe-area-inset-bottom)) 0;
  position:relative;
  z-index:2;
}

.footInner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 calc(18px + env(safe-area-inset-right)) 0 calc(18px + env(safe-area-inset-left));
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.footBrand{display:flex;gap:10px;align-items:center}
.logoSm{width:34px;height:34px;border-radius:12px}
.footName{font-weight:700;letter-spacing:.02em}
.footSub{color:var(--muted2);font-size:14px}
.footLinks{display:flex;gap:12px;flex-wrap:wrap}
.footCopy{color:var(--muted2);font-size:14px}

.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:70;
  align-items:center;
  justify-content:center;
  padding:calc(18px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
}

.modal.show{display:flex}

.modalBack{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter: blur(8px)}

.modalCard{
  position:relative;
  width:min(980px, 100%);
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(15,20,30,.92), rgba(10,12,18,.92));
  box-shadow:var(--shadow);
  overflow:hidden;
  max-height:calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

.modalClose{
  position:absolute;top:10px;right:10px;
  width:44px;height:44px;border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(var(--accent-rgb),.10);
  color:rgba(255,255,255,.85);
  font-size:26px;
  line-height:1;
  z-index:5;
}

.modalBody{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:0;
  overflow:auto;
  max-height:inherit;
}

.modalMedia{position:relative}
.modalMedia img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
  touch-action:pan-y;
  transform:translate3d(var(--mdragx, 0px),0,0);
  transition:transform .20s ease;
}

.modalNav{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}

.modalNav.show{opacity:1}

.modalNavBtn{
  pointer-events:auto;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.30);
  color:rgba(255,255,255,.92);
  font-size:30px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 60px rgba(0,0,0,.48);
  backdrop-filter: blur(12px);
}

.modalNavBtn.prev{left:12px}
.modalNavBtn.next{right:12px}

.modalNavBtn:hover{background:rgba(var(--accent-rgb),.14)}

.thumbs{display:flex;gap:8px;flex-wrap:wrap;padding:10px;border-top:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22)}
.thumbBtn{
  width:62px;height:46px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(var(--accent-rgb),.08);
  padding:0;
  opacity:.85;
  transition:transform .16s ease, opacity .16s ease, border-color .16s ease;
}

.thumbBtn:hover{transform:translateY(-1px);opacity:1}
.thumbBtn.active{opacity:1;border-color:rgba(var(--accent-rgb),.42)}

.thumbBtn img{width:100%;height:100%;object-fit:cover;display:block}

.modalInfo{padding:16px 16px 18px 16px}
.modalTitle{font-weight:700;font-size:26px;text-transform:uppercase;letter-spacing:.02em}
.modalPrice{margin-top:6px;font-weight:700;font-size:28px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.modalMeta{margin-top:10px;color:var(--muted2);font-size:15px;display:flex;flex-wrap:wrap;gap:10px}
.modalDesc{margin-top:12px;color:var(--muted);font-size:16px;line-height:1.45;max-height:220px;overflow:auto;padding-right:4px;-webkit-overflow-scrolling:touch}
.modalCtas{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.modalCtas .btn{flex:1;border-radius:16px}
.modalId{margin-top:10px;color:var(--muted2);font-size:13px;letter-spacing:.08em;text-transform:uppercase}

.toast{
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.70);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:90;
  max-width:min(560px, calc(100% - 26px));
  color:rgba(255,255,255,.92);
}

.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}

.protect{
  user-select:none;
  -webkit-user-drag:none;
}

.cursorFx{
  position:fixed;
  left:0;
  top:0;
  width:0;
  height:0;
  pointer-events:none;
  z-index:200;
  opacity:0;
  transition:opacity .18s ease;
  will-change:transform, opacity;
}

.cursorFx.on{opacity:1}

.cursorFxRing{
  position:absolute;
  left:0;
  top:0;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.55);
  transform:translate3d(-50%,-50%,0);
  box-shadow:0 0 16px rgba(var(--accent-rgb),.16), 0 0 34px rgba(var(--accent-rgb),.06);
  animation:cursorPulse 2.4s ease-in-out infinite;
}

.cursorFx.down .cursorFxRing{
  transform:translate3d(-50%,-50%,0) scale(.85);
  box-shadow:0 0 20px rgba(var(--accent-rgb),.22), 0 0 38px rgba(var(--accent-rgb),.10);
}

@keyframes cursorPulse{
  0%,100%{box-shadow:0 0 16px rgba(var(--accent-rgb),.16), 0 0 34px rgba(var(--accent-rgb),.06)}
  50%{box-shadow:0 0 20px rgba(var(--accent-rgb),.22), 0 0 44px rgba(var(--accent-rgb),.10)}
}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr;gap:14px}
  .heroMedia{min-height:340px}
  .filters{grid-template-columns: 1fr 1fr 1fr 1fr;gap:10px}
  .filters .btn{grid-column: span 2}
  .grid{grid-template-columns: repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .stripInner{grid-template-columns:1fr}
  .location{grid-template-columns:1fr}
  .contactSolo{grid-template-columns:1fr}
  .modalBody{grid-template-columns:1fr}
  .modalMedia img{height:320px}
  .brand{min-width:0}
  .mapFrameLg{min-height:360px}
}

@media (max-width: 560px){
  .filters{grid-template-columns:1fr}
  .filters .btn{grid-column: span 1}
  .grid{grid-template-columns:1fr}
  .hero .h1 .line{white-space:normal}
  .twCaret{display:none}
  .tireTrack{opacity:.12}
}

@media (pointer:coarse){
  .cursorFx{display:none}
}
