/* Бунт Академія — спільні стилі.
   Система та сама, що й у клубі (Inter Tight, газетні лінійки, великі заокруглення),
   але кольори Академії: індиго, оранжевий, чорний, білий + «скотчі» зі старого сайту. */

:root {
  --indigo: #2346f0;
  --indigo-dark: #1733c4;
  --orange: #ffae00;
  --orange-dark: #f09a00;
  --black: #0d0d0f;
  --ink: #131619;
  --muted: #6e7680;
  --bg: #f4f5f8;
  --white: #ffffff;
  --rule: #131619;

  /* кольори «скотчів» з банерів */
  --tape-blue: #c9dbff;
  --tape-cream: #f3ead8;
  --tape-yellow: #ffe9a3;

  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --text: "Inter", system-ui, sans-serif;

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 40px);
  --radius: 28px;

  /* «об'ємні» картки: м'яка тінь, при наведенні картка піднімається */
  --shadow: 0 1px 2px rgba(13,13,15,.06), 0 14px 32px -14px rgba(13,13,15,.28);
  --shadow-up: 0 2px 4px rgba(13,13,15,.06), 0 26px 50px -18px rgba(13,13,15,.38);
  --lift: transform .25s ease, box-shadow .25s ease;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.012em;
  word-spacing: .06em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- Шапка ---------- */

.header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 18px; padding-bottom: 14px;
}

.logo {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: 1.375rem; line-height: 1; letter-spacing: -0.01em; text-decoration: none;
  white-space: nowrap;
}
.logo__a { color: var(--indigo); }
.logo__b { color: var(--orange); }

.nav { display: flex; gap: 24px; }
.nav a {
  font-family: var(--display); font-weight: 700; font-size: .9375rem;
  text-decoration: none; color: var(--ink);
}
.nav a:hover { color: var(--indigo); }

/* газетна лінійка під шапкою */
.masthead-rule {
  border-top: 3px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 7px 0 6px; margin-top: 2px;
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--display); font-weight: 800; font-size: .6875rem;
  letter-spacing: .16em; text-transform: uppercase;
}
.masthead-rule a { text-decoration: none; }
.masthead-rule a:hover { color: var(--indigo); }

@media (max-width: 720px) {
  .nav { display: none; }
}

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 56px; padding: 14px 28px;
  font-family: var(--display); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em;
  text-decoration: none; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn::after { content: "→"; transition: transform .15s ease; }
a:hover > .btn::after, .btn:hover::after { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn--orange { background: var(--orange); color: var(--black); }
.btn--orange:hover { background: var(--orange-dark); }
@media (max-width: 640px) { .btn { width: 100%; } }

/* ---------- «Скотч» — стікери зі старого сайту ---------- */

.tape {
  display: inline-block; padding: 7px 14px 8px;
  font-family: var(--display); font-weight: 700; font-size: .9375rem; line-height: 1.15;
  color: var(--black); background: var(--tape-blue);
  transform: rotate(-1.5deg);
  clip-path: polygon(0 6%, 3% 0, 97% 4%, 100% 0, 99% 50%, 100% 96%, 96% 100%, 3% 95%, 0 100%, 1% 50%);
  white-space: nowrap;
}
.tape--cream { background: var(--tape-cream); transform: rotate(1deg); }
.tape--yellow { background: var(--tape-yellow); transform: rotate(-.5deg); }
.tape--indigo { background: var(--indigo); color: var(--white); }


/* ---------- Перший екран: один банер, Роман дивиться на свою фразу ---------- */

.hero { padding: 20px 0 40px; }

.hero__banner {
  position: relative; overflow: hidden;
  border-radius: var(--radius); background: var(--black); color: var(--white);
  box-shadow: var(--shadow-up);
}

.hero__photo { margin: 0; aspect-ratio: 16 / 10; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 0 30%; }

.hero__text { position: relative; padding: 4px 24px 28px; }

.hero__quote { margin: 0; }
.hero__quote p {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: clamp(1.5rem, 6.4vw, 2.25rem); line-height: 1.22;
  letter-spacing: -0.005em; word-spacing: .04em;
}
.hero__quote p::before {
  content: "“"; display: block; height: .5em; margin-bottom: .1em;
  font-size: 3.2em; line-height: 1; font-style: normal; font-weight: 900; color: var(--orange);
}
.hero__quote .mark {
  text-decoration: underline; text-decoration-color: var(--orange);
  text-decoration-thickness: .09em; text-underline-offset: .14em; text-decoration-skip-ink: none;
}
.hero__quote footer { margin-top: 22px; }
.hero__quote .tape { font-size: 1.125rem; font-weight: 800; padding: 8px 16px 10px; }

.hero__cta { margin-top: 28px; }

@media (min-width: 900px) {
  .hero { padding: 32px 0 56px; }
  .hero__banner { min-height: 520px; display: flex; align-items: center; }
  .hero__photo { position: absolute; inset: 0 auto 0 0; width: 62%; aspect-ratio: auto; }
  .hero__photo img { object-position: 0 35%; }
  .hero__photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 55%, var(--black) 98%);
  }
  .hero__text { margin-left: 44%; padding: 56px 56px 56px 0; }
}

/* ---------- Розділ ---------- */

.section { padding: 40px 0 56px; background: var(--bg); }

.section-head {
  border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 12px 0 10px; margin-bottom: 22px;
}
.section-head h2 { font-size: clamp(1.625rem, 7.2vw, 3rem); text-transform: uppercase; letter-spacing: -0.015em; }
.nowrap { white-space: nowrap; }

/* ---------- Афіші лекцій (газетний анонс) ---------- */

.posters { display: grid; gap: 18px; }

.poster {
  display: grid; gap: 22px;
  padding: 24px 22px;
  border-radius: var(--radius);
  background: var(--black); color: var(--white);
  text-decoration: none;
  box-shadow: var(--shadow); transition: var(--lift);
}
.poster:hover { transform: translateY(-4px); box-shadow: var(--shadow-up); }

/* статус: пульсуюча точка = прямий ефір, кіноплівка = запис */
.status {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 800; font-size: .8125rem;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.live-dot { position: relative; width: 12px; height: 12px; flex: none; border-radius: 50%; background: #ff3b30; }
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ff3b30;
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
.status svg { width: 22px; height: 22px; flex: none; color: var(--indigo); }

.poster__when {
  display: grid; gap: 14px;
  padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.18);
  font-family: var(--display);
}
.poster__date { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.poster__day { font-size: 3.5rem; font-weight: 900; line-height: .85; letter-spacing: -0.02em; color: var(--orange); }
.poster__month { font-weight: 800; font-size: 1.375rem; letter-spacing: -0.01em; }
.poster__time { font-weight: 600; font-size: 1rem; opacity: .7; }

.poster__author {
  font-family: var(--display); font-weight: 800; font-size: .8125rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px;
}

.poster__title { font-size: clamp(2.25rem, 10vw, 4rem); letter-spacing: -0.015em; line-height: 1; }
.poster__title--blue { color: #7d97ff; }

.poster__deck { margin-top: 14px; font-size: 1.1875rem; line-height: 1.5; color: rgba(255,255,255,.82); max-width: 46ch; }

.poster__meta {
  margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px 0;
  font-family: var(--display); font-weight: 600; font-size: .9375rem; color: rgba(255,255,255,.6);
}
.poster__meta { flex-direction: column; }
@media (min-width: 640px) {
  .poster__meta { flex-direction: row; }
  .poster__meta span + span::before { content: "·"; margin: 0 10px; }
}

.poster__foot { display: grid; }
.poster .btn { justify-self: start; }

/* лекція в записі — світла афіша */
.poster--light { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 2px var(--black), var(--shadow); }
.poster--light:hover { box-shadow: inset 0 0 0 2px var(--black), var(--shadow-up); }
.poster--light .poster__when { border-color: rgba(0,0,0,.12); }
.poster--light .poster__deck { color: var(--muted); }
.poster--light .poster__author { color: var(--indigo); }
.poster__title .accent { color: var(--indigo); }

/* «Готуємо нові лекції» */
.soon {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 22px; border-radius: var(--radius);
  border: 2px dashed rgba(19,22,25,.3); text-decoration: none;
}
.soon h3 { font-size: clamp(1.5rem, 6.4vw, 2.25rem); text-transform: uppercase; letter-spacing: -0.015em; }
.soon h3 span { color: var(--indigo); }
.soon__more { font-family: var(--display); font-weight: 800; color: var(--indigo); }
.soon__more::after { content: " →"; }
.soon:hover { border-color: var(--indigo); }

@media (max-width: 640px) {
  .poster .btn { justify-self: stretch; }
}

@media (min-width: 900px) {
  .posters { gap: 24px; }
  .poster {
    grid-template-columns: 236px 1fr; column-gap: 44px; row-gap: 28px;
    padding: 44px 48px 40px;
  }
  .poster__when {
    grid-row: 1 / span 2; align-content: start; gap: 18px;
    padding: 4px 40px 0 0; border-bottom: 0; border-right: 1px solid rgba(255,255,255,.18);
  }
  .poster--light .poster__when { border-color: rgba(0,0,0,.12); }
  .poster__date { flex-direction: column; align-items: flex-start; gap: 6px; }
  .poster__day { font-size: 6.5rem; }
  .poster__foot { justify-items: start; }
  .soon { padding: 28px 48px; }
}

@media (prefers-reduced-motion: reduce) { .live-dot::after { animation: none; } }

/* ---------- Підвал ---------- */

.footer { background: var(--black); color: var(--white); padding: 56px 0 32px; }

.footer__grid { display: grid; gap: 28px; margin-top: 32px; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }

.footer h3 {
  font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 12px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer a { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; text-decoration: none; display: inline-block; padding: 6px 0; }
.footer a:hover { color: var(--orange); }
.footer .logo { font-weight: 900; font-size: 1.375rem; padding: 0; }
.footer__mail { font-size: 1.1875rem !important; }

.socials { display: flex; gap: 12px; }
.socials a { width: 52px; height: 52px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.socials a:hover { background: var(--indigo); color: var(--white); }
.socials svg { width: 24px; height: 24px; fill: currentColor; }

.footer__legal {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15);
  font-size: .875rem; color: rgba(255,255,255,.55);
  display: flex; flex-wrap: wrap; gap: 4px 20px;
}

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* =====================================================================
   СТОРІНКА ЛЕКЦІЇ
   ===================================================================== */

.btn--black { background: var(--black); color: var(--white); }
.btn--black:hover { background: #2a2a2e; }

/* ---------- Перший екран лекції: разом із кнопкою вміщується в екран ---------- */

.lhero { padding: 16px 0 4px; }

.lhero__card {
  border-radius: var(--radius); background: var(--black); color: var(--white);
  padding: 20px 20px 24px; box-shadow: var(--shadow-up);
}
.lhero__card--light { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 2px var(--black), var(--shadow); }

.lhero__top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.18);
}
.lhero__card--light .lhero__top { border-color: rgba(0,0,0,.12); }

.lhero__when { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-family: var(--display); }
.lhero__date { font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--orange); letter-spacing: -0.02em; }
.lhero__time { font-weight: 600; font-size: .9375rem; opacity: .75; }

.lhero__grid { display: grid; gap: 24px; align-items: center; }

.lhero__kicker { font-family: var(--display); font-weight: 700; font-size: clamp(1.0625rem, 4.4vw, 1.375rem); margin-bottom: 6px; opacity: .9; }

.lhero__title { font-size: clamp(2.375rem, 11vw, 4.75rem); line-height: .98; letter-spacing: -0.02em; }
.lhero__title--blue { color: #7d97ff; }
.lhero__title .accent { color: var(--indigo); display: block; }

.lhero__subtitle {
  margin-top: 14px; max-width: 42ch;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.125rem, 4.4vw, 1.5rem); line-height: 1.3;
}

.lhero__meta {
  margin-top: 12px; display: flex; flex-direction: column; gap: 2px;
  font-family: var(--display); font-weight: 600; font-size: .9375rem; color: rgba(255,255,255,.6);
}
.lhero__card--light .lhero__meta { color: var(--muted); }

.lhero__learn { margin: 20px 0 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.lhero__card--light .lhero__learn { border-color: rgba(0,0,0,.12); }
.lhero__list-title { font-family: var(--display); font-weight: 800; font-size: 1.0625rem; margin-bottom: 10px; }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 1rem; line-height: 1.5; }
.checks svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--indigo); color: var(--white); margin-top: 1px; }

.lhero__book { display: none; }

@media (min-width: 640px) {
  .lhero__meta { flex-direction: row; }
  .lhero__meta span + span::before { content: "·"; margin: 0 10px; }
}
@media (min-width: 900px) {
  .lhero { padding: 28px 0 8px; }
  .lhero__card { padding: 30px 48px 36px; }
  .lhero__top { margin-bottom: 22px; }
  .lhero__date { font-size: 1.75rem; }
  .lhero__grid { grid-template-columns: 1fr auto; column-gap: 48px; }
  .lhero__book { display: block; --w: 172px; margin: 0 40px 0 0; }
  .lhero__learn { margin: 24px 0 26px; padding-top: 20px; }
  .checks { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

/* ---------- Об'ємна книжка ---------- */

.book { --w: 180px; --d: 26px; width: var(--w); aspect-ratio: var(--ar, 2 / 3); perspective: 1200px; flex: none; }
.book__in {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transform: rotateY(-30deg) rotateX(3deg);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.book:hover .book__in { transform: rotateY(-12deg) rotateX(2deg); }
/* обріз сторінок */
.book__in::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; width: var(--d);
  left: calc(100% - 3px - var(--d) / 2);
  transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, #fff 0 1px, #e6e1d6 1px 2px);
}
/* задня обкладинка + тінь */
.book__in::after {
  content: ""; position: absolute; inset: 0; border-radius: 3px 8px 8px 3px;
  transform: translateZ(calc(var(--d) / -2)); background: #111;
  box-shadow: 18px 22px 36px -6px rgba(0,0,0,.55);
}
.book__cover {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  transform: translateZ(calc(var(--d) / 2));
  border-radius: 3px 8px 8px 3px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: calc(var(--w) * .1);
  font-family: var(--display); color: var(--white);
}
.book__cover::after { /* згин біля корінця */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 9%;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.12) 45%, transparent);
}
.book__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book__author { position: relative; font-weight: 800; font-size: calc(var(--w) * .066); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.book__title { position: relative; font-weight: 900; font-size: calc(var(--w) * .125); line-height: 1; letter-spacing: -0.01em; }
/* «Марсіанські хроніки»: індиго і помаранчева планета */
.book--mars .book__cover {
  background:
    radial-gradient(circle at 64% 30%, #ffd166 0, #ff9500 12%, #e2620a 17%, transparent 17.5%),
    radial-gradient(circle at 20% 12%, rgba(255,255,255,.5) 0 1px, transparent 1.5px) 0 0 / 34px 30px,
    linear-gradient(165deg, #2346f0, #0e1d7a);
}
/* «Мартін Іден»: сонце над морем */
.book--sea .book__cover {
  background:
    radial-gradient(circle at 34% 46%, #fff6dc 0 11%, transparent 11.5%),
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(255,255,255,.14) 9px 11px) 0 58% / 100% 42% no-repeat,
    linear-gradient(180deg, #ffae00 0 58%, #0d0d0f 58%);
}

/* ---------- «10 сторінок» — стос аркушів ---------- */

.sheets { position: relative; width: 210px; aspect-ratio: 3 / 4; }
.sheets > * {
  position: absolute; inset: 0; border-radius: 12px; background: var(--white);
  box-shadow: 0 18px 36px -14px rgba(0,0,0,.35);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.sheets > span:nth-child(1) { transform: rotate(-9deg) translate(-8px, 6px); background: #f3ead8; }
.sheets > span:nth-child(2) { transform: rotate(6deg) translate(8px, 2px); background: #c9dbff; }
.sheets__top {
  transform: rotate(-2deg);
  display: grid; place-content: center; text-align: center;
  background: repeating-linear-gradient(180deg, var(--white) 0 27px, #e7eaf2 27px 28px);
  font-family: var(--display);
}
.sheets__top b { font-weight: 900; font-size: 6.5rem; line-height: .85; color: var(--indigo); letter-spacing: -0.04em; }
.sheets__top span { font-weight: 900; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; }
.sheets:hover > span:nth-child(1) { transform: rotate(-14deg) translate(-22px, 8px); }
.sheets:hover > span:nth-child(2) { transform: rotate(11deg) translate(22px, 4px); }

/* ---------- Секції ---------- */

.lsec { padding: 40px 0; }
.lsec--tint { background: var(--bg); }
.lsec--dark { background: var(--black); color: var(--white); }
.lsec--dark .section-head { border-color: var(--white); }
.lsec--dark .section-head h2 { color: var(--white); }
@media (min-width: 900px) { .lsec { padding: 60px 0; } }

/* Що буде на лекції — нумерований перелік як у газеті */
.prog { list-style: none; margin: 0; padding: 0; display: grid; }
.prog__item { padding: 22px 0; border-bottom: 1px solid #d9dce3; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; }
.prog__item:first-child { padding-top: 4px; }
.prog__n { grid-row: 1 / span 2; font-family: var(--display); font-weight: 900; font-size: 1.25rem; color: var(--orange); line-height: 1.3; }
.prog__item h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; font-weight: 800; }
.prog__item p { margin-top: 8px; color: #3c4148; }
@media (min-width: 900px) {
  .prog { grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .prog__item:nth-child(2) { padding-top: 4px; }
}

.bonus {
  margin-top: 28px; padding: 26px 24px; border-radius: var(--radius);
  background: var(--indigo); color: var(--white);
  box-shadow: 0 22px 44px -20px rgba(35,70,240,.7); transition: var(--lift);
}
.bonus:hover { transform: translateY(-3px); }
.bonus__label { font-family: var(--display); font-weight: 800; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.bonus h3 { font-size: clamp(1.375rem, 5vw, 2rem); line-height: 1.15; font-weight: 800; }
.bonus p:last-child { margin-top: 10px; color: rgba(255,255,255,.85); max-width: 60ch; }
@media (min-width: 900px) { .bonus { padding: 36px 44px; } }

/* Для кого */
.aud { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.aud li {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  padding: 18px; border-radius: 20px; background: var(--white);
  box-shadow: var(--shadow); transition: var(--lift);
}
.aud li:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
.aud__n {
  position: relative;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--indigo); color: var(--white); font-family: var(--display); font-weight: 900; font-size: 1.125rem;
}
.aud strong { display: block; font-family: var(--display); font-weight: 800; font-size: 1.1875rem; line-height: 1.3; }
.aud li > div > span { display: block; margin-top: 4px; color: var(--muted); }
@media (min-width: 900px) { .aud { grid-template-columns: repeat(3, 1fr); gap: 16px; } .aud li { padding: 22px; } }

/* Що заберете — плавна лінія, до якої на ниточках прив'язані нотатки.
   Нотатки стоять «ялинкою» (на комп'ютері ліворуч/праворуч із заходом одна на одну),
   саму лінію, точки й ниточки малює скрипт у кінці сторінки під реальні розміри карток. */
.wave { position: relative; }
.wave__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wave__path { fill: none; stroke: var(--indigo); stroke-width: 3; stroke-linecap: round; }
.wave__thread { stroke: rgba(35,70,240,.45); stroke-width: 2; stroke-dasharray: 5 5; }
.wave__dot { fill: var(--orange); stroke: var(--white); stroke-width: 4; paint-order: stroke; }
.wave__list { list-style: none; margin: 0; padding: 0 0 0 52px; display: grid; gap: 14px; }
.wave__note {
  position: relative; padding: 18px 20px;
  border-radius: 20px; background: var(--white);
  box-shadow: var(--shadow); transition: var(--lift);
}
.wave__note:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
.wave__n { font-family: var(--display); font-weight: 900; font-size: .875rem; color: var(--orange); letter-spacing: .06em; }
.wave h3 { margin-top: 2px; font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.wave p { margin-top: 6px; color: #3c4148; }
@media (min-width: 900px) {
  .wave__list { padding: 0; grid-template-columns: 1fr 1fr; column-gap: 150px; row-gap: 14px; }
  .wave__note { padding: 20px 24px; }
  /* непарні ліворуч, парні праворуч; кожна займає два «півряди», тож вони заходять одна на одну */
  .wave__note:nth-child(odd) { grid-column: 1; }
  .wave__note:nth-child(even) { grid-column: 2; }
  .wave__note:nth-child(1) { grid-row: 1 / span 2; }
  .wave__note:nth-child(2) { grid-row: 2 / span 2; }
  .wave__note:nth-child(3) { grid-row: 3 / span 2; }
  .wave__note:nth-child(4) { grid-row: 4 / span 2; }
  .wave__note:nth-child(5) { grid-row: 5 / span 2; }
  .wave__note:nth-child(6) { grid-row: 6 / span 2; }
  .wave__note:nth-child(7) { grid-row: 7 / span 2; }
  .wave__note:nth-child(8) { grid-row: 8 / span 2; }
}

/* пульсація без обводки: іконка сама м'яко «дихає» */
.ico--pulse, .wave__dot {
  animation: beat 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s);
  transform-box: fill-box; transform-origin: center;
}
@keyframes beat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .ico--pulse, .wave__dot { animation: none; } }

/* Газетна цитата-врізка */
.pull { padding: 0 0 40px; }
.pull blockquote {
  margin: 0; padding: 28px 0; border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.pull p {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: clamp(1.5rem, 6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.01em; max-width: 34ch;
}
.pull p::before { content: "«"; color: var(--orange); }
.pull p::after { content: "»"; color: var(--orange); }
.pull footer { margin-top: 16px; font-family: var(--display); font-weight: 700; color: var(--muted); }

/* Лектор */
.spk { display: grid; gap: 28px; }
.spk__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--radius); background: #222; }
.spk__name { font-size: clamp(2rem, 8vw, 3rem); }
.spk__role { margin-top: 6px; font-family: var(--display); font-weight: 700; color: rgba(255,255,255,.7); }
.spk__bio { margin-top: 18px; display: grid; gap: 12px; color: rgba(255,255,255,.88); }
.spk__hi { margin-top: 18px; display: grid; gap: 12px; color: var(--orange); font-weight: 500; }
.spk__hi ul { margin: 0; padding-left: 1.1em; }
.spk__lt { margin-bottom: -6px; }
/* цитата лектора: лапки, щоб було видно, що це слова людини */
.spk__quote {
  position: relative; margin: 26px 0 28px; padding: 30px 22px 20px;
  border-radius: 20px; background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.spk__quote::before {
  content: "“"; position: absolute; top: -18px; left: 18px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; padding-top: 18px;
  background: var(--orange); color: var(--black);
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 3rem; line-height: 1;
}
.spk__quote p { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.25rem; line-height: 1.4; }
.spk__quote p::after { content: "”"; color: var(--orange); }
.spk__quote footer { margin-top: 10px; font-family: var(--display); font-weight: 700; font-size: .9375rem; color: rgba(255,255,255,.6); }
.spk__quote footer::before { content: "— "; }

/* соцмережі Романа — кожна з нового рядка */
.stats { margin-top: 20px; }
.stats__title { color: rgba(255,255,255,.88); margin-bottom: 12px; }
.stats ul, .hstats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stats a { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.stats b { font-family: var(--display); font-weight: 900; font-size: 1.5rem; color: var(--orange); letter-spacing: -0.01em; margin-right: 4px; }
.ico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; color: #7d97ff; }
.ico svg { width: 22px; height: 22px; fill: currentColor; }
.stats a:hover b { color: var(--white); }

@media (min-width: 900px) {
  .spk { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
  .spk__photo { position: sticky; top: 24px; }
  /* короткий опис — по центру по висоті фото */
  .spk--short { align-items: center; }
  .spk--short .spk__photo { position: static; }
}

/* ведучий зустрічі (коли лекцію читає запрошений лектор) */
.host {
  margin-top: 32px; padding: 20px; border-radius: var(--radius);
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  display: grid; grid-template-columns: 72px 1fr; gap: 14px 16px; align-items: start;
}
.host__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center 20%; box-shadow: 0 0 0 3px var(--orange); }
.host__label { font-family: var(--display); font-weight: 800; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.host__name { font-family: var(--display); font-weight: 900; font-size: 1.5rem; line-height: 1.1; margin-top: 2px; }
.host__short { margin-top: 6px; font-size: 1rem; color: rgba(255,255,255,.75); }
.host__text { margin-top: 8px; font-size: 1rem; }
.hstats { grid-column: 1 / -1; }
.hstats__title { font-size: .875rem; color: rgba(255,255,255,.6); margin-bottom: 10px; }
.hstats ul { grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 18px; }
.hstats a { display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: .875rem; color: rgba(255,255,255,.75); line-height: 1.25; }
.hstats .ico { width: 22px; height: 22px; }
.hstats .ico svg { width: 20px; height: 20px; }
.hstats b { display: block; font-family: var(--display); font-weight: 900; font-size: 1.0625rem; color: var(--white); }
@media (max-width: 639px) { .hstats ul { grid-template-columns: 1fr; } .hstats a br { display: none; } }
@media (min-width: 900px) {
  .host { grid-template-columns: 96px 1fr auto; padding: 24px 32px; gap: 24px; align-items: center; }
  .host__photo { width: 96px; height: 96px; }
  .hstats { grid-column: auto; }
  .hstats ul { grid-template-columns: 1fr; }
}

/* Як проходитиме */
.howto { display: grid; gap: 24px; }
.howto__meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.howto__meta li { display: flex; align-items: center; gap: 14px; font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.howto__meta li .ico { width: 30px; height: 30px; color: var(--indigo); }
.howto__meta .ico svg { width: 28px; height: 28px; fill: none; }
.howto__text { display: grid; gap: 14px; color: #3c4148; }
@media (min-width: 900px) { .howto { grid-template-columns: 5fr 7fr; gap: 56px; } }

/* Відгуки */
.reviews {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-top: 6px; padding-bottom: 26px;
  margin: 0 calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad);
  scroll-padding: 0 var(--pad);
}
.reviews a { scroll-snap-align: start; }
.reviews img { width: 100%; height: auto; border-radius: 20px; background: var(--white); box-shadow: var(--shadow); }
.reviews__hint { margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: .875rem; color: var(--muted); }
@media (min-width: 900px) { .reviews { grid-auto-columns: calc((100% - 3 * 14px - 2 * var(--pad)) / 4); } }

/* Ціна */
.price { display: grid; gap: 16px; }
.price__main {
  padding: 28px 24px; border-radius: var(--radius); background: var(--white);
  box-shadow: inset 0 0 0 2px var(--black), 0 26px 50px -22px rgba(13,13,15,.45);
  display: grid; justify-items: start; align-content: center; gap: 10px;
  transition: var(--lift);
}
.price__main:hover, .price__inc:hover { transform: translateY(-4px); }
.price__title { font-size: clamp(1.5rem, 6vw, 2.25rem); text-transform: uppercase; }
.price__amount { font-family: var(--display); font-weight: 900; font-size: clamp(4rem, 20vw, 7rem); line-height: 1; letter-spacing: -0.03em; color: var(--indigo); margin-bottom: 10px; }
.price__inc { padding: 28px 24px; border-radius: var(--radius); background: var(--orange); box-shadow: 0 26px 50px -20px rgba(240,154,0,.75); transition: var(--lift); }
.price__inc-title { font-family: var(--display); font-weight: 900; font-size: 1.25rem; margin-bottom: 14px; }
.price__inc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.price__inc li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; }
.price__inc svg { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--black); color: var(--orange); margin-top: 2px; }
.price__inc strong { display: block; font-family: var(--display); font-weight: 800; }
.price__d { display: block; font-size: 1rem; }
@media (min-width: 900px) { .price { grid-template-columns: 1fr 1fr; gap: 24px; } .price__main, .price__inc { padding: 44px; } }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--white); border-radius: 20px; box-shadow: var(--shadow); transition: var(--lift); }
.faq details:hover { box-shadow: var(--shadow-up); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; position: relative;
  font-family: var(--display); font-weight: 800; font-size: 1.1875rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--indigo); color: var(--white); font-size: 1.25rem; font-weight: 700; line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 22px 22px; display: grid; gap: 10px; color: #3c4148; }
@media (min-width: 900px) { .faq { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Фінальний блок: компактний, текст зліва, книжка справа */
.final { background: var(--orange); padding: 40px 0 44px; overflow: hidden; }
.final__grid { display: grid; gap: 28px; align-items: center; }
.final__title { font-size: clamp(1.75rem, 7.4vw, 3rem); text-transform: uppercase; line-height: 1.02; max-width: 20ch; }
/* підзаголовок — стікер-«скотч», як на старих банерах */
.final__sub {
  display: inline-block; margin-top: 16px; padding: 8px 16px 10px;
  font-family: var(--display); font-weight: 800; font-size: clamp(1.125rem, 4.6vw, 1.5rem); line-height: 1.25;
  background: var(--indigo); color: var(--white); transform: rotate(-1.2deg);
  clip-path: polygon(0 6%, 3% 0, 97% 4%, 100% 0, 99% 50%, 100% 96%, 96% 100%, 3% 95%, 0 100%, 1% 50%);
}
.final__points { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; }
.final__points li {
  position: relative; padding: 10px 0 10px 26px; border-top: 1px solid rgba(0,0,0,.18);
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem; line-height: 1.4;
}
.final__points li::before { content: "→"; position: absolute; left: 0; font-weight: 900; }
.final__visual { display: none; }
@media (min-width: 900px) {
  .final { padding: 56px 0; }
  .final__grid { grid-template-columns: 1fr 300px; gap: 56px; }
  .final__points { grid-template-columns: 1fr 1fr; column-gap: 32px; max-width: 760px; }
  .final__points--one { grid-template-columns: 1fr; max-width: 640px; }
  .final__visual { display: grid; place-items: center; }
  .final__book { --w: 210px; }
}

/* Липка кнопка покупки на телефоні */
.buybar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 20px; border-radius: 999px;
  background: var(--black); color: var(--white); box-shadow: 0 12px 30px -10px rgba(0,0,0,.5);
}
.buybar__price { font-family: var(--display); font-weight: 900; font-size: 1.375rem; }
.buybar .btn { width: auto; min-height: 48px; padding: 10px 22px; }
@media (max-width: 899px) { body:has(.buybar) .footer { padding-bottom: 100px; } }
@media (min-width: 900px) { .buybar { display: none; } }

/* ---------- Документи ---------- */

.doc { padding: 40px 0 80px; }
.doc__body { max-width: 720px; }
.doc__body h1 { font-size: clamp(2rem, 8vw, 3.5rem); text-transform: uppercase; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 3px solid var(--rule); }
.doc__body h2 { font-size: 1.5rem; font-weight: 800; margin: 40px 0 12px; letter-spacing: -0.01em; }
.doc__body p { margin: 0 0 14px; color: #2a2e33; }
.doc__body ul { margin: 0 0 16px; padding-left: 1.2em; color: #2a2e33; }
.doc__body li { margin-bottom: 6px; }
.doc__body a { color: var(--indigo); font-weight: 600; }

/* ---------- Готуємо нові лекції ---------- */

.soon-title { font-size: clamp(2.25rem, 9vw, 3.5rem); text-transform: uppercase; margin-bottom: 18px; }
.soon-title span { color: var(--orange); }
.hero__quote--small p { font-size: clamp(1.125rem, 4.4vw, 1.375rem); line-height: 1.45; font-style: normal; font-weight: 600; }
.hero__quote--small p::before { display: none; }

/* ---------- Дякуємо за оплату ---------- */

.thanks { padding: 32px 0 64px; }
.thanks__card {
  max-width: 760px; padding: 32px 24px; border-radius: var(--radius);
  background: var(--black); color: var(--white); box-shadow: var(--shadow-up);
}
.thanks__ok { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--orange); color: var(--black); margin-bottom: 20px; }
.thanks__ok svg { width: 32px; height: 32px; }
.thanks h1 { font-size: clamp(2.5rem, 11vw, 4.5rem); text-transform: uppercase; }
.thanks h1 span { color: var(--orange); }
.thanks p { margin-top: 18px; font-size: 1.1875rem; color: rgba(255,255,255,.85); max-width: 46ch; }
.thanks__btns { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn--ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--white); }
@media (min-width: 900px) { .thanks { padding: 48px 0 96px; } .thanks__card { padding: 56px; } }

/* ---------- Генератор UTM ---------- */

.utm__form { display: grid; gap: 14px; margin: 24px 0; }
.utm__form label { display: grid; gap: 6px; font-family: var(--display); font-weight: 800; }
.utm__form small { font-weight: 500; color: var(--muted); }
.utm__form select, .utm__form input {
  font: inherit; font-family: var(--text); font-weight: 500; font-size: 1.0625rem;
  padding: 14px 16px; border-radius: 14px; border: 2px solid #d9dce3; background: var(--white);
}
.utm__form select:focus, .utm__form input:focus { border-color: var(--indigo); outline: none; }
.utm__out { display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: var(--bg); box-shadow: var(--shadow); }
.utm__out code { font-size: .9375rem; word-break: break-all; color: var(--indigo); font-weight: 600; }
@media (min-width: 640px) { .utm__form { grid-template-columns: 1fr 1fr; } }

.thanks__lec { font-family: var(--display); font-weight: 800; color: var(--white) !important; }

/* ---------- Адмінка ---------- */

.adm { padding: 32px 0 80px; background: var(--bg); }
.adm__h1 { font-size: clamp(2rem, 8vw, 3.5rem); text-transform: uppercase; }
.adm__tabs { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; padding: 10px 0; background: var(--bg); }
.adm__tabs a { padding: 9px 16px; border-radius: 999px; background: var(--white); box-shadow: var(--shadow); font-family: var(--display); font-weight: 800; font-size: .9375rem; text-decoration: none; }
.adm__tabs a:hover { background: var(--indigo); color: var(--white); }
.adm__box { margin-bottom: 24px; padding: 24px 20px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); scroll-margin-top: 70px; }
.adm__box h2 { font-size: clamp(1.5rem, 6vw, 2.25rem); text-transform: uppercase; margin-bottom: 10px; }
.adm__box > p { color: #3c4148; max-width: 70ch; margin-bottom: 18px; }
.adm__h3 { font-size: 1.25rem; font-weight: 800; margin: 26px 0 10px; }
.adm__frame { width: 100%; height: 900px; border: 0; border-radius: 20px; background: var(--bg); margin-bottom: 16px; }
.adm__note { padding: 14px 18px; border-radius: 14px; background: var(--bg); color: #3c4148; margin: 0 0 16px; }
.adm__note:empty { display: none; }
.adm__hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adm__hist li { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--bg); }
.adm__hist li > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.adm__hist code, .adm__url code { font-size: .8125rem; color: var(--indigo); word-break: break-all; }
.adm__empty { color: var(--muted); }
.adm__mini { flex: none; font: inherit; font-family: var(--display); font-weight: 800; font-size: .8125rem; padding: 8px 12px; border: 0; border-radius: 999px; background: var(--orange); cursor: pointer; }
.adm__mini--del { background: transparent; color: var(--muted); }
.adm__lec { padding: 18px 0; border-top: 1px solid #e3e6ec; }
.adm__lec h3 { font-size: 1.25rem; font-weight: 800; }
.adm__lec h3 small { font-family: var(--text); font-weight: 500; font-size: .9375rem; color: var(--muted); }
.adm__lec > p { margin: 6px 0 10px; font-size: 1rem; }
.adm__ok { color: #12833a; font-weight: 700; }
.adm__no { color: #d12a1f; font-weight: 700; }
.adm__url { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 14px; margin-top: 8px; border-radius: 14px; background: var(--bg); }
.adm__url span { grid-column: 1 / -1; font-size: .8125rem; font-weight: 600; color: var(--muted); }
#t-form { align-items: end; }
@media (min-width: 900px) { .adm__box { padding: 36px 40px; } }
.thanks__ok--fail { background: #ff3b30; color: var(--white); font-family: var(--display); font-weight: 900; font-size: 2rem; }
.thanks__help { font-size: 1rem !important; }
.thanks__help a { color: var(--orange); font-weight: 700; }