/* ══════════════════════════════════════════════════════════════════════════
   САЙТ TheONE — общий стиль всех страниц.

   Вынесен из index.html, когда страниц стало больше одной: держать восемьсот
   строк стиля в каждой из десяти страниц значит править цвет в десяти местах
   и однажды забыть одно.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   САЙТ TheONE — RESTAURANT OPERATING PLATFORM

   Позиционирование: не «ещё одна кассовая программа», а платформа, в которой
   работа заведения и управление им — две части одного целого. Поэтому
   архитектура вынесена наверх, а не спрятана в конец: локальная работа и
   облачное управление здесь не техническая подробность, а то, чем продукт
   отличается.

   Чего на этой странице нет и не будет:
     • придуманных цифр, отзывов и логотипов клиентов;
     • обещаний безотказности — написано «поддерживаемые операции», и это
       не осторожность ради осторожности: обещать, что касса не встанет
       никогда, нельзя никому;
     • нарисованных интерфейсов. Все снимки — с работающей системы.

   Палитра графитовая и намеренно скупая: 80–90% экрана нейтральное, цвет
   только там, где он что-то значит.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#101113; --surface:#1A1C20; --surface2:#15171a; --line:#303339;
  --fg:#F4F5F6; --muted:#969CA5; --dim:#6b7179;
  --ok:#91CDA0;
  /* Ширина содержимого. На широком мониторе колонка в 1280px выглядит
     полоской посередине пустого экрана — поэтому не фиксированная ширина,
     а доля окна с потолком. Читаемость при этом не страдает: сам ТЕКСТ
     ограничен отдельно, по числу символов в строке (max-width в ch), а
     растягиваются только сетки, снимки и схема — то, чему ширина на
     пользу. */
  --max:min(94vw, 1720px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font:17px/1.62 Inter,"SF Pro Text",-apple-system,BlinkMacSystemFont,
       "Segoe UI Variable Text","Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.004em}
/* height:auto обязателен: у картинок проставлены width и height, и без него
   браузер тянет высоту из атрибута, а ширину — из вёрстки, и снимок
   растягивается. Атрибуты при этом нужны: по ним резервируется место,
   и страница не прыгает, пока картинка едет. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
@media (max-width:600px){ .wrap{padding:0 18px} }
/* На большом мониторе всё крупнее на один шаг: шрифт, воздух между
   секциями и потолок заголовка. Иначе сайт читается как уменьшенная
   копия самого себя. */
@media (min-width:1600px){
  body{font-size:18px}
  section{padding:124px 0}
  .wrap{padding:0 40px}
}

/* Технические подписи — моноширинным: они читаются как ярлык системы,
   а не как ещё один заголовок. */
.label{font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ── Шапка ────────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:40;background:rgba(16,17,19,.82);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;gap:18px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;
  letter-spacing:-.02em;text-decoration:none;flex:none}
.logo img{width:28px;height:28px;border-radius:7px}
.hnav{display:flex;gap:28px;margin-left:14px;font-size:15px;color:var(--muted)}
.hnav a{text-decoration:none}
.hnav a:hover{color:var(--fg)}
.hgap{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:10px;font-size:15px;font-weight:600;
  text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  font-family:inherit}
.btn.solid{background:var(--fg);color:#101113}
.btn.solid:hover{background:#fff}
.btn.line{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.line:hover{background:var(--surface)}
.btn.lg{padding:15px 28px;font-size:16px;border-radius:12px}
.btn:disabled{opacity:.5;cursor:default}
@media (max-width:980px){ .hnav{display:none} }
@media (max-width:430px){
  .hrow{gap:10px;height:62px} .logo{font-size:16px}
  .btn{padding:10px 14px;font-size:14px}
}

/* ── Первый экран ─────────────────────────────────────────────────────── */
.hero{padding:96px 0 0}
.hero .label{margin-bottom:22px}
h1{font-size:clamp(38px,6vw,84px);line-height:1.02;letter-spacing:-.04em;
  font-weight:700;margin:0 0 24px;max-width:14ch;text-wrap:balance}
.lead{font-size:clamp(17px,2.1vw,20px);color:var(--muted);max-width:60ch;margin:0 0 14px}
.lead.small{font-size:17px;max-width:64ch;margin-bottom:34px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.pill{font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.1em;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:8px 13px}

/* Снимок в рамке — как окно системы. */
.shot{border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:var(--surface2);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 2px 0 0 rgba(255,255,255,.04) inset}
.hero-shot{margin-top:64px}
.cap{font-size:13px;color:var(--dim);margin-top:12px}

/* ── Секции ───────────────────────────────────────────────────────────── */
section{padding:104px 0}
@media (max-width:940px){ section{padding:72px 0} }
.band{border-top:1px solid var(--line);background:var(--surface2)}
.sec-head{max-width:62ch;margin-bottom:48px}
h2{font-size:clamp(28px,3.8vw,52px);line-height:1.1;letter-spacing:-.032em;
  font-weight:700;margin:14px 0 16px;text-wrap:balance}
.sec-head p{margin:0;color:var(--muted);font-size:18px}

.split{display:grid;grid-template-columns:0.86fr 1.14fr;gap:64px;align-items:center}
.split.flip .txt{order:2}
@media (max-width:940px){
  .split{grid-template-columns:1fr;gap:34px}
  .split.flip .txt{order:0}
}
/* Колонка растягивается вместе со страницей, а строка — нет: больше
   примерно 75 знаков глаз теряет начало следующей строки. */
.txt h2{margin-top:12px;max-width:15ch}
.txt p{margin:0 0 14px;color:var(--muted);font-size:17px;max-width:52ch}
.txt ul{margin:22px 0 0;padding:0;list-style:none}
.txt li{position:relative;padding-left:26px;margin-bottom:12px;color:var(--muted);
  font-size:16px;max-width:52ch}
.txt li::before{content:"";position:absolute;left:2px;top:10px;width:7px;height:7px;
  border-radius:2px;background:var(--ok);opacity:.85}

/* ── Экосистема ───────────────────────────────────────────────────────── */
.eco{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1040px){ .eco{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .eco{grid-template-columns:1fr} }
.node{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px}
.node h3{margin:12px 0 8px;font-size:17.5px;font-weight:650;letter-spacing:-.015em}
.node p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.node svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.eco-more{margin-top:20px;color:var(--dim);font-size:15px}

/* ── Схема архитектуры ────────────────────────────────────────────────── */
.arch{width:100%;height:auto;display:block;margin:12px 0 0}
.arch text{font-family:inherit}
.arch .box{fill:var(--surface);stroke:var(--line)}
.arch .box-a{fill:#171a1f;stroke:var(--line)}
.arch .ttl{fill:var(--fg);font-size:15px;font-weight:650}
.arch .sub{fill:var(--muted);font-size:12.5px}
.arch .mono{fill:var(--dim);font-size:11px;letter-spacing:.1em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.arch .link{stroke:var(--line);stroke-width:1.5;fill:none}
.arch .flow{stroke:var(--ok);stroke-width:1.8;fill:none;opacity:.8}
.arch .chip{fill:#13161a;stroke:var(--line)}
.arch .chip-t{fill:var(--muted);font-size:12.5px}

/* ── Аудитории ────────────────────────────────────────────────────────── */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:940px){ .who{grid-template-columns:1fr} }
.wcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px}
.wcard h3{margin:14px 0 10px;font-size:20px;font-weight:650;letter-spacing:-.02em}
.wcard p{margin:0;color:var(--muted);font-size:15.5px}
.wcard svg{width:24px;height:24px;stroke:var(--muted);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* ── Сценарии ─────────────────────────────────────────────────────────── */
/* auto-fit, а не жёсткие две колонки: на широком мониторе четыре коротких
   сценария встают одной строкой и не растягиваются каждый на пол-экрана. */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px}
@media (max-width:860px){ .cases{grid-template-columns:1fr} }
.case{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px}
.case h4{margin:0 0 10px;font-size:18px;font-weight:650;letter-spacing:-.018em}
.case p{margin:0;color:var(--muted);font-size:15.5px}

/* ── Интеграции ───────────────────────────────────────────────────────── */
.ints{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (min-width:1500px){ .ints{grid-template-columns:repeat(6,1fr)} }
@media (max-width:980px){ .ints{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .ints{grid-template-columns:1fr} }
.int{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.int b{display:block;font-size:15.5px;font-weight:650;margin-bottom:5px}
.int span{color:var(--muted);font-size:14.5px}

/* ── Телефоны ─────────────────────────────────────────────────────────── */
.phones{display:flex;gap:20px;justify-content:center}
.phone{width:min(250px,44vw);border-radius:28px;padding:8px;background:#000;flex:none;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
.phone img{border-radius:21px}
.phone.back{margin-top:34px}
@media (max-width:520px){ .phone.back{display:none} .phone{width:min(280px,72vw)} }

/* ── Заявка ───────────────────────────────────────────────────────────── */
.demo-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.demo-head{margin-bottom:0;align-self:center}
@media (max-width:1040px){ .demo-row{grid-template-columns:1fr;gap:36px}
  .demo-head{margin-bottom:0} }
.form{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:40px;max-width:720px;width:100%}
@media (max-width:600px){ .form{padding:26px 20px} }
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){ .frow{grid-template-columns:1fr} }
.fld{margin-bottom:14px}
.fld label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;padding:13px 14px;border-radius:10px;
  border:1px solid var(--line);background:#0d0f12;color:var(--fg);font:inherit;font-size:16px}
.fld textarea{resize:vertical;min-height:92px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:#4a505a}
.note{color:var(--dim);font-size:13.5px;margin-top:14px}
.msg{margin-top:16px;padding:14px 16px;border-radius:10px;font-size:15px;display:none}
.msg.ok{display:block;background:rgba(145,205,160,.12);color:var(--ok)}
.msg.err{display:block;background:rgba(239,110,110,.12);color:#ef6e6e}

footer{border-top:1px solid var(--line);padding:36px 0 48px;color:var(--dim);font-size:14.5px}
.frow2{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--muted)}

/* ══════════════════════════════════════════════════════════════════════════
   ВТОРАЯ ВОЛНА — по макету редизайна.
   ══════════════════════════════════════════════════════════════════════════ */

/* Палитра макета поверх прежних значений: карточки чуть светлее, вторичный
   текст чуть мягче. Имена те же, поэтому менять ничего больше не нужно. */
:root{ --surface:#191B1F; --muted:#A0A5AE; --dim:#767c85 }

/* ── Шапка: мобильное меню ──────────────────────────────────────────────
   Раньше на узком экране пункты навигации просто исчезали, и попасть в
   разделы с телефона было нельзя вовсе. Теперь гамбургер. */
.burger{display:none;background:transparent;color:var(--fg);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;cursor:pointer;line-height:0;font:inherit}
.burger svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;display:block}
.hnav a.on{color:var(--fg)}
@media (max-width:980px){
  .hnav{display:none}
  .burger{display:block;order:3}
  .hnav.open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:flex-start;gap:0;margin:0;padding:8px 24px 16px;
    background:var(--bg);border-bottom:1px solid var(--line)}
  .hnav.open a{font-size:16px;padding:13px 0;width:100%;border-bottom:1px solid var(--line)}
  .hnav.open a:last-child{border-bottom:none}
  header{position:sticky}
  .hrow{position:relative}
  /* Гамбургер не должен оказаться под соседом: ряд шапки тесный, и любая
     лишняя кнопка в нём накрывала его прозрачным краем — нажатие уходило
     в «Личный кабинет», а меню не открывалось. */
  .burger{position:relative;z-index:2}
}
/* Шапка на телефоне: логотип, переключатель языка, кнопка кабинета и
   гамбургер в один ряд шириной 350 px. В полном размере они туда не
   влезают — ряд переполнялся, и кнопка кабинета наезжала на гамбургер.
   Поэтому на узком экране кнопка и переключатель компактнее. Убирать их
   нельзя: вход с телефона нужен не меньше, чем с монитора. */
.lk-s{display:none}
@media (max-width:560px){
  .hrow{gap:8px}
  .hrow .btn.line{padding:8px 11px;font-size:12px}
  .langs a{padding:5px 7px;font-size:11px}
  .lk-l{display:none} .lk-s{display:inline}
}

/* ── Герой в две колонки ────────────────────────────────────────────────
   Текст слева, снимок справа — как в макете. На узком экране снимок уходит
   под текст, а не ужимается до нечитаемого. */
.hero2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:52px;align-items:center;padding:60px 0 24px}
@media (max-width:1040px){ .hero2{grid-template-columns:1fr;gap:32px;padding-top:36px} }
.hero2 h1{margin:22px 0 20px}
.hero2 .lead{margin-bottom:0}
.hero2 .cta{margin-top:30px}

/* Три подписи под героем — то, что в макете называется mini-features. */
.minis{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);
  margin-top:40px;padding-top:26px;gap:0}
.mini{padding:0 22px;border-right:1px solid var(--line)}
.mini:first-child{padding-left:0} .mini:last-child{border-right:none;padding-right:0}
.mini-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  margin-bottom:13px;border:1px solid var(--line);
  background:linear-gradient(145deg,#24272c,#17191d);color:var(--fg)}
.mini-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.mini b{display:block;font:600 11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:6px}
.mini span{font-size:13px;line-height:1.5;color:var(--muted)}
@media (max-width:620px){
  .minis{grid-template-columns:1fr;gap:20px;padding-top:22px}
  .mini{padding:0;border-right:none}
  .mini-ic{width:34px;height:34px;margin-bottom:10px}
}

/* ── Карточки продуктов ─────────────────────────────────────────────────
   Это ссылки на внутренние страницы, поэтому у них есть состояние при
   наведении и стрелка: карточка, по которой можно щёлкнуть, должна этим
   отличаться от карточки, по которой нельзя. */
.pcards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
@media (max-width:1040px){ .pcards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .pcards{grid-template-columns:1fr} }
.pcard{display:flex;flex-direction:column;padding:24px 21px 20px;border-radius:13px;
  border:1px solid var(--line);background:linear-gradient(145deg,#191c20,#141619);
  min-height:188px;text-decoration:none;
  transition:transform .18s ease,border-color .18s ease}
.pcard:hover{transform:translateY(-3px);border-color:#4a5059}
.pcard:focus-visible{outline:2px solid var(--ok);outline-offset:3px}
.pc-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line);background:linear-gradient(145deg,#30353c,#1a1d21);
  margin-bottom:18px;color:var(--fg)}
.pc-ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.pcard h3{margin:0 0 9px;font-size:17px;font-weight:650;letter-spacing:-.02em}
.pcard p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.pc-go{align-self:flex-end;margin-top:auto;padding-top:14px;color:var(--muted);font-size:17px}
.pcard:hover .pc-go{color:var(--fg)}

/* ── Полоса призыва ─────────────────────────────────────────────────────*/
.ctaband{border:1px solid var(--line);border-radius:18px;padding:40px;
  background:radial-gradient(ellipse at 92% 0%,#272a30 0,transparent 52%),var(--surface);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.ctaband h2{margin:12px 0 10px;font-size:clamp(26px,3vw,40px)}
.ctaband p{margin:0;color:var(--muted);max-width:60ch}
@media (max-width:760px){ .ctaband{padding:26px;flex-direction:column;align-items:flex-start}
  .ctaband .btn{width:100%} }

/* ── Внутренние страницы ────────────────────────────────────────────────*/
.phead{padding:62px 0 0}
.phead .label{margin-bottom:18px}
.phead h1{font-size:clamp(34px,4.6vw,60px);max-width:18ch}
.phead .lead{margin-top:18px}
.back{display:inline-flex;align-items:center;gap:7px;color:var(--muted);
  text-decoration:none;font-size:14px;margin-bottom:26px}
.back:hover{color:var(--fg)}
/* Список «что умеет» — два столбца на широком, один на узком. */
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:860px){ .feats{grid-template-columns:1fr} }
.feat{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:24px 22px}
.feat h3{margin:0 0 9px;font-size:17px;font-weight:650;letter-spacing:-.018em}
.feat p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
/* Соседние разделы внизу страницы: уходить со страницы продукта в никуда
   неправильно — внизу всегда есть, куда пойти дальше. */
.near{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){ .near{grid-template-columns:1fr} }
.nearc{border:1px solid var(--line);border-radius:12px;padding:18px 20px;text-decoration:none;
  background:var(--surface2);transition:border-color .18s ease}
.nearc:hover{border-color:#4a5059}
.nearc b{display:block;font-size:15px;font-weight:650;margin-bottom:4px}
.nearc span{font-size:13.5px;color:var(--muted)}
/* Подвал: карта сайта, чтобы с любой страницы был виден весь сайт. */
.fmap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-bottom:30px}
@media (max-width:860px){ .fmap{grid-template-columns:repeat(2,1fr);gap:22px} }
@media (max-width:460px){ .fmap{grid-template-columns:1fr} }
.fmap h4{margin:0 0 11px;font:600 11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.fmap a{display:block;padding:5px 0;color:var(--muted);text-decoration:none;font-size:14px}
.fmap a:hover{color:var(--fg)}

/* ── Переключатель языка ────────────────────────────────────────────────
   Два слова в шапке, а не выпадающий список: языков два, и список из двух
   пунктов — лишний щелчок на ровном месте. Текущий язык выделен, но
   остаётся ссылкой: так понятнее, что это переключатель, а не заголовок. */
.langs{display:flex;align-items:center;gap:2px;flex:none;
  border:1px solid var(--line);border-radius:9px;padding:3px}
.langs a{display:block;padding:5px 9px;border-radius:7px;text-decoration:none;
  font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.06em;color:var(--muted)}
.langs a:hover{color:var(--fg)}
.langs a.on{background:var(--surface);color:var(--fg)}
@media (max-width:430px){ .langs{padding:2px} .langs a{padding:5px 7px;font-size:11px} }