/* =========================
   GLOBAL
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Montserrat',sans-serif;
}

body{
background:#000;
color:white;
line-height:1.5;
}

html, body{
overflow-x:hidden;
}

/* =========================
   HEADER
========================= */

header{
position:fixed;
top:0;
left:0;

width:100%;

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 60px;

background:transparent;

z-index:10000;

transition:all .3s ease;
}

header.scrolled{
background:#0b0b0b;
padding:12px 60px;
}

.logo img{
height:50px;
}

nav ul{
display:flex;
align-items:center;
gap:30px;
list-style:none;
}

nav a{
color:white;
text-decoration:none;
font-weight:600;
transition:.25s;
}

nav a:hover{
color:#ff1a1a;
}



/* =========================
   HERO
========================= */

.hero{

height:100vh;

background:url("img/inji.png") center/cover no-repeat;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

position:relative;

padding:0 20px;

}

.hero::before{

content:"";

position:absolute;
inset:0;

background:linear-gradient(
90deg,
rgba(0,0,0,.92) 0%,
rgba(0,0,0,.70) 40%,
rgba(0,0,0,.45) 70%,
rgba(0,0,0,.3) 100%
);

z-index:1;
}

.hero-content{
position:relative;
z-index:2;
max-width:800px;
}



/* =========================
   BRAND TITLE
========================= */

.brand{
font-size:72px;
line-height:.8;
font-weight:900;
margin-bottom:25px;
}

.boosted{
color:#ff1a1a;
display:block;
letter-spacing:3px;
}

.performance{
color:white;
font-style:italic;
}



/* =========================
   HERO TEXT
========================= */

.tagline{
font-size:26px;
margin-bottom:6px;
}

.tagline2{
font-size:20px;
font-weight:500;
margin-bottom:20px;
opacity:.9;
}



/* =========================
   TRUST TEXT
========================= */

.trust{
font-size:15px;
opacity:.85;
line-height:1.6;
margin-bottom:40px;
}



/* =========================
   WHATSAPP BUTTON
========================= */

.whatsapp-btn{

display:inline-block;

padding:16px 42px;

border-radius:6px;

color:#25D366;

font-weight:700;

border:2px solid #25D366;

text-decoration:none;

animation:neonGreen 2s infinite alternate;

}

@keyframes neonGreen{

from{
box-shadow:
0 0 6px #25D366,
0 0 12px #25D366,
0 0 20px #25D366;
}

to{
box-shadow:
0 0 12px #25D366,
0 0 25px #25D366,
0 0 40px #25D366;
}

}



/* =========================
   FINDER SECTION
========================= */

.finder{

padding:160px 5%;

text-align:center;

background:
linear-gradient(
rgba(0,0,0,.96),
rgba(0,0,0,.96)
),
url("img/bglaunch.png") center/cover no-repeat;

}

.finder h2{
font-size:46px;
font-weight:800;
letter-spacing:3px;
margin-bottom:55px;
}

.finder select{

background:#161616;

border:1px solid rgba(255,255,255,.07);

padding:14px 24px;

border-radius:10px;

color:white;

font-size:16px;

outline:none;

margin-bottom:60px;

box-shadow:0 0 10px rgba(255,255,255,.03);

}



/* =========================
   INJECTOR GRID
========================= */

.injector-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:50px;

width:100%;

max-width:1400px;

margin:auto;

margin-top:70px;

}

.injector-card{

background:#151515;

padding:22px;

border-radius:14px;

border:1px solid rgba(255,255,255,.05);

transition:all .35s ease;

}

.injector-card:hover{

transform:translateY(-12px);

box-shadow:
0 25px 50px rgba(0,0,0,.8);

}

.injector-card img{

width:85%;

margin:auto;

display:block;

border-radius:10px;

margin-bottom:12px;

}

.injector-card p{

font-size:16px;

opacity:.9;

}



/* =========================
   SHOP INJECTORS SECTION
========================= */

.shop{

padding:160px 5%;

background:#0b0b0b;

text-align:center;

}

.shop h2{

font-size:46px;

letter-spacing:3px;

font-weight:800;

margin-bottom:80px;

}

.shop-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:50px;

max-width:1400px;

margin:auto;

}



/* SHOP CARD */

.shop-card{

background:#151515;

padding:30px;

border-radius:16px;

border:1px solid rgba(255,255,255,.05);

transition:all .35s ease;

}

.shop-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 50px rgba(0,0,0,.8);

}



/* FEATURED CARD */

.shop-card.featured{

border:1px solid rgba(255,0,0,.25);

transform:scale(1.05);

}



/* IMAGE */


.shop-card img{

width:70%;

margin:auto;

display:block;

margin-bottom:20px;

object-fit:contain;

}



/* TITLE */

.shop-card h3{

font-size:22px;

margin-bottom:10px;

}



/* DESCRIPTION */

.shop-card p{

font-size:15px;

opacity:.85;

margin-bottom:15px;

}



/* BRAND LABEL */

.brand-label{

margin-top:10px;

font-size:14px;

opacity:.7;

}



/* BRAND LIST */

.brand-list{

margin-top:8px;

font-size:14px;

letter-spacing:1px;

opacity:.9;

margin-bottom:15px;

}



/* LINK */

.shop-card a{

color:#ff1a1a;

text-decoration:none;

font-weight:600;

}



/* =========================
   RESPONSIVE
========================= */

@media (max-width:900px){

.brand{
font-size:48px;
}

.tagline{
font-size:22px;
}

header{
padding:15px 25px;
}

}
/* =========================
   GALLERY SECTION
========================= */

.gallery{

padding:160px 5%;

background:#050505;

text-align:center;

}

.gallery h2{

font-size:46px;

letter-spacing:3px;

font-weight:800;

margin-bottom:80px;

}



/* GRID */

.gallery-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

grid-auto-rows:250px;

gap:25px;

max-width:1400px;

margin:auto;

}



/* ITEMS */

.gallery-item{

position:relative;

overflow:hidden;

border-radius:14px;

}

.gallery-item img{

width:100%;
height:100%;

object-fit:cover;

transition:transform .5s ease;

}

.gallery-item iframe{

width:100%;
height:100%;

border:0;

}



/* HOVER ZOOM */

.gallery-item:hover img{

transform:scale(1.08);

}



/* LARGE TILE */

.gallery-item.large{

grid-column:span 2;

grid-row:span 2;

}



/* VIDEO OVERLAY */

.video-overlay{

position:absolute;

bottom:15px;

left:15px;

color:white;

font-size:16px;

font-weight:600;

background:rgba(0,0,0,.6);

padding:8px 14px;

border-radius:6px;

}



/* MOBILE */

@media(max-width:900px){

.gallery-grid{

grid-template-columns:1fr 1fr;

grid-auto-rows:200px;

}

.gallery-item.large{

grid-column:span 2;

}

}
/* =========================
   POPULAR INJECTORS
========================= */

.popular{

padding:160px 5%;

background:#0b0b0b;

text-align:center;

}

.popular h2{

font-size:46px;

letter-spacing:3px;

font-weight:800;

margin-bottom:80px;

}



/* grid */

.popular-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:40px;

max-width:1200px;

margin:auto;

}



/* cards */

.popular-card{

background:#151515;

padding:35px;

border-radius:14px;

border:1px solid rgba(255,255,255,.05);

transition:.3s;

}



/* hover */

.popular-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 50px rgba(0,0,0,.7);

}



/* injector size */

.popular-card h3{

font-size:32px;

margin-bottom:15px;

color:#ff1a1a;

}



/* description */

.popular-card p{

font-size:14px;

opacity:.85;

margin-bottom:20px;

line-height:1.6;

}

/* =========================
   FLOATING WHATSAPP BUTTON
========================= */

.whatsapp-float{

position:fixed;

bottom:25px;
right:25px;

width:60px;
height:60px;

background:#25D366;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

z-index:9999;

animation:whatsappGlow 2s infinite alternate;

}

.whatsapp-float img{

width:32px;
height:32px;

}

/* neon glow */

@keyframes whatsappGlow{

from{

box-shadow:
0 0 6px #25D366,
0 0 12px #25D366,
0 0 20px #25D366;

}

to{

box-shadow:
0 0 12px #25D366,
0 0 25px #25D366,
0 0 45px #25D366;

}

}

/* =========================
   INJECTOR PRICES & SPECIALS
========================= */

.injector-specials{

width:100%;

padding:160px 0;



}

/* CENTER CONTENT */

.special-container{

max-width:1200px;

margin:auto;

padding:0 5%;

text-align:center;

}


/* TITLE */

.injector-specials h2{

font-size:48px;

letter-spacing:3px;

font-weight:800;

margin-bottom:90px;

}


/* GRID */

.special-grid{

display:grid;

grid-template-columns:1fr 1fr 1fr;

gap:40px;

align-items:center;

}


/* CENTER INJECTOR IMAGE */

.special-image{

grid-row: span 2;

display:flex;

align-items:center;

justify-content:center;

}

.special-image img{

width:100%;

max-width:400px;

filter:drop-shadow(0 30px 40px rgba(0,0,0,.9));

}


/* CARDS */

.special-card{

background:#121212;

padding:40px;

border-radius:16px;

border:1px solid rgba(255,255,255,.05);


transition:all .35s ease;
}

.special-card:hover{

transform:translateY(-8px);

border:1px solid rgba(255,0,0,0.6);

box-shadow:
0 0 10px rgba(255,0,0,0.25),
0 0 25px rgba(255,0,0,0.15);

}


/* INJECTOR SIZE */

.special-card h3{

font-size:30px;

color:#ff2b2b;

margin-bottom:12px;

}


/* DESCRIPTION */

.special-card p{

font-size:14px;

opacity:.85;

line-height:1.6;

margin-bottom:15px;

}


/* PRICE */

.price{

font-size:28px;

font-weight:800;

margin-bottom:18px;

}


/* WHATSAPP BUTTON */

.special-card a{

display:inline-block;

padding:10px 18px;

border-radius:6px;

background:#25D366;

color:#000;

font-weight:700;

text-decoration:none;

font-size:13px;

transition:.3s;

}

.special-card a:hover{

transform:scale(1.05);

box-shadow:
0 0 10px #25D366,
0 0 25px #25D366;

}


/* MOBILE */

@media(max-width:900px){

.special-grid{

grid-template-columns:1fr;

}

.special-image{

order:-1;

margin-bottom:40px;

}

.injector-specials{

padding:120px 0;

}

}
/* =========================
   FOOTER
========================= */

.footer{

background:#050505;

padding:60px 5% 10px;

border-top:1px solid rgba(255,255,255,.05);

}


/* FOOTER GRID */

.footer-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:50px;

align-items:start;

}


/* BRAND */

.footer-brand h2{

font-size:32px;

margin-bottom:12px;

}

.footer-brand span{

color:#ff1a1a;

}

.footer-brand p{

opacity:.8;

line-height:1.6;

max-width:420px;

}


/* LINKS */

.footer-links h3,
.footer-contact h3{

margin-bottom:12px;

}

.footer-links ul{

list-style:none;

}

.footer-links li{

margin-bottom:8px;

}

.footer-links a{

text-decoration:none;

color:#fff;

opacity:.8;

transition:.3s;

}

.footer-links a:hover{

color:#ff1a1a;

}


/* CONTACT */

.footer-contact p{

margin-bottom:8px;

opacity:.8;

}


/* WHATSAPP BUTTON */

.footer-whatsapp{

display:inline-block;

margin-top:10px;

padding:10px 18px;

background:#25D366;

color:#000;

font-weight:700;

border-radius:6px;

text-decoration:none;

transition:.3s;

}

.footer-whatsapp:hover{

transform:scale(1.05);

box-shadow:
0 0 10px #25D366,
0 0 25px #25D366;

}


/* COPYRIGHT */

.footer-bottom{

text-align:center;

margin-top:25px;

padding-top:12px;

border-top:1px solid rgba(255,255,255,.05);

opacity:.7;

font-size:13px;

}

/* prevent header covering sections */

section{
scroll-margin-top:110px;
}


/* =========================
   HEADER
========================= */

#header{

position:fixed;

top:0;
left:0;

width:100%;

padding:20px 5%;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(0,0,0,.3);

backdrop-filter:blur(8px);

z-index:1000;

transition:.3s;

}


/* header on scroll */

#header.scrolled{

background:#000;

padding:14px 5%;

}


/* =========================
   LOGO
========================= */

.logo{

font-size:22px;

font-weight:800;

letter-spacing:2px;

color:#fff;

}

.logo span{
color:#ff2b2b;
}


/* =========================
   NAVIGATION
========================= */

.nav a{

position:relative;

text-decoration:none;

margin-left:30px;

color:#fff;

font-weight:500;

transition:.3s;

}


/* hover */

.nav a:hover{
color:#ff2b2b;
}


/* active section */

.nav a.active{
color:#ff2b2b;
}


/* underline animation */

.nav a::after{

content:"";

position:absolute;

left:0;
bottom:-6px;

width:0;
height:2px;

background:#ff2b2b;

transition:.3s;

}

.nav a:hover::after,
.nav a.active::after{

width:100%;

}


/* MOBILE */

@media(max-width:900px){

.footer-container{

grid-template-columns:1fr;

gap:35px;

text-align:center;

}

.footer{

padding:50px 5% 10px;

}

}
/* =========================
SCROLL ANIMATIONS
========================= */

.reveal,
.reveal-left,
.reveal-right,
.reveal-top{

opacity:0;

transition:all 1s ease;

}


/* fade up */

.reveal{

transform:translateY(60px);

}


/* slide left */

.reveal-left{

transform:translateX(-80px);

}


/* slide right */

.reveal-right{

transform:translateX(80px);

}


/* slide top */

.reveal-top{

transform:translateY(-60px);

}


/* when visible */

.reveal.active,
.reveal-left.active,
.reveal-right.active,
.reveal-top.active{

opacity:1;

transform:translateX(0) translateY(0);

}
/* =========================
   BURGER MENU
========================= */

.burger{

display:none;

flex-direction:column;

cursor:pointer;

gap:6px;

z-index:2000;

}

.burger span{

width:28px;
height:3px;

background:white;

display:block;

transition:.3s;

}

/* BURGER DEFAULT */

.burger{
display:none;
flex-direction:column;
gap:6px;
cursor:pointer;
}

.burger span{
width:28px;
height:3px;
background:white;
display:block;
}

/* =========================
   WHY BOOSTED PERFORMANCE
========================= */

.why{

padding:120px 5%;

background:#0b0b0b;

text-align:center;

}

.why h2{

font-size:42px;

letter-spacing:3px;

font-weight:800;

margin-bottom:25px;

}

.why-intro{

font-size:18px;

opacity:.9;

margin-bottom:30px;

max-width:700px;

margin-left:auto;
margin-right:auto;

}


/* LIST */

.why-list{

list-style:none;

max-width:500px;

margin:0 auto 35px;

text-align:center;

padding:0;

}

.why-list li{

font-size:17px;

margin-bottom:14px;

opacity:.9;

}


/* OUTRO TEXT */

.why-outro{

font-size:16px;

opacity:.8;

max-width:500px;

margin:auto;

line-height:1.6;

}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width:900px){

/* prevent sideways scroll */

html,body{
overflow-x:hidden;
}
.hero{

background-attachment:fixed;

background-position:85% 60%;

background-size:cover;

}

/* HEADER */

#header{
padding:15px 20px;
}


/* BURGER BUTTON */

.burger{
display:flex;
flex-direction:column;
gap:6px;
cursor:pointer;
margin-left:auto;
z-index:2000;
}

.burger span{
width:28px;
height:3px;
background:white;
display:block;
}


/* NAV MENU */

.nav{

position:fixed;

top:0;
right:-100%;

height:100vh;
width:260px;

background:#000;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:35px;

transition:.4s;

}

.nav.active{
right:0;
}


/* HERO TEXT */

.brand{
font-size:48px;
}

.tagline{
font-size:22px;
}

.tagline2{
font-size:18px;
}


/* GALLERY */

.gallery-grid{
grid-template-columns:1fr 1fr;
grid-auto-rows:200px;
}

.gallery-item.large{
grid-column:span 2;
grid-row:span 1;
}


/* SPECIALS GRID */

.special-grid{
grid-template-columns:1fr;
}

.special-image{
order:-1;
margin-bottom:40px;
}

.injector-specials{
padding:120px 0;
}


/* FOOTER */

.footer-container{
grid-template-columns:1fr;
gap:35px;
text-align:center;
}

.footer{
padding:50px 5% 10px;
}

}