/* Manzana AI Labs — оформление в стиле manzanagroup.ru */
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url(fonts/ss3-cyrillic-400.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url(fonts/ss3-cyrillic-600.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap; src: url(fonts/ss3-cyrillic-700.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url(fonts/ss3-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url(fonts/ss3-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap; src: url(fonts/ss3-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --green: #78be20;
  --green-d: #569b00;
  --ink: #2b2e32;
  --text: #53565a;
  --muted: #8a8d91;
  --gray: #f1f1f2;
  --line: #e4e4e6;
  --white: #fff;
  --night: #05080c;
  --r: 24px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--text); font: 18px/1.5 "Source Sans 3", "Source Sans Pro", Helvetica, Arial, sans-serif; }
a { color: var(--green-d); }
h1, h2, h3 { color: var(--ink); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; }
h2 { font-size: clamp(30px, 4vw, 51px); line-height: 1.1; }
h3 { font-size: 22px; line-height: 1.2; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.sec { padding: 96px 0; }
.gray { background: var(--gray); }

/* кнопки-«таблетки» */
.pill { display: inline-block; border-radius: 50px; padding: 14px 28px 15px; font-size: 18px; font-weight: 600; text-decoration: none; line-height: 1.2; white-space: nowrap; }
.pill-white { background: var(--white); color: var(--ink); }
.pill-line { border: 1px solid rgba(255,255,255,.45); color: var(--white); font-weight: 400; }
.pill-green { background: var(--green); color: var(--white); font-size: 15px; padding: 10px 22px; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }

/* подпись раздела с зелёной точкой */
.label { display: flex; align-items: center; gap: 10px; color: var(--green-d); font-size: 18px; margin: 0 0 16px; }
.label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.label-light { color: var(--green); }
.sec-lead { font-size: 20px; max-width: 820px; margin: 20px 0 0; }

/* шапка: главное меню всегда видно, без скрытых пунктов */
.top { background: var(--white); border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.top-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-top: 16px; padding-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { display: block; height: 21px; width: auto; }
.brand span { color: var(--ink); font-weight: 600; font-size: 18px; padding-left: 12px; border-left: 1px solid var(--line); }
.menu { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-left: auto; }
.menu a { color: var(--ink); text-decoration: none; font-size: 16px; padding: 4px 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--green); }

/* первый экран */
.hero { background: var(--night) url(img/hero-bg.svg) center top / cover no-repeat; color: var(--white); padding: 96px 0 0; overflow: hidden; }
.hero-in { text-align: center; }
.badge { display: inline-block; border: 1px solid rgba(255,255,255,.35); border-radius: 50px; padding: 6px 16px; font-size: 15px; margin: 0 0 24px; }
.hero h1 { color: var(--white); }
.hero-sub { color: var(--white); font-size: clamp(22px, 3vw, 32px); font-weight: 600; line-height: 1.2; margin: 20px auto 0; max-width: 820px; }
.hero-lead { color: rgba(255,255,255,.75); font-size: 18px; margin: 14px auto 0; max-width: 720px; }
.hero .actions { justify-content: center; }
.hero-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 72px; padding-bottom: 96px; }
.hcard { background: var(--white); border-radius: var(--r); padding: 28px 24px 24px; color: var(--text); text-align: center; display: flex; flex-direction: column; }
.hcard:nth-child(2) { background: #eef6fd; }
.hcard:nth-child(4) { background: #f4f9ec; }
.hcard h3 { font-size: 24px; }
.hcard > p { font-size: 16px; margin: 10px 0 20px; }
.hc-vis { margin-top: auto; background: var(--white); border-radius: 16px; padding: 14px; box-shadow: 0 6px 24px rgba(20,30,40,.08); text-align: left; font-size: 14px; }
.hc-steps { display: flex; flex-direction: column; gap: 6px; }
.hc-steps span { padding: 6px 10px; border-radius: 10px; background: var(--gray); color: var(--muted); }
.hc-steps span.on { background: #eaf5dc; color: var(--green-d); }
.hc-steps span.on::after { content: " ✓"; }
.hc-cite, .hc-mask { margin: 0; color: var(--ink); }
.hc-cite b { color: var(--green-d); }
.hc-mask s { color: var(--muted); }
.hc-mask code { background: #2b2e32; color: #c9f08f; border-radius: 6px; padding: 2px 6px; font-size: 13px; }
.hc-toggles { display: flex; flex-direction: column; gap: 8px; }
.hc-toggles span { display: flex; justify-content: space-between; align-items: center; color: var(--ink); }
.hc-toggles i { width: 34px; height: 20px; border-radius: 20px; background: var(--green); position: relative; }
.hc-toggles i::after { content: ""; position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); }

/* решения */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.card { background: var(--white); border-radius: var(--r); padding: 20px 20px 28px; }
.sol h3 { margin: 24px 8px 10px; }
.sol p { margin: 0 8px; font-size: 17px; }
.sol-mock { background: var(--gray); border-radius: 16px; padding: 18px; min-height: 190px; display: flex; align-items: center; }

.mock { width: 100%; background: var(--white); border-radius: 12px; padding: 14px; font-size: 13px; color: var(--ink); box-shadow: 0 4px 18px rgba(20,30,40,.07); }
.mock p { margin: 0; }
.mock-dark { background: #1c1f23; color: #e6e7e8; }
.m-bar { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; color: #9a9da1; font-size: 12px; }
.m-bar i { width: 8px; height: 8px; border-radius: 50%; background: #45494e; }
.m-bar span { margin-left: 6px; }
.m-line { height: 6px; border-radius: 3px; background: #33373c; margin-bottom: 6px !important; }
.m-line.w80 { width: 80%; }
.m-hl { background: rgba(255,170,60,.18); border-left: 3px solid #ffaa3c; padding: 6px 8px; border-radius: 4px; margin: 8px 0 !important; }
.m-note { background: #2b2f34; border-radius: 8px; padding: 8px 10px; line-height: 1.35; }
.m-note b { color: #ff8a65; margin-right: 6px; }
.m-note span { display: block; color: var(--green); margin-top: 4px; }
.m-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.m-row:last-child { border-bottom: 0; }
.m-head { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.tag { background: #fff3e0; color: #b25e00; border-radius: 6px; padding: 2px 6px; font-size: 12px; justify-self: start; }
.score { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.score i { flex: 1; height: 8px; border-radius: 8px; background: var(--gray); overflow: hidden; }
.score b { display: block; height: 100%; background: var(--green); }
.m-call { display: flex; align-items: center; gap: 8px; color: var(--muted); margin-bottom: 10px; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #eaf5dc; }
.m-bub { background: var(--gray); border-radius: 12px 12px 12px 4px; padding: 8px 10px; max-width: 85%; margin-bottom: 8px !important; }
.m-bot { background: #eaf5dc; border-radius: 12px 12px 4px 12px; margin-left: auto !important; }
.m-quality { display: flex; gap: 14px; align-items: center; }
.ring { flex: none; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(var(--green) 0 87%, var(--gray) 0); display: grid; place-content: center; text-align: center; position: relative; }
.ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--white); }
.ring b, .ring span { position: relative; }
.ring b { font-size: 22px; line-height: 1; }
.ring span { font-size: 10px; color: var(--muted); }
.m-quality ul { list-style: none; margin: 0; padding: 0; }
.m-quality li { padding: 3px 0 3px 20px; position: relative; }
.m-quality li.ok::before { content: "✓"; position: absolute; left: 0; color: var(--green-d); font-weight: 700; }
.m-quality li.warn::before { content: "!"; position: absolute; left: 4px; color: #e07000; font-weight: 700; }
.mock-photo { height: 150px; position: relative; background: linear-gradient(160deg, #9fb7c9 0%, #c7d5de 45%, #7d8f6a 46%, #5f7151 100%); overflow: hidden; }
.mock-photo::before { content: ""; position: absolute; left: 10%; right: 10%; top: 30%; height: 2px; background: #3b4148; transform: rotate(-4deg); box-shadow: 0 18px 0 #3b4148; }
.frame { position: absolute; border: 2px solid var(--green); border-radius: 4px; }
.frame span { position: absolute; top: -20px; left: -2px; background: var(--green); color: var(--white); font-size: 11px; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.f1 { left: 18%; top: 34%; width: 22%; height: 30%; }
.f2 { right: 16%; top: 40%; width: 18%; height: 26%; border-color: #ffb547; }
.f2 span { background: #ffb547; }
.m-course b { display: block; font-size: 14px; }
.m-course span { color: var(--muted); }
.m-prog { height: 8px; background: var(--gray); border-radius: 8px; margin: 12px 0; overflow: hidden; }
.m-prog i { display: block; height: 100%; background: var(--green); }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chips span { background: var(--gray); border-radius: 20px; padding: 3px 10px; font-size: 12px; }

/* Manzana LLM — тёмный блок */
.dark { background: var(--ink); color: rgba(255,255,255,.78); }
.dark h2 { color: var(--white); }
.llm { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.llm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lcard { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 22px; }
.lcard b { display: block; color: var(--white); font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.lcard span { font-size: 16px; }

/* шаги */
.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.steps li { background: var(--gray); border-radius: var(--r); padding: 28px; }
.steps b { display: block; color: var(--green); font-size: 40px; font-weight: 600; line-height: 1; margin-bottom: 24px; }
.steps p { margin: 10px 0 0; font-size: 17px; }

/* опыт группы */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.fact { background: var(--white); border-radius: var(--r); padding: 28px; }
.fact b { display: block; color: var(--ink); font-size: clamp(34px, 4vw, 48px); font-weight: 600; line-height: 1; }
.fact span { display: block; margin-top: 10px; font-size: 17px; }
.ind-title { margin-top: 56px; }
.inds { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.inds li { background: var(--white); border-radius: 50px; padding: 10px 20px; color: var(--ink); font-size: 17px; }

/* финальный призыв */
.cta { background: var(--night) url(img/hero-bg.svg) center / cover no-repeat; color: rgba(255,255,255,.78); text-align: center; }
.cta h2 { color: var(--white); }
.cta-in p { font-size: 20px; margin: 16px 0 0; }
.cta .actions { justify-content: center; }

/* внутренние страницы */
.page-head { padding: 72px 0 48px; }
.page-head h1 { font-size: clamp(30px, 4.4vw, 51px); line-height: 1.12; max-width: 1000px; }
.doc { padding-top: 56px; }
.table-card, .desc-card { background: var(--white); border-radius: var(--r); padding: 8px; overflow: hidden; }
.desc-card { padding: 40px; margin-top: 24px; }
.desc-card h3 { margin-top: 28px; }
.desc-card p { margin: 10px 0 0; }
.info { width: 100%; border-collapse: collapse; font-size: 17px; }
.info th, .info td { text-align: left; vertical-align: top; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.info tbody tr:last-child th, .info tbody tr:last-child td { border-bottom: 0; }
.info thead th { color: var(--muted); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.info tbody th { width: 34%; color: var(--ink); font-weight: 600; }
.info td.n, .info th.n { width: 56px; color: var(--green-d); font-weight: 600; }
.info td { color: var(--ink); overflow-wrap: anywhere; }
.info p { margin: 0 0 10px; }
.info p:last-child { margin-bottom: 0; }
.todo { background: #fff3c4; padding: 1px 6px; border-radius: 4px; font-weight: 600; }

.contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ccard { background: var(--white); border-radius: var(--r); padding: 32px; }
.ccard span { display: block; color: var(--muted); font-size: 15px; margin-bottom: 8px; }
.ccard a { color: var(--ink); font-size: clamp(22px, 3vw, 30px); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ccard p { margin: 0 0 6px; color: var(--ink); }
.ccard.wide { grid-column: 1 / -1; }

/* подвал */
.foot { background: var(--white); border-top: 1px solid var(--line); padding: 48px 0 56px; font-size: 15px; }
.foot-in { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
.foot img { display: block; height: 18px; width: auto; }
.foot-tag { margin: 12px 0 0; }
.foot p { margin: 0 0 6px; overflow-wrap: anywhere; }
.foot-name { color: var(--ink); font-weight: 600; }
.foot-note { margin-top: 12px !important; }

@media (max-width: 1180px) {
  .menu { margin-left: 0; width: 100%; order: 3; }
  .top-cta { margin-left: auto; }
}
@media (max-width: 1000px) {
  .hero-cards, .steps, .facts { grid-template-columns: 1fr 1fr; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .llm { grid-template-columns: 1fr; }
}
/* узкий экран: таблица сведений перестраивается в карточки — без горизонтальной прокрутки */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .sec { padding: 64px 0; }
  .hero { padding-top: 64px; }
  .hero-cards, .steps, .facts, .grid3, .llm-grid, .contacts, .foot-in { grid-template-columns: 1fr; }
  .hero-cards { margin-top: 48px; padding-bottom: 64px; }
  .top-cta { display: none; }
  .pill { white-space: normal; }
  .desc-card { padding: 24px; }
  .info, .info tbody, .info tr, .info th, .info td { display: block; width: 100% !important; }
  .info thead { display: none; }
  .info tr { border-bottom: 1px solid var(--line); padding: 16px; }
  .info tbody tr:last-child { border-bottom: 0; }
  .info th, .info td { border: 0; padding: 0; }
  .info td.n { font-size: 14px; }
  .info td.n::before { content: "№ "; }
  .info tbody th { margin: 4px 0 8px; }
}