/* Novi Život: content stays readable before JavaScript and without motion. */
.motion-page { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
.motion-page [hidden] { display: none !important; }
.motion-page :is(section[id], [data-coach]) { scroll-margin-top: 110px; }
.motion-page .site-header:focus-within,
.motion-page .site-header:has(details[open]) { transform: none; }
.motion-page .hero.brand-hero { gap: clamp(24px, 4vw, 64px); align-items: center; }
.motion-page .brand-hero::before,
.motion-page .brand-hero::after { display: none; }
.motion-page .hero__body,
.motion-page .splash__body { min-width: 0; }
.motion-page .brand-hero { background: var(--brand-night); }
.motion-page .hero__ghost { display: none; }
.motion-page .hero__line { overflow: visible; }
.motion-page .brand-hero .lead { max-width: 41ch; }
.motion-page .hero__secondary { display: inline-flex; gap: 14px; align-items: center; min-height: 48px; margin-top: 12px; color: var(--brand-white); font-size: 14px; font-weight: 600; }
.motion-page .hero__secondary span:last-child { transition: transform .25s ease; }
.motion-page .hero__secondary:hover span:last-child { transform: translateY(3px); }
.motion-page .coach-stage {
  position: relative; isolation: isolate; overflow: hidden; align-self: stretch;
  min-height: 510px; border-radius: 160px 160px 24px 24px;
  background: var(--brand-blue); color: var(--brand-white);
}
.motion-page .coach-stage__studio { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.motion-page .coach-stage::after { content: ''; position: absolute; inset: 42% 0 0; z-index: 1; background: linear-gradient(transparent, var(--brand-night)); pointer-events: none; }
.motion-page .coach-stage__brand { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); z-index: 2; width: 148px; }
.motion-page .coach-stage__caption { position: absolute; z-index: 2; bottom: 30px; left: 28px; right: 28px; }
.motion-page .coach-stage__label { display: block; margin-bottom: 10px; color: var(--brand-blue); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.motion-page .coach-stage__message { display: block; margin-top: 10px; font-size: 14px; color: var(--brand-muted); }
/* Oznake u kartici tima (Trening / Prehrana / Podrska). Opseg je .motion-page,
   razred koji nose obje stranice koje crtaju fragment: naslovnica
   (motion-page modern-landing) i splash (launch-page motion-page). Zato je
   zapis jedan za obje. Do GH #536 je isti blok stajao dva puta -- bez opsega u
   landing-modern.css, koji splash ne ucitava, i pod .launch-page na kraju ove
   datoteke -- s 1 px razlike u paddingu, pa su iste pilule iz istog fragmenta
   bile razlicite na dvije stranice bez odluke da budu. Vrijednosti su
   naslovnicine, jer je ona bila ispravna strana. */
.motion-page .coach-stage__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.motion-page .coach-stage__tags > span { padding: 6px 11px; border: 1px solid #ffffff38; border-radius: 30px; font-size: 10px; color: #fffefa; }
.motion-page .coach-stage__people { position: absolute; inset: 12% -8% 0; display: flex; align-items: end; }
.motion-page .coach-stage__people img { width: 55%; height: 92%; object-fit: contain; object-position: bottom; }
.motion-page .coach-stage__people img + img { margin-left: -10%; }
.motion-page .has-portraits .coach-stage__brand { top: 22px; }
.motion-page .splash .coach-stage { min-height: 540px; }
.motion-page .ticker { margin-top: 36px; padding-block: 18px; background: transparent; border-block: 1px solid var(--v5-line); }
.motion-page .ticker__track { width: 100%; justify-content: center; flex-wrap: wrap; gap: 10px 26px; padding-inline: 20px; color: var(--v5-muted); animation: none; font-size: 12px; letter-spacing: .12em; }
.motion-page .ticker__track > :nth-child(n + 11) { display: none; }
.motion-page .ticker__shift { will-change: auto; }
.motion-page .section-intro { max-width: 580px; margin-bottom: 32px; }
.motion-page .section-intro h2 { margin-top: 16px; font-size: clamp(30px, 4.2vw, 58px); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.motion-page .section-intro p { margin-top: 18px; color: var(--v5-body); font-size: 16px; line-height: 1.75; }
.motion-page .program { overflow: visible; }
.motion-page .program__head { align-items: end; }
.motion-page .program__head .section-intro { margin-bottom: 0; }
.motion-page .program__track { display: flex; align-items: stretch; gap: 12px; padding-block: 10px; }
.motion-page .program__card { flex: 1 1 0; padding: 0; min-width: 0; border-radius: 20px; overflow: hidden; background: var(--v5-surface); transition: flex-grow .65s var(--motion-ease), border-color .3s; }
.motion-page .program__card.is-active { flex-grow: 1.7; border-color: var(--v5-accent); }
.motion-page .program__select { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 12px 12px 22px; text-align: left; border: 0; border-radius: inherit; font: inherit; background: transparent; color: var(--v5-ink); cursor: pointer; }
.motion-page .program__select:focus-visible { outline-offset: -4px; }
.motion-page .program__select:disabled { cursor: default; }
.motion-page .program__visual { position: relative; display: block; width: 100%; height: 230px; overflow: hidden; border-radius: 12px; background: var(--v5-accent-soft); }
.motion-page .program__icon { position: absolute; inset: 0; min-height: 0; background: var(--v5-accent-soft); color: var(--v5-accent-dark); }
.motion-page .program__icon svg { width: 62px; height: 62px; transition: transform .6s var(--motion-ease); }
.motion-page .is-active .program__icon svg { transform: scale(1.18); }
.motion-page .program__poster,
.motion-page .program__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.motion-page .program__poster { transition: filter .5s ease, transform .7s var(--motion-ease); }
.motion-page .program__card:not(.is-active) .program__poster { filter: saturate(.35); }
.motion-page .is-active .program__poster { transform: scale(1.025); }
.motion-page .program__video { opacity: 0; transition: opacity .3s ease; }
.motion-page .program__video.is-playing { opacity: 1; }
.motion-page .program__title { margin: 19px 4px 6px; font-size: 18px; font-weight: 800; letter-spacing: -.025em; }
.motion-page .program__description { margin-inline: 4px; font-size: 14px; line-height: 1.6; color: var(--v5-body); }
.motion-page .program__tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 18px var(--v5-pad) 0; }
.motion-page .program__hint { color: var(--v5-muted); font-size: 13px; }
.motion-page .motion-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 15px; border: 1px solid var(--v5-line); border-radius: 999px; background: var(--v5-surface); color: var(--v5-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.motion-page .motion-button:hover { border-color: var(--v5-accent); background: var(--v5-accent-soft); }
.motion-page .coach-section { max-width: var(--v5-max); margin: 0 auto; padding: clamp(64px, 8vw, 120px) var(--v5-pad) 0; display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: clamp(28px, 6vw, 90px); }
.motion-page .coach-section__intro { position: sticky; top: 125px; }
.motion-page .coach-section__steps { display: flex; gap: 10px; margin-top: 28px; }
.motion-page .coach-section__steps button[aria-pressed=true] { border-color: var(--v5-accent); background: var(--v5-accent-soft); }
.motion-page .coach-section__cards { display: grid; gap: 22px; }
.motion-page .coach-card { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 300px; padding: 24px; overflow: hidden; border: 1px solid var(--v5-line); border-radius: 24px; background: var(--v5-surface); transition: border-color .4s, box-shadow .4s; }
.motion-page .coach-card.is-active { border-color: var(--v5-accent); box-shadow: 0 14px 48px -36px var(--v5-shadow-color); }
.motion-page .coach-card__visual { position: relative; align-self: stretch; display: grid; place-items: center; min-height: 260px; overflow: hidden; border-radius: 120px 120px 16px 16px; background: var(--v5-accent-soft); }
.motion-page .coach-card__visual > span { font-size: clamp(68px, 8vw, 110px); font-weight: 300; letter-spacing: -.07em; color: var(--v5-accent-dark); }
.motion-page .coach-card__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.motion-page .coach-card__body { padding: 20px 0 20px 24px; }
.motion-page .coach-card__body > span { font-size: 11px; font-weight: 700; color: var(--v5-muted); text-transform: uppercase; letter-spacing: .12em; }
.motion-page .coach-card h3 { margin-top: 14px; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.04em; }
.motion-page .coach-card p { margin-top: 12px; color: var(--v5-body); font-size: 14px; line-height: 1.7; }
.motion-page .results__sweep, .motion-page .ba__flash { display: none; }
.motion-page .results__grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 420px)); perspective: none; }
.motion-page .result-card { min-width: 0; }
.motion-page .result-card:not(.is-interactive) .ba { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: auto; }
.motion-page .result-card:not(.is-interactive) .ba__layer { position: relative; aspect-ratio: 3 / 4; clip-path: none !important; }
.motion-page .result-card:not(.is-interactive) .ba__line { display: none; }
.motion-page .ba { --comparison-position: 50%; border-radius: 20px; cursor: auto; }
.motion-page .result-card.is-interactive .ba { cursor: ew-resize; touch-action: pan-y; user-select: none; }
.motion-page .ba__layer--after { clip-path: inset(0 0 0 var(--comparison-position)) !important; will-change: auto; }
.motion-page .ba__line { left: var(--comparison-position); will-change: auto; pointer-events: none; }
.motion-page .ba__meta { max-width: calc(100% - 20px); overflow-wrap: anywhere; border-radius: 8px; padding: 8px 12px; }
.motion-page .ba__control { display: grid; gap: 7px; padding: 16px 4px 0; color: var(--v5-body); font-size: 13px; }
.motion-page .ba__control input { width: 100%; min-height: 44px; margin: 0; accent-color: var(--v5-accent-dark); cursor: ew-resize; }
.motion-page .result-card__quote { margin: 16px 0 0; padding-left: 18px; border-left: 2px solid var(--v5-accent); font-size: 15px; line-height: 1.7; color: var(--v5-body); overflow-wrap: anywhere; }
.motion-page .rig__plate { opacity: 1; transform: none; will-change: auto; }
.motion-page .motion-faq { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: clamp(24px, 5vw, 80px); max-width: var(--v5-max); padding: clamp(64px, 8vw, 110px) var(--v5-pad) 0; margin-inline: auto; }
.motion-page .motion-faq__list details { border-bottom: 1px solid var(--v5-line); }
.motion-page .motion-faq__list summary { position: relative; display: block; padding: 23px 44px 23px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 700; line-height: 1.5; }
.motion-page .motion-faq__list summary::-webkit-details-marker { display: none; }
.motion-page .motion-faq__list summary::before,
.motion-page .motion-faq__list summary::after { content: ''; position: absolute; right: 6px; top: 35px; width: 14px; height: 2px; background: var(--v5-accent-dark); transition: transform .25s ease; }
.motion-page .motion-faq__list summary::after { transform: rotate(90deg); }
.motion-page .motion-faq__list [open] > summary::after { transform: rotate(0); }
.motion-page .motion-faq__answer { padding: 0 32px 24px 0; font-size: 15px; line-height: 1.75; color: var(--v5-body); }
.motion-page .motion-faq__more { display: inline-flex; min-height: 44px; align-items: center; margin-top: 20px; font-size: 14px; font-weight: 700; }
.motion-page .final__box { background: var(--v5-accent-soft); border: 0; }
.motion-page .final__box h2 { line-height: 1.12; }
@media (prefers-reduced-motion: no-preference) {
  .motion-page .motion-enter { animation: motion-enter .8s var(--motion-ease) both; }
  .motion-page .motion-enter--late { animation-delay: .16s; }
  .motion-page .motion-reveal { animation: motion-enter .7s var(--motion-ease) both; }
  @keyframes motion-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 1100px) {
  .motion-page .program__track { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--v5-pad); }
  .motion-page .program__card, .motion-page .program__card.is-active { flex: 0 0 245px; scroll-snap-align: start; }
  .motion-page .program__visual { height: 245px; }
  .motion-page .coach-card { grid-template-columns: .85fr 1fr; padding: 16px; }
  .motion-page .coach-card__body { padding-left: 18px; }
}
@media (max-width: 900px) {
  .motion-page .hero.brand-hero, .motion-page .splash.brand-hero { grid-template-columns: 1fr; }
  .motion-page .coach-stage, .motion-page .splash .coach-stage { min-height: 450px; width: 100%; max-width: 600px; justify-self: center; }
  .motion-page .coach-section, .motion-page .motion-faq { grid-template-columns: 1fr; gap: 24px; }
  .motion-page .coach-section__intro { position: static; }
  .motion-page .coach-section__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motion-page .coach-card { display: flex; flex-direction: column; align-items: stretch; }
  .motion-page .coach-card__visual { min-height: 230px; }
  .motion-page .coach-card__body { padding: 22px 6px 8px; }
}
@media (max-width: 540px) {
  .motion-page :is(section[id], [data-coach]) { scroll-margin-top: 140px; }
  .motion-page .coach-stage, .motion-page .splash .coach-stage { min-height: 380px; border-radius: 120px 120px 20px 20px; }
  .motion-page .coach-stage__caption { left: 22px; right: 22px; bottom: 24px; }
  .motion-page .coach-stage__brand { top: 28px; width: 128px; }
  .motion-page .program__card, .motion-page .program__card.is-active { flex-basis: 78vw; max-width: 340px; }
  .motion-page .program__visual { height: 230px; }
  .motion-page .coach-section__cards { grid-template-columns: 1fr; }
  .motion-page .coach-card { display: grid; grid-template-columns: .9fr 1fr; }
  .motion-page .coach-card__body { padding: 16px 0 16px 18px; }
  .motion-page .coach-card__visual { min-height: 215px; }
  .motion-page .coach-card h3 { font-size: 25px; }
  .motion-page .coach-card p { font-size: 13px; }
  .motion-page .ticker__track { gap: 9px 14px; font-size: 10px; }
  .motion-page .section-intro { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-page *, .motion-page *::before, .motion-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-page .motion-enter, .motion-page .motion-reveal { opacity: 1; transform: none; }
  .motion-page .program__video { display: none; }
}

/* Splash: natpis u kartici tima je gusci nego na naslovnici. Kartica je niza i
   stoji pod tekstom, pa gradijent pocinje nize a natpis sjedi blize dnu.
   Oznake nisu ovdje: jedan zapis za obje stranice stoji gore, uz ostala osnovna
   pravila fragmenta (GH #536). Opseg je .launch-page, a ne .motion-page, jer
   naslovnica nosi oba razreda i pravilo bi je promijenilo. Blok stoji na kraju
   datoteke namjerno: nadjacava osnovna pravila i ona u medijskim upitima, koja
   su iste specificnosti. */
.launch-page .coach-stage__label { margin-bottom: 6px; font-size: 10px; }
.launch-page .coach-stage__message { margin-top: 4px; font-size: 13px; }
.launch-page .coach-stage__caption { bottom: 20px; }
.launch-page .coach-stage::after { inset: 58% 0 0; }