/* =============================================
           ROOT VARIABLES
           Single source of truth for navbar height — used by hero
           padding to clear the fixed nav. Adjusted per breakpoint
           so phones don't get desktop spacing.
           ============================================= */
        :root {
            --navbar-h: 104px;      /* fallback only — navbar-loader.js measures the real height at runtime */
        }
        @media (max-width: 768px) {
            :root { --navbar-h: 88px; }   /* fallback only — measured at runtime */
        }

        /* =============================================
           HORIZONTAL OVERFLOW GUARD
           Prevents the page from scrolling sideways on mobile if any
           descendant element accidentally exceeds the viewport width.
           ============================================= */
        html, body {
            overflow-x: hidden;     /* fallback for older browsers */
            overflow-x: clip;       /* preferred — doesn't break position: sticky */
            max-width: 100%;
        }

        /* =============================================
           MOBILE RESPONSIVE STYLES (Safe - doesn't break carousel)
           ============================================= */
        
        /* Tablet - 992px */
        @media (max-width: 992px) {
            /* Hero is now content-driven (no min-height) and uses
               --navbar-h variable for clearance, so no per-breakpoint
               override is needed. Fluid type handles font sizing too. */

            .hero-actions {
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 12px !important;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 20px !important;
            }
            
            .features-grid,
            .benefits-grid,
            .products-grid,
            .solutions-grid,
            .who-list,
            .different-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 20px !important;
            }
            
            .section-title, h2 {
                font-size: 2rem !important;
            }
            
            .footer-content {
                flex-direction: column !important;
                gap: 2rem !important;
            }
            
            .footer-links {
                flex-direction: column !important;
                gap: 1.5rem !important;
            }
            
            .footer-column:not(:last-child)::after {
                display: none !important;
            }
        }
        
        /* Mobile Landscape - 768px */
        @media (max-width: 768px) {
            /* Hero layout (height, padding, navbar clearance) is now
               handled by the base .hero rule + --navbar-h variable.
               Only mobile-specific tweaks below: text alignment and
               full-width stacked buttons. */
            .hero {
                text-align: center !important;
                /* Defensively override any height/min-height from the
                   external main.css that might prevent the section
                   from growing with its content. */
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
            }

            /* Defensively ensure the hero's navy background fills the
               full hero height, even when slide content makes the hero
               taller than main.css's default. */
            .hero .hero-background {
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100% !important;
                height: 100% !important;
            }

            /* On mobile, the hero section needs to GROW with its
               in-flow children (carousel grid + dots) so the navy
               background covers the full slide content and the
               next section starts below it. The previous attempt
               of `overflow: visible` was wrong — that let content
               extend past the box visually but the box itself
               didn't grow, so the next section overlapped slide
               content. Removing the override here lets the hero
               size naturally to its content. */

            /* Dots move from absolute (desktop) to in-flow (mobile) so
               they sit reliably AFTER the slide content, regardless of
               how tall the slide grows when text wraps to many lines.
               Desktop's `position: absolute; bottom: 30px` gets overridden;
               dots become a normal centered row below the buttons. */
            .carousel-dots {
                position: static !important;
                transform: none !important;
                left: auto !important;
                bottom: auto !important;
                margin-top: 1.5rem !important;
                justify-content: center !important;
            }

            /* On mobile, drop the per-row minimum heights from the grid.
               The desktop minimums (50/110/90/60px) create a consistent
               vertical rhythm across slides, but on phones text wraps so
               much more that the "consistent position" benefit disappears
               anyway — and the minimums just waste vertical space.
               Each row becomes content-tight; row-gap is the only spacing. */
            .hero-slide .hero-content {
                grid-template-rows: auto auto auto auto !important;
                row-gap: 1rem !important;
            }

            /* Badge sizes to its text rather than spanning the row width.
               Grid item with justify-self: center so it stays centered
               under text-align: center. */
            .hero-slide .hero-badge {
                justify-self: center !important;
                display: inline-flex !important;
                width: auto !important;
                max-width: 100% !important;
            }

            /* Buttons sit side-by-side on phones (not stacked) so they
               share a single row. Smaller font/padding fits two CTAs
               within typical phone widths. Flex-wrap is the safety net:
               on very narrow viewports (e.g. iPhone SE at 320px) where
               two buttons + gap exceed the row, they wrap gracefully
               to two rows rather than overflow horizontally. */
            .hero-actions {
                flex-direction: row !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
                gap: 10px !important;
            }

            .hero-actions .btn {
                width: auto !important;
                max-width: none !important;
                flex: 1 1 auto !important;
                /* Keep buttons readable — won't shrink below 130px
                   even if text is short. Below this, content gets
                   cramped or the icon collides with the label. */
                min-width: 130px !important;
                padding: 10px 16px !important;
                font-size: 0.85rem !important;
                justify-content: center !important;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            .features-grid,
            .benefits-grid,
            .products-grid,
            .solutions-grid,
            .who-list,
            .different-grid {
                grid-template-columns: 1fr !important;
            }
            
            .section {
                padding: 60px 20px !important;
            }
            
            .section-title, h2 {
                font-size: 1.75rem !important;
            }
            
            .container {
                padding: 0 16px !important;
            }
            
            .footer-bottom {
                flex-direction: column !important;
                gap: 1rem !important;
                text-align: center !important;
            }
            
            .footer-legal {
                flex-wrap: wrap !important;
                justify-content: center !important;
                gap: 12px !important;
            }
        }
        
        /* Mobile Portrait - 480px */
        @media (max-width: 480px) {
            /* Hero layout (height, padding, navbar clearance) is handled
               by base .hero rule + --navbar-h variable. Fluid type sizes
               handle font-size scaling. Only badge tweak retained — it's
               specifically a smaller-than-fluid override for tight phones. */
            .hero-badge {
                font-size: 0.75rem !important;
                padding: 6px 12px !important;
            }
            
            .stats-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 12px !important;
            }
            
            .stat-number {
                font-size: 1.5rem !important;
            }
            
            .stat-label {
                font-size: 0.75rem !important;
            }
            
            .section-title, h2 {
                font-size: 1.5rem !important;
            }
            
            .section-description {
                font-size: 0.875rem !important;
            }
            
            .btn {
                padding: 12px 20px !important;
                font-size: 0.9rem !important;
            }
            
            /* iOS zoom prevention */
            input, select, textarea {
                font-size: 16px !important;
            }
        }

        /* Hero Carousel Styles - MEASUREMENTS FROM SOLUTIONS.HTML BENCHMARK */

        /* ════════════════════════════════════════════════════════════
           HERO — STRUCTURAL REWRITE (grid-stacking architecture)
           
           PROBLEM WE'RE SOLVING:
           Old hero used position:absolute slides + min-height on the
           parent. That caused two persistent bugs:
             1. Slides ignored the parent's padding-top and align-items,
                so navbar overlap and per-breakpoint padding hacks
                were endless.
             2. Hero's min-height didn't match content height — short
                slides left empty space (desktop gap), tall slides
                overflowed (mobile cut-off buttons).
           
           NEW APPROACH:
           - Hero is no longer a flexbox; .hero-carousel is a CSS Grid
             with one named cell ("stack").
           - All slides occupy that same cell via grid-area: stack.
             They're stacked visually but live in normal flow, so the
             grid cell sizes to whichever slide is tallest.
           - Hero height = navbar clearance + tallest slide + bottom
             padding. No min-height. No empty space, no overflow.
           - Slide transitions are opacity fades (no transform sliding).
             Apple/Stripe/Linear use this exact pattern for the same
             content-height-honesty reason.
           ════════════════════════════════════════════════════════════ */
        .hero {
            position: relative;
            overflow: hidden;
            /* Override any base CSS that might apply flex + align-items: center
               to .hero (would vertically center slide content and create the
               "gap at top" / "buttons drift into dot zone" symptoms). Force
               block layout — the carousel grid handles internal stacking. */
            display: block !important;
            align-items: initial !important;
            justify-content: initial !important;
            /* Navbar clearance + symmetric breathing room. No min-height. */
            padding-top: calc(var(--navbar-h) + 2rem);
            /* Reserve a clear zone at the bottom for the dot indicators
               so slide buttons never overlap them. ~88-128px is dot-row
               (10px) + comfortable padding above/below. */
            padding-bottom: clamp(5.5rem, 8vw, 8rem);
        }

        /* Diagonal Overlay - Shifted Right */
        .diagonal-overlay {
            clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 20% 100%) !important;
        }

        .hero .container {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }

        /* The carousel is a 1-cell grid where all slides stack.
           Grid cell auto-sizes to the tallest slide's content.
           align-content + justify-content on start anchors the cell
           contents to the top-left so shorter slides don't visually
           "float" in the middle of the cell. */
        .hero-carousel {
            position: relative;
            width: 100%;
            display: grid;
            grid-template-areas: "stack";
            grid-template-columns: 1fr;
            align-content: start;
        }

        /* Slides occupy the same grid cell — stacked visually, but in
           normal flow so they each contribute to the cell's sizing.
           align-self: start anchors each slide to the top of the cell;
           shorter slides have natural unused space below their content
           rather than floating centered with gaps above and below. */
        .hero-slide {
            grid-area: stack;
            align-self: start;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.6s ease, visibility 0s linear 0.6s;
            /* No position:absolute, no top:0, no transform.
               Slide is a normal grid-area participant. */
        }

        /* ─── 4-row grid for slide content ─────────────────────────
           Each slide internally uses grid-template-rows so that:
             Row 1 = badge area (small pill at top)
             Row 2 = headline (the big H1)
             Row 3 = description (body paragraph)
             Row 4 = buttons (CTA actions)
           Each row uses minmax(MIN, auto) so it never collapses below
           a sensible minimum but freely grows if content needs more
           vertical room. This keeps badge/title/desc/buttons in fixed
           visual positions across slides — no jumping when slides
           switch — while letting any slide's content expand naturally
           if it's longer.

           The dots sit OUTSIDE this grid, in .hero's bottom padding,
           so they're navigation chrome rather than slide content. */
        .hero-slide .hero-content {
            padding-top: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            width: 100%;
            max-width: 100%;
            /* Override any inherited flex centering from main.css */
            display: grid !important;
            grid-template-rows:
                minmax(50px,  auto)   /* badge */
                minmax(110px, auto)   /* title */
                minmax(90px,  auto)   /* description */
                minmax(60px,  auto);  /* buttons */
            row-gap: 1.25rem;
            align-items: start !important;
            justify-content: start !important;
        }

        /* Each child anchors itself to the start of its row so the row
           grows downward if content is tall — never centers within. */
        .hero-slide .hero-badge,
        .hero-slide .hero-title,
        .hero-slide .hero-description,
        .hero-slide .hero-actions {
            margin-top: 0;
            margin-bottom: 0;
            align-self: start;
        }

        /* Note: margin-bottom removed below — vertical rhythm now comes
           from the grid's row-gap on .hero-content. Each child sits flush
           in its row. */
        /* Badge sizes to its text content, not the row width.
           On desktop it sits at the start (left) of the row;
           the mobile media query overrides justify-self to center
           since mobile uses text-align: center. */
        .hero-slide .hero-badge {
            display: inline-flex;
            width: auto;
            max-width: 100%;
            justify-self: start;
            /* row 1 */
        }

        .hero-slide .hero-title {
            line-height: 1.2;
            /* Fluid type — scales smoothly across phones, tablets, desktops.
               Min: 1.6rem (small phone) · Max: 3rem (desktop) */
            font-size: clamp(1.6rem, 4.2vw, 3rem);
            /* row 2 */
        }

        .hero-slide .hero-description {
            font-size: clamp(0.95rem, 1.4vw, 1.15rem);
            line-height: 1.7;
            max-width: 800px;
            /* row 3 */
        }

        /* Active slide is visible and interactive. Use no-delay visibility
           so the slide becomes interactable immediately as it fades in. */
        .hero-slide.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition: opacity 0.6s ease, visibility 0s linear 0s;
        }

        /* Exit/enter classes (used by ModularCarousel JS) — all collapse
           to opacity fade. The previous transform-translateX slide-in
           animation required absolute positioning; we trade that for
           layout correctness. */
        .hero-slide.exit-left,
        .hero-slide.exit-right,
        .hero-slide.enter-left,
        .hero-slide.enter-right {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.6s ease, visibility 0s linear 0.6s;
        }

        /* Carousel Navigation Dots — sit at the bottom of the hero,
           outside the carousel grid so they don't influence sizing. */
        .carousel-dots {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 12px;
            z-index: 200;
        }

        .carousel-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            border: 2px solid rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .carousel-dot.active {
            background: #FFC000;
            border-color: #FFC000;
            width: 32px;
            border-radius: 5px;
        }

        .carousel-dot:hover {
            background: rgba(255, 255, 255, 0.5);
        }

        /* ===== DOKRUNCH VIDEO DEMO SECTION STYLES ===== */
        .video-demo-section {
            padding: 100px 0;
            background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
            position: relative;
            overflow: hidden;
        }

        .video-demo-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
        }

        /* Video Container as Float/Inset */
        .video-inset {
            float: left;
            width: 55%;
            margin: 0 40px 30px 0;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(6, 28, 57, 0.25);
            background: #ffffff;
            border: 3px solid #e2e8f0;
            position: relative;
        }

        .demo-video {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Content flows around video */
        .content-flow {
            overflow: hidden;
        }

        .platform-branding {
            display: inline-flex;
            align-items: center;
            gap: 16px;
            padding: 16px 24px;
            background: linear-gradient(135deg, rgba(6, 28, 57, 0.05), rgba(255, 192, 0, 0.05));
            border-radius: 12px;
            border: 2px solid rgba(6, 28, 57, 0.1);
            margin-bottom: 24px;
        }

        .platform-logo-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .platform-name {
            font-size: 1.75rem;
            font-weight: 900;
            font-family: var(--aurus-font, "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
            color: #061C39;
            line-height: 1;
        }

        .platform-name .dokrunch {
            background: linear-gradient(135deg, #061C39 0%, #FFC000 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .platform-tagline {
            font-size: 0.75rem;
            color: #64748b;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .lead {
            font-size: 1.2rem;
            font-weight: 500;
            color: #061C39;
            margin-bottom: 1.5rem;
            line-height: 1.7;
        }

        .video-demo-wrapper p {
            font-size: 1.05rem;
            color: #475569;
            line-height: 1.8;
            margin-bottom: 1.25rem;
        }

        .video-demo-wrapper p strong {
            color: #061C39;
            font-weight: 600;
        }

        .video-demo-wrapper h2 {
            font-size: 2.5rem;
            color: #061C39;
            font-weight: 900;
            margin: 3rem 0 2rem 0;
            font-family: var(--aurus-font, "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
        }

        .video-demo-wrapper h2 .highlight {
            background: linear-gradient(135deg, #FFC000 0%, #e6ac00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .feature-list {
            margin-top: 3rem;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .feature-item {
            display: flex;
            gap: 1.5rem;
            align-items: flex-start;
        }

        .feature-icon {
            font-size: 2.5rem;
            line-height: 1;
            flex-shrink: 0;
        }

        .feature-content h4 {
            font-size: 1.25rem;
            color: #061C39;
            font-weight: 700;
            margin-bottom: 0.5rem;
            font-family: var(--aurus-font, "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
        }

        .feature-content p {
            font-size: 1rem;
            color: #64748b;
            line-height: 1.7;
            margin: 0;
        }

        .integration-badges {
            margin-top: 3rem;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
        }

        .integration-badge {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1.5rem;
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            color: #475569;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .integration-badge:hover {
            border-color: #FFC000;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 192, 0, 0.2);
        }

        .integration-badge svg {
            width: 20px;
            height: 20px;
            color: #FFC000;
        }

        /* Stats Banner Styles */
        .stats-banner {
            padding-top: 2.5rem !important;
            padding-bottom: 2.5rem !important;
            background: white;
            border-top: 1px solid #e2e8f0;
            border-bottom: 1px solid #e2e8f0;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 3rem;
            max-width: 1000px;
            margin: 0 auto;
        }

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

        .stat-number {
            font-size: 3rem;
            font-weight: 900;
            color: #061C39;
            margin-bottom: 0.5rem;
            font-family: var(--aurus-font, "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
            background: linear-gradient(135deg, #061C39 0%, #FFC000 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .stat-label {
            font-size: 1rem;
            color: #64748b;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Section Spacing and Contrast */
        .what-is-section,
        .benefits-section {
            border-bottom: 1px solid #e2e8f0;
        }

        .who-section,
        .different-section {
            position: relative;
        }

        .who-section::before,
        .different-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(6, 28, 57, 0.2), transparent);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .video-inset {
                float: none;
                width: 100%;
                margin: 0 0 2rem 0;
            }
            
            .video-demo-wrapper h2 {
                font-size: 2rem;
            }
            
            .platform-name {
                font-size: 1.5rem;
            }
            
            .feature-item {
                flex-direction: column;
                gap: 1rem;
            }
        }

/* Footer Styles */
.footer {
    background: linear-gradient(135deg, #061C39 0%, #0a2849 100%);
    padding: 60px 0 30px;
    color: #e2e8f0;
    font-family: var(--aurus-font, "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.footer-brand {
    flex: 1;
    min-width: 250px;
}

.footer-brand p {
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-top: 15px;
}

.footer-logo {
    max-width: 150px;
    margin-bottom: 20px;
}

/* Social Icons */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 192, 0, 0.1);
    border-radius: 8px;
    color: #FFC000;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: #FFC000;
    color: #061C39;
    transform: translateY(-2px);
}

.social-link svg {
    width: 18px;
    height: 18px;
}

/* Footer columns in single row with dividers */
.footer-links {
    display: flex;
    flex: 1;
    gap: 40px;
    align-items: flex-start;
}

.footer-column {
    flex: 1;
    position: relative;
}

.footer-column:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(226, 232, 240, 0.15);
}

.footer-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFC000;
    margin-bottom: 1rem;
    font-family: var(--aurus-font, "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
}

.footer-column a {
    display: block;
    color: #cbd5e1;
    text-decoration: none;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: #FFC000;
    padding-left: 5px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    font-size: 0.85rem;
}

.footer-legal {
    display: flex;
    gap: 25px;
}

.footer-legal a {
    color: #cbd5e1;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: #FFC000;
}

.footer-copyright {
    color: #94a3b8;
}


/* Problem Section Styles */
.problem-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #041526 0%, #061C39 50%, #0a2849 100%);
    color: white;
    position: relative;
}

.problem-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 192, 0, 0.5), transparent);
}

.problem-section h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    font-family: var(--aurus-font, "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
    text-align: center;
}

.problem-section .highlight-text {
    color: #FFC000;
}

.problem-section .hero-description {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 1.5rem;
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.problem-item {
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 192, 0, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.problem-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 192, 0, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(255, 192, 0, 0.15);
}

.problem-item h4 {
    color: #FFC000;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.problem-item p {
    color: #cbd5e1;
    line-height: 1.7;
}

.problem-section .btn {
    margin-top: 1rem;
}

/* What Is Section */
.what-is-section {
    padding: 60px 0;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.what-is-section h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 2rem;
    color: #061C39;
    font-family: var(--aurus-font, "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
    text-align: center;
}

.what-is-section .highlight-text {
    color: #FFC000;
}

.what-is-section p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 1.5rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.what-is-section p:last-of-type {
    font-weight: 600;
    font-size: 1.3rem;
    color: #061C39;
    margin-top: 2rem;
    text-align: center;
}

.what-is-section .btn {
    margin-top: 1rem;
}

/* Who Section */
.who-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
    position: relative;
}

.who-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 28, 57, 0.2), transparent);
}

.who-section h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: #061C39;
    font-family: var(--aurus-font, "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
    text-align: center;
}

.who-section .highlight-text {
    color: #FFC000;
}

.who-section .hero-description {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 1.5rem;
}

.who-list {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.who-item {
    padding: 1.75rem;
    background: white;
    border-radius: 12px;
    border-left: 4px solid #FFC000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.who-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(255, 192, 0, 0.15);
}

.who-item h4 {
    color: #061C39;
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.who-item p {
    color: #64748b;
    line-height: 1.7;
    margin: 0;
    font-size: 1.05rem;
}

/* Benefits Section */
.benefits-section {
    padding: 60px 0;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.benefits-section h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: #061C39;
    font-family: var(--aurus-font, "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
    text-align: center;
}

.benefits-section .section-subtitle {
    font-size: 1.3rem;
    color: #061C39;
    margin-bottom: 0.5rem;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(135deg, #061C39 0%, #FFC000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.benefits-section > .container > p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2rem;
    color: #475569;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.benefit-card {
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    border-color: #FFC000;
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(255, 192, 0, 0.15);
}

.benefit-card h4 {
    color: #061C39;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.benefit-card p {
    color: #64748b;
    line-height: 1.7;
    margin: 0;
    font-size: 1.05rem;
}

.roi-stats {
    margin-top: 2.5rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, #041526 0%, #061C39 50%, #0a2849 100%);
    border-radius: 16px;
    color: white;
    box-shadow: 0 20px 40px rgba(6, 28, 57, 0.3);
}

.roi-stats h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #FFC000;
    text-align: center;
}

.roi-stats > p {
    text-align: center;
}

.roi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.roi-item {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 192, 0, 0.2);
    transition: all 0.3s ease;
}

.roi-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
}

.roi-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: #FFC000;
    margin-bottom: 0.5rem;
}

.roi-label {
    font-size: 1rem;
    color: #cbd5e1;
}

/* Different Section */
.different-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
    position: relative;
}

.different-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 28, 57, 0.2), transparent);
}

.different-section h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: #061C39;
    font-family: var(--aurus-font, "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
    text-align: center;
}

.different-section .section-subtitle {
    font-size: 1.3rem;
    color: #061C39;
    margin-bottom: 0.5rem;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(135deg, #061C39 0%, #FFC000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.different-section > .container > p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2rem;
    color: #475569;
}

.different-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.different-card {
    padding: 2rem;
    background: white;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.different-card:hover {
    border-color: #FFC000;
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(255, 192, 0, 0.15);
}

.different-card h4 {
    color: #061C39;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.different-card p {
    color: #64748b;
    line-height: 1.7;
    margin: 0;
    font-size: 1.05rem;
}

.tagline-box {
    margin-top: 2.5rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, #041526 0%, #061C39 50%, #0a2849 100%);
    border-radius: 16px;
    text-align: center;
    color: white;
    box-shadow: 0 20px 40px rgba(6, 28, 57, 0.3);
}

.tagline-box h3 {
    font-size: 2rem;
    color: #FFC000;
    margin-bottom: 1rem;
}

.tagline-box p {
    font-size: 1.2rem;
    color: #cbd5e1;
    line-height: 1.7;
}