:root {
    --bg: #050505;
    --primary: #2563eb;
    --glass: rgba(255, 255, 255, 0.02);
    --border: rgba(255, 255, 255, 0.1);
    --text-main: #ffffff;
    --text-dim: #a1a1aa;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; scroll-behavior: smooth; }

body { background: var(--bg); color: var(--text-main); line-height: 1.6; overflow-x: hidden; }

/* NAVBAR */
.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 10%; position: fixed; width: 100%; z-index: 1000;
    background: rgba(5, 5, 5, 0.9); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border);
}
.logo { font-weight: 800; font-size: 1.2rem; letter-spacing: 1px; }
.logo span { color: var(--primary); }
.nav-links a { text-decoration: none; color: var(--text-dim); margin-left: 30px; font-size: 0.8rem; font-weight: 600; transition: 0.3s; letter-spacing: 1px; }
.nav-links a:hover { color: white; }
.btn-nav { background: var(--primary); color: white !important; padding: 10px 20px; border-radius: 4px; }

/* HERO */
.hero { height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 10%; }
.glow-effect { position: absolute; width: 600px; height: 600px; background: var(--primary); filter: blur(160px); opacity: 0.1; z-index: 0; }
.hero-content { text-align: center; max-width: 900px; z-index: 1; border-radius: 40px; }
.badge { font-size: 0.7rem; color: var(--primary); border: 1px solid var(--primary); padding: 5px 15px; border-radius: 50px; font-weight: bold; letter-spacing: 2px; }
h1 { font-size: 3.8rem; font-weight: 800; line-height: 1.1; margin: 20px 0; }
.blue { color: var(--primary); }
p { color: var(--text-dim); font-size: 1.1rem; margin-bottom: 40px; }

/* DUGMAD */
.btn-main { background: var(--primary); color: white; padding: 16px 35px; text-decoration: none; border-radius: 6px; font-weight: bold; transition: 0.4s; font-size: 0.9rem; border: none; cursor: pointer; }
.btn-outline { border: 1px solid var(--border); color: white; padding: 16px 35px; text-decoration: none; border-radius: 6px; transition: 0.4s; font-size: 0.9rem; }
.btn-main:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2); }

/* SEKCIJE */
.services, .projects, .about { padding: 120px 10%; }
.sub-title { color: var(--primary); font-size: 0.75rem; font-weight: 800; letter-spacing: 4px; display: block; margin-bottom: 10px; }
.section-header { margin-bottom: 70px; text-align: left; }

/* GRIDOVI */
.services-grid, .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.glass-card { background: var(--glass); border: 1px solid var(--border); padding: 50px; transition: 0.4s; position: relative; overflow: hidden; }
.glass-card:hover { border-color: var(--primary); background: rgba(255,255,255, 0.04); transform: translateY(-5px); }

/* USLUGE SPECIFIČNO */
.service-number { font-size: 0.8rem; color: var(--primary); font-weight: 800; margin-bottom: 20px; }

/* PROJEKTI SPECIFIČNO */
.p-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.tag { font-size: 0.6rem; border: 1px solid #333; padding: 3px 10px; border-radius: 3px; color: var(--text-dim); }

/* KONTAKT SEKCIJA */
.contact { text-align: center; padding: 150px 10%; }
.contact-methods { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.social-box { display: flex; gap: 30px; margin-top: 10px; }
.social-link { text-decoration: none; color: var(--text-dim); font-size: 0.75rem; font-weight: 800; letter-spacing: 2px; transition: 0.3s; border-bottom: 1px solid transparent; padding-bottom: 5px; }
.social-link:hover { color: var(--primary); border-bottom: 1px solid var(--primary); }

/* FOOTER */
footer { padding: 60px 10%; border-top: 1px solid var(--border); background: #000; }
.footer-info { display: flex; justify-content: space-between; color: #444; font-size: 0.8rem; }

@media (max-width: 900px) {
    h1 { font-size: 2.5rem; }
    .footer-info { flex-direction: column; gap: 20px; text-align: center; }
}

/* --- MOBILNA OPTIMIZACIJA - ČISTO I CENTRIRANO --- */
@media (max-width: 768px) {
    /* 1. Spriječi horizontalni skrol na nivou cijele stranice */
    html, body {
        width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Navbar: samo WEBDEVMOSTAR u sredini, bez linkova */
    .navbar {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 20px 0 !important;
    }

    .nav-links {
        display: none !important; /* Ovo miče sve ostalo iz navigacije */
    }

    /* 3. Hero sekcija: sve na sredinu, bez preklapanja */
    .hero {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 30px !important;
        box-sizing: border-box !important;
    }

    /* 4. Dugmad: razmaknuta i centrirana */
    .hero-btns {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important; /* Ovdje povećaj ako se još diraju */
        width: 100% !important;
        margin-top: 30px !important;
    }

    .btn-liquid, .btn-outline {
        width: 80% !important;
        max-width: 280px !important;
        padding: 15px 0 !important;
        margin: 0 !important;
    }
}