:root {
            --bg-primary: #252530;
            --bg-secondary: #2c2c3a;
            --bg-card: #363645;
            --bg-card-hover: #3e3e4e;
            --text-primary: #f0ebe3;
            --text-secondary: #b0b0c0;
            --accent: #c9a84c;
            --accent-hover: #e8c56d;
            --accent-dim: rgba(201,168,76,0.15);
            --border: rgba(201,168,76,0.22);
            --border-light: rgba(255,255,255,0.1);
            --overlay: rgba(30,30,40,0.8);
            --font-display: 'Cormorant Garamond', Georgia, serif;
            --font-body: 'Outfit', system-ui, sans-serif;
            --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
            --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); font-weight: 300; overflow: hidden; cursor: none; }
        body.mobile-mode { overflow-y: auto; cursor: auto; }
        body.panel-open { overflow: hidden; }
        body.mobile-mode.panel-open { position: fixed; left: 0; right: 0; width: 100%; overscroll-behavior: none; }
        a { color: var(--accent); text-decoration: none; transition: color 0.3s; }
        a:hover { color: var(--accent-hover); }
        ::selection { background: var(--accent); color: var(--bg-primary); }
        :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

        .cursor-dot { position: fixed; top: 0; left: 0; z-index: 99999; width: 20px; height: 20px; border: 1.5px solid var(--accent); border-radius: 50%; pointer-events: none; transition: transform 0.15s var(--ease-smooth), background 0.2s, border-color 0.2s; transform: translate(-50%, -50%); }
        .cursor-dot.hovering { background: var(--accent); transform: translate(-50%, -50%) scale(1.4); }
        body.mobile-mode .cursor-dot { display: none; }

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

        .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 3rem; transition: background 0.4s var(--ease-smooth), padding 0.3s, box-shadow 0.3s; }
        .navbar.scrolled { background: rgba(37,37,48,0.96); backdrop-filter: blur(12px); padding: 0.8rem 3rem; box-shadow: 0 1px 20px rgba(0,0,0,0.3); }
        .nav-logo { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0.08em; }
        .nav-logo span { color: var(--accent); }
        .nav-links { display: flex; gap: 2rem; list-style: none; }
        .nav-links a { font-size: 0.85rem; font-weight: 400; color: var(--text-secondary); letter-spacing: 0.05em; text-transform: uppercase; position: relative; padding-bottom: 4px; transition: color 0.3s; }
        .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px; background: var(--accent); transition: width 0.35s var(--ease-smooth); }
        .nav-links a:hover { color: var(--text-primary); }
        .nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
        .nav-links a.active { color: var(--accent); }
        .mobile-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.5rem; cursor: pointer; }

        .fp-section { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; transition: transform 0.85s var(--ease-smooth); overflow: hidden; }
        body.mobile-mode .fp-section { position: relative; min-height: 100vh; height: auto; overflow: visible; }
        .section-inner { width: 100%; max-width: 1200px; padding: 6rem 3rem 3rem; position: relative; z-index: 2; }
        .section-watermark { display: none; }
        .section-heading { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
        .section-heading span { color: var(--accent); }
        .heading-rule { width: 60px; height: 2px; background: var(--accent); margin-bottom: 2.5rem; }
        .reveal-item { opacity: 0; transform: translateY(30px); transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth); }
        .reveal-item.visible { opacity: 1; transform: translateY(0); }

        /* HERO */
        #hero { background: var(--bg-primary); z-index: 10; }
        #particleCanvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
        .hero-content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 6vw; width: 100%; max-width: 1400px; gap: 4rem; }
        .hero-left { flex: 1; text-align: left; }
        .hero-greeting { font-family: var(--font-body); font-size: 1.1rem; font-weight: 400; color: var(--text-secondary); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.8rem; opacity: 0; transform: translateY(20px); animation: fadeUp 0.6s var(--ease-smooth) 0.3s forwards; }
        .hero-name { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 600; letter-spacing: 0.08em; color: var(--text-primary); line-height: 1.15; opacity: 0; transform: translateY(20px); animation: fadeUp 0.7s var(--ease-smooth) 0.5s forwards; }
        .hero-name span { color: var(--accent); }
        @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
        .hero-subtitle { font-family: var(--font-body); font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 300; color: var(--accent); margin-top: 0.8rem; min-height: 1.8em; letter-spacing: 0.06em; opacity: 0; animation: fadeUp 0.6s var(--ease-smooth) 0.7s forwards; }
        .typewriter-cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--accent); margin-left: 4px; vertical-align: text-bottom; animation: blink 0.7s step-end infinite; }
        @keyframes blink { 50% { opacity: 0; } }
        .hero-buttons { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.6s var(--ease-smooth) 0.9s forwards; }
        .btn { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; padding: 0.85rem 2rem; border-radius: 2px; cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase; transition: all 0.35s var(--ease-smooth); border: 1.5px solid var(--accent); }
        .btn-primary { background: var(--accent); color: var(--bg-primary); }
        .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-2px); }
        .btn-outline { background: transparent; color: var(--accent); }
        .btn-outline:hover { background: var(--accent); color: var(--bg-primary); transform: translateY(-2px); }
        .hero-right { flex-shrink: 0; position: relative; width: clamp(260px, 22vw, 360px); height: clamp(260px, 22vw, 360px); opacity: 0; transform: scale(0.85); animation: photoIn 0.8s var(--ease-smooth) 0.6s forwards; cursor: pointer; }
        @keyframes photoIn { to { opacity: 1; transform: scale(1); } }
        .hero-right::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0.4; transition: opacity 0.4s; }
        .hero-right:hover::before { opacity: 0.8; }
        .hero-right::after { content: ''; position: absolute; inset: -16px; border-radius: 50%; border: 1px solid rgba(201,168,76,0.12); transition: border-color 0.4s; }
        .hero-right:hover::after { border-color: rgba(201,168,76,0.3); }
        .hero-right img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transition: opacity 1.5s ease-in-out, transform 0.5s var(--ease-smooth); }
        .hero-right:hover img { transform: scale(1.08); }
        .hero-right img.hero-img-back { opacity: 0; }
        .hero-right.swapped img.hero-img-front { opacity: 0; }
        .hero-right.swapped img.hero-img-back { opacity: 1; }
        .scroll-indicator { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite; color: var(--accent); opacity: 0.7; font-size: 1.8rem; z-index: 2; }
        @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-12px); } 60% { transform: translateX(-50%) translateY(-6px); } }

        /* ABOUT */
        #about {
            background:
                radial-gradient(circle at 14% 48%, rgba(201,168,76,0.08), transparent 26%),
                radial-gradient(circle at 88% 22%, rgba(120,157,220,0.08), transparent 24%),
                var(--bg-secondary);
        }
        #about .section-inner {
            max-width: 1780px;
            padding-top: 5.6rem;
            padding-right: 0.6rem;
        }
        .about-stage {
            display: grid;
            grid-template-columns: minmax(310px, 420px) minmax(500px, 620px) minmax(700px, 1fr);
            gap: clamp(1.8rem, 2.6vw, 3.2rem);
            align-items: center;
        }
        .about-portrait-wrap {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .about-photo {
            position: relative;
            width: clamp(270px, 21vw, 350px);
            aspect-ratio: 1;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid var(--accent);
            box-shadow: 0 0 36px rgba(201,168,76,0.15);
            cursor: pointer;
            transform-origin: center;
            transition: transform 0.45s var(--ease-bounce), box-shadow 0.45s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
        }
        .about-portrait-wrap:hover .about-photo,
        .about-photo:hover {
            transform: scale(1.18);
            border-color: var(--accent-hover);
            box-shadow: 0 22px 60px rgba(0,0,0,0.32), 0 0 0 12px rgba(201,168,76,0.08), 0 0 46px rgba(201,168,76,0.28);
        }
        .about-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: none;
        }
        .about-copy {
            position: relative;
            padding-left: clamp(1.8rem, 2vw, 2.5rem);
        }
        .about-copy::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.5rem;
            bottom: 0.5rem;
            width: 2px;
            background: linear-gradient(180deg, rgba(201,168,76,0.95), rgba(201,168,76,0.25));
        }
        .about-quote {
            font-family: var(--font-display);
            font-size: clamp(1.85rem, 2.75vw, 3.05rem);
            line-height: 1.12;
            color: rgba(201,168,76,0.88);
            font-weight: 400;
            margin-bottom: 1.1rem;
            max-width: 15ch;
        }
        .about-text {
            max-width: 38rem;
            color: var(--text-secondary);
            font-size: clamp(0.98rem, 1vw, 1.12rem);
            line-height: 1.72;
        }
        .about-text p { margin-bottom: 0.75rem; }
        .about-journey {
            width: min(100%, 820px);
            justify-self: end;
            transform: translateX(250px);
        }
        .journey-heading {
            font-family: var(--font-display);
            font-size: clamp(1.45rem, 2.15vw, 1.9rem);
            line-height: 1.1;
            margin-bottom: 1.25rem;
            text-align: center;
        }
        .journey-heading .education-word { color: #85b4ff; }
        .journey-heading .experience-word { color: var(--accent); }
        .journey-tree {
            position: relative;
            min-height: 720px;
            padding: 1.05rem 0 1.2rem;
        }
        .journey-axis {
            position: absolute;
            left: 50%;
            top: 1.2rem;
            bottom: 1.1rem;
            width: 2px;
            background: linear-gradient(180deg, rgba(133,180,255,0.78), rgba(201,168,76,0.7));
            transform: translateX(-50%);
        }
        .journey-item {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 72px 1fr;
            align-items: center;
            gap: 1rem;
            min-height: 134px;
            margin: 0.5rem 0;
        }
        .journey-item.education .journey-card {
            grid-column: 1;
            --journey-shift: -18px;
        }
        .journey-item.experience .journey-card {
            grid-column: 3;
            --journey-shift: 18px;
        }
        .journey-date {
            position: absolute;
            left: 50%;
            top: -0.8rem;
            transform: translateX(-50%);
            padding: 0.24rem 0.78rem;
            border-radius: 999px;
            background: rgba(37,37,48,0.92);
            border: 1px solid rgba(255,255,255,0.08);
            color: var(--text-secondary);
            font-size: 0.7rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            white-space: nowrap;
            z-index: 2;
            transition: color 0.28s var(--ease-smooth), border-color 0.28s var(--ease-smooth), box-shadow 0.28s var(--ease-smooth);
        }
        .journey-node {
            grid-column: 2;
            justify-self: center;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 4px solid var(--bg-secondary);
            box-shadow: 0 0 0 4px rgba(255,255,255,0.03);
            z-index: 1;
            transition: transform 0.28s var(--ease-bounce), box-shadow 0.28s var(--ease-smooth), background 0.28s var(--ease-smooth);
        }
        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 0 0 6px rgba(255,255,255,0.04), 0 0 18px rgba(255,255,255,0.14); }
            50% { box-shadow: 0 0 0 10px rgba(255,255,255,0.06), 0 0 24px rgba(255,255,255,0.22); }
        }
        .journey-item.education .journey-node { background: #7eacf0; }
        .journey-item.experience .journey-node { background: var(--accent); }
        .journey-card {
            --journey-shift: 0px;
            width: 100%;
            max-width: 312px;
            position: relative;
            appearance: none;
            font: inherit;
            color: inherit;
            text-align: left;
            border-radius: 16px;
            padding: 0.9rem 1rem 2.1rem;
            backdrop-filter: blur(14px);
            cursor: pointer;
            overflow: hidden;
            transform: translateX(var(--journey-shift));
            transition: transform 0.28s var(--ease-smooth), border-color 0.28s var(--ease-smooth), box-shadow 0.28s var(--ease-smooth), background 0.28s var(--ease-smooth);
        }
        .journey-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 45%);
            opacity: 0;
            transition: opacity 0.28s var(--ease-smooth);
            pointer-events: none;
        }
        .journey-item.education .journey-card {
            border: 1px solid rgba(120,164,231,0.28);
            background: linear-gradient(180deg, rgba(74,91,117,0.56), rgba(49,60,77,0.72));
        }
        .journey-item.experience .journey-card {
            border: 1px solid rgba(201,168,76,0.26);
            background: linear-gradient(180deg, rgba(79,69,45,0.32), rgba(57,51,38,0.62));
        }
        .journey-item:hover .journey-card,
        .journey-card:hover,
        .journey-card:focus-visible,
        .journey-item.is-active .journey-card {
            transform: translate(var(--journey-shift), -4px);
            box-shadow: 0 12px 36px rgba(0,0,0,0.22);
        }
        .journey-item:hover .journey-card::before,
        .journey-card:hover::before,
        .journey-card:focus-visible::before,
        .journey-item.is-active .journey-card::before { opacity: 1; }
        .journey-item:hover .journey-date,
        .journey-item:focus-within .journey-date,
        .journey-item.is-active .journey-date {
            color: var(--text-primary);
            border-color: rgba(255,255,255,0.18);
            box-shadow: 0 0 0 6px rgba(255,255,255,0.03);
        }
        .journey-item:hover .journey-node,
        .journey-item:focus-within .journey-node,
        .journey-item.is-active .journey-node {
            transform: scale(1.24);
            animation: pulseGlow 1.35s ease-in-out infinite;
        }
        .journey-item.education .journey-card:hover,
        .journey-item.education .journey-card:focus-visible,
        .journey-item.education:hover .journey-card,
        .journey-item.education.is-active .journey-card {
            border-color: rgba(133,180,255,0.7);
            box-shadow: 0 12px 34px rgba(0,0,0,0.22), 0 0 26px rgba(133,180,255,0.16);
        }
        .journey-item.experience .journey-card:hover,
        .journey-item.experience .journey-card:focus-visible,
        .journey-item.experience:hover .journey-card,
        .journey-item.experience.is-active .journey-card {
            border-color: rgba(201,168,76,0.68);
            box-shadow: 0 12px 34px rgba(0,0,0,0.22), 0 0 26px rgba(201,168,76,0.16);
        }
        .journey-item.education:hover .journey-node,
        .journey-item.education:focus-within .journey-node,
        .journey-item.education.is-active .journey-node {
            box-shadow: 0 0 0 6px rgba(126,172,240,0.14), 0 0 18px rgba(126,172,240,0.4);
        }
        .journey-item.experience:hover .journey-node,
        .journey-item.experience:focus-within .journey-node,
        .journey-item.experience.is-active .journey-node {
            box-shadow: 0 0 0 6px rgba(201,168,76,0.12), 0 0 18px rgba(201,168,76,0.36);
        }
        .journey-card::after {
            content: 'Open details ↗';
            position: absolute;
            left: 1.1rem;
            bottom: 0.7rem;
            font-size: 0.66rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(240,235,227,0.52);
            transition: color 0.28s var(--ease-smooth), transform 0.28s var(--ease-smooth);
        }
        .journey-card:hover::after,
        .journey-card:focus-visible::after {
            color: rgba(240,235,227,0.85);
            transform: translateX(4px);
        }
        .journey-type {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.28rem 0.68rem;
            border-radius: 999px;
            font-size: 0.68rem;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            font-weight: 500;
            margin-bottom: 0.72rem;
        }
        .journey-item.education .journey-type {
            background: rgba(96,140,205,0.16);
            color: #9ec8ff;
        }
        .journey-item.experience .journey-type {
            background: rgba(201,168,76,0.13);
            color: var(--accent);
        }
        .journey-title {
            font-family: var(--font-display);
            font-size: 1.18rem;
            font-weight: 600;
            line-height: 1.06;
            margin-bottom: 0.28rem;
        }
        .journey-org {
            font-size: 0.86rem;
            color: var(--text-primary);
            line-height: 1.3;
            margin-bottom: 0.9rem;
        }
        .journey-modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 2200;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            background: rgba(18,18,26,0.52);
            backdrop-filter: blur(10px);
            opacity: 0;
            visibility: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            transition: opacity 0.35s var(--ease-smooth), visibility 0.35s var(--ease-smooth);
        }
        .journey-modal-overlay.open {
            opacity: 1;
            visibility: visible;
        }
        .journey-modal {
            width: min(920px, 92vw);
            max-height: calc(100vh - 4rem);
            max-height: calc(100dvh - 4rem);
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            border-radius: 28px;
            border: 1px solid rgba(201,168,76,0.18);
            background:
                radial-gradient(circle at top left, rgba(201,168,76,0.12), transparent 28%),
                linear-gradient(180deg, rgba(54,54,69,0.88), rgba(37,37,48,0.94));
            box-shadow: 0 24px 80px rgba(0,0,0,0.36);
            position: relative;
            padding: 2rem 2rem 1.6rem;
        }
        .journey-modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(18,18,26,0.58);
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
            transition: background 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth);
        }
        .journey-modal-close:hover {
            background: rgba(201,168,76,0.18);
            transform: rotate(90deg);
        }
        .journey-modal-top {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            align-items: flex-start;
            margin-bottom: 1.35rem;
            padding-right: 4rem;
        }
        .journey-modal-title {
            font-family: var(--font-display);
            font-size: clamp(2rem, 3.1vw, 2.8rem);
            line-height: 0.98;
            margin-bottom: 0.4rem;
        }
        .journey-modal-org {
            color: var(--text-primary);
            font-size: 1.03rem;
            margin-bottom: 0.35rem;
        }
        .journey-modal-date {
            color: var(--text-secondary);
            font-size: 0.8rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .journey-modal-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
        }
        .journey-modal-panel {
            border-radius: 18px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.02);
            padding: 1rem 1.1rem;
        }
        .journey-modal-panel h4 {
            font-size: 0.72rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-secondary);
            margin-bottom: 0.8rem;
        }
        .journey-modal-panel p,
        .journey-modal-panel li {
            color: var(--text-secondary);
            line-height: 1.75;
            font-size: 0.93rem;
        }
        .journey-modal-panel ul {
            list-style: none;
            display: grid;
            gap: 0.55rem;
        }
        .journey-modal-panel li {
            position: relative;
            padding-left: 1rem;
        }
        .journey-modal-panel li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.78rem;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--accent);
        }
        /* SKILLS */
        #skills {
            background:
                radial-gradient(circle at 16% 22%, rgba(133,180,255,0.07), transparent 24%),
                radial-gradient(circle at 84% 74%, rgba(201,168,76,0.09), transparent 28%),
                var(--bg-primary);
        }
        #skills .section-inner {
            max-width: 1700px;
            padding-top: 6.7rem;
        }
        .skills-stage {
            display: grid;
            grid-template-columns: minmax(680px, 1.12fr) minmax(470px, 0.96fr);
            gap: clamp(2.6rem, 3.5vw, 4.8rem);
            align-items: start;
        }
        .programs-shell,
        .skills-shell {
            position: relative;
            min-height: 580px;
        }
        .split-title {
            font-family: var(--font-display);
            font-size: clamp(2.05rem, 3vw, 2.75rem);
            margin-bottom: 1.45rem;
            line-height: 1.05;
        }
        .split-title span { color: var(--accent); }
        .section-note {
            color: var(--text-secondary);
            font-size: 1.05rem;
            line-height: 1.8;
            max-width: 34rem;
            margin-bottom: 1.7rem;
        }
        .programs-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            position: relative;
            margin-top: 1.25rem;
        }
        .program-card {
            min-height: 214px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 2.1rem;
            padding: 1.45rem 1.2rem 1.15rem 1.3rem;
            border-left: 1px solid rgba(255,255,255,0.1);
            border-top: 1px solid rgba(255,255,255,0.1);
            background: transparent;
            cursor: default;
            transition: background 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth);
        }
        .program-card:hover {
            background: rgba(255,255,255,0.018);
            transform: translateY(-3px);
            border-color: rgba(201,168,76,0.24);
        }
        .program-logo {
            width: 68px;
            height: 68px;
            object-fit: contain;
            flex-shrink: 0;
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.18));
        }
        .program-text strong {
            display: block;
            font-family: var(--font-display);
            font-size: 1.68rem;
            font-weight: 600;
            line-height: 1;
            margin-bottom: 0;
        }
        .program-text span {
            display: block;
            color: var(--text-secondary);
            font-size: 0.86rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .skills-board {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
            margin-top: 1.25rem;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .skill-cluster {
            position: relative;
            border-top: 1px solid rgba(255,255,255,0.1);
            border-radius: 0;
            background: transparent;
            padding: 1rem 0.1rem 1.05rem 0;
            transition: background 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth);
        }
        .skill-cluster:hover {
            background: rgba(255,255,255,0.018);
            border-color: rgba(201,168,76,0.22);
        }
        .skill-cluster h3 {
            font-family: var(--font-display);
            font-size: 1.68rem;
            font-weight: 600;
            margin-bottom: 0;
        }
        .skill-note {
            color: var(--text-secondary);
            font-size: 1.02rem;
            line-height: 1.78;
        }
        .skill-pill,
        .tag {
            display: inline-flex;
            align-items: center;
            padding: 0.42rem 0.8rem;
            border-radius: 999px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            color: var(--text-primary);
            font-size: 0.78rem;
            letter-spacing: 0.04em;
        }

        /* PROJECTS */
        #projects {
            background:
                radial-gradient(circle at 8% 58%, rgba(201,168,76,0.08), transparent 28%),
                radial-gradient(circle at 92% 28%, rgba(133,180,255,0.06), transparent 24%),
                var(--bg-secondary);
        }
        #projects .section-inner {
            max-width: 1760px;
            min-height: 100%;
            padding-top: 5.35rem;
        }
        .projects-toggle {
            display: flex;
            justify-content: center;
            margin-bottom: 1.35rem;
        }
        .projects-switch {
            width: 238px;
            height: 50px;
            position: relative;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.03);
            padding: 4px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            cursor: pointer;
            overflow: hidden;
            transition: border-color 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
        }
        .projects-switch:hover {
            border-color: rgba(201,168,76,0.26);
            box-shadow: 0 0 28px rgba(201,168,76,0.08);
        }
        .projects-switch-thumb {
            position: absolute;
            top: 4px;
            left: 4px;
            width: calc(50% - 4px);
            height: calc(100% - 8px);
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(201,168,76,0.94), rgba(180,146,52,0.92));
            transition: transform 0.28s var(--ease-smooth);
        }
        .projects-switch.is-personal .projects-switch-thumb {
            transform: translateX(calc(100% + 4px));
        }
        .projects-switch-label {
            position: relative;
            z-index: 1;
            font-size: 0.72rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-secondary);
            transition: color 0.25s var(--ease-smooth);
        }
        .projects-switch:not(.is-personal) .projects-switch-label-work,
        .projects-switch.is-personal .projects-switch-label-personal {
            color: var(--bg-primary);
            font-weight: 600;
        }
        .projects-stage {
            position: relative;
            min-height: 76vh;
            padding-top: 1rem;
        }
        .projects-stage::before {
            content: '';
            position: absolute;
            inset: 0;
            background: transparent;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.28s var(--ease-smooth);
            z-index: 4;
        }
        .projects-stage.is-preview-open::before {
            opacity: 0;
            pointer-events: none;
        }
        .projects-stage.is-preview-open .projects-wall {
            opacity: 0.56;
            transform: scale(0.996);
            filter: saturate(0.94);
            pointer-events: none;
        }
        .projects-wall {
            width: min(100%, 1420px);
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            background: transparent;
            justify-content: center;
            position: relative;
            z-index: 1;
            transition: opacity 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth), filter 0.25s var(--ease-smooth);
        }
        .project-logo-button {
            min-height: 218px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: transparent;
            border: 0;
            border-top: 1px solid rgba(201,168,76,0.26);
            border-left: 1px solid rgba(201,168,76,0.26);
            color: var(--text-primary);
            cursor: pointer;
            transition: background 0.28s var(--ease-smooth), transform 0.28s var(--ease-smooth), box-shadow 0.28s var(--ease-smooth), border-color 0.28s var(--ease-smooth);
        }
        .project-logo-button:nth-child(3n) { border-right: 1px solid rgba(201,168,76,0.26); }
        .project-logo-button:nth-last-child(-n+3) { border-bottom: 1px solid rgba(201,168,76,0.26); }
        .project-logo-button::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at center, rgba(201,168,76,0.12), transparent 58%),
                linear-gradient(180deg, rgba(255,255,255,0.012), transparent 70%);
            opacity: 0;
            transition: opacity 0.28s var(--ease-smooth);
            pointer-events: none;
        }
        .project-logo-button::after {
            content: '';
            position: absolute;
            inset: 10px;
            border: 1px solid rgba(201,168,76,0.04);
            transition: border-color 0.28s var(--ease-smooth), box-shadow 0.28s var(--ease-smooth), background 0.28s var(--ease-smooth);
            pointer-events: none;
        }
        .project-logo-button:hover,
        .project-logo-button:focus-visible,
        .project-logo-button.is-active {
            background: rgba(255,255,255,0.04);
            border-color: rgba(201,168,76,0.38);
            transform: translateY(-4px);
            box-shadow: inset 0 0 0 1px rgba(201,168,76,0.08), 0 18px 38px rgba(0,0,0,0.16);
        }
        .project-logo-button:hover::before,
        .project-logo-button:focus-visible::before,
        .project-logo-button.is-active::before {
            opacity: 1;
        }
        .project-logo-button:hover::after,
        .project-logo-button:focus-visible::after,
        .project-logo-button.is-active::after {
            border-color: rgba(201,168,76,0.54);
            box-shadow: 0 0 38px rgba(201,168,76,0.22), inset 0 0 0 1px rgba(201,168,76,0.12);
            background: linear-gradient(180deg, rgba(255,255,255,0.028), transparent);
        }
        .project-logo-button img {
            max-width: 232px;
            max-height: 112px;
            object-fit: contain;
            opacity: 0.94;
            filter: grayscale(0.02) brightness(0.96);
            transition: transform 0.28s var(--ease-smooth), opacity 0.28s var(--ease-smooth), filter 0.28s var(--ease-smooth);
        }
        .project-logo-button:hover img,
        .project-logo-button:focus-visible img,
        .project-logo-button.is-active img {
            transform: scale(1.1);
            opacity: 1;
            filter: drop-shadow(0 14px 28px rgba(0,0,0,0.24)) drop-shadow(0 0 18px rgba(201,168,76,0.18));
        }
        .project-wordmark {
            font-family: var(--font-display);
            font-size: clamp(2rem, 2.6vw, 2.85rem);
            letter-spacing: 0.08em;
            color: var(--text-primary);
        }
        .project-logo-button.is-personal .project-wordmark { color: rgba(240,235,227,0.9); }
        .project-preview {
            position: absolute;
            left: 50%;
            top: 45.5%;
            transform: translate(-50%, -50%) scale(0.98);
            width: min(1320px, 97vw);
            min-height: 560px;
            border-radius: 34px;
            border: 1px solid rgba(201,168,76,0.3);
            background:
                radial-gradient(circle at top left, rgba(201,168,76,0.06), transparent 26%),
                linear-gradient(180deg, rgb(44, 44, 58), rgb(37, 37, 48));
            box-shadow: 0 34px 108px rgba(0,0,0,0.36), 0 0 0 1px rgba(255,255,255,0.03);
            padding: 3.05rem 3.1rem 2.9rem;
            display: grid;
            grid-template-columns: 280px minmax(0, 1fr);
            gap: 2.8rem;
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
            transition: opacity 0.28s var(--ease-smooth), transform 0.28s var(--ease-smooth), box-shadow 0.28s var(--ease-smooth), border-color 0.28s var(--ease-smooth), visibility 0.28s var(--ease-smooth);
            z-index: 6;
        }
        .project-preview.open {
            display: grid;
            opacity: 1;
            pointer-events: auto;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
        }
        .project-preview.is-work {
            border-color: rgba(201,168,76,0.28);
            box-shadow: 0 30px 98px rgba(0,0,0,0.36), 0 0 30px rgba(201,168,76,0.08);
        }
        .project-preview.is-personal {
            border-color: rgba(133,180,255,0.28);
            box-shadow: 0 30px 98px rgba(0,0,0,0.36), 0 0 30px rgba(133,180,255,0.08);
        }
        .project-preview-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            align-self: stretch;
            padding: 0;
            min-height: auto;
        }
        .project-preview-logo img {
            max-width: 100%;
            max-height: 220px;
            object-fit: contain;
        }
        .project-preview-logo .project-wordmark {
            text-align: center;
            font-size: clamp(2rem, 2.2vw, 2.7rem);
        }
        .project-preview-body {
            max-width: 820px;
        }
        .project-preview-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(18,18,26,0.58);
            color: var(--text-primary);
            font-size: 1.4rem;
            cursor: pointer;
            transition: background 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth);
        }
        .project-preview-close:hover {
            background: rgba(201,168,76,0.18);
            transform: rotate(90deg);
        }
        .project-preview-title {
            font-family: var(--font-display);
            font-size: clamp(2.8rem, 4vw, 3.85rem);
            line-height: 0.98;
            margin-bottom: 0.82rem;
        }
        .project-preview-acronym {
            color: var(--text-secondary);
            font-size: 0.98rem;
            letter-spacing: 0.03em;
            text-transform: none;
            margin-bottom: 1.15rem;
        }
        .project-preview-summary {
            color: var(--text-secondary);
            line-height: 1.95;
            font-size: 1.12rem;
            margin-bottom: 1.65rem;
        }
        .project-preview-role-label {
            font-family: var(--font-display);
            font-size: 1.18rem;
            line-height: 1.2;
            color: var(--text-primary);
            margin-bottom: 0.9rem;
        }
        .project-preview-features {
            list-style: none;
            display: grid;
            gap: 0.95rem;
            margin-bottom: 1.7rem;
        }
        .project-preview-features li {
            position: relative;
            padding-left: 1.1rem;
            color: var(--text-secondary);
            font-size: 1.04rem;
            line-height: 1.78;
        }
        .project-preview-features li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.68rem;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--accent);
        }
        .project-preview-link {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            font-family: var(--font-display);
            font-size: 1.18rem;
            line-height: 1.2;
            color: var(--text-primary);
            text-decoration: none;
            border-bottom: 1px solid rgba(255,255,255,0.18);
            padding-bottom: 0.18rem;
            transition: color 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth);
        }
        .project-preview-link:hover {
            color: var(--accent);
            border-color: rgba(201,168,76,0.42);
            transform: translateX(4px);
        }
        .project-preview-link[aria-disabled="true"] {
            color: var(--text-secondary);
            border-color: rgba(255,255,255,0.08);
            pointer-events: none;
        }

        /* EXPERIENCE */
        #experience { background: var(--bg-primary); }
        .timeline { position: relative; max-width: 900px; margin: 0 auto; }
        .timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: translateX(-50%); }
        .timeline-item { display: flex; width: 100%; margin-bottom: 3rem; position: relative; }
        .timeline-item:nth-child(odd) { justify-content: flex-start; }
        .timeline-item:nth-child(even) { justify-content: flex-end; }
        .timeline-dot { position: absolute; left: 50%; top: 1.5rem; width: 14px; height: 14px; background: var(--accent); border: 3px solid var(--bg-primary); border-radius: 50%; transform: translateX(-50%); z-index: 2; }
        .timeline-card { width: 44%; background: var(--bg-card); border: 1px solid var(--border); padding: 1.8rem; border-radius: 4px; backdrop-filter: blur(4px); transition: border-color 0.3s, transform 0.3s; }
        .timeline-card:hover { border-color: var(--accent); transform: translateY(-3px); }
        .timeline-card h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--accent); margin-bottom: 0.2rem; }
        .timeline-card h4 { font-size: 0.95rem; font-weight: 400; margin-bottom: 0.3rem; }
        .timeline-date { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.8rem; }
        .timeline-card ul { list-style: none; padding: 0; }
        .timeline-card li { color: var(--text-secondary); font-size: 0.85rem; padding: 0.25rem 0; padding-left: 1rem; position: relative; line-height: 1.5; }
        .timeline-card li::before { content: '\25B8'; position: absolute; left: 0; color: var(--accent); font-size: 0.9rem; }

        /* CONTACT */
        #contact {
            background:
                radial-gradient(circle at 14% 30%, rgba(201,168,76,0.08), transparent 24%),
                radial-gradient(circle at 88% 72%, rgba(133,180,255,0.06), transparent 26%),
                var(--bg-secondary);
        }
        #contact .section-inner {
            max-width: 1540px;
            padding-top: 5.7rem;
        }
        .contact-content {
            max-width: 1340px;
            margin: 0 auto;
        }
        .contact-panel {
            display: grid;
            grid-template-columns: minmax(330px, 0.84fr) minmax(560px, 1.16fr);
            border-radius: 34px;
            overflow: hidden;
            border: 1px solid rgba(201,168,76,0.18);
            background:
                radial-gradient(circle at top left, rgba(201,168,76,0.12), transparent 24%),
                linear-gradient(180deg, rgba(52,52,67,0.96), rgba(37,37,48,0.98));
            box-shadow: 0 26px 90px rgba(0,0,0,0.28);
        }
        .contact-visual {
            position: relative;
            padding: 0;
            background: transparent;
        }
        .contact-visual-frame {
            position: relative;
            height: 100%;
            min-height: 560px;
            border-radius: 0;
            overflow: hidden;
            border: 0;
            background: transparent;
            box-shadow: none;
        }
        .contact-visual-frame::after {
            display: none;
        }
        .contact-visual-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            display: block;
            transform: scale(1.04);
        }
        .contact-body {
            padding: 2.6rem 2.9rem 2.35rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .contact-heading {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 4vw, 3.8rem);
            font-weight: 300;
            line-height: 0.96;
            margin-bottom: 0.8rem;
        }
        .contact-heading span { color: var(--accent); }
        .contact-copy {
            color: var(--text-secondary);
            font-size: 1rem;
            line-height: 1.8;
            max-width: 36rem;
            margin-bottom: 1.3rem;
        }
        .contact-email {
            font-size: 1.08rem;
            color: var(--accent);
            display: inline-block;
            letter-spacing: 0.03em;
            transition: color 0.3s;
        }
        .contact-email:hover { color: var(--accent-hover); }
        .contact-meta {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 1.2rem;
            flex-wrap: wrap;
            margin-bottom: 1.7rem;
        }
        .social-icons {
            display: flex;
            gap: 0.9rem;
            justify-content: flex-start;
            margin-bottom: 0;
        }
        .social-icon {
            width: 48px;
            height: 48px;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.03);
            transition: all 0.3s;
        }
        .social-icon:hover {
            background: var(--accent);
            border-color: var(--accent);
            transform: translateY(-2px);
        }
        .social-icon:hover svg { fill: var(--bg-primary); }
        .social-icon svg {
            width: 20px;
            height: 20px;
            fill: var(--text-secondary);
            transition: fill 0.3s;
        }
        .social-icon-empty {
            pointer-events: none;
        }
        .contact-form {
            text-align: left;
            display: grid;
            gap: 1rem;
        }
        .form-group { margin-bottom: 0; }
        .form-group label {
            display: block;
            font-size: 0.74rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            margin-bottom: 0.48rem;
        }
        .form-group input,
        .form-group textarea {
            width: 100%;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.1);
            color: var(--text-primary);
            padding: 1rem 1.08rem;
            font-family: var(--font-body);
            font-size: 0.98rem;
            border-radius: 18px;
            transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
            outline: none;
        }
        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: rgba(176,176,192,0.72);
        }
        .form-group input:focus,
        .form-group textarea:focus {
            border-color: rgba(201,168,76,0.46);
            background: rgba(255,255,255,0.05);
            box-shadow: 0 0 0 4px rgba(201,168,76,0.08);
        }
        .form-group textarea {
            resize: vertical;
            min-height: 170px;
        }
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        .form-submit {
            width: 100%;
            padding: 1.08rem 1.4rem;
            background: linear-gradient(180deg, var(--accent-hover), var(--accent));
            border: none;
            color: var(--bg-primary);
            font-family: var(--font-body);
            font-size: 0.92rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            cursor: pointer;
            border-radius: 18px;
            transition: transform 0.22s, box-shadow 0.22s, filter 0.22s;
            margin-top: 0.15rem;
        }
        .form-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 28px rgba(201,168,76,0.16);
            filter: brightness(1.03);
        }
        .form-submit:disabled {
            cursor: wait;
            opacity: 0.78;
            transform: none;
            box-shadow: none;
            filter: none;
        }
        .form-status {
            min-height: 1.4rem;
            margin-top: 0.2rem;
            font-size: 0.9rem;
            line-height: 1.5;
            color: var(--text-secondary);
        }
        .form-status.is-success { color: #9ec8ff; }
        .form-status.is-error { color: #f0b6a8; }
        .form-status.is-pending { color: var(--accent); }
        .form-honeypot {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }
        .footer {
            text-align: left;
            padding: 1.2rem 0 0;
            font-size: 0.82rem;
            color: var(--text-secondary);
            border-top: 1px solid rgba(255,255,255,0.08);
            margin-top: 1.45rem;
        }

        .dot-nav { position: fixed; right: 2rem; top: 50%; transform: translateY(-50%); z-index: 999; display: flex; flex-direction: column; gap: 1.2rem; }
        .dot-nav-item { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--text-secondary); background: transparent; cursor: pointer; transition: all 0.35s var(--ease-smooth); position: relative; }
        .dot-nav-item.active { border-color: var(--accent); background: var(--accent); transform: scale(1.4); }
        .dot-nav-tooltip { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); background: var(--bg-card); color: var(--text-primary); padding: 0.3rem 0.8rem; border-radius: 3px; font-size: 0.75rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.25s; border: 1px solid var(--border); }
        .dot-nav-item:hover .dot-nav-tooltip,
        .dot-nav-item.active .dot-nav-tooltip { opacity: 1; }

        @media (max-width: 1760px), (max-height: 900px) {
            body.mobile-mode .section-inner { padding-bottom: 3rem; }
            .section-inner { padding-left: 2rem; padding-right: 2rem; }
            .navbar { padding: 1rem 2rem; }
            .dot-nav { right: 1rem; gap: 0.95rem; }
            .nav-links { gap: 1.25rem; }
            .nav-links a { font-size: 0.78rem; }
            .hero-content { gap: 2.5rem; padding: 0 2rem; }
            .hero-right { width: clamp(220px, 22vw, 320px); height: clamp(220px, 22vw, 320px); }
            #about .section-inner,
            #skills .section-inner,
            #projects .section-inner,
            #contact .section-inner { max-width: 100%; padding-right: 2rem; }
            #about .section-inner { padding-top: 5rem; }
            .about-stage {
                grid-template-columns: minmax(190px, 0.62fr) minmax(290px, 0.88fr) minmax(560px, 1.45fr);
                gap: clamp(1.1rem, 1.6vw, 2rem);
                align-items: center;
            }
            .about-portrait-wrap { justify-content: center; }
            .about-photo { width: clamp(190px, 17vw, 280px); }
            .about-copy { padding-left: 1.2rem; }
            .about-quote {
                max-width: 16ch;
                font-size: clamp(1.65rem, 2.35vw, 2.65rem);
                margin-bottom: 0.8rem;
            }
            .about-text {
                max-width: 34rem;
                font-size: clamp(0.86rem, 0.95vw, 1rem);
                line-height: 1.62;
            }
            .about-text p { margin-bottom: 0.55rem; }
            .about-journey {
                grid-column: auto;
                width: min(100%, 760px);
                justify-self: end;
                transform: none;
                margin-top: 0;
            }
            .journey-heading {
                text-align: center;
                font-size: clamp(1.35rem, 1.8vw, 1.7rem);
                margin-bottom: 0.85rem;
            }
            .journey-tree {
                width: 100%;
                min-height: 0;
                padding: 0.45rem 0 0.55rem;
                margin: 0 auto;
            }
            .journey-item {
                grid-template-columns: minmax(0, 270px) 68px minmax(0, 270px);
                justify-content: center;
                gap: 0.68rem;
                min-height: 88px;
                margin: 0.18rem 0;
            }
            .journey-card {
                max-width: 270px;
                border-radius: 14px;
                padding: 0.48rem 0.68rem 1.32rem;
            }
            .journey-title { font-size: 0.88rem; line-height: 1.05; margin-bottom: 0.12rem; }
            .journey-org { font-size: 0.68rem; line-height: 1.12; margin-bottom: 0.34rem; }
            .journey-type { font-size: 0.52rem; padding: 0.18rem 0.48rem; margin-bottom: 0.32rem; }
            .journey-date { font-size: 0.52rem; padding: 0.16rem 0.48rem; }
            .journey-card::after { font-size: 0.5rem; left: 0.7rem; bottom: 0.42rem; }
            .journey-item.education .journey-card { --journey-shift: -10px; }
            .journey-item.experience .journey-card { --journey-shift: 10px; }
            .skills-stage { grid-template-columns: 1fr; gap: 2rem; }
            .programs-shell,
            .skills-shell { min-height: auto; }
            .programs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .projects-stage { min-height: 760px; padding-bottom: 0; }
            .projects-wall {
                width: 100%;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .project-logo-button { min-height: 180px; }
            .project-logo-button img { max-width: 200px; max-height: 96px; }
            .project-logo-button:nth-child(3n) { border-right: 0; }
            .project-logo-button:nth-child(2n) { border-right: 1px solid rgba(201,168,76,0.26); }
            .project-logo-button:nth-last-child(-n+3) { border-bottom: 0; }
            .project-logo-button:nth-last-child(-n+2) { border-bottom: 1px solid rgba(201,168,76,0.26); }
            .project-preview {
                width: min(1080px, calc(100vw - 3rem));
                top: 50%;
                min-height: 480px;
                padding: 2.4rem 2.1rem 2rem;
                grid-template-columns: 240px minmax(0, 1fr);
                gap: 2rem;
            }
            .project-preview-body { max-width: none; }
            .project-preview-title { font-size: clamp(2.4rem, 4vw, 3.2rem); }
            .project-preview-summary { font-size: 1rem; line-height: 1.8; }
            .contact-panel {
                grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1fr);
            }
            .contact-visual-frame { min-height: 440px; }
            .contact-body { padding: 2rem 2rem 1.8rem; }
        }
        @media (min-width: 1025px) and (max-width: 1280px) {
            #about .section-inner {
                padding: 4.6rem 1rem 1.2rem;
            }
            .about-stage {
                grid-template-columns: minmax(150px, 0.52fr) minmax(245px, 0.82fr) minmax(450px, 1.45fr);
                gap: 0.85rem;
            }
            .about-photo { width: clamp(150px, 15vw, 190px); }
            .about-copy { padding-left: 0.9rem; }
            .about-quote {
                font-size: clamp(1.45rem, 2.2vw, 2.05rem);
                line-height: 1.08;
                margin-bottom: 0.58rem;
            }
            .about-text {
                font-size: 0.82rem;
                line-height: 1.48;
            }
            .about-text p { margin-bottom: 0.42rem; }
            .about-journey { width: min(100%, 610px); }
            .journey-heading {
                font-size: 1.28rem;
                margin-bottom: 0.52rem;
            }
            .journey-tree {
                min-height: 0;
                padding: 0.28rem 0 0.36rem;
            }
            .journey-item {
                grid-template-columns: minmax(0, 220px) 50px minmax(0, 220px);
                gap: 0.4rem;
                min-height: 72px;
                margin: 0.14rem 0;
            }
            .journey-card {
                max-width: 220px;
                border-radius: 12px;
                padding: 0.42rem 0.56rem 1.18rem;
            }
            .journey-title { font-size: 0.76rem; line-height: 1.05; margin-bottom: 0.1rem; }
            .journey-org { font-size: 0.6rem; line-height: 1.1; margin-bottom: 0.24rem; }
            .journey-type {
                font-size: 0.46rem;
                padding: 0.16rem 0.38rem;
                margin-bottom: 0.24rem;
            }
            .journey-date {
                font-size: 0.44rem;
                padding: 0.14rem 0.38rem;
            }
            .journey-node {
                width: 14px;
                height: 14px;
                border-width: 3px;
            }
            .journey-card::after {
                font-size: 0.44rem;
                left: 0.58rem;
                bottom: 0.34rem;
            }
            .journey-item.education .journey-card { --journey-shift: -6px; }
            .journey-item.experience .journey-card { --journey-shift: 6px; }
        }
        @media (min-width: 1025px) and (max-height: 900px) {
            #about .section-inner {
                padding-top: 3.75rem;
                padding-bottom: 0.75rem;
            }
            #about .section-heading {
                font-size: clamp(1.75rem, 2.8vw, 2.35rem);
            }
            #about .heading-rule {
                margin-bottom: 1.05rem;
            }
            .about-photo {
                width: clamp(150px, 15vw, 230px);
            }
            .about-copy {
                padding-left: 0.9rem;
            }
            .about-quote {
                font-size: clamp(1.35rem, 2.1vw, 2.05rem);
                line-height: 1.08;
                margin-bottom: 0.55rem;
            }
            .about-text {
                font-size: 0.82rem;
                line-height: 1.46;
            }
            .about-text p {
                margin-bottom: 0.38rem;
            }
            .journey-heading {
                font-size: 1.2rem;
                margin-bottom: 0.4rem;
            }
            .journey-tree {
                padding: 0.24rem 0 0.32rem;
            }
            .journey-item {
                min-height: 70px;
                margin: 0.12rem 0;
            }
            .journey-card {
                padding: 0.36rem 0.52rem 1.05rem;
            }
            .journey-title {
                font-size: 0.74rem;
                line-height: 1.04;
                margin-bottom: 0.08rem;
            }
            .journey-org {
                font-size: 0.58rem;
                line-height: 1.08;
                margin-bottom: 0.22rem;
            }
            .journey-type {
                font-size: 0.44rem;
                padding: 0.14rem 0.36rem;
                margin-bottom: 0.22rem;
            }
            .journey-date {
                font-size: 0.42rem;
                padding: 0.13rem 0.36rem;
            }
            .journey-node {
                width: 13px;
                height: 13px;
                border-width: 3px;
            }
            .journey-card::after {
                font-size: 0.42rem;
                left: 0.54rem;
                bottom: 0.3rem;
            }
            .journey-item.education .journey-card { --journey-shift: -6px; }
            .journey-item.experience .journey-card { --journey-shift: 6px; }
        }
        @media (max-width: 1024px) {
            .navbar { padding: 1rem 1.5rem; }
            .nav-links { display: none; }
            .mobile-toggle { display: block; }
            .nav-links.open {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: rgba(37,37,48,0.98);
                padding: 1.5rem 2rem;
                gap: 1.2rem;
                border-bottom: 1px solid var(--border);
            }
            .section-inner { padding: 5rem 1.5rem 2rem; }
            .hero-content { flex-direction: column-reverse; padding: 0 1.5rem; gap: 2rem; }
            .hero-left { text-align: center; }
            .hero-buttons { justify-content: center; }
            .hero-right { width: 220px; height: 220px; }
            #about .section-inner,
            #skills .section-inner,
            #projects .section-inner,
            #contact .section-inner { padding-top: 5rem; padding-right: 1.5rem; }
            .about-stage { grid-template-columns: 1fr; gap: 1.8rem; }
            .about-portrait-wrap { justify-content: flex-start; }
            .about-photo { width: clamp(220px, 34vw, 280px); margin: 0 auto 0 0; }
            .about-copy { padding-left: 1.15rem; }
            .about-quote { max-width: none; font-size: 2.25rem; }
            .about-text { max-width: none; }
            .about-journey {
                width: min(100%, 860px);
                justify-self: center;
                transform: none;
                margin-top: 0;
            }
            .journey-heading { text-align: left; }
            .skills-stage { grid-template-columns: 1fr; gap: 1.8rem; }
            .programs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .skills-board { grid-template-columns: 1fr; }
            .projects-toggle { justify-content: center; }
            .projects-stage { min-height: 720px; }
            .project-preview {
                width: min(920px, calc(100vw - 2rem));
                top: 50%;
                padding: 2.2rem 1.8rem 1.8rem;
                grid-template-columns: 1fr;
            }
            .project-preview-logo { min-height: 140px; }
            .contact-panel { grid-template-columns: 1fr; }
            .contact-visual-frame { min-height: 360px; }
            .contact-body { padding: 1.7rem 1.5rem 1.5rem; }
            .form-row { grid-template-columns: 1fr; }
        }
        @media (max-width: 900px) {
            .dot-nav {
                right: 0.6rem;
                gap: 0.8rem;
            }
            .dot-nav-item {
                width: 8px;
                height: 8px;
            }
            .dot-nav-tooltip {
                display: block;
                right: 16px;
                padding: 0.24rem 0.55rem;
                font-size: 0.66rem;
                letter-spacing: 0.04em;
            }
            .dot-nav-item:not(.active):hover .dot-nav-tooltip { opacity: 0; }
            .journey-tree { min-height: auto; }
            .journey-axis { left: 1rem; transform: none; }
            .journey-item {
                grid-template-columns: 24px 1fr;
                gap: 1rem;
                min-height: 100px;
                margin: 1rem 0;
            }
            .journey-date {
                left: 2.2rem;
                transform: none;
                top: -0.7rem;
            }
            .journey-node { grid-column: 1; }
            .journey-card,
            .journey-item.education .journey-card,
            .journey-item.experience .journey-card {
                grid-column: 2;
                max-width: none;
                --journey-shift: 0px;
            }
            .programs-grid,
            .skills-board,
            .projects-wall { grid-template-columns: 1fr; }
            .program-card,
            .skill-cluster { min-height: auto; }
            .projects-stage { min-height: auto; padding-bottom: 1rem; }
            .projects-stage.reveal-item,
            .projects-stage.reveal-item.visible { transform: none; }
            .project-logo-button { min-height: 156px; }
            .project-logo-button img { max-width: 190px; max-height: 90px; }
            .project-logo-button:nth-child(2n),
            .project-logo-button:nth-child(3n) { border-right: 1px solid rgba(201,168,76,0.26); }
            .project-logo-button:last-child { border-bottom: 1px solid rgba(201,168,76,0.26); }
            .project-preview {
                position: fixed;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%) scale(0.98);
                width: min(92vw, 760px);
                min-height: auto;
                max-height: calc(100vh - 2rem);
                max-height: calc(100dvh - 2rem);
                margin-top: 0;
                padding-bottom: max(2rem, env(safe-area-inset-bottom));
                overflow-y: auto;
                overscroll-behavior: contain;
                -webkit-overflow-scrolling: touch;
                scroll-padding: 1rem 0 2rem;
                z-index: 2200;
            }
            .project-preview.open { transform: translate(-50%, -50%) scale(1); }
            .project-preview-close {
                position: sticky;
                top: 0.75rem;
                grid-column: 1 / -1;
                justify-self: end;
                width: 58px;
                height: 58px;
                margin: -0.45rem -0.35rem 0.2rem 0;
                border-width: 1.5px;
                background: rgba(18,18,26,0.94);
                box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 0 0 6px rgba(37,37,48,0.45);
                font-size: 1.85rem;
                line-height: 1;
                touch-action: manipulation;
                z-index: 8;
                flex-shrink: 0;
            }
            .project-preview-close:active {
                transform: scale(0.94);
            }
            .contact-meta {
                align-items: flex-start;
                flex-direction: column;
            }
            .journey-modal-overlay {
                align-items: flex-start;
                padding: max(0.875rem, env(safe-area-inset-top)) 0.875rem max(0.875rem, env(safe-area-inset-bottom));
            }
            .journey-modal {
                width: min(100%, 760px);
                max-height: calc(100vh - 1.75rem);
                max-height: calc(100dvh - 1.75rem);
                padding: 1.4rem 1.2rem 1.2rem;
            }
            .journey-modal-top { padding-right: 3rem; flex-direction: column; gap: 0.6rem; }
            .journey-modal-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 640px) {
            .navbar { padding: 0.9rem 1rem; }
            .section-inner { padding: 4.8rem 1rem 1.6rem; }
            .dot-nav {
                right: 0.35rem;
                gap: 0.65rem;
            }
            .dot-nav-item {
                width: 7px;
                height: 7px;
                border-width: 1.25px;
            }
            .dot-nav-item.active { transform: scale(1.25); }
            .hero-content { padding: 0; gap: 1.5rem; }
            .hero-right { width: 170px; height: 170px; }
            .hero-name { font-size: clamp(2.1rem, 12vw, 3.1rem); }
            .hero-buttons { width: 100%; }
            .btn { width: 100%; }
            .about-photo { width: 190px; margin: 0 auto 0 0; }
            .about-copy { padding-left: 0.9rem; }
            .about-quote { font-size: 1.9rem; }
            .journey-card { padding: 0.85rem 0.85rem 2rem; }
            .projects-switch { width: min(220px, 100%); }
            .project-preview {
                width: calc(100vw - 1rem);
                max-height: calc(100vh - 1rem);
                max-height: calc(100dvh - 1rem);
                padding: 1.25rem 0.95rem max(1.8rem, env(safe-area-inset-bottom));
                border-radius: 24px;
            }
            .project-preview-close {
                top: 0.65rem;
                width: 60px;
                height: 60px;
                margin: -0.15rem -0.1rem 0.35rem 0;
            }
            .project-preview-title { font-size: 2.2rem; }
            .project-preview-summary,
            .project-preview-features li { font-size: 0.95rem; line-height: 1.7; }
            .contact-visual-frame { min-height: 280px; }
            .contact-body { padding: 1.4rem 1rem 1.2rem; }
            .contact-heading { font-size: 2.2rem; }
            .social-icons { gap: 0.75rem; }
            .social-icon { width: 44px; height: 44px; }
            .journey-modal-close { width: 44px; height: 44px; }
        }