/* ============================================================
   Reset + tipografija + primitivi rasporeda
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Mjesto za klizač je rezervirano stalno: kad zastor zaključa scroll,
     sadržaj se ne pomakne u stranu. */
  scrollbar-gutter: stable;
  /* Sidro ispod fiksne navigacije */
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html.js.is-loading, html.js.is-loading body { overflow: hidden; }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ne dopusti da išta gura vodoravni scroll (viewfinder, marquee) */
body::after { content: ""; display: table; clear: both; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 640;
  margin: 0;
  text-wrap: balance;
  font-optical-sizing: auto;
}

/* Trackanje i prored idu obrnuto od veličine. */
h1 { font-size: var(--step-5); line-height: 0.94; letter-spacing: -0.035em; font-weight: 720; }
h2 { font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.03em;  font-weight: 700; }
h3 { font-size: var(--step-2); line-height: 1.16; letter-spacing: -0.018em; }
h4 { font-size: var(--step-1); line-height: 1.3;  letter-spacing: -0.012em; }

p { margin: 0; max-width: var(--measure); }

a { color: inherit; text-decoration: none; }

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
}
button { cursor: pointer; }

::selection { background: var(--flare-2); color: #fff; }

/* ---- Klizač ----
   Prozirni obrub oko palca daje razmak od ruba i drži je vitkom a da se
   ne gubi hvatište; Firefox ne zna gradijent na klizaču pa dobiva punu
   boju iz iste palete. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 3px solid var(--ink-900);
  background: linear-gradient(180deg, var(--flare-1), var(--flare-2) 55%, var(--flare-3));
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { border-width: 2px; }
::-webkit-scrollbar-corner { background: var(--ink-900); }

/* Chrome zna oboje, a scrollbar-color bi pregazio gradijent — zato samo
   ondje gdje ::-webkit-scrollbar ne postoji (Firefox). */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--flare-2) var(--ink-900); scrollbar-width: thin; }
}

:focus-visible {
  outline: 2px solid var(--flare-1);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Pomoćni ---- */

.u-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.u-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.u-skip {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.65rem 1rem;
  background: var(--ink-700);
  border: 1px solid var(--line-mid);
  border-radius: 10px;
  font-size: var(--step--1);
  transform: translateY(-160%);
  transition: transform var(--dur-menu) var(--ease-out);
}
.u-skip:focus { transform: translateY(0); }

/* Nadnaslov: sitan tekst se otvara, ne steže. */
.u-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.u-eyebrow::before {
  content: "";
  width: 1.75rem; height: 1px;
  background: var(--flare);
  flex: none;
}

.u-lede {
  font-size: var(--step-1);
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: var(--text-2);
}

.u-gradient-text {
  background: var(--flare);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.u-section { padding-block: var(--section-y); position: relative; }
.u-section--alt { background: var(--ink-850); }

/* Topla podloga: ista tinta, ali odmaknuta od plave, plus dva mekana
   žarišta iz gradijenta logotipa. Zasićenje je namjerno nisko — jaki
   gradijent iza teksta bi ga pojeo, a ovako se boja osjeti a tekst drži. */
.u-section--glow {
  background:
    radial-gradient(72% 58% at 8% 0%,   rgb(197 31 160 / 0.18), transparent 68%),
    radial-gradient(64% 56% at 96% 100%, rgb(255 154 46 / 0.15), transparent 68%),
    linear-gradient(165deg, #171220 0%, #141019 48%, #191320 100%);
}

/* Sekcija čiji sadržaj ide do samog ruba: donji razmak preuzima taj sadržaj. */
.u-section--flush { padding-bottom: 0; }

/* Rub sekcije: tanka linija koja se gasi prema krajevima —
   umjesto tvrdog 1px bordera preko cijele širine. */
.u-section--alt::before,
.u-section--alt::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-mid) 22%, var(--line-mid) 78%, transparent);
}
.u-section--alt::before { top: 0; }
.u-section--alt::after  { bottom: 0; }

.u-head {
  display: grid;
  gap: 1.125rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 46rem;
}