/* 7k3113g.buzz — архетип bindery (переплётная), namespace bnd */

:root{
  --bg:#101314;
  --surface:#1A1E20;
  --line:#272D30;
  --red:#CF1A2C;
  --gold:#EAC273;
  --green:#34D79A;

  --ink:#E8EDEF;
  --ink-dim:#9BA7AC;
  --radius:9px;
  --spine:26px;
  --display:"Rubik Doodle Shadow",system-ui,sans-serif;
  --body:"Lora",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.66;
  -webkit-text-size-adjust:100%;
}

.bnd-wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- шапка-переплёт: две строки, между ними линия фальца ---------- */

.bnd-head{
  position:sticky;top:0;z-index:40;
  background:rgba(16,19,20,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(7px);
}
.bnd-head__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:11px 0 9px;
}
.bnd-mark{
  font-family:var(--display);
  font-size:27px;line-height:1;
  color:var(--ink);text-decoration:none;letter-spacing:.5px;
}
.bnd-mark span{color:var(--red)}
.bnd-head__note{
  font-size:12.5px;color:var(--ink-dim);letter-spacing:.4px;
}

/* линия фальца с точками прошивки */
.bnd-fold{
  height:0;border-top:1px dashed var(--line);
  position:relative;
}
.bnd-fold::before{
  content:"";position:absolute;left:0;right:0;top:-3px;height:5px;
  background-image:radial-gradient(circle,var(--gold) 0 1.4px,transparent 1.6px);
  background-size:26px 5px;background-position:0 50%;
  opacity:.5;
}
.bnd-head__bottom{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:9px 0 11px;
}
.bnd-quire-nav{
  display:flex;gap:16px;flex-wrap:wrap;
  font-size:13.5px;
}
.bnd-quire-nav a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid transparent}
.bnd-quire-nav a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.bnd-keys{display:flex;gap:9px;flex-shrink:0}

.bnd-btn{
  display:inline-block;
  font-family:var(--body);
  font-size:14.5px;font-weight:600;line-height:1;
  padding:11px 17px;border-radius:var(--radius);
  text-decoration:none;white-space:nowrap;
  transition:transform .12s ease,box-shadow .12s ease;
}
.bnd-btn--main{background:var(--red);color:#fff;border:1px solid var(--red)}
.bnd-btn--side{background:transparent;color:var(--ink);border:1px solid var(--red)}
.bnd-btn:hover{transform:translateY(-1px)}
.bnd-btn--main:hover{box-shadow:0 6px 18px rgba(207,26,44,.32)}
.bnd-btn--wide{padding:15px 30px;font-size:16px}

/* ---------- тетради: по 3–4 секции, между ними фальц ---------- */

.bnd-quire{
  padding:34px 0 30px;
  border-bottom:1px dashed var(--line);
  position:relative;
}
.bnd-quire::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:5px;
  background-image:radial-gradient(circle,var(--line) 0 1.6px,transparent 1.8px);
  background-size:34px 5px;
}
.bnd-quire:last-of-type{border-bottom:0}
.bnd-quire:last-of-type::after{display:none}

.bnd-quire__tag{
  font-family:var(--display);
  font-size:12px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--gold);opacity:.8;margin:0 0 6px;
}

/* ---------- первый экран ---------- */

.bnd-hero{padding:38px 0 8px}
.bnd-hero h1{
  font-family:var(--display);
  font-size:40px;line-height:1.16;margin:0 0 16px;
  padding-left:var(--spine);
  border-left:3px solid var(--red);
}
.bnd-lede{font-size:18.5px;color:#D4DCDF;margin:0 0 24px;max-width:78ch}
.bnd-num{color:var(--gold)}
.bnd-em{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}

.bnd-kpi{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 0 26px;
}
.bnd-kpi__cell{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:var(--radius);
  padding:13px 13px 12px;
}
.bnd-kpi__val{
  font-family:var(--display);
  font-size:25px;line-height:1.1;color:var(--gold);display:block;margin-bottom:4px;
}
.bnd-kpi__cap{font-size:12.5px;color:var(--ink-dim);line-height:1.4}

.bnd-hero__cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0 8px}
.bnd-hero__cta p{margin:0;font-size:13.5px;color:var(--ink-dim)}

/* ---------- заголовки с корешковым отступом ---------- */

h2.bnd-h2{
  font-family:var(--display);
  font-size:26px;line-height:1.24;margin:30px 0 12px;
  padding-left:var(--spine);
  position:relative;
}
h2.bnd-h2::before{
  content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:3px;
  background:linear-gradient(180deg,var(--red),var(--gold));
  border-radius:2px;
}
h3.bnd-h3{
  font-family:var(--body);
  font-size:18px;font-weight:600;margin:22px 0 8px;color:var(--gold);
  padding-left:14px;border-left:2px solid var(--line);
}
p{margin:0 0 14px}
.bnd-quire p{max-width:82ch}

/* ---------- листы, карточки, врезки ---------- */

.bnd-sheet{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;margin:18px 0;
  box-shadow:inset 3px 0 0 var(--line);
}
.bnd-sheet h3.bnd-h3{margin-top:4px}

.bnd-leaves{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
.bnd-leaf{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:15px 16px;
  border-top:2px solid var(--red);
}
.bnd-leaf h3.bnd-h3{border:0;padding:0;margin:0 0 6px}
.bnd-leaf p{margin:0;font-size:15px;color:#C7D0D4}

.bnd-stitch{
  list-style:none;padding:0;margin:14px 0;
}
.bnd-stitch li{
  position:relative;padding-left:24px;margin-bottom:9px;
}
.bnd-stitch li::before{
  content:"";position:absolute;left:4px;top:.62em;
  width:8px;height:2px;background:var(--gold);
}

/* ---------- таблицы в обёртке ---------- */

.bnd-scroll{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:var(--radius)}
table.bnd-table{width:100%;border-collapse:collapse;min-width:560px;font-size:15px}
.bnd-table caption{
  caption-side:top;text-align:left;padding:12px 14px 10px;
  font-size:13px;color:var(--ink-dim);background:var(--surface);
}
.bnd-table th,.bnd-table td{
  padding:11px 14px;border-top:1px solid var(--line);text-align:left;vertical-align:top;
}
.bnd-table thead th{
  background:#161A1C;color:var(--gold);font-weight:600;font-size:13.5px;
  letter-spacing:.3px;border-top:0;
}
.bnd-table tbody tr:nth-child(even){background:rgba(39,45,48,.34)}
.bnd-yes{color:var(--green)}

/* ---------- SVG ---------- */

.bnd-plate{
  margin:20px 0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px;
}
.bnd-plate svg{display:block;width:100%;max-width:100%;height:auto}
.bnd-plate figcaption{margin-top:10px;font-size:13px;color:var(--ink-dim)}

/* ---------- FAQ ---------- */

.bnd-faq details{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:9px;padding:0 16px;
}
.bnd-faq summary{
  cursor:pointer;padding:13px 0;font-weight:600;font-size:16px;list-style:none;
}
.bnd-faq summary::-webkit-details-marker{display:none}
.bnd-faq summary::before{content:"— ";color:var(--red)}
.bnd-faq details[open] summary{color:var(--gold)}
.bnd-faq p{margin:0 0 14px;font-size:15.5px;color:#C7D0D4}

/* ---------- отзыв ---------- */

.bnd-note{
  border-left:3px solid var(--gold);
  background:var(--surface);
  padding:16px 18px;margin:20px 0;border-radius:0 var(--radius) var(--radius) 0;
}
.bnd-note__who{display:block;margin-top:9px;font-size:13px;color:var(--ink-dim)}

/* ---------- подвал ---------- */

.bnd-foot{
  border-top:1px solid var(--line);
  background:#0D1011;margin-top:26px;padding:26px 0 34px;
  font-size:13.5px;color:var(--ink-dim);
}
.bnd-foot p{max-width:none;margin:0 0 9px}
.bnd-foot__age{color:var(--gold)}

/* ---------- 640px ---------- */

@media (max-width:640px){
  body{font-size:16px}
  .bnd-wrap{padding:0 14px}
  .bnd-head__top{padding:9px 0 7px}
  .bnd-mark{font-size:21px}
  .bnd-head__note{display:none}
  .bnd-head__bottom{flex-direction:column;align-items:stretch;gap:9px}
  .bnd-quire-nav{justify-content:space-between;font-size:12.5px;gap:10px}
  .bnd-keys{display:flex;gap:8px}
  .bnd-keys .bnd-btn{flex:1 1 0;text-align:center;padding:10px 8px;font-size:13.5px}
  .bnd-hero h1{font-size:27px;padding-left:14px}
  h2.bnd-h2{font-size:21px;padding-left:14px}
  :root{--spine:14px}
  .bnd-lede{font-size:16.5px}
  .bnd-kpi{grid-template-columns:repeat(2,1fr)}
  .bnd-kpi__cell:last-child{grid-column:1 / -1}
  .bnd-leaves{grid-template-columns:1fr}
  .bnd-sheet{padding:15px 15px}
  .bnd-btn--wide{width:100%;text-align:center}
}