/* eTrener landing — design tokens & styles (handoff 1:1) */

:root{
  --maroon:#0A2A47; --maroon-2:#071A2C; --red:#003366; --red-ink:#001F3F;
  --cream:#FFF7F1; --ink:#0E1621; --ink-soft:rgba(14,22,33,.7); --line:rgba(14,22,33,.12);
  --paper-line:rgba(255,247,241,.18); --green:#2FAE60; --sale:#D92D20;
  --font-head:'Sora',sans-serif; --font-body:'IBM Plex Sans',sans-serif;
  --card-shadow:0 1px 2px rgba(14,22,33,.04), 0 12px 32px rgba(14,22,33,.06);
}
@media (prefers-color-scheme: dark){
  :root{ --cream:#0E1621; --ink:#FBEEE7; --ink-soft:rgba(251,238,231,.72); --line:rgba(251,238,231,.14); }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
/* Mehko drsenje samo pri klikih znotraj strani; ob nalaganju s sidrom
   (#hokej) mora brskalnik skociti takoj, sicer se ne ustavi na cilju. */
html.smooth-scroll{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-body); overflow-x:hidden; position:relative; min-height:100vh;
}
::selection{ background:var(--red); color:#fff; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--red); outline-offset:2px;
}
img{ max-width:100%; }

/* Fiksna navigacija ne sme prekriti cilja sidra. */
#problem, #vizija, #ambasadorji, #faq, #novice, #obrazec, #resitev,
#proces{ scroll-margin-top:100px; }

/* Shared -------------------------------------------------------------- */
.wrap{ max-width:1280px; margin:0 auto; padding:88px 24px; }
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:48px; align-items:center; }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }

.kicker{
  display:inline-block; background:rgba(0,51,102,.1); color:var(--red-ink);
  font-weight:700; font-size:13px; letter-spacing:.03em;
  padding:7px 16px; border-radius:15px; margin-bottom:20px;
}
/* Ista znacka na temni podlagi (sekcija 03). */
.kicker--light{ background:rgba(255,255,255,.14); color:#fff; }
.h2{
  margin:0 0 20px; font-family:var(--font-head),sans-serif; font-weight:800;
  letter-spacing:-0.02em; font-size:clamp(28px,3.6vw,42px); max-width:720px;
}
.lead{ margin:0; font-size:18px; line-height:1.6; max-width:460px; color:var(--ink-soft); }
.lead--tight{ margin-top:16px; font-size:16px; }

.btn-outline{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:#fff; text-decoration:none;
  font-weight:700; font-size:15px; padding:13px 26px;
  border:1.5px solid rgba(255,255,255,.35); border-radius:15px;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-outline:hover{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.6);
}
.sports__more{ margin-top:28px; }

.btn-green{
  background:var(--green); color:#fff; text-decoration:none; font-weight:700;
  border:none; border-radius:15px; cursor:pointer; display:flex; align-items:center;
}

/* 00 Nav -------------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50; background:transparent;
  transition:background .3s ease, box-shadow .3s ease;
}
.site-header__inner{
  max-width:1280px; margin:0 auto; padding:18px 24px 40px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px;
  transition:padding .3s ease;
}
/* Povezave sredinsko poravnane med logotipom in CTA. */
.site-nav{ justify-content:center; }

/* Prilepljeno stanje: belo ozadje, crn text. */
.site-header.is-stuck{
  background:#fff;
  box-shadow:0 1px 2px rgba(14,22,33,.04), 0 8px 24px rgba(14,22,33,.08);
}
.site-header.is-stuck .site-header__inner{ padding:12px 24px; }
.site-header.is-stuck .site-nav a{ color:var(--ink); }
.site-header.is-stuck .logo img{ content:url('../img/logo-mark.png'); }

@media (prefers-color-scheme: dark){
  .site-header.is-stuck{ background:var(--cream); }
  .site-header.is-stuck .logo img{ content:url('../img/logo-white.png'); }
}
.logo{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  color:#fff; line-height:0;
}

.logo img{ height:75px; width:auto; display:block; transition:height .3s ease; }
.site-header.is-stuck .logo img{ height:60px; }
.site-nav{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.site-nav a{
  color:rgba(255,255,255,.9); text-decoration:none; font-size:17px; font-weight:500;
  transition:color .3s ease;
}
.site-header__cta{ font-size:15px; padding:13px 24px; min-height:46px; color:#fff; justify-self:end; }
.site-header__end{ display:flex; align-items:center; gap:14px; justify-self:end; }
/* Tik nad mejo predala (1024px) je vrstica tesna, zlasti v srbscini (Cenovnik). */
@media (max-width:1180px){ .site-nav{ gap:22px; } }

/* Izbirnik jezika ----------------------------------------------------- */
/* Gumb v glavi: globus + oznaka jezika (emoji zastavic Windows ne izrise). */
.lang-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:transparent; border:0;
  color:#fff; font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.04em;
  padding:9px 12px; border-radius:12px; transition:opacity .2s ease;
}
.lang-btn:hover{ opacity:.75; }
.site-header.is-stuck .lang-btn{ color:var(--ink); }
.lang-btn__globe{ flex:none; opacity:.9; }

/* Okno: bel list z mehko senco, seznam vrstic z oznako jezika, imenom in drzavo. */
.lang-modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; }
.lang-modal[hidden]{ display:none; }
.lang-modal__backdrop{ position:absolute; inset:0; background:rgba(4,14,26,.62); }
.lang-modal__box{
  position:relative; width:100%; max-width:440px; padding:28px;
  background:#fff; color:var(--ink); border-radius:28px;
  box-shadow:0 0 0 1px rgba(14,22,33,.06), 0 40px 100px -24px rgba(0,15,30,.55);
}
.lang-modal:not([hidden]) .lang-modal__backdrop{ animation:langFade .2s ease-out; }
.lang-modal:not([hidden]) .lang-modal__box{ animation:langIn .32s cubic-bezier(.2,.8,.2,1); }
@keyframes langFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes langIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }

.lang-modal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }
.lang-modal__title{
  margin:0; font-family:var(--font-head),sans-serif; font-weight:800;
  font-size:24px; line-height:1.15; letter-spacing:-.02em;
}
.lang-modal__sub{ margin:6px 0 0; font-size:14px; line-height:1.5; color:var(--ink-soft); }
.lang-modal__x{
  flex:none; display:grid; place-items:center; cursor:pointer;
  width:44px; height:44px; margin:-6px -6px 0 0; border-radius:50%;
  background:#F2F4F7; border:0; color:var(--ink);
  transition:background .2s ease, transform .25s ease;
}
.lang-modal__x:hover{ background:#E6E9EE; transform:rotate(90deg); }
.lang-modal__x:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(47,174,96,.4); }

.lang-modal__list{ display:grid; gap:8px; }
.lang-opt{
  display:flex; align-items:center; gap:14px; width:100%; min-height:68px;
  padding:12px 14px 12px 12px; border-radius:18px; text-align:left; cursor:pointer;
  background:#fff; border:1px solid rgba(14,22,33,.09); color:var(--ink);
  font-family:inherit; text-decoration:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.lang-opt:hover{ border-color:rgba(14,22,33,.2); box-shadow:0 10px 28px -14px rgba(0,15,30,.3); transform:translateY(-1px); }
.lang-opt:focus-visible{ outline:none; border-color:#2FAE60; box-shadow:0 0 0 3px rgba(47,174,96,.3); }
.lang-opt__code{
  flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:14px;
  background:#0A2A47; color:#fff;
  font-family:var(--font-head),sans-serif; font-weight:700; font-size:14px; letter-spacing:.06em;
  transition:background .2s ease;
}
/* Zastava države (9. 10. 2026): 4 : 3, zaobljena, s tanko obrobo, da bel
   pas slovenske in srbske zastave ne zbledi v belo kartico. */
.lang-opt__flag{
  flex:none; display:block; width:48px; height:36px; border-radius:8px; object-fit:cover;
  box-shadow:0 0 0 1px rgba(14,22,33,.12), 0 2px 6px rgba(14,22,33,.12);
}
.lang-opt__text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lang-opt__name{ font-family:var(--font-head),sans-serif; font-weight:700; font-size:16px; line-height:1.3; }
.lang-opt__region{ font-size:13px; line-height:1.4; color:var(--ink-soft); }
.lang-opt__mark{
  flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  color:rgba(14,22,33,.32); transition:color .2s ease, transform .2s ease, background .2s ease;
}
.lang-opt:hover .lang-opt__mark{ color:var(--ink); transform:translateX(3px); }
/* Izbrani: zelen rob, zelena oznaka in kljukica v zelenem krogu. */
.lang-opt.is-active{ background:rgba(47,174,96,.06); border-color:rgba(47,174,96,.6); box-shadow:inset 0 0 0 1px rgba(47,174,96,.6); }
.lang-opt.is-active:hover{ transform:none; }
.lang-opt.is-active .lang-opt__code{ background:#2FAE60; }
.lang-opt.is-active .lang-opt__mark{ background:#2FAE60; color:#fff; transform:none; }
/* Jeziki brez prevoda: vidni, a jih ni mogoce izbrati. */
.lang-opt[disabled]{ cursor:not-allowed; opacity:.5; }
.lang-opt[disabled]:hover{ border-color:rgba(14,22,33,.09); box-shadow:none; transform:none; }
.lang-modal__note{ margin:16px 0 0; font-size:13px; line-height:1.6; color:var(--ink-soft); }

/* Telefon: list pride od spodaj, z rocico. */
@media (max-width:560px){
  .lang-btn__code, .lang-btn svg:not(.lang-btn__globe){ display:none; }
  .lang-btn{ padding:9px 10px; }
  .lang-modal{ align-items:flex-end; padding:0; }
  .lang-modal__box{
    max-width:none; border-radius:28px 28px 0 0;
    padding:28px 20px calc(24px + env(safe-area-inset-bottom));
  }
  .lang-modal__box::before{
    content:""; position:absolute; top:10px; left:50%; width:40px; height:4px;
    margin-left:-20px; border-radius:2px; background:rgba(14,22,33,.15);
  }
  .lang-modal:not([hidden]) .lang-modal__box{ animation:langUp .34s cubic-bezier(.2,.8,.2,1); }
  @keyframes langUp{ from{ transform:translateY(100%); } to{ transform:none; } }
}
@media (prefers-reduced-motion: reduce){
  .lang-modal:not([hidden]) .lang-modal__box, .lang-modal:not([hidden]) .lang-modal__backdrop{ animation:none; }
  .lang-opt, .lang-opt__mark, .lang-modal__x{ transition:none; }
}
@media (prefers-color-scheme: dark){
  .lang-modal__box{ background:#0E1621; color:#FBEEE7; box-shadow:0 0 0 1px rgba(251,238,231,.08), 0 40px 100px -24px rgba(0,0,0,.7); }
  .lang-modal__x{ background:rgba(255,255,255,.08); color:#FBEEE7; }
  .lang-modal__x:hover{ background:rgba(255,255,255,.14); }
  .lang-opt{ background:rgba(255,255,255,.03); border-color:rgba(251,238,231,.1); color:#FBEEE7; }
  .lang-opt:hover{ border-color:rgba(251,238,231,.24); box-shadow:none; }
  .lang-opt__code{ background:rgba(255,255,255,.1); }
  .lang-opt__mark{ color:rgba(251,238,231,.4); }
  .lang-opt:hover .lang-opt__mark{ color:#FBEEE7; }
  .lang-opt.is-active{ background:rgba(47,174,96,.12); }
  .lang-modal__box::before{ background:rgba(251,238,231,.2); }
}

/* 01 Hero ------------------------------------------------------------- */
.hero{ background:#0A2A47; position:relative; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.9; border:0; background:#0A2A47;
}
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(3,16,32,.32) 0%, rgba(5,24,46,.24) 55%, rgba(8,32,58,.12) 100%);
}
.hero__inner{
  max-width:1280px; margin:0 auto; padding:168px 24px 110px; position:relative;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:40px; align-items:center; pointer-events:none;
}
.hero h1{
  margin:0; font-family:var(--font-head),sans-serif; font-weight:800;
  letter-spacing:-0.02em; font-size:clamp(22px,2.6vw,42px); color:#fff; overflow:visible;
}
.hero h1 [data-hero-line]{ display:block; overflow:hidden; line-height:1.55; white-space:nowrap; }
/* Na telefonu naslova ni mogoce drzati v eni vrsti - nowrap bi razsiril stran. */
@media (max-width:700px){
  .hero h1 [data-hero-line]{ white-space:normal; }
  .hero h1{ font-size:clamp(26px,7.2vw,38px); }
}
.hero h1 [data-hero-line] > span{ display:block; }
/* Telefon: dve vrstici naslova tečeta skupaj, sicer se prva (dolga) prelomi
   sama in naslov ima tri neenake vrstice. */
@media (max-width:700px){
  .hero h1 [data-hero-line], .hero h1 [data-hero-line] > span{ display:inline; }
  .hero h1{ line-height:1.3; }
}
.hero__sub{ margin:20px 0 0; font-size:15px; line-height:1.6; color:rgba(255,255,255,.85); max-width:440px; }

.hero__cta{ margin-top:36px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero__cta .btn-outline{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:#fff; text-decoration:none;
  font-weight:700; font-size:15px; padding:13px 26px;
  border:1.5px solid rgba(255,255,255,.35); border-radius:15px;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-outline:hover{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.6);
}
.sports__more{ margin-top:28px; }

.btn-green{ font-size:16px; padding:16px 30px; min-height:44px; pointer-events:auto; }
.hero__badges{ margin-top:44px; display:flex; flex-wrap:wrap; gap:12px; }
/* Uradni znački Apple in Google (9. 10. 2026, aplikacija je v obeh
   trgovinah), povezani na stran v trgovini. */
/* .hero__inner ima pointer-events:none (ozadje), zato povezave v njem
   potrebujejo auto, sicer klik ne pride do njih (9. 10. 2026). */
.store-link{ display:block; border-radius:9px; pointer-events:auto; transition:transform .2s ease, opacity .2s ease; }
.hero__cta a, .hero__badges a{ pointer-events:auto; }
.inquiry__badges{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
.store-link:hover{ transform:translateY(-1px); opacity:.9; }
.store-badge{ display:block; height:46px; width:auto; }
.store-badge--sm{ height:38px; }
/* „Od načrta treninga / do razvoja igralca." samo na namizju v dveh vrstah. */
.br-desk{ display:none; }
@media (min-width:900px){ .br-desk{ display:inline; } #h-proces{ max-width:none; } }
/* „Iz nogometa. Za nogomet." na modrem (naročnik 9. 10. 2026). */
/* Čez celo širino, brez kremnega roba okoli (naročnik 10. 10. 2026). */
.newsletter.newsletter--blue{
  max-width:none; margin:0; padding:96px 24px; border-radius:0;
  background:var(--maroon); color:#fff;
}
.newsletter.newsletter--blue > *{ max-width:640px; margin-left:auto; margin-right:auto; }
.newsletter.newsletter--blue h2{ color:#fff; }
/* Naslov čez celo modro polje (naročnik 9. 10. 2026), ne v stolpcu 640 px. */
.newsletter.newsletter--blue > h2{ max-width:none; }
.newsletter.newsletter--blue > p{ color:rgba(255,255,255,.82); }
.newsletter.newsletter--blue input{ border-color:rgba(255,255,255,.2); }
.newsletter.newsletter--blue button{ background:var(--green); }
/* Polje in gumb v eni vrsti (naročnik 9. 10. 2026), na telefonu drug pod
   drugim. Mora stati za splošnim „.newsletter form{ flex-direction:column }". */
.newsletter.newsletter--blue .newsletter__err{ color:#FFB4A8; }
.newsletter.newsletter--blue .newsletter__ok{ color:#7FE0A4; }
@media (max-width:640px){ .newsletter.newsletter--blue{ padding:64px 18px; } }

.hero__visual{
  position:relative; width:100%; max-width:460px; margin:0 auto;
  aspect-ratio:1/1.15; pointer-events:auto;
}
.hero__lines{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.hero__phone{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%) rotate(4deg);
  width:56%; aspect-ratio:240/520; background:#0B0B0D; border-radius:38px; padding:10px;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.45));
}
.hero__phone img{ width:100%; height:100%; object-fit:cover; border-radius:28px; display:block; background:#E8E2DB; }
.hero__play{
  position:absolute; left:50%; top:47%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.hero__play i{
  width:0; height:0; border-top:11px solid transparent; border-bottom:11px solid transparent;
  border-left:16px solid #fff; margin-left:3px; display:block;
}
.hero__avatar{
  position:absolute; transform:translate(-50%,-50%); border-radius:50%; overflow:hidden;
  object-fit:cover; border:2px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,.35);
  background:#E8E2DB;
}
.hero__avatar--a{ left:14%; top:50%; width:64px; height:64px; }
.hero__avatar--b{ left:22%; top:71%; width:56px; height:56px; }
.hero__avatar--c{ left:84%; top:78%; width:56px; height:56px; }
.glass-card{
  position:absolute; width:48%; background:rgba(10,42,71,.7); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:16px 18px; color:#fff;
}
.glass-card--1{ left:0; top:0; }
.glass-card--2{ right:0; top:36%; }
.glass-card--3{ left:0; bottom:0; display:flex; align-items:center; gap:12px; }
.glass-card__eyebrow{
  margin:0 0 4px; font-size:11px; font-weight:600; color:rgba(255,255,255,.65);
  text-transform:uppercase; letter-spacing:.04em;
}
.glass-card__q{ margin:0 0 12px; font-size:14px; font-weight:600; line-height:1.4; }
.rsvp{ display:flex; gap:8px; }
.rsvp span{ font-size:12px; font-weight:700; padding:6px 16px; border-radius:15px; }
.rsvp .yes{ background:#fff; color:#0A2A47; }
.rsvp .no{ background:rgba(255,255,255,.18); color:#fff; }
.dots{ display:flex; gap:4px; flex-wrap:wrap; }
.dots span{ width:14px; height:14px; border-radius:3px; background:#fff; }
.dots span.off{ background:rgba(255,255,255,.25); }
.check-badge{
  width:32px; height:32px; border-radius:50%; background:var(--green);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* 02 Problem ---------------------------------------------------------- */
.section-white{ background:#fff; }
/* Svetlo siva sekcija - isti ton kot FAQ, da se lepo veze na belo sosedo. */
.section-grey{ background:#F5F6F8; }
@media (prefers-color-scheme: dark){ .section-grey{ background:var(--cream); } }
.card{
  background:#fff; border-radius:20px; padding:32px; box-shadow:var(--card-shadow);
  display:flex; flex-direction:column; gap:16px;
}
.card__icon{
  width:48px; height:48px; border-radius:14px; background:rgba(47,174,96,.14);
  display:flex; align-items:center; justify-content:center;
}
.card h3{ margin:0; font-family:var(--font-head),sans-serif; font-weight:700; font-size:19px; }
.card p{ margin:0; font-size:15px; line-height:1.55; color:var(--ink-soft); }

/* 03 Športi (orbit) --------------------------------------------------- */
.sports{
  background:linear-gradient(115deg, #041325 0%, #0A2A47 48%, #123A60 100%);
  padding:88px 24px; position:relative; overflow:hidden;
}
/* <picture> je le ovoj — sliko pozicionira <img>, ovoj ne sme delati vrstice. */
.sports > picture, .site-footer > picture{ display:contents; }

.sports__photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:70% center; opacity:.9; border:0;
  pointer-events:none;
}
.sports__scrim{
  position:absolute; inset:0; pointer-events:none;
  /* Slika je ze potemnjena, zato le blag preliv kot pri heroju: temno levo, svetlejse desno. */
  background:linear-gradient(115deg, rgba(4,19,37,.45) 0%, rgba(10,42,71,.25) 45%, rgba(18,58,96,.12) 100%);
}
.sports__bg{ position:absolute; inset:0; pointer-events:none; }
.sports__bg svg{ width:100%; height:100%; display:block; }
.sports__inner{ max-width:1280px; margin:0 auto; position:relative; z-index:1; }

.sports h2{ color:#fff; max-width:480px; }
.sports p{ color:rgba(255,255,255,.78); }
.orbit{ position:relative; width:100%; max-width:420px; aspect-ratio:1/1; margin:0 auto; }
.orbit__ring{ position:absolute; inset:0; animation:orbitSpin 50s linear infinite; }
.orbit__ring > svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.orbit__node{ position:absolute; transform:translate(-50%,-50%); }
.orbit__node > div{
  animation:orbitSpinReverse 50s linear infinite;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
/* Ob prehodu z misko se vrtenje ustavi, da so oznake lazje berljive. */
.orbit:hover .orbit__ring,
.orbit:focus-within .orbit__ring,
.orbit:hover .orbit__node > div,
.orbit:focus-within .orbit__node > div{ animation-play-state:paused; }
@keyframes orbitSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes orbitSpinReverse{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }
@media (prefers-reduced-motion: reduce){
  .orbit__ring, .orbit__node > div{ animation:none !important; }
}
.orbit__badge{
  width:clamp(40px,11vw,56px); height:clamp(40px,11vw,56px); border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.25);
  color:var(--maroon);
}
/* Ploščice v krogu (naročnik 9. 10. 2026): steklena ploščica na fotografiji
   (prosojna bela, zameglitev, tanka svetla obroba), bela risba in zelen
   poudarek kot krog; zelena polna ploščica z modrim se ni ujemala. */
.orbit__badge--tile{
  border-radius:30%;
  background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.5);
}
.orbit__label{ color:#fff; font-weight:600; font-size:13px; white-space:nowrap; }
.orbit__center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  width:34%; /* glede na .orbit (max 420px) -> do ~140px */
}
.orbit__center img{ width:100%; max-width:140px; height:auto; display:block; }

/* 04 Regija ----------------------------------------------------------- */
.region__top{ margin-bottom:150px; }
/* Zemljevid se razlije do desnega roba okna in tiho izgine proti besedilu.
   Sidran je na sekcijo (ne na .wrap), da ga max-width ne omejuje.
   Sekcija ga odreze, da ne gleda v sosednje sekcije. */
#vizija{ position:relative; overflow:hidden; }
.map{
  position:absolute; top:0;
  /* .wrap ima padding 24px in max-width 1280 - z negativnim odmikom
     zemljevid vseeno seze do desnega roba okna. */
  right:calc((100vw - min(100vw, 1280px)) / -2);
  width:min(82vw, 1020px); height:min(60vw, 730px);
  pointer-events:none; z-index:0;
}
.map__svg{
  width:100%; height:100%; display:block;
  /* Bledenje proti levi in po robovih, da ni vidnega roba. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 38%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, #000 38%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 86%, transparent 100%);
          mask-composite:intersect;
}

/* Barvna legenda po handoffu. */
.map__ctx{ fill:#E4E5E4; stroke:#D2D3D2; stroke-width:1; }
.map__core{ fill:rgba(10,42,71,.28); stroke:#fff; stroke-width:1.4; }
.map__home{ fill:var(--maroon); stroke:#fff; stroke-width:2; }
.map__arc{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.map__origin{ filter:drop-shadow(0 1px 3px rgba(0,0,0,.4)); }

/* Besedilo mora ostati nad zemljevidom in berljivo. */
#vizija .wrap{ position:relative; z-index:1; }
/* Drugi stavek naslova v svojo vrsto (block namesto <br>, da se ob ozkem
   zaslonu vsak stavek se vedno lomi po svoje). */
#h-vizija > span{ display:block; }
/* CTA pod besedilom; .btn-ghost ima temno obrobo, zato je viden na sivi. */
.vizija__cta{ margin-top:32px; }
/* Tri stevilke pod besedilom regije. */
.region-facts{
  /* Stolpci po vsebini, da se noben napis ne prelomi; razmik raztegne vrsto. */
  display:grid; grid-template-columns:repeat(3,auto); justify-content:space-between; gap:16px;
  margin:28px 0 0; padding:20px 0 0; max-width:480px; border-top:1px solid var(--line);
}
.region-facts dt{
  font-family:var(--font-head),sans-serif; font-weight:800; font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-0.02em; color:var(--ink); line-height:1.2;
}
.region-facts dd{ margin:4px 0 0; font-size:13px; line-height:1.45; color:var(--ink-soft); white-space:nowrap; }
/* Rahla ikona v isti vrsti kot številka (naročnik 9. 10. 2026): isti znaki kot
   drugod, a svetla ploščica in temno modra risba, da ne prevlada nad številko. */
.region-facts dt{ display:flex; align-items:center; gap:10px; }
.region-facts__icon{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:11px;
  background:rgba(10,42,71,.06); border:1px solid rgba(10,42,71,.08);
}
.region-facts__icon svg{ width:24px; height:24px; }
@media (max-width:520px){
  /* Pod 520 px tri stevilke v vrsti ne gredo, zato ena pod drugo. */
  .region-facts{ grid-template-columns:1fr; justify-content:start; gap:12px; }
  .region-facts > div{ display:flex; align-items:baseline; gap:12px; }
  .region-facts dd{ margin:0; }
}
#vizija .region__top,
#vizija .feat{ position:relative; z-index:1; }

@media (max-width:1080px){
  /* Zemljevid pod besedilo, znotraj toka. */
  #vizija{ overflow:visible; }
  .map{
    position:relative; top:auto; right:auto; transform:none;
    width:100%; height:auto; aspect-ratio:1100/780;
    margin:8px auto 0; order:2;
  }
  #vizija .wrap{ display:flex; flex-direction:column; }
  #vizija .wrap > .region__top{ order:1; }
  #vizija .wrap > .cards{ order:3; }
  .map__svg{
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
    -webkit-mask-composite:source-over; mask-composite:add;
  }
}

@media (prefers-color-scheme: dark){
  .map__ctx{ fill:#2A3038; stroke:#3A424C; }
}

.quote-card{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px;
  display:flex; flex-direction:column; gap:16px;
}
.quote-card img{ width:48px; height:48px; border-radius:50%; object-fit:cover; display:block; background:#E8E2DB; }
.quote-card p{ margin:0; font-size:15px; line-height:1.55; }
.quote-card__name{ font-weight:700; font-size:14px; }
.quote-card__role{ font-size:13px; color:var(--ink-soft); }

/* 05 O nas ------------------------------------------------------------ */
.about{
  max-width:1280px; margin:0 auto; padding:88px 24px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:48px; align-items:center;
}
.about p{ max-width:440px; }
.about img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:20px; display:block; background:#E8E2DB; }

/* 07 Obrazec ---------------------------------------------------------- */
.inquiry{
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(47,174,96,.16), transparent 60%),
    radial-gradient(700px 520px at 100% 100%, rgba(255,255,255,.07), transparent 60%),
    var(--red);
  padding:96px 24px; position:relative;
}
/* Brez overflow:hidden, sicer .inquiry__intro ni vec sticky; object-fit ze obreze sliko. */
.inquiry__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:65% center; opacity:.9;
}
.inquiry__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(3,16,32,.4) 0%, rgba(5,24,46,.22) 50%, rgba(8,32,58,.12) 100%);
}
.inquiry__inner{
  position:relative;
  max-width:1200px; margin:0 auto; display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:start;
}
.inquiry__intro{ position:sticky; top:120px; }
.inquiry h2{ color:#fff; font-size:clamp(28px,3.4vw,40px); }
.inquiry__lead{ margin:0; font-size:17px; line-height:1.65; color:rgba(255,255,255,.88); max-width:420px; }
.inquiry__perks{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:14px; }
.inquiry__perks li{ display:flex; align-items:center; gap:12px; color:#fff; font-weight:600; font-size:15px; }
.inquiry__perks svg{
  flex:none; width:28px; height:28px; padding:6px; border-radius:50%;
  background:rgba(47,174,96,.22); color:#5FD08A;
}

/* Bela kartica z obrazcem; barve so tokeni, da jih temni nacin samo zamenja. */
.inquiry-card{
  --f-ink:#0E1621; --f-soft:rgba(14,22,33,.62); --f-ph:rgba(14,22,33,.4);
  --f-line:rgba(14,22,33,.14); --f-line-hover:rgba(14,22,33,.28);
  --f-bg:#F6F7F9; --f-bg-focus:#fff; --f-req:#E5383B; --f-err-bg:#FFF5F5;
  --f-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%230E1621' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background:#fff; color:var(--f-ink); border-radius:24px; padding:40px;
  box-shadow:0 30px 80px rgba(0,15,30,.35);
}
.inquiry-form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; }
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field--full{ grid-column:1/-1; }
.field label{ font-weight:600; font-size:14px; color:var(--f-ink); }
.req{ color:var(--f-req); font-weight:700; }
.field input:not([type="checkbox"]), .field select, .field textarea{
  width:100%; min-height:50px; padding:0 16px; border-radius:12px;
  border:1.5px solid var(--f-line); background-color:var(--f-bg); color:var(--f-ink);
  font-size:16px; font-family:var(--font-body),sans-serif;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--f-ph); opacity:1; }
.field input:not([type="checkbox"]):hover, .field select:hover, .field textarea:hover{ border-color:var(--f-line-hover); }
.field input:not([type="checkbox"]):focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--red); background-color:var(--f-bg-focus);
  box-shadow:0 0 0 4px rgba(0,51,102,.14);
}
.field select{
  appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
  background-image:var(--f-arrow); background-repeat:no-repeat; background-position:right 18px center;
}
.field select:has(option[value=""]:checked){ color:var(--f-ph); }
.field select option{ color:var(--f-ink); }
.field textarea{ padding:14px 16px; min-height:120px; line-height:1.5; resize:vertical; }
.field [aria-invalid="true"]:not([type="checkbox"]){ border-color:var(--f-req); background-color:var(--f-err-bg); }
.field [aria-invalid="true"]:not([type="checkbox"]):focus{ border-color:var(--f-req); box-shadow:0 0 0 4px rgba(229,56,59,.16); }
.field .err{ color:var(--f-req); font-size:13px; font-weight:600; }
.field .consent{
  display:flex; align-items:flex-start; gap:12px; font-size:14px; font-weight:400;
  line-height:1.5; color:var(--f-soft); cursor:pointer;
}
.consent input{
  width:20px; height:20px; flex:none; margin:1px 0 0;
  accent-color:var(--red); cursor:pointer;
}
.inquiry-form__submit{
  grid-column:1/-1; margin-top:4px;
  display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px;
}
.inquiry-form__submit .btn-green{
  gap:10px; justify-content:center; font-family:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.inquiry-form__submit .btn-green:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(47,174,96,.35); }
.inquiry-form__submit .btn-green svg{ transition:transform .2s ease; }
.inquiry-form__submit .btn-green:hover svg{ transform:translateX(3px); }
.inquiry-form__submit .btn-outline{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:#fff; text-decoration:none;
  font-weight:700; font-size:15px; padding:13px 26px;
  border:1.5px solid rgba(255,255,255,.35); border-radius:15px;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-outline:hover{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.6);
}
.sports__more{ margin-top:28px; }

.btn-green{ min-height:52px; padding:0 34px; font-size:16px; display:inline-flex; }
.inquiry-form__note{ margin:0; font-size:13px; color:var(--f-soft); }
.inquiry-form__error{ flex-basis:100%; margin:0; color:var(--f-req); font-size:14px; font-weight:600; }
.inquiry-form__submit .btn-green:disabled{ opacity:.6; cursor:progress; transform:none; box-shadow:none; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.inquiry__thanks{ padding:32px 8px; text-align:center; }
.inquiry__thanks-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; margin-bottom:20px; border-radius:50%;
  background:rgba(47,174,96,.14); color:var(--green);
}
.inquiry__thanks h3{
  margin:0 0 10px; font-family:var(--font-head),sans-serif;
  font-weight:800; font-size:24px; color:var(--f-ink);
}
.inquiry__thanks p{ margin:0 auto; max-width:380px; font-size:16px; line-height:1.6; color:var(--f-soft); }

@media (max-width:900px){
  .inquiry__inner{ grid-template-columns:1fr; gap:40px; }
  .inquiry__intro{ position:static; }
}
@media (max-width:560px){
  .inquiry{ padding:72px 16px; }
  .inquiry-card{ padding:24px 20px; border-radius:20px; }
  .inquiry-form{ grid-template-columns:1fr; }
  .inquiry-form__submit .btn-green{ width:100%; }
}
@media (prefers-color-scheme: dark){
  .inquiry-card{
    --f-ink:#FBEEE7; --f-soft:rgba(251,238,231,.66); --f-ph:rgba(251,238,231,.38);
    --f-line:rgba(251,238,231,.14); --f-line-hover:rgba(251,238,231,.3);
    --f-bg:rgba(255,255,255,.04); --f-bg-focus:rgba(255,255,255,.07);
    --f-req:#FF6B6E; --f-err-bg:rgba(255,107,110,.08);
    --f-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23FBEEE7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background:#0E1621; color-scheme:dark; box-shadow:0 30px 80px rgba(0,0,0,.45);
  }
  .field input:not([type="checkbox"]):focus, .field select:focus, .field textarea:focus{
    border-color:#5B8FC7; box-shadow:0 0 0 4px rgba(91,143,199,.2);
  }
  .consent input{ accent-color:var(--green); }
}

/* 08 Novice ----------------------------------------------------------- */
.newsletter{ max-width:760px; margin:0 auto; padding:72px 24px; text-align:center; }
.newsletter h2{ margin:0 0 12px; font-size:clamp(24px,3vw,32px); }
.newsletter > p{ margin:0 0 28px; font-size:16px; line-height:1.6; color:var(--ink-soft); }
.newsletter form{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.newsletter input{
  min-height:48px; padding:0 18px; border-radius:15px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-size:15px; font-family:var(--font-body),sans-serif;
  min-width:220px; flex:1 1 220px;
}
.newsletter button{
  min-height:48px; padding:0 26px; background:var(--maroon); color:#fff;
  font-weight:700; font-size:15px; border:none; border-radius:15px; cursor:pointer;
}
.newsletter__err{ margin:12px 0 0; font-size:13px; color:var(--red-ink); }
.newsletter__ok{ margin:0; font-size:16px; font-weight:600; color:var(--green); }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* 09 Footer ----------------------------------------------------------- */
.site-footer{
  background:linear-gradient(115deg, #041325 0%, #0A2A47 55%, #123A60 100%);
  border-top:none; color:#fff; position:relative;
}
.site-footer__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:75% 55%; opacity:.9;
}
.site-footer__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(4,19,37,.55) 0%, rgba(10,42,71,.4) 55%, rgba(18,58,96,.3) 100%);
}
.site-footer__cols, .site-footer__bottom{ position:relative; }
.site-footer__cols{
  max-width:1280px; margin:0 auto; padding:64px 24px 36px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
}
.site-footer__brand{ line-height:0; }
.site-footer__brand img{ height:32px; width:auto; display:block; }
.site-footer__tagline{
  margin:14px 0 20px; font-size:14px; line-height:1.6;
  color:rgba(255,255,255,.7); max-width:260px;
}
.site-footer__badges{ display:flex; gap:10px; flex-wrap:wrap; }
.site-footer__title{
  font-weight:700; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:16px;
}
.site-footer__links{ display:flex; flex-direction:column; gap:11px; }
.site-footer__links a{
  color:rgba(255,255,255,.85); text-decoration:none; font-size:14px;
  transition:color .2s ease;
}
.site-footer__links a:hover{ color:#fff; text-decoration:underline; }
.site-footer__bottom{
  max-width:1280px; margin:0 auto; padding:22px 24px 30px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:12px; color:rgba(255,255,255,.55);
}

@media (max-width:860px){
  .site-footer__cols{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
}

@media (max-width:1024px){
  .site-header__inner{ grid-template-columns:auto auto; row-gap:12px; justify-content:space-between; }
  .site-nav{ grid-column:1/-1; order:3; justify-content:center; gap:18px; }
  .site-header__cta{ justify-self:end; font-size:13px; padding:10px 16px; min-height:40px; }
  .logo img{ height:56px; }
  .site-header.is-stuck .logo img{ height:46px; }
  .site-nav a{ font-size:15px; }
}
@media (max-width:400px){
  .site-header__cta{ font-size:12px; padding:9px 13px; }
  .logo img{ height:48px; }
  .site-header.is-stuck .logo img{ height:42px; }
}

/* --- Problem: besedilo levo, kartice ena pod drugo desno -------------- */
.problem__grid{
  display:grid; grid-template-columns:minmax(280px,0.9fr) 1.1fr;
  gap:56px; align-items:center;
}

/* --- Logotip z ozadjem levo od kartic. */
.problem__logo{ margin:0; display:flex; justify-content:center; }
.problem__logo img{ display:block; width:90%; max-width:460px; height:auto; }

.prow-list{ display:flex; flex-direction:column; gap:16px; }
.prow{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:20px 22px;
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:16px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.prow__icon{
  width:42px; height:42px; border-radius:12px; background:rgba(47,174,96,.14);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:var(--maroon);
}
/* Vrstice „Bogata paleta …" (9. 10. 2026): ploščica v barvi znamke kot koraki. */
.prow .prow__icon--tile{
  width:52px; height:52px; border-radius:16px;
  background:linear-gradient(145deg,#16406B,#0A2A47);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 10px 24px -8px rgba(10,42,71,.55);
}
.prow .prow__icon--tile svg{ width:36px; height:36px; }
@media (prefers-color-scheme: dark){
  .prow__icon{ background:rgba(47,174,96,.20); color:#EAF6EF; }
}
.prow__title{
  margin:0; font-family:var(--font-head),sans-serif; font-weight:700;
  font-size:17px; line-height:1.3; letter-spacing:-0.01em;
}
/* Brez omejitve vrstic: na telefonu ima opis 3-4 vrstice in "..." je
   odrezal stavek sredi misli. */
.prow__desc{
  margin:6px 0 0; font-size:14px; line-height:1.5; color:var(--ink-soft);
}
.prow:hover{
  border-color:rgba(47,174,96,.45);
  box-shadow:0 1px 2px rgba(14,22,33,.04), 0 12px 28px rgba(14,22,33,.08);
}

@media (max-width:1080px){
  .problem__grid{ grid-template-columns:1fr; gap:36px; align-items:start; }
  .problem__logo img{ max-width:360px; }
}
@media (max-width:700px){
  .problem__logo img{ max-width:min(288px, 74vw); }
}

/* --- Kartice o aplikaciji (v sekciji Regija) --------------------------- */
.feat-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.feat{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:28px 24px; display:flex; flex-direction:column; align-items:flex-start;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.feat__icon{
  width:46px; height:46px; border-radius:13px; background:rgba(47,174,96,.14);
  display:flex; align-items:center; justify-content:center;
  color:var(--maroon); flex-shrink:0;
}
.feat h3{
  margin:18px 0 0; font-family:var(--font-head),sans-serif; font-weight:700;
  font-size:17px; line-height:1.32; letter-spacing:-0.01em;
}
.feat p{ margin:10px 0 0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.feat:hover{
  border-color:rgba(47,174,96,.45);
  box-shadow:0 1px 2px rgba(14,22,33,.04), 0 12px 28px rgba(14,22,33,.08);
}
@media (max-width:900px){ .feat-cards{ grid-template-columns:1fr; } }
@media (prefers-color-scheme: dark){
  .feat{ background:var(--cream); }
  .feat__icon{ background:rgba(47,174,96,.20); color:#EAF6EF; }
}
/* Ikone po občinstvu (naročnik 9. 10. 2026): ista barvna kombinacija kot rahle
   ikone pri številkah tik nad njimi (svetla ploščica, temno modra risba, zelen
   poudarek), le večja ploščica, ker je kartica večja. */
.feat__icon--coach, .feat__icon--club, .feat__icon--player{
  width:60px; height:60px; border-radius:18px;
  background:rgba(10,42,71,.06); border:1px solid rgba(10,42,71,.08); box-shadow:none;
  transition:transform .25s ease;
}
.feat__icon--coach svg, .feat__icon--club svg, .feat__icon--player svg{ width:38px; height:38px; }
.feat:hover .feat__icon--coach, .feat:hover .feat__icon--club, .feat:hover .feat__icon--player{ transform:translateY(-2px) rotate(-4deg); }
@media (prefers-reduced-motion: reduce){
  .feat__icon--coach, .feat__icon--club, .feat__icon--player{ transition:none; }
  .feat:hover .feat__icon--coach, .feat:hover .feat__icon--club, .feat:hover .feat__icon--player{ transform:none; }
}

/* --- Ambasadorji ------------------------------------------------------ */
.amb-section{ background:#fff; }
.amb-section .wrap{ padding:88px 24px; }
.amb-section__title{ margin:0 0 8px; text-align:center; max-width:none; }
.amb-section__lead{
  margin:0 auto 40px; font-size:16px; color:var(--ink-soft);
  text-align:center; max-width:520px;
}
@media (prefers-color-scheme: dark){
  .amb-section{ background:rgba(255,255,255,.03); }
}

.cards--amb{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.amb-card{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:20px 20px 28px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.amb-card__photo{
  width:100%; aspect-ratio:4/3; border-radius:14px; object-fit:cover; display:block;
  background:#E8E2DB; margin-bottom:20px;
}
.amb-card__name{ font-family:var(--font-head),sans-serif; font-weight:700; font-size:18px; }
.amb-card__role{ font-size:13px; color:var(--ink-soft); margin-bottom:12px; }
.amb-card__quote{ margin:0; font-size:15px; line-height:1.6; }

/* --- FAQ --------------------------------------------------------------- */
/* Sivo ozadje, da je sekcija locena od zgornje. */
.faq{ background:#F5F6F8; }
.faq__inner{ max-width:820px; margin:0 auto; padding:88px 24px; }
.faq__inner .h2{ margin:0 auto 36px; text-align:center; max-width:none; }
.faq__list{ display:flex; flex-direction:column; gap:12px; }
.faq__item{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease;
}
.faq__item[open]{
  border-color:rgba(47,174,96,.35);
  box-shadow:0 1px 2px rgba(14,22,33,.04), 0 8px 24px rgba(14,22,33,.06);
}
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px 22px; cursor:pointer; list-style:none;
  font-family:var(--font-head),sans-serif; font-weight:700; font-size:15px;
  color:var(--ink);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ color:var(--green); }
.faq__chevron{ flex-shrink:0; color:var(--green); transition:transform .25s ease; }
.faq__item[open] .faq__chevron{ transform:rotate(180deg); }
.faq__a{ padding:0 22px 20px; }
.faq__a p{ margin:0; font-size:14.5px; line-height:1.65; color:var(--ink-soft); }
.faq__more{ margin:28px 0 0; text-align:center; }
.faq__more a{ color:var(--green); text-decoration:none; font-weight:700; font-size:15px; }
.faq__more a:hover{ text-decoration:underline; }
.faq--page .faq__inner{ padding-top:0; }

@media (prefers-color-scheme: dark){
  .faq{ background:rgba(255,255,255,.03); }
  .faq__item{ background:var(--cream); }
}

/* --- Podstrani -------------------------------------------------------- */
.site-header--solid{ background:var(--maroon); }
/* Ko se na podstrani zascrolla, velja isto belo stanje kot na domaci strani. */
.site-header--solid.is-stuck{ background:#fff; }
.subpage{ padding-top:0; }
.subhero{ background:var(--maroon); }
.subhero__inner{
  max-width:1280px; margin:0 auto; padding:150px 24px 72px;
}
.subhero__title{ color:#fff; margin-bottom:14px; }
.subhero__lead{
  margin:0; font-size:18px; line-height:1.6; max-width:600px;
  color:rgba(255,255,255,.82);
}
.about--page{ padding-top:72px; padding-bottom:72px; align-items:center; }
.about--page img{ border-radius:20px; }
/* O nas: logotip s fotografijo, prozorno ozadje, ne obrezuj na 4:3. */
/* O nas: Gašper in Anej na igrišču namesto logotipa (naročnik 9. 10. 2026). */
.about__photo{ display:block; }
.about__photo img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:20px; }
.about img.about__logo{ height:auto; aspect-ratio:auto; object-fit:contain; background:none; border-radius:0; max-width:420px; justify-self:center; }
.values{ background:#fff; }
.values__inner{ max-width:1280px; margin:0 auto; padding:88px 24px; }
.values__inner .h2{ margin-bottom:36px; }
.subpage__cta-wrap{ max-width:1280px; margin:0 auto; padding:0 24px 88px; }
.subpage__cta{
  background:var(--maroon); border-radius:20px; padding:48px 40px;
  text-align:center; margin-top:56px;
}
.subpage__cta h2{
  margin:0 0 10px; font-family:var(--font-head),sans-serif; font-weight:800;
  letter-spacing:-0.02em; font-size:clamp(22px,2.6vw,30px); color:#fff;
}
.subpage__cta p{ margin:0 0 24px; font-size:16px; color:rgba(255,255,255,.85); }
.subpage__cta .btn-outline{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:#fff; text-decoration:none;
  font-weight:700; font-size:15px; padding:13px 26px;
  border:1.5px solid rgba(255,255,255,.35); border-radius:15px;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-outline:hover{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.6);
}
.sports__more{ margin-top:28px; }

.btn-green{ display:inline-flex; padding:15px 30px; font-size:16px; }
@media (max-width:820px){
  /* Navigacija se lomi v dve vrsti - naslov rabi vec prostora. */
  .subhero__inner{ padding:180px 24px 56px; }
  .subpage__cta{ padding:36px 24px; }
}

/* --- Stran: Za vsak šport ---------------------------------------------- */
.sport-jump{ background:#fff; border-bottom:1px solid var(--line); }
.sport-jump__inner{
  max-width:1280px; margin:0 auto; padding:20px 24px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.sport-jump__link{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:15px; border:1px solid var(--line);
  color:var(--ink); text-decoration:none; font-size:14px; font-weight:600;
  transition:border-color .2s ease, background .2s ease;
}
.sport-jump__link svg{ width:18px; height:18px; color:var(--maroon); }
.sport-jump__link:hover{ border-color:rgba(47,174,96,.5); background:rgba(47,174,96,.06); }

.sport{ background:var(--cream); }
.sport--alt{ background:#fff; }
.sport__inner{ max-width:900px; margin:0 auto; padding:64px 24px; }
.sport__head{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.sport__icon{
  width:52px; height:52px; border-radius:14px; background:rgba(47,174,96,.14);
  display:flex; align-items:center; justify-content:center;
  color:var(--maroon); flex-shrink:0;
}
.sport__title{ margin:0; font-size:clamp(24px,2.8vw,32px); }
.sport__lead{ margin:0 0 26px; font-size:17px; line-height:1.6; color:var(--ink-soft); }
.sport__points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.sport__points li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; line-height:1.55; }
.sport__check{ flex-shrink:0; margin-top:2px; color:var(--green); }

@media (prefers-color-scheme: dark){
  .sport-jump{ background:var(--cream); }
  .sport--alt{ background:rgba(255,255,255,.03); }
  .sport__icon{ color:#EAF6EF; }
}

/* --- Cenik ------------------------------------------------------------- */
/* Sredinsko poravnan hero s preklopnikom mesecno/letno. */
.subhero--center .subhero__inner{ text-align:center; padding-bottom:56px; }
.subhero--center .subhero__title{ margin-left:auto; margin-right:auto; }
.subhero--center .subhero__lead{ margin-left:auto; margin-right:auto; text-align:center; }

.billing{
  margin:34px auto 0; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:14px;
}
.billing__label{ font-weight:700; font-size:16px; color:#fff; }
.billing__switch{
  position:relative; display:flex; padding:5px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18);
  border-radius:15px;
}
/* Sirina/odmik se racunata iz izmerjenega gumba, da se drsnik ujame
   tudi pri razlicno dolgih napisih. */
.billing__thumb{
  position:absolute; top:5px; left:0; z-index:0;
  width:var(--thumb-w,0); height:calc(100% - 10px);
  transform:translateX(var(--thumb-x,5px));
  background:var(--green); border-radius:11px;
  transition:transform .25s ease, width .25s ease;
}
.billing__opt{
  position:relative; z-index:1; flex:1 1 0; min-width:112px;
  background:transparent; border:0; cursor:pointer;
  font-family:var(--font-body); font-weight:700; font-size:16px;
  padding:10px 22px; border-radius:11px;
  color:rgba(255,255,255,.62); transition:color .2s ease;
}
.billing__opt.is-active{ color:#fff; }
.billing__opt:hover{ color:#fff; }
.billing__save{
  font-size:13px; font-weight:700; color:#EAF6EF;
  background:rgba(47,174,96,.22); border:1px solid rgba(47,174,96,.45);
  padding:7px 14px; border-radius:15px;
}
/* Brez JS preklopnik ne deluje, zato ga pokaze sele skripta;
   letna cena v karticah ostane vidna tudi takrat. */
.billing{ display:none; }
.billing.is-ready{ display:flex; }

/* Sprememba cene ob preklopu je kratka in mirna. */
.plan__price, .plan__monthly{ transition:opacity .18s ease; }
.plan.is-switching .plan__price, .plan.is-switching .plan__monthly{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  .billing__thumb{ transition:none; }
  .plan__price, .plan__monthly{ transition:none; }
  .plan.is-switching .plan__price, .plan.is-switching .plan__monthly{ opacity:1; }
}
@media (max-width:520px){
  .billing{ gap:12px; }
  .billing__switch{ width:100%; }
}

.pricing{ background:#F5F6F8; }
.pricing__inner{ max-width:1280px; margin:0 auto; padding:64px 24px 88px; }
.pricing__note{ margin:0 0 28px; font-size:14px; color:var(--ink-soft); text-align:center; }
.pricing__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:start;
}
.plan{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:32px 26px; display:flex; flex-direction:column; height:100%;
}
.plan--featured{
  border:2px solid var(--maroon);
  box-shadow:0 1px 2px rgba(14,22,33,.04), 0 16px 40px rgba(14,22,33,.10);
}
.plan__badge{
  position:absolute; top:-13px; left:26px;
  background:var(--maroon); color:#fff; font-size:12px; font-weight:700;
  padding:6px 14px; border-radius:15px;
}
.plan__name{
  margin:0 0 4px; font-family:var(--font-head),sans-serif; font-weight:800;
  font-size:22px; letter-spacing:-0.01em;
}
.plan__users{ margin:0 0 18px; font-size:14px; color:var(--ink-soft); }
.plan__price{ margin:0; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.plan__amount{
  font-family:var(--font-head),sans-serif; font-weight:800; font-size:40px;
  letter-spacing:-0.02em; line-height:1;
}
.plan__currency{ font-family:var(--font-head),sans-serif; font-weight:700; font-size:24px; }
.plan__period{ font-size:15px; color:var(--ink-soft); }
.plan__monthly{ margin:8px 0 0; font-size:14px; color:var(--ink-soft); }
/* Akcijski paket (9. 10. 2026): redna cena prečrtana levo od akcijske,
   enota tik za zneskom („49 €/mesec“), popust kot rdeča oznaka desno zgoraj. */
.plan__was{
  font-family:var(--font-head),sans-serif; font-weight:600; font-size:20px;
  color:rgba(14,22,33,.45); text-decoration:line-through; text-decoration-thickness:2px;
  margin-right:6px;
}
.plan__unit{ font-family:var(--font-head),sans-serif; font-weight:700; font-size:18px; color:var(--ink); }
.plan__unit [data-period-label]{ font-family:var(--font-body),sans-serif; font-weight:500; font-size:15px; color:rgba(14,22,33,.6); }
.plan__sale{
  position:absolute; top:32px; right:26px;
  color:var(--sale); font-family:var(--font-head),sans-serif; font-weight:800; font-size:16px;
}
/* Cena na trenerja, pod ceno paketa. */
.plan__per-coach{ margin:8px 0 0; font-size:14px; font-weight:600; color:var(--green); }
.plan__amount--text{ font-size:30px; line-height:40px; }
.plan__desc{
  margin:20px 0 0; padding-top:20px; border-top:1px solid var(--line);
  font-size:15px; line-height:1.55; color:var(--ink-soft);
}
.plan__points{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.plan__points li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.5; }
.plan__check{ flex-shrink:0; margin-top:3px; color:var(--green); }
.plan__cta{ margin-top:auto; justify-content:center; }
.plan__desc{ margin-bottom:26px; }
/* Skupen seznam funkcij pod karticami (9. 10. 2026). */
.pricing__all{ margin-top:22px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px 26px; }
.pricing__all-title{ margin:0; font-family:var(--font-head),sans-serif; font-weight:800; font-size:20px; letter-spacing:-0.01em; }
.pricing__all-lead{ margin:6px 0 0; font-size:15px; color:var(--ink-soft); }
.pricing__all-list{ margin-top:22px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:22px; row-gap:12px; }
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--ink); text-decoration:none;
  font-weight:700; font-size:15px; padding:13px 24px;
  border:1.5px solid var(--line); border-radius:15px;
  transition:border-color .2s ease, background .2s ease;
}
.btn-ghost:hover{ border-color:var(--maroon); background:rgba(10,42,71,.04); }

.pricing__facts{
  margin-top:48px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;
}
.fact{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 22px; }
.fact h3{
  margin:0 0 8px; font-family:var(--font-head),sans-serif; font-weight:700; font-size:16px;
}
.fact p{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-soft); }

@media (max-width:980px){
  .pricing__grid, .pricing__facts{ grid-template-columns:1fr; }
  .pricing__all-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plan--featured{ order:-1; }
}
@media (prefers-color-scheme: dark){
  .pricing{ background:rgba(255,255,255,.03); }
  .plan, .fact, .pricing__all{ background:var(--cream); }
}

/* Podstran s fotografijo v heroju, belim ozadjem in sivim panelom cez rob heroja.
   Uporaba: $bodyClass = 'page--light', hero .subhero--photo,
   vsebina v .subpage-sheet > .subpage-sheet__panel (glej cenik.php, o-nas.php). */
.subhero--photo, .subpage-sheet{ --overlap:120px; }
.subhero--photo{ position:relative; overflow:hidden; background:#0A2A47; }
.subhero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 70%; opacity:.9;
}
.subhero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(3,16,32,.38) 0%, rgba(5,24,46,.22) 55%, rgba(8,32,58,.5) 100%);
}
.subhero--photo .subhero__inner{
  position:relative; padding-top:168px; padding-bottom:calc(64px + var(--overlap));
}
.subpage-sheet{ background:transparent; padding:0 24px; }
.subpage-sheet__panel{
  position:relative; z-index:1;
  max-width:1232px; margin:calc(-1 * var(--overlap)) auto 0;
  padding:56px 40px 64px;
  background:#F5F6F8; border-radius:32px;
  box-shadow:0 1px 2px rgba(14,22,33,.04), 0 24px 60px rgba(3,16,32,.18);
}
/* O nas: bloka v panelu ne rabita lastnega ozadja in zunanjih odmikov. */
.subpage-sheet__panel .about{ max-width:none; padding:0; }
.subpage-sheet__panel .values{ background:transparent; margin-top:64px; }
.subpage-sheet__panel .values__inner{ max-width:none; padding:0; }
.subpage-sheet__panel .card{ background:#fff; }
.page--light{ background:#fff; }
@media (max-width:820px){
  .subhero--photo, .subpage-sheet{ --overlap:72px; }
  .subhero--photo .subhero__inner{ padding-top:180px; }
  .subpage-sheet{ padding:0 12px; }
  .subpage-sheet__panel{ padding:36px 16px 40px; border-radius:24px; }
  .subpage-sheet__panel .values{ margin-top:44px; }
}
@media (prefers-color-scheme: dark){
  .subpage-sheet{ background:transparent; }
  .subpage-sheet__panel{
    background:#152131; border:1px solid var(--line);
    box-shadow:0 24px 60px rgba(0,0,0,.35);
  }
  .subpage-sheet__panel .card{ background:var(--cream); }
  .page--light{ background:var(--cream); }
}
/* Za vsak sport v panelu: gumbi za skok zgoraj, sporti kot bele kartice v dveh stolpcih. */
.subpage-sheet__panel .sport-jump{ background:transparent; border-bottom:0; }
.subpage-sheet__panel .sport-jump__inner{ max-width:none; padding:0 0 40px; }
.subpage-sheet__panel .sport-jump__link{ background:#fff; }
.subpage-sheet__panel .sport-jump__link:hover{ background:#F2FAF5; }
.subpage-sheet__panel .sport-list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:stretch;
}
.subpage-sheet__panel .sport, .subpage-sheet__panel .sport--alt{
  background:#fff; border-radius:20px; box-shadow:var(--card-shadow);
}
.subpage-sheet__panel .sport__inner{ max-width:none; padding:32px 28px; }
@media (max-width:820px){
  .subpage-sheet__panel .sport-list{ grid-template-columns:1fr; gap:16px; }
  .subpage-sheet__panel .sport-jump__inner{ padding-bottom:28px; }
  .subpage-sheet__panel .sport__inner{ padding:24px 20px; }
}
@media (prefers-color-scheme: dark){
  .subpage-sheet__panel .sport-jump__link,
  .subpage-sheet__panel .sport, .subpage-sheet__panel .sport--alt{ background:var(--cream); }
  .subpage-sheet__panel .sport-jump__link:hover{ background:rgba(47,174,96,.1); }
}

/* Koraki procesa ------------------------------------------------------ */
/* Naslov in podnaslov sredinsko; .h2 in .lead imata max-width, zato ju
   je treba se vodoravno centrirati z margin:auto. */
.proces__head{ max-width:760px; margin:0 auto 44px; text-align:center; }
.proces__head .h2{ margin-left:auto; margin-right:auto; }
.proces__head .lead{ margin-left:auto; margin-right:auto; }
.steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.step{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:26px 24px 24px; display:flex; flex-direction:column; align-items:flex-start;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.step:hover{ box-shadow:0 10px 30px rgba(3,16,32,.08); border-color:rgba(47,174,96,.45); }
.step__num{
  position:absolute; top:18px; right:20px;
  font-family:var(--font-head),sans-serif; font-weight:800; font-size:30px;
  color:rgba(14,22,33,.1); line-height:1;
}
.step__icon{
  width:46px; height:46px; border-radius:13px; background:rgba(47,174,96,.14);
  display:flex; align-items:center; justify-content:center; color:var(--maroon); margin-bottom:18px;
}
.step__title{ margin:0; font-family:var(--font-head),sans-serif; font-weight:700; font-size:18px; }
.step__desc{ margin:10px 0 0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
/* Koraki procesa (naročnik 9. 10. 2026): ista polna ploščica kot kartice
   občinstva, a vseh šest v barvi znamke, da se proces bere kot celota. */
.step__icon--tile{
  width:56px; height:56px; border-radius:17px;
  background:linear-gradient(145deg,#16406B,#0A2A47);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 10px 24px -8px rgba(10,42,71,.55);
  transition:transform .25s ease;
}
.step__icon--tile svg{ width:40px; height:40px; }
.step:hover .step__icon--tile{ transform:translateY(-2px) rotate(-4deg); }
@media (prefers-reduced-motion: reduce){
  .step__icon--tile{ transition:none; }
  .step:hover .step__icon--tile{ transform:none; }
}
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } }
@media (prefers-color-scheme: dark){
  .step{ background:var(--cream); }
  .step__num{ color:rgba(251,238,231,.14); }
}




/* Mobilni meni (predal z leve) ----------------------------------------- */
/* Gumb in predal sta vidna do 1024px; nad tem ostane obicajna navigacija
   v vrstici. Pet povezav + jezik + CTA potrebuje ~950px, pri 820px so se
   povezave lomile v dve vrsti (tudi JS: initNavDrawer zapre predal nad 1024). */
.nav-burger{ display:none; }
.navdrawer{ display:none; }

@media (max-width:1024px){
  .site-nav{ display:none; }
  .nav-burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0 10px; cursor:pointer;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
    border-radius:12px; justify-self:start;
  }
  .nav-burger span{ display:block; height:2px; background:#fff; border-radius:2px; }
  .site-header.is-stuck .nav-burger{
    background:rgba(14,22,33,.06); border-color:rgba(14,22,33,.16);
  }
  .site-header.is-stuck .nav-burger span{ background:var(--ink); }
  /* Logotip, burger in desni del v eno vrsto. */
  .site-header__inner{ grid-template-columns:auto 1fr auto; row-gap:0; }
  .nav-burger{ order:-1; }

  .navdrawer{ display:block; position:fixed; inset:0; z-index:120; }
  .navdrawer[hidden]{ display:none; }
  .navdrawer__backdrop{
    position:absolute; inset:0; background:rgba(3,16,32,.55);
    opacity:0; transition:opacity .28s ease;
  }
  .navdrawer__panel{
    position:absolute; top:0; left:0; bottom:0; width:min(82vw,320px);
    background:var(--maroon); color:#fff;
    display:flex; flex-direction:column; gap:8px; padding:20px;
    box-shadow:0 0 40px rgba(0,0,0,.4);
    transform:translateX(-100%); transition:transform .28s ease;
    overflow-y:auto;
  }
  /* Razred doda JS sele po prvem izrisu, da se predal res animira. */
  .navdrawer.is-open .navdrawer__backdrop{ opacity:1; }
  .navdrawer.is-open .navdrawer__panel{ transform:translateX(0); }

  .navdrawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .navdrawer__logo{ height:48px; width:auto; display:block; }
  .navdrawer__x{
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    width:40px; height:40px; border-radius:11px; color:#fff;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  }
  .navdrawer__links{ display:flex; flex-direction:column; }
  .navdrawer__links a{
    color:#fff; text-decoration:none; font-size:17px; font-weight:600;
    padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.12);
  }
  .navdrawer__links a:active{ color:#5FD08A; }
  .navdrawer__cta{ margin-top:18px; justify-content:center; padding:15px 22px; font-size:16px; }

  /* Ko je predal odprt, stran za njim ne sme drseti. */
  body.nav-locked{ overflow:hidden; }
}

@media (prefers-reduced-motion: reduce){
  .navdrawer__panel, .navdrawer__backdrop{ transition:none; }
}

/* --- Ekipa (o-nas.php) ------------------------------------------------ */
.team{ background:transparent; }
.team__inner{ max-width:1280px; margin:0 auto; padding:88px 24px; }
.subpage-sheet__panel .team{ margin-top:64px; }
.subpage-sheet__panel .team__inner{ max-width:none; padding:0; }
.team__inner .h2{ margin-bottom:12px; }
.team__lead{ margin:0 0 36px; font-size:17px; line-height:1.7; color:var(--ink-soft); max-width:620px; }
.team__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.member{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:28px; display:flex; flex-direction:column; gap:6px;
}
.member__photo{
  width:84px; height:84px; border-radius:50%; object-fit:cover;
  display:block; background:#E8E2DB; margin-bottom:10px;
}
.member__name{
  margin:0; font-family:var(--font-head),sans-serif;
  font-weight:700; font-size:20px; line-height:1.3;
}
.member__role{ margin:0; font-size:14px; font-weight:600; color:#1E7A44; }
.member__bio{ margin:6px 0 0; font-size:16px; line-height:1.7; color:var(--ink-soft); }
/* Ekipa s fotografijo (naročnik 9. 10. 2026): „slika 30 %, tekst 70 %",
   na namizju kartici 50/50 v isti vrsti (mreža .team__grid ostane dva
   stolpca, pod 820 px en). Slika brez roba, od vrha do dna kartice; rob ima
   samo besedilo. Pod 560 px gre slika nad besedilo. */
/* Vsak član v svoji vrsti (naročnik 9. 10. 2026: „preveč je texta"). */
.team__grid.team__grid--people{ grid-template-columns:1fr; gap:24px; }
/* Izmenično: slika levo, desno, levo (naročnik 9. 10. 2026), na namizju. */
@media (min-width:561px){
  .team__grid--people > .member--person:nth-child(even){ flex-direction:row-reverse; }
}
.member.member--person{
  flex-direction:row; align-items:stretch; gap:0; padding:0; overflow:hidden;
  min-height:420px;
}
.member__portrait{ flex:0 0 50%; max-width:50%; display:block; position:relative; }
.member__portrait img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; background:#E8E2DB;
}
/* Kartica „Pridruži se še ti": namesto fotografije temno modra ploskev. */
.member--join{ min-height:300px; }
.member .member__portrait--join{
  display:flex; flex-direction:column; justify-content:space-between; padding:32px 36px;
  background:
    linear-gradient(180deg, rgba(10,42,71,.35) 0%, rgba(10,42,71,.55) 45%, rgba(7,26,44,.95) 100%),
    url('/assets/img/obrazec-nogomet.jpg') 65% center / cover no-repeat;
}
.member__portrait img.join-poster__logo{
  position:static; inset:auto; width:34px; height:34px; object-fit:contain;
  background:none; opacity:.9;
}
.join-poster__eyebrow{
  margin:0 0 12px; display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#7FE0A4;
}
.join-poster__eyebrow span{ width:8px; height:8px; border-radius:50%; background:var(--green); }
.join-poster__title{
  margin:0; max-width:12ch; color:#fff; font-family:var(--font-head),sans-serif;
  font-weight:800; letter-spacing:-0.02em; line-height:1.08; font-size:clamp(30px,3.2vw,46px);
}
@media (max-width:560px){
  .member .member__portrait--join{ padding:20px 22px; min-height:220px; }
  .join-poster__title{ font-size:30px; }
}
.member__cta{ margin:14px 0 0; }
.member__cta .btn-green{ display:inline-flex; text-decoration:none; color:#fff; border-radius:15px; font-weight:700; }
.member__text{
  flex:1 1 50%; min-width:0; padding:36px 48px;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
}
/* „Začeli smo v Sloveniji" na sredini, kartici z ikono nad naslovom
   (naročnik 9. 10. 2026). */
.team--center .team__inner{ text-align:center; }
.team--center .h2, .team--center .team__lead{ margin-left:auto; margin-right:auto; }
.team--center .member{ align-items:center; }
/* Ikoni v kartici: dvobarvni znak v ploščici z mehko senco, vsaka kartica
   svoja barva (naročnik 9. 10.: „bolj premium, bolj raznolike"). */
.about-icon{
  width:64px; height:64px; border-radius:20px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 8px 22px rgba(14,22,33,.08);
}
.about-icon--pitch{ background:#EAF7EF; border:1px solid rgba(47,174,96,.22); }
.about-icon--map{ background:#EAF0F7; border:1px solid rgba(0,51,102,.16); }
.about-icon svg{ width:32px; height:32px; }
/* Vodstvo: naslov in uvod na sredini, kartici ostaneta, kot sta. */
.team--head-center .h2, .team--head-center .team__lead{
  text-align:center; margin-left:auto; margin-right:auto;
}
@media (max-width:560px){
  .member.member--person{ flex-direction:column; min-height:0; }
  /* Kot na namizju (naročnik 9. 10. 2026): ležeč izrez od vrha, ne cela slika. */
  .member__portrait{ flex:none; max-width:none; width:100%; aspect-ratio:4/3; }
  .member .member__portrait--join{ aspect-ratio:auto; }
  .member__text{ padding:20px 22px 24px; }
}
@media (max-width:820px){
  .team__inner{ padding:56px 24px; }
  .subpage-sheet__panel .team{ margin-top:44px; }
  .team__grid{ grid-template-columns:1fr; gap:16px; }
  .member{ padding:22px; }
}
@media (prefers-color-scheme: dark){
  .subpage-sheet__panel .member{ background:var(--cream); }
}

/* --- Pravne in kontaktna podstran ------------------------------------- */
.legal{ max-width:760px; }
.legal .h2{ margin:0 0 16px; }
.legal h2 + .contact-grid{ margin-top:24px; }
.legal h3{
  margin:32px 0 8px; font-family:var(--font-head),sans-serif;
  font-weight:700; font-size:19px; line-height:1.35;
}
.legal p, .legal li{ font-size:16px; line-height:1.75; color:var(--ink-soft); }
.legal p{ margin:0 0 12px; }
.legal ul, .legal ol{ margin:0 0 12px; padding-left:20px; }
.legal li{ margin-bottom:6px; }
.legal a{ color:#1E7A44; text-decoration:underline; text-underline-offset:2px; }
.legal strong{ color:var(--ink); }
/* Opozorilo, da gre za osnutek - pred objavo mora vsebino pregledati pravnik. */
.legal__todo{
  background:rgba(47,174,96,.08); border:1px solid rgba(47,174,96,.35);
  border-radius:14px; padding:14px 16px; margin:0 0 24px;
}
.legal__meta{ font-size:14px; }
/* Podatki ponudnika (ZEPT), na kontaktni strani. */
.legal__company{ list-style:none; padding-left:0; }
.legal__table{
  width:100%; border-collapse:collapse; margin:16px 0 12px;
  font-size:15px; color:var(--ink-soft);
}
.legal__table th, .legal__table td{
  border:1px solid var(--line); padding:10px 12px;
  text-align:left; vertical-align:top; line-height:1.6;
}
.legal__table th{ color:var(--ink); font-weight:600; }

.contact-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px; margin-bottom:40px;
}
.contact-card{
  background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:22px;
}
.contact-card h3{
  margin:0 0 8px; font-family:var(--font-head),sans-serif;
  font-weight:700; font-size:17px;
}
.contact-card p{ margin:0 0 6px; font-size:16px; line-height:1.6; }
.contact-card__note{ font-size:14px; color:var(--ink-soft); }

/* Kontakt: levo nacini stika in podatki ponudnika, desno obrazec. */
.contact-layout{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:48px; align-items:start;
}
.contact-layout .legal{ max-width:none; }
.contact-layout .contact-grid{ grid-template-columns:1fr; gap:12px; }
.inquiry-card--flat{ box-shadow:none; border:1px solid var(--line); padding:32px; }
.contact-form__title{ margin:0 0 8px; }
.contact-form__lead{ margin:0 0 24px; font-size:16px; line-height:1.6; color:var(--f-soft); }
@media (max-width:960px){
  .contact-layout{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:560px){
  .inquiry-card--flat{ padding:24px 20px; }
}
@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; }
  .legal__table{ display:block; overflow-x:auto; }
}
@media (prefers-color-scheme: dark){
  .subpage-sheet__panel .contact-card{ background:var(--cream); }
}


/* --- Telefon (27. 9.) ------------------------------------------------- */
/* Jezik je na telefonu v predalu, ne v glavi. */
.navdrawer__lang, .navdrawer__foot{ display:none; }

@media (max-width:820px){
  /* Glava v eni vrsti: logotip levo, gumb in meni desno. Flex namesto mreze,
     ker je stolpec 1fr z logotipom ob sirokem gumbu padel na nic sirine. */
  .site-header__inner{ display:flex; align-items:center; gap:6px; padding:14px 12px 32px 20px; }
  .site-header.is-stuck .site-header__inner{ padding:10px 12px 10px 20px; }
  .logo{ flex:none; }
  .logo img, .site-header.is-stuck .logo img{ height:48px; width:48px; object-fit:contain; }
  /* Jezik in gumb „Naročite predstavitev“ sta na telefonu v predalu. */
  .site-header__end{ display:none; }

  /* Meni desno, brez okvirja: tri crte, zgornji dve polni, spodnja krajsa. */
  .nav-burger, .site-header.is-stuck .nav-burger{
    order:2; margin-left:auto; justify-self:auto; background:transparent; border:0; border-radius:0;
    width:44px; height:44px; padding:0 10px; gap:6px; align-items:flex-end;
  }
  .nav-burger span{ width:24px; }
  .nav-burger span:last-child{ width:16px; }

  /* Predal: bel, z desne, velike povezave v pisavi naslovov. */
  .navdrawer__backdrop{ background:rgba(3,16,32,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .navdrawer__panel{
    left:auto; right:0; width:min(90vw,400px);
    background:#fff; color:var(--ink); padding:14px 24px calc(24px + env(safe-area-inset-bottom));
    gap:0; box-shadow:-24px 0 60px rgba(3,16,32,.18);
    border-radius:24px 0 0 24px; transform:translateX(100%);
    transition:transform .38s cubic-bezier(.22,1,.36,1);
  }
  .navdrawer__head{ margin:0 0 14px; }
  .navdrawer__logo{ content:url('../img/logo-mark.png'); height:44px; }
  .navdrawer__x{
    width:44px; height:44px; border-radius:50%; border:0;
    background:#F2F3F5; color:var(--ink);
  }
  .navdrawer__links a{
    display:block;
    font-family:var(--font-head),sans-serif; font-size:20px; font-weight:700;
    letter-spacing:-0.02em; line-height:1.2; color:var(--ink);
    padding:12px 0; border-bottom:0;
    opacity:0; transform:translateX(18px);
    transition:opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1), color .2s ease;
  }
  .navdrawer__links a:hover, .navdrawer__links a:active{ color:#1E7A44; }
  .navdrawer.is-open .navdrawer__links a{ opacity:1; transform:none; }
  .navdrawer.is-open .navdrawer__links a:nth-child(1){ transition-delay:.06s; }
  .navdrawer.is-open .navdrawer__links a:nth-child(2){ transition-delay:.10s; }
  .navdrawer.is-open .navdrawer__links a:nth-child(3){ transition-delay:.14s; }
  .navdrawer.is-open .navdrawer__links a:nth-child(4){ transition-delay:.18s; }
  .navdrawer.is-open .navdrawer__links a:nth-child(5){ transition-delay:.22s; }
  .navdrawer.is-open .navdrawer__links a:nth-child(6){ transition-delay:.26s; }

  .navdrawer__lang{ display:block; margin-top:auto; padding-top:28px; }
  .navdrawer__lang-title{
    margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-soft);
  }
  /* Segmentni izbirnik: siva podlaga, izbrani jezik bela „tipka". */
  .navdrawer__lang-grid{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px;
    padding:4px; border-radius:14px; background:#F2F3F5;
  }
  .navdrawer__lang-opt{
    display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px;
    border-radius:10px; color:var(--ink-soft); text-decoration:none; font-size:14px; font-weight:700;
  }
  .navdrawer__lang-opt.is-active{
    background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(14,22,33,.08), 0 4px 12px rgba(14,22,33,.08);
  }
  .navdrawer__lang-flag{ font-size:16px; line-height:1; }
  .navdrawer__cta{ margin-top:14px; justify-content:center; min-height:52px; padding:0 22px; font-size:16px; border-radius:14px; }
  .navdrawer__foot{
    display:block; margin:14px 0 0; text-align:center; font-size:14px; color:var(--ink-soft);
  }
  .navdrawer__foot a{ color:inherit; text-decoration:none; font-weight:600; }
}
@media (max-width:820px) and (prefers-color-scheme: dark){
  .navdrawer__panel{ background:#0E1621; color:#FBEEE7; }
  .navdrawer__logo{ content:url('../img/logo-white.png'); }
  .navdrawer__x{ background:rgba(255,255,255,.08); color:#FBEEE7; }
  .navdrawer__links a{ color:#FBEEE7; }
  .navdrawer__lang-grid{ background:rgba(255,255,255,.06); }
  .navdrawer__lang-opt{ color:rgba(251,238,231,.7); }
  .navdrawer__lang-opt.is-active{ background:rgba(255,255,255,.14); color:#FBEEE7; box-shadow:none; }
  .navdrawer__foot{ color:rgba(251,238,231,.7); }
}
@media (max-width:820px) and (prefers-reduced-motion: reduce){
  .navdrawer__links a{ opacity:1; transform:none; transition:none; }
}
@media (max-width:380px){
  .site-header__inner{ gap:2px; padding-left:16px; padding-right:8px; }
  .site-header.is-stuck .site-header__inner{ padding-left:16px; padding-right:8px; }
  .navdrawer__links a{ font-size:19px; }
}

/* Podstrani na telefonu: glava je ena vrsta (~62 px), 180 px roba nad naslovom
   je ostalo iz casa, ko se je navigacija lomila v dve vrsti. */
@media (max-width:820px){
  .subhero__inner{ padding-top:112px; padding-bottom:40px; }
  .subhero--photo .subhero__inner{ padding-top:112px; padding-bottom:calc(40px + var(--overlap)); }
}

/* Hero na telefonu: naslov in besedilo, nato grafika, pod njo oba gumba in znacki. */
@media (max-width:720px){
  .hero__inner{ display:flex; flex-direction:column; align-items:stretch; gap:0; padding-bottom:96px; }
  .hero__inner > div:first-child{ display:contents; }
  .hero__inner h1{ order:1; }
  .hero__sub{ order:2; }
  .hero__visual{ order:3; margin:64px auto 0; max-width:320px; aspect-ratio:1/1.2; }
  .hero__cta{ order:4; margin-top:64px; flex-direction:column; align-items:stretch; gap:12px; }
  .hero__cta .btn-green, .hero__cta .btn-outline{ justify-content:center; width:100%; }
  .hero__badges{ order:5; margin-top:36px; justify-content:center; }

  /* Grafika na telefonu: telefon, dve kartici in dva obraza. Tretja kartica
     in obraz za njo sta na 320 px prekrila ves telefon. */
  .glass-card--3, .hero__avatar--b{ display:none; }
  .glass-card{ width:auto; max-width:56%; padding:12px 14px; border-radius:14px; }
  .glass-card--1{ left:-4px; top:2%; }
  .glass-card--2{ right:-4px; top:auto; bottom:14%; }
  .glass-card__q{ font-size:13px; margin-bottom:10px; }
  .rsvp span{ padding:5px 14px; }
  .dots span{ width:12px; height:12px; }
  .hero__avatar--a{ left:10%; top:58%; width:52px; height:52px; }
  .hero__avatar--c{ left:88%; top:30%; width:48px; height:48px; }
}

/* Koraki procesa in kartice vizije na telefonu: ena kartica, desno se vidi
   rob naslednje, s prstom se povlece naprej. Trak sega do roba zaslona. */
@media (max-width:900px) and (min-width:641px){
  .steps, .feat-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .steps, .feat-cards{
    display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%;
    gap:12px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
    margin:0 -24px; padding:0 24px 4px; scroll-padding-left:24px;
    scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .steps::-webkit-scrollbar, .feat-cards::-webkit-scrollbar{ display:none; }
  .steps > *, .feat-cards > *{ scroll-snap-align:start; min-width:0; }
}

/* Zemljevid pod besedilom: brez 150 px roba, ki je na racunalniku prostor za
   zemljevid ob besedilu. */
@media (max-width:1080px){
  .region__top{ margin-bottom:0; }
}
/* Koraki in Vizija sta na isti sivi podlagi; 2 x 88 px med njima je na telefonu prevec. */
@media (max-width:640px){
  #proces .wrap{ padding-bottom:40px; }
  #vizija .wrap{ padding-top:40px; }
  .feat-cards{ margin-top:16px; }
}

/* Zemljevid na telefonu: obrezan na regijo (SI, HR, BiH, RS do AL), priblizno 3x
   vecji. Okno v enotah SVG je x 420-740, y 400-680 (viewBox je 170 200 940 650),
   zato je SVG 940/320 okna sirok in 650/280 visok ter zamaknjen za odmik okna. */
@media (max-width:760px){
  .map{
    width:calc(100% + 48px); max-width:none; margin:8px -24px 0; aspect-ratio:320/280; overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
  }
  .map__svg{
    position:absolute; width:293.75%; height:232.143%; left:-78.125%; top:-71.429%;
    -webkit-mask-image:none; mask-image:none;
  }
}

/* Prijava na novice: polje in gumb cez vso sirino obrazca. */
.newsletter form{ flex-direction:column; flex-wrap:nowrap; max-width:520px; margin:0 auto; }
@media (min-width:561px){
  .newsletter.newsletter--blue form{ flex-direction:row; align-items:stretch; max-width:680px; gap:12px; }
  .newsletter.newsletter--blue input{ flex:1 1 auto; width:auto; min-height:60px; font-size:16px; padding:0 22px; }
  .newsletter.newsletter--blue button{ flex:none; width:auto; min-height:60px; padding:0 30px; white-space:nowrap; }
}
.newsletter input{ flex:none; min-width:0; width:100%; min-height:52px; }
.newsletter button{ width:100%; min-height:52px; font-size:16px; }
.newsletter button:disabled{ opacity:.6; cursor:progress; }

/* Noga na telefonu: logotip cez vso sirino, Navigacija | Podpora 50/50,
   Pravno cez vso sirino s povezavami v dveh stolpcih. */
@media (max-width:640px){
  .site-footer__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 20px; padding:52px 20px 32px; }
  .site-footer__cols > div:first-child,
  .site-footer__cols > div:last-child{ grid-column:1/-1; }
  .site-footer__cols > div:last-child .site-footer__links{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 20px;
  }
  .site-footer__tagline{ max-width:none; }
  .site-footer__bottom{ padding:20px 20px 28px; }
}

@media (max-width:560px){ .pricing__all-list{ grid-template-columns:1fr; } }

/* Enotna ikona v ploščici (naročnik 9. 10. 2026): temno modra ploščica, bela
   risba, zelen poudarek; kot koraki procesa na naslovni. O nas, Kontakt. */
.icon-tile{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:16px; border:0;
  background:linear-gradient(145deg,#16406B,#0A2A47);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 10px 24px -8px rgba(10,42,71,.55);
}
.icon-tile svg{ width:36px; height:36px; }
/* Kontaktna kartica (naročnik 9. 10. 2026): ikona levo, vse ostalo desno. */
.contact-card:has(.contact-card__icon){
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:18px; align-items:start;
}
.contact-card__icon{ grid-row:1 / span 3; margin:0; }
.contact-card:has(.contact-card__icon) > :not(.contact-card__icon){ grid-column:2; }
.site-footer__links a.site-footer__portal{ text-decoration:underline; text-underline-offset:3px; }

/* O nas, uvod: tri številke z ikono pod besedilom (9. 10. 2026). */
.about-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
  margin:28px 0 0; padding:24px 0 0; max-width:520px; border-top:1px solid var(--line);
}
.about-stats dt{
  /* Rahla ikona v isti vrsti kot številka, kot na naslovni (9. 10. 2026). */
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  font-family:var(--font-head),sans-serif; font-weight:800; font-size:22px; letter-spacing:-0.02em; line-height:1.2;
}
.about-stats dd{ margin:4px 0 0; font-size:13px; line-height:1.45; color:var(--ink-soft); }
.icon-tile.icon-tile--sm{ width:44px; height:44px; border-radius:14px; }
.icon-tile.icon-tile--sm svg{ width:30px; height:30px; }
@media (max-width:560px){
  .about-stats{ grid-template-columns:1fr; gap:14px; }
  .about-stats__item{ display:flex; align-items:center; gap:14px; }
  .about-stats dd{ margin:0; }
}

/* Vodstvo: ime osebe večje (naročnik 9. 10. 2026), ostale kartice ostanejo. */
.member--person:not(.member--join) .member__name{ font-size:30px; letter-spacing:-0.02em; line-height:1.15; }
@media (max-width:560px){ .member--person:not(.member--join) .member__name{ font-size:26px; } }