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

:root {
    /* Colors - Backgrounds */
    --color-bg-main: #020617;
    /* Darker base for the gradient */
    --color-bg-aquamarine: linear-gradient(180deg, rgba(0, 220, 255, 0.25) 0%, rgba(15, 23, 42, 0.3) 50%, rgba(2, 6, 23, 0.90) 100%);
    --color-bg-secondary: #1E293B;

    /* Colors - Text */
    --color-text-primary: #F8FAFC;
    --color-text-secondary: #94A3B8;
    --color-text-accent: #38BDF8;

    /* Metal Gradients */
    --gradient-metal-gold: linear-gradient(135deg, #B8860B 0%, #FFD700 20%, #FFF9AA 45%, #FFD700 70%, #B8860B 100%);
    --gradient-metal-ruby: linear-gradient(135deg, #450a0a 0%, #7f1d1d 20%, #ef4444 50%, #7f1d1d 80%, #450a0a 100%);
    --gradient-metal-emerald: linear-gradient(135deg, #022c22 0%, #059669 40%, #10b981 50%, #059669 60%, #022c22 100%);
    --gradient-metal-blue: linear-gradient(135deg, #020617 0%, #172554 20%, #3b82f6 50%, #1e40af 80%, #020617 100%);

    /* Magma Flow (Animated placeholder - implementation in animation keyframes) */
    --gradient-magma: initial;
    /* Deprecated */

    /* Fonts */
    --font-main: 'Montserrat', sans-serif;
    /* Body text */
    --font-heading: 'Orbitron', sans-serif;
    /* Titles */

    /* Shadows & Glows */
    --shadow-neon-blue: initial;
    /* Deprecated */
    --shadow-neon-gold: initial;
    /* Deprecated */

    /* Spacing */
    --section-padding: 50px 20px;
    --container-width: 1200px;

    /* Border Radius */
    --radius-card: 16px;
    --radius-btn: 8px;

    /* Plan Colors */
    --color-free: #ffd700;
    --color-flash: #10b981;
    --color-pro: #3b82f6;
    --color-gold: #ffd700;
    --color-elite: #ef4444;
    --color-enterprise: #a855f7;
}

/* Plan Specific Contexts */
.plan-gold {
    --plan-color: var(--color-gold);
    --plan-color-rgb: 255, 215, 0;
}

.plan-emerald {
    --plan-color: var(--color-flash);
    --plan-color-rgb: 16, 185, 129;
}

.plan-blue {
    --plan-color: var(--color-pro);
    --plan-color-rgb: 59, 130, 246;
}

.plan-ruby {
    --plan-color: var(--color-elite);
    --plan-color-rgb: 239, 68, 68;
}

.plan-tornasol {
    --plan-color: var(--color-enterprise);
    --plan-color-rgb: 168, 85, 247;
}



html {
    scroll-behavior: smooth;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--color-bg-aquamarine);
    background-attachment: fixed;
    /* Ensures gradient stays in place while scrolling */
    background-color: var(--color-bg-main);
    color: var(--color-text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 110vh;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Utilities */
.text-gradient-gold {
    background: var(--gradient-metal-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.text-gradient-emerald {
    background: linear-gradient(135deg, #10b981, #34d399, #6ee7b7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.text-gradient-blue {
    background: var(--gradient-metal-blue);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.text-gradient-ruby {
    background: var(--gradient-metal-ruby);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.text-gradient-tornasol {
    background: linear-gradient(135deg, #a855f7, #ec4899, #f97316);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.text-center {
    text-align: center !important;
}

.section-title {
    font-family: var(--font-heading);
    text-align: center !important;
    width: fit-content;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    /* Ensure it takes its own line */
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}