/* ============================================================
   MALI HEROJ — extras (engagement sections)  warm-fairytale theme
   loads after styles.css, reuses its tokens
   ============================================================ */
/* ============================================================
   MALI HEROJ — extras (engagement sections)
   loads after styles.css, reuses its tokens
   ============================================================ */

.stars { color: var(--gold-500); letter-spacing: 2px; white-space: nowrap; }

/* scarcity badge */
.spots {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; color: var(--ink-soft);
  padding: 8px 15px; border-radius: 999px;
  background: rgba(227,169,58,.1); border: 1px solid rgba(227,169,58,.28);
}
.spots b { color: var(--gold-600); font-weight: 900; }
.spots-dot { width: 8px; height: 8px; border-radius: 50%; background: #4caa6a; box-shadow: 0 0 0 3px rgba(76,170,106,.25); animation: spotsPulse 2s ease-in-out infinite; }
@keyframes spotsPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.spots.on-dark { color: rgba(252,248,238,.86); background: rgba(244,213,138,.1); border-color: rgba(244,213,138,.3); margin-top: 18px; }
.spots.on-dark b { color: var(--gold-300); }
.spots-wrap { margin-top: 22px; }

/* footer legal links */
.footer-legal { display: flex; gap: 22px; justify-content: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(244,213,138,.12); flex-wrap: wrap; }
.footer-legal a { color: rgba(252,248,238,.55); text-decoration: none; font-size: 13.5px; }
.footer-legal a:hover { color: var(--gold-300); }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trustbar { background: var(--paper); border-bottom: 1px solid var(--cream-200); }
.trustbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 20px 32px; flex-wrap: wrap;
}
.trust-item { display: flex; align-items: center; gap: 10px; }
.ti-ic { font-size: 16px; color: var(--ink-soft); }
.ti-ic.gold { color: var(--gold-500); letter-spacing: 1px; }
.ti-t { font-size: 14.5px; font-weight: 800; color: var(--ink); }

/* ============================================================
   PROMO BAND
   ============================================================ */
.promo {
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300), var(--gold-500));
  color: var(--navy-900);
}
.promo-in {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 14px 32px; flex-wrap: wrap; text-align: center;
}
.promo-spark { font-size: 16px; }
.promo-txt { font-size: 15px; font-weight: 700; }
.promo-txt b { font-weight: 900; }
.promo-spots {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 900; font-size: 13px; letter-spacing: .01em; white-space: nowrap;
  background: rgba(10,18,48,.85); color: var(--gold-200);
  padding: 6px 14px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.promo-spots b { color: #fff; }
.promo-spots .ps-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #6BF0A0; animation: psPulse 2s infinite;
}
.promo-spots.low .ps-dot { background: #FFC861; }
.promo-spots.full { background: rgba(10,18,48,.92); }
.promo-spots.full .ps-dot { background: #FF8A6B; animation: none; }
@keyframes psPulse {
  0% { box-shadow: 0 0 0 0 rgba(107,240,160,.6); }
  70% { box-shadow: 0 0 0 7px rgba(107,240,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(107,240,160,0); }
}

/* ============================================================
   QUIZ
   ============================================================ */
.quiz { background: var(--paper); }
.quiz-card {
  max-width: 720px; margin: 0 auto;
  background: #fff; border: 1px solid var(--cream-200); border-radius: 26px;
  box-shadow: var(--shadow-card); padding: 40px 44px 44px; min-height: 320px;
  display: flex; flex-direction: column; justify-content: center;
}
.quiz-prog { display: flex; gap: 8px; justify-content: center; margin-bottom: 30px; }
.qp { width: 42px; height: 5px; border-radius: 99px; background: var(--cream-200); transition: background .3s; }
.qp.on { background: linear-gradient(90deg, var(--gold-400), var(--gold-500)); }
.quiz-step { animation: quizIn .35s ease both; text-align: center; }
@keyframes quizIn { from { transform: translateY(12px); } to { transform: none; } }
.quiz-qn { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 12px; }
.quiz-step h3 { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--ink); margin-bottom: 26px; }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--ink);
  text-align: left; cursor: pointer;
  padding: 17px 20px; border-radius: 14px;
  border: 1.5px solid var(--cream-300); background: var(--cream-50);
  transition: border-color .18s, background .18s, transform .15s, box-shadow .18s;
}
.quiz-opt:hover {
  border-color: var(--gold-500); background: #fff; transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(227,169,58,.6);
}
.qo-arrow { color: var(--gold-500); font-weight: 900; opacity: 0; transform: translateX(-6px); transition: .18s; }
.quiz-opt:hover .qo-arrow { opacity: 1; transform: none; }

.quiz-result { text-align: center; animation: quizIn .4s ease both; }
.qr-emblem {
  width: 78px; height: 78px; border-radius: 20px; margin: 0 auto 18px;
  display: grid; place-items: center; font-family: var(--serif); font-size: 36px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 16px 30px -12px rgba(0,0,0,.4);
}
.qr-scene {
  width: 220px; max-width: 72%; margin: 0 auto 18px;
  border-radius: 18px; overflow: hidden; aspect-ratio: 220 / 150;
  box-shadow: 0 24px 50px -22px rgba(11,18,48,.5), 0 0 0 1.5px rgba(239,195,104,.5);
}
.qr-scene .hs-svg { width: 100%; height: 100%; display: block; }
.qr-lead { font-size: 15px; color: var(--ink-soft); font-weight: 700; }
.quiz-result h3 { font-family: var(--serif); font-size: 38px; font-weight: 600; color: var(--ink); margin: 4px 0 10px; }
.quiz-result p { font-size: 17px; color: var(--ink-soft); line-height: 1.5; max-width: 26em; margin: 0 auto 26px; }
.quiz-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.quiz-cta .btn { padding: 14px 26px; font-size: 15px; }

/* ============================================================
   BEFORE / AFTER SLIDER (in gallery)
   ============================================================ */
.ba-feature { position: relative; z-index: 2; max-width: 720px; margin: 0 auto 50px; }
.ba-week {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 6;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); color: var(--navy-900);
  box-shadow: 0 10px 24px -10px rgba(239,195,104,.9);
}
.ba {
  position: relative; overflow: hidden; border-radius: 22px;
  cursor: ew-resize; user-select: none; touch-action: none;
  box-shadow: 0 40px 90px -34px rgba(0,0,0,.7), 0 0 0 1.5px rgba(244,213,138,.4);
  background: var(--navy-800);
}
.ba-img { display: block; position: absolute; inset: 0; }
.ba-before { position: absolute; inset: 0; will-change: clip-path; }
.ba-tag {
  position: absolute; bottom: 16px; z-index: 5;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px; pointer-events: none;
}
.ba-tag.left { left: 16px; background: rgba(6,11,30,.62); color: rgba(252,248,238,.9); backdrop-filter: blur(4px); }
.ba-tag.right { right: 16px; background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); color: var(--navy-900); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; z-index: 6;
  width: 3px; background: rgba(252,248,238,.9); transform: translateX(-50%);
  box-shadow: 0 0 18px rgba(244,213,138,.7);
}
.ba-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; letter-spacing: -1px;
  background: radial-gradient(circle at 50% 35%, var(--gold-200), var(--gold-500));
  color: var(--navy-900); font-weight: 900; font-size: 18px;
  box-shadow: 0 0 0 5px rgba(6,11,30,.45), 0 8px 20px rgba(0,0,0,.4);
}
.ba-hint { text-align: center; margin-top: 16px; font-size: 14.5px; color: rgba(252,248,238,.7); }

.showcase-note {
  position: relative; z-index: 2;
  max-width: 56ch; margin: 40px auto 0; text-align: center;
  font-size: 12.5px; line-height: 1.55; letter-spacing: .01em;
  color: rgba(252,248,238,.5);
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews { background: var(--paper); }

/* launch mode — poziv prvim herojima (dok nema pravih recenzija) */
.launch-rev {
  max-width: 640px; margin: 0 auto; text-align: center;
  background: #fff; border: 1px solid var(--cream-200); border-radius: 24px;
  padding: 52px 44px 44px; box-shadow: var(--shadow-soft);
}
.launch-rev h2 { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 42px); font-weight: 600; color: var(--ink); margin: 10px 0 14px; }
.launch-rev .lr-lead { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 auto 24px; max-width: 34em; }
.launch-rev .lr-lead b { color: var(--ink); }
.lr-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-bottom: 28px; }
.lr-pt {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  background: var(--cream-50); border: 1px solid var(--cream-200); border-radius: 999px; padding: 9px 16px;
}
.lr-pt b { color: var(--gold-600); font-weight: 800; }
.launch-rev .lr-note { font-size: 13px; color: var(--ink-faint); margin: 18px 0 0; }
@media (max-width: 560px) { .launch-rev { padding: 38px 24px 32px; } }

/* ============================================================
   REGISTAR HEROJA (Dvorana slavnih) — dark band
   ============================================================ */
.registry {
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(239,195,104,.1), transparent 62%),
    linear-gradient(180deg, var(--navy, #14182b), #0f1322);
  color: var(--cream-50, #f7f4ec);
}
.registry .section-head h2 { color: var(--cream-50, #f7f4ec); }
.registry .section-head .eyebrow { color: var(--gold-400, #efc368); }
.registry .section-head p { color: rgba(247,244,236,.72); }
.registry .section-head p b { color: var(--gold-300, #f4d58a); }

/* launch state — first card */
.reg-launch { max-width: 540px; margin: 0 auto; text-align: center; }
.reg-firstcard {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  background: rgba(8,10,18,.5); border: 1.5px dashed rgba(239,195,104,.5); border-radius: 18px;
  padding: 34px 28px; margin-bottom: 22px;
}
.reg-no {
  font-family: var(--mono, monospace); font-size: 13px; font-weight: 800; letter-spacing: .16em;
  color: var(--gold-400, #efc368);
}
.reg-name { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--cream-50, #f7f4ec); }
.reg-title { font-size: 13.5px; font-weight: 700; color: rgba(247,244,236,.6); }
.reg-note { font-size: 13.5px; line-height: 1.6; color: rgba(247,244,236,.62); margin-bottom: 22px; }
.reg-note b { color: rgba(247,244,236,.92); }

/* filled state — grid of hero cards */
.reg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.reg-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: rgba(8,10,18,.45); border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  padding: 18px 18px 16px; position: relative; overflow: hidden;
}
.reg-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold-400, #efc368), var(--gold-600, #b9832a));
}
.reg-card .reg-name { font-size: 21px; line-height: 1.1; }
.reg-card.secret { opacity: .72; }
.reg-card.secret::before { background: rgba(255,255,255,.18); }
.reg-card.secret .reg-name { color: rgba(247,244,236,.66); font-style: italic; }
.reg-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.reg-count { font-size: 14px; color: rgba(247,244,236,.7); }
.reg-count b { color: var(--gold-300, #f4d58a); font-weight: 800; }
@media (max-width: 860px) { .reg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .reg-grid { grid-template-columns: 1fr; } .reg-foot { flex-direction: column; align-items: stretch; text-align: center; } }

.reviews-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.review {
  margin: 0; background: #fff; border: 1px solid var(--cream-200);
  border-radius: 20px; padding: 26px 26px 22px; box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 14px;
}
.rev-stars { font-size: 15px; }
.review blockquote {
  margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink);
  font-family: var(--serif); font-style: italic;
}
.review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; }
.rev-av {
  display: block; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  background: linear-gradient(150deg, var(--cream-200), var(--cream-300));
  box-shadow: inset 0 0 0 1px var(--cream-300);
}
.review figcaption span { display: flex; flex-direction: column; line-height: 1.25; }
.review figcaption b { font-size: 15px; color: var(--ink); font-weight: 800; }
.review figcaption i { font-size: 13px; color: var(--ink-faint); font-style: normal; }

/* ============================================================
   VIDEO TEASER (dark)
   ============================================================ */
.video {
  position: relative; overflow: hidden; color: var(--cream-50);
  background:
    radial-gradient(70% 60% at 12% 0%, rgba(187,169,226,.12), transparent 55%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
}
.video-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center;
}
.video-copy h2 { font-size: clamp(30px, 3.6vw, 46px); color: var(--cream-50); margin: 16px 0 16px; }
.video-copy p { font-size: 17px; line-height: 1.6; color: rgba(252,248,238,.8); margin-bottom: 22px; }
.video-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.video-list li { display: flex; gap: 11px; font-size: 15.5px; color: rgba(252,248,238,.92); }
.video-list .mk { color: var(--gold-300); }

/* ============================================================
   ANTHEM — himna heroja (cream band, dark player card)
   ============================================================ */
.anthem { position: relative; overflow: hidden; background: var(--paper); }
.anthem-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: .92fr 1.08fr; gap: 50px; align-items: center;
}
.anthem-copy h2 { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; color: var(--ink); margin: 14px 0 16px; }
.anthem-copy > p { font-size: 17px; line-height: 1.62; color: var(--ink-soft); margin-bottom: 22px; }
.anthem-copy > p b { color: var(--ink); }
.anthem-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.anthem-list li { display: flex; gap: 11px; font-size: 15.5px; color: var(--ink-soft); }
.anthem-list li b { color: var(--ink); }
.anthem-list .mk { color: var(--gold-600); font-size: 15px; flex-shrink: 0; }
.anthem-note { font-size: 13.5px; color: var(--ink-faint); margin: 0 0 22px; }
.anthem-note b { color: var(--gold-600); }

/* anthem tiers — add-on vs Legend */
.anthem-tiers { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; }
.at-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; border-radius: 12px; background: #fff; border: 1px solid var(--cream-200); }
.at-row.at-legend { background: linear-gradient(180deg, rgba(201,149,44,.08), #fff); border-color: rgba(201,149,44,.34); }
.at-tag { flex-shrink: 0; font-family: var(--mono, monospace); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-600); background: var(--cream-100); border-radius: 999px; padding: 5px 11px; margin-top: 1px; }
.at-row.at-legend .at-tag { color: #160b04; background: linear-gradient(160deg, var(--gold-300), var(--gold-500)); }
.at-tx { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.at-tx b { color: var(--ink); }

/* player card — feels like a premium audio device */
.anthem-player {
  display: flex; align-items: center; gap: 26px;
  background: linear-gradient(165deg, #161b2e, #0e1120);
  border: 1px solid rgba(244,213,138,.16); border-radius: 24px;
  padding: 34px 32px; box-shadow: 0 40px 80px -40px rgba(12,16,30,.7);
}
/* spinning disc + play */
.ap-disc { position: relative; flex-shrink: 0; width: 116px; height: 116px; cursor: pointer; display: grid; place-items: center; }
.ap-disc-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #1a1f33 0 30%, transparent 31%),
    repeating-radial-gradient(circle at 50% 50%, rgba(244,213,138,.14) 0 2px, transparent 2px 6px),
    radial-gradient(circle at 50% 50%, #2a3150, #111424 72%);
  box-shadow: inset 0 0 0 1px rgba(244,213,138,.2), 0 14px 30px -12px rgba(0,0,0,.7);
}
.anthem-player.playing .ap-disc-ring { animation: apSpin 4s linear infinite; }
@keyframes apSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .anthem-player.playing .ap-disc-ring { animation: none; } }
.ap-play {
  position: relative; z-index: 2; width: 52px; height: 52px; border: none; cursor: pointer; border-radius: 50%;
  display: grid; place-items: center; color: #160b04;
  background: radial-gradient(circle at 50% 35%, var(--gold-300), var(--gold-500));
  box-shadow: 0 0 0 5px rgba(244,213,138,.14), 0 10px 24px -8px rgba(239,195,104,.8);
  transition: transform .15s ease;
}
.ap-disc:hover .ap-play { transform: scale(1.07); }
.ap-play svg { width: 22px; height: 22px; }
.anthem-player:not(.playing) .ap-play svg { margin-left: 2px; }
/* body */
.ap-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ap-kicker { font-family: var(--mono, monospace); font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-400); }
.ap-name { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--cream-50); line-height: 1.05; margin-top: 3px; }
.ap-title { font-size: 13px; font-weight: 700; color: rgba(252,248,238,.6); margin-bottom: 14px; }
/* equalizer */
.ap-eq { display: flex; align-items: flex-end; gap: 3px; height: 38px; margin-bottom: 12px; }
.ap-eq span {
  flex: 1; min-width: 0; border-radius: 2px; height: 30%;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-600));
  opacity: .35; transform-origin: bottom;
}
.anthem-player.playing .ap-eq span { opacity: 1; animation: apEq .9s ease-in-out infinite alternate; }
@keyframes apEq { from { transform: scaleY(.28); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .anthem-player.playing .ap-eq span { animation: none; } }
.ap-progress { position: relative; height: 4px; border-radius: 999px; background: rgba(255,255,255,.12); margin: 6px 0 12px; cursor: pointer; padding: 9px 0; background-clip: content-box; touch-action: none; }
.ap-progress span { position: relative; display: block; height: 4px; width: 0; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); border-radius: 999px; transition: width .08s linear; }
.ap-progress span::after {
  content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--gold-300);
  box-shadow: 0 1px 4px rgba(0,0,0,.5); opacity: 0; transition: opacity .15s ease;
}
.ap-progress:hover span::after, .ap-progress:focus-visible span::after { opacity: 1; }
.ap-progress:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 4px; border-radius: 999px; }
.ap-status { font-family: var(--mono, monospace); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: rgba(252,248,238,.55); }
@media (max-width: 940px) {
  .anthem-grid { grid-template-columns: 1fr; gap: 34px; }
  .anthem-player { order: 2; }
}
@media (max-width: 480px) {
  .anthem-player { flex-direction: column; text-align: center; padding: 28px 22px; }
  .ap-eq { width: 100%; }
}
.video-player {
  position: relative; aspect-ratio: 16/10; border-radius: 22px; overflow: hidden;
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.8), 0 0 0 1.5px rgba(244,213,138,.35);
}
.vp-poster { position: absolute; inset: 0; }
.vp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: linear-gradient(160deg, #1a2138, #0e1322); }

/* ---- Crop bottom edge of source videos to hide tool watermark (sits bottom-right).
   Scale from the top so heroes' heads stay put; parent clips the overflowing strip. ---- */
.vp-video { transform: scale(1.14); transform-origin: top center; }
.ex-anim { overflow: hidden; border-radius: 12px; }
.ex-anim .ex-video { transform: scale(1.14); transform-origin: top center; }
.ex-video { background: linear-gradient(160deg, #1a2138, #0e1322); }

.vp-sound {
  position: absolute; top: 16px; right: 16px; z-index: 4; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: rgba(11,18,48,.42); backdrop-filter: blur(6px);
  display: grid; place-items: center; color: var(--cream-50);
  box-shadow: 0 0 0 1px rgba(244,213,138,.4);
  transition: transform .2s, background .2s, box-shadow .2s;
}
.vp-sound:hover { transform: scale(1.08); background: rgba(11,18,48,.6); }
.vp-sound.on { background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); color: var(--navy-900); box-shadow: 0 0 0 1px rgba(244,213,138,.7), 0 0 30px rgba(239,195,104,.5); }
.vp-sound svg { width: 22px; height: 22px; fill: currentColor; }
.vp-hint {
  position: absolute; bottom: 16px; left: 16px; z-index: 3; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(11,18,48,.42); backdrop-filter: blur(6px); color: rgba(252,248,238,.92);
}
.vp-badge {
  position: absolute; bottom: 16px; right: 16px; z-index: 3; white-space: nowrap;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); color: var(--navy-900);
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.compare { background: linear-gradient(180deg, var(--paper), var(--cream-100)); }
.cmp-wrap { overflow-x: auto; max-width: 920px; margin: 0 auto; }
.cmp { width: 100%; border-collapse: collapse; min-width: 620px; }
.cmp th, .cmp td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--cream-200); }
.cmp thead th { vertical-align: bottom; padding-top: 30px; position: relative; }
.cmp-feat { text-align: left !important; font-weight: 700; color: var(--ink); font-size: 15px; width: 38%; }
.cmp thead .cmp-feat { border: none; }
.cmp-pn { display: block; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); }
.cmp-pp { display: block; font-size: 14px; font-weight: 800; color: var(--gold-600); margin-top: 2px; }
.cmp-sub { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.cmp th.hot, .cmp td.hot { background: #fff; }
.cmp th.hot { border-top: 2px solid var(--gold-400); border-radius: 16px 16px 0 0; box-shadow: 0 -6px 20px -12px rgba(239,195,104,.6); }
.cmp tbody tr:last-child td.hot { border-radius: 0 0 16px 16px; }
.cmp-flag {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  background: var(--blush); color: var(--navy-900);
}
.cmp-yes { color: var(--gold-600); font-weight: 900; font-size: 18px; }
.cmp-no { color: var(--ink-faint); font-size: 16px; }
.cmp-txt { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.cmp-cta-row td { border-bottom: none; padding-top: 22px; }
.cmp-cta-row .btn { padding: 11px 22px; font-size: 14px; }

/* ============================================================
   HEROJSKI DOSJE (light section, dark file cards)
   ============================================================ */
.dossier { background: var(--paper); }
.dossier-grid {
  display: grid; grid-template-columns: 1fr 1.18fr; gap: 26px;
  max-width: 980px; margin: 0 auto; align-items: start;
}
.dfile {
  position: relative; border-radius: 16px; padding: 28px 28px 30px;
  background: linear-gradient(165deg, var(--navy-800), var(--navy-950));
  color: var(--cream-50);
  border: 1px solid rgba(244,213,138,.18);
  box-shadow: 0 30px 70px -38px rgba(11,18,48,.7);
}
.dfile-full {
  border-color: rgba(244,213,138,.42);
  box-shadow: 0 36px 84px -34px rgba(11,18,48,.85), 0 0 0 1px rgba(244,213,138,.18);
}
.dfile-seal {
  position: absolute; top: -17px; right: 24px; width: 44px; height: 44px;
  border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, var(--gold-200), var(--gold-500));
  color: var(--navy-900); font-size: 19px;
  box-shadow: 0 0 0 5px var(--paper), 0 10px 22px -8px rgba(239,195,104,.85);
}
.dfile-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(244,213,138,.18);
}
.dfile-tag { font-family: var(--serif); font-size: 23px; font-weight: 600; color: var(--cream-50); }
.dfile-tag.gold { color: var(--gold-300); }
.dfile-where {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(252,248,238,.55); white-space: nowrap;
}
.dfile-list { display: flex; flex-direction: column; gap: 11px; }
.dfile-list li { display: flex; gap: 11px; font-size: 15.5px; line-height: 1.45; color: rgba(252,248,238,.9); }
.dfile-list .dk { color: var(--gold-300); font-weight: 700; flex-shrink: 0; }
.dossier-note { text-align: center; margin-top: 30px; font-size: 15px; color: var(--ink-soft); }
.dossier-note b { color: var(--ink); }
@media (max-width: 760px) { .dossier-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PREMIUM (dark) — what makes Hero Legend premium
   ============================================================ */
.premium {
  position: relative; overflow: hidden; color: var(--cream-50);
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(244,213,138,.13), transparent 58%),
    radial-gradient(60% 60% at 8% 100%, rgba(187,169,226,.1), transparent 55%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
}
.premium .section-head { position: relative; z-index: 2; }
.premium h2 { color: var(--cream-50); }
.premium h2 em { font-style: italic; color: var(--gold-300); }
.premium .section-head p { color: rgba(252,248,238,.74); }
.premium-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 980px; margin: 48px auto 0;
}
.prem-col {
  position: relative; border-radius: 18px; padding: 30px 30px 32px;
  background: linear-gradient(165deg, var(--navy-800), var(--navy-950));
  border: 1px solid rgba(244,213,138,.18);
  box-shadow: 0 30px 70px -38px rgba(11,18,48,.7);
}
.prem-box { border-color: rgba(244,213,138,.42); box-shadow: 0 36px 84px -34px rgba(11,18,48,.85), 0 0 0 1px rgba(244,213,138,.18); }
.prem-tag {
  position: absolute; top: -13px; right: 22px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); color: var(--navy-900);
  box-shadow: 0 10px 22px -8px rgba(239,195,104,.85);
}
.prem-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(244,213,138,.18);
}
.prem-ic {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px;
  color: var(--gold-300); border: 1.5px solid rgba(244,213,138,.4);
  background: rgba(244,213,138,.08);
}
.prem-ic.gold { color: var(--navy-900); background: radial-gradient(circle at 50% 35%, var(--gold-200), var(--gold-500)); border-color: transparent; box-shadow: 0 8px 20px -8px rgba(239,195,104,.8); }
.prem-htx { display: flex; flex-direction: column; gap: 3px; }
.prem-htx b { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--cream-50); line-height: 1.1; }
.prem-htx span { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(252,248,238,.55); }
.prem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.prem-list li { display: flex; flex-direction: column; gap: 3px; position: relative; padding-left: 20px; }
.prem-list li::before { content: "›"; position: absolute; left: 0; top: 1px; color: var(--gold-300); font-weight: 700; }
.prem-list b { font-size: 15.5px; font-weight: 800; color: var(--cream-50); }
.prem-list span { font-size: 13.5px; line-height: 1.5; color: rgba(252,248,238,.68); }

/* standout anthem item in Hero Box list */
.prem-list li.prem-star {
  padding: 14px 16px 14px 16px; margin: -2px 0;
  background: linear-gradient(165deg, rgba(244,213,138,.14), rgba(244,213,138,.04));
  border: 1px solid rgba(244,213,138,.4); border-radius: 12px;
}
.prem-list li.prem-star::before { display: none; }
.prem-star-badge {
  align-self: flex-start; font-family: var(--mono, monospace); font-size: 10px; font-weight: 800;
  letter-spacing: .12em; color: #160b04; background: linear-gradient(160deg, var(--gold-300), var(--gold-500));
  border-radius: 999px; padding: 3px 9px; margin-bottom: 5px;
}
.prem-list li.prem-star b { color: #fff; }
.premium-note { position: relative; z-index: 2; text-align: center; margin: 34px auto 0; max-width: 44em; font-size: 15px; color: rgba(252,248,238,.7); }
.premium-note b { color: var(--gold-300); }
@media (max-width: 760px) { .premium-grid { grid-template-columns: 1fr; } }

/* ============================================================
   EMOTION BAND (dark) — sells the feeling
   ============================================================ */
.emotion {
  position: relative; overflow: hidden; text-align: center;
  color: var(--cream-50);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(244,213,138,.14), transparent 58%),
    radial-gradient(60% 60% at 12% 100%, rgba(187,169,226,.12), transparent 55%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
}
.emotion-in { position: relative; z-index: 2; max-width: 940px; }
.emotion-h {
  font-size: clamp(30px, 4vw, 52px); line-height: 1.12;
  margin: 18px auto 0; max-width: 17em;
}
.emotion-h em { color: var(--gold-300); font-style: italic; }
.emotion-words {
  display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap;
  gap: 18px 30px; margin: 44px auto 0;
}
.emotion-words .ew {
  display: flex; flex-direction: column; gap: 7px; max-width: 230px;
}
.emotion-words .ew b {
  font-family: var(--serif); font-weight: 600; font-size: 23px;
  font-style: italic; color: var(--gold-300);
}
.emotion-words .ew i {
  font-style: normal; font-size: 14.5px; line-height: 1.5; color: rgba(252,248,238,.72);
}
.emotion-words .ew-dot { display: flex; align-items: center; color: rgba(244,213,138,.45); font-size: 15px; }
.emotion-tag {
  margin: 42px auto 0; font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2.1vw, 28px); color: var(--cream-50);
  letter-spacing: .01em;
}
@media (max-width: 720px) {
  .emotion-words .ew-dot { display: none; }
  .emotion-words { gap: 24px; }
}

/* ============================================================
   GUARANTEE BAND (dark)
   ============================================================ */
.guarantee {
  background:
    radial-gradient(80% 80% at 15% 20%, rgba(244,213,138,.12), transparent 55%),
    linear-gradient(165deg, var(--navy-800), var(--navy-950));
  color: var(--cream-50);
}
.guarantee-in {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 44px; align-items: center;
}
.guar-head { display: flex; align-items: center; gap: 22px; }
.guar-seal {
  flex-shrink: 0;
  width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 26px; color: var(--navy-900);
  background: radial-gradient(circle at 50% 35%, var(--gold-200), var(--gold-500));
  box-shadow: 0 0 0 6px rgba(244,213,138,.16), 0 16px 34px -14px rgba(239,195,104,.8);
}
.guar-head h3 { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--cream-50); margin-bottom: 6px; }
.guar-head p { font-size: 16px; color: rgba(252,248,238,.74); line-height: 1.5; }
.guar-head p b { color: var(--gold-200); font-weight: 700; }
/* 4 stavke (dorada, povrat novca, ručno, privatnost) → 2×2 uz naslov */
.guar-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.guar-item { display: flex; gap: 12px; }
.gi-ic {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 900;
  color: var(--gold-300); border: 1.5px solid rgba(244,213,138,.4);
}
.guar-item b { display: block; font-size: 15px; color: var(--cream-50); margin-bottom: 3px; }
.guar-item span { font-size: 13.5px; color: rgba(252,248,238,.66); line-height: 1.45; }

/* ============================================================
   VELIKI HEROJ (adults — understated, dedication instead of name)
   ============================================================ */
.veliki {
  position: relative; overflow: hidden; color: var(--cream-50);
  background:
    radial-gradient(70% 60% at 12% 0%, rgba(187,169,226,.12), transparent 55%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
}
.vh-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center;
}
.vh-copy .eyebrow { color: var(--gold-300); }
.vh-copy h2 { font-size: clamp(30px, 3.4vw, 44px); color: var(--cream-50); margin: 14px 0 18px; }
.vh-copy p { font-size: 16.5px; line-height: 1.6; color: rgba(252,248,238,.8); margin-bottom: 16px; max-width: 30em; }
.vh-copy p b { color: var(--cream-50); }
.vh-occ {
  font-family: var(--serif); font-style: italic; font-size: 18px;
  color: var(--cream-50); margin-bottom: 26px !important;
}
.vh-card { position: relative; margin: 0; z-index: 2; }
.vh-dedica {
  margin-top: 18px; display: flex; align-items: baseline; gap: 10px;
  justify-content: center; text-align: center;
}
.vh-quote { font-family: var(--serif); font-size: 38px; line-height: 0; color: var(--gold-300); transform: translateY(6px); }
.vh-ded-text {
  font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2vw, 24px);
  color: var(--cream-50); letter-spacing: .01em;
}
@media (max-width: 820px) {
  .vh-grid { grid-template-columns: 1fr; gap: 34px; }
  .vh-copy { text-align: center; }
  .vh-copy p { margin-left: auto; margin-right: auto; }
}

/* ============================================================
   OCCASIONS (light) — gift framing
   ============================================================ */
.occasions { background: var(--paper); }
.occ-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.occ {
  text-align: center;
  padding: 32px 18px 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--cream-50), var(--cream-100));
  border: 1px solid var(--cream-300);
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.occ:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -26px rgba(11,18,48,.32); }
.occ-mk { color: var(--gold-400); font-size: 17px; line-height: 1; }
.occ b { font-family: var(--serif); font-size: 23px; font-weight: 600; color: var(--ink); }
.occ span { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); max-width: 15em; }

/* ============================================================
   STORYBOOK TEASER (light) — slikovnica upsell spotlight
   ============================================================ */
.storybook {
  position: relative; overflow: hidden;
  background:
    radial-gradient(78% 70% at 88% 14%, rgba(244,213,138,.20), transparent 56%),
    radial-gradient(70% 60% at 6% 96%, rgba(187,169,226,.12), transparent 58%),
    linear-gradient(180deg, var(--cream-100), var(--paper));
}
.sb-grid {
  display: grid; grid-template-columns: 1.06fr 1fr; gap: 58px; align-items: center;
}
.sb-copy .eyebrow { color: var(--gold-600); }
.sb-copy h2 { font-size: clamp(30px, 3.6vw, 46px); color: var(--ink); margin: 16px 0 18px; }
.sb-copy h2 em { font-family: var(--serif); font-style: italic; color: var(--gold-600); }
.sb-copy > p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 26px; max-width: 31em; }
.sb-list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.sb-list li { display: flex; gap: 11px; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.sb-list .mk { color: var(--gold-500); flex-shrink: 0; margin-top: 1px; }

/* book mockup — open spread + floating cover */
.sb-visual { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.sb-stage { position: relative; width: 100%; max-width: 500px; padding: 30px 26px 30px 30px; }
.book {
  position: relative;
  width: 100%; aspect-ratio: 1536 / 1024;
  border-radius: 12px; overflow: hidden;
  background: var(--cream-50);
  box-shadow:
    0 60px 100px -44px rgba(11,18,48,.55),
    0 0 0 1.5px rgba(244,213,138,.3);
  transform: perspective(2600px) rotateY(-4deg) rotateX(1.5deg);
  transform-style: preserve-3d;
  cursor: zoom-in; outline: none;
}
.book.book-front { position: relative; z-index: 2; }
/* second page peeking from behind the top-right corner */
.book-behind {
  position: absolute; top: -2px; right: -22px; z-index: 0;
  width: 90%; cursor: zoom-in;
  transform: perspective(2600px) rotateY(-4deg) rotateX(1.5deg) rotate(2.6deg);
  filter: brightness(.95);
}
.book-behind::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 12px;
  background: linear-gradient(110deg, rgba(11,18,48,.04), rgba(11,18,48,.16));
  pointer-events: none;
}
.sb-page-tag {
  position: absolute; top: 10px; left: 10px; z-index: 4;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(6,11,30,.55); color: var(--cream-50); backdrop-filter: blur(4px);
}
.book-behind .sb-page-tag { top: 9px; right: 9px; left: auto; }
.sb-spread { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.book:hover .sb-spread, .book:focus-visible .sb-spread { transform: scale(1.05); }
.book:focus-visible { box-shadow: 0 60px 100px -44px rgba(11,18,48,.55), 0 0 0 2px var(--gold-400); }
.book-fold {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 40px; transform: translateX(-50%);
  pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(11,18,48,.22) 46%, rgba(11,18,48,.28) 50%, rgba(11,18,48,.22) 54%, transparent);
  mix-blend-mode: multiply;
}
/* floating printed cover, peeking over the corner */
.sb-cover {
  position: absolute; left: 0; bottom: 0; z-index: 5;
  width: 35%; aspect-ratio: 1176 / 1337;
  border-radius: 8px; overflow: hidden; cursor: zoom-in; outline: none;
  box-shadow: 0 30px 56px -22px rgba(11,18,48,.7), 0 0 0 1px rgba(244,213,138,.35);
  transform: rotate(-5deg);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.sb-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-cover:hover, .sb-cover:focus-visible { transform: rotate(-5deg) translateY(-6px) scale(1.04); box-shadow: 0 40px 70px -22px rgba(11,18,48,.78), 0 0 0 2px var(--gold-400); }
.sb-cover-tag {
  position: absolute; left: 7px; bottom: 7px; z-index: 2;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); color: var(--navy-900);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
}
.sb-zoom {
  position: absolute; top: 12px; right: 12px; z-index: 4; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: var(--cream-50);
  background: rgba(11,18,48,.5); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(244,213,138,.45), 0 6px 18px -8px rgba(0,0,0,.6);
  opacity: 0; transform: scale(.8); pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.book:hover .sb-zoom, .book:focus-visible .sb-zoom { opacity: 1; transform: scale(1); }
.sb-zoom svg { width: 18px; height: 18px; }

/* lightbox (.sb-lightbox, .lb-*) → premješten u styles.css jer ga koristi i narudzba.html */
.book-spine {
  position: absolute; left: 50%; top: 4px; bottom: 4px; width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(11,18,48,.32) 18%, rgba(11,18,48,.32) 82%, transparent);
  z-index: 3;
}
.sb-badge {
  display: inline-flex; align-items: center;
  padding: 9px 18px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--navy-900);
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  box-shadow: 0 14px 28px -12px rgba(227,169,58,.8), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
.sticky-cta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px 12px 18px; border-radius: 16px;
  background: rgba(10,18,48,.94); backdrop-filter: blur(10px);
  border: 1px solid rgba(244,213,138,.3);
  box-shadow: 0 20px 44px -16px rgba(0,0,0,.6);
  transform: translateY(140%); transition: transform .35s ease;
}
.sticky-cta.show { transform: none; }
.sc-info { display: flex; flex-direction: column; line-height: 1.2; }
.sc-info b { color: var(--cream-50); font-size: 15px; }
.sc-info span { color: rgba(252,248,238,.66); font-size: 12.5px; }
.sticky-cta .btn { padding: 13px 20px; font-size: 14.5px; white-space: nowrap; }
@media (max-width: 720px) { .sticky-cta { display: flex; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: 1fr; gap: 36px; }
  .occ-grid { grid-template-columns: repeat(3, 1fr); }
  .sb-grid { grid-template-columns: 1fr; gap: 38px; }
  .sb-visual { order: -1; }
  .book { max-width: 420px; transform: none; }
  .guarantee-in { grid-template-columns: 1fr; gap: 30px; }
  .guar-items { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .quiz-card { padding: 30px 22px 32px; }
  .quiz-opts { grid-template-columns: 1fr; }
  .quiz-step h3 { font-size: 25px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .occ-grid { grid-template-columns: repeat(2, 1fr); }
  .trustbar-in { justify-content: center; gap: 14px 22px; }
  .promo-in { gap: 10px; }
}


/* ============================================================
   REVIEW AVATAR — silhouette placeholder
   ============================================================ */
.rev-av-ph { display: grid; place-items: center; }
.rev-av-ph svg { width: 26px; height: 26px; fill: var(--ink-faint); opacity: .6; }

/* ============================================================
   HERO — subtle 3D depth elements (warm reskin)
   floating wireframe cube, perspective ring & glass shards
   ============================================================ */
.hero-3d { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; perspective: 1100px; }

.h3d-cube {
  --s: 98px;
  position: absolute; top: 15%; right: 7%;
  width: var(--s); height: var(--s);
  transform-style: preserve-3d;
  animation: h3dSpin 30s linear infinite;
  opacity: .55;
}
.h3d-cube .cf {
  position: absolute; width: var(--s); height: var(--s);
  border: 1px solid rgba(244,213,138,.45);
  background: linear-gradient(135deg, rgba(244,213,138,.08), rgba(244,213,138,0) 70%);
  box-shadow: inset 0 0 26px rgba(244,213,138,.08);
}
.cf-front  { transform: translateZ(49px); }
.cf-back   { transform: rotateY(180deg) translateZ(49px); }
.cf-right  { transform: rotateY(90deg)  translateZ(49px); }
.cf-left   { transform: rotateY(-90deg) translateZ(49px); }
.cf-top    { transform: rotateX(90deg)  translateZ(49px); }
.cf-bottom { transform: rotateX(-90deg) translateZ(49px); }
@keyframes h3dSpin { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }

.h3d-ring {
  position: absolute; bottom: 9%; left: 3%;
  width: 158px; height: 158px; border-radius: 50%;
  border: 1.5px solid rgba(187,169,226,.4);
  box-shadow: 0 0 34px rgba(187,169,226,.12), inset 0 0 24px rgba(187,169,226,.08);
  transform: rotateX(73deg);
  animation: h3dRing 22s linear infinite;
  opacity: .6;
}
@keyframes h3dRing { from { transform: rotateX(73deg) rotateZ(0deg); } to { transform: rotateX(73deg) rotateZ(360deg); } }

.h3d-shard {
  position: absolute; width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(158deg, rgba(244,213,138,.6), rgba(227,169,58,.14));
  box-shadow: 0 20px 44px -16px rgba(239,195,104,.5), inset 0 1px 0 rgba(255,255,255,.4);
  opacity: .55;
}
.h3d-shard-a { top: 19%; right: 26%; animation: h3dFloatA 10s ease-in-out infinite; }
.h3d-shard-b {
  bottom: 16%; right: 9%; width: 34px; height: 34px;
  background: linear-gradient(158deg, rgba(187,169,226,.6), rgba(187,169,226,.12));
  box-shadow: 0 18px 40px -16px rgba(187,169,226,.5), inset 0 1px 0 rgba(255,255,255,.4);
  animation: h3dFloatB 13s ease-in-out infinite;
}
.h3d-shard-c { top: 56%; left: 4%; width: 26px; height: 26px; animation: h3dFloatC 9s ease-in-out infinite; }
@keyframes h3dFloatA { 0%,100% { transform: translateY(0) rotateX(34deg) rotateZ(32deg); } 50% { transform: translateY(-24px) rotateX(34deg) rotateZ(-14deg); } }
@keyframes h3dFloatB { 0%,100% { transform: translateY(0) rotateX(-28deg) rotateZ(18deg); } 50% { transform: translateY(20px) rotateX(-28deg) rotateZ(48deg); } }
@keyframes h3dFloatC { 0%,100% { transform: translateY(0) rotateX(40deg) rotateZ(-20deg); } 50% { transform: translateY(-16px) rotateX(40deg) rotateZ(20deg); } }

@media (max-width: 940px) {
  .h3d-ring, .h3d-shard-c { display: none; }
  .h3d-cube { --s: 72px; top: 6%; right: 5%; opacity: .42; }
}
@media (prefers-reduced-motion: reduce) {
  .h3d-cube, .h3d-ring, .h3d-shard { animation: none; }
}

/* ============================================================
   DELIVERY — "što sleti u inbox" (dark) : file-window mockup
   ============================================================ */
.delivery {
  position: relative; overflow: hidden; color: var(--cream-50);
  background:
    radial-gradient(72% 60% at 84% 4%, rgba(244,213,138,.12), transparent 58%),
    radial-gradient(60% 60% at 6% 100%, rgba(187,169,226,.1), transparent 55%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
}
.delivery .section-head { position: relative; z-index: 2; }
.delivery h2 { color: var(--cream-50); }
.delivery h2 em { font-style: italic; color: var(--gold-300); }
.delivery .section-head p { color: rgba(252,248,238,.74); }

/* segmented package switcher */
.deliv-tabs {
  position: relative; z-index: 2;
  display: inline-flex; gap: 4px; margin: 0 auto 30px;
  padding: 5px; border-radius: 999px;
  background: rgba(11,18,48,.55); border: 1px solid rgba(244,213,138,.2);
}
.deliv-tabs-wrap { text-align: center; }
.deliv-tab {
  font-family: var(--sans); font-weight: 800; font-size: 14px;
  color: rgba(252,248,238,.7); background: none; border: none; cursor: pointer;
  padding: 10px 22px; border-radius: 999px; white-space: nowrap;
  transition: color .2s, background .2s;
}
.deliv-tab:hover { color: var(--cream-50); }
.deliv-tab.on {
  color: var(--navy-900);
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  box-shadow: 0 10px 22px -10px rgba(227,169,58,.7);
}
.deliv-tab small {
  display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; opacity: .85;
}

/* window */
.deliv-window {
  position: relative; z-index: 2; max-width: 880px; margin: 0 auto;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(165deg, var(--navy-800), var(--navy-950));
  border: 1px solid rgba(244,213,138,.22);
  box-shadow: 0 40px 90px -38px rgba(11,18,48,.85), 0 0 0 1px rgba(244,213,138,.08);
}
.dw-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid rgba(244,213,138,.16);
  background: rgba(6,11,30,.4);
}
.dw-dots { display: flex; gap: 7px; }
.dw-dots span { width: 11px; height: 11px; border-radius: 50%; background: rgba(244,213,138,.32); }
.dw-dots span:first-child { background: rgba(231,179,161,.6); }
.dw-dots span:nth-child(2) { background: rgba(244,213,138,.55); }
.dw-dots span:nth-child(3) { background: rgba(143,216,196,.55); }
.dw-folder {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 14.5px; color: var(--cream-50);
}
.dw-folder .fic { color: var(--gold-300); font-size: 16px; }
.dw-count {
  margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: rgba(252,248,238,.6); white-space: nowrap;
}
.dw-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 20px;
}
.dfile-tile {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(252,248,238,.035);
  border: 1px solid rgba(244,213,138,.12);
  transition: background .2s, border-color .2s, transform .2s;
}
.dfile-tile:hover { background: rgba(252,248,238,.07); border-color: rgba(244,213,138,.28); transform: translateY(-1px); }
.dfile-tile.add { border-color: rgba(244,213,138,.4); background: linear-gradient(160deg, rgba(244,213,138,.12), rgba(244,213,138,.03)); }
.dft-ico {
  position: relative; flex-shrink: 0;
  width: 42px; height: 50px; border-radius: 6px;
  display: grid; place-items: end center; padding-bottom: 7px;
  background: rgba(252,248,238,.06);
  border: 1px solid rgba(252,248,238,.14);
}
.dft-ico::before { /* folded corner */
  content: ""; position: absolute; top: 0; right: 0;
  border-width: 0 11px 11px 0; border-style: solid;
  border-color: transparent rgba(6,11,30,.55) transparent transparent;
  border-top-right-radius: 6px;
}
.dft-ext {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.dft-ico.pdf { background: rgba(239,195,104,.12); border-color: rgba(239,195,104,.4); }
.dft-ico.pdf .dft-ext { color: var(--gold-300); }
.dft-ico.jpg { background: rgba(187,169,226,.12); border-color: rgba(187,169,226,.42); }
.dft-ico.jpg .dft-ext { color: var(--lav); }
.dft-ico.png { background: rgba(143,216,196,.12); border-color: rgba(143,216,196,.42); }
.dft-ico.png .dft-ext { color: var(--volt-300); }
.dft-ico.mp4 { background: rgba(231,179,161,.12); border-color: rgba(231,179,161,.45); }
.dft-ico.mp4 .dft-ext { color: var(--blush); }
.dft-ico.mp3 { background: rgba(244,213,138,.12); border-color: rgba(244,213,138,.4); }
.dft-ico.mp3 .dft-ext { color: var(--gold-200); }
.dft-body { min-width: 0; flex: 1; }
.dft-name {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 600; color: var(--cream-50);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dft-meta { font-size: 11.5px; color: rgba(252,248,238,.55); margin-top: 3px; }
.dft-meta .add-pill {
  display: inline-block; margin-left: 7px;
  font-family: var(--sans); font-weight: 800; font-size: 9.5px; letter-spacing: .06em;
  color: var(--navy-900); background: linear-gradient(160deg, var(--gold-300), var(--gold-500));
  border-radius: 999px; padding: 2px 7px; vertical-align: middle;
}
.dw-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-top: 1px solid rgba(244,213,138,.16);
  background: rgba(6,11,30,.4);
  font-size: 13.5px; color: rgba(252,248,238,.7);
}
.dw-foot .dwf-ic { color: var(--gold-300); font-weight: 800; }

/* Hero Box physical strip (Legend) */
.deliv-box {
  position: relative; z-index: 2; max-width: 880px; margin: 14px auto 0;
  border-radius: 16px; padding: 20px 22px;
  background: linear-gradient(160deg, rgba(244,213,138,.1), rgba(244,213,138,.02));
  border: 1px solid rgba(244,213,138,.32);
}
.deliv-box-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.deliv-box-head .dbh-ic {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  font-size: 16px; color: var(--navy-900);
  background: radial-gradient(circle at 50% 35%, var(--gold-200), var(--gold-500));
}
.deliv-box-head b { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--cream-50); }
.deliv-box-head span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(252,248,238,.55); }
.deliv-box-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.deliv-box-chips .dbc {
  font-size: 12.5px; font-weight: 700; color: rgba(252,248,238,.88);
  padding: 6px 12px; border-radius: 999px;
  background: rgba(11,18,48,.45); border: 1px solid rgba(244,213,138,.22);
}
.delivery-note { position: relative; z-index: 2; text-align: center; margin: 26px auto 0; max-width: 44em; font-size: 14.5px; color: rgba(252,248,238,.62); }
@media (max-width: 680px) {
  .dw-grid { grid-template-columns: 1fr; }
  .deliv-tab { padding: 9px 15px; font-size: 13px; }
  .deliv-tab small { display: none; }
}

/* delivery — pločice s mockup sličicom (klik → lightbox „kako izgleda isprintano”) */
.dfile-tile.has-img { width: 100%; font: inherit; color: inherit; text-align: left; cursor: zoom-in; }
.dft-thumb {
  position: relative; flex-shrink: 0; width: 56px; height: 38px; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(244,213,138,.35); background: rgba(252,248,238,.06);
}
.dft-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dft-ext-pill {
  position: absolute; left: 3px; bottom: 3px; padding: 1px 4px; border-radius: 3px;
  background: rgba(6,11,30,.82); color: var(--gold-300); font-size: 8.5px; line-height: 1.3;
}
.dft-ext-pill.jpg { color: var(--lav); }
.dft-ext-pill.png { color: var(--volt-300); }
.dft-see {
  display: inline-block; margin-left: 7px; font-family: var(--sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: .04em; color: var(--gold-300); opacity: 0; transition: opacity .2s;
}
.dfile-tile.has-img:hover .dft-see, .dfile-tile.has-img:focus-visible .dft-see { opacity: 1; }
.deliv-box-chips .dbc.has-img { font-family: var(--sans); cursor: zoom-in; transition: border-color .2s, background .2s; }
.deliv-box-chips .dbc.has-img:hover { border-color: rgba(244,213,138,.6); background: rgba(11,18,48,.72); }
.deliv-box-chips .dbc.has-img span { color: var(--gold-300); }
.delivery-note a { color: var(--gold-300); font-weight: 700; }

/* ============================================================
   MATERIJALI — „ovako izgleda isprintano” (dark): mreža mockupa + vodič za print
   ============================================================ */
.materials {
  position: relative; overflow: hidden; color: var(--cream-50);
  background:
    radial-gradient(72% 60% at 14% 0%, rgba(244,213,138,.13), transparent 58%),
    radial-gradient(60% 60% at 92% 100%, rgba(187,169,226,.1), transparent 55%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
}
.materials .section-head { position: relative; z-index: 2; margin-bottom: 40px; }
.materials h2 { color: var(--cream-50); }
.materials h2 em { font-style: italic; color: var(--gold-300); }
.materials .section-head p { color: rgba(252,248,238,.74); }
.mat-tabs { flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }

.mat-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px;
}
.mat-card { margin: 0; display: flex; flex-direction: column; }
.mat-shot {
  position: relative; display: block; width: 100%; padding: 8px; margin: 0;
  border: 1px solid rgba(244,213,138,.34); border-radius: 14px; cursor: zoom-in;
  background: linear-gradient(160deg, rgba(252,248,238,.07), rgba(252,248,238,.02));
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.8);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.mat-shot:hover, .mat-shot:focus-visible {
  transform: translateY(-3px); border-color: rgba(244,213,138,.72);
  box-shadow: 0 40px 70px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(244,213,138,.18);
}
.mat-shot:focus-visible { outline: 3px solid rgba(244,213,138,.45); outline-offset: 3px; }
.mat-shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.mat-shot .mc { position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--gold-400); opacity: .85; }
.mat-shot .mc.tl { top: 3px; left: 3px; border-right: 0; border-bottom: 0; }
.mat-shot .mc.tr { top: 3px; right: 3px; border-left: 0; border-bottom: 0; }
.mat-shot .mc.bl { bottom: 3px; left: 3px; border-right: 0; border-top: 0; }
.mat-shot .mc.br { bottom: 3px; right: 3px; border-left: 0; border-top: 0; }
.mat-zoom {
  position: absolute; right: 18px; bottom: 18px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px; color: var(--navy-900);
  background: rgba(252,248,238,.92); box-shadow: 0 8px 18px -8px rgba(0,0,0,.6);
  opacity: 0; transform: scale(.85); transition: opacity .2s, transform .2s;
}
.mat-shot:hover .mat-zoom, .mat-shot:focus-visible .mat-zoom { opacity: 1; transform: scale(1); }
.mat-body { padding: 16px 6px 0; }
.mat-badge {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-300);
}
.mat-badge.box { color: #aecbff; }
.mat-badge em { font-style: normal; letter-spacing: .06em; color: rgba(252,248,238,.62); }
.mat-title { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--cream-50); margin-top: 6px; line-height: 1.12; }
.mat-kicker {
  display: inline-block; margin-left: 10px; vertical-align: 4px; white-space: nowrap;
  font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: var(--navy-900); background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  border-radius: 999px; padding: 3px 9px;
}
.mat-note { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; color: rgba(252,248,238,.62); }
.mat-desc { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: rgba(252,248,238,.78); }
.mat-print {
  margin-top: 12px; padding-top: 11px; border-top: 1px dashed rgba(244,213,138,.3);
  font-size: 13px; line-height: 1.55; color: rgba(252,248,238,.72);
}
.mat-print b { color: var(--cream-50); font-weight: 800; }
.mat-print-k {
  display: inline-block; margin-right: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300);
}
.mat-toggle { color: var(--cream-50); background: rgba(252,248,238,.06); border-color: rgba(244,213,138,.45); }
.mat-toggle:hover { background: rgba(252,248,238,.12); }

/* vodič za print (3 koraka) */
.mat-guide {
  position: relative; z-index: 2; margin: 56px auto 0; max-width: 980px;
  padding: 34px 36px 32px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(244,213,138,.1), rgba(244,213,138,.02));
  border: 1px solid rgba(244,213,138,.3);
}
.mat-guide-head { text-align: center; margin-bottom: 26px; }
.mat-guide-head h3 { font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); font-weight: 600; color: var(--cream-50); margin-top: 12px; }
.mat-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mat-step {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px;
  background: rgba(11,18,48,.45); border: 1px solid rgba(244,213,138,.18);
}
.mat-step .ms-n { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--gold-300); line-height: 1; }
.mat-step b { font-size: 16px; color: var(--cream-50); }
.mat-step span:last-child { font-size: 13.5px; line-height: 1.55; color: rgba(252,248,238,.72); }
.mat-guide-note {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(244,213,138,.2);
}
.mat-guide-note p { flex: 1 1 420px; font-size: 15px; line-height: 1.55; color: rgba(252,248,238,.8); }
.mat-guide-note b { color: var(--gold-300); }
@media (max-width: 940px) {
  .mat-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
  .mat-steps { grid-template-columns: 1fr; }
  .mat-title { font-size: 22px; }
}
@media (max-width: 560px) {
  .mat-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .mat-guide { padding: 26px 20px; }
  .mat-guide-note .btn { width: 100%; justify-content: center; }
}

/* comparison — collapsed-by-default toggle */
.cmp-toggle-wrap { text-align: center; margin-top: 24px; }
.cmp-toggle {
  font-family: var(--sans); font-weight: 800; font-size: 15px;
  color: var(--gold-700); background: var(--cream-50);
  border: 1.5px solid var(--gold-400); border-radius: 999px;
  padding: 13px 28px; cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .25s;
}
.cmp-toggle:hover { background: var(--cream-100); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
/* Dostupnost paketa dolazi iz istog API-ja koji štiti checkout. */
.products-capacity-note {
  max-width: 760px; margin: 22px auto 0; padding: 14px 18px; border-radius: 12px;
  background: rgba(227,169,58,.1); border: 1px solid rgba(227,169,58,.35);
  color: var(--ink-soft); line-height: 1.55;
}
.products-capacity-note b { color: var(--ink); }
.card.package-locked { opacity: .78; }
.card .btn.is-disabled { cursor: not-allowed; opacity: .58; pointer-events: none; }
.package-lock-note { margin: 10px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; text-align: center; }

/* dno zaključane kartice paketa: pun kapacitet / pauza → pečat + gumb „Obavijesti me” (otvara WaitlistModal) */
.package-full {
  margin-top: 28px; padding: 18px 18px 16px; border-radius: 16px; text-align: center;
  background: rgba(227,169,58,.09); border: 1px dashed rgba(198,139,38,.5);
}
.pf-stamp {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  font-family: var(--sans); font-weight: 900; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-900); background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  box-shadow: 0 10px 22px -12px rgba(227,169,58,.8);
}
.pf-btn { width: 100%; justify-content: center; margin-top: 14px; padding: 14px 20px; font-size: 15px; white-space: normal; }
.pf-text { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.card.premium .package-full { background: rgba(244,213,138,.08); border-color: rgba(244,213,138,.45); }
.card.premium .pf-text { color: rgba(252,248,238,.8); }
/* napomena iznad paketa s gumbom koji otvara isti modal */
.products-capacity-note.has-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; text-align: center; }
.pcn-btn {
  background: none; border: none; padding: 0; font: inherit; font-weight: 800; cursor: pointer;
  color: var(--gold-700); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.pcn-btn:hover { color: var(--gold-600); }

/* ============================================================
   KONVERZIJA (18.9.) — kompaktne recenzije u launch modu, materijali kao traka na mobitelu,
   broj datoteka po paketu (zamjena za sekciju „što sleti u inbox”)
   ============================================================ */
.section.reviews-launch { padding: 36px 0; }
.launch-line {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--cream-200); border-radius: 18px;
  padding: 18px 22px; box-shadow: var(--shadow-soft);
}
.launch-line .ll-mark { color: var(--gold-500); font-size: 22px; }
.launch-line p { flex: 1 1 380px; margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.launch-line p b { color: var(--ink); }
.launch-line .btn { padding: 11px 20px; font-size: 14px; white-space: nowrap; }
@media (max-width: 560px) { .launch-line .btn { width: 100%; justify-content: center; } }

.mat-inbox { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -16px 0 28px; }
.mat-inbox-chip {
  font-size: 12.5px; color: rgba(252,248,238,.75);
  background: rgba(252,248,238,.06); border: 1px solid rgba(244,213,138,.25); border-radius: 999px; padding: 7px 13px;
}
.mat-inbox-chip b { color: var(--gold-300); }
/* Tabovi iznad broje VRSTE materijala, čipovi broje DATOTEKE — oznaka sprečava da se dvije brojke čitaju kao proturječne. */
.mat-inbox-label { align-self: center; font-size: 12.5px; color: rgba(252,248,238,.55); letter-spacing: .01em; }
.mat-hint-swipe { display: none; position: relative; z-index: 2; text-align: center; font-size: 12.5px; color: rgba(252,248,238,.55); margin-top: 4px; }
@media (max-width: 560px) {
  /* 21 kartica jedna ispod druge = 7 ekrana; vodoravna traka sa sličicama = 1 ekran */
  .mat-grid {
    display: flex; max-width: none; margin: 0 -20px; padding: 4px 20px 12px; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .mat-grid::-webkit-scrollbar { display: none; }
  .mat-card { flex: 0 0 74vw; scroll-snap-align: start; }
  .mat-desc, .mat-print { display: none; }
  .mat-body { padding-top: 10px; }
  .mat-title { font-size: 19px; }
  .mat-hint-swipe { display: block; }
  .mat-inbox { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; margin-left: -20px; margin-right: -20px; padding: 0 20px 6px; scrollbar-width: none; }
  .mat-inbox-chip { white-space: nowrap; flex: 0 0 auto; }
  .mat-inbox-label { white-space: nowrap; flex: 0 0 auto; }
}

/* Premium / Hero Box kao čipovi (18.9.): naslov stavke, klik otvara mockup iz Materijala; opisi su u lightboxu */
.prem-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.prem-chip {
  font-family: var(--sans); font-size: 13px; font-weight: 700; line-height: 1.3; color: rgba(252,248,238,.86);
  background: rgba(11,18,48,.55); border: 1px solid rgba(244,213,138,.3); border-radius: 999px; padding: 8px 13px;
  cursor: zoom-in; text-align: left; transition: border-color .2s, background .2s, transform .15s;
}
.prem-chip:hover, .prem-chip:focus-visible { border-color: rgba(244,213,138,.72); background: rgba(11,18,48,.85); transform: translateY(-1px); }
.prem-chip:focus-visible { outline: 3px solid rgba(244,213,138,.45); outline-offset: 2px; }
.prem-chip span { color: var(--gold-300); }
.prem-chip.static { cursor: default; color: rgba(252,248,238,.65); }
.prem-chip.static:hover { border-color: rgba(244,213,138,.3); background: rgba(11,18,48,.55); transform: none; }
.prem-chips-hint { margin-top: 10px; font-size: 12px; color: rgba(252,248,238,.5); }
.prem-see {
  display: inline; padding: 0; border: none; background: none; cursor: zoom-in;
  font: inherit; font-weight: 800; color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px;
}

/* ============================================================
   TRUST BAR (18.9.) — između tamnog heroa i tamne galerije: noćno plavo umjesto krem trake,
   tanka zlatna linija gore/dolje, zlatne ikone, zlatne točkice između stavki.
   ============================================================ */
.trustbar {
  position: relative; z-index: 6;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(244,213,138,.08), transparent 70%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
  border-top: 1px solid rgba(244,213,138,.16);
  border-bottom: 1px solid rgba(244,213,138,.16);
}
.trustbar::before, .trustbar::after {
  /* zlatna nit koja se stanjuje prema rubovima */
  content: ""; position: absolute; left: 10%; right: 10%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244,213,138,.55), transparent);
}
.trustbar::before { top: -1px; }
.trustbar::after { bottom: -1px; }
.trustbar-in { justify-content: center; gap: 12px 0; padding: 15px 32px; }
.trust-item { gap: 9px; padding: 0 22px; position: relative; }
.trust-item + .trust-item::before {
  content: "✦"; position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
  font-size: 8px; color: rgba(244,213,138,.5);
}
.ti-ic { font-size: 13px; color: var(--gold-300); }
.ti-ic.gold { color: var(--gold-300); }
.ti-t { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: rgba(252,248,238,.82); }
@media (max-width: 560px) {
  .trustbar-in { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 0; padding: 14px 16px; }
  .trust-item { padding: 0 6px; justify-content: center; text-align: center; }
  .trust-item + .trust-item::before { display: none; }
  .trust-item:nth-child(odd) { border-right: 1px solid rgba(244,213,138,.14); }
  .ti-t { font-size: 12.5px; }
}