@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --ink: #0f172a;
    --ink-soft: #334155;
    --surface: #f8fafc;
    --surface-2: #eef2f7;
    --brand: #0f766e;
    --brand-2: #0ea5a4;
    --accent: #f59e0b;
}

body {
    font-family: "IBM Plex Sans", sans-serif;
    color: var(--ink);
    background: radial-gradient(1200px 600px at 20% -10%, #e5f3f3 0%, transparent 60%),
        radial-gradient(900px 500px at 85% 0%, #fff7e6 0%, transparent 55%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.font-display {
    font-family: "Space Grotesk", sans-serif;
}

.bg-grid {
    background-image: linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
}

.card-glass {
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.35);
    backdrop-filter: blur(10px);
}

.skeleton {
    position: relative;
    overflow: hidden;
    background: #e2e8f0;
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

[x-cloak] {
    display: none !important;
}