/* 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 */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform: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 (suptilna) */
.starfield{ position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(232,178,58,.14), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(232,178,58,.07), transparent 60%),
    var(--bg);
}
.starfield::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 70% 60%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.6px 1.6px at 40% 80%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.1px 1.1px at 85% 20%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.3px 1.3px at 55% 12%, rgba(255,255,255,.4), transparent);
  background-repeat:no-repeat;
}