/* ===== BODY ===== */
body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
background:#0a0a0a;
color:#fff;
line-height:1.6;
}
.SkypeColse{display:none}
/* ===== HERO ===== */
.hero{
height:88vh;
background:url('http://www.airwheel.net/images/se3sl/airwheel-se3sl-scooter-luggage.jpg') center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
}

.hero::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.5);
}

.hero > div{
position:relative;
z-index:2;
}

.hero h1{
font-size:60px;
font-weight:700;
margin:0;
}

.hero p{
color:#ccc;
margin-top:20px;
font-size:20px;
}

/* CTA BUTTON */
.cta{
margin-top:30px;
}

.btn{
padding:15px 30px;
margin:10px;
border-radius:8px;
text-decoration:none;
font-weight:700;
display:inline-block;
transition:0.3s;
}

.btn-primary{
background:#00eaff;
color:#000;
}

.btn-primary:hover{
background:#00c7ff;
}

.btn-whatsapp{
background:#25D366;
color:#fff;
}

.btn-whatsapp:hover{
background:#1ebe5c;
}

/* ===== SECTION ===== */
.section{
padding:80px 10%;
}

.section-title{
font-size:42px;
font-weight:700;
margin-bottom:20px;
text-align:center
}

.section-sub{
color:#aaa;
max-width:700px;
margin:0 auto 60px;
font-size:18px;
text-align:center;
}

/* ===== WHY AIRWHEEL CARDS ===== */
.card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
max-width:1200px;
margin:auto;
}

.card{
position:relative;
padding:40px 30px;
border-radius:20px;
background:rgba(255,255,255,0.03);
backdrop-filter:blur(12px);
transition:all 0.4s ease;
overflow:hidden;
text-align:left;
}

.card::before{
content:"";
position:absolute;
inset:0;
border-radius:20px;
padding:1px;
background:linear-gradient(120deg,#00f0ff,#7b5cff,#ff00c8);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:0.2;
transition:0.4s;
}

.card::after{
content:"";
position:absolute;
width:200%;
height:200%;
top:-50%;
left:-50%;
background:radial-gradient(circle,rgba(0,255,255,0.15),transparent 60%);
opacity:0;
transition:0.5s;
}

.card:hover{
transform:translateY(-12px) scale(1.02);
background:rgba(255,255,255,0.06);
}

.card:hover::before{opacity:1;}
.card:hover::after{opacity:1;}

.card h3{font-size:22px;margin-bottom:15px;}
.card p{color:#bbb;font-size:15px;line-height:1.6;}

/* Scroll animation */
.card{opacity:0;transform:translateY(40px);animation:fadeUp 0.8s ease forwards;}
.card:nth-child(1){animation-delay:0.2s;}
.card:nth-child(2){animation-delay:0.4s;}
.card:nth-child(3){animation-delay:0.6s;}
.card:nth-child(4){animation-delay:0.8s;}
@keyframes fadeUp{to{opacity:1;transform:translateY(0);}}

/* ===== PRODUCT GRID ===== */
.product-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(275px,1fr));
gap:30px;
max-width:1200px;
margin:auto;
}

.product-card{
background:rgba(255,255,255,0.04);
border-radius:20px;
overflow:hidden;
transition:0.4s;
text-align:left;
}

.product-card img{
width:100%;
object-fit:cover;
transition:transform 0.4s;
}

.product-card:hover img{
transform:scale(1.05);
}

.product-info{
padding:20px;
}

.product-card h3{
font-size:20px;
margin-bottom:8px;
}

.slogan{
color:#00eaff;
font-size:14px;
margin-bottom:10px;
font-weight:600;
}

.product-card p{
color:#bbb;
font-size:14px;
margin-bottom:10px;
}

.product-card ul{
padding-left:18px;
font-size:14px;
color:#ccc;
}

.product-card:hover{
transform:translateY(-10px);
background:rgba(255,255,255,0.08);
}

.highlight{
border:2px solid #00eaff;
box-shadow:0 0 40px rgba(0,255,255,0.4);
}

/* ===== FORM ===== */
form{
max-width:600px;
margin:auto;
}

input,textarea{
width:100%;
padding:15px;
margin:10px 0;
border:none;
border-radius:8px;
background:#111;
color:#fff;
}

input::placeholder, textarea::placeholder{
color:#777;
}

button{
width:100%;
padding:15px;
background:#00eaff;
color:#000;
border:none;
font-weight:bold;
border-radius:8px;
transition:0.3s;
}

button:hover{
background:#00c7ff;
}

/* ===== WHATSAPP FLOAT ===== */
.whatsapp-float{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
color:#fff;
padding:15px 20px;
border-radius:50px;
text-decoration:none;
font-weight:bold;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
transition:0.3s;
}
.whatsapp-float:hover{
transform:translateY(-4px);
box-shadow:0 8px 25px rgba(0,0,0,0.4);
}

/* RESPONSIVE TEXT */
@media (max-width:768px){
.hero h1{font-size:40px;}
.hero p{font-size:16px;}
.section-title{font-size:32px;}
}