*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#0a0b09;color:#f0f2ed;font-family:"DM Sans",sans-serif;overflow-x:hidden}

/* ── TOPBAR ── */
.topbar{
  background:linear-gradient(90deg,#0d0f0b,#1a1d17);
  color:#a8b0a4;
  padding:10px 5.5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  letter-spacing:.06em;
  border-bottom:1px solid #ffffff08;
}
.topbar a{
  color:#c7ff3d;
  text-decoration:none;
  font-weight:700;
  transition:.3s;
}
.topbar a:hover{color:#a8e030}

/* ── HEADER ── */
.header{
  height:88px;
  background:rgba(10,11,9,.82);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5.5%;
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid #ffffff0a;
  transition:all .4s cubic-bezier(.22,1,.36,1);
}
.header.scrolled{
  background:rgba(10,11,9,.95);
  box-shadow:0 8px 40px #00000040;
  height:78px;
}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:#fff}
.brand-mark{
  width:44px;height:44px;
  border-radius:14px;
  background:linear-gradient(135deg,#c7ff3d,#8fcc2a);
  color:#0d0f0b;
  display:grid;place-items:center;
  font:800 21px "Space Grotesk";
  box-shadow:0 4px 20px #c7ff3d30;
  transition:.3s;
}
.brand:hover .brand-mark{
  transform:rotate(-6deg) scale(1.05);
  box-shadow:0 6px 30px #c7ff3d50;
}
.brand strong,.brand small{display:block}
.brand strong{
  font:700 17px "Space Grotesk";
  letter-spacing:.1em;
  background:linear-gradient(135deg,#fff,#c0c5ba);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand small{
  font-size:9px;
  letter-spacing:.22em;
  color:#6b746f;
  margin-top:2px;
  font-weight:600;
}
nav{display:flex;gap:6px}
nav a{
  color:#8a9188;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  padding:8px 16px;
  border-radius:100px;
  transition:.3s;
  position:relative;
}
nav a:hover{color:#fff;background:#ffffff0a}
nav a::after{
  content:'';position:absolute;
  bottom:4px;left:50%;width:0;height:2px;
  background:#c7ff3d;border-radius:2px;
  transition:.3s;transform:translateX(-50%);
}
nav a:hover::after{width:20px}
.nav-wa{
  background:linear-gradient(135deg,#c7ff3d,#a8e030);
  color:#0d0f0b;
  text-decoration:none;
  padding:12px 24px;
  border-radius:100px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  transition:.3s;
  box-shadow:0 4px 20px #c7ff3d25;
}
.nav-wa:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px #c7ff3d40;
}
.menu{
  display:none;
  background:none;
  border:2px solid #333;
  color:#fff;
  font-size:22px;
  width:44px;height:44px;
  border-radius:12px;
  cursor:pointer;
  transition:.3s;
}
.menu:hover{border-color:#c7ff3d;color:#c7ff3d}

/* ── HERO ── */
.hero{
  min-height:100vh;
  padding:120px 5.5% 80px;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:60px;
  align-items:center;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%,#c7ff3d08 0%,transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 30%,#1a2a1008 0%,transparent 70%),
    linear-gradient(180deg,#0a0b09 0%,#111310 50%,#0a0b09 100%);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;
  top:-200px;right:-200px;
  width:600px;height:600px;
  background:radial-gradient(circle,#c7ff3d06 0%,transparent 70%);
  border-radius:50%;
  animation:float 8s ease-in-out infinite;
}
.hero::after{
  content:'';position:absolute;
  bottom:-150px;left:-150px;
  width:500px;height:500px;
  background:radial-gradient(circle,#c7ff3d04 0%,transparent 70%);
  border-radius:50%;
  animation:float 10s ease-in-out infinite reverse;
}
@keyframes float{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(30px,-30px)}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes slideRight{
  from{opacity:0;transform:translateX(-30px)}
  to{opacity:1;transform:translateX(0)}
}
.hero-copy{
  position:relative;
  z-index:2;
  animation:fadeUp .8s cubic-bezier(.22,1,.36,1) forwards;
}
.eyebrow,.kicker{
  font-size:11px;
  letter-spacing:.22em;
  font-weight:800;
  color:#c7ff3d;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before,.kicker::before{
  content:'';width:28px;height:2px;
  background:#c7ff3d;border-radius:2px;
}
.hero h1{
  font:700 clamp(52px,6.5vw,98px)/.88 "Space Grotesk";
  letter-spacing:-.06em;
  margin:28px 0;
  color:#fff;
}
.hero h1 em,h2 em{
  font-style:normal;
  background:linear-gradient(135deg,#c7ff3d,#88c428);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-copy>p{
  max-width:500px;
  font-size:17px;
  line-height:1.8;
  color:#8a9188;
  animation:fadeUp .8s .2s cubic-bezier(.22,1,.36,1) both;
}
.hero-actions{
  display:flex;
  gap:14px;
  margin:36px 0;
  animation:fadeUp .8s .35s cubic-bezier(.22,1,.36,1) both;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border-radius:100px;
  padding:16px 30px;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
  transition:.35s cubic-bezier(.22,1,.36,1);
  border:none;
  position:relative;
  overflow:hidden;
}
.btn.primary{
  background:linear-gradient(135deg,#c7ff3d,#a8e030);
  color:#0d0f0b;
  box-shadow:0 4px 25px #c7ff3d30;
}
.btn.primary:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 40px #c7ff3d45;
}
.btn.primary::after{
  content:'';position:absolute;
  inset:0;background:linear-gradient(135deg,#ffffff20,transparent);
  opacity:0;transition:.3s;
}
.btn.primary:hover::after{opacity:1}
.btn.ghost{
  color:#fff;
  background:#ffffff0a;
  border:1px solid #ffffff15;
  backdrop-filter:blur(10px);
}
.btn.ghost:hover{
  background:#ffffff12;
  border-color:#c7ff3d40;
  transform:translateY(-3px);
}
.btn span{color:#0d0f0b;font-size:20px;transition:.3s}
.btn.primary:hover span{transform:translateX(4px)}
.trust-row{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  font-size:12px;
  font-weight:700;
  color:#6b746f;
  animation:fadeUp .8s .5s cubic-bezier(.22,1,.36,1) both;
}
.trust-row span{
  display:flex;
  align-items:center;
  gap:6px;
}
.trust-row span::before{
  content:'';
  width:8px;height:8px;
  background:#c7ff3d;
  border-radius:50%;
  display:inline-block;
  box-shadow:0 0 12px #c7ff3d60;
}

/* ── HERO VISUAL ── */
.hero-visual{
  position:relative;
  z-index:2;
  animation:fadeUp 1s .3s cubic-bezier(.22,1,.36,1) both;
}
.hero-card{
  background:linear-gradient(145deg,#1a1d17,#111310);
  padding:12px;
  border-radius:28px;
  transform:rotate(1.5deg);
  box-shadow:
    0 40px 80px #00000060,
    0 0 0 1px #ffffff08,
    inset 0 1px 0 #ffffff08;
  transition:.5s cubic-bezier(.22,1,.36,1);
}
.hero-card:hover{
  transform:rotate(0deg) translateY(-8px);
  box-shadow:
    0 50px 100px #00000070,
    0 0 0 1px #c7ff3d15,
    0 0 60px #c7ff3d08;
}
.hero-card img{
  width:100%;
  height:520px;
  object-fit:cover;
  border-radius:20px;
  display:block;
  filter:brightness(.92) contrast(1.05);
  transition:.5s;
}
.hero-card:hover img{
  filter:brightness(1) contrast(1.05);
  transform:scale(1.02);
}
.hero-badge{
  position:absolute;
  top:30px;left:30px;
  z-index:2;
  background:linear-gradient(135deg,#c7ff3d,#a8e030);
  padding:10px 16px;
  border-radius:100px;
  font-size:10px;
  font-weight:800;
  color:#0d0f0b;
  letter-spacing:.08em;
  box-shadow:0 4px 20px #c7ff3d30;
}
.hero-card-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#8a9188;
  padding:20px 14px 10px;
  font-size:12px;
}
.hero-card-bottom b{
  color:#c7ff3d;
  font-weight:700;
}

/* ── FLOATING ELEMENTS ── */
.hero-visual::before{
  content:'SUZUKI';
  position:absolute;
  top:-20px;right:-30px;
  font:800 80px "Space Grotesk";
  color:#ffffff04;
  letter-spacing:.1em;
  z-index:-1;
  pointer-events:none;
}

/* ── STATS ── */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:linear-gradient(135deg,#111310,#161a14);
  padding:36px 5.5%;
  gap:20px;
  border-top:1px solid #ffffff06;
  border-bottom:1px solid #ffffff06;
}
.stats div{
  text-align:center;
  padding:10px 0;
  border-right:1px solid #ffffff08;
}
.stats div:last-child{border:0}
.stats strong{
  font:700 36px "Space Grotesk";
  display:block;
  background:linear-gradient(135deg,#c7ff3d,#88c428);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stats span{
  font-size:11px;
  color:#6b746f;
  letter-spacing:.06em;
  font-weight:600;
}

/* ── SECTIONS ── */
.section{padding:110px 5.5%}
.section-head{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin-bottom:50px}
.section h2,.booking h2,.contact h2{
  font:700 clamp(38px,5vw,65px)/.95 "Space Grotesk";
  letter-spacing:-.055em;
  margin:14px 0;
  color:#fff;
}
.section-head p{color:#6b746f;line-height:1.7;font-size:14px;margin:0 0 5px}
.section .kicker{color:#c7ff3d}

/* ── FILTER SECTION ── */
.filter-section{
  padding:110px 5.5% 50px;
  background:
    radial-gradient(ellipse 60% 40% at 80% 0%,#c7ff3d06 0%,transparent 70%),
    #0a0b09;
  position:relative;
  overflow:hidden;
}
.filter-bar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:32px;
  flex-wrap:wrap;
}
.filter-left h2{
  font:700 clamp(32px,4vw,50px)/1 "Space Grotesk";
  letter-spacing:-.05em;
  margin:12px 0 0;
  color:#fff;
}
.filter-right{flex:1;max-width:440px;min-width:280px}
.search-box{
  display:flex;
  align-items:center;
  gap:10px;
  background:#141713;
  border:1px solid #ffffff10;
  border-radius:18px;
  padding:6px 8px 6px 16px;
  transition:.3s;
}
.search-box:focus-within{
  border-color:#c7ff3d;
  box-shadow:0 0 0 3px #c7ff3d12,0 0 25px #c7ff3d0d;
}
.search-icon{color:#6b746f;flex-shrink:0}
.search-box input{
  width:100%;
  background:none;
  border:0;
  outline:none;
  color:#fff;
  padding:10px 0;
  font:14px "DM Sans";
}
.search-box input::placeholder{color:#484f49}
.category-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:30px;
}
.cat-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#141713;
  border:1px solid #ffffff10;
  color:#8a9188;
  padding:12px 20px;
  border-radius:100px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.3s;
}
.cat-btn:hover{
  color:#fff;
  border-color:#c7ff3d40;
  transform:translateY(-2px);
}
.cat-btn span{
  background:#ffffff08;
  color:#6b746f;
  font-size:10px;
  font-weight:800;
  padding:3px 9px;
  border-radius:100px;
  transition:.3s;
}
.cat-btn.active{
  background:linear-gradient(135deg,#c7ff3d,#a8e030);
  color:#0d0f0b;
  border-color:transparent;
  box-shadow:0 4px 20px #c7ff3d25;
}
.cat-btn.active span{
  background:#00000015;
  color:#0d0f0b;
}
.results-info{
  font-size:12px;
  color:#6b746f;
  font-weight:600;
  letter-spacing:.05em;
  margin-bottom:24px;
}
.results-info b{color:#c7ff3d}
.no-results{
  text-align:center;
  padding:70px 20px;
  border:1px dashed #ffffff12;
  border-radius:24px;
}
.no-results-icon{font-size:42px;margin-bottom:14px}
.no-results h3{font:700 22px "Space Grotesk";color:#fff;margin-bottom:8px}
.no-results p{font-size:13px;color:#6b746f}
#productGrid{margin-bottom:20px}

/* ── GRID / CARDS ── */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{
  background:linear-gradient(145deg,#141713,#111310);
  border:1px solid #ffffff08;
  border-radius:24px;
  overflow:hidden;
  transition:.4s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px #00000040;
  border-color:#c7ff3d15;
}
.card-img{height:220px;position:relative;overflow:hidden}
.card-img img{
  width:100%;height:100%;
  object-fit:cover;
  transition:.5s;
  filter:brightness(.9);
}
.card:hover img{transform:scale(1.06);filter:brightness(1)}
.tag{
  position:absolute;top:14px;left:14px;
  background:#ffffff10;
  backdrop-filter:blur(12px);
  padding:7px 12px;
  border-radius:100px;
  font-size:9px;
  font-weight:800;
  color:#c7ff3d;
  border:1px solid #ffffff10;
}
.card-body{padding:20px}
.card-body h3{font:700 19px "Space Grotesk";margin:0 0 7px;color:#fff}
.card-body p{font-size:12px;color:#6b746f;line-height:1.55;min-height:38px;margin:0 0 14px}
.price{font:700 18px "Space Grotesk";margin-bottom:14px;color:#c7ff3d}
.price small{font:500 10px "DM Sans";color:#6b746f}
.card-actions{display:flex;gap:8px}
.card-actions a{
  flex:1;text-align:center;
  text-decoration:none;
  padding:11px 8px;
  border-radius:12px;
  font-size:10px;
  font-weight:800;
  transition:.3s;
}
.wa{background:#1a2a10;color:#c7ff3d;border:1px solid #c7ff3d20}
.wa:hover{background:#c7ff3d;color:#0d0f0b}
.details{background:#ffffff08;color:#fff;border:1px solid #ffffff10}
.details:hover{background:#c7ff3d;color:#0d0f0b;border-color:#c7ff3d}

/* ── SPLIT BANNER ── */
.split-banner{
  padding:100px 5.5%;
  background:linear-gradient(135deg,#111310,#0d1209);
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:80px;
  align-items:end;
  border-top:1px solid #ffffff06;
  border-bottom:1px solid #ffffff06;
}
.split-banner h2{
  font:700 clamp(40px,5vw,70px)/.95 "Space Grotesk";
  letter-spacing:-.06em;
  margin:14px 0;
  color:#fff;
}
.split-banner p{font-size:16px;line-height:1.8;color:#6b746f}

/* ── DARK SECTION ── */
.dark-section{background:#0d0f0b;color:#fff}
.dark-section .section-head p{color:#6b746f}
.dark-section .kicker{color:#c7ff3d}

/* ── PARTS SECTION ── */
.parts-section{background:#111310}

/* ── BOOKING ── */
.booking{
  background:linear-gradient(135deg,#0d1209,#111310);
  padding:100px 5.5%;
  display:grid;
  grid-template-columns:.9fr 1fr;
  gap:90px;
  border-top:1px solid #ffffff06;
}
.booking h2{color:#fff}
.booking-copy p{color:#6b746f;line-height:1.7;max-width:460px}
.booking form{
  background:#161a14;
  padding:32px;
  border-radius:24px;
  border:1px solid #ffffff08;
}
.booking label{display:block;font-size:11px;font-weight:800;margin-bottom:15px;color:#8a9188}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,select,textarea{
  width:100%;margin-top:7px;
  border:1px solid #ffffff10;
  border-radius:14px;
  background:#0d0f0b;
  color:#fff;
  padding:14px;
  font:13px "DM Sans";
  outline:none;
  transition:.3s;
}
input:focus,select:focus,textarea:focus{
  border-color:#c7ff3d;
  box-shadow:0 0 20px #c7ff3d10;
}
.full{width:100%;border:0}

/* ── CONTACT ── */
.contact{
  padding:70px 5.5%;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:30px;
  align-items:center;
  background:#0a0b09;
}
.contact h2{font-size:38px;margin:9px 0;color:#fff}
.contact p{margin:0;color:#6b746f}
.contact-item small{display:block;font-size:9px;letter-spacing:.15em;color:#6b746f;margin-bottom:8px}
.contact-item a{color:#c7ff3d;font-weight:700;text-decoration:none;font-size:13px;transition:.3s}
.contact-item a:hover{text-decoration:underline}

/* ── FOOTER ── */
footer{
  background:#080907;
  color:#6b746f;
  padding:48px 5.5% 28px;
  border-top:1px solid #ffffff06;
}
.footer-main{display:flex;justify-content:space-between;align-items:center;padding-bottom:30px;border-bottom:1px solid #ffffff08}
.footer-main .brand{color:#fff}
.footer-main p{font-size:12px}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;padding:28px 0}
.footer-links a{color:#6b746f;font-size:11px;transition:.3s;text-decoration:none}
.footer-links a:hover{color:#c7ff3d}
.copyright{font-size:10px;color:#3a3f3a}

/* ── FLOAT WIDGET ── */
.float-widget{position:fixed;right:28px;bottom:28px;z-index:50}
.widget-main{
  width:60px;height:60px;
  border-radius:50%;border:0;
  background:linear-gradient(135deg,#c7ff3d,#88c428);
  font-size:24px;
  box-shadow:0 8px 30px #c7ff3d30;
  cursor:pointer;
  transition:.3s;
}
.widget-main:hover{
  transform:scale(1.1);
  box-shadow:0 12px 40px #c7ff3d50;
}
.widget-panel{
  position:absolute;right:0;bottom:72px;
  width:250px;
  background:#141713;
  color:#fff;
  padding:20px;
  border-radius:20px;
  display:none;
  box-shadow:0 25px 60px #00000060;
  border:1px solid #ffffff08;
}
.widget-panel.open{display:block}
.widget-panel strong,.widget-panel span{display:block}
.widget-panel span{font-size:11px;color:#6b746f;margin:5px 0 16px}
.widget-panel a{
  display:block;
  background:linear-gradient(135deg,#c7ff3d,#a8e030);
  color:#0d0f0b;
  text-decoration:none;
  padding:11px;
  border-radius:12px;
  font-size:11px;
  font-weight:800;
  margin-top:8px;
  text-align:center;
  transition:.3s;
}
.widget-panel a:hover{transform:translateY(-2px);box-shadow:0 6px 20px #c7ff3d30}

/* ── RESPONSIVE ── */
@media(max-width:1000px){
  nav{gap:8px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr}
  .hero-card img{height:420px}
  .section-head,.split-banner,.booking,.contact{grid-template-columns:1fr}
  .contact{gap:25px}
  .booking{gap:35px}
  .hero-copy{animation-delay:0s}
  .filter-bar{flex-direction:column;align-items:stretch}
  .filter-right{max-width:none}
}
@media(max-width:700px){
  .topbar{display:none}
  .header{height:72px}
  .header nav{
    display:none;position:absolute;
    top:72px;left:0;right:0;
    background:rgba(10,11,9,.98);
    backdrop-filter:blur(20px);
    padding:20px 6%;
    flex-direction:column;
    border-bottom:1px solid #ffffff08;
    gap:4px;
  }
  .header nav.open{display:flex}
  .header nav a{padding:12px 16px;border-radius:12px}
  .nav-wa{display:none}
  .menu{display:block}
  .hero{padding-top:60px;min-height:auto}
  .hero h1{font-size:48px}
  .hero-card img{height:300px}
  .stats{grid-template-columns:1fr 1fr}
  .stats div{border:0}
  .grid{grid-template-columns:1fr}
  .section{padding:80px 5.5%}
  .field-row{grid-template-columns:1fr}
  .footer-main{align-items:flex-start;gap:20px;flex-direction:column}
  .hero-actions{flex-direction:column}
  .btn{width:100%}
  .hero-card{transform:none}
}