/* ============================================================
   WEB STUDIO 9 — HERO (SAMO CSS, bez JS)
   Zvezde, nebula, planeta, presijavanje, rotacija poruka — sve CSS
   ============================================================ */
/* ukloni beli razmak koji Elementor/tema dodaje oko hero-a */
.elementor-widget-html:has(.hero9),
.elementor-widget-container:has(.hero9){padding:0 !important;margin:0 !important}
.hero9{
  /* FULL-BLEED: puna sirina ekrana, izlazi iz kontejnera, bez razmaka */
  width:100vw !important;max-width:100vw !important;
  left:50%;right:50%;
  margin-left:-50vw !important;margin-right:-50vw !important;
  margin-top:0 !important;margin-bottom:0 !important;
  --navy-900:#091628;
  --navy-800:#0e2138;
  --navy-700:#143055;
  --sky:#5a9bd4;
  --sky-light:#7db4e2;
  --sky-deep:#2f6fae;
  --font-disp:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;

  position:relative;overflow:hidden;
  min-height:clamp(560px,86vh,820px);
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#5998c0 0%,#5998c0 45%,#79b0d6 75%,#cfe3f3 100%);
  font-family:var(--font-body);color:#fff;isolation:isolate;
}
.hero9 *,.hero9 *::before,.hero9 *::after{box-sizing:border-box}

/* ---- NEBULA (lebdeci obojeni sjaj) ---- */
.hero9 .nebula{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero9 .nebula span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.hero9 .nebula .n1{width:520px;height:520px;left:-8%;top:-12%;background:radial-gradient(circle,#2f6fae,transparent 65%);animation:drift1 18s ease-in-out infinite}
.hero9 .nebula .n2{width:460px;height:460px;right:-6%;top:8%;background:radial-gradient(circle,#1b9ac4,transparent 65%);animation:drift2 22s ease-in-out infinite}
.hero9 .nebula .n3{width:620px;height:620px;left:28%;bottom:-32%;background:radial-gradient(circle,#3f6fae,transparent 60%);opacity:.4;animation:drift3 26s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,40px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,30px)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-40px)}}

/* ---- ZVEZDE (cisto CSS preko box-shadow tackica) ---- */
.hero9 .stars,.hero9 .stars2,.hero9 .stars3{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero9 .stars::after,.hero9 .stars2::after,.hero9 .stars3::after{
  content:"";position:absolute;top:0;left:0;width:2px;height:2px;border-radius:50%;background:transparent;
}
/* tri sloja zvezda razlicite velicine/brzine treperenja */
.hero9 .stars::after{
  box-shadow:
   40px 60px #fff, 120px 200px #cfe6ff, 300px 80px #fff, 520px 300px #bcdcff,
   700px 140px #fff, 880px 360px #cfe6ff, 1040px 90px #fff, 1200px 260px #bcdcff,
   180px 420px #fff, 420px 520px #cfe6ff, 640px 460px #fff, 980px 540px #bcdcff,
   1180px 480px #fff, 60px 320px #cfe6ff, 360px 300px #fff, 760px 60px #bcdcff;
  animation:tw 3.2s ease-in-out infinite;
}
.hero9 .stars2::after{
  box-shadow:
   90px 140px #fff, 260px 40px #cfe6ff, 480px 180px #fff, 660px 320px #bcdcff,
   820px 80px #fff, 1000px 220px #cfe6ff, 1160px 360px #fff, 200px 260px #bcdcff,
   520px 420px #fff, 900px 460px #cfe6ff, 1100px 140px #fff, 320px 500px #bcdcff;
  animation:tw 4.6s ease-in-out infinite;opacity:.8;
}
.hero9 .stars3::after{
  width:1px;height:1px;
  box-shadow:
   150px 90px #fff, 340px 240px #cfe6ff, 560px 60px #fff, 740px 420px #bcdcff,
   940px 300px #fff, 1080px 180px #cfe6ff, 30px 200px #fff, 240px 360px #bcdcff,
   600px 520px #fff, 860px 200px #cfe6ff, 1140px 420px #fff, 440px 120px #bcdcff;
  animation:tw 5.8s ease-in-out infinite;opacity:.6;
}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}

/* zvezda padalica (CSS) */
.hero9 .shoot{position:absolute;top:14%;left:-10%;z-index:1;width:120px;height:2px;
  background:linear-gradient(90deg,transparent,#bfe0ff);border-radius:2px;
  transform:rotate(18deg);opacity:0;animation:shoot 9s ease-in 2s infinite}
.hero9 .shoot2{top:30%;animation-delay:6s;animation-duration:11s}
@keyframes shoot{0%{transform:translate(0,0) rotate(18deg);opacity:0}
  4%{opacity:1}12%{transform:translate(60vw,20vh) rotate(18deg);opacity:0}100%{opacity:0}}

/* ---- PLANETA ---- */
.hero9 .planet{position:absolute;left:50%;bottom:-80%;transform:translateX(-50%);
  width:200%;aspect-ratio:1/1;border-radius:50%;z-index:2;pointer-events:none;
  background:
    radial-gradient(60% 60% at 50% 30%, #2c5a8e 0%, transparent 60%),
    radial-gradient(120% 80% at 50% 12%, #3f6fae 0%, #173257 38%, #0c1f38 70%);
  box-shadow:0 -2px 0 1px rgba(125,180,226,.4),0 -22px 90px -10px rgba(90,155,212,.6);}
.hero9 .planet::before{content:"";position:absolute;inset:-2px;border-radius:50%;
  box-shadow:0 -10px 70px 8px rgba(125,180,226,.5) inset;opacity:.85}
.hero9 .atmo{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);
  width:130%;height:260px;z-index:2;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%, rgba(150,200,240,.55), transparent 70%);
  filter:blur(6px);animation:atmo 6s ease-in-out infinite}
@keyframes atmo{0%,100%{opacity:.65}50%{opacity:1}}

/* beli preliv na dnu — visok i mek, da nema naglog preseka */
.hero9::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 45%,rgba(255,255,255,.85) 78%,#fff 100%)}

/* ---- SADRZAJ ---- */
.hero9 .h9-inner{position:relative;z-index:5;text-align:center;padding:40px 24px 180px;max-width:1000px;margin:0 auto;width:100%}

/* rotacija poruka — CSS cross-fade, naslagane apsolutno */
.hero9 .slides{position:relative;min-height:320px;margin-bottom:8px;display:flex;align-items:center;justify-content:center}
.hero9 .slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;animation:rotate3 18s infinite}
.hero9 .slide:nth-child(1){animation-delay:0s}
.hero9 .slide:nth-child(2){animation-delay:6s}
.hero9 .slide:nth-child(3){animation-delay:12s}
@keyframes rotate3{
  0%{opacity:0;transform:translateY(14px)}
  3%{opacity:1;transform:translateY(0)}
  30%{opacity:1;transform:translateY(0)}
  36%{opacity:0;transform:translateY(-14px)}
  100%{opacity:0}
}
.hero9 h1{font-family:var(--font-disp);font-weight:800;letter-spacing:-1px;
  font-size:clamp(30px,5vw,60px);line-height:1.08;margin:0 0 14px;
  text-shadow:0 1px 1px rgba(20,48,85,.35),0 3px 10px rgba(20,48,85,.4),0 12px 36px rgba(12,26,46,.45);
  color:#fff !important}
.hero9 h1 *{color:#fff}
.hero9 h1 .kw{position:relative;white-space:nowrap;
  background:linear-gradient(90deg,#17263f,#3f6e92,#17263f);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent !important;animation:kwflow 4.5s linear infinite;
  filter:drop-shadow(0 2px 4px rgba(255,255,255,.35))}
.hero9 h1 .kw::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,#17263f,transparent);opacity:.5;animation:kwbar 4.5s ease-in-out infinite}
@keyframes kwflow{0%{background-position:0 0}100%{background-position:220% 0}}
@keyframes kwbar{0%,100%{opacity:.4;transform:scaleX(.7)}50%{opacity:1;transform:scaleX(1)}}
.hero9 .sub{font-size:clamp(15px,1.9vw,20px);line-height:1.6;color:#fff !important;max-width:620px;margin:0 auto;opacity:.95;text-shadow:0 2px 8px rgba(20,48,85,.4)}

/* rank chip */
.hero9 .rankchip{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.07);
  border:1px solid rgba(125,180,226,.28);border-radius:60px;padding:10px 18px;margin:6px 0 30px;
  font-family:var(--font-disp);font-weight:600;font-size:14px;color:#dbe8f6;backdrop-filter:blur(4px)}
.hero9 .rankchip .pos{font-weight:800;color:#fff;background:linear-gradient(150deg,var(--sky),var(--sky-deep));
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;box-shadow:0 4px 14px -2px rgba(90,155,212,.8)}
.hero9 .rankchip .arrow{color:#4ade80;font-weight:800}

/* dugmad */
.hero9 .h9-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero9 .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-disp);font-weight:800;
  font-size:14.5px;letter-spacing:.04em;padding:17px 36px;border-radius:60px;cursor:pointer;text-decoration:none;
  transition:transform .25s,box-shadow .25s,background .25s;position:relative;overflow:hidden}
.hero9 .btn-primary{background:linear-gradient(150deg,#6fa8da,var(--sky) 45%,var(--sky-deep));color:#fff !important;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 18px 44px -8px rgba(90,155,212,.9),0 6px 18px -6px rgba(20,48,85,.45),0 1px 0 rgba(255,255,255,.4) inset}
.hero9 .btn-primary::before{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);
  animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%{left:-120%}55%,100%{left:160%}}
.hero9 .btn-primary:hover{transform:translateY(-3px);box-shadow:0 26px 60px -8px rgba(90,155,212,1),0 8px 22px -6px rgba(20,48,85,.5)}
.hero9 .btn-ghost{border:1.5px solid rgba(255,255,255,.7);color:#fff !important;background:rgba(255,255,255,.08) !important;
  backdrop-filter:blur(4px);box-shadow:0 16px 40px -10px rgba(20,48,85,.45),0 1px 0 rgba(255,255,255,.25) inset}
.hero9 .btn-ghost:hover{background:#fff !important;color:var(--navy-800) !important;transform:translateY(-3px);
  box-shadow:0 22px 50px -10px rgba(20,48,85,.5)}

@media(max-width:680px){
  .hero9{min-height:80vh}
  .hero9 .h9-inner{padding:30px 18px 120px}
  .hero9 .planet{bottom:-88%}
  .hero9 .slides{min-height:300px}
  /* dugmad: ista sirina, centrirana, jedno ispod drugog */
  .hero9 .h9-cta{flex-direction:column;align-items:center;gap:12px}
  .hero9 .btn{width:100%;max-width:300px;justify-content:center;padding:16px 24px}
}
@media(prefers-reduced-motion:reduce){
  .hero9 *{animation:none!important}
  .hero9 .slide{position:relative;opacity:1}
  .hero9 .slide:nth-child(2),.hero9 .slide:nth-child(3){display:none}
}