:root {
    --clay-shadow: 0 20px 40px -15px rgba(0,0,0,0.1), inset 0 -2px 10px rgba(255,255,255,0.5);
    --soft-purple: #f3f0ff;
}

* {
    word-break: keep-all;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.clay-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 40px;
    box-shadow: var(--clay-shadow);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.clay-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.15);
}

.floating-element {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.scroll-indicator {
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.soft-gradient-peach { background: linear-gradient(135deg, #fff5f2 0%, #ffe8e0 100%); }
.soft-gradient-yellow { background: linear-gradient(135deg, #fffcf0 0%, #fff4cc 100%); }
.soft-gradient-teal { background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%); }

.hand-drawn-font {
    font-family: 'Hanken Grotesk', sans-serif;
    font-style: italic;
    opacity: 0.7;
}

.use-case-card.active {
    transform: scale(1.02);
    z-index: 10;
}

.carousel-container {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
}
.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}
.carousel-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}