@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;color:#334155}
.container{max-width:1150px;margin:auto;padding:0 24px}
header{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0}
.top{display:flex;justify-content:space-between;align-items:center;height:82px}
.logo{height:46px}nav a{text-decoration:none;color:#334155;margin-left:22px}
.hero{background:linear-gradient(180deg,#eef6ff,#fff);padding:70px 0 100px;overflow:hidden}
.grid{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.tag{color:#2f80ff;font-weight:700;letter-spacing:1px}.hero h1{font-size:60px;color:#0f172a;margin:12px 0}
.hero p{font-size:21px;line-height:1.7}
.btn{display:inline-block;background:#2f80ff;color:#fff;padding:16px 28px;border-radius:12px;text-decoration:none;margin-top:18px}
.right{position:relative;height:460px}
.q{position:absolute;right:40px;top:0;font-size:340px;font-weight:800;color:#2f80ff12}
svg{position:absolute;right:-120px;bottom:-60px;width:700px;height:250px}
main{max-width:900px;margin:60px auto;padding:0 24px}
footer{background:#071a3a;color:#dce6ff;padding:40px 0;margin-top:70px}
.cols{display:flex;justify-content:space-between;flex-wrap:wrap}
footer img{height:46px}
@media(max-width:900px){.grid{grid-template-columns:1fr}.right{display:none}nav{display:none}.hero h1{font-size:42px}}

.pixel-cloud{position:absolute;right:20px;bottom:20px;width:320px;height:220px}
.pixel-cloud span{position:absolute;width:12px;height:12px;background:#2f80ff;border-radius:2px;opacity:.15}
.pixel-cloud span:nth-child(1){left:20px;top:160px}.pixel-cloud span:nth-child(2){left:42px;top:138px}
.pixel-cloud span:nth-child(3){left:65px;top:118px}.pixel-cloud span:nth-child(4){left:100px;top:95px}
.pixel-cloud span:nth-child(5){left:145px;top:72px}.pixel-cloud span:nth-child(6){left:185px;top:52px}
.pixel-cloud span:nth-child(7){left:220px;top:35px}.pixel-cloud span:nth-child(8){left:255px;top:20px}
.pixel-cloud span:nth-child(9){left:285px;top:8px}.pixel-cloud span:nth-child(10){left:120px;top:180px;width:8px;height:8px}
.features{padding:30px 24px 70px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{border:1px solid #e5e7eb;border-radius:14px;padding:24px;background:#fff}
.card h3{margin:0 0 10px;color:#0f172a}
@media(max-width:900px){.cards{grid-template-columns:1fr}}


/* ===== MyQ v6 enhancements ===== */
.hero{min-height:620px;display:flex;align-items:center;background:radial-gradient(circle at 78% 35%,rgba(47,128,255,.14),transparent 260px),linear-gradient(180deg,#f5faff 0%,#fff 100%)}
.hero h1{font-size:68px;line-height:1.05;letter-spacing:-1px}
.logo{height:100px}
.btn{border-radius:14px;box-shadow:0 12px 30px rgba(47,128,255,.22);transition:.25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(47,128,255,.30)}
.pixel-cloud{width:600px;height:320px;right:0;bottom:10px}
.pixel-cloud span{animation:floatPixels 9s ease-in-out infinite;box-shadow:0 0 12px rgba(47,128,255,.18)}
.pixel-cloud span:nth-child(odd){background:#5fa8ff}
.pixel-cloud span:nth-child(even){background:#2f80ff}
.pixel-cloud span:nth-child(3n){width:16px;height:16px;opacity:.28}
.pixel-cloud span:nth-child(4n){width:8px;height:8px;opacity:.12}
@keyframes floatPixels{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-8px,-10px) rotate(8deg)}}
.card{border:none;border-radius:18px;padding:28px;box-shadow:0 10px 30px rgba(15,23,42,.08);transition:.25s}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(15,23,42,.12)}
footer{padding:56px 0}
nav a{transition:.2s}
nav a:hover{color:#2f80ff}

/* Extra */
.footer-logo{height:60px; opacity:.50}

.top{
    display:flex;
    align-items:center;
    height:82px;
}

.logo{
    margin-right:40px;
}

.main-nav{
    display:flex;
    gap:22px;
}

.language{
    margin-left:auto;
    font-weight:600;
}

.language .active{
    color:#2f80ff;
    font-weight:700;
    cursor:default;
}

.language a{
    color:#334155;
    text-decoration:none;
}

.language a:hover{
    color:#2f80ff;
}