@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@400;500;700;800&display=swap');

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.vertical-slider {
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: y mandatory
}

.vertical-slider::-webkit-scrollbar {
    display: none
}

.scroll-item {
    scroll-snap-align: start
}

.card-carousel {
    position: relative;
    overflow: hidden
}

.carousel-track {
    display: flex;
    transition: transform 0.3s ease-in-out
}

.carousel-slide {
    min-width: 100%;
    flex-shrink: 0
}

.card-carousel:hover .carousel-nav {
    opacity: 1
}

.carousel-nav {
    opacity: 0;
    transition: opacity 0.2s ease
}

.gradient-yellow {
    background: linear-gradient(to bottom, #fbc24d, #f9b425)
}

.gradient-primary {
    background: linear-gradient(135deg, #0050d4, #7b9cff);
}

/* Ambient Shadow - DESIGN.md Section 4 */
.ambient-shadow {
    box-shadow: 0 32px 64px -12px rgba(40, 43, 81, 0.06);
}

/* Glassmorphism - DESIGN.md Section 2 */
.glass-effect {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Surface Tiers - DESIGN.md Section 2 */
.bg-surface { background-color: #f8f5ff; }
.bg-surface-low { background-color: #f1efff; }
.bg-surface-lowest { background-color: #ffffff; }

.hero-bg {
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuCgbgTPVhhSylqKDZBdb7XmoneWFnylZrCQ-1POc6NmHcX2X3UEg0ThdAO0CXiFJB54eDX0wHqdBB-nDYy2QyEylv1sC-b0zIFsqWaYx-2TKacJf6f3OCWT-QdbvZwoF5vwDMkg0F_klwygguAWjrbm5X0mXc_lrB8cdKVAmWosKGqPEV8g48flMQSyrq7p19bq3VilifA4syQdUEkJVLVCoYAVVZGjhmFummI_oWxdWNMcOUijlseuxJyXKAbR2kF2zzSxmHUdVOM8);
    background-size: cover;
    background-position: center
}