*,
   *::before,
   *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }

   html {
     scroll-behavior: smooth;
     font-size: 17px;
   }

   body {
     font-family: "Roboto", sans-serif;
     color: #18181b;
   }

   p,
   li {
     line-height: 1.75;
   }

   img {
     display: block;
     max-width: 100%;
   }

   a {
     text-decoration: none;
   }

   button {
     cursor: pointer;
     font-family: inherit;
   }

   /* ── HEADER ── */
   .header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 50;
     background: #000;
   }

   .header__topbar {
     border-bottom: 1px solid rgba(63, 63, 70, 0.4);
     display: none;
   }

   @media(min-width:1025px) {
     .header__topbar {
       display: block;
     }
   }

   .header__topbar-inner {
     max-width: 1152px;
     margin: 0 auto;
     padding: 10px 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 12px;
     letter-spacing: 0.08em;
     color: #f5f5f5;
   }

   .header__topbar-inner a {
     color: #f5f5f5;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: color .2s;
   }

   .header__topbar-inner a:hover {
     color: #d64521;
   }

   .header__main {
     max-width: 1152px;
     margin: 0 auto;
     padding: 20px 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }

   .header__logo {
     color: #fff;
     font-size: 20px;
     font-weight: 900;
     letter-spacing: 0.15em;
     text-transform: uppercase;
   }

   .header__logo:hover {
     color: #fff;
   }

   .header__nav {
     display: none;
     align-items: center;
     gap: 20px;
   }

   @media(min-width:1025px) {
     .header__nav {
       display: flex;
     }
   }

   .header__nav a {
     font-size: 14px;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: #f5f5f5;
     transition: color .2s;
     font-weight: 500;
   }

   .header__nav a:hover {
     color: #d64521;
   }

   .header__burger {
     display: flex;
     background: none;
     border: none;
     color: #f5f5f5;
     padding: 4px;
   }

   .header__burger:hover {
     color: #fff;
   }

   @media(min-width:1025px) {
     .header__burger {
       display: none;
     }
   }

   .header__burger svg {
     width: 24px;
     height: 24px;
   }

   .header__mobile-nav {
     display: none;
     border-top: 1px solid rgba(63, 63, 70, 0.4);
   }

   .header__mobile-nav.open {
     display: block;
   }

   .header__mobile-nav-inner {
     padding: 24px;
     display: flex;
     flex-direction: column;
     gap: 4px;
   }

   .header__mobile-nav a {
     font-size: 14px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: #f5f5f5;
     padding: 12px 0;
     border-bottom: 1px solid rgba(63, 63, 70, 0.3);
     display: block;
     transition: color .2s;
   }

   .header__mobile-nav a:hover {
     color: #d64521;
   }

   .header__mobile-extra {
     margin-top: 16px;
     padding-top: 16px;
     display: flex;
     flex-direction: column;
     gap: 12px;
   }

   .header__mobile-extra a {
     font-size: 12px;
     color: #f5f5f5;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: color .2s;
   }

   .header__mobile-extra a:hover {
     color: #d64521;
   }

   .header__topbar-link {
     width: 25px;
     height: 25px;
     fill: currentColor;
     transition: fill 0.3s ease;
   }

   /* ── HERO ── */
   #hero {
     position: relative;
     background: #fff;
     overflow: hidden;
     top: 40px;
   }

   .hero__bg-mobile {
     display: none;
     position: absolute;
     inset: 0;
     background-image: url('../static/images/mk_hero_block.webp');
     background-size: cover;
     background-position: center;
   }

   .hero__bg-mobile::after {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.70);
   }

   @media(max-width:1025px) {
     .hero__bg-mobile {
       display: block;
     }
   }

   .hero__inner {
     position: relative;
     max-width: 1152px;
     margin: 0 auto;
     padding: 128px 24px 0;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 48px;
   }

   @media(max-width:1024px) {
     .hero__inner {
       align-items: center;
     }
   }

   @media(min-width:1025px) {
     .hero__inner {
       flex-direction: row;
       align-items: flex-end;
       padding-top: 160px;
       gap: 64px;
     }
   }

   .hero__text {
     flex: 1;
     z-index: 1;
     padding-bottom: 70px;
   }

   .hero__label {
     font-size: 12px;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: #a1a1aa;
     margin-bottom: 16px;
   }

   @media(min-width:1025px) {
     .hero__label {
       color: #71717a;
     }
   }

   .hero__h1 {
     font-size: clamp(48px, 8vw, 54px);
     font-weight: 700;
     line-height: 1;
     letter-spacing: 0.02em;
     margin-bottom: 32px;
     color: #fff;
   }

   @media(min-width:1025px) {
     .hero__h1 {
       color: #18181b;
     }
   }

   .hero__desc {
     font-size: 16px;
     color: #d4d4d8;
     max-width: 500px;
     margin-bottom: 24px;
   }

   @media(min-width:1025px) {
     .hero__desc {
       color: #52525b;
     }
   }

   .hero__list {
     list-style: none;
     margin-bottom: 32px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     font-size: 15px;
     color: #d4d4d8;
   }

   @media(min-width:1025px) {
     .hero__list {
       color: #52525b;
     }
   }

   .hero__list li {
     display: flex;
     align-items: flex-start;
     gap: 8px;
   }

   .hero__list li::before {
     content: '—';
     color: #d64521;
     flex-shrink: 0;
     margin-top: 2px;
   }

   .hero__coupon {
     border: 1px dashed rgba(239, 68, 68, 0.5);
     background: rgba(127, 29, 29, 0.25);
     padding: 20px 20px;
     margin-bottom: 32px;
     display: inline-flex;
     align-items: center;
     gap: 12px;
     width: 100%;
     position: relative;
     justify-content: center;
   }

   @media(min-width:1025px) {
     .hero__coupon {
       border-color: #fca5a5;
       background: rgba(254, 242, 242, 0.85);
     }
   }

   .hero__coupon svg {
     flex-shrink: 0;
     color: #ef4444;
     width: 20px;
     height: 20px;
   }

   .hero__coupon p {
     font-size: 16px;
   }

   .hero__coupon .accent {
     color: #d64521;
     font-weight: 700;
   }

   .hero__coupon::before {
     content: "Купон на скидку";
     position: absolute;
     top: -11px;
     left: 18px;
     padding: 4px 8px;
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     background: #d64521;
     color: #ffffff;
     border: 1px solid rgba(239, 68, 68, 0.5);
   }

   .muted {
     color: #d4d4d8
   }

   @media(min-width:1025px) {
     .hero__coupon .muted {
       color: #52525b;
     }
   }

   .hero__btns {
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
   }

   .btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 16px 32px;
     background: #d64521;
     color: #fff;
     font-size: 12px;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     font-weight: 500;
     border: none;
     transition: background .2s;
     flex-grow: 1;
     justify-content: center;
   }

   .btn-primary:hover {
     background: #991b1b;
   }

   .btn-primary svg {
     width: 16px;
     height: 16px;
   }

   .btn-secondary {
     display: inline-flex;
     align-items: center;
     padding: 16px 32px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     color: #fff;
     font-size: 12px;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     font-weight: 500;
     background: none;
     transition: border-color .2s, color .2s;
     flex-grow: 1;
     justify-content: center;
   }

   @media(min-width:1025px) {
     .btn-secondary {
       border-color: #d4d4d8;
       color: #3f3f46;
     }

     .btn-secondary:hover {
       border-color: #d64521;
       color: #d64521;
     }
   }

   .btn-secondary:hover {
     border-color: #d64521;
     color: #d64521;
   }

   .hero__photo {
     display: none;
     flex-shrink: 0;
     width: 420px;
   }

   @media(min-width:1025px) {
     .hero__photo {
       width: 515px;
     }
   }

   @media(min-width:1025px) {
     .hero__photo {
       display: block;
     }
   }

   .hero__photo img {
     width: 100%;
     height: auto;
     object-fit: cover;
   }

   /* ── ABOUT ── */
   #about {
     background: radial-gradient(ellipse at top, #1a0505 0%, #0a0000 50%, #000 100%);
   }

   .about__inner {
     max-width: 1152px;
     margin: 0 auto;
     padding: 40px 24px 60px 24px;
     display: flex;
     flex-direction: column;
     gap: 48px;
   }

   @media(min-width:769px) {
     .about__inner {
       flex-direction: row;
       align-items: flex-start;
       gap: 64px;
       padding: 112px 24px;
     }
   }

   .about__photos {
     width: 100%;
     flex-shrink: 0;
   }

   @media(min-width:769px) {
     .about__photos {
       width: auto;
     }
   }

   /* Mobile carousel */
   .about__carousel {
     position: relative;
     width: calc(100% + 48px);
     margin-left: -24px;
     height: 450px;
     overflow: hidden;
   }

   @media(min-width:769px) {
     .about__carousel {
       display: none;
     }
   }

   @media(max-width:768px) {
     .about__carousel {
       height: 750px;
     }
   }

   @media(max-width:430px) {
     .about__carousel {
       height: 450px;
     }
   }

   .about__carousel-img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: opacity .5s;
   }

   .about__carousel-img.hidden {
     opacity: 0;
     pointer-events: none;
   }

   .about__carousel-dots {
     position: absolute;
     bottom: 12px;
     left: 0;
     right: 0;
     display: flex;
     justify-content: center;
     gap: 8px;
   }

   .about__carousel-dot {
     height: 6px;
     width: 6px;
     background: rgba(255, 255, 255, 0.4);
     border: none;
     padding: 0;
     transition: width .3s, background .3s;
   }

   .about__carousel-dot.active {
     width: 20px;
     background: #d64521;
   }

   .about__carousel-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: rgba(255, 255, 255, 0.6);
     font-size: 36px;
     line-height: 1;
     padding: 0 12px;
     transition: color .2s;
   }

   .about__carousel-arrow:hover {
     color: #fff;
   }

   .about__carousel-arrow.left {
     left: 0;
   }

   .about__carousel-arrow.right {
     right: 0;
   }

   .about__carousel-arrow.disabled {
     opacity: 0.2;
   }

   /* Desktop two columns */
   .about__desktop-photos {
     display: none;
     gap: 16px;
     flex-shrink: 0;
   }

   @media(min-width:769px) {
     .about__desktop-photos {
       display: flex;
     }
   }

   .about__desktop-photos .col1 {
     width: 208px;
     overflow: hidden;
   }

   .about__desktop-photos .col2 {
     width: 208px;
     overflow: hidden;
     margin-top: 48px;
   }

   @media(min-width:1024px) {

     .about__desktop-photos .col1,
     .about__desktop-photos .col2 {
       width: 240px;
     }
   }

   .about__desktop-photos img {
     width: 100%;
     height: 320px;
     object-fit: cover;
     filter: grayscale(100%);
     transition: filter .5s;
   }

   .about__desktop-photos img:hover {
     filter: grayscale(0%);
   }

   .about__text {
     flex: 1;
   }

   .about__h2 {
     font-size: clamp(24px, 4vw, 36px);
     font-weight: 900;
     color: #fff;
     letter-spacing: -0.01em;
     margin-bottom: 32px;
   }

   .about__body {
     display: flex;
     flex-direction: column;
     gap: 16px;
     font-size: 16px;
     color: #d4d4d8;
   }

   .about__body strong {
     color: #fff;
   }

   .about__body .muted {
     color: #ccc;
     font-style: italic;
   }

   .about__list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 8px;
   }

   .about__list li {
     display: flex;
     align-items: flex-start;
     gap: 8px;
   }

   .about__list li::before {
     content: '—';
     color: #d64521;
     flex-shrink: 0;
     margin-top: 2px;
   }

   .about__coupon {
     margin-top: 32px;
     border: 1px dashed rgba(127, 29, 29, 0.5);
     padding: 20px 20px;
     display: inline-flex;
     align-items: center;
     gap: 12px;
     width: 100%;
     justify-content: center;
     position: relative;
   }

   .about__coupon::before {
     content: "Купон на скидку";
     position: absolute;
     top: -11px;
     left: 18px;
     padding: 4px 8px;
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     background: #0a0000;
     color: #ffffff;
     border: 1px dashed rgba(127, 29, 29, 0.5);
   }

   .about__coupon svg {
     flex-shrink: 0;
     color: #d64521;
     width: 20px;
     height: 20px;
   }

   .about__coupon .accent {
     color: #d64521;
     font-weight: 700;
   }

   .about__coupon .muted {
     color: #d4d4d8;
   }

   /* ── PORTFOLIO ── */
   #portfolio {
     background: #fff;
     padding: 80px 0;
   }

   @media(min-width:768px) {
     #portfolio {
       padding: 112px 0;
     }
   }

   .portfolio__inner {
     max-width: 1152px;
     margin: 0 auto;
     padding: 0 24px;
   }

   .portfolio__h2 {
     font-size: clamp(24px, 4vw, 36px);
     font-weight: 900;
     color: #18181b;
     letter-spacing: -0.01em;
     text-align: center;
     margin-bottom: 32px;
   }

   .portfolio__filters {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 8px;
     margin-bottom: 40px;
   }

   .filter-btn {
     padding: 10px 20px;
     font-size: 12px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     border: 1px solid #d4d4d8;
     background: none;
     color: #d4d4d8;
     transition: all .2s;
     background: #18181b;
   }

   .filter-btn:hover {
     border-color: #3f3f46;
     color: #3f3f46;
     background: #fff;
   }

   .filter-btn.active {
     background: #d64521;
     border-color: #d64521;
     color: #fff;
   }

   .portfolio__grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2px;
     width: 100%;
   }

   .portfolio__item {
     position: relative;
     aspect-ratio: 1;
     overflow: hidden;
     cursor: pointer;
   }

   .portfolio__item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s;
     display: block;
   }

   .portfolio__item:hover img {
     transform: scale(1.1);
   }

   .portfolio__item-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0);
     transition: background .3s;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .portfolio__item:hover .portfolio__item-overlay {
     background: rgba(0, 0, 0, 0.4);
   }

   .portfolio__item-overlay svg {
     opacity: 0;
     transition: opacity .3s;
     color: #fff;
     width: 32px;
     height: 32px;
   }

   .portfolio__item:hover .portfolio__item-overlay svg {
     opacity: 1;
   }

   .portfolio__loadmore {
     display: flex;
     justify-content: center;
     margin-top: 40px;
   }

   .portfolio__loadmore button {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 16px 32px;
     border: 1px solid #3f3f46;
     background: none;
     color: #3f3f46;
     font-size: 12px;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     transition: border-color .2s, color .2s;
   }

   .portfolio__loadmore button:hover {
     border-color: #d64521;
     color: #d64521;
   }

   .portfolio__loadmore button svg {
     width: 16px;
     height: 16px;
   }

   /* Modal */
   .modal {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 200;
     background: rgba(0, 0, 0, 0.95);
     align-items: center;
     justify-content: center;
   }

   .modal.open {
     display: flex;
   }

   .modal img {
     max-height: 85vh;
     max-width: 90vw;
     object-fit: contain;
   }

   .modal__close {
     position: absolute;
     top: 24px;
     right: 24px;
     background: none;
     border: none;
     color: #a1a1aa;
     font-size: 32px;
     line-height: 1;
     transition: color .2s;
   }

   .modal__close:hover {
     color: #fff;
   }

   .modal__prev,
   .modal__next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: #a1a1aa;
     font-size: 48px;
     line-height: 1;
     padding: 0 16px;
     z-index: 10;
     transition: color .2s;
   }

   .modal__prev:hover,
   .modal__next:hover {
     color: #fff;
   }

   .modal__prev {
     left: 0;
   }

   .modal__next {
     right: 0;
   }

   /* ── PROCESS ── */
   #process {
     background: radial-gradient(ellipse at bottom, #1a0505 0%, #0a0000 50%, #000 100%);
     padding: 80px 0;
   }

   @media(min-width:768px) {
     #process {
       padding: 112px 0;
     }
   }

   .process__inner {
     max-width: 1152px;
     margin: 0 auto;
     padding: 0 24px;
   }

   .process__grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 24px;
   }

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

   .process__card {
     border: 1px solid rgba(63, 63, 70, 0.5);
     background: rgba(0, 0, 0, 0.4);
     backdrop-filter: blur(4px);
     padding: 32px;
     transition: border-color .2s;
   }

   .process__icon {
     width: 56px;
     height: 56px;
     border: 1px solid #3f3f46;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 24px;
     transition: border-color .2s;
     background: #fff;
   }

   .process__icon svg {
     width: 24px;
     height: 24px;
     fill: #000;
     transition: color .2s;
   }

   .process__card h3 {
     color: #fff;
     font-weight: 700;
     font-size: 17px;
     margin-bottom: 12px;
   }

   .process__card p {
     color: #d4d4d8;
     font-size: 14px;
     line-height: 1.75;
   }

   .process__cta {
     display: flex;
     justify-content: center;
     margin-top: 48px;
   }

   .process__btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 16px 32px;
     background: #140303;
     color: #fff;
     font-size: 12px;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     font-weight: 500;
     border: none;
     transition: background .2s;
     justify-content: center;
     border: 1px solid #fff;
   }

   .process__btn-primary:hover {
     background: #d64521;
     border: 1px solid #d64521;
   }

   /* ── PRICING ── */
   #pricing {
     background: #fff;
     padding: 80px 0;
   }

   @media(min-width:768px) {
     #pricing {
       padding: 112px 0;
     }
   }

   .pricing__inner {
     max-width: 768px;
     margin: 0 auto;
     padding: 0 24px;
   }

   .pricing__h2 {
     font-size: clamp(24px, 4vw, 36px);
     font-weight: 900;
     color: #18181b;
     letter-spacing: -0.01em;
     text-align: center;
     margin-bottom: 48px;
   }

   .pricing__table-wrap {
     border: 1px solid #e4e4e7;
     overflow: hidden;
   }

   .pricing__table {
     width: 100%;
     border-collapse: collapse;
   }

   .pricing__table thead tr {
     background: #18181b;
   }

   .pricing__table th {
     text-align: left;
     padding: 16px 24px;
     font-size: 12px;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: #fafafa;
     font-weight: 500;
   }

   .pricing__table th:last-child {
     text-align: right;
   }

   .pricing__table tbody tr {
     border-top: 1px solid #f4f4f5;
     transition: background .2s;
   }

   .pricing__table tbody tr:hover {
     background: #fafafa;
   }

   .pricing__table td {
     padding: 20px 24px;
     vertical-align: top;
   }

   .pricing__table td:last-child {
     text-align: right;
     font-weight: 700;
     color: #18181b;
     font-size: 14px;
     white-space: nowrap;
     vertical-align: middle;
   }

   .pricing__size {
     font-weight: 700;
     font-size: 14px;
     color: #18181b;
     display: block;
   }

   .pricing__desc {
     font-size: 12px;
     color: #71717a;
     margin-top: 4px;
     display: block;
   }

   .pricing__note {
     font-size: 12px;
     color: #a1a1aa;
     margin-top: 16px;
     line-height: 1.75;
   }

   /* ── CLIENT INFO ── */
   #clients {
     background: radial-gradient(ellipse at top, #1a0505 0%, #0a0000 50%, #000 100%);
     padding: 80px 0;
   }

   @media(min-width:768px) {
     #clients {
       padding: 112px 0;
     }
   }

   .clients__inner {
     max-width: 768px;
     margin: 0 auto;
     padding: 0 24px;
   }

   .clients__h2 {
     font-size: clamp(24px, 4vw, 36px);
     font-weight: 900;
     color: #fff;
     letter-spacing: -0.01em;
     text-align: center;
     margin-bottom: 48px;
   }

   .clients__tabs {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 8px;
     margin-bottom: 32px;
   }

   .tab-btn {
     padding: 10px 20px;
     font-size: 12px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     border: 1px solid #fff;
     background: none;
     color: #fff;
     transition: all .2s;
     flex-grow: 1;
   }

   @media(max-width:480px) {
     .tab-btn {
       flex: 1 1 calc(50% - 8px);
     }
   }

   .tab-btn:hover {
     border-color: #d64521;
     color: #d4d4d8;
   }

   .tab-btn.active {
     background: #d64521;
     border-color: #d64521;
     color: #fff;
   }

   .tab-panel {
     display: none;
     border: 1px solid #27272a;
     background: rgba(0, 0, 0, 0.4);
     padding: 24px;
     margin-bottom: 56px;
   }

   .tab-panel.active {
     display: block;
   }

   .tab-panel p {
     color: #d4d4d8;
     font-size: 15px;
     line-height: 1.75;
   }

   .clients__faq-title {
     font-size: 20px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 24px;
   }

   .faq-item {
     border: 1px solid #27272a;
     background: rgba(0, 0, 0, 0.4);
     margin-bottom: 12px;
   }

   .faq-q {
     width: 100%;
     padding: 16px 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: none;
     border: none;
     text-align: left;
     color: #fff;
     font-size: 14px;
     font-weight: 500;
     gap: 12px;
   }

   .faq-q svg {
     flex-shrink: 0;
     width: 16px;
     height: 16px;
     color: #71717a;
     transition: transform .2s;
   }

   .faq-q.open svg {
     transform: rotate(180deg);
   }

   .faq-a {
     display: none;
     padding: 0 24px 16px;
   }

   .faq-a.open {
     display: block;
   }

   .faq-a p {
     color: #d4d4d8;
     font-size: 14px;
     line-height: 1.75;
   }

   /* ── CONTACTS ── */
   #contacts {
     background: #fff;
     padding: 80px 0;
   }

   @media(min-width:768px) {
     #contacts {
       padding: 112px 0;
     }
   }

   .contacts__inner {
     max-width: 768px;
     margin: 0 auto;
     padding: 0 24px;
   }

   .contacts__h2 {
     font-size: clamp(24px, 4vw, 36px);
     font-weight: 900;
     color: #18181b;
     letter-spacing: -0.01em;
     margin-bottom: 16px;
   }

   .contacts__intro {
     color: #71717a;
     margin-bottom: 40px;
     font-size: 15px;
   }

   .discount-block {
     border: 1px solid #e4e4e7;
     margin-bottom: 48px;
   }

   .discount-block__tag {
     background: #b91c1c;
     padding: 8px 24px;
     display: inline-block;
   }

   .discount-block__tag span {
     color: #fff;
     font-size: 12px;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     font-weight: 500;
   }

   .discount-block__body {
     padding: 24px 24px 32px;
   }

   .discount-block__h3 {
     font-size: 20px;
     font-weight: 700;
     color: #18181b;
     margin-bottom: 32px;
   }

   .discount-steps {
     display: grid;
     grid-template-columns: 1fr;
     gap: 16px;
     margin-bottom: 24px;
   }

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

   .discount-step {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: 16px;
     border: 1px solid #f4f4f5;
     background: #fafafa;
   }

   .discount-step.highlight {
     border-color: #fecaca;
     background: #fff5f5;
   }

   .discount-step__num {
     width: 32px;
     height: 32px;
     background: #18181b;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     font-weight: 700;
     flex-shrink: 0;
   }

   .discount-step.highlight .discount-step__num {
     background: #b91c1c;
   }

   .discount-step__title {
     font-weight: 700;
     font-size: 14px;
     color: #18181b;
     display: block;
   }

   .discount-step.highlight .discount-step__title {
     color: #b91c1c;
   }

   .discount-step__desc {
     font-size: 12px;
     color: #71717a;
     display: block;
     margin-top: 2px;
   }

   .discount-note {
     font-size: 12px;
     color: #a1a1aa;
     line-height: 1.75;
   }

   .contact-btns {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     margin-bottom: 48px;
   }

   .cta-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 16px 24px;
     font-size: 14px;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     text-decoration: none;
     border-radius: 8px;
     flex: 1;
     min-width: 200px;
     transition: background 0.2s ease;
     font-weight: 500;
   }

   .cta-btn.tg {
     background: #0088cc;
     color: #fff;
   }

   .cta-btn.tg:hover {
     background: #009fda;
   }

   .cta-btn.vk {
     background: #4c75a3;
     color: #fff;
   }

   .cta-btn.vk:hover {
     background: #5a8ab8;
   }

   @media (max-width: 480px) {
     .contact-btns {
       flex-direction: column;
     }

     .cta-btn {
       min-width: unset;
     }
   }

   .contact-btns a {
     flex: 1;
   }

   .contacts__map-title {
     font-size: 20px;
     font-weight: 700;
     color: #18181b;
     margin-bottom: 16px;
     text-align: center;
   }

   /* ── FOOTER ── */
   footer {
     background: #000;
     border-top: 1px solid rgba(63, 63, 70, 0.4);
     padding: 32px 24px;
     text-align: center;
   }

   footer p {
     font-size: 12px;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: #3f3f46;
     line-height: 2;
   }

   /* Utility */
   .section-title {
     font-size: clamp(24px, 4vw, 36px);
     font-weight: 900;
     letter-spacing: -0.01em;
   }

   ul {
     list-style: none;
     padding: 0;
   }

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

   /* HEADER */
   .page-header {
     border-bottom: 2px solid #27272a;
     padding-bottom: 28px;
     margin-bottom: 40px;
   }

   .site-label {
     font-size: 12px;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: #b91c1c;
     margin-bottom: 12px;
   }

   .page-title {
     font-size: 42px;
     font-weight: 900;
     letter-spacing: -.02em;
     color: #fff;
     line-height: 1.05;
     margin-bottom: 8px;
   }

   .page-sub {
     font-size: 16px;
     color: rgba(255, 255, 255, 0.5);
   }

   /* INTRO */
   .intro {
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 12px;
     font-size: 16px;
   }

   .intro-list {
     margin-bottom: 36px;
   }

   .intro-list li {
     display: flex;
     gap: 12px;
     color: rgba(255, 255, 255, 0.7);
     font-size: 16px;
     margin-bottom: 5px;
   }

   .dash {
     color: #b91c1c;
     flex-shrink: 0;
   }

   /* SECTIONS */
   .section {
     margin-bottom: 36px;
   }

   .section-h {
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .14em;
     color: #fff;
     margin-bottom: 16px;
     border-left: 3px solid #b91c1c;
     padding-left: 12px;
   }

   .section ul li {
     display: flex;
     gap: 12px;
     font-size: 16px;
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 10px;
   }

   /* BOXES */
   .boxes {
     display: flex;
     gap: 16px;
     margin-bottom: 36px;
   }

   .box {
     border: 1px dashed rgba(185, 28, 28, .5);
     background: rgba(127, 29, 29, .12);
     padding: 22px;
     width: 50%;
   }



   .box.alt {
     border-color: rgba(63, 63, 70, .6);
     background: rgba(24, 24, 27, .5);
   }

   .box h4 {
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .1em;
     color: #fff;
     margin-bottom: 14px;
   }

   .box li {
     display: flex;
     gap: 10px;
     font-size: 15px;
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 8px;
     line-height: 1.6;
   }

   .num {
     color: #b91c1c;
     font-weight: 900;
     flex-shrink: 0;
   }

   /* CHECKLIST */
   .checklist {
     border: 1px solid #27272a;
     background: rgba(0, 0, 0, .4);
     padding: 24px 28px;
     margin-bottom: 36px;
   }

   .checklist h4 {
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .12em;
     color: #fff;
     margin-bottom: 16px;
   }

   .checklist li {
     display: flex;
     gap: 12px;
     font-size: 16px;
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 10px;
   }

   .icons {
     width: 20px;
     fill: #fff;
   }

   .text {
     line-height: 1;
   }

   .section-h,
   h4,
   .btn-primary {
     display: flex;
     align-items: center;
     gap: 8px;
   }

   .save-memo {
     background: rgba(24, 24, 27, .6);
     border: 1px solid #27272a;
     padding: 16px 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     margin-top: 24px;
     flex-wrap: wrap;
   }

   .save-memo-label {
     font-size: 13px;
     font-weight: 600;
     color: #fff;
   }

   .save-memo-sub {
     font-size: 12px;
     color: #52525b;
     margin-top: 5px;
   }

 @media (max-width: 768px) {
  .boxes {
    flex-direction: column; 
  }

  .box {
    width: 100%;
  }

.section-h .text {
    line-height: 1.5;
  }
}

.accent-color {
  color: #fff;
  font-weight: 700;
}

.section p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
}

.box p {
  color: rgba(255, 255, 255, 0.7);
}