/* ФАБРИКА ЖЕЛАНИЙ — дизайн-система v1
   База: тёмный #0E0E12 (бренд-палитра с флешки #131317), неон-акценты,
   фотореализм, без мультяшности. Каждый цех перекрашивается CSS-переменной. */

:root {
  --фон: #0E0E12;
  --фон-2: #131317;
  --панель: #1A1A21;
  --панель-2: #22222B;
  --текст: #F0F8FF;
  --текст-2: #9A9AA8;
  --грань: #2A2A35;
  --акцент: #FF007F;          /* ДОМ; цех меняет под себя */
  --акцент-2: #FFBF00;        /* золото-пару */
  --акцент-свечение: rgba(255, 0, 127, .35);
  --рад: 14px;
  --шрифта: "Segoe UI", "PT Sans", system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--фон);
  background-image: radial-gradient(1200px 600px at 80% -10%, var(--акцент-свечение), transparent 60%),
                    radial-gradient(900px 500px at -10% 110%, rgba(155, 0, 255, .12), transparent 55%);
  color: var(--текст);
  font-family: var(--шрифта);
  min-height: 100vh;
}
a { color: var(--акцент); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── шапка ── */
.шапка {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 14px 28px;
  background: rgba(14, 14, 18, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--грань);
}
.шапка .лого { height: 44px; width: 44px; border-radius: 10px; object-fit: contain; background: #0008; padding: 4px; }
.шапка .бренд { font-size: 19px; font-weight: 700; letter-spacing: .4px; }
.шапка .бренд small { display: block; font-size: 11px; color: var(--текст-2); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }
.шапка nav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.шапка nav a {
  color: var(--текст-2); padding: 8px 13px; border-radius: 10px; font-size: 14px;
  border: 1px solid transparent;
}
.шапка nav a:hover { color: var(--текст); background: var(--панель); text-decoration: none; }
.шапка nav a.актив { color: var(--текст); border-color: var(--грань); background: var(--панель); }

/* ── кнопки ── */
.кнопка {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 12px; border: none; cursor: pointer;
  font: 600 15px var(--шрифта); color: #fff;
  background: linear-gradient(135deg, var(--акцент), color-mix(in srgb, var(--акцент) 55%, #9D00FF));
  box-shadow: 0 4px 24px var(--акцент-свечение);
  transition: transform .15s, box-shadow .15s;
}
.кнопка:hover { transform: translateY(-1px); box-shadow: 0 6px 30px var(--акцент-свечение); text-decoration: none; }
.кнопка.втор { background: var(--панель); color: var(--текст); border: 1px solid var(--грань); box-shadow: none; }
.кнопка.трет { background: transparent; color: var(--текст-2); border: 1px dashed var(--грань); box-shadow: none; }
.кнопка.мини { padding: 6px 13px; font-size: 13px; border-radius: 9px; }

/* ── карточки ── */
.карта {
  background: linear-gradient(180deg, var(--панель), var(--панель-2));
  border: 1px solid var(--грань); border-radius: var(--рад);
  padding: 20px; position: relative; overflow: hidden;
}
.карта:hover { border-color: color-mix(in srgb, var(--акцент) 50%, var(--грань)); }
.сетка { display: grid; gap: 18px; }
.сетка.ц3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.сетка.ц4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ── цеховая карточка ── */
.цех-карта { display: flex; flex-direction: column; gap: 12px; min-height: 280px; }
.цех-карта .визуал { height: 150px; border-radius: 10px; object-fit: cover; width: 100%; background: #000; }
.цех-карта h3 { font-size: 19px; }
.цех-карта .возраст {
  display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 99px;
  border: 1px solid var(--грань); color: var(--текст-2); letter-spacing: 1px;
}
.цех-карта p { color: var(--текст-2); font-size: 14px; line-height: 1.5; flex: 1; }

/* ── товар ── */
.товар { display: flex; flex-direction: column; gap: 10px; }
.товар .имя { font-size: 17px; font-weight: 600; }
.товар .описание { color: var(--текст-2); font-size: 13.5px; line-height: 1.45; flex: 1; }
.цены { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.цены .в { font-size: 15px; font-weight: 700; }
.цены .руб { font-size: 13px; color: var(--текст-2); }
.бейдж-кадиллак {
  position: absolute; top: 12px; right: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 99px;
  background: linear-gradient(135deg, var(--акцент-2), #FF5E00); color: #1a1000;
}

/* ── секции ── */
.секция { max-width: 1240px; margin: 0 auto; padding: 46px 28px; }
.секция > h2 { font-size: 26px; margin-bottom: 6px; }
.секция > .подзаголовок { color: var(--текст-2); margin-bottom: 26px; font-size: 15px; }

/* ── герой ── */
.герой {
  max-width: 1240px; margin: 0 auto; padding: 64px 28px 40px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center;
}
.герой h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; font-weight: 800; }
.герой h1 .неон {
  background: linear-gradient(90deg, var(--акцент), #9D00FF, #00F5FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.герой .лид { color: var(--текст-2); font-size: 17px; line-height: 1.6; margin: 18px 0 26px; max-width: 56ch; }
.герой-виз { border-radius: 18px; border: 1px solid var(--грань); box-shadow: 0 20px 60px #0009; width: 100%; display: block; }
.герой-действия { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── валюта ── */
.жемчуг::before { content: "◆"; color: #FFBF00; margin-right: 4px; }
.искры::before  { content: "✦"; color: #00F5FF; margin-right: 4px; }
.свет::before   { content: "✧"; color: #B8C4CE; margin-right: 4px; }

/* ── лента-статусы (заказы CRM) ── */
.статус { font-size: 12px; padding: 4px 11px; border-radius: 99px; border: 1px solid; letter-spacing: .5px; white-space: nowrap; }
.статус.новый { color: #00F5FF; border-color: #00F5FF55; }
.статус.в_работе { color: #FFBF00; border-color: #FFBF0055; }
.статус.готов { color: #39FF14; border-color: #39FF1455; }
.статус.доставляется { color: #9D00FF; border-color: #9D00FF55; }
.статус.закрыт { color: #7a7a88; border-color: #3a3a44; }
.статус.отменён { color: #FF073A; border-color: #FF073A55; }
.канал-метка { font-size: 12px; padding: 3px 9px; border-radius: 7px; background: var(--панель-2); border: 1px solid var(--грань); }
.канал-метка.web { color: #00F5FF; }
.канал-метка.telegram { color: #39FF14; }
.канал-метка.email { color: #FFBF00; }

/* ── чат-виджет (кнопка в правом нижнем углу всех страниц) ── */
#чатКнопка {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--акцент), #9D00FF);
  box-shadow: 0 6px 26px var(--акцент-свечение);
  color: #fff; font-size: 24px;
}
#чатОкно {
  position: fixed; right: 22px; bottom: 92px; z-index: 90;
  width: 340px; max-height: 480px; display: none; flex-direction: column;
  background: var(--панель); border: 1px solid var(--грань); border-radius: 16px;
  box-shadow: 0 20px 60px #000c; overflow: hidden;
}
#чатОкно.открыт { display: flex; }
#чатОкно .шапочка { padding: 12px 16px; border-bottom: 1px solid var(--грань); font-weight: 700; background: var(--панель-2); }
#чатОкно .шапочка small { display: block; color: #39FF14; font-size: 11px; font-weight: 400; }
#чатЛента { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.сообщение { max-width: 85%; padding: 9px 13px; border-radius: 13px; font-size: 14px; line-height: 1.45; }
.сообщение.in { background: var(--панель-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.сообщение.out { background: linear-gradient(135deg, var(--акцент), #9D00FF); align-self: flex-end; border-bottom-right-radius: 4px; }
#чатОкно .ввод { display: flex; border-top: 1px solid var(--грань); }
#чатОкно .ввод input { flex: 1; background: transparent; border: none; color: var(--текст); padding: 13px 14px; font: 14px var(--шрифта); outline: none; }
#чатОкно .ввод button { background: none; border: none; color: var(--акцент); font-size: 18px; cursor: pointer; padding: 0 16px; }

/* ── подвал ── */
.подвал { border-top: 1px solid var(--грань); margin-top: 40px; padding: 30px 28px 46px; color: var(--текст-2); font-size: 13.5px; }
.подвал .внутри { max-width: 1240px; margin: 0 auto; display: flex; gap: 30px; flex-wrap: wrap; justify-content: space-between; }

/* ── таблицы CRM ── */
.табл { width: 100%; border-collapse: collapse; font-size: 14px; }
.табл th { text-align: left; color: var(--текст-2); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--грань); font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase; }
.табл td { padding: 12px; border-bottom: 1px solid #1e1e26; vertical-align: middle; }
.табл tr:hover td { background: #ffffff06; }

@media (max-width: 900px) {
  .герой { grid-template-columns: 1fr; padding-top: 36px; }
  .шапка { padding: 10px 14px; flex-wrap: wrap; }
  .шапка nav { margin-left: 0; }
}