/* =====================================================================
   MEDIALAB — dizajn sustav (Apple stil: svijetlo, minimalistički, glass)
   ===================================================================== */

/* ---------- Inter (lokalno hostan, OFL licenca) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    /* Font: Inter (lokalno hostan, assets/fonts) */
    --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Apple paleta */
    --white: #ffffff;
    --alt: #f5f5f7;
    --ink: #1d1d1f;

    --text: #1d1d1f;
    --text-2: #6e6e73;
    --text-3: #86868b;
    --hairline: rgba(0, 0, 0, 0.12);

    /* Medialab plava (iz logotipa) */
    --blue: #0075d0;
    --blue-hover: #1a86dc;
    --link: #0075d0;

    --radius-xl: 0;
    --radius-lg: 0;
    --radius-md: 0;

    --nav-h: 48px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
    margin: 0;
    font-family: var(--font-text);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.022em;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 600; }
p, ul, ol { margin: 0; }
button { font: inherit; }
::selection { background: rgba(var(--blue-rgb),0.2); }

/* ---------- Tipografija (Apple mjerila) ---------- */
.headline-xl { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.06; letter-spacing: -0.015em; font-weight: 700; }
.headline    { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.005em; font-weight: 600; }
.headline-md { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.12; letter-spacing: 0; font-weight: 600; }
.headline-sm { font-size: 26px; line-height: 1.16; letter-spacing: 0.007em; font-weight: 600; }
.subhead     { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.3;  letter-spacing: 0.007em; font-weight: 400; }
.lead        { font-size: 19px; line-height: 1.42; letter-spacing: 0.011em; font-weight: 400; }
.eyebrow     { display: block; font-size: 15px; line-height: 1.2; font-weight: 600; color: var(--blue); margin-bottom: 14px; letter-spacing: 0.01em; }
.caption     { font-size: 12px; line-height: 1.33; letter-spacing: -0.01em; }
.small       { font-size: 14px; line-height: 1.43; letter-spacing: -0.016em; }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.center { text-align: center; }
.measure { max-width: 700px; margin-left: auto; margin-right: auto; }
.measure-sm { max-width: 600px; margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; } .mt-5 { margin-top: 64px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 40px; } .mb-5 { margin-bottom: 64px; }

@media (max-width: 734px) {
    .lead { font-size: 17px; }
    .headline-sm { font-size: 22px; }
}

/* ---------- Layout ---------- */
.wrap { max-width: 1024px; margin: 0 auto; padding: 0 22px; }
.wrap-wide { max-width: 1200px; margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 22px; }
.section { padding: 100px 0; }
.section-sm { padding: 64px 0; }
.section-header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-header .subhead, .section-header .lead { margin-top: 14px; color: var(--text-2); }

.bg-white { background: var(--white); }
.bg-alt { background: var(--alt); }
.hairline { height: 1px; background: var(--hairline); }

@media (max-width: 734px) { .section { padding: 72px 0; } .section-sm { padding: 48px 0; } }

/* ---------- Gumbi i linkovi ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: var(--font-text); font-size: 17px; line-height: 1.2; letter-spacing: -0.022em; font-weight: 400;
    padding: 12px 24px; border-radius: 0; border: 1px solid transparent;
    cursor: pointer; white-space: nowrap; text-decoration: none !important;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .3s ease;
}
.btn svg { width: 1em; height: 1em; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); }
.btn-secondary { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-secondary:hover { background: var(--blue); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: rgba(0,0,0,0.25); }
.btn-outline:hover { background: rgba(0,0,0,0.05); }
.btn-sm { font-size: 14px; padding: 8px 16px; }
.btn-lg { font-size: 17px; padding: 13px 28px; }

.link-more { display: inline-flex; align-items: center; gap: 2px; color: var(--link); font-weight: 400; white-space: nowrap; }
.link-more::after {
    content: ""; width: 0.42em; height: 0.42em; margin-left: 4px; margin-top: 1px;
    border-right: 1.6px solid currentColor; border-top: 1.6px solid currentColor;
    transform: rotate(45deg); transition: transform .25s ease;
}
.link-more:hover::after { transform: translateX(2px) rotate(45deg); }
.link-group { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; justify-content: center; }

/* =====================================================================
   GLOBALNA NAVIGACIJA (svijetla glass traka)
   ===================================================================== */
.gnav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
    height: var(--nav-h);
    background: rgba(245, 245, 247, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    color: var(--ink);
}
.gnav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(0, 0, 0, 0.1); }
.gnav-inner { max-width: 1024px; margin: 0 auto; padding: 0 22px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.gnav-logo { display: flex; align-items: center; height: 100%; flex: none; }
.gnav-logo img { height: 22px; width: auto; transition: opacity .25s; }
.gnav-logo:hover img { opacity: 0.75; }
.gnav-links { display: flex; align-items: center; justify-content: flex-end; gap: 34px; list-style: none; margin: 0 0 0 auto; padding: 0; height: 100%; }
.gnav-links > li { height: 100%; display: flex; align-items: center; }
.gnav-links a { font-size: 12px; letter-spacing: -0.01em; color: rgba(0, 0, 0, 0.8); text-decoration: none; transition: color .2s; }
.gnav-links a:hover, .gnav-links li.active > a { color: var(--blue); }

/* Padajući izbornik "Usluge" (glass panel) */
.has-menu { position: static; }
.gnav-flyout {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: rgba(250, 250, 252, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    padding: 40px 0 48px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s ease, transform .35s var(--ease), visibility .3s;
}
.has-menu:hover .gnav-flyout, .has-menu:focus-within .gnav-flyout { opacity: 1; visibility: visible; transform: translateY(0); }
.flyout-inner { max-width: 1024px; margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: 180px repeat(4, 1fr); gap: 32px; }
.flyout-head .caption { color: var(--text-3); margin-bottom: 10px; display: block; }
.flyout-head a { font-size: 21px; font-weight: 600; color: var(--ink) !important; letter-spacing: -0.01em; }
.flyout-head .link-more { font-size: 14px; color: var(--blue) !important; margin-top: 12px; font-weight: 400; display: inline-flex; }
.flyout-item { display: block; color: var(--ink) !important; padding: 8px 0; text-decoration: none !important; }
.flyout-item .ic { width: 38px; height: 38px; border-radius: 0; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: transform .3s var(--ease); }
.flyout-item .ic svg { width: 19px; height: 19px; }
.flyout-item:hover .ic { transform: scale(1.06); }
.flyout-item h4 { font-size: 15px !important; font-weight: 600; letter-spacing: -0.02em; }
.flyout-item p { font-size: 12px !important; color: var(--text-2); margin-top: 5px; line-height: 1.4; }

/* Hamburger (dvije linije -> X) */
.gnav-burger { display: none; position: relative; width: 24px; height: var(--nav-h); background: none; border: 0; cursor: pointer; padding: 0; flex: none; margin-left: auto; }
.gnav-burger span { position: absolute; left: 4px; width: 17px; height: 1.5px; background: var(--ink); border-radius: 0; transition: transform .35s var(--ease), top .35s var(--ease); }
.gnav-burger span:first-child { top: 20px; }
.gnav-burger span:last-child { top: 27px; }
body.menu-open .gnav-burger span:first-child { top: 23.5px; transform: rotate(45deg); }
body.menu-open .gnav-burger span:last-child { top: 23.5px; transform: rotate(-45deg); }

/* Mobilni izbornik (svijetli glass) */
.mobile-menu {
    position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0; z-index: 9998;
    background: rgba(250, 250, 252, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    padding: 16px 30px 48px; overflow-y: auto;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu > ul > li { opacity: 0; transform: translateY(-8px); transition: opacity .4s ease, transform .45s var(--ease); }
.mobile-menu.open > ul > li { opacity: 1; transform: none; }
.mobile-menu.open > ul > li:nth-child(1) { transition-delay: .04s; }
.mobile-menu.open > ul > li:nth-child(2) { transition-delay: .08s; }
.mobile-menu.open > ul > li:nth-child(3) { transition-delay: .12s; }
.mobile-menu.open > ul > li:nth-child(4) { transition-delay: .16s; }
.mobile-menu.open > ul > li:nth-child(5) { transition-delay: .2s; }
.mobile-menu.open > ul > li:nth-child(6) { transition-delay: .24s; }
.mobile-menu a { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); padding: 13px 0; border-bottom: 1px solid rgba(0,0,0,0.1); text-decoration: none; }
.mobile-menu a.current { color: var(--blue); }
.mobile-menu .sub { padding: 4px 0 8px 16px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.mobile-menu .sub a { font-size: 15px; font-weight: 400; color: var(--text-2); border: 0; padding: 8px 0; }
.mobile-menu .sub a.current { color: var(--blue); }
body.menu-open { overflow: hidden; }

@media (max-width: 1023px) {
    .gnav-links { display: none; }
    .gnav-burger { display: block; }
}

/* =====================================================================
   HERO (svijetli, minimalistički) i slika u okviru
   ===================================================================== */
.hero { padding: 140px 0 72px; text-align: center; }
.hero .subhead { margin-top: 18px; color: var(--text-2); }
.hero .link-group { margin-top: 30px; }
.hero-figure { margin: 64px auto 0; max-width: 1100px; padding: 0 22px; }
.hero-figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 0; }
.breadcrumb { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); margin-bottom: 18px; text-decoration: none; }
.breadcrumb:hover { color: var(--link); text-decoration: none; }
.breadcrumb::before { content: ""; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-right: 2px; }
@media (max-width: 734px) {
    .hero { padding: 100px 0 56px; }
    .hero-figure { margin-top: 40px; }
    .hero-figure img { aspect-ratio: 4 / 3; border-radius: 0; }
}

/* ---------- Lokalna navigacija (sticky glass) ---------- */
.localnav {
    position: sticky; top: var(--nav-h); z-index: 900; height: 48px;
    background: rgba(250, 250, 252, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.localnav-inner { max-width: 1024px; margin: 0 auto; padding: 0 22px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.localnav-title { font-size: 19px; font-weight: 600; letter-spacing: 0.011em; color: var(--ink); text-decoration: none !important; white-space: nowrap; }
.localnav-links { display: flex; align-items: center; gap: 24px; font-size: 12px; }
.localnav-links a { color: var(--ink); text-decoration: none; opacity: 0.8; transition: opacity .2s; }
.localnav-links a:hover { opacity: 1; }
.localnav-links a.current { opacity: 0.4; pointer-events: none; }
@media (max-width: 734px) { .localnav-links { display: none; } .localnav-inner { justify-content: center; } }

/* ---------- Brojke ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; text-align: center; }
.stat-num { font-family: var(--font-display); font-size: clamp(40px, 4.6vw, 56px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.stat-label { margin-top: 10px; color: var(--text-2); font-size: 15px; }
@media (max-width: 734px) { .stats { grid-template-columns: 1fr 1fr; } }

/* ---------- Logotipi klijenata ---------- */
.logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.logo-cell { height: 120px; display: flex; align-items: center; justify-content: center; padding: 24px; transition: transform .4s var(--ease); }
.logo-cell:hover { transform: translateY(-3px); }
.logo-cell img { max-height: 48px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 1023px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 734px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } .logo-cell { height: 100px; } }

/* ---------- Kartice ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; color: var(--text); border-radius: 0;
    box-shadow: 2px 4px 12px rgba(0,0,0,0.06);
    transition: transform .5s var(--ease), box-shadow .5s ease;
    text-decoration: none !important;
}
a.card:hover { transform: scale(1.012); box-shadow: 2px 4px 18px rgba(0,0,0,0.12); }
.card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--alt); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
a.card:hover .card-media img { transform: scale(1.04); }
.card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.card-title { font-size: 21px; line-height: 1.2; letter-spacing: 0.011em; font-weight: 600; }
.card-text { margin-top: 6px; color: var(--text-2); font-size: 15px; line-height: 1.47; }
.card-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.card-price { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.card-price small { font-size: 12px; color: var(--text-3); font-weight: 400; margin-left: 4px; }
.card-ext { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); background: rgba(255,255,255,0.75); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.6); opacity: 0; transform: translateY(-4px); transition: .3s var(--ease); }
.card-ext svg { width: 14px; height: 14px; }
a.card:hover .card-ext { opacity: 1; transform: none; }
@media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 734px) { .cards, .cards-2 { grid-template-columns: 1fr; } }

/* ---------- Pločice usluga / značajki ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.features-2 { grid-template-columns: repeat(2, 1fr); }
.feature { display: block; background: var(--alt); color: var(--text); border-radius: 0; padding: 34px 30px; text-decoration: none !important; transition: transform .5s var(--ease), background .3s; }
a.feature:hover { transform: translateY(-3px); background: #efeff2; }
.feature-icon { width: 44px; height: 44px; border-radius: 0; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.feature-icon svg { width: 22px; height: 22px; }
.feature h3, .feature h2 { font-size: 21px; line-height: 1.2; letter-spacing: 0.011em; font-weight: 600; }
.feature p { margin-top: 8px; color: var(--text-2); font-size: 15px; line-height: 1.47; }
.feature .link-more { margin-top: 16px; font-size: 15px; }
.features-2 .feature { padding: 40px 36px; }
.features-2 .feature h2 { font-size: 24px; }
.features-2 .feature p { font-size: 17px; }
@media (max-width: 1023px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 734px) { .features, .features-2 { grid-template-columns: 1fr; } .feature, .features-2 .feature { padding: 28px 24px; } }

.checks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; letter-spacing: -0.016em; }
.checks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 0; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; }
@media (max-width: 734px) { .checks { grid-template-columns: 1fr; } }

/* ---------- Proces ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { background: var(--alt); border-radius: 0; padding: 32px 28px; }
.step-num { font-family: var(--font-display); font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--blue); }
.step h3 { margin-top: 18px; font-size: 19px; letter-spacing: 0.011em; }
.step p { margin-top: 8px; color: var(--text-2); font-size: 15px; letter-spacing: -0.016em; }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 734px) { .steps { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: 19px; line-height: 1.24; letter-spacing: 0.011em; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
.faq-icon { position: relative; flex: none; width: 22px; height: 22px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 0; transition: transform .35s var(--ease); }
.faq-icon::before { width: 16px; height: 1.6px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 1.6px; height: 16px; transform: translate(-50%, -50%); }
.faq details[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq-icon::before { transform: translate(-50%, -50%) rotate(180deg); }
.faq details > p { padding: 0 48px 24px 0; color: var(--text-2); font-size: 17px; line-height: 1.5; animation: fadeIn .4s ease; }
@media (max-width: 734px) { .faq summary { font-size: 17px; padding: 18px 0; } .faq details > p { padding-right: 0; } }

/* ---------- Mesh pozadina + glass kartice (kontakt) ---------- */
.mesh { position: relative; background: var(--alt); overflow: hidden; isolation: isolate; }
.mesh::before {
    content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(38% 38% at 18% 28%, rgba(var(--blue-rgb),0.20), transparent 62%),
        radial-gradient(34% 34% at 82% 18%, rgba(var(--blue-l1-rgb),0.18), transparent 62%),
        radial-gradient(42% 42% at 62% 86%, rgba(var(--blue-d0-rgb),0.12), transparent 62%),
        radial-gradient(30% 30% at 12% 86%, rgba(var(--blue-l2-rgb),0.35), transparent 62%);
    filter: blur(60px);
    animation: meshFloat 20s ease-in-out infinite alternate;
}
.glass {
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 20px 60px rgba(var(--blue-d1-rgb),0.1);
}

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 20px; align-items: start; }
.contact-card { padding: 34px 32px; }
.contact-card h2 { font-size: 22px; letter-spacing: 0.009em; }
.contact-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 18px; }
.contact-list li { display: flex; align-items: flex-start; gap: 14px; }
.contact-list .ic { flex: none; width: 42px; height: 42px; border-radius: 0; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.contact-list .ic svg { width: 19px; height: 19px; }
.contact-list .caption { color: var(--text-3); display: block; margin-bottom: 2px; }
.contact-list strong { font-weight: 600; }
.contact-list a { color: var(--text); }
.contact-list a:hover { color: var(--blue); }
.contact-form { padding: 36px 34px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: block; }
.field + .field, .form-grid + .field { margin-top: 18px; }
.form-grid .field { margin-top: 0; }
.field label { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.016em; margin-bottom: 8px; }
.field label span { font-weight: 400; color: var(--text-3); }
.field input, .field textarea {
    width: 100%; font: inherit; font-size: 17px; letter-spacing: -0.022em; color: var(--text);
    padding: 12px 15px; border-radius: 0;
    border: 1px solid rgba(0,0,0,0.14); background: rgba(255,255,255,0.85);
    outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder, .field textarea::placeholder { color: #a1a1a6; }
.field input:focus, .field textarea:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(var(--blue-rgb),0.16); }
.field textarea { resize: vertical; min-height: 140px; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; letter-spacing: -0.016em; color: var(--text-2); margin-top: 18px; cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); cursor: pointer; }
.form-actions { margin-top: 22px; }
.form-status { display: none; margin-bottom: 20px; padding: 14px 18px; border-radius: 0; font-size: 15px; letter-spacing: -0.016em; }
.form-status.ok { display: block; background: rgba(52,199,89,0.14); color: #1b6b34; border: 1px solid rgba(52,199,89,0.4); }
.form-status.err { display: block; background: rgba(255,59,48,0.12); color: #b3261e; border: 1px solid rgba(255,59,48,0.4); }
.cf-turnstile { margin-top: 18px; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a { width: 36px; height: 36px; border-radius: 0; background: rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: background .25s, color .25s; }
.social a:hover { background: var(--blue); color: #fff; text-decoration: none; }
.social svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 1023px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 734px) { .form-grid { grid-template-columns: 1fr; } .contact-form { padding: 26px 20px; } .contact-card { padding: 26px 22px; } }

/* ---------- Proizvodi ---------- */
.product { display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; border-radius: 0; overflow: hidden; box-shadow: 2px 4px 12px rgba(0,0,0,0.06); }
.product + .product { margin-top: 24px; }
.product-media { background: var(--alt); padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.product-media img { width: 100%; border-radius: 0; box-shadow: 0 10px 30px rgba(0,0,0,0.1); cursor: zoom-in; transition: transform .6s var(--ease); }
.product-media img:hover { transform: scale(1.012); }
.product-body { padding: 40px 36px; display: flex; flex-direction: column; }
.product-body h2 { font-size: 28px; line-height: 1.14; letter-spacing: 0.007em; }
.product-body > p { margin-top: 12px; color: var(--text-2); flex: 1; }
.product-foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.product-price { font-family: var(--font-display); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.product-price small { font-family: var(--font-text); font-size: 12px; color: var(--text-3); font-weight: 400; margin-left: 6px; letter-spacing: 0; }
.product .eyebrow { font-size: 13px; margin-bottom: 10px; }
@media (max-width: 1023px) { .product { grid-template-columns: 1fr; } .product-body { padding: 30px 26px; } }

/* ---------- O nama ---------- */
.story { display: grid; grid-template-columns: 2fr 3fr; gap: 48px; align-items: start; }
.story-text p { color: var(--text-2); font-size: 19px; line-height: 1.45; letter-spacing: 0.006em; }
.story-text p + p { margin-top: 20px; }
@media (max-width: 1023px) { .story { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Pravne stranice ---------- */
.policy { font-size: 17px; }
.policy h2 { font-size: 26px; line-height: 1.16; letter-spacing: 0.007em; margin: 44px 0 12px; }
.policy p { color: var(--text-2); line-height: 1.55; margin-bottom: 14px; }
.policy ul { list-style: none; padding: 0; margin: 0 0 16px; color: var(--text-2); line-height: 1.55; }
.policy li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.policy li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 0; background: var(--blue); }
.policy a { color: var(--blue); }
.policy strong { color: var(--text); font-weight: 600; }
.policy em { font-style: normal; color: var(--text); }
.info-table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; }
.info-table td { padding: 13px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--text-2); line-height: 1.45; }
.info-table td:first-child { color: var(--text); font-weight: 600; width: 38%; padding-right: 20px; }
@media (max-width: 640px) { .info-table td:first-child { width: 44%; } }

/* =====================================================================
   FOOTER (svijetli, kao apple.com)
   ===================================================================== */
.footer { background: var(--alt); color: rgba(0,0,0,0.56); font-size: 12px; line-height: 1.5; letter-spacing: -0.01em; padding: 48px 0 28px; border-top: 1px solid rgba(0,0,0,0.06); }
.footer-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(0,0,0,0.16); }
.footer-logo img { height: 24px; width: auto; }
.footer-about { margin-top: 16px; max-width: 340px; }
.footer h4 { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.01em; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin: 8px 0; }
.footer a { color: rgba(0,0,0,0.6); text-decoration: none; }
.footer a:hover { color: var(--ink); text-decoration: underline; }
.footer .social a { color: var(--ink); }
.footer .social a:hover { color: #fff; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 18px; }
.footer-bottom nav { display: flex; gap: 22px; }
@media (max-width: 1023px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 734px) { .footer-top { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- Kolačići (svijetla glass kartica) ---------- */
.cookie {
    position: fixed; left: 20px; bottom: 20px; z-index: 10000;
    width: calc(100% - 40px); max-width: 400px; padding: 20px 22px;
    border-radius: 0; color: var(--ink);
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 16px 50px rgba(0,0,0,0.16);
    opacity: 0; visibility: hidden; transform: translateY(24px);
    transition: opacity .5s ease, transform .6s var(--ease), visibility .5s;
}
.cookie.show { opacity: 1; visibility: visible; transform: none; }
.cookie h4 { font-size: 15px; font-weight: 600; letter-spacing: -0.022em; }
.cookie p { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--text-2); letter-spacing: -0.01em; }
.cookie a { color: var(--blue); }
.cookie-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 10001; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(245,245,247,0.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 90vh; width: auto; height: auto; border-radius: 0; box-shadow: 0 30px 90px rgba(0,0,0,0.3); object-fit: contain; }
.lightbox-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 0; border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.8); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox-close svg { width: 20px; height: 20px; }

/* ---------- Animacije ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.reveal.active { opacity: 1; transform: none; }
.d1 { transition-delay: .07s; } .d2 { transition-delay: .14s; } .d3 { transition-delay: .21s; } .d4 { transition-delay: .28s; } .d5 { transition-delay: .35s; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes meshFloat { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(4%, -3%) rotate(6deg); } }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.22); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.38); }

@media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; opacity: 1; transform: none; }
    .mesh::before { animation: none; }
}

/* =====================================================================
   SLIDER (početna) i naslovni header sa slikom (podstranice)
   ===================================================================== */
.slider { position: relative; margin-top: var(--nav-h); height: clamp(520px, 74vh, 760px); overflow: hidden; background: #111; color: #fff; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; z-index: 1; }
.slide.active { opacity: 1; z-index: 2; }
.slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); transition: transform 8s ease-out; }
.slide.active .slide-bg { transform: scale(1); }
.slide-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.55) 100%); }
.slide-content { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 22px 40px; max-width: 860px; margin: 0 auto; }
.slide-content .headline-xl { color: #fff; }
.slide-content .subhead { margin-top: 16px; color: rgba(255,255,255,0.85); max-width: 640px; }
.slide-content .link-group { margin-top: 28px; }
.slide-content .link-more { color: #fff; }
.slider-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; }
.dot { width: 40px; height: 2px; background: rgba(255,255,255,0.32); cursor: pointer; overflow: hidden; border: 0; padding: 0; }
.dot-fill { display: block; height: 100%; width: 0; background: #fff; }
@media (max-width: 734px) { .slider { height: clamp(480px, 78vh, 640px); } .dot { width: 28px; } }

.page-hero-img { position: relative; margin-top: 0; min-height: clamp(360px, 48vh, 520px); display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; background: #111 center / cover no-repeat; overflow: hidden; }
.page-hero-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.52) 60%, rgba(0,0,0,0.66) 100%); }
.page-hero-img .inner { position: relative; z-index: 2; max-width: 820px; padding: 72px 22px 64px; }
.page-hero-img .headline-xl { color: #fff; }
.page-hero-img .subhead { margin-top: 16px; color: rgba(255,255,255,0.85); }
.page-hero-img .link-group { margin-top: 26px; }
.page-hero-img .link-more { color: #fff; }
.page-hero-img .breadcrumb { color: rgba(255,255,255,0.75); }
.page-hero-img .breadcrumb:hover { color: #fff; }
.page-hero-img .eyebrow { color: #fff; opacity: 0.85; }
.page-hero-img.left { text-align: left; justify-content: flex-start; min-height: 300px; }
.page-hero-img.left .inner { max-width: 760px; margin: 0 auto; width: 100%; padding: 56px 22px 48px; }
.page-hero-img.left .subhead { font-size: 17px; line-height: 1.5; }
.page-hero-img.top { margin-top: var(--nav-h); }
.localnav { margin-top: var(--nav-h); }
.localnav + main > .page-hero-img.top { margin-top: 0; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #e8e8ed; }
@media (max-width: 734px) { .page-hero-img { min-height: 320px; } .page-hero-img .inner { padding: 56px 22px 48px; } }

/* ---------- Zavjesa ispod padajućeg izbornika (blur kao na apple.com) ---------- */
.gnav-curtain { position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0; z-index: 9990; background: rgba(0, 0, 0, 0.32); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; pointer-events: none; }
body.flyout-open .gnav-curtain { opacity: 1; visibility: visible; }

/* ---------- Strelice slidera ---------- */
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.45); background: rgba(0,0,0,0.18); color: #fff; cursor: pointer; padding: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s, border-color .25s; }
.slider-arrow:hover { background: rgba(255,255,255,0.18); border-color: #fff; }
.slider-arrow svg { width: 20px; height: 20px; }
.slider-prev { left: 28px; }
.slider-next { right: 28px; }
@media (max-width: 734px) { .slider-arrow { width: 40px; height: 40px; } .slider-prev { left: 12px; } .slider-next { right: 12px; } }

/* ---------- Obrubni gumb na tamnoj podlozi ---------- */
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.8); }
.btn-outline-white:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- Pokretni logotipi (reference) ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee + .marquee { margin-top: 12px; }
.marquee-track { display: flex; width: max-content; will-change: transform; animation: marquee 44s linear infinite; }
.marquee-rev .marquee-track { animation-direction: reverse; animation-duration: 50s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { flex: none; width: 230px; height: 100px; display: flex; align-items: center; justify-content: center; padding: 0 28px; }
.marquee-item img { max-height: 46px; max-width: 160px; width: auto; height: auto; object-fit: contain; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Povratak na vrh ---------- */
.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 9000; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.85); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(0,0,0,0.12); color: var(--ink); cursor: pointer; padding: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.12); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .4s var(--ease), visibility .3s, background .25s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.to-top svg { width: 18px; height: 18px; }
@media (max-width: 734px) { .to-top { right: 14px; bottom: 14px; width: 40px; height: 40px; } .cookie { bottom: 68px; } }

/* ---------- Headeri podstranica: lijevo poravnanje, manji naslov ---------- */
.page-hero-img { justify-content: flex-start; text-align: left; min-height: clamp(320px, 42vh, 460px); }
.page-hero-img .inner { max-width: 1024px; width: 100%; margin: 0 auto; padding: 64px 22px 56px; }
.page-hero-img .headline-xl, .page-hero-img .headline { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.01em; font-weight: 600; }
.page-hero-img .subhead { font-size: 17px; line-height: 1.5; letter-spacing: -0.01em; max-width: 620px; margin: 14px 0 0; }
.page-hero-img .link-group { justify-content: flex-start; margin-top: 24px; }
.page-hero-img .breadcrumb { margin-bottom: 14px; }
@media (max-width: 734px) { .page-hero-img { min-height: 280px; } .page-hero-img .inner { padding: 48px 22px 44px; } }

/* ---------- Slider: ista veličina naslova kao headeri podstranica ---------- */
.slide-content .headline-xl { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.01em; font-weight: 600; }
.slide-content .subhead { font-size: 17px; line-height: 1.5; letter-spacing: -0.01em; max-width: 620px; margin-top: 14px; }
.slide-content .link-group { margin-top: 24px; }
.slider { height: clamp(460px, 62vh, 640px); }
@media (max-width: 734px) { .slider { height: clamp(420px, 70vh, 560px); } }

/* ---------- Slider: veća visina ---------- */
.slider { height: clamp(560px, 78vh, 800px); }
@media (max-width: 734px) { .slider { height: clamp(480px, 78vh, 640px); } }

/* ---------- Slike (picture/img) u slideru i headerima ---------- */
.slide-bg img, .page-hero-img > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-img > picture { position: absolute; inset: 0; z-index: 0; }
.page-hero-img::before { z-index: 1; }
.slide-bg { background: #111; }

/* ---------- Kolačići: donji desni kut (back-to-top se sakrije dok je obavijest otvorena) ---------- */
.cookie { left: auto; right: 22px; bottom: 22px; }
.cookie.show ~ .to-top { opacity: 0; visibility: hidden; }
@media (max-width: 734px) { .cookie { right: 14px; bottom: 14px; width: calc(100% - 28px); } }

/* ---------- Navigacija: malo veći logotip i slova ---------- */
:root { --nav-h: 52px; }
.gnav-logo img { height: 26px; }
.gnav-links a { font-size: 13px; }
.gnav-links { gap: 32px; }
.gnav-burger span:first-child { top: 22px; }
.gnav-burger span:last-child { top: 29px; }
body.menu-open .gnav-burger span { top: 25.5px; }

/* ---------- Navigacija: još malo veći logotip i slova ---------- */
:root { --nav-h: 56px; }
.gnav-logo img { height: 30px; }
.gnav-links a { font-size: 14px; }
.gnav-links { gap: 30px; }
.gnav-burger span:first-child { top: 24px; }
.gnav-burger span:last-child { top: 31px; }
body.menu-open .gnav-burger span { top: 27.5px; }

/* ---------- Footer: pravne poveznice i mapa weba ---------- */
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: flex-end; }
@media (max-width: 734px) { .footer-bottom { flex-direction: column; align-items: flex-start; } .footer-legal { justify-content: flex-start; } }
.sitemap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.sitemap h2 { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.sitemap ul { list-style: none; padding: 0; margin: 0; }
.sitemap li { margin: 8px 0; font-size: 15px; }
.sitemap a { color: var(--text-2); }
.sitemap a:hover { color: var(--blue); }
@media (max-width: 734px) { .sitemap { grid-template-columns: 1fr; } }

/* ---------- Mobilno: bez strelica na slideru (listanje prstom), veći logotip ---------- */
@media (max-width: 734px) {
    .slider-arrow { display: none; }
    .gnav-logo img { height: 34px; }
}

/* ---------- O nama: tekst od ruba do ruba ---------- */
.story-full { grid-template-columns: 1fr; gap: 0; }

/* ---------- Pravne stranice i mapa weba: puna širina sadržaja ---------- */
.page-hero-img.left .inner { max-width: 1024px; }
.policy p, .policy ul { max-width: none; }

/* ---------- Pločice na sivoj podlozi postaju bijele ---------- */
.bg-alt .feature { background: #fff; box-shadow: 2px 4px 12px rgba(0,0,0,0.05); }
.bg-alt a.feature:hover { background: #fff; box-shadow: 2px 6px 18px rgba(0,0,0,0.09); }
.bg-alt .step { background: #fff; }

/* ---------- Tri brojke i četiri izdvojena projekta ---------- */
.stats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 734px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 16px 8px; } .stat-num { font-size: 34px; } .stat-label { font-size: 13px; } }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 734px) { .cards-4 { grid-template-columns: 1fr; } }
.story-text h2 { color: var(--text); }

/* =====================================================================
   JEDINSTVENA TIPOGRAFSKA SKALA
   48 naslovi | 24 podnaslovi | 21 naslovi kartica | 17 tekst | 15 sporedno | 12 sitno
   ===================================================================== */
.headline-xl, .headline, .headline-md, .slide-content .headline-xl, .page-hero-img .headline-xl, .page-hero-img .headline { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.01em; font-weight: 600; }
.subhead, .lead, .story-text p, .section-header .subhead, .section-header .lead, .slide-content .subhead, .page-hero-img .subhead, .page-hero-img.left .subhead { font-size: 17px; line-height: 1.55; letter-spacing: -0.01em; }
.product-body h2, .contact-card h2, .policy h2, .headline-sm { font-size: 24px; line-height: 1.2; letter-spacing: 0; }
.card-title, .feature h3, .feature h2, .features-2 .feature h2, .step h3, .faq summary, .sitemap h2, .flyout-head a { font-size: 21px; line-height: 1.25; }
.card-text, .feature p, .features-2 .feature p, .step p, .stat-label, .checks li, .mobile-menu .sub a { font-size: 15px; }
.faq details > p, .policy, .policy p, .policy ul, .info-table td, .field input, .field textarea, .btn, .contact-list, .mobile-menu a { font-size: 17px; }
.btn-sm { font-size: 15px; }
.cookie p, .caption, .footer, .gnav-flyout .flyout-item p, .small { font-size: 12px; }
.eyebrow { font-size: 15px; }
@media (max-width: 734px) { .faq summary { font-size: 19px; } .product-body h2, .contact-card h2, .policy h2 { font-size: 22px; } }
.card-price, .localnav-title { font-size: 21px; }

/* ---------- Jedinstvena širina sadržaja: sve sekcije poravnate s navigacijom (1024 px) ---------- */
.wrap-wide { max-width: 1024px; }

/* ---------- Footer: malo veći font ---------- */
.footer { font-size: 13px; }
.footer h4 { font-size: 13px; }
.footer-about { max-width: 360px; }

/* ---------- Mobilno: veće površine za dodir na tekstualnim poveznicama ---------- */
@media (max-width: 734px) {
    .breadcrumb, .feature .link-more, .card-foot .link-more { padding: 6px 0; }
    .sitemap li { margin: 12px 0; }
    .footer li { margin: 10px 0; }
}

/* ---------- Reference: slike bez obrezivanja (izvorni omjer 1966:1228), pet kartica na početnoj, "Učitaj više" ---------- */
.card-media { aspect-ratio: 1966 / 1228; }
.card-media img { object-fit: contain; }
.cards-5 { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cards-5 .card-body { padding: 16px 16px 18px; }
.cards-5 .card-title { font-size: 17px; }
.cards-5 .card-text { font-size: 14px; margin-top: 4px; }
@media (max-width: 1023px) { .cards-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 734px) { .cards-5 { grid-template-columns: 1fr; } }
.card.ref-more { animation: fadeIn .5s ease; }
.card[hidden] { display: none; }

/* ---------- Pokretni logotipi: širi razmak, sporije, samo jedno ponavljanje ---------- */
.marquee-item { width: 270px; }
.marquee-track { animation-duration: 36s; }
.marquee-rev .marquee-track { animation-duration: 40s; }
@media (max-width: 734px) { .marquee-item { width: 200px; } }

/* =====================================================================
   BOJE: crna glass navigacija, tamnoplavi footer, plavi naglasci
   ===================================================================== */
:root { --navy: #0a1428; --navy-2: #0c2a5a; --navy-3: #0e3a7a; }

/* --- navigacija: black glass --- */
.gnav { background: rgba(8, 8, 10, 0.78); color: #f5f5f7; }
.gnav::after { background: rgba(255, 255, 255, 0.1); }
.gnav-links a { color: rgba(255, 255, 255, 0.82); }
.gnav-links a:hover, .gnav-links li.active > a { color: rgb(var(--blue-l1-rgb)); }
.gnav-burger span { background: #f5f5f7; }

/* --- padajući izbornik: tamni glass --- */
.gnav-flyout { background: rgba(14, 14, 17, 0.92); border-bottom-color: rgba(255,255,255,0.1); box-shadow: 0 30px 60px rgba(0,0,0,0.45); }
.flyout-head .caption { color: #86868b; }
.flyout-head a { color: #f5f5f7 !important; }
.flyout-head .link-more { color: rgb(var(--blue-l1-rgb)) !important; }
.flyout-item { color: #f5f5f7 !important; }
.flyout-item h4 { color: #f5f5f7; }
.flyout-item p { color: #a1a1a6; }
.gnav-curtain { background: rgba(0, 0, 0, 0.45); }

/* --- mobilni izbornik: tamni --- */
.mobile-menu { background: rgba(12, 12, 14, 0.96); }
.mobile-menu a { color: #f5f5f7; border-bottom-color: rgba(255,255,255,0.12); }
.mobile-menu a.current, .mobile-menu .sub a.current { color: rgb(var(--blue-l1-rgb)); }
.mobile-menu .sub { border-bottom-color: rgba(255,255,255,0.12); }
.mobile-menu .sub a { color: #a1a1a6; }

/* --- footer: tamnoplavi gradijent --- */
.footer { background: linear-gradient(100deg, #050810 0%, var(--navy) 45%, var(--navy-2) 80%, var(--navy-3) 100%); color: rgba(255,255,255,0.72); border-top: 0; }
.footer-top { border-bottom-color: rgba(255,255,255,0.14); }
.footer h4 { color: #fff; }
.footer a { color: rgba(255,255,255,0.72); }
.footer a:hover { color: #fff; }
.footer .social a { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); color: #fff; }
.footer .social a:hover { background: var(--blue); border-color: var(--blue); }
.footer-logo img { height: 28px; }

/* --- headeri i slider: tamnoplavi ton preko fotografije --- */
.page-hero-img::before { background: linear-gradient(100deg, rgba(5,8,16,0.82) 0%, rgba(10,20,40,0.6) 55%, rgba(14,58,122,0.45) 100%); }
.slide-bg::after { background: linear-gradient(100deg, rgba(5,8,16,0.72) 0%, rgba(10,20,40,0.45) 55%, rgba(14,58,122,0.4) 100%); }

/* --- brojke: plava traka --- */
.stats-band { background: linear-gradient(100deg, var(--navy-2) 0%, var(--blue) 100%); color: #fff; }
.stats-band .stat-num { color: #fff; }
.stats-band .stat-label { color: rgba(255,255,255,0.75); }

/* --- sitni plavi naglasci --- */
.feature { border-top: 3px solid transparent; }
a.feature:hover { border-top-color: var(--blue); }
.faq-icon { color: var(--blue); }
.step { border-top: 3px solid var(--blue); }
.to-top { background: var(--blue); color: #fff; border-color: var(--blue); }
.to-top:hover { background: var(--navy-2); border-color: var(--navy-2); }
.card-price, .product-price { color: var(--blue); }
.localnav { background: rgba(255, 255, 255, 0.82); }

/* ---------- Navigacija uvijek crna; podnavigacija usluga crna s bijelim naslovom i sivim linkovima ---------- */
.gnav { background: rgba(0, 0, 0, 0.94); }
.gnav-flyout { background: rgba(0, 0, 0, 0.94); }
.localnav { background: rgba(0, 0, 0, 0.94); border-bottom: 1px solid rgba(255,255,255,0.1); color: #fff; }
.localnav-title { color: #fff; }
.localnav-links a { color: rgba(255,255,255,0.65); opacity: 1; }
.localnav-links a:hover { color: #fff; }
.localnav-links a.current { color: rgba(255,255,255,0.35); opacity: 1; }

/* ---------- Black glass: tamna prozirna traka s blurom (ne puna crna) ---------- */
.gnav, .gnav-flyout, .localnav { background: rgba(0, 0, 0, 0.82); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); }

/* ---------- Black glass: tamnije, da na vrhu stranice izgleda kao pri skrolanju ---------- */
.gnav, .gnav-flyout, .localnav { background: rgba(6, 6, 8, 0.9); }

/* ---------- Plavi sjaj iza kartica referenci i proizvoda na prijelaz mišem ---------- */
a.card, .product { transition: transform .5s var(--ease), box-shadow .5s ease; }
a.card:hover, .product:hover { box-shadow: 0 0 0 1px rgba(var(--blue-rgb),0.35), 0 22px 60px -12px rgba(var(--blue-rgb),0.55), 0 0 40px -6px rgba(var(--blue-rgb),0.35); }
.product:hover { transform: translateY(-3px); }

/* =====================================================================
   VIZUALNI IDENTITET: bijela, crna, plava (bez tamnoplavih gradijenata)
   ===================================================================== */
/* brojke: crna traka s mekim plavim sjajem iza brojki */
.stats-band { position: relative; overflow: hidden; background: #0a0a0c; color: #fff; border-top: 3px solid var(--blue); }
.stats-band::before { content: ""; position: absolute; inset: -40% 20%; background: radial-gradient(50% 60% at 50% 50%, rgba(var(--blue-rgb),0.45), transparent 70%); pointer-events: none; }
.stats-band .wrap { position: relative; }
.stats-band .stat-num { color: #fff; }
.stats-band .stat-num::after { content: ""; display: block; width: 28px; height: 3px; background: var(--blue); margin: 14px auto 0; }
.stats-band .stat-label { color: rgba(255,255,255,0.7); margin-top: 12px; }

/* footer: crni s plavom linijom na vrhu */
.footer { background: #0a0a0c; color: rgba(255,255,255,0.7); border-top: 3px solid var(--blue); }
.footer-top { border-bottom-color: rgba(255,255,255,0.12); }
.footer a:hover { color: rgb(var(--blue-l1-rgb)); }
.footer .social a { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }

/* headeri i slider: neutralno tamni ton (bez plave) */
.page-hero-img::before { background: linear-gradient(100deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.45) 100%); }
.slide-bg::after { background: linear-gradient(100deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.4) 100%); }
.to-top:hover { background: #0a0a0c; border-color: #0a0a0c; }

/* ---------- Navigacija: puna crna na vrhu stranice, black glass pri skrolanju; mobilni izbornik black glass ---------- */
.gnav { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .35s ease; }
body.scrolled .gnav { background: rgba(6, 6, 8, 0.82); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); }
.mobile-menu { background: rgba(6, 6, 8, 0.82); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }

/* ---------- Siva podloga sekcija: malo tamnija ---------- */
:root { --alt: #eef0f3; }
.bg-alt { background: var(--alt); }
.feature { background: var(--alt); }
.step { background: var(--alt); }
.card-media { background: var(--alt); }
.product-media { background: var(--alt); }
.bg-alt .feature, .bg-alt .step { background: #fff; }

/* ---------- Siva podloga: još tamnija ---------- */
:root { --alt: #e6e9ee; }
.bg-alt, .feature, .step, .card-media, .product-media { background: #e6e9ee; }
.bg-alt .feature, .bg-alt .step { background: #fff; }
.logo-cell { background: transparent; }

/* ---------- Kartice referenci i proizvoda: na prijelaz mišem tekstualni dio postaje plav ---------- */
a.card .card-body { transition: background-color .35s ease; }
a.card .card-title, a.card .card-text, a.card .card-price, a.card .card-price small, a.card .link-more { transition: color .35s ease; }
a.card:hover { transform: translateY(-4px); }
a.card:hover .card-body { background: var(--blue); }
a.card:hover .card-title, a.card:hover .card-price, a.card:hover .link-more { color: #fff; }
a.card:hover .card-text, a.card:hover .card-price small { color: rgba(255,255,255,0.85); }
a.card:hover .card-ext { background: #fff; color: var(--blue); border-color: #fff; }
a.card:hover .card-media img { transform: scale(1.03); }

/* ---------- Padajući izbornik: otvara se samo prelaskom preko "Usluge", ne vraća se dok se zatvara ---------- */
.has-menu:hover .gnav-flyout { opacity: 0; visibility: hidden; transform: translateY(-8px); }
.has-menu.open .gnav-flyout, .has-menu:focus-within .gnav-flyout { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- Slider: sadržaj poravnat lijevo, kao headeri podstranica ---------- */
.slide-content { align-items: flex-start; text-align: left; max-width: 1024px; padding: 0 22px 40px; }
.slide-content .subhead { margin-left: 0; margin-right: 0; }
.slide-content .link-group { justify-content: flex-start; }
@media (max-width: 734px) { .slide-content { padding: 0 22px 56px; } }

/* ---------- Header Referenci: fotografija sadrži tekst pa je tamniji ton radi čitljivosti naslova ---------- */
.page-hero-img.dim-more::before { background: linear-gradient(100deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0.5) 100%); }

/* ---------- Slider na mobitelu preko cijelog ekrana ---------- */
@media (max-width: 734px) { .slider { height: calc(100svh - var(--nav-h)); min-height: 480px; } }

/* ---------- Početna: 10 logotipa statično, 2 reda po 5, bez efekata; na mobitelu 2 stupca ---------- */
.logo-grid-static .logo-cell, .logo-grid-static .logo-cell:hover { transform: none; background: transparent; transition: none; }
.logo-grid-static { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1023px) { .logo-grid-static { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 734px) { .logo-grid-static { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Mreža logotipa: bez probijanja izvan ekrana na mobitelu ---------- */
.logo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1023px) { .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 734px) { .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .logo-cell { padding: 16px; } }
.logo-cell { min-width: 0; overflow: hidden; }
.logo-cell img { max-width: 100%; }

/* ---------- Slider preko cijelog ekrana na svim uređajima ---------- */
.slider { height: calc(100svh - var(--nav-h)); min-height: 520px; }
@media (max-width: 734px) { .slider { min-height: 480px; } }

/* =====================================================================
   CRNE KARTICE: usluge, koraci, reference, proizvodi (bijeli naslovi, sivi tekst, plavi naglasci)
   ===================================================================== */
:root { --card-black: #0a0a0c; --on-black-text: #a1a1a6; --on-black-link: #2997ff; }

/* pločice usluga i koraci */
.feature, .bg-alt .feature, .step, .bg-alt .step { background: var(--card-black); color: #fff; box-shadow: none; border-top: 3px solid var(--card-black); }
.feature h2, .feature h3, .step h3 { color: #fff; }
.feature p, .step p { color: var(--on-black-text); }
.feature .link-more { color: var(--on-black-link); }
.step-num { color: var(--blue); }
.feature .checks li { color: #f5f5f7; }
a.feature:hover, .bg-alt a.feature:hover { background: var(--card-black); border-top-color: var(--blue); box-shadow: 0 0 0 1px rgba(var(--blue-rgb),0.35), 0 22px 60px -12px rgba(var(--blue-rgb),0.55), 0 0 40px -6px rgba(var(--blue-rgb),0.35); }

/* kartice referenci i proizvoda */
.card, .bg-alt .card { background: var(--card-black); color: #fff; box-shadow: none; }
.card-media { background: #111114; }
.card-title { color: #fff; }
.card-text { color: var(--on-black-text); }
.card-price { color: var(--on-black-link); }
.card-price small { color: #86868b; }
.card .link-more { color: var(--on-black-link); }
.card-ext { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.2); }
a.card:hover .card-text { color: rgba(255,255,255,0.88); }

/* proizvodi (stranica Proizvodi) */
.product { background: var(--card-black); color: #fff; box-shadow: none; }
.product-media { background: #111114; }
.product-body h2 { color: #fff; }
.product-body > p { color: var(--on-black-text); }
.product-foot { border-top-color: rgba(255,255,255,0.12); }
.product-price { color: var(--on-black-link); }
.product-price small { color: #86868b; }
.product .eyebrow { color: var(--on-black-link); }
.product .btn-secondary { color: var(--on-black-link); border-color: var(--on-black-link); }
.product .btn-secondary:hover { background: var(--on-black-link); color: #000; }
.product-body { transition: background-color .35s ease; }
.product-body h2, .product-body > p, .product-price, .product-price small, .product .eyebrow { transition: color .35s ease; }
.product:hover .product-body { background: var(--blue); }
.product:hover .product-body h2, .product:hover .product-price, .product:hover .product .eyebrow, .product:hover .product-body .eyebrow { color: #fff; }
.product:hover .product-body > p, .product:hover .product-price small { color: rgba(255,255,255,0.88); }
.product:hover .btn-primary { background: #fff; color: var(--blue); }

/* =====================================================================
   POČETNA: usluge kao velike kartice s fotografijom na prijelaz mišem
   ===================================================================== */
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.svc-card { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; padding: 36px; background: var(--card-black); color: #fff; text-decoration: none !important; transition: transform .5s var(--ease), box-shadow .5s ease; }
.svc-card > picture { position: absolute; inset: 0; z-index: 0; opacity: 0; transform: scale(1.06); transition: opacity .6s ease, transform 1.2s var(--ease); }
.svc-card > picture img { width: 100%; height: 100%; object-fit: cover; }
.svc-card > picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,0.3) 0%, rgba(10,10,12,0.85) 70%, rgba(10,10,12,0.95) 100%); }
.svc-card:hover > picture { opacity: 1; transform: scale(1); }
.svc-num { position: absolute; top: 24px; right: 30px; z-index: 1; font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: rgba(255,255,255,0.08); transition: color .4s; }
.svc-card:hover .svc-num { color: rgba(var(--accent-rgb),0.35); }
.svc-body { position: relative; z-index: 1; }
.svc-body .feature-icon { margin-bottom: 22px; box-shadow: 0 8px 24px rgba(var(--blue-rgb),0.35); }
.svc-body h2 { font-size: 24px; line-height: 1.2; color: #fff; }
.svc-body p { margin-top: 10px; color: var(--on-black-text); font-size: 15px; max-width: 420px; }
.svc-body .link-more { display: inline-flex; margin-top: 18px; color: var(--on-black-link); font-size: 15px; }
.svc-bar { position: absolute; left: 0; bottom: 0; z-index: 1; height: 3px; width: 0; background: var(--blue); transition: width .6s var(--ease); }
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(var(--blue-rgb),0.35), 0 22px 60px -12px rgba(var(--blue-rgb),0.55), 0 0 40px -6px rgba(var(--blue-rgb),0.35); }
.svc-card:hover .svc-bar { width: 100%; }
@media (max-width: 1023px) { .svc-card { min-height: 300px; padding: 28px; } }
@media (max-width: 734px) {
    .svc-grid { grid-template-columns: 1fr; gap: 12px; }
    .svc-card { min-height: 260px; padding: 26px 22px; }
    .svc-card > picture { opacity: 1; transform: none; }
    .svc-bar { width: 100%; }
}

/* slider na mobitelu: puna visina vidljivog dijela ekrana (dinamički, uz trake preglednika) */
@media (max-width: 734px) { .slider { height: calc(100svh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); } }

/* ---------- Kolačići: black glass ---------- */
.cookie { background: rgba(6, 6, 8, 0.82); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); color: #fff; border: 1px solid rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 50px rgba(0,0,0,0.4); }
.cookie h4 { color: #fff; }
.cookie p { color: #a1a1a6; }
.cookie a { color: var(--on-black-link); }
.cookie .btn-outline { color: #fff; border-color: rgba(255,255,255,0.35); }
.cookie .btn-outline:hover { background: rgba(255,255,255,0.1); }

/* ---------- Usluge na početnoj: fotografija odmah vidljiva, na prijelaz mišem plavi ton i sjaj ---------- */
.svc-card > picture { opacity: 1; transform: none; }
.svc-card > picture::after { background: linear-gradient(180deg, rgba(10,10,12,0.35) 0%, rgba(10,10,12,0.82) 65%, rgba(10,10,12,0.95) 100%); transition: background .45s ease; }
.svc-card:hover > picture::after { background: linear-gradient(180deg, rgba(var(--blue-rgb),0.35) 0%, rgba(var(--blue-rgb),0.85) 65%, rgba(var(--blue-d0-rgb),0.95) 100%); }
.svc-card:hover .svc-body p { color: rgba(255,255,255,0.9); }
.svc-card:hover .svc-body .link-more { color: #fff; }
.svc-card:hover .svc-num { color: rgba(255,255,255,0.25); }
.svc-card:hover .svc-body .feature-icon { background: #fff; color: var(--blue); }

/* ---------- Siva podloga sekcija -> antracit (svijetli tekst na njoj) ---------- */
:root { --alt: #2b2b2f; }
.bg-alt { background: #2b2b2f; color: #fff; }
.bg-alt .headline, .bg-alt .headline-md, .bg-alt h2, .bg-alt h3 { color: #fff; }
.bg-alt .section-header .lead, .bg-alt .section-header .subhead, .bg-alt .lead, .bg-alt .text-2, .bg-alt .story-text p { color: #b8b8bd; }
.bg-alt .eyebrow { color: var(--on-black-link); }
.bg-alt .link-more { color: var(--on-black-link); }
.bg-alt .btn-secondary { color: var(--on-black-link); border-color: var(--on-black-link); }
.bg-alt .btn-secondary:hover { background: var(--on-black-link); color: #000; }
.bg-alt .hairline { background: rgba(255,255,255,0.12); }
.bg-alt .card, .bg-alt .product, .bg-alt .feature, .bg-alt .step, .bg-alt .svc-card { box-shadow: 0 10px 30px rgba(0,0,0,0.35); }

/* ---------- Siva podloga: natrag na svijetlo sivu, malo tamniju od originala ---------- */
:root { --alt: #eef0f3; }
.bg-alt { background: var(--alt); color: var(--text); }
.bg-alt .headline, .bg-alt .headline-md, .bg-alt h2, .bg-alt h3 { color: var(--text); }
.bg-alt .section-header .lead, .bg-alt .section-header .subhead, .bg-alt .lead, .bg-alt .text-2, .bg-alt .story-text p { color: var(--text-2); }
.bg-alt .eyebrow { color: var(--blue); }
.bg-alt .link-more { color: var(--blue); }
.bg-alt .btn-secondary { color: var(--blue); border-color: var(--blue); }
.bg-alt .btn-secondary:hover { background: var(--blue); color: #fff; }
.bg-alt .hairline { background: rgba(0,0,0,0.12); }
.bg-alt .card, .bg-alt .product, .bg-alt .feature, .bg-alt .step, .bg-alt .svc-card { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
/* crne kartice zadržavaju bijele naslove i na sivoj podlozi */
.bg-alt .feature h2, .bg-alt .feature h3, .bg-alt .step h3, .bg-alt .card-title, .bg-alt .product-body h2, .bg-alt .svc-body h2 { color: #fff; }
.bg-alt .feature p, .bg-alt .step p, .bg-alt .card-text, .bg-alt .product-body > p { color: var(--on-black-text); }
.bg-alt .feature .link-more, .bg-alt .card .link-more, .bg-alt .svc-body .link-more { color: var(--on-black-link); }

/* ---------- Stranica Usluge: velike kartice s fotografijom i popisom ---------- */
.svc-card-lg { min-height: 0; padding: 40px 36px; }
.svc-card-lg .svc-body p { max-width: none; }
.svc-card-lg .checks { margin-top: 20px; }
.svc-card-lg .checks li { color: #f5f5f7; }
.svc-card-lg .svc-body .link-more { margin-top: 22px; }
@media (max-width: 734px) { .svc-card-lg { padding: 28px 22px; } .svc-card-lg .checks { grid-template-columns: 1fr; } }
/* velike kartice usluga: tamniji ton jer tekst pokriva veći dio fotografije */
.svc-card-lg > picture::after { background: linear-gradient(180deg, rgba(10,10,12,0.6) 0%, rgba(10,10,12,0.86) 45%, rgba(10,10,12,0.95) 100%); }
.svc-card-lg:hover > picture::after { background: linear-gradient(180deg, rgba(var(--blue-rgb),0.55) 0%, rgba(var(--blue-rgb),0.85) 45%, rgba(var(--blue-d0-rgb),0.95) 100%); }

/* =====================================================================
   USLUGE: "bento" raspored, reflektor koji prati miš, rotirajući plavi rub, 3D nagib
   ===================================================================== */
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.svc-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-grid .svc-card:nth-child(4n+1), .svc-grid .svc-card:nth-child(4n+4) { grid-column: span 2; }
.svc-card { transform-style: preserve-3d; will-change: transform; transition: transform .25s ease, box-shadow .5s ease; }
.svc-card > picture img { transition: transform 1.4s var(--ease); }
.svc-card:hover > picture img { transform: scale(1.06); }
/* reflektor koji prati miš */
.svc-card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s ease;
    background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb),0.38), rgba(var(--accent-rgb),0.08) 45%, transparent 70%); }
.svc-card:hover::before { opacity: 1; }
/* rotirajući plavi rub */
.svc-card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; padding: 1.5px; opacity: 0; transition: opacity .4s ease;
    background: conic-gradient(from var(--angle), transparent 0deg, transparent 200deg, rgba(var(--accent-rgb),0.2) 250deg, var(--on-black-link) 300deg, #fff 320deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    animation: svc-spin 3s linear infinite; animation-play-state: paused; }
.svc-card:hover::after { opacity: 1; animation-play-state: running; }
@keyframes svc-spin { to { --angle: 360deg; } }
/* okrugla strelica dolje desno */
.svc-arrow { position: absolute; right: 28px; bottom: 28px; z-index: 2; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.35); color: #fff; border-radius: 50%; background: rgba(255,255,255,0.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .35s ease, border-color .35s ease, transform .5s var(--ease); }
.svc-arrow svg { width: 20px; height: 20px; transition: transform .5s var(--ease); }
.svc-card:hover .svc-arrow { background: var(--blue); border-color: var(--blue); transform: scale(1.08); }
.svc-card:hover .svc-arrow svg { transform: rotate(-45deg); }
.svc-body { padding-right: 70px; }
.svc-body h2 { font-size: 26px; }
/* hover: blaži plavi ton (reflektor radi glavni posao) */
.svc-card:hover > picture::after { background: linear-gradient(180deg, rgba(var(--blue-d1-rgb),0.45) 0%, rgba(var(--blue-d2-rgb),0.82) 65%, rgba(var(--blue-d3-rgb),0.95) 100%); }
.svc-card-lg:hover > picture::after { background: linear-gradient(180deg, rgba(var(--blue-d1-rgb),0.6) 0%, rgba(var(--blue-d2-rgb),0.86) 45%, rgba(var(--blue-d3-rgb),0.95) 100%); }
@media (max-width: 1023px) { .svc-grid { grid-template-columns: 1fr 1fr; } .svc-grid .svc-card:nth-child(4n+1), .svc-grid .svc-card:nth-child(4n+4) { grid-column: span 1; } }
@media (max-width: 734px) { .svc-grid { grid-template-columns: 1fr; } .svc-arrow { right: 20px; bottom: 20px; width: 40px; height: 40px; } .svc-body { padding-right: 56px; } }
@media (hover: none) { .svc-card::after, .svc-card::before { display: none; } }
/* stranica Usluge: kartice imaju puno sadržaja pa ostaju dva jednaka stupca (bento samo na početnoj) */
.svc-grid-lg { grid-template-columns: 1fr 1fr; }
.svc-grid-lg .svc-card:nth-child(4n+1), .svc-grid-lg .svc-card:nth-child(4n+4) { grid-column: span 1; }
@media (max-width: 734px) { .svc-grid-lg { grid-template-columns: 1fr; } }

/* =====================================================================
   ISTI EFEKT NA SVIM CRNIM KUTIJAMA: reflektor, rotirajući rub, 3D nagib
   (pločice usluga, koraci, kartice referenci i proizvoda, proizvodi)
   ===================================================================== */
.feature, .step, a.card, .product { position: relative; overflow: hidden; transform-style: preserve-3d; will-change: transform; transition: transform .25s ease, box-shadow .5s ease, background .3s, border-color .3s; }
.feature::before, .step::before, a.card::before, .product::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s ease;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb),0.34), rgba(var(--accent-rgb),0.07) 45%, transparent 70%); }
.feature:hover::before, .step:hover::before, a.card:hover::before, .product:hover::before { opacity: 1; }
.feature::after, .step::after, a.card::after, .product::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; padding: 1.5px; opacity: 0; transition: opacity .4s ease;
    background: conic-gradient(from var(--angle), transparent 0deg, transparent 200deg, rgba(var(--accent-rgb),0.2) 250deg, var(--on-black-link) 300deg, #fff 320deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    animation: svc-spin 3s linear infinite; animation-play-state: paused; }
.feature:hover::after, .step:hover::after, a.card:hover::after, .product:hover::after { opacity: 1; animation-play-state: running; }
/* sadržaj iznad reflektora */
.feature > *, .step > *, a.card > *, .product > * { position: relative; z-index: 2; }
.card-ext { z-index: 2; }
@media (hover: none) { .feature::before, .feature::after, .step::before, .step::after, a.card::before, a.card::after, .product::before, .product::after { display: none; } }
/* kartice pluginova: tri jednaka stupca (bez bento raspona), cijena i link jedno ispod drugog */
.svc-grid-3 .svc-card:nth-child(n) { grid-column: span 1; }
.svc-card-prod .card-price { display: block; }
.svc-card-prod .svc-body .link-more { display: inline-flex; width: fit-content; }

/* ---------- Reference: ikona natrag u gornji desni kut (bila je izgurana u tok sadržaja), tekstualni dio ostaje crn ---------- */
a.card > .card-ext { position: absolute; top: 14px; right: 14px; }
a.card:hover .card-body, .bg-alt a.card:hover .card-body { background: var(--card-black) !important; }
a.card:hover .card-title { color: #fff !important; }
a.card:hover .card-text { color: var(--on-black-text) !important; }

/* ---------- Reference: tekstualni dio proziran da se plavi reflektor vidi kroz njega ---------- */
a.card .card-body, a.card:hover .card-body, .bg-alt a.card:hover .card-body { background: transparent !important; }
a.card::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb),0.45), rgba(var(--accent-rgb),0.1) 45%, transparent 70%); }

/* ---------- Crna (#0a0a0c) zamijenjena s var(--card-black) na svim crnim površinama ---------- */
:root { --card-black: #16191a; }
.stats-band, .footer { background: var(--card-black); }
.svc-card, .feature, .bg-alt .feature, .step, .bg-alt .step, .card, .bg-alt .card, .product { background: var(--card-black); }
.card-media, .product-media { background: #1c2021; }
a.card:hover .card-body, .bg-alt a.card:hover .card-body { background: transparent !important; }
.svc-card > picture::after { background: linear-gradient(180deg, rgba(var(--dark-rgb),0.35) 0%, rgba(var(--dark-rgb),0.82) 65%, rgba(var(--dark-rgb),0.95) 100%); }
.svc-card-lg > picture::after { background: linear-gradient(180deg, rgba(var(--dark-rgb),0.6) 0%, rgba(var(--dark-rgb),0.86) 45%, rgba(var(--dark-rgb),0.95) 100%); }
.svc-card-prod > picture::after { background: linear-gradient(180deg, rgba(var(--dark-rgb),0.25) 0%, rgba(var(--dark-rgb),0.8) 55%, rgba(var(--dark-rgb),0.96) 100%); }
.to-top:hover { background: var(--card-black); border-color: var(--card-black); }

/* ---------- Izbornik, padajući panel, mobilni izbornik i kolačići u var(--card-black) ---------- */
.gnav { background: var(--card-black); }
body.scrolled .gnav, .gnav-flyout, .localnav, .mobile-menu, .cookie { background: rgba(var(--dark-rgb),0.86); }

/* ---------- Početna: 5 izdvojenih referenci u bento rasporedu (2 velike gore, 3 dolje) ---------- */
.ref-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.ref-bento .card:nth-child(1), .ref-bento .card:nth-child(2) { grid-column: span 3; }
.ref-bento .card:nth-child(n+3) { grid-column: span 2; }
@media (max-width: 1023px) { .ref-bento { grid-template-columns: 1fr 1fr; } .ref-bento .card:nth-child(n) { grid-column: span 1; } .ref-bento .card:nth-child(5) { grid-column: span 2; } }
@media (max-width: 734px) { .ref-bento { grid-template-columns: 1fr; } .ref-bento .card:nth-child(n) { grid-column: span 1; } }

/* ---------- Footer: Cjenik odvojen linijom ---------- */
.footer li.footer-sep { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.14); }

/* ---------- Custom rješenja: slika lijevo cijelom visinom, "Live preview" desno ispod teksta ---------- */
.product-media { padding: 0; }
.product-media img { border-radius: 0; box-shadow: none; width: 100%; height: 100%; object-fit: cover; }
.product-media picture { width: 100%; height: 100%; }
.product-body { padding: 40px 40px 36px; }
.product-foot { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); justify-content: flex-start; }
@media (max-width: 1023px) { .product-media img { height: auto; } .product-body { padding: 30px 26px; } }

/* ---------- Custom rješenja: Live preview vidljiv i na plavoj hover podlozi ---------- */
.product .btn-secondary { transition: color .35s ease, border-color .35s ease, background .25s ease; }
.product:hover .btn-secondary { color: #fff; border-color: #fff; background: transparent; }
.product:hover .btn-secondary:hover { background: #fff; color: var(--blue); }
.product:hover .product-foot { border-top-color: rgba(255,255,255,0.35); }

/* ---------- Slider: glavni gumb zelen; stavke glavnog izbornika malo deblje ---------- */
.slide-content .btn-white { background: var(--blue); color: #fff; border-color: transparent; }
.slide-content .btn-white:hover { background: var(--blue-hover); color: #fff; }
.gnav-links a { font-weight: 600; }


/* ---------- Headeri stranica usluga: glavni gumb zelen (kao na slideru) ---------- */
.hero-usluga .btn-white { background: var(--blue); color: #fff; border-color: transparent; }
.hero-usluga .btn-white:hover { background: var(--blue-hover); color: #fff; }

/* ---------- Čitljivost teksta na slideru i headerima: tamniji lijevi dio + blaga sjena teksta ---------- */
.slide-bg::after { background: linear-gradient(90deg, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.66) 38%, rgba(0,0,0,0.34) 70%, rgba(0,0,0,0.28) 100%); }
.page-hero-img::before { background: linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.68) 42%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0.34) 100%); }
.slide-content .headline-xl, .slide-content p, .page-hero-img .headline, .page-hero-img .headline-xl, .page-hero-img .subhead { text-shadow: 0 2px 16px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5); }
@media (max-width: 734px) {
    .slide-bg::after { background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.72) 55%, rgba(0,0,0,0.8) 100%); }
}

/* ---------- Bez zumiranja prstima (pinch / dvostruki dodir) ---------- */
html, body { touch-action: pan-x pan-y; }

/* ---------- Područje rada: popis gradova ---------- */
.areas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.areas li { padding: 9px 15px; border: 1px solid var(--hairline); background: #fff; font-size: 15px; line-height: 1.2; color: var(--text); }
.bg-alt .areas li { border-color: transparent; }

/* ---------- Pločice: 4 u jednom redu, 5 kao 2 veće + 3 ---------- */
.features-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.features-n4 .feature { padding: 30px 24px; }
.features-n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.features-n5 .feature { grid-column: span 2; }
.features-n5 .feature:nth-child(-n+2) { grid-column: span 3; }
@media (max-width: 1023px) {
    .features-n4, .features-n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .features-n5 .feature, .features-n5 .feature:nth-child(-n+2) { grid-column: span 1; }
    .features-n5 .feature:last-child { grid-column: span 2; }
}
@media (max-width: 734px) {
    .features-n4, .features-n5 { grid-template-columns: 1fr; }
    .features-n4 .feature { padding: 28px 24px; }
    .features-n5 .feature:last-child { grid-column: span 1; }
}

/* ---------- Pločice, automatski raspored: paran broj jednake jedna do druge, neparan prve dvije veće ---------- */
.features-auto { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.features-auto .feature { grid-column: span var(--span, 4); }
.features-auto .feature[style*="--span:3"] { padding: 30px 24px; }
@media (max-width: 1023px) {
    .features-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .features-auto .feature { grid-column: span 1; }
    .features-auto .feature:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 734px) {
    .features-auto { grid-template-columns: 1fr; }
    .features-auto .feature, .features-auto .feature:last-child:nth-child(odd) { grid-column: span 1; }
    .features-auto .feature[style*="--span:3"] { padding: 28px 24px; }
}

/* ---------- Izbornik: slova potpuno bijela (aktivna stavka i hover ostaju plavi) ---------- */
.gnav-links a { color: #fff; }
.gnav-links a:hover, .gnav-links li.active > a { color: rgb(var(--blue-l1-rgb)); }
.flyout-head a, .flyout-item, .flyout-item h4 { color: #fff !important; }
.flyout-head .link-more { color: rgb(var(--blue-l1-rgb)) !important; }
.mobile-menu a, .mobile-menu .sub a { color: #fff; }
.mobile-menu a.current, .mobile-menu .sub a.current { color: rgb(var(--blue-l1-rgb)); }
.gnav-burger span { background: #fff; }

/* ---------- Izbornik: srednja debljina slova (500, između običnog i polumasnog) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.gnav-links a { font-weight: 500; }

/* ---------- Boje kao varijable (zadane vrijednosti; mijenjaju se u Medialab → Postavke → Boje) ---------- */
:root { --blue: #0075d0; --blue-hover: #1a86dc; --link: var(--blue); --on-black-link: #2997ff; --card-black: #16191a; --alt: #eef0f3; --blue-rgb: 0,117,208; --accent-rgb: 41,151,255; --blue-l1-rgb: 77,163,232; --blue-l2-rgb: 170,210,255; --blue-d0-rgb: 0,90,170; --blue-d1-rgb: 0,60,140; --blue-d2-rgb: 0,50,120; --blue-d3-rgb: 0,40,100; --dark-rgb: 22,25,26; }