/* == SAFARALI GROUP / S MESSENGER — ЕДИНЫЙ АДАПТИВНЫЙ СТИЛЬ v3 ==
   Диапазон: смарт-часы (320px) → телефон → планшет → ноутбук → монитор → ТВ 4K */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:#07100b;color:#e8f5ee;line-height:1.65;overflow-x:hidden}
a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
img{max-width:100%;height:auto}
[id]{scroll-margin-top:84px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;width:100%}

/* ---- ПЛАВНЫЕ АНИМАЦИИ ПОЯВЛЕНИЯ ---- */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise{animation:rise .7s ease both}
.rise-2{animation:rise .7s ease .12s both}
.rise-3{animation:rise .7s ease .24s both}
@media(prefers-reduced-motion:reduce){.rise,.rise-2,.rise-3{animation:none}}

/* ---- ШАПКА (одинаковая везде) ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,16,11,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #14231a}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:#fff;white-space:nowrap;min-width:0}
.brand .logo-dot{flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#22c55e,#0d9488);display:flex;align-items:center;justify-content:center;font-size:17px}
.nav-actions{display:flex;gap:10px;align-items:center;flex-shrink:0}
.nav-link{color:#a7f3d0;font-weight:600;font-size:14px;border:1px solid #24503a;padding:9px 16px;border-radius:12px;transition:.2s;white-space:nowrap}
.nav-link:hover{background:#12241a;color:#4ade80}

/* ---- КНОПКИ ---- */
.btn{display:inline-block;font-weight:700;border-radius:13px;padding:14px 30px;font-size:15.5px;transition:.25s;text-align:center}
.btn-primary{background:linear-gradient(90deg,#22c55e,#15803d);color:#04150c;box-shadow:0 8px 32px rgba(34,197,94,.32)}
.btn-primary:hover,.btn-primary:focus-visible{transform:translateY(-3px);box-shadow:0 14px 40px rgba(34,197,94,.42);filter:brightness(1.06)}
.btn-big{font-size:clamp(17px,3vw,20px);padding:18px 48px;font-weight:800}
.btn-outline{border:1px solid #24503a;color:#a7f3d0}
.btn-outline:hover,.btn-outline:focus-visible{background:#12241a;color:#4ade80}
.btn-sm{padding:10px 20px;font-size:14px}

/* ---- ГЕРОЙ ---- */
.hero{text-align:center;padding:70px 0 54px;position:relative}
.hero::before{content:"";position:absolute;inset:-80px 0 auto;height:420px;background:radial-gradient(ellipse at top,rgba(34,197,94,.13),transparent 65%);pointer-events:none;left:0;right:0}
.badge-ver{display:inline-flex;align-items:center;gap:8px;background:#12241a;border:1px solid #24503a;color:#4ade80;font-size:13px;font-weight:700;padding:7px 16px;border-radius:99px;margin-bottom:20px;text-align:left}
.badge-ver .live{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e;animation:pulse 2s infinite;flex:0 0 8px}
@keyframes pulse{50%{opacity:.35}}
h1.page-title{font-size:clamp(33px,6.5vw,52px);line-height:1.14;background:linear-gradient(90deg,#fff,#a7f3d0 75%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:16px}
.hero .sub{font-size:clamp(15px,2.4vw,18px);color:#9fb8aa;max-width:640px;margin:0 auto 30px}
.hero .sub b,.hero .sub strong{color:#4ade80}

/* Блок скачивания в герое */
.dl-box{background:#0d1712;border:1px solid #17291f;border-radius:22px;padding:30px 26px;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:520px;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,.4)}

/* ---- СЕКЦИИ ---- */
.section{padding:50px 0}
.sec-title{font-size:clamp(24px,4.2vw,34px);text-align:center;color:#fff;margin-bottom:10px}
.sec-sub{text-align:center;color:#8fa89a;margin-bottom:36px;font-size:16px}

/* ---- КАРТОЧКИ ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:18px}
.card{background:#0d1712;border:1px solid #17291f;border-radius:20px;padding:26px 24px;transition:.25s;overflow-wrap:break-word}
.card:hover{border-color:#2e5340;transform:translateY(-4px)}
.card .ic{font-size:32px;display:block;margin-bottom:12px}
.card h3{font-size:17.5px;color:#fff;margin-bottom:8px}
.card p{font-size:14.5px;color:#93ac9d}

/* ---- ПАНЕЛИ ---- */
.panel{background:#0d1712;border:1px solid #17291f;border-radius:22px;padding:32px 28px;overflow-wrap:break-word}
.panel-accent{background:linear-gradient(135deg,#0d2b1a,#0d1712);border:1px solid #1e3a29}
.center{text-align:center}
.muted{color:#8fa89a}
.meta-line{font-size:13.5px;color:#6b8577;margin-top:12px}
.meta-line b{color:#9fb8aa}

/* ---- СПИСОК ЧЕКОВ ---- */
.checklist{list-style:none;margin-top:18px}
.checklist li{padding:11px 0 11px 34px;position:relative;color:#c9e5d5;font-size:15.5px;border-bottom:1px dashed #17291f}
.checklist li:last-child{border:none}
.checklist li::before{content:"✅";position:absolute;left:0;top:11px}

/* ---- ШАГИ ---- */
.steps{counter-reset:s}
.step{display:flex;gap:16px;align-items:flex-start;padding:15px 0;border-bottom:1px dashed #17291f}
.step:last-child{border:none}
.step::before{counter-increment:s;content:counter(s);flex:0 0 40px;height:40px;border-radius:12px;background:#173325;color:#4ade80;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
.step p{color:#b9cdc1;font-size:15.5px;padding-top:7px}
.step p b{color:#fff}

/* ---- ПРЕДУПРЕЖДЕНИЕ ---- */
.notice-warn{margin-top:16px;background:#241303;border:1px solid #4a2a10;border-radius:14px;padding:16px 20px;color:#fdba74;font-size:14px}

/* ---- ПОЛОСА CTA ---- */
.cta-strip{text-align:center;background:linear-gradient(90deg,#0d2b1a,#0d1712);border:1px solid #1e3a29;border-radius:20px;padding:34px 26px}
.cta-strip p.desc{color:#9fb8aa;margin:8px auto 0;max-width:520px}

/* ---- БАНКОВСКИЙ НОМЕР ---- */
.number-box{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#0c1610;border:1px dashed #2e5340;border-radius:12px;padding:14px 16px;margin-top:12px;flex-wrap:wrap}
.number-box .num{font-family:'Courier New',monospace;font-size:17px;letter-spacing:1.5px;color:#fff;white-space:nowrap}
.copy-btn{background:#173325;color:#4ade80;border:1px solid #24503a;border-radius:10px;padding:9px 16px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.2s}
.copy-btn:hover,.copy-btn:focus-visible{background:#1e4632}
.copy-btn.copied{background:#14532d;color:#bbf7d0}
.pill{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:99px;background:#173325;color:#4ade80;letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px}

/* ---- ПЛАВАЮЩАЯ КНОПКА (мобильные) ---- */
.float-cta{display:none}

/* ---- ФУТЕР (одинаковый везде) ---- */
.site-footer{border-top:1px solid #14231a;margin-top:56px;padding:34px 0;text-align:center;color:#6b8577;font-size:14px}
.site-footer .tg{color:#4ade80;font-weight:600}
.site-footer .flinks{margin-top:8px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.site-footer .flinks a{color:#4ade80}
.site-footer .made{margin-top:10px;font-size:13px}

/* ================== АДАПТИВНОСТЬ: ЧАСЫ → ТВ ================== */

/* --- ⌚ Часы / очень маленькие экраны (<360px) --- */
@media(max-width:359px){
  body{font-size:14px}
  .wrap{padding:0 10px}
  .nav{height:52px;gap:6px}
  .brand{font-size:14.5px;gap:7px}
  .brand .logo-dot{flex-basis:26px;width:26px;height:26px;font-size:13px;border-radius:8px}
  .btn-sm{padding:8px 12px;font-size:12.5px}
  h1.page-title{font-size:24px}
  .hero{padding:30px 0 24px}
  .badge-ver{font-size:9.5px;padding:5px 10px;margin-bottom:14px}
  .hero .sub{font-size:13.5px}
  .section{padding:28px 0}
  .sec-title{font-size:20px}
  .card{padding:16px 14px;border-radius:16px}
  .card .ic{font-size:26px}
  .card h3{font-size:15px}
  .card p{font-size:13px}
  .panel{padding:20px 14px;border-radius:16px}
  .dl-box{padding:22px 14px}
  .btn-big{padding:14px 16px;font-size:15px}
  .number-box .num{font-size:13px;letter-spacing:.6px}
  .copy-btn{width:100%;padding:10px}
  .step::before{flex-basis:30px;height:30px;font-size:13px;border-radius:9px}
  .step p{font-size:13.5px}
  .checklist li{font-size:13.5px;padding-left:28px}
  .site-footer{font-size:12.5px}
}

/* --- 📱 Планшеты и небольшие ноутбуки --- */
@media(max-width:900px){
  .hero{padding:56px 0 42px}
  .section{padding:42px 0}
  .panel{padding:28px 22px}
  .grid{gap:16px}
  .site-footer{margin-top:46px}
}

/* --- 🔸 Тесная шапка: прячем текстовые ссылки раньше --- */
@media(max-width:860px){
  .nav-actions .nav-link{display:none}
}

/* --- 📱 Телефоны --- */
@media(max-width:640px){
  .wrap{padding:0 16px}
  .nav{height:58px;gap:8px}
  /* в шапке остаётся только логотип и главная кнопка — ссылки есть в футере */
  .nav-actions .nav-link{display:none}
  .brand{font-size:16.5px}
  .brand .logo-dot{flex-basis:30px;width:30px;height:30px;font-size:15px;border-radius:9px}
  .btn-sm{padding:9px 16px;font-size:13.5px}
  .hero{padding:40px 0 32px}
  .badge-ver{font-size:11.5px;padding:6px 13px;margin-bottom:16px;letter-spacing:.3px}
  h1.page-title{margin-bottom:12px}
  .section{padding:34px 0}
  .sec-title{margin-bottom:8px}
  .sec-sub{margin-bottom:26px;font-size:15px}
  .grid{gap:14px;grid-template-columns:1fr}
  .card{padding:20px 18px;border-radius:18px}
  .card:hover{transform:none}
  .card h3{font-size:16.5px}
  .card p{font-size:14px}
  .panel{padding:24px 18px;border-radius:18px}
  .dl-box{padding:24px 18px;border-radius:18px}
  .step{gap:12px;padding:13px 0}
  .step::before{flex-basis:34px;height:34px;font-size:15px;border-radius:10px}
  .step p{font-size:14.5px;padding-top:5px}
  .checklist li{padding:10px 0 10px 30px;font-size:14.5px}
  .checklist li::before{top:10px}
  .notice-warn{padding:14px 16px;font-size:13.5px}
  .cta-strip{padding:26px 18px;border-radius:18px}
  .number-box{flex-direction:column;align-items:stretch;text-align:center}
  .number-box .num{font-size:15.5px;letter-spacing:1.2px}
  .copy-btn{width:100%;padding:11px 16px}
  .pill{font-size:10.5px}
  .meta-line{font-size:12.5px}
  /* плавающая кнопка «Скачать» внизу экрана */
  .float-cta{display:block;position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:90;text-align:center;padding:16px;border-radius:15px;font-size:16px;box-shadow:0 14px 40px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;transform:translateY(12px)}
  .float-cta.show{opacity:1;pointer-events:auto;transform:none}
  .site-footer{padding:28px 0 36px;margin-top:40px;font-size:13.5px;padding-bottom:96px}
  .site-footer .flinks{gap:10px 16px;line-height:2}
  .site-footer .made{font-size:12px}
}

/* --- 📱 Маленькие телефоны --- */
@media(max-width:400px){
  h1.page-title{font-size:29px}
  .hero .sub{font-size:14.5px}
  .btn-big{padding:16px 20px;font-size:16.5px}
  .badge-ver{font-size:10.5px}
  .sec-title{font-size:23px}
}

/* --- 💻 Большие ноутбуки --- */
@media(min-width:1200px){
  .wrap{max-width:1140px}
  .section{padding:58px 0}
}

/* --- 🖥️ Мониторы Full HD+ --- */
@media(min-width:1600px){
  .wrap{max-width:1260px}
  h1.page-title{font-size:60px}
  .sec-title{font-size:40px}
  .hero .sub{font-size:20px;max-width:720px}
  .section{padding:72px 0}
  .card p{font-size:16px}
  .checklist li{font-size:17px}
  .step p{font-size:17px}
}

/* --- 📺 ТВ / 2K--- */
@media(min-width:2200px){
  .wrap{max-width:1420px}
  body{line-height:1.7}
  h1.page-title{font-size:78px}
  .sec-title{font-size:54px}
  .hero .sub{font-size:26px;max-width:860px;margin-bottom:40px}
  .hero{padding:110px 0 80px}
  .badge-ver{font-size:17px;padding:10px 24px}
  .section{padding:92px 0}
  .sec-sub{font-size:23px;margin-bottom:52px}
  .btn{padding:19px 42px;font-size:20px;border-radius:16px}
  .btn-big{padding:26px 68px;font-size:27px}
  .btn-sm{padding:14px 28px;font-size:17px}
  .nav{height:92px}
  .brand{font-size:27px}
  .brand .logo-dot{width:46px;height:46px;font-size:23px;border-radius:13px}
  .nav-link{font-size:17px;padding:12px 24px}
  .card{padding:40px 36px;border-radius:28px}
  .card .ic{font-size:44px}
  .card h3{font-size:25px;margin-bottom:12px}
  .card p{font-size:20px}
  .panel{padding:50px 44px;border-radius:30px}
  .dl-box{padding:46px 40px;border-radius:30px;max-width:640px}
  .checklist li{font-size:21px;padding:15px 0 15px 44px}
  .step{gap:22px;padding:20px 0}
  .step::before{flex-basis:54px;height:54px;font-size:24px;border-radius:15px}
  .step p{font-size:21px;padding-top:12px}
  .number-box{padding:20px 24px;border-radius:16px}
  .number-box .num{font-size:27px}
  .copy-btn{font-size:17px;padding:13px 24px}
  .notice-warn{font-size:19px;padding:22px 28px;border-radius:18px}
  .cta-strip{padding:52px 40px;border-radius:26px}
  .pill{font-size:15px;padding:6px 18px}
  .meta-line{font-size:18px}
  .site-header{border-bottom-width:2px}
  .site-footer{font-size:19px;padding:52px 0;margin-top:80px;border-top-width:2px}
  .site-footer .flinks{gap:26px;margin-top:12px}
  .site-footer .made{font-size:17px;margin-top:14px}
  [id]{scroll-margin-top:110px}
}

/* --- 📺 ТВ 4K (очень большие) --- */
@media(min-width:3200px){
  .wrap{max-width:1800px}
  h1.page-title{font-size:100px}
  .sec-title{font-size:70px}
  .hero .sub{font-size:33px}
  .card p,.step p,.checklist li{font-size:26px}
  .card h3{font-size:32px}
}