html {
        scroll-behavior: smooth;
        }

        /* da se anchor skrol ne skriva ispod fiksne navigacije */
        header.hero,
        section[id] {
            scroll-margin-top: 80px; /* prilagodi ako ti je navbar viši/niži */
        }
        .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
            color:rgba(255, 255, 255, 0.82) ;
        }
        #mojdvorCarousel {
            height: 75vh;
            position: relative;
            overflow: hidden;
        }

        #mojdvorCarousel .carousel-inner,
        #mojdvorCarousel .carousel-item {
            height: 100%;
        }

        #mojdvorCarousel .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: contrast(1.08) saturate(1.1);
            transform: scale(1.2) translate(0, 0);
            will-change: transform;
            transform: translateZ(0);
            backface-visibility: hidden;
            perspective: 1000px;
        }

        #mojdvorCarousel.vignette::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            box-shadow: inset 0 0 220px rgba(0, 0, 0, 0.55);
            z-index: 2;
        }

        #mojdvorCarousel.carousel-fade .carousel-item {
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            transform: none !important;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        #mojdvorCarousel.carousel-fade .carousel-item.active {
            opacity: 1;
            position: relative;
        }

        #mojdvorCarousel.carousel-fade .carousel-item-next.carousel-item-start,
        #mojdvorCarousel.carousel-fade .carousel-item-prev.carousel-item-end {
            opacity: 1;
        }

        #mojdvorCarousel.carousel-fade .active.carousel-item-start,
        #mojdvorCarousel.carousel-fade .active.carousel-item-end {
            opacity: 0;
        }

        /* KEN BURNS 

        /* 1 – ZOOM OUT iz gornjeg lijevog prema centru */
        @keyframes kenburns-1 {
            0%   { transform: scale(1.2) translate(-4%, -4%); }
            100% { transform: scale(1.0) translate(0, 0); }
        }

        /* 2 – ZOOM IN iz centra prema donjem desnom */
        @keyframes kenburns-2 {
            0%   { transform: scale(1.0) translate(0, 0); }
            100% { transform: scale(1.2) translate(4%, 4%); }
        }

        /* 3 – ZOOM OUT s desne strane prema centru */
        @keyframes kenburns-3 {
            0%   { transform: scale(1.2) translate(5%, 0); }
            100% { transform: scale(1.0) translate(0, 0); }
        }

        /* 4 – ZOOM IN odozdo prema gore */
        @keyframes kenburns-4 {
            0%   { transform: scale(1.0) translate(0, 4%); }
            100% { transform: scale(1.2) translate(0, -4%); }
        }

        /* 5 – ZOOM OUT dijagonala iz donjeg desnog prema gornjem lijevom */
        @keyframes kenburns-5 {
            0%   { transform: scale(1.2) translate(5%, 5%); }
            100% { transform: scale(1.0) translate(-2%, -2%); }
        }

        /* 6 – ZOOM IN horizontalno s lijeva na desno */
        @keyframes kenburns-6 {
            0%   { transform: scale(1.0) translate(-4%, 0); }
            100% { transform: scale(1.2) translate(4%, 0); }
        }

        /* 7 – ZOOM OUT vertikalno odozgo prema dolje */
        @keyframes kenburns-7 {
            0%   { transform: scale(1.2) translate(0, -5%); }
            100% { transform: scale(1.0) translate(0, 2%); }
        }

        /* 8 – ZOOM IN dijagonala iz gornjeg desnog prema centru */
        @keyframes kenburns-8 {
            0%   { transform: scale(1.0) translate(3%, -3%); }
            100% { transform: scale(1.2) translate(-1%, 1%); }
        }

        /* 9 – ZOOM OUT iz lijevog donjeg kuta prema centru */
        @keyframes kenburns-9 {
            0%   { transform: scale(1.2) translate(-5%, 5%); }
            100% { transform: scale(1.0) translate(0, 0); }
        }

        /* 10 – ZOOM IN s desnog donjeg kuta prema gornjem lijevom */
        @keyframes kenburns-10 {
            0%   { transform: scale(1.0) translate(4%, 3%); }
            100% { transform: scale(1.2) translate(-4%, -3%); }
        }

        #mojdvorCarousel .carousel-item:nth-child(1).active img {
            animation: kenburns-1 14s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
        }

        #mojdvorCarousel .carousel-item:nth-child(2).active img {
            animation: kenburns-2 14s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
        }

        #mojdvorCarousel .carousel-item:nth-child(3).active img {
            animation: kenburns-3 14s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
        }

        #mojdvorCarousel .carousel-item:nth-child(4).active img {
            animation: kenburns-4 14s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
        }

        #mojdvorCarousel .carousel-item:nth-child(5).active img {
            animation: kenburns-5 14s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
        }

        #mojdvorCarousel .carousel-item:nth-child(6).active img {
            animation: kenburns-6 14s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
        }

        #mojdvorCarousel .carousel-item:nth-child(7).active img {
            animation: kenburns-7 14s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
        }

        #mojdvorCarousel .carousel-item:nth-child(8).active img {
            animation: kenburns-8 14s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
        }

        #mojdvorCarousel .carousel-item:nth-child(9).active img {
            animation: kenburns-9 14s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
        }

        #mojdvorCarousel .carousel-item:nth-child(10).active img {
            animation: kenburns-10 14s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
        }

        #mojdvorCarousel .carousel-item:not(.active) img {
            animation: none !important;
            transform: scale(1.2) translate(0, 0);
        }

        #mojdvorCarousel .carousel-caption {
            z-index: 3;
            text-shadow: 0 0 18px rgba(0,0,0,0.8);
            padding-bottom: 3rem;
        }

    #mojdvorCarousel * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    :root {
        --bg-dark: #0a0e1a;
        --bg-darker: #050810;
        --accent: #22c55e;
        --accent-glow: rgba(34, 197, 94, 0.3);
        --accent-soft: #bbf7d0;
        --gold: #fbbf24;
        --purple: #a78bfa;
        --cyan: #22d3ee;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background: var(--bg-darker);
        color: #e5e7eb;
        overflow-x: hidden;
    }

    .animated-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .animated-bg::before {
        content: '';
        position: absolute;
        width: 200%;
        height: 200%;
        background: 
            radial-gradient(circle at 20% 50%, rgba(34, 197, 94, 0.15), transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.15), transparent 50%),
            radial-gradient(circle at 40% 20%, rgba(167, 139, 250, 0.1), transparent 50%);
        animation: moveGradient 20s ease infinite;
    }

    @keyframes moveGradient {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        33% { transform: translate(-5%, 5%) rotate(120deg); }
        66% { transform: translate(5%, -5%) rotate(240deg); }
    }

    .navbar {
        background: rgba(10, 14, 26, 0.7);
        backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    }

    .navbar.scrolled {
        background: rgba(10, 14, 26, 0.95);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }

    .navbar-brand {
        font-weight: 800;
        font-size: 1.5rem;
        background: linear-gradient(135deg, var(--accent), var(--cyan));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -0.02em;
    }

    .nav-link {
        position: relative;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8) !important;
        transition: all 0.3s ease;
        padding: 0.5rem 1rem !important;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--accent), var(--cyan));
        transform: translateX(-50%);
        transition: width 0.3s ease;
    }

    .nav-link:hover {
        color: #fff !important;
    }

    .nav-link:hover::after {
        width: 80%;
    }

    .hero {
        position: relative;
        min-height: 100vh;
        padding-top: 8rem;
        padding-bottom: 6rem;
        overflow: hidden;
    }

    .hero::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: 
            radial-gradient(circle at 30% 20%, rgba(34, 197, 94, 0.2), transparent 40%),
            radial-gradient(circle at 70% 60%, rgba(59, 130, 246, 0.15), transparent 40%),
            radial-gradient(circle at 50% 80%, rgba(167, 139, 250, 0.15), transparent 40%);
        animation: pulse 15s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% { transform: scale(1) rotate(0deg); }
        50% { transform: scale(1.1) rotate(180deg); }
    }

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

    .hero-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1.2rem;
        border-radius: 50px;
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 211, 238, 0.1));
        border: 1px solid rgba(34, 197, 94, 0.3);
        font-size: 0.75rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        font-weight: 600;
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.2);
        animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }

    .hero-title {
        font-size: clamp(2.8rem, 5vw, 4.5rem);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.03em;
        margin-bottom: 1.5rem;
    }

    .hero-title span {
        background: linear-gradient(135deg, var(--accent), var(--cyan), var(--purple));
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradientFlow 5s ease infinite;
    }

    @keyframes gradientFlow {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    .glass-card {
        background: rgba(30, 41, 59, 0.4);
        backdrop-filter: blur(20px) saturate(180%);
        border-radius: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 2rem;
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .glass-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
        transition: left 0.6s ease;
    }

    .glass-card:hover::before {
        left: 100%;
    }

    .glass-card:hover {
        transform: translateY(-8px);
        box-shadow: 
            0 30px 80px rgba(34, 197, 94, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        border-color: rgba(34, 197, 94, 0.3);
    }

    .metric {
        padding: 1.5rem;
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(59, 130, 246, 0.05));
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }

    .metric:hover {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(59, 130, 246, 0.1));
        border-color: rgba(34, 197, 94, 0.3);
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.2);
    }

    .metric-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 600;
    }

    .metric-value {
        font-size: 1.5rem;
        font-weight: 700;
        background: linear-gradient(135deg, #fff, var(--accent-soft));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .hero-visual-main {
        border-radius: 1.5rem;
        overflow: hidden;
        position: relative;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .hero-visual-main::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, transparent, rgba(34, 197, 94, 0.2));
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
    }

    .hero-visual-main:hover::before {
        opacity: 1;
    }

    .hero-visual-main img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .hero-visual-main:hover img {
        transform: scale(1.05);
    }

    .btn-glow {
        position: relative;
        padding: 1rem 2.5rem;
        font-weight: 600;
        border-radius: 50px;
        border: none;
        background: linear-gradient(135deg, var(--accent), var(--cyan));
        color: #000;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 10px 30px rgba(34, 197, 94, 0.3);
    }

    .btn-glow::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.6s ease, height 0.6s ease;
    }

    .btn-glow:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 40px rgba(34, 197, 94, 0.5);
    }

    .btn-glow:hover::before {
        width: 300px;
        height: 300px;
    }

    .btn-outline-glow {
        padding: 1rem 2.5rem;
        font-weight: 600;
        border-radius: 50px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        background: transparent;
        color: #fff;
        transition: all 0.3s ease;
    }

    .btn-outline-glow:hover {
        border-color: var(--accent);
        background: rgba(34, 197, 94, 0.1);
        box-shadow: 0 10px 30px rgba(34, 197, 94, 0.2);
        color: #fff;
    }

    .section-shell {
        position: relative;
        padding: 3rem 0;
    }

    .section-kicker {
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: var(--accent);
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .section-title {
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-bottom: 1rem;
        background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.7));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .card-parallax {
        background: rgba(30, 41, 59, 0.4);
        backdrop-filter: blur(20px);
        border-radius: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 2.5rem;
        transition: all 0.4s ease;
        transform-style: preserve-3d;
    }
    .card-parallax-center {
        display: flex;
        align-items: center;      /* vertikalno centriranje */
        justify-content: center;  /* horizontalno centriranje */
    }


    .card-parallax:hover {
        transform: translateY(-10px) rotateX(5deg);
        box-shadow: 0 30px 80px rgba(34, 197, 94, 0.2);
    }

    .table-dark-soft {
        background: rgba(30, 41, 59, 0.3);
        border-radius: 1rem;
        overflow: hidden;
    }

    .table-dark-soft thead {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(59, 130, 246, 0.2));
    }

    .table-dark-soft tbody tr {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.3s ease;
    }

    .table-dark-soft tbody tr:hover {
        background: rgba(34, 197, 94, 0.05);
    }

    .pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 1rem;
        border-radius: 50px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        font-size: 0.85rem;
        background: rgba(255, 255, 255, 0.05);
        transition: all 0.3s ease;
    }

    .pill:hover {
        border-color: var(--accent);
        background: rgba(34, 197, 94, 0.1);
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
    }

    .risk-chip {
        padding: 0.4rem 1rem;
        border-radius: 50px;
        border: 1px solid #f97316;
        color: #fed7aa;
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(124, 45, 18, 0.3));
        font-size: 0.75rem;
        font-weight: 600;
        box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
    }

    footer {
        background: rgba(10, 14, 26, 0.8);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 2rem 0;
    }


    .badge-kv {
        padding: 0.5rem 1rem;
        border-radius: 50px;
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(202, 138, 4, 0.2));
        border: 1px solid #cb9c24;
        color: #fbbf24;
        font-size: 0.75rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .badge-kv:hover {
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
        transform: translateY(-2px);
    }

    .scenario-card {
        background: rgba(30, 41, 59, 0.4);
        backdrop-filter: blur(20px);
        border-radius: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 2rem;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .scenario-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--accent), var(--cyan), var(--purple));
        transform: scaleX(0);
        transition: transform 0.5s ease;
    }

    .scenario-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 30px 80px rgba(34, 197, 94, 0.3);
        border-color: rgba(34, 197, 94, 0.5);
    }

    .scenario-card:hover::after {
        transform: scaleX(1);
    }

    

    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-track {
        background: var(--bg-darker);
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, var(--gold), var(--accent-glow));
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, var(--accent-glow), var(--gold));
    }

    .hero-visual-main {
        height: 420px; 
        overflow: hidden;
    }

    .hero-visual-main .carousel-item {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .hero-visual-main .carousel-item img {
        flex: 1 1 auto;
        width: 100%;
        object-fit: cover;
    }

    .hero-visual-main .carousel-text-box {
        flex: 0 0 auto;
        min-height: 90px;       
    }
    .modal-content {
        background: radial-gradient(circle at top,#020617,#020617 70%);
        border-radius: 1.4rem;
        border: 1px solid rgba(148,163,184,0.7);
        color: #e5e7eb;
    }
    .text-gold {
        --bs-text-opacity: 1;
        color: #fbbf24 !important;
    }

    .navbar-toggler {
        border: none;
        padding: 0.25rem 0.4rem;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-dark .navbar-toggler-icon {
        background-image: none;
    }

    .navbar-toggler-icon {
        position: relative;
        width: 1.6rem;
        height: 1.1rem;
    }

    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after,
    .navbar-toggler-icon span {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        border-radius: 999px;
        background-color: #d3cd0b; 
        transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease, bottom 0.2s ease;
    }

    .navbar-toggler-icon span {
        top: 50%;
        transform: translateY(-50%);
    }

    .navbar-toggler-icon::before {
        top: 0;
    }

    .navbar-toggler-icon::after {
        bottom: 0;
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span {
        opacity: 0;
    }
    .cookie-banner {
        position: fixed;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        max-width: 640px;
        width: 100%;
        padding: 1rem 1.25rem;
        background: rgba(15,23,42,0.98);
        border-radius: 1rem;
        border: 1px solid rgba(148,163,184,0.6);
        box-shadow: 0 18px 40px rgba(15,23,42,0.9);
        font-size: .85rem;
        z-index: 1080;
    }

    .cookie-banner p {
        margin-bottom: .5rem;
    }

    .cookie-banner small {
        color: #9ca3af;
    }

    .cookie-banner .btn {
        font-size: .8rem;
        padding: .3rem .85rem;
    }
    .lang-flag img {
        width: 22px;
        height: auto;
        display: block;
        border-radius: 2px;          /* možeš maknuti ako želiš ravne rubove */
        box-shadow: 0 0 4px rgba(0,0,0,0.4);
        transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    }

    .lang-flag:hover img {
        transform: translateY(-1px) scale(1.05);
        box-shadow: 0 0 6px rgba(0,0,0,0.6);
        opacity: 0.9;
    }
    /* Responsive */
    @media (max-width: 768px) {
        .hero-title {
            font-size: 2rem;
        }
        
        .section-title {
            font-size: 1.5rem;
        }
        
        .btn-glow, .btn-outline-glow {
            padding: 0.75rem 1.5rem;
        }
        .hero-visual-main {
            height: 520px; 
        }
    }