@charset "UTF-8";
/* =============================================================================
   Gradkalk — Softbase design system
   -----------------------------------------------------------------------------
   Ta datoteka je namerno zgrajena po istem sistemu kot gradlab.si/assets/css/styles.css.
   Žetoni, imena razredov, širine, razmiki, tipografska lestvica, gumbi, kartice,
   glava, noga in prelomne točke so prevzeti iz Gradbenega laboranta, da sta obe
   strani prepoznavno del istega ekosistema Softbase.

   Kar je specifično za Gradkalk (računala, podatkovne preglednice, gantogram),
   je oblikovano z ISTIMI žetoni in po istih pravilih — ne po tretjem slogu.
   ============================================================================= */

/* =========================================================
   Self-hostane pisave Inter (variabilna, 400–800) — latin + latin-ext
   Brez zunanjih zahtev (GDPR) — enako kot na gradlab.si
========================================================= */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.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: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin.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;
}

/* =========================================================
   1 · Žetoni — identični gradlab.si
========================================================= */
:root {
  /* Brand */
  --green: #00A76F;
  --green-dark: #007867;
  --green-050: #E7F7F0;
  --green-100: #CDEFE1;
  --navy: #0B163D;
  --navy-700: #14224e;
  --ink: #212B36;
  --slate: #55606b;
  --muted: #7A8794;
  --line: #E6EAF0;
  --bg: #F4F6FA;
  --bg-soft: #EDF1F7;
  --white: #ffffff;

  /* Zeleni preliv nosi belo besedilo (gumbi, oštevilčene značke .pstep__num /
     .lsec__num). Svetli konec #00A76F je dosegel le 3,1 : 1 in ni izpolnil
     WCAG 2.2 AA. Potemnjeno tako, da najsvetlejša točka doseže 4,6 : 1
     (bela na #008457 = 4,7 : 1). Enako spremembo nosi tudi gradlab.si. */
  --grad-green: linear-gradient(135deg, #008457 0%, #00674A 100%);
  --grad-navy: linear-gradient(160deg, #0B163D 0%, #16265c 100%);

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
  --shadow-md: 0 8px 24px rgba(11, 22, 61, .10);
  --shadow-lg: 0 24px 60px rgba(11, 22, 61, .18);
  --shadow-green: 0 12px 30px rgba(0, 167, 111, .28);

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --maxw: 1320px;
  --pad: clamp(20px, 5vw, 40px);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* — Dodatek za Gradkalk —
     Gradbeni laborant uporablja monospace samo za <code> v pravnih besedilih.
     Gradkalk je kalkulacijski program, zato isto družino uporablja tudi za
     številke in šifre, da so stolpci poravnani. Signalni barvi sta izpeljani
     iz obstoječih na gradlab.si (jantar iz .chip--opt). */
  --mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
  --amber: #B76E00;
  --amber-050: #FFF4E0;
  --amber-100: #FFE4B8;
  --rose: #B3261E;
  --rose-050: #FDECEA;
  --rose-100: #F7CFCB;
}

/* =========================================================
   2 · Ponastavitev — identična gradlab.si
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; color: var(--navy); font-weight: 800; }
p { color: var(--slate); }
:focus-visible { outline: 3px solid rgba(0,167,111,.45); outline-offset: 2px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: var(--r-sm);
  font-weight: 700; font-size: .95rem; box-shadow: var(--shadow-md); transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* tabelarne številke — Gradkalk je kalkulacijski program */
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* =========================================================
   3 · Postavitev — identična gradlab.si
========================================================= */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(40px, 5vw, 64px); }
section[id] { scroll-margin-top: 80px; }
.section--tight { padding-block: clamp(20px, 3vw, 32px); }
.center { text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-dark); background: var(--green-050);
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--green-100);
}
.eyebrow__num { font-family: var(--mono); opacity: .7; }

.section-head { max-width: 760px; margin-inline: auto; margin-bottom: clamp(24px, 3.5vw, 36px); }
.section-head .eyebrow { margin-bottom: 18px; }
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.section-title em { font-style: normal; color: var(--green-dark); }
.section-sub { margin-top: 16px; font-size: 1.075rem; color: var(--slate); }

/* stara sidra prve enostranske različice ostanejo veljavna */
.anchor-alias { display: block; height: 0; scroll-margin-top: 80px; }

/* =========================================================
   4 · Gumbi — identični gradlab.si
========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: .975rem; line-height: 1;
  padding: 14px 22px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--grad-green); color: #fff; box-shadow: var(--shadow-green); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,167,111,.38); }
.btn--ghost { background: #fff; color: var(--navy); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { border-color: var(--green); color: var(--green-dark); transform: translateY(-2px); }
.btn--light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); }
.btn--light:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.btn--lg { padding: 17px 30px; font-size: 1.03rem; }
.btn--sm { padding: 11px 18px; font-size: .9rem; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

.link-more {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .9rem; font-weight: 700; color: var(--green-dark);
}
.link-more svg { width: 16px; height: 16px; transition: transform .18s ease; }
.link-more:hover { text-decoration: underline; }
.link-more:hover svg { transform: translateX(3px); }

/* =========================================================
   5 · Glava / navigacija — identična gradlab.si
========================================================= */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .25s ease, box-shadow .25s ease;
}
.header.is-scrolled { background: rgba(255,255,255,.95); box-shadow: 0 10px 30px rgba(11,22,61,.08); }
.nav { display: flex; align-items: center; gap: 20px; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 40px; height: 40px; border-radius: 12px; background: var(--grad-green);
  display: grid; place-items: center; box-shadow: var(--shadow-green); flex: none; }
.brand__mark svg { width: 24px; height: 24px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.brand__name { font-weight: 800; color: var(--navy); font-size: 1.06rem; letter-spacing: -.02em; }
.brand__by { font-size: .72rem; color: var(--muted); font-weight: 600; letter-spacing: .02em; }

.nav__links { display: flex; align-items: center; gap: 6px; margin-inline: auto; }
.nav__links a {
  position: relative; font-size: .92rem; font-weight: 600; color: var(--slate);
  padding: 9px 11px; white-space: nowrap; transition: color .18s;
}
.nav__links a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px;
  height: 2.5px; border-radius: 2px; background: var(--grad-green);
  transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.nav__links a:hover { color: var(--navy); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--navy); }
.nav__only-mobile { display: none; }
.nav__spacer { display: none; }
.nav__actions { display: flex; align-items: center; gap: 12px; }
/* povezava na sestrsko stran — enak tretma kot povezava na Gradkalk v navigaciji Gradlaba */
.nav__sestrska { opacity: .72; font-weight: 600; }
.nav__sestrska:hover { opacity: 1; color: var(--green); }

/* jezikovni preklopnik */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 12px; font-weight: 700; font-size: .85rem; color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.lang__btn:hover { border-color: var(--green); }
.lang__btn > svg { width: 14px; height: 14px; color: var(--muted); transition: transform .18s ease; }
.lang.open .lang__btn > svg { transform: rotate(180deg); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 6px; min-width: 178px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s; z-index: 70;
}
.lang.open .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang__menu a {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; padding: 9px 11px; border-radius: 9px;
  font-size: .9rem; font-weight: 600; color: var(--slate);
}
.lang__menu a:hover { background: var(--bg-soft); color: var(--navy); }
.lang__menu a.active, .lang__menu a[aria-current="true"] { color: var(--green-dark); background: var(--green-050); }
.lang__tag { margin-left: auto; font-size: .7rem; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }

/* CSS zastavice — emoji zastavice na Windows ne delujejo */
.flag { display: inline-block; width: 20px; height: 14px; border-radius: 3px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(11,22,61,.12); background-size: cover; background-position: center; }
.flag--sl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'%3E%3Crect width='60' height='42' fill='%23fff'/%3E%3Crect y='14' width='60' height='14' fill='%23005DA4'/%3E%3Crect y='28' width='60' height='14' fill='%23ED1C24'/%3E%3Cpath d='M9 7h12v9c0 5.5-3.2 8.4-6 9.6-2.8-1.2-6-4.1-6-9.6z' fill='%23005DA4' stroke='%23ED1C24' stroke-width='1.2'/%3E%3Cpath d='M10.6 17.8l3.2-4.6 2.2 2.7 2.2-2.7 3.2 4.6z' fill='%23fff'/%3E%3Cg fill='%23FFC800'%3E%3Ccircle cx='12.6' cy='9.8' r='1'/%3E%3Ccircle cx='15' cy='8.5' r='1'/%3E%3Ccircle cx='17.4' cy='9.8' r='1'/%3E%3C/g%3E%3C/svg%3E"); }
.flag--hr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'%3E%3Crect width='60' height='42' fill='%23fff'/%3E%3Crect width='60' height='14' fill='%23ED1C24'/%3E%3Crect y='28' width='60' height='14' fill='%23171796'/%3E%3Cdefs%3E%3CclipPath id='s'%3E%3Cpath d='M24 12h12v12c0 4-2.8 6.8-6 8-3.2-1.2-6-4-6-8z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23s)'%3E%3Crect x='24' y='12' width='12' height='20' fill='%23fff'/%3E%3Cg fill='%23ED1C24'%3E%3Crect x='24' y='12' width='3' height='3.6'/%3E%3Crect x='30' y='12' width='3' height='3.6'/%3E%3Crect x='27' y='15.6' width='3' height='3.6'/%3E%3Crect x='33' y='15.6' width='3' height='3.6'/%3E%3Crect x='24' y='19.2' width='3' height='3.6'/%3E%3Crect x='30' y='19.2' width='3' height='3.6'/%3E%3Crect x='27' y='22.8' width='3' height='3.6'/%3E%3Crect x='33' y='22.8' width='3' height='3.6'/%3E%3Crect x='24' y='26.4' width='3' height='3.6'/%3E%3Crect x='30' y='26.4' width='3' height='3.6'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M24 12h12v12c0 4-2.8 6.8-6 8-3.2-1.2-6-4-6-8z' fill='none' stroke='%23171796' stroke-width='1'/%3E%3C/svg%3E"); }
.flag--sr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'%3E%3Crect width='60' height='42' fill='%23fff'/%3E%3Crect width='60' height='14' fill='%23C6363C'/%3E%3Crect y='14' width='60' height='14' fill='%230C4076'/%3E%3Crect x='16.5' y='7.5' width='9' height='3' rx='1' fill='%23EDB92E'/%3E%3Cpath d='M15 11h12v11c0 5-3.2 7.8-6 9-2.8-1.2-6-4-6-9z' fill='%23C6363C' stroke='%23EDB92E' stroke-width='1.2'/%3E%3Crect x='19.9' y='13' width='2.2' height='14' fill='%23fff'/%3E%3Crect x='16.5' y='17.4' width='9' height='2.2' fill='%23fff'/%3E%3C/svg%3E"); }
.flag--de { background-image: linear-gradient(180deg, #1a1a1a 0 33.3%, #DD0000 33.3% 66.6%, #FFCE00 66.6% 100%); }
.flag--it { background-image: linear-gradient(90deg, #009246 0 33.3%, #fff 33.3% 66.6%, #CE2B37 66.6% 100%); }
.flag--hu { background-image: linear-gradient(180deg, #CE2939 0 33.3%, #fff 33.3% 66.6%, #477050 66.6% 100%); }

/* mobilni preklopnik navigacije */
.nav__toggle { display: none; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line);
  background: #fff; align-items: center; justify-content: center; }
.nav__toggle svg { width: 22px; height: 22px; color: var(--navy); }
.nav__toggle svg + svg, .nav__toggle[aria-expanded="true"] svg:first-child { display: none; }
.nav__toggle[aria-expanded="true"] svg + svg { display: block; }

/* =========================================================
   6 · Hero — po vzoru gradlab.si (svetel, dvostolpčni)
========================================================= */
.hero { position: relative; overflow: hidden; background:
    radial-gradient(1200px 500px at 80% -10%, rgba(0,167,111,.10), transparent 60%),
    radial-gradient(900px 480px at 0% 0%, rgba(11,22,61,.05), transparent 55%);
}
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 56px);
  align-items: center; padding-block: clamp(40px, 6vw, 72px); }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.hero h1 em { font-style: normal; background: var(--grad-green); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.hero__lead { margin-top: 20px; font-size: 1.16rem; max-width: 42ch; color: var(--slate); }
.hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero__note { margin-top: 18px; font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hero__note svg { width: 16px; height: 16px; color: var(--green); flex: none; }

.hero__visual { position: relative; }
.mock {
  border-radius: var(--r-lg); overflow: hidden; background: #fff;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transform-origin: center;
}
.mock__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--navy); }
.mock__dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.28); }
.mock__dot:nth-child(1){ background:#ff5f57; } .mock__dot:nth-child(2){ background:#febc2e; } .mock__dot:nth-child(3){ background:#28c840; }
.mock__label { margin-left: 8px; font-family: var(--mono); font-size: .74rem; color: rgba(255,255,255,.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock img { width: 100%; display: block; }
/* isti okvir brez perspektive za posnetke sredi strani */
.mock--flat { transform: none; }
.mock--flat img { cursor: zoom-in; }

.hero__badge {
  position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-md); padding: 12px 15px; display: flex; align-items: center; gap: 11px;
}
.hero__badge svg { width: 22px; height: 22px; color: var(--green); flex: none; }
.hero__badge b { display: block; font-size: .92rem; color: var(--navy); }
.hero__badge span { font-size: .78rem; color: var(--muted); }
.hero__badge--tl { top: -18px; left: -26px; }
.hero__badge--br { bottom: -18px; right: -22px; }

/* =========================================================
   7 · Kartice, značke, seznami — identično gradlab.si
========================================================= */
.grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-cards--2 { grid-template-columns: repeat(2, 1fr); }
.grid-cards--3 { grid-template-columns: repeat(3, 1fr); }
.grid-cards--4 { grid-template-columns: repeat(4, 1fr); }
.card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 26px; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-100); }
.card--static, .card--static:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
.card__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--green-050);
  color: var(--green-dark); display: grid; place-items: center; margin-bottom: 18px; flex: none; }
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.18rem; margin-bottom: 9px; }
.card p { font-size: .96rem; }
.card__tags { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.card__more { margin-top: 14px; font-size: .9rem; font-weight: 700; color: var(--green-dark); }
.card__more:hover { text-decoration: underline; }

.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag { font-size: .74rem; font-weight: 700; color: var(--slate); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; }
.tag--green { color: var(--green-dark); background: var(--green-050); border-color: var(--green-100); }
.tag--amber { color: var(--amber); background: var(--amber-050); border-color: var(--amber-100); }

.check-list { margin-top: 22px; padding: 0; display: grid; gap: 13px; }
.check-list li { list-style: none; display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; color: var(--ink); }
.check-list svg { width: 22px; height: 22px; color: var(--green); flex: none; margin-top: 1px; }
.check-list b { color: var(--navy); }

/* =========================================================
   8 · Deljena sekcija — identična gradlab.si
========================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.split--rev .split__media { order: 2; }
.split__media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-md); background: #fff; }
.split__media img { width: 100%; cursor: zoom-in; }
.split h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.split p { margin-top: 14px; font-size: 1.05rem; }

/* =========================================================
   9 · Temni pas (showcase) — identičen gradlab.si
========================================================= */
.showcase { background: var(--grad-navy); color: #fff; }
.showcase .section-title, .showcase h2, .showcase h3, .showcase b { color: #fff; }
.showcase .eyebrow { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #d6f5e8; }
.showcase .section-sub, .showcase p { color: rgba(255,255,255,.72); }

/* =========================================================
   10 · Številke — identično gradlab.si
========================================================= */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 22px;
  text-align: center; box-shadow: var(--shadow-sm); }
.stat__n { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  background: var(--grad-green); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__l { margin-top: 6px; font-size: .92rem; color: var(--slate); font-weight: 600; }

/* =========================================================
   11 · Oštevilčeni koraki — po vzoru .pstep iz gradlab.si
========================================================= */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pstep { display: flex; gap: 15px; align-items: flex-start; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.pstep__num { width: 34px; height: 34px; border-radius: 10px; background: var(--grad-green); color: #fff;
  font-weight: 800; font-size: .95rem; display: grid; place-items: center; flex: none;
  font-variant-numeric: tabular-nums; }
.pstep h3 { color: var(--navy); font-size: 1rem; margin-bottom: 4px; }
.pstep p { color: var(--slate); font-size: .92rem; line-height: 1.55; }

/* stanja razvoja — v idiomu .tag */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700;
  border-radius: 7px; padding: 3px 9px; border: 1px solid; margin-bottom: 10px; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--live { color: var(--green-dark); background: var(--green-050); border-color: var(--green-100); }
.status--soon { color: var(--amber); background: var(--amber-050); border-color: var(--amber-100); }
.status--planned { color: var(--navy-700); background: var(--bg-soft); border-color: var(--line); }

/* =========================================================
   12 · Pari koda + naziv — identično gradlab.si (.std)
========================================================= */
.std-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.std { display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 20px; background: var(--bg); transition: border-color .18s, transform .18s; }
.std:hover { border-color: var(--green-100); transform: translateY(-3px); }
.std__code { flex: none; min-width: 128px; text-align: center; font-weight: 800; color: var(--green-dark);
  font-size: .93rem; background: var(--green-050); border: 1px solid var(--green-100);
  border-radius: 10px; padding: 9px 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.std__name { font-size: .93rem; color: var(--slate); }

/* =========================================================
   13 · Naprave — okvirji identični gradlab.si
========================================================= */
.phone { border: 8px solid #0d1526; border-radius: 30px; background: #000; overflow: hidden; position: relative;
  box-shadow: var(--shadow-lg); }
.phone img { width: 100%; display: block; }
.phone::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 7px; background: #0d1526; border-radius: 0 0 8px 8px; z-index: 4; }
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 34px);
  max-width: 900px; margin-inline: auto; }
.phone-item__caption { text-align: center; margin-top: 16px; }
.phone-item__caption b { display: block; color: var(--navy); font-size: 1rem; margin-bottom: 3px; }
.phone-item__caption span { color: var(--slate); font-size: .92rem; }

.device-tags { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; margin-top: 36px; }
.device-tag { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 18px; font-weight: 700; color: var(--navy); font-size: .95rem;
  box-shadow: var(--shadow-sm); }
.device-tag svg { width: 19px; height: 19px; color: var(--green-dark); }

/* =========================================================
   14 · Izpisi (listi) + svetlobna škatla — identično gradlab.si
========================================================= */
.reports__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,34px);
  align-items: start; }
.sheet { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-lg); transition: transform .2s ease; }
.sheet:hover { transform: translateY(-5px); }
.sheet img { width: 100%; height: 440px; object-fit: cover; object-position: top center; background: #fff;
  display: block; border-bottom: 1px solid var(--line); cursor: zoom-in; }
.sheet--mid img { object-position: center; }
.sheet--end img { object-position: bottom center; }
.sheet figcaption { padding: 16px 20px; font-weight: 700; color: var(--navy); font-size: .98rem; }
.sheet figcaption span { display: block; font-weight: 500; font-size: .84rem; color: var(--muted); margin-top: 3px; }

.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(11,22,61,.8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center;
  padding: 4vmin; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; cursor: zoom-out; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-width: calc(100vw - 8vmin); max-height: calc(100dvh - 8vmin); width: auto; height: auto;
  border-radius: 10px; background: #fff; box-shadow: var(--shadow-lg); }
.lightbox__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28); }
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox__close:hover { background: rgba(255,255,255,.24); }

/* =========================================================
   15 · Vprašanja — identično gradlab.si
========================================================= */
.faq { max-width: 900px; margin-inline: auto; display: grid; gap: 12px; }
.lsec .faq { max-width: none; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm); transition: border-color .18s; }
.faq details[open] { border-color: var(--green-100); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 14px; padding: 17px 22px; font-weight: 700; color: var(--navy); font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 500; color: var(--green-dark);
  line-height: 1; flex: none; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div, .faq details > p { padding: 0 22px 18px; color: var(--slate); font-size: .98rem; }
.faq details > div p + p { margin-top: 12px; }
.faq details > div ul { margin-top: 12px; padding-left: 22px; display: grid; gap: 8px; }
.faq details > div li::marker { color: var(--green); }
.faq details a { color: var(--green-dark); font-weight: 600; }
.faq details a:hover { text-decoration: underline; }

/* =========================================================
   16 · CTA in kontakt — identično gradlab.si
========================================================= */
.cta { background: #fff; }
.cta__box { background:
      radial-gradient(700px 300px at 100% 0%, rgba(0,167,111,.12), transparent 60%),
      var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(34px, 5vw, 64px); }
.cta__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px,4vw,60px); align-items: center; }
.cta h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.cta h2 em { font-style: normal; color: var(--green-dark); }
.cta p { margin-top: 14px; font-size: 1.08rem; }
.cta__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; }
.cta__note { margin-top: 18px; font-size: .88rem; color: var(--muted); }

.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px;
  box-shadow: var(--shadow-md); display: grid; gap: 18px; }
.contact-row { display: flex; gap: 14px; align-items: center; }
.contact-row__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--green-050);
  color: var(--green-dark); display: grid; place-items: center; flex: none; }
.contact-row__ic svg { width: 22px; height: 22px; }
.contact-row b { display: block; color: var(--navy); font-size: .96rem; }
.contact-row span, .contact-row a { color: var(--slate); font-size: .92rem; }
.contact-row a:hover { color: var(--green-dark); }

/* =========================================================
   17 · Obrazci — v idiomu gradlab.si (radij --r-sm, obroba --line)
========================================================= */
.form-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.form-grid > .field--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: .95rem; font-weight: 700; color: var(--navy); }
.field__label .req { color: var(--rose); }
.field__opt { font-weight: 500; color: var(--muted); font-size: .82rem; }
.field__hint { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.field__error { font-size: .82rem; color: var(--rose); font-weight: 600; }
.field__error:empty { display: none; }

.input, .select, .textarea {
  width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; font-size: 1rem; font-family: inherit; color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: #cfd6e2; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(0,167,111,.14);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--rose); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(179,38,30,.13); }
.textarea { min-height: 128px; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8794' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); position: relative; z-index: 1; }
.input-group__unit {
  display: inline-flex; align-items: center; padding: 0 14px;
  border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--bg-soft); color: var(--slate); font-family: var(--mono); font-size: .86rem; white-space: nowrap;
}
.input-group .input:focus + .input-group__unit { border-color: var(--green); }

.seg { display: inline-flex; padding: 4px; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px; gap: 2px; flex-wrap: wrap; }
.seg button { padding: 9px 16px; border-radius: 999px; font-size: .9rem; font-weight: 700; color: var(--slate);
  background: none; border: 0; transition: background .18s, color .18s, box-shadow .18s; }
.seg button:hover { color: var(--navy); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }

/* =========================================================
   18 · Računala — lastna komponenta Gradkalka, zgrajena z žetoni Gradlaba
========================================================= */
.calc { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(22px, 3vw, 34px); align-items: start; }
.calc__panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 34px); box-shadow: var(--shadow-sm); }
.calc__panel h2 { font-size: 1.18rem; }
.calc__panel > .seg { margin-top: 18px; }
.calc__fields { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); margin-top: 22px; }
.calc__fields .field--full { grid-column: 1 / -1; }
.calc__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding-top: 22px;
  border-top: 1px solid var(--line); }

/* izpis rezultata — temna kartica v idiomu .partner__box / .lsec--cta */
.calc__out { position: sticky; top: 92px; background: var(--grad-navy); border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 32px); color: #fff; box-shadow: var(--shadow-lg); overflow: hidden; }
.calc__out h2 { color: #fff; font-size: 1.18rem; }
.calc__out-empty { color: rgba(255,255,255,.72); font-size: .96rem; margin-top: 16px; }
.calc__out-primary { border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 20px; margin: 18px 0; }
.calc__out-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(2rem, 5vw, 2.7rem);
  font-weight: 800; line-height: 1.05; color: #fff; letter-spacing: -.02em; }
.calc__out-unit { font-size: 1.1rem; color: rgba(255,255,255,.7); font-weight: 700; margin-left: 7px; }
.calc__out-label { display: block; margin-top: 8px; font-size: .88rem; color: rgba(255,255,255,.6); }
.calc__out-list { list-style: none; padding: 0; display: grid; }
.calc__out-list li { display: flex; align-items: baseline; gap: 14px; padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.09); font-size: .95rem; }
.calc__out-list li:last-child { border-bottom: 0; }
.calc__out-list .k { color: rgba(255,255,255,.72); }
.calc__out-list .v { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: #fff; font-weight: 700; white-space: nowrap; }
.calc__out-note { margin-top: 18px; font-size: .82rem; color: rgba(255,255,255,.55); line-height: 1.55; }
.calc__out[data-state="empty"] .calc__out-ready { display: none; }
.calc__out[data-state="ready"] .calc__out-empty { display: none; }

.formula { font-family: var(--mono); font-size: .88rem; line-height: 1.7; color: var(--navy);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px; overflow-x: auto; }

/* =========================================================
   19 · Podatkovni prikazi — lastni Gradkalku, v idiomu .legal .table-wrap
========================================================= */
.ledger { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff;
  box-shadow: var(--shadow-sm); }
.ledger__head { display: flex; align-items: center; gap: 9px; padding: 13px 18px; background: var(--bg-soft);
  border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .78rem;
  letter-spacing: .04em; color: var(--slate); }
.ledger__head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px var(--green-050); flex: none; }
.ledger__body { padding: 20px; }
.ledger__scroll { overflow-x: auto; }

.dtable { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 620px; }
.dtable--narrow { min-width: 360px; }
.dtable th { text-align: left; background: var(--bg-soft); color: var(--navy); font-size: .78rem;
  letter-spacing: .05em; text-transform: uppercase; padding: 12px 16px; white-space: nowrap; }
.dtable td { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--slate); vertical-align: top; }
.dtable td.num, .dtable th.num { text-align: right; }
.dtable td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dtable .code { font-family: var(--mono); font-size: .88em; color: var(--navy); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.dtable .desc { color: var(--ink); overflow-wrap: anywhere; }
.dtable tbody tr:hover { background: var(--green-050); }

.dot-type { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 9px; vertical-align: 1px; }
.dot-type.i-work { background: var(--green); }
.dot-type.i-mat  { background: var(--navy-700); }
.dot-type.i-mach { background: #E0A100; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .86rem; color: var(--muted); margin-top: 16px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: block; }
.legend .i-work { background: var(--green); }
.legend .i-mat  { background: var(--navy-700); }
.legend .i-mach { background: #E0A100; }

.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kv > div { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 12px; text-align: center;
  background: var(--bg); }
.kv b { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.05rem;
  color: var(--navy); font-weight: 800; }
.kv span { display: block; margin-top: 4px; font-size: .82rem; color: var(--muted); }

/* gantogram */
.gantt { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff;
  box-shadow: var(--shadow-sm); }
.gantt__head { padding: 13px 18px; font-family: var(--mono); font-size: .78rem; color: var(--slate);
  background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.gantt__row { display: grid; grid-template-columns: minmax(120px, 210px) 1fr; font-size: .88rem; }
.gantt__name { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--slate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt__track { position: relative; height: 40px; border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 52px 100%; }
.gantt__row:last-child .gantt__name, .gantt__row:last-child .gantt__track { border-bottom: 0; }
.gantt__bar { position: absolute; top: 10px; height: 20px; border-radius: 6px; background: var(--grad-green);
  box-shadow: 0 2px 8px rgba(0,167,111,.28); }
.gantt__bar--group { background: var(--navy-700); height: 8px; top: 16px; border-radius: 4px; box-shadow: none; }
.gantt__bar--clash { background: linear-gradient(135deg, #D9483F, var(--rose)); box-shadow: 0 2px 8px rgba(179,38,30,.28); }
.gantt__bar--ghost { background: none; border: 1.5px dashed var(--green); box-shadow: none; }

/* obvestila — v idiomu .legal .note iz gradlab.si */
.note { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--r);
  padding: 16px 18px; font-size: .95rem; line-height: 1.6; }
.note svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.note--ok { background: var(--green-050); border: 1px solid var(--green-100); color: var(--green-dark); }
.note--ok b { color: var(--green-dark); }
.note--warn { background: var(--amber-050); border: 1px solid var(--amber-100); color: var(--amber); }
.note--warn b { color: var(--amber); }
.note--info { background: var(--bg-soft); border: 1px solid var(--line); color: var(--slate); }
.note--info b { color: var(--navy); }
.note--error { background: var(--rose-050); border: 1px solid var(--rose-100); color: var(--rose); }

/* neposreden odgovor (AEO) — v idiomu .legal .note, a poudarjen */
.answer { background: var(--green-050); border: 1px solid var(--green-100); border-left: 4px solid var(--green);
  border-radius: var(--r); padding: 20px 24px; }
.answer p { color: var(--green-dark); font-size: 1.05rem; line-height: 1.65; }

/* =========================================================
   20 · Dve poti — v idiomu .card + .std iz gradlab.si
========================================================= */
.ways { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; }
.way { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 26px;
  box-shadow: var(--shadow-sm); }
.way--accent { border-color: var(--green-100); box-shadow: var(--shadow-md); }
.way h3 { font-size: 1.18rem; margin-top: 14px; }
.way__flow { font-family: var(--mono); font-size: .82rem; color: var(--muted); margin: 8px 0 14px; }
.way p { font-size: .96rem; }
.way .tags { margin-top: 18px; }
.ways__bridge { display: grid; place-items: center; position: relative; width: 92px; }
.ways__bridge::before { content: ""; position: absolute; width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--green-100), transparent); }
.ways__bridge span { position: relative; width: 52px; height: 52px; border-radius: 50%; background: #fff;
  border: 1px solid var(--green-100); color: var(--green-dark); display: grid; place-items: center;
  box-shadow: var(--shadow-sm); }
.ways__bridge svg { width: 22px; height: 22px; }

/* =========================================================
   21 · Podstrani — identično gradlab.si (legal-hero / crumbs / lsec)
========================================================= */
.legal-hero { position: relative; overflow: hidden; background:
    radial-gradient(1100px 460px at 85% -20%, rgba(0,167,111,.12), transparent 60%),
    radial-gradient(700px 380px at 0% 10%, rgba(11,22,61,.05), transparent 55%),
    var(--bg);
  border-bottom: 1px solid var(--line); padding-block: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 40px); }
.legal-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-top: 16px; }
.legal-hero h1 em { font-style: normal; background: var(--grad-green); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.legal-hero__lead { margin-top: 16px; font-size: 1.1rem; color: var(--slate); max-width: 68ch; }
.legal__updated { margin-top: 12px; color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.legal__updated svg { width: 16px; height: 16px; color: var(--green); }

.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 16px; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs li { display: flex; gap: 8px; align-items: center; }
.crumbs a { color: var(--green-dark); font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: var(--muted); }

.legal-wrap { padding-block: clamp(28px, 4vw, 44px); }
.legal { display: grid; gap: 22px; }
.lsec { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--shadow-sm); scroll-margin-top: 96px; }
.lsec h2 { display: flex; align-items: center; gap: 15px; font-size: clamp(1.2rem, 2vw, 1.4rem); }
.lsec__num { width: 40px; height: 40px; border-radius: 12px; background: var(--grad-green); color: #fff;
  display: grid; place-items: center; font-size: 1.02rem; font-weight: 800; flex: none;
  box-shadow: var(--shadow-green); font-variant-numeric: tabular-nums; }
.lsec p { margin-top: 14px; font-size: 1rem; }
.lsec ul { margin-top: 14px; padding-left: 22px; color: var(--slate); display: grid; gap: 8px; }
.lsec ol { margin-top: 14px; padding-left: 22px; color: var(--slate); display: grid; gap: 10px; }
.lsec li::marker { color: var(--green); }
.lsec a:not(.btn) { color: var(--green-dark); font-weight: 600; }
.lsec a:not(.btn):hover { text-decoration: underline; }
.lsec--cta { background: var(--grad-navy); border: 0; color: #fff; }
.lsec--cta h2 { color: #fff; }
.lsec--cta p { color: rgba(255,255,255,.78); }
.lsec--cta .cta__actions { margin-top: 22px; }
.lsec--cta .btn--primary, .lsec--cta .btn--light { color: #fff; }

/* =========================================================
   22 · Noga — identična gradlab.si
========================================================= */
.footer { background: var(--navy); color: rgba(255,255,255,.72); }
.footer::before { content: ""; display: block; height: 3px; background: var(--grad-green); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding-block: 44px 28px; }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__by { color: rgba(255,255,255,.5); }
.footer__brand p { color: rgba(255,255,255,.6); font-size: .92rem; margin-top: 16px; max-width: 34ch; }
.footer h2, .footer h4 { color: #fff; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 14px; font-weight: 700; }
.footer h2 a:hover, .footer h4 a:hover { color: var(--green); }
.footer ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.footer a { color: rgba(255,255,255,.72); font-size: .93rem; transition: color .18s; }
.footer a:hover { color: var(--green); }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer__contact svg { width: 15px; height: 15px; color: var(--green); flex: none; margin-top: 4px; }
.footer__contact span { color: rgba(255,255,255,.6); font-size: .93rem; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: 22px; display: flex;
  justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .86rem;
  color: rgba(255,255,255,.55); }
.footer__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer__dot { color: rgba(255,255,255,.3); }
.footer__credit b { color: rgba(255,255,255,.85); font-weight: 700; }
.footer__credit:hover b { color: var(--green); }
.footer__langs { display: flex; flex-wrap: wrap; gap: 8px; }
.footer__langs a { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); }
.footer__langs a:hover { border-color: var(--green); color: var(--green); }
.footer__langs a[aria-current="true"] { background: rgba(0,167,111,.16); border-color: rgba(0,167,111,.4); color: #7ef0c4; }

/* =========================================================
   23 · Stran 404
========================================================= */
.error-page { display: grid; place-items: center; text-align: center; padding-block: clamp(56px, 9vw, 110px); }
.error-page__code { font-family: var(--mono); font-size: clamp(3.4rem, 12vw, 6.5rem); font-weight: 800;
  line-height: 1; letter-spacing: -.04em; background: var(--grad-green); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.error-page h1 { margin-top: 18px; font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.error-page p { margin-top: 14px; max-width: 52ch; margin-inline: auto; font-size: 1.075rem; }

/* =========================================================
   24 · Razkritje ob drsenju — identično gradlab.si
   Vsebina je privzeto vidna; .js-anim doda skript šele, ko lahko animira.
========================================================= */
.reveal { opacity: 1; transform: none; transition: none; }
.js-anim .reveal { opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js-anim .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  .mock { transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media print { .reveal, .js-anim .reveal { opacity: 1 !important; transform: none !important; } }

/* =========================================================
   25 · Pripomočki
========================================================= */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 14px; }
.mt-3 { margin-top: 18px; } .mt-4 { margin-top: 22px; } .mt-5 { margin-top: 30px; }
.mt-6 { margin-top: 40px; } .mt-7 { margin-top: 56px; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 68ch; }
.measure-center { max-width: 68ch; margin-inline: auto; }
.text-muted { color: var(--muted); }
h1, h2, h3, .btn, .tag, .stat__n { overflow-wrap: break-word; }

/* =========================================================
   26 · Odzivnost — ista lestvica prelomnih točk kot gradlab.si
   1160 · 1024 · 860 · 760 · 720 · 640 · 560
========================================================= */
@media (max-width: 1024px) {
  .grid-cards, .grid-cards--3 { grid-template-columns: repeat(2, 1fr); }
  .grid-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .std-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .reports__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1160px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__spacer { display: none; }
  .nav__actions { margin-left: auto; }

  /* mobilni predal */
  .nav__links.show { display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column;
    align-items: stretch; background: #fff; border-bottom: 1px solid var(--line); padding: 12px var(--pad) 20px;
    gap: 2px; box-shadow: var(--shadow-md); max-height: calc(100dvh - 72px); overflow-y: auto; }
  .nav__links.show a { padding: 12px 14px; border-radius: 10px; }
  .nav__links.show a::after { display: none; }
  .nav__links.show a:hover { background: var(--bg-soft); }
  .nav__links.show .nav__only-mobile { display: block; font-weight: 700; color: var(--green-dark); }
}
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { margin-top: 20px; }
  .mock { transform: none; }
  .hero__badge--tl { left: 8px; } .hero__badge--br { right: 8px; }
  .split, .cta__grid, .calc { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .std-grid { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr; gap: 16px; }
  .ways__bridge { width: auto; height: 56px; }
  .ways__bridge::before { width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--green-100), transparent); }
  .calc__out { position: static; }
  .phones { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
}
@media (max-width: 760px) {
  .form-grid, .calc__fields { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .kv { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sheet img { height: 340px; }
  .reports__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .hero .eyebrow { display: table; margin-inline: auto; text-align: center;
    font-size: .68rem; letter-spacing: .05em; padding: 6px 12px; }
  .grid-cards, .grid-cards--2, .grid-cards--3, .grid-cards--4, .std-grid, .stats, .steps { grid-template-columns: 1fr; }
  .phones { grid-template-columns: 1fr; max-width: 280px; }
  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer__brand .brand { justify-content: center; }
  .footer__brand .brand__text { text-align: left; }
  .footer__brand p { margin-inline: auto; }
  .footer__contact li { justify-content: center; }
  .footer__langs { justify-content: center; }
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .btn { width: 100%; }
  .hero__cta .btn, .cta__actions .btn, .btn-row .btn, .calc__actions .btn, .lsec--cta .btn { width: auto; }
  .nav__actions .btn { display: none; }
  .hero__badge { display: none; }
  .kv { grid-template-columns: 1fr; }
  .ledger__body { padding: 14px; }
}

/* =========================================================
   27 · Galerija posnetkov + ozadja sekcij — identično gradlab.si
========================================================= */
.crumbs li + li::before { content: "\203A"; color: var(--muted); }

.shots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.shot { position: relative; border-radius: var(--r); overflow: hidden; background: #fff;
  border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow-lg); transition: transform .2s ease; }
.shot:hover { transform: translateY(-4px); }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; cursor: zoom-in; }
.shot__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 14px;
  background: linear-gradient(to top, rgba(6,12,32,.92), transparent);
  font-size: .9rem; font-weight: 700; color: #fff; }
.shot__cap span { display: block; font-size: .76rem; font-weight: 500; color: rgba(255,255,255,.7); }
.shot--wide { grid-column: span 4; aspect-ratio: 16/9; }
.shot--tall { grid-column: span 2; aspect-ratio: 13/15; }
.shot--half { grid-column: span 3; aspect-ratio: 16/10; }
.shot--third { grid-column: span 2; aspect-ratio: 4/3; }
@media (max-width: 1024px) {
  .shots { grid-template-columns: repeat(6, 1fr); }
  .shot--wide, .shot--half, .shot--third, .shot--tall { grid-column: span 3; aspect-ratio: 16/10; }
}
@media (max-width: 860px) {
  .shots { grid-template-columns: repeat(2, 1fr); }
  .shot--wide, .shot--half, .shot--third, .shot--tall { grid-column: span 2; }
}

/* imenovana ozadja sekcij — enak pristop kot .compliance / .why / .faq-sec na gradlab.si */
.sec-white { background: #fff; }
.sec-soft { background: var(--bg-soft); }

/* =========================================================
   28 · Bloki znotraj .lsec — identično gradlab.si
========================================================= */
.rights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; margin-top: 18px; }
.right-item { display: flex; gap: 11px; align-items: flex-start; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 15px; font-size: .95rem; color: var(--ink); }
.right-item svg { width: 20px; height: 20px; color: var(--green); flex: none; margin-top: 1px; }
.right-item b { color: var(--navy); }

.data-list { display: grid; gap: 14px; margin-top: 18px; }
.data-item { display: flex; gap: 15px; align-items: flex-start; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.data-item__ic { width: 42px; height: 42px; border-radius: 12px; background: #fff; border: 1px solid var(--line);
  color: var(--green-dark); display: grid; place-items: center; flex: none; box-shadow: var(--shadow-sm); }
.data-item__ic svg { width: 21px; height: 21px; }
.data-item b { color: var(--navy); font-size: 1rem; }
.data-item p { margin-top: 5px; font-size: .95rem; }

.legal-company { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; margin-top: 20px; }
@media (max-width: 640px) { .legal-company, .rights { grid-template-columns: 1fr; } }

/* =========================================================
   29 · Krčljivost mrežnih stolpcev
   Gradkalk ima širše podatkovne komponente kot Gradlab (preglednice, gantogram,
   računala), zato morajo biti mrežni stolpci izrecno krčljivi. Brez minmax(0,…)
   in min-width:0 nezlomljiva vsebina razširi stolpec čez širino strani.
========================================================= */
.hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.split      { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cta__grid  { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.calc       { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }

.mock, .mock__bar { min-width: 0; }
.mock__label { flex: 1 1 auto; min-width: 0; }

.ledger, .ledger__body, .gantt, .formula { min-width: 0; max-width: 100%; }
.ledger__scroll { max-width: 100%; }
.legal, .legal > *, .card, .way, .stat, .pstep, .pstep > div,
.hero__copy, .hero__visual, .split > *, .calc > * { min-width: 0; }
.lsec h2 { min-width: 0; overflow-wrap: anywhere; }
.faq summary { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .hero__grid, .split, .cta__grid, .calc { grid-template-columns: minmax(0, 1fr); }
}

/* Na ozkih zaslonih se gumb lahko prelomi — enako kot na softbase.si
   (.btn{white-space:normal;text-align:center} pri mobilni prelomni točki).
   Gradkalk ima daljše napise (nemški, madžarski), zato je to nujno. */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
}

/* =========================================================
   30 · Edino namerno odstopanje od gradlab.si
   Gradlab uporablja --muted: #7A8794, kar na beli podlagi doseže le 3,67 : 1
   in ne izpolnjuje WCAG 2.2 AA za navadno besedilo. Ker je dostopnost izrecna
   zahteva tega projekta, je odtenek potemnjen na najbližjo vrednost, ki povsod
   doseže 4,5 : 1 (bela 5,3 : 1, --bg 4,9 : 1, --bg-soft 4,7 : 1).
   Vloga, ime žetona in vsa mesta uporabe ostajajo enaka kot na Gradlabu.
========================================================= */
:root { --muted: #626D7B; }

/* podnapisi telefonov stojijo v temnem pasu .showcase */
.showcase .phone-item__caption b { color: #fff; }
.showcase .phone-item__caption span { color: rgba(255,255,255,.72); }

/* jantar je Gradkalkov žeton (izpeljan iz .chip--opt na gradlab.si);
   potemnjen na 5,7 : 1, da drobne oznake stanja izpolnijo AA */
:root { --amber: #8A5300; }

/* okrasno ločilo v nogi — malo vidnejše, a še vedno tiho */
.footer__dot { color: rgba(255,255,255,.52); }

/* ============================================================================
   Udobne tapljalne tarče (WCAG 2.2 · 2.5.8) — večje kot minimum:
   povezave v nogi, drobtinicah in znamki dobijo ~34–40px višino, brez
   vidne spremembe postavitve (padding nadomesti dosedanji razmik seznama).
   ============================================================================ */
.footer ul { gap: 2px; }
.footer li a { display: inline-block; padding-block: 9px; }
.footer__contact li { align-items: center; }
.footer__contact svg { margin-top: 0; }
.footer__bottom a { display: inline-block; padding-block: 8px; }
.footer__langs a { padding-block: 8px; }
.brand__by { display: inline-block; padding-block: 4px; }
.crumbs a { display: inline-block; padding-block: 7px; }
.footer h2 a { display: inline-block; padding-block: 6px; }
.card__more { display: inline-block; padding-block: 4px; }
.contact-row a { display: inline-block; padding-block: 6px; }
/* ===== 30b · Cross-promo pas (Gradlab) — isti navy princip kot pas na gradlab.si ===== */
.gl-band { background: linear-gradient(180deg,#14224C,#0B163D) !important; border-color: transparent !important;
  color: #F2F6F9; align-items: center; gap: 28px; padding: clamp(24px,4vw,36px) clamp(22px,4vw,40px) !important;
  box-shadow: 0 20px 46px rgba(11,22,61,.30) !important; }
.gl-band:hover { transform: none !important; border-color: transparent !important; }
.gl-band b { color: #fff !important; font-size: 1.15rem !important; }
.gl-band p { color: #9FB0C0 !important; margin-top: 6px; }
.gl-band .btn--ghost { background: var(--grad-green) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(0,132,87,.30) !important; }
.gl-band .btn--ghost:hover { color: #fff !important; transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,132,87,.38) !important; }

/* ===== Animiran terminski plan (gantogram) — premik aktivnosti, veriga, trk (Darjanov princip) ===== */
.gantt__track { overflow: hidden; }
@keyframes gk-vlec  { 0%,18%{transform:translateX(0)} 34%,64%{transform:translateX(74px)} 80%,100%{transform:translateX(0)} }
@keyframes gk-sledi { 0%,26%{transform:translateX(0)} 40%,64%{transform:translateX(74px)} 80%,100%{transform:translateX(0)} }
@keyframes gk-duh   { 0%,18%{opacity:0} 30%,62%{opacity:1} 70%,100%{opacity:0} }
@keyframes gk-trk   { 0%,30%{background:var(--grad-green);box-shadow:0 2px 8px rgba(0,167,111,.28)} 40%,62%{background:linear-gradient(135deg,#D9483F,var(--rose));box-shadow:0 2px 10px rgba(179,38,30,.34)} 72%,100%{background:var(--grad-green);box-shadow:0 2px 8px rgba(0,167,111,.28)} }
.gantt__bar--drag   { animation: gk-vlec 9s ease-in-out infinite; }
.gantt__bar--follow { animation: gk-sledi 9s ease-in-out infinite; }
.gantt__bar--ghost  { opacity: 0; animation: gk-duh 9s ease-in-out infinite; }
.gantt__bar--clash  { animation: gk-trk 9s ease-in-out infinite; }
.gantt-warn         { opacity: 0; animation: gk-duh 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .gantt__bar--drag,.gantt__bar--follow,.gantt__bar--ghost,.gantt__bar--clash,.gantt-warn { animation: none !important; opacity: 1 !important; }
}

/* ===== Hero: velik, centriran posnetek (berljiv) — po Darjanovem izvirniku ===== */
.hero__grid { grid-template-columns: 1fr !important; text-align: center; gap: clamp(30px,5vw,50px); }
.hero__copy { max-width: 720px; margin-inline: auto; }
.hero__copy .hero__lead { margin-inline: auto; }
.hero__copy .hero__cta { justify-content: center; }
.hero__copy .hero__note { justify-content: center; }
.hero__visual { width: 100%; max-width: 1120px; margin-inline: auto; }
.hero__visual .mock { position: relative; transform: none; }
.hero__visual .mock img { cursor: zoom-in; }
.hero__visual .mock::after { display: none; content: "\1F50D"; position: absolute; left: 12px; bottom: 12px;
  font-size: .72rem; font-weight: 600; color: #fff; background: rgba(11,22,61,.82); padding: 6px 11px;
  border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.28); pointer-events: none; letter-spacing: .01em; }

/* ===== Poravnava dvostolpčnih sekcij: vrhnja poravnava (stolpca se ujameta na vrhu) ===== */
.split { align-items: start; }
/* ===== Kaj je Gradkalk: širši zeleni odgovor, besedilo v dveh stolpcih (levo/desno) ===== */
#kaj .answer.measure-center { max-width: 1000px; }
#kaj .answer p { column-count: 2; column-gap: clamp(28px,4vw,52px); }
@media (max-width: 760px) { #kaj .answer p { column-count: 1; } }

/* ===== Animiran uvoz popisa (01) + odkrivanje normativa (02) — Darjanov princip, svetla tema ===== */
@keyframes gk-fill { 0%,7%{opacity:0;transform:translateX(-12px)} 19%,90%{opacity:1;transform:translateX(0)} 100%{opacity:1} }
.ledger--live tbody tr{ opacity:0; animation:gk-fill 7.5s ease-in-out infinite }
.ledger--live tbody tr:nth-child(1){animation-delay:.15s}.ledger--live tbody tr:nth-child(2){animation-delay:.35s}
.ledger--live tbody tr:nth-child(3){animation-delay:.55s}.ledger--live tbody tr:nth-child(4){animation-delay:.75s}
.ledger--live tbody tr:nth-child(5){animation-delay:.95s}.ledger--live tbody tr:nth-child(6){animation-delay:1.15s}
.ledger--live tbody tr:nth-child(7){animation-delay:1.35s}.ledger--live tbody tr:nth-child(8){animation-delay:1.55s}
.ledger--live tbody tr:nth-child(9){animation-delay:1.75s}
.ledger--live .note--ok{ opacity:0; animation:gk-fill 7.5s ease-in-out infinite; animation-delay:1.95s }
@media (prefers-reduced-motion: reduce){ .ledger--live tbody tr,.ledger--live .note--ok{ animation:none !important; opacity:1 !important; transform:none !important } }

/* ===== FAQ na polno širino strani (domača stran) ===== */
.faq { max-width: none; }
.faq details > div, .faq details > p { max-width: none; }

/* ===== Intro na calc/legal straneh čez celo širino ===== */
.legal-hero__lead { max-width: none; }

/* ===== Noga: 1 stolpec, centrirano — mobilne in tablice ===== */
@media (max-width: 1024px){
  .footer__grid { grid-template-columns: 1fr; text-align: center; gap: 34px; }
  .footer__brand { display: grid; justify-items: center; }
  .footer__brand .brand { justify-content: center; }
  .footer__brand .brand__text { text-align: center; }
  .footer__brand p { margin-inline: auto; max-width: 46ch; }
  .footer h2 { text-align: center; }
  .footer ul { justify-items: center; }
  .footer__contact li { justify-content: center; text-align: left; }
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .footer__meta, .footer__langs { justify-content: center; }
}

/* =========================================================
   22 · Dostopnost (WCAG 2.2 AA) — kontrast obrob, povezave, fokus
   - obroba polj: --line (#E6EAF0) je na belem ~1,2:1, potrebno >= 3:1 (1.4.11)
   - vsebinske povezave: barva ni edini razlikovalec (1.4.1) -> stalno podcrtane
   - fokusni obroc: polna barva namesto 45% prosojnosti (2.4.7)
========================================================= */
:root { --field-line: #8A93A1; }

.input, .select, .textarea { border-color: var(--field-line); }
.input:hover, .select:hover, .textarea:hover { border-color: #6F7886; }
.input:focus, .select:focus, .textarea:focus { box-shadow: 0 0 0 4px rgba(0,167,111,.22); }

:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; }

.lsec a:not(.btn), .faq details a, .answer a, .legal-hero__lead a {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}

/* =========================================================
   23 · Pasica za privolitev (piskotki / GA4)
   Nemodalna: ne prestreza fokusa in ne blokira vsebine.
   position:fixed -> ne povzroca premika postavitve (CLS).
========================================================= */
.cc {
  position: fixed; z-index: 120;
  left: 50%; bottom: clamp(12px, 2.5vw, 24px);
  transform: translateX(-50%) translateY(14px);
  width: min(1000px, calc(100vw - 2 * clamp(12px, 3vw, 24px)));
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(11,22,61,.05), 0 26px 60px -28px rgba(11,22,61,.55);
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.6vw, 26px);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(14px, 2.4vw, 30px);
  align-items: center;
  opacity: 0; transition: opacity .28s ease, transform .28s ease;
}
.cc.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.cc[hidden] { display: none; }

.cc__title { font-size: 1rem; font-weight: 800; color: var(--navy); margin: 0 0 5px; }
.cc__text  { font-size: .92rem; color: var(--slate); margin: 0; line-height: 1.55; }
.cc__text a { color: var(--green-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Obe tipki sta enako veliki in enako vidni (zahteva EU nadzornikov). */
.cc__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cc__btn {
  min-width: 132px; padding: 12px 20px; border-radius: var(--r-sm);
  font-size: .95rem; font-weight: 700; font-family: inherit;
  text-align: center; border: 2px solid transparent; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.cc__btn--yes { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.cc__btn--yes:hover { background: #00614F; border-color: #00614F; }
.cc__btn--no  { background: #fff; border-color: var(--navy); color: var(--navy); }
.cc__btn--no:hover  { background: var(--bg-soft); }

@media (max-width: 720px) {
  .cc { grid-template-columns: 1fr; }
  /* isti vrstni red kot na namizju: nobena moznost ni v prednosti */
  .cc__actions { flex-direction: column; }
  .cc__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cc { transition: none; transform: translateX(-50%); }
  .cc.is-in { transform: translateX(-50%); }
}