/* ═══════════════════════════════════════════════
   RESET - full-width override za Hello Elementor temu
   ═══════════════════════════════════════════════ */
/* Horizontalni overflow fix - koristi 'clip' umesto 'hidden' da sticky header radi */
html:has(body.byf-landing-v2-active),
body.byf-landing-v2-active{
  overflow-x:clip !important;
  max-width:100%;
}
/* Fallback za browsere koji ne podržavaju overflow:clip */
@supports not (overflow-x: clip){
  html:has(body.byf-landing-v2-active),
  body.byf-landing-v2-active{overflow-x:hidden !important}
}
.byf-landing-v2-active .entry-content,
.byf-landing-v2-active .site-content,
.byf-landing-v2-active .site-main,
.byf-landing-v2-active main,
.byf-landing-v2-active article,
.byf-landing-v2-active .content-area,
.byf-landing-v2-active .page-content,
.byf-landing-v2-active .ast-container,
.byf-landing-v2-active .elementor-section-wrap,
.byf-landing-v2-active .elementor-widget-container{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.byf-landing-v2-active .site-content > .ast-container,
.byf-landing-v2-active #primary,
.byf-landing-v2-active #content{
  max-width:100% !important;
  padding:0 !important;
}

/* ═══════════════════════════════════════════════
   PALETA - Calmmia-style: lavender + bela + crna
   ═══════════════════════════════════════════════ */
:root{
  /* Osnovne - nežno lilac sa notom plave, skoro bela */
  --bg:            #F5F1FB;   /* glavna pozadina, ledeno lilac */
  --bg-soft:       #FAF7FE;   /* još svetlija lilac */
  --bg-gradient:   linear-gradient(180deg,
                     #EAE5F6 0%,
                     #E8ECF7 35%,
                     #F2EEF9 70%,
                     #FBFAFE 100%);
  --blue-tint:     #E8ECF8;   /* nežna pastel-plava */
  --blue-accent:   #A8B9D9;

  /* Lavender akcenti - mirni, niskosaturisani */
  --lavender-soft: #EAE3F7;   /* kartice/akcenti */
  --lavender:      #C9BEEE;   /* granice, progress */
  --lavender-deep: #8B7FD4;   /* ikonice, italic naglasci */

  /* Pink - SKORO neprisutan, samo za suptilne detalje */
  --rose-soft:     #F3EBF0;
  --rose-deep:     #B88FA8;

  /* Sporedni pasteli za kartice u dashboard sekciji */
  --blue-soft:     #E7ECF7;
  --peach:         #F5EDE5;
  --sage:          #E8EDE7;

  /* Tekst - skoro crn, mirno */
  --ink:           #17131F;
  --ink-soft:      #3D3449;
  --muted:         rgba(23, 19, 31, 0.50);

  /* CTA crno - kao Calmmia */
  --btn-dark:      #0A0712;
  --white:         #FFFFFF;
  --border:        rgba(139, 127, 212, 0.14);

  --shadow-sm:  0 4px 16px rgba(139, 127, 212, 0.08);
  --shadow:     0 12px 32px rgba(139, 127, 212, 0.12);
  --shadow-lg:  0 24px 60px rgba(139, 127, 212, 0.18);

  --r-sm: 14px;
  --r:    20px;
  --r-lg: 28px;

  --font:    'Manrope', system-ui, -apple-system, sans-serif;
  --display: 'Playfair Display', Georgia, serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg-gradient);
  background-attachment:fixed;
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

.container{max-width:1180px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:820px;margin:0 auto;padding:0 24px}

/* ─── Typo ─── */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-0.01em;margin:0}
h1{font-size:clamp(36px,5.5vw,64px)}
h2{font-size:clamp(30px,4vw,48px)}
h3{font-size:clamp(22px,2.4vw,28px)}
em{font-style:italic;color:var(--lavender-deep)}
.section-label{
  display:inline-block;
  font-family:var(--font);
  font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--lavender-deep);
  background:var(--lavender-soft);
  padding:8px 14px;border-radius:999px;margin-bottom:18px;
}
.section-sub{color:var(--muted);font-size:16px;line-height:1.7;margin:14px auto 0;max-width:680px}
.text-center{text-align:center}

/* ─── Buttons - tanji, Calmmia style ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:999px;font-weight:600;font-size:14px;
  letter-spacing:-0.005em;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
  line-height:1;
  text-decoration:none !important;
  border:none;
}
.byf-landing-v2-active .btn,
.byf-landing-v2-active a.btn{text-decoration:none !important}
.byf-landing-v2-active .btn:hover,
.byf-landing-v2-active a.btn:hover,
.byf-landing-v2-active .btn:focus,
.byf-landing-v2-active a.btn:focus,
.byf-landing-v2-active .btn:active,
.byf-landing-v2-active a.btn:active{text-decoration:none !important}

/* Boja teksta na hover / focus — tema ne sme da promeni */
.byf-landing-v2-active .btn-dark,
.byf-landing-v2-active a.btn-dark,
.byf-landing-v2-active .btn-dark:hover,
.byf-landing-v2-active a.btn-dark:hover,
.byf-landing-v2-active .btn-dark:focus,
.byf-landing-v2-active a.btn-dark:focus,
.byf-landing-v2-active .btn-dark:active,
.byf-landing-v2-active a.btn-dark:active,
.byf-landing-v2-active .btn-dark:visited,
.byf-landing-v2-active a.btn-dark:visited{
  color:#FFFFFF !important;
}
.byf-landing-v2-active .btn-ghost,
.byf-landing-v2-active a.btn-ghost,
.byf-landing-v2-active .btn-ghost:hover,
.byf-landing-v2-active a.btn-ghost:hover,
.byf-landing-v2-active .btn-ghost:focus,
.byf-landing-v2-active a.btn-ghost:focus,
.byf-landing-v2-active .btn-ghost:active,
.byf-landing-v2-active a.btn-ghost:active,
.byf-landing-v2-active .btn-ghost:visited,
.byf-landing-v2-active a.btn-ghost:visited{
  color:var(--ink) !important;
}
.btn-dark{background:var(--btn-dark);color:var(--white)}
.btn-dark:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,10,26,0.24)}
.btn-ghost{background:var(--white);color:var(--ink);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--lavender-soft)}
.btn-large{padding:16px 26px;font-size:14.5px}

/* ─── Sekcija spacing ─── */
section{padding:100px 0}
@media (max-width:760px){section{padding:64px 0}}

/* ═══════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════ */
.byf-header{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
  background:rgba(245,241,251,0.85);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--border);
  padding:12px 0;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-family:var(--display);font-size:22px;font-weight:600;flex-shrink:0}
.logo em{color:var(--lavender-deep)}
.nav-cta{display:flex;gap:12px;align-items:center;flex-shrink:0}
.nav-cta .btn{padding:10px 18px;font-size:13.5px}

/* Countdown u sredini header-a */
.header-countdown{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--ink-soft);
  padding:7px 14px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:999px;
  box-shadow:0 2px 8px rgba(100,90,160,0.08);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.hcd-pulse{
  display:inline-block;
  width:7px;height:7px;border-radius:50%;
  background:var(--lavender-deep);
  animation:pulse 2s infinite;
  flex-shrink:0;
  margin-right:-2px;
}
.hcd-prefix{margin-right:2px;color:var(--muted);font-weight:500}
.hcd-unit{
  display:inline-flex;
  align-items:baseline;
  gap:1px;
}
.hcd-unit strong{
  color:var(--lavender-deep);
  font-weight:700;
  min-width:16px;
  text-align:right;
  display:inline-block;
}
.hcd-label{
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  margin-left:1px;
}
.hcd-sep{color:var(--lavender);margin:0 -3px;font-weight:500;opacity:0.7}
.hcd-divider{color:var(--border);margin:0 2px}
.hcd-tag{color:var(--rose-deep);font-weight:600;font-size:12.5px}

@media (max-width:900px){
  .header-countdown{display:none}
}

/* ═══════════════════════════════════════════════
   CSS PHONE MOCKUP - KLJUČNA KOMPONENTA
   ═══════════════════════════════════════════════ */
.phone{
  --pw: 260px;
  --ph: 540px;
  width:var(--pw);height:var(--ph);
  position:relative;
  border-radius:44px;
  background:var(--white);
  padding:6px;
  box-shadow:
    0 30px 70px -20px rgba(100,90,160,0.22),
    0 10px 24px -10px rgba(100,90,160,0.14),
    0 0 0 1px rgba(139,127,212,0.10);
}
.phone::before{ /* minimalna dynamic island */
  content:'';
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:64px;height:16px;background:#1a1523;
  border-radius:10px;z-index:3;
  box-shadow:0 0 0 2px rgba(255,255,255,0.95);
}
.phone::after{ /* suptilni reflektujući highlight na ramu */
  content:'';
  position:absolute;inset:0;
  border-radius:44px;
  background:linear-gradient(135deg,
    rgba(255,255,255,0.6) 0%,
    transparent 40%,
    transparent 60%,
    rgba(234,227,247,0.3) 100%);
  pointer-events:none;z-index:1;
  mix-blend-mode:overlay;
}
.phone-screen{
  width:100%;height:100%;
  background:var(--white);
  border-radius:38px;
  overflow:hidden;
  position:relative;
  z-index:2;
}
.phone-scroll{
  width:100%;
  transform:translateY(0);
  will-change:transform;
}
.phone-scroll img{width:100%;display:block;pointer-events:none}

/* Multi-slide phones (klik u detalj) */
.phone-slider{
  display:flex;
  width:200%;
  height:100%;
  transform:translateX(0);
  will-change:transform;
}
.phone-slide{
  flex:0 0 50%;
  height:100%;
  overflow:hidden;
  position:relative;
}

/* Dot indikator ispod telefona */
.phone-dots{
  display:flex;gap:6px;justify-content:center;
  margin-top:14px;
}
.phone-dots span{
  width:6px;height:6px;border-radius:50%;
  background:var(--lavender);opacity:0.5;
  transition:all .3s ease;
}
.phone-dots span.active{
  width:18px;border-radius:99px;
  background:var(--lavender-deep);opacity:1;
}
.phone-multi-hint{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;color:var(--lavender-deep);
  background:var(--lavender-soft);
  padding:3px 8px;border-radius:999px;
  margin-top:8px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.05em;
}

/* Placeholder content kad slike nema */
.phone-placeholder{
  width:100%;
  background:linear-gradient(180deg,
    var(--lavender-soft) 0%,
    var(--rose-soft) 25%,
    var(--blue-soft) 50%,
    var(--peach) 75%,
    var(--sage) 100%);
  padding:80px 16px 20px;
  font-size:11px;color:var(--ink-soft);
}
.phone-placeholder .ph-block{
  background:white;border-radius:12px;padding:14px;margin-bottom:10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.phone-placeholder .ph-title{font-weight:700;margin-bottom:6px;color:var(--ink)}
.phone-placeholder .ph-meta{font-size:10px;color:var(--muted)}
.phone-placeholder .ph-bar{
  height:6px;border-radius:99px;background:var(--lavender-soft);
  margin-top:8px;overflow:hidden;
}
.phone-placeholder .ph-bar span{display:block;height:100%;background:var(--lavender-deep);border-radius:99px}

/* ═══════════════════════════════════════════════
   1. HERO
   ═══════════════════════════════════════════════ */
.hero{padding:70px 0 100px;position:relative;overflow:hidden;text-align:center}
@media (max-width:760px){.hero{padding:40px 0 32px}}
.hero::before{
  content:'';position:absolute;top:-240px;right:-200px;width:680px;height:680px;
  background:radial-gradient(circle, rgba(201,190,238,0.35) 0%, transparent 65%);
  z-index:0;
}
.hero::after{
  content:'';position:absolute;bottom:-180px;left:-180px;width:560px;height:560px;
  background:radial-gradient(circle, rgba(232,236,248,0.4) 0%, transparent 65%);
  z-index:0;
}
.hero-content{
  position:relative;z-index:1;
  max-width:760px;margin:0 auto;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);padding:8px 16px;border-radius:999px;
  font-size:13px;font-weight:500;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  margin-bottom:24px;
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--lavender-deep);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.hero h1{margin-bottom:22px}
.hero-identity{
  font-size:18px;color:var(--lavender-deep);font-weight:600;
  margin-bottom:18px;
}
.hero-sub{font-size:17px;color:var(--ink-soft);margin:0 auto 36px;line-height:1.7;max-width:640px}
.hero-ctas{display:flex;gap:12px;margin-bottom:32px;flex-wrap:wrap;justify-content:center}
.hero-proof{display:flex;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--muted);justify-content:center}
@media (max-width:700px){.hero-proof span:nth-child(3){display:none}}

/* VIDEO + anotacije */
.hero-video-wrap{
  position:relative;z-index:1;
  max-width:960px;margin:70px auto 0;
}
.hero-video{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  box-shadow:
    0 50px 100px -25px rgba(100,90,160,0.30),
    0 20px 40px -15px rgba(139,127,212,0.18),
    0 0 0 1px rgba(139,127,212,0.08);
  aspect-ratio:16/10;
  background:linear-gradient(135deg,
    #E8ECF8 0%,
    #EAE3F7 50%,
    #F3EBF0 100%);
  cursor:pointer;
  transition:transform .4s ease;
}
.hero-video:hover{transform:translateY(-3px)}
.hero-video iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  border-radius:28px;
}

/* Poster pre klika - prava slika dashboard-a sa nežnim lavender vignette-om */
.video-poster{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background-image:url('https://beyourfit.rs/wp-content/uploads/2026/04/Dashboard-desktop-scaled.jpg');
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
}
.video-poster::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center, rgba(26,21,35,0.12) 0%, rgba(26,21,35,0.28) 100%),
    linear-gradient(180deg, rgba(234,227,247,0.08) 0%, rgba(232,236,248,0.2) 100%);
}
.video-play{
  width:68px;height:68px;border-radius:50%;
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    0 14px 38px rgba(100,90,160,0.28),
    0 6px 16px rgba(100,90,160,0.16);
  position:relative;z-index:1;
  transition:transform .3s ease, box-shadow .3s ease;
}
.video-play::after{
  content:'';
  display:block;
  border-left:16px solid var(--ink);
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  margin-left:4px;
}
.hero-video:hover .video-play{
  transform:scale(1.08);
  box-shadow:
    0 28px 60px rgba(100,90,160,0.35),
    0 10px 24px rgba(100,90,160,0.22);
}

/* Suptilni "ripple" pulse oko play dugmeta */
.video-play-ripple{
  position:absolute;
  width:68px;height:68px;border-radius:50%;
  border:2px solid rgba(255,255,255,0.6);
  animation:ripple 2.5s ease-out infinite;
  pointer-events:none;
}
@keyframes ripple{
  0%{transform:scale(1);opacity:0.8}
  100%{transform:scale(1.8);opacity:0}
}

/* Glass anotacije sa strane video-a (premium, staklene) */
.hero-annotation{
  position:absolute;
  z-index:2;
  display:flex;align-items:center;gap:10px;
  animation:float-annot 6s ease-in-out infinite;
}
.annot-card{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px 10px 10px;
  border-radius:14px;
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:
    0 10px 40px rgba(100,90,160,0.18),
    0 2px 8px rgba(100,90,160,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
.annot-icon{
  width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
}
.annot-icon.ic-globe{background:linear-gradient(135deg,#E1EBF9,#C7D6EE);color:#5B7AB5}
.annot-icon.ic-mila{background:linear-gradient(135deg,#EDE7FB,#C9BEEE);color:#8B7FD4}
.annot-icon.ic-heart{background:linear-gradient(135deg,#F9E5EC,#E8A5BD);color:#B8688A}
.annot-text{font-size:12px;line-height:1.25;color:var(--ink)}
.annot-text strong{display:block;font-weight:700;font-size:13px;letter-spacing:-0.005em}
.annot-text span{color:var(--muted);font-size:11px}
.annot-arrow{
  width:40px;height:20px;
  color:var(--lavender-deep);
  opacity:0.7;
  flex-shrink:0;
}

.ann-1{top:12%;left:-16px;transform:translateX(-100%)}
.ann-2{top:6%;right:-16px;transform:translateX(100%);flex-direction:row-reverse;animation-delay:-2s}
.ann-3{bottom:14%;left:-16px;transform:translateX(-100%);animation-delay:-4s}

.ann-2 .annot-arrow{transform:scaleX(-1)}

@keyframes float-annot{
  0%,100%{translate:0 0}
  50%{translate:0 -6px}
}

@media (max-width:1200px){
  .hero-annotation{display:none}
}
@media (max-width:700px){
  .hero-video-wrap{margin-top:48px}
  .hero h1{font-size:40px}
}

/* ═══════════════════════════════════════════════
   2. PAIN POINTS
   ═══════════════════════════════════════════════ */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
@media (max-width:900px){.pain-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.pain-grid{grid-template-columns:1fr}}
.pain-card{
  background:var(--white);padding:28px;border-radius:var(--r);
  border:1px solid var(--border);
  transition:transform .3s ease, box-shadow .3s ease;
}
.pain-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pain-ico{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  margin-left:-4px; /* ikone imaju unutrašnji padding pa optički poravnaj */
}
.pain-ico img{
  width:100%;height:100%;object-fit:contain;
  display:block;
}
.pain-quote{font-weight:700;font-size:16px;margin-bottom:10px;color:var(--ink)}
.pain-body{color:var(--ink-soft);font-size:14.5px;line-height:1.6}
.pain-bridge{
  text-align:center;margin-top:60px;font-size:19px;line-height:1.7;
  color:var(--ink-soft);max-width:640px;margin-left:auto;margin-right:auto;
}
.pain-bridge strong{color:var(--ink)}
.pain-cta{
  text-align:center;
  margin-top:28px;
}

/* ═══════════════════════════════════════════════
   3. SVE NA JEDNOM MESTU - CAROUSEL
   ═══════════════════════════════════════════════ */
.everything{background:linear-gradient(180deg, transparent 0%, rgba(234,227,247,0.6) 100%)}
.carousel-wrap{margin-top:50px;position:relative}
.carousel{
  display:flex;gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:40px 24px 40px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carousel::-webkit-scrollbar{display:none}
.carousel-item{
  flex:0 0 auto;
  scroll-snap-align:center;
  text-align:center;
}
.carousel-item .phone{--pw:240px;--ph:500px;margin:0 auto}
.carousel-label{
  margin-top:20px;font-weight:600;font-size:14px;
  color:var(--ink);
}
.carousel-sub{font-size:12px;color:var(--muted);margin-top:4px}

.carousel-nav{
  display:flex;justify-content:center;gap:12px;margin-top:20px;
}
.carousel-btn{
  width:48px;height:48px;border-radius:50%;
  background:var(--white);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:all .2s;
}
.carousel-btn:hover{background:var(--lavender-soft);transform:scale(1.05)}

.carousel-hint{
  text-align:center;font-size:13px;color:var(--muted);margin-top:8px;
}

/* ─── Dve ukrštene marquee trake (X pattern, full-bleed) ─── */
.flow-x{
  position:relative;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  margin:90px 0 80px;
  height:180px;
  pointer-events:none;
}
/* Druga traka koja uvodi pricing - tešnje spojeno sa pricing sekcijom */
.flow-x--to-pricing{margin-bottom:40px}
.flow-x--to-pricing + .pricing{padding-top:50px}
.flow-strip{
  position:absolute;
  left:-5vw;
  width:110vw;
  padding:14px 0;
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
}
.flow-strip-dark{
  top:32px;
  transform:rotate(-3deg);
  background:linear-gradient(90deg,
    var(--btn-dark) 0%,
    #2D2438 50%,
    var(--btn-dark) 100%);
  color:var(--white);
  box-shadow:0 14px 34px rgba(15,10,26,0.25);
}
.flow-strip-light{
  bottom:32px;
  transform:rotate(3deg);
  background:linear-gradient(90deg,
    var(--white) 0%,
    var(--bg-soft) 50%,
    var(--white) 100%);
  color:var(--ink);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  box-shadow:0 14px 34px rgba(139,127,212,0.14);
}

.flow-track{
  display:inline-flex;
  align-items:center;
  gap:28px;
  white-space:nowrap;
  will-change:transform;
  padding-left:20px;
}
.flow-track-left{animation:flow-left 38s linear infinite}
.flow-track-right{animation:flow-right 42s linear infinite}
@keyframes flow-left{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes flow-right{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}

/* Reči u trakama - uppercase, bold, moderna tipografija */
.ft-word{
  font-family:var(--font);
  font-weight:800;
  font-size:26px;
  letter-spacing:0.02em;
  text-transform:uppercase;
}
/* Outline stil (samo kontura) - visuelni ritam */
.ft-outline{
  color:transparent;
  -webkit-text-stroke:1.5px var(--white);
  text-stroke:1.5px var(--white);
}
.ft-outline-dark{
  color:transparent;
  -webkit-text-stroke:1.5px var(--ink);
  text-stroke:1.5px var(--ink);
}

/* Separatori */
.ft-star{
  width:22px;height:22px;flex-shrink:0;
  color:var(--peach);
}
.ft-heart{
  width:20px;height:20px;flex-shrink:0;
  color:var(--lavender-deep);
}

@media (max-width:900px){
  .flow-x{height:150px;margin:70px 0 60px}
  .flow-strip-dark{top:20px}
  .flow-strip-light{bottom:20px}
  .ft-word{font-size:18px}
  .ft-star{width:16px;height:16px}
  .ft-heart{width:15px;height:15px}
}

/* ─── Kreativno poređenje cena (8 aplikacija → 1) ─── */
.replaces-compact{
  margin:0 auto;
  max-width:900px;
  padding:44px 32px 36px;
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:var(--r-lg);
  box-shadow:
    0 20px 60px -20px rgba(100,90,160,0.18),
    0 0 0 1px rgba(139,127,212,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.replaces-compact::before{
  content:'';
  position:absolute;top:-100px;right:-100px;width:300px;height:300px;
  background:radial-gradient(circle, rgba(201,190,238,0.25) 0%, transparent 60%);
  pointer-events:none;
}
.rc-intro{
  font-family:var(--display);
  font-style:italic;
  font-size:17px;
  color:var(--ink-soft);
  margin-bottom:22px;
}
.rc-pills{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px;
  margin-bottom:36px;
  position:relative;z-index:1;
}
.rc-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px;
  background:var(--white);
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12.5px;
  box-shadow:0 2px 8px rgba(100,90,160,0.06);
  transition:transform .2s ease;
}
.rc-pill:hover{transform:translateY(-2px)}
.rc-pill .rc-name{color:var(--ink-soft);font-weight:500}
.rc-pill .rc-price{color:var(--lavender-deep);font-weight:700;font-variant-numeric:tabular-nums}
.rc-plus{
  color:var(--muted);
  font-size:14px;
  font-weight:400;
  user-select:none;
}

.rc-result{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  max-width:640px;
  margin:0 auto 18px;
  position:relative;z-index:1;
}
.rc-result-label{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:8px;
  font-weight:600;
}
.rc-result-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}
.rc-old{
  padding:22px 20px;
  background:rgba(255,255,255,0.7);
  border:1px solid var(--border);
  border-radius:var(--r);
}
.rc-old-value{
  font-family:var(--display);
  font-size:38px;
  font-weight:600;
  color:var(--ink-soft);
  line-height:1;
  position:relative;
  display:inline-block;
}
.rc-old-value::after{
  content:'';
  position:absolute;
  left:-4px;right:-4px;top:52%;
  height:2px;
  background:rgba(216,143,174,0.75);
  transform:rotate(-8deg);
}
.rc-new{
  padding:22px 20px;
  background:linear-gradient(180deg, #2D2438 0%, #1F1828 100%);
  border-radius:var(--r);
  color:white;
  box-shadow:0 20px 40px -15px rgba(100,90,160,0.4);
}
.rc-new .rc-result-label{color:rgba(201,190,238,0.7)}
.rc-new .rc-result-sub{color:rgba(255,255,255,0.55)}
.rc-new-value{
  font-family:var(--display);
  font-size:52px;
  font-weight:600;
  line-height:1;
}
.rc-arrow{
  display:flex;align-items:center;justify-content:center;
  color:var(--lavender-deep);
}
.rc-arrow svg{width:40px;height:20px;opacity:0.8}
.rc-savings{
  font-family:var(--display);
  font-size:18px;
  font-style:italic;
  color:var(--ink-soft);
  margin-top:16px;
  position:relative;z-index:1;
}
.rc-savings em{
  color:var(--ink);
  font-weight:700;
  font-style:normal;
  background:linear-gradient(transparent 60%, rgba(201,190,238,0.5) 60%);
  padding:0 4px;
}

@media (max-width:700px){
  .replaces-compact{padding:32px 20px 28px}
  .rc-pills{gap:6px}
  .rc-pill{font-size:11.5px;padding:6px 11px;gap:7px}
  .rc-plus{display:none}
  .rc-result{grid-template-columns:1fr;gap:12px}
  .rc-arrow{transform:rotate(90deg)}
  .rc-old-value{font-size:30px}
  .rc-new-value{font-size:40px}
  .rc-savings{font-size:15px}
}

/* ═══════════════════════════════════════════════
   4. KAKO TI DAN IZGLEDA - PREMIUM TIMELINE
   ═══════════════════════════════════════════════ */
.day-flow{position:relative;overflow:hidden}
.day-flow::before{
  content:'';position:absolute;top:-100px;right:-150px;width:500px;height:500px;
  background:radial-gradient(circle, rgba(201,190,238,0.22) 0%, transparent 60%);
  pointer-events:none;
}
.day-flow::after{
  content:'';position:absolute;bottom:-100px;left:-150px;width:400px;height:400px;
  background:radial-gradient(circle, rgba(232,236,248,0.3) 0%, transparent 60%);
  pointer-events:none;
}

.timeline{
  position:relative;
  max-width:960px;
  margin:70px auto 0;
  padding:20px 0;
}
/* Centralna vertikalna linija sa gradient fade-ovima gore/dole */
.timeline-line{
  position:absolute;
  top:0;bottom:0;left:50%;
  width:2px;
  background:linear-gradient(180deg,
    transparent 0%,
    var(--lavender) 6%,
    var(--lavender) 94%,
    transparent 100%);
  transform:translateX(-50%);
  z-index:0;
}
/* Dekorativna "progress" linija koja se crta na scroll */
.timeline-line::after{
  content:'';position:absolute;top:0;left:-1px;width:4px;
  height:var(--tl-progress, 0%);
  background:linear-gradient(180deg, var(--lavender-deep), var(--rose-deep));
  border-radius:4px;
  box-shadow:0 0 12px rgba(139,127,212,0.5);
  transition:height .5s ease;
}

.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:1fr 40px 1fr;
  align-items:center;
  margin-bottom:56px;
}
.timeline-item:last-child{margin-bottom:0}

.timeline-dot{
  grid-column:2;
  width:18px;height:18px;border-radius:50%;
  background:var(--white);
  border:3px solid var(--lavender-deep);
  justify-self:center;
  position:relative;
  z-index:2;
  box-shadow:0 0 0 6px var(--bg-soft), 0 8px 20px rgba(139,127,212,0.25);
  transition:transform .4s ease, background .4s ease;
}
.timeline-item.in-view .timeline-dot{
  background:var(--lavender-deep);
  transform:scale(1.15);
}
.timeline-item.in-view .timeline-dot::after{
  content:'';position:absolute;inset:-8px;
  border-radius:50%;border:2px solid var(--lavender);
  opacity:0;animation:dot-ripple 2.5s ease-out infinite;
}
@keyframes dot-ripple{
  0%{transform:scale(0.8);opacity:0.7}
  100%{transform:scale(2);opacity:0}
}

.timeline-card{
  max-width:420px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:26px 28px;
  box-shadow:
    0 14px 36px -14px rgba(100,90,160,0.15),
    0 0 0 1px rgba(139,127,212,0.04);
  transition:transform .4s ease, box-shadow .4s ease, opacity .6s ease;
  opacity:0;
  position:relative;
}
.ti-left .timeline-card{
  grid-column:1;
  justify-self:end;
  margin-right:28px;
  transform:translateX(-20px);
}
.ti-right .timeline-card{
  grid-column:3;
  justify-self:start;
  margin-left:28px;
  transform:translateX(20px);
}
.timeline-item.in-view .timeline-card{
  opacity:1;
  transform:translateX(0);
}
.timeline-card:hover{
  transform:translateY(-4px) translateX(0) !important;
  box-shadow:
    0 22px 48px -16px rgba(100,90,160,0.22),
    0 0 0 1px rgba(139,127,212,0.08);
}

/* Linija strelica koja pokazuje na dot */
.timeline-card::after{
  content:'';position:absolute;top:50%;
  width:24px;height:2px;
  background:linear-gradient(90deg, var(--lavender), transparent);
  transform:translateY(-50%);
}
.ti-left .timeline-card::after{right:-24px;background:linear-gradient(90deg, transparent, var(--lavender))}
.ti-right .timeline-card::after{left:-24px}

.tc-time{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.1em;
  color:var(--lavender-deep);
  background:var(--lavender-soft);
  padding:6px 12px;border-radius:999px;
  margin-bottom:16px;
}
.tc-time .tc-dur{
  color:var(--muted);font-weight:600;letter-spacing:0.06em;
}
.tc-head{
  display:flex;align-items:flex-start;gap:16px;
  margin-bottom:10px;
}
.tc-icon{
  width:56px;height:56px;
  border-radius:16px;
  padding:7px;
  flex-shrink:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 4px 10px rgba(100,90,160,0.08);
}
.tc-icon img{width:100%;height:100%;object-fit:contain;display:block}
.tc-title{
  font-family:var(--display);
  font-size:22px;
  font-weight:600;
  line-height:1.2;
  color:var(--ink);
  margin:8px 0 0;
  letter-spacing:-0.01em;
}
.tc-desc{
  color:var(--ink-soft);
  font-size:14.5px;
  line-height:1.65;
  margin:12px 0 0;
}
.tc-desc strong{color:var(--ink);font-weight:600}

/* Raznobojne pozadine ikonica - vizuelni ritam */
.timeline-item:nth-child(2) .tc-icon{background:linear-gradient(135deg, var(--peach) 0%, var(--rose-soft) 100%)}
.timeline-item:nth-child(3) .tc-icon{background:linear-gradient(135deg, var(--blue-soft) 0%, var(--lavender-soft) 100%)}
.timeline-item:nth-child(4) .tc-icon{background:linear-gradient(135deg, var(--sage) 0%, var(--blue-soft) 100%)}
.timeline-item:nth-child(5) .tc-icon{background:linear-gradient(135deg, var(--lavender-soft) 0%, var(--rose-soft) 100%)}
.timeline-item:nth-child(6) .tc-icon{background:linear-gradient(135deg, var(--rose-soft) 0%, var(--peach) 100%)}

/* Total pill na kraju */
.timeline-total{
  max-width:560px;
  margin:60px auto 0;
  padding:22px 28px;
  background:linear-gradient(135deg, rgba(255,255,255,0.7), rgba(234,227,247,0.4));
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.8);
  border-radius:var(--r);
  display:flex;align-items:center;gap:18px;
  box-shadow:
    0 12px 30px rgba(100,90,160,0.12),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position:relative;
  z-index:1;
}
.tt-badge{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg, var(--lavender-deep), var(--rose-deep));
  color:white;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
  box-shadow:0 8px 20px rgba(139,127,212,0.3);
}
.tt-text{flex:1}
.tt-main{
  font-family:var(--display);font-size:20px;font-weight:600;
  color:var(--ink);line-height:1.2;
}
.tt-main em{color:var(--lavender-deep)}
.tt-sub{color:var(--muted);font-size:13.5px;margin-top:2px;font-style:italic}

/* Mobile - sve na desnoj strani sa linijom levo */
@media (max-width:820px){
  .timeline{padding:0}
  .timeline-line{left:24px}
  .timeline-item{
    grid-template-columns:48px 1fr;
    margin-bottom:36px;
  }
  .timeline-dot{grid-column:1;justify-self:start;margin-left:15px}
  .ti-left .timeline-card,
  .ti-right .timeline-card{
    grid-column:2;
    justify-self:start;
    margin:0 0 0 12px;
    max-width:100%;
    transform:translateX(20px);
  }
  .ti-left .timeline-card::after{left:-12px;right:auto;background:linear-gradient(90deg, transparent, var(--lavender))}
  .ti-right .timeline-card::after{left:-12px}
  .timeline-total{margin-top:48px;padding:18px 20px;gap:14px}
  .tt-badge{width:42px;height:42px;font-size:18px}
  .tt-main{font-size:17px}
}

/* ═══════════════════════════════════════════════
   5. NIJE DIJETA
   ═══════════════════════════════════════════════ */
.nd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.nd-cta{
  text-align:center;
  margin-top:56px;
}
.nd-cta-line{
  font-family:var(--font);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.22em;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:18px;
}
@media (max-width:900px){.nd-cards{grid-template-columns:1fr}}
.nd-card{
  background:var(--white);padding:32px;border-radius:var(--r-lg);
  border:1px solid var(--border);position:relative;
  transition:all .3s;
}
.nd-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.nd-num{
  font-family:var(--display);font-size:64px;font-weight:600;
  color:var(--lavender);line-height:1;margin-bottom:12px;font-style:italic;
}
.nd-card h3{margin-bottom:10px;font-size:20px}
.nd-card p{color:var(--ink-soft);font-size:14.5px;line-height:1.65}

/* ═══════════════════════════════════════════════
   6. MILA + ZAJEDNICA
   ═══════════════════════════════════════════════ */
.mila-zajednica{background:rgba(234,227,247,0.5)}
.mz-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:60px;align-items:center}
@media (max-width:900px){.mz-grid{grid-template-columns:1fr;gap:40px}}

/* ─── Levo: Mila intro ─── */
.mila-intro-row{
  display:flex;align-items:center;gap:14px;margin-bottom:24px;
}
.mila-photo{
  width:60px;height:60px;border-radius:50%;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(139,127,212,0.25), 0 0 0 3px var(--white);
  flex-shrink:0;
}
.mila-photo img{width:100%;height:100%;object-fit:cover;display:block}
.mila-intro-text .mila-name-big{
  font-family:var(--display);font-size:22px;font-weight:600;line-height:1.2;
}
.mila-intro-text .mila-status-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--muted);margin-top:4px;
}
.mila-intro-text .mila-status-pill .dot{
  width:8px;height:8px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,0.2);
  animation:pulse 2s infinite;
}

.mila-h{font-size:28px;line-height:1.15;margin-bottom:16px}
.mila-desc{color:var(--ink-soft);font-size:16px;line-height:1.7;margin-bottom:22px}
.mila-desc strong{color:var(--ink)}

/* 4 feature bullet-a sa pastelnim ikonama */
.mila-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.mila-features li{
  display:flex;gap:14px;align-items:flex-start;
  font-size:14.5px;line-height:1.55;color:var(--ink-soft);
}
.mila-features .mf-ico{
  flex-shrink:0;
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg, var(--lavender-soft) 0%, rgba(232,236,248,0.9) 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
}
.mila-features strong{color:var(--ink);font-weight:700;display:block;margin-bottom:1px}

/* ─── Desno: chat kartica ─── */
.mz-chat{
  background:var(--white);padding:24px;border-radius:var(--r-lg);
  box-shadow:
    0 30px 80px -20px rgba(100,90,160,0.22),
    0 10px 30px -10px rgba(100,90,160,0.12),
    0 0 0 1px rgba(139,127,212,0.08);
  position:relative;
}
.mz-chat-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:20px}
.mz-chat-head .mila-photo-sm{
  width:44px;height:44px;border-radius:50%;overflow:hidden;
  box-shadow:0 2px 8px rgba(139,127,212,0.2);
  flex-shrink:0;
}
.mz-chat-head .mila-photo-sm img{width:100%;height:100%;object-fit:cover;display:block}
.mz-chat-head h4{font-family:var(--font);font-size:16px;font-weight:700;margin:0 0 2px 0}
.mz-chat-head .mila-status-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--muted);
}
.mz-chat-head .mila-status-pill .dot{
  width:8px;height:8px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,0.2);
}

.mz-msg{
  padding:12px 16px;border-radius:20px;font-size:14.5px;margin-bottom:8px;
  max-width:85%;line-height:1.5;
  animation:msg-in .5s ease backwards;
}
.mz-msg.user{background:var(--lavender-deep);color:white;margin-left:auto;border-bottom-right-radius:6px}
.mz-msg.bot{background:var(--lavender-soft);color:var(--ink);border-bottom-left-radius:6px}
.mz-msg:nth-child(2){animation-delay:.1s}
.mz-msg:nth-child(3){animation-delay:.6s}
.mz-msg:nth-child(4){animation-delay:1.3s}
@keyframes msg-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Highlight ključnih reči u chat-u */
.mz-highlight{
  background:linear-gradient(transparent 60%, rgba(232,165,189,0.45) 60%);
  font-weight:700;padding:0 2px;
  color:var(--ink);
}

/* "Mila kuca" indikator - prominentan, animiran */
.mz-typing{
  display:inline-flex;align-items:center;gap:6px;
  padding:14px 18px;background:var(--lavender-soft);
  border-radius:20px;border-bottom-left-radius:6px;
  margin-top:8px;
  box-shadow:0 2px 8px rgba(139,127,212,0.08);
  animation:msg-in .5s ease 2.2s backwards;
}
.mz-typing span{
  width:9px;height:9px;border-radius:50%;background:var(--lavender-deep);
  animation:typing 1.3s infinite ease-in-out;opacity:0.4;
}
.mz-typing span:nth-child(2){animation-delay:0.2s}
.mz-typing span:nth-child(3){animation-delay:0.4s}
@keyframes typing{
  0%,60%,100%{transform:translateY(0) scale(0.9);opacity:0.35}
  30%{transform:translateY(-4px) scale(1.15);opacity:1}
}
.mz-typing-label{
  display:block;font-size:11px;color:var(--muted);
  margin-top:6px;margin-left:18px;font-style:italic;
  animation:msg-in .5s ease 2.2s backwards;
}

/* Zajednica feed grid */
.zajednica-section{margin-top:80px;padding-top:60px;border-top:1px solid var(--border)}
.zajednica-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:40px}
@media (max-width:900px){.zajednica-grid{grid-template-columns:1fr}}

/* Suptilna napomena "pravi postovi iz zajednice" */
.z-real-note{
  display:inline-flex;align-items:center;gap:8px;
  margin:22px auto 0;
  padding:2px 4px;
  font-family:var(--display);font-style:italic;
  font-size:14.5px;
  color:var(--ink-soft);
}
.z-real-note-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg, var(--lavender-soft), var(--rose-soft));
  color:var(--lavender-deep);
  font-style:normal;font-size:13px;
  transform:rotate(-12deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
}
.z-real-note-text{
  background:linear-gradient(transparent 62%, rgba(201,190,238,0.45) 62%);
  padding:2px 4px;
}

/* Zajednica - autentični post kao u pravoj app-i */
.z-post{
  background:var(--white);
  border-radius:var(--r);
  border:1px solid var(--border);
  box-shadow:0 4px 16px rgba(100,90,160,0.06);
  transition:transform .3s ease, box-shadow .3s ease;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.z-post:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(100,90,160,0.14);
}
.z-post-header{
  display:flex;align-items:center;gap:12px;
  padding:18px 20px 14px;
  border-bottom:1px solid var(--border);
}
.z-avatar{
  width:46px;height:46px;border-radius:50%;
  color:white;font-weight:800;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  overflow:hidden;
  background:linear-gradient(135deg, var(--lavender-soft), var(--rose-soft));
  box-shadow:0 4px 10px rgba(100,90,160,0.18), inset 0 1px 0 rgba(255,255,255,0.2);
}
.z-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.z-user{flex:1;min-width:0}
.z-name-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.z-name{font-size:14.5px;font-weight:700;color:var(--ink)}
.z-streak{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:700;
  color:#d97706;
  background:rgba(245,158,11,0.1);
  padding:2px 7px;border-radius:999px;
}
.z-goal{font-size:12px;color:var(--muted);margin-top:3px}
.z-badge{
  font-size:9.5px;font-weight:700;
  background:var(--lavender-soft);color:var(--lavender-deep);
  padding:5px 10px;border-radius:999px;
  text-transform:uppercase;letter-spacing:0.06em;
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:4px;
}
.z-badge::before{
  content:'★';font-size:10px;
}

.z-mood{
  padding:12px 20px 8px;
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--muted);
  flex-wrap:wrap;
}
.z-mood-value{
  color:var(--ink);font-weight:600;
  display:inline-flex;align-items:center;gap:4px;
}
.z-mood-emoji{font-size:15px;line-height:1}

.z-pills{
  display:flex;gap:5px;
  padding:0 20px 14px;
  flex-wrap:wrap;
}
.z-pill{
  width:26px;height:26px;border-radius:50%;
  background:var(--bg-soft);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;
  border:1px solid var(--border);
}
.z-pill.ok{
  background:rgba(34,197,94,0.12);
  border-color:rgba(34,197,94,0.3);
}
.z-pill.miss{
  background:rgba(239,68,68,0.08);
  border-color:rgba(239,68,68,0.25);
  opacity:0.55;
}
.z-pill.soft{
  background:var(--rose-soft);
  border-color:var(--rose);
}

.z-detalji{
  padding:8px 20px 4px;
  font-size:11.5px;color:var(--lavender-deep);
  font-weight:600;
  display:inline-flex;align-items:center;gap:4px;
}
.z-detalji::before{content:'›';font-size:14px}

.z-text{
  padding:10px 20px 16px;
  font-size:13.5px;line-height:1.6;
  color:var(--ink-soft);
  flex:1;
}
.z-text strong{color:var(--ink)}

.z-reactions{
  display:flex;gap:5px;
  padding:12px 20px;
  border-top:1px solid var(--border);
  background:var(--bg-soft);
}
.z-reaction{
  width:32px;height:32px;border-radius:50%;
  background:var(--white);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;
  border:1px solid var(--border);
  transition:transform .2s ease, background .2s ease;
  position:relative;
  cursor:pointer;
}
.z-reaction:hover{
  transform:scale(1.15);
  background:var(--lavender-soft);
}
.z-reaction .rc-num{
  position:absolute;bottom:-6px;right:-6px;
  background:var(--white);
  font-size:9px;font-weight:700;
  padding:1px 5px;border-radius:999px;
  border:1px solid var(--border);
  color:var(--ink);
  min-width:16px;text-align:center;
}

/* ═══════════════════════════════════════════════
   7. MOJA PRIČA
   ═══════════════════════════════════════════════ */
/* ─── Story section - foto kao pozadina + kartica sa pričom ─── */
.story-section{position:relative;overflow:hidden;padding-top:90px;padding-bottom:90px}
.story-bg{
  position:absolute;
  top:0;right:0;bottom:0;
  width:42%;
  max-width:640px;
  pointer-events:none;
  z-index:0;
}
.story-bg img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 18%;
  opacity:0.42;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 30%, black 70%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 10%, black 30%, black 75%, transparent 100%);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 30%, black 70%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 10%, black 30%, black 75%, transparent 100%);
  mask-composite:intersect;
  -webkit-mask-composite:source-in;
}
.story-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,
    rgba(234,227,247,0.35) 0%,
    transparent 50%,
    rgba(232,236,248,0.25) 100%);
  pointer-events:none;
}
.story-inner{position:relative;z-index:1}
.story-intro{
  text-align:center;
  max-width:720px;
  margin:0 auto 48px;
}
.story-card{
  max-width:680px;
  background:var(--white);
  padding:48px 52px;
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  box-shadow:
    0 30px 80px -20px rgba(100,90,160,0.22),
    0 10px 30px -10px rgba(100,90,160,0.12),
    0 0 0 1px rgba(139,127,212,0.06);
  position:relative;
}
.story-big{
  font-family:var(--display);font-size:84px;font-weight:600;
  color:var(--lavender-deep);line-height:1;margin-bottom:10px;
  letter-spacing:-0.02em;
}
.story-big-sub{
  color:var(--ink-soft);font-size:15px;margin-bottom:28px;
  font-style:italic;font-family:var(--display);
}
.story-text p{margin:0 0 16px;font-size:15.5px;line-height:1.8;color:var(--ink-soft)}
.story-text strong{color:var(--ink);font-weight:700}
.story-sig{
  margin-top:28px;padding-top:24px;
  border-top:1px solid var(--border);
  font-family:var(--display);font-style:italic;font-size:20px;
  color:var(--lavender-deep);
  display:flex;align-items:center;gap:10px;
}
.story-sig .heart{color:var(--rose-deep)}
.story-badge-float{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--white);
  padding:10px 18px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--ink);
  box-shadow:0 10px 28px rgba(100,90,160,0.18);
  border:1px solid var(--border);
  margin-bottom:24px;
}
.story-badge-float em{color:var(--rose-deep);font-weight:800;font-style:normal;font-size:15px}
.story-badge-float .dot{width:6px;height:6px;border-radius:50%;background:var(--rose-deep)}

@media (max-width:900px){
  .story-bg{width:100%;opacity:0.35}
  .story-bg img{opacity:0.3;mask-image:none;-webkit-mask-image:none}
  .story-card{max-width:100%;padding:36px 28px}
  .story-big{font-size:64px}
}

/* ═══════════════════════════════════════════════
   7. REZULTATI U BROJKAMA
   ═══════════════════════════════════════════════ */
.outcomes-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:56px;
}
.outcome-col{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:28px 24px 26px;
  position:relative;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.outcome-col:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px -12px rgba(139, 127, 212, 0.22);
  border-color:rgba(139, 127, 212, 0.28);
}
.outcome-num{
  font-family:var(--font);
  font-size:clamp(30px, 3.2vw, 38px);
  font-weight:700;
  line-height:1.1;
  color:var(--ink);
  letter-spacing:-0.018em;
  font-variant-numeric:tabular-nums;
  margin:0 0 22px;
  position:relative;
}
.outcome-num::after{
  /* Suptilni gradient divajder između broja i opisa */
  content:'';
  position:absolute;
  left:0;
  bottom:-12px;
  width:32px;height:2px;
  background:linear-gradient(90deg, var(--rose-deep), var(--lavender-deep));
  border-radius:2px;
  opacity:0.7;
  transition:width .35s ease, opacity .35s ease;
}
.outcome-col:hover .outcome-num::after{
  width:56px;
  opacity:1;
}
.oc-unit{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:0.6em;
  color:var(--lavender-deep);
  margin-left:4px;
  letter-spacing:0;
}
.outcome-label{
  font-family:var(--font);
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-soft);
  font-weight:500;
}
.outcomes-footnote{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  margin:28px auto 0;
  font-style:italic;
  max-width:520px;
  padding:0 16px;
  font-family:var(--display);
}

@media (max-width:900px){
  .outcomes-grid{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:44px}
}
@media (max-width:560px){
  .outcomes-grid{grid-template-columns:1fr;gap:12px}
  .outcome-col{padding:22px 22px 22px}
}

/* ─── Rezultati / Transformacije mosaic ─── */
.proof-section{
  position:relative;overflow:hidden;
  padding-top:100px;padding-bottom:100px;
}
.proof-section::before{
  content:'';position:absolute;top:-80px;left:-120px;width:420px;height:420px;
  background:radial-gradient(circle, rgba(232,236,248,0.3) 0%, transparent 60%);
  pointer-events:none;z-index:0;
}
.proof-section::after{
  content:'';position:absolute;bottom:-80px;right:-120px;width:380px;height:380px;
  background:radial-gradient(circle, rgba(249,229,236,0.25) 0%, transparent 60%);
  pointer-events:none;z-index:0;
}
.proof-section > .container{position:relative;z-index:1}

.proof-intro{
  text-align:center;
  max-width:680px;
  margin:0 auto 56px;
}
.proof-intro h2{margin-bottom:14px}

.proof-mosaic{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  max-width:1100px;
  margin:0 auto;
}
@media (max-width:900px){
  .proof-mosaic{grid-template-columns:repeat(2, 1fr);gap:14px}
}
@media (max-width:520px){
  .proof-mosaic{grid-template-columns:1fr;gap:16px}
}

.pm-photo{
  aspect-ratio:1;
  border-radius:16px;
  overflow:hidden;
  position:relative;
  background:var(--lavender-soft);
  transition:transform .4s ease, box-shadow .4s ease;
  box-shadow:0 6px 20px -8px rgba(100,90,160,0.15);
}
.pm-photo img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}
.pm-photo:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 38px -10px rgba(100,90,160,0.25);
}
.pm-photo:hover img{transform:scale(1.04)}

/* Quote kartica - span 2 kolone */
.pm-quote{
  grid-column:span 2;
  background:var(--white);
  border-radius:18px;
  padding:32px 30px;
  border:1px solid var(--border);
  box-shadow:0 6px 20px -8px rgba(100,90,160,0.12);
  display:flex;flex-direction:column;
  justify-content:space-between;
  position:relative;
}
.pm-quote::before{
  content:'"';
  position:absolute;
  top:14px;left:22px;
  font-family:var(--display);
  font-size:70px;
  font-weight:600;
  color:var(--lavender-soft);
  line-height:1;
  pointer-events:none;
}
@media (max-width:520px){
  .pm-quote{grid-column:span 1}
}

.pm-stars{
  display:flex;gap:2px;
  color:var(--lavender-deep);
  font-size:14px;
  margin-bottom:12px;
  position:relative;z-index:1;
}
.pm-text{
  font-family:var(--display);
  font-style:italic;
  font-size:16.5px;
  line-height:1.55;
  color:var(--ink);
  margin-bottom:20px;
  position:relative;z-index:1;
  letter-spacing:-0.005em;
}
.pm-text strong{font-style:normal;font-weight:700;color:var(--ink)}
.pm-footer{
  display:flex;align-items:center;gap:12px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.pm-avatar{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:white;font-weight:800;font-size:15px;
  flex-shrink:0;
  box-shadow:0 3px 10px rgba(100,90,160,0.18);
}
.pm-author{flex:1;min-width:0}
.pm-name{
  font-size:14px;font-weight:700;color:var(--ink);
  line-height:1.2;
}
.pm-context{
  font-size:12px;color:var(--muted);
  margin-top:2px;
}
.pm-result{
  font-size:11px;font-weight:700;
  color:var(--lavender-deep);
  background:var(--lavender-soft);
  padding:5px 10px;border-radius:999px;
  white-space:nowrap;
}

/* ─── Viber grupa - autentične poruke u chat stilu ─── */
.viber-section{
  position:relative;
  padding-top:80px;padding-bottom:80px;
  background:rgba(234,227,247,0.25);
}
.viber-intro{text-align:center;max-width:640px;margin:0 auto 48px;position:relative;z-index:1}

.viber-chat{
  max-width:680px;
  margin:0 auto;
  display:flex;flex-direction:column;
  gap:18px;
  position:relative;z-index:1;
}
.viber-msg{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.vm-avatar{
  width:42px;height:42px;
  border-radius:50%;
  color:var(--white);font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 10px rgba(100,90,160,0.2);
}
.vm-bubble{
  background:var(--white);
  border-radius:18px;
  border-top-left-radius:4px;
  padding:14px 18px;
  flex:1;
  box-shadow:0 4px 14px rgba(100,90,160,0.08);
  border:1px solid rgba(139,127,212,0.06);
}
.vm-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;margin-bottom:4px;
}
.vm-name{font-size:14px;font-weight:700;color:var(--ink)}
.vm-time{font-size:11px;color:var(--muted)}
.vm-text{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}
.vm-text strong{color:var(--ink);font-weight:600}

.viber-footer{
  text-align:center;
  margin-top:32px;
  font-family:var(--display);font-style:italic;
  font-size:15px;
  color:var(--muted);
  position:relative;z-index:1;
}

/* ─── Mid-page CTA (strategijski pozicioniran) ─── */
.mid-cta{
  padding:68px 24px;
  text-align:center;
  background:linear-gradient(180deg, transparent 0%, rgba(234,227,247,0.4) 50%, transparent 100%);
  position:relative;
}
.mid-cta-title{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(22px, 3.4vw, 32px);
  color:var(--ink);
  line-height:1.3;
  max-width:700px;
  margin:0 auto 26px;
  letter-spacing:-0.005em;
}
.mid-cta-title em{color:var(--lavender-deep);font-style:italic}
.mid-cta-sub{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;
  color:var(--muted);
  margin-top:18px;
}
.mid-cta-sub .dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--rose-deep);
  animation:pulse 2s infinite;
}

/* ─── Tim sekcija - premium widespread ─── */
.team-section{
  position:relative;
  padding-top:72px;padding-bottom:88px;
}
.team-section::before{
  content:'';position:absolute;top:40px;left:50%;transform:translateX(-50%);
  width:80%;max-width:900px;height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--border) 30%, var(--border) 70%, transparent 100%);
  pointer-events:none;
}
.team-intro{text-align:center;max-width:640px;margin:0 auto 56px;position:relative;z-index:1}
.team-intro h3{
  font-family:var(--display);font-size:34px;font-weight:600;
  line-height:1.15;margin:0 0 12px;
  letter-spacing:-0.01em;
}
.team-intro h3 em{color:var(--lavender-deep)}
.team-intro p{color:var(--ink-soft);font-size:16px;line-height:1.65;margin:0}

.team-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:32px 22px;
  max-width:1120px;
  margin:0 auto;
}
@media (max-width:1000px){.team-grid{grid-template-columns:repeat(3, 1fr);gap:36px 24px;max-width:720px}}
@media (max-width:620px){.team-grid{grid-template-columns:repeat(2, 1fr);gap:32px 20px;max-width:440px}}
@media (max-width:360px){.team-grid{grid-template-columns:1fr;gap:28px}}

.team-card{
  text-align:center;
  background:transparent;
  border:none;
  padding:0;
  box-shadow:none;
  transition:transform .4s ease;
  display:block;
}
.team-card:hover{
  transform:translateY(-4px);
}

.team-photo{
  width:150px;
  height:150px;
  aspect-ratio:unset;
  margin:0 auto 18px;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(135deg, var(--lavender-soft), var(--rose-soft));
  position:relative;
  box-shadow:
    0 0 0 4px var(--white),
    0 0 0 5px rgba(201,190,238,0.45),
    0 20px 40px -14px rgba(100,90,160,0.3);
  transition:box-shadow .4s ease;
}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block}
.team-photo-placeholder{
  font-family:var(--display);font-weight:600;font-size:64px;
  color:rgba(139,127,212,0.4);line-height:1;
  display:flex;align-items:center;justify-content:center;height:100%;
}
.team-card:hover .team-photo{
  box-shadow:
    0 0 0 4px var(--white),
    0 0 0 6px var(--lavender-deep),
    0 28px 54px -14px rgba(139,127,212,0.4);
}
/* Raznobojni halo prstenovi za ritam */
.team-card:nth-child(1) .team-photo{background:linear-gradient(135deg, var(--lavender-soft), var(--rose-soft))}
.team-card:nth-child(2) .team-photo{background:linear-gradient(135deg, var(--peach), var(--rose-soft))}
.team-card:nth-child(3) .team-photo{background:linear-gradient(135deg, var(--blue-soft), var(--lavender-soft))}
.team-card:nth-child(4) .team-photo{background:linear-gradient(135deg, var(--sage), var(--lavender-soft))}
.team-card:nth-child(5) .team-photo{background:linear-gradient(135deg, var(--rose-soft), var(--lavender-soft))}

.team-name{
  font-family:var(--font);font-size:16px;font-weight:700;
  color:var(--ink);line-height:1.25;margin:0 0 4px;
  letter-spacing:-0.01em;
}
.team-role{
  font-size:12.5px;color:var(--lavender-deep);font-weight:600;
  margin:0;
  letter-spacing:0.005em;
}
.team-desc{display:none}

/* ═══════════════════════════════════════════════
   8. PRICING - premium + countdown
   ═══════════════════════════════════════════════ */
.pricing{
  background:linear-gradient(180deg, transparent 0%, rgba(234,227,247,0.5) 100%);
  position:relative;overflow:hidden;
}
.pricing::before{
  content:'';position:absolute;top:-100px;right:-150px;width:500px;height:500px;
  background:radial-gradient(circle, rgba(201,190,238,0.2) 0%, transparent 60%);
  pointer-events:none;
}
.pricing::after{
  content:'';position:absolute;bottom:-100px;left:-150px;width:450px;height:450px;
  background:radial-gradient(circle, rgba(232,165,189,0.12) 0%, transparent 60%);
  pointer-events:none;
}

/* Countdown - dva pill-a, klasičan broj + urgency */
.countdown-wrap{
  display:flex;justify-content:center;align-items:center;gap:10px;
  margin-top:24px;flex-wrap:wrap;
  position:relative;z-index:1;
}
.cd-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 20px;
  border-radius:999px;
  font-size:14px;
  box-shadow:0 4px 14px rgba(100,90,160,0.08);
}
.cd-pill-main{
  background:var(--white);
  border:1px solid var(--border);
  color:var(--ink-soft);
}
.cd-pill-urgent{
  background:var(--rose-soft);
  color:var(--rose-deep);
  border:1px solid rgba(216,143,174,0.3);
  font-weight:600;
  font-size:13px;
}
.cd-pulse{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:var(--lavender-deep);
  animation:pulse 2s infinite;
  position:relative;
}
.cd-pulse::after{
  content:'';position:absolute;inset:-3px;
  border-radius:50%;
  border:2px solid var(--lavender);
  animation:dot-ripple 2s ease-out infinite;
  opacity:0;
}
.cd-urgent-dot{
  display:inline-block;
  width:7px;height:7px;border-radius:50%;
  background:var(--rose-deep);
  animation:pulse 1.5s infinite;
}
.cd-prefix{
  font-family:var(--font);
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0.005em;
}
.cd-units{
  display:inline-flex;align-items:baseline;gap:7px;
  font-variant-numeric:tabular-nums;
}
.cd-unit-pair{
  display:inline-flex;align-items:baseline;gap:3px;
}
.cd-unit-pair strong{
  font-family:var(--font);
  color:var(--lavender-deep);
  font-weight:700;
  font-size:20px;
  letter-spacing:-0.02em;
  line-height:1;
  min-width:24px;
  display:inline-block;
  text-align:center;
}
.cd-unit-pair .cd-u-label{
  font-family:var(--font);
  color:var(--muted);
  font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.1em;
  line-height:1;
}
.cd-sep{
  color:var(--lavender);
  font-size:12px;
  font-weight:400;
  line-height:1;
  align-self:center;
}

/* Editorial countdown — "Izazov kreće za X dana" */
.pricing-countdown-wrap{
  text-align:center;
  margin:44px auto 20px;
  position:relative;z-index:1;
}
.pricing-countdown-eyebrow{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.pricing-countdown-num{
  font-family:var(--font);
  font-size:clamp(64px, 9vw, 96px);
  font-weight:700;
  line-height:1;
  letter-spacing:-0.1em;
  font-variant-numeric:tabular-nums;
  margin:0;
  padding:0 15px;
  background:linear-gradient(135deg, #8B7FD4 0%, #7e86aa 55%, #bed0f8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  display:inline-block;
}
.pricing-countdown-label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.2em;
  color:var(--muted);
  margin-top:8px;
}
.pricing-countdown-footer{
  display:block;
  text-align:center;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  max-width:560px;
  margin:18px auto 0;
  padding:0 16px;
}
.pricing-countdown-footer strong{color:var(--ink);font-weight:600}
.pricing-countdown-footer::before{
  content:'';
  display:inline-block;
  width:7px;height:7px;border-radius:50%;
  background:var(--rose-deep);
  animation:pulse 1.8s infinite;
  margin-right:8px;
  vertical-align:middle;
  transform:translateY(-1px);
}
.pricing-countdown-footer-sep{
  display:block;
  font-size:0;
  line-height:0;
  margin:6px 0;
}

/* Pricing grid - čist, prostran, Calmmia style */
.price-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:56px;
  position:relative;z-index:1;
  align-items:stretch;
}
@media (max-width:900px){.price-grid{grid-template-columns:1fr;gap:16px}}

.price-card{
  background:var(--white);
  padding:32px 28px 28px;
  border-radius:20px;
  border:1px solid var(--border);
  display:flex;flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease;
  position:relative;
}
.price-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 48px -18px rgba(100,90,160,0.18);
}

/* Featured - originalna lepa verzija, samo 2px border (bg netaknuto) */
.price-card.featured{
  background:linear-gradient(180deg, rgba(234,227,247,0.5) 0%, rgba(250,247,254,0.3) 30%, var(--white) 100%);
  border:2px solid #cdc9e7;
  box-shadow:
    0 20px 50px -18px rgba(139,127,212,0.25),
    0 1px 0 rgba(255,255,255,0.8) inset;
  padding:40px 28px 28px;
  z-index:1;
}
.price-card.featured:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 64px -18px rgba(139,127,212,0.32);
}

/* Savings hint u gornjem desnom uglu - subtilno, ne ribbon */
.price-save-hint{
  position:absolute;top:20px;right:22px;
  font-size:11px;font-weight:600;
  color:var(--muted);
  letter-spacing:0.04em;
}
.price-card.featured .price-save-hint{
  color:var(--lavender-deep);
}

/* Mali badge u gornjem levom uglu - ime kategorije */
.price-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;
  letter-spacing:0.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
  margin-bottom:14px;
  background:var(--bg-soft);
  color:var(--ink-soft);
  border:1px solid var(--border);
  align-self:flex-start;
}
.price-card.featured .price-badge{
  background:var(--lavender-deep);color:var(--white);
  border-color:var(--lavender-deep);
}
.price-card:nth-child(3) .price-badge{
  background:var(--rose-soft);color:var(--rose-deep);
  border-color:rgba(216,143,174,0.3);
}

/* "Šta uključuje" divider - ala Taskk */
.price-divider{
  display:flex;align-items:center;
  font-size:10.5px;font-weight:700;
  color:var(--muted);
  letter-spacing:0.14em;text-transform:uppercase;
  margin:24px 0 18px;
  gap:12px;
}
.price-divider::before,
.price-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}

/* Naziv + opis - Manrope, kompaktno */
.price-name{
  font-family:var(--font);
  font-size:26px;font-weight:700;
  line-height:1.15;
  margin:0 0 3px;
  letter-spacing:-0.022em;
}
.price-desc{
  color:var(--muted);
  font-size:13.5px;
  margin:0 0 16px;
  line-height:1.45;
}
.price-card.featured .price-desc{color:var(--muted)}

/* Cena - Taskk-stil: €48 sa istom veličinom € i broja */
.price-amount{
  display:flex;align-items:baseline;
  margin-bottom:2px;
}
.price-amount .cur{
  font-family:var(--font);
  font-size:50px;font-weight:700;
  color:var(--ink);line-height:1;
  letter-spacing:-0.035em;
  margin-right:2px;
}
.price-amount .num{
  font-family:var(--font);
  font-size:50px;font-weight:700;
  line-height:1;letter-spacing:-0.035em;
}
.price-per{
  font-family:var(--font);
  font-size:14px;font-weight:500;
  color:var(--muted);
  margin-left:10px;
  line-height:1;
}
.price-meta{
  font-size:12.5px;color:var(--muted);
  margin:0 0 22px;
}
.price-anchor{
  text-decoration:line-through;
  text-decoration-color:rgba(155,140,232,0.5);
  text-decoration-thickness:1.5px;
  margin-right:2px;
}

/* Feature lista sa malim lavender check ikonama - Taskk style */
.price-list{
  list-style:none;padding:0;margin:0 0 28px;
  font-size:14px;
  flex:1;
}
.price-list li{
  padding:9px 0;
  display:flex;gap:12px;align-items:flex-start;
  line-height:1.5;
  color:var(--ink-soft);
}
.price-list li::before{
  content:'';flex-shrink:0;
  width:18px;height:18px;border-radius:50%;
  margin-top:2px;
  background-color:var(--lavender-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B7FD4' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:11px;background-position:center;background-repeat:no-repeat;
}
.price-card.featured .price-list li::before{
  background-color:var(--lavender-deep);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.price-list li strong{color:var(--ink);font-weight:700}

/* CTA - jednostavan, full-width */
.price-cta{
  width:100%;
  padding:14px 20px;
  font-size:14px;
  font-weight:600;
}
.price-note{
  font-size:12px;color:var(--muted);
  text-align:center;
  margin:12px 0 0;line-height:1.5;
}

/* Garantija + trust row */
.guarantee{
  margin-top:56px;padding:26px 32px;border-radius:20px;
  background:var(--white);display:flex;gap:18px;align-items:center;
  max-width:720px;margin-left:auto;margin-right:auto;
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(100,90,160,0.1);
  position:relative;z-index:1;
}
.guarantee .g-ico{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg, var(--sage), var(--blue-soft));
  display:flex;align-items:center;justify-content:center;
  font-size:24px;flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}
.guarantee h4{font-family:var(--font);font-size:16px;font-weight:700;margin:0 0 4px}
.guarantee p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.5}

.price-trust{
  margin-top:28px;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px 28px;
  font-size:12.5px;color:var(--muted);
  position:relative;z-index:1;
  text-align:center;
}
.price-trust span{display:inline-flex;align-items:center;gap:6px}
.price-trust svg{width:14px;height:14px;color:var(--lavender-deep)}

/* ═══════════════════════════════════════════════
   9. FAQ + FINAL CTA
   ═══════════════════════════════════════════════ */
.faq-list{margin-top:40px;max-width:780px;margin-left:auto;margin-right:auto}
.faq-item{
  background:var(--white) !important;
  border-radius:16px !important;
  border:1px solid var(--border) !important;
  margin-bottom:12px;
  overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.faq-item:hover{
  border-color:rgba(139,127,212,0.3) !important;
  box-shadow:0 6px 18px -8px rgba(100,90,160,0.12) !important;
}
.faq-item.open{
  border-color:#cdc9e7 !important;
  box-shadow:0 10px 26px -10px rgba(139,127,212,0.18) !important;
}

.faq-q{
  width:100% !important;
  text-align:left !important;
  padding:20px 24px !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:18px !important;
  background:transparent !important;
  border:none !important;
  cursor:pointer !important;
  color:var(--ink) !important;
  text-decoration:none !important;
  font-family:var(--font) !important;
  line-height:1.4 !important;
}
.byf-landing-v2-active .faq-q:hover,
.byf-landing-v2-active .faq-q:focus,
.byf-landing-v2-active .faq-q:active,
.byf-landing-v2-active .faq-q:focus-visible{
  background:transparent !important;
  color:var(--ink) !important;
  text-decoration:none !important;
  outline:none !important;
  box-shadow:none !important;
}

.faq-q-content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:0;
}
.faq-badge{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px;
  background:var(--lavender-soft);
  color:var(--lavender-deep);
  align-self:flex-start;
  line-height:1;
}
.faq-badge.za-koga{background:#FCE7D9;color:#A04B00}
.faq-badge.kako-radi{background:#E1EBF9;color:#2C5AA0}
.faq-badge.podrska{background:#E4EDE4;color:#2A5A2A}
.faq-badge.clanarina{background:var(--lavender-soft);color:var(--lavender-deep)}
.faq-badge.ishrana{background:var(--rose-soft);color:var(--rose-deep)}
.faq-badge.privatnost{background:#EFEAF6;color:#6E5B9E}

.faq-q-text{
  font-size:15.5px;
  font-weight:600;
  line-height:1.45;
  color:var(--ink);
  letter-spacing:-0.005em;
  margin:0;
  white-space:normal;
  overflow-wrap:break-word;
  word-wrap:break-word;
  max-width:100%;
}
.faq-q-icon{
  flex-shrink:0;
  width:26px;height:26px;
  margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  color:var(--lavender-deep);
  font-weight:300;
  transition:transform .3s ease;
  line-height:1;
}
.faq-item.open .faq-q-icon{transform:rotate(45deg)}

.faq-a{
  display:none;
  padding:18px 24px 22px;
  margin:0 24px;
  color:var(--ink-soft);
  font-size:14.5px;
  line-height:1.75;
  border-top:1px solid var(--border);
}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-a{padding-left:0;padding-right:0}
.faq-a p{margin:0 0 10px}
.faq-a p:last-child{margin-bottom:0}
.faq-a strong{color:var(--ink);font-weight:700}
.faq-a ul{margin:10px 0;padding-left:20px}
.faq-a li{margin-bottom:6px}
.faq-a li:last-child{margin-bottom:0}

.faq-item.faq-hidden{display:none}
.faq-item.faq-hidden.faq-revealed{display:block}

.faq-load-more{
  text-align:center;
  margin-top:28px;
}
.faq-load-more .btn{
  font-size:13.5px;
  padding:12px 24px;
}

.final-cta{
  background:var(--bg-soft);
  text-align:center;
  border-top:1px solid var(--border);
}
.final-cta-inner{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:70px 40px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.final-cta-inner::before{
  content:'';position:absolute;top:-120px;right:-120px;width:400px;height:400px;
  background:radial-gradient(circle,rgba(201,190,238,0.4) 0%, transparent 65%);
  z-index:0;
}
.final-cta-inner > *{position:relative;z-index:1}
.final-cta h2{color:var(--ink);margin-bottom:20px}
.final-cta p{font-size:17px;line-height:1.7;max-width:640px;margin:0 auto 28px;color:var(--ink-soft)}
.final-cta-trust{margin-top:24px;font-size:13px;color:var(--muted)}
.final-cta-urgency{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--lavender-soft);padding:8px 16px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--lavender-deep);
  margin-bottom:24px;
}
.final-cta-urgency .dot{width:8px;height:8px;border-radius:50%;background:var(--lavender-deep);animation:pulse 2s infinite}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.byf-footer{
  background:var(--ink);
  color:rgba(255,255,255,0.65);
  padding:56px 0 40px;
  font-size:13px;
  text-align:center;
}
.footer-socials{
  display:inline-flex;
  gap:12px;
  justify-content:center;
  margin-bottom:28px;
}
.footer-socials a{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:42px;height:42px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.8) !important;
  text-decoration:none !important;
  margin:0 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  transition:background .25s ease, transform .25s ease, color .25s ease, border-color .25s ease;
}
.footer-socials a svg{
  pointer-events:none;
}
.footer-socials a:hover{
  background:var(--lavender-deep);
  color:var(--white) !important;
  border-color:var(--lavender-deep);
  transform:translateY(-2px);
}
.footer-disclaimer{
  font-size:12.5px;
  color:rgba(255,255,255,0.55);
  max-width:640px;
  margin:0 auto 18px;
  line-height:1.6;
}
.footer-links{margin:0 0 14px}
.footer-links a{
  color:rgba(255,255,255,0.75) !important;
  margin:0 8px !important;
  text-decoration:none !important;
  transition:color .2s ease;
}
.footer-links a:hover{color:var(--lavender) !important}
.footer-copy{
  font-size:12px;
  color:rgba(255,255,255,0.4);
  margin:0;
}