/*
 * project-pages.css  —  AL!Z Portfolio
 * Shared stylesheet for all ProjectPages/*.html
 *
 * Design tokens mirror index.html :root exactly.
 * Page-specific overrides go in a <style> block inside each HTML file.
 *
 * Sections:
 *   0. Tokens & Reset
 *   1. Base / Body
 *   2. Custom Cursor
 *   3. Neural Canvas
 *   4. Back Navigation
 *   5. Container & Layout
 *   6. Hero Block
 *   7. Section Labels & Dividers
 *   8. Content Cards (generic)
 *   9. Trailer / Video Frame
 *  10. Screenshots Grid
 *  11. Two-Column Grid
 *  12. System List
 *  13. Process Steps
 *  14. Psychoacoustics Grid
 *  15. Tech Stack Grid
 *  16. Download Section
 *  17. Feature Highlight Box
 *  18. Progress Bars
 *  19. Deliverables Row
 *  20. CTA Section
 *  21. Footer
 *  22. Scroll Reveal
 *  23. Responsive
 */

/* ═══════════════════════════════════════════════════
   0. Tokens & Reset
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Staatliches&family=Orbitron:wght@400;500;600;700;800;900&display=swap');

@font-face {
    font-family: 'BrandFont';
    src: url('../MyFonts/Brush_08.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none !important;
}

:root {
    --orange: #FF5E00;
    --pink: #FF2E88;
    --cyan-accent: #00E5FF;
    --electric-blue: #6B4FFF;
    --bg-void: #0A0A0F;
    --bg-layer-1: #151520;
    --bg-layer-2: #1B111F;
    --text: #E8E8F0;
    --text-muted: rgba(232, 232, 240, 0.7);
    --border-subtle: #2A2A35;
    --success: #00E5A0;
}

html {
    scroll-behavior: smooth;
}

::selection {
    background: var(--pink);
    color: white;
}

/* ═══════════════════════════════════════════════════
   1. Base / Body
═══════════════════════════════════════════════════ */
body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-void);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════
   2. Custom Cursor
═══════════════════════════════════════════════════ */
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--orange);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999;
    will-change: transform;
    transition: width .15s, height .15s, background .15s, border-color .15s;
}

    .cursor::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 6px;
        height: 6px;
        background: var(--pink);
        border-radius: 50%;
        box-shadow: 0 0 20px var(--pink);
    }

    .cursor.hover {
        width: 60px;
        height: 60px;
        background: radial-gradient(circle, rgba(255, 94, 0, .2), transparent);
        border-color: var(--pink);
    }

/* ═══════════════════════════════════════════════════
   3. Neural Canvas
═══════════════════════════════════════════════════ */
#neuralCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: .3;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   4. Back Navigation
═══════════════════════════════════════════════════ */
.back-nav {
    position: fixed;
    top: 2rem;
    left: 2rem;
    z-index: 900;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1.8rem;
    background: linear-gradient(135deg, rgba(10, 10, 15, .9), rgba(21, 21, 32, .9));
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 94, 0, .3);
    border-radius: 50px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 5px 20px rgba(0, 0, 0, .4);
}

    .back-btn:hover {
        color: var(--orange);
        border-color: var(--orange);
        background: linear-gradient(135deg, rgba(255, 94, 0, .1), rgba(21, 21, 32, .95));
        transform: translateX(-4px);
        box-shadow: 0 8px 30px rgba(255, 94, 0, .2);
    }

/* ═══════════════════════════════════════════════════
   5. Container & Layout
═══════════════════════════════════════════════════ */
.page-wrap {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

/* ═══════════════════════════════════════════════════
   6. Hero Block
═══════════════════════════════════════════════════ */
.project-hero {
    padding: 10rem 0 5rem;
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeUp .9s .2s forwards;
}

.eyebrow-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: .8rem;
    font-weight: 600;
    color: var(--cyan-accent);
    text-transform: uppercase;
    letter-spacing: .2em;
    padding: .4rem 1.1rem;
    background: rgba(0, 229, 255, .08);
    border: 1px solid rgba(0, 229, 255, .3);
    border-radius: 20px;
    text-shadow: 0 0 15px rgba(0, 229, 255, .4);
}

.eyebrow-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--orange);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 10px var(--orange);
    animation: pulse 2s ease infinite;
}

    .status-dot.complete {
        background: var(--success);
        box-shadow: 0 0 10px var(--success);
        animation: none;
    }

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(1.4);
    }
}

.project-title {
    display: inline-block;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -.02em;
    line-height: .95;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeUp .9s .35s forwards;
}

    /* Cyan variant — use class="project-title cyan" for tool/web pages */
    .project-title.cyan {
        background: linear-gradient(135deg, var(--cyan-accent), var(--electric-blue));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.project-tagline {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    color: var(--text-muted);
    max-width: 750px;
    line-height: 1.8;
    margin-bottom: 2.5rem;
    opacity: 0;
    animation: fadeUp .9s .5s forwards;
}

    .project-tagline strong {
        color: var(--text);
        font-weight: 700;
    }

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
    opacity: 0;
    animation: fadeUp .9s .65s forwards;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.2rem;
    background: rgba(107, 79, 255, .1);
    border: 1px solid rgba(107, 79, 255, .35);
    border-radius: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .8rem;
    font-weight: 600;
    color: var(--electric-blue);
}

.hero-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp .9s .8s forwards;
}

.hero-link {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 2.2rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.link-primary {
    background: linear-gradient(135deg, var(--orange), var(--pink));
    color: white;
    box-shadow: 0 10px 30px rgba(255, 94, 0, .4);
}

    .link-primary:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 45px rgba(255, 94, 0, .55);
    }

    /* Cyan primary — for download/tool CTAs */
    .link-primary.cyan {
        background: linear-gradient(135deg, var(--cyan-accent), var(--electric-blue));
        box-shadow: 0 10px 30px rgba(0, 229, 255, .3);
        color: var(--bg-void);
    }

        .link-primary.cyan:hover {
            box-shadow: 0 16px 45px rgba(0, 229, 255, .5);
        }

.link-secondary {
    background: rgba(21, 21, 32, .6);
    backdrop-filter: blur(20px);
    border: 1.5px solid var(--border-subtle);
    color: var(--text);
}

    .link-secondary:hover {
        border-color: var(--orange);
        background: rgba(255, 94, 0, .1);
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(255, 94, 0, .2);
    }

.link-disabled {
    background: rgba(21, 21, 32, .4);
    border: 1.5px solid var(--border-subtle);
    color: rgba(232, 232, 240, .35);
    opacity: .6;
    pointer-events: none;
}

.link-note {
    font-size: .75rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--orange);
    opacity: .8;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════
   7. Section Labels & Dividers
═══════════════════════════════════════════════════ */
.section-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
    margin: 4rem 0;
}

.block-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: .8rem;
    font-weight: 600;
    color: var(--cyan-accent);
    text-transform: uppercase;
    letter-spacing: .2em;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: .8rem;
}

    .block-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, rgba(0, 229, 255, .3), transparent);
    }

/* ═══════════════════════════════════════════════════
   8. Content Cards (generic)
═══════════════════════════════════════════════════ */
.content-card {
    background: linear-gradient(135deg, rgba(21, 21, 32, .6), rgba(27, 17, 31, .6));
    backdrop-filter: blur(30px);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

    .content-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--orange), var(--pink), var(--cyan-accent));
        transform: scaleX(0);
        transition: transform .4s;
    }

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

    .content-card:hover {
        border-color: rgba(255, 94, 0, .3);
        box-shadow: 0 15px 50px rgba(255, 94, 0, .15);
    }

/* Full-width variant */
.full-card {
    background: linear-gradient(135deg, rgba(21, 21, 32, .6), rgba(27, 17, 31, .6));
    backdrop-filter: blur(30px);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    padding: 2.5rem 3rem;
    margin-bottom: 5rem;
    position: relative;
    overflow: hidden;
}

    .full-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--orange), var(--pink), var(--cyan-accent));
    }

.card-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: .8rem;
}

/* ═══════════════════════════════════════════════════
   9. Trailer / Video Frame
═══════════════════════════════════════════════════ */
.video-section {
    margin-bottom: 5rem;
}

.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, rgba(21, 21, 32, .8), rgba(27, 17, 31, .8));
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .video-frame::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(0deg, transparent, rgba(0, 229, 255, .03) 1px, transparent 2px, transparent 4px), repeating-linear-gradient(90deg, transparent, rgba(255, 94, 0, .03) 1px, transparent 2px, transparent 4px);
    }

    .video-frame::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--orange), var(--pink), var(--cyan-accent));
    }

    /* Live iframe embed — uncomment when ready */
    .video-frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

/* Placeholder shown while no embed exists */
.video-placeholder {
    position: relative;
    z-index: 1;
    text-align: center;
}

.video-play-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(255, 94, 0, .2), rgba(255, 46, 136, .2));
    border: 2px solid rgba(255, 94, 0, .4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.5rem;
    transition: all .3s;
}

.video-placeholder:hover .video-play-icon {
    background: linear-gradient(135deg, rgba(255, 94, 0, .35), rgba(255, 46, 136, .3));
    border-color: var(--orange);
    transform: scale(1.08);
    box-shadow: 0 0 40px rgba(255, 94, 0, .35);
}

.video-placeholder-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: .5rem;
}

.video-placeholder-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: .8rem;
    color: rgba(232, 232, 240, .35);
}

/* ═══════════════════════════════════════════════════
   10. Screenshots Grid
═══════════════════════════════════════════════════ */
.screenshots-section {
    margin-bottom: 5rem;
}

.screenshots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

.screenshot-slot {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, rgba(21, 21, 32, .7), rgba(27, 17, 31, .7));
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

    .screenshot-slot::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(45deg, transparent, rgba(255, 94, 0, .02) 1px, transparent 2px, transparent 6px);
    }

    .screenshot-slot:hover {
        border-color: rgba(255, 94, 0, .4);
        box-shadow: 0 10px 35px rgba(255, 94, 0, .15);
        transform: translateY(-4px);
    }

    /* colspan helpers */
    .screenshot-slot.wide {
        grid-column: span 2;
    }

    .screenshot-slot.full {
        grid-column: span 3;
    }

.slot-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.slot-icon {
    font-size: 2rem;
    margin-bottom: .6rem;
    filter: drop-shadow(0 0 10px rgba(255, 94, 0, .3));
    opacity: .5;
}

.slot-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    color: rgba(232, 232, 240, .3);
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* Real image/video inside a slot */
.screenshot-slot img,
.screenshot-slot video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ═══════════════════════════════════════════════════
   11. Two-Column Grid
═══════════════════════════════════════════════════ */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 5rem;
}

/* ═══════════════════════════════════════════════════
   12. System List
═══════════════════════════════════════════════════ */
.system-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

    .system-list li {
        display: flex;
        align-items: flex-start;
        gap: .9rem;
        font-size: .95rem;
        color: var(--text-muted);
        line-height: 1.6;
    }

        .system-list li::before {
            content: '▸';
            color: var(--orange);
            font-size: .9rem;
            flex-shrink: 0;
            margin-top: .05rem;
        }

    .system-list strong {
        color: var(--text);
        font-weight: 600;
    }

/* ═══════════════════════════════════════════════════
   13. Process Steps
═══════════════════════════════════════════════════ */
.process-steps {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.process-step {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}

.step-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: .75rem;
    font-weight: 700;
    color: var(--orange);
    background: rgba(255, 94, 0, .1);
    border: 1px solid rgba(255, 94, 0, .3);
    border-radius: 8px;
    padding: .3rem .6rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

.step-content h4 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .3rem;
}

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

/* ═══════════════════════════════════════════════════
   14. Psychoacoustics Grid
═══════════════════════════════════════════════════ */
.psych-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 1.5rem;
}

.psych-item {
    padding: 1.5rem;
    background: rgba(107, 79, 255, .07);
    border: 1px solid rgba(107, 79, 255, .25);
    border-radius: 16px;
}

    .psych-item h4 {
        font-family: 'JetBrains Mono', monospace;
        font-size: .82rem;
        font-weight: 700;
        color: var(--cyan-accent);
        margin-bottom: .6rem;
        letter-spacing: .04em;
    }

    .psych-item p {
        font-size: .88rem;
        color: var(--text-muted);
        line-height: 1.6;
    }

/* ═══════════════════════════════════════════════════
   15. Tech Stack Grid
═══════════════════════════════════════════════════ */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.tech-item {
    padding: 1.2rem 1.5rem;
    background: rgba(21, 21, 32, .5);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    transition: all .3s;
}

    .tech-item:hover {
        border-color: rgba(255, 94, 0, .35);
        background: rgba(255, 94, 0, .05);
    }

.tech-item-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: .85rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .3rem;
}

.tech-item-role {
    font-size: .8rem;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   16. Download Section
═══════════════════════════════════════════════════ */
.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.2rem;
    margin-top: 1.5rem;
}

.download-card {
    background: rgba(10, 10, 15, .6);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 1.8rem;
    text-align: center;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
}

    .download-card:hover {
        border-color: var(--cyan-accent);
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(0, 229, 255, .12);
    }

.download-card-icon {
    font-size: 2.5rem;
}

.download-card-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
}

.download-card-desc {
    font-size: .85rem;
    color: var(--text-muted);
    text-align: center;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.6rem;
    background: linear-gradient(135deg, var(--cyan-accent), var(--electric-blue));
    color: var(--bg-void);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: .9rem;
    transition: all .3s;
    box-shadow: 0 8px 20px rgba(0, 229, 255, .25);
    width: 100%;
    justify-content: center;
}

    .download-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(0, 229, 255, .45);
    }

    .download-btn.disabled {
        background: rgba(232, 232, 240, .1);
        color: var(--text-muted);
        pointer-events: none;
        box-shadow: none;
    }

.coming-soon-tag {
    display: inline-block;
    padding: .3rem .9rem;
    background: rgba(255, 94, 0, .1);
    border: 1px solid rgba(255, 94, 0, .35);
    border-radius: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: .05em;
}

/* DAW compatibility table */
.compat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}

.compat-tag {
    padding: .35rem .9rem;
    background: rgba(0, 229, 255, .07);
    border: 1px solid rgba(0, 229, 255, .25);
    border-radius: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .78rem;
    font-weight: 600;
    color: var(--cyan-accent);
}

/* ═══════════════════════════════════════════════════
   17. Feature Highlight Box
═══════════════════════════════════════════════════ */
.highlight-box {
    background: rgba(107, 79, 255, .08);
    border: 1px solid var(--electric-blue);
    border-radius: 16px;
    padding: 1.8rem 2rem;
    margin-bottom: 2.5rem;
}

    .highlight-box h4 {
        font-family: 'Orbitron', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        color: var(--electric-blue);
        margin-bottom: .8rem;
    }

    .highlight-box p {
        font-size: .95rem;
        color: var(--text-muted);
        line-height: 1.8;
    }

/* ═══════════════════════════════════════════════════
   18. Progress Bars
═══════════════════════════════════════════════════ */
.progress-container {
    margin-top: 1.5rem;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: .6rem;
}

.progress-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: .8rem;
    color: var(--text-muted);
}

.progress-pct {
    font-family: 'JetBrains Mono', monospace;
    font-size: .8rem;
    font-weight: 700;
    color: var(--orange);
}

.progress-track {
    height: 6px;
    background: rgba(255, 255, 255, .08);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--orange), var(--pink));
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(255, 94, 0, .5);
    transition: width .8s cubic-bezier(.4, 0, .2, 1);
}

/* ═══════════════════════════════════════════════════
   19. Deliverables Row
═══════════════════════════════════════════════════ */
.deliverables-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.deliverable {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1.5rem;
    background: rgba(0, 229, 160, .06);
    border: 1px solid rgba(0, 229, 160, .25);
    border-radius: 50px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--success);
}

    .deliverable.pending {
        background: rgba(255, 94, 0, .06);
        border-color: rgba(255, 94, 0, .25);
        color: var(--orange);
    }

/* ═══════════════════════════════════════════════════
   20. CTA Section
═══════════════════════════════════════════════════ */
.cta-section {
    text-align: center;
    padding: 5rem 0 6rem;
}

.cta-heading {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.cta-text {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 580px;
    margin: 0 auto 2.5rem;
    line-height: 1.8;
}

.cta-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: 1.1rem 2.5rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.cta-btn-primary {
    background: linear-gradient(135deg, var(--orange), var(--pink));
    color: white;
    box-shadow: 0 10px 30px rgba(255, 94, 0, .4);
}

    .cta-btn-primary:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 45px rgba(255, 94, 0, .55);
    }

.cta-btn-secondary {
    background: rgba(21, 21, 32, .6);
    border: 1.5px solid var(--border-subtle);
    color: var(--text);
}

    .cta-btn-secondary:hover {
        border-color: var(--orange);
        background: rgba(255, 94, 0, .1);
        transform: translateY(-4px);
    }

/* ═══════════════════════════════════════════════════
   21. Footer
═══════════════════════════════════════════════════ */
.project-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 3rem 5%;
    background: linear-gradient(135deg, rgba(10, 10, 15, .9), rgba(21, 21, 32, .9));
    position: relative;
    z-index: 10;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-brand {
    font-family: 'BrandFont', 'Staatliches', sans-serif;
    font-size: 2rem;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-info {
    font-size: .9rem;
    color: var(--text-muted);
    text-align: right;
}

    .footer-info span {
        display: block;
        color: var(--cyan-accent);
        margin-bottom: .3rem;
        font-weight: 600;
    }

/* ═══════════════════════════════════════════════════
   22. Scroll Reveal
═══════════════════════════════════════════════════ */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1);
}

    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }

.reveal-delay-1 {
    transition-delay: .1s;
}

.reveal-delay-2 {
    transition-delay: .2s;
}

.reveal-delay-3 {
    transition-delay: .3s;
}

/* ═══════════════════════════════════════════════════
   23. Responsive
═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .two-col {
        grid-template-columns: 1fr;
    }

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

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

    .screenshot-slot.wide,
    .screenshot-slot.full {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    body, *, *::before, *::after {
        cursor: auto !important;
    }

    .cursor {
        display: none;
    }
}

@media (max-width: 600px) {
    .project-hero {
        padding: 8rem 0 3rem;
    }

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

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

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

    .back-nav {
        top: 1rem;
        left: 1rem;
    }

    .back-btn {
        padding: .6rem 1.2rem;
        font-size: .8rem;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

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

    .full-card {
        padding: 1.8rem;
    }

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