@import url('reset.css');
@import url('../fonts/inter.css');

/* =========================
   1. DESIGN SYSTEM
========================= */
:root {
   /* BRAND */
   --color-primary-50:  #fff4e6;
   --color-primary-100: #ffe0bf;
   --color-primary-400: #ff9f3f;
   --color-primary-500: #ff7a00;
   --color-primary-600: #e66f00;

   /* NEUTRAL */
   --color-gray-100: #f5f5f5;
   --color-gray-200: #ebebeb;
   --color-gray-300: #cccccc;
   --color-gray-500: #666666;
   --color-gray-700: #1a1a1a;

   /* BACKGROUND */
   --color-bg-main: #ffffff;
   --color-bg-soft: #f7f7f8;
   --color-bg-dark: #0f1115;

   /* TEXT */
   --color-text-main: #1a1a1a;
   --color-text-light: #ffffff;
   --color-text-muted: #666666;
   --color-text-on-dark: rgba(255, 255, 255, 0.72);

   /* SPACING (8px base) */
   --space-1: 8px;
   --space-2: 16px;
   --space-3: 24px;
   --space-4: 32px;
   --space-5: 48px;
   --space-6: 64px;

   /* TYPOGRAPHY */
   --text-xs:   12px;
   --text-sm:   14px;
   --text-base: 16px;
   --text-lg:   18px;
   --text-xl:   22px;
   --text-2xl:  28px;
   --text-3xl:  36px;
   --text-4xl:  48px;

   /* LINE-HEIGHT */
   --lh-text:    1.6;
   --lh-ui:      1.3;
   --lh-heading: 1.15;

   /* FONT */
   --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

   /* RADIUS */
   --radius-xs: 4px;
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-pill: 999px;

   /* SHADOW — единая формула */
   --shadow-xs: 0 1px 2px rgba(15, 17, 21, 0.06);
   --shadow-sm: 0 2px 8px rgba(15, 17, 21, 0.06);
   --shadow-md: 0 6px 20px rgba(15, 17, 21, 0.09);
   --shadow-lg: 0 16px 40px rgba(15, 17, 21, 0.13);
   --shadow-focus: 0 0 0 3px rgba(255, 122, 0, 0.22);

   /* MOTION */
   --transition: 0.2s ease;

   /* Z-INDEX */
   --z-header: 100;
   --z-menu: 200;
   --z-modal: 300;
}

/* =========================
   2. BASE
========================= */
*,
*::before,
*::after {
   box-sizing: border-box;
}

body {
   margin: 0;
   font-family: var(--font-sans);
   font-size: var(--text-base);
   line-height: var(--lh-text);
   color: var(--color-text-main);
   padding-top: 60px;
   background: var(--color-bg-main);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
   font-family: var(--font-sans);
   line-height: var(--lh-heading);
   letter-spacing: -0.02em;
   margin-top: 0;
}

h1 {
   font-size: clamp(28px, 5vw, 40px);
   font-weight: 700;
   margin-bottom: 12px;
}

h2 {
   font-weight: 700;
}

h3 {
   font-weight: 600;
}

.services__title,
.advantages__title,
.workflow__title,
.prices__title,
.about__title,
.portfolio__title,
.seo__title,
.areas__title,
.slider-title,
.form__title {
   font-size: var(--text-2xl);
   font-weight: 700;
   text-align: center;
}

@media (min-width: 768px) {
   .services__title,
   .advantages__title,
   .workflow__title,
   .prices__title,
   .about__title,
   .portfolio__title,
   .seo__title,
   .areas__title,
   .slider-title,
   .form__title {
      font-size: var(--text-3xl);
   }
}

.services__title,
.advantages__title {
   letter-spacing: -0.2px;
}


/* =========================
   3. LAYOUT
========================= */
.container {
   width: min(100% - 40px, 1200px);
   margin-inline: auto;
}

.section {
   padding: var(--space-5) 0;
}

@media (min-width: 1024px) {
   .section {
      padding: var(--space-6) 0;
   }
}


/* =========================
   4. UI (BUTTONS)
========================= */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-1);
   padding: 14px 22px;
   border-radius: var(--radius-md);
   font-weight: 600;
   font-size: var(--text-base);
   cursor: pointer;
   transition: var(--transition);
   border: 1px solid transparent;
   text-decoration: none;
   line-height: var(--lh-ui);
   white-space: nowrap;
}

.btn:disabled,
.btn.is-loading { opacity: .7; cursor: not-allowed; }

.btn--sm { padding: 10px 16px; font-size: var(--text-sm); }
.btn--lg { padding: 18px 28px; font-size: var(--text-lg); }

.btn--primary {
   background: var(--color-primary-500);
   color: var(--color-text-light);
}
.btn--primary:hover {
   background: var(--color-primary-600);
   transform: translateY(-2px);
}

.btn--secondary {
   background: var(--color-gray-100);
   color: var(--color-text-main);
}
.btn--secondary:hover { background: var(--color-gray-300); }

.btn--ghost {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.25);
   color: var(--color-text-light);
}
.btn--ghost:hover {
   border-color: var(--color-primary-500);
   color: var(--color-primary-500);
}

.btn--wa {
   background: #25D366;
   color: var(--color-text-light);
}
.btn--wa:hover { background: #1ebe5a; }

.btn--tg {
   background: #229ED9;
   color: var(--color-text-light);
}
.btn--tg:hover { background: #1c84b5; }


/* =========================
   5. HEADER
========================= */
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 60px;
   background: linear-gradient(180deg, #1c1f26, var(--color-bg-dark));
   color: var(--color-text-light);
   z-index: var(--z-header);
}

.header__wrap {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   height: 60px;
}

.header__logo {
   grid-column: 2;
   font-weight: 900;
   font-size: var(--text-lg);
   color: var(--color-primary-500);
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   white-space: nowrap;
}

.header__logo:hover {
   color: var(--color-primary-400);
}

.header__phone {
   grid-column: 3;
   justify-self: end;
   font-size: var(--text-sm);
   text-align: right;
}

.header__phone a,
.header__phone time {
   display: block;
   color: var(--color-text-light);
   text-decoration: none;
}

.header__schedule {
   font-size: var(--text-xs);
   color: var(--color-gray-500);
}

@media (min-width: 1024px) {
   .header__logo {
      font-size: var(--text-xl);
      font-weight: 900;
      letter-spacing: 0.06em;
   }
}


@media (max-width: 640px) {
   .header__phone-link .text {
      display: none;
   }

   .header__schedule {
      font-size: 0;
   }
}

/* =========================
   6. MENU (PRO UI CLEAN)
========================= */

/* Блокировка скролла */
body.lock {
   overflow: hidden;
}

/* =========================
   MENU CONTAINER
========================= */

.menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 85%;
   max-width: 320px;
   height: 100dvh;

   background: rgba(28, 31, 38, 0.85);
   backdrop-filter: blur(14px);

   transform: translateX(-100%);
   transition: transform 0.35s ease;
   will-change: transform;

   z-index: 2000;
}

.menu.active {
   transform: translateX(0);
}

.menu__content {
   display: flex;
   flex-direction: column;
   height: 100%;

   padding: var(--space-3);
   padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));

   overflow: hidden;
}

/* =========================
   CLOSE BUTTON
========================= */

.menu__close {
   background: none;
   border: none;
   cursor: pointer;

   align-self: flex-end;

   padding: 8px;
   border-radius: 8px;

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

/* сама иконка */
.menu__close i {
   font-size: var(--text-2xl);
   color: var(--color-primary-500);

   transition: transform 0.3s ease, color 0.2s ease;
}

/* вращение */
.menu__close:hover i {
   transform: rotate(90deg);
}

/* hover цвет */
@media (hover: hover) {
   .menu__close:hover i {
      color: var(--color-primary-400);
   }

   .menu__close:hover {
      background: rgba(255, 122, 0, 0.12);
   }
}

/* активное состояние */
.menu__close:active i {
   transform: scale(0.85) rotate(90deg);
   color: var(--color-primary-600);
}

/* =========================
   LIST
========================= */

.menu__list {
   list-style: none;
   padding: 0;
   margin: 0;

   flex: 1;
   min-height: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
}

.menu__list li {
   border-radius: var(--radius-sm);
   font-size: var(--text-base);
}

/* ссылки */
.menu__list a {
   display: block;
   padding: 14px 12px;

   color: var(--color-text-light);
   text-decoration: none;
}

/* активная */
.menu__list a.active-link {
   color: var(--color-primary-500);
   font-weight: 600;
}

/* =========================
   BUTTON RESET (ВАЖНО)
========================= */

.menu__link {
   width: 100%;
   padding: 14px 12px;

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

   background: none;
   border: none;

   color: var(--color-text-light);
   font: inherit;
   text-align: left;

   cursor: pointer;
}

/* =========================
   UX IMPROVEMENTS
========================= */

.menu__link,
.menu__list a {
   min-height: 44px;
}

/* фокус */
.menu__link:focus-visible,
.menu__list a:focus-visible {
   outline: 2px solid var(--color-primary-500);
   outline-offset: 2px;
}

/* hover только для мыши */
@media (hover: hover) {
   .menu__list li:hover {
      transform: translateX(6px);
   }
}

.menu__list li:active {
   transform: scale(0.97);
}

/* =========================
   SUBMENU
========================= */

.has-submenu {
   position: relative;
}

.menu__arrow {
   transition: transform 0.3s ease;
}

.submenu {
   max-height: 0;
   overflow: hidden;

   padding-left: 10px;
   opacity: 0;

   transition:
      max-height 0.35s ease,
      opacity 0.25s ease;

   will-change: max-height;
}

.has-submenu.active .submenu {
   opacity: 1;
}

.has-submenu.active .menu__arrow {
   transform: rotate(90deg) scale(1.1);
}


.has-submenu.active .menu__link {
   position: relative;
   color: var(--color-primary-500);
}

.has-submenu.active .menu__link::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 3px;
   height: 60%;
   background: var(--color-primary-500);
   border-radius: 2px;
}

/* элементы */
.submenu li a {
   display: block;
   padding: 10px 12px;

   font-size: var(--text-sm);
   color: var(--color-text-muted);
}

.submenu li:not(:last-child) {
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.menu__btn {
   flex-shrink: 0;
   margin-top: var(--space-3);
   margin-bottom: calc(20px + env(safe-area-inset-bottom));

   width: 100%;
   padding: 14px 20px;

   font-size: var(--text-base);
   font-weight: 600;

   color: var(--color-text-light);
   border: none;
   border-radius: var(--radius-md);

   background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-400));

   box-shadow:
      0 10px 25px rgba(255, 122, 0, 0.35),
      0 0 0 rgba(255, 122, 0, 0.6);

   transition: all 0.3s ease;

   position: relative;
   overflow: hidden;
}

.menu__btn::before {
   content: "";
   position: absolute;
   inset: 0;

   background: linear-gradient(120deg,
         transparent,
         rgba(255, 255, 255, 0.4),
         transparent);

   transform: translateX(-100%);
   transition: 0.6s;
}

.menu__btn:hover {
   transform: translateY(-2px) scale(1.02);

   box-shadow:
      0 15px 35px rgba(255, 122, 0, 0.5),
      0 0 20px rgba(255, 122, 0, 0.6);
}

.menu__btn:hover::before {
   transform: translateX(100%);
}

.menu__btn:active {
   transform: scale(0.97);

   box-shadow:
      0 5px 15px rgba(255, 122, 0, 0.4);
}


/* Overlay */
.menu-overlay {
   position: fixed;
   inset: 0;

   background: rgba(0, 0, 0, 0.55);
   backdrop-filter: blur(2px);

   opacity: 0;
   pointer-events: none;

   transition: opacity 0.3s ease;

   z-index: 1500;
}

.menu-overlay.active {
   opacity: 1;
   pointer-events: auto;
}


/* =========================
   7. HERO
========================= */
.hero {
   position: relative;
   min-height: calc(100vh - 60px);
   display: flex;
   align-items: center;
   color: var(--color-text-light);
   overflow: hidden;
}

/* ФОНОВОЕ ИЗОБРАЖЕНИЕ */
.hero__bg {
   position: absolute;
   inset: 0;
   z-index: 0;
}

.hero__bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
   transform-origin: center top;
   animation: hero-kenburns 20s ease-in-out infinite alternate;
   will-change: transform;
}

@keyframes hero-kenburns {
   from { transform: scale(1); }
   to   { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
   .hero__bg img { animation: none; }
}

/* OVERLAY (через HTML — оставляем для JS) */
.hero__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom,
         rgba(15, 17, 21, 0.55),
         rgba(15, 17, 21, 0.85));
   z-index: 1;
}

/* КОНТЕНТ */
.hero__content {
   position: relative;
   z-index: 2;
}

/* =========================
   HERO CONTENT
========================= */
.hero__inner {
   position: relative;
   z-index: 2;
}

.hero__left {
   max-width: 580px;
}

.hero__title {
   font-size: var(--text-2xl);
   font-weight: 800;
   line-height: var(--lh-heading);
   margin-bottom: var(--space-2);
}

.hero__title span {
   color: var(--color-primary-500);
}

.hero__subtitle {
   font-size: var(--text-base);
   color: var(--color-text-on-dark);
   margin-bottom: var(--space-3);
}

.hero__actions {
   display: flex;
   gap: var(--space-2);
   margin-bottom: var(--space-3);
   flex-wrap: wrap;
}

.hero__features {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
   font-size: var(--text-sm);
}

/* =========================
   HERO RIGHT BLOCK
========================= */

.hero__right {
   display: none;
}

/* ПК версия */
@media (min-width: 1024px) {
   .hero__right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
   }
}

/* =========================
   MASTER CARD
========================= */

.master-card {
   width: 100%;
   max-width: 340px;

   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(12px);

   border-radius: var(--radius-lg);
   border: 1px solid rgba(255, 255, 255, 0.15);

   padding: var(--space-3);

   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);

   color: var(--color-text-light);

   transition: transform var(--transition), box-shadow var(--transition);
}

.master-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

/* фото */
.master-card__photo {
   width: 100%;
   height: 180px;
   overflow: hidden;
   border-radius: var(--radius-md);
   margin-bottom: var(--space-2);
}

.master-card__photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* текст */
.master-card__name {
   font-size: var(--text-lg);
   font-weight: 700;
   margin-bottom: var(--space-1);
}

.master-card__exp {
   font-size: var(--text-sm);
   color: var(--color-text-on-dark);
   margin-bottom: var(--space-2);
}

/* список */
.master-card__list {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
   font-size: var(--text-sm);
   margin-bottom: var(--space-2);
}

/* кнопки */
.master-card__actions {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
}

.master-card__actions .btn {
   width: 100%;
   text-align: center;
}

/* =========================
   8. SERVICES
========================= */
.services {
   background: var(--color-bg-soft);
}

.services__title {
   margin-bottom: var(--space-3);
}

.services__grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-2);
}

.service {
   background: var(--color-bg-main);
   padding: var(--space-3);
   border-radius: var(--radius-md);
   text-align: center;
   box-shadow: var(--shadow-sm);
   text-decoration: none;
   color: inherit;
   display: block;
}

.service__item {
   background: var(--color-bg-main);
   padding: var(--space-4);
   border-radius: var(--radius-md);
   text-align: center;
   box-shadow: var(--shadow-sm);
   transition: transform var(--transition), box-shadow var(--transition);
}

.service__item:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-md);
}

.service__icon {
   font-size: 28px;
   margin-bottom: var(--space-2);
   width: 80px;
   height: 80px;
   margin: 0 auto 12px auto;
}

.service__icon img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
}

.service__name {
   font-size: var(--text-sm);
   font-weight: 600;
}

.fade-up {
   opacity: 0;
   transform: translateY(20px);
   transition: 0.6s ease;
}

.fade-up.visible {
   opacity: 1;
   transform: translateY(0);
}

@media (min-width: 768px) {
   .services__grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .service__icon {
      width: 100px;
      height: 100px;
   }
}

@media (min-width: 1024px) {
   .services__grid {
      grid-template-columns: repeat(6, 1fr);
   }

   .service__icon {
      width: 120px;
      height: 120px;
   }
}


/* =========================
   9. ADVANTAGES
========================= */

.advantages {
   background: var(--color-bg-main);
   padding: var(--space-5) 0;
}

/* Заголовок */
.advantages__title {
   margin-bottom: var(--space-4);
}

/* Грид — 1 колонка на мобиле */
.advantages__grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-3);
}

/* Карточка — упрощённая */
.adv {
   background: var(--color-bg-main);
   padding: var(--space-3);
   border-radius: var(--radius-md);

   text-align: center;

   border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Иконка — компактная */
.adv__icon {
   width: 52px;
   height: 52px;
   margin: 0 auto var(--space-2);

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

   border-radius: 50%;
   background: var(--color-primary-50);
   color: var(--color-primary-600);
}

/* Тексты */
.adv__title {
   font-weight: 700;
   font-size: var(--text-base);
   margin-bottom: 4px;
}

.adv__text {
   font-size: var(--text-sm);
   color: var(--color-text-muted);
}

/* TABLET (≥640px) */

@media (min-width: 640px) {
   .advantages__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-4);
   }

   .adv {
      padding: var(--space-4);
   }
}

/* DESKTOP (≥1024px)*/

@media (min-width: 1024px) {

   .advantages {
      padding: var(--space-6) 0;
   }

   .advantages__grid {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-5);
   }

   /* Только на десктопе — эффекты */
   .adv {
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xs);
      transition: transform var(--transition), box-shadow var(--transition);
   }

   .adv:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
   }

   .adv__icon {
      width: 64px;
      height: 64px;
      margin-bottom: var(--space-3);

      transition: transform 0.25s ease;
   }

   .adv:hover .adv__icon {
      transform: scale(1.1);
   }

   .adv__title,
   .adv__text {
      max-width: 220px;
      margin-left: auto;
      margin-right: auto;
   }
}

/* =========================
   10. RESPONSIVE
========================= */
@media (min-width: 768px) {
   .hero__title {
      font-size: var(--text-3xl);
   }

   .hero__subtitle {
      font-size: var(--text-lg);
   }
}

@media (min-width: 1024px) {
   .hero__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-5);
   }

   .hero__title {
      font-size: var(--text-4xl);
   }
}

/* =========================
   11. WORKFLOW
========================= */
.workflow {
   background: var(--color-bg-soft);
}

.workflow__title {
   margin-bottom: var(--space-4);
}

/* список */
.workflow__list {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
}

/* вертикальная линия */
.workflow__list::before {
   content: "";
   position: absolute;
   left: 28px;
   top: 10px;
   bottom: 10px;
   width: 2px;
   background: linear-gradient(to bottom,
         rgba(255, 122, 0, 0.15),
         rgba(255, 122, 0, 0.05));
}

/* карточка */
.step {
   position: relative;
   display: flex;
   gap: var(--space-3);

   padding: var(--space-3);

   background: rgba(255, 255, 255, 0.6);
   backdrop-filter: blur(10px);

   border-radius: 16px;
   border: 1px solid rgba(0, 0, 0, 0.04);

   box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);

   transition: all 0.3s ease;
}

/* hover */
.step:hover {
   transform: translateY(-6px);
   box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* номер */
.step__num {
   position: relative;
   z-index: 1;

   font-size: 18px;
   font-weight: 700;
   color: white;

   min-width: 44px;
   height: 44px;

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

   border-radius: 50%;

   background: linear-gradient(135deg, #ff7a00, #ff9f3f);

   box-shadow:
      0 8px 20px rgba(255, 122, 0, 0.4);
}

/* контент */
.step__title {
   font-weight: 700;
   margin-bottom: 6px;
}

.step__text {
   font-size: var(--text-sm);
   color: var(--color-text-muted);
   line-height: 1.5;
}

/* mobile tap */
.step:active {
   transform: scale(0.98);
}

/* DESKTOP */
@media (min-width: 768px) {
   .workflow__list {
      grid-template-columns: repeat(2, 1fr);
      display: grid;
      gap: var(--space-4);
   }

   .workflow__list::before {
      display: none;
   }
}

/* =========================
  12. PRICES — PREMIUM
========================= */
.prices {
   background: var(--color-bg-soft);
}

.prices__title {
   margin-bottom: var(--space-1);
}

.prices__subtitle {
   font-size: var(--text-sm);
   color: var(--color-text-muted);
   margin-bottom: var(--space-4);
   text-align: center;
}

.prices__grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-3);
}

@media (min-width: 640px) {
   .prices__grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (min-width: 1024px) {
   .prices__grid {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-4);
   }
}

.price-card {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: var(--space-4);
   border-radius: var(--radius-lg);
   background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.06);
   box-shadow: var(--shadow-sm);
   transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.price-card:hover {
   transform: translateY(-4px);
   border-color: var(--color-primary-400);
   box-shadow: 0 16px 36px rgba(255, 122, 0, 0.12);
}

.price-card__head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--space-2);
}

.price-card__title {
   font-size: var(--text-lg);
   font-weight: 700;
   color: var(--color-text-main);
   margin: 0;
   line-height: 1.25;
}

.price-card__badge {
   flex-shrink: 0;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   padding: 4px 10px;
   border-radius: 999px;
   background: var(--color-primary-500);
   color: #fff;
   white-space: nowrap;
}

.price-card__price {
   font-size: var(--text-2xl);
   font-weight: 800;
   line-height: 1.1;
   background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-400));
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
}

.price-card__unit {
   font-size: var(--text-base);
   font-weight: 600;
   color: var(--color-primary-500);
   -webkit-text-fill-color: var(--color-primary-500);
   background: none;
   -webkit-background-clip: border-box;
   background-clip: border-box;
}

.price-card__text {
   margin: 0;
   margin-top: auto;
   padding-top: 12px;
   border-top: 1px solid rgba(0, 0, 0, 0.06);
   font-size: var(--text-sm);
   color: var(--color-text-muted);
   line-height: 1.45;
}

.price-card--featured {
   border-color: var(--color-primary-400);
   box-shadow: 0 12px 30px rgba(255, 122, 0, 0.12);
   background: linear-gradient(180deg, #fff 0%, var(--color-primary-50) 100%);
}

/* =========================
   12.1 REVIEWS MARQUEE — бесконечная лента отзывов
========================= */
.reviews {
   background: var(--color-bg-soft);
}

.reviews-marquee {
   position: relative;
   margin-top: var(--space-3);
   overflow: hidden;
   -webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
           mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}

.reviews-marquee__track {
   display: flex;
   gap: var(--space-3);
   width: max-content;
   padding: var(--space-2) var(--space-3);
   animation: reviews-scroll 60s linear infinite;
   will-change: transform;
}

.reviews-marquee:hover .reviews-marquee__track,
.reviews-marquee:focus-within .reviews-marquee__track {
   animation-play-state: paused;
}

.review-card {
   flex: 0 0 320px;
   width: 320px;
}

.review-card__stars {
   font-size: var(--text-base);
   letter-spacing: 2px;
   line-height: 1;
}

@keyframes reviews-scroll {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
   .reviews-marquee {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
   }
   .reviews-marquee__track {
      animation: none;
      width: max-content;
   }
}

@media (max-width: 600px) {
   .review-card {
      flex-basis: 280px;
      width: 280px;
   }
   .reviews-marquee__track {
      animation-duration: 45s;
   }
}

/* =========================
   13. ABOUT
========================= */
.about {
   padding: var(--space-5) 0;
   background: var(--color-bg-main);
}

.about__wrapper {
   display: grid;
   gap: 40px;
}

/* TEXT */
.about__title {
   margin-bottom: 16px;
}

.about__lead {
   font-size: var(--text-base);
   font-weight: 600;
   margin-bottom: 16px;
}

.about__text {
   font-size: 15px;
   line-height: 1.7;
   color: #444;
   margin-bottom: 24px;
}

.about__text p {
   margin-bottom: 10px;
}

/* FEATURES */
.about__features {
   display: grid;
   grid-template-columns: 1fr;
   gap: 10px;
}

.feature {
   display: flex;
   align-items: center;
   gap: 12px;
   background: #fff;
   padding: 12px 14px;
   border-radius: var(--radius-md);
   font-size: var(--text-sm);
   font-weight: 500;
   color: var(--color-text-main);
   border: 1px solid rgba(0, 0, 0, 0.06);
   box-shadow: var(--shadow-xs);
}

.feature::before {
   content: "✓";
   flex-shrink: 0;
   width: 24px;
   height: 24px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--color-primary-50);
   color: var(--color-primary-500);
   border-radius: 50%;
   font-weight: 700;
   font-size: 13px;
   line-height: 1;
}

/* CARD */
.about__card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   height: 100%;
   background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.06);
   border-radius: var(--radius-lg);
   padding: var(--space-4) var(--space-3);
   text-align: center;
   box-shadow: var(--shadow-md);
   overflow: hidden;
}

.about__card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 5px;
   background: linear-gradient(90deg, var(--color-primary-600), var(--color-primary-400));
}

.about__avatar {
   width: 128px;
   height: 128px;
   border-radius: 50%;
   background: var(--color-gray-200);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: var(--text-2xl);
   margin: var(--space-2) auto 6px;
   border: 3px solid #fff;
   box-shadow: 0 0 0 4px var(--color-primary-50);
}

.about__avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
}

.about__name {
   font-weight: 700;
   font-size: var(--text-xl);
}

.about__role {
   font-size: var(--text-sm);
   color: var(--color-text-muted);
   margin-bottom: var(--space-2);
}

.about__stats {
   display: flex;
   justify-content: center;
   gap: var(--space-4);
   width: 100%;
   padding: var(--space-2) 0;
   margin: 6px 0 var(--space-2);
   border-top: 1px solid rgba(0, 0, 0, 0.06);
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.about__stats strong {
   display: block;
   font-size: var(--text-2xl);
   font-weight: 800;
   line-height: 1.1;
   background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-400));
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
}

.about__stats span {
   font-size: var(--text-xs);
   color: var(--color-text-muted);
}

.about__badge {
   margin-top: auto;
   font-size: var(--text-sm);
   font-weight: 600;
   color: var(--color-primary-600);
   background: var(--color-primary-50);
   padding: 10px 18px;
   border-radius: var(--radius-pill);
}

/* TABLET */
@media (min-width: 768px) {
   .about__wrapper {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
   }

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

/* DESKTOP */
@media (min-width: 1024px) {
   .about {
      padding: var(--space-6) 0;
   }

   .about__wrapper {
      grid-template-columns: 1.2fr 0.8fr;
   }

   .feature {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
   }

   .feature:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-xs);
   }
}

/* =========================
   14. PORTFOLIO (STUDIO)
========================= */
/* ===== CONTAINER — см. раздел 3. LAYOUT (убран дубль) ===== */

/* ===== PORTFOLIO HEADER ===== */
.portfolio {
   background: var(--color-bg-main);
   padding: var(--space-5) 0;
}

@media (min-width: 1024px) {
   .portfolio { padding: var(--space-6) 0; }
}

.portfolio__header {
   text-align: center;
   max-width: 640px;
   margin-inline: auto;
   margin-bottom: var(--space-4);
}

.portfolio__title {
   margin-bottom: var(--space-3);
}

.portfolio__subtitle {
   font-size: var(--text-base);
   color: var(--color-text-muted);
}

/* ===== GRID FLEX ===== */
.portfolio__grid {
   display: flex;
   flex-wrap: wrap;
   gap: clamp(10px, 1.2vw, 16px);
   justify-content: center;
   /* карточки по центру */
   align-items: flex-start;
}

/* ===== CARD ===== */
.work {
   flex: 0 1 260px;
   /* базовая ширина 260px, сжимается на малых экранах */
   max-width: 100%;
   background: #fff;
   border-radius: 16px;
   overflow: hidden;
   text-decoration: none;
   color: inherit;
   position: relative;

   display: flex;
   flex-direction: column;

   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.work__media {
   aspect-ratio: 4/3;
   overflow: hidden;
}

.work img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s ease;
}

/* CONTENT */
.work__content {
   padding: clamp(12px, 1.2vw, 16px);
}

.work__title {
   font-size: clamp(14px, 1.2vw, 16px);
   font-weight: 600;
   margin-bottom: 4px;
}

.work__meta {
   font-size: clamp(12px, 1vw, 13px);
   color: var(--color-text-muted);
}

/* OVERLAY */
.work__overlay {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.4);
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   opacity: 0;
   transition: opacity 0.3s ease;
}

/* HOVER */
@media (hover: hover) {
   .work:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
   }

   .work:hover img {
      transform: scale(1.08);
   }

   .work:hover .work__overlay {
      opacity: 1;
   }
}

/* FOCUS */
.work:focus-visible {
   outline: 2px solid #000;
   outline-offset: 2px;
}

@media (min-width: 1024px) {
   .portfolio__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
   }

   .work {
      flex: unset;
      max-width: unset;
   }
}

/* ===== BUTTON (убран дубль .btn с background:#000 — использует систему из раздела 4/UNIFIED) ===== */
.portfolio__footer {
   display: flex;
   justify-content: center;
   margin-top: var(--space-4);
}

/* =========================
   15. SEO-BLOCK
========================= */
.seo {
   background: var(--color-bg-main);
}

.seo__title {
   margin-bottom: 20px;
}

.seo__text {
   font-size: var(--text-base);
   line-height: var(--lh-text);
   color: var(--color-text-main);
}

.seo__text p {
   margin-bottom: 12px;
}

.seo__text a {
   text-decoration: none;
   color: var(--color-primary-500);
}

.seo__text a:hover {
   text-decoration: none;
   color: var(--color-primary-600);
}

/* =========================
   16. GEO
========================= */
.areas {
   background: var(--color-bg-main);
}

.areas__title {
   margin-bottom: var(--space-1);
}

.areas__subtitle {
   font-size: var(--text-sm);
   color: var(--color-text-muted);
   margin-bottom: var(--space-3);
   text-align: center;
}

/* сетка */

.areas__grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
}

/* карточка района */

.area {
   background: var(--color-bg-soft);
   border: 1px solid var(--color-gray-200);
   border-radius: var(--radius-sm);
   padding: 10px;
   text-align: center;
   font-size: var(--text-sm);
   transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

/* hover */

.area:hover {
   background: var(--color-primary-500);
   color: var(--color-text-light);
   border-color: var(--color-primary-500);
}

/* планшет */

@media (min-width: 768px) {

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

}

/* ПК */

@media (min-width: 1024px) {

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

}

/* =========================
   18. SLIDE
========================= */
.services-slider {
   padding: var(--space-4) var(--space-2);
   background-color: var(--color-bg-main);
   max-width: 1200px;
   /* фикс ширины на ПК */
   margin: 0 auto;
   /* центрирование блока */
}

.slider-title {
   margin-bottom: var(--space-3);
   color: var(--color-text-main);
}

/* Контейнер */
.slider-wrapper {
   position: relative;
}

.slider-track-wrapper {
   overflow: hidden;
   display: flex;
   justify-content: center;
   /* центрируем слайдер */
}

.slider-track {
   display: flex;
   gap: var(--space-2);
   cursor: grab;
   overflow-x: auto;
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   /* важно для iPhone */
}

.slider-track::-webkit-scrollbar {
   display: none;
}

/* Карточки */
.service-card {
   flex: 0 0 150px;
   background-color: var(--color-gray-100);
   border-radius: var(--radius-md);
   padding: var(--space-2);
   display: flex;
   flex-direction: column;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   transition: transform var(--transition), box-shadow var(--transition);
   scroll-snap-align: start;
}

.service-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.service-img {
   width: 100%;
   height: 120px;
   object-fit: cover;
   border-radius: var(--radius-md);
   margin-bottom: var(--space-2);
}

.service-title {
   font-size: var(--text-base);
   font-weight: 600;
   margin-bottom: var(--space-1);
   color: var(--color-text-main);
}

.service-desc {
   font-size: var(--text-sm);
   color: var(--color-text-muted);
   margin-bottom: var(--space-2);
}

.service-price {
   font-size: var(--text-base);
   font-weight: 700;
   color: var(--color-primary-500);
}

/* Кнопки */
.slider-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: var(--color-primary-500);
   color: var(--color-text-light);
   border: none;
   border-radius: var(--radius-sm);
   width: 40px;
   height: 40px;
   cursor: pointer;
   transition: background-color var(--transition), transform var(--transition);
   z-index: 10;
}

.slider-btn:hover {
   background-color: var(--color-primary-600);
   transform: translateY(-50%) scale(1.05);
}

.slider-btn.prev {
   left: -10px;
}

.slider-btn.next {
   right: -10px;
}

/* Точки */
.slider-dots {
   display: flex;
   justify-content: center;
   margin-top: var(--space-2);
   gap: var(--space-1);
}

.slider-dots span {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: var(--color-gray-300);
   cursor: pointer;
   transition: all var(--transition);
}

.slider-dots span.active {
   background-color: var(--color-primary-500);
   transform: scale(1.2);
}

/* АДАПТИВ (mobile-first) */

/* ≥480px */
@media (min-width: 480px) {
   .service-card {
      flex: 0 0 180px;
      padding: var(--space-3);
   }

   .service-img {
      height: 140px;
   }
}

/* ≥768px */
@media (min-width: 768px) {
   .service-card {
      flex: 0 0 220px;
   }

   .service-img {
      height: 160px;
   }
}

/* ≥1024px */
@media (min-width: 1024px) {
   .service-card {
      flex: 0 0 260px;
   }

   .service-img {
      height: 180px;
   }
}

/* ≥1280px (чтобы красиво центрировалось) */
@media (min-width: 1280px) {
   .services-slider {
      padding-left: 0;
      padding-right: 0;
   }
}

/* =========================
     Основные стили FAQ
     ========================= */
.faq__title {
   text-align: center;
   font-size: var(--text-3xl);
   margin-bottom: var(--space-4);
   color: var(--color-text-main);
}

.faq__list {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
}

.faq__item {
   background: var(--color-bg-main);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-md);
   overflow: hidden;
   transition: transform 0.3s;
}

.faq__item:hover {
   transform: translateY(-2px);
}

.faq__question {
   width: 100%;
   padding: 1.25rem 1.5rem;
   font-size: 1.1rem;
   font-weight: 500;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: linear-gradient(90deg, #f0f0f0, #e6e6e6);
   border: none;
   cursor: pointer;
   transition: background 0.3s;
}

.faq__question:hover {
   background: linear-gradient(90deg, #e6e6e6, #dcdcdc);
}

.faq__icon {
   font-size: 1.6rem;
   font-weight: bold;
   transition: transform 0.35s ease;
}

.faq__answer {
   font-size: 1rem;
   line-height: 1.6;
   color: var(--color-text-main);
   overflow: hidden;
   will-change: height, opacity;
}

/* =========================
     Мобильный-first дизайн
     ========================= */
@media (max-width: 768px) {
   .faq__title {
      font-size: var(--text-2xl);
   }

   .faq__question {
      font-size: 1rem;
      padding: 1rem 1rem;
   }

   .faq__answer {
      font-size: 0.95rem;
   }

   .faq__item {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
   }
}

@media (max-width: 480px) {
   .faq__title {
      font-size: var(--text-xl);
   }

   .faq__question {
      font-size: 0.95rem;
      padding: 0.85rem 1rem;
   }

   .faq__answer {
      font-size: 0.9rem;
   }
}

/* =========================
  20 PAGE-PRICE
========================= */

/* HERO */
.prices-hero {
   background: var(--color-bg-soft);
   padding: var(--space-5) 0 var(--space-4);
}

.prices-hero__inner {
   max-width: 760px;
   text-align: center;
}

.prices-hero__title {
   margin: 0 0 var(--space-2);
}

.prices-hero__lead {
   font-size: var(--text-lg);
   color: var(--color-text-muted);
   margin: 0 0 var(--space-3);
   line-height: var(--lh-text);
}

.prices-hero__cta {
   margin: 0 auto;
}

@media (min-width: 1024px) {
   .prices-hero {
      padding: var(--space-6) 0 var(--space-5);
   }
}

/* STAGE NAV (sticky tabs) */
.stage-nav {
   position: sticky;
   top: 60px;
   background: var(--color-bg-main);
   z-index: 20;
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   padding: var(--space-2) 0;
}

.stage-nav__track {
   display: flex;
   gap: var(--space-1);
   justify-content: center;
   flex-wrap: wrap;
}

.stage-nav__item {
   padding: 12px 24px;
   background: var(--color-gray-100);
   border: 1px solid transparent;
   border-radius: var(--radius-pill);
   font-family: inherit;
   font-size: var(--text-base);
   font-weight: 600;
   color: var(--color-text-main);
   cursor: pointer;
   transition: var(--transition);
}

.stage-nav__item:hover {
   background: var(--color-primary-50);
   color: var(--color-primary-600);
}

.stage-nav__item.active {
   background: var(--color-primary-500);
   color: #fff;
   box-shadow: 0 4px 12px rgba(255, 122, 0, 0.25);
}

/* SUB-NAV (filter chips) */
.sub-nav {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-1);
   justify-content: center;
   margin-bottom: var(--space-4);
}

.sub-nav__item {
   padding: 8px 16px;
   background: var(--color-bg-soft);
   border: 1px solid rgba(0, 0, 0, 0.06);
   border-radius: var(--radius-pill);
   font-family: inherit;
   font-size: var(--text-sm);
   font-weight: 500;
   color: var(--color-text-main);
   cursor: pointer;
   transition: var(--transition);
}

.sub-nav__item:hover {
   border-color: var(--color-primary-400);
   color: var(--color-primary-600);
}

.sub-nav__item.active {
   background: var(--color-primary-500);
   border-color: var(--color-primary-500);
   color: #fff;
}

/* STAGE */
.stage {
   display: none;
}

.stage.is-active {
   display: block;
}

.stage__title {
   text-align: center;
   font-size: var(--text-2xl);
   font-weight: 700;
   margin: 0 0 var(--space-3);
   letter-spacing: -0.02em;
}

@media (min-width: 768px) {
   .stage__title {
      font-size: var(--text-3xl);
   }
}

/* CARDS GRID */
.cards {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-2);
}

@media (min-width: 640px) {
   .cards {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-3);
   }
}

@media (min-width: 1024px) {
   .cards {
      grid-template-columns: repeat(3, 1fr);
   }
}

/* CARD */
.card {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: var(--space-3);
   background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.06);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover {
   transform: translateY(-3px);
   border-color: var(--color-primary-400);
   box-shadow: 0 12px 28px rgba(255, 122, 0, 0.10);
}

.card.is-hidden {
   display: none;
}

.card__name {
   font-size: var(--text-base);
   font-weight: 600;
   color: var(--color-text-main);
   line-height: 1.35;
   padding-right: 70px;
}

.card__price {
   margin-top: auto;
   font-size: var(--text-xl);
   font-weight: 800;
   color: var(--color-primary-500);
   line-height: 1.1;
}

.card__price sup {
   font-size: 0.65em;
   vertical-align: super;
   font-weight: 700;
}

.card__badge {
   position: absolute;
   top: 12px;
   right: 12px;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   padding: 4px 9px;
   border-radius: var(--radius-pill);
   background: var(--color-primary-50);
   color: var(--color-primary-600);
   white-space: nowrap;
}

.card--sale .card__badge {
   background: var(--color-primary-500);
   color: #fff;
}

.card--hit .card__badge {
   background: var(--color-gray-700);
   color: #fff;
}

/* No-results stub */
.empty {
   display: none;
   text-align: center;
   padding: var(--space-3);
   color: var(--color-text-muted);
   font-size: var(--text-sm);
}

/* TRUST + COST SECTION */
.price-trust {
   background: var(--color-bg-soft);
}

.price-trust__title {
   text-align: center;
   font-size: var(--text-2xl);
   font-weight: 700;
   margin: 0 0 var(--space-1);
   letter-spacing: -0.02em;
}

.price-trust__lead {
   text-align: center;
   font-size: var(--text-lg);
   color: var(--color-primary-600);
   font-weight: 600;
   margin: 0 0 var(--space-2);
}

.price-trust__text {
   text-align: center;
   max-width: 680px;
   margin: 0 auto var(--space-5);
   color: var(--color-text-muted);
   line-height: var(--lh-text);
}

.price-trust__sub {
   text-align: center;
   font-size: var(--text-xl);
   font-weight: 700;
   margin: 0 0 var(--space-1);
   letter-spacing: -0.01em;
}

.price-trust__sub-lead {
   text-align: center;
   max-width: 620px;
   margin: 0 auto var(--space-4);
   font-size: var(--text-sm);
   color: var(--color-text-muted);
   line-height: var(--lh-text);
}

@media (min-width: 768px) {
   .price-trust__title {
      font-size: var(--text-3xl);
   }
   .price-trust__sub {
      font-size: var(--text-2xl);
   }
   .price-trust__sub-lead {
      font-size: var(--text-base);
   }
}

/* COST GRID */
.cost-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-2);
}

@media (min-width: 640px) {
   .cost-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-3);
   }
}

@media (min-width: 1024px) {
   .cost-grid {
      grid-template-columns: repeat(4, 1fr);
   }
}

.cost-card {
   position: relative;
   background: #fff;
   padding: var(--space-3);
   border: 1px solid rgba(0, 0, 0, 0.06);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-sm);
   transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
   overflow: hidden;
}

.cost-card:hover {
   transform: translateY(-3px);
   border-color: var(--color-primary-400);
   box-shadow: 0 12px 28px rgba(255, 122, 0, 0.10);
}

.cost-card::after {
   content: "01";
   position: absolute;
   top: 10px;
   right: 14px;
   font-size: var(--text-2xl);
   font-weight: 800;
   color: var(--color-primary-50);
   letter-spacing: -0.02em;
}

.cost-card:nth-child(2)::after { content: "02"; }
.cost-card:nth-child(3)::after { content: "03"; }
.cost-card:nth-child(4)::after { content: "04"; }

.cost-card__title {
   font-size: var(--text-base);
   font-weight: 700;
   margin-bottom: 6px;
   color: var(--color-text-main);
   padding-right: 40px;
}

.cost-card p {
   font-size: var(--text-sm);
   line-height: var(--lh-text);
   color: var(--color-text-muted);
   margin: 0;
}

@media (min-width: 1024px) {
   .cost-card {
      padding: var(--space-4);
   }
   .cost-card::after {
      font-size: var(--text-3xl);
   }
}

.price-note {
   margin: var(--space-4) auto 0;
   max-width: 620px;
   text-align: center;
   font-size: var(--text-sm);
   color: var(--color-text-muted);
   line-height: var(--lh-text);
}

/* =========================
   21 PORTFOLIO & OTZYVY
========================= */
.hero--portfolio {
   background: linear-gradient(180deg, #1c1f26, #0f1115);
   color: white;
   padding: 40px 0;
}

.hero__wrap {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.portfolio-hero__title {
   font-size: 26px;
   margin-bottom: 10px;
}

.portfolio-hero__subtitle {
   margin-bottom: 20px;
   color: #ccc;
}

.hero__btn {
   background: orange;
   border: none;
   padding: 15px;
   font-weight: bold;
   margin-bottom: 20px;
}

.hero__stats {
   display: flex;
   gap: 15px;
}

.stat {
   font-size: 12px;
}

.stat strong {
   display: block;
   font-size: 18px;
   color: orange;
}

.hero__image img {
   width: 100%;
   border-radius: 10px;
}

.portfolio-grid {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.portfolio-card {
   background: white;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   transition: transform 0.3s ease;
}

.portfolio-card:hover {
   transform: translateY(-3px);
}

.portfolio-card.hide {
   display: none;
}

.portfolio-img-wrap {
   position: relative;
   cursor: pointer;
   display: block;
   border-radius: var(--radius-md);
   overflow: hidden;
}

.portfolio-img-wrap:focus-visible {
   outline: 3px solid var(--color-primary-500);
   outline-offset: 3px;
}

.portfolio-img {
   width: 100%;
   aspect-ratio: 4 / 3;
   height: auto;
   object-fit: cover;
   display: block;
   background: var(--color-bg-soft);
}


.portfolio-content {
   padding: 16px;
}

.portfolio-meta {
   font-size: 12px;
   color: var(--color-text-muted);
}

.portfolio-name {
   font-weight: 600;
   margin: 6px 0;
}

.portfolio-rating {
   color: #ffb400;
   font-size: 16px;
}

.portfolio-text {
   font-size: 14px;
}

.empty {
   display: none;
   text-align: center;
   margin-top: 20px;
   color: var(--color-text-muted);
}

/* MOBILE-FIRST FLEX GRID */
@media (min-width: 640px) {
   .portfolio-grid {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
   }

   .portfolio-card {
      width: calc(50% - 16px);
   }
}

@media (min-width: 1024px) {
   .portfolio-card {
      width: calc(33.333% - 16px);
   }
}

@media (min-width: 1280px) {
   .portfolio-card {
      width: 280px;
   }
}

/* MODAL */
.modal {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.95);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.25s ease, visibility 0.25s ease;
   z-index: var(--z-modal);
   padding: 20px;
   overscroll-behavior: contain;
}

.modal.open {
   opacity: 1;
   visibility: visible;
}

.modal-stage {
   max-width: min(1100px, calc(100vw - 40px));
   max-height: calc(100vh - 40px);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
}

.modal img {
   display: block;
   max-width: 100%;
   max-height: calc(100vh - 160px);
   width: auto;
   height: auto;
   object-fit: contain;
   border-radius: var(--radius-md);
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.modal-caption {
   color: white;
   text-align: center;
   max-width: 640px;
   padding: 0 8px;
}
.modal-caption__meta {
   font-size: var(--text-sm);
   color: rgba(255, 255, 255, 0.7);
   margin-bottom: 4px;
}
.modal-caption__name {
   font-weight: 600;
   font-size: var(--text-base, 16px);
   margin-bottom: 2px;
}
.modal-caption__text {
   font-size: var(--text-sm);
   color: rgba(255, 255, 255, 0.85);
}

.modal-close,
.modal-nav {
   position: absolute;
   color: white;
   background: rgba(0, 0, 0, 0.45);
   border: none;
   cursor: pointer;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, transform 0.2s ease;
}

.modal-close:hover,
.modal-nav:hover,
.modal-close:focus-visible,
.modal-nav:focus-visible {
   background: var(--color-primary-500);
   outline: none;
}

.modal-close {
   top: 16px;
   right: 16px;
   width: 44px;
   height: 44px;
   font-size: 28px;
   line-height: 1;
}

.modal-nav {
   top: 50%;
   transform: translateY(-50%);
   width: 48px;
   height: 48px;
   font-size: 32px;
   line-height: 1;
}

.modal-nav[hidden] { display: none; }

.modal-nav.prev { left: 16px; }
.modal-nav.next { right: 16px; }

@media (max-width: 640px) {
   .modal { padding: 12px; }
   .modal-stage { gap: 8px; max-width: calc(100vw - 24px); }
   .modal img { max-height: calc(100vh - 200px); }
   .modal-close { top: 8px; right: 8px; width: 40px; height: 40px; font-size: 24px; }
   .modal-nav { width: 44px; height: 44px; font-size: 28px; }
   .modal-nav.prev { left: 8px; }
   .modal-nav.next { right: 8px; }
}

/* =========================
   22 FOOTER
========================= */
/* =========================================================================
   ===  UNIFIED COMPONENTS (добавлено при рефакторинге)                  ===
   ===  Единые стили для новых общих элементов: хлебные крошки,          ===
   ===  обновлённый footer/bottom-menu, обновлённая форма, контакты,     ===
   ===  карточки, button-варианты.                                        ===
   ========================================================================= */

/* ---------------- Служебные утилиты ---------------- */
.skip-link {
   position: absolute;
   top: -100%;
   left: var(--space-2);
   z-index: calc(var(--z-header) + 10);
   padding: 10px 18px;
   background: var(--color-primary-500);
   color: var(--color-text-light);
   border-radius: var(--radius-md);
   font-weight: 600;
   text-decoration: none;
   transition: top .15s;
}
.skip-link:focus { top: var(--space-2); }

.visually-hidden {
   position: absolute !important;
   width: 1px; height: 1px;
   padding: 0; margin: -1px;
   overflow: hidden; clip: rect(0 0 0 0);
   white-space: nowrap; border: 0;
}

:focus-visible {
   outline: 2px solid var(--color-primary-500);
   outline-offset: 2px;
   border-radius: var(--radius-sm);
}

/* ---------------- BREADCRUMBS ---------------- */
.breadcrumbs {
   background: var(--color-gray-100);
   padding: var(--space-1) 0;
   font-size: var(--text-sm);
}
.breadcrumbs__list {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   list-style: none;
   padding: 0;
   margin: 0;
   color: var(--color-text-muted);
}
.breadcrumbs__item { display: inline-flex; align-items: center; }
.breadcrumbs__item:not(:last-child)::after {
   content: "›";
   margin-left: 6px;
   color: var(--color-text-muted);
   opacity: .6;
}
.breadcrumbs__item a {
   color: var(--color-text-muted);
   text-decoration: none;
}
.breadcrumbs__item a:hover { color: var(--color-primary-500); }
.breadcrumbs__item--current { color: var(--color-text-main); font-weight: 500; }

/* ---------------- FOOTER — новая сетка ---------------- */
.footer {
   background: linear-gradient(180deg, #14171d, #0f1115);
   color: var(--color-text-light);
   padding-top: var(--space-5);
   padding-bottom: var(--space-5);
}
.footer__grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   gap: var(--space-4);
   margin-bottom: var(--space-4);
}
@media (max-width: 768px) {
   .footer__grid { grid-template-columns: 1fr; }
}
.footer__logo {
   font-weight: 700;
   font-size: var(--text-lg);
   color: var(--color-primary-500);
   margin-bottom: var(--space-1);
}
.footer__text {
   color: var(--color-text-muted);
   margin-bottom: var(--space-2);
}
.footer__contacts {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
}
.footer__link {
   color: var(--color-text-light);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 0;
}
.footer__link:hover { color: var(--color-primary-500); }
.footer__link i { color: var(--color-primary-500); width: 18px; }

.footer__heading {
   font-size: var(--text-base);
   color: var(--color-text-light);
   margin-bottom: var(--space-2);
}
.footer__list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 6px;
}
.footer__list a {
   color: var(--color-text-muted);
   text-decoration: none;
}
.footer__list a:hover { color: var(--color-primary-500); }

.footer__bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--space-2);
   padding-top: var(--space-3);
   border-top: 1px solid rgba(255,255,255,0.08);
   font-size: var(--text-sm);
   color: var(--color-text-muted);
}
.footer__schedule { color: var(--color-text-muted); }

/* ---------------- BOTTOM-MENU — обновлённая ---------------- */
.bottom-menu {
   position: fixed;
   bottom: 0; left: 0; right: 0;
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0));
   background: var(--color-bg-main);
   border-top: 1px solid var(--color-gray-100);
   box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
   z-index: var(--z-header);
}
.bottom-menu__item {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2px;
   padding: 6px 4px;
   font-size: 11px;
   color: var(--color-text-muted);
   text-decoration: none;
   border-radius: var(--radius-sm);
}
.bottom-menu__item i {
   font-size: 18px;
   color: var(--color-text-muted);
}
.bottom-menu__item:hover,
.bottom-menu__item[aria-current="page"] { color: var(--color-primary-500); }
.bottom-menu__item:hover i,
.bottom-menu__item[aria-current="page"] i { color: var(--color-primary-500); }

.bottom-menu__item--cta {
   background: var(--color-primary-500);
   color: var(--color-text-light);
}
.bottom-menu__item--cta i,
.bottom-menu__item--cta:hover,
.bottom-menu__item--cta:hover i { color: var(--color-text-light); }

@media (min-width: 1024px) {
   .bottom-menu { display: none; }
}

body { padding-bottom: 72px; }
@media (min-width: 1024px) {
   body { padding-bottom: 0; }
}

/* ---------------- FORM — обновлённая ---------------- */
/* === FORM SECTION === */
.form {
   background: var(--color-bg-soft);
   color: var(--color-text-main);
   border-top: 3px solid var(--color-primary-500);
}

.form__layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-5);
   align-items: stretch;
}

/* Left promo panel */
.form__promo {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.form__promo-title {
   font-size: var(--text-3xl);
   color: var(--color-text-main);
   line-height: var(--lh-heading);
   margin-bottom: var(--space-2);
}

.form__promo-lead {
   font-size: var(--text-lg);
   color: var(--color-text-muted);
   margin-bottom: var(--space-3);
   line-height: var(--lh-text);
}

.form__benefits {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
}

.form__benefit {
   display: flex;
   align-items: center;
   gap: 12px;
   color: var(--color-text-main);
   font-size: var(--text-base);
}

.form__benefit-icon {
   flex-shrink: 0;
   width: 26px;
   height: 26px;
   background: var(--color-primary-500);
   color: #fff;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   font-weight: 700;
}

/* Right form card */
.form__card {
   background: var(--color-bg-main);
   border-radius: var(--radius-lg);
   padding: var(--space-4);
   border: 1px solid var(--color-gray-200);
   box-shadow: 0 12px 32px rgba(15, 17, 21, 0.08);
}

.form__wrap {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
}

.form__row {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.form__row--2col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-2);
}

.form__field {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.form__hp {
   position: absolute !important;
   left: -9999px; top: auto;
   width: 1px; height: 1px; overflow: hidden;
}

.form__label {
   font-size: var(--text-sm);
   color: var(--color-text-main);
   font-weight: 500;
}

.form__input,
.form__textarea {
   padding: 14px 16px;
   border-radius: var(--radius-md);
   border: 1px solid var(--color-gray-300);
   background: var(--color-bg-soft);
   color: var(--color-text-main);
   font-size: var(--text-base);
   font-family: inherit;
   transition: border-color .15s, box-shadow .15s;
   width: 100%;
}

.form__input:focus,
.form__textarea:focus {
   outline: none;
   border-color: var(--color-primary-500);
   box-shadow: var(--shadow-focus);
   background: var(--color-bg-main);
}

.form__input:focus-visible,
.form__textarea:focus-visible {
   outline: 2px solid var(--color-primary-500);
   outline-offset: 1px;
}

.form__textarea { resize: vertical; min-height: 110px; }

.form__consent {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: var(--text-sm);
   color: var(--color-text-muted);
   line-height: var(--lh-ui);
}

.form__consent input[type="checkbox"] {
   appearance: none;
   -webkit-appearance: none;
   flex-shrink: 0;
   width: 18px;
   height: 18px;
   margin: 0;
   border: 1.5px solid var(--color-gray-300);
   border-radius: var(--radius-xs);
   background: var(--color-bg-main);
   cursor: pointer;
   display: inline-grid;
   place-content: center;
   transition: border-color .15s, background-color .15s;
}

.form__consent input[type="checkbox"]::before {
   content: "";
   width: 10px;
   height: 10px;
   transform: scale(0);
   transition: transform .12s ease-in;
   background-color: #fff;
   clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 20%, 86% 8%, 38% 70%);
}

.form__consent input[type="checkbox"]:checked {
   background: var(--color-primary-500);
   border-color: var(--color-primary-500);
}

.form__consent input[type="checkbox"]:checked::before {
   transform: scale(1);
}

.form__consent input[type="checkbox"]:focus-visible {
   outline: 2px solid var(--color-primary-500);
   outline-offset: 2px;
}

.form__consent label {
   cursor: pointer;
}

.form__btn {
   width: 100%;
   padding: 16px;
   font-size: var(--text-base);
   font-weight: 700;
   letter-spacing: .02em;
   position: relative;
   margin-top: var(--space-1);
}

.form__btn-spinner { display: none; }
.form__btn.is-loading .form__btn-label { visibility: hidden; }
.form__btn.is-loading .form__btn-spinner {
   display: block;
   position: absolute;
   left: 50%; top: 50%;
   width: 18px; height: 18px;
   margin: -9px 0 0 -9px;
   border: 2px solid rgba(255,255,255,0.4);
   border-top-color: var(--color-text-light);
   border-radius: 50%;
   animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form__status {
   font-size: var(--text-sm);
   min-height: 1.5em;
}
.form__status[data-kind="success"] { color: #1a8a3a; }
.form__status[data-kind="error"]   { color: #c62828; }
.form__status[data-kind="pending"] { color: var(--color-text-muted); }

/* Responsive */
@media (max-width: 768px) {
   .form__layout { grid-template-columns: 1fr; gap: var(--space-4); }
   .form__promo-title { font-size: var(--text-2xl); }
}

@media (max-width: 480px) {
   .form__row--2col { grid-template-columns: 1fr; }
   .form__card { padding: var(--space-4); }
}

/* ---------------- CONTACTS PAGE ---------------- */
.contacts-hero { padding-top: var(--space-4); padding-bottom: var(--space-3); }
.contacts-hero__lead {
   font-size: var(--text-lg);
   color: var(--color-text-muted);
   margin-bottom: var(--space-3);
   max-width: 640px;
}
.contacts-trust {
   list-style: none;
   padding: 0;
   margin: 0 0 var(--space-3);
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2);
   font-size: var(--text-sm);
   color: var(--color-text-muted);
}
.contacts-trust li {
   display: inline-flex; align-items: center; gap: 8px;
}
.contacts-trust i { color: var(--color-primary-500); }

.contacts-cta {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-1);
   margin-bottom: var(--space-3);
}
.contacts-cta .btn { flex: 1 1 180px; }

.contacts-info__grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: var(--space-3);
}
.contacts-card {
   padding: var(--space-3);
   border-radius: var(--radius-lg);
   background: var(--color-bg-main);
   box-shadow: var(--shadow-sm);
}
.contacts-card h2 {
   font-size: var(--text-lg);
   margin-bottom: var(--space-2);
}
.contacts-card__list {
   display: grid;
   gap: 8px;
   margin: 0;
}
.contacts-card__list dt {
   font-size: var(--text-sm);
   color: var(--color-text-muted);
}
.contacts-card__list dd {
   margin: 0 0 var(--space-1);
   font-weight: 500;
}
.contacts-card__list dd a { color: var(--color-primary-500); text-decoration: none; }
.contacts-card__list dd a:hover { text-decoration: underline; }

.contacts-card__areas {
   padding-left: var(--space-2);
   margin: 0;
   color: var(--color-text-main);
}
.contacts-card__areas li { margin-bottom: 4px; }

/* ---------------- HERO / SERVICE PAGE ---------------- */
/* Hero услуговых страниц — единый размер с главной (.hero) */
.hero--service {
   min-height: calc(100vh - 60px);
   padding: var(--space-5) 0;
}
.hero--service .hero__inner {
   display: block;
   max-width: 580px;
}
.hero--service h1 {
   font-size: var(--text-2xl);
   font-weight: 800;
   line-height: var(--lh-heading);
   color: var(--color-text-light);
   margin-bottom: var(--space-2);
}
.hero__lead {
   font-size: var(--text-base);
   color: var(--color-text-on-dark);
   margin-bottom: var(--space-3);
   max-width: 580px;
}
.hero__cta {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2);
}
@media (min-width: 768px) {
   .hero--service h1 { font-size: var(--text-3xl); }
   .hero__lead { font-size: var(--text-lg); }
}
@media (min-width: 1024px) {
   .hero--service h1 { font-size: var(--text-4xl); }
}

/* ---------------- SERVICE INCLUDES — карточки с FA-иконками ---------------- */
.service-includes__grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-3);
}
.includes-card {
   background: var(--color-bg-main);
   padding: var(--space-3);
   border-radius: var(--radius-md);
   border: 1px solid rgba(0, 0, 0, 0.05);
   text-align: center;
}
.includes-card__icon {
   width: 52px;
   height: 52px;
   margin: 0 auto var(--space-2);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--color-primary-50);
   color: var(--color-primary-600);
   font-size: var(--text-xl);
}
.includes-card__title {
   font-weight: 700;
   font-size: var(--text-base);
   color: var(--color-text-main);
}
@media (min-width: 640px) {
   .service-includes__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-4);
   }
   .includes-card { padding: var(--space-4); }
}
@media (min-width: 1024px) {
   .service-includes__grid {
      grid-template-columns: repeat(3, 1fr);
   }
   .includes-card {
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xs);
      transition: transform var(--transition), box-shadow var(--transition);
   }
   .includes-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
   }
   .includes-card__icon {
      width: 64px;
      height: 64px;
      margin-bottom: var(--space-3);
      font-size: var(--text-2xl);
      transition: transform 0.25s ease;
   }
   .includes-card:hover .includes-card__icon {
      transform: scale(1.1);
   }
}

/* ---------------- PRICES SHORT — карточки .price-card ---------------- */
.prices-short__grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-3);
}
.prices-short__note {
   margin-top: var(--space-3);
   color: var(--color-text-muted);
   font-size: var(--text-sm);
}
@media (min-width: 640px) {
   .prices-short__grid {
      grid-template-columns: repeat(2, 1fr);
   }
}
@media (min-width: 1024px) {
   .prices-short__grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

.header__burger {
   justify-self: start;
   background: none;
   border: none;
   color: var(--color-text-light);
   font-size: var(--text-xl);
   padding: var(--space-1);
   border-radius: var(--radius-sm);
   cursor: pointer;
}
.header__burger:hover {
   background: rgba(255, 255, 255, 0.08);
}

.header__phone-link { color: var(--color-text-light); text-decoration: none; }
.header__phone-link i { margin-right: 4px; color: var(--color-primary-500); }

/* ---------------- MENU — aria-current link styling ---------------- */
.menu__list a[aria-current="page"] {
   color: var(--color-primary-500);
   font-weight: 600;
}

/* ---------------- FAQ — обновлённая с aria-expanded ---------------- */
.faq__question {
   width: 100%;
   text-align: left;
   background: none;
   border: none;
   padding: var(--space-2);
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: var(--text-base);
   font-weight: 500;
   cursor: pointer;
   border-radius: var(--radius-md);
}
.faq__question:hover { background: var(--color-gray-100); }
.faq__icon {
   font-size: 20px;
   transition: transform .3s;
   color: var(--color-primary-500);
}
.faq__question[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__answer {
   padding: 0 var(--space-2) var(--space-2);
}

/* ---------------- PORTFOLIO SECTION ---------------- */
.portfolio-section { padding: var(--space-4) var(--space-2); }
.portfolio-filter {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: var(--space-2) 0 var(--space-3);
}
.portfolio-filter button {
   padding: 8px 14px;
   border-radius: var(--radius-md);
   border: 1px solid var(--color-gray-300);
   background: var(--color-bg-main);
   cursor: pointer;
   font-size: var(--text-sm);
}
.portfolio-filter button.active {
   background: var(--color-primary-500);
   color: var(--color-text-light);
   border-color: var(--color-primary-500);
}

/* SECTION TITLE — унифицированное оформление h2 в .section */
.section > .container > h2 {
   text-align: center;
   margin: 0 0 var(--space-4);
}
@media (min-width: 1024px) {
   .section > .container > h2 {
      margin-bottom: var(--space-5);
   }
}