/* ================================================================
           DESIGN TOKENS — Edit colors, sizes, spacing, and easing here.
           These variables cascade through the entire stylesheet.
           ================================================================ */         :root {
            /* Background shades */
            --bg: #030305;
            --bg-card: rgba(10, 11, 20, 0.45);
            --bg-card-hover: rgba(12, 14, 28, 0.6);

            /* Glass borders */
            --border: rgba(255, 255, 255, 0.06);
            --border-hover: rgba(255, 255, 255, 0.16);

            /* Typography */
            --text: #f0f0f0;
            --text-muted: #9a9ab0;
            /* !! EDIT: Muted text color — raise hex brightness for more visibility !! */
            --text-dim: rgba(240, 240, 240, 0.4);

            /* !! EDIT: Primary accent color — currently cyan !! */
            --accent: #22d3ee;
            --accent-dim: rgba(34, 211, 238, 0.12);
            --accent-border: rgba(34, 211, 238, 0.25);

            /* !! EDIT: Secondary accent color — currently soft purple !! */
            --purple: #a78bfa;
            --purple-dim: rgba(167, 139, 250, 0.12);

            /* Glass blur amount */
            --blur: 28px;

            /* Layout */
            --max-width: 960px;
            --section-gap: 140px;
            --card-radius: 18px;

            /* Easing curves */
            --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
            --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
        }

        main {
            opacity: 0;
            transform: translateY(50px);
            filter: blur(8px);
            transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        body.preloader-done main {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }

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

        html {
            scroll-behavior: auto;
            /* Lenis handles smooth scrolling on desktop */
        }

        /* On mobile (no Lenis): use native CSS smooth scroll for anchor links */
        @media (hover: none) and (pointer: coarse) {
            html {
                scroll-behavior: smooth;
            }
        }

        /* Lenis compatibility overrides */
        html.lenis,
        html.lenis body {
            height: auto;
        }

        .lenis.lenis-smooth {
            scroll-behavior: auto !important;
        }

        .lenis.lenis-stopped {
            overflow: hidden;
        }

        /* On mobile, ensure Lenis-stopped doesn't permanently block scroll.
           When smoothTouch is false, Lenis hands off to native scroll,
           so lenis-smooth is not set on mobile — this is intentional. */
        @media (max-width: 768px) {
            .lenis.lenis-stopped {
                overflow: hidden;
            }
        }

        /* Prevent jiggle on scroll: isolate stacking contexts for animated elements.
           NOTE: 'contain: layout' would break position:fixed on mobile, so use 'style' only. */
        .connect-right-column,
        .phone-stage-wrapper {
            contain: style;
            isolation: isolate;
        }

        /* Prevent horizontal swipe bounce but keep vertical native scrolling completely free */
        html, body {
            overscroll-behavior-x: none;
            overscroll-behavior-y: auto;
            /* Ensure body doesn't inadvertently clip scroll */
            min-height: 100%;
        }

        body {
            background: radial-gradient(circle at 50% 50%, #0d0c1d 0%, #030306 100%), #030306;
            color: var(--text);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            font-size: 16px;
            line-height: 1.6;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            cursor: none;
            /* Default cursor is hidden — we use a custom one */
            /* Keep touch-action auto to let mobile Chrome composite scroll gestures natively */
            touch-action: auto;
            /* Smooth momentum scrolling on older iOS/Safari */
            -webkit-overflow-scrolling: touch;
        }

        /* Subtle blueprint grid matrix background overlay */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image: 
                radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.065) 1.2px, transparent 0);
            background-size: 28px 28px;
            pointer-events: none;
            z-index: 1;
        }


        /* ================================================================
           CUSTOM CURSOR — A small dot + lagging ring
           The dot snaps to the mouse instantly.
           The ring follows with a smooth LERP (lag effect).
           ================================================================ */
        #cursor-dot {
            position: fixed;
            top: 0;
            left: 0;
            width: 7px;
            height: 7px;
            background: var(--accent);
            border-radius: 50%;
            pointer-events: none;
            z-index: 10000;
            transform: translate(-50%, -50%);
            opacity: 1;
            display: block;
            /* Smooth size transitions on state changes */
            transition: width 0.25s var(--ease-out),
                height 0.25s var(--ease-out),
                background 0.25s ease,
                opacity 0.2s ease;
        }

        #cursor-ring {
            position: fixed;
            top: 0;
            left: 0;
            width: 36px;
            height: 36px;
            border: 1.5px solid rgba(34, 211, 238, 0.45);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            opacity: 1;
            display: block;
            transition: width 0.35s var(--ease-out),
                height 0.35s var(--ease-out),
                border-color 0.35s ease,
                background 0.35s ease,
                opacity 0.3s ease;
        }

        /* Cursor expands when hovering clickable elements */
        body.cursor-hover #cursor-dot {
            width: 5px;
            height: 5px;
            opacity: 0.5;
        }

        body.cursor-hover #cursor-ring {
            width: 52px;
            height: 52px;
            border-color: rgba(34, 211, 238, 0.22);
            background: rgba(34, 211, 238, 0.04);
        }


        /* ================================================================
           AMBIENT BACKGROUND ORBS — Redesigned Toned Smooth Glows
           Fixed blurred color blobs that drift slowly for depth.
           Each orb has its own unique animation, with soft blurs and low opacity.
           ================================================================ */
        .orb-layer {
            position: fixed;
            /* Keep fixed in viewport for correct percentage sizing */
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .orb {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            mix-blend-mode: screen;
            filter: blur(60px);
            opacity: 0.85;
            will-change: transform;
        }

        /* TOP-LEFT — Soft Cyan-Purple glow */
        .orb-1 {
            width: 900px;
            height: 900px;
            background: radial-gradient(circle, rgba(34, 211, 238, 0.38) 0%, rgba(167, 139, 250, 0.18) 50%, transparent 75%);
            top: -25%;
            left: -25%;
            animation: orbFloat1 28s ease-in-out infinite alternate;
        }

        /* BOTTOM-RIGHT — Soft Purple-Rose glow */
        .orb-2 {
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(167, 139, 250, 0.32) 0%, rgba(236, 72, 153, 0.15) 50%, transparent 75%);
            bottom: -20%;
            right: -20%;
            animation: orbFloat2 34s ease-in-out infinite alternate;
        }

        /* CENTER — Soft Rose glow for warmth */
        .orb-3 {
            width: 700px;
            height: 700px;
            background: radial-gradient(circle, rgba(236, 72, 153, 0.26) 0%, rgba(34, 211, 238, 0.12) 50%, transparent 75%);
            top: 30%;
            left: 20%;
            animation: orbFloat3 24s ease-in-out infinite alternate;
        }

        /* Float path 1 — drifts right-down */
        @keyframes orbFloat1 {
            0% {
                transform: translate(0, 0) scale(1);
            }

            50% {
                transform: translate(8vw, 8vh) scale(1.05);
            }

            100% {
                transform: translate(-4vw, 10vh) scale(0.98);
            }
        }

        /* Float path 2 — drifts left-up */
        @keyframes orbFloat2 {
            0% {
                transform: translate(0, 0) scale(1);
            }

            50% {
                transform: translate(-7vw, -8vh) scale(1.08);
            }

            100% {
                transform: translate(6vw, -6vh) scale(0.95);
            }
        }

        /* Float path 3 — circular wander */
        @keyframes orbFloat3 {
            0% {
                transform: translate(0, 0) scale(1);
            }

            50% {
                transform: translate(-6vw, 6vh) scale(0.96);
            }

            100% {
                transform: translate(4vw, -7vh) scale(1.02);
            }
        }


        /* ================================================================
           LAYOUT — Content wrapper
           ================================================================ */
        .container {
            position: relative;
            z-index: 1;
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 32px;
        }

        /* Every page section */
        .section {
            padding-bottom: var(--section-gap);
            scroll-margin-top: 80px;
            /* GPU compositing hint for smooth scroll performance */
            will-change: auto;
        }


        /* ================================================================
           FLOATING BRAND LOGO — Fixed top-left K button with scroll ring
           ================================================================ */
        #brand {
            position: fixed;
            top: 22px;
            left: 26px;
            z-index: 1001;
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        /* Glass background circle behind the K */
        .brand-bg {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: background 0.4s ease, border-color 0.4s ease;
        }

        /* SVG progress ring — fills as you scroll down the page */
        .brand-ring-svg {
            position: absolute;
            inset: -5px;
            width: calc(100% + 10px);
            height: calc(100% + 10px);
            pointer-events: none;
        }

        .brand-ring-track {
            fill: none;
            stroke: rgba(255, 255, 255, 0.05);
            stroke-width: 1.5;
        }

        .brand-ring-fill {
            fill: none;
            stroke: var(--accent);
            stroke-width: 1.5;
            stroke-linecap: round;
            /* Circumference for r=23: 2 * PI * 23 ≈ 144.51 */
            stroke-dasharray: 144.51;
            stroke-dashoffset: 144.51;
            /* Starts empty; JS fills it */
            transform: rotate(-90deg);
            transform-origin: center;
            transition: stroke-dashoffset 0.1s linear;
        }

        /* The K letter itself */
        .brand-letter {
            position: relative;
            z-index: 2;
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: var(--text);
            user-select: none;
            transition: color 0.3s ease, text-shadow 0.3s ease;
        }

        #brand:hover .brand-bg {
            background: var(--accent-dim);
            border-color: var(--accent-border);
        }

        #brand:hover .brand-letter {
            color: var(--accent);
            text-shadow: 0 0 18px rgba(34, 211, 238, 0.6);
        }


        /* ================================================================
           NAVIGATION — Minimal floating pill, appears after first scroll
           ================================================================ */
        #nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            display: flex;
            justify-content: center;
            padding: 18px 32px;
            pointer-events: none;
            /* The pill itself is interactive */
        }

        .nav-pill {
            position: relative;
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 5px 6px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border);
            border-radius: 999px;
            backdrop-filter: blur(var(--blur));
            -webkit-backdrop-filter: blur(var(--blur));
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
            pointer-events: auto;
            /* Hidden by default; JS adds .visible after scroll */
            opacity: 0;
            visibility: hidden;
            transform: translateY(-20px) scale(0.94);
            transition: opacity 0.5s var(--ease-out),
                transform 0.5s var(--ease-spring),
                visibility 0.5s;
        }

        .nav-pill.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        /* Sliding background pill that moves between active links */
        .nav-indicator {
            position: absolute;
            top: 4px;
            left: 0;
            height: 32px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            pointer-events: none;
            z-index: 0;
            /* Position is driven by JS, no CSS transition needed here */
        }

        /* Individual nav links */
        .nav-link {
            position: relative;
            z-index: 1;
            padding: 6px 14px;
            border-radius: 999px;
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.83rem;
            font-weight: 500;
            letter-spacing: 0.01em;
            white-space: nowrap;
            transition: color 0.25s ease;
            user-select: none;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--text);
        }

        /* Hide mobile navigation toggle on desktop */
        .mobile-nav-toggle {
            display: none;
        }

        /* Hide mobile drawer sub-elements on desktop */
        .nav-overlay {
            display: none;
        }

        .drawer-header {
            display: none;
        }

        .drawer-footer {
            display: none;
        }


        /* ================================================================
           GLASS CARD — Core reusable component
           Apply class="glass" to any panel for the frosted glass look.
           ================================================================ */
        .glass {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--card-radius);
            backdrop-filter: blur(var(--blur));
            -webkit-backdrop-filter: blur(var(--blur));
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            transition: background 0.4s var(--ease-out),
                border-color 0.4s var(--ease-out),
                box-shadow 0.4s var(--ease-out),
                transform 0.4s var(--ease-out);
        }

        .glass:hover {
            background: var(--bg-card-hover);
            border-color: var(--border-hover);
            box-shadow: 0 16px 56px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.09);
        }


        /* ================================================================
           TYPOGRAPHY HELPERS
           ================================================================ */

        /* Small uppercase label / eyebrow text */
        .eyebrow {
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        /* Section header with a fading line after it */
        .section-title {
            font-size: clamp(2rem, 4vw, 2.5rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            color: var(--text);
            margin-bottom: 44px;
            display: flex;
            align-items: center;
            gap: 18px;
        }

        /* The decorative line extending from the title */
        .section-title::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(to right, var(--border), transparent);
        }

        /* Gradient-colored text (used on hero name accent) */
        .gradient-text {
            background: linear-gradient(125deg, var(--accent) 0%, var(--purple) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }


        /* ================================================================
           TAG / PILL — Small rounded labels
           Use .tag-cyan or .tag-purple for colored variants.
           ================================================================ */
        .tag {
            position: relative;
            display: inline-flex;
            align-items: center;
            padding: 6px 14px;
            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 999px;
            font-size: 0.84rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.85);
            /* redesign: highly visible and crisp text */
            letter-spacing: 0.02em;
            transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease-spring), box-shadow 0.3s ease;
            cursor: default;
        }

        .tag:hover {
            color: #fff;
            background: rgba(34, 211, 238, 0.08);
            border-color: transparent;
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 4px 14px rgba(34, 211, 238, 0.2);
        }

        .tag-cyan {
            color: var(--accent);
            background: var(--accent-dim);
            border-color: var(--accent-border);
        }

        .tag-cyan:hover {
            background: rgba(34, 211, 238, 0.16);
            box-shadow: 0 4px 14px rgba(34, 211, 238, 0.3);
        }

        .tag-purple {
            color: var(--purple);
            background: var(--purple-dim);
            border-color: rgba(167, 139, 250, 0.25);
        }

        .tag-purple:hover {
            background: rgba(167, 139, 250, 0.16);
            box-shadow: 0 4px 14px rgba(167, 139, 250, 0.3);
            color: var(--purple);
        }


        /* ================================================================
           HERO SECTION
           ================================================================ */
        #hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 80px;
            width: 100%;
            padding: 100px 0 80px;
        }

        .hero-left {
            display: flex;
            flex-direction: column;
            gap: 22px;
        }

        /* Pulsing "available" status badge */
        .hero-status {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 5px 13px;
            background: var(--accent-dim);
            border: 1px solid var(--accent-border);
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--accent);
            width: fit-content;
        }

        .status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
            /* Subtle breathing pulse animation */
            animation: statusPulse 2.4s ease infinite;
        }

        @keyframes statusPulse {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.4;
                transform: scale(0.75);
            }
        }

        /* ---- Hero name — large display heading ---- */
        .hero-name {
            font-size: clamp(3.2rem, 7vw, 5.2rem);
            font-weight: 800;
            letter-spacing: -0.04em;
            line-height: 1.0;
            color: var(--text);
            word-break: break-word;
            /* graceful wrap on mobile */
        }

        /* On desktop keep it on one line */
        @media (min-width: 769px) {
            .hero-name {
                white-space: nowrap;
            }
        }

        /* The "J" initial — gradient + separator dot */
        .hero-initial {
            display: inline-flex;
            align-items: baseline;
            gap: 0.12em;
        }

        /* Thin separator between name and initial */
        .hero-initial::before {
            content: '·';
            font-size: 0.55em;
            color: rgba(255, 255, 255, 0.25);
            letter-spacing: 0;
            font-weight: 300;
            margin-right: 0.04em;
        }

        /* Short description under name */
        .hero-tagline {
            font-size: clamp(1.1rem, 2vw, 1.35rem);
            color: var(--text-muted);
            line-height: 1.7;
            max-width: 580px;
            font-weight: 400;
        }

        /* ----------------------------------------------------------------
           BENTO PROFILE GRID (Separated Education & Actions Cards)
        ---------------------------------------------------------------- */
        .edu-card {
            position: relative;
            padding: 24px;
            overflow: visible;
            /* allow border running outline to display */
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
            width: 100%;
            max-width: 600px;
            margin-top: 10px;
        }

        /* Full card running border outline inside education card */
        .edu-card::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            padding: 1.5px;
            background: linear-gradient(90deg, var(--accent), var(--purple), var(--accent));
            background-size: 200% auto;
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0.55;
            transition: opacity 0.4s ease;
            pointer-events: none;
            z-index: 2;
            animation: borderRun 3.5s linear infinite;
        }

        .edu-card:hover::before {
            opacity: 1;
            animation: borderRun 1.8s linear infinite;
        }

        /* Standalone Actions Row Wrapper */
        .profile-actions-wrapper {
            display: flex;
            align-items: center;
            gap: 16px;
            width: 100%;
            max-width: 600px;
            margin-top: 16px;
        }

        .edu-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 4px;
        }

        .edu-icon-box {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: var(--accent-dim);
            border: 1px solid var(--accent-border);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            flex-shrink: 0;
            transition: background 0.3s ease, transform 0.4s var(--ease-spring);
        }

        .edu-card:hover .edu-icon-box {
            background: rgba(34, 211, 238, 0.18);
            transform: scale(1.08) rotate(-5deg);
        }

        .edu-degree {
            font-size: 0.92rem;
            font-weight: 600;
            color: var(--text);
            line-height: 1.35;
        }

        .edu-school {
            font-size: 0.8rem;
            color: var(--text-muted);
            line-height: 1.45;
        }

        .edu-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.68rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--purple);
            background: var(--purple-dim);
            border: 1px solid rgba(167, 139, 250, 0.22);
            padding: 3px 9px;
            border-radius: 999px;
            width: fit-content;
            margin-top: 4px;
        }

        /* Actions cell card styling */
        /* Actions cell styling removed since it is now standalone actions bar */

        /* Placeholder that holds space for Resume Button when fixed/docked */
        .resume-placeholder {
            width: 120px;
            height: 44px;
            position: relative;
        }

        /* Resume download button */
        .resume-btn {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.90rem;
            font-weight: 500;
            letter-spacing: 0.01em;
            box-sizing: border-box;
            cursor: pointer;
            z-index: 999;
            transition:
                transform 0.4s var(--ease-spring),
                background-color 0.35s ease,
                border-color 0.35s ease,
                color 0.35s ease,
                box-shadow 0.35s ease;
        }


        /* Running border effect on the resume button on hover */
        .resume-btn::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            padding: 1.5px;
            /* slightly thicker line */
            background: linear-gradient(90deg, var(--accent), var(--purple), var(--accent));
            background-size: 200% auto;
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            z-index: 2;
        }

        .resume-btn:hover::before {
            opacity: 1;
            animation: borderRun 1.5s linear infinite;
        }

        .resume-btn:hover {
            color: var(--text);
            background: rgba(255, 255, 255, 0.06);
            border-color: transparent;
            /* allow gradient border to stand out */
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(34, 211, 238, 0.25);
        }

        .resume-btn svg {
            flex-shrink: 0;
            position: relative;
            z-index: 3;
            transition: transform 0.4s var(--ease-spring);
        }

        .resume-btn:hover svg {
            transform: translateY(2px) scale(1.1);
        }


        /* Social buttons container */
        .social-actions-group {
            display: flex;
            align-items: center;
            gap: 12px;
            width: auto;
        }

        /* Circular social buttons next to resume button */
        .action-icon-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border);
            border-radius: 50%;
            color: var(--text-muted);
            text-decoration: none;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition:
                color 0.35s ease,
                background 0.35s ease,
                border-color 0.35s ease,
                transform 0.4s var(--ease-out),
                box-shadow 0.4s ease;
        }

        .action-icon-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -80%;
            width: 55%;
            height: 100%;
            background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.06), transparent);
            pointer-events: none;
            transition: left 0s;
        }

        .action-icon-btn:hover::before {
            left: 130%;
            transition: left 0.6s var(--ease-smooth);
        }

        .action-icon-btn:hover {
            color: var(--accent);
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(34, 211, 238, 0.35);
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(34, 211, 238, 0.15);
        }

        /* Custom glow styles matching their brand colors */
        .action-icon-btn.action-linkedin:hover {
            color: var(--accent);
            border-color: rgba(34, 211, 238, 0.45);
            background: rgba(34, 211, 238, 0.12);
            box-shadow: 0 8px 28px rgba(34, 211, 238, 0.25);
        }

        .action-icon-btn.action-email:hover {
            color: #ec4899;
            border-color: rgba(236, 72, 153, 0.45);
            background: rgba(236, 72, 153, 0.12);
            box-shadow: 0 8px 28px rgba(236, 72, 153, 0.25);
        }

        .action-icon-btn svg {
            flex-shrink: 0;
            transition: transform 0.4s var(--ease-spring);
        }

        .action-icon-btn:hover svg {
            transform: scale(1.15);
        }

        /* ---- Hero Right — Profile Photo ---- */
        .hero-right {
            position: relative;
            width: 270px;
            height: 270px;
            flex-shrink: 0;
        }

        /* Rotating conic gradient ring behind the photo */
        .photo-ring {
            position: absolute;
            inset: -3px;
            border-radius: 30px;
            background: conic-gradient(from 0deg,
                    var(--accent),
                    var(--purple),
                    rgba(236, 72, 153, 0.6),
                    var(--accent));
            opacity: 0.45;
            animation: spinRing 9s linear infinite;
            transition: opacity 0.5s ease;
        }

        .hero-right:hover .photo-ring {
            opacity: 1;
        }

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

        /* The photo container */
        .photo-frame {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 26px;
            overflow: hidden;
            background: rgba(10, 10, 20, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1;
        }

        .photo-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 26px;
            transition: transform 0.5s var(--ease-out);
        }

        .hero-right:hover .photo-frame img {
            transform: scale(1.03);
        }

        /* Glossy overlay on the photo */
        .photo-gloss {
            position: absolute;
            inset: 0;
            border-radius: 26px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, transparent 55%);
            pointer-events: none;
            z-index: 2;
        }

        /* ================================================================
           SCROLL NUDGE — Premium glowing pill with animated chevron
           ================================================================ */
        .scroll-nudge {
            position: absolute;
            bottom: 36px;
            left: 50%;
            /* Start invisible — JS adds .appeared to fade in */
            opacity: 0;
            transform: translateX(-50%) translateY(16px);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            text-decoration: none;
            cursor: pointer;
            z-index: 10;
            pointer-events: none;
            /* enabled by .appeared */
            transition: opacity 0.6s var(--ease-out),
                transform 0.6s var(--ease-out);
        }

        /* Entry state — JS adds this after 1.2s delay */
        .scroll-nudge.appeared {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
            pointer-events: auto;
        }

        /* Hidden on scroll */
        .scroll-nudge.appeared.hidden {
            opacity: 0;
            pointer-events: none;
            transform: translateX(-50%) translateY(12px);
        }

        /* The pill container */
        .scroll-nudge-pill {
            position: relative;
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 10px 22px;
            border-radius: 100px;
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.10);
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            /* Subtle glow aura that pulses */
            box-shadow:
                0 0 0 0 rgba(34, 211, 238, 0),
                0 4px 20px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
            transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
            animation: scrollPillPulse 3s ease-in-out infinite;
        }

        /* Running border glow on the pill */
        .scroll-nudge-pill::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            background: conic-gradient(from var(--scroll-angle, 0deg),
                    transparent 0deg,
                    rgba(34, 211, 238, 0.7) 60deg,
                    rgba(167, 139, 250, 0.5) 120deg,
                    transparent 180deg);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            padding: 1px;
            opacity: 0.7;
            animation: scrollBorderSpin 3s linear infinite;
        }

        /* Outer glow pulse ring */
        .scroll-nudge-pill::after {
            content: '';
            position: absolute;
            inset: -5px;
            border-radius: inherit;
            border: 1px solid rgba(34, 211, 238, 0.12);
            animation: scrollRingExpand 2.5s ease-in-out infinite;
        }

        .scroll-nudge:hover .scroll-nudge-pill {
            background: rgba(34, 211, 238, 0.07);
            border-color: rgba(34, 211, 238, 0.30);
            color: var(--accent);
            box-shadow:
                0 0 18px rgba(34, 211, 238, 0.18),
                0 4px 24px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(34, 211, 238, 0.10);
        }

        /* The scroll label text */
        .scroll-nudge-label {
            position: relative;
            z-index: 1;
        }

        /* The chevron icon box */
        .scroll-nudge-chevron {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: rgba(34, 211, 238, 0.10);
            border: 1px solid rgba(34, 211, 238, 0.20);
            transition: background 0.3s ease, border-color 0.3s ease;
        }

        .scroll-nudge:hover .scroll-nudge-chevron {
            background: rgba(34, 211, 238, 0.18);
            border-color: rgba(34, 211, 238, 0.45);
        }

        /* Bouncing chevron SVG */
        .scroll-nudge-chevron svg {
            animation: chevronBounce 1.8s ease-in-out infinite;
        }

        /* Vertical connector line below pill */
        .scroll-nudge-line {
            width: 1px;
            height: 0px;
            background: linear-gradient(to bottom, rgba(34, 211, 238, 0.35), transparent);
            margin-top: 0;
            animation: scrollLineGrow 3s ease-in-out infinite;
        }

        /* ---- Keyframes ---- */
        /* scrollNudgeAppear keyframe removed — appearance is now class-driven */

        @keyframes scrollBorderSpin {
            to {
                --scroll-angle: 360deg;
            }
        }

        @keyframes scrollPillPulse {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(6px);
            }
        }

        @keyframes scrollRingExpand {

            0%,
            100% {
                inset: -4px;
                opacity: 0.4;
            }

            50% {
                inset: -9px;
                opacity: 0;
            }
        }

        @keyframes chevronBounce {

            0%,
            100% {
                transform: translateY(-1px);
                opacity: 0.6;
            }

            50% {
                transform: translateY(2px);
                opacity: 1;
            }
        }

        @keyframes scrollLineGrow {

            0%,
            100% {
                height: 0px;
                opacity: 0;
            }

            40%,
            60% {
                height: 20px;
                opacity: 1;
            }
        }

        @property --scroll-angle {
            syntax: '<angle>';
            inherits: false;
            initial-value: 0deg;
        }


        /* ================================================================
           ABOUT SECTION
           ================================================================ */
        #about {
            position: relative;
            padding-top: 120px;
            padding-bottom: 140px;
            overflow: visible;
            /* Let glows and parallax float outside bounds */
        }

        .about-container {
            position: relative;
            width: 100%;
            max-width: 860px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 2;
        }

        .about-title {
            font-size: clamp(3rem, 8vw, 5.4rem);
            font-weight: 900;
            letter-spacing: -0.05em;
            text-transform: uppercase;
            text-align: center;
            width: 100%;
            margin-bottom: 35px;
            background: linear-gradient(180deg, #ffffff 0%, #a3a3a3 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            display: block;
        }

        /* Remove default line extension for redesigned about section */
        #about .section-title::after {
            display: none;
        }

        .about-text {
            text-align: center;
            font-family: 'Kanit', system-ui, -apple-system, sans-serif;
            max-width: 840px;
            margin: 0 auto;
            letter-spacing: 0.01em;
            line-height: 1.625;
        }

        .about-lead {
            font-size: clamp(1.18rem, 2.3vw, 1.38rem);
            font-weight: 700;
            color: rgba(215, 226, 234, 0.9);
            margin-bottom: 26px;
        }

        .about-sub {
            font-size: clamp(1.02rem, 1.9vw, 1.18rem);
            font-weight: 400;
            font-style: italic;
            color: rgba(215, 226, 234, 0.5);
        }

        .white-reveal {
            font-weight: 700;
        }

        .char {
            opacity: 0.2;
            color: #D7E2EA;
            display: inline;
        }

        /* 3D Asset corner positioning and physics transitions */
        .about-asset-wrapper {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            z-index: 1;
            /* Scroll parallax via hardware-accelerated transforms */
            /* Note: will-change:transform removed to avoid creating a containing block
               that breaks position:fixed elements on mobile browsers */
        }

        .about-asset-img {
            width: 100%;
            height: auto;
            object-fit: contain;
            user-select: none;
            pointer-events: auto;
            cursor: pointer;
            /* Spring timing curve for dynamic hover physics popouts */
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* Hover states matching the Tactile3DIcon redesign: scale: 1.22, brightness(1.1) and 10px 25px glow shadow */
        .about-asset-img:hover {
            transform: scale(1.22);
            filter: brightness(1.1) drop-shadow(0 10px 25px var(--glow-color, rgba(215, 226, 234, 0.25)));
        }

        /* Mathematically offset from center to stay locked outside text boundaries */
        .asset-top-left {
            top: 4%;
            left: calc(50% - 670px);
            width: 210px;
            --glow-color: rgba(34, 211, 238, 0.55);
            /* Cyan */
        }

        .asset-top-right {
            top: 4%;
            right: calc(50% - 670px);
            width: 210px;
            --glow-color: rgba(236, 72, 153, 0.55);
            /* Pink/Magenta */
        }

        .asset-bottom-left {
            bottom: 8%;
            left: calc(50% - 620px);
            width: 180px;
            --glow-color: rgba(167, 139, 250, 0.55);
            /* Purple */
        }

        .asset-bottom-right {
            bottom: 8%;
            right: calc(50% - 660px);
            width: 220px;
            --glow-color: rgba(34, 211, 238, 0.45);
            /* Cyan-purple mix */
        }

        /* Responsive adjustments for viewports narrower than 1150px (tablets & mobile) */
        @media (max-width: 1150px) {
            #about {
                padding-top: 180px;
                padding-bottom: 190px;
            }

            .about-asset-wrapper {
                position: absolute;
                z-index: 1;
            }

            .asset-top-left {
                top: 30px;
                left: 6%;
                width: 105px;
            }

            .asset-top-right {
                top: 30px;
                right: 6%;
                width: 105px;
            }

            .asset-bottom-left {
                bottom: 30px;
                left: 6%;
                width: 100px;
            }

            .asset-bottom-right {
                bottom: 30px;
                right: 6%;
                width: 110px;
            }
        }

        /* Responsive adjustments for phone viewports */
        @media (max-width: 480px) {
            #about {
                padding-top: 150px;
                padding-bottom: 160px;
            }

            .asset-top-left {
                top: 20px;
                left: 4%;
                width: 85px;
            }

            .asset-top-right {
                top: 20px;
                right: 4%;
                width: 85px;
            }

            .asset-bottom-left {
                bottom: 20px;
                left: 4%;
                width: 80px;
            }

            .asset-bottom-right {
                bottom: 20px;
                right: 4%;
                width: 90px;
            }
        }


        /* ================================================================
           HIGHLIGHTS SECTION — 3D Card Stack Carousel
           Cards pop forward one at a time; side cards recede into depth.
           Description only shows on hover of the active front card.
           !! EDIT: Adjust --card-w and heights as needed !!
           ================================================================ */

        /* Stage: sets up the 3D perspective space */
        .highlights-stage {
            position: relative;
            width: 100%;
            height: 320px;
            /* !! EDIT: Increase if your text overflows !! */
            perspective: 1100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Each individual card — absolutely positioned and transformed */
        .hl-card {
            position: absolute;
            width: min(520px, 90%);
            padding: 24px 28px;
            display: flex;
            flex-direction: column;
            gap: 0;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 16px;
            background: rgba(10, 10, 16, 0.8);
            box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.05);
            /* All property transitions handled here */
            transition:
                transform 0.65s cubic-bezier(0.34, 1.2, 0.64, 1),
                opacity 0.55s var(--ease-out),
                box-shadow 0.55s var(--ease-out),
                border-color 0.55s var(--ease-out),
                filter 0.55s var(--ease-out);
            will-change: transform, opacity;
        }

        /* ---- ACTIVE — front card, full size ---- */
        .hl-card.hl-active {
            transform: translateX(0) translateZ(0) scale(1) rotateY(0deg);
            opacity: 1;
            z-index: 3;
            border-color: var(--border-hover);
            background: var(--bg-card-hover);
            backdrop-filter: blur(var(--blur)) saturate(135%);
            -webkit-backdrop-filter: blur(var(--blur)) saturate(135%);
            box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.1);
            filter: none;
            pointer-events: auto;
        }

        .hl-card.hl-active:hover {
            border-color: var(--accent);
            box-shadow: 4px 4px 0px var(--accent-dim);
        }

        /* Pulsing glow ring disabled */
        .hl-card.hl-active::after {
            display: none;
        }

        /* ---- PREV — card to the left, receding into depth ---- */
        .hl-card.hl-prev {
            transform: translateX(-48%) translateZ(-120px) scale(0.82) rotateY(14deg);
            opacity: 0.35;
            z-index: 2;
            filter: blur(5px);
            /* Cinematic depth-of-field blur */
            pointer-events: auto;
            /* clickable to bring forward */
        }

        /* ---- NEXT — card to the right, receding into depth ---- */
        .hl-card.hl-next {
            transform: translateX(48%) translateZ(-120px) scale(0.82) rotateY(-14deg);
            opacity: 0.35;
            z-index: 2;
            filter: blur(5px);
            /* Cinematic depth-of-field blur */
            pointer-events: auto;
        }

        /* ---- HIDDEN — cards not visible ---- */
        .hl-card.hl-hidden {
            transform: translateZ(-220px) scale(0.6);
            opacity: 0;
            z-index: 1;
            pointer-events: none;
        }

        /* Side cards brighten on hover to signal they're clickable */
        .hl-card.hl-prev:hover,
        .hl-card.hl-next:hover {
            opacity: 0.7;
            filter: blur(0);
        }

        /* Shimmer sweep overlay — appears on hover of active card */
        .hl-card {
            overflow: hidden;
            /* clip the shimmer */
        }

        .hl-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(105deg,
                    transparent 0%,
                    rgba(255, 255, 255, 0.04) 40%,
                    rgba(255, 255, 255, 0.09) 50%,
                    rgba(255, 255, 255, 0.04) 60%,
                    transparent 100%);
            pointer-events: none;
            transition: left 0s;
            z-index: 0;
        }

        /* Fire shimmer sweep on hover of active card only */
        .hl-card.hl-active:hover::before {
            left: 130%;
            transition: left 0.65s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* Keep card content above shimmer */
        .hl-header,
        .hl-desc,
        .hl-tag-container {
            position: relative;
            z-index: 1;
        }

        /* Header layout for icon and title */
        .hl-header {
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
            transition: transform 0.5s var(--ease-spring);
        }

        /* Icon emoji */
        .hl-icon {
            font-size: 1.6rem;
            line-height: 1;
            transition: transform 0.5s var(--ease-spring), filter 0.5s ease;
        }

        /* Aesthetic slide/scale/glow animation on hover */
        .hl-card.hl-active:hover .hl-icon {
            transform: translateX(-6px) scale(1.15) rotate(-12deg);
            filter: drop-shadow(0 0 8px var(--accent));
        }

        /* Title */
        .hl-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text);
            line-height: 1.45;
            transition: color 0.3s ease, transform 0.5s var(--ease-spring);
        }

        /* Title picks up accent color and moves slightly right on hover */
        .hl-card.hl-active:hover .hl-title {
            color: var(--accent);
            transform: translateX(4px);
        }

        /* Description — COLLAPSED BY DEFAULT */
        .hl-desc {
            font-size: 0.88rem;
            color: rgba(220, 220, 232, 0);
            /* starts transparent */
            line-height: 1.75;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            margin-top: 0;
            transition: max-height 0.45s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.35s ease,
                color 0.35s ease,
                margin-top 0.45s ease;
        }

        /* Active card hover expands details */
        .hl-card.hl-active:hover .hl-desc {
            max-height: 120px;
            opacity: 0.72;
            color: rgba(220, 220, 232, 0.72);
            margin-top: 12px;
        }

        /* Description brightens to full white on mouse hover over text */
        .hl-card.hl-active:hover .hl-desc:hover {
            color: rgba(240, 240, 248, 0.95);
            opacity: 0.95;
        }

        /* Tag container — COLLAPSED BY DEFAULT */
        .hl-tag-container {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            margin-top: 0;
            transition: max-height 0.45s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.35s ease,
                margin-top 0.45s ease;
        }

        .hl-card.hl-active:hover .hl-tag-container {
            max-height: 60px;
            /* generous height to avoid vertical clipping */
            opacity: 1;
            margin-top: 12px;
            overflow: visible;
            /* prevents tag hover scale/translate transforms from being clipped */
        }

        /* Nav dots below the stage */
        .hl-dots {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 28px;
        }

        .hl-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            cursor: pointer;
            padding: 0;
            position: relative;
            overflow: hidden;
            transition: width 0.35s var(--ease-out), background 0.35s ease;
        }

        /* Active dot stretches into a pill */
        .hl-dot.hl-dot-active {
            width: 32px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.12);
            box-shadow: none;
        }

        /* Progress fill inside the active dot */
        .hl-dot.hl-dot-active::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 0%;
            background: var(--accent);
            box-shadow: none;
            border-radius: 999px;
            animation: var(--hl-animation-name, hlProgress) 4s linear forwards;
        }

        /* Pause progress animation when carousel is paused */
        .hl-dots.hl-paused .hl-dot.hl-dot-active::after {
            animation-play-state: paused;
        }

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


        /* ================================================================
           EXPERIENCE SECTION — Modern Split-Column Timeline
           ================================================================ */

        .exp-timeline {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 40px;
            padding: 20px 0;
            max-width: 900px;
            margin: 0 auto;
        }

        /* Central Glowing Spine */
        .exp-timeline::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: calc(30% + 25px); /* Centers exactly between 0.9fr and 50px dot space */
            width: 2px;
            background: linear-gradient(to bottom, 
                rgba(34, 211, 238, 0.1) 0%, 
                rgba(34, 211, 238, 0.65) 20%, 
                rgba(139, 92, 246, 0.65) 80%, 
                rgba(139, 92, 246, 0.1) 100%
            );
            box-shadow: 0 0 10px rgba(34, 211, 238, 0.2);
            z-index: 1;
        }

        .exp-item {
            display: grid;
            grid-template-columns: 0.9fr 50px 2.1fr;
            align-items: start;
            position: relative;
            z-index: 2;
            transition: all 0.4s var(--ease-out);
        }

        .exp-meta {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding-top: 14px;
            text-align: right;
            padding-right: 28px;
            align-items: flex-end;
        }

        .exp-year {
            font-size: 1.8rem;
            font-weight: 800;
            font-family: 'Outfit', sans-serif;
            background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.4) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -0.02em;
            line-height: 1;
        }

        .exp-date-range {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--accent);
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .exp-duration {
            font-size: 0.7rem;
            font-weight: 700;
            color: #10b981;
            background: rgba(16, 185, 129, 0.08);
            border: 1px solid rgba(16, 185, 129, 0.2);
            padding: 3px 10px;
            border-radius: 99px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            margin-top: 4px;
        }

        /* Dot column containing liquid glass node */
        .exp-dot-col {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 14px;
            height: 100%;
            position: relative;
        }

        .exp-liquid-node {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1.5px solid rgba(255, 255, 255, 0.25);
            background: rgba(10, 10, 16, 0.8);
            position: relative;
            z-index: 3;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
            transition: all 0.4s var(--ease-spring);
        }

        .exp-liquid-core {
            display: none;
        }

        /* Solid center dot with idle pulse animation */
        .exp-liquid-node::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 6px var(--accent);
            opacity: 0.8;
            animation: dot-idle-pulse 2.8s infinite ease-in-out;
            pointer-events: none;
            transition: all 0.4s var(--ease-spring);
        }

        /* Ripple Ring */
        .exp-liquid-node::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.6);
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 1.5px solid var(--accent);
            opacity: 0;
            transition: all 0.4s var(--ease-out);
            pointer-events: none;
        }

        @keyframes dot-idle-pulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
            50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; box-shadow: 0 0 8px var(--accent); }
        }

        @keyframes droplet-ripple {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(2.8);
                opacity: 0;
            }
        }

        /* Liquid Glass Content Card */
        .exp-content {
            padding: 28px 32px;
            border-radius: 24px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            backdrop-filter: blur(var(--blur)) saturate(135%);
            -webkit-backdrop-filter: blur(var(--blur)) saturate(135%);
            box-shadow: 
                0 15px 35px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Gloss Sheen Overlays */
        .exp-content::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
            pointer-events: none;
            z-index: 1;
        }

        /* Sliding shimmer effect */
        .exp-content::after {
            content: '';
            position: absolute;
            top: 0;
            left: -150%;
            width: 80%;
            height: 100%;
            background: linear-gradient(105deg,
                transparent 0%,
                rgba(255, 255, 255, 0.01) 30%,
                rgba(255, 255, 255, 0.08) 50%,
                rgba(255, 255, 255, 0.01) 70%,
                transparent 100%);
            pointer-events: none;
            z-index: 2;
            transition: left 0s;
        }

        /* Dynamic Glow border effect on hover */
        .exp-glow-border {
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1.5px;
            background: linear-gradient(135deg, rgba(34, 211, 238, 0.3), rgba(139, 92, 246, 0.3));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0.3;
            transition: all 0.4s ease;
            pointer-events: none;
            z-index: 2;
        }

        /* Header structure */
        .exp-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 12px;
        }

        .exp-role {
            font-size: 1.25rem;
            font-weight: 700;
            background: linear-gradient(to right, #ffffff, #e2e8f0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -0.01em;
            line-height: 1.2;
        }

        .exp-org {
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--accent);
            margin-top: 4px;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        /* Tech/industry logo wireframe socket */
        .exp-logo-socket {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
            transition: all 0.4s ease;
            flex-shrink: 0;
        }

        .exp-desc {
            font-size: 0.9rem;
            color: #94a3b8;
            line-height: 1.7;
            margin-bottom: 20px;
            transition: color 0.3s ease;
        }

        /* Tech tag pill group */
        .exp-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }

        .exp-tag-pill {
            font-size: 0.72rem;
            font-weight: 600;
            color: rgba(255,255,255,0.7);
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            padding: 4px 10px;
            border-radius: 8px;
            letter-spacing: 0.02em;
            transition: all 0.3s ease;
        }

        .exp-tag-pill:hover {
            background: rgba(34, 211, 238, 0.06);
            border-color: rgba(34, 211, 238, 0.25);
            color: var(--accent);
        }

        .exp-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.78rem;
            font-weight: 700;
            color: #ffffff;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 8px 16px;
            border-radius: 12px;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .exp-btn:hover {
            background: rgba(255,255,255,0.08);
            border-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        }

        /* Hover interactions */
        .exp-item:hover .exp-liquid-node {
            border-color: var(--purple);
            transform: scale(1.22);
            box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
        }

        .exp-item:hover .exp-liquid-node::before {
            animation: none;
            width: 6px;
            height: 6px;
            background: #ffffff;
            opacity: 1;
            box-shadow: 0 0 8px #ffffff;
            transform: translate(-50%, -50%) scale(1.2);
        }

        .exp-item:hover .exp-liquid-node::after {
            opacity: 1;
            transform: translate(-50%, -50%) scale(2.2);
            border-color: var(--purple);
            animation: droplet-ripple 1.6s infinite ease-out;
        }

        .exp-item:hover .exp-content {
            border-color: rgba(34, 211, 238, 0.35);
            background: rgba(34, 211, 238, 0.025);
            box-shadow: 
                0 30px 60px rgba(0, 0, 0, 0.65),
                0 0 40px rgba(34, 211, 238, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
            transform: translateY(-6px) scale(1.01);
        }

        .exp-item:hover .exp-content::after {
            left: 150%;
            transition: left 0.85s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .exp-item:hover .exp-glow-border {
            opacity: 1;
            background: linear-gradient(135deg, var(--accent), var(--purple));
        }

        .exp-item:hover .exp-logo-socket {
            border-color: rgba(34, 211, 238, 0.3);
            color: var(--accent);
            box-shadow: 0 0 15px rgba(34, 211, 238, 0.15);
        }

        .exp-item:hover .exp-desc {
            color: rgba(255, 255, 255, 0.85);
        }

        /* Responsive Mobile Layout */
        @media (max-width: 1023px) {
            .exp-timeline::before {
                left: 16px;
            }

            .exp-item {
                grid-template-columns: 32px 1fr;
                gap: 16px;
            }

            .exp-meta {
                grid-column: 2;
                grid-row: 1;
                text-align: left;
                align-items: flex-start;
                padding: 0;
                margin-bottom: 8px;
            }

            .exp-dot-col {
                grid-column: 1;
                grid-row: 1 / 3;
                padding-top: 14px;
                justify-content: flex-start;
            }

            .exp-content {
                grid-column: 2;
                grid-row: 2;
                padding: 24px 24px;
            }
        }


        /* ================================================================
           PROJECTS SECTION — Horizontal scroll carousel with liquid glass
           + glow gradient border cards.

           Each .proj-card-wrap contains:
             1) .proj-glow  — blurred colour blob that bleeds behind the card
             2) .proj-card  — the actual frosted glass foreground card

           Project numbers (.proj-num) persist as large watermarks and
           blend naturally with the gradient colours.
           ================================================================ */

        /* Outer wrapper — no frame, glows bleed freely into the void */
        .proj-outer {
            position: relative;
            overflow: visible;
        }

        /* Stacked Carousel Container */
        .projects-grid {
            position: relative;
            width: 100%;
            height: 400px;
            /* Breathing room for wrapper shadow/hover translateY */
            display: block;
            overflow: visible;
            margin: 0 auto;
            padding: 0;
            max-width: 960px;
            perspective: 1200px;
            transform-style: preserve-3d;
        }

        /* ================================================================
           PROJECTS REDESIGN — Wide Split-Screen Telemetry Cards
           ================================================================ */

        /* Projects Header Container (moves title left, pagination right above card) */
        .proj-header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: min(820px, 92vw);
            margin: 0 auto 20px;
            padding: 0 4px;
            position: relative;
            z-index: 10;
        }

        /* Pagination indicator styled as a premium glassmorphic container/tab */
        .proj-pagination {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-family: 'Kanit', system-ui, sans-serif;
            font-size: 0.88rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.45);
            letter-spacing: 0.05em;
            z-index: 5;
            background: rgba(255, 255, 255, 0.03);
            border: 1.5px solid rgba(255, 255, 255, 0.08);
            border-radius: 99px;
            padding: 8px 18px;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
            transition: border-color 0.4s ease, box-shadow 0.4s ease;
        }

        .proj-pagination:hover {
            border-color: rgba(255, 255, 255, 0.22);
        }

        .proj-pagination-num-active {
            color: #ffffff;
            font-size: 0.88rem;
            min-width: 10px;
            text-align: center;
            display: inline-block;
            transition: color 0.35s ease, text-shadow 0.35s ease;
        }

        .proj-pagination-bar {
            width: 60px;
            height: 3px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 99px;
            position: relative;
            overflow: hidden;
        }

        .proj-pagination-bar-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 16.67%;
            /* 1 of 6 projects */
            border-radius: 99px;
            transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease;
        }

        /* Card Wrapper - Static positioning with smooth vertical lift on hover */
        .proj-card-wrap {
            position: absolute;
            top: 10px;
            left: 50%;
            width: min(820px, 92vw);
            height: 380px;
            overflow: visible;
            background: var(--card-gradient);
            border-radius: 38px;
            padding: 4px;
            /* Border thickness */

            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translate(-50%, 0);
            /* Locked static in-place */
            transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                /* For lift on hover only */
                visibility 0.6s;
            z-index: 1;
        }

        /* Active card wrapper fades in */
        .proj-card-wrap.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translate(-50%, 0);
            z-index: 5;
        }

        /* Active card lifts up slightly on hover to keep the top border fully visible */
        .proj-card-wrap.active:hover {
            transform: translate(-50%, -6px);
        }

        /* Wrapper states during 3D carousel transitions: keep statically centered and fade to 0 */
        .proj-card-wrap.exit-next,
        .proj-card-wrap.exit-prev,
        .proj-card-wrap.enter-next,
        .proj-card-wrap.enter-prev {
            opacity: 0 !important;
            visibility: visible !important;
            pointer-events: none !important;
            transform: translate(-50%, 0) !important;
            /* Keep static at center */
            transition: opacity 0.4s ease;
        }

        /* Neon Halo glowing behind the card wrapper — DISABLED for minimal aesthetic */
        .proj-glow {
            display: none;
        }

        /* Split-screen card interior: remains static, masks the transitions of inner panels */
        .proj-card {
            position: relative;
            width: 100%;
            height: 372px;
            /* 380 wrapper - 8 padding */
            display: flex;
            flex-direction: row;
            overflow: hidden;
            border-radius: 34px;
            background: #0A0A0C !important;
            /* Pure black interior */
            border: none;
            box-shadow: none;
        }

        /* Active card's interior pops in */
        .proj-card-wrap.active .proj-card {
            opacity: 1;
        }

        /* Micro-hover effect: interior container gets a subtle shadow */
        .proj-card-wrap.active:hover .proj-card {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .proj-card::before,
        .proj-card::after {
            display: none;
        }

        /* Left side: Telemetry schematic container */
        .proj-left-panel {
            width: 42%;
            height: 100%;
            padding: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px solid rgba(255, 255, 255, 0.05);
            background: rgba(255, 255, 255, 0.005);
            position: relative;
            overflow: hidden;

            /* Enable 3D transitions on content panels */
            transform-style: flat;
            opacity: 1;
            transform: none;
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* Right side: Project text description details */
        .proj-right-panel {
            width: 58%;
            height: 100%;
            padding: 36px 36px 36px 32px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            position: relative;
            z-index: 2;

            /* Enable 3D transitions on content panels */
            transform-style: flat;
            opacity: 1;
            transform: none;
            transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* Transition states for content panels (.proj-left-panel and .proj-right-panel)
           Provides a parallax 3D effect (text slides further than the SVG) */

        /* Next slide: current card exits to left */
        .proj-card-wrap.exit-next .proj-left-panel {
            opacity: 0 !important;
            transform: translate3d(-60px, 0, 0) scale(0.9) rotateY(-10deg) !important;
        }

        .proj-card-wrap.exit-next .proj-right-panel {
            opacity: 0 !important;
            transform: translate3d(-25px, 0, 0) !important;
        }

        /* Next slide: new card enters from right */
        .proj-card-wrap.enter-next .proj-left-panel {
            opacity: 0 !important;
            transform: translate3d(60px, 0, 0) scale(0.9) rotateY(10deg) !important;
            transition: none !important;
            /* Position instantly */
        }

        .proj-card-wrap.enter-next .proj-right-panel {
            opacity: 0 !important;
            transform: translate3d(20px, 0, 0) !important;
            transition: none !important;
            /* Position instantly */
        }

        /* Prev slide: current card exits to right */
        .proj-card-wrap.exit-prev .proj-left-panel {
            opacity: 0 !important;
            transform: translate3d(60px, 0, 0) scale(0.9) rotateY(10deg) !important;
        }

        .proj-card-wrap.exit-prev .proj-right-panel {
            opacity: 0 !important;
            transform: translate3d(20px, 0, 0) !important;
        }

        /* Prev slide: new card enters from left */
        .proj-card-wrap.enter-prev .proj-left-panel {
            opacity: 0 !important;
            transform: translate3d(-60px, 0, 0) scale(0.9) rotateY(-10deg) !important;
            transition: none !important;
            /* Position instantly */
        }

        .proj-card-wrap.enter-prev .proj-right-panel {
            opacity: 0 !important;
            transform: translate3d(-25px, 0, 0) !important;
            transition: none !important;
            /* Position instantly */
        }

        /* Project number indicator */
        .proj-num {
            position: absolute;
            top: 32px;
            right: 36px;
            font-size: 3rem;
            font-weight: 800;
            font-family: 'Kanit', sans-serif;
            color: rgba(255, 255, 255, 0.05);
            line-height: 1;
            user-select: none;
            pointer-events: none;
            z-index: 1;
            transition: color 0.45s ease, transform 0.45s var(--ease-spring);
        }

        .proj-card-wrap:hover .proj-num {
            color: rgba(255, 255, 255, 0.15);
            transform: scale(1.06) translateY(-2px);
        }

        /* Category pill badge */
        .proj-category-badge {
            display: inline-flex;
            align-items: center;
            padding: 5px 12px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 99px;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-muted);
            width: fit-content;
            margin-bottom: 18px;
            font-family: 'Kanit', sans-serif;
        }

        .proj-card-wrap:hover .proj-category-badge {
            border-color: rgba(255, 255, 255, 0.15);
            color: #ffffff;
        }

        /* Project Title (Kanit font, solid white) */
        .project-title {
            font-size: 1.45rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.92);
            line-height: 1.25;
            margin-bottom: 12px;
            position: relative;
            z-index: 3;
            transition: color 0.3s ease;
            font-family: 'Kanit', sans-serif !important;
        }

        .proj-card-wrap:hover .project-title {
            color: #ffffff;
        }

        /* Project Description */
        .project-desc {
            font-size: 0.92rem;
            color: rgba(185, 185, 205, 0.50);
            line-height: 1.62;
            position: relative;
            z-index: 3;
            margin-bottom: 24px;
            transition: color 0.4s ease;
        }

        .proj-card-wrap:hover .project-desc {
            color: rgba(215, 215, 230, 0.85);
        }

        /* Bottom tags + action button bar */
        .proj-bottom {
            margin-top: auto;
            /* Push to bottom of flex panel container */
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            z-index: 3;
            opacity: 0.85;
            transition: opacity 0.35s ease;
        }

        .proj-card-wrap:hover .proj-bottom {
            opacity: 1;
        }

        /* Tech tags inside card */
        .project-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }

        /* GitHub button next to skills tag */
        .project-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            color: rgba(255, 255, 255, 0.55);
            text-decoration: none;
            background: rgba(255, 255, 255, 0.05);
            border: 1.5px solid rgba(255, 255, 255, 0.12);
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
            transition:
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease,
                transform 0.4s var(--ease-spring);
        }

        .project-link:hover {
            color: var(--card-accent);
            border-color: var(--card-accent);
            box-shadow: 0 0 8px var(--card-accent);
            /* Clean outer line glow */
            background: rgba(255, 255, 255, 0.06);
            transform: translateY(-2px) scale(1.06);
        }

        /* GitHub SVG */
        .project-link svg {
            flex-shrink: 0;
            position: relative;
            z-index: 1;
            /* always above the background gradient */
            transition: transform 0.4s var(--ease-spring);
        }

        .project-link:hover svg {
            transform: scale(1.12) rotate(-6deg);
        }

        /* Tags inside project cards */
        .proj-card-wrap .project-tags .tag {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.10);
            color: rgba(210, 210, 226, 0.60);
            font-size: 0.77rem;
            transition: color 0.3s ease, border-color 0.3s ease,
                box-shadow 0.3s ease, transform 0.35s var(--ease-spring);
        }

        .proj-card-wrap .project-tags .tag:hover {
            color: #ffffff;
            border-color: var(--card-accent);
            box-shadow: 0 0 6px var(--card-accent);
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-2px) scale(1.04);
        }

        /* ================================================================
           PER-CARD GRADIENT PALETTES — redesigned
           Rule: each gradient is a distinct, saturated two-stop pair.
           The border is the ONLY place these colours appear.
           ================================================================ */

        /* 01 — Hot Pink → Amber  (warm, energetic) */
        .proj-card-wrap:nth-child(1) {
            --card-gradient: linear-gradient(137deg, #FF2D78 0%, #FF9500 100%);
            --card-accent: #FF2D78;
        }

        /* 02 — Electric Cyan → Sky Blue  (cool, focused) */
        .proj-card-wrap:nth-child(2) {
            --card-gradient: linear-gradient(137deg, #00E5FF 0%, #0077FF 100%);
            --card-accent: #00E5FF;
        }

        /* 03 — Indigo → Soft Violet  (deep, calm) */
        .proj-card-wrap:nth-child(3) {
            --card-gradient: linear-gradient(137deg, #7B2FFF 0%, #BF9AFF 100%);
            --card-accent: #7B2FFF;
        }

        /* 04 — Royal Blue → Vivid Magenta  (bold contrast) */
        .proj-card-wrap:nth-child(4) {
            --card-gradient: linear-gradient(137deg, #3B82F6 0%, #EC4899 100%);
            --card-accent: #3B82F6;
        }

        /* 05 — Emerald → Aqua  (fresh, techy) */
        .proj-card-wrap:nth-child(5) {
            --card-gradient: linear-gradient(137deg, #00C9A7 0%, #00A3FF 100%);
            --card-accent: #00C9A7;
        }

        /* 06 — Gold → Coral  (warm earth) */
        .proj-card-wrap:nth-child(6) {
            --card-gradient: linear-gradient(137deg, #FFD60A 0%, #FF6B35 100%);
            --card-accent: #FFD60A;
        }

        /* ---- SCROLL ARROWS ---- */
        /* ---- SCROLL ARROWS INSIDE CARDS ---- */
        .proj-controls {
            display: flex;
            gap: 12px;
            margin-top: 10px;
            /* Stack naturally below tags */
            padding-top: 4px;
            z-index: 10;
            position: relative;
        }

        .proj-arrow-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.03);
            border: 1.5px solid rgba(255, 255, 255, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.55);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            outline: none;
        }

        .proj-arrow-btn:hover {
            color: var(--active-accent, var(--card-accent));
            border-color: var(--active-accent, var(--card-accent));
            box-shadow: 0 0 8px var(--active-accent, var(--card-accent));
            /* Clean outer line glow */
            background: rgba(255, 255, 255, 0.06);
            transform: scale(1.06);
        }

        .proj-arrow-btn:active,
        .proj-arrow-btn.taptic-active {
            transform: scale(0.85) !important;
            border-color: var(--active-accent, var(--card-accent)) !important;
            box-shadow: 0 0 16px var(--active-accent, var(--card-accent)) !important;
            background: rgba(34, 211, 238, 0.12) !important;
            color: var(--active-accent, var(--card-accent)) !important;
            transition: all 0.05s ease !important;
        }

        .proj-arrow-btn:focus,
        .project-link:focus {
            outline: none;
        }

        .project-link:active {
            transform: translateY(-2px) scale(0.95);
            box-shadow: 0 0 8px var(--card-accent);
        }

        /* ---- CUSTOM SLIDER ---- */
        .proj-slider-wrap {
            display: none !important;
            /* hidden in stacked carousel mode */
        }

        .proj-slider-track {
            width: 140px;
            height: 6px;
            /* modern capsule track */
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 999px;
            position: relative;
            cursor: pointer;
            transition: background 0.3s ease, border-color 0.3s ease;
        }

        .proj-slider-wrap:hover .proj-slider-track {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(34, 211, 238, 0.3);
        }

        .proj-slider-thumb {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 10px;
            /* modern capsule thumb */
            border-radius: 999px;
            background: linear-gradient(90deg, var(--accent), var(--purple));
            box-shadow: none;
            /* Width set by JS based on content ratio */
            transition: box-shadow 0.35s ease, height 0.3s ease;
            cursor: grab;
        }

        .proj-slider-wrap:hover .proj-slider-thumb {
            box-shadow:
                0 0 12px rgba(34, 211, 238, 0.8),
                0 0 20px rgba(34, 211, 238, 0.5);
        }

        .proj-slider-thumb.dragging {
            cursor: grabbing;
            box-shadow: 0 0 16px rgba(34, 211, 238, 0.9), 0 0 28px rgba(34, 211, 238, 0.7);
        }

        /* ---- SVG TELEMETRY SCHEMATIC ANIMATIONS & STYLES ---- */

        /* Ping pulse animation for HUD console status lights */
        @keyframes hudPing {
            0% {
                r: 3.5px;
                stroke-opacity: 0.9;
                stroke-width: 1.2px;
            }

            100% {
                r: 11px;
                stroke-opacity: 0;
                stroke-width: 0.5px;
            }
        }

        .ping-circle,
        .depth-ping-circle,
        .drainage-ping-circle,
        .alu-ping-circle,
        .spectral-ping-circle,
        .power-ping-circle {
            animation: hudPing 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
            transform-origin: 14px 12px;
        }

        /* 01 — SIS failure predictor transducer leg height oscillations */
        @keyframes legOscillateA {

            0%,
            100% {
                height: 46px;
                y: 72px;
            }

            50% {
                height: 55px;
                y: 63px;
            }
        }

        @keyframes legOscillateB {

            0%,
            100% {
                height: 54px;
                y: 64px;
            }

            50% {
                height: 40px;
                y: 78px;
            }
        }

        @keyframes legOscillateC {

            0%,
            100% {
                height: 35px;
                y: 83px;
            }

            25% {
                height: 50px;
                y: 68px;
            }

            50% {
                height: 32px;
                y: 86px;
            }

            75% {
                height: 53px;
                y: 65px;
            }
        }

        .sis-leg-group[data-leg="A"] .sis-leg-bar {
            animation: legOscillateA 4.2s ease-in-out infinite;
        }

        .sis-leg-group[data-leg="B"] .sis-leg-bar {
            animation: legOscillateB 4.8s ease-in-out infinite;
        }

        .sis-leg-group[data-leg="C"] .sis-leg-bar {
            animation: legOscillateC 3.6s ease-in-out infinite;
        }

        /* 02 — Depthra radar sweep scanner & target node pulsing */
        @keyframes radarSweep {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .depth-scan-line {
            animation: radarSweep 4s linear infinite;
        }

        @keyframes nodePulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 0.85;
            }

            50% {
                transform: scale(1.28);
                opacity: 1;
                filter: drop-shadow(0 0 3px currentColor);
            }
        }

        .depth-node-group {
            animation: nodePulse 3.2s ease-in-out infinite;
        }

        .depth-node-group[data-node="Alpha"] {
            transform-origin: 75px 65px;
        }

        .depth-node-group[data-node="Beta"] {
            transform-origin: 125px 98px;
            animation-delay: 1.6s;
        }

        /* 03 — Smart Drainage System wave ripples & aquifer flows */
        @keyframes pipeFlow {
            0% {
                transform: translateX(-35px);
            }

            100% {
                transform: translateX(145px);
            }
        }

        .flowing-dot {
            animation: pipeFlow 2.8s linear infinite;
        }

        @keyframes drainageWaveBob {

            0%,
            100% {
                transform: translateY(0) scaleY(1);
            }

            50% {
                transform: translateY(1.8px) scaleY(0.92);
            }
        }

        .drainage-wave-path {
            animation: drainageWaveBob 3s ease-in-out infinite;
            transform-origin: center bottom;
        }

        /* 04 — 4-Bit ALU data flows & logic core pulses */
        @keyframes aluBitInput {
            0% {
                transform: translateX(-15px);
                opacity: 0;
            }

            15% {
                opacity: 1;
            }

            85% {
                opacity: 1;
            }

            100% {
                transform: translateX(35px);
                opacity: 0;
            }
        }

        .alu-bit-dot {
            animation: aluBitInput 2.4s linear infinite;
        }

        .alu-bit-dot-delayed {
            animation: aluBitInput 2.4s linear infinite;
            animation-delay: 1.2s;
        }

        @keyframes corePulse {

            0%,
            100% {
                stroke-opacity: 0.3;
                fill-opacity: 0;
            }

            50% {
                stroke-opacity: 0.85;
                fill-opacity: 0.05;
            }
        }

        .alu-logic-core {
            animation: corePulse 3s ease-in-out infinite;
        }

        /* 05 — Spectral Analyzer wave oscillograph jitter */
        @keyframes waveOscillate {
            0% {
                transform: translateY(0) scaleY(1);
            }

            50% {
                transform: translateY(-1.5px) scaleY(0.9);
            }

            100% {
                transform: translateY(0) scaleY(1);
            }
        }

        .spectral-wave-path {
            animation: waveOscillate 2.5s ease-in-out infinite;
            transform-origin: 100px 84px;
            transition: d 0.4s cubic-bezier(0.16, 1, 0.3, 1), stroke-width 0.3s ease;
        }

        /* 06 — AC to DC Converter signal converter & DC current travels */
        @keyframes acSignalFlow {
            0% {
                stroke-dashoffset: 0;
            }

            100% {
                stroke-dashoffset: -18;
            }
        }

        .ac-wave-path {
            stroke-dasharray: 6 3;
            animation: acSignalFlow 1.6s linear infinite;
        }

        @keyframes dcPulseFlow {
            0% {
                stroke-dashoffset: 24;
            }

            100% {
                stroke-dashoffset: 0;
            }
        }

        .dc-pulse-line {
            stroke-dasharray: 8 12;
            animation: dcPulseFlow 1.5s linear infinite;
        }

        /* Interactive styling overrides for SVGs */
        .sis-leg-case {
            transition: stroke 0.3s ease, fill 0.3s ease, stroke-width 0.3s ease;
        }

        .depth-node {
            transition: r 0.3s var(--ease-spring), fill 0.3s ease;
        }

        .alu-path-group line {
            transition: stroke 0.3s ease, stroke-width 0.3s ease;
        }

        .power-signal-group rect {
            transition: stroke 0.3s ease, stroke-width 0.3s ease;
        }


        /* ================================================================
           SKILLS SECTION — Redesigned Fresh Minimalistic Liquid Glass
           ================================================================ */
        .skills-header-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1000px;
            margin-bottom: 54px;
            padding: 20px;
        }

        /* Animated SVG liquid morph behind the header */
        .skills-svg-backdrop {
            position: absolute;
            width: 320px;
            height: 320px;
            opacity: 0.75;
            filter: blur(48px);
            z-index: 0;
            pointer-events: none;
            mix-blend-mode: screen;
            animation: liquidMorph 18s ease-in-out infinite alternate;
        }

        @keyframes liquidMorph {
            0% {
                transform: rotate(0deg) scale(1) translate(0px, 0px);
            }

            33% {
                transform: rotate(120deg) scale(1.15) translate(15px, -10px);
            }

            66% {
                transform: rotate(240deg) scale(0.9) translate(-10px, 15px);
            }

            100% {
                transform: rotate(360deg) scale(1.05) translate(5px, 5px);
            }
        }

        .skills-title-3d {
            position: relative;
            font-size: 2.8rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            margin: 0;
            z-index: 1;
            cursor: default;
            transform-style: preserve-3d;
            transition: transform 0.15s ease-out, text-shadow 0.15s ease-out;
            color: #ffffff;
            text-transform: capitalize;
            /* subtle default text glow */
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.08);
            font-family: 'Kanit', system-ui, -apple-system, sans-serif !important;
        }

        .skills-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            perspective: 1000px;
        }

        /* 3D Wrapper that serves as the project-card style gradient border */
        .skill-group-wrap {
            position: relative;
            background: var(--skill-card-gradient);
            border-radius: 28px;
            padding: 3px;
            /* border thickness */
            transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
            transform-style: preserve-3d;
            overflow: visible;
        }

        .skill-group-wrap:hover {
            transform: translateY(-8px) scale(1.015);
        }

        /* Distinct gradient pairings matching project cards */
        .skills-grid .skill-group-wrap:nth-child(1) {
            --skill-card-gradient: linear-gradient(137deg, #FF2D78 0%, #FF9500 100%);
            --skill-accent: #FF2D78;
            --skill-accent-glow: rgba(255, 45, 120, 0.25);
        }

        .skills-grid .skill-group-wrap:nth-child(2) {
            --skill-card-gradient: linear-gradient(137deg, #00E5FF 0%, #0077FF 100%);
            --skill-accent: #00E5FF;
            --skill-accent-glow: rgba(0, 229, 255, 0.25);
        }

        .skills-grid .skill-group-wrap:nth-child(3) {
            --skill-card-gradient: linear-gradient(137deg, #7B2FFF 0%, #BF9AFF 100%);
            --skill-accent: #7B2FFF;
            --skill-accent-glow: rgba(123, 47, 255, 0.25);
        }

        /* Soft neon halo shadow behind the card */
        .skill-glow {
            position: absolute;
            inset: 0px;
            border-radius: 28px;
            opacity: 0.45;
            pointer-events: none;
            filter: blur(12px);
            z-index: -1;
            background: var(--skill-card-gradient);
            transition: opacity 0.45s ease, filter 0.45s ease;
        }

        .skill-group-wrap:hover .skill-glow {
            opacity: 0.8;
            filter: blur(8px);
        }

        /* Fluid card body - Black background */
        .skill-group {
            position: relative;
            padding: 36px 32px;
            background: #0A0A0C !important;
            /* Pure black, identical to project cards */
            border: none;
            border-radius: 25px;
            overflow: hidden;
            transition: border-radius 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            transform-style: preserve-3d;
            height: 100%;
        }

        /* Ambient liquid spotlight inside each card */
        .skill-group::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(400px circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px),
                    rgba(255, 255, 255, 0.05),
                    transparent 60%);
            z-index: 2;
            pointer-events: none;
        }

        /* Interactive SVG morphing inside card */
        .skill-card-svg {
            position: absolute;
            right: -25px;
            bottom: -35px;
            width: 170px;
            height: 170px;
            opacity: 0.65;
            pointer-events: none;
            filter: blur(14px);
            z-index: 1;
            mix-blend-mode: screen;
            animation: skillSvgMorph 15s ease-in-out infinite alternate;
        }

        @keyframes skillSvgMorph {
            0% {
                transform: rotate(0deg) scale(1) translate(0px, 0px);
            }

            50% {
                transform: rotate(180deg) scale(1.2) translate(10px, -10px);
            }

            100% {
                transform: rotate(360deg) scale(0.95) translate(-5px, 5px);
            }
        }

        .skill-group-label {
            position: relative;
            z-index: 3;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 24px;
            transition: color 0.3s ease;
            transform: translateZ(20px);
            font-family: 'Kanit', system-ui, -apple-system, sans-serif !important;
        }

        .skill-group-wrap:hover .skill-group-label {
            color: #ffffff;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        }

        .skill-tags {
            position: relative;
            z-index: 3;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            transform: translateZ(10px);
        }

        /* Ultra fresh interactive glass pills */
        .skill-tags .tag {
            font-size: 0.85rem;
            font-weight: 500;
            padding: 8px 16px;
            color: rgba(255, 255, 255, 0.75);
            background: rgba(255, 255, 255, 0.025);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 100px;
            font-family: 'Kanit', system-ui, -apple-system, sans-serif !important;
            transition:
                color 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        /* Organic expansion and accent glow */
        .skill-tags .tag:hover {
            color: #ffffff;
            background: rgba(34, 211, 238, 0.12);
            border-color: rgba(34, 211, 238, 0.45);
            transform: scale(1.08) translateY(-3px);
            box-shadow:
                0 6px 20px rgba(34, 211, 238, 0.25),
                0 0 8px rgba(34, 211, 238, 0.15);
        }

        /* Alternate neon color accents for variation */
        .skill-group-wrap:nth-child(2) .skill-tags .tag:hover {
            background: rgba(0, 229, 255, 0.12);
            border-color: rgba(0, 229, 255, 0.45);
            box-shadow:
                0 6px 20px rgba(0, 229, 255, 0.25),
                0 0 8px rgba(0, 229, 255, 0.15);
        }

        .skill-group-wrap:nth-child(3) .skill-tags .tag:hover {
            background: rgba(123, 47, 255, 0.12);
            border-color: rgba(123, 47, 255, 0.45);
            box-shadow:
                0 6px 20px rgba(123, 47, 255, 0.25),
                0 0 8px rgba(123, 47, 255, 0.15);
        }


        /* ================================================================
           COURSES SECTION — Horizontal scroll carousel
           ================================================================ */
        .course-outer {
            position: relative;
        }

        .courses-grid {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 26px;
            overflow-x: auto;
            scroll-behavior: smooth;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: 24px 56px 36px;
            cursor: grab;
        }

        .courses-grid::-webkit-scrollbar {
            display: none;
        }

        .courses-grid.dragging {
            cursor: grabbing;
            scroll-behavior: auto;
        }

        .course-card {
            flex: 0 0 min(290px, 85vw);
            height: 280px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 0;
            position: relative;
            overflow: hidden;
            background: #0A0A0C;
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            transition:
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease;
        }

        .course-card:hover {
            transform: translateY(-6px) scale(1.015);
            border-color: var(--card-accent);
            box-shadow:
                0 16px 48px rgba(0, 0, 0, 0.5),
                0 0 24px var(--card-accent-glow);
        }

        /* Top Glowing Cloud — more cloudy, smooth, and glowy */
        .course-card::before {
            content: '';
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            width: 180px;
            height: 80px;
            background: radial-gradient(circle, var(--card-accent) 0%, transparent 70%);
            filter: blur(18px);
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: 1;
        }

        .course-card:hover::before {
            opacity: 0.85;
            animation: pulseCloud 2s ease-in-out infinite alternate;
        }

        @keyframes pulseCloud {
            0% {
                opacity: 0.60;
                filter: blur(20px);
                transform: translateX(-50%) scale(0.9);
            }

            100% {
                opacity: 0.95;
                filter: blur(16px);
                transform: translateX(-50%) scale(1.1);
            }
        }

        /* Accent classes */
        .course-cyan {
            --card-accent: #22d3ee;
            --card-accent-dim: rgba(34, 211, 238, 0.25);
            --card-accent-glow: rgba(34, 211, 238, 0.15);
        }

        .course-purple {
            --card-accent: #a78bfa;
            --card-accent-dim: rgba(167, 139, 250, 0.25);
            --card-accent-glow: rgba(167, 139, 250, 0.15);
        }

        /* Platform Pill */
        .course-platform-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--text-muted);
            width: fit-content;
            margin-bottom: 12px;
            transition: border-color 0.3s ease, color 0.3s ease;
            position: relative;
            z-index: 2;
        }

        .course-card:hover .course-platform-pill {
            border-color: var(--card-accent-dim);
            color: var(--text);
        }

        .pill-icon {
            color: var(--card-accent);
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            filter: drop-shadow(0 0 4px var(--card-accent-glow));
            transition: transform 0.4s var(--ease-spring);
        }

        .course-card:hover .pill-icon {
            transform: scale(1.1) rotate(5deg);
        }

        /* Course Title */
        .course-name {
            font-size: 1.12rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.92);
            line-height: 1.35;
            margin-bottom: 12px;
            transition: color 0.3s ease;
            position: relative;
            z-index: 2;
        }

        .course-card:hover .course-name {
            color: #ffffff;
        }

        /* Skills Group — pinned to bottom, slides up on hover */
        .cert-skills-group {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 8px;
            position: relative;
            z-index: 2;
            margin-top: auto;
            transform: translateY(0);
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .course-card:hover .cert-skills-group {
            transform: translateY(-44px);
        }

        .cert-skill-btn {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 999px;
            font-size: 0.74rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.55);
            cursor: default;
            position: relative;
            overflow: hidden;
            transition: color 0.35s ease, border-color 0.35s ease, transform 0.35s var(--ease-spring);
        }

        .cert-skill-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--card-accent-dim) 0%, transparent 100%);
            opacity: 0;
            transition: opacity 0.35s ease;
            z-index: -1;
            pointer-events: none;
        }

        .cert-skill-btn:hover {
            color: var(--text);
            border-color: var(--card-accent-dim);
        }

        .cert-skill-btn:hover::before {
            opacity: 0.85;
        }

        /* Bottom sliding link/badge container */
        .course-bottom {
            position: absolute;
            bottom: 24px;
            left: 24px;
            right: 24px;
            opacity: 0;
            transform: translateY(12px);
            pointer-events: none;
            transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 3;
        }

        .course-card:hover .course-bottom {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        /* Verification Link Button */
        .course-link-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 999px;
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--text);
            text-decoration: none;
            transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-spring);
        }

        .course-link-btn:hover {
            background: var(--card-accent);
            border-color: var(--card-accent);
            color: #030305;
            transform: translateY(-2px);
        }

        .course-completed-badge {
            background: rgba(16, 185, 129, 0.04);
            border: 1px solid rgba(16, 185, 129, 0.15);
            color: #34d399;
            cursor: default;
        }

        /* Arrows styling */
        .course-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(10, 10, 18, 0.75);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.55);
            cursor: pointer;
            z-index: 4;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
        }

        .course-arrow.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .course-arrow:hover {
            background: rgba(34, 211, 238, 0.12);
            border-color: rgba(34, 211, 238, 0.35);
            color: var(--accent);
            box-shadow: 0 0 18px rgba(34, 211, 238, 0.25);
        }

        .course-arrow-left {
            left: 12px;
        }

        .course-arrow-right {
            right: 12px;
        }

        /* Custom scroll indicator slider below */
        .course-slider-wrap {
            margin-top: 10px;
            display: flex;
            justify-content: center;
        }

        .course-slider-track {
            width: 140px;
            height: 6px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 999px;
            position: relative;
            cursor: pointer;
            transition: background 0.3s ease, border-color 0.3s ease;
        }

        .course-slider-wrap:hover .course-slider-track {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(34, 211, 238, 0.3);
        }

        .course-slider-thumb {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 10px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--accent), var(--purple));
            transition: box-shadow 0.35s ease, height 0.3s ease;
            cursor: grab;
        }

        .course-slider-wrap:hover .course-slider-thumb {
            box-shadow: 0 0 12px rgba(34, 211, 238, 0.8), 0 0 20px rgba(34, 211, 238, 0.5);
        }

        .course-slider-thumb.dragging {
            cursor: grabbing;
            box-shadow: 0 0 16px rgba(34, 211, 238, 0.9), 0 0 28px rgba(34, 211, 238, 0.7);
        }


        /* ================================================================
           CONNECT SECTION — Centered call-to-action
           ================================================================ */
        /* ================================================================
           CONNECT SECTION — Premium interactive grid and 3D Smartphone
           ================================================================ */
        .connect-card-outer {
            position: relative;
            border-radius: 24px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            backdrop-filter: blur(var(--blur)) saturate(135%);
            -webkit-backdrop-filter: blur(var(--blur)) saturate(135%);
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
            padding: 1px;
            transition: border-color 0.4s var(--ease-out);
        }

        /* Status pill */
        .connect-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px 6px 10px;
            background: rgba(16, 185, 129, 0.08);
            border: 1px solid rgba(16, 185, 129, 0.25);
            border-radius: 999px;
            width: fit-content;
        }

        .connect-status-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #10b981;
            flex-shrink: 0;
            animation: status-pulse 2s ease-in-out infinite;
        }

        @keyframes status-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); opacity: 1; }
            50% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); opacity: 0.7; }
        }

        .connect-status-text {
            font-size: 11px;
            font-weight: 600;
            color: #10b981;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-family: monospace;
        }

        .connect-title-line2 {
            display: block;
            background: linear-gradient(to right, #ffffff, rgba(255,255,255,0.55));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
            white-space: nowrap;
        }

        .connect-backdrop-container {
            position: absolute;
            inset: 0;
            border-radius: 24px;
            overflow: hidden;
            pointer-events: none;
            z-index: 0;
        }

        .connect-backdrop-container canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
        }

        .radial-glow {
            position: absolute;
            border-radius: 50%;
            filter: blur(120px);
            pointer-events: none;
            opacity: 0.15;
            z-index: 1;
        }

        .glow-cyan {
            top: -128px;
            left: -128px;
            width: 384px;
            height: 384px;
            background: #06b6d4;
        }

        .glow-purple {
            bottom: -128px;
            right: -128px;
            width: 384px;
            height: 384px;
            background: #8b5cf6;
        }

        .connect-grid-container {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1fr;
            gap: 40px;
            align-items: center;
            padding: 48px 28px;
        }

        @media (min-width: 1024px) {
            .connect-grid-container {
                grid-template-columns: repeat(12, minmax(0, 1fr));
                gap: 40px;
                padding: 64px;
            }
            .connect-left-column {
                grid-column: span 7 / span 7;
            }
            .connect-right-column {
                grid-column: span 5 / span 5;
            }
        }

        .connect-left-column {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            gap: 28px;
            text-align: left;
        }

        .connect-right-column {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /* On mobile: just center the phone with controlled padding, no min-height that causes overlap */
            padding: 16px 0 32px;
        }

        @media (min-width: 1024px) {
            .connect-right-column {
                overflow: visible;
                padding: 0;
                border-radius: 0;
            }
        }

        .connect-header-group {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .connect-section-title {
            font-size: clamp(2rem, 5vw, 3.2rem);
            font-weight: 500;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: -0.03em;
            line-height: 1.05;
        }

        .connect-gradient-span {
            background: linear-gradient(to right, #06b6d4, #8b5cf6, #f43f5e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
        }

        .connect-description {
            color: #94a3b8;
            font-size: clamp(0.9rem, 2vw, 1rem);
            line-height: 1.65;
            max-width: 480px;
        }

        .portal-buttons-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            max-width: 512px;
            width: 100%;
        }

        .portal-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 16px 8px;
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.01);
            border: 1px solid rgba(255, 255, 255, 0.05);
            cursor: pointer;
            outline: none;
            transition: all 0.3s var(--ease-out);
            position: relative;
            overflow: hidden;
            text-align: center;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;
        }

        .portal-btn:active {
            transform: scale(0.96) translateY(0);
        }

        /* Mobile touch active state for portal buttons */
        @media (hover: none) and (pointer: coarse) {
            .portal-btn:active {
                transform: scale(0.94);
                opacity: 0.85;
            }
            .portal-btn-email:active {
                border-color: rgba(6, 182, 212, 0.5);
                background: rgba(6, 182, 212, 0.06);
            }
            .portal-btn-linkedin:active {
                border-color: rgba(59, 130, 246, 0.5);
                background: rgba(59, 130, 246, 0.06);
            }
            .portal-btn-github:active {
                border-color: rgba(244, 63, 94, 0.5);
                background: rgba(244, 63, 94, 0.06);
            }
        }

        .portal-btn-icon-socket {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid #1e293b;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .portal-icon {
            color: #94a3b8;
            transition: color 0.3s ease;
        }

        .portal-btn-label {
            font-family: inherit;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.02em;
            margin-top: 12px;
            color: #94a3b8;
            transition: color 0.3s ease;
        }

        .portal-btn:hover {
            transform: translateY(-3px) scale(1.015);
        }

        /* Email Button Highlight Color */
        .portal-btn-email:hover, .portal-btn-email.active {
            border-color: rgba(6, 182, 212, 0.3);
            background: rgba(6, 182, 212, 0.02);
        }
        .portal-btn-email:hover .portal-btn-icon-socket, .portal-btn-email.active .portal-btn-icon-socket {
            border-color: rgba(6, 182, 212, 0.5);
            box-shadow: 0 0 12px rgba(6, 182, 212, 0.2);
        }
        .portal-btn-email:hover .portal-icon, .portal-btn-email.active .portal-icon {
            color: #06b6d4;
        }
        .portal-btn-email:hover .portal-btn-label, .portal-btn-email.active .portal-btn-label {
            color: #ffffff;
        }

        /* LinkedIn Button Highlight Color */
        .portal-btn-linkedin:hover, .portal-btn-linkedin.active {
            border-color: rgba(59, 130, 246, 0.3);
            background: rgba(59, 130, 246, 0.02);
        }
        .portal-btn-linkedin:hover .portal-btn-icon-socket, .portal-btn-linkedin.active .portal-btn-icon-socket {
            border-color: rgba(96, 165, 250, 0.5);
            box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
        }
        .portal-btn-linkedin:hover .portal-icon, .portal-btn-linkedin.active .portal-icon {
            color: #60a5fa;
        }
        .portal-btn-linkedin:hover .portal-btn-label, .portal-btn-linkedin.active .portal-btn-label {
            color: #ffffff;
        }

        /* GitHub Button Highlight Color */
        .portal-btn-github:hover, .portal-btn-github.active {
            border-color: rgba(244, 63, 94, 0.3);
            background: rgba(244, 63, 94, 0.02);
        }
        .portal-btn-github:hover .portal-btn-icon-socket, .portal-btn-github.active .portal-btn-icon-socket {
            border-color: rgba(244, 63, 94, 0.5);
            box-shadow: 0 0 12px rgba(244, 63, 94, 0.2);
        }
        .portal-btn-github:hover .portal-icon, .portal-btn-github.active .portal-icon {
            color: #f43f5e;
        }
        .portal-btn-github:hover .portal-btn-label, .portal-btn-github.active .portal-btn-label {
            color: #ffffff;
        }

        .connect-metadata-badge {
            padding: 16px;
            border-radius: 26px;
            background: rgba(2, 6, 23, 0.4);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            max-width: 512px;
            width: 100%;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: monospace;
            font-size: 10.5px;
            color: #64748b;
        }

        .meta-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            display: inline-block;
        }

        .meta-dot.bg-cyan {
            background: #06b6d4;
            animation: pulse-glow-cyan 2s infinite;
        }

        @keyframes pulse-glow-cyan {
            0% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4); }
            50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 8px 2px rgba(6, 182, 212, 0.4); }
            100% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
        }

        .meta-val {
            font-family: monospace;
        }

        .meta-val.val-white {
            color: #cbd5e1;
            font-family: system-ui, -apple-system, sans-serif;
            font-weight: 500;
        }

        .meta-copy-btn {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 9999px;
            padding: 8px 16px;
            font-family: monospace;
            font-size: 9.5px;
            font-weight: 900;
            color: #cbd5e1;
            cursor: pointer;
            outline: none;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
        }

        .meta-copy-btn:hover {
            border-color: #06b6d4;
            color: #ffffff;
            background: rgba(6, 182, 212, 0.1);
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
        }

        .copy-btn-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #06b6d4;
            display: inline-block;
            margin-right: 6px;
            transition: all 0.3s ease;
        }

        .copy-btn-dot.copied {
            background: #10b981;
            animation: copy-ping 1s infinite;
        }

        @keyframes copy-ping {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(2.5); opacity: 0; }
        }

        /* 3D Smartphone Stage */
        .phone-stage-wrapper {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 280px;
            height: 550px;
            perspective: 1200px;
            transform-style: preserve-3d;
        }

        .phone-backlight-glow {
            display: none !important;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 480px;
            height: 480px;
            border-radius: 50%;
            filter: blur(110px);
            opacity: 0.32;
            mix-blend-mode: screen;
            z-index: -1;
            pointer-events: none;
            will-change: opacity, filter;
            transition: background 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
        }

        .phone-stage-wrapper:hover .phone-backlight-glow {
            opacity: 0.65;
            filter: blur(90px);
        }

        /* Phone chassis: static tilt only, no float animation */

        .phone-backlight-glow.glow-blue { background: radial-gradient(circle, rgba(37, 99, 235, 0.6) 0%, rgba(34, 211, 238, 0.2) 40%, transparent 70%); }
        .phone-backlight-glow.glow-cyan { background: radial-gradient(circle, rgba(6, 182, 212, 0.65) 0%, rgba(167, 139, 250, 0.2) 45%, transparent 70%); }
        .phone-backlight-glow.glow-rose { background: radial-gradient(circle, rgba(244, 63, 94, 0.65) 0%, rgba(123, 47, 255, 0.2) 45%, transparent 70%); }

        .smartphone-chassis {
            width: 280px;
            height: 550px;
            border-radius: 44px;
            background: #1a1b22;
            border: 6px solid #2c2d35;
            padding: 4px;
            position: relative;
            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.95), inset 0 2px 2px rgba(255, 255, 255, 0.15);
            transform-style: preserve-3d;
            transform: rotateX(1.5deg) rotateY(-3deg);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            will-change: transform;
        }

        .dynamic-island {
            position: absolute;
            top: 11px;
            left: 50%;
            transform: translateX(-50%);
            width: 76px;
            height: 21px;
            border-radius: 9999px;
            background: #000000;
            z-index: 50;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 10px;
            gap: 4px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
        }

        .notch-led {
            width: 4px;
            height: 4px;
            border-radius: 50%;
        }

        .notch-led.led-green {
            background: #10b981;
            animation: notch-pulse 1.8s infinite;
        }

        .notch-led.led-purple {
            background: #6366f1;
        }

        @keyframes notch-pulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

        .phone-speaker {
            position: absolute;
            top: 4px;
            left: 50%;
            transform: translateX(-50%);
            width: 34px;
            height: 2px;
            border-radius: 9999px;
            background: #1e1e24;
            z-index: 50;
        }

        .phone-button {
            position: absolute;
            background: #2d2e36;
            width: 3px;
        }

        .button-left-silent { left: -9px; top: 95px; height: 20px; border-radius: 0 2px 2px 0; }
        .button-left-volup { left: -9px; top: 132px; height: 40px; border-radius: 0 2px 2px 0; }
        .button-left-voldown { left: -9px; top: 182px; height: 40px; border-radius: 0 2px 2px 0; }
        .button-right-power { right: -9px; top: 125px; height: 55px; border-radius: 2px 0 0 2px; }

        .phone-screen-container {
            position: absolute;
            inset: 4px;
            border-radius: 36px;
            overflow: hidden;
            background: #07090d;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.95);
            transition: filter 0.3s ease, background 0.3s ease;
            /* Force WebKit/Blink engine clipping context */
            z-index: 5;
            transform: translate3d(0, 0, 0);
            -webkit-mask-image: -webkit-radial-gradient(white, black);
        }

        .phone-screen-container.screen-off {
            filter: brightness(0) !important;
            background: #000000 !important;
        }

        .phone-screen-container.screen-off * {
            opacity: 0 !important;
            pointer-events: none !important;
        }

        /* Glitch overlay displacement style */
        .phone-glitch-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 48;
            pointer-events: none;
            display: none;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
        }

        .phone-glitch-overlay.active {
            display: flex;
        }

        .glitch-color-cyan {
            position: absolute;
            inset: 0;
            background: rgba(6, 182, 212, 0.1);
            mix-blend-mode: screen;
            animation: glitch-flicker 0.1s infinite;
        }

        .glitch-color-rose {
            position: absolute;
            inset: 0;
            background: rgba(244, 63, 94, 0.1);
            mix-blend-mode: screen;
            animation: glitch-flicker 0.1s infinite;
            animation-delay: 60ms;
        }

        @keyframes glitch-flicker {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 0.9; }
        }

        .glitch-line-one {
            height: 3px;
            background: rgba(6, 182, 212, 0.3);
            width: 100%;
            position: absolute;
            animation: glitch-move-1 0.14s infinite;
        }

        .glitch-line-two {
            height: 2px;
            background: rgba(244, 63, 94, 0.4);
            width: 100%;
            position: absolute;
            animation: glitch-move-2 0.22s infinite;
        }

        .glitch-line-three {
            height: 6px;
            background: rgba(139, 92, 246, 0.15);
            width: 100%;
            position: absolute;
            animation: glitch-move-3 0.08s infinite;
        }

        @keyframes glitch-move-1 {
            0%, 100% { top: 12%; }
            50% { top: 22%; }
        }
        @keyframes glitch-move-2 {
            0%, 100% { top: 52%; }
            50% { top: 62%; }
        }
        @keyframes glitch-move-3 {
            0%, 100% { top: 78%; }
            50% { top: 88%; }
        }

        .glitch-tag-one {
            position: absolute;
            top: 35%;
            left: 8%;
            font-size: 8.5px;
            color: #00ffcc;
            font-weight: 900;
            letter-spacing: 0.12em;
            background: rgba(0, 0, 0, 0.85);
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid rgba(0, 255, 204, 0.3);
        }

        .glitch-tag-two {
            position: absolute;
            bottom: 30%;
            right: 8%;
            font-size: 7px;
            color: #f43f5e;
            font-weight: 900;
            letter-spacing: 0.12em;
            background: rgba(0, 0, 0, 0.85);
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid rgba(244, 63, 94, 0.3);
        }

        .glitch-scanlines {
            position: absolute;
            inset: 0;
            opacity: 0.3;
            background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.55) 55%);
            background-size: 100% 4px;
        }

        /* iOS Status bar */
        .phone-status-bar {
            width: 100%;
            height: 34px;
            padding: 0 16px;
            padding-top: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 10px;
            letter-spacing: 0.08em;
            color: #94a3b8;
            z-index: 40;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(8px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            flex-shrink: 0;
        }

        .status-time {
            font-family: inherit;
            font-weight: 700;
            font-size: 11px;
            color: #ffffff;
            letter-spacing: normal;
        }

        .status-indicators {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .status-wifi-icon {
            width: 11px;
            height: 11px;
            color: #cbd5e1;
        }

        .network-badge {
            font-size: 8px;
            font-weight: 500;
            color: #cbd5e1;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 1px 4px;
            border-radius: 4px;
            font-family: monospace;
        }

        .battery-icon {
            width: 16px;
            height: 8px;
            border-radius: 3px;
            border: 1px solid #94a3b8;
            padding: 1px;
            display: flex;
            align-items: center;
        }

        .battery-fill {
            height: 100%;
            width: 85%;
            background: #f1f5f9;
            border-radius: 1.5px;
        }

        /* Screen app content view ports */
        .phone-app-screen {
            width: 100%;
            height: 100%;
            position: relative;
            overflow-y: auto;
            padding: 10px 10px 32px;
            scrollbar-width: none;
            display: flex;
            flex-direction: column;
            background: #050608;
        }

        .phone-app-screen::-webkit-scrollbar {
            display: none;
        }

        .app-view {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            width: 100%;
            opacity: 0;
            filter: blur(8px);
            transition: opacity 0.3s ease-out, filter 0.3s ease-out;
        }

        .app-view.active {
            display: flex;
            opacity: 1;
            filter: blur(0px);
        }

        .phone-home-indicator {
            width: 100%;
            height: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            z-index: 40;
            background: #07090d;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .home-bar {
            width: 70px;
            height: 3px;
            border-radius: 9999px;
            background: #475569;
            margin-bottom: 2px;
        }

        /* SecureMail view styling */
        .app-email-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            padding-bottom: 6px;
            margin-top: 4px;
        }

        .app-email-logo {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .mail-icon-bg {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            background: #007aff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
        }

        .app-email-title {
            font-size: 11px;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: 0.02em;
        }

        .app-email-ver {
            font-size: 9px;
            color: #64748b;
            letter-spacing: 0.04em;
        }

        .app-email-metadata {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            padding: 10px;
            font-size: 10px;
            margin-top: 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .meta-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .meta-row.border-top {
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding-top: 6px;
        }

        .row-label {
            color: #64748b;
            font-size: 8px;
            text-transform: uppercase;
        }

        .row-label.block-label {
            display: block;
            margin-bottom: 4px;
        }

        .row-val {
            font-weight: 500;
            color: #cbd5e1;
        }

        .row-val.val-cyan {
            color: #06b6d4;
        }

        .app-email-input {
            width: 100%;
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 4px;
            padding: 2px 6px;
            color: #ffffff;
            font-size: 10px;
            outline: none;
            transition: border-color 0.2s ease;
        }

        .app-email-input:focus {
            border-color: rgba(6, 182, 212, 0.4);
        }

        .app-email-body-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-top: 12px;
        }

        .app-email-textarea {
            width: 100%;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            padding: 8px;
            color: #ffffff;
            font-size: 10px;
            line-height: 1.5;
            outline: none;
            resize: none;
            transition: border-color 0.2s ease;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
        }

        .app-email-textarea::-webkit-scrollbar {
            width: 4px;
        }
        .app-email-textarea::-webkit-scrollbar-track {
            background: transparent;
        }
        .app-email-textarea::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 99px;
        }
        .app-email-textarea::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .app-email-textarea:focus {
            border-color: rgba(6, 182, 212, 0.4);
        }

        .app-email-footer {
            padding-top: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            margin-top: auto;
        }

        .app-email-send-btn {
            width: 100%;
            padding: 10px;
            border-radius: 8px;
            font-weight: 700;
            font-family: monospace;
            font-size: 10px;
            letter-spacing: 0.05em;
            border: none;
            background: linear-gradient(to right, #06b6d4, #2563eb);
            color: #ffffff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.3s var(--ease-out);
            box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
            text-decoration: none !important;
        }

        .app-email-send-btn:hover {
            transform: scale(1.04);
            filter: brightness(1.2);
            box-shadow: 0 0 20px rgba(6, 182, 212, 0.6);
            text-decoration: none !important;
            color: #ffffff;
        }

        .app-email-send-btn:active {
            transform: scale(0.975);
            text-decoration: none !important;
        }

        .app-email-send-btn.disabled {
            background: #10b981;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
            cursor: default;
            pointer-events: none;
            text-decoration: none !important;
        }

        /* LinkedIn Screen App View styling */
        .app-linkedin-header {
            display: flex;
            align-items: center;
            gap: 6px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            padding-bottom: 6px;
            margin-top: 2px;
        }

        .linkedin-logo-wrapper {
            color: #0077b5;
            display: flex;
            align-items: center;
        }

        .linkedin-search-bar {
            flex-grow: 1;
            padding: 2.5px 8px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.05);
            font-size: 9px;
            color: #94a3b8;
            display: flex;
            align-items: center;
            gap: 4px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .linkedin-search-bar:hover {
            border-color: rgba(96, 165, 250, 0.4);
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            transform: scale(1.01);
        }

        .search-text {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .app-linkedin-card {
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            overflow: hidden;
            background: #12151e;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
            margin-top: 12px;
        }

        .linkedin-banner {
            height: 50px;
            background: #dfd6cb;
            position: relative;
            padding: 6px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            overflow: hidden;
            user-select: none;
        }

        .banner-initial {
            position: absolute;
            left: -4px;
            bottom: -15px;
            font-size: 60px;
            font-weight: 700;
            color: #cfc2b3;
            opacity: 0.4;
            line-height: 1;
        }

        .banner-info {
            text-align: right;
            display: flex;
            flex-direction: column;
            line-height: 1.1;
        }

        .info-name {
            font-size: 6.5px;
            font-weight: 900;
            letter-spacing: 0.08em;
            color: #3a342a;
        }

        .info-school {
            font-size: 3.8px;
            font-weight: 800;
            letter-spacing: 0.04em;
            color: #554c3c;
            margin-top: 2px;
        }

        .info-sub {
            font-size: 3.2px;
            font-weight: 700;
            letter-spacing: 0.06em;
            color: #554c3c;
        }

        .linkedin-profile-body {
            padding: 0 12px 12px;
            position: relative;
        }

        .linkedin-avatar-container {
            position: absolute;
            top: -24px;
            left: 12px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            padding: 1px;
            background: #12151e;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
        }

        .linkedin-intro-details {
            padding-top: 24px;
            margin-top: 4px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .name-badge-row {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .intro-name {
            font-size: 12px;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: 0.02em;
            line-height: 1.1;
        }

        .linkedin-verified-badge {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #1da1f2;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 6px;
            line-height: 1;
            font-weight: bold;
        }

        .intro-tagline {
            font-size: 8.5px;
            color: #cbd5e1;
            line-height: 1.4;
            font-weight: 400;
        }

        .intro-location {
            font-size: 8px;
            color: #94a3b8;
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 2px 0;
        }

        .location-pin-icon {
            color: #8b5cf6;
            flex-shrink: 0;
        }

        .linkedin-edu-link {
            display: flex;
            align-items: center;
            gap: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .edu-logo {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            background: #a31d1d;
            color: #ffffff;
            font-weight: 900;
            font-size: 6.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 0 8px rgba(163, 29, 29, 0.3);
        }

        .edu-name {
            font-size: 8px;
            font-weight: 600;
            color: #cbd5e1;
        }

        .app-linkedin-footer {
            padding-top: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            margin-top: auto;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .app-linkedin-connect-btn {
            width: 100%;
            padding: 8px;
            border-radius: 8px;
            font-weight: 700;
            font-family: monospace;
            font-size: 9px;
            letter-spacing: 0.08em;
            border: none;
            background: #0077b5;
            color: #ffffff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.3s var(--ease-out);
            box-shadow: 0 4px 12px rgba(0, 119, 181, 0.15);
            text-decoration: none !important;
        }

        .app-linkedin-connect-btn:not(.connecting):not(.invited):hover {
            transform: scale(1.04);
            filter: brightness(1.2);
            box-shadow: 0 0 20px rgba(0, 119, 181, 0.6);
            text-decoration: none !important;
            color: #ffffff;
        }

        .app-linkedin-connect-btn:not(.connecting):not(.invited):active {
            transform: scale(0.975);
            text-decoration: none !important;
        }

        .app-linkedin-connect-btn.connecting {
            background: rgba(79, 70, 229, 0.25);
            color: #cbd5e1;
            border: 1px solid rgba(99, 102, 241, 0.2);
            cursor: default;
            box-shadow: none;
            animation: connect-pulse-glow 1.5s infinite;
            pointer-events: none;
            text-decoration: none !important;
        }

        @keyframes connect-pulse-glow {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }

        .app-linkedin-connect-btn.invited {
            background: rgba(16, 185, 129, 0.15);
            color: #34d399;
            border: 1px solid rgba(16, 185, 129, 0.25);
            cursor: default;
            box-shadow: none;
            pointer-events: none;
            text-decoration: none !important;
        }

        .linkedin-stats {
            display: flex;
            justify-content: space-between;
            font-size: 8px;
            color: #64748b;
            padding: 0 2px;
        }

        /* GitHub App Screen styling */
        .app-github-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            padding-bottom: 6px;
            margin-top: 4px;
        }

        .github-logo-wrapper {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .github-title {
            font-size: 11px;
            font-weight: 700;
            color: #ffffff;
        }

        .github-header-sub {
            font-size: 8px;
            color: #64748b;
            letter-spacing: 0.05em;
        }

        .app-github-body {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 10px;
        }

        .github-user-row {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .github-avatar-container {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.1);
            overflow: hidden;
            flex-shrink: 0;
        }

        .github-user-info {
            display: flex;
            flex-direction: column;
        }

        .github-user-fullname {
            font-size: 11px;
            font-weight: 700;
            color: #ffffff;
        }

        .github-username {
            font-size: 8px;
            color: #64748b;
        }

        .github-bio {
            font-size: 8px;
            color: #cbd5e1;
            line-height: 1.4;
        }

        .github-stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
        }

        .stat-box {
            padding: 4px;
            border-radius: 4px;
            text-align: center;
        }

        .stat-box.bg-dark {
            background: rgba(0, 0, 0, 0.4);
        }

        .stat-num {
            font-size: 10px;
            font-weight: 700;
            color: #ffffff;
        }

        .stat-lbl {
            font-size: 7px;
            color: #64748b;
            text-transform: uppercase;
        }

        .github-contrib-card {
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            padding: 8px;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .contrib-title {
            font-size: 7px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .contrib-matrix-grid {
            display: grid;
            grid-template-columns: repeat(16, 1fr);
            gap: 2px;
        }

        .contrib-node {
            aspect-ratio: 1;
            border-radius: 1px;
            background: #1e293b;
            transition: all 0.2s ease;
        }

        .contrib-node.w0 { background: #1e293b; }
        .contrib-node.w1 { background: #064e3b; }
        .contrib-node.w2 { background: #047857; }
        .contrib-node.w3 { background: #10b981; }
        .contrib-node.w4 {
            background: #6ee7b7;
            box-shadow: 0 0 4px rgba(110, 231, 183, 0.2);
        }

        .contrib-legend {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 2px;
            font-size: 6px;
            color: #64748b;
            text-transform: uppercase;
        }

        .legend-blocks {
            display: flex;
            gap: 2px;
        }

        .l-block {
            width: 6px;
            height: 6px;
            border-radius: 0.5px;
        }

        .l-block.bg-slate { background: #1e293b; }

        .github-pinned-section {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .pinned-section-title {
            font-size: 7.5px;
            color: #475569;
            text-transform: uppercase;
        }

        .pinned-repo-card {
            background: rgba(255, 255, 255, 0.01);
            border: 1px solid rgba(255, 255, 255, 0.05);
            padding: 6px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .pinned-repo-card:hover {
            border-color: rgba(0, 255, 204, 0.3);
            background: rgba(255, 255, 255, 0.03);
            transform: scale(1.015);
        }

        .pinned-repo-name {
            font-size: 9px;
            color: #00ffcc;
            text-decoration: none;
        }

        .pinned-repo-name:hover {
            text-decoration: underline;
        }

        .pinned-repo-desc {
            font-size: 7.5px;
            color: #cbd5e1;
            margin-top: 2px;
            line-height: 1.3;
        }

        .app-github-footer {
            padding-top: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            margin-top: auto;
        }

        .app-github-follow-btn {
            width: 100%;
            padding: 8px;
            border-radius: 8px;
            font-weight: 700;
            font-family: monospace;
            font-size: 9px;
            letter-spacing: 0.08em;
            border: none;
            background: #ffffff;
            color: #000000;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.3s var(--ease-out);
            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
            text-decoration: none !important;
        }

        .app-github-follow-btn:hover {
            background: #f1f5f9;
            transform: scale(1.04);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
            text-decoration: none !important;
            color: #000000;
        }

        .app-github-follow-btn:active {
            transform: scale(0.975);
            text-decoration: none !important;
        }

        .meta-item-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .animate-gh-btn svg {
            transition: transform 0.3s ease;
        }
        
        .animate-gh-btn:hover svg {
            transform: translateY(-2px) scale(1.15) rotate(-5deg);
        }


        /* ================================================================
           FOOTER
           ================================================================ */
        footer {
            text-align: center;
            padding: 28px 32px 52px;
            color: var(--text-muted);
            font-size: 0.83rem;
            position: relative;
            z-index: 1;
        }


        /* ================================================================
           SCROLL REVEAL — Elements fade+rise into view on scroll
           Add class="reveal" to any element.
           Add class="reveal-stagger" to a grid/list container for
           staggered child animation.
           ================================================================ */
        .reveal {
            opacity: 0;
            transform: translateY(28px);
            filter: blur(4px);
            transition: opacity 0.9s var(--ease-out),
                transform 0.9s var(--ease-out),
                filter 0.9s var(--ease-out);
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
            filter: none !important;
        }

        /* Stagger: children animate one by one */
        .reveal-stagger>* {
            opacity: 0;
            transform: translateY(22px);
            transition: opacity 0.7s var(--ease-out),
                transform 0.7s var(--ease-out);
        }

        /* nth-child delays for stagger */
        .reveal-stagger.visible>*:nth-child(1) {
            opacity: 1;
            transform: none;
            transition-delay: 0ms;
        }

        .reveal-stagger.visible>*:nth-child(2) {
            opacity: 1;
            transform: none;
            transition-delay: 70ms;
        }

        .reveal-stagger.visible>*:nth-child(3) {
            opacity: 1;
            transform: none;
            transition-delay: 140ms;
        }

        .reveal-stagger.visible>*:nth-child(4) {
            opacity: 1;
            transform: none;
            transition-delay: 210ms;
        }

        .reveal-stagger.visible>*:nth-child(5) {
            opacity: 1;
            transform: none;
            transition-delay: 280ms;
        }

        .reveal-stagger.visible>*:nth-child(6) {
            opacity: 1;
            transform: none;
            transition-delay: 350ms;
        }

        .reveal-stagger.visible>*:nth-child(n+7) {
            opacity: 1;
            transform: none;
            transition-delay: 420ms;
        }


        /* ================================================================
           3D TILT — Applied to .tilt-card elements via JS
           ================================================================ */
        .tilt-card {
            transform-style: preserve-3d;
            will-change: transform;
        }


        /* ================================================================
           RESPONSIVE — Full mobile-first system
           Breakpoints: 900 → 768 → 640 → 480 → 390
           ================================================================ */

        /* ---- 900px: tablet landscape ---- */
        @media (max-width: 900px) {
            .skills-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* ---- 768px: tablet portrait / large phone ---- */
        @media (max-width: 768px) {
            :root {
                --section-gap: 90px;
            }

            html,
            body {
                overflow-x: hidden !important;
                width: 100% !important;
                max-width: 100% !important;
                /* Momentum/inertial scrolling on iOS */
                -webkit-overflow-scrolling: touch;
            }

            .container {
                padding: 0 18px;
            }

            /* Hero: single column, centered */
            .hero-grid {
                grid-template-columns: 1fr;
                gap: 36px;
                padding: 80px 0 60px;
                text-align: center;
            }

            .hero-left {
                align-items: center;
                order: 2;
            }

            .hero-right {
                order: 1;
                width: 180px;
                height: 180px;
                margin: 0 auto;
            }

            /* Allow hero name to wrap instead of overflow */
            .hero-name {
                white-space: normal;
                word-break: break-word;
                font-size: clamp(2.6rem, 10vw, 4rem);
            }

            .hero-status-row {
                justify-content: center;
                flex-wrap: wrap;
                gap: 8px;
            }

            .hero-status,
            .hero-semester {
                margin: 0;
            }

            .hero-tagline {
                text-align: center;
                max-width: 100%;
                font-size: clamp(1rem, 3.5vw, 1.2rem);
            }

            /* Education card */
            .edu-card {
                text-align: center;
                align-items: center;
                padding: 18px 20px;
                max-width: 100%;
                margin: 0 auto;
            }

            .edu-header {
                justify-content: center;
            }

            /* Profile actions row */
            .profile-actions-wrapper {
                max-width: 100%;
                margin: 0 auto;
                justify-content: center;
                flex-wrap: wrap;
                gap: 12px;
            }

            .resume-placeholder {
                margin: 0;
            }

            .social-actions-group {
                justify-content: center;
            }

            /* About card */
            .about-card {
                padding: 24px 20px;
            }

            /* About tabs: allow wrapping on very small screens */
            .about-tabs {
                flex-wrap: wrap;
                border-radius: 14px;
            }

            /* Highlights stage shorter on mobile */
            .highlights-stage {
                height: 280px;
            }

            /* Skills */
            .skills-grid {
                grid-template-columns: 1fr;
            }

            /* Connect */
            .connect-metadata-badge {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
                border-radius: 20px;
                padding: 14px;
            }

            .connect-metadata-badge .meta-item {
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                padding-bottom: 8px;
                width: 100%;
            }

            .connect-metadata-badge .meta-copy-btn {
                width: 100%;
                justify-content: center;
                margin-top: 4px;
            }

            /* Section title smaller */
            .section-title {
                font-size: clamp(1.6rem, 5vw, 2rem);
                margin-bottom: 32px;
            }

            /* Hide mobile-app-bar block completely so only K and Toggle float independently */
            .mobile-app-bar {
                display: none !important;
            }

            #brand {
                top: 11px !important;
                left: 16px !important;
                z-index: 1001 !important;
            }

            /* Mobile Navigation compact dropdown overlay */
            #nav {
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                height: 100vh;
                width: 100vw;
                z-index: 999;
                padding: 0;
                pointer-events: none;
                display: block;
            }

            #nav.open {
                pointer-events: auto;
            }

            /* Overlay has no blur and no dark block, but still catches clicks */
            .nav-overlay {
                display: block !important;
                position: absolute;
                inset: 0;
                background: transparent !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.4s ease, visibility 0.4s;
                pointer-events: none;
                z-index: 998;
            }

            #nav.open .nav-overlay {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }

            /* Compact floating glass card dropdown positioned right below the toggle button */
            .nav-pill {
                position: absolute;
                top: 64px !important;
                right: 16px !important;
                bottom: auto !important;
                width: 220px !important;
                height: auto !important;
                background: rgba(8, 8, 12, 0.95) !important;
                border: 1px solid rgba(255, 255, 255, 0.08) !important;
                border-radius: 20px !important;
                backdrop-filter: blur(20px) !important;
                -webkit-backdrop-filter: blur(20px) !important;
                box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;
                gap: 4px !important;
                padding: 16px !important;
                z-index: 999;
                box-sizing: border-box;

                /* Hidden state: slides from top-right with scale spring */
                opacity: 0 !important;
                visibility: hidden !important;
                transform: translateY(-15px) scale(0.9) !important;
                transform-origin: right top !important;
                transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important, visibility 0.3s !important;
                overflow: hidden !important;
                max-width: none;
                flex-wrap: nowrap;
                pointer-events: none !important;
            }

            #nav.open .nav-pill {
                opacity: 1 !important;
                visibility: visible !important;
                transform: translateY(0) scale(1) !important;
                pointer-events: auto !important;
            }

            /* Drawer Header & Footer are hidden to keep layout extremely clean & compact */
            .drawer-header {
                display: none !important;
            }

            .drawer-title {
                display: none !important;
            }

            .drawer-status {
                display: none !important;
            }

            .drawer-status-dot {
                display: none !important;
            }

            .drawer-footer {
                display: none !important;
            }

            .drawer-social-btn {
                display: none !important;
            }

            /* Nav links styled as list items with magnetic slide spring */
            .nav-link {
                width: 100%;
                text-align: left;
                padding: 10px 14px !important;
                font-size: 0.92rem !important;
                font-weight: 600;
                color: var(--text-muted);
                border-radius: 10px;
                transition: color 0.3s ease, background 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), padding-left 0.3s ease, opacity 0.4s ease;
                opacity: 0;
                transform: translateY(-12px) scale(0.9) !important;
                user-select: none;
                cursor: pointer;
                flex-shrink: 0;
                box-sizing: border-box;
            }

            #nav.open .nav-link {
                opacity: 1;
                transform: translateY(0) scale(1) !important;
            }

            /* Staggered entry delays for drawer links */
            #nav.open .nav-link:nth-of-type(1) {
                transition-delay: 0.05s;
            }

            #nav.open .nav-link:nth-of-type(2) {
                transition-delay: 0.09s;
            }

            #nav.open .nav-link:nth-of-type(3) {
                transition-delay: 0.13s;
            }

            #nav.open .nav-link:nth-of-type(4) {
                transition-delay: 0.17s;
            }

            #nav.open .nav-link:nth-of-type(5) {
                transition-delay: 0.21s;
            }

            #nav.open .nav-link:nth-of-type(6) {
                transition-delay: 0.25s;
            }

            #nav.open .nav-link:nth-of-type(7) {
                transition-delay: 0.29s;
            }

            /* Section highlighting uses the dynamic scroll variable color */
            .nav-link:hover,
            .nav-link.active {
                color: var(--toggle-accent, var(--accent)) !important;
                background: rgba(255, 255, 255, 0.05) !important;
                padding-left: 18px !important;
                transform: none !important;
            }

            /* Hide horizontal indicator & scrollbars on mobile */
            .nav-indicator {
                display: none !important;
            }

            .nav-pill::-webkit-scrollbar {
                display: none;
            }

            /* Redesigned Mobile Nav Toggle Button Styles - Minimal 3-Line Design */
            .mobile-nav-toggle {
                display: block !important;
                position: fixed;
                top: 11px !important;
                right: 16px !important;
                width: 42px;
                height: 42px;
                z-index: 1002;
                background: transparent !important;
                border: none !important;
                outline: none !important;
                cursor: pointer;
                padding: 0;
                user-select: none;
                transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
                box-shadow: none !important;
            }

            .mobile-nav-toggle:active {
                transform: scale(0.9) !important;
            }

            /* Hiding background circle and 3D liquid blobs completely */
            .toggle-bg,
            .blob {
                display: none !important;
            }

            .toggle-svg {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                overflow: visible;
                transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            }

            /* Hamburger lines styled with high contrast to background */
            .line {
                stroke: #ffffff !important;
                /* High-contrast white */
                stroke-width: 2.8 !important;
                transition: stroke 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease, filter 0.4s ease;
                transform-origin: 25px 25px;
                transform-box: view-box;
            }

            .mobile-nav-toggle:hover .line,
            .mobile-nav-toggle.active .line {
                stroke: var(--toggle-accent, #00ffb7) !important;
                filter: drop-shadow(0 0 5px var(--toggle-accent, #00ffb7));
            }

            /* Line animation: top and bottom form a cross (X); middle line moves left and dissolves into section title */
            .mobile-nav-toggle.active .top-line {
                transform: translateY(8px) rotate(45deg) !important;
            }

            .mobile-nav-toggle.active .bot-line {
                transform: translateY(-8px) rotate(-45deg) !important;
            }

            .mobile-nav-toggle.active .mid-line {
                transform: translateX(-40px) scaleX(0.1) !important;
                /* Move left and dissolve into section title text */
                opacity: 0 !important;
            }

            /* Dynamic floating section title breadcrumb styling */
            .mobile-section-title {
                display: none;
            }

            @media (max-width: 768px) {
                .mobile-section-title {
                    display: block !important;
                    position: fixed;
                    top: 23px !important;
                    right: 62px !important;
                    font-family: monospace;
                    font-size: 0.76rem;
                    font-weight: 700;
                    letter-spacing: 0.15em;
                    color: #ffffff;
                    text-transform: uppercase;
                    z-index: 1001;
                    pointer-events: none;
                    transition: color 0.4s ease, opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
                    text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
                }

                #nav.open~.mobile-section-title {
                    color: var(--toggle-accent, #00ffb7) !important;
                    filter: drop-shadow(0 0 4px var(--toggle-accent, #00ffb7));
                    transform: scale(1.05);
                }
            }

            .connect-section-title {
                font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
            }

            /* Increase project arrow touch targets and layer priority on mobile viewports */
            .proj-header-container {
                position: relative !important;
                z-index: 100 !important;
            }

            .proj-header-controls {
                position: relative !important;
                z-index: 101 !important;
            }

            .proj-arrow-btn {
                width: 42px !important;
                height: 42px !important;
                pointer-events: auto !important;
            }

            /* Scroll nudge: position absolutely at the bottom of the hero section on mobile
               so it scrolls out of view naturally and does not overlap cards */
            .scroll-nudge {
                position: absolute;
                bottom: 16px;
                left: 50%;
            }

            /* Hide desktop-only arrows on touch devices */
            .course-arrow {
                display: none !important;
            }

            /* Custom cursor: disable on touch */
            #cursor-dot,
            #cursor-ring {
                display: none;
            }

            body {
                cursor: auto;
            }
        }

        .copy-svg {
            color: #cbd5e1;
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .meta-copy-btn:hover .copy-svg {
            color: #06b6d4;
            transform: scale(1.1);
        }

        .meta-copy-btn.copied .copy-svg {
            color: #10b981 !important;
        }

        /* ---- 640px: standard phone ---- */
        @media (max-width: 640px) {
            :root {
                --section-gap: 72px;
            }

            .connect-metadata-badge {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 12px !important;
                padding: 14px !important;
                border-radius: 20px !important;
            }

            .connect-metadata-badge .meta-item {
                justify-content: space-between !important;
                width: 100% !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
                padding-bottom: 8px !important;
            }

            .connect-metadata-badge .meta-item:last-of-type {
                border-bottom: none !important;
                padding-bottom: 0 !important;
            }

            .meta-copy-btn {
                width: 100% !important;
                justify-content: center !important;
                margin-top: 4px !important;
                padding: 10px !important;
                font-size: 10px !important;
            }

            .container {
                padding: 0 16px;
            }

            .hero-right {
                width: 155px;
                height: 155px;
            }

            .hero-name {
                font-size: clamp(2.2rem, 12vw, 3.2rem);
            }

            /* Highlights: shrink stage */
            .highlights-stage {
                height: 300px;
                /* taller to fit more text */
            }

            .hl-card {
                width: min(300px, 88vw);
                padding: 20px 22px;
            }

            /* Skills: single column */
            .skills-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .skill-group {
                padding: 18px 18px;
            }

            /* Experience single-col already handled via its own media query */

            /* Project split-screen cards stacking for mobile viewports */
            .projects-grid {
                height: 540px !important;
            }

            .proj-card-wrap {
                width: min(330px, 90vw) !important;
                height: 520px !important;
                transform: translate3d(-50%, 6px, 0) !important;
            }

            .proj-card-wrap.active {
                transform: translate3d(-50%, 0, 0) !important;
            }

            .proj-card-wrap.active:hover {
                transform: translate3d(-50%, -4px, 0) !important;
            }

            /* Minimal & aesthetic projects progress bar on mobile, positioned next to the header title */
            .proj-header-container>div {
                display: contents !important;
            }

            .proj-header-container {
                display: flex !important;
                align-items: center !important;
                justify-content: flex-start !important;
                gap: 10px !important;
                width: min(330px, 90vw) !important;
                margin: 0 auto 24px !important;
                padding: 0 !important;
                box-sizing: border-box !important;
            }

            .proj-pagination {
                display: inline-flex !important;
                align-items: center !important;
                gap: 8px !important;
                z-index: 100 !important;
                background: rgba(255, 255, 255, 0.03) !important;
                border: 1px solid rgba(255, 255, 255, 0.08) !important;
                border-radius: 99px !important;
                padding: 4px 10px !important;
                backdrop-filter: blur(10px) !important;
                -webkit-backdrop-filter: blur(10px) !important;
                font-size: 0.7rem !important;
                color: rgba(255, 255, 255, 0.4) !important;
                font-family: 'Inter', monospace !important;
                letter-spacing: 0.06em !important;
                transform: translateY(-2px) !important;
                /* raised slightly to align with the large title */
                margin: 0 !important;
            }

            .proj-pagination-num-active {
                font-size: 0.7rem !important;
                font-weight: 700 !important;
            }

            .proj-pagination-bar {
                width: 35px !important;
                height: 2px !important;
                background: rgba(255, 255, 255, 0.1) !important;
                border-radius: 99px !important;
            }

            .proj-header-controls {
                margin-left: auto !important;
                display: flex !important;
                gap: 8px !important;
            }

            .proj-card {
                flex-direction: column !important;
                height: 512px !important;
            }

            .proj-left-panel {
                width: 100% !important;
                height: 190px !important;
                border-right: none !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
                padding: 16px !important;
            }

            .proj-left-panel svg {
                max-width: 100% !important;
                max-height: 100% !important;
                width: auto !important;
                height: auto !important;
            }

            .proj-right-panel {
                width: 100% !important;
                height: 322px !important;
                padding: 20px 24px 20px 24px !important;
            }

            .project-title {
                font-size: 1.18rem !important;
                margin-bottom: 8px !important;
            }

            .project-desc {
                font-size: 0.85rem !important;
                margin-bottom: 16px !important;
                line-height: 1.5 !important;
            }

            .proj-num {
                top: 20px !important;
                right: 24px !important;
                font-size: 2.2rem !important;
            }

            .proj-category-badge {
                margin-bottom: 10px !important;
            }

            .courses-grid {
                padding: 16px 18px 24px !important;
                gap: 16px !important;
            }

            .course-card {
                flex: 0 0 min(300px, 88vw);
            }

            /* Connect */
            .connect-links {
                flex-direction: column;
                align-items: center;
            }

            .connect-btn {
                width: 100%;
                max-width: 280px;
                justify-content: center;
            }

            /* Footer */
            footer {
                padding: 24px 16px 80px;
                /* bottom clearance for nav pill */
            }

            /* Nav even tighter */
            .nav-link {
                padding: 5px 9px;
                font-size: 0.74rem;
            }

            #nav {
                bottom: 12px;
                padding: 0 12px;
            }

            .nav-pill {
                max-width: calc(100vw - 24px);
                gap: 0;
            }
        }

        /* ---- 480px: small phones (iPhone SE, older Android) ---- */
        @media (max-width: 480px) {
            :root {
                --section-gap: 60px;
            }

            .container {
                padding: 0 14px;
            }

            .hero-grid {
                gap: 28px;
                padding: 72px 0 48px;
            }

            .hero-right {
                width: 140px;
                height: 140px;
            }

            .hero-name {
                font-size: clamp(2rem, 13vw, 2.8rem);
            }

            .hero-tagline {
                font-size: 0.96rem;
            }

            /* Badge pills may need to shrink */
            .hero-status,
            .hero-semester {
                font-size: 0.74rem;
                padding: 4px 10px;
            }

            /* About tabs: stack vertically if needed */
            .about-tabs {
                border-radius: 12px;
                width: 100%;
            }

            .tab-btn {
                flex: 1;
                justify-content: center;
                padding: 8px 12px;
                font-size: 0.80rem;
            }

            .tab-btn-icon {
                width: 18px;
                height: 18px;
            }

            .about-card {
                padding: 20px 16px;
            }

            .about-text {
                font-size: 0.97rem;
            }

            /* Experience */
            .exp-content {
                padding: 18px 18px;
            }

            .exp-role {
                font-size: 0.97rem;
            }

            .exp-desc {
                font-size: 0.87rem;
            }

            /* Project / course cards */
            .proj-card-wrap {
                flex: 0 0 min(290px, 90vw);
                height: 500px;
            }

            .proj-card {
                height: 492px !important;
            }

            .courses-grid {
                padding: 12px 14px 20px !important;
                gap: 12px !important;
            }

            .course-card {
                flex: 0 0 min(280px, 90vw);
            }

            /* Skills */
            .skill-tags .tag {
                font-size: 0.78rem;
                padding: 5px 10px;
            }

            /* Scroll nudge: smaller pill on very small screens */
            .scroll-nudge-pill {
                padding: 8px 16px;
                font-size: 0.66rem;
            }

            /* Section title */
            .section-title {
                font-size: clamp(1.45rem, 6vw, 1.8rem);
                margin-bottom: 24px;
            }
        }

        /* ---- 390px: iPhone 12/13/14 Pro & similar ---- */
        @media (max-width: 390px) {
            .container {
                padding: 0 12px;
            }

            .hero-name {
                font-size: clamp(1.85rem, 13.5vw, 2.4rem);
            }

            .hero-right {
                width: 125px;
                height: 125px;
            }

            /* Nav pill: shrink font even more */
            .nav-link {
                padding: 5px 7px;
                font-size: 0.68rem;
                letter-spacing: 0;
            }

            /* About tabs: hide icon on very narrow */
            .tab-btn-icon {
                display: none;
            }

            .tab-btn {
                padding: 8px 14px;
                font-size: 0.78rem;
            }

            /* hero-semester hidden on very small to avoid overflow */
            .hero-semester {
                display: none;
            }

            /* Connect buttons */
            .connect-btn {
                font-size: 0.82rem;
                padding: 9px 16px;
            }
        }

        /* ============================================================
           ABOUT SECTION TOGGLE — Segmented pill control
           ============================================================ */

        /* Outer track — frosted glass pill container */
        .about-tabs {
            position: relative;
            display: inline-flex;
            gap: 0;
            margin-bottom: 2rem;
            padding: 4px;
            border-radius: 100px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 20px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            /* clip the indicator so it never escapes the pill */
        }

        /* Gliding active indicator — moved by JS */
        .tab-indicator {
            position: absolute;
            top: 4px;
            left: 4px;
            height: calc(100% - 8px);
            border-radius: 100px;
            background: linear-gradient(135deg, rgba(34, 211, 238, 0.18) 0%, rgba(34, 211, 238, 0.08) 100%);
            border: 1px solid rgba(34, 211, 238, 0.28);
            box-shadow: 0 0 16px rgba(34, 211, 238, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            pointer-events: none;
            z-index: 0;
            transition: left 0.4s var(--ease-smooth), width 0.4s var(--ease-smooth);
        }

        /* Individual tab buttons */
        .tab-btn {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 20px;
            border-radius: 100px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-family: inherit;
            font-size: 0.86rem;
            font-weight: 500;
            letter-spacing: 0.01em;
            cursor: pointer;
            white-space: nowrap;
            transition: color 0.3s ease;
            -webkit-tap-highlight-color: transparent;
        }

        /* Icon wrapper inside the button */
        .tab-btn-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
            flex-shrink: 0;
        }

        .tab-btn-icon svg {
            transition: transform 0.3s var(--ease-spring);
        }

        /* Label text */
        .tab-btn-label {
            transition: color 0.3s ease;
        }

        /* Hover state — subtle lift */
        .tab-btn:hover {
            color: var(--text);
        }

        .tab-btn:hover .tab-btn-icon {
            background: rgba(255, 255, 255, 0.10);
            border-color: rgba(255, 255, 255, 0.16);
            transform: scale(1.08);
        }

        /* Active — Builder (cyan) */
        .tab-btn.active {
            color: var(--accent);
        }

        .tab-btn.active .tab-btn-icon {
            background: rgba(34, 211, 238, 0.14);
            border-color: rgba(34, 211, 238, 0.35);
            box-shadow: 0 0 10px rgba(34, 211, 238, 0.20);
        }

        .tab-btn.active .tab-btn-icon svg {
            transform: scale(1.15);
        }

        /* Special hover for "The Human" button — purple accent */
        .tab-btn-human:hover {
            color: var(--purple);
        }

        .tab-btn-human:hover .tab-btn-icon {
            background: rgba(167, 139, 250, 0.12);
            border-color: rgba(167, 139, 250, 0.30);
        }

        .tab-btn-human.active {
            color: var(--purple);
        }

        .tab-btn-human.active .tab-btn-icon {
            background: rgba(167, 139, 250, 0.15);
            border-color: rgba(167, 139, 250, 0.38);
            box-shadow: 0 0 10px rgba(167, 139, 250, 0.22);
        }

        /* When human is active, change indicator to purple tint */
        .about-tabs.human-active .tab-indicator {
            background: linear-gradient(135deg, rgba(167, 139, 250, 0.18) 0%, rgba(167, 139, 250, 0.08) 100%);
            border-color: rgba(167, 139, 250, 0.28);
            box-shadow: 0 0 16px rgba(167, 139, 250, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        /* Bio content transitions */
        .about-content {
            transition: opacity 0.4s ease;
        }

        .hidden-bio {
            display: none;
            opacity: 0;
        }

        .active-bio {
            display: block;
            opacity: 1;
            animation: fadeInBio 0.42s var(--ease-out) forwards;
        }

        @keyframes fadeInBio {
            from {
                opacity: 0;
                transform: translateY(7px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ============================================================
           HERO STATUS ROW — dual badge group
           ============================================================ */
        .hero-status-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        /* Semester badge — purple accent variant */
        .hero-semester {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 5px 13px;
            background: var(--purple-dim);
            border: 1px solid rgba(167, 139, 250, 0.22);
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--purple);
            width: fit-content;
            cursor: default;
            transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .hero-semester:hover {
            background: rgba(167, 139, 250, 0.16);
            border-color: rgba(167, 139, 250, 0.38);
            box-shadow: 0 0 14px rgba(167, 139, 250, 0.14);
        }

        .hero-status:hover {
            background: rgba(34, 211, 238, 0.16);
            border-color: rgba(34, 211, 238, 0.38);
            box-shadow: 0 0 14px rgba(34, 211, 238, 0.14);
        }

        .hero-status {
            cursor: default;
            transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        @media (max-width: 400px) {
            .phone-stage-wrapper {
                transform: scale(0.85);
                transform-origin: top center;
                height: 468px; /* 550px * 0.85 */
                margin: 0;
            }
        }

        @media (max-width: 340px) {
            .phone-stage-wrapper {
                transform: scale(0.75);
                transform-origin: top center;
                height: 412px; /* 550px * 0.75 */
                margin: 0;
            }
            .preloader-desk-scene {
                transform: scale(0.68) !important;
            }
        }