/* =====================================================================
   ГОТВЕНИТЕ ЈАДЕЊА НА МАМА — style.css
   Единствен stylesheet за сите страници.
   Mobile-first (дизајн од 390px нагоре).
   ===================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Бренд палета (4 токени) */
  --black: #1b1a1a;
  --red: #8e3a3a;
  --yellow: #edcb6f;
  --white: #fafafa;

  /* Изведени нијанси (во рамки на палетата) */
  --red-dark: #742e2e;
  --red-soft: rgba(142, 58, 58, 0.08);
  --yellow-soft: rgba(237, 203, 111, 0.18);
  --ink-70: rgba(27, 26, 26, 0.7);
  --ink-55: rgba(27, 26, 26, 0.55);
  --line: rgba(27, 26, 26, 0.1);

  /* Типографија */
  --font-head: "Alice", Georgia, serif;
  --font-body: "Merriweather", Georgia, serif;
  --font-hand: "Caveat", cursive;

  /* Ритам и форма */
  --container: 1100px;
  --radius: 12px;
  --radius-pill: 22px;
  --shadow-sm: 0 1px 2px rgba(27, 26, 26, 0.06);
  --shadow-header: 0 6px 24px -12px rgba(27, 26, 26, 0.35);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --header-h: 64px;
}

/* ---------- 2. RESET / BASE ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}

/* Пресметан отстап за sticky header при скролање до сидра */
:target {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ---------- 3. LAYOUT HELPERS ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. BUTTONS ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0.01em;
  padding: 0.85em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition:
    transform 0.25s var(--ease),
    background-color 0.2s var(--ease),
    color 0.2s var(--ease),
    box-shadow 0.25s var(--ease);
  will-change: transform;
}
/* Анимација: подигнување при hover */
.btn:hover {
  transform: translateY(-3px);
}
.btn:active {
  transform: translateY(-1px);
}

/* Анимација: светкав премин преку копчето */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(250, 250, 250, 0.35),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease);
  pointer-events: none;
}
.btn:hover::after {
  left: 150%;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover {
    transform: none;
  }
  .btn::after {
    display: none;
  }
}

.btn-primary {
  /* Дијагонален црвен градиент со светол горен раб — не рамно црвено */
  background-image: linear-gradient(
    135deg,
    #a84a4a 0%,
    var(--red) 42%,
    var(--red-dark) 100%
  );
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: var(--white);
  border: 2px solid var(--red-dark);
  box-shadow:
    0 10px 24px -12px rgba(142, 58, 58, 0.95),
    inset 0 1px 0 rgba(250, 250, 250, 0.22);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.3s var(--ease);
}
.btn-primary:hover {
  /* Само посилен сјај и подигнување — без потемнување и без прстен */
  box-shadow:
    0 18px 34px -12px rgba(142, 58, 58, 0.8),
    inset 0 1px 0 rgba(250, 250, 250, 0.3);
}
.btn-primary:active {
  box-shadow:
    0 6px 14px -8px rgba(142, 58, 58, 0.9),
    inset 0 2px 7px rgba(27, 26, 26, 0.28);
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--white),
    0 0 0 6px var(--red);
}

.btn-ghost {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}
.btn-ghost:hover {
  background: var(--red-soft);
}

.btn-sm {
  padding: 0.6em 1.2em;
  font-size: 0.95rem;
}
.btn-lg {
  padding: 1em 2.1em;
  font-size: 1.15rem;
}

/* =====================================================================
   5. HEADER / NAVBAR  (mobile-first)
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition:
    box-shadow 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-header);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

/* Лого */
.brand {
  display: inline-flex;
  align-items: center;
}
.brand-logo {
  height: 46px;
  width: auto;
  transition: height 0.3s var(--ease);
}

/* Десна група (јазик + хамбургер) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Јазик MK/EN — само UI */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-head);
  font-size: 0.9rem;
  user-select: none;
}
.lang-opt {
  background: none;
  border: 0;
  padding: 0.2em 0.15em;
  color: var(--ink-55);
  font: inherit;
  line-height: 1;
  transition: color 0.2s var(--ease);
}
.lang-opt.is-active {
  color: var(--red);
}
.lang-opt:hover {
  color: var(--black);
}
.lang-sep {
  color: var(--line);
}

/* Хедер типографија: Alice, без вештачки болд, со дискретно растојание */
.site-header .lang-opt,
.site-header .lang-sep {
  letter-spacing: 0.06em;
}

/* Хамбургер */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--black);
  border-radius: 2px;
  transition:
    transform 0.3s var(--ease),
    opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Навигација — на мобилен е паден панел */
.nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 12px 20px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-header);
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease),
    visibility 0.25s var(--ease);
}
.nav.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-link {
  font-family: var(--font-head);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--black);
  text-align: center;
  padding: 0.7em 0.2em;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s var(--ease);
}
.nav-link:hover {
  color: var(--red);
}
.nav-cta {
  margin-top: 0.8rem;
}

/* =====================================================================
   6. RESPONSIVE — таблет/десктоп навигација
   ===================================================================== */
@media (min-width: 760px) {
  :root {
    --header-h: 76px;
  }

  .brand-logo {
    height: 56px;
  }

  .nav-toggle {
    display: none;
  }

  /* „Дома" се појавува само во мобилното мени, не во десктоп хедерот */
  .nav-mobile-only {
    display: none;
  }

  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-link {
    position: relative;
    font-size: 1.08rem;
    padding: 0.35em 0.1em;
    border: 0;
  }
  /* Црвена линија што расте под линкот */
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--red);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease);
  }
  .nav-link:hover::after,
  .nav-link:focus-visible::after {
    transform: scaleX(1);
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-link::after {
      transition: none;
    }
  }
  .nav-cta {
    margin-top: 0;
    margin-left: 0.5rem;
  }

  /* Ред: лого · навигација · јазик */
  .header-actions {
    order: 3;
  }
  .nav {
    order: 2;
    margin-left: auto;
  }
}

/* =====================================================================
   7. HERO  (mobile-first)
   ===================================================================== */
.handwritten {
  font-family: var(--font-hand);
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 40px 0;
  text-align: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h)); /* цел екран, минус header */
  display: flex;
  flex-direction: column;
  justify-content: center; /* центрирано вертикално */
  background-color: var(--black); /* fallback пред видеото да се вчита */
}

/* Позадинско видео + затемнување */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(27, 26, 26, 0.55),
    rgba(27, 26, 26, 0.62)
  );
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Ghost копче над видео → светло */
.hero-actions .btn-ghost {
  color: var(--white);
  border-color: rgba(250, 250, 250, 0.6);
}
.hero-actions .btn-ghost:hover {
  background: rgba(250, 250, 250, 0.14);
  border-color: var(--white);
}

.hero .eyebrow {
  color: var(--yellow);
  font-size: 1.5rem;
  line-height: 1;
  margin: 0 0 2px;
}
.hero-title {
  font-size: clamp(2.1rem, 8.5vw, 3rem);
  line-height: 1;
  color: var(--white);
  margin: 6px 0 16px;
  text-shadow: 0 2px 18px rgba(27, 26, 26, 0.35);
}
.hero-sub {
  font-size: 1.05rem;
  line-height: 1.4;
  color: rgba(250, 250, 250, 0.92);
  max-width: 54ch;
  margin: 0 auto;
  text-shadow: 0 1px 12px rgba(27, 26, 26, 0.3);
}
.hero-actions {
  display: flex;
  flex-direction: column; /* мобилен: едно над друго */
  align-items: stretch;
  gap: 12px;
  margin: 26px auto 0;
  width: 100%;
  max-width: 300px; /* фиксна ширина → исти по големина */
}
.hero-actions .btn {
  width: 100%;
  flex: 0 0 auto;
  font-size: 0.95rem;
  padding: 0.72em 1.4em;
}

@media (min-width: 760px) {
  .hero {
    padding: 84px 0 68px;
  }
  .hero .eyebrow {
    font-size: 1.7rem;
  }
  .hero-title {
    font-size: clamp(2.6rem, 5vw, 3.9rem);
    margin-bottom: 20px;
  }
  .hero-sub {
    font-size: 1.2rem;
  }

  .hero-actions {
    flex-direction: row;
    justify-content: center;
    width: auto;
    max-width: none;
  }
  .hero-actions .btn {
    width: auto;
    font-size: 0.95rem;
    padding: 0.78em 1.5em;
  }
}

/* =====================================================================
   8. ЗАЕДНИЧКИ СЕКЦИИ (utility)
   ===================================================================== */
.eyebrow {
  font-family: var(--font-hand);
  color: var(--red);
  font-size: 1.4rem;
  line-height: 1;
  margin: 0 0 8px;
}
.section-title {
  font-size: clamp(1.9rem, 5.5vw, 2.8rem);
  line-height: 1.12;
  color: var(--black);
  margin: 0 0 16px;
}
.section-title-handwritten {
  font-family: var(--font-hand);
  font-size: clamp(1.9rem, 5.5vw, 2.8rem);
  line-height: 1.12;
  color: var(--red);
  margin: 40px 0 24px 0;
}
.section-lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-70);
  max-width: 58ch;
  margin: 0 auto;
}

/* =====================================================================
   9. ПРОБЛЕМ / АГИТАЦИЈА
   ===================================================================== */
.problem {
  background: var(--white);
}
.problem-inner {
  padding-block: 56px;
}
.problem-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.problem-content {
  text-align: left;
  /* Мобилен ефект: текстот се „закачува", видеото се лизга нагоре и го покрива */
  position: sticky;
  top: var(--header-h);
  z-index: 1;
}
.problem-text {
  color: var(--ink-70);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 52ch;
  margin: 24px 0 0;
}
.problem-bridge {
  font-family: var(--font-hand);
  font-size: clamp(1.6rem, 7vw, 2.7rem);
  line-height: 1.28;
  color: var(--red);
  max-width: 52ch;
  margin: 24px 0 0;
}
.problem-media {
  display: flex;
  justify-content: center;
  /* Над текстот при лизгање (mobile ефект) */
  position: relative;
  z-index: 2;
}
.video-placeholder {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f1ec;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-55);
  font-family: var(--font-head);
  font-size: 1rem;
}

@media (min-width: 760px) {
  .problem-inner {
    padding-block: 92px;
  }
  .problem-grid {
    flex-direction: row;
    align-items: center;
    gap: 60px;
  }
  .problem-content {
    flex: 1 1 55%;
    /* Ресетирај го мобилниот sticky ефект на десктоп */
    position: static;
    z-index: auto;
  }
  .problem-media {
    flex: 1 1 45%;
    position: static;
    z-index: auto;
  }
  .video-placeholder {
    width: min(100%, 340px);
  }
}

/* =====================================================================
   10. КОМПЛЕТ ПАКЕТ + ИЗБЕРИ ЈА СВОЈАТА КНИГА
   ===================================================================== */

.books {
  background: var(--white);
}
.bundle-inner,
.books-inner {
  padding-block: 56px;
}
.section-intro {
  text-align: center;
  margin-bottom: 28px;
}

/* Комплет пакет — фотографии наспроти текст */
.bundle-panel {
  position: relative;
  background: var(--red-dark);
  border-radius: 40px;
  padding: 32px 20px;
}
.bundle-panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 4px dashed #984a4a;
  border-radius: 34px;
  pointer-events: none;
}
.bundle-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.bundle-media {
  text-align: center;
}
.bundle-stack {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0 20px;
}
.bundle-cover {
  width: 150px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 14px 30px -12px rgba(27, 26, 26, 0.35);
}
.bundle-cover-left {
  transform: rotate(-8deg);
  margin-right: -34px;
  z-index: 1;
}
.bundle-cover-right {
  transform: rotate(8deg);
  margin-left: -34px;
  z-index: 2;
}
.bundle-content {
  text-align: center;
}
.bundle-content .section-title {
  color: var(--white);
}
.bundle-content .section-lead {
  color: rgba(250, 250, 250, 0.85);
}
.bundle-content .btn {
  margin-top: 20px;
}
.bundle-content .btn-primary {
  background: var(--white);
  color: var(--red);
  box-shadow: 0 8px 20px -10px rgba(27, 26, 26, 0.35);
}
.bundle-content .btn-primary:hover {
  background: var(--white);
  color: var(--red-dark);
  box-shadow: 0 14px 26px -10px rgba(27, 26, 26, 0.4);
}

/* Трите книги — „книжарница" редови (мобилен), 3 колони (десктоп) */
.book-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.book-item + .book-item {
  border-top: 1px solid var(--line);
}
.book-link {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 4px;
}
.book-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
  border-radius: var(--radius);
}

/* Корица + жолта „подлога" зад неа */
.book-visual {
  position: relative;
  flex: 0 0 108px;
}
.book-mat {
  position: absolute;
  inset: 10px -8px -10px 8px;
  background: var(--yellow);
  opacity: 0.55;
  border-radius: 6px;
  transform: rotate(2.5deg);
  transition: transform 0.35s var(--ease);
}
.book-cover {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 14px 28px -14px rgba(27, 26, 26, 0.55);
  transform: rotate(-1.5deg);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.book-flag {
  position: absolute;
  z-index: 2;
  top: -12px;
  right: -10px;
  background: var(--yellow);
  color: var(--black);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.3em 0.7em;
  border-radius: var(--radius-pill);
  transform: rotate(6deg);
  box-shadow: var(--shadow-sm);
}
.book-flag-soon {
  background: var(--red);
  color: var(--white);
}

/* „Наскоро" корица (Зимница — сè уште нема вистинска корица) */
.book-cover-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  text-align: center;
  background: var(--red-dark);
}
.book-cover-soon::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(250, 250, 250, 0.4);
  border-radius: 4px;
  pointer-events: none;
}
.soon-brand {
  font-family: var(--font-head);
  font-size: 0.44rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.7);
}
.soon-title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  line-height: 1.1;
  color: var(--white);
}
.soon-mark {
  width: 5px;
  height: 5px;
  background: var(--yellow);
  transform: rotate(45deg);
}

/* Текстуален дел */
.book-info {
  flex: 1 1 auto;
  min-width: 0;
}
.book-num {
  display: block;
  color: var(--red);
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 2px;
}
.book-title {
  font-size: 1.3rem;
  color: var(--black);
  margin: 0 0 6px;
  transition: color 0.2s var(--ease);
}
.book-text {
  color: var(--ink-70);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 10px;
}
.book-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--red);
  font-size: 0.95rem;
  font-weight: 700;
}
.book-arrow {
  transition: transform 0.25s var(--ease);
}

/* Hover: корицата се крева, стрелката се лизга */
.book-link:hover .book-cover {
  transform: rotate(0deg) translateY(-5px);
  box-shadow: 0 22px 36px -16px rgba(27, 26, 26, 0.6);
}
.book-link:hover .book-mat {
  transform: rotate(4deg);
}
.book-link:hover .book-title {
  color: var(--red);
}
.book-link:hover .book-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .book-cover,
  .book-mat,
  .book-arrow {
    transition: none;
  }
  .book-link:hover .book-cover {
    transform: rotate(-1.5deg);
  }
  .book-link:hover .book-mat {
    transform: rotate(2.5deg);
  }
  .book-link:hover .book-arrow {
    transform: none;
  }
}

@media (min-width: 760px) {
  .bundle-inner,
  .books-inner {
    padding-block: 92px;
  }
  .bundle-panel {
    padding: 48px 40px;
  }
  .bundle-panel::before {
    inset: 14px;
    border-radius: 38px;
  }
  .bundle-layout {
    flex-direction: row;
    align-items: center;
    gap: 60px;
  }
  .bundle-media {
    flex: 0 0 42%;
  }
  .bundle-content {
    flex: 1 1 58%;
    text-align: left;
  }
  .bundle-content .section-lead {
    margin: 0;
  }
  .bundle-cover {
    width: 220px;
  }
  .bundle-cover-left {
    margin-right: -50px;
  }
  .bundle-cover-right {
    margin-left: -50px;
  }
  /* Книжарница: 3 колони со тенки вертикални линии */
  .book-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .book-item + .book-item {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .book-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    height: 100%;
    padding: 12px 36px;
  }
  .book-item:first-child .book-link {
    padding-left: 4px;
  }
  .book-item:last-child .book-link {
    padding-right: 4px;
  }
  .book-visual {
    flex: 0 0 auto;
    width: min(100%, 210px);
    align-self: center;
    margin-top: 10px;
  }
  .book-flag {
    font-size: 1.15rem;
    top: -14px;
    right: -14px;
  }
  .book-num {
    font-size: 1.8rem;
  }
  .book-title {
    font-size: 1.45rem;
  }
  .book-text {
    font-size: 0.95rem;
  }
  /* „Наскоро" корица — поголеми пропорции на десктоп */
  .book-cover-soon {
    gap: 10px;
    padding: 18px;
  }
  .book-cover-soon::before {
    inset: 10px;
  }
  .soon-brand {
    font-size: 0.68rem;
  }
  .soon-title {
    font-size: 2rem;
  }
  .soon-mark {
    width: 7px;
    height: 7px;
  }
}

/* =====================================================================
   14. FOOTER
   ===================================================================== */
.site-footer {
  background: var(--black);
  color: rgba(250, 250, 250, 0.78);
}
.footer-inner {
  padding-block: 44px 26px;
}
.footer-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}

/* Бренд колона */
.footer-logo {
  height: 84px;
  width: auto;
  margin-inline: auto;
}
.footer-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(250, 250, 250, 0.22);
  border-radius: 50%;
  color: rgba(250, 250, 250, 0.85);
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    transform 0.25s var(--ease);
}
.footer-social:hover {
  color: var(--yellow);
  border-color: var(--yellow);
  transform: translateY(-2px);
}
.footer-social:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

/* Наслови на колони */
.footer-title {
  margin: 0 0 14px;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}

/* Навигација */
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-nav a {
  color: rgba(250, 250, 250, 0.75);
  font-size: 0.98rem;
  transition: color 0.2s var(--ease);
}
.footer-nav a:hover {
  color: var(--white);
}

/* Newsletter */
.footer-newsletter-text {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(250, 250, 250, 0.7);
  max-width: 34ch;
  margin-inline: auto;
}
.footer-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
  margin-inline: auto;
}
.footer-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--white);
  background: rgba(250, 250, 250, 0.07);
  border: 1px solid rgba(250, 250, 250, 0.25);
  border-radius: var(--radius-pill);
  padding: 0.8em 1.2em;
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.footer-input::placeholder {
  color: rgba(250, 250, 250, 0.5);
}
.footer-input:focus-visible {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px var(--yellow-soft);
}
.footer-note {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--yellow);
}
.footer-note.is-ok {
  font-family: var(--font-hand);
  font-size: 1.15rem;
}
.footer-mail {
  display: inline-block;
  margin-top: 14px;
  color: rgba(250, 250, 250, 0.75);
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.footer-mail:hover {
  color: var(--yellow);
}

/* Долна лента: правни лево, кредит десно, авторски права под нив */
.footer-bottom {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(250, 250, 250, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  color: rgba(250, 250, 250, 0.55);
}
.footer-copy {
  order: 3;
  flex: 1 0 100%;
  margin: 8px 0 0;
  text-align: center;
}
.footer-bottom a {
  color: rgba(250, 250, 250, 0.7);
  transition: color 0.2s var(--ease);
}
.footer-bottom a:hover {
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .footer-social:hover {
    transform: none;
  }
}

@media (min-width: 760px) {
  .footer-inner {
    padding-block: 64px 28px;
  }
  .footer-grid {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    text-align: left;
  }
  /* Бренд колона: центрирано лого над мрежите и е-поштата */
  .footer-brand {
    max-width: 340px;
    text-align: center;
  }
  .footer-socials {
    margin-top: 20px;
  }
  /* Долна лента во еден ред: правни · © · кредит */
  .footer-copy {
    order: 0;
    flex: 0 1 auto;
    margin: 0;
  }
  .footer-legal {
    flex: 1 1 0;
    text-align: left;
  }
  .footer-credit {
    flex: 1 1 0;
    text-align: right;
  }
  /* Newsletter и навигација: центрирана содржина */
  .footer-newsletter,
  .footer-nav {
    text-align: center;
  }
  .footer-form {
    max-width: 340px;
  }
}

/* =====================================================================
   11. ЗА МАМА
   ===================================================================== */
.about {
  background: var(--white);
}
.about-inner {
  padding-block: 56px;
}
.about-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.about-media {
  width: 100%;
}
.about-photo {
  width: 100%;
  aspect-ratio: 3 / 3;
  object-fit: cover;
  border-radius: 40px;
  box-shadow: 0 14px 30px -12px rgba(27, 26, 26, 0.35);
}
.about-content {
  text-align: center;
}

/* Доверба: 4 профили — редови на мобилен, 2x2 на десктоп */
.about-trust {
  margin-top: 28px;
  text-align: left;
}
.trust-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-rows li + li {
  border-top: 1px solid var(--line);
}
.trust-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  color: var(--ink-70);
}
.trust-row > svg {
  flex: 0 0 auto;
  color: var(--red);
}
.trust-acc {
  min-width: 0;
}
.trust-handle {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s var(--ease);
}
.trust-count {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--ink-55);
}
.trust-row:hover .trust-handle {
  color: var(--red);
}
.trust-row:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

@media (min-width: 760px) {
  .about-inner {
    padding-block: 92px;
  }
  .about-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
  }
  .about-media {
    flex: 0 0 40%;
  }
  .about-content {
    flex: 1 1 60%;
    text-align: left;
  }
  .about-content .section-lead {
    margin: 0;
  }
  /* 2x2 мрежа за профилите, без разделни линии */
  .trust-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 44px;
  }
  .trust-rows li + li {
    border-top: 0;
  }
  .trust-row {
    padding: 10px 0;
  }
}

/* =====================================================================
   12. ПРАШАЊА (FAQ)
   ===================================================================== */
.faq {
  background: var(--white);
}
.faq-inner {
  padding-block: 56px;
}
/* FAQ страница — интро како херо (појасна хиерархија на мобилен) */
.faq-hero {
  margin-bottom: 44px;
}
.faq-hero .section-title {
  font-size: clamp(2.15rem, 8vw, 2.8rem);
  line-height: 1.08;
}
.faq-hero .section-lead {
  font-size: 0.95rem;
}
.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: var(--white);
  border: 0;
  text-align: left;
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--black);
}
.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--red);
  border-radius: 2px;
}
.faq-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
.faq-icon::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}
.faq-answer-inner p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--ink-70);
  font-size: 1rem;
  line-height: 1.6;
}
.faq-item.is-open .faq-answer {
  max-height: 300px;
}
.faq-answer-inner a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Категории: табови лево, прашања десно ---------- */
/* Мобилен: хоризонтален лизгачки ред од „пилули" над прашањата */
.faq-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  margin-bottom: 20px;
}
.faq-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.6em 1.1em;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: 0.95rem;
  color: var(--ink-70);
  white-space: nowrap;
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.faq-tab > svg {
  flex: 0 0 auto;
}
.faq-tab:hover {
  color: var(--red);
  border-color: var(--red);
}
.faq-tab.is-active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.faq-panel-title {
  font-size: 1.35rem;
  color: var(--black);
  margin: 0 0 16px;
}

@media (min-width: 760px) {
  .faq-inner {
    padding-block: 92px;
  }
  /* Категории лево (картичка), прашања десно */
  .faq-browser {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 48px;
    align-items: start;
  }
  .faq-tabs {
    flex-direction: column;
    gap: 4px;
    overflow: visible;
    padding: 12px;
    margin-bottom: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
  .faq-tab {
    width: 100%;
    justify-content: flex-start;
    padding: 0.85em 1.1em;
    background: transparent;
    border: 0;
    border-radius: 14px;
    font-size: 1.02rem;
    white-space: normal;
    text-align: left;
  }
  .faq-tab:hover {
    background: var(--red-soft);
    color: var(--red);
  }
  .faq-tab.is-active {
    background: var(--red);
    color: var(--white);
    box-shadow: none;
  }
  .faq-panel-title {
    font-size: 1.6rem;
    margin-bottom: 20px;
  }
}

/* =====================================================================
   13. БЕСПЛАТНИ РЕЦЕПТИ (LEAD MAGNET / CAPTURE)
   ===================================================================== */
.capture {
  background: var(--white);
}
.capture-inner {
  padding-block: 56px;
}
.capture-inner .section-title-handwritten {
  text-align: center;
  margin-bottom: 24px;
}
.capture-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 22px 44px -26px rgba(27, 26, 26, 0.4);
}
/* Орнамент лента (везба) — „завиткано како подарок" */
.capture-band {
  height: 20px;
  background-image: url("../media/background.webp");
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: center;
}
.capture-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 28px 20px 32px;
  text-align: center;
}
.capture-media {
  flex: 0 0 auto;
}
.capture-preview {
  width: 150px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 14px 30px -14px rgba(27, 26, 26, 0.5);
}
.capture-content {
  width: 100%;
}

/* Форма — е-пошта во преден план */
.capture-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 22px auto 0;
  max-width: 420px;
}
.capture-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.85em 1.3em;
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.capture-input::placeholder {
  color: var(--ink-55);
}
.capture-input:focus-visible {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}
.capture-form .btn {
  width: 100%;
}
.capture-note {
  margin: 2px 0 0;
  min-height: 1.2em;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--red);
}
.capture-note.is-ok {
  color: var(--red-dark);
  font-family: var(--font-hand);
  font-size: 1.25rem;
}

.capture-trust {
  margin: 14px auto 0;
  font-size: 0.9rem;
  color: var(--ink-55);
}

/* Што содржи — веднаш под насловот */
.capture-list {
  list-style: none;
  margin: 16px auto 0;
  padding: 0;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.capture-list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink-70);
}
.capture-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 9px;
  height: 9px;
  background: var(--red);
  transform: rotate(45deg);
  border-radius: 2px;
}

@media (min-width: 760px) {
  .capture-inner {
    padding-block: 92px;
  }
  .capture-band {
    height: 26px;
  }
  .capture-body {
    flex-direction: row;
    align-items: center;
    gap: 44px;
    padding: 34px 44px;
    text-align: left;
  }
  .capture-media {
    flex: 0 0 auto;
  }
  .capture-preview {
    width: 230px;
  }
  .capture-content {
    flex: 1 1 auto;
  }
  .capture-form {
    flex-direction: row;
    flex-wrap: wrap;
    margin-inline: 0;
    max-width: 560px;
  }
  .capture-form .btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .capture-input {
    width: auto;
    flex: 1 1 260px;
  }
  .capture-note {
    flex: 1 0 100%;
    order: 3;
  }
  .capture-trust {
    margin-inline: 0;
    margin-top: 10px;
  }
  /* Пократок панел: точките во две колони, помали растојанија */
  .capture-list {
    margin: 18px 0 0;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 30px;
  }
  .capture-form {
    margin-top: 22px;
  }
}

/* =====================================================================
   15. РЕЦЕНЗИИ (TESTIMONIALS)
   ===================================================================== */
.testimonials {
  background: var(--white);
}
.testimonials-inner {
  padding-block: 56px;
}

/* Пишани цитати — шпил од картички со стрелки */
.quote-deck {
  max-width: 560px;
  margin-inline: auto;
}
.deck-stage {
  display: grid;
}
.deck-card {
  grid-area: 1 / 1;
  position: relative;
  background: var(--red-dark);
  border-radius: 18px;
  padding: 26px 24px 20px;
  text-align: left;
  color: rgba(250, 250, 250, 0.92);
  box-shadow: 0 20px 40px -20px rgba(27, 26, 26, 0.55);
  will-change: transform;
}
/* Испрекината внатрешна рамка — ист мотив како комплет-панелот */
.deck-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(250, 250, 250, 0.16);
  border-radius: 12px;
  pointer-events: none;
}
.deck-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.deck-stars {
  color: var(--yellow);
  font-size: 1rem;
  letter-spacing: 3px;
  line-height: 1;
}
.deck-date {
  font-size: 0.82rem;
  color: rgba(250, 250, 250, 0.55);
}
.deck-text {
  margin: 0 0 18px;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.deck-name {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--yellow);
}
.deck-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}
.deck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: transparent;
  border: 1px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease),
    transform 0.25s var(--ease);
}
.deck-btn:hover {
  background: var(--red);
  color: var(--white);
  transform: translateY(-2px);
}
.deck-btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
.deck-count {
  min-width: 3.6em;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-55);
}

@media (prefers-reduced-motion: reduce) {
  .deck-btn:hover {
    transform: none;
  }
}

/* Скриншот пораки (вистински DM-ови) */
.testi-label {
  margin: 36px 0 14px;
  text-align: center;
  font-size: 1.4rem;
  color: var(--red);
}
.testi-strip {
  list-style: none;
  margin: 0;
  padding: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.testi-strip li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
/* Секоја слика ја задржува природната пропорција, ограничена во двете насоки */
.testi-strip img {
  width: auto;
  height: auto;
  max-width: min(78vw, 300px);
  max-height: 320px;
  border-radius: 10px;
  border: 1px solid var(--line);
}

@media (min-width: 760px) {
  .testimonials-inner {
    padding-block: 92px;
  }
  /* Поширока картичка на десктоп */
  .quote-deck {
    max-width: 720px;
  }
  .deck-card {
    padding: 32px 38px 26px;
  }
  .deck-text {
    font-size: 1.1rem;
  }
  .deck-name {
    font-size: 1.7rem;
  }
  .testi-label {
    margin-top: 48px;
    font-size: 1.55rem;
  }
  .testi-strip img {
    max-width: 360px;
    max-height: 380px;
  }
}

/* Laptop L — поширока картичка за рецензии */
@media (min-width: 1440px) {
  .quote-deck {
    max-width: 900px;
  }
}

/* =====================================================================
   ПРАВНИ ИНФОРМАЦИИ (legal.html)  — mobile-first
   ===================================================================== */
.legal-inner {
  max-width: 760px;
  padding-block: 44px 64px;
}

.legal-updated {
  margin: 0 0 22px;
  font-size: 0.85rem;
  color: var(--ink-55);
}

/* Одделен документ (Услови / Приватност / Поврат) */
.legal-doc {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.legal-doc-title {
  font-size: clamp(1.55rem, 4.5vw, 1.95rem);
  color: var(--black);
  margin: 0 0 14px;
}
.legal-doc h3 {
  font-size: 1.12rem;
  color: var(--red);
  margin: 26px 0 8px;
}
.legal-doc p {
  margin: 0 0 14px;
  line-height: 1.65;
  color: var(--ink-70);
}

/* Листи со црвен ромб (како ознаките во проблем-секцијата) */
.legal-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.legal-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  line-height: 1.55;
  color: var(--ink-70);
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--red);
  transform: rotate(45deg);
}

.legal-mail {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-mail:hover {
  color: var(--red-dark);
}

/* Центрирано копче за назад */
.legal-back {
  display: flex;
  width: max-content;
  margin: 44px auto 0;
}

@media (min-width: 760px) {
  .legal-inner {
    padding-block: 64px 88px;
  }
}

/* =====================================================================
   ЗА МАМА (za-mama.html)  — mobile-first
   ===================================================================== */
/* Интро + портрет */
.zamama-intro-inner {
  padding-block: 44px 0;
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.zamama-portrait {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 40px;
  box-shadow: 0 14px 30px -12px rgba(27, 26, 26, 0.35);
  margin-top: 30px;
}

/* Приказната — тесен, читлив текст */
.zamama-story-inner {
  padding-block: 48px 40px;
  max-width: 720px;
}
.zamama-story .section-title {
  text-align: center;
  margin-bottom: 24px;
}
.zamama-story p {
  margin: 0 0 18px;
  line-height: 1.7;
  color: var(--ink-70);
}
/* Цитат — центриран на сите екрани (посилна специфичност од .zamama-story p) */
.zamama-story .zamama-quote {
  font-size: 1.65rem;
  line-height: 1.25;
  color: var(--red);
  text-align: center;
  max-width: 22ch;
  margin: 34px auto;
}

/* Потпис */
.zamama-story .zamama-sign {
  font-size: 1.8rem;
  color: var(--red);
  text-align: right;
  margin: 26px 0 0;
}

/* Заедницата */
.zamama-community-inner {
  padding-block: 40px 56px;
  max-width: 760px;
  text-align: center;
}
.zamama-trust {
  margin-top: 26px;
  text-align: left;
}

/* Завршен CTA */
.zamama-cta {
  background: var(--white);
}
.zamama-cta-inner {
  padding-block: 56px 64px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.zamama-cta-btn {
  margin-top: 28px;
}

@media (min-width: 760px) {
  .zamama-intro-inner {
    padding-top: 64px;
  }
  .zamama-story-inner {
    padding-block: 64px 48px;
  }
  .zamama-story .zamama-quote {
    font-size: 1.9rem;
  }
  .zamama-community-inner {
    padding-bottom: 80px;
  }
  /* 2x2 мрежа за профилите (исто како на почетната) */
  .zamama-trust .trust-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 44px;
  }
  .zamama-trust .trust-rows li + li {
    border-top: 0;
  }
  .zamama-cta-inner {
    padding-block: 80px 88px;
  }
}

/* Активна ставка во навигацијата */
.nav-link[aria-current="page"] {
  color: var(--red);
}

/* =====================================================================
   16. ПРОДАЖНА СТРАНИЦА — КНИГА (tradicionalni-recepti.html и сл.)
   Mobile-first: сè е градено од 390px нагоре.
   ===================================================================== */

/* ---------- Продажен hero (светла позадина, текст + 3Д книга) ---------- */
.sales-hero {
  background: var(--white);
  overflow: hidden;
}
.sales-hero-inner {
  padding-block: 40px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sales-hero-title {
  font-size: clamp(2.05rem, 8vw, 3.3rem);
  line-height: 1.08;
  color: var(--black);
  margin: 0 0 14px;
  max-width: 18ch;
}
.sales-hero-sub {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-70);
  max-width: 52ch;
  margin: 0 auto;
}
.sales-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 26px auto 0;
  width: 100%;
  max-width: 320px;
}
.sales-hero-actions .btn {
  width: 100%;
}

/* Кратка линија на доверба под копчињата */
.sales-trust {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font-size: 0.88rem;
  color: var(--ink-55);
}
.sales-trust li {
  position: relative;
  padding-left: 16px;
}
.sales-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  background: var(--red);
  transform: rotate(45deg);
  border-radius: 2px;
}

/* Сцена за 3Д книгата (чист CSS 3D — без WebGL, работи и преку file://) */
.sales-hero-visual {
  width: 100%;
  display: flex;
  justify-content: center;
  order: -1; /* мобилно: книгата над насловот */
  margin: 0 0 28px;
}
.book3d-stage {
  position: relative;
  width: min(86vw, 380px);
  aspect-ratio: 1 / 1.05;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Мека сенка под книгата */
.book3d-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 62%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(27, 26, 26, 0.3),
    transparent 68%
  );
}

/* Книгата: перспектива → лебдење → 3Д коцка со 6 страни */
.cssbook {
  --bw: 224px; /* ширина на корицата */
  --bh: 306px; /* висина на корицата */
  --bt: 34px; /* дебелина на книгата */
  position: relative;
  perspective: 1000px;
}
.cssbook-float {
  animation: bookFloat 4.5s ease-in-out infinite;
}
.cssbook-box {
  position: relative;
  width: var(--bw);
  height: var(--bh);
  transform-style: preserve-3d;
  transform: rotateX(-2deg) rotateY(0deg); /* JS го менува по курсорот */
  transition: transform 0.35s var(--ease);
  will-change: transform;
}
.cssbook-face {
  position: absolute;
  left: 50%;
  top: 50%;
}

/* Предна корица — обична слика + благ сјај */
.cssbook-front,
.cssbook-back {
  width: var(--bw);
  height: var(--bh);
}
.cssbook-front {
  transform: translate(-50%, -50%) translateZ(calc(var(--bt) / 2));
  box-shadow: 0 26px 48px -20px rgba(27, 26, 26, 0.5);
}
.cssbook-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cssbook-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(250, 250, 250, 0.16),
    transparent 42%
  );
  pointer-events: none;
}

/* Задна корица */
.cssbook-back {
  background: var(--red-dark);
  transform: translate(-50%, -50%) rotateY(180deg)
    translateZ(calc(var(--bt) / 2));
}

/* 'Рбет (лево) */
.cssbook-spine {
  width: var(--bt);
  height: var(--bh);
  background: linear-gradient(to right, #6d2b2b, var(--red) 45%, #6d2b2b);
  transform: translate(-50%, -50%) rotateY(-90deg)
    translateZ(calc(var(--bw) / 2));
}

/* Раб со страници (десно) — тенки линии како листови */
.cssbook-pages {
  width: var(--bt);
  height: calc(var(--bh) - 4px);
  background: repeating-linear-gradient(90deg, #efe7d8 0 2px, #ddd2bf 2px 3px);
  transform: translate(-50%, -50%) rotateY(90deg)
    translateZ(calc(var(--bw) / 2));
}

/* Горен и долен раб */
.cssbook-top,
.cssbook-bottom {
  width: var(--bw);
  height: var(--bt);
  background: repeating-linear-gradient(180deg, #efe7d8 0 2px, #ddd2bf 2px 3px);
}
.cssbook-top {
  transform: translate(-50%, -50%) rotateX(90deg)
    translateZ(calc(var(--bh) / 2));
}
.cssbook-bottom {
  transform: translate(-50%, -50%) rotateX(-90deg)
    translateZ(calc(var(--bh) / 2));
}

/* Благо лебдење горе-долу */
@keyframes bookFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cssbook-float {
    animation: none;
  }
  .cssbook-box {
    transition: none;
  }
}

@media (min-width: 760px) {
  .sales-hero-inner {
    flex-direction: row;
    align-items: center;
    gap: 48px;
    padding-block: 56px 72px;
    text-align: left;
  }
  .sales-hero-copy {
    flex: 1 1 56%;
  }
  .sales-hero-sub {
    margin: 0;
  }
  .sales-hero-actions {
    flex-direction: row;
    width: auto;
    max-width: none;
    margin-inline: 0;
  }
  .sales-hero-actions .btn {
    width: auto;
  }
  .sales-trust {
    justify-content: flex-start;
  }
  .sales-hero-visual {
    flex: 1 1 44%;
    order: 0; /* десктоп: книгата десно од копијата */
    margin: 0;
  }
  .book3d-stage {
    width: min(100%, 430px);
  }
  .cssbook {
    --bw: 258px;
    --bh: 352px;
    --bt: 40px;
  }
}

/* ---------- Што има внатре — мрежа од картички ---------- */
.inside {
  background: var(--white);
}
.inside-inner {
  padding-block: 56px;
}
.inside-lead {
  max-width: 34rem;
  margin-inline: auto;
}
.inside-lead .section-title-handwritten,
.inside-notes-col .section-title-handwritten {
  text-align: center;
}

/* Содржина како вистински готвач + белешки зошто е поинаква */
.inside-book {
  margin-top: 28px;
  display: grid;
  gap: 24px;
}

/* --- Содржина (table of contents) --- */
.toc {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(142, 58, 58, 0.28);
  border-radius: var(--radius);
  padding: 26px 22px 22px;
  box-shadow: 0 18px 44px -30px rgba(27, 26, 26, 0.5);
}
/* тенка линија што потсетува на 'рбет' на книга */
.toc::before {
  content: "";
  position: absolute;
  inset: 6px auto 6px 0;
  width: 3px;
  border-radius: 3px;
  background: var(--red);
  opacity: 0.55;
}
.toc-head {
  margin: 0 0 16px;
  font-family: var(--font-hand);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--red);
}
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.toc-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.toc-list li:first-child {
  border-top: 0;
}
.toc-name {
  counter-increment: toc;
  font-family: var(--font-head);
  font-size: 1.06rem;
  color: var(--black);
}
.toc-name::before {
  content: counter(toc, decimal-leading-zero) ".";
  margin-right: 9px;
  color: var(--red);
  font-size: 0.9rem;
}
.toc-dots {
  flex: 1;
  align-self: center;
  height: 0;
  border-bottom: 1px dotted rgba(27, 26, 26, 0.35);
}
.toc-count {
  font-family: var(--font-head);
  font-size: 1.06rem;
  color: var(--red);
  min-width: 1.6em;
  text-align: right;
}
.toc-foot {
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 2px solid rgba(142, 58, 58, 0.25);
  font-size: 0.95rem;
  color: var(--ink-70);
}
.toc-foot strong {
  color: var(--black);
}

/* --- Белешки: зошто е поинаква --- */
/* Мобилно: истиот „книга-картичка" изглед како .toc (без нумерирање). Ресетиран на десктоп. */
.inside-notes {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(142, 58, 58, 0.28);
  border-radius: var(--radius);
  padding: 26px 22px 22px;
  box-shadow: 0 18px 44px -30px rgba(27, 26, 26, 0.5);
}
.inside-notes::before {
  content: "";
  position: absolute;
  inset: 6px auto 6px 0;
  width: 3px;
  border-radius: 3px;
  background: var(--red);
  opacity: 0.55;
}
.inside-notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.inside-notes-list li {
  position: relative;
  padding-left: 22px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-70);
}
.inside-notes-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--red);
  transform: rotate(45deg);
  border-radius: 2px;
}
.inside-notes-key {
  color: var(--black);
  font-weight: 700;
}

@media (min-width: 760px) {
  .inside-inner {
    padding-block: 92px;
  }
  /* Десктоп: истиот стек-изглед како на мобилен — две картички една над друга, центрирани */
  .inside-book {
    max-width: 40rem;
    margin-inline: auto;
    margin-top: 32px;
    gap: 24px;
  }
  .toc {
    padding: 30px 28px 26px;
  }
}

/* ---------- За кого е / трансформација ---------- */
.fit {
  background: var(--white);
}
.fit-inner {
  padding-block: 56px;
  max-width: 720px;
}
.fit-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.fit-list li {
  position: relative;
  padding-left: 26px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-70);
}
.fit-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 9px;
  height: 9px;
  background: var(--red);
  transform: rotate(45deg);
  border-radius: 2px;
}
.fit-bridge {
  font-family: var(--font-hand);
  font-size: clamp(1.6rem, 6.5vw, 2.4rem);
  line-height: 1.3;
  color: var(--red);
  text-align: center;
  margin: 28px auto 0;
  max-width: 30ch;
}

@media (min-width: 760px) {
  .fit-inner {
    padding-block: 92px;
  }
  .fit-list {
    gap: 18px;
  }
  .fit-list li {
    font-size: 1.08rem;
  }
}

/* ---------- За Мама (кратка верзија) ---------- */
.sales-mama {
  background: var(--white);
}
.sales-mama-inner {
  padding-block: 56px;
}
.sales-mama-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.sales-mama-photo {
  width: 190px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 14px 30px -12px rgba(27, 26, 26, 0.35);
}
.sales-mama-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 18px;
  color: var(--red);
  font-weight: 700;
  font-size: 0.98rem;
}
.sales-mama-link:hover {
  color: var(--red-dark);
}

@media (min-width: 760px) {
  .sales-mama-inner {
    padding-block: 92px;
  }
  .sales-mama-layout {
    flex-direction: row;
    align-items: center;
    gap: 52px;
    max-width: 880px;
    margin-inline: auto;
    text-align: left;
  }
  .sales-mama-photo {
    flex: 0 0 auto;
    width: 240px;
  }
  .sales-mama-content .section-lead {
    margin: 0;
  }
}

/* ---------- Понуда: светла „картичка со цена" (различна од темните рецензии) ---------- */
.offer {
  background: linear-gradient(180deg, var(--white), rgba(142, 58, 58, 0.06));
}
.offer-inner {
  padding-block: 56px;
}
.offer-panel {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(142, 58, 58, 0.16);
  border-top: 5px solid var(--red);
  border-radius: 22px;
  padding: 32px 20px;
  max-width: 560px;
  margin-inline: auto;
  color: var(--ink-70);
  box-shadow: 0 30px 60px -34px rgba(27, 26, 26, 0.45);
}

/* Значка за попуст — жолт кружен печат горе-десно */
.offer-badge {
  position: absolute;
  top: -16px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  font-family: var(--font-head);
  font-size: 1.15rem;
  line-height: 1;
  transform: rotate(9deg);
  box-shadow: 0 8px 18px -8px rgba(27, 26, 26, 0.5);
}

.offer-head {
  text-align: center;
  margin-bottom: 4px;
}
.offer-head .eyebrow {
  color: var(--red);
}
.offer-title {
  color: var(--black);
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  margin: 0;
}

/* Вредносна листа: ставка · вредност */
.offer-stack {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.offer-stack li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--ink-70);
}
.offer-stack li:first-child {
  border-top: 0;
}
.stack-val {
  color: var(--red);
  font-weight: 700;
  white-space: nowrap;
}
/* Вкупна вредност — прецртана, како последна ставка од листата */
.offer-stack-total {
  margin-top: 4px;
  border-top: 2px solid var(--line);
  color: var(--ink-55);
}
.offer-stack-total s {
  color: var(--ink-55);
}

/* Цена — стара (прецртана) до нова, со црвено „заштеди" балонче */
.offer-price {
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.offer-price-figures {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}
.offer-price-now {
  font-family: var(--font-head);
  font-size: 3rem;
  line-height: 1;
  color: var(--red);
}
.offer-price-note {
  font-size: 0.85rem;
  color: var(--ink-55);
}

/* Order bump — чекбокс НАД копчето за купување */
.bump {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  padding: 14px;
  border: 1px solid rgba(142, 58, 58, 0.22);
  border-radius: 14px;
  background: var(--red-soft);
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.bump:hover {
  background: rgba(142, 58, 58, 0.12);
}
.bump input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  accent-color: var(--red);
  cursor: pointer;
}
.bump-cover {
  flex: 0 0 auto;
  width: 46px;
  border-radius: 4px;
  box-shadow: 0 6px 14px -6px rgba(27, 26, 26, 0.4);
}
.bump-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-70);
}
.bump-text strong {
  color: var(--red);
  font-weight: 700;
}

/* Копче за купување — полн црвен CTA на светла картичка */
.offer-buy {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.offer-buy .btn {
  width: 100%;
}
.offer-note {
  margin: 0;
  min-height: 1.2em;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--red);
}

/* Начини на плаќање — бели чипови со тенка рамка (доверба) */
.pay-icons {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.pay-logo {
  display: block;
  height: 30px;
  width: auto;
  border-radius: 5px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px -3px rgba(27, 26, 26, 0.28);
}

/* Гаранција + микро-доверба */
.offer-guarantee {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.offer-guarantee svg {
  flex: 0 0 auto;
  color: var(--red);
  margin-top: 2px;
}
.offer-guarantee p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-70);
}
.offer-guarantee strong {
  color: var(--black);
}
.offer-micro {
  margin: 16px 0 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-55);
}

@media (min-width: 760px) {
  .offer-inner {
    padding-block: 92px;
  }
  .offer-panel {
    padding: 40px 44px;
  }
  .offer-badge {
    width: 66px;
    height: 66px;
    font-size: 1.3rem;
    right: 26px;
  }
  .offer-price-now {
    font-size: 3.4rem;
  }
}

/* ---------- FAQ на продажна страница — потесна листа без табови ---------- */
.sales-faq-inner {
  max-width: 760px;
}

/* ---------- Завршен CTA (темна лента) ---------- */
.sales-cta {
  background: var(--black);
  text-align: center;
}
.sales-cta-inner {
  padding-block: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sales-cta .eyebrow {
  color: var(--yellow);
}
.sales-cta-title {
  color: var(--white);
  font-size: clamp(1.9rem, 6.5vw, 2.8rem);
  line-height: 1.12;
  margin: 0 0 26px;
  max-width: 22ch;
}

@media (min-width: 760px) {
  .sales-cta-inner {
    padding-block: 88px;
  }
}

/* Светла варијанта на завршниот CTA (пр. FAQ страница) */
.sales-cta-plain {
  background: var(--white);
  margin-bottom: 30px;
}
.sales-cta-plain .sales-cta-title {
  color: var(--black);
}

/* ---------- Тенок футер (продажни страници) ---------- */
.footer-slim .footer-inner {
  padding-block: 36px 24px;
}
.footer-slim-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.footer-slim-logo {
  height: 64px;
  width: auto;
}
.footer-slim-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  font-size: 0.92rem;
}
.footer-slim-nav a {
  color: rgba(250, 250, 250, 0.75);
  transition: color 0.2s var(--ease);
}
.footer-slim-nav a:hover {
  color: var(--white);
}
.footer-slim .footer-bottom {
  margin-top: 26px;
  justify-content: center;
}
.footer-slim .footer-copy {
  flex: 0 1 auto;
  margin: 0;
}

@media (min-width: 760px) {
  .footer-slim .footer-inner {
    padding-block: 44px 26px;
  }
  .footer-slim .footer-bottom {
    justify-content: space-between;
  }
}

/* =====================================================================
   КНИГИ — КАТАЛОГ (knigi.html)
   Три книги, по една во ред: 3Д корица лево, детали десно.
   ===================================================================== */
.catalog-hero {
  background: var(--white);
}
.catalog-hero-inner {
  padding-block: 48px 0;
  text-align: center;
}
.catalog-hero .section-title {
  margin-bottom: 12px;
}

.catalog {
  background: var(--white);
}
.catalog .container {
  /* Поголем простор меѓу насловот и првата книга */
  padding-block: 88px 64px;
}

.shelf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Еден ред = една книга (mobile: корица горе, детали долу) */
.shelf-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.shelf-item + .shelf-item {
  border-top: 1px solid var(--line);
  padding-top: 48px;
}

.shelf-visual {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

/* Зимница — 3Д корица без вистинска слика (сè уште во подготовка) */
.cssbook-front-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  background: var(--red-dark);
  box-shadow:
    0 26px 48px -20px rgba(27, 26, 26, 0.5),
    inset 0 0 0 1px rgba(250, 250, 250, 0.22);
}
.shelf-soon-brand {
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.7);
}
.shelf-soon-title {
  font-family: var(--font-head);
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--white);
}
.shelf-soon-mark {
  width: 7px;
  height: 7px;
  background: var(--yellow);
  transform: rotate(45deg);
}

/* Детали: наслов, автор, опис (параграфи), CTA */
.shelf-details {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  text-align: center;
}
.shelf-title {
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  color: var(--black);
  margin: 0 0 4px;
}
.shelf-author {
  font-family: var(--font-hand);
  font-size: 1.25rem;
  color: var(--red);
  margin: 0 0 14px;
}
.shelf-desc {
  color: var(--ink-70);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 54ch;
  margin: 0 auto 14px;
}
.shelf-desc:last-of-type {
  margin-bottom: 24px;
}

.shelf-details .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Десктоп: секоја книга — корица лево, текст десно */
@media (min-width: 760px) {
  .catalog-hero-inner {
    padding-block: 64px 0;
  }
  .catalog .container {
    padding-block: 120px 96px;
  }
  .shelf {
    gap: 72px;
  }
  .shelf-item {
    flex-direction: row;
    align-items: center;
    gap: 56px;
  }
  .shelf-item + .shelf-item {
    padding-top: 72px;
  }
  .shelf-visual {
    flex: 0 0 340px;
  }
  .shelf-details {
    text-align: left;
  }
  .shelf-desc {
    margin-inline: 0;
  }
}

/* =====================================================================
   БЕСПЛАТНА ПОНУДА / LEAD MAGNET (besplatno.html)
   Една секција — да собере на еден екран, без скрол. Mobile-first.
   ===================================================================== */
.freebie {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  background: var(--white);
}
.freebie-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-block: 12px 14px;
  text-align: center;
}

/* Визуал — 3Д корица на бесплатната е-книга (компактна на мобилен) */
.freebie-visual {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}
.freebie .book3d-stage {
  width: auto;
  aspect-ratio: auto;
}
.freebie .cssbook {
  --bw: 138px;
  --bh: 188px;
  --bt: 24px;
}

.freebie-copy {
  width: 100%;
  max-width: 34rem;
}
.freebie-eyebrow {
  font-size: clamp(2.1rem, 9vw, 3rem);
  line-height: 1;
  margin-bottom: 6px;
}
.freebie-title {
  font-size: clamp(1.8rem, 6vw, 2.1rem);
  line-height: 1.14;
  color: var(--black);
  margin: 0 0 10px;
}
.freebie-sub {
  color: var(--ink-70);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 auto 18px;
  max-width: 42ch;
}

/* Предности — 2 колони на мобилен за да штедиме висина */
.freebie-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  text-align: left;
}
.freebie-list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--black);
}
.freebie-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.36em;
  width: 8px;
  height: 8px;
  background: var(--red);
  transform: rotate(45deg);
}

/* Форма — е-пошта прва работа, светла позадина */
.freebie-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 12px;
}
.freebie-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--black);
  background: var(--white);
  border: 1px solid rgba(27, 26, 26, 0.28);
  border-radius: var(--radius-pill);
  padding: 0.85em 1.3em;
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.freebie-input::placeholder {
  color: var(--ink-55);
}
.freebie-input:focus-visible {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}
.freebie-form .btn {
  width: 100%;
}
.freebie-note {
  margin: 0;
  min-height: 0;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--red);
}
.freebie-note:not(:empty) {
  margin-top: 2px;
}
.freebie-note.is-ok {
  font-family: var(--font-hand);
  font-size: 1.2rem;
}

.freebie-trust {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-55);
  max-width: 40ch;
}

/* Десктоп: корица лево, копија десно — центрирано во екранот */
@media (min-width: 760px) {
  .freebie-inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 56px;
    text-align: left;
    padding-block: 40px;
  }
  .freebie .cssbook {
    --bw: 314px;
    --bh: 472px;
    --bt: 40px;
  }
  .freebie-copy {
    flex: 1 1 auto;
    max-width: 30rem;
  }
  .freebie-title {
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    margin-bottom: 12px;
  }
  .freebie-sub {
    font-size: 1.05rem;
    margin-inline: 0;
    max-width: none;
  }
  .freebie-list li {
    font-size: 0.95rem;
  }
  .freebie-form {
    flex-direction: row;
    max-width: none;
    margin-inline: 0;
    flex-wrap: wrap;
  }
  .freebie-input {
    flex: 1 1 200px;
  }
  .freebie-form .btn {
    width: auto;
    flex: 0 0 auto;
  }
  .freebie-note {
    flex-basis: 100%;
  }
  .freebie-trust {
    margin-inline: 0;
  }
}

/* =====================================================================
   БЛАГОДАРНОСТ / THANK-YOU (post-purchase)
   ===================================================================== */
.thankyou {
  background: var(--white);
  min-height: 100dvh;
  display: flex;
  align-items: center;
}
.thankyou-inner {
  padding-block: 56px;
  text-align: center;
  max-width: 620px;
}
.thankyou-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  box-shadow: 0 12px 28px -12px rgba(142, 58, 58, 0.6);
  animation: ty-pop 0.6s var(--ease) both;
}
/* Цртање на квачката */
.thankyou-badge svg path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: ty-check 0.5s var(--ease) 0.35s forwards;
}
@keyframes ty-pop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ty-check {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .thankyou-badge,
  .thankyou-badge svg path {
    animation: none;
  }
  .thankyou-badge svg path {
    stroke-dashoffset: 0;
  }
}
.thankyou-title {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  line-height: 1.15;
  color: var(--black);
  margin: 22px 0 0;
}
.thankyou-sub {
  margin: 14px auto 0;
  max-width: 52ch;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(27, 26, 26, 0.78);
}

/* Чекори — што следува */
.thankyou-steps {
  list-style: none;
  margin: 34px auto 0;
  padding: 22px;
  max-width: 500px;
  text-align: left;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(27, 26, 26, 0.03);
}
.thankyou-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.thankyou-steps li + li {
  margin-top: 18px;
}
.ty-step-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ty-step-text {
  color: rgba(27, 26, 26, 0.82);
  line-height: 1.5;
}
.ty-step-text strong {
  color: var(--black);
}

.thankyou-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}
/* Двете копчиња — еднаква големина, помали */
.thankyou-actions .btn {
  width: 220px;
  justify-content: center;
}
.thankyou-help {
  margin-top: 26px;
  font-size: 0.92rem;
  color: rgba(27, 26, 26, 0.65);
}
.thankyou-help a {
  color: var(--red);
  font-weight: 700;
}

@media (min-width: 760px) {
  .thankyou-actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* ============================================================
   Post-purchase self-service (blagodarime.html) + recovery (recover.html)
   Added by backend phase 4. Design tokens only — no new colours.
   ============================================================ */

.ty-live { margin: 26px 0 6px; text-align: left; }
.ty-live[hidden] { display: none; }
.ty-panel { background: #fff; border: 1px solid #ecebe9; border-radius: 14px; padding: 20px; }
.ty-head { margin: 0 0 14px; }
.ty-spinner {
  width: 20px; height: 20px; border: 3px solid #e6e3e0; border-top-color: #8e3a3a;
  border-radius: 50%; display: inline-block; vertical-align: -4px; margin-right: 10px;
  animation: ty-spin 0.9s linear infinite;
}
@keyframes ty-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ty-spinner { animation-duration: 3s; } }

.ty-book {
  display: block; background: #8e3a3a; color: #fafafa; text-decoration: none;
  text-align: center; padding: 17px 20px; border-radius: 12px; font-size: 18px;
  font-weight: 700; margin: 0 0 10px;
}
.ty-sent { color: #5d5a5a; font-size: 15.5px; margin: 14px 0 0; }
.ty-link {
  background: none; border: 0; padding: 0; color: #8e3a3a; font: inherit;
  font-size: 15.5px; text-decoration: underline; cursor: pointer;
}
.ty-msg { margin-top: 12px; font-size: 15.5px; }

/* Shared form styling for the correction form and the recovery form. */
.ty-fix, .recover-form { margin-top: 14px; }
.ty-fix[hidden] { display: none; }
.ty-fix label, .recover-form label {
  display: block; font-weight: 700; margin-bottom: 6px; font-size: 15.5px;
}
.ty-fix input, .recover-form input {
  width: 100%; padding: 14px; font-size: 17px; font-family: inherit;
  border: 2px solid #ddd; border-radius: 10px; background: #fff;
}
.ty-fix input:focus, .recover-form input:focus { outline: none; border-color: #8e3a3a; }
.ty-fix button[type="submit"], .recover-form button[type="submit"] {
  width: 100%; margin-top: 10px; padding: 16px; font-size: 17px; font-weight: 700;
  font-family: inherit; color: #fafafa; background: #8e3a3a; border: 0;
  border-radius: 10px; cursor: pointer;
}
.ty-fix button[disabled], .recover-form button[disabled] { opacity: 0.6; cursor: default; }

.recover-inner { max-width: 560px; margin: 0 auto; padding: 48px 20px 72px; }
.recover-msg {
  margin-top: 24px; padding: 18px; border-radius: 12px; background: #fff;
  border-left: 4px solid #edcb6f; display: none;
}
.recover-msg.is-visible { display: block; }
.recover-help { margin-top: 32px; color: #5d5a5a; font-size: 15.5px; }

@media (max-width: 390px) {
  .recover-inner { padding: 32px 16px 56px; }
  .ty-book { font-size: 17px; padding: 16px; }
}

/* ============================================================
   Reviews — submission page (recenzija.html) + live rating widgets
   Added by backend phase 7. Design tokens only.
   ============================================================ */

.rv-inner { max-width: 620px; margin: 0 auto; padding: 48px 20px 80px; }
.rv-note { background: #fff; border: 1px solid #ecebe9; border-radius: 14px;
  padding: 20px; margin-top: 20px; }
.rv-note[hidden] { display: none; }
.rv-thanks-title { font-family: Alice, Georgia, serif; font-size: 22px; margin: 0 0 10px; }
.rv-again-q { margin: 14px 0 10px; }

#rv-form[hidden] { display: none; }
#rv-form label, .rv-label { display: block; font-weight: 700; margin: 20px 0 6px; }
#rv-form input[type="text"], #rv-form textarea {
  width: 100%; padding: 14px; font-size: 17px; font-family: inherit;
  border: 2px solid #ddd; border-radius: 10px; background: #fff;
}
#rv-form input[type="text"]:focus, #rv-form textarea:focus {
  outline: none; border-color: #8e3a3a;
}
#rv-form textarea { resize: vertical; min-height: 140px; }
#rv-form button, #rv-again button {
  width: 100%; margin-top: 18px; padding: 17px; font-size: 18px; font-weight: 700;
  font-family: Alice, Georgia, serif; color: #fafafa; background: #8e3a3a;
  border: 0; border-radius: 10px; cursor: pointer; min-height: 52px;
}
#rv-form button[disabled] { opacity: 0.6; cursor: default; }
.rv-hint { color: #5d5a5a; font-size: 14.5px; margin: 8px 0 0; }
.rv-msg { margin-top: 14px; font-size: 15.5px; }
.rv-msg.is-bad { color: #a8322a; }
.rv-forbook { color: #5d5a5a; }

/* Book picker for bundle buyers */
.rv-pick { display: grid; gap: 10px; }
.rv-chip { display: flex; align-items: center; gap: 10px; padding: 15px;
  border: 2px solid #ddd; border-radius: 12px; background: #fff; cursor: pointer;
  min-height: 52px; }
.rv-chip input { width: 22px; height: 22px; accent-color: #8e3a3a; flex: 0 0 auto; }
.rv-chip:has(input:checked) { border-color: #8e3a3a; background: #fdf8f7; }

/* Star rating — a real radio group, large enough for a thumb */
.rv-stars { border: 0; padding: 0; margin: 22px 0 0; }
.rv-stars legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.rv-star-row { display: flex; gap: 6px; }
.rv-star { position: relative; cursor: pointer; line-height: 1;
  font-size: 40px; color: #d8d3cd; padding: 4px; min-width: 48px; text-align: center; }
.rv-star input { position: absolute; opacity: 0; width: 100%; height: 100%;
  left: 0; top: 0; margin: 0; cursor: pointer; }
.rv-star.is-on { color: #edcb6f; }
.rv-star input:focus-visible + span { outline: 2px solid #8e3a3a; outline-offset: 3px;
  border-radius: 4px; }

/* Aggregate rating widget, e.g. near a buy button */
[data-gsm-rating] { display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 16px; }
.gsm-rate-stars { color: #edcb6f; letter-spacing: 1px; }
.gsm-rate-num { font-weight: 700; }
.gsm-rate-count { color: #5d5a5a; font-size: 14.5px; }

@media (max-width: 390px) {
  .rv-inner { padding: 32px 16px 60px; }
  .rv-star { font-size: 34px; min-width: 44px; }
}

/* =====================================================================
   Согласност за колачиња (Consent Mode v2 banner)
   Website spec §7. Приказ само за посетители од ЕЕА/ОК — js/tracking.js.

   Ова е бар на дното, не модал: аудиториумот е мобилен и доаѓа од Instagram
   bio-линк, па блокирање на екранот пред да се види понудата е директна
   загуба на конверзија. Барот не покрива ништо освен долниот раб.
   ===================================================================== */
.gsm-consent {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 40px -12px rgba(27, 26, 26, 0.45);
  /* Респектирај го safe-area-та на iPhone со home indicator */
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.gsm-consent-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-70);
}

.gsm-consent-text a {
  color: var(--red);
}

.gsm-consent-btns {
  display: flex;
  gap: 10px;
}

/* Двете копчиња се еднакво достапни. „Одбиј" сокриено или ситно е и
   неусогласено со GDPR и очигледен трик — што кај 40+ публика чини доверба. */
.gsm-consent-btns .btn {
  flex: 1;
  min-height: 44px;
}

@media (min-width: 640px) {
  .gsm-consent {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(720px, calc(100% - 32px));
    flex-direction: row;
    align-items: center;
  }

  .gsm-consent-btns {
    flex: 0 0 auto;
  }

  .gsm-consent-btns .btn {
    flex: 0 0 auto;
  }
}