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

:root {
    --bg: #0f172a;
    --glass: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.1);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: white;
    scroll-behavior: smooth;
}

/* Premium Glass Card */
.premium-card {
    background: var(--glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.premium-card:hover {
    border-color: rgba(56, 189, 248, 0.5);
    transform: translateY(-8px);
}

/* Gradient Branding */
.gradient-text {
    background: linear-gradient(90deg, #38bdf8, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-btn {
    background: linear-gradient(90deg, #38bdf8, #818cf8);
    transition: transform 0.2s, opacity 0.2s;
}

.gradient-btn:active { transform: scale(0.95); }

/* Smooth Page Transitions */
.page-transition {
    animation: fadeIn 0.8s ease-out;
}

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