/* landing_page_v2/css/style.css */

/* Custom styles matching circlan_v2 aesthetic */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-nav {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.main-container-responsive {
    transition: margin-left 0.3s ease;
}

.btn-scale { transition: transform 0.1s ease-in-out; }
.btn-scale:active { transform: scale(0.9); }

/* Carousel Dots */
.dot-active {
    background-color: white !important;
    width: 2rem !important; /* w-8 equivalent */
}

/* Animations */
.animate-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

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

.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 640px) {
    .bento-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 200px);
    }
}