:root {
    --bg-base: #090e17; 
    --card-surface: rgba(20, 28, 45, 0.45); 
    --card-border: rgba(255, 255, 255, 0.15);
    --card-highlight: rgba(255, 255, 255, 0.05);
    
    --accent-teal: #00f0ff;
    --accent-indigo: #7000ff;
    --alert-green: #00ff66;
    
    --text-main: #f8fafc;
    --text-dim: #94a3b8;
}

* { 
    margin: 0; padding: 0; box-sizing: border-box; 
    font-family: 'Inter', sans-serif; outline: none; 
}

body {
    background-color: var(--bg-base); color: var(--text-main);
    display: flex; justify-content: center; align-items: center;
    height: 100vh; width: 100vw; overflow: hidden; padding: clamp(10px, 2vmin, 20px);
}

.aurora-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; background: #090e17; }
.orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.6; animation: float 20s infinite alternate; }
.orb-1 { width: 45vmax; height: 45vmax; background: rgba(112, 0, 255, 0.3); top: -15%; left: -10%; }
.orb-2 { width: 40vmax; height: 40vmax; background: rgba(0, 240, 255, 0.2); bottom: -10%; right: -10%; animation-delay: -5s; }
@keyframes float { 100% { transform: translate(30px, 50px) scale(1.1); } }

.hud-wrapper { width: 100%; max-width: 1350px; height: 100%; max-height: 900px; display: flex; }

.bento-container {
    display: grid; width: 100%; height: 100%;
    grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
    gap: clamp(12px, 1.5vmin, 20px);
    grid-template-areas:
        "logo header header map"
        "avail stack stack map"
        "music services clock gear"
        "cta socials project project";
}

.bento-card {
    background-color: var(--card-surface); border-radius: 28px; position: relative;
    backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 15px 35px rgba(0,0,0,0.3);
    overflow: hidden; border: 1px solid var(--card-border);
}

.logo-card { grid-area: logo; } .header-card { grid-area: header; } .map-card { grid-area: map; }
.avail-card { grid-area: avail; } .stack-card { grid-area: stack; } .music-card { grid-area: music; }
.services-card{ grid-area: services; } .clock-card { grid-area: clock; } .gear-card { grid-area: gear; }
.socials-card { grid-area: socials; } .project-card { grid-area: project; } .cta-card { grid-area: cta; }

.card-content {
    background: linear-gradient(135deg, var(--card-highlight), transparent);
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    padding: clamp(15px, 2vmin, 24px); 
    display: flex; flex-direction: column; z-index: 2;
}

.flex-between { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.flex-center { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }

h1 { font-size: clamp(3rem, 5vw, 5rem); }
h2 { font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 900; letter-spacing: -1px;}
h3 { font-size: clamp(0.95rem, 1.2vw, 1.2rem); margin-bottom: 4px; font-weight: 800;}
.mini-title { font-size: 0.8rem; letter-spacing: 1px; color: var(--text-dim); text-transform: uppercase;}
p { font-size: clamp(0.75rem, 0.9vw, 0.95rem); line-height: 1.5;}
.mono-text { font-family: 'JetBrains Mono', monospace; }

.logo-content { padding: 15px !important; }
.custom-logo { width: 100%; height: 100%; object-fit: contain; }
.gradient-text { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-weight: 900; background: linear-gradient(135deg, var(--accent-teal), var(--accent-indigo)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.terminal-header { display: flex; gap: 8px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(255,255,255,0.5);}
.red { background: #ff5f56; } .yellow { background: #ffbd2e; } .green { background: #27c93f; }
.terminal-title { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-dim); }
.tagline { color: var(--accent-teal); font-weight: 700; margin-top: 4px; }
.terminal-body { font-family: 'JetBrains Mono', monospace; font-size: clamp(0.8rem, 1vw, 0.9rem); color: var(--text-main); background: rgba(0,0,0,0.3); padding: 12px; border-radius: 12px; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); margin-top: auto;}
.prompt { color: var(--accent-indigo); }
.cursor { animation: blink 1s step-end infinite; color: var(--text-main);}

/* --- THE FLAWLESS HTML IMAGE MAP FIX --- */
.map-wrapper { 
    padding: 0 !important; 
    background: transparent !important; 
    justify-content: flex-end; 
}

.map-background-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.5; filter: contrast(1.2) grayscale(0.2); 
    z-index: 0; pointer-events: none;
}

.kl-beacon { position: absolute; top: 40%; left: 60%; transform: translate(-50%, -50%); z-index: 5;}
.beacon-dot { width: 8px; height: 8px; background: var(--accent-teal); border-radius: 50%; box-shadow: 0 0 15px var(--accent-teal); position: relative; z-index: 2;}
.beacon-ring { position: absolute; top: -11px; left: -11px; width: 30px; height: 30px; border: 2px solid var(--accent-teal); border-radius: 50%; animation: beaconPing 2s infinite ease-out; opacity: 0; }
@keyframes beaconPing { 0% { transform: scale(0.5); opacity: 1; border-width: 2px; } 100% { transform: scale(2.5); opacity: 0; border-width: 0px;} }

.map-text-overlay {
    width: 100%; padding: 1.5rem; 
    background: linear-gradient(180deg, transparent 0%, rgba(9, 14, 23, 0.95) 80%);
    z-index: 10; position: relative;
}
.location-title { color: var(--accent-teal); letter-spacing: 1px; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 4px; text-shadow: 0 0 10px rgba(0,240,255,0.4);}
.location-desc { color: #fff; font-weight: 700; font-size: 1.1rem; }

/* Apple-Style Interactive Dock */
.apple-dock { 
    display: flex; gap: clamp(8px, 1.5vw, 15px); justify-content: center; align-items: flex-end; 
    height: auto; min-height: 70px; padding-bottom: 10px; width: 100%; flex-wrap: wrap;
}
.dock-icon {
    font-size: clamp(1.8rem, 2.5vw, 2.2rem); position: relative; cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), margin 0.2s;
    -webkit-box-reflect: below 2px linear-gradient(transparent, transparent, rgba(0,0,0,0.4));
}
.dock-icon:hover { transform: scale(1.6) translateY(-10px); margin: 0 10px; z-index: 10;}
.tooltip {
    position: absolute; top: -35px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.8); color: #fff; font-size: 0.6rem; padding: 4px 8px;
    border-radius: 8px; opacity: 0; visibility: hidden; transition: opacity 0.2s;
    font-family: 'JetBrains Mono', monospace; font-weight: 700; white-space: nowrap; border: 1px solid rgba(255,255,255,0.1);
}
.dock-icon:hover .tooltip { opacity: 1; visibility: visible; }

/* Live Server Dashboard */
.availability-header { display: flex; align-items: center; }
.ring-container { position: relative; width: 15px; height: 15px; }
.circle { width: 10px; height: 10px; background-color: var(--alert-green); border-radius: 50%; position: absolute; top: 2px; left: 2px; box-shadow: 0 0 10px var(--alert-green);}
.glow-status { color: var(--alert-green); font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; font-weight: 800; margin-left: 10px; text-shadow: 0 0 10px rgba(0,255,102,0.4);}
.server-dashboard { margin-top: auto; background: rgba(0,0,0,0.2); padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); }
.stat-grid { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; margin-bottom: 10px;}
.stat-box { display: flex; flex-direction: column; gap: 2px;}
.stat-label { color: var(--text-dim); }
.stat-value { color: var(--accent-teal); font-weight: 700; font-size: 0.9rem;}

/* --- NEW MATRIX BINARY STREAM --- */
.binary-stream-container { 
    width: 100%; height: 22px; margin-top: 10px; overflow: hidden; position: relative; 
    background: rgba(0,0,0,0.5); border-radius: 6px; border: 1px solid rgba(0, 240, 255, 0.1);
    display: flex; align-items: center; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}
.binary-text {
    font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--accent-teal); 
    letter-spacing: 2px; white-space: nowrap; opacity: 0.8; text-shadow: 0 0 8px var(--accent-teal);
    width: 100%; text-align: center;
}

/* Premium Badges (Services & Gear) */
.tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; width: 100%;}
.premium-tag {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
    padding: 8px 12px; border-radius: 20px; font-size: clamp(0.7rem, 0.9vw, 0.8rem);
    display: flex; align-items: center; gap: 8px; transition: all 0.3s;
    color: var(--text-main); font-weight: 500;
}
.premium-tag i { color: var(--text-dim); transition: color 0.3s; }
.premium-tag:hover { background: rgba(0, 240, 255, 0.1); border-color: var(--accent-teal); transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0,240,255,0.1);}
.premium-tag:hover i { color: var(--accent-teal); }

/* Audio Player */
.music-layout { justify-content: space-between; }
.music-top { flex-direction: row; align-items: center; width: 100%; }
.vinyl-record { width: 50px; height: 50px; border-radius: 50%; background: #0a0a0a; border: 2px solid #333; display: flex; justify-content: center; align-items: center; box-shadow: 0 5px 15px rgba(0,0,0,0.6); background-image: repeating-radial-gradient(#111 0, #111 2px, #222 3px, #222 4px); flex-shrink: 0;}
.vinyl-label { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-teal); display: flex; justify-content: center; align-items: center; font-size: 0.4rem; color: #000; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);}
.disc-spin { animation: discSpin 2s linear infinite; animation-play-state: paused; }
.music-info { flex-grow: 1; margin-left: 15px; display: flex; flex-direction: column; justify-content: center; overflow: hidden;}
.track-name { font-size: 0.8rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px;}
.visualizer { display: flex; gap: 3px; height: 12px; align-items: flex-end; }
.viz-bar { width: 3px; background: var(--accent-indigo); border-radius: 2px; transition: height 0.1s ease; }

.timeline { flex-direction: row; align-items: center; gap: 10px; width: 100%; margin: 15px 0; }
.time-text { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--text-dim); }
.audio-progress { flex-grow: 1; height: 8px; background: rgba(0,0,0,0.3); border-radius: 4px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.05);}
.audio-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-indigo), var(--accent-teal)); border-radius: 4px;}

.music-bottom { flex-direction: row; margin-top: auto;}
.controls { display: flex; gap: 20px; font-size: 1.2rem; color: var(--text-main); cursor: pointer; align-items: center; justify-content: center; width: 100%;}
.play-circle { font-size: 2.2rem; color: var(--accent-teal); text-shadow: 0 0 15px rgba(0, 240, 255, 0.4);}

/* Socials */
.social-layout { flex-direction: row; gap: 12px; }
.social-btn {
    flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); border-radius: 18px;
    color: var(--text-main); text-decoration: none; transition: all 0.3s; box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
}
.social-btn i { font-size: clamp(1.5rem, 2vw, 2rem); margin-bottom: 5px; color: var(--text-dim); transition: color 0.3s;}
.social-btn span { font-size: 0.7rem; font-weight: 800; letter-spacing: 1px; color: var(--text-dim); transition: color 0.3s;}
.social-btn:hover { background: var(--card-highlight); border-color: var(--accent-teal); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,240,255,0.1);}
.social-btn:hover i, .social-btn:hover span { color: var(--accent-teal); }

/* Clock */
.clock-header { display: flex; justify-content: space-between; align-items: center;}
.satellite-icon { font-size: 1.2rem; color: var(--accent-teal); }
.digital-time { display: flex; align-items: baseline; gap: 5px; }
#kl-time { font-size: clamp(2rem, 3vw, 3rem); font-weight: 800; text-shadow: 0 0 20px rgba(255,255,255,0.2);}
.seconds-text { font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: var(--accent-teal); font-weight: 700; }
.binary-visualizer { display: flex; gap: 6px; margin-top: auto; padding: 10px; background: rgba(0,0,0,0.2); border-radius: 10px; justify-content: space-between; border: 1px solid rgba(255,255,255,0.05);}
.bit { width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; transition: background 0.2s, box-shadow 0.2s; }
.bit.active { background: var(--accent-teal); box-shadow: 0 0 10px var(--accent-teal); }

/* Project Carousel */
.proj-layout { background: radial-gradient(circle at bottom right, rgba(112, 0, 255, 0.15), transparent 70%); display: flex; flex-direction: column; justify-content: flex-start; }
.carousel-header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 15px; }
.carousel-nav { display: flex; gap: 15px; color: var(--text-dim); }
.nav-btn { cursor: pointer; transition: color 0.3s, transform 0.2s; font-size: 1.2rem; }
.nav-btn:hover { color: var(--accent-teal); transform: scale(1.1); }
.project-slider { width: 100%; flex-grow: 1; overflow: hidden; position: relative; }
.project-track { display: flex; width: 100%; height: 100%; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); align-items: center;}
.project-slide { flex: 0 0 100%; width: 100%; height: 100%; padding-right: 20px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.cyber-heading { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 900; letter-spacing: -1px; margin-bottom: 2px;}
.badge-group { display: flex; gap: 8px; margin: 6px 0; flex-wrap: wrap;}
.badge { padding: 4px 10px; border-radius: 6px; font-size: 0.6rem; font-weight: 800; font-family: 'JetBrains Mono', monospace;}
.in-dev { background: rgba(112, 0, 255, 0.3); color: #dcb3ff; border: 1px solid rgba(112, 0, 255, 0.5); }
.lang-tag { background: rgba(0, 240, 255, 0.2); color: var(--accent-teal); border: 1px solid rgba(0, 240, 255, 0.4); }
.partner-tag { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; }
.project-slide p { font-size: clamp(0.7rem, 0.8vw, 0.85rem); line-height: 1.4; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: auto; padding-top: 10px;}
.dot-indicator { width: 6px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);}
.dot-indicator:hover { background: rgba(255, 255, 255, 0.5);}
.dot-indicator.active { width: 20px; background: var(--accent-teal); box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);}

/* CTA */
.cta-layout { background: linear-gradient(135deg, var(--accent-teal), var(--accent-indigo)); color: #fff; }
.cta-heading { font-size: clamp(1.2rem, 1.5vw, 1.6rem); font-weight: 900; margin-bottom: 20px; text-shadow: 0 2px 10px rgba(0,0,0,0.2);}
.cta-btn { background: #090e17; color: #fff; text-decoration: none; padding: 16px 28px; border-radius: 14px; font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; gap: 12px; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(9, 14, 23, 0.6); border: 1px solid rgba(255,255,255,0.1);}
.cta-btn:hover { background: #fff; color: #090e17; transform: translateY(-3px); box-shadow: 0 15px 25px rgba(255, 255, 255, 0.3); }


/* =========================================
   5. RESPONSIVE DESIGN (The Master Update)
   ========================================= */

/* TABLET (Below 1200px & Above 768px) */
@media (max-width: 1200px) {
    body { 
        height: auto; 
        overflow-y: auto; 
        padding: clamp(10px, 3vw, 20px);
    }
    .hud-wrapper { 
        height: auto; 
        max-height: none; 
    }
    .bento-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 15px;
        /* RE-ENGINEERED TABLET GRID: Wide elements get full width */
        grid-template-areas:
            "header header"
            "logo map"
            "avail clock"
            "stack stack"
            "music services"
            "gear socials"
            "project project"
            "cta cta";
    }
    
    /* THE CRITICAL FIX: Flex-physics break the absolute positioning trap */
    .bento-card { display: flex; flex-direction: column; height: auto; min-height: 220px; }
    .card-content { position: relative; flex: 1 1 auto; height: auto; }
    
    /* Safety rules for wrapping text */
    .terminal-header { flex-wrap: wrap; }
    .terminal-title { word-break: break-all; margin-top: 4px;}
    .map-card { min-height: 250px; }
}

/* MOBILE (Below 768px) */
@media (max-width: 768px) {
    .bento-container {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "logo" 
            "header" 
            "avail" 
            "map" 
            "stack" 
            "music" 
            "services" 
            "clock" 
            "gear" 
            "socials" 
            "project" 
            "cta";
    }
    
    /* Mobile specific spacing */
    .bento-card { min-height: 200px; }
    .map-card { min-height: 250px; }
    .project-card { min-height: 350px; } 

    .terminal-header { justify-content: center; }
    .terminal-title { text-align: center; width: 100%; }
    .header-titles { text-align: center; }
    
    .stat-grid { flex-wrap: wrap; justify-content: space-between; gap: 10px; }
    .stat-box { flex: 1 1 30%; text-align: center; }
    
    .apple-dock { gap: 12px; padding-bottom: 5px; justify-content: center; }
    
    .music-top { flex-direction: column; text-align: center; gap: 10px; }
    .vinyl-record { margin: 0 auto; }
    .music-info { margin-left: 0; align-items: center; }
    
    .tags-container { justify-content: center; }
    .social-layout { gap: 10px; }
    .social-btn { padding: 15px 5px; min-height: 80px; }
    
    .project-slide { text-align: center; }
    .badge-group { justify-content: center; }
}