/* ===== Theme Variables ===== */
:root,
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: #020617;
    --bg-surface: #0f172a;
    --bg-code: #0d1117;
    --bg-nav: rgba(15, 23, 42, 0.8);
    --bg-banner: #1e293b;
    --bg-badge: #1e293b;

    --text-primary: #ffffff;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-code: #e2e8f0;

    --border-primary: #334155;
    --border-secondary: #1e293b;
    --border-accent: #334155;

    --accent-emerald: #10b981;
    --accent-emerald-hover: #34d399;
    --accent-cyan: #06b6d4;
    --accent-blue: #3b82f6;

    --gradient-start: #34d399;
    --gradient-end: #22d3ee;
    --glow-color: rgba(16, 185, 129, 0.3);

    --card-hover-border: rgba(16, 185, 129, 0.5);
    --cyan-hover-border: rgba(6, 182, 212, 0.5);
    --blue-hover-border: rgba(59, 130, 246, 0.5);
}

[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-surface: #ffffff;
    --bg-code: #0d1117;
    --bg-nav: rgba(255, 255, 255, 0.8);
    --bg-banner: #ecfdf5;
    --bg-badge: #f1f5f9;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-code: #e2e8f0;

    --border-primary: #e2e8f0;
    --border-secondary: #e2e8f0;
    --border-accent: #cbd5e1;

    --accent-emerald: #10b981;
    --accent-emerald-hover: #059669;
    --accent-cyan: #06b6d4;
    --accent-blue: #3b82f6;

    --gradient-start: #10b981;
    --gradient-end: #06b6d4;
    --glow-color: rgba(16, 185, 129, 0.25);

    --card-hover-border: rgba(16, 185, 129, 0.4);
    --cyan-hover-border: rgba(6, 182, 212, 0.4);
    --blue-hover-border: rgba(59, 130, 246, 0.4);
}

/* ===== Base Styles ===== */
@keyframes pulse-slow {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}
.animate-pulse-slow {
    animation: pulse-slow 3s ease-in-out infinite;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

* {
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-secondary);
}

/* ===== Navigation ===== */
.nav-container {
    background: var(--bg-nav);
    border-color: var(--border-primary);
}

.nav-link {
    color: var(--text-muted);
}
.nav-link:hover {
    color: var(--accent-emerald);
}
.nav-link-active {
    color: var(--accent-emerald);
}

/* ===== Hero Section ===== */
.hero-title {
    color: var(--text-primary);
}
.hero-gradient {
    background: linear-gradient(
        to right,
        var(--gradient-start),
        var(--gradient-end)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-text {
    color: var(--text-muted);
}
.hero-badge {
    background: var(--bg-badge);
    border-color: var(--border-primary);
}
.hero-badge-text {
    color: var(--text-muted);
}

/* ===== Buttons ===== */
.btn-primary {
    background: var(--accent-emerald);
    color: #0f172a;
    box-shadow: 0 10px 15px -3px var(--glow-color);
}
.btn-primary:hover {
    background: var(--accent-emerald-hover);
}

.btn-secondary {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}
.btn-secondary:hover {
    background: var(--bg-badge);
}

/* ===== Code Block ===== */
.code-container {
    background: var(--bg-card);
    border-color: var(--border-primary);
}
.code-header {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}
.code-body {
    background: var(--bg-code);
}
.code-tab-active {
    background: var(--bg-secondary);
    color: var(--accent-emerald);
}
.code-tab-inactive {
    color: var(--text-muted);
}
.code-tab-inactive:hover {
    color: var(--text-secondary);
}

/* ===== Feature Cards ===== */
.feature-section {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}
.feature-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
}
.feature-card:hover {
    border-color: var(--card-hover-border);
}
.feature-card:nth-child(2):hover {
    border-color: var(--cyan-hover-border);
}
.feature-card:nth-child(3):hover {
    border-color: var(--blue-hover-border);
}
.feature-icon-emerald {
    background: rgba(16, 185, 129, 0.1);
}
.feature-icon-cyan {
    background: rgba(6, 182, 212, 0.1);
}
.feature-icon-blue {
    background: rgba(59, 130, 246, 0.1);
}
.feature-title {
    color: var(--text-primary);
}
.feature-text {
    color: var(--text-muted);
}

/* ===== Steps Section ===== */
.step-section {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}
.step-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
}
.step-line {
    background: var(--border-primary);
}
.step-title {
    color: var(--text-primary);
}
.step-text {
    color: var(--text-muted);
}
.step-input {
    background: var(--bg-surface);
    border-color: var(--border-primary);
}
.step-input-text {
    color: var(--text-muted);
}

/* ===== Price Table ===== */
.price-banner {
    background: var(--bg-banner);
    border-color: var(--border-primary);
}
[data-theme="light"] .price-banner {
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.price-banner-text {
    color: var(--text-secondary);
}
[data-theme="light"] .price-banner-text {
    color: #065f46;
}
.price-table-container {
    background: var(--bg-card);
    border-color: var(--border-primary);
}
.price-table-header {
    background: var(--bg-secondary);
    color: var(--text-muted);
}
.price-table-row {
    border-color: var(--border-secondary);
}
.price-table-row:hover {
    background: var(--bg-secondary);
}
.price-model-name {
    color: var(--text-primary);
}
.price-value {
    color: var(--text-secondary);
}
.price-highlight {
    color: var(--accent-emerald);
}

/* ===== Knowledge Section ===== */
.knowledge-section {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}
.knowledge-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
}
.knowledge-card:hover {
    border-color: var(--card-hover-border);
}
.knowledge-card:nth-child(2):hover {
    border-color: var(--cyan-hover-border);
}
.knowledge-title {
    color: var(--text-primary);
}
.knowledge-text {
    color: var(--text-muted);
}
.knowledge-divider {
    background: var(--border-primary);
}
.rank-badge {
    background: var(--bg-secondary);
    border-color: var(--bg-card);
}
[data-theme="light"] .rank-badge {
    background: var(--accent-emerald);
    border-color: white;
    color: white;
}

/* ===== Community Section ===== */
.community-card {
    background: var(--bg-badge);
    border-color: var(--border-primary);
}
.community-card:hover {
    border-color: var(--border-accent);
}
[data-theme="light"] .community-card:hover {
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.community-title {
    color: var(--text-primary);
}
.community-text {
    color: var(--text-muted);
}
.community-placeholder {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}
.community-placeholder-text {
    color: var(--text-muted);
}

/* ===== Footer ===== */
.footer {
    background: var(--bg-card);
    border-color: var(--border-primary);
}
.footer-title {
    color: var(--text-primary);
}
.footer-text {
    color: var(--text-muted);
}
.footer-link {
    color: var(--text-muted);
}
.footer-link:hover {
    color: var(--accent-emerald);
}
.footer-divider {
    border-color: var(--border-primary);
}

/* ===== Theme Toggle ===== */
.theme-toggle {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}
.theme-toggle:hover {
    background: var(--bg-badge);
}

/* ===== Page Header ===== */
.page-header {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

/* ===== Mobile Navigation ===== */
.mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-primary);
    z-index: 40;
    padding: 1.5rem;
    overflow-y: auto;
}
.mobile-menu.active {
    display: block;
}
.mobile-nav-link {
    display: block;
    padding: 0.75rem 0;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid var(--border-secondary);
    transition: color 0.2s ease;
}
.mobile-nav-link:hover {
    color: var(--accent-emerald);
}

/* ===== Legal Page ===== */
.legal-content {
    max-width: 48rem;
    margin: 0 auto;
}
.legal-content h2 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
.legal-content h3 {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.legal-content p,
.legal-content li {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 0.75rem;
}
.legal-content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.legal-content ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.legal-update-info {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 2rem;
}

/* ===== Blog Cards ===== */
.blog-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
}
.blog-card:hover {
    border-color: var(--card-hover-border);
}
.blog-tag {
    background: var(--bg-badge);
    color: var(--text-muted);
    border-color: var(--border-primary);
}
.blog-title {
    color: var(--text-primary);
}
.blog-title:hover {
    color: var(--accent-emerald);
}
.blog-excerpt {
    color: var(--text-muted);
}
.blog-meta {
    color: var(--text-muted);
}

/* ===== Contact Cards ===== */
.contact-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
}
.contact-card:hover {
    border-color: var(--card-hover-border);
}

/* ===== Contact Form ===== */
.form-input {
    background: var(--bg-surface);
    border-color: var(--border-primary);
    color: var(--text-primary);
}
.form-input:focus {
    border-color: var(--accent-emerald);
    outline: none;
    box-shadow: 0 0 0 3px var(--glow-color);
}
.form-label {
    color: var(--text-secondary);
}

/* ===== FAQ Accordion ===== */
.faq-item {
    background: var(--bg-card);
    border-color: var(--border-primary);
}
.faq-question {
    color: var(--text-primary);
}
.faq-answer {
    color: var(--text-muted);
}
.faq-item .faq-icon {
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

/* ===== Pricing Cards ===== */
.pricing-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
}
.pricing-card:hover {
    border-color: var(--card-hover-border);
}
.pricing-card-featured {
    border-color: var(--accent-emerald);
    box-shadow: 0 0 30px var(--glow-color);
}
.pricing-price {
    color: var(--text-primary);
}
.pricing-feature {
    color: var(--text-muted);
}

/* ===== Team Cards ===== */
.team-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
}
.team-name {
    color: var(--text-primary);
}
.team-role {
    color: var(--text-muted);
}

/* ===== Timeline ===== */
.timeline-line {
    background: var(--border-primary);
}
.timeline-dot {
    background: var(--accent-emerald);
}
.timeline-title {
    color: var(--text-primary);
}
.timeline-text {
    color: var(--text-muted);
}