{# Оформление витрины — направление «Acta» (выбрано 02.09.2026): бумага и
   чернила. Тёплый фон, серифная Piazzolla в заголовках, Archivo в тексте,
   фиолетовые «чернила» кнопок и сургучная точка. Подключается ПОСЛЕ
   _tokens.html и переопределяет его токены на body: кабинет остаётся в своём
   языке (Pragmata, синий акцент), витрина живёт в своём. #}
<style>
/* Палитра, шрифты и радиусы «Acta» живут в _tokens.html — общие с кабинетом.
   Здесь только то, чем витрина отличается: крупнее кегль, бумажная подложка
   цитаты, тень у «акта» — и раскладка страницы-витрины, которой в кабинете нет. */
body{--accent-soft:#F6F0E4;--shadow:0 18px 40px rgba(60,47,26,.10);
  font-size:16px;line-height:1.55}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body{--accent-soft:rgba(106,92,168,.18);--shadow:0 18px 40px rgba(0,0,0,.35)}
}
:root[data-theme="dark"] body{--accent-soft:rgba(106,92,168,.18);--shadow:0 18px 40px rgba(0,0,0,.35)}

/* ---------- база ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:0;text-wrap:pretty}
h1{font-size:clamp(38px,4.4vw,62px);line-height:1.06;margin:0}
h2{font-size:clamp(28px,2.8vw,38px);line-height:1.15;margin:0 0 12px}
h3{font-size:21px;font-weight:600;line-height:1.25;margin:0 0 10px}
.prose{font-size:15px;line-height:1.55;color:var(--muted);margin:0}
.lead{font-size:19px;line-height:1.55;color:var(--muted);margin:0;max-width:60ch}
.hint{font-size:15px;line-height:1.5;color:var(--muted2)}
.label{font-size:12px;letter-spacing:.1em;color:var(--muted2);font-weight:700;text-transform:uppercase}
.eyebrow{font-size:13px;letter-spacing:.14em;color:var(--wax);font-weight:600;text-transform:uppercase}
.num{font-family:var(--serif);font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}

/* Только горизонтальное центрирование. Сокращение `margin:0 auto` обнуляло бы
   и верхний отступ, а класс сильнее селектора `section` — из-за этого все
   секции слипались в одну простыню. */
.wrap{max-width:1296px;margin-left:auto;margin-right:auto;padding:0 72px}
main{padding-bottom:84px}
section{margin-top:76px}

/* Кнопки и карточки поверх токенов кабинета: прямые углы, плотный вес. */
.btn{height:44px;padding:0 22px;font-size:15px;font-weight:500;border-radius:var(--r-btn)}
.btn.lg{height:50px;padding:0 30px;font-size:17px}
.btn.sm{height:36px;padding:0 16px;font-size:14px;border-radius:var(--r-btn)}
.btn.out{color:var(--fg);border-color:var(--btn-line)}
.btn.out:hover{border-color:var(--muted2)}
.btn.paper{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn.paper:hover{background:#fff;border-color:#fff}
.card{padding:26px 28px}
.tag{border-radius:3px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- шапка ---------- */
.site-bar{position:sticky;top:0;z-index:20;background:var(--glass);
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%)}
.site-bar .wrap{display:flex;align-items:center;gap:28px;min-height:72px;padding-top:10px;padding-bottom:10px}
.site-brand{font-size:26px;flex:none;color:var(--fg)}
.site-nav{display:flex;gap:26px;font-size:15px;color:var(--muted);flex-wrap:wrap}
.site-nav a:hover{color:var(--fg)}
.site-bar .spacer{flex:1}
.site-login{font-size:15px;color:var(--muted);flex:none}
.site-login:hover{color:var(--fg)}
/* ---------- первый экран ---------- */
.hero{margin-top:84px;display:grid;grid-template-columns:minmax(0,1fr) 460px;
  gap:56px;align-items:start}
.hero.one{grid-template-columns:minmax(0,1fr);max-width:820px}
.hero-txt{display:flex;flex-direction:column;gap:26px;max-width:640px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .hint{max-width:54ch}
.hero.one .hint{margin-top:14px}

/* «Акт» одного дня: лист с цифрами, фразой ИИ и круглой печатью. */
.acta{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:30px 32px;display:flex;flex-direction:column;gap:18px}
.acta-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.acta-h b{font-family:var(--serif);font-size:19px;font-weight:600}
.acta-h span{font-size:13px;color:var(--muted2);white-space:nowrap}
.acta-nums{display:flex;gap:24px;flex-wrap:wrap}
.acta-nums div{display:flex;flex-direction:column;gap:4px}
.acta-nums small{font-size:12px;letter-spacing:.08em;color:var(--muted2);text-transform:uppercase}
.acta-nums b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.acta-quote{background:var(--accent-soft);border-radius:3px;padding:14px 16px;
  font-family:var(--serif);font-size:16px;line-height:1.5;font-style:italic;color:var(--fg);margin:0}
.acta-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:4px}
.acta-foot span{font-size:13px;color:var(--muted2)}
.seal{flex:none}
.seal text{font-size:8px;letter-spacing:.14em;fill:var(--wax);font-family:var(--sans)}

/* Четыре обещания одной полосой: «без кнопки», «снимки выключены», «таблица»,
   «данные в ЕС». Полоса, а не карточки: это факты, а не разделы. */
.strip{display:flex;margin-top:72px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--card)}
.strip div{flex:1;display:flex;gap:12px;align-items:center;padding:22px 26px;
  border-right:1px solid var(--line-soft);font-size:14.5px;line-height:1.35;color:var(--fg)}
.strip div:last-child{border-right:0}
.strip svg{flex:none}

/* ---------- заголовки разделов ---------- */
.sec-lead{max-width:780px;display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
.sec-lead p{font-size:17px;line-height:1.6;color:var(--muted);margin:0;text-wrap:pretty}
.sec-lead .eyebrow{margin-bottom:2px}
.sec-lead.center{text-align:center;margin-left:auto;margin-right:auto;align-items:center}

/* ---------- что видит программа → что пишет ИИ ---------- */
.see{display:flex;gap:28px;align-items:stretch}
.see-log{flex:1;display:flex;flex-direction:column;gap:12px}
.see-log .row{display:flex;justify-content:space-between;gap:16px;font-size:15px;color:var(--muted);
  border-bottom:1px solid var(--line-soft);padding-bottom:8px}
.see-log .row.last{border-bottom:0;color:var(--muted2);padding-bottom:0}
.see-arrow{flex:none;display:flex;align-items:center;color:var(--wax)}
.ai{flex:1;background:var(--band);color:var(--band-fg);border-radius:var(--r-card);
  padding:24px 28px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.ai-tag{align-self:flex-start;background:var(--accent);color:#FAF6EE;font-size:11.5px;
  letter-spacing:.12em;padding:5px 10px;border-radius:3px;font-weight:600;text-transform:uppercase}
.ai-quote{font-family:var(--serif);font-size:23px;line-height:1.45;font-style:italic;margin:0;
  animation:ai-reveal 8s ease-in-out infinite}
.ai-quote i{display:inline-block;width:2px;height:22px;background:var(--wax-soft);
  margin-left:6px;vertical-align:-3px;animation:caret-blink 1.1s steps(1) infinite}
.ai-cap{font-size:13.5px;color:var(--band-muted)}
/* Фраза видна с первого кадра (и на скриншоте), а «перепечатывается» в конце
   цикла — так живой блок не встречает человека пустым чёрным прямоугольником. */
@keyframes ai-reveal{0%,78%{opacity:1;transform:none}86%,92%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes caret-blink{0%,45%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.ai-quote{animation:none}.ai-quote i{display:none}}

/* ---------- как работает: три шага ---------- */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.steps3 .card{display:flex;flex-direction:column;gap:10px}
.steps3 .n{font-size:13px;letter-spacing:.1em;color:var(--wax);font-weight:600}
.steps3 h3{margin:0}

/* ---------- письмо ---------- */
.mail-split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.mail-split h2{margin-top:6px}
.ticks{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;
  font-size:15px;color:var(--muted)}
.ticks li{padding-left:24px;position:relative}
.ticks li::before{content:'';position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:1px;background:var(--wax)}
.mail{padding:22px 24px}
.mail-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.mail-subj{font-family:var(--serif);font-size:17px;font-weight:600}
.mail-top .cnt{font-size:12px;color:var(--muted2);letter-spacing:.06em;text-transform:uppercase}
.mail-lead{font-size:13.5px;color:var(--muted2);margin:12px 0 4px}
.mail-tab{width:100%;border-collapse:collapse;font-size:14px}
.mail-tab th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);
  font-weight:600;padding:8px 0}
.mail-tab td{padding:8px 0;border-top:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
.mail-ai{border-left:3px solid var(--accent);padding:2px 0 2px 12px;margin-top:12px}
.mail-ai-who{font-size:13px;font-weight:600}
.mail-ai .prose{font-size:14px}
/* Кнопка в мокапе никуда не ведёт — это картинка письма, а не письмо. */
.mail-btn{margin-top:20px;cursor:default}

/* ---------- приватность, вопросы ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.grid .card h3{font-size:19px}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.faq h3{font-size:19px}

/* ---------- страница про данные ---------- */
.legal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.legal h2{font-size:21px;font-weight:600;margin:0 0 10px}
.legal .prose{max-width:70ch}
.law{background:var(--accent-soft);border-color:transparent}
.law .prose{color:var(--fg);max-width:78ch}
/* Шаблон уведомления — текстом на подложке: его копируют целиком, поэтому он
   должен выглядеть как готовый абзац, а не как часть страницы. */
.notice{margin:16px 0 0;padding:16px 18px;background:var(--card);border:1px solid var(--line);
  border-radius:3px;font-size:14.5px;line-height:1.6;color:var(--fg)}

/* ---------- тарифы ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch;
  margin-top:20px}
.plan{display:flex;flex-direction:column;gap:8px;position:relative;padding:28px}
.plan.best{border:2px solid var(--accent);padding:27px}
.best-tag{position:absolute;top:-13px;left:24px;background:var(--accent);color:#FAF6EE}
.plan-seats{font-size:15px;color:var(--muted2)}
.plan-price{font-family:var(--serif);font-size:40px;font-weight:600;line-height:1.1}
.plan-price small{font-family:var(--sans);font-size:17px;font-weight:400;color:var(--muted2)}
.price-tax{margin:20px 0 0;font-size:14px;color:var(--muted2);text-align:center}
.plan .btn{margin-top:10px;align-self:stretch}

/* ---------- полоса «Todo a su hora» ---------- */
.band{background:var(--band);color:var(--band-fg);margin-top:84px}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding-top:64px;padding-bottom:64px}
.band h2{font-size:40px;margin:0 0 8px;color:var(--band-fg)}
.band h2 .dot{color:var(--wax-soft)}
.band p{font-size:16px;color:var(--band-muted);margin:0}

/* ---------- загрузки ---------- */
.dl-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:14px 4px;border-bottom:1px solid var(--line-soft)}
.dl-row:last-child{border-bottom:0}
.dl-sys{font-size:16px;font-weight:500}
.dl-note{font-size:12.5px;color:var(--muted2);margin-top:2px}
.dl-size{font-size:13px;color:var(--muted2)}
.dl-ver{font-variant-numeric:tabular-nums;color:var(--fg)}
.steps{margin:12px 0 0;padding-left:20px;font-size:15px;line-height:1.7;color:var(--muted)}
.steps code{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--soft);
  padding:2px 7px;border-radius:3px;font-size:13px;color:var(--fg)}
.center{text-align:center}

/* ---------- подвал ---------- */
.site-foot{padding:24px 0 40px;color:var(--muted2);font-size:13.5px}
.site-foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.site-foot .links{display:flex;gap:24px;flex-wrap:wrap}
.site-foot a:hover{color:var(--fg)}
.foot-brand{font-size:17px;color:var(--muted)}

@media (max-width:1100px){
  .wrap{padding:0 40px}
  .hero{grid-template-columns:minmax(0,1fr) 400px;gap:40px}
  .site-nav{gap:18px}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:36px}
  .acta{max-width:520px}
  .strip{flex-wrap:wrap}
  .strip div{flex:1 1 50%;border-bottom:1px solid var(--line-soft)}
  .strip div:nth-child(2n){border-right:0}
  .strip div:nth-last-child(-n+2){border-bottom:0}
  .see{flex-direction:column}
  .see-arrow{justify-content:center}
  .see-arrow svg{transform:rotate(90deg)}
  .mail-split{grid-template-columns:1fr;gap:18px}
  .steps3,.grid,.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .legal{grid-template-columns:1fr}
  .band .wrap{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  section{margin-top:48px}
  .hero{margin-top:36px}
  .wrap{padding:0 18px}
  .site-bar .wrap{flex-wrap:wrap;gap:12px 18px}
  .site-brand{font-size:24px}
  /* Навигацию не прячем — она прокручивается, как и разделы в кабинете. */
  .site-nav{overflow-x:auto;flex-wrap:nowrap;max-width:100%;scrollbar-width:none;order:5;flex:1 1 100%}
  .site-nav a{white-space:nowrap}
  .site-nav::-webkit-scrollbar{display:none}
  .hero-cta .btn{flex:1 1 100%}
  .acta{padding:22px 20px}
  .acta-nums{gap:16px}
  .strip{margin-top:48px}
  .strip div{flex:1 1 100%;border-right:0}
  .strip div:nth-last-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .strip div:last-child{border-bottom:0}
  .steps3,.grid,.plans,.faq{grid-template-columns:1fr}
  .band{margin-top:56px}
  .band .wrap{padding-top:44px;padding-bottom:44px}
  .band h2{font-size:32px}
  .band .btn{align-self:stretch}
  .ai-quote{font-size:20px}
  .card{padding:20px}
  .plan{padding:22px}
  .plan.best{padding:21px}
  .dl-row{grid-template-columns:1fr auto;gap:8px 14px}
  .dl-row .btn,.dl-row .tag{grid-column:1 / -1;justify-self:start}
}
</style>