/* --- Global Styles & Variables --- */
:root {
    --primary-color: #707be0;
    --primary-color-dark: #5a64d1;
    --primary-color-transparent: #707be01a;
    --primary-color-shadow: #707be044;
    --white-color: #ffffff;
    --text-color: #212529; /* Dark text */
    --text-secondary: #5a5a5a; /* Lighter dark text */
    
    /* UPDATED: Semi-transparent backgrounds for global canvas */
    --light-bg: rgba(255, 255, 255, 0.95);
    --light-bg-secondary: rgba(248, 249, 250, 0.95);

    --border-color: #dee2e6;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Chakra Petch', 'Inter', sans-serif;
    /* UPDATED: Body background is transparent to show canvas */
    background-color: transparent; 
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    font-weight: 400;
}

/* --- NEW: Global Particle Canvas --- */
#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind all content */
    
    /* UPDATED: Default state is NOT blurred */
    filter: blur(0px); 
    opacity: 0.7; /* Make it subtle */
    
    /* UPDATED: Add transition for the blur effect */
    transition: filter 0.5s ease-out;
}

/* UPDATED: New class to be added by JavaScript */
#particleCanvas.blurred {
    filter: blur(3px);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 1rem;
    line-height: 1.2;
}

p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    /* UPDATED: Bolder text */
    font-weight: 500;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

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

/* --- Section Styling --- */
.section {
    padding: 6rem 0;
    overflow: hidden;
    /* UPDATED: All sections have a background to be readable */
    background-color: var(--light-bg);
    position: relative; /* Ensure sections stack correctly */
}

/* Alternating background colors for sections */
.solution-section,
.ai-section,
.impact-section,
.business-section {
    background-color: var(--light-bg-secondary);
}

.section-title {
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
    letter-spacing: 1px;
}

.section-subtitle {
    font-size: 1.2rem;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem auto;
    color: var(--text-secondary);
    font-weight: 400;
}

/* --- Hero Section --- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center; 

    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-color: transparent; /* Hero is transparent over canvas */
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 2.5rem;
    /* Add a subtle backdrop for readability */
    background: var(--light-bg); 
    backdrop-filter: blur(5px);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.hero-badge {
    position: absolute;
    top: -15px;
    right: 20px;
    background: var(--primary-color);
    color: var(--white-color);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
}

.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary-color);
    margin: 0.5rem 0 1.5rem 0;
    font-family: 'Orbitron', sans-serif;
}

.hero-tagline {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    font-weight: 500;
}

.cta-button {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--white-color);
    background: var(--primary-color);
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.cta-button:hover {
    background: var(--primary-color-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px var(--primary-color-shadow);
}

/* --- Glitch Text Animation (Light Theme) --- */
.glitch {
    font-family: 'Orbitron', sans-serif;
    font-size: 5rem;
    font-weight: 900;
    position: relative;
    animation: glitch-skew 1s infinite linear alternate-reverse;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--primary-color);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 #FF00FF, 2px 2px var(--primary-color-dark);
    clip: rect(86px, 450px, 140px, 0);
    animation: glitch-anim-2 5s infinite linear alternate-reverse;
}

/* Keyframes remain the same */
@keyframes glitch-anim { 0% { clip: rect(48px, 9999px, 89px, 0); } 5% { clip: rect(15px, 9999px, 66px, 0); } 10% { clip: rect(42px, 9999px, 7px, 0); } 15% { clip: rect(82px, 9999px, 47px, 0); } 20% { clip: rect(21px, 9999px, 80px, 0); } 25% { clip: rect(5px, 9999px, 93px, 0); } 30% { clip: rect(49px, 9999px, 63px, 0); } 35% { clip: rect(3px, 9999px, 51px, 0); } 40% { clip: rect(32px, 9999px, 86px, 0); } 45% { clip: rect(69px, 9999px, 39px, 0); } 50% { clip: rect(49px, 9999px, 91px, 0); } 55% { clip: rect(6px, 9999px, 38px, 0); } 60% { clip: rect(30px, 9999px, 17px, 0); } 65% { clip: rect(5px, 9999px, 67px, 0); } 70% { clip: rect(48px, 9999px, 98px, 0); } 75% { clip: rect(66px, 9999px, 45px, 0); } 80% { clip: rect(12px, 9999px, 60px, 0); } 85% { clip: rect(60px, 9999px, 52px, 0); } 90% { clip: rect(10px, 9999px, 89px, 0); } 95% { clip: rect(3px, 9999px, 100px, 0); } 100% { clip: rect(24px, 9999px, 75px, 0); } }
@keyframes glitch-anim-2 { 0% { clip: rect(28px, 9999px, 79px, 0); } 5% { clip: rect(98px, 9999px, 34px, 0); } 10% { clip: rect(33px, 9999px, 1px, 0); } 15% { clip: rect(5px, 9999px, 50px, 0); } 20% { clip: rect(51px, 9999px, 40px, 0); } 25% { clip: rect(23px, 9999px, 91px, 0); } 30% { clip: rect(90px, 9999px, 46px, 0); } 35% { clip: rect(35px, 9999px, 2px, 0); } 40% { clip: rect(21px, 9999px, 67px, 0); } 45% { clip: rect(31px, 9999px, 84px, 0); } 50% { clip: rect(40px, 9999px, 51px, 0); } 55% { clip: rect(14px, 9999px, 7px, 0); } 60% { clip: rect(47px, 9999px, 42px, 0); } 65% { clip: rect(43px, 9999px, 100px, 0); } 70% { clip: rect(3px, 9999px, 31px, 0); } 75% { clip: rect(49px, 9999px, 25px, 0); } 80% { clip: rect(18px, 9999px, 56px, 0); } 85% { clip: rect(8px, 9999px, 57px, 0); } 90% { clip: rect(16px, 9999px, 86px, 0); } 95% { clip: rect(58px, 9999px, 33px, 0); } 100% { clip: rect(87px, 9999px, 76px, 0); } }
@keyframes glitch-skew { 0% { transform: skew(1deg); } 10% { transform: skew(0deg); } 20% { transform: skew(-2deg); } 30% { transform: skew(3deg); } 40% { transform: skew(0deg); } 50% { transform: skew(0deg); } 60% { transform: skew(-1deg); } 70% { transform: skew(0deg); } 80% { transform: skew(2deg); } 90% { transform: skew(0deg); } 100% { transform: skew(0deg); } }

/* --- Scroll Animation --- */
.scroll-animate {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Problem Section --- */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.problem-card {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    border-left: 4px solid var(--primary-color);
    transition: all 0.3s ease;
}

.problem-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.problem-card h3 {
    color: var(--primary-color);
}

/* --- Solution Section --- */
.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.solution-card {
    background: var(--light-bg-secondary); /* Matches section bg */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    /* UPDATED: Left-aligned */
    text-align: left; 
    transition: all 0.3s ease;
}

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

/* --- NEW: SVG Icon Styling --- */
.card-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 1rem;
    display: inline-block;
    background-color: var(--primary-color-transparent);
    width: 60px;
    height: 60px;
    padding: 12px; /* Padding for SVG */
    border-radius: 50%;
    text-align: center;
    color: var(--primary-color);
}

.card-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--primary-color);
}

/* --- AI Section --- */
.ai-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
}

.ai-card {
    background: var(--light-bg-secondary); /* Matches section bg */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
}

.ai-card h3 {
    color: var(--primary-color);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}

.stat-card {
    background: var(--light-bg-secondary); /* Matches section bg */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
}

.stat-number {
    font-size: 3.5rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

.stat-label {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    font-weight: 500;
}

/* --- API Section --- */
.api-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.api-feature {
    padding: 1.5rem;
    background: var(--light-bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.api-feature h3 {
    color: var(--primary-color);
}

.code-demo {
    background-color: #f5f2f0; /* Light code block */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    padding: 1.5rem;
}

.code-demo pre {
    margin: 0;
}

.code-demo code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: #333; /* Dark text for code */
}

/* --- Impact Section --- */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.impact-card {
    background: var(--light-bg-secondary); /* Matches section bg */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    /* UPDATED: Left-aligned */
    text-align: left;
    border-bottom: 4px solid var(--primary-color);
    transition: all 0.3s ease;
}

.impact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.impact-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 1rem;
    display: inline-block;
    background-color: var(--primary-color-transparent);
    width: 60px;
    height: 60px;
    padding: 12px;
    border-radius: 50%;
    text-align: center;
}

.impact-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--primary-color);
}

.impact-card h3 {
    font-size: 2rem;
    color: var(--primary-color);
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
}

/* --- Advantage Section --- */
.advantage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.advantage-card {
    background: var(--light-bg); /* Matches section bg */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    transition: all 0.3s ease;
}

.advantage-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.advantage-icon {
    font-size: 2rem;
    color: var(--primary-color);
    line-height: 1;
    margin-top: 5px;
    flex-shrink: 0; /* Prevent icon from shrinking */
    
    /* SVG Container */
    width: 40px;
    height: 40px;
}

.advantage-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--primary-color);
}


/* --- Business Model Section --- */
.business-flow {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Make cards same height */
    gap: 2rem;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.business-card {
    background: var(--light-bg-secondary); /* Matches section bg */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    flex-basis: 300px; /* Base width */
    /* UPDATED: Removed flex-grow for more uniform wrapping */
    border-top: 4px solid var(--primary-color);
}

.business-card h3 {
    color: var(--primary-color);
}

.flow-arrow {
    display: flex;
    align-items: center;
    font-size: 2rem;
    color: var(--primary-color);
    font-family: 'Orbitron', sans-serif;
}

/* --- Footer --- */
.footer {
    padding: 2rem 0;
    background-color: var(--light-bg-secondary);
    border-top: 1px solid var(--border-color);
    text-align: center;
    position: relative; /* Ensure footer is on top of canvas */
}

.footer p {
    margin: 0;
    color: var(--text-secondary);
    font-weight: 500;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .section-title {
        font-size: 2.2rem;
    }
    .glitch {
        font-size: 3.5rem;
    }
    .hero-subtitle {
        font-size: 1.25rem;
    }

    .problem-grid,
    .solution-grid,
    .impact-grid,
    .api-features {
        grid-template-columns: 1fr;
    }
    
    .ai-grid,
    .advantage-grid {
        grid-template-columns: 1fr;
    }

    .business-flow {
        flex-direction: column;
    }
    .flow-arrow {
        transform: rotate(90deg);
        margin: 0.5rem 0;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 4rem 0;
    }
    .section-subtitle {
        margin-bottom: 2rem;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .glitch {
        font-size: 2.8rem;
    }
    .hero-subtitle {
        font-size: 1.1rem;
    }
    .hero-content {
        padding: 1.5rem;
        width: 90%; /* Ensure it doesn't touch edges */
    }
}
/* --- How It Works Section --- */
.workflow-section {
    background-color: var(--light-bg); /* Use the main light bg */
}

.workflow-diagram {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Make cards same height */
    gap: 1.5rem; /* Slightly less gap */
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.workflow-step {
    background: var(--light-bg-secondary); /* Use the off-white bg */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    flex-basis: 260px; /* Base width for 4 cards */
    flex-grow: 1;
    border-top: 4px solid var(--primary-color);
    text-align: left; /* Aligned text */
}

.workflow-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 1rem;
    display: inline-block;
    background-color: var(--primary-color-transparent);
    width: 60px;
    height: 60px;
    padding: 12px; /* Padding for SVG */
    border-radius: 50%;
    text-align: center;
    color: var(--primary-color);
}

.workflow-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--primary-color);
}

.workflow-step h3 {
    color: var(--primary-color);
    font-size: 1.3rem; /* Slightly smaller for 4 steps */
}

.workflow-arrow {
    display: flex;
    align-items: center;
    font-size: 2rem;
    color: var(--primary-color);
    font-family: 'Orbitron', sans-serif;
}

/* Responsive adjustments for the new section */
@media (max-width: 1200px) {
    .workflow-diagram {
        /* Allow 2x2 grid on tablets */
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .workflow-arrow {
        /* Hide arrows and use grid gaps */
        display: none;
    }
}

@media (max-width: 768px) {
    .workflow-diagram {
        /* Stack to 1 column on mobile */
        grid-template-columns: 1fr;
    }
}