:root{
 --bg:#020914;--bg2:#04111e;--panel:#061421;--text:#f4f6f9;--muted:#b5c0cc;
 --blue:var(--accent);--blue2:hsl(var(--accent-h) 100% 42%);--line:#163a57;--max:1240px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI",Arial,sans-serif;line-height:1.55}
a{color:inherit}.shell{width:min(var(--max),calc(100% - 42px));margin:auto}
.site-header{position:fixed;z-index:30;top:0;left:0;right:0;padding:14px 0}
.nav-wrap{width:min(1320px,calc(100% - 34px));margin:auto;height:82px;border:1px solid rgba(66,116,156,.36);border-radius:18px;background:rgba(0,8,18,.78);backdrop-filter:blur(14px);display:grid;grid-template-columns:minmax(430px,520px) 1fr 50px;align-items:center;padding:6px 18px;box-shadow:0 15px 45px rgba(0,0,0,.2)}
.brand{
  display:flex;
  align-items:center;
  min-width:0;
}
.brand img{
  display:block;
  width:auto;
  height:70px;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
}
nav{display:flex;justify-content:flex-end;gap:34px;align-items:center}nav a{text-decoration:none;text-transform:uppercase;font-size:14px;letter-spacing:.03em;color:#d3dbe4;position:relative;padding:22px 0}nav a:after{content:"";position:absolute;left:50%;right:50%;bottom:10px;height:2px;background:var(--blue);box-shadow:0 0 8px var(--blue);transition:.2s}nav a.active,nav a:hover{color:var(--blue)}nav a.active:after,nav a:hover:after{left:0;right:0}
.menu-btn{display:none}
.hero{min-height:770px;height:100vh;max-height:930px;position:relative;background:url("hero-bg.webp?v=1.8.2") center 48%/cover no-repeat;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,7,15,.45) 0%,rgba(1,7,15,.14) 48%,rgba(1,7,15,.18) 100%)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06),transparent 68%,rgba(0,4,10,.40))}
.hero-content{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:1fr 300px;align-items:center;padding-top:110px}
.hero-copy{max-width:700px}.kicker,.section-label{color:var(--blue);font-size:14px;text-transform:uppercase;letter-spacing:.16em;font-weight:600}
h1{font-size:64px;line-height:1.08;letter-spacing:-.035em;text-transform:uppercase;margin:18px 0 20px;font-weight:700;text-shadow:0 3px 16px rgba(0,0,0,.28)}h1 span{color:var(--blue);text-shadow:0 0 20px rgba(var(--accent-rgb),.35)}
.line{width:54px;height:2px;background:var(--blue);box-shadow:0 0 9px var(--blue);margin:0 0 24px}
.hero-copy p{font-size:18px;color:#d4dde6;margin:0 0 28px}.actions{display:flex;gap:16px}.btn{height:52px;padding:0 23px;border-radius:5px;display:inline-flex;align-items:center;gap:11px;text-decoration:none;text-transform:uppercase;font-size:14px;letter-spacing:.02em}.primary{background:linear-gradient(180deg,hsl(var(--accent-h) 100% 58%),hsl(var(--accent-h) 100% 42%));border:1px solid hsl(var(--accent-h) 100% 66%)}.secondary{border:1px solid hsl(var(--accent-h) 100% 58%);background:rgba(0,5,14,.5)}.btn:hover{filter:brightness(1.12)}
.hero-features{border-left:1px solid rgba(var(--accent-rgb),.7);padding-left:35px;display:grid;gap:24px}.hero-features div{display:flex;align-items:center;gap:18px;text-transform:uppercase;font-size:14px;color:#d7e0e9}.hero-features i{font-style:normal;color:var(--blue);font-size:28px;min-width:36px}
.scroll{position:absolute;z-index:4;bottom:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#d8e3ec;text-transform:uppercase;letter-spacing:.08em;gap:3px}.scroll span{font-size:28px;line-height:1}.scroll small{font-size:11px}.scroll b{font-size:18px;font-weight:400}
.about{border-top:1px solid #102b42;background:linear-gradient(180deg,#03101c,#020914);padding:36px 0}.about-grid{display:grid;grid-template-columns:330px 1fr;gap:55px}.about h2,.projects h2,.simple h2{font-size:28px;line-height:1.18;margin:10px 0 14px}.about p,.simple p{font-size:14px;color:var(--muted);margin:0 0 20px}.mini-btn{border:1px solid var(--accent);color:var(--accent-soft);text-decoration:none;text-transform:uppercase;font-size:12px;padding:9px 16px;border-radius:4px;display:inline-block}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.service-grid article{min-height:205px;border:1px solid #18364d;background:linear-gradient(180deg,rgba(5,18,31,.85),rgba(2,10,18,.86));border-radius:11px;text-align:center;padding:25px 18px 22px;position:relative}.service-grid article:after{content:"";position:absolute;bottom:-1px;left:35%;right:35%;height:2px;background:var(--blue);box-shadow:0 0 10px 2px var(--blue)}.ico{font-size:42px;color:var(--blue);margin-bottom:10px}.service-grid h3{font-size:14px;text-transform:uppercase;margin:0 0 10px}.service-grid p{font-size:12px;color:#b8c4d0;margin:0}
.projects{padding:24px 0 44px;border-top:1px solid #102b42;background:#020914}.projects-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.projects h2{margin-bottom:0}.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.project-grid article{border:1px solid #17344a;border-radius:10px;overflow:hidden;background:#04101c}.project-grid img{width:100%;aspect-ratio:1.75;object-fit:cover;display:block}.pcopy{padding:10px 12px 14px}.pcopy span{font-size:9px;text-transform:uppercase;background:#0b4b83;color:#d6efff;padding:3px 6px;border-radius:3px}.pcopy h3{font-size:14px;margin:6px 0 3px}.pcopy p{font-size:11px;color:#bcc8d3;margin:0}
.simple{padding:80px 0;background:#03101b;border-top:1px solid #102b42}.simple p{max-width:760px;font-size:16px}.contact{background:#020914}.contact a{font-size:28px;color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue)}
footer{border-top:1px solid #102b42;padding:28px 0;color:#8194a5;font-size:12px;background:#01060d}
@media(max-width:1050px){.nav-wrap{grid-template-columns:minmax(330px,420px) 1fr 50px}.brand img{width:auto;height:62px;max-width:100%}nav{gap:18px}h1{font-size:52px}.hero-content{grid-template-columns:1fr 240px}.about-grid{grid-template-columns:1fr}.service-grid{grid-template-columns:repeat(2,1fr)}.project-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.site-header{padding:8px 0}.nav-wrap{height:68px;grid-template-columns:1fr 44px;padding:5px 12px}.brand img{width:auto;height:52px;max-width:100%}.menu-btn{display:block}.nav-wrap nav{position:absolute;top:78px;left:18px;right:18px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:10px 18px;border:1px solid #183a54;border-radius:12px;background:rgba(1,10,20,.98)}.nav-wrap nav.open{display:flex}nav a{padding:11px}.hero{min-height:820px;height:auto}.hero-content{grid-template-columns:1fr;padding-top:140px;padding-bottom:130px}.hero-features{margin-top:45px;grid-template-columns:repeat(2,1fr);border-left:0;border-top:1px solid rgba(var(--accent-rgb),.7);padding:25px 0 0}.hero-copy h1{font-size:44px}.hero-copy p br{display:none}.service-grid,.project-grid{grid-template-columns:1fr}.projects-head{align-items:flex-start;gap:20px;flex-direction:column}.about{padding:55px 0}.shell{width:min(100% - 28px,var(--max))}}


@media (max-width: 1050px) {
  .about-grid-intro {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .nav-section {
    scroll-margin-top: 92px;
  }

  .about-highlight {
    min-height: 140px;
    padding: 24px;
  }
}

body.contact-page .contact-logo-frame {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .46);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), .09), transparent 72%),
    rgba(1, 8, 16, .74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025),
    0 0 18px rgba(var(--accent-rgb), .055);
}

body.contact-page .contact-logo-frame .contact-logo-image {
  display: block;
  width: 90px;
  height: 90px;
  max-width: 90px;
  flex: none;
  object-fit: contain;
  object-position: center;
}

body.contact-page .contact-action.btn.equal-choice {
  min-height: 56px;
  height: 56px;
  border-radius: 6px;
  gap: 11px;
  padding-inline: 20px;
  font-size: 13px;
  font-weight: 650;
}

body.contact-page .contact-action.contact-action-primary svg {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  stroke-width: 1.75;
}

body.contact-page .contact-action.contact-action-secondary svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}

body.contact-page .contact-action.btn.equal-choice.is-copied {
  border-color: #55d995 !important;
  color: #dfffee !important;
  background: rgba(85, 217, 149, .10) !important;
}

html[data-contrast="high"] body.contact-page .contact-logo-frame {
  border-color: var(--accent);
  background: #020914;
}

@media (max-width: 760px) {
  body.contact-page .contact-person {
    align-items: flex-start;
  }

  body.contact-page .contact-logo-frame {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
    border-radius: 15px;
  }

  body.contact-page .contact-logo-frame .contact-logo-image {
    width: 76px;
    height: 76px;
    max-width: 76px;
  }

  body.contact-page .contact-action.btn.equal-choice {
    width: 100%;
    min-height: 56px;
    height: auto;
    padding-block: 12px;
  }
}

/* Na strani Kontakt je aktivna povezava polno poudarjena, lebdenje nad drugo
   povezavo pa je namenoma svetlejše in z nekoliko krajšo črto. */
@media (hover: hover) {
  body.contact-page .nav-wrap nav a:not(.active):hover {
    color: #f2f7fb;
  }

  body.contact-page .nav-wrap nav a:not(.active):hover::after {
    left: 18%;
    right: 18%;
    opacity: .56;
    box-shadow: 0 0 5px rgba(var(--accent-rgb), .45);
  }
}

body.contact-page .nav-wrap nav a.active {
  color: var(--accent);
  font-weight: 650;
}

body.contact-page .nav-wrap nav a.active::after {
  left: 0;
  right: 0;
  opacity: 1;
}

/* Namizno razmerje kartic je eksplicitno 60 : 40. */
body.contact-page .contact-pro-grid {
  grid-template-columns: minmax(0, 3fr) minmax(330px, 2fr);
  gap: 26px;
  align-items: stretch;
}

body.contact-page .contact-identity,
body.contact-page .contact-guidance {
  min-width: 0;
}

/* Novi dejanji sta dovolj veliki za miško, dotik in uporabo s tipkovnico. */
body.contact-page .contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

body.contact-page .contact-action {
  min-height: 52px;
  border: 1px solid rgba(var(--accent-rgb), .48);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  color: #eef7fd;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease,
              box-shadow .16s ease, transform .16s ease;
}

body.contact-page .contact-action svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.contact-page .contact-action-primary {
  border-color: var(--accent);
  background: linear-gradient(
    180deg,
    hsl(var(--accent-h) 100% 57%),
    hsl(var(--accent-h) 100% 40%)
  );
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), .12);
}

body.contact-page .contact-action-secondary {
  background: rgba(var(--accent-rgb), .045);
}

body.contact-page .contact-action:hover,
body.contact-page .contact-action:focus-visible {
  border-color: hsl(var(--accent-h) 100% 68%);
  background-color: rgba(var(--accent-rgb), .10);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), .10);
  transform: translateY(-1px);
}

body.contact-page .contact-action.is-copied {
  border-color: #55d995;
  color: #dfffee;
  background: rgba(85, 217, 149, .10);
}

body.contact-page .contact-action:disabled {
  cursor: wait;
  opacity: .82;
}

/* Besedilo je namenjeno bralnikom zaslona; vidno potrdilo je sprememba napisa
   na gumbu »Kopiraj naslov« v »Kopirano«. */
body.contact-page .contact-copy-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Alineje uporabljajo lastno, enotno piko in dovolj notranjega prostora.
   Ločilna črta zato ne more sekati besedila ali vizualnega označevalnika. */
body.contact-page .contact-guidance .clean-list {
  margin-top: 18px;
}

body.contact-page .contact-guidance .clean-list li {
  position: relative;
  padding: 13px 0 13px 24px;
  border-bottom: 1px solid rgba(75, 121, 157, .22);
}

body.contact-page .contact-guidance .clean-list li::before {
  content: "";
  position: absolute;
  top: 1.08em;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(var(--accent-rgb), .88);
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .18);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .28);
}

body.contact-page .contact-guidance .clean-list li:last-child {
  border-bottom: 0;
}

/* CTA doda vsebinsko težo, spodnji odmik pa je lahko kompaktnejši. */
body.contact-page main.subpage > .content-section {
  padding-bottom: 40px;
}

@media (max-width: 1050px) {
  body.contact-page .contact-pro-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  body.contact-page .contact-actions {
    grid-template-columns: 1fr;
  }

  body.contact-page .contact-action {
    width: 100%;
  }
}

html[data-contrast="high"] body.contact-page .contact-action-secondary {
  border-color: #fff;
  color: #fff;
}

html[data-motion="reduced"] body.contact-page .contact-action,
html[data-motion="reduced"] body.contact-page .contact-action:hover {
  transform: none;
}


html { scroll-behavior: smooth; }
body { min-height: 100vh; }

.home-hero { min-height: 770px; }
.hero-features a {
  display:flex;
  align-items:center;
  gap:18px;
  text-decoration:none;
  color:#d7e0e9;
}
.hero-features a:hover { color:#fff; }
.hero-features a:hover i { filter:brightness(1.25); }

.home-about .service-grid article a {
  display:inline-block;
  margin-top:14px;
  color:var(--blue);
  text-decoration:none;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.subpage {
  min-height: calc(100vh - 120px);
  padding-top: 110px;
  background:
    radial-gradient(circle at 70% 4%, rgba(12,90,155,.16), transparent 30rem),
    var(--bg);
}

.page-hero {
  padding: 76px 0 58px;
  border-bottom: 1px solid #102b42;
  background:
    linear-gradient(180deg, rgba(7,31,54,.42), rgba(2,9,20,.8)),
    url("hero-bg.webp?v=1.8.2") center 58% / cover no-repeat;
}

.page-hero h1 {
  font-size: clamp(42px, 5vw, 72px);
  margin: 14px 0 18px;
  line-height: 1.05;
}

.page-lead {
  max-width: 760px;
  margin: 0;
  color: #ced9e4;
  font-size: 18px;
}

.breadcrumb {
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:26px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.breadcrumb a { color:#8fa5b8; text-decoration:none; }
.breadcrumb a:hover { color:var(--blue); }
.breadcrumb span[aria-current="page"] { color:#dce8f2; }
.breadcrumb .sep { color:#47718f; }

.content-section {
  padding: 72px 0;
  border-bottom: 1px solid #102b42;
  background: #020914;
}
.content-section.alt {
  background: linear-gradient(180deg,#03101c,#020914);
}

.content-grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:34px;
  align-items:start;
}

.content-card,
.info-panel,
.detail-card,
.project-detail {
  border:1px solid #17364d;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(5,19,32,.94),rgba(2,10,18,.96));
  box-shadow:0 18px 55px rgba(0,0,0,.18);
}

.content-card { padding:34px; }
.content-card h2,
.info-panel h3,
.detail-card h2,
.project-detail h2 { margin-top:8px; }

.content-card p,
.info-panel p,
.detail-card p,
.project-detail p { color:#b9c7d3; }

.info-panel { padding:28px; }

.clean-list {
  list-style:none;
  padding:0;
  margin:16px 0 0;
}
.clean-list li {
  padding:10px 0;
  border-bottom:1px solid rgba(75,121,157,.18);
  color:#c6d2dd;
}
.clean-list li:last-child { border-bottom:0; }

.step-grid,
.service-detail-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:32px;
}
.step-grid article {
  border:1px solid #17364d;
  border-radius:12px;
  padding:26px;
  background:#04101c;
}
.step-grid b {
  color:var(--blue);
  font-size:12px;
  letter-spacing:.1em;
}
.step-grid h3 { margin:8px 0; }
.step-grid p { margin:0; color:#aebdca; }

.detail-card {
  padding:30px;
  scroll-margin-top:120px;
}
.detail-card .ico { font-size:44px; }
.detail-card h2 { font-size:22px; }

.project-detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.project-detail {
  overflow:hidden;
}
.project-detail img {
  width:100%;
  aspect-ratio:1.9;
  object-fit:cover;
  display:block;
}
.project-detail > div { padding:22px; }

.tag {
  display:inline-block;
  padding:4px 7px;
  background:#0c4b82;
  color:#d9efff;
  border-radius:3px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.contact-page-grid {
  display:grid;
  grid-template-columns:1fr .7fr;
  gap:24px;
}
.contact-mail {
  display:inline-block;
  margin-top:14px;
  font-size:clamp(26px,3.3vw,44px);
  color:var(--blue);
  text-decoration:none;
  border-bottom:1px solid var(--blue);
}

.back-section {
  padding:32px 0 56px;
  background:#01070e;
}
.back-link {
  color:#9fcaf0;
  text-decoration:none;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.06em;
}
.back-link:hover { color:#fff; }

.footer-grid {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:end;
}
.footer-grid span { color:#71879a; }

.page-404 {
  min-height:calc(100vh - 225px);
  display:flex;
  align-items:center;
}
.page-404 .actions { margin-top:28px; }
button.btn { color:inherit; cursor:pointer; }


@media(max-width:1050px){
  .step-grid,.service-detail-grid { grid-template-columns:repeat(2,1fr); }
  .content-grid,.contact-page-grid { grid-template-columns:1fr; }
}

@media(max-width:760px){
  .subpage { padding-top:82px; }
  .page-hero { padding:58px 0 44px; }
  .page-hero h1 { font-size:42px; }
  .page-lead { font-size:16px; }
  .step-grid,.service-detail-grid,.project-detail-grid { grid-template-columns:1fr; }
  .footer-grid { flex-direction:column; align-items:flex-start; }
}


/* Domača stran je zdaj namenski landing page:
   HERO + navigacija + footer. Vsebina O MENI in PROJEKTI je na podstraneh. */
.home-hero {
  min-height: 100svh;
}

/* Footer domače strani ostane diskreten in ločen od glavne predstavitve. */
body > footer {
  margin-top: 0;
}


/* Hero ima nekoliko več vizualne teže, brez prenatrpanosti. */
.home-hero {
  min-height: calc(100svh - 112px);
}

.home-hero .hero-content {
  padding-top: 92px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .55fr);
  gap: 80px;
}

.home-hero .hero-copy {
  max-width: 760px;
}

.home-hero h1 {
  font-size: clamp(64px, 5.2vw, 88px);
  line-height: 1.04;
}

.home-hero .hero-copy p {
  font-size: 19px;
  max-width: 660px;
}

.home-hero .btn {
  height: 54px;
  padding: 0 25px;
  font-size: 14px;
}

.home-hero .hero-features {
  padding-left: 38px;
  gap: 28px;
}

.home-hero .hero-features a {
  font-size: 15px;
}

.home-hero .hero-features i {
  font-size: 30px;
}

/* Logo je nekoliko izrazitejši, brez spreminjanja proporcev. */
.site-header .brand img {
  height: 76px;
}

/* Horizontalni capabilities pas nadomesti praznino spodaj,
   ne da bi vračali dolge vsebinske sekcije. */
.capability-strip {
  border-top: 1px solid rgba(32, 91, 135, .38);
  border-bottom: 1px solid rgba(32, 91, 135, .28);
  background:
    linear-gradient(180deg, rgba(3, 14, 25, .98), rgba(2, 9, 17, .98));
  box-shadow: inset 0 1px 0 rgba(22, 143, 231, .04);
}

.capability-strip-inner {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}

.capability-strip a {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  text-decoration: none;
  color: #b7c6d4;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
  border-right: 1px solid rgba(39, 97, 139, .22);
  transition: .2s ease;
}

.capability-strip a:first-child {
  border-left: 1px solid rgba(39, 97, 139, .22);
}

.capability-strip a:hover {
  color: #fff;
  background: rgba(9, 43, 70, .34);
}

.cap-ico {
  min-width: 28px;
  color: var(--blue);
  font-size: 20px;
  line-height: 1;
  text-align: center;
  text-transform: none;
  font-family: "Segoe UI", Arial, sans-serif;
}

.capability-strip a:hover .cap-ico {
  text-shadow: 0 0 14px rgba(var(--accent-rgb),.7);
}

/* Footer naj bo manj vizualno oddaljen od landing dela. */
body > footer {
  padding-top: 24px;
}

@media (max-width: 1050px) {
  .home-hero .hero-content {
    grid-template-columns: 1fr 260px;
    gap: 44px;
  }

  .home-hero h1 {
    font-size: clamp(56px, 6vw, 74px);
  }

  .capability-strip-inner {
    grid-template-columns: repeat(3, 1fr);
  }

  .capability-strip a:nth-child(3n) {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  .site-header .brand img {
    height: 56px;
  }

  .home-hero {
    min-height: auto;
  }

  .home-hero .hero-content {
    grid-template-columns: 1fr;
    padding-top: 138px;
    padding-bottom: 82px;
  }

  .home-hero h1 {
    font-size: clamp(42px, 12vw, 58px);
  }

  .home-hero .hero-features {
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(var(--accent-rgb),.7);
    grid-template-columns: repeat(2, 1fr);
  }

  .capability-strip-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .capability-strip a {
    min-height: 74px;
    font-size: 11px;
  }

  .capability-strip a:nth-child(odd) {
    border-left: 1px solid rgba(39, 97, 139, .22);
  }
}

.principle-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:30px;
}
.principle-grid article {
  padding:26px;
  border:1px solid #17364d;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(5,19,32,.94),rgba(2,10,18,.96));
}
.principle-grid h3 { margin:0 0 10px; }
.principle-grid p { margin:0; color:#aebdca; }

.mini-list {
  margin:18px 0 0;
  padding:16px 0 0;
  border-top:1px solid rgba(59,116,158,.22);
  list-style:none;
}
.mini-list li {
  position:relative;
  padding:5px 0 5px 18px;
  color:#9fb2c2;
  font-size:13px;
}
.mini-list li::before {
  content:"";
  position:absolute;
  left:0;
  top:12px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 9px rgba(var(--accent-rgb),.65);
}

.case-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.case-card {
  overflow:hidden;
  border:1px solid #17364d;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(5,19,32,.96),rgba(2,10,18,.98));
}
.case-card img {
  display:block;
  width:100%;
  aspect-ratio:2.25;
  object-fit:cover;
  border-bottom:1px solid #17364d;
}
.case-body { padding:26px; }
.case-body h2 { margin:12px 0 20px; font-size:24px; }
.case-body dl { margin:0; }
.case-body dt {
  margin-top:15px;
  color:var(--blue);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.case-body dd {
  margin:5px 0 0;
  color:#b8c7d4;
  line-height:1.65;
}
.privacy-note {
  margin:28px 0 0;
  padding:18px 20px;
  border-left:2px solid var(--blue);
  background:rgba(5,24,39,.72);
  color:#91a6b7;
  font-size:13px;
}

@media(max-width:1050px){
  .principle-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:760px){
  .principle-grid,.case-grid { grid-template-columns:1fr; }
}


.profile-choice-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.profile-choice {
  position:relative;
  overflow:hidden;
  min-height:430px;
  padding:34px;
  border:1px solid #17364d;
  border-radius:16px;
  background:
    radial-gradient(circle at 85% 15%, rgba(var(--accent-rgb),.10), transparent 18rem),
    linear-gradient(180deg,rgba(5,19,32,.96),rgba(2,10,18,.98));
  box-shadow:0 20px 60px rgba(0,0,0,.20);
}

.profile-choice::after {
  content:"";
  position:absolute;
  right:-90px;
  bottom:-100px;
  width:240px;
  height:240px;
  border:1px solid rgba(var(--accent-rgb),.15);
  border-radius:50%;
}

.profile-choice-icon {
  color:var(--blue);
  font-size:50px;
  margin-bottom:18px;
  text-shadow:0 0 24px rgba(var(--accent-rgb),.25);
}

.profile-choice h2 {
  margin:9px 0 14px;
  font-size:30px;
}

.profile-choice p {
  color:#b9c7d3;
  max-width:610px;
}

.profile-choice .mini-list {
  margin-bottom:28px;
}

.profile-cta {
  position:relative;
  z-index:2;
  margin-top:10px;
}

.personal-choice {
  background:
    radial-gradient(circle at 85% 15%, rgba(75,117,180,.12), transparent 18rem),
    linear-gradient(180deg,rgba(7,19,31,.96),rgba(2,10,18,.98));
}

@media(max-width:900px){
  .profile-choice-grid {
    grid-template-columns:1fr;
  }

  .profile-choice {
    min-height:0;
  }
}


.professional-intro-grid {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.65fr);
  gap:28px;
  align-items:stretch;
}
.professional-statement { padding:36px; }
.professional-statement h2 { max-width:800px; }
.lead-strong {
  font-size:18px;
  line-height:1.72;
  color:#d1dbe4 !important;
}
.expertise-panel {
  padding:28px;
  border:1px solid #17364d;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(4,18,30,.97),rgba(2,9,16,.98));
}
.expertise-item {
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  padding:15px 0;
  border-bottom:1px solid rgba(55,105,143,.2);
}
.expertise-item:last-child { border-bottom:0; }
.expertise-item > span {
  color:var(--blue);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px;
  padding-top:3px;
}
.expertise-item b { display:block; color:#e6eef5; font-size:14px; }
.expertise-item small {
  display:block;
  margin-top:4px;
  color:#8fa4b5;
  font-size:12px;
  line-height:1.5;
}
.section-intro {
  max-width:800px;
  color:#9fb1c0;
  margin-bottom:34px;
}
.career-timeline {
  position:relative;
  max-width:980px;
  margin-top:32px;
}
.career-timeline::before {
  content:"";
  position:absolute;
  left:104px;
  top:12px;
  bottom:12px;
  width:1px;
  background:linear-gradient(var(--blue),rgba(var(--accent-rgb),.12));
}
.career-timeline article {
  position:relative;
  display:grid;
  grid-template-columns:82px 20px 1fr;
  gap:13px;
  padding:0 0 32px;
}
.career-year {
  color:#7f95a7;
  text-align:right;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px;
  padding-top:4px;
}
.career-dot {
  position:relative;
  z-index:2;
  width:9px;
  height:9px;
  margin:5px auto 0;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.65);
}
.career-copy {
  padding:0 0 4px 13px;
}
.career-copy h3 { margin:0 0 6px; font-size:18px; }
.career-copy p { margin:0; color:#9fb1c0; line-height:1.65; }

.technology-matrix {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
  margin-top:28px;
}
.technology-matrix article {
  grid-column:span 2;
  padding:24px;
  border:1px solid #17364d;
  border-radius:12px;
  background:rgba(4,17,29,.72);
}
.technology-matrix article:nth-last-child(2) { grid-column:2 / span 2; }
.technology-matrix article:last-child { grid-column:4 / span 2; }
.technology-matrix h3 {
  margin:0 0 9px;
  color:#e5eef5;
  font-size:16px;
}
.technology-matrix p {
  margin:0;
  color:#8fa6b7;
  font-size:13px;
  line-height:1.65;
}
.competence-note {
  margin:20px 0 0;
  color:#6f879a;
  font-size:12px;
}

.education-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:28px;
}
.education-cards article {
  padding:26px;
  border:1px solid #17364d;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(5,19,32,.92),rgba(2,10,18,.94));
}
.edu-year {
  display:inline-block;
  margin-bottom:18px;
  color:var(--blue);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px;
  letter-spacing:.08em;
}
.education-cards h3 { margin:0 0 7px; font-size:19px; }
.education-cards p { margin:0; color:#91a6b7; }

.credential-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:28px;
}
.credential-card {
  padding:22px;
  min-height:180px;
  border:1px solid #17364d;
  border-radius:12px;
  background:rgba(4,17,29,.72);
}
.credential-card.featured {
  border-color:rgba(var(--accent-rgb),.38);
  background:
    radial-gradient(circle at 90% 10%,rgba(var(--accent-rgb),.09),transparent 10rem),
    rgba(4,17,29,.84);
}
.credential-card > span {
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:10px;
  font-weight:700;
}
.credential-card h3 {
  margin:12px 0 9px;
  font-size:16px;
  line-height:1.35;
}
.credential-card p {
  margin:0;
  color:#8fa4b5;
  font-size:12px;
  line-height:1.55;
}
.security-training {
  margin-top:18px;
  padding:22px 24px;
  border-left:2px solid var(--blue);
  background:rgba(4,18,30,.7);
}
.security-training h3 { margin:0 0 7px; font-size:15px; }
.security-training p { margin:0; color:#91a7b8; font-size:13px; }

.professional-close-box {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:34px;
  border:1px solid rgba(var(--accent-rgb),.28);
  border-radius:15px;
  background:
    radial-gradient(circle at 90% 20%,rgba(var(--accent-rgb),.10),transparent 20rem),
    linear-gradient(180deg,rgba(5,20,33,.96),rgba(2,10,18,.98));
}
.professional-close-box h2 { margin:8px 0 10px; }
.professional-close-box p { max-width:780px; margin:0; color:#9eb1c0; }
.professional-close-actions {
  display:flex;
  gap:10px;
  flex:0 0 auto;
}

@media(max-width:1050px){
  .professional-intro-grid { grid-template-columns:1fr; }
  .technology-matrix { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .technology-matrix article,
  .technology-matrix article:nth-last-child(2),
  .technology-matrix article:last-child { grid-column:auto; }
  .credential-grid { grid-template-columns:repeat(2,1fr); }
  .education-cards { grid-template-columns:1fr; }
}
@media(max-width:760px){
  .technology-matrix,.credential-grid { grid-template-columns:1fr; }
  .career-timeline::before { left:70px; }
  .career-timeline article { grid-template-columns:52px 20px 1fr; }
  .professional-close-box { flex-direction:column; align-items:flex-start; }
  .professional-close-actions { flex-wrap:wrap; }
}


.interest-groups {
  display:grid;
  gap:14px;
  margin-top:18px;
}

.interest-groups section {
  padding:16px 18px;
  border:1px solid rgba(43,97,139,.24);
  border-radius:10px;
  background:rgba(4,17,29,.65);
}

.interest-groups span {
  display:block;
  margin-bottom:5px;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:10px;
  font-weight:700;
}

.interest-groups p {
  margin:0;
  color:#a8bac8;
  font-size:13px;
}

.personal-balance-box {
  max-width:900px;
  padding:30px 32px;
  border-left:2px solid var(--blue);
  border-radius:0 12px 12px 0;
  background:
    radial-gradient(circle at 90% 20%,rgba(var(--accent-rgb),.08),transparent 18rem),
    rgba(4,18,30,.76);
}

.personal-balance-box p {
  margin:0 0 14px;
  color:#a9bccb;
  font-size:16px;
  line-height:1.75;
}

.personal-balance-box p:last-child {
  margin-bottom:0;
}


.ai-section {
  background:
    radial-gradient(circle at 80% 15%, rgba(var(--accent-rgb),.08), transparent 28rem),
    #020914;
}

.ai-layout {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.7fr);
  gap:28px;
  align-items:start;
}

.ai-left-stack {
  display:grid;
  gap:16px;
  min-width:0;
}

.ai-copy {
  padding:34px;
  border:1px solid #17364d;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(5,19,32,.95),rgba(2,10,18,.98));
}

.ai-copy h2 {
  max-width:840px;
  margin:9px 0 16px;
}

.ai-copy p {
  color:#aebfcd;
  line-height:1.72;
}

.ai-principles {
  padding:28px;
  border:1px solid rgba(var(--accent-rgb),.28);
  border-radius:14px;
  background:
    radial-gradient(circle at 90% 10%,rgba(var(--accent-rgb),.10),transparent 15rem),
    rgba(3,15,26,.94);
}

.ai-point {
  display:grid;
  grid-template-columns:36px 1fr;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid rgba(52,105,145,.20);
}

.ai-point:last-child { border-bottom:0; }

.ai-point > span {
  color:var(--blue);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px;
  padding-top:3px;
}

.ai-point b {
  display:block;
  color:#e6eef5;
  font-size:14px;
}

.ai-point small {
  display:block;
  margin-top:4px;
  color:#8fa5b6;
  line-height:1.5;
}

.ai-use-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:0;
}

.ai-use-grid article {
  padding:20px;
  border:1px solid #17364d;
  border-radius:12px;
  background:rgba(4,17,29,.72);
}

.ai-use-grid h3 {
  margin:0 0 8px;
  font-size:15px;
  color:#e7eff6;
}

.ai-use-grid p {
  margin:0;
  color:#8fa5b6;
  font-size:13px;
  line-height:1.6;
}

.personal-ai-section {
  background:
    radial-gradient(circle at 20% 10%,rgba(var(--accent-rgb),.08),transparent 22rem),
    #020914;
}

.personal-ai-box {
  padding:28px 32px;
  border:1px solid rgba(var(--accent-rgb),.22);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(5,19,32,.92),rgba(2,10,18,.96));
}

.personal-ai-box h2 { margin:8px 0 14px; }

.personal-ai-box p {
  max-width:940px;
  color:#a9bccb;
  line-height:1.75;
}

@media(max-width:1100px){
  .ai-layout { grid-template-columns:1fr; }
  .ai-use-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:760px){
  .ai-use-grid { grid-template-columns:1fr; }
}


/* Privzeti profil ostaja modri. Barvni profili spreminjajo samo poudarke,
   ne celotne vizualne identitete ali kontrastnega sistema strani. */
:root,
:root[data-accent="blue"] {
  --accent:var(--accent);
  --accent-rgb:19,153,255;
}
:root[data-accent="green"] {
  --accent:#39ff88;
  --accent-rgb:57,255,136;
}
:root[data-accent="violet"] {
  --accent:#a879ff;
  --accent-rgb:168,121,255;
}
:root[data-accent="red"] {
  --accent:#ff4f64;
  --accent-rgb:255,79,100;
}

/* Združljivost z obstoječim CSS, ki uporablja --blue. */
:root { --blue:var(--accent); }

.accent-switcher {
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:12px;
  padding:6px 8px;
  border:1px solid rgba(120,150,175,.18);
  border-radius:999px;
  background:rgba(2,10,18,.72);
  backdrop-filter:blur(8px);
}
.accent-dot {
  width:13px;
  height:13px;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  cursor:pointer;
  opacity:.62;
  transition:transform .16s ease, opacity .16s ease, box-shadow .16s ease;
}
.accent-dot:hover,
.accent-dot:focus-visible { opacity:1; transform:scale(1.18); }
.accent-dot.is-selected {
  opacity:1;
  box-shadow:0 0 0 2px #06111c, 0 0 0 3px var(--accent), 0 0 12px rgba(var(--accent-rgb),.55);
}
.accent-blue { background:var(--accent); }
.accent-green { background:#39ff88; }
.accent-violet { background:#a879ff; }
.accent-red { background:#ff4f64; }

/* Barvni profil vpliva na poudarke, ne na semantiko opozoril. */
.section-label,
.cap-ico,
.edu-year,
.case-body dt,
.expertise-item > span,
.ai-point > span,
.credential-card > span,
.career-year + .career-dot,
.interest-groups span {
  color:var(--accent);
}
.career-dot { background:var(--accent); box-shadow:0 0 14px rgba(var(--accent-rgb),.65); }
.btn.primary {
  border-color:var(--accent);
  box-shadow:0 0 22px rgba(var(--accent-rgb),.12);
}
.btn.primary:hover { box-shadow:0 0 28px rgba(var(--accent-rgb),.25); }

/* Dostopnost tipkovnice */
a:focus-visible,
button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:5px;
}

/* Kontakt */
.contact-pro-grid {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.7fr);
  gap:24px;
}
.contact-identity,
.contact-guidance {
  padding:32px;
  border:1px solid #17364d;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(5,19,32,.95),rgba(2,10,18,.98));
}
.contact-person {
  display:flex;
  align-items:center;
  gap:16px;
  margin:28px 0 20px;
}
.contact-monogram {
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border:1px solid rgba(var(--accent-rgb),.42);
  border-radius:12px;
  color:var(--accent);
  font-weight:800;
  letter-spacing:.08em;
  background:rgba(var(--accent-rgb),.07);
}
.contact-person h3 { margin:0 0 4px; }
.contact-person p { margin:0; color:#8fa5b6; font-size:13px; }
.contact-mail {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:18px 20px;
  border:1px solid rgba(var(--accent-rgb),.26);
  border-radius:11px;
  text-decoration:none;
  background:rgba(var(--accent-rgb),.055);
}
.contact-mail span {
  color:#8298aa;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:10px;
}
.contact-mail strong { color:#e8f1f7; font-size:18px; }
.contact-mail:hover { border-color:rgba(var(--accent-rgb),.55); }
.contact-privacy {
  margin:18px 0 0;
  color:#71899b;
  font-size:12px;
  line-height:1.6;
}
.contact-security-note {
  margin-top:22px;
  padding:17px 18px;
  border-left:2px solid var(--accent);
  background:rgba(var(--accent-rgb),.045);
}
.contact-security-note b { color:#e6eef5; }
.contact-security-note p { margin:6px 0 0; color:#8fa5b6; font-size:12px; line-height:1.55; }

/* Manj gibanja za uporabnike, ki to zahtevajo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior:auto !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

@media(max-width:1050px){
  .contact-pro-grid { grid-template-columns:1fr; }
}
@media(max-width:760px){
  .accent-switcher { margin-left:auto; margin-right:8px; }
}


:root {
  --hero-image:url("hero-bg.webp?v=1.8.2");
  --theme-soft:rgba(var(--accent-rgb),.08);
  --theme-mid:rgba(var(--accent-rgb),.16);
  --theme-line:rgba(var(--accent-rgb),.28);
  --theme-glow:rgba(var(--accent-rgb),.38);
}

/* Hero background asset switches per theme */
.hero,
.home-hero,
.page-hero {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.20)),
    var(--hero-image) !important;
  background-size:cover !important;
  background-position:center !important;
}

/* UI surfaces gain a subtle theme glow rather than becoming brightly colored */
.nav-wrap,
.content-card,
.info-panel,
.detail-card,
.project-detail,
.case-card,
.profile-choice,
.ai-copy,
.ai-principles,
.contact-identity,
.contact-guidance,
.credential-card,
.technology-matrix article,
.education-cards article,
.principle-grid article,
.step-grid article {
  border-color:var(--theme-line) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(var(--accent-rgb),.025);
}

.nav-wrap {
  box-shadow:
    0 14px 40px rgba(0,0,0,.22),
    0 0 26px rgba(var(--accent-rgb),.04);
}

/* Buttons fully inherit the selected color profile */
.btn.primary {
  background:
    linear-gradient(180deg,
      rgba(var(--accent-rgb),.98),
      rgba(var(--accent-rgb),.68)) !important;
  color:#fff !important;
  border-color:rgba(var(--accent-rgb),.90) !important;
}

.btn.secondary,
.mini-btn {
  border-color:rgba(var(--accent-rgb),.58) !important;
  color:var(--accent) !important;
  background:rgba(var(--accent-rgb),.045) !important;
}

.btn.secondary:hover,
.mini-btn:hover {
  background:rgba(var(--accent-rgb),.11) !important;
}

/* Lines / selection / navigation */
nav a::after,
.line,
.highlight-line {
  background:var(--accent) !important;
  box-shadow:0 0 12px rgba(var(--accent-rgb),.70) !important;
}

nav a.active,
nav a:hover,
.contact-mail,
.back-link,
.tag,
.prompt,
.ok {
  color:var(--accent) !important;
}

/* Icons and glow */
.ico,
.feature-icon,
.hero-features i,
.profile-choice-icon,
.card-icon,
.cap-ico {
  color:var(--accent) !important;
  text-shadow:0 0 18px rgba(var(--accent-rgb),.20);
}

/* Capability strip */
.capability-strip {
  border-top-color:rgba(var(--accent-rgb),.26) !important;
  border-bottom-color:rgba(var(--accent-rgb),.18) !important;
  box-shadow:inset 0 1px 0 rgba(var(--accent-rgb),.05) !important;
}
.capability-strip a:hover {
  background:rgba(var(--accent-rgb),.09) !important;
}

/* Terminal */
.terminal {
  border-color:rgba(var(--accent-rgb),.38) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.28), 0 0 30px rgba(var(--accent-rgb),.05);
}
.terminal-top {
  border-bottom-color:rgba(var(--accent-rgb),.16) !important;
}

/* Decorative dots / borders / markers */
.career-timeline::before {
  background:linear-gradient(var(--accent),rgba(var(--accent-rgb),.10)) !important;
}
.case-card img,
.project-detail img {
  border-bottom-color:rgba(var(--accent-rgb),.22) !important;
}

/* Theme-specific atmospheric tint */
:root[data-accent="blue"] body {
  background:
    radial-gradient(circle at 52% 5%, rgba(var(--accent-rgb),.055), transparent 34rem),
    #020914;
}
:root[data-accent="green"] body {
  background:
    radial-gradient(circle at 52% 5%, rgba(57,255,136,.045), transparent 34rem),
    #020b0a;
}
:root[data-accent="violet"] body {
  background:
    radial-gradient(circle at 52% 5%, rgba(168,121,255,.055), transparent 34rem),
    #070712;
}
:root[data-accent="red"] body {
  background:
    radial-gradient(circle at 52% 5%, rgba(255,79,100,.05), transparent 34rem),
    #0b0508;
}

/* Header remains dark but gets a subtle hue */
:root[data-accent="green"] .nav-wrap { background:rgba(1,13,11,.84) !important; }
:root[data-accent="violet"] .nav-wrap { background:rgba(8,6,17,.84) !important; }
:root[data-accent="red"] .nav-wrap { background:rgba(15,5,8,.84) !important; }

/* Preserve semantic warning/safety colors when required by content:
   the profile color decorates the frame, not meaning. */


[data-theme-project] {
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:center;
  background:#020914;
  transition:opacity .16s ease, filter .16s ease;
}

.project-detail:hover [data-theme-project],
.case-card:hover [data-theme-project] {
  filter:brightness(1.035) contrast(1.025);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme-project] { transition:none; }
}


.case-card,
.project-detail {
  overflow:hidden !important;
}

.case-card [data-theme-project],
.project-detail [data-theme-project] {
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 9 !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(var(--accent-rgb),.24) !important;
  background:#020914 !important;
}

.case-body,
.project-detail > div {
  position:relative;
  z-index:2;
  background:linear-gradient(
    180deg,
    rgba(3,15,26,.995),
    rgba(2,10,18,.995)
  ) !important;
}

/* Brez "naslova znotraj slike": naslov obstaja samo kot HTML pod sliko. */
.case-card [data-theme-project] + .case-body,
.project-detail [data-theme-project] + div {
  margin-top:0 !important;
}

/* Mehkejši prehod barvnega profila, brez spremembe velikosti ali layouta. */
[data-theme-project] {
  transition:opacity .14s ease, filter .14s ease !important;
}

.case-card:hover [data-theme-project],
.project-detail:hover [data-theme-project] {
  filter:brightness(1.025) contrast(1.02) !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme-project] {
    transition:none !important;
  }
}


.image-icon-wrap {
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  min-height:92px;
}

.image-icon {
  display:block;
  width:68px;
  height:68px;
  object-fit:contain;
  filter:
    drop-shadow(0 0 18px rgba(var(--accent-rgb), .15))
    drop-shadow(0 0 26px rgba(var(--accent-rgb), .10));
}

.profile-choice .image-icon {
  width:78px;
  height:78px;
}

.capability-card .image-icon,
.feature-card .image-icon,
.service-card .image-icon {
  width:64px;
  height:64px;
}

/* Ikone ostanejo optično poravnane z obstoječo postavitvijo */
.profile-choice .image-icon-wrap,
.feature-card .image-icon-wrap,
.service-card .image-icon-wrap,
.card-icon.image-icon-wrap,
.profile-choice-icon.image-icon-wrap,
.feature-icon.image-icon-wrap {
  margin-bottom:14px;
}

/* Blag poudarek ob hoverju */
.profile-choice:hover .image-icon,
.feature-card:hover .image-icon,
.service-card:hover .image-icon,
.card:hover .image-icon {
  filter:
    brightness(1.05)
    drop-shadow(0 0 20px rgba(var(--accent-rgb), .18))
    drop-shadow(0 0 32px rgba(var(--accent-rgb), .12));
}

@media (max-width: 760px) {
  .profile-choice .image-icon {
    width:72px;
    height:72px;
  }

  .capability-card .image-icon,
  .feature-card .image-icon,
  .service-card .image-icon,
  .image-icon {
    width:58px;
    height:58px;
  }
}

.image-icon-wrap{display:flex!important;align-items:center!important;justify-content:flex-start!important;min-height:86px;margin-bottom:12px!important}.image-icon{display:block;width:84px;height:84px;object-fit:contain;object-position:center}.profile-choice .image-icon{width:94px;height:94px}.detail-card .image-icon{width:88px;height:88px}.hero-feature-image{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px}.hero-feature-image img{width:40px;height:40px;object-fit:contain;display:block}.cap-ico.cap-image{display:grid;place-items:center;width:30px;min-width:30px;height:30px}.cap-ico.cap-image img{width:28px;height:28px;object-fit:contain;display:block}.image-icon,.hero-feature-image img,.cap-image img{filter:drop-shadow(0 0 12px rgba(var(--accent-rgb),.18)) drop-shadow(0 0 22px rgba(var(--accent-rgb),.10))}.profile-choice:hover .image-icon,.detail-card:hover .image-icon,.hero-features a:hover img,.capability-strip a:hover img{filter:brightness(1.06) drop-shadow(0 0 15px rgba(var(--accent-rgb),.28)) drop-shadow(0 0 26px rgba(var(--accent-rgb),.15))}@media(max-width:760px){.profile-choice .image-icon{width:82px;height:82px}.detail-card .image-icon{width:76px;height:76px}.hero-feature-image{width:36px;height:36px;flex-basis:36px}.hero-feature-image img{width:34px;height:34px}}


.image-icon-wrap {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:84px;
  margin-bottom:12px !important;
}

.image-icon {
  display:block;
  width:84px;
  height:84px;
  object-fit:contain;
}

.profile-choice .image-icon {
  width:94px;
  height:94px;
}

.detail-card .image-icon {
  width:88px;
  height:88px;
}

.hero-feature-image {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
}

.hero-feature-image img {
  width:40px;
  height:40px;
  object-fit:contain;
}

.cap-ico.cap-image {
  display:grid;
  place-items:center;
  width:32px;
  min-width:32px;
  height:32px;
}

.cap-ico.cap-image img {
  width:30px;
  height:30px;
  object-fit:contain;
}

.btn-with-icon {
  display:inline-flex !important;
  align-items:center;
  gap:9px;
}

.btn-icon {
  width:25px;
  height:25px;
  object-fit:contain;
  flex:0 0 25px;
}

.image-icon,
.hero-feature-image img,
.cap-image img,
.btn-icon {
  filter:
    drop-shadow(0 0 12px rgba(var(--accent-rgb), .18))
    drop-shadow(0 0 22px rgba(var(--accent-rgb), .10));
}

@media(max-width:760px) {
  .profile-choice .image-icon {
    width:82px;
    height:82px;
  }

  .detail-card .image-icon {
    width:76px;
    height:76px;
  }

  .hero-feature-image {
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .hero-feature-image img {
    width:34px;
    height:34px;
  }
}


.page-actions {
  margin-top: 24px;
  flex-wrap: wrap;
}

.lab-hero-actions {
  margin-bottom: 4px;
}

.back-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.back-actions .btn,
.page-actions .btn {
  min-width: 220px;
  justify-content: center;
}

@media (max-width: 760px) {
  .page-actions,
  .back-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .page-actions .btn,
  .back-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


.btn-with-icon {
  gap: 12px !important;
}

.btn-with-icon .btn-icon,
.btn.btn-with-icon .btn-icon,
a.btn .btn-icon,
button.btn .btn-icon {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  object-fit: contain !important;
}

.btn.btn-with-icon,
a.btn.btn-with-icon,
button.btn.btn-with-icon {
  min-height: 64px;
  padding-left: 18px;
  padding-right: 22px;
}

.actions .btn.btn-with-icon {
  min-width: 190px;
}

@media (max-width: 760px) {
  .btn-with-icon .btn-icon,
  .btn.btn-with-icon .btn-icon,
  a.btn .btn-icon,
  button.btn .btn-icon {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .btn.btn-with-icon,
  a.btn.btn-with-icon,
  button.btn.btn-with-icon {
    min-height: 58px;
  }
}


.btn-with-icon {
  gap: 16px !important;
}

.btn-with-icon .btn-icon,
.btn.btn-with-icon .btn-icon,
a.btn .btn-icon,
button.btn .btn-icon {
  width: 100px !important;
  height: 100px !important;
  flex: 0 0 100px !important;
  object-fit: contain !important;
}

.btn.btn-with-icon,
a.btn.btn-with-icon,
button.btn.btn-with-icon {
  min-height: 118px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 18px !important;
  padding-right: 24px !important;
}

.actions .btn.btn-with-icon,
.page-actions .btn.btn-with-icon,
.back-actions .btn.btn-with-icon {
  min-width: 260px !important;
  justify-content: center !important;
}

@media (max-width: 760px) {
  .btn-with-icon {
    gap: 12px !important;
  }

  .btn-with-icon .btn-icon,
  .btn.btn-with-icon .btn-icon,
  a.btn .btn-icon,
  button.btn .btn-icon {
    width: 72px !important;
    height: 72px !important;
    flex-basis: 72px !important;
  }

  .btn.btn-with-icon,
  a.btn.btn-with-icon,
  button.btn.btn-with-icon {
    min-height: 90px !important;
  }

  .actions .btn.btn-with-icon,
  .page-actions .btn.btn-with-icon,
  .back-actions .btn.btn-with-icon {
    min-width: 100% !important;
  }
}


/* CTA gumbi – zmanjšanje ikon iz 100 na 76 px. */
.btn-with-icon .btn-icon,
.btn.btn-with-icon .btn-icon,
a.btn .btn-icon,
button.btn .btn-icon {
  width: 76px !important;
  height: 76px !important;
  flex: 0 0 76px !important;
}

/* Splošni gumbi ostanejo dovolj visoki, vendar ne delujejo kot kartice. */
.btn.btn-with-icon,
a.btn.btn-with-icon,
button.btn.btn-with-icon {
  min-height: 92px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 18px !important;
  padding-right: 22px !important;
  gap: 14px !important;
}

/* Domača stran: oba glavna CTA gumba sta popolnoma enake velikosti. */
.home-hero .actions {
  align-items: stretch;
}

.home-hero .actions .btn.btn-with-icon {
  width: 282px !important;
  min-width: 282px !important;
  height: 92px !important;
  min-height: 92px !important;
  justify-content: flex-start !important;
}

.home-hero .actions .btn.btn-with-icon .btn-icon {
  margin-left: 2px;
}

/* Besedilo CTA gumba ostane optično na sredini. */
.home-hero .actions .btn.btn-with-icon {
  line-height: 1.2;
}

/* Desni sklop Varnost / Razvoj / Infrastruktura / Rešitve:
   povečanje slikovnih ikon za približno 35 %. */
.home-hero .hero-feature-image {
  width: 57px !important;
  height: 57px !important;
  flex: 0 0 57px !important;
}

.home-hero .hero-feature-image img {
  width: 54px !important;
  height: 54px !important;
}

/* Rahlo večji razmik za bolj zračen premium videz. */
.home-hero .hero-features a {
  gap: 20px !important;
}

.home-hero .hero-features {
  gap: 27px !important;
}

/* Mobilno: ohranimo ravnotežje in ne pretiravamo z velikostjo. */
@media (max-width: 760px) {
  .btn-with-icon .btn-icon,
  .btn.btn-with-icon .btn-icon,
  a.btn .btn-icon,
  button.btn .btn-icon {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
  }

  .btn.btn-with-icon,
  a.btn.btn-with-icon,
  button.btn.btn-with-icon {
    min-height: 76px !important;
  }

  .home-hero .actions .btn.btn-with-icon {
    width: 100% !important;
    min-width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;
  }

  .home-hero .hero-feature-image {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  .home-hero .hero-feature-image img {
    width: 44px !important;
    height: 44px !important;
  }
}


/* Enotna višina in vertikalni ritem hero sekcij podstrani. */
.subpage .page-hero {
  min-height: 360px;
  display: flex;
  align-items: center;
}

.subpage .page-hero > .shell {
  width: min(var(--max), calc(100% - 42px));
}

/* Domača CTA gumba – jasna hierarhija, sekundarni je bolj čitljiv. */
.home-hero .actions .btn {
  font-weight: 600;
  letter-spacing: .025em;
}

.home-hero .actions .btn.secondary {
  color: #bfe2ff !important;
  border-color: rgba(var(--accent-rgb), .72) !important;
  background: rgba(1, 10, 20, .66) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .05);
}

.home-hero .actions .btn.secondary:hover {
  color: #fff !important;
  background: rgba(var(--accent-rgb), .10) !important;
}

/* Enoten povratni gumb. */
.back-section {
  padding: 34px 0 54px;
}

.btn-back {
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 18px !important;
  min-width: 0 !important;
  width: auto !important;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.back-arrow {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(var(--accent-rgb), .38);
  border-radius: 50%;
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
}

/* Kontakt – področja sodelovanja. */
.contact-collaboration {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), .035);
}

.contact-collaboration > span {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  font-weight: 700;
}

.contact-collaboration p {
  margin: 0;
  color: #9eb1c0;
  font-size: 13px;
  line-height: 1.65;
}

/* Premium mikro-interakcija kartic. */
.detail-card,
.profile-choice {
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.detail-card:hover,
.profile-choice:hover {
  border-color: rgba(var(--accent-rgb), .42) !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 58px rgba(0,0,0,.22), 0 0 26px rgba(var(--accent-rgb), .045);
}

@media (max-width: 760px) {
  .subpage .page-hero {
    min-height: 310px;
  }

  .btn-back {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-card,
  .profile-choice {
    transform: none !important;
  }
}


.site-header .nav-wrap > .brand {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-width:0 !important;
  width:auto !important;
  height:100% !important;
  padding:0 !important;
  text-decoration:none !important;
  overflow:hidden !important;
}

.site-header .nav-wrap > .brand::after {
  display:none !important;
  content:none !important;
}

.site-header .nav-wrap > .brand img {
  display:block !important;
  width:auto !important;
  height:70px !important;
  max-width:100% !important;
  max-height:70px !important;
  object-fit:contain !important;
  object-position:left center !important;
  flex:0 1 auto !important;
}

@media(max-width:1050px) {
  .site-header .nav-wrap > .brand img {
    height:62px !important;
    max-height:62px !important;
  }
}

@media(max-width:760px) {
  .site-header .nav-wrap > .brand img {
    height:52px !important;
    max-height:52px !important;
  }
}


:root {
  --accent-h:205;
  --accent:hsl(var(--accent-h) 100% 54%);
  --accent-soft:hsl(var(--accent-h) 100% 68%);
  --accent-rgb:19,153,255;
  --theme-hue-rotate:0deg;
  --theme-bg:#020914;
  --theme-bg2:#04111e;
  --blue:var(--accent);
}

/* Temna baza ostane profesionalna, barvni odtenek je samo atmosferski. */
body {
  background:
    radial-gradient(circle at 52% 5%, rgba(var(--accent-rgb), .045), transparent 34rem),
    var(--theme-bg) !important;
}

/* Hero ozadje je ločena plast, zato ga lahko zvezno prebarvamo. */
.hero,
.page-hero {
  position:relative !important;
  background:none !important;
  overflow:hidden;
}

.theme-hero-bg {
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22)),
    url("hero-bg.webp?v=1.8.2") center 48% / cover no-repeat;
  filter:hue-rotate(var(--theme-hue-rotate));
  transform:scale(1.002);
  transform-origin:center;
  pointer-events:none;
}

.hero > :not(.theme-hero-bg),
.page-hero > :not(.theme-hero-bg) {
  position:relative;
  z-index:2;
}

/* Logo, projektne slike in generirane ikone sledijo istemu tonu.
   Sivi/beli/kovinski deli ostanejo optično nevtralni. */
[data-theme-logo],
[data-theme-project],
[data-theme-icon] {
  filter:
    hue-rotate(var(--theme-hue-rotate))
    drop-shadow(0 0 10px rgba(var(--accent-rgb), .09)) !important;
}

.case-card:hover [data-theme-project],
.project-detail:hover [data-theme-project],
.profile-choice:hover [data-theme-icon],
.detail-card:hover [data-theme-icon] {
  filter:
    hue-rotate(var(--theme-hue-rotate))
    brightness(1.04)
    contrast(1.02)
    drop-shadow(0 0 14px rgba(var(--accent-rgb), .16)) !important;
}

/* Kompakten barvni drsnik v glavi. */
.color-control {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  min-width:164px;
}

.color-slider-wrap {
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 9px;
  border:1px solid rgba(120,150,175,.18);
  border-radius:999px;
  background:rgba(2,10,18,.78);
  backdrop-filter:blur(8px);
}

.hue-slider {
  --thumb-color:hsl(205 100% 54%);
  width:112px;
  height:17px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}

.hue-slider::-webkit-slider-runnable-track {
  height:7px;
  border-radius:999px;
  background:linear-gradient(90deg,
    hsl(0 100% 52%),
    hsl(60 100% 50%),
    hsl(120 100% 45%),
    hsl(180 100% 50%),
    hsl(240 100% 60%),
    hsl(300 100% 55%),
    hsl(360 100% 52%));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

.hue-slider::-moz-range-track {
  height:7px;
  border-radius:999px;
  background:linear-gradient(90deg,
    hsl(0 100% 52%),
    hsl(60 100% 50%),
    hsl(120 100% 45%),
    hsl(180 100% 50%),
    hsl(240 100% 60%),
    hsl(300 100% 55%),
    hsl(360 100% 52%));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

.hue-slider::-webkit-slider-thumb {
  width:18px;
  height:18px;
  margin-top:-5.5px;
  appearance:none;
  -webkit-appearance:none;
  border:2px solid #edf5fa;
  border-radius:50%;
  background:var(--thumb-color);
  box-shadow:
    0 0 0 2px #06111c,
    0 0 13px rgba(var(--accent-rgb), .72);
}

.hue-slider::-moz-range-thumb {
  width:16px;
  height:16px;
  border:2px solid #edf5fa;
  border-radius:50%;
  background:var(--thumb-color);
  box-shadow:
    0 0 0 2px #06111c,
    0 0 13px rgba(var(--accent-rgb), .72);
}

.color-preview {
  width:15px;
  height:15px;
  flex:0 0 15px;
  border-radius:50%;
  background:var(--accent);
}

.color-reset {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid rgba(var(--accent-rgb), .32);
  border-radius:50%;
  color:var(--accent);
  background:rgba(2,10,18,.76);
  cursor:pointer;
  font-size:15px;
}

.color-reset:hover,
.color-reset:focus-visible {
  background:rgba(var(--accent-rgb), .10);
  border-color:rgba(var(--accent-rgb), .62);
}

/* Dinamični poudarki. */
.section-label,
.kicker,
nav a.active,
nav a:hover,
.case-body dt,
.edu-year,
.expertise-item > span,
.ai-point > span,
.credential-card > span,
.interest-groups span,
.cap-ico,
.ico,
.feature-icon,
.profile-choice-icon,
.card-icon {
  color:var(--accent) !important;
}

nav a::after,
.line,
.highlight-line,
.service-grid article::after,
.career-dot {
  background:var(--accent) !important;
  box-shadow:0 0 12px rgba(var(--accent-rgb), .65) !important;
}

.btn.primary {
  background:linear-gradient(180deg,
    hsl(var(--accent-h) 100% 58%),
    hsl(var(--accent-h) 100% 42%)) !important;
  border-color:hsl(var(--accent-h) 100% 66%) !important;
}

.btn.secondary,
.mini-btn,
.btn-back {
  border-color:rgba(var(--accent-rgb), .58) !important;
  color:var(--accent-soft) !important;
}

@media(max-width:1050px) {
  .color-control { min-width:140px; }
  .hue-slider { width:88px; }
}

@media(max-width:760px) {
  .color-control {
    min-width:auto;
    margin-left:auto;
    margin-right:7px;
  }

  .color-slider-wrap { padding:5px 7px; }
  .hue-slider { width:72px; }
  .color-preview { display:none; }
  .color-reset { width:28px; height:28px; }
}


/* Pet glavnih podstrani uporablja točno enako hero geometrijo. */
body:has(main.subpage) main.subpage > .page-hero {
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(var(--accent-rgb), .18) !important;
}

/* Ozadje je na vseh straneh vedno ista slika, isti crop in ista pozicija. */
body:has(main.subpage) main.subpage > .page-hero > .theme-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 400px !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22)),
    url("hero-bg.webp?v=1.8.2") center 48% / cover no-repeat !important;
  filter: hue-rotate(var(--theme-hue-rotate)) !important;
  transform: none !important;
  transform-origin: center !important;
}

/* Notranji okvir je identičen na vseh petih straneh. */
.page-hero-frame {
  position: relative !important;
  height: 400px !important;
  min-height: 400px !important;
  padding: 0 !important;
}

/* Breadcrumb: vedno ista koordinata. */
.page-hero-frame > .breadcrumb {
  position: absolute !important;
  top: 58px !important;
  right: 0 !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 4 !important;
  min-height: 20px;
}

/* Glavna vsebina hero sekcije: vedno začne na isti koordinati. */
.page-hero-copy {
  position: absolute !important;
  top: 142px !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: min(820px, 72%) !important;
  z-index: 3 !important;
}

/* Enotni tipografski ritem. */
.page-hero-copy > .section-label {
  margin: 0 0 14px !important;
}

.page-hero-copy > h1 {
  margin: 0 0 18px !important;
  font-size: clamp(48px, 5vw, 68px) !important;
  line-height: 1.02 !important;
}

.page-hero-copy > .page-lead {
  width: 100% !important;
  max-width: 780px !important;
  min-height: 56px !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

/* LABORATORIJ: CTA gumbi so dodatna vrstica, vendar ne spreminjajo hero višine. */
.page-hero-copy > .lab-hero-actions {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  gap: 12px !important;
}

.page-hero-copy > .lab-hero-actions .btn {
  min-height: 58px !important;
  height: 58px !important;
  padding: 0 17px !important;
}

.page-hero-copy > .lab-hero-actions .btn-icon {
  width: 42px !important;
  height: 42px !important;
  flex-basis: 42px !important;
}

/* Vsebinski del se na vseh straneh začne na isti navpični črti. */
main.subpage > .page-hero + .content-section {
  margin-top: 0 !important;
  padding-top: 72px !important;
}

/* Mobilni prikaz: geometrija ostane enotna, le bolj kompaktna. */
@media (max-width: 760px) {
  body:has(main.subpage) main.subpage > .page-hero {
    height: 390px !important;
    min-height: 390px !important;
    max-height: 390px !important;
  }

  body:has(main.subpage) main.subpage > .page-hero > .theme-hero-bg {
    height: 390px !important;
    background-position: center 48% !important;
  }

  .page-hero-frame {
    height: 390px !important;
    min-height: 390px !important;
  }

  .page-hero-frame > .breadcrumb {
    top: 34px !important;
    right: 0 !important;
  }

  .page-hero-copy {
    top: 105px !important;
    width: 100% !important;
  }

  .page-hero-copy > h1 {
    font-size: 42px !important;
  }

  .page-hero-copy > .page-lead {
    min-height: 72px !important;
    font-size: 15px !important;
  }

  .page-hero-copy > .lab-hero-actions {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .page-hero-copy > .lab-hero-actions .btn {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    font-size: 10px !important;
    padding: 0 10px !important;
  }

  .page-hero-copy > .lab-hero-actions .btn-icon {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }
}


:root {
  --home-below-hero-h: 166px;
}

/* Samo domača stran. Header je fixed in zato ne porablja layout višine. */
@media (min-width: 761px) and (min-height: 800px) {
  body:has(.home-hero) .home-hero {
    height: calc(100dvh - var(--home-below-hero-h)) !important;
    min-height: 640px !important;
    max-height: none !important;
  }

  body:has(.home-hero) .home-hero .hero-content {
    height: 100% !important;
  }
}

/* Pri nekoliko nižjih namiznih zaslonih zmanjšamo vertikalni pritisk,
   ne da bi spreminjali osnovni izgled strani. */
@media (min-width: 761px) and (min-height: 800px) and (max-height: 930px) {
  body:has(.home-hero) .home-hero .hero-content {
    padding-top: 92px !important;
  }

  body:has(.home-hero) .home-hero h1 {
    font-size: clamp(52px, 5.2vw, 64px) !important;
    margin-top: 14px !important;
    margin-bottom: 16px !important;
  }

  body:has(.home-hero) .home-hero .hero-copy p {
    margin-bottom: 20px !important;
  }

  body:has(.home-hero) .home-hero .line {
    margin-bottom: 19px !important;
  }

  body:has(.home-hero) .home-hero .hero-features {
    gap: 22px !important;
  }
}

/* Na zelo nizkih viewportih scroll ostane dovoljen – vsebine ne režemo. */
@media (min-width: 761px) and (max-height: 799px) {
  body:has(.home-hero) .home-hero {
    min-height: 700px !important;
    height: auto !important;
    max-height: none !important;
  }
}


/* Footer je vedno viden in enak na vseh straneh. */
.site-footer {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 28;
  min-height: var(--site-footer-h);
  padding: 0 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(var(--accent-rgb), .26) !important;
  background:
    linear-gradient(180deg, rgba(2,10,18,.93), rgba(1,6,13,.985)) !important;
  box-shadow:
    0 -14px 35px rgba(0,0,0,.26),
    0 -1px 18px rgba(var(--accent-rgb), .035);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-footer-inner {
  min-height: var(--site-footer-h);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 22px;
}

.site-footer-brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  line-height: 1.15;
}

.site-footer-brand strong {
  color: #c4d3df;
  font-size: 11px;
  letter-spacing: .04em;
}

.site-footer-brand span {
  color: #6f8799;
  font-size: 10px;
  white-space: nowrap;
}

.site-footer-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.site-footer-copy {
  justify-self: end;
  color: #8195a6;
  font-size: 10px;
  white-space: nowrap;
}

/* Gumb Nazaj je del footerja in je povsod identičen. */
.footer-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(var(--accent-rgb), .42);
  border-radius: 9px;
  color: #b9d8ee;
  background: rgba(var(--accent-rgb), .045);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .045em;
  font-size: 10px;
  font-weight: 650;
  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}

.footer-back-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid rgba(var(--accent-rgb), .34);
  border-radius: 50%;
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
}

.footer-back:hover,
.footer-back:focus-visible {
  color: #fff;
  border-color: rgba(var(--accent-rgb), .72);
  background: rgba(var(--accent-rgb), .10);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), .08);
  transform: translateY(-1px);
}

/* Stari ločeni back-section ne sme več zavzemati prostora. */
.back-section {
  display: none !important;
}

/* Dolge podstrani dobijo spodnji varnostni prostor, da fixed footer
   ne prekrije zadnje vsebine. */
body:not(:has(.home-hero)) {
  padding-bottom: var(--site-footer-h);
}

/* Na domači strani footer že sodeluje v izračunu HERO višine,
   zato pri običajnih desktop viewportih ne dodajamo dodatnega praznega roba. */
@media (min-width: 761px) and (min-height: 800px) {
  body:has(.home-hero) {
    padding-bottom: 0 !important;
  }
}

/* Pri nizkih zaslonih je scroll dovoljen in dodamo prostor pod vsebino. */
@media (min-width: 761px) and (max-height: 799px) {
  body:has(.home-hero) {
    padding-bottom: var(--site-footer-h) !important;
  }
}

/* Mobilni footer ostane vedno viden, vendar je bolj kompakten. */
@media (max-width: 760px) {
  :root {
    --site-footer-h: 62px;
  }

  .site-footer-inner {
    grid-template-columns: minmax(80px,1fr) auto minmax(72px,1fr);
    gap: 8px;
  }

  .site-footer-brand span {
    display: none;
  }

  .site-footer-brand strong,
  .site-footer-copy {
    font-size: 9px;
  }

  .footer-back {
    min-height: 36px;
    padding: 0 10px;
    gap: 6px;
    font-size: 9px;
  }

  .footer-back-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
    font-size: 12px;
  }

  .footer-back-text {
    max-width: 124px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body {
    padding-bottom: var(--site-footer-h) !important;
  }
}


/* Celotna stran je flex stolpec. Footer se pri kratkih straneh potisne
   na dno viewporta, pri dolgih pa ostane normalno na koncu vsebine. */
html,
body {
  min-height: 100%;
}

body {
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important;
}

body > main {
  flex: 1 0 auto;
  width: 100%;
}

/* Footer NI več fixed. Zato ne prekriva vsebine in stran se ne "zapira". */
.site-footer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  width: 100% !important;
  flex: 0 0 auto;
  margin-top: auto !important;
}

/* Ker footer ni več nad vsebino, dodatni spodnji varnostni prostor ni potreben. */
body:not(:has(.home-hero)),
body:has(.home-hero) {
  padding-bottom: 0 !important;
}


@media (min-width: 761px) and (min-height: 800px) {
  body:has(.home-hero) .home-hero {
    height: calc(100dvh - var(--home-below-hero-h)) !important;
    min-height: 640px !important;
  }
}

/* Mobilno: footer prav tako ostane v toku dokumenta. */
@media (max-width: 760px) {
  body {
    padding-bottom: 0 !important;
  }
}


:root {
  --site-footer-h: 72px;
  --capability-strip-h: 80px;
}

/* Body sam ne scrolla. */
html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
}

body {
  display: block !important;
  padding: 0 !important;
}

/* Sredinski del strani je edini scroll container.
   Njegov spodnji rob se konča NATANČNO nad footerjem. */
body > main {
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--site-footer-h)) !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  padding: 0 !important;
  margin: 0 !important;
}

/* Footer je ponovno fixed, vendar NE prekriva main-a,
   ker main fizično konča nad njim. */
.site-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 40 !important;
  width: 100% !important;
  height: var(--site-footer-h) !important;
  min-height: var(--site-footer-h) !important;
  margin: 0 !important;
  flex: none !important;
}

/* Noben dodatni padding zaradi footerja ni več potreben. */
body,
body:not(:has(.home-hero)),
body:has(.home-hero) {
  padding-bottom: 0 !important;
}

/* DOMOV:
   main je že zmanjšan za footer, zato hero odšteje samo capability strip. */
@media (min-width: 761px) and (min-height: 800px) {
  body:has(.home-hero) .home-hero {
    height: calc(100dvh - var(--site-footer-h) - var(--capability-strip-h)) !important;
    min-height: 640px !important;
    max-height: none !important;
  }

  body:has(.home-hero) .capability-strip {
    min-height: var(--capability-strip-h);
  }
}

/* Pri nižjih namiznih zaslonih dovolimo scroll znotraj main-a,
   footer pa še vedno ostane fiksno na mestu. */
@media (min-width: 761px) and (max-height: 799px) {
  body:has(.home-hero) .home-hero {
    min-height: 700px !important;
    height: auto !important;
  }
}

/* Mobilno: enaka logika, le nižji footer. */
@media (max-width: 760px) {
  :root {
    --site-footer-h: 62px;
  }

  body > main {
    height: calc(100dvh - var(--site-footer-h)) !important;
  }

  .site-footer {
    height: var(--site-footer-h) !important;
    min-height: var(--site-footer-h) !important;
  }
}


:root {
  --site-header-h: 110px;
  --site-footer-h: 72px;
  --capability-strip-h: 80px;
}

/* Header in footer sta fiksna okvirja. */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
}

/* KLJUČNI POPRAVEK:
   main ni več na y=0, ampak se začne tik pod dejansko višino headerja
   in konča tik nad footerjem. */
body > main {
  position: fixed !important;
  top: var(--site-header-h) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--site-footer-h) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scroll-padding-top: 18px;
}

.site-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 50 !important;
}

/* Domača stran:
   hero zapolni razpoložljivo višino main-a minus capability strip.
   Ker main že upošteva header in footer, ju tukaj NE odštevamo še enkrat. */
@media (min-width: 761px) and (min-height: 800px) {
  body:has(.home-hero) .home-hero {
    height: calc(100% - var(--capability-strip-h)) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body:has(.home-hero) .capability-strip {
    height: var(--capability-strip-h) !important;
    min-height: var(--capability-strip-h) !important;
  }
}

/* Pri nižjih desktop viewportih scroll znotraj main ostane dovoljen. */
@media (min-width: 761px) and (max-height: 799px) {
  body:has(.home-hero) .home-hero {
    min-height: 680px !important;
    height: auto !important;
  }
}

/* Mobilno: main se prav tako začne pod realno izmerjenim headerjem. */
@media (max-width: 760px) {
  :root {
    --site-header-h: 84px;
    --site-footer-h: 62px;
  }

  body > main {
    top: var(--site-header-h) !important;
    bottom: var(--site-footer-h) !important;
    height: auto !important;
  }

  /* Spustni meni je del fixed headerja in mora biti nad main vsebino. */
  .nav-wrap nav {
    z-index: 60 !important;
  }
}


/* Header: drsnik ni več stalno viden; desno sta le dva utility gumba. */
.nav-wrap {
  grid-template-columns: minmax(390px, 500px) 1fr auto !important;
}

.utility-menus {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-left: 12px;
}

.utility-item {
  position: relative;
}

.utility-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 10px;
  color: #aabcca;
  background: rgba(2, 10, 18, .58);
  cursor: pointer;
  font: inherit;
  transition:
    color .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.utility-trigger:hover,
.utility-trigger:focus-visible,
.utility-trigger[aria-expanded="true"] {
  color: #eef6fb;
  border-color: rgba(var(--accent-rgb), .52);
  background: rgba(var(--accent-rgb), .075);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .055);
}

.utility-trigger-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.utility-trigger-label {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .055em;
}

.utility-panel {
  position: absolute;
  top: calc(100% + 13px);
  right: 0;
  width: 365px;
  padding: 19px;
  border: 1px solid rgba(var(--accent-rgb), .30);
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 5%, rgba(var(--accent-rgb), .09), transparent 180px),
    rgba(2, 11, 20, .985);
  box-shadow:
    0 24px 70px rgba(0,0,0,.48),
    0 0 34px rgba(var(--accent-rgb), .055);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px) scale(.985);
  transform-origin: top right;
  pointer-events: none;
  transition:
    opacity .14s ease,
    visibility .14s ease,
    transform .14s ease;
}

.utility-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.utility-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(var(--accent-rgb), .16);
}

.utility-panel-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.utility-panel-head span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .12em;
}

.utility-panel-head strong {
  color: #edf4f9;
  font-size: 17px;
  line-height: 1.2;
}

.utility-close {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  padding: 0;
  border: 1px solid rgba(130,160,182,.20);
  border-radius: 8px;
  color: #94a9b9;
  background: rgba(255,255,255,.015);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
}

.utility-close:hover,
.utility-close:focus-visible {
  color: #fff;
  border-color: rgba(var(--accent-rgb), .48);
  background: rgba(var(--accent-rgb), .07);
}

.utility-intro {
  margin: 14px 0 16px;
  color: #94a8b8;
  font-size: 12px;
  line-height: 1.65;
}

.utility-tip {
  margin-top: 15px;
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
  color: #7f95a6;
  background: rgba(var(--accent-rgb), .035);
  font-size: 10px;
  line-height: 1.55;
}

/* NASTAVITVE -------------------------------------------------------- */
.settings-group {
  display: grid;
  gap: 12px;
}

.settings-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.settings-label-row label {
  color: #d9e5ed;
  font-size: 12px;
  font-weight: 650;
}

.settings-label-row output {
  min-width: 42px;
  color: var(--accent);
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
}

.settings-slider-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid rgba(var(--accent-rgb), .16);
  border-radius: 10px;
  background: rgba(0,0,0,.14);
}

.settings-slider-row .hue-slider {
  width: 100%;
  flex: 1 1 auto;
}

.settings-slider-row .color-preview {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.settings-sub-label {
  margin-top: 2px;
  color: #8095a5;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.color-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.color-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 51px;
  padding: 7px 4px;
  border: 1px solid rgba(120,150,175,.16);
  border-radius: 9px;
  color: #899eae;
  background: rgba(255,255,255,.015);
  cursor: pointer;
  font: inherit;
  font-size: 9px;
}

.color-preset > span:first-child {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: 0 0 9px currentColor;
}

.preset-blue > span:first-child { background: hsl(205 100% 54%); color: hsl(205 100% 54%); }
.preset-green > span:first-child { background: hsl(135 90% 50%); color: hsl(135 90% 50%); }
.preset-violet > span:first-child { background: hsl(275 90% 62%); color: hsl(275 90% 62%); }
.preset-red > span:first-child { background: hsl(355 95% 58%); color: hsl(355 95% 58%); }

.color-preset:hover,
.color-preset:focus-visible {
  color: #e8f1f7;
  border-color: rgba(var(--accent-rgb), .40);
  background: rgba(var(--accent-rgb), .05);
}

.settings-reset {
  min-height: 40px;
  border: 1px solid rgba(var(--accent-rgb), .34);
  border-radius: 9px;
  color: #b7d9ef;
  background: rgba(var(--accent-rgb), .04);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .03em;
}

.settings-reset:hover,
.settings-reset:focus-visible {
  color: #fff;
  border-color: rgba(var(--accent-rgb), .62);
  background: rgba(var(--accent-rgb), .09);
}

/* POMOČ ------------------------------------------------------------- */
.help-topics {
  display: grid;
  gap: 9px;
}

.help-topic {
  padding: 10px 11px;
  border: 1px solid rgba(120,150,175,.13);
  border-radius: 9px;
  background: rgba(255,255,255,.012);
}

.help-topic strong {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 9px;
  letter-spacing: .08em;
}

.help-topic p {
  margin: 0;
  color: #8fa4b4;
  font-size: 11px;
  line-height: 1.55;
}

.help-quick-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  margin-top: 13px;
}

.help-quick-links a {
  display: grid;
  place-items: center;
  min-height: 36px;
  border: 1px solid rgba(var(--accent-rgb), .20);
  border-radius: 8px;
  color: #9fb8ca;
  background: rgba(var(--accent-rgb), .025);
  text-decoration: none;
  font-size: 10px;
}

.help-quick-links a:hover,
.help-quick-links a:focus-visible {
  color: #fff;
  border-color: rgba(var(--accent-rgb), .50);
  background: rgba(var(--accent-rgb), .07);
}

/* Manjši desktop: skrijemo besedilni oznaki, ikoni ostaneta. */
@media(max-width:1180px) {
  .nav-wrap {
    grid-template-columns: minmax(330px, 420px) 1fr auto !important;
  }

  .utility-trigger {
    width: 38px;
    padding: 0;
  }

  .utility-trigger-label {
    display: none;
  }
}

/* Mobilno: utility gumba ostaneta desno ob hamburgerju, panel je viewport-wide. */
@media(max-width:760px) {
  .nav-wrap {
    grid-template-columns: minmax(0,1fr) auto 44px !important;
    gap: 7px;
  }

  .utility-menus {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
  }

  .menu-btn {
    grid-column: 3;
    grid-row: 1;
  }

  .nav-wrap nav {
    grid-column: 1 / -1;
  }

  .utility-trigger {
    width: 34px;
    min-height: 34px;
    border-radius: 9px;
  }

  .utility-trigger-icon {
    width: 20px;
    height: 20px;
    font-size: 14px;
  }

  .utility-panel {
    position: fixed;
    top: calc(var(--site-header-h) - 2px);
    left: 14px;
    right: 14px;
    width: auto;
    max-height: calc(100dvh - var(--site-header-h) - var(--site-footer-h) - 14px);
    overflow-y: auto;
    transform-origin: top center;
  }

  .settings-panel,
  .help-panel {
    right: 14px;
  }
}


/* Vsa glavna "okenca" uporabljajo isto optično obnašanje. */
.profile-choice,
.detail-card,
.case-card,
.content-card,
.terminal,
.step-grid > article,
.contact-identity,
.contact-guidance {
  transition:
    border-color .16s ease,
    transform .16s ease,
    box-shadow .16s ease,
    background-color .16s ease !important;
  transform: translateY(0);
  will-change: transform;
}

.profile-choice:hover,
.detail-card:hover,
.case-card:hover,
.content-card:hover,
.terminal:hover,
.step-grid > article:hover,
.contact-identity:hover,
.contact-guidance:hover {
  border-color: rgba(var(--accent-rgb), .48) !important;
  transform: translateY(-2px);
  box-shadow:
    0 20px 58px rgba(0,0,0,.24),
    0 0 28px rgba(var(--accent-rgb), .075),
    inset 0 1px 0 rgba(var(--accent-rgb), .055) !important;
}

/* Kontaktni e-mail je interaktivni element znotraj kartice. */
.contact-mail {
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease !important;
}

.contact-mail:hover,
.contact-mail:focus-visible {
  border-color: rgba(var(--accent-rgb), .62) !important;
  background: rgba(var(--accent-rgb), .085) !important;
  box-shadow: 0 0 22px rgba(var(--accent-rgb), .06);
}

/* LABORATORIJ – terminalski okvir dobi isti tematski border pri hoverju. */
.terminal:hover {
  border-color: rgba(var(--accent-rgb), .48) !important;
}

/* ---------------------------------------------------------------------
   PROJEKTI – strogo poravnane slike in kartice
   --------------------------------------------------------------------- */

.case-grid {
  align-items: stretch !important;
}

/* Vsaka projektna kartica ima enako strukturiran slikovni in tekstovni del. */
.case-card {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  min-width: 0;
  height: 100%;
}

/* Slikovni okvir je vedno enakega razmerja in ne vsebuje notranjih odmikov. */
.case-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #020914;
  border-bottom: 1px solid rgba(var(--accent-rgb), .24);
}

/* Prepišemo stare image selektorje: slika zapolni TOČNO case-media. */
.case-card .case-media > [data-theme-project] {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Vsi tekstovni deli se začnejo na isti liniji. */
.case-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 26px !important;
}

/* Naslovi dobijo minimalno višino, da se spodnji DL bloki poravnajo med karticami. */
.case-body h2 {
  min-height: 58px;
  display: flex;
  align-items: flex-start;
}

/* Mehka, profesionalna slika ob hoverju brez premika layouta. */
.case-card .case-media > [data-theme-project] {
  transition:
    transform .22s ease,
    filter .18s ease !important;
}

.case-card:hover .case-media > [data-theme-project] {
  transform: scale(1.018);
  filter:
    hue-rotate(var(--theme-hue-rotate))
    brightness(1.045)
    contrast(1.025)
    drop-shadow(0 0 12px rgba(var(--accent-rgb), .11)) !important;
}

/* Posebne mikro-korekcije vizualnega fokusa slik.
   Ne spreminjajo velikosti okvirjev, le točko obreza. */
.case-card:nth-child(1) .case-media > [data-theme-project] {
  object-position: 50% 48% !important;
}
.case-card:nth-child(2) .case-media > [data-theme-project] {
  object-position: 50% 50% !important;
}
.case-card:nth-child(3) .case-media > [data-theme-project] {
  object-position: 50% 47% !important;
}
.case-card:nth-child(4) .case-media > [data-theme-project] {
  object-position: 50% 49% !important;
}

/* Tipkovnica: enak vizualni feedback kot hover. */
.profile-choice:focus-within,
.detail-card:focus-within,
.case-card:focus-within,
.content-card:focus-within,
.terminal:focus-within,
.step-grid > article:focus-within,
.contact-identity:focus-within,
.contact-guidance:focus-within {
  border-color: rgba(var(--accent-rgb), .48) !important;
  box-shadow:
    0 20px 58px rgba(0,0,0,.24),
    0 0 28px rgba(var(--accent-rgb), .075) !important;
}

@media (max-width: 760px) {
  .case-body h2 {
    min-height: 0;
  }

  .profile-choice:hover,
  .detail-card:hover,
  .case-card:hover,
  .content-card:hover,
  .terminal:hover,
  .step-grid > article:hover,
  .contact-identity:hover,
  .contact-guidance:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-choice,
  .detail-card,
  .case-card,
  .content-card,
  .terminal,
  .step-grid > article,
  .contact-identity,
  .contact-guidance,
  .case-card .case-media > [data-theme-project] {
    transition: none !important;
    transform: none !important;
  }
}


/* =====================================================================
   ORIGINAL PROJECT IMAGE PREVIEW
   Celotna originalna slika je vedno vidna v trenutnem projektnem oknu.
   ===================================================================== */


/* Za primerjavo izklopimo zoom slike ob hoverju.
   Poudari se samo kartica. */
.case-card:hover .case-media > [data-theme-project] {
  transform: none !important;
}

/* Zaradi drugačnega izvornega razmerja panela bo pri 16:9 oknu
   lahko ostal diskreten temen rob. To je namerno: nič ni odrezano. */
.case-media {
  background:
    radial-gradient(circle at center,
      rgba(var(--accent-rgb), .025),
      #010812 72%) !important;
}


/* ---------------------------------------------------------------------
   PROJEKTI – ORIGINALNE SLIKE KOT KONČNI STANDARD
   --------------------------------------------------------------------- */

/* Ohranimo sedanje 16:9 okno, original 3:2 panel pa je VEDNO viden v celoti. */
.case-card .case-media > [data-theme-project] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: #010812 !important;
}

/* Hover poudari kartico – slika ostane stabilna in v celoti vidna. */
.case-card:hover .case-media > [data-theme-project] {
  transform: none !important;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    brightness(1.025)
    contrast(1.015)
    drop-shadow(0 0 10px rgba(var(--accent-rgb), .08)) !important;
}

.case-media {
  background:
    radial-gradient(circle at 50% 48%,
      rgba(var(--accent-rgb), .035),
      #010812 74%) !important;
}

/* ---------------------------------------------------------------------
   POMOČ – profesionalni razširjeni panel
   --------------------------------------------------------------------- */

.help-panel-pro {
  width: min(650px, calc(100vw - 48px)) !important;
  max-height: min(720px, calc(100dvh - var(--site-header-h) - var(--site-footer-h) - 28px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.help-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
}

.help-version-badge,
.help-version-status {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9px;
  letter-spacing: .04em;
}

.help-version-badge {
  border: 1px solid rgba(var(--accent-rgb), .38);
  color: var(--accent);
  background: rgba(var(--accent-rgb), .055);
}

.help-version-status {
  border: 1px solid rgba(130,160,182,.17);
  color: #8299aa;
  background: rgba(255,255,255,.018);
}

.help-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 2px 0 13px;
  padding: 5px;
  border: 1px solid rgba(125,150,171,.13);
  border-radius: 10px;
  background: rgba(0,0,0,.13);
}

.help-tab {
  min-height: 34px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #71889a;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
}

.help-tab:hover,
.help-tab:focus-visible {
  color: #c8dae6;
  background: rgba(var(--accent-rgb), .035);
}

.help-tab.active {
  color: #edf6fc;
  border-color: rgba(var(--accent-rgb), .34);
  background: rgba(var(--accent-rgb), .08);
  box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), .70);
}

.help-panes {
  min-height: 0;
  overflow-y: auto;
  padding-right: 5px;
  scrollbar-width: thin;
}

.help-pane {
  display: none;
}

.help-pane.active {
  display: block;
}

.help-pane h3,
.versions-head h3 {
  margin: 0 0 6px;
  color: #e9f2f8;
  font-size: 16px;
}

.help-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-bottom: 15px;
}

.help-guide-item {
  position: relative;
  min-height: 108px;
  padding: 13px 13px 12px;
  border: 1px solid rgba(120,150,175,.14);
  border-radius: 9px;
  background: rgba(255,255,255,.012);
}

.help-guide-item > span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9px;
}

.help-guide-item strong {
  display: block;
  margin-bottom: 5px;
  color: #dce8f0;
  font-size: 12px;
}

.help-guide-item p {
  margin: 0;
  color: #8298a8;
  font-size: 10px;
  line-height: 1.55;
}

.help-section-label {
  display: block;
  margin-bottom: 7px;
  color: #778d9e;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .11em;
}

.help-quick-links {
  grid-template-columns: repeat(5, 1fr) !important;
  margin-top: 0 !important;
}

.shortcut-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.shortcut-list > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 39px;
  padding: 7px 10px;
  border: 1px solid rgba(120,150,175,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.01);
}

.shortcut-list kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 0 7px;
  border: 1px solid rgba(var(--accent-rgb), .30);
  border-bottom-width: 2px;
  border-radius: 6px;
  color: #c8e6f8;
  background: rgba(var(--accent-rgb), .045);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9px;
}

.shortcut-list span {
  color: #879dac;
  font-size: 10px;
}

.help-note {
  margin: 13px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
  color: #8297a8;
  background: rgba(var(--accent-rgb), .03);
  font-size: 10px;
  line-height: 1.6;
}

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 12px;
}

.privacy-grid > div {
  padding: 12px;
  border: 1px solid rgba(120,150,175,.13);
  border-radius: 8px;
  background: rgba(255,255,255,.012);
}

.privacy-grid strong {
  display: block;
  margin-bottom: 5px;
  color: #d8e5ee;
  font-size: 11px;
}

.privacy-grid p {
  margin: 0;
  color: #8096a6;
  font-size: 10px;
  line-height: 1.55;
}

.versions-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  margin-bottom: 13px;
}

.versions-head p {
  margin: 0;
  color: #758b9c;
  font-size: 10px;
}

.versions-summary-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .045);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
}

.version-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 15px;
}

.version-status-card {
  position: relative;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(120,150,175,.14);
  border-radius: 9px;
  background: rgba(255,255,255,.012);
}

.version-status-card.current {
  border-color: rgba(var(--accent-rgb), .34);
  background: linear-gradient(145deg, rgba(var(--accent-rgb), .075), rgba(255,255,255,.009));
  box-shadow: inset 0 1px 0 rgba(var(--accent-rgb), .08);
}

.version-status-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.version-status-label,
.version-state-badge {
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .08em;
}

.version-status-label {
  color: var(--accent);
}

.version-state-badge {
  padding: 3px 6px;
  border-radius: 999px;
  color: #839aaa;
  background: rgba(125,150,171,.07);
}

.version-status-card.current .version-state-badge {
  color: #b7dcf3;
  background: rgba(var(--accent-rgb), .08);
}

.version-status-version {
  display: block;
  margin-bottom: 6px;
  color: #e8f2f8;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 17px;
  line-height: 1.15;
}

.version-status-card p {
  margin: 0;
  color: #8298a8;
  font-size: 10px;
  line-height: 1.55;
}

.version-milestones-label {
  display: block;
  margin: 0 0 8px;
  color: #778d9e;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .11em;
}

.version-milestone-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.version-milestone {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(120,150,175,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.009);
}

.version-milestone-index {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px;
}

.version-milestone h4 {
  margin: 0 0 5px;
  color: #dce8f0;
  font-size: 11px;
}

.version-milestone p {
  margin: 0;
  color: #7e94a5;
  font-size: 9px;
  line-height: 1.55;
}

.version-archive-note {
  margin-top: 12px;
}

.version-archive-note strong {
  display: block;
  margin-bottom: 2px;
  color: #cfe0ea;
  font-size: inherit;
}

html[data-contrast="high"] .version-status-card,
html[data-contrast="high"] .version-milestone {
  border-color: rgba(255,255,255,.34) !important;
  background: rgba(255,255,255,.035) !important;
}

html[data-contrast="high"] .version-status-card.current {
  border-color: var(--accent) !important;
}

/* ---------------------------------------------------------------------
   NASTAVITVE – razširjen panel
   --------------------------------------------------------------------- */

.settings-panel-pro {
  width: min(440px, calc(100vw - 48px)) !important;
  max-height: min(720px, calc(100dvh - var(--site-header-h) - var(--site-footer-h) - 28px));
  overflow-y: auto;
}

.settings-section {
  display: grid;
  gap: 11px;
  padding: 14px 0;
  border-top: 1px solid rgba(120,150,175,.12);
}

.settings-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.settings-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.settings-section-head strong {
  color: var(--accent);
  font-size: 9px;
  letter-spacing: .10em;
}

.settings-section-head span {
  color: #6e8394;
  font-size: 9px;
}

.settings-color-values {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-color-values code {
  min-width: 63px;
  padding: 3px 6px;
  border: 1px solid rgba(120,150,175,.14);
  border-radius: 5px;
  color: #8da8ba;
  background: rgba(0,0,0,.15);
  font-size: 9px;
}

.settings-switch-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 13px;
  min-height: 61px;
  padding: 10px 11px;
  border: 1px solid rgba(120,150,175,.13);
  border-radius: 9px;
  cursor: pointer;
  background: rgba(255,255,255,.012);
}

.settings-switch-row:hover {
  border-color: rgba(var(--accent-rgb), .30);
  background: rgba(var(--accent-rgb), .025);
}

.settings-switch-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.settings-switch-copy strong {
  color: #d8e5ee;
  font-size: 11px;
}

.settings-switch-copy small {
  color: #728899;
  font-size: 9px;
  line-height: 1.45;
}

.settings-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-ui {
  position: relative;
  width: 40px;
  height: 22px;
  border: 1px solid rgba(120,150,175,.24);
  border-radius: 999px;
  background: #07121c;
  transition: background .16s ease, border-color .16s ease;
}

.switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #718596;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.settings-checkbox:checked + .switch-ui {
  border-color: rgba(var(--accent-rgb), .60);
  background: rgba(var(--accent-rgb), .14);
}

.settings-checkbox:checked + .switch-ui::after {
  transform: translateX(18px);
  background: var(--accent);
  box-shadow: 0 0 9px rgba(var(--accent-rgb), .55);
}

.settings-checkbox:focus-visible + .switch-ui {
  outline: 2px solid rgba(var(--accent-rgb), .52);
  outline-offset: 2px;
}

.settings-reset-all {
  width: 100%;
  margin-top: 3px;
}

/* ---------------------------------------------------------------------
   ZMANJŠANE ANIMACIJE
   --------------------------------------------------------------------- */

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  transition-duration: .001ms !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
}

html[data-motion="reduced"] .profile-choice:hover,
html[data-motion="reduced"] .detail-card:hover,
html[data-motion="reduced"] .case-card:hover,
html[data-motion="reduced"] .content-card:hover,
html[data-motion="reduced"] .terminal:hover,
html[data-motion="reduced"] .step-grid > article:hover,
html[data-motion="reduced"] .contact-identity:hover,
html[data-motion="reduced"] .contact-guidance:hover {
  transform: none !important;
}

/* ---------------------------------------------------------------------
   POVEČAN KONTRAST
   --------------------------------------------------------------------- */

html[data-contrast="high"] {
  --ink: #ffffff;
  --muted: #bfd0db;
}

html[data-contrast="high"] body {
  color: #f4f8fb;
}

html[data-contrast="high"] p,
html[data-contrast="high"] li,
html[data-contrast="high"] .page-lead,
html[data-contrast="high"] .contact-privacy,
html[data-contrast="high"] .case-body dd {
  color: #c7d6df !important;
}

html[data-contrast="high"] .profile-choice,
html[data-contrast="high"] .detail-card,
html[data-contrast="high"] .case-card,
html[data-contrast="high"] .content-card,
html[data-contrast="high"] .terminal,
html[data-contrast="high"] .step-grid > article,
html[data-contrast="high"] .contact-identity,
html[data-contrast="high"] .contact-guidance {
  border-color: rgba(var(--accent-rgb), .42) !important;
}

html[data-contrast="high"] nav a,
html[data-contrast="high"] .utility-trigger {
  color: #d5e1e9;
}

@media(max-width:760px) {
  .help-panel-pro,
  .settings-panel-pro {
    width: auto !important;
  }

  .help-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .help-guide-grid,
  .privacy-grid {
    grid-template-columns: 1fr;
  }

  .help-quick-links {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .shortcut-list > div {
    grid-template-columns: 92px 1fr;
  }

  .versions-head {
    grid-template-columns: 1fr;
  }

  .version-status-grid,
  .version-milestone-grid {
    grid-template-columns: 1fr;
  }

  .settings-section-head {
    flex-direction: column;
    align-items: flex-start;
  }
}


html[data-contrast="high"] {
  --ink: #ffffff !important;
  --muted: #d9e4eb !important;
}

/* Osnovno ozadje ostane temno, vendar je ločevanje vsebine jasnejše. */
html[data-contrast="high"] body {
  color: #f8fbfd !important;
  background:
    radial-gradient(circle at 52% 5%, rgba(var(--accent-rgb), .075), transparent 34rem),
    #01060c !important;
}

/* Primarno in sekundarno besedilo. */
html[data-contrast="high"] h1,
html[data-contrast="high"] h2,
html[data-contrast="high"] h3,
html[data-contrast="high"] h4,
html[data-contrast="high"] strong {
  color: #ffffff !important;
}

html[data-contrast="high"] p,
html[data-contrast="high"] li,
html[data-contrast="high"] dd,
html[data-contrast="high"] .page-lead,
html[data-contrast="high"] .contact-privacy,
html[data-contrast="high"] .case-body dd,
html[data-contrast="high"] .utility-intro,
html[data-contrast="high"] .help-guide-item p,
html[data-contrast="high"] .help-topic p,
html[data-contrast="high"] .shortcut-list span,
html[data-contrast="high"] .privacy-grid p,
html[data-contrast="high"] .version-status-card p,
html[data-contrast="high"] .version-milestone p,
html[data-contrast="high"] .settings-switch-copy small {
  color: #d3dfe7 !important;
}

/* Kartice: močnejši rob, nekoliko jasnejše ozadje. */
html[data-contrast="high"] .profile-choice,
html[data-contrast="high"] .detail-card,
html[data-contrast="high"] .case-card,
html[data-contrast="high"] .content-card,
html[data-contrast="high"] .terminal,
html[data-contrast="high"] .step-grid > article,
html[data-contrast="high"] .contact-identity,
html[data-contrast="high"] .contact-guidance,
html[data-contrast="high"] .help-guide-item,
html[data-contrast="high"] .privacy-grid > div,
html[data-contrast="high"] .settings-switch-row {
  border-color: rgba(var(--accent-rgb), .64) !important;
  background-color: rgba(255,255,255,.022) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(var(--accent-rgb), .035) !important;
}

/* Hover v high-contrast načinu je izrazitejši. */
html[data-contrast="high"] .profile-choice:hover,
html[data-contrast="high"] .detail-card:hover,
html[data-contrast="high"] .case-card:hover,
html[data-contrast="high"] .content-card:hover,
html[data-contrast="high"] .terminal:hover,
html[data-contrast="high"] .step-grid > article:hover,
html[data-contrast="high"] .contact-identity:hover,
html[data-contrast="high"] .contact-guidance:hover {
  border-color: rgba(var(--accent-rgb), .92) !important;
  box-shadow:
    0 20px 58px rgba(0,0,0,.32),
    0 0 30px rgba(var(--accent-rgb), .16),
    inset 0 0 0 1px rgba(var(--accent-rgb), .14) !important;
}

/* Glavna navigacija. */
html[data-contrast="high"] nav a {
  color: #e2ebf1 !important;
}

html[data-contrast="high"] nav a:hover {
  color: #ffffff !important;
}

html[data-contrast="high"] nav a.active {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), .32);
}

html[data-contrast="high"] nav a.active::after {
  height: 3px !important;
  background: var(--accent) !important;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .80) !important;
}

/* Breadcrumb, footer in pomožni tekst. */
html[data-contrast="high"] .breadcrumb,
html[data-contrast="high"] .breadcrumb a,
html[data-contrast="high"] .site-footer-brand span,
html[data-contrast="high"] .site-footer-copy {
  color: #c9d8e2 !important;
}

html[data-contrast="high"] .site-footer {
  border-top-color: rgba(var(--accent-rgb), .58) !important;
  background: rgba(1,6,12,.995) !important;
}

/* Gumbi: močnejša ločljivost. */
html[data-contrast="high"] .btn.primary {
  color: #ffffff !important;
  border-color: hsl(var(--accent-h) 100% 78%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 22px rgba(var(--accent-rgb), .14) !important;
}

html[data-contrast="high"] .btn.secondary,
html[data-contrast="high"] .mini-btn,
html[data-contrast="high"] .btn-back,
html[data-contrast="high"] .footer-back {
  color: #ffffff !important;
  border-color: rgba(var(--accent-rgb), .78) !important;
  background: rgba(var(--accent-rgb), .10) !important;
}

/* Pomoč in nastavitve. */
html[data-contrast="high"] .utility-panel {
  border-color: rgba(var(--accent-rgb), .62) !important;
  background:
    radial-gradient(circle at 90% 5%, rgba(var(--accent-rgb), .13), transparent 180px),
    rgba(1,7,13,.995) !important;
}

html[data-contrast="high"] .utility-trigger {
  color: #e7f0f6 !important;
  border-color: rgba(var(--accent-rgb), .50) !important;
}

html[data-contrast="high"] .utility-trigger:hover,
html[data-contrast="high"] .utility-trigger[aria-expanded="true"] {
  border-color: rgba(var(--accent-rgb), .90) !important;
}

html[data-contrast="high"] .help-tab {
  color: #c8d7e1 !important;
}

html[data-contrast="high"] .help-tab.active {
  color: #ffffff !important;
  border-color: rgba(var(--accent-rgb), .72) !important;
  background: rgba(var(--accent-rgb), .14) !important;
}

html[data-contrast="high"] .hue-slider::-webkit-slider-runnable-track,
html[data-contrast="high"] .hue-slider::-moz-range-track {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 0 0 1px rgba(0,0,0,.55) !important;
}

/* Fokus mora biti v high-contrast načinu zelo jasno viden. */
html[data-contrast="high"] a:focus-visible,
html[data-contrast="high"] button:focus-visible,
html[data-contrast="high"] input:focus-visible,
html[data-contrast="high"] [tabindex]:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 5px rgba(var(--accent-rgb), .72),
    0 0 18px rgba(var(--accent-rgb), .45) !important;
}

html[data-motion="reduced"] {
  scroll-behavior: auto !important;
}

/* Onemogoči transformacijske animacije in vizualno "lebdenje". */
html[data-motion="reduced"] .profile-choice,
html[data-motion="reduced"] .detail-card,
html[data-motion="reduced"] .case-card,
html[data-motion="reduced"] .content-card,
html[data-motion="reduced"] .terminal,
html[data-motion="reduced"] .step-grid > article,
html[data-motion="reduced"] .contact-identity,
html[data-motion="reduced"] .contact-guidance,
html[data-motion="reduced"] .utility-panel,
html[data-motion="reduced"] .footer-back,
html[data-motion="reduced"] .btn {
  transition: none !important;
  animation: none !important;
}

/* Hover ne premika kartic. */
html[data-motion="reduced"] .profile-choice:hover,
html[data-motion="reduced"] .detail-card:hover,
html[data-motion="reduced"] .case-card:hover,
html[data-motion="reduced"] .content-card:hover,
html[data-motion="reduced"] .terminal:hover,
html[data-motion="reduced"] .step-grid > article:hover,
html[data-motion="reduced"] .contact-identity:hover,
html[data-motion="reduced"] .contact-guidance:hover,
html[data-motion="reduced"] .footer-back:hover {
  transform: none !important;
}

/* Slike se ne povečujejo/ne premikajo. */
html[data-motion="reduced"] [data-theme-project],
html[data-motion="reduced"] [data-theme-icon],
html[data-motion="reduced"] [data-theme-logo] {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* Paneli POMOČ/NASTAVITVE se pojavijo brez slide/scale animacije. */
html[data-motion="reduced"] .utility-panel,
html[data-motion="reduced"] .utility-panel.open {
  transform: none !important;
}

/* Switch indikatorji in drugi drobni UI elementi brez drsenja. */
html[data-motion="reduced"] .switch-ui,
html[data-motion="reduced"] .switch-ui::after,
html[data-motion="reduced"] .hue-slider {
  transition: none !important;
}


/*
  Na domači strani ne računamo več:
      hero = 100% - izmerjeni capability strip

  Namesto tega je <main> flex stolpec:
      .home-hero        -> flex: 1 1 0
      .capability-strip -> flex: 0 0 auto

  Brskalnik sam razdeli razpoložljivo višino brez sub-pixel/rounding napak.
*/
@media (min-width: 761px) and (min-height: 840px) {
  body:has(.home-hero) > main {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  body:has(.home-hero) .home-hero {
    flex: 1 1 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body:has(.home-hero) .home-hero .hero-content {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  body:has(.home-hero) .capability-strip {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  body:has(.home-hero) .capability-strip-inner {
    min-height: 88px !important;
  }
}

/*
  Na nižjih namiznih viewportih je pomembnejše, da nič ni odrezano.
  Tam main ponovno dobi normalen notranji scroll.
*/
@media (min-width: 761px) and (max-height: 839px) {
  body:has(.home-hero) > main {
    display: block !important;
    overflow-y: auto !important;
  }

  body:has(.home-hero) .home-hero {
    height: auto !important;
    min-height: 680px !important;
    overflow: visible !important;
  }

  body:has(.home-hero) .capability-strip {
    height: auto !important;
  }
}


/* ---------------------------------------------------------------------
   GLOBALNO VSEBINSKO BESEDILO
   --------------------------------------------------------------------- */

/* Glavni vsebinski tekst kartic in sekcij. */
.detail-card p,
.content-card p,
.profile-choice p,
.contact-guidance p,
.contact-identity p,
.step-grid > article p,
.terminal p,
.case-body dd {
  font-size: 14px !important;
  line-height: 1.66 !important;
}

/* Kjer je že 14+ px, ohranimo naravno fluidnost. */
.page-lead {
  font-size: clamp(17px, 1.15vw, 18px) !important;
  line-height: 1.68 !important;
}

/* ---------------------------------------------------------------------
   PROFIL
   --------------------------------------------------------------------- */

.profile-choice p,
.profile-choice li {
  font-size: 14.5px !important;
  line-height: 1.66 !important;
}

.profile-choice .eyebrow,
.profile-choice .meta,
.profile-choice .mini-label {
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

/* ---------------------------------------------------------------------
   STORITVE
   --------------------------------------------------------------------- */

.detail-card p,
.detail-card li {
  font-size: 14px !important;
  line-height: 1.66 !important;
}

.detail-card .card-kicker,
.detail-card .section-label,
.detail-card .meta-label {
  font-size: 11px !important;
  letter-spacing: .085em !important;
}

/* ---------------------------------------------------------------------
   PROJEKTI
   --------------------------------------------------------------------- */

.case-body {
  font-size: 14px !important;
}

.case-body dt {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  letter-spacing: .075em !important;
}

.case-body dd {
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.case-body h2 {
  line-height: 1.22 !important;
}

/* ---------------------------------------------------------------------
   LABORATORIJ
   --------------------------------------------------------------------- */

.content-card p,
.content-card li,
.terminal p,
.step-grid > article p {
  font-size: 14px !important;
  line-height: 1.66 !important;
}

.terminal .terminal-line,
.terminal code,
.terminal pre {
  font-size: 12.5px !important;
  line-height: 1.62 !important;
}

.step-grid > article .step-label,
.content-card .section-label {
  font-size: 11px !important;
}

/* ---------------------------------------------------------------------
   KONTAKT
   --------------------------------------------------------------------- */

.contact-identity p,
.contact-guidance p,
.contact-privacy,
.contact-meta,
.contact-note {
  font-size: 13.5px !important;
  line-height: 1.62 !important;
}

.contact-mail {
  font-size: 14px !important;
}

.contact-identity .section-label,
.contact-guidance .section-label {
  font-size: 11px !important;
}

/* ---------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------- */

.site-footer-brand strong {
  font-size: 12px !important;
}

.site-footer-brand span,
.site-footer-copy,
.footer-back {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

/* ---------------------------------------------------------------------
   POMOČ – prejšnji mikro tekst 9–10 px dvignjen v profesionalen razpon
   --------------------------------------------------------------------- */

.help-panel-pro {
  font-size: 12px !important;
}

.help-version-badge,
.help-version-status {
  font-size: 10px !important;
}

.help-tab {
  font-size: 11px !important;
}

.help-guide-item > span,
.help-section-label,
.version-status-label,
.version-state-badge,
.version-milestones-label,
.version-milestone-index {
  font-size: 10px !important;
}

.help-guide-item strong,
.privacy-grid strong {
  font-size: 12px !important;
}

.help-guide-item p,
.help-topic p,
.shortcut-list span,
.privacy-grid p,
.version-status-card p,
.version-milestone p,
.versions-head p,
.help-note,
.help-quick-links a {
  font-size: 12px !important;
  line-height: 1.58 !important;
}

.shortcut-list kbd {
  font-size: 10.5px !important;
}

.version-status-version {
  font-size: 17px !important;
}

/* Povečana čitljivost zavihkov in naslovov v Pomoči. */
.help-pane h3,
.versions-head h3 {
  font-size: 17px !important;
}

/* ---------------------------------------------------------------------
   NASTAVITVE – opisi in oznake
   --------------------------------------------------------------------- */

.settings-panel-pro {
  font-size: 12px !important;
}

.settings-section-head strong,
.settings-sub-label {
  font-size: 10.5px !important;
}

.settings-section-head span,
.settings-color-values code,
.settings-label-row output {
  font-size: 10.5px !important;
}

.settings-label-row label,
.settings-switch-copy strong {
  font-size: 12px !important;
}

.settings-switch-copy small {
  font-size: 11.5px !important;
  line-height: 1.48 !important;
}

.color-preset {
  font-size: 10.5px !important;
}

.settings-reset,
.utility-tip {
  font-size: 11.5px !important;
  line-height: 1.52 !important;
}

/* ---------------------------------------------------------------------
   NAVIGACIJSKI / POMOŽNI MICROCOPY
   --------------------------------------------------------------------- */

.breadcrumb,
.breadcrumb a {
  font-size: 11.5px !important;
}

.section-label,
.eyebrow {
  font-size: 11px !important;
}

/* Utility trigger ostaja kompakten, a nekoliko bolj čitljiv. */
.utility-trigger-label {
  font-size: 10.5px !important;
}

/* ---------------------------------------------------------------------
   MOBILNO – ne preveliko, a še vedno udobno berljivo
   --------------------------------------------------------------------- */

@media (max-width: 760px) {
  .detail-card p,
  .content-card p,
  .profile-choice p,
  .profile-choice li,
  .case-body dd,
  .contact-guidance p,
  .contact-identity p,
  .step-grid > article p {
    font-size: 14px !important;
  }

  .help-guide-item p,
  .help-topic p,
  .shortcut-list span,
  .privacy-grid p,
  .version-status-card p,
  .version-milestone p,
  .help-note,
  .settings-switch-copy small {
    font-size: 11.5px !important;
  }

  .site-footer-brand span,
  .site-footer-copy,
  .footer-back {
    font-size: 10.5px !important;
  }
}


.step-grid > .step-card {
  display:block !important;
  position:relative;
  min-width:0;
  overflow:hidden;
}
.step-card-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) 84px;
  gap:14px;
  align-items:start;
  min-height:78px;
  margin-bottom:10px;
}
.step-card-heading { min-width:0; }
.step-card-heading h3 { margin:8px 0 0 !important; }
.step-card-art {
  display:grid;
  place-items:start end;
  width:84px;
  height:78px;
  pointer-events:none;
}
.step-card-art img {
  display:block;
  width:82px;
  height:76px;
  object-fit:contain;
  object-position:right top;
  opacity:.96;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    drop-shadow(0 0 10px rgba(var(--accent-rgb),.17))
    drop-shadow(0 0 24px rgba(var(--accent-rgb),.10));
  transition:filter .16s ease,opacity .16s ease !important;
}
.step-grid > .step-card:hover .step-card-art img {
  opacity:1;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    brightness(1.04)
    drop-shadow(0 0 12px rgba(var(--accent-rgb),.22))
    drop-shadow(0 0 28px rgba(var(--accent-rgb),.12));
}
.step-grid > .step-card > p {
  width:100%;
  margin:0 !important;
}
html[data-motion="reduced"] .step-card-art img,
html[data-motion="reduced"] .step-grid > .step-card:hover .step-card-art img {
  transition:none !important;
  transform:none !important;
}
html[data-contrast="high"] .step-card-art img {
  opacity:1;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    brightness(1.10)
    contrast(1.08)
    drop-shadow(0 0 12px rgba(var(--accent-rgb),.20));
}
@media (max-width:1180px) {
  .step-card-head { grid-template-columns:minmax(0,1fr) 72px; min-height:68px; }
  .step-card-art { width:72px; height:68px; }
  .step-card-art img { width:70px; height:66px; }
}
@media (max-width:760px) {
  .step-card-head { grid-template-columns:minmax(0,1fr) 64px; gap:10px; min-height:60px; }
  .step-card-art { width:64px; height:60px; }
  .step-card-art img { width:62px; height:58px; }
}

.step-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 20px !important;
}

.step-grid > .step-card {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 168px;
  grid-template-rows: auto 1fr;
  column-gap: 22px;
  min-height: 205px;
  padding: 24px 26px !important;
  overflow: hidden;
}

.step-card-head {
  display: contents !important;
}

.step-card-heading {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  align-self: start;
}

.step-card-heading h3 {
  margin: 8px 0 0 !important;
  font-size: 20px;
  line-height: 1.22;
}

.step-grid > .step-card > p {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  width: 100% !important;
  max-width: 100%;
  margin: 18px 0 0 !important;
  color: #aebdca;
}

.step-card-art {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  display: grid !important;
  place-items: center;
  width: 168px !important;
  height: 150px !important;
  min-width: 0;
  overflow: visible;
  pointer-events: none;
}

.step-card-art img {
  display: block;
  width: 158px !important;
  height: 142px !important;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  opacity: .94;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    drop-shadow(0 0 12px rgba(var(--accent-rgb), .16))
    drop-shadow(0 0 26px rgba(var(--accent-rgb), .10));
}

/* Nežen svetlobni sloj na desnem delu kartice poveže ilustracijo s kartico. */
.step-grid > .step-card::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 190px;
  height: 170px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .055), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.step-card-heading,
.step-grid > .step-card > p,
.step-card-art {
  position: relative;
  z-index: 1;
}

.step-grid > .step-card:hover .step-card-art img {
  opacity: 1;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    brightness(1.045)
    drop-shadow(0 0 14px rgba(var(--accent-rgb), .22))
    drop-shadow(0 0 30px rgba(var(--accent-rgb), .12));
}

@media (min-width: 1500px) {
  .step-grid > .step-card {
    grid-template-columns: minmax(0, 1fr) 178px;
  }

  .step-card-art {
    width: 178px !important;
    height: 158px !important;
  }

  .step-card-art img {
    width: 168px !important;
    height: 150px !important;
  }
}

@media (max-width: 900px) {
  .step-grid {
    grid-template-columns: 1fr !important;
  }

  .step-grid > .step-card {
    grid-template-columns: minmax(0, 1fr) 150px;
    min-height: 190px;
  }

  .step-card-art {
    width: 150px !important;
    height: 136px !important;
  }

  .step-card-art img {
    width: 142px !important;
    height: 130px !important;
  }
}

@media (max-width: 560px) {
  .step-grid > .step-card {
    grid-template-columns: minmax(0, 1fr) 92px;
    column-gap: 12px;
    min-height: 0;
    padding: 20px !important;
  }

  .step-card-heading h3 {
    font-size: 18px;
  }

  .step-card-art {
    width: 92px !important;
    height: 86px !important;
    align-self: start;
  }

  .step-card-art img {
    width: 88px !important;
    height: 82px !important;
  }

  .step-grid > .step-card::after {
    width: 110px;
    height: 110px;
  }
}


.preproduction-card {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 28px;
  align-items: center;
  overflow: hidden;
  min-height: 286px;
}

.preproduction-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.preproduction-copy p {
  max-width: 720px;
}

.preproduction-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 250px;
  min-height: 210px;
  pointer-events: none;
}

.preproduction-art::before {
  content: "";
  position: absolute;
  inset: 10% -8% 5% -12%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(var(--accent-rgb), .080),
      rgba(var(--accent-rgb), .025) 45%,
      transparent 72%
    );
  pointer-events: none;
}

.preproduction-art img {
  position: relative;
  z-index: 1;
  display: block;
  width: 238px;
  height: 205px;
  object-fit: contain;
  object-position: center;
  opacity: .97;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    drop-shadow(0 0 14px rgba(var(--accent-rgb), .20))
    drop-shadow(0 0 34px rgba(var(--accent-rgb), .11));
  transition:
    filter .18s ease,
    opacity .18s ease !important;
}

.preproduction-card:hover .preproduction-art img {
  opacity: 1;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    brightness(1.045)
    drop-shadow(0 0 16px rgba(var(--accent-rgb), .24))
    drop-shadow(0 0 38px rgba(var(--accent-rgb), .13));
}

/* High contrast: motiv ostane čist in jasno ločen od ozadja. */
html[data-contrast="high"] .preproduction-art img {
  opacity: 1;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    brightness(1.10)
    contrast(1.06)
    drop-shadow(0 0 16px rgba(var(--accent-rgb), .24));
}

/* Reduced motion: brez animiranih sprememb. */
html[data-motion="reduced"] .preproduction-art img,
html[data-motion="reduced"] .preproduction-card:hover .preproduction-art img {
  transition: none !important;
  transform: none !important;
}

/* Pri srednjih širinah grafiko rahlo zmanjšamo. */
@media (max-width: 1180px) {
  .preproduction-card {
    grid-template-columns: minmax(0, 1fr) 205px;
    gap: 20px;
  }

  .preproduction-art {
    width: 205px;
    min-height: 185px;
  }

  .preproduction-art img {
    width: 198px;
    height: 176px;
  }
}

/* Ko je content-grid že enostolpčen, kartica ohrani sliko ob besedilu. */
@media (max-width: 900px) {
  .preproduction-card {
    grid-template-columns: minmax(0, 1fr) 180px;
    min-height: 250px;
  }

  .preproduction-art {
    width: 180px;
  }

  .preproduction-art img {
    width: 174px;
    height: 158px;
  }
}

/* Mobilno: slika pod besedilom, da se vsebina ne stiska. */
@media (max-width: 620px) {
  .preproduction-card {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .preproduction-art {
    width: 100%;
    min-height: 145px;
    justify-items: end;
  }

  .preproduction-art img {
    width: min(220px, 72vw);
    height: 145px;
  }
}


/* Terminal je enakovredna kartica oknu "Preizkus pred produkcijo". */
.content-grid:has(> .terminal) {
  align-items: stretch !important;
}

.content-grid > .terminal {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 286px;
}

.terminal {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .52) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--accent-rgb), .065), transparent 190px),
    linear-gradient(180deg, rgba(5,19,32,.95), rgba(2,10,18,.985)) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(var(--accent-rgb), .055),
    0 0 26px rgba(var(--accent-rgb), .045) !important;
}

/* Diskretna terminalska naslovna vrstica. */
.terminal-top {
  display: flex !important;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 15px;
  border-bottom: 1px solid rgba(var(--accent-rgb), .23) !important;
  background: rgba(0,0,0,.16);
}

.terminal-top span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .58);
  background: rgba(var(--accent-rgb), .13);
  box-shadow: 0 0 7px rgba(var(--accent-rgb), .14);
}

.terminal-top span:first-child {
  background: rgba(var(--accent-rgb), .68);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .42);
}

.terminal pre {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  margin: 0 !important;
  padding: 24px 26px 26px !important;
  overflow: auto;
  background: transparent !important;
  white-space: pre;
}

.terminal code {
  display: block;
  width: 100%;
  color: #d7e3eb !important;
  font-family:
    "Cascadia Code",
    "Cascadia Mono",
    Consolas,
    "Courier New",
    monospace !important;
  font-size: 13px !important;
  font-weight: 560;
  line-height: 1.72 !important;
  letter-spacing: .005em;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}

.terminal .prompt {
  color: var(--accent) !important;
  font-weight: 750;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), .30);
}

.terminal-command {
  color: #f2f7fa !important;
  font-weight: 650;
}

.terminal-label {
  color: #c0ced8 !important;
}

.terminal-colon {
  color: rgba(var(--accent-rgb), .72) !important;
  font-weight: 700;
}

.terminal-value-status {
  color: var(--accent) !important;
  font-weight: 700;
  text-shadow: 0 0 9px rgba(var(--accent-rgb), .18);
}

.terminal-value-purpose {
  color: #e4edf3 !important;
  font-weight: 620;
}

/* Hover naj poudari kartico, ne pa spremeni berljivosti kode. */
.terminal:hover {
  border-color: rgba(var(--accent-rgb), .78) !important;
  box-shadow:
    0 20px 58px rgba(0,0,0,.26),
    0 0 28px rgba(var(--accent-rgb), .085),
    inset 0 1px 0 rgba(var(--accent-rgb), .075) !important;
}

/* High contrast mora biti terminal posebej jasen. */
html[data-contrast="high"] .terminal {
  border-color: rgba(var(--accent-rgb), .90) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--accent-rgb), .10), transparent 190px),
    #01070d !important;
}

html[data-contrast="high"] .terminal code,
html[data-contrast="high"] .terminal-label,
html[data-contrast="high"] .terminal-value-purpose {
  color: #ffffff !important;
}

html[data-contrast="high"] .terminal-value-status,
html[data-contrast="high"] .terminal .prompt {
  color: hsl(var(--accent-h) 100% 68%) !important;
}

/* Mobilno – terminal ostane normalno velik in brez horizontalnega overflowa. */
@media (max-width: 760px) {
  .content-grid > .terminal {
    min-height: 250px;
  }

  .terminal pre {
    padding: 20px !important;
  }

  .terminal code {
    font-size: 12.5px !important;
    line-height: 1.68 !important;
  }
}


/* Semantične vrstice naslovnega slogana. */
.home-hero .hero-title-line {
  display: block;
  color: inherit !important;
}

.home-hero .hero-title-accent {
  display: inline !important;
  color: var(--accent) !important;
  text-shadow: 0 0 20px rgba(var(--accent-rgb), .35);
}

/* Hamburger tudi brez browser-default bele površine. */
.menu-btn {
  border: 1px solid rgba(var(--accent-rgb), .34);
  border-radius: 9px;
  color: #d7e8f3;
  background: rgba(2,10,18,.72);
  font: inherit;
  cursor: pointer;
}

.menu-btn:hover,
.menu-btn:focus-visible,
.menu-btn[aria-expanded="true"] {
  color: #fff;
  border-color: rgba(var(--accent-rgb), .68);
  background: rgba(var(--accent-rgb), .08);
}

/* Mobilna domača stran. */
@media (max-width: 760px) {
  html,
  body {
    max-width: 100vw !important;
  }

  .site-header {
    padding: 7px 0 !important;
  }

  .nav-wrap {
    width: calc(100% - 18px) !important;
    height: 70px !important;
    min-height: 70px !important;
    padding: 5px 9px !important;
    gap: 6px !important;
    border-radius: 14px !important;
    grid-template-columns: minmax(0,1fr) auto 38px !important;
  }

  .site-header .nav-wrap > .brand {
    overflow: hidden !important;
  }

  .site-header .brand img {
    width: auto !important;
    height: 46px !important;
    max-width: min(100%, 245px) !important;
  }

  .utility-menus {
    gap: 5px !important;
  }

  .utility-trigger {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
  }

  .menu-btn {
    display: grid !important;
    place-items: center;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .nav-wrap nav {
    top: calc(100% + 8px) !important;
    left: 9px !important;
    right: 9px !important;
    max-height: calc(100dvh - var(--site-header-h) - var(--site-footer-h) - 16px);
    overflow-y: auto;
  }

  /* Main ostane scrollable med headerjem in footerjem. */
  body > main {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: auto !important;
  }

  body:has(.home-hero) > main {
    display: block !important;
  }

  body:has(.home-hero) .home-hero {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body:has(.home-hero) .home-hero .hero-content {
    display: block !important;
    width: min(100% - 28px, var(--max)) !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 48px !important;
    padding-bottom: 42px !important;
  }

  .home-hero .hero-copy {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .home-hero .kicker {
    margin-bottom: 18px !important;
    font-size: 12px !important;
    letter-spacing: .17em !important;
  }

  .home-hero .hero-copy h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 22px !important;
    font-size: clamp(32px, 9.4vw, 42px) !important;
    line-height: 1.055 !important;
    letter-spacing: -.035em !important;
    overflow: visible !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .home-hero .hero-title-line {
    width: 100%;
    max-width: 100%;
  }

  .home-hero .line {
    width: 50px !important;
    margin: 0 0 22px !important;
  }

  .home-hero .hero-copy p {
    max-width: 100% !important;
    margin: 0 0 26px !important;
    font-size: 16px !important;
    line-height: 1.58 !important;
    color: #d2dde5 !important;
  }

  .home-hero .hero-copy p br {
    display: none !important;
  }

  /* Na telefonu oba CTA-ja sta kompaktna in takoj razumljiva. */
  .home-hero .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .home-hero .actions .btn.btn-with-icon {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 7px 16px !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    font-size: 13px !important;
    border-radius: 7px !important;
  }

  .home-hero .actions .btn.btn-with-icon .btn-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    margin: 0 !important;
  }

  /* Hero-features podvajajo spodnji capability strip, zato jih na telefonu
     skrijemo in s tem landing del ostane čist ter bistveno krajši. */
  .home-hero .hero-features {
    display: none !important;
  }

  .capability-strip {
    height: auto !important;
    min-height: 0 !important;
  }

  .capability-strip-inner {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    min-height: 0 !important;
  }

  .capability-strip a {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 8px 7px !important;
    font-size: 10.5px !important;
  }

  .capability-strip .cap-ico,
  .capability-strip .cap-ico.cap-image {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
  }

  .capability-strip .cap-ico.cap-image img {
    width: 25px !important;
    height: 25px !important;
  }

  /* Mobile footer: čitljiv, a ne zavzame preveč prostora. */
  :root {
    --site-footer-h: 58px;
  }

  .site-footer {
    height: var(--site-footer-h) !important;
    min-height: var(--site-footer-h) !important;
  }

  .site-footer-inner {
    min-height: var(--site-footer-h) !important;
  }

  .site-footer-brand strong,
  .site-footer-copy {
    font-size: 10px !important;
  }
}

/* Zelo ozki telefoni. */
@media (max-width: 380px) {
  .site-header .brand img {
    height: 42px !important;
    max-width: 190px !important;
  }

  .home-hero .hero-copy h1 {
    font-size: clamp(30px, 9vw, 35px) !important;
  }

  .home-hero .hero-copy p {
    font-size: 15.5px !important;
  }
}


/* DESKTOP/TABLET: prvotni izgled – belo besedilo, HUE samo na REŠITVE. */
@media (min-width: 761px) {
  .home-hero .hero-copy h1 {
    color: #f4f7fa !important;
  }

  /* Globalno pravilo h1 span iz osnovne teme ne sme obarvati vrstic modro. */
  .home-hero .hero-copy h1 > .hero-title-line {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    color: #f4f7fa !important;
    white-space: nowrap !important;
    text-shadow: 0 3px 16px rgba(0,0,0,.28) !important;
  }

  .home-hero .hero-copy h1 .hero-title-prefix {
    color: #f4f7fa !important;
    text-shadow: 0 3px 16px rgba(0,0,0,.28) !important;
  }

  .home-hero .hero-copy h1 .hero-title-accent {
    display: inline !important;
    color: var(--accent) !important;
    text-shadow: 0 0 20px rgba(var(--accent-rgb), .35) !important;
  }
}


@media (max-width: 760px) {
  .home-hero .hero-copy h1 > .hero-title-line {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    color: #f4f7fa !important;
    white-space: normal !important;
    text-shadow: 0 3px 16px rgba(0,0,0,.28) !important;
  }

  .home-hero .hero-copy h1 .hero-title-prefix {
    color: #f4f7fa !important;
  }

  .home-hero .hero-copy h1 .hero-title-accent {
    color: var(--accent) !important;
  }
}


.btn.equal-choice {
  position: relative;
  color: var(--accent-soft) !important;
  border: 1px solid rgba(var(--accent-rgb), .68) !important;
  background:
    linear-gradient(
      180deg,
      rgba(var(--accent-rgb), .035),
      rgba(0, 6, 14, .76)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--accent-rgb), .045),
    0 0 0 1px rgba(0,0,0,.10) !important;
  filter: none !important;
  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease !important;
}

.btn.equal-choice:hover,
.btn.equal-choice:focus-visible {
  color: #ffffff !important;
  border-color: rgba(var(--accent-rgb), .96) !important;
  background:
    linear-gradient(
      180deg,
      rgba(var(--accent-rgb), .92),
      rgba(var(--accent-rgb), .58)
    ) !important;
  box-shadow:
    0 0 26px rgba(var(--accent-rgb), .17),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* DOMOV – oba glavna navigacijska CTA-ja sta enakovredna. */
.home-hero .actions .btn.equal-choice {
  color: #c8e5f7 !important;
  border-color: rgba(var(--accent-rgb), .70) !important;
  background:
    linear-gradient(
      180deg,
      rgba(var(--accent-rgb), .035),
      rgba(1, 9, 18, .78)
    ) !important;
}

.home-hero .actions .btn.equal-choice:hover,
.home-hero .actions .btn.equal-choice:focus-visible {
  color: #fff !important;
  background:
    linear-gradient(
      180deg,
      rgba(var(--accent-rgb), .94),
      rgba(var(--accent-rgb), .60)
    ) !important;
}

/* PROFIL – oba CTA-ja enaka tudi pri višini/širini. */
.profile-choice .profile-cta.equal-choice {
  min-width: 250px;
  justify-content: center;
}

/* LABORATORIJ hero – oba CTA-ja uporabljata identično geometrijo. */
.lab-hero-actions .btn.equal-choice {
  min-width: 260px !important;
  justify-content: center !important;
}

/* PRISTOP – oba CTA-ja sta po dimenzijah res enakovredna.
   Ikona Laboratorij ostane, vendar ne poveča višine gumba. */
.professional-close-actions.equal-choice-group {
  display: grid !important;
  grid-template-columns: repeat(2, 220px);
  gap: 10px !important;
  align-items: stretch;
}

.professional-close-actions.equal-choice-group .btn.equal-choice {
  width: 220px !important;
  min-width: 220px !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  justify-content: center !important;
  gap: 9px !important;
}

.professional-close-actions.equal-choice-group .btn.equal-choice .btn-icon {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
}

/* High contrast */
html[data-contrast="high"] .btn.equal-choice {
  color: #ffffff !important;
  border-color: rgba(var(--accent-rgb), .88) !important;
  background: rgba(var(--accent-rgb), .10) !important;
}

html[data-contrast="high"] .btn.equal-choice:hover,
html[data-contrast="high"] .btn.equal-choice:focus-visible {
  border-color: hsl(var(--accent-h) 100% 78%) !important;
  background:
    linear-gradient(
      180deg,
      rgba(var(--accent-rgb), 1),
      rgba(var(--accent-rgb), .67)
    ) !important;
}

/* Reduced motion */
html[data-motion="reduced"] .btn.equal-choice {
  transition: none !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .profile-choice .profile-cta.equal-choice,
  .lab-hero-actions .btn.equal-choice {
    width: 100% !important;
    min-width: 0 !important;
  }

  .professional-close-actions.equal-choice-group {
    width: 100%;
    grid-template-columns: 1fr !important;
  }

  .professional-close-actions.equal-choice-group .btn.equal-choice {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/*
  Arhitektura podstrani:
    FIXED HEADER
    FIXED GLOBAL BACKGROUND
    SCROLLABLE MAIN CONTENT
    FIXED FOOTER

  Ozadje je fizično ločeno od <main>, zato se nikoli ne premika skupaj
  z besedilom, karticami ali slikami.
*/

.site-global-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #020914;
}

.site-global-bg::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    url("hero-bg.webp?v=1.8.2") center 48% / cover no-repeat;
  filter: hue-rotate(var(--theme-hue-rotate));
  transform: scale(1.006);
  transform-origin: center;
}

/* Podstrani: ista scena, vendar namenoma temnejša kot na DOMOV. */
.site-global-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 52% 42%,
      rgba(0, 8, 18, .20),
      rgba(1, 7, 15, .47) 48%,
      rgba(1, 6, 13, .68) 100%
    ),
    linear-gradient(
      180deg,
      rgba(1, 7, 15, .42),
      rgba(1, 7, 15, .66)
    );
}

/* Header/footer sta že fixed; samo eksplicitno ostaneta nad ozadjem/vsebino. */
body:has(> .site-global-bg) > .site-header,
body:has(> .site-global-bg) > .site-footer {
  z-index: 60 !important;
}

/* Premika se samo main. */
body:has(> .site-global-bg) > main {
  z-index: 2 !important;
  background: transparent !important;
}

/* ---------------------------------------------------------------------
   KOMPAKTEN NASLOVNI BLOK PODSTRANI
   --------------------------------------------------------------------- */

body:has(> .site-global-bg) main.subpage > .page-hero {
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  background:
    linear-gradient(
      180deg,
      rgba(2, 10, 19, .17),
      rgba(2, 10, 19, .34)
    ) !important;
  border-bottom: 1px solid rgba(var(--accent-rgb), .25) !important;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

/* Stari hero background na podstraneh ni več potreben. */
body:has(> .site-global-bg) main.subpage > .page-hero > .theme-hero-bg {
  display: none !important;
}

body:has(> .site-global-bg) .page-hero-frame {
  height: 260px !important;
  min-height: 260px !important;
}

body:has(> .site-global-bg) .page-hero-frame > .breadcrumb {
  top: 28px !important;
}

body:has(> .site-global-bg) .page-hero-copy {
  top: 70px !important;
  width: min(900px, 78%) !important;
}

body:has(> .site-global-bg) .page-hero-copy > .section-label {
  margin-bottom: 10px !important;
}

body:has(> .site-global-bg) .page-hero-copy > h1 {
  margin-bottom: 13px !important;
  font-size: clamp(44px, 4.3vw, 60px) !important;
}

body:has(> .site-global-bg) .page-hero-copy > .page-lead {
  min-height: 0 !important;
  max-width: 820px !important;
  color: #d2dde5 !important;
}

/* LABORATORIJ ima še CTA vrstico. */
body:has(> .site-global-bg) .page-hero-copy > .lab-hero-actions {
  margin-top: 13px !important;
}

body:has(> .site-global-bg) .page-hero-copy > .lab-hero-actions .btn {
  height: 50px !important;
  min-height: 50px !important;
}

body:has(> .site-global-bg) .page-hero-copy > .lab-hero-actions .btn-icon {
  width: 36px !important;
  height: 36px !important;
  flex-basis: 36px !important;
}

/* ---------------------------------------------------------------------
   VSEBINSKE SEKCIJE: ozadje ostane vidno, vendar ne moti besedila.
   --------------------------------------------------------------------- */

body:has(> .site-global-bg) main.subpage > .content-section,
body:has(> .site-global-bg) main.subpage > .content-section.alt {
  position: relative;
  background:
    linear-gradient(
      180deg,
      rgba(2, 9, 20, .57),
      rgba(2, 9, 20, .67)
    ) !important;
  border-bottom-color: rgba(var(--accent-rgb), .19) !important;
  backdrop-filter: blur(1.8px);
  -webkit-backdrop-filter: blur(1.8px);
}

/* Prvi content blok je bližje naslovu, ker je hero zdaj kompaktnejši. */
body:has(> .site-global-bg) main.subpage > .page-hero + .content-section {
  padding-top: 54px !important;
}

/* Kartice so malenkost bolj prosojne kot prej, vendar še vedno dovolj čitljive. */
body:has(> .site-global-bg) .content-card,
body:has(> .site-global-bg) .info-panel,
body:has(> .site-global-bg) .detail-card,
body:has(> .site-global-bg) .project-detail,
body:has(> .site-global-bg) .case-card,
body:has(> .site-global-bg) .profile-choice,
body:has(> .site-global-bg) .ai-copy,
body:has(> .site-global-bg) .ai-principles,
body:has(> .site-global-bg) .contact-identity,
body:has(> .site-global-bg) .contact-guidance,
body:has(> .site-global-bg) .credential-card,
body:has(> .site-global-bg) .technology-matrix article,
body:has(> .site-global-bg) .education-cards article,
body:has(> .site-global-bg) .principle-grid article,
body:has(> .site-global-bg) .step-grid article,
body:has(> .site-global-bg) .terminal {
  background:
    linear-gradient(
      180deg,
      rgba(4, 17, 30, .88),
      rgba(2, 10, 18, .92)
    ) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Footer/header ostaneta vizualno stabilna in neprosojna. */
body:has(> .site-global-bg) .site-header {
  background: rgba(2, 9, 17, .965) !important;
}

body:has(> .site-global-bg) .site-footer {
  background: rgba(1, 7, 13, .985) !important;
}

/* ---------------------------------------------------------------------
   MOBILNO
   --------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Mobilno ozadje je temnejše, ker je manj prostora okoli besedila. */
  .site-global-bg::before {
    background-position: 58% center;
    transform: scale(1.015);
  }

  .site-global-bg::after {
    background:
      linear-gradient(
        180deg,
        rgba(1, 7, 14, .61),
        rgba(1, 7, 14, .78)
      );
  }

  body:has(> .site-global-bg) main.subpage > .page-hero {
    height: 285px !important;
    min-height: 285px !important;
    max-height: 285px !important;
  }

  body:has(> .site-global-bg) .page-hero-frame {
    height: 285px !important;
    min-height: 285px !important;
  }

  body:has(> .site-global-bg) .page-hero-frame > .breadcrumb {
    top: 22px !important;
  }

  body:has(> .site-global-bg) .page-hero-copy {
    top: 63px !important;
    width: 100% !important;
  }

  body:has(> .site-global-bg) .page-hero-copy > h1 {
    font-size: clamp(38px, 11vw, 46px) !important;
    margin-bottom: 12px !important;
  }

  body:has(> .site-global-bg) .page-hero-copy > .page-lead {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  body:has(> .site-global-bg) .page-hero-copy > .lab-hero-actions {
    margin-top: 11px !important;
  }

  body:has(> .site-global-bg) .page-hero-copy > .lab-hero-actions .btn {
    height: 46px !important;
    min-height: 46px !important;
  }

  body:has(> .site-global-bg) main.subpage > .content-section,
  body:has(> .site-global-bg) main.subpage > .content-section.alt {
    background: rgba(2, 9, 18, .72) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}

/* Reduced motion nima vpliva na ozadje – ozadje je že statično. */
html[data-motion="reduced"] .site-global-bg::before {
  transform: scale(1.006) !important;
  transition: none !important;
}

/* High contrast: vsebino dodatno potemnimo, ozadje pa ostane prepoznavno. */
html[data-contrast="high"] .site-global-bg::after {
  background:
    linear-gradient(
      180deg,
      rgba(0, 4, 9, .64),
      rgba(0, 4, 9, .80)
    );
}

html[data-contrast="high"] body:has(> .site-global-bg) main.subpage > .content-section,
html[data-contrast="high"] body:has(> .site-global-bg) main.subpage > .content-section.alt {
  background: rgba(1, 6, 12, .78) !important;
}


/* Sama slika je nekoliko bolj prisotna. */
.site-global-bg::before {
  opacity: .96 !important;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    brightness(1.08)
    saturate(1.06) !important;
}


.site-global-bg::after {
  background:
    radial-gradient(
      circle at 52% 42%,
      rgba(0, 8, 18, .04),
      rgba(1, 7, 15, .13) 48%,
      rgba(1, 6, 13, .29) 100%
    ),
    linear-gradient(
      180deg,
      rgba(1, 7, 15, .12),
      rgba(1, 7, 15, .27)
    ) !important;
}

/* Naslovni blok naj ozadja ne "ugasne". */
body:has(> .site-global-bg) main.subpage > .page-hero {
  background:
    linear-gradient(
      180deg,
      rgba(2, 10, 19, .035),
      rgba(2, 10, 19, .12)
    ) !important;
  backdrop-filter: blur(.7px) !important;
  -webkit-backdrop-filter: blur(.7px) !important;
}

/* Vsebinski pasovi: dovolj temni za tekst, a skozi njih je scena še zaznavna. */
body:has(> .site-global-bg) main.subpage > .content-section,
body:has(> .site-global-bg) main.subpage > .content-section.alt {
  background:
    linear-gradient(
      180deg,
      rgba(2, 9, 20, .34),
      rgba(2, 9, 20, .44)
    ) !important;
  backdrop-filter: blur(1.1px) !important;
  -webkit-backdrop-filter: blur(1.1px) !important;
}

/* Kartice ostanejo bolj polne – tekst mora imeti jasen kontrast. */
body:has(> .site-global-bg) .content-card,
body:has(> .site-global-bg) .info-panel,
body:has(> .site-global-bg) .detail-card,
body:has(> .site-global-bg) .project-detail,
body:has(> .site-global-bg) .case-card,
body:has(> .site-global-bg) .profile-choice,
body:has(> .site-global-bg) .ai-copy,
body:has(> .site-global-bg) .ai-principles,
body:has(> .site-global-bg) .contact-identity,
body:has(> .site-global-bg) .contact-guidance,
body:has(> .site-global-bg) .credential-card,
body:has(> .site-global-bg) .technology-matrix article,
body:has(> .site-global-bg) .education-cards article,
body:has(> .site-global-bg) .principle-grid article,
body:has(> .site-global-bg) .step-grid article,
body:has(> .site-global-bg) .terminal {
  background:
    linear-gradient(
      180deg,
      rgba(4, 17, 30, .79),
      rgba(2, 10, 18, .84)
    ) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

/* Mobilno: nekoliko temnejše kot desktop, a ne več skoraj črno. */
@media (max-width: 760px) {
  .site-global-bg::before {
    opacity: .94 !important;
    filter:
      hue-rotate(var(--theme-hue-rotate))
      brightness(1.04)
      saturate(1.04) !important;
  }

  .site-global-bg::after {
    background:
      linear-gradient(
        180deg,
        rgba(1, 7, 14, .28),
        rgba(1, 7, 14, .46)
      ) !important;
  }

  body:has(> .site-global-bg) main.subpage > .content-section,
  body:has(> .site-global-bg) main.subpage > .content-section.alt {
    background: rgba(2, 9, 18, .51) !important;
  }
}

/* High contrast ostane namenoma temnejši. */


html[data-contrast="high"] body:has(> .site-global-bg) main.subpage > .content-section,
html[data-contrast="high"] body:has(> .site-global-bg) main.subpage > .content-section.alt {
  background: rgba(1, 6, 12, .67) !important;
}


:root {
  /*
    Home capability strip je na normalnem desktopu 88 px.
    Na DOMOV JS to vrednost še natančno prepiše z dejansko izmerjeno višino.
  */
  --global-home-strip-h: 88px;
}

@media (max-width: 760px) {
  :root {
    /* 2 mobilni vrstici capability elementov po približno 58 px. */
    --global-home-strip-h: 116px;
  }
}

/*
  Celoten globalni sloj je fiksiran na viewport.
  Sama slika (::before) pa uporablja TOČNO isti virtualni okvir,
  ki ga ima hero na prvi strani:
      top    = spodnji rob headerja
      bottom = footer + capability strip

  Zato 'cover' izreže 1920×1080 sliko enako na vseh straneh.
*/
.site-global-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: #020914 !important;
}

.site-global-bg::before {
  content: "" !important;
  position: absolute !important;
  top: var(--site-header-h) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(var(--site-footer-h) + var(--global-home-strip-h)) !important;
  width: auto !important;
  height: auto !important;

  background:
    url("hero-bg.webp?v=1.8.2")
    center 48% / cover no-repeat !important;

  opacity: .96 !important;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    brightness(1.08)
    saturate(1.06) !important;

  transform: scale(1.002) !important;
  transform-origin: center !important;
}

/*
  Spodnji pas, ki ga na DOMOV zaseda capability strip, je na podstraneh
  samo diskretna nadaljevalna površina. Ne vpliva na položaj slike.
*/
.site-global-bg {
  background:
    linear-gradient(
      180deg,
      #020914 0%,
      #020914 calc(100% - var(--site-footer-h) - var(--global-home-strip-h)),
      #030b14 calc(100% - var(--site-footer-h) - var(--global-home-strip-h)),
      #020914 100%
    ) !important;
}

/* Enak overlay na vseh straneh; na DOMOV ga ne uporabljamo čez hero vsebino. */
.site-global-bg::after {
  content: "" !important;
  position: absolute !important;
  top: var(--site-header-h) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(var(--site-footer-h) + var(--global-home-strip-h)) !important;

  background:
    radial-gradient(
      circle at 52% 42%,
      rgba(0, 8, 18, .04),
      rgba(1, 7, 15, .13) 48%,
      rgba(1, 6, 13, .29) 100%
    ),
    linear-gradient(
      180deg,
      rgba(1, 7, 15, .12),
      rgba(1, 7, 15, .27)
    ) !important;
}

/*
  Ključni del: stari lokalni hero background je povsod izključen,
  tudi na DOMOV. Tako ni več dveh različnih cropov iste slike.
*/
body:has(> .site-global-bg) .home-hero > .theme-hero-bg,
body:has(> .site-global-bg) main.subpage > .page-hero > .theme-hero-bg {
  display: none !important;
}

/* DOMOV mora ostati nad globalnim ozadjem in brez lastnega backgrounda. */
body:has(> .site-global-bg) .home-hero {
  background: transparent !important;
}

/*
  Na DOMOV ne dodajamo podstranskega overlay občutka.
  Hero ostaja optično čim bližje dosedanjemu prikazu.
*/
body:has(.home-hero):has(> .site-global-bg) .site-global-bg::after {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .06),
      rgba(0, 0, 0, .22)
    ) !important;
}


body:has(> .site-global-bg) > main {
  position: fixed !important;
  z-index: 2 !important;
  background: transparent !important;
}

/* Mobilno: isti princip in ISTA geometrija med vsemi mobilnimi stranmi. */
@media (max-width: 760px) {
  .site-global-bg::before {
    background-position: center 48% !important;
    transform: scale(1.002) !important;
  }

  .site-global-bg::after {
    background:
      linear-gradient(
        180deg,
        rgba(1, 7, 14, .28),
        rgba(1, 7, 14, .46)
      ) !important;
  }

  body:has(.home-hero):has(> .site-global-bg) .site-global-bg::after {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, .06),
        rgba(0, 0, 0, .22)
      ) !important;
  }
}

/* High contrast ostane dodatno zaščiten za berljivost. */
html[data-contrast="high"] .site-global-bg::after {
  background:
    linear-gradient(
      180deg,
      rgba(0, 4, 9, .43),
      rgba(0, 4, 9, .61)
    ) !important;
}


@media (min-width: 1051px) {
  .home-hero .hero-content {
    grid-template-columns: minmax(0, 1fr) 320px !important;
  }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .home-hero .hero-content {
    grid-template-columns: minmax(0, 1fr) 220px !important;
    gap: 34px !important;
  }
}

.capability-strip a {
  gap: 13px !important;
}

.capability-strip .cap-ico,
.capability-strip .cap-ico.cap-image {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 27px !important;
  line-height: 1 !important;
}

.capability-strip .cap-ico.cap-image img {
  width: 39px !important;
  height: 39px !important;
  object-fit: contain !important;
  display: block !important;
  filter:
    brightness(1.06)
    drop-shadow(0 0 10px rgba(var(--accent-rgb), .24))
    drop-shadow(0 0 19px rgba(var(--accent-rgb), .11)) !important;
}

.capability-strip .cap-ico:not(.cap-image) {
  font-size: 25px !important;
  font-weight: 500 !important;
  letter-spacing: -.03em !important;
  color: var(--accent) !important;
  text-shadow: 0 0 13px rgba(var(--accent-rgb), .23);
}

.capability-strip a:hover .cap-ico.cap-image img {
  filter:
    brightness(1.18)
    drop-shadow(0 0 13px rgba(var(--accent-rgb), .40))
    drop-shadow(0 0 24px rgba(var(--accent-rgb), .20)) !important;
}

.capability-strip a:hover .cap-ico:not(.cap-image) {
  text-shadow:
    0 0 12px rgba(var(--accent-rgb), .65),
    0 0 22px rgba(var(--accent-rgb), .30) !important;
}

@media (max-width: 760px) {
  .capability-strip a {
    min-height: 64px !important;
    gap: 9px !important;
  }

  .capability-strip .cap-ico,
  .capability-strip .cap-ico.cap-image {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  .capability-strip .cap-ico.cap-image img {
    width: 32px !important;
    height: 32px !important;
  }

  .capability-strip .cap-ico:not(.cap-image) {
    font-size: 21px !important;
  }
}


/*
  Celoten levi vsebinski sklop premaknemo navzgor.
  Premik je namenoma zmeren: dovolj, da zmanjša prazen pas pod glavo,
  brez poseganja v fiksni header ali capability trak.
*/
@media (min-width: 1201px) {
  .home-hero .hero-copy {
    transform: translateY(-52px) !important;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .home-hero .hero-copy {
    transform: translateY(-38px) !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .home-hero .hero-copy {
    transform: translateY(-24px) !important;
  }
}

/*
  Prve štiri capability ikone imajo v izvornih PNG-jih več prosojnega roba,
  zato jih povečamo optično, ne pa tudi njihovih nosilcev oziroma višine traku.
*/
@media (min-width: 761px) {
  .capability-strip a:nth-child(-n/**/+4) .cap-ico.cap-image img {
    width: 47px !important;
    height: 47px !important;
    max-width: none !important;
    max-height: none !important;
  }

  
  .capability-strip a:nth-child(6) .cap-ico.cap-image img {
    width: 39px !important;
    height: 39px !important;
  }
}

@media (max-width: 760px) {
  /*
    Na telefonu hero ostane na obstoječem položaju; tam je vertikalni prostor
    bistveno bolj omejen. Optično povečanje ikon je manj agresivno.
  */
  .home-hero .hero-copy {
    transform: none !important;
  }

  .capability-strip a:nth-child(-n/**/+4) .cap-ico.cap-image img {
    width: 37px !important;
    height: 37px !important;
    max-width: none !important;
    max-height: none !important;
  }

  .capability-strip a:nth-child(6) .cap-ico.cap-image img {
    width: 32px !important;
    height: 32px !important;
  }
}

/* Reduced motion: statični premik ni animacija, zato ostane aktiven. */
html[data-motion="reduced"] .home-hero .hero-copy {
  transition: none !important;
}


.footer-back-icon {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(var(--accent-rgb), .56) !important;
  border-radius: 50% !important;
  background: rgba(var(--accent-rgb), .035) !important;
  color: var(--accent) !important;
  line-height: 1 !important;
  font-size: 0 !important;
  box-sizing: border-box !important;
}

.footer-back-icon-svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  overflow: visible !important;
  transform: translateX(-0.1px) !important;
}

.footer-back-icon-svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.95 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;
}

.site-footer a:hover .footer-back-icon,
.site-footer a:focus-visible .footer-back-icon {
  border-color: rgba(var(--accent-rgb), .90) !important;
  background: rgba(var(--accent-rgb), .10) !important;
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .14) !important;
}

@media (max-width: 760px) {
  .footer-back-icon {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  .footer-back-icon-svg {
    width: 17px !important;
    height: 17px !important;
  }
}

html[data-contrast="high"] .footer-back-icon {
  border-color: rgba(var(--accent-rgb), .95) !important;
  color: #fff !important;
}


/* Kartici sta fleksibilna stolpca. Ker CSS Grid vrstico že raztegne na višino
   višje kartice, auto zgornji odmik oba CTA-ja poravna na isti spodnji rob. */
body.profile-page .profile-choice {
  display: flex !important;
  flex-direction: column !important;
}

body.profile-page .profile-choice .profile-cta {
  margin-top: auto !important;
  align-self: flex-start;
}

/* Desktop: odstranjena je samo odvečna vertikalna rezerva PROFILA.
   Ne skrivamo overflowa, zato se pri nizkem viewportu ali povečavi scroll
   samodejno pojavi takrat, ko ga uporabnik dejansko potrebuje. */
@media (min-width: 901px) {
  body.profile-page:has(> .site-global-bg) main.subpage > .page-hero {
    height: 230px !important;
    min-height: 214px !important;
    max-height: 214px !important;
  }

  body.profile-page:has(> .site-global-bg) .page-hero-frame {
    height: 230px !important;
    min-height: 214px !important;
  }

  body.profile-page:has(> .site-global-bg) .page-hero-frame > .breadcrumb {
    top: 22px !important;
  }

  body.profile-page:has(> .site-global-bg) .page-hero-copy {
    top: 54px !important;
  }

  body.profile-page:has(> .site-global-bg) main.subpage > .page-hero + .content-section {
    padding-top: 32px !important;
    padding-bottom: 18px !important;
  }
}


@media (min-width: 901px) {
  /* Enotna ciljna višina za glavne podstrani. */
  body:has(main.subpage) main.subpage > .page-hero {
    height: 290px !important;
    min-height: 290px !important;
    max-height: 290px !important;
  }

  body:has(main.subpage) main.subpage > .page-hero > .theme-hero-bg {
    height: 290px !important;
  }

  body:has(main.subpage) .page-hero-frame {
    height: 290px !important;
    min-height: 290px !important;
  }

  
  body.profile-page:has(> .site-global-bg) main.subpage > .page-hero {
    height: 290px !important;
    min-height: 290px !important;
    max-height: 290px !important;
  }

  body.profile-page:has(> .site-global-bg) .page-hero-frame {
    height: 290px !important;
    min-height: 290px !important;
  }
}


@media (min-width: 901px) {
  
  body:has(main.subpage) .page-hero-frame > .breadcrumb {
    top: 22px !important;
  }

  body:has(main.subpage) .page-hero-copy {
    top: 54px !important;
  }

  /* Enotna razdalja od ločilne črte do prvega vsebinskega bloka. */
  body:has(> .site-global-bg) main.subpage > .page-hero + .content-section {
    padding-top: 32px !important;
  }

  /* STORITVE so imele še lasten margin-top:32px, zato je bil razmak dvojni. */
  body:has(> .site-global-bg) main.subpage > .page-hero + .content-section > .service-detail-grid {
    margin-top: 0 !important;
  }
}


@media (min-width: 1181px) {
  .home-hero .hero-content {
    isolation: isolate;
  }

  .home-hero .hero-copy {
    position: relative;
    z-index: 2;
  }

  .home-hero .hero-visionaries {
    position: absolute;
    top: clamp(14px, 2.4vh, 24px);
    right: clamp(-8px, .6vw, 10px);
    z-index: 1;
    width: clamp(445px, 38vw, 560px);
    margin: 0;
    transform: none;
    pointer-events: none;
    user-select: none;
  }

  .home-hero .hero-visionaries img {
    display: block;
    width: 100%;
    height: auto;
    opacity: .78;
    mix-blend-mode: screen;
    filter:
      hue-rotate(var(--theme-hue-rotate))
      saturate(1.06)
      brightness(.96)
      drop-shadow(0 0 20px rgba(var(--accent-rgb), .14));
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.82) 6%, #000 16%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.82) 6%, #000 16%, #000 100%);
  }
}

@media (max-width: 1180px) {
  .home-hero .hero-visionaries {
    display: none;
  }
}

html[data-contrast="high"] .home-hero .hero-visionaries img {
  opacity: .62;
}


@media (min-width: 1181px) {
  .home-hero .hero-visionaries {
    right: clamp(-70px, -4.6vw, -54px);
  }
}


@media (min-width: 1181px) {
  .home-hero .visionary-quotes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 1.8vw, 30px);
    margin-top: clamp(-18px, -1.1vh, -10px);
    padding: 0 clamp(10px, 1vw, 16px);
  }

  .home-hero .visionary-quote {
    min-width: 0;
    margin: 0;
    padding: 10px 3px 0;
    border-top: 1px solid rgba(var(--accent-rgb), .45);
    background: transparent;
    text-align: center;
  }

  .home-hero .visionary-quote p {
    margin: 0;
    color: rgba(226, 238, 247, .86);
    font-size: clamp(11.5px, .7vw, 13px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.42;
    letter-spacing: .005em;
    text-wrap: balance;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .92), 0 0 16px rgba(0, 8, 18, .78);
  }

  .home-hero .visionary-quote cite {
    display: block;
    margin-top: 7px;
    color: var(--accent);
    font-size: 9.5px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(var(--accent-rgb), .3);
  }
}

html[data-contrast="high"] .home-hero .visionary-quote {
  border-top-color: var(--accent) !important;
}

html[data-contrast="high"] .home-hero .visionary-quote p {
  color: #fff !important;
}


/* Temna sistemska shema prepreči svetle privzete kontrolnike med nalaganjem. */
:root {
  color-scheme: dark;
}

/* Vsi dejanski drsni vsebniki sledijo izbranemu barvnemu profilu. */
:where(
  body > main,
  .help-panes,
  .settings-panel-pro,
  .utility-panel,
  .nav-wrap nav,
  .terminal pre
) {
  scrollbar-width: thin;
  scrollbar-color:
    hsl(var(--accent-h) 100% 50%)
    rgba(1, 10, 18, .78);
}

:where(
  body > main,
  .help-panes,
  .settings-panel-pro,
  .utility-panel,
  .nav-wrap nav,
  .terminal pre
)::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

:where(
  body > main,
  .help-panes,
  .settings-panel-pro,
  .utility-panel,
  .nav-wrap nav,
  .terminal pre
)::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(1, 10, 18, .78);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .10);
}

:where(
  body > main,
  .help-panes,
  .settings-panel-pro,
  .utility-panel,
  .nav-wrap nav,
  .terminal pre
)::-webkit-scrollbar-thumb {
  min-height: 40px;
  border: 2px solid #03101b;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    hsl(var(--accent-h) 100% 62%),
    hsl(var(--accent-h) 100% 40%)
  );
  box-shadow: 0 0 9px rgba(var(--accent-rgb), .28);
}

:where(
  body > main,
  .help-panes,
  .settings-panel-pro,
  .utility-panel,
  .nav-wrap nav,
  .terminal pre
)::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    hsl(var(--accent-h) 100% 70%),
    hsl(var(--accent-h) 100% 48%)
  );
}

:where(
  body > main,
  .help-panes,
  .settings-panel-pro,
  .utility-panel,
  .nav-wrap nav,
  .terminal pre
)::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

:where(
  body > main,
  .help-panes,
  .settings-panel-pro,
  .utility-panel,
  .nav-wrap nav,
  .terminal pre
)::-webkit-scrollbar-corner {
  background: rgba(1, 10, 18, .92);
}

/* Ročica barvnega spektra uporablja svetlejši ton trenutnega poudarka. */
.hue-slider::-webkit-slider-thumb {
  border-color: hsl(var(--accent-h) 100% 82%);
}

.hue-slider::-moz-range-thumb {
  border-color: hsl(var(--accent-h) 100% 82%);
}

.hue-slider:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), .86);
  outline-offset: 4px;
  border-radius: 999px;
}

/* Oba gumba 404 uporabljata enako barvno hierarhijo kot ostali CTA-gumbi. */
.page-404 .actions .btn.equal-choice {
  justify-content: center;
  color: var(--accent-soft) !important;
  border-color: rgba(var(--accent-rgb), .68) !important;
}

.page-404 .actions .btn.equal-choice:hover,
.page-404 .actions .btn.equal-choice:focus-visible {
  color: #fff !important;
  border-color: rgba(var(--accent-rgb), .96) !important;
}

@media (max-width: 760px) {
  .page-404 .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .page-404 .actions .btn.equal-choice {
    width: 100%;
  }
}


/* Stran 404 izkoristi celoten razpoložljivi prostor med glavo in nogo. */
body:has(main.subpage) main.subpage > .page-hero.page-404 {
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  display: grid !important;
  align-items: center !important;
  overflow: hidden !important;
  border-bottom: 0 !important;
  background:
    linear-gradient(90deg, rgba(1, 8, 17, .34), rgba(1, 8, 17, .08)) !important;
}

.page-404 .page-404-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .8fr);
  align-items: center;
  gap: clamp(34px, 5vw, 78px);
  width: min(var(--max), calc(100% - 42px));
  min-height: 100%;
  padding: clamp(24px, 4vh, 48px) 0;
}

.page-404 .page-404-copy {
  min-width: 0;
}

.page-404 .page-404-copy h1 {
  margin: 14px 0 18px;
  font-size: clamp(46px, 5.2vw, 74px);
  line-height: 1.02;
}

.page-404 .page-404-copy .page-lead {
  max-width: 640px;
}

.page-404 .page-404-visionaries {
  position: relative;
  justify-self: end;
  width: min(100%, 500px);
  min-width: 0;
  margin: 0;
  text-align: center;
}

.page-404 .page-404-visionaries img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .75;
  mix-blend-mode: screen;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    saturate(1.05)
    brightness(.94)
    drop-shadow(0 0 22px rgba(var(--accent-rgb), .15));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
  pointer-events: none;
  user-select: none;
}

.page-404 .page-404-visionaries figcaption {
  position: relative;
  z-index: 2;
  max-width: 460px;
  margin: clamp(-36px, -3.5vh, -24px) auto 0;
  padding: 12px 12px 0;
  border-top: 1px solid rgba(var(--accent-rgb), .46);
}

.page-404 .page-404-visionaries figcaption p {
  margin: 0;
  color: rgba(231, 241, 249, .9);
  font-size: clamp(12px, .78vw, 14px);
  font-style: italic;
  line-height: 1.5;
  text-wrap: balance;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .92);
}

.page-404 .page-404-visionaries figcaption span {
  display: block;
  margin-top: 7px;
  color: var(--accent);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}

html[data-contrast="high"] .page-404 .page-404-visionaries img {
  opacity: .62;
}

html[data-contrast="high"] .page-404 .page-404-visionaries figcaption {
  border-top-color: var(--accent) !important;
}

html[data-contrast="high"] .page-404 .page-404-visionaries figcaption p {
  color: #fff !important;
}


/* Večji ikoni ostajata omejeni samo na dve kartici strani PROFIL. */
body.profile-page .profile-choice .image-icon {
  width: 110px;
  height: 110px;
}

/* Ovoj sledi novi velikosti ikone in prepreči spremembo navpične poravnave. */
body.profile-page .profile-choice .profile-choice-icon.image-icon-wrap {
  min-height: 110px;
  margin-bottom: 14px !important;
}

/* Glavni opis in alineje so za eno stopnjo večji ter nekoliko kontrastnejši. */
body.profile-page .profile-choice p,
body.profile-page .profile-choice li {
  font-size: 15.5px !important;
  line-height: 1.66 !important;
}

body.profile-page .profile-choice p {
  color: #c5d3de;
}

body.profile-page .profile-choice li {
  color: #b4c6d4;
}

/* Puščica dopolni pomen povezave, vendar ostane podrejena besedilu gumba. */
body.profile-page .profile-choice .profile-cta.equal-choice {
  gap: 11px;
}

body.profile-page .profile-choice .profile-cta-arrow {
  color: var(--accent);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  transform: translateX(0);
  transition: transform .16s ease, color .16s ease;
}

body.profile-page .profile-choice .profile-cta:hover .profile-cta-arrow,
body.profile-page .profile-choice .profile-cta:focus-visible .profile-cta-arrow {
  color: #fff;
  transform: translateX(3px);
}

/* Na običajnem namizju je spodnji odmik kompaktnejši. Višje ikone in besedilo
   zapolnijo kartici, zato med njima in fiksno nogo ne ostaja velik prazen pas. */
@media (min-width: 901px) {
  body.profile-page:has(> .site-global-bg) main.subpage > .page-hero + .content-section {
    padding-bottom: 8px !important;
  }
}

/* Mobilne ikone so prav tako večje, vendar ostanejo prilagojene enemu stolpcu. */
@media (max-width: 760px) {
  body.profile-page .profile-choice .image-icon {
    width: 94px;
    height: 94px;
  }

  body.profile-page .profile-choice .profile-choice-icon.image-icon-wrap {
    min-height: 94px;
  }

  body.profile-page .profile-choice p,
  body.profile-page .profile-choice li {
    font-size: 14.5px !important;
  }
}

/* Nastavitvi dostopnosti ohranita jasen kontrast in miren prikaz. */
html[data-contrast="high"] body.profile-page .profile-choice p,
html[data-contrast="high"] body.profile-page .profile-choice li {
  color: #fff !important;
}

html[data-motion="reduced"] body.profile-page .profile-choice .profile-cta-arrow,
html[data-motion="reduced"] body.profile-page .profile-choice .profile-cta:hover .profile-cta-arrow,
html[data-motion="reduced"] body.profile-page .profile-choice .profile-cta:focus-visible .profile-cta-arrow {
  transform: none !important;
  transition: none !important;
}

@media (max-width: 900px) {
  body:has(main.subpage) main.subpage > .page-hero.page-404 {
    height: auto !important;
    min-height: 100% !important;
    overflow: auto !important;
  }

  .page-404 .page-404-layout {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 34px 0 30px;
  }

  .page-404 .page-404-copy {
    text-align: center;
  }

  .page-404 .page-404-copy .page-lead {
    margin-inline: auto;
  }

  .page-404 .actions {
    justify-content: center;
  }

  .page-404 .page-404-visionaries {
    justify-self: center;
    width: min(100%, 370px);
  }
}

@media (max-width: 760px) {
  .page-404 .page-404-layout {
    width: min(var(--max), calc(100% - 30px));
    padding: 26px 0 24px;
  }

  .page-404 .page-404-copy h1 {
    margin: 10px 0 13px;
    font-size: clamp(38px, 11vw, 48px);
  }

  .page-404 .page-404-copy .page-lead {
    font-size: 15px;
    line-height: 1.5;
  }

  .page-404 .page-404-copy .actions {
    margin-top: 20px;
  }

  .page-404 .page-404-visionaries {
    width: min(100%, 320px);
  }

  .page-404 .page-404-visionaries figcaption {
    margin-top: -26px;
    padding-inline: 4px;
  }
}


/* Skupni standard vsebinskega besedila je enak standardu strani PROFIL. */
main.subpage > .content-section {
  --content-copy-size: 15.5px;
  --content-copy-line-height: 1.66;
  --content-copy-color: #b8cad7;
}

/* Opisi, alineje in definicije v vsebinskih sekcijah uporabljajo enak ritem. */
main.subpage > .content-section :where(p, li, dd) {
  font-size: var(--content-copy-size);
  line-height: var(--content-copy-line-height);
}

/* Enoten kontrast za glavno in sekundarno vsebinsko besedilo. */
main.subpage > .content-section :where(
  .content-card,
  .info-panel,
  .detail-card,
  .case-card,
  .project-detail,
  .step-card,
  .principle-grid article,
  .technology-matrix article,
  .education-cards article,
  .credential-card,
  .ai-copy,
  .ai-use-grid article,
  .personal-ai-box,
  .personal-balance-box,
  .contact-identity,
  .contact-guidance,
  .preproduction-card
) :where(p, li, dd) {
  color: var(--content-copy-color);
}

/* Uvodno besedilo posamezne vsebinske sekcije sledi istemu standardu. */
main.subpage > .content-section .section-intro {
  max-width: 860px;
  color: #b7c8d5;
  font-size: var(--content-copy-size);
  line-height: var(--content-copy-line-height);
}

/* Naslovi druge in tretje ravni imajo enotna razmerja ter prelome. */
main.subpage > .content-section h2 {
  font-size: clamp(27px, 2vw, 30px);
  line-height: 1.2;
  text-wrap: balance;
}

main.subpage > .content-section h3 {
  line-height: 1.35;
  text-wrap: balance;
}

/* Kartice storitev in profila uporabljajo enako vizualno težo ikon. */
main.subpage > .content-section .detail-card .image-icon,
body.profile-page .profile-choice .image-icon {
  width: 110px;
  height: 110px;
}

main.subpage > .content-section .detail-card .image-icon-wrap,
body.profile-page .profile-choice .profile-choice-icon.image-icon-wrap {
  min-height: 110px;
  margin-bottom: 14px !important;
}

/* Glavne kartice dobijo enoten notranji odmik in mehkejši vertikalni ritem. */
main.subpage > .content-section :where(
  .content-card,
  .info-panel,
  .detail-card,
  .contact-identity,
  .contact-guidance,
  .ai-copy,
  .ai-principles
) {
  padding: clamp(28px, 2.5vw, 36px);
}

/* Gumbi na podstraneh imajo enako višino, tipografijo in poravnavo. */
main.subpage > .content-section .btn,
main.subpage > .page-hero:not(.page-404) .btn {
  min-height: 56px;
  height: 56px;
  padding-inline: 22px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  justify-content: center;
}

/* Manjše oznake ostanejo namenoma podrejene in niso umetno povečane. */
main.subpage > .content-section :where(
  .section-label,
  .tag,
  .edu-year,
  .career-year,
  .step-label,
  .credential-card > span,
  .expertise-item > span,
  .ai-point > span,
  .interest-groups span,
  .contact-collaboration > span
) {
  line-height: 1.35;
}

/* Visoki kontrast zagotovi popolnoma jasno besedilo tudi po novih pravilih. */
html[data-contrast="high"] main.subpage > .content-section :where(p, li, dd),
html[data-contrast="high"] main.subpage > .content-section .section-intro {
  color: #fff !important;
}

@media (max-width: 760px) {
  main.subpage > .content-section {
    --content-copy-size: 14.5px;
    --content-copy-line-height: 1.64;
  }

  main.subpage > .content-section h2 {
    font-size: clamp(25px, 7.4vw, 30px);
  }

  main.subpage > .content-section .detail-card .image-icon,
  body.profile-page .profile-choice .image-icon {
    width: 94px;
    height: 94px;
  }

  main.subpage > .content-section .detail-card .image-icon-wrap,
  body.profile-page .profile-choice .profile-choice-icon.image-icon-wrap {
    min-height: 94px;
  }

  main.subpage > .content-section .btn,
  main.subpage > .page-hero:not(.page-404) .btn {
    width: 100%;
    min-height: 54px;
    height: auto;
    padding-block: 12px;
    padding-inline: 16px;
    white-space: normal;
    text-align: center;
  }
}

:root {
  --site-footer-h: 72px;
}

.site-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: var(--site-footer-h) !important;
  min-height: var(--site-footer-h) !important;
  max-height: var(--site-footer-h) !important;
  overflow: hidden !important;
}

.site-footer-inner {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

@media (max-width: 760px) {
  :root {
    --site-footer-h: 58px;
  }
}

body.contact-page .contact-action.btn.equal-choice {
  min-height: 60px;
  height: 60px;
  gap: 12px;
  padding-inline: 14px 20px;
}

body.contact-page .contact-action-icon-wrap {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px;
  background: rgba(1, 8, 16, .20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 14px rgba(var(--accent-rgb), .13);
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

body.contact-page .contact-action-secondary .contact-action-icon-wrap {
  border-color: rgba(var(--accent-rgb), .42);
  background: rgba(var(--accent-rgb), .075);
}

body.contact-page .contact-action svg.contact-action-icon {
  width: 29px;
  height: 29px;
  flex: none;
  overflow: visible;
  fill: none;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .22));
}

body.contact-page .contact-action-icon .icon-main {
  fill: none;
  stroke: currentColor;
  opacity: .96;
}

body.contact-page .contact-action-icon .icon-accent {
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 1.85;
}

body.contact-page .contact-action-secondary .contact-action-icon .icon-accent {
  stroke: var(--accent);
}

body.contact-page .contact-action-icon .icon-node {
  fill: var(--accent-soft);
  stroke: none;
}

body.contact-page .contact-action-secondary .contact-action-icon .icon-node {
  fill: var(--accent);
}

body.contact-page .contact-action:hover .contact-action-icon-wrap,
body.contact-page .contact-action:focus-visible .contact-action-icon-wrap {
  border-color: var(--accent-soft);
  background: rgba(var(--accent-rgb), .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .11),
    0 0 18px rgba(var(--accent-rgb), .25);
  transform: translateY(-1px) scale(1.025);
}

body.contact-page .contact-action.is-copied .contact-action-icon .icon-accent {
  stroke: #55d995;
}

body.contact-page .contact-action.is-copied .contact-action-icon .icon-node {
  fill: #55d995;
}

html[data-motion="reduced"] body.contact-page .contact-action-icon-wrap,
html[data-motion="reduced"] body.contact-page .contact-action:hover .contact-action-icon-wrap,
html[data-motion="reduced"] body.contact-page .contact-action:focus-visible .contact-action-icon-wrap {
  transition: none;
  transform: none;
}

html[data-contrast="high"] body.contact-page .contact-action-icon-wrap {
  border-color: currentColor;
}

@media (max-width: 620px) {
  body.contact-page .contact-action.btn.equal-choice {
    min-height: 60px;
    height: auto;
    padding: 10px 16px;
  }

  body.contact-page .contact-action-icon-wrap {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  body.contact-page .contact-action svg.contact-action-icon {
    width: 27px;
    height: 27px;
  }
}

.case-card .case-media > [data-theme-project],
.project-detail [data-theme-project] {
  filter:
    hue-rotate(var(--theme-project-hue-rotate, 0deg))
    saturate(1.02)
    drop-shadow(0 0 10px rgba(var(--accent-rgb), .09)) !important;
}

.case-card:hover .case-media > [data-theme-project],
.case-card:focus-within .case-media > [data-theme-project],
.project-detail:hover [data-theme-project],
.project-detail:focus-within [data-theme-project] {
  filter:
    hue-rotate(var(--theme-project-hue-rotate, 0deg))
    saturate(1.02)
    brightness(1.035)
    contrast(1.02)
    drop-shadow(0 0 14px rgba(var(--accent-rgb), .14)) !important;
}

html[data-motion="reduced"] .case-card .case-media > [data-theme-project],
html[data-motion="reduced"] .project-detail [data-theme-project] {
  transition: none !important;
}

body.contact-page .contact-logo-frame [data-theme-contact-logo] {
  filter:
    hue-rotate(var(--theme-contact-logo-hue-rotate, -11deg))
    saturate(.98)
    drop-shadow(0 0 8px rgba(var(--accent-rgb), .12)) !important;
  transition: filter .16s ease;
}

html[data-contrast="high"] body.contact-page .contact-logo-frame [data-theme-contact-logo] {
  filter:
    hue-rotate(var(--theme-contact-logo-hue-rotate, -11deg))
    saturate(1.04)
    brightness(1.06)
    contrast(1.04)
    drop-shadow(0 0 10px rgba(var(--accent-rgb), .18)) !important;
}

html[data-motion="reduced"] body.contact-page .contact-logo-frame [data-theme-contact-logo] {
  transition: none !important;
}

h1.title-3d {
  --title-reflection-scale: .80;
  --title-reflection-skew: -15deg;
  --title-reflection-x: .28em;
  --title-reflection-y: -.19em;
  --title-dv-shimmer:
    linear-gradient(
      108deg,
      transparent 0%,
      transparent 38%,
      rgba(var(--accent-rgb), .05) 42%,
      rgba(255, 255, 255, .18) 46%,
      rgba(255, 255, 255, 1) 49%,
      hsl(var(--accent-h) 100% 88% / .92) 51%,
      rgba(var(--accent-rgb), .24) 54%,
      transparent 60%,
      transparent 100%
    );
  --title-dv-metal:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 6%,
      #d9f3ff 12%,
      hsl(var(--accent-h) 46% 70%) 20%,
      #f8fdff 29%,
      #acbccf 39%,
      #6f849b 48%,
      #eefaff 55%,
      #a8c1d2 64%,
      hsl(var(--accent-h) 58% 46%) 74%,
      #52677e 84%,
      hsl(var(--accent-h) 76% 24%) 93%,
      hsl(var(--accent-h) 82% 10%) 100%
    );
  --title-dv-shadow:
    -1px -1px 0 rgba(255, 255, 255, .76),
    0 1px 0 rgba(231, 238, 245, .94),
    1px 2px 0 hsl(var(--accent-h) 100% 73%),
    2px 3px 0 hsl(var(--accent-h) 100% 47%),
    3px 4px 0 hsl(var(--accent-h) 94% 30%),
    4px 5px 0 hsl(var(--accent-h) 86% 20%),
    5px 6px 1px hsl(var(--accent-h) 80% 10%),
    6px 8px 2px rgba(0, 9, 28, .96),
    0 0 4px rgba(255, 255, 255, .34),
    0 0 10px rgba(var(--accent-rgb), .54),
    0 0 22px rgba(var(--accent-rgb), .27),
    0 0 38px rgba(var(--accent-rgb), .12),
    8px 14px 22px rgba(0, 0, 0, .68);
  --title-dv-accent-shadow:
    -1px -1px 0 rgba(255, 255, 255, .82),
    0 1px 0 rgba(231, 238, 245, .98),
    1px 2px 0 hsl(var(--accent-h) 100% 78%),
    2px 3px 0 hsl(var(--accent-h) 100% 52%),
    3px 4px 0 hsl(var(--accent-h) 96% 32%),
    4px 5px 0 hsl(var(--accent-h) 90% 20%),
    5px 6px 1px hsl(var(--accent-h) 82% 10%),
    6px 8px 2px rgba(0, 9, 28, .96),
    0 0 5px rgba(255, 255, 255, .38),
    0 0 12px rgba(var(--accent-rgb), .68),
    0 0 25px rgba(var(--accent-rgb), .34),
    0 0 42px rgba(var(--accent-rgb), .15),
    8px 14px 22px rgba(0, 0, 0, .68);
  position: relative !important;
  z-index: 0;
  isolation: isolate;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: visible;
  color: #dce2e7 !important;
  background: var(--title-dv-shimmer), var(--title-dv-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .68px hsl(var(--accent-h) 100% 84% / .86);
  text-shadow: var(--title-dv-shadow) !important;
}

h1.title-3d > span,
h1.title-3d .hero-title-prefix,
h1.title-3d .hero-title-accent {
  color: transparent !important;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: inherit;
  text-shadow: inherit !important;
}

h1.title-3d .hero-title-accent {
  background: var(--title-dv-shimmer), var(--title-dv-metal) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: var(--title-dv-accent-shadow) !important;
}

/* Starejša pravila DOMOV imajo zaradi ohranjanja postavitve večjo specifičnost.
   Ta sloj spremeni samo kovinsko ploskev in globino, ne pa mer ali preloma. */
.home-hero .hero-copy h1.title-3d > .hero-title-line,
.home-hero .hero-copy h1.title-3d .hero-title-prefix {
  color: transparent !important;
  background: inherit !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: inherit;
  text-shadow: var(--title-dv-shadow) !important;
}

.home-hero .hero-copy h1.title-3d .hero-title-accent {
  color: transparent !important;
  background: var(--title-dv-shimmer), var(--title-dv-metal) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: var(--title-dv-accent-shadow) !important;
}

h1.title-3d:not(.title-3d-home)::after {
  content: attr(data-reflection);
}

h1.title-3d-home::after {
  content: none;
}

h1.title-3d-home > .hero-title-line {
  position: relative !important;
  z-index: 0;
  isolation: isolate;
  overflow: visible !important;
}

h1.title-3d-home > .hero-title-line::after {
  content: attr(data-line-reflection);
}

h1.title-3d:not(.title-3d-home)::after,
h1.title-3d-home > .hero-title-line::after {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  color: rgba(212, 223, 232, .34);
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(var(--accent-rgb), .08) 20%,
      rgba(216, 232, 242, .28) 48%,
      rgba(var(--accent-rgb), .40) 72%,
      rgba(230, 244, 252, .52) 91%,
      rgba(var(--accent-rgb), .92) 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  white-space: pre-wrap;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  text-shadow:
    -2px 2px 0 rgba(var(--accent-rgb), .26),
    -5px 5px 1px rgba(var(--accent-rgb), .20),
    -9px 9px 2px rgba(var(--accent-rgb), .14),
    -14px 14px 5px rgba(0, 0, 0, .34),
    0 0 8px rgba(var(--accent-rgb), .26);
  opacity: .46;
  pointer-events: none;
  transform:
    translate(var(--title-reflection-x), var(--title-reflection-y))
    skewX(var(--title-reflection-skew))
    scaleY(var(--title-reflection-scale));
  transform-origin: bottom left;
  filter: blur(.42px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .88) 34%, rgba(0, 0, 0, .42) 72%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .88) 34%, rgba(0, 0, 0, .42) 72%, transparent 100%);
}

h1.title-3d-home {
  --title-reflection-scale: .82;
  --title-reflection-skew: -18deg;
  --title-reflection-x: .35em;
  --title-reflection-y: -.26em;
}

/* Potujoč zrcalni lesk posnema svetlobne prelome na kromiranih delih
   DV-logotipa. Drugi sloj ozadja je statična kovinska ploskev. */
h1.title-3d,
h1.title-3d > .hero-title-line,
h1.title-3d .hero-title-prefix,
h1.title-3d .hero-title-accent {
  background-size: 260% 100%, 100% 100% !important;
  background-position: -180% 0, 0 0;
  background-repeat: no-repeat;
  animation: title-dv-shimmer 7.2s cubic-bezier(.42, 0, .22, 1) infinite;
}

@keyframes title-dv-shimmer {
  0%, 18% {
    background-position: -180% 0, 0 0;
  }

  56%, 100% {
    background-position: 185% 0, 0 0;
  }
}

html[data-motion="reduced"] h1.title-3d,
html[data-motion="reduced"] h1.title-3d > .hero-title-line,
html[data-motion="reduced"] h1.title-3d .hero-title-prefix,
html[data-motion="reduced"] h1.title-3d .hero-title-accent {
  animation: none !important;
  background-position: 50% 0, 0 0;
}

@media (prefers-reduced-motion: reduce) {
  h1.title-3d,
  h1.title-3d > .hero-title-line,
  h1.title-3d .hero-title-prefix,
  h1.title-3d .hero-title-accent {
    animation: none !important;
    background-position: 50% 0, 0 0;
  }
}

html[data-contrast="high"] h1.title-3d,
html[data-contrast="high"] h1.title-3d > span,
html[data-contrast="high"] h1.title-3d .hero-title-prefix,
html[data-contrast="high"] h1.title-3d .hero-title-accent {
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: .4px #fff;
  text-shadow: 1px 2px 0 #202831, 0 0 8px rgba(var(--accent-rgb), .28) !important;
}

html[data-contrast="high"] .home-hero .hero-copy h1.title-3d > .hero-title-line,
html[data-contrast="high"] .home-hero .hero-copy h1.title-3d .hero-title-prefix,
html[data-contrast="high"] .home-hero .hero-copy h1.title-3d .hero-title-accent {
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: .4px #fff;
  text-shadow: 1px 2px 0 #202831, 0 0 8px rgba(var(--accent-rgb), .28) !important;
}

html[data-contrast="high"] h1.title-3d::after,
html[data-contrast="high"] h1.title-3d-home > .hero-title-line::after {
  display: none;
}

@media (max-width: 760px) {
  h1.title-3d {
    -webkit-text-stroke-width: .30px;
    text-shadow:
      -1px -1px 0 rgba(255, 255, 255, .48),
      0 1px 0 rgba(231, 238, 245, .82),
      1px 2px 0 hsl(var(--accent-h) 100% 48%),
      2px 3px 0 hsl(var(--accent-h) 82% 20%),
      3px 4px 1px rgba(0, 9, 28, .92),
      0 0 10px rgba(var(--accent-rgb), .28),
      0 8px 16px rgba(0, 0, 0, .46) !important;
  }

  .home-hero .hero-copy h1.title-3d > .hero-title-line,
  .home-hero .hero-copy h1.title-3d .hero-title-prefix,
  .home-hero .hero-copy h1.title-3d .hero-title-accent {
    text-shadow:
      -1px -1px 0 rgba(255, 255, 255, .48),
      0 1px 0 rgba(231, 238, 245, .82),
      1px 2px 0 hsl(var(--accent-h) 100% 48%),
      2px 3px 0 hsl(var(--accent-h) 82% 20%),
      3px 4px 1px rgba(0, 9, 28, .92),
      0 0 10px rgba(var(--accent-rgb), .28),
      0 8px 16px rgba(0, 0, 0, .46) !important;
  }

  h1.title-3d::after,
  h1.title-3d-home > .hero-title-line::after {
    display: none;
  }
}

h1.title-3d {
  color: #f4f7fa !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #f4f7fa !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .28) !important;
  animation: none !important;
}

h1.title-3d > span,
h1.title-3d .hero-title-prefix {
  color: #f4f7fa !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #f4f7fa !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .28) !important;
  animation: none !important;
}

h1.title-3d .hero-title-accent,
.home-hero .hero-copy h1.title-3d .hero-title-accent {
  color: var(--accent) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--accent) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 0 20px rgba(var(--accent-rgb), .35) !important;
  animation: none !important;
}

.home-hero .hero-copy h1.title-3d > .hero-title-line,
.home-hero .hero-copy h1.title-3d .hero-title-prefix {
  color: #f4f7fa !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #f4f7fa !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .28) !important;
  animation: none !important;
}

html[data-contrast="high"] h1.title-3d,
html[data-contrast="high"] h1.title-3d > span,
html[data-contrast="high"] h1.title-3d .hero-title-prefix,
html[data-contrast="high"] h1.title-3d .hero-title-accent,
html[data-contrast="high"] .home-hero .hero-copy h1.title-3d > .hero-title-line,
html[data-contrast="high"] .home-hero .hero-copy h1.title-3d .hero-title-prefix,
html[data-contrast="high"] .home-hero .hero-copy h1.title-3d .hero-title-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .46) !important;
  animation: none !important;
}

.case-body > .tag {
  color: var(--accent-soft) !important;
  border: 1px solid rgba(var(--accent-rgb), .28) !important;
  background:
    linear-gradient(
      90deg,
      rgba(var(--accent-rgb), .22) 0%,
      rgba(var(--accent-rgb), .14) 58%,
      rgba(var(--accent-rgb), .09) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025),
    0 0 14px rgba(var(--accent-rgb), .035) !important;
}

html[data-contrast="high"] .case-body > .tag {
  color: #fff !important;
  border-color: var(--accent) !important;
  background: rgba(var(--accent-rgb), .24) !important;
  box-shadow: none !important;
}

/* Dodatni opis portala na domači strani je namenoma manj izrazit od glavnega uvoda. */
.home-hero .hero-copy .home-context {
  max-width: 700px !important;
  margin-top: -8px !important;
  margin-bottom: 22px !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
  color: #aebdca !important;
}

/* Strokovni pristop ima štiri korake; laboratorijski kriteriji ostajajo petdelni. */
.professional-method-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lab-criteria-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1180px) {
  .professional-method-grid,
  .lab-criteria-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .home-hero .hero-copy .home-context {
    max-width: 100% !important;
    margin-top: -6px !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
    line-height: 1.58 !important;
  }

  .professional-method-grid,
  .lab-criteria-grid {
    grid-template-columns: 1fr;
  }
}


.btn.primary {
  color:#f8fbff !important;
  background:linear-gradient(180deg,
    hsl(var(--accent-h) 70% 24%),
    hsl(var(--accent-h) 76% 16%)) !important;
  border-color:hsl(var(--accent-h) 78% 43%) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 22px rgba(var(--accent-rgb),.12) !important;
}
.btn.primary:hover,
.btn.primary:focus-visible {
  filter:brightness(1.04) !important;
  border-color:hsl(var(--accent-h) 82% 50%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 28px rgba(var(--accent-rgb),.22) !important;
}


.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100000;
  padding: 10px 14px;
  border: 2px solid var(--accent);
  border-radius: 7px;
  background: #020914;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform .16s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid rgba(var(--accent-rgb), .5);
  outline-offset: 3px;
}
main#main-content:focus {
  outline: none;
}
html[data-motion="reduced"] .skip-link {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}


.case-grid > .case-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc((100% - 24px) / 2);
  justify-self: center;
}

.case-external-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  align-self: flex-start;
  margin-top: 22px;
  padding: 11px 15px;
  border: 1px solid rgba(var(--accent-rgb), .42);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), .085);
  color: var(--accent-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .075em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.case-external-link:hover,
.case-external-link:focus-visible {
  border-color: rgba(var(--accent-rgb), .72);
  background: rgba(var(--accent-rgb), .15);
  color: #fff;
  box-shadow: 0 0 20px rgba(var(--accent-rgb), .09);
  transform: translateY(-1px);
}

.case-external-icon {
  font-size: 15px;
  line-height: 1;
}

html[data-contrast="high"] .case-external-link {
  color: #fff;
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .22);
  box-shadow: none;
}

html[data-motion="reduced"] .case-external-link {
  transition: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .case-external-link { transition: none !important; transform: none !important; }
}

@media (max-width: 760px) {
  .case-grid > .case-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
  }
  .case-external-link { width: 100%; }
}


.home-method {
  padding: 24px 0 25px;
  border-top: 1px solid #102b42;
  border-bottom: 1px solid #102b42;
  background: radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), .055), transparent 24rem), linear-gradient(180deg, #03101b, #020914);
}
.home-method-head { display:flex; align-items:flex-end; justify-content:flex-start; gap:34px; margin-bottom:12px; }
.home-method-copy { max-width:760px; }
.home-method h2, .service-outcomes h2 { margin:7px 0 4px; font-size:clamp(24px, 2.15vw, 31px); line-height:1.16; }
.home-method-copy > p, .service-outcomes-head > p { margin:0; color:var(--muted); max-width:820px; font-size:14px; }
.home-method-link { display:inline-block; margin-top:5px; color:var(--accent-soft); text-decoration:none; padding:3px 0 3px; border-bottom:1px solid rgba(var(--accent-rgb), .28); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.055em; }
.home-method-link:hover, .home-method-link:focus-visible { color:#fff; border-bottom-color:var(--accent); }
.home-method-flow { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:0; padding:1px; border-radius:10px; background:rgba(84,124,158,.30); overflow:hidden; }
.home-method-step { position:relative; min-width:0; padding:11px 16px 12px; background:linear-gradient(180deg, rgba(5,18,30,.98), rgba(2,10,18,.96)); }
.home-method-step-top { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:24px; margin-bottom:5px; }
.home-method-index, .section-jump-label { color:var(--accent-soft); font-size:10px; font-weight:750; letter-spacing:.13em; }
.home-method-icon, .service-outcome-icon { display:grid; place-items:center; color:var(--accent); border:1px solid rgba(var(--accent-rgb), .34); background:rgba(var(--accent-rgb), .045); }
.home-method-icon { width:24px; height:24px; border-radius:6px; }
.home-method-icon svg, .service-outcome-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.home-method-step h3, .service-outcome-grid h3 { margin:0 0 4px; font-size:14px; text-transform:uppercase; letter-spacing:.025em; }
.home-method-step p, .service-outcome-grid p { margin:0; color:#aebdca; font-size:12.5px; line-height:1.45; }
@media (min-width:1061px) { .home-method-step:not(:last-child)::after { content:"→"; position:absolute; z-index:2; right:-10px; top:50%; transform:translateY(-50%); width:20px; height:22px; display:grid; place-items:center; color:var(--accent); background:#03101b; font-size:14px; line-height:1; } }
.section-jump { position:relative; z-index:3; border-top:1px solid rgba(var(--accent-rgb), .16); border-bottom:1px solid #102b42; background:rgba(2,9,20,.96); }
.section-jump-inner { min-height:66px; display:flex; align-items:center; gap:22px; padding-block:10px; }
.section-jump-label { flex:0 0 auto; padding-right:18px; border-right:1px solid rgba(var(--accent-rgb), .25); }
.section-jump-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.section-jump-links a { color:#c5d0da; text-decoration:none; border:1px solid rgba(78,115,147,.34); border-radius:999px; background:rgba(6,18,31,.68); padding:7px 11px; font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.035em; }
.section-jump-links a:hover, .section-jump-links a:focus-visible { color:#fff; border-color:var(--accent); background:rgba(var(--accent-rgb), .10); }
body.professional-profile-page #pregled, body.professional-profile-page #pot, body.professional-profile-page #podrocja, body.professional-profile-page #orodja, body.professional-profile-page #znanje, body.professional-profile-page #pristop { scroll-margin-top:112px; }
.service-outcomes { border-top:1px solid #102b42; background:radial-gradient(circle at 88% 15%, rgba(var(--accent-rgb), .075), transparent 26rem), #020914; }
.service-outcomes-head { max-width:870px; margin-bottom:23px; }
.service-outcome-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.service-outcome-grid > article { padding:20px 18px; border:1px solid rgba(84,124,158,.32); border-radius:12px; background:linear-gradient(180deg, rgba(6,20,33,.94), rgba(2,10,18,.92)); box-shadow:inset 0 1px 0 rgba(255,255,255,.022); }
.service-outcome-icon { width:40px; height:40px; border-radius:10px; margin-bottom:14px; }
.service-outcome-icon svg { width:22px; height:22px; }
html[data-contrast="high"] .home-method-flow, html[data-contrast="high"] .service-outcome-grid > article, html[data-contrast="high"] .section-jump-links a { border-color:var(--accent); }
html[data-contrast="high"] .home-method-step p, html[data-contrast="high"] .service-outcome-grid p, html[data-contrast="high"] .home-method-copy > p, html[data-contrast="high"] .service-outcomes-head > p { color:#fff; }
html[data-contrast="high"] .home-method-link { border-bottom-color:var(--accent); }
@media (max-width:1050px) { .home-method-flow, .service-outcome-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
  .home-method { padding:24px 0 25px; }
  .home-method-head { align-items:flex-start; flex-direction:column; gap:9px; margin-bottom:14px; }
  .service-outcome-grid { grid-template-columns:1fr; }
  .section-jump-inner { align-items:flex-start; flex-direction:column; gap:10px; padding-block:13px; }
  .section-jump-label { padding-right:0; border-right:0; }
  .section-jump-links { width:100%; }
  .section-jump-links a { flex:1 1 calc(50% - 8px); text-align:center; }
  body.professional-profile-page #pregled, body.professional-profile-page #pot, body.professional-profile-page #podrocja, body.professional-profile-page #orodja, body.professional-profile-page #znanje, body.professional-profile-page #pristop { scroll-margin-top:88px; }
}
@media (max-width:560px) { .home-method-flow { grid-template-columns:1fr; } .home-method-step { padding:11px 14px 12px; } }


@media (min-width: 761px) {
  main.subpage .service-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main.subpage .service-detail-grid > .detail-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 18px) / 2);
    justify-self: center;
  }
}
.content-bridge-section { border-top:1px solid #102b42; background:linear-gradient(180deg, rgba(3,16,27,.72), rgba(2,9,20,.96)); }
.content-bridge {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:34px;
  padding:24px 26px;
  border:1px solid rgba(84,124,158,.30);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(6,20,33,.88), rgba(2,10,18,.90));
}
.content-bridge.compact { margin-top:26px; }
.content-bridge > div { max-width:820px; }
.content-bridge h2 { margin:7px 0 6px; font-size:clamp(22px, 2vw, 29px); line-height:1.18; }
.content-bridge p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.content-bridge .btn { flex:0 0 auto; white-space:nowrap; }
.case-body dl dt:nth-of-type(5) { color:var(--accent-soft); }
.lab-scope-head { max-width:900px; margin-bottom:22px; }
.lab-scope-head h2 { margin:7px 0 7px; font-size:clamp(27px,2.35vw,34px); }
.lab-scope-head p { margin:0; color:var(--muted); max-width:840px; }
.lab-scope-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.lab-scope-grid article { padding:20px 18px; border:1px solid rgba(84,124,158,.30); border-radius:12px; background:linear-gradient(180deg, rgba(6,20,33,.91), rgba(2,10,18,.92)); }
.lab-scope-grid article > span { color:var(--accent-soft); font-size:10px; font-weight:800; letter-spacing:.13em; }
.lab-scope-grid h3 { margin:9px 0 6px; font-size:16px; line-height:1.25; }
.lab-scope-grid p { margin:0; color:#aebdca; font-size:13px; line-height:1.55; }
html[data-contrast="high"] .content-bridge, html[data-contrast="high"] .lab-scope-grid article { border-color:var(--accent); }
html[data-contrast="high"] .content-bridge p, html[data-contrast="high"] .lab-scope-grid p, html[data-contrast="high"] .lab-scope-head p { color:#fff; }
@media (max-width:1050px) { .lab-scope-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
  main.subpage .service-detail-grid > .detail-card:last-child:nth-child(odd) { grid-column:auto; width:auto; }
  .content-bridge { align-items:flex-start; flex-direction:column; gap:18px; padding:21px 18px; }
  .content-bridge .btn { width:100%; }
  .lab-scope-grid { grid-template-columns:1fr; }
}


/* STORITVE: manj praznega prostora, enaka informacijska hierarhija. */
.services-page main.subpage > .content-section:first-of-type {
  padding-top: 54px;
  padding-bottom: 58px;
}
.services-page .service-detail-grid {
  gap: 16px !important;
  margin-top: 0 !important;
}
.services-page main.subpage > .content-section .detail-card {
  padding: 24px 28px 26px !important;
}
.services-page main.subpage > .content-section .detail-card .image-icon {
  width: 92px !important;
  height: 92px !important;
}
.services-page main.subpage > .content-section .detail-card .image-icon-wrap {
  min-height: 92px !important;
  margin-bottom: 8px !important;
}
.services-page .detail-card h2 {
  margin-top: 5px;
  margin-bottom: 14px;
}
.services-page .detail-card p {
  margin-block: 0 12px;
}
.services-page .detail-card .mini-list {
  margin-top: 14px;
  padding-top: 12px;
}
.services-page .detail-card .mini-list li {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* PROJEKTI: jedro projekta ostane v ospredju, dokazni podatki so zgoščeni v 2 × 2 blok. */
.projects-page .case-grid {
  gap: 20px !important;
}
.projects-page .case-body {
  padding: 21px 22px 23px !important;
}
.projects-page .case-body h2 {
  min-height: 50px !important;
  margin: 10px 0 13px !important;
  font-size: 23px !important;
  line-height: 1.22 !important;
}
.projects-page .case-core,
.projects-page .case-facts-grid {
  margin: 0;
}
.projects-page .case-core dt {
  margin-top: 11px;
}
.projects-page .case-core dt:first-child {
  margin-top: 0;
}
.projects-page .case-core dd {
  margin-top: 4px;
  font-size: 14.5px !important;
  line-height: 1.56 !important;
}
.projects-page .case-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 16px;
  padding: 1px;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(84,124,158,.28);
}
.projects-page .case-fact {
  min-width: 0;
  padding: 12px 13px 13px;
  background: linear-gradient(180deg, rgba(6,20,33,.96), rgba(2,10,18,.96));
}
.projects-page .case-fact dt {
  margin: 0 !important;
  color: var(--accent-soft) !important;
  font-size: 10px !important;
  line-height: 1.28 !important;
}
.projects-page .case-fact dd {
  margin: 5px 0 0 !important;
  color: #afc0cd !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.projects-page .case-fact:nth-child(3) {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.085), rgba(2,10,18,.96));
}
.projects-page .case-external-link {
  margin-top: 16px;
}

/* LABORATORIJ: isti obseg, nekoliko kompaktnejše ploščice. */
.lab-page .lab-scope-section {
  padding-top: 54px;
  padding-bottom: 58px;
}
.lab-page .lab-scope-head {
  margin-bottom: 17px;
}
.lab-page .lab-scope-grid {
  gap: 12px;
}
.lab-page .lab-scope-grid article {
  padding: 16px 16px 17px;
}
.lab-page .lab-scope-grid h3 {
  margin: 6px 0 5px;
}
.lab-page .lab-scope-grid p {
  font-size: 12.8px;
  line-height: 1.5;
}

/* Dolge podstrani: zadnji sklop ima nekaj dodatnega optičnega odmika od fixed footerja.
   Main se že konča nad footerjem; to je samo varnostna/udobnostna rezerva. */
.services-page main.subpage > .content-section:last-child,
.projects-page main.subpage > .content-section:last-child,
.lab-page main.subpage > .content-section:last-child {
  padding-bottom: 88px;
}
body.services-page > main,
body.projects-page > main,
body.lab-page > main {
  scroll-padding-bottom: 28px;
}

@media (max-width: 980px) {
  .projects-page .case-grid {
    grid-template-columns: 1fr !important;
  }
  .projects-page .case-grid > .case-card:last-child:nth-child(odd) {
    grid-column: auto !important;
    width: 100% !important;
  }
}

@media (max-width: 900px) {
  .services-page main.subpage .service-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .services-page main.subpage .service-detail-grid > .detail-card:last-child:nth-child(odd) {
    grid-column: auto !important;
    width: 100% !important;
  }
}

@media (max-width: 680px) {
  .projects-page .case-facts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .services-page main.subpage > .content-section:first-of-type,
  .lab-page .lab-scope-section {
    padding-top: 42px;
    padding-bottom: 46px;
  }
  .services-page main.subpage > .content-section .detail-card {
    padding: 20px 19px 22px !important;
  }
  .services-page main.subpage > .content-section .detail-card .image-icon {
    width: 82px !important;
    height: 82px !important;
  }
  .services-page main.subpage > .content-section .detail-card .image-icon-wrap {
    min-height: 82px !important;
  }
  .projects-page .case-body {
    padding: 19px 18px 21px !important;
  }
  .projects-page .case-body h2 {
    min-height: 0 !important;
    font-size: 21px !important;
  }
  .services-page main.subpage > .content-section:last-child,
  .projects-page main.subpage > .content-section:last-child,
  .lab-page main.subpage > .content-section:last-child {
    padding-bottom: 70px;
  }
}

html[data-contrast="high"] .projects-page .case-facts-grid {
  background: var(--accent);
}
html[data-contrast="high"] .projects-page .case-fact dd {
  color: #fff !important;
}


/* PROJEKTI: poudarek »Kaj je nastalo« ostane, vendar je manj podoben aktivnemu gumbu. */
.projects-page .case-fact:nth-child(3) {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.055), rgba(2,10,18,.96));
}
.projects-page .case-fact dd {
  line-height: 1.56 !important;
}

/* STORITVE: še nekoliko manj praznega prostora ob enaki hierarhiji in velikosti besedila. */
.services-page main.subpage > .content-section:first-of-type {
  padding-top: 50px;
  padding-bottom: 54px;
}
.services-page main.subpage > .content-section .detail-card {
  padding: 22px 26px 24px !important;
}
.services-page main.subpage > .content-section .detail-card .image-icon {
  width: 86px !important;
  height: 86px !important;
}
.services-page main.subpage > .content-section .detail-card .image-icon-wrap {
  min-height: 86px !important;
  margin-bottom: 6px !important;
}
.services-page .detail-card h2 {
  margin-top: 4px;
  margin-bottom: 12px;
}
.services-page .detail-card p {
  margin-block: 0 11px;
}
.services-page .detail-card .mini-list {
  margin-top: 12px;
  padding-top: 11px;
}

/* LABORATORIJ: ploščice ostanejo 3/2/1, le nekoliko bolj zgoščene. */
.lab-page .lab-scope-section {
  padding-top: 50px;
  padding-bottom: 54px;
}
.lab-page .lab-scope-head {
  margin-bottom: 15px;
}
.lab-page .lab-scope-grid article {
  padding: 15px 16px 16px;
}
.lab-page .lab-scope-grid h3 {
  margin: 5px 0 5px;
}
.lab-page .lab-scope-grid p {
  line-height: 1.52;
}

/* Dodatna varna optična rezerva nad fiksno nogo na dolgih podstraneh. */
.services-page main.subpage > .content-section:last-child,
.projects-page main.subpage > .content-section:last-child,
.lab-page main.subpage > .content-section:last-child {
  padding-bottom: 96px;
}
body.services-page > main,
body.projects-page > main,
body.lab-page > main {
  scroll-padding-bottom: 36px;
}

@media (max-width: 760px) {
  .services-page main.subpage > .content-section:first-of-type,
  .lab-page .lab-scope-section {
    padding-top: 40px;
    padding-bottom: 44px;
  }
  .services-page main.subpage > .content-section .detail-card {
    padding: 19px 18px 21px !important;
  }
  .services-page main.subpage > .content-section .detail-card .image-icon {
    width: 78px !important;
    height: 78px !important;
  }
  .services-page main.subpage > .content-section .detail-card .image-icon-wrap {
    min-height: 78px !important;
  }
  .services-page main.subpage > .content-section:last-child,
  .projects-page main.subpage > .content-section:last-child,
  .lab-page main.subpage > .content-section:last-child {
    padding-bottom: 76px;
  }
}


.personal-profile-page .personal-overview-card {
  padding-bottom: 26px;
}

@media (max-width: 760px) {
  .personal-profile-page .personal-overview-card {
    padding-bottom: 24px;
  }
}

/* Utility dialog panels are document-level overlays. Keeping their content after
   the primary page content improves document order without changing the header UI. */
body > .utility-panel {
  position: fixed !important;
  top: var(--utility-panel-top, 87px) !important;
  right: var(--utility-panel-right, 35px) !important;
  z-index: 90 !important;
}

@media (max-width: 760px) {
  body > .utility-panel {
    top: calc(var(--site-header-h) - 2px) !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
  }
}