/* ==========================================================================
   My Hero Storybooks, style.css
   Palette: warm cream, midnight blue, starlight gold, soft lilac
   ========================================================================== */

/* Боите, фонтовите, заоблувањата и сенките се во css/tokens.css (дизајн системот,
   03 Бренд/ФИНАЛ Бренд систем). Тука нема :root, за да не ги прегази. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  overflow-x: hidden;
}

/* height:auto is required, otherwise max-width shrinks the width while the
   HTML height attribute stays fixed and the image is vertically stretched. */
img { max-width: 100%; height: auto; display: block; }

/* padding-inline, not the padding shorthand: .nav sits on the SAME element
   ("class=container nav") and a shorthand on either side silently wipes out
   the other axis. That collision was why the header had no side padding at
   all on a tablet — the logo touched the edge of the screen — and no vertical
   padding on a phone, where the bar was exactly as tall as the burger. */
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: 24px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; }
/* Насловите се делат во рамномерни редови, за да не остане еден збор сам во
   последниот ред („...избираат / први"). Пасусите избегнуваат сам збор на
   крајот. Македонскиот и германскиот се подолги од англискиот, па без ова
   секој трет наслов завршуваше со вдовица. Постар прелистувач го игнорира
   правилото и делењето останува како порано. */
h1, h2, h3 { text-wrap: balance; }
p, li, .tagline, .lead { text-wrap: pretty; }

.section { padding: 96px 0; position: relative; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--midnight); }
.section-head p { margin-top: 14px; color: var(--ink-soft); font-size: 1.08rem; }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lilac-text);
  margin-bottom: 14px;
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--midnight);
  box-shadow: 0 10px 26px rgba(242, 193, 78, 0.4);
}
.btn-gold:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 34px rgba(242, 193, 78, 0.55); }
.btn-ghost { background: transparent; color: var(--cream); border-color: rgba(250, 243, 227, 0.5); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-soft); transform: translateY(-3px); }
.btn-midnight { background: var(--midnight-2); color: var(--cream); }
.btn-midnight:hover { background: var(--midnight-3); transform: translateY(-3px); }
.btn[disabled], .btn.is-disabled { opacity: 0.55; pointer-events: none; }

/* Header ----------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.site-header.is-scrolled {
  background: var(--header-glass);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(10, 14, 34, 0.35);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}
.logo svg { width: 40px; height: 40px; }

.nav-links { display: flex; align-items: center; gap: 20px; list-style: none; }
/* min 24px tall hit area, WCAG 2.5.8 */
.nav-links a { color: rgba(250, 243, 227, 0.88); text-decoration: none; font-weight: 700; font-size: 0.95rem; transition: color 0.2s; display: inline-block; padding: 6px 4px; }
.nav-links a:hover { color: var(--gold); }
/* Buttons keep their own colour: .nav-links a would otherwise win on
   specificity and leave cream text on a gold pill (1.2:1, unreadable). */
.nav-links a.btn { padding: 10px 22px; font-size: 0.9rem; }
.nav-links a.btn-gold, .nav-links a.btn-gold:hover { color: var(--midnight); }
.nav-links a.btn-ghost { color: var(--cream); }
.nav-links a.btn-midnight { color: var(--cream); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px; height: 44px;
  position: relative;
  z-index: 70;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 3px;
  border-radius: 2px;
  background: var(--cream);
  margin: 5px auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Hero ------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: radial-gradient(120% 90% at 50% 0%, var(--midnight-3) 0%, var(--midnight-2) 45%, var(--midnight) 100%);
  color: var(--cream);
  padding: 140px 0 80px;
  overflow: hidden;
}
#starfield { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  color: var(--cream-soft);
}
.hero h1 .gold-script { color: var(--gold); }
.hero-sub { margin: 22px 0 34px; font-size: 1.15rem; color: rgba(250, 243, 227, 0.85); max-width: 480px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-note { margin-top: 22px; font-size: 0.85rem; color: rgba(201, 184, 232, 0.85); }

/* Padding gives the badge and the book's shadow room so neither is clipped. */
.hero-art { position: relative; perspective: 1800px; padding: 10px 26px 0 90px; }

/* ---- 3D hardcover book mockup ----------------------------------------
   A square 21 x 21 cm book turned slightly toward the viewer: front cover,
   spine on the left, stacked page edges on the right, contact shadow below.
   Pure CSS so it works with any story cover image. */
/* Портрет 3:4 — обликот на сликата што стои на насловната. Книгата што се
   печати е квадратна 21 x 21; ако некогаш насловната се смени во квадратна
   корица, овде се враќа 1 / 1. */
/* КВАДРАТНА КНИГА СО МЕКИ КОРИЦИ, 21 × 21 см (23.09.2026).
   Порано макетата беше висока книга со тврди корици, 3:4, а книгата што се
   испорачува е квадратна и мека. Родител што гледа ваква слика очекува друг
   предмет од тој што ќе стигне. Сега: квадрат, тенок рбет, тенок сноп
   страници, помали заоблувања како на мека корица. */

/* The artwork is square and matches the cover exactly, so object-fit crops
   nothing. */

/* The title is painted into the cover artwork itself, with filigree woven
   around the letters, so there is no HTML text layer here. Type that is part
   of the illustration reads as a real printed book; type floating on top reads
   as a website with a picture behind it. */
/* ── Floating proof card ────────────────────────────────────────────────
   The photo a parent sent, next to the hero we drew from it, floating over
   the bottom corner of the book.

   Overlapping the cover is the whole point: the same card placed in its own
   section further down reads as a generic feature, while sitting on the book
   it reads as evidence about THIS book. It lives outside .book-cover, which
   has overflow:hidden, or it would be clipped back inside the frame. */


/* soft sheen across the laminated cover */

/* hinge and spine along the left edge */

/* stacked page block peeking out on the right */

/* Photo to hero proof card. Deliberately in normal flow underneath the book:
   an absolutely positioned card used to sit on top of the cover and crop it. */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.scroll-hint {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(250, 243, 227, 0.75);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 12px;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0);} 50% { transform: translate(-50%, 8px);} }

/* Wavy divider */
.wave { display: block; width: 100%; height: 70px; margin-top: -1px; }

/* Story worlds ----------------------------------------------------------- */

/* Препораките на Сара (22.09.2026). На почетната, „Ages" останува горе лево,
   а препораката стои горе десно во боја; картичката добива прстен во иста
   боја. Истите три бои како во продавницата. */

/* Ознаката „Ages" на картичките е тргната 22.09.2026 на барање. Возраста
   останува на страницата на приказната и во описот. */

/* See all stories row under the most popular strip */
.popular-more { text-align: center; margin-top: 44px; }
.popular-note { margin-top: 14px; font-size: 0.9rem; color: var(--ink-soft); }

/* Transformation --------------------------------------------------------- */
.transform-section { background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-2) 100%); color: var(--cream); }
.transform-section .section-head h2 { color: var(--cream-soft); }
.transform-section .section-head p { color: rgba(250, 243, 227, 0.75); }
.transform-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.ba-slider {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  width: min(100%, 460px);
  margin: 0 auto;
  box-shadow: var(--shadow-deep), 0 0 0 6px rgba(242, 193, 78, 0.18);
  user-select: none;
  touch-action: none;
  cursor: ew-resize;
}
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-after { clip-path: inset(0 0 0 50%); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 4px;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(242, 193, 78, 0.8);
  pointer-events: none;
}
.ba-handle::after {
  content: "✦";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  background: var(--gold);
  color: var(--midnight);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.ba-label {
  position: absolute;
  top: 16px;
  background: rgba(20, 27, 60, 0.8);
  color: var(--cream-soft);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}
.ba-label.before { left: 16px; }
.ba-label.after { right: 16px; background: rgba(242, 193, 78, 0.92); color: var(--midnight); }

.transform-copy h3 { font-size: 1.7rem; color: var(--gold-soft); margin-bottom: 18px; }

/* How it works ----------------------------------------------------------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  position: relative;
}
.step-card {
  background: var(--cream-soft);
  border-radius: var(--radius);
  padding: 40px 30px 34px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(201, 184, 232, 0.35);
  position: relative;
  transition: transform 0.35s ease;
}
.step-card:hover { transform: translateY(-8px); }
.step-icon {
  width: 92px; height: 92px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--midnight-3), var(--midnight));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(20, 27, 60, 0.3);
}
.step-icon svg { width: 46px; height: 46px; }
.step-num {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--midnight);
  font-weight: 800;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(242, 193, 78, 0.5);
}
.step-card h3 { font-size: 1.25rem; color: var(--midnight); margin-bottom: 10px; }
.step-card p { font-size: 0.95rem; color: var(--ink-soft); }
.steps-footnote { text-align: center; margin-top: 36px; color: var(--ink-soft); font-size: 0.92rem; }

/* Sparkle icon animations */

@keyframes spin { to { transform: rotate(360deg); } }
.pulse { animation: pulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.85; } }

/* Starlight Map ---------------------------------------------------------- */

/* Privacy ---------------------------------------------------------------- */
.privacy-section { background: var(--dawn); }
.privacy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.privacy-card {
  background: var(--cream-soft);
  border-radius: var(--radius);
  padding: 34px 28px;
  box-shadow: var(--shadow-soft);
  border-top: 4px solid var(--lilac);
  transition: transform 0.3s ease;
}
.privacy-card:hover { transform: translateY(-6px); }
.privacy-card:nth-child(2) { border-top-color: var(--gold); }
.privacy-card:nth-child(3) { border-top-color: var(--midnight-2); }
.privacy-card .p-icon {
  width: 58px; height: 58px;
  border-radius: var(--radius-md);
  background: rgba(201, 184, 232, 0.25);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.privacy-card h3 { font-size: 1.15rem; color: var(--midnight); margin-bottom: 10px; }
.privacy-card p { font-size: 0.93rem; color: var(--ink-soft); }
.privacy-fineprint {
  margin-top: 40px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: 720px;
  margin-inline: auto;
}

/* Signup ----------------------------------------------------------------- */
.signup-section {
  background: radial-gradient(100% 140% at 50% 0%, var(--midnight-3) 0%, var(--midnight) 70%);
  color: var(--cream);
  text-align: center;
  overflow: hidden;
  position: relative;
}
.signup-inner { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; }
.signup-inner h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--cream-soft); }
.signup-inner > p { margin: 16px 0 34px; color: rgba(250, 243, 227, 0.8); }
.signup-form { display: flex; gap: 12px; max-width: 520px; margin: 0 auto; }
.signup-form input {
  flex: 1;
  padding: 16px 22px;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(250, 243, 227, 0.25);
  background: rgba(250, 243, 227, 0.08);
  color: var(--cream-soft);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.25s;
}
.signup-form input::placeholder { color: rgba(250, 243, 227, 0.5); }
.signup-form input:focus { border-color: var(--gold); }
.signup-form input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.signup-msg { margin-top: 18px; font-weight: 700; min-height: 1.5em; }
.signup-msg.ok { color: var(--gold-soft); }
.signup-msg.err { color: var(--danger); }
.signup-privacy { margin-top: 14px; font-size: 0.8rem; color: rgba(201, 184, 232, 0.75); }

/* Footer ----------------------------------------------------------------- */
.site-footer { background: var(--midnight-deep); color: rgba(250, 243, 227, 0.75); padding: 56px 0 34px; }
.footer-grid {
  display: grid;
  /* Четврта колона: адресата за контакт. auto-fit ја враќа мрежата во ред
     на потесни екрани без посебна точка на прекршување. */
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-grid .logo { margin-bottom: 14px; }
.footer-grid p { font-size: 0.9rem; max-width: 320px; }
/* h3, не h4: по h2 во страницата, h4 е прескокнато ниво за читач на екран. */
.footer-grid h3 { color: var(--cream-soft); font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; margin-bottom: 14px; }
.footer-grid ul { list-style: none; display: grid; gap: 4px; }
/* Само линковите во списоците. Порано ова беше `.footer-grid a`, што го
   фаќаше и логото: .footer-grid a (0,1,1) е поспецифично од .logo (0,1,0),
   па display: inline-block го газеше display: flex и маскотата паѓаше над
   името наместо лево од него. */
.footer-grid ul a { color: rgba(250, 243, 227, 0.82); text-decoration: none; font-size: 0.92rem; display: inline-block; padding: 6px 0; }
.footer-grid .logo { display: flex; }
.footer-grid a:hover { color: var(--gold); }
.footer-bottom a { display: inline-block; padding: 4px 0; }
.footer-bottom {
  border-top: 1px solid rgba(250, 243, 227, 0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
}

/* Shop page -------------------------------------------------------------- */
.shop-hero {
  background: radial-gradient(120% 100% at 50% 0%, var(--midnight-3) 0%, var(--midnight) 80%);
  color: var(--cream);
  padding: 170px 0 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.shop-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--cream-soft); position: relative; z-index: 2; }
.shop-hero p { margin-top: 16px; color: rgba(250, 243, 227, 0.8); max-width: 560px; margin-inline: auto; position: relative; z-index: 2; }

/* The artwork is 4:3. The image column keeps its own height so the card body
   stays in the second column, and object-fit trims only the vertical edges. */

.shop-note {
  margin-top: 48px;
  background: var(--cream-soft);
  border-radius: var(--radius);
  border: 1px dashed var(--lilac-deep);
  padding: 30px 34px;
  color: var(--ink-soft);
  font-size: 0.93rem;
}
/* h2 и h3 изгледаат исто овде: нивото го носи структурата, не изгледот. */
.shop-note h2,
.shop-note h3 { color: var(--midnight); margin-bottom: 10px;
  font-size: 1.1rem; font-family: var(--font-display); }
.shop-note ul { margin: 10px 0 0 20px; display: grid; gap: 6px; }

/* Accessibility helpers -------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -60px; left: 16px;
  z-index: 100;
  background: var(--gold);
  color: var(--midnight);
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 0 0 14px 14px;
  text-decoration: none;
  transition: top 0.25s ease;
}
.skip-link:focus { top: 0; }

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

button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Scroll reveal (only active when JS is available; content stays visible
   for no-JS visitors and search engines) ---------------------------------- */
html.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.22s; }
.reveal-d3 { transition-delay: 0.34s; }
.reveal-d4 { transition-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
  
  html { scroll-behavior: auto; }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1020px) {
  
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
  .hero-art { max-width: 560px; margin: 0 auto; }
  .steps-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .transform-wrap { grid-template-columns: 1fr; }
  
  .privacy-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  
}

@media (max-width: 760px) {
  .section { padding: 72px 0; }
  .hero { min-height: auto; padding: 120px 0 90px; }
  
  .signup-form { flex-direction: column; }
  .signup-form .btn { justify-content: center; }
  
  
  .footer-grid { grid-template-columns: 1fr; }
  
  
}

/* ── Peek inside ─────────────────────────────────────────────────────────
   Replaces the old "next adventure" teaser. A photograph of the real printed
   product does more selling than any description of it. */
.inside-section { background: var(--cream-soft); }
.inside-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  margin-top: 44px;
}
.inside-shot { margin: 0; }
.inside-shot img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.inside-copy h3 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  color: var(--midnight);
  margin-bottom: 14px;
}
.inside-copy h3 em { color: var(--lilac-text); font-style: normal; }
.inside-copy > p { color: var(--ink-soft); font-size: 1.06rem; max-width: 46ch; }
.inside-list { list-style: none; margin: 26px 0 30px; padding: 0; }
.inside-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  font-weight: 700;
  color: var(--midnight);
}
.inside-list .tick {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--midnight);
  font-size: 0.82rem;
  font-weight: 800;
}
@media (max-width: 1020px) {
  .inside-wrap { grid-template-columns: 1fr; gap: 34px; }
  .inside-copy { max-width: 560px; margin: 0 auto; }
}

/* ── Testimonials ────────────────────────────────────────────────────────
   A horizontal loop. The track holds the quote set twice and slides one
   set-width per cycle, so the end of the first copy hands off invisibly
   to the start of the second. Hover or keyboard focus pauses it. */
.quotes-section {
  background: linear-gradient(180deg, var(--cream) 0%, rgba(201, 184, 232, 0.18) 100%);
  overflow: hidden;
}
.quotes-section .section-head { margin-bottom: 10px; }
.quotes-marquee {
  padding: 26px 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.quotes-track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: max-content;
  animation: quotes-loop 48s linear infinite;
}
/* Half the track is one full set; the extra 12px is half the gap that sits
   on the seam between the two copies. */
@keyframes quotes-loop { to { transform: translateX(calc(-50% - 12px)); } }
/* The loop keeps rolling under the mouse; it only pauses for keyboard
   focus, where a moving target would be genuinely unusable. */
.quotes-track:focus-within { animation-play-state: paused; }

.quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  width: min(380px, 82vw);
  margin: 0;
  padding: 28px 28px 24px;
  background: var(--cream-soft);
  border: 1px solid rgba(201, 184, 232, 0.45);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.quote-card.is-midnight {
  background:
    radial-gradient(120% 120% at 85% -10%, rgba(201, 184, 232, 0.22) 0%, transparent 55%),
    var(--midnight);
  border-color: rgba(250, 243, 227, 0.14);
  box-shadow: var(--shadow-deep);
}

.quote-card blockquote {
  margin: 0 0 20px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.quote-card.is-midnight blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--cream-soft);
}
.quote-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.q-avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--lilac);
  color: var(--midnight);
  font-weight: 800;
  font-size: 1.05rem;
  flex: none;
}
.quote-card.is-midnight .q-avatar { background: var(--gold); }

/* The global reduced-motion rule further down kills every animation with
   !important, which froze this loop for anyone with Reduce Motion switched
   on. The owner wants the loop always rolling — it is slow, linear and
   pausable with keyboard focus — so it gets an explicit exemption at the
   end of the stylesheet. */

/* Exemption from the global reduced-motion kill: the testimonial loop keeps
   rolling for everyone. Placed last so it wins the cascade against the
   `* { animation: none !important }` rule above. */
@media (prefers-reduced-motion: reduce) {
  .quotes-track { animation: quotes-loop 48s linear infinite !important; }
  .quotes-track:focus-within { animation-play-state: paused !important; }
}

/* ── Notify-me popup ─────────────────────────────────────────────────────
   Small subscribe dialog for coming-soon stories, so "tell me when it
   lands" answers on the spot instead of sending the visitor home. */
.notify-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--scrim);
  backdrop-filter: blur(6px);
}
.notify-overlay[hidden] { display: none; }
.notify-card {
  position: relative;
  width: min(480px, 100%);
  padding: 38px 34px 30px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 120% at 85% -10%, rgba(201, 184, 232, 0.22) 0%, transparent 55%),
    var(--midnight);
  border: 1px solid rgba(250, 243, 227, 0.14);
  box-shadow: var(--shadow-deep);
  color: var(--cream);
  text-align: center;
}
.notify-card h3 {
  color: var(--cream-soft);
  font-size: 1.5rem;
  margin: 6px 0 8px;
}
.notify-sub { color: rgba(250, 243, 227, 0.8); font-size: 0.95rem; margin-bottom: 18px; }
.notify-form { justify-content: center; }
.notify-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(250, 243, 227, 0.1);
  color: var(--cream);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.notify-close:hover { background: rgba(250, 243, 227, 0.22); }
@media (max-width: 560px) {
  .notify-card { padding: 32px 20px 24px; }
  .notify-card .signup-form { flex-direction: column; }
  .notify-card .signup-form .btn { justify-content: center; }
}
.notify-form .btn { white-space: nowrap; }
.footer-credit { color: rgba(201, 184, 232, 0.7); font-size: 0.82rem; }

/* ── Mascot logo (P3 lockup) ─────────────────────────────────────────────
   Flat mascot + serif wordmark with gold italic "Hero" and letterspaced
   STORYBOOKS beneath, split by a thin gold rule. */
/* Висината на маскотата е и висината на златната линија. Еден број, за да
   не се разидат никогаш: заглавие, подножје и телефон. */
:root { --logo-h: 44px; }

/* The lockup must never wrap: mascot and wordmark sit on one line, always. */
.logo { flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 10px; }
/* Линијата е ::before, а не border-left, за да може да биде висока колку
   маскотата наместо колку двата реда букви. .logo-word мора да остане
   display: block: како flex, „My" и <em>Hero</em> стануваат посебни ставки
   и се редат една под друга. */

.site-footer .logo { --logo-h: 40px; }
@media (max-width: 560px) {
  :root { --logo-h: 38px; }
  
  
}
@media (max-width: 380px) {
  :root { --logo-h: 34px; }
  
}

/* Audit fixes: small tap targets. WCAG 2.5.8 wants at least 24px of target;
   these inline links measured 19-20px tall. */
.back-row a { display: inline-block; padding: 6px 2px; }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE FIRST — the phone is the primary screen for this shop.
   These rules come last so they win, and they fix real measured problems
   rather than guessing.
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 1020px) {
  /* THE BUG THIS FIXES: .hero-art carries padding-left:90px for the desktop
     book shadow. In a narrow column that padding consumed the entire width,
     the content box collapsed to 0, and the book — the single most important
     image on the site — silently disappeared on every phone.

     THE SECOND HALF OF THE SAME BUG: "margin: 0 auto" on a grid item cancels
     the default stretch, so .hero-art sized itself to its contents while its
     only child, .book-mockup, was asking for "min(100%, 400px)" of a parent
     whose width depended on that child. The circular reference resolved to
     zero and the book vanished on every tablet from 761px to 1020px — a
     range that covers the iPad mini, the iPad Air and the iPad Pro upright.
     An explicit width breaks the circle: the child now has a real number to
     take its percentage from. */
  .hero-art { padding: 8px 12px 0; width: 100%; }
}

@media (max-width: 760px) {
  /* Comfortable reading measure and rhythm on a phone. */
  .container { padding-inline: 20px; }
  .hero { padding: 108px 0 72px; }
  .hero h1 { font-size: clamp(2.1rem, 9.5vw, 3rem); line-height: 1.08; }
  .hero-sub { font-size: 1.04rem; max-width: 34ch; }
  .hero-note { font-size: 0.82rem; max-width: 32ch; margin-inline: auto; }

  /* Full-width buttons stacked: the thumb finds them without aiming. */
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-ctas .btn { justify-content: center; width: 100%; padding: 16px 24px; }

  /* The book stays the hero of the page, sized to the screen. */
  
  .hero-art { margin-top: 22px; }

  /* The scroll cue eats vertical space the CTA needs more. */
  .scroll-hint { display: none; }

  .section-head { margin-bottom: 40px; }
  .section-head h2 { font-size: clamp(1.7rem, 6.6vw, 2.2rem); }
  .section-head p { font-size: 1rem; }
}

@media (max-width: 560px) {
  /* WCAG 2.5.5 asks for 44px touch targets. These were measured at 36-37px. */
  .nav-links a,
  .footer-grid a,
  .footer-bottom a,
  .legal-nav a { min-height: 44px; display: flex; align-items: center; }
  .footer-grid ul { gap: 2px; }

  /* Nothing below 12px on a phone: it is unreadable at arm's length. */
  .footer-credit,
.footer-bottom,
.privacy-fineprint,
.steps-footnote,
.adapt-note { font-size: 0.8rem; }
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.14em; }

  /* One testimonial at a time, sized to the screen. */
  .quote-card { width: min(300px, 86vw); padding: 24px 22px 20px; }
  .quote-card.is-midnight blockquote { font-size: 1.04rem; }

  /* Story price cards go full width and stack, so the bundle reads clearly. */
  .story-prices { grid-template-columns: 1fr; }
  .story-ctas { flex-direction: column; }
  .story-ctas .btn, .story-ctas .btn-ghost { width: 100%; justify-content: center; }
}

/* ── Mobile hero: get the product on screen fast ──────────────────────────
   Measured problem: the copy stack pushed the book almost 1400px down, so a
   phone visitor scrolled past four screens of text before seeing what they
   are buying. Tightened type and spacing bring the book near the fold. */
@media (max-width: 760px) {
  .hero-inner { gap: 24px; }
  .hero-copy .eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
  }
  .hero-sub {
    margin: 14px auto 22px;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 30ch;
  }
  .hero-note { margin-top: 16px; }
  .hero-art { margin-top: 8px; }

  /* The proof card was hanging off the left edge (measured -5px). Pull it
     inside and shrink it so both thumbnails still read. */
  
  
}

/* Nothing below 11px anywhere on a phone. */

/* ── Story price cards: two editions, the bundle marked as the good one ── */
.price-card.is-best {
  border-color: var(--gold);
  background: rgba(242, 193, 78, 0.08);
  position: relative;
}
/* A real element, not CSS content: a badge written in the stylesheet is
   invisible to the translator and would stay English in every language. */
.price-card .best-badge {
  position: absolute;
  top: -11px;
  left: 16px;
  background: var(--gold);
  color: var(--midnight);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

/* ── Language picker ──────────────────────────────────────────────────────
   A flag plus the language written in that language. The flag is recognised
   before it is read, the name is what actually identifies the language — and
   the name is never dropped, because Windows draws flag emoji as a two-letter
   code rather than a picture.

   It is a button and a menu rather than a <select>, because browsers strip
   markup inside <option> and a bare list of names in eight alphabets is hard
   to scan. The keyboard behaviour of a select is reimplemented in i18n.js. */
.lang-wrap { position: relative; display: inline-flex; }
.lang-li { display: flex; align-items: center; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(250, 243, 227, 0.28);
  background: rgba(250, 243, 227, 0.1);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lang-btn:hover { border-color: var(--gold); background: rgba(242, 193, 78, 0.12); }
.lang-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.lang-flag { font-size: 1.05rem; line-height: 1; }
/* Fallback where the system has no emoji font: a small drawn globe, so the
   button still reads as "language" without an empty box next to the name. */
.lang-flag.is-globe {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-soft);
  position: relative;
  flex: none;
}
.lang-flag.is-globe::before,
.lang-flag.is-globe::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--gold-soft);
  border-radius: 50%;
}
.lang-flag.is-globe::before { border-width: 0 0 0 1.5px; left: 50%; margin-left: -0.75px; border-radius: 0; }
.lang-flag.is-globe::after { inset: 4.5px 0; border-width: 1.5px 0 0 0; border-radius: 0; }
.lang-opt .lang-flag.is-globe { border-color: rgba(250, 243, 227, 0.65); }
.lang-opt .lang-flag.is-globe::before,
.lang-opt .lang-flag.is-globe::after { border-color: rgba(250, 243, 227, 0.65); }
.lang-name { white-space: nowrap; }
.lang-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(250, 243, 227, 0.75);
  transition: transform 0.2s ease;
}
.lang-wrap.is-open .lang-caret { transform: rotate(180deg); }
.lang-wrap.is-open .lang-btn { border-color: var(--gold); }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 208px;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--midnight-3);
  border: 1px solid rgba(250, 243, 227, 0.16);
  box-shadow: 0 22px 48px rgba(8, 12, 30, 0.55);
  display: none;
  flex-direction: column;
  gap: 2px;
}
.lang-wrap.is-open .lang-menu { display: flex; }

.lang-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  min-height: 44px;              /* a comfortable tap target on a phone */
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(250, 243, 227, 0.9);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}
.lang-opt:hover { background: rgba(250, 243, 227, 0.09); color: var(--cream); }
.lang-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.lang-opt-name { flex: 1; }
.lang-tick { color: var(--gold); opacity: 0; font-size: 0.9rem; }
.lang-opt.is-current { color: var(--gold-soft); }
.lang-opt.is-current .lang-tick { opacity: 1; }

/* Legal pages have a header bar but no nav list, so the picker has to push
   itself to the right edge. */

/* ── The navigation bar switches to a menu at 900px, not 760px ──────────
   At 768px (an iPad mini held upright) the full bar needs 790px once the
   language button is in it — and 806px in Macedonian, where every word is
   longer. It was overflowing the header on the most common tablet there is. */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  /* The scrolled header's backdrop-filter makes the header the containing
     block for this fixed panel, so inset: 0 would size it to the header and
     spill the links over the page. Explicit viewport units keep it full
     screen either way, and visibility: hidden stops the closed menu from
     ever painting. */
  .nav-links {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--midnight-deep);
    flex-direction: column;
    justify-content: center;
    gap: 34px;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.6, 0, 0.2, 1), visibility 0s 0.4s;
    z-index: 65;
  }
  .nav-links.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.6, 0, 0.2, 1);
  }
  .nav-links a { font-size: 1.25rem; }
}

/* ── Readability floor ───────────────────────────────────────────────────
   Measured on a 375px phone, these labels were rendering at 9.6-11.5px.
   Small caps with wide letter-spacing look elegant in a mockup and are
   genuinely hard to read at arm's length, which is where a parent actually
   holds a phone. 12px is the floor for anything carrying words. */

.price-card .best-badge { font-size: 0.75rem; padding: 3px 10px; top: -12px; }

@media (max-width: 900px) {
  
  .eyebrow,
  .hero-copy .eyebrow { font-size: 0.8rem; letter-spacing: 0.12em; }
  .ba-label { font-size: 0.8rem; padding: 6px 12px; }
  
  .price-card .best-badge { font-size: 0.78rem; }
}

/* ── Touch targets, at every width, not only on the narrowest phone ───────
   A 768px tablet is touched with the same finger as a 375px phone, so the
   44px rule was being applied at exactly the wrong breakpoint. */
@media (hover: none), (max-width: 900px) {
  .nav-links a,
  .footer-grid a,
  .footer-bottom a,
  .legal-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .legal-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .legal-nav a { margin-right: 0; }
}

/* ── Story card titles need room to breathe ───────────────────────────────
   At 1024px the four-column grid gives each card 179px, and a long title
   like "Das Weltraumabenteuer" overflowed it. Three columns between tablet
   and laptop keeps the cards generous instead of cramming four in. */

/* ── The compact language button on a phone ───────────────────────────────
   On a narrow screen the picker leaves the burger menu and sits on the bar
   itself, immediately left of the burger. A language control hidden inside a
   closed menu is one nobody finds, and the people who need it most are the
   ones who cannot read the menu label that hides it.

   Compact means flag + two-letter code: wide enough to be unmistakable,
   narrow enough that it never competes with the logo for room. */
.lang-wrap.lang-compact { flex: none; margin-left: auto; }
.lang-wrap.lang-compact .lang-btn {
  gap: 6px;
  padding: 9px 12px;
  min-height: 44px;
}
.lang-wrap.lang-compact .lang-name { display: none; }
.lang-wrap.lang-compact .lang-code {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--cream);
}
.lang-code { display: none; }

/* The panel hangs from the button, pinned to the right so it can never run
   off the edge, and capped so it stays a menu rather than a wall. */
.lang-wrap.lang-compact .lang-menu {
  top: calc(100% + 12px);
  right: 0;
  min-width: 210px;
  max-width: min(78vw, 260px);
  max-height: min(70vh, 460px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* The burger owns the far right; the picker sits just inside it. */
.nav-toggle { flex: none; margin-left: 4px; }

/* ── Header breathing room ────────────────────────────────────────────────
   Measured before this: 44px tall on a phone with the logo touching the top
   and bottom edges, and zero side padding on a tablet with the logo against
   the screen edge. Both were the padding shorthand collision fixed above;
   these are the values that make the bar feel deliberate rather than merely
   not-broken. */
@media (max-width: 900px) {
  .container { padding-inline: 22px; }
  .nav { padding-block: 13px; gap: 10px; }
  .logo { font-size: 1.1rem; gap: 10px; }
}
@media (max-width: 420px) {
  .container { padding-inline: 18px; }
  .nav { gap: 8px; }
  .logo { font-size: 1rem; }
  .lang-wrap.lang-compact .lang-btn { padding: 9px 10px; }
}
@media (min-width: 901px) {
  .nav { padding-block: 20px; }
}
@media (min-width: 1200px) {
  /* On a laptop the content is capped at 1160px and the header was hugging
     that cap exactly, so the bar read as narrower than the page. */
  .container { padding-inline: 32px; }
}

/* ── Своја приказна: формулар на кремава заднина ─────────────────────────
   .field во order.css е за темна заднина. Оваа страница е светла, па
   формуларот има свои бои. */
.story-form { margin-top: 28px; }
.story-form .row { margin-bottom: 20px; }
.story-form label {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.story-form input[type="text"],
.story-form input[type="email"],
.story-form select,
.story-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--field-bg);
  border: 2px solid var(--field-border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.story-form textarea { resize: vertical; line-height: 1.6; }
.story-form input::placeholder,
.story-form textarea::placeholder { color: var(--placeholder); opacity: 1; } /* ink-soft, 7:1 на бело */
.story-form input:focus,
.story-form select:focus,
.story-form textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.28);
}
.story-form input:focus-visible,
.story-form select:focus-visible,
.story-form textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.story-form .two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.story-form .note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 22px 0 0;
  padding: 14px 16px;
  background: rgba(201, 184, 232, 0.16);
  border-radius: var(--radius-md);
}
.story-form button { margin-top: 22px; }
.story-steps { counter-reset: step; margin: 0; padding: 0; list-style: none; }
.story-steps li {
  position: relative;
  padding-left: 46px;
  margin-bottom: 18px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.story-steps li b { color: var(--ink); }
.story-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--midnight);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  display: grid;
  place-items: center;
}
@media (max-width: 640px) {
  .story-form .two { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Мени што собира, без да се смали ───────────────────────────────────
   Истите шест ставки се 70 знаци на англиски, 82 на македонски, 87 на
   германски. Првиот обид беше да се смалат буквите. Тоа собра, но менито
   изгледаше евтино: 0.79rem во заглавие на премиум бренд не е решение.

   Наместо тоа, натписите се скратени во јазичните датотеки, а тука има само
   едно нежно збивање на растојанието. Големината на буквите не се менува. */
.nav-links a { white-space: nowrap; }
.nav-links { flex-wrap: nowrap; }

@media (min-width: 901px) {
  .site-header.nav-tight .nav-links { gap: 14px; }
  .site-header.nav-tight .nav-links a.btn { padding: 10px 18px; }
}

/* ── Подножје: податоци за трговецот ─────────────────────────────────────
   Законска обврска, ама не мора да вика. Мала типографија, придушена боја,
   без наслов и без линија — сепак видливо на секоја страница, зашто
   „недвосмислено" не значи „по клик". */
.footer-legal {
  margin-top: 18px;
  color: rgba(250, 243, 227, 0.6);
  font-size: 0.76rem;
  line-height: 1.6;
  max-width: 78ch;
}
.footer-legal + .footer-legal { margin-top: 2px; }
.footer-legal-data { letter-spacing: 0.005em; }
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--gold-soft); }

/* ── Картички „што добиваш" ─────────────────────────────────────────────
   Не се користат во моментот: секцијата со впечатоци е вратена на своето
   место. Стилот останува, за да може блокот да се врати со едно копирање
   ако впечатоците уште долго изостанат. */

/* ── Hero: фотографија-макета наместо CSS-книга (23.09.2026) ─────────────
   Книгата веќе е сликана под агол, со рбет и страници, па тука нема 3D
   ротација. Само лебди нагоре-надолу. Класата .book-photo е поспецифична од
   .book-mockup, па ги надвладува и правилата за мобилен и за reduced-motion. */