/* ============================
   Fluent Design System Theme
   ============================ */

:root {
    /* Fluent Color System - Light Theme */
    --fluent-primary: #0078d4;
    --fluent-primary-hover: #106ebe;
    --fluent-accent: #f7630c;
    --fluent-accent-hover: #e55a00;
    --fluent-neutral-background: #ffffff;
    --fluent-neutral-layer: #f3f3f3;
    --fluent-neutral-layer-alt: #fafafa;
    --fluent-text-primary: #323130;
    --fluent-text-secondary: #605e5c;
    --fluent-border: #e1dfdd;
    --fluent-success: #107c10;
    
    /* Fluent Shadows (depth system) */
    --fluent-shadow-2: 0 0.3px 0.9px rgba(0, 0, 0, 0.108), 0 1.6px 3.6px rgba(0, 0, 0, 0.132);
    --fluent-shadow-4: 0 0.6px 1.8px rgba(0, 0, 0, 0.108), 0 3.2px 7.2px rgba(0, 0, 0, 0.132);
    --fluent-shadow-8: 0 1.2px 3.6px rgba(0, 0, 0, 0.108), 0 6.4px 14.4px rgba(0, 0, 0, 0.132);
    --fluent-shadow-16: 0 2.4px 7.2px rgba(0, 0, 0, 0.108), 0 12.8px 28.8px rgba(0, 0, 0, 0.132);
    
    /* Acrylic Background */
    --fluent-acrylic: rgba(243, 243, 243, 0.7);
    --fluent-acrylic-dark: rgba(44, 44, 44, 0.7);
    
    /* Hero Gradient */
    --hero-gradient-start: #f5f5f5;
    --hero-gradient-end: #fafafa;
    
    /* Comparison Card */
    --comparison-after-gradient-start: #ffffff;
    --comparison-after-gradient-end: #f0f9ff;
    
    /* Modal & Widget */
    --modal-background: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.4);
    
    /* Code Block */
    --code-bg: #1e1e1e;
    --code-header-bg: #2d2d2d;
    --code-border: #3e3e3e;
    --code-text: #d4d4d4;
    
    /* Fluent Typography */
    --type-caption: 12px;
    --type-body: 14px;
    --type-body-large: 16px;
    --type-subtitle: 20px;
    --type-title: 28px;
    --type-title-large: 32px;
    --type-display: 68px;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    
    /* Font Weights */
    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 700;
    
    /* Fluent Spacing (4px grid) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-xxl: 24px;
    --spacing-xxxl: 32px;
    
    /* Fluent Border Radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    
    /* Fluent Breakpoints */
    --breakpoint-sm: 640px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1366px;
    --breakpoint-xl: 1920px;
}

/* Dark Theme */
[data-theme="dark"] {
    /* Fluent Color System - Dark Theme */
    --fluent-primary: #60cdff;
    --fluent-primary-hover: #4db8e8;
    --fluent-accent: #ff8533;
    --fluent-accent-hover: #ff9d5c;
    --fluent-neutral-background: #1e1e1e;
    --fluent-neutral-layer: #2d2d2d;
    --fluent-neutral-layer-alt: #252525;
    --fluent-text-primary: #ffffff;
    --fluent-text-secondary: #b3b3b3;
    --fluent-border: #3d3d3d;
    --fluent-success: #6ccb5f;
    
    /* Dark Shadows */
    --fluent-shadow-2: 0 0.3px 0.9px rgba(0, 0, 0, 0.3), 0 1.6px 3.6px rgba(0, 0, 0, 0.4);
    --fluent-shadow-4: 0 0.6px 1.8px rgba(0, 0, 0, 0.3), 0 3.2px 7.2px rgba(0, 0, 0, 0.4);
    --fluent-shadow-8: 0 1.2px 3.6px rgba(0, 0, 0, 0.3), 0 6.4px 14.4px rgba(0, 0, 0, 0.4);
    --fluent-shadow-16: 0 2.4px 7.2px rgba(0, 0, 0, 0.3), 0 12.8px 28.8px rgba(0, 0, 0, 0.4);
    
    /* Dark Acrylic */
    --fluent-acrylic: rgba(44, 44, 44, 0.7);
    
    /* Hero Gradient - Dark */
    --hero-gradient-start: #1e1e1e;
    --hero-gradient-end: #2d2d2d;
    
    /* Comparison Card - Dark */
    --comparison-after-gradient-start: #2d2d2d;
    --comparison-after-gradient-end: #1a3a4a;
    
    /* Modal & Widget - Dark */
    --modal-background: #2d2d2d;
    --modal-overlay: rgba(0, 0, 0, 0.7);
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    font-family: 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
    font-size: var(--type-body);
    line-height: var(--line-height-normal);
    color: var(--fluent-text-primary);
    background: var(--fluent-neutral-background);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================
   Fluent Components
   ============================ */

/* Navigation Bar (Acrylic) */
.fluent-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 48px;
    background: var(--fluent-acrylic);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-bottom: 1px solid var(--fluent-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.fluent-navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xxl);
}

.fluent-navbar-logo {
    font-size: var(--type-subtitle);
    font-weight: var(--weight-semibold);
    color: var(--fluent-text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: color 0.3s ease;
}

.fluent-navbar-menu {
    display: flex;
    gap: var(--spacing-xxl);
}

.fluent-navbar-menu a {
    color: var(--fluent-text-primary);
    text-decoration: none;
    font-weight: var(--weight-regular);
    transition: color 0.1s cubic-bezier(0.33, 0, 0.67, 1);
}

.fluent-navbar-menu a:hover {
    color: var(--fluent-primary);
}

.fluent-navbar-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

/* Theme Toggle Button */
.fluent-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--fluent-neutral-layer);
    border: 1px solid var(--fluent-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.33, 0, 0.67, 1);
    padding: 0;
}

.fluent-theme-toggle #theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.fluent-theme-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--fluent-text-primary);
    transition: all 0.3s cubic-bezier(0.33, 0, 0.67, 1);
}

.fluent-theme-toggle:hover {
    background: var(--fluent-neutral-background);
    border-color: var(--fluent-primary);
    transform: scale(1.05);
}

.fluent-theme-toggle:hover svg {
    color: var(--fluent-primary);
    transform: rotate(15deg);
}

.fluent-theme-toggle:active {
    transform: scale(0.95);
}

.fluent-theme-toggle:active svg {
    transform: rotate(0deg);
}

/* Buttons */
.fluent-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 10px 20px;
    font-family: inherit;
    font-size: var(--type-body);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.1s cubic-bezier(0.33, 0, 0.67, 1);
    text-decoration: none;
}

.fluent-button-primary {
    background: var(--fluent-accent);
    color: white;
    box-shadow: var(--fluent-shadow-2);
}

.fluent-button-primary:hover {
    background: var(--fluent-accent-hover);
    box-shadow: var(--fluent-shadow-4);
}

.fluent-button-secondary {
    background: transparent;
    color: var(--fluent-text-primary);
    border: 1px solid var(--fluent-border);
}

.fluent-button-secondary:hover {
    background: var(--fluent-neutral-layer);
    border-color: var(--fluent-primary);
}

.fluent-button:active {
    transform: scale(0.98);
}

.fluent-button-full {
    width: 100%;
}

/* Cards */
.fluent-card {
    background: var(--fluent-neutral-background);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xxl);
    box-shadow: var(--fluent-shadow-4);
    border: 1px solid var(--fluent-border);
    transition: all 0.2s cubic-bezier(0.33, 0, 0.67, 1);
    position: relative;
    overflow: hidden;
}

.fluent-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
                rgba(0, 120, 212, 0.1) 0%, 
                transparent 40%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

[data-theme="dark"] .fluent-card::before {
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
                rgba(96, 205, 255, 0.15) 0%, 
                transparent 40%);
}

.fluent-card:hover {
    box-shadow: var(--fluent-shadow-8);
    transform: translateY(-2px);
}

.fluent-card:hover::before {
    opacity: 1;
}

/* Icon Container */
.fluent-icon-container {
    width: 48px;
    height: 48px;
    background: var(--fluent-neutral-layer);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    font-size: 24px;
    transition: background-color 0.3s ease;
}

/* Code Block (Fluent Dark Theme) */
.fluent-code-block {
    background: var(--code-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--fluent-shadow-8);
    margin: var(--spacing-xxl) 0;
}

.fluent-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--code-header-bg);
    border-bottom: 1px solid var(--code-border);
}

.fluent-code-language {
    color: #cccccc;
    font-size: var(--type-caption);
    font-weight: var(--weight-semibold);
}

.fluent-code-copy {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--code-border);
    border-radius: var(--radius-md);
    color: #cccccc;
    font-size: var(--type-caption);
    cursor: pointer;
    transition: all 0.1s;
}

.fluent-code-copy:hover {
    background: var(--code-border);
    border-color: var(--fluent-primary);
}

.fluent-code-block pre {
    margin: 0;
    padding: var(--spacing-lg);
    overflow-x: auto;
}

.fluent-code-block code {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: var(--type-body);
    line-height: var(--line-height-relaxed);
    color: var(--code-text);
}

/* Language Switcher */
.fluent-language-switcher {
    display: flex;
    background: var(--fluent-neutral-layer);
    border-radius: var(--radius-md);
    padding: 2px;
    transition: background-color 0.3s ease;
}

.fluent-lang-button {
    padding: 6px 12px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: var(--type-body);
    font-weight: var(--weight-regular);
    color: var(--fluent-text-secondary);
    cursor: pointer;
    transition: all 0.1s;
}

.fluent-lang-button:hover {
    background: var(--fluent-neutral-background);
    color: var(--fluent-text-primary);
}

.fluent-lang-button.active {
    background: var(--fluent-neutral-background);
    color: var(--fluent-primary);
    font-weight: var(--weight-semibold);
    box-shadow: var(--fluent-shadow-2);
}

/* Pricing Cards */
.fluent-pricing-card {
    background: var(--fluent-neutral-background);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xxxl);
    box-shadow: var(--fluent-shadow-8);
    border: 2px solid transparent;
    transition: all 0.2s cubic-bezier(0.33, 0, 0.67, 1);
}

.fluent-pricing-card:hover {
    border-color: var(--fluent-primary);
    box-shadow: var(--fluent-shadow-16);
    transform: translateY(-4px);
}

.fluent-pricing-card.featured {
    border-color: var(--fluent-accent);
    box-shadow: var(--fluent-shadow-16);
}

.fluent-pricing-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--fluent-accent);
    color: white;
    font-size: var(--type-caption);
    font-weight: var(--weight-semibold);
    border-radius: 12px;
    margin-bottom: var(--spacing-md);
}

.fluent-pricing-price {
    margin: var(--spacing-xl) 0;
}

.fluent-pricing-amount {
    font-size: 48px;
    font-weight: var(--weight-bold);
    color: var(--fluent-text-primary);
}

.fluent-pricing-period {
    font-size: var(--type-body-large);
    color: var(--fluent-text-secondary);
}

.fluent-pricing-features {
    list-style: none;
    padding: 0;
    margin: var(--spacing-xxl) 0;
}

.fluent-pricing-features li {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.fluent-icon-check {
    color: var(--fluent-success);
}

/* Footer */
.fluent-footer {
    background: var(--fluent-acrylic);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-top: 1px solid var(--fluent-border);
    padding: var(--spacing-xxxl) 0;
    margin-top: 80px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.fluent-footer-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xxl);
}

.fluent-footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--spacing-xxxl);
    margin-bottom: var(--spacing-xxxl);
}

.fluent-footer-bottom {
    text-align: center;
    padding-top: var(--spacing-xxl);
    border-top: 1px solid var(--fluent-border);
    color: var(--fluent-text-secondary);
    font-size: var(--type-body);
}

/* Final CTA Section */
.final-cta {
    text-align: center;
    padding: 80px 32px;
}

.final-cta h2 {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--fluent-text-primary);
}

.final-cta p {
    font-size: 20px;
    color: var(--fluent-text-secondary);
    margin-bottom: 32px;
}

.trust-elements {
    margin-top: 16px;
    color: var(--fluent-text-secondary);
    font-size: 14px;
}

/* Code Tabs */
.code-tabs-container {
    margin-top: 32px;
}

.code-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--fluent-border);
    margin-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.code-tab {
    background: transparent;
    border: none;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fluent-text-secondary);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s cubic-bezier(0.33, 0, 0.67, 1);
    white-space: nowrap;
    position: relative;
    bottom: -2px;
}

.code-tab:hover {
    color: var(--fluent-text-primary);
    background: var(--fluent-neutral-layer);
}

.code-tab.active {
    color: var(--fluent-accent);
    border-bottom-color: var(--fluent-accent);
}

.code-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.code-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animations */
@keyframes fluent-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fluent-animate-in {
    animation: fluent-fade-in 0.4s cubic-bezier(0.33, 0, 0.67, 1);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .fluent-footer-main {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .fluent-navbar-menu {
        display: none;
    }
    
    .fluent-navbar-actions {
        gap: var(--spacing-sm);
    }
    
    .fluent-button {
        padding: 8px 16px;
        font-size: var(--type-caption);
    }
    
    .fluent-footer-main {
        grid-template-columns: 1fr;
    }

    .code-tab {
        padding: 10px 16px;
        font-size: 13px;
    }
}