/* ---------- Reset & helpers ---------- */
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;background:#071026;color:#e6f0ff;line-height:1.35}
    a{color:inherit;text-decoration:none}
    .container{max-width:1200px;margin:0 auto;padding:24px}

    /* ---------- Top navigation ---------- */
    header{position:fixed;left:0;right:0;top:0;z-index:40;background:linear-gradient(90deg,rgba(3,7,17,0.7),rgba(10,14,24,0.35));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.02)}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
    .brand{display:flex;gap:12px;align-items:center}
    .logo{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,#7bdcff,#3048ff);box-shadow:0 6px 24px rgba(48,72,255,0.12);display:flex;align-items:center;justify-content:center;font-weight:700}
    nav ul{display:flex;gap:18px;list-style:none;font-weight:600}
    .cta{display:flex;gap:8px}
    .btn{padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}
    .btn-ghost{border:1px solid rgba(255,255,255,0.08);background:transparent}
    .btn-primary{background:linear-gradient(90deg,#00d2ff,#3a7bff);color:#021235;border:none}

    /* ---------- Hero ---------- */
    .hero{min-height:76vh;display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding-top:84px}
    .hero-left h1{font-size:clamp(28px,6vw,56px);letter-spacing:-1px;margin-bottom:12px}
    .sub{color:rgba(230,240,255,0.8);font-size:18px;margin-bottom:22px}
    .actions{display:flex;gap:12px;align-items:center}

    /* login/register card */
    .card{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 30px rgba(2,6,18,0.6)}
    .form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
    .input{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);color:inherit}
    .small{font-size:13px;color:rgba(230,240,255,0.7)}

    /* ---------- Features & layout ---------- */
    .features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0}
    .feature{background:linear-gradient(180deg,rgba(255,255,255,0.015),transparent);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
    .feature h4{margin-bottom:8px}

    /* ---------- Footer ---------- */
    footer{padding:28px 0;border-top:1px solid rgba(255,255,255,0.02);margin-top:36px}

    /* ---------- Background image ---------- */
    body{
      background:
        linear-gradient(180deg, rgba(5,10,25,0.75), rgba(5,10,25,0.85)),
        url('/IMG/BACKGROUND/Designer.png') center center / cover no-repeat fixed;
    }

    /* ---------- Responsive ---------- */
    @media (max-width:900px){
      .hero{grid-template-columns:1fr;min-height:68vh}
      nav ul{display:none}
      .brand{gap:8px}
      .features{grid-template-columns:1fr}
    }

    /* small polish */
    .screenshot{height:180px;border-radius:10px;background:linear-gradient(160deg,#09102a,#06122a);display:flex;align-items:center;justify-content:center;color:rgba(230,240,255,0.6);font-weight:700}





/* ---------- Language switcher ---------- */
.lang-switcher{
  display:flex;
  gap:4px;
  padding:4px;
}

.lang-btn{
  background:transparent;
  border:none;
  color:#021235;
  font-weight:800;
  cursor:pointer;
  padding:6px 8px;
  border-radius:6px;
  opacity:0.6;
}

.lang-btn.active{
  background:rgba(255,255,255,0.85);
  opacity:1;
}





  /* ---------- Language dropdown ---------- */
.dropdown {
  position: relative;
}

.dropbtn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 120%;
  left: 0;
  background: rgba(10,14,30,0.95);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  min-width: 160px;
  padding: 6px;
  z-index: 100;
}

.dropdown-content.open {
  display: block;
}

.lang-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: #e6f0ff;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.lang-item:hover {
  background: rgba(255,255,255,0.08);
}