:root {
    --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
        "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
        "Source Han Sans CN", sans-serif;
    
    /* Fluid Typography - Mobile First */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --font-size-base: clamp(1rem, 0.95rem + 0.5vw, 1.125rem);
    --font-size-md: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --font-size-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --font-size-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --font-size-2xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
    --font-size-3xl: clamp(2rem, 1.7rem + 1.5vw, 3rem);
    --font-size-4xl: clamp(2.5rem, 2rem + 2vw, 4rem);
    
    /* Fluid Spacing */
    --space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
    --space-sm: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
    --space-md: clamp(1rem, 0.85rem + 0.75vw, 1.5rem);
    --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    --space-xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    --space-2xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}

/* Mobile optimizations */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: manipulation;
    /* Safe area support for notched devices */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    margin: 0;
    overflow-x: hidden;
}

/* Responsive Container System */
.main-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* Desktop Layout Preservation - 1200px and above */
@media (min-width: 1200px) {
    .main-container {
        width: 1280px;
        margin: 0 auto;
    }
}

/* Tablet Responsive - 768px to 1199px */
@media (max-width: 1199px) and (min-width: 768px) {
    .main-container {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .group {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 40px 0 !important;
    }
    
    .text-2 {
        position: relative !important;
        width: 90% !important;
        max-width: 800px !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        text-align: center !important;
        margin: 20px 0 !important;
        font-size: clamp(2rem, 5vw, 3rem) !important;
        line-height: 1.2 !important;
    }
    
    .text-4 {
        position: relative !important;
        width: 90% !important;
        max-width: 600px !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        text-align: center !important;
        margin: 20px 0 !important;
        font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
        line-height: 1.4 !important;
    }
    
    .img-2 {
        position: relative !important;
        width: 90% !important;
        max-width: 500px !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        margin: 30px 0 !important;
        display: block !important;
    }
    
    .wrapper {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        margin: 30px 0 !important;
    }
    
    .text-6, .text-7 {
        position: relative !important;
        width: 90% !important;
        max-width: 800px !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        text-align: center !important;
        margin: 20px 0 !important;
        font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }
    
    .section {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
        margin: 40px 0 !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
    
    .wrapper-2, .box-2, .group-2, .box-4 {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 30px 20px !important;
        box-sizing: border-box !important;
    }
    
    .pic-2, .img-6, .pic-3, .pic-4 {
        width: 80% !important;
        max-width: 200px !important;
        height: auto !important;
        margin: 20px auto !important;
        position: relative !important;
    }
    
    .text-8, .text-c, .text-10, .text-14 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        margin: 10px 0 !important;
        text-align: center !important;
    }
    
    .text-9, .text-d, .text-11, .text-15 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        margin: 10px 0 !important;
        text-align: center !important;
        font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important;
    }
    
    .text-a, .text-e, .text-12, .text-16 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        margin: 15px 0 !important;
        text-align: center !important;
        font-size: clamp(0.9rem, 2vw, 1.1rem) !important;
        line-height: 1.3 !important;
    }
    
    .box, .box-3, .section-2, .section-3 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        margin: 20px auto !important;
        padding: 15px 30px !important;
        display: inline-block !important;
    }
}

/* Mobile Responsive - 767px and below */
@media (max-width: 767px) {
    .main-container {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    .group {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 30px 0 !important;
        text-align: center !important;
    }
    
    .text {
        position: relative !important;
        width: 90% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        margin: 15px 0 !important;
        font-size: clamp(0.8rem, 2vw, 1rem) !important;
        text-align: center !important;
    }
    
    .text-2 {
        position: relative !important;
        width: 95% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        text-align: center !important;
        margin: 20px 0 !important;
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }
    
    .text-4 {
        position: relative !important;
        width: 95% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        text-align: center !important;
        margin: 20px 0 !important;
        font-size: clamp(1rem, 3vw, 1.1rem) !important;
        line-height: 1.4 !important;
    }
    
    .img-2 {
        position: relative !important;
        width: 95% !important;
        max-width: 400px !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        margin: 25px 0 !important;
        display: block !important;
    }
    
    .wrapper {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        margin: 25px 0 !important;
        padding: 15px 30px !important;
        display: inline-block !important;
    }
    
    .text-6 {
        position: relative !important;
        width: 95% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        text-align: center !important;
        margin: 30px 0 15px !important;
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        line-height: 1.2 !important;
    }
    
    .text-7 {
        position: relative !important;
        width: 95% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        text-align: center !important;
        margin: 15px 0 30px !important;
        font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
        line-height: 1.4 !important;
    }
    
    .section {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        margin: 30px 0 !important;
        padding: 0 !important;
    }
    
    .wrapper-2, .box-2, .group-2, .box-4 {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 25px 20px !important;
        box-sizing: border-box !important;
        border-radius: 20px !important;
    }
    
    .pic-2, .img-6, .pic-3, .pic-4 {
        width: 70% !important;
        max-width: 180px !important;
        height: auto !important;
        margin: 15px auto !important;
        position: relative !important;
    }
    
    .text-8, .text-c, .text-10, .text-14 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        margin: 10px 0 !important;
        text-align: center !important;
        font-size: clamp(0.8rem, 2vw, 0.9rem) !important;
    }
    
    .text-9, .text-d, .text-11, .text-15 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        margin: 10px 0 !important;
        text-align: center !important;
        font-size: clamp(1.1rem, 3vw, 1.3rem) !important;
        line-height: 1.3 !important;
    }
    
    .text-a, .text-e, .text-12, .text-16 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        margin: 15px 0 !important;
        text-align: center !important;
        font-size: clamp(0.85rem, 2.5vw, 1rem) !important;
        line-height: 1.4 !important;
    }
    
    .box, .box-3, .section-2, .section-3 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        margin: 20px auto !important;
        padding: 12px 25px !important;
        display: inline-block !important;
        font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
    }
    
    .text-b, .text-f, .text-13, .text-17 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
    }
}

/* Small Mobile - 480px and below */
@media (max-width: 480px) {
    .main-container {
        padding: 0 10px;
    }
    
    .group {
        padding: 20px 0 !important;
    }
    
    .text-2 {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
        margin: 15px 0 !important;
    }
    
    .text-4 {
        font-size: clamp(0.9rem, 3.5vw, 1rem) !important;
        margin: 15px 0 !important;
    }
    
    .img-2 {
        width: 100% !important;
        margin: 20px 0 !important;
    }
    
    .wrapper {
        margin: 20px 0 !important;
        padding: 12px 25px !important;
    }
    
    .section {
        gap: 20px !important;
        margin: 25px 0 !important;
    }
    
    .wrapper-2, .box-2, .group-2, .box-4 {
        padding: 20px 15px !important;
    }
    
    .pic-2, .img-6, .pic-3, .pic-4 {
        width: 60% !important;
        max-width: 150px !important;
        margin: 10px auto !important;
    }
    
    .text-6 {
        font-size: clamp(1.3rem, 6vw, 1.8rem) !important;
        margin: 25px 0 10px !important;
    }
    
    .text-7 {
        font-size: clamp(0.8rem, 3vw, 0.9rem) !important;
        margin: 10px 0 25px !important;
    }
}

/* Ultra-wide screens */
@media (min-width: 1600px) {
    .main-container {
        width: 1400px;
        margin: 0 auto;
    }
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Method section responsive */
.section-4 {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 40px 20px;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .section-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .section-4 {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 30px 15px;
    }
}

/* Additional sections responsive */
.box-5, .box-6, .section-b {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    position: relative !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .box-5, .box-6, .section-b {
        padding: 0 15px !important;
    }
}

/* Navigation responsive */
.dropdown {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .dropdown {
        padding: 15px 10px;
    }
    
    .dropdown-content {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Hero section specific responsive */
.hero-section {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

@media (max-width: 768px) {
    .hero-section {
        padding: 40px 15px;
    }
}

/* Welcome overlay responsive */
.welcome-main-container {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .welcome-main-container {
        padding: 0 15px;
    }
    
    .welcome-box {
        width: 90% !important;
        height: auto !important;
        position: relative !important;
        margin: 20px auto !important;
        padding: 30px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .welcome-img, .welcome-img-2 {
        position: relative !important;
        width: 80% !important;
        max-width: 200px !important;
        height: auto !important;
        margin: 15px auto !important;
        top: auto !important;
        left: auto !important;
    }
    
    .welcome-text-2, .welcome-text-3 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        margin: 10px 0 !important;
        text-align: center !important;
        top: auto !important;
        left: auto !important;
        font-size: clamp(1rem, 3vw, 1.2rem) !important;
    }
}

/* Contact form responsive */
.contact-form, .form-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .contact-form, .form-container {
        padding: 0 15px;
    }
}

/* Footer responsive */
.footer-section {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
    text-align: center;
}

@media (max-width: 768px) {
    .footer-section {
        padding: 30px 15px;
    }
}

/* Utility classes for responsive spacing */
.responsive-margin {
    margin: 20px 0;
}

.responsive-padding {
    padding: 20px;
}

@media (max-width: 768px) {
    .responsive-margin {
        margin: 15px 0;
    }
    
    .responsive-padding {
        padding: 15px;
    }
}

/* Prevent horizontal overflow */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Ensure all positioned elements are contained */
.positioned-element {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    margin: 20px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .positioned-element {
        padding: 0 15px !important;
    }
}

/* Additional fixes for specific elements */
@media (max-width: 1199px) {
    /* Fix for overlapping text elements */
    .text-3, .text-5, .text-18, .text-19, .text-20 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        margin: 15px 0 !important;
        text-align: center !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
    
    /* Fix for image containers */
    .img-3, .img-4, .img-5, .img-7, .img-8, .img-9 {
        position: relative !important;
        width: 90% !important;
        max-width: 400px !important;
        height: auto !important;
        margin: 20px auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        display: block !important;
    }
    
    /* Fix for button containers */
    .button-wrapper, .btn-container, .cta-wrapper {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        margin: 20px auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        text-align: center !important;
    }
    
    /* Fix for card containers */
    .card-wrapper, .card-container, .feature-card {
        position: relative !important;
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
        margin: 20px auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        padding: 30px 20px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 767px) {
    /* Mobile-specific fixes */
    .text-3, .text-5, .text-18, .text-19, .text-20 {
        font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
        margin: 10px 0 !important;
    }
    
    .img-3, .img-4, .img-5, .img-7, .img-8, .img-9 {
        width: 95% !important;
        max-width: 350px !important;
        margin: 15px auto !important;
    }
    
    .card-wrapper, .card-container, .feature-card {
        max-width: 100% !important;
        padding: 25px 15px !important;
    }
    
    .button-wrapper, .btn-container, .cta-wrapper {
        margin: 15px auto !important;
    }
}

/* Grid system for better layout control */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .responsive-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }
}

/* Flexbox system for better alignment */
.responsive-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .responsive-flex {
        flex-direction: column;
        gap: 20px;
        padding: 0 15px;
    }
}

/* Container queries for better component-level responsiveness */
@container (max-width: 400px) {
    .card-component {
        padding: 20px 15px !important;
        font-size: 0.9rem !important;
    }
}

/* Smooth transitions for responsive changes */
* {
    transition: all 0.3s ease-in-out;
}

/* Disable transitions on specific elements that shouldn't animate */
.no-transition {
    transition: none !important;
}

/* Tool cards responsive enhancement */
.tool-cards-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .tool-cards-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }
    
    .tool-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 25px 20px !important;
        box-sizing: border-box !important;
    }
}

/* Method items responsive enhancement */
.method-items {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 25px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .method-items {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }
    
    .method-item {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px 15px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}

/* Resource cards responsive enhancement */
.resource-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .resource-cards {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }
    
    .resource-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 25px 20px !important;
        box-sizing: border-box !important;
    }
}

/* Contact section responsive enhancement */
.contact-section {
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .contact-section {
        padding: 30px 15px !important;
        max-width: 100% !important;
    }
    
    .contact-form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .form-group {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    .form-input, .form-textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* Hero content responsive enhancement */
.hero-content {
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    .hero-content {
        padding: 0 15px !important;
        max-width: 100% !important;
    }
    
    .hero-title {
        font-size: clamp(2rem, 6vw, 3rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }
    
    .hero-subtitle {
        font-size: clamp(1rem, 3vw, 1.25rem) !important;
        line-height: 1.4 !important;
        margin-bottom: 30px !important;
    }
    
    .hero-cta {
        display: inline-block !important;
        margin: 20px auto !important;
        padding: 15px 30px !important;
        font-size: clamp(1rem, 2.5vw, 1.1rem) !important;
    }
}

/* Ensure proper stacking context */
.stacking-context {
    position: relative !important;
    z-index: auto !important;
}

/* Fix for any remaining absolute positioned elements */
@media (max-width: 1199px) {
    [style*="position: absolute"] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 20px auto !important;
        width: auto !important;
        max-width: 90% !important;
        height: auto !important;
    }
}

/* Final mobile optimization */
@media (max-width: 480px) {
    /* Ensure all text is readable on small screens */
    body {
        font-size: 16px !important; /* Base font size for mobile */
    }
    
    /* Ensure buttons are touch-friendly */
    button, .button, .btn, .cta {
        min-height: 44px !important;
        min-width: 44px !important;
        font-size: 16px !important;
        padding: 12px 24px !important;
    }
    
    /* Ensure links have enough spacing */
    a {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-block !important;
        line-height: 44px !important;
        padding: 0 15px !important;
    }
}

/* Mobile Design System Variables */
:root {
    --mobile-spacing-xs: 10px;
    --mobile-spacing-sm: 15px;
    --mobile-spacing-md: 20px;
    --mobile-spacing-lg: 30px;
    --mobile-spacing-xl: 40px;
    --mobile-border-radius: clamp(12px, 1vw + 10px, 20px);
    --mobile-border-radius-sm: clamp(8px, 0.75vw + 6px, 15px);
    --mobile-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --mobile-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --mobile-tap-target: 44px;
    --mobile-tap-target-lg: 48px;
}

/* Improve touch targets on mobile */
@media (max-width: 768px) {
    a, button, input, select, textarea {
        min-height: var(--mobile-tap-target);
        min-width: var(--mobile-tap-target);
    }
    
    /* Enhanced tap targets for critical actions */
    .menu-trigger,
    .menu-item,
    .box, .box-3, .section-2, .section-3,
    .wrapper,
    .section-7, .wrapper-5, .section-8 {
        min-height: var(--mobile-tap-target-lg);
    }
    
    /* Ensure menu items meet touch target requirements */
    .menu-item {
        min-height: 44px;
        padding: 8px 0;
        display: flex;
        align-items: center;
    }
    
    /* Prevent text selection on interactive elements */
    .menu-trigger, .box, .box-3, .section-2, .section-3,
    .wrapper, .section-6, .wrapper-4, .box-7,
    .wrapper-8, .box-9, .wrapper-a, .box-11 {
        -webkit-tap-highlight-color: rgba(134, 211, 225, 0.3);
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
    }
    
    /* Consistent button styling */
    .box, .box-3, .section-2, .section-3,
    .wrapper, .section-7, .wrapper-5, .section-8,
    .wrapper-8, .box-9, .wrapper-a, .box-11 button {
        border-radius: var(--mobile-border-radius-sm);
        box-shadow: var(--mobile-shadow);
        transition: all 0.3s ease;
        will-change: transform;
        -webkit-tap-highlight-color: transparent;
    }
    
    .box:active, .box-3:active, .section-2:active, .section-3:active,
    .wrapper:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Disabled button state */
    .box:disabled, .box-3:disabled, .section-2:disabled, .section-3:disabled,
    .wrapper:disabled,
    button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
    }
}

/* Welcome Overlay Styles - DISABLED */
.welcome-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.5s ease-in;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.welcome-overlay[style*="display: flex"],
.welcome-overlay:not([style*="display: none"]) {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.welcome-main-container {
    position: relative;
    width: 1280px;
    height: 832px;
    margin: 0 auto;
    font-size: 0px;
    background: #ffffff;
    overflow: visible;
    animation: floatUp 0.8s ease-out;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

.welcome-text {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    width: 833px;
    height: 77px;
    margin: 125px 0 0 223px;
    color: #000000;
    font-family: Lato, var(--default-font-family);
    font-size: 64px;
    font-weight: 900;
    line-height: 76.8px;
    text-align: center;
    white-space: nowrap;
    z-index: 3;
    box-sizing: border-box;
}

.welcome-box {
    position: relative;
    width: 955px;
    height: 428px;
    margin: 40px 0 0 163px;
    z-index: 4;
    overflow: visible;
}

.welcome-img {
    position: absolute;
    width: 428px;
    height: 428px;
    top: 0;
    left: 0;
    background-color: #E5F2FF;
    background-image: url(./assets/images/8ae56d93-762f-4d80-b371-93f596f8c5a9.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-img:hover {
    transform: scale(1.05);
}

.welcome-img-2 {
    position: absolute;
    width: 428px;
    height: 428px;
    top: 0;
    left: 527px;
    background-color: #E5EBFF;
    background-image: url(./assets/images/8c1765c9-9f25-4442-bf6b-fbad7dc36c5d.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 1;
    border-radius: 50%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-img-2:hover {
    transform: scale(1.05);
}

.welcome-text-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 355px;
    height: 116px;
    top: 156px;
    left: 36px;
    color: #000000;
    font-family: Lato, var(--default-font-family);
    font-size: 48px;
    font-weight: 900;
    line-height: 57.6px;
    text-align: center;
    text-overflow: initial;
    z-index: 2;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.3s ease;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.welcome-img:hover ~ .welcome-text-2,
.welcome-text-2:hover {
    color: #4a90e2;
}

.welcome-text-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 291px;
    height: 116px;
    top: 156px;
    left: 595px;
    color: #000000;
    font-family: Lato, var(--default-font-family);
    font-size: 48px;
    font-weight: 900;
    line-height: 57.6px;
    text-align: center;
    text-overflow: initial;
    z-index: 4;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.3s ease;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.welcome-img-2:hover ~ .welcome-text-3,
.welcome-text-3:hover {
    color: #4a90e2;
}

/* Responsive styles for welcome overlay */
@media (max-width: 1400px) {
    .welcome-main-container {
        width: 90%;
        max-width: 1280px;
        height: auto;
        min-height: 600px;
        padding: 20px;
    }
    
    .welcome-text {
        width: 90%;
        margin: 80px auto 30px;
        font-size: 48px;
        line-height: 1.2;
    }
    
    .welcome-box {
        width: 90%;
        margin: 30px auto 0;
        height: auto;
        min-height: 400px;
        position: relative;
    }
    
    .welcome-img,
    .welcome-img-2 {
        width: 45%;
        height: 0;
        padding-bottom: 45%;
    }
    
    .welcome-img-2 {
        left: 55%;
    }
    
    .welcome-text-2,
    .welcome-text-3 {
        font-size: 36px;
        line-height: 1.2;
    }
    
    .welcome-text-2 {
        width: 40%;
        left: 5%;
    }
    
    .welcome-text-3 {
        width: 40%;
        left: 55%;
    }
}

@media (max-width: 768px) {
    .welcome-overlay {
        padding: 15px;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .welcome-main-container {
        width: calc(100% - 30px);
        max-width: 500px;
        height: auto;
        min-height: auto;
        padding: 40px 25px;
        margin: auto;
        overflow: visible;
        -webkit-overflow-scrolling: touch;
        border-radius: 20px;
    }
    
    .welcome-text {
        width: 100%;
        margin: 0 0 40px 0;
        font-size: 28px;
        line-height: 1.3;
        padding: 0;
        white-space: normal;
        text-align: center;
    }
    
    .welcome-box {
        width: 100%;
        margin: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        position: relative;
    }
    
    .welcome-img,
    .welcome-img-2 {
        width: 300px;
        height: 300px;
        padding-bottom: 0;
        position: relative;
        left: 0 !important;
        margin: 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .welcome-img {
        z-index: 1;
    }
    
    .welcome-img-2 {
        z-index: 3;
    }
    
    .welcome-text-2 {
        position: absolute;
        width: 240px;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 26px;
        line-height: 1.2;
        padding: 20px;
        box-sizing: border-box;
        z-index: 2;
        pointer-events: none;
        text-align: center;
        white-space: normal;
        word-wrap: break-word;
    }
    
    .welcome-text-3 {
        position: absolute;
        width: 240px;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 26px;
        line-height: 1.2;
        padding: 20px;
        box-sizing: border-box;
        z-index: 4;
        pointer-events: none;
        text-align: center;
        white-space: normal;
        word-wrap: break-word;
    }
    
    .welcome-img,
    .welcome-img-2 {
        -webkit-tap-highlight-color: rgba(74, 144, 226, 0.3);
        touch-action: manipulation;
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .welcome-img:active,
    .welcome-img-2:active {
        transform: scale(0.95);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
}

@media (max-width: 480px) {
    .welcome-overlay {
        padding: 10px;
        align-items: center;
        justify-content: center;
    }
    
    .welcome-main-container {
        width: calc(100% - 20px);
        max-width: 100%;
        height: auto;
        min-height: auto;
        padding: 30px 20px;
        margin: 0;
        border-radius: 15px;
    }
    
    .welcome-text {
        width: 100%;
        margin: 0 0 30px 0;
        font-size: 22px;
        line-height: 1.2;
        padding: 0;
        white-space: normal;
        text-align: center;
    }
    
    .welcome-box {
        width: 100%;
        margin: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        position: relative;
    }
    
    .welcome-img,
    .welcome-img-2 {
        width: 250px;
        height: 250px;
        min-width: 250px;
        min-height: 250px;
        max-width: 250px;
        max-height: 250px;
        padding-bottom: 0;
        position: relative;
        left: 0 !important;
        margin: 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .welcome-img {
        z-index: 1;
    }
    
    .welcome-img-2 {
        z-index: 3;
    }
    
    /* Text centered inside ellipses */
    .welcome-text-2 {
        position: absolute;
        width: 200px;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 22px;
        line-height: 1.2;
        padding: 15px;
        box-sizing: border-box;
        white-space: normal;
        word-wrap: break-word;
        z-index: 2;
        pointer-events: none;
        text-align: center;
    }
    
    .welcome-text-3 {
        position: absolute;
        width: 200px;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 22px;
        line-height: 1.2;
        padding: 15px;
        box-sizing: border-box;
        white-space: normal;
        word-wrap: break-word;
        z-index: 4;
        pointer-events: none;
        text-align: center;
    }
    
    /* Make ellipses fully clickable */
    .welcome-img,
    .welcome-img-2 {
        pointer-events: auto;
        cursor: pointer;
    }
}

/* iPhone 8 specific optimization */
@media screen and (max-width: 375px) and (max-height: 667px) {
    .welcome-overlay {
        padding: 8px;
        align-items: center;
        justify-content: center;
    }
    
    .welcome-main-container {
        width: calc(100% - 16px);
        max-width: 359px;
        padding: 20px 12px;
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        margin: 0;
    }
    
    .welcome-text {
        font-size: 21px;
        margin: 0 0 22px 0;
        line-height: 1.2;
        width: 100%;
        height: auto;
        white-space: normal;
        padding: 0 5px;
    }
    
    .welcome-box {
        gap: 18px;
        width: 100%;
    }
    
    .welcome-img,
    .welcome-img-2 {
        width: 210px;
        height: 210px;
        min-width: 210px;
        min-height: 210px;
        max-width: 210px;
        max-height: 210px;
    }
    
    /* First ellipse is 210px, so text should be at 105px (50% of 210px) */
    .welcome-text-2 {
        position: absolute;
        width: 170px;
        height: auto;
        top: 105px;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 17px;
        line-height: 1.2;
        padding: 7px 4px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        pointer-events: none;
        z-index: 2;
        box-sizing: border-box;
    }
    
    /* Second ellipse is at 210px + 18px gap = 228px, so text should be at 228px + 105px = 333px */
    .welcome-text-3 {
        position: absolute;
        width: 170px;
        height: auto;
        top: 333px;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 17px;
        line-height: 1.2;
        padding: 7px 4px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        pointer-events: none;
        z-index: 4;
        box-sizing: border-box;
    }
    
    /* Make ellipses fully clickable on mobile */
    .welcome-img,
    .welcome-img-2 {
        pointer-events: auto;
    }
}

.main-container {
    overflow: hidden;
}

.main-container,
.main-container * {
    box-sizing: border-box;
}

input,
select,
textarea,
button {
    outline: 0;
}

.main-container {
    position: relative;
    width: 1280px;
    height: 6735px;
    margin: 0 auto;
    font-size: 0px;
    background: #fffbfd;
    overflow: hidden;
}
.text {
    display: block;
    position: relative;
    height: 23px;
    margin: 58px 0 0 61px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23px;
    text-align: left;
    white-space: nowrap;
    z-index: 3;
}
.group {
    position: relative;
    width: 1280px;
    height: 846px;
    margin: 3px 0 0 0;
    z-index: 17;
}
/* Top-left Dropdown Menu (Hero) */
.menu-dropdown {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10000;
}

.menu-trigger {
    width: 82px;
    height: 82px;
    border: none;
    border-radius: 50%;
    background: #863158;
    color: #fffbfd;
    font-family: Karla, var(--default-font-family);
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}

.menu-trigger-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.menu-trigger-lines span {
    display: block;
    width: 36px;
    height: 4px;
    background: #fffbfd;
    border-radius: 4px;
}

.menu-trigger-text {
    display: block;
    margin-top: 6px;
    color: #fffbfd;
    font-size: 12px;
    line-height: 14px;
}

/* Hide old decorative circle and label near the menu */
.img,
.text-3 {
    display: none;
}

.menu-panel {
    display: none;
    position: absolute;
    top: 90px;
    right: 0;
    width: 251px;
    background: transparent;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-panel.open {
    display: block;
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}

.menu-panel-inner {
    position: relative;
    width: 251px;
    background: #863158;
    border-radius: 25px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
    overflow: hidden;
    z-index: 1001;
}

.menu-topbar {
    height: 49px;
    background: #5e243a;
}

.menu-items {
    padding: 12px 20px 20px 20px;
}

.menu-item {
    display: block;
    color: #fffbfd;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    text-decoration: none;
    margin: 6px 0;
    min-height: 44px;
    padding: 6px 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.menu-item.accent {
    color: #ffe887;
}

.menu-item.underline {
    text-decoration: underline;
}
.img {
    position: absolute;
    width: 82px;
    height: 82px;
    top: 0;
    left: 1138px;
    background: url(./assets/images/21b8cc8e-ef3a-494e-b97d-3422bdffbe5f.svg)
        no-repeat center;
    background-size: cover;
    z-index: 4;
    border-radius: 50%;
}
.text-2 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    width: 857px;
    height: 345px;
    top: 4px;
    left: 61px;
    color: #000000;
    font-family: Lato, var(--default-font-family);
    font-size: 96px;
    font-weight: 900;
    line-height: 115.2px;
    text-align: left;
    z-index: 1;
}
.pic {
    position: absolute;
    width: 59px;
    height: 35px;
    top: 17px;
    left: 1149px;
    font-family: SF Pro, var(--default-font-family);
    font-size: 48px;
    font-weight: 400;
    line-height: 35px;
    background: url(./assets/images/07422b59-5144-4842-8be4-096ef916b67b.png)
        no-repeat center;
    background-size: cover;
    z-index: 6;
}
.text-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 32px;
    height: 14px;
    top: 52px;
    left: 1163px;
    color: #fffbfd;
    font-family: Karla, var(--default-font-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    text-align: center;
    white-space: nowrap;
    z-index: 7;
}
.img-2 {
    position: absolute;
    width: 487px;
    height: 487px;
    top: 253px;
    left: 733px;
    background: url(./assets/images/9164d4f23e6b7c62ebc0a4946db2c9bfea9fbbc7.png)
        no-repeat center;
    background-size: cover;
    z-index: 11;
}
.text-4 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    width: 712px;
    height: 141px;
    top: 381px;
    left: 61px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 400;
    line-height: 37.408px;
    text-align: left;
    z-index: 2;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    position: absolute;
    width: 243px;
    height: 63px;
    top: 561px;
    left: 62px;
    padding: 10px 10px 10px 10px;
    background: #86d3e1;
    z-index: 9;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-5 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 168px;
    height: 28px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
    white-space: nowrap;
    z-index: 10;
}
.img-3 {
    position: absolute;
    width: 40px;
    height: 3px;
    top: 589px;
    left: 0;
    background: url(./assets/images/7ebcb9ec-204e-4cc7-9668-d7a0393ca1e1.svg)
        no-repeat center;
    background-size: cover;
    z-index: 13;
}
.img-4 {
    position: absolute;
    width: 386px;
    height: 3px;
    top: 589px;
    left: 325px;
    background: url(./assets/images/dd420131-252f-4a13-8fc4-5be0024fab86.svg)
        no-repeat center;
    background-size: cover;
    z-index: 12;
}
.img-5 {
    position: absolute;
    width: 81px;
    height: 3px;
    top: 589px;
    left: 1199px;
    background: url(./assets/images/8b2f1e9d-cf1a-4b10-9c57-d951abd2f26d.svg)
        no-repeat center;
    background-size: cover;
    z-index: 14;
}
.text-6 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    width: 610px;
    height: 174px;
    top: 672px;
    left: 81px;
    color: #000000;
    font-family: Lato, var(--default-font-family);
    font-size: 48px;
    font-weight: 900;
    line-height: 57.6px;
    text-align: left;
    text-overflow: initial;
    z-index: 16;
    overflow: hidden;
}
.text-7 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    width: 503px;
    height: 61px;
    top: 772px;
    left: 731px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
    z-index: 17;
}
.section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 1158px;
    height: 420.1px;
    margin: 38px 0 0 61px;
    z-index: 47;
}
.wrapper-2 {
    flex-shrink: 0;
    position: relative;
    width: 274.832px;
    height: 420.1px;
    font-size: 0px;
    background: #e4f2ff;
    z-index: 20;
    border-radius: 25px;
}
.text-8 {
    display: block;
    position: relative;
    height: 23px;
    margin: 20px 0 0 35px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 16px;
    font-weight: 300;
    line-height: 18.704px;
    text-align: left;
    white-space: nowrap;
    z-index: 21;
}
.pic-2 {
    position: relative;
    width: 208px;
    height: 157px;
    margin: 12px 0 0 35px;
    background: url(./assets/images/6a60c968-05c9-46a9-92a7-ecc4f9778f55.png)
        no-repeat center;
    background-size: cover;
    z-index: 27;
    border-radius: 20px;
}
.text-9 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    width: 197.037px;
    height: 46.009px;
    margin: 11.042px 0 0 35.007px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 28.056px;
    text-align: left;
    z-index: 22;
}
.text-a {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    width: 197.037px;
    height: 69.013px;
    margin: 14.003px 0 0 35.007px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23.38px;
    text-align: left;
    z-index: 23;
}
.box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    position: relative;
    width: 154px;
    height: 36px;
    margin: 7.933px 0 0 35px;
    padding: 10px 10px 10px 10px;
    background: #fffbfd;
    z-index: 25;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.text-b {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 134px;
    height: 23px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    text-align: center;
    white-space: nowrap;
    z-index: 26;
}
.box-2 {
    flex-shrink: 0;
    position: relative;
    width: 274.832px;
    height: 420.1px;
    font-size: 0px;
    background: #e5ebff;
    z-index: 30;
    border-radius: 25px;
}
.text-c {
    display: block;
    position: relative;
    height: 23px;
    margin: 20px 0 0 34.944px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 16px;
    font-weight: 300;
    line-height: 18.704px;
    text-align: left;
    white-space: nowrap;
    z-index: 31;
}
.img-6 {
    position: relative;
    width: 208px;
    height: 157px;
    margin: 12px 0 0 34.944px;
    background: url(./assets/images/21d2d3c6-307a-471d-a2c2-53e64231ba7a.png)
        no-repeat center;
    background-size: cover;
    z-index: 36;
    border-radius: 20px;
}
.text-d {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    width: 197.037px;
    height: 46.009px;
    margin: 11.042px 0 0 35.007px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 28.056px;
    text-align: left;
    z-index: 32;
}
.text-e {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    width: 210px;
    height: 69px;
    margin: 13.949px 0 0 34.944px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23.38px;
    text-align: left;
    z-index: 33;
}
.box-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    position: relative;
    width: 154px;
    height: 36px;
    margin: 8px 0 0 34.944px;
    padding: 10px 10px 10px 10px;
    background: #fffbfd;
    z-index: 34;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.text-f {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 134px;
    height: 23px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    text-align: center;
    white-space: nowrap;
    z-index: 35;
}
.group-2 {
    flex-shrink: 0;
    position: relative;
    width: 274.832px;
    height: 420.1px;
    font-size: 0px;
    background: #efe5ff;
    z-index: 39;
    border-radius: 25px;
}
.text-10 {
    display: block;
    position: relative;
    height: 23px;
    margin: 20px 0 0 34.888px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 16px;
    font-weight: 300;
    line-height: 18.704px;
    text-align: left;
    white-space: nowrap;
    z-index: 40;
}
.pic-3 {
    position: relative;
    width: 208px;
    height: 157px;
    margin: 12px 0 0 34.888px;
    background: url(./assets/images/d9cdae86-a523-46cf-aced-d1a896805593.png)
        no-repeat center;
    background-size: cover;
    z-index: 55;
    border-radius: 20px;
}
.text-11 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    width: 197.037px;
    height: 46.009px;
    margin: 11.042px 0 0 35.007px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 28.056px;
    text-align: left;
    z-index: 41;
}
.text-12 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    width: 197.037px;
    height: 69.013px;
    margin: 14.003px 0 0 35.007px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23.38px;
    text-align: left;
    z-index: 42;
}
.section-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    position: relative;
    width: 166px;
    height: 38px;
    margin: 9.933px 0 0 34.888px;
    padding: 10px 16px 10px 16px;
    background: #fffbfd;
    z-index: 43;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.text-13 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 134px;
    height: 23px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    text-align: center;
    white-space: nowrap;
    z-index: 44;
}
.box-4 {
    flex-shrink: 0;
    position: relative;
    width: 274.832px;
    height: 420.1px;
    font-size: 0px;
    background: #ffe5f5;
    z-index: 47;
    border-radius: 25px;
}
.text-14 {
    display: block;
    position: relative;
    height: 23px;
    margin: 20px 0 0 34.832px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 16px;
    font-weight: 300;
    line-height: 18.704px;
    text-align: left;
    white-space: nowrap;
    z-index: 48;
}
.pic-4 {
    position: relative;
    width: 209px;
    height: 157px;
    margin: 12px 0 0 34.832px;
    background: url(./assets/images/cc038217-ecfb-4b22-8152-69689aa7ca53.png)
        no-repeat center;
    background-size: cover;
    z-index: 54;
    border-radius: 20px;
}
.text-15 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    width: 197.037px;
    height: 46.009px;
    margin: 11.042px 0 0 35.007px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 28.056px;
    text-align: left;
    z-index: 49;
}
.text-16 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    width: 197.037px;
    height: 69.013px;
    margin: 14.003px 0 0 35.007px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23.38px;
    text-align: left;
    z-index: 50;
}
.section-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    position: relative;
    width: 166px;
    height: 38px;
    margin: 9.933px 0 0 34.832px;
    padding: 10px 16px 10px 16px;
    background: #fffbfd;
    z-index: 52;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover: turn card buttons yellow with subtle lift */
.wrapper-2 .box:hover,
.box-2 .box-3:hover,
.group-2 .section-2:hover,
.box-4 .section-3:hover {
    background: #fed605;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
.text-17 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 134px;
    height: 23px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    text-align: center;
    white-space: nowrap;
    z-index: 53;
}
.text-18 {
    display: block;
    position: relative;
    height: 58px;
    margin: 95.9px 0 0 61px;
    color: #000000;
    font-family: Lato, var(--default-font-family);
    font-size: 48px;
    font-weight: 900;
    line-height: 57.6px;
    text-align: left;
    white-space: nowrap;
    z-index: 58;
}
.box-5 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 1156px;
    height: 61px;
    margin: 30px 0 0 61px;
    z-index: 60;
}
.text-19 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    width: 569px;
    height: 61px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
    z-index: 59;
}
.text-1a {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    width: 569px;
    height: 61px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
    z-index: 60;
}
.section-4 {
    position: relative;
    width: 1171px;
    height: 330px;
    margin: 67px 0 0 46px;
    z-index: 70;
}
/* Use borders for clear dividers and hide old line images */
.section-4 .method-item {
    border-top: 2px solid #000000;
}
.section-4 .method-item:first-of-type {
    border-top: none;
}
.section-4 .img-7,
.section-4 .img-8,
.section-4 .img-9,
.section-4 .pic-6,
.section-4 .img-a {
    display: none;
}
.text-1b {
    /* Styles now in .method-title */
    display: none;
}
.img-7 {
    position: absolute;
    width: 569px;
    height: 2px; /* clearer black divider */
    top: -1px;
    left: 0;
    background: #000000;
    z-index: 66;
}
.pic-5 {
    position: absolute;
    width: 569px;
    height: 330px;
    top: 0;
    left: 602px;
    background: url(./assets/images/dace3cac-42f1-465e-a518-f2bae9d6e33d.png)
        no-repeat center;
    background-size: cover;
    z-index: 57;
}
.img-8 {
    position: absolute;
    width: 569px;
    height: 2px; /* clearer black divider */
    top: 75px;
    left: 0;
    background: #000000;
    z-index: 67;
}
.text-1d {
    /* Styles now in .method-title */
    display: none;
}
.img-9 {
    position: absolute;
    width: 569px;
    height: 2px; /* clearer black divider */
    top: 150px;
    left: 0;
    background: #000000;
    z-index: 68;
}
.text-1e {
    /* Styles now in .method-title */
    display: none;
}
.pic-6 {
    position: absolute;
    width: 569px;
    height: 2px; /* clearer black divider */
    top: 239px;
    left: 0;
    background: #000000;
    z-index: 70;
}
.img-a {
    position: absolute;
    width: 569px;
    height: 2px; /* clearer black divider */
    top: 329px;
    left: 0;
    background: #000000;
    z-index: 69;
}
.text-1f {
    display: block;
    position: relative;
    height: 58px;
    margin: 96px 0 0 61px;
    color: #000000;
    font-family: Lato, var(--default-font-family);
    font-size: 48px;
    font-weight: 900;
    line-height: 57.6px;
    text-align: left;
    white-space: nowrap;
    z-index: 72;
}
.text-20 {
    display: block;
    position: relative;
    height: 28px;
    margin: 12px 0 0 61px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 300;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 73;
}
.box-6 {
    position: relative;
    width: 1158px;
    height: 406.333px;
    margin: 40px 0 0 61px;
    z-index: 97;
}
.group-3 {
    position: absolute;
    width: 32.21%;
    height: 91.8%;
    top: 0;
    left: 0;
    background: #ffe5e5;
    z-index: 75;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.img-b {
    position: relative;
    width: 153px;
    height: 153px;
    margin: 22px 0 0 20px;
    background: url(./assets/images/5b9297b72ffa5a8cfe13fc70b4c8cfa311ce8605.png)
        no-repeat center;
    background-size: cover;
    z-index: 82;
    border-radius: 20px;
}
.text-21 {
    display: block;
    position: relative;
    height: 28px;
    margin: 24px 0 0 20px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 77;
}
.text-22 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    width: 305px;
    height: 69px;
    margin: 5.667px 0 0 20px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23.38px;
    text-align: left;
    z-index: 78;
}
.wrapper-3 {
    position: absolute;
    width: 32.21%;
    height: 91.8%;
    top: 0;
    left: 33.94%;
    background: #fff2e5;
    z-index: 84;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.pic-7 {
    position: relative;
    width: 153px;
    height: 153px;
    margin: 22px 0 0 20px;
    background: url(./assets/images/a771f12f13a802fa2b733ac10394b1b106a078e2.png)
        no-repeat center;
    background-size: cover;
    z-index: 91;
    border-radius: 20px;
}
.text-23 {
    display: block;
    position: relative;
    height: 28px;
    margin: 24px 0 0 20px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 86;
}
.text-24 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    width: 305px;
    height: 69px;
    margin: 5.667px 0 0 20px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23.38px;
    text-align: left;
    z-index: 87;
}
.section-5 {
    position: absolute;
    width: 32.21%;
    height: 91.8%;
    top: 0;
    left: 67.79%;
    background: #e5ebff;
    z-index: 93;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.pic-8 {
    position: relative;
    width: 153px;
    height: 153px;
    margin: 22px 0 0 20px;
    background: url(./assets/images/63a1720592f93e8b9d4f86550d6dfe602a59a48a.png)
        no-repeat center;
    background-size: cover;
    z-index: 100;
    border-radius: 20px;
}
.text-25 {
    display: block;
    position: relative;
    height: 28px;
    margin: 24px 0 0 20px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 95;
}
.text-26 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    width: 305px;
    height: 69px;
    margin: 5.667px 0 0 20px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23.38px;
    text-align: left;
    z-index: 96;
}
.section-6 {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    position: absolute;
    width: 164px;
    height: 140px;
    top: 266.333px;
    left: 20px;
    padding: 52px 0 52px 0;
    z-index: 79;
}
.section-7 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 10px;
    position: relative;
    width: 164px;
    height: 36px;
    padding: 10px 10px 10px 10px;
    background: #fffbfd;
    z-index: 80;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.text-27 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 130px;
    height: 23px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    text-align: center;
    white-space: nowrap;
    z-index: 81;
}
.wrapper-4 {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    position: absolute;
    width: 164px;
    height: auto;
    bottom: 20px;
    left: 20px;
    padding: 0;
    z-index: 88;
}
.wrapper-5 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 10px;
    position: relative;
    width: 164px;
    height: 36px;
    padding: 10px 10px 10px 10px;
    background: #fffbfd;
    z-index: 89;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.text-28 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 90px;
    height: 23px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    text-align: center;
    white-space: nowrap;
    z-index: 90;
}
.box-7 {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    position: absolute;
    width: 164px;
    height: auto;
    bottom: 20px;
    left: 20px;
    padding: 0;
    z-index: 97;
}
.section-8 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 10px;
    position: relative;
    width: 164px;
    height: 36px;
    padding: 10px 10px 10px 10px;
    background: #fffbfd;
    z-index: 98;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.text-29 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 130px;
    height: 23px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    text-align: center;
    white-space: nowrap;
    z-index: 99;
}
.wrapper-6 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 1629px;
    height: 58px;
    margin: 62.667px 0 0 67px;
    z-index: 112;
}
.text-2a {
    flex-shrink: 0;
    position: relative;
    height: 58px;
    color: #000000;
    font-family: Lato, var(--default-font-family);
    font-size: 48px;
    font-weight: 900;
    line-height: 57.6px;
    text-align: left;
    white-space: nowrap;
    z-index: 103;
}
.text-2b {
    flex-shrink: 0;
    position: relative;
    height: 58px;
    color: #000000;
    font-family: Lato, var(--default-font-family);
    font-size: 48px;
    font-weight: 900;
    line-height: 57.6px;
    text-align: left;
    white-space: nowrap;
    z-index: 112;
}
.group-4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 1356.391px;
    height: 216.221px;
    margin: 30px 0 0 67px;
    z-index: 118;
}
.img-c {
    flex-shrink: 0;
    position: relative;
    width: 596.391px;
    height: 216.221px;
    background: url(./assets/images/646136d9-0f04-4b67-9a72-ffc72f3c096e.png)
        no-repeat center;
    background-size: cover;
    z-index: 109;
    border-radius: 20px;
}
.pic-9 {
    flex-shrink: 0;
    position: relative;
    width: 596.391px;
    height: 216.221px;
    background: url(./assets/images/ea4b06a1-4941-4fbc-8e1c-681615944957.png)
        no-repeat center;
    background-size: cover;
    z-index: 118;
    border-radius: 20px;
}
.box-8 {
    position: relative;
    width: 1353px;
    height: 211px;
    margin: 42.779px 0 0 71px;
    z-index: 113;
}
.wrapper-7 {
    position: absolute;
    width: 593px;
    height: 211px;
    top: 0;
    left: 0;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
    z-index: 104;
}
.text-2c {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 28.8px;
    text-align: left;
}
.text-2d {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 700;
    line-height: 23.38px;
    text-align: left;
}
.text-2e {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
}
.section-9 {
    position: absolute;
    width: 593px;
    height: 188px;
    top: 0;
    left: 760px;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
    z-index: 113;
}
.text-2f {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 28.8px;
    text-align: left;
}
.text-30 {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 700;
    line-height: 23.38px;
    text-align: left;
}
.text-31 {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
}
.section-a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 923.031px;
    height: 38.007px;
    margin: 16px 0 0 71px;
    z-index: 116;
}
.wrapper-8 {
    flex-shrink: 0;
    position: relative;
    width: 163.031px;
    height: 38.007px;
    background: #fed605;
    z-index: 107;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.text-32 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    width: 141.027px;
    height: 23.004px;
    top: 8.002px;
    left: 11.002px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 500;
    line-height: 23.004px;
    text-align: center;
    white-space: nowrap;
    z-index: 108;
}
.box-9 {
    flex-shrink: 0;
    position: relative;
    width: 163.031px;
    height: 38.007px;
    background: #fed605;
    z-index: 116;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.text-33 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    width: 141.027px;
    height: 23.004px;
    top: 8.002px;
    left: 11.002px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 500;
    line-height: 23.004px;
    text-align: center;
    white-space: nowrap;
    z-index: 117;
}
.wrapper-9 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 1139px;
    height: 23px;
    margin: 19.993px 0 0 75px;
    z-index: 114;
}
.text-34 {
    flex-shrink: 0;
    position: relative;
    height: 23px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23px;
    text-align: left;
    white-space: nowrap;
    z-index: 105;
}
.text-35 {
    flex-shrink: 0;
    position: relative;
    height: 23px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23px;
    text-align: left;
    white-space: nowrap;
    z-index: 114;
}
.section-b {
    position: relative;
    width: 1158px;
    height: 824px;
    margin: 100px 0 0 61px;
    font-size: 0px;
    background: #e5f2ff;
    z-index: 121;
    overflow: visible auto;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-36 {
    display: block;
    position: relative;
    height: 58px;
    margin: 20px 0 0 20px;
    color: #000000;
    font-family: Lato, var(--default-font-family);
    font-size: 48px;
    font-weight: 900;
    line-height: 57.6px;
    text-align: left;
    white-space: nowrap;
    z-index: 126;
}
.section-c {
    position: relative;
    width: 1099px;
    height: 662.007px;
    margin: 24px 0 0 21px;
    z-index: 128;
}
.img-d {
    position: absolute;
    width: 662px;
    height: 662px;
    top: 0;
    left: 0;
    background: url(./assets/images/d4992b20c66a130accc1b2e6bfc622e0b17ecb25.png)
        no-repeat center;
    background-size: cover;
    z-index: 125;
    border-radius: 20px;
}
.box-a {
    position: absolute;
    width: 383px;
    height: 592px;
    top: 0;
    left: 716px;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 300;
    line-height: 37.408px;
    text-align: left;
    z-index: 127;
}
.text-37 {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 700;
    line-height: 37.408px;
    text-align: left;
}
.text-38 {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 300;
    line-height: 37.408px;
    text-align: left;
}
.img-e {
    position: absolute;
    width: 383px;
    height: 0;
    top: 45px;
    left: 716px;
    border-top: 2px dotted #fed605;
    background: none;
    z-index: 128;
}
.wrapper-a {
    position: absolute;
    width: 163.031px;
    height: 38.007px;
    top: 624px;
    left: 716px;
    background: #fed605;
    z-index: 123;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.text-39 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    width: 141.027px;
    height: 23.004px;
    top: 8.001px;
    left: 11.002px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 500;
    line-height: 23.004px;
    text-align: center;
    white-space: nowrap;
    z-index: 124;
}

/* CTA anchors: remove underlines and make full clickable area */
.section-7 a,
.wrapper-5 a,
.section-8 a,
.wrapper-8 a,
.box-9 a,
.wrapper-a a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* CTA hover effects */
.section-7:hover,
.wrapper-5:hover,
.section-8:hover,
.wrapper-8:hover,
.box-9:hover,
.wrapper-a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

/* Turn yellow on hover for the three CTAs in the Free Leadership Tools section */
.section-7:hover,
.wrapper-5:hover,
.section-8:hover {
    background: #fed605;
}
.wrapper-b {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 1158px;
    height: 66px;
    margin: 48px 0 0 61px;
    z-index: 131;
}
/* Floating effect for FAQ question rows */
[data-faq-id] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
[data-faq-id]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.3);
}
/* FAQ answer blocks */
.faq-answer {
    position: relative;
    width: 1158px;
    margin: 10px 0 0 61px;
    padding: 16px;
    background: #fffbfd;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    display: none;
}
.faq-answer.open { 
    display: block; 
    animation: faqFloatIn 0.35s ease;
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}
.faq-answer p {
    margin: 0;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
}

@keyframes faqFloatIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.section-d {
    flex-shrink: 0;
    position: relative;
    width: 569px;
    height: 66px;
    background: #e5e5e5;
    z-index: 130;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-3a {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 28px;
    top: 20px;
    left: 21px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 132;
}
.text-3b {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 28px;
    top: 20px;
    left: 533px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 193;
}
.box-b {
    flex-shrink: 0;
    position: relative;
    width: 569px;
    height: 66px;
    background: #e5e5e5;
    z-index: 131;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-3c {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 28px;
    top: 20px;
    left: 14px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 133;
}
.text-3d {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 28px;
    top: 20px;
    left: 536px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 198;
}
.box-c {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 1158px;
    height: 66px;
    margin: 20px 0 0 61px;
    z-index: 135;
}
.group-5 {
    flex-shrink: 0;
    position: relative;
    width: 569px;
    height: 66px;
    background: #e5e5e5;
    z-index: 134;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-3e {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 28px;
    top: 20px;
    left: 20px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 136;
}
.text-3f {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 28px;
    top: 20px;
    left: 533px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 194;
}
.section-e {
    flex-shrink: 0;
    position: relative;
    width: 569px;
    height: 66px;
    background: #e5e5e5;
    z-index: 135;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-40 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 28px;
    top: 20px;
    left: 14px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 141;
}
.text-41 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 28px;
    top: 20px;
    left: 536px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 197;
}
.group-6 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 1158px;
    height: 66px;
    margin: 20px 0 0 61px;
    z-index: 138;
}
.section-f {
    flex-shrink: 0;
    position: relative;
    width: 569px;
    height: 66px;
    background: #e5e5e5;
    z-index: 137;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-42 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 28px;
    top: 22px;
    left: 20px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 140;
}
.text-43 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 28px;
    top: 22px;
    left: 533px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 195;
}
.section-10 {
    flex-shrink: 0;
    position: relative;
    width: 569px;
    height: 66px;
    background: #e5e5e5;
    z-index: 138;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-44 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 28px;
    top: 22px;
    left: 14px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 139;
}
.text-45 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 28px;
    top: 22px;
    left: 536px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
    z-index: 196;
}
.section-11 {
    position: relative;
    width: 1158px;
    height: 629px;
    margin: 48px 0 0 61px;
    font-size: 0px;
    background: #fff1e5;
    z-index: 165;
    overflow: visible auto;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-46 {
    display: block;
    position: relative;
    height: 82px;
    margin: 20px 0 0 20px;
    color: #000000;
    font-family: Lato, var(--default-font-family);
    font-size: 48px;
    font-weight: 900;
    line-height: 57.6px;
    text-align: left;
    white-space: nowrap;
    z-index: 167;
}
.group-7 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 1099px;
    height: 487px;
    margin: 0 0 0 21px;
    z-index: 168;
}
.img-f {
    flex-shrink: 0;
    position: relative;
    width: 487px;
    height: 487px;
    background: url(./assets/images/9869927d5bd9675e79dfae93bde51d6a7ed1e334.png)
        no-repeat center;
    background-size: cover;
    z-index: 166;
    border-radius: 20px;
}
.text-47 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    width: 551px;
    height: 483px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
    z-index: 168;
}
.box-d {
    position: relative;
    width: 1158px;
    height: 629px;
    margin: 48px 0 0 61px;
    background: #d9f0f5;
    z-index: 172;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.group-8 {
    position: absolute;
    width: 1100px;
    height: 569.007px;
    top: 20px;
    left: 20px;
    font-size: 0px;
    z-index: 182;
}
.text-48 {
    display: block;
    position: relative;
    height: 82px;
    margin: 0 0 0 0;
    color: #000000;
    font-family: Lato, var(--default-font-family);
    font-size: 48px;
    font-weight: 900;
    line-height: 57.6px;
    text-align: left;
    white-space: nowrap;
    z-index: 174;
}
.img-10 {
    position: absolute;
    width: 487px;
    height: 487px;
    top: 82px;
    left: 613px;
    background: url(./assets/images/49b0415962ea9d97095e4b7c86f92529ef0d60cd.png)
        no-repeat center;
    background-size: cover;
    z-index: 173;
    border-radius: 20px;
}
.section-12 {
    position: absolute;
    width: 512px;
    height: 37px;
    top: 360px;
    left: 0;
    background: #fffbfd;
    border: 0.5px solid #000000;
    z-index: 182;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.box-e {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 9px;
    padding-right: 28px;
    z-index: 183;
}
.text-49 {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 200;
    line-height: 23.38px;
    text-align: center;
}
.text-4a {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff0000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 200;
    line-height: 23.38px;
    text-align: center;
}
.box-f {
    position: absolute;
    width: 512px;
    height: 37px;
    top: 417px;
    left: 0;
    background: #fffbfd;
    border: 0.5px solid #000000;
    z-index: 180;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wrapper-c {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 9px;
    padding-right: 28px;
    z-index: 184;
}
.text-4b {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 200;
    line-height: 23.38px;
    text-align: center;
}
.text-4c {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff0000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 200;
    line-height: 23.38px;
    text-align: center;
}

/* Restore original look for CTA inputs inside the grey boxes */
.section-12 .form-input,
.box-f .form-input,
.box-10 .form-input {
    border: none;
    background: transparent;
    box-shadow: none;
    height: 37px;
    padding: 7px 9px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 200;
    width: 100%;
    outline: none;
}

.section-12 .form-input::placeholder,
.box-f .form-input::placeholder,
.box-10 .form-input::placeholder {
    color: #000000;
    opacity: 0.6;
}

/* Make the CTA button act like original label */
.box-11 button.text-4e {
    background: transparent;
    border: none;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.box-10 {
    position: absolute;
    width: 512px;
    height: 37px;
    top: 474px;
    left: 0;
    background: #fffbfd;
    border: 0.5px solid #000000;
    z-index: 181;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Better before/after input UX */
.section-12:focus-within,
.box-f:focus-within,
.box-10:focus-within {
    border-color: #5fa3b0;
    box-shadow: 0 0 0 3px rgba(95, 163, 176, 0.2);
}

.has-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.has-success {
    border-color: #5fa3b0 !important;
}
.text-4d {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 23px;
    top: 6.5px;
    left: 8.5px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 200;
    line-height: 23px;
    text-align: left;
    white-space: nowrap;
    z-index: 185;
}
.box-11 {
    position: absolute;
    width: 163.031px;
    height: 38.007px;
    top: 531px;
    left: 0;
    background: #fed605;
    z-index: 178;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-4e {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    width: 141.027px;
    height: 23.004px;
    top: 8.001px;
    left: 11.002px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 500;
    line-height: 23.004px;
    text-align: center;
    white-space: nowrap;
    z-index: 179;
}
.wrapper-d {
    position: absolute;
    width: 551px;
    height: 230px;
    top: 113px;
    left: 20px;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
    z-index: 175;
}
.text-4f {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
}
.text-50 {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 700;
    line-height: 23.38px;
    text-align: left;
}
.text-51 {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
}
.wrapper-e {
    position: relative;
    width: 1158px;
    height: 66px;
    margin: 48px 0 0 61px;
    background: #e5e5e5;
    z-index: 157;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-52 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 37px;
    top: 14px;
    left: 40.703px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 400;
    line-height: 37px;
    text-align: left;
    white-space: nowrap;
    z-index: 145;
}
.text-53 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 37px;
    top: 14px;
    left: 1120px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 500;
    line-height: 37px;
    text-align: left;
    white-space: nowrap;
    z-index: 157;
}
.section-13 {
    position: relative;
    width: 1158px;
    height: 66px;
    margin: 20px 0 0 61px;
    background: #e5e5e5;
    z-index: 158;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-54 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 37px;
    top: 14px;
    left: 40.703px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 400;
    line-height: 37px;
    text-align: left;
    white-space: nowrap;
    z-index: 147;
}
.text-55 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 37px;
    top: 14px;
    left: 1120px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 500;
    line-height: 37px;
    text-align: left;
    white-space: nowrap;
    z-index: 158;
}
.group-9 {
    position: relative;
    width: 1158px;
    height: 66px;
    margin: 20px 0 0 61px;
    background: #e5e5e5;
    z-index: 159;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-56 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 37px;
    top: 14px;
    left: 40.703px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 400;
    line-height: 37px;
    text-align: left;
    white-space: nowrap;
    z-index: 149;
}
.text-57 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 37px;
    top: 14px;
    left: 1120px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 500;
    line-height: 37px;
    text-align: left;
    white-space: nowrap;
    z-index: 159;
}
.wrapper-f {
    position: relative;
    width: 1158px;
    height: 66px;
    margin: 20px 0 0 61px;
    background: #e5e5e5;
    z-index: 160;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-58 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 37px;
    top: 14px;
    left: 40.703px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 400;
    line-height: 37px;
    text-align: left;
    white-space: nowrap;
    z-index: 152;
}
.text-59 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 37px;
    top: 14px;
    left: 1120px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 500;
    line-height: 37px;
    text-align: left;
    white-space: nowrap;
    z-index: 160;
}
.wrapper-10 {
    position: relative;
    width: 1158px;
    height: 66px;
    margin: 20px 0 0 61px;
    background: #e5e5e5;
    z-index: 161;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-5a {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 37px;
    top: 14px;
    left: 40.703px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 400;
    line-height: 37px;
    text-align: left;
    white-space: nowrap;
    z-index: 154;
}
.text-5b {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 37px;
    top: 14px;
    left: 1120px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 500;
    line-height: 37px;
    text-align: left;
    white-space: nowrap;
    z-index: 161;
}
.group-a {
    position: relative;
    width: 1158px;
    height: 66px;
    margin: 20px 0 0 61px;
    background: #e5e5e5;
    z-index: 162;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.text-5c {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 37px;
    top: 14px;
    left: 40.703px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 400;
    line-height: 37px;
    text-align: left;
    white-space: nowrap;
    z-index: 156;
}
.text-5d {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 37px;
    top: 14px;
    left: 1120px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 500;
    line-height: 37px;
    text-align: left;
    white-space: nowrap;
    z-index: 162;
}
.wrapper-11 {
    position: relative;
    width: 1280px;
    height: 190px;
    margin: 49px 0 0 0;
    background: #e5e5e5;
    z-index: 187;
}
.group-b {
    position: absolute;
    width: 180px;
    height: 138px;
    top: 30px;
    left: 958px;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
    z-index: 188;
}
.text-5e {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 700;
    line-height: 23.38px;
    text-align: left;
}
.text-5f {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
}
.text-60 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 58px;
    top: 30px;
    left: 162px;
    color: #000000;
    font-family: Rosmatika, var(--default-font-family);
    font-size: 48px;
    font-weight: 400;
    line-height: 57.6px;
    text-align: left;
    white-space: nowrap;
    z-index: 190;
}
.group-c {
    position: absolute;
    width: 93px;
    height: 116px;
    top: 30px;
    left: 781px;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
    z-index: 189;
}
.text-61 {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 700;
    line-height: 23.38px;
    text-align: left;
}
.text-62 {
    position: relative;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 300;
    line-height: 23.38px;
    text-align: left;
}
.pic-a {
    position: absolute;
    width: 83px;
    height: 81px;
    top: 30px;
    left: 69px;
    background: url(./assets/images/8d2f2515-3b04-4a14-9ab0-c2888e7f02c6.png)
        no-repeat center;
    background-size: cover;
    z-index: 192;
}
.text-63 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 37px;
    top: 88px;
    left: 163px;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 32px;
    font-weight: 200;
    line-height: 37px;
    text-align: left;
    white-space: nowrap;
    z-index: 191;
}

/* ============================================ */
/* HOVER BEHAVIOR FOR LEADERSHIP TOOLS CARDS */
/* Only applies to "Transform Culture" section */
/* ============================================ */

.section .tool-card {
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.section .tool-card-content {
    position: relative;
    transition: opacity 0.35s ease-in-out;
    opacity: 1;
}

.section .tool-card-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    pointer-events: none;
}

.section .hover-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

.section .hover-description {
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23.38px;
    text-align: left;
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin: 0;
}

.section .hover-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 154px;
    height: 36px;
    background: #FFE887;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.section .hover-download-btn:hover {
    transform: translateY(-2px);
}

.section .hover-btn-text {
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    text-align: center;
    white-space: nowrap;
}

.section .tool-card:hover .tool-card-content {
    opacity: 0;
}

.section .tool-card:hover .tool-card-hover {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================ */
/* DOWNLOAD MODAL STYLES */
/* ============================================ */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    padding-top: max(20px, env(safe-area-inset-top, 20px));
    padding-right: max(20px, env(safe-area-inset-right, 20px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
    padding-left: max(20px, env(safe-area-inset-left, 20px));
    animation: fadeIn 0.3s ease;
    box-sizing: border-box;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    position: relative;
    max-width: 1200px;
    width: 100%;
    background: transparent;
    animation: slideUp 0.4s ease;
    display: flex;
    justify-content: center;
}

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

.modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: #fffbfd;
    border: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #000000;
    transition: transform 0.2s ease, background 0.2s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.modal-close:hover {
    transform: rotate(90deg);
    background: #f0f0f0;
}

.modal-cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.modal-card {
    width: 100%;
    max-width: 570px;
    min-height: 420.1px;
    height: auto;
    margin: 0 auto;
    padding: 40px 35px;
    border-radius: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.modal-card-blue {
    background: #E5F2FF;
}

.modal-card-purple {
    background: #F0E5FF;
}

.modal-card-title {
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 24px;
    font-weight: 800;
    line-height: 28px;
    margin: 0 0 20px 0;
}

.modal-card-description {
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23.38px;
    margin: 0 0 30px 0;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-field {
    position: relative;
    width: 100%;
}

.form-input {
    width: 100%;
    height: 37px;
    padding: 7px 15px;
    background: #fffbfd;
    border: 0.5px solid #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 200;
    line-height: 23px;
    color: #000000;
    box-sizing: border-box;
}

.form-input::placeholder {
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 200;
}

.form-input:focus {
    outline: none;
    border-color: #000000;
}

.required-asterisk {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff0000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 200;
    line-height: 23.38px;
    pointer-events: none;
}

.form-submit-btn {
    width: 100%;
    max-width: 338.125px;
    height: 38.007px;
    min-height: 44px;
    background: #ffe887;
    border: none;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23.004px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 10px;
    box-sizing: border-box;
}

.form-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.3);
}

/* Responsive Design */
@media (max-width: 968px) {
    .modal-cards-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }
}

@media (max-width: 768px) {
    /* Mobile modal adjustments */
    .modal-overlay {
        padding: max(10px, env(safe-area-inset-top, 10px)) max(10px, env(safe-area-inset-right, 10px)) max(10px, env(safe-area-inset-bottom, 10px)) max(10px, env(safe-area-inset-left, 10px));
        align-items: flex-start;
        overflow-y: auto;
    }
    
    .modal-content {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .modal-card {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        min-height: auto;
        padding: 25px 20px;
        box-sizing: border-box;
    }
    
    .modal-card-title {
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 15px;
    }
    
    .modal-card-description {
        font-size: 15px;
        line-height: 20px;
        margin-bottom: 20px;
    }
    
    .modal-form {
        gap: 15px;
    }
    
    .form-input {
        height: 42px;
        font-size: 16px;
        padding: 10px 15px;
    }
    
    .form-input::placeholder {
        font-size: 16px;
    }
    
    .form-submit-btn {
        width: 100% !important;
        height: 56px !important;
        font-size: 18px !important;
        margin-top: 15px !important;
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
        border-radius: 28px !important;
        box-shadow: 0 8px 20px rgba(40, 167, 69, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        overflow: hidden !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    
    /* Add shimmer effect to form submit buttons */
    .form-submit-btn::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: -100% !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
        transition: left 0.6s ease !important;
    }
    
    .form-submit-btn:hover::before {
        left: 100% !important;
    }
    
    .form-submit-btn:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 12px 25px rgba(40, 167, 69, 0.4) !important;
        background: linear-gradient(135deg, #32c55c 0%, #28d186 100%) !important;
    }
    
    .form-submit-btn:active {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
    }
    
    .modal-close {
        top: max(10px, env(safe-area-inset-top, 10px)) !important;
        right: max(10px, env(safe-area-inset-right, 10px)) !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        font-size: 28px !important;
        position: fixed !important;
        z-index: 1001 !important;
        background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 6px 20px rgba(255, 71, 87, 0.3) !important;
        color: #ffffff !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        font-weight: 700 !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    }
    
    .modal-close:hover {
        transform: translateY(-2px) scale(1.05) !important;
        box-shadow: 0 8px 25px rgba(255, 71, 87, 0.4) !important;
        background: linear-gradient(135deg, #ff6b7a 0%, #ff8fa3 100%) !important;
    }
    
    .modal-close:active {
        transform: translateY(-1px) scale(0.98) !important;
        box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3) !important;
    }
    
    /* Mobile responsive styles for all modal cards */
    .coming-soon-notification-card,
    .under-construction-notification-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 25px 20px !important;
        box-sizing: border-box !important;
    }
    
    .coming-soon-title,
    .under-construction-title {
        font-size: 24px !important;
        line-height: 28px !important;
    }
    
    .coming-soon-description,
    .under-construction-description {
        font-size: 16px !important;
        line-height: 22px !important;
    }
    
    .coming-soon-btn {
        width: 100% !important;
        max-width: 240px !important;
        height: 56px !important;
        font-size: 20px !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border-radius: 28px !important;
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 20px auto !important;
    }
    
    .coming-soon-btn:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4) !important;
        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
    }
    
    .coming-soon-btn:active {
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3) !important;
    }
    
    /* FAQ mobile fixes */
    .faq-answer {
        width: calc(100% - 20px) !important;
        max-width: 100%;
        margin: 10px 10px !important;
        padding: 15px !important;
        box-sizing: border-box;
        overflow: visible !important;
    }
    
    .faq-answer p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Ensure FAQ containers fit */
    .wrapper-b, .box-c, .group-6, .wrapper-f, .wrapper-10, .group-a, .section-d, .box-b, .group-5, .section-e, .section-f, .section-10, .section-11, .section-13, .wrapper-e, .group-9 {
        width: 100% !important;
        max-width: 100%;
        padding: 10px !important;
        box-sizing: border-box;
    }
    
    /* Make FAQ questions visible on mobile */
    .text-3a, .text-3c, .text-3e, .text-40, .text-42, .text-44 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        width: 100% !important;
        word-wrap: break-word !important;
        color: #000 !important;
        margin-right: 12px !important;
    }
    
    .text-3b, .text-3d, .text-3f, .text-41, .text-43, .text-45 {
        flex-shrink: 0 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        color: #000 !important;
        margin-left: auto !important;
    }
    
    .section-d, .box-b, .group-5, .section-e, .section-f, .section-10 {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        cursor: pointer !important;
        padding: 16px 18px !important;
        background: #fffbfd !important;
        border: 1px solid #ddd !important;
        border-radius: 10px !important;
        margin: 12px 15px !important;
        align-items: center !important;
        gap: 12px !important;
        width: calc(100% - 30px) !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* Reset absolute positioning on mobile so text wraps and containers auto-size */
    .section-d .text-3a, .box-b .text-3c, .group-5 .text-3e,
    .section-e .text-40, .section-f .text-42, .section-10 .text-44 {
        position: static !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        white-space: normal !important;
    }
    .section-d .text-3b, .box-b .text-3d, .group-5 .text-3f,
    .section-e .text-41, .section-f .text-43, .section-10 .text-45 {
        position: static !important;
        top: auto !important;
        left: auto !important;
        margin-left: 12px !important;
        align-self: center !important;
    }
    .section-d, .box-b, .group-5, .section-e, .section-f, .section-10 {
        height: auto !important;
        min-height: 56px !important;
        flex-wrap: nowrap !important;
    }

    /* Lower FAQ triggers (corporate training Q&A) */
    .wrapper-e, .section-13, .group-9, .wrapper-f, .wrapper-10, .group-a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: calc(100% - 30px) !important;
        margin: var(--mobile-spacing-md) var(--mobile-spacing-sm) 0 !important;
        padding: var(--mobile-spacing-md) !important;
        height: auto !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 10px !important;
    }
    .wrapper-e .text-52, .section-13 .text-54, .group-9 .text-56,
    .wrapper-f .text-58, .wrapper-10 .text-5a, .group-a .text-5c {
        position: static !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
        margin: 0 !important;
        white-space: normal !important;
        flex: 1 1 auto !important;
        width: auto !important;
    }
    .wrapper-e .text-53, .section-13 .text-55, .group-9 .text-57,
    .wrapper-f .text-59, .wrapper-10 .text-5b, .group-a .text-5d {
        position: static !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
    
    .wrapper-b, .box-c, .group-6 {
        display: block !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Move buttons into their respective cards on mobile */
    .section-6, .wrapper-4, .box-7 {
        position: static !important;
        width: 100% !important;
        margin-top: 18px !important;
        display: block !important;
    }
    
    .box-6 {
        display: grid !important;
        gap: 28px !important;
    }
    
    .group-3, .wrapper-3, .section-5 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px 18px !important;
        border: 1px solid #eee !important;
        border-radius: 16px !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
        background: #fffbfd !important;
    }
    
    /* Ensure card images are visible on mobile */
    .img-b, .pic-7, .pic-8 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        margin: 0 auto 15px !important;
        border-radius: 12px !important;
    }
    
    /* Ensure card titles are visible */
    .text-21, .text-23, .text-25 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin: 15px 0 10px !important;
        color: #000 !important;
    }
    
    /* Box-6 container */
    .box-6 {
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
}

/* ============================================ */
/* HOVER FADE EFFECT FOR POWER VALUES METHOD */
/* ============================================ */

.section-4 {
    display: grid;
    grid-template-columns: 1fr 569px;
    gap: 20px;
    align-items: start;
    position: relative;
}

.method-item {
    position: relative;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.method-illustration {
    grid-column: 2;
    grid-row: 1 / -1;
    width: 100%;
    height: auto;
    max-width: 569px;
    align-self: start;
    justify-self: end;
}

.section-4 .method-item {
    grid-column: 1;
}

.method-title {
    position: relative;
    transition: opacity 0.35s ease-in-out;
    opacity: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 64px;
    font-weight: 200;
    line-height: 74.816px;
    text-align: left;
    white-space: nowrap;
}

.method-hover-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.method-description {
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 23.38px;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Mobile padding for method description */
@media (max-width: 768px) {
    .method-description {
        padding: 8px 12px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
        overflow: hidden !important;
    }
    
    .method-hover-text {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    
    /* Override method title white-space for mobile */
    .method-title {
        white-space: normal !important;
        font-size: 36px !important;
        line-height: 1.1 !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* Ensure method items fit on mobile */
    .method-item {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        margin-bottom: 15px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Specific height constraints for mobile */
    .section-4 .method-item {
        min-height: 75px !important;
        max-height: auto !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .method-description {
        padding: 6px 10px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    
    .method-title {
        font-size: 28px !important;
        padding: 6px 10px !important;
    }
    
    .method-hover-text {
        padding: 6px 8px !important;
    }
}

/* Desktop - ensure descriptions fit in boxes */
.method-description {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.method-hover-text {
    box-sizing: border-box;
    overflow: hidden;
}

.method-item:hover .method-title {
    opacity: 0;
}

.method-item:hover .method-hover-text {
    opacity: 1;
}

/* ============================================ */
/* MOBILE STRUCTURE CLEANUP: HERO, CONTAINERS, CTAS */
/* ============================================ */

/* Desktop revert: Power Values Method absolute layout (single illustration) */
@media (min-width: 769px) {
    .section-4 {
        display: block;
        position: relative;
        height: 330px;
    }
    .section-4 .method-item {
        position: absolute;
        width: 569px;
        left: 0;
    }
    .section-4 .method-item:nth-of-type(1) { top: 0; height: 75px; }
    .section-4 .method-item:nth-of-type(2) { top: 75px; height: 75px; }
    .section-4 .method-item:nth-of-type(3) { top: 151px; height: 89px; }
    .section-4 .method-item:nth-of-type(4) { top: 240px; height: 75px; }
    .section-4 .method-illustration {
        position: absolute;
        left: 602px;
        top: 0;
        width: 569px;
        height: 330px;
        max-width: none;
    }
}

@media (max-width: 768px) {
    /* Hero container */
    .group {
        width: calc(100% - 30px) !important;
        margin: 0 15px !important;
        height: auto !important;
        position: relative !important;
    }
    .text-2 {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        font-size: 48px !important;
        line-height: 1.1 !important;
        margin: 16px 0 !important;
        white-space: normal !important;
    }
    .img-2 {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 420px !important;
        height: auto !important;
        margin: 16px auto !important;
        left: auto !important;
        top: auto !important;
    }
    .text-4 {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        font-size: 18px !important;
        line-height: 1.5 !important;
        margin: 8px 0 0 0 !important;
        white-space: normal !important;
    }
    .wrapper {
        position: static !important;
        width: 100% !important;
        max-width: 260px !important;
        height: 50px !important;
        margin: 16px 0 0 0 !important;
        left: auto !important;
        top: auto !important;
    }

    /* Cards container */
    .section {
        width: calc(100% - 30px) !important;
        margin: 24px 15px 0 15px !important;
        height: auto !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
    .wrapper-2, .box-2, .group-2 {
        width: 100% !important;
        height: auto !important;
    }

    /* Fixed-width rows/sections -> fluid */
    .wrapper-6, .group-4, .box-8, .section-9, .wrapper-7,
    .wrapper-11, .group-7, .box-d, .group-8 {
        width: calc(100% - 30px) !important;
        margin: 20px 15px 0 15px !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
    }

    /* Ensure footer wrapper spans width */
    .wrapper-11 {
        width: 100% !important;
        margin: 49px 0 0 0 !important;
        box-sizing: border-box !important;
    }

    /* Method list: ensure relative layout on mobile */
    .method-item {
        position: relative !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
    }

    /* CTA tap targets to 44px min */
    .section-7, .wrapper-5, .section-8, .wrapper-8, .box-9, .wrapper-a {
        min-height: 44px !important;
        height: 44px !important;
    }
    .text-27, .text-28, .text-29, .text-32, .text-33, .text-39 {
        font-size: 16px !important;
        line-height: 1 !important;
    }
}
/* ============================================ */
/* IMPROVED COMING SOON NOTIFICATION MODAL */
/* ============================================ */

.coming-soon-notification-card {
    width: 100%;
    max-width: 570px;
    padding: 50px 40px;
    background: linear-gradient(135deg, #E5F2FF 0%, #F0E5FF 100%);
    border-radius: 25px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    text-align: center;
    animation: slideUp 0.4s ease;
    box-sizing: border-box;
}

.coming-soon-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
}

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

.coming-soon-title {
    color: #000000;
    font-family: Lato, var(--default-font-family);
    font-size: 36px;
    font-weight: 900;
    line-height: 43.2px;
    margin: 0 0 16px 0;
}

.coming-soon-description {
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    margin: 0 0 30px 0;
    opacity: 0.85;
}

.coming-soon-btn {
    width: 100%;
    max-width: 200px;
    height: 48px;
    min-height: 44px;
    background: #fed605;
    border: none;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.coming-soon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.3);
    background: #ffe887;
}

/* ============================================ */
/* UNDER CONSTRUCTION NOTIFICATION MODAL */
/* ============================================ */

.under-construction-notification-card {
    width: 100%;
    max-width: 570px;
    padding: 50px 40px;
    background: linear-gradient(135deg, #FFF1E5 0%, #FFE5F5 100%);
    border-radius: 25px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    text-align: center;
    animation: slideUp 0.4s ease;
    box-sizing: border-box;
}

.under-construction-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
}

.under-construction-title {
    color: #000000;
    font-family: Lato, var(--default-font-family);
    font-size: 36px;
    font-weight: 900;
    line-height: 43.2px;
    margin: 0 0 16px 0;
}

.under-construction-description {
    color: #000000;
    font-family: Karla, var(--default-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    margin: 0 0 10px 0;
    opacity: 0.85;
}

.under-construction-notification-card .modal-form {
    text-align: left;
}

.under-construction-notification-card .form-field {
    position: relative;
}

.under-construction-notification-card textarea.form-input {
    min-height: 100px;
    font-family: inherit;
}

/* ============================================ */
/* Center CTA label text for specific buttons   */
/* ============================================ */
.wrapper-8 a.text-32,
.box-9 a.text-33,
.wrapper-a a.text-39 {
    position: static;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box-11 button.text-4e {
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
}

/* ============================================ */
/* MOBILE RESPONSIVE STYLES - FULL SCREEN */
/* ============================================ */

/* ============================================ */
/* COMPREHENSIVE MOBILE LAYOUT FIXES */
/* ============================================ */

/* Tool Cards Mobile Fixes */
@media (max-width: 768px) {
    /* Tool Cards Container */
    .section {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: calc(100% - 30px) !important;
        margin: 24px 15px !important;
        height: auto !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }
    
    /* Individual Tool Cards */
    .wrapper-2, .box-2, .group-2, .box-4 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        transform: none !important;
    }
    
    /* Tool Card Content */
    .wrapper-2 .tool-card-content,
    .box-2 .tool-card-content,
    .group-2 .tool-card-content,
    .box-4 .tool-card-content {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        padding: 25px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Tool Card Images */
    .wrapper-2 .pic-2,
    .box-2 .img-6,
    .group-2 .pic-3,
    .box-4 .pic-4 {
        position: relative !important;
        width: 153px !important;
        height: 153px !important;
        left: auto !important;
        top: auto !important;
        margin: 0 auto 20px !important;
        transform: none !important;
    }
    
    /* Tool Card Titles */
    .wrapper-2 .text-9,
    .box-2 .text-d,
    .group-2 .text-11,
    .box-4 .text-15 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 0 15px !important;
        font-size: 24px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: normal !important;
    }
    
    /* Tool Card Descriptions */
    .wrapper-2 .text-a,
    .box-2 .text-e,
    .group-2 .text-12,
    .box-4 .text-16 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 0 20px !important;
        font-size: 18px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        white-space: normal !important;
    }
    
    /* Tool Card Buttons */
    .wrapper-2 .box,
    .box-2 .box-3,
    .group-2 .section-2,
    .box-4 .section-3 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 20px 0 0 !important;
        padding: 12px 20px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Button Text */
    .wrapper-2 .text-b,
    .box-2 .text-f,
    .group-2 .text-13,
    .box-4 .text-17 {
        position: static !important;
        width: auto !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }
    
    /* Method Section Mobile Fixes */
    .section-4 {
        position: relative !important;
        width: calc(100% - 30px) !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 40px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* Method Items */
    .method-item {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        padding: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,0.9) !important;
    }
    
    /* Method Titles */
    .method-title {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 0 10px !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }
    
    /* Method Descriptions */
    .method-description {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }
    
    /* Method Illustration */
    .method-illustration {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 20px 0 0 !important;
        max-width: 400px !important;
    }
    
    /* Resource Cards Mobile Fixes */
    .box-6 {
        position: relative !important;
        width: calc(100% - 30px) !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 40px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    .group-3, .wrapper-3, .section-5 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        padding: 25px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,0.9) !important;
    }
    
    /* Resource Card Images */
    .group-3 .img-b,
    .wrapper-3 .pic-7,
    .section-5 .pic-8 {
        position: relative !important;
        width: 120px !important;
        height: 120px !important;
        left: auto !important;
        top: auto !important;
        margin: 0 auto 20px !important;
    }
    
    /* Resource Card Titles */
    .group-3 .text-21,
    .wrapper-3 .text-23,
    .section-5 .text-25 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 0 15px !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }
    
    /* Resource Card Descriptions */
    .group-3 .text-22,
    .wrapper-3 .text-24,
    .section-5 .text-26 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 0 20px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }
    
    /* Resource Card Buttons */
    .group-3 .section-7,
    .wrapper-3 .wrapper-5,
    .section-5 .section-8 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 20px 0 0 !important;
        padding: 12px 20px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Button Links */
    .group-3 .text-27,
    .wrapper-3 .text-28,
    .section-5 .text-29 {
        position: static !important;
        width: auto !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }
    
    /* Mobile-friendly card interaction */
    .tool-card-hover {
        display: flex !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
        pointer-events: none !important;
    }
    
    /* Show hover text when card is tapped (active state) */
    .tool-card:active .tool-card-hover,
    .tool-card.active .tool-card-hover {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* Hide default content when hover text is shown */
    .tool-card:active .tool-card-content,
    .tool-card.active .tool-card-content {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Ensure tap targets are large enough */
    .tool-card {
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }
    
    /* Add visual feedback for tap */
    .tool-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    .tool-card.active {
        transform: scale(1) !important;
    }
    
    /* Ensure hover text is readable on mobile */
    .tool-card-hover .hover-description {
        font-size: 16px !important;
        line-height: 1.4 !important;
        padding: 15px !important;
    }
    
    .tool-card-hover .hover-download-btn {
        width: 140px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    
    /* Ensure proper stacking context */
    .tool-card {
        position: relative !important;
        z-index: 1 !important;
    }
    
    .tool-card-content {
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* Fix text wrapping */
    .text-9, .text-d, .text-11, .text-15,
    .text-a, .text-e, .text-12, .text-16,
    .text-21, .text-23, .text-25,
    .text-22, .text-24, .text-26 {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Fix method section titles */
    .text-18, .text-1f {
        position: relative !important;
        width: calc(100% - 30px) !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 40px 15px 20px !important;
        font-size: 32px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: normal !important;
    }
    
    .text-19, .text-20 {
        position: relative !important;
        width: calc(100% - 30px) !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 15px 30px !important;
        font-size: 18px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        white-space: normal !important;
    }
    
    /* Fix box-5 text */
    .box-5 {
        position: relative !important;
        width: calc(100% - 30px) !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 20px 15px !important;
        padding: 20px !important;
    }
    
    .box-5 .text-19, .box-5 .text-1a {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 0 15px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }
}

/* Tablet and smaller devices */
@media (max-width: 1280px) {
    .main-container {
        width: 100%;
        height: auto;
        padding: 0 20px;
    }
    
    .text {
        margin: 40px 20px 0;
        font-size: 18px;
    }
    
    .group {
        width: 100%;
        height: auto;
    }
    
    .text-2 {
        width: 90%;
        font-size: 72px;
        line-height: 86px;
        left: 20px;
    }
    
    .img-2 {
        width: 400px;
        height: 400px;
        right: 20px;
        left: auto;
    }
    
    .text-4 {
        width: 90%;
        left: 20px;
        font-size: 28px;
        line-height: 34px;
    }
    
    .wrapper {
        left: 20px;
    }
}

/* Mobile devices - landscape and portrait */
@media (max-width: 768px) {
    /* Global text containment rules for mobile */
    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Ensure all text elements fit within containers */
    h1, h2, h3, h4, h5, h6, p, span, div, a, li, td, th {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal !important;
    }
    
    /* Prevent text overflow in any container */
    div, section, article, aside, main {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    /* Ensure buttons and links wrap text properly */
    button, a {
        white-space: normal !important;
        text-align: center;
        word-break: break-word;
    }
    
    body {
        overflow-x: hidden;
        background: #fffbfd;
        margin: 0;
        padding: 0;
    }
    
    html,
    body {
        overflow-x: hidden;
    }

    .main-container {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
        background: #fffbfd;
        display: flex;
        flex-direction: column;
        gap: var(--mobile-spacing-lg);
    }

    .main-container > * {
        max-width: 100%;
    }

    .main-container img {
        max-width: 100%;
        height: auto;
    }
    
    /* Consistent section spacing */
    .text {
        margin: var(--mobile-spacing-lg) var(--mobile-spacing-sm) 0;
        font-size: 16px;
        white-space: normal;
        height: auto;
        font-weight: 400;
    }
    
    .group {
        width: 100%;
        height: auto;
        min-height: auto;
        padding: var(--mobile-spacing-md);
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--mobile-spacing-md);
    }
    
    .menu-dropdown {
        position: fixed;
        top: max(10px, env(safe-area-inset-top, 10px));
        right: max(10px, env(safe-area-inset-right, 10px));
        z-index: 1100;
    }
    
    .menu-trigger {
        width: 60px;
        height: 60px;
        background: #863158;
        border: none;
        border-radius: 50%;
        color: #fffbfd;
        font-family: Karla, var(--default-font-family);
        cursor: pointer;
        box-shadow: 0 8px 16px rgba(0,0,0,0.25);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 0;
        transition: all 0.3s ease;
        -webkit-tap-highlight-color: rgba(134, 211, 225, 0.3);
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
    }
    
    .menu-trigger:active {
        transform: scale(0.95);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    
    .menu-trigger-lines {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    
    .menu-trigger-lines span {
        width: 28px;
        height: 3px;
        background: #fffbfd;
        border-radius: 4px;
        transition: all 0.3s ease;
    }
    
    /* Hamburger animation when menu is open */
    .menu-trigger[aria-expanded="true"] .menu-trigger-lines span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    
    .menu-trigger[aria-expanded="true"] .menu-trigger-lines span:nth-child(2) {
        opacity: 0;
        transform: translateX(-10px);
    }
    
    .menu-trigger[aria-expanded="true"] .menu-trigger-lines span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    
    .menu-trigger[aria-expanded="true"] .menu-trigger-text {
        opacity: 0;
        transform: translateY(-5px);
    }
    
    .menu-trigger-text {
        display: block;
        margin-top: 6px;
        color: #fffbfd;
        font-size: 12px;
        line-height: 14px;
        font-family: Karla, var(--default-font-family);
    }
    
    .menu-panel {
        position: fixed !important;
        top: calc(70px + env(safe-area-inset-top, 0px)) !important;
        right: max(10px, env(safe-area-inset-right, 10px)) !important;
        left: auto !important;
        width: 85% !important;
        max-width: 280px !important;
        min-width: 200px !important;
        z-index: 10000 !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        transform: translateY(-10px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    
    .menu-panel.open {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .menu-panel.open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .menu-panel-inner {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: rgba(134, 49, 88, 0.95) !important;
        max-height: calc(100vh - 100px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    }
    
    /* Reduce padding on mobile for more compact menu */
    .menu-items {
        padding: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .menu-topbar {
        height: 40px !important;
        background: rgba(94, 36, 58, 0.8) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    
    .menu-item {
        font-size: 18px !important;
        line-height: 24px !important;
        padding: 12px 16px !important;
        margin: 4px 0 !important;
        border-radius: 12px !important;
        transition: all 0.2s ease !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 50px !important;
        box-sizing: border-box !important;
    }
    
    .menu-item:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: translateX(5px) !important;
    }
    
    .menu-item:active {
        background: rgba(255, 255, 255, 0.3) !important;
        transform: translateX(2px) !important;
    }
    
    /* Ensure menu dropdown doesn't clip the menu */
    .menu-dropdown {
        overflow: visible !important;
    }
    
    /* Add overlay backdrop when menu is open */
    .menu-panel::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.3) !important;
        z-index: -1 !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        pointer-events: none !important;
    }
    
    .menu-panel.open::before {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .text-2 {
        position: relative;
        width: 100%;
        font-size: var(--font-size-3xl);
        line-height: 1.2;
        left: 0;
        top: 0;
        height: auto;
        margin: var(--space-xl) 0 var(--mobile-spacing-md) 0;
        padding-right: 60px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .img-2 {
        position: relative;
        width: 100%;
        max-width: 320px;
        height: auto;
        aspect-ratio: 1/1;
        top: 0;
        bottom: auto;
        left: 0;
        transform: none;
        margin: 0 auto var(--mobile-spacing-md);
        border-radius: var(--mobile-border-radius);
        box-shadow: var(--mobile-shadow);
    }
    
    .text-4 {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        font-size: var(--font-size-md);
        line-height: 1.6;
        height: auto;
        color: #333;
        margin-bottom: var(--mobile-spacing-md);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .wrapper {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 220px;
        height: 55px;
        margin: 0 auto var(--mobile-spacing-lg);
        border-radius: var(--mobile-border-radius);
        box-shadow: var(--mobile-shadow-lg);
        cursor: pointer;
    }
    
    .text-5 {
        font-size: 20px;
    }
    
    .img-3, .img-4, .img-5 {
        display: none;
    }
    
    .text-6 {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        font-size: var(--font-size-2xl);
        line-height: 1.3;
        height: auto;
        white-space: normal;
        font-weight: 900;
        margin: 0 0 var(--mobile-spacing-md) 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .text-7 {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        font-size: var(--font-size-base);
        line-height: 1.6;
        height: auto;
        color: #555;
        margin-bottom: var(--mobile-spacing-lg);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Tool cards section - Consistent card design */
    .section {
        width: 100%;
        height: auto;
        margin: var(--mobile-spacing-xl) 0 0 0;
        padding: 0 var(--mobile-spacing-sm);
        flex-direction: column;
        gap: var(--mobile-spacing-md);
    }
    
    .wrapper-2, .box-2, .group-2, .box-4 {
        width: 100%;
        max-width: 450px;
        height: auto;
        min-height: 420px;
        margin: 0 auto;
        border-radius: var(--mobile-border-radius);
        box-shadow: var(--mobile-shadow);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        will-change: transform;
    }
    /* Center-align tool card content and ensure media fits */
    .tool-card .tool-card-content {
        display: flex;
        flex-direction: column;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .tool-card .tool-card-content img {
        display: block !important;
        margin: 0 auto 12px !important;
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        border-radius: 12px !important;
    }
    .tool-card .tool-card-content span {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }
    /* Show hover overlay on mobile with tap interaction */
    .tool-card-hover {
        display: flex !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
        pointer-events: none !important;
    }
    
    /* Show hover text when card is tapped (active state) */
    .tool-card:active .tool-card-hover,
    .tool-card.active .tool-card-hover {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* Hide default content when hover text is shown */
    .tool-card:active .tool-card-content,
    .tool-card.active .tool-card-content {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Ensure tap targets are large enough */
    .tool-card {
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }
    
    /* Add visual feedback for tap */
    .tool-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    .tool-card.active {
        transform: scale(1) !important;
    }
    
    /* Ensure hover text is readable on mobile */
    .tool-card-hover .hover-description {
        font-size: 16px !important;
        line-height: 1.4 !important;
        padding: 15px !important;
    }
    
    .tool-card-hover .hover-download-btn {
        width: 140px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    /* Remove fixed left offsets on mobile and make spans full-width */
    .tool-card .tool-card-content span {
        margin-left: 0 !important;
        width: 100% !important;
    }
    /* Improve Download Now buttons on mobile (first tool cards section) */
    .tool-card .box,
    .tool-card .box-3,
    .tool-card .section-2,
    .tool-card .section-3 {
        width: 100% !important;
        max-width: 320px !important;
        height: 56px !important;
        margin: 20px auto 0 !important;
        padding: 0 20px !important;
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
        border-radius: 28px !important;
        box-shadow: 0 8px 20px rgba(255, 165, 0, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        overflow: hidden !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    
    /* Add subtle shimmer effect */
    .tool-card .box::before,
    .tool-card .box-3::before,
    .tool-card .section-2::before,
    .tool-card .section-3::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: -100% !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
        transition: left 0.6s ease !important;
    }
    
    .tool-card .box:hover::before,
    .tool-card .box-3:hover::before,
    .tool-card .section-2:hover::before,
    .tool-card .section-3:hover::before {
        left: 100% !important;
    }
    .tool-card .text-b,
    .tool-card .text-f,
    .tool-card .text-13,
    .tool-card .text-17 {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        color: #2c1810 !important;
        text-transform: none !important;
        text-shadow: 0 1px 2px rgba(255,255,255,0.3) !important;
        font-family: 'Karla', sans-serif !important;
        transition: all 0.3s ease !important;
    }
    
    /* Enhanced hover states for Download buttons */
    .tool-card .box:hover,
    .tool-card .box-3:hover,
    .tool-card .section-2:hover,
    .tool-card .section-3:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 12px 25px rgba(255, 165, 0, 0.4) !important;
        background: linear-gradient(135deg, #FFC107 0%, #FF8F00 100%) !important;
    }
    
    .tool-card .box:active,
    .tool-card .box-3:active,
    .tool-card .section-2:active,
    .tool-card .section-3:active {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(255, 165, 0, 0.3) !important;
    }
    /* Improve CTA buttons (Take Free Quiz, Start Now, Listen Now) */
    .section-7, .wrapper-5, .section-8 {
        width: 100% !important;
        max-width: 320px !important;
        height: 56px !important;
        margin: 20px auto 0 !important;
        background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%) !important;
        border-radius: 28px !important;
        box-shadow: 0 8px 20px rgba(74, 144, 226, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        overflow: hidden !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    
    /* Add subtle shimmer effect for CTA buttons */
    .section-7::before,
    .wrapper-5::before,
    .section-8::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: -100% !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
        transition: left 0.6s ease !important;
    }
    
    .section-7:hover::before,
    .wrapper-5:hover::before,
    .section-8:hover::before {
        left: 100% !important;
    }
    .text-27, .text-28, .text-29 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        color: #ffffff !important;
        text-decoration: none !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
        font-family: 'Karla', sans-serif !important;
        transition: all 0.3s ease !important;
    }
    
    /* Enhanced hover states for CTA buttons */
    .section-7:hover,
    .wrapper-5:hover,
    .section-8:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 12px 25px rgba(74, 144, 226, 0.4) !important;
        background: linear-gradient(135deg, #5BA0F2 0%, #458BCD 100%) !important;
    }
    
    .section-7:active,
    .wrapper-5:active,
    .section-8:active {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3) !important;
    }
    
    .wrapper-2:active, .box-2:active, .group-2:active, .box-4:active {
        transform: translateY(2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Loading states */
    .wrapper-2.loading,
    .box-2.loading,
    .group-2.loading,
    .box-4.loading {
        opacity: 0.6;
        pointer-events: none;
    }
    
    /* Power Values Method section - Consistent heading style */
    .text-18 {
        display: block;
        width: calc(100% - 30px);
        margin: var(--space-lg) var(--mobile-spacing-sm) var(--mobile-spacing-md);
        font-size: var(--font-size-2xl);
        line-height: 1.3;
        font-weight: 900;
        color: #000;
        text-align: left;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .box-5 {
        width: calc(100% - 30px);
        margin: 0 var(--mobile-spacing-sm) var(--mobile-spacing-md);
        height: auto;
        padding: 15px;
        border-radius: var(--mobile-border-radius);
        background: #f8f9fa;
        box-shadow: var(--mobile-shadow);
        display: flex;
        flex-direction: column;
        gap: var(--mobile-spacing-md);
        position: relative;
        left: 0;
        top: auto;
        box-sizing: border-box;
    }

    .text-19,
    .text-1a {
        display: block;
        width: 100%;
        font-size: var(--font-size-base);
        line-height: 1.6;
        color: #333;
        margin-bottom: var(--space-sm);
        position: relative;
        left: 0;
        top: auto;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .section-4 {
        width: calc(100% - 30px);
        margin: var(--mobile-spacing-lg) var(--mobile-spacing-sm) 0;
        height: auto;
        display: block;
        position: relative;
    }
    .section-4 .method-illustration {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: var(--mobile-spacing-sm) 0 !important;
    }
    
    .method-item {
        position: relative;
        width: 100%;
        height: auto !important;
        top: auto !important;
        left: 0 !important;
        margin-bottom: var(--mobile-spacing-md);
        padding: var(--mobile-spacing-md);
        background: #fff;
        border-radius: var(--mobile-border-radius-sm);
        box-shadow: var(--mobile-shadow);
    }
    .method-hover-text {
        position: static !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: block !important;
        padding: var(--mobile-spacing-xs) 0 !important;
        height: auto !important;
    }

    .method-title {
        font-size: var(--font-size-xl);
        line-height: 1.3;
        font-weight: 700;
        color: #000;
        margin-bottom: var(--mobile-spacing-xs);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .method-description {
        font-size: var(--font-size-base);
        line-height: 1.6;
        color: #555;
        margin: var(--mobile-spacing-xs) 0 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Leadership tools section */
    .text-1f {
        width: calc(100% - 30px);
        margin: var(--space-xl) var(--mobile-spacing-sm) 0;
        font-size: var(--font-size-2xl);
        line-height: 1.3;
        height: auto;
        white-space: normal;
        font-weight: 900;
        text-align: center;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .text-20 {
        width: calc(100% - 30px);
        margin: var(--space-sm) var(--mobile-spacing-sm) 0;
        font-size: var(--font-size-md);
        line-height: 1.6;
        height: auto;
        text-align: center;
        color: #555;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .box-6 {
        width: calc(100% - 30px);
        margin: var(--mobile-spacing-lg) var(--mobile-spacing-sm) 0;
        height: auto;
        padding: var(--mobile-spacing-sm);
        display: flex;
        flex-direction: column;
        gap: var(--mobile-spacing-lg);
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        position: relative;
        left: 0;
        top: auto;
    }
    
    .group-3, .wrapper-3, .section-5 {
        width: 100%;
        height: auto;
        position: relative;
        top: auto !important;
        left: auto !important;
        padding: var(--mobile-spacing-md);
        border-radius: var(--mobile-border-radius);
        box-shadow: var(--mobile-shadow);
    }
    
    .img-b, .pic-7, .pic-8 {
        width: 100%;
        height: auto;
        max-width: 300px;
        margin: 0 auto;
        display: block;
    }
    
    .text-21, .text-23, .text-25 {
        width: 100%;
        font-size: var(--font-size-xl);
        line-height: 1.3;
        height: auto;
        text-align: center;
        margin: var(--space-md) 0 var(--mobile-spacing-xs) 0;
        font-weight: 800;
        color: #000;
        position: relative;
        left: 0;
        top: auto;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .text-22, .text-24, .text-26 {
        width: 100%;
        font-size: var(--font-size-base);
        line-height: 1.5;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 var(--space-sm) !important;
        box-sizing: border-box !important;
        height: auto;
        color: #555;
        position: relative;
        left: 0;
        top: auto;
        margin-bottom: var(--mobile-spacing-md);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .section-6, .wrapper-4, .box-7 {
        width: 100%;
        position: relative;
        top: auto !important;
        left: auto !important;
        margin: 0;
        padding: 0;
        height: auto;
        display: flex;
        justify-content: center;
    }
    
    .section-7, .wrapper-5, .section-8 {
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
        position: relative;
        padding: 10px;
    }
    
    /* Insight section */
    .wrapper-6 {
        width: calc(100% - 30px);
        margin: 40px 15px 0;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: var(--mobile-spacing-md);
        position: relative;
        left: 0;
        top: auto;
    }
    
    .text-2a {
        font-size: 32px;
        line-height: 1.3;
        width: 100%;
        height: auto;
        white-space: normal;
        position: relative;
        left: 0;
        top: auto;
    }
    
    .text-2b {
        font-size: 20px;
        line-height: 1.4;
        width: 100%;
        height: auto;
        white-space: normal;
        position: relative;
        left: 0;
        top: auto;
    }
    
    .group-4 {
        width: calc(100% - 30px);
        margin: 20px 15px 0;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .img-c, .pic-9 {
        width: 100%;
        height: auto;
        position: relative;
        top: auto;
        left: auto;
    }
    
    .box-8 {
        width: calc(100% - 30px);
        margin: 30px 15px 0;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    
    .wrapper-7, .section-9 {
        width: 100%;
        height: auto;
        position: relative;
        top: auto;
        left: auto;
        padding: 20px;
    }
    
    .text-2c, .text-2f {
        font-size: 28px;
        line-height: 34px;
        width: 100%;
        height: auto;
    }
    
    .text-2e, .text-31 {
        font-size: 18px;
        line-height: 24px;
        width: 100%;
        height: auto;
    }
    
    .section-a {
        width: calc(100% - 30px);
        margin: 20px 15px 0;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .wrapper-8, .box-9 {
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }
    
    .wrapper-9 {
        width: calc(100% - 30px);
        margin: 20px 15px 0;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: var(--mobile-spacing-sm);
        position: relative;
        left: 0;
        top: auto;
    }
    
    .text-34, .text-35 {
        font-size: 18px;
        line-height: 1.5;
        width: 100%;
        height: auto;
        position: relative;
        left: 0;
        top: auto;
        text-align: center;
        white-space: normal;
    }
    
    /* Corporate training section */
    .section-b {
        width: calc(100% - 30px);
        margin: var(--mobile-spacing-xl) var(--mobile-spacing-sm) 0;
        height: auto;
        padding: var(--mobile-spacing-md) 0;
    }
    
    .text-36 {
        font-size: 36px;
        line-height: 1.3;
        width: 100%;
        height: auto;
        font-weight: 900;
        text-align: center;
        margin-bottom: var(--mobile-spacing-md);
    }
    
    .section-c {
        width: 100%;
        height: auto;
        margin: var(--mobile-spacing-md) 0 0;
        display: flex;
        flex-direction: column;
        gap: var(--mobile-spacing-lg);
        position: relative;
        left: 0;
        top: auto;
        padding: 0 var(--mobile-spacing-sm);
    }
    
    .img-d {
        width: 100%;
        height: auto;
        max-width: 100%;
        aspect-ratio: 1/1;
        margin: 0 auto;
        position: relative;
        top: auto !important;
        left: auto !important;
        border-radius: var(--mobile-border-radius);
        box-shadow: var(--mobile-shadow);
    }
    
    .img-e {
        display: none;
    }
    
    .box-a {
        width: 100%;
        height: auto;
        padding: var(--mobile-spacing-lg);
        position: relative;
        top: auto;
        left: auto;
        background: #f8f9fa;
        border-radius: var(--mobile-border-radius);
        box-shadow: var(--mobile-shadow);
    }
    
    .text-37 {
        font-size: 28px;
        line-height: 1.3;
        width: 100%;
        height: auto;
        font-weight: 800;
        margin-bottom: var(--mobile-spacing-sm);
    }
    
    .text-38 {
        font-size: 17px;
        line-height: 1.6;
        width: 100%;
        height: auto;
        color: #444;
    }
    
    .wrapper-a {
        width: 100%;
        max-width: 250px;
        margin: 20px auto 0;
        position: relative;
        top: auto;
        left: auto;
    }
    
    /* FAQ sections - Consistent card style */
    .wrapper-b, .box-c, .group-6 {
        width: calc(100% - 30px);
        margin: var(--mobile-spacing-md) var(--mobile-spacing-sm) 0;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: var(--mobile-spacing-sm);
    }
    
    .section-d, .box-b, .group-5, .section-e, .section-f, .section-10 {
        width: 100%;
        height: auto;
        padding: var(--mobile-spacing-md);
        position: relative;
        top: auto;
        left: auto;
        background: #fff;
        border-radius: var(--mobile-border-radius-sm);
        box-shadow: var(--mobile-shadow);
        transition: box-shadow 0.3s ease;
    }
    
    .section-d:active, .box-b:active, .group-5:active, 
    .section-e:active, .section-f:active, .section-10:active {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transform: scale(0.98);
    }
    
    .text-3a, .text-3c, .text-3e, .text-40, .text-42, .text-44 {
        font-size: var(--font-size-md);
        line-height: 1.4;
        width: calc(100% - 40px);
        height: auto;
        font-weight: 600;
        color: #000;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .text-3b, .text-3d, .text-3f, .text-41, .text-43, .text-45 {
        font-size: 24px;
        position: absolute;
        right: 20px;
        top: 20px;
    }
    
    .faq-answer {
        width: calc(100% - 30px);
        margin: var(--mobile-spacing-xs) var(--mobile-spacing-sm);
        padding: var(--mobile-spacing-md);
        background: #f8f9fa;
        border-radius: var(--mobile-border-radius-sm);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    
    .faq-answer p {
        font-size: var(--font-size-base);
        line-height: 1.7;
        color: #444;
        margin: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* About founder section */
    .section-11 {
        width: calc(100% - 30px);
        margin: var(--mobile-spacing-xl) var(--mobile-spacing-sm) 0;
        height: auto;
        padding: var(--mobile-spacing-md) 0;
    }
    
    .text-46 {
        font-size: 36px;
        line-height: 1.3;
        width: 100%;
        height: auto;
        font-weight: 900;
        text-align: center;
        margin-bottom: var(--mobile-spacing-md);
    }
    
    .group-7 {
        width: 100%;
        height: auto;
        margin: var(--mobile-spacing-md) 0 0;
        display: flex;
        flex-direction: column;
        gap: var(--mobile-spacing-md);
        padding: var(--mobile-spacing-lg);
        background: #f8f9fa;
        border-radius: var(--mobile-border-radius);
        box-shadow: var(--mobile-shadow);
    }
    
    .img-f {
        width: 100%;
        max-width: 300px;
        height: auto;
        margin: 0 auto;
        position: relative;
        top: auto;
        left: auto;
        border-radius: 50%;
        box-shadow: var(--mobile-shadow-lg);
    }
    
    .text-47 {
        font-size: 17px;
        line-height: 1.7;
        width: 100%;
        height: auto;
        color: #444;
        text-align: left;
    }
    
    /* CTA section */
    .box-d {
        width: calc(100% - 30px);
        margin: var(--mobile-spacing-xl) var(--mobile-spacing-sm) 0;
        height: auto;
        padding: var(--mobile-spacing-lg);
        background: #f8f9fa;
        border-radius: var(--mobile-border-radius);
        box-shadow: var(--mobile-shadow-lg);
    }
    
    .group-8 {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: var(--mobile-spacing-md);
        position: relative;
        top: auto !important;
        left: auto !important;
        padding: 0;
    }
    
    .text-48 {
        font-size: 28px;
        line-height: 1.3;
        width: 100%;
        height: auto;
        text-align: center;
        font-weight: 900;
        color: #000;
        margin: 0 0 var(--mobile-spacing-md) 0;
        position: relative;
        left: 0;
        top: auto;
    }
    
    .img-10 {
        width: 100%;
        max-width: 280px;
        height: auto;
        aspect-ratio: 1/1;
        margin: 0 auto var(--mobile-spacing-md);
        position: relative;
        top: auto !important;
        left: auto !important;
        border-radius: var(--mobile-border-radius);
        box-shadow: var(--mobile-shadow);
    }
    
    .section-12, .box-f, .box-10 {
        width: 100%;
        position: relative;
        top: auto !important;
        left: auto !important;
        margin: 0 0 var(--mobile-spacing-sm) 0;
        height: auto;
    }
    
    .box-11 {
        width: 100%;
        max-width: 250px;
        position: relative;
        top: auto !important;
        left: auto !important;
        margin: var(--mobile-spacing-md) auto 0;
        height: auto;
    }
    
    .box-e, .wrapper-c {
        width: 100%;
    }
    
    .form-input {
        width: 100%;
        font-size: 17px;
        padding: var(--mobile-spacing-sm);
        border-radius: var(--mobile-border-radius-sm);
        border: 2px solid #e0e0e0;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        -webkit-appearance: none;
        appearance: none;
    }
    
    .form-input:focus {
        border-color: #86d3e1;
        outline: none;
        box-shadow: 0 0 0 3px rgba(134, 211, 225, 0.1);
    }
    
    .form-input.error,
    .has-error .form-input {
        border-color: #e74c3c;
    }
    
    .form-input.success,
    .has-success .form-input {
        border-color: #2ecc71;
    }
    
    .wrapper-d {
        width: 100%;
        height: auto;
        padding: 0;
        position: relative;
        top: auto !important;
        left: auto !important;
        margin-bottom: var(--mobile-spacing-lg);
    }
    
    .text-4f, .text-51 {
        font-size: 17px;
        line-height: 1.7;
        width: 100%;
        height: auto;
        color: #444;
        position: relative;
        left: 0;
        top: auto;
        text-align: left;
    }
    
    .text-50 {
        font-size: 20px;
        font-weight: 700;
        position: relative;
        left: 0;
        top: auto;
    }
    
    /* Additional FAQ sections */
    .wrapper-e, .section-13, .group-9, .wrapper-f, .wrapper-10, .group-a {
        width: calc(100% - 30px);
        margin: var(--mobile-spacing-md) var(--mobile-spacing-sm) 0;
        height: auto;
        padding: var(--mobile-spacing-md);
        position: relative;
        top: auto !important;
        left: auto !important;
        background: #fff;
        border-radius: var(--mobile-border-radius-sm);
        box-shadow: var(--mobile-shadow);
    }
    
    .text-52, .text-54, .text-56, .text-58, .text-5a, .text-5c {
        font-size: 18px;
        line-height: 1.4;
        width: calc(100% - 50px);
        height: auto;
        white-space: normal;
        position: relative;
        left: 0;
        top: auto;
    }
    
    .text-53, .text-55, .text-57, .text-59, .text-5b, .text-5d {
        font-size: 24px;
        position: absolute;
        right: 20px;
        top: 20px;
        line-height: 1;
    }
    
    /* Footer - Enhanced Mobile Design */
    .wrapper-11 {
        width: 100%;
        margin: var(--mobile-spacing-xl) 0 0 0;
        height: auto;
        padding: 40px 20px 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--mobile-spacing-lg);
        background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
        border-radius: 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        position: relative;
        left: 0 !important;
        top: auto !important;
    }
    
    /* Logo Section - First */
    .pic-a {
        width: 100%;
        max-width: 120px;
        height: auto;
        margin: 0 auto var(--mobile-spacing-md);
        position: relative;
        top: auto !important;
        left: auto !important;
        display: block;
        filter: brightness(0) invert(1);
        order: -3;
    }
    
    /* Brand Name - Second */
    .text-60 {
        font-size: 32px;
        line-height: 1.2;
        width: 100%;
        height: auto;
        text-align: center;
        font-weight: 900;
        color: #ffffff;
        margin: 0 0 5px 0;
        position: relative;
        top: auto !important;
        left: auto !important;
        order: -2;
    }
    
    /* Tagline - Third */
    .text-63 {
        font-size: 16px;
        line-height: 1.4;
        width: 100%;
        height: auto;
        text-align: center;
        color: #86d3e1;
        font-style: normal;
        font-weight: 300;
        margin: 0 0 var(--mobile-spacing-lg) 0;
        position: relative;
        top: auto !important;
        left: auto !important;
        order: -1;
    }
    
    /* Divider */
    .wrapper-11::before {
        content: '';
        width: 80%;
        max-width: 300px;
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
        order: 0;
    }
    
    /* Footer Columns */
    .group-b, .group-c {
        width: 100%;
        max-width: 320px;
        height: auto;
        position: relative;
        top: auto !important;
        left: auto !important;
        text-align: center;
        padding: var(--mobile-spacing-md) 0;
    }
    
    .group-b {
        order: 1;
    }
    
    .group-c {
        order: 2;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: var(--mobile-spacing-lg);
    }
    
    /* Column Headings */
    .text-5e, .text-61 {
        font-size: 18px;
        line-height: 1.4;
        width: 100%;
        height: auto;
        font-weight: 700;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: var(--mobile-spacing-sm);
        position: relative;
        left: 0;
        top: auto;
    }
    
    /* Links Container */
    .text-5f, .text-62 {
        font-size: 16px;
        line-height: 2.2;
        width: 100%;
        height: auto;
        color: #bdc3c7;
        position: relative;
        left: 0;
        top: auto;
    }
    
    /* Individual Links */
    .text-5f a, .text-62 a {
        color: #bdc3c7;
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-block;
        padding: 5px 0;
        position: relative;
    }
    
    .text-5f a:hover, .text-62 a:hover,
    .text-5f a:active, .text-62 a:active {
        color: #86d3e1;
        transform: translateX(3px);
    }
    
    /* Copyright/Bottom Section */
    .wrapper-11::after {
        content: '© 2024 Power Values. All rights reserved.';
        width: 100%;
        text-align: center;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
        font-family: Karla, var(--default-font-family);
        padding-top: var(--mobile-spacing-lg);
        margin-top: var(--mobile-spacing-md);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        order: 999;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .text-2 {
        font-size: 36px;
        line-height: 44px;
    }
    
    .text-4 {
        font-size: 18px;
        line-height: 24px;
    }
    
    .wrapper {
        width: 180px;
        height: 50px;
    }
    
    .text-5 {
        font-size: 18px;
    }
    
    .text-6 {
        font-size: 28px;
        line-height: 34px;
    }
    
    .text-7 {
        font-size: 16px;
        line-height: 20px;
    }
    
    .text-18, .text-1f, .text-2a, .text-36, .text-46 {
        font-size: 28px;
        line-height: 34px;
    }
    
    .method-title {
        font-size: 28px;
        line-height: 34px;
    }
    
    .text-2c, .text-2f, .text-37 {
        font-size: 24px;
        line-height: 30px;
    }
    
    .text-48 {
        font-size: 24px;
        line-height: 30px;
    }
    
    .menu-trigger {
        width: 50px;
        height: 50px;
        background: rgba(134, 49, 88, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    
    .menu-trigger-lines span {
        width: 24px;
        height: 2px;
    }
    
    .menu-trigger-text {
        font-size: 10px;
    }
    
    .menu-panel {
        width: 90% !important;
        max-width: 250px !important;
        min-width: 180px !important;
    }
    
    .menu-panel-inner {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .menu-item {
        font-size: 16px !important;
        line-height: 22px !important;
        padding: 10px 12px !important;
        margin: 3px 0 !important;
        min-height: 45px !important;
    }
    
    .menu-items {
        padding: 8px 12px 12px 12px !important;
    }
    
    .menu-topbar {
        height: 40px !important;
    }
    
    /* Footer adjustments for small screens */
    .wrapper-11 {
        padding: 30px 15px 20px;
        gap: 20px;
    }
    
    .pic-a {
        max-width: 100px;
    }
    
    .text-60 {
        font-size: 28px;
    }
    
    .text-63 {
        font-size: 14px;
    }
    
    .text-5e, .text-61 {
        font-size: 16px;
    }
    
    .text-5f, .text-62 {
        font-size: 15px;
        line-height: 2;
    }
    
    .wrapper-11::after {
        font-size: 12px;
        padding-top: 20px;
    }
}

/* Extra small devices */
@media (max-width: 360px) {
    .main-container {
        padding: 0;
    }
    
    .text-2 {
        font-size: 32px;
        line-height: 38px;
    }
    
    .text-6 {
        font-size: 24px;
        line-height: 30px;
    }
    
    .wrapper {
        width: 160px;
        height: 45px;
    }
    
    .text-5 {
        font-size: 16px;
    }
    
    /* Tool cards extra small fixes */
    .section {
        width: calc(100% - 20px) !important;
        margin: 20px 10px !important;
    }
    
    .wrapper-2, .box-2, .group-2, .box-4 {
        padding: 20px !important;
    }
    
    .wrapper-2 .pic-2,
    .box-2 .img-6,
    .group-2 .pic-3,
    .box-4 .pic-4 {
        width: 120px !important;
        height: 120px !important;
    }
    
    .wrapper-2 .text-9,
    .box-2 .text-d,
    .group-2 .text-11,
    .box-4 .text-15 {
        font-size: 20px !important;
    }
    
    .wrapper-2 .text-a,
    .box-2 .text-e,
    .group-2 .text-12,
    .box-4 .text-16 {
        font-size: 16px !important;
    }
    
    /* Method section extra small fixes */
    .section-4 {
        width: calc(100% - 20px) !important;
        margin: 30px 10px !important;
    }
    
    .method-item {
        padding: 15px !important;
    }
    
    .method-title {
        font-size: 18px !important;
    }
    
    .method-description {
        font-size: 14px !important;
    }
    
    /* Resource cards extra small fixes */
    .box-6 {
        width: calc(100% - 20px) !important;
        margin: 30px 10px !important;
    }
    
    .group-3, .wrapper-3, .section-5 {
        padding: 20px !important;
    }
    
    .group-3 .img-b,
    .wrapper-3 .pic-7,
    .section-5 .pic-8 {
        width: 100px !important;
        height: 100px !important;
    }
    
    .group-3 .text-21,
    .wrapper-3 .text-23,
    .section-5 .text-25 {
        font-size: 20px !important;
    }
    
    .group-3 .text-22,
    .wrapper-3 .text-24,
    .section-5 .text-26 {
        font-size: 14px !important;
    }
    
    /* Section titles extra small fixes */
    .text-18, .text-1f {
        font-size: 28px !important;
        width: calc(100% - 20px) !important;
        margin: 30px 10px 15px !important;
    }
    
    .text-19, .text-20 {
        font-size: 16px !important;
        width: calc(100% - 20px) !important;
        margin: 0 10px 20px !important;
    }
    
    .box-5 {
        width: calc(100% - 20px) !important;
        margin: 15px 10px !important;
        padding: 15px !important;
    }
    
    .box-5 .text-19, .box-5 .text-1a {
        font-size: 14px !important;
    }
}