/* Izmene 11.11.2026. (Aleksa): dva programa jasnije, cene, bio, šta dobijaš, Porsche čitljivost, kupovina.
   Samo novi elementi i sitna pojačanja — postojeći raspored i animacije ostaju netaknuti. */

/* ---------------------------------------------------------------- izbor programa */
[data-section="chooser"] .chooser__lead { max-width: 52ch; margin-top: clamp(14px, 1.6vw, 22px); color: var(--mute); }
[data-section="chooser"] .chooser__lead strong { color: var(--bone); font-weight: 600; }
[data-section="chooser"] .offer__tag { font-size: clamp(12px, .3vw + 11px, 14px); letter-spacing: .1em; }
.offer__bonus {
  margin-top: 4px; padding: 14px 16px; border: 1px solid rgba(201, 165, 90, .45);
  background: linear-gradient(135deg, rgba(201, 165, 90, .14), rgba(201, 165, 90, .03));
  border-radius: var(--radius); font-size: var(--fs-small); line-height: 1.5; color: var(--bone);
}
.offer__bonus-h {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 4px;
}
.offer__bonus strong { color: var(--white); font-weight: 600; }

/* ---------------------------------------------------------------- oznaka programa (sistem / kardio) */
.program-flag {
  display: inline-flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  border: 1px solid var(--blood); border-radius: var(--radius); overflow: hidden;
  font-family: var(--f-mono); font-size: clamp(12px, .3vw + 11px, 14px); letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.program-flag > span { padding: 10px 14px; display: inline-flex; align-items: center; }
.program-flag__n { background: var(--blood); color: var(--white); font-weight: 500; }
.program-flag__name { color: var(--bone); background: rgba(11, 11, 12, .82); }
.program-flag__price { color: var(--gold); background: rgba(11, 11, 12, .82); border-left: 1px solid var(--line-2); font-family: var(--f-display); font-size: 1.35em; letter-spacing: .02em; padding-block: 6px; }
.program-flag + h2 { margin-top: 0; }

/* ---------------------------------------------------------------- Marko kao borac */
[data-section="champion"] .champion__bio {
  margin-top: clamp(14px, 1.6vw, 20px); padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 28px);
  display: grid; gap: 14px; max-width: 36rem; color: var(--bone); font-size: var(--fs-body); line-height: 1.55;
}
[data-section="champion"] .champion__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
[data-section="champion"] .champion__stats li { display: grid; gap: 4px; align-content: start; }
[data-section="champion"] .champion__stats b { font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 3.6vw, 52px); line-height: 1; color: var(--gold); }
[data-section="champion"] .champion__stats li:first-child b { color: var(--blood-hot); }
[data-section="champion"] .champion__stats span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); line-height: 1.35; }
[data-section="champion"] .champion__src { font-size: 12px; color: var(--mute); }

/* ---------------------------------------------------------------- 5×5 uvod: naglasak na trojici */
[data-section="cardio"] .cardio__intro strong { color: var(--gold); font-weight: 600; }

/* ---------------------------------------------------------------- Porsche: tekst se vidi preko automobila */
[data-section="challenge"] .challenge__copy {
  background: rgba(8, 8, 9, .94); border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
  padding: clamp(20px, 2.6vw, 34px);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  [data-section="challenge"] .challenge__copy { background: rgba(8, 8, 9, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}
[data-section="challenge"] .challenge__prize {
  font-size: clamp(21px, 1.2vw + 15px, 30px); line-height: 1.35; color: var(--bone); max-width: 30ch;
}
[data-section="challenge"] .challenge__prize strong { color: var(--white); font-weight: 600; box-shadow: inset 0 -.32em 0 rgba(217, 28, 28, .55); }
[data-section="challenge"] .challenge__copy .mute { color: #c4bfb6; }
[data-section="challenge"] .challenge__head h2 { text-shadow: 0 4px 30px rgba(0, 0, 0, .7); }

/* ---------------------------------------------------------------- dugmad: zaobljena svuda (13.11.) */
.btn { border-radius: 14px; }
.btn--sm { border-radius: 999px; }
[data-section="system"] .dial-nav__btn, [data-section="champion"] .champion__nav, [data-section="faq"] .faq__icon { border-radius: 10px; }
.offer__bonus, .program-flag, [data-section="champion"] .champion__bio { border-radius: 12px; }

/* header: pilula sa crvenim prelivom, mekim sjajem i odsjajem koji povremeno pređe preko */
.nav__cta.btn {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #ff3b30 0%, #d91c1c 55%, #a51212 100%);
  box-shadow: 0 6px 22px rgba(217, 28, 28, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
  padding-inline: 18px 16px;
}
.nav__cta.btn::after, .buy__btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 48%, transparent 66%);
  transform: translateX(-120%); animation: btn-shine 5.5s var(--ease-out, ease) infinite 1.5s;
}
@keyframes btn-shine { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }
[data-motion="reduced"] .nav__cta.btn::after, [data-motion="reduced"] .buy__btn::after { animation: none; display: none; }

/* ---------------------------------------------------------------- cenovnik: istaknuta ponuda */
@property --buy-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
[data-section="form"] .buy { display: grid; gap: 18px; padding: clamp(16px, 2vw, 24px); }
.buy__opt {
  --edge: var(--gold);
  position: relative; display: grid; gap: 12px; padding: clamp(22px, 2.4vw, 30px); text-decoration: none; color: var(--bone);
  border: 1.5px solid transparent; border-radius: 20px;
  background:
    linear-gradient(160deg, rgba(28, 24, 18, .97), rgba(10, 10, 11, .97)) padding-box,
    conic-gradient(from var(--buy-a), var(--edge), rgba(201, 165, 90, .12) 25%, var(--edge) 50%, rgba(201, 165, 90, .12) 75%, var(--edge)) border-box;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 165, 90, .06), 0 0 46px rgba(201, 165, 90, .10);
  animation: buy-edge 7s linear infinite;
  transition: transform .35s var(--ease-out, ease), box-shadow .35s var(--ease-out, ease);
}
.buy__opt--cardio { --edge: #ff5a4f; box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 46px rgba(217, 28, 28, .14); }
@keyframes buy-edge { to { --buy-a: 360deg; } }
[data-motion="reduced"] .buy__opt { animation: none; }
.buy__opt:hover { transform: translateY(-3px); }
.buy__opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.buy__ribbon { display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .14em; }
.buy__ribbon > span:first-child { color: var(--white); background: var(--blood); padding: 5px 10px; border-radius: 999px; }
.buy__ribbon > span:last-child { color: var(--mute); padding: 5px 0; }
.buy__name { font-family: var(--f-display); font-size: clamp(32px, 3vw, 44px); line-height: 1; text-transform: uppercase; color: var(--white); margin-top: 6px; }
.buy__desc { font-size: var(--fs-body); line-height: 1.45; color: var(--mute); }
.buy__price-wrap { display: flex; align-items: baseline; gap: 10px; padding: 6px 0 4px; border-bottom: 1px solid var(--line); }
.buy__price { font-size: clamp(60px, 6vw, 84px); line-height: .95; color: var(--gold); text-shadow: 0 0 34px rgba(201, 165, 90, .35); }
.buy__opt--cardio .buy__price { color: #ffd2a8; text-shadow: 0 0 34px rgba(255, 90, 79, .35); }
.buy__list { display: grid; gap: 10px; padding: 4px 0 6px; }
.buy__li { position: relative; padding-left: 30px; font-size: var(--fs-small); line-height: 1.45; color: var(--bone); }
.buy__li b { color: var(--white); font-weight: 600; }
.buy__li::before {
  content: ""; position: absolute; left: 0; top: .05em; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(201, 165, 90, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23C9A55A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.buy__opt--cardio .buy__li::before { background-color: rgba(255, 90, 79, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23FF5A4F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.buy__btn { position: relative; overflow: hidden; isolation: isolate; margin-top: 4px; pointer-events: none; min-height: 58px; font-size: 15px;
  background: linear-gradient(135deg, #ff3b30 0%, #d91c1c 55%, #a51212 100%); box-shadow: 0 10px 28px rgba(217, 28, 28, .35), inset 0 1px 0 rgba(255, 255, 255, .22); }
.buy__opt:hover .buy__btn { filter: brightness(1.08); }

/* telefon: ponuda preko skoro celog ekrana, bez dodatnog okvira oko kartica */
@media (max-width: 639.98px) {
  [data-section="form"] .buy.signup__form { padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  [data-section="form"] .buy .signup__corners { display: none; }
  [data-section="form"] .buy { gap: 22px; }
  .buy__opt { padding: 24px 20px 22px; border-radius: 22px; }
  .buy__price { font-size: 72px; }
  [data-section="form"] .signup__title { font-size: clamp(56px, 17vw, 84px); }
}

/* ---------------------------------------------------------------- telefon: oznaka programa kao uredan blok, brojke sa vazduhom */
@media (max-width: 639.98px) {
  .program-flag { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  .program-flag__n { grid-column: 1 / -1; justify-content: center; }
  .program-flag__name { border-top: 1px solid var(--blood); }
  .program-flag__price { border-top: 1px solid var(--blood); justify-content: center; }
  [data-section="champion"] .champion__stats { gap: 18px; }
  [data-section="champion"] .champion__stats span { font-size: 10px; letter-spacing: .05em; }
}

/* ---------------------------------------------------------------- prodajna dugmad: šampionsko zlato (13.11.)
   Crvena je na sajtu svuda (oznake, linije, naslovi), pa crveno dugme ne iskače. Dugmad za kupovinu dobijaju
   jedinu svetlu, punu boju na stranici: jarko zlato sa crnim tekstom (kontrast ~12:1). Header ostaje crven. */
.hero__cta.btn, .system__cta-btn.btn, .cardio__cta .btn, .buy__btn.btn {
  --btn-bg: #ffc93c; --btn-fg: #0b0b0c; --btn-line: transparent;
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #ffe08a 0%, #ffc93c 42%, #e9a514 100%);
  color: #0b0b0c; font-weight: 700;
  box-shadow: 0 10px 30px rgba(255, 190, 40, .28), 0 0 0 1px rgba(255, 224, 138, .35), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: box-shadow .3s var(--ease-out, ease), filter .3s var(--ease-out, ease), transform .3s var(--ease-out, ease);
}
.hero__cta.btn > span[aria-hidden], .system__cta-btn.btn > span[aria-hidden], .cardio__cta .btn > span[aria-hidden], .buy__btn.btn > span[aria-hidden] { color: #0b0b0c; }
@media (hover: hover) and (pointer: fine) {
  .hero__cta.btn:hover, .system__cta-btn.btn:hover, .cardio__cta .btn:hover { filter: brightness(1.06); box-shadow: 0 14px 40px rgba(255, 190, 40, .42), 0 0 0 1px rgba(255, 224, 138, .5), inset 0 1px 0 rgba(255, 255, 255, .6); }
}
.hero__cta.btn:active, .system__cta-btn.btn:active, .cardio__cta .btn:active { filter: brightness(.94); }
.buy__opt:hover .buy__btn.btn { filter: brightness(1.06); }
/* isti odsjaj kao u headeru, sada i na sekcijskim dugmadima za kupovinu */
.system__cta-btn.btn::after, .cardio__cta .btn::after, .hero__cta.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-120%); animation: btn-shine 5.5s var(--ease-out, ease) infinite 2.5s;
}
.buy__btn.btn::after { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%); }
[data-motion="reduced"] .system__cta-btn.btn::after, [data-motion="reduced"] .cardio__cta .btn::after, [data-motion="reduced"] .hero__cta.btn::after { animation: none; display: none; }
.hero__cta.btn:focus-visible, .system__cta-btn.btn:focus-visible, .cardio__cta .btn:focus-visible { outline: 2px solid #ffe08a; outline-offset: 3px; }

/* ================================================================ 14.11.: računar i telefon odvojeno */

/* ponuda: bez spoljne ploče svuda (kartice imaju svoj okvir); tekst kartice raste, dugme uvek na dnu */
[data-section="form"] .buy.signup__form { padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
[data-section="form"] .buy .signup__corners { display: none; }
.buy__opt { display: flex; flex-direction: column; gap: 12px; }
.buy__btn.btn { margin-top: auto; }
.buy__list { margin-bottom: 8px; }

/* računar: naslov gore, dve ponude jedna pored druge */
@media (min-width: 900px) {
  [data-section="form"] .signup__layout { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
  [data-section="form"] .signup__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 40px; }
  [data-section="form"] .signup__head > .label { grid-column: 1 / -1; }
  [data-section="form"] .signup__line { margin: 0; }
  [data-section="form"] .buy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); align-items: stretch; }
}

/* računar: sve ~12% manje (uži sadržaj, manji naslovi, niže slike), više vazduha sa strane */
@media (min-width: 1024px) {
  :root { --maxw: 1160px; --fs-h2: clamp(40px, min(7.1vw, 11.5svh), 102px); }
  [data-section="hero"] .hero__title { font-size: clamp(58px, min(8.1vw, 13.2svh), 124px); }
  [data-section="hero"] { --sub-h: min(calc((100% - var(--nav-h) - 6svh) * .88), 780px); }
  [data-section="champion"] .champion__belt,
  [data-section="champion"] .champion__fist { --h: calc((100svh - var(--nav-h) - 32px) * .86); }
  .buy__price { font-size: clamp(56px, 5vw, 72px); }
}

/* telefon: više vazduha, niže slike, mirnija ponuda */
@media (max-width: 639.98px) {
  :root { --gutter: 22px; --fs-h2: clamp(36px, 10.4vw, 48px); }
  [data-section="chooser"] .offer { --art-k: .95; }
  .media, [data-section="champion"] .champion__belt { max-height: 48svh; }
  [data-section="champion"] .champion__belt { width: min(100%, calc(48svh * .75)); margin-inline: auto; justify-self: center; }
  [data-section="champion"] .champion__fist { width: min(100%, calc(48svh * .8)); margin-inline: auto; justify-self: center; }
  [data-section="cardio"] .coach__media { max-height: 44svh; }
  .strip__frame .media { max-height: none; }
  .buy__opt {
    animation: none;
    background:
      linear-gradient(160deg, rgba(24, 21, 16, .98), rgba(10, 10, 11, .98)) padding-box,
      linear-gradient(160deg, var(--edge), rgba(201, 165, 90, .18) 55%, var(--edge)) border-box;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  }
  .buy__opt--cardio { box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
  .buy__price { font-size: 64px; text-shadow: none; }
  .buy__opt--cardio .buy__price { text-shadow: none; }
}

/* 13.11.2026.: oznaka „PROGRAM 1 / ..." je pokrivala Markovo lice. Slika prvog programa ide niže za 12 % visine okvira
   (gore ostaje crna pozadina iste boje kao studio), pa glava staje ispod oznake. */
[data-section="chooser"] .offer--system .offer__img { inset: auto 0 auto 0; top: 12%; height: 100%; object-position: 50% 0%; }