/* ==========================================================================
   macOS Dark Portfolio — Design System
   Based on macOS Sonoma / Ventura HIG guidelines
   ========================================================================== */
:root {
    /* Background layers */
    --bg-deep:    #0a0a0f;
    --bg-surface: #1c1c1e;
    --bg-card:    rgba(44, 44, 46, 0.72);
    --bg-card-hover: rgba(58, 58, 60, 0.88);

    /* Apple System Colors — dark mode */
    --neon-cyan:   #64d2ff;   /* Apple light blue / teal */
    --neon-blue:   #0a84ff;   /* Apple Blue */
    --neon-purple: #bf5af2;   /* Apple Purple */
    --neon-alert:  #ff453a;   /* Apple Red */
    --accent-green:  #30d158;
    --accent-yellow: #ffd60a;
    --accent-orange: #ff9f0a;

    /* Typography */
    --text-main: #f5f5f7;
    --text-muted: rgba(235, 235, 245, 0.6);
    --text-dark:  rgba(235, 235, 245, 0.3);

    /* System Fonts */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-code:    'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

    /* Glass */
    --glass-border:        rgba(255, 255, 255, 0.10);
    --glass-border-strong: rgba(255, 255, 255, 0.20);
    --glass-border-blue:   rgba(10, 132, 255, 0.35);
    --glass-bg:            rgba(28, 28, 30, 0.75);
    --glass-shadow:        0 8px 32px rgba(0, 0, 0, 0.45);

    /* Border radius */
    --r-xs:  6px;
    --r-sm:  10px;
    --r-md:  14px;
    --r-lg:  18px;
    --r-xl:  22px;
    --r-2xl: 28px;

    /* Transitions */
    --transition-fast:   all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

body {
    font-family: var(--font-display);
    background-color: var(--bg-deep);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* macOS wallpaper ambient gradient */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -4; pointer-events: none;
    background:
        radial-gradient(ellipse 80% 70% at 5% 5%,   rgba(94, 92, 230, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 70% 60% at 95% 95%,  rgba(10, 132, 255, 0.09) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 50% 40%,  rgba(191, 90, 242, 0.05) 0%, transparent 60%);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }
::selection { background: var(--neon-blue); color: white; }

a   { text-decoration: none; color: inherit; outline: none; }
ul  { list-style: none; }
img { max-width: 100%; height: auto; user-select: none; }

.font-display { font-family: var(--font-display); }
.font-code    { font-family: var(--font-code); }

/* ==========================================================================
   SCROLL PROGRESS
   ========================================================================== */
#top-scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0%;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan));
    z-index: 999999;
    transition: width 0.1s ease-out;
}

/* ==========================================================================
   SMOOTH SCROLL WRAPPER
   ========================================================================== */
#smooth-wrapper {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    overflow: hidden; z-index: 1;
}

/* ==========================================================================
   BACKGROUND CANVAS & DECORATIVE
   ========================================================================== */
#canvas-network {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1; opacity: 0.25; pointer-events: none;
}
.cyber-grid-floor { display: none; }   /* Remove old cyber grid */
.bg-glow {
    position: fixed; width: 70vw; height: 70vw; border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 92, 230, 0.10) 0%, transparent 65%);
    top: -25%; left: -15%; z-index: -3; pointer-events: none;
}
.bg-glow-2 {
    position: fixed; width: 60vw; height: 60vw; border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 132, 255, 0.07) 0%, transparent 65%);
    bottom: -20%; right: -10%; z-index: -3; pointer-events: none;
}

/* ==========================================================================
   PRELOADER — macOS style
   ========================================================================== */
#preloader {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000000; z-index: 99999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
.cyber-loader {
    width: 40px; height: 40px; position: relative;
}
.cyber-loader::before {
    content: '';
    position: absolute; inset: 0;
    border: 3px solid rgba(255,255,255,0.12);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
}
.cyber-loader::after {
    content: '';
    position: absolute; inset: 8px;
    border: 2px solid rgba(255,255,255,0.08);
    border-top-color: rgba(10, 132, 255, 0.8);
    border-radius: 50%;
    animation: spin 1.4s linear infinite reverse;
}
.loader-text {
    margin-top: 24px; font-family: var(--font-display);
    color: rgba(255,255,255,0.45); font-size: 0.8rem;
    letter-spacing: 0.5px; font-weight: 500;
}
.progress-bar-container {
    width: 180px; height: 3px;
    background: rgba(255,255,255,0.10);
    margin-top: 14px; border-radius: 2px; overflow: hidden;
}
.progress-bar {
    height: 100%; width: 0%; background: white;
    border-radius: 2px; transition: width 0.2s ease;
}

/* ==========================================================================
   CURSOR — clean macOS style
   ========================================================================== */
.cursor-dot {
    position: fixed; width: 5px; height: 5px; background: white;
    border-radius: 50%; pointer-events: none; z-index: 9999999;
    transform: translate(-50%, -50%);
    transition: background 0.2s, transform 0.15s;
}
.cursor-ring {
    position: fixed; width: 30px; height: 30px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%; pointer-events: none; z-index: 9999998;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, border-color 0.3s;
}
.cursor-hover .cursor-ring {
    width: 46px; height: 46px;
    border-color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.04);
}
.cursor-hover .cursor-dot { transform: translate(-50%, -50%) scale(0.4); }

/* ==========================================================================
   LAYOUT UTILS
   ========================================================================== */
.container { max-width: 1440px; margin: 0 auto; padding: 0 5vw; }
.section-pad { padding: 140px 0; }

/* ==========================================================================
   SECTION HEADER
   ========================================================================== */
.section-header { text-align: center; margin-bottom: 90px; position: relative; }
.sec-bg-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: clamp(4rem, 10vw, 10rem); font-weight: 800;
    color: rgba(255,255,255,0.012);
    white-space: nowrap; pointer-events: none; z-index: -1; text-transform: uppercase;
    font-family: var(--font-display); letter-spacing: 10px;
}
.sec-subtitle {
    font-family: var(--font-code); color: var(--neon-blue); font-size: 0.75rem;
    letter-spacing: 2.5px; text-transform: uppercase; display: inline-block;
    padding: 5px 14px; border: 1px solid rgba(10, 132, 255, 0.28);
    border-radius: 20px; background: rgba(10, 132, 255, 0.08);
    margin-bottom: 18px;
}
.sec-title {
    font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; letter-spacing: -1px;
    color: var(--text-main); margin-bottom: 10px;
    position: relative; display: inline-block;
}
.sec-title span { color: var(--neon-blue); -webkit-text-fill-color: var(--neon-blue); }

/* ==========================================================================
   BUTTONS — macOS rounded style
   ========================================================================== */
.btn-cyber {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 30px; font-family: var(--font-display); font-weight: 600;
    font-size: 0.95rem; color: white; background: var(--neon-blue);
    letter-spacing: 0.2px; overflow: hidden; transition: var(--transition-smooth);
    border: none; border-radius: var(--r-md); clip-path: none;
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.40);
    text-transform: none;
}
.btn-cyber::before { display: none; }
.btn-cyber:hover {
    background: #3a9fff; transform: translateY(-2px); color: white;
    box-shadow: 0 8px 28px rgba(10, 132, 255, 0.55);
}
.btn-outline {
    background: rgba(255,255,255,0.06); color: var(--text-main);
    border: 1px solid rgba(255,255,255,0.14); clip-path: none;
    border-radius: var(--r-md); padding: 13px 28px;
    font-family: var(--font-display); letter-spacing: 0.2px;
    font-weight: 600; position: relative; overflow: hidden;
    transition: var(--transition-smooth); text-transform: none; font-size: 0.95rem;
}
.btn-outline::after { display: none; }
.btn-outline:hover {
    background: rgba(255,255,255,0.12); color: white;
    border-color: rgba(255,255,255,0.28);
}

/* ==========================================================================
   GLASS CARD — macOS window style
   ========================================================================== */
.glass-card {
    background: rgba(28, 28, 30, 0.70);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--r-xl); padding: 44px;
    box-shadow:
        0 0 0 0.5px rgba(255,255,255,0.04) inset,
        0 16px 48px rgba(0,0,0,0.42);
    position: relative; overflow: hidden; z-index: 1;
    transition: var(--transition-smooth);
}
.glass-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.03), transparent 40%);
    z-index: -1; transition: opacity 0.5s; opacity: 0; pointer-events: none;
}
.glass-card:hover { border-color: rgba(255,255,255,0.15); transform: translateY(-3px); }
.glass-card:hover::before { opacity: 1; }

/* ==========================================================================
   NAVIGATION — macOS menu bar
   ========================================================================== */
header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    padding: 0;
    background: rgba(16, 16, 18, 0.80);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transition: var(--transition-smooth);
}
header.scrolled {
    background: rgba(12, 12, 14, 0.92);
    border-bottom-color: rgba(255,255,255,0.10);
    box-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
.nav-inner {
    display: flex; justify-content: space-between; align-items: center;
    height: 52px;
}
.brand {
    font-size: 1.4rem; font-weight: 700; letter-spacing: -0.5px;
    display: flex; align-items: center; color: var(--text-main);
}
.brand span { color: var(--neon-blue); }
.brand-dot { animation: blink 2s infinite; }
.nav-links { display: flex; gap: 4px; }
.nav-link {
    font-family: var(--font-display); font-size: 0.85rem;
    color: var(--text-muted); text-transform: none; letter-spacing: 0;
    position: relative; padding: 6px 14px; border-radius: 8px;
    transition: var(--transition-fast); font-weight: 500;
}
.nav-link:hover { color: var(--text-main); background: rgba(255,255,255,0.08); }
.nav-link::after { display: none; }
.menu-toggle {
    display: none; font-size: 1.2rem; color: var(--text-main);
    background: none; border: none; padding: 10px;
}
.menu-toggle:hover { color: var(--text-main); text-shadow: none; }

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
    min-height: 100vh; display: flex; align-items: center;
    position: relative; padding-top: 52px;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 420px;
    gap: 80px; align-items: center; width: 100%;
}
.hero-text-box { position: relative; z-index: 2; }

/* macOS Terminal title bar style */
.terminal-box {
    display: inline-flex; align-items: stretch; gap: 0;
    background: rgba(36, 36, 38, 0.90);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r-sm);
    padding: 0;
    font-family: var(--font-code); font-size: 0.82rem; color: var(--text-muted);
    margin-bottom: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.44), 0 0 0 0.5px rgba(255,255,255,0.04) inset;
    overflow: hidden;
}
/* Chrome bar with traffic lights */
.terminal-box .tb-chrome {
    display: flex; align-items: center; gap: 7px;
    padding: 0 16px;
    background: rgba(32, 32, 34, 0.90);
    border-right: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.terminal-box .tb-dot {
    width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
}
/* Content area */
.terminal-box .tb-content { padding: 10px 16px; display: flex; align-items: center; gap: 0; }
.terminal-box .user { color: var(--neon-blue); font-weight: 600; }
.terminal-box .path { color: var(--accent-green); font-weight: 600; }

.hero-title {
    font-size: clamp(3rem, 5.5vw, 5.8rem); line-height: 1.04;
    margin-bottom: 20px; font-weight: 800; letter-spacing: -2.5px;
    color: var(--text-main);
}
/* Disable glitch effect — clean macOS style */
.hero-title .glitch-layer { position: relative; display: inline-block; }
.glitch-layer::before, .glitch-layer::after { display: none; }

.typewriter-wrap {
    font-size: clamp(1rem, 1.8vw, 1.35rem); color: var(--neon-blue);
    font-family: var(--font-code); margin-bottom: 32px; height: 40px;
    display: flex; align-items: center; font-weight: 500;
}
.cursor-blink { color: var(--neon-blue); margin-left: 1px; animation: blink 1s infinite; }

.hero-desc {
    font-size: clamp(1rem, 1.4vw, 1.12rem); color: var(--text-muted);
    max-width: 560px; margin-bottom: 48px; line-height: 1.78; font-weight: 400;
}
.hero-actions { display: flex; gap: 14px; align-items: center; }
.social-hero { display: flex; gap: 10px; }
.social-hero a {
    width: 42px; height: 42px; border-radius: var(--r-sm);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex; justify-content: center; align-items: center;
    font-size: 1.15rem; color: var(--text-muted);
    transition: var(--transition-bounce); background: rgba(255,255,255,0.05);
}
.social-hero a:hover {
    background: var(--neon-blue); color: white; border-color: transparent;
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 8px 20px rgba(10, 132, 255, 0.40);
}

/* Hero visual — profile */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; }
.profile-container {
    position: relative; width: 100%; aspect-ratio: 1;
    animation: floatHero 8s ease-in-out infinite; margin: 0 auto;
}
.profile-frame {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border: 1.5px solid rgba(255,255,255,0.09);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: morph 12s ease-in-out infinite; opacity: 0.5;
}
.profile-frame-2 {
    position: absolute; top: -16px; left: -16px;
    width: calc(100% + 32px); height: calc(100% + 32px);
    border: 1px solid rgba(10, 132, 255, 0.18);
    border-radius: 50%; opacity: 0.6; animation: spin 22s linear infinite;
}
.profile-frame-3 {
    position: absolute; top: -36px; left: -36px;
    width: calc(100% + 72px); height: calc(100% + 72px);
    border: 1px solid rgba(191, 90, 242, 0.12);
    border-radius: 50%; opacity: 0.4; animation: spin-reverse 32s linear infinite;
}
.profile-img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
    filter: contrast(106%) saturate(105%);
    border: 4px solid rgba(28, 28, 30, 0.92);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.07),
        0 32px 72px rgba(0,0,0,0.55);
    position: absolute; z-index: 5; top: 0; left: 0;
}

/* Tech badges — macOS notification card style */
.tech-badge {
    position: absolute;
    background: rgba(28, 28, 30, 0.92); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12); padding: 10px 16px;
    border-radius: 12px; font-family: var(--font-display); font-size: 0.78rem;
    color: var(--text-main); font-weight: 600;
    display: flex; align-items: center; gap: 8px; z-index: 10;
    box-shadow: 0 8px 28px rgba(0,0,0,0.50), 0 0 0 0.5px rgba(255,255,255,0.04) inset;
    white-space: nowrap;
}
.tech-badge i { font-size: 1rem; color: var(--neon-blue); }
.badge-1 { top: 10%; right: -9%; animation: orbit1 6s ease-in-out infinite 1s; }
.badge-2 { bottom: 15%; left: -12%; animation: orbit2 7s ease-in-out infinite 2s; }
.badge-2 i { color: var(--accent-green); }
.badge-3 { top: 60%; right: -16%; animation: orbit3 8s ease-in-out infinite 3s; }
.badge-3 i { color: var(--neon-purple); }

@keyframes orbit1 { 0%,100%{transform:translate(0,0)scale(1)} 50%{transform:translate(14px,-14px)scale(1.04)} }
@keyframes orbit2 { 0%,100%{transform:translate(0,0)scale(1)} 50%{transform:translate(-16px,12px)scale(1.04)} }
@keyframes orbit3 { 0%,100%{transform:translate(0,0)scale(1)} 50%{transform:translate(12px,16px)scale(1.04)} }

/* Scroll indicator */
.scroll-indicator {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    opacity: 0.35; transition: 0.3s; cursor: pointer;
}
.scroll-indicator:hover { opacity: 0.65; transform: translateX(-50%) translateY(-4px); }
.mouse { width: 22px; height: 36px; border: 1.5px solid rgba(255,255,255,0.28); border-radius: 12px; position: relative; }
.wheel {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 2px; height: 6px; background: rgba(255,255,255,0.5); border-radius: 2px;
    animation: scrollWheel 2s infinite;
}
.scroll-text { font-family: var(--font-code); font-size: 0.62rem; letter-spacing: 3px; color: rgba(255,255,255,0.35); text-transform: uppercase; font-weight: 600; }
@keyframes scrollWheel { 0%{top:6px;opacity:1} 100%{top:22px;opacity:0} }

/* ==========================================================================
   ABOUT & SKILLS
   ========================================================================== */
.about-section { position: relative; z-index: 10; }
.about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: start; }

.about-text p { font-size: 1.06rem; color: var(--text-muted); margin-bottom: 20px; line-height: 1.82; }
.about-text p strong { color: var(--text-main); font-weight: 600; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.stat-box {
    padding: 24px 18px; background: rgba(58,58,60,0.45);
    border-left: 3px solid var(--neon-blue); border-radius: 0 12px 12px 0;
    transition: var(--transition-smooth); box-shadow: none;
}
.stat-box:hover { background: rgba(10,132,255,0.09); transform: translateX(6px); box-shadow: none; }
.stat-num { font-size: 2.6rem; font-weight: 700; color: var(--text-main); font-family: var(--font-code); line-height: 1; margin-bottom: 6px; text-shadow: none; }
.stat-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }

.skills-container { position: relative; }
.skills-header {
    font-size: 0.85rem; margin-bottom: 28px; font-family: var(--font-code);
    color: var(--text-muted); display: flex; align-items: center; gap: 16px;
    font-weight: 600; letter-spacing: 0.5px;
}
.skills-header::after { content: ''; flex-grow: 1; height: 1px; background: rgba(255,255,255,0.08); }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; }
.skill-node {
    background: rgba(44,44,46,0.65); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 20px 12px; border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    transition: var(--transition-bounce); font-family: var(--font-display);
    font-size: 0.82rem; text-align: center; font-weight: 500; color: var(--text-muted);
}
.skill-node i { font-size: 1.9rem; color: var(--text-muted); transition: 0.3s; }
.skill-node:hover {
    transform: translateY(-7px) scale(1.05);
    border-color: rgba(10,132,255,0.35);
    background: rgba(10,132,255,0.08);
    color: var(--text-main);
    box-shadow: 0 14px 36px rgba(10,132,255,0.16);
}
.skill-node:hover i { color: var(--neon-blue); }

/* ==========================================================================
   TECHNICAL EXPERTISE
   ========================================================================== */
.expertise-section { position: relative; z-index: 10; }
.expertise-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.exp-tag {
    background: rgba(44,44,46,0.60); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-muted); padding: 5px 12px; border-radius: var(--r-xs);
    font-family: var(--font-code); font-size: 0.78rem;
    transition: var(--transition-fast); display: inline-block;
}
.exp-tag:hover {
    color: var(--neon-blue); border-color: rgba(10,132,255,0.35);
    background: rgba(10,132,255,0.08); transform: translateY(-1px);
}
@media (max-width: 900px) { .expertise-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   EDUCATION
   ========================================================================== */
.edu-section { background: var(--bg-deep); position: relative; z-index: 5; }

.edu-featured-card {
    background: rgba(28,28,30,0.80); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r-lg);
    padding: 34px 44px; margin-bottom: 40px;
    display: flex; align-items: center; gap: 28px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.42);
    transition: var(--transition-smooth); position: relative; overflow: hidden;
}
.edu-featured-card:hover { transform: translateY(-4px); border-color: rgba(10,132,255,0.28); }
.edu-featured-icon {
    width: 68px; height: 68px; background: rgba(10,132,255,0.10); border-radius: 16px;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.9rem; color: var(--neon-blue);
    border: 1px solid rgba(10,132,255,0.22); flex-shrink: 0;
}
.edu-featured-content { flex-grow: 1; }
.edu-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(10,132,255,0.10); border: 1px solid rgba(10,132,255,0.24);
    color: var(--neon-blue); padding: 4px 12px; border-radius: 20px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 12px;
    font-family: var(--font-code);
}
.blink-dot {
    width: 7px; height: 7px; background: var(--accent-green);
    border-radius: 50%; display: inline-block;
    animation: blink-pulse 2s ease-in-out infinite;
}
@keyframes blink-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.85)} }

/* Remove old liveGlitchBlink — no neon */
@keyframes liveGlitchBlink { 0%,100%{opacity:1} 50%{opacity:0.5} }

.edu-featured-content h3 { font-size: 1.55rem; font-weight: 700; color: var(--text-main); line-height: 1.25; margin-bottom: 8px; }
.edu-featured-content p  { font-size: 0.98rem; color: var(--text-muted); font-family: var(--font-code); }
.edu-featured-content .divider { color: rgba(255,255,255,0.20); margin: 0 8px; }

@media (max-width: 768px) {
    .edu-featured-card { flex-direction: column; text-align: center; padding: 28px 20px; gap: 20px; }
    .edu-featured-icon { width: 60px; height: 60px; font-size: 1.6rem; }
    .edu-featured-content h3 { font-size: 1.2rem; }
    .edu-featured-content .divider { display: block; color: transparent; margin: 4px 0; }
}

.edu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.edu-card {
    background: rgba(28,28,30,0.70); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
    padding: 22px 18px; display: flex; gap: 14px; align-items: flex-start;
    transition: var(--transition-smooth); overflow: hidden;
}
.edu-card::before { display: none; }
.edu-card:hover { transform: translateY(-6px); border-color: rgba(10,132,255,0.28); box-shadow: 0 12px 32px rgba(0,0,0,0.40); }
.edu-icon {
    width: 44px; height: 44px; background: rgba(10,132,255,0.10); border-radius: 10px;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.2rem; color: var(--neon-blue); flex-shrink: 0;
    border: 1px solid rgba(10,132,255,0.20);
}
.edu-content h3 { font-size: 0.88rem; font-weight: 600; line-height: 1.3; margin-bottom: 6px; color: var(--text-main); }
.edu-content p  { font-family: var(--font-code); font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; }

/* ==========================================================================
   AWARDS & CERTIFICATIONS
   ========================================================================== */
.cert-section {
    background: var(--bg-deep);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: relative; z-index: 5;
}
.awards-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;
}
.award-card {
    background: rgba(28,28,30,0.70); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
    padding: 30px 26px; transition: var(--transition-smooth);
    position: relative; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.32); z-index: 1;
}
.award-card::before { display: none; }
.award-card:hover {
    transform: translateY(-7px); border-color: rgba(10,132,255,0.25);
    box-shadow: 0 16px 44px rgba(10,132,255,0.12);
}
.award-card:hover::before { opacity: 0; }
.award-icon {
    width: 50px; height: 50px; background: rgba(10,132,255,0.10); border-radius: 12px;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.3rem; color: var(--neon-blue);
    border: 1px solid rgba(10,132,255,0.20); margin-bottom: 18px;
}
.award-date {
    position: absolute; top: 26px; right: 22px;
    font-family: var(--font-code); font-size: 0.72rem; color: var(--text-muted);
    background: rgba(255,255,255,0.06); padding: 3px 10px;
    border-radius: 14px; border: 1px solid rgba(255,255,255,0.09);
}
.award-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--text-main); margin-bottom: 5px; }
.award-card .award-tags {
    font-family: var(--font-code); font-size: 0.72rem; color: var(--text-muted);
    margin-bottom: 14px; display: block;
    border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 14px;
}
.award-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }

/* Certifications grid */
.cert-static-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px; padding: 12px 0;
}
.cert-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: rgba(28,28,30,0.65); border: 1px solid rgba(255,255,255,0.07);
    padding: 28px 14px; border-radius: 16px; backdrop-filter: blur(12px);
    transition: var(--transition-smooth); box-shadow: 0 4px 16px rgba(0,0,0,0.28);
}
.cert-item img {
    width: 88px; height: 88px; object-fit: contain;
    filter: saturate(0.85) brightness(0.92); transition: var(--transition-smooth);
}
.cert-item span {
    font-weight: 600; font-size: 0.82rem; text-align: center;
    color: var(--text-muted); font-family: var(--font-display); line-height: 1.4;
    transition: var(--transition-fast);
}
.cert-item:hover {
    border-color: rgba(10,132,255,0.25); background: rgba(10,132,255,0.06);
    transform: translateY(-6px); box-shadow: 0 12px 32px rgba(10,132,255,0.12);
}
.cert-item:hover img { filter: saturate(1.1) brightness(1.05); transform: scale(1.1); }
.cert-item:hover span { color: var(--text-main); }

/* ==========================================================================
   MVP HIGHLIGHT CARD
   ========================================================================== */
.mvp-highlight-card {
    margin: 90px auto 40px; max-width: 820px;
    background: rgba(28,28,30,0.80); backdrop-filter: blur(24px);
    border: 1px solid rgba(10,132,255,0.20); border-radius: var(--xl);
    padding: 48px 52px;
    box-shadow: 0 20px 60px rgba(10,132,255,0.08);
    transition: var(--transition-smooth); position: relative; overflow: hidden; z-index: 1;
}
.mvp-highlight-card::before { display: none; }
.mvp-highlight-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(10,132,255,0.35);
    box-shadow: 0 30px 70px rgba(10,132,255,0.14);
}
.mvp-highlight-card:hover::before { opacity: 0; }
.mvp-highlight-content { display: flex; align-items: center; gap: 50px; position: relative; z-index: 2; }
.mvp-image-container { position: relative; flex-shrink: 0; width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; }
.mvp-logo-img { width: 100px; height: auto; z-index: 2; animation: floatHero 6s ease-in-out infinite; }
.mvp-glow-ring {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border: 1px solid rgba(10,132,255,0.28); border-radius: 50%;
    animation: spin 15s linear infinite;
}
.mvp-glow-ring::after {
    content: ''; position: absolute; top: -12px; left: -12px; right: -12px; bottom: -12px;
    border: 1px solid rgba(191,90,242,0.18); border-radius: 50%;
    animation: spin-reverse 22s linear infinite;
}
.mvp-text-content { flex-grow: 1; }
.mvp-badge {
    display: inline-block; font-family: var(--font-code); font-size: 0.70rem; font-weight: 700;
    letter-spacing: 1.5px; color: var(--neon-blue);
    background: rgba(10,132,255,0.10); padding: 5px 14px;
    border-radius: 20px; border: 1px solid rgba(10,132,255,0.22); margin-bottom: 16px;
}
.mvp-text-content h3 { font-size: 2rem; font-weight: 700; color: var(--text-main); margin-bottom: 12px; line-height: 1.1; }
.mvp-text-content p  { font-size: 1rem; color: var(--text-muted); margin-bottom: 28px; line-height: 1.6; }

@media (max-width: 768px) {
    .mvp-highlight-content { flex-direction: column; text-align: center; gap: 32px; }
    .mvp-highlight-card { padding: 36px 20px; margin: 60px 0 30px; }
    .mvp-text-content h3 { font-size: 1.6rem; }
    .mvp-image-container { width: 130px; height: 130px; }
    .mvp-logo-img { width: 88px; }
}

/* ==========================================================================
   EXPERIENCE TIMELINE
   ========================================================================== */
.experience-section { position: relative; }
.timeline { position: relative; max-width: 1050px; margin: 0 auto; padding: 50px 0; }
.timeline-line {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 1px; height: 100%; background: rgba(255,255,255,0.08); border-radius: 1px;
}
.timeline-progress {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 1px; height: 0%;
    background: linear-gradient(to bottom, var(--neon-blue), var(--neon-purple));
    border-radius: 1px; transition: height 0.1s ease-out;
}
.time-item { display: flex; justify-content: flex-end; padding-right: 52%; position: relative; margin-bottom: 80px; width: 100%; }
.time-item:nth-child(even) { justify-content: flex-start; padding-right: 0; padding-left: 52%; }
.time-node {
    position: absolute; top: 30px; left: 50%; transform: translate(-50%, -50%);
    width: 13px; height: 13px; border-radius: 50%; background: var(--bg-surface);
    border: 2px solid rgba(255,255,255,0.18); z-index: 2; transition: var(--transition-smooth);
}
.time-item.active .time-node {
    border-color: var(--neon-blue); background: var(--neon-blue);
    box-shadow: 0 0 14px rgba(10,132,255,0.55);
}
.time-item:nth-child(even).active .time-node {
    border-color: var(--neon-purple); background: var(--neon-purple);
    box-shadow: 0 0 14px rgba(191,90,242,0.55);
}
.time-content {
    width: 90%;
    background: rgba(28,28,30,0.72); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 34px;
    transition: var(--transition-smooth); position: relative; overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.42);
}
.time-content::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.03), transparent 40%);
    z-index: -1; opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
.time-item:hover .time-content { border-color: rgba(10,132,255,0.25); transform: translateY(-4px); box-shadow: 0 18px 50px rgba(10,132,255,0.09); }
.time-item:hover .time-content::before { opacity: 1; }
.time-item:nth-child(even):hover .time-content { border-color: rgba(191,90,242,0.25); box-shadow: 0 18px 50px rgba(191,90,242,0.09); }
.time-content::after {
    content: ''; position: absolute; top: 24px; right: -6px; width: 12px; height: 12px;
    background: rgba(28,28,30,0.92); border-top: 1px solid rgba(255,255,255,0.08);
    border-right: 1px solid rgba(255,255,255,0.08); transform: rotate(45deg); z-index: -1;
}
.time-item:nth-child(even) .time-content::after {
    right: auto; left: -6px; border-right: none;
    border-left: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08); border-top: none;
}
.time-item:hover .time-content::after { border-color: rgba(10,132,255,0.25); }
.time-item:nth-child(even):hover .time-content::after { border-color: rgba(191,90,242,0.25); }

.time-date {
    font-family: var(--font-code); color: var(--neon-blue); font-size: 0.78rem; margin-bottom: 14px;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(10,132,255,0.10); padding: 5px 14px;
    border-radius: 20px; border: 1px solid rgba(10,132,255,0.20); font-weight: 700;
}
.time-item:nth-child(even) .time-date { color: var(--neon-purple); background: rgba(191,90,242,0.10); border-color: rgba(191,90,242,0.20); }
.time-role    { font-size: 1.45rem; font-weight: 700; margin-bottom: 5px; color: var(--text-main); line-height: 1.2; }
.time-company { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 18px; font-weight: 500; font-family: var(--font-code); }
.time-desc { font-size: 0.93rem; color: var(--text-muted); line-height: 1.82; }
.time-desc ul { margin-top: 14px; display: none; }
.time-desc ul li { position: relative; padding-left: 18px; margin-bottom: 8px; }
.time-desc ul li::before { content: '▸'; position: absolute; left: 0; color: var(--neon-blue); font-size: 0.95rem; }
.time-item:nth-child(even) .time-desc ul li::before { color: var(--neon-purple); }
.read-more-btn {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-muted); font-family: var(--font-code); font-size: 0.78rem;
    cursor: pointer; margin-top: 18px; display: inline-flex; align-items: center;
    gap: 8px; transition: var(--transition-fast); padding: 7px 14px;
    border-radius: 8px; font-weight: 600;
}
.read-more-btn:hover { background: rgba(10,132,255,0.10); color: var(--neon-blue); border-color: rgba(10,132,255,0.30); }

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.projects-section { position: relative; z-index: 10; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 30px; }
.p-card {
    background: rgba(28,28,30,0.72); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; overflow: hidden;
    display: flex; flex-direction: column; position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.40);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.p-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.03), transparent 40%);
    z-index: -1; opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
.p-card:hover { border-color: rgba(255,255,255,0.14); box-shadow: 0 24px 64px rgba(0,0,0,0.60); }
.p-card:hover::before { opacity: 1; }
.p-img-wrapper { position: relative; height: 270px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.06); }
.p-img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) brightness(0.9); transition: 0.65s cubic-bezier(0.25,1,0.5,1); }
.p-card:hover .p-img { filter: saturate(1.0) brightness(0.95); transform: scale(1.06); }
.p-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,28,30,1) 0%, rgba(28,28,30,0.3) 50%, transparent 100%); }
.p-tags { position: absolute; top: 18px; left: 18px; display: flex; gap: 7px; flex-wrap: wrap; z-index: 2; }
.p-tag {
    background: rgba(0,0,0,0.72); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12); padding: 4px 11px;
    border-radius: 20px; font-family: var(--font-code);
    font-size: 0.68rem; color: var(--text-main); font-weight: 700;
}
.p-content { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; }
.p-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; line-height: 1.3; }
.p-desc  { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 22px; line-height: 1.72; flex-grow: 1; }
.p-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 18px; }
.view-btn {
    background: none; border: none; color: var(--neon-blue); font-family: var(--font-code);
    font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
    display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 0;
    position: relative; transition: var(--transition-fast);
}
.view-btn::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--neon-blue); transition: var(--transition-fast); }
.view-btn:hover::after { width: 100%; }
.view-btn i { transition: var(--transition-bounce); }
.view-btn:hover i { transform: translateX(7px); }

/* ==========================================================================
   MODAL — macOS sheet/window style
   ========================================================================== */
.modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    z-index: 999999; display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: 0.35s cubic-bezier(0.4,0,0.2,1);
}
.modal.active { opacity: 1; visibility: visible; }
.modal-content {
    width: 90%; max-width: 1000px; max-height: 90vh;
    background: rgba(28,28,30,0.96); backdrop-filter: blur(40px);
    border: 1px solid rgba(255,255,255,0.10); border-radius: 20px; overflow-y: auto;
    position: relative;
    transform: translateY(30px) scale(0.97); opacity: 0;
    transition: 0.45s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 0 0 0.5px rgba(255,255,255,0.05) inset, 0 40px 90px rgba(0,0,0,0.80);
}
.modal.active .modal-content { transform: translateY(0) scale(1); opacity: 1; transition-delay: 0.05s; }
.close-modal {
    position: absolute; top: 22px; right: 22px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10);
    width: 34px; height: 34px; border-radius: 8px; color: white; font-size: 0.9rem;
    display: flex; justify-content: center; align-items: center;
    transition: var(--transition-bounce); z-index: 10;
}
.close-modal:hover { background: var(--neon-alert); border-color: transparent; transform: scale(1.1); }
.modal-body { padding: 56px; }
.m-title { font-size: 2.4rem; margin-bottom: 24px; color: var(--text-main); font-weight: 700; line-height: 1.2; }
.m-img { width: 100%; max-height: 500px; object-fit: cover; border-radius: 12px; margin-bottom: 36px; border: 1px solid rgba(255,255,255,0.08); }
.m-desc { font-size: 1.02rem; color: var(--text-muted); line-height: 1.82; }
.m-desc h4 { color: var(--neon-blue); margin: 30px 0 14px; font-size: 1.1rem; font-family: var(--font-code); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.m-desc ul { list-style: none; margin-bottom: 30px; }
.m-desc ul li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.m-desc ul li::before { content: '▸'; position: absolute; left: 0; color: var(--neon-blue); }
.m-desc a { color: var(--neon-blue); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(10,132,255,0.40); text-underline-offset: 4px; }
.m-desc a:hover { text-decoration-color: var(--neon-blue); }

/* ==========================================================================
   CONTACT — macOS Terminal.app style
   ========================================================================== */
.contact-section {
    text-align: center; position: relative; overflow: hidden;
}
.contact-section::before { display: none; }
.terminal-contact {
    max-width: 760px; margin: 0 auto;
    background: rgba(16,16,18,0.96); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; text-align: left;
    overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,0.70);
    position: relative; z-index: 2;
}
.term-head {
    background: rgba(40,40,42,0.85); padding: 13px 18px;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.term-dot { width: 12px; height: 12px; border-radius: 50%; }
.term-dot.r { background: #ff453a; }
.term-dot.y { background: #ffd60a; }
.term-dot.g { background: #30d158; }
.term-title { margin-left: 10px; font-family: var(--font-code); color: var(--text-muted); font-size: 0.82rem; font-weight: 500; }
.term-body { padding: 34px 38px; font-family: var(--font-code); font-size: 0.93rem; color: var(--text-muted); line-height: 2.1; }
.c-prompt { color: var(--accent-green); font-weight: 700; }
.c-cmd { color: white; }
.c-res { padding-left: 22px; margin: 14px 0 30px; color: var(--neon-blue); display: none; }
.c-res.visible { display: block; animation: fadeIn 0.5s ease forwards; }
.c-res a { color: var(--neon-cyan); position: relative; display: inline-block; padding-bottom: 1px; }
.c-res a::after { content:''; position: absolute; bottom:0; left:0; width:100%; height:1px; background: var(--neon-cyan); transition: 0.3s; transform-origin: right; transform: scaleX(0); }
.c-res a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
    border-top: 1px solid rgba(255,255,255,0.07); padding: 48px 0;
    text-align: center; color: var(--text-muted); font-size: 0.88rem;
    background: rgba(0,0,0,0.28); position: relative; z-index: 2;
}
.footer-socials { display: flex; justify-content: center; gap: 14px; margin-bottom: 24px; }
.footer-socials a {
    width: 42px; height: 42px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    display: flex; justify-content: center; align-items: center;
    font-size: 1.2rem; color: var(--text-muted);
    transition: var(--transition-bounce); background: rgba(255,255,255,0.05);
}
.footer-socials a:hover { color: white; background: var(--neon-blue); border-color: transparent; transform: translateY(-4px); box-shadow: 0 8px 20px rgba(10,132,255,0.35); filter: none; }
.footer-text { font-family: var(--font-code); letter-spacing: 0.5px; font-weight: 500; }

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes spin         { 100%  { transform: rotate(360deg); } }
@keyframes spin-reverse { 100%  { transform: rotate(-360deg); } }
@keyframes pulse        { 100%  { opacity: 0.5; } }
@keyframes blink        { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes fadeIn       { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes floatHero    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes morph {
    0%,100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    50%     { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }
}
@keyframes glitch-anim  { 0%,100%{clip:rect(0,0,0,0)} } /* disabled */
@keyframes rotateGlow   { 100%{transform:rotate(1turn)} }
@keyframes scrollWheel  { 0%{top:6px;opacity:1} 100%{top:22px;opacity:0} }

/* Reveal animations — smoother macOS feel */
.reveal { opacity: 0; transform: translateY(28px); transition: all 0.75s cubic-bezier(0.4,0,0.2,1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1400px) { .hero-title { font-size: clamp(2.8rem, 5vw, 4.8rem); } }

@media (max-width: 1200px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 70px; }
    .hero-actions { justify-content: center; }
    .terminal-box { margin: 0 auto 28px; }
    .hero-desc { margin: 0 auto 44px; }
    .hero-visual { margin-top: 30px; }
    .profile-container { max-width: 400px; }
    .about-grid { grid-template-columns: 1fr; gap: 48px; }
    .edu-grid { grid-template-columns: repeat(2, 1fr); }
    .time-item { padding-right: 0 !important; padding-left: 0 !important; padding-top: 55px; justify-content: center !important; }
    .timeline-line, .timeline-progress { left: 50%; }
    .time-node { top: 0; }
    .time-content { width: 100%; text-align: center; }
    .time-content::after { display: none; }
    .time-desc ul li { text-align: left; }
    .project-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .cursor-dot, .cursor-ring { display: none; }
    * { cursor: auto !important; }
    .nav-links { display: none; }
    .menu-toggle { display: block; margin-left: auto; }
    #smooth-wrapper { position: relative; height: auto; overflow: visible; }
    #smooth-content { transform: none !important; }
    body { height: auto !important; }
    .edu-grid { grid-template-columns: 1fr; }
    .section-pad { padding: 90px 0; }
    .section-header { margin-bottom: 60px; }
    .hero { padding-top: 52px; }
    .hero-grid { gap: 44px; }
    .hero-title { font-size: clamp(2rem, 8vw, 2.8rem) !important; letter-spacing: -1px; margin-bottom: 14px; }
    .typewriter-wrap { justify-content: center; font-size: 1rem; margin-bottom: 22px; }
    .hero-desc { font-size: 0.94rem; margin-bottom: 28px; padding: 0 10px; }
    .hero-actions { flex-direction: column; gap: 14px; width: 100%; }
    .btn-cyber { width: 100%; max-width: 280px; padding: 13px; }
    .profile-container { max-width: 250px; margin-top: 14px; }
    .tech-badge { padding: 8px 12px; font-size: 0.70rem; }
    .tech-badge i { font-size: 0.9rem; }
    .badge-1 { top: 0%; right: -8%; }
    .badge-2 { bottom: 5%; left: -8%; }
    .badge-3 { top: 55%; right: -12%; }
    .stats-grid { grid-template-columns: 1fr; }
    .project-grid { grid-template-columns: 1fr; }
    .p-card { transform: none !important; }
    .modal-content { width: 95%; margin: 16px 0; }
    .modal-body { padding: 32px 20px; }
    .m-title { font-size: 1.8rem; }
    .term-body { padding: 24px 20px; font-size: 0.85rem; }
    .cert-item { width: 100%; margin: 8px 0; }
    .expertise-grid { grid-template-columns: 1fr; }
    .glass-card { padding: 28px 22px; }
    .theme-toggle { gap: 5px; }
    .toggle-pill { width: 36px; height: 21px; }
    .toggle-knob { width: 15px; height: 15px; }
}

/* ==========================================================================
   THEME TOGGLE — macOS Control Center style
   ========================================================================== */
.theme-toggle {
    display: flex; align-items: center; gap: 7px;
    background: none; border: none; padding: 5px 2px;
    cursor: none; flex-shrink: 0;
    transition: var(--transition-fast);
}
.theme-icon-sun,
.theme-icon-moon {
    font-size: 0.78rem; transition: var(--transition-fast); line-height: 1;
}
.theme-icon-sun  { opacity: 0.40; color: var(--text-muted); }
.theme-icon-moon { opacity: 1;    color: var(--neon-blue); }

[data-theme="light"] .theme-icon-sun  { opacity: 1;    color: var(--neon-blue); }
[data-theme="light"] .theme-icon-moon { opacity: 0.40; color: var(--text-muted); }

.toggle-pill {
    width: 44px; height: 26px;
    background: rgba(120, 120, 128, 0.24);
    border-radius: 100px; position: relative;
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: background 0.30s ease, border-color 0.30s ease;
    flex-shrink: 0;
}
[data-theme="light"] .toggle-pill {
    background: var(--neon-blue);
    border-color: transparent;
}
.toggle-knob {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; background: white; border-radius: 50%;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .toggle-knob { transform: translateX(18px); }

/* ==========================================================================
   LIGHT MODE — [data-theme="light"]
   ========================================================================== */
[data-theme="light"] {
    --bg-deep:    #f2f2f7;
    --bg-surface: #ffffff;
    --bg-card:    rgba(255, 255, 255, 0.82);
    --bg-card-hover: rgba(255, 255, 255, 0.96);
    --text-main:  #1c1c1e;
    --text-muted: rgba(60, 60, 67, 0.62);
    --text-dark:  rgba(60, 60, 67, 0.28);
    --glass-border:        rgba(60, 60, 67, 0.14);
    --glass-border-strong: rgba(60, 60, 67, 0.22);
    --glass-bg:            rgba(255, 255, 255, 0.75);
    --glass-shadow:        0 8px 32px rgba(0, 0, 0, 0.10);
}

[data-theme="light"] body { background-color: var(--bg-deep); }
[data-theme="light"] body::before {
    background:
        radial-gradient(ellipse 80% 70% at 5% 5%,   rgba(94, 92, 230, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse 70% 60% at 95% 95%,  rgba(10, 132, 255, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 50% 40%,  rgba(191, 90, 242, 0.02) 0%, transparent 60%);
}

[data-theme="light"] ::-webkit-scrollbar-track { background: #e5e5ea; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(60,60,67,0.22); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(60,60,67,0.36); }

[data-theme="light"] #preloader { background: #f2f2f7; }
[data-theme="light"] .loader-text { color: rgba(60,60,67,0.55); }
[data-theme="light"] .progress-bar-container { background: rgba(60,60,67,0.12); }
[data-theme="light"] .progress-bar { background: var(--neon-blue); }
[data-theme="light"] .cyber-loader::before { border-color: rgba(60,60,67,0.12); border-top-color: #1c1c1e; }
[data-theme="light"] .cyber-loader::after  { border-color: rgba(60,60,67,0.08); border-top-color: rgba(10,132,255,0.80); }

[data-theme="light"] .cursor-dot { background: #1c1c1e; }
[data-theme="light"] .cursor-ring { border-color: rgba(60,60,67,0.40); }
[data-theme="light"] .cursor-hover .cursor-ring { border-color: rgba(60,60,67,0.55); background: rgba(0,0,0,0.03); }

[data-theme="light"] header {
    background: rgba(242, 242, 247, 0.84);
    border-bottom-color: rgba(60,60,67,0.12);
}
[data-theme="light"] header.scrolled {
    background: rgba(242, 242, 247, 0.95);
    border-bottom-color: rgba(60,60,67,0.16);
    box-shadow: 0 2px 24px rgba(0,0,0,0.07);
}
[data-theme="light"] .nav-link:hover { background: rgba(60,60,67,0.07); }

[data-theme="light"] .bg-glow  { background: radial-gradient(circle, rgba(94,92,230,0.05) 0%, transparent 65%); }
[data-theme="light"] .bg-glow-2 { background: radial-gradient(circle, rgba(10,132,255,0.04) 0%, transparent 65%); }

[data-theme="light"] .sec-bg-text { color: rgba(60,60,67,0.035); }

[data-theme="light"] .glass-card {
    background: rgba(255,255,255,0.82);
    border-color: rgba(60,60,67,0.12);
    box-shadow: 0 0 0 0.5px rgba(60,60,67,0.05) inset, 0 16px 48px rgba(0,0,0,0.08);
}
[data-theme="light"] .glass-card:hover { border-color: rgba(60,60,67,0.22); }
[data-theme="light"] .glass-card::before {
    background: radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(0,0,0,0.02), transparent 40%);
}

[data-theme="light"] .terminal-box {
    background: rgba(245,245,247,0.95);
    border-color: rgba(60,60,67,0.14);
    box-shadow: 0 4px 20px rgba(0,0,0,0.09), 0 0 0 0.5px rgba(60,60,67,0.06) inset;
    color: var(--text-muted);
}
[data-theme="light"] .terminal-box .tb-chrome {
    background: rgba(228,228,234,0.95);
    border-right-color: rgba(60,60,67,0.10);
}

[data-theme="light"] .mouse { border-color: rgba(60,60,67,0.34); }
[data-theme="light"] .wheel { background: rgba(60,60,67,0.50); }
[data-theme="light"] .scroll-text { color: rgba(60,60,67,0.38); }

[data-theme="light"] .social-hero a {
    background: rgba(60,60,67,0.06); border-color: rgba(60,60,67,0.14);
}

[data-theme="light"] .profile-frame  { border-color: rgba(60,60,67,0.13); }
[data-theme="light"] .profile-frame-2 { border-color: rgba(10,132,255,0.18); }
[data-theme="light"] .profile-frame-3 { border-color: rgba(191,90,242,0.12); }
[data-theme="light"] .profile-img {
    border-color: rgba(242,242,247,0.95);
    box-shadow: 0 0 0 1px rgba(60,60,67,0.08), 0 32px 72px rgba(0,0,0,0.12);
}

[data-theme="light"] .tech-badge {
    background: rgba(255,255,255,0.95);
    border-color: rgba(60,60,67,0.14);
    box-shadow: 0 8px 28px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(60,60,67,0.05) inset;
}

[data-theme="light"] .stat-box { background: rgba(60,60,67,0.05); }
[data-theme="light"] .stat-box:hover { background: rgba(10,132,255,0.07); }
[data-theme="light"] .skills-header::after { background: rgba(60,60,67,0.12); }

[data-theme="light"] .skill-node {
    background: rgba(255,255,255,0.82); border-color: rgba(60,60,67,0.10);
}
[data-theme="light"] .skill-node i { color: var(--text-muted); }

[data-theme="light"] .exp-tag {
    background: rgba(60,60,67,0.06); border-color: rgba(60,60,67,0.10);
}
[data-theme="light"] .exp-tag:hover {
    background: rgba(10,132,255,0.07); border-color: rgba(10,132,255,0.28);
}

[data-theme="light"] .edu-section { background: var(--bg-deep); }
[data-theme="light"] .edu-featured-card {
    background: rgba(255,255,255,0.90);
    border-color: rgba(60,60,67,0.12);
    box-shadow: 0 16px 48px rgba(0,0,0,0.07);
}
[data-theme="light"] .edu-featured-card:hover { border-color: rgba(10,132,255,0.28); }
[data-theme="light"] .edu-featured-content .divider { color: rgba(60,60,67,0.20); }
[data-theme="light"] .edu-card {
    background: rgba(255,255,255,0.85); border-color: rgba(60,60,67,0.10);
}
[data-theme="light"] .edu-card:hover {
    border-color: rgba(10,132,255,0.28); box-shadow: 0 12px 32px rgba(0,0,0,0.07);
}

[data-theme="light"] .cert-section {
    background: var(--bg-deep);
    border-top-color: rgba(60,60,67,0.08); border-bottom-color: rgba(60,60,67,0.08);
}
[data-theme="light"] .cert-item {
    background: rgba(255,255,255,0.85); border-color: rgba(60,60,67,0.10);
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
[data-theme="light"] .cert-item:hover {
    border-color: rgba(10,132,255,0.25); background: rgba(10,132,255,0.04);
    box-shadow: 0 12px 32px rgba(10,132,255,0.08);
}
[data-theme="light"] .award-card {
    background: rgba(255,255,255,0.85); border-color: rgba(60,60,67,0.10);
    box-shadow: 0 8px 24px rgba(0,0,0,0.07);
}
[data-theme="light"] .award-card:hover {
    border-color: rgba(10,132,255,0.25); box-shadow: 0 16px 44px rgba(10,132,255,0.09);
}
[data-theme="light"] .award-date {
    background: rgba(60,60,67,0.07); border-color: rgba(60,60,67,0.12);
}
[data-theme="light"] .award-card .award-tags { border-bottom-color: rgba(60,60,67,0.10); }

[data-theme="light"] .mvp-highlight-card {
    background: rgba(255,255,255,0.88);
    border-color: rgba(10,132,255,0.20);
    box-shadow: 0 20px 60px rgba(10,132,255,0.05);
}
[data-theme="light"] .mvp-highlight-card:hover { box-shadow: 0 30px 70px rgba(10,132,255,0.11); }

[data-theme="light"] .timeline-line { background: rgba(60,60,67,0.12); }
[data-theme="light"] .time-node { border-color: rgba(60,60,67,0.24); background: var(--bg-surface); }
[data-theme="light"] .time-content {
    background: rgba(255,255,255,0.88); border-color: rgba(60,60,67,0.10);
    box-shadow: 0 8px 32px rgba(0,0,0,0.07);
}
[data-theme="light"] .time-content::after {
    background: rgba(255,255,255,0.90);
    border-top-color: rgba(60,60,67,0.10); border-right-color: rgba(60,60,67,0.10);
}
[data-theme="light"] .time-item:nth-child(even) .time-content::after {
    border-left-color: rgba(60,60,67,0.10); border-bottom-color: rgba(60,60,67,0.10);
}
[data-theme="light"] .time-item:hover .time-content { border-color: rgba(10,132,255,0.22); }
[data-theme="light"] .time-item:nth-child(even):hover .time-content { border-color: rgba(191,90,242,0.22); }
[data-theme="light"] .time-item:hover .time-content::after {
    border-top-color: rgba(10,132,255,0.22); border-right-color: rgba(10,132,255,0.22);
}
[data-theme="light"] .read-more-btn {
    background: rgba(60,60,67,0.06); border-color: rgba(60,60,67,0.12);
}
[data-theme="light"] .read-more-btn:hover {
    background: rgba(10,132,255,0.08); border-color: rgba(10,132,255,0.25);
}

[data-theme="light"] .p-card {
    background: rgba(255,255,255,0.88); border-color: rgba(60,60,67,0.10);
    box-shadow: 0 8px 32px rgba(0,0,0,0.07);
}
[data-theme="light"] .p-card:hover {
    border-color: rgba(60,60,67,0.20); box-shadow: 0 24px 64px rgba(0,0,0,0.11);
}
[data-theme="light"] .p-img-wrapper { border-bottom-color: rgba(60,60,67,0.08); }
[data-theme="light"] .p-overlay {
    background: linear-gradient(to top, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.20) 50%, transparent 100%);
}
[data-theme="light"] .p-tag {
    background: rgba(255,255,255,0.90); border-color: rgba(60,60,67,0.14); color: var(--text-main);
}
[data-theme="light"] .p-footer { border-top-color: rgba(60,60,67,0.10); }
[data-theme="light"] .p-card::before {
    background: radial-gradient(800px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(0,0,0,0.02), transparent 40%);
}

[data-theme="light"] .modal { background: rgba(0,0,0,0.38); }
[data-theme="light"] .modal-content {
    background: rgba(255,255,255,0.98); border-color: rgba(60,60,67,0.12);
    box-shadow: 0 0 0 0.5px rgba(60,60,67,0.07) inset, 0 40px 90px rgba(0,0,0,0.16);
}
[data-theme="light"] .close-modal {
    background: rgba(60,60,67,0.08); border-color: rgba(60,60,67,0.12); color: var(--text-main);
}
[data-theme="light"] .close-modal:hover { background: var(--neon-alert); border-color: transparent; color: white; }

[data-theme="light"] .terminal-contact {
    background: rgba(245,245,247,0.98); border-color: rgba(60,60,67,0.12);
    box-shadow: 0 32px 80px rgba(0,0,0,0.12);
}
[data-theme="light"] .term-head {
    background: rgba(225,225,232,0.92); border-bottom-color: rgba(60,60,67,0.10);
}
[data-theme="light"] .c-cmd { color: var(--text-main); }

[data-theme="light"] .btn-outline {
    background: rgba(60,60,67,0.06); border-color: rgba(60,60,67,0.16);
}
[data-theme="light"] .btn-outline:hover {
    background: rgba(60,60,67,0.10); border-color: rgba(60,60,67,0.28); color: var(--text-main);
}

[data-theme="light"] footer {
    border-top-color: rgba(60,60,67,0.10); background: rgba(242,242,247,0.65);
}
[data-theme="light"] .footer-socials a {
    background: rgba(60,60,67,0.06); border-color: rgba(60,60,67,0.12);
}

/* Mobile toggle knob offset correction (smaller pill on mobile) */
@media (max-width: 768px) {
    [data-theme="light"] .toggle-knob { transform: translateX(15px); }
}