:root{
  --bg:#f8f9fa;--bg-warm:#fff;--bg-card:#fff;--bg-hover:#f1f3f5;
  --accent:#0f172a;--accent-l:#334155;--accent-bg:#f1f5f9;--accent-bg-s:#e2e8f0;
  --green:#10b981;--green-bg:rgba(16,185,129,.08);
  --text:#334155;--text-dim:#64748b;--text-b:#0f172a;
  --border:#e2e8f0;--border-l:#f1f5f9;
  --sh-sm:0 1px 2px rgb(0 0 0/.05);--sh-md:0 4px 6px -1px rgb(0 0 0/.1);--sh-lg:0 10px 15px -3px rgb(0 0 0/.1);
  --r:16px;--r-s:12px;--r-x:8px;
  --f:'DM Sans',sans-serif;--fd:'Literata',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
::-webkit-scrollbar{width:7px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* Базовые классы и анимации */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-d{0%,100%{transform:scale(1)}50%{transform:scale(1.4);opacity:.6}}
@keyframes shimmer{100%{transform:translateX(100%)}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}.reveal.visible{opacity:1;transform:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Иконки */
.icon{width:24px;height:24px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.icon-s{width:18px;height:18px}.icon-l{width:32px;height:32px;stroke:var(--accent)}

/* Шапка (Десктоп) */
header{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 0;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:all .3s}
header.scrolled{padding:10px 0;border-bottom-color:var(--border);box-shadow:var(--sh-sm)}
.hd{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 24px}
.logo{font-family:var(--fd);font-size:1.35rem;font-weight:800;color:var(--text-b);text-decoration:none;display:flex;align-items:center;gap:10px;letter-spacing:-.5px}
.logo-i{width:36px;height:36px;border-radius:8px;background:#fff;border:1.5px solid var(--text-b);display:flex;align-items:center;justify-content:center;color:var(--text-b);font-family:var(--fd);font-weight:900;font-size:1.1rem;line-height:1;box-shadow:var(--sh-sm)}
.hdr-ph{color:var(--accent);font-weight:700;font-size:.92rem;text-decoration:none;display:flex;align-items:center;gap:8px}
nav{display:flex;gap:24px;align-items:center}nav a{color:var(--text-dim);text-decoration:none;font-size:.88rem;font-weight:500;transition:color .3s}nav a:hover, nav a.active{color:var(--text-b);font-weight:700}
.mob-t{display:none;background:none;border:none;color:var(--text);cursor:pointer}

/* Основные кнопки */
.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;padding:15px 32px;border-radius:60px;font-weight:600;font-size:.95rem;text-decoration:none;border:none;cursor:pointer;transition:all .3s;font-family:var(--f)}
.btn-p:hover{background:var(--accent-l);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-s{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-b);padding:15px 32px;border-radius:60px;font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;transition:all .3s;font-family:var(--f)}
.btn-s:hover{border-color:var(--accent);box-shadow:var(--sh-sm)}

/* Главный экран (Hero) */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:120px 0 80px;background:radial-gradient(circle at top right,var(--border-l),var(--bg))}
.hero-dots{position:absolute;inset:0;background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:40px 40px;opacity:.4;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent)}
.hero-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;z-index:2}
.hero h1{font-family:var(--fd);font-size:clamp(2.1rem,4.5vw,3.8rem);font-weight:800;line-height:1.15;color:var(--text-b);margin-bottom:22px;letter-spacing:-1px;animation:fadeUp .7s .1s ease both}
.hero h1 em{font-style:normal;color:var(--green)}
.hero p{font-size:1.05rem;color:var(--text-dim);max-width:550px;margin-bottom:28px;line-height:1.6;animation:fadeUp .7s .2s ease both}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border);padding:8px 16px;border-radius:50px;font-size:.8rem;font-weight:600;color:var(--text-b);margin-bottom:24px;box-shadow:var(--sh-sm);animation:fadeUp .6s ease both}
.hero-badge-dot{width:8px;height:8px;background:var(--green);border-radius:50%;animation:pulse-d 2s infinite}
.hero-act{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp .7s .3s ease both}
.hero-stats{display:flex;gap:36px;margin-top:44px;padding-top:28px;border-top:1px solid var(--border);animation:fadeUp .7s .4s ease both}
.stat h3{font-size:1.7rem;font-weight:800;color:var(--text-b);font-family:var(--fd)}.stat p{font-size:.82rem;color:var(--text-dim);margin-top:3px}
.resp-timer{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.8rem;color:var(--green);font-weight:600;animation:fadeUp .7s .5s ease both}
.resp-timer .dot{width:8px;height:8px;background:var(--green);border-radius:50%;animation:pulse-d 1.5s infinite}
.hero-img{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--border);animation:fadeUp .8s .3s ease both;box-shadow:var(--sh-lg);background:#f1f5f9;height:400px;display:flex;align-items:center;justify-content:center}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Секции и типографика */
section{padding:100px 0}
.s-label{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:2px;margin-bottom:14px}
.s-label::before{content:'';width:22px;height:2px;background:var(--accent)}
.s-title{font-family:var(--fd);font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;color:var(--text-b);margin-bottom:18px;letter-spacing:-.5px}
.s-sub{font-size:1rem;color:var(--text-dim);max-width:580px;line-height:1.6;margin-bottom:36px}

/* Карточки и Сетки */
.g-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.g-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.g-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:28px 24px;transition:all .3s;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--accent)}
.card-ic{width:52px;height:52px;border-radius:14px;background:var(--accent-bg);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--accent)}
.card h3{font-size:1.05rem;font-weight:700;color:var(--text-b);margin-bottom:6px}.card p{font-size:.88rem;color:var(--text-dim);line-height:1.55;flex-grow:1;}
.card-tag{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-l);font-size:.82rem;color:var(--green);font-weight:700;display:flex;align-items:center;gap:6px}
.brand-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.brand-tag{display:inline-block;background:var(--accent-bg);color:var(--accent-l);font-size:.72rem;font-weight:600;padding:4px 8px;border-radius:6px}
.step-n{width:40px;height:40px;border-radius:10px;background:var(--accent);color:#fff;font-weight:800;font-size:.95rem;display:flex;align-items:center;justify-content:center;margin-bottom:14px}

/* Доверие (Trust) */
.trust-wrap{background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-row{display:flex;gap:36px;flex-wrap:wrap;justify-content:center;padding:36px 0}
.trust-item{display:flex;align-items:center;gap:14px}
.trust-ic{width:44px;height:44px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--accent);box-shadow:var(--sh-sm)}
.trust-item h4{font-size:.85rem;font-weight:700;color:var(--text-b)}.trust-item p{font-size:.76rem;color:var(--text-dim)}

/* Формы и Калькулятор */
.calc-wrap,.ct-grid,.b2b-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.form-box,.calc-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:36px;box-shadow:var(--sh-md)}
.fg,.calc-row{margin-bottom:16px}.fg label,.calc-row label{display:block;font-size:.78rem;font-weight:600;color:var(--text-b);margin-bottom:7px}
.fg input,.fg select,.fg textarea,.calc-row input,.calc-row select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-x);padding:13px 16px;color:var(--text);font-family:var(--f);font-size:.92rem;transition:all .2s;appearance:none}
.fg select,.calc-row select{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1rem center;background-size:1em}
.fg input:focus,.fg select:focus,.fg textarea:focus,.calc-row input:focus,.calc-row select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg-s)}
.fg textarea{resize:vertical;min-height:80px}
.f-con{display:flex;gap:10px;align-items:flex-start;font-size:.76rem;color:var(--text-dim);margin-bottom:18px;line-height:1.5}
.f-con input[type=checkbox]{accent-color:var(--accent);margin-top:2px;width:16px;height:16px;flex-shrink:0;cursor:pointer}
.trade-banner{background:var(--accent);color:#fff;border-radius:var(--r);padding:36px;display:flex;justify-content:space-between;align-items:center;margin-top:50px;flex-wrap:wrap;gap:20px}
.trade-banner h3{font-family:var(--fd);font-size:1.6rem;margin-bottom:6px}.trade-banner p{color:#cbd5e1;max-width:480px;font-size:.92rem}
.trade-price{background:rgba(255,255,255,.1);padding:14px 22px;border-radius:12px;border:1px solid rgba(255,255,255,.2);font-size:1.15rem;font-weight:700}
.nb-perks{display:flex;flex-direction:column;gap:20px}
.nb-perk{display:flex;gap:14px;align-items:flex-start}
.nb-ic{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--accent);box-shadow:var(--sh-sm)}
.nb-perk h4{font-size:1rem;font-weight:700;color:var(--text-b);margin-bottom:3px}.nb-perk p{font-size:.86rem;color:var(--text-dim)}

/* FAQ */
.faq-list{max-width:760px}
.faq-item{border:1px solid var(--border);border-radius:var(--r-s);margin-bottom:10px;background:var(--bg-card);transition:all .2s}
.faq-item:hover{border-color:var(--text-dim)}
.faq-q{padding:18px 22px;font-weight:600;font-size:.95rem;color:var(--text-b);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;user-select:none}
.faq-arrow{color:var(--text-dim);transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:all .3s;padding:0 22px}
.faq-item.open .faq-a{max-height:300px;padding:0 22px 18px}.faq-a p{font-size:.9rem;color:var(--text-dim);line-height:1.6}

/* Карусели (Отзывы и Блог) */
.rev-badges{display:flex;gap:14px;margin-bottom:32px;flex-wrap:wrap}
.rev-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:50px;font-weight:700;font-size:.9rem;color:var(--text-b);box-shadow:var(--sh-sm)}
.rev-badge span.st{color:var(--text-dim);font-weight:500;font-size:.8rem}
.rev-stars{color:#fbbf24;font-size:1.2rem;margin-bottom:12px;letter-spacing:2px}
.rev-text{font-size:.95rem;color:var(--text);line-height:1.6;margin-bottom:20px;flex-grow:1;font-style:italic}
.rev-author{font-weight:700;color:var(--text-b);font-size:1rem}
.rev-item-tag{font-size:.8rem;color:var(--text-dim);margin-top:4px}
.blog-scroller, .rev-scroller { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; scrollbar-width: none; -ms-overflow-style: none; }
.blog-scroller::-webkit-scrollbar, .rev-scroller::-webkit-scrollbar { display: none; }
.blog-scroller .blog-c, .rev-scroller .rev-c { flex: 0 0 calc(32% - 14px); scroll-snap-align: start; }
.blog-c { padding:0; text-decoration:none; display:flex; flex-direction:column; height:100%; }
.blog-c-img { height:160px; background:var(--accent-bg); display:flex; align-items:center; justify-content:center; font-size:3rem; }
.blog-c-body { padding:24px; display:flex; flex-direction:column; flex-grow:1; }
.blog-c-tag { font-size:.75rem; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.blog-c-title { font-size:1.1rem; color:var(--text-b); font-family:var(--fd); font-weight:700; line-height:1.3; margin-bottom:10px; transition:color .3s; }
.blog-c:hover .blog-c-title { color:var(--accent); }

/* Подвал */
footer{background:var(--bg-card);border-top:1px solid var(--border);padding:36px 0}
.foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot-in a{font-size:.82rem;color:var(--text-dim);text-decoration:none}.foot-in a:hover{color:var(--text-b)}

/* ЖЕЛЕЗОБЕТОННЫЕ ПЛАВАЮЩИЕ КНОПКИ (Иконки WhatsApp и Telegram) */
.float-acts { position:fixed; bottom:24px; right:24px; z-index:90; display:flex; flex-direction:column; gap:12px; }
.fl-btn { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-md); transition:all .3s; text-decoration:none; background:var(--bg-card); border:1px solid var(--border); color:var(--accent); }
.fl-btn:hover { transform:scale(1.1); }
.fl-btn svg { width:26px; height:26px; }
.fl-wa { color: #25D366; border-color: rgba(37, 211, 102, 0.5); }
.fl-wa:hover { background: #25D366; border-color: #25D366; color: #fff !important; }
.fl-wa svg { fill: currentColor; stroke: none; }
.fl-tg { color: #2AABEE; border-color: rgba(42, 171, 238, 0.5); }
.fl-tg:hover { background: #2AABEE; border-color: #2AABEE; color: #fff !important; }
.fl-tg svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Модальные окна и уведомления */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:250;display:none;align-items:center;justify-content:center}
.modal-ov.show{display:flex}
.modal-b{background:var(--bg-card);border-radius:var(--r);padding:40px;text-align:center;max-width:400px;width:90%;box-shadow:var(--sh-lg);animation:fadeUp .4s ease}
.modal-ic{font-size:3rem;margin-bottom:14px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(70px);background:var(--accent);color:#fff;padding:12px 24px;border-radius:60px;font-weight:700;font-size:.82rem;opacity:0;transition:all .4s;z-index:300;box-shadow:var(--sh-lg)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* Статьи блога */
.art-wrap { max-width: 800px; margin: 120px auto 80px; padding: 0 24px; }
.bread { font-size: .85rem; color: var(--text-dim); margin-bottom: 24px; }
.bread a { color: inherit; text-decoration: none; transition: color .3s; }
.bread a:hover { color: var(--text-b); }
.art-tag { display: inline-block; background: var(--green-bg); color: var(--green); font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 6px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; }
.art-h1 { font-family: var(--fd); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--text-b); line-height: 1.2; margin-bottom: 24px; letter-spacing: -1px; }
.art-date { font-size: .9rem; color: var(--text-dim); display: flex; align-items: center; gap: 10px; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.art-content h2 { font-family: var(--fd); font-size: 1.8rem; color: var(--text-b); margin: 40px 0 16px; font-weight: 800; letter-spacing: -0.5px; }
.art-content h3 { font-size: 1.3rem; color: var(--text-b); margin: 24px 0 12px; }
.art-content p { font-size: 1.05rem; margin-bottom: 20px; color: var(--text); }
.art-content ul, .art-content ol { margin: 0 0 20px 24px; }
.art-content li { font-size: 1.05rem; margin-bottom: 10px; color: var(--text); }
.art-content strong { color: var(--text-b); }
.art-content .notice { background: var(--accent-bg); border-left: 4px solid var(--accent); padding: 20px; border-radius: 0 var(--r-s) var(--r-s) 0; margin: 30px 0; font-size: .95rem; }
.vs-table { width: 100%; border-collapse: collapse; margin: 30px 0; font-size: 1rem; }
.vs-table th, .vs-table td { padding: 16px; border: 1px solid var(--border); text-align: left; }
.vs-table th { background: var(--bg-card); font-weight: 700; color: var(--text-b); }
.vs-table tr:nth-child(even) { background: var(--bg); }
.vs-bad { color: #ef4444; font-weight: 600; }
.vs-good { color: var(--green); font-weight: 700; }
.cta-banner { background: linear-gradient(135deg, var(--accent), var(--accent-l)); color: #fff; padding: 40px; border-radius: var(--r); margin: 50px 0; text-align: center; box-shadow: var(--sh-md); }
.cta-banner h3 { color: #fff; font-family: var(--fd); font-size: 1.8rem; margin: 0 0 10px; }
.cta-banner p { color: #cbd5e1; font-size: 1.05rem; margin-bottom: 24px; max-width: 550px; margin-left: auto; margin-right: auto; }
.cta-banner strong, .art-content .cta-banner strong { color: #fff; }

/* --- МОБИЛЬНАЯ АДАПТАЦИЯ --- */
@media(max-width:992px){
  /* Скрываем телефон в шапке и показываем "бургер" для меню */
  .mob-t { display: block; position: relative; z-index: 110; }
  .hdr-ph { display: none; } 
  
  /* Шторка мобильного меню */
  nav {
    position: fixed; top: 0; right: -100%; width: 100%; max-width: 300px; height: 100vh;
    background: var(--bg-card); flex-direction: column; align-items: flex-start;
    padding: 90px 30px 40px; box-shadow: -5px 0 20px rgba(0,0,0,0.1); 
    transition: right 0.3s ease; z-index: 105; gap: 0; overflow-y: auto;
  }
  nav.open { right: 0; }
  nav a { font-size: 1.1rem; width: 100%; padding: 16px 0; border-bottom: 1px solid var(--border); font-weight: 600; }
  nav a:last-child { border-bottom: none; }

  /* Остальная адаптация */
  .hero-wrap,.calc-wrap,.b2b-grid,.ct-grid{grid-template-columns:1fr}
  .hero-img{display:none}
  .hero{padding-top:100px} 
  .g-4{grid-template-columns:repeat(2,1fr)}
  .blog-scroller .blog-c, .rev-scroller .rev-c { flex: 0 0 calc(50% - 10px); }
}

@media(max-width:600px){
  /* Уменьшаем лого на смартфонах */
  .logo { font-size: 1.1rem; }
  .logo-i { width: 30px; height: 30px; font-size: 0.85rem; }

  /* Остальная адаптация */
  .hero-stats{flex-direction:column;gap:14px}
  .hero-act{flex-direction:column}
  .btn-p,.btn-s{width:100%}
  section{padding:60px 0}
  .form-box,.calc-box{padding:22px}
  .trust-row{gap:20px;flex-direction:column;align-items:center}
  .float-acts{right:16px; bottom:16px;} 
  .g-4{grid-template-columns:1fr}
  .blog-scroller .blog-c, .rev-scroller .rev-c { flex: 0 0 85%; }
  .cta-banner { padding: 30px 20px; }
}
/* --- СТИЛИ ДЛЯ НОВОГО КАЛЬКУЛЯТОРА --- */
.hero-calc-slot {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  z-index: 10;
  animation: fadeUp 0.8s 0.3s ease both;
}

/* На страницах категорий прячем статичную картинку, если вставлен калькулятор */
.hero-calc-slot + .hero-img {
  display: none;
}

@media(max-width: 992px) {
  .hero-calc-slot {
    margin-top: 30px;
  }
}

/* ============================================================
   КАЛЬКУЛЯТОР: дополнительные стили для встраивания
   Добавлено для нового виджета калькулятора в hero и main секциях
   ============================================================ */

/* Слот для калькулятора в hero-секции категорийных страниц */
.hero-calc-slot {
  animation: fadeUp .8s .3s ease both;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

/* На мобильных — калькулятор центрируется и виден */
@media (max-width: 880px) {
  .hero-calc-slot {
    justify-content: center;
    margin-top: 24px;
  }
}

/* На главной — внутри .calc-wrap калькулятор должен прижиматься вправо */
.calc-wrap > .reveal:last-child {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 880px) {
  .calc-wrap > .reveal:last-child {
    justify-content: center;
  }
}