/* Gekom – site styles (built on stock Bootstrap 5.3) */

:root {
    --gk-navy: #0b2545;
    --gk-navy-2: #13315c;
    --gk-blue: #1a7fd1;
    --gk-blue-soft: #e8f2fb;
    --gk-text: #1f2a37;
    --gk-muted: #5b6878;

    --bs-primary: var(--gk-blue);
    --bs-primary-rgb: 26, 127, 209;
    --bs-body-color: var(--gk-text);
    --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-link-color: var(--gk-blue);
    --bs-link-color-rgb: 26, 127, 209;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px; /* sticky navbar */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--gk-navy);
    letter-spacing: -0.01em;
}

.btn-primary {
    --bs-btn-bg: var(--gk-blue);
    --bs-btn-border-color: var(--gk-blue);
    --bs-btn-hover-bg: #156cb3;
    --bs-btn-hover-border-color: #156cb3;
    --bs-btn-active-bg: #125d9a;
}

/* ---------- Navbar ---------- */
.gk-nav {
    background: var(--gk-navy);
    transition: box-shadow .2s;
}
.gk-nav.scrolled { box-shadow: 0 2px 16px rgba(0, 0, 0, .25); }
.gk-nav .navbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
}
.gk-nav .navbar-brand img { height: 40px; width: auto; }
.gk-nav .nav-link {
    font-weight: 600;
    padding: 1.25rem .9rem;
    color: rgba(255, 255, 255, .8);
}
.gk-nav .nav-link:hover,
.gk-nav .nav-link.active { color: #fff; }
@media (min-width: 992px) {
    .gk-nav .nav-link { position: relative; }
    .gk-nav .nav-link.active::after {
        content: "";
        position: absolute;
        left: .9rem;
        right: .9rem;
        bottom: .8rem;
        height: 2px;
        background: var(--gk-blue);
    }
}
@media (max-width: 991.98px) {
    .gk-nav .nav-link { padding: .75rem 0; }
}

/* ---------- Hero ---------- */
.gk-hero {
    position: relative;
    min-height: min(80vh, 680px);
    display: flex;
    align-items: center;
    color: #fff;
    background: var(--gk-navy) url("../img/naslovna-hero.webp") center 55% / cover no-repeat;
}
@media (max-width: 767.98px) {
    .gk-hero { background-image: url("../img/naslovna-hero-mobile.webp"); }
}
.gk-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(11, 37, 69, .85) 0%, rgba(11, 37, 69, .55) 45%, rgba(11, 37, 69, .1) 100%);
}
.gk-hero > .container { position: relative; }
.gk-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.15;
    max-width: 18ch;
}
.gk-hero .lead { max-width: 52ch; color: rgba(255, 255, 255, .85); }
.gk-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gk-blue);
    margin-bottom: .75rem;
}
.gk-hero .gk-eyebrow { color: #8cc8ff; }

/* ---------- Sections ---------- */
.gk-section { padding: 5rem 0; }
.gk-section-alt { background: #f5f8fb; }
.gk-section-head { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.gk-section-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
@media (max-width: 575.98px) {
    .gk-section { padding: 3.5rem 0; }
}

/* ---------- Facts ---------- */
.gk-facts {
    margin-top: -3.5rem;
    position: relative;
    z-index: 2;
}
.gk-fact {
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 8px 30px rgba(11, 37, 69, .1);
    padding: 1.75rem 1.25rem;
    text-align: center;
    height: 100%;
}
.gk-fact i { font-size: 2rem; color: var(--gk-blue); }
.gk-fact .num {
    display: block;
    font-size: clamp(1.35rem, 5.5vw, 2.5rem);
    white-space: nowrap;
    font-weight: 700;
    color: var(--gk-navy);
    line-height: 1.2;
    margin: .5rem 0 .25rem;
    font-variant-numeric: tabular-nums;
}
.gk-fact p { margin: 0; color: var(--gk-muted); font-size: .95rem; }

/* ---------- About ---------- */
.gk-about-img {
    border-radius: .75rem;
    width: 100%;
    height: auto;
}
@media (min-width: 992px) {
    .gk-sticky { position: sticky; top: 96px; }
}

/* ---------- Services ---------- */
.gk-service {
    background: #fff;
    border: 1px solid #e3e9ef;
    border-radius: .75rem;
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.gk-service:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(11, 37, 69, .1);
}
.gk-service img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: .5rem;
    margin-bottom: 1rem;
}
.gk-service h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.gk-service p { color: var(--gk-muted); font-size: .95rem; flex: 1; }
.gk-more {
    align-self: flex-start;
    padding: 0;
    font-weight: 600;
    text-decoration: none;
}
.gk-more i { transition: transform .2s; }
.gk-more:hover i { transform: translateX(3px); }

/* Service detail modals */
.gk-service-modal dt { color: var(--gk-navy); margin-top: 1rem; }
.gk-service-modal dd { margin: .15rem 0 0; color: var(--gk-muted); }
.gk-service-modal h3 { font-size: 1rem; margin: 1.75rem 0 .75rem; }
.gk-results,
.gk-checklist { list-style: none; padding: 0; margin: 0; }
.gk-results li,
.gk-checklist li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: .5rem;
}
.gk-results li::before,
.gk-checklist li::before {
    content: "\F272"; /* bi-check2 */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    color: var(--gk-blue);
    font-weight: 700;
}

/* ---------- About: approach ---------- */
.gk-approach {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--gk-blue);
    background: var(--gk-blue-soft);
    border-radius: 0 .5rem .5rem 0;
}
.gk-approach h3 {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gk-blue);
    margin-bottom: .5rem;
}
.gk-approach p { margin: 0; }

/* ---------- Research & development ---------- */
.gk-highlight {
    background: var(--gk-navy);
    color: rgba(255, 255, 255, .85);
    border-radius: .75rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(11, 37, 69, .15);
}
.gk-highlight h3 { color: #fff; font-size: 1.35rem; margin-bottom: 1rem; }

/* ---------- Projects ---------- */
.gk-project {
    background: #fff;
    border: 1px solid #e3e9ef;
    border-radius: .75rem;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.gk-project-img {
    display: block;
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    width: 100%;
    cursor: zoom-in;
}
.gk-project-img img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}
.gk-project-img .zoom {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(11, 37, 69, .75);
    color: #fff;
    display: grid;
    place-items: center;
}
.gk-project-body { padding: 1.25rem; flex: 1; }
.gk-project-body h3 { font-size: 1.05rem; line-height: 1.35; margin-bottom: .6rem; }
.gk-project-body p { margin: 0; color: var(--gk-muted); font-size: .95rem; }
.gk-project-body .gk-credit { margin-top: .75rem; font-size: .75rem; color: #8a96a3; }

/* ---------- Contact ---------- */
.gk-contact-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}
.gk-contact-item .ico {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--gk-blue-soft);
    color: var(--gk-blue);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}
.gk-contact-item h3 { font-size: 1rem; margin: 0 0 .15rem; }
.gk-contact-item p { margin: 0; }
.gk-contact-item a { color: inherit; text-decoration: none; }
.gk-contact-item a:hover { color: var(--gk-blue); }
.gk-map {
    border: 0;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border-radius: .75rem;
}

/* ---------- Footer ---------- */
.gk-footer {
    background: var(--gk-navy);
    color: rgba(255, 255, 255, .7);
    padding: 2rem 0;
    font-size: .95rem;
}
.gk-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.gk-footer a:hover { color: #fff; }
.gk-footer img { height: 36px; width: auto; }

/* ---------- Back to top ---------- */
.gk-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--gk-blue);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
    z-index: 1030;
}
.gk-top.show { opacity: 1; visibility: visible; }
.gk-top:hover { color: #fff; background: #156cb3; }

/* ---------- Reveal on scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .gk-service, .gk-service:hover { transition: none; transform: none; }
}

/* ---------- 404 ---------- */
.gk-404 {
    min-height: 70vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 4rem 1rem;
}
.gk-404 .code {
    font-size: clamp(5rem, 18vw, 9rem);
    font-weight: 700;
    color: var(--gk-blue);
    line-height: 1;
}