:root {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-tertiary: #e2e8f0;
    --accent-indigo: #3CC7E4;
    --accent-violet: #40c4e8;
    --accent-emerald: #10b981;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-color: rgba(15, 23, 42, 0.08);
    --glass-bg: rgba(248, 250, 252, 0.4);
    --glass-border: rgba(15, 23, 42, 0.08);
    --glass-blur: 20px;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
}

/* Glassmorphism Styles */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    border-color: rgba(79, 70, 229, 0.3);
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.15);
}

/* Gradient effects */
.text-gradient {
    background: linear-gradient(135deg, #40c4e8 0%, #3CC7E4 50%, #0f172a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-gradient-hero {
    background: radial-gradient(circle at top right, rgba(60, 199, 228, 0.15) 0%, transparent 50%),
                radial-gradient(circle at bottom left, rgba(64, 196, 232, 0.1) 0%, transparent 50%);
}

.badge-premium {
    background: linear-gradient(135deg, rgba(60, 199, 228, 0.1) 0%, rgba(64, 196, 232, 0.1) 100%);
    border: 1px solid rgba(60, 199, 228, 0.2);
    color: var(--accent-indigo);
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Custom buttons */
.btn-premium {
    background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-violet) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 28px;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px -3px rgba(60, 199, 228, 0.4);
}

.btn-premium:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(60, 199, 228, 0.6);
}

.btn-premium-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 28px;
    font-weight: 600;
    transition: background 0.3s, border-color 0.3s, transform 0.2s;
}

.btn-premium-outline:hover {
    color: var(--text-primary);
    background: rgba(11, 28, 48, 0.03);
    border-color: rgba(11, 28, 48, 0.2);
    transform: translateY(-2px);
}

/* Navbar blur */
.navbar-premium {
    background: rgba(248, 249, 255, 0.4) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--glass-border);
}

/* Feature grid items */
.feature-icon-premium {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(60, 199, 228, 0.1) 0%, rgba(64, 196, 232, 0.1) 100%);
    border: 1px solid rgba(60, 199, 228, 0.2);
    color: var(--accent-indigo);
}

/* Premium Pricing Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.pricing-card-premium {
    position: relative;
    overflow: hidden;
}

.pricing-card-premium.featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-indigo), var(--accent-violet));
}

.pricing-card-premium.featured {
    border-color: rgba(79, 70, 229, 0.4);
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.15);
}

.popular-tag {
    position: absolute;
    top: 15px;
    right: -30px;
    background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-violet) 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 30px;
    transform: rotate(45deg);
}

/* Animations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Typography utilities for public pages (Tailwind CDN doesn't know our theme) */
.text-headline-sm { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; line-height: 28px; font-weight: 600; }
.text-headline-md { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; line-height: 32px; font-weight: 600; }
.text-headline-lg { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 32px; line-height: 40px; font-weight: 600; }
.text-display-md { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -0.02em; }
.text-display-lg { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 72px; line-height: 80px; font-weight: 700; letter-spacing: -0.02em; }

.font-label-sm { font-family: 'Inter', sans-serif; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; }
.font-label-md { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; }
.font-body-sm { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 20px; }
.font-body-md { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 24px; }
.font-headline-sm { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; line-height: 28px; font-weight: 600; }
.font-headline-md { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; line-height: 32px; font-weight: 600; }
.font-headline-lg { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 32px; line-height: 40px; font-weight: 600; }

/* Extra small spacing helpers */
.m-xxs { margin: 0.125rem; }
.mx-xxs { margin-left: 0.125rem; margin-right: 0.125rem; }
.my-xxs { margin-top: 0.125rem; margin-bottom: 0.125rem; }
.mt-xxs { margin-top: 0.125rem; }
.mb-xxs { margin-bottom: 0.125rem; }
.ml-xxs { margin-left: 0.125rem; }
.mr-xxs { margin-right: 0.125rem; }
.p-xxs { padding: 0.125rem; }
.px-xxs { padding-left: 0.125rem; padding-right: 0.125rem; }
.py-xxs { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.pt-xxs { padding-top: 0.125rem; }
.pb-xxs { padding-bottom: 0.125rem; }
.pl-xxs { padding-left: 0.125rem; }
.pr-xxs { padding-right: 0.125rem; }
.gap-xxs { gap: 0.125rem; }
.space-x-xxs > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.125rem * var(--tw-space-x-reverse)); margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse))); }
.space-y-xxs > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.125rem * var(--tw-space-y-reverse)); }

/* Spacing utilities matching the panel theme (Tailwind CDN doesn't know these tokens) */
.p-xs { padding: 4px; }
.p-sm { padding: 8px; }
.p-md { padding: 16px; }
.p-lg { padding: 24px; }
.p-xl { padding: 40px; }
.p-xxl { padding: 64px; }

.px-xs { padding-left: 4px; padding-right: 4px; }
.px-sm { padding-left: 8px; padding-right: 8px; }
.px-md { padding-left: 16px; padding-right: 16px; }
.px-lg { padding-left: 24px; padding-right: 24px; }
.px-xl { padding-left: 40px; padding-right: 40px; }
.px-xxl { padding-left: 64px; padding-right: 64px; }

.py-xs { padding-top: 4px; padding-bottom: 4px; }
.py-sm { padding-top: 8px; padding-bottom: 8px; }
.py-md { padding-top: 16px; padding-bottom: 16px; }
.py-lg { padding-top: 24px; padding-bottom: 24px; }
.py-xl { padding-top: 40px; padding-bottom: 40px; }
.py-xxl { padding-top: 64px; padding-bottom: 64px; }

.pt-xs { padding-top: 4px; }
.pt-sm { padding-top: 8px; }
.pt-md { padding-top: 16px; }
.pt-lg { padding-top: 24px; }
.pt-xl { padding-top: 40px; }
.pt-xxl { padding-top: 64px; }

.pb-xs { padding-bottom: 4px; }
.pb-sm { padding-bottom: 8px; }
.pb-md { padding-bottom: 16px; }
.pb-lg { padding-bottom: 24px; }
.pb-xl { padding-bottom: 40px; }
.pb-xxl { padding-bottom: 64px; }

.pl-xs { padding-left: 4px; }
.pl-sm { padding-left: 8px; }
.pl-md { padding-left: 16px; }
.pl-lg { padding-left: 24px; }
.pl-xl { padding-left: 40px; }
.pl-xxl { padding-left: 64px; }

.pr-xs { padding-right: 4px; }
.pr-sm { padding-right: 8px; }
.pr-md { padding-right: 16px; }
.pr-lg { padding-right: 24px; }
.pr-xl { padding-right: 40px; }
.pr-xxl { padding-right: 64px; }

.m-xs { margin: 4px; }
.m-sm { margin: 8px; }
.m-md { margin: 16px; }
.m-lg { margin: 24px; }
.m-xl { margin: 40px; }
.m-xxl { margin: 64px; }

.mx-xs { margin-left: 4px; margin-right: 4px; }
.mx-sm { margin-left: 8px; margin-right: 8px; }
.mx-md { margin-left: 16px; margin-right: 16px; }
.mx-lg { margin-left: 24px; margin-right: 24px; }
.mx-xl { margin-left: 40px; margin-right: 40px; }
.mx-xxl { margin-left: 64px; margin-right: 64px; }

.my-xs { margin-top: 4px; margin-bottom: 4px; }
.my-sm { margin-top: 8px; margin-bottom: 8px; }
.my-md { margin-top: 16px; margin-bottom: 16px; }
.my-lg { margin-top: 24px; margin-bottom: 24px; }
.my-xl { margin-top: 40px; margin-bottom: 40px; }
.my-xxl { margin-top: 64px; margin-bottom: 64px; }

.mt-xs { margin-top: 4px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mt-xl { margin-top: 40px; }
.mt-xxl { margin-top: 64px; }

.mb-xs { margin-bottom: 4px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
.mb-xl { margin-bottom: 40px; }
.mb-xxl { margin-bottom: 64px; }

.ml-xs { margin-left: 4px; }
.ml-sm { margin-left: 8px; }
.ml-md { margin-left: 16px; }
.ml-lg { margin-left: 24px; }
.ml-xl { margin-left: 40px; }
.ml-xxl { margin-left: 64px; }

.mr-xs { margin-right: 4px; }
.mr-sm { margin-right: 8px; }
.mr-md { margin-right: 16px; }
.mr-lg { margin-right: 24px; }
.mr-xl { margin-right: 40px; }
.mr-xxl { margin-right: 64px; }

.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }
.gap-xl { gap: 40px; }
.gap-xxl { gap: 64px; }

.space-x-xs > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(4px * var(--tw-space-x-reverse)); margin-left: calc(4px * calc(1 - var(--tw-space-x-reverse))); }
.space-x-sm > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(8px * var(--tw-space-x-reverse)); margin-left: calc(8px * calc(1 - var(--tw-space-x-reverse))); }
.space-x-md > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(16px * var(--tw-space-x-reverse)); margin-left: calc(16px * calc(1 - var(--tw-space-x-reverse))); }
.space-x-lg > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(24px * var(--tw-space-x-reverse)); margin-left: calc(24px * calc(1 - var(--tw-space-x-reverse))); }
.space-x-xl > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(40px * var(--tw-space-x-reverse)); margin-left: calc(40px * calc(1 - var(--tw-space-x-reverse))); }
.space-x-xxl > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(64px * var(--tw-space-x-reverse)); margin-left: calc(64px * calc(1 - var(--tw-space-x-reverse))); }

.space-y-xs > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(4px * var(--tw-space-y-reverse)); }
.space-y-sm > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(8px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(8px * var(--tw-space-y-reverse)); }
.space-y-md > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(16px * var(--tw-space-y-reverse)); }
.space-y-lg > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(24px * var(--tw-space-y-reverse)); }
.space-y-xl > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(40px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(40px * var(--tw-space-y-reverse)); }
.space-y-xxl > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(64px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(64px * var(--tw-space-y-reverse)); }

/* Text size utilities missing from Tailwind CDN theme */
.text-body-sm { font-size: 14px; line-height: 20px; }
.text-body-md { font-size: 16px; line-height: 24px; }
.text-label-sm { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; }
.text-label-md { font-size: 14px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; }

/* Responsive improvements */
@media (max-width: 768px) {
    .hero-gradient {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}