/* public/css/main.css */

:root {
    --primary-color: #1fa69a;
    --primary-dark: #167d74;
    --elegant-radius: 2.5rem;
    --card-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.08);
}

body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, .font-serif {
    font-family: 'Playfair Display', serif !important;
}

.glass-nav {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-gradient {
    background: radial-gradient(circle at top right, rgba(31, 166, 154, 0.12), transparent),
                radial-gradient(circle at bottom left, rgba(79, 209, 197, 0.08), transparent),
                #ffffff;
}

.text-gradient {
    background: linear-gradient(135deg, #1fa69a 0%, #0f172a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.elegant-card {
    background: #ffffff;
    border-radius: var(--elegant-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.elegant-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.12);
}

.bento-card {
    border-radius: var(--elegant-radius) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.1);
}

.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}