:root {
    --primary-gold: #c9a227;
    --dark-navy: #1a365d;
    --light-gold: #f7d794;
    --text-dark: #2d3748;
    --text-light: #718096;
}

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

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text-dark); line-height: 1.6; }

.navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    padding: 1rem 0; transition: all 0.3s ease;
}
.navbar.scrolled { background-color: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
.navbar.scrolled .navbar-brand, .navbar.scrolled .nav-link { color: #1a365d !important; }
.navbar.scrolled .btn-nav { background-color: #1a365d !important; color: white !important; }

.navbar-brand { font-size: 1.5rem; font-weight: 700; color: var(--dark-navy) !important; }
.navbar-brand span { color: var(--primary-gold); }

.nav-link { color: var(--text-dark) !important; font-weight: 500; margin: 0 0.5rem; transition: color 0.3s; }
.nav-link:hover { color: var(--primary-gold) !important; }

.btn-nav { background: var(--primary-gold); color: white !important; padding: 0.5rem 1.5rem; border-radius: 8px; font-weight: 600; border: none; transition: all 0.3s; }
.btn-nav:hover { background: var(--dark-navy); transform: translateY(-2px); }

.pricing-hero {
    background: linear-gradient(135deg, var(--dark-navy) 0%, #2c5282 100%);
    padding: 120px 0 80px; color: white; text-align: center;
}
.pricing-hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 1rem; }
.pricing-hero p { font-size: 1.25rem; opacity: 0.9; max-width: 700px; margin: 0 auto; }

.pricing-section { padding: 80px 0; background: #f8f9fa; }

.pricing-card {
    background: white; border-radius: 20px; padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1); margin-bottom: 30px;
    transition: transform 0.3s, box-shadow 0.3s; height: 100%;
}
.pricing-card:hover { transform: translateY(-10px); box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.pricing-card.featured { border: 3px solid var(--primary-gold); position: relative; }

.featured-badge {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
    background: var(--primary-gold); color: white; padding: 5px 20px;
    border-radius: 20px; font-weight: 600; font-size: 0.875rem;
}

.plan-name { font-size: 1.5rem; font-weight: 700; color: var(--dark-navy); margin-bottom: 10px; }
.plan-price { font-size: 3rem; font-weight: 800; color: var(--primary-gold); margin-bottom: 5px; }
.plan-price small { font-size: 1rem; color: var(--text-light); font-weight: 400; }
.plan-description { color: var(--text-light); margin-bottom: 30px; }

.feature-list { list-style: none; padding: 0; margin-bottom: 30px; }
.feature-list li { padding: 12px 0; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; }
.feature-list li:last-child { border-bottom: none; }
.feature-list i { color: var(--primary-gold); margin-right: 10px; font-size: 1.2rem; }

.btn-signup {
    width: 100%; padding: 15px; font-size: 1.1rem; font-weight: 600;
    border-radius: 10px; border: none; background: var(--primary-gold); color: white; transition: all 0.3s;
}
.btn-signup:hover { background: var(--dark-navy); transform: translateY(-2px); }

.comparison-section { padding: 80px 0; background: white; }

.section-title { text-align: center; font-size: 2.5rem; font-weight: 800; color: var(--dark-navy); margin-bottom: 50px; }

.comparison-table { overflow-x: auto; }
.comparison-table table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.comparison-table th { background: var(--dark-navy); color: white; padding: 20px; text-align: center; font-weight: 600; }
.comparison-table th:first-child { text-align: left; border-radius: 10px 0 0 10px; }
.comparison-table th:last-child { border-radius: 0 10px 10px 0; }
.comparison-table td { padding: 15px 20px; background: #f8f9fa; text-align: center; }
.comparison-table td:first-child { text-align: left; font-weight: 600; background: white; }
.highlight-col { background: #fff9e6 !important; font-weight: 700; color: #000000 !important; }
.check-icon { color: #10b981; font-size: 1.5rem; }
.cross-icon { color: #ef4444; font-size: 1.5rem; }

.savings-section { padding: 80px 0; background: #f8f9fa; color: var(--text-dark); }
.savings-card { background: white; border-radius: 20px; padding: 40px; color: var(--text-dark); margin-bottom: 30px; }
.savings-amount { font-size: 3rem; font-weight: 800; color: var(--primary-gold); margin: 20px 0; }
.vs-text { font-size: 1.25rem; color: var(--text-light); margin-bottom: 10px; }

.faq-section { padding: 80px 0; background: #f8f9fa; }
.accordion-button { font-weight: 600; font-size: 1.1rem; }
.accordion-button:not(.collapsed) { background-color: var(--light-gold); color: var(--dark-navy); }

.cta-section { padding: 80px 0; background: var(--dark-navy); color: white; text-align: center; }
.cta-section h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 20px; }
.cta-section p { font-size: 1.25rem; margin-bottom: 30px; opacity: 0.9; }

.btn-cta {
    background: var(--primary-gold); color: white; padding: 15px 40px;
    font-size: 1.2rem; font-weight: 600; border-radius: 10px; border: none;
    transition: all 0.3s; text-decoration: none; display: inline-block;
}
.btn-cta:hover { background: white; color: var(--dark-navy); transform: translateY(-3px); }