:root{--bg:#ffffff;--ink:#f8fafc;--muted:#94a3b8;--brand:#0b5fff;--brand-2:#0d9488;--surface:#1e293b;--line:#334155}
    *{box-sizing:border-box}
    body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;line-height:1.6;color:#0f172a;background:var(--bg);margin:0}
    a{text-decoration:none;color:inherit}
    main{max-width:980px;margin:0 auto;padding:56px 24px 48px}

    /* Header (Leon style) */
    .site-header{background:#111827;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4);position:sticky;top:0;z-index:99}
    .site-header .wrap{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
    .nav-left{display:flex;align-items:center;gap:18px}
    .nav-left .brand{font-weight:900;font-size:20px;letter-spacing:.5px}
    .nav-left .logo{font-weight:900;font-size:22px;background:#fff;color:#111827;border-radius:6px;padding:2px 6px}
    .nav-left a.btn{padding:8px 14px;border-radius:6px;font-weight:600;font-size:14px}
    .btn-login{background:#1f2937;color:#fff;border:1px solid #374151}
    .btn-login:hover{background:#374151}
    .btn-reg{background:#22c55e;color:#fff}
    .btn-reg:hover{background:#16a34a}

    .nav-menu{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:600;color:#f1f5f9}
    .nav-menu a{color:#f1f5f9;opacity:.9;transition:.2s ease}
    .nav-menu a:hover{opacity:1}

    /* Content */
    h1{font-size:32px;line-height:1.25;margin:0 0 12px 0;color:#111827}
    .heads{margin:28px 0 8px 0}
    .heads.blue h2{font-size:24px;margin:0;color:#0b5fff}
    .heads.green h3{font-size:18px;margin:0;color:#0d9488}
    .callout{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:16px;margin:12px 0}
    .callout p{margin:0 0 10px 0}
    ul,ol{margin:8px 0 8px 24px}
    .link-placeholder{white-space:pre-wrap;color:#475569;margin:6px 0 0 0}

    /* Footer */
    .site-footer{border-top:1px solid #e2e8f0;background:#f9fafb}
    .site-footer .wrap{max-width:980px;margin:0 auto;padding:28px 24px;display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
    .f-brand{display:flex;align-items:center;gap:12px}
    .f-brand .logo{width:32px;height:32px;border-radius:10px;background:#0b5fff1a;display:grid;place-items:center;color:#0b5fff;font-weight:900}
    .f-note{font-size:13px;color:#475569}
    .f-meta{display:grid;gap:8px;justify-items:end}
    .tiny{font-size:12px;color:#64748b}
    .f-lang{margin-top:12px;font-size:13px;opacity:.85}
.f-lang a{color:#64748b;text-decoration:none;margin:0 6px}
.f-lang a:hover{color:#00c864}
    /* ======= АДАПТИВ ======= */
img, video, iframe {max-width:100%; height:auto;}

/* чтобы длинные ссылки/слова не «ломали» вёрстку */
main, .callout {word-wrap:break-word; overflow-wrap:anywhere;}

@media (max-width: 992px) {
  main {max-width: 820px; padding:48px 18px 32px;}
  h1 {font-size:28px;}
  .site-header .wrap {padding:12px 16px;}
}

/* планшеты и телефоны */
@media (max-width: 768px) {
  main {max-width: 640px; padding:44px 16px 28px;}
  h1 {font-size:24px; line-height:1.25;}
  .heads.blue h2 {font-size:20px;}
  .heads.green h3 {font-size:16px;}
  .callout {padding:14px; border-radius:12px;}

  /* шапка: элементы в столбик */
  .site-header .wrap {display:flex; flex-wrap:wrap; gap:10px;}
  .nav-left {width:100%; justify-content:space-between;}
  .nav-menu {width:100%; display:flex; gap:8px;}

  /* кнопки: крупные и на всю ширину */
  .btn {display:inline-block; text-align:center; padding:12px 14px; border-radius:10px; font-weight:700;}
  .nav-menu .btn {flex:1 1 48%;}
}

/* маленькие телефоны */
@media (max-width: 480px) {
  main {padding:40px 12px 24px;}
  h1 {font-size:22px;}
  .heads.blue h2 {font-size:18px;}
  .heads.green h3 {font-size:15px;}

  /* кнопки по одной в столбик */
  .nav-menu {flex-direction:column;}
  .nav-menu .btn {flex:1 1 auto; width:100%;}
}

  
/* ------- Бургер + мобильное off-canvas меню ------- */
/* скрыт на десктопе */
.burger{display:none}

@media (max-width: 768px){
  .burger{
    display:inline-flex; flex-direction:column; gap:5px;
    width:40px; height:40px; align-items:center; justify-content:center;
    border:1px solid #2a3240; border-radius:10px; background:#121a25;
  }
  .burger span{display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:transform .25s, opacity .25s}
  body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* превращаем текущее меню в выезжающую панель */
  .nav-menu{
    position:fixed; top:0; right:0; height:100dvh;
    width:82vw; max-width:360px; padding:20px 16px 32px;
    background:#0f1722; overflow:auto; 
    box-shadow: -12px 0 30px rgba(0,0,0,.35);
    transform:translateX(100%); transition:transform .25s ease;
    display:flex; flex-direction:column; gap:14px;
    z-index:1001;
  }
  body.menu-open .nav-menu{transform:translateX(0)}
  body.menu-open{overflow:hidden}
  body.menu-open::before{content:""; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1000;}
  .nav-menu a, .nav-menu .btn{display:block; width:100%; text-align:center}
}

/* ===== Shared components ===== */
.banner img{max-width:100%;height:auto;border-radius:12px;display:block;margin:0 auto;}
.cta{text-align:center;margin:20px 0;}
.cta-btn{display:inline-block;background-color:#00c864;color:#fff;font-size:20px;font-weight:600;padding:14px 32px;border-radius:12px;text-decoration:none;transition:filter .2s ease;}
.cta-btn:hover{filter:brightness(.95);}


/* --- Fix: clickable links in mobile off-canvas menu --- */
body.menu-open::before{ pointer-events:none; } /* overlay won't block taps */
.nav-menu{ z-index:1002; } /* above overlay */
.nav-menu a{ pointer-events:auto; }


/* --- Fix (mobile menu): ensure clicks work and menu above all --- */
.nav-menu{ z-index: 9999; }
body.menu-open::before{ pointer-events: none; }
.nav-menu, .nav-menu *{ pointer-events: auto; }


/* --- Mobile: hide dropdown menu, leave only auth buttons --- */
@media (max-width: 768px){
  .burger{ display:none !important; }
  .nav-menu{ display:none !important; }
  /* Подравниваем левый блок в шапке (логотип + Войти + Регистрация) */
  .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; }
  .nav-left{ display:flex; align-items:center; gap:10px; width:100%; justify-content:space-between; }
  /* Небольшая адаптация кнопок */
  .nav-left .btn{ padding:10px 14px; border-radius:10px; font-weight:700; }
}