/* Общий стиль витрины. Палитра та же, что в альбомах проектов. */
:root{
  --bg:#EDEFEC; --surface:#FFFFFF; --surface-2:#F5F7F3; --sunken:#E4E8E3;
  --ink:#151D19; --ink-2:#3B4540; --muted:#6C7671;
  --line:#CBD2CB; --line-strong:#9EA8A1;
  --accent:#1C5F63; --accent-2:#2E8085; --accent-soft:#D5E4E3;
  --ok:#3F7346; --warn:#946522; --bad:#C0392B;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#101412; --surface:#181F1B; --surface-2:#1F2723; --sunken:#0C100E;
  --ink:#E7EBE7; --ink-2:#B6C0B9; --muted:#889290;
  --line:#2C3631; --line-strong:#465149;
  --accent:#5DB2B4; --accent-2:#7CC7C8; --accent-soft:#1A3A3B;
  --ok:#6FA874; --warn:#C69A4C; --bad:#E0796C;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.cond,button,label,legend,th{font-family:"Barlow Condensed","Arial Narrow",sans-serif}
.mono,.num{font-family:"IBM Plex Mono",ui-monospace,monospace}
a{color:var(--accent)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:70ch}

nav.top{position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;gap:22px;height:56px;overflow-x:auto}
nav.top .mark{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20px;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--ink);
  text-decoration:none}
nav.top .mark span{color:var(--accent)}
nav.top a:not(.mark){font-family:"Barlow Condensed",sans-serif;font-size:16px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-decoration:none;
  white-space:nowrap;padding:3px 0;border-bottom:2px solid transparent}
nav.top a:not(.mark):hover{color:var(--accent);border-bottom-color:var(--accent)}
nav.top .sp{margin-left:auto}

.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px}
h1{font-size:clamp(40px,7vw,76px);line-height:.98;font-weight:700;margin:0 0 18px;
  text-transform:uppercase;text-wrap:balance}
h2{font-size:clamp(28px,4.2vw,44px);line-height:1.03;margin:0 0 6px;font-weight:700;
  text-transform:uppercase;text-wrap:balance}
h3{font-size:21px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px;font-weight:700}
.lede{font-size:20px;color:var(--ink-2);max-width:62ch;margin:0 0 32px}
p{margin:0 0 14px}
section{padding:62px 0;border-bottom:1px solid var(--line)}
header.hero{padding:70px 0 46px;border-bottom:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 8px}
.sec-no{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--accent);
  letter-spacing:.12em}
.sec-sub{color:var(--muted);font-size:17px;margin:6px 0 34px;max-width:66ch}

.btn{display:inline-block;font-family:"Barlow Condensed",sans-serif;font-size:18px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  padding:13px 30px;border-radius:2px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft);color:var(--accent)}
.btn[disabled]{opacity:.5;cursor:default}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.stat{background:var(--surface);padding:16px 18px;min-height:96px;
  display:flex;flex-direction:column;justify-content:space-between}
.stat-k{font-family:"Barlow Condensed",sans-serif;font-size:14px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.stat-v{font-family:"IBM Plex Mono",monospace;font-size:23px;color:var(--ink)}
.stat-v small{font-size:13px;color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:22px 24px}
.card .meta{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--accent);
  letter-spacing:.06em;margin:0 0 12px}
.card ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:16px}
.card li{margin:5px 0}
.card li::marker{color:var(--accent)}

.steps{counter-reset:s;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:2px;overflow:hidden}
.step{background:var(--surface);padding:24px 26px;display:grid;
  grid-template-columns:56px 1fr;gap:20px;align-items:start}
.step b{counter-increment:s;font-family:"IBM Plex Mono",monospace;font-size:28px;
  color:var(--accent);font-weight:400;line-height:1}
.step b::before{content:"0" counter(s)}
.step h3{margin:0 0 4px}
.step p{margin:0;color:var(--ink-2)}

.note{border-left:3px solid var(--accent);background:var(--surface);padding:16px 20px;
  font-size:16px;color:var(--ink-2);border-radius:0 2px 2px 0;margin:0 0 18px}
.note b{color:var(--ink)}

/* --------- форма --------- */
form fieldset{border:1px solid var(--line);border-radius:2px;background:var(--surface);
  padding:22px 24px 26px;margin:0 0 22px}
form legend{font-size:15px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--accent);padding:0 8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.field .hint{font-size:14px;color:var(--muted);font-family:"Source Serif 4",serif;
  text-transform:none;letter-spacing:0}
input[type=text],input[type=number],input[type=email],input[type=tel],select,textarea{
  font-family:"Source Serif 4",Georgia,serif;font-size:16px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:2px;
  padding:10px 12px;width:100%}
textarea{min-height:150px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:2px;padding:8px 14px;
  font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);
  background:var(--surface-2)}
.chips input{accent-color:var(--accent);margin:0}
.chips label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);
  color:var(--accent)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--muted);
  font-family:"Source Serif 4",serif;text-transform:none;letter-spacing:0}
.consent input{margin-top:5px;accent-color:var(--accent)}
.formfoot{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
#status{font-size:16px;color:var(--muted)}
#status.err{color:var(--bad)}
#done{display:none;background:var(--surface);border:1px solid var(--accent);
  border-radius:2px;padding:28px 30px}
#done h3{color:var(--accent)}

table{border-collapse:collapse;width:100%;font-size:16px;
  font-family:"Barlow Condensed",sans-serif}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:2px;background:var(--surface)}
th{text-align:left;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line-strong);padding:10px 14px}
td{border-bottom:1px solid var(--line);padding:10px 14px;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even) td{background:var(--surface-2)}

footer{padding:44px 0 70px;color:var(--muted);font-size:15px}

/* кнопка внутри навигации не должна перекрашиваться правилом для ссылок */
nav.top a.btn{color:#fff;border-bottom:none;padding:9px 20px;font-size:16px}
nav.top a.btn:hover{color:#fff;border-bottom:none}