*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Arial,sans-serif;background:#070b10;color:#eef4ff}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(900px 420px at 10% -10%,#16332555,transparent 60%),radial-gradient(700px 380px at 110% 10%,#10203866,transparent 55%)}
a{color:#8be0a8}
header,section,footer{max-width:980px;margin:0 auto;padding:22px 18px;position:relative}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.logo{font-weight:800;font-size:22px;color:#eef4ff;text-decoration:none;letter-spacing:.02em}
nav{display:flex;flex-wrap:wrap;gap:8px}
nav a{margin:0;text-decoration:none;color:#062015;background:#8be0a8;font-size:14px;font-weight:800;padding:8px 12px;border-radius:12px}
nav a:hover{background:#b6f0c9;color:#062015}
.hero{padding-top:48px;padding-bottom:28px}
.badge{color:#8be0a8;letter-spacing:.08em;text-transform:uppercase;font-size:12px;margin:0 0 10px}
h1{font-size:clamp(28px,5vw,46px);line-height:1.12;margin:0 0 14px}
h1 em{color:#8be0a8;font-style:normal}
.lead{max-width:38rem;color:#b7c6dc;font-size:18px}
.btn,button{display:inline-block;background:#8be0a8;color:#062015;border:0;border-radius:14px;padding:13px 20px;font-weight:800;text-decoration:none;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
article{background:linear-gradient(180deg,#121c2b,#101826);border:1px solid #243044;border-radius:20px;padding:20px;box-shadow:0 12px 30px #0004}
article.hit{border-color:#8be0a8;transform:translateY(-4px)}
.price{font-size:34px;font-weight:800;margin:10px 0}
h2{font-size:26px}
.note,footer{color:#8fa2bb;font-size:14px}
footer a.quiet{color:#3d4d5c;text-decoration:none;margin-left:8px}
details{background:#101826;border:1px solid #1c2a3b;border-radius:14px;padding:12px 16px;margin:8px 0}
ol{line-height:1.8}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.how-grid div{background:#101826;border-radius:16px;padding:14px;border:1px solid #1c2a3b}
.how-grid b{display:block;color:#8be0a8;margin-bottom:6px}

#download .btn{margin-top:8px}

header{align-items:center}
.nav-main{display:flex;gap:8px;flex-wrap:nowrap}
.nav-more{position:relative}
.nav-more summary{list-style:none;cursor:pointer;background:#8be0a8;color:#062015;font-weight:800;padding:8px 12px;border-radius:12px}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more div{position:absolute;right:0;top:calc(100% + 8px);background:#101826;border:1px solid #243044;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:200px;z-index:30;box-shadow:0 12px 30px #0008}
.nav-more div a{background:transparent;color:#eef4ff;padding:8px 10px}
@media (max-width:720px){
  header{padding:14px 14px 10px;gap:10px}
  .logo{width:100%;font-size:20px}
  .nav-main{width:auto;flex:1}
  .nav-main a{flex:1;text-align:center;font-size:13px;padding:8px 8px}
  .hero{padding-top:20px}
  h1{font-size:28px}
  .lead{font-size:16px}
}
