/* ===== TOKENS ===== */
:root {
    --bg: #ffffff; --bg-alt: #f5f5f7; --text: #111111; --text-muted: #666666;
    --accent: #000000; --accent-inv: #ffffff; --border: rgba(0,0,0,0.1);
    --border-s: rgba(0,0,0,0.2); --cursor: #000; --cursor-b: rgba(0,0,0,0.25);
    --prog: #000; --noise: 0.04; --sb: #bbb;
    --font-main:'Plus Jakarta Sans',sans-serif; --font-d:'Syne',sans-serif; --font-m:'Inter',sans-serif;
    --ease: cubic-bezier(0.16,1,0.3,1);
}
[data-theme="dark"] {
    --bg:#0a0a0a; --bg-alt:#111111; --text:#f0f0f0; --text-muted:#888888;
    --accent:#ffffff; --accent-inv:#000000; --border:rgba(255,255,255,0.08);
    --border-s:rgba(255,255,255,0.15); --cursor:#fff; --cursor-b:rgba(255,255,255,0.3);
    --prog:#fff; --noise:0.06; --sb:#333;
}

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

@media (pointer: fine) {
    body, a, button, .hover-active { cursor: none; }
    input, textarea { cursor: text; }
}

::-webkit-scrollbar{width:4px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:var(--sb);border-radius:10px}
/* Fiks za vodoravni scroll na mobilnim uređajima */
html, body {
    overflow-x: hidden !important;
    max-width: 100%;
    width: 100%;
    position: relative;
}

html {
    background: var(--bg);
    scrollbar-width: thin;
    scrollbar-color: var(--sb) var(--bg);
    transition: background .5s;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    transition: background .5s, color .5s;
}

/* ===== SCROLL PROGRESS ===== */
#scroll-progress{position:fixed;top:0;left:0;width:0%;height:2px;background:var(--prog);z-index:9999999;transition:width .1s linear}

/* ===== NOISE ===== */
.noise {
    display: none !important;
}

/* ===== CURSOR ===== */
#c-dot{position:fixed;top:0;left:0;width:5px;height:5px;background:var(--cursor);border-radius:50%;pointer-events:none;z-index:10000005!important;transform:translate(-50%,-50%);will-change:transform;transition:background .3s}
#c-outline{position:fixed;top:0;left:0;width:40px;height:40px;border:1px solid var(--cursor-b);border-radius:50%;pointer-events:none;z-index:10000004!important;transform:translate(-50%,-50%);will-change:transform;transition:width .4s var(--ease),height .4s var(--ease),background .4s,border .4s}
.c-hover #c-outline{width:80px;height:80px;background:rgba(128,128,128,.06);backdrop-filter:blur(4px)}

/* ===== INTRO ===== */
#intro{position:fixed;inset:0;background:var(--bg);z-index:3100000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.barcode{display:flex;height:120px;gap:6px;position:relative;opacity:0;transform:translateY(30px);transition:1s var(--ease)}
.barcode.active{opacity:1;transform:translateY(0)}
.barcode.scan-finish{opacity:0;transition:0.8s var(--ease)}
.bar{background:var(--text);height:100%}
.scanner{position:absolute;top:0;left:-10%;width:120%;height:2px;background:#f00;box-shadow:0 0 15px #f00,0 0 5px #f00;transform:translateY(-15px);opacity:0;z-index:2}
.scanner.scan{animation:scanAnim 1.4s ease-in-out forwards}
@keyframes scanAnim{0%{transform:translateY(-15px);opacity:0}10%{opacity:1}90%{transform:translateY(135px);opacity:1}100%{transform:translateY(135px);opacity:0}}

/* ===== NAV ===== */
nav{position:fixed;top:0;width:100%;padding:40px 6%;display:flex;justify-content:space-between;align-items:center;z-index:2000;transition:.8s var(--ease);opacity:0;transform:translateY(-40px)}
nav.show{opacity:1;transform:translateY(0)}
nav.scrolled{padding:18px 6%;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-bottom:1px solid var(--border)}
/* --- POSTAVKE ZA PNG LOGO --- */

.logo {
    display: flex;
    align-items: center;
}

.brand-logo {
    height: 50px; 
    width: auto;
    display: block;
    object-fit: contain;
    
    transform: scale(1.3);
    transform-origin: left center; 
    
    filter: invert(1); 
    transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}

[data-theme="dark"] .brand-logo {
    filter: none;
}
.nav-links{display:flex;gap:50px;list-style:none}
.nav-links a{text-decoration:none;color:var(--text-muted);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:4px;transition:.4s;padding:8px 16px;border-radius:20px}
.nav-links a:hover,.nav-links a.active{color:var(--accent-inv);background:var(--accent)}
.nav-right{display:flex;gap:12px;align-items:center}
.nav-cta{display:flex;gap:12px}
.nav-cta a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;font-size:1.1rem;color:var(--text);text-decoration:none;border:1px solid var(--border);border-radius:50%;transition:.4s var(--ease)}
.nav-cta a:hover{background:var(--accent);color:var(--accent-inv);border-color:var(--accent)}
#theme-toggle{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:transparent;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text);transition:.4s var(--ease)}
#theme-toggle:hover{background:var(--accent);color:var(--accent-inv);border-color:var(--accent)}
.icon-sun{display:none} .icon-moon{display:block}
[data-theme="dark"] .icon-sun{display:block} [data-theme="dark"] .icon-moon{display:none}

/* ===== HAMBURGER ===== */
.hamburger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:transparent;transition:.4s var(--ease)}
.hamburger span{display:block;width:18px;height:1.5px;background:var(--text);transition:.4s var(--ease);transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.hamburger:hover{background:var(--accent)} .hamburger:hover span{background:var(--accent-inv)}

/* ===== MOBILE MENU ===== */
#mobile-menu{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 95%,transparent);backdrop-filter:blur(15px);z-index:1999;flex-direction:column;align-items:center;justify-content:center;gap:45px;display:flex;opacity:0;visibility:hidden;transform:scale(1.05);transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;pointer-events:none}
#mobile-menu.open{opacity:1;visibility:visible;transform:scale(1);pointer-events:auto}
#mobile-menu a{font-family:var(--font-d);font-size:clamp(2.5rem,10vw,4.5rem);font-weight:800;color:var(--text);text-decoration:none;letter-spacing:-2px;transition:.3s}
#mobile-menu a:hover{opacity:.4}
.mobile-socials{display:flex;gap:16px;margin-top:10px}
.mobile-socials a{width:50px;height:50px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--text);text-decoration:none;transition:.4s}
.mobile-socials a:hover{background:var(--accent);color:var(--accent-inv);border-color:var(--accent)}

/* ===== HERO ===== */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:160px 6% 140px;position:relative;overflow:hidden}
.hero-h{opacity:0;transform:translateY(70px);transition:2.2s var(--ease);width:100%}
.hero.show .hero-h{opacity:1;transform:translateY(0)}
.hero-title{position:relative;display:inline-block;margin-bottom:50px;line-height:1}
.hero-the{font-family:var(--font-d);font-size:clamp(1rem,2.8vw,2.6rem);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);display:block;text-align:left;padding-left:.15em;margin-bottom:-.1em}
.hero-code{font-family:var(--font-d);font-size:clamp(5rem,18vw,12rem);font-weight:800;letter-spacing:-.05em;line-height:.85;color:var(--text);display:block;background:linear-gradient(180deg,var(--text) 40%,var(--text-muted) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-agency{font-family:var(--font-d);font-size:clamp(1rem,2.8vw,2.6rem);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);display:block;text-align:right;padding-right:.15em;margin-top:-.1em}
.hero-sub{font-size:clamp(1.25rem, 2vw, 1.6rem);color:var(--text-muted);max-width:700px;line-height:1.8;margin:0 auto 60px}
.hero-stats{display:flex;gap:55px;border-top:1px solid var(--border);padding-top:45px;justify-content:center;flex-wrap:wrap}
.hero-stat{text-align:center}
.hero-stat-num{font-family:var(--font-d);font-size:2rem;font-weight:800;color:var(--text);letter-spacing:-2px}
.hero-stat-label{font-size:.62rem;text-transform:uppercase;letter-spacing:4px;color:var(--text-muted);font-weight:700;margin-top:6px}
.scroll-hint{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:55px;opacity:.4}
.scroll-hint span{font-size:.55rem;text-transform:uppercase;letter-spacing:6px;color:var(--text-muted);font-weight:800}
.scroll-line{width:1px;height:60px;position:relative;overflow:hidden;background:var(--border)}
.scroll-line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent,var(--text) 50%,transparent);animation:dripDown 1.8s ease-in-out infinite}
@keyframes dripDown{0%{top:-100%}100%{top:200%}}

/* ===== SECTIONS ===== */
section{padding:160px 6%;max-width:1800px;margin:0 auto;width:100%}
.section-header{margin-bottom:100px}
.label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:6px;color:var(--text-muted);margin-bottom:30px;display:flex;align-items:center;gap:20px}
.label::before{content:'';height:1px;background:var(--border);width:0;transition:width 1.2s var(--ease)}
.label.aos-animate::before{width:50px}
.title{font-family:var(--font-d);font-size:clamp(2.5rem,5.5vw,4.8rem);line-height:1.05;font-weight:700;color:var(--text)}

/* ===== CARDS ===== */
#cards-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(430px,auto);gap:22px}
.card{background:var(--bg-alt);border:1px solid var(--border);border-radius:38px;padding:80px 55px;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:background .6s var(--ease),border-color .6s var(--ease),transform .6s var(--ease)}
.card.wide{grid-column:span 2}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(600px circle at var(--mouse-x, 0) var(--mouse-y, 0),rgba(128,128,128,.1),transparent 40%);pointer-events:none;z-index:1;transition:opacity .5s}
.card:hover::before{opacity:0}
.card-content{position:relative;z-index:5}
.card-icon-wrap{width:70px;height:70px;border-radius:20px;background:rgba(128,128,128,.08);display:flex;align-items:center;justify-content:center;margin-bottom:50px;transition:background .6s var(--ease)}
.card:hover .card-icon-wrap{background:rgba(128,128,128,.15)}
.card i{font-size:2rem;color:var(--text);display:block;transition:.6s var(--ease)}
.card h3{font-family:var(--font-d);font-size:clamp(1.8rem,2.5vw,2.8rem);margin-bottom:28px;font-weight:700;line-height:1.1;color:var(--text);transition:.6s var(--ease)}
.card p{color:var(--text-muted);font-size:1.1rem;line-height:1.85;transition:.6s var(--ease)}

/* Dark mode safe hover states */
.card:hover { transform: translateY(-10px); background: var(--accent); border-color: var(--accent); }
.card:hover i, .card:hover h3 { color: var(--accent-inv); }
.card:hover p { color: color-mix(in srgb, var(--accent-inv) 70%, transparent); }

.card-num{position:absolute;bottom:45px;right:55px;font-family:var(--font-m);font-size:5rem;font-weight:900;color:rgba(128,128,128,.06);line-height:1;letter-spacing:-4px;transition:.6s var(--ease);pointer-events:none;z-index:2}
.card:hover .card-num{color:rgba(128,128,128,.15)}

/* ===== MARQUEE (LOGOS) ===== */
.marquee-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.marquee-label {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    margin-bottom: 50px;
}

.marquee {
    display: flex;
    width: 100%;
    overflow: hidden;
    perspective: 1000px;
}

.m-track {
    display: flex;
    align-items: center;
    flex-shrink: 0; 
    width: max-content; 
    will-change: transform;
}

/* POJEDINAČNI LOGO KONTEJNER */
/* KONTEJNER LOGOTIPA */
.logo-item {
    flex-shrink: 0; 
    padding: 0 45px; /* Razmak između logotipa */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 100px; 
    width: 240px; 
}

/* SAMA SLIKA LOGOTIPA */
.logo-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; 
    opacity: 1;
    filter: contrast(1.1) brightness(0.9); 
    transition: all 0.4s var(--ease);
    will-change: filter, transform;
}

/* HOVER EFEKT */
.logo-item:hover img {
    transform: scale(1.15); 
    filter: contrast(1.2) brightness(1);
}

/* DARK MODE */
[data-theme="dark"] .logo-item img {
    filter: invert(1) brightness(2);
    opacity: 0.9;
}

[data-theme="dark"] .logo-item:hover img {
    filter: invert(1) brightness(2.5);
    opacity: 1;
}

/* Crta između logotipa */
.m-divider {
    width: 1px;
    height: 25px;
    background: var(--border);
    flex-shrink: 0;
    opacity: 0.3;
}

/* ===== STATS ===== */
.stats-container{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;margin-top:60px}
.stat-box{background:var(--bg-alt);border:1px solid var(--border);border-radius:38px;padding:90px 55px;grid-column:span 6;text-align:center;position:relative;overflow:hidden;transition:.6s var(--ease)}
.stat-box.full{grid-column:span 12;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:80px 90px}
.stat-num{font-family:var(--font-m);font-size:clamp(5rem,13vw,14rem);font-weight:900;line-height:.8;letter-spacing:-8px;background:linear-gradient(180deg,var(--text) 50%,var(--text-muted) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:.6s var(--ease)}
.stat-label{font-size:.9rem;font-weight:800;text-transform:uppercase;letter-spacing:5px;color:var(--text-muted);margin-bottom:12px;display:block;transition:.6s}

/* Dark mode safe stat hovers */
.stat-box:hover { transform: translateY(-8px); background: var(--accent); border-color: var(--accent); }
.stat-box:hover .stat-num{ background:none; -webkit-text-fill-color:var(--accent-inv); }
.stat-box:hover .stat-label, .stat-box:hover p { color: color-mix(in srgb, var(--accent-inv) 65%, transparent); }
.stat-box:hover h4 { color: var(--accent-inv) !important; }
.stat-label,.stat-box p,.stat-box h4{transition:.6s var(--ease)}

/* ===== ABOUT ===== */
#about{background:var(--bg)}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:120px;align-items:center}
.about-left{position:relative; display:flex; justify-content:center; align-items:center; min-height: 250px;}

/* TVOJ ORIGINALNI DIZAJN */
.about-big-num {
    font-family: var(--font-m);
    font-size: clamp(14rem, 25vw, 24rem);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -4px;
    
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px var(--text-muted);
    
    user-select: none;
    pointer-events: none;
    margin-left: 10px;
}

/* Bedž */
.about-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:170px;height:170px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:0 20px 40px rgba(0,0,0,0.15); animation: floatBadge 6s ease-in-out infinite;}
.about-badge span{font-family:var(--font-d);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:3px;color:var(--accent-inv);line-height:1.6;}

@keyframes floatBadge {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -58%); }
}

/* Originalni stilovi za tekst s desne strane */
.about-tagline{font-family:var(--font-d);font-size:clamp(2rem,3.5vw,3.2rem);font-weight:700;color:var(--text);line-height:1.15;margin-bottom:40px; letter-spacing:-1px;}
.about-tagline em{font-style:normal;color:var(--text-muted)}
.about-body{font-size:1.1rem;color:var(--text-muted);line-height:1.9;margin-bottom:50px}
.pillar{display:flex;align-items:center;gap:25px;padding:22px 0;border-bottom:1px solid var(--border);font-family:var(--font-d);font-weight:700;font-size:1.1rem;color:var(--text);transition:.4s}
.pillar:first-child{border-top:1px solid var(--border)}
.pillar-num{font-family:var(--font-m);font-size:.75rem;font-weight:900;color:var(--text-muted);min-width:30px}
.pillar:hover{color:var(--text-muted);padding-left:10px}

/* ===== PORTAL ===== */
.portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:90px}
.p-btn{height:520px;background:var(--bg-alt);border:1px solid var(--border);border-radius:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;overflow:hidden;transition:.8s var(--ease);position:relative}
.p-btn-icon{width:80px;height:80px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:40px;position:relative;z-index:2;transition:.8s var(--ease);color:var(--text)!important}
.p-btn-icon i{color:var(--text);transition:.8s var(--ease)}
.p-btn h2{font-family:var(--font-d);font-size:clamp(1.8rem,2.5vw,2.5rem);color:var(--text);z-index:2;transition:.8s var(--ease);text-align:center;font-weight:800;letter-spacing:-1px}
.p-btn p{color:var(--text-muted);font-weight:700;letter-spacing:5px;text-transform:uppercase;margin-top:20px;z-index:2;font-size:.75rem;transition:.8s var(--ease)}
.p-btn::before{content:'';position:absolute;inset:0;background:var(--accent);transform:translateY(100%);transition:.8s var(--ease);z-index:1}

/* Dark mode safe button hovers */
.p-btn:hover{transform:translateY(-12px);border-color:var(--accent)}
.p-btn:hover::before{transform:translateY(0)}
.p-btn:hover h2, .p-btn:hover .p-btn-icon{color:var(--accent-inv)!important;border-color:color-mix(in srgb, var(--accent-inv) 20%, transparent)}
.p-btn:hover .p-btn-icon i{color:var(--accent-inv)!important}
.p-btn:hover p{color:color-mix(in srgb, var(--accent-inv) 60%, transparent)}

/* ===== FORMS ===== */
.form-overlay{position:fixed;inset:0;background:var(--bg-alt);z-index:10000000;padding:120px 8%;overflow-y:auto;transform:translateY(100%);transition:transform .9s var(--ease);display:flex;flex-direction:column;visibility: hidden;pointer-events: none;}
.form-overlay.open{transform:translateY(0);visibility: visible; pointer-events: auto;}
.form-barcode{display:flex;gap:4px;height:60px;margin-bottom:60px;opacity:.15}
.form-barcode .bar{background:var(--text)}
.x-close{position:fixed;top:45px;right:6%;color:var(--text);font-weight:800;text-decoration:none;z-index:10000001;border:1px solid var(--border);padding:16px 38px;border-radius:60px;background:rgba(128,128,128,.04);transition:.4s var(--ease);text-transform:uppercase;letter-spacing:2px;font-size:.75rem}
.x-close:hover{background:var(--accent);color:var(--accent-inv);border-color:var(--accent)}
.form-container{max-width:900px;margin:0 auto;width:100%;padding-bottom:120px}
.f-input-group{position:relative;margin-bottom:65px;width:100%}
.f-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border-s);padding:32px 0;color:var(--text);font-size:clamp(1.3rem,2.5vw,2.2rem);font-family:inherit;outline:none;transition:border-color .5s;}
.f-input::placeholder{color:color-mix(in srgb, var(--text) 30%, transparent)}
.f-input:focus{border-bottom-color:var(--text)}
.f-label{position:absolute;top:0;left:0;font-size:.7rem;text-transform:uppercase;letter-spacing:4px;color:var(--text-muted);font-weight:700}
.f-submit{background:var(--accent);color:var(--accent-inv);border:none;padding:26px 80px;border-radius:100px;font-weight:900;text-transform:uppercase;letter-spacing:3px;font-size:.9rem;transition:.4s var(--ease);display:inline-flex;align-items:center;gap:15px;}
.f-submit:hover{transform:scale(1.04);opacity:.85}
.f-submit i{font-size:.85rem}

/* Form success */
.form-success{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 0;min-height:400px}
.form-success.show{display:flex}
.form-success-icon{width:100px;height:100px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--accent-inv);margin-bottom:40px;animation:successPop .6s var(--ease)}
@keyframes successPop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.form-success h3{font-family:var(--font-d);font-size:clamp(2rem,4vw,3.5rem);font-weight:800;color:var(--text);margin-bottom:20px;letter-spacing:-1px}
.form-success p{color:var(--text-muted);font-size:1.1rem;line-height:1.7;max-width:450px}

/* ===== FOOTER ===== */
footer{padding:160px 6% 80px;background:var(--bg-alt);border-top:1px solid var(--border);position:relative;overflow:hidden;transition:background .5s}
.f-watermark{position:absolute;bottom:-6vw;left:50%;transform:translateX(-50%);font-family:var(--font-d);font-size:28vw;font-weight:900;color:var(--border);white-space:nowrap;pointer-events:none;user-select:none;letter-spacing:-5px}
.f-grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1.5fr;gap:80px;position:relative;z-index:10}
.f-col h4{text-transform:uppercase;letter-spacing:5px;color:var(--text-muted);margin-bottom:40px;font-size:.75rem;font-weight:800}
.f-col a{display:block;color:var(--text);text-decoration:none;margin-bottom:12px;padding:10px 15px;margin-left:-15px;border-radius:10px;transition:.4s var(--ease);font-weight:600;font-size:1.05rem}
.f-col a:hover{transform:translateX(5px);background:var(--accent);color:var(--accent-inv)}
.f-bottom{margin-top:100px;padding-top:35px;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-muted);letter-spacing:2px;position:relative;z-index:10}
.f-bottom a {
    color: inherit;
    text-decoration: none;
    font-weight: 800;
    transition: color .4s var(--ease);
}

.f-bottom a:hover {
    color: var(--text);
}

/* ===== BACK TO TOP ===== */
#back-to-top{
    position:fixed;
    bottom:40px;
    right:40px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--accent);
    color:var(--accent-inv);
    border:none;
    font-size:1.1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
    opacity:0;
    transform:translateY(20px) scale(.8);
    transition:opacity .4s var(--ease),transform .4s var(--ease);
    box-shadow:0 8px 30px rgba(0,0,0,.2);
    
    pointer-events:none;
    touch-action:manipulation;
    cursor:pointer !important;
}

#back-to-top.show{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

#back-to-top:hover{transform:translateY(-4px) scale(1.05)!important}

/* ===== TYPEWRITER ===== */
.typewriter-wrap{display:inline-block;position:relative}
.typewriter-cursor{display:inline-block;width:3px;height:.85em;background:var(--text-muted);margin-left:4px;vertical-align:middle;animation:blink .8s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}


/* ===== COOKIE BANNER ===== */
#cookie-banner{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(120px);z-index:9000;background:var(--bg-alt);border:1px solid var(--border);border-radius:30px;padding:28px 35px;display:flex;align-items:center;gap:30px;max-width:780px;width:calc(100% - 40px);box-shadow:0 20px 60px rgba(0,0,0,.12);transition:transform .7s var(--ease),opacity .7s var(--ease);opacity:0}
#cookie-banner.show{transform:translateX(-50%) translateY(0);opacity:1}
.cookie-text{font-size:.85rem;color:var(--text-muted);line-height:1.6;flex:1}
.cookie-text a{color:var(--text);font-weight:700}
.cookie-text a {
    color: var(--text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: var(--border-s);
    transition: text-decoration-color .4s var(--ease);
}

.cookie-text a:hover {
    text-decoration-color: var(--text);
}
.cookie-btns{display:flex;gap:10px;flex-shrink:0}
.cookie-accept{background:var(--accent);color:var(--accent-inv);border:none;padding:12px 28px;border-radius:30px;font-weight:800;font-size:.75rem;text-transform:uppercase;letter-spacing:2px;transition:.3s var(--ease);}
.cookie-accept:hover{opacity:.8}
.cookie-decline{background:transparent;color:var(--text-muted);border:1px solid var(--border);padding:12px 22px;border-radius:30px;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:2px;transition:.3s var(--ease);}
.cookie-decline:hover{border-color:var(--border-s);color:var(--text)}

/* ===== KARIJERA FORM — TWO-COLUMN LAYOUT ===== */
.form-container--wide { max-width: 1100px; }

.karijera-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 80px;
}


/* Pill toggle buttons */
.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pill-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.pill-group label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 100px;
    border: 1px solid var(--border-s);
    background: transparent;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .25s, border-color .25s, color .25s;
}

.pill-group label:hover { 
    border-color: var(--text); 
    color: var(--text); 
}

.pill-group input[type="radio"]:checked + label {
    background: var(--accent);
    color: var(--accent-inv);
    border-color: var(--accent);
}

/* Gura gumbiće i slike ispod apsolutno pozicioniranih naslova */
.f-input-group:has(.pill-group),
.f-input-group:has(.upload-pair) {
    padding-top: 25px;
}

/* Dual image upload boxes */
.upload-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 45px;
}
.upload-box {
    border: 1px dashed var(--border-s);
    border-radius: 22px;
    padding: 32px 12px 24px;
    text-align: center;
    cursor: pointer;
    background: rgba(128,128,128,.03);
    transition: border-color .25s, background .25s;
    position: relative;
    overflow: hidden;
}
.upload-box:hover { border-color: var(--text); background: rgba(128,128,128,.07); }
.upload-box input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.upload-box i {
    font-size: 1.4rem;
    opacity: .25;
    color: var(--text);
    display: block;
    margin-bottom: 12px;
    transition: opacity .25s;
}
.upload-box:hover i { opacity: .5; }
.upload-box span {
    font-weight: 800;
    letter-spacing: 3px;
    font-size: .62rem;
    color: var(--text-muted);
    display: block;
    text-transform: uppercase;
}
.upload-preview {
    display: none;
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 10px;
}

.upload-box.has-file .upload-preview { display: block; }
.upload-box.has-file i { display: none; }

/* ===== RESPONSIVE ===== */
@media(max-width:1200px){
    #cards-grid{grid-template-columns:1fr 1fr} .card.wide{grid-column:span 2}
    .f-grid{grid-template-columns:1fr 1fr;gap:60px}
    .about-inner{grid-template-columns:1fr;gap:60px}
}
@media(max-width:850px){
    section {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .hero {
        min-height: 85vh;
        padding-top: 140px; 
        padding-bottom: 60px;
    }
    .hero-sub {
        margin-bottom: 30px;
    }
    #cards-grid,.stats-container,.portal-grid,.f-grid,.karijera-grid{grid-template-columns:1fr!important}
    .card.wide,.stat-box.full{grid-column:span 1!important}
    .nav-links,.nav-cta{display:none}
    .hamburger{display:flex}
    #c-dot,#c-outline{display:none!important} *{cursor:auto!important}
    #theme-toggle {
    display: flex !important;
    margin-right: 15px;
    border: 1px solid var(--border);
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
}

.nav-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
}
    /* Fiks za sve tri stat kartice da budu identične na mobitelu */
    .stat-box, .stat-box.full {
        aspect-ratio: 1 / 1 !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 40px 20px !important;
        grid-column: span 1 !important;
        min-height: auto !important;
        gap: 10px;
    }

    .stat-box h4, .stat-label {
        font-size: 0.85rem !important;
        margin-bottom: 10px !important;
    }

    .stat-num { 
        font-size: 4.5rem !important; 
        letter-spacing: -3px !important; 
        line-height: 1 !important;
    }


    .hero-stats{gap:30px}
    #back-to-top{bottom:20px;right:20px;width:46px;height:46px}

    .about-badge { width: 140px; height: 120px; }
    .about-badge span { font-size: 0.6rem; }

    footer {
        padding-bottom: 130px !important;
    }

    /* Povećavamo hit-box linka i stavljamo ga iznad apsolutno svih ostalih elemenata na stranici */
    a[href="politika-privatnosti.html"] {
        position: relative;
        z-index: 99999 !important;
        display: inline-block;
        padding: 15px; 
        margin: -15px; 
    }
    
    #cookie-banner a {
        position: relative;
        z-index: 50;
        display: inline-block;
        padding: 10px;
        margin: -10px;
    }

    /* Vraćamo na 1 stupac i sve centriramo */
    .f-grid {
        grid-template-columns: 1fr !important; 
        gap: 60px !important;
        text-align: center !important;
    }

    /* Svaki stupac pretvaramo u flexbox kako bismo savršeno centrirali sadržaj */
    .f-col {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        grid-column: span 1 !important; 
    }

    /* Centriranje teksta opisa ispod loga */
    .f-col p {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Gumbi i linkovi u sredini */
    .f-col a {
        margin-left: 0 !important;
        padding: 8px 0 !important;
        width: fit-content;
    }

    /* Donji dio s autorskim pravima */
    .f-bottom {
        flex-direction: column; 
        gap: 15px;
        text-align: center;
        align-items: center;
    }

    /* Smanjeni vodeni žig */
    .f-watermark {
        font-size: 45vw !important;
        bottom: -2vw !important;
    }
}

/* Originalni stilovi za tekst s desne strane */
.about-tagline{font-family:var(--font-d);font-size:clamp(2rem,3.5vw,3.2rem);font-weight:700;color:var(--text);line-height:1.15;margin-bottom:40px; letter-spacing:-1px;}
.about-tagline em{font-style:normal;color:var(--text-muted)}
.about-body{font-size:1.1rem;color:var(--text-muted);line-height:1.9;margin-bottom:50px}
.pillar{display:flex;align-items:center;gap:25px;padding:22px 0;border-bottom:1px solid var(--border);font-family:var(--font-d);font-weight:700;font-size:1.1rem;color:var(--text);transition:.4s}
.pillar:first-child{border-top:1px solid var(--border)}
.pillar-num{font-family:var(--font-m);font-size:.75rem;font-weight:900;color:var(--text-muted);min-width:30px}
.pillar:hover{color:var(--text-muted);padding-left:10px}


/* Sprječava skrolanje pozadine kada je meni otvoren */
body.no-scroll {
    overflow: hidden;
    height: 100vh;
}
   
    #cookie-banner{flex-direction:column;gap:20px;text-align:center} .cookie-btns{width:100%;justify-content:center}



@media(max-width:550px){section{padding:100px 5%} .hero-stats{gap:20px}}
/* Sprječava skrolanje pozadine kada je meni otvoren */
body.no-scroll {
    overflow: hidden;
    height: 100vh;
}