/* TendeRadar naslovna v2 (Rijad, 7.11.2026.: "da se ljudi zaljube u stranicu"). Učitava se samo na naslovnoj, poslije style.css. */
.hx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,#d6a85b,#f1cf8f,#5b8cff);box-shadow:0 0 12px rgba(214,168,91,.7)}
/* ---------- hero ---------- */
.hx{position:relative;min-height:calc(100vh - 68px);display:flex;align-items:center;padding:48px 0 70px;overflow:hidden}
.hx-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hx:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(700px 420px at 75% 45%,rgba(214,168,91,.13),transparent 60%),radial-gradient(600px 400px at 10% 10%,rgba(91,140,255,.12),transparent 60%);pointer-events:none}
.hx-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;width:100%}
@media(max-width:900px){.hx-grid{grid-template-columns:1fr;gap:10px}.hx{min-height:0;padding-top:28px}}
.hx-copy .hero-stat{display:inline-flex;align-items:center;gap:12px;padding:8px 16px 8px 12px;border-radius:40px;margin-bottom:22px;background-color:rgba(255,255,255,.05);border:1px solid rgba(214,168,91,.35);animation:hxIn .8s both}
.hx-copy .hero-stat-num{font-size:1.25rem}.hx-copy .hero-stat-text{font-size:.9rem}.hx-copy .hero-stat-text small{display:inline;margin-left:6px}
.hx-copy .eyebrow{display:block;animation:hxIn .8s .1s both}
.hx h1{font-size:clamp(2.3rem,5.6vw,4.3rem);line-height:1.05;letter-spacing:-1.5px;font-weight:800;color:#fff;margin:12px 0 16px;animation:hxIn .9s .2s both}
.hx h1 span{display:block;background:linear-gradient(90deg,#f1cf8f,#d6a85b 40%,#fff 80%,#d6a85b);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hxShine 6s linear infinite}
@keyframes hxShine{to{background-position:200% center}}
@keyframes hxIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hx-type{font-size:1.25rem;color:#fff;margin:0 0 14px;min-height:1.6em;animation:hxIn .9s .3s both}
.hx-type b{color:#f1cf8f;font-weight:700}
.hx-caret{display:inline-block;width:2px;height:1.1em;background-color:#d6a85b;margin-left:3px;vertical-align:-3px;animation:hxBlink 1s steps(1) infinite}
@keyframes hxBlink{50%{opacity:0}}
.hx-copy > p:not(.hx-type){color:rgba(255,255,255,.75);font-size:1.08rem;max-width:560px;animation:hxIn .9s .4s both}
.hx-copy .hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 20px;animation:hxIn .9s .5s both}
.hx-ghost{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:10px;border:1.5px solid rgba(255,255,255,.25);color:#fff;text-decoration:none;font-weight:600;transition:.25s}
.hx-ghost:hover{border-color:#d6a85b;background-color:rgba(214,168,91,.1);transform:translateY(-2px)}
.hx-copy .hero-points{animation:hxIn .9s .6s both}
/* radar */
.hx-radar-wrap{position:relative;perspective:1200px;animation:hxIn 1.1s .3s both}
.hx-radar{position:relative;width:min(560px,100%);aspect-ratio:1;margin:0 auto;transform-style:preserve-3d;transition:transform .25s ease-out;border-radius:50%}
.hx-radar:before{content:"";position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(closest-side,rgba(214,168,91,.18),transparent 70%);filter:blur(10px);z-index:-1}
.hx-radar canvas{width:100%;height:100%;display:block;border-radius:50%}
.hx-pops{position:absolute;inset:0;pointer-events:none}
.hx-pop{position:absolute;min-width:200px;max-width:250px;padding:10px 13px;border-radius:12px;font-size:13px;line-height:1.35;color:#e9edf5;background-color:rgba(14,27,54,.92);border:1px solid rgba(214,168,91,.5);
  box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:hxPop 3.4s ease forwards}
.hx-pop b{display:block;color:#f1cf8f;font-size:12px;letter-spacing:.4px;text-transform:uppercase;margin-bottom:3px}
.hx-pop .v{font-weight:800;color:#fff;font-size:15px}
.hx-pop i{display:inline-block;width:7px;height:7px;border-radius:50%;background-color:#3ecf8e;margin-right:6px;box-shadow:0 0 8px #3ecf8e}
@keyframes hxPop{0%{opacity:0;transform:translateY(10px) scale(.92)}10%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
.hx-scroll{position:absolute;left:50%;bottom:18px;z-index:2;width:34px;height:52px;margin-left:-17px;border:2px solid rgba(255,255,255,.3);border-radius:20px;color:transparent;font-size:0}
.hx-scroll:after{content:"";position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:3px;background-color:#d6a85b;animation:hxWheel 1.8s infinite}
@keyframes hxWheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@media(max-width:900px){.hx-scroll{display:none}.hx-pop{min-width:170px;font-size:12px}}
/* ---------- traka ---------- */
.hx-ticker{position:relative;overflow:hidden;padding:14px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);background-color:rgba(255,255,255,.025)}
.hx-ticker:before,.hx-ticker:after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.hx-ticker:before{left:0;background:linear-gradient(90deg,#070f1f,transparent)}.hx-ticker:after{right:0;background:linear-gradient(-90deg,#070f1f,transparent)}
.hx-track{display:flex;width:max-content;gap:12px;animation:hxMarq 90s linear infinite}
.hx-ticker:hover .hx-track{animation-play-state:paused}
@keyframes hxMarq{to{transform:translateX(-50%)}}
.hx-ti{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;color:#c9d2e3;padding:6px 14px;border-radius:30px;background-color:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.hx-ti b{color:#fff}.hx-ti em{font-style:normal;color:#f1cf8f;font-weight:700}.hx-ti i{width:6px;height:6px;border-radius:50%;background-color:#d6a85b}
/* ---------- brojke ---------- */
.hx-stats{padding:70px 0 30px}
.hx-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:820px){.hx-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hx-stat{position:relative;padding:26px 22px;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);transition:transform .35s,border-color .35s}
.hx-stat:hover{transform:translateY(-6px);border-color:rgba(214,168,91,.5)}
.hx-stat:before{content:"";position:absolute;width:160px;height:160px;right:-60px;top:-60px;border-radius:50%;background:radial-gradient(rgba(214,168,91,.28),transparent 70%)}
.hx-stat b{display:block;font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-1px;background:linear-gradient(90deg,#fff,#f1cf8f);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.hx-stat span{color:#9aa7bf;font-size:.95rem}
/* ---------- demo po branši ---------- */
.hx-demo{padding:70px 0}
.hx-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 26px;max-width:980px}
.hx-chips button{border:1px solid rgba(255,255,255,.12);background-color:rgba(255,255,255,.04);color:#dfe5f0;padding:9px 15px;border-radius:30px;font:600 14px inherit;font-family:inherit;cursor:pointer;transition:.25s}
.hx-chips button:hover{border-color:#d6a85b;transform:translateY(-2px)}
.hx-chips button.on{background:linear-gradient(135deg,#d6a85b,#b8862e);color:#111;border-color:transparent;box-shadow:0 8px 24px rgba(214,168,91,.35)}
.hx-chips button small{opacity:.7;margin-left:6px}
.hx-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;padding:26px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 80px rgba(0,0,0,.35)}
@media(max-width:900px){.hx-panel{grid-template-columns:1fr;padding:18px}}
.hx-pn{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#f1cf8f}
.hx-big{margin:6px 0 14px}.hx-big b{display:block;font-size:clamp(3rem,7vw,5rem);font-weight:800;line-height:1;letter-spacing:-2px;color:#fff;font-variant-numeric:tabular-nums}
.hx-big span{color:#9aa7bf}
.hx-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px}
.hx-mini div{padding:10px 12px;border-radius:12px;background-color:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.hx-mini b{display:block;color:#fff;font-size:1.05rem}.hx-mini span{font-size:12px;color:#9aa7bf}
.hx-bars{display:flex;align-items:flex-end;gap:5px;height:110px}
.hx-bars i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#f1cf8f,rgba(214,168,91,.2));height:3%;transition:height .9s cubic-bezier(.2,.8,.2,1)}
.hx-bars-l{font-size:12px;color:#9aa7bf;margin:6px 0 18px}
.hx-pr{display:flex;flex-direction:column;gap:12px}
.hx-card{position:relative;border-radius:14px;overflow:hidden;background-color:#fff;color:#1e2a3a;box-shadow:0 14px 40px rgba(0,0,0,.4);animation:hxCard .6s both;transition:transform .3s}
.hx-card:hover{transform:translateX(-6px) rotate(-.4deg)}
@keyframes hxCard{from{opacity:0;transform:translateX(40px) rotate(2deg)}to{opacity:1;transform:none}}
.hx-card-h{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;background-color:#16284a;color:#fff;font-size:14px}
.hx-card-h b{color:#d6a85b}.hx-card-h span{font-size:10px;letter-spacing:1px;color:#d6a85b}
.hx-card-b{padding:10px 14px 12px;font-size:13px;line-height:1.5}
.hx-card-b .c{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;background-color:#f6eedf;color:#16284a;margin:0 4px 6px 0}
.hx-card-b .c.e{background-color:#e9f5ee}
.hx-blur{filter:blur(4.5px);user-select:none;color:#6b7686}
/* ---------- kako radi: linija koraka ---------- */
.how .cards{position:relative}
.how .card .num{font-size:2.2rem;font-weight:800;opacity:.9;background:linear-gradient(180deg,#f1cf8f,#b8862e);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---------- lična stranica (prikaz) ---------- */
.hx-portal{padding:80px 0}
.hx-pgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center}
@media(max-width:900px){.hx-pgrid{grid-template-columns:1fr}}
.hx-feat{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.hx-feat li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background-color:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);color:#c9d2e3;transition:.3s}
.hx-feat li:hover{border-color:rgba(214,168,91,.5);transform:translateX(6px)}
.hx-feat i{font-style:normal;font-size:20px;line-height:1.2}.hx-feat b{color:#fff;display:block}
.hx-browser{position:relative;border-radius:16px;overflow:hidden;background-color:#0b1630;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(214,168,91,.15);transform:perspective(1400px) rotateY(-8deg) rotateX(3deg);transition:transform .6s;animation:hxFloat 7s ease-in-out infinite}
.hx-browser:hover{transform:none;animation-play-state:paused}
@keyframes hxFloat{50%{translate:0 -10px}}
.hx-bbar{display:flex;align-items:center;gap:6px;padding:10px 12px;background-color:#111f3d;border-bottom:1px solid rgba(255,255,255,.07)}
.hx-bbar i{width:10px;height:10px;border-radius:50%;background-color:#ff5f57}.hx-bbar i:nth-child(2){background-color:#febc2e}.hx-bbar i:nth-child(3){background-color:#28c840}
.hx-bbar span{flex:1;margin-left:10px;padding:4px 10px;border-radius:6px;background-color:rgba(255,255,255,.06);font-size:11px;color:#9aa7bf}
.hx-bbody{padding:14px}
.hx-bk{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.hx-bk div{padding:9px;border-radius:9px;background-color:#142647;font-size:10px;color:#9aa7bf}.hx-bk b{display:block;font-size:16px;color:#fff}
.hx-btabs{display:flex;gap:5px;margin-bottom:10px}.hx-btabs span{font-size:10px;padding:4px 8px;border-radius:6px;color:#9aa7bf;background-color:rgba(255,255,255,.04)}.hx-btabs span:first-child{background-color:#d6a85b;color:#111}
.hx-bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.hx-bc{position:relative;padding:10px;border-radius:10px;background-color:#101e3a;border:1px solid rgba(255,255,255,.07);font-size:10px;color:#9aa7bf}
.hx-bc .t{height:7px;border-radius:4px;background-color:rgba(255,255,255,.18);margin:6px 0 4px;width:90%}.hx-bc .t2{width:60%}
.hx-bc .bar{height:3px;border-radius:3px;background-color:rgba(255,255,255,.07);margin:8px 0 6px;overflow:hidden}.hx-bc .bar i{display:block;height:100%;background:linear-gradient(90deg,#3ecf8e,#ffb547,#ff5a5f)}
.hx-bc b{color:#fff;font-size:12px}.hx-bc .r{float:right;color:#3ecf8e;font-weight:700}.hx-bc .r.u{color:#ff5a5f}
.hx-bc .s{position:absolute;right:8px;top:7px;color:#9aa7bf;font-size:13px}
.hx-bc.lit{border-color:rgba(214,168,91,.6)}.hx-bc.lit .s{color:#d6a85b;animation:hxStar 6s infinite}
@keyframes hxStar{0%,48%{color:#9aa7bf;transform:none}52%{color:#d6a85b;transform:scale(1.6)}60%,100%{color:#d6a85b;transform:none}}
.hx-cursor{position:absolute;width:18px;height:18px;z-index:3;pointer-events:none;animation:hxCur 6s infinite}
@keyframes hxCur{0%{left:70%;top:85%}40%,55%{left:44%;top:46%}100%{left:70%;top:85%}}
/* ---------- poziv ---------- */
.hx-cta{padding:30px 0 70px}
.hx-cta-box{position:relative;overflow:hidden;text-align:center;padding:56px 24px;border-radius:26px;background:linear-gradient(135deg,#13244a,#0a1530 60%,#1d1a12);border:1px solid rgba(214,168,91,.4)}
.hx-cta-box:before{content:"";position:absolute;width:520px;height:520px;left:50%;top:50%;margin:-260px 0 0 -260px;border-radius:50%;border:1px solid rgba(214,168,91,.25);box-shadow:0 0 0 70px rgba(214,168,91,.04),0 0 0 140px rgba(214,168,91,.03);animation:hxRing 6s ease-in-out infinite}
@keyframes hxRing{50%{transform:scale(1.08);opacity:.6}}
.hx-cta-box h2{position:relative;color:#fff;font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:10px}
.hx-cta-box p{position:relative;color:#c9d2e3;max-width:560px;margin:0 auto 22px}
.hx-cta-box .btn{position:relative}
/* ---------- postojeći blokovi na tamnom ---------- */
body #mapa{background-color:transparent!important}
body .nm-svg path{stroke:#070f1f;transition:filter .3s,transform .3s}
body .nm-svg:hover path{filter:brightness(1.08)}
body #mapa h2{color:#fff}
body #start .container > div{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015))!important;border-color:rgba(214,168,91,.55)!important;box-shadow:0 20px 60px rgba(0,0,0,.4)!important}
body #start h2{color:#fff}body #start li{color:#c9d2e3}
body #start .btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.35)!important}
@media(prefers-reduced-motion:reduce){.hx *,.hx-track,.hx-browser,.hx-cta-box:before{animation:none!important}}
.hx-copy .hero-ctas{flex-direction:row;align-items:center}
.hx-copy .hero-points{text-align:left;padding-left:0}.hx-copy .hero-points li{justify-content:flex-start;text-align:left}
.hx-stat b{white-space:nowrap}
@media(max-width:600px){.hx-copy .hero-ctas{flex-direction:column;align-items:stretch}.hx-copy .hero-ctas a{text-align:center;justify-content:center}.hx-stat{padding:18px 16px}}
.hx-copy .hero-points{justify-items:start!important}
.hx-copy .hero-ctas{gap:12px;flex-wrap:nowrap}.hx-copy .hero-ctas .btn{padding:14px 22px;white-space:nowrap}.hx-ghost{padding:13px 18px;white-space:nowrap}
@media(max-width:600px){.hx-copy .hero-ctas{flex-wrap:wrap}}