/* =================================== */
/* ТЕМА: PDF STYLE + МИНИМАЛИЗМ        */
/* =================================== */
:root{
  --blue:#1f95d1;
  --blue-2:#1779af;
  --blue-3:#125f8a;
  --cta-1:#ff9a1f;
  --cta-2:#ff6b1f;
  --text:#24303c;
  --muted:#5f6f7f;
  --bg:#f3f7fb;
  --card:#ffffff;
  --border:#d7e2ec;
  --container:1120px;
  --radius:8px;
}

/* Базовые настройки */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  padding-top:76px; /* фиксированная шапка */
}
a{text-decoration:none;color:inherit}
.container{width:min(var(--container),94%);margin:0 auto}

/* Фиксированная шапка с градиентом */
.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:999;
  background:linear-gradient(95deg,var(--blue),var(--blue-2));
  border-bottom:1px solid rgba(0,0,0,.08);
}
.topbar-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  gap:18px;
}
.brand{
  color:#fff;
  font-weight:700;
  font-size:22px;
  letter-spacing:.2px;
  white-space:nowrap;
}
.brand span{color:#dff4ff}

.nav{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:6px;
  flex:1;
}
.nav-link{
  color:#ecf7ff;
  font-size:14px;
  padding:8px 10px;
  border-radius:6px;
}
.nav-link:hover,
.nav-link.active{
  background:rgba(255,255,255,.18);
  color:#fff;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.phone-link{
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  white-space:nowrap;
}
.phone-link:hover{background:rgba(255,255,255,.2)}

/* Кнопка сообщения вместо текстовой кнопки */
.msg-btn{
  width:40px;
  height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.msg-btn svg{width:20px;height:20px;fill:var(--blue-3)}
.msg-btn:hover{transform:translateY(-1px)}

/* CTA-кнопки на странице должны выделяться */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 17px;
  border-radius:7px;
  border:0;
  color:#fff;
  font-weight:700;
  font-size:14px;
  background:linear-gradient(100deg,var(--cta-1),var(--cta-2));
  box-shadow:0 8px 16px rgba(255,107,31,.28);
}
.btn:hover{filter:brightness(1.03)}
.btn-small{
  padding:8px 12px;
  font-size:13px;
}

.text-link{color:var(--blue-3);font-weight:700}
.mini-btn{
  display:inline-block;
  margin:8px 0;
  font-size:13px;
  padding:7px 12px;
  border-radius:6px;
  background:linear-gradient(95deg,var(--blue),var(--blue-2));
  color:#fff;
}

/* Секции */
.section{padding:24px 0}
.section-light{
  background:#edf3f9;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)
}
.main h1{margin:.2em 0 .4em;font-size:34px;line-height:1.2;color:#1f2b37}
.main h2{font-size:28px;margin:.2em 0 .45em}
.main h3{font-size:22px;margin:.2em 0 .4em}
.eyebrow{color:var(--blue-3);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.4px}

/* Hero */
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:center;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
}
.hero-copy p{color:var(--muted)}

/* Графика hero-media */
.hero-media{
  min-height:290px;
  border-radius:var(--radius);
  background:#f8fbff;
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
.hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 18% 20%, rgba(31,149,209,.15) 0 20%, transparent 50%),
             radial-gradient(circle at 80% 75%, rgba(23,121,175,.12) 0 18%, transparent 52%);
}
.device{
  position:absolute;
  border:1px solid #9fb8ce;
  box-shadow:0 10px 18px rgba(0,0,0,.1);
  background:#fff;
  z-index:2;
}
.device-laptop{
  width:300px;
  height:190px;
  left:28px;
  top:46px;
  transform:rotate(-12deg);
  border-radius:8px;
}
.device-phone{
  width:122px;
  height:220px;
  left:220px;
  top:30px;
  border-radius:22px;
  transform:rotate(13deg);
}

/* Заголовок блока как в референсе */
.section-box-title{
  max-width:240px;
  margin:0 auto 16px;
  text-align:center;
  font-size:34px;
  color:#6c7681;
  border:1px solid var(--border);
  border-radius:4px;
  background:#fff;
  padding:6px 10px;
}

/* Блоки сервиса */
.service-feature{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:14px;
}
.service-content{padding:14px 16px}
.service-content p{color:var(--muted)}

.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.service-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  padding-bottom:10px;
}
.service-card h3,.service-card p,.service-card .text-link{padding:0 14px}
.service-card p{color:var(--muted)}

/* Вместо больших градиентных картинок — графические блоки */
.service-media{
  position:relative;
  height:260px;
  border-bottom:1px solid var(--border);
  background:#f7fbff;
  overflow:hidden;
}
.service-feature .service-media{height:300px}
.service-feature-wide .service-media{height:250px}
.shape{position:absolute;display:block;border-radius:12px}

.media-a .a1{left:22px;top:28px;width:52%;height:28%;background:#dff0fb;border:1px solid #c2deef}
.media-a .a2{right:30px;top:44px;width:160px;height:100px;background:#1f95d1;border-radius:14px}
.media-a .a3{left:80px;bottom:34px;width:180px;height:120px;background:#fff;border:1px solid #c8dcea;box-shadow:0 8px 16px rgba(0,0,0,.08)}
.media-a .a4{right:58px;bottom:20px;width:86px;height:150px;background:#fff;border:1px solid #b9d4e7;border-radius:20px;box-shadow:0 8px 16px rgba(0,0,0,.08)}

.media-b .b1{left:16px;top:20px;width:130px;height:130px;background:#fff;border:1px solid #b9d4e7;box-shadow:0 6px 12px rgba(0,0,0,.08)}
.media-b .b2{left:160px;top:34px;width:46%;height:30%;background:#daf0fb;border:1px solid #c2deef}
.media-b .b3{left:66px;bottom:26px;width:56%;height:38%;background:#1f95d1}
.media-b .b4{right:16px;bottom:16px;width:78px;height:78px;background:#fff;border:1px solid #b9d4e7}

.media-c .c1{left:28px;top:30px;width:44%;height:62%;background:#fff;border:1px solid #bed8ea;box-shadow:0 8px 14px rgba(0,0,0,.08)}
.media-c .c2{right:28px;top:24px;width:40%;height:34%;background:#dff0fb;border:1px solid #c2deef}
.media-c .c3{right:36px;bottom:34px;width:110px;height:140px;background:#fff;border:1px solid #b9d4e7;border-radius:18px;box-shadow:0 8px 14px rgba(0,0,0,.08)}
.media-c .c4{left:46%;bottom:20px;width:22%;height:22%;background:#1f95d1}

.media-d .d1{left:20px;top:26px;width:38%;height:42%;background:#dff0fb;border:1px solid #c2deef}
.media-d .d2{left:42%;top:18px;width:48%;height:58%;background:#fff;border:1px solid #b9d4e7;box-shadow:0 8px 14px rgba(0,0,0,.08)}
.media-d .d3{left:28px;bottom:24px;width:28%;height:30%;background:#1f95d1}
.media-d .d4{right:34px;bottom:20px;width:96px;height:96px;background:#fff;border:1px solid #b9d4e7}

/* Дополнительные графические блоки по мотивам hero-media */
.section-graphics{padding-top:10px}
.graphics-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.graphic-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
}
.graphic-item h3{font-size:18px;margin:10px 0 8px}
.graphic-item p{margin:0;color:var(--muted);font-size:14px}
.media-mini{min-height:165px}
.media-mini .device-laptop{width:170px;height:102px;left:14px;top:34px;transform:rotate(-10deg)}
.media-mini .device-phone{width:72px;height:128px;left:126px;top:20px;transform:rotate(12deg)}
.media-mini.alt-1::before{
  background:radial-gradient(circle at 70% 20%, rgba(31,149,209,.18) 0 20%, transparent 52%),
             radial-gradient(circle at 24% 78%, rgba(23,121,175,.12) 0 18%, transparent 48%);
}
.media-mini.alt-2::before{
  background:radial-gradient(circle at 20% 30%, rgba(31,149,209,.17) 0 18%, transparent 50%),
             radial-gradient(circle at 82% 82%, rgba(18,95,138,.14) 0 16%, transparent 46%);
}

/* Каталог офферов */
.catalog-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.offer-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
}
.offer-card p{color:var(--muted);font-size:14px}
.offer-card ul{margin:8px 0 0;padding-left:18px;color:#386089;font-size:13px}
.offer-card li{margin:3px 0}

/* Внутренние страницы */
.inner-hero .container{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.inner-hero p{color:var(--muted)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.info-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.tick-list{margin:0;padding-left:18px}
.tick-list li{margin:7px 0;color:#4b5a68}

.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:12px}
.faq-item p{margin:0;color:var(--muted)}

.contact-banner{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.contact-banner p{color:var(--muted)}

.contact-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.contact-form,.contact-info{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.contact-form label{display:block;margin:9px 0 6px;font-weight:700;font-size:14px}
.contact-form input,.contact-form textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px;
  font:inherit;
}
.contact-form button{margin-top:12px}
.contact-info p{margin:10px 0;color:var(--muted)}

.footer{margin-top:20px;background:#fff;border-top:1px solid var(--border)}
.footer-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.footer-inner p{color:#79828c;font-size:14px}
.footer-links{display:flex;gap:12px;font-size:14px;color:#4f6578}

/* Мобильное меню */
.menu-btn{
  display:none;
  border:1px solid rgba(255,255,255,.45);
  width:40px;
  height:40px;
  border-radius:8px;
  background:transparent;
}
.menu-btn span{display:block;width:20px;height:2px;background:#fff;margin:4px auto}

@media (max-width:1060px){
  .nav-link{padding:7px 8px;font-size:13px}
  .phone-link{font-size:13px;padding:7px 8px}
}

@media (max-width:980px){
  body{padding-top:70px}
  .topbar-inner{min-height:70px}
  .hero-grid,.service-grid,.catalog-grid,.two-col,.faq-list,.contact-layout,.graphics-grid{grid-template-columns:1fr}
  .contact-banner{flex-direction:column;align-items:flex-start}

  .nav{
    display:none;
    position:absolute;
    left:3%;
    right:3%;
    top:70px;
    background:linear-gradient(180deg,var(--blue-2),var(--blue-3));
    border:1px solid rgba(255,255,255,.2);
    border-radius:8px;
    padding:8px;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    margin-left:0;
  }
  .nav.open{display:flex}
  .menu-btn{display:inline-block}
  .phone-link{font-size:12px;padding:7px 8px}
}

@media (max-width:640px){
  .main h1{font-size:28px}
  .main h2{font-size:24px}
  .section-box-title{font-size:28px}
  .brand{font-size:18px}
  .phone-link{max-width:120px;overflow:hidden;text-overflow:ellipsis}
}