@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;900&display=swap');

:root {
    --primary: #7c3aed;
    --primary-light: #8b5cf6;
    --primary-dark: #6d28d9;
    --accent: #f43f5e;
    --accent-light: #fb7185;
    --accent-dark: #e11d48;
    --dark: #0f172a;
    --dark-soft: #1e293b;
}

* { font-family: 'Noto Sans SC', system-ui, -apple-system, sans-serif; }

html { scroll-behavior: smooth; }

.gradient-text {
    background: linear-gradient(135deg, var(--primary-light), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #4c1d95 50%, #0f172a 100%);
}

.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.3);
}

.btn-accent {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    transition: all 0.3s ease;
}
.btn-accent:hover {
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(244, 63, 94, 0.3);
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.glow-violet {
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.15);
}

.glow-rose {
    box-shadow: 0 0 40px rgba(244, 63, 94, 0.15);
}