/* Swiper Slide Styles */
html, body {
    position: relative;
    height: 100%;
}
body {
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    margin: 0;
    padding: 0;
}
.swiper {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    /* Center slide content vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    overflow-y: auto; /* Allow scrolling within slide if content is too tall */
}
/* Hide default scrollbar in slides */
.swiper-slide::-webkit-scrollbar {
    display: none;
}
.swiper-slide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.swiper-pagination-bullet {
    background: #fff;
    opacity: 0.2;
}
.swiper-pagination-bullet-active {
    background: #06b6d4; /* tech color */
    opacity: 1;
}

/* Ensure sections inside slides take full width/height appropriately */
.swiper-slide > section {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 80px; /* Padding for fixed nav */
    padding-bottom: 40px;
}

/* Chat Modal Styles */
.ai-chat-modal { 
    position: fixed; 
    bottom: 100px; 
    right: 30px; 
    width: 380px; 
    height: 600px; 
    background: rgba(10, 10, 10, 0.95); 
    backdrop-filter: blur(20px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 24px; 
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); 
    display: flex; 
    flex-direction: column; 
    z-index: 2500; 
    opacity: 0; 
    pointer-events: none; 
    transform: translateY(20px); 
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}

.ai-chat-modal.active { 
    opacity: 1; 
    pointer-events: auto; 
    transform: translateY(0); 
}

/* Chat Bubbles */
.chat-bubble { 
    padding: 12px 16px; 
    border-radius: 16px; 
    font-size: 14px; 
    line-height: 1.6; 
    max-width: 85%; 
    margin-bottom: 12px; 
}

.chat-bubble.user { 
    background: #333; 
    color: white; 
    align-self: flex-end; 
    border-bottom-right-radius: 4px; 
}

.chat-bubble.ai { 
    background: rgba(255, 255, 255, 0.1); 
    color: #e5e5e5; 
    align-self: flex-start; 
    border-bottom-left-radius: 4px; 
}

.chat-bubble.ai strong { color: #00E5FF; }
.chat-bubble.ai ul { list-style-type: disc; margin-left: 1.5rem; margin-top: 0.5rem; }
.chat-bubble.ai li { margin-bottom: 0.25rem; }

/* FAB Button */
.fab-btn { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    width: 64px; 
    height: 64px; 
    border-radius: 50%; 
    background: linear-gradient(135deg, #00E5FF, #0052CC); 
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4); 
    z-index: 2600; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    transition: transform 0.3s ease; 
}

.fab-btn:hover { transform: scale(1.1); }

/* Scrollbar inside chat */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* 3D Transform Utilities */
.perspective-1000 { perspective: 1000px; }
.transform-style-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }

/* Hide Scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Global Styles */
body { background-color: #020617; color: #f8fafc; overflow-x: hidden; scroll-behavior: smooth; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #06b6d4; }

/* Components */
.glass-panel {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}
.glass-panel:hover {
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(15, 23, 42, 0.8);
    transform: translateY(-5px);
}

.section-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.mono-tag {
    font-family: 'Azeret Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #06b6d4;
    margin-bottom: 0.5rem;
    display: block;
}

/* Animations */
.fade-up { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Funnel Chart Styles */
.funnel-layer {
    position: relative;
    margin: 0 auto;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.3s ease;
}
.funnel-layer:hover {
    transform: scale(1.02);
    filter: brightness(1.2);
}

/* Canvas Background */
canvas#bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.2; }