/* ===== eStanar v4 — interaktivne sekcije (v2 osjećaj, v1 izgled) ===== */

/* --- Funkcije: popis → preview --- */
.fx{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(24px,4vw,56px); align-items:center; }
.fx__menu{ list-style:none; display:flex; flex-direction:column; gap:8px; margin:0; padding:0; }
.fx__btn{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  font-family:inherit; font-size:1.02rem; font-weight:600; color:#475569;
  background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:12px 16px; cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.fx__btn:hover{ border-color:#cbd5e1; background:#f8fafc; color:#1e2a52; }
.fx__btn.is-active{ border-color:#fbe3d3; background:#fdf1e9; color:#171f3d; box-shadow:0 8px 20px -12px rgba(232,117,47,.55); }
.fx__ico{ width:40px; height:40px; border-radius:11px; background:#fff; border:1px solid #e2e8f0; display:grid; place-items:center; flex:0 0 auto; color:#c2571b; }
.fx__btn.is-active .fx__ico{ border-color:#fbe3d3; }
.fx__ico svg{ width:20px; height:20px; }
.fx__detail{ background:#fff; border:1px solid #e2e8f0; border-radius:22px; overflow:hidden; box-shadow:0 24px 55px -28px rgba(23,31,61,.4); }
.fx__shot{ background:#f8fafc; border-bottom:1px solid #f1f5f9; }
.fx__shot img{ width:100%; display:block; transition:opacity .25s ease; }
.fx__body{ padding:22px 26px; }
.fx__body h3{ font-size:1.4rem; font-weight:800; color:#171f3d; letter-spacing:-.01em; margin-bottom:8px; }
.fx__body p{ color:#475569; }

/* --- Za koga: tabovi --- */
.rx__tabs{
  display:flex; justify-content:center; gap:6px; width:max-content; max-width:100%;
  margin:0 auto clamp(22px,3vw,34px); background:#fff; border:1px solid #e2e8f0; border-radius:999px; padding:6px;
  box-shadow:0 1px 3px rgba(16,24,64,.06); flex-wrap:wrap;
}
.rx__tab{ font-family:inherit; font-size:15px; font-weight:600; color:#475569; padding:9px 22px; border-radius:999px; border:0; background:none; cursor:pointer; transition:all .2s ease; }
.rx__tab:hover{ color:#1e2a52; }
.rx__tab.is-active{ background:linear-gradient(135deg,#5b57e6,#1e2a52); color:#fff; box-shadow:0 8px 18px -8px rgba(79,70,229,.6); }
.rx__box{
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px,4vw,56px); align-items:center;
  background:#fff; border:1px solid #e2e8f0; border-radius:24px; padding:clamp(24px,3vw,44px);
  box-shadow:0 24px 55px -28px rgba(23,31,61,.35);
}
.rx__text h3{ font-size:clamp(1.4rem,2.4vw,2rem); font-weight:800; color:#171f3d; letter-spacing:-.02em; margin-bottom:12px; }
.rx__text>p{ color:#475569; font-size:1.05rem; margin-bottom:18px; }
.rx__text ul{ list-style:none; display:grid; gap:10px; margin:0; padding:0; }
.rx__text li{ position:relative; padding-left:28px; font-weight:500; color:#334155; }
.rx__text li::before{ content:'✓'; position:absolute; left:0; top:0; width:19px; height:19px; border-radius:50%; background:#fdf1e9; color:#e8752f; font-size:12px; font-weight:800; display:grid; place-items:center; }
.rx__shot{ border:1px solid #e2e8f0; border-radius:16px; overflow:hidden; box-shadow:0 16px 38px -20px rgba(23,31,61,.35); }
.rx__shot img{ width:100%; display:block; transition:opacity .25s ease; }

/* --- Pregled: dvije nagnute fotke --- */
.pv{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,52px); align-items:center; max-width:1000px; margin:0 auto; }
.pv__card{ background:#fff; border:1px solid #e2e8f0; border-radius:18px; overflow:hidden; box-shadow:0 20px 46px -24px rgba(23,31,61,.4); transition:transform .22s ease, box-shadow .22s ease; }
.pv__card img{ width:100%; display:block; border-bottom:1px solid #f1f5f9; }
.pv__card figcaption{ padding:14px 18px; font-weight:700; color:#1e2a52; }
.pv--a{ transform:rotate(-2deg); }
.pv--b{ transform:rotate(2deg) translateY(16px); }
.pv__card:hover{ transform:rotate(0) translateY(-5px); box-shadow:0 28px 58px -26px rgba(23,31,61,.45); }

/* --- Funkcije: strelica = znak da je stavka klikabilna --- */
.fx__btn::after{ content:'›'; margin-left:auto; font-size:1.35rem; line-height:1; color:#cbd5e1; transition:color .18s ease, transform .18s ease; }
.fx__btn:hover::after{ color:#94a3b8; }
.fx__btn.is-active::after{ color:#e8752f; transform:translateX(2px); }

/* --- Intro: "Prije → Poslije" kontrast (na navy traci) --- */
.intro__head{ text-align:center; max-width:820px; margin:0 auto clamp(28px,4vw,44px); }
.intro__title .intro__brand{ color:#fff; font-weight:800; }
.intro__title .intro__brand .intro__brand-e{ color:#f28b4c; }
.vs{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,2.5vw,28px); align-items:center; max-width:1000px; margin:0 auto; }
.vs__col{ border-radius:20px; padding:26px; border:1px solid rgba(255,255,255,.14); }
.vs__col--before{ background:rgba(255,255,255,.05); }
.vs__col--after{ background:rgba(255,255,255,.10); border-color:rgba(242,139,76,.55); box-shadow:0 24px 55px -28px rgba(0,0,0,.55); }
.vs__tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:999px; margin-bottom:18px; }
.vs__col--before .vs__tag{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.65); }
.vs__col--after .vs__tag{ background:#e8752f; color:#fff; }
.vs__list{ list-style:none; display:grid; gap:12px; margin:0; padding:0; }
.vs__list li{ position:relative; padding-left:30px; line-height:1.4; }
.vs__col--before .vs__list li{ color:rgba(255,255,255,.6); }
.vs__col--before .vs__list li::before{ content:'✕'; position:absolute; left:0; top:0; color:#fb7185; font-weight:800; }
.vs__col--after .vs__list li{ color:#fff; font-weight:500; }
.vs__col--after .vs__list li::before{ content:'✓'; position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%; background:#e8752f; color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; }
.vs__arrow{ font-size:1.8rem; color:rgba(255,255,255,.5); font-weight:700; text-align:center; }
@media (max-width:760px){
  .vs{ grid-template-columns:1fr; }
  .vs__arrow{ transform:rotate(90deg); }
}

/* --- "Kako radi" kao stepenice koje se penju --- */
.stairs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.5vw,28px); align-items:start; }
.stairs__step{ position:relative; background:#fff; border:1px solid #e2e8f0; border-radius:18px;
  padding:26px 26px 28px; box-shadow:0 18px 44px -24px rgba(23,31,61,.4); }
.stairs__step:nth-child(1){ margin-top:clamp(0px,9vw,100px); }
.stairs__step:nth-child(2){ margin-top:clamp(0px,4.5vw,50px); }
.stairs__step:nth-child(3){ margin-top:0; }
.stairs__num{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center;
  font-weight:800; font-size:1.2rem; color:#fff; margin-bottom:16px;
  background:linear-gradient(135deg,#5b57e6,#1e2a52); box-shadow:0 8px 18px -8px rgba(79,70,229,.55); }
.stairs__step:nth-child(2) .stairs__num{ background:linear-gradient(135deg,#f28b4c,#e8752f); box-shadow:0 8px 18px -8px rgba(232,117,47,.55); }
.stairs__step:nth-child(3) .stairs__num{ background:linear-gradient(135deg,#1f52a8,#263465); box-shadow:0 8px 18px -8px rgba(31,82,168,.55); }
.stairs__step h3{ font-size:1.2rem; font-weight:700; color:#171f3d; margin-bottom:8px; letter-spacing:-.01em; }
.stairs__step p{ color:#475569; font-size:.97rem; }
/* strelica prema gore-desno između stepenica */
.stairs__step:not(:last-child)::after{ content:'↗'; position:absolute; top:30px; right:calc(-1 * clamp(16px,2.5vw,28px) + 4px);
  transform:translateX(50%); color:#cbd5e1; font-size:1.5rem; font-weight:700; z-index:2; }
@media (max-width:860px){
  .stairs{ grid-template-columns:1fr; gap:18px; }
  .stairs__step{ margin-top:0 !important; }
  .stairs__step::after{ display:none; }
}

/* --- FAQ akordeon --- */
.faq{ padding:clamp(64px,8vw,90px) 0; background:#f8fafc; }
.faq__list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq__item{ background:#fff; border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; transition:box-shadow .2s ease, border-color .2s ease; }
.faq__item[open]{ border-color:#fbe3d3; box-shadow:0 12px 32px -20px rgba(23,31,61,.28); }
.faq__item summary{ list-style:none; cursor:pointer; padding:18px 22px; font-weight:700; color:#171f3d; font-size:1.05rem; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:#c2571b; }
.faq__item summary::after{ content:'+'; font-size:1.5rem; font-weight:400; color:#e8752f; line-height:1; flex:0 0 auto; }
.faq__item[open] summary{ color:#c2571b; }
.faq__item[open] summary::after{ content:'−'; }
.faq__a{ padding:0 22px 20px; }
.faq__a p{ color:#475569; line-height:1.6; }

/* --- Elegantni telefon-gumb u traci (umjesto teškog gradijenta) --- */
.sbar__demo{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  color:#1e2a52; background:#fff; border:1px solid #e2e8f0; border-radius:10px; font-weight:600;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.sbar__demo svg{ width:16px; height:16px; color:#e8752f; }
.sbar__demo:hover{ border-color:#f2b48c; color:#c2571b; background:#fdf7f2; }

/* --- Responsive --- */
@media (max-width:860px){
  .fx{ grid-template-columns:1fr; }
  .rx__box{ grid-template-columns:1fr; }
  .pv{ grid-template-columns:1fr; }
  .pv--a, .pv--b{ transform:none; }
}