/* Početna biznisidigital.com. Tema preko scrollcraft tokena + kompozicija stranice.
   Mehanizam (.sc-stage, [data-sc-*]) se ne restiluje ovde. */

:root {
  --sc-canvas:     #070C18;
  --sc-surface:    #0F1A2E;
  --sc-ink:        #F2F5FA;
  --sc-ink-soft:   #A9B6CC;
  --sc-accent:     #5B9DFF;
  --sc-accent-ink: #04101F;
  --sc-font-display: "Space Grotesk", system-ui, sans-serif;
  --sc-font-text:    "Inter", system-ui, sans-serif;
  --sc-font-mono:    "Inter", system-ui, sans-serif;
  --sc-shadow-color: 222 60% 3%;
  --btn: #1B5FCB;
  --btn-hover: #1A58BD;
  --bar-h: 64px;
  --rad: 12px;
}

/* Tamni tekst ima malo više vazduha (taste: svetlo na tamnom). */
body { letter-spacing: 0; line-height: 1.66; }
h1, h2, h3, p { margin: 0; }
.sc-display { font-weight: 600; }

/* ------------------------------------------------------------- chrome -- */
.skip {
  position: absolute; left: var(--sc-gutter); top: -100px; z-index: 100;
  background: var(--sc-ink); color: var(--sc-canvas); padding: .6rem 1rem; border-radius: var(--rad);
}
.skip:focus { top: .75rem; }

.ann {
  position: relative; z-index: 61;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem 1rem;
  padding: .6rem var(--sc-gutter);
  background: var(--btn); color: #fff; font-size: var(--sc-t-sm); line-height: 1.4; text-align: center;
}
.ann__tag { font-weight: 600; margin-right: .35rem; }
.ann__cta { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
.ann__cta:hover { text-decoration-thickness: 2px; }
.ann__cta:focus-visible { outline-color: #fff; }

.bar {
  position: sticky; top: 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding-inline: var(--sc-gutter);
  transition: background-color 200ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out);
}
.bar.is-solid {
  background: color-mix(in oklab, var(--sc-canvas) 90%, transparent);
  box-shadow: 0 1px 0 var(--sc-hairline);
}
.bar__mark { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.bar__mark img { width: 36px; height: 36px; }
.bar__nav { display: flex; gap: clamp(1rem, 2.4vw, 2rem); margin-left: auto; font-size: var(--sc-t-sm); }
.bar__nav a { text-decoration: none; color: var(--sc-ink-soft); transition: color 150ms var(--sc-ease-out); }
.bar__nav a:hover { color: var(--sc-ink); }
main { margin-top: calc(var(--bar-h) * -1); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.1rem; padding: 0 1.5rem; border: 1px solid transparent; border-radius: var(--rad);
  background: var(--btn); color: #fff;
  font-weight: 600; font-size: var(--sc-t-sm); white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / .16);
  transition: background-color 150ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), box-shadow 150ms var(--sc-ease-out);
}
.btn:hover { background: var(--btn-hover); box-shadow: var(--sc-e3), inset 0 1px 0 rgb(255 255 255 / .16); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn--ghost { background: transparent; border-color: var(--sc-hairline-strong); box-shadow: none; color: var(--sc-ink); }
.btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); box-shadow: none; }
.btn--sm { height: 2.5rem; padding: 0 1.05rem; }
.bar .btn--sm { margin-left: clamp(0rem, 1vw, .5rem); }
.link { color: var(--sc-accent); font-weight: 500; }

/* --------------------------------------------------------------- hero -- */
.hero__stage {
  perspective: 1100px; perspective-origin: 50% 46%;
  background:
    radial-gradient(70% 60% at 72% 40%, #13254a 0%, transparent 70%),
    radial-gradient(60% 50% at 10% 90%, #0d1a35 0%, transparent 70%),
    var(--sc-canvas);
}
.cloud { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.ph {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: calc(var(--w) * 1vw);
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--x) * 1vw), calc(var(--y) * 1vh), calc(var(--z) * 1px))
    rotate(calc(var(--r, 0) * 1deg));
}
.ph img {
  width: 100%; height: auto; border-radius: var(--rad);
  box-shadow: var(--sc-e3), 0 0 0 1px rgb(255 255 255 / .06);
}
/* Udaljenost = manje, tamnije, mekše. */
.ph--far img { filter: brightness(.62) saturate(.8) blur(1.2px); }
.ph--mid img { filter: brightness(.86) saturate(.92); }

.p1 { --x: 21;  --y: -6;  --z: -260;  --w: 32; }
.p2 { --x: 37;  --y: 31;  --z: 230;   --w: 22; --r: 3; }
.p3 { --x: 13;  --y: 35;  --z: -40;   --w: 15; --r: -2; }
.p4 { --x: 41;  --y: -31; --z: -720;  --w: 20; --r: 2; }
.p5 { --x: 19;  --y: -38; --z: -1050; --w: 18; --r: -3; }
.p6 { --x: 30;  --y: 36;  --z: -1300; --w: 22; --r: 2; }
.p7 { --x: 25;  --y: -27; --z: 170;   --w: 15; --r: -4; }
.p8 { --x: 13;  --y: -31; --z: -500;  --w: 13; --r: 1; }
.p9 { --x: 47;  --y: 6;   --z: -560;  --w: 9;  --r: 1; }

.hero__plane { position: absolute; inset: 0; transform: translateZ(0); pointer-events: none; }
.hero__plane::before { /* kolona gustine ispod teksta, ne preko cele fotke */
  content: ""; position: absolute; left: 0; bottom: 0; width: 70%; height: 80%;
  background: radial-gradient(85% 75% at 12% 92%, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 60%, transparent) 45%, transparent 75%);
}
.hero__copy {
  position: absolute; left: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 7rem);
  max-width: min(44rem, 56vw); pointer-events: auto;
}
.hero__title { text-shadow: 0 2px 28px rgb(4 8 18 / .55); font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.6rem); line-height: .98; letter-spacing: -0.035em; max-width: 13ch; }
.hero__sub { margin-top: var(--sc-5); max-width: 40ch; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.5; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--sc-6); }
.hero__beat-wrap { position: absolute; right: var(--sc-gutter); top: 50%; translate: 0 -50%; max-width: min(34rem, 80vw); pointer-events: none; z-index: 5; }
.hero__beat { font-size: var(--sc-t-2xl); line-height: 1.08; letter-spacing: -0.02em; text-align: right; text-shadow: 0 2px 24px rgb(4 8 18 / .7); }

/* ---------------------------------------------------------- šta radimo -- */
.what__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.what__intro { position: sticky; top: calc(var(--bar-h) + 2rem); }
.formats { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.formats li { border-bottom: 1px solid var(--sc-hairline); }
.fmt {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: .35rem 1.5rem;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) 0; text-decoration: none;
}
.fmt__name { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: -0.02em; line-height: 1.1; transition: transform 200ms var(--sc-ease-out), color 160ms; }
.fmt__desc { grid-column: 1; color: var(--sc-ink-soft); max-width: 46ch; }
.fmt__facts { grid-column: 2; grid-row: 1; align-self: center; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fmt__img {
  position: absolute; right: 0; top: 50%; width: 9.5rem; height: 6.4rem; object-fit: cover; border-radius: var(--rad);
  opacity: 0; transform: translate(-1rem, -50%) rotate(-3deg) scale(.95); pointer-events: none;
  box-shadow: var(--sc-e3);
  transition: opacity 180ms var(--sc-ease-out), transform 260ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fmt:hover .fmt__name { transform: translateX(.4rem); color: #fff; }
  .fmt:hover .fmt__img { opacity: 1; transform: translate(-2.5rem, -50%) rotate(-3deg) scale(1); }
  .fmt:hover .fmt__facts { opacity: 0; }
}
.fmt:focus-visible { outline-offset: 6px; }

/* ------------------------------------------------------------ događaji -- */
.events__stage { display: flex; align-items: center; perspective: 1500px; padding-top: var(--bar-h); }
.rail { align-items: center; gap: clamp(3.5rem, 7vw, 7.5rem); padding-inline: var(--sc-gutter); }
.rail__lead { flex: 0 0 min(26rem, 78vw); display: grid; gap: var(--sc-5); }
.rail__end { flex: 0 0 min(22rem, 70vw); display: grid; gap: var(--sc-5); justify-items: start; padding-right: var(--sc-gutter); }
.ev { flex: 0 0 min(40rem, 84vw); transform-style: preserve-3d; will-change: transform; }
.ev__media {
  display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; gap: .6rem;
  height: min(44vh, 25rem); transform-style: preserve-3d;
}
.ev__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rad); box-shadow: var(--sc-e2); }
.ev__a { grid-row: 1 / span 2; }


.ev__title { margin-top: var(--sc-5); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: -0.02em; line-height: 1.1; }
.ev__title span { color: var(--sc-ink-soft); font-weight: 500; }
.ev__facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: .2rem 2rem; margin: var(--sc-4) 0 0; }
.ev__facts div { min-width: 0; }
.ev__facts dt { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.ev__facts dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.ev__link { display: inline-block; margin-top: var(--sc-4); color: var(--sc-accent); font-weight: 500; font-size: var(--sc-t-sm); }

/* ------------------------------------------------------------- vrhunac -- */
.peak__stage { background: #050912; }
.mosaic {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 175svh); aspect-ratio: 2100 / 1200;
  translate: -50% -50%;
}
.mosaic.is-live { left: 0; top: 0; translate: none; transform-origin: 0 0; will-change: transform; }
.mosaic__img { width: 100%; height: 100%; }
.mosaic__slot {
  position: absolute;
  left: calc(100% * 8 / 14); top: calc(100% * 6 / 12);
  width: calc(100% / 14); height: calc(100% / 12);
  display: grid; place-items: center; text-align: center;
  background: #0B1424; color: var(--sc-ink);
  outline: 2px dashed var(--sc-accent); outline-offset: -5px; border-radius: 4px;
  font: 600 clamp(.62rem, .5rem + .25vw, .8rem)/1.1 var(--sc-font-display); letter-spacing: .02em;
  text-decoration: none;
}
.mosaic__slot:hover { background: #10213f; }
.peak__face {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 0 0; will-change: transform, opacity; opacity: 0;
}
.peak__scrim { z-index: 2; opacity: var(--end-scrim, 0); }
.peak__quiet {
  position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%;
  width: min(30rem, 84vw); text-align: center;
  color: var(--sc-ink-soft); font-size: var(--sc-t-lg);
}
.peak__line {
  position: absolute; z-index: 3; left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 8rem);
  font-size: var(--sc-t-3xl); line-height: 1; text-shadow: 0 2px 30px rgb(3 6 14 / .65);
}
.peak__end { position: absolute; z-index: 3; left: var(--sc-gutter); bottom: clamp(3rem, 11vh, 7rem); max-width: min(46rem, 86vw); }
.peak__end h2 { text-shadow: 0 2px 30px rgb(3 6 14 / .6); }
.peak__you { margin-top: var(--sc-4); font-size: var(--sc-t-xl); font-family: var(--sc-font-display); font-weight: 500; color: var(--sc-accent); }

/* ----------------------------------------------------------- predavači -- */
.speakers__wrap { perspective: 1400px; }
.speakers__head { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.wall {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(1.4rem, 2.4vw, 2.4rem) clamp(.8rem, 2vw, 2rem);
  transform-style: preserve-3d; transform-origin: 50% 0;
}
.face { margin: 0; text-align: center; transform: translateZ(calc(var(--d) * 12px)); }
.face img {
  width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%;
  box-shadow: var(--sc-e2), 0 0 0 1px rgb(255 255 255 / .08);
  background: var(--sc-surface);
}
.face span { display: block; margin-top: .7rem; font-size: var(--sc-t-sm); line-height: 1.3; color: var(--sc-ink); }

/* ------------------------------------------------------ prijava + kraj -- */
.close__stage {
  display: grid; grid-template-rows: 1fr auto;
  background: radial-gradient(60% 70% at 78% 30%, #10224a 0%, transparent 70%), var(--sc-canvas);
}
.close__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center;
  gap: clamp(2rem, 5vw, 5rem); padding: calc(var(--bar-h) + 1rem) var(--sc-gutter) 0; min-height: 0;
}
.close__copy { display: grid; gap: var(--sc-5); max-width: 36rem; }
.notify { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: .75rem; align-items: end; margin-top: var(--sc-3); }
.field { display: grid; gap: .35rem; }
.field label { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: .04em; }
.field input {
  height: 3.1rem; padding: 0 1rem; border-radius: var(--rad);
  border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface); color: var(--sc-ink);
  box-shadow: var(--sc-edge);
  transition: border-color 150ms var(--sc-ease-out), background-color 150ms var(--sc-ease-out);
}
.field input:hover { border-color: color-mix(in oklab, var(--sc-ink) 34%, transparent); }
.field input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: transparent; }
.field input[aria-invalid="true"] { border-color: #ff8a8a; }
.notify__status { grid-column: 1 / -1; min-height: 1.4em; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.notify__status.is-error { color: #ff9c9c; }
.notify__status.is-ok { color: #9fd0ff; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fine { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

.rig { position: relative; height: 100%; min-height: 0; }
.rig__swing {
  position: absolute; left: 50%; top: calc(var(--bar-h) * -1 - 1rem);
  width: 16rem; margin-left: -8rem;
  transform-origin: 50% 0; will-change: transform;
}
.strap { display: block; width: 7.5rem; height: 38vh; margin-inline: auto; overflow: visible; }
.strap__band { stroke: #1B5FCB; stroke-width: 22; fill: none; }
.strap__txt { fill: rgb(255 255 255 / .85); font: 700 9px/1 var(--sc-font-display); letter-spacing: .14em; }
.clip {
  width: 2.6rem; height: 1.7rem; margin: -.4rem auto 0; position: relative; z-index: 2;
  border-radius: 6px 6px 10px 10px;
  background: linear-gradient(180deg, #dfe5ee, #8f9bb0); box-shadow: 0 3px 6px rgb(0 0 0 / .35), inset 0 1px 0 #fff;
}
.badge {
  position: relative; width: 16rem; aspect-ratio: 3 / 4.15; margin-top: -.5rem;
  transform-style: preserve-3d; transition: transform 800ms var(--sc-ease-out);
}
.badge.is-flipped { transform: rotateY(180deg); }
.badge__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f8 100%);
  color: #0B1424;
  box-shadow: 0 6px 12px rgb(2 6 16 / .35), 0 30px 60px -12px rgb(2 6 16 / .6), inset 0 1px 0 #fff;
  display: grid; grid-template-rows: auto auto 1fr auto; padding: 0 0 1.1rem;
}
.badge__face::before { /* rupa za kopču */
  content: ""; position: absolute; left: 50%; top: .55rem; width: 2.2rem; height: .45rem; margin-left: -1.1rem;
  border-radius: 99px; background: #0B1424; opacity: .85; z-index: 2;
}
.badge__top {
  display: flex; align-items: center; gap: .55rem; padding: 1.5rem 1.1rem 1rem;
  background: #0B1424; color: #fff; font-family: var(--sc-font-display); font-weight: 600; font-size: .95rem;
}
.badge__top img { width: 30px; height: 30px; }
.badge__role {
  margin: 1rem 1.1rem 0; justify-self: start;
  padding: .2rem .55rem; border-radius: 6px; background: #1B5FCB; color: #fff;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.badge__name {
  align-self: center; padding: 0 1.1rem;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 2.1rem; line-height: 1.02; letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.badge__name.is-empty { color: #8b97ab; }
.badge__event { padding: 0 1.1rem; font-size: .78rem; color: #3b4a63; border-top: 1px solid #d5dce8; padding-top: .8rem; margin-inline: 1.1rem; padding-inline: 0; }
.badge__back { transform: rotateY(180deg); grid-template-rows: 1fr auto; background: linear-gradient(180deg, #1B5FCB 0%, #123f8a 100%); color: #fff; }
.badge__back .badge__event { color: rgb(255 255 255 / .8); border-top-color: rgb(255 255 255 / .25); }
.badge__thanks { align-self: center; padding: 2rem 1.1rem 0; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.9rem; line-height: 1.05; letter-spacing: -0.02em; }

.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 2rem;
  padding: 1.2rem var(--sc-gutter) calc(1.2rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.foot a { color: var(--sc-ink-soft); text-decoration: none; }
.foot a:hover { color: var(--sc-ink); text-decoration: underline; }
.foot__meta { margin-left: auto; }

/* --------------------------------------------------------------- mobil -- */
@media (max-width: 860px) {
  .bar__nav { display: none; }
  .bar .btn--sm { margin-left: auto; }
  .what__grid { grid-template-columns: 1fr; }
  .what__intro { position: static; }
  .fmt { grid-template-columns: 1fr; }
  .fmt__facts { grid-column: 1; grid-row: auto; }
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .close__grid { grid-template-columns: 1fr; padding-top: 0; }
  .rig { order: -1; height: 26.5rem; }
  .rig__swing { top: 0; width: 12rem; margin-left: -6rem; }
  .strap { height: 7rem; width: 6rem; }
  .badge { width: 12rem; }
  .badge__name { font-size: 1.6rem; }
  .badge__thanks { font-size: 1.45rem; }
  .notify { grid-template-columns: 1fr; }
  .notify .btn { width: 100%; }
  .foot__meta { margin-left: 0; }
  .close__stage { padding-bottom: 1rem; }
}

@media (max-width: 760px) {
  .ph { width: calc(var(--mw, var(--w)) * 1vw); transform:
    translate(-50%, -50%)
    translate3d(calc(var(--mx, var(--x)) * 1vw), calc((var(--my, var(--y)) + var(--yshift, 0)) * 1vh), calc(var(--z) * 1px))
    rotate(calc(var(--r, 0) * 1deg)); }
  .p1 { --mx: 10;  --my: -20; --mw: 70; }
  .p2 { --mx: 30;  --my: -1;  --mw: 44; }
  .p3 { --mx: -26; --my: -27; --mw: 38; --z: 90; }
  .p5 { --mx: 30;  --my: -40; --mw: 38; }
  .p6 { --mx: -30; --my: -10; --mw: 44; }
  .p4, .p7, .p8, .p9 { display: none; }
  .hero__plane::before { width: 100%; height: 70%; background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 95%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 80%, transparent) 50%, transparent 100%); }
  .hero__copy { right: var(--sc-gutter); max-width: none; bottom: max(1.5rem, env(safe-area-inset-bottom)); }
  .hero__title { font-size: clamp(2.3rem, 9.6vw, 3rem); }
  .hero__sub { font-size: var(--sc-t-base); }
  .hero__beat-wrap { left: var(--sc-gutter); right: var(--sc-gutter); top: auto; bottom: 18vh; translate: none; }
  .hero__beat { font-size: var(--sc-t-xl); text-align: left; }
  .ev__media { height: 38vh; }
  .ev__facts { grid-template-columns: repeat(2, auto); gap: .5rem 1.6rem; }
  .peak__line { font-size: var(--sc-t-2xl); }
}

@media (prefers-reduced-motion: reduce) {
  .badge { transition-duration: 1ms; }
  .fmt__img, .fmt__name { transition: none; }
}

.rail { transform-style: preserve-3d; }
.rig { perspective: 900px; }
.rig__swing { transform-style: preserve-3d; }

/* Paneli sa vertikalnim izvorima (Instagram): tri jednake kolone, bez razvlačenja malih fotki. */
.ev--tall .ev__media { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; }
.ev--tall .ev__a { grid-row: auto; }

/* Scrim iza drugog teksta u heroju (JS ga pali zajedno sa tekstom). */
.hero__beat-wrap::before {
  content: ""; position: absolute; inset: -40% -30% -40% -60%; z-index: -1; opacity: var(--beat-scrim, 0);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 55%, transparent 100%);
}
/* Vrhunac: kolona gustine levo, gde je tekst; prazno mesto (desno od centra) ostaje čisto. JS je pali. */
.peak__scrim { background: linear-gradient(to right, rgb(5 9 18 / .95) 0%, rgb(5 9 18 / .9) 44%, rgb(5 9 18 / .55) 53%, transparent 62%); }
@media (max-width: 760px) {
  .peak__scrim { background: linear-gradient(to top, rgb(5 9 18 / .96) 0%, rgb(5 9 18 / .9) 32%, rgb(5 9 18 / .45) 44%, transparent 54%); }
}

/* Baner na telefonu: jedan red, da hero i dugmad ostanu u prvom ekranu. */
@media (max-width: 760px) {
  .ann { flex-wrap: nowrap; justify-content: space-between; text-align: left; font-size: .8125rem; padding-block: .55rem; }
  .ann__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ann__tag { display: none; }
  .has-ann .hero__copy { bottom: calc(max(1.5rem, env(safe-area-inset-bottom)) + 2.6rem); }
}

/* --------------------------------------------------------- organizatori -- */
.org { overflow-x: clip; } /* svetlo iza fotke (::before) ne sme da proširi stranicu na telefonu */
.org__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 6vw, 7rem); }
.org__photo { position: relative; margin: 0; justify-self: center; width: min(30rem, 100%); }
.org__photo::before { /* svetlo bine iza ljudi */
  content: ""; position: absolute; inset: 8% -12% 10%; z-index: -1;
  background: radial-gradient(closest-side, #1a3466 0%, rgb(19 37 74 / .55) 45%, transparent 100%);
}
.org__reveal { border-bottom: 1px solid var(--sc-hairline-strong); }
.org__reveal img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(to left, transparent 0, #000 7%); mask-image: linear-gradient(to left, transparent 0, #000 7%); }
.org__names {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: var(--sc-4);
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: -0.01em; line-height: 1.2;
}
.org__names span:first-child { padding-left: 4%; }
.org__names span:last-child { text-align: right; padding-right: 2%; }
.org__eyebrow { font-size: var(--sc-t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); font-weight: 600; }
.org__copy { max-width: 32rem; }
.org__copy .sc-display + .sc-body { margin-top: var(--sc-5); }
@media (max-width: 860px) {
  .org__grid { grid-template-columns: 1fr; }
  .org__copy { order: -1; }
}

/* --------------------------------------------------------- zašto uživo -- */
.why { padding-top: 0; }
.why__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.why__text .sc-lede { max-width: 40rem; color: var(--sc-ink-soft); }
.gains {
  list-style: none; margin: clamp(2.5rem, 4vw, 3.5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.8rem, 3vw, 2.6rem) clamp(1.5rem, 3.5vw, 3.5rem);
}
.gains li { border-top: 1px solid var(--sc-hairline-strong); padding-top: 1.1rem; }
.gains h3, .for-whom h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: -0.015em; line-height: 1.2; }
.gains p { margin-top: .45rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; max-width: 34ch; }
.for-whom { margin-top: clamp(2.8rem, 5vw, 4rem); max-width: 44rem; }
.for-whom p { margin-top: .6rem; color: var(--sc-ink-soft); }
.why__photo { position: sticky; top: calc(var(--bar-h) + 2rem); margin: 0; }
.why__photo img { width: 100%; height: auto; border-radius: var(--rad); box-shadow: var(--sc-e3); }
.why__photo figcaption { margin-top: .7rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .why__grid { grid-template-columns: 1fr; }
  .why__photo { position: static; order: -1; max-width: 26rem; }
  .gains { grid-template-columns: 1fr; }
}

/* ---------------------------------------------- baner sa slikom (promo) -- */
.promo { --promo-h: 112px; position: relative; z-index: 61; background: #060b17; border-bottom: 1px solid var(--sc-hairline); }
.promo__link {
  position: relative; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--promo-h); padding: .9rem var(--sc-gutter); overflow: hidden; isolation: isolate;
  text-decoration: none; color: var(--sc-ink);
}
.promo__img {
  position: absolute; right: 0; top: 0; z-index: -2; width: 62%; height: 100%;
  object-fit: cover; object-position: 72% 48%;
  transition: transform 600ms var(--sc-ease-out);
}
.promo__link::before { /* tamno levo, slika se stapa sa podlogom */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, #060b17 0%, #060b17 38%, rgb(6 11 23 / .82) 50%, rgb(6 11 23 / .25) 72%, rgb(6 11 23 / .15) 100%);
}
.promo__copy { display: grid; gap: .15rem; min-width: 0; }
.promo__tag { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-accent); }
.promo__title { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.15; }
.promo__text { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 62ch; }
.promo__cta {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .45rem;
  height: 2.75rem; padding: 0 1.2rem; border-radius: var(--rad);
  background: var(--btn); color: #fff; font-weight: 600; font-size: var(--sc-t-sm); white-space: nowrap;
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / .16);
  transition: background-color 150ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .promo__link:hover .promo__img { transform: scale(1.04); }
  .promo__link:hover .promo__cta { background: var(--btn-hover); }
}
.promo__link:active .promo__cta { transform: scale(.97); }
.promo__link:focus-visible { outline-offset: -4px; }
/* Hero dugmad ostaju u prvom ekranu i kad je baner viši. */
.has-promo .hero__copy { bottom: calc(clamp(2.5rem, 9vh, 7rem) + var(--promo-h, 112px)); }

@media (max-width: 760px) {
  .promo { --promo-h: 104px; }
  .promo__link { padding: .8rem var(--sc-gutter); gap: .8rem; }
  .promo__img { width: 100%; object-position: 70% 40%; }
  .promo__link::before { background: linear-gradient(to right, rgb(6 11 23 / .95) 0%, rgb(6 11 23 / .85) 55%, rgb(6 11 23 / .45) 100%); }
  .promo__text { display: none; }
  .promo__tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .05em; font-size: .68rem; }
  .promo__title { font-size: 1.15rem; }
  .promo__cta { height: 2.5rem; padding: 0 .9rem; }
  .has-promo .hero__copy { bottom: calc(max(1.5rem, env(safe-area-inset-bottom)) + 104px); }
  .has-promo .ph { --yshift: -8; }   /* fotke prate tekst koji je podignut zbog banera */
  .has-promo .p3 { display: none; } /* gornja fotka bi pala ispod zaglavlja */
}
@media (prefers-reduced-motion: reduce) { .promo__img { transition: none; } }