/* ============================================
   RICHA KUMARI - PORTFOLIO
   Ultra-Modern Creative Design
   ============================================ */

/* ============================================
   COLOR PALETTE - CHANGE THESE TO TRY NEW COLORS!
   ============================================ */
:root {
    /* === MAIN COLORS - Edit these to change the theme === */
    --primary: #4D96FF;           /* Main brand color (buttons, links, accents) */
    --primary-dark: #6A0572;      /* Darker shade of primary */
    --primary-rgb: 77, 150, 255;  /* RGB values for rgba() usage */
    
    --secondary: #6BCB77;         /* Secondary/highlight color */
    --secondary-rgb: 107, 203, 119;
    
    --accent: #FF6B6B;            /* Accent color for contrast */
    --accent-rgb: 255, 107, 107;
    
    /* === BACKGROUND COLORS === */
    --bg-main: #FFFDF7;           /* Main page background (light cream) */
    --bg-alt: #FFF8E7;            /* Alternate section background */
    --bg-dark: #1a1a2e;           /* Dark sections (footer, code blocks) */
    --bg-card: rgba(255, 255, 255, 0.85);  /* Card backgrounds */
    
    /* === TEXT COLORS === */
    --text-dark: #2D3436;         /* Main text color */
    --text-light: #FFFDF7;        /* Light text (on dark bg) */
    --text-muted: #636E72;        /* Muted/gray text */
    --text-subtle: #B2BEC3;       /* Subtle text */
    
    /* === EXTRA COLORS FROM PALETTE === */
    --yellow: #FFD93D;            /* Yellow accent */
    
    /* === GRADIENTS (auto-generated from above) === */
    --gradient-1: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    --gradient-2: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg-main) 100%);
    --gradient-3: linear-gradient(135deg, var(--secondary) 0%, var(--bg-alt) 100%);
    --gradient-hero: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg-main) 100%);
    --text-gradient: linear-gradient(135deg, var(--primary), var(--accent));
    --gradient-contact: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    
    /* === SHADOWS === */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 40px rgba(var(--primary-rgb), 0.3);
    
    /* === TRANSITIONS === */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* === FONTS === */
    --font-primary: 'Syne', sans-serif;
    --font-secondary: 'Space Grotesk', sans-serif;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-secondary);
    background-color: var(--bg-main);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    max-width: 100vw;
}

::selection {
    background: var(--primary);
    color: var(--text-light);
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

/* Noise Overlay */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: transparent;
    transition: all var(--transition-normal);
}

.nav-container.scrolled {
    padding: 1rem 4rem;
    background: rgba(225, 212, 193, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-text {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 800;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-dot {
    width: 8px;
    height: 8px;
    background: var(--secondary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

.nav-links {
    display: flex;
    gap: 2.5rem;
}

.nav-link {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 0.5rem 0;
    transition: color var(--transition-fast);
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-1);
    transition: width var(--transition-normal);
}

.nav-link:hover::before,
.nav-link.active::before {
    width: 100%;
}

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

.nav-cta .hire-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: var(--gradient-1);
    color: #fff;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.3);
}

.nav-cta .hire-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--primary-rgb), 0.4);
}

.nav-cta .hire-btn i {
    transition: transform var(--transition-normal);
}

.nav-cta .hire-btn:hover i {
    transform: translateX(5px);
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 1001;
}

.hamburger span {
    width: 30px;
    height: 3px;
    background: var(--text-dark);
    transition: all var(--transition-normal);
    border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: right var(--transition-slow);
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

.mobile-link {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    font-weight: 700;
    transition: color var(--transition-fast);
}

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

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 5rem 2rem;
    overflow: hidden;
    max-width: 100vw;
    width: 100%;
    background: var(--light);
}

.hero-bg-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    animation: float 10s ease-in-out infinite;
    max-width: 100vw;
}

.shape-1 {
    width: min(500px, 70vw);
    height: min(500px, 70vw);
    background: var(--primary);
    top: -20%;
    right: -15%;
    animation-delay: 0s;
}

.shape-2 {
    width: min(350px, 50vw);
    height: min(350px, 50vw);
    background: var(--secondary);
    bottom: -10%;
    left: -10%;
    animation-delay: 3s;
}

.shape-3 {
    width: min(250px, 40vw);
    height: min(250px, 40vw);
    background: var(--accent);
    top: 50%;
    left: 20%;
    animation-delay: 6s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -30px) scale(1.05); }
}

/* Animated Grid Background */
.hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(var(--primary-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-rgb), 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
}

/* Glowing Lines */
.glow-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.glow-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--primary), transparent);
    opacity: 0.1;
    animation: glowMove 8s ease-in-out infinite;
}

.glow-line:nth-child(1) { left: 20%; animation-delay: 0s; }
.glow-line:nth-child(2) { left: 50%; animation-delay: 2s; }
.glow-line:nth-child(3) { left: 80%; animation-delay: 4s; }

@keyframes glowMove {
    0%, 100% { opacity: 0.05; transform: scaleY(0.5); }
    50% { opacity: 0.15; transform: scaleY(1); }
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    width: 100%;
    padding: 0;
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 50px;
    font-size: 0.8rem;
    color: var(--secondary);
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--secondary);
    border-radius: 50%;
    animation: pulse 2s ease infinite;
}

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

/* Creative Name Display */
.hero-name-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.name-decoration {
    font-size: 2.5rem;
    color: var(--secondary);
    opacity: 0.9;
    font-family: var(--font-secondary);
    font-weight: 300;
}

.name-decoration.left { animation: fadeSlideRight 1s ease forwards; opacity: 0; }
.name-decoration.right { animation: fadeSlideLeft 1s ease forwards; opacity: 0; }

@keyframes fadeSlideRight {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 0.9; transform: translateX(0); }
}

@keyframes fadeSlideLeft {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 0.9; transform: translateX(0); }
}

.deco-bracket {
    display: inline-block;
    text-shadow: 0 0 10px rgba(107, 203, 119, 0.5);
}

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

.greeting {
    font-size: clamp(0.85rem, 2vw, 1rem);
    color: var(--gray-light);
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
    opacity: 0;
    animation: fadeIn 0.8s ease 0.2s forwards;
}

.name {
    font-family: var(--font-primary);
    font-size: clamp(1.8rem, 6vw, 3.5rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--bg-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1.2;
    opacity: 0;
    animation: fadeIn 0.8s ease 0.3s forwards;
}

/* Role with Code Style */
.hero-role {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

.role-prefix, .role-suffix {
    color: var(--primary);
    opacity: 0.7;
}

.role-text {
    color: var(--secondary);
    font-weight: 500;
}

.cursor-blink {
    color: var(--primary);
    animation: blink 1s step-end infinite;
}

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

/* Tagline */
.hero-tagline {
    font-size: clamp(0.85rem, 2vw, 1rem);
    color: var(--gray-light);
    max-width: 500px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

.highlight-text {
    color: var(--light);
    font-weight: 500;
}

/* Tech Stack Pills */
.tech-stack {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

.tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--gray-light);
    transition: all var(--transition-fast);
}

.tech-pill:hover {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: var(--primary);
    color: var(--light);
    transform: translateY(-2px);
}

.tech-pill i {
    color: var(--primary);
}

/* Stats Grid */
.hero-stats-grid {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: rgba(var(--accent-rgb), 0.05);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    border-radius: 12px;
    min-width: 80px;
    transition: all var(--transition-normal);
}

.stat-card:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
    transform: translateY(-3px);
}

.stat-value {
    font-family: var(--font-primary);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--dark);
    line-height: 1;
}

.stat-plus {
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 600;
}

.stat-text {
    font-size: 0.65rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

/* Hero Actions */
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--gradient-1);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--primary-rgb), 0.4);
}

.btn-primary i {
    transition: transform var(--transition-fast);
}

.btn-primary:hover i {
    transform: translateX(3px);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--dark);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all var(--transition-normal);
}

.btn-outline:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

/* Hero Socials */
.hero-socials {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

.social-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.05);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 10px;
    color: var(--dark);
    font-size: 1rem;
    transition: all var(--transition-normal);
}

.social-icon:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

/* Scroll Hint */
.scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0;
    animation: fadeIn 1s ease 1.5s forwards;
}

.scroll-arrow {
    animation: scrollBounce 2s ease infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Hero Social - Desktop sidebar */
.hero-social {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Hero Social - Inline for mobile */
.hero-social-inline {
    display: none;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

.social-link {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 1.1rem;
    transition: all var(--transition-normal);
}

.social-link:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.3);
}

/* ============================================
   SECTION COMMON STYLES
   ============================================ */
.section-header {
    margin-bottom: 4rem;
    text-align: center;
}

.section-header.light .section-number,
.section-header.light .section-title {
    color: var(--light);
}

.section-number {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.section-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, var(--gray-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about-section {
    padding: 8rem 4rem;
    background: var(--bg-alt);
    position: relative;
    overflow: hidden;
}

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
}

.about-visual {
    position: relative;
}

.visual-frame {
    position: relative;
    padding: 2rem;
}

.frame-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 20px;
    transform: rotate(-3deg);
}

.visual-content {
    position: relative;
    z-index: 1;
}

.code-window {
    background: var(--bg-dark);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.window-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

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

.file-name {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--bg-main);
}

.code-content {
    padding: 1.5rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #e0e0e0;
}

.code-content code {
    color: #e0e0e0;
}

.code-content .keyword { color: #c792ea; }
.code-content .variable { color: #82aaff; }
.code-content .property { color: #f78c6c; }
.code-content .string { color: #c3e88d; }
.code-content .boolean { color: #ffcb6b; }

.visual-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.deco-circle {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 2px dashed rgba(var(--primary-rgb), 0.3);
    border-radius: 50%;
    top: -50px;
    right: -50px;
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    to { transform: rotate(360deg); }
}

.deco-dots {
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 80px;
    height: 80px;
    background-image: radial-gradient(var(--primary) 2px, transparent 2px);
    background-size: 15px 15px;
    opacity: 0.5;
}

.about-content {
    position: relative;
}

.about-text {
    margin-bottom: 3rem;
}

.lead-text {
    font-size: 1.4rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: var(--light);
}

.text-gradient {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

.about-text p {
    font-size: 1.05rem;
    color: var(--gray-light);
    margin-bottom: 1rem;
}

.about-highlights {
    display: grid;
    gap: 1.5rem;
}

.highlight-card {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    border-radius: 15px;
    transition: all var(--transition-normal);
}

.highlight-card:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
    transform: translateX(10px);
}

.card-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border-radius: 15px;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.card-content p {
    font-size: 0.95rem;
    color: var(--gray-light);
}

.card-meta {
    font-size: 0.8rem;
    color: var(--gray);
}

/* ============================================
   SKILLS SECTION
   ============================================ */
.skills-section {
    padding: 8rem 4rem;
    background: var(--light);
    position: relative;
    overflow: hidden;
    max-width: 100vw;
}

.skills-showcase {
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
    overflow: hidden;
}

.skills-orbit {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 400px;
    margin: 0 auto;
    overflow: visible;
}

.orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: var(--gradient-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-glow);
    z-index: 2;
}

.center-text {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.2rem;
}

.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(var(--primary-rgb), 0.3);
    border-radius: 50%;
}

.ring-1 {
    width: 250px;
    height: 250px;
    animation: orbitRotate 30s linear infinite;
}

.ring-2 {
    width: 370px;
    height: 370px;
    animation: orbitRotate 45s linear infinite reverse;
}

@keyframes orbitRotate {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.skill-planet {
    position: absolute;
    width: 55px;
    height: 55px;
    background: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(125px) rotate(calc(-1 * var(--angle)));
    transition: all var(--transition-normal);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(77, 150, 255, 0.3);
}

.skill-planet.small {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(185px) rotate(calc(-1 * var(--angle)));
}

.skill-planet:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(125px) rotate(calc(-1 * var(--angle))) scale(1.2);
    box-shadow: 0 6px 20px rgba(107, 203, 119, 0.4);
}

.skill-planet.small:hover {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(185px) rotate(calc(-1 * var(--angle))) scale(1.2);
}

.skill-letter {
    font-family: var(--font-primary);
    font-weight: 700;
}

.skills-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.skill-category {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    border-radius: 20px;
    transition: all var(--transition-normal);
}

.skill-category:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
}

.category-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.cat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border-radius: 10px;
    font-size: 1rem;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.skill-tag {
    padding: 0.5rem 1rem;
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.skill-tag:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

/* Three Column Skills Cards */
.skills-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
}

/* ============================================
   TERMINAL + HEXAGON SKILLS LAYOUT
   ============================================ */
.skills-terminal-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    width: 100%;
    max-width: 950px;
    align-items: start;
}

/* Terminal Window */
.terminal-window {
    background: #0d1117;
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Fira Code', 'SF Mono', 'Consolas', monospace;
    border: 1px solid #30363d;
}

.terminal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #161b22;
    border-bottom: 1px solid #30363d;
}

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

.terminal-buttons span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #30363d;
}

.terminal-buttons span:nth-child(1) { background: #ff5f56; }
.terminal-buttons span:nth-child(2) { background: #ffbd2e; }
.terminal-buttons span:nth-child(3) { background: #27ca40; }

.terminal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #8b949e;
}

.terminal-title i {
    color: #58a6ff;
}

.terminal-body {
    padding: 1rem;
}

.terminal-line {
    font-size: 0.8rem;
    padding: 0.2rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.terminal-line .user { color: #7ee787; }
.terminal-line .at { color: #8b949e; }
.terminal-line .host { color: #79c0ff; }
.terminal-line .colon { color: #8b949e; }
.terminal-line .path { color: #a371f7; }
.terminal-line .dollar { color: #8b949e; margin-right: 0.5rem; }
.terminal-line .command { color: #f0f6fc; }
.terminal-line .success { color: #3fb950; margin-right: 0.5rem; }
.terminal-line .highlight { color: #ffa657; }
.terminal-line.output { color: #8b949e; }
.terminal-line.success-msg { color: #8b949e; margin-top: 0.5rem; }

.cursor {
    color: #58a6ff;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Typing animation */
.typing {
    overflow: hidden;
    white-space: nowrap;
    animation: typing 1.5s steps(25) forwards;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* Package Install Rows */
.package-install {
    padding: 0.5rem 0;
    opacity: 0;
    animation: fadeSlideIn 0.4s ease forwards;
    animation-delay: calc(var(--delay, 0) * 0.15s);
}

.package-install[data-delay="1"] { animation-delay: 0.3s; }
.package-install[data-delay="2"] { animation-delay: 0.5s; }
.package-install[data-delay="3"] { animation-delay: 0.7s; }
.package-install[data-delay="4"] { animation-delay: 0.9s; }
.package-install[data-delay="5"] { animation-delay: 1.1s; }

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.package-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: rgba(88, 166, 255, 0.05);
    border-radius: 6px;
    border-left: 2px solid transparent;
    transition: all 0.3s ease;
}

.package-row:hover {
    background: rgba(88, 166, 255, 0.1);
    border-left-color: var(--primary);
}

.package-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.package-icon.react-color { color: #61dafb; }
.package-icon.next-color { color: #fff; font-weight: bold; font-size: 1rem; }
.package-icon.ts-color { color: #3178c6; font-weight: bold; font-size: 0.7rem; }
.package-icon.js-color { color: #f7df1e; }
.package-icon.html-color { color: #e34f26; }

.package-name {
    font-size: 0.8rem;
    color: #f0f6fc;
    min-width: 80px;
}

.package-version {
    font-size: 0.7rem;
    color: #7ee787;
    min-width: 60px;
}

.package-bar {
    flex: 1;
    height: 6px;
    background: #21262d;
    border-radius: 3px;
    overflow: hidden;
    min-width: 80px;
    position: relative;
}

.package-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 4px,
        rgba(255,255,255,0.03) 4px,
        rgba(255,255,255,0.03) 8px
    );
    z-index: 1;
}

.package-bar .fill {
    height: 100%;
    width: var(--fill);
    background: linear-gradient(90deg, #58a6ff, #3fb950);
    border-radius: 3px;
    animation: fillBar 1.5s ease forwards;
    animation-delay: inherit;
    position: relative;
}

.package-bar .fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
    animation: shimmer 2s ease-in-out infinite;
}

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

@keyframes fillBar {
    from { width: 0; }
    to { width: var(--fill); }
}

.bar-percent {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    font-weight: 700;
    color: #f0f6fc;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.package-status {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.package-status.expert {
    background: rgba(63, 185, 80, 0.2);
    color: #3fb950;
}

.package-status.advanced {
    background: rgba(136, 146, 157, 0.2);
    color: #8b949e;
}

/* Hexagonal Grid */
.hex-tools-container {
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 16px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.hex-tools-container::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.hex-title {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
    position: relative;
}

.hex-label {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.hex-subtitle {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.hex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    position: relative;
}

.hex-item {
    width: 55px;
    height: 60px;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hex-item:hover {
    transform: translateY(-8px) scale(1.1);
    z-index: 10;
}

.hex-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--hex-color) 0%, color-mix(in srgb, var(--hex-color) 80%, black) 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    position: relative;
}

.hex-inner::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: inherit;
    clip-path: inherit;
    opacity: 0;
    transition: opacity 0.3s;
}

.hex-item:hover .hex-inner {
    box-shadow: 0 10px 30px color-mix(in srgb, var(--hex-color) 50%, transparent);
}

.hex-inner svg {
    width: 22px;
    height: 22px;
}

.hex-tooltip {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s;
}

.hex-item:hover .hex-tooltip {
    opacity: 1;
    bottom: -25px;
}

.hex-status {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(var(--primary-rgb), 0.2);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

.status-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.status-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
    animation: statusPulse 2s ease-in-out infinite;
}

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

.hex-status span {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
}

/* Responsive Terminal Layout */
@media (max-width: 900px) {
    .skills-terminal-layout {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .terminal-body {
        padding: 0.75rem;
    }
    
    .package-row {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    
    .package-bar {
        width: 100%;
        order: 5;
    }
    
    .package-version {
        min-width: auto;
    }
    
    .hex-item {
        width: 48px;
        height: 52px;
    }
    
    .hex-inner {
        font-size: 1.1rem;
    }
}

/* ============================================
   CREATIVE SKILLS LAYOUT - CODE EDITOR STYLE
   ============================================ */
.skills-creative-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2rem;
    width: 100%;
    max-width: 950px;
    align-items: start;
}

/* Code Editor Card */
.code-editor-card {
    background: #1e1e2e;
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Fira Code', 'Consolas', monospace;
}

.editor-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #181825;
    border-bottom: 1px solid #313244;
}

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

.editor-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.editor-dots .dot.red { background: #f38ba8; }
.editor-dots .dot.yellow { background: #f9e2af; }
.editor-dots .dot.green { background: #a6e3a1; }

.editor-title {
    font-size: 0.75rem;
    color: #6c7086;
    flex: 1;
}

.editor-tabs {
    display: flex;
    gap: 0.5rem;
}

.editor-tabs .tab {
    padding: 0.25rem 0.75rem;
    background: #1e1e2e;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #cdd6f4;
}

.editor-tabs .tab.active {
    background: var(--primary);
    color: #fff;
}

.editor-body {
    padding: 1rem 0;
}

.code-line, .skill-code-item {
    display: flex;
    align-items: flex-start;
    padding: 0.2rem 1rem;
    transition: background 0.2s;
}

.skill-code-item:hover {
    background: rgba(var(--primary-rgb), 0.1);
}

.line-number {
    width: 24px;
    color: #45475a;
    font-size: 0.7rem;
    user-select: none;
    flex-shrink: 0;
}

.code, .code-skill {
    font-size: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
}

.keyword { color: #cba6f7; }
.variable { color: #89b4fa; }
.bracket { color: #fab387; }
.prop { color: #f38ba8; }
.string { color: #a6e3a1; }
.number { color: #f9e2af; }

/* Glowing Skill Bar */
.skill-glow-bar {
    width: 100%;
    height: 3px;
    background: #313244;
    border-radius: 2px;
    margin-top: 0.4rem;
    overflow: hidden;
    position: relative;
}

.glow-progress {
    height: 100%;
    width: var(--w);
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 2px;
    position: relative;
    animation: glowPulse 2s ease-in-out infinite, progressSlide 1s ease-out forwards;
    transform-origin: left;
}

@keyframes progressSlide {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary); }
    50% { box-shadow: 0 0 15px var(--primary), 0 0 25px var(--secondary); }
}

/* Bento Grid Tools */
.tools-bento {
    background: linear-gradient(135deg, rgba(var(--secondary-rgb), 0.05) 0%, rgba(var(--primary-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 12px;
    padding: 1.25rem;
}

.bento-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.bento-title i {
    color: var(--secondary);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 0.5rem;
}

.bento-item {
    background: #fff;
    border-radius: 10px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.bento-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.8) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.bento-item:hover::before {
    opacity: 1;
}

.bento-item:hover {
    transform: translateY(-4px) scale(1.02);
}

.bento-item.large {
    grid-column: span 2;
}

.bento-item.tall {
    grid-row: span 2;
}

.bento-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    position: relative;
    z-index: 1;
}

.bento-icon svg {
    width: 20px;
    height: 20px;
}

/* Glowing Icons */
.redux-glow {
    background: linear-gradient(135deg, #764ABC, #5a3d8c);
    box-shadow: 0 4px 15px rgba(118, 74, 188, 0.4);
}

.tailwind-glow {
    background: linear-gradient(135deg, #38BDF8, #0EA5E9);
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}

.git-glow {
    background: linear-gradient(135deg, #F05032, #c73e25);
    box-shadow: 0 4px 15px rgba(240, 80, 50, 0.4);
}

.figma-glow {
    background: linear-gradient(135deg, #F24E1E, #A259FF, #0ACF83);
    box-shadow: 0 4px 15px rgba(162, 89, 255, 0.4);
}

.sass-glow {
    background: linear-gradient(135deg, #CC6699, #a84d7a);
    box-shadow: 0 4px 15px rgba(204, 102, 153, 0.4);
}

.api-glow {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.4);
}

.bento-item span:not(.bento-icon) {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-dark);
    position: relative;
    z-index: 1;
}

.bento-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(var(--primary-rgb), 0.2);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--secondary);
    border-radius: 50%;
    animation: pulse 2s ease infinite;
}

/* Responsive Creative Layout */
@media (max-width: 900px) {
    .skills-creative-layout {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .code-editor-card {
        order: 1;
    }
    
    .tools-bento {
        order: 2;
    }
}

@media (max-width: 480px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bento-item.large {
        grid-column: span 2;
    }
    
    .bento-item.tall {
        grid-row: span 1;
    }
    
    .code, .code-skill {
        font-size: 0.65rem;
    }
    
    .skill-glow-bar {
        margin-top: 0.25rem;
    }
}

/* ============================================
   TWO-COLUMN SKILLS LAYOUT (Legacy)
   ============================================ */
.skills-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
    max-width: 900px;
}

.skills-column {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.skills-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.skills-column:hover::before {
    opacity: 1;
}

.skills-column:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
}

.column-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(var(--primary-rgb), 0.1);
}

.column-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.column-icon.secondary-icon {
    background: linear-gradient(135deg, var(--secondary) 0%, #38b000 100%);
    box-shadow: 0 8px 24px rgba(var(--secondary-rgb), 0.3);
}

.column-info h3 {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.15rem;
}

.column-info p {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Skill Items with Progress Bars */
.skill-items {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(var(--primary-rgb), 0.03);
    border-radius: 10px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.skill-item:hover {
    background: rgba(var(--primary-rgb), 0.08);
    border-color: rgba(var(--primary-rgb), 0.15);
    transform: translateX(4px);
}

.skill-item.featured {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08) 0%, rgba(var(--secondary-rgb), 0.08) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
}

.skill-item.featured:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12) 0%, rgba(var(--secondary-rgb), 0.12) 100%);
}

.skill-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.skill-icon svg {
    width: 16px;
    height: 16px;
}

/* Icon Colors */
.react-icon {
    background: linear-gradient(135deg, #61DAFB 0%, #21a1c9 100%);
    color: #fff;
}

.react-icon i {
    animation: spin 8s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.nextjs-icon {
    background: linear-gradient(135deg, #000 0%, #333 100%);
    color: #fff;
}

.ts-icon {
    background: linear-gradient(135deg, #3178C6 0%, #235a9e 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

.js-icon {
    background: linear-gradient(135deg, #F7DF1E 0%, #d4bf00 100%);
    color: #000;
}

.html-icon {
    background: linear-gradient(135deg, #E34F26 0%, #F06529 100%);
    color: #fff;
}

.skill-details {
    flex: 1;
    min-width: 0;
}

.skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.skill-details .skill-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-dark);
}

.skill-level {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 20px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

.skill-bar {
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.skill-progress {
    height: 100%;
    width: var(--progress);
    background: var(--gradient-1);
    border-radius: 10px;
    position: relative;
    animation: progressFill 1.5s ease-out forwards;
    transform-origin: left;
}

@keyframes progressFill {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* Tools Grid */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.5rem;
    background: rgba(var(--secondary-rgb), 0.05);
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.tool-card:hover {
    background: rgba(var(--secondary-rgb), 0.12);
    border-color: rgba(var(--secondary-rgb), 0.2);
    transform: translateY(-4px);
}

.tool-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.tool-card:hover .tool-icon {
    transform: scale(1.1);
}

.tool-icon svg {
    width: 16px;
    height: 16px;
}

/* Tool Icon Colors */
.redux-icon {
    background: linear-gradient(135deg, #764ABC 0%, #5a3d8c 100%);
    color: #fff;
}

.tailwind-icon {
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%);
    color: #fff;
}

.git-icon {
    background: linear-gradient(135deg, #F05032 0%, #c73e25 100%);
    color: #fff;
}

.figma-icon {
    background: linear-gradient(135deg, #F24E1E 0%, #A259FF 50%, #0ACF83 100%);
    color: #fff;
}

.sass-icon {
    background: linear-gradient(135deg, #CC6699 0%, #a84d7a 100%);
    color: #fff;
}

.responsive-icon {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
}

.api-icon {
    background: linear-gradient(135deg, #00C7B7 0%, #00a89a 100%);
    color: #fff;
}

.testing-icon {
    background: linear-gradient(135deg, #E535AB 0%, #b82a8a 100%);
    color: #fff;
}

.tool-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* Skills Highlight Banner */
.skills-highlight {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08) 0%, rgba(var(--secondary-rgb), 0.08) 100%);
    border-radius: 10px;
    padding: 0.75rem;
    border: 1px dashed rgba(var(--primary-rgb), 0.3);
}

.highlight-content {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-dark);
    line-height: 1.4;
}

.highlight-content i {
    color: var(--primary);
    font-size: 0.8rem;
    margin-top: 0.1rem;
}

.highlight-content strong {
    color: var(--primary);
    font-weight: 600;
}

/* Responsive Two-Column Layout */
@media (max-width: 992px) {
    .skills-two-column {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        max-width: 450px;
        margin: 0 auto;
    }
    
    .skills-column {
        padding: 1.25rem;
    }
}

@media (max-width: 600px) {
    .skills-column {
        padding: 1rem;
    }
    
    .column-header {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .tools-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .skill-item {
        padding: 0.5rem;
    }
    
    .skill-icon {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
    
    .tool-icon {
        width: 28px;
        height: 28px;
    }
}

.skill-card {
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.skill-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid;
}

/* Frontend - Blue Theme */
.frontend-card .card-header {
    border-color: var(--primary);
}

.frontend-card .card-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #4D96FF 0%, #6BCB77 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
}

.frontend-card .skill-dots .dot.filled {
    background: var(--primary);
}

/* Backend - Green Theme */
.backend-card .card-header {
    border-color: var(--secondary);
}

.backend-card .card-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #6BCB77 0%, #38b000 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
}

.backend-card .skill-dots .dot.filled {
    background: var(--secondary);
}

/* Tools - Coral/Orange Theme */
.tools-card .card-header {
    border-color: var(--accent);
}

.tools-card .card-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FF6B6B 0%, #FFD93D 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
}

.tools-card .skill-dots .dot.filled {
    background: var(--accent);
}

.card-title {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.skills-meter-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skill-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.skill-row .skill-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 80px;
}

.skill-dots {
    display: flex;
    gap: 4px;
    flex: 1;
}

.skill-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.skill-num {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 20px;
    text-align: right;
}

/* Responsive */
@media (max-width: 992px) {
    .skills-cards-row {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .skill-card {
        padding: 1.5rem;
    }
    
    .skill-row .skill-name {
        min-width: 65px;
        font-size: 0.8rem;
    }
    
    .skill-dots .dot {
        width: 10px;
        height: 10px;
    }
}

/* ============================================
   EXPERIENCE SECTION
   ============================================ */
.experience-section {
    padding: 8rem 4rem;
    background: var(--bg-alt);
    position: relative;
}

.timeline-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.timeline-line {
    position: absolute;
    left: 30px;
    top: 0;
    width: 2px;
    height: 100%;
    background: rgba(var(--primary-rgb), 0.2);
}

.timeline-progress {
    width: 100%;
    height: 0%;
    background: var(--gradient-1);
    transition: height 0.5s ease;
}

.timeline-item {
    position: relative;
    padding-left: 80px;
    padding-bottom: 4rem;
}

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

.timeline-marker {
    position: absolute;
    left: 20px;
    top: 5px;
}

.marker-dot {
    width: 22px;
    height: 22px;
    background: var(--bg-alt);
    border: 3px solid var(--primary);
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.marker-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    animation: pulsate 2s ease infinite;
    opacity: 0;
}

@keyframes pulsate {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.timeline-content {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    border-radius: 20px;
    padding: 2rem;
    transition: all var(--transition-normal);
}

.timeline-content:hover {
    border-color: var(--primary);
    transform: translateX(10px);
    box-shadow: var(--shadow-glow);
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.company-name {
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.role-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: var(--primary);
    color: #fff;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.timeline-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray);
    font-size: 0.9rem;
}

.timeline-date i {
    color: var(--primary);
}

.achievement-list {
    list-style: none;
}

.achievement-list li {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.achievement-list li:last-child {
    margin-bottom: 0;
}

.achievement-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 10px;
    color: var(--primary);
    flex-shrink: 0;
}

.achievement-list p {
    font-size: 0.95rem;
    color: var(--gray-light);
    line-height: 1.6;
}

.achievement-list strong {
    color: var(--light);
}

.timeline-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.timeline-tech span {
    padding: 0.35rem 0.85rem;
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 15px;
    font-size: 0.8rem;
    color: var(--secondary);
}

/* ============================================
   PROJECTS SECTION
   ============================================ */
.projects-section {
    padding: 8rem 4rem;
    background: var(--light);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.project-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    border-radius: 25px;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.project-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.project-card.featured {
    grid-column: span 2;
}

.project-visual {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.project-card.featured .project-visual {
    height: 250px;
}

.project-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--gradient-hero);
}

/* Project Screenshot Image */
.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}

.project-card:hover .project-image {
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
}

.preview-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--gradient-hero);
    opacity: 0.8;
}

.preview-gradient.gradient-2 { background: var(--gradient-2); }
.preview-gradient.gradient-3 { background: var(--gradient-3); }
.preview-gradient.gradient-4 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.preview-gradient.gradient-5 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.preview-gradient.gradient-6 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

.project-icon {
    position: relative;
    z-index: 1;
    font-size: 3rem;
    color: var(--light);
    opacity: 0.9;
    transition: opacity var(--transition-normal);
}

.project-card:hover .project-icon {
    opacity: 0;
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 15, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-normal);
    z-index: 2;
}

.project-card:hover .project-overlay {
    opacity: 1;
}

.project-link {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    font-size: 1.2rem;
    transition: all var(--transition-normal);
}

.project-link:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-glow);
}

.project-info {
    padding: 1.75rem;
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.project-title {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 700;
}

.project-type {
    padding: 0.3rem 0.75rem;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
}

.project-description {
    font-size: 0.9rem;
    color: var(--gray-light);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.project-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-stack span {
    padding: 0.35rem 0.75rem;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--secondary);
}

/* ============================================
   CONTACT SECTION
   ============================================ */
.contact-section {
    padding: 8rem 4rem;
    background: linear-gradient(135deg, #4D96FF 0%, #6BCB77 50%, #4D96FF 100%);
    position: relative;
    overflow: hidden;
}

.contact-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.contact-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.contact-shape.shape-1 {
    width: 500px;
    height: 500px;
    top: -200px;
    right: -100px;
}

.contact-shape.shape-2 {
    width: 300px;
    height: 300px;
    bottom: -100px;
    left: -50px;
}

.contact-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: center;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-card {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    transition: all var(--transition-normal);
}

.info-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(10px);
}

.info-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.info-content h4 {
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 0.25rem;
}

.info-content a,
.info-content span {
    font-size: 1.05rem;
    font-weight: 600;
}

.contact-cta {
    text-align: center;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.contact-cta h3 {
    font-family: var(--font-primary);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.contact-cta p {
    font-size: 1rem;
    opacity: 0.9;
    max-width: 500px;
    margin: 0 auto 2rem;
}

.cta-buttons {
    margin-bottom: 2rem;
}

.cta-main {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #FF6B6B 0%, #FFD93D 100%);
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    transition: all var(--transition-normal);
    box-shadow: 0 10px 40px rgba(255, 107, 107, 0.4);
}

.cta-main:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 50px rgba(255, 107, 107, 0.5);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.social-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-normal);
}

.social-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    padding: 4rem;
    background: var(--bg-dark);
    text-align: center;
    position: relative;
}

.footer-logo {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 auto 1.5rem;
    color: #fff;
}

.footer-text {
    font-size: 0.95rem;
    color: var(--bg-main);
    margin-bottom: 0.5rem;
}

.footer-copyright {
    font-size: 0.85rem;
    color: var(--secondary);
}

.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: 100;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-glow);
}

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */
.reveal-text,
.reveal-up,
.reveal-text-block,
.reveal-card,
.reveal-skill,
.reveal-timeline,
.reveal-project,
.reveal-contact {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-text.revealed,
.reveal-up.revealed,
.reveal-text-block.revealed,
.reveal-card.revealed,
.reveal-skill.revealed,
.reveal-timeline.revealed,
.reveal-project.revealed,
.reveal-contact.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered reveal for cards */
.reveal-card:nth-child(1) { transition-delay: 0.1s; }
.reveal-card:nth-child(2) { transition-delay: 0.2s; }

.reveal-skill:nth-child(1) { transition-delay: 0.1s; }
.reveal-skill:nth-child(2) { transition-delay: 0.2s; }
.reveal-skill:nth-child(3) { transition-delay: 0.3s; }

.reveal-project:nth-child(1) { transition-delay: 0.1s; }
.reveal-project:nth-child(2) { transition-delay: 0.2s; }
.reveal-project:nth-child(3) { transition-delay: 0.3s; }
.reveal-project:nth-child(4) { transition-delay: 0.4s; }
.reveal-project:nth-child(5) { transition-delay: 0.5s; }
.reveal-project:nth-child(6) { transition-delay: 0.6s; }

.reveal-contact:nth-child(1) { transition-delay: 0.1s; }
.reveal-contact:nth-child(2) { transition-delay: 0.2s; }
.reveal-contact:nth-child(3) { transition-delay: 0.3s; }

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
/* ============================================
   RESPONSIVE DESIGN - TABLET & DESKTOP
   ============================================ */
@media (max-width: 1200px) {
    .about-container,
    .skills-showcase,
    .contact-container {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    
    .skills-orbit {
        transform: scale(0.85);
        max-width: 100%;
        overflow: hidden;
    }
    
    .project-card.featured {
        grid-column: span 1;
    }
    
    .hero-social {
        left: 2rem;
    }
    
    .about-visual {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .skills-orbit {
        margin-bottom: 2rem;
    }
    
    .contact-info {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .info-card {
        flex: 1;
        min-width: 250px;
    }
}

/* ============================================
   RESPONSIVE DESIGN - TABLET
   ============================================ */
@media (max-width: 992px) {
    .hero-section {
        padding: 80px 1rem 2rem;
        min-height: auto;
        height: auto;
    }
    
    .hero-content {
        padding: 0;
    }
    
    /* Hide desktop sidebar social */
    .hero-social {
        display: none;
    }
    
    .scroll-hint {
        display: none;
    }
    
    .hero-grid {
        background-size: 40px 40px;
    }
    
    .glow-lines {
        display: none;
    }
    
    .name-decoration {
        font-size: 2rem;
    }
    
    .hero-stats-grid {
        gap: 0.75rem;
    }
    
    .stat-card {
        padding: 0.6rem 1rem;
        min-width: 70px;
    }
    
    .nav-container {
        padding: 1rem 1.5rem;
        background: rgba(255, 253, 247, 0.95);
        backdrop-filter: blur(10px);
    }
    
    .nav-links,
    .nav-cta {
        display: none;
    }
    
    .hamburger {
        display: flex;
    }
    
    .about-section,
    .skills-section,
    .experience-section,
    .projects-section,
    .contact-section {
        padding: 5rem 1.5rem;
    }
    
    .section-header {
        margin-bottom: 3rem;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
    
    .scroll-indicator {
        display: none;
    }
    
    .hero-content {
        max-width: 100%;
    }
    
    .about-text {
        text-align: center;
    }
    
    .lead-text {
        font-size: 1.2rem;
    }
    
    .code-window {
        font-size: 0.85rem;
    }
    
    .code-content {
        padding: 1rem;
        overflow-x: auto;
    }
    
    .timeline-container {
        max-width: 100%;
    }
    
    .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .contact-container {
        gap: 3rem;
    }
    
    .contact-info {
        flex-direction: column;
    }
    
    .info-card {
        width: 100%;
    }
    
    .footer {
        padding: 3rem 1.5rem;
    }
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE LANDSCAPE & SMALL TABLETS
   ============================================ */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    .hero-section {
        padding: 80px 1rem 2rem;
        min-height: auto;
    }
    
    /* Hero Section Tablet/Small */
    .status-badge {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
    
    .hero-name-wrapper {
        gap: 0.75rem;
    }
    
    .name-decoration {
        font-size: 2rem;
    }
    
    .greeting {
        font-size: 0.85rem;
    }
    
    .name {
        font-size: 2.25rem;
    }
    
    .hero-role {
        font-size: 0.9rem;
    }
    
    .hero-tagline {
        font-size: 0.9rem;
    }
    
    .tech-stack {
        gap: 0.5rem;
    }
    
    .tech-pill {
        padding: 0.35rem 0.75rem;
        font-size: 0.7rem;
    }
    
    .hero-stats-grid {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .stat-card {
        padding: 0.75rem 1rem;
        min-width: 80px;
    }
    
    .stat-value {
        font-size: 1.4rem;
    }
    
    .stat-text {
        font-size: 0.65rem;
    }
    
    .hero-actions {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }
    
    .btn-primary,
    .btn-outline {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .skills-orbit {
        transform: scale(0.65);
        height: 280px;
        max-width: 100%;
        overflow: hidden;
    }
    
    .skills-list {
        gap: 1.5rem;
    }
    
    .skill-category {
        padding: 1.5rem;
    }
    
    .skill-tags {
        justify-content: center;
    }
    
    .timeline-item {
        padding-left: 50px;
        padding-bottom: 3rem;
    }
    
    .timeline-line {
        left: 15px;
    }
    
    .timeline-marker {
        left: 5px;
    }
    
    .marker-dot {
        width: 18px;
        height: 18px;
    }
    
    .timeline-content {
        padding: 1.5rem;
    }
    
    .company-name {
        font-size: 1.2rem;
    }
    
    .achievement-list li {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .achievement-icon {
        align-self: flex-start;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .project-visual {
        height: 180px;
    }
    
    .project-info {
        padding: 1.5rem;
    }
    
    .project-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .contact-cta {
        padding: 2rem 1.5rem;
    }
    
    .contact-cta h3 {
        font-size: 1.4rem;
    }
    
    .contact-cta p {
        font-size: 0.9rem;
    }
    
    .cta-main {
        padding: 0.875rem 2rem;
        font-size: 0.9rem;
    }
    
    .social-links {
        gap: 0.75rem;
    }
    
    .social-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    
    .back-to-top {
        width: 45px;
        height: 45px;
        bottom: 1.5rem;
        right: 1.5rem;
    }
    
    .floating-elements {
        display: none;
    }
    
    .shape-1 {
        width: 400px;
        height: 400px;
    }
    
    .shape-2 {
        width: 300px;
        height: 300px;
    }
    
    .shape-3 {
        width: 200px;
        height: 200px;
    }
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE PORTRAIT
   ============================================ */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    
    .nav-container {
        padding: 1rem;
    }
    
    .logo-text {
        font-size: 1.5rem;
    }
    
    /* Hero Section Mobile */
    .hero-section {
        padding: 5rem 1rem 2rem;
        min-height: auto;
        height: auto;
        padding-top: 80px;
    }
    
    .hero-grid {
        background-size: 30px 30px;
        opacity: 0.5;
    }
    
    .status-badge {
        padding: 0.4rem 0.8rem;
        font-size: 0.7rem;
        margin-bottom: 1rem;
    }
    
    .status-dot {
        width: 6px;
        height: 6px;
    }
    
    .hero-name-wrapper {
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }
    
    .name-decoration {
        font-size: 1.5rem;
    }
    
    .greeting {
        font-size: 0.75rem;
    }
    
    .name {
        font-size: 1.6rem;
    }
    
    .hero-role {
        font-size: 0.8rem;
        margin-bottom: 1rem;
        gap: 0.3rem;
    }
    
    .hero-tagline {
        font-size: 0.8rem;
        margin-bottom: 1rem;
        line-height: 1.5;
    }
    
    .tech-stack {
        gap: 0.4rem;
        margin-bottom: 1rem;
    }
    
    .tech-pill {
        padding: 0.25rem 0.6rem;
        font-size: 0.65rem;
    }
    
    .hero-stats-grid {
        gap: 0.5rem;
        margin-bottom: 1.25rem;
    }
    
    .stat-card {
        padding: 0.5rem 0.75rem;
        min-width: 60px;
        border-radius: 10px;
    }
    
    .stat-value {
        font-size: 1.1rem;
    }
    
    .stat-plus {
        font-size: 0.75rem;
    }
    
    .stat-text {
        font-size: 0.55rem;
    }
    
    .hero-actions {
        flex-direction: column;
        gap: 0.6rem;
        margin-bottom: 1.25rem;
        width: 100%;
        max-width: 250px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .btn-primary,
    .btn-outline {
        width: 100%;
        justify-content: center;
        padding: 0.7rem 1.25rem;
        font-size: 0.85rem;
    }
    
    .hero-socials {
        gap: 0.6rem;
    }
    
    .social-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        border-radius: 8px;
    }
    
    .scroll-hint {
        display: none;
    }
    
    .glow-lines {
        display: none;
    }
    
    .about-section,
    .skills-section,
    .experience-section,
    .projects-section,
    .contact-section {
        padding: 3rem 1rem;
    }
    
    .section-number {
        font-size: 0.8rem;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .section-header {
        margin-bottom: 2rem;
    }
    
    /* About Section Mobile */
    .about-text {
        margin-bottom: 2rem;
    }
    
    .lead-text {
        font-size: 1rem;
    }
    
    .about-text p {
        font-size: 0.9rem;
    }
    
    .highlight-card {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }
    
    .card-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .visual-frame {
        padding: 1rem;
    }
    
    .code-window {
        border-radius: 10px;
    }
    
    .window-header {
        padding: 0.75rem 1rem;
    }
    
    .dot {
        width: 10px;
        height: 10px;
    }
    
    .code-content {
        padding: 0.75rem;
        font-size: 0.7rem;
        line-height: 1.6;
    }
    
    .code-content pre {
        white-space: pre-wrap;
        word-break: break-word;
    }
    
    .deco-circle {
        width: 100px;
        height: 100px;
        top: -30px;
        right: -30px;
    }
    
    .deco-dots {
        width: 50px;
        height: 50px;
        bottom: -15px;
        left: -15px;
    }
    
    /* Skills Section Mobile */
    .skills-orbit {
        display: none;
    }
    
    .skills-showcase {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .orbit-center {
        width: 80px;
        height: 80px;
    }
    
    .center-text {
        font-size: 1rem;
    }
    
    .skill-category {
        padding: 1.25rem;
    }
    
    .category-title {
        font-size: 1rem;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    
    .cat-icon {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .skill-tag {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    /* Timeline Mobile */
    .timeline-item {
        padding-left: 40px;
        padding-bottom: 2.5rem;
    }
    
    .timeline-line {
        left: 10px;
    }
    
    .timeline-marker {
        left: 0;
    }
    
    .marker-dot {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }
    
    .marker-pulse {
        width: 30px;
        height: 30px;
    }
    
    .timeline-content {
        padding: 1.25rem;
        border-radius: 15px;
    }
    
    .timeline-content:hover {
        transform: translateX(5px);
    }
    
    .timeline-header {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .company-name {
        font-size: 1.1rem;
    }
    
    .role-badge {
        padding: 0.35rem 0.85rem;
        font-size: 0.75rem;
    }
    
    .timeline-date {
        font-size: 0.8rem;
    }
    
    .timeline-body {
        margin-top: 1rem;
    }
    
    .achievement-icon {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
    
    .achievement-list p {
        font-size: 0.85rem;
    }
    
    .timeline-tech {
        margin-top: 1rem;
        padding-top: 1rem;
        gap: 0.4rem;
    }
    
    .timeline-tech span {
        padding: 0.25rem 0.6rem;
        font-size: 0.7rem;
    }
    
    /* Projects Mobile */
    .project-card {
        border-radius: 20px;
    }
    
    .project-visual {
        height: 160px;
    }
    
    .project-icon {
        font-size: 2.5rem;
    }
    
    .project-info {
        padding: 1.25rem;
    }
    
    .project-title {
        font-size: 1.1rem;
    }
    
    .project-type {
        font-size: 0.7rem;
        padding: 0.25rem 0.6rem;
    }
    
    .project-description {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
    
    .project-stack span {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }
    
    /* Contact Mobile */
    .contact-section {
        padding: 4rem 1rem;
    }
    
    .contact-shape.shape-1 {
        width: 300px;
        height: 300px;
    }
    
    .contact-shape.shape-2 {
        width: 200px;
        height: 200px;
    }
    
    .info-card {
        padding: 1.25rem;
        gap: 1rem;
        border-radius: 15px;
    }
    
    .info-icon {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
        border-radius: 12px;
    }
    
    .info-content h4 {
        font-size: 0.75rem;
    }
    
    .info-content a,
    .info-content span {
        font-size: 0.95rem;
    }
    
    .contact-cta {
        padding: 1.75rem 1.25rem;
        border-radius: 20px;
    }
    
    .contact-cta h3 {
        font-size: 1.25rem;
        line-height: 1.4;
    }
    
    .contact-cta p {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
    }
    
    .cta-buttons {
        margin-bottom: 1.5rem;
    }
    
    .cta-main {
        padding: 0.8rem 1.75rem;
        font-size: 0.9rem;
        border-radius: 40px;
    }
    
    .social-links {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .social-btn {
        justify-content: center;
        padding: 0.65rem 1.25rem;
    }
    
    /* Footer Mobile */
    .footer {
        padding: 2.5rem 1rem;
    }
    
    .footer-logo {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .footer-text {
        font-size: 0.85rem;
    }
    
    .footer-copyright {
        font-size: 0.75rem;
    }
    
    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: 1rem;
        right: 1rem;
        font-size: 0.9rem;
    }
}

/* ============================================
   RESPONSIVE DESIGN - EXTRA SMALL DEVICES
   ============================================ */
@media (max-width: 360px) {
    html {
        font-size: 12px;
    }
    
    .hero-section {
        padding: 4.5rem 0.75rem 2rem;
    }
    
    .name {
        font-size: 1.4rem;
    }
    
    .name-decoration {
        font-size: 1.25rem;
    }
    
    .greeting {
        font-size: 0.7rem;
    }
    
    .hero-role {
        font-size: 0.75rem;
    }
    
    .hero-tagline {
        font-size: 0.75rem;
    }
    
    .tech-stack {
        gap: 0.3rem;
    }
    
    .tech-pill {
        padding: 0.2rem 0.5rem;
        font-size: 0.6rem;
    }
    
    .stat-card {
        min-width: 55px;
        padding: 0.4rem 0.6rem;
    }
    
    .stat-value {
        font-size: 1rem;
    }
    
    .stat-text {
        font-size: 0.5rem;
    }
    
    .skills-orbit {
        display: none;
    }
    
    .timeline-item {
        padding-left: 35px;
    }
    
    .code-content {
        font-size: 0.6rem;
    }
}

/* ============================================
   RESPONSIVE - LANDSCAPE ORIENTATION
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 5rem 2rem 3rem;
    }
    
    .name {
        font-size: 2rem;
    }
    
    .hero-stats-grid {
        margin-bottom: 1rem;
    }
    
    .scroll-hint {
        display: none;
    }
    
    .shape {
        opacity: 0.3;
    }
}