/* Techno Devices — стиль по референсу Refero «Superpower»:
   рационированный цвет (чёрный / белый / цинк + один акцент),
   геометричный гротеск с плотным трекингом, моно для тех. подписей,
   плоские поверхности, hairline-границы, одна мягкая тень, пилюли. */

:root {
  --carbon: #18181b;
  --black: #000;
  --zinc: #71717a;
  --ash: #a1a1aa;
  --mist: #e4e4e7;
  --paper: #fafafa;
  --white: #fff;
  --accent: #0071e3;          /* роль Sunrise Coral — фирменный синий Techno Devices */
  --accent-soft: rgba(0, 113, 227, .1);
  --r-card: 15px;
  --r-sm: 5px;
  --r-icon: 8px;
  --pill: 9999px;
  --shadow: 0 2px 2px rgba(0, 0, 0, .05);
  --wrap: 1200px;
  --gap-section: 75px;
  --gutter: 28px;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--white); color: var(--carbon);
  font-size: 17px; line-height: 1.5; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--gap-section) 0; }
.section--paper { background: var(--paper); }
.hair { height: 1px; background: var(--mist); }

h1, h2, h3 { font-weight: 500; letter-spacing: -.022em; line-height: 1.05; }
h1 { font-size: clamp(38px, 5.6vw, 66px); letter-spacing: -.025em; line-height: 1; }
.h2 { font-size: clamp(30px, 4vw, 48px); }
.h3 { font-size: 22px; letter-spacing: -.015em; }
.lead { font-size: 19px; color: var(--zinc); line-height: 1.5; }
.meta { font-family: var(--mono); font-size: 11px; letter-spacing: -.006em; text-transform: uppercase; color: var(--zinc); }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; flex-wrap: wrap; }
.head .meta { margin-bottom: 10px; }
.link { font-size: 15px; color: var(--carbon); border-bottom: 1px solid var(--mist); padding-bottom: 2px; }
.link:hover { border-color: var(--carbon); }

/* ── pills / buttons ─────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 26px; border-radius: var(--pill); border: 1px solid transparent; font-size: 15px; font-weight: 500; cursor: pointer; transition: background .16s, color .16s, border-color .16s; }
.btn-dark { background: var(--carbon); color: var(--white); }
.btn-dark:hover { background: #000; }
.btn-light { background: var(--white); color: var(--carbon); border-color: var(--mist); }
.btn-light:hover { border-color: var(--carbon); }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); }
.btn-outline-light:hover { border-color: #fff; }
.btn-sm { height: 38px; padding: 0 18px; font-size: 14px; }

/* ── floating pill nav ───────────────────────────────── */
.nav-shell { position: sticky; top: 14px; z-index: 100; padding: 0 var(--gutter); }
.nav { max-width: var(--wrap); margin: 0 auto; background: var(--carbon); color: var(--white); border-radius: var(--r-card); padding: 11px 12px 11px 20px; display: flex; align-items: center; gap: 22px; box-shadow: var(--shadow); }
.nav-logo { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.nav-logo img { width: 28px; height: 28px; border-radius: 6px; }
.nav-links { display: flex; gap: 20px; font-size: 14px; color: rgba(255,255,255,.72); }
.nav-links a:hover { color: #fff; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-phone { font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.8); }
.nav-icon { position: relative; width: 38px; height: 38px; border-radius: var(--pill); border: 1px solid rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.nav-icon:hover { border-color: #fff; }
.nav-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--pill); background: var(--accent); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.nav-burger { display: none; width: 38px; height: 38px; border-radius: var(--pill); border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff; cursor: pointer; }
.nav-drop { display: none; max-width: var(--wrap); margin: 8px auto 0; background: var(--carbon); color: #fff; border-radius: var(--r-card); padding: 8px 20px 16px; }
.nav-drop.open { display: block; }
.nav-drop a { display: block; padding: 12px 0; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.12); }

/* ── hero (светлая тема) ─────────────────────────────── */
.hero { margin-top: -62px; padding: 132px 0 64px; background: var(--white); color: var(--carbon); border-bottom: 1px solid var(--mist); }
.hero .lead { color: var(--zinc); max-width: 54ch; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero h1 { margin: 18px 0 20px; }
.hero-slider { position: relative; border: 1px solid var(--mist); border-radius: var(--r-card); background: var(--paper); overflow: hidden; }
.hero-slide { display: none; padding: 22px 22px 18px; }
.hero-slide.on { display: block; animation: fade .4s ease; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.hero-slide-img { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: var(--white); border-radius: var(--r-sm); }
.hero-slide-img img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.hero-slide-cap { margin-top: 16px; }
.hero-slide-cap b { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.015em; margin: 6px 0 4px; }
.hero-slide-cap p { font-size: 14px; color: var(--zinc); line-height: 1.4; }
.hero-slider-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px 18px; }
.hero-dots { display: flex; gap: 6px; }
.hero-dot { width: 7px; height: 7px; border-radius: var(--pill); border: 0; padding: 0; background: var(--mist); cursor: pointer; }
.hero-dot.on { background: var(--carbon); width: 18px; }
.hero-arrows { display: flex; gap: 6px; }
.hero-arrow { width: 30px; height: 30px; border-radius: var(--pill); border: 1px solid var(--mist); background: var(--white); cursor: pointer; font-size: 14px; line-height: 1; color: var(--zinc); }
.hero-arrow:hover { border-color: var(--carbon); color: var(--carbon); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.searchbar { display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--mist); border-radius: var(--pill); padding: 5px 5px 5px 22px; height: 60px; margin-top: 28px; max-width: 620px; transition: border-color .16s; }
.searchbar:focus-within { border-color: var(--carbon); }
.searchbar input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--carbon); min-width: 0; }
.searchbar .btn { height: 48px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero-chips a { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: -.006em; color: var(--zinc); border: 1px solid var(--mist); border-radius: var(--pill); padding: 7px 14px; }
.hero-chips a:hover { color: var(--carbon); border-color: var(--carbon); }
.hero-stats { display: flex; gap: 46px; flex-wrap: wrap; margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--mist); }
.hero-stat b { display: block; font-size: 30px; font-weight: 500; letter-spacing: -.02em; }
.hero-stat span { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--ash); }

/* ── categories ──────────────────────────────────────── */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 11px; }
.cat { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 19px; border: 1px solid var(--mist); border-radius: var(--r-card); background: var(--white); transition: border-color .16s, background .16s; }
.cat:hover { border-color: var(--carbon); }
.cat-name { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.015em; }
.cat-hint { display: block; font-size: 14px; color: var(--zinc); margin-top: 4px; line-height: 1.4; }
.cat-n { font-family: var(--mono); font-size: 11px; color: var(--ash); white-space: nowrap; padding-top: 3px; }

/* ── product cards ───────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 11px; }
.pcard { display: flex; flex-direction: column; border: 1px solid var(--mist); border-radius: var(--r-card); background: var(--white); overflow: hidden; transition: border-color .16s, box-shadow .16s; }
.pcard:hover { border-color: var(--carbon); box-shadow: var(--shadow); }
.pcard-media { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 19px; background: var(--white); }
.pcard-media img { max-height: 100%; width: auto; object-fit: contain; }
.pcard-noimg { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--ash); }
.pcard-body { padding: 0 19px 19px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.pcard-brand { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--zinc); }
.pcard-name { font-size: 15px; line-height: 1.35; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--mist); }
.pcard-price { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.pcard-price--ask { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--zinc); }
.tag { font-family: var(--mono); font-size: 10px; text-transform: uppercase; padding: 5px 9px; border-radius: var(--r-sm); }
.tag--in { background: var(--accent-soft); color: var(--accent); }
.tag--order { background: var(--paper); color: var(--zinc); border: 1px solid var(--mist); }
.skel { border-radius: var(--r-card); aspect-ratio: 3/4; background: linear-gradient(90deg, #f4f4f5 25%, #ebebee 37%, #f4f4f5 63%); background-size: 400% 100%; animation: sh 1.3s infinite; }
@keyframes sh { from { background-position: 100% 50% } to { background-position: 0 50% } }

/* ── steps / industries ──────────────────────────────── */
.steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 11px; align-items: stretch; }
.step-arrow { align-self: center; color: var(--ash); font-size: 20px; line-height: 1; }
.step-ico { width: 52px; height: 52px; margin-bottom: 14px; opacity: .9; }
.step { border: 1px solid var(--mist); border-radius: var(--r-card); padding: 19px; }
.step .meta { display: block; margin-bottom: 14px; }
.step b { display: block; font-weight: 500; font-size: 18px; letter-spacing: -.015em; margin-bottom: 6px; }
.step p { font-size: 15px; color: var(--zinc); }
.inds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.ind { border: 1px solid var(--mist); border-radius: var(--r-card); padding: 26px; transition: border-color .16s; }
.ind:hover { border-color: var(--carbon); }
.ind h3 { margin: 10px 0 8px; }
.ind p { font-size: 15px; color: var(--zinc); }

/* ── brands ──────────────────────────────────────────── */
.brands { display: flex; flex-wrap: wrap; gap: 8px; }
.brand { font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--zinc); border: 1px solid var(--mist); border-radius: var(--pill); padding: 9px 16px; }

/* ── contact ─────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.c-list { display: grid; gap: 18px; margin-top: 30px; }
.c-row span { display: block; font-size: 17px; }
.form { display: grid; gap: 10px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inp { height: 52px; padding: 0 18px; border: 1px solid var(--mist); border-radius: var(--pill); background: var(--white); outline: 0; width: 100%; font-size: 16px; }
textarea.inp { height: auto; padding: 14px 18px; border-radius: var(--r-card); resize: vertical; }
.inp:focus { border-color: var(--carbon); }
.form .btn { margin-top: 4px; }
.form-note { font-size: 13px; color: var(--ash); }
.form-ok { display: none; border: 1px solid var(--mist); border-radius: var(--r-card); padding: 14px 18px; font-size: 15px; }

/* ── footer ──────────────────────────────────────────── */
.ftr { border-top: 1px solid var(--mist); padding: 56px 0 34px; }
.ftr-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; }
.ftr h4 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--ash); margin-bottom: 14px; font-weight: 400; }
.ftr a, .ftr span.f { display: block; font-size: 15px; color: var(--zinc); margin-bottom: 9px; }
.ftr a:hover { color: var(--carbon); }
.ftr-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--mist); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--ash); text-transform: uppercase; }

/* ── messengers ──────────────────────────────────────── */
.msg { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 9px; z-index: 90; }
.msg a { width: 46px; height: 46px; border-radius: var(--pill); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.msg-tg { background: #29a4e3; }
.msg-wa { background: #25d366; }

/* ── mobile ──────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --gutter: 14px; --gap-section: 52px; }
  body { font-size: 16px; }
  .nav-links, .nav-phone, .nav-right .btn { display: none; }
  .nav-burger { display: block; }
  .nav { gap: 12px; padding-left: 16px; }
  .hero { padding: 104px 0 44px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-stats { gap: 26px 32px; margin-top: 34px; }
  .hero-stat b { font-size: 24px; }
  .searchbar { height: 54px; padding-left: 18px; }
  .searchbar .btn { height: 44px; padding: 0 18px; }
  .steps, .inds, .contact { grid-template-columns: 1fr; }
  .step-arrow { transform: rotate(90deg); justify-self: center; }
  .contact { gap: 28px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .pcard-body { padding: 0 13px 14px; }
  .pcard-media { padding: 13px; }
  .form-row { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────
   Каталог
   ─────────────────────────────────────────────────────── */
.crumbs { display: flex; flex-wrap: wrap; gap: 7px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--ash); margin-bottom: 16px; }
.crumbs a:hover { color: var(--carbon); }
.page-head { padding: 104px 0 26px; }
.page-head h1 { font-size: clamp(28px, 3.6vw, 44px); }
.page-head .total { font-family: var(--mono); font-size: 12px; color: var(--zinc); margin-top: 10px; display: block; }
.cat-layout { display: grid; grid-template-columns: 264px 1fr; gap: 28px; align-items: start; padding-bottom: 72px; }
.side { position: sticky; top: 84px; border: 1px solid var(--mist); border-radius: var(--r-card); padding: 14px; max-height: calc(100vh - 110px); overflow: auto; }
.side-title { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--ash); padding: 4px 8px 10px; }
.side ul { list-style: none; }
.side-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: var(--r-sm); font-size: 15px; color: var(--carbon); cursor: pointer; }
.side-item:hover { background: var(--paper); }
.side-item.active { background: var(--carbon); color: #fff; }
.side-item.active .side-n { color: rgba(255,255,255,.6); }
.side-root { font-weight: 500; }
.side-n { font-family: var(--mono); font-size: 11px; color: var(--ash); }
.side-sub { display: none; margin: 2px 0 6px 10px; padding-left: 8px; border-left: 1px solid var(--mist); }
.side-sub.open { display: block; }
.side-sub .side-item { font-size: 14px; color: var(--zinc); }
.side-sub .side-item.active { color: #fff; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .searchbar { margin: 0; height: 46px; flex: 1; min-width: 240px; max-width: none; }
.toolbar .searchbar input { font-size: 15px; }
.sel { height: 46px; padding: 0 34px 0 16px; border: 1px solid var(--mist); border-radius: var(--pill); background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 14px center; appearance: none; font-size: 14px; cursor: pointer; }
.sel:hover { border-color: var(--carbon); }
.side-toggle { display: none; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip-x { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; border: 1px solid var(--mist); border-radius: var(--pill); padding: 7px 14px; cursor: pointer; }
.chip-x:hover { border-color: var(--carbon); }
.chip-x b { font-weight: 500; }
.pager { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; }
.pages { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.page-btn { min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--mist); border-radius: var(--pill); background: var(--white); font-family: var(--mono); font-size: 13px; cursor: pointer; }
.page-btn:hover { border-color: var(--carbon); }
.page-btn.active { background: var(--carbon); color: #fff; border-color: var(--carbon); }
.ellipsis { align-self: center; color: var(--ash); padding: 0 2px; }
.empty { border: 1px solid var(--mist); border-radius: var(--r-card); padding: 44px 24px; text-align: center; color: var(--zinc); }
.empty b { display: block; font-size: 19px; font-weight: 500; color: var(--carbon); margin-bottom: 8px; }
.empty .btn { margin-top: 18px; }

@media (max-width: 900px) {
  .page-head { padding: 92px 0 18px; }
  .cat-layout { grid-template-columns: 1fr; gap: 16px; }
  .side { position: static; max-height: none; display: none; }
  .side.open { display: block; }
  .side-toggle { display: inline-flex; }
  .toolbar .searchbar { order: -1; width: 100%; flex: 1 1 100%; }
  .sel { flex: 1; min-width: 0; }
}

/* Перебиваем старые стили на второстепенных страницах (у них свои <style>) */
.nav-shell .nav { background: var(--carbon); color: #fff; }
.nav-shell .nav-logo, .nav-shell .nav-logo span { color: #fff; font-family: Figtree, sans-serif; }
.nav-shell .nav-links a { color: rgba(255,255,255,.72); font-size: 14px; }
.nav-shell .nav-links a:hover { color: #fff; }
.nav-shell .nav-phone { color: rgba(255,255,255,.8); }
.nav-shell .nav-icon, .nav-shell .nav-burger { color: #fff; background: transparent; }
.nav-shell .btn.btn-light { background: #fff; color: var(--carbon); }
.nav-drop a { color: #fff; }
footer.ftr { display: block; background: var(--white); color: var(--carbon); padding: 56px 0 34px; border-top: 1px solid var(--mist); }
footer.ftr .nav-logo, footer.ftr .nav-logo span { color: var(--carbon); }
footer.ftr a { color: var(--zinc); }
footer.ftr a:hover { color: var(--carbon); }