/* ==================================================================
   15) WHY CHOOSE US (/about/, template-why-choose-us.php) — 2026-09-05
   Osnova: korisnikov dizajn `RealScan-Redesign.html`. Sve klase `rw-*`,
   sve scope-ovano na `.rs-why-page` (sudari sa Bootstrap/Houzez: .btn, .lead, .tag...).
   Boje: dizajnove za svijetlu temu; tamna tema = sajtove `html.rs-dark` + --rs-dark/--rs-dark-card
   da se poklopi sa headerom i footerom. Font se NASLJEDJUJE od sajta (Plus Jakarta Sans),
   naglasak (em) je serif kao i drugdje na sajtu (--rs-serif).
   ================================================================== */

html:has(body.rs-why){ scroll-behavior:smooth; scroll-padding-top:100px; }

.rs-why-page{
  --rw-bg:#f7f8f8; --rw-surface:#fff; --rw-ink:#142c37; --rw-muted:#61717a;
  --rw-line:#dbe1e2; --rw-gold:#a17a3d; --rw-soft:#edf1f1;
  --rw-navy:#142c37;                       /* tamna traka (Platform) */
  --rw-bg-rgb:247,248,248;                 /* = --rw-bg, za rgba() u prelivu heroja */
  --rw-overlay-rgb:20,44,55;               /* tamni preliv preko hero fotke (svijetla tema = navy dizajna) */
  background:var(--rw-bg); color:var(--rw-ink);
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
html.rs-dark .rs-why-page{
  --rw-bg:var(--rs-dark,#07111c); --rw-surface:var(--rs-dark-card,#0b1f37); --rw-ink:#f2f5f5;
  --rw-muted:#b2c1c9; --rw-line:rgba(255,255,255,.14); --rw-gold:#dab77e; --rw-soft:#0a1a2c;
  --rw-navy:var(--rs-navy-700,#0f2d49);
  --rw-bg-rgb:var(--rs-dark-rgb,7,17,28);
  --rw-overlay-rgb:var(--rs-dark-rgb,7,17,28);
}

/* ---- osnova ---- */
.rs-why-page *{ box-sizing:border-box; }
.rs-why-page a{ color:inherit; text-decoration:none; }
.rs-why-page svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; }
.rs-why-page h1,.rs-why-page h2,.rs-why-page h3,.rs-why-page h4,.rs-why-page p{ margin:0; color:inherit; }
.rs-why-page .rw-h1,.rs-why-page .rw-h2{ font-weight:400; letter-spacing:-.055em; line-height:1.08; }
.rs-why-page .rw-h2{ font-size:clamp(36px,4.1vw,58px); }
.rs-why-page .rw-h3{ font-size:25px; font-weight:500; letter-spacing:-.035em; line-height:1.25; }
.rs-why-page .rw-h4{ font-size:21px; font-weight:500; line-height:1.3; }
.rs-why-page em{ font-family:var(--rs-serif,Georgia,serif); font-style:italic; font-weight:400; color:var(--rw-gold); }
.rs-why-page .rw-wrap{ width:min(1280px,calc(100% - 96px)); margin:auto; }
.rs-why-page ul{ padding:0; margin:0; list-style:none; }

/* ---- dugmad — ISTI stil kao ostatak sajta (css/02 sek.2: zlatni gradijent, 9px, bold, tamna slova)
   Korisnik 2026-09-05: „svi tasteri kao nasi, dizajn da se unifikuje". Dizajnova crna/bez-radijusa dugmad odbacena.
   Primary = zlatni gradijent. Ghost = zlatni okvir, na hover se puni zlatom (kao rs-cta3 na pocetnoj). */
.rs-why-page .rw-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:13px 26px; font-size:15px; font-weight:700; letter-spacing:.02em; line-height:1.2;
  border-radius:9px; border:1px solid var(--rs-border-gold,rgba(217,170,79,.45));
  transition:transform 160ms ease, filter 160ms ease, background 160ms ease, color 160ms ease; white-space:nowrap;
}
.rs-why-page .rw-btn-primary,.rs-why-page .rw-btn-gold{
  background:linear-gradient(180deg,var(--rs-gold-2,#f0c96c),var(--rs-gold,#d9aa4f)); color:#1a1205;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 12px 30px rgba(var(--rs-gold-rgb,217,170,79),.22);
}
.rs-why-page .rw-btn-primary:hover,.rs-why-page .rw-btn-gold:hover{ transform:translateY(-1px); filter:brightness(1.05); color:#1a1205; }
.rs-why-page .rw-btn-ghost{ background:transparent; color:var(--rw-gold); }
html.rs-dark .rs-why-page .rw-btn-ghost{ color:var(--rs-gold-2,#f0c96c); }
.rs-why-page .rw-btn-ghost:hover{
  background:linear-gradient(135deg,var(--rs-gold-2,#f0c96c),var(--rs-gold,#d9aa4f)); color:#1a1205; border-color:transparent;
}
.rs-why-page .rw-link:hover{ color:var(--rw-gold); }
.rs-why-page a:focus-visible{ outline:3px solid var(--rw-gold); outline-offset:5px; }

/* ---- natpisi (eyebrow) ---- */
.rs-why-page .rw-eyebrow,.rs-why-page .rw-tag,.rs-why-page .rw-svc-eyebrow,
.rs-why-page .rw-rm-phase,.rs-why-page .rw-st{
  font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.17em;
  color:var(--rw-gold); margin-bottom:26px; display:block;
}
.rs-why-page .rw-eyebrow:before{
  content:''; display:inline-block; width:27px; height:1px; background:var(--rw-gold);
  vertical-align:middle; margin-right:12px;
}

/* ---- HERO — fotografija preko cijele sirine, tekst preko nje, pretapanje u pozadinu ispod trake ----
   Korisnik 2026-09-05: „ispod headera ne moze bijela pozadina… sliku kao horizont da se fadeoutuje ispod
   360/24/7/4K". Slika je u .rw-hero-bg (absolute, iza sadrzaja). Preko nje DVA preliva:
   1) horizontalni — lijevo tamnije (tu je tekst), desno providno (tu se vidi kuca);
   2) vertikalni — pri dnu prelazi u boju pozadine stranice (--rw-bg), pa traka sa brojevima
      sjedi na skoro cistoj pozadini, a ispod nje fotke vise nema.
   Tekst u heroju je bijel (u obje teme), traka ispod zadrzava boje teme. */
.rs-why-page .rw-hero{ position:relative; isolation:isolate; }
.rs-why-page .rw-hero-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.rs-why-page .rw-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:70% 50%; display:block; }
.rs-why-page .rw-hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    /* pretapanje kasnije: fotka se vidi i kroz traku sa brojevima, a u pozadinu prelazi tek na njenoj DONJOJ liniji */
    linear-gradient(180deg, rgba(var(--rw-bg-rgb),0) 0%, rgba(var(--rw-bg-rgb),0) 58%, rgba(var(--rw-bg-rgb),.72) 88%, rgba(var(--rw-bg-rgb),1) 100%),
    linear-gradient(90deg, rgba(var(--rw-overlay-rgb),.86) 0%, rgba(var(--rw-overlay-rgb),.62) 42%, rgba(var(--rw-overlay-rgb),.18) 100%);
}
.rs-why-page .rw-hero-in{
  display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center;
  /* visina prati EKRAN: header (~100) + hero + traka (114) = prvi ekran. Korisnik 2026-09-05: fiksnih 640 je usko, to je hero. Donja granica 640 (laptop), gornja 1100 (da na 4K ne bude prazno). */
  /* Header je PLUTAJUCI (stranica ima fave_main_menu_trans=yes -> body.transparent-yes, css/02 sek.6), pa fotka pocinje
     od vrha ekrana IZA headera (korisnik 2026-09-05). Zato padding-top 170 (18 + ~97 header + dah), a visina = ekran - traka. */
  min-height:clamp(640px, calc(100svh - 114px), 1200px); padding-top:170px; padding-bottom:64px;
}
.rs-why-page .rw-hero-copy{ color:#fff; }
.rs-why-page .rw-hero-copy .rw-eyebrow{ color:var(--rs-gold-2,#f0c96c); }
.rs-why-page .rw-hero-copy .rw-eyebrow:before{ background:var(--rs-gold-2,#f0c96c); }
.rs-why-page .rw-hero-copy em{ color:var(--rs-gold-2,#f0c96c); }
.rs-why-page .rw-h1{ font-size:clamp(50px,5.4vw,78px); line-height:1.03; margin-bottom:30px; text-shadow:0 2px 14px rgba(0,0,0,.25); }
.rs-why-page .rw-lead{ max-width:390px; font-size:18px; color:rgba(255,255,255,.82); line-height:1.7; }
.rs-why-page .rw-hero-actions{ display:flex; align-items:center; gap:25px; margin-top:34px; }
.rs-why-page .rw-hero-actions .rw-link{ color:#fff; font-weight:600; }
.rs-why-page .rw-hero-actions .rw-link:hover{ color:var(--rs-gold-2,#f0c96c); }
.rs-why-page .rw-hero-note{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-top:30px; color:rgba(255,255,255,.65); }
/* „Scroll" nagovjestaj: zajednicki modul css/16-scroll-hint.css + inc/44 */
.rs-why-page .rw-hero-strip{ border-top:1px solid var(--rw-line); border-bottom:1px solid var(--rw-line); }
.rs-why-page .rw-hero-strip-in{ display:grid; grid-template-columns:repeat(4,1fr); padding:28px 0; }
.rs-why-page .rw-hero-stat{ padding:0 28px; border-right:1px solid var(--rw-line); display:flex; align-items:center; gap:18px; }
.rs-why-page .rw-hero-stat:first-child{ padding-left:0; }
.rs-why-page .rw-hero-stat:last-child{ border:0; }
.rs-why-page .rw-n{ font-size:34px; letter-spacing:-.06em; }
.rs-why-page .rw-l{ font-size:13px; color:var(--rw-muted); line-height:1.4; max-width:160px; } /* 115 -> 160: 'In-house production' (115px) se lomio u 2 reda; kolona ima 320px */

/* ---- POSITIONING ---- */
.rs-why-page .rw-band{ padding:105px 0; }
.rs-why-page .rw-pos-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:90px; align-items:center; }
.rs-why-page .rw-pos-lead{ font-size:29px; letter-spacing:-.03em; line-height:1.4; }
.rs-why-page .rw-pos-lead b{ font-weight:400; color:var(--rw-gold); }
.rs-why-page .rw-pos-body{ color:var(--rw-muted); margin-top:25px; }
.rs-why-page .rw-pos-panel{ border-left:1px solid var(--rw-line); padding-left:42px; }
.rs-why-page .rw-pos-panel .rw-h3{ font-size:30px; margin-top:15px; }
.rs-why-page .rw-pledge{ margin:22px 0 0; }
.rs-why-page .rw-pledge li{ display:flex; gap:13px; border-bottom:1px solid var(--rw-line); padding:16px 0; font-size:14px; }
.rs-why-page .rw-dot{ color:var(--rw-gold); flex-shrink:0; }
.rs-why-page .rw-dot svg{ width:20px; }

/* ---- SERVICES ---- */
.rs-why-page .rw-section-head{ max-width:700px; margin-bottom:50px; }
.rs-why-page .rw-section-head--tight{ margin-bottom:40px; }
.rs-why-page .rw-sub{ font-size:17px; color:var(--rw-muted); margin-top:24px; max-width:650px; }
.rs-why-page .rw-services{ background:var(--rw-soft); }
/* ---- SERVICES — ROTIRAJUCI PRIKAZ (2026-09-05) ----
   Jedan servis u kadru. Stavke su naslagane u ISTU grid celiju (grid-area:1/1) pa je visina bine = najvisa
   stavka i nista ne skace pri smjeni. Prelaz: .is-leaving izlazi udesno (0.4s), .is-active ulazi slijeva;
   desna kolona se otkriva clip-path-om od vrha ka dnu, sa zakasnjenjem poslije lijeve.
   Tajmer: segment po servisu; aktivni se puni scaleX animacijom u trajanju --rw-show-dur (postavlja JS);
   :hover/.is-paused zaustavlja punjenje (animation-play-state). Mreza sa fotkama: git tag why-services-grid-2026-09-05. */
.rs-why-page .rw-show{ --rw-show-dur:8000ms; position:relative; }
.rs-why-page .rw-show-stage{ display:grid; }
.rs-why-page .rw-show-item{
  grid-area:1/1; display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:start;
  opacity:0; visibility:hidden; pointer-events:none;
}
.rs-why-page .rw-show-item.is-active{ opacity:1; visibility:visible; pointer-events:auto; }
/* izlaz: cijela stavka blago udesno + nestaje */
.rs-why-page .rw-show-item.is-leaving{ visibility:visible; opacity:0; transform:translateX(28px); transition:opacity .4s ease, transform .4s ease; }
/* ulaz lijeve kolone: slijeva */
.rs-why-page .rw-show-left{ opacity:0; transform:translateX(-32px); }
.rs-why-page .rw-show-item.is-active .rw-show-left{ opacity:1; transform:none; transition:opacity .6s cubic-bezier(.2,.8,.2,1) .1s, transform .6s cubic-bezier(.2,.8,.2,1) .1s; }
/* ulaz desne kolone: poslije lijeve, otkrivanje od vrha ka dnu */
.rs-why-page .rw-show-right{ opacity:0; clip-path:inset(0 0 100% 0); transform:translateY(-10px); }
.rs-why-page .rw-show-item.is-active .rw-show-right{
  opacity:1; clip-path:inset(0 0 -2% 0); transform:none;
  transition:opacity .5s ease .45s, clip-path .9s cubic-bezier(.2,.8,.2,1) .45s, transform .9s cubic-bezier(.2,.8,.2,1) .45s;
}
.rs-why-page .rw-show-block{ opacity:0; transform:translateY(-8px); }
.rs-why-page .rw-show-item.is-active .rw-show-block{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }
.rs-why-page .rw-show-item.is-active .rw-show-block:nth-child(1){ transition-delay:.55s; }
.rs-why-page .rw-show-item.is-active .rw-show-block:nth-child(2){ transition-delay:.85s; }

.rs-why-page .rw-show-num{ font:italic 22px var(--rs-serif,Georgia,serif); color:var(--rw-gold); margin-bottom:22px; }
.rs-why-page .rw-svc-eyebrow{ font-size:11px; margin-bottom:12px; }
.rs-why-page .rw-show-title{ font-size:clamp(30px,3vw,44px); letter-spacing:-.03em; line-height:1.1; }
.rs-why-page .rw-show-lead{ color:var(--rw-muted); font-size:17px; line-height:1.65; margin-top:18px; max-width:420px; }

.rs-why-page .rw-show-right{ border-left:1px solid var(--rw-line); padding-left:48px; }
.rs-why-page .rw-show-block + .rw-show-block{ margin-top:28px; padding-top:24px; border-top:1px solid var(--rw-line); }
.rs-why-page .rw-show-label{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rw-gold); margin-bottom:14px; }
.rs-why-page .rw-show-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.5; padding:7px 0; }
.rs-why-page .rw-show-list .rw-dot svg{ width:18px; height:18px; margin-top:2px; }
.rs-why-page .rw-show-block p{ color:var(--rw-muted); font-size:15px; line-height:1.7; }

/* tajmer */
.rs-why-page .rw-show-timer{ display:flex; gap:8px; justify-content:center; margin:56px auto 0; max-width:560px; }
.rs-why-page .rw-show-seg{
  flex:1; height:22px; padding:0; border:0; background:transparent; cursor:pointer; position:relative;
}
/* linije tajmera: 3px; na SVIJETLOJ temi tamnije zlato (--rw-gold #a17a3d) jer se svijetlo zlato na bijelom jedva vidi (korisnik 2026-09-05) */
.rs-why-page .rw-show-seg::before{ content:''; position:absolute; left:0; right:0; top:10px; height:3px; background:rgba(161,122,61,.32); border-radius:3px; }
.rs-why-page .rw-show-fill{ position:absolute; left:0; right:0; top:10px; height:3px; background:linear-gradient(90deg,#b98c48,#8f6a30); border-radius:3px; transform:scaleX(0); transform-origin:left center; }
html.rs-dark .rs-why-page .rw-show-seg::before{ background:rgba(var(--rs-gold-rgb,217,170,79),.25); }
html.rs-dark .rs-why-page .rw-show-fill{ background:linear-gradient(90deg,var(--rs-gold-2,#f0c96c),var(--rs-gold,#d9aa4f)); }
.rs-why-page .rw-show-seg.is-done .rw-show-fill{ transform:scaleX(1); }
.rs-why-page .rw-show.is-inview .rw-show-seg.is-active .rw-show-fill{ animation:rw-show-fill var(--rw-show-dur) linear forwards; box-shadow:0 0 10px rgba(var(--rs-gold-rgb,217,170,79),.45); }
.rs-why-page .rw-show.is-paused .rw-show-seg.is-active .rw-show-fill{ animation-play-state:paused; }
/* HOVER (pauza): linije su STATICNE — ne vidi se napredak ni odradjeni segmenti, samo je IZABRANI pun (korisnik 2026-09-05).
   Napredak se krije opacity-jem (animacija ostaje pauzirana pa se po sklanjanju misa nastavlja odakle je stala),
   a izabrani se crta posebnim ::after slojem. */
.rs-why-page .rw-show.is-paused .rw-show-fill{ opacity:0; }
.rs-why-page .rw-show.is-paused .rw-show-seg.is-active::after{
  content:''; position:absolute; left:0; right:0; top:10px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,#b98c48,#8f6a30);
}
html.rs-dark .rs-why-page .rw-show.is-paused .rw-show-seg.is-active::after{ background:linear-gradient(90deg,var(--rs-gold-2,#f0c96c),var(--rs-gold,#d9aa4f)); box-shadow:0 0 10px rgba(var(--rs-gold-rgb,217,170,79),.45); }
.rs-why-page .rw-show-seg:hover::before{ background:rgba(161,122,61,.5); }
html.rs-dark .rs-why-page .rw-show-seg:hover::before{ background:rgba(var(--rs-gold-rgb,217,170,79),.4); }
.rs-why-page .rw-show-seg:focus-visible{ outline:2px solid var(--rw-gold); outline-offset:2px; border-radius:4px; }
@keyframes rw-show-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

@media (max-width:900px){
  .rs-why-page .rw-show-item{ grid-template-columns:1fr; gap:28px; }
  .rs-why-page .rw-show-right{ border-left:0; padding-left:0; border-top:1px solid var(--rw-line); padding-top:24px; }
  .rs-why-page .rw-show-title{ font-size:30px; }
  .rs-why-page .rw-show-timer{ margin-top:36px; }
}
@media (prefers-reduced-motion:reduce){
  .rs-why-page .rw-show-item, .rs-why-page .rw-show-left, .rs-why-page .rw-show-right, .rs-why-page .rw-show-block{ transition:none !important; transform:none !important; clip-path:none !important; }
}

/* ---- PLATFORM (tamna traka u obje teme) ---- */
.rs-why-page .rw-platform{ background:var(--rw-navy); color:#fff; }
.rs-why-page .rw-platform .rw-eyebrow{ color:#c7a66f; }
.rs-why-page .rw-platform .rw-sub,.rs-why-page .rw-platform p,.rs-why-page .rw-hub-d{ color:#b7c6cc; }
.rs-why-page .rw-plat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.rs-why-page .rw-plat-node{ border-top:1px solid #ffffff35; padding-top:28px; }
.rs-why-page .rw-pn-ic{ color:#d3b580; margin-bottom:22px; }
.rs-why-page .rw-plat-node p{ font-size:15px; margin-top:15px; }
.rs-why-page .rw-plat-hub{
  display:flex; align-items:center; justify-content:space-between; gap:50px;
  margin-top:55px; padding-top:35px; border-top:1px solid #ffffff35;
}
.rs-why-page .rw-hub-t{ font-size:20px; margin-bottom:10px; }
.rs-why-page .rw-hub-d{ font-size:14px; max-width:720px; }

/* ---- VALUE ---- */
.rs-why-page .rw-value-panel{ display:grid; grid-template-columns:1.7fr 1fr; border:1px solid var(--rw-line); background:var(--rw-surface); }
.rs-why-page .rw-value-main{ padding:50px; display:flex; flex-direction:column; justify-content:center; } /* oznake (tags) uklonjene 2026-09-05 -> sadrzaj centriran po visini */
.rs-why-page .rw-value-title{ font-size:38px; max-width:430px; }
.rs-why-page .rw-value-body{ color:var(--rw-muted); margin-top:24px; }
.rs-why-page .rw-value-side{ padding:45px; background:var(--rw-soft); border-left:1px solid var(--rw-line); }
.rs-why-page .rw-big{ font-size:104px; line-height:1.2; letter-spacing:-.04em; white-space:nowrap; }
/* crtica izmedju 3 i 5: tipografska „–" sjedi nisko i uz brojeve (letter-spacing). Zato je crtica NACRTANA
   (inline-block traka), postavljena na SREDINU visine cifara i sa ISTIM razmakom sa obje strane (korisnik 2026-09-05). */
.rs-why-page .rw-dash{ display:inline-block; width:.42em; height:.075em; background:currentColor; vertical-align:middle; position:relative; top:-.09em; margin:0 .14em; }
.rs-why-page .rw-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* „–" samo za citace ekrana/kopiranje */
.rs-why-page .rw-big small{ font-size:42px; color:var(--rw-gold); padding-left:8px; }
.rs-why-page .rw-cap,.rs-why-page .rw-only{ font-size:14px; color:var(--rw-muted); }
.rs-why-page .rw-rule{ height:1px; background:var(--rw-line); margin:25px 0; }

/* ---- ROADMAP — izgled iz korisnikovog „Why Choose Us - Standalone.html" (2026-09-05) ----
   Centriran naslov (serif, bold), zlatna vremenska osa sa 3 cvora (kvacica = gotovo, telefon = sljedece,
   ? = nepoznato), natpis faze ispod cvora, pa kartica sa znackom. Ispod 900px osa ide VERTIKALNO uz lijevu
   ivicu, a cvor i kartica u red. Tokeni mapirani na nase: surface/line/soft. */
.rs-why-page .rw-soon{ background:var(--rw-bg); border-top:1px solid var(--rw-line); } /* pozadina STRANICE, ne soft — inace se stopi sa zavrsnom sekcijom (korisnik 2026-09-05) */
.rs-why-page .rw-closing{ border-top:1px solid var(--rw-line); }
.rs-why-page .rw-section-head--center{ margin-left:auto; margin-right:auto; text-align:center; margin-bottom:56px; }
.rs-why-page .rw-section-head--center .rw-sub{ margin-left:auto; margin-right:auto; }
.rs-why-page .rw-h2--serif{ font-family:var(--rs-serif,Georgia,serif); font-weight:700; letter-spacing:-.005em; font-size:clamp(28px,4vw,42px); line-height:1.12; }
.rs-why-page .rw-eyebrow--center{ display:flex; align-items:center; justify-content:center; gap:12px; }
.rs-why-page .rw-eyebrow--center:before{ margin:0; width:46px; background:linear-gradient(90deg,transparent,var(--rw-gold)); }
.rs-why-page .rw-eyebrow--center:after{ content:''; display:inline-block; width:46px; height:1px; background:linear-gradient(90deg,var(--rw-gold),transparent); }

.rs-why-page .rw-rm-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
.rs-why-page .rw-rm-track::before{
  content:''; position:absolute; top:23px; left:11%; right:11%; height:2px; z-index:0;
  background:linear-gradient(90deg,var(--rs-gold,#d9aa4f) 0%,var(--rs-gold,#d9aa4f) 42%,rgba(var(--rs-gold-rgb,217,170,79),.35) 64%,rgba(var(--rs-gold-rgb,217,170,79),.12) 100%);
  box-shadow:0 0 14px rgba(var(--rs-gold-rgb,217,170,79),.4);
}
.rs-why-page .rw-rm-item{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.rs-why-page .rw-rm-node{
  width:48px; height:48px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:var(--rw-soft); border:2px solid var(--rs-border-gold,rgba(217,170,79,.45));
}
.rs-why-page .rw-rm-node svg{ width:22px; height:22px; stroke:var(--rs-gold,#d9aa4f); fill:none; stroke-width:2.2; }
.rs-why-page .rw-rm-node--done{ background:linear-gradient(180deg,var(--rs-gold-2,#f0c96c),var(--rs-gold,#d9aa4f)); border-color:transparent; box-shadow:0 12px 30px rgba(var(--rs-gold-rgb,217,170,79),.22); }
.rs-why-page .rw-rm-node--done svg{ stroke:#1a1205; }
.rs-why-page .rw-rm-node--next{ border-color:var(--rs-gold,#d9aa4f); animation:rw-pulse 2s infinite; }
.rs-why-page .rw-rm-node--myst{ border-style:dashed; }
.rs-why-page .rw-qm{ font-family:var(--rs-serif,Georgia,serif); font-size:22px; font-weight:700; color:var(--rs-gold,#d9aa4f); }
.rs-why-page .rw-rm-body{ width:100%; text-align:center; flex:1; display:flex; flex-direction:column; } /* flex:1 + kartica flex:1 = sve tri kartice ISTE visine (korisnik 2026-09-05) */
.rs-why-page .rw-rm-phase{ margin:16px 0 0; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rs-gold,#d9aa4f); }
.rs-why-page .rw-rm-card{ flex:1; margin-top:14px; background:var(--rw-surface); border:1px solid var(--rw-line); border-radius:16px; padding:22px 20px; text-align:left; }
.rs-why-page .rw-rm-card--myst{ border-style:dashed; border-color:var(--rs-border-gold,rgba(217,170,79,.45)); }
.rs-why-page .rw-rm-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rw-gold); background:rgba(var(--rs-gold-rgb,217,170,79),.12); border:1px solid var(--rs-border-gold,rgba(217,170,79,.45));
  border-radius:100px; padding:5px 11px; margin-bottom:12px;
}
.rs-why-page .rw-rm-badge--live{ color:#1a1205; background:linear-gradient(180deg,var(--rs-gold-2,#f0c96c),var(--rs-gold,#d9aa4f)); border-color:transparent; }
.rs-why-page .rw-pulse{ width:7px; height:7px; border-radius:50%; background:var(--rs-gold,#d9aa4f); animation:rw-pulse 2s infinite; }
@keyframes rw-pulse{ 0%{ box-shadow:0 0 0 0 rgba(217,170,79,.5); } 70%{ box-shadow:0 0 0 9px rgba(217,170,79,0); } 100%{ box-shadow:0 0 0 0 rgba(217,170,79,0); } }
/* red za znacku ima FIKSNU visinu na svim karticama (i kad znacke nema) -> naslovi na istoj visini (korisnik 2026-09-05) */
.rs-why-page .rw-rm-badge-row{ height:29px; /* = izmjerena visina znacke */ margin-bottom:14px; display:flex; align-items:center; }
.rs-why-page .rw-rm-badge{ margin-bottom:0; }
.rs-why-page .rw-rm-card .rw-h3{ font-family:var(--rs-serif,Georgia,serif); font-weight:700; font-size:18.5px; letter-spacing:0; margin:0 0 14px; } /* razmak naslov→tekst 8→14 */
.rs-why-page .rw-rm-card p{ color:var(--rw-muted); font-size:13.5px; line-height:1.6; margin:0; }
html.rs-dark .rs-why-page .rw-rm-badge{ color:var(--rs-gold-2,#f0c96c); }
/* znacka „Available today": tekst BIJEL na zlatnoj (korisnik 2026-09-05). Mora poslije dark pravila i sa html.rs-dark
   u selektoru — inace ga dark pravilo (0,3,1) pregazi i tekst ostane zlatan na zlatnom (nevidljiv). */
.rs-why-page .rw-rm-badge--live, html.rs-dark .rs-why-page .rw-rm-badge--live{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
@media (max-width:899.98px){
  .rs-why-page .rw-rm-track{ grid-template-columns:1fr; gap:30px; }
  .rs-why-page .rw-rm-track::before{ top:0; bottom:0; left:23px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg,var(--rs-gold,#d9aa4f) 0%,var(--rs-gold,#d9aa4f) 48%,rgba(var(--rs-gold-rgb,217,170,79),.35) 66%,rgba(var(--rs-gold-rgb,217,170,79),.14) 100%); }
  .rs-why-page .rw-rm-item{ flex-direction:row; align-items:flex-start; gap:18px; }
  .rs-why-page .rw-rm-body{ text-align:left; }
  .rs-why-page .rw-rm-phase{ margin-top:2px; }
  .rs-why-page .rw-rm-card{ margin-top:10px; }
}

/* ---- CLOSING ---- */
.rs-why-page .rw-closing{ background:var(--rw-soft); padding:100px 40px; text-align:center; }
.rs-why-page .rw-closing-in{ max-width:850px; margin:auto; }
.rs-why-page .rw-closing .rw-h2{ font-size:clamp(36px,4.5vw,62px); }
.rs-why-page .rw-closing p{ max-width:650px; margin:25px auto; color:var(--rw-muted); }
.rs-why-page .rw-cta{ display:flex; justify-content:center; gap:14px; margin-top:35px; }

/* ---- RESPONSIVE ---- */
@media (min-width:1600px){
  .rs-why-page .rw-hero-in{ padding-top:85px; padding-bottom:85px; }
}
@media (max-width:1050px){
  .rs-why-page .rw-wrap{ width:calc(100% - 48px); }
  .rs-why-page .rw-hero-in{ gap:30px; min-height:clamp(560px, calc(100svh - 114px), 900px); }
  .rs-why-page .rw-pos-grid{ gap:35px; }
  .rs-why-page .rw-hero-stat{ padding:0 16px; gap:10px; }
  .rs-why-page .rw-n{ font-size:28px; }
}
@media (max-width:760px){
  .rs-why-page .rw-wrap{ width:calc(100% - 36px); }
  .rs-why-page .rw-hero-in{ grid-template-columns:1fr; min-height:0; padding-top:130px; padding-bottom:35px; gap:35px; }
  .rs-why-page .rw-hero-bg img{ object-position:60% 50%; }
  /* na telefonu nema desne kolone -> preliv jaci po cijeloj sirini da tekst ostane citljiv */
  .rs-why-page .rw-hero-bg::after{ background:
    linear-gradient(180deg, rgba(var(--rw-bg-rgb),0) 0%, rgba(var(--rw-bg-rgb),0) 55%, rgba(var(--rw-bg-rgb),.9) 86%, rgba(var(--rw-bg-rgb),1) 100%),
    linear-gradient(90deg, rgba(var(--rw-overlay-rgb),.8) 0%, rgba(var(--rw-overlay-rgb),.62) 100%); }
  .rs-why-page .rw-h1{ font-size:58px; }
  .rs-why-page .rw-hero-strip-in{ grid-template-columns:1fr 1fr; gap:25px 0; }
  .rs-why-page .rw-hero-stat{ padding:0 16px; }
  .rs-why-page .rw-hero-stat:nth-child(2){ border:0; }
  .rs-why-page .rw-l{ font-size:12px; }
  .rs-why-page .rw-band{ padding:65px 0; }
  .rs-why-page .rw-pos-grid,.rs-why-page .rw-value-panel{ grid-template-columns:1fr; }
  .rs-why-page .rw-pos-panel{ padding:25px 0 0; border:0; border-top:1px solid var(--rw-line); }
  .rs-why-page .rw-plat-grid{ grid-template-columns:1fr; gap:30px; }
  .rs-why-page .rw-plat-hub{ align-items:flex-start; flex-direction:column; gap:25px; }
  .rs-why-page .rw-value-main,.rs-why-page .rw-value-side{ padding:30px; }
  .rs-why-page .rw-value-side{ border-left:0; border-top:1px solid var(--rw-line); }
  .rs-why-page .rw-closing{ padding:65px 22px; }
  .rs-why-page .rw-hero-note{ font-size:11px; }
}
@media (max-width:420px){
  .rs-why-page .rw-h1{ font-size:49px; }
  .rs-why-page .rw-hero-actions{ gap:15px; }
  .rs-why-page .rw-hero-actions a{ font-size:14px; }
  .rs-why-page .rw-cta{ flex-direction:column; align-items:stretch; }
}
@media (prefers-reduced-motion:reduce){
  html:has(body.rs-why){ scroll-behavior:auto; }
  .rs-why-page *{ transition:none !important; }
}