/* ============================================
   FRONT PAGE STYLES
   Page: front-page.php
   ============================================ */

/* Responsive Grid System for Front Page */
.fp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.fp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.fp-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

/* Hero Visual - Hide on mobile */
.fp-hero-visual { display: block; }

/* Metrics Bar */
.fp-metrics { display: flex; flex-wrap: wrap; gap: 32px; }

/* Trust Badges */
.fp-trust-badges { display: flex; flex-wrap: wrap; gap: 20px; }

/* Tablet Breakpoint */
@media (max-width: 1024px) {
    .fp-grid-2 { grid-template-columns: 1fr; gap: 24px; }
    .fp-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .fp-grid-5 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* Mobile Breakpoint - VIBRANT ENHANCED VERSION */
@media (max-width: 768px) {
    /* ===================================================
       KEYFRAME ANIMATIONS
       =================================================== */
    @keyframes shimmer {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    
    @keyframes pulse-glow {
        0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
        50% { box-shadow: 0 0 35px rgba(139, 92, 246, 0.5); }
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }
    
    /* ===================================================
       GLOBAL MOBILE FONT SIZES - MAXIMUM PRIORITY
       =================================================== */
    
    /* ALL H4 HEADERS IN CARDS - 20px */
    section h4,
    section div h4,
    .fp-grid-2 h4,
    .fp-grid-3 h4,
    .fp-voice-features h4,
    .fp-hitl-grid h4,
    [style*="font-size"] h4 {
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    
    /* ALL H3 HEADERS - 22px */
    section h3,
    section div h3,
    .fp-grid-2 h3,
    .fp-grid-3 h3,
    [style*="font-size"] h3 {
        font-size: 22px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }
    
    /* ALL PARAGRAPHS IN CARDS - 18px */
    section div p,
    .fp-grid-2 p,
    .fp-grid-3 p,
    .fp-voice-features p,
    .fp-hitl-grid p,
    [style*="font-size"] p,
    [style*="color:#94a3b8"] {
        font-size: 18px !important;
        line-height: 1.65 !important;
    }
    
    /* ALL LIST ITEMS - 18px */
    section li,
    section div li,
    .fp-grid-2 li,
    .fp-grid-3 li,
    .fp-hitl-grid li,
    [style*="font-size"] li {
        font-size: 18px !important;
        line-height: 1.7 !important;
    }
    
    /* SECTION HEADERS H2 - Enhanced gradient text */
    section h2,
    section > div > div > h2,
    [style*="font-size"] h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    
    /* SECTION INTRO PARAGRAPHS - 19px */
    section > .container > div > p,
    section > .container > div:first-child > p {
        font-size: 19px !important;
        line-height: 1.6 !important;
    }
    
    /* FAQ QUESTIONS - 20px */
    #faq h4,
    #faq div[style*="font-weight"] {
        font-size: 20px !important;
        font-weight: 600 !important;
    }
    
    /* FAQ ANSWERS - 18px */
    #faq p,
    #faq div[style*="color:#94a3b8"] {
        font-size: 18px !important;
        line-height: 1.65 !important;
    }
    
    /* CASE STUDY HEADERS - 20px */
    #results h4,
    #results div[style*="font-weight:600"] {
        font-size: 20px !important;
    }
    
    /* CASE STUDY LISTS - 18px */
    #results li {
        font-size: 18px !important;
        line-height: 1.7 !important;
    }
    
    /* VOICE AGENT FEATURE CARDS */
    .fp-voice-features > div h4 {
        font-size: 20px !important;
    }
    .fp-voice-features > div p {
        font-size: 18px !important;
    }
    
    /* HITL CARDS */
    .fp-hitl-grid > div h4 {
        font-size: 20px !important;
    }
    .fp-hitl-grid > div li {
        font-size: 18px !important;
    }
    
    /* Small text labels/captions - 16px minimum */
    section span,
    section div span,
    [style*="font-size:0.75rem"],
    [style*="font-size:0.875rem"] {
        font-size: 16px !important;
    }
    
    /* ===================================================
       HERO SECTION - VIBRANT ENHANCEMENT
       =================================================== */
    #hero {
        padding: 100px 0 60px !important;
        min-height: auto !important;
        background: linear-gradient(180deg, #0f1219 0%, #0a0b0f 50%, #12141c 100%) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    #hero::before {
        content: "" !important;
        position: absolute !important;
        top: -10% !important;
        right: -30% !important;
        width: 400px !important;
        height: 400px !important;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.15) 40%, transparent 70%) !important;
        pointer-events: none !important;
    }
    
    #hero::after {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 200px !important;
        background: linear-gradient(180deg, transparent 0%, rgba(139, 92, 246, 0.05) 100%) !important;
        pointer-events: none !important;
    }
    
    .fp-hero-content { 
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        position: relative !important;
        z-index: 1 !important;
    }
    .fp-hero-visual { display: none !important; }
    
    /* Hero headline - Gradient text */
    #hero h1 {
        font-size: 2.25rem !important;
        margin-bottom: 16px !important;
        line-height: 1.15 !important;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    
    #hero h1 span {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        text-shadow: none !important;
    }
    
    /* Hero subheadline */
    #hero .hero-text > p {
        font-size: 1.125rem !important;
        margin-bottom: 24px !important;
        line-height: 1.6 !important;
        color: #a1a1aa !important;
    }
    
    /* === CTA BUTTONS - GLOWING === */
    .fp-cta-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .fp-cta-buttons a:first-child {
        width: 100% !important;
        justify-content: center !important;
        padding: 18px 24px !important;
        text-align: center !important;
        font-size: 1.0625rem !important;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%) !important;
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.4), 0 4px 20px rgba(99, 102, 241, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        animation: pulse-glow 3s ease-in-out infinite !important;
    }
    
    .fp-cta-buttons a:last-child {
        width: 100% !important;
        justify-content: center !important;
        padding: 16px 24px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(148, 163, 184, 0.2) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* === METRICS BAR - GLOWING CARDS === */
    .fp-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 24px 0 !important;
        border-top: 1px solid rgba(99, 102, 241, 0.15) !important;
    }
    
    .fp-metrics > div {
        text-align: center !important;
        padding: 20px 16px !important;
        background: linear-gradient(135deg, #15171f 0%, #1a1d28 100%) !important;
        border: 1px solid rgba(99, 102, 241, 0.15) !important;
        border-radius: 16px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .fp-metrics > div::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 2px !important;
        background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7) !important;
        background-size: 200% 100% !important;
        animation: shimmer 3s ease-in-out infinite !important;
    }
    
    .fp-metrics > div > div:first-child {
        font-size: 1.75rem !important;
        font-weight: 700 !important;
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    
    .fp-metrics > div > div:last-child {
        font-size: 0.875rem !important;
        color: #94a3b8 !important;
        margin-top: 4px !important;
    }
    
    /* === TRUST BADGES - GLOWING PILLS === */
    .fp-trust-badges {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-top: 16px !important;
    }
    
    .fp-trust-badges > div {
        font-size: 0.875rem !important;
        padding: 12px 14px !important;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
        border: 1px solid rgba(99, 102, 241, 0.2) !important;
        border-radius: 12px !important;
        justify-content: flex-start !important;
    }
    
    .fp-trust-badges > div i {
        filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.5)) !important;
    }
    
    /* === ALL GRIDS TO SINGLE COLUMN === */
    .fp-grid-2,
    .fp-grid-3,
    .fp-grid-4,
    .fp-grid-5 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* === STATISTICS "NUMBERS DON'T LIE" - GLOWING === */
    .fp-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .fp-stats-grid > div {
        background: linear-gradient(135deg, #15171f 0%, #1a1d28 100%) !important;
        border: 1px solid rgba(34, 197, 94, 0.15) !important;
        border-radius: 16px !important;
        padding: 20px !important;
    }
    
    .fp-stats-grid > div > div:first-child {
        font-size: 1.75rem !important;
        font-weight: 700 !important;
        background: linear-gradient(135deg, #22c55e 0%, #00d4ff 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    
    .fp-stats-grid > div > div:last-child {
        font-size: 0.9375rem !important;
    }
    
    /* === PREMIUM STATS GRID - ENHANCED === */
    .fp-stats-grid-premium {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }
    
    .fp-stats-grid-premium > div {
        padding: 28px 16px !important;
        background: linear-gradient(135deg, #15171f 0%, #1a1d28 100%) !important;
    }
    
    .fp-stats-grid-premium > div > div:first-child {
        font-size: 2rem !important;
        background: linear-gradient(135deg, #22c55e 0%, #00d4ff 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        text-shadow: 0 0 30px rgba(34, 197, 94, 0.3) !important;
    }
    
    /* === HITL PROCESS - ENHANCED CARDS === */
    .fp-hitl-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .fp-hitl-grid > div {
        background: linear-gradient(135deg, #15171f 0%, #1a1d28 100%) !important;
        border: 1px solid rgba(34, 197, 94, 0.15) !important;
        border-radius: 16px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .fp-hitl-grid > div::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 20% !important;
        right: 20% !important;
        height: 2px !important;
        background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent) !important;
    }
    
    .fp-hitl-grid > div h4 {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: #f8fafc !important;
    }
    
    .fp-hitl-grid > div li {
        font-size: 1.0625rem !important;
        line-height: 1.7 !important;
    }
    
    .fp-hitl-grid > div > div:last-child {
        font-size: 0.9375rem !important;
    }
    
    /* === CTA VALUE PROPS === */
    .fp-cta-props {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .fp-cta-props > div:last-child {
        grid-column: 1 / -1;
        justify-self: center;
    }
    .fp-cta-props > div {
        font-size: 1rem !important;
        padding: 12px 16px !important;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%) !important;
        border: 1px solid rgba(99, 102, 241, 0.2) !important;
        border-radius: 12px !important;
    }
    
    /* === CASE STUDIES METRICS - GLOWING === */
    .fp-case-metrics {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .fp-case-metrics > div {
        padding: 20px !important;
        background: linear-gradient(135deg, #15171f 0%, #1a1d28 100%) !important;
        border: 1px solid rgba(34, 197, 94, 0.15) !important;
        border-radius: 16px !important;
    }
    
    .fp-case-metrics > div > div:first-child {
        font-size: 2rem !important;
        font-weight: 700 !important;
        background: linear-gradient(135deg, #22c55e 0%, #00d4ff 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    
    .fp-case-metrics > div > div:nth-child(2) {
        font-size: 1rem !important;
    }
    
    /* === SECTION PADDING === */
    section.section {
        padding: 60px 0 !important;
        position: relative !important;
    }
    
    /* === CONTAINER PADDING === */
    .container {
        padding: 0 16px !important;
    }
    
    /* === VOICE AGENT FEATURES - ENHANCED === */
    .fp-voice-features {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .fp-voice-features > div {
        padding: 24px !important;
        background: linear-gradient(135deg, #15171f 0%, #1a1d28 100%) !important;
        border: 1px solid rgba(99, 102, 241, 0.12) !important;
        border-radius: 16px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .fp-voice-features > div::after {
        content: "" !important;
        position: absolute !important;
        top: -1px !important;
        left: 20% !important;
        right: 20% !important;
        height: 2px !important;
        background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.5), transparent) !important;
    }
    
    .fp-voice-features > div h4,
    .fp-voice-features h4 {
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        margin-bottom: 12px !important;
        color: #f8fafc !important;
    }
    
    .fp-voice-features > div p,
    .fp-voice-features p {
        font-size: 1.0625rem !important;
        line-height: 1.6 !important;
    }
    
    /* === GUARANTEE GRID - GLOWING === */
    .fp-guarantee-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .fp-guarantee-grid > div:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
    }
    
    .fp-guarantee-grid > div {
        font-size: 1rem !important;
        padding: 14px 16px !important;
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%) !important;
        border: 1px solid rgba(34, 197, 94, 0.2) !important;
        border-radius: 12px !important;
    }
    
    .fp-guarantee-grid > div i {
        filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.5)) !important;
    }
    
    /* === PREMIUM GUARANTEE GRID === */
    .fp-guarantee-grid-premium {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* === SECTION HEADERS - GRADIENT === */
    section h2 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }
    
    /* === SECTION INTRO TEXT === */
    section > .container > div:first-child > p {
        font-size: 1.0625rem !important;
        line-height: 1.6 !important;
    }
    
    /* === ALL CARDS - ENHANCED === */
    .fp-grid-3 > div,
    .fp-grid-2 > div {
        padding: 24px !important;
        background: linear-gradient(135deg, #15171f 0%, #1a1d28 100%) !important;
        border: 1px solid rgba(99, 102, 241, 0.1) !important;
        border-radius: 16px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Card titles */
    .fp-grid-3 > div h3,
    .fp-grid-2 > div h3,
    .fp-grid-3 > div h4,
    .fp-grid-2 > div h4 {
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        margin-bottom: 12px !important;
        color: #f8fafc !important;
    }
    
    /* Card paragraphs */
    .fp-grid-3 > div p,
    .fp-grid-2 > div p {
        font-size: 1.0625rem !important;
        line-height: 1.65 !important;
    }
    
    /* Card lists */
    .fp-grid-3 > div li,
    .fp-grid-2 > div li {
        font-size: 1.0625rem !important;
        line-height: 1.75 !important;
    }
    
    /* === PAIN POINTS CARDS === */
    #problem .fp-grid-3 > div {
        border: 1px solid rgba(239, 68, 68, 0.15) !important;
    }
    
    #problem .fp-grid-3 > div h3 {
        font-size: 1.0625rem !important;
        font-weight: 600 !important;
    }
    
    #problem .fp-grid-3 > div p {
        font-size: 1rem !important;
    }
    
    /* === SOLUTION COMPARISON CARDS - ENHANCED === */
    #solution .fp-grid-3 > div:first-child {
        border: 1px solid rgba(239, 68, 68, 0.2) !important;
    }
    
    #solution .fp-grid-3 > div:nth-child(2) {
        border: 1px solid rgba(245, 158, 11, 0.2) !important;
    }
    
    #solution .fp-grid-3 > div:last-child {
        border: 2px solid rgba(99, 102, 241, 0.4) !important;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.15) !important;
    }
    
    #solution .fp-grid-3 > div ul li {
        font-size: 1.0625rem !important;
        line-height: 1.8 !important;
    }
    
    /* === STAGE CARDS (How It Works) - ENHANCED === */
    #how-it-works .fp-grid-2 > div {
        border: 1px solid rgba(99, 102, 241, 0.15) !important;
    }
    
    #how-it-works .fp-grid-2 > div::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 3px !important;
        background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7) !important;
    }
    
    #how-it-works .fp-grid-2 > div h3 {
        font-size: 1.375rem !important;
        background: linear-gradient(135deg, #f8fafc, #e2e8f0) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    
    #how-it-works .fp-grid-2 > div > p:first-of-type {
        font-size: 1.0625rem !important;
        font-weight: 500 !important;
    }
    
    #how-it-works .fp-grid-2 > div li {
        font-size: 1rem !important;
    }
    
    /* === CASE STUDIES CARDS - ENHANCED === */
    #results .fp-grid-3 > div {
        border: 1px solid rgba(34, 197, 94, 0.15) !important;
    }
    
    #results .fp-grid-3 > div h4 {
        font-size: 1.125rem !important;
        color: #22c55e !important;
    }
    
    #results .fp-grid-3 > div li {
        font-size: 1.0625rem !important;
    }
    
    /* === FAQ SECTION - ENHANCED === */
    #faq .fp-grid-2 > div {
        padding: 24px !important;
        background: linear-gradient(135deg, #15171f 0%, #1a1d28 100%) !important;
        border: 1px solid rgba(99, 102, 241, 0.1) !important;
        border-radius: 16px !important;
    }
    
    #faq h4,
    #faq .fp-grid-2 > div > div:first-child {
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        margin-bottom: 12px !important;
        color: #f8fafc !important;
    }
    
    #faq p,
    #faq .fp-grid-2 > div > div:last-child {
        font-size: 1.0625rem !important;
        line-height: 1.65 !important;
    }
    
    /* === FINAL CTA SECTION - ENHANCED === */
    #cta {
        background: linear-gradient(180deg, #0f1219 0%, #0a0b0f 50%, #12141c 100%) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    #cta::before {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 500px !important;
        height: 500px !important;
        background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 40%, transparent 70%) !important;
        pointer-events: none !important;
    }
    
    #cta h2 {
        font-size: 1.75rem !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    #cta > .container > p {
        font-size: 1.0625rem !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    #cta .btn-primary {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%) !important;
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.4) !important;
        animation: pulse-glow 3s ease-in-out infinite !important;
    }
    
    /* === SECTION BADGES === */
    section [style*="text-transform:uppercase"][style*="letter-spacing"] {
        padding: 8px 16px !important;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
        border: 1px solid rgba(139, 92, 246, 0.3) !important;
        border-radius: 20px !important;
        display: inline-block !important;
        box-shadow: 0 0 15px rgba(139, 92, 246, 0.2) !important;
    }
    
    /* === ICONS GLOW === */
    section i[data-lucide] {
        filter: drop-shadow(0 0 4px currentColor) !important;
    }
    
    /* === CHECKMARK ICONS GREEN GLOW === */
    i[data-lucide="check"],
    i[data-lucide="check-circle"],
    i[style*="color:#22c55e"] {
        filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.5)) !important;
    }
}

/* Small Mobile Breakpoint - ENHANCED */
@media (max-width: 480px) {
    #hero {
        padding: 80px 0 50px !important;
    }
    
    #hero h1 {
        font-size: 1.875rem !important;
    }
    
    #hero .hero-text > p {
        font-size: 1rem !important;
    }
    
    /* Metrics - Enhanced compact cards */
    .fp-metrics {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .fp-metrics > div {
        padding: 16px 12px !important;
    }
    
    .fp-metrics > div > div:first-child {
        font-size: 1.5rem !important;
    }
    
    .fp-metrics > div > div:last-child {
        font-size: 0.75rem !important;
    }
    
    /* Trust badges - single column */
    .fp-trust-badges {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .fp-trust-badges > div {
        padding: 10px 12px !important;
        font-size: 0.8125rem !important;
    }
    
    /* Stats stay 2x2 */
    .fp-stats-grid,
    .fp-stats-grid-premium {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .fp-stats-grid > div > div:first-child,
    .fp-stats-grid-premium > div > div:first-child {
        font-size: 1.5rem !important;
    }
    
    .fp-stats-grid-premium > div {
        padding: 20px 12px !important;
    }
    
    /* Case metrics */
    .fp-case-metrics > div > div:first-child {
        font-size: 1.75rem !important;
    }
    
    /* CTA props - single column */
    .fp-cta-props,
    .fp-guarantee-grid {
        grid-template-columns: 1fr !important;
    }
    
    .fp-cta-props > div:last-child,
    .fp-guarantee-grid > div:last-child:nth-child(odd) {
        grid-column: auto;
        justify-self: auto;
    }
    
    /* Section headers */
    section h2 {
        font-size: 1.5rem !important;
    }
    
    /* Cards compact */
    .fp-grid-3 > div,
    .fp-grid-2 > div {
        padding: 20px !important;
    }
    
    .fp-grid-3 > div h3,
    .fp-grid-2 > div h3,
    .fp-grid-3 > div h4,
    .fp-grid-2 > div h4 {
        font-size: 1.125rem !important;
    }
    
    .fp-grid-3 > div p,
    .fp-grid-2 > div p,
    .fp-grid-3 > div li,
    .fp-grid-2 > div li {
        font-size: 1rem !important;
    }
    
    /* CTA buttons compact */
    .fp-cta-buttons a:first-child,
    .fp-cta-buttons a:last-child {
        padding: 16px 20px !important;
        font-size: 1rem !important;
    }
    
    /* HITL cards */
    .fp-hitl-grid > div {
        padding: 20px !important;
    }
    
    .fp-hitl-grid > div h4 {
        font-size: 1.125rem !important;
    }
    
    /* Voice features */
    .fp-voice-features > div {
        padding: 20px !important;
    }
    
    .fp-voice-features > div h4 {
        font-size: 1.125rem !important;
    }
    
    /* FAQ */
    #faq .fp-grid-2 > div {
        padding: 20px !important;
    }
    
    #faq h4,
    #faq .fp-grid-2 > div > div:first-child {
        font-size: 1rem !important;
    }
}

/* Additional animations and responsive fixes */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes fp-pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.02); }
}

@media (max-width: 1024px) {
    .fp-difference-section { grid-template-columns: 1fr !important; gap: 40px !important; }
    .fp-difference-visual { height: 280px !important; }
    .fp-difference-list { grid-template-columns: 1fr !important; }
    .fp-difference-list > div { grid-column: span 1 !important; }
    .fp-guarantee-grid-premium { grid-template-columns: repeat(3, 1fr) !important; }
    .fp-cta-container { grid-template-columns: 1fr !important; gap: 40px !important; }
}

@media (max-width: 640px) {
    .fp-guarantee-grid-premium { grid-template-columns: repeat(2, 1fr) !important; }
}