/* Komponente – uporabljajo samo tokene iz sistem.css */

.skip { position: absolute; left: var(--sp-5); top: -100px; z-index: 100; background: var(--ink); color: #fff; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); }
.skip:focus { top: var(--sp-5); }

/* Trak predloga */
.demo-bar {
  background: var(--ink-surface); color: rgba(255,255,255,.86);
  font: 500 var(--fs-micro)/1.4 var(--m); letter-spacing: .12em; text-transform: uppercase;
  text-align: center; padding: var(--sp-3) var(--gutter);
}

/* Glava */
.site-head { position: sticky; top: var(--sp-4); z-index: 50; padding-inline: var(--gutter); margin-top: var(--sp-4); transition: transform var(--d-5) var(--e-out); }
.site-head.is-hidden { transform: translateY(calc(-100% - 24px)); }
.site-head__bar {
  max-width: var(--max); margin-inline: auto; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6); min-height: 64px;
  transition: background var(--d-4) var(--e-out);
}
.site-head.is-scrolled .site-head__bar { --glass-bg: rgba(251,248,244,.82); }
.logo { display: inline-flex; align-items: center; gap: var(--sp-4); text-decoration: none; min-height: 44px; }
.logo__mark { width: 36px; height: 36px; flex: none; }
.logo__name { font: 500 1.125rem/1.05 var(--h); letter-spacing: -0.01em; }
.logo__name small { display: block; font: 500 var(--fs-micro)/1.3 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); margin-top: 2px; }
.nav { display: flex; align-items: center; gap: var(--sp-2); }
.nav a { font: 500 var(--fs-small)/1 var(--b); text-decoration: none; padding: var(--sp-4) var(--sp-4); border-radius: var(--r-pill); color: var(--ink-70); transition: color var(--d-3), background var(--d-3); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: var(--sea-soft); }
.nav .btn { margin-left: var(--sp-3); color: var(--ink); }
.nav .btn:hover { background: var(--accent-press); }
.burger { display: none; width: 48px; height: 48px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; cursor: pointer; place-items: center; }
.burger span { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform var(--d-4) var(--e-out); }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor; transition: transform var(--d-4) var(--e-out), top var(--d-4) var(--e-out); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.menu-open .burger span { background: transparent; }
.menu-open .burger span::before { top: 0; transform: rotate(45deg); }
.menu-open .burger span::after { top: 0; transform: rotate(-45deg); }

.mnav {
  position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-12) var(--gutter) var(--sp-9); background: var(--bg);
  opacity: 0; visibility: hidden; transition: opacity var(--d-4) var(--e-out), visibility var(--d-4);
}
.mnav a { font: 500 var(--fs-h3)/1.1 var(--h); color: var(--ink); text-decoration: none; padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-soft); }
.mnav a[aria-current="page"] { color: var(--accent-dark); }
.mnav .btn { margin-top: var(--sp-7); justify-content: center; font: 600 var(--fs-body)/1 var(--b); border: 0; padding: 0 var(--sp-6); }
.mnav__meta { margin-top: var(--sp-7); display: grid; gap: var(--sp-2); }
.mnav__meta a { font: 500 var(--fs-caption)/1.4 var(--m); letter-spacing: .12em; text-transform: uppercase; border: 0; padding: var(--sp-3) 0; color: var(--ink-70); }
.menu-open .mnav { opacity: 1; visibility: visible; }
.menu-open { overflow: hidden; }
.menu-open .site-head { transform: none !important; }
@media (max-width: 1023px) { .burger { display: grid; } .nav { display: none; } }
@media (min-width: 1024px) { .mnav { display: none; } }

/* Gumbi */
.btn { font-family: var(--b); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-30); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn--light { background: #fff; color: var(--ink); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-surface-2); }
.btn .arr { transition: transform var(--d-4) var(--e-out); }
.btn:hover .arr { transform: translateX(3px); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 44px; font: 500 var(--fs-caption)/1 var(--m); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--accent-dark); }
.link-arrow span { transition: transform var(--d-4) var(--e-out); }
.link-arrow:hover span { transform: translate(3px,-3px); }

/* Značke */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--sp-4); border-radius: var(--r-pill); background: var(--sea-soft); color: var(--sea); font: 500 var(--fs-micro)/1 var(--m); letter-spacing: .12em; text-transform: uppercase; }
.chip--accent { background: var(--accent-soft); color: var(--accent-dark); }

/* Glava sekcije */
.sec-head { display: grid; gap: var(--sp-5); max-width: 760px; margin-bottom: var(--sp-10); }
.sec-head--split { max-width: none; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .sec-head--split { grid-template-columns: 1.2fr 1fr; gap: var(--sp-10); } }

/* Velike kartice storitev */
.cards { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-10);
  min-height: 420px; padding: var(--sp-7); border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
  color: #fff; text-decoration: none; background: var(--ink-surface);
  transition: transform var(--d-5) var(--e-out), box-shadow var(--d-5) var(--e-out);
}
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tex); transition: transform var(--d-6) var(--e-out); }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(24,40,42,0) 30%, rgba(24,40,42,.72)); }
.card:hover { transform: translateY(-4px); box-shadow: var(--el-2); }
.card:hover::before { transform: scale(1.03); }
.card .eyebrow { color: rgba(255,255,255,.78); }
.card h3 { font-size: var(--fs-h3); max-width: 14ch; }
.card p { color: rgba(255,255,255,.84); max-width: 34ch; margin-top: var(--sp-4); }
.card__go { display: inline-flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); font: 500 var(--fs-caption)/1 var(--m); letter-spacing: .12em; text-transform: uppercase; }
.card__go span { transition: transform var(--d-4) var(--e-out); }
.card:hover .card__go span { transform: translate(3px,-3px); }

/* Teksture (namesto fotografij) */
.tex-1 { --tex: radial-gradient(120% 90% at 85% 10%, #EDA77E 0%, rgba(237,167,126,0) 55%), radial-gradient(90% 80% at 0% 100%, #3E6E6B 0%, rgba(62,110,107,0) 60%), #213436; }
.tex-2 { --tex: radial-gradient(100% 80% at 10% 0%, #6F9B94 0%, rgba(111,155,148,0) 60%), radial-gradient(80% 80% at 100% 100%, #C97B54 0%, rgba(201,123,84,0) 55%), #1E3032; }
.tex-3 { --tex: radial-gradient(110% 90% at 50% 120%, #EDA77E 0%, rgba(237,167,126,0) 55%), radial-gradient(70% 60% at 100% 0%, #4F7F7A 0%, rgba(79,127,122,0) 60%), #18282A; }
.tex-4 { --tex: radial-gradient(90% 90% at 0% 0%, #C97B54 0%, rgba(201,123,84,0) 55%), radial-gradient(90% 90% at 100% 80%, #6F9B94 0%, rgba(111,155,148,0) 60%), #213436; }
.grain::before { background-blend-mode: normal; }
.waves { position: absolute; inset: auto 0 0 0; height: 55%; z-index: -1; opacity: .22; pointer-events: none; }

/* Številčen seznam */
.numlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.numlist li { border-bottom: 1px solid var(--line); }
.numlist a, .numlist .row { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--sp-5); align-items: baseline; padding: var(--sp-6) 0; text-decoration: none; }
.numlist .n { font: 500 var(--fs-caption)/1 var(--m); color: var(--accent-dark); letter-spacing: .08em; }
.numlist strong { font: 500 var(--fs-h4)/1.15 var(--h); letter-spacing: -0.01em; display: block; }
.numlist p { color: var(--ink-70); margin-top: var(--sp-3); max-width: 56ch; }
.numlist .ar { font-size: 1.25rem; color: var(--ink-50); transition: transform var(--d-4) var(--e-out), color var(--d-4); }
.numlist a:hover .ar { transform: translate(3px,-3px); color: var(--accent-dark); }

/* Marquee */
.marquee { overflow: hidden; padding-block: var(--sp-6); border-block: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; gap: var(--sp-9); padding-right: var(--sp-9); }
.marquee__item { display: inline-flex; align-items: baseline; gap: var(--sp-4); white-space: nowrap; font: 400 var(--fs-h3)/1 var(--h); font-style: italic; letter-spacing: -0.01em; color: var(--ink-70); }
.marquee__item span { font: 500 var(--fs-caption)/1 var(--m); font-style: normal; color: var(--accent-dark); }
@keyframes marquee { to { transform: translateX(-50%); } }
.no-motion .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
.no-motion .marquee__group[aria-hidden] { display: none; }
.no-motion .marquee__group { flex-wrap: wrap; row-gap: var(--sp-5); }

/* Statistika */
.stats { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { border-top: 1px solid rgba(255,255,255,.16); padding-top: var(--sp-6); }
.stat__n { font: 400 var(--fs-display)/1 var(--h); letter-spacing: -0.03em; color: var(--accent); }
.stat__l { margin-top: var(--sp-4); font: 500 var(--fs-caption)/1.5 var(--m); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); }

/* Mnenja */
.quotes { position: relative; }
.quote { display: none; }
.quote.is-active { display: block; }
.quote blockquote { margin: 0; font: 400 var(--fs-h2)/1.2 var(--h); letter-spacing: -0.02em; max-width: 26ch; }
.quote figcaption { margin-top: var(--sp-7); display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; color: var(--ink-70); }
.quotes__ctrl { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-9); }
.quotes__ctrl button { width: 48px; height: 48px; border-radius: var(--r-pill); border: 0; box-shadow: inset 0 0 0 1px var(--ink-30); background: transparent; cursor: pointer; font-size: 1.1rem; color: var(--ink); transition: box-shadow var(--d-3); }
.quotes__ctrl button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.quotes__count { font: 500 var(--fs-caption)/1 var(--m); letter-spacing: .12em; color: var(--ink-50); min-width: 48px; text-align: center; }

/* Koraki */
.steps { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; counter-reset: s; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--bg); border-radius: var(--r-lg); padding: var(--sp-7); box-shadow: var(--el-1); display: flex; flex-direction: column; gap: var(--sp-4); }
.step__n { font: 500 var(--fs-caption)/1 var(--m); letter-spacing: .12em; color: var(--accent-dark); }
.step h3 { font-size: var(--fs-h4); }
.step p { color: var(--ink-70); }
.step .chip { margin-top: auto; align-self: flex-start; }

/* Dejstva */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--bg); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.fact strong { font: 500 var(--fs-h4)/1.15 var(--h); }
.fact span { color: var(--ink-70); font-size: var(--fs-small); }

/* CTA blok */
.cta { border-radius: var(--r-xl); padding: clamp(var(--sp-7), 5vw, var(--sp-11)); position: relative; overflow: hidden; isolation: isolate; color: #fff; background: var(--ink-surface); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tex); }
.cta__grid { display: grid; gap: var(--sp-9); }
@media (min-width: 1000px) { .cta__grid { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.cta h2 { font-size: var(--fs-h1); max-width: 12ch; }
.cta .lead { color: rgba(255,255,255,.84); margin-top: var(--sp-5); max-width: 42ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }
.cta .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.cta .btn--ghost:hover { box-shadow: inset 0 0 0 1px #fff; }
.fears { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.fears li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fears strong { display: block; font: 500 var(--fs-body)/1.3 var(--h); font-size: 1.15rem; }
.fears span { display: block; color: rgba(255,255,255,.78); font-size: var(--fs-small); margin-top: var(--sp-2); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--sp-5); align-items: center; padding: var(--sp-6) 0; min-height: 44px; font: 500 var(--fs-h4)/1.25 var(--h); font-size: clamp(1.125rem, 1.05rem + .3vw, 1.375rem); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 1.75rem/1 var(--b); color: var(--accent-dark); transition: transform var(--d-4) var(--e-out); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 0 var(--sp-6); color: var(--ink-70); max-width: 68ch; display: grid; gap: var(--sp-4); }

/* Hero podstrani */
.page-hero { padding-block: var(--sp-11) var(--sp-10); }
.page-hero h1 { font-size: var(--fs-display); max-width: 14ch; margin-top: var(--sp-5); }
.page-hero .lead { margin-top: var(--sp-6); max-width: 52ch; }
.page-hero__row { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); align-items: center; }
.crumbs { font: 500 var(--fs-caption)/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); }
.crumbs a { text-decoration: none; color: var(--ink-50); }
.crumbs a:hover { color: var(--ink); }
.key-num { display: flex; align-items: baseline; gap: var(--sp-5); margin-top: var(--sp-9); padding-top: var(--sp-6); border-top: 1px solid var(--line); max-width: 640px; }
.key-num b { font: 400 var(--fs-display)/1 var(--h); color: var(--accent-dark); letter-spacing: -0.03em; }
.key-num span { color: var(--ink-70); max-width: 32ch; }

/* Prose */
.prose { display: grid; gap: var(--sp-5); max-width: 68ch; color: var(--ink-70); }
.prose h2 { color: var(--ink); font-size: var(--fs-h3); margin-top: var(--sp-6); }
.prose h3 { color: var(--ink); font-size: var(--fs-h4); margin-top: var(--sp-4); }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--sp-3); }
.prose a { color: var(--accent-dark); }

.two { display: grid; gap: var(--sp-9); }
@media (min-width: 900px) { .two { grid-template-columns: 1fr 1fr; gap: var(--sp-11); } .two--wide { grid-template-columns: 1fr 1.4fr; } }

.panel { background: var(--bg-soft); border-radius: var(--r-xl); padding: clamp(var(--sp-6), 4vw, var(--sp-9)); }
.note { font-size: var(--fs-small); color: var(--ink-50); }
.placeholder { outline: 1px dashed var(--accent-dark); outline-offset: 6px; border-radius: var(--r-xs); }

/* Noga */
.site-foot { background: var(--ink-surface); color: rgba(255,255,255,.8); padding-block: var(--sp-12) var(--sp-8); margin-top: var(--sp-12); }
.site-foot a { text-decoration: none; color: rgba(255,255,255,.8); }
.site-foot a:hover { color: #fff; }
.foot-grid { display: grid; gap: var(--sp-9); grid-template-columns: 1fr; }
@media (min-width: 768px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.foot-grid h4 { font: 500 var(--fs-caption)/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: var(--sp-5); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.foot-grid li a { display: inline-flex; align-items: center; min-height: 36px; }
.foot-brand .logo__name { color: #fff; }
.foot-brand .logo__name small { color: rgba(255,255,255,.6); }
.foot-brand p { margin-top: var(--sp-5); max-width: 34ch; }
.foot-big { font: 400 clamp(2.5rem, 1rem + 7vw, 7.5rem)/0.95 var(--h); letter-spacing: -0.03em; color: #fff; margin-top: var(--sp-11); }
.foot-big em { color: var(--accent); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-9); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,.12); font: 500 var(--fs-micro)/1.6 var(--m); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* Sticky CTA (telefon) */
.sticky-cta { position: fixed; left: var(--sp-5); right: var(--sp-5); bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); z-index: 40; display: none; justify-content: center; box-shadow: 0 16px 40px -12px rgba(24,40,42,.45); transition: transform var(--d-5) var(--e-out), opacity var(--d-5); }
.sticky-cta.is-off { transform: translateY(140%); opacity: 0; }
@media (max-width: 767px) { .sticky-cta { display: flex; } body { padding-bottom: 88px; } }

/* Reveal z masko za naslove */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js [data-split] .w > span { display: inline-block; transform: translateY(105%); }
.no-motion [data-split] .w > span { transform: none !important; }
.site-foot .logo__mark circle:first-child { fill: #2A4244; }