body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
h1, h2, h3, h4 { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; }
html { scroll-behavior: smooth; }

/* --- Skrolbar (suptilno, brend boje) --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #adc5eb; border-radius: 999px; border: 2px solid #f1f5f9; }
::-webkit-scrollbar-thumb:hover { background: #7fa3de; }

/* --- Selekcija teksta u brend boji --- */
::selection { background: #bdedb5; color: #172f60; }

/* --- Dugmad --- */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.9rem; background: linear-gradient(135deg, #22468f 0%, #1c3a78 100%); color: #fff;
    padding: 0.8rem 1.75rem; font-weight: 600; font-size: 0.925rem;
    box-shadow: 0 10px 25px -8px rgba(23,47,96,0.45);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(23,47,96,0.55); filter: brightness(1.06); }
.btn-primary:active { transform: translateY(0); }

.btn-outline {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.9rem; border: 2px solid #22468f; color: #22468f;
    padding: 0.8rem 1.75rem; font-weight: 600; font-size: 0.925rem;
    transition: background-color .2s ease, transform .2s ease, color .2s ease;
}
.btn-outline:hover { background-color: #22468f; color: #fff; transform: translateY(-2px); }

/* --- Kartice --- */
.card {
    border-radius: 1.1rem; border: 1px solid #eef1f6; background: #fff;
    padding: 1.6rem; box-shadow: 0 4px 16px -8px rgba(23,47,96,0.12);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -14px rgba(23,47,96,0.28);
    border-color: #d6e2f5;
}

/* --- Naslovi sekcija sa akcentnom linijom --- */
.section-title { font-size: 2rem; font-weight: 700; color: #172f60; position: relative; }
@media (min-width: 768px) { .section-title { font-size: 2.5rem; } }
.section-title::after {
    content: ''; display: block; width: 56px; height: 4px; border-radius: 999px;
    margin-top: 0.85rem; background: linear-gradient(90deg, #4bb43d, #22468f);
}
.section-title.text-center::after { margin-left: auto; margin-right: auto; }

/* --- Eyebrow bedž (mala oznaka iznad naslova) --- */
.eyebrow {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.35rem 0.9rem; border-radius: 999px;
}

/* --- Linkovi sa animiranom podvlakom --- */
.link-underline { position: relative; }
.link-underline::after {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
    background: currentColor; transition: width .25s ease;
}
.link-underline:hover::after { width: 100%; }

/* --- Ikonica u kružiću (za "Zašto mi", kontakt info, itd) --- */
.icon-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.25rem; height: 3.25rem; border-radius: 1rem;
    background: linear-gradient(135deg, #eef3fb, #d6e2f5);
    color: #22468f; box-shadow: inset 0 0 0 1px rgba(34,70,143,0.08);
}
.icon-badge.accent {
    background: linear-gradient(135deg, #f1fbf0, #dff6db);
    color: #399430;
}

/* --- Blaga animacija ulaska (bez JS-a, pokreće se pri učitavanju) --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp .6s ease both; }
.fade-in-1 { animation-delay: .05s; }
.fade-in-2 { animation-delay: .12s; }
.fade-in-3 { animation-delay: .19s; }
.fade-in-4 { animation-delay: .26s; }
.fade-in-5 { animation-delay: .33s; }
.fade-in-6 { animation-delay: .40s; }

/* --- Forme --- */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea, select {
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* --- Dekorativne "blob" pozadine za hero sekcije --- */
.decor-blob {
    position: absolute; border-radius: 999px; filter: blur(60px);
    pointer-events: none;
}

/* ============================================================
   OPTIČKA TEMA - dekorativni elementi nadahnuti optičkim vlaknima
   ============================================================ */

/* Suptilna teksturirana pozadina (nalik mreži konektora) na svetlim sekcijama */
body {
    background-image: radial-gradient(circle, rgba(34,70,143,0.06) 1px, transparent 1px);
    background-size: 26px 26px;
}

/* --- Kontejner za animirane "optičke" linije u hero sekcijama --- */
.fiber-lines { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fiber-lines svg { width: 100%; height: 100%; display: block; }
.fiber-path { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 1.4; }
.fiber-path.accent { stroke: rgba(107,203,93,0.22); }
.fiber-pulse {
    fill: #93df87;
    filter: drop-shadow(0 0 4px #6bcb5d) drop-shadow(0 0 10px #6bcb5d);
}
@supports (offset-path: path("M0 0")) {
    .fiber-pulse-1 { offset-path: path('M -50 60 C 150 20, 350 140, 650 40 S 950 100, 1250 60'); animation: fiberTravel 7s linear infinite; }
    .fiber-pulse-2 { offset-path: path('M -50 160 C 200 220, 400 60, 700 180 S 1000 40, 1250 160'); animation: fiberTravel 9s linear infinite reverse; animation-delay: 1.5s; }
    .fiber-pulse-3 { offset-path: path('M -50 110 C 250 60, 450 190, 750 100 S 1050 160, 1250 110'); animation: fiberTravel 10s linear infinite; animation-delay: 3s; }
}
@keyframes fiberTravel { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* --- Male "svetlucave" tačke (fallback + dodatna atmosfera) --- */
.fiber-dot {
    position: absolute; width: 6px; height: 6px; border-radius: 999px;
    background: #93df87; box-shadow: 0 0 10px 2px rgba(147,223,135,0.8);
    animation: dotPulse 3.2s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { opacity: .2; transform: scale(.7); }
    50% { opacity: 1; transform: scale(1.35); }
}

/* --- Sjaj oko ikonica (halo efekat, nalik svetlosti kroz vlakno) --- */
.icon-badge { position: relative; z-index: 0; }
.icon-badge::before {
    content: ''; position: absolute; inset: -6px; border-radius: inherit;
    background: inherit; opacity: .45; filter: blur(10px); z-index: -1;
}

/* --- Prelivanje svetla preko dugmadi pri hover-u --- */
.btn-primary, .btn-outline { position: relative; overflow: hidden; }
.btn-primary::after, .btn-outline::after {
    content: ''; position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg); transition: left .65s ease;
}
.btn-primary:hover::after, .btn-outline:hover::after { left: 130%; }

/* --- Akcentna linija koja "uleti" na vrh kartice pri hover-u --- */
.card { position: relative; overflow: hidden; }
.card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #4bb43d, #22468f, #4bb43d);
    background-size: 200% 100%;
    transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.card:hover::before { transform: scaleX(1); animation: shimmer 2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* --- Staklasti ("glass") efekat za bedž iznad hero naslova --- */
.glass-badge {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* --- Konektor-stil bullet tačka (za specifikacije/liste) --- */
.connector-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.1rem; height: 1.1rem; border-radius: 999px; flex-shrink: 0;
    background: radial-gradient(circle, #93df87, #4bb43d);
    box-shadow: 0 0 0 3px rgba(75,180,61,0.15);
}