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

     .card,
     .card::after {
       transition: none !important;
     }
   }

   .service-content {
     display: none;
   }

   .service-content.is-active {
     display: block;
   }

   :root {
     --accent: #cc9e40;
     --text: rgba(255, 255, 255, .92);
     --muted: rgba(255, 255, 255, .72);
     --muted2: rgba(255, 255, 255, .56);
     --line: rgba(255, 255, 255, .10);
     --card: rgba(255, 255, 255, .06);
     --card2: rgba(255, 255, 255, .08);
     --shadow: 0 18px 60px rgba(0, 0, 0, .45);
     --radius: 14px;
     --container: 1200px;
   }

   * {
     box-sizing: border-box;
   }

   html,
   body {
     height: 100%;
   }

   body {
     margin: 0;
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     background: #050607;
     color: var(--text);
   }

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

   button {
     font-family: inherit;
   }

   /* ===== Background (image now, video later) ===== */
   .hero {
     position: relative;
     width: 100%;
     overflow: hidden;
   }

   .hero__media {
     position: absolute;
     inset: 0;
     z-index: 0;
     background: #000;
   }

   .hero__media img,
   .hero__media video {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: scale(1.02);
     filter: saturate(1.05) contrast(1.05);
   }

   .hero__media::after {
     content: "";
     position: absolute;
     inset: 0;
     background:
       radial-gradient(900px 520px at 28% 24%, rgba(0, 0, 0, .10), rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .78) 100%),
       linear-gradient(90deg, rgba(0, 0, 0, .70), rgba(0, 0, 0, .44));
     pointer-events: none;
   }

   .hero__content {
     position: relative;
     z-index: 1;
     display: flex;
     flex-direction: column;
   }

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

   /* ===== Header row ===== */
   .topbar {
     height: 78px;
     display: flex;
     align-items: center;
   }

   .topbar__row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
   }

   .brand {
     display: flex;
     align-items: center;
     gap: 10px;
     min-width: 140px;
   }

   .brand img {
     height: 36px;
     width: auto;
     display: block;
   }

   .topbar__meta {
     display: flex;
     align-items: flex-start;
     gap: 18px;
     flex: 1;
     min-width: 260px;
   }

   .addr {
     display: flex;
     flex-direction: column;
     gap: 6px;
     min-width: 320px;
   }

   .addr__line {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 13px;
     line-height: 1.2;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }

   .addr__muted {
     color: var(--muted);
   }

   .addr__link {
     color: var(--text);
     border-bottom: 1px dashed rgba(255, 255, 255, .45);
     opacity: .9;
   }

   .addr__link:hover {
     opacity: 1;
     border-bottom-color: rgba(255, 255, 255, .8);
   }

   .topbar__right {
     display: flex;
     align-items: center;
     gap: 14px;
     justify-content: flex-end;
     min-width: 320px;
   }

   .contact {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 6px;
   }

   .phone {
     font-weight: 800;
     font-size: 18px;
     letter-spacing: .2px;
   }

   .hours {
     font-size: 12px;
     color: var(--muted);
   }

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

   .social a {
     width: 30px;
     height: 30px;
     border-radius: 999px;
     display: grid;
     place-items: center;
     background: rgba(255, 255, 255, .12);
     border: 1px solid rgba(255, 255, 255, .14);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     transition: transform .15s ease, background .15s ease;
   }

   .social a:hover {
     transform: translateY(-1px);
     background: rgba(255, 255, 255, .18);
   }

   .social svg {
     width: 16px;
     height: 16px;
   }

   /* Divider under header */
   .divider {
     height: 1px;
     background: var(--line);
     width: 100%;
   }


   .chev {
     width: 10px;
     height: 10px;
     display: inline-block;
     border-right: 2px solid rgba(255, 255, 255, .65);
     border-bottom: 2px solid rgba(255, 255, 255, .65);
     transform: rotate(45deg);
     margin-top: -2px;
     opacity: .85;
   }

   /* ===== Hero main ===== */
   .hero-main {
     padding: 46px 0 32px;
   }

   .hero-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 34px;
   }

   h1 {
     margin: 0;
     font-size: clamp(44px, 5.2vw, 72px);
     line-height: 1.02;
     letter-spacing: -1px;
     font-weight: 800;
     color: rgba(255, 255, 255, .95);
   }

   .h1__line {
     display: block;
   }

   .wave {
     position: relative;
     display: inline-block;
     padding-bottom: 16px;
   }

   .wave::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 4px;
     height: 10px;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 18" preserveAspectRatio="none"><path d="M0,9 C20,1 40,17 60,9 C80,1 100,17 120,9 C140,1 160,17 180,9 C200,1 220,17 240,9" fill="none" stroke="%23cc9e40" stroke-width="3" stroke-linecap="round"/></svg>') center/100% 100% no-repeat;
     opacity: .95;
   }

   .section-kicker {
     margin-top: 46px;
     font-size: 12px;
     letter-spacing: .28em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, .55);
     font-weight: 700;
   }

   /* Popular cards */
   .cards {
     display: grid;
     grid-template-columns: repeat(3, 320px);
     gap: 14px;
   }

   .card {
     background: rgba(255, 255, 255, .07);
     border: 1px solid rgba(255, 255, 255, .10);
     border-radius: 12px;
     padding: 16px 16px 14px;
     box-shadow: 0 10px 35px rgba(0, 0, 0, .25);
     cursor: pointer;
     user-select: none;
     transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
     will-change: transform;
   }

   .card.is-active {
     border-color: rgba(204, 158, 64, .75);
     box-shadow: 0 18px 55px rgba(0, 0, 0, .42);
     position: relative;
     transform: translateY(-8px);
     background: rgba(255, 255, 255, .085);
   }

   /* Arrow indicator (animated) */
   .card::after {
     content: "";
     position: absolute;
     left: 50%;
     bottom: -14px;
     width: 12px;
     height: 12px;
     border-right: 2px solid rgba(204, 158, 64, .85);
     border-bottom: 2px solid rgba(204, 158, 64, .85);
     transform: translateX(-50%) rotate(45deg) translateY(-6px) scale(.65);
     filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35));
     opacity: 0;
     pointer-events: none;
     transition: transform .35s ease, opacity .35s ease;
   }

   .card.is-active::after {
     opacity: .95;
     transform: translateX(-50%) rotate(45deg) translateY(0) scale(1);
   }

   @media (hover: hover) {
     .card:hover {
       transform: translateY(-3px);
       box-shadow: 0 14px 45px rgba(0, 0, 0, .32);
     }

     .card.is-active:hover {
       transform: translateY(-8px);
     }

     @media (hover: hover) {
       .step:hover {
         transform: translateY(-3px);
         border-color: rgba(204, 158, 64, .75);
         box-shadow: 0 16px 48px rgba(0, 0, 0, .34);
         background: rgba(255, 255, 255, .075);
       }
     }

     /* Active step (на мобилке: текущая видимая карточка) */
   }

   @media (max-width: 820px) {
     .step.is-active {
       transform: translateY(-4px);
       border-color: rgba(204, 158, 64, .75);
       box-shadow: 0 18px 55px rgba(0, 0, 0, .38);
       background: rgba(255, 255, 255, .085);
     }
   }


   .card__title {
     font-weight: 700;
     color: rgba(255, 255, 255, .92);
     margin: 0 0 10px;
     font-size: 16px;
   }

   .card__meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
     font-size: 13px;
     color: rgba(255, 255, 255, .62);
   }

   /* Заголовок + время в одну строку */
   .card__top {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 25px;
     /* сохраняем прежний отступ как был у заголовка */
   }

   .card__top .card__title {
     margin: 0;
     /* иначе старый margin-bottom ломает выравнивание */
   }

   /* Car type prices inside the active card */
   .car-prices {
     margin-top: 10px;
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 10px;
     align-items: end;
   }

   .car-price {
     padding: 0;
     text-align: center;
   }

   .car-price img {
     width: 100%;
     height: 25px;
     object-fit: contain;
     display: block;
     /* Tint to ~ #cc9e40 (gold). If you want it warmer/colder, we can fine-tune this filter. */
     filter:
       brightness(0) saturate(100%) invert(71%) sepia(26%) saturate(950%) hue-rotate(351deg) brightness(92%) contrast(92%) drop-shadow(0 8px 16px rgba(0, 0, 0, .28));
     margin: 0 0 6px;
   }

   .car-price__value {
     margin: 0;
     font-size: 13px;
     font-weight: 600;
     color: rgba(255, 255, 255, .62);
   }

   @media (max-width: 820px) {
     .car-prices {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }

     .car-price img {
       height: 25px;
     }
   }

   /* Right column content */
   .rightcol {
     padding-top: 10px;
   }

   .bigtext {
     margin: 0;
     font-size: clamp(22px, 2.4vw, 30px);
     line-height: 1.15;
     font-weight: 800;
     color: rgba(255, 255, 255, .92);
   }

   .subtext {
     margin: 12px 0 0;
     max-width: 720px;
     font-size: 15px;
     line-height: 1.45;
     font-weight: 600;
     color: rgba(255, 255, 255, .70);
   }

   @media (max-width: 820px) {
     .subtext {
       font-size: 14px;
       margin-top: 10px;
     }
   }

   .steps {
     margin-top: 34px;
     display: flex;
     gap: 28px;
     overflow-x: auto;
     overflow-y: hidden;
     padding-bottom: 10px;
     padding-top: 7px;
     -webkit-overflow-scrolling: touch;
     scroll-snap-type: x mandatory;
     flex-wrap: nowrap;
     width: 100%;
     touch-action: pan-x;
     overscroll-behavior-x: contain;
   }

   .steps::-webkit-scrollbar {
     height: 8px;
   }

   .steps::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, .18);
     border-radius: 999px;
   }

   .steps::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, .06);
     border-radius: 999px;
   }

   .step {
     width: 200px;
     min-width: 200px;
     max-width: 200px;
     min-height: 94px;
     padding: 14px 14px 12px;
     border-radius: 12px;
     background: rgba(255, 255, 255, .06);
     border: 1px solid rgba(255, 255, 255, .10);
     box-shadow: 0 10px 35px rgba(0, 0, 0, .22);
     scroll-snap-align: start;
     flex: 0 0 auto;
     transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
     will-change: transform;
   }

   .step__n {
     color: var(--accent);
     font-weight: 900;
     font-size: 34px;
     letter-spacing: -1px;
     margin-bottom: 10px;
     line-height: 1;
   }

   .step__t {
     color: rgba(255, 255, 255, .72);
     font-size: 13px;
     line-height: 1.35;
     font-weight: 600;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }

   /* Bottom subtle line like in screenshot */
   .hero-bottom-line {
     margin-top: 44px;
     height: 1px;
     background: rgba(255, 255, 255, .10);
     width: 100%;
   }

   .hero-bottom {
     margin-bottom: -25px;
     padding-top: 10px;
   }

   /* ===== Responsive ===== */
   @media (max-width: 1100px) {
     .hero-grid {
       grid-template-columns: 1fr;
       gap: 26px;
     }

     .topbar__right {
       min-width: 0;
     }

     .addr {
       min-width: 0;
     }
   }

   @media (max-width: 820px) {
     .topbar {
       height: auto;
       padding: 12px 0;
     }

     /* Mobile header layout: logo left, contact+social right, address below */
     .topbar__row {
       display: grid;
       grid-template-columns: 1fr auto;
       grid-template-areas:
         "brand right"
         "meta meta";
       align-items: start;
       column-gap: 14px;
       row-gap: 12px;
     }

     .brand {
       grid-area: brand;
       min-width: 0;
     }

     .topbar__right {
       grid-area: right;
     }

     .topbar__meta {
       grid-area: meta;
       flex-basis: auto;
       order: 0;
       min-width: 0;
     }

     .topbar__right {
       justify-content: flex-end;
       flex-direction: column;
       align-items: flex-end;
       gap: 10px;
     }

     .topbar__meta {
       margin-top: -70px;
       justify-content: flex-start;
     }

     .addr {
       min-width: 0;
     }

     .addr__line {
       white-space: normal;
       overflow: visible;
       text-overflow: unset;
       align-items: flex-start;
     }

     .contact {
       align-items: flex-end;
       text-align: right;
     }

     .social {
       justify-content: flex-end;
       margin-top: 20px;
     }

     .social a {
       width: 32px;
       height: 32px;
     }

     /* Cards in one line on mobile (horizontal scroll) */
     .cards {
       display: flex;
       flex-wrap: nowrap;
       gap: 14px;
       overflow-x: auto;
       overflow-y: hidden;
       width: 100%;
       padding-top: 8px;
       padding-bottom: 20px;
       -webkit-overflow-scrolling: touch;
       scroll-snap-type: x mandatory;
       touch-action: pan-x;
       overscroll-behavior-x: contain;
     }

     .cards>.card {
       flex: 0 0 280px;
       /* card width on mobile */
       scroll-snap-align: center;
     }

     /* Give the snap some breathing room so edge cards can center */
     .cards {
       margin-top: -10px;
       scroll-padding-left: 50%;
       scroll-padding-right: 50%;
     }

     .cards::-webkit-scrollbar {
       height: 8px;
     }

     .cards::-webkit-scrollbar-thumb {
       background: rgba(255, 255, 255, .18);
       border-radius: 999px;
     }

     .cards::-webkit-scrollbar-track {
       background: rgba(255, 255, 255, .06);
       border-radius: 999px;
     }
   }

   .section-title {
     margin: 0;
     font-size: clamp(22px, 3.2vw, 34px);
     line-height: 1.15;
     font-weight: 800;
     letter-spacing: -0.02em;
     color: rgba(255, 255, 255, .95);
     max-width: 980px;
   }

   html,
   body {
     background: #000;
   }

   /* Tweak here: hero video darkening (desktop vs mobile) */
   :root {
     --hero-overlay-desktop: .70;
     /* 0..1 : darker on desktop */
     --hero-overlay-mobile: .75;
     /* 0..1 : darker on mobile */
   }

   .hero {
     position: relative;
     margin-bottom: 30px;
     background: transparent;
   }

   .hero__media {
     position: absolute;
     inset: 0;
     z-index: 0;
     overflow: hidden;
   }

   .hero__video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
   }

   /* Slight dark overlay for readability */
   .hero__media::after {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, var(--hero-overlay-desktop));
     pointer-events: none;
   }

   .hero__content {
     position: relative;
     z-index: 1;
   }

   /* Hero: do not stretch to full viewport height on desktop; hug content */

   /* Extras section */
   .extras {
     position: relative;
     padding: 2px 0 20px;
   }

   .extras::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: -40px;
     height: 180px;
     pointer-events: none;
     background: linear-gradient(to bottom,
         rgba(0, 0, 0, .88),
         rgba(0, 0, 0, .72) 50%,
         rgba(0, 0, 0, 0));
   }

   /* Benefits */
   .benefits {
     position: relative;
     padding: 1px 0 72px;
   }

   .benefits__title {
     margin: 0;
     font-size: clamp(28px, 4vw, 44px);
     line-height: 1.1;
     font-weight: 900;
     letter-spacing: -0.02em;
     color: rgba(255, 255, 255, .96);
   }

   .benefits__lead {
     margin: 12px 0 0;
     max-width: 980px;
     color: rgba(255, 255, 255, .78);
     font-weight: 600;
     line-height: 1.55;
   }

   .benefits__grid {
     margin-top: 26px;
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 26px 22px;
   }

   .benefit {
     display: grid;
     justify-items: center;
     text-align: center;
     gap: 12px;
     padding: 10px 6px;
   }

   .benefit__iconwrap {
     width: 44px;
     height: 44px;
     border-radius: 14px;
     display: grid;
     place-items: center;
     background: linear-gradient(180deg,
         rgba(204, 158, 64, .22),
         rgba(204, 158, 64, .08));
     border: 1px solid rgba(255, 255, 255, .10);
     box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
   }

   .benefit__icon {
     width: 22px;
     height: 22px;
     color: rgba(204, 158, 64, .92);
     fill: currentColor;
   }

   .benefit__text {
     color: rgba(255, 255, 255, .86);
     font-weight: 600;
     /* was 700 */
     font-size: 13.5px;
     line-height: 1.4;
   }

   .section-title {
     margin: 0;
     font-size: clamp(22px, 3.2vw, 34px);
     line-height: 1.15;
     font-weight: 800;
     letter-spacing: -0.02em;
     color: rgba(255, 255, 255, .95);
     max-width: 980px;
     position: relative;
     z-index: 1;
   }

   .extras__list {
     margin-top: 5px;
     position: relative;
     z-index: 1;
   }

   /* Accordion card (glass style) */
   .acc {
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, .14);
     background: rgba(0, 0, 0, .32);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
     overflow: hidden;
     max-width: 720px;
   }

   .acc.is-open {
     border-color: rgba(204, 158, 64, .55);
     box-shadow: 0 18px 55px rgba(0, 0, 0, .42);
     background: rgba(0, 0, 0, .28);
   }

   .acc__head {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
     padding: 18px 18px;
     background: transparent;
     border: 0;
     color: rgba(255, 255, 255, .95);
     cursor: pointer;
     text-align: left;
     border-bottom: 1px solid rgba(255, 255, 255, .10);
     transition: background-color .18s ease;
   }

   .acc:not(.is-open) .acc__head {
     border-bottom-color: transparent;
   }

   .acc__title {
     font-size: 18px;
     font-weight: 800;
     letter-spacing: -0.01em;
   }

   .acc__chev {
     width: 10px;
     height: 10px;
     border-right: 2px solid rgba(204, 158, 64, .92);
     border-bottom: 2px solid rgba(204, 158, 64, .92);
     transform: translateY(0) rotate(45deg);
     transition: transform .22s ease;
     flex: 0 0 auto;
     margin-top: -2px;
   }

   .acc.is-open .acc__chev {
     transform: translateY(0) rotate(225deg);
   }

   .acc__body {
     padding: 0;
     color: rgba(255, 255, 255, .78);

     height: 0;
     overflow: hidden;
     opacity: 0;
     transform: translateY(-6px);
     transition: height .36s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, transform .22s ease;
     will-change: height, opacity, transform;
   }

   .acc.is-open .acc__body {
     opacity: 1;
     transform: translateY(0);
   }

   .acc__inner {
     padding: 14px 18px 18px;
   }

   @keyframes chevNudge {

     0%,
     100% {
       transform: translateY(0) rotate(45deg);
     }

     50% {
       transform: translateY(-4px) rotate(45deg);
     }
   }

   .acc:not(.is-open) .acc__chev {
     animation: chevNudge 1.2s ease-in-out infinite;
     opacity: .9;
   }

   @media (prefers-reduced-motion: reduce) {
     .acc:not(.is-open) .acc__chev {
       animation: none;
     }
   }

   .acc__items {
     margin: 0;
     padding: 0;
     list-style: none;
     display: grid;
     gap: 10px;
   }

   .acc__items li {
     position: relative;
     padding-left: 18px;
     line-height: 1.4;
     font-weight: 500;
   }

   .acc__items li::before {
     content: "";
     position: absolute;
     left: 0;
     top: .6em;
     width: 6px;
     height: 6px;
     border-radius: 999px;
     background: rgba(204, 158, 64, .92);
     transform: translateY(-50%);
   }


   @media (hover: hover) {
     .acc__head:hover {
       background: rgba(255, 255, 255, .04);
     }
   }

   .acc__head:active {
     background: rgba(255, 255, 255, .06);
   }

   @media (max-width: 820px) {
     .extras {
       padding: 5px 0 20px;
     }

     .acc {
       max-width: 100%;
     }

     .acc__head {
       padding: 16px 16px;
     }

     .acc__inner {
       padding: 12px 16px 16px;
     }

     .acc__title {
       font-size: 17px;
     }

     /* Hero video overlay: use mobile value */
     .hero__media::after {
       background: rgba(0, 0, 0, var(--hero-overlay-mobile));
     }

     .benefits {
       padding: 1px 0 54px;
     }

     .benefits__grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 18px 14px;
     }

     .benefit {
       justify-items: start;
       text-align: left;
       padding: 8px 0;
       grid-template-columns: 44px 1fr;
       align-items: start;
     }

     .benefit__text {
       font-size: 14px;
       font-weight: 600;
     }
   }

   @media (max-width: 420px) {
     .brand img {
       height: 32px;
     }

     .phone {
       font-size: 16px;
     }

     .benefits__grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 14px 12px;
     }

     .benefit {
       grid-template-columns: 44px 1fr;
     }

     .benefit__iconwrap {
       width: 40px;
       height: 40px;
       border-radius: 12px;
     }

     .benefit__text {
       font-size: 13.5px;
     }
   }

   html,
   body {
     background: #000;
   }

   body {
     position: relative;
   }

   /* Всё содержимое — выше шаров */
   body>* {
     position: relative;
     z-index: 1;
   }

   /* HERO должен быть выше шаров */
   .hero__media {
     z-index: 1;
   }

   .hero__content {
     z-index: 2;
   }

   /* ===== Background blobs (tweak here) ===== */
   :root {
     --blob-gold: rgba(204, 158, 64, .42);
     --blob-gold-soft: rgba(204, 158, 64, .30);
     --blob-white-soft: rgba(255, 255, 255, .14);
     --blob-blur: 92px;
     /* сильнее размытие на ПК */
     --blob-opacity: .92;
   }

   .bg-effects {
     position: fixed;
     inset: 0;
     z-index: 0;
     pointer-events: none;
     overflow: hidden;
     opacity: var(--blob-opacity);
   }

   .bg-effects .blob {
     position: absolute;
     border-radius: 999px;
     filter: blur(var(--blob-blur));
     transform: translate3d(0, 0, 0);
     will-change: transform, opacity;
     background:
       radial-gradient(circle at 35% 30%, var(--blob-white-soft), transparent 55%),
       radial-gradient(circle at 60% 55%, var(--blob-gold), transparent 62%),
       radial-gradient(circle at 45% 70%, var(--blob-gold-soft), transparent 65%);
     opacity: .95;
     animation: blobFloat 18s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
   }

   @keyframes blobPulse {

     0%,
     100% {
       opacity: .75;
       transform: scale(1) translate3d(0, 0, 0);
       filter: brightness(1);
     }

     50% {
       opacity: .95;
       transform: scale(1.12) translate3d(0, 0, 0);
       filter: brightness(1.15);
     }
   }

   @keyframes blobFloat {

     0%,
     100% {
       translate: 0 0;
     }

     50% {
       translate: 22px -18px;
     }
   }

   /* “Рандомные” позиции/размеры */
   /* “Рандомные” позиции/размеры */
   .bg-effects .blob:nth-child(1) {
     width: 380px;
     height: 380px;
     left: -160px;
     top: -170px;
     animation-duration: 22s, 7.5s;
   }

   .bg-effects .blob:nth-child(2) {
     width: 310px;
     height: 310px;
     right: -170px;
     top: 8%;
     animation-duration: 20s, 6.8s;
   }

   .bg-effects .blob:nth-child(3) {
     width: 420px;
     height: 420px;
     left: 14%;
     top: 46%;
     animation-duration: 26s, 8.2s;
   }

   .bg-effects .blob:nth-child(4) {
     width: 270px;
     height: 270px;
     right: 10%;
     top: 60%;
     animation-duration: 19s, 6.3s;
   }

   .bg-effects .blob:nth-child(5) {
     width: 350px;
     height: 350px;
     left: 58%;
     bottom: -210px;
     animation-duration: 24s, 7.1s;
   }

   .bg-effects .blob:nth-child(6) {
     width: 290px;
     height: 290px;
     left: -170px;
     bottom: 10%;
     animation-duration: 21s, 6.9s;
   }

   .bg-effects .blob:nth-child(7) {
     width: 250px;
     height: 250px;
     left: 40%;
     top: -130px;
     animation-duration: 25s, 7.0s;
   }

   .bg-effects .blob:nth-child(8) {
     width: 240px;
     height: 240px;
     right: 34%;
     bottom: 14%;
     animation-duration: 23s, 6.6s;
   }

   .bg-effects .blob:nth-child(9) {
     width: 280px;
     height: 280px;
     left: 74%;
     top: 32%;
     animation-duration: 28s, 8.0s;
   }

   .bg-effects .blob:nth-child(10) {
     width: 220px;
     height: 220px;
     left: 6%;
     bottom: -120px;
     animation-duration: 20s, 6.2s;
   }

   @media (max-width: 820px) {
     :root {
       --blob-blur: 54px;
       --blob-opacity: .82;
     }

     .bg-effects .blob:nth-child(1) {
       width: 240px;
       height: 240px;
       left: -140px;
       top: -140px;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(2) {
       width: 200px;
       height: 200px;
       right: -120px;
       top: 14%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(3) {
       width: 260px;
       height: 260px;
       left: 6%;
       top: 50%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(4) {
       width: 180px;
       height: 180px;
       right: 10%;
       top: 62%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(5) {
       width: 230px;
       height: 230px;
       left: 54%;
       bottom: -160px;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(6) {
       width: 190px;
       height: 190px;
       left: -120px;
       bottom: 16%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(7) {
       width: 170px;
       height: 170px;
       left: 42%;
       top: -110px;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(8) {
       width: 160px;
       height: 160px;
       right: 30%;
       bottom: 20%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(9) {
       width: 210px;
       height: 210px;
       left: 70%;
       top: 30%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(10) {
       width: 150px;
       height: 150px;
       left: 10%;
       bottom: -90px;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }
   }

   html,
   body {
     background: #000;
   }

   /* Tweak here: hero video darkening (desktop vs mobile) */
   :root {
     --hero-overlay-desktop: .70;
     /* 0..1 : darker on desktop */
     --hero-overlay-mobile: .75;
     /* 0..1 : darker on mobile */
   }


   .hero__media {
     position: absolute;
     inset: 0;
     z-index: 0;
     overflow: hidden;
   }

   .hero__video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
   }

   /* Slight dark overlay for readability */
   .hero__media::after {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, var(--hero-overlay-desktop));
     pointer-events: none;
   }

   .hero__content {
     position: relative;
     z-index: 1;
   }

   /* Hero: do not stretch to full viewport height on desktop; hug content */

   /* Extras section */
   .extras {
     position: relative;
     padding: 2px 0 20px;
   }

   .extras::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: -40px;
     height: 180px;
     pointer-events: none;
     background: linear-gradient(to bottom,
         rgba(0, 0, 0, .88),
         rgba(0, 0, 0, .72) 50%,
         rgba(0, 0, 0, 0));
   }

   /* Benefits */
   .benefits {
     position: relative;
     padding: 1px 0 72px;
   }

   .benefits__title {
     margin: 0;
     font-size: clamp(28px, 4vw, 44px);
     line-height: 1.1;
     font-weight: 900;
     letter-spacing: -0.02em;
     color: rgba(255, 255, 255, .96);
   }

   .benefits__lead {
     margin: 12px 0 0;
     max-width: 980px;
     color: rgba(255, 255, 255, .78);
     font-weight: 600;
     line-height: 1.55;
   }

   .benefits__grid {
     margin-top: 26px;
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 26px 22px;
   }

   .benefit {
     display: grid;
     justify-items: center;
     text-align: center;
     gap: 12px;
     padding: 10px 6px;
   }

   .benefit__iconwrap {
     width: 44px;
     height: 44px;
     border-radius: 14px;
     display: grid;
     place-items: center;
     background: linear-gradient(180deg,
         rgba(204, 158, 64, .22),
         rgba(204, 158, 64, .08));
     border: 1px solid rgba(255, 255, 255, .10);
     box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
   }

   .benefit__icon {
     width: 22px;
     height: 22px;
     color: rgba(204, 158, 64, .92);
     fill: currentColor;
   }

   .benefit__text {
     color: rgba(255, 255, 255, .86);
     font-weight: 600;
     /* was 700 */
     font-size: 13.5px;
     line-height: 1.4;
   }

   .section-title {
     margin: 0;
     font-size: clamp(22px, 3.2vw, 34px);
     line-height: 1.15;
     font-weight: 800;
     letter-spacing: -0.02em;
     color: rgba(255, 255, 255, .95);
     max-width: 980px;
     position: relative;
     z-index: 1;
   }

   .extras__list {
     margin-top: 5px;
     position: relative;
     z-index: 1;
   }

   /* Accordion card (glass style) */
   .acc {
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, .14);
     background: rgba(0, 0, 0, .32);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
     overflow: hidden;
     max-width: 720px;
   }

   .acc.is-open {
     border-color: rgba(204, 158, 64, .55);
     box-shadow: 0 18px 55px rgba(0, 0, 0, .42);
     background: rgba(0, 0, 0, .28);
   }

   .acc__head {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
     padding: 18px 18px;
     background: transparent;
     border: 0;
     color: rgba(255, 255, 255, .95);
     cursor: pointer;
     text-align: left;
     border-bottom: 1px solid rgba(255, 255, 255, .10);
     transition: background-color .18s ease;
   }

   .acc:not(.is-open) .acc__head {
     border-bottom-color: transparent;
   }

   .acc__title {
     font-size: 18px;
     font-weight: 800;
     letter-spacing: -0.01em;
   }

   .acc__chev {
     width: 10px;
     height: 10px;
     border-right: 2px solid rgba(204, 158, 64, .92);
     border-bottom: 2px solid rgba(204, 158, 64, .92);
     transform: translateY(0) rotate(45deg);
     transition: transform .22s ease;
     flex: 0 0 auto;
     margin-top: -2px;
   }

   .acc.is-open .acc__chev {
     transform: translateY(0) rotate(225deg);
   }

   .acc__body {
     padding: 0;
     color: rgba(255, 255, 255, .78);

     height: 0;
     overflow: hidden;
     opacity: 0;
     transform: translateY(-6px);
     transition: height .36s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, transform .22s ease;
     will-change: height, opacity, transform;
   }

   .acc.is-open .acc__body {
     opacity: 1;
     transform: translateY(0);
   }

   .acc__inner {
     padding: 14px 18px 18px;
   }

   @keyframes chevNudge {

     0%,
     100% {
       transform: translateY(0) rotate(45deg);
     }

     50% {
       transform: translateY(-4px) rotate(45deg);
     }
   }

   .acc:not(.is-open) .acc__chev {
     animation: chevNudge 1.2s ease-in-out infinite;
     opacity: .9;
   }

   @media (prefers-reduced-motion: reduce) {
     .acc:not(.is-open) .acc__chev {
       animation: none;
     }
   }

   .acc__items {
     margin: 0;
     padding: 0;
     list-style: none;
     display: grid;
     gap: 10px;
   }

   .acc__items li {
     position: relative;
     padding-left: 18px;
     line-height: 1.4;
     font-weight: 500;
   }

   .acc__items li::before {
     content: "";
     position: absolute;
     left: 0;
     top: .6em;
     width: 6px;
     height: 6px;
     border-radius: 999px;
     background: rgba(204, 158, 64, .92);
     transform: translateY(-50%);
   }


   @media (hover: hover) {
     .acc__head:hover {
       background: rgba(255, 255, 255, .04);
     }
   }

   .acc__head:active {
     background: rgba(255, 255, 255, .06);
   }

   @media (max-width: 820px) {
     .extras {
       padding: 5px 0 20px;
     }

     .acc {
       max-width: 100%;
     }

     .acc__head {
       padding: 16px 16px;
     }

     .acc__inner {
       padding: 12px 16px 16px;
     }

     .acc__title {
       font-size: 17px;
     }

     /* Hero video overlay: use mobile value */
     .hero__media::after {
       background: rgba(0, 0, 0, var(--hero-overlay-mobile));
     }

     .benefits {
       padding: 1px 0 54px;
     }

     .benefits__grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 18px 14px;
     }

     .benefit {
       justify-items: start;
       text-align: left;
       padding: 8px 0;
       grid-template-columns: 44px 1fr;
       align-items: start;
     }

     .benefit__text {
       font-size: 14px;
       font-weight: 600;
     }
   }

   @media (max-width: 420px) {
     .brand img {
       height: 32px;
     }

     .phone {
       font-size: 16px;
     }

     .benefits__grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 14px 12px;
     }

     .benefit {
       grid-template-columns: 44px 1fr;
     }

     .benefit__iconwrap {
       width: 40px;
       height: 40px;
       border-radius: 12px;
     }

     .benefit__text {
       font-size: 13.5px;
     }
   }

   html,
   body {
     background: #000;
   }

   body {
     position: relative;
   }

   /* Всё содержимое — выше шаров */
   body>* {
     position: relative;
     z-index: 1;
   }

   /* HERO должен быть выше шаров */
   .hero__media {
     z-index: 1;
   }

   .hero__content {
     z-index: 2;
   }

   /* ===== Background blobs (tweak here) ===== */
   :root {
     --blob-gold: rgba(204, 158, 64, .42);
     --blob-gold-soft: rgba(204, 158, 64, .30);
     --blob-white-soft: rgba(255, 255, 255, .14);
     --blob-blur: 92px;
     /* сильнее размытие на ПК */
     --blob-opacity: .92;
   }

   .bg-effects {
     position: fixed;
     inset: 0;
     z-index: 0;
     pointer-events: none;
     overflow: hidden;
     opacity: var(--blob-opacity);
   }

   .bg-effects .blob {
     position: absolute;
     border-radius: 999px;
     filter: blur(var(--blob-blur));
     transform: translate3d(0, 0, 0);
     will-change: transform, opacity;
     background:
       radial-gradient(circle at 35% 30%, var(--blob-white-soft), transparent 55%),
       radial-gradient(circle at 60% 55%, var(--blob-gold), transparent 62%),
       radial-gradient(circle at 45% 70%, var(--blob-gold-soft), transparent 65%);
     opacity: .95;
     animation: blobFloat 18s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
   }

   @keyframes blobPulse {

     0%,
     100% {
       opacity: .75;
       transform: scale(1) translate3d(0, 0, 0);
       filter: brightness(1);
     }

     50% {
       opacity: .95;
       transform: scale(1.12) translate3d(0, 0, 0);
       filter: brightness(1.15);
     }
   }

   @keyframes blobFloat {

     0%,
     100% {
       translate: 0 0;
     }

     50% {
       translate: 22px -18px;
     }
   }

   /* “Рандомные” позиции/размеры */
   /* “Рандомные” позиции/размеры */
   .bg-effects .blob:nth-child(1) {
     width: 380px;
     height: 380px;
     left: -160px;
     top: -170px;
     animation-duration: 22s, 7.5s;
   }

   .bg-effects .blob:nth-child(2) {
     width: 310px;
     height: 310px;
     right: -170px;
     top: 8%;
     animation-duration: 20s, 6.8s;
   }

   .bg-effects .blob:nth-child(3) {
     width: 420px;
     height: 420px;
     left: 14%;
     top: 46%;
     animation-duration: 26s, 8.2s;
   }

   .bg-effects .blob:nth-child(4) {
     width: 270px;
     height: 270px;
     right: 10%;
     top: 60%;
     animation-duration: 19s, 6.3s;
   }

   .bg-effects .blob:nth-child(5) {
     width: 350px;
     height: 350px;
     left: 58%;
     bottom: -210px;
     animation-duration: 24s, 7.1s;
   }

   .bg-effects .blob:nth-child(6) {
     width: 290px;
     height: 290px;
     left: -170px;
     bottom: 10%;
     animation-duration: 21s, 6.9s;
   }

   .bg-effects .blob:nth-child(7) {
     width: 250px;
     height: 250px;
     left: 40%;
     top: -130px;
     animation-duration: 25s, 7.0s;
   }

   .bg-effects .blob:nth-child(8) {
     width: 240px;
     height: 240px;
     right: 34%;
     bottom: 14%;
     animation-duration: 23s, 6.6s;
   }

   .bg-effects .blob:nth-child(9) {
     width: 280px;
     height: 280px;
     left: 74%;
     top: 32%;
     animation-duration: 28s, 8.0s;
   }

   .bg-effects .blob:nth-child(10) {
     width: 220px;
     height: 220px;
     left: 6%;
     bottom: -120px;
     animation-duration: 20s, 6.2s;
   }

   @media (max-width: 820px) {
     :root {
       --blob-blur: 54px;
       --blob-opacity: .82;
     }

     .bg-effects .blob:nth-child(1) {
       width: 240px;
       height: 240px;
       left: -140px;
       top: -140px;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(2) {
       width: 200px;
       height: 200px;
       right: -120px;
       top: 14%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(3) {
       width: 260px;
       height: 260px;
       left: 6%;
       top: 50%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(4) {
       width: 180px;
       height: 180px;
       right: 10%;
       top: 62%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(5) {
       width: 230px;
       height: 230px;
       left: 54%;
       bottom: -160px;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(6) {
       width: 190px;
       height: 190px;
       left: -120px;
       bottom: 16%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(7) {
       width: 170px;
       height: 170px;
       left: 42%;
       top: -110px;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(8) {
       width: 160px;
       height: 160px;
       right: 30%;
       bottom: 20%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(9) {
       width: 210px;
       height: 210px;
       left: 70%;
       top: 30%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(10) {
       width: 150px;
       height: 150px;
       left: 10%;
       bottom: -90px;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }
   }

   @media (prefers-reduced-motion: reduce) {
     .bg-effects .blob {
       animation: none;
       opacity: .90;
     }
   }

   html,
   body {
     background: #000;
   }

   /* Tweak here: hero video darkening (desktop vs mobile) */
   :root {
     --hero-overlay-desktop: .70;
     /* 0..1 : darker on desktop */
     --hero-overlay-mobile: .75;
     /* 0..1 : darker on mobile */
   }


   .hero__media {
     position: absolute;
     inset: 0;
     z-index: 0;
     overflow: hidden;
   }

   .hero__video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
   }

   /* Slight dark overlay for readability */
   .hero__media::after {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, var(--hero-overlay-desktop));
     pointer-events: none;
   }

   .hero__content {
     position: relative;
     z-index: 1;
   }

   /* Hero: do not stretch to full viewport height on desktop; hug content */

   /* Extras section */
   .extras {
     position: relative;
     padding: 2px 0 20px;
   }

   .extras::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: -40px;
     height: 180px;
     pointer-events: none;
     background: linear-gradient(to bottom,
         rgba(0, 0, 0, .88),
         rgba(0, 0, 0, .72) 50%,
         rgba(0, 0, 0, 0));
   }

   /* Benefits */
   .benefits {
     position: relative;
     padding: 1px 0 1px;
   }

   .benefits__title {
     margin: 0;
     font-size: clamp(28px, 4vw, 44px);
     line-height: 1.1;
     font-weight: 900;
     letter-spacing: -0.02em;
     color: rgba(255, 255, 255, .96);
   }

   .benefits__lead {
     margin: 12px 0 0;
     max-width: 980px;
     color: rgba(255, 255, 255, .78);
     font-weight: 600;
     line-height: 1.55;
   }

   .benefits__grid {
     margin-top: 26px;
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 26px 22px;
   }

   .benefit {
     display: grid;
     justify-items: center;
     text-align: center;
     gap: 12px;
     padding: 10px 6px;
   }

   .benefit__iconwrap {
     width: 44px;
     height: 44px;
     border-radius: 14px;
     display: grid;
     place-items: center;
     background: linear-gradient(180deg,
         rgba(204, 158, 64, .22),
         rgba(204, 158, 64, .08));
     border: 1px solid rgba(255, 255, 255, .10);
     box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
   }

   .benefit__icon {
     width: 22px;
     height: 22px;
     color: rgba(204, 158, 64, .92);
     fill: currentColor;
   }

   .benefit__text {
     color: rgba(255, 255, 255, .86);
     font-weight: 600;
     /* was 700 */
     font-size: 13.5px;
     line-height: 1.4;
   }

   /* FAQ */
   .faq {
     position: relative;
     padding: 18px 0 1px;
   }

   .faq__title {
     margin: 0;
     font-size: clamp(28px, 4vw, 44px);
     line-height: 1.05;
     font-weight: 900;
     letter-spacing: -0.02em;
     color: rgba(255, 255, 255, .96);
   }

   .faq__list {
     margin-top: 28px;
     display: grid;
     gap: 18px;
     max-width: 980px;
   }

   /* Use existing acc behavior, but different look */
   .acc--faq {
     max-width: 980px;
     border-radius: 16px;
     border: 1px solid rgba(255, 255, 255, .10);
     background: rgba(0, 0, 0, .22);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
   }

   .acc--faq .acc__head {
     padding: 18px 20px;
     border-bottom: 1px solid rgba(255, 255, 255, .08);
     gap: 18px;
     justify-content: flex-start;
   }

   .acc--faq:not(.is-open) .acc__head {
     border-bottom-color: transparent;
   }

   .faq__left {
     display: flex;
     align-items: center;
     gap: 16px;
     flex: 0 0 auto;
     min-width: 0;
   }

   .faq__icon {
     width: 44px;
     height: 44px;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, .16);
     background: rgba(0, 0, 0, .18);
     display: grid;
     place-items: center;
     position: relative;
     box-shadow: 0 14px 38px rgba(0, 0, 0, .35);
   }

   .faq__icon::before,
   .faq__icon::after {
     content: "";
     position: absolute;
     width: 18px;
     height: 2px;
     border-radius: 999px;
     background: rgba(204, 158, 64, .92);
     transition: transform .22s ease, opacity .22s ease;
   }

   .faq__icon::after {
     transform: rotate(90deg);
   }

   .acc--faq.is-open .faq__icon::after {
     transform: rotate(45deg);
   }

   .acc--faq.is-open .faq__icon::before {
     transform: rotate(-45deg);
   }

   .acc--faq.is-open .faq__icon::after,
   .acc--faq.is-open .faq__icon::before {
     opacity: .95;
   }

   .faq__dash {
     width: 140px;
     height: 1px;
     background: rgba(255, 255, 255, .14);
     border-radius: 999px;
   }

   .faq__q {
     font-size: 18px;
     font-weight: 800;
     letter-spacing: -0.01em;
     color: rgba(255, 255, 255, .92);
     flex: 1 1 auto;
     text-align: left;
   }

   .acc--faq .acc__body {
     transform: translateY(-4px);
   }

   .acc--faq .acc__inner {
     padding: 14px 20px 20px;
     max-width: 860px;
   }

   .faq__a {
     margin: 0;
     color: rgba(255, 255, 255, .80);
     font-weight: 600;
     line-height: 1.55;
   }

   @media (hover: hover) {
     .acc--faq .acc__head:hover {
       background: rgba(255, 255, 255, .04);
     }
   }

   @media (max-width: 820px) {
     .faq {
       padding: 20px 0 26px;
     }

     .faq__list {
       gap: 14px;
     }

     .acc--faq .acc__head {
       padding: 16px 16px;
       gap: 14px;
     }

     .faq__left {
       min-width: 0;
     }

     .faq__dash {
       width: 84px;
     }

     .faq__q {
       font-size: 16px;
     }

     .acc--faq .acc__inner {
       padding: 12px 16px 16px;
     }

     .faq__a {
       font-size: 14px;
     }
   }

   .section-title {
     margin: 0;
     font-size: clamp(22px, 3.2vw, 34px);
     line-height: 1.15;
     font-weight: 800;
     letter-spacing: -0.02em;
     color: rgba(255, 255, 255, .95);
     max-width: 980px;
     position: relative;
     z-index: 1;
   }

   .extras__list {
     margin-top: 5px;
     position: relative;
     z-index: 1;
   }

   /* Accordion card (glass style) */
   .acc {
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, .14);
     background: rgba(0, 0, 0, .32);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
     overflow: hidden;
     max-width: 720px;
   }

   .acc.is-open {
     border-color: rgba(204, 158, 64, .55);
     box-shadow: 0 18px 55px rgba(0, 0, 0, .42);
     background: rgba(0, 0, 0, .28);
   }

   .acc__head {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
     padding: 18px 18px;
     background: transparent;
     border: 0;
     color: rgba(255, 255, 255, .95);
     cursor: pointer;
     text-align: left;
     border-bottom: 1px solid rgba(255, 255, 255, .10);
     transition: background-color .18s ease;
   }

   .acc:not(.is-open) .acc__head {
     border-bottom-color: transparent;
   }

   .acc__title {
     font-size: 18px;
     font-weight: 800;
     letter-spacing: -0.01em;
   }

   .acc__chev {
     width: 10px;
     height: 10px;
     border-right: 2px solid rgba(204, 158, 64, .92);
     border-bottom: 2px solid rgba(204, 158, 64, .92);
     transform: translateY(0) rotate(45deg);
     transition: transform .22s ease;
     flex: 0 0 auto;
     margin-top: -2px;
   }

   .acc.is-open .acc__chev {
     transform: translateY(0) rotate(225deg);
   }

   .acc__body {
     padding: 0;
     color: rgba(255, 255, 255, .78);

     height: 0;
     overflow: hidden;
     opacity: 0;
     transform: translateY(-6px);
     transition: height .36s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, transform .22s ease;
     will-change: height, opacity, transform;
   }

   .acc.is-open .acc__body {
     opacity: 1;
     transform: translateY(0);
   }

   .acc__inner {
     padding: 14px 18px 18px;
   }

   @keyframes chevNudge {

     0%,
     100% {
       transform: translateY(0) rotate(45deg);
     }

     50% {
       transform: translateY(-4px) rotate(45deg);
     }
   }

   .acc:not(.is-open) .acc__chev {
     animation: chevNudge 1.2s ease-in-out infinite;
     opacity: .9;
   }

   @media (prefers-reduced-motion: reduce) {
     .acc:not(.is-open) .acc__chev {
       animation: none;
     }
   }

   .acc__items {
     margin: 0;
     padding: 0;
     list-style: none;
     display: grid;
     gap: 10px;
   }

   .acc__items li {
     position: relative;
     padding-left: 18px;
     line-height: 1.4;
     font-weight: 500;
   }

   .acc__items li::before {
     content: "";
     position: absolute;
     left: 0;
     top: .6em;
     width: 6px;
     height: 6px;
     border-radius: 999px;
     background: rgba(204, 158, 64, .92);
     transform: translateY(-50%);
   }


   @media (hover: hover) {
     .acc__head:hover {
       background: rgba(255, 255, 255, .04);
     }
   }

   .acc__head:active {
     background: rgba(255, 255, 255, .06);
   }

   @media (max-width: 820px) {
     .extras {
       padding: 5px 0 20px;
     }

     .acc {
       max-width: 100%;
     }

     .acc__head {
       padding: 16px 16px;
     }

     .acc__inner {
       padding: 12px 16px 16px;
     }

     .acc__title {
       font-size: 17px;
     }

     /* Hero video overlay: use mobile value */
     .hero__media::after {
       background: rgba(0, 0, 0, var(--hero-overlay-mobile));
     }

     .benefits {
       padding: 1px 0 1px;
     }

     .benefits__grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 18px 14px;
     }

     .benefit {
       justify-items: start;
       text-align: left;
       padding: 8px 0;
       grid-template-columns: 44px 1fr;
       align-items: start;
     }

     .benefit__text {
       font-size: 14px;
       font-weight: 600;
     }
   }

   @media (max-width: 420px) {
     .brand img {
       height: 32px;
     }

     .phone {
       font-size: 16px;
     }

     .benefits__grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 14px 12px;
     }

     .benefit {
       grid-template-columns: 44px 1fr;
     }

     .benefit__iconwrap {
       width: 40px;
       height: 40px;
       border-radius: 12px;
     }

     .benefit__text {
       font-size: 13.5px;
     }
   }

   html,
   body {
     background: #000;
   }

   body {
     position: relative;
   }

   /* Всё содержимое — выше шаров */
   body>* {
     position: relative;
     z-index: 1;
   }

   /* HERO должен быть выше шаров */
   .hero__media {
     z-index: 1;
   }

   .hero__content {
     z-index: 2;
   }

   /* ===== Background blobs (tweak here) ===== */
   :root {
     --blob-gold: rgba(204, 158, 64, .42);
     --blob-gold-soft: rgba(204, 158, 64, .30);
     --blob-white-soft: rgba(255, 255, 255, .14);
     --blob-blur: 92px;
     /* сильнее размытие на ПК */
     --blob-opacity: .92;
   }

   .bg-effects {
     position: fixed;
     inset: 0;
     z-index: 0;
     pointer-events: none;
     overflow: hidden;
     opacity: var(--blob-opacity);
   }

   .bg-effects .blob {
     position: absolute;
     border-radius: 999px;
     filter: blur(var(--blob-blur));
     transform: translate3d(0, 0, 0);
     will-change: transform, opacity;
     background:
       radial-gradient(circle at 35% 30%, var(--blob-white-soft), transparent 55%),
       radial-gradient(circle at 60% 55%, var(--blob-gold), transparent 62%),
       radial-gradient(circle at 45% 70%, var(--blob-gold-soft), transparent 65%);
     opacity: .95;
     animation: blobFloat 18s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
   }

   @keyframes blobPulse {

     0%,
     100% {
       opacity: .75;
       transform: scale(1) translate3d(0, 0, 0);
       filter: brightness(1);
     }

     50% {
       opacity: .95;
       transform: scale(1.12) translate3d(0, 0, 0);
       filter: brightness(1.15);
     }
   }

   @keyframes blobFloat {

     0%,
     100% {
       translate: 0 0;
     }

     50% {
       translate: 22px -18px;
     }
   }

   /* “Рандомные” позиции/размеры */
   /* “Рандомные” позиции/размеры */
   .bg-effects .blob:nth-child(1) {
     width: 380px;
     height: 380px;
     left: -160px;
     top: -170px;
     animation-duration: 22s, 7.5s;
   }

   .bg-effects .blob:nth-child(2) {
     width: 310px;
     height: 310px;
     right: -170px;
     top: 8%;
     animation-duration: 20s, 6.8s;
   }

   .bg-effects .blob:nth-child(3) {
     width: 420px;
     height: 420px;
     left: 14%;
     top: 46%;
     animation-duration: 26s, 8.2s;
   }

   .bg-effects .blob:nth-child(4) {
     width: 270px;
     height: 270px;
     right: 10%;
     top: 60%;
     animation-duration: 19s, 6.3s;
   }

   .bg-effects .blob:nth-child(5) {
     width: 350px;
     height: 350px;
     left: 58%;
     bottom: -210px;
     animation-duration: 24s, 7.1s;
   }

   .bg-effects .blob:nth-child(6) {
     width: 290px;
     height: 290px;
     left: -170px;
     bottom: 10%;
     animation-duration: 21s, 6.9s;
   }

   .bg-effects .blob:nth-child(7) {
     width: 250px;
     height: 250px;
     left: 40%;
     top: -130px;
     animation-duration: 25s, 7.0s;
   }

   .bg-effects .blob:nth-child(8) {
     width: 240px;
     height: 240px;
     right: 34%;
     bottom: 14%;
     animation-duration: 23s, 6.6s;
   }

   .bg-effects .blob:nth-child(9) {
     width: 280px;
     height: 280px;
     left: 74%;
     top: 32%;
     animation-duration: 28s, 8.0s;
   }

   .bg-effects .blob:nth-child(10) {
     width: 220px;
     height: 220px;
     left: 6%;
     bottom: -120px;
     animation-duration: 20s, 6.2s;
   }

   @media (max-width: 820px) {
     :root {
       --blob-blur: 54px;
       --blob-opacity: .82;
     }

     .bg-effects .blob:nth-child(1) {
       width: 240px;
       height: 240px;
       left: -140px;
       top: -140px;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(2) {
       width: 200px;
       height: 200px;
       right: -120px;
       top: 14%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(3) {
       width: 260px;
       height: 260px;
       left: 6%;
       top: 50%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(4) {
       width: 180px;
       height: 180px;
       right: 10%;
       top: 62%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(5) {
       width: 230px;
       height: 230px;
       left: 54%;
       bottom: -160px;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(6) {
       width: 190px;
       height: 190px;
       left: -120px;
       bottom: 16%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(7) {
       width: 170px;
       height: 170px;
       left: 42%;
       top: -110px;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(8) {
       width: 160px;
       height: 160px;
       right: 30%;
       bottom: 20%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(9) {
       width: 210px;
       height: 210px;
       left: 70%;
       top: 30%;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }

     .bg-effects .blob:nth-child(10) {
       width: 150px;
       height: 150px;
       left: 10%;
       bottom: -90px;
       animation: blobFloat 24s ease-in-out infinite, blobPulse 6.5s ease-in-out infinite;
     }
   }

   @media (prefers-reduced-motion: reduce) {
     .bg-effects .blob {
       animation: none;
       opacity: .90;
     }
   }

   /* Force left alignment of headings on desktop (same as mobile) */
   .section-title,
   .benefits__title,
   .faq__title {
     text-align: left !important;
     margin-left: 0 !important;
     margin-right: auto !important;
   }

   /* Hero title: some styles come from /assets/style3.css (flex/center). Override them. */
   .hero-top,
   .hero-top h1 {
     text-align: left !important;
     justify-content: flex-start !important;
     align-items: flex-start !important;
   }

   .hero-top h1 .h1__line {
     display: block;
     width: 100%;
     text-align: left !important;
   }

   /* ===== Works / Gallery marquee ===== */
   .works {
     padding: 20px 0 28px;
     position: relative;
     z-index: 2;
   }

   .works .container {
     margin-bottom: 18px;
   }

   .works__marquee {
     display: grid;
     gap: 14px;
     background: transparent;
   }

   .works__row {
     overflow: hidden;
     user-select: none;
     -webkit-user-select: none;
     touch-action: pan-y;
     cursor: grab;
     -webkit-tap-highlight-color: transparent;
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;

     /* Each row has its own subtle brand-tinted background */
     background: rgba(204, 158, 64, .14);
     /* #cc9e40 tint */
     border: 1px solid rgba(204, 158, 64, .28);
     border-radius: 20px;
     padding: 12px;
     box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
   }

   .works__row.is-dragging {
     cursor: grabbing;
   }

   .works__track {
     display: flex;
     gap: 14px;
     align-items: center;
     will-change: transform;
   }

   /* Preview sizing: all thumbs share same height; width follows image ratio */
   .works__track img {
     height: 300px;
     width: auto;
     display: block;
     border-radius: 18px;
     box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
     border: 1px solid rgba(255, 255, 255, .08);
     background: rgba(255, 255, 255, .03);
   }

   /* Slightly smaller on mobile */
   @media (max-width: 820px) {
     .works {
       padding: 1px 0 18px;
     }

     .works__marquee {
       gap: 10px;
     }

     .works__track {
       gap: 10px;
     }

     .works__track img {
       height: 210px;
       border-radius: 14px;
     }

     .works__row {
       padding: 10px;
       border-radius: 16px;
     }
   }

   /* Video preview overlay */
   .works__item {
     position: relative;
     flex: 0 0 auto;
     cursor: pointer;
   }

   .works__item.is-video::after {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at center,
         rgba(0, 0, 0, .35) 0%,
         rgba(0, 0, 0, .45) 40%,
         rgba(0, 0, 0, .55) 100%);
     border-radius: 18px;
     pointer-events: none;
   }

   .works__play {
     position: absolute;
     inset: 0;
     display: grid;
     place-items: center;
     pointer-events: none;
   }

   .works__play svg {
     width: 64px;
     height: 64px;
     color: #cc9e40;
     filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6));
     opacity: .95;
   }

   @media (max-width: 820px) {
     .works__play svg {
       width: 48px;
       height: 48px;
     }
   }

   /* ===== Works Lightbox (photo / video) ===== */
   .works-modal {
     position: fixed;
     inset: 0;
     z-index: 9999;
     display: none;
     background: rgba(0, 0, 0, .72);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     padding: 18px;
   }

   .works-modal.is-open {
     display: grid;
     place-items: center;
   }

   .works-modal__panel {
     width: min(1100px, 100%);
     max-height: calc(100vh - 36px);
     position: relative;
     border-radius: 18px;
     border: 1px solid rgba(204, 158, 64, .28);
     background: rgba(12, 12, 12, .72);
     box-shadow: 0 30px 120px rgba(0, 0, 0, .65);
     overflow: hidden;
   }

   .works-modal__close {
     position: absolute;
     top: 12px;
     right: 12px;
     width: 44px;
     height: 44px;
     border-radius: 999px;
     border: 1px solid rgba(204, 158, 64, .28);
     background: rgba(0, 0, 0, .35);
     display: grid;
     place-items: center;
     cursor: pointer;
     z-index: 2;
   }

   .works-modal__close svg {
     width: 22px;
     height: 22px;
     color: #cc9e40;
   }

   .works-modal__body {
     display: grid;
     place-items: center;
     padding: 52px 14px 14px;
     max-height: calc(100vh - 36px);
   }

   .works-modal__img,
   .works-modal__video {
     width: 100%;
     height: auto;
     max-height: calc(100vh - 120px);
     object-fit: contain;
     border-radius: 12px;
     display: none;
   }

   .works-modal__img.is-active,
   .works-modal__video.is-active {
     display: block;
   }

   @media (max-width: 820px) {
     .works-modal {
       padding: 12px;
     }

     .works-modal__panel {
       border-radius: 14px;
     }

     .works-modal__close {
       top: 10px;
       right: 10px;
       width: 40px;
       height: 40px;
     }

     .works-modal__body {
       padding-top: 48px;
     }
   }

   /* Lightbox navigation */
   .works-modal__nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 54px;
     height: 54px;
     border-radius: 999px;
     background: rgba(0, 0, 0, .35);
     border: 1px solid rgba(204, 158, 64, .28);
     display: grid;
     place-items: center;
     cursor: pointer;
     z-index: 3;
   }

   .works-modal__nav svg {
     width: 26px;
     height: 26px;
     color: #cc9e40;
   }

   .works-modal__nav--prev {
     left: 12px;
   }

   .works-modal__nav--next {
     right: 12px;
   }

   @media (max-width: 820px) {
     .works-modal__nav {
       width: 46px;
       height: 46px;
     }
   }

   /* ===== Works / Gallery marquee ===== */
   .hero-bottom-line-2 {
     margin-bottom: -24px;
     margin-top: 24px;
     height: 1px;
     background: rgba(255, 255, 255, .10);
     width: 100%;
   }

   .works {
     padding: 20px 0 28px;
     position: relative;
     z-index: 2;
   }

   .works .container {
     margin-bottom: 18px;
   }

   .works__marquee {
     display: grid;
     gap: 14px;
     background: transparent;
     margin-bottom: -40px;
   }

   .works__row {
     overflow: hidden;
     user-select: none;
     -webkit-user-select: none;
     touch-action: pan-y;
     cursor: grab;
     -webkit-tap-highlight-color: transparent;
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;

     /* Each row has its own subtle brand-tinted background */
     background: rgba(204, 158, 64, .14);
     /* #cc9e40 tint */
     border: 1px solid rgba(204, 158, 64, .28);
     border-radius: 20px;
     padding: 12px;
     box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
   }

   .works__row.is-dragging {
     cursor: grabbing;
   }

   .works__track {
     display: flex;
     gap: 14px;
     align-items: center;
     will-change: transform;
   }

   /* Preview sizing: all thumbs share same height; width follows image ratio */
   .works__track img {
     height: 300px;
     width: auto;
     display: block;
     border-radius: 18px;
     box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
     border: 1px solid rgba(255, 255, 255, .08);
     background: rgba(255, 255, 255, .03);
   }

   /* Slightly smaller on mobile */
   @media (max-width: 820px) {
     .works {
       padding: 1px 0 18px;
     }

     .works__marquee {
       gap: 10px;
       margin-bottom: -40px;
     }

     .works__track {
       gap: 10px;
     }

     .works__track img {
       height: 210px;
       border-radius: 14px;
     }

     .works__row {
       padding: 10px;
       border-radius: 16px;
     }
   }

   /* ===== Floating CTA (FAB) ===== */
   .fab {
     position: fixed;
     left: 50%;
     transform: translateX(-50%);
     bottom: max(20px, env(safe-area-inset-bottom));
     z-index: 9998;
     display: grid;
     justify-items: center;
     gap: 12px;
   }

   .fab__menu {
     display: flex;
     gap: 14px;
     padding: 0;
     background: transparent;
     border: none;
     box-shadow: none;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;

     opacity: 0;
     pointer-events: none;
     transform: translateY(6px) scale(.95);
     transition: .25s ease;
   }

   .fab__item {
     width: 56px;
     height: 56px;
     border-radius: 999px;

     display: grid;
     place-items: center;

     /* усиливаем контраст */
     background: rgba(0, 0, 0, .60);
     border: 1px solid rgba(204, 158, 64, .55);

     color: #cc9e40;

     box-shadow:
       0 0 0 1px rgba(204, 158, 64, .25),
       0 12px 40px rgba(0, 0, 0, .55),
       0 0 32px rgba(204, 158, 64, .45);

     transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
   }

   .fab__item:hover {
     transform: translateY(-2px);
     background: rgba(204, 158, 64, .14);
     border-color: rgba(204, 158, 64, .45);
   }

   .fab__item svg {
     width: 37px;
     height: 37px;
   }

   .fab__item:hover {
     transform: translateY(-3px) scale(1.05);
     background: rgba(0, 0, 0, .45);

     box-shadow:
       0 0 0 1px rgba(204, 158, 64, .45),
       0 16px 50px rgba(0, 0, 0, .65),
       0 0 42px rgba(204, 158, 64, .75);
   }

   @media (max-width: 820px) {
     .fab__item {
       width: 60px;
       height: 60px;
     }
   }

   .fab__main {
     position: relative;
     overflow: hidden;
     height: 54px;
     padding: 0 28px;
     min-width: 220px;
     justify-content: center;
     border-radius: 999px;
     border: 1px solid rgba(204, 158, 64, .38);
     background: rgba(204, 158, 64, .14);
     color: rgba(255, 255, 255, .96);
     font-weight: 900;
     letter-spacing: -0.01em;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     box-shadow: 0 24px 100px rgba(0, 0, 0, .52);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
   }

   /* Shimmer highlight for main FAB button */
   .fab__main::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     pointer-events: none;

     /* узкая полоса блика (без квадратного оверлея) */
     background: linear-gradient(120deg,
         rgba(255, 255, 255, 0) 0%,
         rgba(255, 255, 255, 0) 40%,
         rgba(255, 255, 255, .10) 47%,
         rgba(204, 158, 64, .55) 50%,
         rgba(255, 255, 255, .10) 53%,
         rgba(255, 255, 255, 0) 60%,
         rgba(255, 255, 255, 0) 100%);

     background-repeat: no-repeat;
     background-size: 220% 100%;
     background-position: -120% 0;

     filter: blur(.6px);
     opacity: 0;
     animation: fab-shimmer 3.6s ease-in-out infinite;
     will-change: background-position, opacity;
   }

   .fab__main::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     pointer-events: none;
     box-shadow: 0 0 0 1px rgba(204, 158, 64, .25), 0 0 30px rgba(204, 158, 64, .18);
     opacity: .55;
     animation: fab-glow 2.6s ease-in-out infinite;
   }

   @keyframes fab-shimmer {
     0% {
       background-position: -120% 0;
       opacity: 0;
     }

     10% {
       opacity: .9;
     }

     35% {
       background-position: 120% 0;
       opacity: .85;
     }

     45% {
       opacity: 0;
     }

     100% {
       background-position: 120% 0;
       opacity: 0;
     }
   }

   @keyframes fab-glow {

     0%,
     100% {
       opacity: .45;
       filter: blur(0px);
     }

     50% {
       opacity: .80;
       filter: blur(.2px);
     }
   }

   /* Don't distract while menu is open */
   .fab.is-open .fab__main::before,
   .fab.is-open .fab__main::after {
     animation-play-state: paused;
     opacity: .25;
   }

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

     .fab__main::before,
     .fab__main::after {
       animation: none !important;
     }
   }

   .fab__main:hover {
     transform: translateY(-2px);
     background: rgba(204, 158, 64, .18);
     border-color: rgba(204, 158, 64, .55);
     box-shadow: 0 30px 120px rgba(0, 0, 0, .58);
   }

   .fab__chev {
     width: 10px;
     height: 10px;
     display: inline-block;
     border-right: 2px solid rgba(255, 255, 255, .85);
     border-bottom: 2px solid rgba(255, 255, 255, .85);
     transform: rotate(45deg);
     transition: transform .22s ease;
     margin-top: -2px;
   }

   /* Open state */
   .fab.is-open .fab__menu {
     opacity: 1;
     transform: translateY(-6px) scale(1);
     pointer-events: auto;
   }

   .fab.is-open .fab__item {
     animation: fab-pop .25s ease forwards;
   }

   .fab__item:nth-child(1) {
     animation-delay: .00s;
   }

   .fab__item:nth-child(2) {
     animation-delay: .06s;
   }

   .fab__item:nth-child(3) {
     animation-delay: .12s;
   }

   @keyframes fab-pop {
     from {
       opacity: 0;
       transform: translateY(6px) scale(.9);
     }

     to {
       opacity: 1;
       transform: translateY(0) scale(1);
     }
   }

   .fab.is-open .fab__chev {
     transform: rotate(-135deg);
     margin-top: 2px;
   }

   @media (max-width:820px) {
     .fab__main {
       height: 50px;
       padding: 0 16px;
     }

     .fab__item {
       width: 44px;
       height: 44px;
     }
   }

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

     .fab__menu,
     .fab__main,
     .fab__item,
     .fab__chev {
       transition: none !important;
     }
   }

   /* Video preview overlay */
   .works__item {
     position: relative;
     flex: 0 0 auto;
     cursor: pointer;
   }

   .works__item.is-video::after {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at center,
         rgba(0, 0, 0, .35) 0%,
         rgba(0, 0, 0, .45) 40%,
         rgba(0, 0, 0, .55) 100%);
     border-radius: 18px;
     pointer-events: none;
   }

   .works__play {
     position: absolute;
     inset: 0;
     display: grid;
     place-items: center;
     pointer-events: none;
   }

   .works__play svg {
     width: 64px;
     height: 64px;
     color: #cc9e40;
     filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6));
     opacity: .95;
   }

   @media (max-width: 820px) {
     .works__play svg {
       width: 48px;
       height: 48px;
     }
   }

   /* ===== Works Lightbox (photo / video) ===== */
   .works-modal {
     position: fixed;
     inset: 0;
     z-index: 9999;
     display: none;
     background: rgba(0, 0, 0, .72);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     padding: 18px;
   }

   .works-modal.is-open {
     display: grid;
     place-items: center;
   }

   .works-modal__panel {
     width: min(1100px, 100%);
     max-height: calc(100vh - 36px);
     position: relative;
     border-radius: 18px;
     border: 1px solid rgba(204, 158, 64, .28);
     background: rgba(12, 12, 12, .72);
     box-shadow: 0 30px 120px rgba(0, 0, 0, .65);
     overflow: hidden;
   }

   .works-modal__close {
     position: absolute;
     top: 12px;
     right: 12px;
     width: 44px;
     height: 44px;
     border-radius: 999px;
     border: 1px solid rgba(204, 158, 64, .28);
     background: rgba(0, 0, 0, .35);
     display: grid;
     place-items: center;
     cursor: pointer;
     z-index: 2;
   }

   .works-modal__close svg {
     width: 22px;
     height: 22px;
     color: #cc9e40;
   }

   .works-modal__body {
     display: grid;
     place-items: center;
     padding: 52px 14px 14px;
     max-height: calc(100vh - 36px);
   }

   .works-modal__img,
   .works-modal__video {
     width: 100%;
     height: auto;
     max-height: calc(100vh - 120px);
     object-fit: contain;
     border-radius: 12px;
     display: none;
   }

   .works-modal__img.is-active,
   .works-modal__video.is-active {
     display: block;
   }

   @media (max-width: 820px) {
     .works-modal {
       padding: 12px;
     }

     .works-modal__panel {
       border-radius: 14px;
     }

     .hero-bottom-line-2 {
       margin-bottom: 1px;
     }

     .works-modal__close {
       top: 10px;
       right: 10px;
       width: 40px;
       height: 40px;
     }

     .works-modal__body {
       padding-top: 48px;
     }
   }

   /* Lightbox navigation */
   .works-modal__nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 54px;
     height: 54px;
     border-radius: 999px;
     background: rgba(0, 0, 0, .35);
     border: 1px solid rgba(204, 158, 64, .28);
     display: grid;
     place-items: center;
     cursor: pointer;
     z-index: 3;
   }

   .works-modal__nav svg {
     width: 26px;
     height: 26px;
     color: #cc9e40;
   }

   .works-modal__nav--prev {
     left: 12px;
   }

   .works-modal__nav--next {
     right: 12px;
   }

   @media (max-width: 820px) {
     .works-modal__nav {
       width: 46px;
       height: 46px;
     }
   }

   /* ===== Yandex Reviews (header only) ===== */
   .reviews {
     padding: 54px 0 64px;
     position: relative;
     z-index: 2;
   }

   .reviews__head {
     display: grid;
     gap: 14px;
     align-items: start;
   }

   .reviews__title {
     margin: 0;
     font-size: clamp(28px, 4vw, 44px);
     line-height: 1.05;
     font-weight: 900;
     letter-spacing: -0.02em;
     color: rgba(255, 255, 255, .96);
   }

   .reviews__lead {
     margin: 0;
     color: rgba(255, 255, 255, .78);
     font-weight: 600;
     line-height: 1.55;
     max-width: 860px;
   }

   @media (min-width: 821px) {
     .reviews__badge {
       margin-left: 16px;
     }
   }

   .reviews__panel {
     margin-top: 18px;
     margin-left: auto;
     margin-right: auto;
     width: min(1100px, 100%);
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, .10);
     background: rgba(0, 0, 0, .22);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     box-shadow: 0 18px 70px rgba(0, 0, 0, .35);
     padding: 18px 18px;

     display: grid;
     grid-template-columns: auto auto 1fr;
     align-items: center;
   }

   .reviews__brand {
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 0;
     padding-right: 10px;
     min-width: 240px;
   }

   .reviews__brand img {
     width: 164px;
     height: 64px;
     object-fit: contain;
     filter: drop-shadow(0 14px 40px rgba(0, 0, 0, .45));
   }

   .reviews__brandname {
     color: rgba(255, 255, 255, .92);
     font-weight: 800;
     letter-spacing: -0.01em;
     white-space: nowrap;
   }

   .reviews__score {
     align-items: center;
     gap: 12px;
     flex-wrap: wrap;
     justify-content: flex-end;
   }

   @media (min-width: 821px) {
     .reviews__score {
       justify-self: end;
       margin-left: auto;
     }
   }

   .reviews__rating {
     display: flex;
     align-items: baseline;
     gap: 10px;
     padding: 10px 14px;
     border-radius: 14px;
     border: 1px solid rgba(204, 158, 64, .32);
     background: rgba(204, 158, 64, .10);
   }

   .reviews__ratingnum {
     font-size: 26px;
     font-weight: 900;
     letter-spacing: -0.02em;
     color: rgba(255, 255, 255, .95);
     line-height: 1;
   }

   .reviews__ratinglabel {
     color: rgba(255, 255, 255, .78);
     font-weight: 700;
     font-size: 13px;
     line-height: 1.1;
   }

   .reviews__stars {
     display: inline-flex;
     gap: 4px;
     transform: translateY(-1px);
   }

   .reviews__stars span {
     width: 10px;
     height: 10px;
     display: inline-block;
     background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95) 0 22%, rgba(255, 255, 255, 0) 23%),
       linear-gradient(135deg, rgba(204, 158, 64, .95), rgba(204, 158, 64, .65));
     clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
     filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35));
   }

   .reviews__badge {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 12px;
     border-radius: 14px;
     border: 1px solid rgba(255, 255, 255, .12);
     background: rgba(0, 0, 0, .18);
   }

   .reviews__badge--image {
     padding: 0;
     border: none;
     background: none;
   }

   .reviews__badge img {
     margin-left: -90px;
     width: 56px;
     height: auto;
     display: block;
     filter: drop-shadow(0 14px 40px rgba(0, 0, 0, .45));
   }

   .reviews__badgetext {
     display: grid;
     gap: 2px;
   }

   .reviews__badgetext strong {
     color: rgba(255, 255, 255, .92);
     font-weight: 900;
     letter-spacing: -0.01em;
     font-size: 13px;
     line-height: 1.1;
   }

   .reviews__badgetext span {
     color: rgba(255, 255, 255, .70);
     font-weight: 700;
     font-size: 12px;
     line-height: 1.1;
   }

   @media (min-width: 821px) {
     .reviews__panel {
       padding: 16px 18px;
     }

     .reviews__rating {
       padding: 10px 12px;
     }

     .reviews__badge {
       padding: 10px 12px;
     }

     .reviews__badge img {
       width: 52px;
       margin-top: -10px;
     }
   }

   @media (max-width: 820px) {
     .reviews {
       padding: 42px 0 52px;
     }

     .reviews__panel {
       padding: 16px;
       gap: 12px;
       grid-template-columns: 1fr auto;
       grid-template-rows: auto auto;
       align-items: center;
     }

     .reviews__brand {
       padding-right: 0;
       min-width: 0;
       grid-column: 1;
       grid-row: 1;
     }

     .reviews__brand img {
       width: 120px;
       height: 40px;
     }


     .reviews__score {
       grid-column: 1;
       grid-row: 2;
       margin-top: 0;
       /* если надо ещё ближе — поставь -2px */
     }
   }

   .reviews__badge {
     grid-column: 2;
     grid-row: 1 / span 2;
     align-self: center;
   }

   /* Desktop */
   @media (min-width: 821px) {
     .reviews__badge img {
       width: 44px;
     }
   }

   /* Mobile */
   @media (max-width: 820px) {
     .reviews__badge img {
       width: 78px;
     }
   }

   .reviews__rating {
     width: auto;
     justify-content: flex-start;
     align-items: center;
     gap: 6px;
     padding: 8px 12px;
     max-width: 200px;
   }

   .reviews__stars {
     gap: 2px;
   }

   /* ===== Reviews cards (Yandex) ===== */
   .reviews__cards {
     margin-top: 18px;
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 16px;
   }

   .review {
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, .10);
     background: rgba(0, 0, 0, .34);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     box-shadow: 0 18px 70px rgba(0, 0, 0, .35);
     padding: 18px 18px 20px;
     min-height: 210px;
     position: relative;
   }

   .review__head,
   .review__text {
     position: relative;
     z-index: 1;
     /* ниже overlay-ссылки */
   }

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

   .review__ya {
     width: 44px;
     height: 44px;
     border-radius: 999px;
     overflow: hidden;
     flex: 0 0 auto;
     box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
     border: 1px solid rgba(255, 255, 255, .12);
     background: rgba(255, 255, 255, .04);
     display: grid;
     place-items: center;
   }

   .review__ya img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }

   .review__meta {
     display: grid;
     gap: 4px;
     min-width: 0;
   }

   .review__source {
     font-size: 12px;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, .60);
     font-weight: 700;
   }

   .review__name {
     font-size: 18px;
     line-height: 1.15;
     font-weight: 800;
     letter-spacing: -0.01em;
     color: rgba(255, 255, 255, .95);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }

   .review__text {
     margin: 0;
     font-size: 17px;
     line-height: 1.4;
     font-weight: 700;
     letter-spacing: -0.005em;
     color: rgba(255, 255, 255, .9);

     display: -webkit-box;
     -webkit-line-clamp: 4;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }

   .reviews__cta {
     margin-top: 16px;
     display: flex;
     justify-content: center;
   }

   .reviews__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 12px 16px;
     border-radius: 999px;
     border: 1px solid rgba(204, 158, 64, .32);
     background: rgba(204, 158, 64, .10);
     color: rgba(255, 255, 255, .95);
     font-weight: 800;
     text-decoration: none;
     box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
     transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
   }

   .reviews__btn:hover {
     transform: translateY(-2px);
     background: rgba(204, 158, 64, .14);
     border-color: rgba(204, 158, 64, .42);
     box-shadow: 0 24px 80px rgba(0, 0, 0, .36);
   }

   .reviews__btn:active {
     transform: translateY(0);
   }

   .reviews__btn svg {
     padding-top: 3px;
     width: 18px;
     height: 18px;
     color: #cc9e40;
   }

   @media (max-width: 820px) {
     .reviews__cards {
       grid-template-columns: 1fr;
       gap: 12px;
     }

     .review {
       padding: 16px 16px 18px;
       border-radius: 16px;
       min-height: 0;
     }

     .review__name {
       font-size: 16px;
     }

     .review__text {
       font-size: 15px;
       -webkit-line-clamp: 5;
     }

     .review__ya {
       width: 40px;
       height: 40px;
     }
   }

   /* ===== Footer ===== */
   .footer {
     margin-top: -70px;
     position: relative;
     z-index: 2;
     padding: 24px 0 44px;
     /* другой фон: более плотный, с мягким градиентом */
     background:
       radial-gradient(900px 480px at 15% 10%, rgba(204, 158, 64, .14), rgba(0, 0, 0, 0) 60%),
       radial-gradient(720px 420px at 85% 15%, rgba(204, 158, 64, .10), rgba(0, 0, 0, 0) 55%),
       linear-gradient(180deg, rgba(8, 8, 8, .85), rgba(0, 0, 0, .92));
     border-top: 1px solid rgba(255, 255, 255, .10);
   }

   .footer__wrap {
     display: grid;
     grid-template-columns: 1.1fr 1fr 1fr;
     gap: 22px;
     align-items: start;
   }

   .footer__title {
     margin: 0 0 12px;
     font-weight: 900;
     letter-spacing: -0.01em;
     color: rgba(255, 255, 255, .92);
     font-size: 16px;
     text-transform: uppercase;
     opacity: .95;
   }

   .footer__text {
     margin: 0;
     color: rgba(255, 255, 255, .72);
     font-weight: 600;
     line-height: 1.55;
   }

   .footer__nav {
     display: grid;
     gap: 10px;
   }

   .footer__link {
     color: rgba(255, 255, 255, .82);
     text-decoration: none;
     font-weight: 700;
     letter-spacing: -0.01em;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: transform .2s ease, color .2s ease;
   }

   .footer__link::before {
     content: '';
     width: 6px;
     height: 6px;
     border-radius: 999px;
     background: rgba(204, 158, 64, .85);
     box-shadow: 0 10px 30px rgba(204, 158, 64, .18);
   }

   .footer__link:hover {
     color: rgba(255, 255, 255, .95);
     transform: translateY(-1px);
   }

   .footer__addr {
     display: grid;
     gap: 10px;
   }

   .footer__addrline {
     display: grid;
     gap: 4px;
   }

   .footer__route {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     width: fit-content;
     padding: 10px 14px;
     border-radius: 999px;
     border: 1px solid rgba(204, 158, 64, .32);
     background: rgba(204, 158, 64, .10);
     color: rgba(255, 255, 255, .95);
     font-weight: 800;
     text-decoration: none;
     box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
     transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
   }

   .footer__route:hover {
     transform: translateY(-2px);
     background: rgba(204, 158, 64, .14);
     border-color: rgba(204, 158, 64, .42);
     box-shadow: 0 24px 80px rgba(0, 0, 0, .36);
   }

   .footer__route svg {
     padding-top: 3px;
     width: 18px;
     height: 18px;
     color: #cc9e40;
   }

   .footer__contact {
     display: grid;
     gap: 10px;
   }

   .footer__phone {
     color: rgba(255, 255, 255, .96);
     font-weight: 900;
     letter-spacing: -0.01em;
     font-size: 18px;
     text-decoration: none;
   }

   .footer__hours {
     color: rgba(255, 255, 255, .70);
     font-weight: 700;
   }

   .footer__social {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-top: 10px;
   }

   .footer__social a {
     width: 42px;
     height: 42px;
     border-radius: 999px;
     display: grid;
     place-items: center;
     border: 1px solid rgba(255, 255, 255, .12);
     background: rgba(0, 0, 0, .20);
     color: rgba(204, 158, 64, .98);
     text-decoration: none;
     box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
     transition: transform .2s ease, background .2s ease, border-color .2s ease;
   }

   .footer__social a:hover {
     transform: translateY(-2px);
     border-color: rgba(204, 158, 64, .35);
     background: rgba(204, 158, 64, .10);
   }

   .footer__social svg {
     width: 22px;
     height: 22px;
   }

   .footer__bottom {
     margin-top: 26px;
     padding-top: 18px;
     border-top: 1px solid rgba(255, 255, 255, .10);
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
     flex-wrap: wrap;
   }

   .footer__copy {
     margin: 0;
     color: rgba(255, 255, 255, .55);
     font-weight: 700;
     font-size: 13px;
   }

   .footer__brandmini {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: rgba(255, 255, 255, .70);
     font-weight: 800;
     text-decoration: none;
   }

   .footer__brandmini img {
     width: 34px;
     height: 34px;
     object-fit: contain;
     filter: drop-shadow(0 14px 40px rgba(0, 0, 0, .45));
   }

   @media (max-width: 900px) {
     .footer__wrap {
       grid-template-columns: 1fr;
       gap: 18px;
     }

     .footer__bottom {
       margin-bottom: 30px;
     }
   }