:root { --ink:#080d18; --panel:#111a2e; --line:#22304d; --text:#e8ecf5; --dim:#93a0bd; --accent:#725bea; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--text); font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif; }
a { color:#a99bff; }
code { background:#1a2540; padding:1px 6px; border-radius:5px; font-size:.9em; }
html[lang=en] .ru, html[lang=ru] .en { display:none; }

nav { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:26px; padding:12px 28px; background:rgba(8,13,24,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
nav a { color:var(--text); text-decoration:none; font-size:15px; opacity:.85; }
nav a:hover { opacity:1; }
nav .brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; opacity:1; margin-right:auto; }
nav .brand img { width:28px; height:28px; border-radius:7px; }
nav button { background:none; color:var(--text); border:1px solid var(--line); border-radius:7px; padding:5px 11px; font:inherit; font-size:13px; cursor:pointer; }

.hero { background-size:cover; background-position:center; }
.hero .shade { min-height:560px; padding:110px 24px 70px; text-align:center; background:linear-gradient(rgba(8,13,24,.25),rgba(8,13,24,.55) 60%,var(--ink)); }
.hero h1 { margin:0; font-size:clamp(38px,6vw,64px); letter-spacing:-.02em; text-shadow:0 2px 24px rgba(0,0,0,.5); }
.hero .ver { font-weight:300; opacity:.85; }
.lead { max-width:640px; margin:16px auto 34px; font-size:20px; text-shadow:0 1px 12px rgba(0,0,0,.6); }
.download { display:inline-block; padding:19px 44px; border-radius:10px; background:var(--accent); color:#fff; font-size:21px; font-weight:650; text-decoration:none; box-shadow:0 10px 34px rgba(114,91,234,.45); transition:transform .12s, background .12s; }
.download:hover { background:#8672f2; transform:translateY(-2px); }
.meta { margin:16px 0 0; font-size:14px; color:#cfd6ea; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; opacity:.7; margin-top:6px; word-break:break-all; }

main { max-width:1040px; margin:0 auto; padding:10px 24px 60px; }
section { padding:46px 0 10px; }
h2 { font-size:30px; margin:0 0 22px; letter-spacing:-.01em; }
h3 { margin:0 0 8px; font-size:18px; }
.steps { counter-reset:s; list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.steps li { counter-increment:s; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; color:var(--dim); font-size:15px; }
.steps li::before { content:counter(s); display:block; font-size:34px; font-weight:700; color:var(--accent); line-height:1; margin-bottom:10px; }
.steps b { display:block; color:var(--text); font-size:18px; margin-bottom:4px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; }
.card p { margin:0; color:var(--dim); font-size:15px; }
.shot { width:100%; margin-top:26px; border-radius:14px; border:1px solid var(--line); display:block; }
.note { color:var(--dim); font-size:15px; margin-top:20px; }
.notes { list-style:none; padding:0; margin:0; }
.notes li { padding:12px 0; border-bottom:1px solid var(--line); color:var(--dim); }
.notes b { color:var(--text); display:inline-block; width:70px; }
footer { border-top:1px solid var(--line); padding:26px 24px 40px; text-align:center; color:var(--dim); font-size:13px; }

.eco-hero { text-align:center; padding:90px 24px 30px; }
.eco-hero h1 { margin:0; font-size:clamp(36px,6vw,60px); letter-spacing:-.02em; }
.eco-hero p { max-width:680px; margin:16px auto 0; color:var(--dim); font-size:19px; }
.stats { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:34px 0 0; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 26px; min-width:150px; }
.stat b { display:block; font-size:32px; }
.stat span { color:var(--dim); font-size:14px; }
.product { display:flex; flex-direction:column; }
.product .tag { font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.product p { flex:1; }
.product .get { margin-top:16px; align-self:flex-start; padding:9px 18px; border-radius:8px; background:var(--accent); color:#fff; text-decoration:none; font-size:14px; font-weight:600; }
.product .soon { margin-top:16px; align-self:flex-start; padding:9px 18px; border-radius:8px; border:1px solid var(--line); color:var(--dim); font-size:14px; }