/* Нетник — система витрины netnik.ru. Направление B «Панель оператора»
   (выбор владельца, 21.09.2026). Один файл: токены + база + компоненты.
   Боевая копия: лежит в корне как style.css, шрифты подключаются из
   design/fonts/ (пути в @font-face уже поправлены). Внешних CDN нет: два файла
   шрифтов лежат в репозитории, лицензия OFL.
   Источник — design/system/tokens.css; правки вносятся там и переносятся сюда. */

/* --- шрифты: гротеск для всего, моноширинный для служебного ------------- */
@font-face{font-family:'Golos Text';src:url('design/fonts/golos-text.woff2') format('woff2');
  font-weight:400 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('design/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight:100 800;font-display:swap}

/* --- токены ------------------------------------------------------------- */
:root{
  /* цвет: подложка страницы, подложка панели, чернила, приглушённый,
     один акцент, линейка на бумаге, линейка панели, волосяная линия */
  --paper:#F1F2F0;
  --panel:#F3F4F2;
  --ink:#14171A;
  --muted:#53585D;
  --accent:#7A5500;
  --rule:#838782;
  --rule-2:#7D817C;   /* рамка панели: держит 3:1 и снаружи, и изнутри */
  --hair:#BEC0BD;     /* волосяная линия внутри панели — декоративная */

  /* шрифты: одно семейство на весь текст, второе на цифры и ярлыки */
  --text:'Golos Text','Noto Sans',sans-serif;
  --head:'Golos Text','Noto Sans',sans-serif;
  --mono:'JetBrains Mono','Noto Sans Mono',monospace;

  /* размеры: шаг 1.25, всё через clamp */
  --fs-text:clamp(1rem,.96rem + .2vw,1.0625rem);
  --fs-small:.9375rem;
  --fs-micro:.8125rem;
  --fs-mono:.75rem;
  --fs-h1:clamp(2.3rem,1.2rem + 5.4vw,5rem);
  --fs-h2:clamp(1.55rem,1.15rem + 1.8vw,2.5rem);
  --fs-h3:clamp(1.15rem,1.05rem + .5vw,1.5rem);

  /* отступы: единица 4px */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px;
  --pad:clamp(18px,4vw,56px);      /* поле страницы */
  --wrap:1440px;                   /* предел ширины: первый экран во всю ширину */
  --measure:62ch;                  /* длина строки текста */
  --r:3px;                         /* единственное скругление в системе */

  /* движение: только отклик на наведение и фокус */
  --dur:150ms; --ease:cubic-bezier(.2,0,.2,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#16181A; --panel:#1E2123; --ink:#E9EBE8; --muted:#9CA1A4;
    --accent:#E8AF3C; --rule:#63686C; --rule-2:#6E7478; --hair:#373A3D;
  }
}

/* --- база --------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:var(--fs-text);line-height:1.55;
  font-variant-numeric:tabular-nums;overflow-wrap:break-word}
img,svg{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:var(--s3) var(--s4);
  background:var(--ink);color:var(--paper)}
/* плашка «нечем подтвердить» */
.n{font-family:var(--mono);color:var(--accent);font-size:.9em;white-space:nowrap}
/* служебный ярлык: моно, разрядка, капитель */
.tag{font-family:var(--mono);font-weight:500;font-size:.6875rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0}

/* --- статусная строка пульта -------------------------------------------- */
.status{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.04em;
  color:var(--muted);display:flex;flex-wrap:wrap;gap:var(--s2) 22px;
  padding:10px 0;border-bottom:1px solid var(--hair)}
.status .on{color:var(--accent);font-weight:500}

/* --- шапка: знак слева, разделы справа, гамбургера нет ------------------- */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s2) var(--s4);padding:var(--s4) 0}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo svg{display:block;width:32px;height:32px;flex:none}
.logo .wm{font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
.nav{display:flex;flex-wrap:wrap;gap:var(--s1)}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  color:var(--muted);text-decoration:none;font-size:var(--fs-small);
  border:1px solid transparent;border-radius:var(--r);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav a:hover{color:var(--ink);border-color:var(--rule-2)}
.handle{font-family:var(--mono);font-size:var(--fs-mono);color:var(--muted);
  display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.handle:hover{color:var(--accent)}

/* --- первый экран во всю ширину ----------------------------------------- */
.hero{padding:clamp(30px,5vw,64px) 0 clamp(26px,3vw,40px);border-top:1px solid var(--hair)}
h1{margin:0 0 22px;font-family:var(--head);font-weight:800;letter-spacing:-.025em;
  line-height:1.02;font-size:var(--fs-h1);max-width:24ch;text-wrap:balance}
h1 span{font-weight:400;color:var(--muted)}
.under{display:grid;gap:18px 40px}
@media (min-width:1000px){.under{grid-template-columns:minmax(0,58ch) minmax(0,auto);align-items:end}}
.lead{margin:0;color:var(--muted);max-width:58ch}
.lead strong{color:var(--ink);font-weight:600}
.go-hero{display:grid;gap:var(--s3);justify-items:start;min-width:0}
@media (min-width:1000px){.go-hero{justify-items:stretch}}

/* --- действия ----------------------------------------------------------- */
.act{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  max-width:100%;padding:var(--s3) var(--s5);background:var(--ink);color:var(--paper);
  text-decoration:none;font-weight:600;text-align:center;border-radius:var(--r);
  transition:background var(--dur) var(--ease)}
.act:hover{background:var(--accent)}
.act-note{font-family:var(--mono);font-size:var(--fs-mono);line-height:1.5;
  color:var(--muted);margin:0;max-width:44ch}
.ask{display:inline-flex;align-items:center;min-height:44px;margin-top:auto;
  align-self:flex-start;color:var(--accent);font-weight:600;font-size:var(--fs-small);
  text-decoration:none;border-bottom:1px solid var(--accent);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.ask:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* --- строка потока: что происходит с отчётом ---------------------------- */
.flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:26px 0 0;
  font-family:var(--mono);font-size:var(--fs-mono);color:var(--muted);letter-spacing:.02em}
.flow .st{border:1px solid var(--rule-2);border-radius:var(--r);padding:7px 11px;
  background:var(--panel)}
.flow .st:last-child{border-color:var(--accent);color:var(--accent)}
.flow .ar{color:var(--rule)}

/* --- панели услуг: одна большая и две малых ----------------------------- */
.bento{display:grid;gap:var(--s3);padding:clamp(24px,3vw,40px) 0 0}
@media (min-width:1000px){
  .bento{grid-template-columns:repeat(3,minmax(0,1fr))}
  .p1{grid-column:span 2;grid-row:span 2}
  .p4{grid-column:span 3}
}
.panel{border:1px solid var(--rule-2);border-radius:var(--r);background:var(--panel);
  padding:clamp(18px,2.2vw,30px);display:flex;flex-direction:column;gap:var(--s3);
  min-width:0;--hair:color-mix(in oklab,var(--rule) 40%,var(--panel))}
.panel h2{margin:0;font-weight:700;line-height:1.14;letter-spacing:-.015em;font-size:var(--fs-h3)}
.p1 h2{font-size:var(--fs-h2)}
.panel p{margin:0;color:var(--muted);font-size:var(--fs-small);max-width:var(--measure)}
.p1 p{color:var(--ink);font-size:1.0625rem;max-width:58ch}
/* Панель тянется по правой колонке; слабину отдаём тексту, а не щели
   между действием и метой: .ask остаётся с margin-top:auto из базы. */
.p1 .kv{margin-top:var(--s5);padding-top:14px;border-top:1px solid var(--hair)}
.kv{font-family:var(--mono);font-size:var(--fs-mono);color:var(--muted);
  display:flex;flex-wrap:wrap;gap:var(--s1) 18px}
/* полоса плашек: рамка пунктиром, подложки нет — это сноска, а не услуга */
.p4{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s4);background:transparent;border-style:dashed;border-color:var(--rule)}
.p4 p{color:var(--ink);font-size:var(--fs-small)}

/* --- полоса заявки ------------------------------------------------------ */
.band{background:var(--panel);border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);margin-top:clamp(40px,6vw,72px)}
.band-in{display:grid;gap:clamp(24px,4vw,56px);padding:clamp(32px,5vw,64px) var(--pad)}
@media (min-width:1000px){.band-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}}
.band h2{font-weight:700;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.02em;
  margin:var(--s3) 0 var(--s4);max-width:16ch}
.band-lead{margin:0 0 var(--s4);max-width:52ch;color:var(--muted)}
.go{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center}
.go .ask{margin-top:0}

/* --- форма-черновик: подписи снаружи полей, подсказки видны всегда ------- */
.form{display:grid;gap:var(--s5);margin:0;min-width:0}
.field{display:grid;gap:6px;min-width:0}
.field > label{font-weight:600;font-size:var(--fs-small)}
.hint{font-family:var(--mono);font-size:var(--fs-mono);line-height:1.5;color:var(--muted);margin:0}
.field input,.field select,.field textarea{
  width:100%;max-width:100%;min-height:48px;padding:var(--s3) 14px;
  font:inherit;font-size:var(--fs-small);color:var(--ink);background:var(--paper);
  border:1px solid var(--rule-2);border-radius:var(--r);
  transition:border-color var(--dur) var(--ease)}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color:var(--accent)}
.form-note{border-left:2px solid var(--accent);padding-left:14px;margin:0;
  font-size:var(--fs-small);color:var(--muted);max-width:56ch}
.form-note strong{color:var(--ink);font-weight:600}

/* --- подвал ------------------------------------------------------------- */
.foot{display:grid;gap:10px;padding:var(--s6) 0 var(--s7);
  font-size:.875rem;color:var(--muted)}
@media (min-width:1000px){.foot{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
.foot p{margin:0;max-width:62ch}
.foot .sign{font-family:var(--mono);font-size:var(--fs-mono);white-space:nowrap}
.foot a{color:var(--accent);text-decoration:none}
.foot a:hover{color:var(--ink)}

/* Движение выключается целиком, если система просит покоя. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}