/*
Theme Name: SEO AI Meta
Theme URI: https://seoaimeta.com/
Author: Sanad
Description: SEO AI Meta marketing + dashboard theme powered by RankPilot Core data.
Version: 1.0.0
Text Domain: seo-ai-meta
*/


:root {
    --seoai-bg: #06060a;
    --seoai-surface: rgba(18, 18, 24, 0.88);
    --seoai-surface-solid: #121218;
    --seoai-border: rgba(255, 255, 255, 0.08);
    --seoai-text: #f8fafc;
    --seoai-muted: #94a3b8;
    --seoai-primary: #895af6;
    --seoai-primary-2: #a855f7;
    --seoai-shadow: 0 18px 50px rgba(137, 90, 246, 0.22);
    --seoai-radius-sm: 12px;
    --seoai-radius-md: 18px;
    --seoai-radius-lg: 24px;
    --seoai-container: 1200px;
    --seoai-container-wide: 1280px;
}

html {
    scroll-behavior: smooth;
}

body {
    background: radial-gradient(circle at top center, rgba(137, 90, 246, 0.10), transparent 28%), var(--seoai-bg);
    color: var(--seoai-text);
}

.max-w-7xl {
    max-width: var(--seoai-container) !important;
}

.max-w-5xl {
    max-width: 1040px !important;
}

.max-w-4xl {
    max-width: 920px !important;
}

.glass,
.glass-panel {
    background: rgba(18, 18, 24, 0.72) !important;
    border: 1px solid var(--seoai-border) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.glow-purple,
.shadow-glow-purple {
    box-shadow: var(--seoai-shadow) !important;
}

.bg-neutral-dark,
[class*="bg-neutral-dark"] {
    background-color: rgba(18, 18, 24, 0.92) !important;
}

.border-border-dark,
[class*="border-border-dark"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.bg-border-dark,
[class*="bg-border-dark"] {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

header.sticky,
header[class*="sticky top-0"] {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

header.sticky > div,
header[class*="sticky top-0"] > div,
footer > div.max-w-7xl,
section > div.max-w-7xl,
section > div.max-w-5xl,
section > div.max-w-4xl,
main > section.max-w-7xl,
main > section.max-w-5xl,
main > section.max-w-4xl {
    width: min(100% - 32px, var(--seoai-container));
    margin-left: auto;
    margin-right: auto;
}

header[class*="px-10"],
header[class*="px-6"],
header[class*="px-20"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

main > section[class*="max-w-7xl"],
main > section[class*="max-w-5xl"],
main > section[class*="max-w-4xl"],
section[class*="max-w-7xl"],
section[class*="max-w-5xl"],
section[class*="max-w-4xl"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

header nav a {
    color: #cbd5e1;
}

header nav a:hover,
header nav a:focus-visible {
    color: #fff;
}

header .flex.items-center.gap-4 > a:last-child,
header .flex.items-center.gap-4 > button:last-child,
header .flex.gap-3 > button:first-child,
header a[href*="pricing"].h-10,
header a[href*="pricing"].rounded-full {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 44px;
    padding: 0 20px;
    border-radius: 9999px !important;
    background: linear-gradient(135deg, var(--seoai-primary), var(--seoai-primary-2)) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: var(--seoai-shadow);
    border: 1px solid rgba(255,255,255,0.06);
}

header .flex.gap-3 > button:last-child,
header .flex.items-center.gap-4 > button:first-child,
header .flex.items-center.gap-4 > a:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    border-radius: 9999px !important;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: #e2e8f0 !important;
}

main section {
    position: relative;
}

main section + section {
    margin-top: 0;
}

main .grid,
main .flex {
    min-width: 0;
}

main h1,
main h2,
main h3,
main h4 {
    letter-spacing: -0.03em;
}

main p {
    color: #94a3b8;
}

table,
[class*="rounded-2xl"],
[class*="rounded-3xl"],
[class*="rounded-xl"] {
    overflow: hidden;
}

footer {
    margin-top: 0 !important;
}

@media (max-width: 1024px) {
    .max-w-7xl,
    .max-w-5xl,
    .max-w-4xl {
        max-width: calc(100% - 32px) !important;
    }

    section[class*="py-32"] {
        padding-top: 88px !important;
        padding-bottom: 88px !important;
    }

    section[class*="py-24"] {
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }
}

@media (max-width: 767px) {
    header.sticky > div,
    header[class*="sticky top-0"] > div,
    footer > div.max-w-7xl,
    section > div.max-w-7xl,
    section > div.max-w-5xl,
    section > div.max-w-4xl,
    main > section.max-w-7xl,
    main > section.max-w-5xl,
    main > section.max-w-4xl {
        width: min(100% - 24px, var(--seoai-container));
    }

    header.sticky,
    header[class*="sticky top-0"] {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    section[class*="pt-20"] {
        padding-top: 64px !important;
    }

    section[class*="pb-32"],
    section[class*="py-32"] {
        padding-bottom: 72px !important;
    }

    section[class*="pb-24"],
    section[class*="py-24"] {
        padding-bottom: 56px !important;
    }

    header .flex.items-center.gap-4,
    header .flex.gap-3 {
        gap: 10px !important;
    }

    header .flex.items-center.gap-4 > a:last-child,
    header .flex.items-center.gap-4 > button:last-child,
    header .flex.gap-3 > button:first-child {
        min-width: 108px;
        padding: 0 16px;
    }
}


header .size-8.bg-primary,
header .size-8[class*="bg-primary"] {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: var(--seoai-primary) !important;
    box-shadow: none !important;
    border: 0 !important;
}