/* ===================================
   DESIGN ENHANCEMENTS
   Applying 5 key improvements:
   1. Visual Hierarchy
   2. White Space
   3. Color Consistency (Gradients)
   4. Icon Consistency
   5. Typography Scale
   =================================== */

/* ===================================
   ENHANCEMENT #1: VISUAL HIERARCHY
   Using size, color, spacing to guide attention
   =================================== */

/* Hero Section - Clear Hierarchy */
.hero-section {
    padding: var(--space-24) 0 var(--space-20) 0 !important;
}

.hero-section .section-tag {
    font-size: var(--font-sm) !important;
    font-weight: var(--font-semibold) !important;
    color: var(--primary) !important;
    margin-bottom: var(--space-4) !important;
}

.hero-section h1 {
    font-size: var(--font-5xl) !important;
    font-weight: var(--font-bold) !important;
    line-height: var(--leading-tight) !important;
    color: var(--text-primary) !important;
    margin-bottom: var(--space-6) !important;
    letter-spacing: -0.02em !important;
}

.hero-section .hero-description {
    font-size: var(--font-lg) !important;
    line-height: var(--leading-relaxed) !important;
    color: var(--text-secondary) !important;
    margin-bottom: var(--space-8) !important;
    max-width: 650px !important;
}

/* Section Headers - Consistent Hierarchy */
.section-header {
    margin-bottom: var(--space-16) !important;
    text-align: center;
}

.section-tag {
    display: inline-block;
    font-size: var(--font-xs) !important;
    font-weight: var(--font-semibold) !important;
    color: var(--primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4) !important;
    padding: var(--space-2) var(--space-4);
    background: rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-full);
}

.section-title {
    font-size: var(--font-3xl) !important;
    font-weight: var(--font-bold) !important;
    line-height: var(--leading-snug) !important;
    color: var(--text-primary) !important;
    margin-bottom: var(--space-4) !important;
}

.section-description {
    font-size: var(--font-lg) !important;
    line-height: var(--leading-relaxed) !important;
    color: var(--text-secondary) !important;
    max-width: 700px;
    margin: 0 auto;
}

/* Card Hierarchy - Clear Content Structure */
.solution-visual-card h3,
.feature-card h3,
.product-card h3 {
    font-size: var(--font-xl) !important;
    font-weight: var(--font-semibold) !important;
    line-height: var(--leading-snug) !important;
    color: var(--text-primary) !important;
    margin-bottom: var(--space-3) !important;
}

.solution-visual-card p,
.feature-card p,
.product-card p {
    font-size: var(--font-base) !important;
    line-height: var(--leading-normal) !important;
    color: var(--text-secondary) !important;
}

/* Button Hierarchy */
.cta-primary {
    font-size: var(--font-base) !important;
    font-weight: var(--font-semibold) !important;
    padding: var(--space-4) var(--space-8) !important;
}

.cta-secondary {
    font-size: var(--font-base) !important;
    font-weight: var(--font-medium) !important;
    padding: var(--space-4) var(--space-6) !important;
}

/* Stats - Prominent Display */
.stat-number {
    font-size: var(--font-2xl) !important;
    font-weight: var(--font-bold) !important;
    color: var(--text-primary) !important;
    line-height: var(--leading-tight) !important;
}

.stat-label {
    font-size: var(--font-sm) !important;
    color: var(--text-secondary) !important;
    font-weight: var(--font-medium) !important;
}

/* ===================================
   ENHANCEMENT #2: WHITE SPACE
   Increase padding in dense areas
   =================================== */

/* Section Spacing - More Breathing Room */
section {
    padding: var(--space-20) 0 !important;
}

.hero-section {
    padding: var(--space-24) 0 var(--space-20) 0 !important;
}

/* Card Spacing - Generous Padding */
.solution-visual-card {
    padding: 0 !important; /* Visual header handles its own padding */
}

.solution-visual-card .card-content {
    padding: var(--space-8) !important;
}

.solution-visual-card .card-visual-header {
    padding: var(--space-8) !important;
}

.feature-card,
.product-card,
.industry-card {
    padding: var(--space-8) !important;
}

/* Grid Gaps - More Space Between Items */
.solution-visual-grid {
    gap: var(--space-8) !important;
    margin-top: var(--space-16) !important;
}

.features-grid {
    gap: var(--space-6) !important;
}

.products-grid {
    gap: var(--space-8) !important;
}

/* Tab Spacing */
.tab-nav {
    gap: var(--space-4) !important;
    margin-bottom: var(--space-12) !important;
}

.tab-btn {
    padding: var(--space-4) var(--space-8) !important;
}

.industry-nav {
    gap: var(--space-3) !important;
    margin-bottom: var(--space-12) !important;
}

.industry-btn {
    padding: var(--space-3) var(--space-6) !important;
}

/* Content Spacing */
.tab-content {
    padding: var(--space-8) 0 !important;
}

/* List Item Spacing */
.feature-list li,
.benefit-list li {
    margin-bottom: var(--space-4) !important;
}

/* Footer Spacing */
.footer-section {
    padding: var(--space-20) 0 var(--space-10) 0 !important;
}

.footer-column {
    margin-bottom: var(--space-10) !important;
}

/* Dashboard Spacing */
.account-cards {
    gap: var(--space-6) !important;
    margin-bottom: var(--space-8) !important;
}

.account-card {
    padding: var(--space-6) !important;
}

.transaction-item {
    padding: var(--space-4) !important;
    margin-bottom: var(--space-2) !important;
}

/* ===================================
   ENHANCEMENT #3: COLOR CONSISTENCY
   Standardize gradient usage
   =================================== */

/* Primary Gradients - CTAs and Key Elements */
.cta-primary,
.btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
}

.cta-primary:hover,
.btn-primary:hover {
    background: var(--gradient-primary-hover) !important;
}

/* Progress Bar */
.progress-bar {
    background: var(--gradient-primary) !important;
}

/* Dashboard Tab Active State */
.dashboard-tab.active {
    border-bottom-color: var(--primary) !important;
}

/* Solution Cards - Removed forced background to allow individual card colors and hover effects */

/* Icon Containers - Gradient Backgrounds */
.card-icon,
.icon-container {
    background: var(--gradient-primary) !important;
}

/* Connection Hub */
.connection-hub {
    background: var(--gradient-primary) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3) !important;
}

/* Payment Badges - Standardized Colors */
.payment-badge.neft {
    background: var(--gradient-blue) !important;
}

.payment-badge.rtgs {
    background: var(--gradient-purple) !important;
}

.payment-badge.imps {
    background: var(--gradient-pink) !important;
}

.payment-badge.upi {
    background: var(--gradient-green) !important;
}

/* Tax Icon */
.tax-icon {
    background: var(--gradient-primary) !important;
}

/* Transaction Icons - Color Coded */
.transaction-icon.vendor {
    background: var(--gradient-blue) !important;
}

.transaction-icon.bill {
    background: var(--gradient-orange) !important;
}

.transaction-icon.salary {
    background: var(--gradient-green) !important;
}

.transaction-icon.card {
    background: var(--gradient-purple) !important;
}

.transaction-icon.transfer {
    background: var(--gradient-indigo) !important;
}

/* Feature Tile Icons - Consistent Gradients */
.feature-tile-icon.vendor {
    background: var(--gradient-blue) !important;
}

.feature-tile-icon.links {
    background: var(--gradient-purple) !important;
}

.feature-tile-icon.auto {
    background: var(--gradient-teal) !important;
}

.feature-tile-icon.balance {
    background: var(--gradient-green) !important;
}

.feature-tile-icon.cards {
    background: var(--gradient-pink) !important;
}

.feature-tile-icon.bill {
    background: var(--gradient-orange) !important;
}

.feature-tile-icon.reports {
    background: var(--gradient-indigo) !important;
}

.feature-tile-icon.witty {
    background: var(--gradient-primary) !important;
}

/* Account Cards - Distinct Gradients */
.account-card:nth-child(1) {
    background: var(--gradient-indigo) !important;
}

.account-card:nth-child(2) {
    background: linear-gradient(135deg, #ff6b35, #f7931e) !important;
}

.account-card:nth-child(3) {
    background: var(--gradient-blue) !important;
}

/* Stats Section Background */
.stats-section {
    background: var(--gradient-secondary) !important;
}

/* Hover Effects - Consistent Shadow Colors */
.solution-visual-card:hover,
.feature-card:hover,
.product-card:hover {
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2) !important;
}

.account-card:hover {
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.25) !important;
}

/* ===================================
   ENHANCEMENT #4: ICON CONSISTENCY
   Use solid style throughout
   =================================== */

/* Force all Font Awesome icons to solid style */
.fas,
.far,
.fab,
[class*="fa-"] {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important; /* Solid style */
}

/* Icon Sizing - Consistent Scale */
.hero-section i {
    font-size: var(--font-xl) !important;
}

.section-tag i {
    font-size: var(--font-sm) !important;
}

.card-icon i {
    font-size: var(--font-2xl) !important;
}

.feature-card i {
    font-size: var(--font-xl) !important;
}

.stat-card i {
    font-size: var(--font-2xl) !important;
}

.dashboard-tab i {
    font-size: var(--font-lg) !important;
    margin-right: var(--space-2) !important;
}

.quick-action-btn i {
    font-size: var(--font-xl) !important;
}

.transaction-icon i {
    font-size: var(--font-lg) !important;
}

.footer-section i {
    font-size: var(--font-base) !important;
}

/* Bank Logo Icons */
.bank-logo-item i {
    font-size: var(--font-base) !important;
}

/* Utility Icons */
.utility-icon-item i {
    font-size: var(--font-2xl) !important;
}

/* Button Icons */
.cta-primary i,
.cta-secondary i {
    font-size: var(--font-base) !important;
    margin-left: var(--space-2) !important;
}

.account-btn i {
    font-size: var(--font-sm) !important;
    margin-right: var(--space-1) !important;
}

/* ===================================
   ENHANCEMENT #5: TYPOGRAPHY SCALE
   Consistent font sizes throughout
   =================================== */

/* Hero Section */
.hero-section h1 {
    font-size: var(--font-5xl) !important;
}

.hero-section .hero-description {
    font-size: var(--font-lg) !important;
}

/* Section Headings */
.section-title {
    font-size: var(--font-3xl) !important;
}

.section-description {
    font-size: var(--font-lg) !important;
}

/* Card Titles */
.solution-visual-card h3,
.feature-card h3,
.product-card h3,
.industry-card h3 {
    font-size: var(--font-xl) !important;
}

/* Card Descriptions */
.solution-visual-card p,
.feature-card p,
.product-card p,
.industry-card p {
    font-size: var(--font-base) !important;
}

/* Tab Buttons */
.tab-btn {
    font-size: var(--font-lg) !important;
}

.industry-btn {
    font-size: var(--font-base) !important;
}

/* Dashboard Elements */
.dashboard-tab {
    font-size: var(--font-base) !important;
}

.account-bank {
    font-size: var(--font-base) !important;
}

.account-balance {
    font-size: var(--font-2xl) !important;
}

.account-number {
    font-size: var(--font-sm) !important;
}

.account-btn {
    font-size: var(--font-sm) !important;
}

/* Quick Actions */
.quick-actions-header {
    font-size: var(--font-2xl) !important;
}

.quick-actions-header span {
    font-size: var(--font-sm) !important;
}

.quick-action-btn i {
    font-size: var(--font-xl) !important;
}

.quick-action-btn span {
    font-size: var(--font-xs) !important;
}

/* Transaction Feed */
.feed-header h3 {
    font-size: var(--font-xl) !important;
}

.transaction-name {
    font-size: var(--font-base) !important;
}

.transaction-time {
    font-size: var(--font-sm) !important;
}

.transaction-amount {
    font-size: var(--font-lg) !important;
}

/* Stats Section */
.stat-number {
    font-size: var(--font-2xl) !important;
}

.stat-label {
    font-size: var(--font-sm) !important;
}

/* Visual Stats */
.visual-stats .stat-number {
    font-size: var(--font-xl) !important;
}

.visual-stats .stat-label {
    font-size: var(--font-xs) !important;
}

/* Payment Badges */
.payment-badge {
    font-size: var(--font-xs) !important;
}

/* Bank Logos */
.bank-logo-item {
    font-size: var(--font-sm) !important;
}

/* Tax Details */
.tax-details h4 {
    font-size: var(--font-base) !important;
}

.tax-details p {
    font-size: var(--font-sm) !important;
}

/* Utility Items */
.utility-icon-item span {
    font-size: var(--font-sm) !important;
}

/* Footer */
.footer-column h4 {
    font-size: var(--font-lg) !important;
}

.footer-link {
    font-size: var(--font-base) !important;
}

.footer-bottom {
    font-size: var(--font-sm) !important;
}

/* Form Elements */
input,
textarea,
select {
    font-size: var(--font-base) !important;
}

label {
    font-size: var(--font-sm) !important;
}

/* Buttons */
button,
.btn {
    font-size: var(--font-base) !important;
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 768px) {
    /* Reduce spacing on mobile */
    section {
        padding: var(--space-12) 0 !important;
    }
    
    .hero-section {
        padding: var(--space-16) 0 var(--space-12) 0 !important;
    }
    
    /* Adjust typography scale */
    .hero-section h1 {
        font-size: var(--font-4xl) !important;
    }
    
    .section-title {
        font-size: var(--font-2xl) !important;
    }
    
    .section-description {
        font-size: var(--font-base) !important;
    }
    
    /* Reduce card padding */
    .solution-visual-card .card-content,
    .feature-card,
    .product-card {
        padding: var(--space-6) !important;
    }
    
    /* Adjust grid gaps */
    .solution-visual-grid,
    .products-grid {
        gap: var(--space-4) !important;
    }
}

@media (max-width: 576px) {
    /* Further reduce spacing */
    section {
        padding: var(--space-10) 0 !important;
    }
    
    .hero-section {
        padding: var(--space-12) 0 var(--space-10) 0 !important;
    }
    
    /* Mobile typography */
    .hero-section h1 {
        font-size: var(--font-3xl) !important;
    }
    
    .hero-section .hero-description {
        font-size: var(--font-base) !important;
    }
    
    /* Compact cards */
    .solution-visual-card .card-content {
        padding: var(--space-5) !important;
    }
    
    /* Smaller buttons */
    .cta-primary {
        padding: var(--space-3) var(--space-6) !important;
        font-size: var(--font-sm) !important;
    }
}