/* ============================================================
   MADARASI MOTO ACCESSORIES — ULTRA PREMIUM CSS
   Performance: GPU-only transforms, will-change minimized
   ============================================================ */

/* ---- CUSTOM PROPERTIES ---- */
:root {
  --red: #ff2020;
  --red2: #ff5040;
  --red-glow: rgba(255,32,32,.55);
  --blue: #00c3ff;
  --blue2: #00e5ff;
  --blue-glow: rgba(0,195,255,.45);
  --dark: #080810;
  --dark2: #0d0d18;
  --dark3: #10101c;
  --card: #13131e;
  --card2: #16162a;
  --border: rgba(255,255,255,.06);
  --text: #e0e0ec;
  --muted: #6a6a80;
  --white: #ffffff;
  --font-d: 'Bebas Neue', sans-serif;
  --font-h: 'Orbitron', sans-serif;
  --font-b: 'Rajdhani', sans-serif;
  --font-u: 'Inter', sans-serif;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---- RESET ---- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { background:var(--dark); color:var(--text); font-family:var(--font-b);
  overflow-x:hidden; cursor:none; }
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--dark); }
::-webkit-scrollbar-thumb { background:var(--red); border-radius:2px; }

/* ---- CUSTOM CURSOR ---- */
#cursor { position:fixed; width:12px; height:12px; background:var(--red);
  border-radius:50%; pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%); transition:width .2s, height .2s, background .2s;
  mix-blend-mode:difference; }
#cursor-ring { position:fixed; width:36px; height:36px; border:1.5px solid var(--red);
  border-radius:50%; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%); opacity:.5;
  transition:transform .12s var(--ease-out), width .3s, height .3s, opacity .3s; }
#cursor.hovered { width:6px; height:6px; }
#cursor-ring.hovered { width:60px; height:60px; opacity:.2; }
@media(hover:none),(pointer:coarse){ #cursor,#cursor-ring { display:none; } body { cursor:auto; } }

/* ---- NOISE TEXTURE OVERLAY ---- */
body::before { content:''; position:fixed; inset:0; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.025; pointer-events:none; }

/* ---- LOADER ---- */
#loader { position:fixed; inset:0; background:#000; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease-out), visibility .8s; }
#loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner { text-align:center; }
.loader-logo { font-family:var(--font-d); font-size:clamp(5rem,12vw,9rem);
  line-height:1; margin-bottom:1.5rem; display:flex; gap:.5rem; }
.loader-m { color:var(--red);
  text-shadow:0 0 40px var(--red),0 0 80px var(--red-glow);
  animation:pulseGlow 1s ease-in-out infinite alternate; }
.loader-a { color:var(--blue);
  text-shadow:0 0 40px var(--blue),0 0 80px var(--blue-glow);
  animation:pulseGlow2 1s .2s ease-in-out infinite alternate; }
@keyframes pulseGlow{ to{ text-shadow:0 0 80px var(--red),0 0 160px var(--red); } }
@keyframes pulseGlow2{ to{ text-shadow:0 0 80px var(--blue),0 0 160px var(--blue); } }
.loader-bar { width:300px; height:2px; background:rgba(255,255,255,.08);
  border-radius:2px; overflow:hidden; margin:0 auto 1.2rem; }
#loader-fill { display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--red),var(--blue));
  border-radius:2px; transition:width .04s linear; }
.loader-text { font-family:var(--font-h); font-size:.65rem; letter-spacing:.3em;
  color:var(--muted); animation:blink 1s step-end infinite; }
@keyframes blink{ 50% { opacity:0; } }

/* ---- NAVBAR ---- */
#navbar { position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.4rem 0; transition:padding .4s, background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent; }
#navbar.scrolled { background:rgba(8,8,16,.9); backdrop-filter:blur(24px) saturate(1.5);
  padding:.75rem 0; border-color:var(--border); }
.nav-inner { max-width:1400px; margin:0 auto; padding:0 clamp(1rem,4vw,3rem);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.nav-brand { display:grid; grid-template-rows:auto auto; line-height:1; }
.nav-brand-row { display:flex; flex-direction:row; align-items:flex-end; line-height:1; }
.brand-M { font-family:var(--font-d); font-size:2.2rem; color:var(--red);
  text-shadow:0 0 20px var(--red-glow); line-height:1; display:inline; }
.brand-rest { font-family:var(--font-d); font-size:2.2rem; color:var(--white); line-height:1; display:inline; }
.brand-sub { font-family:var(--font-h); font-size:.42rem; letter-spacing:.22em;
  color:var(--blue); margin-top:.2rem; display:block; }
.nav-links { display:flex; align-items:center; gap:2rem; }
.nav-link { font-family:var(--font-b); font-size:1rem; font-weight:600;
  color:var(--muted); letter-spacing:.06em; transition:color .3s; position:relative; }
.nav-link::after { content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px;
  background:var(--red); border-radius:1px; transition:width .35s var(--ease-out); }
.nav-link:hover { color:var(--white); }
.nav-link:hover::after,
.nav-link.active::after { width:100%; }
.nav-link.active { color:var(--white); }
.nav-cta { font-family:var(--font-h); font-size:.72rem; padding:.55rem 1.4rem;
  background:var(--red); color:#fff; border-radius:3px; letter-spacing:.12em;
  border:1.5px solid var(--red);
  box-shadow:0 0 20px var(--red-glow),inset 0 1px 0 rgba(255,255,255,.15);
  transition:all .3s var(--ease-out); }
.nav-cta:hover { background:transparent; color:var(--red); box-shadow:0 0 40px var(--red),0 0 0 1px var(--red); }
.nav-toggle { display:none; flex-direction:column; gap:6px; background:none;
  border:none; cursor:pointer; padding:.4rem; z-index:1001; }
.nav-toggle span { display:block; width:22px; height:1.5px; background:var(--white);
  border-radius:2px; transition:transform .4s var(--ease-spring), opacity .3s; }

/* ---- HERO ---- */
#hero { position:relative; width:100%; height:100vh; min-height:600px;
  overflow:hidden; display:flex; align-items:center; background:#000; }
#road-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-road-overlay { position:absolute; inset:0;
  background:url('hero_road.png') center center/cover no-repeat;
  opacity:.42; transform:scale(1.12); will-change:transform;
  mask-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,.8) 45%,rgba(0,0,0,.15) 70%,transparent 90%);
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,.8) 45%,rgba(0,0,0,.15) 70%,transparent 90%); }
.hero-particles { position:absolute; inset:0; pointer-events:none; }

/* BIKE — mix-blend-mode:screen removes black background */
.hero-bike { position:absolute; bottom:0; right:0; z-index:6;
  width:clamp(300px,50vw,740px);
  opacity:0; transform:translateX(60px) scale(.9);
  transition:opacity 1.8s var(--ease-out), transform 1.8s var(--ease-out);
  will-change:transform, opacity; }
.hero-bike.show { opacity:1; transform:translateX(0) scale(1); }
.bike-blend { width:100%; display:block;
  filter:drop-shadow(0 0 50px rgba(255,32,32,.45)) drop-shadow(0 30px 80px rgba(0,0,0,.95)) drop-shadow(-10px 0 40px rgba(0,195,255,.12));
  mix-blend-mode:screen; }

/* Speed lines */
.speed-lines { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.speed-line { position:absolute; height:1px; border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:speedLine var(--dur,1.2s) var(--delay,0s) linear infinite; }
@keyframes speedLine { from{left:-40%;opacity:0} 10%{opacity:1} 90%{opacity:1} to{left:140%;opacity:0} }

/* Smoke layers */
.smoke-layer { position:absolute; inset:0; pointer-events:none; border-radius:50%;
  animation:smokePulse var(--t,8s) var(--d,0s) ease-in-out infinite alternate; }
.smoke-1 { background:radial-gradient(ellipse 90% 50% at 45% 88%,rgba(255,32,32,.07),transparent); --t:7s; --d:0s; }
.smoke-2 { background:radial-gradient(ellipse 70% 40% at 65% 92%,rgba(0,195,255,.05),transparent); --t:9s; --d:2s; }
.smoke-3 { background:radial-gradient(ellipse 110% 60% at 50% 75%,rgba(20,20,30,.5),transparent); --t:11s; --d:1s; }
@keyframes smokePulse{ 0%{transform:translateX(-8px) scaleX(.98)} 100%{transform:translateX(8px) scaleX(1.03)} }

/* Headlight bloom */
.headlight-bloom { position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:clamp(200px,30vw,400px); height:clamp(200px,30vw,400px);
  background:radial-gradient(circle,rgba(255,240,160,.55) 0%,rgba(255,200,80,.1) 30%,transparent 70%);
  border-radius:50%; opacity:0; pointer-events:none;
  animation:bloomPulse 3s ease-in-out infinite alternate; }
@keyframes bloomPulse{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.6)} 100%{opacity:.7;transform:translate(-50%,-50%) scale(1.4)} }

/* Hero Content */
.hero-content { position:relative; z-index:10; padding:0 clamp(1.5rem,5vw,5rem); max-width:680px; }
.hero-tag { font-family:var(--font-h); font-size:.62rem; letter-spacing:.32em;
  color:var(--blue); margin-bottom:1.2rem;
  opacity:0; transform:translateY(20px);
  transition:opacity .7s, transform .7s; }
.hero-tag.anim { opacity:1; transform:translateY(0); }

.hero-title { font-family:var(--font-d); line-height:.95; margin-bottom:1.1rem; }
.title-madarasi { display:block; font-size:clamp(4rem,9vw,8rem); color:var(--white);
  opacity:0; transform:translateX(-30px) skewX(-2deg);
  transition:opacity .8s .1s var(--ease-out), transform .8s .1s var(--ease-out); }
.title-madarasi.anim { opacity:1; transform:translateX(0) skewX(0); }

/* Glitch effect on MADARASI */
.title-madarasi.glitch { animation:glitch .5s steps(2) infinite; }
@keyframes glitch {
  0% { text-shadow:2px 0 var(--red),-2px 0 var(--blue); }
  20% { text-shadow:-3px 0 var(--blue),3px 0 var(--red); clip-path:inset(20% 0 60% 0); }
  40% { text-shadow:3px 0 var(--red),-3px 0 var(--blue); clip-path:inset(70% 0 10% 0); }
  60% { text-shadow:-2px 0 var(--blue),2px 0 var(--red); clip-path:none; }
  100% { text-shadow:0 0 var(--red),0 0 var(--blue); }
}

.title-moto { display:block; font-size:clamp(1.6rem,4.5vw,4rem);
  color:var(--red); letter-spacing:.04em;
  text-shadow:0 0 30px var(--red-glow),0 0 80px rgba(255,32,32,.2);
  opacity:0; transform:translateX(-30px) skewX(-2deg);
  transition:opacity .8s .28s var(--ease-out), transform .8s .28s var(--ease-out); }
.title-moto.anim { opacity:1; transform:translateX(0) skewX(0); }

/* Red neon flicker */
@keyframes neonFlicker {
  0%,18%,22%,25%,53%,57%,100% { text-shadow:0 0 30px var(--red-glow),0 0 80px rgba(255,32,32,.2),0 0 120px rgba(255,32,32,.1); }
  19%,24%,54%,56% { text-shadow:none; }
}
.title-moto.flicker { animation:neonFlicker 4s 7s infinite; }

.hero-tagline { font-family:var(--font-h); font-size:clamp(.9rem,1.8vw,1.3rem);
  color:var(--blue); letter-spacing:.18em; margin-bottom:2.5rem;
  opacity:0; transform:translateY(20px);
  transition:opacity .7s .5s, transform .7s .5s var(--ease-out); }
.hero-tagline.anim { opacity:1; transform:translateY(0); }

.hero-buttons { display:flex; flex-wrap:wrap; gap:1rem;
  opacity:0; transform:translateY(20px);
  transition:opacity .7s .72s, transform .7s .72s var(--ease-out); }
.hero-buttons.anim { opacity:1; transform:translateY(0); }

/* Scroll indicator */
.scroll-indicator { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  opacity:0; animation:fadeInUp .8s 6s forwards; }
@keyframes fadeInUp{ to{ opacity:.55; transform:translateX(-50%) translateY(0); } }
.scroll-wheel { width:22px; height:34px; border:1.5px solid rgba(255,255,255,.25);
  border-radius:11px; position:relative; }
.scroll-wheel::after { content:''; position:absolute; top:5px; left:50%;
  transform:translateX(-50%); width:3px; height:5px;
  background:var(--white); border-radius:2px;
  animation:scrollDot 1.8s ease infinite; }
@keyframes scrollDot{ 0%{opacity:1;top:5px} 100%{opacity:0;top:18px} }
.scroll-indicator span { font-family:var(--font-h); font-size:.5rem; letter-spacing:.2em; color:var(--muted); }

/* ---- SECTIONS ---- */
.section { position:relative; padding:clamp(5rem,9vw,9rem) 0; overflow:hidden; }
.container { max-width:1420px; margin:0 auto; padding:0 clamp(1rem,4vw,4rem); }
.section-tag { font-family:var(--font-h); font-size:.62rem; letter-spacing:.32em;
  color:var(--red); margin-bottom:1rem; text-transform:uppercase; }
.section-title { font-family:var(--font-d); font-size:clamp(2.8rem,6.5vw,5.5rem); line-height:.95; margin-bottom:1rem; }
.section-subtitle { font-size:1.05rem; color:var(--muted); margin-bottom:3.5rem; max-width:600px; line-height:1.7; }
.text-center { text-align:center; }
.text-center .section-subtitle { margin-left:auto; margin-right:auto; }
.neon-red { color:var(--red); text-shadow:0 0 25px var(--red-glow); }
.neon-blue { color:var(--blue); text-shadow:0 0 25px var(--blue-glow); }
.mt-2 { margin-top:2rem; }

/* ---- ANIMATE IN (scroll) ---- */
[data-reveal] { opacity:0; will-change:opacity,transform; transition:opacity .85s var(--ease-out),transform .85s var(--ease-out); }
[data-reveal="up"] { transform:translateY(60px); }
[data-reveal="left"] { transform:translateX(-55px); }
[data-reveal="right"] { transform:translateX(55px); }
[data-reveal="scale"] { transform:scale(.88); }
[data-reveal].visible { opacity:1; transform:none; }

/* Clip-path reveal for sections */
[data-clip-reveal] { clip-path:inset(0 100% 0 0); transition:clip-path .9s var(--ease-out); }
[data-clip-reveal].visible { clip-path:inset(0 0% 0 0); }

/* ---- BUTTONS ---- */
.btn { display:inline-flex; align-items:center; gap:.55rem; padding:.78rem 1.85rem;
  font-family:var(--font-h); font-size:.75rem; letter-spacing:.12em;
  border-radius:3px; border:1.5px solid transparent; cursor:pointer;
  transition:all .35s var(--ease-out); position:relative; overflow:hidden; }
.btn .btn-fill { position:absolute; inset:0; transform:translateY(101%);
  background:rgba(255,255,255,.06); transition:transform .4s var(--ease-out); }
.btn:hover .btn-fill { transform:translateY(0); }
.btn-primary { background:var(--red); color:#fff; border-color:var(--red);
  box-shadow:0 0 25px var(--red-glow),0 4px 20px rgba(255,32,32,.3); }
.btn-primary:hover { background:transparent; color:var(--red); box-shadow:0 0 45px var(--red),0 0 0 1px var(--red); }
.btn-outline { background:transparent; color:var(--blue); border-color:var(--blue);
  box-shadow:0 0 20px var(--blue-glow); }
.btn-outline:hover { background:var(--blue); color:#000; box-shadow:0 0 40px var(--blue); }
.btn-ghost { background:rgba(255,255,255,.04); color:var(--white); border-color:rgba(255,255,255,.15); }
.btn-ghost:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.35); }
.btn-sm { padding:.52rem 1.25rem; font-size:.68rem; }
.btn-whatsapp { background:#25d366; color:#fff; border-color:#25d366; padding:.5rem 1.1rem; font-size:.68rem; }
.btn-whatsapp:hover { background:transparent; color:#25d366; }
.w-full { width:100%; justify-content:center; }
.btn-icon { font-size:1em; }

/* Magnetic button wrapper */
.magnetic { display:inline-block; transition:transform .4s var(--ease-spring); }

/* ---- GARAGE SECTION ---- */
.garage-section { background:var(--dark2); }
.garage-bg-overlay { position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 60% at 0% 0%,rgba(255,32,32,.05),transparent),
             radial-gradient(ellipse 60% 60% at 100% 100%,rgba(0,195,255,.04),transparent); }
.garage-grid { display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center; margin-top:2rem; }
.garage-desc { color:var(--muted); line-height:1.85; margin-bottom:1.3rem; font-size:1.05rem; }
.garage-stats { display:flex; gap:2.5rem; margin:2.2rem 0; }
.stat-item { display:flex; flex-direction:column; gap:.3rem; }
.stat-num { font-family:var(--font-d); font-size:2.6rem; line-height:1; }
.stat-label { font-family:var(--font-h); font-size:.55rem; letter-spacing:.22em; color:var(--muted); }
.garage-visual { position:relative; }
.garage-neon-frame { padding:2px; background:linear-gradient(135deg,var(--red) 0%,transparent 40%,var(--blue) 100%); border-radius:10px;
  animation:frameGlow 4s ease-in-out infinite alternate; }
@keyframes frameGlow{ 0%{box-shadow:0 0 20px var(--red-glow)} 100%{box-shadow:0 0 40px var(--blue-glow)} }
.garage-img-holder { position:relative; border-radius:9px; overflow:hidden; aspect-ratio:4/3; }
.garage-img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.garage-img-holder:hover .garage-img { transform:scale(1.07); }
.garage-img-overlay { position:absolute; inset:0;
  background:linear-gradient(to top,rgba(8,8,16,.65) 0%,transparent 60%); }
.garage-badge { position:absolute; bottom:1.5rem; right:1.5rem;
  background:rgba(8,8,16,.88); border:1px solid var(--red); border-radius:5px;
  padding:.55rem 1.1rem; text-align:center; font-family:var(--font-h);
  backdrop-filter:blur(10px); }
.garage-badge span:first-child { display:block; font-size:.46rem; letter-spacing:.2em; color:var(--muted); }
.badge-year { font-size:1.6rem; color:var(--red); line-height:1.2; }
.floating-tag { position:absolute; background:rgba(8,8,16,.88);
  border-radius:25px; padding:.45rem 1.1rem;
  font-family:var(--font-h); font-size:.62rem; letter-spacing:.1em;
  backdrop-filter:blur(12px);
  animation:floatTag 3s ease-in-out infinite alternate; }
.tag-1 { top:8%; left:-8%; color:var(--blue); border:1px solid rgba(0,195,255,.4); --d:0s; }
.tag-2 { bottom:12%; right:-6%; color:var(--red); border:1px solid rgba(255,32,32,.4); --d:1.5s; }
@keyframes floatTag{ from{transform:translateY(0) rotate(-1deg)} to{transform:translateY(-12px) rotate(1deg)} }

/* ---- PRODUCTS GRID ---- */
.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.product-card { background:var(--card); border-radius:10px; overflow:hidden;
  border:1px solid var(--border); position:relative;
  transform-style:preserve-3d; perspective:1000px;
  transition:border-color .4s, box-shadow .4s;
  will-change:transform; }
.product-card:hover { border-color:rgba(255,32,32,.25); box-shadow:0 25px 70px rgba(255,32,32,.12),0 0 0 1px rgba(255,32,32,.08); }
.product-img-wrap { position:relative; aspect-ratio:4/3; overflow:hidden; background:#0d0d18; }
.product-img { width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease-out); }
.product-card:hover .product-img { transform:scale(1.09); }

/* Metallic shine sweep */
.product-shine { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.product-shine::after { content:''; position:absolute; inset:-100%;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%);
  transform:translateX(-120%) rotate(15deg);
  transition:transform .7s var(--ease-out); }
.product-card:hover .product-shine::after { transform:translateX(120%) rotate(15deg); }

.product-placeholder { width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.6rem;
  background:linear-gradient(135deg,#0d0d18 0%,#131320 100%); }
.parts-placeholder.blue { background:linear-gradient(135deg,#080818 0%,#0c1425 100%); }
.pp-icon { font-size:3.2rem; }
.pp-label { font-family:var(--font-h); font-size:.66rem; letter-spacing:.16em; color:var(--muted); }
.product-overlay { position:absolute; top:.9rem; left:.9rem; }
.product-tag { font-family:var(--font-h); font-size:.58rem; letter-spacing:.1em;
  background:var(--red); color:#fff; padding:.28rem .7rem; border-radius:2px; }
.product-info { padding:1.4rem; }
.product-info h3 { font-family:var(--font-b); font-size:1.15rem; font-weight:700;
  margin-bottom:.5rem; color:var(--white); letter-spacing:.02em; }
.product-info p { font-size:.92rem; color:var(--muted); line-height:1.65; margin-bottom:1.1rem; }
.product-footer { display:flex; align-items:center; justify-content:space-between; }
.product-badge { font-family:var(--font-h); font-size:.58rem; letter-spacing:.1em;
  color:#25d366; border:1px solid rgba(37,211,102,.3); padding:.2rem .6rem; border-radius:2px; }
.product-cta { font-family:var(--font-h); font-size:.68rem; letter-spacing:.1em;
  color:var(--red); transition:color .3s, transform .3s; display:flex; align-items:center; gap:.3rem; }
.product-cta:hover { color:var(--white); transform:translateX(4px); }
.card-glow { position:absolute; inset:0; border-radius:10px; pointer-events:none;
  opacity:0; transition:opacity .4s;
  box-shadow:inset 0 0 40px rgba(255,32,32,.08); }
.product-card:hover .card-glow { opacity:1; }

/* ---- GEAR SECTION ---- */
.gear-section { background:var(--dark3); }
.gear-bg-stripe { position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--red) 30%,var(--blue) 70%,transparent);
  animation:stripeMove 3s ease-in-out infinite alternate; }
@keyframes stripeMove{ from{opacity:.6} to{opacity:1} }
.gear-showcase { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-bottom:3.5rem; }
.gear-card { background:var(--card); border-radius:10px; overflow:hidden;
  border:1px solid var(--border); transition:border-color .4s, box-shadow .4s, transform .4s var(--ease-out);
  will-change:transform; }
.gear-card:hover { transform:translateY(-10px); border-color:rgba(0,195,255,.25);
  box-shadow:0 20px 60px rgba(0,195,255,.1); }
.gear-img-wrap { position:relative; aspect-ratio:1; overflow:hidden; background:#0d0d18; }
.gear-img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.gear-card:hover .gear-img { transform:scale(1.1); }
.gear-shine { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.gear-shine::after { content:''; position:absolute; inset:-100%;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.1) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform .7s var(--ease-out); }
.gear-card:hover .gear-shine::after { transform:translateX(120%); }
.gear-placeholder { width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.6rem;
  background:linear-gradient(135deg,#0d0d18,#131325); }
.gear-placeholder.blue-ph { background:linear-gradient(135deg,#080820,#0c1428); }
.gp-icon { font-size:3.8rem; }
.gp-label { font-family:var(--font-h); font-size:.62rem; letter-spacing:.15em; color:var(--muted); }
.gear-info { padding:1.3rem; text-align:center; }
.gear-icon { font-size:1.4rem; margin-bottom:.4rem; }
.gear-info h3 { font-family:var(--font-b); font-size:1.1rem; font-weight:700; margin-bottom:.5rem; color:var(--white); }
.gear-info p { font-size:.86rem; color:var(--muted); line-height:1.65; margin-bottom:1.1rem; }
.safety-banner { display:flex; align-items:center; gap:2rem;
  background:linear-gradient(135deg,rgba(0,195,255,.06),rgba(255,32,32,.06));
  border:1px solid rgba(0,195,255,.15); border-radius:10px; padding:1.75rem 2.25rem;
  position:relative; overflow:hidden; }
.safety-banner::before { content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.02),transparent);
  animation:scanLine 4s linear infinite; }
@keyframes scanLine{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }
.safety-icon { font-size:2.8rem; flex-shrink:0; animation:shieldPulse 2s ease-in-out infinite alternate; }
@keyframes shieldPulse{ to{transform:scale(1.1)} }
.safety-text { flex:1; display:flex; flex-direction:column; gap:.3rem; }
.safety-text strong { color:var(--white); font-size:1.05rem; }
.safety-text span { color:var(--muted); font-size:.9rem; }

/* ---- BUILDS ---- */
.builds-section { background:var(--dark2); }
.builds-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.build-card { background:var(--card); border-radius:12px; border:1px solid var(--border);
  overflow:hidden; transition:border-color .4s, box-shadow .4s, transform .4s var(--ease-out); }
.build-card:hover { transform:translateY(-7px); box-shadow:0 25px 60px rgba(255,32,32,.1); border-color:rgba(255,32,32,.2); }
.featured-build { border-color:rgba(0,195,255,.25); box-shadow:0 0 40px rgba(0,195,255,.06); }
.featured-label { text-align:center; background:linear-gradient(90deg,var(--blue),var(--red));
  padding:.55rem; font-family:var(--font-h); font-size:.62rem; letter-spacing:.15em; color:#fff; }
.build-header { padding:1.5rem; }
.build-bike-img { position:relative; height:180px; border-radius:8px; overflow:hidden; background:#0d0d18; }
.build-bike-img img { width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease-out); mix-blend-mode:screen; }
.build-card:hover .build-bike-img img { transform:scale(1.06); }
.build-img-glow { position:absolute; inset:0; border-radius:8px; }
.build-img-glow.red { background:linear-gradient(to top,rgba(255,32,32,.45),transparent 60%); }
.build-img-glow.blue { background:linear-gradient(to top,rgba(0,195,255,.4),transparent 60%); }
.build-badge { position:absolute; top:1rem; right:1rem;
  font-family:var(--font-h); font-size:.58rem; letter-spacing:.1em; padding:.28rem .7rem; border-radius:2px; }
.neon-red-badge { background:rgba(255,32,32,.18); color:var(--red); border:1px solid rgba(255,32,32,.5); }
.neon-blue-badge { background:rgba(0,195,255,.18); color:var(--blue); border:1px solid rgba(0,195,255,.5); }
.build-body { padding:0 1.5rem 1.5rem; }
.build-body h3 { font-family:var(--font-b); font-size:1.2rem; font-weight:700; margin-bottom:.3rem; }
.build-sub { color:var(--muted); font-size:.9rem; margin-bottom:1rem; }
.build-list { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.build-list li { display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:var(--muted); }
.check-icon { color:var(--blue); font-size:.75rem; flex-shrink:0; }
.check-icon.red { color:var(--red); }

/* ---- WHY US ---- */
.why-section { background:var(--dark); }
.why-bg-grid { position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px;
  animation:gridScroll 20s linear infinite; }
@keyframes gridScroll { from{background-position:0 0} to{background-position:44px 44px} }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:5rem; }
.trust-card { background:var(--card); border-radius:10px; padding:2.25rem;
  border:1px solid var(--border);
  transition:border-color .4s, box-shadow .4s, transform .4s var(--ease-out); position:relative; overflow:hidden; }
.trust-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  transform:translateX(-100%); transition:transform .6s var(--ease-out); }
.trust-card:hover::before { transform:translateX(100%); }
.trust-card:hover { border-color:rgba(255,32,32,.2); transform:translateY(-6px);
  box-shadow:0 12px 40px rgba(255,32,32,.07); }
.trust-icon { font-size:2.6rem; margin-bottom:1rem;
  display:inline-block; transition:transform .4s var(--ease-spring); }
.trust-card:hover .trust-icon { transform:scale(1.15) rotate(-5deg); }
.trust-card h3 { font-family:var(--font-b); font-size:1.12rem; font-weight:700; margin-bottom:.8rem; color:var(--white); }
.trust-card p { color:var(--muted); line-height:1.75; font-size:.94rem; }

/* Reviews */
.reviews-title { font-family:var(--font-d); font-size:clamp(2rem,4vw,3.5rem); margin-bottom:2.5rem; text-align:center; }
.reviews-track-wrap { overflow:hidden; margin-bottom:1.5rem; cursor:grab; }
.reviews-track-wrap:active { cursor:grabbing; }
.reviews-track { display:flex; gap:1.5rem; transition:transform .5s var(--ease-out); user-select:none; }
.review-card { min-width:clamp(280px,30vw,360px); background:var(--card2); border-radius:12px;
  padding:2rem; border:1px solid var(--border); flex-shrink:0;
  transition:border-color .4s, transform .4s; }
.review-card:hover { border-color:rgba(255,32,32,.2); transform:translateY(-4px); }
.review-stars { color:#ffd700; font-size:1.1rem; margin-bottom:1rem; letter-spacing:.15em; }
.review-text { color:var(--muted); line-height:1.75; font-size:.93rem; margin-bottom:1.5rem; font-style:italic; }
.review-author { display:flex; align-items:center; gap:.85rem; }
.review-avatar { width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-h); font-size:1rem; font-weight:700;
  background:linear-gradient(135deg,var(--red),var(--blue)); }
.review-author strong { display:block; font-size:.95rem; color:var(--white); margin-bottom:.1rem; }
.review-author span { font-size:.78rem; color:var(--muted); }
.reviews-dots { display:flex; gap:.5rem; justify-content:center; }
.review-dot { width:7px; height:7px; border-radius:50%; background:#222;
  cursor:pointer; border:none; transition:all .3s; }
.review-dot.active { background:var(--red); transform:scale(1.4); box-shadow:0 0 8px var(--red-glow); }

/* ---- CONTACT ---- */
.contact-section { background:var(--dark2); }
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:3.5rem; align-items:start; margin-top:2.5rem; }
.info-card { display:flex; gap:1.25rem; background:var(--card); border-radius:10px;
  padding:1.6rem; margin-bottom:1rem; border:1px solid var(--border);
  transition:border-color .35s, box-shadow .35s, transform .35s var(--ease-out); }
.info-card:hover { border-color:rgba(255,32,32,.2); transform:translateX(6px);
  box-shadow:0 8px 30px rgba(255,32,32,.06); }
.info-icon { font-size:1.8rem; flex-shrink:0; }
.info-details h4 { font-family:var(--font-b); font-weight:700; font-size:1rem; margin-bottom:.5rem; color:var(--white); }
.info-details p { color:var(--muted); font-size:.9rem; line-height:1.75; }
.info-link,.info-phone { color:var(--blue); transition:color .3s; }
.info-link:hover,.info-phone:hover { color:var(--white); }
.info-sub { font-size:.78rem; color:var(--muted); display:block; margin-top:.25rem; }
.social-title { font-family:var(--font-b); font-weight:700; margin-bottom:1rem; color:var(--white); font-size:1rem; }
.social-links { display:flex; flex-wrap:wrap; gap:.75rem; }
.social-btn { display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:5px;
  font-family:var(--font-h); font-size:.66rem; letter-spacing:.08em;
  transition:all .35s var(--ease-out); border:1px solid transparent; }
.social-btn svg { width:15px; height:15px; flex-shrink:0; }
.social-btn.insta { background:rgba(225,48,108,.12); color:#e1306c; border-color:rgba(225,48,108,.25); }
.social-btn.insta:hover { background:#e1306c; color:#fff; transform:translateY(-3px); box-shadow:0 8px 20px rgba(225,48,108,.35); }
.social-btn.fb { background:rgba(24,119,242,.12); color:#1877f2; border-color:rgba(24,119,242,.25); }
.social-btn.fb:hover { background:#1877f2; color:#fff; transform:translateY(-3px); box-shadow:0 8px 20px rgba(24,119,242,.35); }
.social-btn.yt { background:rgba(255,0,0,.12); color:#ff0000; border-color:rgba(255,0,0,.25); }
.social-btn.yt:hover { background:#ff0000; color:#fff; transform:translateY(-3px); box-shadow:0 8px 20px rgba(255,0,0,.35); }
.social-btn.gmaps { background:rgba(66,133,244,.12); color:#4285f4; border-color:rgba(66,133,244,.25); }
.social-btn.gmaps:hover { background:#4285f4; color:#fff; transform:translateY(-3px); box-shadow:0 8px 20px rgba(66,133,244,.35); }
.map-wrap { position:relative; border-radius:12px; overflow:hidden;
  border:1.5px solid rgba(255,32,32,.2); aspect-ratio:16/10;
  box-shadow:0 0 40px rgba(255,32,32,.06); }
.map-wrap iframe { width:100%; height:100%; border:none; display:block;
  filter:invert(88%) hue-rotate(182deg) saturate(.85); }
.map-overlay { position:absolute; inset:0; display:flex; align-items:flex-end;
  justify-content:center; padding-bottom:1.5rem;
  background:linear-gradient(to top,rgba(8,8,16,.65),transparent 50%); pointer-events:none; }
.map-overlay .btn { pointer-events:all; }
.whatsapp-cta { display:flex; align-items:center; gap:1rem;
  background:rgba(37,211,102,.07); border:1px solid rgba(37,211,102,.18);
  border-radius:10px; padding:1.3rem 1.5rem; margin-top:1rem;
  transition:border-color .3s, background .3s; }
.whatsapp-cta:hover { background:rgba(37,211,102,.1); border-color:rgba(37,211,102,.3); }
.wa-icon svg { width:2.2rem; height:2.2rem; fill:#25d366; flex-shrink:0; }
.wa-text { flex:1; }
.wa-text strong { display:block; color:var(--white); font-size:.95rem; margin-bottom:.2rem; }
.wa-text span { font-size:.8rem; color:var(--muted); }

/* ---- FOOTER ---- */
#footer { background:#04040c; border-top:1px solid var(--border); position:relative; overflow:hidden; padding:5rem 0 0; }
.footer-glow { position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:800px; height:2px; background:linear-gradient(90deg,transparent,var(--red) 40%,var(--blue) 60%,transparent); }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3.5rem; margin-bottom:3.5rem; }
.footer-logo { font-family:var(--font-d); font-size:2.1rem; line-height:1.15; margin-bottom:1rem; }
.footer-tagline-small { font-family:var(--font-h); font-size:.44rem; letter-spacing:.22em; color:var(--blue); }
.footer-desc { color:var(--muted); font-size:.9rem; line-height:1.75; margin-bottom:1.5rem; max-width:270px; }
.footer-socials { display:flex; gap:.9rem; }
.footer-socials a { width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--dark3); border:1px solid var(--border); color:var(--muted);
  transition:all .35s var(--ease-out); }
.footer-socials a svg { width:15px; height:15px; }
.footer-socials a:hover { background:var(--red); color:#fff; border-color:var(--red);
  transform:translateY(-4px) scale(1.1); box-shadow:0 6px 20px var(--red-glow); }
.footer-links-group h4,.footer-contact-col h4 { font-family:var(--font-b); font-weight:700;
  font-size:1rem; margin-bottom:1.4rem; color:var(--white); }
.footer-links-group ul { display:flex; flex-direction:column; gap:.65rem; }
.footer-links-group li a { color:var(--muted); font-size:.9rem; transition:color .3s, padding-left .3s; }
.footer-links-group li a:hover { color:var(--red); padding-left:4px; }
.footer-contact-col p { color:var(--muted); font-size:.9rem; line-height:1.75; margin-bottom:.5rem; }
.footer-contact-col a { color:var(--blue); }
.footer-contact-col a:hover { color:var(--white); }
.footer-bottom { border-top:1px solid var(--border); padding:1.5rem 0;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.footer-bottom p { color:var(--muted); font-size:.83rem; }
.footer-credit { color:var(--red)!important; }

/* ---- FLOATING BUTTONS ---- */
.float-whatsapp,.float-call { position:fixed; bottom:2rem; right:2rem; z-index:900;
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; opacity:0; transition:all .4s var(--ease-spring); }
.float-whatsapp { background:#25d366; box-shadow:0 4px 24px rgba(37,211,102,.4); }
.float-whatsapp svg { width:26px; height:26px; fill:#fff; }
.float-whatsapp:hover { transform:scale(1.12) translateY(-3px); box-shadow:0 8px 35px rgba(37,211,102,.55); }
.float-call { right:6.8rem; background:var(--red); box-shadow:0 4px 24px var(--red-glow); }
.float-call svg { width:24px; height:24px; fill:#fff; }
.float-call:hover { transform:scale(1.12) translateY(-3px); box-shadow:0 8px 35px var(--red); }
.float-wa-pulse { position:absolute; width:100%; height:100%; border-radius:50%;
  border:1.5px solid #25d366; animation:pulseRing 2.2s ease infinite; }
@keyframes pulseRing{ 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.85);opacity:0} }

/* ---- SVG ART PRODUCT ILLUSTRATIONS ---- */
.svg-art-wrap { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:var(--dark2); overflow:hidden; position:relative; }
.svg-art-wrap svg { width:100%; height:100%; display:block; }
.oil-art { background:radial-gradient(ellipse 80% 70% at 50% 60%,#1a0808,#08000a); }
.paddock-art { background:radial-gradient(ellipse 80% 70% at 50% 50%,#080d18,#04060e); }
.tankpad-art { background:#0a0a10; }
.ecu-art { background:radial-gradient(ellipse 80% 70% at 50% 50%,#040c0a,#04060e); }
.boot-art { background:radial-gradient(ellipse 80% 80% at 50% 80%,#150808,#08000a); }
.glove-art { background:radial-gradient(ellipse 80% 80% at 50% 60%,#060c18,#04060e); }

/* ---- GEAR SVG ICON ---- */
.gear-svg-icon { width:1.8rem; height:1.8rem; display:block; margin:0 auto .6rem; }

/* ---- TRUST CARD SVG ICONS ---- */
.trust-icon svg { width:3.2rem; height:3.2rem; display:block;
  filter:drop-shadow(0 0 10px rgba(255,32,32,.5));
  transition:transform .4s var(--ease-spring), filter .4s; }
.trust-card:hover .trust-icon svg { transform:scale(1.18) rotate(-4deg);
  filter:drop-shadow(0 0 20px rgba(255,32,32,.8)); }
.trust-icon { font-size:0; margin-bottom:1rem; }


@keyframes cameraShake{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  15%{transform:translate(-5px,3px) rotate(-.3deg)}
  30%{transform:translate(5px,-4px) rotate(.3deg)}
  45%{transform:translate(-3px,5px) rotate(-.2deg)}
  60%{transform:translate(4px,-2px) rotate(.2deg)}
  75%{transform:translate(-4px,2px) rotate(-.1deg)}
}
.shaking { animation:cameraShake .5s ease; }

/* ---- RESPONSIVE ---- */
@media(max-width:1200px){
  .products-grid { grid-template-columns:repeat(2,1fr); }
  .trust-grid { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media(max-width:960px){
  .garage-grid { grid-template-columns:1fr; }
  .gear-showcase { grid-template-columns:repeat(2,1fr); }
  .builds-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
}
@media(max-width:768px){
  .nav-links { display:none; position:fixed; inset:0; background:rgba(8,8,16,.97);
    backdrop-filter:blur(20px); flex-direction:column; align-items:center;
    justify-content:center; gap:2rem; z-index:999; }
  .nav-links.open { display:flex; }
  .nav-toggle { display:flex; }
  .hero-content { padding:0 1.5rem; }
  .hero-bike { width:75vw; right:0; bottom:0; opacity:.35; }
  .products-grid { grid-template-columns:1fr; }
  .trust-grid { grid-template-columns:1fr; }
  .safety-banner { flex-direction:column; text-align:center; }
  .float-call { display:none; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .garage-stats { gap:1.5rem; }
}
@media(max-width:480px){
  .gear-showcase { grid-template-columns:1fr; }
  .hero-buttons { flex-direction:column; }
  .hero-buttons .btn { width:100%; justify-content:center; }
  .social-links { flex-direction:column; }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* Map Delivery Bike Animation Zomato Style */
.map-wrap {
  position: relative;
  overflow: hidden;
}

.map-delivery-bike {
  position: absolute;
  top: 10px;
  left: -40px;
  font-size: 2rem;
  z-index: 10;
  animation: rideBike 15s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

@keyframes rideBike {
  0% { left: -40px; transform: scaleX(1); }
  45% { left: calc(100% + 40px); transform: scaleX(1); }
  50% { left: calc(100% + 40px); transform: scaleX(-1); }
  95% { left: -40px; transform: scaleX(-1); }
  100% { left: -40px; transform: scaleX(1); }
}