/* GAIN OPTIMIZER - Professional Trading Design */
* {margin: 0; padding: 0; box-sizing: border-box;}
:root {
    --bg-primary: #0B0E11; --bg-secondary: #131722; --bg-tertiary: #1E222D;
    --text-primary: #D1D4DC; --text-secondary: #787B86;
    --accent-primary: #2962FF; --success: #26A69A; --danger: #EF4444; --warning: #FF9800;
    --gradient-primary: linear-gradient(135deg, #2962FF 0%, #1E3A8A 100%);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
}
body {font-family: 'Inter', -apple-system, sans-serif; line-height: 1.6; background: var(--bg-primary); color: var(--text-primary); overflow-x: hidden;}
.container {max-width: 1400px; margin: 0 auto; padding: 0 24px;}
.navbar {background: rgba(19, 23, 34, 0.95); backdrop-filter: blur(10px); padding: 20px 0; position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid rgba(255,255,255,0.1);}
.navbar .container {display: flex; justify-content: space-between; align-items: center;}
.nav-brand {display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 800; color: var(--text-primary);}
.brand-icon {font-size: 28px;}
.brand-badge {background: var(--gradient-primary); color: white; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: 1px;}
.nav-links {display: flex; gap: 24px; align-items: center;}
.nav-links a {text-decoration: none; color: var(--text-secondary); font-weight: 500; transition: color 0.3s; font-size: 15px;}
.nav-links a:hover {color: var(--text-primary);}
.btn-login {color: var(--text-primary) !important; padding: 10px 20px; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; transition: all 0.3s;}
.btn-login:hover {background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.3);}
.btn-primary-nav {background: var(--gradient-primary) !important; color: white !important; padding: 10px 24px; border-radius: 8px; font-weight: 600; transition: transform 0.3s;}
.btn-primary-nav:hover {transform: translateY(-2px); box-shadow: 0 8px 24px rgba(41,98,255,0.4);}
.hero-pro {position: relative; padding: 80px 0; background: var(--bg-primary); overflow: hidden;}
.hero-content {position: relative; z-index: 1; max-width: 900px; margin: 0 auto; text-align: center;}
.hero-badge {display: inline-flex; align-items: center; gap: 8px; background: rgba(41,98,255,0.1); border: 1px solid rgba(41,98,255,0.3); padding: 8px 20px; border-radius: 100px; color: #5B9CF6; font-size: 14px; font-weight: 600; margin-bottom: 24px;}
.badge-dot {width: 8px; height: 8px; background: var(--success); border-radius: 50%; animation: pulse 2s infinite;}
@keyframes pulse {0%, 100% {opacity: 1;} 50% {opacity: 0.5;}}
.hero-title {font-size: 72px; font-weight: 800; line-height: 1.1; margin-bottom: 24px; letter-spacing: -2px;}
.gradient-text {background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.hero-description {font-size: 20px; color: var(--text-secondary); max-width: 700px; margin: 0 auto 48px; line-height: 1.7;}
.hero-stats-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 48px 0;}
.hero-stat {background: var(--bg-secondary); padding: 24px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); transition: transform 0.3s;}
.hero-stat:hover {transform: translateY(-4px); border-color: rgba(41,98,255,0.3);}
.stat-icon {font-size: 32px; margin-bottom: 12px;}
.stat-value {font-size: 36px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px;}
.stat-label {font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;}
.hero-cta {display: flex; gap: 16px; justify-content: center; margin: 48px 0 24px;}
.btn-primary-large {display: inline-flex; align-items: center; gap: 12px; background: var(--gradient-primary); color: white; padding: 18px 40px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 18px; transition: all 0.3s;}
.btn-primary-large:hover {transform: translateY(-2px); box-shadow: 0 12px 32px rgba(41,98,255,0.4);}
.btn-secondary-large {display: inline-flex; align-items: center; padding: 18px 40px; border: 2px solid rgba(255,255,255,0.2); border-radius: 12px; color: var(--text-primary); text-decoration: none; font-weight: 600; font-size: 18px; transition: all 0.3s;}
.btn-secondary-large:hover {background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.3);}
.section-header {text-align: center; margin-bottom: 48px;}
.section-header h2 {font-size: 48px; font-weight: 800; margin-bottom: 16px;}
.section-header p {font-size: 18px; color: var(--text-secondary);}
.features-grid-pro {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.feature-card-pro {background: var(--bg-secondary); padding: 48px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); transition: all 0.3s;}
.feature-card-pro:hover {transform: translateY(-8px); border-color: rgba(41,98,255,0.3);}
.feature-icon-pro {font-size: 48px; margin-bottom: 16px;}
.feature-card-pro h3 {font-size: 24px; font-weight: 700; margin-bottom: 12px;}
.feature-card-pro p {color: var(--text-secondary); margin-bottom: 16px; line-height: 1.7;}
.feature-points {list-style: none; padding: 0;}
.feature-points li {padding: 8px 0; color: var(--text-secondary); font-size: 14px;}
.feature-points li:before {content: "→ "; color: var(--accent-primary); font-weight: bold; margin-right: 8px;}
.pricing-grid-pro {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 48px;}
.pricing-card-pro {background: var(--bg-tertiary); padding: 48px; border-radius: 16px; border: 2px solid rgba(255,255,255,0.05); position: relative; transition: all 0.3s;}
.pricing-card-pro:hover {transform: translateY(-8px); border-color: rgba(41,98,255,0.3);}
.pricing-card-pro.featured-plan {border-color: var(--accent-primary); background: linear-gradient(135deg, rgba(41,98,255,0.1) 0%, var(--bg-tertiary) 100%);}
.popular-badge {position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gradient-primary); color: white; padding: 6px 20px; border-radius: 100px; font-size: 12px; font-weight: 700;}
.price-pro {display: flex; align-items: flex-start; margin-bottom: 8px;}
.currency {font-size: 24px; color: var(--text-secondary); margin-right: 4px; margin-top: 12px;}
.amount {font-size: 64px; font-weight: 800; line-height: 1; color: var(--text-primary);}
.period {color: var(--text-secondary); font-size: 14px; margin-bottom: 24px;}
.pricing-features-pro {list-style: none; padding: 0; margin: 24px 0;}
.pricing-features-pro li {padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 14px;}
.check {color: var(--success); font-weight: bold; margin-right: 12px; font-size: 16px;}
.btn-pricing {display: block; width: 100%; padding: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--text-primary); text-align: center; text-decoration: none; border-radius: 12px; font-weight: 700; transition: all 0.3s; margin-top: 24px;}
.btn-pricing:hover {background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2);}
.btn-pricing.primary {background: var(--gradient-primary); border-color: transparent; color: white;}
.btn-pricing.primary:hover {box-shadow: 0 8px 24px rgba(41,98,255,0.4);}
.footer-pro {background: var(--bg-secondary); padding: 80px 0 24px; border-top: 1px solid rgba(255,255,255,0.05);}
.footer-grid {display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px;}
.footer-brand {display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 800; margin-bottom: 16px;}
.footer-column h4 {font-size: 14px; font-weight: 700; text-transform: uppercase; margin-bottom: 16px; color: var(--text-primary);}
.footer-column a {display: block; color: var(--text-secondary); text-decoration: none; padding: 8px 0; transition: color 0.3s;}
.footer-column a:hover {color: var(--accent-primary);}
.footer-bottom {padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.05); text-align: center; color: var(--text-secondary);}
.badge {display: inline-block; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 600;}
.badge.active {background: rgba(38,166,154,0.2); color: var(--success);}
.badge.expired {background: rgba(239,83,80,0.2); color: var(--danger);}
.badge.trial {background: rgba(255,152,0,0.2); color: var(--warning);}
@media (max-width: 1200px) {.hero-title {font-size: 56px;} .hero-stats-grid, .features-grid-pro, .pricing-grid-pro {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 768px) {.hero-title {font-size: 40px;} .hero-stats-grid, .features-grid-pro, .pricing-grid-pro, .footer-grid {grid-template-columns: 1fr;}}