:root {
  --navy: #0e1f36;
  --navy-2: #142a47;
  --line-dark: #22395a;
  --line-dark-2: #33496b;
  --bg: #eef2f6;
  --surface: #ffffff;
  --text: #0e1f36;
  --text-light: #eef3f8;
  --muted: #56657a;
  --muted-dark: #9fb0c4;
  --line: #d6dde6;
  --line-2: #b5c1cf;
  --accent: oklch(0.7 0.17 50);
  --accent-hover: oklch(0.76 0.15 55);
  --accent-2: oklch(0.6 0.17 45);
  --accent-2-hover: oklch(0.55 0.17 45);
  --mono: 'IBM Plex Mono', monospace;
  --wrap: 1320px;
}

html { scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'IBM Plex Sans', Helvetica, sans-serif; -webkit-font-smoothing: antialiased }
* { box-sizing: border-box }
a { color: inherit; text-decoration: none }
a:hover { color: var(--accent) }
button, input, textarea { font-family: inherit }
img { display: block }
[x-cloak] { display: none !important }

.page { min-height: 100vh; display: flex; flex-direction: column }
.page main { flex: 1 }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 32px; padding-right: 32px }
.mono { font-family: var(--mono) }
.icon { width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; display: inline-block; flex-shrink: 0 }

/* Шапка */
.header { position: sticky; top: 0; z-index: 20; color: var(--text-light); background: rgba(14, 31, 54, 0.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-dark) }
.header__in { padding-top: 16px; padding-bottom: 16px; display: flex; align-items: center; gap: 32px }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0 }
.brand__logo { width: 40px; height: 40px; object-fit: contain }
.brand__text { display: flex; flex-direction: column; line-height: 1.1 }
.brand__name { font-weight: 700; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-light) }
.brand__tagline { font-family: var(--mono); font-size: 11px; color: var(--muted-dark); letter-spacing: 0.04em }
.nav { display: flex; gap: 28px; font-size: 15px; flex: 1; justify-content: center; flex-wrap: wrap }
.header__right { display: flex; align-items: center; gap: 20px; flex-shrink: 0 }
.header__phone { font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums }
.cart-btn { position: relative; width: 44px; height: 44px; border: 1px solid var(--line-dark-2); color: var(--text-light); display: grid; place-items: center }
.cart-btn:hover { border-color: var(--accent); color: var(--accent) }
.cart-badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent-2); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; font-family: sans-serif }
.cart-badge:empty { display: none }
@media (max-width: 1100px) { .header__phone { display: none } }
@media (max-width: 720px) {
  .wrap { padding-left: 16px; padding-right: 16px }
  .header__in { gap: 16px; flex-wrap: wrap }
  .nav { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 20px }
  .header__right { margin-left: auto }
  .brand__tagline { display: none }
}

/* Кнопки */
.btn { height: 52px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-weight: 600; font-size: 16px; border: 1px solid transparent; cursor: pointer; background: transparent; color: inherit }
.btn--light { background: var(--text-light); color: var(--navy) }
.btn--light:hover { background: #fff; color: var(--navy) }
.btn--ghost-dark { padding: 0 26px; border-color: var(--line-dark-2); font-weight: 500 }
.btn--ghost-dark:hover { border-color: var(--accent) }
.btn--ghost { height: 46px; padding: 0 24px; border-color: var(--line-2); font-weight: 400; font-size: 15px }
.btn--ghost:hover { border-color: var(--accent-2); color: var(--text) }
.btn--accent { background: var(--accent-2); color: #fff }
.btn--accent:hover { background: var(--accent-2-hover); color: #fff }
.link-btn { background: transparent; border: none; border-bottom: 1px solid var(--accent-2); color: var(--text); font-size: 15px; padding: 0 0 4px; cursor: pointer }

/* Секции */
.section { padding-top: 112px; scroll-margin-top: 80px }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 32px }
.section__title { display: flex; flex-direction: column; gap: 12px }
.eyebrow { font-family: var(--mono); font-size: 13px; color: var(--accent-2) }
.h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); font-weight: 600; letter-spacing: -0.02em }
@media (max-width: 720px) { .section { padding-top: 72px } }

/* Баннер */
.hero-wrap { padding-top: 32px }
.hero { position: relative; min-height: 540px; border: 1px solid var(--line-dark); background: var(--navy); color: var(--text-light); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)) }
.hero__body { position: relative; padding: 64px 56px 120px; display: grid; align-content: center }
.hero__slide { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 24px }
.hero__tag { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent) }
.hero__title { margin: 0; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance }
.hero__text { margin: 0; font-size: 18px; line-height: 1.55; color: var(--muted-dark); max-width: 470px; text-wrap: pretty }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px }
.hero__media { position: relative; min-height: 320px; border-left: 1px solid var(--line-dark) }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.hero__controls { position: absolute; left: 56px; bottom: 40px; display: flex; align-items: center; gap: 20px }
.hero__num { font-family: var(--mono); font-size: 13px; color: var(--muted-dark); font-variant-numeric: tabular-nums }
.hero__dots { display: flex; gap: 6px }
.hero__dot { height: 2px; width: 14px; border: none; padding: 0; cursor: pointer; background: var(--text-light); opacity: 0.3; transition: width .3s }
.hero__dot.is-on { width: 36px; opacity: 1 }
.hero__arrows { display: flex; gap: 6px }
.hero__arrow { width: 40px; height: 40px; border: 1px solid var(--line-dark-2); background: transparent; color: var(--text-light); cursor: pointer }
.hero__arrow:hover { border-color: var(--text-light) }
@media (max-width: 720px) {
  .hero-wrap { padding-top: 16px }
  .hero { min-height: 0 }
  .hero__body { padding: 40px 24px 96px }
  .hero__controls { left: 24px; bottom: 32px }
  .hero__media { border-left: none; border-top: 1px solid var(--line-dark); min-height: 240px }
}

/* Карточки */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px }
.grid--products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) }
.card { background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; transition: border-color .2s; color: var(--text) }
.card:hover { border-color: var(--accent-2) }
.grid--products .card:hover { color: var(--text) }
.card__media { position: relative; aspect-ratio: 4 / 3; background: var(--bg) }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.card__foot { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line) }
.card__name { font-weight: 500; font-size: 16px; line-height: 1.3 }
.card__arrow { color: var(--accent-2); flex-shrink: 0 }
.card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px }
.card__brand { font-family: var(--mono); font-size: 12px; color: var(--accent-2); letter-spacing: 0.06em }
.card__title { font-weight: 600; font-size: 16px; line-height: 1.3 }
.card__meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--muted) }
.card__price { color: var(--text); font-weight: 600 }

/* Каталог */
.crumbs { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin-bottom: 28px }
.crumbs span:last-child { color: var(--text) }
.catalog-page { padding-top: 40px }
.catalog { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start }
.catalog__side { flex: 1 1 240px; max-width: 300px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--surface) }
.catalog__side-title { padding: 16px 18px; font-weight: 600; border-bottom: 1px solid var(--line) }
.catalog__side a { padding: 11px 18px; padding-left: calc(18px + var(--depth, 0) * 16px); font-size: 14px }
.catalog__side a:hover { background: var(--bg); color: var(--text) }
.catalog__side a.is-on { background: var(--accent-2); color: #fff }
.catalog__main { flex: 999 1 560px; min-width: 0 }
.catalog__h1 { margin: 0 0 8px; font-size: clamp(28px, 3vw, 42px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1 }
.catalog__count { margin: 0 0 28px; color: var(--muted) }
.empty { padding: 40px; border: 1px dashed var(--line-2); color: var(--muted); text-align: center }
@media (max-width: 720px) {
  .catalog-page { padding-top: 24px }
  .catalog__side { max-width: none; flex-basis: 100% }
}

/* Товар (модальное окно и страница) */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(10, 14, 20, 0.55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto }
.product { position: relative; width: 100%; max-width: 1100px; background: var(--surface); color: var(--text) }
.modal .product { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3) }
.product__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 28px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted) }
.product__close { width: 40px; height: 40px; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; font-size: 20px }
.product__top { display: flex; flex-wrap: wrap; gap: 32px; padding: 28px }
.product__img { flex: 1 1 260px; max-width: 360px; aspect-ratio: 1; position: relative; overflow: hidden; background: var(--bg) }
.product__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.product__info { flex: 999 1 380px; display: flex; flex-direction: column; gap: 14px; justify-content: center }
.product__brand { font-family: var(--mono); font-size: 13px; color: var(--accent-2); letter-spacing: 0.06em }
.product__name { margin: 0; font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.15; text-wrap: balance }
.product__desc { margin: 0; color: var(--muted); line-height: 1.6; max-width: 560px }
.product__note { font-size: 14px; color: var(--muted) }
.product__table { overflow-x: auto; padding: 0 28px 24px }
.product__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 28px; border-top: 1px solid var(--line); background: var(--bg) }
.product__toast { font-size: 14px; color: var(--muted) }
.product-page { padding-top: 40px }
.product-page .product { max-width: none; border: 1px solid var(--line) }

.models { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px }
.models .shrink { width: 1% }
.models th { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); text-align: left; white-space: nowrap }
.models td { padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap }
.models tr:hover td { background: var(--bg) }
.models .num { text-align: right; font-variant-numeric: tabular-nums }
.models td.price { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums }

.buy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px }
.buy__row { display: inline-flex; align-items: center; gap: 8px }
.stepper { display: flex; align-items: center; border: 1px solid var(--line-2); height: 40px; background: var(--surface) }
.stepper button { width: 34px; height: 100%; border: none; background: transparent; color: var(--text); cursor: pointer; font-size: 16px }
.stepper input { width: 44px; height: 100%; border: none; text-align: center; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; background: transparent; color: var(--text); -moz-appearance: textfield }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
.buy__add { width: 40px; height: 40px; border: none; background: var(--accent-2); color: #fff; cursor: pointer; display: grid; place-items: center }
.buy__add:hover { background: var(--accent-2-hover) }
.buy__status { font-size: 12px; color: var(--accent-2) }
.buy__status:empty { display: none }

/* Корзина */
.cart { padding-top: 40px; padding-bottom: 40px }
.cart__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start }
.cart__list { background: var(--surface); border: 1px solid var(--line); overflow-x: auto }
.cart__list .models { min-width: 640px }
.cart__name { white-space: normal !important; min-width: 220px }
.cart__name small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px }
.cart__remove { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 20px; width: 32px; height: 32px }
.cart__remove:hover { color: var(--accent-2) }
.cart__total { display: flex; justify-content: space-between; padding: 18px 14px; font-size: 18px; font-weight: 600 }
.panel { background: var(--surface); border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 16px }
.panel h2 { margin: 0; font-size: 22px; font-weight: 600 }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted) }
.field input, .field textarea { border: 1px solid var(--line-2); padding: 12px 14px; font-size: 16px; color: var(--text); background: var(--surface); border-radius: 0 }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-2) }
.field .err { color: #c0392b; font-size: 13px }
@media (max-width: 960px) { .cart__layout { grid-template-columns: 1fr } }

/* Контакты */
.contacts { padding-bottom: 112px }
.contacts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line) }
.contacts__info { background: var(--bg); padding: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px }
.contacts__col { display: flex; flex-direction: column; gap: 10px }
.contacts__label { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em }
.contacts__phone { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums }
.contacts__text { font-size: 17px; line-height: 1.5 }
.contacts__email { font-size: 17px }
.contacts__socials { display: flex; gap: 10px; flex-wrap: wrap; grid-column: 1 / -1 }
.social { height: 48px; padding: 0 18px 0 6px; border: 1px solid var(--line-2); display: flex; align-items: center; gap: 10px; font-size: 14px }
.social__dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: #fff }
.social__dot .icon { width: 17px; height: 17px }
.social--instagram .social__dot { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%) }
.social--facebook .social__dot { background: #1877F2 }
.social--whatsapp .social__dot { background: #25D366 }
.social--telegram .social__dot { background: #26A5E4 }
.contacts__map { position: relative; min-height: 420px }
.contacts__map-link { font-size: 15px; color: var(--accent-2); margin-top: 4px }
.contacts__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
@media (max-width: 720px) { .contacts__info { padding: 24px } .contacts { padding-bottom: 72px } }

/* Подвал */
.footer { background: var(--navy-2); border-top: 1px solid var(--line-dark); color: var(--muted-dark) }
.footer a { color: var(--text-light) }
.footer a:hover { color: var(--accent) }
.footer__in { padding-top: 64px; padding-bottom: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px 96px }
.footer__about { display: flex; flex-direction: column; gap: 18px; max-width: 480px }
.footer__company { font-size: 28px; font-weight: 600; color: var(--text-light); letter-spacing: -0.01em }
.footer__about p { margin: 0; font-size: 16px; line-height: 1.6; text-wrap: pretty }
.footer__emails { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 16px }
.footer__contacts { display: flex; flex-direction: column; gap: 24px }
.footer__h { font-size: 20px; font-weight: 600; color: var(--text-light) }
.footer__socials { display: flex; gap: 12px }
.footer__socials a { display: flex; transition: transform .2s }
.footer__socials a:hover { transform: translateY(-2px) }
.footer__socials .social__dot { width: 44px; height: 44px }
.footer__socials .icon { width: 22px; height: 22px }
.footer__office { display: flex; flex-direction: column; gap: 10px }
.footer__phones { display: flex; flex-wrap: wrap; gap: 6px 20px; font-variant-numeric: tabular-nums }
.footer__bottom { border-top: 1px solid var(--line-dark) }
.footer__bottom-in { padding-top: 24px; padding-bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap }
.footer__copy { display: flex; align-items: center; gap: 24px; font-size: 14px }
.to-top { width: 48px; height: 48px; background: var(--accent); color: var(--navy) !important; display: grid; place-items: center; font-size: 18px }
.to-top:hover { background: var(--accent-hover) }