*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;}
html{scroll-behavior:smooth;}

body{background:#020617;color:white;overflow-x:hidden;}
canvas{position:fixed;width:100%;height:100%;z-index:-1;}

.container{max-width:1100px;margin:auto;padding:0 20px;}


/* LOGO TYPE */
.logo{
font-weight:800;
font-size:20px;
letter-spacing:1px;
color:white;
}

.logo span{
color:#00f0ff;
text-shadow:0 0 10px #00f0ff;
}

/* NAV */
.nav{position:fixed;width:100%;top:0;background:rgba(0,0,0,0.3);backdrop-filter:blur(12px);z-index:100;}
.nav-container{max-width:1100px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:15px;}
.logo{color:#00f0ff;font-weight:800;}

.nav-links{display:flex;gap:25px;list-style:none;}
.nav-links a{color:white;text-decoration:none;opacity:.7;}
.nav-links a:hover{color:#00f0ff;}

.nav-btn{background:#00f0ff;padding:8px 15px;border-radius:20px;color:black;text-decoration:none;}

/* HAMBURGER */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;}
.hamburger span{width:25px;height:3px;background:white;}

@media(max-width:768px){
.nav-links{display:none;position:absolute;top:70px;width:100%;background:#020617;flex-direction:column;align-items:center;}
.nav-links.active{display:flex;}
.hamburger{display:flex;}
.nav-btn{display:none;}
}

/* HERO */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:80px;}
.hero h1{font-size:60px;}
.hero span{color:#00f0ff;text-shadow:0 0 20px #00f0ff;}
.typing{margin:20px 0;opacity:.8;}

.hero-card{position:absolute;background:rgba(255,255,255,0.05);padding:10px;border-radius:20px;animation:float 6s infinite;}
.hero-card:nth-child(1){top:20%;left:10%;}
.hero-card:nth-child(2){top:30%;right:10%;}
.hero-card:nth-child(3){bottom:30%;left:15%;}
.hero-card:nth-child(4){bottom:20%;right:10%;}
.hero-card:nth-child(5){top:10%;left:50%;}
.hero-card:nth-child(6){bottom:10%;left:50%;}

@keyframes float{50%{transform:translateY(-15px);}}

/* BUTTON */
.modern-btn{background:linear-gradient(135deg,#00f0ff,#00c3ff);padding:12px 25px;border-radius:30px;color:black;text-decoration:none;transition:.3s;}
.modern-btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,240,255,0.4);}

/* SECTIONS */
section{padding:100px 20px;text-align:center;}
.subtext{opacity:.7;margin-top:10px;}

/* GRID */
.language-grid,.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;margin-top:40px;}

.lang-card,.card{background:rgba(255,255,255,0.05);padding:20px;border-radius:20px;cursor:pointer;transition:.2s;}

/* 3D EFFECT */
.lang-card:hover,.card:hover{transform:translateY(-10px);box-shadow:0 0 20px #00f0ff;}

/* GLASS BUTTON */
.glass-btn{
display:inline-block;
padding:12px 28px;
border-radius:30px;
text-decoration:none;
color:#00f0ff;

background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);

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

transition:.3s;
}

.glass-btn:hover{
background:rgba(0,240,255,0.15);
transform:translateY(-3px);
box-shadow:0 0 20px rgba(0,240,255,0.5);
}


/* MODAL */
.modal{display:none;position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.8);justify-content:center;align-items:center;}
.modal-content{background:#020617;padding:30px;border-radius:20px;max-width:500px;}
.close{position:absolute;top:20px;right:30px;font-size:30px;cursor:pointer;}

/* QUOTES */
.quote-box{margin-top:30px;padding:30px;background:rgba(255,255,255,0.05);border-radius:20px;cursor:pointer;}
.quote-box.active{box-shadow:0 0 30px #00f0ff;}

/* FOOTER */
footer{background:#01040f;padding:60px 20px;}
.footer-grid{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;}
.social-icons{display:flex;gap:10px;}
.icon{background:rgba(255,255,255,0.05);padding:10px;border-radius:50%;}
.icon:hover{background:#00f0ff;color:black;}
.copyright{text-align:center;margin-top:30px;opacity:.5;}



/* ECOSYSTEM SLIDER */
.eco-slider-wrapper{
position:relative;
display:flex;
align-items:center;
}

.eco-slider{
display:flex;
gap:25px;
overflow-x:auto;
scroll-behavior:smooth;
padding:20px 0;
}

.eco-slider::-webkit-scrollbar{
display:none; /* hide scrollbar */
}

/* ECO SLIDER */
.eco-slider-wrapper{position:relative;display:flex;align-items:center;}
.eco-slider{display:flex;gap:25px;overflow-x:auto;scroll-behavior:smooth;padding:20px 0;}
.eco-slider::-webkit-scrollbar{display:none;}
.slide-btn{position:absolute;top:50%;transform:translateY(-50%);
background:rgba(0,0,0,0.5);border:none;color:white;font-size:30px;padding:10px;border-radius:50%;z-index:10;cursor:pointer;transition:.3s;}
.slide-btn:hover{background:#00f0ff;color:black;}
.slide-btn.left{left:0;}
.slide-btn.right{right:0;}
.eco-card{flex:0 0 260px;background:linear-gradient(145deg, rgba(255,255,255,0.05), rgba(0,240,255,0.05));
padding:20px;border-radius:20px;position:relative;transition:.4s;cursor:pointer;}
.eco-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 0 40px #00f0ff;}
.eco-image{height:140px;border-radius:15px;background:linear-gradient(135deg,#00f0ff33,#000000);margin-bottom:15px;}
.eco-buttons{display:flex;gap:10px;margin-top:15px;}
.small{padding:8px 16px;font-size:12px;}

/* LIVE CODE MODAL */
.code-modal{max-width:600px;background:#020617;padding:30px;border-radius:20px;overflow:auto;max-height:80vh;}
.code-modal pre{background:rgba(255,255,255,0.05);padding:15px;border-radius:15px;overflow-x:auto;}

.slide-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.5);
border:none;
color:white;
font-size:30px;
padding:10px;
cursor:pointer;
border-radius:50%;
z-index:10;
transition:.3s;
}

.slide-btn:hover{
background:#00f0ff;
color:black;
}

.slide-btn.left{left:0;}
.slide-btn.right{right:0;}

/* CARD */
.eco-card{
flex:0 0 250px; /* fixed width for slider */
background:linear-gradient(145deg, rgba(255,255,255,0.05), rgba(0,240,255,0.05));
padding:20px;
border-radius:20px;
transition:.4s;
position:relative;
}

.eco-card:hover{
transform:translateY(-10px) scale(1.02);
box-shadow:0 0 30px rgba(0,240,255,0.4);
}

.eco-image{
height:140px;
border-radius:15px;
background:linear-gradient(135deg,#00f0ff33,#000000);
margin-bottom:15px;
}

/* FOOTER ICON GRID */
.footer-icons{
display:flex;
gap:20px;
margin-top:10px;
flex-wrap:wrap;
}

/* ICON CARD */
.footer-icon{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-decoration:none;
color:white;
background:rgba(255,255,255,0.05);
padding:12px;
border-radius:12px;
width:70px;
transition:.3s;
}

/* ICON */
.footer-icon span{
font-size:20px;
margin-bottom:5px;
}

/* LABEL */
.footer-icon p{
font-size:12px;
opacity:.7;
}

/* HOVER EFFECT */
.footer-icon:hover{
background:#00f0ff;
color:black;
transform:translateY(-5px) scale(1.05);
box-shadow:0 10px 25px rgba(0,240,255,0.4);
}


/* WHATSAPP */
.whatsapp{position:fixed;bottom:20px;right:20px;background:#25D366;padding:15px;border-radius:50%;}

/* REVEAL */
.reveal{opacity:0;transform:translateY(40px);transition:0.8s;}
.reveal.active{opacity:1;transform:translateY(0);}

@media(max-width:768px){
.hero h1{font-size:40px;}
}