/* =========================================================
   mačjestene.si — Design system
   Playful / pastel / premium. Vse skupne spremenljivke tukaj.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand */
  --pink:#F53D7B;
  --pink-soft:#FF7FA8;
  --orange:#F5952F;
  --yellow:#FBC64A;
  --mint:#5FC3A4;
  --turq:#5FBCD3;
  --purple:#A98BE0;
  --red:#E8524F;

  /* Pastel fills (kartice, badge-i) */
  --pink-50:#FFDFEA;
  --orange-50:#FFE6CC;
  --yellow-50:#FFEFC6;
  --mint-50:#D1EEE2;
  --turq-50:#D0EAF2;
  --purple-50:#E5DAF8;

  /* Globlji odtenki za oblike v ozadju. Pastelni -50 so na kremnem ozadju
     komaj vidni, zato imajo blobi in polkrogi svojo, močnejšo lestvico. */
  --pink-100:#FFD9E6;
  --orange-100:#FFE2C2;
  --yellow-100:#FFECBC;
  --mint-100:#C9EBDD;
  --turq-100:#C8E6F0;
  --purple-100:#E0D2F7;

  /* Besedilne različice barv znamke. Paleta se NE spremeni: te barve se
     uporabljajo izključno za besedilo in ikone na svetli podlagi, ker so
     osnovne (--mint, --turq, --orange ...) prešibke za branje.
     Vse so nad 5:1 na belem, torej presegajo zahtevo WCAG AA. */
  --pink-ink:#BB1655;
  --orange-ink:#9A4708;
  --yellow-ink:#7E5800;
  --mint-ink:#186B53;
  --turq-ink:#175F77;
  --purple-ink:#6B46C1;

  /* Še stopnja globlje: za oblike na najsvetlejših ozadjih (hero domače strani),
     kjer so bili -100 odtenki še vedno prebledi. */
  --pink-150:#FFC6DA;
  --orange-150:#FFD3A4;
  --yellow-150:#FFE29B;
  --mint-150:#B2E2CE;
  --turq-150:#B0DCEB;
  --purple-150:#D0BDF3;

  /* Osnova */
  --cream:#FFFBF6;
  --peach:#FDF0E6;
  --peach-deep:#FBE4D4;
  --white:#fff;

  /* Tekst */
  --ink:#2B2320;
  --ink-2:#5A4E48;
  --ink-3:#6D605A;

  /* Radiji */
  --r-sm:12px;
  --r-md:18px;
  --r-lg:26px;
  --r-xl:34px;
  --r-pill:999px;

  /* Sence */
  --sh-sm:0 4px 14px rgba(180,120,90,.08);
  --sh-md:0 10px 30px rgba(180,120,90,.12);
  --sh-lg:0 22px 55px rgba(180,120,90,.16);
  --sh-pink:0 10px 26px rgba(245,61,123,.32);

  /* Ritem: strnjeno, da med sekcijami ni velikih praznin.
     Zgornja meja je nizka namenoma, sicer na širokih zaslonih med
     sekcijami nastane 200 px prazne barve. */
  --sp-section:clamp(40px,3.4vw,60px);
  --container:1240px;

  /* Tipografija */
  --f-head:'Fredoka','Baloo 2','Quicksand',system-ui,sans-serif;
  --f-body:'Nunito','Poppins',system-ui,-apple-system,sans-serif;
}

/* ---------- 2. Reset ---------- */
/* Mehak preliv med stranmi namesto sunkovitega ponovnega nalaganja.
   Brskalniki brez podpore (zaenkrat Firefox) to pravilo preprosto prezrejo
   in se vedejo tako kot doslej. Glava je iz preliva izvzeta, glej razdelek 8. */
@view-transition{navigation:auto}
/* Zelo kratek preliv: dovolj, da preklop ni sunkovit, prekratek, da bi ga
   občutil kot čakanje. Brez premika navzgor, ker se ta bere kot zamik.
   Za popolnoma takojšen preklop obe vrstici spodaj izbriši. */
::view-transition-old(root){animation:prehodVen .09s linear both}
::view-transition-new(root){animation:prehodNoter .09s linear both}
@keyframes prehodVen{to{opacity:0}}
@keyframes prehodNoter{from{opacity:0}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Sidra se ustavijo pod lepljivo navigacijo, da naslov ni skrit za njo. */
/* Lepljiva navigacija je visoka 80 px; sidra se ustavijo pod njo,
   z malo zraka, da naslov ni prilepljen na rob. */
:target{scroll-margin-top:104px}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--cream);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:600;line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.2vw,4.1rem);font-weight:700}
h2{font-size:clamp(1.9rem,3.4vw,2.75rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem)}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}

/* ---------- 3. Layout ---------- */
.container{width:min(100% - 40px,var(--container));margin-inline:auto}
/* vsebina vedno nad valovi in dekoracijami */
.section>.container{position:relative;z-index:3}
.section{padding-block:var(--sp-section);position:relative;overflow-x:clip}
.grid{display:grid;gap:26px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.stack-sm{display:flex;flex-direction:column;gap:10px}

/* Barvne podlage sekcij.
   Nobena ni ploskovno bela: vsaka ima rahel navpičen preliv, da se sekcije
   med drsenjem ločijo in stran ne izpade prazna. */
.bg-cream{background:linear-gradient(180deg,#FFFAF3 0%,#FFEEDB 100%)}
.bg-peach{background:linear-gradient(180deg,var(--peach) 0%,var(--cream) 100%)}
.bg-soft{background:var(--peach)}
/* Dodatna barvna pasova za menjavanje ritma na podstraneh */
.bg-rose{background:linear-gradient(180deg,#FFE7F0 0%,#FFF4EC 100%)}
.bg-sage{background:linear-gradient(180deg,#DCF1E8 0%,#F1F9F5 100%)}
.bg-sky{background:linear-gradient(180deg,#DAEEF6 0%,#F1F8FB 100%)}

/* ---------- 4. Tipografske pomagala ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-head);font-weight:600;font-size:1.05rem;
  color:var(--ink);margin-bottom:.6em;
}
.eyebrow .paw{color:var(--orange);font-size:1.15em}
/* Podčrtan "marker" pod naslovom sekcije */
/* Poteza se meri v em, da se drži besede pri vsaki velikosti naslova.
   Spodnji padding ji rezervira prostor, zato ne zaide v naslednjo vrstico. */
.underlined{position:relative;display:inline-block;padding-bottom:.34em}
.underlined::after{
  content:"";position:absolute;left:2%;right:2%;bottom:.04em;height:.17em;
  background:var(--pink);border-radius:999px;opacity:.85;
  -webkit-mask:radial-gradient(circle at 50% 140%,#000 60%,transparent 61%);
          mask:radial-gradient(circle at 50% 140%,#000 60%,transparent 61%);
}
.lead{font-size:clamp(1.02rem,1.3vw,1.15rem);color:var(--ink-2);max-width:56ch}
/* Barvno besedilo vedno uporablja -ink različice, sicer je neberljivo */
.t-pink{color:var(--pink-ink)}.t-orange{color:var(--orange-ink)}.t-yellow{color:var(--yellow-ink)}
.t-mint{color:var(--mint-ink)}.t-turq{color:var(--turq-ink)}.t-purple{color:var(--purple-ink)}
.t-ink{color:var(--ink)}
.muted{color:var(--ink-3)}
.small{font-size:.9rem}

/* Mavrični naslov — vsaka črka svoja barva */
.rainbow span{display:inline-block}
/* Mavrica je okrasni naslov znamke in gre po polni paleti. Temni -ink odtenki
   so jo naredili rjavo in olivno, kar je proti pravilu o živih barvah.
   Vsaka beseda je v svojem ovoju .rw, ki se ne lomi: ker je vsaka črka
   samostojen element, bi brskalnik sicer prelomil sredi besede. */
.rainbow .rw{white-space:nowrap}
.rainbow .c1{color:var(--pink)}
.rainbow .c2{color:var(--orange)}
.rainbow .c3{color:var(--yellow)}
.rainbow .c4{color:var(--mint)}
.rainbow .c5{color:var(--turq)}
.rainbow .c6{color:var(--purple)}

/* ---------- 5. Gumbi ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-head);font-weight:600;font-size:1.02rem;
  padding:15px 28px;border-radius:var(--r-pill);border:2px solid transparent;
  cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:var(--pink);color:#fff;box-shadow:var(--sh-pink)}
.btn-primary:hover{background:#e42f6d;box-shadow:0 16px 34px rgba(245,61,123,.38)}
.btn-ghost{background:#fff;color:var(--ink);border-color:#F2DFD2;box-shadow:var(--sh-sm)}
.btn-ghost:hover{border-color:var(--pink);color:var(--pink)}
.btn-sm{padding:11px 20px;font-size:.94rem}
.btn-block{width:100%;justify-content:center}
/* Mini "poglej ideje" gumb v barvi kartice */
.btn-tint{
  background:#fff;border:2px solid currentColor;padding:9px 20px;border-radius:var(--r-pill);
  font-family:var(--f-head);font-weight:600;font-size:.9rem;display:inline-flex;gap:8px;align-items:center;
  transition:background .2s,transform .2s;
}
.btn-tint:hover{transform:translateY(-2px);background:#fffaf6}

/* ---------- 6. Badge-i / čipi ---------- */
/* Uvodna oznaka nad naslovom. Bela na kremnem ozadju se je izgubila, zato polno
   rumeno polnilo; temno besedilo na rumeni ima 9,7:1. */
.badge{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--yellow);color:var(--ink);border-radius:var(--r-pill);
  padding:10px 22px;font-weight:700;font-size:.92rem;
  box-shadow:0 8px 20px rgba(180,120,90,.2);
}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:var(--r-pill);border:1.5px solid #F0DFD3;background:#fff;
  font-family:var(--f-head);font-weight:500;font-size:.95rem;color:var(--ink-2);
  cursor:pointer;transition:all .2s;
}
.chip:hover{border-color:var(--pink-soft);color:var(--pink)}
.chip.is-active{background:var(--pink);border-color:var(--pink);color:#fff}
/* Okrogel "100% mačje odobreno" pečat */
.stamp{
  width:104px;height:104px;border-radius:50%;background:var(--mint);color:#fff;
  display:grid;place-content:center;text-align:center;font-family:var(--f-head);
  font-weight:600;font-size:.82rem;line-height:1.25;box-shadow:0 12px 26px rgba(95,195,164,.35);
  animation:floaty 5s ease-in-out infinite;
}

/* ---------- 7. Kartice ---------- */
.card{
  background:#fff;border-radius:var(--r-lg);padding:28px;
  box-shadow:var(--sh-md);border:1.5px solid rgba(203,164,136,.28);
  transition:transform .28s ease,box-shadow .28s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
/* Vsak barvni razred poda tudi --akcent (polna barva) in --akcent-meh (nežnejša),
   ki ju uporabijo obrobe in sence kartic za več kontrasta z ozadjem. */
.card-pink{--kartica-bg:var(--pink-50);--akcent:var(--pink-soft);--akcent-meh:rgba(245,61,123,.22);background:var(--kartica-bg)}
.card-orange{--kartica-bg:var(--orange-50);--akcent:var(--orange);--akcent-meh:rgba(245,149,47,.26);background:var(--kartica-bg)}
.card-yellow{--kartica-bg:var(--yellow-50);--akcent:var(--yellow);--akcent-meh:rgba(251,198,74,.34);background:var(--kartica-bg)}
.card-mint{--kartica-bg:var(--mint-50);--akcent:var(--mint);--akcent-meh:rgba(95,195,164,.26);background:var(--kartica-bg)}
.card-turq{--kartica-bg:var(--turq-50);--akcent:var(--turq);--akcent-meh:rgba(95,188,211,.26);background:var(--kartica-bg)}
.card-purple{--kartica-bg:var(--purple-50);--akcent:var(--purple);--akcent-meh:rgba(169,139,224,.26);background:var(--kartica-bg)}

/* Oštevilčena kartica koraka.
   Barva obrobe in sence pride iz --akcent, ki ga poda razred card-*,
   da kartica jasno stopi s pastelnega ozadja sekcije. */
.step{
  position:relative;text-align:center;padding-top:40px;
  background:var(--kartica-bg,var(--peach-deep));border-radius:var(--r-lg);
  border:2px solid var(--akcent,rgba(180,140,115,.22));
  box-shadow:0 6px 0 -2px var(--akcent-meh,rgba(180,120,90,.12)),var(--sh-sm);
  height:100%;display:flex;flex-direction:column;
}
.step p{flex:1}
.step__num{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  width:44px;height:44px;border-radius:50%;display:grid;place-content:center;
  font-family:var(--f-head);font-weight:600;color:#fff;font-size:1.15rem;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.step__icon{font-size:2.6rem;line-height:1;margin-bottom:14px}
.step h3{margin-bottom:.4em}
.step p{font-size:.93rem;color:var(--ink-2);margin:0}
.step__tag{display:inline-block;margin-top:16px;padding:6px 16px;border-radius:var(--r-pill);font-size:.82rem;font-weight:700}
/* Kompaktna različica koraka (npr. 4 v pol širine zaslona na domači strani) */
.step--sm{padding:34px 16px 22px}
.step--sm .step__num{width:38px;height:38px;font-size:1.02rem;top:-19px}
.step--sm .step__icon{font-size:2.1rem;margin-bottom:8px}
.step--sm h3{font-size:1.02rem;margin-bottom:.3em}
.step--sm p{font-size:.83rem;line-height:1.45}

/* pikčasta puščica med koraki */
.steps-row{position:relative}
.steps-row .arrow{
  position:absolute;top:50%;color:var(--pink-soft);font-size:1.3rem;
  transform:translateY(-50%);pointer-events:none;
}

/* Benefit kartica z ikono */
.benefit{
  border-radius:var(--r-lg);padding:30px 24px;text-align:center;
  border:2px solid var(--akcent,rgba(180,140,115,.22));
  box-shadow:0 6px 0 -2px var(--akcent-meh,rgba(180,120,90,.12)),var(--sh-sm);
  height:100%;display:flex;flex-direction:column;
}
.benefit p{flex:1}
.benefit .ico{font-size:2.4rem;line-height:1;margin-bottom:14px;display:block}
/* kompaktna različica (4 v pol širine) */
.benefit--sm{padding:34px 16px 22px}
/* Kompaktne kartice korakov in prednosti so na domači strani ena poleg druge,
   zato imata obe različici enak padding in enako spodnjo mejo višine. */
.step--sm,.benefit--sm{min-height:11.4rem}
.benefit--sm .ico{font-size:2.1rem;margin-bottom:8px}
.benefit--sm h3{font-size:1.02rem;margin-bottom:.3em}
.benefit--sm p{font-size:.83rem;line-height:1.45}
.benefit h3{font-size:1.1rem;margin-bottom:.35em}
.benefit p{font-size:.9rem;color:var(--ink-2);margin:0}

/* Stil / galerija kartica */
.style-card{
  background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-md);border:1.5px solid rgba(203,164,136,.28);
  transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column;
}
.style-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg)}
.style-card__media{position:relative;aspect-ratio:16/11;overflow:hidden}
.style-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.style-card:hover .style-card__media img{transform:scale(1.06)}
.style-card__label{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  padding:9px 26px;border-radius:var(--r-pill);
  /* temno besedilo na svetlem polnilu: belo na mint je imelo 2,1:1 */
  color:var(--ink);
  font-family:var(--f-head);font-weight:600;font-size:1.02rem;white-space:nowrap;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.style-card__body{padding:22px;text-align:center;display:flex;flex-direction:column;gap:14px;flex:1}
.style-card__body p{font-size:.92rem;color:var(--ink-2);margin:0;flex:1}

/* Mnenje / testimonial */
.quote{border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:14px;height:100%}
.quote__text{font-size:.96rem;color:var(--ink-2);margin:0;flex:1}
.quote__foot{display:flex;align-items:center;gap:14px;justify-content:space-between}
.quote__who{font-weight:800;font-size:.92rem}
.quote__stars{color:var(--yellow);font-size:.85rem;letter-spacing:1px}
.quote img{width:62px;height:62px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:var(--sh-sm)}

/* Statistika */
.stat{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.stat__num{font-family:var(--f-head);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1}
.stat__lbl{font-size:.9rem;color:var(--ink-2)}

/* ---------- 8. Navbar ---------- */
/* Navigacija je zapisana v HTML vsake strani, zato je tu že ob prvem izrisu in
   vsebina ob nalaganju ne poskoči. Lastno ime prehoda jo med preklopom strani
   izvzame iz preliva, tako da mirno stoji, medtem ko se vsebina pod njo zamenja. */
header[data-nav]{view-transition-name:glava}
.nav{
  position:sticky;top:0;z-index:60;background:rgba(255,251,246,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid rgba(240,220,205,.7);
}
.nav__in{display:flex;align-items:center;gap:26px;padding:14px 0;width:min(100% - 40px,var(--container));margin-inline:auto}
.logo{font-family:var(--f-head);font-weight:700;font-size:2.05rem;letter-spacing:-.02em;position:relative;display:inline-block;padding-left:1.5em}
/* Obris mačje glave kot znak pred napisom (levo), navpično poravnan. Skalira se
   z velikostjo pisave (em), zato deluje v glavi in v večjem logotipu v nogi. */
.logo::before{
  content:"";position:absolute;left:0;top:50%;
  width:1.28em;height:1.57em;transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20124'%3E%3Cpath%20d='M13,11%20L31,33%20C40,36%2060,36%2069,33%20L87,11%20L84,52%20C90,58%2092,66%2091,75%20C90,90%2074,104%2050,116%20C26,104%2010,90%209,75%20C8,66%2010,58%2016,52%20L13,11%20Z'%20fill='none'%20stroke='%23F53D7B'%20stroke-width='3.4'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.85;z-index:0;pointer-events:none;
}
.logo .a,.logo .b,.logo .si{position:relative;z-index:1}
.logo .a{color:var(--ink)}
.logo .b{color:var(--pink)}
.logo .si{color:var(--ink-3);font-size:.75em}
/* Tački nad napisom sta odstranjeni, napis stoji sam. */
.nav__links{display:flex;gap:4px;margin-left:auto}
.nav__links a{
  font-family:var(--f-head);font-weight:500;font-size:1rem;padding:9px 14px;border-radius:var(--r-pill);
  color:var(--ink-2);transition:color .2s,background .2s;position:relative;
}
.nav__links a:hover{color:var(--pink);background:var(--pink-50)}
.nav__links a.is-active{color:var(--pink)}
.nav__links a.is-active::after{
  content:"";position:absolute;left:16px;right:16px;bottom:2px;height:3px;border-radius:3px;background:var(--pink);
}
.nav__cta{margin-left:auto}
.nav__burger{
  display:none;margin-left:auto;background:#fff;border:1.5px solid #F0DFD3;border-radius:14px;
  width:46px;height:46px;place-content:center;cursor:pointer;font-size:1.3rem;
}
/* Dvojnik glavnega gumba obstaja samo zaradi spustnega menija;
   v vodoravni vrstici ga ne prikazujemo. */
.nav__links .nav__cta{display:none}

@media(max-width:1080px){
  .nav__links{
    position:fixed;inset:70px 16px auto 16px;flex-direction:column;gap:2px;background:#fff;
    border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:14px;display:none;margin:0;
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:13px 16px}
  .nav__burger{display:grid}
  /* Gumb iz vrstice skrijemo, a ga renderNav doda na dno spustnega menija,
     sicer na telefonu nikjer ni glavnega poziva. */
  .nav__in>.nav__cta{display:none}
  .nav__links .nav__cta{
    display:flex;justify-content:center;margin:10px 4px 4px;
    padding:14px 20px;font-size:1rem;
  }
}

/* ---------- 9. Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--cream)}
/* Besedilni stolpec = levi rob containerja + fiksnih 500px besedila.
   Tako ima naslov na VSAKI širini zaslona enak prostor (se ne lomi drugače),
   vsa preostala širina pa pripade sliki, da je vidna čez večji del sekcije. */
.hero__grid{
  display:grid;
  grid-template-columns:minmax(300px,calc((100vw - var(--container))/2 + 530px)) 1fr;
  align-items:center;gap:0;
}
.hero__copy h1{font-size:clamp(2.3rem,4.3vw,3.6rem)}
/* Poravnano na vrh, ne sredinjeno: sicer se blok na vsaki strani postavi drugam,
   ker so besedila različno dolga, in naslovi niso na isti višini. */
.hero__copy{padding:clamp(28px,4vw,64px) 0;position:relative;z-index:3;align-self:start}
.hero__copy h1{margin-bottom:.35em}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
/* Višina sledi širini stolpca (~16:10), da object-fit:cover skoraj nič ne odreže
   in se vidi cela mačja stena, ne le izsek.
   align-self:stretch je nujen: mreža je poravnana na sredino, besedilni stolpec
   pa je višji od te najmanjše višine (na stilskih idejah za 123 px). Brez tega
   je slika ostala sredinjena in nad njo ter pod njo je bila bela reža, ki se je
   videla kot prazen pas med sliko in naslednjo sekcijo. */
.hero__media{position:relative;min-height:clamp(360px,37vw,620px);align-self:stretch}
/* Slika ni ravno odrezana — levi rob je mehko valovit (kot v referenci) */
.hero__media img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M16 0 C6 10 22 18 14 28 C6 38 24 46 16 56 C8 66 26 74 17 84 C9 93 20 96 15 100 L100 100 L100 0 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-image:var(--wave);mask-image:var(--wave);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* .hero__stamp je odstranjen skupaj s pečatom "100 % mačje odobreno" v herou
   naslovnice. Razred .stamp ostane, ker ga uporablja stran O nas. */
/* Hero slika teče do desnega roba zaslona (kot v referenci) */
.hero>.container{width:100%;max-width:none;margin:0;padding:0}
.hero__copy{padding-inline:max(20px,calc((100vw - var(--container))/2)) 30px}
/* Podčrtan poudarek v odstavku */
.mark{
  background-image:linear-gradient(transparent 62%,rgba(245,61,123,.28) 0);
  padding:0 2px;
}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media{min-height:300px;order:-1}
  .hero__media img{-webkit-mask-image:none;mask-image:none;border-radius:0}
}

/* Valovit separator (mehki prehod med sekcijami) */
.wave{display:block;width:100%;height:auto;margin-bottom:-2px}
/* Valovit rob sekcije — barvo poda --wave-fill, smer pa razred */
.wave-top,.wave-bottom{position:absolute;left:0;right:0;line-height:0;z-index:2;pointer-events:none}
.wave-top{top:-1px}
.wave-bottom{bottom:-1px}
.wave-top svg,.wave-bottom svg{display:block;width:100%;height:clamp(38px,4.5vw,70px)}

/* Dekorativni polkrog ob robu (rumen/roza kot v referenci) */
.half-circle{
  position:absolute;border-radius:50%;z-index:0;pointer-events:none;
}
.half-circle--left{left:0;transform:translateX(-50%)}
.half-circle--right{right:0;transform:translateX(50%)}

/* ---------- 10. Dekoracije ---------- */
.deco{position:absolute;pointer-events:none;user-select:none;z-index:1;opacity:.9}
.deco--float{animation:floaty 6s ease-in-out infinite}
.deco--spin{animation:wobble 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes wobble{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
/* Mehki barvni blobi v ozadju */
/* Barvne oblike v ozadju: dovolj močne, da se vidijo, sicer je stran prazna */
/* Barvne oblike v ozadju. Robovi so čisti, tako kot polkrogi v heru na
   domači strani; zamegljen rob je izgledal kot napaka v izrisu. */
.blob{position:absolute;border-radius:50%;opacity:.9;pointer-events:none;z-index:0}
.blob--crisp{opacity:1}

/* ---------- 11. Accordion (FAQ) ---------- */
.acc{display:flex;flex-direction:column;gap:14px}
.acc__item{background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-sm);overflow:hidden;border:1.5px solid rgba(203,164,136,.28);transition:border-color .2s}
.acc__item.is-open{border-color:var(--pink-soft)}
.acc__q{
  width:100%;display:flex;align-items:center;gap:14px;justify-content:space-between;
  background:none;border:0;text-align:left;padding:20px 24px;cursor:pointer;
  font-family:var(--f-head);font-weight:600;font-size:1.05rem;
}
.acc__q:hover{color:var(--pink)}
.acc__sign{
  flex:none;width:32px;height:32px;border-radius:50%;background:var(--pink-50);color:var(--pink);
  display:grid;place-content:center;font-size:1.1rem;transition:transform .28s ease,background .2s;
}
.acc__item.is-open .acc__sign{transform:rotate(45deg);background:var(--pink);color:#fff}
.acc__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.acc__a p{padding:0 24px 22px;margin:0;color:var(--ink-2);font-size:.97rem}

/* ---------- 12. Obrazec ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:7px}
.field input,.field select,.field textarea{
  border:1.5px solid #F0DFD3;background:#fff;border-radius:var(--r-md);padding:13px 16px;
  font-size:.97rem;transition:border-color .2s,box-shadow .2s;font-family:var(--f-body);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--pink-soft);box-shadow:0 0 0 4px rgba(255,127,168,.16);
}
.field textarea{min-height:130px;resize:vertical}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.84rem;color:var(--ink-3);margin-bottom:18px}
.check input{margin-top:3px;accent-color:var(--pink);width:18px;height:18px}
/* --mint je za besedilo prešibek: na peščeni podlagi noge doseže 1,51:1 in
   na belem 2,14:1, torej je bilo potrdilo o oddaji tako rekoč neberljivo.
   --mint-ink doseže 4,55:1 oziroma 6,43:1. */
.form-note{font-size:.86rem;color:var(--mint-ink);font-weight:700;display:none}
.form-note.is-visible{display:block}

/* ---------- 13. Kontaktne kartice ---------- */
.contact-card{border-radius:var(--r-lg);padding:26px;text-align:center}
.contact-card .ico{font-size:2rem;display:block;margin-bottom:8px}
.contact-card h3{margin-bottom:.15em}
.contact-card .val{font-weight:800;font-size:1.02rem}
.contact-card .sub{font-size:.85rem;color:var(--ink-3);margin-top:6px}

/* ---------- 14. CTA pas ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(120deg,var(--peach) 0%,var(--pink-50) 45%,var(--mint-50) 100%);
  padding:clamp(30px,4vw,52px);
}
.cta-band__grid{display:grid;grid-template-columns:1fr .9fr;gap:30px;align-items:center;position:relative;z-index:2}
.cta-band img{border-radius:var(--r-lg);width:100%;height:100%;object-fit:cover;box-shadow:var(--sh-md)}
@media(max-width:860px){.cta-band__grid{grid-template-columns:1fr}}

/* ---------- 15. Trust strip ---------- */
.trust{display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px;padding-block:26px}
.trust__item{display:flex;align-items:center;gap:12px;font-size:.92rem;font-weight:700;color:var(--ink-2)}
.trust__item .ico{font-size:1.5rem}

/* Zadnja sekcija pred nogo se barvno prelije v peščeno nogo,
   da med njima ni vidnega reza. */
.pred-nogo{position:relative}
.pred-nogo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(180deg,rgba(251,224,203,0) 0%,rgba(251,224,203,.85) 100%);
  pointer-events:none;z-index:0;
}

/* ---------- Obvestilo o zasebnosti ---------- */
.obvestilo{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  background:#fff;border:2px solid var(--pink-100);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  opacity:0;transform:translateY(16px);
  transition:opacity .3s ease,transform .3s ease;
}
.obvestilo.is-in{opacity:1;transform:none}
.obvestilo__in{
  width:min(100% - 36px,var(--container));margin-inline:auto;
  display:flex;align-items:center;gap:20px;padding:16px 0;
}
.obvestilo__txt{margin:0;font-size:.92rem;color:var(--ink-2);line-height:1.55}
.obvestilo__txt strong{color:var(--ink)}
.obvestilo__txt a{color:var(--pink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.obvestilo .btn{flex:none}
@media(max-width:700px){
  .obvestilo__in{flex-direction:column;align-items:stretch;gap:14px;padding:16px 0}
  .obvestilo .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .obvestilo{transition:none}
}

/* ---------- 16. Footer ---------- */
/* Noga ima svojo, globljo peščeno barvo — jasno ločena od vseh sekcij zgoraj */
.footer{
  background:linear-gradient(180deg,#FBE0CB 0%,#F7D2B8 100%);
  padding-top:56px;position:relative;overflow:hidden;
  border-top:3px solid rgba(245,61,123,.22);
  /* Brez zaobljenih vrhnjih vogalov: skoznje se je videla svetla barva strani
     za nogo, kar je izgledalo kot nedokončan prehod. */
  border-radius:0;
  box-shadow:0 -14px 34px rgba(180,120,90,.10);
  /* Brez tega med zadnjo sekcijo in nogo ostane 8 px svetel pas,
     ki izgleda, kot da sekciji nista povezani. */
  margin-top:0;
}
.footer .logo{font-size:2.7rem;line-height:1.05;display:inline-block}
/* Stolpci: "Izdelki" ima eno samo postavko, zato dobi ožji stolpec, sicer
   ostane ob njem velika luknja in vrsta izgleda neuravnotežena. */
/* align-items:start je nujen: brez njega se stolpci raztegnejo na višino
   najvišjega in kratki stolpci dobijo prazen rep pod zadnjo povezavo. */
.footer__grid{
  display:grid;grid-template-columns:1.45fr 1.25fr 1fr 1fr 1.35fr;
  gap:38px 30px;align-items:start;
}
/* Naslovi stolpcev so oznake, ne naslovi besedila: manjši, a temnejši in
   težji od povezav pod njimi, z malo več zraka spodaj. Tako se hierarhija
   bere po teži in barvi, ne po velikosti. */
.footer h4{
  font-family:var(--f-head);font-size:.92rem;font-weight:700;
  color:var(--ink);letter-spacing:.01em;margin-bottom:15px;line-height:1.3;
}
.footer li{margin-bottom:10px}
.footer a{font-size:.94rem;line-height:1.45;color:var(--ink-2);transition:color .2s,padding-left .2s}
/* Zamik ob prehodu miške velja samo za povezave v seznamih.
   Logotip in socialne ikone se ne smejo premakniti, sicer poskoči cela vrsta.
   Barva ob prehodu je --ink in ne --pink: roza na peščeni podlagi noge doseže
   samo 2,55:1, kar je krepko pod 4,5:1. Roza ostane v podčrtaju, ki kontrasta
   ne rabi, zato se poudarek znamke ohrani. */
.footer li a:hover{
  color:var(--ink);padding-left:4px;
  text-decoration:underline;text-decoration-color:var(--pink);
  text-decoration-thickness:2px;text-underline-offset:3px;
}
.footer .logo:hover,.footer .socials a:hover{padding-left:0;text-decoration:none}
.footer__brand p{font-size:.94rem;line-height:1.6;color:var(--ink-2);max-width:32ch}
/* Kontaktni podatki so svoj stolpec z naslovom, ne rep pod prijavo na novice.
   Emoji imajo različne širine, zato so v enako širokem znaku, da se besedilo
   vseh treh vrstic začne na isti navpičnici. Velikost in barva sta enaki kot
   pri povezavah v ostalih stolpcih, da je vse v isti pisavi in isti stopnji. */
.footer__kontakt li{
  display:flex;gap:9px;align-items:flex-start;
  font-size:.94rem;line-height:1.45;color:var(--ink-2);
}
.footer__kontakt li>span{flex:none;width:1.2em;text-align:center}
.footer__kontakt a{display:flex;gap:9px;align-items:flex-start}
.footer__kontakt a>span{flex:none;width:1.2em;text-align:center}
.socials{display:flex;gap:9px;margin-top:18px}
/* 36 px namesto 40: pri 40 so bili krogi najtežji element v nogi in so
   preglasili logotip nad njimi. */
.socials a{
  width:36px;height:36px;border-radius:50%;background:var(--pink);color:#fff;
  display:grid;place-content:center;font-size:1rem;transition:transform .2s,background .2s;padding:0;
}
.socials a:hover{transform:translateY(-3px) rotate(-6deg);background:var(--ink);padding:0}
/* flex-wrap in min-width: v ozkem stolpcu sta se polje in gumb stisnila drug
   ob drugega in napis na gumbu se je lomil. Zdaj gumb raje skoči v novo vrsto. */
.newsletter{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.newsletter input{flex:1;min-width:190px;border:1.5px solid #F0DFD3;border-radius:var(--r-pill);padding:12px 18px;background:#fff;font-size:.92rem}
.newsletter input:focus{outline:none;border-color:var(--pink-soft)}
/* Drobni tisk pod prijavo. Povezava v njem mora podedovati velikost odstavka:
   pravilo .footer a ji sicer vsili 0,94 rem in v besedilu velikosti 0,8 rem
   izpade kot odebeljena beseda sredi stavka. Zato je izbirnik bolj natančen.
   Barva je --ink-2 in ne --ink-3, ker slednja na dnu noge doseže le 4,28:1. */
.footer__drobno{margin:8px 0 0;font-size:.8rem;line-height:1.55;color:var(--ink-2)}
.footer .footer__drobno a{
  font-size:inherit;text-decoration:underline;
  text-decoration-color:rgba(187,22,85,.4);text-underline-offset:2px;
}
/* Uradni podatki o podjetju (nad spodnjo vrstico) */
/* Uradni podatki so ena sama tipografska vrsta, ločena s piko sredinko, in ne
   pet razmetanih kosov. Barva je --ink-2 in ne --ink-3, ker ta na spodnjem delu
   preliva noge doseže le 4,28:1, --ink-2 pa 5,68:1. */
.footer__legal{
  margin-top:44px;border-top:1px solid rgba(180,140,115,.18);padding-top:20px;
  display:flex;flex-wrap:wrap;gap:6px 0;font-size:.84rem;line-height:1.6;color:var(--ink-2);
}
.footer__legal>span:not(:last-child)::after{
  content:"·";margin:0 12px;color:rgba(120,95,80,.5);
}
.footer__legal strong{color:var(--ink)}

/* Spodnja vrstica ima štiri sklope, zato space-between ni več prav: pri štirih
   se robna dva prilepita na rob, sredinska pa razideta. Enakomeren razmik jih
   drži skupaj, ob prelomu pa se zložijo pod sebe brez lukenj. */
.footer__bar{
  margin-top:16px;border-top:1px solid rgba(180,140,115,.18);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  font-size:.86rem;line-height:1.5;color:var(--ink-2);
}
/* Pravne povezave potisne v desno, podpis pa ostane skrajno desno. */
.footer__bar>span:nth-child(2){margin-left:auto}
.footer__bar a{font-size:.86rem}
.footer__bar strong{color:var(--ink)}
/* Podpis izdelovalca. Zamik ob prehodu miške velja samo za povezave v seznamih,
   ta pa ni v seznamu, zato ima svoje pravilo, sicer ne bi imela odziva. */
.footer__bar .podpis{text-decoration:underline;text-decoration-color:rgba(187,22,85,.35);text-underline-offset:3px}
.footer__bar .podpis:hover{text-decoration-color:var(--pink);text-decoration-thickness:2px}

/* ---------- 17. Razno ---------- */
.tick{display:flex;align-items:flex-start;gap:11px;font-size:.95rem;margin-bottom:11px}
.tick .ico{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-content:center;font-size:.75rem;color:#fff;margin-top:2px}
/* Kljukice v herou: povedo, kaj stran ponuja, da stolpec pod naslovom ni prazen.
   Uporabljata jih stilske ideje in O nas, zato je pravilo tu in ne v obeh
   straneh posebej. */
.hero-ticks{margin:22px 0 0}
.hero-ticks .tick{margin-bottom:11px;font-size:.95rem}
.hero-ticks .tick:last-child{margin-bottom:0}
.speech{
  position:relative;background:#fff;border:2px solid var(--pink-soft);border-radius:22px;
  padding:12px 20px;font-family:var(--f-head);font-weight:600;font-size:.95rem;box-shadow:var(--sh-sm);
}
.speech::after{content:"";position:absolute;left:24px;bottom:-11px;width:18px;height:18px;background:#fff;border-right:2px solid var(--pink-soft);border-bottom:2px solid var(--pink-soft);transform:rotate(45deg)}
.breadcrumb{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--ink-3);padding-top:18px}
.breadcrumb a:hover{color:var(--pink)}
.pill-note{display:inline-flex;align-items:center;gap:9px;background:#fff;border-radius:var(--r-pill);padding:8px 18px;box-shadow:var(--sh-sm);font-size:.9rem;font-weight:700}

/* Vodoravni drsnik (mnenja, stili) */
.slider{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}
.slider::-webkit-scrollbar{display:none}
.slider>*{scroll-snap-align:start;flex:0 0 min(330px,80vw)}
.slider-nav{display:flex;gap:10px}
.slider-nav button{
  width:46px;height:46px;border-radius:50%;background:#fff;border:1.5px solid #F0DFD3;
  cursor:pointer;box-shadow:var(--sh-sm);transition:transform .2s,color .2s;font-size:1.1rem;
}
.slider-nav button:hover{transform:scale(1.08);color:var(--pink)}
.slider-nav button:disabled{opacity:.35;cursor:default;transform:none}

/* Puščici v obliki tačke (JS vstavi SVG) */
.paw-nav button{
  color:var(--pink);display:grid;place-items:center;padding:0;
  border-color:#F7D3DF;background:#fff;
}
.paw-nav button:hover{background:var(--pink);color:#fff;border-color:var(--pink)}
.paw-nav button svg{width:24px;height:24px}
.paw-nav button[data-dir="prev"] svg{transform:rotate(-90deg)}
.paw-nav button[data-dir="next"] svg{transform:rotate(90deg)}

/* ---------- Marquee: slike, ki neprekinjeno drsijo ---------- */
.marquee-viewport{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 90px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 90px),transparent 100%)}
.marquee{display:flex;gap:22px;width:max-content;animation:marquee var(--marquee-speed,52s) linear infinite}
.marquee:hover,.marquee:focus-within{animation-play-state:paused}
.marquee>*{flex:0 0 auto}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 11px))}}

/* ---------- Sled tačk, ki "hodijo" z leve proti desni ---------- */
.paw-trail{position:relative;height:70px;pointer-events:none;user-select:none;overflow:hidden}
.paw-trail span{
  position:absolute;line-height:0;opacity:0;color:var(--pink-soft);
  transform:rotate(var(--rot,0deg)) scale(.8);
  animation:pawStep var(--trail-dur,7s) linear infinite;
  animation-delay:var(--d,0s);
}
@keyframes pawStep{
  0%{opacity:0;transform:rotate(var(--rot,0deg)) scale(.75)}
  6%{opacity:.85;transform:rotate(var(--rot,0deg)) scale(1)}
  46%{opacity:.5}
  62%{opacity:0}
  100%{opacity:0}
}

/* Razred .reveal ostaja v oznakah zaradi zgodovine, a nič ne skriva:
   vsa vsebina je vidna takoj ob nalaganju strani, brez animacije ob drsenju. */
.reveal,.reveal.is-in{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){
  .deco--float,.deco--spin,.stamp{animation:none}
  .marquee{animation:none}
  .paw-trail span{animation:none;opacity:.45}
  /* Kdor ima v sistemu izklopljene animacije, dobi preklop strani brez preliva. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}

/* ---------- 18. Responsive ---------- */
@media(max-width:1080px){
  .footer__grid{grid-template-columns:1fr 1fr 1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  /* V herou slika ob prelomu skoči nad besedilo (order:-1), oblike pa ostanejo
     pripete na sekcijo in pristanejo čez fotografijo in čez naslov.
     Skrijemo samo te; oblike v ostalih sekcijah ostanejo. */
  .hero .half-circle,.hero .blob{display:none}
}
@media(max-width:760px){
  body{font-size:16px}
  /* Kompaktne kartice so imele fiksno spodnjo mejo 250 px, vsebina pa ~120 px,
     kar je pod vsako pustilo ~130 px prazne barve. */
  .step--sm,.benefit--sm{min-height:0}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .steps-row .arrow{display:none}
  .hero__actions .btn{flex:1;justify-content:center}
  .deco{display:none}
  .cta-band{border-radius:var(--r-lg)}
}
@media(max-width:520px){
  .footer__grid{grid-template-columns:1fr}
  .trust{justify-content:flex-start}
}

/* ---------- Lightbox (povečava slik) ---------- */
img.is-zoomable{cursor:zoom-in}
.lightbox{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(28,22,20,.86);
  opacity:0;transition:opacity .2s ease;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.lightbox.is-open{display:flex;opacity:1}
.lightbox__img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  border-radius:var(--r-lg);box-shadow:0 24px 70px rgba(0,0,0,.5);
  cursor:default;
}
.lightbox__close{
  position:absolute;top:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);
  width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--ink);
  font-size:1.9rem;line-height:1;display:grid;place-content:center;
  box-shadow:var(--sh-md);transition:transform .15s ease;
}
.lightbox__close:hover{transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){
  .lightbox{transition:none}
  .lightbox__close{transition:none}
}