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

:root {
    --vercel-black: #171717;
    --vercel-white: #ffffff;
    --vercel-line: rgba(23, 23, 23, 0.08);
    --vercel-line-strong: rgba(23, 23, 23, 0.16);
    --vercel-muted: #666666;
    --vercel-soft: #fafafa;
    --vercel-blue: #0070f3;
}

body {
    font-family: 'Geist', 'Segoe UI', system-ui, sans-serif !important;
    background:
        radial-gradient(circle at top left, rgba(0, 112, 243, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f7f7f8 100%);
    color: var(--vercel-black) !important;
}

h1,
h2,
h3,
h4,
.text-xl,
.text-3xl,
.text-4xl,
.text-5xl,
.text-6xl {
    letter-spacing: -0.05em;
}

nav {
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid var(--vercel-line);
    box-shadow: 0 18px 40px rgba(23, 23, 23, 0.06) !important;
    backdrop-filter: blur(24px);
}

footer {
    background: #111111 !important;
}

.bg-brand-500,
.bg-brand-600,
.bg-brand-700 {
    background: var(--vercel-black) !important;
}

.hover\:bg-brand-600:hover,
.hover\:bg-brand-700:hover {
    background: #000000 !important;
}

.bg-brand-900 {
    background: #111111 !important;
}

.text-brand-500 {
    color: var(--vercel-blue) !important;
}

.text-brand-600,
.text-brand-700 {
    color: var(--vercel-black) !important;
}

.hover\:text-brand-600:hover,
.hover\:text-brand-700:hover {
    color: var(--vercel-blue) !important;
}

.bg-white {
    background-color: rgba(255, 255, 255, 0.92) !important;
}

.bg-white\/95 {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.bg-gray-50 {
    background-color: var(--vercel-soft) !important;
}

.text-gray-500,
.text-gray-600,
.text-gray-700 {
    color: var(--vercel-muted) !important;
}

.text-gray-800,
.text-gray-900 {
    color: var(--vercel-black) !important;
}

.rounded-lg {
    border-radius: 14px !important;
}

.rounded-2xl {
    border-radius: 24px !important;
}

.shadow-sm,
.shadow-md,
.hover\:shadow-xl:hover {
    box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.05), 0 20px 48px rgba(23, 23, 23, 0.08) !important;
}

.rounded-2xl.shadow-md,
.rounded-2xl.shadow-xl,
.rounded-lg.shadow-sm {
    border: 1px solid var(--vercel-line);
}

.border-white\/20 {
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.text-white\/70 {
    color: rgba(255, 255, 255, 0.72) !important;
}

.text-white\/50 {
    color: rgba(255, 255, 255, 0.52) !important;
}

.image-placeholder {
    background: linear-gradient(90deg, #f5f5f5 25%, #ebebeb 50%, #f5f5f5 75%) !important;
}