/* ==== HERO(промо) + КАЛЬКУЛЯТОР И 4 СКИДКИ — СТИЛИ ==== */

:root {
    --blue: #046088;
    --blue-dark: #0d2f5e;
    --blue-light: #e8f3fb;
    --orange: #e87722;
    --border: #dde4ea;
    --text: #222;
    --text-light: #888;
    --text-mid: #555;
}
.hero-section {
  background: var(--blue-dark);
  padding: 48px 0 40px;
  position: relative;
  overflow: hidden;
}

.hero-section .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 490px;
  gap: 24px;
  align-items: center;
}

/* Заголовок */
#hero-title {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}

/* Подзаголовок */
#hero-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 28px;
  line-height: 1.55;
  max-width: 460px;
}

/* Шаги */
.hero-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.hero-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.hero-step-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.hero-step-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.4;
  padding-top: 3px;
}

.hero-step-text strong {
  color: #fff;
}

/* Кнопка + телефон */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.hero-btn-calc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--orange);
  color: #fff;
  padding: 15px 28px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 4px 16px rgba(232, 119, 34, 0.35);
  transition: background 0.18s;
  text-decoration: none;
}

.hero-btn-calc:hover {
  background: #c96510;
}

.hero-phone-block {
  display: inline-flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 7px 14px;
}

.hero-phone-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.hero-phone {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
}

/* Цифры-якоря */
.hero-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-stat {
  flex: 1;
  padding: 18px 0;
  text-align: center;
}

.hero-stat:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-stat-value {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.hero-stat-value sup {
  font-size: 13px;
}

.hero-stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 3px;
}

/* Видео-блок */
.hero-video {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
  align-self: stretch;
  display: flex;
  background: #000;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-video-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(13, 47, 94, 0.85));
  padding: 16px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

/* Адаптив */
@media (max-width: 960px) {
  .hero-wrap {
    display: block;
  }
  .hero-video {
    margin-top: 24px;
  }
}

@media (max-width: 680px) {
  .hero-section {
    padding: 32px 0 28px;
  }
  #hero-title {
    font-size: 26px;
  }
  #hero-sub {
    font-size: 14px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-btn-calc {
    justify-content: center;
  }
  .hero-phone-block {
    align-items: center;
  }
  .hero-stats {
    flex-wrap: wrap;
  }
  .hero-stat {
    flex: 1 1 33%;
    padding: 14px 0;
  }
  .hero-stat:not(:last-child) {
    border-right: none;
  }
  .hero-stat-value {
    font-size: 20px;
  }
}




.oc-sec{padding:2.5rem 0}
.oc-sec .wrap{max-width:1200px;margin:0 auto;padding:0 15px}
.oc-h2{font-size:1.75rem;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:.4rem}
.oc-h2-sub{color:#9a938c;font-size:.95rem;margin-bottom:1.5rem}
.oc-wrap{display:grid;grid-template-columns:1fr 340px;gap:1rem;align-items:start}
.oc-card{background:#fff;border:1px solid #e8e8e8;padding:1.5rem}
.oc-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:1.25rem}
.oc-tab{padding:.6rem 1rem;background:#f2eeeb;border:none;font-size:.8rem;font-weight:700;color:#9a938c;cursor:pointer;font-family:inherit;text-transform:uppercase;letter-spacing:.02em}
.oc-tab.on{background:#f4ad3a;color:#050505;box-shadow:inset 0 -2px 0 #c78317}
.oc-body{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.oc-f{display:flex;flex-direction:column;gap:.8rem}
.oc-lbl{display:block;font-size:.68rem;font-weight:700;color:#9a938c;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem}
.oc-lbl i{color:#d33;font-style:normal}
.oc-in,.oc-se{width:100%;padding:.6rem .75rem;border:1px solid #e8e8e8;font-size:.9rem;outline:none;font-family:inherit;background:#fff}
.oc-in:focus,.oc-se:focus{border-color:#f4ad3a}
.oc-se{appearance:none;-webkit-appearance:none;padding-right:2rem;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a938c' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right .7rem center}
.oc-seg{display:flex;gap:5px;flex-wrap:wrap}
.oc-sgb{padding:.5rem .8rem;background:#f2eeeb;border:none;font-size:.75rem;font-weight:700;color:#9a938c;cursor:pointer;font-family:inherit}
.oc-sgb.on{background:#f4ad3a;color:#050505;box-shadow:inset 0 -2px 0 #c78317}
.oc-sgb small{font-size:.62rem;opacity:.7}
.oc-ck{display:flex;align-items:flex-start;gap:.55rem;cursor:pointer}
.oc-ck input{display:none}
.oc-ckb{width:18px;height:18px;border:2px solid #e8e8e8;background:#fff;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;border-radius:3px;font-size:14px;font-weight:700;color:#fff;transition:all 0.2s}
.oc-ck input:checked~.oc-ckb{background:#f4ad3a;border-color:#f4ad3a;color:#fff}
.oc-ck input:not(:checked)~.oc-ckb{color:transparent} /* Скрываем символ у неактивных */
.oc-ckt{font-size:.8rem;color:#9a938c;line-height:1.4}
.oc-ckt b{color:#050505;display:block;font-weight:700}
.oc-ckt em{font-style:normal;font-size:.68rem;color:#d18e21}
.oc-note{font-size:.66rem;color:#9a938c;line-height:1.45}
.oc-mid{background:#f9f9f9;padding:1.1rem;display:flex;flex-direction:column}
.oc-mph{background:#fff;border:1px solid #e8e8e8;padding:.7rem;display:flex;align-items:center;justify-content:center;min-height:150px}
.oc-mph img{max-height:130px;width:auto;object-fit:contain}
.oc-dv{border:none;border-top:1px solid #e8e8e8;margin:.85rem 0}
.oc-sl{font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.65rem}
.oc-kr{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;margin-bottom:.5rem;gap:.6rem}
.oc-kr span{color:#9a938c}
.oc-kr b{font-weight:900;white-space:nowrap}
.oc-inc{list-style:none;padding:0;margin:0}
.oc-inc li{font-size:.75rem;color:#9a938c;display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.4rem;line-height:1.4}
.oc-inc li::before{content:'';width:13px;height:13px;flex-shrink:0;margin-top:2px;background:#f4ad3a;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='black' stroke-width='3.5' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='black' stroke-width='3.5' fill='none'/%3E%3C/svg%3E") center/contain no-repeat}
.oc-benefit{background:#fff;border:2px solid #f4ad3a;padding:1.4rem;position:sticky;top:14px}
.oc-bh{display:flex;align-items:center;gap:.55rem;font-size:1.05rem;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:1rem}
.oc-bh svg{color:#f4ad3a;flex-shrink:0}
.oc-be{color:#9a938c;font-size:.8rem;text-align:center;padding:1.5rem 0;line-height:1.5}
.oc-bl{font-size:.66rem;font-weight:700;color:#9a938c;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem}
.oc-bp{font-size:2.1rem;font-weight:900;line-height:1;color:#050505}
.oc-bp span{font-size:1.05rem}
.oc-bo{font-size:.85rem;color:#9a938c;margin-top:.35rem}
.oc-bs{display:inline-block;background:#e9f5ea;color:#2e7d32;padding:.3rem .75rem;font-size:.8rem;font-weight:900;margin-top:.55rem}
.oc-bi{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.55rem}
.oc-bi svg{color:#2e7d32;flex-shrink:0;margin-top:2px}
.oc-bit{font-size:.78rem;color:#9a938c;line-height:1.4}
.oc-bit b{color:#050505;font-weight:700}
.oc-biv{margin-left:auto;font-size:.75rem;font-weight:900;color:#2e7d32;white-space:nowrap;padding-left:.5rem}
.oc-bmk{margin-top:.8rem;background:#f9f9f9;padding:.65rem .75rem;font-size:.72rem;color:#9a938c;line-height:1.45}
.oc-cns{display:flex;align-items:flex-start;gap:.5rem;margin-top:.55rem;cursor:pointer}
.oc-cns input{margin-top:2px;accent-color:#f4ad3a;flex-shrink:0}
.oc-cns span{font-size:.66rem;color:#9a938c;line-height:1.4}
.oc-cns a{color:#d18e21;text-decoration:underline}
.oc-bok{display:none;background:#e9f5ea;color:#2e7d32;padding:.6rem .75rem;font-size:.8rem;font-weight:700;margin-top:.55rem}
.oc-bfn{font-size:.68rem;color:#9a938c;text-align:center;margin-top:.55rem;line-height:1.45}
.oc-btn{display:block;width:100%;background:#f4ad3a;color:#050505;text-transform:uppercase;height:2.75rem;line-height:2.75rem;text-align:center;font-size:.85rem;font-weight:700;letter-spacing:.02em;box-shadow:inset 0 -2px 0 #c78317;border:none;cursor:pointer;font-family:inherit;margin-top:.75rem}
.oc-btn:hover{background:#f7c455}
.oc-btn:disabled{opacity:.45;cursor:default}
.oc-sales{background:#050505;color:#fff}
.oc-sales .oc-h2{color:#fff}
.oc-sales-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#2a2a2a;border:1px solid #2a2a2a;margin-bottom:1.25rem}
.oc-sale{background:#050505;padding:1.4rem 1.2rem}
.oc-sale-n{width:34px;height:34px;background:#f4ad3a;color:#050505;font-size:.95rem;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -2px 0 #c78317;margin-bottom:.85rem}
.oc-sale b{display:block;font-size:.95rem;font-weight:900;color:#fff;margin-bottom:.35rem;line-height:1.25}
.oc-sale p{font-size:.8rem;color:rgba(255,255,255,.62);line-height:1.45;margin:0}
.oc-sales-phones{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.oc-sales-phones a{display:flex;flex-direction:column;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:.5rem 1rem;color:#fff;text-decoration:none;transition:background 0.3s}
.oc-sales-phones a:hover{background:rgba(255,255,255,.15)}
.oc-sales-phones .c{font-size:.6rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.oc-sales-phones .n{font-size:1rem;font-weight:700;white-space:nowrap}
.oc-sales-note{font-size:.8rem;color:rgba(255,255,255,.55)}
@media(max-width:1000px){
  .oc-wrap{grid-template-columns:1fr}
  .oc-benefit{position:static}
  .oc-sales-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .oc-body{grid-template-columns:1fr}
  .oc-sales-grid{grid-template-columns:1fr}
  .oc-h2{font-size:1.4rem}
}