/* RESET & BASE STYLES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* UTILITIES */
.showcase-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 10;
}

/* SECTION LAYOUT */
.showcase-section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
   
}



/* BACKGROUND DECORATION (BLOBS) */
.bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.5;
}
.blob-1 {
    top: -10%;
    right: -5%;
    width: 40vw;
    height: 40vw;
    background-color: #eff6ff; /* blue-50 */
}
.blob-2 {
    bottom: -10%;
    left: -5%;
    width: 40vw;
    height: 40vw;
    background-color: #eef2ff; /* indigo-50 */
}


.bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 49vw;
    font-weight: 800;
    color: #f1f5f9; /* slate-100 */
    z-index: 0;
    user-select: none;
    pointer-events: none;
    line-height: 1;
}

@media (max-width: 768px) {
    .bg-text {
       top: 52%;
        font-size: 78vw;
    }
    .stats-group{
        margin-top: 30px;
    }
    .partners{
        margin-top: 30px;
    }
    .stats-footer{
        margin-top: 70px;
    }
    .header-content{
        margin-bottom: 70px;
    }
}

/* HEADER CONTENT */
.header-content {
    text-align: center;
    position: relative;
    z-index: 20;
    margin-top: 67px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.headline-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background-color: #0f172a;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
}

.headline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #93b5fd;
    box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.12);
}

.badge {
    display: inline-block;
    padding: 6px 12px;
    background-color: #eff6ff;
    border: 1px solid #dbeafe;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
    margin-bottom: 16px;
}

.showcase-section h1,
.showcase-section h2 {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
   
    color: #0f172a;
}

.header-content h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

@media (max-width: 768px) {
    .showcase-section h1,
    .showcase-section h2 {
        font-size: 2.25rem;
        line-height: 1.3;
    }
    
}

.highlight {
    color: #2563eb; /* blue-600 */
}

.subtitle {
    font-size: 1.125rem;
    color: #64748b; /* slate-500 */
    max-width: 600px;
    margin: 0 auto;
    font-weight: 500;
    font-family: 'Work Sans', sans-serif;
}

/* MAIN VISUAL AREA */
.visual-area {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin-top: 40px;

    aspect-ratio: 16/9; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-image {
    position: relative;
    z-index: 10;
    width: 80%;
    max-width: 1700px;
    height: auto;
    filter: drop-shadow(0 20px 25px rgba(0,0,0,0.15));
}

@media (max-width: 768px) {
  .main-image{
    width: 89%;
    filter: none;
  }
}

@media (min-width: 768px) {
    .visual-area {
        aspect-ratio: 21/9;
    }
}

/* FLOATING ANNOTATION CARDS */
.annotation-wrapper {
    position: absolute;
    display: none; /* Hidden on mobile */
    align-items: center;
    gap: 16px;
    z-index: 20;
}

@media (min-width: 768px) {
    .annotation-wrapper {
        display: flex;
    }
}

.card {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);
    border: 1px solid #f1f5f9;
    max-width: 260px;
}

.icon-box {
    width: 32px;
    height: 32px;
    background-color: #eff6ff;
    color: #2563eb;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.card h4 {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
   
}

.card p {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    font-family: 'Work Sans', sans-serif;
}

/* CONNECTORS (Lines & Dots) */
.connector {
    display: flex;
    align-items: center;
}

.line {
    height: 2px;
    background-color: #e2e8f0;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: #93b5fd;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #ffffff, 0 4px 6px rgba(0,0,0,0.1);
}

/* POSITIONING SPECIFIC CARDS */

/* Top Left */
.pos-tl {
    top: 5%;
    left: 5%;
    flex-direction: row;
}
.pos-tl .line { width: 48px; }

/* Bottom Left */
.pos-bl {
    bottom: 20%;
    left: 2%;
    flex-direction: row;
}
.pos-bl .line { width: 32px; }

/* Top Right */
.pos-tr {
    top: 15%;
    right: 5%;
    flex-direction: row-reverse;
}
.pos-tr .line { width: 64px; }

/* Bottom Right */
.pos-br {
    bottom: 10%;
    right: 8%;
    flex-direction: row-reverse;
}
.pos-br .line { width: 40px; }


/* FOOTER STATS */
.stats-footer {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 20px;
   
    border-top: 1px solid #f1f5f9;
}

@media (min-width: 768px) {
    .stats-footer {
        grid-template-columns: 1fr 1fr;
        align-items: flex-end;
     
    }
}

.stats-group {
    display: flex;
    gap: 60px;
    justify-content: center;
}

@media (min-width: 768px) {
    .stats-group {
        justify-content: flex-start;
    }
}

.stat-item h3 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-item span {
    color: #2563eb;
}

.stat-item p {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 600;
}

.partners {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

@media (min-width: 768px) {
    .partners {
        align-items: flex-end;
    }
    
}

.partners p {
    font-size: 0.875rem;
    color: #94a3b8;
    font-weight: 500;
}

.logos {
    display: flex;
    gap: 32px;
    opacity: 0.4;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}

.logos:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* SVGs */
.icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.logo-svg {
    height: 28px;
    width: auto;
    fill: #0f172a;
}

/* NOVA HERO SEKCIJA */
.hero-bibic {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 12vw, 132px) 24px clamp(220px, 38vw, 340px);
    background: #fbfafe;
}

@media (min-width: 768px) {
    .hero-bibic {
        min-height: 100vh;
    }
}

.hero-bibic__bg-word {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(160px, 32vw, 520px);
    font-weight: 800;
    color: #f0f3f8;
    letter-spacing: 0.08em;
    z-index: 0;
    user-select: none;
    pointer-events: none;
    line-height: 0.85;
}

.hero-bibic__glow {
    position: absolute;
    width: 720px;
    height: 720px;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(110, 156, 255, 0.22) 0%, rgba(110, 156, 255, 0) 55%);
    filter: blur(40px);
    opacity: 0.7;
    z-index: 0;
}

.hero-bibic__content {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto clamp(32px, 6vw, 56px);
    text-align: center;
    color: #0f172a;
}

.hero-bibic__lead {
    font-size: clamp(15px, 1.1vw, 18px);
    color: #49546a;
    font-weight: 600;
    margin: 0 0 10px;
}

.hero-bibic h1 {
    font-size: clamp(34px, 4.2vw, 54px);
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}

.hero-bibic h1 .no-break {
    white-space: nowrap;
}

.hero-bibic__subtitle {
    margin: 0 auto;
    max-width: 640px;
    font-size: clamp(16px, 1.6vw, 18px);
    color: #4b5563;
    line-height: 1.6;
    font-weight: 600;
}

.hero-bibic__image-frame {
    position: absolute;
    left: 50%;
    bottom: clamp(-28px, -4vw, -6px);
    transform: translateX(-50%);
    width: min(1500px, 120vw);
    max-width: none;
    display: flex;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.hero-bibic__image-frame img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 22px 48px rgba(15, 23, 42, 0.22));
}

@media (max-width: 1024px) {
    .hero-bibic {
        padding: clamp(60px, 10vw, 110px) 18px clamp(200px, 34vw, 300px);
    }

    .hero-bibic__bg-word {
        font-size: clamp(180px, 45vw, 360px);
        transform: translate(35%, -10%);
    }

    .hero-bibic__image-frame {
        width: min(1300px, 125vw);
        bottom: clamp(-16px, -3vw, 0px);
    }
}

@media (max-width: 640px) {
    .hero-bibic__bg-word {
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: clamp(140px, 52vw, 420px);
    }

    .hero-bibic__image-frame {
       width: 103vw;
       left: 48.9%;
       bottom: -10px;
    }
}


@media (max-width: 768px) {
    .logos {
        gap: 10px;
    }
    
}

/* TRUST BADGES */
.trust-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    flex-wrap: wrap;
    margin-top: 41px;
    padding: 0px 0px 68px 0px;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.6s forwards;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 255, 0.85));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px;
    border: 1px solid rgba(88, 141, 250, 0.15);
    box-shadow: 0 4px 15px -3px rgba(88, 141, 250, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.trust-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(88, 141, 250, 0.15);
    border-color: rgba(88, 141, 250, 0.3);
}

.trust-badge svg {
    width: 18px;
    height: 18px;
    color: #588DFA;
    flex-shrink: 0;
}

.trust-badge span {
    font-size: clamp(0.8rem, 1.5vw, 0.875rem);
    font-weight: 500;
    color: #4B5463;
    letter-spacing: 0.01em;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .trust-badges {
        gap: 0.75rem;
        margin-top: 2.5rem;
        padding: 1rem;
    }
    
    .trust-badge {
        padding: 0.625rem 1rem;
        gap: 0.5rem;
    }
    
    .trust-badge svg {
        width: 16px;
        height: 16px;
    }
    
    .trust-badge span {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .trust-badges {
        gap: 0.5rem;
    }
    
    .trust-badge {
        padding: 0.5rem 0.875rem;
    }
}