/* =========================================
   Product Showcase v2 (XivoForge)
   ========================================= */

:root {
    --xv-primary: #002340;
    --xv-primary-dark: #001629;
    --xv-accent: #0cbcdb;
    --xv-accent-hover: #09a8c4;
    --xv-accent-glow: rgba(12, 188, 219, 0.25);
    --xv-accent-subtle: rgba(12, 188, 219, 0.08);
    --xv-text-light: #ffffff;
    --xv-text-dim: #B8C8D8;
    --xv-text-dark: #333333;
    --xv-bg-light: #f4f6f8;
    --xv-border-dark: rgba(12, 188, 219, 0.15);
}

/* Base Setup */
.xv-container {
    width: 100%;
    max-width: 1280px; /* Wider container */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.xv-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .xv-section { padding: 64px 0; }
}

.xv-dark-bg { background-color: var(--xv-primary); color: var(--xv-text-light); }
.xv-darker-bg { background-color: var(--xv-primary-dark); color: var(--xv-text-light); }
.xv-light-bg { background-color: var(--xv-bg-light); color: var(--xv-text-dark); }

.center { text-align: center; }
.relative { position: relative; }
.z-10 { z-index: 10; }

/* Typography */
h1, h2, h3 { line-height: 1.1; margin-bottom: 20px; }
h2 { font-size: 2.5rem; font-weight: 700; }
.xv-section-header h2 { max-width: 800px; margin: 0 auto 1.5rem auto; }
.xv-section-header p { font-size: 1.25rem; color: var(--xv-text-dim); max-width: 700px; margin: 0 auto; }
.xv-light-bg .xv-section-header p { color: #666; }
.xv-dark-text { color: var(--xv-primary) !important; }
.xv-text-gray { color: #666 !important; }
.xv-highlight { color: var(--xv-accent); }
.xv-light-text { color: #fff; }

/* --- Buttons --- */
.xv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px; /* Tech look */
    transition: all 0.3s ease;
    cursor: pointer;
    line-height: normal;
}
.xv-btn-primary, .btn-primary {
    background-color: var(--xv-accent);
    color: #fff;
    border: 1px solid var(--xv-accent);
    box-shadow: 0 0 15px var(--xv-accent-glow);
}
.xv-btn-primary:hover, .btn-primary:hover {
    background-color: #fff;
    color: var(--xv-accent);
    transform: translateY(-2px);
    box-shadow: 0 0 25px var(--xv-accent-glow);
}
.xv-btn-outline, .btn-secondary {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
}
.xv-btn-outline:hover, .btn-secondary:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.05);
}
.xv-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.xv-cta-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center; /* Always centered for CTA */
}
@media (max-width: 768px) {
    .xv-hero-actions, .xv-cta-actions { justify-content: center; }
}

/* --- 1. HERO SECTION --- */
.xv-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at center, var(--xv-primary) 0%, var(--xv-primary-dark) 100%);
   
    padding-top: 80px; /* Nav spacing */
}
.xv-hero-grid-overlay {
    position: absolute;
    inset: 0;
    /* Increased opacity from 0.05 to 0.1 for visibility */
    background-image: 
        linear-gradient(rgba(12, 188, 219, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12, 188, 219, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    pointer-events: none;
    z-index: 1;
}

.xv-hero .xv-container { display: flex; align-items: center; gap: 40px; }
.xv-hero-content { flex: 1; min-width: 50%; }
.xv-hero-visual { flex: 1; display: flex; justify-content: center; perspective: 1000px; }

@media (max-width: 991px) {
    .xv-hero .xv-container { flex-direction: column; text-align: center; padding-top: 40px; }
    .xv-hero-visual { width: 100%; margin-top: 40px; }
    .xv-hero-actions { justify-content: center; }
}

.xv-hero-title {
    font-size: 4rem; /* 64px */
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
    color: #fff;
}
.xv-hero-title strong, .xv-hero-title span.highlight {
    color: var(--xv-accent);
}
.xv-hero-sub {
    font-size: 1.25rem;
    color: var(--xv-text-dim);
    margin-bottom: 2.5rem;
    line-height: 1.6;
    max-width: 600px;
}
.xv-hero-trust { margin-top: 40px; }
.xv-hero-trust-line {
    font-size: 0.9rem;
    color: var(--xv-accent);
    font-family: monospace;
    letter-spacing: 0.5px;
    opacity: 0.9;
    
    /* Absolute positioning at bottom */
    position: absolute;
    bottom: -60px; /* Push it down slightly outside the main content flow but still visible */
    left: 0;
    width: 100%;
}

@media (max-width: 991px) {
    .xv-hero-trust-line {
        position: relative;
        bottom: auto;
        margin-top: 40px;
        text-align: center;
    }
}

/* Mockup */
.xv-mockup-wrapper {
    position: relative;
    transform: rotateY(-10deg) rotateX(5deg);
    transition: transform 0.5s ease;
    box-shadow: -20px 20px 60px rgba(0,0,0,0.5);
    border-radius: 8px;
    background: #1e1e1e;
    max-width: 100%;
}
.xv-mockup-wrapper:hover {
    transform: rotateY(0) rotateX(0);
}
.xv-mockup-img {
    display: block;
    width: 1200px; /* Increased from 600px */
    max-width: 100%; /* Ensure responsiveness */
    height: 350px; /* Increased from 300px */
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}
.xv-float-badge {
    position: absolute;
    top: -20px;
    right: -20px;
    background: #1e1e1e;
    color: var(--xv-accent);
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    border: 1px solid var(--xv-accent);
    z-index: 2;
}

/* Animations */
.fade-in-up { opacity: 0; animation: fadeUp .8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* --- Grids --- */
.xv-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}
@media (max-width: 991px) { .xv-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .xv-grid-3 { grid-template-columns: 1fr; } }

/* --- 2. PROBLEM CARDS --- */
.xv-card-dark {
    background: var(--xv-primary-dark);
    border: 1px solid var(--xv-border-dark);
    padding: 30px;
    border-radius: 8px;
    transition: all 0.3s;
    height: 100%; /* Ensure full height */
}
.xv-card-dark:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-color: var(--xv-accent);
    transform: translateY(-5px);
}
.xv-card-icon { color: var(--xv-accent); margin-bottom: 20px; }
.xv-card-icon svg { width: 40px; height: 40px; stroke: var(--xv-accent); }
.xv-card h3 { font-size: 1.25rem; font-weight: 700; color: #fff; }
.xv-card p { font-size: 0.95rem; color: var(--xv-text-dim); line-height: 1.6; margin: 0; }
.xv-problem-transition { margin-top: 60px; }
.xv-lead-text { font-size: 1.5rem; color: #fff; font-weight: 300; }

/* --- 3. PROCESS (STEPS) --- */
.xv-process-grid {
    display: grid;
    /* Columns: Step 1, Arrow, Step 2, Branch, Stack(Step3/4) */
    grid-template-columns: 1fr 40px 1fr 100px 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 60px;
    padding: 0 20px;
    position: relative;
}

.xv-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    width: 100%; 
}

/* Kachel-Design (Card Wrapper) */
.xv-step-card {
    background: #fff;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 280px; /* Limit width */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.xv-step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Step 1 & 2 are single items in their columns */
.xv-step-item:nth-child(1) { grid-column: 1; }
.xv-step-connector:nth-child(2) { grid-column: 2; }
.xv-step-item:nth-child(3) { grid-column: 3; }
.xv-step-branch-node { grid-column: 4; }
.xv-step-parallel-container { grid-column: 5; }


.xv-step-icon {
    width: 80px;
    height: 80px;
    background: #f4f8fa; /* Light contrast inside card */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.xv-proc-icon {
    width: 40px;
    height: 40px;
}

.xv-step-num {
    font-size: 3.5rem;
    font-weight: 900;
    color: #95f2fe; /* Valid Solid Color */
    opacity: 1;
    line-height: 1;
    position: absolute;
    top: 10px;
    right: 15px; /* Corner position */
    z-index: 0;
    pointer-events: none;
}

.xv-step-item h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--xv-primary);
    margin: 0;
    z-index: 2;
    position: relative;
    white-space: normal;
}

/* Parallel Container for Step 3 and 4 */
.xv-step-parallel-container {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Space between steps */
    justify-content: center;
}

/* Branch Node - The visual connector */
.xv-step-branch-node {
    position: relative;
    width: 100%;
    height: 100%; 
    min-height: 200px; /* Ensure enough height for the spread */
    display: flex;
    align-items: center;
}

/* 
   We need the branch lines to originate from the CENTER LEFT of this cell (matching Step 2)
   and point to the CENTER LEFT of the Step 3/Step 4 icons.
   
   Since Step 2 is centered in the Grid Row, its center line is the Grid Row Center.
   The Branch Node is also centered.
   So y=50% of the branch node is the center line.
   
   Step 3 and Step 4 are offset vertically.
   We need to calculate the angle to point to them.
   
   Let's use absolute positioning relative to the grid container? No, too hard to maintain.
   Let's trust the height.
*/

.xv-branch-u, .xv-branch-d {
    position: absolute;
    left: 0;
    width: 110%; /* Reach slightly into the next column */
    height: 2px;
    background: var(--xv-accent);
    transform-origin: 0 50%; /* Pivot from left center */
}

/* 
   The gap in parallel container is 40px.
   The items themselves are ~180px tall (Icon 100 + Margin 25 + Text).
   So center-to-center distance between Step 3 and Step 4 is approx 180 + 40 = 220px.
   Distance from center line to Step 3 center = 110px.
   Width of branch node = 100px.
   
   Angle = atan(110 / 100) ~= 48 degrees.
   
   Let's try to target the specific icon height.
   Top of container to Center of Top Icon = 50px.
   Center of Top Icon to Center of Bottom Icon = (100/2) + 25 + TextHeight + 40 + (100/2)... tricky.
*/

.xv-branch-u {
    top: 50%;
    transform: rotate(-35deg); /* Point Up */
}

.xv-branch-d {
    top: 50%;
    transform: rotate(35deg); /* Point Down */
}

/* Arrow heads */
.xv-branch-u::after, .xv-branch-d::after {
    content: '';
    position: absolute;
    right: 0;
    top: -4px;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--xv-accent);
    border-right: 2px solid var(--xv-accent);
    transform: rotate(45deg);
}


.xv-step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Replace text arrow with CSS arrow for consistent weight */
    font-size: 0; /* Hide text */
    color: transparent;
    
    position: relative;
    width: 40px; /* Explicit width for the arrow line */
    height: 2px;
    background: var(--xv-accent); /* The shaft of the arrow */
    
    /* Align with the Icon Center Line */
    padding-bottom: 0px; /* Reset padding, use margin/transform correctly */
    margin-bottom: 60px; /* Push it up visually */
}

/* Arrow Head for Straight Connector */
.xv-step-connector::after {
    content: '';
    position: absolute;
    right: 0;
    top: -4px; /* Center (height 10 - line 2)/2? No. width 10px -> diag ~7px. */
    /* If arrow head size is 10px and border is 2px... */
    /* Let's match the branch arrow heads exactly */
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--xv-accent);
    border-right: 2px solid var(--xv-accent);
    transform: rotate(45deg);
    /* Fine tune vertical alignment */
    /* The line is 2px high. Top is at 0. */
    /* Border top of rotated square is the top-left edge. */
    /* We need to shift it so the point aligns with the line center. */
    top: -4px; 
}

/* Fix Branch Node Origin as well */
.xv-step-branch-node {
    /* Align the origin point with the icons */
    padding-bottom: 60px; 
}


/* Mobile Reset */
@media (max-width: 991px) {
    .xv-process-grid {
        display: flex;
        flex-direction: column;
        gap: 40px;
        align-items: center; /* Center everything */
    }
    
    .xv-step-branch-node {
        display: none;
    }
    
    /* Straight Connectors become vertical */
    .xv-step-connector {
        display: none;
    }

    /* Reset Parallel Container to be just another vertical stack */
    .xv-step-parallel-container {
        gap: 40px;
        position: relative;
        align-items: center;
        width: 100%;
        margin-top: 0;
    }

    /* Add a vertical arrow before Step 3 (first child of parallel) */
    .xv-step-parallel-container::before {
        display: none;
    }
    /* Add arrow head to this pseudo connector */
    .xv-step-parallel-container::after {
        display: none;
    }

    /* Reset Grid selections */
    .xv-step-item,
    .xv-step-parallel-container {
        grid-column: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; 
    }
    
    .xv-step-card {
        max-width: 100%; 
        width: 100%;
        max-width: 350px; 
        /* Ensure there's padding-top to accommodate number if we move it or scale it down */
        padding-top: 40px; 
    }
    
    /* Mobile adjustments for the Number to prevent overlap */
    .xv-step-num {
        font-size: 2.5rem; /* Smaller number on mobile */
        top: 5px;
        right: 10px;
        text-shadow: 2px 2px 0px #fff; /* Outline effect to separate from icon if they touch */
        z-index: 2; /* Bring it above icon if necessary, though overlapping looks bad */
    }
}

@media (max-width: 600px) {
    .xv-hero-title { font-size: 2.5rem; }
    .xv-big-cta-title { font-size: 2rem; }
    .xv-section { padding: 60px 0; }
    
    .xv-btn { width: 100%; } /* Block buttons on small screens */
    .xv-hero-actions, .xv-cta-actions { flex-direction: column; width: 100%; }
}


/* --- 4. FEATURE CARDS --- */
.xv-feat-item {
    background: rgba(255,255,255,0.03);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: background 0.2s;
    display: flex;
    gap: 20px;
}
.xv-feat-item:hover { background: rgba(255,255,255,0.06); }
.xv-feat-check { color: var(--xv-accent); flex-shrink: 0; margin-top: 5px; }
.xv-feat-check svg { width: 24px; height: 24px; stroke: var(--xv-accent); }
.xv-feature-card {
    background: var(--xv-primary);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 30px;
    border-radius: 6px;
}
.xv-feature-card:hover { background: rgba(255,255,255,0.03); }
.xv-feat-head h3 { color: #fff; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; }
.xv-feature-card p { color: var(--xv-text-dim); font-size: 0.95rem; }

/* --- 5. DEMO STAGE --- */
.xv-demo-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
}
@media (max-width: 991px) { 
    .xv-demo-stage { flex-direction: column; } 
    .xv-demo-arrow { transform: rotate(90deg); margin: 20px 0; } 
}

.xv-demo-block { flex: 1; max-width: 500px; width: 100%; min-width: 300px; }
.xv-paper-stack {
    background: #f0e6d2; /* Warmer Beige Paper */
    color: #2c2c2c;
    padding: 40px; /* More padding like the image */
    box-shadow: 2px 3px 10px rgba(0,0,0,0.05); /* Softer shadow */
    border: 1px solid #f0e6d2;
    font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; 
    min-height: 250px;
    transform: rotate(-1.5deg); /* Slight tilt matching image */
}
.xv-digital-card {
    background: #1e1e1e;
    border-radius: 8px;
    overflow: hidden;
    min-height: 250px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    transform: rotate(1deg);
}
.xv-code-header {
    background: #252526;
    padding: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: #555; }
.badge-devops {
    margin-left: auto;
    background: #0078d7;
    color: white;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: sans-serif;
}
.xv-code-body { padding: 25px; color: #d4d4d4; font-family: 'Consolas', monospace; font-size: 0.95rem; line-height: 1.6; }

/* --- Azure DevOps Tree Demo --- */
.xv-ado-tree {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.85rem;
}
.xv-ado-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #2d2d30;
    border-left: 3px solid transparent;
    margin-bottom: 4px;
    border-radius: 2px;
    transition:  0.2s;
}
.xv-ado-item:hover { background: #3e3e42; }

.xv-ado-children {
    padding-left: 20px;
    position: relative;
}
.xv-ado-children::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 10px;
    width: 1px;
    background: rgba(255,255,255,0.1);
}

.xv-ado-epic { border-left-color: #ff7b00; } /* Orange Epic */
.xv-ado-feature { border-left-color: #773b93; } /* Purple Feature */
.xv-ado-story { border-left-color: #009ccc; } /* Blue User Story */
.xv-ado-task { border-left-color: #f2cb1d; } /* Yellow Task */

.xv-ado-type {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #aaa;
    margin-right: 4px;
    min-width: 65px;
    display: inline-block;
}
.xv-ado-title {
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xv-ado-icon { font-size: 1rem; line-height: 1; }

.xv-demo-label { text-align: center; margin-top: 15px; font-weight: bold; color: var(--xv-primary); opacity: 0.5; }
.xv-demo-arrow { font-size: 2rem; color: #002340; }

/* --- 6. TARGET PERSONAS --- */
.xv-persona {
    background: var(--xv-primary-dark);
    padding: 30px;
    border-radius: 8px;
    position: relative;
    border-top: 4px solid var(--xv-accent);
}
.xv-persona-avatar {
    width: 80px;
    height: 80px;
    background: #003366;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
}
.xv-quote-icon { font-size: 2rem; color: var(--xv-accent); opacity: 0.3; margin-bottom: 10px; }
.xv-quote-text { color: var(--xv-text-dim); font-style: italic; }

/* --- 7. BADGES --- */
.xv-badges-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}
.xv-badge {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 15px 30px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: var(--xv-primary);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.xv-check { color: var(--xv-accent); font-weight: 900; }

/* --- 8. CTA --- */
.xv-cta-section {
    display: flex;
    align-items: center;
    min-height: 60vh;
    flex-direction: column;
    justify-content: center;
    background: radial-gradient(circle at center, var(--xv-primary) 0%, var(--xv-primary-dark) 100%);
    text-align: center;
    position: relative;
}
.xv-big-cta-title { font-size: 3.5rem; color: #fff; margin-bottom: 20px; }
.xv-cta-sub { font-size: 1.5rem; margin-bottom: 40px; color: var(--xv-text-dim); }
.xv-cta-foot { margin-top: 30px; font-size: 0.9rem; opacity: 0.6; color: var(--xv-text-dim); }
.xv-btn-lg { padding: 18px 48px; font-size: 1.1rem; }

/* --- Styles for elements migrated from inline PHP --- */
.xv-win-header {
    background: #333;
    padding: 10px 15px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }
.xv-win-title {
    margin-left: auto;
    color: #888;
    font-size: 0.7rem;
    font-family: monospace;
}

.xv-feat-item h4 { color: #fff; font-size: 1.2rem; margin-bottom: 8px; }
.xv-feat-item p { color: #8899a6; font-size: 0.95rem; line-height: 1.6; }

.xv-badge-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}
.xv-badge-text { color: var(--xv-primary); font-weight: 600; }
.xv-badge-sub { font-size: 0.75rem; color: #666; font-weight: 400; }

.xv-text-small { text-align: center; color: #666; font-size: 0.9rem; }

.xv-problem-transition h3 { color: #fff; font-size: 1.5rem; }
.xv-highlight { color: var(--xv-accent); text-decoration: underline; text-underline-offset: 4px; }

.xv-demo-label-after { color: var(--xv-primary); font-weight: bold; }

/* --- Additional mobile fixes --- */
@media (max-width: 600px) {
    .xv-demo-block {
        min-width: 0;
        width: 100%;
    }

    .xv-paper-stack {
        transform: none;
    }

    .xv-digital-card {
        transform: none;
    }

    .xv-badge {
        padding: 10px 16px;
    }

    .xv-badge-text {
        font-size: 0.9rem;
    }
}

@media (min-width: 981px) {
    #main-content .container:before {
        background-color: transparent !important;
    }
}