*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI, Arial, sans-serif;
}

body{
background:#f4f7fb;
color:#1a2a3a;
}

/* NAVBAR */

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 40px;
background:white;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
position:sticky;
top:0;
z-index:1000;
}

.logo{
height:42px;
}

.menu{
display:flex;
gap:30px;
list-style:none;
}

.menu a{
text-decoration:none;
color:#33475b;
font-weight:500;
}

.menu a:hover{
color:#2b7cff;
}

/* LANGUAGE */

.lang{
display:flex;
gap:5px;
}

.lang button{
border:none;
background:#e8eef7;
padding:6px 10px;
cursor:pointer;
border-radius:4px;
}

/* MOBILE BUTTON */

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}

/* HERO */

.hero{
height:80vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:40px;
background:linear-gradient(180deg,#ffffff,#eef3f8);
}

.hero h1{
font-size:56px;
margin-bottom:15px;
}

.hero p{
max-width:650px;
margin:auto;
color:#4b5c6b;
}

.cta{
display:inline-block;
margin-top:30px;
padding:12px 28px;
background:#2b7cff;
color:white;
text-decoration:none;
border-radius:5px;
}

/* SECTIONS */

.section{
padding:80px 40px;
max-width:1200px;
margin:auto;
text-align:center;
}

.product-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

.product-card{
background:white;
padding:30px;
border-radius:8px;
box-shadow:0 10px 20px rgba(0,0,0,0.05);
transition:0.3s;
}

.product-card:hover{
transform:translateY(-6px);
}

/* MOBILE */

@media (max-width:768px){

.menu-toggle{
display:block;
}

.menu{
position:absolute;
top:70px;
left:0;
width:100%;
background:white;
flex-direction:column;
align-items:center;
gap:20px;
padding:25px 0;
display:none;
box-shadow:0 10px 20px rgba(0,0,0,0.1);
}

.menu.show{
display:flex;
}

.lang{
display:none;
}

.hero{
height:auto;
padding:120px 20px;
}

.hero h1{
font-size:34px;
}

.hero p{
font-size:16px;
}

.section{
padding:60px 20px;
}

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

}
.hero{
position:relative;
height:80vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
background:linear-gradient(180deg,#ffffff,#eef3f8);
overflow:hidden;
}

#moleculeCanvas{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}

.hero-content{
position:relative;
z-index:2;
max-width:800px;
padding:20px;
}
.section-bg{
background-size:cover;
background-position:center;
background-repeat:no-repeat;
position:relative;
}

.section-bg::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(255,255,255,0.88);
}

.section-bg .content{
position:relative;
z-index:2;
}