/* =============================================
   PLANESTI LANDING PAGE - SECTIONS
   =============================================
   
   TABLE OF CONTENTS:
   ------------------
   1.  HERO SECTION
       1.1  Base Hero
       1.2  Hero Heights (Admin Controlled)
       1.3  Hero Content Widths (Admin Controlled)
       1.4  Hero Padding Sizes (Admin Controlled)
       1.5  Hero Layouts (Admin Controlled)
       1.6  Hero Vertical Alignment (Admin Controlled)
       1.7  Hero Text Colors (Admin Controlled)
       1.8  Hero Text Alignment (Admin Controlled)
       1.9  Hero Content Elements
       1.10 Hero Stats
       1.11 Hero Media Area
       1.12 Hero Buttons
   2.  TRUST BAR
   3.  HOW IT WORKS
   4.  FEATURES
   5.  TESTIMONIALS
   6.  BLOG PREVIEW
   7.  PRICING
   8.  CTA SECTION
   9.  SHARED SECTION STYLES
   10. RESPONSIVE - ALL SECTIONS
   
   ============================================= */


/* ==============================================
   1. HERO SECTION
   ============================================== */

/* ---------------------------------------------
   1.1 Base Hero
   --------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 255, 255, 0.03) 50px, rgba(255, 255, 255, 0.03) 51px),
        repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 255, 255, 0.03) 50px, rgba(255, 255, 255, 0.03) 51px);
    opacity: 0.3;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* When transparent header is enabled - hero goes behind navbar */
.hero.hero-behind-header {
    margin-top: calc(-1 * (var(--announcement-bar-height, 0px) + var(--top-bar-height, 0px) + var(--header-height, 72px)));
}

/* Push hero content below the header area */
.hero.hero-behind-header .hero-content {
    padding-top: calc(var(--announcement-bar-height, 0px) + var(--top-bar-height, 0px) + var(--header-height, 72px) + 40px);
}

/* ---------------------------------------------
   1.2 Hero Heights (Admin Controlled)
   --------------------------------------------- */
.hero.hero-height-small {
    min-height: 400px;
}

.hero.hero-height-medium {
    min-height: 500px;
}

.hero.hero-height-large {
    min-height: 600px;
}

.hero.hero-height-fullscreen {
    min-height: 100vh;
}

/* Ensure hero respects min-height even with flex */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---------------------------------------------
   1.3 Hero Content Widths (Admin Controlled)
   --------------------------------------------- */
.hero.hero-width-narrow .hero-container {
    max-width: 800px;
    margin: 0 auto;
}

.hero.hero-width-medium .hero-container {
    max-width: 1000px;
    margin: 0 auto;
}

.hero.hero-width-wide .hero-container {
    max-width: 1200px;
    margin: 0 auto;
}

.hero.hero-width-full .hero-container {
    max-width: 100%;
}

/* ---------------------------------------------
   1.4 Hero Padding Sizes (Admin Controlled)
   --------------------------------------------- */
.hero.hero-padding-small {
    padding: 60px 0;
}

.hero.hero-padding-medium {
    padding: 100px 0;
}

.hero.hero-padding-large {
    padding: 140px 0;
}

/* Adjust padding when behind header */
.hero.hero-behind-header.hero-padding-small {
    padding-bottom: 60px;
}

.hero.hero-behind-header.hero-padding-medium {
    padding-bottom: 100px;
}

.hero.hero-behind-header.hero-padding-large {
    padding-bottom: 140px;
}

/* ---------------------------------------------
   1.5 Hero Layouts (Admin Controlled)
   --------------------------------------------- */
.hero-content {
    display: grid;
    gap: 60px;
    align-items: center;
    width: 100%;
}

/* Layout: Content Only */
.hero.hero-layout-content_only .hero-content {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.hero.hero-layout-content_only .hero-buttons {
    justify-content: center;
}

/* Layout: Content Left + Media Right */
.hero.hero-layout-content_left_media_right .hero-content {
    grid-template-columns: 1fr 1fr;
}
.hero.hero-layout-content_left_media_right .hero-text {
    order: 1;
}
.hero.hero-layout-content_left_media_right .hero-media {
    order: 2;
}

/* Layout: Media Left + Content Right */
.hero.hero-layout-content_right_media_left .hero-content {
    grid-template-columns: 1fr 1fr;
}
.hero.hero-layout-content_right_media_left .hero-text {
    order: 2;
}
.hero.hero-layout-content_right_media_left .hero-media {
    order: 1;
}


/* ---------------------------------------------
   1.6 Hero Vertical Alignment (Admin Controlled)
   --------------------------------------------- */
.hero {
    display: flex;
    flex-direction: column;
}

.hero > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hero .hero-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Top Alignment */
.hero.hero-valign-top .hero-container {
    justify-content: flex-start;
}

/* Center Alignment */
.hero.hero-valign-center .hero-container {
    justify-content: center;
}

/* Bottom Alignment */
.hero.hero-valign-bottom .hero-container {
    justify-content: flex-end;
}

/* Align items within grid for 2-column layouts */
.hero.hero-valign-top .hero-content {
    align-items: flex-start;
}

.hero.hero-valign-center .hero-content {
    align-items: center;
}

.hero.hero-valign-bottom .hero-content {
    align-items: flex-end;
}

/* ---------------------------------------------
   1.7 Hero Text Colors (Admin Controlled)
   --------------------------------------------- */
.hero.hero-text-light .hero-text h1,
.hero.hero-text-light .hero-text h2 {
    color: #ffffff;
}

.hero.hero-text-light .hero-text p {
    color: rgba(255, 255, 255, 0.85);
}

.hero.hero-text-light .stat-number {
    color: #ffffff;
}

.hero.hero-text-light .stat-label {
    color: rgba(255, 255, 255, 0.7);
}

.hero.hero-text-dark .hero-text h1,
.hero.hero-text-dark .hero-text h2 {
    color: #1e293b;
}

.hero.hero-text-dark .hero-text p {
    color: #475569;
}

.hero.hero-text-dark .stat-number {
    color: var(--primary);
}

.hero.hero-text-dark .stat-label {
    color: #64748b;
}

/* ---------------------------------------------
   1.8 Hero Text Alignment (Admin Controlled)
   --------------------------------------------- */
.hero.hero-align-left .hero-text {
    text-align: left;
}
.hero.hero-align-left .hero-buttons {
    justify-content: flex-start;
}
.hero.hero-align-left .hero-stats {
    justify-content: flex-start;
}

.hero.hero-align-center .hero-text {
    text-align: center;
}
.hero.hero-align-center .hero-buttons {
    justify-content: center;
}
.hero.hero-align-center .hero-stats {
    justify-content: center;
}

.hero.hero-align-right .hero-text {
    text-align: right;
}
.hero.hero-align-right .hero-buttons {
    justify-content: flex-end;
}
.hero.hero-align-right .hero-stats {
    justify-content: flex-end;
}

/* ---------------------------------------------
   1.9 Hero Content Elements
   --------------------------------------------- */
.hero-text h1 {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
}

.hero-text .highlight {
    background: linear-gradient(135deg, var(--primary-light), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-text p {
    font-size: 18px;
    margin-bottom: 32px;
    line-height: 1.7;
}

/* ---------------------------------------------
   1.10 Hero Stats
   --------------------------------------------- */
.hero-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 32px;
}


/* Buttons Wrapper for Inline Stats */
.hero-buttons-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}

.hero-buttons-wrapper.has-inline-stats {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}

.hero-buttons-wrapper.has-inline-stats .hero-buttons {
    margin-bottom: 0;
}

.hero-buttons-wrapper.has-inline-stats .hero-stats {
    margin-top: 0;
}

/* Stats Inline - Same row as buttons */
.hero-stats.stats-inline {
    margin-top: 0;
}

.stat-item {
    text-align: left;
}

.stat-number {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 4px;
    line-height: 1.2;
}

.stat-label {
    font-size: 14px;
    font-weight: 500;
}

.stat-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

/* Stat item alignment fix */
.hero-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-stats .stat-icon {
    margin-bottom: 8px;
}

/* ---------------------------------------------
   1.11 Hero Media Area
   --------------------------------------------- */
.hero-media {
    position: relative;
}

/* Media: Image */
.hero-media-image {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Media: Video */
.hero-media-video {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.hero-media-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
}

/* Media: Card (Dashboard Preview) */
.hero-media-card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.hero-media-card .card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 24px;
}

.hero-media-card .card-icon {
    font-size: 28px;
}

.hero-media-card .card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.hero-media-card .card-chart {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    height: 200px;
    padding: 20px;
}

.hero-media-card .chart-bar {
    flex: 1;
    background: linear-gradient(to top, var(--primary), var(--primary-light));
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
    position: relative;
    transform-origin: bottom;
}

.hero-media-card .chart-bar:hover {
    transform: scaleY(1.05);
}

.hero-media-card .chart-label {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Media: Embed */
.hero-media-embed {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ---------------------------------------------
   1.12 Hero Buttons
   --------------------------------------------- */
.hero-buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.hero-buttons .btn {
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* === SOLID STYLE === */
/* Primary Button - Solid */
.hero-buttons .btn-accent.btn-hero-solid {
    background: var(--accent, #f59e0b);
    color: #ffffff;
    border: 2px solid var(--accent, #f59e0b);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.hero-buttons .btn-accent.btn-hero-solid:hover {
    background: var(--accent-dark, #d97706);
    border-color: var(--accent-dark, #d97706);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

/* Secondary Button - Solid */
.hero-buttons .btn-white.btn-hero-solid {
    background: #ffffff;
    color: var(--primary, #016db7);
    border: 2px solid #ffffff;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.hero-buttons .btn-white.btn-hero-solid:hover {
    background: #f0f0f0;
    border-color: #f0f0f0;
    transform: translateY(-2px);
}

/* === OUTLINE STYLE === */
/* Primary Button - Outline */
.hero-buttons .btn-accent.btn-hero-outline {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.hero-buttons .btn-accent.btn-hero-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* Secondary Button - Outline */
.hero-buttons .btn-white.btn-hero-outline {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.hero-buttons .btn-white.btn-hero-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* === GRADIENT STYLE === */
/* Primary Button - Gradient */
.hero-buttons .btn-accent.btn-hero-gradient {
    background: linear-gradient(135deg, var(--accent, #f59e0b), var(--accent-dark, #d97706));
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.hero-buttons .btn-accent.btn-hero-gradient:hover {
    background: linear-gradient(135deg, var(--accent-dark, #d97706), var(--accent, #f59e0b));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

/* Secondary Button - Gradient (subtle) */
.hero-buttons .btn-white.btn-hero-gradient {
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
    color: var(--primary, #016db7);
    border: none;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

.hero-buttons .btn-white.btn-hero-gradient:hover {
    background: linear-gradient(135deg, #ffffff, rgba(255,255,255,0.95));
    transform: translateY(-2px);
}

/* === GHOST STYLE === */
/* Primary Button - Ghost */
.hero-buttons .btn-accent.btn-hero-ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: none;
    backdrop-filter: blur(4px);
}

.hero-buttons .btn-accent.btn-hero-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Secondary Button - Ghost */
.hero-buttons .btn-white.btn-hero-ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    border: none;
}

.hero-buttons .btn-white.btn-hero-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transform: translateY(-2px);
}

/* === DARK TEXT MODE (for light backgrounds) === */
.hero.hero-text-dark .hero-buttons .btn-accent.btn-hero-outline {
    color: var(--primary, #016db7);
    border-color: var(--primary, #016db7);
}

.hero.hero-text-dark .hero-buttons .btn-accent.btn-hero-outline:hover {
    background: rgba(1, 109, 183, 0.1);
}

.hero.hero-text-dark .hero-buttons .btn-white.btn-hero-outline {
    color: var(--text, #1e293b);
    border-color: var(--border, #e2e8f0);
}

.hero.hero-text-dark .hero-buttons .btn-white.btn-hero-outline:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--text, #1e293b);
}

.hero.hero-text-dark .hero-buttons .btn-accent.btn-hero-ghost {
    background: rgba(1, 109, 183, 0.1);
    color: var(--primary, #016db7);
}

.hero.hero-text-dark .hero-buttons .btn-accent.btn-hero-ghost:hover {
    background: rgba(1, 109, 183, 0.2);
}

.hero.hero-text-dark .hero-buttons .btn-white.btn-hero-ghost {
    color: var(--text-light, #64748b);
}

.hero.hero-text-dark .hero-buttons .btn-white.btn-hero-ghost:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text, #1e293b);
}


/* =============================================
   1.12.5 - Hero Typography Sizing Classes
   ============================================= */

/* Headline Sizes */
.hero.hero-headline-small .hero-text h1 { font-size: 40px; }
.hero.hero-headline-medium .hero-text h1 { font-size: 48px; }
.hero.hero-headline-large .hero-text h1 { font-size: 56px; }
.hero.hero-headline-xlarge .hero-text h1 { font-size: 64px; }

/* Sub-headline Sizes */
.hero.hero-subheadline-small .hero-text > p { font-size: 16px; }
.hero.hero-subheadline-medium .hero-text > p { font-size: 18px; }
.hero.hero-subheadline-large .hero-text > p { font-size: 20px; }

/* Stats Number Sizes */
.hero.hero-stats-number-small .hero-stats .stat-number { font-size: 28px; }
.hero.hero-stats-number-medium .hero-stats .stat-number { font-size: 36px; }
.hero.hero-stats-number-large .hero-stats .stat-number { font-size: 44px; }

/* Stats Label Sizes */
.hero.hero-stats-label-small .hero-stats .stat-label { font-size: 12px; }
.hero.hero-stats-label-medium .hero-stats .stat-label { font-size: 14px; }
.hero.hero-stats-label-large .hero-stats .stat-label { font-size: 16px; }

/* ---------------------------------------------
   1.13 Hero Responsive
   --------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
    /* Headline responsive - tablet */
    .hero.hero-headline-small .hero-text h1 { font-size: 34px; }
    .hero.hero-headline-medium .hero-text h1 { font-size: 38px; }
    .hero.hero-headline-large .hero-text h1 { font-size: 44px; }
    .hero.hero-headline-xlarge .hero-text h1 { font-size: 50px; }
    
    /* Stats number responsive - tablet */
    .hero.hero-stats-number-small .hero-stats .stat-number { font-size: 24px; }
    .hero.hero-stats-number-medium .hero-stats .stat-number { font-size: 30px; }
    .hero.hero-stats-number-large .hero-stats .stat-number { font-size: 36px; }
    
    .hero-text p {
        font-size: 17px;
    }
    
    .hero-content {
        gap: 40px;
    }
    
    .hero-stats {
        gap: 30px;
    }
    
    .hero-media-card {
        padding: 24px;
    }
    
    .hero-media-card .card-chart {
        height: 160px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Heights - reduce for mobile */
    .hero.hero-height-small { min-height: 350px; }
    .hero.hero-height-medium { min-height: 400px; }
    .hero.hero-height-large { min-height: 450px; }
    .hero.hero-height-fullscreen { min-height: 100vh; }
    
    /* Padding - reduce for mobile */
    .hero.hero-padding-small { padding: 40px 0; }
    .hero.hero-padding-medium { padding: 60px 0; }
    .hero.hero-padding-large { padding: 80px 0; }
    
    /* Adjust padding for transparent header on mobile */
    .hero.hero-behind-header .hero-content {
        padding-top: calc(var(--announcement-bar-height, 0px) + var(--top-bar-height, 0px) + var(--header-height, 60px) + 30px);
    }
    
    /* Stack columns on mobile - ALL layouts become single column */
    .hero.hero-layout-content_left_media_right .hero-content,
    .hero.hero-layout-content_right_media_left .hero-content {
        grid-template-columns: 1fr;
    }
    
    /* Content always first on mobile */
    .hero.hero-layout-content_left_media_right .hero-text,
    .hero.hero-layout-content_right_media_left .hero-text {
        order: 1;
    }
    
    .hero.hero-layout-content_left_media_right .hero-media,
    .hero.hero-layout-content_right_media_left .hero-media {
        order: 2;
    }
    
    /* Center text on mobile for all layouts */
    .hero .hero-text {
        text-align: center;
    }
    
    .hero .hero-buttons {
        justify-content: center;
    }
    
    .hero .hero-stats {
        justify-content: center;
    }
    
    /* Headline responsive - mobile */
    .hero.hero-headline-small .hero-text h1 { font-size: 28px; }
    .hero.hero-headline-medium .hero-text h1 { font-size: 30px; }
    .hero.hero-headline-large .hero-text h1 { font-size: 32px; }
    .hero.hero-headline-xlarge .hero-text h1 { font-size: 36px; }
    
    /* Sub-headline responsive - mobile */
    .hero.hero-subheadline-small .hero-text > p { font-size: 14px; }
    .hero.hero-subheadline-medium .hero-text > p { font-size: 15px; }
    .hero.hero-subheadline-large .hero-text > p { font-size: 16px; }
    
    /* Stats number responsive - mobile */
    .hero.hero-stats-number-small .hero-stats .stat-number { font-size: 22px; }
    .hero.hero-stats-number-medium .hero-stats .stat-number { font-size: 26px; }
    .hero.hero-stats-number-large .hero-stats .stat-number { font-size: 30px; }
    
    .hero-text h1 {
        margin-bottom: 16px;
    }
    
    .hero-text p {
        margin-bottom: 24px;
    }
    
    /* Stats */
    .hero-stats {
        gap: 24px;
        margin-top: 24px;
    }
    
    .stat-item {
        text-align: center;
    }
    
    .stat-label {
        font-size: 13px;
    }
    
    /* Buttons */
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        margin-bottom: 24px;
    }
    
    .hero-buttons .btn {
        width: 100%;
        padding: 14px 24px;
    }
    
    /* Buttons wrapper with inline stats */
    .hero-buttons-wrapper.has-inline-stats {
        flex-direction: column;
        gap: 24px;
    }
    
    .hero-stats.stats-inline {
        width: 100%;
        justify-content: center;
    }
    
    /* Media area */
    .hero-content {
        gap: 32px;
    }
    
    .hero-media-card {
        padding: 20px;
    }
    
    .hero-media-card .card-chart {
        height: 140px;
        padding: 16px;
    }
    
    .hero-media-card .chart-label {
        font-size: 10px;
    }
    
    .hero-media-image {
        border-radius: 12px;
    }
    
    .hero-media-video {
        border-radius: 12px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    /* Headline responsive - small mobile */
    .hero.hero-headline-small .hero-text h1 { font-size: 24px; }
    .hero.hero-headline-medium .hero-text h1 { font-size: 26px; }
    .hero.hero-headline-large .hero-text h1 { font-size: 28px; }
    .hero.hero-headline-xlarge .hero-text h1 { font-size: 30px; }
    
    .hero-text p {
        font-size: 15px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 16px;
    }
    
    
    .hero-media-card .card-chart {
        height: 120px;
        gap: 10px;
    }
}


/* ==============================================
   2. STATS BAR SECTION
   ============================================== */

/* ----------------------------------------------
   2.1 Base Styles
   ---------------------------------------------- */
.stats-bar-section {
    position: relative;
    overflow: hidden;
}

.stats-bar-section .container {
    position: relative;
    z-index: 2;
}

.stats-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Section Header */
.stats-header {
    text-align: center;
    margin-bottom: 40px;
}

.stats-section-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.stats-section-subtitle {
    font-size: 16px;
    margin: 0;
    opacity: 0.85;
}

/* ----------------------------------------------
   2.2 Background Styles
   ---------------------------------------------- */
.stats-bg-white {
    background-color: #ffffff;
}

.stats-bg-light {
    background-color: #f8fafc;
}

.stats-bg-dark {
    background-color: #1e293b;
}

.stats-bg-primary {
    background-color: var(--primary, #016db7);
}

/* ----------------------------------------------
   2.3 Padding Sizes
   ---------------------------------------------- */
.stats-padding-compact {
    padding: 48px 0;
}

.stats-padding-normal {
    padding: 80px 0;
}

.stats-padding-spacious {
    padding: 120px 0;
}

/* ----------------------------------------------
   2.3b Content Width
   ---------------------------------------------- */
.stats-bar-section.stats-width-narrow .container {
    max-width: 896px;
}

.stats-bar-section.stats-width-default .container {
    max-width: 1152px;
}

.stats-bar-section.stats-width-wide .container {
    max-width: 1280px;
}

.stats-bar-section.stats-width-full .container {
    max-width: 100%;
    padding-left: 32px;
    padding-right: 32px;
}

/* ----------------------------------------------
   2.3c Heading Size (Section Title)
   ---------------------------------------------- */
.stats-bar-section.stats-heading-sm .stats-section-title {
    font-size: 24px;
}

.stats-bar-section.stats-heading-md .stats-section-title {
    font-size: 28px;
}

.stats-bar-section.stats-heading-lg .stats-section-title {
    font-size: 32px;
}

.stats-bar-section.stats-heading-xl .stats-section-title {
    font-size: 38px;
}

/* ----------------------------------------------
   2.3d Text Size (Section Subtitle)
   ---------------------------------------------- */
.stats-bar-section.stats-text-sm .stats-section-subtitle {
    font-size: 14px;
}

.stats-bar-section.stats-text-md .stats-section-subtitle {
    font-size: 16px;
}

.stats-bar-section.stats-text-lg .stats-section-subtitle {
    font-size: 18px;
}

/* ----------------------------------------------
   2.4 Layout Styles
   ---------------------------------------------- */

/* === GRID Layout (Simple clean boxes) === */
.stats-layout-grid .stats-content {
    display: grid;
    gap: 20px;
}

.stats-layout-grid .stats-item {
    display: block;
}

.stats-layout-grid .stats-divider {
    display: none;
}

.stats-layout-grid .stats-item-inner {
    background: var(--stat-card-bg, #ffffff);
    border-radius: 8px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
}

/* Grid Columns */
.stats-layout-grid.stats-cols-2 .stats-content { grid-template-columns: repeat(2, 1fr); }
.stats-layout-grid.stats-cols-3 .stats-content { grid-template-columns: repeat(3, 1fr); }
.stats-layout-grid.stats-cols-4 .stats-content { grid-template-columns: repeat(4, 1fr); }
.stats-layout-grid.stats-cols-5 .stats-content { grid-template-columns: repeat(5, 1fr); }
.stats-layout-grid.stats-cols-auto .stats-content { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* === INLINE Layout (No boxes, horizontal with dividers) === */
.stats-layout-inline .stats-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.stats-layout-inline .stats-item {
    display: flex;
    align-items: center;
}

.stats-layout-inline .stats-item-inner {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0;
    padding: 16px 40px;
    text-align: center;
    position: relative;
}

/* Inline Dividers */
.stats-layout-inline .stats-divider {
    display: none;
}

.stats-layout-inline.stats-divider-line .stats-divider {
    display: block;
    width: 1px;
    height: 50px;
    flex-shrink: 0;
}

.stats-layout-inline.stats-divider-dot .stats-divider {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* === CARDS Layout (Styled elevated boxes) === */
.stats-layout-cards .stats-content {
    display: grid;
    gap: 24px;
}

.stats-layout-cards .stats-item {
    display: block;
}

.stats-layout-cards .stats-divider {
    display: none;
}

.stats-layout-cards .stats-item-inner {
    background: var(--stat-card-bg, #ffffff);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
}

/* Cards Columns */
.stats-layout-cards.stats-cols-2 .stats-content { grid-template-columns: repeat(2, 1fr); }
.stats-layout-cards.stats-cols-3 .stats-content { grid-template-columns: repeat(3, 1fr); }
.stats-layout-cards.stats-cols-4 .stats-content { grid-template-columns: repeat(4, 1fr); }
.stats-layout-cards.stats-cols-5 .stats-content { grid-template-columns: repeat(5, 1fr); }
.stats-layout-cards.stats-cols-auto .stats-content { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ----------------------------------------------
   2.5 Card Styles (Cards Layout Only)
   ---------------------------------------------- */
.stats-layout-cards.stats-card-shadow .stats-item-inner {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.stats-layout-cards.stats-card-bordered .stats-item-inner {
    box-shadow: none;
    border: 2px solid var(--stat-divider-color, rgba(0, 0, 0, 0.1));
}

.stats-layout-cards.stats-card-minimal .stats-item-inner {
    box-shadow: none;
    background: rgba(0, 0, 0, 0.02) !important;
}

.stats-layout-cards.stats-card-elevated .stats-item-inner {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.stats-layout-cards.stats-card-glass .stats-item-inner {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

/* ----------------------------------------------
   2.6 Border Radius
   ---------------------------------------------- */
.stats-radius-none .stats-item-inner { border-radius: 0; }
.stats-radius-small .stats-item-inner { border-radius: 8px; }
.stats-radius-medium .stats-item-inner { border-radius: 12px; }
.stats-radius-large .stats-item-inner { border-radius: 20px; }

/* ----------------------------------------------
   2.7 Spacing
   ---------------------------------------------- */
/* Grid/Cards spacing */
.stats-spacing-compact.stats-layout-grid .stats-content,
.stats-spacing-compact.stats-layout-cards .stats-content { gap: 16px; }

.stats-spacing-normal.stats-layout-grid .stats-content,
.stats-spacing-normal.stats-layout-cards .stats-content { gap: 24px; }

.stats-spacing-relaxed.stats-layout-grid .stats-content,
.stats-spacing-relaxed.stats-layout-cards .stats-content { gap: 32px; }

/* Inline spacing */
.stats-spacing-compact.stats-layout-inline .stats-item-inner { padding: 12px 28px; }
.stats-spacing-normal.stats-layout-inline .stats-item-inner { padding: 16px 40px; }
.stats-spacing-relaxed.stats-layout-inline .stats-item-inner { padding: 20px 56px; }

/* Card inner padding */
.stats-spacing-compact.stats-layout-cards .stats-item-inner { padding: 24px 20px; }
.stats-spacing-normal.stats-layout-cards .stats-item-inner { padding: 32px 24px; }
.stats-spacing-relaxed.stats-layout-cards .stats-item-inner { padding: 40px 32px; }

/* ----------------------------------------------
   2.8 Icon Styles
   ---------------------------------------------- */
.stats-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

/* Icon Sizes */
.stats-icon-size-small .stats-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

.stats-icon-size-medium .stats-icon {
    width: 52px;
    height: 52px;
    font-size: 22px;
}

.stats-icon-size-large .stats-icon {
    width: 64px;
    height: 64px;
    font-size: 28px;
}

/* Icon Style - Simple (no background) */
.stats-icon-simple .stats-icon {
    background: transparent !important;
    width: auto;
    height: auto;
}

/* Icon Style - Circle */
.stats-icon-circle .stats-icon {
    border-radius: 50%;
}

/* Icon Style - Square */
.stats-icon-square .stats-icon {
    border-radius: 10px;
}

/* Icon Style - Outline Circle */
.stats-icon-outline-circle .stats-icon {
    border-radius: 50%;
    background: transparent !important;
    border: 2px solid currentColor;
}

/* Icon Style - Outline Square */
.stats-icon-outline-square .stats-icon {
    border-radius: 10px;
    background: transparent !important;
    border: 2px solid currentColor;
}

/* Icon Style - None */
.stats-icon-none .stats-icon {
    display: none;
}

/* Icon Position - Top (default) */
.stats-icon-pos-top .stats-item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Icon Position - Left */
.stats-icon-pos-left .stats-item-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 16px;
}

.stats-icon-pos-left .stats-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.stats-icon-pos-left .stats-content-wrap {
    display: flex;
    flex-direction: column;
}

/* Icon Position - Right */
.stats-icon-pos-right .stats-item-inner {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    text-align: right;
    gap: 16px;
}

.stats-icon-pos-right .stats-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* ----------------------------------------------
   2.9 Number Styles
   ---------------------------------------------- */
.stats-number {
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.stats-number-sm .stats-number { font-size: 28px; }
.stats-number-md .stats-number { font-size: 36px; }
.stats-number-lg .stats-number { font-size: 44px; }
.stats-number-xl .stats-number { font-size: 52px; }

.counter-suffix {
    font-size: 0.55em;
    font-weight: 600;
    margin-left: 2px;
}

/* ----------------------------------------------
   2.10 Label Styles
   ---------------------------------------------- */
.stats-label {
    font-weight: 500;
    line-height: 1.4;
}

.stats-label-sm .stats-label { font-size: 13px; }
.stats-label-md .stats-label { font-size: 15px; }
.stats-label-lg .stats-label { font-size: 17px; }

/* ----------------------------------------------
   2.11 Description Tooltip
   ---------------------------------------------- */
.stats-description {
    position: absolute;
    top: 12px;
    right: 12px;
    opacity: 0.4;
    cursor: help;
    font-size: 14px;
    transition: opacity 0.2s;
}

.stats-description:hover {
    opacity: 1;
}

/* ----------------------------------------------
   2.12 Hover Effects (Grid & Cards only)
   ---------------------------------------------- */
.stats-hover-lift.stats-layout-grid .stats-item-inner:hover,
.stats-hover-lift.stats-layout-cards .stats-item-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.stats-hover-scale.stats-layout-grid .stats-item-inner:hover,
.stats-hover-scale.stats-layout-cards .stats-item-inner:hover {
    transform: scale(1.03);
}

.stats-hover-glow.stats-layout-grid .stats-item-inner:hover,
.stats-hover-glow.stats-layout-cards .stats-item-inner:hover {
    box-shadow: 0 0 30px rgba(1, 109, 183, 0.25);
}

/* No hover effects for inline layout */
.stats-layout-inline .stats-item-inner:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ----------------------------------------------
   2.13 Reveal Animations
   ---------------------------------------------- */
@keyframes statsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes statsSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.stats-bar-section[data-reveal="fade"] {
    animation: statsFadeIn 0.8s ease forwards;
}

.stats-bar-section[data-reveal="slide"] {
    animation: statsSlideUp 0.8s ease forwards;
}

.stats-bar-section[data-reveal="stagger"] .stagger-item {
    opacity: 0;
    animation: statsSlideUp 0.6s ease forwards;
}

/* ----------------------------------------------
   2.14 Dark Background Adjustments
   ---------------------------------------------- */
.stats-bg-dark .stats-item-inner,
.stats-bg-primary .stats-item-inner {
    background: rgba(255, 255, 255, 0.08);
}

.stats-bg-dark.stats-layout-inline .stats-item-inner,
.stats-bg-primary.stats-layout-inline .stats-item-inner {
    background: transparent !important;
}

/* Dark dividers */
.stats-bg-dark .stats-divider,
.stats-bg-primary .stats-divider {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ----------------------------------------------
   2.15 Responsive
   ---------------------------------------------- */
@media (max-width: 1024px) {
    .stats-layout-grid.stats-cols-5 .stats-content,
    .stats-layout-cards.stats-cols-5 .stats-content {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stats-layout-grid.stats-cols-4 .stats-content,
    .stats-layout-cards.stats-cols-4 .stats-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-number-xl .stats-number { font-size: 44px; }
    .stats-section-title { font-size: 24px; }
}

@media (max-width: 768px) {
    /* Class-based responsive padding */
    .stats-padding-compact { padding: 32px 0; }
    .stats-padding-normal { padding: 60px 0; }
    .stats-padding-spacious { padding: 80px 0; }
    
    /* Full width mobile adjustment */
    .stats-bar-section.stats-width-full .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .stats-header { margin-bottom: 30px; }
    
    .stats-layout-grid .stats-content,
    .stats-layout-cards .stats-content {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .stats-layout-inline .stats-content {
        flex-direction: column;
        gap: 0;
    }
    
    .stats-layout-inline .stats-item {
        width: 100%;
        justify-content: center;
    }
    
    .stats-layout-inline .stats-divider {
        display: none !important;
    }
    
    .stats-layout-inline .stats-item:not(:last-child) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .stats-bg-dark.stats-layout-inline .stats-item:not(:last-child),
    .stats-bg-primary.stats-layout-inline .stats-item:not(:last-child) {
        border-bottom-color: rgba(255, 255, 255, 0.15);
    }
    
    .stats-layout-inline .stats-item-inner {
        padding: 20px 16px !important;
    }
    
    .stats-number-lg .stats-number { font-size: 36px; }
    .stats-number-xl .stats-number { font-size: 40px; }
}

@media (max-width: 480px) {
    .stats-layout-grid .stats-content,
    .stats-layout-cards .stats-content {
        grid-template-columns: 1fr !important;
    }
    
    .stats-number-md .stats-number { font-size: 32px; }
    .stats-number-lg .stats-number { font-size: 36px; }
    .stats-number-xl .stats-number { font-size: 40px; }
    
    .stats-icon-size-large .stats-icon {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
}


/* ==============================================
   3. LOGOS BAR SECTION
   ============================================== */

/* ----------------------------------------------
   3.1 Base Styles
   ---------------------------------------------- */
.logos-bar-section {
    position: relative;
    overflow: hidden;
}

.logos-bar-section .container {
    position: relative;
    z-index: 2;
}

.logos-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Section Header */
.logos-header {
    text-align: center;
    margin-bottom: 40px;
}

.logos-section-title {
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.logos-section-subtitle {
    margin: 0;
    opacity: 0.8;
    line-height: 1.6;
}

/* ----------------------------------------------
   3.2 Background Styles
   ---------------------------------------------- */
.logos-bg-white {
    background-color: #ffffff;
}

.logos-bg-light {
    background-color: #f8fafc;
}

.logos-bg-dark {
    background-color: #1e293b;
}

.logos-bg-primary {
    background-color: var(--primary, #016db7);
}

/* ----------------------------------------------
   3.3 Section Padding (Standardized)
   ---------------------------------------------- */
.logos-bar-section.logos-padding-compact {
    padding: 48px 0;
}

.logos-bar-section.logos-padding-normal {
    padding: 80px 0;
}

.logos-bar-section.logos-padding-spacious {
    padding: 120px 0;
}

/* ----------------------------------------------
   3.4 Content Width (Standardized)
   ---------------------------------------------- */
.logos-bar-section.logos-width-narrow .container {
    max-width: 896px;
}

.logos-bar-section.logos-width-default .container {
    max-width: 1152px;
}

.logos-bar-section.logos-width-wide .container {
    max-width: 1280px;
}

.logos-bar-section.logos-width-full .container {
    max-width: 100%;
}

/* ----------------------------------------------
   3.5 Heading Size (Standardized)
   ---------------------------------------------- */
.logos-bar-section.logos-heading-sm .logos-section-title {
    font-size: 28px;
}

.logos-bar-section.logos-heading-md .logos-section-title {
    font-size: 32px;
}

.logos-bar-section.logos-heading-lg .logos-section-title {
    font-size: 36px;
}

.logos-bar-section.logos-heading-xl .logos-section-title {
    font-size: 42px;
}

/* ----------------------------------------------
   3.6 Text Size (Standardized)
   ---------------------------------------------- */
.logos-bar-section.logos-text-sm .logos-section-subtitle {
    font-size: 14px;
}

.logos-bar-section.logos-text-md .logos-section-subtitle {
    font-size: 16px;
}

.logos-bar-section.logos-text-lg .logos-section-subtitle {
    font-size: 18px;
}

/* ----------------------------------------------
   3.7 Logos Wrapper
   ---------------------------------------------- */
.logos-wrapper {
    position: relative;
    z-index: 2;
}

/* ----------------------------------------------
   3.8 Marquee Animation (Seamless Infinite Loop)
   ---------------------------------------------- */
.logos-marquee {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.logos-track {
    display: flex;
    align-items: center;
    gap: 60px;
    width: max-content;
    will-change: transform;
}

/* Animation applied by JavaScript for precise control */
.logos-track.animate {
    animation: logosScroll var(--scroll-duration, 30s) linear infinite;
}

.logos-track.animate-reverse {
    animation: logosScrollReverse var(--scroll-duration, 30s) linear infinite;
}

@keyframes logosScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--scroll-distance, -50%));
    }
}

@keyframes logosScrollReverse {
    0% {
        transform: translateX(var(--scroll-distance, -50%));
    }
    100% {
        transform: translateX(0);
    }
}

/* Paused State (via JS) */
.logos-marquee.paused .logos-track {
    animation-play-state: paused;
}

/* Paused State (via JS button or hover) */
.logos-marquee.paused .logos-track,
.logos-track[style*="paused"] {
    animation-play-state: paused;
}

/* Pause on Hover - ONLY when hovering on logos */
.logos-pause-hover .logos-item:hover ~ *,
.logos-pause-hover .logos-item:hover {
    animation-play-state: paused;
}

.logos-pause-hover .logos-track:hover {
    animation-play-state: paused;
}

/* Paused State (via JS button) */
.logos-marquee.paused .logos-track {
    animation-play-state: paused;
}

/* ----------------------------------------------
   3.9 Edge Fade Effect (CSS Mask)
   ---------------------------------------------- */

/* Small fade (5% each side) */
.logos-edge-fade.logos-fade-small {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%
    );
}

/* Medium fade (8% each side) */
.logos-edge-fade.logos-fade-medium {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

/* Large fade (12% each side) */
.logos-edge-fade.logos-fade-large {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
}

/* ----------------------------------------------
   3.10 Static Grid Layout
   ---------------------------------------------- */
.logos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

/* ----------------------------------------------
   3.11 Carousel Layout
   ---------------------------------------------- */
.logos-carousel {
    position: relative;
    min-height: calc(var(--logo-height, 60px) + 20px);
    width: 100%;
    overflow: hidden;
}

.logos-carousel-slide {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    pointer-events: none;
}

.logos-carousel-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    pointer-events: auto;
}

/* ----------------------------------------------
   3.12 Logo Items
   ---------------------------------------------- */
.logos-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.logos-item img {
    height: var(--logo-height, 60px);
    width: auto;
    max-width: 180px;
    object-fit: contain;
    transition: all 0.3s ease;
}

a.logos-item:hover {
    transform: scale(1.05);
}

/* ----------------------------------------------
   3.13 Logo Sizes
   ---------------------------------------------- */
.logos-size-small .logos-item img {
    height: 40px;
}

.logos-size-medium .logos-item img {
    height: 60px;
}

.logos-size-large .logos-item img {
    height: 80px;
}

/* Custom size uses CSS variable --logo-height */

/* ----------------------------------------------
   3.14 Logo Spacing
   ---------------------------------------------- */
.logos-spacing-compact {
    --logo-gap: 30px;
}

.logos-spacing-compact .logos-grid,
.logos-spacing-compact .logos-carousel-slide {
    gap: 30px;
}

.logos-spacing-normal {
    --logo-gap: 60px;
}

.logos-spacing-normal .logos-grid,
.logos-spacing-normal .logos-carousel-slide {
    gap: 60px;
}

.logos-spacing-relaxed {
    --logo-gap: 90px;
}

.logos-spacing-relaxed .logos-grid,
.logos-spacing-relaxed .logos-carousel-slide {
    gap: 90px;
}

/* ----------------------------------------------
   3.15 Logo Color Styles
   ---------------------------------------------- */
/* Color - Default, no filter */
.logos-style-color .logos-item img {
    filter: none;
}

/* Grayscale */
.logos-style-grayscale .logos-item img {
    filter: grayscale(100%);
    opacity: 0.7;
}

/* Grayscale with Color on Hover */
.logos-style-grayscale-hover .logos-item img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.logos-style-grayscale-hover .logos-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ----------------------------------------------
   3.16 Double Row
   ---------------------------------------------- */
.logos-rows-double .logos-marquee {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.logos-rows-double .logos-track:nth-child(2) {
    animation-direction: reverse;
}

.logos-rows-double .logos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
}

/* ----------------------------------------------
   3.17 Play/Pause Button
   ---------------------------------------------- */
.logos-play-btn {
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 20;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.logos-play-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* Dark/Primary/Gradient/Image backgrounds - Light button */
.logos-bg-dark .logos-play-btn,
.logos-bg-primary .logos-play-btn,
.logos-bg-gradient .logos-play-btn,
.logos-bg-image .logos-play-btn {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
}

.logos-bg-dark .logos-play-btn:hover,
.logos-bg-primary .logos-play-btn:hover,
.logos-bg-gradient .logos-play-btn:hover,
.logos-bg-image .logos-play-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.6);
}

/* ----------------------------------------------
   3.18 Reveal Animations
   ---------------------------------------------- */
@keyframes logosFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes logosSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logos-bar-section[data-reveal="fade"] {
    animation: logosFadeIn 0.8s ease forwards;
}

.logos-bar-section[data-reveal="slide"] {
    animation: logosSlideUp 0.8s ease forwards;
}

/* ----------------------------------------------
   3.19 Logos Bar Responsive
   ---------------------------------------------- */
@media (max-width: 1024px) {
    .logos-spacing-relaxed .logos-track,
    .logos-spacing-relaxed .logos-grid {
        gap: 60px;
    }
    
    .logos-item img {
        max-width: 150px;
    }
}

@media (max-width: 768px) {
    /* Responsive Padding (Standardized) */
    .logos-bar-section.logos-padding-compact {
        padding: 32px 0;
    }
    
    .logos-bar-section.logos-padding-normal {
        padding: 48px 0;
    }
    
    .logos-bar-section.logos-padding-spacious {
        padding: 64px 0;
    }
    
    .logos-header {
        margin-bottom: 30px;
    }
    
    .logos-track,
    .logos-grid,
    .logos-carousel-slide {
        gap: 40px !important;
    }
    
    .logos-size-large .logos-item img {
        height: 60px;
    }
    
    .logos-item img {
        max-width: 120px;
    }
    
    .logos-play-btn {
        bottom: 5px;
        right: 10px;
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .logos-size-medium .logos-item img {
        height: 40px;
    }
    
    .logos-size-large .logos-item img {
        height: 50px;
    }
    
    .logos-track,
    .logos-grid,
    .logos-carousel-slide {
        gap: 30px !important;
    }
    
    .logos-item img {
        max-width: 100px;
    }
    
    .logos-carousel-slide {
        flex-wrap: wrap;
    }
}

/* ==============================================
   4. FEATURES
   ============================================== */

/* ---------------------------------------------
   4.1 Base Features
   --------------------------------------------- */
.features {
    padding: 100px 0;
    transition: all 0.3s ease;
}

.features-grid {
    display: grid;
    gap: 24px;
}

/* ---------------------------------------------
   4.2 Background Styles
   --------------------------------------------- */
.features.features-bg-white {
    background: #ffffff;
}

.features.features-bg-light {
    background: var(--bg, #f8fafc);
}

.features.features-bg-gradient {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
}

.features.features-bg-gradient .section-header h2,
.features.features-bg-gradient .feature-card h3 {
    color: var(--text);
}


/* ---------------------------------------------
   4.3 Grid Columns
   --------------------------------------------- */
.features.features-cols-2 .features-grid {
    grid-template-columns: repeat(2, 1fr);
}

.features.features-cols-3 .features-grid {
    grid-template-columns: repeat(3, 1fr);
}

.features.features-cols-4 .features-grid {
    grid-template-columns: repeat(4, 1fr);
}

.features.features-cols-auto .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ---------------------------------------------
   4.4 Spacing
   --------------------------------------------- */
.features.features-spacing-compact .features-grid {
    gap: 16px;
}

.features.features-spacing-normal .features-grid {
    gap: 24px;
}

.features.features-spacing-relaxed .features-grid {
    gap: 32px;
}

/* ---------------------------------------------
   4.4b Section Padding
   --------------------------------------------- */
.features.features-padding-compact {
    padding: 48px 0;
}

.features.features-padding-normal {
    padding: 80px 0;
}

.features.features-padding-spacious {
    padding: 120px 0;
}

/* ---------------------------------------------
   4.4c Content Width
   --------------------------------------------- */
.features.features-width-narrow .container {
    max-width: 896px;
}

.features.features-width-default .container {
    max-width: 1152px;
}

.features.features-width-wide .container {
    max-width: 1280px;
}

.features.features-width-full .container {
    max-width: 100%;
}

/* ---------------------------------------------
   4.4d Heading Size
   --------------------------------------------- */
/* Section Title */
.features.features-heading-sm .section-header h2 { font-size: 28px; }
.features.features-heading-md .section-header h2 { font-size: 32px; }
.features.features-heading-lg .section-header h2 { font-size: 36px; }
.features.features-heading-xl .section-header h2 { font-size: 42px; }

/* Card Title */
.features.features-heading-sm .feature-card h3 { font-size: 16px; }
.features.features-heading-md .feature-card h3 { font-size: 18px; }
.features.features-heading-lg .feature-card h3 { font-size: 20px; }
.features.features-heading-xl .feature-card h3 { font-size: 22px; }

/* ---------------------------------------------
   4.4e Text Size
   --------------------------------------------- */
/* Section Subtitle */
.features.features-text-sm .section-header p { font-size: 14px; }
.features.features-text-md .section-header p { font-size: 16px; }
.features.features-text-lg .section-header p { font-size: 18px; }

/* Card Description */
.features.features-text-sm .feature-card p { font-size: 13px; }
.features.features-text-md .feature-card p { font-size: 14px; }
.features.features-text-lg .feature-card p { font-size: 15px; }

/* ---------------------------------------------
   4.5 Card Styles
   --------------------------------------------- */
.feature-card {
    background: white;
    padding: 32px;
    text-align: center;
}

/* Elevated (Shadow) */
.features.features-style-elevated .feature-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: none;
}

/* Bordered */
.features.features-style-bordered .feature-card {
    border: 2px solid var(--border);
    box-shadow: none;
}

/* Flat */
.features.features-style-flat .feature-card {
    background: var(--bg, #f8fafc);
    border: none;
    box-shadow: none;
}

/* Glass */
.features.features-style-glass .feature-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* ---------------------------------------------
   4.6 Border Radius
   --------------------------------------------- */
.features.features-radius-none .feature-card {
    border-radius: 0;
}

.features.features-radius-small .feature-card {
    border-radius: 8px;
}

.features.features-radius-medium .feature-card {
    border-radius: 12px;
}

.features.features-radius-large .feature-card {
    border-radius: 16px;
}

/* ---------------------------------------------
   4.7 Hover Effects
   --------------------------------------------- */
.features .feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.features.features-hover-none .feature-card:hover {
    transform: none !important;
    box-shadow: inherit !important;
}

.features.features-hover-lift .feature-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.features.features-hover-scale .feature-card:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

.features.features-hover-glow .feature-card:hover {
    box-shadow: 0 0 15px rgba(1, 109, 183, 0.15) !important;
}

/* Bordered card hover - keep border highlight */
.features.features-style-bordered.features-hover-lift .feature-card:hover,
.features.features-style-bordered.features-hover-scale .feature-card:hover,
.features.features-style-bordered.features-hover-glow .feature-card:hover {
    border-color: var(--primary) !important;
}


/* ---------------------------------------------
   4.8 Icon Styles
   --------------------------------------------- */
.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

/* Icon Size */
.features.features-icon-size-small .feature-icon {
    width: 48px;
    height: 48px;
    font-size: 22px;
}

.features.features-icon-size-medium .feature-icon {
    width: 64px;
    height: 64px;
    font-size: 28px;
}

.features.features-icon-size-large .feature-icon {
    width: 80px;
    height: 80px;
    font-size: 36px;
}

/* Icon Style - Filled */
.features.features-icon-filled .feature-icon {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    border-radius: 16px;
}

/* Icon Style - Outlined */
.features.features-icon-outlined .feature-icon {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: 16px;
}

/* Icon Style - Circle Background */
.features.features-icon-circle-bg .feature-icon {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    border-radius: 50%;
}

/* Icon Style - Square Background */
.features.features-icon-square-bg .feature-icon {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    border-radius: 8px;
}

/* ---------------------------------------------
   4.9 Icon Position
   --------------------------------------------- */
/* Top Center (default) */
.features.features-icon-pos-top-center .feature-card {
    text-align: center;
}

.features.features-icon-pos-top-center .feature-icon {
    margin: 0 auto 20px;
}

/* Top Left */
.features.features-icon-pos-top-left .feature-card {
    text-align: left;
}

.features.features-icon-pos-top-left .feature-icon {
    margin: 0 0 20px 0;
}

/* Left Inline */
.features.features-icon-pos-left-inline .feature-card {
    display: flex;
    gap: 20px;
    text-align: left;
    align-items: flex-start;
}

.features.features-icon-pos-left-inline .feature-icon {
    margin: 0;
    flex-shrink: 0;
}

.features.features-icon-pos-left-inline .feature-card h3 {
    margin-top: 0;
}

/* ---------------------------------------------
   4.10 Icon Color Modes
   --------------------------------------------- */
/* Primary (default) - handled by base styles */

/* Accent */
.features.features-icon-color-accent .feature-icon {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark, #d97706));
}

.features.features-icon-color-accent.features-icon-outlined .feature-icon {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

/* Gradient */
.features.features-icon-color-gradient .feature-icon {
    background: linear-gradient(135deg, var(--primary), var(--accent));
}

/* Custom */
.features.features-icon-color-custom .feature-icon {
    background: var(--icon-custom-color, var(--primary));
}

.features.features-icon-color-custom.features-icon-outlined .feature-icon {
    background: transparent;
    border-color: var(--icon-custom-color, var(--primary));
    color: var(--icon-custom-color, var(--primary));
}

/* ---------------------------------------------
   4.11 Feature Card Content
   --------------------------------------------- */
.feature-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------
   4.12 Reveal Animations
   --------------------------------------------- */
.feature-card[data-reveal="fade-up"] {
    opacity: 0;
    transform: translateY(30px);
    animation: featureFadeUp 0.8s ease forwards;
}

.feature-card[data-reveal="fade-in"] {
    opacity: 0;
    transform: translateX(-30px);
    animation: featureFadeIn 0.8s ease forwards;
}

.feature-card[data-reveal="stagger"] {
    opacity: 0;
    transform: translateY(30px);
    animation: featureFadeUp 0.8s ease forwards;
}

@keyframes featureFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes featureFadeIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---------------------------------------------
   4.13 Features Responsive
   --------------------------------------------- */
@media (max-width: 1024px) {
    .features.features-cols-4 .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .features.features-cols-3 .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .features.features-padding-compact { padding: 32px 0; }
    .features.features-padding-normal { padding: 48px 0; }
    .features.features-padding-spacious { padding: 64px 0; }
    
    .features.features-cols-4 .features-grid,
    .features.features-cols-3 .features-grid,
    .features.features-cols-2 .features-grid {
        grid-template-columns: 1fr;
    }
    
    .features.features-icon-pos-left-inline .feature-card {
        flex-direction: column;
        text-align: center;
    }
    
    .features.features-icon-pos-left-inline .feature-icon {
        margin: 0 auto 20px;
    }
    
    .feature-card {
        padding: 24px;
    }
}


/* ==============================================
   5. TESTIMONIALS
   ============================================== */

/* ---------------------------------------------
   5.1 Base Testimonials
   --------------------------------------------- */
.testimonials {
    padding: 100px 0;
    transition: all 0.3s ease;
}

.testimonials-grid {
    display: grid;
    gap: 24px;
}

/* ---------------------------------------------
   5.2 Background Styles
   --------------------------------------------- */
.testimonials.testimonials-bg-white {
    background: #ffffff;
}

.testimonials.testimonials-bg-light {
    background: var(--bg, #f8fafc);
}

.testimonials.testimonials-bg-gradient {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
}

.testimonials.testimonials-bg-gradient .section-header h2,
.testimonials.testimonials-bg-gradient .testimonial-name {
    color: white;
}

.testimonials.testimonials-bg-gradient .section-header p,
.testimonials.testimonials-bg-gradient .testimonial-role,
.testimonials.testimonials-bg-gradient .testimonial-text {
    color: rgba(255, 255, 255, 0.9);
}

/* ---------------------------------------------
   5.3 Grid Columns
   --------------------------------------------- */
.testimonials.testimonials-cols-2 .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
}

.testimonials.testimonials-cols-3 .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
}

.testimonials.testimonials-cols-4 .testimonials-grid {
    grid-template-columns: repeat(4, 1fr);
}

.testimonials.testimonials-cols-auto .testimonials-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ---------------------------------------------
   5.4 Spacing
   --------------------------------------------- */
.testimonials.testimonials-spacing-compact .testimonials-grid {
    gap: 16px;
}

.testimonials.testimonials-spacing-normal .testimonials-grid {
    gap: 24px;
}

.testimonials.testimonials-spacing-relaxed .testimonials-grid {
    gap: 32px;
}

/* ---------------------------------------------
   5.4b Section Padding
   --------------------------------------------- */
.testimonials.testimonials-padding-compact {
    padding: 48px 0;
}

.testimonials.testimonials-padding-normal {
    padding: 80px 0;
}

.testimonials.testimonials-padding-spacious {
    padding: 120px 0;
}

/* ---------------------------------------------
   5.4c Content Width
   --------------------------------------------- */
.testimonials.testimonials-width-narrow .container {
    max-width: 896px;
}

.testimonials.testimonials-width-default .container {
    max-width: 1152px;
}

.testimonials.testimonials-width-wide .container {
    max-width: 1280px;
}

.testimonials.testimonials-width-full .container {
    max-width: 100%;
}

/* ---------------------------------------------
   5.4d Heading Size
   --------------------------------------------- */
/* Section Title */
.testimonials.testimonials-heading-sm .section-header h2 { font-size: 28px; }
.testimonials.testimonials-heading-md .section-header h2 { font-size: 32px; }
.testimonials.testimonials-heading-lg .section-header h2 { font-size: 36px; }
.testimonials.testimonials-heading-xl .section-header h2 { font-size: 42px; }

/* Card Name */
.testimonials.testimonials-heading-sm .testimonial-name { font-size: 14px; }
.testimonials.testimonials-heading-md .testimonial-name { font-size: 16px; }
.testimonials.testimonials-heading-lg .testimonial-name { font-size: 18px; }
.testimonials.testimonials-heading-xl .testimonial-name { font-size: 20px; }

/* ---------------------------------------------
   5.4e Text Size
   --------------------------------------------- */
/* Section Subtitle */
.testimonials.testimonials-text-sm .section-header p { font-size: 14px; }
.testimonials.testimonials-text-md .section-header p { font-size: 16px; }
.testimonials.testimonials-text-lg .section-header p { font-size: 18px; }

/* Card Review Text */
.testimonials.testimonials-text-sm .testimonial-text { font-size: 13px; }
.testimonials.testimonials-text-md .testimonial-text { font-size: 15px; }
.testimonials.testimonials-text-lg .testimonial-text { font-size: 17px; }

/* Card Role */
.testimonials.testimonials-text-sm .testimonial-role { font-size: 12px; }
.testimonials.testimonials-text-md .testimonial-role { font-size: 13px; }
.testimonials.testimonials-text-lg .testimonial-role { font-size: 14px; }

/* ---------------------------------------------
   5.5 Card Styles
   --------------------------------------------- */
.testimonial-card {
    background: white;
    padding: 32px;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Elevated (Shadow) */
.testimonials.testimonials-style-elevated .testimonial-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: none;
}

/* Bordered */
.testimonials.testimonials-style-bordered .testimonial-card {
    border: 2px solid var(--border);
    box-shadow: none;
}

/* Flat */
.testimonials.testimonials-style-flat .testimonial-card {
    background: var(--bg, #f8fafc);
    border: none;
    box-shadow: none;
}

/* Glass */
.testimonials.testimonials-style-glass .testimonial-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* ---------------------------------------------
   5.6 Border Radius
   --------------------------------------------- */
.testimonials.testimonials-radius-none .testimonial-card {
    border-radius: 0;
}

.testimonials.testimonials-radius-small .testimonial-card {
    border-radius: 8px;
}

.testimonials.testimonials-radius-medium .testimonial-card {
    border-radius: 12px;
}

.testimonials.testimonials-radius-large .testimonial-card {
    border-radius: 16px;
}

/* ---------------------------------------------
   5.7 Hover Effects
   --------------------------------------------- */
.testimonials.testimonials-hover-none .testimonial-card:hover {
    transform: none !important;
    box-shadow: inherit !important;
}

.testimonials.testimonials-hover-lift .testimonial-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.testimonials.testimonials-hover-scale .testimonial-card:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

.testimonials.testimonials-hover-glow .testimonial-card:hover {
    box-shadow: 0 0 15px rgba(1, 109, 183, 0.15) !important;
}

/* Bordered card hover - keep border highlight */
.testimonials.testimonials-style-bordered.testimonials-hover-lift .testimonial-card:hover,
.testimonials.testimonials-style-bordered.testimonials-hover-scale .testimonial-card:hover,
.testimonials.testimonials-style-bordered.testimonials-hover-glow .testimonial-card:hover {
    border-color: var(--primary) !important;
}

/* ---------------------------------------------
   5.8 Card Content
   --------------------------------------------- */
.testimonial-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.testimonial-header-simple {
    margin-bottom: 16px;
}

.testimonial-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.testimonial-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.testimonial-role {
    font-size: 13px;
    color: var(--text-light);
}

.testimonial-rating {
    font-size: 18px;
    margin-bottom: 16px;
}

.testimonial-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
}

/* ---------------------------------------------
   5.9 Reveal Animations
   --------------------------------------------- */
.testimonial-card[data-reveal="fade-up"] {
    opacity: 0;
    transform: translateY(30px);
    animation: testimonialFadeUp 0.8s ease forwards;
}

.testimonial-card[data-reveal="fade-in"] {
    opacity: 0;
    transform: translateX(-30px);
    animation: testimonialFadeIn 0.8s ease forwards;
}

.testimonial-card[data-reveal="stagger"] {
    opacity: 0;
    transform: translateY(30px);
    animation: testimonialFadeUp 0.8s ease forwards;
}

@keyframes testimonialFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes testimonialFadeIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---------------------------------------------
   5.10 Testimonials Responsive
   --------------------------------------------- */
@media (max-width: 1024px) {
    .testimonials.testimonials-cols-4 .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .testimonials.testimonials-cols-3 .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .testimonials.testimonials-padding-compact { padding: 32px 0; }
    .testimonials.testimonials-padding-normal { padding: 48px 0; }
    .testimonials.testimonials-padding-spacious { padding: 64px 0; }
    
    .testimonials.testimonials-cols-4 .testimonials-grid,
    .testimonials.testimonials-cols-3 .testimonials-grid,
    .testimonials.testimonials-cols-2 .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .testimonial-card {
        padding: 24px;
    }
}


/* ==============================================
   6. BLOG PREVIEW SECTION
   ============================================== */

/* ---------------------------------------------
   6.1 Base Blog Preview
   --------------------------------------------- */
.blog-preview-section {
    padding: 100px 0;
    transition: all 0.3s ease;
}

/* ---------------------------------------------
   6.2 Background Styles
   --------------------------------------------- */
.blog-preview-section.blog-bg-white {
    background: #ffffff;
}

.blog-preview-section.blog-bg-light {
    background: #f8fafc;
}

.blog-preview-section.blog-bg-dark {
    background: #1e293b;
}

.blog-preview-section.blog-bg-primary {
    background: var(--primary, #016db7);
}

.blog-preview-section.blog-bg-gradient {
    background: linear-gradient(135deg, var(--primary, #016db7), var(--primary-light, #0284d4));
}

/* ---------------------------------------------
   6.3 Bento Grid Layout
   --------------------------------------------- */
.blog-bento-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blog-bento-grid {
    display: flex;
    gap: 24px;
}

/* Featured Post (Left) */
.blog-bento-grid .blog-card-featured {
    flex: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.blog-bento-grid .blog-card-featured .blog-card-image {
    flex: 1;
    min-height: 280px;
}

.blog-bento-grid .blog-card-featured .blog-card-image img {
    height: 100%;
}

.blog-bento-grid .blog-card-featured .blog-card-title {
    font-size: 24px;
}

/* Side Posts Container (Right) - Max 2 posts */
.blog-bento-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.blog-bento-side .blog-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-bento-side .blog-card .blog-card-image {
    height: 120px;
    flex-shrink: 0;
}

.blog-bento-side .blog-card .blog-card-content {
    padding: 16px;
    flex: 1;
}

.blog-bento-side .blog-card .blog-card-title {
    font-size: 15px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.blog-bento-side .blog-card .blog-card-excerpt {
    display: none;
}

.blog-bento-side .blog-card .blog-card-meta {
    font-size: 11px;
    margin-bottom: 0;
    gap: 10px;
}

.blog-bento-side .blog-card .blog-read-more {
    font-size: 12px;
}

/* Extra Posts Grid (Below) */
.blog-bento-extra {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.blog-bento-extra .blog-card .blog-card-image {
    height: 160px;
}

.blog-bento-extra .blog-card .blog-card-title {
    font-size: 15px;
}

.blog-bento-extra .blog-card .blog-card-content {
    padding: 16px;
}

.blog-bento-extra .blog-card .blog-card-meta {
    font-size: 12px;
    margin-bottom: 8px;
}
.blog-bento-extra .blog-card .blog-card-excerpt {
    display: none;
}


/* Blog Grid Columns Control */
.blog-preview-section.blog-cols-2 .blog-bento-extra,
.blog-preview-section.blog-cols-2 .blog-magazine-extra {
    grid-template-columns: repeat(2, 1fr);
}

.blog-preview-section.blog-cols-3 .blog-bento-extra,
.blog-preview-section.blog-cols-3 .blog-magazine-extra {
    grid-template-columns: repeat(3, 1fr);
}

.blog-preview-section.blog-cols-4 .blog-bento-extra,
.blog-preview-section.blog-cols-4 .blog-magazine-extra {
    grid-template-columns: repeat(4, 1fr);
}


/* Blog Grid Columns Responsive */
@media (max-width: 1024px) {
    .blog-preview-section.blog-cols-4 .blog-bento-extra,
    .blog-preview-section.blog-cols-4 .blog-magazine-extra {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .blog-preview-section[class*="blog-cols-"] .blog-bento-extra,
    .blog-preview-section[class*="blog-cols-"] .blog-magazine-extra {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .blog-preview-section[class*="blog-cols-"] .blog-bento-extra,
    .blog-preview-section[class*="blog-cols-"] .blog-magazine-extra {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------
   6.4 Magazine Layout
   --------------------------------------------- */
.blog-magazine-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blog-magazine-grid {
    display: flex;
    gap: 24px;
}

/* Featured Post (Left) */
.blog-magazine-featured {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blog-magazine-featured .blog-card-image {
    flex: 1;
    min-height: 250px;
}

.blog-magazine-featured .blog-card-image img {
    height: 100%;
}

.blog-magazine-featured .blog-card-title {
    font-size: 22px;
}

/* Mini Cards List (Right) - Max 3 */
.blog-magazine-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog-magazine-item {
    display: flex;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    flex: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-mini-image {
    width: 110px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}

.blog-mini-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-mini-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.blog-mini-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.blog-mini-title a {
    text-decoration: none;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-mini-title a:hover {
    color: var(--primary) !important;
}

.blog-magazine-item .blog-card-meta {
    margin-bottom: 0;
    gap: 10px;
    font-size: 11px;
}

.blog-magazine-item .blog-category-badge {
    padding: 2px 8px;
    font-size: 9px;
    margin-bottom: 4px;
}

/* Extra Posts Grid (Below Magazine) */
.blog-magazine-extra {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.blog-magazine-extra .blog-card {
    border-radius: 12px;
    overflow: hidden;
}

.blog-magazine-extra .blog-card .blog-card-image {
    height: 160px;
}

.blog-magazine-extra .blog-card .blog-card-content {
    padding: 16px;
}

.blog-magazine-extra .blog-card .blog-card-title {
    font-size: 15px;
    margin-bottom: 8px;
}

.blog-magazine-extra .blog-card .blog-card-excerpt {
    display: none;
}

.blog-magazine-extra .blog-card .blog-card-meta {
    font-size: 12px;
    margin-bottom: 8px;
}

/* ---------------------------------------------
   6.5 Blog Card Base
   --------------------------------------------- */
.blog-card {
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blog-card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card-image a {
    display: block;
    height: 100%;
}

.blog-card-content {
    padding: 24px;
}

.blog-card-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.blog-card-title a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-card-title a:hover {
    color: var(--primary) !important;
}

.blog-card-excerpt {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 16px;
}

/* ---------------------------------------------
   6.6 Category Badge
   --------------------------------------------- */
.blog-category-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.blog-card-image .blog-category-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
}

.blog-category-small {
    padding: 3px 8px;
    font-size: 10px;
}

/* ---------------------------------------------
   6.7 Meta Info
   --------------------------------------------- */
.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    margin-bottom: 16px;
}

.blog-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-card-meta i {
    font-size: 12px;
}


/* Compact Elements for Smaller Cards */
.blog-excerpt-compact {
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
}

.blog-mini-excerpt {
    font-size: 12px;
    line-height: 1.5;
    margin: 6px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-meta-mini {
    font-size: 11px;
    gap: 8px;
    flex-wrap: wrap;
}

.blog-read-more-mini {
    font-size: 12px;
    margin-top: 8px;
}

/* ---------------------------------------------
   6.8 Read More Button
   --------------------------------------------- */
.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    margin-top: 16px;
    position: relative;
    transition: gap 0.3s ease;
}

.blog-read-more::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s ease;
}

.blog-read-more:hover {
    gap: 12px;
}

.blog-read-more:hover::after {
    width: calc(100% - 20px);
}

.blog-read-more i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.blog-read-more:hover i {
    transform: translateX(3px);
}

/* Fix stretching elements in magazine mini cards */
.blog-magazine-item .blog-read-more,
.blog-magazine-item .blog-category-badge {
    width: fit-content;
}

/* ---------------------------------------------
   6.9 Image Overlay
   --------------------------------------------- */
.blog-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.blog-preview-section.blog-overlay-light .blog-image-overlay {
    background: rgba(255, 255, 255, 0.35);
}

.blog-preview-section.blog-overlay-dark .blog-image-overlay {
    background: rgba(0, 0, 0, 0.45);
}

.blog-preview-section.blog-overlay-gradient .blog-image-overlay {
    background: linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
}

/* ---------------------------------------------
   6.10 Image Heights
   --------------------------------------------- */
.blog-preview-section.blog-img-short .blog-card-image {
    height: 160px;
}

.blog-preview-section.blog-img-medium .blog-card-image {
    height: 200px;
}

.blog-preview-section.blog-img-tall .blog-card-image {
    height: 260px;
}

.blog-preview-section.blog-img-square .blog-card-image {
    height: 0;
    padding-bottom: 100%;
}

/* Keep featured card taller */
.blog-preview-section.blog-img-short .blog-card-featured .blog-card-image {
    height: 320px;
    min-height: 320px;
}

.blog-preview-section.blog-img-medium .blog-card-featured .blog-card-image {
    height: 400px;
    min-height: 400px;
}

.blog-preview-section.blog-img-tall .blog-card-featured .blog-card-image {
    height: 480px;
    min-height: 480px;
}

/* ---------------------------------------------
   6.11 Title Sizes
   --------------------------------------------- */
/* Card Titles */
.blog-preview-section.blog-title-sm .blog-card-title {
    font-size: 16px;
}

.blog-preview-section.blog-title-md .blog-card-title {
    font-size: 20px;
}

.blog-preview-section.blog-title-lg .blog-card-title {
    font-size: 24px;
}

.blog-preview-section.blog-title-xl .blog-card-title {
    font-size: 28px;
}

/* Featured Card Titles */
.blog-preview-section.blog-title-sm .blog-card-featured .blog-card-title {
    font-size: 20px;
}

.blog-preview-section.blog-title-md .blog-card-featured .blog-card-title {
    font-size: 26px;
}

.blog-preview-section.blog-title-lg .blog-card-featured .blog-card-title {
    font-size: 32px;
}

.blog-preview-section.blog-title-xl .blog-card-featured .blog-card-title {
    font-size: 38px;
}

/* Magazine Featured Titles */
.blog-preview-section.blog-title-sm .blog-magazine-featured .blog-card-title {
    font-size: 18px;
}

.blog-preview-section.blog-title-md .blog-magazine-featured .blog-card-title {
    font-size: 22px;
}

.blog-preview-section.blog-title-lg .blog-magazine-featured .blog-card-title {
    font-size: 26px;
}

.blog-preview-section.blog-title-xl .blog-magazine-featured .blog-card-title {
    font-size: 30px;
}

/* Magazine Mini Titles */
.blog-preview-section.blog-title-sm .blog-mini-title {
    font-size: 13px;
}

.blog-preview-section.blog-title-md .blog-mini-title {
    font-size: 14px;
}

.blog-preview-section.blog-title-lg .blog-mini-title {
    font-size: 15px;
}

.blog-preview-section.blog-title-xl .blog-mini-title {
    font-size: 16px;
}

/* Bento Side Card Titles */
.blog-preview-section.blog-title-sm .blog-bento-side .blog-card-title {
    font-size: 14px;
}

.blog-preview-section.blog-title-md .blog-bento-side .blog-card-title {
    font-size: 15px;
}

.blog-preview-section.blog-title-lg .blog-bento-side .blog-card-title {
    font-size: 16px;
}

.blog-preview-section.blog-title-xl .blog-bento-side .blog-card-title {
    font-size: 17px;
}

/* Bento/Magazine Extra Grid Titles */
.blog-preview-section.blog-title-sm .blog-bento-extra .blog-card-title,
.blog-preview-section.blog-title-sm .blog-magazine-extra .blog-card-title {
    font-size: 14px;
}

.blog-preview-section.blog-title-md .blog-bento-extra .blog-card-title,
.blog-preview-section.blog-title-md .blog-magazine-extra .blog-card-title {
    font-size: 15px;
}

.blog-preview-section.blog-title-lg .blog-bento-extra .blog-card-title,
.blog-preview-section.blog-title-lg .blog-magazine-extra .blog-card-title {
    font-size: 16px;
}

.blog-preview-section.blog-title-xl .blog-bento-extra .blog-card-title,
.blog-preview-section.blog-title-xl .blog-magazine-extra .blog-card-title {
    font-size: 17px;
}

/* ---------------------------------------------
   6.12 Card Styles
   --------------------------------------------- */
/* Shadow */
.blog-preview-section.blog-card-shadow .blog-card,
.blog-preview-section.blog-card-shadow .blog-magazine-featured,
.blog-preview-section.blog-card-shadow .blog-magazine-item {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Bordered */
.blog-preview-section.blog-card-bordered .blog-card,
.blog-preview-section.blog-card-bordered .blog-magazine-featured,
.blog-preview-section.blog-card-bordered .blog-magazine-item {
    border: 2px solid rgba(0, 0, 0, 0.1);
    box-shadow: none;
}

/* Minimal */
.blog-preview-section.blog-card-minimal .blog-card,
.blog-preview-section.blog-card-minimal .blog-magazine-featured,
.blog-preview-section.blog-card-minimal .blog-magazine-item {
    box-shadow: none;
    border: none;
}

/* Elevated */
.blog-preview-section.blog-card-elevated .blog-card,
.blog-preview-section.blog-card-elevated .blog-magazine-featured,
.blog-preview-section.blog-card-elevated .blog-magazine-item {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Glass */
.blog-preview-section.blog-card-glass .blog-card,
.blog-preview-section.blog-card-glass .blog-magazine-featured,
.blog-preview-section.blog-card-glass .blog-magazine-item {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Dark background card styles */
.blog-preview-section.blog-bg-dark .blog-card-bordered .blog-card,
.blog-preview-section.blog-bg-dark .blog-card-bordered .blog-magazine-item,
.blog-preview-section.blog-bg-primary .blog-card-bordered .blog-card,
.blog-preview-section.blog-bg-primary .blog-card-bordered .blog-magazine-item,
.blog-preview-section.blog-bg-gradient .blog-card-bordered .blog-card,
.blog-preview-section.blog-bg-gradient .blog-card-bordered .blog-magazine-item {
    border-color: rgba(255, 255, 255, 0.2);
}

/* ---------------------------------------------
   6.13 Spacing
   --------------------------------------------- */

/* Compact Spacing */
.blog-preview-section.blog-spacing-compact .blog-bento-wrapper,
.blog-preview-section.blog-spacing-compact .blog-magazine-wrapper {
    gap: 16px;
}
.blog-preview-section.blog-spacing-compact .blog-bento-grid,
.blog-preview-section.blog-spacing-compact .blog-magazine-grid {
    gap: 16px;
}
.blog-preview-section.blog-spacing-compact .blog-bento-side {
    gap: 16px;
}
.blog-preview-section.blog-spacing-compact .blog-magazine-list {
    gap: 8px;
}
.blog-preview-section.blog-spacing-compact .blog-magazine-item {
    padding: 10px;
    gap: 12px;
}
.blog-preview-section.blog-spacing-compact .blog-bento-extra,
.blog-preview-section.blog-spacing-compact .blog-magazine-extra {
    gap: 16px;
}

/* Normal Spacing */
.blog-preview-section.blog-spacing-normal .blog-bento-wrapper,
.blog-preview-section.blog-spacing-normal .blog-magazine-wrapper {
    gap: 24px;
}
.blog-preview-section.blog-spacing-normal .blog-bento-grid,
.blog-preview-section.blog-spacing-normal .blog-magazine-grid {
    gap: 24px;
}
.blog-preview-section.blog-spacing-normal .blog-bento-side {
    gap: 24px;
}
.blog-preview-section.blog-spacing-normal .blog-magazine-list {
    gap: 12px;
}
.blog-preview-section.blog-spacing-normal .blog-magazine-item {
    padding: 12px;
    gap: 14px;
}
.blog-preview-section.blog-spacing-normal .blog-bento-extra,
.blog-preview-section.blog-spacing-normal .blog-magazine-extra {
    gap: 24px;
}

/* Relaxed Spacing */
.blog-preview-section.blog-spacing-relaxed .blog-bento-wrapper,
.blog-preview-section.blog-spacing-relaxed .blog-magazine-wrapper {
    gap: 32px;
}
.blog-preview-section.blog-spacing-relaxed .blog-bento-grid,
.blog-preview-section.blog-spacing-relaxed .blog-magazine-grid {
    gap: 32px;
}
.blog-preview-section.blog-spacing-relaxed .blog-bento-side {
    gap: 32px;
}
.blog-preview-section.blog-spacing-relaxed .blog-magazine-list {
    gap: 16px;
}
.blog-preview-section.blog-spacing-relaxed .blog-magazine-item {
    padding: 14px;
    gap: 16px;
}
.blog-preview-section.blog-spacing-relaxed .blog-bento-extra,
.blog-preview-section.blog-spacing-relaxed .blog-magazine-extra {
    gap: 32px;
}

/* ---------------------------------------------
   6.14 Border Radius
   --------------------------------------------- */
.blog-preview-section.blog-radius-none .blog-card,
.blog-preview-section.blog-radius-none .blog-magazine-featured,
.blog-preview-section.blog-radius-none .blog-magazine-item,
.blog-preview-section.blog-radius-none .blog-mini-image,
.blog-preview-section.blog-radius-none .blog-card-image {
    border-radius: 0 !important;
}

.blog-preview-section.blog-radius-small .blog-card,
.blog-preview-section.blog-radius-small .blog-magazine-featured,
.blog-preview-section.blog-radius-small .blog-magazine-item,
.blog-preview-section.blog-radius-small .blog-card-image {
    border-radius: 8px !important;
}

.blog-preview-section.blog-radius-small .blog-mini-image {
    border-radius: 6px !important;
}

.blog-preview-section.blog-radius-medium .blog-card,
.blog-preview-section.blog-radius-medium .blog-magazine-featured,
.blog-preview-section.blog-radius-medium .blog-magazine-item,
.blog-preview-section.blog-radius-medium .blog-card-image {
    border-radius: 12px !important;
}

.blog-preview-section.blog-radius-medium .blog-mini-image {
    border-radius: 8px !important;
}

.blog-preview-section.blog-radius-large .blog-card,
.blog-preview-section.blog-radius-large .blog-magazine-featured,
.blog-preview-section.blog-radius-large .blog-magazine-item,
.blog-preview-section.blog-radius-large .blog-card-image {
    border-radius: 16px !important;
}

.blog-preview-section.blog-radius-large .blog-mini-image {
    border-radius: 10px !important;
}

/* ---------------------------------------------
   6.14b Section Padding
   --------------------------------------------- */
.blog-preview-section.blog-padding-compact {
    padding: 48px 0;
}

.blog-preview-section.blog-padding-normal {
    padding: 80px 0;
}

.blog-preview-section.blog-padding-spacious {
    padding: 120px 0;
}

/* ---------------------------------------------
   6.14c Content Width
   --------------------------------------------- */
.blog-preview-section.blog-width-narrow .container {
    max-width: 896px;
}

.blog-preview-section.blog-width-default .container {
    max-width: 1152px;
}

.blog-preview-section.blog-width-wide .container {
    max-width: 1280px;
}

.blog-preview-section.blog-width-full .container {
    max-width: 100%;
    padding-left: 32px;
    padding-right: 32px;
}

/* ---------------------------------------------
   6.14d Heading Size (Section Title)
   --------------------------------------------- */
.blog-preview-section.blog-heading-sm .section-header h2 {
    font-size: 28px;
}

.blog-preview-section.blog-heading-md .section-header h2 {
    font-size: 32px;
}

.blog-preview-section.blog-heading-lg .section-header h2 {
    font-size: 36px;
}

.blog-preview-section.blog-heading-xl .section-header h2 {
    font-size: 42px;
}

/* ---------------------------------------------
   6.14e Text Size (Subtitle & Excerpts)
   --------------------------------------------- */
/* Section Subtitle */
.blog-preview-section.blog-text-sm .section-header p {
    font-size: 16px;
}

.blog-preview-section.blog-text-md .section-header p {
    font-size: 18px;
}

.blog-preview-section.blog-text-lg .section-header p {
    font-size: 20px;
}

/* Card Excerpts */
.blog-preview-section.blog-text-sm .blog-card-excerpt {
    font-size: 13px;
}

.blog-preview-section.blog-text-md .blog-card-excerpt {
    font-size: 15px;
}

.blog-preview-section.blog-text-lg .blog-card-excerpt {
    font-size: 17px;
}

/* Compact Excerpts (Bento Side & Extra) */
.blog-preview-section.blog-text-sm .blog-excerpt-compact {
    font-size: 12px;
}

.blog-preview-section.blog-text-md .blog-excerpt-compact {
    font-size: 13px;
}

.blog-preview-section.blog-text-lg .blog-excerpt-compact {
    font-size: 14px;
}

/* Mini Excerpts (Magazine List) */
.blog-preview-section.blog-text-sm .blog-mini-excerpt {
    font-size: 11px;
}

.blog-preview-section.blog-text-md .blog-mini-excerpt {
    font-size: 12px;
}

.blog-preview-section.blog-text-lg .blog-mini-excerpt {
    font-size: 13px;
}

/* Meta Info */
.blog-preview-section.blog-text-sm .blog-card-meta {
    font-size: 12px;
}

.blog-preview-section.blog-text-md .blog-card-meta {
    font-size: 13px;
}

.blog-preview-section.blog-text-lg .blog-card-meta {
    font-size: 14px;
}

/* ---------------------------------------------
   6.15 Hover Effects
   --------------------------------------------- */
/* Base transitions for all hoverable elements */
.blog-card,
.blog-magazine-featured,
.blog-magazine-item {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.3s ease;
}

/* None - No hover effect */
.blog-preview-section.blog-hover-none .blog-card:hover,
.blog-preview-section.blog-hover-none .blog-magazine-featured:hover,
.blog-preview-section.blog-hover-none .blog-magazine-item:hover {
    transform: none;
    box-shadow: inherit;
}

/* Lift - Move up with shadow */
.blog-preview-section.blog-hover-lift .blog-card:hover,
.blog-preview-section.blog-hover-lift .blog-magazine-featured:hover,
.blog-preview-section.blog-hover-lift .blog-magazine-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Scale - Grow slightly */
.blog-preview-section.blog-hover-scale .blog-card:hover,
.blog-preview-section.blog-hover-scale .blog-magazine-featured:hover,
.blog-preview-section.blog-hover-scale .blog-magazine-item:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Glow - Primary color glow */
.blog-preview-section.blog-hover-glow .blog-card:hover,
.blog-preview-section.blog-hover-glow .blog-magazine-featured:hover,
.blog-preview-section.blog-hover-glow .blog-magazine-item:hover {
    box-shadow: 0 0 25px rgba(1, 109, 183, 0.25);
}

/* Zoom - Image zooms inside */
.blog-preview-section.blog-hover-zoom .blog-card .blog-card-image img,
.blog-preview-section.blog-hover-zoom .blog-magazine-featured .blog-card-image img,
.blog-preview-section.blog-hover-zoom .blog-magazine-item .blog-mini-image img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blog-preview-section.blog-hover-zoom .blog-card:hover .blog-card-image img,
.blog-preview-section.blog-hover-zoom .blog-magazine-featured:hover .blog-card-image img,
.blog-preview-section.blog-hover-zoom .blog-magazine-item:hover .blog-mini-image img {
    transform: scale(1.08);
}

/* Bordered cards - border color change on hover */
.blog-preview-section.blog-card-bordered .blog-card:hover,
.blog-preview-section.blog-card-bordered .blog-magazine-featured:hover,
.blog-preview-section.blog-card-bordered .blog-magazine-item:hover {
    border-color: var(--primary, #016db7);
}

/* ---------------------------------------------
   6.16 CTA Button
   --------------------------------------------- */
.blog-cta {
    text-align: center;
    margin-top: 48px;
}

.blog-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-cta .btn-primary {
    background: var(--primary, #016db7);
    color: white;
    border: 2px solid var(--primary, #016db7);
}

.blog-cta .btn-primary:hover {
    background: var(--primary-dark, #015a96);
    border-color: var(--primary-dark, #015a96);
    transform: translateY(-2px);
}

.blog-cta .btn-outline {
    background: transparent;
    color: var(--primary, #016db7);
    border: 2px solid var(--primary, #016db7);
}

.blog-cta .btn-outline:hover {
    background: var(--primary, #016db7);
    color: white;
    transform: translateY(-2px);
}

.blog-cta .btn-ghost {
    background: transparent;
    color: var(--primary, #016db7);
    border: 2px solid transparent;
}

.blog-cta .btn-ghost:hover {
    background: rgba(1, 109, 183, 0.1);
    transform: translateY(-2px);
}

/* Dark background CTA */
.blog-preview-section.blog-bg-dark .blog-cta .btn-primary,
.blog-preview-section.blog-bg-primary .blog-cta .btn-primary,
.blog-preview-section.blog-bg-gradient .blog-cta .btn-primary {
    background: #ffffff;
    color: var(--primary, #016db7);
    border-color: #ffffff;
}

.blog-preview-section.blog-bg-dark .blog-cta .btn-primary:hover,
.blog-preview-section.blog-bg-primary .blog-cta .btn-primary:hover,
.blog-preview-section.blog-bg-gradient .blog-cta .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

.blog-preview-section.blog-bg-dark .blog-cta .btn-outline,
.blog-preview-section.blog-bg-primary .blog-cta .btn-outline,
.blog-preview-section.blog-bg-gradient .blog-cta .btn-outline {
    color: #ffffff;
    border-color: #ffffff;
}

.blog-preview-section.blog-bg-dark .blog-cta .btn-outline:hover,
.blog-preview-section.blog-bg-primary .blog-cta .btn-outline:hover,
.blog-preview-section.blog-bg-gradient .blog-cta .btn-outline:hover {
    background: #ffffff;
    color: var(--primary, #016db7);
}

.blog-preview-section.blog-bg-dark .blog-cta .btn-ghost,
.blog-preview-section.blog-bg-primary .blog-cta .btn-ghost,
.blog-preview-section.blog-bg-gradient .blog-cta .btn-ghost {
    color: #ffffff;
}

.blog-preview-section.blog-bg-dark .blog-cta .btn-ghost:hover,
.blog-preview-section.blog-bg-primary .blog-cta .btn-ghost:hover,
.blog-preview-section.blog-bg-gradient .blog-cta .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ---------------------------------------------
   6.17 Reveal Animations
   --------------------------------------------- */
/* Fade In - Simple opacity fade */
.blog-bento-wrapper[data-reveal="fade"],
.blog-magazine-wrapper[data-reveal="fade"] {
    animation: blogFadeIn 0.8s ease both;
}

/* Slide Up - Move up + fade */
.blog-bento-wrapper[data-reveal="slide"],
.blog-magazine-wrapper[data-reveal="slide"] {
    animation: blogSlideUp 0.8s ease both;
}

/* Stagger - Each card animates with delay */
.blog-bento-wrapper[data-reveal="stagger"] .blog-card,
.blog-bento-wrapper[data-reveal="stagger"] .blog-card-featured,
.blog-magazine-wrapper[data-reveal="stagger"] .blog-magazine-featured,
.blog-magazine-wrapper[data-reveal="stagger"] .blog-magazine-item,
.blog-magazine-wrapper[data-reveal="stagger"] .blog-card {
    animation: blogSlideUp 0.6s ease both;
}

/* Stagger Delays */
.blog-bento-wrapper[data-reveal="stagger"] .blog-card:nth-child(1),
.blog-bento-wrapper[data-reveal="stagger"] .blog-card-featured,
.blog-magazine-wrapper[data-reveal="stagger"] .blog-magazine-featured {
    animation-delay: 0s;
}

.blog-bento-wrapper[data-reveal="stagger"] .blog-card:nth-child(2),
.blog-magazine-wrapper[data-reveal="stagger"] .blog-magazine-item:nth-child(1) {
    animation-delay: 0.1s;
}

.blog-bento-wrapper[data-reveal="stagger"] .blog-card:nth-child(3),
.blog-magazine-wrapper[data-reveal="stagger"] .blog-magazine-item:nth-child(2) {
    animation-delay: 0.2s;
}

.blog-bento-wrapper[data-reveal="stagger"] .blog-card:nth-child(4),
.blog-magazine-wrapper[data-reveal="stagger"] .blog-magazine-item:nth-child(3) {
    animation-delay: 0.3s;
}

.blog-bento-wrapper[data-reveal="stagger"] .blog-card:nth-child(5) {
    animation-delay: 0.4s;
}

.blog-bento-wrapper[data-reveal="stagger"] .blog-card:nth-child(6) {
    animation-delay: 0.5s;
}

/* Keyframes */
@keyframes blogFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes blogSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------
   6.18 Blog Preview Responsive
   --------------------------------------------- */
@media (max-width: 1024px) {
    .blog-bento-grid {
        flex-direction: column;
    }
    
    .blog-bento-grid .blog-card-featured .blog-card-image {
        min-height: 250px;
    }
    
    .blog-bento-side {
        flex-direction: row;
    }
    
    .blog-bento-side .blog-card .blog-card-image {
        height: 140px;
    }
    
    .blog-bento-extra {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .blog-magazine-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Class-based responsive padding */
    .blog-preview-section.blog-padding-compact {
        padding: 32px 0;
    }
    
    .blog-preview-section.blog-padding-normal {
        padding: 60px 0;
    }
    
    .blog-preview-section.blog-padding-spacious {
        padding: 80px 0;
    }
    
    /* Full width mobile adjustment */
    .blog-preview-section.blog-width-full .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .blog-bento-grid .blog-card-featured .blog-card-image {
        min-height: 200px;
    }
    
    .blog-bento-side {
        flex-direction: column;
    }
    
    .blog-bento-side .blog-card .blog-card-image {
        height: 160px;
    }
    
    .blog-bento-extra {
        grid-template-columns: 1fr;
    }
    
    .blog-card-content {
        padding: 20px;
    }
    
    .blog-card-title {
        font-size: 18px;
    }
    
    .blog-magazine-item {
        padding: 10px;
    }
    
    .blog-mini-image {
        width: 100px;
        height: 75px;
    }
    
    .blog-mini-title {
        font-size: 14px;
    }
    
    .blog-cta {
        margin-top: 32px;
    }
}

@media (max-width: 480px) {
    .blog-magazine-item {
        flex-direction: column;
    }
    
    .blog-mini-image {
        width: 100%;
        height: 160px;
    }
    
    .blog-mini-content {
        padding: 12px 0 0;
    }
}



/* Magazine Responsive */
@media (max-width: 1024px) {
    .blog-magazine-grid {
        flex-direction: column;
    }
    
    .blog-magazine-featured .blog-card-image {
        min-height: 220px;
    }
    
    .blog-magazine-list {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .blog-magazine-item {
        flex: 1 1 calc(50% - 6px);
        min-width: 280px;
    }
    
    .blog-magazine-extra {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .blog-magazine-list {
        flex-direction: column;
    }
    
    .blog-magazine-item {
        flex: none;
        min-width: auto;
    }
    
    .blog-magazine-extra {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .blog-magazine-item {
        flex-direction: column;
        padding: 0;
        gap: 0;
    }
    
    .blog-mini-image {
        width: 100%;
        height: 160px;
        border-radius: 12px 12px 0 0;
    }
    
    .blog-mini-content {
        padding: 14px;
    }
}

/* ==============================================
   7. PRICING SECTION
   ============================================== */

/* ---------------------------------------------
   7.1 Base Pricing
   --------------------------------------------- */
.pricing-section {
    padding: 100px 0;
    transition: all 0.3s ease;
}

/* ---------------------------------------------
   7.2 Background Styles
   --------------------------------------------- */
.pricing-section.pricing-bg-white {
    background: #ffffff;
}

.pricing-section.pricing-bg-light {
    background: var(--bg, #f8fafc);
}

.pricing-section.pricing-bg-gradient {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
}

.pricing-section.pricing-bg-gradient .section-header h2,
.pricing-section.pricing-bg-gradient .plan-name {
    color: white;
}

.pricing-section.pricing-bg-gradient .section-header p,
.pricing-section.pricing-bg-gradient .plan-description {
    color: rgba(255, 255, 255, 0.9);
}

/* ---------------------------------------------
   7.3 Spacing
   --------------------------------------------- */
.pricing-section.pricing-spacing-compact .pricing-plans-grid {
    gap: 16px;
}

.pricing-section.pricing-spacing-normal .pricing-plans-grid {
    gap: 24px;
}

.pricing-section.pricing-spacing-relaxed .pricing-plans-grid {
    gap: 32px;
}

/* ---------------------------------------------
   7.3b Section Padding
   --------------------------------------------- */
.pricing-section.pricing-padding-compact {
    padding: 48px 0;
}

.pricing-section.pricing-padding-normal {
    padding: 80px 0;
}

.pricing-section.pricing-padding-spacious {
    padding: 120px 0;
}

/* ---------------------------------------------
   7.3c Content Width
   --------------------------------------------- */
.pricing-section.pricing-width-narrow .container {
    max-width: 896px;
}

.pricing-section.pricing-width-default .container {
    max-width: 1152px;
}

.pricing-section.pricing-width-wide .container {
    max-width: 1280px;
}

.pricing-section.pricing-width-full .container {
    max-width: 100%;
}

/* ---------------------------------------------
   7.3d Heading Size
   --------------------------------------------- */
/* Section Title */
.pricing-section.pricing-heading-sm .section-header h2 { font-size: 28px; }
.pricing-section.pricing-heading-md .section-header h2 { font-size: 32px; }
.pricing-section.pricing-heading-lg .section-header h2 { font-size: 36px; }
.pricing-section.pricing-heading-xl .section-header h2 { font-size: 42px; }

/* Plan Name */
.pricing-section.pricing-heading-sm .plan-name { font-size: 18px; }
.pricing-section.pricing-heading-md .plan-name { font-size: 20px; }
.pricing-section.pricing-heading-lg .plan-name { font-size: 22px; }
.pricing-section.pricing-heading-xl .plan-name { font-size: 24px; }

/* ---------------------------------------------
   7.3e Text Size
   --------------------------------------------- */
/* Section Subtitle */
.pricing-section.pricing-text-sm .section-header p { font-size: 14px; }
.pricing-section.pricing-text-md .section-header p { font-size: 16px; }
.pricing-section.pricing-text-lg .section-header p { font-size: 18px; }

/* Plan Description */
.pricing-section.pricing-text-sm .plan-description { font-size: 12px; }
.pricing-section.pricing-text-md .plan-description { font-size: 14px; }
.pricing-section.pricing-text-lg .plan-description { font-size: 16px; }

/* Plan Features */
.pricing-section.pricing-text-sm .plan-features li { font-size: 12px; }
.pricing-section.pricing-text-md .plan-features li { font-size: 14px; }
.pricing-section.pricing-text-lg .plan-features li { font-size: 16px; }


/* ---------------------------------------------
   7.4 Plans Grid
   --------------------------------------------- */
.pricing-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

/* ---------------------------------------------
   7.5 Card Styles
   --------------------------------------------- */
.pricing-plan-card {
    background: white;
    padding: 32px;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Elevated (Shadow) */
.pricing-section.pricing-style-elevated .pricing-plan-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: none;
}

/* Bordered */
.pricing-section.pricing-style-bordered .pricing-plan-card {
    border: 2px solid var(--border);
    box-shadow: none;
}

/* Flat */
.pricing-section.pricing-style-flat .pricing-plan-card {
    background: var(--bg, #f8fafc);
    border: none;
    box-shadow: none;
}

/* Glass */
.pricing-section.pricing-style-glass .pricing-plan-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* ---------------------------------------------
   7.6 Border Radius
   --------------------------------------------- */
.pricing-section.pricing-radius-none .pricing-plan-card {
    border-radius: 0;
}

.pricing-section.pricing-radius-small .pricing-plan-card {
    border-radius: 8px;
}

.pricing-section.pricing-radius-medium .pricing-plan-card {
    border-radius: 12px;
}

.pricing-section.pricing-radius-large .pricing-plan-card {
    border-radius: 16px;
}

/* ---------------------------------------------
   7.7 Hover Effects
   --------------------------------------------- */
.pricing-section.pricing-hover-none .pricing-plan-card:hover {
    transform: none;
}

.pricing-section.pricing-hover-lift .pricing-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.pricing-section.pricing-hover-scale .pricing-plan-card:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.pricing-section.pricing-hover-glow .pricing-plan-card:hover {
    box-shadow: 0 0 15px rgba(1, 109, 183, 0.15);
}

/* Bordered hover */
.pricing-section.pricing-style-bordered .pricing-plan-card:hover {
    border-color: var(--primary);
}

/* ---------------------------------------------
   7.8 Popular Card
   --------------------------------------------- */
.pricing-plan-card.popular {
    border: 2px solid var(--primary);
    transform: scale(1.05);
    z-index: 1;
}

.pricing-plan-card.popular .popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(1, 109, 183, 0.3);
}

/* ---------------------------------------------
   7.9 Plan Content
   --------------------------------------------- */
.plan-header {
    margin-bottom: 24px;
}

.plan-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.plan-description {
    font-size: 14px;
    color: var(--text-light);
    margin: 0;
}

.plan-price {
    margin-bottom: 24px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.price-currency {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    vertical-align: top;
}

.price-value {
    font-size: 48px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.price-period {
    font-size: 16px;
    color: var(--text-light);
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    text-align: left;
}

.plan-features li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-features li i {
    color: var(--success, #10b981);
    font-size: 12px;
}

.plan-features li strong {
    font-weight: 700;
    color: var(--primary);
}

.plan-features .feature-limit {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

.plan-button {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.plan-button.btn-primary {
    background: var(--primary);
    color: white;
    border: 2px solid var(--primary);
}

.plan-button.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.plan-button.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.plan-button.btn-outline:hover {
    background: var(--primary);
    color: white;
}

/* ---------------------------------------------
   7.10 Billing Toggle
   --------------------------------------------- */
.pricing-toggle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
    padding: 16px 24px;
    background: white;
    border-radius: 50px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pricing-toggle-wrapper .toggle-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-muted);
    transition: all 0.3s ease;
    cursor: pointer;
}

.pricing-toggle-wrapper .toggle-label.active {
    color: var(--primary);
}

.pricing-toggle-switch {
    position: relative;
    width: 56px;
    height: 28px;
    background: #e2e8f0;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.pricing-toggle-switch input {
    display: none;
}

.toggle-slider-pricing {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.pricing-toggle-switch input:checked ~ .toggle-slider-pricing {
    transform: translateX(28px);
    background: var(--primary);
}

.save-badge {
    background: linear-gradient(135deg, var(--success, #10b981), #059669);
    color: white;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
}

/* ---------------------------------------------
   7.11 CTA Button
   --------------------------------------------- */
.pricing-cta {
    text-align: center;
    margin-top: 48px;
}

.pricing-cta .btn {
    padding: 14px 32px;
    font-size: 16px;
}

.pricing-cta .btn i {
    margin-left: 8px;
}

/* ---------------------------------------------
   7.12 Pricing Responsive
   --------------------------------------------- */
@media (max-width: 1024px) {
    .pricing-plan-card.popular {
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .pricing-section.pricing-padding-compact { padding: 32px 0; }
    .pricing-section.pricing-padding-normal { padding: 48px 0; }
    .pricing-section.pricing-padding-spacious { padding: 64px 0; }
    
    .pricing-plans-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    
    .pricing-plan-card {
        padding: 24px;
    }
    
    .price-value {
        font-size: 36px;
    }
    
    .pricing-toggle-wrapper {
        padding: 12px 16px;
        gap: 12px;
    }
}


/* ==============================================
   8. HOW IT WORKS SECTION
   ============================================== */

/* ---------------------------------------------
   8.1 Base How It Works
   --------------------------------------------- */
.how-it-works-section {
    padding: 100px 0;
    transition: all 0.3s ease;
}

/* ---------------------------------------------
   8.2 Background Styles
   --------------------------------------------- */
.how-it-works-section.hiw-bg-white {
    background: #ffffff;
}

.how-it-works-section.hiw-bg-light {
    background: var(--bg, #f8fafc);
}

.how-it-works-section.hiw-bg-gradient {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
}

.how-it-works-section.hiw-bg-gradient .section-header h2 {
    color: white;
}

.how-it-works-section.hiw-bg-gradient .section-header p {
    color: rgba(255, 255, 255, 0.9);
}

/* ---------------------------------------------
   8.3 Grid Layout
   --------------------------------------------- */
.hiw-grid {
    display: grid;
    gap: 24px;
}

.how-it-works-section.hiw-cols-2 .hiw-grid {
    grid-template-columns: repeat(2, 1fr);
}

.how-it-works-section.hiw-cols-3 .hiw-grid {
    grid-template-columns: repeat(3, 1fr);
}

.how-it-works-section.hiw-cols-4 .hiw-grid {
    grid-template-columns: repeat(4, 1fr);
}

.how-it-works-section.hiw-cols-auto .hiw-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ---------------------------------------------
   8.4 Spacing
   --------------------------------------------- */
.how-it-works-section.hiw-spacing-compact .hiw-grid {
    gap: 16px;
}

.how-it-works-section.hiw-spacing-normal .hiw-grid {
    gap: 24px;
}

.how-it-works-section.hiw-spacing-relaxed .hiw-grid {
    gap: 32px;
}

/* ---------------------------------------------
   8.4b Section Padding
   --------------------------------------------- */
.how-it-works-section.hiw-padding-compact {
    padding: 48px 0;
}

.how-it-works-section.hiw-padding-normal {
    padding: 80px 0;
}

.how-it-works-section.hiw-padding-spacious {
    padding: 120px 0;
}

/* ---------------------------------------------
   8.4c Content Width
   --------------------------------------------- */
.how-it-works-section.hiw-width-narrow .container {
    max-width: 896px;
}

.how-it-works-section.hiw-width-default .container {
    max-width: 1152px;
}

.how-it-works-section.hiw-width-wide .container {
    max-width: 1280px;
}

.how-it-works-section.hiw-width-full .container {
    max-width: 100%;
}

/* ---------------------------------------------
   8.4d Heading Size
   --------------------------------------------- */
/* Section Title */
.how-it-works-section.hiw-heading-sm .section-header h2 { font-size: 28px; }
.how-it-works-section.hiw-heading-md .section-header h2 { font-size: 32px; }
.how-it-works-section.hiw-heading-lg .section-header h2 { font-size: 36px; }
.how-it-works-section.hiw-heading-xl .section-header h2 { font-size: 42px; }

/* Card/Timeline Title */
.how-it-works-section.hiw-heading-sm .hiw-card h3,
.how-it-works-section.hiw-heading-sm .timeline-content h3 { font-size: 16px; }
.how-it-works-section.hiw-heading-md .hiw-card h3,
.how-it-works-section.hiw-heading-md .timeline-content h3 { font-size: 18px; }
.how-it-works-section.hiw-heading-lg .hiw-card h3,
.how-it-works-section.hiw-heading-lg .timeline-content h3 { font-size: 20px; }
.how-it-works-section.hiw-heading-xl .hiw-card h3,
.how-it-works-section.hiw-heading-xl .timeline-content h3 { font-size: 22px; }

/* ---------------------------------------------
   8.4e Text Size
   --------------------------------------------- */
/* Section Subtitle */
.how-it-works-section.hiw-text-sm .section-header p { font-size: 14px; }
.how-it-works-section.hiw-text-md .section-header p { font-size: 16px; }
.how-it-works-section.hiw-text-lg .section-header p { font-size: 18px; }

/* Card/Timeline Description */
.how-it-works-section.hiw-text-sm .hiw-card p,
.how-it-works-section.hiw-text-sm .timeline-content p { font-size: 13px; }
.how-it-works-section.hiw-text-md .hiw-card p,
.how-it-works-section.hiw-text-md .timeline-content p { font-size: 15px; }
.how-it-works-section.hiw-text-lg .hiw-card p,
.how-it-works-section.hiw-text-lg .timeline-content p { font-size: 17px; }

/* ---------------------------------------------
   8.5 Card Styles
   --------------------------------------------- */
.hiw-card {
    background: white;
    padding: 32px;
    text-align: center;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Elevated */
.how-it-works-section.hiw-style-elevated .hiw-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: none;
}

/* Bordered */
.how-it-works-section.hiw-style-bordered .hiw-card {
    border: 2px solid var(--border);
    box-shadow: none;
}

/* Flat */
.how-it-works-section.hiw-style-flat .hiw-card {
    background: var(--bg, #f8fafc);
    border: none;
    box-shadow: none;
}

/* Glass */
.how-it-works-section.hiw-style-glass .hiw-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* ---------------------------------------------
   8.6 Border Radius
   --------------------------------------------- */
.how-it-works-section.hiw-radius-none .hiw-card {
    border-radius: 0;
}

.how-it-works-section.hiw-radius-small .hiw-card {
    border-radius: 8px;
}

.how-it-works-section.hiw-radius-medium .hiw-card {
    border-radius: 12px;
}

.how-it-works-section.hiw-radius-large .hiw-card {
    border-radius: 16px;
}

/* ---------------------------------------------
   8.7 Hover Effects
   --------------------------------------------- */
.hiw-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.how-it-works-section.hiw-hover-none .hiw-card:hover {
    transform: none;
    box-shadow: none;
}

.how-it-works-section.hiw-hover-lift .hiw-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.how-it-works-section.hiw-hover-scale .hiw-card:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.how-it-works-section.hiw-hover-glow .hiw-card:hover {
    box-shadow: 0 0 20px rgba(1, 109, 183, 0.2);
}

/* Bordered hover */
.how-it-works-section.hiw-style-bordered .hiw-card:hover {
    border-color: var(--primary);
}

/* ---------------------------------------------
   8.8 Card Content
   --------------------------------------------- */
.hiw-step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark, #015a96));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(1, 109, 183, 0.3);
}

.hiw-icon {
    width: 64px;
    height: 64px;
    margin: 20px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(1, 109, 183, 0.1);
    border-radius: 16px;
    color: var(--primary);
    font-size: 28px;
}

.hiw-emoji {
    font-size: 32px;
}

.hiw-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text);
}

.hiw-card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-light);
    margin: 0;
}

/* ---------------------------------------------
   8.9 Timeline Layout
   --------------------------------------------- */
.hiw-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}

.hiw-timeline .timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--primary), var(--primary-light, #0284d4));
    transform: translateX(-50%);
    border-radius: 3px;
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
}

.timeline-item.left {
    left: 0;
    text-align: right;
    padding-right: 60px;
}

.timeline-item.right {
    left: 50%;
    text-align: left;
    padding-left: 60px;
}

.timeline-marker {
    position: absolute;
    top: 30px;
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(1, 109, 183, 0.4);
    z-index: 1;
}

.timeline-item.left .timeline-marker {
    right: -20px;
}

.timeline-item.right .timeline-marker {
    left: -20px;
}

.timeline-content {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: left;
}

.timeline-icon {
    width: 48px;
    height: 48px;
    background: rgba(1, 109, 183, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 20px;
    margin-bottom: 16px;
}

.timeline-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
}

.timeline-content p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-light);
    margin: 0;
}

/* ---------------------------------------------
   8.10 How It Works Responsive
   --------------------------------------------- */
@media (max-width: 1024px) {
    .how-it-works-section.hiw-cols-4 .hiw-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .how-it-works-section.hiw-padding-compact { padding: 32px 0; }
    .how-it-works-section.hiw-padding-normal { padding: 48px 0; }
    .how-it-works-section.hiw-padding-spacious { padding: 64px 0; }
    
    .hiw-grid {
        grid-template-columns: 1fr !important;
    }
    
    .hiw-card {
        padding: 28px 24px;
        padding-top: 36px;
    }
    
    /* Timeline Mobile */
    .hiw-timeline .timeline-line {
        left: 20px;
    }
    
    .timeline-item,
    .timeline-item.left,
    .timeline-item.right {
        width: 100%;
        left: 0;
        text-align: left;
        padding-left: 60px;
        padding-right: 20px;
    }
    
    .timeline-item.left .timeline-marker,
    .timeline-item.right .timeline-marker {
        left: 0;
        right: auto;
    }
}


/* ---------------------------------------------
   8.11 Icon Styles (Matching Features)
   --------------------------------------------- */

/* Base Icon */
.hiw-icon {
    width: 64px;
    height: 64px;
    margin: 20px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #016db7);
    font-size: 28px;
    transition: all 0.3s ease;
}

.hiw-emoji {
    font-size: 32px;
}

/* Icon Style: Filled */
.how-it-works-section.hiw-icon-filled .hiw-icon {
    background: rgba(1, 109, 183, 0.1);
    border-radius: 12px;
}

/* Icon Style: Outlined */
.how-it-works-section.hiw-icon-outlined .hiw-icon {
    background: transparent;
    border: 2px solid currentColor;
    border-radius: 12px;
}

/* Icon Style: Circle Background */
.how-it-works-section.hiw-icon-circle-bg .hiw-icon {
    background: rgba(1, 109, 183, 0.1);
    border-radius: 50%;
}

/* Icon Style: Square Background */
.how-it-works-section.hiw-icon-square-bg .hiw-icon {
    background: rgba(1, 109, 183, 0.1);
    border-radius: 4px;
}

/* Icon Size: Small */
.how-it-works-section.hiw-icon-size-small .hiw-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
}

.how-it-works-section.hiw-icon-size-small .hiw-emoji {
    font-size: 24px;
}

/* Icon Size: Medium */
.how-it-works-section.hiw-icon-size-medium .hiw-icon {
    width: 64px;
    height: 64px;
    font-size: 28px;
}

.how-it-works-section.hiw-icon-size-medium .hiw-emoji {
    font-size: 32px;
}

/* Icon Size: Large */
.how-it-works-section.hiw-icon-size-large .hiw-icon {
    width: 80px;
    height: 80px;
    font-size: 36px;
}

.how-it-works-section.hiw-icon-size-large .hiw-emoji {
    font-size: 40px;
}

/* Icon Position: Top Center (Default) */
.how-it-works-section.hiw-icon-pos-top-center .hiw-card {
    text-align: center;
}

.how-it-works-section.hiw-icon-pos-top-center .hiw-icon {
    margin: 20px auto 20px;
}

/* Icon Position: Top Left */
.how-it-works-section.hiw-icon-pos-top-left .hiw-card {
    text-align: left;
}

.how-it-works-section.hiw-icon-pos-top-left .hiw-icon {
    margin: 0 0 20px 0;
}

.how-it-works-section.hiw-icon-pos-top-left .hiw-step-number {
    left: 20px;
    transform: none;
}

/* Icon Position: Left Inline */
.how-it-works-section.hiw-icon-pos-left-inline .hiw-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
}

.how-it-works-section.hiw-icon-pos-left-inline .hiw-icon {
    margin: 0;
    flex-shrink: 0;
}

.how-it-works-section.hiw-icon-pos-left-inline .hiw-card h3,
.how-it-works-section.hiw-icon-pos-left-inline .hiw-card p {
    flex: 1;
    min-width: calc(100% - 80px);
}

.how-it-works-section.hiw-icon-pos-left-inline .hiw-card h3 {
    margin-bottom: 8px;
}

.how-it-works-section.hiw-icon-pos-left-inline .hiw-step-number {
    left: 20px;
    transform: none;
}

/* Icon Color: Primary */
.how-it-works-section.hiw-icon-color-primary .hiw-icon {
    color: var(--primary, #016db7);
    background-color: rgba(1, 109, 183, 0.1);
}

.how-it-works-section.hiw-icon-color-primary.hiw-icon-outlined .hiw-icon {
    background-color: transparent;
    border-color: var(--primary, #016db7);
}

/* Icon Color: Accent */
.how-it-works-section.hiw-icon-color-accent .hiw-icon {
    color: var(--accent, #10b981);
    background-color: rgba(16, 185, 129, 0.1);
}

.how-it-works-section.hiw-icon-color-accent.hiw-icon-outlined .hiw-icon {
    background-color: transparent;
    border-color: var(--accent, #10b981);
}

/* Icon Color: Gradient */
.how-it-works-section.hiw-icon-color-gradient .hiw-icon {
    background: linear-gradient(135deg, var(--primary, #016db7), var(--primary-light, #0284d4));
    color: white;
    border: none;
}

/* Icon Color: Custom */
.how-it-works-section.hiw-icon-color-custom .hiw-icon {
    color: var(--icon-custom-color, #016db7);
    background-color: color-mix(in srgb, var(--icon-custom-color, #016db7) 10%, transparent);
}

.how-it-works-section.hiw-icon-color-custom.hiw-icon-outlined .hiw-icon {
    background-color: transparent;
    border-color: var(--icon-custom-color, #016db7);
}

.how-it-works-section.hiw-icon-color-custom.hiw-icon-color-gradient .hiw-icon {
    background: linear-gradient(135deg, var(--icon-custom-color, #016db7), color-mix(in srgb, var(--icon-custom-color, #016db7) 70%, #000));
    color: white;
}


/* ---------------------------------------------
   8.12 Timeline Icon Styles
   --------------------------------------------- */

/* Base Timeline Icon */
.timeline-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #016db7);
    font-size: 20px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

/* Timeline Icon Style: Filled */
.how-it-works-section.hiw-icon-filled .timeline-icon {
    background: rgba(1, 109, 183, 0.1);
    border-radius: 12px;
}

/* Timeline Icon Style: Outlined */
.how-it-works-section.hiw-icon-outlined .timeline-icon {
    background: transparent;
    border: 2px solid currentColor;
    border-radius: 12px;
}

/* Timeline Icon Style: Circle Background */
.how-it-works-section.hiw-icon-circle-bg .timeline-icon {
    background: rgba(1, 109, 183, 0.1);
    border-radius: 50%;
}

/* Timeline Icon Style: Square Background */
.how-it-works-section.hiw-icon-square-bg .timeline-icon {
    background: rgba(1, 109, 183, 0.1);
    border-radius: 4px;
}

/* Timeline Icon Size: Small */
.how-it-works-section.hiw-icon-size-small .timeline-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

/* Timeline Icon Size: Medium */
.how-it-works-section.hiw-icon-size-medium .timeline-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
}

/* Timeline Icon Size: Large */
.how-it-works-section.hiw-icon-size-large .timeline-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
}

/* Timeline Icon Color: Primary */
.how-it-works-section.hiw-icon-color-primary .timeline-icon {
    color: var(--primary, #016db7);
    background-color: rgba(1, 109, 183, 0.1);
}

.how-it-works-section.hiw-icon-color-primary.hiw-icon-outlined .timeline-icon {
    background-color: transparent;
    border-color: var(--primary, #016db7);
}

/* Timeline Icon Color: Accent */
.how-it-works-section.hiw-icon-color-accent .timeline-icon {
    color: var(--accent, #10b981);
    background-color: rgba(16, 185, 129, 0.1);
}

.how-it-works-section.hiw-icon-color-accent.hiw-icon-outlined .timeline-icon {
    background-color: transparent;
    border-color: var(--accent, #10b981);
}

/* Timeline Icon Color: Gradient */
.how-it-works-section.hiw-icon-color-gradient .timeline-icon {
    background: linear-gradient(135deg, var(--primary, #016db7), var(--primary-light, #0284d4));
    color: white;
    border: none;
}

/* Timeline Icon Color: Custom */
.how-it-works-section.hiw-icon-color-custom .timeline-icon {
    color: var(--icon-custom-color, #016db7);
    background-color: color-mix(in srgb, var(--icon-custom-color, #016db7) 10%, transparent);
}

.how-it-works-section.hiw-icon-color-custom.hiw-icon-outlined .timeline-icon {
    background-color: transparent;
    border-color: var(--icon-custom-color, #016db7);
}


/* =============================================
   9. FAQ SECTION
   ============================================= */

/* ---------------------------------------------
   9.1 Base FAQ Section
   --------------------------------------------- */
.faq-section {
    padding: 80px 0;
    transition: all 0.3s ease;
}

/* Section Header */
.faq-section .section-header {
    text-align: center;
    margin-bottom: 48px;
}

.faq-section .section-header h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
}

.faq-section .section-header p {
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
}

/* ---------------------------------------------
   9.2 Background Styles
   --------------------------------------------- */
.faq-section.faq-bg-light {
    background-color: #f8fafc;
}

.faq-section.faq-bg-white {
    background-color: #ffffff;
}

.faq-section.faq-bg-dark {
    background-color: #1e293b;
}

.faq-section.faq-bg-primary {
    background-color: var(--primary, #016db7);
}

.faq-section.faq-bg-gradient {
    background: linear-gradient(135deg, var(--primary, #016db7), var(--primary-light, #0284d4));
}

/* Dark background text adjustments */
.faq-section.faq-bg-dark .faq-question:hover,
.faq-section.faq-bg-primary .faq-question:hover,
.faq-section.faq-bg-gradient .faq-question:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ---------------------------------------------
   9.3 Spacing
   --------------------------------------------- */
.faq-section.faq-spacing-compact .faq-accordion,
.faq-section.faq-spacing-compact .faq-two-column .faq-column,
.faq-section.faq-spacing-compact .faq-cards-grid {
    gap: 12px;
}

.faq-section.faq-spacing-normal .faq-accordion,
.faq-section.faq-spacing-normal .faq-two-column .faq-column,
.faq-section.faq-spacing-normal .faq-cards-grid {
    gap: 16px;
}

.faq-section.faq-spacing-relaxed .faq-accordion,
.faq-section.faq-spacing-relaxed .faq-two-column .faq-column,
.faq-section.faq-spacing-relaxed .faq-cards-grid {
    gap: 24px;
}

/* Two column gap */
.faq-section.faq-spacing-compact .faq-two-column {
    gap: 16px;
}

.faq-section.faq-spacing-normal .faq-two-column {
    gap: 24px;
}

.faq-section.faq-spacing-relaxed .faq-two-column {
    gap: 32px;
}

/* ---------------------------------------------
   9.4 Border Radius
   --------------------------------------------- */
.faq-section.faq-radius-none .faq-item,
.faq-section.faq-radius-none .faq-card {
    border-radius: 0;
}

.faq-section.faq-radius-small .faq-item,
.faq-section.faq-radius-small .faq-card {
    border-radius: 8px;
}

.faq-section.faq-radius-medium .faq-item,
.faq-section.faq-radius-medium .faq-card {
    border-radius: 12px;
}

.faq-section.faq-radius-large .faq-item,
.faq-section.faq-radius-large .faq-card {
    border-radius: 16px;
}

/* ---------------------------------------------
   9.4b Section Padding
   --------------------------------------------- */
.faq-section.faq-padding-compact {
    padding: 48px 0;
}

.faq-section.faq-padding-normal {
    padding: 80px 0;
}

.faq-section.faq-padding-spacious {
    padding: 120px 0;
}

/* ---------------------------------------------
   9.4c Content Width
   --------------------------------------------- */
.faq-section.faq-width-narrow .container {
    max-width: 896px;
}

.faq-section.faq-width-default .container {
    max-width: 1152px;
}

.faq-section.faq-width-wide .container {
    max-width: 1280px;
}

.faq-section.faq-width-full .container {
    max-width: 100%;
    padding-left: 32px;
    padding-right: 32px;
}

/* Adjust accordion/grid max-widths based on content width */
.faq-section.faq-width-narrow .faq-accordion {
    max-width: 700px;
}

.faq-section.faq-width-narrow .faq-two-column,
.faq-section.faq-width-narrow .faq-cards-grid {
    max-width: 800px;
}

.faq-section.faq-width-wide .faq-accordion {
    max-width: 900px;
}

.faq-section.faq-width-wide .faq-two-column,
.faq-section.faq-width-wide .faq-cards-grid {
    max-width: 1200px;
}

.faq-section.faq-width-full .faq-accordion {
    max-width: 1000px;
}

.faq-section.faq-width-full .faq-two-column,
.faq-section.faq-width-full .faq-cards-grid {
    max-width: 100%;
}

/* ---------------------------------------------
   9.4d Heading Size
   --------------------------------------------- */
/* Section Title */
.faq-section.faq-heading-sm .section-header h2 {
    font-size: 28px;
}

.faq-section.faq-heading-md .section-header h2 {
    font-size: 32px;
}

.faq-section.faq-heading-lg .section-header h2 {
    font-size: 36px;
}

.faq-section.faq-heading-xl .section-header h2 {
    font-size: 42px;
}

/* Question Titles (Accordion) */
.faq-section.faq-heading-sm .faq-question span:first-child {
    font-size: 15px;
}

.faq-section.faq-heading-md .faq-question span:first-child {
    font-size: 16px;
}

.faq-section.faq-heading-lg .faq-question span:first-child {
    font-size: 17px;
}

.faq-section.faq-heading-xl .faq-question span:first-child {
    font-size: 18px;
}

/* Question Titles (Cards) */
.faq-section.faq-heading-sm .faq-card-question {
    font-size: 16px;
}

.faq-section.faq-heading-md .faq-card-question {
    font-size: 17px;
}

.faq-section.faq-heading-lg .faq-card-question {
    font-size: 18px;
}

.faq-section.faq-heading-xl .faq-card-question {
    font-size: 20px;
}

/* ---------------------------------------------
   9.4e Text Size
   --------------------------------------------- */
/* Section Subtitle */
.faq-section.faq-text-sm .section-header p {
    font-size: 16px;
}

.faq-section.faq-text-md .section-header p {
    font-size: 18px;
}

.faq-section.faq-text-lg .section-header p {
    font-size: 20px;
}

/* Answer Text (Accordion) */
.faq-section.faq-text-sm .faq-answer-content {
    font-size: 14px;
}

.faq-section.faq-text-md .faq-answer-content {
    font-size: 15px;
}

.faq-section.faq-text-lg .faq-answer-content {
    font-size: 16px;
}

/* Answer Text (Cards) */
.faq-section.faq-text-sm .faq-card-answer {
    font-size: 14px;
}

.faq-section.faq-text-md .faq-card-answer {
    font-size: 15px;
}

.faq-section.faq-text-lg .faq-card-answer {
    font-size: 16px;
}

/* ---------------------------------------------
   9.5 Card Styles
   --------------------------------------------- */
.faq-item,
.faq-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.3s ease;
}

/* Minimal */
.faq-section.faq-card-minimal .faq-item,
.faq-section.faq-card-minimal .faq-card {
    box-shadow: none;
    border: none;
}

.faq-section.faq-card-minimal .faq-item:last-child,
.faq-section.faq-card-minimal .faq-card:last-child {
    border-bottom: none;
}

/* Dark background minimal style */
.faq-section.faq-bg-dark.faq-card-minimal .faq-item,
.faq-section.faq-bg-dark.faq-card-minimal .faq-card,
.faq-section.faq-bg-primary.faq-card-minimal .faq-item,
.faq-section.faq-bg-primary.faq-card-minimal .faq-card,
.faq-section.faq-bg-gradient.faq-card-minimal .faq-item,
.faq-section.faq-bg-gradient.faq-card-minimal .faq-card {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Bordered */
.faq-section.faq-card-bordered .faq-item,
.faq-section.faq-card-bordered .faq-card {
    border: 2px solid rgba(0, 0, 0, 0.1);
    box-shadow: none;
}

.faq-section.faq-bg-dark.faq-card-bordered .faq-item,
.faq-section.faq-bg-dark.faq-card-bordered .faq-card,
.faq-section.faq-bg-primary.faq-card-bordered .faq-item,
.faq-section.faq-bg-primary.faq-card-bordered .faq-card,
.faq-section.faq-bg-gradient.faq-card-bordered .faq-item,
.faq-section.faq-bg-gradient.faq-card-bordered .faq-card {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Shadow */
.faq-section.faq-card-shadow .faq-item,
.faq-section.faq-card-shadow .faq-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: none;
}

/* ---------------------------------------------
   9.6 Hover Effects
   --------------------------------------------- */

/* None - No hover effect */
.faq-section.faq-hover-none .faq-item:hover,
.faq-section.faq-hover-none .faq-card:hover {
    transform: none;
    box-shadow: inherit;
}

/* Lift - Move up with shadow */
.faq-section.faq-hover-lift .faq-item:hover,
.faq-section.faq-hover-lift .faq-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Scale - Grow slightly */
.faq-section.faq-hover-scale .faq-item:hover,
.faq-section.faq-hover-scale .faq-card:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Glow - Primary color glow */
.faq-section.faq-hover-glow .faq-item:hover,
.faq-section.faq-hover-glow .faq-card:hover {
    box-shadow: 0 0 20px rgba(1, 109, 183, 0.25);
}

/* Bordered cards - border color change on hover */
.faq-section.faq-card-bordered .faq-item:hover,
.faq-section.faq-card-bordered .faq-card:hover {
    border-color: var(--primary, #016db7);
}
/* ---------------------------------------------
   9.7 Accordion Layout
   --------------------------------------------- */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    border-radius: 12px;
    overflow: hidden;
}

/* Question Button */
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 16px;
    transition: background 0.2s ease;
}

.faq-question:hover {
    background: rgba(0, 0, 0, 0.02);
}

.faq-question span:first-child {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

/* FAQ Icon */
.faq-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

/* Icon Style: Plus/Minus - no rotation */
.faq-section.faq-icon-plus-minus .faq-item.active .faq-icon {
    transform: rotate(0deg);
}

/* Icon Style: None */
.faq-section.faq-icon-none .faq-icon {
    display: none;
}

/* Dark background icon color */
.faq-section.faq-bg-dark .faq-icon,
.faq-section.faq-bg-primary .faq-icon,
.faq-section.faq-bg-gradient .faq-icon {
    color: rgba(255, 255, 255, 0.8);
}

/* Answer */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer-content {
    padding: 0 24px 20px;
    font-size: 15px;
    line-height: 1.7;
}

/* ---------------------------------------------
   9.8 Two Column Layout
   --------------------------------------------- */
.faq-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.faq-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------------------------------------------
   9.9 Cards Grid Layout
   --------------------------------------------- */
.faq-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.faq-card {
    padding: 28px;
    border-radius: 16px;
}

.faq-card-question {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
}

.faq-card-answer {
    font-size: 15px;
    line-height: 1.7;
}

/* ---------------------------------------------
   9.10 CTA Button
   --------------------------------------------- */
.faq-cta {
    text-align: center;
    margin-top: 48px;
}

.faq-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.faq-cta .btn-primary {
    background: var(--primary, #016db7);
    color: white;
}

.faq-cta .btn-primary:hover {
    background: var(--primary-dark, #015a96);
    transform: translateY(-2px);
}

/* Dark background CTA */
.faq-section.faq-bg-dark .faq-cta .btn-primary,
.faq-section.faq-bg-primary .faq-cta .btn-primary,
.faq-section.faq-bg-gradient .faq-cta .btn-primary {
    background: #ffffff;
    color: var(--primary, #016db7);
}

.faq-section.faq-bg-dark .faq-cta .btn-primary:hover,
.faq-section.faq-bg-primary .faq-cta .btn-primary:hover,
.faq-section.faq-bg-gradient .faq-cta .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* ---------------------------------------------
   9.11 Animations
   --------------------------------------------- */
.faq-section [data-reveal="fade"] {
    opacity: 0;
    animation: faqFadeIn 0.6s ease forwards;
}

.faq-section [data-reveal="slide"] {
    opacity: 0;
    transform: translateY(20px);
    animation: faqSlideIn 0.6s ease forwards;
}

.faq-section [data-reveal="stagger"] {
    opacity: 0;
    transform: translateY(20px);
    animation: faqSlideIn 0.6s ease forwards;
}

@keyframes faqFadeIn {
    to {
        opacity: 1;
    }
}

@keyframes faqSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------
   9.12 Responsive
   --------------------------------------------- */
@media (max-width: 768px) {
    /* Class-based responsive padding */
    .faq-section.faq-padding-compact {
        padding: 32px 0;
    }
    
    .faq-section.faq-padding-normal {
        padding: 60px 0;
    }
    
    .faq-section.faq-padding-spacious {
        padding: 80px 0;
    }
    
    /* Full width mobile adjustment */
    .faq-section.faq-width-full .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .faq-section .section-header h2 {
        font-size: 28px;
    }
    
    .faq-section .section-header p {
        font-size: 16px;
    }
    
    .faq-two-column {
        grid-template-columns: 1fr;
    }
    
    .faq-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .faq-question {
        padding: 16px 20px;
    }
    
    .faq-question span:first-child {
        font-size: 15px;
    }
    
    .faq-answer-content {
        padding: 0 20px 16px;
        font-size: 14px;
    }
    
    .faq-card {
        padding: 20px;
    }
    
    .faq-card-question {
        font-size: 16px;
    }
    
    .faq-card-answer {
        font-size: 14px;
    }
    
    .faq-cta {
        margin-top: 32px;
    }
    
    .faq-cta .btn {
        padding: 12px 24px;
        font-size: 14px;
    }
}

/* ==============================================
   8. CTA SECTION
   ============================================== */

/* ---------------------------------------------
   8.1 Base CTA Section
   --------------------------------------------- */
.cta-section {
    position: relative;
    text-align: center;
    overflow: hidden;
}

.cta-section .container {
    position: relative;
    z-index: 2;
}

/* ---------------------------------------------
   8.2 Background Styles
   --------------------------------------------- */
.cta-section.cta-bg-white {
    background-color: #ffffff;
}

.cta-section.cta-bg-light {
    background-color: #f8fafc;
}

.cta-section.cta-bg-dark {
    background-color: #1e293b;
}

.cta-section.cta-bg-primary {
    background-color: var(--primary, #016db7);
}

/* Overlay for background image */
.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* ---------------------------------------------
   8.3 Section Padding (Standardized)
   --------------------------------------------- */
.cta-section.cta-padding-compact {
    padding: 48px 0;
}

.cta-section.cta-padding-normal {
    padding: 80px 0;
}

.cta-section.cta-padding-spacious {
    padding: 120px 0;
}

/* ---------------------------------------------
   8.4 Content Width (Standardized)
   --------------------------------------------- */
.cta-section.cta-width-narrow .container {
    max-width: 896px;
}

.cta-section.cta-width-default .container {
    max-width: 1152px;
}

.cta-section.cta-width-wide .container {
    max-width: 1280px;
}

.cta-section.cta-width-full .container {
    max-width: 100%;
}

/* ---------------------------------------------
   8.5 Heading Size (Standardized)
   --------------------------------------------- */
.cta-section.cta-heading-sm .cta-title { font-size: 28px; }
.cta-section.cta-heading-md .cta-title { font-size: 32px; }
.cta-section.cta-heading-lg .cta-title { font-size: 36px; }
.cta-section.cta-heading-xl .cta-title { font-size: 42px; }

/* ---------------------------------------------
   8.6 Text Size (Standardized)
   --------------------------------------------- */
.cta-section.cta-text-sm .cta-subtitle { font-size: 14px; }
.cta-section.cta-text-md .cta-subtitle { font-size: 16px; }
.cta-section.cta-text-lg .cta-subtitle { font-size: 18px; }

/* ---------------------------------------------
   8.7 Centered Layout
   --------------------------------------------- */
.cta-centered {
    margin: 0 auto;
    text-align: center;
}

.cta-title {
    font-weight: 800;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.cta-subtitle {
    line-height: 1.6;
    margin: 0 0 32px 0;
    opacity: 0.9;
}

/* ---------------------------------------------
   8.8 Aligned Layout
   --------------------------------------------- */
.cta-aligned {
    margin: 0 auto;
}

.cta-section.cta-align-left .cta-aligned {
    text-align: left;
    margin: 0;
}

.cta-section.cta-align-center .cta-aligned {
    text-align: center;
    margin: 0 auto;
}

.cta-section.cta-align-right .cta-aligned {
    text-align: right;
    margin: 0 0 0 auto;
}

/* Only apply alignment to ALIGNED layout - not centered/split/image */
.cta-section.cta-layout-aligned.cta-align-left .cta-buttons {
    justify-content: flex-start;
}

.cta-section.cta-layout-aligned.cta-align-center .cta-buttons {
    justify-content: center;
}

.cta-section.cta-layout-aligned.cta-align-right .cta-buttons {
    justify-content: flex-end;
}

/* ---------------------------------------------
   8.9 Split Layout
   --------------------------------------------- */
.cta-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.cta-split.image-left {
    direction: rtl;
}

.cta-split.image-left > * {
    direction: ltr;
}

.cta-split.image-right {
    direction: ltr;
}

.cta-split-content {
    text-align: left;
}

.cta-split-content .cta-buttons {
    justify-content: flex-start;
}

.cta-split-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.cta-split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}

.cta-image-placeholder i {
    font-size: 48px;
    opacity: 0.3;
}

/* ---------------------------------------------
   8.10 Buttons
   --------------------------------------------- */
.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons .btn {
    padding: 16px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Solid Button */
.cta-buttons .btn-solid {
    background: var(--primary, #016db7);
    color: #ffffff;
    border: 2px solid var(--primary, #016db7);
}

.cta-buttons .btn-solid:hover {
    background: var(--primary-dark, #015a96);
    border-color: var(--primary-dark, #015a96);
    transform: translateY(-2px);
}

/* Outline Button */
.cta-buttons .btn-outline {
    background: transparent;
    color: inherit;
    border: 2px solid currentColor;
}

.cta-buttons .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* Ghost Button */
.cta-buttons .btn-ghost {
    background: transparent;
    color: inherit;
    border: 2px solid transparent;
}

.cta-buttons .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* White Button */
.cta-buttons .btn-white {
    background: #ffffff;
    color: var(--primary, #016db7);
    border: 2px solid #ffffff;
}

.cta-buttons .btn-white:hover {
    background: #f8fafc;
    border-color: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ---------------------------------------------
   8.11 Reveal Animations
   --------------------------------------------- */
.cta-content[data-reveal="fade"],
.cta-split[data-reveal="fade"] {
    animation: ctaFadeIn 0.8s ease both;
}

.cta-content[data-reveal="slide"],
.cta-split[data-reveal="slide"] {
    animation: ctaSlideUp 0.8s ease both;
}

.cta-content[data-reveal="stagger"] .cta-title,
.cta-split[data-reveal="stagger"] .cta-title {
    animation: ctaSlideUp 0.6s ease both;
}

.cta-content[data-reveal="stagger"] .cta-subtitle,
.cta-split[data-reveal="stagger"] .cta-subtitle {
    animation: ctaSlideUp 0.6s ease both;
    animation-delay: 0.1s;
}

.cta-content[data-reveal="stagger"] .cta-buttons,
.cta-split[data-reveal="stagger"] .cta-buttons {
    animation: ctaSlideUp 0.6s ease both;
    animation-delay: 0.2s;
}

.cta-split[data-reveal="stagger"] .cta-split-image {
    animation: ctaSlideUp 0.6s ease both;
    animation-delay: 0.3s;
}

@keyframes ctaFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes ctaSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------
   8.12 CTA Responsive
   --------------------------------------------- */
@media (max-width: 1024px) {
    .cta-split {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .cta-section.cta-padding-compact { padding: 32px 0; }
    .cta-section.cta-padding-normal { padding: 48px 0; }
    .cta-section.cta-padding-spacious { padding: 64px 0; }
    
    .cta-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .cta-split.image-left,
    .cta-split.image-right {
        direction: ltr;
    }
    
    .cta-split-content {
        text-align: center;
        order: 1;
    }
    
    .cta-split-content .cta-buttons {
        justify-content: center;
    }
    
    .cta-split-image {
        order: 2;
    }
    
    .cta-buttons .btn {
        padding: 14px 32px;
        font-size: 15px;
    }
    
    /* Aligned layout - center on mobile */
    .cta-section.cta-align-left .cta-aligned,
    .cta-section.cta-align-right .cta-aligned {
        text-align: center;
        margin: 0 auto;
    }
    
    .cta-section.cta-align-left .cta-buttons,
    .cta-section.cta-align-right .cta-buttons {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ==============================================
   9. SHARED SECTION STYLES
   ============================================== */
.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.section-header h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 16px;
}

.section-header p {
    font-size: 18px;
    color: var(--text-light);
}

/* Empty State */
.section-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--text-light);
}


/* ==============================================
   10. RESPONSIVE - ALL SECTIONS
   ============================================== */

/* ---------------------------------------------
   Large Tablets (1024px)
   --------------------------------------------- */
@media (max-width: 1024px) {
    /* Hero */
    .hero-content {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 40px;
    }
    
    .hero.hero-layout-content_left_media_right .hero-media,
    .hero.hero-layout-content_right_media_left .hero-media {
        order: -1;
    }
    
    .hero.hero-layout-content_left_media_right .hero-text,
    .hero.hero-layout-content_right_media_left .hero-text {
        order: 1;
    }
    
    .hero-buttons {
        justify-content: center !important;
    }
    
    .hero-stats {
        justify-content: center !important;
    }
    
    .hero-text {
        text-align: center !important;
    }
    
    /* Trust Bar */
    .trust-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* How It Works */
    .steps-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
    
    /* Features */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }
    
    /* Blog Preview */
    .blog-preview-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
    
    /* Pricing */
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    
    .pricing-card.featured {
        transform: none;
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-4px);
    }
}

/* ---------------------------------------------
   Tablets (768px)
   --------------------------------------------- */
@media (max-width: 768px) {
    /* Hero */
    .hero-text h1 {
        font-size: 36px;
    }
    
    .hero-text p {
        font-size: 16px;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }
    
    .stat-item {
        text-align: center;
    }
    
    .hero-media-card {
        padding: 24px;
    }
    
    .hero-media-card .card-chart {
        height: 150px;
    }
    
    /* Trust Bar */
    .trust-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .trust-number {
        font-size: 32px;
    }
    
    /* Section Headers */
    .section-header h2 {
        font-size: 32px;
    }
    
    .section-header p {
        font-size: 16px;
    }
    
    /* Features */
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    /* CTA */
    .cta-section h2 {
        font-size: 32px;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* ---------------------------------------------
   Mobile (576px)
   --------------------------------------------- */
@media (max-width: 576px) {
    /* Hero */
    .hero.hero-padding-small {
        padding: 40px 0;
    }
    
    .hero.hero-padding-medium {
        padding: 60px 0;
    }
    
    .hero.hero-padding-large {
        padding: 80px 0;
    }
    
    .hero-text h1 {
        font-size: 28px;
    }
    
    .stat-number {
        font-size: 28px;
    }
    
    /* Trust Bar */
    .trust-content {
        grid-template-columns: 1fr;
    }
    
    /* Step Cards */
    .step-card {
        padding: 32px 24px;
    }
    
    /* Feature Cards */
    .feature-card {
        padding: 24px;
    }
    
    /* Testimonial Cards */
    .testimonial-card {
        padding: 24px;
    }
    
    /* Pricing Cards */
    .pricing-card {
        padding: 32px 24px;
    }
    
    .pricing-price {
        font-size: 36px;
    }
}



/* ==============================================
   GLOBAL HOVER FIX - ALL SECTIONS
   ============================================== */

/* Base transition for all cards */
.feature-card,
.testimonial-card,
.hiw-card,
.pricing-plan-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ---------------------------------------------
   Features Hover
   --------------------------------------------- */
.features.features-hover-none .feature-card:hover {
    transform: none !important;
}

.features.features-hover-lift .feature-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.features.features-hover-scale .feature-card:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

.features.features-hover-glow .feature-card:hover {
    box-shadow: 0 0 15px rgba(1, 109, 183, 0.15) !important;
}

/* ---------------------------------------------
   Testimonials Hover
   --------------------------------------------- */
.testimonials.testimonials-hover-none .testimonial-card:hover {
    transform: none !important;
}

.testimonials.testimonials-hover-lift .testimonial-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.testimonials.testimonials-hover-scale .testimonial-card:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

.testimonials.testimonials-hover-glow .testimonial-card:hover {
    box-shadow: 0 0 15px rgba(1, 109, 183, 0.15) !important;
}

/* ---------------------------------------------
   How It Works Hover
   --------------------------------------------- */
.hiw-hover-lift .hiw-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.hiw-hover-scale .hiw-card:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

.hiw-hover-glow .hiw-card:hover {
    box-shadow: 0 0 20px rgba(1, 109, 183, 0.2) !important;
}

/* ---------------------------------------------
   Pricing Hover
   --------------------------------------------- */
.pricing-section.pricing-hover-lift .pricing-plan-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.pricing-section.pricing-hover-scale .pricing-plan-card:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

.pricing-section.pricing-hover-glow .pricing-plan-card:hover {
    box-shadow: 0 0 15px rgba(1, 109, 183, 0.15) !important;
}

/* ---------------------------------------------
   Bordered Cards - Border Highlight
   --------------------------------------------- */
.features.features-style-bordered .feature-card:hover,
.testimonials.testimonials-style-bordered .testimonial-card:hover,
.how-it-works-section.hiw-style-bordered .hiw-card:hover,
.pricing-section.pricing-style-bordered .pricing-plan-card:hover {
    border-color: var(--primary) !important;
}

/* ==============================================
   END OF SECTIONS STYLES
   ============================================= */