/* ============================================================
   ZEUS LUXE 1.1
   Samostalni sloj — učitava se NAKON theme.css i nadjačava kaskadu.
   Sadrži: nova pozadina cijele stranice preko 100% širine (lijevo–desno,
   svaki kut, bez praznih crnih bokova), hero preko cijelog ekrana,
   premium glow na Zeusevom logu, čišćenje tipografije, ilustracije i
   animacije. Bez JS-a, bez inline stilova (CSP čisto).
   ============================================================ */

/* ---------- 1. Nova pozadina cijele stranice ----------
   Sve je FIKSNO (position:fixed) pa pokriva točno viewport na svim
   uređajima — uključujući iOS gdje background-attachment:fixed ne radi.
   Nijedan dio ekrana ne smije ostati plosnat i crn. */
:root{
  --bg:#05060d;
  --bg-alt:#090a14;
  --bg-3:#0c0d19;
}

body{ background:#05060d; }

/* Sloj A — glavna pozadina. Puna dijagonala preko svih 100% širine
   + zlatni sjajevi gore-desno i dolje-lijevo + plavi sjajevi gore-lijevo
   i dolje-desno + blagi središnji sjaj. Sva četiri kuta su pokrivena. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1500px 900px at 92% -18%, rgba(232,185,58,.16), transparent 64%),
    radial-gradient(1300px 900px at -6% 112%, rgba(232,185,58,.13), transparent 62%),
    radial-gradient(1100px 780px at -14% -12%, rgba(56,116,224,.09), transparent 64%),
    radial-gradient(1200px 820px at 110% 108%, rgba(56,116,224,.08), transparent 62%),
    radial-gradient(1700px 1040px at 50% 46%, rgba(232,185,58,.05), transparent 70%),
    linear-gradient(158deg,#0c0d1a 0%,#07080f 26%,#05060c 50%,#0a0a16 74%,#06070e 100%);
}

/* Sloj B — fina zlatna mreža preko CIJELOG ekrana + dvije zlatne
   vertikalne šine na rubovima sadržajnog stupca = premium okvir
   koji popunjava bokove i na ultrawide monitorima. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(232,185,58,.55), rgba(232,185,58,.14) 40%, rgba(232,185,58,0) 86%),
    linear-gradient(180deg, rgba(232,185,58,.55), rgba(232,185,58,.14) 40%, rgba(232,185,58,0) 86%);
  background-size:68px 68px, 68px 68px, 1px 100%, 1px 100%;
  background-position:
    left top, left top,
    calc(50% - 640px) top,
    calc(50% + 640px) top;
  background-repeat:repeat, repeat, no-repeat, no-repeat;
  -webkit-mask-image:radial-gradient(150% 130% at 50% 50%, #000 62%, rgba(0,0,0,.55) 100%);
  mask-image:radial-gradient(150% 130% at 50% 50%, #000 62%, rgba(0,0,0,.55) 100%);
  opacity:.72;
}

/* ---------- 2. Alternirajuće sekcije: bogatiji sloj ---------- */
.section-alt{
  background:
    linear-gradient(180deg, rgba(232,185,58,.045), rgba(232,185,58,0) 34%),
    linear-gradient(180deg, var(--bg-alt), var(--bg-3));
  border-top:1px solid rgba(232,185,58,.08);
  border-bottom:1px solid rgba(232,185,58,.05);
}

/* ---------- 3. HERO preko cijelog ekrana (lijevo–desno) ---------- */
.hero{
  max-width:none;
  margin-inline:0;
  min-height:calc(100svh - 80px);
  padding-block:clamp(5.5rem,11vh,8rem);
  padding-left:max(var(--pad), calc((100% - var(--max)) / 2));
  padding-right:max(var(--pad), calc((100% - var(--max)) / 2));
  background:
    radial-gradient(70% 62% at 78% 34%, rgba(232,185,58,.13), transparent 62%),
    radial-gradient(96% 84% at 6% 94%, rgba(56,116,224,.07), transparent 64%),
    radial-gradient(60% 70% at 22% 8%, rgba(232,185,58,.05), transparent 66%),
    linear-gradient(180deg,#06070e 0%,#07080f 56%,#05060c 100%);
}

/* Aureola preko cijelog ekrana, lijevo–desno */
.aurora-v{ inset:0; width:100%; height:100%; opacity:.75; }

/* Traka s riječima ide preko cijelog ekrana (klasičan full-bleed) */
.marquee{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* ---------- 4. Premium logo (desna strana) ---------- */
/* --lw = širina loga. Postavlja se na .hero pa je nasljeđuju i halo i
   orbitalni prsten (svi se drže istoga centra). */
.hero{ --lw:clamp(230px, 25vw, 420px); }

/* Logo je vertikalno centriran u heroju, a HORIZONTALNO mu je centar na
   75% širine heroja — dakle točno u sredini praznog desnog prostora,
   a ne zabetoniran uz sam rub ekrana. */
.hero-mark{
  right:calc(25% - (var(--lw) / 2));
  top:50%;
  transform:translateY(-50%);
  width:var(--lw);
  z-index:1;
  filter:drop-shadow(0 0 24px rgba(232,185,58,.32))
         drop-shadow(0 0 68px rgba(232,185,58,.17))
         drop-shadow(0 22px 46px rgba(0,0,0,.6));
  animation:zeusFloat 9s ease-in-out infinite;
}

/* Zlatna halo-aureola — isti centar kao logo (1.5x širina loga) */
.hero-rays{
  right:calc(25% - ((var(--lw) * 1.5) / 2));
  top:50%;
  transform:translateY(-50%);
  width:calc(var(--lw) * 1.5);
  aspect-ratio:1;
  border-radius:50%;
  opacity:.6;
  filter:blur(7px);
  background:conic-gradient(from 0deg,
    rgba(232,185,58,0) 0deg, rgba(232,185,58,.24) 36deg, rgba(232,185,58,0) 96deg,
    rgba(232,185,58,.14) 184deg, rgba(232,185,58,0) 246deg, rgba(232,185,58,.18) 322deg,
    rgba(232,185,58,0) 360deg);
  -webkit-mask-image:radial-gradient(circle, #000 16%, transparent 66%);
  mask-image:radial-gradient(circle, #000 16%, transparent 66%);
  animation:zeusHalo 44s linear infinite;
  z-index:1;
}

/* Orbitalni prsten (SVG) — isti centar kao logo (1.25x širina loga) */
.hero-ornament{
  left:auto;
  right:calc(25% - ((var(--lw) * 1.25) / 2));
  top:50%;
  width:calc(var(--lw) * 1.25);
  height:auto;
  aspect-ratio:1;
  transform:translateY(-50%);
  opacity:.36;
  z-index:0;
  filter:drop-shadow(0 0 18px rgba(232,185,58,.25));
}
.hero-ornament svg{ width:100%; height:100%; }

@keyframes zeusFloat{
  0%,100%{ transform:translateY(-50%) translateZ(0); }
  50%    { transform:translateY(calc(-50% - 14px)) translateZ(0); }
}
@keyframes zeusHalo{
  from{ transform:translateY(-50%) rotate(0deg); }
  to  { transform:translateY(-50%) rotate(360deg); }
}

/* ---------- 5. Tipografija: čišćenje ---------- */
.hero-title{
  letter-spacing:-.03em;
  line-height:1.02;
  text-wrap:balance;
}
.hero-title .line{
  overflow:visible;
}
.hero-title .outline{
  -webkit-text-stroke:1.15px rgba(246,216,117,.72);
  color:transparent;
}
.hero-eyebrow{
  letter-spacing:.26em;
  font-size:.74rem;
}
.hero-sub{
  max-width:min(56ch, 62%);
  color:#b9b7ca;
}
/* Mikrocopy ispod gumbija: što je uključeno u razgovor. Iznad logotipa
   (z-index:2) kao i ostatak teksta heroja. */
.hero-micro{
  position:relative;
  z-index:2;
  margin:.95rem 0 0;
  max-width:min(58ch,62%);
  font-size:.78rem;
  line-height:1.55;
  letter-spacing:.01em;
  color:var(--muted);
  opacity:.88;
}

/* ---------- 6. Gumbi: premium zlatni sjaj ---------- */
.btn-primary{
  background:linear-gradient(180deg,#f6d875,#e8b93a 56%,#c7971d);
  color:#0a0a10;
  box-shadow:0 10px 30px rgba(232,185,58,.22), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 46px rgba(232,185,58,.34), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-ghost{
  border-color:rgba(232,185,58,.3);
  transition:border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.btn-ghost:hover{
  border-color:rgba(232,185,58,.6);
  background-color:rgba(232,185,58,.06);
  transform:translateY(-2px);
}

/* ---------- 7. Zaglavlje: usklađeno s novom pozadinom ---------- */
.site-head{
  background:rgba(5,6,13,.66);
  border-bottom:1px solid rgba(232,185,58,.09);
}
.brand-logo{
  filter:drop-shadow(0 0 12px rgba(232,185,58,.3));
}

/* ---------- 8. Osjetljivi ekrani — logo DESNO i centriran u praznini ---------- */

/* Tablet / manji laptop: logo ostaje na istom mjestu (centar na 75%
   širine heroja, vertikalno centriran), samo je manji. --lw mijenja i
   veličinu i poziciju pa se logo, halo i prsten drže zajedno. */
@media (max-width:1180px){
  .hero{ --lw:clamp(190px, 24vw, 320px); }
  .hero-mark{
    display:block;
    opacity:.95;
    z-index:1;
    filter:drop-shadow(0 0 24px rgba(232,185,58,.36))
           drop-shadow(0 0 56px rgba(232,185,58,.16));
  }
  .hero-rays{ opacity:.5; }
  .hero-ornament{ opacity:.3; }
}

/* Mobitel: hero postaje MREŽA (grid) — tekst u lijevu kolonu, logo u
   desnu, a logo je vertikalno centriran TOČNO uz naslov (redovi 1–2).
   Podnaslov, gumbi i traka ostaju preko cijele širine ispod. Grid
   garantira da se logo i tekst nikad ne preklope, a logo je uvijek
   vidljiv (nadjačava site.css display:none koji ga je skrivao). */
@media (max-width:860px){
  .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(.75rem,4vw,1.5rem);
    align-content:center;
    padding-block:6rem 3rem;
    --lw:clamp(104px, 30vw, 150px);
  }
  .hero-eyebrow,.hero-title,.hero-sub,.hero-cta,.hero-micro{
    padding-inline:0;
  }
  .hero > .hero-eyebrow{ grid-column:1; margin-bottom:.75rem; }
  .hero > .hero-title{ grid-column:1; }
  .hero > .hero-sub{ grid-column:1 / -1; }
  .hero > .hero-cta{ grid-column:1 / -1; }
  .hero > .hero-micro{ grid-column:1 / -1; }
  .hero > .marquee{ grid-column:1 / -1; }
  .hero > .hero-mark{
    display:block;
    grid-column:2;
    grid-row:1 / span 2;
    align-self:center;
    justify-self:center;
    position:static;
    top:auto;right:auto;
    transform:none;
    margin:0;
    opacity:1;
    z-index:1;
    filter:drop-shadow(0 0 22px rgba(232,185,58,.42))
           drop-shadow(0 0 52px rgba(232,185,58,.18));
    animation:zeusFloatSm 8s ease-in-out infinite;
  }
  .hero-title{
    font-size:clamp(2.6rem, 11.5vw, 3.5rem);
    line-height:1.04;
  }
  .hero-sub{
    font-size:1rem;
    max-width:none;
  }
  .hero-rays{ display:none; }
  .hero-ornament{ display:none; }
}

/* Niski ekrani (mobitel u landscapeu): logo ipak vidljiv, samo manji.
   Ne dira poziciju — samo veličinu. Nadjačava site.css display:none. */
@media (max-height:620px){
  .hero{ --lw:clamp(96px, 13vw, 170px); }
  .hero-mark{ display:block; }
  .hero-ornament{ display:none; }
}

/* Animacija za logo kada nije vezan na translateY(-50%) (mobitel/grid). */
@keyframes zeusFloatSm{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-10px); }
}

/* ---------- 9. Smanjena animacija ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-mark,.hero-rays{ animation:none !important; }
}

/* ---------- 10. Ilustracije i animacije ----------
   CSP-sigurno (bez inline stilova) i perf-pametno: beskonačne
   animacije diraju SAMO transform/opacity (compositor). */

/* Živa aurora u pozadini heroja — sporo plovi */
.aurora-v{
  animation:auroraDrift 28s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes auroraDrift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-2.2%, 1.4%, 0) scale(1.045); }
}

/* Zlatna prašina: točkice koje plutaju u heroju (ilustracijski sloj) */
.aurora-v::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(246,216,117,.9) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(232,185,58,.7) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(246,216,117,.55) 0 1.2px, transparent 2px),
    radial-gradient(circle, rgba(232,185,58,.45) 0 1px, transparent 1.6px);
  background-size:340px 340px, 260px 260px, 420px 420px, 300px 300px;
  background-position:12% 24%, 68% 62%, 84% 18%, 32% 78%;
  animation:dustFloat 24s ease-in-out infinite alternate;
  opacity:.5;
}
@keyframes dustFloat{
  from{ transform:translate3d(0,0,0); opacity:.32; }
  to  { transform:translate3d(1.4%,-3%,0); opacity:.62; }
}

/* Zlatni sjaj koji prelazi preko ključne riječi u naslovu */
.hero-title .accent{
  background:linear-gradient(100deg,#f6d875 0%,#fff3cf 24%,#e8b93a 48%,#f6d875 72%,#fff3cf 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:goldSweep 9s linear infinite;
}
@keyframes goldSweep{
  from{ background-position:0% 50%; }
  to  { background-position:280% 50%; }
}

/* Svjetlosni prijelaz preko primarnog gumba (samo na hover) */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:"";position:absolute;top:0;bottom:0;left:-65%;width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-18deg);
  transition:left .55s var(--ease);
  pointer-events:none;
}
.btn-primary:hover::after{ left:125%; }

/* Rub alternirajućih sekcija dobije topliji sjaj (jednokratni prijelaz,
   ne beskonačan — da nema repainta preko cijele širine) */
.section-alt{ transition:border-top-color .6s var(--ease); }
.section-alt:hover{ border-top-color:rgba(232,185,58,.2); }

@media (prefers-reduced-motion: reduce){
  .aurora-v,.aurora-v::after,.hero-title .accent{ animation:none !important; }
  .btn-primary::after{ display:none; }
}

/* ---------- 11. Jasni uvjeti (paketa C) ----------
   Tri kartice pod tabelom cijena: što je u pretplati, što nije i dok
   traje. auto-fit mreža — bez media queryja i bez JS-a. Liste posuđuju
   .plan-list, pa je marker identičan onome u cijenama. Naslov bloka
   prati .calc-head h3 iz iste sekcije. */
.terms-title{
  margin:clamp(2rem, 5vh, 3rem) 0 0;
  font-size:clamp(1.25rem, 2.5vw, 1.8rem);
  font-weight:750;
  letter-spacing:-.025em;
  color:var(--text);
}
.terms{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(232px, 1fr));
  gap:clamp(.75rem, 2vw, 1rem);
  margin-top:1rem;
}
.terms .term{
  border:1px solid var(--border-soft);
  border-radius:var(--r);
  background:rgba(255,255,255,.02);
  padding:clamp(1rem, 2.4vw, 1.25rem);
}
.terms .term h3{
  margin:0 0 .85rem;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--text);
}
.terms .term .plan-list{ margin-bottom:0; gap:.6rem; }
.terms .term .plan-list li{ font-size:.86rem; line-height:1.5; }

/* Isključenosti: isti marker, samo šuplji — da se „nije uključeno"
   ne čita kao još jedna lista pogodnosti. */
.term--excl .plan-list li::before{
  background:none;
  border:1px solid rgba(232,185,58,.65);
  box-shadow:none;
}


/* ── 12. Hero naslov + SEO tekstni blokovi (17.10.2026.) ─────────────
   Naslov u heroju nosi ključne riječi (izrada web stranica, SEO,
   zaštita podataka) i NE dira brend-h1 ni raspored heroja. */
.hero-heading{
  max-width:52ch;
  margin:0 0 clamp(.5rem,1.2vh,.9rem);
  font-size:clamp(.92rem,1.15vw,1.1rem);
  font-weight:600;
  line-height:1.35;
  letter-spacing:.005em;
  color:var(--ivory);
  text-wrap:balance;
}
/* Naslov u heroju ne smije gurnuti hero preko jednog ekrana, pa skupljamo
   razmak ispod brend-h1 za isto koliko naslov zauzme. */
.hero .hero-title{ margin-bottom:clamp(.7rem,2.2vh,1.35rem); }
/* SEO tekstni blok: običan tok — ne dira postojeće mreže kartica. */
.seo-text{
  max-width:70ch;
  margin:clamp(1.6rem,3vw,2.6rem) auto 0;
}
.seo-text h3{
  margin:0 0 .75rem;
  font-size:clamp(1.1rem,1.6vw,1.4rem);
  font-weight:700;
  line-height:1.3;
  color:var(--ivory);
}
.seo-text p{
  margin:0 0 1rem;
  color:var(--muted);
  line-height:1.72;
}
.seo-text p:last-child{ margin-bottom:0; }

@media print{
  .hero-heading,.seo-text{ break-inside:avoid; }
}