/* ==========================================================================
   Pablo — design sistem „Zbornik"
   Ena datoteka za vse tri kodne baze: javna stran, stran vzreje, aplikacija.
   Mobile-first. Prelomne točke: 640 · 900 · 1200.
   Okra (--dog) SAMO za psa in za piko v logotipu. Nikoli za gumb.
   Brez zunanjih pisav (Google Fonts = prenos IP v ZDA, GDPR).
   ========================================================================== */

/* --- 1 · tokeni ---------------------------------------------------------- */
:root{
  /* barve */
  --bg:#faf9f6;          /* papir */
  --bg-2:#f3f1ea;        /* papir, temnejši pas */
  --card:#ffffff;
  --line:#e3e2da;
  --line-soft:#eeece5;
  --ink:#23241f;
  --soft:#55574e;
  --faint:#8a8b80;
  --accent:#3f5c46;      /* zelena — nosi ves vmesnik */
  --accent-deep:#2c4132; /* temni pas */
  --accent-soft:#e9efe8;
  --dog:#a8672a;         /* okra — SAMO pes */
  --dog-soft:#f6ede3;
  --warn:#9a4a2a;
  --warn-soft:#f7e9e3;

  /* tipografija */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-display:clamp(2.05rem,1.35rem + 3.1vw,3.4rem);
  --t-h1:clamp(1.75rem,1.3rem + 2vw,2.6rem);
  --t-h2:clamp(1.3rem,1.12rem + .8vw,1.7rem);
  --t-h3:clamp(1.06rem,1rem + .3vw,1.2rem);
  --t-lede:clamp(1.09rem,1.02rem + .4vw,1.3rem);
  --t-body:clamp(1rem,.97rem + .18vw,1.09rem);
  --t-small:.92rem;
  --t-micro:.78rem;

  /* prostor */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --gutter:clamp(18px,4vw,40px);
  --band-y:clamp(48px,7vw,104px);

  /* mere */
  --shell:1140px;
  --shell-narrow:680px;
  --measure:66ch;

  --r-s:6px; --r-m:10px; --r-l:16px; --r-pill:999px;
  --shadow-s:0 1px 2px rgba(35,36,31,.04);
  --shadow-m:0 6px 24px -12px rgba(35,36,31,.22);
  --shadow-l:0 24px 60px -28px rgba(35,36,31,.34);
}

/* --- 2 · osnove ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}
code{font-family:var(--mono);font-size:.9em;background:var(--bg-2);padding:1px 5px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.18;margin:0 0 var(--s3)}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2);margin-top:var(--s7)}
h3{font-size:var(--t-h3);margin-top:var(--s6);line-height:1.3}
p,ul,ol{margin:0 0 var(--s4)}
li{margin-bottom:var(--s2)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--r-s) 0;z-index:100}
.skip-link:focus{left:0}

/* --- 3 · postavitev ------------------------------------------------------ */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell--narrow{max-width:var(--shell-narrow)}
.prose{max-width:var(--measure)}
.prose > :first-child{margin-top:0}

.band{padding-block:var(--band-y)}
.band--paper{background:var(--bg)}
.band--tint{background:var(--bg-2)}
.band--white{background:var(--card);border-block:1px solid var(--line)}
.band--deep{background:var(--accent-deep);color:#eef1ec}
.band--deep h1,.band--deep h2,.band--deep h3{color:#fff}
.band--deep a{color:#cfe0d2}
.band--deep .lede,.band--deep .muted{color:#c3cdc2}
.band--tight{padding-block:clamp(32px,4vw,56px)}

.stack > * + *{margin-top:var(--s4)}
.stack--lg > * + *{margin-top:var(--s6)}

.split{display:grid;gap:var(--s6);align-items:center}
.grid{display:grid;gap:var(--s4)}
.grid--2,.grid--3{grid-template-columns:1fr}

@media (min-width:640px){
  .grid--2,.grid--3{grid-template-columns:repeat(2,1fr);gap:var(--s5)}
}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:var(--s7)}
  .split--wide-left{grid-template-columns:1.15fr .85fr}
  .split--wide-right{grid-template-columns:.85fr 1.15fr}
  .grid--3{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1200px){
  .split{gap:var(--s8)}
}

/* --- 4 · glava ----------------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(250,249,246,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.site-head__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:62px;padding-block:var(--s3)}
.brand{font-family:var(--serif);font-size:1.3rem;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;display:inline-flex;align-items:baseline;gap:3px}
.brand::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--dog);
  display:inline-block;transform:translateY(-1px)}
.nav{display:none}
.nav a{color:var(--soft);text-decoration:none;font-size:var(--t-small);white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.head-cta{display:none}
.nav-toggle{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);
  border-radius:var(--r-s);padding:7px 12px;font:inherit;font-size:var(--t-small);color:var(--ink);cursor:pointer}
.nav-drawer{display:none;border-top:1px solid var(--line);background:var(--card)}
.nav-drawer[data-open="true"]{display:block}
.nav-drawer a{display:block;padding:13px var(--gutter);border-bottom:1px solid var(--line-soft);
  color:var(--ink);text-decoration:none}
/* ⚑ 19. sep 2026: izbirnik jezika je zivel samo v .head-cta, ta pa je pod
   900px skrita — na telefonu jezika ni bilo mogoce zamenjati na nobeni
   strani. Drugo gnezdo je zdaj v predalu; jeziki.js napolni obe in ju
   ob preklopu uskladi. */
.drawer-lang{display:block;padding:13px var(--gutter)}
.drawer-lang .langsel{width:100%;font-size:.95rem;padding:10px 12px}

@media (min-width:900px){
  .nav{display:flex;gap:var(--s5);margin-inline:auto}
  .head-cta{display:inline-flex;gap:var(--s2)}
  .nav-toggle,.nav-drawer{display:none !important}
}

/* --- 5 · gumbi ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:var(--t-small);font-weight:550;line-height:1.2;
  padding:12px 20px;border-radius:var(--r-s);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-deep);color:#fff}
.btn--ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--quiet{background:none;color:var(--accent);padding-inline:0}
.btn--lg{padding:15px 26px;font-size:1rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.band--deep .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.band--deep .btn--primary{background:#fff;color:var(--accent-deep)}

/* --- 6 · besedilni elementi ---------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;font-weight:650;color:var(--accent);
  background:var(--accent-soft);border-radius:var(--r-pill);padding:6px 13px;margin-bottom:var(--s4)}
.eyebrow--dog{color:var(--dog);background:var(--dog-soft)}
.display{font-family:var(--serif);font-size:var(--t-display);line-height:1.08;
  letter-spacing:-.025em;font-weight:600;margin:0 0 var(--s4)}
.lede{font-size:var(--t-lede);color:var(--soft);line-height:1.5;max-width:52ch;margin:0 0 var(--s5)}
.muted{color:var(--soft)}
.small{font-size:var(--t-small)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.section-head{max-width:60ch;margin-bottom:var(--s6)}
.section-head.center{margin-inline:auto}

.note{border-left:2px solid var(--line);padding:2px 0 2px var(--s4);
  color:var(--soft);font-size:var(--t-small);max-width:var(--measure)}
.note strong{color:var(--ink)}
.note--warn{border-left-color:var(--warn)}

/* --- 7 · kartice --------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s5);box-shadow:var(--shadow-s)}
.card--link{text-decoration:none;color:inherit;display:block;transition:border-color .15s,box-shadow .15s,transform .15s}
.card--link:hover{border-color:var(--accent);box-shadow:var(--shadow-m);transform:translateY(-2px);color:inherit}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.card__icon{width:40px;height:40px;border-radius:var(--r-s);background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;margin-bottom:var(--s4);font-size:19px}
.card__icon--dog{background:var(--dog-soft);color:var(--dog)}
.card__go{display:inline-block;margin-top:var(--s4);color:var(--accent);font-size:var(--t-small);font-weight:550}

/* --- 8 · koraki, statistika, FAQ ----------------------------------------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding-left:46px;margin-bottom:var(--s5)}
.steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:30px;height:30px;
  border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--accent);
  font-size:var(--t-small);font-weight:650;display:grid;place-items:center}
.steps b{display:block;font-family:var(--serif);font-size:var(--t-h3);font-weight:600;margin-bottom:2px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4)}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s4) var(--s5)}
.stat__n{font-family:var(--serif);font-size:1.9rem;line-height:1.1;font-weight:600}
.stat__l{font-size:var(--t-small);color:var(--soft);margin-top:2px}

.faq{border-top:1px solid var(--line);max-width:var(--measure)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:var(--s4) 0;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;gap:var(--s4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:400;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details > :last-child{padding-bottom:var(--s4);margin-bottom:0;color:var(--soft)}

.pill{display:inline-block;font-size:var(--t-micro);font-weight:600;padding:3px 10px;
  border-radius:var(--r-pill);background:var(--line);color:var(--soft)}
.pill--ok{background:var(--accent-soft);color:var(--accent)}
.pill--warn{background:var(--warn-soft);color:var(--warn)}
.pill--dog{background:var(--dog-soft);color:var(--dog)}

/* --- 9 · produktni posnetek (mock UI, brez slik) -------------------------- */
.shot{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-l);overflow:hidden;font-size:var(--t-small)}
.shot__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:var(--bg-2)}
.shot__dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.shot__title{margin-left:8px;font-size:var(--t-micro);color:var(--faint)}
.shot__body{padding:var(--s4)}
.shot__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:11px 2px;border-bottom:1px solid var(--line-soft)}
.shot__row:last-child{border-bottom:0}
.shot__row b{font-weight:600}
.shot__meta{color:var(--faint);font-size:var(--t-micro)}
.phone{max-width:300px;margin-inline:auto;border:9px solid #2a2b26;border-radius:34px;
  background:var(--card);box-shadow:var(--shadow-l);overflow:hidden}
.phone__body{padding:var(--s4)}

/* --- 10 · noga ----------------------------------------------------------- */
.site-foot{background:var(--bg-2);border-top:1px solid var(--line);
  padding-block:var(--s7) var(--s6);font-size:var(--t-small);color:var(--soft)}
.site-foot__grid{display:grid;gap:var(--s6);grid-template-columns:1fr}
.site-foot h4{font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin:0 0 var(--s3)}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:var(--s2)}
.site-foot a{color:var(--soft);text-decoration:none}
.site-foot a:hover{color:var(--ink);text-decoration:underline}
.site-foot__legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);
  color:var(--faint);font-size:var(--t-micro)}
@media (min-width:640px){.site-foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:900px){.site-foot__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}

/* --- 10b · predloga T2: dokument / pravno -------------------------------- */
/* ⚑ 19. sep 2026: .doc je bil samo max-width, zato je bil stolpec pripet
   na LEVI rob 1140px sirokega .shell in je na namizju pol strani ostalo
   prazne. Zadevalo je O nas in vse tri pravne strani. margin-inline:auto
   stolpec postavi na sredo; sirina merila (66ch) ostane nespremenjena,
   ker dolge vrstice slabo berejo. */
.doc{max-width:var(--measure);margin-inline:auto}
.doc h2{margin-top:var(--s7)}
.doc h3{margin-top:var(--s6)}
.doc ul,.doc ol{padding-left:22px}
.doc__meta{font-size:var(--t-small);color:var(--faint);margin-bottom:var(--s6)}
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s4) var(--s5);margin-bottom:var(--s6)}
.toc h4{font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin:0 0 var(--s3);font-family:var(--sans)}
.toc ol{margin:0;padding-left:20px;font-size:var(--t-small)}
.toc li{margin-bottom:4px}
.kv{width:100%;border-collapse:collapse;font-size:var(--t-small);margin-bottom:var(--s5)}
.kv th,.kv td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.kv th{width:34%;font-weight:600;color:var(--soft);background:var(--card)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.portrait{width:112px;height:112px;flex:0 0 112px;border-radius:50%;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2)}
.portrait img{width:100%;height:100%;object-fit:cover}
.person{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap;margin-bottom:var(--s6)}
.person b{display:block;font-family:var(--serif);font-size:var(--t-h3)}
.person span{color:var(--soft);font-size:var(--t-small)}

.list-check{list-style:none;padding:0;margin:0 0 var(--s4)}
.list-check li{position:relative;padding-left:28px;margin-bottom:var(--s3)}
.list-check li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}

.hero-fine{font-size:var(--t-small);color:var(--faint);margin-top:var(--s3)}
.named{color:var(--dog);font-family:var(--serif);font-size:var(--t-h3)}

/* --- 11 · pomožno -------------------------------------------------------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}
.hide-below-900{display:none}
@media (min-width:900px){.hide-below-900{display:block}.hide-from-900{display:none}}

@media print{
  .site-head,.site-foot,.btn{display:none}
  body{background:#fff;font-size:11pt}
}


/* --- izbirnik jezika na javni strani (19. sep 2026) ---------------
   Pet jezikov je tudi v aplikaciji; stran mora biti enaka, sicer je
   slovenski rejec, ki mu pošljemo povezavo, pristal na tujem jeziku. */
.langsel{
  font: inherit; font-size: .82rem; color: var(--soft, #5b5751);
  background: transparent; border: 1px solid var(--line, #e3e2da);
  border-radius: 999px; padding: .32em 1.7em .32em .7em; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23777' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat; background-position: right .6em center;
}
.langsel:hover{ border-color: var(--soft, #5b5751); }
.langsel:focus-visible{ outline: 2px solid var(--accent, #3d6b4f); outline-offset: 2px; }
/* ⚑ 20. sep 2026: pod 16px iOS Safari ob dotiku poveca stran in je ne
   pomanjsa nazaj. Izbirnik jezika je bil edino polje na javni strani,
   ki je bilo pod to mejo. Na tablici ostane manjsi, na telefonu 16px. */
@media (min-width: 640px) and (max-width: 900px){ .langsel{ font-size: .78rem; } }
@media (max-width: 639px){ .langsel{ font-size: 16px; } }

/* ime psa nad kartonom, ki se polni ob njem */
.rec__who{ margin:0 0 var(--s3,12px); font-size:var(--t-micro,.78rem);
  letter-spacing:.08em; text-transform:uppercase; color:var(--soft,#5b5751) }
.rec__who b{ color:var(--ink,#23201d); letter-spacing:.04em }

/* pravna stran v jeziku, ki ga še nima */
.legal-en{ max-width:var(--shell); margin:0 auto var(--s4,16px);
  padding:.7em 1em; border-radius:8px;
  background:#FBF3E7; border:1px solid #E8D9BE; font-size:.9rem; color:#5b4a2e }

/* ==========================================================================
   MODEL A — svetla, drzna tipografija                         (4. okt 2026)
   Smernice: 02_Product/Dizajn-predogled/Smernice-dizajna-A.md
   Plast CEZ „Zbornik": tokeni in komponente se tu prepisejo, oznake strani
   ostanejo. Drznost iz velikosti in praznega prostora, ne iz barve.
   Pisavi gostujeta na nasem strezniku (pisave/, OFL) — nic ne gre k Googlu.
   ⚑ .band--seq (Pablova rast) ima barvo ZAPECENO v slikah (#F6F0ED) —
     ta plast je ne sme prepisati.
   ========================================================================== */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(pisave/instrument-serif-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(pisave/instrument-serif-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(pisave/instrument-serif-latin-ext-400-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(pisave/instrument-serif-latin-400-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(pisave/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(pisave/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#f7f4ee; --bg-2:#efe8dc; --warm:#efe8dc;
  --card:#fbf9f5;
  --ink:#1f1d1a; --soft:#6d675e; --mut:#6d675e; --faint:#6d675e;
  --line:#ddd6ca; --line-soft:#e6e0d5;
  --accent:#3f5a43; --accent-deep:#2f4533; --accent-soft:#e6ebe2;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --t-display:clamp(40px,9.4vw,132px);
  --t-h1:clamp(36px,6.4vw,88px);
  --t-h2:clamp(28px,5vw,64px);
  --t-h3:clamp(22px,2.6vw,32px);
  --t-lede:clamp(15px,1.7vw,18px);
  --t-body:clamp(14px,.9rem + .1vw,16px);
  --gutter:max(16px,5vw);
  --band-y:clamp(56px,10vw,140px);
  --shell:1280px;
  --shadow-s:none; --shadow-m:none; --shadow-l:none;
}
body{line-height:1.6;letter-spacing:-.003em}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
h1{line-height:.98}
h2{line-height:1.02;max-width:14em}
h3{line-height:1.05}
h1 em,h2 em,.display em{font-style:italic;color:var(--accent)}
.display{font-weight:400;line-height:.95;letter-spacing:-.02em;margin-bottom:var(--s5)}
.lede{color:var(--mut);line-height:1.6;max-width:34em}

/* sekcije: izmenicno krem / topla, locene s tanko crto */
.band{border-top:1px solid var(--line)}
.band--paper{background:var(--bg)}
.band--white{background:var(--bg);border-block:0;border-top:1px solid var(--line)}
.band--tint{background:var(--warm)}
.band--deep{background:var(--warm);color:var(--ink)}
.band--deep h1,.band--deep h2,.band--deep h3{color:var(--ink)}
.band--deep a{color:var(--accent)}
.band--deep .lede,.band--deep .muted{color:var(--mut)}
.band--deep .btn--primary{background:var(--ink);color:var(--bg)}
.band--deep .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}

/* glava */
.site-head{background:rgba(247,244,238,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand{font-weight:400;font-size:24px;letter-spacing:-.01em}
.brand::after{background:#c48a2c}
.nav a{font-size:13px;color:var(--mut)}

/* oznaka nad naslovom: brez kapsule */
.eyebrow,.eyebrow--dog{background:none;padding:0;border-radius:0;font-size:11px;font-weight:500;
  letter-spacing:.14em;color:var(--mut);margin-bottom:var(--s5)}

/* gumbi: kapsula; primarni crn s puscico */
.btn{border-radius:999px;padding:14px 22px;font-size:14px;font-weight:500}
.btn--lg{padding:16px 26px;font-size:15px}
.btn--primary{background:var(--ink);color:var(--bg)}
.btn--primary:hover{background:#000;color:var(--bg)}
.btn--primary::after{content:"→";transition:transform .35s}
.btn--primary:hover::after{transform:translateX(4px)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink)}

/* kartice: brez okvirja, sence in ikon — debelejsa crta zgoraj */
.card{background:none;border:0;border-top:2px solid var(--ink);border-radius:0;padding:var(--s5) 0 0;box-shadow:none}
.card--link:hover{transform:none;box-shadow:none;border-color:var(--ink)}
.card--link:hover h3{color:var(--accent)}
.card__icon,.card__icon--dog{display:none}
.card__go{color:var(--ink);font-weight:500}
.card__go::after{display:inline-block;transition:transform .35s}
.card--link:hover .card__go{transform:translateX(6px);transition:transform .35s}
.grid{gap:var(--s6)}

/* koraki, statistika, FAQ */
.steps li::before{background:none;border:0;border-radius:0;font-family:var(--serif);font-size:22px;color:var(--mut);width:auto;justify-content:start}
.stat{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:var(--s3) 0;display:flex;justify-content:space-between;align-items:baseline}
.stat__n{font-weight:400;font-size:24px}
.faq summary{font-weight:500}
.faq summary::after{color:var(--ink)}

/* posnetki zaslona: ploski */
.shot{background:var(--card);box-shadow:none;border-radius:12px}
.shot__bar{background:var(--warm)}
.phone{box-shadow:none}
.pill{background:var(--warm);color:var(--mut)}
.pill--ok{background:var(--accent-soft);color:var(--accent)}

/* noga */
.site-foot{background:var(--warm)}

/* vrstice namesto kartic: 01 · naslov + opis */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:3.2em 1fr;gap:var(--s4);padding:var(--s6) 0;margin:0;
  border-bottom:1px solid var(--line);transition:transform .35s}
.rows li:hover{transform:translateX(1.4vw)}
.rows .n{font-family:var(--serif);font-size:22px;color:var(--mut);line-height:1.2}
.rows h3{margin:0 0 var(--s2);font-size:var(--t-h3)}
.rows p{margin:0;color:var(--mut);max-width:40em}
@media (min-width:900px){ .rows li{grid-template-columns:4em minmax(0,1.1fr) minmax(0,1fr);align-items:baseline} .rows h3{margin:0} }
/* 7. okt (Tina): na telefonu je besedilo padlo v ozek stolpec pod stevilko — zdaj pod naslovom */
@media (max-width:899px){ .rows li{row-gap:var(--s2)} .rows p{grid-column:2} .rows li:hover{transform:none} }

/* pojavitev ob drsenju — edina animacija modela A */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .rows li{transition:none} }
/* model A: naslovi sekcij levo; sredinsko samo zakljucni poziv (.band--deep) */
.section-head.center{text-align:left;margin-inline:0}
.section-head.center .lede{margin-inline:0}
.band--deep .center,.band--deep.center{text-align:center}
.hero{padding-top:clamp(64px,13vw,200px);padding-bottom:clamp(48px,8vw,120px)}
.hero-fine{color:var(--mut)}
/* naslov strani: velik samo na prvi strani; na podstraneh, kjer je naslov
   v ozkem stolpcu ali ob sliki, bi 9.4vw dal pet vrstic */
.display{font-size:clamp(40px,6.2vw,88px)}
.split .display,.shell--narrow .display{font-size:clamp(38px,4.8vw,68px)}
.hero .display{font-size:clamp(40px,9.4vw,132px)}

/* Pogosta vprašanja na prvi strani: naslov levo, odgovori desno (4. okt 2026) */
@media (min-width:900px){
  .faq-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s7,4rem);align-items:start}
  .faq-split .section-head{position:sticky;top:6rem;margin-bottom:0}
  .faq-split .faq{max-width:none}
}

/* Glava (4. okt 2026, »da izstopa«): vecji logotip, temnejsi meni, podcrtana trenutna stran.
   Zlata ostane samo v logotipu (smernice A). */
.site-head{border-bottom-color:rgba(31,29,26,.16)}
.brand{font-size:clamp(28px,2.8vw,38px);letter-spacing:-.02em}
.brand::after{width:9px;height:9px;transform:translateY(-2px)}
.site-head__in{min-height:76px}
@media (min-width:900px){
  .nav a{font-size:14px;color:var(--ink);opacity:.78}
  .nav a:hover{opacity:1}
  .nav a[aria-current="page"]{opacity:1;font-weight:500;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px;text-decoration-color:var(--accent)}
}

/* Prva stran, naslov: besedilo levo, Pablo in akvarel desno */
.hero--pes{position:relative;overflow:hidden;padding-top:clamp(28px,5vw,72px);padding-bottom:clamp(40px,6vw,88px)}
.hero--pes .display{font-size:clamp(44px,7vw,104px);max-width:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:center}
.hero-txt{position:relative;z-index:6}
.hero-oder{position:relative;height:clamp(300px,88vw,440px)}
.hero-barve{position:absolute;right:0;bottom:0;width:100vw;height:clamp(340px,96vw,500px);z-index:0;pointer-events:none}
.hero-akv{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* 7. okt: zacetno stanje skrito ze ob prvem izrisu (.js v <head>), animacija tece sele, ko sta sliki nalozeni */
.js .hero--pes .hero-akv{opacity:0;transform:scale(.55);transition:opacity 1.4s ease,transform 2.4s cubic-bezier(.16,.8,.3,1);will-change:transform,opacity}
.js .hero--pes.teci .hero-akv{opacity:1;transform:none}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px}
  .hero-oder{height:560px}
  .hero--pes .display{font-size:min(6.2vw,88px)}
  html:not([lang="de"]):not([lang="it"]) .h1-vrsta{white-space:nowrap} /* de, it sta predolga za eno vrstico */
  .hero-barve{top:0;height:auto;width:58vw}
}
@media (min-width:1200px){ .hero-oder{margin-right:-4vw} }
.hero-pes{position:absolute;left:4%;top:12%;width:92%;height:80%;object-fit:contain;z-index:3;filter:drop-shadow(0 30px 30px rgba(31,29,26,.25))}
.js .hero--pes .hero-pes{will-change:transform,opacity;opacity:0;transform:translateY(30px) scale(.96);transition:opacity 1.1s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1)}
.js .hero--pes.je .hero-pes{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .hero--pes .hero-akv,.js .hero--pes .hero-pes{opacity:1;transform:none;transition:none}}
.hero-crte{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.hero-crte line{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 4;opacity:.55}
.hero-crte circle{fill:var(--ink)}
.ozn{position:absolute;z-index:5;background:#fffdf8;border-radius:10px;padding:7px 11px 8px;font-size:12px;line-height:1.3;color:var(--ink);box-shadow:0 12px 30px -12px rgba(31,29,26,.45);white-space:nowrap;opacity:0;transform:scale(.6) rotate(-6deg);transition:opacity .5s cubic-bezier(.3,1.5,.5,1),transform .5s cubic-bezier(.3,1.5,.5,1)}
.ozn span{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:2px}
.ozn.da{opacity:1;transform:none}
@media (min-width:900px){ .ozn{font-size:13px;padding:8px 12px 9px} .ozn span{font-size:10px} }
@media (max-width:1199px){ .ozn--vec{display:none} }
@media (max-width:599px){ .ozn--cep{left:auto!important;right:2%} .hero-pes{filter:none} }

/* 7. okt: posnetki aplikacije na podstraneh (na prvi strani enako, v njenem <style>) */
.zaslon{width:100%;height:auto;max-height:480px;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:12px;display:block;
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}

/* 8. okt: gumb-povezava v vrsti gumbov poravnan z levim robom (.btn zgoraj mu je vrnil padding) */
.btn-row .btn--quiet{padding-inline:0}
.btn-row:has(.btn--quiet){column-gap:var(--s5)}
/* 8. okt: maketa cakalnega seznama na /rejci/ — posnema pravi zaslon v aplikaciji (stevci + gumb + vrstice) */
.shot__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.shot__stat{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg)}
.shot__stat b{display:block;font-family:var(--serif);font-size:26px;font-weight:400;line-height:1.1}
.shot__stat span{display:block;font-size:var(--t-micro);color:var(--faint);line-height:1.3;margin-top:2px}
.shot__stat--hot{border-color:var(--warn)}
.shot__stat--hot b{color:var(--warn)}
.shot__btn{display:inline-block;background:var(--ink);color:var(--bg);border-radius:999px;padding:7px 14px;font-size:var(--t-micro);font-weight:500;margin:0 0 6px}
.shot__row .pill{white-space:nowrap}
@media (max-width:479px){
  .shot__stats{grid-template-columns:1fr;gap:6px}
  .shot__stat{display:flex;align-items:baseline;gap:10px;padding:8px 12px}
  .shot__stat b{font-size:22px}
}