/* Читальня · scribe — лендинг расшифровки. Тема-движок: data-theme = mono|ink|wine.
   Три нарочито не-«ИИшных» направления. Карточки: r=12px, лёгкая выпуклость. IBM Plex. */

/* Onest — гротеск для текста/интерфейса (кириллица-native) */
@font-face{font-family:'Onest';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts2/onest-cyr-400.woff2') format('woff2');unicode-range:U+0400-04FF}
@font-face{font-family:'Onest';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts2/onest-lat-400.woff2') format('woff2');unicode-range:U+0000-024F}
@font-face{font-family:'Onest';font-weight:600;font-style:normal;font-display:swap;
  src:url('/fonts2/onest-cyr-600.woff2') format('woff2');unicode-range:U+0400-04FF}
@font-face{font-family:'Onest';font-weight:600;font-style:normal;font-display:swap;
  src:url('/fonts2/onest-lat-600.woff2') format('woff2');unicode-range:U+0000-024F}
/* Cormorant — высококонтрастный серив для крупных заголовков (премиум, редакторский) */
@font-face{font-family:'Cormorant';font-weight:600;font-style:normal;font-display:swap;
  src:url('/fonts2/cormorant-cyr-600.woff2') format('woff2');unicode-range:U+0400-04FF}
@font-face{font-family:'Cormorant';font-weight:600;font-style:normal;font-display:swap;
  src:url('/fonts2/cormorant-lat-600.woff2') format('woff2');unicode-range:U+0000-024F}
@font-face{font-family:'Cormorant';font-weight:600;font-style:italic;font-display:swap;
  src:url('/fonts2/cormorant-cyr-600i.woff2') format('woff2');unicode-range:U+0400-04FF}
@font-face{font-family:'Cormorant';font-weight:600;font-style:italic;font-display:swap;
  src:url('/fonts2/cormorant-lat-600i.woff2') format('woff2');unicode-range:U+0000-024F}
/* JetBrains Mono — метки/тайм-коды (точность = расшифровка) */
@font-face{font-family:'JetBrains Mono';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts2/jbmono-cyr-400.woff2') format('woff2');unicode-range:U+0400-04FF}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts2/jbmono-lat-400.woff2') format('woff2');unicode-range:U+0000-024F}

/* ── Тема mono (по умолчанию): строгий ч/б + микро-красный ── */
:root{
  --paper:#F7F7F5; --card-top:#FFFFFF; --card-bot:#FFFFFF; --card-bd:rgba(11,11,13,.13);
  --ink:#0B0B0D; --ink-2:#34343A; --muted:#73737A; --faint:#A6A6AC;
  --line:rgba(11,11,13,.10); --line-2:rgba(11,11,13,.17);
  --accent:#D6332B; --accent-2:#B82820; --accent-ink:#FFFFFF; --accent-soft:rgba(214,51,43,.10);
  --silver:#5E5E64;
  --dark-top:#1A1A1D; --dark-bot:#101012; --on-dark:#F5F5F3; --on-dark-2:rgba(245,245,243,.74);
  --sh:rgba(11,11,13,.18); --dark-sh:rgba(11,11,13,.55);
  --f-sans:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-display:'Cormorant','Onest',Georgia,serif;
  --f-italic:'Cormorant',Georgia,serif;
  --max:1180px; --r:12px;
}
/* ── Тема ink: тёмный чернильный графит + латунь ── */
[data-theme="ink"]{
  --paper:#0F1012; --card-top:#1C1D20; --card-bot:#161719; --card-bd:rgba(255,255,255,.10);
  --ink:#ECECEA; --ink-2:#C3C3C1; --muted:#8C8C8E; --faint:#5F5F62;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  /* монохром: «акцент» — чистый белый, characters несут иконки и волна */
  --accent:#F2F2EF; --accent-2:#DCDCD7; --accent-ink:#141417; --accent-soft:rgba(242,242,239,.10);
  --silver:#B7B7B2;
  --dark-top:#27282C; --dark-bot:#202125; --on-dark:#F1F1EF; --on-dark-2:rgba(241,241,239,.7);
  --sh:rgba(0,0,0,.5); --dark-sh:rgba(0,0,0,.6);
}
/* ── Тема wine: холодная серая бумага + винный ── */
[data-theme="wine"]{
  --paper:#E9E9EB; --card-top:#FFFFFF; --card-bot:#FAFAFB; --card-bd:rgba(21,20,26,.12);
  --ink:#15141A; --ink-2:#3A3942; --muted:#74737C; --faint:#A5A4AC;
  --line:rgba(21,20,26,.10); --line-2:rgba(21,20,26,.16);
  --accent:#7A2A3A; --accent-2:#641F2F; --accent-ink:#F3EFE6; --accent-soft:rgba(122,42,58,.10);
  --dark-top:#221F28; --dark-bot:#19171F; --on-dark:#F1F0F2; --on-dark-2:rgba(241,240,242,.72);
  --sh:rgba(21,20,26,.18); --dark-sh:rgba(21,20,26,.55);
}

*{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(--f-sans);font-size:17px;
  line-height:1.55;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ── Фирменные иконки фич ── */
.ico{width:30px;height:30px;color:var(--ink);display:block}
.ico svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cell.accent .ico,.step .ico{color:var(--ink)}
.cell.accent .ico{color:var(--on-dark)}
/* ── Waveform-паттерн (звук → текст) ── */
.wave{display:flex;align-items:center;gap:3px;height:20px}
.wave i{display:block;width:3px;border-radius:2px;background:currentColor;opacity:.9;height:7px}
.wave i:nth-child(3n){height:18px}
.wave i:nth-child(3n+1){height:11px}
.wave i:nth-child(4n){height:20px}
.wave i:nth-child(5n){height:6px}
.wave i:nth-child(7n){height:15px}

/* ── Карточка: малое скругление + лёгкая выпуклость ── */
.card{position:relative;border-radius:var(--r);border:1px solid var(--card-bd);
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));
  box-shadow:0 1px 1px rgba(0,0,0,.04), 0 14px 34px -20px var(--sh), inset 0 1px 0 rgba(255,255,255,.10)}
.card.accent{color:var(--on-dark);border-color:transparent;
  background:linear-gradient(180deg,var(--dark-top),var(--dark-bot));
  box-shadow:0 18px 44px -20px var(--dark-sh), inset 0 1px 0 rgba(255,255,255,.10)}

/* ── Masthead ── */
.masthead{border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 22px}
.brand{display:flex;align-items:center;gap:12px}
.mono-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;
  font-family:var(--f-display);font-weight:600;font-size:23px;line-height:1;color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--accent);padding-bottom:3px}
.wordmark{font-family:var(--f-mono);font-weight:400;font-size:15px;letter-spacing:.26em;text-transform:uppercase}
/* фирменный тайм-код (мотив расшифровки) */
.tc{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:var(--accent);opacity:.9}
.nav-cta{font-family:var(--f-mono);font-size:13px;letter-spacing:.03em;text-decoration:none;color:var(--accent-ink);
  background:var(--accent);padding:9px 16px;border-radius:8px}

/* ── Hero ── */
.hero{padding:62px 0 50px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center}
.hero h1{font-family:var(--f-display);font-size:clamp(50px,7.4vw,98px);line-height:.96;letter-spacing:-.015em;font-weight:600;margin:14px 0 0}
.hero h1 em{font-family:var(--f-italic);font-style:italic;font-weight:600;color:var(--accent)}
.hero .lede{font-size:19px;color:var(--ink-2);margin:22px 0 0;max-width:31em}
.cta-row{display:flex;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:var(--accent-ink);font-family:var(--f-mono);
  font-size:14px;letter-spacing:.02em;text-decoration:none;padding:15px 24px;border-radius:10px;font-weight:500;
  box-shadow:0 14px 30px -14px var(--sh);transition:transform .14s ease}
.btn:hover{transform:translateY(-2px)}
.free{font-family:var(--f-mono);font-size:13px;color:var(--muted)}

/* hero demo — расшифровка по ролям */
.demo{padding:20px}
.demo .dh{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.demo .dh .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:7px}
.turn{display:flex;gap:12px;margin:11px 0}
.role{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:13px;font-weight:500;background:var(--accent-soft);color:var(--accent)}
.turn .tx{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.turn .tx b{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase;margin-bottom:2px;font-weight:400}
.demo .sum{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.demo .sum b{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:5px;font-weight:400}

/* ── Section ── */
.section{padding:46px 0}
.col-head{display:flex;align-items:baseline;gap:14px;margin-bottom:24px}
.col-head .ix{font-family:var(--f-mono);font-size:12px;color:var(--faint)}
.col-head h2{font-size:clamp(24px,3.4vw,36px);font-weight:600;letter-spacing:-.025em;margin:0}

/* ── Bento: единый ритм — иконка/число сверху, тело прижато к низу ── */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(168px,auto);gap:16px}
.cell{padding:24px;display:flex;flex-direction:column}
.cell .ico,.cell .big{flex:0 0 auto}
.cb{margin-top:auto;padding-top:20px}
.cb .lbl{display:block;margin-bottom:9px}
.cell h3{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0 0 7px}
.cell p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.45}
.cell.accent p{color:var(--on-dark-2)}
.cell.accent .lbl{color:var(--on-dark-2)}
.cell.s2{grid-column:span 2}
.cell.r2{grid-row:span 2}
.cell.accent h3{font-size:24px}
.big{font-family:var(--f-mono);font-weight:500;font-size:44px;letter-spacing:-.02em;line-height:1;margin:0 0 4px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;padding:7px 12px;border-radius:8px;
  border:1px solid var(--line-2)}
.stack{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.stack .ln{font-family:var(--f-mono);font-size:12.5px;display:flex;gap:9px;align-items:center;color:var(--on-dark-2)}
.stack .ln::before{content:"›";color:var(--accent)}

/* ── Steps ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{padding:24px}
.step .n{font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.step h3{font-size:19px;font-weight:600;margin:12px 0 6px;letter-spacing:-.015em}
.step p{margin:0;font-size:14.5px;color:var(--muted)}

/* ── Pricing ── */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.price{padding:28px 26px;display:flex;flex-direction:column}
.ribbon{align-self:flex-start;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent);padding:4px 11px;border-radius:7px;margin-bottom:14px}
.pname{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.price.accent .pname{color:var(--on-dark-2)}
.amt{font-family:var(--f-display);font-weight:600;font-size:58px;letter-spacing:-.01em;margin:8px 0 2px;line-height:1}
.amt small{font-size:15px;color:var(--muted);letter-spacing:0}
.price.accent .amt small{color:var(--on-dark-2)}
.per{font-size:13.5px;color:var(--muted)}
.price.accent .per{color:var(--on-dark-2)}
.price ul{list-style:none;margin:18px 0 22px;padding:0;flex:1}
.price li{font-size:14.5px;padding:8px 0 8px 22px;position:relative;border-top:1px solid var(--line)}
.price.accent li{border-top-color:rgba(255,255,255,.14);color:var(--on-dark)}
.price li:first-child{border-top:0}
.price li::before{content:"›";position:absolute;left:0;color:var(--accent);font-family:var(--f-mono)}
.price.accent li::before{color:var(--accent)}
.buy{display:block;text-align:center;text-decoration:none;font-family:var(--f-mono);font-size:13px;letter-spacing:.02em;
  padding:13px;border-radius:9px;border:1px solid var(--line-2);color:var(--ink)}
.price.accent .buy{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:500}

/* ── FAQ ── */
.faq{display:flex;flex-direction:column;gap:12px}
.faq .card{padding:4px 22px}
.faq summary{font-size:18px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;letter-spacing:-.01em;padding:18px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--accent);font-size:22px}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 18px;color:var(--ink-2);font-size:15px;max-width:64ch}

/* ── CTA band ── */
.band{padding:18px 0 56px}
.band .card{padding:46px;text-align:center}
.band h2{font-family:var(--f-display);font-size:clamp(34px,5vw,58px);font-weight:600;letter-spacing:-.01em;margin:0 0 8px;color:var(--on-dark)}
.band h2 em{font-family:var(--f-italic);font-style:italic;font-weight:600;color:var(--accent)}
.band p{color:var(--on-dark-2);margin:0 0 24px}

/* ── Footer ── */
.foot{padding:30px 0 40px;color:var(--faint);font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;border-top:1px solid var(--line)}
.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px}
.foot a{text-decoration:none;color:var(--muted)}

.sticky{position:fixed;left:14px;right:14px;bottom:14px;display:none;text-align:center;text-decoration:none;
  font-family:var(--f-mono);font-size:14px;color:var(--accent-ink);background:var(--accent);padding:15px;border-radius:11px;z-index:50;
  box-shadow:0 14px 34px -12px var(--sh)}

/* переключатель тем (для предпросмотра) */
.themebar{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:99;display:flex;gap:6px;
  background:var(--card-top);border:1px solid var(--card-bd);border-radius:999px;padding:5px;box-shadow:0 10px 30px -14px var(--sh)}
.themebar a{font-family:var(--f-mono);font-size:12px;text-decoration:none;color:var(--muted);padding:6px 13px;border-radius:999px}
.themebar a.on{background:var(--accent);color:var(--accent-ink)}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:30px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .cell.r2{grid-row:auto}
  .steps,.prices{grid-template-columns:1fr}
  .price.accent{order:-1}
}
@media (max-width:560px){
  body{font-size:16px}
  .bento{grid-template-columns:1fr}
  .cell.s2{grid-column:auto}
  .nav-cta{display:none}
  .sticky{display:block}
}