.mgt-svg-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

/* ============================================================
   01 · Шрифты  [css/fonts.css]
   ============================================================ */
@font-face {
  font-family:'Onest';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/onest-variable.ttf') format('truetype')
}



/* ============================================================
   02 · Базовая разметка, сетки и компоненты  [css/styles.css]
   ============================================================ */

:root {
--navy:#07172f;
  --blue:#0066ff;
  --cyan:#0066ff;
  --muted:#334156;
  --surface:#e0eaf0;
  --line:#c7cfdb;

  --orange:#0066ff;
  --shadow: 0 8px 24px rgba(40, 83, 132, .045);

color-scheme:light;
  --bg:#fcfcfc;
  --text:#07172f;
  --muted:#536f91;
  --tab:#07172f;
  --primary:#0066ff;
  --line:#e8e8e8;
  --panel:#fff;
  --soft:#f3f8fd;
  --input:#fff;
  --shadow:0 8px 24px rgba(40,83,132,.045);
  --tab-bg:#f4f4f4;

  --ds-soft:#e8f0ff;
  --ds-r-control:8px;
  --ds-text:#07172f;
  --ds-primary:#0066ff;
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  font:16px/24px 'Onest',sans-serif;
  color:var(--navy);
  background:var(--bg)
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

a {
  color:var(--blue)
}

button,a {
  touch-action:manipulation
}

button {
  cursor:pointer
}

button:disabled {
  cursor:not-allowed;
  opacity:.5
}

:focus-visible {
  outline:3px solid #78aaff;
  outline-offset:4px
}

.container {
  width:min(1280px,calc(100% - 64px));
  margin:auto
}

header {
  border-bottom:1px solid var(--line);
  background:#fff
}

.header {
  min-height:88px;
  display:flex;
  align-items:center;
  gap:35px
}

.logo {
  font-size:30px;
  font-weight:900;
  letter-spacing:-1.5px;
  color:var(--navy);
  text-decoration:none;
  white-space:nowrap
}

.logo b {
  color:var(--orange);
  font-size:40px;
  padding:0 7px
}

.nav {
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto
}

.nav a {
  color:var(--navy);
  font-size:14px;
  text-decoration:none
}

.nav a:hover {
  color:var(--blue)
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  min-height:52px;
  padding:13px 24px;
  border:1px solid transparent;
  border-radius:10px;
  background:var(--blue);
  color:white;
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  transition:transform .2s,filter .2s
}
.secondary-btn, .btn-1 {
  display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    padding: 13px 16px 13px 24px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #0066ff;
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: transform .2s, filter .2s;
	margin-bottom:8px
 
}
.btn-2{display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    padding: 13px 16px 13px 24px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #172e4c;
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: transform .2s, filter .2s;
	margin-bottom:8px
}

.btn-3{display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    padding: 13px 16px 13px 24px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #dce4eb;
    color: #172e4c;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: transform .2s, filter .2s;
	margin-bottom:8px
}
.secondary-btn:after, .btn-2:after , .btn-1:after{
	content: "";
	background: url(/assets/img/mosgaztrade/steps/arrow.svg) no-repeat 0 0;
	width:24px;
	height:24px;
	display: inline-block;
    vertical-align: middle;
	
}
.btn-3:after{
	content: "";
	background: url(/assets/img/mosgaztrade/steps/left-small.svg) no-repeat 0 0;
	width:24px;
	height:24px;
	display: inline-block;
    vertical-align: middle;
	
}
.button:hover, .secondary-btn:hover, .btn-2:hover, .btn-3:hover {
  filter:brightness(.94);
  transform:translateY(-2px)
}

.button.orange {
  background:var(--orange)
}

.button.outline {
  background:#fff;
  color:var(--navy);
  border-color:var(--blue)
}

.menu {
  display:none;
  background:none;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 14px
}

h1,h2,h3,p {
  margin:0
}

h1 {
  font-size:clamp(35px,4.5vw,62px);
  line-height:1.08;
  letter-spacing:-2.4px;
  font-weight:800
}

h2 {
  font:400 32px/36px 'Onest',Arial,sans-serif;
  letter-spacing:-.6px;
 
}

h3 {
  font-size:24px;
  line-height:28px;
  letter-spacing:-.6px;
  font-weight:400
}

.intro {
  padding:54px 0 30px
}

.intro p {
  font-size:23px;
  color:#304866;
  margin-top:14px
}
.muted{color:var(--muted)}
.hero-grid,.calculators {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
    border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 32px;
}

.hero {
  border-radius:16px;
  overflow:hidden;
  background:#e1f0ff;
  position:relative
}

.hero.dark {
  background:var(--navy);
  color:white
}

.hero-copy {
  padding:32px 36px 22px;
  position:relative;
  z-index:1
}

.hero h2 {
  font-size:32px;

}

.hero p {
  font-size:20px;
  margin:9px 0 22px
}

.hero-photo {
  width:100%;
  aspect-ratio:500/230;
  display:block
}

.section {
  padding-top:58px
}

.section>h2 {
  margin-bottom:24px
}

.calc {
  border-radius:16px;
  padding:30px 32px;
  background:linear-gradient(135deg,#f0f7ff,#eaf3fd);
  display:flex;
  flex-direction:column
}

.calc.install {
  background:linear-gradient(135deg,#fcf8f4,#f6f2ee)
}

.calc-title {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:28px
}

.icon {
  width:32px;
  height:32px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}

.field {
  display:grid;
  grid-template-columns:42% 58%;
  align-items:center;
  margin-bottom:20px;
  gap:0
}

.field label {
  font-size:14px;
  padding-right:12px
}

.field input,.field select {
  width:100%;
  height:44px;
  padding:8px 12px;
  border:1px solid #d4dfeb;
  border-radius:7px;
  background:#fff;
  color:var(--navy)
}

.range-box {
  margin:-10px 0 24px 42%
}

input[type=range] {
  width:100%;
  margin:0;
  accent-color:var(--blue);
  cursor:pointer
}

.install input[type=range] {
  accent-color:var(--orange)
}

.ticks {
  display:flex;
  justify-content:space-between;
  color:#758398;
  font-size:11px
}

.formula {
  display:flex;
  align-items:center;
  gap:14px;
  min-height:65px;
  background:#e4ebf4a8;
  border-radius:9px;
  padding:15px 18px;
  color:#43536b;
  font-size:14px
}

.install .formula {
  background:#ece7e1;
  margin-bottom:20px
}

.formula .icon {
  width:27px;
  height:27px
}

.result {
  margin:20px 0
}

.result small {
  display:block;
  font-size:14px
}

.result strong {
  display:block;
  font-size:26px;
  line-height:1.3;
  margin-top:4px
}

.calc>.button {
  width:100%;
  margin-top:auto
}

.secondary {
  text-align:center;
  font-size:14px;
  margin-top:15px;
  background:none;
  border:0;
  color:var(--blue);
  text-decoration:underline;
  padding:4px
}

.services {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px
}

.service {
background: var(--mgt-panel);
    border: 1px solid var(--mgt-border);
    border-radius: var(--mgt-card-radius);
    box-shadow: var(--mgt-card-shadow);
  padding:32px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:box-shadow .2s
}

.service:hover {
  box-shadow:0 10px 30px #07172f0c
}

.service h3 {

  margin:32px 0 4px
}

.service p {
 
  color:var(--muted);
  margin-bottom:14px
}

.service button {
  color:var(--blue);
  border:0;
  background:none;
  padding:0;
  margin-top:auto;
  text-decoration:underline
}

.cta {
  margin:32px 0 24px 0;
  border-radius:28px;
  background:var(--navy);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:32px
}

.cta h2 {
  font:400 32px/36px 'Onest',Arial,sans-serif;
}

.cta p {
  color:#c3d2e6;
  margin-top:8px
}

.cta .button {
  flex-shrink:0
}




dialog {
  border:0;
  border-radius:18px;
  padding:32px;
  width:min(520px,calc(100% - 32px));
  color:var(--navy);
  box-shadow:0 24px 100px #0003
}

dialog::backdrop {
  background:#07172fb3;
  backdrop-filter:blur(4px)
}

dialog h2 {
  font-size:28px;
  padding-right:20px
}

dialog p {
  margin:15px 0;
  color:var(--muted)
}

.close {
  position:absolute;
  right:16px;
  top:16px;
  border:0;
  background:#f0f3f7;
  border-radius:50%;
  width: 42px;
  height: 42px;
  font-size: 26px;
}

.request-text {
  width:100%;
  min-height:160px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
  margin:10px 0 16px;
  resize:vertical
}

.note {
  font-size:14px!important
}

.status {
  font-size:14px;
  min-height:22px;
  color:var(--blue)
}

@media(min-width:1500px) {
  .intro {
    padding-top:65px
  }
}

@media(max-width:1050px) {
  .nav {
    gap:16px
  }
  .header {
    gap:18px
  }
  .hero-copy {
    padding:27px
  }
  .hero h2 {
    font-size:28px
  }
  .hero p {
    font-size:17px
  }
  .calc {
    padding:25px
  }
  .services {
    grid-template-columns:repeat(2,1fr)
  }
  .footer-links {
    display:none
  }
}

@media(max-width:760px) {
  .container {
    width:calc(100% - 32px)
  }
  .header {
    min-height:72px;
    flex-wrap:wrap;
    gap:12px;
    padding:10px 0
  }
  .logo {
    font-size:25px
  }
  .logo b {
    font-size:31px
  }
  .header>.button {
    margin-left:auto;
    min-height:40px;
    padding:8px 12px;
    font-size:12px
  }
  .menu {
    display:block
  }
  .nav {
    display:none;
    order:4;
    width:100%;
    margin:0;
    flex-direction:column;
    align-items:stretch;
    padding:14px 0
  }
  .nav.open {
    display:flex
  }
  .nav a {
    padding:8px 0
  }
  .intro {
    padding:32px 0 24px
  }
  h1 {
    letter-spacing:-1.2px
  }
  .intro p {
    font-size:18px;
    margin-top:12px
  }
  .hero-grid,.calculators {
    grid-template-columns:1fr;
    gap:18px
  }
  .hero-copy {
    padding:26px 24px 22px
  }
  .hero h2 {
    font-size:28px
  }
  .hero-photo {
    aspect-ratio:500/215
  }
  .hero .button {
    font-size:14px
  }
  .section {
    padding-top:36px
  }
  h2 {
    font-size:28px
  }
  .section>h2 {
    margin-bottom:20px
  }
  .calc {
    padding:25px 22px
  }
  .calc-title h3 {
    font-size:22px
  }
  .calc-title {
    margin-bottom:24px
  }
  .field {
    grid-template-columns:40% 60%
  }
  .range-box {
    margin-left:40%
  }
  .result strong {
    font-size:24px
  }
  .services {
    gap:12px
  }
  .service {
    padding:24px
  }
  .service h3 {
    font-size:17px
  }

  .cta {
    padding:24px;
    flex-direction:column;
    align-items:flex-start;
    gap:22px
  }
  .cta h2 {
    font-size:26px
  }
  .cta .button {
    width:100%
  }
  .footer {
    align-items:flex-start;
    flex-direction:column;
    gap:10px
  }
  footer {
    padding:26px 0
  }
  .footer p {
    max-width:270px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}

.coverage {
  padding-bottom:30px
}

.coverage-head {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:end
}

.coverage-head p {
  margin-top:12px;
  color:var(--muted);
  max-width:650px
}

.demo-badge {
  background:#fff2dc;
  color:#895400;
  font-size:12px;
  padding:7px 12px;
  border-radius:20px;
  white-space:nowrap
}

.service-tabs,.zone-tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:24px 0 18px
}

.service-tabs button,.zone-tabs button {
  border:1px solid var(--line);
  border-radius:8px;
  background:white;
  padding:11px 16px;
  color:var(--navy)
}

.service-tabs button[aria-pressed=true] {
  background:var(--navy);
  border-color:var(--navy);
  color:white
}

.zone-tabs button[aria-pressed=true] {
  background:#eaf3ff;
  border-color:var(--blue);
  color:var(--blue)
}

.coverage-layout {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);
  border:none;
  border-radius:28px;
  overflow:hidden
}

.map-wrap {
  position:relative;
  background:#fff;
  min-height:480px;
  border:1px solid var(--line);
  border-radius:28px;
}

.map {
  height:100%;
  min-height:480px;
  z-index:0
}

.map-message {
  position:absolute;
  bottom:20px;
  left:20px;
  right:20px;
  z-index:400;
  background:#fffffff0;
  padding:10px 14px;
  border-radius:8px;
  font-size:12px;
  pointer-events:none
}

.address-panel {
  padding:28px;
  background:#f5f8fc
}

.address-panel h3 {
  font-size:24px
}

.address-panel p {
  font-size:14px;
  color:var(--muted);
  margin:12px 0 20px
}

.address-panel label,.district-form label {
  font-size:13px;
  display:block;
  margin-bottom:7px
}

.address-panel input,.district-form input {
  width:100%;
  height:48px;
  border:1px solid var(--line);
  background:white;
  padding:12px;
  border-radius:8px
}

.address-panel .button {
  width:100%;
  margin-top:12px
}

.address-result {
  padding:16px;
  background:#edf4f8;
  border-radius:16px;
  margin-top:20px;
  font-size:14px;
  min-height:90px
}

.address-result strong {
  display:block;
  margin-bottom:7px
}

.legend {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  padding:18px 0;
  font-size:13px
}

.legend span {
  display:inline-flex;
  align-items:center;
  gap:8px
}

.dot {
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
  background:#26a568
}

.dot.yellow {
  background:#e6ad20
}

.dot.gray {
  background:#8a97a6
}

.coverage-note {
  color:var(--muted);
  font-size:13px;
  margin-bottom:25px
}

.city-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}

.city-card {
  padding:28px;
  border:1px solid var(--line);
  border-radius:28px
}

.city-card>a {
  font-weight:500;
  text-decoration:none;
  display:block;
  font-size: 20px;
    color: #07172f;
}

.city-card small {
  display:block;
  color:var(--muted);
  margin-top:8px;
  font-size:16px
}

.city-links {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px
}

.city-links a {
  font-size: 12px;
    background: #f5f7fc;
    border-radius: 99px;
    padding: 0px 8px;
    text-decoration: none;
	color:var(--muted);
}
.city-links a:hover{background: #e4eaf2;

}
.location-detail {
  padding:20px;
  background:#f1f6fc;
  border-radius:12px;
  margin-top:16px
}

.location-detail p {
  margin:8px 0;
  color:var(--muted);
  font-size:14px
}

.location-detail a {
  margin-right:20px;
  font-size:14px
}

.district-form {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr auto;
  align-items:end;
  gap:16px;
  padding:24px;
  margin-top:28px;
  border-radius:12px;
  background:#f1f6fc
}

.district-form h3 {
  font-size:22px
}

.district-form p {
  font-size:13px;
  color:var(--muted);
  margin-top:6px
}

.district-form .button {
  white-space:nowrap
}

.coverage .leaflet-popup-content {
  font:14px/1.5 Arial,sans-serif
}

.map-fallback {
  padding:35px;
  color:var(--muted)
}

@media(max-width:1050px) {
  .city-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .district-form {
    grid-template-columns:1fr 1fr
  }
  .district-form>div:first-child {
    grid-column:1/-1
  }
}

@media(max-width:760px) {
  .coverage-head {
    display:block
  }
  .demo-badge {
    display:inline-block;
    margin-top:16px
  }
  .coverage-layout {
    grid-template-columns:1fr
  }
  .map-wrap,.map {
    min-height:340px;
    height:340px
  }
  .address-panel {
    padding:24px
  }
  .city-grid {
    grid-template-columns:repeat(1,1fr)
  }
  .service-tabs {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .service-tabs button {
    font-size:13px;
    padding:10px
  }
  .zone-tabs button {
    flex:1;
    font-size:12px;
    padding:10px
  }
  .district-form {
    grid-template-columns:1fr;
    padding:20px
  }
  .district-form>div:first-child {
    grid-column:auto
  }
  .coverage-head h2 {
    font-size:28px
  }
  .map-message {
    left:10px;
    right:10px;
    bottom:10px;
    font-size:11px
  }
  .legend {
    gap:12px;
	margin-left: 24px;
  }
  .city-card {
    padding:24px
  }
}

.extra-section {
  padding-top:64px
}

.extra-section h2 {
  margin-bottom:12px
}

.section-lead {
  color:var(--muted);
  margin-bottom:26px
}

.docs-grid,.fleet-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px
}

.document-card {
  display:flex;
  gap:20px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px;
  min-height:190px
}

.document-card h3 {
  font-size:19px;
  margin-bottom:16px
}

.document-card button {
  border:0;
  background:none;
  padding:0;
  color:var(--blue);
  text-align:left;
  text-decoration:underline;
  font-size:14px
}

.document-thumb {
  
  flex-shrink:0;
  background:#f3f5f8;
  border-radius:4px;
  text-align:center;
  padding:8px
}

.document-thumb img {
  width:65px;
  
}

.document-thumb small {
  display:block;
  font-size:10px;
  line-height:1.3;
  color:#758398;
  margin-top:7px
}

.block-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:20px
}

.block-bottom p {
  color:var(--muted);
  font-size:13px
}

.fleet-card {
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden
}

.fleet-photo {
  display:block;
  width:100%;
  background:#e7eff7
}

.fleet-info {
  padding:28px
}

.fleet-info h3 {
  font-size:18px;
  min-height:48px
}

.fleet-info dl {
  margin:16px 0 0
}

.fleet-info dl>div {
  display:flex;
  justify-content:space-between;
  gap:16px;
  border-top:1px solid var(--line);
  padding:10px 0;
  font-size:14px
}

.fleet-info dt {
  color:var(--muted)
}

.fleet-info dd {
  margin:0;
  text-align:right
}

.fleet-info button {
  margin-top:12px;
  background:none;
  border:0;
  padding:0;
  color:var(--blue);
  font-size:14px;
  text-decoration:underline
}

.order-panel {
  background:linear-gradient(120deg,#f1f8ff,#e6f2ff);
  border-radius:16px;
  padding:34px
}

.order-steps {
  list-style:none;
  margin:30px 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px
}

.order-steps li {
  position:relative
}

.step-top {
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:18px
}

.step-number {
  font-size:42px;
  line-height:1;
  color:var(--blue);
  font-weight:700
}

.order-steps h3 {
  font-size:18px;
  margin-bottom:9px
}

.order-steps p {
  font-size:15px;
  color:var(--muted)
}

.center-action {
  text-align:center
}

.faq-list {
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 24px;
  margin-top:24px
}

.faq-item+ .faq-item {
  border-top:1px solid var(--line)
}

.faq-item summary {
  padding:20px 36px 20px 0;
  position:relative;
  cursor:pointer;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  list-style:none
}

.faq-item summary::-webkit-details-marker {
  display:none
}

.faq-item summary:after {
  content: '+';
    position: absolute;
    right: 0;
    top: 20px;
    color: #334156;
    font-size: 40px;
    font-weight: 200;
}

.faq-item[open] summary:after {
  content:'−'
}

.faq-answer {
  padding:0 32px 22px 0;
  font-size:15px;
  color:var(--muted);
  line-height:1.7
}

.faq-answer p+p {
  margin-top:12px
}

.faq-contact {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:18px;
  color:var(--muted);
  font-size:14px;
  justify-content: center;
}

.faq-contact button {
  color:var(--blue);
  border:0;
  background:none;
  padding:0;
  text-decoration:underline
}

.reviews-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.review-controls {
  display:none;
  gap:8px
}

.review-controls button {
  width:40px;
  height:40px;
  border:1px solid var(--blue);
  background:#fff;
  color:var(--blue);
  border-radius:50%;
  font-size:24px
}

.review-track {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin-top:24px
}

.review-card {
  padding:24px;
  border:1px solid var(--line);
  border-radius:12px
}

.review-person {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px
}

.review-person .icon {
  background:#edf0f4;
  border-radius:50%;
  padding:8px;
  width:48px;
  height:48px;
  color:#a1aab7
}

.review-person strong {
  font-size:15px;
  display:block
}

.review-person small {
  font-size:12px;
  color:var(--muted)
}

.review-card p {
  font-size:15px;
  color:var(--muted);
  min-height:74px
}

.review-source {
  margin-top:22px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:#7a8799
}

.reviews-note {
  margin-top:20px;
  text-align:center;
  font-size:13px;
  color:var(--muted)
}

.reviews-section {
  padding-bottom:58px
}

@media(max-width:1100px) {
  .document-card {
    gap:12px;
    padding:16px
  }
  .document-thumb {
    width:77px
  }
  .document-card h3 {
    font-size:16px
  }
  .fleet-info {
    padding:24px
  }

  .order-steps {
    gap:18px
  }
  .order-panel {
    padding:28px
  }
}

@media(max-width:760px) {
  .extra-section {
    padding-top:40px
  }
  .docs-grid {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:8px;
    gap:14px
  }
  .document-card {
    flex:0 0 88%;
    scroll-snap-align:start;
    padding:20px
  }
  .document-card h3 {
    font-size:19px
  }
  .block-bottom {
    align-items:flex-start;
    flex-direction:column;
    gap:14px
  }
  .block-bottom .button {
    width:100%
  }
  .fleet-grid {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    padding-bottom:8px
  }
  .fleet-card {
    flex:0 0 88%;
    scroll-snap-align:start
  }
  .fleet-info h3 {
    font-size:19px;
    min-height:0
  }
  .order-panel {
    padding:25px 22px
  }
  .order-steps {
    grid-template-columns:1fr;
    gap:24px;
    margin:25px 0
  }
  .order-steps li {
    padding-left:64px
  }
  .step-top {
    display:block;
    margin:0
  }
  .step-number {
    position:absolute;
    left:0;
    top:0;
    font-size:32px
  }
  .step-top .icon {
    display:none
  }
  .order-steps h3 {
    font-size:19px
  }
  .center-action .button {
    width:100%
  }
  .faq-list {
    padding:0 18px
  }
  .faq-item summary {
    font-size: 16px;
        padding: 24px 24px 16px 24px;
        line-height: 24px;
  }
  .faq-answer {
    padding:0 24px 24px;
    font-size:14px
  }
  .reviews-heading {
    align-items:flex-start
  }
  .reviews-heading h2 {
   
  }
  .review-controls {
    display:flex;
    flex-shrink:0
  }
  .review-track {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    padding-bottom:8px
  }
  .review-card {
    flex:0 0 92%;
    scroll-snap-align:start
  }
  .reviews-section {
    padding-bottom:36px
  }
}

.calc-tabs {
  display:flex;
  gap:6px;
  padding:6px;
  background:#edf2f8;
  border-radius:13px;
  margin:0 0 16px
}

.calc-tabs [role=tab] {
  flex:1;
  min-height:56px;
  padding:14px 22px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font-weight:700;
  font-size:18px;
  transition:background .18s,color .18s
}

.calc-tabs [role=tab][aria-selected=true] {
  background:var(--blue);
  color:white;
  box-shadow:0 3px 9px #0064ed22
}

.calc-tabs #tab-installation[aria-selected=true] {
  background:var(--orange)
}

.calc-section .calculators {
  display:block
}

.calc-section [role=tabpanel][hidden] {
  display:none!important
}

.calc-section .calc {
  padding:34px clamp(32px,14vw,200px)
}

.calc-section .calc>.button {
  margin-top:12px
}

.calc-section .field {
  grid-template-columns:42% 58%
}

.calc-section .range-box {
  margin-left:42%
}

@media(max-width:760px) {
  .calc-tabs {
    gap:3px;
    padding:4px
  }
  .calc-tabs [role=tab] {
    min-height:58px;
    padding:10px 9px;
    font-size:14px;
    line-height:1.3
  }
  .calc-section .calc {
    padding:25px 22px
  }
  .calc-section .field {
    grid-template-columns:40% 60%
  }
  .calc-section .range-box {
    margin-left:40%
  }
}

.news-section {
  padding-top:16px;
  padding-bottom:64px
}

.news-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:24px
}

.news-heading h2 {
  margin:0
}

.news-controls {
  display:flex;
  gap:10px;
  flex-shrink:0
}

.news-controls button {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--blue);
  border-radius:50%;
  color:var(--blue);
  background:white;
  font-size:26px;
  line-height:1
}

.news-controls button:hover {
  background:#e0eaf0
}

.news-track {
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:2px 0 12px;
  scrollbar-width:thin;
  scrollbar-color:#cad9ed transparent
}

.news-card {
  flex:0 0 calc((100% - 44px)/3);
  min-width:0;
  border:1px solid var(--line);
  border-radius:13px;
  overflow:hidden;
  scroll-snap-align:start;
  background:#fff
}

.news-photo {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:#eaf1f7
}

.news-body {
  padding:28px
}

.news-body h3 {

  margin-bottom:20px
}

.news-body h3 a {
  color:var(--navy);
  text-decoration:none
}

.news-body h3 a:hover {
  color:var(--blue)
}

.news-date {
  font-size:13px;
  color:var(--muted)
}

.news-demo {
  font-size:12px;
  color:#77869a;
  margin-top:7px
}

.news-bottom {
  margin-top:24px;
  text-align:center
}

.news-preview-list {
  display:grid;
  gap:14px;
  margin-top:22px
}

.news-preview-list a {
  display:block;
  border-bottom:1px solid var(--line);
  padding-bottom:12px
}

.news-preview-dialog .button {
  margin-top:16px
}

.news-status {
  position:absolute;
  width:1px;
  height:1px;
  clip-path:inset(50%);
  overflow:hidden
}

@media(max-width:760px) {
  .news-section {
    padding-top:8px;
    padding-bottom:40px
  }
  .news-heading {
    gap:15px;
    align-items:flex-start
  }
  .news-heading h2 {
  
  }
  .news-controls {
    gap:7px
  }
  .news-controls button {
    width:36px;
    height:36px;
    font-size:24px
  }
  .news-track {
    gap:14px
  }
  .news-card {
    flex-basis:88%
  }
  .news-body {
    padding:24px
  }
  .news-body h3 {
    font-size:20px
  }
  .news-bottom .button {
    width:100%
  }
}

.gas-products {

  padding:28px;
  background:#e0eaf0;
  border-radius:28px
}
.gas-products p, .gas-products ul{
	max-width:760px;
	margin-left:auto;
	margin-right:auto;
	color:var(--muted)
}
.gas-products h2,.gas-products h3 {
  margin:32px auto;
  text-align:center;
  max-width:760px;
 
}

.gas-products-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  text-align: center
}

.gas-product {
  position:relative;
  display:flex;
  flex-direction:column;
  padding:32px;
  background:#fff;
  border:2px solid #e5e5e5;
  border-radius:28px;
  transition:border-color .18s,box-shadow .18s
}

.gas-product.featured,.gas-product:hover {
  border-color:var(--orange)
}

.gas-product:hover {
  box-shadow:0 8px 24px #07172f08
}

.gas-product h3 {
  font-size:20px;
  line-height:1.2;
  letter-spacing:-.6px;
  font-weight: 500;

}

.gas-product-arrow {
  position:absolute;
  top:32px;
  right:30px;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:var(--orange);
  color:white;
  font-size:22px;
  display:grid;
  place-items:center
}

.gas-composition {
  color:var(--muted);


  margin-top:auto;
  padding-top:16px;
  margin-bottom:24px
}

.gas-price {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60px;
  width:100%;
  border:0;
  border-radius:40px;
  background:var(--orange);
  color:white;
  font-size:16px;
  font-weight:700;
  padding:14px 18px
}

.gas-price:hover,.gas-product-arrow:hover {
  filter:brightness(.94)
}

.gas-products-note {
  font-size:12px;
  color:var(--muted);
  margin-top:20px
}
.gas-product .button{
margin:0 auto
}
@media(max-width:1050px) {
  .gas-products {
    padding:32px 24px 26px
  }
  .gas-products-grid {
    gap:16px
  }
  .gas-product {
    padding:28px;
    
  }
  .gas-product h3 {
   
    
  }
  .gas-product-arrow {
    top:25px;
    right:18px;
    width:36px;
    height:36px;
    font-size:19px
  }
  .gas-composition {
    
  }
  .gas-price {
    
  }
}

@media(max-width:760px) {
  .gas-products {
   
  }
  .gas-products h2 {
    margin-bottom:22px
  }
  .gas-products-grid {
    grid-template-columns:1fr;
    gap:16px
  }
  .gas-product {
    
    padding:28px
  }
  .gas-product h3 {
 
    max-width:none
  }
  .gas-product-arrow {
    top:25px;
    right:24px;
    width:42px;
    height:42px
  }
  .gas-composition {
    font-size:16px;
    
    margin-bottom:20px
  }
  .gas-price {
    min-height:54px
  }
}



.header-services {
  position:relative
}

.header-services summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  gap:6px;
  align-items:center
}

.header-services summary::-webkit-details-marker {
  display:none
}

.header-dropdown {
  position:absolute;
  top:calc(100% + 16px);
  left:0;
  min-width:260px;
  padding:14px;
  border:1px solid #e4eaf2;
  border-radius:12px;
  background:white;
  box-shadow:0 12px 35px #07172f16;
  z-index:20;
  display:grid;
  gap:4px
}

.header-dropdown a {
  padding:9px 10px;
  font-size:15px!important;
  border-radius:6px
}

.header-dropdown a:hover {
  background:#e4eaf2
}

.header-contact {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:17px
}

.header-phone {
  color:#35445c;
  text-decoration:none;
  font-size:16px;
  white-space:nowrap
}

.social-link {
  display:grid;
  place-items:center;
  width:22px;
  height:28px;
  padding:0;
  background:none;
  border:0;
  color:#07172f
}

.social-link svg {
  width:21px;
  height:21px;
  fill:currentColor
}

.price-check {
  position:absolute;
  left:-20px;
  top:7px;
  color:#0066ff;
  font-size:20px
}



@media(max-width:1200px) {

  .header-contact {
    gap:12px
  }
 
}

@media(max-width:900px) and (min-width:761px) {

  .header-contact .social-link {
    display:none
  }

  .desktop-break {
    display:none
  }
}

@media(max-width:760px) {

  .header-contact {
    gap:10px
  }
  .header-phone {
    font-size:12px
  }
  .header-contact .social-link {
    display:none
  }
 
  .header-dropdown {
    position:static;
    box-shadow:none;
    margin-top:12px;
    min-width:0
  }
  
  .desktop-break {
    display:none
  }
  
  .price-check {
    font-size:16px;
    left:-16px
  }
  
}

/* ============================================================
   03 · Первый экран и калькулятор  [css/pixel.css]
   ============================================================ */
/* Reference: Group 536.svg, 1386 × 1298. Values in CSS px. */


body {
  font-family:'Onest',Arial,sans-serif;
  color:var(--navy);
  overflow-x:hidden
}



.container {
  width:min(1382px,calc(100% - 72px))
}

.button {
  border-radius:12px;
  font-family:'Onest',Arial,sans-serif;
  font-weight:500
}

.button.primary {
  background:var(--cyan);
  color:white;
  border:1px solid var(--cyan)
}

.button.secondary-fill {
  background:var(--surface);
  color:var(--navy)
}

.pixel-header {
  height:36px;
  border:0
}

.pixel-header-inner {
  position:relative;
  width:min(1386px,100%);
  height:36px;
  min-height:0;
  padding:0;
  margin:auto;
  display:flex;
  gap:0
}

.pixel-header .menu {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:0;
  border:0;
  background:none;
  border-radius:0;
  width:20px;
  height:36px
}

.pixel-header .menu span {
  display:block;
  width:20px;
  height:2px;
  border-radius:1px;
  background:var(--navy)
}

.pixel-logo {
  display:block;
  margin-left:16px;
  width:129px;
  height:22px
}

.pixel-logo img {
  display:block
}

.pixel-header .nav {
  margin:0 0 0 39px;
  gap:32px;
  font-size:16px;
  line-height:24px;
  align-items:center
}

.pixel-header .nav button {
  font:inherit;
  color:var(--navy);
  padding:0;
  border:0;
  background:none
}

.header-services summary {
  color:var(--navy)
}

.pixel-phone {
  margin-left:auto;
  color:var(--navy);
  font-size:16px;
  text-decoration:none
}

.pixel-callback {
  margin:0 38px 0 16px;
  width:160px;
  height:36px;
  border:2px solid var(--cyan);
  border-radius:18px;
  background:white;
  color:var(--muted);
  font:400 14px 'Onest',sans-serif
}

.pixel-hero {
display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas:         'heading visual'        'location visual'        'description visual'        'actions visual'        'benefits benefits';
    align-content: baseline;
    column-gap: 24px;
    padding: 162px 0 56px;
	margin-top:0
}

.pixel-tagline {
  position:absolute;
  top:16px;
  left:0;
  font-size:16px;
  line-height:24px;
  color:#07172f99
}

.pixel-hero h1 {

  grid-area: heading;

    font-size: clamp(48px, 6.9vw, 96px);
    font-weight: 800;
    line-height: .85;
    letter-spacing: -4px;
    margin: 0 0 10px;
}

.pixel-location {
  grid-area: location;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 12px !important;
}

.pixel-description {
 
    color: var(--muted);
    font-size: 20px;
    line-height: 1.5;
	margin: 8px 0;
}

.pixel-actions {

    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-self: start;
    margin: 24px 0 16px;
}

.pixel-actions .button {
  height:56px;
  min-height:56px;
  font-size:16px;
  padding:16px 24px;
  font-weight:500
}

.pixel-tank {
  display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.pixel-price {
	position: absolute;
left: auto;
    right: 48px;
    top: 0;
    margin-right: 0;
	display: flex;
    align-items: center;
    gap: 7px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: 16px;
    padding: 12px 16px;
    white-space: nowrap;
}

.pixel-price strong {
  font-size: 44px;
    line-height: 1;
	word-spacing: -6px;
 
}

.pixel-price small{ font-size:20px;color: var(--muted); 
}
.pixel-price>span {

    color: var(--muted);
}

.pixel-price img {

  left:-20px;
  
}

.pixel-benefits {
grid-area: benefits;
display: flex;
    gap: 44px;
    margin: 8px 0 0 32px;
    padding: 20px 0 0;
    list-style: none;
    
}

.pixel-benefits li {
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  color: var(--muted);
}

.pixel-benefits img {
  width:24px;
  height:24px
}

.pixel-calculator .calc-bot{
display:flex;
margin-top:24px;
gap:32px;
align-items:flex-start;

}
.pixel-calculator .calc-bot .pixel-benefits {
    grid-area: benefits;
    display: flex;
    gap: 24px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.pixel-calculator .tabs {
  margin-bottom:24px;
}
@media (max-width:1215px){
.pixel-calculator .calc-bot{
display:block;

}
}
@media (max-width:760px){
.pixel-calculator .calc-bot{
display:block;
margin-top:24px;
gap:32px;
align-items:flex-start;

}
.pixel-calculator .calc-bot .pixel-benefits {
    grid-area: benefits;
    display: grid;
    gap: 24px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}}
.pixel-calculator .calc-tabs {
  position:absolute;
  max-width:360px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  margin:0;
  padding:0
}

.pixel-calculator .calc-tabs:focus-within {
  position:relative;
  clip-path:none;
  width:auto;
  height:auto;
  overflow:visible
}

.pixel-calculator .calculators {
  display:block
}

.pixel-calculator [hidden] {
  display:none!important
}

.pixel-refill {
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);
  gap:48px
}

.pixel-controls h2 {
font:400 32px/36px 'Onest',Arial,sans-serif;
  letter-spacing:-.6px;
  margin:0
}

.pixel-calc-intro {
  font:400 16px/24px 'Onest',sans-serif;
  color:var(--muted);
  margin-top:20px;
  width:600px
}

.pixel-slider {
  margin-top:37px
}

.pixel-slider+.pixel-slider {
  margin-top:47px
}

.pixel-slider label {
  font:500 16px/24px 'Onest',sans-serif;
  color:var(--muted);
  display:block
}

.range-shell {
  position:relative;
  margin-top:6px;
  height:24px
}

.range-shell output {
  position:absolute;
  left:var(--progress,50%);
  transform:translateX(-50%);
  bottom:33px;
  white-space:nowrap;
  background:#0066ff;
  color:#fff;
  padding:1px 7px;
  border-radius:4px;
  font:400 12px/16px 'Onest',sans-serif
}

.range-shell output:after {
  content:'';
  position:absolute;
  bottom:-5px;
  left:calc(50% - 4px);
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid #0066ff
}

.range-shell input[type=range] {
  display:block;
  appearance:none;
  -webkit-appearance:none;
  height:4px;
  border-radius:2px;
  margin:0;
  position:absolute;
  top:10px;
  width:100%;
  background:linear-gradient(to right,var(--primary) 0 var(--progress,50%),#c7cfdb var(--progress,50%) 100%);
  cursor:pointer
}

.range-shell input[type=range]::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--navy);
  border:0
}

.range-shell input[type=range]::-moz-range-thumb {
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--navy);
  border:0
}

.pixel-order h3 {
  letter-spacing:-.3px;
  margin:0 0 16px 0;
  font-size: 20px;
}

.pixel-order>strong {
  display:block;
  font:700 40px/48px 'Onest',sans-serif;
  letter-spacing:-1px;
  white-space:nowrap;
 
}

.pixel-order>p {
  color:var(--muted);
  margin:16px 0 24px
}

.pixel-order>input {
  display:block;
  width:100%;
  height:48px;
  border:1px solid #dbe3ea;
  border-radius:8px;
  background:white;
  padding:12px 18px;
  font:400 20px/24px 'Onest',sans-serif;
  color:var(--navy);
  margin-bottom:16px
}

.pixel-order>input::placeholder {
  color:#33415699
}

.pixel-consent {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font:500 14px/20px 'Onest',sans-serif;
  color:var(--muted);
  margin:24px 0 0
}

.pixel-consent input {
  width:18px;
  height:18px;
  accent-color:var(--cyan);
  margin:0;
  flex-shrink:0
}

.pixel-consent button {
  border:0;
  padding:0;
  background:none;
  color:#0066ff;
  text-decoration:underline;
  font:inherit;
  text-align:left
}

.pixel-order>.button {
  width:100%;
  min-height:48px;
  padding:10px 14px;
  font-size:16px
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  clip-path:inset(50%);
  overflow:hidden
}

.pixel-calculator .install {
  padding:0;
  background:none
}

.pixel-header .nav.open {
  display:flex
}

.pixel-header .nav.open .header-services {
  display:block
}

@media(min-width:761px) {
  .pixel-header .nav.open {
    position:absolute;
    top:42px;
    left:0;
    margin:0;
    padding:20px;
    flex-direction:column;
    align-items:flex-start;
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 10px 30px #07172f20;
    z-index:10
  }
}

@media(max-width:1250px) and (min-width:761px) {

  .pixel-location {
    font-size:27px;
    
  }
  .pixel-tank {
    left:47%;
    width:60%;
    height:auto;
    top:10px
  }


  .pixel-benefits {
    gap:25px;
    
  }
  .pixel-refill {
    grid-template-columns:minmax(0,1fr) 289px;
    gap:45px
  }
  .pixel-calculator {
 
  }
  .pixel-calc-intro {
    width:auto
  }
  .pixel-controls h2 {
  
  }
  .wide-only {
    display:none
  }
  .pixel-header .nav {
    gap:22px;
    margin-left:28px
  }
  .pixel-callback {
    margin-right:20px
  }
}

@media(max-width:760px) {
  .container {
    width:calc(100% - 32px)
  }
  .pixel-header {
    height:auto;
    min-height:62px
  }
  .pixel-header-inner {
    width:calc(100% - 32px);
    height:auto;
    min-height:62px;
    flex-wrap:wrap;
    gap:0
  }
  .pixel-logo {
    margin-left:12px;
    width:115px
  }
  .pixel-logo img {
    width:115px
  }
  .pixel-phone {
    font-size:12px
  }
  .pixel-callback {
    display:none
  }
  .pixel-header .nav {
    display:none;
    margin:0;
    padding:16px 0;
    order:5;
    width:100%;
    gap:18px;
    align-items:flex-start
  }
  .pixel-header .nav.open {
    display:flex
  }
  .pixel-hero {
    height:auto;
    padding:0 0 34px;
    display:flex;
    flex-direction:column
  }
  .pixel-tagline {
    position:static;
    font-size:13px;
    line-height:20px;
    margin:0 0 32px
  }
  .pixel-hero h1 {
    position:static;
    font-size: clamp(48px, 8vw, 52px);
        line-height: 1;
        letter-spacing: -1px;
		font-weight: 600;
        text-align: center;
  }
  .pixel-location {
  
    position:static;
    font-size:16px;
    line-height:24px;
    margin-top:16px;
	font-weight:600
  }


  .pixel-actions {
    position:static;
    gap:10px;
    margin-top:28px;
    flex-wrap:wrap
  }
  .pixel-actions .button {
    width:auto;
    flex:1;
    font-size:13px;
    min-height:52px;
    height:auto;
    padding:12px
  }
  .pixel-tank {
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    height:auto;
    order:5;
    margin-top:25px
  }
  .pixel-price {
    top:auto;
    bottom:195px;
    left:auto;
    right:10%;
  }
  .pixel-price strong {
    font-size:43px;
    line-height:52px
  }

  .pixel-price img {
    width:22px;
    height:22px;
    left:-18px;
    top:5px
  }
  .pixel-benefits {
    position:static;
    display:grid;
    gap:14px;


  }
  .pixel-benefits li {
    white-space:normal
  }

  .pixel-refill {
    grid-template-columns:1fr;
    gap:38px
  }
  .pixel-controls h2 {
 
  }
  .pixel-calc-intro {
    width:auto;
    font-size:14px;
    line-height:24px;
    margin-top:0
  }
  .wide-only {
    display:none
  }
  .pixel-slider {
    margin-top:30px
  }
  .pixel-slider+.pixel-slider {
    margin-top:28px
  }
  .pixel-slider label {
    font-size:14px
  }
  .pixel-order>strong {
    font-size:34px
  }
  .pixel-order>p {
    margin:0 0 22px
  }
  .pixel-order>input {
    font-size:17px
  }
  .pixel-calculator .install .field {
    grid-template-columns:1fr;
    gap:8px
  }
  .pixel-calculator .install .range-box {
    margin-left:0
  }
  .pixel-order .button {
    font-size:14px
  }
}

/* ============================================================
   04 · Контентные блоки  [css/blocks.css]
   ============================================================ */
/* Five additional sections: shared spacing, typography and palette. */
.nb-section {
  margin:80px 0;
  color:#07172f;
  scroll-margin-top:80px
}

.nb-section * {
  box-sizing:border-box
}

.nb-section h2 {
  font:400 clamp(24px,2.4vw,32px)/1.25 'Onest',sans-serif;
  letter-spacing:-.6px;
  margin:0 0 16px
}

.nb-section h3 {
  font-family:'Onest',sans-serif;
  font-size:20px;
  line-height:1.35;
  margin:0 0 10px;
  font-weight: 500;
}

.nb-section p {
}

.nb-section .nb-lead {
  margin:0 0 32px;
  max-width:760px
}

.nb-section .nb-note,.nb-section figcaption {
  font-size:13px;
  line-height:1.5;
  color:#7b8fa9;
  margin:10px 0 0
}

.nb-section .button {
  font-family:'Onest',sans-serif;
  font-size:16px;
  line-height:1.4;
  min-height:50px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  padding:12px 24px;
  cursor:pointer;
  border-radius:12px
}

.nb-section .primary {
  background:#0066ff;
  color:#07172f;
  border:1px solid #0066ff
}

.nb-section .outline {
  border:1px solid #0066ff;
  background:white;
  color:#07172f
}

.nb-section button:focus-visible,.nb-section a:focus-visible,.nb-section summary:focus-visible {
  outline:3px solid #168db5;
  outline-offset:4px
}

.nb-icon {
  width:32px;
  height:32px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}

.nb-price-layout {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(290px,1fr);
  gap:24px
}

.nb-price-table {
  
  display:flex;
  flex-direction:column;
  justify-content:space-between
}

.nb-table-scroll {
  overflow:auto;
  box-shadow: var(--mgt-card-shadow);
}

.nb-price-table table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  line-height:1.5;
  min-width:560px;
  overflow:hidden;
background: var(--mgt-panel);
    border: 1px solid var(--mgt-border);
    border-radius: var(--mgt-card-radius);
    box-shadow: var(--mgt-card-shadow);
}

.nb-price-table th,.nb-price-table td {
  padding:20px 28px;
  text-align:left;
  border-bottom:1px solid #edf1f5
}

.nb-price-table thead {
  background:#bdc9da;
}

.nb-price-table tbody {
  background:#fff
}

.nb-price-table tbody th {
  text-align:left;
  white-space:nowrap
}

.nb-price-table td {
  border-left:1px solid #edf1f5
}

.nb-price-factors {
  display:flex;
  
  gap:44px;
  padding-top:24px;
  color:#c3d2e6;
  font-size:16px;
  width: 96%;
}

.nb-price-factors span {
  display:flex;
  align-items:center;
  gap:12px
}

.nb-price-factors .nb-icon {
  width:34px;
  height:34px
}

.nb-address {
  
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--panel);
    box-shadow: var(--shadow);
    padding: 28px;
}

.nb-address h3 {
  font:600 20px/24px 'Onest',sans-serif;
   margin-bottom:8px;
  letter-spacing:-.7px
}

.nb-address input {
  width:100%;
  min-width:0;
  height:52px;
  border-radius:10px;
  background:white;
  border:1px solid #dce4eb;
  padding:14px;

  color:#07172f
}

.nb-address .button {
  width:100%;
  padding:12px
}

.nb-pay-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px
}

.nb-pay-grid article {
  padding:36px;
  border-radius:28px;
  background:#edf4f8
}

.nb-pay-grid .nb-icon {
  margin-bottom:24px
}

.nb-about-grid {
  display:grid;
  grid-template-columns:.75fr 1fr;
  gap:48px;
  align-items:start;
  margin-top:24px
}

.nb-about-grid figure {
  margin:0
}

.nb-photo {
  display:block;
  width:100%;
  height:auto;
  overflow:hidden
}

.nb-about-grid .nb-photo {
  border-radius:24px
}

.nb-about-grid .nb-about-title {

}

.nb-about-services {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:24px 0
}

.nb-about-services a {
  padding:24px 10px;
  background:#07172f;
  border-radius:18px;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:18px;
  color:#fff;
  text-decoration:none;
  text-align:center;
 
}

.nb-about-services .nb-icon {
  width:36px;
  height:36px
}

.nb-about-details {
  border:0;
  background:transparent;
  padding:0
}

.nb-about-details summary {
 list-style: none;
    cursor: pointer;
    text-align: center;
    padding: 16px;
    border: 2px solid #0066ff;
    border-radius: 16px;
    color: #0066ff;
}

.nb-about-details summary::-webkit-details-marker {
  display:none
}

.nb-about-details[open] summary {
  margin-bottom:18px
}

.nb-team-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px
}

.nb-team-grid article {
  background:#edf4f8;
  overflow:hidden;
  border-radius:20px
}
.nb-team-grid article img{width:100%
}
.nb-team-grid article>div {
  padding:16px 28px 28px
}

.nb-team-grid h3 {
  font-size:18px;
  margin-bottom:6px
}

.nb-team-grid small {
color:#758398
}

.nb-team-grid .nb-photo {
  border-radius:20px
}

.nb-project-toolbar {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin:24px 0
}

.nb-project-tabs {
  display:flex;
  background:#edf4f8;
  border-radius:12px;
  padding:4px
}

.nb-project-tabs button {
  background:none;
  border:0;
  padding:12px 28px;
  border-radius:10px;
  font:500 15px 'Onest',sans-serif;
  color:#07172f;
  cursor:pointer
}

.nb-project-tabs [aria-pressed=true] {
  background:#0066ff
}

.nb-arrows, .news-controls, .review-controls {
  display:flex;
  gap:4px
}

.nb-arrows button, .review-controls button, .news-controls button {
  width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #d7e2ec;
    color: #536781;
    background: white;
    cursor: pointer;
    padding: 7px;
}


.nb-arrows button:disabled, .review-controls button:disabled, .news-controls button:disabled {
  opacity:.35;
  cursor:default
}

.nb-project-track {
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  padding-bottom:8px
}

.nb-project-track article {
  flex:0 0 calc((100% - 48px)/3);
  border:1px solid #e0eaf0;
  border-radius:20px;
  overflow:hidden;
  scroll-snap-align:start;
  min-width:0
}

.nb-project-track article[hidden] {
  display:none
}

.nb-project-track article>div {
  padding:28px
}

.nb-project-track h3 {
  font-size:18px
}

.nb-project-track dl {
  margin:12px 0 0;
  font-size:14px;
  color:#7b8fa9
}

.nb-project-track dl div {
  display:flex;
  gap:5px;
  line-height:1.7
}

.nb-project-track dd {
  margin:0
}

.nb-project-track .nb-photo {
  aspect-ratio:1.76
}

.nb-install-image {
  display:block;
  width:100%;
  aspect-ratio:1.76;
  object-fit:contain;
  background:#edf4f8
}

.nb-project-bottom {
  text-align:center;
  margin-top:24px
}

.nb-project-track.is-expanded {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:visible
}

.nb-project-track.is-expanded article {
  min-width:0
}

.nb-section a:hover,.nb-section button:hover {
  filter:brightness(.97)
}

@media(max-width:1050px) {
  .nb-price-layout {
    grid-template-columns:1fr
  }
 .nb-price-factors {display:flex;
        justify-content: flex-start;
        gap: 14px;
        white-space: normal;
        flex-wrap: wrap;}
		.nb-price-factors span {
    display: flex;
    align-items: center;
    gap: 12px;}
	.cta {
    margin: 32px 0 24px 0;
    border-radius: 28px;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: self-start;
    justify-content: space-between;
    gap: 30px;
    padding: 32px;
    flex-wrap: wrap;
}
  .nb-address {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center
  }
  .nb-address h3 {
    grid-row:span 2
  }
  .nb-about-grid {
    gap:28px;
    grid-template-columns:1fr 1fr
  }
  .nb-team-grid {
    gap:16px
  }
  .nb-team-grid article>div {
    padding:24px
  }
  .nb-team-grid h3 {
    font-size:16px
  }
  .nb-pay-grid article {
    padding:24px
  }
  .nb-project-track article {
    flex-basis:calc((100% - 24px)/2)
  }
}

@media(max-width:760px) {
  .nb-section {
    margin:56px 0
  }
  .nb-section h2 {
    font-size:24px;
    letter-spacing:-.6px;
    line-height:1.35
  }
  .nb-price-table {
    padding:0
  }
  .nb-price-table table {
    min-width:480px
  }
  .nb-price-table th,.nb-price-table td {
    padding:16px 12px
  }
  .nb-price-factors {
    gap:16px;
    flex-wrap:wrap;
    
  }
  .nb-price-factors span {
    gap:8px
  }
  .nb-price-factors .nb-icon {
    width:22px;
    height:22px
  }
  .nb-address {
    display:flex;
    padding:26px;
    align-items:stretch
  }
  .nb-table-scroll{box-shadow:none
  }
  .nb-address h3 {
    font-size:23px
  }
  .nb-pay-grid {
    grid-template-columns:1fr;
    gap:16px
  }
  .nb-pay-grid article {
    padding:26px
  }
  .nb-pay-grid .nb-icon {
    margin-bottom:16px
  }
  .nb-about-grid {
    grid-template-columns:1fr;
    gap:26px
  }
  .nb-about-grid .nb-about-title {
    font-size:22px
  }
  .nb-about-services {
    gap:10px
  }
  .nb-team-grid {
    display:flex;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px
  }
  .nb-team-grid::-webkit-scrollbar {
    display:none
  }
  .nb-team-grid article {
    flex:0 0 82%;
    min-width:0;
    scroll-snap-align:start
  }
  .nb-team-grid h3 {
    font-size:15px
  }
  .nb-team-grid article>div {
    padding:24px
  }

  .nb-project-track article {
    flex-basis:85%
  }
  .nb-project-track.is-expanded {
    grid-template-columns:1fr
  }
  .nb-project-tabs button {
    font-size:13px;
    padding:10px 14px
  }
  .nb-arrows {
    gap:6px
  }
  .nb-arrows button, .review-controls button, .news-controls button {
    width:32px;
    height:32px;
	padding: 3px;
  }
  .nb-project-toolbar {
    gap:8px
  }
  .nb-section .nb-note {
    font-size:12px
  }
  .nb-project-track article>div {
    padding:24px
  }
}

.icons {
  display: flex;

  gap: 12px;
  margin-bottom: 24px;
}

.icons img {
  margin-top: -4px;
  height: 28px;
}

/* ============================================================
   05 · Навигация и мобильное меню  [css/header-menu.css]
   ============================================================ */
.pixel-header {
  position:relative;
  z-index:30
}

.pixel-header-inner {
  position:relative
}

.mobile-extra-links {
  display:none
}

.burger-services[hidden] {
  display:none!important
}

.burger-services {
  position:absolute;
  left:0;
  top:calc(100% + 12px);
  width:340px;
  padding:20px;
  background:white;
  border:1px solid #dce4eb;
  border-radius:16px;
  box-shadow:0 12px 36px #07172f15;
  z-index:50
}

.burger-services p {
  font:600 14px 'Onest',sans-serif;
  color:#7b8fa9;
  margin:0 0 10px
}

.burger-services a,.pixel-header .header-dropdown a {
  display:block;
  padding:12px;
  border-radius:8px;
  color:#07172f;
  text-decoration:none;
  font:400 15px/1.5 'Onest',sans-serif;
  white-space:normal
}

.burger-services a:hover,.pixel-header .header-dropdown a:hover {
  background:#f5f7fc
}

.pixel-header .header-services {
  position:relative
}

.pixel-header .header-services summary {
  cursor:pointer;
  list-style:none
}

.pixel-header .header-services summary::-webkit-details-marker {
  display:none
}

.pixel-header .header-dropdown {
  position:absolute;
  top:calc(100% + 16px);
  left:0;
  right:auto;
  min-width:320px;
  padding:12px;
  background:white;
  border:1px solid #dce4eb;
  border-radius:16px;
  box-shadow:0 12px 36px #07172f15;
  z-index:50
}

.pixel-header a:focus-visible,.pixel-header button:focus-visible,.pixel-header summary:focus-visible {
  outline:2px solid #0066ff;
  outline-offset:4px
}

@media(max-width:760px) {
  .burger-services {
    display:none!important
  }
  .pixel-header .nav.open {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    margin:0;
    padding:20px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    max-height:calc(100dvh - 86px);
    overflow-y:auto;
    overscroll-behavior:contain;
    background:#fff;
    border:1px solid #dce4eb;
    border-radius:16px;
    box-shadow:0 12px 36px #07172f18;
    z-index:50
  }
  .pixel-header .nav>a,.pixel-header .nav>button,.pixel-header .header-services summary,.mobile-extra-links a {
    display:block;
    padding:12px 0;
    font:500 16px/1.5 'Onest',sans-serif;
    text-align:left;
    text-decoration:none;
    color:#07172f
  }
  .pixel-header .header-services {
    display:block;
    width:100%;
    border:0;
    padding:0;
    margin:0;
    background:transparent;
    border-radius:0
  }
  .pixel-header .header-services summary {
    display:flex;
    justify-content:space-between
  }
  .pixel-header .header-services summary:after {
    content:none
  }
  .pixel-header .header-dropdown {
    position:static;
    min-width:0;
    width:100%;
    margin:0 0 8px;
    padding:6px 10px;
    background:#f0f6fa;
    box-shadow:none;
    border:0;
    border-radius:12px
  }
  .mobile-extra-links {
    display:flex;
    flex-direction:column;
    border-top:1px solid #e0eaf0;
    margin-top:8px;
    padding-top:8px
  }
  .pixel-header .header-services[open] summary span {
    transform:rotate(180deg)
  }
}

/* Company name in header and footer. */
.pixel-logo.company-brand {
  width:220px;
  height:auto;
  flex-shrink:0;
  font:700 13px/1.35 Unbounded,Arial,sans-serif;
  letter-spacing:-.3px;
  color:#07172f;
  text-decoration:none
}

.footer .company-brand {
  font:700 17px/1.45 'Onest',Arial,sans-serif;
  letter-spacing:-.4px;
  white-space:normal
}

@media(max-width:1100px) {
  .pixel-logo.company-brand {
    width:190px;
    font-size:11px
  }
  .pixel-header .nav {
    margin-left:22px;
    gap:20px
  }
}

@media(max-width:760px) {
  .pixel-logo.company-brand {
    width:auto;
    max-width:185px;
    font-size:10px;
    line-height:1.4
  }
  .pixel-header .pixel-phone {
    font-size:11px
  }

}


/* ============================================================
   06 · Фирменные элементы  [css/brand.css]
   ============================================================ */
/* МосГазТрейд: supplied logo, fonts and hero assets. */
body {
  font-family:'Onest',sans-serif
}

.pixel-logo.company-brand {
  width:160px;
  height:28px;
  max-width:none;
  display:block;
  flex:0 0 160px
}

.pixel-logo.company-brand img,.footer .company-brand img {
  display:block;
  width:160px;
  height:28px;
  max-width:100%;
  object-fit:contain;
  margin-bottom:8px
}

.footer .company-brand {
  display:block;
  line-height:1
}

.pixel-visual {

  width:720px;
  max-width:56%;
  aspect-ratio:3/2
}

.pixel-visual .pixel-tank {
  position:static;
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  margin:0;
  object-fit:contain
}



@media(min-width:761px) and (max-width:1250px) {
  .pixel-visual {
  
    width:99%;
    max-width:99%
  }
  .pixel-visual .pixel-price {
 
  }
}

@media(min-width:761px) and (max-width:1000px) {
  .pixel-header .nav {
    margin-left:18px;
    gap:16px;
    font-size:14px
  }
  .pixel-callback {
    width:125px;
    margin-left:12px;
    margin-right:12px;
    font-size:12px
  }
  .pixel-phone {
    font-size:13px
  }
  .pixel-hero h1 {
    font-size:48px
  }
  .pixel-location {
    font-size:23px
  }
  .pixel-visual {

  }


  .pixel-description br {
    display:none
  }
}

@media(max-width:760px) {
  .pixel-logo.company-brand {
    flex-basis:140px;
    width:140px;
    height:auto;
    margin-left:12px
  }
  .pixel-logo.company-brand img {
    width:140px;
    height:auto
  }
  .pixel-header .pixel-phone {
    font-size:12px
  }
  .pixel-visual {
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    max-width:none;
    order:5;
    margin-top:28px;
    aspect-ratio:3/2
  }
  .pixel-visual .pixel-price {
    top:0;
    
    bottom:auto
  }
  .pixel-visual .pixel-price strong {

    line-height:1.2
  }

}

@media(max-width:360px) {
  .pixel-logo.company-brand {
    flex-basis:120px;
    width:120px;
    margin-left:8px
  }
  .pixel-logo.company-brand img {
    width:120px
  }
  .pixel-header .pixel-phone {
    font-size:10px
  }
}

/* ============================================================
   07 · Эталонные размеры и адаптивность  [css/reference.css]
   ============================================================ */
/* hero.svg: 1600×832; main left 144, burger left 109. */


.container {
  width: min(1382px, calc(100% - 32px));
}

.pixel-header {
  height:64px;
  min-height:64px
}

.pixel-header-inner {
  width:min(1382px,calc(100% - 32px));
  height:64px;
  min-height:64px;
  padding:0 32px 0 0;
  gap:0;
  flex-wrap:nowrap
}

.pixel-header .menu {
  width:19px;
  flex:0 0 19px;
  height:40px;
  gap:5px
}

.pixel-header .menu span {
  width:19px;
  height:2px
}

.pixel-logo.company-brand {
  margin-left:16px;
  flex:0 0 160px;
  width:160px;
  height:28px
}

.pixel-logo.company-brand img {
  width:160px;
  height:28px
}

.pixel-header .nav {
  margin:0 0 0 64px;
  gap:42px;
  font-size:18px;
  line-height:24px;
  flex-shrink:0
}

.pixel-header .nav>a,.pixel-header .nav>button,.header-services summary {
  color:#334156
}

.header-services summary {
  display:flex;
  align-items:center;
  gap:6px
}

.menu-chevron {
  display:block;
  width:10px;
  height:6px;
  flex:none;
  transition:transform .15s
}

.header-services[open] .menu-chevron {
  transform:rotate(180deg)
}

.pixel-phone {
  font-size:18px;
  color:#334156;
  white-space:nowrap;
  margin-left:auto
}

.pixel-callback {
  width:170px;
  flex:0 0 170px;
  height:40px;
  margin:0 0 0 18px;
  border:2px solid #334156;
  border-radius:22px;
  font-size:16px;
  color:#334156
}

.header-messenger {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  width:24px;
  height:40px;
  margin-left:16px;
  border:0;
  padding:0;
  background:transparent
}

.header-messenger img {
  width:24px;
  height:24px;
  object-fit:contain
}



.pixel-tagline {
  top:12px;
  font-size:16px;
  line-height:24px;
  color:#334156
}

.pixel-hero h1 {
  top:145px;
  
}

.pixel-location {
font-size: 32px;
    line-height: 1.1;
    display: block;
    margin-top: 12px;
    margin-bottom: 12px;
    font-family: 'Onest', sans-serif;
    letter-spacing: -.5px;
}

.pixel-description {

  font-size:20px;
  line-height:32px;
  color:#334156;

}

.pixel-actions {
  top:496px;
  gap:16px
}

.pixel-actions .button {
  height:56px;
  min-height:56px;
  font-size:18px;
  font-weight:500;
  padding:16px 32px
}

.button.primary {
  background:#0066ff;
  border:1px solid #0066ff;
  color:#fff
}

.pixel-actions .secondary-fill {
  background:#fff;
  color:#07172f;
  border:2px solid #0066ff
}

.pixel-visual {
 
  width:720px;
  max-width:none;
  aspect-ratio:720/534;

}

.pixel-visual .pixel-tank {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center top
}







.pixel-benefits li {
  gap:8px
}

.nb-price-layout>* {
  min-width:0
}

a {
  color:#0066ff
}

@media(max-width:1450px) and (min-width:761px) {
  .pixel-header-inner {
    padding-right:0
  }
  .pixel-header .nav {
    margin-left:40px;
    gap:28px
  }
  .pixel-phone {
    font-size:16px
  }
  .pixel-callback {
    width:160px;
    flex-basis:160px;
    font-size:14px
  }
  .pixel-visual {
    right:0;
    width:99%;
    height:auto;
    aspect-ratio:3/2
  }



}

@media(max-width:1200px) and (min-width:761px) {
  .pixel-header .nav {
    margin-left:24px;
    gap:20px;
    font-size:15px
  }
  .pixel-logo.company-brand {
    flex-basis:145px;
    width:145px
  }
  .pixel-logo.company-brand img {
    width:145px;
    height:auto
  }
  .pixel-callback {
    flex-basis:140px;
    width:140px
  }
  .header-messenger {
    margin-left:12px
  }
.pixel-description {
    font-size: 16px;
    line-height: 28px;
    margin: 0
}
  
  .pixel-description {

  }
  .pixel-description br {
    display:none
  }
  .pixel-actions {
    top:480px
  }


  .pixel-benefits {
    gap:20px;
    
  }
}

@media(max-width:1020px) and (min-width:761px) {
  .pixel-header .nav {
    margin-left:18px;
    gap:16px;
    font-size:14px
  }
  .pixel-callback {
    display:none
  }
  .pixel-phone {
    font-size:14px
  }
  .pixel-hero h1 {
    font-size:48px
  }
  .pixel-location {
    font-size:23px
  }
  .pixel-price strong {
    font-size:52px
  }
  .pixel-price>span {
    font-size:16px
  }
  .pixel-actions .button {
    padding:16px;
    font-size:14px
  }
}

@media(max-width:760px) {
	.mgt-header-caption{
		display:none
	}
  .pixel-header {
    height:auto
  }
  .pixel-header-inner {
    width:calc(100% - 32px);
    padding:0;
    min-height:64px;
    height:auto;
    flex-wrap:wrap
  }
  .pixel-logo.company-brand {
    width:140px;
    flex-basis:140px;
    margin-left:12px;
    height:auto
  }
  .pixel-logo.company-brand img {
    width:140px;
    height:auto
  }
  .pixel-phone {
    font-size:12px!important;
    margin-left:auto
  }
  .pixel-callback {
    display:none
  }
  .header-messenger {
    height:36px;
    margin:0 0 0 12px;
    flex-basis:22px;
    width:22px
  }
  .header-messenger img {
    width:22px;
    height:22px
  }
  .pixel-header .nav {
    display:none;
    margin:0;
    font-size:16px
  }
  .pixel-header .nav.open {
    margin:0;
    gap:0
  }
  .pixel-header .header-services summary {
    justify-content:space-between
  }
  .pixel-hero {
    height:auto;
    padding-bottom:34px
  }
  .pixel-tagline {
    position:static;
    margin:8px 0 32px;
    font-size:14px;
    line-height:22px
  }



  .pixel-description {
    font-size: 16px;
    line-height: 28px;
	margin:24px 0;
	max-width:600px;
	
   
}

  .pixel-actions {
    position:static;
    gap:10px;
    margin-top:-8px;
	width:100%;
  }
  .pixel-actions .ds-button--large {
    width:100%;
    
  }
  .pixel-visual {
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    max-width:none;
    height:auto;
    aspect-ratio:3/2;
    margin-top:28px;
    order:5
  }
  .pixel-visual .pixel-tank {
    height:auto
  }
  .pixel-visual .pixel-price {
    top:32px;
    left:auto;
    right:5%
  }
  .pixel-price strong {
    font-size:24px;
    line-height:1.2
  }

  .pixel-price img {
    left:-18px;
    top:5px;
    width:22px;
    height:22px
  }

  .pixel-benefits li {
    white-space:normal
  }
  .nb-price-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr)
  }
  .nb-price-table,.nb-table-scroll {
    min-width:0;
    max-width:100%;
    overflow:visible
  }
  .nb-price-table table {
    display:block;
    width:100%;
    min-width:0;
    overflow:visible;
    background:none;
    border:0;
    border-radius:0
  }
  .nb-price-table thead {
    display:none
  }
  .nb-price-table tbody {
    display: grid;
        gap: 16px;
        border-radius: 24px;
        font-size: 16px;
        
        font-weight: 200;
	
  background:var(--bg)

  }
  .nb-price-table tbody tr {
    display:block;
    border:1px solid #dce4eb;
    border-radius:14px;
    overflow:hidden;
    background:#fff
  }
  .nb-price-table tbody th {
    display:block;
    width:100%;
    padding:14px 16px;
    background:#bdc9da;
    border:0;
    font-weight:700;
    text-align:left
  }
  .nb-price-table tbody td {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    padding:12px 16px;
    border:0;
    border-top:1px solid #e4eaf2;
    text-align:right;
    white-space:normal
  }
  .nb-price-table td:before {
    content:attr(data-label);
    text-align:left;
    font-weight:500;
    color:#334156
  }
  .nb-price-factors {
    flex-wrap:wrap;
    gap:12px
  }
  .nb-price-factors>span {
    min-width:0
  }
}

@media(max-width:520px) {
  .pixel-header-inner {
    padding:12px 0;
    row-gap:6px
  }
  .pixel-phone {
    font-size:11px!important
  }
  .header-messenger {
    order:3;
    margin-left:12px
  }
  .header-messenger:first-of-type {
    margin-left:0
  }
  .pixel-header .nav {
    order:5
  }
  .pixel-benefits {
        margin-top: 0px;
    }
}

@media(max-width:400px) {
  .pixel-logo.company-brand {
    flex-basis:130px;
    width:130px
  }
  .pixel-logo.company-brand img {
    width:130px
  }
  .header-messenger {
    display:none
  }
    .pixel-benefits {
        margin-top: 0px;
    }
}

@media(min-width:761px) {
  .pixel-header,.pixel-header-inner {
    height:72px;
    min-height:72px
  }

  .pixel-tagline {
    top:4px
  }
  .pixel-actions {
    top:488px
  }
}



@media(max-width:520px) {
  .pixel-header-inner {
    display:grid;
    grid-template-columns:19px minmax(0,1fr) auto;
    column-gap:12px;
    row-gap:4px;
    padding:12px 0
  }
  .pixel-header .menu {
    grid-column:1;
    grid-row:1
  }
  .pixel-logo.company-brand {
    grid-column:2;
    grid-row:1;
    margin-left:0;
    width:130px
  }
  .pixel-logo.company-brand img {
    width:130px
  }
  .pixel-phone {
    grid-column:3;
    grid-row:1;
    margin:0
  }
  .header-messenger {
    display:flex;
    grid-row:2;
    justify-self:end;
    margin:0;
    height:28px
  }
  .pixel-callback+.header-messenger {
    grid-column:2
  }
  .header-messenger:last-child {
    grid-column:3
  }
  .pixel-header .nav.open {
    display:flex
  }
}

@media(min-width:761px) {
  .container {
    width: min(1382px, calc(100% - 32px));
  }
  .pixel-header-inner {
    margin-left:max(16px,calc((100vw - 1382px)/2));
    margin-right:auto
  }
}

/* Цена занимает собственную строку, изображение — следующую. */
.pixel-visual {
  grid-area: visual;
    position: relative;
    align-self: flex-start;
    min-width: 0;
}

/* .pixel-visual .pixel-price {
  position:relative;
  grid-row:1;
  justify-self:end;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
  margin-right:12%
}
*/
.pixel-visual .pixel-tank {
  
  right: 0;
  grid-row:2;
  min-height:0;
  width:92%;
  height:auto;
  object-fit:contain;
  object-position:center top
}

@media(max-width:760px) {
  .services {
    grid-template-columns:repeat(1,minmax(0,1fr))
  }
  .services>.service {
    min-width:0
  }
  .pixel-visual {
    height:250px;
    aspect-ratio:auto;
    grid-template-rows:auto auto;
    row-gap:16px
  }
  .pixel-visual .pixel-price {

        left: 0;

  }
  .pixel-visual .pixel-tank {
    height:auto;
    order:initial
  }

  .pixel-visual .pixel-tank {
    position: relative;
	left:-35px;
	top:-44px
  
  }
  .pixel-phone, .header-messenger, .pixel-tagline {
    display:none
  }
}

/* Верхнее меню: одинаковый размер на всех ширинах. */
.pixel-header .nav,.pixel-header .nav>a,.pixel-header .nav>button,.pixel-header .header-services>summary {
  font-size:18px;
  line-height:24px
}

/* Полная ширина макета: смещение цены по заданию. */
@media(min-width:1201px) {
  .pixel-visual .pixel-price {
    
  }
  .pixel-visual .pixel-tank {
    top: 0;
  }
}

/* ============================================================
   08 · Тёмная тема  [css/theme.css]
   ============================================================ */
html[data-theme="dark"] body {
  color:#f5f7fc;
  background:#10243f
}

html[data-theme="dark"] a {
  color:#0066ff
}

html[data-theme="dark"] :focus-visible {
  outline:3px solid #34455d
}

html[data-theme="dark"] header {
  border-bottom:1px solid #34455d;
  background:#10243f
}

html[data-theme="dark"] .logo {
  color:#f5f7fc
}

html[data-theme="dark"] .logo b {
  color:#0066ff
}

html[data-theme="dark"] .nav a {
  color:#f5f7fc
}

html[data-theme="dark"] .nav a:hover {
  color:#0066ff
}

html[data-theme="dark"] .button {
  background:#0066ff;
  color:#f5f7fc
}

html[data-theme="dark"] .button.orange {
  background:#0066ff
}

html[data-theme="dark"] .button.outline {
  background:#10243f;
  color:#f5f7fc;
  border-color:#0066ff
}

html[data-theme="dark"] .menu {
  border:1px solid #34455d
}

html[data-theme="dark"] .intro p {
  color:#c2cddd
}

html[data-theme="dark"] .hero {
  background:#10243f
}

html[data-theme="dark"] .hero.dark {
  background:#172e4c;
  color:#f5f7fc
}

html[data-theme="dark"] .calc {
  background:linear-gradient(135deg,#10243f,#10243f)
}

html[data-theme="dark"] .calc.install {
  background:linear-gradient(135deg,#10243f,#10243f)
}

html[data-theme="dark"] .field input,html[data-theme="dark"] .field select {
  border:1px solid #34455d;
  background:#10243f;
  color:#f5f7fc
}

html[data-theme="dark"] input[type=range] {
  accent-color:#0066ff
}

html[data-theme="dark"] .install input[type=range] {
  accent-color:#0066ff
}

html[data-theme="dark"] .ticks {
  color:#c2cddd
}

html[data-theme="dark"] .formula {
  background:#10243fa8;
  color:#c2cddd
}

html[data-theme="dark"] .install .formula {
  background:#10243f
}

html[data-theme="dark"] .secondary {
  color:#0066ff
}

html[data-theme="dark"] .service {
  border:1px solid #34455d
}

html[data-theme="dark"] .service:hover {
  box-shadow:0 10px 30px #0000000c
}

html[data-theme="dark"] .service p {
  color:#f5f7fc
}

html[data-theme="dark"] .service button {
  color:#0066ff
}

html[data-theme="dark"] .cta {
  background:#172e4c;
  color:#f5f7fc
}

html[data-theme="dark"] .cta p {
  color:#c2cddd
}

html[data-theme="dark"] .footer p {
  color:#f5f7fc
}

html[data-theme="dark"] .footer-links a {
  color:#f5f7fc
}

html[data-theme="dark"] dialog {
  color:#f5f7fc;
  box-shadow:0 24px 100px #00000033
}

html[data-theme="dark"] dialog::backdrop {
  background:#172e4cb3
}

html[data-theme="dark"] dialog p {
  color:#f5f7fc
}

html[data-theme="dark"] .close {
  background:#10243f
}

html[data-theme="dark"] .request-text {
  border:1px solid #34455d
}

html[data-theme="dark"] .status {
  color:#0066ff
}

html[data-theme="dark"] .coverage-head p {
  color:#f5f7fc
}

html[data-theme="dark"] .demo-badge {
  background:#10243f;
  color:#c2cddd
}

html[data-theme="dark"] .service-tabs button,html[data-theme="dark"] .zone-tabs button {
  border:1px solid #34455d;
  background:#10243f;
  color:#f5f7fc
}

html[data-theme="dark"] .service-tabs button[aria-pressed=true] {
  background:#172e4c;
  border-color:#34455d;
  color:#f5f7fc
}

html[data-theme="dark"] .zone-tabs button[aria-pressed=true] {
  background:#10243f;
  border-color:#0066ff;
  color:#0066ff
}

html[data-theme="dark"] .coverage-layout {
  border:none
}

html[data-theme="dark"] .map-wrap {
  background:#07172f
}

html[data-theme="dark"] .map-message {
  background:#10243ff0
}

html[data-theme="dark"] .address-panel {
  background:#10243f
}

html[data-theme="dark"] .address-panel p {
  color:#f5f7fc
}

html[data-theme="dark"] .address-panel input,html[data-theme="dark"] .district-form input {
  border:1px solid #34455d;
  background:#10243f
}

html[data-theme="dark"] .address-result {
  background:#172e4c
}



html[data-theme="dark"] .dot.gray {
  background:#172e4c
}

html[data-theme="dark"] .coverage-note {
  color:#f5f7fc
}

html[data-theme="dark"] .city-card {
 border: none;
    background: #10243f;
}

html[data-theme="dark"] .city-card small {
  color:#f5f7fc
}

html[data-theme="dark"] .location-detail {
  background:#10243f
}

html[data-theme="dark"] .location-detail p {
  color:#f5f7fc
}

html[data-theme="dark"] .district-form {
  background:#10243f
}

html[data-theme="dark"] .district-form p {
  color:#f5f7fc
}

html[data-theme="dark"] .map-fallback {
  color:#f5f7fc
}

html[data-theme="dark"] .section-lead {
  color:#f5f7fc
}

html[data-theme="dark"] .document-card {
  border:1px solid #34455d
}

html[data-theme="dark"] .document-card button {
  color:#0066ff
}

html[data-theme="dark"] .document-thumb {
  background:#10243f
}

html[data-theme="dark"] .document-thumb small {
  color:#c2cddd
}

html[data-theme="dark"] .block-bottom p {
  color:#f5f7fc
}

html[data-theme="dark"] .fleet-card {
  border:1px solid #34455d
}

html[data-theme="dark"] .fleet-photo {
  background:#10243f
}

html[data-theme="dark"] .fleet-info dl>div {
  border-top:1px solid #34455d
}

html[data-theme="dark"] .fleet-info dt {
  color:#f5f7fc
}

html[data-theme="dark"] .fleet-info button {
  color:#0066ff
}

html[data-theme="dark"] .order-panel {
  background:linear-gradient(120deg,#10243f,#10243f)
}

html[data-theme="dark"] .step-number {
  color:#0066ff
}

html[data-theme="dark"] .order-steps p {
  color:#f5f7fc
}

html[data-theme="dark"] .faq-list {
  border:1px solid #34455d
}

html[data-theme="dark"] .faq-item+ .faq-item {
  border-top:1px solid #34455d
}

html[data-theme="dark"] .faq-item summary:after {
  color:#0066ff
}

html[data-theme="dark"] .faq-answer {
  color:#f5f7fc
}

html[data-theme="dark"] .faq-contact {
  color:#f5f7fc
}

html[data-theme="dark"] .faq-contact button {
  color:#0066ff
}


html[data-theme="dark"] .review-controls button img, html[data-theme="dark"] .nb-arrows button img, html[data-theme="dark"] .news-controls button img{ filter: brightness(0) invert(1);
} 
html[data-theme="dark"] .review-card {
  border:1px solid #34455d
}

html[data-theme="dark"] .review-person .icon {
  background:#10243f;
  color:#c2cddd
}

html[data-theme="dark"] .review-person small {
  color:#f5f7fc
}

html[data-theme="dark"] .review-card p {
  color:#f5f7fc
}

html[data-theme="dark"] .review-source {
  border-top:1px solid #34455d;
  color:#c2cddd
}

html[data-theme="dark"] .reviews-note {
  color:#f5f7fc
}

html[data-theme="dark"] .calc-tabs {
  background:#10243f
}

html[data-theme="dark"] .calc-tabs [role=tab] {
  color:#f5f7fc
}

html[data-theme="dark"] .calc-tabs [role=tab][aria-selected=true] {
  background:#0066ff;
  color:#f5f7fc;
  box-shadow:0 3px 9px #00000022
}

html[data-theme="dark"] .calc-tabs #tab-installation[aria-selected=true] {
  background:#0066ff
}

html[data-theme="dark"] .news-controls button {
  border:1px solid #0066ff;
  color:#0066ff;
  background:#10243f
}

html[data-theme="dark"] .news-controls button:hover {
  background:#10243f
}

html[data-theme="dark"] .news-card {
  border:1px solid #34455d;
  background:#10243f
}

html[data-theme="dark"] .news-photo {
  background:#10243f
}

html[data-theme="dark"] .news-body h3 a {
  color:#f5f7fc
}

html[data-theme="dark"] .news-body h3 a:hover {
  color:#0066ff
}

html[data-theme="dark"] .news-date {
  color:#f5f7fc
}

html[data-theme="dark"] .news-demo {
  color:#c2cddd
}

html[data-theme="dark"] .news-preview-list a {
  border-bottom:1px solid #34455d
}

html[data-theme="dark"] .gas-products {
  background:#10243f
}

html[data-theme="dark"] .gas-product {
  background:#10243f;
  border:2px solid #34455d
}

html[data-theme="dark"] .gas-product.featured,html[data-theme="dark"] .gas-product:hover {
  border-color:#0066ff
}

html[data-theme="dark"] .gas-product:hover {
  box-shadow:0 8px 24px #00000008
}

html[data-theme="dark"] .gas-product-arrow {
  background:#0066ff;
  color:#f5f7fc
}

html[data-theme="dark"] .gas-composition {
  color:#c2cddd
}

html[data-theme="dark"] .gas-price {
  background:#0066ff;
  color:#f5f7fc
}

html[data-theme="dark"] .gas-products-note {
  color:#f5f7fc
}


html[data-theme="dark"] .header-dropdown {
  border:1px solid #34455d;
  background:#10243f;
  box-shadow:0 12px 35px #00000016
}

html[data-theme="dark"] .header-dropdown a:hover {
  background:#10243f
}

html[data-theme="dark"] .header-phone {
  color:#c2cddd
}

html[data-theme="dark"] .social-link {
  color:#f5f7fc
}

html[data-theme="dark"] .rustek-hero {
  color:#f5f7fc
}

html[data-theme="dark"] .rustek-tagline {
  color:#c2cddd
}

html[data-theme="dark"] .rustek-description {
  color:#c2cddd
}

html[data-theme="dark"] .rustek-actions .cyan {
  background:#0066ff
}

html[data-theme="dark"] .rustek-actions .navy {
  background:#172e4c
}

html[data-theme="dark"] .rustek-price {
  color:#f5f7fc
}

html[data-theme="dark"] .price-check {
  color:#0066ff
}

@media(min-width:761px) {
  html[data-theme="dark"] .rustek-header .nav.open {
    background:#10243f;
    box-shadow:0 12px 32px #00000020;
    border:1px solid #34455d
  }
}

html[data-theme="dark"] body {
  background:#10243f;
  color:#f5f7fc
}

html[data-theme="dark"] .button.primary {
  background:#0066ff;
  color:#f5f7fc;
  border:1px solid #0066ff
}

html[data-theme="dark"] .button.secondary-fill {
  background:#10243f;
  color:#f5f7fc
}

html[data-theme="dark"] .pixel-header .menu span {
  background:#172e4c
}

html[data-theme="dark"] .pixel-header .nav button {
  color:#f5f7fc
}

html[data-theme="dark"] .header-services summary {
  color:#f5f7fc
}

html[data-theme="dark"] .pixel-phone {
  color:#f5f7fc
}

html[data-theme="dark"] .pixel-callback {
  border:2px solid #0066ff;
  background:#10243f;
  color:#f5f7fc
}

html[data-theme="dark"] .pixel-tagline {
  color:#f5f7fc99
}

html[data-theme="dark"] .pixel-description {
  color:#f5f7fccc
}
html[data-theme="dark"] .pixel-price {
  
}
html[data-theme="dark"] .pixel-calculator {

  border:none
}
html[data-theme="dark"] .calculators{

  border:none
}
html[data-theme="dark"] .pixel-price strong{color:#07172f
}
html[data-theme="dark"] .pixel-price>span {
    color:#07172f
}
html[data-theme="dark"] .pixel-calc-intro {
  color:#758398
}

html[data-theme="dark"] .pixel-slider label {
  color:#f5f7fc
}

html[data-theme="dark"] .range-shell output {
  background:#0066ff;
  color:#f5f7fc
}

html[data-theme="dark"] .range-shell output:after {
  border-top:5px solid #0066ff
}

html[data-theme="dark"] .range-shell input[type=range] {
  background:linear-gradient(to right,#172e4c 0 var(--progress,50%),#10243f var(--progress,50%) 100%)
}

html[data-theme="dark"] .range-shell input[type=range]::-webkit-slider-thumb {
  background:#172e4c
}

html[data-theme="dark"] .range-shell input[type=range]::-moz-range-thumb {
  background:#172e4c
}

html[data-theme="dark"] .pixel-order>p {
  color:#758398
}

html[data-theme="dark"] .pixel-order>input {
  border:none;
  background:#10243f;
  color:#f5f7fc
}

html[data-theme="dark"] .pixel-order>input::placeholder {
  color:#f5f7fc99
}

html[data-theme="dark"] .pixel-consent {
  color:#758398;
}

html[data-theme="dark"] .pixel-consent input {
  accent-color:#0066ff
}

html[data-theme="dark"] .pixel-consent button {
  color:#0066ff
}

@media(min-width:761px) {
  html[data-theme="dark"] .pixel-header .nav.open {
    background:#10243f;
    border:1px solid #34455d;
    box-shadow:0 10px 30px #00000020
  }
}

html[data-theme="dark"] .nb-section {
  color:#f5f7fc
}

html[data-theme="dark"] .nb-section p {
  color:#c2cddd
}

html[data-theme="dark"] .nb-section .nb-lead {
  color:#c2cddd
}

html[data-theme="dark"] .nb-section .nb-note,html[data-theme="dark"] .nb-section figcaption {
  color:#c2cddd
}

html[data-theme="dark"] .nb-section .primary {
  background:#0066ff;
  color:#f5f7fc;
  border:1px solid #0066ff
}

html[data-theme="dark"] .nb-section .outline {
  border:1px solid #0066ff;
  background:#10243f;
  color:#f5f7fc
}

html[data-theme="dark"] .nb-section button:focus-visible,html[data-theme="dark"] .nb-section a:focus-visible,html[data-theme="dark"] .nb-section summary:focus-visible {
  outline:3px solid #34455d
}



html[data-theme="dark"] .nb-price-table th,html[data-theme="dark"] .nb-price-table td {
  border-bottom:none;
  background: #172e4c;
  
}

html[data-theme="dark"] .nb-price-table thead {
  background:#10243f
}

html[data-theme="dark"] .nb-price-table tbody {
  background:#07172f
}

html[data-theme="dark"] .nb-price-table td {
  border-left:none
}

html[data-theme="dark"] .nb-price-factors {
  color:#c2cddd
}

html[data-theme="dark"] .nb-address {
  background:#172e4c
}

html[data-theme="dark"] .nb-address h3 {
  color:#f5f7fc
}

html[data-theme="dark"] .nb-address input {
  background:#10243f;
  border:1px solid #34455d;
  color:#f5f7fc
}

html[data-theme="dark"] .nb-pay-grid article {
  background:#10243f
}

html[data-theme="dark"] .nb-about-services a {
  background:#10243f;
  color:#f5f7fc
}

html[data-theme="dark"] .nb-about-details summary {
  border:1px solid #0066ff;
  color:#c2cddd
}

html[data-theme="dark"] .nb-team-grid article {
  background:#10243f
}

html[data-theme="dark"] .nb-project-tabs {
  background:#10243f
}

html[data-theme="dark"] .nb-project-tabs button {
  color:#f5f7fc
}

html[data-theme="dark"] .nb-project-tabs [aria-pressed=true] {
  background:#0066ff
}

html[data-theme="dark"] .nb-arrows button,html[data-theme="dark"]  .news-controls button,html[data-theme="dark"]   .review-controls  button{
  border:1px solid #34455d;
  color:#c2cddd;
  background:#10243f
}

html[data-theme="dark"] .nb-project-track article {
  border:1px solid #34455d
}

html[data-theme="dark"] .nb-project-track dl {
  color:#c2cddd
}

html[data-theme="dark"] .nb-install-image {
  background:#10243f
}

html[data-theme="dark"] .burger-services {
  background:#10243f;
  border:1px solid #34455d;
  box-shadow:0 12px 36px #00000015
}

html[data-theme="dark"] .burger-services p {
  color:#c2cddd
}

html[data-theme="dark"] .burger-services a,html[data-theme="dark"] .pixel-header .header-dropdown a {
  color:#f5f7fc
}

html[data-theme="dark"] .burger-services a:hover,html[data-theme="dark"] .pixel-header .header-dropdown a:hover {
  background:#10243f
}

html[data-theme="dark"] .pixel-header .header-dropdown {
  background:#10243f;
  border:1px solid #34455d;
  box-shadow:0 12px 36px #00000015
}

html[data-theme="dark"] .pixel-header a:focus-visible,html[data-theme="dark"] .pixel-header button:focus-visible,html[data-theme="dark"] .pixel-header summary:focus-visible {
  outline:2px solid #0066ff
}

@media(max-width:760px) {
  html[data-theme="dark"] .pixel-header .nav.open {
    background:#10243f;
    border:1px solid #34455d;
    box-shadow:0 12px 36px #00000018
  }
  html[data-theme="dark"] .pixel-header .nav>a,html[data-theme="dark"] .pixel-header .nav>button,html[data-theme="dark"] .pixel-header .header-services summary,html[data-theme="dark"] .mobile-extra-links a {
    color:#f5f7fc
  }
  html[data-theme="dark"] .pixel-header .header-dropdown {
    background:#10243f
  }
  html[data-theme="dark"] .mobile-extra-links {
    border-top:1px solid #34455d
  }
}

html[data-theme="dark"] .pixel-logo.company-brand {
  color:#f5f7fc
}

html[data-theme="dark"] .pixel-header .nav>a,html[data-theme="dark"] .pixel-header .nav>button,html[data-theme="dark"] .header-services summary {
  color:#f5f7fc
}

html[data-theme="dark"] .pixel-phone {
  color:#f5f7fc
}

html[data-theme="dark"] .pixel-callback {
  border:2px solid #34455d;
  color:#f5f7fc
}

html[data-theme="dark"] .pixel-tagline {
  color:#f5f7fc
}

html[data-theme="dark"] .pixel-description {
 color: #758398;
}

html[data-theme="dark"] .button.primary {
  background:#0066ff;
  border:1px solid #0066ff;
  color:#f5f7fc
}

html[data-theme="dark"] .pixel-actions .secondary-fill {
  background:#10243f;
  color:#f5f7fc;
  border:2px solid #0066ff
}

html[data-theme="dark"] .pixel-benefits {
  color:#f5f7fc
}

html[data-theme="dark"] a {
  color:#0066ff
}
html[data-theme="dark"] a.ds-button--large {
  color:#fff
}
html[data-theme="dark"] a.btn-1 {
  color:#fff
}
html[data-theme="dark"] a.btn-3 {
  color:#172e4c
}

@media(max-width:760px) {
  html[data-theme="dark"] .nb-price-table tbody tr {
    border: none;
        background: #172e4c;
    }
  }
  html[data-theme="dark"] .nb-price-table tbody th {
    background:#172e4c;
	border-top: 2px solid #10243f;
  }
  html[data-theme="dark"] .nb-price-table tbody td {
    border-top:2px solid #10243f
  }
  html[data-theme="dark"] .nb-price-table td:before {
    color:#f5f7fc
  }
}
html[data-theme="dark"] .nb-price-table tbody th {
    background:#172e4c;
  }
  html[data-theme="dark"] .nb-price-table tbody td {
   background: #172e4c;
    border-top: 2px solid #10243f;
  }
html[data-theme="dark"] {
  color-scheme:dark;
  background:#07172F
}

html[data-theme="dark"] body,html[data-theme="dark"] .pixel-header {
  background:#07172F;
  color:#f5f7fc
}

html[data-theme="dark"] .pixel-header .menu span {
  background:#f5f7fc
}

html[data-theme="dark"] .header-messenger img,html[data-theme="dark"] .menu-chevron,html[data-theme="dark"] .pixel-benefits img {
  filter:brightness(0) invert(1)
}

html[data-theme="dark"] .company-brand img {
  content:url('/assets/img/mosgaztrade/mosgaztrade-logo-dark.svg')
}

html[data-theme="dark"] .button.primary,html[data-theme="dark"] .button.orange {
  background:#0066FF;
  border-color:#0066FF;
  color:white
}

html[data-theme="dark"] .pixel-actions .secondary-fill {
  background:transparent;
  border-color:#0066FF;
  color:#f5f7fc
}

html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder {
  color:#a8b7cb;
  opacity:1
}

html[data-theme="dark"] .range-shell input[type=range] {
  background:linear-gradient(to right,#0066ff 0 var(--progress,50%),#34455d var(--progress,50%) 100%)
}

html[data-theme="dark"] .range-shell input[type=range]::-webkit-slider-thumb {
  background:#f5f7fc
}

html[data-theme="dark"] .range-shell input[type=range]::-moz-range-thumb {
  background:#f5f7fc
}

html[data-theme="dark"] .pixel-header {
  border:0
}

html[data-theme="dark"] .pixel-header .menu {
  border:0;
  background:none
}

html[data-theme="dark"] .pixel-callback {
  border-color:#0066ff;
  background:transparent
}

html[data-theme="dark"] .nb-price-factors img {
  filter: brightness(0) invert(1);
}

/* ============================================================
   09 · Хедер по эталону  [css/header-reference.css]
   ============================================================ */
/* Header rebuilt from Group 603.svg. Other site sections use the restored CSS. */
.pixel-header.mgt-header {
  height:72px;
  min-height:72px;
  background:var(--bg);
  border:0;
  position:relative;
  z-index:30
}

.mgt-header .pixel-header-inner {
  position:relative;
  display:block;
  width:min(1382px,calc(100% - 32px));
  height:94px;
  min-height:94px;
  margin:0 auto;
  padding:16px 0 0
}

.mgt-header-row {
  display:flex;
  align-items:center;
  height:40px;
  width:100%;
  gap:0
}

.mgt-header .pixel-logo.company-brand {
  display:block;
  margin:0;
  width:160px;
  flex:0 0 160px;
  height:28px;
  max-width:none
}

.mgt-header .pixel-logo.company-brand img {
  display:block;
  width:160px;
  height:28px
}

.mgt-header .nav {
  display:flex;
  align-items:center;
  gap:28px;
  margin:0 0 0 64px;
  flex:none;
  padding:0;
  width:auto;
  flex-direction:row
}

.mgt-header .nav>a,.mgt-header .nav>button,.mgt-header .header-services>summary {
  font:400 18px/24px 'Onest',Arial,sans-serif;
  color:#334156;
  padding:0;
  background:none;
  border:0;
  text-decoration:none
}

.mgt-header .header-services>summary {
  display:flex;
  align-items:center;
  gap:6px
}

.mgt-header .menu-chevron {
  width:10px;
  height:6px;
  flex:none
}

.mgt-header-actions {
  display:flex;
  align-items:center;
  gap:16px;
  margin-left:auto
}

.mgt-header .pixel-phone {
  display:block;
  margin:0;
  font:400 18px/24px 'Onest',Arial,sans-serif;
  color:#07172fcc;
  white-space:nowrap;
  text-decoration:none
}

.mgt-header .header-messenger {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border:0;
  background:none;
  width:24px;
  height:40px;
  flex:0 0 24px
}

.mgt-header .header-messenger img {
  width:22px;
  height:22px;
  object-fit:contain
}

.mgt-header .pixel-callback {
  display: block;
  flex: none;
  width: 165px;
  height: 40px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid #e4eaf2;
  border-radius: 20px;
  background: #fff;
  /* color: #334156; */
    font: 400 16px / 24px 'Onest', Arial, sans-serif;
  white-space: nowrap;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.mgt-header .header-theme-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:40px;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:none;
  cursor:pointer;
  flex:0 0 32px
}

.mgt-header .header-theme-toggle img {
  width:24px;
  height:24px;
  display:block;
  flex:none
}

.mgt-header .mobile-theme-control {
  display:none
}

.mgt-header .mgt-header-caption {
  position:absolute;
  top:74px;
  left:0;
  margin:0;
  font:400 16px/24px 'Onest',Arial,sans-serif;
  color:#536781
}

.mgt-header .menu {
  display:none;
  position:relative;
  flex:0 0 32px;
  width:32px;
  height:40px;
  gap:5px;
  margin:0 16px 0 0;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  align-items:center;
  justify-content:center
}

.mgt-header .menu span {
  width:20px;
  height:2px;
  background:#07172f;
  flex:none;
  display:block
}

.mgt-header .mgt-close {
  display:none;
  width:24px;
  height:24px
}

.mgt-header .menu[aria-expanded=true] span {
  display:none
}

.mgt-header .menu[aria-expanded=true] .mgt-close {
  display:block
}

.mgt-header .menu:hover .mgt-close {
  content:url('/assets/img/mosgaztrade/header/close-small-2.svg')
}

.mgt-header .header-theme-toggle:hover {
  opacity:.72
}

.mgt-header .header-dropdown {
  top:calc(100% + 16px)
}

html[data-theme="dark"] .pixel-header.mgt-header {
  background:#07172f
}

html[data-theme="dark"] .mgt-header .mgt-header-caption {
  color:#536781
}

html[data-theme="dark"] .mgt-header .nav>a,html[data-theme="dark"] .mgt-header .nav>button,html[data-theme="dark"] .mgt-header .header-services>summary,html[data-theme="dark"] .mgt-header .pixel-phone {
  color:#fff
}

html[data-theme="dark"] .mgt-header .pixel-callback {
  color:#fff;
  border:none;
  background: #10243f;
}

html[data-theme="dark"] .mgt-header .mgt-sun {
  content:url('/assets/img/mosgaztrade/header/sun-dark.svg')
}

html[data-theme="dark"] .mgt-header .menu span {
  background:#fff
}

html[data-theme="dark"] .mgt-header .mgt-close {
  content:url('/assets/img/mosgaztrade/header/close-small-1.svg')
}

html[data-theme="dark"] .mgt-header .menu:hover .mgt-close {
  content:url('/assets/img/mosgaztrade/header/close-small-3.svg')
}

@media(min-width:1201px) {
  .mgt-header .pixel-callback {
    width:160px;
    margin-left:16px
  }
  .mgt-header .header-theme-toggle {
    margin-left:16px
  }
}

@media(max-width:1200px) {
  .mgt-header .nav {
    margin-left:32px
  }
}

@media(max-width:1000px) {
  .mgt-header .pixel-phone,.mgt-header .header-messenger {
    display:none
  }
  .mgt-header .nav {
    gap:20px
  }
  .mgt-header .pixel-callback {
    margin-left:0
  }
}

@media(min-width:761px) and (max-width:800px) {
  .mgt-header .pixel-header-inner {
    padding-top:16px
  }
  .mgt-header .mgt-header-caption {
    top:74px
  }
}

@media(max-width:760px) {
  .pixel-header.mgt-header {
    height:108px;
  }
  .mgt-header .pixel-header-inner {
    padding-top:16px
  }
  .mgt-header .menu {
    display:flex;
    flex-direction:column
  }
  .mgt-header .nav {
    display:none
  }
  .mgt-header .pixel-logo.company-brand {
      margin:0 auto;
    width:160px;
    flex-basis:160px
  }
  .mgt-header .pixel-logo.company-brand img {
    width:142px;
    height:auto;
    margin-top: 0;
  }
  .mgt-header .mgt-header-caption {
    display:none;
    top:74px
  }
  .mgt-header .pixel-callback {
    display:block;
    width:165px
  }
  .mgt-header-actions {
    gap:16px;
    margin-left:0
  }
  .mgt-header .nav.open {
    display:flex;
    position:absolute;
    top:64px;
    left:-6px;
    right:-6px;
    width:auto;
    flex-direction:column;
    align-items:stretch;
    margin:0;
    padding:18px;
    gap:0;
    max-height:calc(100dvh - 80px);
    overflow:auto;
    background:#fff;
    border:1px solid #c7cfdb;
    border-radius:16px;
    box-shadow:none;
    z-index:50
  }
  .mgt-header .nav.open>a,.mgt-header .nav.open>button,.mgt-header .header-services>summary {
    padding:12px 0;
    text-align:left;
    font-size:18px;
    line-height:24px
  }
  .mgt-header .header-services>summary {
    justify-content:space-between
  }
  .mgt-header .header-dropdown {
    position:static;
    width:100%;
    min-width:0;
    padding:6px 10px;
    margin-bottom:8px;
    background:#f0f6fa;
    box-shadow:none
  }
  .mgt-header .mobile-theme-control {
    display:block;
    padding-bottom:16px;
    margin-bottom:8px;
    border-bottom:1px solid #e8e8e8
  }
  .mgt-header .nav .header-theme-toggle {
    display:flex;
    justify-content:flex-start;
    gap:8px;
    width:100%;
    height:24px;
    min-height:24px;
    margin:0;
    padding:0;
    flex:none;
    color:#536781;
    font:400 14px/20px 'Onest',Arial,sans-serif;
    text-align:left
  }
  .mgt-header .mobile-extra-links {
    display:flex;
    flex-direction:column;
    margin-top:12px;
    padding-top:20px;
    border-color:#e8e8e8
  }
  .mgt-header .mobile-extra-links a {
    padding:10px 0;
    font:400 14px/21px 'Onest',Arial,sans-serif;
    color:#536781
  }
  html[data-theme="dark"] .mgt-header .mobile-theme-control,
  html[data-theme="dark"] .mgt-header .mobile-extra-links {
    border-color:#34455d
  }
  html[data-theme="dark"] .mgt-header .nav .header-theme-toggle,
  html[data-theme="dark"] .mgt-header .mobile-extra-links a {
    color:#a8bad1
  }
  html[data-theme="dark"] .mgt-header .nav.open {
    background:#10243f;
    border-color:#34455d
  }
}

@media(max-width:528px) {
  .mgt-header .pixel-header-inner {
    padding-top:16px
  }
}

@media(max-width:460px) {
  .mgt-header .pixel-callback {
    display:none
  }
}

@media(max-width:432px) {
  .mgt-header .pixel-header-inner {
    padding-top:16px
  }
  .pixel-visual .pixel-tank {
    position: relative;
	left:-35px;
	top:4px
  
  }
  .pixel-benefits {

    gap: 16px;
    margin:24px 0 0;
   
    list-style: none;
   
}
}

@media(max-width:320px) {
  .mgt-header .pixel-header-inner {
    padding-top:16px
  }
}

.ds-button {
  --btn-bg: var(--ds-primary, #0066ff);
  --btn-fg: #fff;
  --btn-border: transparent;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 24px;
  border: 2px solid var(--btn-border);
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 400 16px / 24px 'Onest', Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  transition: background-color .15s, border-color .15s, color .15s;
}

.ds-button--large {
  font-size: 20px;
  line-height: 28px;
  min-height: 64px;
  padding: 16px 32px;
  border-radius: 16px;
}

.tabs {
  display: flex;
  flex-wrap: auto;
  align-items: stretch;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  box-shadow: none;
  min-height: 32px;
  height: auto;
  background: var(--tab-bg)
}

.tabs button {
  margin: 0;
  padding: 8px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 500 14px / 20px 'Onest', sans-serif;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .15s, color .15s, box-shadow .15s;
}

.tabs button:hover {
  color: var(--muted)
}

.tabs button[aria-selected=true] {
  background:#fff;
  box-shadow:var(--shadow);
  border-color: var(--line);
  color: var(--tab);
  padding: 10px 20px;
  margin-top:-1px;
  margin-bottom:-1px
}


[data-theme=dark] {
  color-scheme:dark;
  --bg:#07172f;
  --text:#f4f7fc;
  --muted:#a8bad1;
  --tab:#07172f;
  --line:#2a405d;
  --panel:#10243f;
  --soft:#122a47;
  --input:#0b1d36;
  --shadow:0 2px 6px rgb(0 0 0 / 3.5%), 0 12px 40px rgb(0 0 0 / 5.5%);
  --tab-bg:#07172f
}

body {
  background:var(--bg)
}

/* ============================================================
   10 · Система вкладок  [css/tabs.css]
   ============================================================ */
/* Requested compact tabs. Scoped to tab controls, not general buttons. */


html[data-theme="dark"] {
  --ds-soft:#172e4c;
  --ds-text:#f5f7fc
}

html .calc-tabs,html .service-tabs,html .zone-tabs,html .nb-project-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:8px;
  background:var(--ds-soft)!important;
  border-radius:var(--ds-r-control)!important;
  color:var(--ds-text)!important
}

html .calc-tabs [role=tab],html .service-tabs button,html .zone-tabs button,html .nb-project-tabs button {
  padding:8px 16px!important;
  min-height:40px;
  height:auto;
  border:0;
  background:transparent!important;
  border-radius:8px!important;
  color:var(--ds-text)!important;
  font:400 14px/20px 'Onest',Arial,sans-serif!important;
  box-shadow:none!important
}

html .calc-tabs [role=tab][aria-selected=true],html .service-tabs button[aria-pressed=true],html .zone-tabs button[aria-pressed=true],html .nb-project-tabs button[aria-pressed=true] {
  background:var(--ds-primary)!important;
  color:#fff!important
}

@media(max-width:760px) {
  html .service-tabs button,html .zone-tabs button {
    flex:1 1 auto
  }
}

html .pixel-calculator .calc-tabs {
  position:static;
  clip-path:none;
  width:auto;
  height:auto;
  overflow:visible;
  margin:0 0 32px
}

/* INDEX1 · ФОРМА КОМПОНЕНТОВ. Зона действия: калькулятор и все блоки ниже.
   Типографика index2 сохранена. Header и pixel-hero не затрагиваются. */
main.container {
  --mgt-card-radius:28px;
  --mgt-panel:var(--panel);
  --mgt-border:var(--line);
  --mgt-card-shadow:var(--shadow)
}

main.container>.pixel-calculator,
main.container>.pixel-calculator~section,
main.container>.pixel-calculator~.mgt-extra>section {
  margin:0 0 124px
}

main.container>.pixel-calculator~.mgt-extra {
  margin:0;
  padding:0;
  width:100%;
  max-width:none
}


main.container>.pixel-calculator~section .nb-pay-grid article,
main.container>.pixel-calculator~section .service,
main.container>.pixel-calculator~section .nb-team-grid article,
main.container>.pixel-calculator~section .address-panel,
main.container>.pixel-calculator~section .gas-product:not(.featured),
main.container>.pixel-calculator~section .document-card,
main.container>.pixel-calculator~section .fleet-card,
main.container>.pixel-calculator~section .order-panel,
main.container>.pixel-calculator~section .nb-project-track article,
.faq-list,
main.container>.pixel-calculator~section .review-card,
main.container>.pixel-calculator~section .news-card,
main.container>.pixel-calculator~.mgt-extra .panel {
  background:var(--mgt-panel);
  border:1px solid var(--mgt-border);
  border-radius:var(--mgt-card-radius);
  box-shadow:var(--mgt-card-shadow)
}

main.container>.pixel-calculator~section .nb-price-layout,
main.container>.pixel-calculator~section .coverage-layout {
  gap:28px
}

main.container>.pixel-calculator~section .nb-pay-grid,
main.container>.pixel-calculator~section .services,
main.container>.pixel-calculator~section .nb-team-grid,
main.container>.pixel-calculator~section .docs-grid,
main.container>.pixel-calculator~section .fleet-grid,
main.container>.pixel-calculator~section .gas-products-grid {
  gap:16px
}

main.container>.pixel-calculator~section .news-track,
main.container>.pixel-calculator~section .review-track,
main.container>.pixel-calculator~section .nb-project-track {
  gap:16px
}

/* Серые капсулы и белые активные вкладки из index1, без замены font-* index2. */
main.container :is(.pixel-calculator .tabs,.service-tabs,.zone-tabs,.nb-project-tabs,.mgt-extra .tabs) {
  display:inline-flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:0!important;
  width:fit-content;
  max-width:100%;
  padding:0!important;
  border:0;
  border-radius:999px!important;
  min-height:32px;
  height:auto;
  background:var(--tab-bg)!important;
  color:var(--muted);
  box-shadow:none
}

main.container :is(.pixel-calculator .tabs,.service-tabs,.zone-tabs,.nb-project-tabs,.mgt-extra .tabs) button {
  margin:0;
  padding:8px 20px!important;
  min-height:40px;
  height:auto;
  border:1px solid transparent!important;
  border-radius:999px!important;
  background:transparent!important;
  color:var(--text)!important;
  text-align:center;
  white-space:normal;
  cursor:pointer;
  box-shadow:none!important;
  transition:background-color .15s,color .15s,box-shadow .15s
}

main.container :is(.pixel-calculator .tabs,.service-tabs,.zone-tabs,.nb-project-tabs,.mgt-extra .tabs) button:hover {
  color:var(--muted)!important
}

main.container :is(.pixel-calculator .tabs,.service-tabs,.zone-tabs,.nb-project-tabs,.mgt-extra .tabs) button[aria-selected=true],
main.container :is(.pixel-calculator .tabs,.service-tabs,.zone-tabs,.nb-project-tabs,.mgt-extra .tabs) button[aria-pressed=true] {
  background:#fff!important;
  color:var(--tab)!important;
  border-color:var(--line)!important;
  box-shadow:var(--shadow)!important;
  padding:10px 20px!important;
  margin-top:-1px;
  margin-bottom:-1px
}

/* Три дополнительных блока index1. Шрифты и их размеры наследуются из index2. */
.mgt-extra h2 {
  margin-bottom:16px
}

.mgt-extra h3 {
  margin-bottom:16px
}

.mgt-extra .nb-lead {
  color:var(--muted);
  margin:0 0 24px
}

.mgt-extra p {
  margin:0 0 24px
}

.mgt-extra .panel {
  overflow:hidden
}

.mgt-extra .price-panel {
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);
  padding:28px;
  gap:16px
}

.mgt-extra .chart-side {
  min-width:0
}

.mgt-extra .chart-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}

.mgt-extra .price-number {
text-align: right;
    white-space: nowrap;
    font-size: 32px;
    font-weight: 600;
    line-height: 20px;
    margin-right: 24px;
    margin-top: 12px;
}
.mgt-extra .price-number small {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
}

.mgt-extra .chart {
  width:100%;
  display:block;
  margin-top:12px;
  overflow:visible
}

.mgt-extra .chart text {
  fill:var(--muted);
  font-size: 10px;
}

.mgt-extra .chart .gridline {
  stroke:var(--line);
  stroke-dasharray:3 4
}

.mgt-extra .chart .line {
  fill:none;
  stroke:var(--primary);
  stroke-width:2
}

.mgt-extra .chart circle {
  fill:var(--primary);
  stroke:var(--panel);
  stroke-width:2
}

.mgt-extra .subscribe {
  border-left:1px solid var(--line);
  padding-left:28px;
  display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.mgt-extra .subscribe p {
  color:var(--muted)
}

.mgt-extra .field {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--input);
  margin-bottom:12px;
  min-height:52px
}

.mgt-extra .field svg {
  width:22px;
  height:22px;
  flex-shrink:0;
  color:var(--muted)
}

.mgt-extra .field input {
  min-width:0;
  width:100%;
  background:none;
  border:0;
  color:var(--text);
  outline:none;
  padding:12px 0
}

.mgt-extra .field input::placeholder {
  color:var(--muted)
}

.mgt-extra .button {
  width:100%;
  min-height:52px;
  border-radius:12px
}

.mgt-extra .consent {
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted);
  margin-top:18px;
  font-size: 14px;
    line-height: 20px;
}

.mgt-extra .consent input {
  accent-color:var(--primary);
  margin:3px 0 0;
  width:16px;
  height:16px;
  flex:none
}

.mgt-extra .note {
  color:var(--muted);
  margin:24px 0 0
}

.mgt-extra .center {
  text-align:center
}

.mgt-extra .two-col {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px
}

.mgt-extra .monitor,.mgt-extra .reminder {
  padding:28px
}



.mgt-extra .tank {
  position:relative;
  width:100%;
  aspect-ratio:380/150;
  margin:8px 0;
  background:transparent;
  border-radius:12px
}

.mgt-extra .asset {
  position:absolute;
  max-width:none;
  pointer-events:none
}

.mgt-extra .tank .asset {
  position:static;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}

.mgt-extra .tank-labels {
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  margin:8px 0 0;
  font-size: 14px;
}

.mgt-extra .arrow {
  color:var(--primary);
  text-decoration:none
}

.mgt-extra .arrow:hover {
  color:#0052cc
}

.mgt-extra .steps {
  list-style:none;
  padding:0;
  margin:24px 0
}

.mgt-extra .steps li {
  display:flex;
  align-items:center;
  gap:8px;
  margin:16px 0;
  color:var(--muted)
}

.mgt-extra .steps img {
  width:30px;
  height:30px;
  object-fit:contain;
  flex:none
}

.mgt-extra .video {
  padding:0;
  overflow:hidden;
  text-align:left;
  color:var(--text);
  width:100%;
  cursor:pointer
}

.mgt-extra .video-image {
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio:462/194;
  background:#dbe5ef
}

.mgt-extra .video-image .asset {
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:40% center
}

.mgt-extra .video-image.second .asset {
  object-position:70% center
}

.mgt-extra .play {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center
}

.mgt-extra .play span {
  width:64px;
  height:64px;
  border-radius:50%;
  background:#ffffffa1;
  color:#0066ff;
  display:grid;
  place-items:center;
  box-shadow:0 3px 16px #0002;
  padding-left:4px
}

.mgt-extra .play img {
  width:26px;
  height:26px
}

.mgt-extra .video strong {
  display:block;
  padding:14px 24px
}

.mgt-extra .video:hover .play span {
  transform:scale(1.06)
}

.mgt-extra .form-status {
  color:var(--muted);
  margin:12px 0 0
}

.mgt-extra .form-status:empty {
  display:none
}

.mgt-extra-info-dialog {
  max-width:480px;
  width:calc(100% - 32px);
  border:1px solid var(--line);
  border-radius:16px;
  padding:32px;
  background:var(--panel);
  color:var(--text);
  box-shadow:0 12px 80px #0004
}

.mgt-extra-info-dialog::backdrop {
  background:#07172f99
}

.mgt-extra-info-dialog .close {
  float:right;
  border:0;
  background:none;
  color:var(--text);
  cursor:pointer
}

.mgt-extra-info-dialog > h2 {
  font-size:24px;
  line-height:28px;
  letter-spacing:-.6px;
  font-weight:500;
  padding-right:20px
}

@media(max-width:900px) {
  .mgt-extra .price-panel {
    grid-template-columns:1fr
  }
  .mgt-extra .subscribe {
    border-left:0;
    border-top:1px solid var(--line);
    padding:24px 0 0
  }
  .mgt-extra .two-col {
    gap:16px
  }
  .mgt-extra .monitor,.mgt-extra .reminder {
    padding:20px
  }
}

@media(max-width:600px) {
  main.container>.pixel-calculator,main.container>.pixel-calculator~section,main.container>.pixel-calculator~.mgt-extra>section {
    margin-bottom:64px
  }
  main.container :is(.pixel-calculator .tabs,.service-tabs,.zone-tabs,.nb-project-tabs,.mgt-extra .tabs) {
    gap:2px!important;
    width:100%;
    flex-wrap:wrap
  }
  main.container :is(.pixel-calculator .tabs,.service-tabs,.zone-tabs,.nb-project-tabs,.mgt-extra .tabs) button {
    flex:1 1 130px;
    padding:8px 16px!important
  }
  main.container :is(.pixel-calculator .tabs,.service-tabs,.zone-tabs,.nb-project-tabs,.mgt-extra .tabs) button[aria-selected=true],
 main.container :is(.pixel-calculator .tabs,.service-tabs,.zone-tabs,.nb-project-tabs,.mgt-extra .tabs) button[aria-pressed=true] {
 
  }
  .mgt-extra .two-col {
    grid-template-columns:1fr
  }
  .mgt-extra .price-panel {
    padding:24px;
    gap:16px
  }
  .mgt-extra .chart-top {
    flex-direction:column
  }
  .mgt-extra .price-number {
    align-self:flex-end;
    margin-right:0
  }
  .mgt-extra .video strong {
    padding:12px 16px
  }
  .mgt-extra .tank-labels {
    gap:8px
  }
  .mgt-extra .note{
  margin: 16px 0 24px;}
}

/* ============================================================
   11 · МОБИЛЬНЫЕ ТАБЫ — только компоновка и прокрутка
   Оформление кнопок (цвет, бордер, тень, радиусы, шрифт,
   отступы) остаётся из существующей дизайн-системы.
   ============================================================ */
.mgt-tabs-viewport,
.mgt-tabs-scroll {
  display: contents; /* На десктопе обёртки не влияют на верстку. */
}

@media (max-width: 760px) {
  .mgt-tabs-viewport {
    display: block;
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }

  .mgt-tabs-scroll {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    padding-block: 4px; /* запас для исходной тени активного таба */
  }

  .mgt-tabs-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .mgt-tabs-scroll > :is(.tabs, .service-tabs, .zone-tabs, .nb-project-tabs) {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;

    max-width: none !important;
    vertical-align: top;
  }

  .mgt-tabs-scroll > :is(.tabs, .service-tabs, .zone-tabs, .nb-project-tabs) > button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Затухание через маску самой прокручиваемой ленты.
     Никаких цветных оверлеев поверх табов — поэтому в тёмной теме
     не появляется прямоугольная заплатка справа. */
  .mgt-tabs-scroll {
    -webkit-mask-image: none;
    mask-image: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  /* Есть скрытый контент только справа. */
  .mgt-tabs-viewport.has-overflow.at-start:not(.at-end) .mgt-tabs-scroll {
    -webkit-mask-image: linear-gradient(to right,
      #000 0,
      #000 calc(100% - 32px),
      transparent 100%);
    mask-image: linear-gradient(to right,
      #000 0,
      #000 calc(100% - 32px),
      transparent 100%);
  }

  /* Есть скрытый контент только слева. */
  .mgt-tabs-viewport.has-overflow.at-end:not(.at-start) .mgt-tabs-scroll {
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      #000 32px,
      #000 100%);
    mask-image: linear-gradient(to right,
      transparent 0,
      #000 32px,
      #000 100%);
  }

  /* Есть скрытый контент с обеих сторон. */
  .mgt-tabs-viewport.has-overflow:not(.at-start):not(.at-end) .mgt-tabs-scroll {
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      #000 32px,
      #000 calc(100% - 32px),
      transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0,
      #000 32px,
      #000 calc(100% - 32px),
      transparent 100%);
  }

  /* Активный таб не должен попадать в зону маски: JS ниже
     прокручивает его с безопасным отступом 34 px. */

  .mgt-extra .chart-top .mgt-tabs-viewport {
    min-width: 0;
  }

  .nb-project-toolbar .mgt-tabs-viewport {
    width: auto;
    flex: 1 1 auto;
  }
}

@media (max-width: 600px) {
  /* График: цена не сжимает строку прокрутки табов. */
  .mgt-extra .chart-top .mgt-tabs-viewport {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mgt-tabs-scroll { scroll-behavior: auto; }
}



/* Mobile hero order: title -> tank -> description -> CTA -> benefits. Desktop unchanged. */
@media (max-width: 760px) {
  .pixel-hero > h1 { order: 1; }
  .pixel-hero > .pixel-visual { order: 2; }
  .pixel-hero > .pixel-description { order: 5; }
  .pixel-hero > .pixel-actions { order: 4; z-index: 6;}
  .pixel-hero > .pixel-benefits { order: 6; }
}

/* ============================================================
   Мобильный hero: изображение газгольдера ×1.5.
   Обрезается справа внутри visual, горизонтальный скролл
   страницы не появляется. Плашка цены и десктоп не меняются.
   ============================================================ */
@media (max-width: 760px) {
  .pixel-hero > .pixel-visual {
    width: calc(100% + 16px);
        max-width: none;
        height: calc(80vw - 12px);
        aspect-ratio: auto;
        overflow: hidden;
        top: -16px;
  }

  .pixel-hero > .pixel-visual > .pixel-tank {
    display: block;
    position: relative;
    width: calc((90% - 32px) * 1.2);
    max-width: none;
    height: auto;
    left: 0px;
    top: 0;
    margin: 0;
    object-fit: contain;
	transform: scaleX(-1);
  }
}



/* Dark theme: form fields only. No layout/component changes. */
html[data-theme="dark"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  border: 0;
  background: #07172F;
  color: #f5f7fc;
}
html[data-theme="dark"] .mgt-extra .field {

    border: none;
    background: #07172f;
   
}
html[data-theme="dark"]
main.container>.pixel-calculator~section .nb-price-table,
main.container>.pixel-calculator~section .nb-pay-grid article,
main.container>.pixel-calculator~section .service,
main.container>.pixel-calculator~section .nb-team-grid article,
main.container>.pixel-calculator~section .address-panel,
main.container>.pixel-calculator~section .gas-product:not(.featured),
main.container>.pixel-calculator~section .document-card,
main.container>.pixel-calculator~section .fleet-card,
main.container>.pixel-calculator~section .order-panel,
main.container>.pixel-calculator~section .nb-project-track article,

main.container>.pixel-calculator~section .review-card,
main.container>.pixel-calculator~section .news-card,
main.container>.pixel-calculator~.mgt-extra .panel {

border: 1px solid var(--mgt-border);
 
}
.faq-list {border:none
}
html[data-theme="dark"] main.container>.pixel-calculator~section .nb-price-table{border:none
}
html[data-theme="dark"] main.container>.pixel-calculator~section .nb-pay-grid article{border:none
}
html[data-theme="dark"] main.container>.pixel-calculator~section .service,
html[data-theme="dark"] main.container>.pixel-calculator~section .nb-team-grid article,
html[data-theme="dark"] main.container>.pixel-calculator~section .address-panel,
html[data-theme="dark"] main.container>.pixel-calculator~section .gas-product:not(.featured),
html[data-theme="dark"] main.container>.pixel-calculator~section .document-card,
html[data-theme="dark"] main.container>.pixel-calculator~section .fleet-card,
html[data-theme="dark"] main.container>.pixel-calculator~section .order-panel,
html[data-theme="dark"] main.container>.pixel-calculator~section .nb-project-track article,
html[data-theme="dark"] main.container>.pixel-calculator~section .review-card,
html[data-theme="dark"] main.container>.pixel-calculator~section .news-card,
html[data-theme="dark"] main.container>.pixel-calculator~.mgt-extra .panel {border:none
}
.ymaps-2-1-79-map ymaps, .ymaps-2-1-79-map ymaps:after, .ymaps-2-1-79-map ymaps:before {
    box-sizing: content-box;
    border-radius: 8px;
}


/* ============================================================
   Единый вид полей форм
   Эталон: «Сообщим об изменении цены» — иконка + текст.
   Ползунки, checkbox/radio, hidden и кнопки не затрагиваются.
   ============================================================ */
.mgt-form-field {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:52px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--input);
  color:var(--text);
  margin: 0 0 16px;
}

.mgt-form-field > svg {
  width:22px;
  height:22px;
  flex:0 0 22px;
  color:var(--muted);
}

.mgt-form-field > input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.mgt-form-field > select,
.mgt-form-field > textarea {
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  box-shadow:none;
  background:transparent;
  color:var(--text);
  padding:12px 0;
  margin:0;
  border-radius:0;
}

.mgt-form-field > input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.mgt-form-field > select {
  height:auto;
  min-height:0;
}

.mgt-form-field > input::placeholder,
.mgt-form-field > textarea::placeholder {
  color:var(--muted);
}

.mgt-form-field--textarea {
  align-items:flex-start;
  min-height:160px;
  padding-top:14px;
}

.mgt-form-field--textarea > svg {
  margin-top:2px;
}

.mgt-form-field--textarea > textarea.request-text {
  min-height:132px;
  resize:vertical;
  padding-top:0;
  padding-bottom:12px;
}

/* В старых сетках поле теперь является единым контролом вместо голого input/select. */
.calc.install .field > .mgt-form-field {
  width:100%;
}

.nb-address > .mgt-form-field,
.address-panel .mgt-form-field,
.district-form .mgt-form-field,
.pixel-order .mgt-form-field {
  width:100%;
}

/* Убираем прежние внешние отступы у textarea: их теперь держит общий контейнер. */
dialog .mgt-form-field--textarea {
  margin:10px 0 16px;
}

/* Тёмная тема — сохраняем ранее согласованный вид полей. */
html[data-theme="dark"] .mgt-form-field {
  border:0;
  background:#07172F;
  color:#f5f7fc;
}

html[data-theme="dark"] .mgt-form-field > input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-theme="dark"] .mgt-form-field > select,
html[data-theme="dark"] .mgt-form-field > textarea {
  border:0;
  background:transparent;
  color:#f5f7fc;
}
html[data-theme="dark"] .gas-product{background:#172e4c!important;
}
.pixel-order .mgt-form-field{margin: 0 0 16px; font-size: 16px;
}
@media (max-width: 760px) {
.mgt-extra .tank {
aspect-ratio: 270 / 150;
        margin-left: -90px;
        transform: scale(1.5);
}
}
html[data-theme="dark"] .mgt-form-field > img,
html[data-theme="dark"] .mgt-extra .field > img{
filter: brightness(0) invert(1);
    opacity: .2;
}
html[data-theme="dark"] .nb-icon{
filter: brightness(0) invert(1);
  
}
.nb-pay-grid ul, .nb-pay-grid ul li{
margin:0 0 0 8px;
padding:8px 0 0 0;
}
.nb-pay-grid p{margin:24px 0;
}

/* Chrome / Android autofill: не даём браузеру перекрашивать поля. */
.mgt-form-field input:-webkit-autofill,
.mgt-form-field input:-webkit-autofill:hover,
.mgt-form-field input:-webkit-autofill:focus,
.mgt-form-field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text) !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  caret-color: var(--text);
}

html[data-theme="dark"] .mgt-form-field input:-webkit-autofill,
html[data-theme="dark"] .mgt-form-field input:-webkit-autofill:hover,
html[data-theme="dark"] .mgt-form-field input:-webkit-autofill:focus,
html[data-theme="dark"] .mgt-form-field input:-webkit-autofill:active {
  -webkit-text-fill-color: #f5f7fc !important;
  box-shadow: 0 0 0 1000px #07172F inset !important;
  caret-color: #f5f7fc;
}
html[data-theme="dark"] main.container :is(.pixel-calculator .tabs,.service-tabs,.zone-tabs,.nb-project-tabs,.mgt-extra .tabs){
background: #10243f8f !important;}
@media(max-width:852px) {
  .pixel-benefits {
    position:static;
    display:grid;
    gap:14px;
     margin-top:0px
  }
  .pixel-description {
    font-size: 16px;
    line-height: 28px;
	margin:0;
	max-width:600px;
	
   
}
  }
  @media(max-width:874px) and (min-width:761px) {
  .pixel-hero {
        height: 488px;
		padding: 96px 0 10px;
    }
  .pixel-description {
    font-size: 16px;
    line-height: 28px;
	margin:0;
	max-width:600px;
	
   
}
}
.nb-price-table tr:last-child td{border-bottom:none
}
html[data-theme="dark"] .nb-address{border:none
}

html[data-theme="dark"] .nb-price-table table{border:none
}
.arrow{gap: 8px;padding: 12px 20px 12px 24px!important;
}
.nb-pay-grid ul li::marker {
  color:#334156;
}
html[data-theme="dark"] .city-links a {
    font-size: 12px;
    background: #172e4c;
    border-radius: 99px;
    padding: 0px 8px;
    text-decoration: none;
    color: var(--muted);
}
.cta-photo{height:100%; width:auto;
max-width:140px;
border-radius:16px
}
@media(max-width:560px){
.cta-photo {
    height: 100%;
    width: auto;
    max-width: 100%;
   
}
}

/* Footer: desktop/mobile layouts from supplied SVG references. */
footer.mgt-site-footer {padding:32px 0; color:#07172F; background:transparent;}
.mgt-site-footer .mgt-footer-layout {width:min(1274px,calc(100% - 32px)); margin:0 auto; display:grid; grid-template-columns:374px 1fr auto; align-items:start; gap:72px; font:400 16px/24px 'Onest',Arial,sans-serif;}
.mgt-site-footer .mgt-footer-brand {display:flex; align-items:flex-start; gap:16px; min-width:0;}
.mgt-site-footer .mgt-footer-logo {display:block; flex:0 0 160px; width:160px; height:28px;}
.mgt-site-footer .mgt-footer-logo img {display:block; width:160px; height:28px; max-width:none;}
.mgt-site-footer .mgt-footer-caption {margin:0; padding:0; color:#536781; font:400 16px/24px 'Onest',Arial,sans-serif; white-space:nowrap;}
.mgt-site-footer .mgt-footer-contacts {display:flex; align-items:flex-start; gap:12px;}
.mgt-site-footer .mgt-footer-phone {display:block; color:#07172F; font:400 18px/24px 'Onest',Arial,sans-serif; text-decoration:none; white-space:nowrap;}
.mgt-site-footer .mgt-footer-messengers {display:flex; align-items:center; gap:8px;}
.mgt-site-footer .mgt-footer-messengers button {display:grid; place-items:center; width:24px; height:24px; min-width:24px; min-height:24px; padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; cursor:pointer;}
.mgt-site-footer .mgt-footer-messengers img {display:block; width:24px; height:24px;}
.mgt-site-footer .mgt-footer-developer {display:flex; align-items:center; gap:8px; color:#536781; font:400 16px/24px 'Onest',Arial,sans-serif; text-decoration:none; white-space:nowrap;}
.mgt-site-footer .mgt-footer-developer img {display:block; width:24px; height:24px;}
.mgt-site-footer a:hover {color:var(--ds-primary,#0066ff);}
.mgt-site-footer button:hover {opacity:.7;}
.mgt-site-footer a:focus-visible,.mgt-site-footer button:focus-visible {outline:2px solid var(--ds-primary,#0066ff); outline-offset:4px;}
html[data-theme="dark"] .mgt-site-footer .mgt-footer-logo img {content:url('/assets/img/mosgaztrade/footer/logo-dark.svg');}
html[data-theme="dark"] .mgt-site-footer .mgt-footer-phone {color:#F5F7FC;}
html[data-theme="dark"] .mgt-site-footer .mgt-footer-caption,html[data-theme="dark"] .mgt-site-footer .mgt-footer-developer {color:#AAB8CC;}
html[data-theme="dark"] .mgt-site-footer .mgt-footer-messengers img {filter:brightness(0) invert(1);}
@media (min-width:761px) and (max-width:1150px) {
 .mgt-site-footer .mgt-footer-layout {grid-template-columns:auto 1fr auto; gap:24px;}
 .mgt-site-footer .mgt-footer-contacts {flex-wrap:wrap; gap:8px;}
 .mgt-site-footer .mgt-footer-brand {flex-direction:column; gap:16px;}
 .mgt-site-footer .mgt-footer-logo {flex-basis:auto;}
}
@media (max-width:760px) {
 footer.mgt-site-footer {padding:32px 0;}
 .mgt-site-footer .mgt-footer-layout {display:flex; flex-direction:column; align-items:center; gap:32px; text-align:center;}
 .mgt-site-footer .mgt-footer-brand {flex-direction:column; align-items:center; gap:16px;}
 .mgt-site-footer .mgt-footer-logo {flex-basis:auto;}
 .mgt-site-footer .mgt-footer-caption {line-height:24px;}
 .mgt-site-footer .mgt-footer-contacts {flex-direction:column; align-items:center; gap:16px;}
 .mgt-site-footer .mgt-footer-developer {align-self:center; margin-top:-8px;}
}

/* Order steps — kak.svg. Icons are separate SVG files. */
#delivery-steps {padding:0; border:0; background:transparent; box-shadow:none;}
#delivery-steps #steps-title {margin:0 0 40px; font:400 32px/36px 'Onest',Arial,sans-serif;}
#delivery-steps .mgt-delivery-grid {display:grid; grid-template-columns:minmax(0,293fr) minmax(0,297fr) minmax(0,249fr) minmax(0,287fr); gap:24px; margin:0; padding:0; list-style:none;}
#delivery-steps .mgt-delivery-card {min-width:0; padding:24px; margin:0; border:1px solid #E8E8E8; border-radius:28px; background:#fff; box-shadow:0 8px 24px rgba(40,83,132,.045); color:#334156;}
#delivery-steps li:hover{border:1px solid #0066FF;
}
#delivery-steps .mgt-delivery-icon {display:block; width:24px; height:24px; margin:0 0 24px;}
#delivery-steps .mgt-delivery-card h3 {margin:0 0 8px; color:inherit; font:400 24px/29px 'Onest',sans-serif; }
#delivery-steps .mgt-delivery-card p {margin:0; color:inherit; font:400 16px/24px 'Onest',Arial,sans-serif;}
#delivery-steps .mgt-delivery-cta {display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; margin:32px 0 0; padding:12px 24px; border:0; border-radius:12px; background:#0066FF; color:#fff; text-decoration:none; font:400 16px/24px 'Onest',Arial,sans-serif; box-shadow:none;}
#delivery-steps .mgt-delivery-cta img {display:block; width:24px; height:24px;}
#delivery-steps .mgt-delivery-cta:hover {background:#0059DF;}
#delivery-steps .mgt-delivery-cta:focus-visible {outline:2px solid #0066FF; outline-offset:4px;}
html[data-theme="dark"] #delivery-steps #steps-title {color:#F5F7FC;}
html[data-theme="dark"] #delivery-steps .mgt-delivery-card {background:var(--panel,#10243F); border:none; color:#F5F7FC; box-shadow:0 8px 24px rgba(0,0,0,.12);}
html[data-theme="dark"] #delivery-steps .mgt-delivery-card p {color:#AAB8CC;}
html[data-theme="dark"] #delivery-steps .mgt-delivery-card .mgt-delivery-icon {filter:brightness(0) invert(1);}
.mgt-form-field img, .field img{width:20px!important;
}
html[data-theme="dark"] .city-card>a {
    color: #fff;
}
.nav .header-theme-toggle{display:none
	}
@media(max-width:1150px) {#delivery-steps .mgt-delivery-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:759px) {
 #delivery-steps #steps-title {font-size:28px; line-height:32px; margin-bottom:24px;}
 #delivery-steps .mgt-delivery-grid {grid-template-columns:minmax(0,1fr); gap:24px;}
 #delivery-steps .mgt-delivery-card p {line-height:28px;}
 .hero-grid, .calculators {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--panel);
    box-shadow: var(--shadow);
    padding: 24px;
}
.pixel-location {
    position:static;
    font-size:18px;
    line-height:24px;
    margin-top:8px;
	font-weight:500
  }
  .pixel-visual .pixel-price {
        position: relative;
        top: 0px;
        right: auto;
        left: auto;
        margin: 0 auto;
        width: 164px;
        height: auto;
        display: grid;
        gap: 2px;
		border-radius: 28px;
        padding: 24px 28px 12px 42px;
		text-align: center;
		background: rgba(255, 255, 255, 0.75);
		z-index: 2;
		backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(8px); /* Safari */
  background: rgba(255, 255, 255, 0.7);
    }
	
	.pixel-price strong {
        font-size: 48px;
   word-spacing: -12px;
        font-weight: 600;
        line-height: 40px!important;
        text-align: center;
    }
	    .pixel-price img {
        position: absolute;
        left: 13px;
        top: 12px;
        width: 26px;
        height: 26px;
    }
	.pixel-price span{ font-size:18px;color: #07172f;font-weight: 500;
	}
	.pixel-hero > .pixel-visual {
        width: 100%;
        max-width: none;
        
        aspect-ratio: auto;
        overflow: hidden;
        top:-24px;
		height: auto;
		margin-bottom: -64px;
		
    }
	    .pixel-hero > .pixel-visual > .pixel-tank {
      
        position: relative;
        width: calc((90% - 42px) * 1.2);
        max-width: none;
        height: auto;
        left: 4px;
        top: -64px;
        margin: 0;
        object-fit: contain;
        transform: scaleX(-1);
        z-index: 1;
    }
	.pixel-hero h1 {
        position: static;
        font-size: 48px;
        line-height: 1;
        letter-spacing: -5%;
        font-weight: 600;
        text-align: center;
    }
    .pixel-actions .ds-button--large {
        width: auto;
        margin: 0 auto;
		font-size: 18px;
    }
	.pixel-description {
        font-size: 16px;
        line-height: 28px;
        margin: 24px auto 0;
        max-width: 390px;
		text-align: center;
    }
	.mgt-header .header-theme-toggle{display:none
	}
.mgt-header .pixel-callback {
      
        text-indent: -9999px;
        display: block;
        width: 24px;
        height: 24px;
        background: url(/assets/img/mosgaztrade/call-calling.svg);
        padding: 0;
        border-radius: 0;
        border: none;
    }
.nav .header-theme-toggle{display:block
	}
.pixel-benefits{
margin-left:18px;
margin-top:16px
}
html[data-theme="dark"] .mgt-header .pixel-callback{
	background: url(/assets/img/mosgaztrade/call-calling-w.svg);
	padding: 0;
        border-radius: 0;
        border: none;
}
main.container>.pixel-calculator{margin-bottom: 48px;
 }
 h2 {
        font-weight: 600!important;
		font-size: 24px!important;
    }

h3 {
        font-weight: 500!important;
        font-size: 20px!important;
    }
}
@media(min-width:760px) {
.pixel-price {
    position: absolute;
    left: auto;
        right: 64px;
    top: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: 16px;
    padding: 12px 16px;
    white-space: nowrap;
   
    top: 0px;

  
    max-width: 284px;
    height: auto;
    display: grid;
    gap: 2px;
    border-radius: 28px;
    padding: 24px 28px 12px 42px;
    text-align: center;
    background: rgba(255, 255, 255, 0.75);
    z-index: 2;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.7);
}
.pixel-price strong {
    font-size: 44px;
    line-height: 1;
    word-spacing: -6px;
    font-size: 96px;
    word-spacing: -22px;
    font-weight: 700;
    line-height: 78px !important;
    text-align: center;
}
.pixel-price img {
    left: -20px;
    position: absolute;
    left: 20px;
    top: 20px;
    width: 36px;
    height: 36px;
}
.pixel-price>span {
        font-size: 20px;
        font-weight: 500;
    }
}
@media (max-width: 1000px) and (min-width:761px) {
    .pixel-price strong {
      
        line-height: 1;
        word-spacing: -6px;
        font-size: 64px;
        word-spacing: -22px;
        font-weight: 700;
        line-height: 48px !important;
        text-align: center;
    }
}
@media (max-width: 960px) {
    .pixel-hero > .pixel-description {
        order: 5;
    }
.pixel-actions {
     margin: 0 0 16px;
}
}
html[data-theme="dark"] .pixel-price{border:none;
	}
	
	/* footer */


    .mgt-footer {
      --mgt-bg: #fcfcfc;
      --mgt-text: #07172f;
      --mgt-phone: #334156;
      --mgt-muted: #536f91;
      --mgt-line: #e8e8e8;
      --mgt-blue: #0066ff;
      color: var(--mgt-text);
      background: var(--mgt-bg);
      -webkit-font-smoothing: antialiased;
    }

    .mgt-footer[data-theme="dark"],
    html[data-theme="dark"] .mgt-footer,
    body.dark-theme .mgt-footer {
      --mgt-bg: #07172f;
      --mgt-text: #f5f7fc;
      --mgt-phone: #f5f7fc;
      --mgt-muted: #9eafca;
      --mgt-line: #273951;
    }

    .mgt-footer__inner {
      width: min(1382px, calc(100% - 32px));
      margin: 0 auto;
   
    }

    .mgt-footer__nav-area {
      border-top: 1px solid var(--mgt-line);
      border-bottom: 1px solid var(--mgt-line);
      padding: 68px 0 58px;
    }

    .mgt-footer__nav-grid {
      display: grid;
      grid-template-columns: 296fr 352fr 440fr 192fr;
      align-items: start;
    }

    .mgt-footer__heading {
      margin: 0;
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      letter-spacing: -0.012em;
    }

    .mgt-footer__links {
      list-style: none;
      margin: 12px 0 0;
      padding: 0;
    }

    .mgt-footer__links li + li { margin-top: 16px; }
    .mgt-footer a { color: inherit; text-decoration: none; }
    .mgt-footer__links a { display: inline-block; color: var(--mgt-muted);}
    .mgt-footer__links a:hover,
    .mgt-footer__bottom a:hover { color: var(--mgt-blue); }
    .mgt-footer a:focus-visible,
    .mgt-footer button:focus-visible {
      outline: 2px solid var(--mgt-blue);
      outline-offset: 4px;
      border-radius: 3px;
    }

    .mgt-footer__contact-city {
      margin: 1px 0 0;
      color: var(--mgt-muted);
      font-size: 14px;
      line-height: 20px;
    }

    .mgt-footer__phone {
      display: inline-block;
      margin-top: 17px;
      color: var(--mgt-phone) !important;
      font-size: 21px;
      line-height: 28px;
      white-space: nowrap;
      letter-spacing: -0.015em;
    }

    .mgt-footer__callback {
      display: block;
      width: 192px;
      height: 48px;
      margin-top: 15px;
      border: 0;
      border-radius: 8px;
      background: var(--mgt-blue);
      color: white;
      font: inherit;
      cursor: pointer;
      transition: background .2s, transform .2s;
    }

    .mgt-footer__callback:hover { background: #0057da; }
    .mgt-footer__callback:active { transform: scale(.98); }
    .mgt-footer__socials { display: flex; gap: 24px; margin-top: 28px; align-items: center; }
    .mgt-footer__social { display: inline-flex; width: 25px; height: 25px; align-items: center; justify-content: center; }
    .mgt-footer__social svg { display: block; width: 25px; height: 25px; }
    .mgt-footer__social .social-ink { fill: var(--mgt-phone); }
    .mgt-footer__social:hover .social-ink { fill: var(--mgt-blue); }

    .mgt-footer__details {
      display: grid;
      grid-template-columns: 296fr 352fr 632fr;
      align-items: start;
      min-height: 203px;
      padding: 58px 0 63px;
      border-bottom: 1px solid var(--mgt-line);
    }

    .mgt-footer__logo { display: block; width: 162px; height: 28px; overflow: visible; }
    .mgt-footer__logo .logo-ink { fill: var(--mgt-text); }
    .mgt-footer__logo .logo-red { fill: #ff0239; }
    .mgt-footer__tagline { margin: 13px 0 0; color: var(--mgt-muted); font-size: 14px; line-height: 20px; }

    .mgt-footer__legal-title { margin: 4px 0 10px; font-size: 18px; line-height: 26px; }
    .mgt-footer__legal-number { margin: 0; font-size: 14px; line-height: 24px; color: var(--mgt-muted); }
    .mgt-footer__address-heading { margin: 4px 0 9px; font-size: 14px; line-height: 20px; color: var(--mgt-muted); }
    .mgt-footer__address { margin: 0; max-width: 480px; font-style: normal; font-size: 14px; line-height: 24px; }

    .mgt-footer__bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      padding: 30px 4px 44px;
      color: var(--mgt-muted);
      font-size: 14px;
      line-height: 24px;
    }
    .mgt-footer__bottom-links { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
    .mgt-footer__developer { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;  }
    .mgt-footer__developer-mark { display: inline-block; width: 24px; height: 24px; }

    

    @media (max-width: 1090px) {
      .mgt-footer__inner { padding-top: 0px; }
      .mgt-footer__nav-area { padding: 48px 0; }
      .mgt-footer__nav-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 48px; }
      .mgt-footer__details { grid-template-columns: 1fr 1.25fr; column-gap: 32px; row-gap: 32px; padding: 44px 0; }
      .mgt-footer__details > :last-child { grid-column: 1 / -1; }
      .mgt-footer__bottom-links { gap: 24px; }
    }

    @media (max-width: 620px) {
      .mgt-footer__inner { width: calc(100% - 32px); padding-top: 32px; }
      .mgt-footer__nav-area { padding: 32px 0 40px; }
      .mgt-footer__nav-grid { grid-template-columns: 1fr; row-gap: 32px; }
      .mgt-footer__heading { font-size: 18px; line-height: 28px; }
      .mgt-footer__links { margin-top: 8px; }
      .mgt-footer__links li + li { margin-top: 10px; }
      .mgt-footer__socials { margin-top: 28px; }
      .mgt-footer__details { grid-template-columns: 1fr; gap: 30px; padding: 40px 0; }
      .mgt-footer__details > :last-child { grid-column: auto; }
      .mgt-footer__desktop-break { display: none; }
      .mgt-footer__bottom { flex-direction: column; align-items: flex-start; gap: 28px; padding: 26px 0 36px; }
      .mgt-footer__bottom-links { flex-direction: column; align-items: flex-start; gap: 10px; }
      .mgt-footer__callback { width: 192px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .mgt-footer__callback { transition: none; }
    }
	.section-last{
		margin-bottom:64px!important
	}

/* Модальное окно контактов. Изолировано от остальных диалогов сайта. */
#mgt-contact-dialog {
  --contact-bg: #fff;
  --contact-text: #07172f;
  --contact-muted: #334156;
  --contact-line: #c7cfdb;
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: min(340px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  height: fit-content;
  margin: auto;
  padding: 24px 24px 32px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--contact-line);
  border-radius: 32px;
  background: var(--contact-bg);
  color: var(--contact-text);
  box-shadow: none;
  text-align: center;
  font: 400 16px/24px 'Onest', Arial, sans-serif;
  color-scheme: light;
}
#mgt-contact-dialog:not([open]) { display: none; }
#mgt-contact-dialog::backdrop {
  background: rgb(7 23 47 / 48%);
  backdrop-filter: blur(3px);
}
html[data-theme="dark"] #mgt-contact-dialog {
  --contact-bg: #07172f;
  --contact-text: #f5f7fc;
  --contact-muted: #f5f7fc;
  --contact-line: #334156;
  color-scheme: dark;
}
#mgt-contact-dialog .mgt-contact__title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--contact-muted) !important;
  font: 400 16px/20px 'Onest', Arial, sans-serif !important;
  letter-spacing: normal;
  text-transform: none;
  outline: none;
}
#mgt-contact-dialog .mgt-contact__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 0;
  height: 32px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--contact-muted);
  cursor: pointer;
  box-shadow: none;
}
#mgt-contact-dialog .mgt-contact__close svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
#mgt-contact-dialog .mgt-contact__phone {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 24px auto 0;
  padding: 0;
  color: var(--contact-text) !important;
  font: 400 20px/24px 'Onest', Arial, sans-serif !important;
  text-decoration: none !important;
  letter-spacing: normal;
  white-space: nowrap;
}
#mgt-contact-dialog .mgt-contact__callback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  max-width: 100%;
  min-height: 48px;
  margin: 16px auto 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: #0066ff;
  color: #fff;
  font: 400 16px/24px 'Onest', Arial, sans-serif !important;
  text-decoration: none !important;
  letter-spacing: normal;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .15s;
}
#mgt-contact-dialog .mgt-contact__callback:hover { background: #0057da; }
#mgt-contact-dialog .mgt-contact__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 24px 0 0;
  padding: 0;
}
#mgt-contact-dialog .mgt-contact__social {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  color: var(--contact-muted);
  text-decoration: none !important;
}
/* Область нажатия 44 × 44 px без изменения размеров иконки. */
#mgt-contact-dialog .mgt-contact__social::after {
  content: '';
  position: absolute;
  inset: -10px;
}
#mgt-contact-dialog .mgt-contact__social svg {
  display: block;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  fill: currentColor;
}
#mgt-contact-dialog .mgt-contact__social .social-ink { fill: currentColor; }
#mgt-contact-dialog .mgt-contact__social:hover,
#mgt-contact-dialog .mgt-contact__phone:hover,
#mgt-contact-dialog .mgt-contact__close:hover { color: #0066ff !important; }
#mgt-contact-dialog :is(a, button):focus-visible {
  outline: 2px solid #0066ff;
  outline-offset: 6px;
}
#mgt-contact-dialog .mgt-contact__status {
  margin: 24px 0 0;
  padding: 0;
  color: var(--contact-muted);
  font: 400 14px/20px 'Onest', Arial, sans-serif;
}
#mgt-contact-dialog .mgt-contact__status[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  #mgt-contact-dialog .mgt-contact__callback { transition: none; }
}
/* Горизонтальная прокрутка страницы не нужна; свайп-ленты живут отдельно. */
  html, body {
    max-width: 100%;
    overflow-x: clip;
  }

  /* Полосы прокрутки скрываем, сам свайп и работу кнопок оставляем. */
  :is(.mgt-tabs-scroll, .nb-table-scroll, .nb-team-grid, .docs-grid,
      .fleet-grid, .nb-project-track, .review-track, .news-track) {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  :is(.mgt-tabs-scroll, .nb-table-scroll, .nb-team-grid, .docs-grid,
      .fleet-grid, .nb-project-track, .review-track, .news-track)::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  @media (max-width: 760px) {
    /* Контейнер на телефоне имеет по 16px с обеих сторон.
       Лента доходит до краёв экрана, но первая карточка остаётся
       на исходной линии контента. В конце нет пустого правого поля. */
    main.container :is(
      .nb-team-grid,
      .docs-grid,
      .fleet-grid,
      .nb-project-track:not(.is-expanded),
      .review-track,
      .news-track
    ) {
      box-sizing: border-box;
      width: calc(100% + 32px);
      max-width: none;
      margin-left: -16px;
      margin-right: -16px;
      padding-left: 16px;
      padding-right: 0;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scroll-padding-left: 16px;
      scrollbar-width: none;
    }

    /* Команда: одна свайп-лента вместо двух карточек в строке. */
    #team .nb-team-grid {
      display: flex;
      flex-wrap: nowrap;
      grid-template-columns: none;
      scroll-snap-type: x mandatory;
    }
    #team .nb-team-grid > article {
      flex: 0 0 min(78vw, 320px);
      min-width: 0;
      scroll-snap-align: start;
    }

    /* Раскрытый список работ остаётся обычной сеткой, без свайпа. */
    #projects .nb-project-track.is-expanded {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      overflow-x: visible;
    }
  }
  .mt4{margin-top:4px
  }
    .mt8{margin-top:8px
  }
    .mt12{margin-top:12px
  }
    .mt16{margin-top:16px
  }
    .mt20{margin-top:20px
  }
    .mt24{margin-top:24px
  }
   .mt28{margin-top:28px
  }
    .mt32{margin-top:32px
  }
  
    .mb4{margin-bottom:4px
  }
    .mb8{margin-bottom:8px
  }
    .mb12{margin-bottom:12px
  }
    .mb16{margin-bottom:16px
  }
    .mb20{margin-bottom:20px
  }
    .mb24{margin-bottom:24px
  }
   .mb8{margin-bottom:28px
  }
    .mb32{margin-bottom:32px
  }
  /* Ползунок «Установка под ключ» — тот же вид, что у ползунков заправки. */
  #installation .mgt-install-range {
    margin-top: 44px;
    margin-bottom: 28px;
    margin-left: 0;
  }
  #installation .mgt-install-range .range-shell {
    margin-top: 0;
    --progress: 2.02%;
  }
  #installation .mgt-install-range .range-shell output {
    left: clamp(34px, var(--progress), calc(100% - 34px));
  }
  #installation .mgt-install-range .range-shell input[type="range"] {
    display: block;
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 10px;
    width: 100%;
    height: 4px;
    margin: 0;
    border: 0;
    border-radius: 2px;
    background: linear-gradient(to right,
      var(--primary) 0 var(--progress), #c7cfdb var(--progress) 100%);
    cursor: pointer;
  }
  #installation .mgt-install-range .range-shell input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: var(--navy);
  }
  #installation .mgt-install-range .range-shell input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: var(--navy);
  }
  html[data-theme="dark"] #installation .mgt-install-range .range-shell input[type="range"] {
    background: linear-gradient(to right,
      #0066ff 0 var(--progress), #34455d var(--progress) 100%);
  }
  html[data-theme="dark"] #installation .mgt-install-range .range-shell input[type="range"]::-webkit-slider-thumb {
    background: #f5f7fc;
  }
  html[data-theme="dark"] #installation .mgt-install-range .range-shell input[type="range"]::-moz-range-thumb {
    background: #f5f7fc;
  }
  @media (max-width: 760px) {
    #installation .mgt-install-range { margin-left: 0; }

  }

  /* Тёмная тема: убираем серое focus-outline у полей ввода.
     Подсветку фона активного поля и фокус ползунков/кнопок не меняем. */
  html[data-theme="dark"] :is(
    input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ):is(:focus, :focus-visible) {
    outline: none;
    border-color: transparent;
    box-shadow: none;
  }
  html[data-theme="dark"] .mgt-form-field:focus-within {
    outline: none;
    border-color: transparent;
    box-shadow: none;
  }

  /* Свой список назначения. Если JS отключён, остаётся нативный select. */
  .mgt-purpose-field {
    position: relative;
    overflow: visible;
  }
  .mgt-purpose-trigger {
    display: none;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    min-height: 52px;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    cursor: pointer;
  }
  .mgt-purpose-field.is-ready .mgt-purpose-trigger { display: flex; }
  .mgt-purpose-field.is-ready #purpose { display: none !important; }
  .mgt-purpose-trigger:focus-visible { outline: 0; }
  html[data-theme="dark"] .mgt-purpose-trigger:focus-visible { outline: 0; }
  .mgt-purpose-arrow {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    transition: transform .18s ease;
  }
  .mgt-purpose-trigger[aria-expanded="true"] .mgt-purpose-arrow {
    transform: rotate(180deg);
  }
  .mgt-purpose-options {
    position: absolute;
    z-index: 50;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--input);
    color: var(--text);
    box-shadow: 0 12px 24px rgba(7, 23, 47, .12);
  }
  .mgt-purpose-options[hidden] { display: none !important; }
  .mgt-purpose-option {
    position: relative;
    padding: 12px 40px 12px 42px;
    border-radius: 8px;
    color: inherit;
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
  }
  .mgt-purpose-option:hover,
  .mgt-purpose-option.is-active,
  .mgt-purpose-option[aria-selected="true"] {
    background: #EDF4F8;
  }
  .mgt-purpose-option[aria-selected="true"]::after {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 16px;
    color: #0066FF;
  }
  html[data-theme="dark"] .mgt-purpose-options {
    border: 0;
    background: #07172F;
    color: #F5F7FC;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .26);
  }
  html[data-theme="dark"] .mgt-purpose-option:hover,
  html[data-theme="dark"] .mgt-purpose-option.is-active,
  html[data-theme="dark"] .mgt-purpose-option[aria-selected="true"] {
    background: #10243F;
  }

  /* Установка: та же двухколоночная сетка, что у калькулятора заправки. */
  #installation.mgt-install-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    gap: 48px;
    align-items: start;
  }
  #installation .mgt-install-controls,
  #installation .mgt-install-order {
    width: 100%;
    min-width: 0;
  }
  #installation .mgt-install-controls .calc-title {
    margin-bottom: 28px;
  }
  #installation .mgt-install-order {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  #installation .mgt-install-order h3 {
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 28px;
  }
  #installation .mgt-install-order > p {
    margin: 0 0 24px;
  }
  #installation .mgt-install-order .button.primary,
  #installation .mgt-install-order .secondary {
    width: 100%;
  }
  #installation .mgt-install-order .secondary {
    margin-top: 16px;
  }
  @media (max-width: 1250px) and (min-width: 761px) {
    #installation.mgt-install-layout {
      grid-template-columns: minmax(0, 1fr) 289px;
      gap: 45px;
    }
  }
  @media (max-width: 760px) {
    #installation.mgt-install-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 38px;
    }
	.mgt-header-breadcrumbs{display:none!important
	}
  }

  /* Фотографии авторов в карточках отзывов. Все стили новой детали — в HTML. */
  #gas-reviews .review-person .review-avatar {
    display: block;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    background: var(--ds-soft, #edf4f8);
  }

  /* На десктопе: 3 карточки в окне, остальные листаются без видимой полосы скролла. */
  @media (min-width: 761px) {
    #gas-reviews .review-track {
      --review-gap: 24px;
      display: flex;
      gap: var(--review-gap);
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      overscroll-behavior-x: contain;
      cursor: grab;
    }
    #gas-reviews .review-track::-webkit-scrollbar { display: none; }
    #gas-reviews .review-track .review-card {
      box-sizing: border-box;
      flex: 0 0 calc((100% - 2 * var(--review-gap)) / 3);
      width: calc((100% - 2 * var(--review-gap)) / 3);
      min-width: 0;
      max-width: none;
      scroll-snap-align: start;
    }
    #gas-reviews .review-track.is-dragging {
      cursor: grabbing;
      scroll-snap-type: none;
      scroll-behavior: auto;
      user-select: none;
    }
    #gas-reviews .review-track.is-dragging * { user-select: none; }
  }
  html[data-theme="dark"] .mgt-footer__links li a {
  color:var(--mgt-muted)
}
html[data-theme="dark"] .mgt-footer__bottom-links a {
  color:var(--mgt-muted)
}
html[data-theme="dark"] .faq-item summary:after {
    color: var(--mgt-muted)
}
.page-content-section, .page-title-section, .mgt-region-index, .mgt-region-page, .mgt-sitemap-page, .mgt-news-index, .mgt-news-post  {
	margin-top:48px
}
.mgt-header .mgt-header-breadcrumbs{
	font-size:14px
}

/* Статусы отправки заявок и поля общей модалки; стили внутри страницы. */
  .mgt-tg-status { margin: 10px 0 0; font-size: 14px; line-height: 20px; }
  .mgt-tg-status[data-state="success"] { color: #15803d; }
  .mgt-tg-status[data-state="error"] { color: #c62828; }
  html[data-theme="dark"] .mgt-tg-status[data-state="success"] { color: #7ce4aa; }
  html[data-theme="dark"] .mgt-tg-status[data-state="error"] { color: #ffa5a5; }
  #mgt-request-form { display: grid; gap: 16px; }
  #mgt-request-form .mgt-form-field { width: 100%; }
  #mgt-request-form .mgt-form-field input { width: 100%; min-width: 0; }
  #mgt-request-form .mgt-request-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  #mgt-request-form .mgt-request-actions .button { flex: 1 1 190px; }
  #mgt-request-form .mgt-request-actions #copy { flex: 0 1 auto; }
  #mgt-request-form .pixel-consent { margin: 0; }
  
  /* MGT_HEADER_BREADCRUMBS_V1: same position as the original caption. */
.mgt-header .mgt-header-breadcrumbs{display:none;align-items:center;gap:8px;max-width:100%;overflow:hidden;white-space:nowrap;line-height:24px}
.mgt-header .mgt-header-breadcrumbs a{color:inherit;text-decoration:underline;text-underline-offset:3px;flex:0 0 auto}
.mgt-header .mgt-header-breadcrumbs a:hover{color:var(--primary,#005bff)}
.mgt-header .mgt-header-breadcrumbs .mgt-breadcrumb-separator{opacity:.6;flex:0 0 auto}
.mgt-header .mgt-header-breadcrumbs .mgt-breadcrumb-current{overflow:hidden;text-overflow:ellipsis;min-width:0}
html[data-theme="dark"] .mgt-header .mgt-header-breadcrumbs{color:#aabbce}
@media(max-width:760px){
 .page-content-section, .page-title-section, .mgt-region-index, .mgt-region-page, .mgt-sitemap-page, .mgt-news-index, .mgt-news-post  {
    margin-top: 0;
}
}
.panel2 {

 min-width: 0;
    padding: 28px;
    margin: 0;
    border: 1px solid #E8E8E8;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(40, 83, 132, .045);
    color: #334156;
}
.w760{max-width:760px
}
.w1050{max-width:1050px
}