:root {
            --gray-0: #fff;
            --gray-10: #f4f4f4;
            --gray-20: #e4e4e7;
            --gray-70: #71717a;
            --gray-80: #3f3f46;
            --gray-90: #18181b;
            --gray-100: #000;
            --accent: #a78bfa;
            --accent-muted: rgba(139, 92, 246, .1);
            --border: rgba(255, 255, 255, .1);
            --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
            --font-mono: 'IBM Plex Mono', monospace;
            --max-width: 1100px;
            --radius: 0
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased
        }

        html, body {
            background-color: var(--gray-100);
            color: var(--gray-20);
            font-family: var(--font-sans);
            line-height: 1.5;
            scroll-behavior: smooth;
            overflow-x: hidden
        }

        /* ── Background ── */
        .bg-wrapper {
            position: fixed;
            inset: 0;
            z-index: -2;
            background-color: var(--gray-100);
            background-image: radial-gradient(var(--gray-90) 1px, transparent 1px);
            background-size: 32px 32px;
            opacity: .4
        }

        .bg-mask {
            position: fixed;
            inset: 0;
            z-index: -1;
            background:
                radial-gradient(circle at top right, rgba(139, 92, 246, .1), transparent 60%),
                radial-gradient(circle at bottom left, rgba(139, 92, 246, .04), transparent 50%),
                linear-gradient(to bottom, var(--gray-100) 0%, transparent 20%, transparent 80%, var(--gray-100) 100%)
        }

        /* ── Layout ── */
        .container {
            width: 100%;
            max-width: var(--max-width);
            margin: 0 auto;
            border-left: 1px solid var(--border);
            border-right: 1px solid var(--border);
            overflow: hidden
        }

        /* ── Header / Hero ── */
        header {
            padding: 0;
            border-bottom: 1px solid var(--border);
            display: grid;
            grid-template-columns: 1fr 380px;
            min-height: 82vh
        }

        .hero-main {
            padding: 7rem 4rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-right: 1px solid var(--border);
            background: linear-gradient(135deg, rgba(139, 92, 246, .04) 0%, transparent 60%)
        }

        /* Site Logo */
        .site-logo {
            width: 160px;
            height: auto;
            display: block;
            margin-bottom: 3rem;
            filter: brightness(1.05) drop-shadow(0 0 18px rgba(167, 139, 250, .22))
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.75rem
        }

        .hero-badge::before {
            content: "";
            width: 32px;
            height: 1px;
            background: var(--accent)
        }

        .mono-label {
            font-family: var(--font-mono);
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .15em;
            color: var(--accent);
            display: block
        }

        /* Blinking cursor */
        @keyframes blink {
            0%, 49% { opacity: 1 }
            50%, 100% { opacity: 0 }
        }

        header h1 {
            font-size: clamp(2.5rem, 10vw, 6rem);
            font-weight: 800;
            letter-spacing: -.07em;
            color: var(--gray-0);
            line-height: .85;
            margin-bottom: 1.75rem;
            text-transform: uppercase;
            word-wrap: break-word
        }

        header h1 .cursor {
            display: inline-block;
            width: .08em;
            height: .85em;
            background: var(--accent);
            vertical-align: bottom;
            margin-left: .06em;
            animation: blink 1.2s step-end infinite
        }

        header p {
            font-size: 1.1rem;
            color: var(--gray-70);
            max-width: 460px;
            line-height: 1.55;
            font-weight: 400;
            margin-bottom: 2rem
        }

        /* Language nav */
        .lang-links {
            display: flex;
            gap: 1.25rem;
            flex-wrap: wrap
        }

        .lang-links a {
            font-family: var(--font-mono);
            font-size: .65rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--gray-70);
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: color .2s, border-color .2s
        }

        .lang-links a:hover {
            color: var(--accent);
            border-color: var(--accent)
        }

        /* Hero visual (right pane) */
        .hero-visual {
            background-color: var(--gray-90);
            background-image:
                linear-gradient(var(--border) 1px, transparent 1px),
                linear-gradient(90deg, var(--border) 1px, transparent 1px);
            background-size: 40px 40px;
            background-position: center;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden
        }

        /* Scanlines overlay */
        .hero-visual::before {
            content: "";
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 3px,
                rgba(0, 0, 0, .07) 3px,
                rgba(0, 0, 0, .07) 4px
            );
            z-index: 3;
            pointer-events: none
        }

        .hero-visual::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, transparent 25%, var(--gray-100) 100%);
            opacity: .7;
            z-index: 2
        }

        #avatar {
            width: 280px;
            height: 280px;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            position: relative;
            z-index: 1;
            object-fit: cover;
            box-shadow: 0 0 60px rgba(0, 0, 0, .8);
            filter: contrast(1.1) brightness(.88) saturate(.9);
            transition: all .5s cubic-bezier(.19, 1, .22, 1)
        }

        .hero-visual:hover #avatar {
            transform: scale(1.03) translateY(-4px);
            filter: contrast(1.15) brightness(1) saturate(1);
            border-color: var(--accent);
            box-shadow: 0 0 40px rgba(167, 139, 250, .2)
        }

        /* ── Sections ── */
        section {
            padding: 0;
            border-bottom: 1px solid var(--border)
        }

        .section-title {
            padding: 1.25rem 4rem;
            border-bottom: 1px solid var(--border);
            background: rgba(255, 255, 255, .018)
        }

        .section-title h2 {
            font-family: var(--font-mono);
            font-size: .72rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: .22em;
            color: var(--gray-70)
        }

        .section-content {
            padding: 4rem
        }

        /* ── Grid Cells ── */
        .grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0
        }

        .cell {
            border: 1px solid var(--border);
            margin: -.5px;
            padding: 3rem;
            transition: background .2s;
            display: flex;
            flex-direction: column
        }

        .cell:hover { background: rgba(255, 255, 255, .025) }

        .cell h3 {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--gray-0);
            margin-bottom: 1rem
        }

        .cell p {
            font-size: .9375rem;
            color: var(--gray-70);
            line-height: 1.65
        }

        .link-arrow {
            font-family: var(--font-mono);
            font-size: .72rem;
            color: var(--accent);
            text-decoration: none;
            margin-top: auto;
            padding-top: 2rem;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            letter-spacing: .05em;
            text-transform: uppercase
        }

        .link-arrow::after {
            content: "→";
            transition: transform .2s
        }

        .link-arrow:hover::after { transform: translateX(5px) }

        /* ── Project Cards ── */
        .project-card {
            display: grid;
            grid-template-columns: 300px 1fr;
            border-bottom: 1px solid var(--border)
        }

        .project-card:last-child { border-bottom: none }
        .project-card:hover { background: rgba(167, 139, 250, .018) }

        .project-visual {
            border-right: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2.5rem 2rem;
            position: relative;
            overflow: hidden;
            background: #0a0a0a;
            min-height: 240px
        }

        /* Corner accent marks */
        .project-visual::before {
            content: '';
            position: absolute;
            top: 12px;
            left: 12px;
            width: 14px;
            height: 14px;
            border-top: 1px solid rgba(167, 139, 250, .35);
            border-left: 1px solid rgba(167, 139, 250, .35);
            z-index: 2
        }

        /* bottom-right corner */
        .project-card .proj-corner-br {
            position: absolute;
            bottom: 12px;
            right: 12px;
            width: 14px;
            height: 14px;
            border-bottom: 1px solid rgba(167, 139, 250, .35);
            border-right: 1px solid rgba(167, 139, 250, .35)
        }

        .project-visual .proj-icon {
            width: 96px;
            height: 96px;
            object-fit: contain;
            position: relative;
            z-index: 1;
            filter: drop-shadow(0 0 20px rgba(167, 139, 250, .3))
        }

        .project-content {
            padding: 3rem;
            display: flex;
            flex-direction: column;
            gap: .6rem
        }

        .project-type {
            font-family: var(--font-mono);
            font-size: .58rem;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--accent);
            opacity: .75
        }

        .project-name {
            font-size: 1.75rem;
            font-weight: 800;
            color: var(--gray-0);
            letter-spacing: -.04em;
            line-height: 1;
            margin-bottom: .2rem
        }

        .project-desc {
            color: var(--gray-70);
            font-size: .875rem;
            line-height: 1.72;
            max-width: 56ch;
            flex: 1
        }

        .tech-tags {
            display: flex;
            flex-wrap: wrap;
            gap: .35rem;
            margin-top: .2rem
        }

        .tech-tag {
            font-family: var(--font-mono);
            font-size: .58rem;
            letter-spacing: .09em;
            text-transform: uppercase;
            padding: .18rem .5rem;
            border: 1px solid rgba(255, 255, 255, .1);
            color: var(--gray-70)
        }

        .project-links {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-top: .75rem
        }

        .plink {
            font-family: var(--font-mono);
            font-size: .62rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            text-decoration: none;
            padding: .42rem .9rem;
            border: 1px solid rgba(167, 139, 250, .3);
            color: var(--accent);
            transition: all .2s
        }

        .plink:hover {
            background: rgba(167, 139, 250, .08);
            border-color: var(--accent)
        }

        .plink-primary {
            background: var(--accent);
            color: #000;
            border-color: var(--accent);
            font-weight: 700
        }

        .plink-primary:hover {
            background: rgba(167, 139, 250, .85);
            color: #000
        }

        /* ── Open Source Packages ── */
        .pkg-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr)
        }

        .pkg-cell {
            padding: 3rem 2.5rem;
            border-right: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            transition: background .2s
        }

        .pkg-cell:hover { background: rgba(167, 139, 250, .02) }
        .pkg-cell:nth-child(3n) { border-right: none }

        .pkg-platform {
            font-family: var(--font-mono);
            font-size: .58rem;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--accent);
            opacity: .75;
            margin-bottom: .75rem
        }

        .pkg-name {
            font-family: var(--font-mono);
            font-size: 1rem;
            font-weight: 700;
            color: var(--gray-0);
            letter-spacing: -.02em;
            margin-bottom: .5rem
        }

        .pkg-desc {
            font-size: .82rem;
            color: var(--gray-70);
            line-height: 1.65;
            margin-bottom: 1.5rem
        }

        .pkg-link {
            font-family: var(--font-mono);
            font-size: .62rem;
            letter-spacing: .07em;
            text-decoration: none;
            color: rgba(255, 255, 255, .3);
            border-bottom: 1px solid rgba(255, 255, 255, .12);
            padding-bottom: .1rem;
            transition: all .2s;
            word-break: break-all
        }

        .pkg-link:hover {
            color: var(--accent);
            border-color: var(--accent)
        }

        /* ── Connectivity V2 ── */
        .conn-group { border-top: 1px solid var(--border) }

        .conn-group-header {
            padding: 1.25rem 4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border)
        }

        .conn-group-label {
            font-family: var(--font-mono);
            font-size: .65rem;
            color: var(--gray-70);
            text-transform: uppercase;
            letter-spacing: .15em
        }

        .conn-live {
            display: flex;
            align-items: center;
            gap: .5rem;
            font-family: var(--font-mono);
            font-size: .6rem;
            color: var(--gray-70);
            letter-spacing: .12em
        }

        .conn-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
            animation: statusPulse 2.5s ease-in-out infinite
        }

        @keyframes statusPulse {
            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(167,139,250,.5) }
            60% { opacity: .7; box-shadow: 0 0 0 5px rgba(167,139,250,0) }
        }

        .conn-grid { display: grid; width: 100% }
        .conn-grid--2 { grid-template-columns: repeat(2, 1fr) }
        .conn-grid--3 { grid-template-columns: repeat(3, 1fr) }
        .conn-grid--2 .conn-item:nth-child(2n) { border-right: none }
        .conn-grid--3 .conn-item:nth-child(3n) { border-right: none }

        .conn-item {
            border-right: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            padding: 3rem 4rem;
            text-align: left;
            text-decoration: none;
            transition: all .3s cubic-bezier(.19, 1, .22, 1);
            background: transparent;
            display: flex;
            flex-direction: column;
            gap: .4rem;
            color: inherit;
            position: relative
        }

        .conn-item:hover { background: rgba(167, 139, 250, .05) }

        .conn-item:hover .value {
            color: var(--accent);
            transform: translateX(6px)
        }

        .conn-item:hover .conn-icon { opacity: .85; color: var(--accent) }

        .conn-item-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .4rem
        }

        .conn-proto {
            font-family: var(--font-mono);
            font-size: .56rem;
            color: var(--accent);
            letter-spacing: .15em;
            opacity: .65;
            border: 1px solid rgba(167,139,250,.2);
            padding: .15rem .45rem
        }

        .conn-icon {
            width: 18px;
            height: 18px;
            color: var(--gray-70);
            opacity: .4;
            transition: all .3s ease;
            flex-shrink: 0
        }

        .conn-item .label {
            display: block;
            font-family: var(--font-mono);
            font-size: .68rem;
            color: var(--gray-70);
            text-transform: uppercase;
            letter-spacing: .12em
        }

        .conn-item .value {
            font-size: 1.35rem;
            font-weight: 600;
            color: var(--gray-0);
            transition: all .4s ease;
            display: inline-block;
            word-wrap: break-word;
            word-break: break-word
        }

        .conn-sub {
            display: flex;
            gap: .75rem;
            align-items: center;
            flex-wrap: wrap;
            margin-top: .15rem
        }

        .conn-group-header--support .conn-group-label { color: var(--accent); opacity: .8 }

        .conn-group-sub {
            font-family: var(--font-mono);
            font-size: .6rem;
            color: var(--gray-70);
            letter-spacing: .1em;
            opacity: .45
        }

        .conn-item--support {
            border-left: 2px solid rgba(167,139,250,.12);
            overflow: hidden
        }

        .conn-item--support::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(167,139,250,.035) 0%, transparent 65%);
            pointer-events: none
        }

        .conn-item--support:hover { border-left-color: rgba(167,139,250,.55) }

        .conn-support-tag {
            font-family: var(--font-mono);
            font-size: .6rem;
            color: var(--gray-70);
            opacity: .5;
            margin-top: .2rem
        }

        .select-all {
            user-select: all;
            cursor: text
        }

        /* ── Footer ── */
        footer {
            padding: 4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: .75rem;
            color: var(--gray-80)
        }

        .footer-logo {
            height: 20px;
            width: auto;
            opacity: .45;
            filter: brightness(2);
            transition: opacity .2s
        }

        .footer-logo:hover { opacity: .9 }

        /* ── Responsive ── */
        @media (max-width: 1024px) {
            header { grid-template-columns: 1fr; min-height: auto }

            .hero-main {
                border-right: none;
                border-bottom: 1px solid var(--border);
                padding: 6rem 2.5rem;
                align-items: center;
                text-align: center
            }

            .hero-main header p { max-width: 100% }

            .lang-links { justify-content: center }

            .hero-visual { height: 380px }

            #avatar { width: 220px; height: 220px }

            .conn-grid--3 { grid-template-columns: repeat(2, 1fr) }
            .conn-grid--3 .conn-item:nth-child(3n) { border-right: auto }
            .conn-grid--3 .conn-item:nth-child(2n) { border-right: none }
            .conn-group-header { padding: 1.25rem 2.5rem }
            .conn-item { padding: 3rem 2rem }

            .project-card { grid-template-columns: 240px 1fr }

            .pkg-grid { grid-template-columns: repeat(2, 1fr) }

            .pkg-cell:nth-child(3n) { border-right: 1px solid var(--border) }
            .pkg-cell:nth-child(2n) { border-right: none }

            .section-title { padding: 1.25rem 2.5rem }
        }

        @media (max-width: 768px) {
            .container { border-left: none; border-right: none }

            .grid { grid-template-columns: 1fr }

            .conn-grid--2, .conn-grid--3 { grid-template-columns: 1fr }
            .conn-group-header { padding: 1.25rem 1.5rem }
            .conn-item { border-right: none; padding: 2.5rem 1.5rem }

            .hero-main { padding: 4.5rem 1.5rem }

            header h1 { font-size: clamp(2rem, 12vw, 4rem) }

            #avatar { width: 190px; height: 190px }

            .cell { padding: 2rem 1.5rem }

            .section-content { padding: 3rem 1.5rem }

            .section-title { padding: 1.25rem 1.5rem }

            .project-card { grid-template-columns: 1fr }

            .project-visual {
                border-right: none;
                border-bottom: 1px solid var(--border);
                min-height: 180px;
                padding: 2rem
            }

            .project-content { padding: 2rem 1.5rem }

            .pkg-grid { grid-template-columns: 1fr }

            .pkg-cell { padding: 2rem 1.5rem }
            .pkg-cell:nth-child(2n) { border-right: 1px solid var(--border) }
            .pkg-cell:nth-child(n) { border-right: none }

            footer {
                padding: 2rem 1.5rem;
                flex-direction: column;
                gap: 1.5rem;
                text-align: center
            }

            .site-logo { width: 120px }
        }

        /* ══ ANIMATIONS ══ */

        /* Page-load entrance */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(22px) }
            to   { opacity: 1; transform: translateY(0) }
        }

        .hero-badge  { animation: fadeUp .65s cubic-bezier(.16,1,.3,1) .10s both }
        header h1    { animation: fadeUp .65s cubic-bezier(.16,1,.3,1) .22s both }
        header p     { animation: fadeUp .65s cubic-bezier(.16,1,.3,1) .36s both }
        .lang-links  { animation: fadeUp .65s cubic-bezier(.16,1,.3,1) .46s both }

        /* Avatar float */
        @keyframes float {
            0%, 100% { transform: translateY(0) }
            50%       { transform: translateY(-10px) }
        }

        .avatar-float {
            display: contents;
            animation: float 7s ease-in-out infinite
        }

        /* Wrapper around <picture> so float doesn't fight hover transform */
        .avatar-wrap {
            position: relative;
            z-index: 1;
            animation: float 7s ease-in-out infinite
        }

        .hero-visual:hover .avatar-wrap { animation-play-state: paused }

        /* Scanline drift */
        @keyframes scanDrift {
            to { background-position-y: 40px }
        }

        .hero-visual::before { animation: scanDrift 4s linear infinite }

        /* Section title shimmer */
        @keyframes shimmer {
            from { background-position: -200% center }
            to   { background-position:  200% center }
        }

        .section-title h2 {
            background: linear-gradient(90deg,
                var(--gray-70) 0%,
                rgba(167, 139, 250, .75) 48%,
                var(--gray-70) 100%
            );
            background-size: 250% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shimmer 7s linear infinite
        }

        /* Project card corner accent pulse on hover */
        @keyframes cornerPulse {
            0%, 100% { opacity: .35 }
            50%       { opacity: 1 }
        }

        .project-card:hover .project-visual::before,
        .project-card:hover .proj-corner-br { animation: cornerPulse 1.4s ease-in-out infinite }

        /* Accent glow on project-visual border on hover */
        .project-card:hover .project-visual {
            box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .25), 0 0 40px rgba(167, 139, 250, .06)
        }

        /* Background orb drift */
        @keyframes orbDrift {
            0%, 100% { transform: translate(0, 0) scale(1) }
            38%       { transform: translate(45px, -35px) scale(1.1) }
            70%       { transform: translate(-28px, 22px) scale(.93) }
        }

        .bg-orb {
            position: fixed;
            border-radius: 50%;
            filter: blur(100px);
            pointer-events: none;
            z-index: -3;
            animation: orbDrift 16s ease-in-out infinite
        }

        /* Site logo entrance */
        .site-logo { animation: fadeUp .6s cubic-bezier(.16,1,.3,1) both }

        /* Hero visual slide in from right */
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(30px) }
            to   { opacity: 1; transform: translateX(0) }
        }

        .hero-visual { animation: slideInRight .8s cubic-bezier(.16,1,.3,1) .05s both }

        /* ══ V2 — SVG LOGO ANIMATION ══ */

        .site-logo-svg {
            width: 160px;
            height: 160px;
            display: block;
            margin-bottom: 3rem;
            filter: drop-shadow(0 0 18px rgba(167, 139, 250, .22))
        }

        @keyframes drawIn {
            from { stroke-dashoffset: var(--dash-len) }
            to   { stroke-dashoffset: 0 }
        }

        @keyframes partReveal {
            from { opacity: 0; transform: translateY(6px) }
            to   { opacity: 1; transform: translateY(0) }
        }

        @keyframes dotPulse {
            0%, 100% { opacity: .9; transform: scale(1) }
            50%      { opacity: 1; transform: scale(1.3) }
        }

        .logo-bracket {
            stroke-dasharray: var(--dash-len);
            stroke-dashoffset: var(--dash-len);
            animation: drawIn .8s cubic-bezier(.16,1,.3,1) var(--delay, 0s) both
        }

        .logo-part {
            opacity: 0;
            animation: partReveal .5s cubic-bezier(.16,1,.3,1) var(--delay, 0s) both
        }

        .logo-dot {
            opacity: 0;
            animation: partReveal .4s cubic-bezier(.16,1,.3,1) var(--delay, 0s) both;
            transform-origin: center
        }

        .logo-dot-pulse {
            animation: dotPulse 2.5s ease-in-out 1.2s infinite
        }

        /* ══ V2 — SCROLL REVEAL ══ */

        [data-reveal] {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity .65s cubic-bezier(.16,1,.3,1),
                        transform .65s cubic-bezier(.16,1,.3,1)
        }

        [data-reveal].is-revealed {
            opacity: 1;
            transform: translateY(0)
        }

        /* Staggered children */
        [data-reveal-stagger] > * {
            opacity: 0;
            transform: translateY(14px);
            transition: opacity .5s cubic-bezier(.16,1,.3,1),
                        transform .5s cubic-bezier(.16,1,.3,1)
        }

        [data-reveal-stagger].is-revealed > * {
            opacity: 1;
            transform: translateY(0)
        }

        [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0s }
        [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: .06s }
        [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: .12s }
        [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: .18s }
        [data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: .24s }
        [data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: .30s }
        [data-reveal-stagger].is-revealed > *:nth-child(7) { transition-delay: .36s }
        [data-reveal-stagger].is-revealed > *:nth-child(8) { transition-delay: .42s }

        /* ══ V2 — 3D CARD TILT ══ */

        .project-card {
            transform-style: preserve-3d;
            transition: background .2s, transform .35s ease-out;
            will-change: transform
        }

        .project-card .project-content,
        .project-card .project-visual {
            transform: translateZ(0)
        }

        .project-card:hover .project-visual {
            box-shadow:
                inset 0 0 0 1px rgba(167, 139, 250, .25),
                0 0 60px rgba(167, 139, 250, .08),
                0 0 120px rgba(167, 139, 250, .04)
        }

        /* ══ V2 — GRADIENT HERO TEXT ══ */

        header h1 {
            background: linear-gradient(135deg, var(--gray-0) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent
        }

        header h1 .cursor {
            -webkit-text-fill-color: initial;
            background: var(--accent)
        }

        /* ══ V2 — LINK UNDERLINE SLIDE ══ */

        .section-content a:not(.plink),
        .pkg-link {
            position: relative
        }

        .section-content a:not(.plink)::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--accent);
            transition: width .3s ease
        }

        .section-content a:not(.plink):hover::after {
            width: 100%
        }

        /* ══ V2 — GRADIENT SECTION DIVIDERS ══ */

        section {
            border-bottom: 1px solid transparent;
            border-image: linear-gradient(90deg, transparent, rgba(167, 139, 250, .2), transparent) 1
        }

        /* ══ V2 — SECTION TITLE ACCENT LINE ══ */

        .section-title {
            position: relative;
            overflow: hidden
        }

        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 1px;
            background: linear-gradient(90deg, var(--accent), transparent);
            transition: width .8s cubic-bezier(.16,1,.3,1)
        }

        [data-reveal].is-revealed.section-title::after,
        [data-reveal].is-revealed + .section-title::after,
        .section-title:hover::after {
            width: 100%
        }

        /* ══ V2 — RESPONSIVE OVERRIDES ══ */

        @media (max-width: 768px) {
            .site-logo-svg { width: 120px; height: 120px }
        }

        /* ══ V2 — REDUCED MOTION ══ */

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important
            }

            [data-reveal],
            [data-reveal-stagger] > * {
                opacity: 1 !important;
                transform: none !important
            }
        }