/*
 * Сайт-заглушка ModelRiser. Цвета — токены темы сервиса «Графит + ночной холст» (src/UI/src/styles.css);
 * светлой темы нет, как и в сервисе.
 */
:root {
  --font-ui: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --shell-root: #0f1319;
  --shell-chrome: #0a0d12;
  --shell-panel: #141a22;
  --shell-panel-active: #1f2731;
  --shell-border: #34404f;
  --shell-border-input: #243040;
  --shell-text: #dfe6ee;
  --shell-text-secondary: #c5cfda;
  --shell-text-muted: #8794a3;
  --shell-text-dim: #5f6b78;
  --accent-primary: #5cc8ff;
  --accent-primary-hover: #8ddbff;
  --accent-primary-glow: 0 0 8px rgba(92, 200, 255, 0.22);
  --accent-on-primary: #0a0d12;
  --canvas-background: #0f1628;
  --canvas-grid: #182238;
  --status-notready-fg: #f0b429;
  --status-notready-bg: #4a3a10;
  --status-ready-fg: #4fd18b;
  --status-ready-bg: #163a2a;
  --status-error-fg: #ff8a80;
  --status-error-bg: #4a1f1c;
  --radius: 4px;
  --page: 880px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--shell-root);
  color: var(--shell-text);
  color-scheme: dark;
  font: 15px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-primary); }
a:hover { color: var(--accent-primary-hover); }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 16px; }

/* Шапка — как полоса chrome в сервисе */
.top {
  background: var(--shell-chrome);
  border-bottom: 1px solid var(--shell-border);
}
.top .wrap {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--shell-text);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.brand:hover { color: var(--shell-text); }
.brand svg { flex: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--status-notready-bg);
  color: var(--status-notready-fg);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* Первый экран — на «ночном холсте» с сеткой, как поле чертежа в сервисе */
.hero {
  background-color: var(--canvas-background);
  background-image:
    linear-gradient(var(--canvas-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--canvas-grid) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
  border-bottom: 1px solid var(--shell-border);
}
.hero .wrap { padding-top: 64px; padding-bottom: 56px; }
h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 5.4vw, 42px);
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 20ch;
}
.lead {
  margin: 0;
  max-width: 62ch;
  color: var(--shell-text-secondary);
  font-size: 17px;
}

main { flex: 1; }
section { padding: 44px 0 8px; }
h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
}
.muted { color: var(--shell-text-muted); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cards li {
  background: var(--shell-panel);
  border: 1px solid var(--shell-border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.cards b { display: block; margin-bottom: 4px; color: var(--shell-text); }
.cards span { color: var(--shell-text-muted); font-size: 14px; }

.note {
  margin: 20px 0 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--accent-primary);
  color: var(--shell-text-muted);
}

/* Форма обратной связи */
.panel {
  background: var(--shell-panel);
  border: 1px solid var(--shell-border);
  border-radius: var(--radius);
  padding: 22px;
}
.form { display: grid; gap: 14px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .row { grid-template-columns: 1fr; } }
label.field { display: grid; gap: 6px; font-size: 14px; color: var(--shell-text-secondary); }
label.field i { font-style: normal; color: var(--accent-primary); }
input[type=text], input[type=email], textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--shell-border-input);
  border-radius: var(--radius);
  background: var(--shell-chrome);
  color: var(--shell-text);
  font: inherit;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--accent-primary-glow);
}
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--shell-text-muted);
}
.consent input { margin: 4px 0 0; accent-color: var(--accent-primary); width: 16px; height: 16px; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
button {
  height: 38px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent-primary);
  color: var(--accent-on-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
button:hover { background: var(--accent-primary-hover); }
button:disabled { opacity: .55; cursor: default; }
.status { margin: 0; font-size: 14px; padding: 6px 12px; border-radius: var(--radius); }
.status.ok { background: var(--status-ready-bg); color: var(--status-ready-fg); }
.status.err { background: var(--status-error-bg); color: var(--status-error-fg); }
.status.info { color: var(--shell-text-muted); padding-left: 0; }

/* Ловушка для ботов: поле вне экрана, людям не видно и недоступно с клавиатуры */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Текстовые страницы: политика и согласие */
.doc { padding: 40px 0 24px; max-width: 72ch; }
.doc h1 { font-size: clamp(24px, 4vw, 32px); max-width: none; }
.doc h2 { font-size: 17px; margin-top: 28px; }
.doc p, .doc li { color: var(--shell-text-secondary); }
.fill { background: var(--status-notready-bg); color: var(--status-notready-fg); padding: 0 4px; border-radius: 2px; }

footer {
  margin-top: 48px;
  background: var(--shell-chrome);
  border-top: 1px solid var(--shell-border);
  color: var(--shell-text-dim);
  font-size: 13px;
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 18px;
  padding-bottom: 18px;
}
footer a { color: var(--shell-text-muted); }