/* ========== DomiTech — Global Unified Styles ========== */

/* ---- Brand varijable (jedinstveni izvor istine) ---- */
:root {
    /* layout */
    --appbar-height-desktop: 72px;
    --appbar-height-mobile: 64px;
    --appbar-h: 90px; /* koristi se za visinu hero-sekcije */
    /* brand */
    --brand-1: #4f46e5; /* indigo-600 */
    --brand-2: #06b6d4; /* cyan-500 */
    --brand-3: #22c55e; /* green-500 */
    --brand-grad: linear-gradient(90deg, var(--brand-1) 0%, var(--brand-2) 50%, var(--brand-3) 100%);
    /* boje i staklo */
    --ink-1: #0b1020;
    --ink-2: #111827;
    --glass-bg: rgba(255,255,255,0.06);
    --glass-brd: rgba(255,255,255,0.14);
    --glass-brd-strong: rgba(255,255,255,0.24);
    /* sjene */
    --soft-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* ---- Global layout helperi ---- */
html {
    scroll-padding-top: var(--appbar-height-desktop);
}

@media (max-width: 960px) {
    html {
        scroll-padding-top: var(--appbar-height-mobile);
    }
}

.appbar-offset {
    padding-top: var(--appbar-height-desktop);
}

@media (max-width: 960px) {
    .appbar-offset {
        padding-top: var(--appbar-height-mobile);
    }
}

/* Sekcije i naslovi (koristiš iste klase na svim stranicama) */
.section {
    padding: 56px 0;
    scroll-margin-top: var(--appbar-height-desktop);
}

@media (max-width: 960px) {
    .section {
        scroll-margin-top: var(--appbar-height-mobile);
    }
}

.section-overline {
    letter-spacing: .16em;
    opacity: .9;
}

.brand-gradient-text {
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Suptilna podloga (svjetlosni “dim” + nježni borderi) */
.subtle-bg {
    background: radial-gradient(30% 40% at 10% 10%, rgba(79,70,229,0.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.accent-border {
    border: 1px solid var(--glass-brd-strong);
    outline: 1px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 8px 24px rgba(6,182,212,0.12);
}

.card-lift {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .card-lift:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 40px rgba(0,0,0,0.28);
        border-color: rgba(255,255,255,0.28);
    }

/* Podcrtani naslovi na karticama */
.card-title-underline {
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

    .card-title-underline::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 3px;
        width: 64px;
        background: var(--brand-grad);
        border-radius: 3px;
    }

/* Čiste liste (About — Tech stack / Integracije) */
.list-clean .mud-list-item {
    border-radius: 12px;
    padding: .5rem .7rem;
    transition: background .2s ease, transform .2s ease;
}

    .list-clean .mud-list-item:hover {
        background: rgba(255,255,255,.06);
        transform: translateX(2px);
    }

/* Chip cloud */
.chips-cloud .mud-chip {
    margin: .25rem .35rem .25rem 0;
    border-color: rgba(255,255,255,.28) !important;
    backdrop-filter: blur(4px);
    background: rgba(255,255,255,.05);
}

/* Metric kartice (KPI blokovi) */
.metric-card {
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
}

.metric {
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Logo grid (klijenti) */
.logo-grid .logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
}

.logo-grid .logo {
    max-height: 48px;
    max-width: 100%;
    opacity: .9;
}

@media (max-width: 960px) {
    .logo-grid .logo-box {
        height: 68px;
    }
}

/* ---- HERO zajednički (video / karta / slika) ---- */
.hero-section {
    position: relative;
    min-height: calc(100vh - var(--appbar-h));
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
}

.hero-bg-video, .hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* default overlay (video/karta) */
.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 100%);
    z-index: 1;
    transition: background .6s ease;
}

.hero-section:hover::after {
    background: linear-gradient(135deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 100%);
}

.hero-overlay {
    position: relative;
    z-index: 2;
}

    .hero-overlay h1 {
        font-weight: 800;
        letter-spacing: -0.5px;
        line-height: 1.2;
    }

/* Specifični About hero (tamna pozadina + orb + slika kao “tekstura”) */
.brand-bg {
    background: radial-gradient(60% 60% at 20% 10%, rgba(79,70,229,0.25) 0%, rgba(6,182,212,0.12) 35%, transparent 70%), radial-gradient(40% 40% at 85% 80%, rgba(34,197,94,0.18) 0%, transparent 60%), var(--ink-1);
}

    .brand-bg .hero-bg-image {
        opacity: .25;
    }
/* slika kao blaga tekstura */
.hero-overlay-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 960px;
    margin-left: clamp(16px, 6vw, 80px);
    margin-right: 16px;
}

.hero-sub {
    color: rgba(255,255,255,0.92);
}

.hero-orb {
    position: absolute;
    width: 520px;
    height: 520px;
    right: -160px;
    bottom: -120px;
    background: radial-gradient(circle at 30% 30%, rgba(6,182,212,0.65), rgba(79,70,229,0.35) 45%, transparent 60%);
    filter: blur(24px);
    opacity: .5;
    animation: orbFloat 10s ease-in-out infinite;
    z-index: 1;
}

@keyframes orbFloat {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-16px)
    }
}

/* Scroll indikator (isti svugdje) */
.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    animation: bob 1.8s infinite ease-in-out;
    z-index: 3;
    opacity: .85;
    color: #fff;
}

@keyframes bob {
    0%,100% {
        transform: translate(-50%,0)
    }

    50% {
        transform: translate(-50%,-6px)
    }
}

/* ---- Responsive tuning (≤960px) — objedinjeno za sve stranice ---- */
@media (max-width: 960px) {

    /* hero niži + jači overlay radi čitljivosti */
    .hero-section {
        min-height: 70vh;
    }

        .hero-section::after {
            background: linear-gradient(135deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 100%);
        }

    /* centriraj sadržaj i smanji margine */
    .hero-overlay {
        padding: 16px !important;
        text-align: center;
    }

        .hero-overlay .mud-stack:not(.hero-badges) {
            flex-wrap: wrap;
            gap: 10px !important;
            justify-content: center;
        }

            .hero-overlay .mud-stack:not(.hero-badges) .mud-button {
                flex: 1 1 100%;
            }

    /* naslov/podnaslov skale */
    .mud-typography-h2 {
        font-size: clamp(24px, 6vw, 34px);
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .brand-gradient-text {
        display: inline-block;
        word-break: break-word;
    }

    .mud-typography-subtitle1 {
        font-size: clamp(14px, 3.8vw, 16px);
        line-height: 1.35;
        opacity: .95;
    }

    

    /* About: hero minimalna visina */
    .brand-bg.hero-section {
        min-height: 60vh;
    }

    /* scroll hint malo niže na mobu */
    .scroll-hint {
        bottom: 10px;
    }
}

/* ========== Layout & Navigation (MainLayout) ========== */

/* ako već nemaš util klasu */
.cursor-pointer {
    cursor: pointer;
}

/* ✅ LOGO */
.brand-logo {
    height: 150px;
    width: 300px;
    object-fit: contain;
}

@media (max-width: 960px) {
    .brand-logo {
        height: 110px;
        width: 200px;
    }
}

/* ✅ Modern AppBar styling */
.modern-appbar {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid rgba(200, 200, 200, 0.3);
    padding: 10px 30px;
    min-height: var(--appbar-h);
    display: flex;
    align-items: center;
}

/* ostaje sticky iznad svega (iznad hero videa/karti/slike) */
.mud-appbar-sticky {
    position: sticky;
    top: 0;
    z-index: 1100;
}

/* Glavni sadržaj počinje ispod AppBara
   (Note: .appbar-offset / html scroll-padding već postoje globalno, ovo je za MainContent) */
.pt-appbar {
    padding-top: var(--appbar-h);
}

/* ✅ Desktop nav linkovi */
.nav-link-big {
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: color 0.3s ease, transform 0.2s ease;
}

    .nav-link-big:hover {
        color: #7e6fff;
        transform: translateY(-2px);
    }


/* 5) Flex utili */
.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-1 {
    flex: 1 1 auto;
}

.align-self-start {
    align-self: flex-start;
}

/* 6) Slika puni desni panel (cover) */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ili 'contain' ako želiš cijelu sliku bez rezanja */
    display: block;
}

.text-badge {
    background: rgba(0, 0, 0, 0.4);
    padding: .4rem .8rem;
    border-radius: 8px;
    display: inline-block;
    backdrop-filter: blur(6px);
}

.text-white {
    color: white;
}

/* Vertikalni layout (zadržavamo iz prijašnjeg) */
.badge-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
    padding: .9rem 1rem;
}

/* Mobilno: naslovi ostaju obojani, caption može biti skriven po tvom globalnom pravilu; 
   ako želiš ga zadržati i na mobu, izbriši “display:none” u tvojem @media za .hero-badges .mud-typography-caption */

/* ========== Mobile Drawer – poboljšani dizajn & interakcije ========== */

.mobile-drawer {
    /* diskretni glass + shadow, uklapa se s .modern-appbar */
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    padding-top: 0; /* head ima vlastiti padding */
}

/* Sticky glass header u draweru */
.mobile-drawer__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(10px) saturate(120%);
    border-bottom: 1px solid rgba(200,200,200,0.35);
}

.mobile-drawer__brand .brand-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
}

/* Drawer item — veći dodirni cilj + layout labela + strelica */
.drawer-item {
    position: relative; /* za ripple pseudo */
    display: flex !important;
    align-items: center;
    justify-content: space-between; /* label left, chevron right */
    gap: 10px;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 14px 14px;
    border-radius: 12px;
    margin: 4px 4px;
    color: #111827;
    transition: transform .12s ease, background-color .18s ease, box-shadow .18s ease;
    overflow: hidden; /* da ripple ne curi van */
}

.drawer-item__label {
    pointer-events: none; /* precizniji klik */
}

.drawer-item__chev {
    opacity: .55;
    transition: transform .18s ease, opacity .18s ease;
    pointer-events: none;
}

.drawer-item:hover .drawer-item__chev {
    transform: translateX(2px);
    opacity: .8;
}

/* Hover – lagani “glass” highlight */
.drawer-item:hover {
    background: rgba(79,70,229,0.06);
}

/* Focus vidljiv (tipkovnica / a11y) */
.drawer-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(79,70,229,.25);
}

/* Active/pressed – instant feedback (kratko zatamni + laku skalu) */
.drawer-item:active {
    transform: scale(0.995);
    background: rgba(79,70,229,0.10);
}

/* Aktivna ruta – lijevi brand indikator + jači kontrast */
.drawer-item.active {
    background: rgba(79,70,229,0.10);
    box-shadow: inset 2px 0 0 0 var(--brand-1);
}

    .drawer-item.active .drawer-item__chev {
        opacity: .9;
    }

/* CTA u draweru – malo “glow” */
.drawer-cta {
    position: relative;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
    box-shadow: 0 8px 22px rgba(79,70,229,0.25);
}

/* —— Ripple efekt (čisti CSS, centriran) —— */
.press-ripple {
    position: absolute;
    pointer-events: none;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    opacity: 0;
}

    .press-ripple::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 12px;
        height: 12px;
        transform: translate(-50%, -50%) scale(0.2);
        border-radius: 999px;
        background: radial-gradient(circle, rgba(79,70,229,0.25) 0%, rgba(79,70,229,0.10) 35%, transparent 60%);
        opacity: 0;
    }

    /* Kad element dobije .is-pressed (onMouseDown), pokreni animaciju */
    .press-ripple.is-pressed {
        animation: rippleFade 450ms ease-out forwards;
    }

        .press-ripple.is-pressed::after {
            animation: rippleScale 450ms ease-out forwards;
        }

@keyframes rippleScale {
    0% {
        transform: translate(-50%,-50%) scale(0.2);
        opacity: .35;
    }

    60% {
        transform: translate(-50%,-50%) scale(18);
        opacity: .20;
    }

    100% {
        transform: translate(-50%,-50%) scale(22);
        opacity: 0;
    }
}

@keyframes rippleFade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Sitni “tone” balans u odnosu na ostatak UI-a */
@media (max-width: 600px) {
    .drawer-item {
        font-size: 1.05rem;
        padding: 13px 12px;
        margin: 4px 2px;
    }

    .mobile-drawer__head {
        padding: 10px 12px;
    }
}

/* ====== Media Gallery (CustomApps) ====== */
.media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.gallery-tile {
    position: relative;
    border: 0;
    padding: 0;
    background: none;
    border-radius: 14px;
    overflow: hidden;
    cursor: zoom-in;
    box-shadow: var(--soft-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

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

.gallery-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.gallery-tile__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.28));
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 6px 8px;
    opacity: 0;
    transition: opacity .2s ease;
}

.gallery-tile:hover .gallery-tile__overlay {
    opacity: 1;
}

/* ====== Lightbox ====== */
.lightbox {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 80px 1fr 80px;
    grid-template-areas: "prev stage next";
    align-items: center;
    justify-items: center;
    outline: none;
    padding: 10px;
    z-index: 1300;
}

.lightbox__stage {
    grid-area: stage;
    margin: 0;
    width: min(96vw, 1400px);
    height: min(86vh, 900px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.55);
}

.lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.lightbox__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    transition: transform .1s ease, background-color .2s ease;
}

    .lightbox__nav:hover {
        transform: scale(1.05);
        background: rgba(0,0,0,.6);
    }

.lightbox__nav--prev {
    grid-area: prev;
}

.lightbox__nav--next {
    grid-area: next;
}

.lightbox__close {
    position: fixed;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.55);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

.lightbox__counter {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 600;
    background: rgba(0,0,0,.45);
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
}

/* Mobile tuning */
@media (max-width: 960px) {
    .lightbox {
        grid-template-columns: 56px 1fr 56px;
        padding: 6px;
    }

    .lightbox__stage {
        width: 96vw;
        height: 80vh;
    }
}


/* ===== Preview hero (jedna slika + hint da ima više) ===== */
.preview-hero {
    position: relative;
}

.preview-hero__btn {
    position: relative;
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    border-radius: 14px;
    overflow: hidden;
    cursor: zoom-in;
    box-shadow: var(--soft-shadow);
}

.preview-hero__img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.preview-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
    color: #fff;
    font-weight: 600;
}

.preview-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.25);
    padding: 4px 8px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.preview-hero__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.25);
    padding: 4px 8px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.preview-hero__arrows {
    pointer-events: none;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    color: rgba(255,255,255,.9);
}

    .preview-hero__arrows .mud-svg-icon {
        filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
    }

/* ===== Thumbnail strip ===== */
.thumb-strip {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}

.thumb {
    position: relative;
    flex: 0 0 auto;
    width: 110px;
    height: 70px;
    border: 0;
    padding: 0;
    background: none;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

.thumb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumb__tag {
    position: absolute;
    bottom: 6px;
    left: 6px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(0,0,0,.55);
    color: #fff;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.25);
}

.thumb__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}

/* Overlay iznad AppBara (1100) i Drawer-a (1300) */
.lightbox-overlay {
    z-index: 1600 !important;
}

/* ====== Lightbox layout fix (mobilno + safe areas) ====== */
.lightbox {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr; /* stage centriran; strelice su fiksirane */
    align-items: center;
    justify-items: center;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    z-index: 1601; /* iznad overlay pozadine */
}

.lightbox__stage {
    margin: 0;
    width: min(96vw, 1400px);
    height: min(86vh, 900px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.55);
}

.lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* Strelice: FIKSNO lijevo/desno – uvijek vidljive na mobu i desktopu */
.lightbox__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    transition: transform .1s ease, background-color .2s ease;
    z-index: 1602;
}

    .lightbox__nav:hover {
        transform: translateY(-50%) scale(1.05);
    }

.lightbox__nav--prev {
    left: max(10px, env(safe-area-inset-left));
}

.lightbox__nav--next {
    right: max(10px, env(safe-area-inset-right));
}

/* Close gumb: iznad svega, siguran od AppBara */
.lightbox__close {
    position: fixed;
    top: max(14px, calc(env(safe-area-inset-top) + 8px));
    right: max(14px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.55);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    z-index: 1603;
}

/* Counter */
.lightbox__counter {
    position: fixed;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 600;
    background: rgba(0,0,0,.45);
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    z-index: 1602;
}

/* Mobile tuning */
@media (max-width: 960px) {
    .lightbox__stage {
        width: 96vw;
        height: 80vh;
    }

    .lightbox__nav {
        width: 48px;
        height: 48px;
    }
}

.hero__title {
    color: white;
    font-weight: 700;
    line-height: 1.1;
    text-wrap: balance;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.hero__subtitle {
    color: rgba(255,255,255,.95);
    margin-top: 8px;
    margin-bottom: 16px;
    max-width: 60ch;
    text-shadow: 0 1px 1px rgba(0,0,0,.4);
}


/* ✅ polutransparentni “glass” okvir */
.hero-glass {
    /* poluprozirna tamna pozadina za čitljivost preko fotke */
    background: rgba(18, 18, 18, 0.55);
    /* lagani blur pozadine – radi u modernim browserima */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 18px;
    /* malo “iskače” iz pozadine */
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    /* max širina radi skladnog layouta */
    max-width: 960px;
}

    /* naslovi/tekst u okviru — dodatni kontrast bez da izgleda “prebijelo” */
    .hero-glass .hero-title {
        color: #fff;
        line-height: 1.15;
    }

    .hero-glass .hero__subtitle {
        color: rgba(255,255,255,0.92);
    }

/* responzivnost: malo kompaktnije na mobitelu */
@media (max-width: 599.98px) {
    .hero-glass {
        padding: 16px !important;
        border-radius: 14px;
    }

        .hero-glass .hero-title {
            font-size: clamp(1.6rem, 5vw, 2rem);
        }

        .hero-glass .hero__subtitle {
            font-size: 0.975rem;
        }
}

.domistart-hint {
    transition: opacity 0.3s ease-in-out;
    color: white;
}

.btn-domiastart:hover + .domistart-hint {
    opacity: 1;
}

/* ===== Hero: mobile standardization (ne dira desktop) ===== */
@media (max-width: 767.98px) {

    /* cijeli overlay: poravnaj sadržaj ulijevo, ne forsiraj centar */
    .hero-overlay {
        padding: 14px !important;
        text-align: left; /* umjesto center */
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    /* kolona koja nosi paper – neka “sjedne” uz lijevi rub */
    .hero-col {
        display: block;
    }

    /* stakleni okvir: kompaktniji, manji radius/shadow, full width s blagim unutarnjim marginama */
    .hero-glass.hero-glass--mobile {
        max-width: 100%;
        border-radius: 14px;
        padding: 14px !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.22);
        background: rgba(18,18,18,0.58); /* malo jači kontrast na fotki */
    }

    /* naslov: nešto manji i lijevo poravnat, manji shadow radi čitljivosti */
    .hero__title.hero__title--mobile {
        font-size: clamp(22px, 6.2vw, 30px);
        line-height: 1.15;
        text-align: left;
        text-shadow: 0 1px 1px rgba(0,0,0,.35);
        margin-bottom: 6px;
    }

    /* podnaslov: normalnija gustoća teksta, bez “prejake” bjeline */
    .hero__subtitle.hero__subtitle--mobile {
        font-size: clamp(14px, 3.8vw, 16px);
        line-height: 1.35;
        opacity: .98;
        text-align: left;
        margin-top: 4px;
        margin-bottom: 10px;
    }

    /* CTA: full width unutar papera, viši hit-target */
    .hero-cta-row {
        margin-top: 8px !important;
    }

    .hero-cta {
        width: 100%;
        padding-block: 10px !important;
        font-size: 1rem;
        justify-content: center;
    }

    /* caption: diskretnije i s lijeve strane */
    .hero-caption {
        opacity: .9;
        text-align: left;
        margin-top: 6px !important;
    }

    /* jači tamni overlay preko pozadinske slike za čitljivost teksta */
    .hero-section::after {
        background: linear-gradient(135deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.40) 100%);
    }

    /* slika neka sigurno “puni” bez čudnih cropova u visokim mobitelima */
    .hero-section {
        min-height: 72vh; /* malo viši od tvog 70vh */
    }

    .hero-bg-image {
        object-position: center 30%; /* podigni fokus malo prema gore */
    }

    /* smanji shadow na CTA “video” gumbovima ako ih imaš u herou */
    .video-btn {
        box-shadow: 0 4px 12px rgba(0,0,0,.28);
    }
}

/* ===== Services grid (2×2 na laptopu) ===== */
.services-page .tiles-grid .mud-item {
    display: block;
}

/* držimo kartice ujednačene visine */
.services-page .hero-tile {
    min-height: clamp(340px, 48vh, 560px);
}

/* na većim ekranima maleni hover “lift”, već imaš base stilove */
@media (hover:hover) and (pointer:fine) {
    .services-page .hero-tile {
        transition: transform .22s ease, box-shadow .22s ease;
    }

        .services-page .hero-tile:hover {
            transform: scale(1.0025);
            box-shadow: var(--soft-shadow);
        }
}

/* na mobu 1 kolona – ništa ne treba, xs=12 to već rješava */

/* === Lightbox desktop centriranje (MudOverlay fix) === */
.lightbox-overlay .mud-overlay-content {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center; /* <— centar! */
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    box-sizing: border-box;
}

/* Sam lightbox neka ne kroji layout – flex centriranje je gore */
.lightbox {
    position: relative; /* više ne treba grid za centriranje */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; /* dodatno osiguranje */
    padding: 0;
    margin: 0;
}

/* Stage i slika – tvrdo resetiraj margine i centriraj */
.lightbox__stage {
    margin: 0 !important; /* reset figure default margine */
    width: min(96vw, 1400px);
    height: min(86vh, 900px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== KONZALTING GRID ===== */

.consulting-section {
    padding-top: 24px;
    padding-bottom: 8px;
}

.consulting-headline {
    font-weight: 800;
    letter-spacing: .02em;
    margin-bottom: 12px;
}

.consulting-grid {
    margin-top: 8px;
}

/* Kartica */
.consulting-card {
    position: relative;
    min-height: 210px; /* desktop visina bloka */
    border-radius: 14px;
    overflow: hidden;
    background-color: #071014; /* fallback ako nema slike */
    background-size: cover;
    background-position: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    border: 1px solid rgba(255,255,255,0.06);
}

    /* suptilni hover-lift */
    .consulting-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0,0,0,.35);
        border-color: rgba(255,255,255,0.10);
    }

/* tamni gradijent preko wave-a */
.consulting-card__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 0% 0%, rgba(9,20,25,.65) 0%, rgba(5,12,15,.85) 60%, rgba(3,8,10,.92) 100%);
    pointer-events: none;
}

/* sadržaj kartice */
.consulting-card__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: clamp(18px, 2.5vw, 28px);
    color: #eaf2f6;
}

/* naslov lijevo */
.consulting-card__title {
    font-weight: 700;
    color: #eaf2f6;
    text-shadow: 0 1px 12px rgba(0,0,0,.25);
}

/* okrugli "→" desno */
.consulting-card__cta {
    --ring: #f6c244; /* topli žuti rub */
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    border: 2px solid var(--ring);
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(4px);
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
    color: var(--ring) !important;
}

    .consulting-card__cta:hover {
        transform: translateX(2px) scale(1.04);
        background: rgba(246, 194, 68, .12);
        border-color: #ffd36c;
    }

/* cijela ploha klikabilna radi UX-a + accessibility */
.consulting-card__link {
    position: absolute;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1; /* ispod .__content (z=2) da ne blokira tipku */
}

/* Responsive prilagodbe */
@media (max-width: 599.98px) {
    .consulting-card {
        min-height: 160px;
        border-radius: 12px;
    }

    .consulting-card__content {
        padding: 16px;
    }

    .consulting-card__title {
        font-size: 1.15rem;
    }

    .consulting-card__cta {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Minimal hero varijanta */
.hero-minimal {
    backdrop-filter: blur(6px);
    background: rgba(10, 12, 24, .35);
    border-radius: 1rem;
}

.hero-overline {
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .9;
}

.hero-title-min {
    margin-top: .25rem;
    font-weight: 700;
    color: #fff;
}

.hero-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    margin: .5rem 0 1rem;
}

/* Velike tipografske poruke */
.hero-kicker {
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .02em;
    color: #fff;
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    margin: .25rem 0 .25rem 0;
    text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.hero-kicker--em {
    filter: brightness(1.15);
}

/* CTA */
.hero-cta-strong {
    padding-inline: 1.25rem;
    font-weight: 700;
    border-radius: 999px;
}

/* Rotator (iz prethodnog koraka) */
.hero-rotator__viewport {
    min-height: 3.2rem;
}
/* drži visinu poruke */
.hero-anim-fade {
    animation: heroFadeIn .45s ease-out both;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-rotator__dots {
    display: flex;
    gap: .5rem;
    margin-top: .35rem;
}

    .hero-rotator__dots .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 0;
        background: #c8cbd0;
        opacity: .45;
    }

        .hero-rotator__dots .dot.active {
            opacity: 1;
            background: #fff;
        }

/* ---- Accent Line ---- */
.hero-accent-wrap {
    width: 100%;
    margin: .35rem 0 1rem;
}

.hero-accent-svg {
    width: 100%;
    height: 28px; /* slobodno mijenjaj visinu */
    display: block;
    overflow: visible;
}

/* osnovna statična linija (slabo vidljiva, za “track”) */
.hero-accent-base {
    fill: none;
    stroke: rgba(255,255,255,.25);
    stroke-width: 2;
    stroke-linecap: round;
}

/* animirani potez: gradient + dash offset */
.hero-accent-run {
    fill: none;
    stroke: url(#hero-accent-grad);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 90 310; /* duljina poteza + praznina */
    animation: heroDash 2.6s linear infinite;
    filter: drop-shadow(0 0 6px rgba(255,255,255,.2));
}

/* Dinamički gradient (definiran putem maskiranog backgrounda) */
.hero-accent-svg {
    /* koristimo CSS varijable da lako mijenjaš brend boje */
    --accent-a: #7aa2ff; /* primarna */
    --accent-b: #9b7cff; /* sekundarna */
}

    /* Umetni <defs> preko CSS-a koristeći masku: trik za gradient stroke na više tema */
    .hero-accent-svg defs,
    .hero-accent-svg linearGradient {
        all: initial;
    }

    /* Pseudo-ugradnja gradienta u DOM preko :where — fallback: koristimo pattern ispod */
    .hero-accent-svg::before {
        content: '';
    }

@keyframes heroDash {
    from {
        stroke-dashoffset: 400;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* Poštuj preferenciju smanjene animacije */
@media (prefers-reduced-motion: reduce) {
    .hero-accent-run {
        animation: none;
    }
}

/* Tema: light/dark prilagodba kontrasta (po potrebi) */
:root.dark .hero-accent-base {
    stroke: rgba(255,255,255,.25);
}

:root.light .hero-accent-base {
    stroke: rgba(0,0,0,.2);
}

/* --- SVG <defs> workaround: Ugradi gradijent u sam SVG kroz raw markup (vidi dolje) --- */
.hero-shimmer-line {
    position: relative;
    height: 2px;
    width: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
}

    .hero-shimmer-line::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
        transform: translateX(-100%);
        animation: shimmer 2.2s linear infinite;
    }

@keyframes shimmer {
    to {
        transform: translateX(100%);
    }
}

.quickstrip-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.card-glass {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

@media (max-width: 960px) {
    .quickstrip-container {
        text-align: center;
    }

    .card-glass {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 100dvh; /* full height mobilnog prikaza */
        height: 100dvh; /* hard fix */
    }

        .hero-section::after {
            background: linear-gradient(135deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 100%);
        }
}

@media (max-width: 767.98px) {
    .hero-title-min {
        font-size: clamp(1.25rem, 5vw, 1.6rem); /* prilagodljivo, manje nego h4 */
        line-height: 1.2;
        text-align: left; /* ili center ako ti treba centrirano */
        text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }
}


/* =========================
           DomiTech v2 (dt2-) LIGHT
           ========================= */
:root {
    --dt2-bg: #ffffff; /* ✅ BIJELA PODLOGA */
    --dt2-ink: #0c1222; /* osnovni tamni tekst */
    --dt2-ink-dim: #4a5568; /* sekundarni tekst */
    --dt2-primary: #7b61ff; /* ljubičasti akcent */
    --dt2-primary-light: #9b82ff;
    --dt2-accent: #f7b500; /* zlatni detalji (ako zatreba) */
    --dt2-border: rgba(12,18,34,.10); /* suptilna siva linija */
    --dt2-surface: rgba(255,255,255,.98);
    --dt2-surface-strong: #ffffff;
    --dt2-shadow: 0 10px 18px rgba(12,18,34,.08);
    --dt2-radius: 18px;
    --dt2-blur: 6px;
}

.appbar-offset {
    padding-top: 64px;
}

/* Global light background */
body, .dt2-page-wrap {
    background: radial-gradient(1000px 500px at 85% 5%, rgba(123,97,255,.06), transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(33,212,253,.05), transparent 60%), var(--dt2-bg);
    color: var(--dt2-ink);
}

/* ======= Sections ======= */
.dt2-section {
    padding: 64px 16px;
}

.dt2-section--tight {
    padding: 40px 16px;
}

.dt2-subtle {
    background: linear-gradient(180deg, rgba(12,18,34,.03), rgba(12,18,34,0));
    border-top: 1px solid var(--dt2-border);
    border-bottom: 1px solid var(--dt2-border);
}

.dt2-overline {
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--dt2-primary);
}

.dt2-title {
    font-weight: 800;
}

.dt2-muted {
    color: var(--dt2-ink-dim);
}

/* ======= Cards (svijetle) ======= */
.dt2-card {
    background: linear-gradient(180deg, var(--dt2-surface), var(--dt2-surface-strong));
    border: 1px solid var(--dt2-border);
    border-radius: var(--dt2-radius);
    box-shadow: var(--dt2-shadow);
    backdrop-filter: blur(var(--dt2-blur));
    -webkit-backdrop-filter: blur(var(--dt2-blur));
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

    .dt2-card:hover {
        transform: translateY(-2px);
        border-color: rgba(123,97,255,.25);
        box-shadow: 0 16px 28px rgba(12,18,34,.12);
    }

.dt2-card--center {
    text-align: center;
}

.dt2-accent-border {
    box-shadow: inset 0 0 0 1px rgba(12,18,34,.05), 0 1px 0 rgba(255,255,255,.6);
}

/* ======= Metrics ======= */
.dt2-metric {
    font-weight: 900;
    line-height: 1;
    color: #0a0f1a;
}

.dt2-metric-note {
    margin-top: 4px;
    color: var(--dt2-ink-dim);
}

/* ======= Benefits ======= */
.dt2-badge-ico {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(123,97,255,.10);
    border: 1px solid rgba(123,97,255,.22);
    color: #3d2df6;
}

.dt2-h4 {
    font-size: clamp(1.4rem,1.2rem + 1.2vw,2rem);
    font-weight: 800;
    letter-spacing: -.01em;
}

.dt2-h6 {
    font-weight: 700;
}

/* ========================= CTA DEMO ========================= */

.dt-cta {
    position: relative;
    padding: clamp(42px, 6vw, 68px) 12px;
    background: radial-gradient(1000px 500px at 20% 20%, rgba(123,97,255,0.18), transparent), radial-gradient(1200px 600px at 90% 80%, rgba(33,212,253,0.18), transparent), linear-gradient(180deg, #0b0f1a, #0e1422);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.92);
    text-align: center;
}

.dt-cta__title {
    background: linear-gradient(135deg, #ffffff, #b8c3ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    font-size: clamp(1.4rem, 2vw, 2rem);
    margin-bottom: 8px;
}

.dt-cta__subtitle {
    color: rgba(255,255,255,0.75);
    font-size: 1.1rem;
}

/* CTA buttons */
.dt-btn {
    border-radius: 14px;
    padding-inline: 18px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(123,97,255,0.25);
    transition: all 0.2s ease-in-out;
}

    .dt-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(123,97,255,0.35);
    }

/* Ghost (outlined) button variant */
.dt-btn--ghost {
    border-radius: 14px;
    padding-inline: 18px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.3) !important;
    background: transparent !important;
    color: rgba(255,255,255,0.9) !important;
    transition: all 0.2s ease-in-out;
}

    .dt-btn--ghost:hover {
        background: rgba(255,255,255,0.08) !important;
        border-color: rgba(255,255,255,0.5) !important;
    }

/* Responsiveness */
@@media (max-width: 599.98px) {
    .dt-cta {
        padding: 36px 10px;
    }

    .dt-cta__title {
        font-size: 1.25rem;
    }

    .dt-cta__subtitle {
        font-size: 1rem;
    }
}


/* ======= FAQ (light panels) ======= */
.dt2-faq .mud-expansion-panels {
    background: transparent;
}

.dt2-faq .mud-expansion-panel {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid var(--dt2-border);
    margin: 8px 0;
    box-shadow: var(--dt2-shadow);
}

@@media (max-width:600px) {
    .dt2-section {
        padding: 40px 12px;
    }
}

/* Basic look & feel za plain HTML checkbox da paše uz Mud */
.dt2-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--mud-palette-primary, #7b61ff);
    margin-right: .5rem;
    cursor: pointer;
    flex: 0 0 auto;
}

/* ✅ Footer */
.footer {
    background: #1a1a27;
    color: #b2b0bf;
}

/* -------------------------------
           🎯 BUTTON STYLES
           ------------------------------- */

/* Zajednički izgled */
.dt2-btn {
    border-radius: .75rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: none;
    transition: all .25s ease;
    backdrop-filter: blur(6px);
}

/* DomiSTART – glavni (crveni glow) */
.dt2-btn-glow-red {
    background: linear-gradient(135deg, #ff5252, #ff9800);
    color: #fff;
    box-shadow: 0 0 14px rgba(255, 82, 82, .35);
}

    .dt2-btn-glow-red:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 22px rgba(255, 82, 82, .55);
    }

.dt2-btn-domiastart .dt2-domi {
    color: #fff;
}

.dt2-btn-domiastart .dt2-start {
    color: #ffeb3b;
    margin-left: 3px;
}

/* ERP moduli – plavo-ljubičasti gradient */
.dt2-btn-glow-primary {
    border: none !important;
    background: linear-gradient(135deg, var(--dt2-primary), var(--dt2-primary-light));
    color: #fff;
    box-shadow: 0 0 10px rgba(123, 97, 255, .3);
}

    .dt2-btn-glow-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 18px rgba(123, 97, 255, .5);
    }

/* Potpore – bijeli s blagim glow efektom */
.dt2-btn-outline {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(123, 97, 255, 0.35);
    color: var(--dt2-primary);
    box-shadow: 0 0 8px rgba(123, 97, 255, .15);
}

    .dt2-btn-outline:hover {
        background: linear-gradient(135deg, #f5f2ff, #ffffff);
        box-shadow: 0 0 14px rgba(123, 97, 255, .3);
        transform: translateY(-2px);
    }

/* Chipovi */
.dt2-strip-chips .mud-chip {
    margin-bottom: .25rem;
}

/* Sitni kontrastni fix */
.mud-button.mud-button-filled.mud-error-text {
    color: #fff;
}

.hero-rotator {
    position: relative;
    width: 100%;
}

.hero-rotator__viewport {
    position: relative;
    min-height: 2.5rem;
}
/* zadrži visinu tijekom izmjene */
.hero-rotator__slide {
    width: 100%;
    will-change: transform, opacity;
}

/* Default fade-in-up animacija */
.hero-anim-fade {
    animation: heroFadeIn 450ms ease-out both;
}

@@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Točkice */
.hero-rotator__dots {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
}

    .hero-rotator__dots .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 0;
        background: #9aa0a6;
        opacity: .5;
        cursor: pointer;
    }

        .hero-rotator__dots .dot.active {
            opacity: 1;
            background: #fff;
        }

/* (Opcionalno) slide-left varijanta — zamijeni klasu na .hero-rotator__slide u hero-anim-slide  */
.hero-anim-slide {
    animation: heroSlideIn 450ms ease-out both;
}

@@keyframes heroSlideIn {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =========================
   Cookie banner (dt2 stil)
   ========================= */
.cookie-banner {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 540px;
    width: calc(100% - 32px);
    padding: 16px 18px;
    z-index: 9999;
    /* dt2-card već daje background, border, shadow, radius */
}

@media (max-width: 600px) {
    .cookie-banner {
        bottom: 12px;
        padding: 14px 14px;
        width: calc(100% - 24px);
    }
}