/* ===== Fix pack: lock layout, prevent horizontal scroll, tighten container, mobile tweaks ===== */
*{box-sizing:border-box; min-width:0}
html,body{width:100%;overflow-x:hidden;height:auto}
img,svg,canvas,video{max-width:100%; height:auto; display:block}
a{
 text-decoration: none;
 color: #e8ebff;
}

:root{
  --bg:#0f1220;
  --bg-tint:#161a2b;
  --card:#1b2140;
  --text:#e8ebff;
  --muted:#aab0d1;
  --accent:#4169E1;
  --accent-2:#7aa2ff;
  --ok:#27ae60;
  --danger:#ff6b6b;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #0b0e1a 0%, var(--bg) 60%, #0b0e1a 100%);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{width:100%; max-width:1120px; padding-inline: 16px; margin-inline:auto}

.section{position:relative}
.section--tint{background:var(--bg-tint)}
.section--pad-lg{padding:48px 0}
.section--pad-xl{padding:96px 0}
@media (max-width:600px){
  .section--pad-lg{padding:28px 0}
  .section--pad-xl{padding:44px 0}
}

.section__title{
  font-size: clamp(24px, 2rem, 36px);
  line-height:1.2;
  margin:0 0 24px;
}
.lead{font-size: clamp(16px, 1rem, 20px); color:var(--text); opacity:.95}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.accent{color:var(--accent)}

/* =============== Header =============== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(15,18,32,.6);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
  width:100%;
}
.header-inner{display:flex; align-items:center; gap:24px; padding:14px 16px;}
.logo{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.2px}
.logo-dot{fill:var(--accent)}
.main-nav{margin-left:auto; display:flex; align-items:center; gap:16px}
.main-nav ul{display:flex; list-style:none; gap:10px; margin:0; padding:0}
.main-nav a{color:var(--text); text-decoration:none; padding:10px 14px; border-radius:10px; opacity:.85}
.main-nav a:is(:hover,.is-active){background:rgba(255,255,255,.06); opacity:1}
.header-cta{background:var(--accent); color:#fff; text-decoration:none; padding:10px 14px; border-radius:12px; font-weight:600; display:none;}

.burger{display:none; width:44px; height:44px; border:none; background:transparent; position:relative}
.burger span{position:absolute; left:10px; right:10px; height:2px; background:#fff; transition:.25s}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:28px}

/* =============== Hero =============== */
.hero{isolation:isolate; overflow:hidden}
.hero__grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; align-items: center}
.hero__text h1{font-size: clamp(28px, 2.5rem, 48px); margin:0 0 12px; line-height: 120%;}
.hero__badges{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 22px}
.hero__badges span{
  background:rgba(255,255,255,.06);
  padding:8px 12px; border-radius:999px; font-weight:500;
  border:1px solid rgba(255,255,255,.08);
}
.hero__actions{display:flex; gap:12px; margin-top:8px}
.hero__art{display:grid; gap:16px; min-width:0}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.stats__kpi{font-size:24px; margin:0 0 6px}
.route h3{margin:0 0 10px; font-size:18px}
.route__list{list-style:none; margin:0; padding:0}
.route__list li{display:flex; justify-content:space-between; border-bottom:1px dashed rgba(255,255,255,.08); padding:8px 0; overflow-wrap:anywhere}
.hero__blur {
  position: absolute;
  inset: -10% 0 auto 0;   /* убираем -20%, чтобы не вылазило */
  width: 100%;            /* искусственно расширяем внутри */
  left: -20%;             /* центрируем */
  height: 100%;
  pointer-events: none;
  background: radial-gradient(circle at 20% 40%, rgba(122,162,255,.22), rgba(65,105,225,.06) 40%, transparent 60%);
  filter: blur(10px);
  z-index: -1;
  overflow: hidden;
}


/* =============== Grids =============== */
.grid{display:grid; gap:18px}
.grid--3{grid-template-columns: repeat(3, 1fr)}
.grid--2{grid-template-columns: repeat(2, 1fr)}

/* Benefit icons */
.card--benefit{padding:20px 18px 18px 18px}
.icon{width:42px; height:42px; margin-bottom:10px; border-radius:10px; display:inline-block; background:linear-gradient(135deg, var(--accent), var(--accent-2))}
.i-shield{mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2l7 4v6c0 5-3.4 9.4-7 10-3.6-.6-7-5-7-10V6l7-4z"/></svg>') center/70% no-repeat}
.i-clock{mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 1a11 11 0 100 22 11 11 0 000-22zm1 6h-2v6l5 3 1-1-4-2V7z"/></svg>') center/70% no-repeat}
.i-calc{mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm2 4v4h6V6H9zm0 6v6h6v-6H9z"/></svg>') center/70% no-repeat}

/* =============== Buttons & Links =============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 16px; border-radius:12px; text-decoration:none;
  font-weight:600; border:1px solid transparent; cursor:pointer;
}
.btn--primary{background:var(--accent); color:#fff; margin-top: 10px;}
.btn--ghost{background:transparent; color:var(--text); border-color:rgba(255,255,255,.14)}

/* =============== Calculator =============== */
#calc{display:none; flex-direction:column; gap:18px}
.calc__row{display:grid; grid-template-columns: repeat(5, 1fr); gap:12px}
.field{display:flex; flex-direction:column; gap:6px}
.field input, .field select, .field textarea{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  padding:12px 12px; border-radius:12px; color:var(--text); outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent)}
.calc__actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.calc__note{opacity:.8}
.calc__result{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.price{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap}
.price__num{font-size:28px; font-weight:700}

/* =============== Checklists & Steps =============== */
.checklist{margin:0; padding:0; list-style:none}
.checklist li{padding-left:28px; position:relative; margin:10px 0}
.checklist li::before{
  content:""; position:absolute; left:0; top:.35em; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg, var(--ok), #84e1a7);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.3 5.3l-11 11-5-5L5.7 9l3.6 3.6L18.9 3.9z"/></svg>') center/70% no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.3 5.3l-11 11-5-5L5.7 9l3.6 3.6L18.9 3.9z"/></svg>') center/70% no-repeat;
}

.steps{counter-reset:s}
.steps li{list-style:none; position:relative; padding:12px 0 12px 54px; border-bottom:1px dashed rgba(255,255,255,.08)}
.steps li span{
  position:absolute; left:0; top:8px; width:36px; height:36px; border-radius:12px;
  display:inline-grid; place-items:center; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
}

/* =============== Tags =============== */
.tags{display:flex; flex-wrap:wrap; gap:10px}
.tags span{border:1px solid rgba(255,255,255,.14); padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.04)}

/* =============== Accordion =============== */
.accordion details{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 16px; margin-bottom:10px}
.accordion summary{cursor:pointer; font-weight:600}
.accordion p{margin:10px 0 0}

/* =============== CTA =============== */
.cta{background:radial-gradient( circle at 10% 10%, rgba(122,162,255,.18), rgba(65,105,225,.06) 40%, transparent 65% )}

/* =============== Footer =============== */
.site-footer{background:#0b0f1c; border-top:1px solid rgba(255,255,255,.06); margin-top:32px}
.footer-grid{display:grid; grid-template-columns: 1fr; gap:18px; padding:16px;}
.footer-logo{gap:8px; display:flex; align-items:center}
.footer-nav ul{list-style:none; margin:8px 0 0; padding:0}
.footer-nav a{color:var(--text); text-decoration:none; opacity:.9}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:16px; border-top:1px solid rgba(255,255,255,.06)}

/* =============== Responsive =============== */
@media (max-width: 980px){
  .grid--3{grid-template-columns: 1fr 1fr}
  .calc__row{grid-template-columns: 1fr 1fr}
  .hero__grid{grid-template-columns: 1fr}
  .main-nav ul{position:fixed; inset:64px 16px auto 16px; background:rgba(15,18,32,.98); padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,.08); display:none; flex-direction:column; max-width: calc(100% - 32px)}
  .burger{display:block}
}

@media (max-width: 600px){
  .grid--2, .grid--3{grid-template-columns: 1fr}
}