:root{

--bg:#08160d;
--bg-light:#0d2415;
--surface:#102d1b;
--surface-2:#143822;

--gold:#d4af37;
--gold-light:#f3d26a;
--gold-dark:#b98a0a;

--white:#ffffff;
--text:#edf5ee;
--muted:#b9c7bc;

--border:rgba(255,255,255,.08);

--shadow:
0 15px 40px rgba(0,0,0,.25);

--transition:.35s ease;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
line-height:1.7;

}

/* =========================
   CUSTOM SCROLLBAR
========================= */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:var(--bg);
}

::-webkit-scrollbar-thumb{

background:
linear-gradient(
180deg,
var(--gold),
var(--gold-light)
);

border-radius:20px;

}

/* =========================
   CONTAINER
========================= */

.container{

width:min(1200px,90%);
margin:auto;

}

.narrow{

max-width:850px;
margin:auto;
text-align:center;

}

/* =========================
   SCROLL PROGRESS BAR
========================= */

.scroll-progress{

position:fixed;
top:0;
left:0;

width:0%;
height:4px;

background:
linear-gradient(
90deg,
var(--gold),
var(--gold-light)
);

z-index:9999;

}

/* =========================
   AURORA EFFECT
========================= */

.aurora{

position:fixed;
border-radius:50%;
filter:blur(120px);

pointer-events:none;
z-index:-1;

}

.aurora-1{

width:450px;
height:450px;

background:
rgba(20,120,60,.22);

top:-150px;
left:-120px;

animation:
auroraMove1 18s infinite alternate;

}

.aurora-2{

width:500px;
height:500px;

background:
rgba(212,175,55,.12);

bottom:-200px;
right:-150px;

animation:
auroraMove2 22s infinite alternate;

}

@keyframes auroraMove1{

0%{
transform:
translate(0,0)
scale(1);
}

100%{
transform:
translate(120px,60px)
scale(1.3);
}

}

@keyframes auroraMove2{

0%{
transform:
translate(0,0)
scale(1);
}

100%{
transform:
translate(-100px,-60px)
scale(1.25);
}

}

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

.header{

position:sticky;
top:0;

z-index:999;

backdrop-filter:blur(18px);

background:
rgba(8,22,13,.82);

border-bottom:
1px solid var(--border);

}

.nav-container{

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

padding:18px 0;

}

.logo{

display:flex;
align-items:center;
gap:14px;

text-decoration:none;
color:var(--white);

}

.logo img{

width:60px;
height:60px;

object-fit:cover;
border-radius:16px;

border:
2px solid rgba(212,175,55,.25);

}

.brand-top{

font-size:.75rem;
letter-spacing:3px;
color:var(--gold-light);

}

.logo h3{

font-size:1rem;
font-weight:600;

}

.nav{

display:flex;
gap:30px;

}

.nav a{

text-decoration:none;
color:var(--muted);

font-weight:500;

transition:var(--transition);

}

.nav a:hover{

color:var(--gold-light);

}

/* =========================
   BUTTONS
========================= */

.btn{

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

padding:14px 26px;

border-radius:999px;

font-weight:600;

text-decoration:none;

transition:
transform .3s ease,
box-shadow .3s ease;

cursor:pointer;

}

.btn:hover{

transform:translateY(-3px);

}

.btn-gold{

background:
linear-gradient(
135deg,
var(--gold),
var(--gold-light)
);

color:#111;

box-shadow:
0 10px 35px rgba(212,175,55,.35);

position:relative;
overflow:hidden;

}

.btn-gold::before{

content:"";

position:absolute;
top:0;
left:-120%;

width:50%;
height:100%;

background:
rgba(255,255,255,.35);

transform:skewX(-25deg);

animation:
goldShine 4s infinite;

}

@keyframes goldShine{

0%{
left:-120%;
}

100%{
left:180%;
}

}

.btn-outline{

border:
1px solid rgba(212,175,55,.4);

color:var(--gold-light);

background:transparent;

}

.hero{

padding:100px 0 80px;

}

.hero-grid{

display:grid;
grid-template-columns:1.1fr .9fr;
gap:60px;
align-items:center;

}

.tag{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:
rgba(212,175,55,.12);

color:var(--gold-light);

font-size:.85rem;
font-weight:600;

margin-bottom:20px;

border:
1px solid rgba(212,175,55,.2);

}

.hero-content h1{

font-size:clamp(2.8rem,5vw,5rem);

line-height:1.05;

margin-bottom:24px;

}

.hero-content p{

color:var(--muted);

font-size:1.05rem;

max-width:650px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;
gap:16px;
flex-wrap:wrap;

margin-bottom:35px;

}

.hero-features{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;

}

.hero-features div{

padding:12px 16px;

background:
rgba(255,255,255,.03);

border:
1px solid var(--border);

border-radius:14px;

}

/* =========================
   FLOATING PRODUCT CARDS
========================= */

.hero-visual{

position:relative;
height:560px;

}

.hero-card{

position:absolute;

overflow:hidden;

border-radius:28px;

box-shadow:var(--shadow);

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

background:var(--surface);

transition:
transform .4s ease;

}

.hero-card img{

width:100%;
height:100%;
object-fit:cover;

display:block;

}

.hero-card:hover{

transform:
translateY(-10px)
scale(1.03);

}

.card-1{

width:270px;
height:270px;

top:0;
left:50px;

animation:
floatCard 7s infinite ease-in-out;

}

.card-2{

width:240px;
height:240px;

right:0;
top:120px;

animation:
floatCard 8s infinite ease-in-out;

}

.card-3{

width:260px;
height:260px;

left:90px;
bottom:0;

animation:
floatCard 9s infinite ease-in-out;

}

@keyframes floatCard{

0%,100%{

transform:
translateY(0);

}

50%{

transform:
translateY(-18px);

}

}

/* =========================
   SECTIONS
========================= */

.section{

padding:110px 0;

}

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-tag{

display:inline-block;

color:var(--gold-light);

font-weight:700;

letter-spacing:2px;

margin-bottom:16px;

}

.section-heading h2{

font-size:
clamp(2rem,4vw,3.5rem);

}

/* =========================
   FEATURES
========================= */

.feature-grid{

display:grid;

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

gap:25px;

}

.feature-card{

padding:35px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.01)
);

border:
1px solid var(--border);

border-radius:24px;

transition:
all .35s ease;

}

.feature-card:hover{

transform:
translateY(-12px);

border-color:
rgba(212,175,55,.4);

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

}

.feature-icon{

font-size:2rem;

margin-bottom:18px;

}

.feature-card h3{

margin-bottom:12px;

}

.feature-card p{

color:var(--muted);

}

/* =========================
   PRODUCTS
========================= */

.products-grid{

display:grid;

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

gap:50px;

}

.product-card{

background:var(--surface);

border:
1px solid var(--border);

border-radius:24px;

overflow:hidden;

transition:
all .35s ease;

}

.product-card:hover{

transform:
translateY(-12px);

box-shadow:
0 25px 60px rgba(0,0,0,.3);

border-color:
rgba(212,175,55,.35);

}

.product-card img{

width:100%;
height:260px;

object-fit:cover;

}

.product-content{

padding:25px;

}

.product-content h3{

margin-bottom:12px;

}

.product-content p{

color:var(--muted);

margin-bottom:16px;

}

.product-content a{

text-decoration:none;

color:var(--gold-light);

font-weight:600;

}

/* =========================
   STATS
========================= */

.stats-section{

padding:80px 0;

background:
linear-gradient(
180deg,
transparent,
rgba(255,255,255,.02)
);

}

.stats-grid{

display:grid;

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

gap:25px;

}

.stat-box{

text-align:center;

padding:40px;

border-radius:24px;

background:var(--surface);

border:
1px solid var(--border);

}

.stat-box h3{

font-size:3rem;

color:var(--gold-light);

margin-bottom:10px;

}

.stat-box p{

color:var(--muted);

}

/* =========================
   TIMELINE
========================= */

.timeline{

display:grid;

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

gap:25px;

}

.timeline-item{

padding:35px;

border-radius:24px;

background:var(--surface);

border:
1px solid var(--border);

position:relative;

}

.timeline-item span{

display:inline-flex;

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

width:60px;
height:60px;

border-radius:50%;

background:
linear-gradient(
135deg,
var(--gold),
var(--gold-light)
);

color:#111;

font-weight:700;

margin-bottom:20px;

}

.timeline-item h3{

margin-bottom:12px;

}

.timeline-item p{

color:var(--muted);

}

/* =========================
   CONTACT SECTION
========================= */

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:start;

}

.contact-info p{

color:var(--muted);

margin:20px 0;

}

.contact-list{

list-style:none;

margin:30px 0;

}

.contact-list li{

margin-bottom:15px;

font-size:1rem;

}

.contact-form{

padding:35px;

background:var(--surface);

border-radius:28px;

border:
1px solid var(--border);

}

.contact-form form{

display:flex;
flex-direction:column;
gap:16px;

}

.contact-form input,
.contact-form textarea,
.contact-form select{

padding:16px;

background:
rgba(255,255,255,.04);

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

border-radius:14px;

color:var(--white);

font-family:inherit;

outline:none;

}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{

border-color:
rgba(212,175,55,.4);

}

.full-width{

width:100%;

border:none;

}

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

.footer{

padding:40px 0;

text-align:center;

border-top:
1px solid var(--border);

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

}

.footer h3{

margin-bottom:10px;

color:var(--gold-light);

}

.footer p{

color:var(--muted);

}

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

.whatsapp-float{

position:fixed;

right:25px;
bottom:25px;

width:65px;
height:65px;

display:flex;

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

font-size:1.8rem;

text-decoration:none;

border-radius:50%;

background:
linear-gradient(
135deg,
#25D366,
#1ebe5d
);

color:white;

box-shadow:
0 15px 40px rgba(37,211,102,.35);

z-index:999;

animation:
pulseWhatsapp 2s infinite;

}

@keyframes pulseWhatsapp{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}

/* =========================
   REVEAL ANIMATION
========================= */

.reveal{

opacity:0;

transform:
translateY(40px);

transition:
all .8s ease;

}

.reveal.active{

opacity:1;

transform:
translateY(0);

}

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

@media(max-width:1100px){

.products-grid{

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

}

.feature-grid{

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

}

.timeline{

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

}

}

@media(max-width:768px){

.hero-grid,
.contact-grid{

grid-template-columns:1fr;

}

.hero-visual{

height:420px;

}

.nav{

display:none;

}

.products-grid,
.feature-grid,
.timeline,
.stats-grid{

grid-template-columns:1fr;

}

.hero-content h1{

font-size:2.5rem;

}

.hero-features{

grid-template-columns:1fr;

}

.whatsapp-float{

width:58px;
height:58px;

}

}