/* ==========================================================================
           LOCAL SEO SPECIFIC STYLES
           ========================================================================== */
        
        .hero-title { font-size: clamp(2.5rem, 6vw + 1rem, 7.5rem); line-height: 1.1em; letter-spacing: -0.05em; margin-bottom: 0; }

        .text-accent { color: var(--secondaryColor) !important; }
        .bg-accent { background-color: var(--secondaryColor) !important; color: var(--whiteColor) !important; }
        .bg-black { background-color: var(--primaryColor) !important; color: var(--whiteColor) !important; }
        .bg-bg { background-color: var(--bgColor) !important; }

        .text-black-60 { color: rgba(17, 17, 17, 0.6); }
        .text-black-70 { color: rgba(17, 17, 17, 0.7); }
        .text-white-70 { color: rgba(255, 255, 255, 0.7); }

        .mono-eyebrow {
            font-family: monospace;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: var(--primaryColor);
            opacity: 0.6;
            font-weight: normal; 
        }
       .mistake-block.mistake-card:hover .mono-eyebrow, .impl-row.reveal:hover .mono-eyebrow {
            color: #fff;
        }
        .mono-eyebrow.text-accent { color: var(--secondaryColor); opacity: 1;}
        .timeline-card.tc-5 .mono-eyebrow {
            color: #fff !important;
        }
        .global-h2 {
            font-family: var(--primaryFont);
            font-size: clamp(2rem, 3.5vw + 1rem, 4.5rem);
            line-height: 1.1em;
            letter-spacing: -0.05em;
            text-transform: uppercase;
            font-weight: 900;
            margin-bottom: 0;
            overflow-wrap: break-word;
            word-wrap: break-word;
            hyphens: none;
            max-width: 65rem;
        }
    /*    .faq-title, .audit-title {
    font-family: var(--primaryFont);
    font-size: 3rem;
    line-height: 1.1em;
    letter-spacing: -0.05em;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 900;
}
@media (min-width: 768px) {
    .faq-title, .audit-title { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
    .faq-title, .audit-title { font-size: 4.5rem; }
}*/

        .global-h2-sub {
            font-size: 1.5rem;
            font-weight: 500;
            color: rgba(17, 17, 17, 0.7);
            margin-top: 1.5rem;
            max-width: 48rem;
        }

        .global-h3 {
            font-family: var(--primaryFont);
            font-size: clamp(1.5rem, 2.5vw + 1rem, 2.75rem);
            line-height: 1.1em;
            letter-spacing: -0.05em;
            text-transform: uppercase;
            font-weight: 900;
            margin-bottom: 0;
            overflow-wrap: break-word;
            word-wrap: break-word;
        }

        .global-h3-sub {
            font-size: 1.125rem;
            font-weight: 500;
            color: rgba(17, 17, 17, 0.7);
            margin-top: 1rem;
            margin-bottom: 0;
            overflow-wrap: break-word;
            word-wrap: break-word;
        }

        .btn-primary { 
            background: var(--primaryColor); color: var(--whiteColor); 
            padding: 1rem 2rem; font-family: var(--primaryFont); font-size: 12px; 
            font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; 
            transition: var(--transition-fast); display: inline-flex; 
            align-items: center; justify-content: center; text-decoration: none;
        }
        .btn-primary:hover { background: var(--secondaryColor); color: var(--whiteColor); }

        .max-w-28 { max-width: 28rem; }
        .max-w-32 { max-width: 32rem; }
        .max-w-48 { max-width: 48rem; }
        .max-w-56 { max-width: 56rem; }

        .hover-bg-black { transition: background-color 0.7s cubic-bezier(0.16, 1, 0.3, 1), color 0.7s; cursor: default; }
        .hover-bg-black:hover { background-color: var(--primaryColor) !important; color: var(--whiteColor) !important; }
        .hover-bg-black:hover .text-black-60, .hover-bg-black:hover .text-black-70, .hover-bg-black:hover .global-h3-sub { color: rgba(255, 255, 255, 0.7) !important; }
        .hover-bg-black:hover .global-h3 { color: var(--whiteColor) !important; }
        .hover-bg-black:hover .text-black { color: var(--whiteColor) !important; }

        @keyframes pulse-custom {
            0%, 100% { opacity: 1; }
            50% { opacity: .5; }
        }
        .animate-pulse-custom { animation: pulse-custom 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

        .custom-nav {
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1050; 
            background-color: rgba(255, 244, 230, 0.9);
            backdrop-filter: blur(12px);
            padding: 1.5rem 0;
            transition: all 0.3s;
        }

        .proof-item { padding: 3rem 1.5rem; text-align: center; }
        @media (min-width: 768px) { .proof-item { padding: 4rem 2rem; border-right: 1px solid var(--borderColor); } .proof-item:last-child { border-right: none; } }
        .proof-num { font-size: 2.5rem; font-family: var(--primaryFont); font-weight: 900; letter-spacing: -0.05em; line-height: 1; margin-bottom: 0.5rem; color: var(--primaryColor); }
        .proof-label { font-family: var(--secondaryFont); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(17, 17, 17, 0.6); display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0; }
        .proof-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--secondaryColor); box-shadow: 0 0 6px var(--secondaryColor); display: block; }

        /* Mistakes Section */
        .mistake-block { border-right: 1px solid var(--borderColor); border-bottom: 1px solid var(--borderColor); flex: 1 1 100%; position: relative; overflow: hidden; background-color: var(--bgColor); transition: var(--transition); }
        .mistake-header-block { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
        @media (min-width: 768px) { .mistake-header-block { flex: 1 1 100%; padding: 4rem; } }
        @media (min-width: 992px) { .mistake-header-block { flex: 1 1 66.666%; padding: 5rem; } }

        .mistake-card { min-height: 350px; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; cursor: default; }
        @media (min-width: 768px) { .mistake-card { flex: 1 1 50%; min-height: 400px; padding: 3rem; } }
        @media (min-width: 992px) { .mistake-card { flex: 1 1 33.333%; } }
        
        .mistake-card-wide { flex: 1 1 100%; }
        @media (min-width: 992px) { .mistake-card-wide { flex: 1 1 66.666%; } }

        .mistake-action { flex: 1 1 100%; min-height: 250px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; text-decoration: none; }
        @media (min-width: 768px) { .mistake-action { min-height: 400px; } }
        @media (min-width: 992px) { .mistake-action { flex: 1 1 33.333%; } }

        .mistake-card:hover, .mistake-card-wide:hover { background-color: var(--primaryColor); }
        .mistake-action:hover { background-color: var(--secondaryColor); }
        
        .mistake-bg-num { position: absolute; font-family: var(--primaryFont); font-weight: 900; line-height: 1; pointer-events: none; }
        .mistake-card .mistake-bg-num { bottom: -2.5rem; right: -1rem; font-size: 12rem; color: rgba(17,17,17,0.03); transform-origin: bottom right; transition: all 0.7s; }
        @media (min-width: 768px) { .mistake-card .mistake-bg-num { font-size: 15rem; } }
        .mistake-card:hover .mistake-bg-num { color: rgba(17,17,17,0.1); transform: scale(1.1); }
        
        .mistake-card-wide .mistake-bg-num { top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20rem; color: rgba(17,17,17,0.03); white-space: nowrap; transition: all 1s; }
        @media (min-width: 768px) { .mistake-card-wide .mistake-bg-num { font-size: 30rem; } }
        .mistake-card-wide:hover .mistake-bg-num { color: rgba(17,17,17,0.06); transform: translate(-50%, -50%) scale(1.1); }

        .mistake-title { transition: all 0.7s; color: var(--primaryColor); }
        .mistake-card:hover .mistake-title, .mistake-card-wide:hover .mistake-title { color: var(--bgColor); transform: translateY(-4px); }
        .mistake-card:hover .global-h3-sub, .mistake-card-wide:hover .global-h3-sub { color: rgba(255,244,230,0.7); }
        
        .mistake-action-title { transition: transform 0.7s, color 0.7s; z-index: 10; color: var(--primaryColor); }
        .mistake-action:hover .mistake-action-title { transform: scale(1.1); color: var(--bgColor); }
        .blueprint-grid { position: absolute; inset: 0; opacity: 0.2; transition: opacity 0.7s; background-image: linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px); background-size: 20px 20px; }
        .mistake-action:hover .blueprint-grid { opacity: 0.4; }
        .action-arrow { position: absolute; bottom: 2rem; right: 2rem; opacity: 0.5; transition: all 0.5s; color: var(--primaryColor); }
        .mistake-action:hover .action-arrow { opacity: 1; color: var(--bgColor); transform: translate(8px, 8px); }

        /* Implementation Section */
        .impl-bg-accent { position: absolute; top: -10%; right: -10%; width: 60vw; height: 60vw; background-color: rgba(255, 98, 0, 0.1); border-radius: 50%; filter: blur(140px); opacity: 0.7; pointer-events: none; }
        .impl-bg-dark { position: absolute; bottom: 25%; left: -10%; width: 50vw; height: 50vw; background-color: rgba(17, 17, 17, 0.05); border-radius: 50%; filter: blur(120px); pointer-events: none; }

        .impl-row {
            min-height: 50vh;
            border-top: 1px solid var(--borderColor);
            padding: 3rem 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: var(--transition);
            cursor: default;
            position: relative;
            overflow: hidden;
            margin-left: -1.5rem;
            margin-right: -1.5rem;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
        @media (min-width: 768px) {
            .impl-row { margin-left: -3rem; margin-right: -3rem; padding-left: 3rem; padding-right: 3rem; }
        }
        @media (min-width: 992px) {
            .impl-row { min-height: 30vh; padding: 2rem 3rem; }
        }

        .impl-row:hover { background-color: var(--primaryColor); }
        .impl-num-bg { font-family: var(--primaryFont); font-weight: 900; font-size: 8rem; line-height: 0.75; color: rgba(17,17,17,0.05); transition: color 0.7s; pointer-events: none; }
        @media (min-width: 992px) { .impl-num-bg { font-size: 10vw; } }
        .impl-row:hover .impl-num-bg { color: rgba(255,244,230,0.1); }

        .impl-title { transition: all 0.7s; margin: 0; color: var(--primaryColor); }
        .impl-row:hover .impl-title { color: var(--bgColor); transform: translateX(1rem); }
        .impl-row:hover .global-h3-sub { color: rgba(255,244,230,0.7); }

        /* Timeline / Foundation */
        .timeline-card {
            position: sticky;
            width: 100%;
            background-color: var(--bgColor);
            border: 1px solid rgba(17,17,17,0.1);
            color: var(--primaryColor);
            padding: 2rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            transition: all 0.3s ease;
        }
        @media (min-width: 768px) { .timeline-card { padding: 4rem; } }
        @media (min-width: 992px) { .timeline-card { padding: 5rem; } }
        
        .tc-1 { top: 6rem; z-index: 10; }
        .tc-2 { top: 7rem; z-index: 20; margin-top: 2rem; }
        .tc-3 { top: 8rem; z-index: 30; margin-top: 2rem; }
        .tc-4 { top: 9rem; z-index: 40; margin-top: 2rem; }
        .tc-5 { top: 10rem; z-index: 50; margin-top: 2rem; background-color: var(--secondaryColor); color: var(--bgColor); }
        .tc-5 .global-h3, .tc-5 .global-h3-sub { color: var(--bgColor) !important; }

        @media (max-width: 767px) {
            .tc-1 { top: 4rem; }
            .tc-2 { top: 4.5rem; margin-top: 1rem; }
            .tc-3 { top: 5rem; margin-top: 1rem; }
            .tc-4 { top: 5.5rem; margin-top: 1rem; }
            .tc-5 { top: 6rem; margin-top: 1rem; }
        }

        .timeline-bg-num { position: absolute; bottom: -2.5rem; right: -1rem; font-size: 12rem; font-weight: 900; color: rgba(17,17,17,0.05); line-height: 1; pointer-events: none; transition: color 0.7s; }
        @media (min-width: 992px) { .timeline-bg-num { font-size: 16rem; } }
        .timeline-card:hover .timeline-bg-num { color: rgba(255,98,0,0.1); }
        .tc-5 .timeline-bg-num { color: rgba(255,244,230,0.2); }

        /* Monolith Strategy */
        .monolith-sticky { position: sticky; top: 8rem; z-index: 10; padding-top: 1rem; }
        .framework-row {
            padding: 5rem 0;
            border-bottom: 1px solid var(--borderColor);
            position: relative;
            overflow: hidden;
            cursor: default;
        }
        @media (min-width: 768px) { .framework-row { padding: 8rem 0; } }
        
        .fw-bg-num { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 15rem; font-weight: 900; color: rgba(17,17,17,0.02); line-height: 1; transition: all 1s; pointer-events: none; z-index: 0; font-family: var(--primaryFont); }
        @media (min-width: 768px) { .fw-bg-num { font-size: 25rem; } }
        .framework-row:hover .fw-bg-num { color: rgba(255,98,0,0.05); transform: translate(-3rem, -50%); }
        .fw-glow { position: absolute; right: -8rem; top: 50%; transform: translateY(-50%); width: 24rem; height: 24rem; background-color: rgba(255,98,0,0.1); border-radius: 50%; filter: blur(80px); opacity: 0; transition: opacity 1s; z-index: 0; }
        .framework-row:hover .fw-glow { opacity: 1; }

        .fw-line { width: 3rem; height: 1px; background-color: rgba(17,17,17,0.2); margin-bottom: 1.5rem; transition: all 0.7s; }
        .framework-row:hover .fw-line { width: 6rem; background-color: var(--secondaryColor); }
        
        .fw-title { transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); margin-bottom: 1.5rem; }
        .framework-row:hover .fw-title { transform: translateX(1.5rem); }

        /* Comparison Table */
        .comp-header { border-bottom: 1px solid var(--borderColor); padding-bottom: 1.5rem; margin-bottom: 0; margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
        @media (min-width: 768px) { .comp-header { margin-left: -3rem; margin-right: -3rem; padding-left: 3rem; padding-right: 3rem; } }
        .comp-header-label { font-family: monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(17,17,17,0.4); font-weight: 700; }
        .comp-row { padding: 2.5rem 1.5rem; margin-left: -1.5rem; margin-right: -1.5rem; border-bottom: 1px solid var(--borderColor); cursor: default; }
        @media (min-width: 768px) { .comp-row { padding-left: 3rem; padding-right: 3rem; margin-left: -3rem; margin-right: -3rem; } }
        .mobile-label { display: block; font-family: monospace; font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.2em; margin-bottom: 0.5rem; }
        .mobile-label.weak { color: rgba(17,17,17,0.4); }
        .mobile-label.strong { color: var(--secondaryColor); }

        /* Pricing Area Overrides */
        .plan-row {
            padding: 3rem 1.5rem;
            margin: 0 -1.5rem;
            border-bottom: 1px solid rgba(17,17,17,0.2);
            transition: all 0.7s cubic-bezier(0.16,1,0.3,1);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        @media (min-width: 768px) { .plan-row { padding: 4rem 3rem; margin: 0 -3rem; } }
        
        .plan-bg-slide { position: absolute; inset: 0; background-color: var(--primaryColor); transform: translateY(100%); transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); z-index: 0; }
        .plan-row:not(.plan-recommended):hover .plan-bg-slide { transform: translateY(0); }
        
        .plan-recommended { background-color: rgba(17,17,17,0.05); }
        .plan-recommended:hover { background-color: var(--secondaryColor); }
        .plan-rec-glow { position: absolute; top: 50%; right: 2.5rem; transform: translateY(-50%); width: 16rem; height: 16rem; background-color: rgba(255,98,0,0.2); filter: blur(80px); transition: background-color 0.7s; z-index: 0; }
        .plan-recommended:hover .plan-rec-glow { background-color: rgba(17,17,17,0.1); }

        .plan-content { position: relative; z-index: 10; transition: transform 0.7s; }
        .plan-row:hover .plan-content { transform: translateX(1rem); }
        .plan-row:hover .plan-content-right { transform: translateX(-1rem); }
        
        .plan-title, .plan-num, .plan-desc, .plan-badge { transition: color 0.7s; }
        
        /* Non-recommended plans text turns orange on hover */
        .plan-row:not(.plan-recommended):hover .plan-title { color: var(--secondaryColor) !important; }
        .plan-row:not(.plan-recommended):hover .plan-num { color: var(--secondaryColor) !important; opacity: 0.7; }
        .plan-row:not(.plan-recommended):hover .plan-desc { color: var(--secondaryColor) !important; opacity: 0.9; }

        /* Recommended (Growth) plan text turns off-white on hover */
        .plan-recommended:hover .plan-title { color: var(--bgColor) !important; }
        .plan-recommended:hover .plan-num { color: rgba(255,244,230,0.7) !important; }
        .plan-recommended:hover .plan-desc { color: rgba(255,244,230,0.9) !important; }
        .plan-recommended:hover .plan-badge { color: rgba(255,244,230,0.8) !important; }

        /* Testimonials */
        .testi-scroll {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 1.5rem;
            padding-bottom: 4rem;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .testi-scroll::-webkit-scrollbar { display: none; }
        @media (min-width: 768px) { .testi-scroll { gap: 3rem; } }

        .testi-card {
            scroll-snap-align: center;
            flex-shrink: 0;
            width: 90vw;
            background-color: var(--bgColor);
            border: 1px solid rgba(17,17,17,0.1);
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            transition: all 0.7s cubic-bezier(0.16,1,0.3,1);
        }
        @media (min-width: 768px) { .testi-card { width: 65vw; padding: 3rem; } }
        @media (min-width: 992px) { .testi-card { width: 45vw; padding: 4rem; } }
        
        .testi-card:hover { transform: translateY(-0.5rem); box-shadow: 0 30px 60px rgba(0,0,0,0.05); }
        .testi-top-bar { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background-color: rgba(17,17,17,0.05); transition: background-color 0.7s; }
        .testi-card:hover .testi-top-bar { background-color: var(--secondaryColor); }
        .testi-quote-mark { position: absolute; top: -2.5rem; left: -1.5rem; font-family: var(--primaryFont); font-weight: 900; font-size: 12rem; line-height: 1; color: rgba(17,17,17,0.05); pointer-events: none; transition: color 0.7s; }
        @media (min-width: 992px) { .testi-quote-mark { font-size: 15rem; } }
        .testi-card:hover .testi-quote-mark { color: rgba(255,98,0,0.1); }

        /* FAQ Accordion */
        /*.faq-item { border-bottom: 1px solid var(--borderColor); cursor: pointer; position: relative; z-index: 20; transition: background-color 0.3s; }
        .faq-item:hover { background-color: rgba(17, 17, 17, 0.02); }
        .faq-button { width: 100%; text-align: left; padding: 2rem 0; display: flex; justify-content: space-between; align-items: center; border: none; background: transparent; }
        .faq-button:focus { outline: none; }
        .faq-q { transition: color 0.3s; }
        .faq-item:hover .faq-q { color: var(--secondaryColor); }
        .faq-item.active .faq-q { color: var(--secondaryColor); }
        .faq-icon { font-family: monospace; font-size: 2rem; font-weight: 300; color: rgba(17,17,17,0.4); transition: color 0.3s; flex-shrink: 0; }
        .faq-item:hover .faq-icon { color: var(--secondaryColor); }
        .faq-item.active .faq-icon { color: var(--secondaryColor); }
        .faq-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; }
        .faq-item.active .faq-content { padding-bottom: 2.5rem; }

        /* ==========================================================================
   faq.css — FAQ accordion section
   ========================================================================== */
.faq-sticky { position: sticky; top: 8rem; padding-right: 1rem; }
@media (min-width: 768px) { .faq-sticky { padding-right: 2rem; } }

.faq-item { border-top: 1px solid var(--borderColor); }
.faq-item:last-child { border-bottom: 1px solid var(--borderColor); }
.faq-button { width: 100%; text-align: left; padding: 2rem 0; display: flex; justify-content: space-between; align-items: center; }
.faq-button:focus { outline: none; }
.faq-q {
    transition: color 0.3s;
    font-size: 1.25rem;
    text-transform: capitalize;
    letter-spacing: -0.02em;
    transition: color 0.3s;
    font-weight: 300;
}
@media (min-width: 768px) { .faq-q { font-size: 1.25rem; } }
.faq-button:hover .faq-q { color: var(--secondaryColor); }
.faq-icon { font-family: monospace; font-size: 1.25rem; color: #11111166; transition: color 0.3s; }
.faq-icon.active { color: var(--secondaryColor); }
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; }
.faq-a { padding-bottom: 2rem; color: #11111199; font-size: 14px; line-height: 1.65; max-width: 42rem; }
/* =========================================
   TESTIMONIAL SLIDER FIX
   HTML unchanged
========================================= */

#testimonials-container.testi-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 30px;
    width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    cursor: grab;

    scrollbar-width: none;
}

#testimonials-container.testi-scroll::-webkit-scrollbar {
    display: none;
}

#testimonials-container.testi-scroll .testi-card {
    flex: 0 0 calc(75% - 15px) !important;
    min-width: calc(75% - 15px) !important;

    scroll-snap-align: start;

    box-sizing: border-box;
}

/* Tablet */
@media (max-width: 991px) {

    #testimonials-container.testi-scroll {
        gap: 20px;
    }

    #testimonials-container.testi-scroll .testi-card {
        flex: 0 0 85% !important;
        min-width: 85% !important;
    }
}

/* Mobile */
@media (max-width: 767px) {

    #testimonials-container.testi-scroll {
        gap: 15px;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #testimonials-container.testi-scroll .testi-card {
        flex: 0 0 92% !important;
        min-width: 92% !important;
    }
}
/* ==========================================================================
   END: faq.css
   ========================================================================== */

        /* Premium AI Ecosystem Redesign */
        .ai-list-container { display: flex; flex-direction: column; }
        .ai-list-container:hover .ai-item { opacity: 0.15; transform: scale(0.98); }
        .ai-item { transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1); padding: 5rem 0; cursor: default; border-bottom: 1px solid var(--borderColor); transform-origin: left center; }
        .ai-item:first-child { border-top: 1px solid var(--borderColor); }
        .ai-list-container .ai-item:hover { opacity: 1; transform: scale(1) translateX(2rem); border-color: var(--secondaryColor); }
        .ai-item:hover .ai-item-num { color: var(--secondaryColor); }
        .ai-item:hover .ai-item-title { color: var(--secondaryColor); }
        .ai-item-num { font-family: monospace; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(17,17,17,0.4); margin-bottom: 1.5rem; display: block; transition: color 0.5s; }
        .ai-item-title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-family: var(--primaryFont); font-weight: 900; text-transform: uppercase; color: var(--primaryColor); margin-bottom: 1rem; transition: color 0.5s; line-height: 1.1; letter-spacing: -0.03em; }
        .ai-item-desc { font-size: 1.125rem; color: rgba(17,17,17,0.7); font-weight: 300; line-height: 1.6; max-width: 32rem; transition: color 0.5s; }

        /* Ultra-Premium Bento Grid for AI Section */
        .ai-bento-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            margin-top: 5rem;
        }
        @media (min-width: 768px) {
            .ai-bento-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (min-width: 1024px) {
            /* 6-column grid to perfectly support 2-box and 3-box rows */
            .ai-bento-grid {
                grid-template-columns: repeat(6, 1fr);
                grid-auto-rows: minmax(350px, auto);
            }
            .ai-col-half { grid-column: span 3; } /* 2 boxes per row */
            .ai-col-third { grid-column: span 2; } /* 3 boxes per row */
        }

        .ai-bento-card {
            background-color: var(--bgColor);
            border: 1px solid rgba(17,17,17,0.1);
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 1;
            cursor: default;
        }
        @media (min-width: 768px) {
            .ai-bento-card { padding: 4rem; }
        }
        
        .ai-bento-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: var(--secondaryColor);
            z-index: -1;
            transform: scaleY(0);
            transform-origin: bottom;
            transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .ai-bento-card:hover {
            transform: translateY(-8px);
            border-color: var(--secondaryColor);
            box-shadow: 0 40px 80px rgba(17,17,17,0.08);
        }
        
        .ai-bento-card:hover::before {
            transform: scaleY(1);
        }

        .ai-bento-num {
            font-family: monospace;
            font-size: 14px;
            font-weight: 700;
            color: rgba(17,17,17,0.4);
            letter-spacing: 0.2em;
            margin-bottom: 2rem;
            display: block;
            transition: color 0.7s;
        }

        .ai-bento-title {
            font-family: var(--primaryFont);
            text-transform: uppercase;
            color: var(--primaryColor);
            line-height: 1.1;
            margin-bottom: 1.5rem;
            letter-spacing: -0.02em;
            transition: color 0.7s;
            overflow-wrap: break-word;
            word-wrap: break-word;
        }

        .ai-bento-text {
            font-size: 1.125rem;
            color: rgba(17,17,17,0.7);
            font-weight: 300;
            line-height: 1.6;
            margin: 0;
            max-width: 28rem;
            transition: color 0.7s;
            overflow-wrap: break-word;
            word-wrap: break-word;
        }

        /* Hover State text colors */
        .ai-bento-card:hover .ai-bento-num { color: rgba(255,255,255,0.7); }
        .ai-bento-card:hover .ai-bento-title { color: var(--whiteColor); }
        .ai-bento-card:hover .ai-bento-text { color: rgba(255,255,255,0.9); }

        /* Massive Background Number */
        .ai-bento-bg-num {
            position: absolute;
            top: 2rem;
            right: 2rem;
            font-family: var(--primaryFont);
            font-weight: 900;
            font-size: 8rem;
            line-height: 1;
            color: rgba(17,17,17,0.03);
            pointer-events: none;
            transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: -1;
        }
        @media (min-width: 768px) {
            .ai-bento-bg-num { font-size: 10rem; top: -1rem; right: -1rem; }
        }
        .ai-bento-card:hover .ai-bento-bg-num {
            color: rgba(255,255,255,0.15);
            transform: scale(1.1);
        }

        /* NEW PREMIUM MEGA-LIST DESIGN */
        .premium-ind-list { display: flex; flex-direction: column; width: 100%; margin-top: 2rem; }
        .premium-ind-row { 
            position: relative; padding: 3.5rem 1.5rem; margin: 0 -1.5rem; border-top: 1px solid var(--borderColor); 
            display: flex; align-items: center; justify-content: space-between;
            overflow: hidden; cursor: default; transition: all 0.7s cubic-bezier(0.16,1,0.3,1);
        }
        @media (min-width: 768px) {
            .premium-ind-row { padding: 3.5rem 3rem; margin: 0 -3rem; }
        }
        .premium-ind-row:last-child { border-bottom: 1px solid var(--borderColor); }
        
        /* Sweep-in Background Animation */
        .premium-ind-bg {
            position: absolute; inset: 0; background-color: var(--primaryColor);
            transform: scaleY(0); transform-origin: top; z-index: 0;
            transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
        }
        .premium-ind-row:hover .premium-ind-bg { transform: scaleY(1); transform-origin: bottom; }
        
        .premium-ind-content { position: relative; z-index: 1; display: flex; align-items: center; width: 100%; }
        
        /* Numbering */
        .premium-ind-num { 
            font-family: monospace; font-size: 14px; font-weight: 700; width: 10%; 
            color: rgba(17,17,17,0.4); transition: color 0.7s; letter-spacing: 0.1em;
        }
        .premium-ind-row:hover .premium-ind-num { color: var(--secondaryColor); }
        
        /* Massive Typography */
        .premium-ind-title-wrapper { width: 45%; display: flex; align-items: center; }
        .premium-ind-title { 
            font-family: var(--primaryFont);
            text-transform: uppercase; margin: 0; line-height: 0.9;
            color: var(--primaryColor); transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), color 0.7s;
            letter-spacing: -0.03em;
        }
        .premium-ind-row:hover .premium-ind-title { color: var(--bgColor); transform: translateX(1.5rem); }
        
        /* Description */
        .premium-ind-desc { 
            width: 40%; font-size: 1.125rem; font-weight: 300; color: rgba(17,17,17,0.6); 
            margin: 0; transition: color 0.7s, transform 0.7s; padding-left: 2rem; line-height: 1.6;
        }
        .premium-ind-row:hover .premium-ind-desc { color: rgba(255,244,230,0.7); transform: translateX(1rem); }
        
        /* Hover Arrow Icon */
        .premium-ind-icon {
            width: 5%; display: flex; justify-content: flex-end; color: var(--primaryColor);
            opacity: 0; transform: translateX(-2rem); transition: all 0.7s cubic-bezier(0.16,1,0.3,1);
        }
        .premium-ind-row:hover .premium-ind-icon { opacity: 1; transform: translateX(0); color: var(--secondaryColor); }

        /* Mobile Responsiveness */
        @media (max-width: 991px) {
            .premium-ind-row { padding: 2.5rem 1.5rem; }
            .premium-ind-content { flex-direction: column; align-items: flex-start; }
            .premium-ind-num { width: 100%; margin-bottom: 1rem; }
            .premium-ind-title-wrapper { width: 100%; margin-bottom: 1rem; }
            .premium-ind-desc { width: 100%; padding-left: 0; margin-bottom: 1rem; }
            .premium-ind-icon { width: 100%; justify-content: flex-start; transform: translateX(-1rem); }
            .premium-ind-row:hover .premium-ind-title { transform: translateX(0.5rem); }
        .premium-ind-row:hover .premium-ind-desc { transform: translateX(0.5rem); }
    }

/* ==========================================================================
   audit.css — Audit request form section
   ========================================================================== */
.audit-section { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.audit-bg-texture {
    position: absolute; inset: 0; z-index: 0; opacity: 0.4; pointer-events: none;
    background-image: linear-gradient(to right, #1111110D 1px, transparent 1px), linear-gradient(to bottom, #1111110D 1px, transparent 1px);
    background-size: 6rem 6rem;
}

.audit-form-card {
    background-color: var(--primaryColor); color: var(--bgColor);
    padding: 2rem; position: relative; cursor: default;
    box-shadow: 0 25px 50px -12px #00000040;
    transition: transform 0.7s ease;
}
@media (min-width: 768px) { .audit-form-card { padding: 3rem; } }
@media (min-width: 1024px) { .audit-form-card { padding: 4rem; } }
.audit-form-card:hover { transform: translateY(-0.5rem); }
.audit-accent-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background-color: var(--secondaryColor); transform-origin: left;
    transform: scaleX(0); transition: transform 0.7s ease-in-out;
}
.audit-form-card:hover .audit-accent-line { transform: scaleX(1); }

.audit-desc { font-size: 1.125rem; color: #FFF4E6B3; font-weight: 500; line-height: 1.65; margin-bottom: 3rem; }

.form-group { margin-bottom: 2.5rem; }
.form-label { font-family: monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: #FFF4E666; display: block; margin-bottom: 0.75rem; }
.form-input {
    width: 100%; background: transparent; border: none; border-bottom: 1px solid #FFF4E633;
    color: var(--bgColor); padding: 1rem 0; font-family: var(--secondaryFont); font-size: 1.25rem; border-radius: 0;
    transition: border-color 0.3s ease;
}
@media (min-width: 768px) { .form-input { font-size: 1.5rem; } }
.form-input:focus { outline: none; border-color: var(--secondaryColor); }
.form-input::placeholder { color: #FFF4E633; }

.btn-submit {
    width: 100%; background-color: var(--secondaryColor); color: var(--whiteColor);
    padding: 1.5rem; font-size: 14px; font-weight: 900; letter-spacing: 0.1em;
    text-transform: uppercase; transition: var(--transition); display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem;
}
.btn-submit:hover { background-color: var(--whiteColor); color: var(--primaryColor); }
.btn-submit.submitted { background-color: var(--whiteColor); color: var(--primaryColor); }
/* ==========================================================================
   END: audit.css
   ========================================================================== */