/* Jupiter Planet — bazni stilovi */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--step-0); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.08; letter-spacing:-.02em; margin:0 0 .5em; }
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-1); }
p{ margin:0 0 1em; color:var(--muted); }
strong{ color:var(--text); font-weight:600; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.wrap{ width:min(100% - 2.2rem, var(--maxw)); margin-inline:auto; }
.section{ padding-block:clamp(3.5rem, 2rem + 7vw, 7rem); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-size:var(--step--1); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); opacity:.7; }
.lead{ font-size:var(--step-1); color:var(--muted); max-width:60ch; }
.text-gold{ color:var(--gold); }
.center{ text-align:center; }
.center .eyebrow::before{ display:none; }

/* Dugmad */
.btn{
  --b:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.5rem; border-radius:999px; font-family:var(--font-display);
  font-weight:600; font-size:var(--step-0); border:1px solid transparent;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#1a1405; box-shadow:0 10px 30px var(--gold-glow); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px var(--gold-glow); }
.btn-ghost{ border-color:var(--line); color:var(--text); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-lg{ padding:1.05rem 1.9rem; font-size:var(--step-1); }
.btn-block{ width:100%; }

/* Kartice / panovi */
.card{
  background:linear-gradient(180deg, var(--surface), var(--bg-1));
  border:1px solid var(--line); border-radius:var(--radius); padding:var(--pad);
}
.tag{
  display:inline-block; padding:.3rem .7rem; border-radius:999px; font-size:var(--step--1);
  font-weight:600; color:var(--gold); background:rgba(232,178,58,.08); border:1px solid rgba(232,178,58,.25);
}

/* Reveal animacija — sadržaj se skriva SAMO ako JS radi (html.js dodaje header).
   Ako site.js padne, html.reveal-fallback (sigurnosni timeout) ipak sve prikaže,
   pa stranica nikad ne ostane „prazna". */
.reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal{ opacity:0; transform:translateY(22px); }
.reveal.in,
.reveal-fallback .reveal{ opacity:1; transform:none; }

/* Tanka zlatna linija napretka na vrhu */
.scrollbar-top{ position:fixed; top:0; left:0; right:0; height:2px; z-index:200; pointer-events:none;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--gold-soft), var(--gold)); }

/* Zlatna spine linija koja se iscrtava kroz stranicu + svetleća tačka „vodič" */
main{ position:relative; }
.spine{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.spine svg{ width:100%; height:100%; display:block; }
.spine path{ fill:none; stroke:rgba(232,178,58,.5); stroke-width:1.4;
  stroke-dasharray:1; stroke-dashoffset:1; stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(232,178,58,.5)); }
/* Tačka koja klizi niz liniju kako skroluješ — postavlja je site.js (getScreenCTM) */
.spine-dot{ position:fixed; top:0; left:0; width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  border-radius:50%; z-index:-1; pointer-events:none; opacity:0;
  background:radial-gradient(circle, #fff 0%, var(--gold-soft) 40%, var(--gold) 60%, transparent 72%);
  box-shadow:0 0 16px 4px var(--gold-glow); transition:opacity .45s var(--ease); will-change:transform; }
.spine-dot.on{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .spine, .spine-dot{ display:none; } }
/* na jednoj koloni linija seče sadržaj — samo od tablet širine naviše */
@media (max-width:899px){ .spine, .spine-dot{ display:none; } }

/* Grid helpers */
.grid{ display:grid; gap:var(--gap); }
@media (min-width:640px){ .g-2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:880px){ .g-3{ grid-template-columns:repeat(3,1fr); } .g-4{ grid-template-columns:repeat(4,1fr); } }

/* Svemirska pozadina — zlatni odsjaji + zvezde koje nežno trepere i klize + komete */
.starfield{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(232,178,58,.15), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(232,178,58,.08), transparent 60%),
    var(--bg);
}
.starfield::after{
  content:""; position:absolute; inset:-25%; opacity:.5;
  background-repeat:repeat; background-size:340px 340px;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.3px 1.3px at 70% 60%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.7px 1.7px at 40% 80%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 85% 22%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.4px 1.4px at 55% 12%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.2px 1.2px at 12% 66%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.6px 1.6px at 92% 78%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.1px 1.1px at 33% 48%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 78% 38%, rgba(232,178,58,.55), transparent);
}
.starfield i{ position:absolute; width:120px; height:2px; border-radius:2px; opacity:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.8)); transform:rotate(18deg); }
@media (prefers-reduced-motion:no-preference){
  .starfield::after{ animation:starDrift 150s linear infinite, starTwinkle 7s ease-in-out infinite; }
  .starfield i:nth-of-type(1){ top:8%; left:-14%; animation:comet 15s ease-in 4s infinite; }
  .starfield i:nth-of-type(2){ top:42%; left:-14%; width:90px; animation:comet 21s ease-in 12s infinite; }
  @keyframes starDrift{ to{ transform:translate3d(-340px,-340px,0); } }
  @keyframes starTwinkle{ 0%,100%{ opacity:.4; } 50%{ opacity:.62; } }
  @keyframes comet{
    0%{ transform:translate(0,0) rotate(18deg); opacity:0; }
    3%{ opacity:.8; }
    13%{ transform:translate(74vw,32vh) rotate(18deg); opacity:0; }
    100%{ opacity:0; }
  }
}

/* CTA blok — koristi se i na početnoj i na internim stranama (zato je ovde,
   u globalnom base.css, a ne u home.css koji interne strane ne učitavaju). */
.cta{ text-align:center; background:
  radial-gradient(120% 120% at 50% 0%, rgba(232,178,58,.12), transparent 60%),
  linear-gradient(180deg, var(--surface), var(--bg-1));
  border:1px solid var(--line); border-radius:var(--radius-l); padding:clamp(2rem,1rem+5vw,4rem); }
.cta > .lead{ margin-inline:auto; }

/* Cookie banner — deljeni banner je podrazumevano plav; uskladi sa temom sajta.
   CSS banera se ubacuje u <head> tek na kraju, pa override ide sa !important. */
#cc-banner{ background:rgba(13,12,15,.975) !important; border-top-color:var(--gold) !important; color:#e8e4da !important; }
#cc-text{ color:#cdc9bf !important; }
#cc-decline{ background:rgba(245,241,232,.06) !important; border-color:rgba(245,241,232,.16) !important; color:#e8e4da !important; }
#cc-decline:hover{ background:rgba(245,241,232,.12) !important; }