/* ==========================================================================
   B&G Avtomobili — Šentjur
   Combined static site: header/hero/footer (1), tray, sales, insurance,
   location (5), services navigator + location card (8), about (4 + 2).
   ========================================================================== */

:root {
  --carbon: #16171a;
  --red: #ec1d25;
  --white: #ffffff;
  --soft: #f3f3f4;
  --muted: #66696f;
  --whatsapp: #1fa855;
  --viber: #2f6fe4;

  --line: color-mix(in srgb, var(--carbon) 10%, transparent);
  --line-light: color-mix(in srgb, var(--white) 16%, transparent);
  --text-on-dark: color-mix(in srgb, var(--white) 80%, transparent);
  --text-on-dark-muted: color-mix(in srgb, var(--white) 68%, transparent);
  --radius: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--carbon) 6%, transparent),
    0 4px 12px -6px color-mix(in srgb, var(--carbon) 12%, transparent);
  --shadow-lg: 0 24px 48px -20px color-mix(in srgb, var(--carbon) 38%, transparent);
  --shadow-red: 0 10px 22px -12px color-mix(in srgb, var(--red) 75%, transparent);
  --dur: 0.2s;
  --header-h: 72px;
  --tray-h: 68px;
  --top-h: calc(var(--header-h) + var(--tray-h));
  --font-head: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --slide-dur: 7s;
  --carbon-weave:
    repeating-linear-gradient(45deg, #ffffff06 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, #00000040 0 2px, transparent 2px 6px),
    var(--carbon);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--white);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--carbon);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur);
}

::selection {
  background: var(--red);
  color: var(--white);
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
address,
fieldset {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

address {
  font-style: normal;
}

fieldset {
  border: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  font-stretch: 112%;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 20px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}

.skip:focus {
  top: 12px;
}

/* Outline follows each element's own radius, so no radius override here. */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* ---------- Icons (CSS mask, Lucide & brand) ---------- */
.i {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-image: var(--i);
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--i);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

.i-activity { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2'/%3E%3C/svg%3E"); }
.i-arrow-right { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-arrow-right' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 12h14' /%3E %3Cpath d='m12 5 7 7-7 7' /%3E %3C/svg%3E"); }
.i-arrow-up-right { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-arrow-up-right' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M7 7h10v10' /%3E %3Cpath d='M7 17 17 7' /%3E %3C/svg%3E"); }
.i-award { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-award' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526' /%3E %3Ccircle cx='12' cy='8' r='6' /%3E %3C/svg%3E"); }
.i-badge-check { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-badge-check' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z' /%3E %3Cpath d='m16 9-5.5 5.5L8 12' /%3E %3C/svg%3E"); }
.i-banknote { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-banknote' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='20' height='12' x='2' y='6' rx='2' /%3E %3Ccircle cx='12' cy='12' r='2' /%3E %3Cpath d='M6 12h.01M18 12h.01' /%3E %3C/svg%3E"); }
.i-calendar-check { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-calendar-check' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M8 2v3' /%3E %3Cpath d='M16 2v3' /%3E %3Crect x='3' y='3' width='18' height='18' rx='2' /%3E %3Cpath d='M3 9h18' /%3E %3Cpath d='m9 15 2 2 4-4' /%3E %3C/svg%3E"); }
.i-car-front { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-car-front' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m21 8-2 2-1.5-3.7A2 2 0 0 0 15.646 5H8.4a2 2 0 0 0-1.903 1.257L5 10 3 8' /%3E %3Cpath d='M7 14h.01' /%3E %3Cpath d='M17 14h.01' /%3E %3Crect width='18' height='8' x='3' y='10' rx='2' /%3E %3Cpath d='M5 18v2' /%3E %3Cpath d='M19 18v2' /%3E %3C/svg%3E"); }
.i-car { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-car' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2' /%3E %3Ccircle cx='7' cy='17' r='2' /%3E %3Cpath d='M9 17h6' /%3E %3Ccircle cx='17' cy='17' r='2' /%3E %3C/svg%3E"); }
.i-check { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-check' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 6 9 17l-5-5' /%3E %3C/svg%3E"); }
.i-circle-dot { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
.i-clipboard-check { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-clipboard-check' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='8' height='4' x='8' y='2' rx='1' ry='1' /%3E %3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2' /%3E %3Cpath d='m9 14 2 2 4-4' /%3E %3C/svg%3E"); }
.i-clock { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-clock' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='M12 6v6l4 2' /%3E %3C/svg%3E"); }
.i-cloud-hail { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-cloud-hail' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242' /%3E %3Cpath d='M16 14v2' /%3E %3Cpath d='M8 14v2' /%3E %3Cpath d='M16 20h.01' /%3E %3Cpath d='M8 20h.01' /%3E %3Cpath d='M12 16v2' /%3E %3Cpath d='M12 22h.01' /%3E %3C/svg%3E"); }
.i-cog { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-cog' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11 10.27 7 3.34' /%3E %3Cpath d='m11 13.73-4 6.93' /%3E %3Cpath d='M12 22v-2' /%3E %3Cpath d='M12 2v2' /%3E %3Cpath d='M14 12h8' /%3E %3Cpath d='m17 20.66-1-1.73' /%3E %3Cpath d='m17 3.34-1 1.73' /%3E %3Cpath d='M2 12h2' /%3E %3Cpath d='m20.66 17-1.73-1' /%3E %3Cpath d='m20.66 7-1.73 1' /%3E %3Cpath d='m3.34 17 1.73-1' /%3E %3Cpath d='m3.34 7 1.73 1' /%3E %3Ccircle cx='12' cy='12' r='2' /%3E %3Ccircle cx='12' cy='12' r='8' /%3E %3C/svg%3E"); }
.i-file-text { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-file-text' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z' /%3E %3Cpath d='M14 2v5a1 1 0 0 0 1 1h5' /%3E %3Cpath d='M10 9H8' /%3E %3Cpath d='M16 13H8' /%3E %3Cpath d='M16 17H8' /%3E %3C/svg%3E"); }
.i-hammer { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-hammer' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9' /%3E %3Cpath d='m18 15 4-4' /%3E %3Cpath d='m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5' /%3E %3C/svg%3E"); }
.i-handshake { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-handshake' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m11 17 2 2a1 1 0 1 0 3-3' /%3E %3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4' /%3E %3Cpath d='m21 3 1 11h-2' /%3E %3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3' /%3E %3Cpath d='M3 4h8' /%3E %3C/svg%3E"); }
.i-instagram { --i: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EInstagram%3C/title%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E"); }
.i-key-round { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-key-round' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z' /%3E %3Ccircle cx='16.5' cy='7.5' r='.5' fill='%23000' /%3E %3C/svg%3E"); }
.i-lightbulb { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5M9 18h6M10 22h4'/%3E%3C/svg%3E"); }
.i-mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); }
.i-map-pin { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-map-pin' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0' /%3E %3Ccircle cx='12' cy='10' r='3' /%3E %3C/svg%3E"); }
.i-menu { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-menu' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M4 5h16' /%3E %3Cpath d='M4 12h16' /%3E %3Cpath d='M4 19h16' /%3E %3C/svg%3E"); }
.i-navigation { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-navigation' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpolygon points='3 11 22 2 13 21 11 13 3 11' /%3E %3C/svg%3E"); }
.i-phone-call { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-phone-call' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M13 2a9 9 0 0 1 9 9' /%3E %3Cpath d='M13 6a5 5 0 0 1 5 5' /%3E %3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384' /%3E %3C/svg%3E"); }
.i-phone { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-phone' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384' /%3E %3C/svg%3E"); }
.i-play { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-play' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z' /%3E %3C/svg%3E"); }
.i-search-check { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-search-check' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m8 11 2 2 4-4' /%3E %3Ccircle cx='11' cy='11' r='8' /%3E %3Cpath d='m21 21-4.3-4.3' /%3E %3C/svg%3E"); }
.i-shield-check { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-shield-check' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z' /%3E %3Cpath d='m9 12 2 2 4-4' /%3E %3C/svg%3E"); }
.i-snowflake { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h20M12 2v20m8-6-4-4 4-4M4 8l4 4-4 4M16 4l-4 4-4-4M8 20l4-4 4 4'/%3E%3C/svg%3E"); }
.i-sparkles { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-sparkles' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z' /%3E %3Cpath d='M20 2v4' /%3E %3Cpath d='M22 4h-4' /%3E %3Ccircle cx='4' cy='20' r='2' /%3E %3C/svg%3E"); }
.i-spray-can { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-spray-can' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 3h.01' /%3E %3Cpath d='M7 5h.01' /%3E %3Cpath d='M11 7h.01' /%3E %3Cpath d='M3 7h.01' /%3E %3Cpath d='M7 9h.01' /%3E %3Cpath d='M3 11h.01' /%3E %3Crect width='4' height='4' x='15' y='5' /%3E %3Cpath d='m19 9 2 2v10c0 .6-.4 1-1 1h-6c-.6 0-1-.4-1-1V11l2-2' /%3E %3Cpath d='m13 14 8-2' /%3E %3Cpath d='m13 19 8-2' /%3E %3C/svg%3E"); }
.i-timer { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4M12 14l3-3'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3C/svg%3E"); }
.i-tire { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1'/%3E%3C/svg%3E"); }
.i-user-round { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E"); }
.i-users { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-users' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /%3E %3Cpath d='M16 3.128a4 4 0 0 1 0 7.744' /%3E %3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87' /%3E %3Ccircle cx='9' cy='7' r='4' /%3E %3C/svg%3E"); }
.i-viber { --i: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EViber%3C/title%3E%3Cpath d='M11.4 0C9.473.028 5.333.344 3.02 2.467 1.302 4.187.696 6.7.633 9.817.57 12.933.488 18.776 6.12 20.36h.003l-.004 2.416s-.037.977.61 1.177c.777.242 1.234-.5 1.98-1.302.407-.44.972-1.084 1.397-1.58 3.85.326 6.812-.416 7.15-.525.776-.252 5.176-.816 5.892-6.657.74-6.02-.36-9.83-2.34-11.546-.596-.55-3.006-2.3-8.375-2.323 0 0-.395-.025-1.037-.017zm.058 1.693c.545-.004.88.017.88.017 4.542.02 6.717 1.388 7.222 1.846 1.675 1.435 2.53 4.868 1.906 9.897v.002c-.604 4.878-4.174 5.184-4.832 5.395-.28.09-2.882.737-6.153.524 0 0-2.436 2.94-3.197 3.704-.12.12-.26.167-.352.144-.13-.033-.166-.188-.165-.414l.02-4.018c-4.762-1.32-4.485-6.292-4.43-8.895.054-2.604.543-4.738 1.996-6.173 1.96-1.773 5.474-2.018 7.11-2.03zm.38 2.602c-.167 0-.303.135-.304.302 0 .167.133.303.3.305 1.624.01 2.946.537 4.028 1.592 1.073 1.046 1.62 2.468 1.633 4.334.002.167.14.3.307.3.166-.002.3-.138.3-.304-.014-1.984-.618-3.596-1.816-4.764-1.19-1.16-2.692-1.753-4.447-1.765zm-3.96.695c-.19-.032-.4.005-.616.117l-.01.002c-.43.247-.816.562-1.146.932-.002.004-.006.004-.008.008-.267.323-.42.638-.46.948-.008.046-.01.093-.007.14 0 .136.022.27.065.4l.013.01c.135.48.473 1.276 1.205 2.604.42.768.903 1.5 1.446 2.186.27.344.56.673.87.984l.132.132c.31.308.64.6.984.87.686.543 1.418 1.027 2.186 1.447 1.328.733 2.126 1.07 2.604 1.206l.01.014c.13.042.265.064.402.063.046.002.092 0 .138-.008.31-.036.627-.19.948-.46.004 0 .003-.002.008-.005.37-.33.683-.72.93-1.148l.003-.01c.225-.432.15-.842-.18-1.12-.004 0-.698-.58-1.037-.83-.36-.255-.73-.492-1.113-.71-.51-.285-1.032-.106-1.248.174l-.447.564c-.23.283-.657.246-.657.246-3.12-.796-3.955-3.955-3.955-3.955s-.037-.426.248-.656l.563-.448c.277-.215.456-.737.17-1.248-.217-.383-.454-.756-.71-1.115-.25-.34-.826-1.033-.83-1.035-.137-.165-.31-.265-.502-.297zm4.49.88c-.158.002-.29.124-.3.282-.01.167.115.312.282.324 1.16.085 2.017.466 2.645 1.15.63.688.93 1.524.906 2.57-.002.168.13.306.3.31.166.003.305-.13.31-.297.025-1.175-.334-2.193-1.067-2.994-.74-.81-1.777-1.253-3.05-1.346h-.024zm.463 1.63c-.16.002-.29.127-.3.287-.008.167.12.31.288.32.523.028.875.175 1.113.422.24.245.388.62.416 1.164.01.167.15.295.318.287.167-.008.295-.15.287-.317-.03-.644-.215-1.178-.58-1.557-.367-.378-.893-.574-1.52-.607h-.018z'/%3E%3C/svg%3E"); }
.i-waze { --i: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EWaze%3C/title%3E%3Cpath d='M13.218 0C9.915 0 6.835 1.49 4.723 4.148c-1.515 1.913-2.31 4.272-2.31 6.706v1.739c0 .894-.62 1.738-1.862 1.813-.298.025-.547.224-.547.522-.05.82.82 2.31 2.012 3.502.82.844 1.788 1.515 2.832 2.036a3 3 0 0 0 2.955 3.528 2.966 2.966 0 0 0 2.931-2.385h2.509c.323 1.689 2.086 2.856 3.974 2.21 1.64-.546 2.36-2.409 1.763-3.924a12.84 12.84 0 0 0 1.838-1.465 10.73 10.73 0 0 0 3.18-7.65c0-2.882-1.118-5.589-3.155-7.625A10.899 10.899 0 0 0 13.218 0zm0 1.217c2.558 0 4.967.994 6.78 2.807a9.525 9.525 0 0 1 2.807 6.78A9.526 9.526 0 0 1 20 17.585a9.647 9.647 0 0 1-6.78 2.807h-2.46a3.008 3.008 0 0 0-2.93-2.41 3.03 3.03 0 0 0-2.534 1.367v.024a8.945 8.945 0 0 1-2.41-1.788c-.844-.844-1.316-1.614-1.515-2.11a2.858 2.858 0 0 0 1.441-.846 2.959 2.959 0 0 0 .795-2.036v-1.789c0-2.11.696-4.197 2.012-5.861 1.863-2.385 4.62-3.726 7.6-3.726zm-2.41 5.986a1.192 1.192 0 0 0-1.191 1.192 1.192 1.192 0 0 0 1.192 1.193A1.192 1.192 0 0 0 12 8.395a1.192 1.192 0 0 0-1.192-1.192zm7.204 0a1.192 1.192 0 0 0-1.192 1.192 1.192 1.192 0 0 0 1.192 1.193 1.192 1.192 0 0 0 1.192-1.193 1.192 1.192 0 0 0-1.192-1.192zm-7.377 4.769a.596.596 0 0 0-.546.845 4.813 4.813 0 0 0 4.346 2.757 4.77 4.77 0 0 0 4.347-2.757.596.596 0 0 0-.547-.845h-.025a.561.561 0 0 0-.521.348 3.59 3.59 0 0 1-3.254 2.061 3.591 3.591 0 0 1-3.254-2.061.64.64 0 0 0-.546-.348z'/%3E%3C/svg%3E"); }
.i-whatsapp { --i: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EWhatsApp%3C/title%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E"); }
.i-wrench { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-wrench' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z' /%3E %3C/svg%3E"); }
.i-x { --i: url("data:image/svg+xml,%3Csvg class='lucide lucide-x' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M18 6 6 18' /%3E %3Cpath d='m6 6 12 12' /%3E %3C/svg%3E"); }
.i-zap { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E"); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease),
    background-color var(--dur),
    color var(--dur),
    border-color var(--dur),
    box-shadow var(--dur);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline-offset: 2px;
}

.btn .i {
  width: 18px;
  height: 18px;
}

.btn--sm {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
}

.btn--red {
  background: var(--red);
  color: var(--white);
}

.btn--red:hover {
  background: color-mix(in srgb, var(--red) 86%, var(--carbon));
  box-shadow: var(--shadow-red);
}

.btn--dark {
  background: var(--carbon);
  color: var(--white);
}

.btn--dark:hover {
  background: color-mix(in srgb, var(--carbon) 80%, var(--red));
}

.btn--ghost {
  color: var(--white);
  border-color: color-mix(in srgb, var(--white) 40%, transparent);
  background: color-mix(in srgb, var(--carbon) 30%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  border-color: var(--white);
  background: color-mix(in srgb, var(--carbon) 45%, transparent);
}

.btn--line {
  color: var(--carbon);
  border-color: var(--line);
  background: var(--white);
}

.btn--line:hover {
  border-color: var(--carbon);
}

/* Action pill (Pokliči / Viber / WhatsApp) */
.act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition:
    transform var(--dur) var(--ease),
    background-color var(--dur),
    border-color var(--dur);
}

.act .i {
  width: 18px;
  height: 18px;
}

.act:hover {
  border-color: var(--white);
  transform: translateY(-2px);
}

.act:focus-visible {
  outline-offset: 2px;
}

.act--call {
  background: var(--red);
  border-color: var(--red);
}

.act--call:hover {
  background: color-mix(in srgb, var(--red) 86%, var(--carbon));
  border-color: transparent;
}

.act--wa {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
}

.act--viber {
  background: var(--viber);
  border-color: var(--viber);
}

.act--wa:hover,
.act--viber:hover {
  border-color: var(--white);
}

/* ---------- Top: header (1) + tray (5) ---------- */
/* Header and tray share one background so they read as a single bar with no seam. */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--carbon-weave);
  box-shadow: 0 10px 24px -14px #00000099;
}

.site-header {
  position: relative;
  z-index: 2;
  color: var(--white);
}

.site-header .brand img {
  filter: brightness(0) invert(1);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}

.brand img {
  width: 180px;
  height: auto;
}

.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nav-burger {
  display: grid;
  place-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 12%, transparent);
  cursor: pointer;
}

.nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
  transition: transform 0.3s var(--ease);
}

.nav-toggle:focus-visible + .nav-burger {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.nav-toggle:checked + .nav-burger span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.nav-toggle:checked + .nav-burger span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

.site-nav {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 8px 20px 24px;
  background: var(--carbon);
  border-bottom: 1px solid var(--line-light);
  box-shadow: 0 24px 48px -12px #00000080;
}

.nav-toggle:checked ~ .site-nav {
  display: flex;
}

.site-nav ul {
  display: flex;
  flex-direction: column;
}

.site-nav ul a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-light);
  font-weight: 500;
}

.site-nav ul a[aria-current="page"] {
  color: var(--red);
}

.nav-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.nav-ig {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  min-height: 44px;
  padding: 0 16px 0 6px;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition:
    border-color 0.2s,
    color 0.2s;
}

.nav-ig__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 12%, transparent);
  color: var(--white);
  transition: background-color 0.2s;
}

.nav-ig__icon .i {
  width: 17px;
  height: 17px;
}

.nav-ig:hover {
  border-color: var(--red);
  color: var(--red);
}

.nav-ig:hover .nav-ig__icon {
  background: var(--red);
}

@media (min-width: 768px) {
  .brand img {
    width: 220px;
  }
}

@media (min-width: 1080px) {
  .nav-ig {
    padding: 0;
    border: 0;
  }

  .nav-ig__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .nav-ig__icon {
    width: 42px;
    height: 42px;
  }

  .nav-ig__icon .i {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 1080px) {
  .nav-burger {
    display: none;
  }

  .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-nav ul {
    flex-direction: row;
    gap: 24px;
  }

  .site-nav ul a {
    position: relative;
    padding: 6px 0;
    border: 0;
    font-size: 15px;
  }

  .site-nav ul a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s var(--ease);
  }

  .site-nav ul a:hover::after,
  .site-nav ul a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .site-nav ul a[aria-current="page"] {
    color: inherit;
  }
}

.tray {
  color: var(--white);
}

.tray__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  height: var(--tray-h);
  padding: 9px 11px;
  isolation: isolate;
}

/* One shared capsule behind all links so they read as a single dock */
.tray__inner::before {
  content: "";
  position: absolute;
  inset: 5px 7px;
  z-index: -1;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff12, #ffffff08);
  box-shadow:
    inset 0 0 0 1px #ffffff17,
    inset 0 1px 0 #ffffff1a;
}

.tray__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 4px;
  border-radius: 14px;
  background: transparent;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  font-stretch: 105%;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: center;
  transition: background-color 0.2s;
}

.tray__item:hover {
  background: #ffffff14;
}

.tray__item:nth-child(n + 3)::before {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 0;
  width: 1px;
  background: #ffffff1f;
  transition: opacity 0.2s;
}

.tray__item:hover::before,
.tray__item:hover + .tray__item::before {
  opacity: 0;
}

.tray__item:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.tray__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--red);
  transition:
    background-color 0.2s,
    color 0.2s;
}

.tray__icon .i {
  width: 16px;
  height: 16px;
}

.tray__item:not(.tray__item--main):hover .tray__icon {
  background: var(--red);
  color: var(--white);
}

.tray__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tray__sub,
.tray__arrow {
  display: none;
}

/* Ponudba vozil – the primary call to action */
.tray__item--main {
  overflow: hidden;
  background: var(--red);
  margin-right: 4px;
  border-radius: 16px;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--red) 80%, transparent);
  font-size: 12.5px;
  font-weight: 800;
  isolation: isolate;
}

.tray__item--main::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 35%, #ffffff33 50%, transparent 65%);
  transform: translateX(-100%);
  animation: tray-sheen 5s var(--ease) 1.2s infinite;
}

.tray__item--main .tray__icon {
  background: var(--white);
  color: var(--red);
}

.tray__item--main:hover {
  background: color-mix(in srgb, var(--red) 88%, var(--carbon));
}

@keyframes tray-sheen {
  0%, 60% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .tray__item--main::after {
    animation: none;
  }
}

@media (min-width: 768px) {
  :root {
    --tray-h: 58px;
  }

  .tray__inner {
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    padding: 10px 25px;
  }

  .tray__inner::before {
    inset: 6px 20px;
    border-radius: 999px;
  }

  .tray__item {
    flex-direction: row;
    gap: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13.5px;
  }

  .tray__icon {
    width: 28px;
    height: 28px;
    background: #ffffff0f;
  }

  .tray__item--main {
    justify-content: flex-start;
    gap: 10px;
    margin-right: 6px;
    padding: 3px 16px 3px 3px;
    text-align: left;
  }

  .tray__item--main .tray__icon {
    width: 32px;
    height: 32px;
    background: var(--white);
  }

  .tray__item--main .tray__icon .i {
    width: 17px;
    height: 17px;
  }

  .tray__item--main .tray__label {
    font-size: 14.5px;
    font-stretch: 115%;
    letter-spacing: 0.01em;
  }

  .tray__sub {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: color-mix(in srgb, var(--white) 85%, transparent);
  }

  .tray__arrow {
    display: inline-block;
    flex: none;
    margin-left: auto;
    width: 20px;
    height: 20px;
    transition: transform 0.3s var(--ease);
  }

  .tray__item--main:hover .tray__arrow {
    transform: translate(3px, -3px);
  }
}

/* ---------- Hero (1) ---------- */
.hero {
  position: relative;
  height: clamp(560px, calc(100svh - var(--top-h)), 820px);
  overflow: hidden;
  isolation: isolate;
  background: var(--carbon);
  color: var(--white);
}

.slides {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.9s var(--ease),
    visibility 0s linear 0.9s;
}

.slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s var(--ease);
}

.slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.slide.is-active .slide-img {
  animation: ken-burns var(--slide-dur) linear both;
}

.slide-tint {
  position: absolute;
  inset: 0;
}

.slide-1 .slide-tint {
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--carbon) 85%, transparent) 0%, transparent 45%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--carbon) 92%, transparent) 0%,
      color-mix(in srgb, var(--carbon) 45%, transparent) 50%,
      color-mix(in srgb, var(--red) 30%, transparent) 100%
    );
}

.slide-2 .slide-tint {
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--carbon) 92%, transparent) 0%,
      color-mix(in srgb, var(--carbon) 15%, transparent) 65%
    ),
    linear-gradient(90deg, color-mix(in srgb, var(--red) 55%, transparent) 0%, transparent 55%);
}

.slide-3 .slide-tint {
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--carbon) 70%, transparent) 0%, transparent 50%),
    linear-gradient(
      115deg,
      color-mix(in srgb, var(--red) 85%, transparent) 0%,
      color-mix(in srgb, var(--red) 35%, transparent) 38%,
      color-mix(in srgb, var(--carbon) 88%, transparent) 78%
    );
}

.slide-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 104px;
}

.slide.is-active .slide-content > * {
  animation: text-in 0.9s var(--ease) both;
  animation-delay: calc(150ms + var(--n, 0) * 120ms);
}

.slide-content > :nth-child(2) { --n: 1; }
.slide-content > :nth-child(3) { --n: 2; }
.slide-content > :nth-child(4) { --n: 3; }
.slide-content > :nth-child(5) { --n: 4; }

.slide-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  border: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 12%, transparent);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 30%, transparent);
}

.slide-3 .pulse-dot {
  background: var(--white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--white) 30%, transparent);
}

.slide-title {
  max-width: 14ch;
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 8.5vw, 7rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: none;
  text-wrap: balance;
}

.slide-price {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  font-weight: 500;
  font-stretch: 112%;
  line-height: 1.1;
}

.slide-price strong {
  font-weight: 800;
}

.slide-price sup,
.slide-note sup {
  font-size: 0.55em;
}

.slide-note {
  max-width: 46ch;
  color: var(--text-on-dark);
  font-size: 15px;
}

.slide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.hero-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;
  z-index: 5;
  display: flex;
  gap: 8px;
}

.hero-progress .bar {
  position: relative;
  flex: 0 0 56px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-progress .bar::before,
.hero-progress .bar i {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
}

.hero-progress .bar::before {
  background: color-mix(in srgb, var(--white) 25%, transparent);
  transition: background-color 0.2s;
}

.hero-progress .bar:hover::before {
  background: color-mix(in srgb, var(--white) 55%, transparent);
}

.hero-progress .bar:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
  border-radius: 4px;
}

.hero-progress .bar i {
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
}

.hero-progress .bar.is-active i {
  animation: progress var(--slide-dur) linear both;
}

.hero:hover :is(.slide-img, .hero-progress i),
.hero:has(:focus-visible) :is(.slide-img, .hero-progress i) {
  animation-play-state: paused;
}

@keyframes ken-burns {
  from { transform: scale(1.14) translateX(1.5%); }
  to { transform: scale(1.02) translateX(0); }
}

@keyframes text-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .slide,
  .slide.is-active {
    transition: none;
  }

  .slide *,
  .slide.is-active * {
    animation: none !important;
  }

  .hero-progress .bar.is-active i {
    animation: none;
    transform: scaleX(1);
  }
}

/* ---------- Sections ---------- */
.section {
  padding-block: 64px;
}

.section--soft {
  background: var(--soft);
}

.section--carbon {
  background: var(--carbon-weave);
  color: var(--white);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  margin-bottom: 36px;
}

.section__head--split {
  max-width: none;
}

.section__head .section__head {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .section__head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }

  .section__head--split .section__lead {
    max-width: 46ch;
  }
}

.section__title {
  font-size: clamp(30px, 5vw, 50px);
  font-weight: 800;
}

.section__lead {
  color: var(--muted);
  font-size: 17px;
}

.section--carbon .section__lead {
  color: var(--text-on-dark);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--red);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  font-stretch: 120%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow--light {
  color: var(--white);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--red);
  transform: rotate(45deg);
}

@media (min-width: 1024px) {
  .section {
    padding-block: 88px;
  }

  .section__head {
    margin-bottom: 44px;
  }
}

/* ---------- Prodaja (5) ---------- */
.sales {
  display: grid;
  gap: 16px;
}

.sales__media {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  background: var(--white);
}

.sales__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sales__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.sales__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mini {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.mini__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--soft);
  color: var(--red);
}

.mini h3 {
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
}

.mini p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

@media (min-width: 900px) {
  .sales {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 24px;
  }

  .sales__media {
    aspect-ratio: auto;
    min-height: 100%;
  }
}

/* Compressed call list */
.calls {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.calls__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calls__list {
  display: grid;
  gap: 4px;
}

.call {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 8px 8px 12px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s;
}

.call:hover {
  background: var(--soft);
}

.call__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--carbon);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
}

.call__avatar .i {
  width: 17px;
  height: 17px;
}

.call--salon .call__avatar {
  background: var(--red);
}

.call__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}

.call__role {
  color: var(--muted);
  font-size: 13px;
}

.call__num {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  font-stretch: 112%;
  white-space: nowrap;
}

.call__num:hover,
.agent__num a:hover {
  color: var(--red);
}

.call__acts {
  display: flex;
  gap: 6px;
}

.ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--carbon);
  transition:
    transform var(--dur) var(--ease),
    background-color var(--dur),
    color var(--dur),
    border-color var(--dur);
}

.ico:focus-visible {
  outline-offset: 2px;
}

.ico .i {
  width: 17px;
  height: 17px;
}

.ico:hover {
  border-color: var(--carbon);
}

.ico--call {
  border-color: var(--red);
  background: var(--red);
  color: var(--white);
}

.ico--call:hover {
  border-color: var(--carbon);
  background: var(--carbon);
}

.ico--wa {
  border-color: color-mix(in srgb, var(--whatsapp) 35%, transparent);
  background: color-mix(in srgb, var(--whatsapp) 10%, var(--white));
  color: var(--whatsapp);
}

.ico--viber {
  border-color: color-mix(in srgb, var(--viber) 35%, transparent);
  background: color-mix(in srgb, var(--viber) 10%, var(--white));
  color: var(--viber);
}

.ico--wa:hover {
  border-color: var(--whatsapp);
  background: var(--whatsapp);
  color: var(--white);
}

.ico--viber:hover {
  border-color: var(--viber);
  background: var(--viber);
  color: var(--white);
}

@media (min-width: 640px) and (max-width: 899px) {
  .calls__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 8px;
  }
}

/* ---------- Zavarovanja (5) ---------- */
.insure {
  display: grid;
  gap: 48px;
  align-items: center;
}

.insure__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.insure__lead {
  max-width: 52ch;
  color: var(--text-on-dark);
  font-size: 17px;
}

.agent {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.agent__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--red);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
}

.agent__name {
  font-size: 15px;
  color: var(--text-on-dark);
}

.agent__name strong {
  color: var(--white);
  font-weight: 600;
}

.agent__num {
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1.1;
}

.insure__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.insure__partners {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.partner-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.insure__partners-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-light);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  font-stretch: 120%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.insure__partners-label .i {
  width: 18px;
  height: 18px;
  color: var(--red);
}

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

.partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  min-height: 68px;
  padding: 12px 16px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--carbon);
  font-size: 14px;
  line-height: 1.2;
  transition:
    border-color 0.2s,
    transform 0.25s var(--ease);
}

.partner:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}

.partner img {
  height: 30px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.partner .partner__img--tall {
  height: 40px;
}

.partner__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.partner--sava .partner__logo img {
  height: 30px;
}

.partner strong {
  display: block;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
}

.partner:focus-visible {
  outline-offset: 2px;
}

.partners__note {
  color: var(--text-on-dark-muted);
  font-size: 13px;
}

@media (min-width: 960px) {
  .insure {
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
  }
}

/* ---------- Storitve navigator (8) ---------- */
.nav-svc {
  display: grid;
  gap: 16px;
}

.nav-svc > * {
  min-width: 0;
}

/* Small screens: every service visible at once in a tappable grid, no hidden horizontal scroll. */
.nav-svc__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.nav-svc__tabs label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 56px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  font-stretch: 105%;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.nav-svc__tabs label .i {
  flex: none;
  color: var(--red);
}

@media (min-width: 640px) {
  .nav-svc__tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.nav-svc__tabs .tab-arrow {
  display: none;
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.nav-svc__tabs label:hover {
  border-color: var(--carbon);
}

.nav-svc__tabs input:checked + label {
  border-color: var(--carbon);
  background: var(--carbon);
  color: var(--white);
}

.nav-svc__tabs input:checked + label .tab-arrow {
  color: var(--red);
}

.nav-svc__tabs input:focus-visible + label {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.nav-svc__panels {
  display: grid;
}

/* All panels share one grid cell, so the stack always takes the tallest panel's height. */
.svc-panel {
  display: grid;
  grid-area: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--soft);
  visibility: hidden;
}

.nav-svc:has(#svc-1:checked) .svc-panel--1,
.nav-svc:has(#svc-2:checked) .svc-panel--2,
.nav-svc:has(#svc-3:checked) .svc-panel--3,
.nav-svc:has(#svc-4:checked) .svc-panel--4,
.nav-svc:has(#svc-5:checked) .svc-panel--5,
.nav-svc:has(#svc-6:checked) .svc-panel--6 {
  visibility: visible;
  animation: panel-in 0.45s var(--ease) both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.svc-panel img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.svc-panel__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  padding: 28px 24px 32px;
}

.svc-panel__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  font-stretch: 115%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.svc-panel__meta .i {
  width: 16px;
  height: 16px;
  color: var(--red);
}

.svc-panel h3 {
  max-width: 40ch;
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.35;
}

.checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
}

.check-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
}

.check-mark .i {
  width: 13px;
  height: 13px;
}

.svc-panel .btn {
  margin-top: 4px;
}

@media (min-width: 960px) {
  .nav-svc {
    --svc-h: 420px;
    grid-template-columns: 300px 1fr;
    gap: 28px;
    align-items: start;
  }

  .nav-svc__tabs {
    display: flex;
    flex-direction: column;
    height: var(--svc-h);
  }

  .nav-svc__tabs label {
    flex: 1;
    gap: 12px;
    min-height: 62px;
    padding: 0 18px;
    font-size: 15px;
    white-space: nowrap;
  }

  .nav-svc__tabs .tab-arrow {
    display: inline-block;
  }

  .svc-panel {
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: minmax(0, 1fr);
    height: var(--svc-h);
  }

  .svc-panel img {
    height: 100%;
    aspect-ratio: auto;
  }

  .svc-panel__body {
    padding: 40px;
  }
}

/* ---------- O nas (4 + 2) ---------- */
.about {
  display: grid;
  gap: 48px;
  align-items: center;
}

.about__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about__copy > p {
  color: var(--text-on-dark);
  font-size: 17px;
}

.values {
  display: grid;
  gap: 18px 28px;
  margin-top: 8px;
}

.values li {
  display: flex;
  gap: 14px;
}

.values .i {
  margin-top: 2px;
  color: var(--red);
}

.values strong {
  display: block;
  font-weight: 600;
}

.values span {
  color: var(--text-on-dark-muted);
  font-size: 15px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
  border-top: 1px solid var(--line-light);
}

.stats div {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  padding: 20px 12px 0 0;
}

.stats div + div {
  padding-left: 16px;
  border-left: 1px solid var(--line-light);
}

.stats dt {
  color: var(--text-on-dark-muted);
  font-size: 14px;
  line-height: 1.35;
}

.stats dd {
  font-family: var(--font-head);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.gallery figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #ffffff0d;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.gallery figure:hover img {
  transform: scale(1.04);
}

.gallery figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--carbon) 72%, transparent);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
}

.g-a {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.g-b,
.g-c {
  aspect-ratio: 4 / 3;
}

@media (min-width: 640px) {
  .values {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .about {
    grid-template-columns: 1fr 1.05fr;
    gap: 64px;
  }
}

/* ---------- Lokacija (5 + 8 card) ---------- */
.location {
  display: grid;
  gap: 16px;
}

.loc {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.loc__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.loc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loc__city {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  font-stretch: 115%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.loc__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
}

.loc__name {
  font-size: 24px;
  font-weight: 800;
}

.loc__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.loc__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
}

.loc__list .i {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  color: var(--red);
}

.loc__list a:hover {
  color: var(--red);
}

.hours {
  display: flex;
  flex-direction: column;
  padding: 4px 16px;
  border-radius: var(--radius-sm);
  background: var(--soft);
}

.hours div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: 14px;
}

.hours div + div {
  border-top: 1px solid var(--line);
}

.hours dt {
  color: var(--muted);
}

.hours dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.loc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.location__map {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.location__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.5s var(--ease);
}

.location__map:hover iframe {
  filter: none;
}

.map-nav {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.map-nav__info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-left: 4px;
  font-size: 14px;
  line-height: 1.3;
}

.map-nav__info strong {
  display: block;
}

.map-nav__info small {
  color: var(--muted);
  font-size: 13px;
}

.map-nav__pin {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--carbon);
  color: var(--red);
}

.map-nav__actions {
  display: flex;
  gap: 8px;
}

@media (min-width: 960px) {
  .location {
    grid-template-columns: 1fr 1.25fr;
  }

  .location__map {
    min-height: 100%;
  }
}

/* ---------- Footer (1) ---------- */
.site-footer {
  background-color: var(--carbon);
  background-image:
    linear-gradient(45deg, #ffffff06 25%, transparent 25%, transparent 75%, #ffffff06 75%),
    linear-gradient(45deg, #ffffff06 25%, transparent 25%, transparent 75%, #ffffff06 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  color: var(--text-on-dark-muted);
  font-size: 15px;
}

.footer-grid {
  display: grid;
  gap: 40px;
  padding-block: 64px 48px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 36ch;
}

.logo-invert {
  width: 220px;
  height: auto;
  filter: brightness(0) invert(1);
}

.footer-title {
  margin-bottom: 14px;
  color: var(--red);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer a:hover {
  color: var(--white);
}

.site-footer address {
  line-height: 1.8;
}

.footer-phoenix {
  display: flex;
  align-items: center;
}

.footer-phoenix img {
  width: 100%;
  max-width: 240px;
  height: auto;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-block: 24px;
  font-size: 13px;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.5fr auto 2fr;
    column-gap: 48px;
  }

  .footer-phoenix {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.3fr auto 2.2fr 1fr;
    column-gap: 56px;
  }

  .footer-phoenix {
    grid-column: auto;
  }

  .footer-phoenix img {
    max-width: 260px;
  }
}

/* ==========================================================================
   Servis subpage
   ========================================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--carbon);
  color: var(--white);
}

.page-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--carbon) 80%, transparent) 0%, transparent 60%),
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--carbon) 94%, transparent) 0%,
      color-mix(in srgb, var(--carbon) 60%, transparent) 55%,
      color-mix(in srgb, var(--red) 40%, transparent) 100%
    );
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-block: 88px 72px;
}

.crumbs {
  display: flex;
  gap: 8px;
  color: var(--text-on-dark-muted);
  font-size: 14px;
}

.crumbs a:hover {
  color: var(--white);
}

.page-hero__title {
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.page-hero__lead {
  max-width: 54ch;
  color: var(--text-on-dark);
  font-size: 17px;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.booking {
  display: grid;
  gap: 16px;
  align-items: start;
}

.form-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.form-card__title {
  margin-bottom: 6px;
  font-size: 24px;
  font-weight: 800;
}

.form-card__lead {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 15px;
}

.form-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.form-status--ok {
  background: var(--carbon);
  color: var(--white);
}

.form-status--error {
  background: color-mix(in srgb, var(--red) 10%, var(--white));
  color: var(--carbon);
  border: 1px solid var(--red);
}

.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.form-grid {
  display: grid;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label,
.field legend {
  font-size: 14px;
  font-weight: 600;
}

.field label span {
  color: var(--red);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--soft);
  color: var(--carbon);
  font: inherit;
  font-size: 16px;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}

.field textarea {
  min-height: 110px;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: color-mix(in srgb, var(--carbon) 30%, transparent);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--red) 40%, transparent);
  outline-offset: 0;
  border-color: var(--red);
  background: var(--white);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--red);
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}

.form-foot p {
  color: var(--muted);
  font-size: 14px;
}

.aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aside-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.aside-card h3 {
  font-size: 19px;
  font-weight: 800;
}

.aside-card--carbon {
  border: 0;
  background: var(--carbon-weave);
  color: var(--white);
}

.aside-card--carbon p {
  color: var(--text-on-dark-muted);
  font-size: 15px;
}

.aside-card__num {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
  color: var(--white);
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: step;
}

.steps li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--carbon);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
}

.svc-cards {
  display: grid;
  gap: 16px;
}

.svc-card {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s;
}

.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.svc-card img {
  flex: none;
  width: 112px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.svc-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 22px;
}

.svc-card h3 {
  font-size: 18px;
  font-weight: 800;
}

.svc-card p {
  color: var(--muted);
  font-size: 15px;
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .field--full {
    grid-column: 1 / -1;
  }

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

  .svc-card {
    flex-direction: column;
  }

  .svc-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 960px) {
  .booking {
    grid-template-columns: 1.6fr 1fr;
  }

  .form-card {
    padding: 36px;
  }

  .aside {
    position: sticky;
    top: calc(var(--top-h) + 24px);
  }

  .svc-cards {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ==========================================================================
   Touch phones & small tablets only. Desktop and mouse users never match this.
   ========================================================================== */
@media (max-width: 768px) and (pointer: coarse) {
  :root {
    --gutter: clamp(16px, 5.5vw, 24px);
  }

  html {
    -webkit-tap-highlight-color: transparent;
  }

  body {
    overflow-x: hidden;
    overflow-x: clip;
  }

  a,
  button,
  label,
  input,
  select,
  textarea,
  summary {
    touch-action: manipulation;
  }

  /* ---------- Fluid gutters + safe-area insets ---------- */
  .container {
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  }

  .header-inner {
    padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
  }

  .tray__inner {
    padding-inline: max(11px, env(safe-area-inset-left)) max(11px, env(safe-area-inset-right));
  }

  .site-header {
    padding-top: env(safe-area-inset-top);
  }

  .site-nav {
    max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  }

  .footer-bottom {
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  }

  /* ---------- Fluid scale ---------- */
  .section {
    padding-block: clamp(48px, 14vw, 64px);
  }

  .section__head {
    margin-bottom: clamp(28px, 8vw, 36px);
  }

  .section__lead,
  .insure__lead,
  .about__copy > p,
  .page-hero__lead {
    font-size: clamp(16px, 4.4vw, 17px);
  }

  .slide-content {
    padding-bottom: clamp(88px, 24vw, 104px);
  }

  .svc-panel__body {
    padding: clamp(22px, 7vw, 28px) clamp(20px, 6vw, 24px) clamp(26px, 8vw, 32px);
  }

  .loc__body,
  .form-card,
  .aside-card {
    padding: clamp(20px, 6vw, 24px);
  }

  .footer-grid {
    padding-block: clamp(48px, 14vw, 64px) 40px;
  }

  /* Grid children default to min-width:auto, which let the stats row push the page wider. */
  .about > *,
  .stats div {
    min-width: 0;
  }

  .stats dd {
    font-size: clamp(22px, 6.6vw, 44px);
  }

  .stats div + div {
    padding-left: clamp(10px, 3vw, 16px);
  }

  /* ---------- 100dvh hero ---------- */
  @supports (height: 100dvh) {
    .hero {
      height: clamp(560px, calc(100dvh - var(--top-h)), 820px);
    }
  }

  /* ---------- Touch targets >= 44px ---------- */
  .btn--sm {
    min-height: 44px;
  }

  .ico {
    width: 44px;
    height: 44px;
  }

  .calls {
    padding: 6px;
  }

  .call {
    gap: 8px;
    padding: 8px 6px 8px 8px;
  }

  .call__avatar {
    width: 32px;
    height: 32px;
  }

  .brand {
    display: block;
    padding-block: 14px;
    margin-block: -14px;
  }

  .call__acts {
    gap: 4px;
  }

  .call__num {
    font-size: clamp(15px, 4.2vw, 16px);
  }

  .hero-progress {
    bottom: 26px;
  }

  .hero-progress .bar {
    height: 44px;
  }

  /* Text links: grow the hit box to 44px, pull it back with negative margins so the layout stays put. */
  .loc__list a,
  .crumbs a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -10px;
  }

  .site-footer ul {
    gap: 0;
  }

  .site-footer ul a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }

  .call__num,
  .agent__num a,
  .aside-card__num {
    position: relative;
  }

  .call__num::after,
  .agent__num a::after,
  .aside-card__num::after {
    content: "";
    position: absolute;
    inset: -12px -6px;
  }

  .consent input {
    width: 22px;
    height: 22px;
    margin-top: 0;
  }

  /* ---------- Inputs: 16px stops iOS zoom-on-focus ---------- */
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
  }

  .nav-svc__tabs label {
    transition:
      transform var(--dur) var(--ease),
      background-color var(--dur),
      color var(--dur),
      border-color var(--dur);
  }

  /* ---------- No hover-only behaviour (hover sticks after a tap) ---------- */
  .hero:hover :is(.slide-img, .hero-progress i) {
    animation-play-state: running;
  }

  .hero:has(:focus-visible) :is(.slide-img, .hero-progress i) {
    animation-play-state: paused;
  }

  .location__map iframe {
    filter: none;
  }

  .btn:hover,
  .act:hover,
  .partner:hover,
  .gallery figure:hover img,
  .svc-card:hover {
    transform: none;
  }

  .svc-card:hover {
    box-shadow: none;
  }

  .btn--red:hover {
    background: var(--red);
    box-shadow: none;
  }

  .btn--dark:hover {
    background: var(--carbon);
  }

  .btn--ghost:hover {
    border-color: color-mix(in srgb, var(--white) 40%, transparent);
    background: color-mix(in srgb, var(--carbon) 30%, transparent);
  }

  .btn--line:hover,
  .ico:hover {
    border-color: var(--line);
  }

  .ico--call:hover {
    border-color: var(--red);
    background: var(--red);
  }

  .ico--wa:hover {
    border-color: color-mix(in srgb, var(--whatsapp) 35%, transparent);
    background: color-mix(in srgb, var(--whatsapp) 10%, var(--white));
    color: var(--whatsapp);
  }

  .ico--viber:hover {
    border-color: color-mix(in srgb, var(--viber) 35%, transparent);
    background: color-mix(in srgb, var(--viber) 10%, var(--white));
    color: var(--viber);
  }

  .partner:hover {
    border-color: transparent;
  }

  .call:hover {
    background: transparent;
  }

  .nav-svc__tabs label:hover {
    border-color: var(--line);
  }

  .nav-svc__tabs input:checked + label:hover {
    border-color: var(--carbon);
  }

  /* ---------- :active press feedback ---------- */
  .btn:active,
  .act:active {
    transform: scale(0.97);
  }

  .btn--red:active {
    background: color-mix(in srgb, var(--red) 86%, var(--carbon));
  }

  .btn--dark:active {
    background: color-mix(in srgb, var(--carbon) 80%, var(--red));
  }

  .btn--ghost:active {
    border-color: var(--white);
    background: color-mix(in srgb, var(--carbon) 45%, transparent);
  }

  .btn--line:active {
    border-color: var(--carbon);
  }

  .ico:active {
    transform: scale(0.92);
    border-color: var(--carbon);
  }

  .ico--call:active {
    border-color: var(--carbon);
    background: var(--carbon);
  }

  .ico--wa:active {
    border-color: var(--whatsapp);
    background: var(--whatsapp);
    color: var(--white);
  }

  .ico--viber:active {
    border-color: var(--viber);
    background: var(--viber);
    color: var(--white);
  }

  .call:active {
    background: var(--soft);
  }

  .partner:active {
    border-color: var(--red);
    transform: scale(0.98);
  }

  .nav-svc__tabs label:active {
    transform: scale(0.98);
    border-color: var(--carbon);
  }

  .hero-progress .bar:active::before {
    background: color-mix(in srgb, var(--white) 55%, transparent);
  }

  .loc__list a:active,
  .call__num:active,
  .agent__num a:active {
    color: var(--red);
  }

  .site-footer a:active,
  .crumbs a:active {
    color: var(--white);
  }
}

@media (max-width: 768px) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .btn:active,
  .act:active,
  .ico:active,
  .partner:active,
  .nav-svc__tabs label:active {
    transform: none;
  }
}