@font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('fonts/montserrat-cyrillic.woff2') format('woff2');
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }

    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('fonts/montserrat-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    :root {
      --bg:      #F6F6F6;
      --surface: oklch(100.0% 0.000 89.9);
      --fg:      #013366;
      --muted:   oklch(52.8% 0.000 89.9);
      --border:  oklch(92.2% 0.000 89.9);
      --accent:  #FB6A0D;
      --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      --font-mono:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    }

    * { box-sizing: border-box; }
    html {
      overflow-x: clip;
      scroll-behavior: smooth;
    }
    body {
      margin: 0;
      overflow-x: clip;
      background: var(--bg);
      color: var(--fg);
      font-family: var(--font-body);
      line-height: 1.5;
      text-align: start;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-inline-size: 100%; }
    button, input, textarea { font: inherit; }
    .page {
      min-block-size: 100vh;
      background: var(--bg);
    }
    .shell {
      max-inline-size: 1200px;
      margin-inline: auto;
      padding-inline: 24px;
    }
    :where(
      .brands-inner,
      .seo-inner,
      .delivery-map-inner,
      .analyzer-types-inner,
      .why-us-inner,
      .popular-inner,
      .selection-banner-inner
    ) {
      max-inline-size: 1200px;
      margin-inline: auto;
      padding-inline: 24px;
    }
    .topbar {
      --topbar-hide-offset: 74px;
      position: sticky;
      inset-block-start: 0;
      z-index: 20;
      background: var(--surface);
      border-block-end: 1px solid var(--border);
      transform: translateY(0);
      transition: transform 220ms ease;
      will-change: transform;
    }
    .topbar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      min-block-size: 74px;
      max-block-size: 96px;
      overflow: hidden;
      opacity: 1;
      transform: translateY(0);
      transition:
        max-block-size 220ms ease,
        min-block-size 220ms ease,
        padding-block 220ms ease,
        opacity 160ms ease,
        transform 220ms ease;
    }
    .topbar.is-condensed {
      transform: translateY(calc(var(--topbar-hide-offset) * -1));
    }
    .topbar.is-condensed .topbar-inner {
      pointer-events: none;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-inline-size: 382px;
    }
    .brand-mark {
      inline-size: 45px;
      block-size: 45px;
      overflow: hidden;
      background: var(--surface);
    }
    .brand-mark img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: contain;
    }
    .brand-name {
      display: grid;
      gap: 2px;
      grid-template-columns: auto auto;
      align-items: end;
    }
    .brand-name strong {
      font-family: var(--font-display);
      font-size: 31px;
      font-weight: 800;
      line-height: 0.88;
      letter-spacing: -0.04em;
      text-transform: uppercase;
    }
    .brand-name .brand-blue { color: var(--fg); }
    .brand-name .brand-orange { color: var(--accent); }
    .brand-descriptor {
      max-inline-size: 150px;
      margin-inline-start: 8px;
      padding-inline-start: 20px;
      border-inline-start: 1px solid var(--border);
      color: var(--fg);
      font-size: 13px;
      line-height: 1.28;
    }
    .nav {
      display: flex;
      align-items: center;
      gap: 34px;
      min-block-size: 43px;
      position: relative;
      overflow: visible;
      color: var(--fg);
      font-size: 16px;
      font-weight: 600;
      scrollbar-width: none;
    }
    .nav-menu {
      display: contents;
    }
    .nav-mega {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-block-size: 43px;
    }
    .nav-mega-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .nav-mega-trigger::after {
      content: "";
      inline-size: 7px;
      block-size: 7px;
      border-inline-end: 1.8px solid currentColor;
      border-block-end: 1.8px solid currentColor;
      transform: translateY(-2px) rotate(45deg);
      transition: transform 160ms ease;
    }
    .nav-mega.is-open .nav-mega-trigger::after,
    .nav-mega:hover .nav-mega-trigger::after,
    .nav-mega:focus-within .nav-mega-trigger::after {
      transform: translateY(2px) rotate(225deg);
    }
    .nav-mega-panel {
      position: absolute;
      inset-block-start: calc(100% + 12px);
      inset-inline-start: 0;
      z-index: 60;
      display: grid;
      gap: 6px;
      inline-size: 430px;
      max-inline-size: min(430px, calc(100vw - 32px));
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: 0 18px 38px color-mix(in oklch, var(--fg) 16%, transparent);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(8px);
      transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
    }
    .nav-mega-panel--catalog {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      inline-size: 520px;
      max-inline-size: min(520px, calc(100vw - 32px));
    }
    .nav-mega-panel::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: 100%;
      block-size: 14px;
    }
    .nav-mega.is-open .nav-mega-panel,
    .nav-mega:hover .nav-mega-panel,
    .nav-mega:focus-within .nav-mega-panel {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }
    .nav-mega-item {
      display: grid;
      gap: 4px;
      padding: 14px 16px;
      border-radius: 6px;
      color: var(--fg);
      text-decoration: none;
    }
    .nav-mega-item:hover,
    .nav-mega-item:focus-visible {
      background: #F6F6F6;
      color: var(--accent);
      outline: none;
    }
    .nav-mega-item[aria-current="page"] {
      color: var(--accent);
      background: #F6F6F6;
    }
    .nav-mega-item span {
      font-size: 15px;
      line-height: 1.25;
      font-weight: 800;
    }
    .nav-mega-item small {
      color: color-mix(in oklch, var(--fg) 62%, white);
      font-size: 12px;
      line-height: 1.35;
      font-weight: 500;
    }
    .nav-burger,
    .nav-help,
    .nav-cost {
      display: none;
    }
    .nav::-webkit-scrollbar { display: none; }
    .nav a:hover { color: var(--accent); }
    .cart-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .cart-count {
      display: inline-grid;
      place-items: center;
      min-inline-size: 20px;
      block-size: 20px;
      padding-inline: 5px;
      border-radius: 999px;
      background: var(--accent);
      color: white;
      font-size: 12px;
      line-height: 1;
      font-weight: 800;
    }
    .cart-count[hidden] {
      display: none;
    }
    .nav-email {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-inline-start: auto;
      color: var(--fg);
      font-size: 15px;
      font-weight: 500;
      white-space: nowrap;
    }
    .nav-email svg {
      inline-size: 18px;
      block-size: 18px;
      flex: 0 0 auto;
      color: var(--fg);
    }
    .nav-cost svg {
      inline-size: 22px;
      block-size: 22px;
      flex: 0 0 auto;
    }
    .nav-row {
      border-block-start: 1px solid var(--border);
    }
    .topbar.is-condensed .nav-row {
      border-block-start-color: transparent;
    }
    .header-service {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 28px;
      flex: 1;
      min-inline-size: 0;
    }
    .help-link {
      max-inline-size: 155px;
      color: var(--fg);
      font-size: 12px;
      line-height: 1.2;
      text-align: center;
    }
    .contact-link,
    .phone-block {
      display: grid;
      grid-template-columns: 26px auto;
      align-items: center;
      gap: 10px;
      color: var(--fg);
    }
    .contact-link {
      min-inline-size: 205px;
      max-inline-size: 220px;
      grid-template-columns: 24px auto;
      gap: 12px;
      color: var(--fg);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.16;
      text-decoration: underline;
      text-decoration-style: dashed;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }
    .contact-link .service-icon {
      inline-size: 24px;
      block-size: 24px;
    }
    .phone-block {
      min-inline-size: 202px;
      text-decoration: none;
    }
    .service-icon {
      inline-size: 26px;
      block-size: 26px;
      color: var(--fg);
    }
    .phone-main {
      display: block;
      font-size: 20px;
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }
    .phone-note {
      display: block;
      margin-block-start: 3px;
      color: var(--fg);
      font-size: 12px;
      line-height: 1;
    }
    .actions { display: flex; align-items: center; gap: 10px; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-block-size: 42px;
      border-radius: 8px;
      padding: 10px 16px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--fg);
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      text-decoration: none;
      white-space: nowrap;
    }
    .header-call {
      min-block-size: 44px;
      padding-inline: 17px;
      border: 1px solid #FB6A0D;
      border-radius: 4px;
      background: var(--surface);
      color: var(--fg);
      font-size: 16px;
      font-weight: 400;
      transition: transform 160ms ease, border-color 160ms ease;
    }
    .btn.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: white;
    }
    .btn:hover,
    .card-cta:hover,
    .seo-toggle:hover,
    .popular-cta:hover,
    .selection-banner-cta:hover,
    .quiz-btn:hover,
    .contacts-submit:hover,
    .cookie-consent__button:hover,
    .footer-call:hover {
      transform: translateY(-1px);
    }
    .hero {
      position: relative;
      min-block-size: 500px;
      padding-block: 0;
      overflow: hidden;
      background:
        linear-gradient(90deg, var(--surface) 0 45%, transparent 45%),
        url("img/main/hero/intro-hero-ultra-min.webp") center / cover no-repeat;
      border-block-end: 1px solid var(--border);
    }
    .hero-inner {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 0.55fr) minmax(420px, 0.45fr);
      gap: 42px;
      min-block-size: 500px;
      align-items: center;
    }
    .hero-copy {
      max-inline-size: 620px;
      padding-block: 54px 58px;
    }
    .hero h1 {
      display: grid;
      gap: 8px;
      margin: 0;
      max-inline-size: 680px;
      font-family: var(--font-display);
      font-size: clamp(40px, 3.15vw, 56px);
      font-weight: 780;
      line-height: 1.04;
      letter-spacing: -0.035em;
      color: var(--fg);
      text-transform: none;
      text-wrap: balance;
    }
    .hero-title-subline {
      color: #013366;
      font-size: 0.78em;
      font-weight: 620;
      line-height: 1.08;
      letter-spacing: -0.026em;
    }
    .hero-bullets {
      display: grid;
      gap: 8px;
      margin: 30px 0 0;
      padding: 0;
      list-style: none;
      color: var(--fg);
      font-size: 18px;
      font-weight: 650;
      line-height: 1.34;
    }
    .hero-bullets li {
      position: relative;
      min-block-size: 24px;
      padding-inline-start: 34px;
    }
    .hero-bullets li::before {
      content: "✓";
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0.02em;
      display: grid;
      place-items: center;
      inline-size: 22px;
      block-size: 22px;
      border-radius: 999px;
      background: var(--fg);
      color: var(--surface);
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 36px;
      margin-block-start: 58px;
    }
    .hero-actions .btn {
      min-inline-size: 222px;
      min-block-size: 56px;
      border-radius: 4px;
      font-size: 18px;
      font-weight: 400;
      transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
    }
    .hero-actions .btn.primary {
      background: #013366;
      border-color: #013366;
      color: white;
    }
    .hero-actions .btn.primary:hover {
      background: #013366;
      border-color: #013366;
    }
    .hero-actions .btn:not(.primary) {
      border: 1px solid #FB6A0D;
      color: var(--fg);
      background: var(--surface);
    }
    .hero-badges {
      justify-self: start;
      display: grid;
      gap: 8px;
      inline-size: 152px;
      margin-inline-start: min(19vw, 255px);
      z-index: 2;
    }
    .hero-badge {
      display: grid;
      place-items: center;
      gap: 7px;
      min-block-size: 126px;
      padding: 13px 10px 11px;
      border-radius: 6px;
      background: color-mix(in oklch, var(--surface) 94%, transparent);
      box-shadow: 0 6px 18px color-mix(in oklch, var(--fg) 18%, transparent);
      text-align: center;
    }
    .hero-badge img {
      max-inline-size: 74px;
      max-block-size: 58px;
      object-fit: contain;
    }
    .hero-badge.brands img {
      max-inline-size: 118px;
      max-block-size: 48px;
      object-position: center;
    }
    .hero-badge strong {
      color: var(--fg);
      font-size: 15px;
      font-weight: 550;
      line-height: 1.24;
    }
    .hero-badge.service img { max-inline-size: 62px; max-block-size: 62px; }
    section { padding-block: 72px; }
    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.28fr);
      gap: 40px;
      align-items: end;
      margin-block-end: 28px;
    }
    h2 {
      margin: 0;
      font-family: var(--font-display);
      font-size: 38px;
      line-height: 1.08;
      letter-spacing: -0.02em;
    }
    :where(
      .pricing-section h2,
      .brands-head h2,
      .seo-head h2,
      .delivery-map-head h2,
      .analyzer-types-head h2,
      .why-us-head h2,
      .popular-head h2,
      .service-section-head h2,
      .service-panel h2
    ) {
      position: relative;
      display: inline-block;
      color: var(--fg);
      font-size: 38px;
      letter-spacing: -0.02em;
    }
    :where(
      .pricing-section h2,
      .brands-head h2,
      .seo-head h2,
      .delivery-map-head h2,
      .analyzer-types-head h2,
      .why-us-head h2,
      .popular-head h2,
      .service-section-head h2,
      .service-panel h2
    )::after {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      inset-block-end: 0;
      inline-size: 92px;
      block-size: 3px;
      background: var(--accent);
    }
    .pricing-section {
      position: relative;
      background: var(--surface);
      padding-inline: 0;
      --catalog-fade-opacity: 1;
      --carousel-fade-opacity: var(--catalog-fade-opacity);
      --carousel-fade-bg: var(--surface);
      --carousel-mobile-fade-start: 122px;
      --carousel-tablet-fade-start: 122px;
    }
    .pricing-section .section-head {
      display: block;
      max-inline-size: 1200px;
      margin-inline: auto;
      margin-block-end: 28px;
      padding-inline: 24px;
    }
    .pricing-section h2 {
      line-height: 1.12;
      padding-block-end: 18px;
    }
    .pricing-section::after {
      content: none;
    }
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 40px;
      max-inline-size: 1200px;
      margin-inline: auto;
      padding-inline: 24px;
    }
    .product-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
    }
    .product-card,
    .popular-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      overflow: hidden;
      background: #F6F6F6;
      min-block-size: 600px;
      padding: 18px 18px 32px;
      border: 0;
      border-radius: 6px;
      color: #013366;
      box-shadow: 0 9px 22px color-mix(in oklch, var(--fg) 11%, transparent);
    }
    .product-media,
    .popular-media {
      order: 2;
      position: relative;
      display: grid;
      place-items: center;
      inline-size: min(100%, 252px);
      aspect-ratio: 1 / 1;
      min-block-size: 0;
      margin-block: 0 24px;
      border-radius: 5px;
      background: var(--surface);
      overflow: hidden;
    }
    .product-media img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
    .product-content,
    .popular-content {
      display: contents;
    }
    .product-card h3,
    .popular-card h3 {
      order: 1;
      margin: 0;
      min-block-size: 88px;
      color: #013366;
      font-size: 25px;
      line-height: 1.22;
      letter-spacing: -0.02em;
    }
    .price-block {
      order: 3;
      display: grid;
      justify-items: center;
      gap: 8px;
      margin-block-start: auto;
    }
    .price-label {
      margin: 0;
      color: #013366;
      font-size: 20px;
      line-height: 1.15;
      font-weight: 600;
      letter-spacing: -0.01em;
      text-decoration: underline;
      text-decoration-style: dashed;
      text-decoration-thickness: 1px;
      text-underline-offset: 5px;
    }
    .price-current {
      margin: 0;
      color: #FB6A0D;
      font-size: 26px;
      line-height: 1.25;
    }
    .price-current strong {
      color: #FB6A0D;
      font-size: 31px;
      letter-spacing: -0.02em;
    }
    .price-old {
      margin: 4px 0 24px;
      color: #013366;
      font-size: 16px;
      line-height: 1.25;
    }
    .price-old strong {
      font-weight: 800;
      text-decoration: line-through;
      text-decoration-thickness: 2px;
    }
    .card-cta,
    .popular-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-block-size: 56px;
      min-inline-size: 178px;
      border: 1px solid #013366;
      border-radius: 5px;
      padding: 14px 24px;
      background: #013366;
      color: white;
      font-size: 16px;
      font-weight: 400;
      text-decoration: none;
      transition: transform 160ms ease;
    }
    button.card-cta,
    button.popular-cta {
      cursor: pointer;
      font-family: inherit;
    }
    .card-cta.is-added,
    .btn.is-added {
      border-color: var(--accent);
      background: var(--accent);
      color: white;
    }
    .card-cta {
      order: 4;
      margin-block-start: 0;
    }
    .card-cta:hover {
      background: #013366;
      border-color: #013366;
    }
    .brands-section {
      background: var(--surface);
      padding-block: 72px 76px;
    }
    .brands-head {
      margin-block-end: 32px;
    }
    .brands-head h2 {
      margin: 0;
      padding-block-end: 18px;
      line-height: 1.12;
    }
    .brands-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }
    .brand-card {
      display: grid;
      grid-template-rows: 112px auto;
      align-items: center;
      justify-items: center;
      min-block-size: 184px;
      padding: 22px 18px 18px;
      border-radius: 6px;
      background: #F6F6F6;
      box-shadow: 0 9px 22px color-mix(in oklch, var(--fg) 11%, transparent);
      text-align: center;
      color: inherit;
      text-decoration: none;
      transition: transform 160ms ease, box-shadow 160ms ease;
    }
    .brand-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 26px color-mix(in oklch, var(--fg) 13%, transparent);
    }
    .brand-card:focus-visible {
      outline: 2px solid #FB6A0D;
      outline-offset: 3px;
    }
    .brand-card img {
      max-inline-size: min(100%, 190px);
      max-block-size: 94px;
      object-fit: contain;
      mix-blend-mode: multiply;
    }
    .brand-card h3 {
      margin: 12px 0 0;
      color: #013366;
      font-size: 18px;
      line-height: 1.2;
      font-weight: 500;
      letter-spacing: -0.01em;
    }
    .brand-card-more {
      grid-template-rows: 1fr;
      min-block-size: 164px;
      border: 1px dashed color-mix(in oklch, #013366 40%, transparent);
      background:
        linear-gradient(135deg, color-mix(in oklch, #013366 5%, #F6F6F6), #F6F6F6);
    }
    .brand-card-more h3 {
      margin: 0;
      font-size: 24px;
      font-weight: 600;
    }
    .seo-section {
      background: var(--surface);
      padding-block: 0 76px;
    }
    .seo-card {
      position: relative;
      border-radius: 5px;
      padding: 34px 36px 32px;
      background: #F6F6F6;
      box-shadow: 0 9px 22px color-mix(in oklch, var(--fg) 9%, transparent);
    }
    .seo-head {
      margin-block-end: 22px;
    }
    .seo-head h2 {
      margin: 0;
      padding-block-end: 18px;
      line-height: 1.12;
    }
    .seo-text {
      position: relative;
      max-block-size: 214px;
      overflow: hidden;
      color: #013366;
      font-size: 16px;
      line-height: 1.68;
      transition: max-block-size 240ms ease;
    }
    .seo-text::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      block-size: 72px;
      background: linear-gradient(180deg, transparent, #F6F6F6 82%);
      pointer-events: none;
      transition: opacity 160ms ease;
    }
    .seo-text.is-expanded {
      max-block-size: 1000px;
    }
    .seo-text.is-expanded::after {
      opacity: 0;
    }
    .seo-text p {
      max-inline-size: 920px;
      margin: 0;
    }
    .seo-text p + p {
      margin-block-start: 14px;
    }
    .seo-text a {
      color: #013366;
      font-weight: 600;
      text-decoration: underline;
      text-decoration-color: #FB6A0D;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }
    .seo-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-block-size: 44px;
      margin-block-start: 22px;
      border: 1px solid #FB6A0D;
      border-radius: 5px;
      padding: 11px 18px;
      background: transparent;
      color: #013366;
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
      transition: transform 160ms ease;
    }
    .seo-toggle::after {
      content: "▼";
      margin-inline-start: 8px;
      color: #FB6A0D;
      font-size: 11px;
      transition: transform 160ms ease;
    }
    .seo-toggle[aria-expanded="true"]::after {
      transform: rotate(180deg);
    }
    .delivery-map-section {
      background: var(--surface);
      padding-block: 76px;
    }
    .delivery-map-card {
      border-radius: 5px;
      padding: 34px 36px 32px;
      background: #F6F6F6;
      box-shadow: 0 9px 22px color-mix(in oklch, var(--fg) 9%, transparent);
    }
    .delivery-map-head {
      margin-block-end: 26px;
    }
    .delivery-map-head h2 {
      margin: 0;
      padding-block-end: 18px;
      line-height: 1.12;
    }
    .delivery-map-embed {
      position: relative;
      overflow: hidden;
      border: 1px solid color-mix(in oklch, #013366 16%, var(--border));
      border-radius: 5px;
      background: var(--surface);
    }
    .delivery-map-image {
      display: block;
      inline-size: 100%;
      block-size: auto;
      aspect-ratio: 1200 / 427;
      object-fit: cover;
    }
    .delivery-cities {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-block-start: 22px;
    }
    .delivery-city {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-block-size: 58px;
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 14px 16px;
      background: var(--surface);
      color: #013366;
      box-shadow: 0 9px 22px color-mix(in oklch, var(--fg) 9%, transparent);
    }
    .delivery-city span {
      font-size: 16px;
      font-weight: 500;
    }
    .delivery-city b {
      color: #FB6A0D;
      font-size: 15px;
      font-weight: 600;
      white-space: nowrap;
    }
    .delivery-notes {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-block-start: 14px;
    }
    .delivery-notes p {
      margin: 0;
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 14px 16px;
      background: var(--surface);
      color: #013366;
      font-size: 15px;
      line-height: 1.45;
    }
    .delivery-notes strong {
      font-weight: 600;
    }
    .analyzer-types-section {
      background:
        linear-gradient(
          180deg,
          var(--surface) 0,
          #F6F6F6 42px,
          #F6F6F6 calc(100% - 42px),
          var(--surface) 100%
        );
      padding-block: 92px 100px;
      color: #013366;
    }
    .analyzer-types-head {
      max-inline-size: 1040px;
      margin-block-end: 30px;
    }
    .analyzer-types-head h2 {
      margin: 0;
      padding-block-end: 18px;
      line-height: 1.14;
    }
    .analyzer-types-head p {
      margin: 22px 0 0;
      max-inline-size: 990px;
      color: #013366;
      font-size: 16px;
      line-height: 1.55;
    }
    .analyzer-types-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 84px;
      align-items: stretch;
    }
    .analyzer-type-card {
      min-block-size: 620px;
      padding: 46px 46px 42px;
      background: var(--surface);
      border-radius: 5px;
      box-shadow: 0 8px 22px color-mix(in oklch, #013366 12%, transparent);
    }
    .analyzer-type-card h3 {
      margin: 0 0 28px;
      color: #013366;
      font-size: 20px;
      line-height: 1.18;
      letter-spacing: -0.02em;
    }
    .analyzer-type-card p {
      margin: 0 0 28px;
      color: #013366;
      font-size: 16px;
      line-height: 1.58;
    }
    .analyzer-type-card h4 {
      margin: 28px 0 14px;
      color: #013366;
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }
    .analyzer-type-card ul {
      display: grid;
      gap: 7px;
      margin: 0;
      padding-inline-start: 20px;
      color: #013366;
      font-size: 16px;
      line-height: 1.45;
    }
    .analyzer-type-card li::marker {
      color: #013366;
      font-size: 0.85em;
    }
    .analyzer-type-link {
      margin-block-start: 26px;
      margin-block-end: 0;
      font-size: 16px;
    }
    .analyzer-type-link a {
      color: #013366;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    .analyzer-type-link a:hover {
      color: #FB6A0D;
    }
    .analyzer-types-dots {
      display: none;
    }
    .analyzer-types-dot {
      display: grid;
      place-items: center;
      inline-size: 48px;
      block-size: 48px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }
    .analyzer-types-dot::before {
      content: "";
      inline-size: 10px;
      block-size: 10px;
      border-radius: 999px;
      background: color-mix(in oklch, #013366 24%, transparent);
    }
    .analyzer-types-dot.is-active::before {
      background: #013366;
    }
    .why-us-section {
      background:
        linear-gradient(
          180deg,
          var(--surface) 0,
          #F6F6F6 38px,
          #F6F6F6 calc(100% - 38px),
          var(--surface) 100%
        );
      padding-block: 78px 86px;
      color: #013366;
    }
    .why-us-head {
      margin-block-end: 36px;
    }
    .why-us-head h2 {
      margin: 0;
      padding-block-end: 14px;
      line-height: 1.18;
    }
    .why-us-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 36px;
      align-items: start;
      padding-block-start: 8px;
    }
    .why-us-item {
      display: grid;
      justify-items: center;
      align-content: start;
      gap: 16px;
      min-block-size: 144px;
      text-align: center;
    }
    .why-us-item img {
      inline-size: 76px;
      block-size: 76px;
      object-fit: contain;
    }
    .why-us-item h3 {
      margin: 0;
      max-inline-size: 190px;
      color: #013366;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.45;
      letter-spacing: 0;
    }
    .popular-section {
      position: relative;
      background: #FFFFFF;
      padding-block: 68px 78px;
      color: #013366;
      --popular-fade-opacity: 1;
      --carousel-fade-opacity: var(--popular-fade-opacity);
      --carousel-fade-bg: #FFFFFF;
      --carousel-mobile-fade-start: 176px;
      --carousel-tablet-fade-start: 154px;
    }
    .popular-section::after {
      content: none;
    }
    .popular-head {
      max-inline-size: 1040px;
      margin-block-end: 34px;
    }
    .popular-head h2 {
      inline-size: fit-content;
      margin: 0;
      padding-block-end: 14px;
      line-height: 1.16;
    }
    .popular-head p {
      margin: 22px 0 0;
      max-inline-size: 990px;
      color: #013366;
      font-size: 16px;
      line-height: 1.55;
    }
    .popular-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 40px;
    }
    .popular-media::after {
      content: none;
    }
    .popular-media img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: contain;
      padding: 20px;
      filter: saturate(0.96) contrast(1.02);
    }
    .popular-media-drager img { padding: 16px; }
    .popular-kicker {
      order: 3;
      margin: 0;
      color: #013366;
      font-size: 20px;
      font-weight: 600;
      line-height: 1.35;
      text-decoration: underline;
      text-decoration-style: dashed;
      text-decoration-thickness: 1px;
      text-underline-offset: 5px;
    }
    .popular-specs {
      order: 4;
      display: grid;
      gap: 0;
      inline-size: 100%;
      margin: 0;
      margin-block: 16px 24px;
      padding: 0;
      list-style: none;
    }
    .popular-specs li {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      padding-block: 9px;
      border-block-end: 1px solid color-mix(in oklch, #013366 18%, transparent);
      color: #013366;
      font-size: 14px;
      line-height: 1.35;
    }
    .popular-specs li:last-child { border-block-end: 0; }
    .popular-specs b {
      font-weight: 600;
      text-align: end;
      white-space: nowrap;
    }
    .popular-cta {
      order: 5;
      margin-block-start: auto;
    }
    .popular-actions {
      order: 5;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      inline-size: 100%;
      margin-block-start: auto;
    }
    .popular-actions .popular-cta {
      order: initial;
      inline-size: 100%;
      min-inline-size: 0;
      margin-block-start: 0;
      padding-inline: 14px;
    }
    .popular-actions .cart-card-cta {
      border-color: var(--accent);
      background: var(--surface);
      color: var(--fg);
    }
    .popular-actions .cart-card-cta:hover,
    .popular-actions .cart-card-cta.is-added {
      border-color: var(--accent);
      background: var(--accent);
      color: white;
    }
    .selection-banner-section {
      background: #FFFFFF;
      padding-block: 28px 74px;
      color: #013366;
    }
    .selection-banner-card {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1200 / 480;
      min-block-size: 370px;
      border: 6px solid #013366;
      border-start-end-radius: 58px;
      background:
        url("img/main/selection-quiz/vibor.webp") center / cover no-repeat,
        #FFFFFF;
    }
    .selection-banner-copy {
      position: absolute;
      inset-block-start: 18%;
      inset-inline-start: 6.2%;
      max-inline-size: 430px;
      display: grid;
      align-content: start;
      color: #013366;
    }
    .selection-banner-copy h2 {
      position: relative;
      margin: 0;
      padding-block-end: 18px;
      max-inline-size: 380px;
      color: #013366;
      font-size: 30px;
      font-weight: 700;
      line-height: 1.18;
      letter-spacing: -0.01em;
    }
    .selection-banner-copy h2::after {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      inset-block-end: 0;
      inline-size: 84px;
      block-size: 3px;
      background: #FB6A0D;
    }
    .selection-banner-lead,
    .selection-banner-note {
      margin: 0;
      color: #013366;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.42;
    }
    .selection-banner-lead {
      margin-block-start: 18px;
    }
    .selection-banner-note {
      margin-block-start: 24px;
    }
    .selection-banner-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: fit-content;
      min-inline-size: 128px;
      min-block-size: 44px;
      margin-block-start: 36px;
      padding: 11px 24px;
      border: 1px solid #013366;
      border-radius: 5px;
      background: #013366;
      color: #FFFFFF;
      font-size: 14px;
      font-weight: 400;
      font-family: inherit;
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 10px 18px color-mix(in oklch, #013366 28%, transparent);
      transition: transform 180ms ease;
    }
    body.quiz-lock {
      overflow: hidden;
    }
    .quiz-modal {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 30px 24px;
      color: #013366;
    }
    .quiz-modal.is-open {
      display: flex;
    }
    .quiz-backdrop {
      position: absolute;
      inset: 0;
      background: color-mix(in oklch, #111111 48%, transparent);
    }
    .quiz-dialog {
      position: relative;
      z-index: 1;
      inline-size: min(1200px, 100%);
      max-block-size: calc(100vh - 60px);
      overflow: auto;
      border: 1px solid #E4E4E4;
      background: #FFFFFF;
      box-shadow: 0 18px 42px color-mix(in oklch, #013366 22%, transparent);
    }
    .quiz-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      min-block-size: 58px;
      padding: 15px 16px;
      border-block-end: 1px solid #E6E6E6;
    }
    .quiz-top h2 {
      margin: 0;
      color: #111111;
      font-size: 18px;
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: 0;
    }
    .quiz-close {
      display: grid;
      place-items: center;
      inline-size: 30px;
      block-size: 30px;
      border: 0;
      background: transparent;
      color: #7B7B7B;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
    }
    .quiz-intro {
      padding: 27px 34px 22px;
      color: #111111;
      font-size: 16px;
      line-height: 1.45;
    }
    .quiz-body {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 28px;
      padding: 0 56px 24px;
    }
    .quiz-steps {
      display: grid;
      gap: 10px;
      align-content: start;
    }
    .quiz-step {
      min-block-size: 80px;
      padding: 18px 14px;
      border: 3px solid transparent;
      background: #F6F6F6;
      color: #111111;
    }
    .quiz-step.is-active {
      border-color: #013366;
      background: #FFFFFF;
    }
    .quiz-step span {
      display: block;
      margin-block-end: 4px;
      font-size: 15px;
      font-weight: 500;
    }
    .quiz-step b {
      display: block;
      min-block-size: 20px;
      color: #111111;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.35;
    }
    .quiz-content {
      min-block-size: 420px;
    }
    .quiz-panel {
      display: none;
    }
    .quiz-panel.is-active {
      display: block;
    }
    .quiz-panel h3 {
      margin: 0 0 14px;
      color: #013366;
      font-size: 24px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }
    .quiz-options {
      display: grid;
      gap: 10px 20px;
      margin-block-start: 8px;
    }
    .quiz-options-grid {
      grid-template-columns: repeat(4, minmax(130px, 1fr));
    }
    .quiz-gas-options {
      grid-template-columns: repeat(5, minmax(110px, 1fr));
    }
    .quiz-type-options {
      grid-template-columns: repeat(4, minmax(130px, 1fr));
    }
    .quiz-options button {
      min-block-size: 65px;
      padding: 14px 16px;
      border: 1px solid #E0E0E0;
      background: #FFFFFF;
      color: #111111;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.25;
      cursor: pointer;
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }
    .quiz-options button.is-selected {
      border: 3px solid #013366;
      box-shadow: inset 0 0 0 1px #013366;
    }
    .quiz-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-block-start: 20px;
    }
    .quiz-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 28px;
      min-inline-size: 250px;
      min-block-size: 55px;
      padding: 13px 28px;
      border: 1px solid #013366;
      border-radius: 5px;
      background: #013366;
      color: #FFFFFF;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 8px 12px color-mix(in oklch, #013366 24%, transparent);
      transition: transform 160ms ease, opacity 160ms ease;
    }
    .quiz-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      transform: none;
    }
    .quiz-input {
      inline-size: 100%;
      min-block-size: 50px;
      border: 1px solid #DADADA;
      border-radius: 0;
      padding: 12px 14px;
      color: #111111;
      font-size: 16px;
      outline: none;
    }
    .quiz-input:focus {
      border-color: #013366;
    }
    .quiz-helper {
      margin: 45px 0 0;
      color: #111111;
      font-size: 14px;
      line-height: 1.45;
    }
    .quiz-result-panel h3 {
      margin-block-end: 18px;
    }
    .quiz-result {
      margin-block-end: 20px;
    }
    .quiz-result h4,
    .quiz-request-form h4 {
      margin: 0 0 8px;
      color: #111111;
      font-size: 24px;
      font-weight: 700;
      line-height: 1.2;
    }
    .quiz-result p {
      margin: 3px 0;
      color: #111111;
      font-size: 14px;
      line-height: 1.35;
    }
    .quiz-result span {
      color: #9B9B9B;
    }
    .quiz-result b {
      font-weight: 500;
    }
    .quiz-request-form {
      display: grid;
      gap: 12px;
      max-inline-size: 455px;
    }
    .quiz-request-form label {
      color: #111111;
      font-size: 14px;
    }
    .quiz-submit {
      min-inline-size: 145px;
      inline-size: fit-content;
      margin-block-start: 18px;
      gap: 0;
    }
    .quiz-policy {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-block-start: 2px;
      color: #111111;
      font-size: 16px;
      line-height: 1.35;
    }
    .quiz-policy input {
      inline-size: 18px;
      block-size: 18px;
      accent-color: #0B7BD3;
    }
    .request {
      padding-block: 78px 96px;
      background:
        linear-gradient(
          180deg,
          var(--surface) 0,
          #F6F6F6 42px,
          #F6F6F6 calc(100% - 42px),
          var(--surface) 100%
        );
    }

    .contacts-page {
      background: var(--surface);
    }
    .contacts-main {
      background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 52%, #F6F6F6 100%);
    }
    .contacts-hero {
      padding-block: 44px 34px;
      background: var(--surface);
    }
    .contacts-hero-inner {
      display: grid;
      gap: 28px;
    }
    .breadcrumbs {
      display: flex;
      align-items: center;
      gap: 10px;
      color: color-mix(in oklch, var(--fg) 42%, white);
      font-size: 13px;
      line-height: 1.3;
    }
    .breadcrumbs a {
      color: color-mix(in oklch, var(--fg) 42%, white);
    }
    .breadcrumbs a:hover {
      color: var(--accent);
    }
    @media (max-width: 700px) {
      .breadcrumbs {
        flex-wrap: nowrap;
        gap: 8px;
        margin-inline: -16px;
        padding-inline: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
      }
      .breadcrumbs::-webkit-scrollbar {
        display: none;
      }
      .breadcrumbs > * {
        flex: 0 0 auto;
      }
    }
    .contacts-layout {
      display: grid;
      grid-template-columns: minmax(280px, 0.68fr) minmax(520px, 1fr);
      gap: 54px;
      align-items: start;
    }
    .contacts-copy h1 {
      margin: 0 0 22px;
      color: var(--fg);
      font-size: clamp(42px, 4vw, 54px);
      line-height: 1.05;
      letter-spacing: -0.02em;
      font-weight: 800;
    }
    .contacts-list {
      display: grid;
      gap: 24px;
      margin: 0;
      color: var(--fg);
      font-size: 17px;
      line-height: 1.55;
    }
    .contacts-list div {
      display: block;
    }
    .contacts-list dt {
      display: inline;
      font-weight: 800;
    }
    .contacts-list dd {
      display: inline;
      margin: 0;
    }
    .contacts-list a {
      color: var(--fg);
      text-decoration-line: underline;
      text-decoration-color: var(--accent);
      text-underline-offset: 4px;
    }
    .about-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(380px, 0.75fr);
      gap: 48px;
      align-items: center;
    }
    .about-copy h1 {
      margin: 0 0 24px;
      color: var(--fg);
      font-size: clamp(42px, 4vw, 54px);
      line-height: 1.05;
      letter-spacing: -0.02em;
      font-weight: 800;
    }
    .about-text {
      display: grid;
      gap: 18px;
      max-inline-size: 720px;
      color: var(--fg);
      font-size: 18px;
      line-height: 1.65;
    }
    .about-text p {
      margin: 0;
    }
    .about-image-card {
      margin: 0;
      overflow: hidden;
      border-radius: 5px;
      background: #F6F6F6;
      box-shadow: 0 18px 32px color-mix(in oklch, var(--fg) 10%, transparent);
    }
    .about-image-card img {
      inline-size: 100%;
      block-size: 100%;
      aspect-ratio: 500 / 350;
      object-fit: cover;
    }
    .privacy-hero {
      background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 42%, #F6F6F6 100%);
    }
    .privacy-card {
      padding: 42px;
      border-radius: 5px;
      background: var(--surface);
      box-shadow: 0 18px 34px color-mix(in oklch, var(--fg) 8%, transparent);
    }
    .privacy-head {
      max-inline-size: 820px;
      margin-block-end: 34px;
    }
    .privacy-kicker,
    .privacy-updated {
      margin: 0;
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 800;
    }
    .privacy-head h1 {
      margin: 12px 0 18px;
      color: var(--fg);
      font-size: clamp(42px, 4vw, 54px);
      line-height: 1.05;
      letter-spacing: -0.02em;
      font-weight: 800;
    }
    .privacy-head p:not(.privacy-kicker):not(.privacy-updated) {
      margin: 0;
      color: color-mix(in oklch, var(--fg) 78%, white);
      font-size: 18px;
      line-height: 1.65;
    }
    .privacy-updated {
      margin-block-start: 16px;
      color: color-mix(in oklch, var(--fg) 58%, white);
    }
    .privacy-content {
      display: grid;
      gap: 26px;
      max-inline-size: 900px;
      color: var(--fg);
    }
    .privacy-content section {
      padding: 0;
    }
    .privacy-content h2 {
      margin: 0 0 12px;
      color: var(--fg);
      font-size: 22px;
      line-height: 1.18;
      letter-spacing: -0.01em;
      font-weight: 800;
    }
    .privacy-content p,
    .privacy-content li {
      color: color-mix(in oklch, var(--fg) 80%, white);
      font-size: 16px;
      line-height: 1.7;
    }
    .privacy-content p {
      margin: 0;
    }
    .privacy-content p + p {
      margin-block-start: 10px;
    }
    .privacy-content ul {
      display: grid;
      gap: 8px;
      margin: 0;
      padding-inline-start: 20px;
    }
    .privacy-content a {
      color: var(--fg);
      text-decoration-line: underline;
      text-decoration-color: var(--accent);
      text-underline-offset: 4px;
    }
    .about-values {
      padding-block: 24px 54px;
      background: linear-gradient(180deg, var(--surface) 0%, #F6F6F6 100%);
    }
    .about-values-grid,
    .promo-grid,
    .service-card-grid,
    .service-compare-grid,
    .service-case-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .about-values-grid article {
      min-block-size: 210px;
      padding: 26px;
      border-radius: 5px;
      background: var(--surface);
      box-shadow: 0 14px 28px color-mix(in oklch, var(--fg) 8%, transparent);
    }
    .about-values-grid span {
      display: inline-block;
      margin-block-end: 22px;
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 800;
    }
    .about-values-grid h2 {
      margin: 0 0 14px;
      color: var(--fg);
      font-size: 22px;
      line-height: 1.15;
      letter-spacing: -0.01em;
      font-weight: 800;
    }
    .about-values-grid p {
      margin: 0;
      color: color-mix(in oklch, var(--fg) 76%, white);
      font-size: 15px;
      line-height: 1.6;
    }
    .promo-hero {
      background: var(--surface);
    }
    .promo-hero-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 32px;
      align-items: end;
      inline-size: 100%;
      max-inline-size: 100%;
      min-inline-size: 0;
      padding: 42px;
      border-radius: 5px;
      background: var(--surface);
      box-shadow: 0 18px 34px color-mix(in oklch, var(--fg) 8%, transparent);
    }
    .promo-hero-copy {
      max-inline-size: 820px;
      min-inline-size: 0;
    }
    .promo-kicker {
      margin: 0 0 14px;
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
    }
    .promo-hero-copy h1 {
      margin: 0 0 18px;
      color: var(--fg);
      font-size: clamp(42px, 4vw, 54px);
      line-height: 1.05;
      letter-spacing: -0.02em;
      font-weight: 800;
      overflow-wrap: anywhere;
    }
    .promo-hero-copy p:not(.promo-kicker) {
      margin: 0;
      color: color-mix(in oklch, var(--fg) 78%, white);
      font-size: 18px;
      line-height: 1.65;
    }
    .promo-hero-cta {
      inline-size: fit-content;
      white-space: nowrap;
    }
    .promo-offers {
      padding-block: 24px 54px;
      background: var(--surface);
    }
    .promo-section-head {
      max-inline-size: 820px;
      margin-block-end: 26px;
    }
    .promo-section-head h2 {
      margin: 0;
      color: var(--fg);
      font-size: 38px;
      line-height: 1.08;
      letter-spacing: -0.02em;
      font-weight: 800;
    }
    .promo-section-head h2::after {
      content: "";
      display: block;
      inline-size: 72px;
      block-size: 4px;
      margin-block-start: 16px;
      border-radius: 999px;
      background: var(--accent);
    }
    .promo-section-head p {
      margin: 18px 0 0;
      color: color-mix(in oklch, var(--fg) 76%, white);
      font-size: 16px;
      line-height: 1.65;
    }
    .promo-card {
      display: grid;
      align-content: start;
      gap: 16px;
      min-inline-size: 0;
      min-block-size: 280px;
      padding: 26px;
      border-radius: 5px;
      background: #F6F6F6;
      box-shadow: 0 14px 28px color-mix(in oklch, var(--fg) 8%, transparent);
      overflow-wrap: anywhere;
    }
    .promo-card span {
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 800;
    }
    .promo-card h3 {
      margin: 0;
      color: var(--fg);
      font-size: 22px;
      line-height: 1.15;
      letter-spacing: -0.01em;
      font-weight: 800;
    }
    .promo-card p {
      margin: 0;
      color: color-mix(in oklch, var(--fg) 76%, white);
      font-size: 15px;
      line-height: 1.6;
    }
    .promo-card b {
      margin-block-start: auto;
      color: var(--fg);
      font-size: 14px;
      line-height: 1.4;
      font-weight: 700;
    }
    .contacts-map {
      inline-size: 100%;
      min-block-size: 400px;
      overflow: hidden;
      background: #F6F6F6;
    }
    .contacts-map > ymaps,
    .contacts-map iframe {
      display: block;
      max-inline-size: 100%;
    }
    .contacts-request {
      padding-block: 16px 78px;
      background: linear-gradient(180deg, var(--surface) 0%, #F6F6F6 30%, #F6F6F6 100%);
    }
    .contacts-request-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.38fr);
      gap: 34px;
      padding: 70px 72px;
      background: var(--surface);
      border: 7px solid var(--fg);
      border-start-end-radius: 64px;
      color: var(--fg);
    }
    .contacts-form {
      display: grid;
      gap: 20px;
      align-content: start;
    }
    .contacts-form-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 28px;
      align-items: end;
    }
    .contacts-form-head h2,
    .contacts-after h2 {
      margin: 0;
      color: var(--fg);
      font-size: 30px;
      line-height: 1.1;
      letter-spacing: -0.01em;
      font-weight: 800;
    }
    .contacts-form-head p {
      margin: 0 0 2px;
      color: var(--fg);
      font-size: 18px;
      line-height: 1.25;
      font-weight: 600;
      white-space: nowrap;
    }
    .contacts-form-head a {
      color: var(--fg);
      font-weight: 800;
      text-decoration: none;
    }
    .contacts-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
    }
    .contacts-field {
      inline-size: 100%;
      min-block-size: 56px;
      padding: 14px 16px;
      border: 1px solid color-mix(in oklch, var(--fg) 24%, white);
      border-radius: 0;
      background: var(--surface);
      color: var(--fg);
      font-size: 16px;
      outline: none;
    }
    .contacts-field::placeholder {
      color: color-mix(in oklch, var(--fg) 54%, white);
    }
    .contacts-field:focus {
      border-color: var(--accent);
    }
    .contacts-textarea {
      grid-column: 1 / -1;
      min-block-size: 142px;
      resize: vertical;
    }
    .contacts-policy {
      display: grid;
      grid-template-columns: 20px 1fr;
      gap: 10px;
      align-items: start;
      max-inline-size: 620px;
      color: var(--fg);
      font-size: 13px;
      line-height: 1.45;
    }
    .contacts-policy input {
      inline-size: 20px;
      block-size: 20px;
      margin: 2px 0 0;
      accent-color: var(--fg);
    }
    .contacts-policy a {
      color: var(--fg);
      text-decoration-line: underline;
      text-decoration-color: var(--accent);
      text-underline-offset: 3px;
    }
    .contacts-submit {
      justify-self: end;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      min-block-size: 52px;
      padding: 14px 30px;
      border: 1px solid var(--fg);
      border-radius: 4px;
      background: var(--fg);
      color: white;
      font: inherit;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 8px 16px color-mix(in oklch, var(--fg) 22%, transparent);
      transition: transform 160ms ease, opacity 160ms ease;
    }
    .contacts-submit::after {
      content: "→";
      font-size: 26px;
      line-height: 0.7;
      font-weight: 400;
    }
    .contacts-submit:disabled {
      opacity: 0.48;
      cursor: not-allowed;
      box-shadow: none;
    }
    .contacts-submit:disabled:hover {
      transform: none;
    }
    .contacts-form-status {
      margin: -4px 0 0;
      color: var(--fg);
      font-size: 14px;
      line-height: 1.45;
      font-weight: 600;
    }
    .contacts-form-status[data-status="success"] {
      color: #17A34A;
    }
    .contacts-form-status[data-status="error"] {
      color: #DC2626;
    }
    .cart-page {
      background: var(--surface);
      color: var(--fg);
    }
    .cart-hero {
      padding-block: 28px 48px;
      background: linear-gradient(180deg, #F6F6F6 0%, var(--surface) 100%);
    }
    .cart-hero h1 {
      max-inline-size: 760px;
      margin: 22px 0 12px;
      color: var(--fg);
      font-size: clamp(36px, 5vw, 56px);
      line-height: 1.04;
      font-weight: 800;
      letter-spacing: -0.01em;
    }
    .cart-hero p {
      max-inline-size: 720px;
      margin: 0;
      color: color-mix(in oklch, var(--fg) 72%, white);
      font-size: 18px;
      line-height: 1.6;
    }
    .cart-section {
      padding-block: 56px 78px;
    }
    .cart-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 0.38fr);
      gap: 28px;
      align-items: start;
    }
    .cart-list {
      display: grid;
      gap: 14px;
    }
    .cart-item {
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr) 146px 132px auto;
      gap: 18px;
      align-items: center;
      padding: 18px;
      border-radius: 6px;
      background: #F6F6F6;
      box-shadow: 0 9px 22px color-mix(in oklch, var(--fg) 8%, transparent);
    }
    .cart-item__media {
      display: grid;
      place-items: center;
      aspect-ratio: 1;
      border-radius: 5px;
      background: var(--surface);
      overflow: hidden;
    }
    .cart-item__media img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: contain;
      padding: 8px;
    }
    .cart-item__body {
      display: grid;
      gap: 8px;
    }
    .cart-item__body h2 {
      margin: 0;
      color: var(--fg);
      font-size: 20px;
      line-height: 1.2;
      font-weight: 800;
    }
    .cart-item__body a {
      color: inherit;
      text-decoration: none;
    }
    .cart-item__body a:hover {
      color: var(--accent);
    }
    .cart-item__body p,
    .cart-item__total {
      margin: 0;
      color: var(--accent);
      font-size: 16px;
      line-height: 1.25;
      font-weight: 800;
    }
    .cart-quantity {
      display: grid;
      grid-template-columns: 40px minmax(48px, 1fr) 40px;
      min-block-size: 42px;
      border: 1px solid color-mix(in oklch, var(--fg) 18%, white);
      border-radius: 5px;
      overflow: hidden;
      background: var(--surface);
    }
    .cart-quantity button,
    .cart-quantity input {
      border: 0;
      background: transparent;
      color: var(--fg);
      font: inherit;
      font-weight: 800;
      text-align: center;
    }
    .cart-quantity button {
      cursor: pointer;
    }
    .cart-quantity button:hover {
      background: #F6F6F6;
      color: var(--accent);
    }
    .cart-quantity input {
      min-inline-size: 0;
      border-inline: 1px solid color-mix(in oklch, var(--fg) 12%, white);
      appearance: textfield;
    }
    .cart-quantity input::-webkit-outer-spin-button,
    .cart-quantity input::-webkit-inner-spin-button {
      margin: 0;
      appearance: none;
    }
    .cart-remove {
      border: 0;
      background: transparent;
      color: color-mix(in oklch, var(--fg) 64%, white);
      font: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      text-decoration: underline;
      text-decoration-color: var(--accent);
      text-underline-offset: 4px;
    }
    .cart-remove:hover {
      color: var(--accent);
    }
    .cart-order-card,
    .cart-empty {
      padding: 28px;
      border-radius: 6px;
      background: #F6F6F6;
      box-shadow: 0 9px 22px color-mix(in oklch, var(--fg) 8%, transparent);
    }
    .cart-order-card {
      position: sticky;
      inset-block-start: 92px;
    }
    .cart-total {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      margin-block-end: 22px;
      padding-block-end: 18px;
      border-block-end: 1px solid color-mix(in oklch, var(--fg) 14%, white);
    }
    .cart-total span {
      font-size: 15px;
      line-height: 1.3;
      font-weight: 800;
      text-transform: uppercase;
    }
    .cart-total b {
      color: var(--accent);
      font-size: 22px;
      line-height: 1.15;
      font-weight: 800;
      text-align: end;
    }
    .cart-order-card .contacts-fields {
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .cart-order-card .contacts-submit {
      inline-size: 100%;
      justify-self: stretch;
    }
    .cart-empty {
      display: grid;
      gap: 16px;
      justify-items: start;
    }
    .cart-empty[hidden],
    .cart-layout[hidden] {
      display: none !important;
    }
    .cart-empty h2 {
      margin: 0;
      color: var(--fg);
      font-size: 26px;
      line-height: 1.15;
    }
    .cart-empty p {
      margin: 0;
      color: color-mix(in oklch, var(--fg) 72%, white);
      font-size: 16px;
      line-height: 1.55;
    }
    .contacts-after {
      padding-inline-start: 30px;
      border-inline-start: 1px solid var(--border);
    }
    .contacts-after ol {
      display: grid;
      gap: 22px;
      position: relative;
      margin: 28px 0 0;
      padding: 0;
      list-style: none;
      counter-reset: contact-step;
    }
    .contacts-after ol::before {
      content: "";
      position: absolute;
      inset-block: 12px 20px;
      inset-inline-start: 8px;
      inline-size: 1px;
      background: var(--border);
    }
    .contacts-after li {
      position: relative;
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 14px;
      align-items: start;
      color: var(--fg);
      font-size: 16px;
      line-height: 1.45;
      font-weight: 500;
    }
    .contacts-after li::before {
      counter-increment: contact-step;
      content: "";
      inline-size: 13px;
      block-size: 13px;
      margin-block-start: 4px;
      border: 3px solid #0067D9;
      border-radius: 999px;
      background: var(--surface);
      z-index: 1;
    }
    .contacts-after li:last-child {
      font-weight: 800;
    }
    .contacts-after li:last-child::before {
      inline-size: 17px;
      block-size: 17px;
      margin-inline-start: -2px;
      border: 0;
      background: linear-gradient(135deg, #0067D9, var(--fg));
    }

    .cookie-consent {
      position: fixed;
      z-index: 80;
      inset-inline: 24px;
      inset-block-end: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      max-inline-size: 920px;
      margin-inline: auto;
      padding: 16px 18px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: var(--surface);
      box-shadow: 0 18px 46px color-mix(in oklch, var(--fg) 16%, transparent);
      color: var(--fg);
    }

    .cookie-consent[hidden] {
      display: none;
    }

    .cookie-consent__content {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 14px;
      min-inline-size: 0;
    }

    .cookie-consent p {
      margin: 0;
      font-size: 14px;
      line-height: 1.45;
      color: var(--fg);
    }

    .cookie-consent__link {
      color: var(--fg);
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      text-decoration-line: underline;
      text-decoration-color: var(--accent);
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }

    .cookie-consent__link:hover {
      color: var(--accent);
    }

    .cookie-consent__button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-block-size: 42px;
      padding: 10px 18px;
      border: 1px solid var(--accent);
      border-radius: 4px;
      background: var(--surface);
      color: var(--fg);
      font: inherit;
      font-size: 15px;
      font-weight: 500;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      transition: transform 160ms ease;
    }
    .site-footer {
      background: #F6F6F6;
      color: #013366;
      border-block-start: 1px solid var(--border);
    }
    .footer-main {
      display: grid;
      grid-template-columns: minmax(180px, 0.58fr) minmax(180px, 0.58fr) minmax(360px, 0.84fr);
      gap: 56px;
      align-items: start;
      padding-block: 48px 24px;
    }
    .footer-column {
      display: grid;
      align-content: start;
      gap: 12px;
    }
    .footer-column h3,
    .footer-contact-card h3 {
      margin: 0 0 14px;
      color: #013366;
      font-size: 20px;
      line-height: 1.2;
      font-weight: 800;
    }
    .footer-column h3:not(:first-child) {
      margin-block-start: 22px;
    }
    .footer-column a {
      inline-size: fit-content;
      color: #013366;
      font-size: 16px;
      line-height: 1.35;
      font-weight: 400;
    }
    .footer-column a:hover,
    .footer-legal-links a:hover {
      color: #FB6A0D;
    }
    .footer-social {
      display: grid;
      gap: 10px;
      margin-block-start: 18px;
    }
    .footer-social h4 {
      margin: 0;
      color: #013366;
      font-size: 16px;
      line-height: 1.25;
      font-weight: 600;
    }
    .footer-social-icons {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .footer-social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: 38px;
      block-size: 38px;
      border-radius: 5px;
      transition: transform 160ms ease, opacity 160ms ease;
    }
    .footer-social-link:hover,
    .footer-social-link:focus-visible {
      opacity: .86;
      transform: translateY(-1px);
    }
    .footer-social-link:focus-visible {
      outline: 2px solid #FB6A0D;
      outline-offset: 3px;
    }
    .footer-social-link img {
      display: block;
      inline-size: 30px;
      block-size: 30px;
      object-fit: contain;
    }
    .footer-contact-card {
      justify-self: end;
      inline-size: min(100%, 380px);
      display: grid;
      gap: 18px;
      padding: 32px 40px 34px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 5px;
    }
    .footer-phone {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 8px;
      align-items: start;
      color: #013366;
    }
    .footer-phone-secondary {
      grid-template-columns: 18px 1fr;
    }
    .footer-phone svg,
    .footer-address svg {
      color: #0067D9;
      flex: 0 0 auto;
    }
    .footer-phone svg,
    .footer-address svg {
      inline-size: 20px;
      block-size: 20px;
      margin-block-start: 3px;
    }
    .footer-phone b {
      display: block;
      font-size: 20px;
      line-height: 1.1;
      font-weight: 800;
      white-space: nowrap;
    }
    .footer-phone small,
    .footer-address small {
      display: block;
      color: #8C8C8C;
      font-size: 13px;
      line-height: 1.25;
      margin-block-start: 2px;
    }
    .footer-call {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-block-size: 44px;
      padding: 10px 17px;
      padding-inline: 17px;
      border: 1px solid #FB6A0D;
      border-radius: 4px;
      color: #013366;
      background: var(--surface);
      font-size: 16px;
      font-weight: 400;
      cursor: pointer;
      white-space: nowrap;
      transition: transform 160ms ease, border-color 160ms ease;
    }
    .footer-address {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 8px;
      color: #013366;
    }
    .footer-address p {
      margin: 0;
      color: #013366;
      font-size: 16px;
      line-height: 1.25;
    }
    .footer-address b {
      display: block;
      font-weight: 800;
    }
    .footer-address small {
      grid-column: 2;
      color: #013366;
      font-size: 13px;
      line-height: 1.2;
    }
    .footer-bottom {
      border-block-start: 1px solid var(--border);
      background: #F6F6F6;
    }
    .footer-bottom-inner {
      display: grid;
      grid-template-columns: 270px minmax(0, 1fr);
      gap: 42px;
      align-items: center;
      padding-block: 36px;
    }
    .footer-brand {
      inline-size: fit-content;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 18px 14px 14px;
      border-radius: 5px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: #013366;
    }
    .footer-brand .brand-mark {
      inline-size: 45px;
      block-size: 45px;
      flex: 0 0 auto;
    }
    .footer-brand .brand-name strong {
      font-size: 31px;
    }
    .footer-legal {
      display: grid;
      gap: 8px;
      color: #8C8C8C;
      font-size: 13px;
      line-height: 1.35;
      padding-inline-start: 30px;
      border-inline-start: 1px solid var(--border);
    }
    .footer-legal p {
      max-inline-size: 720px;
      margin: 0;
    }
    .footer-legal-links {
      display: flex;
      flex-wrap: wrap;
      gap: 22px;
      color: #013366;
    }
    .footer-legal-links a {
      color: #013366;
    }
    .error-page {
      min-block-size: 100vh;
      background: linear-gradient(180deg, #fff 0%, #F6F6F6 44%, #fff 100%);
    }
    .error-main {
      padding-block: 76px 84px;
    }
    .error-card {
      display: grid;
      justify-items: center;
      gap: 18px;
      max-inline-size: 900px;
      margin-inline: auto;
      padding: clamp(28px, 5vw, 56px);
      border-radius: 18px;
      background: var(--surface);
      box-shadow: 0 14px 44px rgba(1, 51, 102, 0.08);
      text-align: center;
    }
    .error-kicker {
      inline-size: fit-content;
      margin: 0;
      padding: 7px 11px;
      border-radius: 999px;
      background: #F6F6F6;
      color: var(--accent);
      font-size: 13px;
      font-weight: 700;
    }
    .error-code {
      display: block;
      color: #FB6A0D;
      font-size: clamp(112px, 15vw, 196px);
      line-height: 0.82;
      font-weight: 800;
      letter-spacing: -0.06em;
    }
    .error-card h1 {
      max-inline-size: 720px;
      margin: 0;
      color: var(--fg);
      font-size: clamp(38px, 5vw, 64px);
      line-height: 1;
      letter-spacing: -0.035em;
    }
    .error-lead {
      max-inline-size: 720px;
      margin: 0;
      color: #013366;
      font-size: 22px;
      line-height: 1.55;
    }
    .error-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-block-start: 28px;
    }
    .error-actions .btn {
      border-color: var(--accent);
      background: var(--surface);
      color: var(--accent);
      font-weight: 400;
    }
    .error-actions .btn.primary {
      border-color: #013366;
      background: #013366;
      color: #fff;
    }
    @media (max-width: 980px) {
      .error-main {
        padding-block: 58px 64px;
      }
    }
    @media (max-width: 640px) {
      .error-main {
        padding-block: 38px 48px;
      }
      .error-card {
        border-radius: 12px;
      }
      .error-card h1 {
        font-size: 38px;
      }
      .error-lead {
        font-size: 18px;
      }
      .error-actions {
        display: grid;
        grid-template-columns: 1fr;
        inline-size: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .topbar,
      .topbar-inner {
        transition: none;
      }
    }
    @media (max-width: 1035px) {
      .shell { padding-inline: 18px; }
      :where(
        .brands-inner,
        .seo-inner,
        .delivery-map-inner,
        .analyzer-types-inner,
        .why-us-inner,
        .popular-inner,
        .selection-banner-inner
      ) {
        padding-inline: 18px;
      }
      .topbar-inner {
        flex-wrap: wrap;
        gap: 14px;
        padding-block: 12px;
      }
      .brand {
        min-inline-size: 0;
        flex: 1 1 390px;
      }
      .header-service {
        flex: 1 1 100%;
        justify-content: space-between;
        gap: 16px;
      }
      .help-link { text-align: start; }
      .nav {
        --nav-menu-offset: 18px;
        --nav-menu-width: 230px;
        gap: 24px;
        font-size: 15px;
      }
      .nav-menu {
        display: none;
      }
      .nav.is-open .nav-menu {
        position: absolute;
        inset-block-start: calc(100% - 4px);
        inset-inline-start: var(--nav-menu-offset);
        z-index: 30;
        display: grid;
        min-inline-size: var(--nav-menu-width);
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: 0 8px 24px color-mix(in oklch, var(--fg) 14%, transparent);
      }
      .nav.is-open .nav-mega {
        display: grid;
        min-block-size: auto;
      }
      .nav.is-open .nav-menu-link {
        display: block;
        padding: 10px 12px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
      }
      .nav.is-open .nav-menu-link:hover {
        background: color-mix(in oklch, var(--fg) 7%, var(--surface));
      }
      .nav.is-open .nav-mega-trigger::after,
      .nav.is-open .nav-mega-panel::before,
      .nav.is-open .nav-mega-item small {
        display: none;
      }
      .nav.is-open .nav-mega-panel {
        position: static;
        display: grid;
        grid-template-columns: 1fr;
        inline-size: auto;
        max-inline-size: none;
        gap: 4px;
        padding: 0 0 4px 14px;
        border: 0;
        border-inline-start: 2px solid var(--border);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
      }
      .nav.is-open .nav-mega-item {
        padding: 9px 10px;
        border-radius: 6px;
      }
      .nav.is-open .nav-mega-item span {
        font-size: 13px;
      }
      .nav-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        inline-size: auto;
        block-size: 38px;
        padding-inline: 10px;
        flex: 0 0 auto;
        border: 1px solid #FB6A0D;
        border-radius: 4px;
        background: var(--surface);
        color: var(--fg);
        cursor: pointer;
      }
      .nav-burger-icon {
        display: grid;
        gap: 4px;
      }
      .nav-burger-line {
        display: block;
        inline-size: 17px;
        block-size: 2px;
        border-radius: 999px;
        background: currentColor;
      }
      .nav-burger-label {
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
      }
      h2,
      .pricing-section h2,
      .brands-head h2,
      .seo-head h2,
      .analyzer-types-head h2,
      .why-us-head h2,
      .popular-head h2 {
        font-size: 34px;
      }
      .selection-banner-copy h2 {
        font-size: 30px;
      }
      .section-head {
        grid-template-columns: 1fr;
      }
      .hero {
        min-block-size: auto;
        background:
          linear-gradient(90deg, var(--surface) 0 60%, color-mix(in oklch, var(--surface) 78%, transparent) 60%),
          url("img/main/hero/intro-hero-ultra-min-1280.webp") center / cover no-repeat;
      }
      .hero-inner {
        grid-template-columns: 1fr;
        min-block-size: auto;
        gap: 20px;
      }
      .hero-copy { padding-block: 46px 10px; }
      .hero-badges {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        inline-size: 100%;
        margin-inline-start: 0;
        padding-block-end: 32px;
      }
      .hero-badge { min-block-size: 112px; }
      .brands-section {
        padding-block: 60px 68px;
      }
      .brands-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }
      .brand-card {
        grid-template-rows: 100px auto;
        min-block-size: 168px;
      }
      .seo-section {
        padding-block-end: 68px;
      }
      .seo-card {
        padding: 30px 28px 28px;
      }
      .seo-text {
        max-block-size: 238px;
      }
      .delivery-map-section {
        padding-block-end: 68px;
      }
      .delivery-map-card {
        padding: 30px 28px 28px;
      }
      .delivery-map-head h2 {
        font-size: 34px;
      }
      .delivery-map-image {
        block-size: 380px;
      }
      .delivery-cities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .delivery-notes {
        grid-template-columns: 1fr;
      }
      .contacts-hero {
        padding-block-start: 34px;
      }
      .contacts-layout {
        grid-template-columns: 1fr;
        gap: 30px;
      }
      .about-layout {
        grid-template-columns: 1fr;
        gap: 30px;
      }
      .promo-hero-card {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 34px 28px;
      }
      .promo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .privacy-card {
        padding: 34px 28px;
      }
      .privacy-head h1 {
        font-size: 42px;
      }
      .about-image-card {
        max-inline-size: 560px;
      }
      .about-values-grid {
        grid-template-columns: 1fr;
      }
      .contacts-map {
        min-block-size: 400px;
      }
      .contacts-request-card {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 48px 42px;
        border-width: 5px;
        border-start-end-radius: 42px;
      }
      .contacts-form-head {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .contacts-after {
        padding-inline-start: 0;
        padding-block-start: 30px;
        border-inline-start: 0;
        border-block-start: 1px solid var(--border);
      }
      .analyzer-types-section {
        padding-block: 72px 78px;
      }
      .analyzer-types-grid {
        gap: 22px;
      }
      .analyzer-type-card {
        min-block-size: auto;
        padding: 34px 28px 32px;
      }
      .why-us-section {
        padding-block: 68px 74px;
      }
      .why-us-grid {
        grid-template-columns: repeat(5, minmax(112px, 1fr));
        gap: 20px;
      }
      .why-us-item img {
        inline-size: 66px;
        block-size: 66px;
      }
      .why-us-item h3 {
        font-size: 14px;
      }
      .popular-section {
        padding-block: 58px 68px;
      }
      .popular-head {
        margin-block-end: 30px;
      }
      .popular-media {
        min-block-size: 0;
      }
      .popular-media img {
        block-size: 100%;
      }
      .popular-content {
        padding: 0;
      }
      .popular-card h3 {
        font-size: 30px;
      }
      .popular-specs li {
        display: grid;
        gap: 4px;
      }
      .popular-specs b {
        text-align: start;
      }
      .selection-banner-section {
        padding-block: 24px 58px;
      }
      .selection-banner-card {
        inline-size: 100%;
        max-inline-size: 100%;
        aspect-ratio: auto;
        min-block-size: 480px;
        border-width: 5px;
        border-start-end-radius: 44px;
        background: #FFFFFF;
      }
      .selection-banner-copy {
        inset-block-start: 16%;
        inset-inline-start: 5.5%;
        max-inline-size: 380px;
      }
      .selection-banner-copy h2 {
        max-inline-size: 380px;
      }
      .selection-banner-lead,
      .selection-banner-note {
        font-size: 14px;
      }
      .selection-banner-cta {
        margin-block-start: 34px;
      }
      .quiz-modal {
        padding: 24px 18px;
      }
      .quiz-dialog {
        max-block-size: calc(100vh - 48px);
      }
      .quiz-intro {
        padding: 22px 24px 18px;
      }
      .quiz-body {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 22px;
        padding: 0 24px 24px;
      }
      .quiz-step {
        min-block-size: 74px;
        padding: 15px 12px;
      }
      .quiz-options-grid,
      .quiz-gas-options,
      .quiz-type-options {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
      }
      .quiz-options button {
        min-block-size: 60px;
        font-size: 16px;
      }
      .quiz-actions {
        gap: 14px;
      }
      .quiz-btn {
        min-inline-size: 220px;
      }
      .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
        padding-block-start: 42px;
      }
      .footer-contact-card {
        grid-column: 1 / -1;
        justify-self: stretch;
        inline-size: 100%;
        grid-template-columns: 1fr 1fr;
        align-items: start;
      }
      .footer-contact-card h3 {
        grid-column: 1 / -1;
      }
      .footer-address {
        grid-column: 2;
        grid-row: 2 / 4;
      }
      .footer-bottom-inner {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .footer-legal {
        padding-inline-start: 0;
        border-inline-start: 0;
      }
    }
    @media (min-width: 641px) and (max-width: 1035px) {
      .topbar {
        --topbar-hide-offset: 72px;
      }
      .topbar-inner {
        flex-wrap: nowrap;
        gap: 12px;
        min-block-size: 72px;
        padding-block: 10px;
      }
      .brand {
        flex: 1 1 auto;
        min-inline-size: 0;
        gap: 8px;
      }
      .brand-mark {
        inline-size: 40px;
        block-size: 40px;
        flex: 0 0 auto;
      }
      .brand-name strong {
        font-size: 30px;
        letter-spacing: -0.035em;
      }
      .brand-descriptor {
        max-inline-size: 150px;
        margin-inline-start: 6px;
        padding-inline-start: 12px;
        font-size: 11px;
        line-height: 1.22;
      }
      .header-service {
        flex: 0 0 auto;
        justify-content: flex-end;
        gap: 0;
      }
      .header-service .help-link,
      .header-service .contact-link {
        display: none;
      }
      .phone-block {
        min-inline-size: 176px;
        grid-template-columns: 22px auto;
        gap: 8px;
      }
      .service-icon {
        inline-size: 22px;
        block-size: 22px;
      }
      .phone-main {
        font-size: 17px;
      }
      .phone-note {
        font-size: 11px;
      }
      .header-call {
        min-block-size: 40px;
        padding-inline: 12px;
        font-size: 13px;
      }
      .nav {
        gap: 18px;
        min-block-size: 50px;
        overflow: visible;
        font-size: 14px;
        font-weight: 500;
      }
      .nav-help {
        display: inline-flex;
        flex: 0 0 auto;
        max-inline-size: 150px;
        color: var(--fg);
        font-size: 12px;
        line-height: 1.2;
      }
      .nav-cost {
        display: inline-grid;
        grid-template-columns: 22px auto;
        align-items: center;
        gap: 9px;
        flex: 0 0 auto;
        min-inline-size: 174px;
        color: var(--fg);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.15;
        text-decoration: underline;
        text-decoration-style: dashed;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
      }
      .nav-email {
        flex: 0 0 auto;
        margin-inline-start: auto;
        font-size: 13px;
      }
      .hero {
        background: url("img/main/hero/intro-hero-ultra-min-1280.webp") center / cover no-repeat;
      }
      .hero-copy,
      .hero h1,
      .hero-title-subline,
      .hero-bullets {
        background: transparent;
      }
    }
    @media (max-width: 1135px) {
      .help-link,
      .nav-help {
        display: none;
      }
    }
    @media (max-width: 745px) {
      .brand-descriptor {
        display: none;
      }
    }
    @media (max-width: 640px) {
      .topbar {
        --topbar-hide-offset: 66px;
      }
      .hero {
        background: url("img/main/hero/intro-hero-ultra-min-768.webp") center / cover no-repeat;
      }
      .shell { padding-inline: 14px; }
      :where(
        .brands-inner,
        .seo-inner,
        .delivery-map-inner,
        .analyzer-types-inner,
        .why-us-inner,
        .popular-inner,
        .selection-banner-inner
      ) {
        padding-inline: 14px;
      }
      .topbar-inner {
        flex-wrap: nowrap;
        gap: 10px;
        min-block-size: 66px;
        padding-block: 8px;
      }
      .brand {
        min-inline-size: 0;
        flex: 1 1 auto;
      }
      .brand-mark {
        inline-size: 38px;
        block-size: 38px;
      }
      .brand-name strong { font-size: 25px; }
      .brand-descriptor,
      .help-link,
      .contact-link { display: none; }
      .header-service {
        flex: 0 0 auto;
        justify-content: flex-end;
      }
      .phone-block {
        min-inline-size: 0;
        grid-template-columns: 22px auto;
        gap: 7px;
      }
      .service-icon {
        inline-size: 22px;
        block-size: 22px;
      }
      .phone-main {
        font-size: 15px;
      }
      .phone-note {
        display: block;
        margin-block-start: 2px;
        font-size: 10px;
      }
      .actions { display: none; }
      .nav {
        --nav-menu-offset: 14px;
        --nav-menu-width: min(260px, calc(100vw - 28px));
        gap: 12px;
        min-block-size: 46px;
        padding-inline: 14px;
        overflow: visible;
        font-size: 14px;
      }
      .cookie-consent {
        inset-inline: 14px;
        inset-block-end: 14px;
        display: grid;
        gap: 14px;
        padding: 14px;
      }
      .cookie-consent__content {
        display: grid;
        gap: 8px;
      }
      .cookie-consent p,
      .cookie-consent__link {
        font-size: 13px;
      }
      .cookie-consent__button {
        inline-size: 100%;
      }
      .nav-burger {
        block-size: 36px;
      }
      .nav-help,
      .nav-cost {
        display: none;
      }
      .nav-email {
        display: inline-flex;
        margin-inline-start: auto;
        font-size: 13px;
      }
      .contacts-hero {
        padding-block: 28px 24px;
      }
      .breadcrumbs {
        font-size: 12px;
      }
      .contacts-layout {
        gap: 24px;
      }
      .contacts-copy h1 {
        margin-block-end: 18px;
        font-size: 40px;
      }
      .contacts-list {
        gap: 18px;
        font-size: 15px;
      }
      .about-copy h1 {
        font-size: 42px;
      }
      .promo-hero-card {
        inline-size: 100%;
        max-inline-size: 100%;
        padding: 26px 18px;
      }
      .promo-hero-cta {
        inline-size: 100%;
        gap: 8px;
        padding-inline: 16px;
        white-space: normal;
        text-align: center;
      }
      .promo-hero-copy h1 {
        font-size: 32px;
      }
      .promo-hero-copy p:not(.promo-kicker) {
        font-size: 16px;
      }
      .promo-offers {
        padding-block: 12px 42px;
      }
      .promo-section-head h2 {
        font-size: 30px;
      }
      .promo-grid {
        grid-template-columns: 1fr;
      }
      .promo-card {
        min-block-size: auto;
        padding: 22px 18px;
      }
      .promo-card h3 {
        font-size: 20px;
      }
      .about-text {
        gap: 14px;
        font-size: 16px;
      }
      .privacy-card {
        padding: 26px 18px;
      }
      .privacy-head {
        margin-block-end: 26px;
      }
      .privacy-head h1 {
        font-size: 36px;
      }
      .privacy-head p:not(.privacy-kicker):not(.privacy-updated) {
        font-size: 16px;
      }
      .privacy-content {
        gap: 22px;
      }
      .privacy-content h2 {
        font-size: 20px;
      }
      .privacy-content p,
      .privacy-content li {
        font-size: 15px;
      }
      .about-values {
        padding-block: 12px 42px;
      }
      .about-values-grid article {
        min-block-size: auto;
        padding: 22px 18px;
      }
      .about-values-grid h2 {
        font-size: 20px;
      }
      .contacts-map {
        min-block-size: 320px;
        border-radius: 5px;
      }
      .contacts-request {
        padding-block: 12px 52px;
      }
      .contacts-request-card {
        padding: 30px 18px;
        border-width: 4px;
        border-start-end-radius: 32px;
      }
      .contacts-form-head h2,
      .contacts-after h2 {
        font-size: 28px;
      }
      .contacts-form-head p {
        font-size: 16px;
        white-space: normal;
      }
      .contacts-fields {
        grid-template-columns: 1fr;
        gap: 14px;
      }
      .contacts-field {
        min-block-size: 50px;
      }
      .contacts-textarea {
        min-block-size: 130px;
      }
      .contacts-policy {
        font-size: 12px;
      }
      .contacts-submit {
        justify-self: stretch;
      }
      .contacts-after ol {
        gap: 16px;
      }
      .hero {
        background: var(--surface);
      }
      .hero-copy { padding-block: 38px 16px; }
      .hero h1 { font-size: 38px; }
      .hero-bullets {
        margin-block-start: 24px;
        font-size: 16px;
      }
      .hero-actions {
        gap: 12px;
        margin-block-start: 30px;
      }
      .hero-actions .btn {
        inline-size: 100%;
        min-inline-size: 0;
        min-block-size: 50px;
        font-size: 16px;
      }
      .hero-badges {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        inline-size: 100%;
        max-inline-size: none;
        gap: 6px;
        margin-inline: 0;
      }
      .hero-badge {
        min-block-size: 92px;
        padding: 9px 6px 8px;
      }
      .hero-badge img {
        max-inline-size: 56px;
        max-block-size: 42px;
      }
      .hero-badge.brands img {
        max-inline-size: 76px;
        max-block-size: 34px;
      }
      .hero-badge.service img {
        max-inline-size: 44px;
        max-block-size: 44px;
      }
      .hero-badge strong {
        font-size: 10px;
        line-height: 1.18;
      }
      .brands-section {
        padding-block: 48px 56px;
      }
      .brands-head {
        margin-block-end: 24px;
      }
      .brands-head h2 {
        font-size: 30px;
        line-height: 1.22;
      }
      .brands-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      .brand-card {
        grid-template-rows: 88px auto;
        min-block-size: 150px;
        padding: 18px 12px 14px;
      }
      .brand-card img {
        max-inline-size: min(100%, 150px);
        max-block-size: 72px;
      }
      .brand-card h3 {
        margin-block-start: 8px;
        font-size: 15px;
      }
      .brand-card-more {
        grid-template-rows: 1fr;
      }
      .brand-card-more h3 {
        margin: 0;
        font-size: 20px;
      }
      .seo-section {
        padding-block: 0 56px;
      }
      .seo-card {
        padding: 24px 18px 24px;
      }
      .seo-head {
        margin-block-end: 18px;
      }
      .seo-head h2 {
        font-size: 30px;
        line-height: 1.22;
      }
      .seo-text {
        max-block-size: 258px;
        font-size: 15px;
        line-height: 1.62;
      }
      .seo-text p + p {
        margin-block-start: 12px;
      }
      .seo-toggle {
        inline-size: 100%;
      }
      .delivery-map-section {
        padding-block: 56px;
      }
      .delivery-map-card {
        padding: 24px 18px 24px;
      }
      .delivery-map-head {
        margin-block-end: 18px;
      }
      .delivery-map-head h2 {
        font-size: 30px;
        line-height: 1.22;
      }
      .delivery-map-image {
        block-size: 320px;
      }
      .delivery-cities {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-block-start: 18px;
      }
      .delivery-city {
        min-block-size: 52px;
        padding: 12px 14px;
      }
      .delivery-city span {
        font-size: 15px;
      }
      .delivery-city b {
        font-size: 14px;
      }
      .delivery-notes {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .delivery-notes p {
        padding: 12px 14px;
        font-size: 14px;
      }
      .analyzer-types-section {
        padding-block: 60px 66px;
      }
      .analyzer-types-head p {
        font-size: 16px;
      }
      .analyzer-type-card {
        padding: 28px 22px 28px;
      }
      .analyzer-types-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        grid-template-columns: none;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        padding-block-end: 8px;
        -webkit-overflow-scrolling: touch;
      }
      .analyzer-types-grid::-webkit-scrollbar {
        display: none;
      }
      .analyzer-type-card {
        scroll-snap-align: start;
        min-block-size: auto;
      }
      .analyzer-types-dots {
        display: flex;
        justify-content: center;
        gap: 4px;
        margin-block-start: 10px;
      }
      .why-us-section {
        padding-block: 58px 64px;
      }
      .why-us-head {
        margin-block-end: 28px;
      }
      .why-us-head h2 {
        line-height: 1.22;
      }
      .why-us-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
      }
      .why-us-item {
        min-block-size: 118px;
        gap: 12px;
      }
      .why-us-item:last-child {
        grid-column: 1 / -1;
      }
      .why-us-item img {
        inline-size: 58px;
        block-size: 58px;
      }
      .why-us-item h3 {
        max-inline-size: 160px;
        font-size: 14px;
        line-height: 1.35;
      }
      .popular-section {
        padding-block: 46px 58px;
      }
      .popular-head {
        margin-block-end: 26px;
      }
      .popular-head h2 {
        line-height: 1.22;
      }
      .popular-head p {
        font-size: 15px;
      }
      .popular-media {
        min-block-size: 0;
      }
      .popular-media img {
        block-size: 100%;
      }
      .popular-content {
        padding: 0;
      }
      .popular-card h3 {
        font-size: 25px;
      }
      .popular-specs li {
        display: flex;
      }
      .popular-specs b {
        text-align: end;
      }
      .footer-main {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-block: 36px 24px;
      }
      .footer-column h3,
      .footer-contact-card h3 {
        font-size: 18px;
      }
      .footer-column a {
        font-size: 15px;
      }
      .footer-contact-card {
        grid-template-columns: 1fr;
        justify-self: stretch;
        inline-size: 100%;
        padding: 24px;
      }
      .footer-address {
        grid-column: auto;
        grid-row: auto;
      }
      .footer-bottom-inner {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-block: 28px;
      }
      .footer-brand {
        align-items: center;
      }
      .footer-brand .brand-mark {
        inline-size: 40px;
        block-size: 40px;
      }
      .footer-brand .brand-name strong {
        font-size: 26px;
      }
      .footer-legal {
        padding-inline-start: 0;
        border-inline-start: 0;
      }
      .footer-legal-links {
        gap: 12px 18px;
      }
      .selection-banner-section {
        padding-block: 20px 48px;
      }
      .selection-banner-card {
        aspect-ratio: auto;
        min-block-size: 430px;
        border-width: 4px;
        border-start-end-radius: 34px;
        background: #FFFFFF;
      }
      .selection-banner-copy {
        inset-block-start: 44px;
        inset-inline-start: 28px;
        inset-inline-end: 28px;
        max-inline-size: none;
      }
      .selection-banner-copy h2 {
        max-inline-size: 300px;
        padding-block-end: 16px;
        line-height: 1.18;
        font-size: 30px;
      }
      .selection-banner-lead,
      .selection-banner-note {
        max-inline-size: 280px;
        font-size: 13px;
      }
      .selection-banner-lead {
        margin-block-start: 18px;
      }
      .selection-banner-note {
        margin-block-start: 22px;
      }
      .selection-banner-cta {
        min-block-size: 48px;
        margin-block-start: 28px;
        padding: 12px 24px;
      }
      .quiz-modal {
        padding: 12px;
      }
      .quiz-dialog {
        max-block-size: calc(100vh - 24px);
      }
      .quiz-top {
        min-block-size: 54px;
        padding: 12px 14px;
      }
      .quiz-top h2 {
        font-size: 16px;
      }
      .quiz-intro {
        padding: 18px 14px 14px;
        font-size: 14px;
      }
      .quiz-body {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 0 14px 18px;
      }
      .quiz-steps {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(150px, 70%);
        gap: 8px;
        overflow-x: auto;
        padding-block-end: 4px;
        scroll-snap-type: x mandatory;
      }
      .quiz-steps::-webkit-scrollbar {
        display: none;
      }
      .quiz-step {
        min-block-size: 74px;
        padding: 13px 11px;
        scroll-snap-align: start;
      }
      .quiz-step span {
        font-size: 14px;
      }
      .quiz-step b {
        font-size: 12px;
      }
      .quiz-content {
        min-block-size: 0;
      }
      .quiz-panel h3 {
        font-size: 22px;
      }
      .quiz-options-grid,
      .quiz-gas-options,
      .quiz-type-options {
        grid-template-columns: 1fr;
      }
      .quiz-options button {
        min-block-size: 56px;
        font-size: 16px;
      }
      .quiz-actions {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-block-start: 18px;
      }
      .quiz-btn {
        flex: 1 1 0;
        inline-size: auto;
        min-inline-size: 0;
        min-block-size: 52px;
        gap: 8px;
        padding-inline: 10px;
        font-size: 14px;
        white-space: nowrap;
      }
      .quiz-actions .quiz-btn:only-child {
        flex: 0 1 auto;
        min-inline-size: 170px;
        margin-inline-start: auto;
      }
      .quiz-helper {
        margin-block-start: 24px;
      }
      .quiz-request-form {
        max-inline-size: none;
      }
      .quiz-policy {
        align-items: flex-start;
        font-size: 14px;
      }
      .analyzer-type-card h3 {
        font-size: 20px;
        margin-block-end: 18px;
      }
      .analyzer-type-card ul,
      .analyzer-type-link {
        font-size: 16px;
      }
      .analyzer-type-card p {
        font-size: 16px;
      }
      .analyzer-type-card h4 {
        font-size: 20px;
      }
      h2,
      .pricing-section h2,
      .analyzer-types-head h2,
      .seo-head h2,
      .why-us-head h2,
      .popular-head h2 {
        font-size: 30px;
      }
      section { padding-block: 48px; }
    }

    @media (max-width: 980px) {
      .pricing-section,
      .popular-section {
        --carousel-fade-start: var(--carousel-tablet-fade-start);
        --carousel-fade-width: clamp(74px, 11vw, 118px);
        --carousel-inline: 18px;
        --carousel-columns: calc((100vw - 88px) / 2.5);
        --carousel-gap: 20px;
        overflow: hidden;
      }
      .pricing-section {
        padding-inline: 0;
      }
      .pricing-section::after,
      .popular-section::after {
        content: "";
        position: absolute;
        z-index: 3;
        inset-inline-end: 0;
        inset-block-start: var(--carousel-fade-start);
        inset-block-end: 0;
        inline-size: var(--carousel-fade-width);
        opacity: var(--carousel-fade-opacity);
        pointer-events: none;
        transition: opacity 180ms ease;
        background:
          linear-gradient(
            90deg,
            color-mix(in oklch, var(--carousel-fade-bg) 0%, transparent),
            color-mix(in oklch, var(--carousel-fade-bg) 62%, transparent) 42%,
            var(--carousel-fade-bg) 100%
          );
      }
      .popular-inner {
        max-inline-size: none;
        padding-inline: 0;
      }
      .pricing-section .section-head,
      .popular-head {
        padding-inline: var(--carousel-inline);
      }
      .pricing-grid,
      .popular-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--carousel-columns);
        grid-template-columns: none;
        gap: var(--carousel-gap);
        margin-inline: 0;
        padding-inline: var(--carousel-inline);
        padding-block-end: 16px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: var(--carousel-inline);
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .pricing-grid::-webkit-scrollbar,
      .popular-grid::-webkit-scrollbar {
        display: none;
      }
      .pricing-grid .product-card,
      .popular-grid .popular-card {
        min-inline-size: 0;
        scroll-snap-align: start;
      }
    }

    @media (max-width: 760px) {
      .pricing-section,
      .popular-section {
        --carousel-fade-start: var(--carousel-mobile-fade-start);
        --carousel-fade-width: clamp(70px, 18vw, 118px);
        --carousel-inline: 14px;
        --carousel-columns: calc((100vw - 44px) / 1.5);
        --carousel-gap: 16px;
      }
      .pricing-grid .product-card,
      .popular-grid .popular-card {
        min-block-size: 560px;
      }
    }

    .service-page,
    .service-main {
      background: var(--surface);
    }
    .service-hero {
      padding-block: 42px 64px;
      background: var(--surface);
      border-block-end: 1px solid var(--border);
    }
    .service-hero-inner {
      display: grid;
      gap: 28px;
    }
    .service-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, .86fr) minmax(420px, .74fr);
      gap: 42px;
      align-items: center;
    }
    .service-hero-copy {
      min-inline-size: 0;
    }
    .service-kicker {
      margin: 0 0 14px;
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .02em;
    }
    .service-hero h1 {
      margin: 0;
      max-inline-size: 720px;
      color: var(--fg);
      font-size: clamp(32px, 4vw, 52px);
      line-height: 1.05;
      letter-spacing: -0.02em;
      font-weight: 800;
      text-wrap: balance;
    }
    .service-lead {
      margin: 22px 0 0;
      max-inline-size: 700px;
      color: color-mix(in oklch, var(--fg) 80%, white);
      font-size: 19px;
      line-height: 1.55;
      font-weight: 500;
    }
    .service-hero-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 18px;
      max-inline-size: 760px;
      margin: 30px 0 0;
      padding: 0;
      list-style: none;
    }
    .service-hero-list li,
    .service-check-list li {
      position: relative;
      padding-inline-start: 30px;
      color: var(--fg);
      font-size: 16px;
      line-height: 1.45;
      font-weight: 650;
    }
    .service-hero-list li::before,
    .service-check-list li::before {
      content: "✓";
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: .08em;
      display: grid;
      place-items: center;
      inline-size: 21px;
      block-size: 21px;
      border-radius: 999px;
      background: var(--fg);
      color: var(--surface);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }
    .service-hero-media,
    .service-image-card {
      margin: 0;
      overflow: hidden;
      border-radius: 6px;
      background: #F6F6F6;
      box-shadow: 0 18px 34px color-mix(in oklch, var(--fg) 10%, transparent);
    }
    .service-hero-media img {
      inline-size: 100%;
      block-size: 100%;
      aspect-ratio: 1460 / 821;
      object-fit: cover;
    }
    .service-image-card img {
      inline-size: 100%;
      block-size: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }
    .service-block {
      padding-block: 72px;
      background: var(--surface);
    }
    .service-block:nth-of-type(even) {
      background:
        linear-gradient(
          180deg,
          var(--surface) 0,
          #F6F6F6 54px,
          #F6F6F6 calc(100% - 54px),
          var(--surface) 100%
        );
    }
    .service-section-head {
      max-inline-size: 860px;
      margin-block-end: 30px;
    }
    .service-section-head h2,
    .service-panel h2 {
      margin: 0;
      padding-block-end: 18px;
      line-height: 1.1;
      font-weight: 800;
    }
    .service-section-head p {
      margin: 18px 0 0;
      max-inline-size: 780px;
      color: color-mix(in oklch, var(--fg) 76%, white);
      font-size: 16px;
      line-height: 1.65;
    }
    .service-feature-card,
    .service-panel,
    .service-compare-grid article,
    .service-price-note,
    .service-case-grid article,
    .service-faq-list details,
    .delivery-city-card,
    .delivery-method-card,
    .delivery-mini-grid article {
      border-radius: 6px;
      background: #F6F6F6;
      box-shadow: 0 9px 22px color-mix(in oklch, var(--fg) 9%, transparent);
      color: var(--fg);
    }
    .service-block:nth-of-type(even) .service-feature-card,
    .service-block:nth-of-type(even) .service-panel,
    .service-block:nth-of-type(even) .service-compare-grid article,
    .service-block:nth-of-type(even) .service-price-note,
    .service-block:nth-of-type(even) .service-case-grid article,
    .service-block:nth-of-type(even) .service-faq-list details {
      background: var(--surface);
    }
    .service-feature-card {
      display: grid;
      gap: 14px;
      min-block-size: 238px;
      padding: 26px;
    }
    .service-feature-card span,
    .service-steps span,
    .service-case-grid span {
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 800;
    }
    .service-feature-card h3,
    .service-compare-grid h3,
    .service-price-note h3,
    .service-case-grid h3 {
      margin: 0;
      color: var(--fg);
      font-size: 22px;
      line-height: 1.16;
      letter-spacing: -0.01em;
      font-weight: 800;
    }
    .service-feature-card p,
    .service-compare-grid p,
    .service-price-note p,
    .service-case-grid p,
    .service-faq-list p,
    .service-panel p,
    .delivery-hub-note p,
    .delivery-city-card p,
    .delivery-method-card p,
    .delivery-mini-grid p {
      margin: 0;
      color: color-mix(in oklch, var(--fg) 76%, white);
      font-size: 15px;
      line-height: 1.62;
    }
    .service-split,
    .service-process-inner {
      display: grid;
      grid-template-columns: minmax(0, .86fr) minmax(380px, .66fr);
      gap: 42px;
      align-items: center;
    }
    .service-split-reverse {
      grid-template-columns: minmax(380px, .66fr) minmax(0, .86fr);
    }
    .service-tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-block-start: 28px;
    }
    .service-tag-list span {
      display: inline-flex;
      align-items: center;
      min-block-size: 42px;
      border: 1px solid color-mix(in oklch, var(--fg) 16%, white);
      border-radius: 5px;
      padding: 9px 14px;
      background: var(--surface);
      color: var(--fg);
      font-size: 14px;
      font-weight: 650;
    }
    .service-block:nth-of-type(even) .service-tag-list span {
      background: #F6F6F6;
    }
    .service-two-columns {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, .55fr);
      gap: 24px;
      align-items: stretch;
    }
    .service-panel {
      padding: 34px 36px;
    }
    .service-panel h2 {
      font-size: 32px;
    }
    .service-panel:not(.service-panel-accent) > p {
      margin-block-start: 22px;
    }
    .service-panel:not(.service-panel-accent) > .card-cta {
      margin-block-start: 24px;
    }
    .service-check-list {
      display: grid;
      gap: 14px;
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
    }
    .service-panel-accent {
      display: grid;
      align-content: start;
      gap: 22px;
      border: 6px solid var(--fg);
      border-start-end-radius: 48px;
    }
    .service-panel-accent .card-cta {
      justify-self: start;
      margin-block-start: 4px;
    }
    .service-compare-grid article {
      display: grid;
      gap: 18px;
      min-block-size: 230px;
      padding: 28px;
    }
    .service-steps {
      display: grid;
      gap: 16px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .service-steps li {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 8px 16px;
      padding: 18px 0;
      border-block-end: 1px solid var(--border);
    }
    .service-steps li:first-child {
      padding-block-start: 0;
    }
    .service-steps li:last-child {
      border-block-end: 0;
    }
    .service-steps b {
      color: var(--fg);
      font-size: 18px;
      line-height: 1.25;
    }
    .service-steps p {
      grid-column: 2;
      margin: 0;
      color: color-mix(in oklch, var(--fg) 74%, white);
      font-size: 15px;
      line-height: 1.6;
    }
    .service-price-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr);
      gap: 24px;
      align-items: start;
    }
    .service-price-table {
      overflow: hidden;
      border-radius: 6px;
      background: var(--surface);
      box-shadow: 0 9px 22px color-mix(in oklch, var(--fg) 9%, transparent);
    }
    .service-price-table div {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
      gap: 24px;
      align-items: center;
      min-block-size: 70px;
      padding: 18px 24px;
      border-block-end: 1px solid var(--border);
      color: var(--fg);
    }
    .service-price-table div:last-child {
      border-block-end: 0;
    }
    .service-price-table span {
      font-size: 16px;
      line-height: 1.45;
      font-weight: 650;
    }
    .service-price-table b {
      color: var(--accent);
      font-size: 18px;
      line-height: 1.35;
      text-align: end;
    }
    .service-price-note {
      display: grid;
      gap: 16px;
      padding: 28px;
    }
    .service-price-note .card-cta {
      justify-self: start;
      margin-block-start: 6px;
    }
    .service-case-grid article {
      display: grid;
      gap: 14px;
      min-block-size: 260px;
      padding: 28px;
    }
    .service-seo {
      padding-block-start: 72px;
      background: var(--surface);
    }
    .service-faq-list {
      display: grid;
      gap: 12px;
    }
    .service-faq-list details {
      padding: 0;
      overflow: hidden;
    }
    .service-faq-list summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-block-size: 66px;
      padding: 20px 24px;
      color: var(--fg);
      font-size: 17px;
      line-height: 1.35;
      font-weight: 800;
      cursor: pointer;
    }
    .service-faq-list summary::after {
      content: "+";
      color: var(--accent);
      font-size: 28px;
      line-height: 1;
      font-weight: 500;
    }
    .service-faq-list details[open] summary::after {
      content: "−";
    }
    .service-faq-list p {
      padding: 0 24px 22px;
    }
    .service-request {
      padding-block-start: 48px;
      background: var(--surface);
    }
    .service-request .contacts-form-head {
      grid-template-columns: 1fr;
      gap: 10px;
      align-items: start;
      min-inline-size: 0;
    }
    .service-request .contacts-form-head h2,
    .service-request .contacts-form-head p {
      max-inline-size: 100%;
      min-inline-size: 0;
    }
    .service-request .contacts-form-head p {
      max-inline-size: 760px;
      white-space: normal;
    }
    .delivery-hero .service-hero-media img {
      aspect-ratio: 1672 / 941;
    }
    .delivery-intro-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr);
      gap: 28px;
      align-items: start;
    }
    .delivery-text {
      margin: 0;
      max-inline-size: 820px;
      color: color-mix(in oklch, var(--fg) 76%, white);
      font-size: 16px;
      line-height: 1.7;
    }
    .delivery-hub-note {
      display: grid;
      gap: 12px;
      padding: 28px;
      border: 6px solid var(--fg);
      border-start-end-radius: 48px;
      border-radius: 6px 48px 6px 6px;
      background: #F6F6F6;
      box-shadow: 0 9px 22px color-mix(in oklch, var(--fg) 9%, transparent);
    }
    .delivery-hub-note b {
      color: var(--fg);
      font-size: 22px;
      line-height: 1.16;
      font-weight: 800;
    }
    .delivery-city-grid,
    .delivery-method-grid,
    .delivery-mini-grid {
      display: grid;
      gap: 18px;
    }
    .delivery-city-grid {
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
    .delivery-method-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .delivery-mini-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-block-start: 28px;
    }
    .delivery-city-card,
    .delivery-method-card,
    .delivery-mini-grid article {
      display: grid;
      align-content: start;
      gap: 14px;
    }
    a.delivery-city-card {
      text-decoration: none;
      transition: color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    }
    a.delivery-city-card:hover,
    a.delivery-city-card:focus-visible {
      color: var(--fg);
      transform: translateY(-2px);
      box-shadow: 0 14px 28px color-mix(in oklch, var(--fg) 12%, transparent);
      outline: none;
    }
    .service-block:nth-of-type(even) .delivery-city-card,
    .service-block:nth-of-type(even) .delivery-method-card,
    .service-block:nth-of-type(even) .delivery-mini-grid article,
    .service-block:nth-of-type(even) .delivery-hub-note {
      background: var(--surface);
    }
    .delivery-city-card {
      min-block-size: 218px;
      padding: 24px;
    }
    .delivery-method-card,
    .delivery-mini-grid article {
      min-block-size: 240px;
      padding: 28px;
    }
    .delivery-city-card img,
    .delivery-method-card img,
    .delivery-mini-grid img {
      inline-size: 46px;
      block-size: 46px;
    }
    .delivery-city-card img {
      inline-size: 64px;
      block-size: 64px;
    }
    .delivery-city-card h3,
    .delivery-method-card h3,
    .delivery-mini-grid h3 {
      margin: 0;
      color: var(--fg);
      font-size: 21px;
      line-height: 1.16;
      letter-spacing: -0.01em;
      font-weight: 800;
    }
    .delivery-city-card::after {
      content: "Уточнить доставку";
      align-self: end;
      margin-block-start: 6px;
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .02em;
    }
    .delivery-map-hub .service-image-card img {
      aspect-ratio: 1672 / 941;
    }
    .delivery-request {
      background: var(--surface);
    }
    .nav-menu-link[aria-current="page"] {
      color: var(--accent);
    }

    @media (max-width: 1080px) {
      .cart-layout {
        grid-template-columns: 1fr;
      }
      .cart-order-card {
        position: static;
      }
      .cart-item {
        grid-template-columns: 96px minmax(0, 1fr) 136px;
      }
      .cart-item__total {
        grid-column: 2;
      }
      .cart-remove {
        grid-column: 3;
        justify-self: end;
      }
    }

    @media (max-width: 700px) {
      .cart-hero {
        padding-block: 20px 34px;
      }
      .cart-hero h1 {
        margin-block-start: 18px;
        font-size: 34px;
      }
      .cart-hero p {
        font-size: 16px;
      }
      .cart-section {
        padding-block: 34px 54px;
      }
      .cart-item {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
      }
      .cart-quantity,
      .cart-item__total,
      .cart-remove {
        grid-column: 1 / -1;
      }
      .cart-remove {
        justify-self: start;
      }
      .cart-order-card,
      .cart-empty {
        padding: 20px;
      }
      .popular-actions {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 980px) {
      .service-hero-grid,
      .service-split,
      .service-split-reverse,
      .service-process-inner,
      .service-price-layout,
      .service-two-columns {
        grid-template-columns: 1fr;
      }
      .service-hero-media {
        order: -1;
      }
      .service-card-grid,
      .service-compare-grid,
      .service-case-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .service-price-note {
        max-inline-size: none;
      }
      .delivery-intro-grid {
        grid-template-columns: 1fr;
      }
      .delivery-city-grid,
      .delivery-method-grid,
      .delivery-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .service-hero {
        padding-block: 30px 44px;
      }
      .service-hero-grid {
        gap: 24px;
      }
      .service-hero h1 {
        font-size: 30px;
      }
      .service-lead {
        font-size: 16px;
      }
      .service-hero-list,
      .service-card-grid,
      .service-compare-grid,
      .service-case-grid,
      .delivery-city-grid,
      .delivery-method-grid,
      .delivery-mini-grid {
        grid-template-columns: 1fr;
      }
      .service-block {
        padding-block: 48px;
      }
      .service-section-head h2,
      .service-panel h2 {
        font-size: 30px;
      }
      .service-feature-card,
      .service-panel,
      .service-compare-grid article,
      .service-price-note,
      .service-case-grid article,
      .delivery-city-card,
      .delivery-method-card,
      .delivery-mini-grid article,
      .delivery-hub-note {
        padding: 24px;
      }
      .service-panel-accent {
        border-width: 4px;
        border-start-end-radius: 34px;
      }
      .service-price-table div {
        grid-template-columns: 1fr;
        gap: 8px;
        min-block-size: 0;
        padding: 18px;
      }
      .service-price-table b {
        text-align: start;
      }
      .service-steps li {
        grid-template-columns: 40px 1fr;
      }
      .service-steps p {
        grid-column: 1 / -1;
      }
      .service-faq-list summary {
        padding-inline: 18px;
        font-size: 16px;
      }
      .service-faq-list p {
        padding-inline: 18px;
      }
    }