/* Solutions Sections */
.solution-page-hero {
    min-height: 80vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    /* Navbar space */
}

/* Overlay for readability */
.solution-page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: radial-gradient(circle at center, rgba(5, 5, 16, 0.4) 0%, rgba(5, 5, 16, 0.95) 90%);
}

.solution-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1000px;
    padding: 0 2rem;
}

.solution-hero-content h1 {
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.solution-hero-content p {
    font-size: 1.35rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
}

/* Theme Variatons */
/* WordPress: Purple/Blue */
body.theme-wordpress {
    --accent-primary: #8b5cf6;
    --accent-secondary: #3b82f6;
}

.theme-wordpress .solution-page-hero {
    background-image: url('../images/wordpress_bg.png');
}

/* AI: Cyan/Pink */
body.theme-ai {
    --accent-primary: #22d3ee;
    --accent-secondary: #e879f9;
}

.theme-ai .solution-page-hero {
    background-image: url('../images/ai_bg.png');
}

/* BI: Emerald/Blue */
body.theme-bi {
    --accent-primary: #10b981;
    --accent-secondary: #0ea5e9;
}

.theme-bi .solution-page-hero {
    background-image: url('../images/bi_bg.png');
}

/* Feature Grid */

.features-section {
    padding: 4rem 2rem;
    position: relative;
    overflow: visible;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}


.feature-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    padding: 3rem 2rem;
    border-radius: 20px;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-primary);
    box-shadow: 0 10px 30px -10px var(--accent-primary-dim, rgba(99, 102, 241, 0.1));
}

.feature-card:hover .feature-card-bg-icon {
    transform: scale(1.15) rotate(5deg) translate(-10px, -10px);
    opacity: 0.15;
}

.feature-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.feature-card p {
    color: var(--text-muted);
    font-size: 1rem;
    position: relative;
    z-index: 2;
    line-height: 1.6;
}

.feature-card-bg-icon {
    position: absolute;
    bottom: -20px;
    right: -20px;
    font-size: 10rem;
    color: var(--accent-primary);
    opacity: 0.08;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

/* Use Case / Deep Dive Section */
.deep-dive {
    padding: 5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.deep-dive-block {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 4rem;
}

.deep-dive-block:nth-child(even) {
    flex-direction: row-reverse;
}

.deep-dive-text {
    flex: 1;
}

.deep-dive-text h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.deep-dive-text p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.deep-dive-visual {
    flex: 1;
    min-height: 350px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Stat Highlight in text */
.stat-highlight {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--accent-primary);
    border-radius: 0 8px 8px 0;
    font-family: var(--font-heading);
    font-weight: 700;
    color: #fff;
    margin-top: 0.5rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .solution-page-hero {
        padding-top: 100px;
        min-height: auto;
        padding-bottom: 4rem;
    }

    .solution-hero-content h1 {
        font-size: 2.8rem;
    }

    .solution-hero-content p {
        font-size: 1.1rem;
    }

    .features-section {
        padding: 3rem 1.5rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-card {
        padding: 2rem 1.5rem;
    }

    .deep-dive {
        padding: 3rem 1.5rem;
    }

    .deep-dive-block {
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 4rem;
    }

    .deep-dive-block:nth-child(even) {
        flex-direction: column;
    }

    .deep-dive-text h2 {
        font-size: 2rem;
    }

    .feature-card-bg-icon {
        font-size: 8rem;
        bottom: -15px;
        right: -15px;
    }
}

/* Integrated Background Sections */
/* Integrated Background Sections - Card Stack Effect */
.integrated-section {
    position: sticky;
    /* Make them stick */
    top: 0;
    height: 135vh;
    /* Taller to create scroll buffer/delay */
    padding: 20vh 2rem 0 2rem;
    /* Push content down to center it in the initial view */
    overflow: hidden;
    color: #fff;
    display: flex;
    align-items: flex-start;
    /* Align top due to padding */
    justify-content: center;
    background-size: cover;
    background-position: center;
    margin-bottom: 0;
    box-shadow: 0 -5px 40px rgba(0, 0, 0, 0.8);
    /* Stronger shadow */
    transition: transform 0.1s linear, filter 0.1s linear;
}

/* Ensure subsequent cards sit on top visually if z-index is needed, 
   but DOM order handles sticky stacking naturally. */

.integrated-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Much Darker gradient for legibility */
    background: linear-gradient(to bottom, rgba(2, 2, 10, 0.95), rgba(2, 2, 10, 0.7) 40%, rgba(2, 2, 10, 0.95));
    z-index: 1;
}

/* Reset transform for sticky context */
.integrated-section:nth-child(odd) .integrated-content,
.integrated-section:nth-child(even) .integrated-content {
    transform: none;
    /* specific transform removed, handled by simple fade-in now */
}

/* Modify content to center better in full screen */
.integrated-content {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translateY(30px);
    /* Fallback */

    /* Base Visuals */
    position: relative;
    z-index: 2;
    max-width: 1000px;
    width: 100%;

    /* Grid Layout */
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: center;

    padding: 4rem;

    /* Darker, more solid background */
    background: rgba(5, 5, 12, 0.85);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    border-radius: 24px;
}

/* Override previous logic */
.integrated-section:nth-child(even) .integrated-content {
    margin: 0 auto;
    text-align: left;
    /* Reset text align */
    /* Swap columns for even sections */
    direction: rt;
    /* Hacky? No, let's just reorder via grid areas or JS class */
}

/* Better way to alternate: Order property */
.integrated-section:nth-child(even) .integrated-content div:first-child {
    order: 2;
}

/* Make content visible when active */
.integrated-section.active .integrated-content {
    opacity: 1;
    transform: translateY(0);
}

.integrated-content h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.integrated-content p {
    font-size: 1.1rem;
    color: #e0e0e0;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.integrated-list {
    list-style: none;
    margin-bottom: 2rem;
}

.integrated-list li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: inherit;
}

.integrated-list li i {
    color: var(--accent-primary);
}

@media (max-width: 1024px) {
    .integrated-section {
        padding: 1rem;
        height: auto;
        min-height: auto;
        position: relative;
        /* Reset sticky on mobile */
        display: block;
        box-shadow: none;
        margin-bottom: 2rem;
    }

    .integrated-content {
        display: block;
        /* Stack grid columns */
        padding: 2rem;
        transform: translateY(0);
        opacity: 1;
        /* Always visible on mobile */
    }

    .integrated-content div:first-child {
        order: unset !important;
        /* Reset visual order */
    }

    .integrated-list li {
        justify-content: flex-start;
    }
}

/* Fix for footer overlap: The last integrated section should not stick indefinitely 
   or we need a container. Simpler fix: Make the last one scroll away naturally 
   by giving it z-index lower or just relative position if it's the end. 
   Actually, sticky relies on a container height. Since we don't have a container, 
/* Fix for footer overlap: The last integrated section should not stick indefinitely
   or we need a container. Simpler fix: Make the last one scroll away naturally
   by giving it z-index lower or just relative position if it's the end.
   Actually, sticky relies on a container height. Since we don't have a container,
   sticky elements stick until the parent ends. */

/* Force the last stick item to scroll up by adding a spacer or margin?
   No, best way is to ensure the footer has a higher z-index and background. */

/* AI Theme Overrides - Unified Background */
.theme-ai .integrated-wrapper {
    position: relative;
    background-color: #050510;
    overflow: hidden;
    padding: 4rem 0;
    z-index: 1;
}

/* Background Soft Glow - Lowest Layer */
.theme-ai .integrated-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, rgba(34, 211, 238, 0.05) 0%, rgba(2, 2, 10, 0) 60%);
    z-index: 0;
    /* Background */
    pointer-events: none;
}

/* Particles Canvas - Layer 1 */
.theme-ai .integrated-wrapper canvas {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Just above background line */
    opacity: 0.6;
    pointer-events: none;
}

/* Sections - Layer 2 (Content Container) */
.theme-ai .integrated-section {
    position: relative;
    top: auto;
    height: auto;
    min-height: 400px;
    padding: 0 10%;
    /* Use side padding, vertical handled by gap/wrapper */
    box-shadow: none;
    margin-bottom: 4rem;
    /* Spacing between sections */
    background: transparent;
    z-index: 10;
    /* clearly above background & particles */

    /* Layout */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Remove default overlay from AI sections */
.theme-ai .integrated-section::before {
    display: none;
    content: none;
}

/* Content Box Styling - Clean & Minimal */
.theme-ai .integrated-content {
    position: relative;
    z-index: 20;
    /* Force text to top */
    width: 100%;
    max-width: 800px;
    opacity: 1;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 auto;
}

/* Visual Positioning - Clean & Bright */
.theme-ai .integrated-visual {
    position: relative;
    /* Reset absolute positioning from previous single-column attempt */
    bottom: auto;
    right: auto;
    width: 100%;
    height: 100%;
    min-height: 300px;
    z-index: 1;
    opacity: 1;
    /* Fix "too dark" issue */
    transform: none;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Remove fade mask if it makes things look "broken" or dirty */
    -webkit-mask-image: none;
    mask-image: none;
}



/* Odd Sections (1, 3): Text Left, Visual Right */
.theme-ai .integrated-section:nth-child(odd) .integrated-content {
    order: 1;
    text-align: left;
}

.theme-ai .integrated-section:nth-child(odd) .integrated-visual {
    order: 2;
}

/* Even Sections (2): Text Right, Visual Left */
.theme-ai .integrated-section:nth-child(even) .integrated-content {
    order: 2;
    text-align: right;
    margin-left: auto;
}

.theme-ai .integrated-section:nth-child(even) .integrated-visual {
    order: 1;
    justify-content: center;
    /* Center visual in its column */
}

/* Even Section List Alignment */
.theme-ai .integrated-section:nth-child(even) .integrated-list li {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

/* Center logic wrapper (if user wanted center for middle?)
   User asked "centralize everything on the your data...". 
   Let's keep the even section centered logic instead of right aligned?
   Instruction said "centralize everything". 
   So I will override the even section to be centered.
*/

/* CENTERED Even Section Override */
.theme-ai .integrated-section:nth-child(even) {
    grid-template-columns: 1fr;
    /* Stack for center alignment */
    text-align: center;
    gap: 2rem;
}

.theme-ai .integrated-section:nth-child(even) .integrated-content {
    order: 2;
    text-align: center;
    margin: 0 auto;
    max-width: 800px;
}

.theme-ai .integrated-section:nth-child(even) .integrated-visual {
    order: 1;
    justify-content: center;
    margin-bottom: 2rem;
    /* Visual on top (order 1) or bottom? 
       User said "visual... overlap a bit... background". 
       But previously asked for "centralize". 
       Let's put visual BEHIND text for center? Or standard stack?
       Standard stack Visual Icon -> Text is cleanest.
    */
    opacity: 1;
}

.theme-ai .integrated-section:nth-child(even) .integrated-list li {
    justify-content: center;
    flex-direction: row;
}

/* 1. Connection Hub Visual */
.connection-hub {
    position: relative;
    width: 300px;
    height: 300px;
}

.hub-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22d3ee;
    font-size: 2rem;
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.2);
    z-index: 2;
}

.connection-hub i.fa-brands {
    position: absolute;
    font-size: 2.5rem;
    color: #64748b;
    top: 50%;
    left: 50%;
    transform-origin: 140px;
    /* Radius from center */
    animation: orbit 24s linear infinite;
}

.connection-hub i:nth-child(1) {
    animation-delay: 0s;
}

.connection-hub i:nth-child(2) {
    animation-delay: -3s;
}

.connection-hub i:nth-child(3) {
    animation-delay: -6s;
}

.connection-hub i:nth-child(4) {
    animation-delay: -9s;
}

.connection-hub i:nth-child(5) {
    animation-delay: -12s;
}

.connection-hub i:nth-child(6) {
    animation-delay: -15s;
}

.connection-hub i:nth-child(7) {
    animation-delay: -18s;
}

.connection-hub i:nth-child(8) {
    animation-delay: -21s;
}

@keyframes orbit {
    from {
        transform: translate(-50%, -50%) rotate(0deg) translateX(140px) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg) translateX(140px) rotate(-360deg);
    }
}

/* 2. Security Shield Visual */
.security-shield {
    position: relative;
    width: 200px;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.security-shield i {
    font-size: 5rem;
    background: linear-gradient(to bottom, #ec4899, #8b5cf6);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 2;
}

.shield-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(236, 72, 153, 0.2);
    border-radius: 50%;
    animation: ping 3s infinite;
}

@keyframes ping {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* 3. ROI Metric Visual */
.roi-metric {
    text-align: center;
    /* Reset absolute positioning */
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
    width: 100%;
    height: 100%;
    min-height: 300px;
    z-index: 5;
    opacity: 1;
    transform: none;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Remove fade mask if it makes things look "broken" or dirty */
    -webkit-mask-image: none;
    mask-image: none;
}

.roi-metric .count {
    display: block;
    font-size: 6rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    text-shadow: 0 0 50px rgba(255, 255, 255, 0.1);
}

.roi-metric .label {
    display: block;
    font-size: 1.5rem;
    color: #94a3b8;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Mobile Adjustment for AI Theme */
@media (max-width: 1024px) {
    .theme-ai .integrated-section {
        grid-template-columns: 1fr;
        /* Stack */
        padding: 4rem 1.5rem;
        text-align: center;
    }

    .theme-ai .integrated-section:nth-child(even) {
        direction: ltr;
        /* Reset visual flip */
    }

    .theme-ai .integrated-visual {
        min-height: 250px;
        order: -1;
        /* Visual on top */
        position: relative;
        inset: auto;
        transform: none;
        width: 100%;
        opacity: 1;
    }

    .theme-ai .integrated-content {
        padding: 0;
    }

    .theme-ai .integrated-list {
        display: inline-block;
        text-align: left;
    }
}

footer,
.contact {
    position: relative;
    z-index: 10;
    background: #000;
    /* Ensure opaque background to cover sticky items */
}

/* Chart Animation Keyframes */
@keyframes riseUpArea {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes drawLine {
    0% {
        stroke-dasharray: 2000;
        stroke-dashoffset: 2000;
        opacity: 0;
    }

    100% {
        stroke-dasharray: 2000;
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* Money Float Animation */
@keyframes moneyFloat {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(-800px) rotate(720deg);
        opacity: 0;
    }
}