:root {
    --bg-900: #0b1220;
    --brand-500: #25d9ff;
    --brand-600: #00bfe6;
    --accent-500: #ffa21a;
    --text-100: #e6f3ff;
}

/* Osnovni theme */
html, body {
    background: radial-gradient(1200px 800px at 70% -10%, rgba(0,191,230,.20), transparent 60%), var(--bg-900);
    color: var(--text-100);
}

/* Navbar */
.navbar {
    backdrop-filter: blur(6px);
}

.navbar-brand img {
    height: clamp(28px, 7vw, 84px);
    display: block;
}

/* Brand util klase */
.text-brand {
    color: var(--brand-500) !important;
}

.btn-brand {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color: #05121a;
    border: none;
}

    .btn-brand:hover {
        filter: brightness(1.05);
    }

.glow {
    box-shadow: 0 0 0 1px rgba(0,165,204,.35), 0 10px 30px -10px rgba(0,165,204,.55);
}

.metric {
    font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
}

/* Card */
.card {
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
}

    .card:hover {
        border-color: rgba(37,217,255,.25);
        box-shadow: 0 10px 30px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(37,217,255,.15) inset;
    }

/* Broj u krugu (How it works) */
.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(37,217,255,.2), rgba(0,165,204,.2));
    border: 1px solid rgba(37,217,255,.35);
}

/* Hero efekti */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(800px 300px at 20% 10%, rgba(255,162,26,.35), transparent 50%), radial-gradient(700px 250px at 80% 20%, rgba(0,191,230,.25), transparent 55%);
}

/* =========================
   Dropdown UX na desktopu
   ========================= */
@media (min-width: 992px) {
    .navbar .dropdown-menu {
        margin-top: 0;
        opacity: 0;
        transform: translateY(6px);
        pointer-events: none;
        transition: opacity .12s ease, transform .12s ease;
        display: block;
        visibility: hidden;
    }

    .nav-item.dropdown:hover > .dropdown-menu,
    .dropdown.show > .dropdown-menu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
    }

    .nav-item.dropdown:hover > .nav-link,
    .dropdown.show > .nav-link {
        background-color: rgba(255,255,255,0.05);
        color: #fff;
    }
}

/* =========================
   FAQ – globalno (responzivno)
   ========================= */
.accordion-item {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: .75rem;
    margin-bottom: 1rem;
    background: rgba(255,255,255,.03);
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    overflow: hidden;
    transition: all .25s ease-in-out;
}

    .accordion-item:hover {
        box-shadow: 0 0 15px rgba(37,217,255,.15);
        transform: translateY(-2px);
    }

.accordion-button {
    font-weight: 600;
    color: #e6f3ff;
    background: transparent;
    padding: 1.2rem 1.5rem;
    transition: all .25s ease;
    border: none;
}

    .accordion-button:not(.collapsed) {
        color: #25d9ff;
        background-color: rgba(37,217,255,.05);
        box-shadow: inset 0 -1px 0 rgba(255,255,255,.1);
    }

    .accordion-button:focus {
        box-shadow: none;
        border: none;
    }

.accordion-body {
    color: #c9d6e2;
    line-height: 1.6;
    font-size: .95rem;
    padding: 1.25rem 1.5rem;
}

    .accordion-body .card {
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: .75rem;
        color: #d8e9f8;
    }

        .accordion-body .card h3 {
            color: #25d9ff;
            font-weight: 600;
            font-size: 1rem;
        }

        .accordion-body .card:hover {
            background: rgba(37,217,255,.08);
            transition: background .2s ease-in-out;
        }

section.faq-section {
    background: radial-gradient(1200px 800px at 70% -10%, rgba(0,191,230,.15), transparent 60%), var(--bg-900, #0b1220);
    padding-top: 4rem;
    padding-bottom: 5rem;
}

/* =========================
   Uniformni gutter (logo == sadržaj)
   ========================= */
/* jedno mjesto istine */
:root {
    --page-gutter: calc((var(--bs-gutter-x, 1.5rem)) / 2);
}

/* navbar container poravnat sa sadržajem */
.navbar .with-gutters {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

/* svi top-level .container-xxl imaju isti gutter */
.container-xxl {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
}
.text-brand {
    color: var(--brand-500) !important;
}


/* (po potrebi uključi kratko za vizualni debug)
.container-xxl{ outline:1px dashed rgba(37,217,255,.5); }
.navbar .with-gutters{ outline:1px solid rgba(255,162,26,.5); } */