/* Продающий сайт biznova.uz. Без вложенности, :has(), контейнерных запросов — Chrome 109 / Firefox ESR 115. */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/onest/onest-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/onest/onest-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/onest/onest-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --moss: #4A6354; --moss-deep: #33463B; --moss-light: #9DB8A2; --moss-pale: #E4ECE5;
  --clay: #C9A27E; --clay-deep: #A9805C; --clay-pale: #F3E9DE;
  --bg: #F6F5F1; --paper: #FFFFFF; --ink: #2A2F2C; --muted: #5E6660; --line: #E2E0D8;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 "Onest", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; }
a { color: var(--moss); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--clay); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: 34px; line-height: 1.15; margin-bottom: 28px; }
h3 { font-size: 19px; line-height: 1.3; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* Шапка */
.s-head { position: sticky; top: 0; z-index: 10; background: var(--moss-deep); color: #fff; }
.s-head-in { display: flex; align-items: center; gap: 22px; height: 64px; }
.s-brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none;
  font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.s-brand .wm span { color: var(--clay); }
.s-brand-dark { color: var(--moss); }
.s-nav { display: flex; gap: 22px; margin-left: 18px; flex: 1; }
.s-nav a, .s-login { color: #DCE6DE; text-decoration: none; font-size: 15px; }
.s-nav a:hover, .s-login:hover { color: #fff; }
.s-lang { display: flex; gap: 2px; margin: 0; }
.s-lang form { margin: 0; }
.s-lang button { background: none; border: 0; color: #B9C8BD; font: 600 13px "Onest", Arial, sans-serif;
  padding: 6px 7px; cursor: pointer; border-radius: 4px; }
.s-lang button.on { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* Кнопки */
.s-btn { display: inline-block; background: var(--clay); color: #2A2118; text-decoration: none; font-weight: 700;
  padding: 15px 26px; border-radius: 10px; font-size: 17px; line-height: 1.2; }
.s-btn:hover { background: #D5B18F; }
.s-btn-sm { padding: 9px 16px; font-size: 15px; border-radius: 8px; }
.s-btn-wide { display: block; text-align: center; }
.s-btn-ghost { display: inline-block; color: #fff; text-decoration: none; font-weight: 600; padding: 15px 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.35); }
.s-btn-ghost:hover { border-bottom-color: var(--clay); }

/* Первый экран */
.s-hero { background: var(--moss-deep); color: #fff; overflow: hidden; }
.s-hero-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center;
  padding-top: 64px; padding-bottom: 80px; }
.s-hero .s-kicker { font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: 0; color: #9DB8A2; margin: 0 0 14px; max-width: 34em; }
.s-hero .s-title { font-size: 52px; line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; max-width: 13em; margin: 0; }
.s-lead { font-size: 19px; color: #D3DED6; max-width: 34em; margin: 22px 0 30px; }
.s-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.s-note { color: var(--moss-light); font-size: 15px; margin: 16px 0 0; }

.s-hero-art { position: relative; min-height: 560px; }
.s-receipt { position: absolute; left: 0; top: 0; width: 272px; background: #FFFEFA; color: #262626;
  font: 13.5px/1.45 "Courier New", Courier, monospace; padding: 22px 20px 30px; transform: rotate(-3deg);
  box-shadow: 0 22px 44px rgba(10, 25, 15, 0.38);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat,
    radial-gradient(circle 7px at 50% 100%, transparent 6px, #000 7px) bottom / 16px 10px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat,
    radial-gradient(circle 7px at 50% 100%, transparent 6px, #000 7px) bottom / 16px 10px repeat-x; }
.r-shop { text-align: center; font-weight: 700; font-size: 15px; }
.r-meta { display: flex; justify-content: space-between; font-size: 12px; color: #666;
  border-bottom: 1px dashed #999; padding-bottom: 8px; margin: 6px 0 10px; }
.r-line, .r-total { display: flex; justify-content: space-between; gap: 10px; }
.r-sub { color: #777; font-size: 12px; margin-bottom: 6px; }
.r-total { font-weight: 700; font-size: 16px; border-top: 1px dashed #999; padding-top: 8px; margin: 10px 0 6px; }
.r-thanks { text-align: center; margin-top: 14px; font-size: 12px; color: #555; }
.s-today { position: absolute; right: 0; top: 340px; width: 270px; background: var(--paper); color: var(--ink);
  border-radius: 14px; padding: 18px 20px; box-shadow: 0 18px 40px rgba(10, 25, 15, 0.35); }
.t-title { font-weight: 700; font-size: 15px; color: var(--muted); margin-bottom: 8px; }
.t-row { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--line); font-size: 15px; }
.t-row b { font-variant-numeric: tabular-nums; }
.t-warn b { color: var(--clay-deep); }

/* Разделы */
.s-sec { padding: 84px 0 0; }
.s-sub { color: var(--muted); max-width: 40em; margin: -14px 0 32px; }
.s-who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--moss); }
.s-who li { padding: 18px 18px 0 0; }
.s-who b { display: block; font-size: 18px; margin-bottom: 6px; }
.s-who span { color: var(--muted); font-size: 15.5px; }

.s-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; }
.s-grid h3 { padding-left: 16px; border-left: 3px solid var(--clay); margin-bottom: 8px; }
.s-grid p { margin: 0; padding-left: 19px; color: var(--muted); }

.s-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  counter-reset: step; }
.s-steps li { counter-increment: step; position: relative; padding-top: 60px; }
.s-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 44px; height: 44px;
  border-radius: 50%; background: var(--moss); color: #fff; font-weight: 700; font-size: 19px;
  display: flex; align-items: center; justify-content: center; }
.s-steps li::after { content: ""; position: absolute; left: 56px; right: -20px; top: 22px; border-top: 2px dashed var(--moss-light); }
.s-steps li:last-child::after { display: none; }
.s-steps b { display: block; font-size: 19px; margin-bottom: 6px; }
.s-steps span { color: var(--muted); }

/* Тарифы */
.s-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.s-pack { background: var(--paper); border-radius: 14px; padding: 24px 22px; display: flex; flex-direction: column;
  border-top: 5px solid var(--moss); }
.p-who { color: var(--muted); font-size: 15px; margin: 4px 0 16px; min-height: 3.1em; }
.p-price { margin: 0; color: var(--muted); font-size: 15px; }
.p-price b { display: block; font-size: 30px; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.p-incl { font-size: 14.5px; color: var(--moss); font-weight: 600; margin: 10px 0 14px; }
.s-pack ul { margin: 0 0 20px; padding: 14px 0 0 18px; border-top: 1px solid var(--line); font-size: 15px; flex: 1; }
.s-pack li { margin-bottom: 7px; }
.s-pack li::marker { color: var(--clay); }
.p-pick { font-weight: 600; font-size: 15px; }
.s-fine { color: var(--muted); font-size: 15px; margin: 22px 0 0; max-width: 60em; }

/* Конструктор */
.s-build { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.b-choose { background: var(--paper); border-radius: 14px; padding: 8px 26px 26px; }
.s-build fieldset { border: 0; margin: 0; padding: 18px 0 6px; border-bottom: 1px solid var(--line); }
.s-build fieldset:last-child { border-bottom: 0; }
.s-build legend { font-weight: 700; font-size: 18px; padding: 0; margin-bottom: 2px; }
.b-opt { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; cursor: pointer; }
.b-opt input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--moss); flex: none; }
.b-name { flex: 1; }
.b-name small { display: block; color: var(--muted); font-size: 14px; }
.b-price { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.b-opt.is-in { cursor: default; }
.b-opt.is-in .b-price { color: var(--moss); font-weight: 600; }
.b-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.b-nums legend { grid-column: 1 / -1; }
.b-nums label { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--muted); }
.b-nums input, .b-nums select { font: 600 17px "Onest", Arial, sans-serif; padding: 9px 10px; border: 1px solid #C9CCC4;
  border-radius: 8px; background: #fff; color: var(--ink); width: 100%; }
.b-sum { position: sticky; top: 84px; background: var(--moss-deep); color: #fff; border-radius: 14px; padding: 24px; }
.b-sum-title { font-weight: 700; font-size: 18px; margin-bottom: 12px; }
.b-lines { list-style: none; margin: 0 0 14px; padding: 0; font-size: 15px; color: #D3DED6; }
.b-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.b-lines li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.b-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 14px; }
.b-total b { font-size: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.b-period { color: var(--moss-light); font-size: 15px; min-height: 23px; margin: 4px 0 18px; text-align: right; line-height: 1.45; }
.b-hint { color: #B9C8BD; font-size: 13.5px; margin: 14px 0 0; }

/* Вопросы */
.s-faq details, .s-faq h2 { max-width: 820px; }
.s-faq details { border-top: 1px solid var(--line); }
.s-faq details:last-child { border-bottom: 1px solid var(--line); }
.s-faq summary { cursor: pointer; padding: 18px 36px 18px 0; font-weight: 600; font-size: 18px; list-style: none; position: relative; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 26px; color: var(--clay-deep); font-weight: 400; }
.s-faq details[open] summary::after { content: "\2212"; }
.s-faq details p { margin: 0 0 20px; color: var(--muted); max-width: 44em; }

.s-final { margin-top: 90px; background: var(--moss-deep); color: #fff; padding: 64px 0; }
.s-final .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.s-final h2 { margin: 0; font-size: 32px; }

.s-foot { padding: 36px 0 44px; font-size: 15px; color: var(--muted); }
.s-foot-in { display: flex; gap: 48px; flex-wrap: wrap; align-items: flex-start; }
.s-foot p { margin: 6px 0 0; }
.s-foot ul { list-style: none; margin: 0; padding: 0; }
.s-foot li { margin-bottom: 6px; }
.s-copy { margin-left: auto !important; }

/* Планшет */
@media (max-width: 1020px) {
  .s-nav { display: none; }
  .s-hero-in { grid-template-columns: 1fr; padding-bottom: 56px; }
  .s-hero-art { min-height: 560px; max-width: 520px; }
  .s-who { grid-template-columns: repeat(3, 1fr); }
  .s-packs { grid-template-columns: repeat(2, 1fr); }
  .s-build { grid-template-columns: 1fr; }
  .b-sum { position: static; }
}
/* Телефон */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .s-head-in { gap: 10px; height: 56px; }
  .s-brand { font-size: 19px; }
  .s-brand img { width: 26px; height: 26px; }
  .s-login { font-size: 14px; margin-left: auto; }
  .s-lang button { padding: 6px 5px; }
  .s-btn-sm { padding: 8px 11px; font-size: 14px; }
  .s-hero-in { padding-top: 36px; gap: 28px; }
  .s-hero .s-title { font-size: 34px; }
  .s-hero .s-kicker { font-size: 13px; }
  .s-lead { font-size: 17px; }
  .s-hero-art { min-height: 540px; }
  .s-receipt { width: 236px; font-size: 12.5px; }
  .s-today { top: 330px; width: 230px; padding: 14px 16px; }
  .s-btn-ghost { padding: 10px 4px; }
  h2 { font-size: 27px; margin-bottom: 22px; }
  .s-sec { padding-top: 60px; }
  .s-who, .s-grid, .s-steps, .s-packs { grid-template-columns: 1fr; }
  .s-who li { padding-right: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .s-steps li::after { display: none; }
  .b-choose { padding: 4px 16px 18px; }
  .b-nums { grid-template-columns: 1fr; }
  .s-final { margin-top: 64px; padding: 44px 0; }
  .s-final h2 { font-size: 25px; }
  .s-copy { margin-left: 0 !important; }
}

/* Срок оплаты над пакетами */
.s-period { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--paper); border-radius: 12px; padding: 4px;
  margin: 0 0 10px; border: 1px solid var(--line); }
.s-period button { background: none; border: 0; border-radius: 9px; padding: 9px 16px; cursor: pointer; color: var(--ink);
  font: 600 15px "Onest", Arial, sans-serif; }
.s-period button.on { background: var(--moss); color: #fff; }
.s-period i { font-style: normal; font-weight: 700; color: var(--moss); font-size: 13.5px; }
.s-period button.on i { color: #DCE6DE; }
.s-period i.best { background: var(--clay); color: #2A2118; border-radius: 6px; padding: 1px 6px; }
.s-period button.on i.best { color: #2A2118; }
.s-year { margin: 0 0 24px; color: var(--clay-deep); font-weight: 600; }
.p-old { display: block; color: var(--muted); font-size: 15px; }
.p-old[hidden], .p-when[hidden] { display: none; }
.p-when { display: block; font-size: 13.5px; color: var(--moss); }

/* Конструктор под кнопкой */
.s-build-sec { padding-top: 28px; }
.s-build-box > summary { list-style: none; cursor: pointer; }
.s-build-box > summary::-webkit-details-marker { display: none; }
.s-build-open { display: inline-flex; flex-direction: column; gap: 2px; padding: 14px 22px; border: 2px solid var(--moss);
  border-radius: 10px; color: var(--moss); font-weight: 700; font-size: 17px; }
.s-build-open small { font-weight: 400; font-size: 14px; color: var(--muted); }
.s-build-open:hover { background: var(--moss-pale); }
.s-build-box[open] > summary { margin-bottom: 22px; }
.s-ask { margin: 22px 0 0; color: var(--muted); }
.s-link { background: none; border: 0; padding: 0; font: inherit; color: var(--moss); text-decoration: underline; cursor: pointer; font-weight: 600; }

/* Чат на сайте */
.chat-fab { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: inline-flex; align-items: center; gap: 8px;
  background: var(--moss); color: #fff; border: 0; border-radius: 28px; padding: 13px 20px 13px 16px; cursor: pointer;
  font: 600 16px "Onest", Arial, sans-serif; box-shadow: 0 10px 26px rgba(20, 40, 28, 0.32); }
.chat-fab:hover { background: var(--moss-deep); }
.chat.is-open .chat-fab { display: none; }
.chat-dot { position: absolute; top: 6px; right: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--clay);
  border: 2px solid #fff; }
.chat-dot[hidden] { display: none; }
.chat-panel { position: fixed; right: 20px; bottom: 20px; z-index: 31; width: 370px; height: 540px; max-height: calc(100vh - 40px);
  background: var(--paper); border-radius: 16px; box-shadow: 0 20px 50px rgba(20, 40, 28, 0.35);
  display: flex; flex-direction: column; overflow: hidden; font-size: 15px; }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; background: var(--moss-deep);
  color: #fff; padding: 14px 16px; }
.chat-head small { display: block; color: var(--moss-light); font-size: 13px; }
.chat-head > div { flex: 1; }
.chat-partner { background: none; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; border-radius: 14px; padding: 4px 10px;
  font: 500 13px "Onest", Arial, sans-serif; cursor: pointer; margin-top: 2px; white-space: nowrap; }
.chat-partner:hover { background: rgba(255, 255, 255, 0.12); }
.chat-x { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.chat-log { position: relative; flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.chat-msg { max-width: 86%; padding: 9px 12px; border-radius: 12px; line-height: 1.45; word-wrap: break-word; }
.chat-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-msg.me { align-self: flex-end; background: var(--moss); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.typing { padding: 12px 14px; }
.dots i { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--moss-light);
  animation: chat-dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .7; } }
.chat-msg.err { color: #8A3B2E; }
.chat-msg a { color: inherit; }
.chat-quick, .chat-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-btns { align-self: flex-start; }
.chat-quick button, .chat-btns button { background: #fff; border: 1px solid var(--moss-light); color: var(--moss); border-radius: 16px;
  padding: 6px 12px; font: 500 14px "Onest", Arial, sans-serif; cursor: pointer; }
.chat-quick button:hover, .chat-btns button:hover { background: var(--moss-pale); }
.chat-quick[hidden] { display: none; }
.chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: #fff; }
.chat-form[hidden], .chat-human[hidden], .chat-human textarea[hidden] { display: none; }
.chat-form input, .chat-human input, .chat-human textarea { flex: 1; min-width: 0; font: 15px "Onest", Arial, sans-serif;
  border: 1px solid #C9CCC4; border-radius: 10px; padding: 10px 12px; color: var(--ink); width: 100%; }
.chat-send { background: var(--clay); color: #2A2118; border: 0; border-radius: 10px; padding: 0 14px; cursor: pointer;
  font: 700 15px "Onest", Arial, sans-serif; min-height: 42px; }
.chat-human { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.chat-human p { margin: 0; font-size: 14px; }
.chat-human small { color: var(--muted); font-size: 12.5px; margin-top: -4px; }
.chat-human-btns { display: flex; gap: 8px; }
.chat-cancel { background: none; border: 0; color: var(--muted); cursor: pointer; font: 15px "Onest", Arial, sans-serif; }
@media (max-width: 640px) {
  .chat-fab { right: 12px; bottom: 12px; padding: 12px 16px 12px 13px; font-size: 15px; }
  .chat-panel { right: 0; bottom: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; }
}

/* Ссылки «Для кого» на страницы сфер */
.s-who .w-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.s-who .w-link span { display: block; }
.s-who .w-link i { display: block; margin-top: 8px; font-style: normal; font-weight: 600; font-size: 15px; color: var(--moss); }
.s-who .w-link:hover b, .s-who .w-link:hover i { color: var(--clay-deep); }

/* Страницы сфер бизнеса: /kafe/, /apteka/… */
.s-seg-in { align-items: start; }
.s-crumbs { margin: 0 0 14px; font-size: 15px; color: var(--moss-light); }
.s-crumbs a { color: var(--moss-light); }
.s-seg-pack { color: var(--ink); max-width: 400px; justify-self: end; width: 100%; }
.s-seg-pack .p-name { font-size: 24px; margin: 0 0 10px; }
.p-addon { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.p-sum { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
.p-sum b { color: var(--ink); }
.s-other-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.s-other-list a { display: inline-block; background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 18px; font-weight: 600; text-decoration: none; }
.s-other-list a:hover { border-color: var(--clay); }
@media (max-width: 1020px) { .s-seg-pack { justify-self: start; } }