/* Landing: AI radionica za firme. Gradi na scrollcraft tokenima + home.css (bar, dugmad, organizatori). */

.rad main { margin-top: 0; }
.rad .bar { position: sticky; }

/* ------------------------------------------------------------ hero + kviz -- */
.rad-hero {
  position: relative; overflow: clip;
  padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(55% 60% at 80% 30%, #142a55 0%, transparent 70%),
    radial-gradient(45% 50% at 0% 100%, #0d1a35 0%, transparent 70%),
    var(--sc-canvas);
}
.rad-hero__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.rad-status {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-accent);
}
.rad-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 0 rgb(91 157 255 / .5); animation: rad-pulse 2.4s var(--sc-ease-out) infinite; }
@keyframes rad-pulse { 0% { box-shadow: 0 0 0 0 rgb(91 157 255 / .45); } 70%, 100% { box-shadow: 0 0 0 .6rem rgb(91 157 255 / 0); } }
.rad-title { margin-top: var(--sc-4); font-size: clamp(2.6rem, 1.6rem + 3.8vw, 5rem); line-height: .98; letter-spacing: -0.035em; max-width: 12ch; }
.rad-lede { margin-top: var(--sc-5); font-size: var(--sc-t-lg); line-height: 1.5; max-width: 34rem; }
.rad-note { margin-top: var(--sc-5); color: var(--sc-ink-soft); max-width: 32rem; }

/* Kviz: gomila kartica u 3D. Bez JS-a je obična duga forma. */
.quiz { position: relative; }
.quiz__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.quiz__count { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.quiz__bar { flex: 1; height: 4px; border-radius: 99px; background: var(--sc-hairline); overflow: hidden; }
.quiz__bar span { display: block; height: 100%; width: var(--q-progress, 12%); background: var(--sc-accent); border-radius: inherit; transition: width 380ms var(--sc-ease-out); }
.quiz:not(.is-live) .quiz__head { display: none; }

.quiz__stack { position: relative; perspective: 1200px; transform-style: preserve-3d; }
.q-step {
  margin: 0 0 1rem; min-width: 0; border: 0;
  padding: clamp(1.3rem, 3vw, 2rem);
  border-radius: 18px;
  background: linear-gradient(180deg, #13213b 0%, #0f1a2e 100%);
  box-shadow: var(--sc-e3), inset 0 1px 0 rgb(255 255 255 / .07);
}
.quiz.is-live .q-step {
  position: absolute; left: 0; right: 0; top: 0; margin: 0;
  transform-origin: 50% 100%;
  transition: transform 520ms var(--sc-ease-out), opacity 360ms var(--sc-ease-out), filter 360ms var(--sc-ease-out);
}
.quiz.is-live .q-step[data-pos="0"]  { transform: none; opacity: 1; z-index: 5; }
.quiz.is-live .q-step[data-pos="1"]  { transform: translate3d(0, 22px, -70px) scale(.955); opacity: .55; z-index: 4; filter: brightness(.8); pointer-events: none; }
.quiz.is-live .q-step[data-pos="2"]  { transform: translate3d(0, 42px, -140px) scale(.91); opacity: .28; z-index: 3; filter: brightness(.65); pointer-events: none; }
.quiz.is-live .q-step[data-pos="far"]{ transform: translate3d(0, 40px, -200px) scale(.9); opacity: 0; z-index: 1; pointer-events: none; }
.quiz.is-live .q-step[data-pos="gone"] { transform: translate3d(0, -40px, 90px) rotateX(10deg); opacity: 0; z-index: 6; pointer-events: none; }
.quiz.is-live .q-step[data-pos="back"] { transform: translate3d(-30px, 0, -40px) rotateY(10deg); opacity: 0; z-index: 2; pointer-events: none; }

/* legend se inače crta na ivici fieldset-a (iskače iz kartice): float ga vraća u tok */
.q-step > legend.q-title { float: left; width: 100%; }
.q-step > legend.q-title + * { clear: both; }
/* kartice koje proviruju iza su samo površina, bez sadržaja */
.quiz.is-live .q-step:not([data-pos="0"]) > * { visibility: hidden; }
.q-title { padding: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: -0.02em; outline: none; }
.q-hint { margin-top: .4rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.q-opts { display: grid; gap: .55rem; margin-top: 1.2rem; }
.q-opts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span {
  display: flex; align-items: center; min-height: 3rem; height: 100%; padding: .7rem 1rem .7rem 2.6rem;
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--rad);
  background: rgb(255 255 255 / .02); line-height: 1.35; font-size: var(--sc-t-sm);
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.opt span::before {
  content: ""; position: absolute; left: 1rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem;
  border: 1.5px solid color-mix(in oklab, var(--sc-ink) 45%, transparent); border-radius: 50%;
  transition: background-color 140ms, border-color 140ms, box-shadow 140ms;
}
.opt input[type="checkbox"] + span::before { border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .opt:hover span { border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); background: rgb(91 157 255 / .06); } }
.opt input:checked + span { border-color: var(--sc-accent); background: rgb(91 157 255 / .12); }
.opt input:checked + span::before { background: var(--sc-accent); border-color: var(--sc-accent); box-shadow: inset 0 0 0 3px #13213b; }
.opt input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.opt input:disabled + span { opacity: .4; cursor: not-allowed; }
.opt:active span { transform: scale(.985); }

.q-text {
  display: block; width: 100%; margin-top: 1.2rem; padding: .9rem 1rem; resize: vertical; min-height: 7rem;
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--rad); background: var(--sc-surface); color: var(--sc-ink); line-height: 1.5;
}
.q-text:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: transparent; }

.q-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.q-nav .q-next { margin-left: auto; }
.q-back { background: none; border: 0; padding: .5rem 0; color: var(--sc-ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.q-back:hover { color: var(--sc-ink); }
.quiz:not(.is-live) .q-back, .quiz:not(.is-live) .q-step:not(.q-step--contact) .q-next { display: none; }

.q-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; margin-top: 1.2rem; }
.q-fields .field--wide { grid-column: 1 / -1; }
.q-fields select {
  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);
}
.opt-l { color: var(--sc-ink-soft); }
.q-status { min-height: 1.4em; margin-top: .8rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.q-status.is-error { color: #ff9c9c; }

.q-step--done { text-align: left; }
.q-done-kicker { font-size: var(--sc-t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); font-weight: 600; margin-bottom: .6rem; }
.q-picked { margin: 1rem 0 1.4rem; color: var(--sc-ink); font-size: var(--sc-t-sm); }
.q-picked:empty { display: none; }

/* --------------------------------------------------------------- sekcije -- */
.rad-what__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.rad-what__text .sc-lede { margin-top: var(--sc-5); color: var(--sc-ink-soft); }
.rad-photo { margin: 0; }
.rad-photo img { width: 100%; height: auto; border-radius: var(--rad); box-shadow: var(--sc-e3); }
.rad-photo figcaption { margin-top: .7rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

.rad-who__body { margin-top: var(--sc-5); }
.rad-steps { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; counter-reset: none; }
.rad-steps li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; border-top: 1px solid var(--sc-hairline-strong); padding-top: 1.2rem; }
.rad-steps__n { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); line-height: 1; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.rad-steps h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); }
.rad-steps p { margin-top: .4rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.rad-who__cta { margin-top: clamp(2rem, 4vw, 3rem); }
.rad .org { padding-top: 0; }
.rad .foot { margin-top: 2rem; }

@media (max-width: 860px) {
  .rad-hero__grid, .rad-what__grid { grid-template-columns: 1fr; }
  .rad-steps { grid-template-columns: 1fr; gap: 1.4rem; }
  .q-opts--grid, .q-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz.is-live .q-step { transition-duration: 1ms; }
  .rad-dot { animation: none; }
}

/* ---------------------------------------------- traka sa ilustracijom (Flow) -- */
.rad-band {
  position: relative; overflow: clip; isolation: isolate;
  min-height: clamp(24rem, 46vw, 40rem); display: flex; align-items: center;
  background: #050912;
}
.rad-band__img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 75% 50%;
}
.rad-band::before { /* gustina samo levo, gde je tekst */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgb(5 9 18 / .92) 0%, rgb(5 9 18 / .78) 30%, rgb(5 9 18 / .2) 55%, transparent 70%),
              linear-gradient(to top, var(--sc-canvas) 0%, transparent 18%), linear-gradient(to bottom, var(--sc-canvas) 0%, transparent 14%);
}
.rad-band__copy { padding-block: 4rem; }
.rad-band__copy h2 { max-width: 15ch; }
.rad-band__copy p { margin-top: var(--sc-5); max-width: 30rem; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.5; }
.rad-band__note { position: absolute; right: var(--sc-gutter); bottom: 1rem; font-size: var(--sc-t-xs); color: rgb(242 245 250 / .55); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rad-band__img { animation: rad-zoom linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes rad-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
  }
}
@media (max-width: 860px) {
  .rad-band { min-height: 34rem; align-items: flex-end; }
  .rad-band__img { object-position: 68% 30%; }
  .rad-band::before { background: linear-gradient(to top, rgb(5 9 18 / .96) 0%, rgb(5 9 18 / .85) 38%, rgb(5 9 18 / .2) 62%, transparent 75%), linear-gradient(to bottom, var(--sc-canvas) 0%, transparent 14%); }
  .rad-band__copy { padding-block: 2.5rem 3rem; }
  .rad-band__note { top: 1rem; bottom: auto; }
}