/* 
   Shinwari Solar Solutions - Main Stylesheet
   Brand: Deep Forest Green + Brand Orange (from logo)
*/

:root {
    --header-height: 110px;
    --header-height-mobile: 70px;
    /* =========================================
       SHINWARI SOLAR — DESIGN TOKENS
       Logo colors: Dark Green + Orange accent
       ========================================= */

    /* --- Core Brand Palette --- */
    --brand-dark: #192A19;
    /* Deep Forest Green — primary text, nav, footer */
    --brand-mid: #0e2207;
    /* Deeper Green — dark section backgrounds */
    --brand-accent: #E87722;
    /* Brand Orange — CTA buttons, highlights, sun icon */
    --brand-accent-h: #c45e10;
    /* Darker Orange — hover state */
    --brand-green-mid: #3A8B3A;
    /* Mid Green — icon accents, panel color */

    /* --- Neutrals --- */
    --neutral-50: #F6F8EF;
    /* Off-white backgrounds */
    --neutral-100: #f3f4f6;
    /* Light section backgrounds */
    --neutral-200: #e5e7eb;
    /* Borders, dividers */
    --neutral-400: #9ca3af;
    /* Muted text */
    --neutral-600: #4b5563;
    /* Body text */
    --neutral-900: #111827;
    /* Near-black text */

    /* --- Semantic Aliases (use these in all components) --- */
    --color-bg-light: var(--neutral-50);
    --color-bg-white: #ffffff;
    --color-text-body: var(--neutral-600);
    --color-text-muted: var(--neutral-400);
    --color-primary-dark: var(--brand-dark);
    --color-accent: var(--brand-accent);
    --color-accent-hover: var(--brand-accent-h);

    /* Legacy aliases — keep for backward compat */
    --color-primary: var(--brand-dark);
    --color-text-dark: var(--brand-dark);
    --color-text-light: #ffffff;
    --color-bg-dark: var(--brand-dark);

    /* Section-specific tokens — all point to the same brand values */
    --tm-bg: #ffffff;
    --tm-ink: var(--neutral-900);
    --tm-muted: var(--neutral-400);
    --tm-accent: var(--brand-accent);
    /* ← was #fbc91a, now brand orange */
    --tm-card-bg: var(--neutral-100);
    --tm-gap: 24px;

    --sx-bg: var(--brand-mid);
    /* ← was #0b1a0e & #0e2207, now one token */
    --sx-ink: #ffffff;
    --sx-muted: rgba(255, 255, 255, 0.7);
    --sx-card: #ffffff;
    --sx-card-text: var(--brand-dark);
    --sx-card-border: transparent;
    --sx-green: var(--brand-dark);
    --sx-yellow: var(--brand-accent);
    /* ← was #fbc91a, now brand orange */
    --sx-radius: 18px;

    /* Typography */
    --font-heading: 'Funnel Display', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;

    /* Layout */
    --container-width: 1280px;
    --header-height: 80px;
    --border-radius: 20px;
    --transition-speed: 0.3s;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-body);
    background-color: var(--color-bg-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
}

html {
    overflow-x: hidden;
    width: 100%;
}

/* SEO Friendly Typography Scale */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-sm);
    transition: all 0.3s ease-in-out;
}

/* Desktop Sizes */
h1 {
    font-size: 80px;
    font-weight: 800;
}

/* Hero */
h2 {
    font-size: 48px;
}

/* Section Titles */
h3 {
    font-size: 32px;
}

/* Card Titles */
h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    h1 {
        font-size: 42px;
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 28px;
    }
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-speed);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* --- Utility Classes --- */
.mt-xs {
    margin-top: var(--spacing-xs);
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mb-xs {
    margin-bottom: var(--spacing-xs);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

/* Layout Utilities */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-center-x {
    display: flex;
    justify-content: center;
}

.gap-sm {
    gap: 15px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.max-w-600 {
    max-width: 600px;
}

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

/* Typography Utilities */
.fs-xs {
    font-size: 0.85rem;
}

.fs-lg {
    font-size: 1.1rem;
}

.fs-xl {
    font-size: 2.5rem;
}

.italic {
    font-style: italic;
}

.eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

/* Backgrounds */
.bg-light-alt {
    background-color: var(--color-bg-light);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.text-uppercase {
    text-transform: uppercase;
}

.text-bold {
    font-weight: 700;
}

.text-extra-bold {
    font-weight: 800;
}

.text-semi-bold {
    font-weight: 600;
}

.fs-sm {
    font-size: 0.875rem;
}

.fs-md {
    font-size: 1.125rem;
}

.color-primary {
    color: var(--color-primary);
}

.color-accent {
    color: var(--color-accent);
}

.color-text-muted {
    color: var(--color-text-muted);
}

.color-white {
    color: #ffffff;
}

.brand-border {
    border-color: var(--color-accent) !important;
}

.eyebrow-label {
    display: inline-block;
    color: var(--color-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.875rem;
    margin-bottom: var(--spacing-xs);
}

/* Logo Utility */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.header-logo {
    height: 60px;
    /* Reduced from 80px to be more proportional in header */
    width: auto;
    display: block;
}

@media (max-width: 768px) {
    .header-logo {
        height: 45px;
    }
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    margin: 0;
}

.card-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-accent);
    color: var(--color-primary-dark);
    padding: 5px 15px;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 10;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition:
        color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sliding fill pseudo-element (ecoland pattern) */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover::before {
    transform: scaleX(1);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

/* Fill sweeps to dark green on hover */
.btn-primary::before {
    background-color: var(--color-primary-dark);
}

.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
}

/* Fill sweeps to a richer warm gold on hover */
.btn-accent::before {
    background-color: var(--color-accent-hover);
}

.btn-accent:hover {
    color: var(--color-primary-dark);
}

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

.text-primary {
    color: var(--color-primary);
}

.text-accent {
    color: var(--color-accent);
}

.section-padding {
    padding: var(--spacing-lg) 0;
}

/* ----------------------------------------------------
   Header & Navigation
---------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Top Bar */
.top-bar {
    background-color: var(--color-primary-dark);
    color: var(--color-text-light);
    font-size: 0.875rem;
    padding: 8px 0;
}

.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-info span {
    margin-right: 20px;
}

.social-links a {
    color: var(--color-text-light);
    margin-left: 15px;
    opacity: 0.8;
}

.social-links a:hover {
    opacity: 1;
    color: var(--color-accent);
}

/* Main Nav */
.main-nav {
    padding: 15px 0;
}

.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h2 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--color-primary-dark);
}

/* ----------------------------------------------------
   Main Navigation & Dropdown
---------------------------------------------------- */
.desktop-menu ul {
    display: flex;
    gap: 30px;
}

.desktop-menu li {
    position: relative;
}

.desktop-menu a {
    font-weight: 500;
    color: var(--color-text-dark);
    position: relative;
    padding: 10px 0;
    display: block;
}

/* Dropdown styling */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    min-width: 240px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 260px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1001;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.desktop-menu li:hover>.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

.dropdown-menu a {
    display: block;
    padding: 12px 25px;
    width: 100%;
    font-size: 0.95rem;
    color: var(--color-primary-dark) !important;
    font-weight: 500;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dropdown-menu li:last-child a {
    border-bottom: none;
}

.dropdown-menu a:hover {
    background-color: var(--neutral-50);
    color: var(--color-accent) !important;
    padding-left: 30px;
}

.dropdown-menu a::after {
    display: none !important;
}

.desktop-menu a:hover,
.desktop-menu a.active {
    color: var(--color-primary);
}

.desktop-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--color-accent);
    transition: width 0.3s;
}

.desktop-menu a:hover::after {
    width: 100%;
}

/* ----------------------------------------------------
   Hero Section
---------------------------------------------------- */
.hero-section {
    position: relative;
    padding: var(--spacing-xl) 0;
    background-color: var(--color-bg-light);
    overflow: hidden;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.hero-content .eyebrow {
    display: inline-block;
    color: var(--color-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-xs);
    font-size: 0.875rem;
}

.hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
}

.hero-content p {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

.hero-image {
    position: relative;
    border-radius: 20px;
    /* corner-shape emulation */
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.image-placeholder {
    width: 100%;
    height: 500px;
    /* Placeholder height */
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-weight: 700;
    font-size: 2rem;
}

/* ----------------------------------------------------
   Responsiveness (Basic)
---------------------------------------------------- */
@media (max-width: 992px) {
    .container {
        max-width: 960px;
    }

    .desktop-menu {
        display: none;
        /* Hide for now, add mobile menu later */
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content p {
        margin: 0 auto 2rem auto;
    }

    .hero-buttons {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }

    /* Responsive Typography */
    h1 {
        font-size: 42px;
        /* Smaller on mobile */
    }

    h2 {
        font-size: 32px;
    }

    .hero-content h1 {
        font-size: 42px;
    }
}

/* ----------------------------------------------------
   Services Section (Grid)
---------------------------------------------------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: var(--spacing-md);
}

.service-card {
    background: #fff;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #eee;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.icon-box {
    width: 60px;
    height: 60px;
    background-color: rgba(31, 99, 6, 0.1);
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
}

.service-card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.read-more {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
}

.read-more:hover {
    color: var(--color-accent);
}

/* ----------------------------------------------------
   Footer
---------------------------------------------------- */
.site-footer {
    background-color: var(--color-primary-dark);
    color: var(--color-text-light);
    padding: var(--spacing-xl) 0 20px 0;
}

.site-footer h3 {
    color: var(--color-text-light);
    margin-bottom: 20px;
}

/* ---- Dark-background hero heading overrides ---- */
/* Ensures headings stay white on any dark-bg hero section */
.shop-hero h1,
.shop-hero h2,
.about-hero h1,
.about-hero h2,
.page-hero h1,
.page-hero h2 {
    color: #ffffff;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-widget h4 {
    color: var(--color-text-light);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.footer-widget p {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #ccc;
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--color-accent);
    padding-left: 5px;
}

.footer-bottom {
    padding-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: #888;
}

@media (max-width: 992px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .footer-top {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------
   About Section
---------------------------------------------------- */
.about-section {
    background-color: var(--color-bg-light);
}

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.about-content h2 {
    margin-bottom: var(--spacing-md);
}

.feature-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-weight: 500;
}

.feature-list li::before {
    content: '?';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 800;
}

/* ----------------------------------------------------
   Projects Section
---------------------------------------------------- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: var(--spacing-md);
}

.project-card {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    aspect-ratio: 4/3;
    background-color: #ddd;
}

.project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
}

.project-card:hover .project-overlay {
    opacity: 1;
}

.project-card h4 {
    color: white;
    margin-bottom: 5px;
}

/* Responsive adjustments for new sections */
@media (max-width: 992px) {
    .about-container {
        grid-template-columns: 1fr;
    }

    .about-image {
        order: -1;
        margin-bottom: 30px;
    }
}

/* ----------------------------------------------------
   Brands Section
---------------------------------------------------- */
.brands-section {
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.brands-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    opacity: 0.7;
}

.brand-placeholder {
    font-weight: 700;
    font-size: 1.5rem;
    color: #ccc;
    text-transform: uppercase;
}

/* ----------------------------------------------------
   Process Section (How It Works)
---------------------------------------------------- */
.process-section {
    background-color: var(--color-bg-light);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.step-card {
    position: relative;
    padding: 20px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.step-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
    font-weight: 700;
    line-height: 40px;
    border-radius: 50%;
    margin-bottom: 15px;
}

/* ----------------------------------------------------
   Testimonials (New)
---------------------------------------------------- */
.sx-tm {
    background: var(--tm-bg);
    color: var(--tm-ink);
    padding: 80px 0;
    font-family: var(--font-body);
    overflow: hidden;
}

.sx-tm__wrap {
    width: min(1300px, calc(100% - 40px));
    margin-inline: auto;
}

.sx-tm__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
    gap: 40px;
}

.sx-tm__title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.03em;
}

.sx-tm__desc {
    font-size: 18px;
    color: var(--tm-muted);
    max-width: 450px;
    margin: 0;
}

.sx-tm__stage {
    background: #f3f4f6;
    border-radius: 40px;
    padding: 40px 0;
    position: relative;
}

.sx-tm__row {
    display: grid;
    grid-template-areas: "stack";
    overflow: hidden;
    padding: 20px 0;
    /* Increased padding against shadow clipping */
    position: relative;
}

.sx-tm__track {
    grid-area: stack;
    display: flex;
    gap: var(--tm-gap);
    will-change: transform;
    width: max-content;
}

/* --- Cards --- */
.sx-card {
    flex: 0 0 auto;
    width: 380px;
    background: white;
    padding: 24px;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.sx-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.sx-user {
    display: flex;
    gap: 12px;
    align-items: center;
}

.sx-user__avatar {
    width: 44px;
    height: 44px;
    background: #e5e7eb;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    color: #374151;
}

.sx-user__info {
    display: flex;
    flex-direction: column;
}

.sx-user__name {
    font-weight: 700;
    font-size: 16px;
}

.sx-user__platform {
    font-size: 13px;
    color: var(--tm-muted);
}

.sx-quote {
    font-size: 15px;
    line-height: 1.6;
    color: #374151;
    margin-bottom: 16px;
}

.sx-stars {
    color: var(--tm-accent);
    letter-spacing: 2px;
}

/* Gradient Fades */
.sx-tm__row::before,
.sx-tm__row::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.sx-tm__row::before {
    left: 0;
    background: linear-gradient(90deg, #f3f4f6, transparent);
}

.sx-tm__row::after {
    right: 0;
    background: linear-gradient(-90deg, #f3f4f6, transparent);
}

@media (max-width: 768px) {
    .sx-tm__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .sx-card {
        width: 300px;
    }
}

/* ----------------------------------------------------
   FAQ Section
---------------------------------------------------- */
/* ----------------------------------------------------
   FAQ Section (Sticky Left)
---------------------------------------------------- */
.sx2-faq {
    background: var(--sx-bg);
    padding: clamp(36px, 5vw, 70px) 0;
    font-family: var(--font-body);
    color: var(--sx-ink);
}

.sx2-faq__wrap {
    width: min(1200px, calc(100% - 56px));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    /* left text, right FAQ */
    gap: clamp(22px, 3.6vw, 56px);
    align-items: start;
}

/* LEFT STICKY */
.sx2-faq__left {
    position: sticky;
    top: 110px;
    /* adjust based on your header height */
    align-self: start;
    padding-right: 10px;
    z-index: 2;
}

/* --- Accordion Items --- */
.sx2-faq__item {
    margin-bottom: 12px;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.sx2-faq__btn {
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    text-align: left;
    transition: background 0.3s;
}

/* Active State Background */
.sx2-faq__item.active {
    background: #fffceb;
    /* Soft yellow hint */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sx2-faq__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: var(--color-primary-dark);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
}

.sx2-faq__item.active .sx2-faq__icon {
    background: var(--color-accent);
    color: var(--color-primary-dark);
}

.sx2-faq__q {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary-dark);
    flex-grow: 1;
}

.sx2-faq__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 20px;
}

.sx2-faq__body {
    padding-bottom: 20px;
    padding-left: 43px;
    padding-right: 20px;
    color: var(--color-text-body);
    line-height: 1.6;
    font-size: 0.95rem;
}

.sx2-faq__title {
    margin: 0 0 18px;
    font-weight: 950;
    letter-spacing: -0.02em;
    font-size: clamp(34px, 4.3vw, 64px);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--sx-ink);
}

.sx2-faq__sub {
    margin: 0;
    max-width: 520px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sx-muted);
    font-weight: 600;
}

/* RIGHT FAQ LIST */
.sx2-acc {
    display: grid;
    gap: 18px;
    /* more airy like screenshot */
}

.sx2-acc__item {
    background: var(--sx-card);
    border-radius: var(--sx-radius);
    overflow: hidden;

    /* NO BORDER */
    border: 0;

    /* Soft clean shadow like reference */
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.sx2-acc__btn {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;

    display: grid;
    grid-template-columns: 1fr 22px;
    align-items: center;
    gap: 16px;

    padding: 18px 20px;
    text-align: left;
    color: var(--sx-card-text);
    /* Dark text for questions */
    font: inherit;
    font-weight: 700;
}

.sx2-acc__q {
    font-weight: 800;
    font-size: 16px;
    line-height: 1.25;
}

/* Chevron like reference */
.sx2-acc__chev {
    width: 18px;
    height: 18px;
    justify-self: end;
    position: relative;
}

.sx2-acc__chev::before {
    content: "";
    position: absolute;
    inset: 0;
    border-right: 2px solid var(--sx-card-text);
    /* Dark chevron */
    border-bottom: 2px solid var(--sx-card-text);
    /* Dark chevron */
    transform: rotate(45deg);
    transform-origin: center;
    top: -2px;
}

.sx2-acc__panel {
    padding: 0 20px 18px;
    color: rgba(14, 34, 7, 0.75);
    /* Dark muted text for answer */
    font-weight: 500;
    line-height: 1.55;
    background: var(--sx-card);
}

/* Open state */
.sx2-acc__item.is-open {
    border-color: rgba(43, 30, 23, .14);
}

.sx2-acc__item.is-open .sx2-acc__btn {
    padding-bottom: 10px;
}

.sx2-acc__item.is-open .sx2-acc__chev::before {
    transform: rotate(-135deg);
    /* points up */
    top: 2px;
}

/* MOBILE (left not sticky; stack like reference mobile screenshot) */
@media (max-width: 980px) {
    .sx2-faq__wrap {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .sx2-faq__left {
        position: static;
        top: auto;
    }
}

/* ----------------------------------------------------
   Floating WhatsApp Button
---------------------------------------------------- */
.btn-whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
}

.btn-whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    background-color: #20BA5A;
}

.btn-whatsapp-float svg {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

@media (max-width: 768px) {
    .btn-whatsapp-float {
        bottom: 25px;
        right: 25px;
        width: 50px;
        height: 50px;
    }

    .btn-whatsapp-float svg {
        width: 24px;
        height: 24px;
    }
}


/* ----------------------------------------------------
   Packages Section
---------------------------------------------------- */
.packages-section {
    background-color: white;
}

.pricing-card {
    background: white;
    padding: 40px;
    border-radius: var(--border-radius);
    border: 1px solid #eee;
    text-align: center;
    transition: transform 0.3s;
    position: relative;
    overflow: hidden;
}

.pricing-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pricing-card h3 {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.kw-range {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: 20px;
}

.price-list li {
    margin-bottom: 10px;
    color: var(--color-text-muted);
}

/* ----------------------------------------------------
   Net Metering Section
---------------------------------------------------- */
.net-metering-section {
    background-color: var(--color-bg-light);
}

.net-metering-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.net-metering-content ul li {
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
}

.net-metering-content ul li::before {
    content: '?';
    position: absolute;
    left: 0;
    color: var(--color-accent);
}





/* ----------------------------------------------------
   Mobile Navigation & Touch Ups
---------------------------------------------------- */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-primary-dark);
    cursor: pointer;
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Make it full screen height */
    background: white;
    padding: 100px 20px 20px;
    /* Top padding keeps links below the toggle button */
    display: flex;
    /* Use flexbox for better control */
    flex-direction: column;
    z-index: 999;
    transform: translateX(100%);
    /* Slide from right instead of top */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
    /* Allow scrolling within menu if content is tall */
}

.mobile-menu.active {
    transform: translateX(0);
}

/* Ensure the Toggle Button stays ABOVE the menu */
.mobile-menu-btn {
    display: none;
    z-index: 1001;
    /* Higher than mobile-menu */
    position: relative;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-primary-dark);
    cursor: pointer;
}

.mobile-menu ul li {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.mobile-menu ul li:last-child {
    border-bottom: none;
}

.mobile-menu a {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-primary-dark);
    display: block;
}

@media (max-width: 992px) {
    .mobile-menu-btn {
        display: block;
    }

    .net-metering-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .net-metering-content ul {
        text-align: left;
        display: inline-block;
    }
}




/* Mobile Quote Button */
.mobile-menu a.mobile-quote-btn {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--border-radius);
    margin-top: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 992px) {
    .solarx-carousel-wrapper {
        padding: 0;
    }

    .prev-arrow,
    .next-arrow {
        display: none;
        /* Hide arrows on mobile, keep swipe */
    }

    .mobile-menu {
        display: flex;
        flex-direction: column;
    }
}


/* ----------------------------------------------------
   Mobile Quotes Fix
---------------------------------------------------- */
@media (max-width: 992px) {
    .header-cta {
        display: none !important;
    }

    .mobile-quote-btn {
        margin-top: 20px;
        width: 100%;
        text-align: center;
        background-color: var(--color-primary-dark);
        color: white;
        padding: 12px;
        border-radius: var(--border-radius);
        font-weight: 700;
        text-transform: uppercase;
    }
}

/* --- Header Layout --- */
.bento-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.bento-header p {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    margin-top: 5px;
}

.bento-view-all {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 600;
}

/* --- Bento Grid Base --- */
.bento-grid-custom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 320px;
    gap: 24px;
}

/* --- Base Card Architecture --- */
.bento-card {
    background-color: #f4f5f7;
    /* Light grey base */
    border-radius: 32px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    /* Crucial: Keeps the ink bleed inside the card */
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.04);
    z-index: 1;
    /* Establishes stacking context */
}

/* --- 🌟 THE INK BLEED HOVER EFFECT 🌟 --- */
/* The invisible circle waiting behind the button */
.bento-card::before {
    content: "";
    position: absolute;
    top: 32px;
    /* Matches button position */
    right: 32px;
    /* Matches button position */
    width: 44px;
    /* Matches button size */
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-primary-dark);
    /* Fills with Dark Green */
    transform: scale(0);
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
    /* Sits directly above the card background, below content */
}

/* The Expansion */
.bento-card:hover::before {
    transform: scale(40);
    /* Explodes to cover the whole card */
}

/* --- Content & Z-Index Management --- */
/* Text and images MUST have a higher z-index so they aren't swallowed by the background */
.bento-content,
.bento-img-wrapper,
.bento-action-btn {
    position: relative;
    z-index: 2;
}

/* Dynamic Text Color Inversion */
.bento-card h3,
.bento-card .bento-meta {
    transition: color 0.5s ease 0.1s;
    /* Smooth fade to white */
    margin-bottom: 8px;
}

.bento-meta {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* When hovered, light cards turn dark green, so text must turn white */
.bento-card:hover h3,
.bento-card:hover .bento-meta {
    color: #ffffff;
}

/* --- The Action Button --- */
.bento-action-btn {
    position: absolute;
    top: 32px;
    right: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-accent);
    /* Shinwari Yellow */
    color: var(--color-primary-dark);
    font-weight: bold;
    font-size: 1.2rem;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.bento-card:hover .bento-action-btn {
    transform: rotate(45deg);
    /* Arrow points forward on hover */
    background-color: #ffffff;
    /* Pops against the dark green bleed */
    color: var(--color-primary);
}

/* --- The Dark Green Card Variation --- */
.bento-bg-primary {
    background-color: var(--color-primary);
}

.bento-bg-primary h3,
.bento-bg-primary .bento-meta {
    color: #ffffff;
    /* Default text is white */
}

/* The dark card bleeds Shinwari Yellow instead of dark green */
.bento-bg-primary::before {
    background-color: var(--color-accent);
}

/* Text turns dark when the yellow background takes over */
.bento-bg-primary:hover h3,
.bento-bg-primary:hover .bento-meta {
    color: var(--color-primary-dark);
}

.bento-bg-primary:hover .bento-action-btn {
    background-color: var(--color-primary-dark);
    color: white;
}

/* --- Grid Spans --- */
.bento-square {
    grid-column: span 1;
    grid-row: span 1;
}

.bento-wide {
    grid-column: 1 / 3;
    grid-row: 2;
}

.bento-tall {
    grid-column: 3;
    grid-row: 1 / 3;
}

/* --- Image Positioning --- */
.bento-img-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.bento-img-side {
    left: auto;
    right: 0;
    width: 50%;
    height: 100%;
    align-items: center;
}

.bento-img-wrapper img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Slight zoom on the image to accompany the ink bleed */
.bento-card:hover .bento-img-wrapper img {
    transform: scale(1.08);
}

/* --- Mobile & Tablet Responsiveness --- */
@media (max-width: 992px) {
    .bento-grid-custom {
        grid-template-columns: 1fr 1fr;
        /* 2 Columns */
    }

    .bento-tall {
        grid-column: span 1;
        grid-row: span 2;
    }

    .bento-wide {
        grid-column: span 2;
    }

    .bento-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .bento-grid-custom {
        grid-template-columns: 1fr;
        /* Stack everything */
        grid-auto-rows: minmax(320px, auto);
    }

    .bento-tall,
    .bento-wide {
        grid-column: span 1;
        grid-row: span 1;
    }

    .bento-img-side {
        width: 100%;
        /* Image takes full width at bottom on mobile */
        height: 50%;
    }

    .wide-content {
        max-width: 100%;
    }
}

/* ----------------------------------------------------
   Process Section Background Update
---------------------------------------------------- */
.process-section {
    position: relative;
    background-image: url('https://images.unsplash.com/photo-1509391366360-2e959784a276?q=80&w=3264&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white !important;
    /* Force text white */
    z-index: 1;
}

/* Dark Overlay */
.process-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 34, 7, 0.85);
    /* Deep Forest Green Overlay */
    z-index: -1;
}

/* Ensure text readability */
.process-section h2,
.process-section p,
.process-section h4 {
    color: white !important;
}

.process-section .step-number {
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
}

/* Fix the AI's white-on-white text mistake inside the process cards */
.process-section .step-card h4 {
    color: var(--color-primary-dark) !important;
}

.process-section .step-card p {
    color: var(--color-text-muted) !important;
}


/* --- Cinematic Brand Slider Base --- */
.hero-slider-section {
    position: relative;
    width: 100%;
    height: 85vh;
    min-height: 650px;
    background-color: var(--color-primary-dark);
    overflow: hidden;
    color: white;
}

.hero-slider-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* --- Gradient Fade Architecture --- */
.slide-bg-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.slide-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary-dark) 48%, rgba(14, 34, 7, 0) 70%);
    z-index: 2;
}

/* --- Text Layout --- */
.slide-content-container {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 3;
}

.slide-text-block {
    max-width: 560px;
    padding-left: 60px;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.6s ease 0.3s;
}

.hero-slide.active .slide-text-block {
    transform: translateY(0);
    opacity: 1;
}

/* --- Subtitle Trust Anchor --- */
.slide-trust-anchor {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.slide-trust-anchor .stars {
    color: var(--color-accent);
    font-size: 1rem;
    letter-spacing: 1px;
}

.slide-trust-anchor .review-text {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
}

/* --- Typography --- */
.slide-title {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 0.95;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: -1px;
    color: white;
}

.slide-desc {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 25px;
    line-height: 1.5;
}

/* --- Feature List with SOLID CIRCLE TICK --- */
.slide-features {
    margin-bottom: 25px;
    padding: 0;
    list-style: none;
}

.slide-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
}

.feature-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: var(--color-accent);
    /* Solid Yellow Circle */
    color: var(--color-primary-dark);
    /* Dark Tick */
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* --- CTA Button & Badges --- */
.slide-btn {
    display: inline-block;
    width: 100%;
    max-width: 480px;
    padding: 18px 20px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-bottom: 15px;
}

.slide-btn:hover {
    background-color: white;
    transform: translateY(-2px);
}

.slide-trust-badges {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    max-width: 480px;
}

.slide-trust-badges span {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* --- Navigation --- */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s;
}

.hero-arrow:hover {
    color: var(--color-accent);
}

.prev-slide {
    left: 20px;
}

.next-slide {
    right: 20px;
}

.slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

.slider-dot.active {
    background: var(--color-accent);
    transform: scale(1.3);
}

/* ====================================================
   MOBILE RESPONSIVENESS: The Stacked Layout
   ==================================================== */
@media (max-width: 992px) {
    .hero-slider-section {
        height: auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .hero-slider-wrapper {
        height: auto;
        flex-grow: 1;
        position: relative;
    }

    /* Stack slides naturally on mobile */
    .hero-slide {
        position: relative;
        height: auto;
        opacity: 1;
        visibility: visible;
        display: none;
        /* Hide inactive slides */
    }

    .hero-slide.active {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .slide-bg-image {
        position: relative;
        width: 100%;
        height: 38vh;
        top: 0;
        left: 0;
        background-position: center;
    }

    .slide-gradient-overlay {
        display: none;
    }

    @media (max-width: 991px) {
        .site-header {
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 2000;
        }

        html.menu-open,
        body.menu-open {
            overflow: hidden;
            height: 100vh;
            position: fixed;
            width: 100%;
        }

        .top-bar {
            display: none;
        }

        .main-nav {
            padding: 12px 0;
        }

        .mobile-menu {
            position: fixed;
            top: 64px;
            /* Matches mobile header height precisely */
            left: 0;
            width: 100%;
            height: calc(100vh - 64px);
            background-color: white;
            z-index: 1001;
            /* Layer between header and page content */
            display: block;
            transform: translateX(100%);
            transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            padding: 20px 30px;
            /* Reduced vertical padding */
            overflow-y: auto;
        }

        .mobile-menu.active {
            transform: translateX(0);
        }

        .mobile-menu ul {
            margin-bottom: 30px;
        }

        .mobile-menu li {
            margin-bottom: 20px;
        }

        .mobile-menu a {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-primary-dark);
            display: block;
        }

        /* Mobile Submenu */
        .has-dropdown>a {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .has-dropdown>a::after {
            content: '+';
            font-size: 1.2rem;
            transition: transform 0.3s;
        }

        .has-dropdown.active>a::after {
            content: '-';
        }

        .mobile-submenu {
            padding-left: 20px;
            margin-top: 15px;
            display: none;
            border-left: 2px solid var(--color-accent);
        }

        .has-dropdown.active .mobile-submenu {
            display: block;
        }

        .mobile-submenu li {
            margin-bottom: 15px;
        }

        .mobile-submenu a {
            font-size: 1.1rem;
            font-weight: 500;
            opacity: 0.8;
        }

        .mobile-quote-btn {
            width: 100%;
            font-size: 1.1rem;
            padding: 15px;
        }
    }

    .slide-content-container {
        position: relative;
        top: 0;
        width: 100%;
        height: auto;
        background-color: var(--color-primary-dark);
        padding: 35px 20px 100px 20px;
        align-items: flex-start;
        margin-top: -2px;
    }

    .slide-text-block {
        padding-left: 0;
        max-width: 100%;
        transform: none;
    }

    .slide-trust-anchor {
        justify-content: flex-start;
        margin-bottom: 10px;
    }

    .slide-title {
        font-size: 2.1rem;
        line-height: 1;
        margin-bottom: 15px;
    }

    .slide-desc {
        font-size: 0.95rem;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .slide-features li {
        justify-content: flex-start;
        font-size: 0.9rem;
        margin-bottom: 12px;
        align-items: flex-start;
    }

    .feature-check {
        margin-top: 2px;
    }

    .slide-btn {
        width: 100%;
        max-width: 100%;
        padding: 16px;
        font-size: 1rem;
    }

    .slide-trust-badges {
        flex-direction: column;
        gap: 10px;
        max-width: 100%;
        padding-top: 10px;
    }

    .slide-trust-badges span {
        white-space: normal;
        font-size: 0.8rem;
    }

    .hero-arrow {
        display: none;
    }

    .slider-dots {
        bottom: 25px;
    }
}

@media (max-width: 480px) {
    .slide-bg-image {
        height: 32vh;
    }

    .slide-title {
        font-size: 1.9rem;
    }
}

/* =========================================================
   SolarX Inverter Series (Juice Layout, Shinwari Branding)
   ========================================================= */

.solarx-inverter-section {
    background: var(--sx-bg);
    padding: 90px 0;
    font-family: var(--font-body);
    color: var(--sx-white);
}

/* container */
.solarx-container {
    width: min(1250px, calc(100% - 56px));
    margin-inline: auto;
}

/* heading */
.solarx-heading {
    text-align: center;
    margin-bottom: 55px;
}

.solarx-section-title {
    margin: 0 0 10px;
    font-weight: 900;
    font-size: clamp(28px, 3vw, 46px);
    line-height: 1.1;
    letter-spacing: 0.2px;
    color: var(--sx-white);
}

.solarx-section-title span {
    color: var(--sx-yellow);
}

.solarx-section-subtitle {
    margin: 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.65);
}

/* grid (exact juice spacing) */
.solarx-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2.3vw, 34px);
}

/* CARD (juice layout exact) */
.solarx-card {
    border-radius: var(--sx-radius);
    padding: 36px 28px 28px;
    min-height: 560px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    position: relative;
    overflow: hidden;

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* White Card */
.solarx-card--a {
    background: #ffffff;
}

/* Solar Yellow Card (Highlight) */
.solarx-card--b {
    background: var(--sx-yellow);
}

/* White Card */
.solarx-card--c {
    background: #ffffff;
}

/* purple */

/* Title like juice */
.solarx-card-title {
    margin: 6px 0 14px;
    font-weight: 900;
    font-size: clamp(26px, 2.1vw, 40px);
    line-height: 1.1;
    color: #111;
}

/* Pill button like juice */
.solarx-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 32px;
    border-radius: 999px;

    border: 2px solid var(--brand-dark);
    background: transparent;

    text-decoration: none;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--brand-dark);

    position: relative;
    overflow: hidden;
    z-index: 1;

    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.solarx-card-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--brand-dark);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.solarx-card-btn:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.solarx-card-btn:hover::before {
    transform: scaleX(1);
}

/* Media zone (image centered big like can) */
.solarx-card-media {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-top: 18px;
}

/* BIG product like juice */
.solarx-card-media img {
    width: min(78%, 360px);
    height: auto;
    max-height: 400px;
    object-fit: contain;

    transform: translateY(8px);
    filter: drop-shadow(0 22px 32px rgba(0, 0, 0, 0.35));

    transition: transform 0.28s ease, filter 0.28s ease;
}

/* Hover lift (same vibe) */
.solarx-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sx-card-shadow);
}

.solarx-card:hover .solarx-card-media img {
    transform: translateY(0px) scale(1.03);
    filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.45));
}

/* MOBILE (stacked like your page) */
@media (max-width: 980px) {
    .solarx-grid {
        grid-template-columns: 1fr;
    }

    .solarx-card {
        min-height: 520px;
        padding: 34px 22px 22px;
    }

    .solarx-card-media img {
        width: min(70%, 340px);
    }
}

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS
   Ecoland-inspired entrance animations
   ============================================ */

/* --- Base hidden state (before element enters viewport) --- */
[data-animate] {
    opacity: 0;
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* --- Revealed state (after IntersectionObserver fires) --- */
[data-animate].is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

/* --- Direction variants --- */

/* Default: fade-up (slide up from below) */
[data-animate="fade-up"] {
    transform: translateY(50px);
}

/* Pure opacity fade (no movement) */
[data-animate="fade-in"] {
    transform: none;
}

/* Slide in from left */
[data-animate="fade-left"] {
    transform: translateX(-60px);
}

/* Slide in from right */
[data-animate="fade-right"] {
    transform: translateX(60px);
}

/* Subtle scale-in */
[data-animate="scale-in"] {
    transform: scale(0.92);
}

/* --- Stagger delays for children --- */
[data-animate].stagger-1 {
    transition-delay: 0.1s;
}

[data-animate].stagger-2 {
    transition-delay: 0.2s;
}

[data-animate].stagger-3 {
    transition-delay: 0.3s;
}

[data-animate].stagger-4 {
    transition-delay: 0.4s;
}

[data-animate].stagger-5 {
    transition-delay: 0.5s;
}

[data-animate].stagger-6 {
    transition-delay: 0.6s;
}

/* --- Section headers animate slightly faster --- */
.section-header[data-animate],
.bento-header[data-animate],
.solarx-heading[data-animate],
.sx-tm__head[data-animate],
.sx2-faq__left[data-animate] {
    transition-duration: 0.6s;
}

/* --- Accessibility: respect reduced-motion preference --- */
@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   SERVICE PAGES — CSS Foundation (Ecoland-Inspired)
   ========================================================================== */

/* --- Breadcrumb --- */
.breadcrumb {
    padding: 12px 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-speed);
}

.breadcrumb a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.breadcrumb .separator {
    margin: 0 8px;
    color: #ccc;
}

/* --- Page Hero (dark bg, full-width) --- */
.page-hero {
    background: var(--color-bg-dark);
    color: var(--color-text-light);
    padding: 100px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(31, 99, 6, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.page-hero h1 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
    line-height: 1.15;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.page-hero h1 span {
    color: var(--color-accent);
}

.page-hero .hero-sub {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: rgba(255, 255, 255, 0.8);
    max-width: 700px;
    margin: 0 auto var(--spacing-md);
    line-height: 1.7;
}

.page-hero .hero-ctas {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
}

.page-hero .trust-line {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: var(--spacing-sm);
}

/* --- Trust Strip --- */
.trust-strip {
    background: rgba(31, 99, 6, 0.06);
    border-top: 1px solid rgba(31, 99, 6, 0.1);
    border-bottom: 1px solid rgba(31, 99, 6, 0.1);
    padding: 24px 0;
}

.trust-strip .container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.trust-strip .trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-primary-dark);
}

.trust-strip .trust-icon {
    color: var(--color-primary);
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* --- Content Section (generic) --- */
.content-section {
    padding: 80px 0;
}

.content-section.bg-light {
    background: var(--color-bg-light);
}

.content-section.bg-dark {
    background: var(--color-bg-dark);
    color: var(--color-text-light);
}

.content-section.bg-dark h2,
.content-section.bg-dark h3 {
    color: var(--color-text-light);
}

.section-title {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    margin-bottom: var(--spacing-md);
    line-height: 1.25;
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    max-width: 650px;
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

/* --- Split Section (two-column) --- */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.split-content h2 {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    margin-bottom: var(--spacing-sm);
}

.split-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
}

.split-content ul {
    list-style: none;
    padding: 0;
}

.split-content ul li {
    padding: 8px 0 8px 28px;
    position: relative;
    font-size: 1rem;
    color: var(--color-text-dark);
    line-height: 1.6;
}

.split-content ul li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* Qualification boxes (Best for / Not ideal) */
.qual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.qual-box {
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
    padding: 30px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.qual-box.best-for {
    border-left: 4px solid var(--color-primary);
}

.qual-box.not-ideal {
    border-left: 4px solid var(--color-accent);
}

.qual-box h3 {
    font-size: 1.15rem;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.qual-box ul {
    list-style: none;
    padding: 0;
}

.qual-box ul li {
    padding: 6px 0 6px 24px;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.6;
}

.qual-box.best-for ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

.qual-box.not-ideal ul li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: #c0392b;
    font-weight: 700;
}

/* --- Option Cards (On-Grid / Hybrid / Custom) --- */
.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.option-card {
    background: #fff;
    border: 2px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 32px 28px;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.option-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(31, 99, 6, 0.1);
}

.option-card .option-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    background: rgba(31, 99, 6, 0.08);
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.option-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.option-card p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 16px;
}

.option-card .best-for-line {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
}

/* --- Deliverables Checklist --- */
.checklist {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.checklist li {
    padding: 10px 0 10px 36px;
    position: relative;
    font-size: 1rem;
    line-height: 1.6;
}

.checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    background: rgba(31, 99, 6, 0.1);
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    top: 10px;
}

/* --- Process Timeline --- */
.svc-timeline {
    max-width: 700px;
    position: relative;
    padding-left: 40px;
}

.svc-timeline::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-primary), var(--color-accent));
}

.svc-timeline .timeline-step {
    position: relative;
    padding-bottom: 36px;
}

.svc-timeline .timeline-step:last-child {
    padding-bottom: 0;
}

.svc-timeline .timeline-step::before {
    content: attr(data-step);
    position: absolute;
    left: -40px;
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 1;
}

.svc-timeline .timeline-step h4 {
    font-size: 1.1rem;
    margin-bottom: 4px;
    color: var(--color-primary-dark);
}

.svc-timeline .timeline-step p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* --- kW Range Cards --- */
.kw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.kw-card {
    background: var(--color-bg-light);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.kw-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.kw-card h3 {
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.kw-card p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
    line-height: 1.6;
}

/* --- Net Metering Mini-Section --- */
.netmeter-box {
    background: linear-gradient(135deg, rgba(31, 99, 6, 0.04) 0%, rgba(251, 201, 26, 0.06) 100%);
    border: 1px solid rgba(31, 99, 6, 0.12);
    border-radius: 12px;
    padding: 40px;
}

.netmeter-box h2 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.netmeter-box ul {
    list-style: none;
    padding: 0;
}

.netmeter-box ul li {
    padding: 6px 0 6px 24px;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.6;
}

.netmeter-box ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.2rem;
}

/* --- Final CTA Band (dark) --- */
.cta-band {
    background: var(--color-bg-dark);
    color: var(--color-text-light);
    padding: 80px 0;
    text-align: center;
}

.cta-band h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.cta-band p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 600px;
    margin: 0 auto var(--spacing-md);
    line-height: 1.7;
}

.cta-band .hero-ctas {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.cta-band .address {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

/* --- Services Hub: Service Cards Grid --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-hub-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 36px 28px;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
}

.service-hub-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(31, 99, 6, 0.1);
    border-color: var(--color-primary);
}

.service-hub-card .svc-icon {
    width: 56px;
    height: 56px;
    background: rgba(31, 99, 6, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 20px;
}

.service-hub-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.service-hub-card p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1;
}

.service-hub-card .btn {
    align-self: flex-start;
}

/* --- Proof/Projects placeholder grid --- */
.proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.proof-card {
    background: var(--color-bg-light);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.proof-card .proof-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.proof-card .proof-meta span {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 50px;
    background: rgba(31, 99, 6, 0.08);
    color: var(--color-primary-dark);
}

.proof-card h4 {
    font-size: 1rem;
    color: var(--color-primary-dark);
}

/* --- WhatsApp Button (green) --- */
.btn-whatsapp {
    background: #25d366;
    color: #fff;
}

.btn-whatsapp::before {
    background: #1da851;
}

.btn-whatsapp:hover {
    color: #fff;
}

/* --- Outline Button --- */
.btn-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--color-text-light);
}

.btn-outline::before {
    background: rgba(255, 255, 255, 0.12);
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--color-text-light);
}

/* Dark section outline button inversion */
.bg-light .btn-outline {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.bg-light .btn-outline::before {
    background: rgba(31, 99, 6, 0.08);
}

/* ==========================================================================
   SERVICE PAGES — Responsive
   ========================================================================== */

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

@media (max-width: 768px) {
    .page-hero {
        padding: 80px 0 60px;
    }

    .content-section {
        padding: 60px 0;
    }

    .split-section {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .qual-grid {
        grid-template-columns: 1fr;
    }

    .checklist {
        grid-template-columns: 1fr;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .trust-strip .container {
        gap: 20px;
        justify-content: flex-start;
    }

    .cta-band {
        padding: 60px 0;
    }

    .netmeter-box {
        padding: 28px 20px;
    }
}

@media (max-width: 480px) {
    .page-hero {
        padding: 70px 0 50px;
    }

    .page-hero .hero-ctas {
        flex-direction: column;
        align-items: center;
    }

    .options-grid {
        grid-template-columns: 1fr;
    }

    .kw-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Process Section Dark Background --- */
.process-bg {
    background:
        linear-gradient(135deg, rgba(14, 34, 7, 0.97) 0%, rgba(31, 99, 6, 0.92) 50%, rgba(14, 34, 7, 0.97) 100%),
        repeating-linear-gradient(45deg,
            transparent,
            transparent 30px,
            rgba(251, 201, 26, 0.03) 30px,
            rgba(251, 201, 26, 0.03) 31px);
    color: var(--color-text-light);
    position: relative;
}

.process-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(251, 201, 26, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, rgba(31, 99, 6, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.process-bg .container {
    position: relative;
    z-index: 1;
}

.process-bg .section-title {
    color: #fff;
}

.process-bg .timeline-step h4 {
    color: #fff;
}

.process-bg .timeline-step p {
    color: rgba(255, 255, 255, 0.8);
}

.process-bg .svc-timeline::before {
    background: linear-gradient(to bottom, var(--color-accent), rgba(251, 201, 26, 0.3));
}

.process-bg .timeline-step::before {
    background: var(--color-accent);
    box-shadow: 0 0 16px rgba(251, 201, 26, 0.5);
}

.process-bg .timeline-step::after {
    border-color: rgba(251, 201, 26, 0.15);
}

/* --- Why Choose Us: Image + Text Split Rows --- */
.why-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 64px;
}

.why-split:last-child {
    margin-bottom: 0;
}

.why-split.reverse {
    direction: rtl;
}

.why-split.reverse>* {
    direction: ltr;
}

.why-split__img {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    position: relative;
}

.why-split__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.why-split__img--placeholder {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.15);
}

.why-split__img--placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(251, 201, 26, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 70%, rgba(31, 99, 6, 0.2) 0%, transparent 50%);
}

.why-split__text h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.why-split__text h3 .split-icon {
    font-size: 1.4rem;
}

.why-split__text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.why-split__text ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    font-size: 1.05rem;
    color: var(--color-text);
    line-height: 1.55;
}

.why-split__text ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .why-split {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 48px;
    }

    .why-split.reverse {
        direction: ltr;
    }

    .why-split__img {
        aspect-ratio: 16 / 9;
    }

    .why-split__text h3 {
        font-size: 1.35rem;
    }
}

/* --- Two Column Grid Utility --- */
.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.two-col-grid .img-col img {
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 992px) {
    .two-col-grid {
        grid-template-columns: 1fr;
    }

    .two-col-grid .img-col {
        order: -1;
        /* Image on top for mobile */
        margin-bottom: 20px;
    }
}