:root{

--primary:#14B8A6;
--secondary:#06D6A0;

--text:#0F172A;
--muted:#64748B;

--bg:#F8FAFC;

}

main{
    flex:1;
}

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

body{

font-family:Inter,sans-serif;

background:var(--bg);

color:var(--text);

}

.container{

width:min(1120px,90%);

margin:auto;

}

header{

padding:20px 0;

}

.nav{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

height:40px;

}

.lang{

display:flex;
gap:10px;

}

.lang button{

background:white;

border:1px solid #E2E8F0;

padding:10px 14px;

border-radius:10px;

cursor:pointer;

}

.hero{

padding:60px 0 40px;

text-align:center;

}

.badge{

display:inline-block;

padding:10px 18px;

background:#CCFBF1;

color:#0F766E;

border-radius:999px;

margin-bottom:24px;

font-weight:600;

}

.hero h1{

font-size:clamp(40px,6vw,72px);

line-height:1.05;

max-width:900px;

margin:auto;

}

.subtitle{

max-width:700px;

margin:24px auto;

font-size:1.2rem;

color:var(--muted);

}

.waitlist{

margin-top:40px;

display:flex;

justify-content:center;

gap:12px;

}

.waitlist input{

padding:16px;

width:360px;

border-radius:14px;

border:1px solid #CBD5E1;

}

.waitlist button{

padding:16px 28px;

border:none;

border-radius:14px;

background:linear-gradient(
135deg,
#14B8A6,
#06D6A0
);

color:white;

font-weight:700;

cursor:pointer;

}

.audience{

padding:10px 0 50px;

}

.audience-card{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:12px;

box-shadow:0 4px 12px rgba(0,0,0,.04);

}

.features{

padding:20px 0 80px;

}

.grid{

display:grid;

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

gap:20px;

}

.card{

background:white;

padding:30px;

border-radius:20px;

box-shadow:0 4px 12px rgba(0,0,0,.04);

}

.card h3{

margin-bottom:12px;

}

footer{

padding:20px;

text-align:center;

color:var(--muted);

}

@media(max-width:768px){

.nav{

flex-direction:column;

gap:20px;

}

.hero{

padding:30px 0;

}

.hero h1{

font-size:42px;

}

.waitlist{

flex-direction:column;

}

.waitlist input,
.waitlist button{

width:100%;

}

.features{

padding-top:10px;

}

  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

.logo{
    width:40px;
    height:40px;
}

.brand-name{
    font-size:1.35rem;
    font-weight:700;
    color:#0F172A;
    letter-spacing:-0.03em;
}

@media(max-width:768px){

    .brand-name{
        display:none;
    }

}
}