/* ═══════════════════════════════════════════════════════════════
   KARMANYA DADHICH — PIXEL PORTFOLIO
   Two-tone: Beige (#F5F0E8) & Brown (#5C3D1E)
   ═══════════════════════════════════════════════════════════════ */

/* ─── RESET & BASE ────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --beige: #F5F0E8;
    --beige-dark: #E8E0D4;
    --beige-light: #FAF8F4;
    --brown: #5C3D1E;
    --brown-light: #7A5A3A;
    --brown-dark: #3D2710;
    --brown-ghost: rgba(92, 61, 30, 0.08);
    --brown-shadow: rgba(92, 61, 30, 0.15);

    --font-pixel: 'Press Start 2P', monospace;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --pixel: 4px;
    --border-w: 3px;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='4' height='4' x='6' y='0' fill='%235C3D1E'/%3E%3Crect width='4' height='4' x='6' y='12' fill='%235C3D1E'/%3E%3Crect width='4' height='4' x='0' y='6' fill='%235C3D1E'/%3E%3Crect width='4' height='4' x='12' y='6' fill='%235C3D1E'/%3E%3Crect width='4' height='4' x='6' y='6' fill='%235C3D1E'/%3E%3C/svg%3E") 8 8, crosshair;
}

body {
    background-color: var(--beige);
    color: var(--brown);
    font-family: var(--font-body);
    line-height: 1.7;
    overflow-x: hidden;
    position: relative;
}

/* ─── SCANLINE OVERLAY ────────────────────────────────── */
.scanline-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(92, 61, 30, 0.02) 2px,
        rgba(92, 61, 30, 0.02) 4px
    );
}

/* ─── PIXEL TRAIL CANVAS ─────────────────────────────── */
#pixel-trail {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    width: 100%;
    height: 100%;
}

/* ─── PIXEL TEXT ──────────────────────────────────────── */
.pixel-text {
    font-family: var(--font-pixel);
    letter-spacing: 1px;
    image-rendering: pixelated;
}

/* ─── PIXEL CARD ──────────────────────────────────────── */
.pixel-card {
    background: var(--beige-light);
    border: var(--border-w) solid var(--brown);
    box-shadow:
        var(--pixel) var(--pixel) 0 var(--brown),
        calc(var(--pixel) + 1px) calc(var(--pixel) + 1px) 0 var(--brown);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.pixel-card:hover {
    transform: translate(calc(var(--pixel) * -0.5), calc(var(--pixel) * -0.5));
    box-shadow:
        calc(var(--pixel) * 1.5) calc(var(--pixel) * 1.5) 0 var(--brown),
        calc(var(--pixel) * 1.5 + 1px) calc(var(--pixel) * 1.5 + 1px) 0 var(--brown);
}

/* ─── PIXEL BUTTON ────────────────────────────────────── */
.pixel-btn {
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    padding: 14px 28px;
    border: var(--border-w) solid var(--brown);
    text-decoration: none;
    display: inline-block;
    position: relative;
    transition: all 0.1s ease;
    box-shadow: var(--pixel) var(--pixel) 0 var(--brown);
    letter-spacing: 1px;
    cursor: pointer;
}

.pixel-btn.primary {
    background: var(--brown);
    color: var(--beige);
}

.pixel-btn.primary:hover {
    background: var(--beige);
    color: var(--brown);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--brown);
}

.pixel-btn.secondary {
    background: var(--beige);
    color: var(--brown);
}

.pixel-btn.secondary:hover {
    background: var(--brown);
    color: var(--beige);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--brown);
}

.pixel-btn:active {
    transform: translate(var(--pixel), var(--pixel));
    box-shadow: 0 0 0 var(--brown);
}

/* ─── NAVIGATION ──────────────────────────────────────── */
.pixel-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--beige);
    border-bottom: var(--border-w) solid var(--brown);
    box-shadow: 0 var(--pixel) 0 var(--brown-shadow);
    transition: transform 0.3s ease;
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    font-family: var(--font-pixel);
    font-size: 1.2rem;
    color: var(--brown);
    text-decoration: none;
    border: var(--border-w) solid var(--brown);
    padding: 6px 12px;
    background: var(--beige);
    box-shadow: 3px 3px 0 var(--brown);
    transition: all 0.1s ease;
}

.nav-logo:hover {
    background: var(--brown);
    color: var(--beige);
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--brown);
}

.nav-links {
    display: flex;
    gap: 8px;
}

.nav-links a {
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    color: var(--brown);
    text-decoration: none;
    padding: 8px 14px;
    border: 2px solid transparent;
    transition: all 0.15s ease;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--brown);
    transition: all 0.2s ease;
    transform: translateX(-50%);
}

.nav-links a:hover {
    border-color: var(--brown);
    background: var(--brown-ghost);
}

.nav-links a:hover::after {
    width: 60%;
}

.nav-toggle {
    display: none;
    background: none;
    border: var(--border-w) solid var(--brown);
    padding: 8px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    position: relative;
}

.pixel-hamburger,
.pixel-hamburger::before,
.pixel-hamburger::after {
    display: block;
    width: 20px;
    height: 3px;
    background: var(--brown);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.2s ease;
}

.pixel-hamburger {
    top: 50%;
    transform: translate(-50%, -50%);
}

.pixel-hamburger::before {
    content: '';
    top: -7px;
}

.pixel-hamburger::after {
    content: '';
    top: 7px;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--beige);
    border-bottom: var(--border-w) solid var(--brown);
    z-index: 999;
    flex-direction: column;
    padding: 16px;
    gap: 4px;
}

.mobile-menu.active {
    display: flex;
}

.mobile-menu a {
    font-family: var(--font-pixel);
    font-size: 0.6rem;
    color: var(--brown);
    text-decoration: none;
    padding: 12px 16px;
    border: 2px solid transparent;
    transition: all 0.15s ease;
}

.mobile-menu a:hover {
    border-color: var(--brown);
    background: var(--brown-ghost);
}

/* ─── HERO ────────────────────────────────────────────── */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 100px 24px 60px;
    overflow: hidden;
}

/* Background grid pattern */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--brown-ghost) 1px, transparent 1px),
        linear-gradient(90deg, var(--brown-ghost) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.6;
}

.hero-content {
    max-width: 1100px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 80px;
    position: relative;
    z-index: 2;
}

.hero-pixel-art {
    flex-shrink: 0;
}

/* Pixel Avatar - Pure CSS pixel character */
.pixel-avatar {
    width: 200px;
    height: 240px;
    position: relative;
    image-rendering: pixelated;
}

/* Build the pixel avatar using box-shadow pixel art technique */
.pixel-avatar::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    top: 0;
    left: 0;
    color: var(--brown);
    box-shadow:
        /* Hair */
        7em 1em, 8em 1em, 9em 1em, 10em 1em, 11em 1em, 12em 1em, 13em 1em,
        6em 2em, 7em 2em, 8em 2em, 9em 2em, 10em 2em, 11em 2em, 12em 2em, 13em 2em, 14em 2em,
        6em 3em, 7em 3em, 8em 3em, 9em 3em, 10em 3em, 11em 3em, 12em 3em, 13em 3em, 14em 3em,
        /* Face */
        7em 4em, 8em 4em, 9em 4em, 10em 4em, 11em 4em, 12em 4em, 13em 4em,
        7em 5em, 9em 5em, 11em 5em, 13em 5em,
        7em 6em, 8em 6em, 9em 6em, 10em 6em, 11em 6em, 12em 6em, 13em 6em,
        8em 7em, 9em 7em, 10em 7em, 11em 7em, 12em 7em,
        9em 8em, 10em 8em, 11em 8em,
        /* Neck */
        10em 9em,
        /* Body / Shirt */
        6em 10em, 7em 10em, 8em 10em, 9em 10em, 10em 10em, 11em 10em, 12em 10em, 13em 10em, 14em 10em,
        5em 11em, 6em 11em, 7em 11em, 8em 11em, 9em 11em, 10em 11em, 11em 11em, 12em 11em, 13em 11em, 14em 11em, 15em 11em,
        5em 12em, 6em 12em, 7em 12em, 8em 12em, 9em 12em, 10em 12em, 11em 12em, 12em 12em, 13em 12em, 14em 12em, 15em 12em,
        5em 13em, 6em 13em, 7em 13em, 8em 13em, 9em 13em, 10em 13em, 11em 13em, 12em 13em, 13em 13em, 14em 13em, 15em 13em,
        /* Arms */
        4em 11em, 4em 12em, 4em 13em, 4em 14em,
        16em 11em, 16em 12em, 16em 13em, 16em 14em,
        /* Belt */
        7em 14em, 8em 14em, 9em 14em, 10em 14em, 11em 14em, 12em 14em, 13em 14em,
        /* Legs */
        8em 15em, 9em 15em, 11em 15em, 12em 15em,
        8em 16em, 9em 16em, 11em 16em, 12em 16em,
        8em 17em, 9em 17em, 11em 17em, 12em 17em,
        /* Shoes */
        7em 18em, 8em 18em, 9em 18em, 11em 18em, 12em 18em, 13em 18em;
    animation: avatar-float 3s ease-in-out infinite;
}

/* Outline effect for avatar */
.pixel-avatar::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    top: 0;
    left: 0;
    color: var(--beige-dark);
    box-shadow:
        /* Face fill (lighter) */
        8em 4em, 9em 4em var(--beige-dark), 10em 4em var(--beige-dark), 11em 4em var(--beige-dark), 12em 4em,
        8em 5em, 10em 5em var(--beige-dark), 12em 5em,
        8em 7em var(--beige-dark), 11em 7em var(--beige-dark);
}

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

.hero-text {
    flex: 1;
}

.hero-greeting {
    font-size: 0.7rem;
    margin-bottom: 16px;
    opacity: 0.7;
    animation: blink-text 1.5s steps(2) infinite;
}

@keyframes blink-text {
    0%, 60% { opacity: 0.7; }
    61%, 100% { opacity: 0.3; }
}

.hero-name {
    font-family: var(--font-pixel);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.3;
    margin-bottom: 20px;
    text-shadow: 4px 4px 0 var(--brown-shadow);
    letter-spacing: 3px;
}

.hero-title {
    font-family: var(--font-pixel);
    font-size: clamp(0.5rem, 1.2vw, 0.75rem);
    margin-bottom: 36px;
    line-height: 2;
    min-height: 2.4em;
}

.blink-cursor {
    animation: blink 0.8s steps(2) infinite;
    color: var(--brown);
}

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

.hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Floating Sprites */
.floating-sprites {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sprite {
    position: absolute;
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--brown-light);
    opacity: 0.25;
    animation: sprite-float 6s ease-in-out infinite;
    line-height: 1;
}

.sprite:nth-child(2) { animation-delay: -1.5s; animation-duration: 7s; }
.sprite:nth-child(3) { animation-delay: -3s; animation-duration: 5s; }
.sprite:nth-child(4) { animation-delay: -4.5s; animation-duration: 8s; }

@keyframes sprite-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(2deg); }
    75% { transform: translateY(10px) rotate(-2deg); }
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce-down 2s ease-in-out infinite;
}

.scroll-indicator .pixel-text {
    font-size: 0.5rem;
    opacity: 0.5;
}

@keyframes bounce-down {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
    50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* ─── SECTIONS ────────────────────────────────────────── */
.section {
    padding: 100px 24px;
    position: relative;
}

.section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, var(--brown-ghost) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.4;
    pointer-events: none;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.section-title {
    font-size: clamp(0.7rem, 1.5vw, 1rem);
    margin-bottom: 50px;
    padding-bottom: 16px;
    border-bottom: var(--border-w) solid var(--brown);
    display: inline-block;
}

.section-divider {
    text-align: center;
    margin-bottom: 40px;
    overflow: hidden;
}

.divider-sprite {
    font-family: monospace;
    font-size: 0.7rem;
    color: var(--brown-light);
    opacity: 0.3;
    letter-spacing: 2px;
    white-space: nowrap;
}

/* ─── ABOUT ───────────────────────────────────────────── */
.about-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
    align-items: start;
}

.about-card {
    padding: 32px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.card-label {
    font-size: 0.6rem;
}

.pixel-icon {
    font-size: 1.2rem;
    color: var(--brown);
}

.about-text {
    margin-bottom: 16px;
    font-size: 0.95rem;
    color: var(--brown);
    line-height: 1.8;
}

.about-text strong {
    color: var(--brown-dark);
    font-weight: 600;
}

.about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.stat-item {
    padding: 24px 16px;
    text-align: center;
}

.stat-number {
    display: block;
    font-family: var(--font-pixel);
    font-size: 1.8rem;
    color: var(--brown);
    margin-bottom: 8px;
}

.stat-label {
    font-size: 0.45rem;
    opacity: 0.7;
}

/* ─── EXPERIENCE TIMELINE ─────────────────────────────── */
.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -40px;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-dot {
    width: 16px;
    height: 16px;
    background: var(--brown);
    border: 3px solid var(--beige);
    box-shadow: 0 0 0 2px var(--brown);
    position: relative;
    z-index: 2;
}

.timeline-line {
    width: 3px;
    background: var(--brown);
    flex: 1;
    min-height: calc(100% + 40px);
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
}

.timeline-item:last-child .timeline-line {
    display: none;
}

.timeline-card {
    padding: 28px;
}

.timeline-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.card-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.timeline-card h3 {
    font-size: 0.6rem;
    line-height: 1.6;
}

.card-date {
    font-size: 0.5rem;
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0;
}

.card-company {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-bottom: 20px;
    font-weight: 500;
}

.exp-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exp-list li {
    position: relative;
    padding-left: 20px;
    font-size: 0.9rem;
    line-height: 1.7;
}

.exp-list li .bullet {
    color: var(--brown);
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 0.7rem;
}

.exp-list li strong {
    color: var(--brown-dark);
    font-weight: 600;
}

.education-card {
    background: var(--beige-dark);
}

/* ─── SKILLS RPG ──────────────────────────────────────── */
.skills-rpg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.skill-category {
    padding: 28px;
}

.skill-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px dashed var(--brown-light);
}

.skill-header h3 {
    font-size: 0.55rem;
    line-height: 1.6;
}

.skill-icon {
    font-size: 1.4rem;
}

.stat-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stat-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-name {
    font-size: 0.8rem;
    min-width: 130px;
    font-weight: 500;
    flex-shrink: 0;
}

.stat-bar {
    flex: 1;
    height: 16px;
    background: var(--beige-dark);
    border: 2px solid var(--brown);
    position: relative;
    overflow: hidden;
}

.stat-fill {
    height: 100%;
    background: var(--brown);
    width: 0;
    transition: width 1.5s ease-out;
    position: relative;
    image-rendering: pixelated;
}

/* Pixelated fill pattern */
.stat-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 6px,
        var(--beige-dark) 6px,
        var(--beige-dark) 8px
    );
    opacity: 0.3;
}

/* ─── HIGHLIGHTS ──────────────────────────────────────── */
.highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.highlight-card {
    padding: 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.achievement-badge {
    width: 64px;
    height: 64px;
    border: var(--border-w) solid var(--brown);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--beige-dark);
    position: relative;
}

/* Pixel corners on badge */
.achievement-badge::before,
.achievement-badge::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--brown);
}

.achievement-badge::before {
    top: -3px;
    left: -3px;
}

.achievement-badge::after {
    bottom: -3px;
    right: -3px;
}

.badge-icon {
    font-size: 1.6rem;
}

.highlight-name {
    font-size: 0.5rem;
    line-height: 1.6;
}

.highlight-desc {
    font-size: 0.85rem;
    line-height: 1.7;
    flex: 1;
}

.highlight-desc strong {
    color: var(--brown-dark);
    font-weight: 600;
}

.achievement-rarity {
    font-size: 0.45rem;
    padding: 4px 12px;
    border: 2px solid var(--brown);
    background: var(--beige-dark);
    opacity: 0.8;
}

/* ─── CONTACT TERMINAL ────────────────────────────────── */
.section-contact {
    padding-bottom: 60px;
}

.terminal-window {
    max-width: 700px;
    margin: 0 auto;
    overflow: hidden;
}

.terminal-header {
    background: var(--brown);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.terminal-dots {
    display: flex;
    gap: 6px;
}

.dot {
    width: 10px;
    height: 10px;
    border: 2px solid var(--beige);
    background: transparent;
}

.terminal-title {
    color: var(--beige);
    font-size: 0.5rem;
}

.terminal-body {
    padding: 24px;
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    line-height: 2.5;
}

.terminal-line {
    display: flex;
    gap: 8px;
    align-items: center;
}

.prompt {
    color: var(--brown);
    font-weight: bold;
}

.cmd {
    color: var(--brown);
}

.terminal-output {
    padding-left: 20px;
    margin-bottom: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.terminal-link {
    color: var(--brown);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    padding: 2px 0;
}

.terminal-link:hover {
    border-bottom-color: var(--brown);
    background: var(--brown-ghost);
}

.highlight-output {
    font-weight: 600;
    font-style: italic;
}

.terminal-cursor {
    font-size: 0.6rem;
}

/* ─── FOOTER ──────────────────────────────────────────── */
.pixel-footer {
    text-align: center;
    padding: 40px 24px;
    border-top: var(--border-w) solid var(--brown);
}

.footer-art {
    font-family: monospace;
    font-size: 0.5rem;
    color: var(--brown-light);
    opacity: 0.2;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.pixel-footer .pixel-text {
    font-size: 0.45rem;
    opacity: 0.6;
}

/* ─── SCROLL REVEAL ANIMATION ─────────────────────────── */
.pixel-card,
.timeline-card,
.highlight-card,
.stat-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.15s ease;
}

.pixel-card.revealed,
.timeline-card.revealed,
.highlight-card.revealed,
.stat-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered reveal */
.highlight-card:nth-child(2) { transition-delay: 0.1s; }
.highlight-card:nth-child(3) { transition-delay: 0.2s; }
.highlight-card:nth-child(4) { transition-delay: 0.3s; }
.highlight-card:nth-child(5) { transition-delay: 0.4s; }
.highlight-card:nth-child(6) { transition-delay: 0.5s; }

.stat-item:nth-child(2) { transition-delay: 0.1s; }
.stat-item:nth-child(3) { transition-delay: 0.2s; }
.stat-item:nth-child(4) { transition-delay: 0.3s; }

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 900px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .hero-cta {
        justify-content: center;
    }

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

    .about-stats {
        grid-template-columns: repeat(4, 1fr);
    }

    .skills-rpg {
        grid-template-columns: 1fr;
    }

    .highlights-grid {
        grid-template-columns: 1fr 1fr;
    }

    .timeline-card .card-header {
        flex-direction: column;
        gap: 8px;
    }

    .stat-name {
        min-width: 100px;
        font-size: 0.75rem;
    }
}

@media (max-width: 640px) {
    .nav-links {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

    .hero {
        padding-top: 80px;
    }

    .pixel-avatar {
        width: 140px;
        height: 170px;
    }

    .pixel-avatar::before,
    .pixel-avatar::after {
        width: 5px;
        height: 5px;
    }

    .section {
        padding: 60px 16px;
    }

    .about-stats {
        grid-template-columns: 1fr 1fr;
    }

    .highlights-grid {
        grid-template-columns: 1fr;
    }

    .timeline {
        padding-left: 30px;
    }

    .timeline-marker {
        left: -30px;
    }

    .timeline-card {
        padding: 20px;
    }

    .exp-list li {
        font-size: 0.85rem;
    }

    .stat-bar-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .stat-name {
        min-width: unset;
    }

    .stat-bar {
        width: 100%;
    }
}