/* =========================================================================
   HOME-V3.CSS  —  "The Signature" varijanta (topla, lična, coaching)
   Isti brend/tokeni, potpuno druga struktura.
   ========================================================================= */

/* ---- FULL-BLEED: sve V3 sekcije od ivice do ivice ---- */
.v3-hero, .v3-pains, .v3-shift, .v3-signature, .v3-included,
.v3-note, .v3-proof, .v3-faq, .v3-cta {
  max-width: none !important;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---- zajednički elementi ---- */
.v3-eyebrow {
  font-family: var(--font-telo);
  font-size: var(--fs-label); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-wine); margin-bottom: 1rem;
}
.v3-eyebrow--center { text-align: center; }
.v3-eyebrow--light { color: var(--c-on-wine-dim); }
.v3-section-head { margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.v3-section-head--center { text-align: center; }
.v3-section-title { font-family: var(--font-naslov); font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.1; color: var(--c-heading); }
.v3-section-title em { font-style: italic; }
.v3-section-title--light { color: var(--c-cream); }
.v3-textlink {
  font-family: var(--font-telo); font-size: var(--fs-small);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-wine); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.v3-textlink:hover { color: var(--c-wine-dark); }

/* =========================================================================
   1. HERO — centriran tekst + široka slika ispod
   ========================================================================= */
.v3-hero { background: var(--c-cream); padding-top: clamp(5.5rem, 9vw, 8.5rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.v3-hero-inner { text-align: center; max-width: 60rem; }
.v3-hero-title {
  font-family: var(--font-naslov);
  font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02;
  color: var(--c-wine); margin: 0.6rem auto 1.5rem; max-width: 18ch;
}
.v3-hero-title em { font-style: italic; }
.v3-hero-lead {
  font-size: clamp(0.98rem, 1.2vw, 1.15rem); line-height: 1.8;
  color: var(--c-ink-soft); max-width: 52ch; margin: 0 auto 2rem;
}
.v3-hero-actions { display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap; margin-bottom: clamp(3rem, 6vw, 5rem); }
.v3-hero-banner {
  width: min(88%, 440px); aspect-ratio: 4 / 5; margin: 0 auto;
  background: var(--img), linear-gradient(160deg, var(--c-wine-dark), var(--c-wine));
  background-size: cover; background-position: center;
  outline: 1px solid var(--c-heading); outline-offset: 12px;
}

/* =========================================================================
   2. PAIN POINTS
   ========================================================================= */
.v3-pains { background: var(--c-wine); color: var(--c-on-wine); padding-block: var(--space-section); }
.v3-pains .v3-eyebrow { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.v3-pain-list { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; text-align: center; }
.v3-pain-list li {
  font-family: var(--font-naslov);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem); line-height: 1.4;
  color: var(--c-cream); padding-block: clamp(1.2rem, 2.5vw, 1.8rem);
}
.v3-pain-list li + li { border-top: 1px solid rgba(240,236,227,.18); }
.v3-pain-list em { font-style: italic; color: var(--c-on-wine-dim); }

/* =========================================================================
   3. TRANSFORMATION (From -> To)
   ========================================================================= */
.v3-shift { background: var(--c-cream); padding-block: var(--space-section); }
.v3-shift-grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.2rem, 3vw, 2.5rem); align-items: stretch; max-width: 62rem; margin: 0 auto;
}
.v3-shift-col { padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.2rem); border-radius: 5px; }
.v3-shift-col--from { background: transparent; border: 1px solid rgba(82,27,22,.16); color: var(--c-ink-soft); }
.v3-shift-col--to { background: #fff; border-top: 3px solid var(--c-wine); box-shadow: 0 26px 55px rgba(82,27,22,.12); color: var(--c-ink); }
.v3-shift-label {
  font-family: var(--font-telo); font-size: var(--fs-label);
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.3rem;
}
.v3-shift-col--from .v3-shift-label { color: var(--c-ink-soft); }
.v3-shift-col--to .v3-shift-label { color: var(--c-wine); }
.v3-shift-col ul { list-style: none; margin: 0; padding: 0; }
.v3-shift-col li {
  position: relative; padding: 0.8rem 0 0.8rem 1.7rem;
  font-size: var(--fs-small); line-height: 1.5;
}
.v3-shift-col li + li { border-top: 1px solid rgba(82,27,22,.12); }
.v3-shift-col li::before {
  position: absolute; left: 0; top: 0.85rem;
  font-family: var(--font-telo); font-size: 0.9em; line-height: 1;
}
.v3-shift-col--from li::before { content: "\2014"; color: rgba(82,27,22,.4); }   /* — */
.v3-shift-col--to li { font-weight: 500; transition: color .25s ease, transform .25s ease; }
.v3-shift-col--to li::before { content: "\2713"; color: var(--c-wine); }          /* ✓ */
.v3-shift-col--to li:hover { color: var(--c-wine); transform: translateX(4px); }
.v3-shift-arrow { align-self: center; font-family: var(--font-naslov); font-size: clamp(2rem, 4vw, 3.2rem); color: var(--c-wine); line-height: 1; }
/* strelica se nežno klati ka "the one" (samo desktop, da ne kvari rotaciju na telefonu) */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .v3-shift-arrow { animation: v3-nudge 2.4s ease-in-out infinite; }
}
@keyframes v3-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
@media (max-width: 720px) {
  .v3-shift-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .v3-shift-arrow { transform: rotate(90deg); justify-self: center; }
}

/* =========================================================================
   4. SIGNATURE OFFER
   ========================================================================= */
.v3-signature { background: var(--c-cream-soft); padding-block: var(--space-section); }
.v3-signature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.v3-signature-media {
  position: relative; aspect-ratio: 4 / 5;
  background: var(--img), linear-gradient(160deg, var(--c-wine-dark), var(--c-wine));
  background-size: cover; background-position: center;
  outline: 1px solid var(--c-heading); outline-offset: 12px;
}
.v3-signature-badge {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--font-telo); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-cream); background: var(--c-wine); padding: 7px 12px; border-radius: 100px;
}
.v3-signature-title { font-family: var(--font-naslov); font-size: clamp(2rem, 3.6vw, 3rem); color: var(--c-heading); margin-bottom: 1.2rem; }
.v3-signature-lead { font-size: var(--fs-small); line-height: 1.8; color: var(--c-ink-soft); max-width: 46ch; margin-bottom: 1.4rem; }
.v3-signature-meta { font-family: var(--font-telo); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--c-wine); margin-bottom: 1.8rem; }
@media (max-width: 820px) {
  .v3-signature-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .v3-signature-media { order: -1; width: min(100%, 360px); margin-inline: auto; outline-offset: 8px; }
}

/* =========================================================================
   5. WHAT'S INCLUDED (čeklista na bordo)
   ========================================================================= */
.v3-included { background: var(--c-wine); color: var(--c-on-wine); padding-block: var(--space-section); }
.v3-included-grid {
  list-style: none; margin: 0 auto; padding: 0; max-width: 64rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3.5vw, 2.6rem);
}
.v3-included-grid li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.v3-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  border: 1px solid rgba(240,236,227,.4); color: var(--c-cream); font-size: 14px;
}
.v3-included-grid strong { display: block; font-family: var(--font-naslov); font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.15; color: var(--c-cream); margin-bottom: 0.5rem; font-weight: 400; }
.v3-included-grid p { font-size: var(--fs-small); line-height: 1.6; color: var(--c-on-wine-dim); }
@media (max-width: 720px) { .v3-included-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   6. FOUNDER NOTE
   ========================================================================= */
.v3-note { background: var(--c-cream-soft); padding-block: var(--space-section); }
.v3-note-inner { text-align: center; max-width: 48rem; }
.v3-note-text {
  font-family: var(--font-naslov); font-style: italic;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem); line-height: 1.45;
  color: var(--c-heading); margin: 0 0 1.6rem;
}
.v3-note-sign { color: var(--c-wine); font-size: clamp(1.8rem, 3vw, 2.6rem); transform: rotate(-4deg); margin-top: 0.5rem; }
.v3-note-role { font-family: var(--font-telo); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--c-ink-soft); margin-top: 1rem; }

/* =========================================================================
   7. FEATURED TESTIMONIAL
   ========================================================================= */
.v3-proof { background: var(--c-wine); color: var(--c-on-wine); padding-block: var(--space-section); }
.v3-proof-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.v3-proof-media {
  aspect-ratio: 4 / 5;
  background: var(--img), linear-gradient(160deg, var(--c-wine-dark), var(--c-wine-deep));
  background-size: cover; background-position: center;
  outline: 1px solid rgba(240,236,227,.4); outline-offset: 12px;
}
.v3-proof-quote { font-family: var(--font-naslov); font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.4; color: var(--c-cream); margin: 0 0 1.4rem; }
.v3-proof-quote em { font-style: italic; color: var(--c-on-wine-dim); }
.v3-proof-meta { font-family: var(--font-telo); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--c-on-wine-dim); }
@media (max-width: 820px) {
  .v3-proof-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .v3-proof-media { order: -1; width: min(100%, 340px); margin-inline: auto; outline-offset: 8px; }
}

/* =========================================================================
   8. FAQ (details/summary)
   ========================================================================= */
.v3-faq { background: var(--c-cream); padding-block: var(--space-section); }
.v3-faq-list { max-width: 50rem; margin: 0 auto; }
.v3-faq-item { border-top: 1px solid rgba(82,27,22,.18); }
.v3-faq-item:last-child { border-bottom: 1px solid rgba(82,27,22,.18); }
.v3-faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--font-naslov); font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--c-heading); padding-block: clamp(1.1rem, 2.2vw, 1.5rem);
}
.v3-faq-item summary::-webkit-details-marker { display: none; }
.v3-faq-item summary::after { content: "+"; font-family: var(--font-naslov); font-size: 1.6em; color: var(--c-wine); line-height: 1; transition: transform .25s ease; }
.v3-faq-item[open] summary::after { transform: rotate(45deg); }
.v3-faq-item p { font-size: var(--fs-small); line-height: 1.8; color: var(--c-ink-soft); max-width: 60ch; padding-bottom: 1.5rem; margin: 0; }

/* =========================================================================
   9. FINAL CTA (topao)
   ========================================================================= */
.v3-cta { background: var(--c-cream-soft); padding-block: var(--space-section); }
.v3-cta-inner { text-align: center; max-width: 46rem; }
.v3-cta-title { font-family: var(--font-naslov); font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 1.1; color: var(--c-heading); margin: 0.4rem auto 1rem; }
.v3-cta-title em { font-style: italic; color: var(--c-wine); }
.v3-cta-lead { font-size: var(--fs-small); line-height: 1.8; color: var(--c-ink-soft); margin: 0 auto 2rem; }

/* ---- mobilni: vazduh gore (fiksni header ~80px) ---- */
@media (max-width: 860px) {
  .v3-hero { padding-top: clamp(8.5rem, 26vw, 10rem); }
  .v3-hero-banner { width: min(82%, 360px); outline-offset: 8px; }
}