.hero-article{
  display: none !important;
}
.angar-intro{
   --angar-blue: #0d4378;
   --angar-blue-dark: #0d4378;
   --angar-orange: #ff7b01;
   --angar-orange-dark: #ff7b01;
   --angar-text: #252a35;
   --angar-muted: #737986;
   --angar-border: #e4e7ed;
   --angar-light: #f6f7f9;
   margin: 80px 0px 50px;
}

.angar-intro-grid {

   position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1fr) 465px;
   gap: 55px;
   max-width: 1400px;
   margin: 0 auto 20px;
   padding: 55px 20px 0px;
   overflow: hidden;
   border: 1px solid var(--angar-border);
   border-radius: 26px;
   background: linear-gradient(135deg, #ffffff 0%, #ffffff 65%, #f7f8fb 100%);
   box-shadow: 0 8px 25px rgba(20, 31, 62, .04), 0 30px 70px rgba(20, 31, 62, .05);
   box-sizing: border-box;
}
.angar-intro-grid*,
.angar-intro-grid *::before,
.angar-intro-grid *::after {
   box-sizing: border-box;
}


/* ==========================================================
  ЛЕВАЯ ЧАСТЬ
  ========================================================== */

.angar-intro__content {
   position: relative;
   z-index: 2;

   min-width: 0;
}


/* Метка над H1 */

.angar-intro__badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;

   margin-bottom: 18px;
   padding: 8px 13px;

   color: var(--angar-orange-dark);
   border: 1px solid #f1c9b6;
   border-radius: 100px;

   background: #fff5ef;

   font-size: 12px;
   font-weight: 800;
   line-height: 1.2;
   letter-spacing: .07em;
   text-transform: uppercase;
}

.angar-intro__badge::before {
   content: "";

   width: 7px;
   height: 7px;

   border-radius: 50%;
   background: var(--angar-orange);
}


/* H1 */

.angar-intro h1 {
   max-width: 720px;

   margin: 0 0 20px;

   color: var(--angar-blue-dark);

   font-family: Arial, Helvetica, sans-serif;
   font-size: clamp(36px, 4vw, 40px);
   font-weight: 800;
   line-height: 1.07;
   letter-spacing: -0.035em;
}


/* Вводный текст */

.angar-intro__lead {
   max-width: 700px;

   margin: 0 0 30px;

   color: var(--angar-muted);

   font-size: 17px;
   line-height: 1.65;
}


/* ==========================================================
  ОСНОВНЫЕ ПАРАМЕТРЫ
  ========================================================== */

.angar-intro__specs {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 9px;

   margin-bottom: 16px;
}

.angar-intro__spec {
   min-width: 0;
   padding: 16px 15px;

   border: 1px solid var(--angar-border);
   border-radius: 12px;

   background: #fff;
}

.angar-intro__spec span {
   display: block;

   margin-bottom: 4px;

   color: var(--angar-muted);

   font-size: 11px;
   font-weight: 600;
   line-height: 1.3;
}

.angar-intro__spec strong {
   display: block;

   color: var(--angar-blue);

   font-size: 18px;
   font-weight: 800;
   line-height: 1.25;
}


/* ==========================================================
  СОСТАВ МЕТАЛЛОКАРКАСА
  ========================================================== */

.angar-intro__construction {
   overflow: hidden;

   margin-bottom: 16px;

   border: 1px solid var(--angar-border);
   border-radius: 15px;

   background: var(--angar-light);
}

.angar-intro__construction-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;

   padding: 13px 17px;

   border-bottom: 1px solid var(--angar-border);
}

.angar-intro__construction-title > span {
   color: var(--angar-blue);

   font-size: 13px;
   font-weight: 800;
}

.angar-intro__construction-title small {
   color: var(--angar-muted);

   font-size: 11px;
}

.angar-intro__construction-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
}

.angar-intro__construction-item {
   position: relative;

   min-width: 0;
   padding: 15px 12px 16px;

   text-align: center;
}

.angar-intro__construction-item:not(:last-child) {
   border-right: 1px solid var(--angar-border);
}

.angar-intro__construction-item strong {
   display: block;

   color: var(--angar-orange);

   font-size: 23px;
   font-weight: 800;
   line-height: 1.15;
}

.angar-intro__construction-item span {
   display: block;
   margin-bottom: 3px;
   color: var(--angar-text);

   font-size: 11px;
   font-weight: 600;
   line-height: 1.3;
}


/* ==========================================================
  СТОИМОСТЬ
  ========================================================== */

.angar-intro__price {
   overflow: hidden;

   border-radius: 15px;

   color: #fff;
   background: var(--angar-blue);
}

.angar-intro__price-main {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 25px;

   padding: 20px 22px;
}

.angar-intro__price-main > span {


   font-size: 30px;
   font-weight: 600;
   line-height: 1.4;
}

.angar-intro__price-main > strong {
   flex-shrink: 0;

   color: #fff;

   font-size: clamp(23px, 2.3vw, 30px);
   font-weight: 800;
   line-height: 1.1;
   white-space: nowrap;
}

.angar-intro__price-note {
   padding: 8px 22px;

   border-top: 1px solid rgba(255, 255, 255, .1);

   color: rgba(255, 255, 255, .48);
   background: rgba(0, 0, 0, .08);

   font-size: 16px;
}


/* ==========================================================
  ПРАВАЯ ЧАСТЬ — СХЕМА
  ========================================================== */

.angar-intro__visual {
   position: relative;
   z-index: 2;

   width: 100%;
   max-width: 465px;
   margin: 0 auto;
}


/* Оранжевое декоративное пятно */

.angar-intro__visual::before {
   content: "";

   position: absolute;
   z-index: -1;

   top: -35px;
   right: -45px;

   width: 230px;
   height: 230px;

   border-radius: 50%;

   background: rgba(233, 91, 24, .07);
}


/* Синяя декоративная окружность */

.angar-intro__visual::after {
   content: "";

   position: absolute;
   z-index: -1;

   left: -30px;
   bottom: 35px;

   width: 150px;
   height: 150px;

   border: 28px solid rgba(23, 36, 79, .035);
   border-radius: 50%;
}


.angar-intro__image-wrap {
   margin-top: 50px;
   position: relative;

   overflow: hidden;

   width: 100%;

   border: 1px solid var(--angar-border);
   border-radius: 20px;

   background: #fff;

   box-shadow:
       0 15px 40px rgba(20, 31, 62, .08);
}

.angar-intro__image {
   display: block;
max-height: 364px;
   width: 100%;
   max-width: 465px;

   height: auto;

   margin: 0 auto;

   object-fit: contain;
}


/* Подпись под схемой */

.angar-intro__visual-caption {
   position: relative;

   display: flex;
   align-items: center;
   gap: 12px;

   width: calc(100% - 36px);
   margin: -24px auto 0;
   padding: 14px 17px;

   border: 1px solid var(--angar-border);
   border-radius: 13px;

   background: rgba(255, 255, 255, .96);

   box-shadow:
       0 10px 30px rgba(20, 31, 62, .10);
}

.angar-intro__visual-icon {
   display: flex;
   flex: 0 0 37px;
   align-items: center;
   justify-content: center;

   width: 37px;
   height: 37px;

   color: #fff;
   border-radius: 9px;

   background: var(--angar-orange);

   font-size: 17px;
}

.angar-intro__visual-caption div {
   min-width: 0;
}

.angar-intro__visual-caption strong {
   display: block;

   margin-bottom: 2px;

   color: var(--angar-blue);

   font-size: 13px;
   line-height: 1.3;
}

.angar-intro__visual-caption div > span {
   display: block;

   color: var(--angar-muted);

   font-size: 10px;
   line-height: 1.3;
}




@media (hover: hover) {

   .angar-intro__spec {
       transition:
           transform .2s ease,
           border-color .2s ease,
           box-shadow .2s ease;
   }

   .angar-intro__spec:hover {
       transform: translateY(-3px);

       border-color: #efc5b1;

       box-shadow:
           0 8px 22px rgba(20, 31, 62, .06);
   }

}




@media (max-width: 1180px) {

   .angar-intro-grid {
       grid-template-columns: minmax(0, 1fr) 390px;
       gap: 38px;

       padding: 45px 40px;
   }

   .angar-intro h1 {
       font-size: 42px;
   }

   .angar-intro__specs {
       grid-template-columns: repeat(2, 1fr);
   }

   .angar-intro__construction-grid {
       grid-template-columns: repeat(3, 1fr);
   }

   .angar-intro__construction-item {
       border-bottom: 1px solid var(--angar-border);
   }

   .angar-intro__construction-item:nth-child(3) {
       border-right: 0;
   }

   .angar-intro__construction-item:nth-child(4),
   .angar-intro__construction-item:nth-child(5) {
       border-bottom: 0;
   }

}




@media (max-width: 900px) {

   .angar-intro-grid {
       grid-template-columns: 1fr;
       gap: 40px;

       padding: 42px 35px;
   }

   .angar-intro__content {
       order: 1;
   }

   .angar-intro__visual {
       order: 2;

       max-width: 465px;
   }

   .angar-intro h1 {
       max-width: 760px;

       font-size: clamp(36px, 6vw, 48px);
   }

   .angar-intro__lead {
       max-width: 760px;
   }

   .angar-intro__specs {
       grid-template-columns: repeat(4, 1fr);
   }

   .angar-intro__construction-grid {
       grid-template-columns: repeat(5, 1fr);
   }

   .angar-intro__construction-item {
       border-bottom: 0;
   }

   .angar-intro__construction-item:nth-child(3) {
       border-right: 1px solid var(--angar-border);
   }

}




@media (max-width: 650px) {

  .angar-intro__content {
    padding: 28px 18px 30px;
         background: #0d4378;
         border-radius: 14px;
        
        }

   .angar-intro-grid {
       gap: 30px;

       margin-bottom: 35px;
       padding: 0px;

       border-radius: 18px;

       box-shadow:
           0 8px 30px rgba(20, 31, 62, .05);
   }


   /* Заголовок */

   .angar-intro__badge {
       margin-bottom: 14px;

       font-size: 10px;
   }

   .angar-intro h1 {
       margin-bottom: 16px;
       color: #fff;
       font-size: 26px;
       line-height: 1.09;
   }

   .angar-intro__lead {
       margin-bottom: 23px;

       font-size: 15px;
       line-height: 1.6;
   }


   /* Характеристики */

   .angar-intro__specs {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 7px;

       margin-bottom: 12px;
   }

   .angar-intro__spec {
       padding: 14px 12px;

       border-radius: 10px;
   }

   .angar-intro__spec span {
       font-size: 10px;
   }

   .angar-intro__spec strong {
       font-size: 17px;
   }


   /* Металлокаркас */

   .angar-intro__construction {
       margin-bottom: 12px;

       border-radius: 12px;
   }

   .angar-intro__construction-title {
       display: block;

       padding: 13px 14px;
   }

   .angar-intro__construction-title > span {
       display: block;
       margin-bottom: 2px;
   }

   .angar-intro__construction-title small {
       display: block;
   }

   .angar-intro__construction-grid {
       grid-template-columns: repeat(2, 1fr);
   }

   .angar-intro__construction-item {
       padding: 14px 10px;

       border-right: 1px solid var(--angar-border);
       border-bottom: 1px solid var(--angar-border);
   }

   .angar-intro__construction-item:nth-child(2n) {
       border-right: 0;
   }

   .angar-intro__construction-item:nth-child(3) {
       border-right: 1px solid var(--angar-border);
   }

   .angar-intro__construction-item:nth-child(4) {
       border-right: 0;
   }

   .angar-intro__construction-item:nth-child(4) {
       border-bottom: 1px solid var(--angar-border);
   }

   .angar-intro__construction-item:nth-child(5) {
       grid-column: 1 / -1;

       border-right: 0;
       border-bottom: 0;
   }

   .angar-intro__construction-item strong {
       font-size: 21px;
   }


   /* Цена */

   .angar-intro__price {
       border-radius: 12px;
   }

   .angar-intro__price-main {
       display: block;

       padding: 18px;
   }

   .angar-intro__price-main > span {
       display: block;

       max-width: none;
       margin-bottom: 8px;

       font-size: 11px;
   }

   .angar-intro__price-main > strong {
       display: block;

       font-size: 25px;
       white-space: normal;
   }

   .angar-intro__price-note {
       padding: 8px 18px;

       font-size: 9px;
   }


   /* Картинка */

   .angar-intro__visual {
       width: 100%;
       max-width: 465px;
   }

   .angar-intro__image-wrap {
   margin-top: 0px;
       border-radius: 14px;
   }

   .angar-intro__visual-caption {
       width: calc(100% - 20px);
       margin-top: -16px;

       padding: 12px 13px;

       border-radius: 11px;
   }

   .angar-intro__visual::before {
       top: -20px;
       right: -20px;

       width: 150px;
       height: 150px;
   }

}


/* ==========================================================
  ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ
  до 390px
  ========================================================== */

@media (max-width: 390px) {

   .angar-intro-grid {
       padding-right: 14px;
       padding-left: 14px;
   }

   .angar-intro h1 {
       font-size: 28px;
   }

   .angar-intro__spec strong {
       font-size: 16px;
   }

   .angar-intro__price-main > strong {
       font-size: 22px;
   }

}



@media (prefers-reduced-motion: reduce) {

   .angar-intro *,
   .angar-intro *::before,
   .angar-intro *::after {
       transition: none !important;
   }

}

.angar-calculation {
   --accent: #ff7b01;
   --accent-dark: #ff7b01;
   --dark: #0d4378;
   --dark-2: #0d4378;
   --text: #0d4378;
   --muted: #697080;
   --line: #194d8840;
   --gray-bg: #f5f6f8;
   --white: #fff;

   max-width: 1400px;
   margin: 0 auto;
   padding: 0 24px 70px;

   color: var(--text);
   font-family: Arial, Helvetica, sans-serif;
   font-size: 17px;
   line-height: 1.7;
   box-sizing: border-box;
}

.angar-calculation *,
.angar-calculation *::before,
.angar-calculation *::after {
   box-sizing: border-box;
}

.angar-calculation h1,
.angar-calculation h2,
.angar-calculation h3,
.angar-calculation p {
   margin-top: 0;
}

.angar-calculation h2 {
   margin-bottom: 22px;
   color: var(--dark);
   font-size: clamp(27px, 3vw, 40px);
   line-height: 1.15;
   letter-spacing: -0.02em;
}

.angar-calculation h3 {
   color: var(--dark);
}

.angar-calculation p {
   margin-bottom: 20px;
}

.angar-calculation a {
   transition: .2s ease;
}


/* =========================================================
  ХЛЕБНЫЕ КРОШКИ
  ========================================================= */

.breadcrumbs {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;

   padding: 20px 0;

   color: var(--muted);
   font-size: 14px;
}

.breadcrumbs a {
   color: var(--muted);
   text-decoration: none;
}

.breadcrumbs a:hover {
   color: var(--accent);
}


/* =========================================================
  HERO
  ========================================================= */

.article-hero {
   position: relative;
   overflow: hidden;

   margin-bottom: 40px;
   padding: 70px 65px;

   border-radius: 26px;

   color: #fff;
   background:
       radial-gradient(
           circle at 90% 15%,
           rgba(233, 91, 24, .32),
           transparent 35%
       ),
       linear-gradient(
           135deg,
           var(--dark-2),
           var(--dark)
       );
}

.article-hero::before {
   content: "";
   position: absolute;
   right: -100px;
   top: -160px;

   width: 420px;
   height: 420px;

   border: 1px solid rgba(255,255,255,.08);
   border-radius: 50%;
}

.article-hero::after {
   content: "";
   position: absolute;
   right: 80px;
   bottom: -230px;

   width: 430px;
   height: 430px;

   border: 70px solid rgba(255,255,255,.025);
   border-radius: 50%;
}

.article-hero__content {
   position: relative;
   z-index: 2;
}

.article-label,
.section-kicker {
   display: inline-block;

   margin-bottom: 14px;

   color: var(--accent);
   font-size: 13px;
   font-weight: 800;
   line-height: 1.3;
   letter-spacing: .09em;
   text-transform: uppercase;
}

.article-label {
   padding: 8px 13px;

   color: #fff;
   border: 1px solid rgba(255,255,255,.2);
   border-radius: 30px;
   background: rgba(255,255,255,.08);
}

.article-hero h1 {
   max-width: 920px;
   margin-bottom: 22px;

   color: #fff;
   font-size: clamp(36px, 5vw, 62px);
   line-height: 1.03;
   letter-spacing: -0.04em;
}

.article-lead {
   max-width: 850px;
   margin-bottom: 38px !important;

   color: rgba(255,255,255,.82);
   font-size: 20px;
   line-height: 1.6;
}

.article-hero__facts {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
}

.hero-fact {
   padding: 20px;

   border: 1px solid rgba(255,255,255,.13);
   border-radius: 15px;

   background: rgba(255,255,255,.07);
   backdrop-filter: blur(8px);
}

.hero-fact strong {
   display: block;
   margin-bottom: 3px;

   color: #fff;
   font-size: 23px;
   line-height: 1.2;
}

.hero-fact span {
   color: rgba(255,255,255,.62);
   font-size: 14px;
}


/* =========================================================
  КОРОТКИЙ ОТВЕТ
  ========================================================= */

.article-summary {
   position: relative;

   margin: 0 0 60px;
   padding: 38px 42px;

   border: 1px solid #f0d7ca;
   border-radius: 20px;

   background: #fff9f5;
}

.article-summary::before {
   content: "";
   position: absolute;
   left: 0;
   top: 30px;
   bottom: 30px;

   width: 5px;

   border-radius: 0 10px 10px 0;
   background: var(--accent);
}

.article-summary h2 {
   font-size: 30px;
}

.article-summary strong {
   color: var(--accent-dark);
}

.article-note {
   margin: 25px 0 0 !important;
   padding-top: 20px;

   border-top: 1px solid #eadbd2;

   color: var(--muted);
   font-size: 14px;
}


/* =========================================================
  ОБЩИЕ СЕКЦИИ
  ========================================================= */

.article-section {
   margin: 0 0 60px;
   padding: 55px;

   border: 1px solid var(--line);
   border-radius: 24px;

   background: #fff;
}

.article-section--gray {
   background: var(--gray-bg);
}

.section-heading {
   display: flex;
   align-items: flex-start;
   gap: 22px;

   margin-bottom: 30px;
}

.section-heading h2 {
   margin-bottom: 0;
}

.section-heading .section-kicker {
   margin-bottom: 8px;
}

.section-number {
   display: flex;
   flex: 0 0 55px;
   align-items: center;
   justify-content: center;

   width: 55px;
   height: 55px;

   color: #fff;
   border-radius: 14px;

   background: var(--accent);

   font-size: 16px;
   font-weight: 800;
}


/* =========================================================
  ХАРАКТЕРИСТИКИ
  ========================================================= */

.spec-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 15px;

   margin-top: 35px;
}

.spec-card {
   position: relative;
   overflow: hidden;

   min-height: 120px;
   padding: 25px;

   border: 1px solid var(--line);
   border-radius: 16px;

   background: #fff;
}

.spec-card::after {
   content: "";
   position: absolute;
   right: -25px;
   bottom: -25px;

   width: 80px;
   height: 80px;

   border-radius: 50%;
   background: rgba(233,91,24,.06);
}

.spec-card span {
   display: block;
   margin-bottom: 7px;

   color: var(--muted);
   font-size: 14px;
}

.spec-card strong {
   color: var(--dark);
   font-size: 27px;
   line-height: 1.2;
}


/* =========================================================
  КОНСТРУКЦИЯ
  ========================================================= */

.construction-list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 15px;

   margin-top: 35px;
}

.construction-item {
   display: flex;
   align-items: flex-start;
   gap: 20px;

   padding: 25px;

   border: 1px solid var(--line);
   border-radius: 17px;

   background: #fff;
}

.construction-item__number {
   display: flex;
   flex: 0 0 64px;
   align-items: center;
   justify-content: center;

   min-height: 64px;
   padding: 10px;

   color: var(--accent);
   border-radius: 14px;
   background: #fff1e9;

   font-size: 22px;
   font-weight: 800;
}

.construction-item h3 {
   margin: 2px 0 7px;
   font-size: 19px;
}

.construction-item p {
   margin: 0;
   color: var(--muted);
   font-size: 15px;
   line-height: 1.55;
}


/* =========================================================
  СЭНДВИЧ-ПАНЕЛИ
  ========================================================= */

.panel-comparison {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;

   margin-top: 35px;
}

.panel-card {
   padding: 32px;

   border: 1px solid var(--line);
   border-radius: 20px;

   background: #fff;
   box-shadow: 0 15px 40px rgba(20,30,60,.06);
}

.panel-card__type {
   display: inline-block;

   margin-bottom: 18px;
   padding: 6px 12px;

   color: var(--accent);
   border-radius: 30px;
   background: #fff0e8;

   font-size: 13px;
   font-weight: 800;
   text-transform: uppercase;
}

.panel-card h3 {
   margin-bottom: 20px;
   font-size: 24px;
}

.panel-card ul {
   margin: 0;
   padding: 0;

   list-style: none;
}

.panel-card li {
   position: relative;

   padding: 11px 0 11px 24px;

   border-bottom: 1px solid var(--line);
}

.panel-card li:last-child {
   border-bottom: 0;
}

.panel-card li::before {
   content: "•";
   position: absolute;
   left: 4px;

   color: var(--accent);
   font-weight: bold;
}


/* =========================================================
  ЦЕНА
  ========================================================= */

.sm-section {
   border-color: #d9deea;
}

.sm-table {
   overflow: hidden;

   margin-top: 35px;

   border: 1px solid var(--line);
   border-radius: 18px;
}

.sm-section .price-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 30px;

   padding: 22px 25px;

   border-bottom: 1px solid var(--line);
}

.sm-section .price-row:last-child {
   border-bottom: 0;
}

.sm-section .price-row > div > span {
   display: block;
   margin-bottom: 2px;

   color: var(--muted);
   font-size: 13px;
}

.sm-section .price-row > div > strong {
   color: var(--dark);
   font-size: 16px;
}

.sm-section .price-row > b {
   color: var(--dark);
   font-size: 20px;
   white-space: nowrap;
}

.price-row--main {
   padding: 30px 25px;

   color: #fff;
   background: var(--dark);
}

.price-row--main > div > span {
   color: rgba(255,255,255,.55);
}

.price-row--main > div > strong {
   color: #fff;
   font-size: 18px;
}

.price-row--main > b {
   color: #fff;
   font-size: 27px;
}

.important-box {
   margin-top: 25px;
   padding: 25px 28px;

   border-left: 5px solid var(--accent);
   border-radius: 8px 16px 16px 8px;

   background: #fff5ef;
}

.important-box strong {
   display: block;
   margin-bottom: 6px;

   color: var(--accent-dark);
   font-size: 18px;
}

.important-box p {
   margin: 0;
}


/* =========================================================
  ЧТО ВХОДИТ
  ========================================================= */

.included-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;

   margin-top: 30px;
}

.included-item {
   display: flex;
   gap: 18px;

   padding: 24px;

   border: 1px solid var(--line);
   border-radius: 16px;
}

.included-item > span {
   display: flex;
   flex: 0 0 38px;
   align-items: center;
   justify-content: center;

   width: 38px;
   height: 38px;

   color: #fff;
   border-radius: 50%;
   background: var(--accent);

   font-size: 17px;
   font-weight: bold;
}

.included-item h3 {
   margin: 2px 0 5px;
   font-size: 18px;
}

.included-item p {
   margin: 0;

   color: var(--muted);
   font-size: 14px;
   line-height: 1.55;
}


/* =========================================================
  АКЦЕНТНЫЙ БЛОК
  ========================================================= */

.article-section--accent {
   overflow: hidden;
   position: relative;

   color: rgba(255,255,255,.82);
   border: 0;

   background:
       radial-gradient(
           circle at 100% 0,
           rgba(233,91,24,.3),
           transparent 35%
       ),
       var(--dark);
}

.article-section--accent h2,
.article-section--accent h3 {
   color: #fff;
}

.article-section--accent .section-kicker {
   color: #ff9b6b;
}

.formula {
   display: flex;
   align-items: stretch;
   gap: 9px;

   margin: 35px 0;
}

.formula span,
.formula strong {
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;

   min-height: 80px;
   padding: 14px;

   border: 1px solid rgba(255,255,255,.12);
   border-radius: 12px;

   background: rgba(255,255,255,.07);

   color: #fff;
   text-align: center;
   font-size: 14px;
}

.formula strong {
   background: var(--accent);
   border-color: var(--accent);
}

.formula b {
   display: flex;
   align-items: center;

   color: #ff9b6b;
   font-size: 20px;
}

.factors {
   margin-top: 35px;
   padding: 28px;

   border-radius: 16px;
   background: rgba(255,255,255,.06);
}

.factors h3 {
   margin-bottom: 15px;
}

.factors ul {
   columns: 2;
   column-gap: 50px;

   margin: 0;
   padding-left: 20px;
}

.factors li {
   margin-bottom: 8px;
   break-inside: avoid;
}


/* =========================================================
  РАСЧЁТ ПЛОЩАДИ
  ========================================================= */

.calculation-example {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;

   margin: 30px 0;
   padding: 27px 30px;

   border: 1px solid #f0d4c5;
   border-radius: 16px;

   background: #fff8f4;
}

.calculation-example span {
   color: var(--muted);
}

.calculation-example strong {
   color: var(--accent-dark);
   font-size: 27px;
}


/* =========================================================
  ЭТАПЫ
  ========================================================= */

.steps {
   margin: 35px 0 0;
   padding: 0;

   list-style: none;
}

.steps li {
   position: relative;

   display: grid;
   grid-template-columns: 65px 1fr;
   gap: 22px;

   padding-bottom: 30px;
}

.steps li:not(:last-child)::before {
   content: "";
   position: absolute;
   left: 31px;
   top: 60px;
   bottom: 5px;

   width: 2px;

   background: #d9dde6;
}

.steps li > span {
   position: relative;
   z-index: 2;

   display: flex;
   align-items: center;
   justify-content: center;

   width: 64px;
   height: 64px;

   color: var(--accent);
   border: 2px solid #f3c5ae;
   border-radius: 50%;

   background: var(--gray-bg);

   font-size: 15px;
   font-weight: 800;
}

.steps h3 {
   margin: 4px 0 5px;
   font-size: 20px;
}

.steps p {
   margin: 0;
   color: var(--muted);
}


/* =========================================================
  CTA
  ========================================================= */

.article-cta {
   position: relative;
   overflow: hidden;

   margin-bottom: 60px;
   padding: 60px;

   border-radius: 25px;

   color: #fff;
   background: var(--accent);
}

.article-cta::after {
   content: "";
   position: absolute;
   right: -100px;
   top: -140px;

   width: 400px;
   height: 400px;

   border: 70px solid rgba(255,255,255,.08);
   border-radius: 50%;
}

.article-cta__content {
   position: relative;
   z-index: 2;

   max-width: 850px;
}

.article-cta .section-kicker {
   color: #fff;
   opacity: .75;
}

.article-cta h2 {
   max-width: 800px;
   margin-bottom: 20px;

   color: #fff;
   font-size: clamp(32px, 4vw, 48px);
}

.article-cta p {
   max-width: 750px;

   color: rgba(255,255,255,.85);
   font-size: 18px;
}

.article-cta__buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;

   margin-top: 30px;
}

.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;

   min-height: 52px;
   padding: 13px 25px;

   border-radius: 10px;

   font-weight: 700;
   line-height: 1.2;
   text-decoration: none;
}

.button--primary {
   color: var(--dark);
   background: #fff;
}

.button--primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.button--outline {
   color: #fff;
   border: 1px solid rgba(255,255,255,.5);
}

.button--outline:hover {
   border-color: #fff;
   background: rgba(255,255,255,.1);
}


/* =========================================================
  FAQ
  ========================================================= */

.faq details {
   overflow: hidden;

   margin-bottom: 10px;

   border: 1px solid var(--line);
   border-radius: 13px;

   background: #fff;
}

.faq summary {
   position: relative;

   padding: 20px 55px 20px 22px;

   color: var(--dark);

   cursor: pointer;
   list-style: none;

   font-weight: 700;
}

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

.faq summary::after {
   content: "+";
   position: absolute;
   right: 20px;
   top: 50%;

   transform: translateY(-50%);

   color: var(--accent);
   font-size: 28px;
   font-weight: 400;
}

.faq details[open] summary::after {
   content: "−";
}

.faq details p {
   margin: 0;
   padding: 0 22px 22px;

   color: var(--muted);
}


/* =========================================================
  ДИСКЛЕЙМЕР
  ========================================================= */

.article-disclaimer {
   padding: 25px 30px;

   border-radius: 14px;
   background: #f3f4f6;

   color: var(--muted);
   font-size: 13px;
   line-height: 1.6;
}

.article-disclaimer p {
   margin: 0;
}


/* =========================================================
  TABLET — до 1000px
  ========================================================= */

@media (max-width: 1000px) {

   .angar-calculation {
       padding-left: 20px;
       padding-right: 20px;
   }

   .article-hero {
       padding: 55px 40px;
   }

   .article-hero__facts {
       grid-template-columns: repeat(2, 1fr);
   }

   .article-section {
       padding: 42px 35px;
   }

   .spec-grid {
       grid-template-columns: repeat(2, 1fr);
   }

   .construction-list {
       grid-template-columns: 1fr;
   }

   .formula {
       display: grid;
       grid-template-columns: 1fr;
   }

   .formula span,
   .formula strong {
       min-height: auto;
       padding: 18px;
   }

   .formula b {
       justify-content: center;
       height: 20px;
   }

   .factors ul {
       columns: 1;
   }

   .article-cta {
       padding: 50px 40px;
   }

}


/* =========================================================
  MOBILE — до 700px
  ========================================================= */

@media (max-width: 700px) {

   .angar-calculation {
       padding: 0 14px 40px;

       font-size: 16px;
       line-height: 1.65;
   }

   .breadcrumbs {
       padding: 14px 2px;

       font-size: 12px;
   }


   /* HERO */

   .article-hero {
       margin-bottom: 25px;
       padding: 38px 22px 25px;

       border-radius: 18px;
   }

   .article-label {
       margin-bottom: 15px;
       padding: 7px 10px;

       font-size: 10px;
   }

   .article-hero h1 {
       margin-bottom: 18px;

       font-size: clamp(30px, 9vw, 42px);
       line-height: 1.08;
   }

   .article-lead {
       margin-bottom: 25px !important;

       font-size: 16px;
       line-height: 1.55;
   }

   .article-hero__facts {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 8px;
   }

   .hero-fact {
       padding: 15px 12px;

       border-radius: 11px;
   }

   .hero-fact strong {
       font-size: 18px;
   }

   .hero-fact span {
       font-size: 11px;
   }


   /* SUMMARY */

   .article-summary {
       margin-bottom: 30px;
       padding: 27px 22px;

       border-radius: 15px;
   }

   .article-summary h2 {
       font-size: 25px;
   }


   /* SECTIONS */

   .article-section {
       margin-bottom: 25px;
       padding: 30px 20px;

       border-radius: 17px;
   }

   .angar-calculation h2 {
       font-size: 27px;
   }

   .section-heading {
       display: block;
       margin-bottom: 23px;
   }

   .section-number {
       width: 43px;
       height: 43px;
       margin-bottom: 16px;

       font-size: 13px;
       border-radius: 10px;
   }


   /* SPECS */

   .spec-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 8px;

       margin-top: 25px;
   }

   .spec-card {
       min-height: 95px;
       padding: 17px 14px;

       border-radius: 12px;
   }

   .spec-card span {
       font-size: 12px;
   }

   .spec-card strong {
       font-size: 20px;
   }


   /* CONSTRUCTION */

   .construction-list {
       gap: 9px;
       margin-top: 25px;
   }

   .construction-item {
       gap: 13px;
       padding: 17px 15px;

       border-radius: 12px;
   }

   .construction-item__number {
       flex-basis: 50px;

       min-height: 50px;

       font-size: 17px;
   }

   .construction-item h3 {
       font-size: 17px;
   }

   .construction-item p {
       font-size: 13px;
   }


   /* PANELS */

   .panel-comparison {
       grid-template-columns: 1fr;
       gap: 12px;

       margin-top: 25px;
   }

   .panel-card {
       padding: 23px 20px;

       border-radius: 15px;
   }

   .panel-card h3 {
       font-size: 21px;
   }


   /* PRICE */

   .sm-section .price-row {
       display: block;
       padding: 20px;
   }

   .sm-section  .price-row > b {
       display: block;

       margin-top: 12px;

       color: var(--accent-dark);
       font-size: 21px;
       white-space: normal;
   }

   .price-row--main {
       padding: 24px 20px;
   }

   .price-row--main > b {
       color: #fff;
       font-size: 24px;
   }

   .important-box {
       padding: 20px;

       font-size: 14px;
   }


   /* INCLUDED */

   .included-grid {
       grid-template-columns: 1fr;
       gap: 9px;
   }

   .included-item {
       padding: 17px 15px;
   }


   /* FORMULA */

   .article-section--accent {
       padding-top: 35px;
       padding-bottom: 35px;
   }

   .formula {
       margin: 25px 0;
   }

   .factors {
       padding: 20px;
   }


   /* CALCULATION */

   .calculation-example {
       display: block;

       padding: 22px 20px;
   }

   .calculation-example span {
       display: block;
       margin-bottom: 7px;
   }

   .calculation-example strong {
       display: block;
       font-size: 23px;
   }


   /* STEPS */

   .steps li {
       grid-template-columns: 48px 1fr;
       gap: 14px;
   }

   .steps li > span {
       width: 46px;
       height: 46px;

       font-size: 12px;
   }

   .steps li:not(:last-child)::before {
       left: 22px;
       top: 45px;
   }

   .steps h3 {
       margin-top: 0;
       font-size: 17px;
   }

   .steps p {
       font-size: 14px;
   }


   /* CTA */

   .article-cta {
       margin-bottom: 25px;
       padding: 38px 22px;

       border-radius: 18px;
   }

   .article-cta h2 {
       font-size: 30px;
   }

   .article-cta p {
       font-size: 16px;
   }

   .article-cta__buttons {
       display: grid;
       grid-template-columns: 1fr;
   }

   .button {
       width: 100%;
   }


   /* FAQ */

   .faq summary {
       padding: 18px 48px 18px 16px;

       font-size: 15px;
       line-height: 1.4;
   }

   .faq details p {
       padding: 0 16px 18px;

       font-size: 14px;
   }

   .article-disclaimer {
       padding: 20px;
   }

}


/* =========================================================
  МАЛЕНЬКИЕ ТЕЛЕФОНЫ — до 420px
  ========================================================= */

@media (max-width: 420px) {

   .angar-calculation {
       padding-left: 10px;
       padding-right: 10px;
   }

   .article-hero {
       padding-left: 18px;
       padding-right: 18px;
   }

   .article-hero h1 {
       font-size: 29px;
   }

   .article-hero__facts {
       grid-template-columns: 1fr 1fr;
   }

   .hero-fact strong {
       font-size: 16px;
   }

   .article-section {
       padding: 26px 16px;
   }

   .spec-grid {
       grid-template-columns: 1fr 1fr;
   }

   .spec-card {
       padding: 15px 12px;
   }

   .spec-card strong {
       font-size: 18px;
   }

   .construction-item {
       display: block;
   }

   .construction-item__number {
       width: 50px;
       margin-bottom: 12px;
   }

}




@media (prefers-reduced-motion: reduce) {

   .angar-calculation *,
   .angar-calculation *::before,
   .angar-calculation *::after {
       scroll-behavior: auto !important;
       transition: none !important;
   }

}