/* =========================================

   PEPPEREFFECT DARK MODE SYSTEM v1.3 (CLEAN)

   ========================================= */



:root {

    /* Core Palette */

    --primary: #19A27A;

    --primary-hover: #148563;

    --bg-dark: #0F1720;        

    --bg-card: rgba(34, 47, 62, 0.6);

    --border-color: rgba(255, 255, 255, 0.08);

    

    /* Text */

    --text-main: #FFFFFF;

    --text-muted: #94A3B8;

    

    /* Spacing & UI */

    --radius-lg: 16px;

    --radius-sm: 8px;

    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);

}



/* 1. Global Dark Mode Override */

body, .body-container-wrapper {

    background-color: var(--bg-dark) !important;

    color: var(--text-main) !important;

}



/* 2. Noise Texture Overlay */

body::before {

    content: "";

    position: fixed;

    top: 0; 

    left: 0; 

    width: 100%;

    height: 100%; 

    pointer-events: none;

    z-index: 9998; 

    opacity: 0.05;

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

}



/* 3. Glassmorphism Utility Class */

.pe-glass-card {

    background: var(--bg-card) !important;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid var(--border-color) !important;

    border-radius: var(--radius-lg) !important;

}



/* 4. Text Gradient Utility */

.text-gradient {

    background: linear-gradient(135deg, #FFFFFF 30%, var(--primary) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    display: inline-block; 

}



/* 5. Navigation & Header Glass Override */

.kl-navbar, 

.kl-navbar__main, 

.kl-header,

.kl-footer {

    background-color: rgba(15, 23, 32, 0.85) !important;

    backdrop-filter: blur(12px) !important;

    -webkit-backdrop-filter: blur(12px) !important;

    border-bottom: 1px solid var(--border-color) !important;

    color: var(--text-main) !important;

}



.kl-navbar .page-center {

    background-color: transparent !important;

}



.kl-section, .hhs-section {

    background-color: transparent !important;

}



/* 6. Typography Safety Net */

h1, h2, h3, h4, h5, h6, p, li {

    color: var(--text-main);

}



/* 7. Hero Background Glow */

.pe-hero-glow {

    position: relative;

    z-index: 1; 

    background-color: transparent !important;

    border: none !important;

}



.pe-hero-glow::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 800px;

    height: 600px;

    background: radial-gradient(circle, rgba(25, 162, 122, 0.35) 0%, rgba(0,0,0,0) 70%);

    filter: blur(90px);

    z-index: -1;

    pointer-events: none;

}



.pe-hero-glow .row-fluid-wrapper,

.pe-hero-glow .dnd-module,

.pe-hero-glow .hs-content-id {

    position: relative;

    z-index: 2;

}



/* 8. Blueprint Offer Card */

.pe-offer-card {

    background: radial-gradient(circle at top right, #1a2e25 0%, #0F1720 60%) !important;

    border: 1px solid var(--primary) !important;

    box-shadow: 0 0 60px rgba(25, 162, 122, 0.1);

    border-radius: var(--radius-lg) !important;

}



/* 9. Badge Component */

.badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 16px;

    background: rgba(25, 162, 122, 0.1);

    border: 1px solid rgba(25, 162, 122, 0.3);

    border-radius: 100px;

    font-family: 'Inter', sans-serif;

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--primary);

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 24px;

}



/* 10. Button System Override */

.button, 

.button_cta a,

a.button {

    overflow: visible !important;

    position: relative;

    z-index: 10;

    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) !important;

}



.button:not(.button--outlined),

.button_cta a:not(.button--outlined) {

    background-color: var(--primary) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    color: #FFFFFF !important;

    box-shadow: 0 4px 20px rgba(25, 162, 122, 0.4) !important;

}



.button:not(.button--outlined):hover,

.button_cta a:not(.button--outlined):hover {

    background-color: var(--primary-hover) !important;

    box-shadow: 0 12px 35px rgba(25, 162, 122, 0.75) !important;

    transform: translateY(-3px) !important;

}



.button.button--outlined,

.button_cta.button--outlined a {

    background-color: rgba(255, 255, 255, 0.05) !important;

    border: 1px solid var(--border-color) !important;

    color: #FFFFFF !important;

    backdrop-filter: blur(5px);

    box-shadow: none !important;

}



.button.button--outlined:hover,

.button_cta.button--outlined a:hover {

    background-color: rgba(255, 255, 255, 0.15) !important;

    border-color: #FFFFFF !important;

    color: #FFFFFF !important;

    transform: translateY(-3px) !important;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;

}



/* 11. Logo Strip */

.dnd-section:has(.pe-logo-label) {

    border-top: 1px solid var(--border-color) !important;

    border-bottom: 1px solid var(--border-color) !important;

    background-color: rgba(255, 255, 255, 0.02) !important;

    padding: 60px 0 !important;

    margin: 0 !important;

    position: relative;

    z-index: 5;

}



.pe-logo-label {

    text-align: center;

    font-family: 'Inter', sans-serif;

    font-size: 0.75rem; 

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 2px; 

    color: var(--text-muted);

    margin-bottom: 40px !important;

    display: block;

}



.kl-logos__item img {

    opacity: 0.4;

    filter: grayscale(100%); 

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    max-height: 40px;

    width: auto;

}



.kl-logos__item:hover img {

    opacity: 1;

    filter: grayscale(0%);

    transform: scale(1.05);

}



/* 12. Case Study Cards */

.pe-case-card {

    display: block;

    text-decoration: none !important;

    position: relative;

    margin-bottom: 30px;

}



.pe-case-thumb {

    position: relative;

    border-radius: var(--radius-lg);

    overflow: hidden;

    margin-bottom: 16px;

    border: 1px solid var(--border-color);

    transform: translateZ(0); 

}



.pe-case-thumb img {

    display: block;

    width: 100%;

    height: auto;

    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.pe-case-card:hover .pe-case-thumb img {

    transform: scale(1.05);

}



.pe-case-btn {

    position: absolute;

    bottom: 16px;

    right: 16px;

    width: 48px;

    height: 48px;

    background: #FFFFFF;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    transition: transform 0.3s ease;

    z-index: 10;

}



.pe-case-btn svg {

    width: 20px;

    height: 20px;

    position: absolute;

    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);

}



.pe-case-btn .icon-main {

    transform: translate(0, 0);

    opacity: 1;

    color: #000;

}



.pe-case-btn .icon-hover {

    transform: translate(-150%, 150%);

    opacity: 0;

    color: #000;

}



.pe-case-card:hover .icon-main {

    transform: translate(150%, -150%);

    opacity: 0;

}



.pe-case-card:hover .icon-hover {

    transform: translate(0, 0);

    opacity: 1;

}



.pe-case-title {

    font-family: 'Noto Sans', sans-serif;

    font-size: 1.25rem;

    font-weight: 600;

    color: var(--text-main);

    margin: 0;

}



/* --- 13. TEAM CARDS (HORIZONTAL FIX & ALIGNMENT) --- */

/* Targeting .kl-card instead of .kl-simple-card based on HTML inspection.
   This forces the layout to row (horizontal) when .pe-team-layout is present in the text.
*/
.kl-card:has(.pe-team-layout) {
    display: flex !important;
    flex-direction: row !important; 
    align-items: flex-start !important; /* Aligns image and text to top */
    gap: 40px !important; /* Increased gap to match LeftClick design */
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Force Image Styling */
.kl-card:has(.pe-team-layout) .kl-card__image {
    flex: 0 0 200px !important; /* Fixed width for the avatar */
    width: 200px !important;
    margin-bottom: 0 !important;
}

.kl-card:has(.pe-team-layout) .kl-card__image img {
    width: 200px !important;
    height: 240px !important; /* Taller aspect ratio matching goal.png */
    object-fit: cover !important;
    border-radius: 12px !important; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* Adjust Text Alignment & Spacing */
.kl-card:has(.pe-team-layout) .kl-card__content {
    flex: 1 !important;
    text-align: left !important;
    padding: 10px 0 0 0 !important; /* Slight top padding to align with image top */
    margin-top: 0 !important;
}

/* Specific Typography Overrides for Team Cards */
.pe-team-layout h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
    line-height: 1.2;
}

/* The Role/Title styling */
.pe-team-layout div {
    color: var(--text-muted) !important;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 16px;
    text-transform: uppercase; /* Matches LeftClick style */
    letter-spacing: 0.05em;
}

.pe-team-layout p {
    color: var(--text-main);
    opacity: 0.9;
    font-size: 1rem;
    line-height: 1.6;
}

/* Mobile Stack - Revert to vertical on phones */
@media (max-width: 768px) {
    .kl-card:has(.pe-team-layout) {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .kl-card:has(.pe-team-layout) .kl-card__image {
        margin-bottom: 24px !important;
    }
    
    .kl-card:has(.pe-team-layout) .kl-card__content {
        text-align: center !important;
    }
}


/* --- PHASE 3: BENTO GRID (SAFE & FIXED) --- */

/* 1. The Glass Container */
.pe-glass-card {
    position: relative; /* Anchor for the glow */
    overflow: hidden;   /* Contains the glow inside border radius */
    
    /* Visuals */
    background: var(--bg-card) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    
    /* Layout - Forces the Bento Box Shape */
    padding: 48px 40px;
    width: 100%;
    min-height: 380px; /* FIXED HEIGHT for uniformity */
    box-sizing: border-box;
    margin: 0 !important;
    
    /* Flex Column to push tags to bottom */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    
    /* Smooth Transitions */
    transition: transform 0.3s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 2. The Glow Layer (Behind Content) */
.pe-glass-card::after {
    content: '';
    position: absolute;
    inset: 0; /* Fills the whole card */
    
    /* The Glow: Pepper Green Radial Gradient */
    background: radial-gradient(800px circle at top right, rgba(25, 162, 122, 0.25), transparent 40%);
    
    opacity: 0; /* Hidden by default */
    transition: opacity 0.4s ease; /* Smooth fade in */
    z-index: 0; /* Sits behind text */
    pointer-events: none;
}

/* 3. Content Layering (Above Glow) */
/* Ensures text/buttons sit on top of the glow */
.pe-glass-card > * {
    position: relative;
    z-index: 2;
}

/* 4. Hover States (Triggering Effects) */
.pe-glass-card:hover {
    transform: translateY(-5px);
    
    /* Green Border on Hover */
    border-color: rgba(25, 162, 122, 0.5);
    
    /* Deep Shadow */
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5), 0 0 20px rgba(25, 162, 122, 0.1);
}

/* Reveal Glow on Hover */
.pe-glass-card:hover::after {
    opacity: 1;
}

/* 5. Number Box Style */
.pe-number-box {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 32px;
    border: 1px solid var(--border-color);
}

/* 6. Typography Overrides */
.pe-glass-card h3 {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.pe-glass-card p {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 0;
    line-height: 1.6;
}

/* 7. Tags Container (Push to bottom) */
.pe-tag-wrapper {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto; /* Acts as a magnet to the bottom */
    padding-top: 32px;
    width: 100%;
}

/* 8. Individual Tags */
.pe-tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    padding: 8px 16px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    transition: all 0.3s ease;
}

.pe-glass-card:hover .pe-tag {
    background: rgba(25, 162, 122, 0.15);
    color: #ffffff;
    border-color: var(--primary);
}

/* Mobile Responsive Reset */
@media (max-width: 768px) {
    .pe-glass-card {
        min-height: auto; /* Let content decide height on mobile */
    }
}

/* --- CLIENT REVIEWS SECTION --- */

/* 1. Review Container Adjustment */
.pe-review-section {
    position: relative;
    padding: 80px 0;
}

/* 2. Author Card Specifics 
   Centers the content vertically and horizontally like the screenshot */
.pe-glass-card.pe-author-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%; /* Ensures it matches the height of the quote card */
}

/* 3. Avatar Styling */
.pe-author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
    border: 2px solid var(--primary); /* using your primary var [cite: 1] */
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* 4. Quote Text Styling */
.pe-review-quote h3, 
.pe-review-quote blockquote {
    font-family: 'Noto Sans', sans-serif; /* Matching your font stack */
    font-size: 1.5rem; /* Large readable text */
    line-height: 1.4;
    color: var(--text-main); /* [cite: 3] */
    font-weight: 400;
}

/* 5. Logo Strip (Mini) */
.pe-mini-logos {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    opacity: 0.7;
}
.pe-mini-logos img {
    height: 30px;
    width: auto;
    filter: grayscale(100%) brightness(200%); /* Makes them white/silver */
}

/* --- CLIENT REVIEWS (Revised Structure) --- */

/* 1. The Container for the Cards */
/* This forces the cards to be tall and round like the screenshot */
.pe-glass-card.pe-review-box, 
.pe-glass-card.pe-author-box {
    min-height: 380px !important; /* Forces the height to match the "Bento" look */
    border-radius: 24px !important; /* Rounder corners like the reference */
    padding: 48px !important;       /* More internal breathing room */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
}

/* 2. The Quote Text (Left Card) */
.pe-review-box h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.6rem;
    line-height: 1.4;
    color: #ffffff;
    font-weight: 500; /* Made bolder to match reference */
    margin: 0;
    text-align: center;
}

/* 3. The Author Card (Right Card) */
.pe-author-box {
    align-items: center;
    text-align: center;
    gap: 16px; /* Controls exact spacing between Image -> Name -> Title */
}

/* 4. Avatar Styling */
.pe-author-avatar {
    width: 160px; /* Slightly larger */
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    margin: 0; /* Remove margin, let flex-gap handle it */
}

/* 5. Author Text Styling */
.pe-author-name {
    font-size: 1.2rem;
    font-weight: 700; /* Bold Name */
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.pe-author-title {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
    font-weight: 400;
}

/* 6. Mini Logo Strip (Above Cards) */
.pe-mini-logos-container {
    display: flex;
    gap: 16px;
    margin-bottom: 32px; /* Space between logos and cards */
    padding-left: 10px;  /* Align with the curve of the cards */
}

.pe-pill {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

.pe-mini-logo {
    height: 18px; /* Fixed height for logos inside pills */
    width: auto;
    filter: grayscale(100%) brightness(200%); /* Make them white */
    opacity: 0.8;
}

/* --- CLIENT REVIEWS (Split Layout Fix) --- */

/* 1. Unified Container Styling */
/* We force both boxes to have the same min-height so they align perfectly side-by-side */
.pe-review-box, 
.pe-author-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centers content vertically */
    min-height: 320px !important; /* Adjust this if you want them taller/shorter */
    height: 100%;
    padding: 48px !important;
    box-sizing: border-box;
}

/* 2. Left Box (Quote) Typography */
.pe-review-box h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.75rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--text-main);
    margin: 0;
    text-align: left; /* Left align the quote as per standard typography rules */
}

/* 3. Right Box (Author) Layout */
.pe-author-box {
    align-items: center !important; /* Centers content horizontally */
    text-align: center;
}

/* 4. Avatar Styling */
.pe-author-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary); /* Pepper Green Border */
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* 5. Author Text Styling */
.pe-author-name {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
    line-height: 1.2;
}

.pe-author-title {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* Mobile Adjustment */
@media (max-width: 767px) {
    .pe-review-box, .pe-author-box {
        min-height: auto !important; /* Let content dictate height on mobile */
        padding: 32px !important;
        text-align: center;
    }
    .pe-review-box h3 {
        text-align: center;
        font-size: 1.4rem;
    }
}

/* --- PHASE 4: SPLIT BENTO REVIEW (Two Distinct Cards) --- */

/* 1. The Outer Frame (The Wrapper) */
.pe-reviews-frame {
    display: block !important; 
    
    /* FIX: Reset height so top/bottom spacing is determined ONLY by padding */
    min-height: auto !important; 
    
    /* Equal padding on all sides */
    padding: 40px !important; 
    
    box-sizing: border-box;
    transition: none !important; 
}

/* DISABLE HOVER EFFECTS for this specific frame */
.pe-reviews-frame:hover {
    transform: none !important;
    box-shadow: none !important; 
    border-color: var(--border-color) !important; 
}

/* Hide the global "Glow" pseudo-element for this section */
.pe-reviews-frame:hover::after {
    opacity: 0 !important;
}
}

/* 2. The Left Card (Quote) */
/* Note: We use .pe-glass-card here to get the border/background */
.pe-bento-quote-card {
    flex: 1.5; /* Takes up ~60% of the width */
    display: flex;
    align-items: center;     /* Vertically center the text */
    justify-content: center; /* Horizontally center the text */
    padding: 48px !important;
    text-align: center;      /* Center the text alignment */
}

/* Typography for Quote */
.pe-bento-quote-card h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--text-main);
    margin: 0;
}

/* 3. The Right Card (Author) */
.pe-bento-author-card {
    flex: 1; /* Takes up ~40% of the width */
    display: flex;
    flex-direction: column;
    align-items: center;     /* Center avatar and text horizontally */
    justify-content: center; /* Center vertically */
    padding: 48px !important;
    text-align: center;
}

/* Avatar Styling */
.pe-bento-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary); /* Pepper Green border */
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* Author Text */
.pe-bento-name {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
    line-height: 1.2;
}

.pe-bento-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* 4. Mobile Responsiveness */
@media (max-width: 991px) {
    .pe-split-bento-wrapper {
        flex-direction: column; /* Stack top-to-bottom on mobile */
        gap: 24px;
    }

    .pe-bento-quote-card, 
    .pe-bento-author-card {
        width: 100%;
        flex: auto;
        min-height: auto; /* Let text dictate height on mobile */
        padding: 32px !important;
    }
    
    .pe-bento-quote-card h3 {
        font-size: 1.3rem; /* Slightly smaller font on mobile */
    }
}

/* --- PHASE 5: NESTED REVIEW LAYOUT (Refined) --- */

/* 1. The Outer Frame (The Wrapper) */
.pe-reviews-frame {
    display: block !important; 
    padding: 32px !important;
    box-sizing: border-box;
    /* Ensure it stays static (No hover zoom/glow) */
    transition: none !important; 
}

/* DISABLE HOVER EFFECTS for this specific frame */
.pe-reviews-frame:hover {
    transform: none !important;
    box-shadow: none !important; 
    border-color: var(--border-color) !important; 
}

/* Hide the global "Glow" pseudo-element for this section */
.pe-reviews-frame:hover::after {
    opacity: 0 !important;
}

/* 2. The Layout Wrapper (The Grid) */
.pe-reviews-inner-wrapper {
    display: flex;
    gap: 24px; 
    align-items: stretch; 
    width: 100%;
}

/* 3. The Inner Cards (Content Boxes) */
.pe-inner-card {
    /* INCREASED CONTRAST: Made background brighter (0.08 opacity) */
    background: rgba(255, 255, 255, 0.08); 
    border: 1px solid rgba(255, 255, 255, 0.05); 
    border-radius: 16px; 
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    text-align: center;
    /* Remove hover movement for inner cards too */
    transition: none !important;
}

/* 4. Sizing Logic */
.pe-inner-card.quote-side {
    flex: 1.4; 
    align-items: flex-start; 
    text-align: left;
}

.pe-inner-card.author-side {
    flex: 0.8; 
}

/* 5. Typography & Elements */
.pe-inner-card h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--text-main);
    margin: 0;
}

/* INCREASED AVATAR SIZE */
.pe-inner-avatar {
    width: 120px;  /* Up from 90px */
    height: 120px; /* Up from 90px */
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary); 
    margin-bottom: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.pe-inner-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}

.pe-inner-title {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* 6. Mobile Stack */
@media (max-width: 991px) {
    .pe-reviews-frame {
        padding: 20px !important;
    }
    
    .pe-reviews-inner-wrapper {
        flex-direction: column;
        gap: 16px;
    }

    .pe-inner-card {
        width: 100%;
        min-height: auto;
        padding: 32px 24px;
    }
    
    .pe-inner-card.quote-side {
        text-align: center;
        align-items: center;
    }
}
/* =========================================
   BENTO GRID STABILIZER v2 (HEIGHT TUNED)
   Context: Forces equal height visually by setting a high floor.
   ========================================= */

/* Desktop & Tablet Only */
@media (min-width: 768px) {
    .pe-glass-card {
        /* INCREASED from 420px to 540px to match your "Lead Gen" text length */
        min-height: 540px !important; 
        
        /* Forces the "Tags" to the bottom of the card */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important; 
        
        /* Ensures consistent padding matching your screenshot */
        padding: 48px 40px !important;
        box-sizing: border-box !important;
    }

    /* Pushes the description text up, filling the empty space */
    .pe-glass-card > div:first-child {
        flex-grow: 1;
    }
    
    /* Ensures the tags/pills align nicely at the bottom */
    .pe-tag-wrapper {
        margin-top: auto !important;
        padding-top: 24px !important;
    }
}

/* Mobile Reset: Allow natural height on phones */
@media (max-width: 767px) {
    .pe-glass-card {
        min-height: auto !important;
        height: auto !important;
    }
}

/* =========================================
   REVIEW SECTION STABILIZER
   Context: Overrides the global Bento rules specifically for Review Cards
   ========================================= */

@media (min-width: 768px) {
    /* Target the specific classes found in your HTML */
    .pe-glass-card.pe-review-box, 
    .pe-glass-card.pe-author-box {
        /* 1. RESET HEIGHT: 540px is too big for reviews. 
           We set a smaller minimum height to keep them compact but equal. */
        min-height: 320px !important; 
        
        /* 2. RESET LAYOUT: Switch back to centered alignment */
        justify-content: center !important; 
        align-items: center !important;
        text-align: center !important;
        
        /* 3. GAP CONTROL: Ensure spacing between Avatar and Name */
        gap: 20px !important;
    }
    
    /* 4. Typography Tweak: Remove excess margin from the quote to ensure perfect centering */
    .pe-glass-card.pe-review-box h3 {
        margin-bottom: 0 !important; 
    }
    
    /* 5. Avatar Fix: Ensure the image doesn't get stretched by flex settings */
    .pe-author-avatar {
        flex-shrink: 0 !important;
        margin-bottom: 0 !important; /* We use gap instead */
    }
}

/* =========================================
   PHASE 4 FIX: REVIEWS SECTION ISOLATION
   Override the global Bento Grid settings 
   ========================================= */

/* 1. Reset the Wrapper (The Outer Frame) */
.pe-glass-card.pe-reviews-frame {
    min-height: auto !important;  
    height: auto !important;
    display: block !important;    
    padding: 40px !important;     
}

/* 2. Establish the Split Layout (Left/Right) */
.pe-reviews-inner-wrapper {
    display: flex;
    flex-direction: row;
    gap: 24px;
    width: 100%;
    align-items: stretch; /* This forces equal height for both cards */
}

/* 3. Style the Inner Cards (High Contrast) */
.pe-inner-card {
    /* This now controls BOTH cards. 
       0.12 (12%) provides strong contrast without becoming solid grey. */
    background: rgba(255, 255, 255, 0.20) !important; 
    
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 4. The Left Side (Quote) */
.pe-inner-card.quote-side {
    flex: 1.6; 
    text-align: left;
    align-items: flex-start;
}

.pe-inner-card.quote-side h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.5rem;
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
}

/* 5. The Right Side (Author) */
.pe-inner-card.author-side {
    flex: 1; 
    text-align: center;
    align-items: center;
    /* REMOVED: background property here. 
       It now inherits the 0.12 opacity from .pe-inner-card above. */
}

/* 6. Avatar Styling */
.pe-inner-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* 7. Author Typography */
.pe-inner-name {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.pe-inner-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 8. Mobile Responsiveness */
@media (max-width: 991px) {
    .pe-reviews-inner-wrapper {
        flex-direction: column; 
    }

    .pe-inner-card.quote-side,
    .pe-inner-card.author-side {
        width: 100%;
        flex: auto;
        text-align: center;
        align-items: center;
    }
}

/* =========================================
   HERO SECTION ARCHITECTURE (Full Screen Fix)
   Target: Homepage First Section ONLY
   ========================================= */

/* 1. Define the scope: Homepage -> First DND Section */
.body-container--home .row-fluid-wrapper.row-number-1 {
    min-height: 100vh !important; /* Occupy full screen height */
    display: flex !important;
    flex-direction: column;
    justify-content: center; /* Vertically center the inner content */
    position: relative;
    z-index: 1;
    
    /* Visual Balance */
    padding-top: 82px !important; /* Compensate for fixed Navbar height */
    padding-bottom: 40px !important;
    
    /* Ensure background covers the full height */
    background-color: var(--bg-dark, #0F1720); 
}

/* 2. Ensure the inner columns stretch to fill the centered wrapper */
.body-container--home .row-number-1 .row-fluid,
.body-container--home .row-number-1 .dnd-column,
.body-container--home .row-number-1 .dnd-module {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Forces text to true vertical center */
}

/* 3. Inject the "Glow" Background (LeftClick Style, Pepper Colors) */
.body-container--home .row-number-1::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vh;
    max-width: 1000px;
    background: radial-gradient(circle, rgba(25, 162, 122, 0.15) 0%, rgba(0,0,0,0) 60%); /* Pepper Green Glow */
    filter: blur(90px); /* Soften edges */
    z-index: -1; /* Send behind text */
    pointer-events: none;
}

/* 4. Typography Scaling (Impact Headline) */
.body-container--home .row-number-1 h1 {
    font-size: clamp(3rem, 5vw, 4.5rem); /* Fluid scaling between mobile and desktop */
    line-height: 1.1;
    margin-bottom: 24px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* 5. Subtitle Styling (Intro Text) */
.body-container--home .row-number-1 p {
    font-size: 1.25rem;
    color: var(--text-muted, #94A3B8);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* 6. Button Group Layout */
.body-container--home .row-number-1 .kl-rich-text__buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* =========================================
   HERO SECTION ARCHITECTURE v3 (Mac/Laptop Fix)
   Target: Homepage First Section ONLY
   ========================================= */

/* 1. Define the scope: Homepage -> First Row Wrapper */
.body-container--home .row-fluid-wrapper.row-number-1 {
    /* Force the section to fill the screen height */
    min-height: 100vh !important; 
    
    /* Activate Flexbox to control alignment */
    display: flex !important;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    
    position: relative;
    z-index: 1;
    background-color: var(--bg-dark, #0F1720); 
    
    /* OPTICAL CENTERING MAGIC */
    /* We add standard padding to top to clear the Navbar (82px) */
    padding-top: 100px !important; 
    
    /* We add HUGE padding to the bottom. 
       This acts as a floor, pushing the content UPWARDS. */
    padding-bottom: 15vh !important; 
}

/* 2. Ensure internal columns don't block the centering */
.body-container--home .row-number-1 .row-fluid,
.body-container--home .row-number-1 .dnd-column,
.body-container--home .row-number-1 .dnd-module {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 3. The "Glow" Background (Positioned slightly higher) */
.body-container--home .row-number-1::before {
    content: "";
    position: absolute;
    top: 40%; /* Optical center, not mathematical center */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 90vh;
    max-width: 1200px;
    background: radial-gradient(circle, rgba(25, 162, 122, 0.15) 0%, rgba(0,0,0,0) 65%);
    filter: blur(100px);
    z-index: -1;
    pointer-events: none;
}

/* 4. Headline "Break" Control */
.body-container--home .row-number-1 h1 {
    /* Fluid Typography: Scales between 2.5rem and 4.5rem based on screen width */
    font-size: clamp(2.5rem, 4.5vw, 4.5rem); 
    line-height: 1.1;
    margin-bottom: 24px;
    
    /* Constrain width to force a cleaner line break */
    max-width: 900px; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* 5. Subtitle Refinement */
.body-container--home .row-number-1 p {
    font-size: 1.15rem;
    color: var(--text-muted, #94A3B8);
    
    /* Constrain width for readability */
    max-width: 680px; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    line-height: 1.6;
    text-align: center;
}

/* 6. Laptop / Short Screen Safeguard (The Mac Fix) */
/* Target screens shorter than 850px (common laptops) */
@media (max-height: 850px) {
    .body-container--home .row-fluid-wrapper.row-number-1 {
        /* Increase bottom buffer to 20% of screen height to force content higher */
        padding-bottom: 20vh !important; 
    }

    /* Tighten text spacing so it fits vertically */
    .body-container--home .row-number-1 h1 {
        font-size: 3rem; 
        margin-bottom: 16px;
    }
    
    .body-container--home .row-number-1 p {
        font-size: 1rem;
        margin-bottom: 24px;
    }
    
    /* Tighten badge spacing */
    .body-container--home .row-number-1 .badge {
        margin-bottom: 16px !important; 
    }
}

/* 7. Button Alignment */
.body-container--home .row-number-1 .kl-rich-text__buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0;
}
/* =========================================
   HERO ANIMATION: THE "AURORA WAVE" v3
   Status: High Velocity / Visible Edges
   ========================================= */

/* 1. The Stage (Hero Row) */
.body-container--home .row-number-1 {
    position: relative;
    overflow: hidden; /* Clips the waves so they don't break layout */
    background-color: var(--bg-dark, #0F1720) !important;
    z-index: 1;
}

/* 2. The Actors (Pseudo-Elements) */
.body-container--home .row-number-1::before,
.body-container--home .row-number-1::after {
    content: "";
    position: absolute;
    display: block;
    
    /* GEOMETRY: Wide and short creates the "Horizon" effect */
    width: 200%;
    height: 60%; 
    
    border-radius: 100%; /* Oval shape */
    
    /* VISIBILITY: Lower blur + Blend Mode */
    filter: blur(50px); /* Reduced from 120px to make movement visible */
    opacity: 0.6;
    mix-blend-mode: screen; /* Crucial: Makes the colors glow against dark bg */
    
    pointer-events: none;
    z-index: 0; 
    will-change: transform;
}

/* 3. Wave A: The Green Swell (Bottom Left) */
.body-container--home .row-number-1::before {
    /* Gradient with a harder stop at 60% so you see the edge */
    background: radial-gradient(ellipse at center, var(--primary, #19A27A) 0%, transparent 60%);
    
    /* Start Position */
    bottom: -30%; 
    left: -50%;
    
    /* High Speed Animation */
    animation: waveSurge 8s infinite alternate ease-in-out;
}

/* 4. Wave B: The Teal Swell (Top Right) */
.body-container--home .row-number-1::after {
    background: radial-gradient(ellipse at center, #5FC1A0 0%, transparent 60%);
    
    /* Start Position */
    top: -30%;
    right: -50%;
    
    animation: waveSurgeReverse 10s infinite alternate ease-in-out;
}

/* 5. Text Protection */
.body-container--home .row-number-1 .row-fluid-wrapper {
    position: relative;
    z-index: 10; 
}

/* 6. The Physics Engine */

@keyframes waveSurge {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        /* Move 15% (approx 200px) - clearly visible movement */
        transform: translate(15%, -15%) scale(1.1); 
    }
}

@keyframes waveSurgeReverse {
    0% {
        transform: translate(0, 0) scale(1);
    }
  
/* =========================================
   HERO SECTION V5 (The Absolute Pin)
   Target: Homepage First Section ONLY
   ========================================= */

/* 1. The Container: Set the stage height */
.body-container--home .row-number-1 {
    position: relative !important;
    height: 100vh !important;
    min-height: 800px !important; /* Safety minimum for tall screens */
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--bg-dark, #0F1720) !important;
}

/* 2. The Content: Force it to float in the dead center 
   We bypass Flex/Grid and use coordinates. */
.body-container--home .row-number-1 > .row-fluid {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /* This transform perfectly centers the element based on its own size */
    transform: translate(-50%, -50%) !important;
    z-index: 20 !important; /* Ensure it sits ON TOP of the waves */
    width: 100% !important;
    max-width: 1200px !important; /* Maintain container width */
    margin: 0 !important;
    float: none !important;
}

/* 3. Optical Adjustment for the Header 
   Since the navbar takes up space, true center looks too low.
   We nudge it up by 5% to look visually balanced. */
.body-container--home .row-number-1 .kl-rich-text {
    margin-top: -5vh !important; 
}

/* 4. The "Wave" Safeguard 
   If the script injects a canvas, force it to the back 
   and make it unclickable so buttons work. */
.body-container--home .row-number-1 canvas,
.body-container--home .row-number-1 > div:not(.row-fluid) {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important; /* Behind the text (z-index 20) */
    pointer-events: none !important; /* Let clicks pass through to buttons */
}