@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-600-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/manrope-800-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/manrope-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root { --bg:#111; --card:#1c1c1c; --line:#2a2a2a; --accent:#F5C518;
        --text:#fff; --muted:#8a8a8a; --dim:#666; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); line-height:1.5;
       font-family:'Manrope',system-ui,sans-serif; -webkit-text-size-adjust:100%; }
.wrap { max-width:520px; margin:0 auto; padding:0 18px; }
.sec { padding-top:34px; }
.ac { color:var(--accent); }

/* — 1. перший екран — */
.hero { padding-top:26px; }
.who { display:flex; align-items:center; gap:11px; margin-bottom:22px; }
.ava { border-radius:50%; flex:none; }
.name { margin:0; font-weight:800; font-size:.94rem; letter-spacing:.01em; text-transform:uppercase; }
.handle { margin:2px 0 0; font-size:.78rem; color:var(--muted); }
h1 { margin:0; font-size:clamp(2.15rem, 11.5vw, 3.1rem); font-weight:800;
     line-height:1.03; letter-spacing:-.025em; }
.lead { margin:14px 0 0; color:#b4b4b4; font-size:.95rem; }
/* Кнопка на всю ширину — великий палець має влучати без прицілювання */
.btn { display:block; width:100%; margin-top:22px; padding:15px; border:0; border-radius:10px;
       background:var(--accent); color:#111; font:inherit; font-weight:800; font-size:.92rem;
       text-align:center; text-decoration:none; cursor:pointer; }

/* — 2. цифри — */
.stats { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:0; padding:0; list-style:none; }
.stats li { background:var(--card); border-radius:10px; padding:13px 14px; }
.stats b { display:block; font-size:1.32rem; font-weight:800; letter-spacing:-.01em; }
.stats span { display:block; margin-top:2px; font-size:.74rem; color:var(--muted); }
.note { margin:12px 0 0; font-size:.72rem; color:var(--dim); }
h2 { margin:0 0 13px; font-size:1.18rem; font-weight:800; letter-spacing:-.015em; }

/* — 3. формати — */
.formats { display:flex; flex-direction:column; gap:9px; margin:0; padding:0; list-style:none; }
.formats li { background:var(--card); border-radius:10px; padding:13px 14px; }
.formats b { font-size:.92rem; font-weight:600; }
.formats span { display:block; margin-top:3px; font-size:.8rem; color:var(--muted); }

/* — 4. кейси — */
.cases { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.case { background:var(--card); border-radius:10px; overflow:hidden;
        color:inherit; text-decoration:none; }
.case img, .case-noimg { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
.case-noimg { background:#232323; }
.case-body { padding:10px 12px 12px; }
.case-views { font-size:1.15rem; font-weight:800; letter-spacing:-.01em; }
.case-adv { margin-top:2px; font-size:.72rem; color:var(--muted); }
.case-title { margin-top:1px; font-size:.68rem; color:var(--dim); }

/* — 5. три кроки — */
.steps { display:flex; gap:9px; margin:0; padding:0; list-style:none; }
.steps li { flex:1; background:var(--card); border-radius:10px; padding:12px 11px; }
.steps b { display:block; font-size:1.1rem; font-weight:800; color:var(--accent); }
.steps span { display:block; margin-top:4px; font-size:.74rem; color:var(--muted); }

/* — 6. форма — */
#lead input, #lead textarea { display:block; width:100%; margin-bottom:9px; padding:13px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--text);
  font:inherit; font-size:.92rem; resize:vertical; }
#lead ::placeholder { color:#5f5f5f; }
#lead :focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
#lead .err { border-color:#e5484d; }
.form-err { margin:2px 0 0; font-size:.78rem; color:#e5484d; }
.thanks { margin:0; padding:15px; border-radius:10px; background:var(--card);
          font-weight:600; text-align:center; }

/* — 7. підвал — */
.foot { display:flex; flex-wrap:wrap; gap:0 16px; padding-bottom:26px; font-size:.8rem; }
/* Вертикальні відступи — щоб у посилання можна було влучити пальцем (44px) */
.foot a { padding:13px 0; color:var(--muted); text-decoration:none; }
.foot a:first-child { color:var(--text); font-weight:600; }