:root {
        --brand-blue: #1a70b3;
        --brand-gray: #434344;
        --hero-bg: #0b0b0d;
        --color-gray-50: oklch(0.985 0.002 247.839);
        --color-blue-100: oklch(0.932 0.032 255.585);
        --color-blue-300: oklch(0.809 0.105 251.813);
        --color-blue-400: oklch(0.707 0.165 254.624);
        --color-blue-600: oklch(0.546 0.245 262.881);
        --color-gray-50: oklch(0.985 0.002 247.839);
        --color-gray-100: oklch(0.967 0.003 264.542);
        --color-gray-200: oklch(0.928 0.006 264.531);
        --color-gray-300: oklch(0.872 0.01 258.338);
        --color-gray-400: oklch(0.707 0.022 261.325);
        --color-gray-500: oklch(0.551 0.027 264.364);
        --color-gray-600: oklch(0.446 0.03 256.802);
        --color-gray-700: oklch(0.373 0.034 259.733);
        --color-gray-800: oklch(0.278 0.033 256.848);
        --color-gray-900: oklch(0.21 0.034 264.665);
      }
      .bg-gray-50 {
        background-color: var(--color-gray-50);
      }
      .btn-brand {
        background: var(--brand-blue);
        border-color: var(--brand-blue);
        color: #fff;
      }
      .btn-brand:hover {
        background: #155d96;
        border-color: #155d96;
        color: #fff;
      }
      .btn-gray {
        background: var(--brand-gray);
        border-color: var(--brand-gray);
        color: #fff;
      }
      .btn-gray:hover {
        background: #2f2f30;
        border-color: #2f2f30;
        color: #fff;
      }

      /* HERO (white) */
      .hero {
        position: relative;
        background: #fff;
        color: #111;
        overflow: hidden;
      }

      /* Мобильный режим: картинка как фон, чтобы текст был поверх */
      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--hero-img);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        opacity: 0.22; /* общая “дымка” */
        pointer-events: none;
      }

      /* Доп. затемнение/подложка для читаемости на маленьких */
      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.92) 0%,
          rgba(255, 255, 255, 0.75) 55%,
          rgba(255, 255, 255, 0.65) 100%
        );
        pointer-events: none;
      }

      /* Подложка под текст (требование) */
      .hero-copy {
        position: relative;
        z-index: 2;
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(20, 20, 26, 0.1);
        border-radius: 18px;
        padding: 18px;
      }

      /* На больших экранах: фон убираем, показываем картинку справа как <img> */
      .hero-media {
        display: none;
      }
      @media (min-width: 992px) {
        .hero::before,
        .hero::after {
          display: none;
        }
        .hero-copy {
          background: transparent;
          border: 0;
          padding: 0;
          backdrop-filter: none;
        }
        .hero-media {
          display: block;
        }
        .hero {
          min-height: 520px;
        }
      }

      /* картинка в правой колонке */
      .hero-img {
        max-width: 100%;
        height: auto;
        display: block;
        margin-left: auto; /* прижать вправо */
      }
      .nav-glass {
        background: rgba(0, 0, 0, 0.8) !important;
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      .nav-link {
        color: rgba(255, 255, 255, 0.75) !important;
      }
      .nav-link:hover {
        color: #fff !important;
      }
      .stat-card {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 14px;
      }

      /*korzina*/
      .nav-cart-active{border-color:rgba(255,255,255,.35)!important}
.nav-cart-active i{color:#fff}

      /* CATALOG block */

      .section-title {
        letter-spacing: -0.02em;
      }
      .catalog-card {
        border: 1px solid rgba(20, 20, 26, 0.1);
        border-radius: 18px;
        transition:
          transform 0.15s ease,
          box-shadow 0.15s ease;
        height: 100%;
      }
      .catalog-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
      }
      .pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.25rem 0.6rem;
        border-radius: 999px;
        background: rgba(26, 112, 179, 0.1);
        color: var(--brand-blue);
        font-weight: 600;
        font-size: 0.875rem;
      }
      .catalog-img {
        width: 100%;
        height: 120px;
        object-fit: contain;
        display: block;
        margin-bottom: 12px;
      }
      .catalog-desc {
        font-size: 0.95rem;
        line-height: 1.35;
      }
      .catalog-footnote {
        font-size: 0.78rem;
        line-height: 1.35;
      }
      .catalog-card {
        position: relative;
      }
      .pack-flag-corner {
        position: absolute;
        top: 14px;
        right: 14px;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.25rem 0.6rem;
        border-radius: 999px;
        background: rgba(67, 67, 68, 0.1);
        color: #434344;
        font-weight: 700;
        font-size: 0.875rem;
      }
      .pack-flag-corner b {
        font-weight: 900;
      }
      /*block3*/
      .benefits {
        background: #0b1220;
      }
      .benefits .benefits-kicker {
        color: rgba(255, 255, 255, 0.7);
      }
      .benefit-item {
        color: rgba(255, 255, 255, 0.75);
      }
      .benefit-title {
        color: #fff;
      }
      .benefit-icon {
        width: 52px;
        height: 52px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(26, 112, 179, 0.22);
        border: 1px solid rgba(26, 112, 179, 0.35);
        color: #fff;
      }
      .benefit-icon i {
        font-size: 22px;
        line-height: 1;
      }
      .benefits-note {
        color: rgba(255, 255, 255, 0.55);
        font-size: 0.85rem;
        line-height: 1.35;
      }
      /*block 4*/
      .auth-card {
        border: 1px solid rgba(20, 20, 26, 0.1);
        border-radius: 18px;
      }
      .auth-soft {
        background: #f5f6f8;
      }
      .auth-thumb {
        border: 1px solid rgba(20, 20, 26, 0.08);
        border-radius: 14px;
        background: #f2f2f4;
        min-height: 120px;
      }
      .auth-mini {
        border: 1px solid rgba(20, 20, 26, 0.1);
        border-radius: 16px;
        background: #fff;
        padding: 14px;
      }
      .auth-mini-title {
        font-weight: 700;
      }
      .auth-mini-text {
        color: #6c757d;
        font-size: 0.9rem;
        margin: 6px 0 0;
      }
      /* AUTH: таблица маркировок + маркеры */
      .auth-list {
        margin: 0;
        padding-left: 1.05rem;
      }
      .auth-list li {
        margin: 0.35rem 0;
      }
      .auth-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
      }
      .auth-table th,
      .auth-table td {
        padding: 0.55rem 0.65rem;
        border-top: 1px solid rgba(20, 20, 26, 0.1);
      }
      .auth-table thead th {
        border-top: 0;
        font-size: 0.85rem;
        color: #6c757d;
        font-weight: 700;
      }
      .auth-table td {
        font-size: 0.92rem;
      }
      .auth-table-wrap {
        border: 1px solid rgba(20, 20, 26, 0.1);
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
      }
      .auth-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        background: rgba(26, 112, 179, 0.1);
        color: #1a70b3;
        font-weight: 700;
        font-size: 0.8rem;
      }
      .auth-badge-gray {
        background: rgba(67, 67, 68, 0.1);
        color: #434344;
      }
      /*product cart*/
      .product-hero {
        background: #fff;
      }
      .product-card {
        border: 1px solid rgba(20, 20, 26, 0.1);
        border-radius: 18px;
      }
      .product-soft {
        background: #f5f6f8;
        border: 1px solid rgba(20, 20, 26, 0.1);
        border-radius: 14px;
      }
      .product-img {
        width: 100%;
        height: auto;
        display: block;
      }
      .pack-img {
        width: 100%;
        height: auto;
        display: block;
      }
      .spec-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
      }
      .spec-table th,
      .spec-table td {
        padding: 0.55rem 0.65rem;
        border-top: 1px solid rgba(20, 20, 26, 0.1);
        vertical-align: top;
      }
      .spec-table thead th {
        border-top: 0;
        font-size: 0.85rem;
        color: #6c757d;
        font-weight: 700;
      }
      .spec-table td {
        font-size: 0.95rem;
      }
      .spec-wrap {
        border: 1px solid rgba(20, 20, 26, 0.1);
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
      }
      .kbd-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        background: rgba(26, 112, 179, 0.1);
        color: #1a70b3;
        font-weight: 700;
        font-size: 0.8rem;
      }
      .kbd-badge-gray {
        background: rgba(67, 67, 68, 0.1);
        color: #434344;
      }
      .other-sizes {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .other-size {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid rgba(20, 20, 26, 0.1);
        border-radius: 14px;
        text-decoration: none;
        color: inherit;
        background: #fff;
      }
      .other-size:hover {
        background: #f8f9fb;
      }
      .other-size img {
        width: 42px;
        height: 42px;
        object-fit: contain;
        display: block;
      }
      .disclaimer {
        color: #6c757d;
        font-size: 0.85rem;
        line-height: 1.35;
      }
    /*block 6 faq*/
    .faq-card{border:1px solid rgba(20,20,26,.10);border-radius:18px;background:#fff}
.faq-accordion .accordion-item{border:0}
.faq-accordion .accordion-button{border-radius:14px!important}
.faq-accordion .accordion-button:not(.collapsed){background:rgba(26,112,179,.08);color:#0b0b0d;box-shadow:none}
.faq-accordion .accordion-body{color:#6c757d}
.about-card{border:1px solid rgba(20,20,26,.10);border-radius:18px;background:#fff}
#about {
  background: #f5f6f8;
}

/*center cart*/

      .center-card {
        border: 1px solid rgba(20, 20, 26, 0.1);
        border-radius: 16px;
        background: #fff;
        padding: 14px;
        height: 100%;
      }
      .center-city {
        font-weight: 800;
      }
      .center-meta {
        color: #6c757d;
        font-size: 0.92rem;
        line-height: 1.35;
      }
      .center-meta a {
        color: inherit;
        text-decoration: none;
      }
      .center-meta a:hover {
        text-decoration: underline;
      }
    
/*pack card*/
.pack-card{border:1px solid rgba(20,20,26,.10);border-radius:18px;background:#fff;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.pack-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.08)}
.pack-card img{width:100%;height:150px;object-fit:contain;display:block;background:#f5f6f8}
.pack-card .pack-body{padding:12px 14px}
.pack-card .pack-title{font-weight:800}
.pack-card .pack-meta{color:#6c757d;font-size:.9rem}


/*footer*/
.site-footer{background:#0b0b0d;color:rgba(255,255,255,.85)}
.site-footer a{color:rgba(255,255,255,.75);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-title{color:#fff;font-weight:700}
.footer-muted{color:rgba(255,255,255,.65)}
.footer-divider{border-top:1px solid rgba(255,255,255,.10)}
.footer-badge{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .6rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85);font-size:.85rem}
.footer-dot{width:.55rem;height:.55rem;border-radius:.2rem;background:#1a70b3;box-shadow:0 0 0 2px rgba(26,112,179,.18)}

/*to top button*/
.to-top{position:fixed;left:18px;bottom:18px;z-index:999;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:999px;border:1px solid rgba(20,20,26,.10);background:#1a70b3;color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.to-top:hover{background:#155d96}
.to-top:active{transform:translateY(10px)}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.to-top i{font-size:18px;line-height:1}
@media (max-width:575.98px){.to-top{left:12px;bottom:12px;width:44px;height:44px}}