html{
  font-size:16px !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}

 body{margin:0; min-width: 390px; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); background:var(--bg)}

/* Обычный текст */
p, li, dd, dt, blockquote, figcaption, address, label, input, textarea, select, button{
  font-size:1rem !important;
  line-height:1.6 !important;
}

/* Заголовки */
h1{
  font-size:2rem !important;
  line-height:1.2 !important;
  margin:0 0 12px !important;
}

h2{
  font-size:1.625rem !important;
  line-height:1.25 !important;
  margin:0 0 10px !important;
}

h3{
  font-size:1.25rem !important;
  line-height:1.3 !important;
  margin:0 0 8px !important;
}

h4{
  font-size:1.125rem !important;
  line-height:1.35 !important;
  margin:0 0 6px !important;
}

/* Ссылки */
a{
  line-height:inherit !important;
}

/* Контентные контейнеры */
.container, main, article, section, header, footer, .content, .page, .page-content{
  font-size:inherit !important;
  line-height:inherit !important;
}

 :root{
    --hp-bg:#F8FAFC;
    --hp-card:#FFFFFF;
    --hp-text:#0F172A;
    --hp-muted:#64748B;
    --hp-blue:#1E3A8A;
    --hp-orange:#F97316;
    --hp-line:rgba(15,23,42,.10);
    --hp-shadow:0 16px 34px rgba(2,6,23,.10);
    --hp-radius:16px;
    --hp-container:1180px;
  }

  /* гарантирует отсутствие горизонтального скролла от шапки */
  .hp-header, .hp-panel{ overflow-x: clip; }
body.hp-lock{
  overflow:hidden !important;
  touch-action:none;
}
  .hp-container{max-width:var(--hp-container); margin:0 auto; padding:0 16px;}
  .hp-header{
    position:sticky; top:0; z-index:80;
    background:rgba(255,255,255,.86);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid rgba(15,23,42,.08);
    transition:.18s box-shadow,.18s background;
  }
  .hp-header[data-scrolled="1"]{
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 28px rgba(2,6,23,.10);
  }

  .hp-row{
    height:74px;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    min-width:0;
  }
	/* ===== Mobile overlay menu under sticky header ===== */

/* по умолчанию скрыто */
.hp-panel{
  display:none;
}

/* открыто: превращаем в оверлей под шапкой */
.hp-header[data-open="1"] + .hp-panel{
  display:block;
  position:fixed;
  left:0;
  right:0;
  top:var(--hp-header-h, 74px);      /* высота шапки зададим JS */
  bottom:0;
  z-index:79;                       /* ниже шапки (у шапки z-index:80) */
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid rgba(15,23,42,.08);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* чтобы контент панели не прилипал к краям */
.hp-panel .hp-container{
  padding-top:12px;
  padding-bottom:18px;
}

/* на десктопе панель не нужна */
@media (min-width:981px){
  .hp-panel{ display:none !important; }
}

  /* Brand */
  .hp-brand{
    display:flex; align-items:center; gap:10px;
    text-decoration:none; color:inherit;
    min-width:0;
    flex:0 1 auto;
  }
  .hp-logo{
    width:42px; height:42px; border-radius:14px;
    background:#185ea4 url("https://gruzoperevozka55.ru/logo.svg") no-repeat center center;
    background-size:26px 26px;
    box-shadow:0 14px 24px rgba(30,58,138,.22);
    flex:0 0 auto;
  }
  .hp-title{display:flex; flex-direction:column; line-height:1.1; min-width:0;}
  .hp-title b{
    font-size:18px; font-weight:950; letter-spacing:.2px; color:var(--hp-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .hp-title span{
    font-size:13px; font-weight:850; color:var(--hp-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* Nav (desktop only) */
  .hp-nav{
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    min-width:0;
    flex:1 1 auto;
    justify-content:center;
  }
  .hp-nav a{
    display:inline-flex; align-items:center; justify-content:center;
    padding:0 12px;
    border-radius:12px;
    font-size:14px; font-weight:900;
    color:var(--hp-muted);
    text-decoration:none;
    transition:.15s background,.15s box-shadow,.15s color;
    white-space:nowrap;
  }
  .hp-nav a:hover{background:#fff; color:var(--hp-blue); box-shadow:0 10px 20px rgba(2,6,23,.06);}

  /* Right */
  .hp-right{
    display:flex; align-items:center; gap:10px;
    min-width:0;
    flex:0 0 auto;
  }

  .hp-trust{
    display:flex; gap:8px; align-items:center;
    padding:8px 10px;
    border-radius:14px;
    border:1px solid var(--hp-line);
    background:#fff;
    white-space:nowrap;
  }
  .hp-pill{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; font-weight:900;
    color:var(--hp-text);
  }
  .hp-dot{
    width:8px; height:8px; border-radius:50%;
    background:#10b981;
    box-shadow:0 0 0 0 rgba(16,185,129,.45);
    animation:hpPulse 1.8s infinite;
    flex:0 0 auto;
  }
  @keyframes hpPulse{
    0%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}
    70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}
    100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
  }

  .hp-phone{
    display:flex; flex-direction:column;
    padding:8px 10px;
    border-radius:14px;
    border:1px solid var(--hp-line);
    background:#fff;
    line-height:1.1;
  }
  .hp-phone a{
    text-decoration:none;
    color:var(--hp-blue);
    font-weight:950;
    font-size:16px;
    white-space:nowrap;
  }
  .hp-mini a{
    font-size:11px;
    color:#69788e;
    text-decoration:none;
    border-bottom:1px dashed #cbd5e1;
    white-space:nowrap;
    display:inline-block;
    margin-top:3px;
  }
  .hp-mini a:hover{color:#475569; border-bottom-color:#94a3b8;}

  /* Buttons */
  .hp-btn{
    display:inline-flex; align-items:center; justify-content:center;
    height:50px;
    padding:0 16px;
    border-radius:14px;
    border:1px solid transparent;
    font-weight:950;
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
    text-decoration:none;
    transition:.2s transform,.2s box-shadow,.15s opacity;
  }
  .hp-btn:active{transform:translateY(1px);}
  .hp-btn--primary{
    background:linear-gradient(135deg,#f97316,#fb923c);
    color:#fff;
    box-shadow:0 16px 38px rgba(249,115,22,.38);
  }
  .hp-btn--primary:hover{
    transform:translateY(-2px);
    box-shadow:0 22px 52px rgba(249,115,22,.48);
    opacity:1;
  }
  .hp-btn--ghost{
    background:rgba(30,58,138,.08);
    border:1px solid rgba(30,58,138,.12);
    color:var(--hp-blue);
    box-shadow:none;
  }
  .hp-btn--ghost:hover{box-shadow:0 12px 26px rgba(2,6,23,.10); transform:translateY(-1px);}

  /* Burger (mobile) */
  .hp-burger{
    display:none;
    height:46px;
    padding:0 10px;
    border-radius:12px;
    border:1px solid var(--hp-line);
    background:#fff;
    align-items:center;
    gap:10px;
    font-weight:950;
    cursor:pointer;
    flex:0 0 auto;
  }
  .hp-burger svg{width:18px; height:18px}

  /* Panel (mobile menu) */
  .hp-panel{
    display:none;
    background:rgba(255,255,255,.95);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid rgba(15,23,42,.08);
  }
  .hp-panel-inner{
    padding:12px 0 16px;
    display:grid;
    gap:10px;
  }
  .hp-card{
    background:#fff;
    border:1px solid var(--hp-line);
    border-radius:18px;
    padding:12px;
    box-shadow:0 10px 22px rgba(2,6,23,.06);
  }
  .hp-panel-top{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-bottom:8px;
  }
  .hp-small{font-size:12px; font-weight:850; color:var(--hp-muted);}

  .hp-panel-actions{display:flex; gap:10px;}
  .hp-panel-actions .hp-btn{flex:1;}

  .hp-panel-nav{display:grid; gap:6px;}
  .hp-panel-nav a{
    padding:12px 12px;
    border:1px solid var(--hp-line);
    border-radius:14px;
    background:#fff;
    font-weight:950;
    color:var(--hp-text);
    text-decoration:none;
  }

  /* ===== Responsive: главный секрет — на мобилке убираем тяжёлые блоки ===== */
  @media (max-width:1100px){
    .hp-trust{display:none;} /* освобождаем ширину */
  }
  @media (max-width:980px){
    .hp-nav{display:none;}
   
  
    .hp-burger{display:inline-flex;}
  }
  @media (max-width:620px){
    .hp-title{display:none;}
    .hp-row{height:66px;}
    .hp-btn{height:44px; padding:0 12px;}
    .hp-burger{height:44px;}
  }
  @media (max-width:420px){
    .hp-container{padding:0 10px;}
    .hp-burger span{display:none;}
  }

  .hp-header[data-open="1"] + .hp-panel{display:block;}
/* ===== Desktop dropdown menu button ===== */
.hp-nav{ display:none; } /* старое горизонтальное меню выключаем */

.hp-menu{
  position:relative;
  display:inline-flex;
}

.hp-menuBtn{
  display:inline-flex; align-items:center; justify-content:center;
  height:50px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--hp-line);
  background:#fff;
  font-weight:950;
  color:var(--hp-text);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  transition:.15s box-shadow,.15s transform;
}
.hp-menuBtn:hover{ box-shadow:0 12px 26px rgba(2,6,23,.10); transform:translateY(-1px); }
.hp-menuBtn:active{ transform:translateY(0); }

.hp-menuBtn svg{ width:16px; height:16px; }


.hp-header[data-dd-open="1"] 

	.hp-dropdown{
  position:absolute;
  top:calc(100% + 10px);

  width:720px;            /* оптимальная ширина */
  max-width:calc(100vw - 32px);

  background:#fff;
  border:1px solid var(--hp-line);
  
  box-shadow:0 20px 46px rgba(2,6,23,.16);
  padding:6px;

  display:none;
  z-index:95;
}

/* чтобы не уезжало если кнопка близко к правому краю */
.hp-menu{
  position:relative;
}

/* центрирование если мало места справа */
@media (max-width:1200px){
  .hp-dropdown{
    width:640px;
  }
}

@media (max-width:1024px){
  .hp-dropdown{
    width:560px;
  }
}

.hp-ddItem {
    display: flex
;
    /* align-items: center; */
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 14px;
    /* font-weight: 950; */
    /* color: var(--hp-text); */
    text-decoration: none;
    border: 1px solid transparent;
}
.hp-ddItem:hover{
  background:rgba(30,58,138,.06);
  border-color:rgba(30,58,138,.12);
}

.hp-ddHint{
  font-size:12px;
  font-weight:850;
  color:var(--hp-muted);
  padding:10px 12px 6px;
}

/* Desktop only: показываем кнопку-меню, а бургер скрываем */
@media (min-width:981px){
  .hp-menu{ display:inline-flex; }
  .hp-burger{ display:none !important; }
}

/* Mobile: оставляем как есть (бургер + панель), кнопку-меню прячем */
@media (max-width:980px){
  .hp-menu{ display:none !important; }
}
/* ===== Desktop dropdown (grid) ===== */
.hp-nav{ display:none; } /* старую горизонтальную навигацию выключаем */

.hp-menu{ position:relative; display:inline-flex; }
.hp-menuBtn{
  display:inline-flex; align-items:center; justify-content:center;
  height:50px; padding:0 14px;
 
  border:1px solid var(--hp-line);
  background:#fff;
  font-weight:950;
  color:var(--hp-text);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  transition:.15s box-shadow,.15s transform;
}
.hp-menuBtn:hover{ box-shadow:0 12px 26px rgba(2,6,23,.10); transform:translateY(-1px); }
.hp-menuBtn:active{ transform:translateY(0); }

.hp-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:min(920px, calc(100vw - 32px));
  background:#fff;
  border:1px solid var(--hp-line);
  box-shadow:0 20px 46px rgba(2,6,23,.16);
  padding:14px;
  display:none;
  z-index:95;
}

.hp-header[data-dd-open="1"] .hp-dropdown{ display:block; }

.hp-ddGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.hp-ddCol{
  padding:10px;
  
}
.hp-ddTitle{
  font-size:12px;
  font-weight:950;
  color:var(--hp-muted);
  padding:6px 8px 10px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.hp-ddItem:hover{
  background:#fff;
  border-color:rgba(30,58,138,.12);
  box-shadow:0 10px 18px rgba(2,6,23,.06);
}

@media (max-width:1100px){
  .hp-ddGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width:980px){
  .hp-menu{ display:none !important; } 
}

/* hero */
.heroLead{
  font-size:15.5px !important;
  line-height:1.6 !important;
}

.heroTitle{
  line-height:1.05 !important;
}

/* карточки */
.card h3{
  font-size:15px !important;
  line-height:1.35 !important;
}

.card p{
  font-size:13.5px !important;
  line-height:1.55 !important;
}

.badge{
  font-size:13.5px !important;
  line-height:1.2 !important;
}

.li span{
  font-size:13.5px !important;
  line-height:1.4 !important;
}

.sectionTitle{
  font-size:22px !important;
  line-height:1.25 !important;
}

/* футер */
.contacts{
  font-size:14px !important;
  line-height:1.5 !important;
}

.copy{
  font-size:12.5px !important;
  line-height:1.4 !important;
}

/* ===== TOKENS ===== */

 :root{
    --bg: #F8FAFC;
    --card: #FFFFFF;
    --text: #1F2937;
    --muted: #64748B;
    --blue: #1E3A8A;     /* основной */
    --blue2:#3B82F6;     /* вторичный */
    --orange:#F97316;    /* CTA */
    --line: rgba(15,23,42,.10);
    --shadow: 0 10px 30px rgba(2,6,23,.08);
    --radius: 16px;
    --radius2: 22px;
    --container: 1180px;
  }

*{box-sizing:border-box}

a, a:hover{color:inherit; text-decoration:none}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 18px;
}

/* Buttons */

.head-cta{display:flex; align-items:center; gap:10px}




.burger{display:none}
  .breadcrumbs{
      display:flex; flex-wrap:wrap; gap:8px;
      align-items:center;
      margin-bottom:12px;
      color:var(--muted);
      font-weight:700;
      font-size:13px;
    }
    .crumb{display:inline-flex; align-items:center; gap:8px}
    .crumb a{color:var(--blue-2); font-weight:900}
/* Responsive */
.btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid var(--line);
      background:#fff;
      font-weight:800;
      white-space:nowrap;
    }
    .btn:hover{box-shadow: var(--shadow)}
    .btn--primary{
      background:#f97316;
      border-color:transparent;
      color:#fff;
    }
    .btn--primary:hover{filter:saturate(1.05)}
    .btn--ghost{background:rgba(30,79,214,.08); border-color:transparent; color:var(--blue)}
    .btn svg{width:18px;height:18px}

@media (max-width: 500px) {
  body {
    zoom: 0.9;
  }
	.hp-phone a{font-size:13px;}
	.hp-mini a{font-size:11px;}
	.table {font-size: 12px;}
}
}