/* ==========================================================================
   OFISTATOR — SHARED DESIGN SYSTEM
   Semantic phase 2 build. No framework and no obfuscated code.
   ========================================================================== */

:root {
  --navy-950: #041b2d;
  --navy-900: #06263f;
  --navy-800: #0a3555;
  --navy-700: #154866;
  --teal-700: #07899a;
  --teal-600: #0aa3b3;
  --teal-500: #1ab8c2;
  --teal-300: #75dce1;
  --cyan-100: #e8f8fa;
  --blue-100: #edf6fb;
  --sand-100: #fff7e8;
  --rose-100: #fff1f2;
  --green-100: #eff8f3;
  --ink: #0a2844;
  --muted: #5b7186;
  --line: #dce7ee;
  --line-strong: #c7d8e2;
  --surface: #ffffff;
  --surface-soft: #f6f9fb;
  --coral: #ff5f4f;
  --amber: #efaa2d;
  --success: #17937e;
  --danger: #c94a4a;
  --shadow-sm: 0 8px 24px rgba(7, 42, 67, .06);
  --shadow-md: 0 18px 52px rgba(7, 42, 67, .12);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --max: 1390px;
  --header-height: 78px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, .button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(10, 163, 179, .35); outline-offset: 3px; }

.container { width: min(var(--max), calc(100% - 64px)); margin-inline: auto; }
.section { padding: 64px 0; }
.section--compact { padding: 42px 0; }
.section--soft { background: var(--surface-soft); }
.section--tinted {
  background:
    radial-gradient(circle at 92% 18%, rgba(26,184,194,.12), transparent 26%),
    linear-gradient(180deg, #fbfdfe, #f2f8fa);
}
.section-header { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.section-header__copy { max-width: 760px; }
.section-kicker,
.eyebrow {
  margin: 0 0 12px;
  color: var(--navy-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.section-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(32px, 3vw, 46px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.section-lead { max-width: 760px; margin: 12px 0 0; color: var(--muted); font-size: 18px; }
.accent { color: var(--teal-700); }
.muted { color: var(--muted); }

/* Header ------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid rgba(220, 231, 238, .95);
  backdrop-filter: blur(16px);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 235px; }
.brand img { width: 43px; height: 43px; }
.brand-copy strong { display: block; font-size: 22px; line-height: 1; letter-spacing: -.02em; }
.brand-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.main-nav { display: flex; align-items: stretch; gap: 25px; margin-left: auto; height: 100%; }
.main-nav a { position: relative; display: inline-flex; align-items: center; font-size: 14px; font-weight: 650; white-space: nowrap; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 2px; background: var(--teal-600); transform: scaleX(0); transition: transform .18s ease; }
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 13px; }
.menu-button { display: none; border: 0; background: transparent; color: var(--ink); padding: 8px; cursor: pointer; }

/* Buttons ------------------------------------------------------------------ */
.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  color: #fff;
  background: var(--navy-900);
  border: 1px solid var(--navy-900);
  border-radius: 10px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(5, 35, 58, .18); }
.button--teal { color: var(--navy-950); background: linear-gradient(135deg, #65e9ee, #2fc8d1); border-color: #2fc8d1; }
.button--coral { background: var(--coral); border-color: var(--coral); }
.button--outline { color: var(--ink); background: #fff; border-color: #9eb2c0; }
.button--white { color: var(--ink); background: #fff; border-color: #fff; }
.button--small { min-height: 42px; padding: 10px 16px; font-size: 13px; }
.button svg { width: 18px; height: 18px; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* Icons -------------------------------------------------------------------- */
.icon { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-wrap {
  display: inline-grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  color: var(--teal-700);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(10, 163, 179, .42);
  border-radius: 50%;
}
.icon-wrap--square { border-radius: 12px; }

/* Generic cards and grids -------------------------------------------------- */
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(7, 42, 67, .035);
}
.card-body { padding: 23px; }
.card h3, .card h4 { margin: 0 0 8px; line-height: 1.18; }
.card p { margin: 0; color: var(--muted); }
.feature-card { padding: 24px; min-height: 210px; }
.feature-card h3 { margin-top: 20px; font-size: 21px; }
.feature-card p { font-size: 15px; }
.feature-card--a { background: linear-gradient(145deg, #f6fcfc, #eaf8f7); }
.feature-card--b { background: linear-gradient(145deg, #f6fbff, #ebf5fb); }
.feature-card--c { background: linear-gradient(145deg, #fffaf0, #fff3df); }
.feature-card--d { background: linear-gradient(145deg, #fff7f7, #fff0f1); }

/* Hero foundations --------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero::after { content: ""; pointer-events: none; position: absolute; inset: 0; background-image: url('../img/digital-pattern.svg'); background-position: 95% 10%; background-repeat: no-repeat; opacity: .55; }
.hero-inner { position: relative; z-index: 1; min-height: 500px; display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: center; gap: 26px; }
.hero-copy { padding: 48px 0; }
.hero-title { max-width: 760px; margin: 0 0 20px; font-size: clamp(46px, 4.7vw, 68px); line-height: 1.02; letter-spacing: -.045em; }
.hero-lead { max-width: 650px; margin: 0 0 28px; color: #38566f; font-size: 18px; }
.hero-art { position: relative; align-self: stretch; min-height: 500px; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
.hero-art--fade img { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 100%); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 34px; }
.hero-trust-item { display: flex; align-items: center; gap: 11px; max-width: 190px; font-size: 13px; font-weight: 750; }
.hero-trust-item small { display: block; color: var(--muted); font-weight: 500; }

/* Home page ---------------------------------------------------------------- */
.home-hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.90) 37%, rgba(255,255,255,.12) 68%, rgba(255,255,255,0) 100%),
    url('../img/home-hero.webp') center / cover no-repeat;
}
.home-hero .hero-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.home-hero .hero-copy { max-width: 670px; }
.home-hero .hero-art { visibility: hidden; }
.path-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.path-card { overflow: hidden; min-height: 322px; display: flex; flex-direction: column; }
.path-visual { position: relative; height: 132px; display: grid; place-items: center; overflow: hidden; }
.path-visual::after { content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.62)); }
.path-visual--services { background: linear-gradient(135deg, #d8eef7, #eef8fb); }
.path-visual--enterprise { background: linear-gradient(135deg, #dfeee3, #f1f7e9); }
.path-visual--software { background: linear-gradient(135deg, #f4e4c9, #fff3df); }
.path-visual svg { position:relative; z-index:1; width:84px; height:84px; color:var(--navy-800); }
.path-card .card-body { display:flex; flex-direction:column; flex:1; }
.path-card .card-body .button { margin-top:auto; align-self:flex-start; }
/* 3 columns since 2026-09-07: the "Inkluzivno zapošljavanje" card was removed from both
   home pages (disability does not appear on the general pages). Used ONLY by index.html
   and index-prijedlog.html, both of which now hold exactly 3 cards. */
.value-row { display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.value-item { display:flex; gap:14px; align-items:flex-start; }
.value-item h3 { margin:2px 0 4px; font-size:17px; }
.value-item p { margin:0; color:var(--muted); font-size:14px; }
.home-cta {
  color:#fff;
  background:
    linear-gradient(90deg, rgba(4,27,45,.98) 0%, rgba(5,42,68,.91) 43%, rgba(5,42,68,.55) 70%, rgba(4,27,45,.80) 100%),
    url('../img/software-hero.webp') 60% center / cover no-repeat;
}
.home-cta-inner { min-height: 265px; display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap:48px; }
.home-cta h2 { margin:0 0 8px; font-size:42px; letter-spacing:-.035em; }
.home-cta p { margin:0 0 22px; color:#d9e8ee; font-size:18px; }
.home-quote { max-width:430px; margin-left:auto; font-size:21px; color:#eef9fa; }
.home-quote::before { content:'“'; display:block; color:#34d3da; font-size:48px; line-height:.65; }

/* Services page ------------------------------------------------------------ */
.services-hero { background: linear-gradient(180deg, #fbfdff, #f4f9fc); }
.services-hero .hero-art img { object-position: 52% center; }
.service-grid { display:grid; grid-template-columns: repeat(8, 1fr); gap:14px; }
.service-card { padding:20px 16px; min-height:202px; }
.service-card h3 { font-size:16px; margin-top:16px; }
.service-card p { font-size:12.5px; }
.process-panel { padding:16px 18px; background:linear-gradient(180deg,#f8fcfd,#eef7fa); border:1px solid var(--line); border-radius:var(--radius-md); }
.process-row { display:grid; grid-template-columns: 1.1fr repeat(4,1fr); align-items:stretch; gap:12px; }
.process-intro { padding:10px; }
.process-intro h2 { margin:0 0 6px; font-size:24px; }
.process-step { position:relative; min-height:112px; padding:19px 16px 16px 66px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.process-step .number { position:absolute; left:16px; top:20px; width:34px; height:34px; display:grid; place-items:center; color:#fff; background:var(--teal-700); border-radius:50%; font-weight:850; }
.process-step h3 { margin:0 0 5px; font-size:15px; }
.process-step p { margin:0; color:var(--muted); font-size:12px; }
.scale-hero { display:grid; grid-template-columns: .82fr 1.18fr; gap:34px; align-items:center; margin-bottom:22px; }
.scale-hero h2 { margin:0 0 10px; font-size:32px; }
.scale-hero p { margin:0; color:var(--muted); }
.capacity-chart { height:150px; display:flex; align-items:end; gap:12px; padding:10px 18px 0; border-bottom:1px solid var(--line-strong); background-image: linear-gradient(to top, rgba(10,163,179,.05) 1px, transparent 1px); background-size:100% 34px; }
.capacity-chart span { position:relative; flex:1; max-width:74px; border-radius:8px 8px 0 0; background:linear-gradient(180deg,#39cbd2,#147aa2); box-shadow:0 9px 18px rgba(17,126,156,.14); }
.capacity-chart span:nth-child(1){height:20%}.capacity-chart span:nth-child(2){height:32%}.capacity-chart span:nth-child(3){height:44%}.capacity-chart span:nth-child(4){height:57%}.capacity-chart span:nth-child(5){height:71%}.capacity-chart span:nth-child(6){height:88%}.capacity-chart span:nth-child(7){height:100%}
.capacity-chart span::after { content:''; position:absolute; left:50%; top:-14px; width:8px; height:8px; transform:translateX(-50%); background:var(--teal-700); border-radius:50%; }
.scale-card-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.scale-card { padding:18px; }
.scale-card h3 { font-size:14px; margin:12px 0 5px; }
.scale-card p { font-size:12px; }
.dark-benefit-strip { color:#fff; background:linear-gradient(100deg,var(--navy-900),#0a5b78); border-radius:16px; padding:22px; display:grid; grid-template-columns:1.25fr repeat(4,1fr); gap:18px; align-items:center; }
.dark-benefit-strip h2 { margin:0; font-size:26px; }
.dark-benefit-strip p { margin:4px 0 0; color:#cfe1e8; font-size:13px; }
.dark-benefit-item { display:flex; gap:10px; align-items:center; border-left:1px solid rgba(255,255,255,.18); padding-left:18px; }
.dark-benefit-item b { display:block; font-size:14px; }
.dark-benefit-item small { color:#cfe1e8; }
.metric-row { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.metric { display:flex; align-items:center; gap:14px; padding:18px; }
.metric h3 { margin:0 0 4px; font-size:16px; }
.metric p { margin:0; color:var(--muted); font-size:13px; }
.cta-strip { display:grid; grid-template-columns:1.1fr .7fr .8fr; gap:24px; align-items:center; padding:26px 28px; background:linear-gradient(90deg,#fff,#f2f8fb); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.cta-strip h2 { margin:0 0 5px; font-size:30px; }
.cta-strip p { margin:0; color:var(--muted); }
.cta-strip__facts { display:grid; gap:8px; color:#4d6477; font-size:13px; }
.cta-strip__actions { text-align:center; }
.cta-strip__actions strong { display:block; margin-top:8px; color:var(--teal-700); }

/* Software page ------------------------------------------------------------ */
.software-hero { color:#fff; background:linear-gradient(115deg,#041b2d,#0a3756); }
.software-hero::after { opacity:.18; filter:brightness(2); }
.software-hero .hero-lead { color:#d7e7ee; }
.software-hero .hero-art img { object-fit:cover; object-position:center; }
.software-hero .hero-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,27,45,.55),transparent 24%); }
.software-hero .hero-title { color:#fff; }
.software-hero .eyebrow { color:#7be6ea; }
.software-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.software-card { padding:22px; min-height:205px; }
.software-card h3 { margin-top:18px; font-size:19px; }
.software-card p { font-size:14px; }
.usecase-layout { display:grid; grid-template-columns:210px 1fr; gap:22px; align-items:start; }
.usecase-intro h2 { margin:0 0 8px; font-size:30px; }
.usecase-intro p { margin:0 0 20px; color:var(--muted); }
.usecase-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.usecase-card { overflow:hidden; }
.usecase-visual { height:112px; position:relative; display:grid; place-items:center; color:var(--navy-700); background:linear-gradient(135deg,#e9f4f8,#fbfdfe); }
.usecase-visual::after { content:''; position:absolute; inset:0; background-image:url('../img/digital-pattern.svg'); opacity:.28; background-size:340px; }
.usecase-visual svg { position:relative; z-index:1; width:56px; height:56px; }
.usecase-card .card-body { padding:15px 17px 18px; }
.usecase-card h3 { font-size:17px; }
.usecase-card p { font-size:13px; }
.security-section { color:#fff; background:linear-gradient(110deg,#031827,#083b5c); }
.security-grid { display:grid; grid-template-columns:.85fr 1fr .75fr; gap:34px; align-items:center; }
.security-copy h2 { margin:0 0 12px; font-size:46px; line-height:1.03; }
.security-copy p { margin:0 0 22px; color:#d7e6ed; font-size:17px; }
.security-art { min-height:320px; position:relative; display:grid; place-items:center; }
.server-stack { position:absolute; bottom:44px; width:330px; height:120px; display:flex; gap:10px; align-items:end; justify-content:center; opacity:.78; }
.server-stack span { width:70px; border:1px solid #1ec5d0; background:linear-gradient(180deg,#0c5777,#06253e); border-radius:8px 8px 3px 3px; box-shadow:0 0 24px rgba(28,199,210,.18); }
.server-stack span:nth-child(1){height:76px}.server-stack span:nth-child(2){height:112px}.server-stack span:nth-child(3){height:92px}.server-stack span:nth-child(4){height:66px}
.shield { position:relative; z-index:2; width:190px; height:220px; display:grid; place-items:center; color:#fff; background:linear-gradient(180deg,#20d0dc,#0776a8); clip-path:polygon(50% 0,92% 14%,87% 70%,50% 100%,13% 70%,8% 14%); filter:drop-shadow(0 0 26px rgba(30,207,220,.34)); }
.shield svg { width:78px; height:78px; }
.security-list { display:grid; gap:19px; }
.security-list-item { display:flex; gap:13px; }
.security-list-item h3 { margin:0 0 3px; font-size:16px; }
.security-list-item p { margin:0; color:#cfe0e8; font-size:13px; }

/* Large companies / quotas ------------------------------------------------- */
.enterprise-hero { padding:48px 0 26px; background:radial-gradient(circle at 83% 22%,rgba(10,163,179,.10),transparent 30%),linear-gradient(180deg,#fff,#f6f9fb); }
.enterprise-hero-grid { display:grid; grid-template-columns:1fr 1.08fr; gap:58px; align-items:start; }
.enterprise-title { margin:0 0 16px; font-size:clamp(48px,5vw,70px); line-height:1.03; letter-spacing:-.045em; }
.enterprise-lead { max-width:640px; margin:0 0 24px; color:#39566e; font-size:18px; }
.urgency-card { margin-top:72px; display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; padding:28px; background:linear-gradient(135deg,#fffaf0,#fff5e3); border:1px solid #efb64e; border-radius:18px; box-shadow:var(--shadow-sm); }
.urgency-icon { width:78px; height:78px; display:grid; place-items:center; color:var(--amber); border:1px solid #efc068; background:#fff9ec; border-radius:50%; }
.urgency-card h2 { margin:0 0 6px; font-size:25px; }
.urgency-card p { margin:0; color:#40576a; }
.example-card { display:grid; grid-template-columns:auto 1fr 1fr; gap:20px; align-items:center; max-width:620px; margin-top:22px; padding:16px 20px; background:#fff; border:1px solid #a9c2d3; border-radius:14px; }
.example-card strong { color:var(--teal-700); font-size:27px; }
.example-card .divider { border-left:1px solid #c6d7e2; padding-left:20px; }
.quota-calculator { padding:28px; border:1px dashed #3f82bc; border-radius:20px; background:linear-gradient(180deg,#fbfdff,#f4f8fb); }
.calculator-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.calculator-header h2 { margin:0 0 4px; font-size:30px; }
.calculator-header p { margin:0; color:var(--muted); }
.calculator-grid { display:grid; grid-template-columns:repeat(3,1fr) 1.15fr; gap:16px; align-items:end; }
.form-field { display:grid; gap:8px; }
.form-field label { font-size:13px; font-weight:800; }
.form-control { width:100%; min-height:47px; padding:11px 13px; color:var(--ink); background:#fff; border:1px solid var(--line-strong); border-radius:9px; }
.form-control:focus { border-color:var(--teal-600); outline:3px solid rgba(10,163,179,.12); }
.calculator-result { padding:18px 20px; color:#fff; background:linear-gradient(135deg,var(--navy-900),#0a5471); border-radius:14px; }
.calculator-result small { display:block; color:#cfe5ec; }
.calculator-result output { display:block; margin-top:3px; font-size:31px; font-weight:900; }
.calculator-note { margin:14px 0 0; color:var(--muted); font-size:12px; }
.enterprise-service-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.enterprise-service { padding:20px 14px; text-align:center; min-height:184px; }
.enterprise-service .icon-wrap { margin:auto; }
.enterprise-service h3 { margin-top:12px; font-size:15px; }
.enterprise-service p { font-size:12px; }
.enterprise-process { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.enterprise-step { display:flex; gap:15px; padding:19px; }
.enterprise-step .number { width:45px; height:45px; flex:0 0 45px; display:grid; place-items:center; color:var(--ink); background:#eef6fa; border-radius:50%; font-size:20px; font-weight:900; }
.enterprise-step h3 { margin:0 0 4px; font-size:17px; }
.enterprise-step p { margin:0; color:var(--muted); font-size:13px; }
.enterprise-cta { color:#fff; background:linear-gradient(100deg,#073350,#0b5876); border-radius:18px; padding:24px 28px; display:grid; grid-template-columns:1.25fr .9fr .8fr; gap:22px; align-items:center; }
.enterprise-cta h2 { margin:0; font-size:29px; }
.enterprise-cta p { margin:4px 0 0; color:#d1e7ed; font-size:19px; }
.enterprise-contact { display:grid; gap:8px; font-size:16px; }

/* Jobs page ---------------------------------------------------------------- */
.jobs-hero {
  background:
    linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.93) 39%,rgba(255,255,255,.20) 67%,rgba(255,255,255,0) 100%),
    url('../img/jobs-hero.webp') center / cover no-repeat;
}
.jobs-hero .hero-inner { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.jobs-hero .hero-copy { max-width:650px; }
.jobs-hero .hero-art { visibility:hidden; }
.job-benefits { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.job-card { padding:26px; min-height:245px; }
.job-card h3 { margin:18px 0 8px; font-size:23px; }
.job-process { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.job-step { position:relative; padding:18px 16px 8px 72px; min-height:135px; }
.job-step:not(:last-child)::after { content:'→'; position:absolute; right:-19px; top:35px; color:#4f8aa8; font-size:24px; }
.job-step-num { position:absolute; left:0; top:14px; width:54px; height:54px; display:grid; place-items:center; color:#fff; background:var(--teal-600); border:8px solid #eaf8f9; border-radius:50%; font-weight:900; }
.job-step h3 { margin:0 0 6px; font-size:17px; }
.job-step p { margin:0; color:var(--muted); font-size:14px; }
.why-panel { padding:30px; background:linear-gradient(145deg,#f8fcfd,#eaf7fa); border:1px solid var(--line); border-radius:18px; }
.why-panel h2 { margin:0 0 22px; font-size:24px; }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.why-item { padding:10px 24px; border-right:1px solid #c9dde6; }
.why-item:last-child { border-right:0; }
.why-item h3 { margin:14px 0 6px; font-size:17px; }
.why-item p { margin:0; color:var(--muted); font-size:13px; }
.questions-row { display:grid; grid-template-columns:1.2fr repeat(3,.8fr); gap:18px; align-items:center; }
.questions-copy h2 { margin:0 0 4px; font-size:28px; }
.questions-copy p { margin:0 0 15px; color:var(--muted); }
.contact-tile { min-height:120px; padding:16px; text-align:center; border-left:1px solid var(--line); }
.contact-tile .icon-wrap { margin:auto; }
.contact-tile h3 { margin:10px 0 2px; font-size:15px; }
.contact-tile p { margin:0; color:var(--muted); font-size:12px; }

/* About page --------------------------------------------------------------- */
.about-hero { background:linear-gradient(180deg,#fff,#f7fbfc); }
.about-hero .hero-art img { object-fit:contain; object-position:center; }
.about-values { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.about-card { padding:28px; min-height:230px; background:linear-gradient(145deg,#fff,#f4f9fb); }
.about-card h3 { margin:18px 0 8px; font-size:24px; }
.mission-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; align-items:stretch; }
.mission-copy { padding:28px 4px; }
.mission-copy h2 { margin:0 0 14px; font-size:48px; line-height:1.05; letter-spacing:-.035em; }
.mission-copy p { margin:0 0 24px; color:var(--muted); font-size:18px; }
.quote-card { min-height:310px; display:grid; grid-template-columns:1fr .72fr; gap:20px; align-items:center; padding:34px; background:linear-gradient(145deg,#f5fbfd,#eaf6f9); border:1px solid var(--line); border-radius:20px; }
.quote-card blockquote { margin:0; font-size:25px; line-height:1.35; }
.quote-card blockquote::before { content:'“'; display:block; color:var(--teal-600); font-size:70px; line-height:.6; margin-bottom:18px; }
.quote-signature { margin-top:18px; color:var(--muted); font-size:14px; }
.quote-symbol { width:210px; height:210px; position:relative; margin:auto; }
.quote-symbol span { position:absolute; width:120px; height:120px; border-radius:50% 50% 50% 0; transform:rotate(45deg); opacity:.68; }
.quote-symbol span:nth-child(1){top:0;left:45px;background:#c7e3f1}.quote-symbol span:nth-child(2){bottom:5px;left:0;background:#d8f2ec}.quote-symbol span:nth-child(3){bottom:5px;right:0;background:#a9ddb4}
.quote-symbol b { position:absolute; inset:auto 0 28px; text-align:center; font-size:18px; line-height:1.55; }

/* Contact page ------------------------------------------------------------- */
.contact-hero { padding:34px 0 16px; background:linear-gradient(180deg,#fff,#f8fbfd); }
.contact-hero-grid { display:grid; grid-template-columns:1fr .8fr; gap:44px; align-items:center; }
.contact-title { margin:0 0 10px; font-size:clamp(46px,5vw,69px); line-height:1.02; letter-spacing:-.045em; }
.contact-intro { margin:0; max-width:680px; color:var(--muted); font-size:18px; }
.contact-doodle img { width:100%; max-height:215px; object-fit:contain; }
.contact-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0; }
.contact-tab { min-height:68px; padding:14px 18px; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:12px; cursor:pointer; font-weight:750; transition:.18s ease; }
.contact-tab:hover { border-color:#86c9d1; }
.contact-tab.is-active { color:var(--teal-700); border-color:var(--teal-600); box-shadow:inset 0 0 0 1px var(--teal-600); }
.contact-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start; }
.contact-form-card { padding:22px; }
.selected-type { margin:0 0 18px; color:#435c70; font-size:14px; }
.selected-type strong { color:var(--teal-700); }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 16px; }
.form-field--wide { grid-column:1 / -1; }
textarea.form-control { min-height:110px; resize:vertical; }
.form-consent { display:flex; gap:9px; align-items:flex-start; margin:16px 0; color:#50677a; font-size:12px; }
.form-consent input { margin-top:2px; }
.form-status { display:none; margin-top:14px; padding:12px 14px; border-radius:9px; font-size:13px; }
.form-status.is-visible { display:block; }
.form-status.is-success { color:#0f6e5e; background:#e7f7f2; border:1px solid #92d6c8; }
.form-status.is-error { color:#9c3131; background:#fff0f0; border:1px solid #e5a3a3; }
.hidden-honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-sidebar { display:grid; gap:16px; }
.info-card { padding:22px; }
.info-card__heading { display:flex; align-items:center; gap:12px; margin-bottom:17px; }
.info-card__heading h2 { margin:0; font-size:18px; }
.info-list { display:grid; gap:13px; }
.info-list a, .info-list div { display:flex; align-items:center; gap:11px; color:#496277; font-size:14px; }
.response-card { min-height:150px; position:relative; overflow:hidden; }
.response-card::after { content:'24h'; position:absolute; right:20px; bottom:20px; width:70px; height:70px; display:grid; place-items:center; color:var(--teal-700); border:3px dotted var(--teal-600); border-radius:50%; font-size:24px; font-weight:900; }
.call-strip { margin-top:16px; padding:16px 20px; display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.call-strip h2 { margin:0; font-size:19px; }
.call-strip p { margin:1px 0 0; color:var(--muted); font-size:13px; }
.call-strip .phone-number { margin-left:auto; color:var(--teal-700); font-size:19px; font-weight:900; }

/* Legal pages -------------------------------------------------------------- */
.legal-page { min-height:65vh; padding:64px 0; background:linear-gradient(180deg,#fff,#f7fafc); }
.legal-card { max-width:900px; padding:34px; margin:auto; background:#fff; border:1px solid var(--line); border-radius:18px; }
.legal-card h1 { margin:0 0 14px; font-size:44px; }
.legal-card h2 { margin-top:30px; }
.legal-card p, .legal-card li { color:#4c6477; }

/* Footer ------------------------------------------------------------------- */
.site-footer { color:#fff; background:linear-gradient(115deg,var(--navy-950),#07324d); }
.footer-main { padding:30px 0; display:grid; grid-template-columns:1.2fr .85fr .85fr 1fr .9fr; gap:34px; }
.footer-brand .brand-copy span { color:#c8d9e2; }
.footer-column h2 { margin:0 0 12px; font-size:14px; }
.footer-column a, .footer-column p { display:block; margin:7px 0; color:#c8d8e2; font-size:13px; }
.footer-column a:hover { color:#fff; }
.footer-social { display:flex; gap:10px; }
.footer-social a { width:34px; height:34px; display:grid; place-items:center; color:var(--navy-950); background:#fff; border-radius:7px; font-weight:900; }
.footer-slogan { align-self:center; font-family:"Segoe Print","Bradley Hand",cursive; font-size:22px; line-height:1.2; transform:rotate(-3deg); }
.footer-slogan::after { content:''; display:block; width:34px; height:3px; margin-top:10px; background:#27d3d7; }
.footer-bottom { padding:15px 0 19px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:24px; color:#a9bfcc; border-top:1px solid rgba(255,255,255,.08); font-size:11px; }
.footer-copyright { justify-self:start; }
.footer-legal { justify-self:end; display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1260px) {
  .container { width:min(var(--max), calc(100% - 40px)); }
  .brand { min-width:200px; }
  .main-nav { gap:16px; }
  .main-nav a { font-size:13px; }
  .service-grid { grid-template-columns:repeat(4,1fr); }
  .enterprise-service-grid { grid-template-columns:repeat(3,1fr); }
  .footer-main { grid-template-columns:1.2fr repeat(3,1fr); }
  .footer-slogan { display:none; }
}

@media (max-width: 1030px) {
  :root { --header-height:70px; }
  .site-header { height:auto; min-height:var(--header-height); }
  .header-inner { min-height:var(--header-height); flex-wrap:wrap; }
  .main-nav { display:none; order:5; width:100%; height:auto; margin:0; padding:10px 0 17px; grid-template-columns:repeat(2,1fr); }
  .main-nav.is-open { display:grid; }
  .main-nav a { padding:10px 12px; border-radius:8px; }
  .main-nav a::after { display:none; }
  .main-nav a[aria-current="page"] { color:var(--teal-700); background:var(--cyan-100); }
  .menu-button { display:inline-flex; margin-left:auto; }
  .hero-inner,
  .enterprise-hero-grid,
  .contact-hero-grid,
  .mission-grid,
  .home-cta-inner,
  .security-grid { grid-template-columns:1fr; }
  .hero-art { min-height:430px; }
  .home-hero .hero-inner,
  .jobs-hero .hero-inner { grid-template-columns:1fr; }
  .home-hero,
  .jobs-hero { background-position:70% center; }
  .home-hero .hero-copy,
  .jobs-hero .hero-copy { max-width:630px; }
  .home-hero .hero-inner,
  .jobs-hero .hero-inner { min-height:640px; align-items:start; }
  .home-hero .hero-copy,
  .jobs-hero .hero-copy { padding-top:44px; }
  .path-grid,
  .grid--3,
  .grid--4,
  .job-benefits,
  .about-values { grid-template-columns:repeat(2,1fr); }
  .value-row,
  .metric-row,
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .software-grid { grid-template-columns:repeat(3,1fr); }
  .process-row { grid-template-columns:repeat(2,1fr); }
  .process-intro { grid-column:1/-1; }
  .scale-hero { grid-template-columns:1fr; }
  .scale-card-grid { grid-template-columns:repeat(2,1fr); }
  .dark-benefit-strip { grid-template-columns:repeat(2,1fr); }
  .dark-benefit-strip > div:first-child { grid-column:1/-1; }
  .usecase-layout { grid-template-columns:1fr; }
  .usecase-grid { grid-template-columns:repeat(2,1fr); }
  .security-copy { max-width:720px; }
  .urgency-card { margin-top:0; }
  .calculator-grid { grid-template-columns:repeat(2,1fr); }
  .calculator-result { min-height:100%; display:grid; align-content:center; }
  .enterprise-process { grid-template-columns:1fr; }
  .enterprise-cta { grid-template-columns:1fr 1fr; }
  .enterprise-cta > div:first-child { grid-column:1/-1; }
  .job-process { grid-template-columns:repeat(2,1fr); }
  .job-step:nth-child(2)::after { display:none; }
  .questions-row { grid-template-columns:1fr 1fr; }
  .questions-copy { grid-column:1/-1; }
  .contact-layout { grid-template-columns:1fr; }
  .contact-sidebar { grid-template-columns:repeat(2,1fr); }
  .footer-main { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 720px) {
  .container { width:min(var(--max), calc(100% - 28px)); }
  .header-actions .button { display:none; }
  .brand { min-width:0; }
  .brand-copy strong { font-size:18px; }
  .brand-copy span { display:none; }
  .section { padding:46px 0; }
  .section--compact { padding:34px 0; }
  .section-header { align-items:flex-start; flex-direction:column; }
  .hero-title,
  .enterprise-title,
  .contact-title { font-size:42px; }
  .hero-inner { min-height:auto; }
  .hero-copy { padding:36px 0 20px; }
  .hero-art { min-height:300px; }
  .home-hero,
  .jobs-hero { background-position:72% center; }
  .home-hero .hero-inner,
  .jobs-hero .hero-inner { min-height:690px; }
  .home-hero .hero-copy,
  .jobs-hero .hero-copy { max-width:100%; padding:34px 0; background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.80),transparent); }
  .hero-trust { gap:14px; }
  .path-grid,
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5,
  .grid--6,
  .value-row,
  .service-grid,
  .software-grid,
  .job-benefits,
  .about-values,
  .metric-row,
  .scale-card-grid,
  .usecase-grid,
  .questions-row,
  .contact-tabs,
  .contact-sidebar,
  .form-grid,
  .calculator-grid,
  .enterprise-service-grid,
  .why-grid { grid-template-columns:1fr; }
  .home-cta-inner { min-height:330px; }
  .home-quote { margin:0; }
  .process-row { grid-template-columns:1fr; }
  .dark-benefit-strip { grid-template-columns:1fr; }
  .dark-benefit-strip > div:first-child { grid-column:auto; }
  .dark-benefit-item { border-left:0; border-top:1px solid rgba(255,255,255,.16); padding:14px 0 0; }
  .cta-strip { grid-template-columns:1fr; }
  .usecase-layout { grid-template-columns:1fr; }
  .security-art { min-height:280px; }
  .security-list { margin-bottom:20px; }
  .example-card { grid-template-columns:auto 1fr; }
  .example-card .divider { grid-column:1/-1; border-left:0; border-top:1px solid #c6d7e2; padding:14px 0 0; }
  .enterprise-cta { grid-template-columns:1fr; }
  .enterprise-cta > div:first-child { grid-column:auto; }
  .job-process { grid-template-columns:1fr; }
  .job-step::after { display:none !important; }
  .why-item { border-right:0; border-bottom:1px solid #c9dde6; }
  .why-item:last-child { border-bottom:0; }
  .contact-tile { border-left:0; border-top:1px solid var(--line); }
  .contact-form-card { padding:17px; }
  .form-field--wide { grid-column:auto; }
  .call-strip { align-items:flex-start; flex-wrap:wrap; }
  .call-strip .phone-number { width:100%; margin-left:0; }
  .footer-main { grid-template-columns:1fr 1fr; gap:26px; }
  .footer-brand { grid-column:1/-1; }
  .footer-bottom { grid-template-columns:1fr; justify-items:flex-start; }
  .footer-copyright,
  .footer-legal { justify-self:start; text-align:left; }
}

/* Final narrow-screen guard for the About mission card. */
@media (max-width: 720px) {
  .mission-grid > *,
  .quote-card > * { min-width: 0; }
  .quote-card { grid-template-columns: 1fr; padding: 24px; overflow: hidden; }
  .quote-symbol { width: 180px; height: 180px; }
  .quote-symbol span { width: 100px; height: 100px; }
  .quote-symbol b { font-size: 16px; }
}

/* --- kalkulator kvote (velike-tvrtke) --- */
.calculator-grid--4 { grid-template-columns:repeat(4,1fr); }
.calculator-slider { margin:22px 0 4px; }
.calculator-slider label { display:block; font-size:13px; font-weight:800; margin-bottom:8px; }
.calculator-slider input[type=range] { width:100%; height:28px; accent-color:var(--teal-600); cursor:pointer; }
.calculator-slider input[type=range]:focus { outline:3px solid rgba(10,163,179,.12); }
.calculator-slider-value { margin:2px 0 0; min-height:1.5em; color:var(--muted); font-size:14px; }
.calculator-panels { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.calculator-result--alt { background:linear-gradient(135deg,#0a5471,var(--teal-600)); }
.calculator-result--rizik { background:linear-gradient(135deg,#8a4b00,#b4640a); }
/* Zakljucane visine: tekst se mijenja dok se klizac vuce, pa kartica ne smije skakati. */
.calculator-panel-note { margin:8px 0 0; min-height:4.5em; color:#e4f1f6; font-size:13px; line-height:1.45; }
.calculator-result small { min-height:2.6em; }
@media (max-width:900px){ .calculator-grid--4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .calculator-grid--4,.calculator-panels { grid-template-columns:1fr; }
  .calculator-panel-note { min-height:0; } .calculator-result small { min-height:0; } }

/* skala ispod klizaca: mjeseci + godine.
   Klizac putuje preko 15 razmaka, ne 16 celija - zato left = i/15, a ne celije jednake sirine.
   Bocni odmak 9px = polovica gumba, da se prva i zadnja oznaka poklope s krajevima. */
.calculator-scale { margin:8px 9px 0; }
.calculator-scale-track { position:relative; height:21px; }
.calculator-scale-m,
.calculator-scale-y { position:absolute; left:calc(var(--i) / 15 * 100%); transform:translateX(-50%);
  color:var(--muted); font-size:11px; line-height:1.4; text-align:center; }
.calculator-scale-m { width:46px; padding-top:5px; border-top:1px solid var(--line-strong); }
.calculator-scale-m.is-active { color:var(--teal-600); font-weight:800; border-top-color:var(--teal-600); }
.calculator-scale-years { height:16px; }
.calculator-scale-y { width:70px; font-weight:800; letter-spacing:.02em; }
@media (max-width:760px){
  .calculator-scale-track { height:auto; }
  .calculator-scale-m { display:none; }
  .calculator-scale-y { position:static; transform:none; width:auto; display:inline-block;
    margin-right:16px; padding-top:5px; border-top:1px solid var(--line-strong); }
}

/* --- MOBILNI HERO, popravak 8.9.2026. -----------------------------------
   Kvar: zastor preko fotografije bio je VODORAVAN (90deg) i zavrsavao
   prozirno. Na mobitelu tekst ide punom sirinom, pa je desni kraj svakog
   retka padao na golu fotografiju - necitko. Uz to .hero-trust stoji IZVAN
   .hero-copy, pa zastor preko njega uopce nije ni isao.
   Rjesenje: OKOMITI veo preko cijele sekcije, ispod sadrzaja (hero-inner
   ima z-index:1), tako da je stiten SAV tekst, ne samo jedan blok. */
@media (max-width: 720px) {
  .home-hero::before,
  .jobs-hero::before { content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.90) 55%,rgba(255,255,255,.95) 100%); }
  .home-hero .hero-copy,
  .jobs-hero .hero-copy { background:none; }
  .home-hero,
  .jobs-hero { background-position:72% top; }
  .home-hero .hero-inner,
  .jobs-hero .hero-inner { min-height:auto; padding-bottom:34px; }
  .hero-title,
  .enterprise-title,
  .contact-title { font-size:34px; letter-spacing:-.035em; }
  .hero-lead { font-size:16px; }
  /* tri znacke: uredan raster umjesto poderanog 2+1 preljeva */
  .hero-trust { display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; }
  .hero-trust-item { max-width:none; }
}
@media (max-width: 430px) {
  .hero-trust { grid-template-columns:1fr; }
  .hero-title,
  .enterprise-title,
  .contact-title { font-size:30px; }
}
/* Izmjereno 8.9.2026.: siva --muted (#5b748a) na najtamnijem dijelu fotografije,
   ispod vela od 90 %, daje kontrast 3,90:1 - ispod granice od 4,5:1 za obican
   tekst. To je upravo tekst koji je vlasnik prijavio kao necitak.
   Ista boja kao hero-lead daje 6,17:1. */
@media (max-width: 720px) {
  .home-hero .hero-trust-item small,
  .jobs-hero .hero-trust-item small { color:#38566f; }
}

/* --- KARTICE NA MOBITELU, 8.9.2026. --------------------------------------
   Sve ove min-height vrijednosti postoje samo zato da se stupci na sirokom
   ekranu poravnaju. Na mobitelu kartice idu jedna ispod druge, pa poravnanje
   nema koga poravnavati - ostaje samo prazan prostor i kartica visoka pola
   ekrana. Vlasnik 8.9.: "cards below too big".
   Strukturne visine (koraci s brojem, kontakt plocice, gumbi) OSTAJU. */
@media (max-width: 720px) {
  .feature-card,
  .path-card,
  .service-card,
  .software-card,
  .enterprise-service,
  .job-card,
  .about-card,
  .quote-card,
  .response-card { min-height:0; }
  .quote-card { grid-template-columns:1fr; padding:24px; }
  .path-card .card-body,
  .job-card { padding:20px; }
}
/* Gdje je visina kartice zapravo odlazila (izmjereno 8.9.): 132 px ukrasne
   grafike bez ijedne informacije + 40 px margine oko naslova, na SVAKOJ od tri
   kartice. Na mobitelu je to skoro 400 px ekrana potroseno na ukras. */
@media (max-width: 720px) {
  .path-visual { height:86px; }
  .path-visual svg { width:52px; height:52px; }
  .path-card .card-body h2 { margin:0 0 10px; font-size:21px; }
  .path-card .card-body p { font-size:15px; }
}
/* --- PRAZNINA ISPOD HEROJA, popravak 8.9.2026. ---------------------------
   Vlasnik: "look at all that empty space". Izmjereno: 394 px praznine.
   Uzrok: .hero-art ima visibility:hidden - to SAKRIVA element, ali mu i dalje
   OSTAVLJA prostor. Na sirokom ekranu to je bezopasno (drugi stupac, kroz koji
   se ionako vidi pozadinska fotografija). Ispod 1030 px raspored pada u JEDAN
   stupac, pa taj nevidljivi blok od 300 px postane mrtvi red ispod teksta.
   display:none ga vadi i iz rasporeda. */
@media (max-width: 1030px) {
  .home-hero .hero-art,
  .jobs-hero .hero-art { display:none; }
}

/* --- SOFTVER: fotografija koja se stapa s pozadinom, 8.9.2026. ------------
   Vlasnikova uputa: fotografija desno od gumba i tri oznake, vidljivija na
   desnoj strani, a prema lijevo neka se gubi u pozadini.
   Prije: tvrdi pravokutnik s ostrim lijevim rubom na tamnoj podlozi. */
@media (min-width: 1031px) {
  /* maska radi na PROZIRNOST slike, pa se kroz nju vidi tamnoplava pozadina */
  .software-hero .hero-art img {
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.28) 20%,rgba(0,0,0,.85) 50%,#000 78%);
    mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.28) 20%,rgba(0,0,0,.85) 50%,#000 78%); }
  /* stari zatamnjeni lijevi rub sada bi se borio s maskom */
  .software-hero .hero-art::after { display:none; }
}
/* Na mobitelu nema desne strane: slika prestaje biti zaseban blok ispod teksta
   i postaje POZADINA sekcije - tamna lijevo gdje tekst pocinje, otvorenija desno. */
@media (max-width: 1030px) {
  .software-hero .hero-art { display:none; }
  .software-hero {
    background:
      linear-gradient(90deg,rgba(4,27,45,.97) 0%,rgba(5,42,68,.93) 45%,rgba(5,42,68,.78) 100%),
      url('../img/software-hero.webp') 72% center / cover no-repeat; }
}
/* Izmjereno 8.9.: siva --muted na tamnoplavoj daje 2,48:1 - daleko ispod 4,5:1.
   Ista greska kao na naslovnici, samo obrnutih boja. #d7e7ee daje 9,52:1. */
.software-hero .hero-trust-item small { color:#d7e7ee; }

/* --- KONTAKT, 8.9.2026. ---------------------------------------------------
   Vlasnik: slika ispod naslova samo trosi prostor - izbacena iz HTML-a.
   Cetiri gumba (Klijent / Velika tvrtka / Posao / Opci upit) isli su jedan
   ispod drugog na mobitelu; sada 2 x 2, kao plocice. */
.contact-hero-grid { grid-template-columns:1fr; }
.contact-hero-grid > div { max-width:820px; }
@media (max-width: 720px) {
  .contact-tabs { grid-template-columns:1fr 1fr; gap:10px; }
  .contact-tab { flex-direction:column; gap:8px; min-height:88px; padding:14px 10px;
    text-align:center; font-size:13px; line-height:1.25; }
}

/* --- KARTICE NA NASLOVNICI: ikona uz naslov na mobitelu, 8.9.2026. --------
   Vlasnikova uputa: kartice su i dalje prevelike na mobitelu, treba ih smanjiti.
   Traka s ikonom bila je 86 px cistog ukrasa IZNAD svake od tri kartice.
   Sada je ikona mala plocica LIJEVO OD NASLOVA, a tekst ide punom sirinom.
   Na sirokom ekranu traka ostaje ista - negativne margine ponistavaju
   padding .card-body, pa se proteze od ruba do ruba kao i prije. */
.path-card .card-body > .path-visual { margin:-23px -23px 20px; }
@media (max-width: 720px) {
  .path-card .card-body { display:grid; grid-template-columns:auto 1fr;
    column-gap:12px; align-content:start; padding:16px; }
  .path-card .card-body > .path-visual { grid-column:1; grid-row:1;
    width:46px; height:46px; min-height:0; margin:0; border-radius:11px; }
  .path-card .card-body > .path-visual svg { width:26px; height:26px; }
  .path-card .card-body h2 { grid-column:2; grid-row:1; align-self:center; margin:0; }
  .path-card .card-body p { grid-column:1 / -1; margin:12px 0 0; }
  .path-card .card-body .button { grid-column:1 / -1; margin-top:14px; }
}

/* --- SOFTVER: telefon se gubio pri zumiranju, 8.9.2026. ------------------
   Vlasnik drzi preglednik na 130 %, pa je stupac sa slikom uzi i visi.
   Izmjereno na toj sirini: okvir 561x545 (omjer 1,03), slika 1672x941
   (omjer 1,78) -> cover je rezao 21 % lijevo I 21 % desno, vidljivo je bilo
   samo 58 % slike. Telefon zivi u desnih 20 %, dakle nestajao je u cijelosti.
   Rjesenje: rez ide SAMO S LIJEVE strane - a lijevu stranu maska ionako
   rastapa u pozadinu, pa se ne gubi nista sto se vidi. Desni rub, gdje su
   laptop i telefon, ostaje cijel na svakoj sirini. */


/* --- SOFTVER: gdje slika stoji i gdje se rastapa, 8.9.2026. --------------
   IZMJERENO IZ SAME DATOTEKE, ne procijenjeno s ekrana:
     ekran laptopa  = 58-75 % sirine fotografije
     telefon        = 76-90 %
     90-100 %       = prazna pozadina, vlastiti rub fotografije
   Tablica po zumovima (100 %, 120 %, 130 %) pokazala je:
     sidro 50 % (sredina) -> TELEFON ISPADA na svakom zumu
     sidro 78 %           -> oboje stane, ali telefon je zalijepljen uz rub
     sidro 100 % (desno)  -> laptop 28-65 %, telefon 59-86 % okvira, s zrakom
   Zato sidro ide DESNO, a prazni desni rub same fotografije je tocno mjesto
   gdje rastapanje moze zivjeti a da ne dira telefon.
   I GLAVNA ISPRAVKA: laptop se prije nije REZAO nego RASTAPAO - lijeva maska
   je bila puna tek na 60 %, a laptop je na tom zumu lezao na 28-57 %.
   Maska sada mora biti POTPUNO NEPROZIRNA od 24 % do 89 % okvira. */
.software-hero .hero-art img { object-position:right center; }
@media (min-width: 1031px) {
  .software-hero .hero-art img {
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 12%,#000 24%,#000 89%,rgba(0,0,0,.45) 96%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 12%,#000 24%,#000 89%,rgba(0,0,0,.45) 96%,rgba(0,0,0,0) 100%); }
}

/* Language switch ----------------------------------------------------------
   Built by site.js, never present in the markup — the same route the quota menu
   item takes, so tools/oznaci-blokove.py never sees it and no block number moves.
   Stays visible on mobile, where .header-actions .button is hidden. */
.lang-switch { display:inline-flex; align-items:center; gap:2px; font-size:13px;
  font-weight:600; letter-spacing:.04em; border:1px solid var(--line-strong);
  border-radius:999px; padding:3px; background:var(--surface); }
.lang-switch a, .lang-switch span { display:inline-block; padding:3px 9px; border-radius:999px;
  color:var(--muted); text-decoration:none; line-height:1.5; }
.lang-switch a:hover, .lang-switch a:focus-visible { color:var(--navy-900); background:var(--cyan-100); }
.lang-switch .is-current { color:var(--surface); background:var(--teal-700); }
/* A link whose target is in another language: a quiet marker, so the change of
   language is never a surprise after the click. */
.lang-tag { display:inline-block; margin-left:4px; padding:0 5px; border-radius:4px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); background:var(--line); vertical-align:middle; }