:root {
    --warm-white: #FAF7F2;
    --clay-blue: #D6E0F5;
    --clay-blue-dark: #BCCBEA;
    --clay-shadow: rgba(180, 198, 239, 0.5);
    /* New Variables for FABs */
    --clay-green: #25D366;
    --clay-red: #EF4444;
}

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background-color: var(--warm-white);
}

h1, h2, h3, .playfair { 
    font-family: 'Playfair Display', serif; 
}

/* Pure Claymorphism - Opaque & Volumetric */
.clay-card {
    background-color: white;
    border-radius: 48px;
    /* Outer shadow for elevation + Inner shadows for the "clay" volume effect */
    box-shadow: 
        20px 20px 40px var(--clay-shadow),
        inset -12px -12px 20px var(--clay-blue),
        inset 12px 12px 20px rgba(255, 255, 255, 0.9);                                                    
    border: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.clay-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        30px 30px 50px var(--clay-shadow),
        inset -8px -8px 15px var(--clay-blue),
        inset 8px 8px 15px rgba(255, 255, 255, 1);
}

/* Standard Buttons */
.clay-button {
    background-color: var(--clay-blue);
    border-radius: 30px;
    box-shadow: 
        8px 8px 16px var(--clay-shadow),
        inset -4px -4px 8px var(--clay-blue-dark),
        inset 4px 4px 8px rgba(255, 255, 255, 0.6);
    border: none;
    color: #2D3E61;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.clay-button:active {
    box-shadow: 
        inset 6px 6px 12px var(--clay-blue-dark),
        inset -6px -6px 12px rgba(255, 255, 255, 0.4);
    transform: scale(0.96);
}

/* NEW: Floating Action Buttons (Clay Style) */
.clay-fab {
    width: 3.5rem; /* w-14 */
    height: 3.5rem; /* h-14 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}
    
.clay-fab:hover {
    transform: translateY(-6px) scale(1.05);
}

/* WhatsApp Specific Clay Style */
.clay-fab-whatsapp {
    background-color: var(--clay-green);
    color: white;
    box-shadow: 
        8px 8px 20px rgba(37, 211, 102, 0.3),
        inset -4px -4px 8px rgba(0, 80, 0, 0.15),
        inset 4px 4px 10px rgba(255, 255, 255, 0.4);
}

/* PDF Download Specific Clay Style */
.clay-fab-pdf {
    background-color: white;
    color: var(--clay-red);
    box-shadow: 
        8px 8px 20px rgba(180, 198, 239, 0.6),
        inset -3px -3px 6px rgba(180, 198, 239, 0.3),
        inset 3px 3px 6px rgba(255, 255, 255, 1);
}

.clay-nav {
    background-color: white;
    border-radius: 0 0 40px 40px;
    box-shadow: 0 15px 35px var(--clay-shadow);
}

/* Hero background: solid complementary color */
.hero-bg {
    background-color: var(--clay-blue);
}

/* Section spacing (responsive) */
section { padding: 3rem 1rem; }
@media (min-width: 768px) {
    section { padding: 5rem 1.5rem; }
}
