/* Прототип ЭКСОНОРа. Одна вёрстка на десктоп и телефон: раскладка меняется
   медиазапросами, а не отдельным мобильным шаблоном — два шаблона расходятся
   на первой же правке содержания. Палитра и шрифты те же, что в презентации. */

:root{
  --head:#6C3CE9; --accent:#4F46E5;
  --text:#17151F; --text2:#55525F; --caption:#8A8794;
  --card:#F5F4F8; --line:#E3E1E9; --white:#fff;
  --ok:#17A34A; --warn:#D97706; --danger:#DC2626;
  --fh:'Unbounded','Golos Text',system-ui,sans-serif;
  --fb:'Golos Text',system-ui,-apple-system,sans-serif;
  --pad:64px; --r:16px;
}
@media (max-width:900px){ :root{ --pad:20px; } }

*{box-sizing:border-box;margin:0;padding:0;-webkit-text-size-adjust:100%}
html{scroll-behavior:smooth}
body{font-family:var(--fb);color:var(--text);background:var(--white);
  font-size:15px;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}

.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
h1,h2,h3{font-family:var(--fh);font-weight:700;line-height:1.2;letter-spacing:-.01em}
h1{font-size:40px} h2{font-size:28px} h3{font-size:19px;font-weight:600}
@media (max-width:900px){ h1{font-size:25px} h2{font-size:21px} h3{font-size:17px} }
.cap{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--caption)}
.mut{color:var(--text2)} .sm{font-size:13px} .xs{font-size:12px;color:var(--caption)}
.num{font-family:var(--fh);font-weight:700}
.nb{white-space:nowrap}

/* ── шапка ─────────────────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:50;background:var(--white);
  border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:28px;padding-top:16px;padding-bottom:16px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:17px;width:auto}
.nav{display:flex;gap:24px;font-size:14px;color:var(--text2)}
.nav a.on{color:var(--head);font-weight:600}
.hd .sp{flex:1}
.tel{font-weight:600;font-size:14px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.burger{display:none;width:24px;height:16px;flex-direction:column;justify-content:space-between;
  background:none;border:0;cursor:pointer}
.burger i{display:block;height:2px;background:var(--text);border-radius:2px}
@media (max-width:900px){
  .nav{display:none} .hd .wrap{gap:12px} .burger{display:flex}
  .tel{display:none}
  .soft .grid.g4,.soft .grid.g3{gap:14px}
  .soft .grid[style*="repeat(3"]{grid-template-columns:1fr 1fr!important}
}

/* ── типовые блоки ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:11px;font-weight:600;font-size:14px;
  background:var(--head);color:#fff;border:0;cursor:pointer;transition:.15s}
.btn:hover{background:var(--accent)}
/* модификатор назван ghost, а не sec: класс .sec занят секцией с отступом
   36px сверху и снизу, и кнопка ловила его — вырастала до 95 пикселей */
.btn.ghost{background:var(--white);color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--head);color:var(--head)}
.btn.dark{background:var(--text)}
.btn.full{width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:100px;
  background-color:var(--card);color:var(--text2);font-size:13px;border:0;cursor:pointer}
/* background-color, а не background: сокращённая запись у .card и .chip
   стирала бы эту стрелку — селекты носят оба этих класса */
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2355525F' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px!important;cursor:pointer}
select:focus{outline:2px solid var(--head);outline-offset:1px}
.chip.on{background-color:var(--text);color:#fff}
.btn.added{background:rgba(23,163,74,.10);color:var(--ok);
  border:1px solid rgba(23,163,74,.35);pointer-events:none}
.card{background-color:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.soft{background-color:var(--card);border-radius:var(--r);padding:20px}
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:12px}
.sec{padding:36px 0}
@media (max-width:900px){ .sec{padding:24px 0} .card,.soft{padding:16px} }

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ok{color:var(--ok)} .warn{color:var(--warn)} .dang{color:var(--danger)}
.pill{display:inline-block;padding:4px 10px;border-radius:100px;font-size:12px;font-weight:600}
.pill.ok{background:rgba(23,163,74,.12)} .pill.warn{background:rgba(217,119,6,.14)}
.pill.dang{background:rgba(220,38,38,.10)} .pill.mut{background:var(--card);color:var(--caption)}

/* ── таблицы: на телефоне превращаются в карточки ──────────────────── */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--caption);padding:12px 14px;background:var(--card)}
td{padding:13px 14px;border-top:1px solid var(--line);vertical-align:top}
.tbl{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl table{font-variant-numeric:tabular-nums}
.rt{text-align:right}
@media (max-width:900px){
  .tbl.resp thead{display:none}
  .tbl.resp tr{display:block;border-top:1px solid var(--line);padding:12px 14px}
  .tbl.resp tr:first-child{border-top:0}
  .tbl.resp td{display:flex;justify-content:space-between;gap:14px;border:0;padding:4px 0;
    text-align:left}
  .tbl.resp td::before{content:attr(data-l);color:var(--caption);font-size:12.5px;flex:none}
  .tbl.resp td.hd-cell{font-weight:600;padding-bottom:8px}
  .tbl.resp td.hd-cell::before{display:none}
}

/* ── герой ─────────────────────────────────────────────────────────── */
.hero{background:linear-gradient(135deg,var(--head),var(--accent));color:#fff;padding:60px 0 52px}
.hero h1{max-width:820px}
.hero p{max-width:720px;font-size:16px;opacity:.88;margin-top:14px}
.search{display:flex;gap:10px;margin-top:26px;max-width:700px}
.search input{flex:1;padding:17px 20px;border:0;border-radius:12px;font-size:14px}
.search input::placeholder{color:var(--caption)}
.hero .chip{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff}
@media (max-width:900px){
  .hero{padding:30px 0 28px} .search{flex-direction:column;gap:8px}
  .search .btn{width:100%}
}

/* ── каталог ───────────────────────────────────────────────────────── */
.cat{display:grid;grid-template-columns:268px 1fr;gap:28px;align-items:start}
@media (max-width:1100px){
  /* !important здесь необходим: раскладки колонок задаются инлайном на каждой
     странице (1fr 1fr, 400px 1fr, 1fr 360px), и обычное правило их не перебьёт.
     Фиксированная колонка в 400px на телефоне выносит содержимое за экран. */
  .cat{grid-template-columns:1fr!important;gap:20px!important}
}
.filters{display:flex;flex-direction:column;gap:0}
.fgroup{display:flex;flex-direction:column;gap:10px;padding:20px 0}
.fgroup:first-child{padding-top:0}
.fgroup+.fgroup{border-top:1px solid var(--line)}
.fgroup .cap{margin-bottom:2px}
.frow{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text2);cursor:pointer}
.frow input{width:16px;height:16px;accent-color:var(--head);cursor:pointer}
.frow .n{margin-left:auto;font-size:12.5px;color:var(--caption)}
.frow.dim{color:var(--caption)}
.prod{display:flex;flex-direction:column;gap:12px}
/* цена и кнопка — смысловой низ карточки, им нужен отбой от характеристик */
.prod .price{margin-top:2px}
.prod .btn{margin-top:4px}
.prod .tag{align-self:flex-start}
/* настоящая фотография с объекта, а не рисунок: cover заполняет коробку целиком,
   contain оставлял бы поля по краям и обрезал кадр по короткой стороне */
.pipe{background-color:var(--card);border-radius:12px;height:132px;overflow:hidden}
.pipe img{width:100%;height:100%;object-fit:cover;object-position:center 58%;
  display:block;border-radius:12px}
.pipe.big{height:300px}
@media (max-width:900px){ .pipe{height:150px} .pipe.big{height:210px} }
.price{font-family:var(--fh);font-weight:700;font-size:20px}
.hidden{display:none!important}

/* ── ящик фильтров на телефоне ─────────────────────────────────────── */
.drawer{position:fixed;inset:0;z-index:80;background:rgba(23,21,31,.4);display:none}
.drawer.open{display:block}
.drawer .in{position:absolute;left:0;right:0;bottom:0;max-height:86vh;overflow:auto;
  background:#fff;border-radius:20px 20px 0 0;padding:20px}
.only-mob{display:none} .only-desk{display:block}
@media (max-width:1100px){ .only-mob{display:block} .only-desk{display:none} }

/* ── подвал ────────────────────────────────────────────────────────── */
.ft{background:var(--text);color:#fff;padding:44px 0;margin-top:48px}
.ft .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.ft a,.ft p{opacity:.72;font-size:13px;line-height:1.7}
.ft h3{opacity:1;margin-bottom:10px}
.ft .logo img{height:16px}
.ft .cap{color:rgba(255,255,255,.5)}
.ft hr{border:0;border-top:1px solid rgba(255,255,255,.15);margin:26px 0 16px}
@media (max-width:900px){ .ft{padding:28px 0;margin-top:28px} .ft .cols{grid-template-columns:1fr;gap:22px} }

/* ── обзор прототипа ───────────────────────────────────────────────── */
.map{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.map a.card{transition:.15s} .map a.card:hover{border-color:var(--head);transform:translateY(-2px)}
.tag{display:inline-block;padding:4px 10px;border-radius:6px;background-color:var(--card);
  font-size:11.5px;font-weight:600;color:var(--head);letter-spacing:.04em}
.note{border:1px solid var(--warn);border-radius:var(--r);padding:20px;background:var(--white)}

/* ── лид-магнит: кнопка в шапке, круглая кнопка в углу и модальное окно ──
   В прототипе заявка никуда не уходит — окно показывает, как выглядит сбор
   контакта, а не собирает его. Это оговорено прямо в окне. */
.hd .cta{padding:10px 18px;font-size:14px;white-space:nowrap}
@media (max-width:900px){ .hd .cta{display:none} }

.fab{position:fixed;right:24px;bottom:24px;z-index:60;width:58px;height:58px;
  border-radius:50%;background:var(--head);color:#fff;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(108,60,233,.38);transition:.15s}
.fab:hover{background:var(--accent);transform:translateY(-2px)}
.fab svg{width:26px;height:26px}
@media (max-width:900px){ .fab{right:16px;bottom:16px;width:52px;height:52px} }

.modal{position:fixed;inset:0;z-index:100;background:rgba(23,21,31,.5);
  display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal .box{background:#fff;border-radius:20px;padding:32px;max-width:520px;width:100%;
  max-height:90vh;overflow:auto}
.modal h3{margin-bottom:6px}
.modal label{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.modal input,.modal textarea{padding:13px 15px;border:1px solid var(--line);
  border-radius:11px;font-size:14px;width:100%}
.modal input:focus,.modal textarea:focus{outline:2px solid var(--head);outline-offset:1px;
  border-color:transparent}
.modal .x{background:none;border:0;font-size:24px;line-height:1;color:var(--caption);
  cursor:pointer;padding:0 4px}
@media (max-width:900px){ .modal .box{padding:22px} }

/* ── кабинет: боковое меню как карточка, а не серый прямоугольник во всю высоту ── */
.lk{display:grid;grid-template-columns:236px 1fr;gap:28px;align-items:start;
  padding:28px 0 40px}
.lk aside{border-right:1px solid var(--line);padding:0 20px 0 0}
.lk .who{padding:0 0 16px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.lk .who b{display:block;font-size:14px;line-height:1.35}
.lk .who span{font-size:12.5px;color:var(--caption)}
/* активный пункт помечается полосой слева, а не белой карточкой: карточка
   на светлом фоне читается как отдельный элемент, а не как «вы здесь» */
.lk aside a{display:block;padding:10px 14px;font-size:14px;color:var(--text2);
  border-left:2px solid transparent;border-radius:0 8px 8px 0}
.lk aside a:hover{background:var(--card);color:var(--text)}
.lk aside a.on{border-left-color:var(--head);color:var(--head);font-weight:600;
  background:var(--card)}
@media (max-width:1100px){
  .lk aside{border-right:0;border-bottom:1px solid var(--line);padding:0 0 14px}
  .lk aside a{border-left:0;border-radius:8px}
  .lk aside a.on{border-left:0}
}
@media (max-width:1100px){ .lk{grid-template-columns:1fr;gap:18px;padding:20px 0 30px} }