:root {
    --primary-color: #6C63FF;
    /* Modern Purple/Blue */
    --secondary-color: #2F2E41;
    /* Dark Navy */
    --accent-color: #00D2D3;
    /* Tech Cyan */
    --text-color: #333333;
    --bg-color: #FFFFFF;
    --light-gray: #F4F6F8;

    --slide-width: 297mm;
    --slide-height: 210mm;
    --slide-padding: 15mm;
}

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

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #555;
    /* Dark background for screen viewing to make pages pop */
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

/* SLIDE CONTAINER STYLES */
.slide {
    background-color: var(--bg-color);
    width: var(--slide-width);
    height: var(--slide-height);
    padding: var(--slide-padding);
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* PRINT STYLES */
@media print {
    body {
        background-color: white;
        padding: 0;
        display: block;
    }

    .slide {
        width: 100%;
        height: 100vh;
        /* Force full page height */
        margin: 0;
        box-shadow: none;
        page-break-after: always;
        /* Crucial for PDF generation */
        break-after: page;
        border: none;
    }
}

/* TYPOGRAPHY */
h1,
h2,
h3,
h4 {
    font-family: 'Montserrat', sans-serif;
}

/* COVER SLIDE */
.slide.cover {
    justify-content: center;
    align-items: flex-start;
    color: white;
    /* Text over image */
}

.slide.cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(47, 46, 65, 0.9) 0%, rgba(108, 99, 255, 0.8) 100%);
    z-index: 1;
}

.cover-content {
    position: relative;
    z-index: 2;
    max-width: 60%;
}

.brand-name {
    font-size: 5em;
    font-weight: 900;
    letter-spacing: -2px;
    margin-bottom: 10px;
    background: linear-gradient(to right, #fff, #00D2D3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.project-title {
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 20px;
}

.subtitle {
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.9;
}

.cover-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-bar {
    position: absolute;
    bottom: var(--slide-padding);
    left: var(--slide-padding);
    padding-right: var(--slide-padding);
    width: calc(100% - 2 * var(--slide-padding));
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 10px;
    color: white;
    font-size: 0.8em;
    z-index: 2;
    text-align: right;
}

/* STANDARD SLIDE HEADER */
.slide-header {
    margin-bottom: 30px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 15px;
}

.slide-header h3 {
    color: var(--primary-color);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 1px;
}

.slide-header h2 {
    font-size: 2.5em;
    color: var(--secondary-color);
    font-weight: 700;
}

/* CONTENT GRID */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 Column Layout */
    gap: 40px;
    flex-grow: 1;
    align-items: center;
}

.text-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.text-column p {
    line-height: 1.6;
    color: #555;
    font-size: 1.1em;
}

.highlight-box {
    background-color: var(--light-gray);
    padding: 20px;
    border-left: 5px solid var(--primary-color);
    border-radius: 4px;
}

.highlight-box.blue {
    border-left-color: var(--accent-color);
}

.highlight-box h4 {
    margin-bottom: 10px;
    color: var(--secondary-color);
}

.highlight-box ul {
    list-style-position: inside;
}

.highlight-box li {
    margin-bottom: 5px;
    font-size: 0.95em;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-item h4 {
    color: var(--primary-color);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* VISUAL COLUMN & IMAGES */
.visual-column {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.feature-image {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* CONCEPT CARDS (SLIDE 2) */
.concept-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    width: 100%;
    border: 1px solid #eee;
}

.concept-card.active {
    border: 2px solid var(--accent-color);
    background: #E0FBFB;
}

.icon-chaos,
.icon-partimos {
    font-size: 2em;
    margin-bottom: 10px;
}

.arrow-down {
    font-size: 1.5em;
    color: var(--primary-color);
    margin: 10px 0;
}

/* MATH BOX (SLIDE 5) */
.math-box {
    background: var(--secondary-color);
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    font-family: 'Courier New', monospace;
    margin-bottom: 20px;
}

.formula {
    display: block;
    margin-top: 10px;
    font-size: 1.2em;
    color: var(--accent-color);
}

/* BRANDING (SLIDE 7) */
.brand-highlight {
    font-size: 3em;
    font-weight: 900;
    color: var(--primary-color);
}

.slogan {
    font-size: 1.5em;
    font-style: italic;
    color: var(--secondary-color);
    margin-bottom: 30px !important;
}

.final-cta {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
}

.final-cta h3 {
    color: white;
    margin-bottom: 15px;
}

.final-cta p {
    color: rgba(255, 255, 255, 0.9);
}

.contact-info {
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
}

/* RESPONSIVE STYLES (MOBILE & TABLET) */
@media screen and (max-width: 1100px) {
    body {
        padding: 0;
        background-color: var(--bg-color);
        /* Seamless background on mobile */
    }

    .slide {
        width: 100%;
        height: auto;
        min-height: 100vh;
        /* Full screen feel */
        margin-bottom: 0;
        box-shadow: none;
        padding: 40px 20px;
        border-bottom: 1px solid #eee;
    }

    .slide.cover {
        text-align: center;
        align-items: center;
        justify-content: center;
        padding-top: 80px;
    }

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

    .brand-name {
        font-size: 3.5rem;
    }

    .project-title {
        font-size: 1.5rem;
    }

    .content-grid {
        grid-template-columns: 1fr;
        /* Stack columns */
        gap: 30px;
        display: flex;
        flex-direction: column;
    }

    /* Control order: Visual first for engagement, or Text first for context? 
       Usually Text -> Visual is safer for narrative, but for "features" (Slide 3, 4, 5, 6) 
       alternating in desktop might be fine, but on mobile we usually want Image then Text 
       OR Text then Image. 
       Let's stick to DOM order (Text then Visual usually in my HTML) 
       BUT wait, looking at HTML logic:
       Slide 3: Visual, Text
       Slide 4: Text, Visual
       Slide 5: Visual, Text
       Slide 6: Text, Visual
       
       To make it consistent on mobile (e.g., Image always top or bottom), 
       we can use order. Let's try to put Images First on mobile for visual impact. 
    */

    .visual-column {
        order: -1;
        width: 100%;
    }

    .feature-image {
        max-height: 300px;
        width: 100%;
        object-fit: contain;
    }

    .text-column {
        width: 100%;
    }

    .slide-header h2 {
        font-size: 1.8em;
    }

    .footer-bar {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
        margin-top: 40px;
        text-align: center;
        padding-right: 0;
    }

    /* Adjust specific elements for mobile legibility */
    .highlight-box,
    .math-box,
    .final-cta {
        padding: 15px;
    }

    .brand-name {
        letter-spacing: -1px;
    }
}