/* Public-page art direction. Scoped so member and staff screens keep their UI. */
html:has(body.modern-landing) { scroll-behavior: smooth; }
.modern-landing {
  --v5-paper: #f6f5f1;
  --v5-surface: #fffefa;
  --v5-ink: #152d42;
  --v5-accent: #2868b4;
  --v5-accent-dark: #205994;
  --v5-accent-soft: #e6eef5;
  --v5-on-accent: #ffffff;
  --val-boja: #143865;
  --val-sjaj: none;
  --val-traka: #d6e6f7;
  --v5-muted: #596774;
  --v5-body: #4d5e6c;
  --v5-body-dark: #344b5d;
  --v5-faint: #65717b;
  --v5-nav-link: #344b5d;
  --v5-line: #d9dedf;
  --v5-line-soft: #e6e8e5;
  --v5-pad: clamp(20px, 4vw, 64px);
  --v5-max: 1320px;
  --modern-night: #152d42;
  --modern-white: #fffefa;
  --modern-znak-plava: #579cd9;
  --ponuda-gradijent: linear-gradient(100deg, #205994 0%, #2868b4 50%, #579cd9 100%);
  --modern-blue: #aacbe5;
  --modern-night-text: #d2dfeb;
  --modern-sand: #eee6d8;
  --modern-olive: #455d42;
  --modern-shadow: 0 20px 60px -44px #152d4266;
  color-scheme: light;
}
html[data-tema="tamno"] .modern-landing {
  --rijeci-marke-podloga: transparent; --rijeci-marke-razmak: 0; --rijeci-marke-dvotocka: currentColor;
  --rijec-besplatno-boja: var(--modern-znak-plava);
  --v5-paper: #121e29; --v5-surface: #1b2c3b; --v5-ink: #edf3f7;
  --v5-accent: #a2c8eb; --v5-accent-dark: #b5d7f5; --v5-accent-soft: #273f54; --val-boja: #ffffff; --val-sjaj: 0 0 10px #579cd9b3, 0 0 2px #579cd966; --val-traka: #2b5480;
  --v5-on-accent: #152d42; --v5-muted: #bbc8d1; --v5-body: #c1cfd9;
  --v5-body-dark: #d5dfe7; --v5-faint: #abbcc9; --v5-nav-link: #d5dfe7;
  --v5-line: #3b4d5d; --v5-line-soft: #2b3d4c; --modern-sand: #313b3d;
  --modern-olive: #c0cfb6;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-tema]) .modern-landing {
    --rijeci-marke-podloga: transparent; --rijeci-marke-razmak: 0; --rijeci-marke-dvotocka: currentColor;
    --rijec-besplatno-boja: var(--modern-znak-plava);
    --v5-paper: #121e29; --v5-surface: #1b2c3b; --v5-ink: #edf3f7;
    --v5-accent: #a2c8eb; --v5-accent-dark: #b5d7f5; --v5-accent-soft: #273f54; --val-boja: #ffffff; --val-sjaj: 0 0 10px #579cd9b3, 0 0 2px #579cd966; --val-traka: #2b5480;
    --v5-on-accent: #152d42; --v5-muted: #bbc8d1; --v5-body: #c1cfd9;
    --v5-body-dark: #d5dfe7; --v5-faint: #abbcc9; --v5-nav-link: #d5dfe7;
    --v5-line: #3b4d5d; --v5-line-soft: #2b3d4c; --modern-sand: #313b3d;
    --modern-olive: #c0cfb6;
    color-scheme: dark;
  }
}
.modern-landing [hidden] { display: none !important; }
.modern-landing :is(section[id], [data-coach]) { scroll-margin-top: 100px; }
.modern-landing section[id] { scroll-margin-top: var(--section-anchor-offset, 7px); }
.modern-landing h1, .modern-landing h2, .modern-landing h3 { text-wrap: balance; }
.modern-landing :focus-visible { outline: 3px solid var(--v5-accent-dark); outline-offset: 5px; }
.modern-landing .btn { gap: 20px; min-height: 52px; border-radius: 9px; font-size: 0.875rem; transition: background-color .2s, color .2s, transform .2s; }
.modern-landing .btn:hover { transform: translateY(-2px); }
.modern-landing .btn > span[aria-hidden] { font-size: 1.375rem; font-weight: 400; }
.modern-landing .btn--ghost { font-size: 0.875rem; }
.modern-landing .eyebrow { font-size: 0.6875rem; letter-spacing: .15em; color: var(--v5-accent-dark); }
.modern-landing .eyebrow::before { width: 20px; }
.modern-landing .site-header { border-bottom: 1px solid var(--v5-line-soft); }
.modern-landing .site-header__inner { padding-block: 17px; gap: 28px; }
.modern-landing .site-nav { gap: 24px; font-size: 0.8125rem; }
.modern-landing .site-nav > a { padding-block: 12px; }
.modern-landing .logo { gap: 12px; font-size: 0.875rem; letter-spacing: -.03em; }
/* Naslovnica nosi znak vecim nego ostale stranice (42 px prema 30 px), jer je
   zaglavlje ovdje prozracnije i znak je prvo sto stranac vidi. Mjeru je i
   dosad drzala ova datoteka; od GH #680 je to slika iz fragments/znak-marke.html
   umjesto slova crtanih CSS-om, koja su se na uzem zaslonu stiskala jedno u
   drugo. Sve ostalo (obrtanje po temi) ostaje u v5-base.css. */
.modern-landing .znak-marke { width: 42px; height: 42px; }

/* The first screen: generous type, an original studio image and a team caption. */
.modern-landing .hero.brand-hero {
  --brand-night: var(--modern-night); --brand-blue: var(--modern-blue);
  display: grid; grid-template-columns: 1.04fr 1fr; gap: 60px;
  width: 100%; max-width: var(--v5-max); margin: 100px auto 0;
  padding: 54px var(--v5-pad) 44px; overflow: visible;
  background: transparent; color: var(--v5-ink); border: 0; border-radius: 0; box-shadow: none;
}
.modern-landing .hero .hero__body { padding-block: 20px; }
.modern-landing .hero h1 { margin: 25px 0 18px; font-size: clamp(3.625rem, 6.8vw, 6rem); line-height: .98; letter-spacing: -.07em; color: var(--v5-ink); }
.modern-landing .hero__accent { color: var(--v5-accent-dark); }
.modern-landing .hero__promise { font-size: clamp(1.3125rem, 2vw, 1.6875rem); font-weight: 500; line-height: 1.35; letter-spacing: -.04em; }
.modern-landing .hero .lead { margin-top: 20px; max-width: 39ch; color: var(--v5-body); font-size: 1rem; line-height: 1.8; }
.modern-landing .hero .eyebrow { color: var(--v5-accent-dark); }
.modern-landing .hero .eyebrow::before { background: var(--v5-accent-dark); }
.modern-landing .hero__actions { display: flex; align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 28px; }
.modern-landing .hero .btn--primary { min-height: 56px; padding: 15px 24px; background: var(--v5-accent); border: 0; color: var(--v5-on-accent); border-radius: 9px; }
.modern-landing .hero .btn--primary:hover { background: var(--v5-ink); color: var(--v5-paper); }
.modern-landing .hero .note { color: var(--v5-muted); font-size: 0.75rem; }
.modern-landing .hero__secondary { color: var(--v5-ink); min-height: 44px; margin-top: 14px; font-size: 0.8125rem; border-bottom: 1px solid var(--v5-line); }
.modern-landing .hero__countdown-label { margin-top: 28px; color: var(--v5-muted); font-size: 0.6875rem; }
.modern-landing .hero .countdown { gap: 12px; margin-top: 9px; }
.modern-landing .hero .countdown__cell { min-width: auto; padding: 0 12px 0 0; background: transparent; border: 0; border-right: 1px solid var(--v5-line); border-radius: 0; color: var(--v5-ink); }
.modern-landing .hero .countdown__cell:last-child { border: 0; }
.modern-landing .hero .countdown__num { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.modern-landing .hero .countdown__unit { font-size: 0.6875rem; color: var(--v5-muted); }
.modern-landing .brand-hero a:focus-visible { outline-color: var(--v5-accent-dark); }
.modern-landing .coach-stage { min-height: 610px; border-radius: 28px 28px 120px 28px; background: var(--modern-night); box-shadow: var(--modern-shadow); }
.modern-landing .coach-stage__studio { object-position: 52% 50%; }
.modern-landing .coach-stage::after { inset: 42% 0 0; background: linear-gradient(transparent, var(--modern-night)); }
.modern-landing .coach-stage__brand { top: 40px; width: 138px; }
.modern-landing .coach-stage__caption { left: 32px; right: 32px; bottom: 48px; color: var(--modern-white); }
.modern-landing .coach-stage__label { color: var(--modern-blue); font-size: 0.625rem; }
/* Oznake (.coach-stage__tags) su u landing-motion.css, uz ostala pravila
   fragmenta koja dijele splash i naslovnica. Splash ih odavde nije mogao
   dobiti -- ovu datoteku ucitava samo naslovnica -- pa su mu dodane zasebno
   (GH #534) i te su se dvije kopije razisle (GH #536). Stajale su i bez
   opsega .modern-landing, jedine u ovoj datoteci. Landing-specificnu razliku
   dodaj ovdje, ali iskljucivo s opsegom, nikad kao goli razred. */
.modern-landing .foundation-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; max-width: calc(var(--v5-max) - 2 * var(--v5-pad)); margin: 10px auto 0; padding: 26px 20px; border-block: 1px solid var(--v5-line); font-size: 0.8125rem; }
.modern-landing .foundation-strip p { margin-right: auto; font-size: 0.8125rem; color: var(--v5-muted); }
.modern-landing .foundation-strip > span[aria-hidden] { color: var(--v5-accent-dark); font-size: 1.125rem; }

/* All five parts remain visible; selection only controls optional video. */
.modern-landing .program { padding: 100px var(--v5-pad) 0; }
.modern-landing .program__head { padding: 0; align-items: end; gap: 36px; margin-bottom: 34px; }
.modern-landing .section-intro h2 { font-size: clamp(2rem, 3.6vw, 3.125rem); font-weight: 600; line-height: 1.12; letter-spacing: -.055em; }
.modern-landing .section-description { max-width: 29ch; padding-bottom: 5px; font-size: 0.9375rem; line-height: 1.8; color: var(--v5-body); }
.modern-landing .program__track { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; padding: 0; overflow: visible; scroll-snap-type: none; }
.modern-landing .program__card, .modern-landing .program__card.is-active { grid-column: span 4; width: auto; max-width: none; border: 1px solid var(--v5-line-soft); border-radius: 18px; box-shadow: none; background: var(--v5-surface); transition: border-color .2s; }
.modern-landing .program__card.is-active { border-color: var(--v5-accent-dark); }
.modern-landing .program__card--4, .modern-landing .program__card--5,
.modern-landing .program__card--4.is-active, .modern-landing .program__card--5.is-active { grid-column: span 6; }
.modern-landing .program__select { padding: 0 0 24px; border-radius: 18px; }
.modern-landing .program__visual { height: 230px; border-radius: 17px 17px 0 0; background: var(--modern-sand); }
.modern-landing .program__icon { display: grid; place-items: center; background: var(--modern-sand); color: var(--modern-olive); }
.modern-landing .program__num { z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; top: 14px; left: 16px; border-radius: 50%; background: var(--v5-surface); color: var(--v5-ink); font-size: 0.625rem; font-weight: 600; }
.modern-landing .program__icon svg { width: 78px; height: 78px; stroke-width: 1.25; }
.modern-landing .program__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.modern-landing .program__card--2 .program__fallback { object-position: center 88%; transform: scale(1.5); }
.modern-landing .program__title { margin: 22px 24px 10px; font-size: 1.5rem; font-weight: 600; letter-spacing: -.04em; }
.modern-landing .program__description { margin: 0 24px; font-size: 0.875rem; line-height: 1.75; }
.modern-landing .program__detail { margin: auto 24px 0; padding-top: 20px; font-size: 0.6875rem; font-weight: 700; color: var(--v5-accent-dark); }
.modern-landing :is(.program__card--4, .program__card--5) .program__select { position: relative; padding: 4px 0 24px 110px; min-height: 205px; }
.modern-landing :is(.program__card--4, .program__card--5) .program__visual { position: absolute; width: 90px; height: 90px; left: 24px; top: 30px; border-radius: 50%; background: var(--v5-accent-soft); }
.modern-landing :is(.program__card--4, .program__card--5) .program__icon { background: var(--v5-accent-soft); color: var(--v5-accent-dark); }
.modern-landing :is(.program__card--4, .program__card--5) .program__icon svg { width: 42px; height: 42px; }
.modern-landing :is(.program__card--4, .program__card--5) .program__num { display: none; }
.modern-landing .program__tools { padding: 22px 0 0; }
.modern-landing .text-link { display: inline-flex; align-items: center; gap: 22px; min-height: 44px; color: var(--v5-accent-dark); font-size: 0.8125rem; font-weight: 700; }
.modern-landing .text-link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* A calm change in pace between the offer and the people behind it. */
.modern-landing .journey { display: grid; grid-template-columns: 1fr; gap: 80px; max-width: var(--v5-max); padding: 100px var(--v5-pad) 0; margin: 0 auto; }
.modern-landing .journey__steps { display: grid; align-content: center; }
.modern-landing .journey__steps li { display: grid; grid-template-columns: 40px 1fr; gap: 22px; padding: 25px 0; border-bottom: 1px solid var(--v5-line); }
.modern-landing .journey__steps li:first-child { border-top: 1px solid var(--v5-line); }
.modern-landing .journey__number { color: var(--v5-accent-dark); font-size: 0.8125rem; padding-top: 5px; }
.modern-landing .journey__steps h3 { font-size: 1.25rem; letter-spacing: -.035em; }
.modern-landing .journey__steps p { margin-top: 10px; font-size: 0.875rem; line-height: 1.75; color: var(--v5-body); }
.modern-landing .coach-section { grid-template-columns: .8fr 1.2fr; gap: 70px; padding-top: 110px; }
.modern-landing .coach-section__intro { position: static; }
.modern-landing .coach-section__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.modern-landing .coach-card { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0; border-radius: 18px; border-color: var(--v5-line-soft); }
.modern-landing .coach-card.is-active { border-color: var(--v5-accent-dark); box-shadow: none; }
.modern-landing .coach-card__visual { display: flex; align-items: end; min-height: 185px; border-radius: 17px 17px 0 0; padding: 26px 20px; background: var(--modern-night); }
.modern-landing .coach-card__visual > .coach-card__word { font-size: clamp(1.5625rem, 3vw, 2.4375rem); font-weight: 500; line-height: 1.2; letter-spacing: -.05em; color: var(--modern-white); }
.modern-landing .coach-card:nth-child(2) .coach-card__visual { background: var(--modern-sand); }
.modern-landing .coach-card:nth-child(2) .coach-card__word { color: var(--modern-olive); }
.modern-landing .coach-card.has-portrait .coach-card__visual { min-height: 280px; }
.modern-landing .coach-card.has-portrait .coach-card__word { display: none; }
.modern-landing .coach-card__body { padding: 24px 20px; }
.modern-landing .coach-card__body > span { font-size: 0.5625rem; }
.modern-landing .coach-card h3 { margin-top: 10px; font-size: 1.5rem; }
.modern-landing .coach-card p { font-size: 0.875rem; line-height: 1.8; }
.modern-landing .coach-section__steps { margin-top: 24px; }
.modern-landing .routine { display: grid; grid-template-columns: 1fr .9fr; gap: 70px; max-width: calc(var(--v5-max) - 2 * var(--v5-pad)); margin: 100px auto 0; padding: 55px; border-radius: 24px; background: var(--modern-night); color: var(--modern-white); }
.modern-landing .routine h2 { margin-top: 20px; max-width: 10ch; font-size: clamp(2.375rem, 4vw, 3.4375rem); letter-spacing: -.055em; line-height: 1.1; }
.modern-landing .routine .eyebrow { color: var(--modern-blue); }
.modern-landing .routine__intro > p { margin-top: 22px; max-width: 38ch; font-size: 0.9375rem; line-height: 1.8; color: var(--modern-night-text); }
.modern-landing .routine__intro > .routine__note { font-size: 0.75rem; }
.modern-landing .routine__caption { display: block; margin-bottom: 15px; font-size: 0.625rem; text-transform: uppercase; letter-spacing: .12em; color: var(--modern-blue); }
.modern-landing .routine__week { align-self: center; }
.modern-landing .routine__week > div { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid #ffffff26; }
.modern-landing .routine__week > div > span:first-child { font-size: 0.625rem; width: 30px; color: var(--modern-blue); }
.modern-landing .routine__week strong { font-size: 0.875rem; font-weight: 500; }
.modern-landing .routine__week > div > span:last-child { margin-left: auto; color: var(--modern-blue); }
.modern-landing .results { padding-top: 100px; }
.modern-landing .results__head h2 { font-size: 2.75rem; font-weight: 600; letter-spacing: -.05em; }
.modern-landing .results__grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 26px; max-width: 100%; }
.modern-landing .result-card { max-width: 560px; }

/* Money and inclusions remain server-rendered from the existing sources. */
.modern-landing .pricing { padding-top: 100px; }
.modern-landing .pricing > .section-intro { max-width: 700px; margin-bottom: 34px; }
.modern-landing .pricing__grid { gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* GH #894. Jedan paket, pa jedan stupac -- i to omeđen, a ne razvučen. Mreža je
   pisana za tri kartice: s jednom bi `repeat(3, ...)` ostavio dva prazna stupca
   i kartica bi stajala uz lijevi rub kao da su druge dvije pale, a da je pusti
   da zauzme cijelu širinu dobio bi se redak teksta od 1100 px. Širina je zato
   ona koju kartica ionako ima u troslojnoj mreži, a `justify-content` je
   centrira. Modifikator se piše na mreži, a ne na kartici, jer je ovo pravilo o
   rasporedu stupaca i ničemu drugom; sama kartica ostaje obična `.plan`.

   Širina je 680, a ne 420 koliko kartica ima u troslojnoj mreži: sadržaj
   paketa i nagrade stoje jedno uz drugo (.plan__sadrzaj niže), pa kartica
   treba dva stupca teksta. U jednom stupcu bi ista kartica bila viša od
   zaslona od 768 px i LandingMotionE2ETest bi je tražio cijelu u vidnom polju
   nakon skoka na #cjenovnik -- što je i bio prvi odgovor te suite na nju. */
.modern-landing .pricing__grid--jedan { grid-template-columns: minmax(0, 680px); justify-content: center; }
/* GH #977. Basic, Premium i Premium Pro stoje u svojoj mrezi, ispod kartice
   1+1 kad je i ona u prodaji. Tri kartice zadrzavaju tri stupca odozgo; jedna
   ili dvije dobivaju stupce sirine kakvu kartica ima u troslojnoj mrezi,
   centrirane, umjesto da stoje uz lijevi rub s praznim stupcima do sebe. Dva
   stupca samo od 761px, gdje i tri stoje jedan uz drugi; uze od toga sve
   kartice idu jedna ispod druge (`.pricing__grid { 1fr }` nize). Kartica 1+1
   se ne mijenja. */
.modern-landing .pricing__grid.is-jedna { grid-template-columns: minmax(0, 420px); justify-content: center; }
@media (min-width: 761px) {
  .modern-landing .pricing__grid.is-dvije { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
}
.modern-landing .pricing__grid + .pricing__grid { margin-top: 18px; }
.modern-landing .pricing__prazno { text-align: center; color: var(--v5-muted); }
.modern-landing .plan { gap: 16px; border-radius: 18px; padding: 34px 28px 28px; }
.modern-landing .plan h3 { font-size: 0.8125rem; letter-spacing: .08em; color: var(--v5-ink); }
.modern-landing .plan__for { min-height: 3em; max-width: 30ch; font-size: 0.875rem; line-height: 1.6; color: var(--v5-body); }
.modern-landing .plan__poruka { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--v5-ink); }

/* GH #966. Podebljana recenica ispod naslova 1+1, s "Novi Zivot" u bojama znaka
   marke: N je u znaku bijelo, Z plavo (#579cd9). Bijelo slovo na svijetloj
   kartici ne postoji, a ni plava #579cd9 na njoj nema dovoljno kontrasta, pa
   dvije rijeci stoje na tamnoj plocici -- isto kao znak, koji u svijetloj temi
   nosi izvorne boje na tamnoj znacki. Plocica je --modern-night, koji se s
   temom ne okrece, pa su obje rijeci u obje teme iste boje na istoj podlozi
   (bijelo ~14:1, plavo ~5:1). Na tamnoj podlozi (GH #968) plocica nestaje, pa se
   i njen razmak gasi: --rijeci-marke-podloga i --rijeci-marke-razmak postavlja
   tamna podloga, a rijeci stoje kao obicne u recenici. Ista pravila, pod
   .modern-checkout, nosi checkout-modern.css za /placanje. */
/* GH #990. Vlasnik 20.10.2026: plocice vise nema ni na svijetloj podlozi. "Novi"
   je boje teksta, a "Zivot" iste plave kao "besplatno" (--rijec-besplatno-boja:
   #2868b4 na svijetlom, plava znaka #579cd9 na tamnom), pa gornja varijabla
   --rijeci-marke-podloga vise nista ne mijenja. */
.modern-landing .rijeci-marke { white-space: nowrap; }
.modern-landing .rijeci-marke__novi { color: inherit; }
.modern-landing .rijeci-marke__zivot { color: var(--rijec-besplatno-boja, var(--v5-accent)); }

/* GH #970. "besplatno" u naslovu i u recenici kartice 1+1 je plava znaka. Na
   svijetloj kartici #579cd9 ima ~2.9:1, a naslov je sitan, pa ondje stoji
   tamnija plava iz iste palete, --v5-accent (#2868b4, ~5.6:1); na tamnoj
   podlozi --rijec-besplatno-boja vraca pravu plavu znaka, isti uzorak kao
   --rijeci-marke-podloga iz GH #968.

   Dvotocka iza "Novi Život" je unutar plocice, uz rub rijeci (svijetla na
   plocici); bez plocice (--rijeci-marke-dvotocka: currentColor) je boje teksta.

   Kartica 1+1 dok ponuda traje (.plan.plan--ponuda) je glavna kartica odjeljka:
   - traka "Specijalna ponuda" preko cijelog gornjeg ruba, u gradijentu plave
     znaka (--ponuda-gradijent, ne okrece se s temom, kao --modern-night). Tekst
     je svijetao i stoji na tamnijem, lijevom kraju; svijetli kraj #579cd9 je
     desno, gdje teksta nema.
   - porub od 3px u istom gradijentu (dvije pozadine: kartica na padding-box,
     gradijent na border-box), plavi sjaj koji na hover jaca, i veci naslov.
   - jedan blagi odsjaj preko trake svakih 6 s; pod prefers-reduced-motion nema
     animacije. Traka je u toku dokumenta, a ne apsolutna, pa se smije prelomiti
     na uskom ekranu; zato kartica razmak sa strane drzi u --ponuda-bok i traka
     ga negativnom marginom ponisti. Ista pravila, pod drugim imenima, nosi
     checkout-modern.css za /placanje. */
.modern-landing .rijec-besplatno { color: var(--rijec-besplatno-boja, var(--v5-accent)); }
/* GH #1054. Naslov kartice 1+1: "1 + 1" je boje naslova (bez zlatne jedinice,
   vlasnik 22.10.2026.), "besplatno" velika slova samo
   ovdje (isti kljuc u recenici ostaje malim slovima). Jedan redak i na 390px. */
.modern-landing .plan.plan--ponuda h3 { white-space: nowrap; }
.modern-landing h3 .rijec-besplatno { text-transform: uppercase; }
.modern-landing .rijeci-marke__dvotocka { color: inherit; }
.modern-landing .plan.plan--ponuda {
  --ponuda-bok: 28px; --ponuda-pod: var(--v5-surface); --ponuda-zlato: #c9a45c;
  padding-top: 0;
  border: 3px solid transparent; border-radius: 20px;
  background: linear-gradient(var(--ponuda-pod) 0 0) padding-box, var(--ponuda-gradijent) border-box;
  box-shadow: 0 0 0 1px #2868b414, 0 22px 56px -24px #2868b48c, 0 0 40px -12px #579cd966;
  transition: box-shadow .3s ease;
}
.modern-landing .plan.plan--ponuda:hover {
  box-shadow: 0 0 0 1px #2868b426, 0 26px 64px -22px #2868b4b3, 0 0 56px -8px #579cd98c;
}
.modern-landing .plan.plan--ponuda h3 { font-size: clamp(1.625rem, .75rem + 5vw, 2rem); font-weight: 800; line-height: 1.2; letter-spacing: .02em; }
.modern-landing .ponuda-traka {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 calc(-1 * var(--ponuda-bok)) 10px; padding: 14px var(--ponuda-bok) 15px;
  border-radius: 17px 17px 0 0;
  background: var(--ponuda-gradijent); color: var(--modern-white);
  text-shadow: 0 1px 2px #152d4266;
}
.modern-landing .ponuda-traka__naslov { font-size: 0.9375rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; line-height: 1.2; }
.modern-landing .ponuda-traka__rok { font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.modern-landing .ponuda-traka__preostalo { white-space: nowrap; font-weight: 800; }
.modern-landing .ponuda-traka__preostalo::before { content: "· "; font-weight: 600; }
.modern-landing .plan__pristup-datum { white-space: nowrap; }
.modern-landing .ponuda-traka::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, #fffefa47 50%, transparent 65%);
  transform: translateX(-100%);
  animation: ponuda-odsjaj 6s ease-in-out 1s infinite;
}
@keyframes ponuda-odsjaj { 0% { transform: translateX(-100%); } 22%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .modern-landing .ponuda-traka::after { animation: none; }
  .modern-landing .plan.plan--ponuda { transition: none; }
}
/* GH #992. Vlasnik 20.10.2026. izabrao "ponocno plavu i zlato": traka je tamna
   ponocno plava (ne okrece se s temom), ispod nje tanka zlatna linija, a naslov
   i "jos N dana" su zlatni i presijavaju se -- svijetli odsjaj putuje kroz slova
   (gradijent u tekstu, background-clip: text). Pod prefers-reduced-motion zlato
   stoji mirno: blok na dnu datoteke gasi svaku animaciju unutar .modern-landing.
   Sjaj preko cijele trake (::after) je blazi i sporiji. */
.modern-landing .ponuda-traka {
  background:
    radial-gradient(120% 160% at 0% 0%, #1d4a7a 0%, transparent 55%),
    linear-gradient(115deg, #0b1d33 0%, #143865 52%, #1c4f86 100%);
  box-shadow: inset 0 -1px 0 #d4b06a8c, inset 0 1px 0 #ffffff1f;
  padding-top: 16px; padding-bottom: 17px;
}
.modern-landing .ponuda-traka__naslov { letter-spacing: .34em; font-weight: 700; }
.modern-landing .ponuda-traka__rok { color: #d9e3ee; font-weight: 500; letter-spacing: .02em; }
.modern-landing .ponuda-traka__naslov, .modern-landing .ponuda-traka__preostalo {
  background: linear-gradient(100deg, var(--ponuda-zlato) 0%, #e8cf94 35%, #fff6dc 50%, #e8cf94 65%, var(--ponuda-zlato) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
.modern-landing .ponuda-traka::after { background: linear-gradient(100deg, transparent 38%, #f6e9c62e 50%, transparent 62%); animation-duration: 8s; }
.modern-landing .ponuda-traka__naslov, .modern-landing .ponuda-traka__preostalo { animation: ponuda-zlato 3.2s ease-in-out infinite; }
@keyframes ponuda-zlato { 0% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }
.modern-landing .plan__price { margin-top: 8px; gap: 12px; flex-wrap: wrap; }
.modern-landing .plan__price strong { font-size: 3.25rem; font-weight: 600; letter-spacing: -.065em; }
.modern-landing .plan__peg { font-size: 0.875rem; }
.modern-landing .plan__period { margin-top: -9px; padding-bottom: 22px; border-bottom: 1px solid var(--v5-line); color: var(--v5-muted); font-size: 0.8125rem; }
.modern-landing .plan__includes { gap: 13px; font-size: 0.875rem; line-height: 1.6; }
.modern-landing .plan__includes li { position: relative; padding-left: 21px; }
.modern-landing .plan__includes li::before { content: '✓'; position: absolute; left: 0; color: var(--v5-accent-dark); }
/* GH #919. Treninzi su uzivo, a ljudi su ih citali kao snimljene: prva stavka je jedina podebljana i u naglasnoj boji kartice. */
.modern-landing .plan__includes li.plan__ukljuceno--uzivo { font-weight: 700; color: var(--v5-accent-dark); }
/* GH #970. Val niz popis kartice 1+1: istaknuce putuje od prve stavke do
   zadnje, pa nakon stanke krece ispocetka. Samo kad korisnik nije trazio manje
   pokreta -- pod prefers-reduced-motion: reduce ovaj blok ne vrijedi, prva
   stavka ostaje staticno istaknuta kao gore (GH #919), a blok na dnu datoteke
   ionako gasi svaku animaciju unutar .modern-landing.

   Podebljanje je lazno: boja naglaska i -webkit-text-stroke, bez font-weight,
   jer pravo podebljanje siri tekst i prelama retke dok val prolazi. Kvacica
   je ionako u boji naglaska, a obrub nasljeduje od stavke.

   Vrijeme: --val-korak je razmak izmedu dviju stavki (jedan broj za
   podesiti). Ciklus je sest koraka (sedma stavka krece sest koraka nakon prve)
   plus 2.48 s: stavka svijetli prvih 20 % ciklusa (~0.76 s uz korak 0.22 s),
   a nakon zadnje stavke ostaje ~1.7 s stanke prije novog vala. */
@media (prefers-reduced-motion: no-preference) {
  .modern-landing .plan--otvorenje .plan__includes {
    --val-korak: .3s;
    --val-ciklus: calc(var(--val-korak) * 6 + 2.6s);
  }
  .modern-landing .plan--otvorenje .plan__includes li.plan__ukljuceno--uzivo { font-weight: inherit; color: inherit; }
  .modern-landing .plan--otvorenje .plan__includes li {
    border-radius: 6px;
    animation: ukljuceno-val var(--val-ciklus) ease-in-out infinite;
    animation-delay: calc(var(--val-korak) * var(--val-redni, 0));
  }
  .modern-landing .plan--otvorenje .plan__includes li:nth-child(2) { --val-redni: 1; }
  .modern-landing .plan--otvorenje .plan__includes li:nth-child(3) { --val-redni: 2; }
  .modern-landing .plan--otvorenje .plan__includes li:nth-child(4) { --val-redni: 3; }
  .modern-landing .plan--otvorenje .plan__includes li:nth-child(5) { --val-redni: 4; }
  .modern-landing .plan--otvorenje .plan__includes li:nth-child(6) { --val-redni: 5; }
  .modern-landing .plan--otvorenje .plan__includes li:nth-child(7) { --val-redni: 6; }
}
/* GH #982. Boja vala je zasebno svojstvo: u svijetloj temi tamnija (#143865, izbor
   vlasnika 20.10.2026), u tamnoj
   je bijela s blagim plavim sjajem (--val-sjaj kao text-shadow; u svijetloj none),
   GH #985, također izbor vlasnika 20.10.2026.
   GH #989. Na mobitelu sama boja teksta nije bila vidljiva, pa iza stavke svijetli
   traka --val-traka (box-shadow je siri 6px bez pomicanja retka). Lazno
   podebljanje (-webkit-text-stroke) je maknuto jer je u prijelazu treperilo.
   Fluidnije: stavka se pali i gasi kroz 28 % ciklusa (~1.2 s uz korak 0.3 s),
   pa se susjedne preklapaju i val tece umjesto da skace. */
@keyframes ukljuceno-val {
  0%, 28%, 100% { color: currentColor; text-shadow: none; background-color: transparent; box-shadow: 0 0 0 6px transparent; }
  12% { color: var(--val-boja); text-shadow: var(--val-sjaj); background-color: var(--val-traka); box-shadow: 0 0 0 6px var(--val-traka); }
}
.modern-landing .plan__excludes { font-size: 0.75rem; line-height: 1.7; }
/* GH #894. Nagrade za transformacije su zaseban blok, pa su i nacrtane kao
   blok: crta ih odvaja od sadržaja paketa, a popis nagrada nema kvačice koje
   nosi .plan__includes -- kvačica znači "ovo dobivaš svaki mjesec", a nagrada
   je ishod natjecanja s rokom. Crta je vodoravna kad je blok ispod popisa, a
   okomita kad stoji uz njega (upit niže). */
.modern-landing .plan__nagrade { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--v5-line); display: flex; flex-direction: column; gap: 8px; }
.modern-landing .plan__nagrade h4 { font-size: 0.8125rem; font-weight: 600; letter-spacing: .02em; }
.modern-landing .plan__nagrade-rok { font-size: 0.75rem; line-height: 1.6; color: var(--v5-muted); }
.modern-landing .plan__nagrade-popis { display: flex; flex-direction: column; gap: 7px; font-size: 0.875rem; line-height: 1.5; color: var(--v5-body); }
/* Osnovno stanje: isti okomiti ritam koji .plan ima, jer je ovo omotac
   oko dvoje djece koja su prije stajala izravno u njemu. Stoji IZNAD
   upita nize, a ne ispod njega: specificnost je ista, pa bi pravilo
   napisano poslije ponistilo `display: grid` na svakoj sirini. */
.modern-landing .plan__sadrzaj { display: flex; flex-direction: column; gap: 16px; }
/* Dva stupca samo kad ima mjesta: iznad 760 px popis sadržaja i nagrade
   stoje jedno uz drugo, a crta koja ih dijeli seli s vrha na lijevi rub.
   Ispod toga se .plan__sadrzaj ponaša kao običan blok i sve ostaje u
   jednom stupcu, pa se pravilo piše kao min-width i ne treba ga nitko
   poništavati niže. */
@media (min-width: 761px) {
  .modern-landing .plan__sadrzaj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
  .modern-landing .plan__sadrzaj .plan__nagrade { margin-top: 0; padding-top: 0; border-top: 0; padding-left: 26px; border-left: 1px solid var(--v5-line); }
}
/* I sama kartica se dijeli, ali tek kad ima gdje: lijevo ime, cijena i gumb,
   desno sve sto paket sadrzi. Nije ukras nego mjera. U jednom stupcu je ova
   kartica visoka oko 650 px, a LandingMotionE2ETest nakon skoka na #cjenovnik
   trazi cijelu karticu u vidnom polju na zaslonu od 1366x768 -- ispod zaglavlja
   i uvoda odjeljka ostaje nesto manje od 500 px. Tri kartice su stale jer je
   svaka nosila cetiri do pet stavki; ova nosi sedam i jos blok nagrada, pa ono
   sto je bilo jedno ispod drugoga mora stati jedno uz drugo. */
@media (min-width: 981px) {
  .modern-landing .pricing__grid--jedan { grid-template-columns: minmax(0, 940px); }
  /* Sest redaka se imenuje izrijekom jer `grid-row: 1 / -1` racuna -1 po
     ZADANOJ mrezi: bez ovog retka sadrzaj bi zauzeo samo prvi redak, razvukao
     ga na svoju visinu i kartica bi ispala visa nego u jednom stupcu. Sest je
     koliko kartica ima djece pokraj .plan__sadrzaj; od GH #966, s recenicom
     ispod naslova, sedam, a od GH #970, s trakom ponude iznad naslova, osam
     (kad ponuda istekne, osmi redak ostaje prazan i ne smeta). Traka ide preko
     oba stupca, pa sadrzaj tada pocinje u drugom retku. */
  .modern-landing .pricing__grid--jedan .plan { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); grid-template-rows: repeat(8, auto); column-gap: 40px; row-gap: 16px; align-items: start; }
  .modern-landing .pricing__grid--jedan .plan > * { grid-column: 1; }
  .modern-landing .pricing__grid--jedan .plan__sadrzaj { grid-column: 2; grid-row: 1 / -1; }
  .modern-landing .pricing__grid--jedan .plan .btn { margin-top: 10px; }
  .modern-landing .pricing__grid--jedan .plan > .ponuda-traka { grid-column: 1 / -1; }
  .modern-landing .pricing__grid--jedan .plan--ponuda .plan__sadrzaj { grid-row: 2 / -1; }
  /* GH #994. Popis sadrzaja i nagrade zajedno stoje okomito na sredini visine
     lijevog stupca, a vrhovi su im u istoj ravnini. */
  .modern-landing .pricing__grid--jedan .plan__sadrzaj { align-self: center; }
  /* GH #970. S trakom kartica mora i dalje cijela stati u 1366x768 nakon
     skoka na #cjenovnik (LandingMotionE2ETest), s ~50px zraka: uzi razmak
     redaka i traka bez vlastite donje margine. */
  .modern-landing .pricing__grid--jedan .plan.plan--ponuda { row-gap: 12px; }
  .modern-landing .pricing__grid--jedan .plan > .ponuda-traka { margin-bottom: 0; }
}
.modern-landing .plan .btn { margin-top: auto; }
.modern-landing .plan .rig { height: 44px; flex-shrink: 0; margin-block: -10px; }
/* GH #994. Na kartici 1+1 sipka ide od ruba do ruba stupca, kao crta iznad
   nje i gumb ispod, pa su sva tri iste sirine. */
.modern-landing .plan--otvorenje .rig__bar { left: 0; right: 0; }
.modern-landing .plan--featured { background: var(--modern-night); color: var(--modern-white); border-color: var(--modern-night); }
.modern-landing .plan--featured :is(h3, .plan__price strong) { color: var(--modern-white); }
.modern-landing .plan--featured :is(.plan__for, .plan__peg, .plan__period, .plan__includes, .plan__excludes) { color: var(--modern-night-text); }
.modern-landing .plan--featured .plan__period { border-color: #ffffff38; }
.modern-landing .plan--featured .plan__includes li::before { color: var(--modern-blue); }
.modern-landing .plan--featured .btn { background: var(--modern-blue); color: var(--modern-night); }
.modern-landing .plan--featured .btn:hover { background: var(--modern-white); }
.modern-landing .plan__badge { top: 0; right: 22px; border-radius: 0 0 7px 7px; background: var(--modern-blue); color: var(--modern-night); padding: 6px 9px; font-size: 0.5rem; }
/* GH #926. Oznake uz cijenu i uz "mjesečno" te dvije fusnote ispod kartice.
   Oznaka je sitna i podignuta, ali ostaje poveznica koju se vidi i u koju se
   moze stati prstom. Fusnote su poravnate sa sirinom kartice iznad njih (680 px
   do 980 px zaslona, 940 px iznad), a znak visi lijevo od teksta pa se oba
   retka citaju od istog ruba. */
.modern-landing .plan__iznos { display: inline-flex; align-items: flex-start; }
.modern-landing .plan__fusnota-oznaka { display: inline-block; margin-left: 2px; padding-inline: 2px; color: var(--v5-muted); font-size: 0.9375rem; font-weight: 600; line-height: 1; text-decoration: none; }
.modern-landing .plan__iznos .plan__fusnota-oznaka { margin-top: 6px; font-size: 1.25rem; }
.modern-landing .plan__fusnota-oznaka:hover { color: var(--v5-ink); }
.modern-landing .plan__fusnote { max-width: 680px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 6px; color: var(--v5-muted); font-size: 0.75rem; line-height: 1.6; }
.modern-landing .plan__fusnote p { display: grid; grid-template-columns: 2.2ch minmax(0, 1fr); margin: 0; }
.modern-landing .plan__fusnote p:target { color: var(--v5-ink); }
.modern-landing .plan__fusnota-znak { font-weight: 600; }
@media (min-width: 981px) {
  .modern-landing .plan__fusnote { max-width: 940px; }
}

/* Kartica otvorenja (GH #894). Paket je jedan i nosi otvorenje programa, pa
   kartici treba tezina koju tri kartice jedna uz drugu nisu trebale: po porubu
   kruzi svjetlo, a ispod nje stoji sjena u boji naglaska.

   Porub je jedan pseudo-element, ne dva sloja u sendvicu. Maska od dvije plohe
   -- jedna preko cijelog okvira, druga samo preko sadrzaja -- odnese sredinu i
   ostavi samo vrpcu od 2px, pa kartica ne treba overflow: hidden i nista joj se
   ne podvlaci pod sadrzaj. Vrpca stoji tocno izvan ruba, tako da postojeci okvir
   od 1px ostaje netaknut: kad svjetla nema, kartica i dalje ima pravi rub.

   Kut je registriran kao <angle> jer se neregistrirano svojstvo ne moze
   interpolirati -- animacija bi mu skakala na pola puta umjesto da klizi. Gdje
   @property ne postoji, cijeli gradijent otpadne i ostane kartica s okvirom:
   gubi se ukras, ne citljivost.

   Smirivanje pokreta ne pise ovdje. Blok na dnu ove datoteke gasi animaciju
   svakom *::before unutar .modern-landing s !important, pa bi pravilo ovdje
   bilo drugi zapis istoga i prvi koji bi se razisao. */
@property --otvorenje-kut {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes otvorenje-u-krug { to { --otvorenje-kut: 360deg; } }
.modern-landing .plan--otvorenje { position: relative; box-shadow: 0 26px 64px -42px var(--v5-accent); }
.modern-landing .plan--otvorenje::before {
  content: ''; position: absolute; inset: -3px; padding: 3px; border-radius: 21px; pointer-events: none;
  background: conic-gradient(from var(--otvorenje-kut),
      transparent 0 46%, var(--v5-accent) 66%, var(--v5-accent-dark) 74%,
      var(--v5-accent) 82%, transparent 97% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: otvorenje-u-krug 4s linear infinite;
}
.modern-landing .motion-faq { padding-top: 100px; gap: 80px; }
.modern-landing .motion-faq__list summary { font-size: 1rem; }
.modern-landing .final { padding-top: 90px; }
.modern-landing .final__box { position: relative; padding: 55px; background: var(--v5-accent-soft); border-radius: 24px; overflow: hidden; }
.modern-landing .final__box h2 { margin: 24px 0 18px; max-width: 13ch; font-size: clamp(2.5rem, 5vw, 4.25rem); font-weight: 600; line-height: 1.04; }
.modern-landing .final__lead { color: var(--v5-body); font-size: 1rem; }
.modern-landing .final__actions { margin-top: 30px; }
.modern-landing .final__actions .note { font-size: 0.75rem; color: var(--v5-muted); }
/* GH #471. Uputa za iPhone i iPad ide u vlastiti redak, ispod gumba, na svakoj
   širini. Bez ovoga je dobiva tek ispod 760px, gdje .final__actions ionako
   postane stupac — a iPad je 768px uspravno i 1024px vodoravno, dakle iznad tog
   praga, i ondje bi sjela uz primarni gumb. Baš je iPad uređaj kojem uputa i
   služi, jer na njemu instalacija ide samo kroz izbornik Podijeli.

   Pisano je "width", a ne "flex-basis": u retku su istovjetni (flex-basis: auto
   ionako razriješi na width i izazove prijelom), a ispod 760px, u stupcu,
   flex-basis gađa glavnu os — dakle visinu — pa bi 100% ondje značilo nešto
   sasvim drugo. Width je na toj širini poprečna os i bez učinka: uputa je ondje
   i bez pravila već preko cijele širine.

   Gađa se naš element, a ne .final__actions .note iznad: taj selektor vrijedi
   za svaku napomenu koju ovaj blok ikad dobije, a ovo je pravilo samo o uputi. */
.modern-landing .final__actions [data-instaliraj-upute] { width: 100%; }
/* Podnožje je od GH #458 jedan fragment i jedna datoteka, podnozje.css. */
.modern-landing .cookie-banner { left: auto; right: 20px; bottom: 20px; width: min(420px, calc(100% - 40px)); border: 1px solid var(--v5-line); border-radius: 16px; background: var(--v5-surface); color: var(--v5-ink); box-shadow: var(--modern-shadow); }
.modern-landing .cookie-banner__inner { display: block; padding: 22px; }
.modern-landing .cookie-banner__text { max-width: none; color: var(--v5-body); font-size: 0.75rem; line-height: 1.7; }
/* GH #723: traka je od ovog zadatka dobila poveznicu na politiku privatnosti,
   a v5-base.css je oboji u --v5-on-dark. Taj token je par za --v5-ink, kakav
   traka ondje i jest; ovdje je pozadina --v5-surface, pa je ista poveznica
   ispala #1e1e1e na #272b30 -- crno na tamnome, izmjereno u pregledniku.
   Boja je zato --v5-ink, isti token koji traka iznad vec navodi kao svoju boju
   teksta: poveznica je tako jaca od --v5-body odlomka, kakav je odnos i u
   v5-base.css. Podcrtavanje dolazi odande i ostaje. */
.modern-landing .cookie-banner__text a { color: var(--v5-ink); }
.modern-landing .cookie-banner__actions { display: flex; gap: 10px; margin-top: 16px; }
.modern-landing .cookie-banner .btn { flex: 1; padding: 11px 12px; min-height: 44px; font-size: 0.6875rem; }
.modern-landing .cookie-banner .btn--outline { border-color: var(--v5-line); color: var(--v5-ink); }
.modern-landing .cookie-banner .btn--outline:hover { background: var(--v5-accent-soft); }
.modern-landing .sticky-cta { display: none; }

@media (max-width: 1050px) {
  .modern-landing .site-header__inner { gap: 18px; }
  .modern-landing .site-nav { gap: 14px; }
  .modern-landing .hero.brand-hero { gap: 28px; grid-template-columns: 1fr 1fr; padding-top: 30px; }
  .modern-landing .coach-stage { min-height: 570px; }
  .modern-landing .journey, .modern-landing .coach-section { gap: 35px; }
  .modern-landing .coach-section { grid-template-columns: 1fr; }
  .modern-landing .coach-section__cards { grid-template-columns: 1fr 1fr; }
  .modern-landing .coach-card { display: grid; grid-template-columns: .8fr 1fr; }
  .modern-landing .coach-card__visual { border-radius: 17px 0 0 17px; }
  .modern-landing .routine { padding: 35px; gap: 35px; }
  .modern-landing .plan { padding: 32px 20px 22px; }
  .modern-landing .plan.plan--ponuda { --ponuda-bok: 20px; }
}
@media (max-width: 760px) {
  .modern-landing .sticky-cta { display: flex; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); padding: 12px 16px; border: 1px solid #ffffff26; border-radius: 14px; background: var(--modern-night); box-shadow: var(--modern-shadow); }
  .modern-landing .sticky-cta__price { color: var(--modern-night-text); font-size: 0.6875rem; }
  .modern-landing .sticky-cta__price strong { color: var(--modern-white); }
  .modern-landing .sticky-cta .btn { min-height: 44px; padding: 10px 18px; background: var(--modern-blue); color: var(--modern-night); }
  .modern-landing :is(section[id], [data-coach]) { scroll-margin-top: 135px; }
  .modern-landing section[id] { scroll-margin-top: var(--section-anchor-offset, 64px); }
  .modern-landing .site-header__inner { flex-wrap: wrap; gap: 8px; padding-block: 10px; }
  .modern-landing .site-header__inner > .logo { font-size: 0.75rem; }
  .modern-landing .znak-marke { width: 33px; height: 33px; }
  .modern-landing .site-header__inner > .btn { margin-left: auto; min-height: 44px; padding: 10px 13px; font-size: 0.6875rem; }
  .modern-landing .site-nav { order: 3; width: 100%; justify-content: space-between; margin: 0; gap: 12px; font-size: 0.6875rem; }
  .modern-landing .site-nav > a { padding-block: 9px; }
  .modern-landing .hero.brand-hero { margin-top: 105px; grid-template-columns: 1fr; gap: 28px; padding-top: 30px; padding-bottom: 25px; }
  .modern-landing .hero .hero__body { padding: 0; }
  .modern-landing .hero h1 { font-size: clamp(3.625rem, 11.5vw, 5.3125rem); margin-top: 20px; }
  .modern-landing .hero .lead { font-size: 0.9375rem; max-width: 44ch; line-height: 1.75; }
  .modern-landing .hero__actions { margin-top: 24px; }
  .modern-landing .hero__secondary { margin-top: 4px; }
  .modern-landing .hero__countdown-label, .modern-landing .hero .countdown { display: none; }
  .modern-landing .coach-stage { min-height: 390px; max-width: none; border-radius: 20px 20px 70px 20px; }
  .modern-landing .coach-stage__studio { object-position: 50% 65%; }
  .modern-landing .coach-stage__brand { top: 22px; width: 110px; left: auto; right: 20px; transform: none; }
  .modern-landing .coach-stage__caption { bottom: 32px; left: 24px; }
  .modern-landing .foundation-strip { gap: 14px; padding: 22px 0; margin-inline: var(--v5-pad); }
  .modern-landing .foundation-strip p { flex-basis: 100%; text-align: center; margin: 0; }
  .modern-landing .program, .modern-landing .journey, .modern-landing .coach-section, .modern-landing .pricing, .modern-landing .motion-faq, .modern-landing .results, .modern-landing .final { padding-top: 65px; }
  .modern-landing .program__head { display: block; }
  .modern-landing .section-description { max-width: 36ch; margin-top: 20px; }
  .modern-landing .section-intro h2 { font-size: 2.25rem; }
  .modern-landing .program__track { grid-template-columns: 1fr 1fr; gap: 15px; }
  .modern-landing .program__card, .modern-landing .program__card.is-active { grid-column: auto; }
  .modern-landing .program__card--3, .modern-landing .program__card--3.is-active { grid-column: 1 / -1; }
  .modern-landing .program__visual { height: 180px; }
  .modern-landing .program__title { margin: 20px 18px 9px; font-size: 1.375rem; }
  .modern-landing .program__description { margin-inline: 18px; }
  .modern-landing .program__detail { margin-inline: 18px; }
  .modern-landing :is(.program__card--3, .program__card--4, .program__card--5) .program__select { padding: 0 0 22px; }
  .modern-landing :is(.program__card--4, .program__card--5) .program__visual { position: relative; top: auto; left: auto; width: 100%; height: 120px; border-radius: 17px 17px 0 0; }
  .modern-landing .program__card--3 .program__visual { height: 150px; }
  .modern-landing .journey, .modern-landing .motion-faq { grid-template-columns: 1fr; gap: 30px; }
  .modern-landing .coach-section__cards { grid-template-columns: 1fr; }
  .modern-landing .coach-card__visual { min-height: 200px; }
  .modern-landing .routine { margin: 65px var(--v5-pad) 0; grid-template-columns: 1fr; padding: 30px 26px; gap: 35px; }
  .modern-landing .routine h2 { max-width: 13ch; font-size: 2.625rem; }
  .modern-landing .pricing__grid { grid-template-columns: 1fr; gap: 22px; }
  .modern-landing .plan { padding: 32px 26px 26px; }
  .modern-landing .plan.plan--ponuda { --ponuda-bok: 26px; }
  .modern-landing .plan__for { min-height: 0; }
  .modern-landing .plan__price { margin-top: 0; }
  .modern-landing .plan__includes { font-size: 0.9375rem; }
  .modern-landing .plan__excludes { font-size: 0.8125rem; }
  .modern-landing .plan .btn { margin-top: 8px; }
  .modern-landing .final__box { padding: 32px 26px; }
  .modern-landing .final__box h2 { font-size: 2.8125rem; }
  .modern-landing .final__actions { align-items: start; flex-direction: column; gap: 16px; }
}
@media (max-width: 430px) {
  .modern-landing .program__track { grid-template-columns: 1fr; }
  .modern-landing .program__card, .modern-landing .program__card.is-active { grid-column: auto; }
  .modern-landing .program__visual { height: 200px; }
  .modern-landing :is(.program__card--4, .program__card--5) .program__visual { height: 105px; }
  .modern-landing .program__description { font-size: 0.9375rem; }
  .modern-landing .coach-stage { min-height: 330px; }
  .modern-landing .coach-card { grid-template-columns: 1fr; }
  .modern-landing .coach-card__visual { min-height: 120px; border-radius: 17px 17px 0 0; }
  .modern-landing .coach-card__visual > .coach-card__word { font-size: 2.1875rem; }
  .modern-landing .coach-card__body { padding: 22px; }
  .modern-landing .cookie-banner { right: 12px; bottom: 12px; width: calc(100% - 24px); }
  .modern-landing .cookie-banner__inner { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.modern-landing) { scroll-behavior: auto; }
  .modern-landing *, .modern-landing *::before, .modern-landing *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .modern-landing .btn:hover { transform: none; }
}