/* ================================================================
   Personal Portfolio — Rohit Kumar Shriwastav
   Complete Design System — CSS
   ================================================================ */

/* ---- 1. Design Tokens ---------------------------------------- */
:root {
    --primary:        #6C63FF;
    --primary-dark:   #5A52D5;
    --primary-glow:   rgba(108, 99, 255, 0.30);
    --secondary:      #FF6584;
    --secondary-glow: rgba(255, 101, 132, 0.25);
    --accent:         #00F5D4;
    --accent-glow:    rgba(0, 245, 212, 0.25);
    --green:          #10B981;
    --green-glow:     rgba(16, 185, 129, 0.25);

    --dark:           #1a1a2e;
    --darker:         #12121f;
    --surface:        rgba(255,255,255,0.03);
    --glass:          rgba(255,255,255,0.055);
    --glass-hover:    rgba(255,255,255,0.085);
    --border:         rgba(255,255,255,0.08);
    --border-hover:   rgba(108,99,255,0.45);

    --text-h:         #e6f1ff;
    --text-b:         #ccd6f6;
    --text-m:         #8892b0;

    --transition:     all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --radius:         14px;
    --radius-sm:      8px;
}

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

html { scroll-behavior:smooth; scroll-padding-top:78px; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--dark);
    color: var(--text-b);
    overflow-x: hidden;
    line-height: 1.7;
}

h1,h2,h3,h4,h5,h6 { font-family:'Poppins',sans-serif; color:var(--text-h); }
a { color:var(--primary); text-decoration:none; transition:var(--transition); }

::-webkit-scrollbar { width:7px; }
::-webkit-scrollbar-track { background:var(--darker); }
::-webkit-scrollbar-thumb { background:var(--primary); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary-dark); }

/* ---- 3. Preloader -------------------------------------------- */
#loader {
    position:fixed; inset:0;
    background:var(--darker);
    display:flex; align-items:center; justify-content:center;
    z-index:99999;
    transition:opacity .5s ease, visibility .5s ease;
}
#loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }

.loader-content { text-align:center; }

.loader-brand {
    font-family:'Fira Code',monospace;
    font-size:2.6rem;
    font-weight:700;
    color:var(--primary);
    letter-spacing:3px;
    text-shadow:0 0 30px var(--primary-glow);
    animation:glowPulse 1.5s ease-in-out infinite;
}

.loader-sub {
    font-size:.8rem;
    color:var(--text-m);
    letter-spacing:2px;
    margin:10px 0 20px;
    font-family:'Fira Code',monospace;
}

.loader-bar {
    width:200px; height:3px;
    background:rgba(255,255,255,.08);
    border-radius:3px;
    margin:0 auto;
    overflow:hidden;
}
.loader-bar::after {
    content:''; display:block;
    width:45%; height:100%;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    border-radius:3px;
    animation:loadSlide 1.3s ease-in-out infinite;
}
@keyframes loadSlide {
    0%  { transform:translateX(-100%); }
    100%{ transform:translateX(280%);  }
}
@keyframes glowPulse {
    0%,100%{ text-shadow:0 0 20px var(--primary-glow); }
    50%    { text-shadow:0 0 40px var(--primary-glow), 0 0 60px rgba(108,99,255,.2); }
}

/* ---- 4. Custom Cursor ---------------------------------------- */
.cursor {
    width:26px; height:26px;
    border:2px solid var(--primary);
    border-radius:50%;
    position:fixed;
    pointer-events:none;
    z-index:99998;
    transform:translate(-50%,-50%);
    transition:transform .12s ease, border-color .2s ease, opacity .15s ease;
    mix-blend-mode:difference;
}
.cursor-dot {
    width:5px; height:5px;
    background:var(--accent);
    border-radius:50%;
    position:fixed;
    pointer-events:none;
    z-index:99999;
    transform:translate(-50%,-50%);
    box-shadow:0 0 8px var(--accent);
}
.cursor.hovered {
    transform:translate(-50%,-50%) scale(1.6);
    border-color:var(--accent);
    opacity:.7;
}

/* ---- 5. Particles -------------------------------------------- */
.particles {
    position:fixed; inset:0;
    pointer-events:none;
    z-index:-1;
}
.particle {
    position:absolute;
    border-radius:50%;
    background:var(--primary);
    opacity:0;
    animation:particleDrift linear infinite;
}
@keyframes particleDrift {
    0%  { transform:translateY(105vh); opacity:0; }
    10% { opacity:.45; }
    90% { opacity:.45; }
    100%{ transform:translateY(-80px); opacity:0; }
}

/* ---- 6. Navbar ---------------------------------------------- */
.navbar {
    background:rgba(18,18,31,.82) !important;
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border-bottom:1px solid var(--border);
    padding:14px 0;
    transition:var(--transition);
    z-index:1030;
}
.navbar.scrolled {
    padding:9px 0;
    background:rgba(13,13,24,.96) !important;
    box-shadow:0 8px 30px rgba(0,0,0,.4);
}

/* Brand <RKS/> */
.navbar-brand {
    font-family:'Fira Code',monospace;
    font-weight:700;
    font-size:1.35rem;
    color:var(--text-h) !important;
    letter-spacing:1px;
}
.brand-bracket { color:var(--primary); }

.nav-link {
    color:var(--text-m) !important;
    font-weight:500;
    font-size:.9rem;
    padding:7px 12px !important;
    border-radius:var(--radius-sm);
    transition:var(--transition);
    position:relative;
}
.nav-link:hover, .nav-link.active { color:var(--primary) !important; }
.nav-link.active::after {
    content:'';
    position:absolute; bottom:2px; left:50%;
    transform:translateX(-50%);
    width:18px; height:2px;
    background:var(--primary);
    border-radius:2px;
    box-shadow:0 0 6px var(--primary);
}

/* Resume button in nav */
.nav-cv-btn {
    background:rgba(108,99,255,.12) !important;
    border:1px solid rgba(108,99,255,.3) !important;
    color:var(--text-h) !important;
    border-radius:var(--radius-sm) !important;
    padding:7px 16px !important;
}
.nav-cv-btn:hover {
    background:var(--primary) !important;
    border-color:var(--primary) !important;
    color:#fff !important;
    transform:translateY(-1px);
}
.nav-cv-btn::after { display:none !important; }

.navbar-toggler {
    border:1px solid var(--border);
    padding:6px 10px;
    box-shadow:none !important; outline:none !important;
}
.navbar-toggler-icon {
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(204,214,246,.85)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---- 7. Hero Section ----------------------------------------- */
.hero-section {
    position:relative;
    overflow:hidden;
    background:var(--dark);
}

/* Subtle grid decoration */
.hero-grid-bg {
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(108,99,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(108,99,255,.04) 1px,transparent 1px);
    background-size:60px 60px;
    pointer-events:none;
}
.hero-grid-bg::after {
    content:'';
    position:absolute; inset:0;
    background:radial-gradient(ellipse 70% 60% at 80% 50%,
        rgba(108,99,255,.1) 0%,transparent 70%);
}

/* Hero text */
.hero-greeting {
    display:inline-block;
    font-family:'Fira Code',monospace;
    font-size:.95rem;
    font-weight:500;
    color:var(--accent);
    padding:5px 14px;
    background:rgba(0,245,212,.06);
    border:1px solid rgba(0,245,212,.18);
    border-radius:20px;
    margin-bottom:18px;
    letter-spacing:.5px;
}

.hero-name {
    font-size:clamp(2.4rem,5.2vw,4.2rem);
    font-weight:800;
    color:var(--text-h);
    line-height:1.12;
    margin-bottom:14px;
    letter-spacing:-1px;
}

.gradient-text {
    background:linear-gradient(135deg,#fff 10%,var(--primary) 80%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.hero-title {
    font-size:clamp(1.25rem,3vw,2rem);
    font-weight:600;
    color:var(--text-m);
    min-height:1.6em;
    margin-bottom:18px;
}

.typing-cursor {
    display:inline-block;
    width:3px; height:.9em;
    background:var(--accent);
    margin-left:4px;
    vertical-align:text-bottom;
    animation:blink .85s steps(1) infinite;
}
@keyframes blink { 50%{ opacity:0; } }

.hero-desc {
    font-size:1.03rem;
    color:var(--text-m);
    max-width:520px;
    line-height:1.85;
    margin-bottom:30px;
}

/* CTA Buttons */
.hero-cta {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:28px;
}

.btn-primary-custom, .btn-ghost-custom {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 26px;
    border-radius:10px;
    font-weight:600;
    font-size:.93rem;
    cursor:pointer;
    transition:var(--transition);
    text-decoration:none;
    border:none;
}
.btn-primary-custom {
    background:var(--primary);
    color:#fff;
    box-shadow:0 4px 20px var(--primary-glow);
}
.btn-primary-custom:hover {
    background:var(--primary-dark);
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 8px 28px var(--primary-glow);
}
.btn-ghost-custom {
    background:transparent;
    color:var(--text-h);
    border:1.5px solid var(--border-hover);
}
.btn-ghost-custom:hover {
    background:rgba(108,99,255,.12);
    border-color:var(--primary);
    color:var(--primary);
    transform:translateY(-3px);
}

/* Social Links */
.social-links {
    display:flex;
    gap:12px;
    margin-bottom:22px;
}
.social-link {
    width:42px; height:42px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border);
    color:var(--text-m);
    font-size:1.1rem;
    transition:var(--transition);
    background:var(--glass);
    text-decoration:none;
}
.social-link:hover {
    border-color:var(--primary);
    color:var(--primary);
    transform:translateY(-3px);
    box-shadow:0 6px 18px var(--primary-glow);
    background:rgba(108,99,255,.1);
}

/* Availability Badge */
.status-badge {
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:8px 16px;
    background:rgba(16,185,129,.1);
    border:1px solid rgba(16,185,129,.28);
    border-radius:22px;
    font-size:.82rem;
    font-weight:600;
    color:var(--green);
    font-family:'Fira Code',monospace;
}
.status-dot {
    width:8px; height:8px;
    background:var(--green);
    border-radius:50%;
    box-shadow:0 0 0 0 rgba(16,185,129,.4);
    animation:pulseGreen 2s infinite;
}
@keyframes pulseGreen {
    0%  { box-shadow:0 0 0 0 rgba(16,185,129,.5); }
    70% { box-shadow:0 0 0 8px rgba(16,185,129,0); }
    100%{ box-shadow:0 0 0 0 rgba(16,185,129,0); }
}

/* Hero Visual (right column) */
.hero-visual {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
}

/* Profile image */
.hero-image-section { position:relative; display:flex; justify-content:center; }

.hero-image-wrapper {
    position:relative;
    display:flex; align-items:center; justify-content:center;
}

.hero-ring {
    position:absolute;
    width:340px; height:340px;
    border:1.5px dashed rgba(108,99,255,.22);
    border-radius:50%;
    animation:spinRing 22s linear infinite;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
}
@keyframes spinRing {
    to { transform:translate(-50%,-50%) rotate(360deg); }
}

.hero-image-frame {
    width:270px; height:270px;
    border-radius:50%;
    overflow:hidden;
    border:3px solid var(--primary);
    box-shadow:
        0 0 40px var(--primary-glow),
        0 0 80px rgba(108,99,255,.15);
    background:linear-gradient(135deg,rgba(108,99,255,.15),rgba(255,101,132,.1));
    position:relative;
    z-index:2;
}
.hero-image-frame img {
    width:100%; height:100%;
    object-fit:cover;
    object-position:center top;
    animation:breathe 5s ease-in-out infinite;
}
@keyframes breathe {
    0%,100%{ transform:scale(1);     }
    50%    { transform:scale(1.04);  }
}

/* Floating Badges */
.floating-badge {
    position:absolute;
    background:rgba(14,14,28,.9);
    backdrop-filter:blur(12px);
    border:1px solid var(--border);
    padding:8px 14px;
    border-radius:10px;
    display:flex; align-items:center; gap:8px;
    font-size:.8rem;
    font-weight:600;
    color:var(--text-h);
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    white-space:nowrap;
    z-index:5;
    animation:floatBadge 4s ease-in-out infinite;
}
.floating-badge i { font-size:1rem; color:var(--primary); }

.fbadge-teacher { top:-10px; right:-20px; animation-delay:0s; }
.fbadge-teacher i { color:var(--accent); }
.fbadge-game   { bottom:0; right:-30px; animation-delay:1.5s; }
.fbadge-game   i { color:var(--secondary); }
.fbadge-dev    { bottom:50px; left:-30px; animation-delay:.8s; }

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

/* Terminal Code Card */
.code-card {
    background:rgba(8,8,20,.9);
    backdrop-filter:blur(18px);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    font-family:'Fira Code',monospace;
    font-size:.8rem;
    box-shadow:0 16px 40px rgba(0,0,0,.5);
    min-width:270px;
    max-width:340px;
    align-self:center;
}
.code-card-header {
    display:flex; align-items:center; gap:6px;
    padding:8px 14px;
    background:rgba(255,255,255,.04);
    border-bottom:1px solid var(--border);
}
.win-dot {
    width:10px; height:10px;
    border-radius:50%;
    display:inline-block;
}
.dot-red    { background:#ff5f56; }
.dot-yellow { background:#ffbd2e; }
.dot-green  { background:#27c93f; }
.code-filename {
    margin-left:6px;
    font-size:.72rem;
    color:var(--text-m);
}
.code-card-body {
    padding:14px 18px;
    line-height:1.9;
}
.cl { display:block; }
.kw { color:#ff79c6; }  /* keyword */
.cv { color:#8be9fd; }  /* const var name */
.cp { color:#50fa7b; }  /* property */
.cs { color:#f1fa8c; }  /* string */
.cn { color:#bd93f9; }  /* number */

/* Scroll hint */
.scroll-hint {
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    width:38px; height:38px;
    border-radius:50%;
    border:1.5px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-m);
    font-size:1.1rem;
    animation:bobDown 2s ease-in-out infinite;
    text-decoration:none;
    transition:var(--transition);
}
.scroll-hint:hover {
    border-color:var(--primary);
    color:var(--primary);
}
@keyframes bobDown {
    0%,100%{ transform:translateX(-50%) translateY(0);    }
    50%    { transform:translateX(-50%) translateY(6px);  }
}

/* ---- 8. Shared Section Styles -------------------------------- */
.section { padding:90px 0; position:relative; }

.section-header { margin-bottom:52px; }

.section-label {
    font-family:'Fira Code',monospace;
    color:var(--primary);
    font-size:.88rem;
    font-weight:600;
    display:block;
    letter-spacing:2px;
    margin-bottom:10px;
}

.section-title {
    font-size:clamp(1.9rem,3.5vw,2.6rem);
    font-weight:700;
    color:var(--text-h);
    display:inline-block;
    position:relative;
}
.section-title::after {
    content:'';
    position:absolute;
    bottom:-10px;
    left:50%;
    transform:translateX(-50%);
    width:55px; height:3px;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    border-radius:3px;
}

.section-subtitle {
    color:var(--text-m);
    font-size:1rem;
    margin-top:22px;
    max-width:580px;
    margin-left:auto;
    margin-right:auto;
    line-height:1.75;
}

.section-line {
    border:none;
    height:1px;
    background:var(--border);
    margin:0;
}

/* ---- 9. About Section ---------------------------------------- */
.about-section { background:var(--darker); }

.about-bio-card {
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:34px;
    transition:var(--transition);
}
.about-bio-card:hover {
    border-color:var(--primary);
    box-shadow:0 14px 36px rgba(0,0,0,.28);
}

.about-text {
    color:var(--text-m);
    font-size:1rem;
    line-height:1.85;
}
.about-text strong { color:var(--text-h); }
.about-text em { color:var(--accent); font-style:normal; font-weight:500; }

.about-chips {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}
.about-chip {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 14px;
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:20px;
    font-size:.82rem;
    color:var(--text-b);
    font-weight:500;
}
.about-chip.available {
    border-color:rgba(16,185,129,.3);
    color:var(--green);
    background:rgba(16,185,129,.08);
}
.about-chip i { font-size:.7rem; }

/* Stats Card */
.stats-card {
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:30px;
    height:100%;
}
.stats-label {
    font-size:.88rem;
    color:var(--text-m);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:24px;
}
.stats-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
.stat-item {
    text-align:center;
    padding:20px 12px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:12px;
    transition:var(--transition);
}
.stat-item:hover {
    border-color:var(--primary);
    background:rgba(108,99,255,.07);
    transform:translateY(-3px);
}
.stat-number {
    font-size:2.1rem;
    font-weight:800;
    color:var(--primary);
    display:block;
    font-family:'Poppins',sans-serif;
    line-height:1.1;
}
.stat-label {
    font-size:.77rem;
    color:var(--text-m);
    margin-top:6px;
    display:block;
    font-weight:500;
}

/* What I Do Cards */
.what-card {
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:30px;
    height:100%;
    transition:var(--transition);
    position:relative;
    overflow:hidden;
}
.what-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0;
    height:3px;
    opacity:0;
    transition:opacity .3s ease;
}
.what-card:hover {
    border-color:var(--primary);
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.3);
}
.what-card:hover::before { opacity:1; }
.what-card:nth-child(1) .what-card::before,
.what-card:first-child .what-card::before { background:linear-gradient(90deg,var(--accent),var(--primary)); }

.what-icon {
    width:52px; height:52px;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.35rem;
    margin-bottom:18px;
    border:1px solid rgba(108,99,255,.25);
}
.what-icon.teacher  { background:rgba(0,245,212,.1);  color:var(--accent);   border-color:rgba(0,245,212,.25); }
.what-icon.dev      { background:rgba(108,99,255,.1); color:var(--primary);  }
.what-icon.game     { background:rgba(255,101,132,.1);color:var(--secondary);border-color:rgba(255,101,132,.25); }

.what-card h4 { font-size:1.1rem; margin-bottom:10px; }
.what-card p  { color:var(--text-m); font-size:.9rem; line-height:1.75; margin-bottom:18px; }

.what-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 12px;
    border-radius:20px;
    font-size:.75rem;
    font-weight:600;
    font-family:'Fira Code',monospace;
}
.what-badge.current {
    background:rgba(16,185,129,.12);
    border:1px solid rgba(16,185,129,.3);
    color:var(--green);
}
.what-badge.current i { font-size:.55rem; }
.what-badge.passion {
    background:rgba(108,99,255,.12);
    border:1px solid rgba(108,99,255,.3);
    color:var(--primary);
}

/* ---- 10. Skills Section -------------------------------------- */
.skills-section { background:var(--dark); }

.skills-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(265px,1fr));
    gap:22px;
}

.skill-category {
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px;
    transition:var(--transition);
}
.skill-category:hover {
    border-color:var(--primary);
    transform:translateY(-5px);
    box-shadow:0 16px 36px rgba(0,0,0,.3);
}

.skill-cat-header {
    display:flex; align-items:center; gap:12px;
    margin-bottom:20px;
}
.skill-cat-icon { font-size:1.8rem; }
.skill-cat-header h4 { font-size:1.05rem; margin:0; }

.skill-tags {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
}
.skill-tag {
    padding:6px 14px;
    background:rgba(108,99,255,.07);
    border:1px solid rgba(108,99,255,.16);
    border-radius:var(--radius-sm);
    font-size:.82rem;
    color:var(--text-b);
    transition:var(--transition);
    cursor:default;
    font-family:'Fira Code',monospace;
}
.skill-tag:hover {
    background:rgba(108,99,255,.18);
    border-color:var(--primary);
    color:#fff;
    transform:translateY(-2px);
}

/* "Learning" indicator */
.tag-learning {
    font-size:.65rem;
    font-style:normal;
    font-weight:600;
    padding:2px 6px;
    background:rgba(0,245,212,.15);
    color:var(--accent);
    border-radius:4px;
    margin-left:4px;
    vertical-align:middle;
    border:1px solid rgba(0,245,212,.25);
}

/* ---- 11. Projects Section ------------------------------------ */
.projects-section { background:var(--darker); }

/* Filter Buttons */
.project-filters {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:36px;
    justify-content:center;
}

.filter-btn {
    padding:8px 22px;
    border-radius:22px;
    border:1.5px solid var(--border);
    background:var(--glass);
    color:var(--text-m);
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    font-family:'Fira Code',monospace;
    letter-spacing:.5px;
}
.filter-btn:hover {
    border-color:var(--primary);
    color:var(--primary);
}
.filter-btn.active {
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
    box-shadow:0 4px 16px var(--primary-glow);
}

.project-item { transition:opacity .3s ease, transform .3s ease; }
.project-item.hidden { display:none; }

/* Project Card */
.project-card {
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    transition:var(--transition);
    height:100%;
    display:flex;
    flex-direction:column;
}
.project-card:hover {
    border-color:var(--primary);
    transform:translateY(-8px);
    box-shadow:0 22px 48px rgba(0,0,0,.4);
}

/* Teaching project accent */
.teaching-project {
    border-color:rgba(0,245,212,.2);
}
.teaching-project:hover {
    border-color:var(--accent);
    box-shadow:0 22px 48px rgba(0,0,0,.4);
}

.project-image {
    height:200px;
    position:relative;
    overflow:hidden;
    background:#0a0a18;
}
.project-image img {
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.project-card:hover .project-image img { transform:scale(1.07); }

.project-overlay {
    position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(108,99,255,.88),rgba(18,18,31,.94));
    display:flex; align-items:center; justify-content:center;
    opacity:0;
    transition:opacity .3s ease;
}
.project-card:hover .project-overlay { opacity:1; }

.project-overlay-btns { display:flex; gap:14px; }
.project-overlay-btn {
    width:44px; height:44px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.28);
    display:flex; align-items:center; justify-content:center;
    color:#fff !important;
    text-decoration:none;
    font-size:1.05rem;
    transition:var(--transition);
}
.project-overlay-btn:hover {
    background:var(--primary);
    border-color:var(--primary);
    transform:scale(1.12);
    box-shadow:0 0 14px var(--primary-glow);
}

/* Category badge on project image */
.proj-badge {
    position:absolute;
    top:12px; left:12px;
    padding:3px 10px;
    border-radius:6px;
    font-size:.7rem;
    font-weight:700;
    font-family:'Fira Code',monospace;
    letter-spacing:.5px;
    text-transform:uppercase;
}
.proj-badge.web      { background:rgba(108,99,255,.85); color:#fff; }
.proj-badge.game     { background:rgba(255,101,132,.85); color:#fff; }
.proj-badge.tool     { background:rgba(0,245,212,.75);   color:#0a0a18; }
.proj-badge.teaching { background:rgba(16,185,129,.85);  color:#fff; }

.project-content {
    padding:22px 24px 24px;
    flex:1;
    display:flex;
    flex-direction:column;
}
.project-content h4 {
    font-size:1.1rem;
    margin-bottom:9px;
    transition:color .3s ease;
}
.project-card:hover .project-content h4 { color:var(--primary); }
.teaching-project:hover .project-content h4 { color:var(--accent); }

.project-content p {
    color:var(--text-m);
    font-size:.88rem;
    line-height:1.7;
    flex:1;
    margin-bottom:14px;
}

.project-tech {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:auto;
}
.project-tech span {
    padding:3px 10px;
    background:rgba(108,99,255,.09);
    border-radius:5px;
    font-size:.72rem;
    color:var(--primary);
    font-weight:600;
    font-family:'Fira Code',monospace;
}

/* ---- 12. Teaching Corner ------------------------------------- */
.teaching-section {
    background:var(--dark);
    position:relative;
    overflow:hidden;
}
.teaching-section::before {
    content:'';
    position:absolute;
    top:-30%;
    left:-15%;
    width:600px; height:600px;
    background:radial-gradient(circle,rgba(0,245,212,.05) 0%,transparent 70%);
    pointer-events:none;
}

.teach-card {
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:30px;
    transition:var(--transition);
    display:flex;
    flex-direction:column;
}
.teach-card:hover {
    border-color:var(--accent);
    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(0,0,0,.3);
}

.teach-card-action { cursor:default; }

.teach-icon {
    width:52px; height:52px;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem;
    margin-bottom:18px;
    background:rgba(0,245,212,.1);
    color:var(--accent);
    border:1px solid rgba(0,245,212,.22);
}
.teach-icon.accent {
    background:rgba(108,99,255,.1);
    color:var(--primary);
    border-color:rgba(108,99,255,.25);
}
.teach-icon.secondary {
    background:rgba(255,101,132,.1);
    color:var(--secondary);
    border-color:rgba(255,101,132,.25);
}

.teach-card h4 { font-size:1.15rem; margin-bottom:12px; }
.teach-desc { color:var(--text-m); font-size:.9rem; line-height:1.75; margin-bottom:20px; }

/* Subject list */
.subject-list {
    list-style:none;
    padding:0;
    margin:0;
    flex:1;
}
.subject-list li {
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--text-b);
    font-size:.88rem;
    padding:7px 0;
    border-bottom:1px solid rgba(255,255,255,.04);
    transition:color .25s;
}
.subject-list li:last-child { border-bottom:none; }
.subject-list li:hover { color:var(--text-h); }
.subject-list li i {
    color:var(--accent);
    font-size:.95rem;
    margin-top:2px;
    flex-shrink:0;
}

/* Teaching thumbnail preview */
.teach-thumb {
    border-radius:var(--radius-sm);
    overflow:hidden;
    margin:16px 0;
    flex:1;
    max-height:130px;
}
.teach-thumb img { width:100%; height:100%; object-fit:cover; }

/* Teaching programs badge grid */
.teach-programs-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin:16px 0;
    flex:1;
}
.tp-badge {
    display:flex; align-items:center; gap:7px;
    padding:9px 12px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:.8rem;
    color:var(--text-b);
    font-weight:500;
    transition:var(--transition);
}
.tp-badge:hover {
    border-color:var(--secondary);
    color:var(--secondary);
}
.tp-badge i { color:var(--secondary); font-size:.9rem; }

/* Launch button */
.teach-launch-btn {
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 18px;
    background:rgba(108,99,255,.12);
    border:1px solid rgba(108,99,255,.3);
    border-radius:10px;
    color:var(--primary);
    font-weight:600;
    font-size:.88rem;
    transition:var(--transition);
    text-decoration:none;
    margin-top:auto;
}
.teach-launch-btn:hover {
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
    transform:translateX(4px);
}
.teach-launch-btn.secondary {
    background:rgba(255,101,132,.1);
    border-color:rgba(255,101,132,.28);
    color:var(--secondary);
}
.teach-launch-btn.secondary:hover {
    background:var(--secondary);
    border-color:var(--secondary);
    color:#fff;
}

/* ---- 13. Journey / Timeline ---------------------------------- */
.timeline {
    position:relative;
    padding-left:28px;
}
.timeline::before {
    content:'';
    position:absolute;
    left:0; top:0;
    width:2px;
    height:100%;
    background:linear-gradient(to bottom,var(--primary),var(--secondary));
}

.timeline-item {
    position:relative;
    margin-bottom:36px;
    padding-left:28px;
}
.timeline-item::before {
    content:'';
    position:absolute;
    left:-35px; top:10px;
    width:14px; height:14px;
    border-radius:50%;
    background:var(--primary);
    border:3px solid var(--dark);
    box-shadow:0 0 0 3px var(--primary), 0 0 10px var(--primary-glow);
}

.timeline-card {
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px 26px;
    transition:var(--transition);
}
.timeline-card:hover {
    border-color:var(--primary);
    transform:translateX(6px);
    box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.timeline-card.is-current {
    border-color:rgba(16,185,129,.3);
    background:rgba(16,185,129,.04);
}
.timeline-card.is-current:hover { border-color:var(--green); }

.timeline-date {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.82rem;
    font-weight:600;
    color:var(--primary);
    font-family:'Fira Code',monospace;
    margin-bottom:8px;
}

.tl-status-badge {
    font-size:.7rem;
    padding:2px 9px;
    background:rgba(16,185,129,.15);
    border:1px solid rgba(16,185,129,.3);
    border-radius:10px;
    color:var(--green);
    font-family:'Fira Code',monospace;
}

.timeline-card h4 { font-size:1.1rem; margin-bottom:4px; }
.timeline-card h5 {
    font-size:.9rem;
    font-weight:500;
    color:var(--secondary);
    margin-bottom:12px;
}
.timeline-card p {
    color:var(--text-m);
    font-size:.88rem;
    line-height:1.75;
    margin:0;
}

.tl-tags {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:14px;
}
.tl-tags span {
    padding:3px 10px;
    background:rgba(108,99,255,.1);
    border-radius:6px;
    font-size:.72rem;
    color:var(--primary);
    font-family:'Fira Code',monospace;
}

/* ---- 14. Contact Section ------------------------------------- */
.contact-section { background:var(--darker); }

/* Info column */
.contact-info-col {
    display:flex;
    flex-direction:column;
    gap:14px;
}

.contact-card {
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:20px 22px;
    display:flex;
    align-items:center;
    gap:16px;
    transition:var(--transition);
    text-decoration:none;
    color:inherit;
}
.contact-card:hover:not(.no-link) {
    border-color:var(--primary);
    transform:translateY(-4px);
    box-shadow:0 14px 34px rgba(0,0,0,.3);
    color:inherit;
}

.contact-card-icon {
    width:48px; height:48px;
    border-radius:12px;
    background:rgba(108,99,255,.1);
    display:flex; align-items:center; justify-content:center;
    color:var(--primary);
    font-size:1.2rem;
    flex-shrink:0;
    border:1px solid rgba(108,99,255,.2);
}
.contact-card-text {
    display:flex;
    flex-direction:column;
    min-width:0;
}
.contact-card-label {
    font-size:.75rem;
    color:var(--text-m);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    font-family:'Fira Code',monospace;
}
.contact-card-value {
    font-size:.95rem;
    color:var(--text-h);
    font-weight:500;
    word-break:break-word;
}
.contact-card-arrow { margin-left:auto; color:var(--text-m); font-size:1rem; }

.contact-socials { padding:16px 0 4px; }
.contact-socials p {
    font-size:.82rem;
    color:var(--text-m);
    margin-bottom:12px;
    font-weight:500;
}

/* Contact Form Card */
.contact-form-card {
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:34px;
}
.contact-form-card h4 {
    font-size:1.15rem;
    margin-bottom:0;
}

.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label {
    font-size:.82rem;
    font-weight:600;
    color:var(--text-m);
    text-transform:uppercase;
    letter-spacing:.8px;
    font-family:'Fira Code',monospace;
}
.form-control {
    background:rgba(255,255,255,.04) !important;
    border:1px solid var(--border) !important;
    color:var(--text-h) !important;
    padding:12px 16px;
    border-radius:10px;
    font-size:.93rem;
    transition:var(--transition);
    box-shadow:none !important;
}
.form-control:focus {
    border-color:var(--primary) !important;
    box-shadow:0 0 0 3px rgba(108,99,255,.18) !important;
    background:rgba(255,255,255,.06) !important;
}
.form-control::placeholder { color:var(--text-m); }
textarea.form-control { min-height:140px; resize:vertical; }

.btn-submit {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:13px 32px;
    background:var(--primary);
    color:#fff;
    border:none;
    border-radius:10px;
    font-weight:600;
    font-size:.95rem;
    cursor:pointer;
    transition:var(--transition);
    width:100%;
    justify-content:center;
    box-shadow:0 4px 18px var(--primary-glow);
}
.btn-submit:hover {
    background:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:0 8px 26px var(--primary-glow);
}

/* ---- 15. Footer ---------------------------------------------- */
.footer {
    background:var(--darker);
    border-top:1px solid var(--border);
    padding:36px 0 20px;
}

.footer-content {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:24px;
    margin-bottom:24px;
}

.footer-logo {
    font-family:'Fira Code',monospace;
    font-weight:700;
    font-size:1.3rem;
    color:var(--text-h);
    display:block;
    margin-bottom:6px;
    text-decoration:none;
}
.footer-logo:hover { color:var(--primary); }
.footer-tagline {
    font-size:.8rem;
    color:var(--text-m);
    font-family:'Fira Code',monospace;
}

.footer-mid { text-align:center; }
.footer-copy {
    font-size:.85rem;
    color:var(--text-m);
    line-height:1.7;
    margin:0;
}

.footer-social-col { display:flex; justify-content:flex-end; }

.footer-bottom-bar {
    border-top:1px solid var(--border);
    padding-top:18px;
    text-align:center;
}
.footer-bottom-bar p {
    font-size:.78rem;
    color:var(--text-m);
    font-family:'Fira Code',monospace;
    margin:0;
    letter-spacing:.5px;
}

/* ---- 16. Back to Top ----------------------------------------- */
.back-to-top {
    position:fixed;
    bottom:28px; right:28px;
    width:44px; height:44px;
    border-radius:12px;
    background:var(--primary);
    color:#fff !important;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem;
    text-decoration:none;
    opacity:0;
    visibility:hidden;
    transition:var(--transition);
    z-index:999;
    box-shadow:0 6px 20px var(--primary-glow);
}
.back-to-top.visible { opacity:1; visibility:visible; }
.back-to-top:hover {
    background:var(--primary-dark);
    transform:translateY(-3px);
    box-shadow:0 10px 28px var(--primary-glow);
}

/* ---- 17. Scroll Animations ----------------------------------- */
.fade-in {
    opacity:0;
    transform:translateY(28px);
    transition:opacity .6s ease, transform .6s ease;
}
.fade-in.visible {
    opacity:1;
    transform:translateY(0);
}
.fade-in-left {
    opacity:0;
    transform:translateX(-32px);
    transition:opacity .65s ease, transform .65s ease;
}
.fade-in-left.visible {
    opacity:1;
    transform:translateX(0);
}
.fade-in-right {
    opacity:0;
    transform:translateX(32px);
    transition:opacity .65s ease, transform .65s ease;
}
.fade-in-right.visible {
    opacity:1;
    transform:translateX(0);
}

/* ---- 18. Responsive ------------------------------------------ */
@media (max-width: 991px) {
    .hero-visual { align-items:center; }
    .hero-image-frame { width:240px; height:240px; }
    .hero-ring { width:290px; height:290px; }
    .floating-badge { display:none; }

    .footer-content {
        grid-template-columns:1fr;
        text-align:center;
    }
    .footer-social-col { justify-content:center; }

    .navbar-collapse {
        background:var(--darker);
        padding:20px;
        border-radius:var(--radius);
        margin-top:14px;
        border:1px solid var(--border);
        box-shadow:0 14px 36px rgba(0,0,0,.45);
    }
    .nav-cv-btn { margin-top:8px; display:inline-block; }
    .section-title::after { left:50%; transform:translateX(-50%); }
}

@media (max-width: 767px) {
    .section { padding:70px 0; }
    .hero-desc { max-width:100%; }
    .cursor, .cursor-dot { display:none; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .footer-content { grid-template-columns:1fr; gap:16px; }
}

@media (max-width: 575px) {
    .hero-cta { flex-direction:column; }
    .btn-primary-custom, .btn-ghost-custom { justify-content:center; }
    .about-chips { gap:8px; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .project-filters { gap:8px; }
    .filter-btn { padding:7px 16px; font-size:.78rem; }
    .teach-programs-grid { grid-template-columns:1fr; }
    .code-card { min-width:unset; width:100%; max-width:100%; }
}