/* ================= RESET + VARIABLES ================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Press Start 2P', cursive;
}

:root{
    --bg:#0b0b0b;
    --text:#ffffff;
    --muted:#bbbbbb;
    --border:#222;
    --card:#111;
    --accent:#8a5cff;
    --accent-hover:#9d6fff;
    --grid:rgba(255,255,255,0.04);
    --shadow:rgba(0,0,0,0.3);
}

body.light{
    --bg:#f5f5f5;
    --text:#111;
    --muted:#444;
    --border:#ddd;
    --card:#fff;
    --grid:rgba(0,0,0,0.06);
    --shadow:rgba(0,0,0,0.1);
}

body{
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
}

/* ================= GRID BACKGROUND ================= */
.grid-bg{
    position:fixed;
    inset:0;
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:40px 40px;
    z-index:-1;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    from { background-position: 0 0; }
    to { background-position: 40px 40px; }
}

/* ================= HEADER ================= */
.header{
    position:fixed;
    top:0;
    width:100%;
    padding:20px 8%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:color-mix(in srgb, var(--bg) 95%, transparent);
    backdrop-filter: blur(10px);
    border-bottom:2px solid var(--border);
    z-index:10;
    box-shadow: 0 4px 20px var(--shadow);
}

.header-right{
    display:flex;
    align-items:center;
    gap:18px;
}

.logo{
    color:var(--accent);
    font-size:14px;
    cursor:pointer;
    transition: transform 0.3s ease;
}

.logo:hover{ transform: scale(1.1); }

/* ================= NAVIGATION ================= */
nav{
    margin-left:auto;
    display:flex;
    align-items:center;
}

nav a{
    margin-left:25px;
    text-decoration:none;
    color:var(--muted);
    font-size:12px;
    transition: color 0.3s ease;
    position:relative;
}

nav a:hover{ color:var(--accent); }

nav a::after{
    content:'';
    position:absolute;
    bottom:-5px;
    left:0;
    width:0;
    height:2px;
    background:var(--accent);
    transition: width 0.3s ease;
}

nav a:hover::after{ width:100%; }

/* ================= THEME TOGGLE ================= */
.theme-toggle{
    margin-right:20px;
    width:42px;
    height:42px;
    background:var(--card);
    color:var(--accent);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    border:2px solid var(--border);
    transition: all 0.3s ease;
}

.theme-toggle:hover{
    border-color:var(--accent);
    transform: scale(1.05);
}

.theme-toggle .icon{
    position:absolute;
    font-size:18px;
    transition:.3s;
}

.theme-toggle .sun{ opacity:1; }
.theme-toggle .moon{ opacity:0; }

body.light .theme-toggle .sun{ opacity:0; }
body.light .theme-toggle .moon{ opacity:1; }

/* ================= BURGER MENU ================= */
.burger{
    display:none;
    font-size:22px;
    cursor:pointer;
    color:var(--accent);
    transition: transform 0.3s ease;
}

.burger:hover{ transform: rotate(90deg); }

.close{ display:none; }

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    display:none;
    z-index:8;
}

.overlay.active{ display:block; }

/* ================= ABOUT SECTION ================= */
.about-section{
    padding:140px 8% 80px;
    min-height:100vh;
}

.section-header{
    text-align:center;
    margin-bottom:80px;
    position:relative;
}

.section-header h1{
    font-size:36px;
    margin-bottom:20px;
    background: linear-gradient(135deg, var(--accent), #ff6b9d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header p{
    font-size:12px;
    color:var(--muted);
}

/* ================= PIXEL STARS ================= */
.pixel-star{
    position:absolute;
    font-size:24px;
    color:var(--accent);
    animation: twinkle 3s ease-in-out infinite;
}

.star-1{ top:-20px; left:15%; animation-delay:0s; }
.star-2{ top:-10px; right:20%; animation-delay:1s; }
.star-3{ top:40px; left:5%; animation-delay:2s; }
.star-4{ top:35px; right:10%; animation-delay:1.5s; }

@keyframes twinkle {
    0%, 100% { opacity:0.3; transform:scale(1); }
    50% { opacity:1; transform:scale(1.2); }
}

/* ================= ABOUT GRID ================= */
.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
}

/* ================= CATEGORY ITEMS ================= */
.cat-item{
    display:flex;
    gap:20px;
    padding:20px;
    background:var(--card);
    border-left:4px solid var(--accent);
    border:2px solid var(--border);
    border-left:4px solid var(--accent);
    margin-bottom:25px;
    transition: all 0.3s ease;
    position:relative;
    overflow:hidden;
}

.cat-item::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity:0.1;
    transition: left 0.5s ease;
}

.cat-item:hover::before{ left:100%; }

.cat-item:hover{
    transform:translateX(5px);
    border-color:var(--accent);
    box-shadow: 4px 4px 0 var(--accent);
}

.cat-icon{
    width:60px;
    height:60px;
    background:var(--card);
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid var(--accent);
    flex-shrink:0;
}

/* ================= PIXEL ICONS ================= */
.pixel-icon{
    width:40px;
    height:40px;
    position:relative;
}

/* Community Icon */
.community .icon-pixel{
    width:8px;
    height:8px;
    background:var(--accent);
    position:absolute;
    border-radius:50%;
}

.community .p1{ top:5px; left:16px; }
.community .p2{ top:15px; left:5px; }
.community .p3{ top:15px; right:5px; }
.community .p4{ bottom:5px; left:10px; }
.community .p5{ bottom:5px; right:10px; }

/* AI Icon */
.ai .icon-brain{
    width:24px;
    height:20px;
    background:var(--accent);
    position:absolute;
    top:8px;
    left:8px;
    border-radius:50% 50% 40% 40%;
}

.ai .icon-circuit{
    width:12px;
    height:2px;
    background:var(--accent);
    position:absolute;
}

.ai .c1{ bottom:8px; left:4px; }
.ai .c2{ bottom:5px; left:14px; width:8px; }
.ai .c3{ bottom:8px; right:4px; width:10px; }

/* Marketing Icon */
.marketing .icon-graph{
    width:8px;
    background:var(--accent);
    position:absolute;
    bottom:5px;
}

.marketing .g1{ height:15px; left:8px; }
.marketing .g2{ height:25px; left:18px; }
.marketing .g3{ height:20px; right:8px; }

.marketing .icon-arrow{
    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:10px solid var(--accent);
    position:absolute;
    top:2px;
    right:8px;
}

/* Equality Icon */
.equality .icon-person{
    width:12px;
    height:24px;
    background:var(--accent);
    position:absolute;
    bottom:5px;
    border-radius:50% 50% 0 0;
}

.equality .person1{ left:6px; }
.equality .person2{ right:6px; }

.equality .icon-heart{
    width:8px;
    height:8px;
    background:var(--accent);
    position:absolute;
    top:8px;
    left:16px;
    transform:rotate(45deg);
}

.equality .icon-heart::before,
.equality .icon-heart::after{
    content:'';
    width:8px;
    height:8px;
    background:var(--accent);
    position:absolute;
    border-radius:50%;
}

.equality .icon-heart::before{ top:-4px; }
.equality .icon-heart::after{ left:-4px; }

.cat-text h4{
    font-size:14px;
    margin-bottom:10px;
    color:var(--text);
}

.cat-text p{
    font-size:10px;
    color:var(--muted);
    line-height:1.8;
}

/* ================= PROFILE CARD ================= */
.profile-card{
    background:var(--card);
    border:3px solid var(--border);
    padding:30px;
    margin-bottom:30px;
    position:relative;
    box-shadow: 8px 8px 0 var(--shadow);
}

.profile-avatar{
    display:flex;
    justify-content:center;
    margin-bottom:25px;
}

.pixel-avatar{
    width:80px;
    height:100px;
    position:relative;
    animation: avatarFloat 3s ease-in-out infinite;
}

@keyframes avatarFloat {
    0%, 100% { transform:translateY(0); }
    50% { transform:translateY(-10px); }
}

.avatar-hair{
    width:60px;
    height:30px;
    background:var(--accent);
    position:absolute;
    top:0;
    left:10px;
    border-radius:50% 50% 0 0;
}

.avatar-face{
    width:60px;
    height:60px;
    background:#ffd1a3;
    position:absolute;
    top:20px;
    left:10px;
    border-radius:40%;
}

.avatar-eye{
    width:8px;
    height:8px;
    background:#333;
    position:absolute;
    top:20px;
    border-radius:50%;
}

.avatar-eye.left{ left:12px; }
.avatar-eye.right{ right:12px; }

.avatar-smile{
    width:20px;
    height:10px;
    border:3px solid #333;
    border-top:none;
    position:absolute;
    bottom:12px;
    left:50%;
    transform:translateX(-50%);
    border-radius:0 0 50% 50%;
}

.avatar-body{
    width:50px;
    height:30px;
    background:var(--accent);
    position:absolute;
    bottom:0;
    left:15px;
    border-radius:20% 20% 0 0;
}

.profile-info{
    text-align:center;
}

.profile-info h3{
    font-size:16px;
    margin-bottom:8px;
}

.profile-role{
    font-size:10px;
    color:var(--accent);
}

.profile-stats{
    display:flex;
    justify-content:space-around;
    margin-top:25px;
    padding-top:20px;
    border-top:2px solid var(--border);
}

.stat-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.stat-icon{
    font-size:20px;
}

.stat-info{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.stat-value{
    font-size:14px;
    color:var(--text);
}

.stat-label{
    font-size:8px;
    color:var(--muted);
}

/* ================= ABOUT DESCRIPTION ================= */
.about-description{
    background:var(--card);
    border:2px solid var(--border);
    padding:25px;
    margin-bottom:30px;
}

.about-description p{
    font-size:11px;
    color:var(--muted);
    line-height:2;
    margin-bottom:20px;
}

.about-description p:last-child{
    margin-bottom:0;
}

/* ================= TECH STACK ================= */
.tech-stack-section{
    background:var(--card);
    border:2px solid var(--border);
    padding:25px;
}

.tech-stack-section h4{
    font-size:14px;
    margin-bottom:20px;
    color:var(--accent);
}

.tech-icons{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:15px;
}

.tech-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:15px;
    background:var(--bg);
    border:2px solid var(--border);
    transition: all 0.3s ease;
}

.tech-item:hover{
    border-color:var(--accent);
    transform:translateY(-3px);
    box-shadow: 4px 4px 0 var(--accent);
}

.tech-emoji{
    font-size:24px;
}

.tech-name{
    font-size:8px;
    color:var(--muted);
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
    .burger{ display:block; }

    nav{
        position:fixed;
        top:0;
        right:-100%;
        height:100vh;
        width:240px;
        background:var(--card);
        flex-direction:column;
        padding-top:100px;
        transition:0.4s;
        z-index:9;
        border-left:3px solid var(--accent);
    }

    nav a{ margin:20px; }
    nav.active{ right:0; }

    .close{
        display:block;
        position:absolute;
        top:20px;
        right:20px;
        font-size:18px;
        cursor:pointer;
        color:var(--accent);
    }

    .about-section{
        padding:120px 5% 60px;
    }

    .section-header h1{
        font-size:28px;
    }

    .about-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .theme-toggle{
        width:36px;
        height:36px;
        margin-right:10px;
    }

    .tech-icons{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:480px){
    .section-header h1{
        font-size:22px;
    }

    .cat-item{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .cat-text h4{
        font-size:12px;
    }

    .cat-text p{
        font-size:9px;
    }

    .profile-card{
        padding:20px;
    }

    .about-description{
        padding:20px;
    }

    .about-description p{
        font-size:10px;
    }

    .tech-stack-section{
        padding:20px;
    }

    .tech-icons{
        grid-template-columns:1fr;
        gap:10px;
    }

    .profile-stats{
        flex-direction:column;
        gap:15px;
    }
}