:root{
  --bg: #0c0f14;
  --panel: #11151d;
  --text: #e7f0ff;
  --muted: #a9b1c3;
  --acc: #6aa8ff;
  --acc-2: #8b5cf6;
  --ok: #00d48c;
  --warn: #ffb020;
  --danger: #ff5d6c;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(138, 92, 246, .18), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, rgba(106, 168, 255, .18), transparent 60%),
    var(--bg);
  line-height:1.6;
}

.container{width:min(1160px, 92%); margin-inline:auto}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(12,15,20,.9), rgba(12,15,20,.65));
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:.5px}
.logo-mark{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, var(--acc), var(--acc-2));
  color:#fff; font-weight:900;
  box-shadow: var(--shadow);
}
.logo-text{text-transform:lowercase; font-size:18px; opacity:.95}

.nav-toggle{
  display:none; background:none; border:0; padding:8px; margin-left:auto; cursor:pointer;
}
.nav-toggle-bar{display:block; width:22px; height:2px; background:#d9e5ff; margin:4px 0; border-radius:2px}

.nav-list{display:flex; gap:18px; list-style:none; padding:0; margin:0}
.nav-link{color:var(--muted); text-decoration:none; font-weight:600}
.nav-link:hover{color:#fff}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; height:44px; padding:0 18px; border-radius:12px;
  text-decoration:none; font-weight:700; letter-spacing:.2px; transition:.2s ease;
}
.btn-outline{
  border:1px solid rgba(255,255,255,.18); color:#fff; background:transparent;
}
.btn-outline:hover{border-color:transparent; background:rgba(255,255,255,.1)}
.btn-primary{
  color:#0a0f16; background:linear-gradient(135deg, var(--acc), var(--ok));
  border:0; box-shadow: var(--shadow);
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-lg{height:56px; padding:0 28px; font-size:18px}
.small{height:36px; padding:0 14px; font-size:14px}

/* Hero */
.hero{padding:84px 0 40px}
.hero-inner{text-align:center}
.hero-badges{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:18px}
.badge{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  padding:6px 10px; border-radius:999px; color:#d5def3; font-weight:700; font-size:13px; letter-spacing:.2px
}
.hero-title{font-size:40px; line-height:1.15; margin:8px auto 18px; max-width:980px}
.accent{color:#cfe2ff; font-weight:500}
.hero-cta{margin:26px 0 10px}
.made-by{opacity:.8; margin-top:10px}
.line-break{display:block}

@media (max-width:680px){
  .hero-title{font-size:30px}
}

/* Features */
.features{padding:40px 0 20px}
.features-grid{
  display:grid; gap:18px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width:960px){ .features-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width:640px){ .features-grid{grid-template-columns: 1fr} }

.feature{
  background:var(--panel); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius); padding:20px; box-shadow: var(--shadow);
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto 1fr; column-gap:12px; row-gap:6px;
}
.feature-icon{
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg, rgba(106,168,255,.25), rgba(139,92,246,.25));
  display:grid; place-items:center;
}
.feature-icon svg{width:24px; height:24px; fill:#dfe9ff}
.feature-num{color:#9fb5dd; font-weight:800}
.feature-title{margin:0; align-self:center}
.feature-text{grid-column:1 / -1; color:#c7d4ee; margin:6px 0 8px}
.feature-link{grid-column:1 / -1; color:#9cc5ff; text-decoration:none}
.feature-link:hover{text-decoration:underline}

/* Howto */
.howto{padding:28px 0 40px}
.section-title{font-size:26px; margin:8px 0 18px}
.steps{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .steps{grid-template-columns:1fr} }
.step{
  background:var(--panel); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius); padding:20px; box-shadow: var(--shadow);
}
.step-num{color:#9fb5dd; font-weight:800}
.step-title{margin:8px 0 6px}
.step-text{color:#c7d4ee}

.app-buttons{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.app-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; background:#19202b; border:1px solid rgba(255,255,255,.06);
  color:#e8f2ff; text-decoration:none; font-weight:700; min-width:88px;
}
.app-btn:hover{background:#1f2836}

.cta-center{display:flex; justify-content:center; margin:26px 0 0}
.promo{
  margin:24px 0 8px; padding:18px; border-radius:14px;
  background:linear-gradient(135deg, rgba(106,168,255,.15), rgba(139,92,246,.15));
  border:1px solid rgba(255,255,255,.1);
}
.videos-title{margin-top:22px}
.videos-grid{
  display:grid; gap:14px; grid-template-columns:repeat(4,1fr); margin-top:10px
}
@media (max-width:960px){ .videos-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .videos-grid{grid-template-columns:1fr} }
.video-card{
  background:var(--panel); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius); text-decoration:none; color:#e9f2ff;
  box-shadow: var(--shadow); overflow:hidden; display:grid; gap:10px; padding:10px;
}
.video-thumb{
  aspect-ratio: 16 / 9; border-radius:12px;
  background:
    linear-gradient(135deg, rgba(106,168,255,.25), rgba(139,92,246,.25)),
    radial-gradient(300px 120px at 70% 20%, rgba(255,255,255,.15), transparent 60%),
    #0f141d;
  border:1px solid rgba(255,255,255,.06);
}
.video-card span{font-weight:700; opacity:.9}

/* Footer */
.site-footer{
  margin-top:20px; padding:24px 0 40px; border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(0deg, rgba(12,15,20,.9), rgba(12,15,20,.75));
}
.footer-inner{display:grid; gap:18px; align-items:center; justify-items:center}
.footer-nav{display:flex; flex-wrap:wrap; gap:16px; list-style:none; padding:0; margin:0}
.footer-link{color:#c6d3ea; text-decoration:none}
.footer-link:hover{color:#fff}
.payments{display:flex; gap:10px; flex-wrap:wrap}
.pm{
  width:56px; height:32px; border-radius:8px; display:inline-block; border:1px solid rgba(255,255,255,.08);
  background:#121723;
}
.pm.visa{background:linear-gradient(135deg, #153b8a, #2d5fd0)}
.pm.mc{background:linear-gradient(135deg, #ea001b, #ff9900)}
.pm.mir{background:linear-gradient(135deg, #19a777, #0f6651)}
.pm.platron{background:linear-gradient(135deg, #2f2f2f, #6f6f6f)}
.pm.paymaster{background:linear-gradient(135deg, #384657, #627996)}
.pm.qiwi{background:linear-gradient(135deg, #ff8400, #ffb357)}
.copy{opacity:.65; margin:8px 0 0; text-align:center}

/* Responsive nav */
@media (max-width:900px){
  .nav-toggle{display:inline-block}
  .nav-list{
    position:absolute; right:4%; top:64px; padding:14px; border-radius:12px; min-width:200px;
    background:var(--panel); border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow);
    display:none; flex-direction:column; gap:10px;
  }
  .nav-list.show{display:flex}
  .install-top{display:none}
}