/* Aldo Eliacim - Personal Portfolio Styles */
/* Modern, responsive design with dark/light theme support */

/* Variables moved to css/base-tokens.css (shared across pages) */
/* Ensure <link rel="stylesheet" href="css/base-tokens.css"> is loaded before this file */

/* ==============================================
   Base Styles & Reset
   ============================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

main {
    padding-top: 80px; /* Account for fixed header */
}

/* ==============================================
   Interactive Elements & Animations
   ============================================== */

/* Ripple effect for buttons */
.btn {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Header animations */
.header {
    transition: transform 0.3s ease;
}

/* Scroll animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==============================================
   Interest Cards Grid
   ============================================== */
.interests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
}

.interest-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.interest-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent-color);
}

.interest-card.featured {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-lg);
}

.interest-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.interest-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-100);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

[data-theme="dark"] .interest-icon {
    background: var(--primary-900);
}

.interest-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.interest-description {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    line-height: 1.6;
}

.interest-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* (Legacy basic tech-bubble styles removed; unified advanced + minimal variants retained below) */

/* ==============================================
   Keyboard Navigation
   ============================================== */
.keyboard-navigation :focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ==============================================
   Utilities
   ============================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ==============================================
   Hero Section & Terminal Styles
   ============================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--space-xl) 0;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    overflow: hidden;
}

.hero-content-grid {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.hero-badge {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    background: var(--primary-50);
    color: var(--primary);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--space-lg);
}

[data-theme="dark"] .hero-badge {
    background: var(--primary-900);
    color: var(--primary-100);
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

.hero-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-base);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #3b82f6);
    color: white;
    border: 2px solid var(--primary);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, var(--primary));
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--primary);
    background: var(--primary-50);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .btn-secondary:hover {
    background: var(--primary-900);
}

.btn-text {
    font-weight: 600;
}

.btn-icon {
    font-size: 1.2rem;
}

.btn-arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.btn-primary:hover .btn-arrow {
    transform: translateX(4px);
}

/* Terminal Styles */
.terminal-window {
    background: #1a1a1a;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    font-family: 'Courier New', monospace;
}

.terminal-header {
    background: #2d2d2d;
    padding: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.terminal-dot.red { background: #ff5f56; }
.terminal-dot.yellow { background: #ffbd2e; }
.terminal-dot.green { background: #27ca3f; }

.terminal-title {
    background: #2d2d2d;
    color: #fff;
    text-align: center;
    padding: var(--space-sm);
    font-size: 0.875rem;
}

.terminal-content {
    padding: var(--space-lg);
    background: #1a1a1a;
    color: #00ff00;
    font-size: 0.875rem;
    line-height: 1.6;
}

.terminal-prompt {
    color: #00ff00;
}

.terminal-command {
    color: #fff;
}

.terminal-output {
    color: #ccc;
    margin-bottom: var(--space-md);
}

.terminal-line {
    margin-bottom: var(--space-sm);
}

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .header {
    background: rgba(15, 23, 42, 0.95);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
}

.nav-brand {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
}

.nav-menu {
    display: flex;
    gap: var(--space-lg);
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-base);
}

.nav-link:hover {
    color: var(--primary);
}

.nav-controls {
    display: flex;
    gap: var(--space-sm);
}

.control-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    cursor: pointer;
    transition: var(--transition-base);
}

.control-btn:hover {
    border-color: var(--primary);
}

/* ==============================================
   Floating Tech Universe & Bubbles
   ============================================== */
.hero-visual-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.floating-tech-universe {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#tech-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.floating-bubbles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.tech-bubble {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%; /* Perfect circles */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    overflow: visible;
}

[data-theme="dark"] .tech-bubble {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.3), rgba(15, 23, 42, 0.2));
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow:
        0 4px 15px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tech-bubble:hover {
    transform: scale(1.3);
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.1));
    border-color: var(--accent-color);
    box-shadow:
        0 8px 32px rgba(139, 92, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: 100;
}

.tech-bubble.popping {
    animation: bubblePop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.tech-bubble.large {
    width: 80px;
    height: 80px;
}

.tech-bubble.medium {
    width: 65px;
    height: 65px;
}

.tech-bubble.small {
    width: 50px;
    height: 50px;
}

.bubble-icon {
    font-size: 1.5rem;
    opacity: 0.8;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.tech-bubble.large .bubble-icon { font-size: 2.2rem; }
.tech-bubble.medium .bubble-icon { font-size: 1.8rem; }
.tech-bubble.small .bubble-icon { font-size: 1.3rem; }

.bubble-label {
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 1rem;
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
    backdrop-filter: blur(10px);
}

.tech-bubble:hover .bubble-icon {
    opacity: 1;
    transform: scale(1.1);
}

.tech-bubble:hover .bubble-label {
    opacity: 1;
    transform: translateX(-50%) translateY(-8px);
}

/* Bubble pop and fall animations */
@keyframes bubblePop {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    30% {
        transform: scale(1.8);
        opacity: 1;
        box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.8),
                   inset 0 0 25px rgba(255, 255, 255, 0.4);
    }
    50% {
        transform: scale(1.5);
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.4), rgba(139, 92, 246, 0.3));
        box-shadow: 0 0 50px rgba(var(--accent-rgb), 1),
                   inset 0 0 30px rgba(255, 255, 255, 0.5);
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* bubbleFloat animation removed: JS (RandomBubbleSystem) now controls transform for movement */
/* If gentle idle motion desired, reintroduce with a separate wrapper element to avoid transform conflicts. */

.tech-bubble.popping {
    animation: bubblePop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards !important;
    z-index: 1000;
}

.falling-icon {
    position: absolute;
    pointer-events: none;
    font-size: 1.8rem;
    animation: iconFall 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 999;
    color: rgba(var(--accent-rgb), 0.9);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

@keyframes iconFall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
    20% {
        opacity: 1;
        transform: translateY(20px) rotate(45deg) scale(0.9);
    }
    50% {
        opacity: 0.8;
        transform: translateY(150px) rotate(180deg) scale(0.7);
    }
    80% {
        opacity: 0.4;
        transform: translateY(250px) rotate(270deg) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translateY(350px) rotate(360deg) scale(0.2);
    }
}

/* Enhanced bubble colors with gradients */
.tech-bubble.python { border-color: rgba(55, 118, 171, 0.5); }
.tech-bubble.python:hover {
    background: linear-gradient(145deg, rgba(55, 118, 171, 0.3), rgba(255, 212, 59, 0.2));
}

/* ==============================================
   Minimal Bubbles Variant
   Applied via container .bubbles-minimal or per-element .tech-bubble.minimal
   Provides a flatter, subtler aesthetic.
   ============================================== */
.bubbles-minimal .tech-bubble, .tech-bubble.minimal {
    background: var(--bg-elevated, var(--bg-secondary));
    border: 1px solid var(--border-color);
    box-shadow: none;
    backdrop-filter: none;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.bubbles-minimal .tech-bubble:hover, .tech-bubble.minimal:hover {
    transform: scale(1.08);
    background: var(--bg-secondary-hover, var(--bg-secondary));
    border-color: var(--accent-color);
    box-shadow: none;
}
.bubbles-minimal .tech-bubble .bubble-icon, .tech-bubble.minimal .bubble-icon {
    opacity: 0.6;
    filter: none;
}
.bubbles-minimal .tech-bubble:hover .bubble-icon, .tech-bubble.minimal:hover .bubble-icon {
    opacity: 0.9;
    transform: none;
}
.bubbles-minimal .tech-bubble .bubble-label, .tech-bubble.minimal .bubble-label {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 500;
}
.bubbles-minimal .tech-bubble:hover .bubble-label, .tech-bubble.minimal:hover .bubble-label {
    color: var(--text-primary);
}

.tech-bubble.rust { border-color: rgba(206, 66, 43, 0.5); }
.tech-bubble.rust:hover {
    background: linear-gradient(145deg, rgba(206, 66, 43, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.javascript { border-color: rgba(247, 223, 30, 0.5); }
.tech-bubble.javascript:hover {
    background: linear-gradient(145deg, rgba(247, 223, 30, 0.3), rgba(0, 0, 0, 0.1));
}

.tech-bubble.react { border-color: rgba(97, 218, 251, 0.5); }
.tech-bubble.react:hover {
    background: linear-gradient(145deg, rgba(97, 218, 251, 0.3), rgba(40, 44, 52, 0.2));
}

.tech-bubble.tensorflow { border-color: rgba(255, 111, 0, 0.5); }
.tech-bubble.tensorflow:hover {
    background: linear-gradient(145deg, rgba(255, 111, 0, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.pytorch { border-color: rgba(238, 76, 44, 0.5); }
.tech-bubble.pytorch:hover {
    background: linear-gradient(145deg, rgba(238, 76, 44, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.docker { border-color: rgba(36, 150, 237, 0.5); }
.tech-bubble.docker:hover {
    background: linear-gradient(145deg, rgba(36, 150, 237, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.linux { border-color: rgba(252, 198, 36, 0.5); }
.tech-bubble.linux:hover {
    background: linear-gradient(145deg, rgba(252, 198, 36, 0.3), rgba(0, 0, 0, 0.1));
}

/* AI/ML Technologies */
.tech-bubble.jupyter { border-color: rgba(244, 118, 36, 0.5); }
.tech-bubble.jupyter:hover {
    background: linear-gradient(145deg, rgba(244, 118, 36, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.numpy { border-color: rgba(79, 121, 167, 0.5); }
.tech-bubble.numpy:hover {
    background: linear-gradient(145deg, rgba(79, 121, 167, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.pandas { border-color: rgba(230, 230, 230, 0.5); }
.tech-bubble.pandas:hover {
    background: linear-gradient(145deg, rgba(230, 230, 230, 0.3), rgba(21, 49, 84, 0.2));
}

/* Languages & Frameworks */
.tech-bubble.java { border-color: rgba(237, 99, 48, 0.5); }
.tech-bubble.java:hover {
    background: linear-gradient(145deg, rgba(237, 99, 48, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.cplusplus { border-color: rgba(0, 89, 156, 0.5); }
.tech-bubble.cplusplus:hover {
    background: linear-gradient(145deg, rgba(0, 89, 156, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.r { border-color: rgba(39, 109, 195, 0.5); }
.tech-bubble.r:hover {
    background: linear-gradient(145deg, rgba(39, 109, 195, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.django { border-color: rgba(9, 46, 32, 0.5); }
.tech-bubble.django:hover {
    background: linear-gradient(145deg, rgba(9, 46, 32, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.flask { border-color: rgba(0, 0, 0, 0.5); }
.tech-bubble.flask:hover {
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.flutter { border-color: rgba(2, 125, 195, 0.5); }
.tech-bubble.flutter:hover {
    background: linear-gradient(145deg, rgba(2, 125, 195, 0.3), rgba(255, 255, 255, 0.2));
}

/* DevOps & Infrastructure */
.tech-bubble.kubernetes { border-color: rgba(50, 108, 229, 0.5); }
.tech-bubble.kubernetes:hover {
    background: linear-gradient(145deg, rgba(50, 108, 229, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.bash { border-color: rgba(76, 76, 76, 0.5); }
.tech-bubble.bash:hover {
    background: linear-gradient(145deg, rgba(76, 76, 76, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.git { border-color: rgba(240, 80, 51, 0.5); }
.tech-bubble.git:hover {
    background: linear-gradient(145deg, rgba(240, 80, 51, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.ansible { border-color: rgba(238, 55, 36, 0.5); }
.tech-bubble.ansible:hover {
    background: linear-gradient(145deg, rgba(238, 55, 36, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.terraform { border-color: rgba(96, 67, 137, 0.5); }
.tech-bubble.terraform:hover {
    background: linear-gradient(145deg, rgba(96, 67, 137, 0.3), rgba(255, 255, 255, 0.2));
}

/* Databases & Data */
.tech-bubble.mongodb { border-color: rgba(71, 162, 72, 0.5); }
.tech-bubble.mongodb:hover {
    background: linear-gradient(145deg, rgba(71, 162, 72, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.mysql { border-color: rgba(0, 117, 143, 0.5); }
.tech-bubble.mysql:hover {
    background: linear-gradient(145deg, rgba(0, 117, 143, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.postgresql { border-color: rgba(51, 103, 145, 0.5); }
.tech-bubble.postgresql:hover {
    background: linear-gradient(145deg, rgba(51, 103, 145, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.redis { border-color: rgba(220, 54, 47, 0.5); }
.tech-bubble.redis:hover {
    background: linear-gradient(145deg, rgba(220, 54, 47, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.elasticsearch { border-color: rgba(254, 194, 81, 0.5); }
.tech-bubble.elasticsearch:hover {
    background: linear-gradient(145deg, rgba(254, 194, 81, 0.3), rgba(0, 0, 0, 0.1));
}

/* Hardware & Systems */
.tech-bubble.raspberrypi { border-color: rgba(197, 48, 77, 0.5); }
.tech-bubble.raspberrypi:hover {
    background: linear-gradient(145deg, rgba(197, 48, 77, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.arduino { border-color: rgba(0, 129, 132, 0.5); }
.tech-bubble.arduino:hover {
    background: linear-gradient(145deg, rgba(0, 129, 132, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.nvidia { border-color: rgba(118, 185, 0, 0.5); }
.tech-bubble.nvidia:hover {
    background: linear-gradient(145deg, rgba(118, 185, 0, 0.3), rgba(0, 0, 0, 0.1));
}

.tech-bubble.ubuntu { border-color: rgba(233, 84, 32, 0.5); }
.tech-bubble.ubuntu:hover {
    background: linear-gradient(145deg, rgba(233, 84, 32, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.archlinux { border-color: rgba(23, 147, 209, 0.5); }
.tech-bubble.archlinux:hover {
    background: linear-gradient(145deg, rgba(23, 147, 209, 0.3), rgba(255, 255, 255, 0.2));
}

/* Cloud & Tools */
.tech-bubble.gcp { border-color: rgba(66, 133, 244, 0.5); }
.tech-bubble.gcp:hover {
    background: linear-gradient(145deg, rgba(66, 133, 244, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.nodejs { border-color: rgba(51, 153, 51, 0.5); }
.tech-bubble.nodejs:hover {
    background: linear-gradient(145deg, rgba(51, 153, 51, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.opencv { border-color: rgba(0, 0, 255, 0.5); }
.tech-bubble.opencv:hover {
    background: linear-gradient(145deg, rgba(0, 0, 255, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.kafka { border-color: rgba(35, 31, 32, 0.5); }
.tech-bubble.kafka:hover {
    background: linear-gradient(145deg, rgba(35, 31, 32, 0.3), rgba(255, 255, 255, 0.2));
}

.tech-bubble.airflow { border-color: rgba(1, 122, 132, 0.5); }
.tech-bubble.airflow:hover {
    background: linear-gradient(145deg, rgba(1, 122, 132, 0.3), rgba(255, 255, 255, 0.2));
}

/* Service status colors in terminal */
.service-status.active { color: #22c55e; }
.service-status.running { color: #3b82f6; }
.service-status.loaded { color: #f59e0b; }

.service-icon { color: #22c55e; }

.terminal-cursor {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Responsive helpers */
@media (max-width: 768px) {
    .interests-grid {
        grid-template-columns: 1fr;
    }

    .tech-bubble.large {
        width: 60px;
        height: 60px;
    }

    .tech-bubble.medium {
        width: 50px;
        height: 50px;
    }
}

/* ==============================================
   Additional Layout & Section Styles
   ============================================== */
section {
    padding: var(--space-xl) 0;
}

/* =============================
     Mobile Navigation & Layout
     ============================= */
.nav-toggle { display:none; }
@media (max-width: 900px) {
    .nav { position:relative; }
    .nav-toggle {
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        width:38px; height:28px; padding:4px 6px;
        background:var(--surface-glass); border:1px solid var(--border-color);
        border-radius:8px; cursor:pointer; transition:.3s;
    }
    .nav-toggle .bar { height:3px; width:100%; border-radius:2px; background:var(--text-primary); transition:.4s; }
    .nav-menu {
        position:absolute; top:100%; right:0; left:0;
        display:flex; flex-direction:column; gap:0; backdrop-filter:blur(18px);
        background:rgba(var(--bg-rgb),.85); border:1px solid var(--border-color);
        padding:0; max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1);
    }
    .nav-menu.open, .nav-menu[data-state="open"] { max-height:420px; padding:.75rem 0; }
    .nav-link { padding:.9rem 1.25rem; width:100%; }
    .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform:translateY(8px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity:0; }
    .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
}

@media (max-width: 900px) {
    .hero-content-grid { grid-template-columns:1fr; }
    .hero-terminal-column { order:2; }
    .hero-text-column { order:1; text-align:center; }
    .hero-actions { justify-content:center; }
    .hero-title { font-size:clamp(2rem,6vw,2.6rem); }
    .hero-description { font-size:1rem; }
}

@media (max-width: 640px) {
    :root { --space-xl:3.5rem; }
    .projects-grid, .interests-grid { grid-template-columns:1fr; }
    .terminal-window { transform:scale(.9); transform-origin:top center; }
    .floating-tech-universe { opacity:.4; }
    .tech-bubble.large { width:62px; height:62px; }
    .tech-bubble.medium { width:52px; height:52px; }
    .tech-bubble.small { width:44px; height:44px; }
    .section-title { font-size:1.9rem; }
    .project-card, .interest-card { padding:1.1rem 1.15rem; }
    .about-content { flex-direction:column; gap:2rem; }
}

@media (max-width: 420px) {
    .hero-badge { font-size:.65rem; padding:.35rem .55rem; }
    .btn.modern-btn { padding:.65rem .95rem; }
    .hero-actions { flex-direction:column; gap:.9rem; }
    .terminal-window { transform:scale(.85); }
}

section:not(.hero) {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
}

section p {
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
    line-height: 1.7;
}

/* =============================
     Contact Section Styling
     ============================= */
.contact { background: var(--bg-secondary); position:relative; }
.contact-content { display:flex; gap:4rem; align-items:flex-start; max-width:1200px; margin:0 auto; padding:var(--space-xl) var(--space-lg); }
.contact-text { flex:1 1 55%; }
.contact-links { flex:1 1 45%; display:grid; gap:1rem; }
.contact-link-item { display:flex; flex-direction:column; gap:.15rem; font-size:.95rem; }
.contact-label { font-size:.7rem; letter-spacing:.08em; font-weight:600; text-transform:uppercase; color:var(--text-secondary); }
.contact-link-value { font-weight:500; color:var(--text-primary); text-decoration:none; position:relative; width:fit-content; }
.contact-link-value::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:linear-gradient(90deg,var(--primary),var(--accent-color)); transition:width .35s; }
.contact-link-value:hover::after { width:100%; }
.contact-buttons { display:flex; gap:1rem; flex-wrap:wrap; margin:1.25rem 0 1.75rem; }

@media (max-width:900px){
    .contact-content { flex-direction:column; gap:2.5rem; padding:var(--space-xl) var(--space-md); }
    .contact-links { width:100%; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
}

/* =============================
     Footer Styling
     ============================= */
.footer { background: var(--bg-primary); border-top:1px solid var(--border-color); margin-top:var(--space-xl); }
.footer-content { max-width:1200px; margin:0 auto; padding:3rem var(--space-lg) 2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2.5rem; }
.footer-about p { font-size:.9rem; line-height:1.55; }
.footer h4 { font-size:.75rem; letter-spacing:.08em; font-weight:600; text-transform:uppercase; margin-bottom:.85rem; color:var(--text-secondary); }
.footer-links ul { list-style:none; display:grid; gap:.55rem; padding:0; margin:0; }
.footer-links a { color:var(--text-primary); text-decoration:none; font-size:.85rem; position:relative; }
.footer-links a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--primary); transition:width .3s; }
.footer-links a:hover::after { width:100%; }
.footer-status p { font-size:.8rem; margin:.4rem 0; }
.status-indicator { display:inline-block; width:10px; height:10px; background:linear-gradient(135deg,#10b981,#059669); border-radius:50%; box-shadow:0 0 0 4px rgba(16,185,129,.15); margin-right:.45rem; animation:pulse 3s infinite; }
@keyframes pulse { 0% { box-shadow:0 0 0 4px rgba(16,185,129,.25);} 70% { box-shadow:0 0 0 12px rgba(16,185,129,0);} 100% { box-shadow:0 0 0 4px rgba(16,185,129,.15);} }
.footer-bottom { border-top:1px solid var(--border-color); margin-top:1.5rem; padding:1rem 0 1.25rem; text-align:center; font-size:.75rem; color:var(--text-secondary); }

@media (max-width:640px){
    .footer-content { padding:2.5rem var(--space-md) 1.75rem; gap:2rem; }
}

/* Better responsive for existing styles */
@media (max-width: 768px) {
    .terminal-window {
        max-width: 100%;
        overflow-x: auto;
    }

    section h2 {
        font-size: 2rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
}