/* ==========================================================================
   Головна Тиражу: витиснений заголовок і опукла картка з прикладом на першому екрані,
   інструменти з реальними результатами, шаблони, API (темна плита), ціни, питання.
   ========================================================================== */

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(232, 236, 244, 0.82);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  transition: box-shadow 200ms var(--ease-out);
}
.site-header[data-scrolled] { box-shadow: 0 10px 24px -14px var(--rule-strong); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
}
.site-nav {
  display: none;
  gap: 4px;
  margin-left: 12px;
}
.site-nav a,
.site-header__login {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: box-shadow 160ms var(--ease-out), color 160ms var(--ease-out);
}
.site-nav a:hover,
.site-header__login:hover { color: var(--ink); box-shadow: var(--lift-s); }
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.site-header__cta-short { display: none; }
.nav-toggle { margin-right: -10px; }
.mobile-nav {
  display: grid;
  padding: 8px var(--gutter) 20px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.mobile-nav a:last-child { border-bottom: 0; }

@media (max-width: 420px) {
  .site-header__inner { gap: 10px; }
  .site-header__login { display: none; }
  .site-header__cta-long { display: none; }
  .site-header__cta-short { display: inline; }
  .site-header .brand__name { font-size: 19px; }
  .nav-toggle { margin-right: -8px; }
}
@media (max-width: 360px) {
  .site-header .brand { gap: 8px; }
  .site-header .brand__logo { width: 26px; height: 26px; }
  .site-header .brand__name { font-size: 17px; }
  .site-header__actions .btn--sm { padding: 0 12px; }
}
@media (min-width: 1024px) {
  .site-nav { display: flex; }
  .nav-toggle,
  .mobile-nav { display: none !important; }
}

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

.section { padding-block: var(--section-y); }
.section__head { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); max-width: 860px; }
.section__head--row { max-width: none; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) {
  .section__head--row { grid-template-columns: 1fr auto; gap: 32px; }
}

/* Стрічка: на телефоні довгі ряди гортаються вбік із прилипанням */
@media (max-width: 699px) {
  .strip {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(72%, 1fr);
    grid-template-columns: none !important;
    gap: 14px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    /* Запас під тіні опуклих карток: overflow-x обрізає й вертикаль */
    padding-block: 14px 30px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
  }
  .strip > * { scroll-snap-align: start; min-width: 0; }
}

/* Текст-приклад: пост у вдавленій ямці */
.post {
  padding: 22px 22px 20px;
  border-radius: var(--r-l);
  background: var(--paper);
  box-shadow: var(--press);
  font-size: 15.5px;
  line-height: 1.55;
  display: grid;
  gap: 12px;
  max-height: 460px;
  overflow: auto;
}
.post__title { font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 1.2; }

/* ---------- Перший екран ---------- */

.hero { padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
/* Розмір заголовка — від ширини колонки: на десктопі «Будь-який формат.» (≈ 9 em у Nunito 1000) має влізти в рядок */
.hero__title {
  font-size: calc((100vw - 2 * var(--gutter)) / 6.9);
  font-weight: 1000;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: clamp(24px, 4vw, 48px);
}
@media (min-width: 560px) { .hero__title { font-size: calc((100vw - 2 * var(--gutter)) / 8.4); } }
@media (min-width: 1024px) { .hero__title { font-size: min(128px, calc((100vw - 2 * var(--gutter)) / 9.6)); } }

.hero__grid { display: grid; gap: 40px; }
.hero__copy { display: grid; gap: 24px; align-content: start; }
.hero__lead { color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__note { font-size: 14.5px; color: var(--ink-3); max-width: 46ch; }
.hero__gift {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 420px;
  padding: 14px 20px 14px 14px;
  border-radius: var(--r-l);
  box-shadow: var(--lift-s);
}
.hero__coin {
  flex: none;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 28px;
  font-weight: 900;
  box-shadow: var(--clay), 4px 6px 12px var(--lo);
  transform: rotate(-8deg);
}
.hero__gift p { display: grid; gap: 2px; }
.hero__gift b { font-size: 17px; font-weight: 800; color: var(--ink); }
.hero__gift p span { font-size: 14px; color: var(--ink-3); }
.hero__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding-top: 20px;
}
.hero__tools a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px 0 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: var(--lift-s);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: box-shadow 160ms var(--ease-out);
}
.hero__tools a:hover { box-shadow: 8px 8px 18px var(--lo), -8px -8px 18px var(--hi); }
.hero__tools a:active { box-shadow: var(--press-s); }
.hero__tools .swatch { width: 12px; height: 12px; }

@media (max-width: 699px) {
  .hero__actions .btn { flex: 1 1 100%; }
  /* На телефоні аркуш із результатами — одразу після кнопок; до інструментів веде наступний розділ */
  .hero__tools { display: none; }
}
/* Планшет і невеликий ноутбук: текст над аркушем, аркуш на всю ширину */
@media (min-width: 700px) and (max-width: 1199px) {
  .hero__copy { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .hero__lead { grid-row: span 2; }
  .hero__tools { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .hero__copy { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* Картка: одна ідея (вдавлена ямка) — кілька результатів під нею */
.sheet {
  position: relative;
  display: grid;
  gap: 22px;
  padding: 28px;
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: var(--lift);
}
.sheet__idea {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding: 14px 16px;
  border-radius: 20px;
  box-shadow: var(--press);
  font-size: 15.5px;
  line-height: 1.45;
}
.sheet__idea-label {
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--blue);
  box-shadow: var(--clay);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.sheet__idea-text { flex: 1 1 20ch; min-width: 0; color: var(--ink); }
.sheet__idea-text::before { content: '«'; }
.sheet__idea-text::after { content: '»'; }
.sheet__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.sheet__cap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 8px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink);
}
.sheet__cap .swatch { width: 10px; height: 10px; transform: translateY(1px); }
.sheet__label { font-weight: 700; min-width: 0; }
.sheet__cost { grid-column: 2; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet__music {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px 16px;
  margin: 0;
  padding: 16px;
  border-radius: 24px;
  box-shadow: var(--press);
}
.sheet__music .player__wave { height: 44px; }
.sheet__music .sheet__cap { grid-column: 1 / -1; }
.sheet__music .player__time { margin-left: 6px; }
.sheet__bar { height: 12px; }

@media (max-width: 699px) {
  .sheet { padding: 0; border-radius: 0; box-shadow: none; gap: 18px; }
  .sheet__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: 22px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 16px var(--gutter) 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .sheet__grid > * { scroll-snap-align: start; }
}

/* Єдиний оркестрований момент: заголовок видавлюється з поверхні, результати по черзі «надуваються» */
/* Клас .print-in ставить landing.js, лише коли вкладку видно: у фоні анімація не стоїть на першому кадрі */
@media (prefers-reduced-motion: no-preference) {
  .print-in .hero__title { animation: emboss-in 900ms var(--ease-out) both; }
  .print-in .sheet__proof,
  .print-in .sheet__music { animation: puff-in 560ms var(--ease-snap) both; }
  .sheet__proof:nth-child(1) { animation-delay: 300ms; }
  .sheet__proof:nth-child(2) { animation-delay: 420ms; }
  .sheet__proof:nth-child(3) { animation-delay: 540ms; }
  .sheet__music { animation-delay: 680ms; }
  .print-in .sheet__bar > i { animation: bar-in 260ms var(--ease-out) both; }
  .print-in .sheet__bar > i:nth-child(n) { animation-delay: calc(800ms + var(--i, 0) * 40ms); }
}
@keyframes emboss-in {
  from { text-shadow: 0 0 0 var(--lo), 0 0 0 var(--hi); color: var(--paper); }
  50% { color: var(--paper-3); }
}
@keyframes puff-in { from { opacity: 0; transform: scale(0.92) translateY(10px); } }
@keyframes bar-in { from { background: transparent; } }

/* ---------- Інструменти ---------- */

/* Кожен інструмент — опукла картка; на телефоні картка зникає, щоб стрічки прикладів гортались від краю до краю */
.tool {
  display: grid;
  gap: 28px;
  padding-block: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--rule);
}
.tool:last-child { padding-bottom: 0; }
@media (min-width: 700px) {
  .tool {
    margin-bottom: 36px;
    padding: clamp(24px, 3.4vw, 44px);
    border-top: 0;
    border-radius: var(--r-xl);
    background: var(--paper);
    box-shadow: var(--lift);
  }
  .tool:last-child { padding-bottom: clamp(24px, 3.4vw, 44px); }
}
.tool__text { display: grid; gap: 16px; align-content: start; max-width: 60ch; }
.tool__name {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(22px, 2.4vw, 30px);
}
.tool__text > p { color: var(--ink-2); }
.tool__facts { list-style: none; display: grid; gap: 8px; font-size: 15px; }
.tool__facts li { position: relative; padding-left: 22px; }
.tool__facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tool);
  box-shadow: inset -2px -3px 5px rgba(0, 0, 0, 0.16), inset 2px 3px 5px rgba(255, 255, 255, 0.5);
}
.tool__price { font-size: 15px; color: var(--ink-2); }
.tool__price b { font-family: var(--font-display); font-weight: 1000; font-size: 26px; color: var(--ink); margin-inline: 2px; }
.tool__examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: end;
  padding: 10px;
}
.tool__examples--wide { grid-template-columns: minmax(0, 1fr); }
.strip--compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool__examples--music { grid-template-columns: 1fr; gap: 28px; padding: 0; }
.tool__examples--music .proof { padding: 20px; border-radius: var(--r-l); box-shadow: var(--press); }
.tool__examples:has(> .proof--text:only-child),
.tool__examples:has(> .proof--phone:only-child) { grid-template-columns: minmax(0, 1fr); }
.proof--phone { max-width: 300px; }
.proof--phone .proof__media { border-radius: 32px; box-shadow: 0 0 0 8px var(--paper), 14px 14px 30px var(--lo), -14px -14px 30px var(--hi); }
.proof--text { max-width: 460px; }

/* Текст-приклад: пост в Instagram */
.ig {
  overflow: hidden;
  border-radius: var(--r-l);
  background: #fff;
  box-shadow: var(--lift);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.ig__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ig__head p { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.ig__head b { font-size: 14px; font-weight: 800; }
.ig__head span { font-size: 12px; color: var(--ink-3); }
.ig__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  font-weight: 900;
  color: var(--ink);
  background-image: linear-gradient(#fff, #fff), linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 2px solid transparent;
}
.ig__ai {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--yellow);
  font-size: 11.5px;
  font-weight: 800;
  box-shadow: var(--clay);
}
.ig__slide {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1;
  padding: 26px;
  background: radial-gradient(circle at 80% 85%, #ffd27a 0, transparent 45%), linear-gradient(150deg, #ff9a3c, #e2551b 70%, #b8360f);
  color: #fff8ec;
}
.ig__kicker { align-self: flex-start; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.22); font-size: 13px; font-weight: 800; }
.ig__big { font-family: var(--font-display); font-weight: 1000; font-size: clamp(40px, 11vw, 60px); line-height: 0.95; letter-spacing: -0.02em; text-shadow: 0 3px 0 rgba(120, 30, 0, 0.25); }
.ig__emoji { align-self: flex-end; font-size: 44px; line-height: 1; }
.ig__actions { display: flex; gap: 14px; padding: 12px 14px 4px; }
.ig__actions svg { width: 24px; height: 24px; }
.ig__actions svg:first-child { color: #ed4956; }
.ig__likes { padding: 0 14px; font-weight: 800; font-size: 14px; }
.ig__text { padding: 4px 14px 16px; }
.ig__text > b { font-weight: 800; }
.ig__text p { display: inline; }
.ig__text p + p::before { content: ""; display: block; height: 0.6em; }
.ig__tag { color: #00376b; }
.proof--text .proof__cap { margin-top: 14px; }

@media (min-width: 1024px) {
  .tool { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; }
  .tool__examples--music { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .tool__examples { padding: 10px 0; }
}

/* ---------- Фішки ---------- */

.perks { padding-top: 0; }
.perks__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 28px;
}
/* Фішка — опукла картка з кольоровою кулькою-значком; фарби по колу */
.perk { --c: var(--blue); display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 30px; background: var(--paper); box-shadow: var(--lift); }
.perk:nth-child(4n + 1) { --c: var(--pink); }
.perk:nth-child(4n + 2) { --c: var(--yellow); }
.perk:nth-child(4n + 3) { --c: var(--green); }
.perk:nth-child(4n + 4) { --c: var(--violet); }
.perk dt { font-family: var(--font-display); font-weight: 900; font-size: 19px; line-height: 1.2; }
.perk dt::before {
  content: '';
  display: block;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--c);
  box-shadow: var(--clay), 0 8px 16px -8px var(--c);
}
.perk dd { margin: 0; color: var(--ink-2); font-size: 15px; }
@media (min-width: 1024px) { .perks__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 699px) { .perks__list.strip { grid-auto-columns: 70%; } }

/* ---------- Шаблони ---------- */

.tpl-grid {
  list-style: none;
  columns: 4 220px;
  column-gap: 28px;
}
.tpl { break-inside: avoid; margin-bottom: 32px; }
.tpl__link { display: grid; gap: 10px; color: var(--ink); text-decoration: none; }
.tpl__media {
  position: relative;
  display: block;
  aspect-ratio: var(--ar, 1);
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--paper-3);
  box-shadow: var(--lift-s);
  transition: box-shadow 300ms var(--ease-out);
}
.tpl__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.tpl__link:hover .tpl__media { box-shadow: var(--lift); }
.tpl__link:hover .tpl__media img { transform: scale(1.03); }
.tpl__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5.5v13l10-6.5z' fill='%232b2f45'/%3E%3C/svg%3E") no-repeat 55% center / 24px;
  box-shadow: 4px 4px 12px rgba(43, 47, 69, 0.3);
}
.tpl__name { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; }
.tpl__name .swatch { width: 10px; height: 10px; }
.tpl__link:hover .tpl__name { text-decoration: underline; text-underline-offset: 0.18em; }
.tpl__hint { font-size: 14px; color: var(--ink-3); }
@media (max-width: 699px) {
  .tpl-grid {
    columns: auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 58%;
    gap: 14px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-block: 8px 24px;
    scrollbar-width: none;
  }
  .tpl-grid::-webkit-scrollbar { display: none; }
  .tpl { scroll-snap-align: start; margin: 0; }
  .tpl__media { aspect-ratio: 4 / 5; }
}

/* ---------- API: темна пластилінова плита ---------- */

.api__grid {
  display: grid;
  gap: 40px;
  padding: clamp(24px, 4vw, 56px);
  border-radius: 44px;
  background: var(--desk);
  color: #eef0f8;
  box-shadow: var(--lift), inset -8px -10px 20px rgba(0, 0, 0, 0.3), inset 8px 10px 20px rgba(255, 255, 255, 0.08);
}
@media (max-width: 699px) { .api__grid { width: auto; margin-inline: calc(var(--gutter) * 0.5); padding-inline: 20px; border-radius: 32px; } }
.api .lead { color: #c9cce0; }
.api a:not(.btn) { color: #b3bcff; }
.api__text { display: grid; gap: 22px; align-content: start; }
.api__facts { list-style: none; display: grid; gap: 10px; font-size: 15.5px; color: #e6e8f4; }
.api__facts li { padding-left: 22px; position: relative; }
.api__facts li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: var(--clay); }
.api__facts code { font-size: 13.5px; padding: 1px 6px; border-radius: var(--r-xs); background: rgba(255, 255, 255, 0.1); color: #fff; }
.api__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.api .btn--line { --bg: rgba(255, 255, 255, 0.08); --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); }
.api .btn--line:hover { --bg: rgba(255, 255, 255, 0.14); transform: none; box-shadow: inset 0 0 0 1.5px #fff; }
.api .btn--line:active { box-shadow: inset 0 0 0 1.5px #fff, inset 3px 4px 8px rgba(0, 0, 0, 0.3); }
.api__code { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1024px) {
  .api__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
}
@media (max-width: 699px) { .api__actions .btn { flex: 1 1 100%; } }

/* ---------- Ціни: картки з «колбою» запасу кредитів ---------- */

.packs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 28px;
}
.pack { display: grid; gap: 10px; align-content: end; padding: 26px; border-radius: 34px; background: var(--paper); box-shadow: var(--lift); }
.pack--popular { box-shadow: var(--lift), inset 0 0 0 3px var(--blue); }
/* Колба: вдавлена ямка, у ній кулька заввишки з пакет */
.pack__stack {
  display: flex;
  align-items: flex-end;
  height: 120px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 24px;
  box-shadow: var(--press);
}
.pack__stack i {
  display: block;
  width: 100%;
  height: calc(var(--h) * 100%);
  border-radius: 16px;
  background: var(--violet);
  box-shadow: var(--clay);
}
.pack--popular .pack__stack i { background: var(--blue); box-shadow: var(--clay), 0 10px 20px -8px rgba(85, 102, 240, 0.7); }
.pack__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 1000; font-size: 22px; }
.pack__credits { font-size: 15px; color: var(--ink-2); }
.pack__num { font-family: var(--font-display); font-weight: 1000; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pack__price { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pack__save { padding: 2px 10px; border-radius: var(--r-pill); background: var(--green); box-shadow: var(--clay); font-size: 14px; font-weight: 800; color: #0b3d2c; }
.pack__note { font-size: 14.5px; color: var(--ink-2); min-height: 4.4em; }
.pack .btn { margin-top: 6px; }
@media (min-width: 1024px) { .packs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .packs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    gap: 20px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 16px var(--gutter) 36px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
  }
  .pack { scroll-snap-align: start; }
  .pack__stack { height: 96px; }
}

.pricing__more {
  display: grid;
  gap: 32px;
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(20px, 3vw, 32px);
  border-radius: 36px;
  box-shadow: var(--press);
}
.pricing__more .h3 { margin-bottom: 16px; }
.pricing__notes { display: grid; gap: 14px; align-content: start; color: var(--ink-2); font-size: 15.5px; }
@media (min-width: 1024px) { .pricing__more { grid-template-columns: 7fr 4fr; gap: 64px; } }

.cost-list { margin: 0; }
.cost-list__row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) 2fr;
  gap: 6px 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
.cost-list dt { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.cost-list dd { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .cost-list__row { grid-template-columns: 1fr; } }

/* ---------- Відгуки ---------- */

.reviews__row { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.review { margin: 0; padding: 24px; border-radius: 30px; background: var(--paper); box-shadow: var(--lift); display: grid; gap: 10px; }
.review figcaption { font-size: 14px; color: var(--ink-3); }

/* ---------- Питання ---------- */

.faq__grid { display: grid; gap: 32px; }
.faq__head { display: grid; gap: 14px; align-content: start; }
.faq__aside-note { color: var(--ink-2); font-size: 15px; }
/* Питання — опуклі пігулки; відкрите вдавлюється */
.faq__list { display: grid; gap: 16px; }
.faq details { padding: 0 24px; border-radius: 26px; background: var(--paper); box-shadow: var(--lift-s); transition: box-shadow 200ms var(--ease-out); }
.faq details[open] { box-shadow: var(--press); }
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 14px 44px 14px 0;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat;
  transition: transform 220ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 0 20px; color: var(--ink-2); max-width: 68ch; }
.faq__answer code { font-size: 13px; padding: 1px 5px; border-radius: var(--r-xs); background: var(--paper-3); }
@media (min-width: 1024px) { .faq__grid { grid-template-columns: 4fr 8fr; gap: 64px; } }

/* ---------- Фінал: велика опукла картка ---------- */

.final__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  justify-items: center;
  padding: clamp(36px, 6vw, 80px) 24px;
  border-radius: 48px;
  box-shadow: var(--lift);
  text-align: center;
}
.final__inner .lead { margin-inline: auto; }
@media (max-width: 699px) { .final__inner { width: auto; margin-inline: calc(var(--gutter) * 0.5); border-radius: 36px; } }
.final__title {
  max-width: 100%;
  font-size: clamp(28px, 6.6vw + 6px, 96px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ---------- Підвал: кульки фарби котяться у вдавленому жолобі ---------- */

.site-footer { padding: clamp(48px, 6vw, 80px) 0 calc(28px + env(safe-area-inset-bottom)); }
.site-footer__trench { position: relative; height: 120px; border-radius: var(--r-pill); box-shadow: var(--press); overflow: hidden; }
.site-footer__trench i {
  position: absolute;
  bottom: 14px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--tool);
  box-shadow: var(--clay), 0 10px 18px -8px var(--tool);
  animation: footer-roll 9s var(--ease-in-out) infinite alternate;
  animation-delay: var(--d);
}
/* Блік — щоб було видно, що кулька обертається */
.site-footer__trench i::after { content: ''; position: absolute; left: 22%; top: 18%; width: 22%; height: 16%; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
@keyframes footer-roll {
  from { left: 2%; transform: rotate(0); }
  to { left: calc(98% - 92px); transform: rotate(540deg); }
}
@media (max-width: 699px) {
  .site-footer__trench { height: 84px; }
  .site-footer__trench i { width: 60px; height: 60px; bottom: 12px; }
  @keyframes footer-roll { from { left: 3%; transform: rotate(0); } to { left: calc(97% - 60px); transform: rotate(540deg); } }
}
@media (prefers-reduced-motion: reduce) { .site-footer__trench i { animation: none; left: calc(var(--n) * 15% + 3%); } }

.site-footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 32px; margin-top: 28px; }
.site-footer__mark { font: 1000 clamp(44px, 8vw, 110px)/0.9 var(--font-display); letter-spacing: -0.04em; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer__links li { list-style: none; }
.site-footer__links a { color: var(--ink); font-weight: 800; text-decoration: none; border-bottom: 3px solid transparent; transition: border-color 160ms var(--ease-out); }
.site-footer__links a:hover { border-color: var(--pink); }
.site-footer__legal { margin-top: 18px; color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
/* ---------- Фото: великі кадри замість дрібних мініатюр ----------
   Підписи лежать на самому кадрі (градієнт знизу), перший кадр — головний і вдвічі більший. */

/* Підпис поверх кадру */
.sheet__proof,
.tool__examples:not(.tool__examples--music) > .proof:not(.proof--phone):not(.proof--text) { position: relative; }
.sheet__proof .sheet__cap,
.tool__examples:not(.tool__examples--music) > .proof:not(.proof--phone):not(.proof--text) > .proof__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 48px 16px 14px;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(to top, rgba(20, 22, 38, 0.82), rgba(20, 22, 38, 0));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}
.sheet__proof .sheet__cost { color: rgba(255, 255, 255, 0.78); font-weight: 600; }
.tool__examples .proof__prompt { -webkit-line-clamp: 2; }
.sheet__proof .proof__sound { bottom: auto; top: 12px; }

/* Фото-інструменти: текст зверху, кадри на всю ширину картки — три великі однакові 4:5 */
@media (min-width: 1024px) {
  .tool[data-tool='image'],
  .tool[data-tool='enhance'],
  .tool[data-tool='video'] { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tool[data-tool='image'] .tool__text,
  .tool[data-tool='enhance'] .tool__text,
  .tool[data-tool='video'] .tool__text { max-width: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 48px; }
  .tool[data-tool] .tool__text > .tool__name { grid-column: 1 / -1; }
}
@media (min-width: 700px) {
  .tool__examples.strip:not(.strip--video):not(.strip--compare) { gap: 20px; padding: 0; align-items: stretch; }
  .tool__examples.strip:not(.strip--video):not(.strip--compare) .proof__media { aspect-ratio: 4 / 5; }
  .sheet__proof .proof__media { aspect-ratio: 3 / 4; }
  .strip--video,
  .strip--compare { gap: 20px; padding: 0; }
}.tool__examples .proof__media { border-radius: 22px; }
.tool__examples .proof__media img { transition: transform 600ms var(--ease-out); }
.tool__examples .proof:hover .proof__media img,
.sheet__proof:hover .proof__media img { transform: scale(1.04); }

/* Шаблони: три великі колонки, назва на кадрі */
@media (min-width: 700px) { .tpl-grid { columns: 3 280px; column-gap: 24px; } }
.tpl { margin-bottom: 24px; }
.tpl__link { position: relative; display: block; border-radius: var(--r-l); }
.tpl__media { border-radius: var(--r-l); }
.tpl__name,
.tpl__hint { position: absolute; left: 18px; right: 18px; z-index: 2; color: #fff; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl__name { display: block; }
.tpl__name .swatch { display: inline-block; margin-right: 8px; vertical-align: 0.05em; }
.tpl__name { bottom: 40px; font-size: 18px; font-weight: 900; }
.tpl__hint { bottom: 16px; color: rgba(255, 255, 255, 0.8); font-size: 14px; }
.tpl__link::after {
  content: '';
  position: absolute;
  inset: 40% 0 0;
  border-radius: 0 0 var(--r-l) var(--r-l);
  background: linear-gradient(to top, rgba(20, 22, 38, 0.8), rgba(20, 22, 38, 0));
  pointer-events: none;
}
.tpl__link:hover .tpl__name { text-decoration: none; }