:root{
 --bg:#050816;
 --panel:#0d1224;
 --line:rgba(255,255,255,.1);
 --text:#fff;
 --muted:#a9b2c7;
 --blue:#18c8ff;
 --pink:#d94cff;
}

*{box-sizing:border-box}
body{
 margin:0;
 font-family:Inter,sans-serif;
 background:radial-gradient(circle at top left,rgba(217,76,255,.2),transparent 30%),#050816;
 color:var(--text);
 padding:24px;
}

.header,.hero,.card{
 max-width:1200px;
 margin:auto;
}

.header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:50px;
}

.brand{
 display:flex;
 align-items:center;
 gap:12px;
 font-weight:900;
}

.brand img{
 width:50px;
 border-radius:14px;
}

.right{
 display:flex;
 align-items:center;
 gap:20px;
}

nav{
 display:flex;
 gap:18px;
}

nav a{
 color:#fff;
 text-decoration:none;
}

.switch{
 display:flex;
 gap:8px;
}

.lang{
 background:#11182d;
 border:1px solid var(--line);
 color:#fff;
 padding:8px 12px;
 border-radius:999px;
 cursor:pointer;
}

.lang.active{
 background:linear-gradient(90deg,var(--pink),var(--blue));
 color:#000;
}

.hero{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:40px;
 align-items:center;
 min-height:70vh;
}

.banner{
 width:100%;
 border-radius:24px;
 border:1px solid var(--line);
}

.eyebrow{
 color:var(--blue);
 letter-spacing:.2em;
 font-size:12px;
 font-weight:700;
}

h1{
 font-size:72px;
 line-height:.95;
}

h1 span{
 background:linear-gradient(90deg,var(--pink),var(--blue));
 -webkit-background-clip:text;
 color:transparent;
}

.lead{
 color:var(--muted);
 font-size:20px;
 line-height:1.7;
}

.buttons{
 display:flex;
 gap:14px;
 margin-top:24px;
}

.btn{
 padding:14px 20px;
 border-radius:999px;
 text-decoration:none;
 font-weight:700;
}

.primary{
 background:linear-gradient(90deg,var(--pink),var(--blue));
 color:#000;
}

.secondary{
 border:1px solid var(--line);
 color:#fff;
}

.card{
 margin-top:40px;
 background:rgba(255,255,255,.03);
 border:1px solid var(--line);
 border-radius:28px;
 padding:32px;
}

.card p, li{
 color:var(--muted);
}

ul{
 padding-left:20px;
}

.center{
 text-align:center;
}

.center a{
 color:var(--blue);
 font-weight:700;
}

@media(max-width:900px){
 .hero{
   grid-template-columns:1fr;
 }
 h1{
   font-size:52px;
 }
 nav{
   display:none;
 }
}