/* v1.0.0 (Golden Master) */
/* Contains: Variables, Resets, Fonts, Shared Components, Index Sections */

/* --- 1. FONTS & RESETS --- */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@700;800&family=Inter:wght@400;500;600;700&display=swap');

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- 2. VARIABLES (THEMING) --- */
:root {
    /* Colors - Light Mode */
    --primary: #F0D722;
    --bg-body: #F0F4F8;
    --surface: #FFFFFF;
    --text-main: #0A1929;
    --text-muted: #486581;
    --border: rgba(0, 0, 0, 0.1);
    --input-bg: #FFFFFF; /* Crisp White */
    --input-border: #E2E8F0; /* Slate-200 */
    --hover-overlay: rgba(255, 255, 255, 0.2);
    
    /* Resume Specific Gradients (Light) */
    --bg-header-start: #0A1929; 
    --bg-header-end: #11263d;
    --page-bg: #FFFFFF;
    --text-header: #FFFFFF;

    /* Dynamic Hero Overlay */
    --hero-overlay: rgba(15, 23, 42, 0.5); 
    
    /* Spacing & Layout */
    --container-width: 1024px;
    --radius: 8px; /* Standardized Radius */
    --radius-lg: 16px; 
    
    /* Typography */
    --font-display: 'Barlow', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* Dark Mode Overrides */
[data-theme="dark"] {
    --bg-body: #0A1929;
    --surface: #1E293B;
    --text-main: #F0F4F8;
    --text-muted: #94a3b8;
    --border: rgba(255, 255, 255, 0.1);
    --input-bg: rgba(30, 41, 59, 0.5); /* Dark Slate + Opacity */
    --input-border: rgba(255, 255, 255, 0.1); /* Subtle white border */
    --hero-overlay: rgba(15, 23, 42, 0.85);

    /* Resume Specific Gradients (Dark) */
    --page-bg: #1E293B;
    --bg-header-start: #1e293b; 
    --bg-header-end: #334155; 
}

/* --- 3. BASE BODY STYLES --- */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 4. LAYOUT UTILITIES --- */
.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 4rem 1.5rem 0; 
}

/* --- 5. SHARED COMPONENTS --- */

/* Theme Toggle Button */
.theme-toggle {
    position: absolute; 
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1100;
    background: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white; 
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    backdrop-filter: blur(4px); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.theme-toggle .icon {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    transition: stroke 0.3s, transform 0.3s;
}

.theme-toggle .moon { display: block; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
.theme-toggle .sun, [data-theme="dark"] .theme-toggle .moon { display: none; }

/* Privacy Banner */
#privacy-banner {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 340px;
    background: rgba(10, 25, 41, 0.95); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    z-index: 2000; 
    color: #fff;
    font-family: var(--font-body);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#privacy-banner.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.privacy-content h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #fff;
}

.privacy-content p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.25rem;
}

.privacy-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.btn-text {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-text:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-allow {
    background: var(--primary);
    color: #0A1929; 
    border: none;
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-allow:hover {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    #privacy-banner {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        width: auto;
    }
}

/* Footer */
footer {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: auto;
    background-color: rgba(0, 0, 0, 0.02); 
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; 
    align-items: center;
}

.footer-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: var(--text-main);
}

.footer-nav a {
    transition: color 0.2s;
}

.footer-nav a:hover, [data-theme="dark"] .footer-nav a:hover {
    color: var(--primary); 
}

.divider {
    color: var(--border);
    font-size: 0.75rem;
}

.footer-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    opacity: 0.8;
}

.copyright {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* --- Footer Navigation - Current Page State --- */
.footer-nav a[aria-current="page"] {
    opacity: 0.4;
    pointer-events: none; /* Prevents clicking the link to the current page */
    cursor: default;
}

/* Ensure the hover color doesn't trigger on the current page */
.footer-nav a[aria-current="page"]:hover {
    color: inherit;
}

/* --- 6. INDEX PAGE SPECIFIC LAYOUTS --- */

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 500px;
    display: flex;
    justify-content: center;
    text-align: center;
    color: white; 
    overflow: hidden;
    align-items: flex-start; 
    padding-top: 22vh;        
}

@media (min-width: 768px) {
    .hero {
        align-items: center; 
        padding-top: 0;      
    }
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-bg .overlay {
    position: absolute;
    inset: 0;
    background-color: var(--hero-overlay); 
    transition: background-color 1.5s ease-in-out;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 800px;
    padding: 0 1rem;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem); 
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero .subtitle {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    color: #e2e8f0; 
    margin-bottom: 2.5rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    text-wrap: balance; 
}

/* --- HERO BUTTONS (REFINED STITCH STYLE) --- */
/* Optimized for tight, premium feel */

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px) {
    .hero-actions {
        flex-direction: row;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 700; /* Bold */
    font-size: 1rem; 
    border-radius: 1rem;
    transition: all 0.2s ease;
    min-width: 200px; 
    
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn:hover {
    transform: scale(1.01);
    opacity: 0.95;
}

/* ICON SIZING */
.btn svg, .btn i {
    display: block;
    width: 1.3em;
    height: 1.3em;
    flex-shrink: 0;
    margin-top: -1px; /* Optical center fix */
}

.btn-primary {
    background-color: var(--primary);
    color: #0A1929;
}

.btn-outline {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.btn-outline:hover { background-color: rgba(255, 255, 255, 0.2); }

/* --- CONTACT BUTTON (REFINED PREMIUM STYLE) --- */
.btn-shimmer {
    position: relative;
    width: 100%;
    
    /* DNA Match: Same padding/font/radius as Hero */
    padding: 1rem 2rem; 
    font-family: var(--font-body);
    font-weight: 700; 
    font-size: 1rem;
    
    background: #0f172a; 
    color: #FFFFFF;
    
    border: none;
    border-radius: 1rem; 
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; 
    
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-shimmer:hover {
    transform: scale(1.01);
}

/* ICON SIZING: Also reduced to 1.1em to match Stitch elegance */
.btn-shimmer svg, .btn-shimmer i {
    display: block;
    width: 0.9rem; 
    height: 0.9rem;
    flex-shrink: 0;
    margin-top: -1px; /* Optical center fix */
}

/* CONFLICT FIX: Reset styles for .btn-text inside the button */
.btn-shimmer .btn-text {
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: transparent;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    display: block; 
    line-height: 1;
}

/* Success State Style */
.btn-shimmer.success {
    background-color: #10b981; /* Emerald 500 */
    cursor: default;
}

/* DARK MODE: Yellow Button like Stitch */
[data-theme="dark"] .btn-shimmer {
    background: var(--primary);
    color: #0A1929;
}

[data-theme="dark"] .btn-shimmer:hover {
    box-shadow: 0 10px 20px rgba(240, 215, 34, 0.3);
}

.btn-shimmer:active {
    transform: translateY(0);
}

/* The Shine Animation */
.shimmer-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2), /* Subtle white shimmer */
        transparent
    );
    animation: shimmerLoop 2.5s infinite;
    pointer-events: none;
}

[data-theme="dark"] .shimmer-effect {
     background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4), /* Brighter shimmer on yellow */
        transparent
    );
}

@keyframes shimmerLoop {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Button Shake Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.shake {
    animation: shake 0.4s ease-in-out;
}

.btn-shimmer:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* About Section */
.about-section { margin-bottom: 0rem; }

.about-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: left; 
}

.about-content { display: flow-root; }

.about-image {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;       
}

.about-image img {
    border-radius: 50%;
    width: 180px; 
    height: 180px;
    object-fit: cover;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.about-text h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    margin-top: 1.5rem;
}

.about-text h3:first-child { margin-top: 0; }

.about-text p {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .about-image {
        float: right; 
        margin-left: 3rem;  
        margin-bottom: 1rem;
        margin-top: 0.5rem; 
        shape-outside: circle(50%);
        width: 220px;
        height: 220px;
        display: block; 
    }
    .about-image img { width: 220px; height: 220px; }
}

/* --- LOGO STRIP SECTION (Optimized v0.10.5) --- */

.logo-strip {
    text-align: center;
    border: none;
    padding: 6rem 0;
    margin-bottom: 2rem;
    background-color: transparent;
}

.logo-strip-header {
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 600;
    opacity: 0.4;
    margin-bottom: 2rem; 
}

.logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    gap: 2rem;
}

/* --- SURGICAL POLISH: Padding & Optical Alignment --- */

@media (max-width: 820px) {
    /* 1. Tighten the strip's vertical footprint on mobile */
    .logo-strip {
        padding: 1.25rem 0 !important; /* Reduced from 2rem */
        margin-bottom: 1.5rem !important;
    }

    .logo-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        padding: 0 1.5rem;
        box-sizing: border-box;
        gap: 1.25rem 1rem !important;
        max-width: 500px;
    }

    .logo-link:nth-child(3) {
        grid-column: span 2; 
        justify-self: center; 
        width: 100% !important;
        margin: 0.5rem 0;
    }

    .logo-link {
        width: 100% !important; /* Allow grid to control width */
        height: auto;
    }

    /* 2. OPTICAL NUDGE for TIFF Logo */
    /* If TIFF is the 1st logo, we nudge it down slightly to align 
       visually with the horizontal weight of the Alliants wordmark */
    .logo-link:nth-child(5) .logo-item {
        transform: translateY(4px); /* Subtle shift down for optical balance */
    }
    
    /* Ensure the reveal state respects the nudge */
    .logo-strip.is-visible .logo-link:nth-child(5) .logo-item {
        transform: translateY(4px) translateZ(0);
    }

    /* 1. Headline Font Size: Scaling for 3-line flow */
    .style-contact .contact-info h3 {
        font-size: 2.4rem !important; /* Scaled down from 3.5rem to fit width */
        line-height: 1.1;
        letter-spacing: -0.02em;
        
        /* Modern CSS: Automatically balances the words across lines */
        text-wrap: balance; 
        
        /* Ensures the container doesn't force a break too early */
        width: 100%; 
    }

    /* 2. UNIFY PADDING: Align Contact Card internals with standard Bento padding (2rem) */
    /* This ensures the text alignment matches the rest of the grid perfectly */
    .style-contact .contact-info {
        padding: 2rem 2rem 1rem 2rem !important; /* Top, Sides, and a reduced Bottom gap */
    }

    .contact-form-wrapper {
        padding: 1rem 2rem 2rem 2rem !important; /* Top gap, Sides, and Bottom padding */
    }

    /* 3. Tighten spacing between input fields (Name, Email, etc.) */
    .style-contact .input-group {
        margin-bottom: 1.25rem !important; /* Reduced from 1.5rem */
    }
}

/* Optional: If the Alliants logo (let's say 2nd) looks too small 
   compared to the TIFF block, you can also scale it slightly */
/*
.logo-link:nth-child(2) .logo-item {
    transform: scale(1.05);
}
*/

.logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 160px; /* Consistent spacing footprint */
    flex-shrink: 0;
    padding: 0;
    /* Container-level lift for stability */
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1);
    will-change: transform;
}

.logo-link:hover {
    /* Lift the whole link container */
    transform: translateY(-4px);
}

.logo-link:nth-child(1) .logo-item {
    filter: grayscale(100%) contrast(1.1) opacity(0.7); /* Higher opacity for thin lines */
}

.logo-item {
    max-height: 38px;
    /* Default "Ghosted" State */
    filter: grayscale(100%) contrast(1.1) opacity(0.55);
    
    /* FIX: Snappier 0.2s transition with Out-Quint easing */
    transition: filter 0.2s cubic-bezier(0.2, 1, 0.3, 1), 
                transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), 
                opacity 0.6s ease-out;
    
    /* Pre-hint to the browser to optimize these properties */
    will-change: filter, opacity;

    /* REVEAL INITIAL STATE */
    transform: translateY(20px) translateZ(0);
    opacity: 0;
    
    /* Performance optimizations */
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Individual sizing overrides */
.logo-item.logo-large { 
    max-height: 58px; 
    max-width: min(140px, 100%); 
}

.logo-link:first-child .logo-item {
    max-height: 30px; 
}

.logo-item.logo-small { 
    max-width: min(90px, 100%); 
    max-height: 26px; 
}

/* Reveal Active State (triggered by JS) */
.logo-strip.is-visible .logo-item {
    transform: translateY(0) translateZ(0);
    opacity: 1;
}

/* --- HOVER COLOR REVEAL --- */
.logo-link:hover .logo-item {
    filter: grayscale(0%) contrast(1) opacity(1);
}

/* Stagger the reveal for each logo */
.logo-link:nth-child(1) .logo-item { transition-delay: 0.1s; }
.logo-link:nth-child(2) .logo-item { transition-delay: 0.15s; }
.logo-link:nth-child(3) .logo-item { transition-delay: 0.2s; }
.logo-link:nth-child(4) .logo-item { transition-delay: 0.25s; }
.logo-link:nth-child(5) .logo-item { transition-delay: 0.3s; }

/* --- BENTO GRID SYSTEM --- */

.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
    /* UPDATED: Matches the internal gap (1.5rem) exactly. */
    margin-bottom: 1.5rem; 
}

/* MOBILE RE-ORDER STRATEGY (Max Width 767px) */
@media (max-width: 767px) {
    /* 1. Product Integrity -> Order 1 */
    .bento-card:nth-child(4) { order: 1; }
    /* 2. Technical Stack -> Order 2 */
    .bento-card:nth-child(2) { order: 2; }
    /* 3. Strategic Clarity -> Order 3 */
    .bento-card:nth-child(1) { order: 3; }
    /* 4. Prototyping -> Order 4 */
    .bento-card:nth-child(3) { order: 4; }
    /* 5. Execution -> Order 5 */
    .bento-card:nth-child(5) { order: 5; }
    /* 6. Impact -> Order 6 */
    .bento-card:nth-child(6) { order: 6; }
    /* 7. Contact Card -> Order 7 */
    .bento-card:last-child { order: 7; }
}

@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (min-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bento-card.wide {
        grid-column: span 2;
    }
    
    .bento-card.full-width {
        grid-column: 1 / -1;
    }
}

/* Base Bento Card Style */
.bento-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px; 
    padding: 2rem;
    text-align: left;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    position: relative; 
    overflow: hidden; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .bento-card {
    border-color: rgba(255, 255, 255, 0.08); 
    background: var(--surface); 
}

.bento-card:hover, .bento-card.is-focused {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* --- Card Headers (1x1 Layout) --- */
.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    position: relative; 
    z-index: 2;
}

.card-header h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 0;
    color: var(--text-main);
}

.bento-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Icons */
.icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
}

.icon-wrapper.amber { background-color: rgba(245, 158, 11, 0.1); color: #d97706; }
.icon-wrapper.blue { background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.icon-wrapper.purple { background-color: rgba(168, 85, 247, 0.1); color: #a855f7; }
.icon-wrapper.emerald { background-color: rgba(16, 185, 129, 0.1); color: #059669; }
.icon-wrapper.rose { background-color: rgba(244, 63, 94, 0.1); color: #e11d48; }

[data-theme="dark"] .icon-wrapper.amber { color: #fbbf24; }
[data-theme="dark"] .icon-wrapper.blue { color: #60a5fa; }
[data-theme="dark"] .icon-wrapper.purple { color: #c084fc; }
[data-theme="dark"] .icon-wrapper.emerald { color: #34d399; }
[data-theme="dark"] .icon-wrapper.rose { color: #fb7185; }

/* --- Wide Card Gradient System --- */

/* 1. Base Gradient Wash (Always Visible) */
.card-gradient {
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: opacity 0.3s ease;
}

.style-blue .card-gradient {
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.8), rgba(236, 254, 255, 0.6), #ffffff);
}
[data-theme="dark"] .style-blue .card-gradient {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.2), rgba(22, 78, 99, 0.1), var(--surface));
}

.style-purple .card-gradient {
    background: linear-gradient(135deg, rgba(250, 245, 255, 0.8), rgba(253, 244, 255, 0.6), #ffffff);
}
[data-theme="dark"] .style-purple .card-gradient {
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.2), rgba(112, 26, 117, 0.1), var(--surface));
}

/* 2. Blob Overlay */
.card-blob {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(64px); 
    z-index: 1;
    opacity: 0.6; 
    transition: all 0.5s ease;
}

.style-blue .card-blob {
    top: -80px; right: -80px; 
    background-color: rgba(59, 130, 246, 0.1); 
}

.bento-card.style-blue:hover .card-blob, .bento-card.style-blue.is-focused .card-blob {
    background-color: rgba(59, 130, 246, 0.2); 
    opacity: 1;
}

.style-purple .card-blob {
    bottom: -80px; left: -80px; 
    background-color: rgba(168, 85, 247, 0.1); 
}

.bento-card.style-purple:hover .card-blob, .bento-card.style-purple.is-focused .card-blob {
    background-color: rgba(168, 85, 247, 0.2); 
    opacity: 1;
}

/* UPDATED: GOLD BLOB LOGIC (Matches behavior, changes values) */
.style-contact .card-blob {
    width: 450px; /* Slightly larger presence */
    height: 450px;
    left: -100px;
    bottom: -100px;
    /* Deeper Amber for Visibility */
    background-color: rgba(245, 158, 11, 0.15); 
    filter: blur(80px);
    z-index: 0;
    transition: all 0.5s ease;
}

/* Hover Effect: Matches the intensification of Blue/Purple */
.bento-card.style-contact:hover .card-blob, 
.bento-card.style-contact.is-focused .card-blob {
    background-color: rgba(245, 158, 11, 0.3); /* Stronger Amber on hover */
    opacity: 1;
    transform: scale(1.05); /* Subtle grow like the others */
}

.card-content-wrapper {
    z-index: 2;
    position: relative;
    width: 100%;
}

.content-body p { margin-bottom: 1.5rem; position: relative; z-index: 2; }

/* --- Chip Grid (Pills) --- */
.chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; 
    position: relative;
    z-index: 2;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem; 
    border-radius: 9999px;      
    font-size: 0.875rem;        
    font-weight: 500;           
    backdrop-filter: blur(4px); 
    border: 1px solid transparent;
    transition: background-color 0.2s;
}

.style-blue .chip {
    background-color: rgba(255, 255, 255, 0.6); 
    border-color: #bfdbfe;                      
    color: #1d4ed8;                             
}

[data-theme="dark"] .style-blue .chip {
    background-color: rgba(30, 58, 138, 0.6);   
    border-color: #1e40af;                      
    color: #93c5fd;                             
}

.style-purple .chip {
    background-color: rgba(255, 255, 255, 0.6); 
    border-color: #e9d5ff;                      
    color: #7e22ce;                             
}

[data-theme="dark"] .style-purple .chip {
    background-color: rgba(30, 58, 138, 0.6);   
    border-color: #6b21a8;                      
    color: #d8b4fe;                             
}

/* --- Impact Card --- */
.bento-card.style-impact {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); 
    color: white;
    border: none; 
    justify-content: center;
    transition: background 0.4s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .bento-card.style-impact {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%); 
}

.bento-card.style-impact h3,
.bento-card.style-impact p {
    color: white; 
    transition: color 0.4s ease;
}

.impact-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem; 
}

.impact-text {
    flex: 1;      
    min-width: 0; 
}

.bento-card.style-impact .impact-label {
    transition: color 0.4s ease;
}

.impact-number {
    font-family: var(--font-display);
    font-size: 3.5rem; 
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.bento-card.style-impact .impact-number {
    transition: color 0.4s ease;
    flex-shrink: 0; 
}

.bento-card.style-impact p {
    opacity: 0.7;
    font-size: 0.9rem;
}

.bento-card.style-impact:hover, .bento-card.style-impact.is-focused {
    background: var(--primary); 
    transform: translateY(-4px); 
    box-shadow: 0 15px 30px rgba(240, 215, 34, 0.3); 
}

.bento-card.style-impact:hover h3, .bento-card.style-impact.is-focused h3,
.bento-card.style-impact:hover p, .bento-card.style-impact.is-focused p,
.bento-card.style-impact:hover .impact-number, .bento-card.style-impact.is-focused .impact-number,
.bento-card.style-impact:hover .impact-label, .bento-card.style-impact.is-focused .impact-label {
    color: #0A1929; 
}

.bento-card.style-impact:hover p, .bento-card.style-impact.is-focused p,
.bento-card.style-impact:hover .impact-label, .bento-card.style-impact.is-focused .impact-label {
    opacity: 0.8; 
}

/* --- CONTACT CARD (New Feature) --- */
.bento-card.style-contact {
    padding: 0; /* Remove default padding to allow split layout */
    overflow: hidden;
    /* Use surface background but make sure split works */
    display: flex;
    flex-direction: column;
    /* Ensure relative for blob positioning */
    position: relative; 
}

.contact-split-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1; /* Content above blob */
}

@media (min-width: 768px) {
    .contact-split-layout {
        flex-direction: row;
    }
}

/* Left Side: The "Hook" */
/* FIX: Added .style-contact parent selector to prevent bleeding into Resume page */
.style-contact .contact-info {
    padding: 2.5rem;
    /* Updated background: Subtle wash */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent);
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 2; /* 40% width approx */
}

[data-theme="dark"] .style-contact .contact-info {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), transparent);
}

.style-contact .contact-info h3 {
    font-family: var(--font-display);
    /* UPDATED: Large, 3-row Headline */
    font-size: 3.5rem; 
    line-height: 1.05;
    margin-bottom: 1.5rem;
    color: var(--text-main);
    letter-spacing: -0.03em;
}

/* UPDATED: Gradient Text for "Great" */
.text-highlight {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    
    /* Light Mode: Navy -> Blue */
    background-image: linear-gradient(135deg, #0A1929 0%, #2563eb 100%);
}

[data-theme="dark"] .text-highlight {
    /* Dark Mode: Yellow -> Amber */
    background-image: linear-gradient(135deg, #F0D722 0%, #f59e0b 100%);
}

.contact-info p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.email-link {
    font-weight: 600;
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
}

.email-link:hover {
    color: #d97706; /* Darker amber */
}
[data-theme="dark"] .email-link:hover { color: var(--primary); }

/* Status Pill (Surgical Update: Compact like Stitch) */
.status-pill-wrapper {
    display: inline-flex; 
    align-items: center;
    gap: 0.5rem; /* Reduced gap */
    margin-bottom: 1.5rem;
    width: fit-content;
    
    /* UPDATED: Compact Padding */
    padding: 0.35rem 0.85rem; 
    background-color: #ecfdf5; /* Solid Emerald-50 */
    border: 1px solid #d1fae5; /* Emerald-100 */
    border-radius: 9999px;
    
    transition: all 0.2s ease;
}

.status-pill-wrapper:hover {
    background-color: #d1fae5;
    border-color: #a7f3d0;
    transform: translateY(-1px);
}

[data-theme="dark"] .status-pill-wrapper {
    background-color: rgba(6, 78, 59, 0.4); /* Darker emerald for dark mode */
    border-color: rgba(16, 185, 129, 0.2);
}

.status-dot-container {
    position: relative;
    display: flex;
    height: 8px; /* Smaller dot */
    width: 8px;
}

.status-dot-container .dot {
    position: relative;
    display: inline-flex;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #10b981; /* Emerald 500 */
}

.status-dot-container .ping {
    position: absolute;
    display: inline-flex;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: #34d399;
    opacity: 0.75;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

.status-text {
    font-size: 0.75rem; /* text-xs */
    font-weight: 700;   /* Bold like Stitch */
    color: #047857;     /* Emerald 700 */
    text-transform: uppercase;
    letter-spacing: 0.08em; /* Tracking wider */
}
[data-theme="dark"] .status-text { color: #6ee7b7; }

/* Right Side: The "Action" (Form) */
.contact-form-wrapper {
    padding: 2.5rem;
    flex: 3; /* 60% width approx */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Form Inputs (Floating Label Style - Kept as is) */
.input-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.ideal-input {
    width: 100%;
    padding: 1rem 1.25rem;
    /* UPDATE: Crisp White Background */
    background-color: var(--input-bg); 
    /* UPDATE: Subtle Border */
    border: 1px solid var(--input-border); 
    border-radius: 12px;
    font-family: var(--font-body);
    /* UPDATE: Smaller, premium text size */
    font-size: 0.95rem;
    color: var(--text-main);
    transition: all 0.3s ease;
    outline: none;
    /* Optional: Slight shadow for depth */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* UPDATED: Visual Validation (Instead of Tooltips) */
/* If form has 'novalidate', these styles help show errors */
.ideal-input:not(:placeholder-shown):invalid {
    border-color: #ef4444; /* Red border on invalid input */
    background-color: rgba(254, 242, 242, 0.5); /* Slight Red Tint */
}

/* Error State */
.input-group.has-error .ideal-input {
    border-color: #ef4444;
    background-color: rgba(254, 242, 242, 0.5);
}

/* --- Error Text Styling --- */
.error-text {
    color: #ef4444;         /* Requirement: Red */
    font-size: 0.8rem;      /* Requirement: Small */
    font-weight: 500;       /* Requirement: Medium */
    max-height: 0;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease; /* Requirement: Subtle Animation */
    overflow: hidden;
    margin-top: 0;
}

.input-group.has-error .error-text {
    max-height: 40px; 
    opacity: 1;
    transform: translateY(0);
    margin-top: 0.35rem;    /* Requirement: Directly below, aligned left (default) */
}

.ideal-input:focus {
    background-color: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(240, 215, 34, 0.1);
}

.ideal-input textarea {
    resize: none;
}

/* Label Styling */
.input-group label {
    position: absolute;
    left: 1.25rem;
    top: 1rem;
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.2s ease;
    background-color: transparent;
    padding: 0 0.25rem;
}

/* Floating logic */
.ideal-input:focus ~ label,
.ideal-input:not(:placeholder-shown) ~ label {
    top: -0.65rem;
    left: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
    background-color: var(--surface); 
    border-radius: 4px;
}

[data-theme="dark"] .ideal-input:focus ~ label,
[data-theme="dark"] .ideal-input:not(:placeholder-shown) ~ label {
    background-color: var(--surface); 
    color: var(--primary);
}