html {
            scroll-behavior: smooth;
        }
        body {
            font-family: 'Inter', sans-serif;
            transition: background-color 0.5s ease, color 0.5s ease;
            overscroll-behavior: none;
        }
        .section {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-top: 6rem; /* Padding to account for fixed header */
            padding-bottom: 4rem;
        }
        .section-compact {
            min-height: auto;
        }
        footer.section {
            min-height: auto;
            padding-top: 4rem;
        }
        .bg-light {
            background-color: #F3F0E9;
            color: #1a1a1a;
            background-image: radial-gradient(circle, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 60%);
        }
        .bg-dark {
            background-color: #121212;
            color: #F3F0E9;
            position: relative;
            overflow: hidden;
        }
        
        .bg-dark::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
            animation: backgroundFloat 20s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
            will-change: transform, opacity;
            transform: translateZ(0);
        }
        
        .bg-dark::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                radial-gradient(1px 1px at 90% 40%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
                radial-gradient(2px 2px at 60% 90%, rgba(255, 255, 255, 0.07) 0%, transparent 50%);
            background-size: 200px 200px, 150px 150px, 180px 180px, 220px 220px;
            animation: particleMove 30s linear infinite;
            pointer-events: none;
            z-index: 0;
            will-change: background-position;
            transform: translateZ(0);
        }
        
        .bg-dark > * {
            position: relative;
            z-index: 1;
        }
        
        @keyframes backgroundFloat {
            0%, 100% {
                transform: translate(0, 0) scale(1);
                opacity: 0.7;
            }
            33% {
                transform: translate(30px, -30px) scale(1.1);
                opacity: 0.5;
            }
            66% {
                transform: translate(-20px, 20px) scale(0.9);
                opacity: 0.8;
            }
        }
        
        @keyframes particleMove {
            0% {
                background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
            }
            100% {
                background-position: 100% 100%, -100% 100%, 100% -100%, -100% -100%;
            }
        }
        .huge-text {
            font-size: clamp(2.5rem, 9vw, 8.5rem);
            font-weight: 900;
            line-height: 1;
            letter-spacing: -0.05em;
        }
        
        .skills-grid {
            position: relative;
            perspective: 1000px;
        }
        #skills-grid-glow {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(52, 211, 153, 0.15) 0%, rgba(52, 211, 153, 0) 70%);
            border-radius: 9999px;
            pointer-events: none;
            transition: opacity 0.3s ease;
            opacity: 0;
            z-index: 0;
        }
        .skills-grid:hover #skills-grid-glow {
            opacity: 1;
        }
        .skill-card {
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: transform 0.4s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
            transform-style: preserve-3d;
            z-index: 1;
            padding: 0.75rem;
            border-radius: 0.75rem;
        }
        @media (min-width: 640px) {
            .skill-card {
                padding: 1rem;
            }
        }
        @media (min-width: 1024px) {
            .skill-card {
                padding: 1.25rem;
            }
        }
        .skill-card:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            border-color: rgba(52, 211, 153, 0.4);
            transform: translateY(-2px);
        }
        .project-card {
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: transform 0.4s ease-out, box-shadow 0.3s ease;
            transform-style: preserve-3d;
        }
        @media (min-width: 640px) {
            .project-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 40px rgba(0,0,0,0.3);
            }
        }
        .project-card:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        .project-card img {
            transition: transform 0.4s ease-out;
        }
        .github-activity {
            background-color: rgba(255, 255, 255, 0.05);
            padding: 1rem;
            border-radius: 0.5rem;
        }
        .timeline-item {
            position: relative;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -2rem;
            top: 0.5rem;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #4CAF50;
            border: 2px solid #121212;
            z-index: 1;
        }
        .timeline-item::after {
            content: '';
            position: absolute;
            left: calc(-2rem + 5px); /* Center of the dot */
            top: 0.5rem;
            width: 2px;
            background-color: #333;
            height: 100%;
        }
        .space-y-16 > .grid:not(:last-child) .timeline-item::after {
            height: calc(100% + 4rem); /* 4rem is space-y-16 */
        }
        .grid:last-child .timeline-item::after {
            display: none;
        }

        .key-achievement-item {
            position: relative;
            padding-left: 20px;
        }
        .key-achievement-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 10px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #4CAF50;
        }
        
        /* ── Mobile performance: additive overrides for small screens ────────── */
        @media (max-width: 767px) {
            /* Stop continuous background animations — biggest frame-rate killer */
            .bg-dark::before { animation: none !important; }
            .bg-dark::after  { animation: none !important; }
            /* Remove CSS blur on decorative orbs — forces GPU re-raster every frame */
            .blur-3xl { filter: none !important; }
            .blur-2xl { filter: none !important; }
            /* Flatten 3D card layers — preserve-3d forces compositing even when idle */
            .skill-card,
            .project-card { transform-style: flat !important; }
            /* Slow down marquee to reduce paint frequency */
            .marquee-content { animation-duration: 60s !important; }
        }
        /* Respect OS-level reduce-motion preference */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* Hero parallax spacer — 100vh on mobile (no parallax), 200vh on md+ (enables parallax) */
        .hero-parallax-spacer {
            height: 100vh;
        }
        @media (min-width: 768px) {
            .hero-parallax-spacer {
                height: 200vh;
            }
        }

        /* ── Mobile hero fix ──────────────────────────────────────────────
           On phones the hero content is taller than one screen. Locking it to
           a centered 100vh pushed the "SAYAK" headline up under the fixed
           header and dropped the scroll cue on top of the photo. On mobile
           there is no parallax, so let the hero flow from below the header and
           grow to fit its content. */
        @media (max-width: 767px) {
            .hero-parallax-spacer { height: auto !important; }
            #hero-section {
                position: relative !important;
                height: auto !important;
                min-height: 100vh;
                justify-content: flex-start !important;
            }
            /* Scroll cue is redundant on touch and overlapped the photo */
            #hero-section .animate-bounce { display: none !important; }
            /* Keep hero content flowing from the top on phones */
            #hero-section .container { justify-content: flex-start !important; }
        }

        /* ── GitHub activity chart: keep it inside its card ────────────────
           The contribution SVG has a min-width of 420px. Because the card is a
           grid item (min-width:auto), that width stretched the whole card past
           the viewport on phones instead of scrolling. min-width:0 lets the
           card stay full-width and the wrapper scroll the chart horizontally. */
        #activity-section .grid.gap-6 > .reveal { min-width: 0; }
        #github-chart-wrapper { min-width: 0; max-width: 100%; }

        /* ── Hero vertical alignment ───────────────────────────────────────
           The hero centres its content in one screen. On short or very wide
           viewports the big headline makes that content taller than the
           screen, and centred overflow pushed "HELLO, I'M" / "SAYAK" up under
           the fixed header. "safe center" keeps the nice centring when it fits
           but pins the content to the top (below the header) when it doesn't,
           so it can never overlap the logo. */
        #hero-section .container {
            justify-content: center;
            justify-content: safe center;
        }

        /* Custom Cursor */
        #cursor {
            position: fixed;
            width: 32px;
            height: 32px;
            border: 1px solid #333;
            border-radius: 50%;
            left: 0;
            top: 0;
            pointer-events: none;
            transform: translate(-50%, -50%);
            transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-color 0.5s ease;
            z-index: 9999;
        }
        /* Hide custom cursor on touch devices */
        @media (hover: none) and (pointer: coarse) {
            #cursor { display: none; }
        }
        #cursor.grow {
            width: 64px;
            height: 64px;
            background-color: rgba(200, 200, 200, 0.2);
        }
        .dark #cursor {
            border-color: #eee;
        }
        .dark #cursor.grow {
            background-color: rgba(255, 255, 255, 0.1);
        }

        /* Overlay Menu */
        #overlay-menu {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            max-width: 480px;
            background-color: #1a1a1a;
            color: #F3F0E9;
            z-index: 100;
            transform: translateX(100%);
            transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 2rem;
            overflow: hidden;
        }
        #overlay-menu.open {
            transform: translateX(0);
        }

        /* Reveal animation */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.6, 0.2, 0.4, 1), transform 0.8s cubic-bezier(0.6, 0.2, 0.4, 1);
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        #menu-btn {
            transition: all 0.3s ease-in-out;
        }
        #menu-btn.ball-style {
            background-color: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 9999px;
            width: 40px;
            height: 40px;
        }
        #menu-btn.ball-style:hover {
            transform: scale(1.1);
            background-color: rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        }

        /* Preloader Styles */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #121212;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #F3F0E9;
            transition: opacity 1s cubic-bezier(0.7, 0, 0.3, 1);
            opacity: 1;
        }
        .preloader-text-container {
            position: relative;
            font-size: clamp(1.5rem, 5vw, 3rem);
            font-weight: 600;
            letter-spacing: 0.05em;
            text-align: center;
        }
        .preloader-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
        }
        .glitch-layer {
            opacity: 0;
            animation: glitch 2.5s steps(1, end) infinite;
        }
        .glitch-layer:nth-child(1) { color: #00ffff; animation-duration: 2s; }
        .glitch-layer:nth-child(2) { color: #ff00ff; animation-duration: 1.5s; }
        .glitch-layer:nth-child(3) { color: #ffff00; animation-duration: 2.2s; }
        
        .final-text {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        @keyframes glitch {
            0% {
                transform: translate(-50%, -50%) translate(0, 0);
                clip-path: inset(50% 0 30% 0);
                opacity: 0.8;
            }
            10% {
                transform: translate(-50%, -50%) translate(-5px, 5px);
                clip-path: inset(20% 0 65% 0);
            }
            20% {
                transform: translate(-50%, -50%) translate(5px, -5px);
                clip-path: inset(70% 0 10% 0);
            }
            30%, 100% {
                transform: translate(-50%, -50%) translate(0, 0);
                clip-path: none;
                opacity: 0;
            }
        }


        .preloader-bottom-bar {
            position: absolute;
            bottom: 2rem;
            left: 2rem;
            right: 2rem;
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: #a0a0a0;
        }
        .loading-bar {
            width: 100px;
            height: 2px;
            background-color: #444;
            overflow: hidden;
        }
        .loading-bar-inner {
            width: 0;
            height: 100%;
            background-color: #F3F0E9;
            animation: fill-bar 1.1s ease-out forwards;
        }
        @keyframes fill-bar {
            from { width: 0; }
            to { width: 100%; }
        }
        .preloader-transition-shape {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0;
            background-color: #F3F0E9;
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
            transform: scaleX(1.5);
            transition: height 1s cubic-bezier(0.7, 0, 0.3, 1);
        }
        
        .rotating-star:hover {
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .blinking-cursor {
            font-weight: 300;
            animation: blink 1s step-end infinite;
        }
        @keyframes blink {
            from, to { color: transparent; }
            50% { color: #3b82f6; }
        }
        .dark .blinking-cursor {
            animation: blink-dark 1s step-end infinite;
        }
        @keyframes blink-dark {
            from, to { color: transparent; }
            50% { color: #F3F0E9; }
        }

        .marquee {
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
        }
        .marquee-content {
            display: inline-block;
            animation: marquee 30s linear infinite;
            will-change: transform;
            transform: translateZ(0);
        }
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        /* Navigation contrast fix */
        .text-gray-900 #main-nav a {
            color: #111827 !important;
        }
        .text-white #main-nav a {
            color: #ffffff !important;
        }
        #main-nav a {
            transition: color 0.3s ease;
        }
        #main-nav a:hover {
            opacity: 0.7;
        }
        /* ── Mobile-only performance layer (purely additive, nothing above changed) ── */
        @media (max-width: 767px) {
            /* Stop continuous background animations — biggest frame-rate killer on mobile */
            .bg-dark::before { animation: none !important; }
            .bg-dark::after  { animation: none !important; }

            /* CSS blur forces GPU re-rasterisation every frame — turn off on mobile */
            .blur-3xl { filter: none !important; }
            .blur-2xl { filter: none !important; }

            /* preserve-3d creates compositor layers even when idle — flatten on mobile */
            .skill-card,
            .project-card { transform-style: flat !important; }

            /* Body colour transition triggers full repaint on every section change */
            body { transition: none !important; }

            /* Promote marquee to its own GPU layer so scroll doesn't stall it */
            .marquee-content { will-change: transform; transform: translateZ(0); }

            /* Slow down the marquee slightly — halves paint frequency */
            .marquee-content { animation-duration: 60s; }
        }

        /* Respect system-level reduce-motion preference */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
/* ════════════════════════════════════════════════════════════════════
   INTERACTIVE UPGRADES  (custom cursor, scroll progress, section rail,
   project filter, modal, command palette, terminal, toast)
   All classes are prefixed `ix-` and fully self-styled so they don't
   depend on the prebuilt Tailwind build.
   ════════════════════════════════════════════════════════════════════ */

/* ── Custom cursor ─────────────────────────────────────────────────── */
#cursor {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    mix-blend-mode: difference;
    will-change: transform;
    transition: width .25s ease, height .25s ease, background-color .25s ease, border-color .25s ease;
}
#cursor .ix-cursor-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #fff;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .2s ease, transform .2s ease;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
#cursor.ix-labelled {
    width: 72px;
    height: 72px;
    background-color: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.9);
}
#cursor.ix-labelled .ix-cursor-label { opacity: 1; transform: scale(1); }

/* ── Scroll progress bar ───────────────────────────────────────────── */
#ix-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
    z-index: 9998;
    pointer-events: none;
    will-change: transform;
}

/* ── Section dot rail ──────────────────────────────────────────────── */
#ix-rail {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-end;
}
.ix-rail-dot {
    position: relative;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(150,150,150,.45);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform .25s ease, background-color .25s ease;
}
.ix-rail-dot:hover { transform: scale(1.35); }
.ix-rail-dot.active {
    background: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59,130,246,.2);
}
body.dark .ix-rail-dot { background: rgba(255,255,255,.35); }
body.dark .ix-rail-dot.active { background: #60a5fa; box-shadow: 0 0 0 4px rgba(96,165,250,.25); }
.ix-rail-dot .ix-rail-label {
    position: absolute;
    right: 20px; top: 50%;
    transform: translateY(-50%) translateX(6px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: #1a1a1a;
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    transition: opacity .2s ease, transform .2s ease;
}
.ix-rail-dot:hover .ix-rail-label { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 900px) { #ix-rail { display: none; } }

/* ── Project filter bar ────────────────────────────────────────────── */
.ix-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2rem;
}
.ix-filter-btn {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #cbd5e1;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    padding: 7px 16px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all .25s ease;
}
.ix-filter-btn:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.ix-filter-btn.active {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-color: transparent;
    color: #fff;
}
.ix-filter-count { opacity: .6; font-weight: 500; margin-left: 4px; }
.project-card.ix-hidden {
    opacity: 0;
    transform: scale(.92);
    pointer-events: none;
    position: absolute;
    width: 0; height: 0; overflow: hidden;
    margin: 0; padding: 0; border: 0;
}
.project-card.ix-anim { transition: opacity .4s ease, transform .4s ease; }

/* Case-study affordance on cards */
.ix-case-btn {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    width: 100%;
    margin-top: 12px;
    padding: 9px 14px;
    border-radius: 10px;
    cursor: pointer;
    color: #fff;
    background: rgba(255,255,255,.06);
    border: 1px dashed rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all .25s ease;
}
.ix-case-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }

/* ── Modal (project case study + skill panel) ──────────────────────── */
.ix-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(8,10,16,.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.ix-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.ix-modal {
    width: 100%;
    max-width: 720px;
    max-height: 88vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #14161c, #0e1014);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    transform: translateY(24px) scale(.98);
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
    color: #e5e7eb;
}
.ix-modal-backdrop.open .ix-modal { transform: translateY(0) scale(1); }
.ix-modal-hero { position: relative; }
.ix-modal-hero img { width: 100%; height: 240px; object-fit: cover; object-position: top; display: block; border-radius: 20px 20px 0 0; }
.ix-modal-hero .ix-modal-banner {
    height: 150px; display: flex; align-items: center; justify-content: center;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(135deg, rgba(59,130,246,.25), #0e1014);
}
.ix-modal-hero .ix-modal-banner i { width: 56px; height: 56px; }
.ix-modal-close {
    position: absolute; top: 14px; right: 14px;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.2);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s ease, transform .2s ease;
}
.ix-modal-close:hover { background: rgba(0,0,0,.8); transform: rotate(90deg); }
.ix-modal-body { padding: 24px 28px 28px; }
.ix-modal-body h3 { font-size: 26px; font-weight: 800; color: #fff; margin: 0 0 6px; }
.ix-modal-tagline { color: #9ca3af; font-size: 14px; margin-bottom: 18px; }
.ix-modal-chip {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: 9999px; margin: 0 6px 6px 0;
    background: rgba(96,165,250,.15); color: #93c5fd;
}
.ix-modal-section { margin-top: 18px; }
.ix-modal-section h4 {
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #60a5fa; margin: 0 0 6px;
}
.ix-modal-section p, .ix-modal-section li { color: #cbd5e1; font-size: 14.5px; line-height: 1.65; }
.ix-modal-section ul { margin: 0; padding-left: 18px; }
.ix-modal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ix-btn {
    font: inherit; font-size: 14px; font-weight: 600; text-decoration: none;
    padding: 10px 20px; border-radius: 10px; cursor: pointer; border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: 8px; transition: all .2s ease;
}
.ix-btn-primary { background: linear-gradient(90deg,#3b82f6,#8b5cf6); color: #fff; }
.ix-btn-primary:hover { filter: brightness(1.1); }
.ix-btn-ghost { background: transparent; border-color: rgba(255,255,255,.3); color: #e5e7eb; }
.ix-btn-ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.ix-skill-projlist a {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; margin-bottom: 8px; border-radius: 10px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    color: #e5e7eb; text-decoration: none; font-size: 14px; transition: all .2s ease;
}
.ix-skill-projlist a:hover { background: rgba(255,255,255,.09); transform: translateX(3px); }

/* ── Command palette ───────────────────────────────────────────────── */
.ix-palette-backdrop {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(8,10,16,.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 14vh;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.ix-palette-backdrop.open { opacity: 1; pointer-events: auto; }
.ix-palette {
    width: 100%; max-width: 560px;
    background: #14161c; border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6);
    transform: translateY(-12px); transition: transform .2s ease;
}
.ix-palette-backdrop.open .ix-palette { transform: translateY(0); }
.ix-palette input {
    width: 100%; box-sizing: border-box; border: none; outline: none;
    background: transparent; color: #fff; font: inherit; font-size: 16px;
    padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.ix-palette input::placeholder { color: #6b7280; }
.ix-palette-list { max-height: 320px; overflow-y: auto; padding: 8px; }
.ix-palette-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 10px; cursor: pointer; color: #d1d5db; font-size: 14.5px;
}
.ix-palette-item i { width: 18px; height: 18px; color: #60a5fa; }
.ix-palette-item .ix-kbd { margin-left: auto; font-size: 11px; color: #6b7280; }
.ix-palette-item.active, .ix-palette-item:hover { background: rgba(96,165,250,.15); color: #fff; }
.ix-palette-hint { padding: 10px 16px; font-size: 11px; color: #6b7280; border-top: 1px solid rgba(255,255,255,.08); display: flex; gap: 14px; }
.ix-kbd-key { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 5px; padding: 1px 6px; font-size: 11px; }

/* ── Terminal ──────────────────────────────────────────────────────── */
.ix-terminal {
    background: #0b0e14;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.ix-term-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #12161f; border-bottom: 1px solid rgba(255,255,255,.08); }
.ix-term-dot { width: 12px; height: 12px; border-radius: 50%; }
.ix-term-title { margin-left: 10px; font-size: 12px; color: #8b98a9; }
.ix-term-body { padding: 16px; height: 300px; overflow-y: auto; font-size: 13.5px; line-height: 1.7; color: #cbd5e1; cursor: text; }
.ix-term-line { white-space: pre-wrap; word-break: break-word; }
.ix-term-prompt { color: #4ade80; }
.ix-term-path { color: #60a5fa; }
.ix-term-accent { color: #c084fc; }
.ix-term-muted { color: #6b7280; }
.ix-term-inputline { display: flex; align-items: center; gap: 8px; }
.ix-term-input { flex: 1; background: transparent; border: none; outline: none; color: #e5e7eb; font: inherit; }
.ix-term-cmd { color: #fde047; }

/* ── Toast ─────────────────────────────────────────────────────────── */
#ix-toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ix-toast {
    background: #14161c; color: #fff; border: 1px solid rgba(255,255,255,.15);
    padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600;
    display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
    opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease;
}
.ix-toast.show { opacity: 1; transform: translateY(0); }
.ix-toast i { width: 18px; height: 18px; color: #4ade80; }

/* ── GitHub chart: year switcher + custom tooltip ──────────────────── */
.ix-gh-years { display: flex; gap: 6px; margin-bottom: 10px; }
.ix-gh-year {
    font: inherit; font-size: 12px; font-weight: 600; color: #9ca3af;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    padding: 4px 12px; border-radius: 9999px; cursor: pointer; transition: all .2s ease;
}
.ix-gh-year:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.ix-gh-year.active { background: rgba(74,222,128,.15); color: #4ade80; border-color: rgba(74,222,128,.4); }
#ix-gh-tooltip {
    position: fixed; z-index: 9997; pointer-events: none;
    background: #0b0e14; color: #e5e7eb; border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.4;
    opacity: 0; transform: translateY(4px); transition: opacity .12s ease;
    white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
#ix-gh-tooltip.show { opacity: 1; transform: translateY(0); }
#ix-gh-tooltip b { color: #4ade80; }

@media (prefers-reduced-motion: reduce) {
    .project-card.ix-anim, .ix-modal, .ix-toast { transition: none !important; }
}

/* ── Certification cards ────────────────────────────────────────────────
   Framed certificate with a per-card accent (set via --accent inline),
   hover glow/lift, a "View certificate" overlay (opens a lightbox) and a
   proper Verify button. */
.cert-card {
    --accent: #3b82f6;
    background: linear-gradient(180deg, #14161c, #0f1116);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.cert-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
}
.cert-media {
    position: relative;
    padding: 14px 14px 0;
    background:
        radial-gradient(130% 90% at 50% -30%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%),
        #0f1116;
    cursor: pointer;
}
.cert-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
    transition: transform .5s ease;
}
.cert-card:hover .cert-media img { transform: translateY(-2px) scale(1.015); }
.cert-media::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 42px;
    background: linear-gradient(to bottom, transparent, #0f1116);
    pointer-events: none;
}
.cert-chip {
    position: absolute;
    top: 22px; right: 22px;
    background: rgba(6, 8, 12, 0.7);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 5px 11px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.cert-overlay {
    position: absolute;
    inset: 14px 14px 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 24%, rgba(6, 8, 12, 0.45));
    opacity: 0;
    transition: opacity .3s ease;
}
.cert-card:hover .cert-overlay { opacity: 1; }
.cert-view {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #111;
    font-weight: 700;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 9999px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    transform: translateY(6px);
    transition: transform .3s ease;
}
.cert-card:hover .cert-view { transform: translateY(0); }
.cert-view i { width: 16px; height: 16px; }
.cert-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.cert-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cert-issuer-ico {
    width: 30px; height: 30px;
    flex: 0 0 auto;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}
.cert-issuer-ico i { width: 16px; height: 16px; }
.cert-issuer { font-size: 12.5px; color: #9aa4b2; font-weight: 500; }
.cert-title {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 auto;
    transition: color .3s ease;
}
.cert-card:hover .cert-title { color: var(--accent); }
.cert-verify {
    align-self: flex-start;
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    padding: 8px 15px;
    border-radius: 10px;
    transition: background .2s ease, border-color .2s ease;
}
.cert-verify:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); }
.cert-verify i { width: 15px; height: 15px; }

/* Certificate lightbox (uses the shared modal) */
.cert-lightbox img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* ── Education timeline ─────────────────────────────────────────────────
   Rail with accent dots + framed cards (per-entry --accent). */
.edu-timeline { position: relative; padding-left: 34px; }
.edu-timeline::before {
    content: '';
    position: absolute;
    left: 11px; top: 10px; bottom: 10px;
    width: 2px;
    background: linear-gradient(180deg, #3b82f6, #22c55e, #a855f7);
    opacity: .4;
    border-radius: 2px;
}
.edu-item { position: relative; margin-bottom: 26px; }
.edu-item:last-child { margin-bottom: 0; }
.edu-item::before {
    content: '';
    position: absolute;
    left: -29px; top: 28px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
    transition: box-shadow .3s ease;
}
.edu-item:hover::before { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); }
.edu-card {
    background: linear-gradient(180deg, #14161c, #0f1116);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--accent);
    border-radius: 16px;
    padding: 20px 22px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.edu-card:hover {
    transform: translateX(4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    border-left-color: var(--accent);
}
.edu-head { display: flex; align-items: flex-start; gap: 14px; }
.edu-ico {
    width: 44px; height: 44px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}
.edu-ico i { width: 22px; height: 22px; }
.edu-heading { flex: 1; min-width: 0; }
.edu-degree { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.25; margin: 0; }
.edu-inst {
    font-size: 13.5px; color: var(--accent); font-weight: 600;
    margin: 4px 0 0; display: flex; align-items: center; gap: 5px;
}
.edu-inst i { width: 13px; height: 13px; opacity: .8; }
.edu-grade { flex: 0 0 auto; text-align: right; }
.edu-grade-val { display: block; font-size: 25px; font-weight: 900; color: var(--accent); line-height: 1; letter-spacing: -.02em; }
.edu-grade-max { font-size: 13px; font-weight: 700; opacity: .6; }
.edu-grade-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #8b96a5; margin-top: 5px; white-space: nowrap; }
.edu-sub {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 15px 0; padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.edu-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #9aa4b2; }
.edu-date i { width: 13px; height: 13px; }
.edu-status {
    font-size: 11px; font-weight: 700; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    padding: 3px 10px; border-radius: 9999px;
}
.edu-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.edu-tags span {
    font-size: 11.5px; color: #c7cdd6;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 10px; border-radius: 7px;
}
@media (max-width: 480px) {
    .edu-timeline { padding-left: 26px; }
    .edu-item::before { left: -21px; }
    .edu-head { flex-wrap: wrap; }
    .edu-grade { text-align: left; width: 100%; order: 3; margin-top: 6px; }
    .edu-grade-val { font-size: 22px; }
}

/* Header colour follows the section painted under it. Tailwind's
   .text-white / .text-gray-900 utilities are not in the prebuilt build,
   so the header's toggled class only colours nav links (via the rules
   above) and left the logo + hamburger dark-on-dark. Set them here. */
#header.text-white,
#header.text-white a { color: #ffffff; }
#header.text-gray-900,
#header.text-gray-900 a { color: #111827; }

/* Decorative blur orbs in dark sections must stay out of flow. The
   `.bg-dark > *` rule above forces every direct child to position:relative,
   which put the orbs in the layout and added ~600px of empty height above
   each dark section's content. Restore their intended absolute positioning. */
.bg-dark > .absolute { position: absolute; }

/* The prebuilt Tailwind build doesn't apply .inline-flex, so the
   "View all repositories" button fell back to display:inline (icon
   stacked above the text, button blown up). Define it explicitly. */
.inline-flex { display: inline-flex; }

/* Section headers: heading (left) + description (right) were split into two
   equal columns, so the description sat far right with a big empty gap.
   Size the heading to its content and let the description follow right after
   it, tightening the gap consistently regardless of heading length. */
@media (min-width: 1024px) {
    .section-head { grid-template-columns: auto minmax(0, 1fr); column-gap: 3rem; }
    .section-head > p:last-child { align-self: center; }
}