:root{
  --bg:#0e1220; --bg2:#151b30; --card:#1a2138;
  --ink:#e8ecf6; --muted:#9aa6c4; --line:#2a3352;
  --brand:#5b8cff; --brand2:#7c5cff; --accent:#33d9a6;
  --radius:14px; --wrap:1120px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Segoe UI",Roboto,-apple-system,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(14,18,32,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink); font-weight:700}
.brand:hover{text-decoration:none}
.brand-mark{
  font-size:22px; color:var(--brand);
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text small{color:var(--muted); font-weight:400; font-size:11px}
.nav{display:flex; align-items:center; gap:20px}
.nav a{color:var(--muted); font-size:14px}
.nav a:hover{color:var(--ink); text-decoration:none}
.lang-switch{display:inline-flex; gap:6px; margin-left:6px}
.lang-switch a{padding:2px 8px; border:1px solid var(--line); border-radius:8px; font-size:12px}
.lang-switch a.on{color:var(--ink); border-color:var(--brand); background:rgba(91,140,255,.12)}

/* Hero */
.hero{
  padding:76px 0 60px;
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(124,92,255,.20), transparent),
    radial-gradient(700px 380px at 5% 0%, rgba(91,140,255,.18), transparent);
}
.hero h1{font-size:44px; line-height:1.1; margin:0 0 16px; max-width:16ch}
.hero-sub{font-size:18px; color:var(--muted); max-width:60ch; margin:0 0 26px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-block; padding:10px 18px; border-radius:10px; font-weight:600;
  font-size:14px; border:1px solid transparent; cursor:pointer;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand)}
.btn-link{background:none; color:var(--brand); padding:10px 4px}
.btn-sm{padding:7px 12px; font-size:13px}
.block{display:block; text-align:center; margin-bottom:8px}

/* Products */
.products{padding:56px 0 80px}
.products h2{font-size:28px; margin:0 0 26px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px}
.card{
  display:flex; flex-direction:column; justify-content:space-between;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:border-color .15s, transform .15s;
}
.card:hover{border-color:var(--brand); transform:translateY(-3px)}
.card-body{padding:22px 22px 8px}
.card-body h3{margin:0 0 8px; font-size:19px}
.card-body h3 a{color:var(--ink)}
.tagline{color:var(--brand); font-size:14px; margin:0 0 12px; font-weight:500}
.desc{color:var(--muted); font-size:14px; margin:0}
.card-actions{display:flex; flex-wrap:wrap; gap:8px; padding:16px 22px 22px}

/* Product detail */
.product-detail{padding:40px 22px 80px}
.back{display:inline-block; color:var(--muted); margin-bottom:14px; font-size:14px}
.product-detail h1{font-size:34px; margin:0 0 8px}
.product-grid{display:grid; grid-template-columns:1fr 340px; gap:34px; margin-top:24px}
.screens{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:22px 0}
.screen-ph{
  aspect-ratio:4/3; border:1px dashed var(--line); border-radius:10px;
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  font-size:13px; background:var(--bg2);
}
.offer-box{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.offer-box h3{margin:0 0 14px}
.hint{color:var(--muted); font-size:12px; word-break:break-all; margin:6px 0 16px}
.plan-list{list-style:none; padding:0; margin:0}
.plan-list li{display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid var(--line); flex-wrap:wrap}
.plan-label{flex:1; font-size:14px}
.plan-price{font-weight:700; color:var(--accent)}
.file-list{list-style:none; padding:0}
.file-list li{padding:8px 0; border-bottom:1px solid var(--line)}
.sz{color:var(--muted); font-size:12px; margin-left:8px}

/* Download center */
.download-center{padding:40px 22px 80px}
.file-table{width:100%; border-collapse:collapse; margin-top:20px}
.file-table th,.file-table td{text-align:left; padding:12px 10px; border-bottom:1px solid var(--line)}
.file-table th{color:var(--muted); font-weight:500; font-size:13px}
.empty{color:var(--muted); margin-top:20px}

/* Order form */
.order-page{padding:40px 22px 80px; max-width:560px}
.order-form{display:flex; flex-direction:column; gap:18px; margin-top:24px}
.order-form label{display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--muted)}
.order-form input,.order-form select{
  padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg2); color:var(--ink); font-size:15px;
}
.order-form input:focus,.order-form select:focus{outline:none; border-color:var(--brand)}
.result h1{margin-top:10px}
.err{background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:14px; overflow:auto; font-size:12px; color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:26px 0; color:var(--muted); font-size:13px; margin-top:40px}

@media(max-width:820px){
  .product-grid{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}