:root {
    --bg: #0f0f11;           /* Softer than pure black */
    --text: #ececed;         /* Slightly off-white to reduce "bleeding" on dark bg */
    --text-muted: #a1a1aa;   /* For secondary text */
    --accent: #8b5cf6;
    --border: rgba(255,255,255,0.06);
    --transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* --- ADAPTIVE BASE --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent; 
}

body { 
    background: var(--bg); 
    color: var(--text); 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    overflow-x: hidden; 
}

.container { 
    width: 100%; 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 0 7%; 
}

/* --- BRAND COLORS & TOOLS --- */
.brand-linkedin { color: #0077b5 !important; }
.brand-github { color: #ffffff !important; }
.brand-instagram { color: #e4405f !important; }
.brand-youtube { color: #ff0000 !important; }

/* Tool Colors (Force Active) */
.fa-figma { color: #F24E1E !important; }
.fa-html5 { color: #E34F26 !important; }
.fa-css3-alt { color: #1572B6 !important; }
.fa-js { color: #F7DF1E !important; }
.fa-java { color: #007396 !important; }
.fa-react { color: #61DAFB !important; }
.fa-sass { color: #CC6699 !important; }
.fa-python { color: #3776AB !important; }
.fa-unity { color: #ffffff !important; }
.fa-android { color: #3DDC84 !important; }

.brand-flutter img { filter: saturate(1.5); width: 28px; }
.brand-firebase img { filter: contrast(1.1); width: 28px; }
.brand-miro img { filter: brightness(1.2); width: 28px; }

/* --- SECTION COLOR ZONING --- */
/* --- NEW PHYSICAL COLOR ZONING --- */
section, header { 
    position: relative; 
    padding: clamp(60px, 12vh, 150px) 0; 
    border-bottom: 1px solid var(--border);
    /* Standardized soft background for all sections */
    background: var(--bg); 
}

/* Subtle "Atmospheric" Glows instead of harsh circles */
#about { 
    background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.08) 0%, transparent 50%), var(--bg); 
}

.theme-navy { 
    background: radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.05) 0%, transparent 40%), var(--bg); 
}

.theme-amber { 
    background: radial-gradient(circle at 0% 0%, rgba(251, 191, 36, 0.04) 0%, transparent 40%), var(--bg); 
}

.theme-emerald { 
    background: radial-gradient(circle at 100% 0%, rgba(52, 211, 153, 0.04) 0%, transparent 40%), var(--bg); 
}

.theme-purple { 
    background: radial-gradient(circle at 50% 0%, rgba(167, 139, 250, 0.05) 0%, transparent 50%), var(--bg); 
}

.theme-catalog { 
    background: var(--bg); /* Keep the catalog clean and flat */
}

/* --- NAVIGATION ADAPTIVITY --- */
.navigation-dock {
    position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%);
    background: rgba(15, 15, 15, 0.75); backdrop-filter: blur(25px);
    border: 1px solid var(--border); border-radius: 100px; padding: 12px 25px;
    z-index: 1000; width: max-content; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.dock-wrapper { display: flex; align-items: center; }
.nav-main { display: flex; align-items: center; gap: 15px; }
.nav-main a { 
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-decoration: none; color: #666; font-size: 11px; font-weight: 700; text-transform: uppercase; transition: 0.3s;
}

.nav-main a.active { color: #fff; background: rgba(255,255,255,0.05); border-radius: 50px; }
.mobile-icon { display: none; }

.nav-socials { display: flex; gap: 45px; margin-left: 45px; border-left: 1px solid var(--border); padding-left: 45px; }
.nav-socials a { font-size: 1.2rem; transition: 0.3s; }

@media (max-width: 768px) {
    .navigation-dock { width: 100vw; bottom: 0; border-radius: 20px 20px 0 0; padding: 15px 10px; border: none; background: rgba(10, 10, 10, 0.98); }
    .nav-main { justify-content: space-around; width: 100%; }
    .nav-text { font-size: 9px; margin-top: 3px; }
    .mobile-icon { display: block !important; font-size: 20px; }
    .desktop-only { display: none; }
}

/* --- HERO SECTION --- */
.hero-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-content { display: flex; flex-direction: column; align-items: center; width: 100%; }
.header-branding { display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; }

.profile-circle-small {
    /* Slightly smaller size range (was 180px-260px) */
    width: clamp(160px, 30vw, 220px); 
    height: clamp(160px, 30vw, 220px);
    
    border-radius: 50%; 
    overflow: hidden; 
    
    /* Neutral, thin border for a premium feel */
    border: 1.5px solid rgba(255, 255, 255, 0.15); 
    
    margin-bottom: 30px; 
    background: #121214; /* Matches your new softer dark theme */
    
    /* Subtle, tighter shadow so it doesn't "tire" the eyes */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); 
    
    /* Smooth transition for hover effects */
    transition: var(--transition);
}

.profile-circle-small img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center 25%;
    /* Subtle grayscale-to-color or brightness shift on hover can be added here */
}

/* Optional: Slight lift on hover to make it feel interactive */
.profile-circle-small:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
}
   .hero-intro-medium { 
    /* Significantly increased: Min 1.8rem, Scale 5.5vw, Max 3.2rem */
    font-size: clamp(1.8rem, 5.5vw, 3.2rem); 
    
    color: var(--text-muted); 
    max-width: 1100px; /* Widened to fit the bigger text */
    line-height: 1.2; 
    font-weight: 300; 
    margin-top: 25px;
    letter-spacing: -0.02em;
}

/* Make sure the specialized text inside remains crisp */
.accent-text {
    color: var(--accent);
    font-weight: 500;
}
/* --- ADAPTIVE PROJECTS --- */
.project-row { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 5vw, 80px); align-items: center; }




@media (max-width: 992px) {
    .project-row { grid-template-columns: 1fr; text-align: center; }
    .project-content { align-items: center; display: flex; flex-direction: column; }
    .tools-row { justify-content: center; }
}

/* REFINED IMAGE FRAME AUTO-MANAGEMENT */
/* --- ADAPTIVE IMAGE ENGINE --- */
/* Find this block and update it */
/* THE OUTER BOX */

.auto-slider { 
    width: 100%; 
    height: auto; 
    aspect-ratio: 16 / 12; /* Keeps the frame consistent */
    border-radius: 30px; 
    overflow: hidden; 
    position: relative; 
    background: rgba(255, 255, 255, 0.02); 
    border: 1px solid var(--border);
    display: flex;
    align-items: center; 
    justify-content: center;

    margin-bottom: 30px; /* Adjust this number (e.g., 40px) if you want even more space */
}
/* THE IMAGE GROUP WRAPPER */
.mood-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
    width: 100%;
    height: 100%; 
    /* Change fixed 50px to a percentage so it shrinks on smaller windows */
    padding: 6%; 
    box-sizing: border-box; 
    transition: opacity 0.6s ease-in-out; 
    /* Remove any overflow settings here */
    overflow: hidden; 
}
/* Find this block and update it */
.mood-grid img { 
    width: 100%; 
    height: 100%; 
    /* 'contain' is mandatory to prevent cropping */
    object-fit: contain; 
    /* Centers the image if it's thinner than the slot */
    margin: auto; 
    border-radius: 15px;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* --- MOBILE ADAPTIVITY --- */
/* --- MOBILE ADAPTIVITY --- */





.section-label {
    font-family: 'Space Grotesk', sans-serif; /* Optional: matches headings */
    font-size: 1.5rem;         /* Increased from 10px */
    text-transform: uppercase;
    color: #ffffff;            /* Changed from var(--accent) to White */
    letter-spacing: 2px;       /* Reduced slightly so it reads better at large size */
    margin-bottom: 60px;       /* More breathing room below the label */
    font-weight: 700;
    opacity: 0.9;
}.project-content h3 { font-family: 'Space Grotesk'; font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 0.95; margin-bottom: 20px; }

.mega-story-blocks { display: grid; gap: 30px; margin: 35px 0; width: 100%; }
.title-goal { font-size: 1rem; color: #a0a0a0; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
.title-solution { font-size: 1.4rem; color: #fff; border-left: 3px solid var(--accent); padding-left: 15px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
.story-box p { font-size: clamp(0.95rem, 2vw, 1.1rem); color: #888; line-height: 1.6; }

.tools-row { display: flex; gap: clamp(15px, 3vw, 25px); margin-bottom: 30px; flex-wrap: wrap; }
.tool-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tool-item i, .tool-item img { font-size: 28px; height: 28px; object-fit: contain; }
.tool-label { font-size: 9px; font-weight: 800; text-transform: uppercase; color: rgba(255,255,255,0.4); }
/* --- UPDATED CASE BUTTONS --- */
.case-btn { 
    display: inline-block; 
    padding: 15px 35px; 
    background: #ffffff;    /* Solid white by default */
    color: #000000;         /* Black text by default */
    border: 1px solid #fff; 
    border-radius: 100px; 
    text-decoration: none; 
    font-size: 11px; 
    font-weight: 800; 
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); 
    margin-top: 20px; 
    text-transform: uppercase;
    letter-spacing: 1px;
}

.case-btn:hover { 
    background: #f0f0f0;    /* Slightly grey on hover so it feels "pressed" */
    color: #000000; 
    transform: translateY(-5px); /* Lift up effect */
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.15); /* Soft glow */
}

/* Ensure icons inside buttons are also black to match text */
.case-btn i {
    color: #000000 !important;
}

/* --- CATALOG SECTION GRID (RESIZED & CLEANED) --- */
.catalog-header { margin-bottom: 50px; }
.catalog-title { font-family: 'Space Grotesk'; font-size: clamp(2.5rem, 6vw, 4rem); margin-bottom: 10px; }
.catalog-title span { color: var(--accent); }
.catalog-subtitle { color: #888; max-width: 600px; font-size: 1.1rem; }

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    width: 100%;
}

.catalog-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    padding: 35px;
    border-radius: 24px;
    text-decoration: none;
    color: white;
    display: flex;
    flex-direction: column;
    min-height: 280px; /* Symmetry */
    transition: all 0.5s var(--transition);
}

.catalog-card:hover {
    background: rgba(139, 92, 246, 0.08); 
    border-color: var(--accent);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Tools Higher & Colorized */
.card-tools {
    display: flex;
    gap: 15px;
    margin-bottom: 25px; /* Shifted tools up */
    align-items: center;
}

.card-tools i, .card-tools img {
    font-size: 20px;
    height: 20px;
    width: auto;
    filter: none !important; /* Full Color */
    opacity: 1 !important;    /* Full Visibility */
    transition: 0.3s ease;
}

.catalog-card:hover .card-tools i, 
.catalog-card:hover .card-tools img {
    transform: scale(1.1);
}

.card-category {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 2px;
    font-weight: 800;
    margin-bottom: 8px;
    display: block;
}

.catalog-card h4 { font-family: 'Space Grotesk'; font-size: 1.6rem; margin-bottom: 5px; }
.catalog-card p { color: #777; font-size: 0.95rem; }

/* REMOVED BOTTOM RIGHT ICONS */
.card-icon {
    display: none !important;
}

@media (max-width: 480px) {
    .catalog-grid { grid-template-columns: 1fr; }
}

/* --- BIO & FOOTER --- */
.bio-statement { font-family: 'Space Grotesk'; font-size: clamp(2rem, 7vw, 4rem); line-height: 1.1; margin-bottom: 50px; font-weight: 300; text-align: center; }
.skill-meter { margin-bottom: 30px; max-width: 600px; margin-inline: auto; }
.meter-track { width: 100%; height: 4px; background: #1a1a1a; border-radius: 10px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--accent); width: 0; transition: width 2s ease; }

.footer { padding: 120px 0 150px; text-align: center; }
.big-email { font-size: clamp(1.1rem, 5vw, 3.2rem); color: #fff; text-decoration: none; font-weight: 800; border-bottom: 2px solid var(--accent); word-break: break-all; }
.footer-social-grid { display: flex; justify-content: center; gap: clamp(25px, 6vw, 55px); margin-top: 60px; }
.footer-social-grid a { font-size: 2.5rem; transition: 0.4s; }

/* --- UTILS & CURSOR --- */
.cursor-follower { 
    display: none !important;
}

@media (hover: none) { .cursor-follower { display: none; } body { cursor: auto !important; } }

.section-animate { opacity: 0; transform: translateY(40px); transition: var(--transition); }
.section-animate.visible { opacity: 1; transform: translateY(0); }

/* Enhanced Smoothness for Triad */
.mood-grid img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 15px;
    opacity: 1;
    transform: translateY(0);
    /* This makes the transition feel premium */
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* State when images are switching */
.mood-grid img.img-fade {
    opacity: 0;
    transform: translateY(10px);
}


/* Layout for Website (Single Image) Showcase */
.mood-grid.single-display {
    grid-template-columns: 1fr !important; /* Forces 1 column */
    padding: 0; /* Optional: allows the screenshot to fill more space */
}

.mood-grid.single-display img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the website screenshot fills the frame nicely */
    object-position: top; /* Keeps the 'header' of the website visible */
}


/* --- BIOGRAPHY SECTION UPGRADES --- */
.bio-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.bio-text {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.6;
    color: #bbb;
    margin-bottom: 40px;
}

.bio-cv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    text-align: left;
    margin-bottom: 50px;
    width: 100%;
}

.cv-item h4 {
    color: var(--accent);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.cv-item p {
    color: #fff;
    font-size: 1rem;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .bio-cv-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}
/* --- COMPACT EXECUTIVE CV STYLES --- */
/* --- FLEXIBLE EXECUTIVE CV --- */
/* --- GRADIENT GLASS resume-paper --- */
/* --- COMPACT GRADIENT GLASS CV --- */
/* --- ENHANCED GLASS CV --- */
/* --- PREMIUM GLASSMORPHIC CV ENGINE --- */
/* ============================================================
   PREMIUM GLASSMORPHIC CV ENGINE (ULTIMATE VERSION)
   ============================================================ */

.resume-glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    overflow: hidden;
    margin-top: 30px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    
    /* 3D Perspective Effect */
    transform: perspective(1200px) rotateX(1.5deg);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.resume-glass:hover {
    transform: perspective(1200px) rotateX(0deg) translateY(-8px);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 45px 90px rgba(0, 0, 0, 0.8);
}

.resume-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
}

/* --- SIDEBAR STYLING --- */
.resume-sidebar {
    padding: 40px 35px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.01);
}

.cv-profile-mini {
    width: 100px; 
    height: 100px;
    border-radius: 22px;
    overflow: hidden;
    border: 3px solid var(--accent);
    margin-bottom: 20px;
    background: #000;
}

.cv-profile-mini img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    object-position: top; /* FOCUS ON FACE */
}

.resume-id-block h3 {
    font-family: 'Space Grotesk';
    font-size: 2.2rem;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 5px;
}

.role-badge {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--accent);
    margin: 10px 0 20px 0;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Link Colors - Forced Anti-Purple Fix */
.cv-link {
    color: #bbb !important;
    font-size: 1rem;
    text-decoration: none !important;
    transition: 0.3s ease;
}

.cv-link:hover {
    color: var(--accent) !important;
}

/* --- STAR RATINGS & SKILLS --- */
.star-skills {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
}

.skill-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    font-size: 0.9rem;
    color: #ccc; 
}

.stars { 
    color: var(--accent); 
    letter-spacing: 2px; 
    font-size: 1.2rem; /* LARGE READABLE STARS */
}

/* --- MAIN CONTENT STYLING --- */
.resume-main { padding: 50px 60px; }
.resume-section { margin-bottom: 40px; }

.resume-section h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #555;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.profile-text { 
    font-size: 1.15rem; 
    line-height: 1.7; 
    color: #ddd; 
}

/* Experience Items */
.exp-item { margin-bottom: 35px; }

.exp-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}

.exp-header h5 {
    font-size: 1.4rem;
    font-family: 'Space Grotesk';
    color: #fff;
}

.exp-date {
    font-size: 0.9rem;
    color: #666;
    font-weight: 800;
}

.exp-sub {
    font-size: 1.05rem;
    color: var(--accent);
    font-weight: 700;
    margin: 5px 0 12px 0;
}

.bullet-list-main {
    padding-left: 20px;
    color: #bbb;
    font-size: 1.05rem;
    line-height: 1.6;
}

.bullet-list-main li {
    margin-bottom: 8px;
}

/* Sidebar Lists */
.dual-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 30px;
}

.interest-list {
    list-style: none;
    padding: 0;
    font-size: 0.95rem;
    color: #aaa;
}

.interest-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.interest-list i {
    color: var(--accent);
    width: 18px;
    text-align: center;
}

/* --- DOWNLOAD BUTTON STYLE --- */
.cv-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 12px 22px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.2);
}

.cv-download-btn:hover {
    transform: translateY(-3px) scale(1.05);
    background: #fff;
    color: #000;
    box-shadow: 0 15px 30px rgba(255, 255, 255, 0.2);
}

.cv-download-btn i { font-size: 1.1rem; }

/* ============================================================
   ULTIMATE PDF CAPTURE FIX (THE NUCLEAR OPTION)
   ============================================================ */

/* Forces Solid Background and Pure White Text during capture */
/* ============================================================
   FIXED PDF COLORS (Matches Bio Theme)
   ============================================================ */
/* ============================================================
   UNIFIED PDF THEME & COMPACT LAYOUT
   ============================================================ */

.printing {
    background-color: #020202 !important; /* Deep black for the page */
}

.printing .resume-glass {
    /* The core purple color from your website's theme */
    background: #150a21 !important; 
    display: grid !important;
    grid-template-columns: 300px 1fr !important; /* Fixed widths for PDF */
    height: auto !important;
    border: 1px solid #2a1b3d !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Force the right side (main) to have the same background as the left */
.printing .resume-sidebar,
.printing .resume-main {
    background: transparent !important; 
    border: none !important;
}

/* --- HEIGHT REDUCTION (COMPACT MODE) --- */
.printing .resume-sidebar {
    padding: 25px !important; /* Reduced from 40px */
}

.printing .resume-main {
    padding: 30px 40px !important; /* Reduced from 50px 60px */
}

.printing .resume-section {
    margin-bottom: 20px !important; /* Tighter sections */
}

.printing .exp-item {
    margin-bottom: 15px !important; /* Tighter experience items */
}

.printing .resume-section h4 {
    margin-bottom: 10px !important;
    padding-bottom: 5px !important;
}

.printing .bullet-list-main li {
    margin-bottom: 4px !important;
}

/* Profile Image Fix */
.printing .cv-profile-mini {
    width: 90px !important;
    height: 90px !important;
    margin-bottom: 15px !important;
}
/* ============================================================
   MOBILE RESPONSIVITY
   ============================================================ */
@media (max-width: 992px) {
    .resume-grid {
        grid-template-columns: 1fr;
    }
    
    .resume-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        text-align: center;
    }
    
    .cv-profile-mini {
        margin: 0 auto 20px;
    }
    
    .skill-row {
        justify-content: center;
        gap: 30px;
    }
    
    .info-list li, .interest-list li {
        justify-content: center;
    }
    
    .resume-glass {
        transform: none !important; /* No 3D on small mobile screens */
    }
    
    .resume-main {
        padding: 30px;
    }
    
    .exp-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ============================================================
   PREMIUM STRATEGY BRIDGE (REPLACES OLD FLOW)
   ============================================================ */

.case-header {
    padding: 140px 5% 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Gradient Title refinement */
.section-title-central span {
    background: linear-gradient(to right, #fff, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- THE BRIDGE (GRID) --- */
.strategy-bridge {
    display: grid;
    grid-template-columns: 1fr; /* Stacked on mobile */
    gap: 20px;
    width: 100%;
    max-width: 1150px;
    margin: 60px auto;
    align-items: center;
}

.strategy-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: clamp(30px, 5vw, 45px);
    backdrop-filter: blur(20px);
    text-align: left;
    transition: var(--transition);
}

.strategy-card:hover { 
    border-color: var(--accent); 
    background: rgba(139, 92, 246, 0.02); 
    transform: translateY(-5px);
}

.card-tag {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 3px;
    font-weight: 800;
    margin-bottom: 15px;
}

.strategy-card h4 { font-family: 'Space Grotesk'; font-size: 1.8rem; margin-bottom: 20px; color: #fff; }
.strategy-card ul { color: #888; padding-left: 20px; line-height: 1.7; font-size: 0.95rem; }
.strategy-card ul li { margin-bottom: 10px; }

/* How Might We Snippet */
.hmw-snippet {
    margin-top: 30px;
    padding: 20px;
    background: rgba(139, 92, 246, 0.05);
    border-left: 3px solid var(--accent);
    border-radius: 4px 16px 16px 4px;
}
.hmw-snippet span { font-size: 9px; font-weight: 800; color: var(--accent); display: block; margin-bottom: 5px; text-transform: uppercase; }
.hmw-snippet p { font-size: 1rem; color: #eee; margin: 0; font-family: 'Space Grotesk'; }

/* The Rotating Connector */
.flow-indicator {
    color: var(--accent);
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    opacity: 0.6;
}

.flow-indicator i {
    transform: rotate(90deg); /* Points DOWN on mobile */
}

/* --- BRANDING INSIGHT --- */
.brand-insight-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin: 40px 0 80px;
    max-width: 900px;
    background: rgba(255,255,255,0.01);
    padding: 40px;
    border-radius: 40px;
    border: 1px solid rgba(255,255,255,0.03);
}

.brand-logo-glow {
    width: 140px;
    position: relative;
    flex-shrink: 0;
}
/* Logo glow effect */
.brand-logo-glow::after {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent 70%);
    z-index: -1;
}
.brand-logo-glow img { width: 100%; height: auto; }

.brand-copy { text-align: center; }
.brand-copy h4 { color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; }
.brand-copy p { color: #aaa; line-height: 1.6; font-size: 1.05rem; }

/* --- TOOLS DOCK (THE PILL) --- */
.tools-dock-wrap { width: 100%; margin-top: 20px; }
.tools-dock {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(20px, 4vw, 40px);
    background: rgba(15, 15, 15, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    padding: 20px 45px;
    border-radius: 100px; /* Large pill */
    width: fit-content;
    margin: 0 auto;
}
.tool-node { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tool-node img { height: 26px; width: auto; opacity: 0.6; transition: 0.4s; }
.tool-node span { font-size: 8px; font-weight: 800; color: #555; text-transform: uppercase; letter-spacing: 1px; }

.tool-node:hover img { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 10px var(--accent)); }

/* ============================================================
   DESKTOP ADAPTATION (Screens > 992px)
   ============================================================ */
@media (min-width: 992px) {
    .strategy-bridge {
        grid-template-columns: 1fr 80px 1fr; /* Side-by-side with arrow in middle */
    }

    .flow-indicator i { 
        transform: rotate(0deg); /* Points RIGHT on desktop */
    }

    .brand-insight-wrap {
        flex-direction: row;
        text-align: left;
        padding: 50px 70px;
    }

    .brand-copy { text-align: left; }
}

/* Fix for very small phones */
@media (max-width: 480px) {
    .tools-dock {
        border-radius: 30px;
        padding: 20px;
        max-width: 95%;
    }
}


/* --- CONTACT FORM STYLES --- */
.contact-form-wrapper {
    max-width: 600px;
    margin: 50px auto;
    background: rgba(255, 255, 255, 0.03);
    padding: 40px;
    border-radius: 30px;
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
}

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

.form-input {
    width: 100%;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    transition: var(--transition);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(139, 92, 246, 0.05);
}

.contact-form .case-btn {
    cursor: pointer;
    width: 100%;
    background: transparent;
}

.direct-email {
    margin-top: 25px;
    font-size: 0.9rem;
    color: #666;
}

.direct-email a {
    color: var(--accent);
    text-decoration: none;
}

/* Ensure footer title doesn't crowd the form */
.footer-title {
    font-family: 'Space Grotesk';
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: 20px;
}



.status-msg {
    margin-top: 20px;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    transition: all 0.3s ease;
}

/* Fix for input spacing */
.contact-form .form-group {
    margin-bottom: 15px;
    width: 100%;
} 



/* --- 1. Center the Section Label --- */
.section-label {
    text-align: center;
    width: 100%;
    margin-bottom: 60px;
    /* Ensure no flex alignment overrides this */
    align-self: center; 
}

/* --- 2. Enforce Left-Text / Right-Image Layout --- */
.project-row {
    display: grid;
    /* Text takes slightly more space, Image takes less */
    grid-template-columns: 1fr 0.9fr; 
    gap: clamp(30px, 5vw, 80px);
    align-items: start; /* Aligns content to top */
}

/* Force specific order: Content (Text) first, Media (Image) second */
.project-content { order: 1; }
.project-media { order: 2; }

/* Remove any existing reverse logic for desktop */
.project-row.reverse .project-content { order: 1; }
.project-row.reverse .project-media { order: 2; }

/* --- 3. Header Row: Type (Tag) + Tools --- */
.project-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes Tag left, Tools right */
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 15px;
}

.project-tag {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 2px;
    font-weight: 800;
    margin: 0; /* Remove default margins */

    /* ADD THESE TWO LINES: */
    display: block;       /* Forces the tag to behave like a block so margin works */
    margin-bottom: 25px;  /* Adjust this value (e.g., 20px) for more distance */
}

/* Adjust tools to fit in the header line */
.header-tools {
    display: flex;
    gap: 15px;
}

.header-tools img {
    height: 22px; /* Smaller size for the header */
    width: auto;
    opacity: 0.8;
    transition: 0.3s;
}

.header-tools i {
    font-size: 22px;
    color: #ccc;
}

.header-tools .tool-item {
    display: flex;
    align-items: center;
}

/* Hide tool labels in this compact view to save space */
.header-tools .tool-label { display: none; }

/* --- Mobile Responsivity Fix --- */
@media (max-width: 992px) {
    .project-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* On mobile, usually you want Image on top, then Text. 
       If you want Text first on mobile too, keep order: 1. 
       To put Image on top for mobile only, change order here: */
    .project-content { order: 2; }
    .project-media { order: 1; }
    
    .section-label { text-align: center; }
}



/* =========================================
   PASTE THIS AT THE VERY BOTTOM OF STYLE.CSS
   TO FORCE SPACING CHANGES
   ========================================= */

/* 1. BIG PROJECTS (BeamBeat, WaterStep) 
   Distance between the "Tag/Tools" line and the "Title" */
.project-header-row {
    margin-bottom: 60px !important;  /* Adjust this number to increase/decrease space */
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

/* 2. CATALOG CARDS (Theodore Merkos, etc.)
   Distance between the small colored Category and the Title */
.card-category {
    display: block !important;
    margin-bottom: 35px !important; /* Adjust this number to increase/decrease space */
}

/* Ensure the titles don't have weird margins fighting against us */
.project-content h3, 
.catalog-card h4 {
    margin-top: 0 !important;
}


/* ======================================================
   FORCE TAG SPACING (Paste at bottom of style.css)
   ====================================================== */

/* 1. Target the Tag text directly */
.project-tag {
    display: block !important;       /* Ensures it takes up its own line */
    margin-bottom: 40px !important;  /* Adds the vertical gap - Change 40px to 60px if you want more */
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
}

/* 2. Target the Title immediately following it to ensure it doesn't float up */
.project-content h3 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. Safety net: If your HTML uses the row wrapper, force it to have space too */
.project-header-row {
    margin-bottom: 40px !important;
    padding-bottom: 40px !important;
    border: none !important;         /* Removes the line if it looks messy */
}


/* ======================================================
   FINAL SPACING FIX (Paste at the very bottom of style.css)
   ====================================================== */

/* Target the specific class "tag" used by your JavaScript */
.project-content .tag {
    display: block !important;       /* Forces it to be its own block */
    margin-bottom: 50px !important;  /* INCREASES THE SPACE HERE */
    margin-top: 0 !important;
    font-size: 0.85rem !important;
    letter-spacing: 2px !important;
    color: var(--accent) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* Ensure the title below it doesn't float up */
.project-content h3 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Also fix the spacing for the "Catalog" cards lower down */
.catalog-card .card-category {
    display: block !important;
    margin-bottom: 30px !important;
}

/* ======================================================
   CHANGE TAG COLOR TO WHITE (Paste at bottom of style.css)
   ====================================================== */

.project-content .tag {
    color: #ffffff !important;  /* Forces text to be WHITE */
    opacity: 0.9;               /* Optional: Makes it slightly softer so it doesn't hurt the eyes */
}

/* If you also want the small tags in the Catalog grid to be white, use this too: */
.catalog-card .card-category {
    color: #ffffff !important;
    opacity: 0.9;
}


/* ======================================================
   CATALOG CARD TOOL FIX (Paste at bottom of style.css)
   ====================================================== */

.card-tools {
    display: flex !important;
    flex-wrap: wrap !important; /* Allows logos to start a new line if there are many */
    gap: 12px !important;       /* Slightly tighter gap to fit more */
    margin-bottom: 25px !important;
    height: auto !important;    /* Allows container to grow tall if needed */
}

/* Ensure images (like the white GitHub logo) size correctly */
.card-tools img {
    width: 22px !important; 
    height: 22px !important;
    object-fit: contain !important;
}

/* Ensure Icons size correctly */
.card-tools i {
    font-size: 22px !important;
}



/* --- FULL SCREEN VIDEO MODAL --- */
.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.98); /* Near total black */
    z-index: 10000; /* Above everything */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(15px);
}

.video-overlay.active {
    display: flex;
}

.video-container {
    width: 90%;
    max-width: 1200px;
}

.video-container video {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 0 50px rgba(139, 92, 246, 0.3); /* Purple glow */
}

.close-video-btn {
    position: absolute;
    top: 40px;
    right: 40px;
    background: none;
    border: none;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10001;
}

.close-video-btn:hover {
    color: var(--accent);
    transform: rotate(90deg);
}

/* Stop background scrolling when video is open */
body.no-scroll {
    overflow: hidden;
}


/* --- APP LOGO STYLING --- */

/* Flex container for title and logo */
.title-with-logo {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between logo and text */
}

/* Base logo style */
.app-title-logo {
    object-fit: contain;
    border-radius: 8px; /* Optional: adds slightly rounded corners to the icons */
    display: inline-block;
}

/* Logo size for the big Featured sections */
.featured-logo {
    height: 50px; 
    width: auto;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
}

/* Logo size for the Archive/Catalog cards */
.catalog-logo {
    height: 30px;
    width: auto;
}

/* Responsive fix for mobile */
@media (max-width: 768px) {
    .title-with-logo {
        justify-content: center; /* Centers logo + text on mobile */
    }
    .featured-logo {
        height: 40px;
    }
}



/* ======================================================
   UNIFIED BACKGROUND SYSTEM (Paste at bottom of style.css)
   ====================================================== */

/* 1. Force exact same background for Home AND Projects */
body, 
body.case-study-page, 
body.home-page {
    background-color: #0f0f11 !important; /* Matches your root variable */
    background-image: none !important;     /* Removes any gradients */
    color: #ececed !important;             /* Standard text color */
}

/* 2. Make the Headers match the Index page exactly */
.case-header, 
.process-section,
#catalog,
#biography {
    background: #0f0f11 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 3. Unify the Top Tab Menu (Glassmorphism) */
.tab-bar {
    background: rgba(15, 15, 17, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 100px !important;
    padding: 10px !important;
}

/* 4. Fix Tab Buttons to be Neutral */
.tab-btn {
    background: transparent !important;
    color: #aaa !important;
}

.tab-btn.active {
    background: #222 !important; /* Neutral dark active state, or use var(--accent) */
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

/* ======================================================
   TEXT COLOR CORRECTION (Paste at bottom of style.css)
   ====================================================== */

/* 1. Force Title to be Solid White (Removes Purple Gradient) */
.section-title-central span,
.section-title-central {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Adds depth instead of color */
}

/* 2. Ensure Subtitles/Descriptions are Neutral Grey */
#header-subtitle,
#header-desc, 
.project-main-desc {
    color: #a1a1aa !important; /* Standard Cool Grey */
    font-weight: 300 !important;
    opacity: 1 !important;
}

/* 3. (Optional) Make the top "Pill" tag Neutral or keep it Purple? 
   Uncomment the lines below if you want the Pill to be Grey/Black too. 
   Otherwise, leave it Purple as a small accent. */

/* .pill-label {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
} 
*/


/* --- Add inside <style> in project.html --- */

.competitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.competitor-item {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.05);
}

.comp-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
}

.comp-header img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: contain;
    background: #000; /* Ensure logos are visible */
}

.comp-pros { color: #818cf8; font-size: 0.9rem; margin-bottom: 10px; line-height: 1.5; }
.comp-cons { color: #a1a1aa; font-size: 0.9rem; line-height: 1.5; }

.stat-pill {
    background: rgba(56, 189, 248, 0.1);
    color: #38bdf8;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    display: inline-block;
    margin: 3px;
    font-weight: 700;
}





/* --- MOBILE NAVIGATION & UI ADAPTATIONS --- */

/* 1. Mobile Top Back Button */
.mobile-back-btn {
    display: none; /* Hidden on Desktop */
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

/* 2. Mobile Hamburger Button (Bottom Right) */
.mobile-menu-trigger {
    display: none; /* Hidden on Desktop */
    position: fixed;
    bottom: 25px;
    right: 20px;
    z-index: 2000;
    width: 55px;
    height: 55px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    font-size: 1.4rem;
    align-items: center;
    justify-content: center;
}

/* 3. Mobile Fullscreen Menu Overlay */
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 5, 0.98);
    backdrop-filter: blur(20px);
    z-index: 1999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.mobile-nav-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.mobile-nav-overlay a {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    font-family: 'Space Grotesk';
    text-transform: uppercase;
    opacity: 0.7;
    transition: 0.3s;
}

.mobile-nav-overlay a:hover, .mobile-nav-overlay a.active {
    opacity: 1;
    color: var(--accent);
    transform: scale(1.1);
}

/* 4. Hi-Fi Dropdown (Mobile Only) */
.hifi-mobile-select-wrapper {
    display: none; /* Hidden on Desktop */
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

.hifi-mobile-select {
    width: 100%;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 12px;
    font-family: 'Space Grotesk';
    font-size: 1rem;
    appearance: none; /* Removes default arrow */
    outline: none;
}

/* Custom Arrow for Dropdown */
.hifi-mobile-select-wrapper::after {
    content: '\f078'; /* FontAwesome Chevron Down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    pointer-events: none;
}

/* --- MEDIA QUERIES --- */
/* --- MEDIA QUERIES (MOBILE FIXES) --- */
@media (max-width: 768px) {
    
    /* 1. Fix Images */
    .persona-raw-img { height: auto; width: 100%; max-width: 400px; }
    .sitemap-small-img { width: 95%; }
    
    /* 2. Hide Desktop Navigation */
    .navigation-dock { display: none !important; }
    
    /* 3. Show Mobile Navigation Controls */
    .mobile-back-btn { display: flex; }
    .mobile-menu-trigger { display: flex; }
    
    /* 4. Hi-Fi Section: Hide Tabs, Show Dropdown */
    .tab-bar { display: none !important; }
    .hifi-mobile-select-wrapper { display: block; }
    
    /* 5. Adjust Typography */
    .section-title-central { font-size: 2.5rem; }
    
    /* --- NEW FIXES BELOW --- */

    /* FIX A: Make Carousel Buttons Smaller */
    .carousel-btn {
        width: 45px;       /* Was 75px */
        height: 45px;      /* Was 75px */
        font-size: 0.9rem; /* Smaller Arrow Icon */
        background: rgba(0,0,0,0.5); /* Darker background for better contrast */
    }
    .prev-btn { left: 5px; }  /* Move closer to edge */
    .next-btn { right: 5px; } /* Move closer to edge */

    /* FIX B: Fix "Zoom Out" issue by wrapping Tools */
    .tools-hub {
        flex-wrap: wrap;       /* Allows icons to drop to next line */
        gap: 15px;             /* Smaller gap (was 40px) */
        padding: 0 20px;       /* Add padding so they don't touch edges */
    }

    .tool-node {
        flex: 0 0 auto;        /* Prevent squishing */
    }
    
    .tool-node img {
        width: 30px !important;  /* Slightly smaller icons */
        height: 30px !important;
    }
    
    /* FIX C: Ensure Header doesn't overflow */
    .case-header {
        padding-top: 120px;
        padding-bottom: 40px;
        overflow-x: hidden; /* Cuts off anything sticking out */
    }
    
    /* FIX D: Fix Strategy Cards stacking */
    .strategy-bridge {
        flex-direction: column; /* Stack vertically */
        padding: 0 20px;
    }
    
    .strategy-card {
        width: 100%;       /* Full width */
        max-width: none;
        box-sizing: border-box; /* Ensures padding calculates correctly */
    }
}



/* --- NEW BIO IMAGE GALLERY STYLES --- */

.bio-gallery {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.bio-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 450px; /* Controls max size of the preview */
}

/* Image Container */
.bio-image-wrapper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.bio-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: 0.3s;
}

/* Hover Effect */
.bio-image-wrapper:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

.bio-image-wrapper:hover img {
    opacity: 0.8;
}

/* "Tap to view" Overlay */
.overlay-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
    background: rgba(0,0,0,0.6);
    padding: 10px 20px;
    border-radius: 50px;
    backdrop-filter: blur(4px);
}

.bio-image-wrapper:hover .overlay-icon {
    opacity: 1;
}

/* Captions & Buttons */
.bio-actions {
    text-align: center;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.bio-caption {
    font-family: 'Space Grotesk', sans-serif;
    color: #fff;
    font-size: 1.2rem;
    margin: 0;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    transition: 0.3s;
    text-transform: uppercase;
}

.download-btn:hover {
    background: #fff;
    color: #000;
    transform: translateY(-2px);
}

/* --- LIGHTBOX (FULL SCREEN VIEW) STYLES --- */
.lightbox-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 10001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.95);
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(255,255,255,0.1);
    object-fit: contain;
    animation: zoomIn 0.3s ease;
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.lightbox-close:hover {
    color: var(--accent);
}

@keyframes zoomIn {
    from {transform:scale(0.9); opacity:0} 
    to {transform:scale(1); opacity:1}
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .bio-gallery {
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }
    
    /* Make it obvious it's clickable on mobile */
    .overlay-icon {
        opacity: 1; 
        background: rgba(0,0,0,0.4);
        font-size: 0.8rem;
    }
}








/* ======================================================
   UNIVERSAL BACKGROUND OVERRIDE (Matches Index.html)
   ====================================================== */

/* 1. Force the body background to match index */
body.case-study-page {
    background-color: #0f0f11 !important;
    background-image: none !important; 
}

/* 2. Strip background gradients/colors from the Header */
.case-header {
    background: #0f0f11 !important;
}

/* 3. Strip backgrounds from all process sections */
.process-section {
    background: #0f0f11 !important;
}

/* 4. Ensure horizontal borders still exist to divide sections */
section, header {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* 5. (Optional but recommended) Remove the big radial glow from the body if JS applies it via inline styles */
[style*="radial-gradient"] {
    background: #0f0f11 !important;
}





/* ======================================================
   INDEX PAGE MOBILE NAVIGATION FIX
   ====================================================== */
@media (max-width: 768px) {
    /* 1. Completely hide the desktop dock */
    body.home-page .navigation-dock {
        display: none !important;
    }
    
    /* 2. Force Hamburger to Top Right */
    body.home-page .mobile-menu-trigger.index-hamburger {
        display: flex !important;
        top: 20px !important;
        bottom: auto !important;
        right: 20px !important;
    }
}



.card-actions-row {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.card-action-btn {
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-family: 'Space Grotesk', sans-serif;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Download Button Style */
.download-link {
    background: var(--accent, #8b5cf6);
    color: white !important;
}

/* Video Button Style */
.video-trigger {
    background: rgba(255,255,255,0.1);
    color: white;
}

.card-action-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
}



/* --- ENHANCED CONTACT SUBMIT BUTTON CTA --- */
#contact-form #submit-btn {
    background: var(--accent, #8b5cf6); /* Your primary accent purple */
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 16px 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%; /* Makes it full-width for a stronger CTA */
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3); /* Subtle glow */
}

#contact-form #submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.6); /* Stronger glow on hover */
    filter: brightness(1.1);
}

#contact-form #submit-btn:disabled {
    background: #555;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}











.badge-freelance {
    background: rgba(52, 211, 153, 0.1); /* Emerald soft background */
    color: #34d399; /* Emerald text */
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 10px;
    border: 1px solid rgba(52, 211, 153, 0.2);
}





/* Καθιστά το κουμπί ανενεργό οπτικά και λειτουργικά */
.btn-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important; /* Δεν πατιέται */
    cursor: default !important;
    background: #333 !important;
    color: #888 !important;
    border-color: #444 !important;
}