/* Стили витрины: лендинг и статьи. Один файл и один порядок правил —
   разрезать нельзя, каскад зависит от порядка (урок 21.09.2026). */

 @font-face{font-family:"Actay Wide";font-weight:700;font-display:swap;src:url("actaywide.otf") format("opentype")}
 :root{
   --bg:#1d1d23; --bg2:#26262e; --card:#2b2b34; --line:#3a3a44;
   --white:#fff; --ink:#f4f5f7; --muted:#9aa1ad;
   --pink:#fb23ff; --pink-deep:#e015e6; --lime:#b0ec00; --lime2:#d6fe1e;
   --light:#f1f3f6; --deep:#16161b; --soft:#22222a; --head-bg:rgba(29,29,35,.9);
   --fs-hero:54px; --fs-h2:44px; --fs-lead:19px; --fs-body:16px; --fs-small:16px;
   --logo:"Actay Wide","Geologica",sans-serif;
   --body:"Geologica",system-ui,-apple-system,sans-serif;
 }
 *{box-sizing:border-box}
 html{scroll-behavior:smooth}
 body{margin:0;background:var(--bg);color:var(--ink);font:300 var(--fs-body)/1.6 var(--body);-webkit-font-smoothing:antialiased}
 /* Заголовки — Geologica bold, ОБЫЧНЫЙ регистр (как референс), НЕ uppercase */
 h1,h2,h3{font-family:var(--body);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.02em;color:var(--white)}
 a{color:inherit;text-decoration:none}
 .wrap{max-width:1200px;margin:0 auto;padding:0 32px}
 .btn{display:inline-flex;align-items:center;gap:10px;font:500 18px/1 var(--body);
      border-radius:12px;padding:17px 30px;cursor:pointer;border:2px solid transparent;transition:transform .15s,background .15s,border-color .15s,color .15s}
 .btn.pink{background:var(--pink);color:#fff;font-weight:600}
 .btn.pink:hover{background:var(--pink-deep);transform:translateY(-2px)}
 .btn.ghost{background:transparent;border-color:#4a4a54;color:var(--ink)}
 .btn.ghost:hover{border-color:var(--white);transform:translateY(-2px)}
 /* Кнопка в стиле виджета Telegram Login */
 .btn.tgw{background:#54a9eb;color:#fff;font-weight:600;border-radius:999px;display:inline-flex;align-items:center;gap:10px}
 .btn.tgw:hover{background:#419fe8;transform:translateY(-2px)}

 /* Логотип — Actay Wide (как САТОШИ на референсе) */
 header{position:sticky;top:0;z-index:20;background:var(--head-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
 nav{display:flex;align-items:center;justify-content:space-between;height:74px}
 .brand{font-family:var(--logo);font-weight:700;font-style:italic;font-size:22px;text-transform:uppercase;letter-spacing:.02em;display:flex;align-items:center;gap:11px;color:var(--white)}
 .brand svg{width:34px;height:auto;font-style:normal;
  filter:drop-shadow(0 3px 8px rgba(176,236,0,.28))}
 .nav-links{display:flex;gap:34px;align-items:center;font:200 20px/1.5 var(--body);color:var(--muted)}
 .nav-links a:hover{color:var(--white)}
 .nav-cta{display:flex;gap:16px;align-items:center}
 .langs{display:flex;gap:8px;align-items:center;font:500 17px/1 var(--body);color:var(--muted)}
 .langs a{color:var(--muted)}.langs a:hover{color:var(--white)}
 .langs a.cur{color:var(--lime2);font-weight:700}
 .nav-cta .btn{padding:13px 24px;font-size:17px}
 @media(max-width:900px){.nav-links{display:none}}
 /* 28.09.2026: на телефоне шапка была шире экрана (473px при 390) — появлялась
    горизонтальная прокрутка. Шапка липкая, переносить её в две строки — значит
    отнять у экрана полосу; поэтому на узких экранах остаётся значок без надписи. */
 @media(max-width:480px){.brand .brand-name{display:none}.nav-cta{gap:10px}
   .hero .grid>*{min-width:0}.hero .eyebrow{flex-wrap:wrap}}   /* надзаголовок распирал колонку на 320px */

 .hero{padding:70px 0 84px;position:relative;overflow:hidden}
 /* фоновый паттерн-иконки как у референса — тонкие серые символы */
 .hero::before{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
   background-image:radial-gradient(circle at 20% 80%,#fff 1px,transparent 1px),radial-gradient(circle at 70% 30%,#fff 1px,transparent 1px);background-size:60px 60px}
 .hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;position:relative}
 .hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 var(--fs-small)/1 var(--body);text-transform:uppercase;letter-spacing:.12em;
   color:var(--lime2);border:1px solid rgba(214,254,30,.35);border-radius:999px;padding:10px 17px;margin-bottom:28px}
 .hero h1{font-size:var(--fs-hero);line-height:1.05;font-weight:700}
 .hero h1 .mark{color:var(--lime2)}
 .hero p.lead{font:200 20px/1.55 var(--body);color:var(--muted);max-width:44ch;margin:26px 0 34px}
 .hero .cta{display:flex;gap:14px;flex-wrap:wrap}
 .hero .cta .btn{font-size:22px;padding:20px 36px}
 .hero .note{margin-top:20px;color:#6f7683;font-size:var(--fs-small)}
 .plane-box{position:relative;display:flex;align-items:center;justify-content:center;min-height:400px}
 .plane-box::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(176,236,0,.16),transparent 60%)}
 .plane{position:relative;width:min(470px,96%);height:auto;filter:drop-shadow(0 30px 60px rgba(176,236,0,.22))}
 @media(max-width:900px){.hero .grid{grid-template-columns:1fr}.plane-box{min-height:260px;order:-1}.hero h1{font-size:44px}}

 .stats{display:flex;gap:16px;flex-wrap:wrap;margin-top:60px;position:relative}
 .stat{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 26px}
 .stat b{font-family:var(--body);font-weight:700;font-size:38px;display:block;line-height:1;color:var(--white)}
 .stat span{color:var(--muted);font-size:var(--fs-small);margin-top:10px;display:block}

 .sec-head .kicker{font:600 var(--fs-small)/1 var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--lime2);margin-bottom:16px}
 .sec-head h2{font-size:var(--fs-h2);line-height:1.08;max-width:18ch;font-weight:700}
 .sec-head .sub{color:var(--muted);font:200 20px/1.55 var(--body);max-width:52ch;margin:18px 0 0}

 .light{background:var(--light);color:#1d1d23;padding:96px 0}
 .light .kicker{color:#5a7a00}.light h2{color:#1d1d23}
 .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
 .step{background:#fff;border:1px solid #e2e6ec;border-radius:20px;padding:32px}
 .step .n{font-family:var(--body);font-weight:800;font-size:20px;color:#1d1d23;background:var(--lime);width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
 .step h3{font-size:21px;margin-bottom:11px;color:#1d1d23;font-weight:700}
 .step p{color:#525252;font:200 20px/1.5 var(--body);margin:0}

 .dark-sec{padding:96px 0}
 /* Вопросы и ответы: раскрывающиеся строки. Своя рамка у каждой, чтобы
    список читался как перечень, а не сплошной текст. */
 .faq{margin-top:38px;display:grid;gap:12px;max-width:80ch}
 .faq-item{background:var(--card);border:1px solid var(--line);border-radius:14px;
   padding:18px 22px}
 .faq-item summary{cursor:pointer;font:500 20px/1.4 var(--body);color:var(--ink);
   list-style:none;display:flex;gap:12px;align-items:flex-start}
 .faq-item summary::-webkit-details-marker{display:none}
 .faq-item summary::before{content:"+";color:var(--lime);font-weight:700;flex:none;
   line-height:1.3}
 .faq-item[open] summary::before{content:"−"}
 .faq-item summary:hover{color:var(--white)}
 .faq-item p{margin:12px 0 0 24px;color:var(--muted);font:200 20px/1.6 var(--body)}
 .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
 .feat{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px;transition:transform .15s,border-color .15s}
 .feat:hover{transform:translateY(-4px);border-color:var(--pink)}
 .feat .ic{font-size:30px;margin-bottom:16px}
 .feat h3{font-size:21px;margin-bottom:10px;color:var(--white);font-weight:700}
 .feat p{color:var(--muted);font:200 20px/1.55 var(--body);margin:0}

 .safe-wrap{padding:0 0 96px}
 .safe{background:var(--deep);border:1px solid var(--line);border-radius:26px;padding:60px 54px;display:grid;grid-template-columns:1.05fr 1fr;gap:46px;align-items:center}
 .safe h2{font-size:var(--fs-h2);color:var(--white);font-weight:700}
 .safe p{color:var(--muted);font:200 20px/1.6 var(--body);margin:20px 0 0}
 .safe ul{list-style:none;margin:0;padding:0;display:grid;gap:17px}
 .safe li{display:flex;gap:13px;font:200 20px/1.45 var(--body);color:var(--ink)}
 .safe li b{color:var(--white)}.safe .chk{color:var(--lime);font-weight:800;font-size:20px}

 .cta-final{text-align:center;padding:104px 0;color:var(--white);border-top:1px solid var(--line);
   background:var(--soft) radial-gradient(ellipse 70% 90% at 50% 0%,rgba(176,236,0,.10),transparent 65%)}
 .cta-final h2{font-size:var(--fs-hero);color:var(--white);line-height:1.05;font-weight:700}
 .cta-final h2 .mark{color:var(--lime2)}
 .cta-final p{font-size:var(--fs-lead);font-weight:300;margin:22px auto 38px;max-width:46ch;color:var(--muted)}
 .cta-final .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
 .cta-final .btn{font-size:20px;padding:19px 34px}
 .cta-final .btn.dark{background:var(--pink);color:#fff;border-color:var(--pink);font-weight:600}
 .cta-final .btn.dark:hover{background:var(--pink-deep);transform:translateY(-2px)}
 .cta-final .btn.outline{background:transparent;border-color:#4a4a54;color:var(--white)}
 .cta-final .btn.outline:hover{border-color:var(--white);background:rgba(255,255,255,.06);transform:translateY(-2px)}
 @media(max-width:900px){.cta-final h2{font-size:44px}}

 footer{background:var(--deep);padding:46px 0;color:#6f7683;font-size:var(--fs-small);border-top:1px solid var(--line)}
 footer .row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
 footer .row>div{flex-wrap:wrap}   /* ссылки подвала переносятся, а не вылезают за экран */
 footer a{color:var(--muted);font:200 20px/1.5 var(--body)}footer a:hover{color:var(--white)}
 footer .brand{font-size:18px;color:var(--white)}
 @media(max-width:900px){.steps,.feats{grid-template-columns:1fr}.safe{grid-template-columns:1fr;padding:44px 30px}}
 /* в конце файла: должно перебить правила для 900px (там 44px).
    28.09.2026: на экранах ≤360px длинные слова крупных заголовков («комментария»,
    «ИИ-комментарии») при 44px шире колонки — страница ехала вбок */
 @media(max-width:360px){:root{--fs-h2:34px}.hero h1,.cta-final h2{font-size:36px}.nav-cta .btn{padding:13px 16px}}