:root {
            --bg-deep: #060606;
            --bg-surface: #0c0c0c;
            --bg-elevated: #141414;
            --bg-card: #0f0f0f;
            --ink: #f2f2f2;
            --ink-muted: #b0b0b0;
            --ink-dim: #555555;
            --accent: #e31e1e;
            --accent-bright: #ff3a3a;
            --accent-glow: rgba(227, 30, 30, 0.5);
            --accent-weak: rgba(227, 30, 30, 0.07);
            --line: rgba(227, 30, 30, 0.12);
            --line-hover: rgba(227, 30, 30, 0.4);
            --radius: 24px;
            --radius-sm: 18px;
            --shadow: 0 10px 40px rgba(0,0,0,0.55);
            --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.9rem);
            --step-0: clamp(0.92rem, 0.86rem + 0.3vw, 1.15rem);
            --step-1: clamp(1.2rem, 1.05rem + 0.75vw, 1.8rem);
            --step-2: clamp(1.65rem, 1.35rem + 1.5vw, 2.9rem);
            --step-3: clamp(2.4rem, 1.8rem + 3vw, 5rem);
            --space: clamp(1.3rem, 0.9rem + 2vw, 2.8rem);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body {
            font-family: 'Inter', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
            background: var(--bg-deep);
            color: var(--ink);
            line-height: 1.75;
            font-size: var(--step-0);
            overflow-x: hidden;
            
        }

        
        
            50% { transform: translate(-50%, -50%) scale(1.12); }
        }
        
        

        
        

        @media (pointer: coarse) {
            body { cursor: auto; }
            .cursor-main, 
        }

        .memoji-wrap {
            position: fixed;
            left: -30px;
            bottom: -60px;
            width: 480px;
            height: 620px;
            z-index: 90;
            pointer-events: none;
            animation: memoji-breathe 4s ease-in-out infinite;
            perspective: 1000px;
            transform-style: preserve-3d;
        }
        @keyframes memoji-breathe {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .memoji-aura {
            position: absolute;
            bottom: 280px;
            left: 55%;
            transform: translateX(-50%) translateZ(-80px);
            width: 420px;
            height: 420px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(200,60,180,0.25) 0%, rgba(227,30,30,0.15) 35%, transparent 60%);
            filter: blur(60px);
            animation: aura-pulse 3s ease-in-out infinite;
        }
        .memoji-aura-2 {
            position: absolute;
            bottom: 260px;
            left: 55%;
            transform: translateX(-50%) translateZ(-40px);
            width: 340px;
            height: 340px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,50,50,0.12) 0%, transparent 55%);
            filter: blur(40px);
            animation: aura-pulse-2 4s ease-in-out infinite;
        }
        @keyframes aura-pulse {
            0%, 100% { opacity: 0.75; transform: translateX(-50%) translateZ(-80px) scale(1); }
            50% { opacity: 1; transform: translateX(-50%) translateZ(-80px) scale(1.2); }
        }
        @keyframes aura-pulse-2 {
            0%, 100% { opacity: 0.6; transform: translateX(-50%) translateZ(-40px) scale(1); }
            50% { opacity: 0.9; transform: translateX(-50%) translateZ(-40px) scale(1.3); }
        }

        .memoji-orbiter {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            z-index: 5;
        }
        .memoji-orbiter-1 {
            width: 14px; height: 14px;
            background: radial-gradient(circle, #ff5a5a, var(--accent));
            box-shadow: 0 0 20px var(--accent-glow);
            bottom: 420px; left: 20%;
            animation: orbit-1 8s linear infinite;
        }
        .memoji-orbiter-2 {
            width: 8px; height: 8px;
            background: radial-gradient(circle, #ff8080, #ff3a3a);
            box-shadow: 0 0 15px rgba(255,58,58,0.5);
            bottom: 350px; left: 75%;
            animation: orbit-2 10s linear infinite;
        }
        .memoji-orbiter-3 {
            width: 10px; height: 10px;
            background: radial-gradient(circle, #ff9999, #ff5555);
            box-shadow: 0 0 18px rgba(255,85,85,0.4);
            bottom: 500px; left: 65%;
            animation: orbit-3 7s linear infinite;
        }
        @keyframes orbit-1 {
            0% { transform: rotate(0deg) translateX(90px) rotate(0deg); }
            100% { transform: rotate(360deg) translateX(90px) rotate(-360deg); }
        }
        @keyframes orbit-2 {
            0% { transform: rotate(120deg) translateX(70px) rotate(-120deg); }
            100% { transform: rotate(480deg) translateX(70px) rotate(-480deg); }
        }
        @keyframes orbit-3 {
            0% { transform: rotate(240deg) translateX(110px) rotate(-240deg); }
            100% { transform: rotate(600deg) translateX(110px) rotate(-600deg); }
        }

        .memoji-shirt {
            position: absolute;
            bottom: 0;
            left: 55%;
            transform: translateX(-50%) translateZ(-20px);
            width: 360px;
            height: 300px;
            background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 30%, #0e0e0e 100%);
            border-radius: 170px 170px 75px 75px;
            border: 1px solid rgba(255,255,255,0.04);
            box-shadow:
                0 30px 80px rgba(0,0,0,0.75),
                inset 0 6px 18px rgba(255,255,255,0.03),
                0 0 50px rgba(227,30,30,0.05);
            transform-style: preserve-3d;
            overflow: hidden;
        }
        .memoji-shirt::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 140px;
            height: 80px;
            background: radial-gradient(ellipse, rgba(200,60,180,0.1) 0%, transparent 70%);
            filter: blur(30px);
        }
        .memoji-shirt::after {
            content: '';
            position: absolute;
            top: 0; left: 10%; right: 10%;
            height: 55%;
            background: linear-gradient(180deg, rgba(255,255,255,0.035), transparent);
            border-radius: 170px 170px 0 0;
            pointer-events: none;
        }
        .memoji-shirt-collar {
            position: absolute;
            bottom: 260px;
            left: 55%;
            transform: translateX(-50%) translateZ(15px);
            width: 130px;
            height: 50px;
            background: linear-gradient(180deg, #1f1f1f, #151515);
            border-radius: 0 0 65px 65px;
            border: 1px solid rgba(255,255,255,0.03);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
            z-index: 4;
        }
        .memoji-shirt-collar::before {
            content: '';
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 2px; height: 70%;
            background: rgba(255,255,255,0.04);
        }

        .memoji-neck {
            position: absolute;
            bottom: 265px;
            left: 55%;
            transform: translateX(-50%) translateZ(10px);
            width: 100px;
            height: 70px;
            background: linear-gradient(180deg, #c89878, #b08060, #a07050);
            border-radius: 28px;
            border: 1px solid rgba(0,0,0,0.04);
            z-index: 5;
            box-shadow:
                0 8px 25px rgba(0,0,0,0.2),
                inset 0 4px 10px rgba(255,255,255,0.04);
        }
        .memoji-neck::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 18px;
            background: linear-gradient(180deg, rgba(0,0,0,0.12), transparent);
            border-radius: 28px 28px 0 0;
        }
        .memoji-collar {
            position: absolute;
            bottom: 310px;
            left: 55%;
            transform: translateX(-50%) translateZ(25px);
            width: 125px;
            height: 12px;
            background: linear-gradient(90deg, transparent, rgba(0,0,0,0.3), transparent);
            border-radius: 6px;
            z-index: 6;
        }

        .memoji-head-wrap {
            position: absolute;
            bottom: 330px;
            left: 55%;
            width: 270px;
            height: 310px;
            transform: translateX(-50%);
            transform-style: preserve-3d;
            perspective: 800px;
            z-index: 10;
        }

        .memoji-head {
            position: absolute;
            inset: 0;
            background: linear-gradient(145deg, #e0b898 0%, #d0a080 20%, #c09070 50%, #b08060 80%, #a07050 100%);
            border-radius: 125px 125px 115px 115px;
            border: 1.5px solid rgba(255,255,255,0.05);
            box-shadow:
                0 18px 50px rgba(0,0,0,0.4),
                inset 0 -10px 25px rgba(0,0,0,0.12),
                inset 0 10px 20px rgba(255,255,255,0.08),
                0 0 30px rgba(227,30,30,0.06);
            transform-style: preserve-3d;
            transition: transform 0.08s ease-out;
            overflow: visible;
        }
        .memoji-head::after {
            content: '';
            position: absolute;
            top: 40px;
            left: 20%;
            width: 40%;
            height: 22%;
            background: radial-gradient(ellipse, rgba(255,255,255,0.14) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(10px);
            pointer-events: none;
            z-index: 30;
        }
        .memoji-head::before {
            content: '';
            position: absolute;
            bottom: 30px;
            right: 15%;
            width: 30%;
            height: 25%;
            background: radial-gradient(ellipse, rgba(0,0,0,0.06) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(12px);
            pointer-events: none;
            z-index: 30;
        }

        .memoji-cap-dome {
            position: absolute;
            top: -5px;
            left: 50%;
            transform: translateX(-50%) translateZ(35px);
            width: 290px;
            height: 135px;
            background: linear-gradient(180deg, #a82020 0%, #881818 30%, #681010 60%, #4a0a0a 100%);
            border-radius: 145px 145px 0 0;
            border: 1.5px solid rgba(255,80,80,0.12);
            box-shadow:
                0 14px 35px rgba(0,0,0,0.35),
                inset 0 8px 20px rgba(255,100,100,0.18),
                inset 0 -5px 10px rgba(0,0,0,0.18),
                0 0 25px rgba(227,30,30,0.12);
            z-index: 25;
            transform-style: preserve-3d;
        }
        .memoji-cap-dome::before {
            content: '';
            position: absolute;
            top: 22px;
            left: 8%;
            right: 8%;
            height: 65px;
            background: linear-gradient(180deg, rgba(255,130,130,0.2), transparent);
            border-radius: 50%;
            filter: blur(10px);
        }
        .memoji-cap-dome::after {
            content: '';
            position: absolute;
            top: 35px;
            right: 0;
            width: 22px;
            height: 75px;
            background: linear-gradient(90deg, transparent, rgba(0,0,0,0.18));
            border-radius: 0 145px 0 0;
        }
        .memoji-cap-seam-left,
        .memoji-cap-seam-right {
            position: absolute;
            top: 0;
            width: 2px;
            height: 100px;
            background: linear-gradient(180deg, rgba(0,0,0,0.12), transparent);
            z-index: 26;
        }
        .memoji-cap-seam-left {
            left: 35%;
            transform: rotate(-8deg);
        }
        .memoji-cap-seam-right {
            right: 35%;
            transform: rotate(8deg);
        }

        .memoji-cap-visor {
            position: absolute;
            top: 110px;
            left: 50%;
            transform: translateX(-50%) translateZ(45px);
            width: 310px;
            height: 48px;
            background: linear-gradient(180deg, #902020 0%, #701818 50%, #501010 100%);
            border-radius: 0 0 155px 155px;
            border: 1.5px solid rgba(255,80,80,0.1);
            box-shadow:
                0 16px 35px rgba(0,0,0,0.4),
                inset 0 -6px 12px rgba(0,0,0,0.12),
                0 5px 15px rgba(0,0,0,0.12),
                0 0 18px rgba(227,30,30,0.1);
            z-index: 26;
            transform-style: preserve-3d;
        }
        .memoji-cap-visor::after {
            content: '';
            position: absolute;
            top: 5px;
            left: 8%;
            right: 8%;
            height: 15px;
            background: linear-gradient(90deg, transparent, rgba(255,100,100,0.15), transparent);
            border-radius: 0 0 50% 50%;
        }

        .memoji-ear {
            position: absolute;
            top: 125px;
            width: 44px;
            height: 62px;
            background: linear-gradient(145deg, #d0a080, #c09070);
            border-radius: 50%;
            border: 1px solid rgba(0,0,0,0.04);
            box-shadow: 0 6px 18px rgba(0,0,0,0.18);
            z-index: 35;
            transform-style: preserve-3d;
        }
        .memoji-ear.left {
            left: -18px;
            transform: rotate(-12deg) translateZ(15px);
        }
        .memoji-ear.right {
            right: -18px;
            transform: rotate(12deg) translateZ(15px);
        }
        .memoji-ear-inner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 22px;
            height: 40px;
            background: rgba(0,0,0,0.06);
            border-radius: 50%;
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
        }

        .memoji-face {
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%) translateZ(20px);
            width: 210px;
            height: 185px;
            transform-style: preserve-3d;
        }

        .memoji-brow {
            position: absolute;
            top: 0;
            width: 60px;
            height: 18px;
            background: linear-gradient(180deg, #333, #1a1a1a);
            border-radius: 16px;
            z-index: 14;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
            transform-style: preserve-3d;
        }
        .memoji-brow.left { left: 20px; transform: rotate(-8deg) translateZ(5px); }
        .memoji-brow.right { right: 20px; transform: rotate(8deg) translateZ(5px); }

        .memoji-eye {
            position: absolute;
            top: 28px;
            width: 56px;
            height: 44px;
            background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%);
            border-radius: 50%;
            overflow: hidden;
            box-shadow:
                0 5px 12px rgba(0,0,0,0.12),
                inset 0 -2px 4px rgba(0,0,0,0.05),
                0 0 0 1px rgba(0,0,0,0.03);
            z-index: 12;
            transform-style: preserve-3d;
        }
        .memoji-eye.left { left: 26px; transform: translateZ(8px); }
        .memoji-eye.right { right: 26px; transform: translateZ(8px); }

        .memoji-pupil {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 24px;
            height: 24px;
            background: radial-gradient(circle at 35% 35%, #666 0%, #111 60%, #000 100%);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: transform 0.05s ease-out;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        }
        .memoji-pupil::after {
            content: '';
            position: absolute;
            top: 5px;
            left: 5px;
            width: 9px;
            height: 9px;
            background: rgba(255,255,255,0.95);
            border-radius: 50%;
            box-shadow: 0 0 4px rgba(255,255,255,0.3);
        }
        .memoji-pupil::before {
            content: '';
            position: absolute;
            bottom: 4px;
            right: 4px;
            width: 4px;
            height: 4px;
            background: rgba(255,255,255,0.4);
            border-radius: 50%;
        }

        .memoji-eye-lid {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 0;
            background: linear-gradient(180deg, #d0a080, #c09070);
            z-index: 15;
            animation: memoji-blink 4s infinite;
        }
        @keyframes memoji-blink {
            0%, 44%, 56%, 100% { height: 0; }
            50% { height: 100%; }
        }

        .memoji-nose {
            position: absolute;
            top: 85px;
            left: 50%;
            transform: translateX(-50%) translateZ(12px);
            width: 18px;
            height: 12px;
            background: rgba(0,0,0,0.06);
            border-radius: 50%;
            z-index: 12;
            box-shadow: 0 2px 6px rgba(0,0,0,0.06);
        }

        .memoji-mouth {
            position: absolute;
            bottom: 2px;
            left: 50%;
            transform: translateX(-50%) translateZ(10px);
            width: 88px;
            height: 42px;
            background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%);
            border-radius: 12px 12px 38px 38px;
            border: 1px solid rgba(0,0,0,0.04);
            box-shadow: 0 6px 15px rgba(0,0,0,0.1);
            z-index: 12;
            overflow: hidden;
            transform-style: preserve-3d;
        }
        .memoji-mouth::before {
            content: '';
            position: absolute;
            top: 18px;
            left: 0;
            right: 0;
            height: 2px;
            background: rgba(0,0,0,0.06);
        }
        .memoji-mouth::after {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 22px;
            background: rgba(0,0,0,0.03);
        }
        .memoji-mouth-teeth-1,
        .memoji-mouth-teeth-2 {
            position: absolute;
            top: 0;
            width: 2px;
            height: 20px;
            background: rgba(0,0,0,0.03);
        }
        .memoji-mouth-teeth-1 { left: 33%; }
        .memoji-mouth-teeth-2 { right: 33%; }

        .memoji-cheek {
            position: absolute;
            top: 100px;
            width: 36px;
            height: 20px;
            background: rgba(255,120,100,0.1);
            border-radius: 50%;
            filter: blur(10px);
            z-index: 11;
        }
        .memoji-cheek.left { left: 6px; }
        .memoji-cheek.right { right: 6px; }

        .memoji-shadow {
            position: absolute;
            bottom: -10px;
            left: 55%;
            transform: translateX(-50%) translateZ(-60px);
            width: 300px;
            height: 45px;
            background: radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, transparent 70%);
            border-radius: 50%;
            animation: memoji-shadow-breathe 4s ease-in-out infinite;
        }
        @keyframes memoji-shadow-breathe {
            0%, 100% { transform: translateX(-50%) translateZ(-60px) scale(1); opacity: 0.5; }
            50% { transform: translateX(-50%) translateZ(-60px) scale(0.85); opacity: 0.35; }
        }

        @media (max-width: 1400px) {
            .memoji-wrap {
                width: 400px;
                height: 500px;
                left: -50px;
            }
            .memoji-head-wrap { width: 235px; height: 265px; bottom: 275px; }
            .memoji-head { border-radius: 108px 108px 98px 98px; }
            .memoji-cap-dome { width: 252px; height: 118px; border-radius: 126px 126px 0 0; top: -3px; }
            .memoji-cap-visor { width: 272px; height: 42px; border-radius: 0 0 136px 136px; top: 96px; }
            .memoji-shirt { width: 310px; height: 245px; border-radius: 155px 155px 60px 60px; bottom: 0; }
            .memoji-shirt-collar { width: 115px; height: 42px; bottom: 220px; border-radius: 0 0 58px 58px; }
            .memoji-neck { width: 88px; height: 58px; bottom: 235px; }
            .memoji-collar { width: 110px; bottom: 280px; }
            .memoji-face { width: 180px; height: 155px; top: 88px; }
            .memoji-eye { width: 48px; height: 38px; top: 24px; }
            .memoji-pupil { width: 20px; height: 20px; }
            .memoji-brow { width: 52px; height: 15px; top: 0; }
            .memoji-nose { width: 15px; height: 10px; top: 72px; }
            .memoji-mouth { width: 74px; height: 36px; bottom: 2px; border-radius: 10px 10px 32px 32px; }
            .memoji-ear { width: 38px; height: 52px; top: 105px; }
            .memoji-ear.left { left: -16px; }
            .memoji-ear.right { right: -16px; }
            .memoji-cheek { width: 30px; height: 16px; top: 84px; }
            .memoji-aura { width: 360px; height: 360px; bottom: 230px; }
            .memoji-aura-2 { width: 290px; height: 290px; bottom: 220px; }
            .memoji-shadow { width: 250px; height: 36px; }
        }

        @media (max-width: 1100px) {
            .memoji-wrap {
                width: 320px;
                height: 400px;
                left: -60px;
            }
            .memoji-head-wrap { width: 190px; height: 215px; bottom: 225px; }
            .memoji-head { border-radius: 88px 88px 78px 78px; }
            .memoji-cap-dome { width: 204px; height: 95px; border-radius: 102px 102px 0 0; top: -2px; }
            .memoji-cap-visor { width: 220px; height: 34px; border-radius: 0 0 110px 110px; top: 78px; }
            .memoji-shirt { width: 260px; height: 195px; border-radius: 125px 125px 48px 48px; }
            .memoji-shirt-collar { width: 95px; height: 36px; bottom: 175px; border-radius: 0 0 48px 48px; }
            .memoji-neck { width: 70px; height: 48px; bottom: 190px; }
            .memoji-collar { width: 90px; bottom: 230px; }
            .memoji-face { width: 145px; height: 125px; top: 72px; }
            .memoji-eye { width: 40px; height: 32px; top: 20px; }
            .memoji-pupil { width: 16px; height: 16px; }
            .memoji-pupil::after { width: 7px; height: 7px; top: 4px; left: 4px; }
            .memoji-brow { width: 42px; height: 12px; top: -2px; }
            .memoji-nose { width: 12px; height: 8px; top: 58px; }
            .memoji-mouth { width: 60px; height: 28px; bottom: 2px; border-radius: 8px 8px 26px 26px; }
            .memoji-ear { width: 32px; height: 42px; top: 85px; }
            .memoji-ear.left { left: -14px; }
            .memoji-ear.right { right: -14px; }
            .memoji-cheek { width: 24px; height: 13px; top: 66px; }
            .memoji-aura { width: 280px; height: 280px; bottom: 185px; }
            .memoji-aura-2 { width: 230px; height: 230px; bottom: 175px; }
            .memoji-shadow { width: 200px; height: 28px; }
        }

        @media (max-width: 850px) {
            .memoji-wrap { display: none; }
        }

        #particles {
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
        }

        .orb {
            position: fixed;
            border-radius: 50%;
            filter: blur(100px);
            pointer-events: none;
            z-index: -2;
            opacity: 0.5;
        }
        .orb-1 {
            width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(227,30,30,0.18) 0%, transparent 70%);
            top: -10%; left: -10%;
            animation: float-orb-1 12s ease-in-out infinite;
        }
        .orb-2 {
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(180,20,20,0.12) 0%, transparent 70%);
            bottom: 10%; right: -5%;
            animation: float-orb-2 14s ease-in-out infinite;
        }
        .orb-3 {
            width: 300px; height: 300px;
            background: radial-gradient(circle, rgba(227,30,30,0.08) 0%, transparent 70%);
            top: 50%; left: 50%;
            animation: float-orb-3 16s ease-in-out infinite;
        }
        @keyframes float-orb-1 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(40px, 30px) scale(1.1); }
            66% { transform: translate(-20px, 50px) scale(0.95); }
        }
        @keyframes float-orb-2 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(-50px, -30px) scale(1.08); }
            66% { transform: translate(30px, -50px) scale(0.92); }
        }
        @keyframes float-orb-3 {
            0%, 100% { transform: translate(-50%, -50%) scale(1); }
            33% { transform: translate(-40%, -60%) scale(1.12); }
            66% { transform: translate(-60%, -40%) scale(0.9); }
        }

        body::after {
            content: '';
            position: fixed;
            inset: 0;
            background-image:
                linear-gradient(rgba(227,30,30,0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(227,30,30,0.02) 1px, transparent 1px);
            background-size: 60px 60px;
            z-index: -1;
            pointer-events: none;
            mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 70%);
            -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 70%);
        }

        nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 100;
            padding: 1rem var(--space);
            background: rgba(6,6,6,0.7);
            backdrop-filter: blur(24px) saturate(1.3);
            -webkit-backdrop-filter: blur(24px) saturate(1.3);
            border-bottom: 1px solid var(--line);
            transition: all 0.35s ease;
        }
        nav.scrolled {
            padding: 0.65rem var(--space);
            background: rgba(6,6,6,0.92);
            border-bottom-color: var(--line-hover);
        }
        .nav-inner {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .nav-logo {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--ink);
            text-decoration: none;
            letter-spacing: -0.02em;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .nav-logo .logo-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 12px var(--accent-glow);
            animation: pulse-dot 2s infinite;
        }
        @keyframes pulse-dot {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.4); opacity: 0.6; }
        }
        .nav-links {
            display: flex;
            gap: 2.2rem;
            list-style: none;
        }
        .nav-links a {
            color: var(--ink-muted);
            text-decoration: none;
            font-size: var(--step--1);
            font-weight: 500;
            transition: color 0.3s ease;
            position: relative;
            padding: 0.3rem 0;
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent);
            border-radius: 1px;
            transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 0 8px var(--accent-glow);
        }
        .nav-links a:hover, .nav-links a.active {
            color: var(--ink);
        }
        .nav-links a:hover::after, .nav-links a.active::after {
            width: 100%;
        }
        .nav-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--ink);
            font-size: 1.5rem;
            
            padding: 0.3rem;
            transition: transform 0.3s ease;
        }
        .nav-toggle:hover { transform: scale(1.1); }

        @media (max-width: 700px) {
            .nav-links {
                position: fixed;
                top: 0; right: -100%;
                width: 75%;
                max-width: 300px;
                height: 100vh;
                background: rgba(8,8,8,0.98);
                backdrop-filter: blur(20px);
                flex-direction: column;
                padding: 5rem 2rem 2rem;
                gap: 1.5rem;
                transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                border-left: 1px solid var(--line);
                z-index: 99;
            }
            .nav-links.open { right: 0; }
            .nav-toggle { display: block; z-index: 101; }
            .nav-overlay {
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.7);
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.3s ease;
                z-index: 98;
            }
            .nav-overlay.open { opacity: 1; pointer-events: all; }
        }

        section {
            padding: calc(var(--space) * 2.5) var(--space);
            max-width: 920px;
            margin: 0 auto;
            position: relative;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        body.scrolled-past-hero section {
            transform: translateX(105px);
        }
        @media (max-width: 1400px) {
            body.scrolled-past-hero section {
                transform: translateX(80px);
            }
        }
        @media (max-width: 1100px) {
            body.scrolled-past-hero section {
                transform: translateX(55px);
            }
        }
        @media (max-width: 850px) {
            body.scrolled-past-hero section {
                transform: translateX(0);
            }
        }

        .section-label {
            font-family: 'Space Grotesk', sans-serif;
            font-size: var(--step--1);
            font-weight: 600;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.14em;
            margin-bottom: 1.4rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }
        .section-label::before {
            content: '';
            display: inline-block;
            width: 40px;
            height: 2.5px;
            background: linear-gradient(90deg, var(--accent), transparent);
            border-radius: 1px;
            animation: line-grow 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            transform-origin: left;
            transform: scaleX(0);
        }
        .section-label.visible::before {
            transform: scaleX(1);
        }
        @keyframes line-grow {
            to { transform: scaleX(1); }
        }

        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            padding-top: 5rem;
            padding-bottom: 4rem;
        }
        .hero-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.2rem;
        }
        .hero-avatar-wrap {
            position: relative;
            margin-bottom: 0.5rem;
        }
        .hero-avatar {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: linear-gradient(145deg, var(--accent) 0%, #6b1010 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 2.8rem;
            font-weight: 700;
            color: white;
            border: 3px solid rgba(227,30,30,0.3);
            box-shadow: 0 0 0 5px rgba(227,30,30,0.05), 0 0 60px var(--accent-glow);
            position: relative;
            overflow: hidden;
            animation: avatar-float 4s ease-in-out infinite;
        }
        .hero-avatar img {
            width: 100%; height: 100%;
            border-radius: 50%;
            object-fit: cover;
            display: block;
            position: relative;
            z-index: 1;
        }
        @keyframes avatar-float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .hero-avatar-ring {
            position: absolute;
            inset: -12px;
            border-radius: 50%;
            border: 1.5px solid transparent;
            background: linear-gradient(135deg, var(--accent), transparent 60%) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: ring-rotate 8s linear infinite;
        }
        @keyframes ring-rotate {
            to { transform: rotate(360deg); }
        }
        .hero h1 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: var(--step-3);
            font-weight: 700;
            letter-spacing: -0.03em;
            line-height: 1.08;
            animation: fade-up 0.8s 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
        }
        .hero h1 .accent {
            color: var(--accent);
            text-shadow: 0 0 40px rgba(227,30,30,0.3);
        }
        .hero-tagline {
            font-family: 'Space Grotesk', sans-serif;
            font-size: var(--step-1);
            font-weight: 500;
            color: var(--ink-muted);
            letter-spacing: 0.02em;
            min-height: 1.5em;
            animation: fade-up 0.8s 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
        }
        .typing-cursor {
            display: inline-block;
            width: 2.5px;
            height: 1em;
            background: var(--accent);
            margin-left: 3px;
            vertical-align: text-bottom;
            animation: blink 0.8s step-end infinite;
            box-shadow: 0 0 6px var(--accent-glow);
        }
        @keyframes blink {
            50% { opacity: 0; }
        }
        .hero-line {
            width: 70px;
            height: 3px;
            background: linear-gradient(90deg, var(--accent), transparent);
            border-radius: 2px;
            margin: 0.3rem 0;
            animation: fade-up 0.8s 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
        }
        .hero-desc {
            max-width: 500px;
            color: var(--ink-dim);
            font-size: var(--step-0);
            line-height: 1.85;
            animation: fade-up 0.8s 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
        }
        .hero-badges {
            display: flex;
            gap: 0.7rem;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 0.4rem;
            animation: fade-up 0.8s 1.1s cubic-bezier(0.4, 0, 0.2, 1) both;
        }
        .badge {
            padding: 0.45rem 1.1rem;
            border-radius: 100px;
            background: var(--accent-weak);
            border: 1px solid var(--line);
            font-size: var(--step--1);
            font-weight: 500;
            color: var(--accent-bright);
            letter-spacing: 0.02em;
            transition: all 0.3s ease;
        }
        .badge:hover {
            border-color: var(--line-hover);
            box-shadow: 0 0 16px rgba(227,30,30,0.12);
            transform: translateY(-2px);
        }
        @keyframes fade-up {
            from { opacity: 0; transform: translateY(25px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .scroll-hint {
            position: absolute;
            bottom: 2.2rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.4rem;
            color: var(--ink-dim);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            animation: bounce 2.2s ease-in-out infinite;
        }
        .scroll-hint svg {
            width: 22px;
            height: 22px;
            stroke: var(--accent);
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
            40% { transform: translateX(-50%) translateY(10px); }
            60% { transform: translateX(-50%) translateY(5px); }
        }

        .about-card {
            background: var(--bg-card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: calc(var(--space) * 1.2);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .about-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent), transparent 60%);
        }
        .about-card::after {
            content: '';
            position: absolute;
            top: -50%; right: -20%;
            width: 350px; height: 350px;
            background: radial-gradient(circle, rgba(227,30,30,0.05) 0%, transparent 70%);
            pointer-events: none;
            transition: transform 0.6s ease;
        }
        .about-card:hover {
            border-color: var(--line-hover);
            box-shadow: 0 12px 48px rgba(227,30,30,0.06);
            transform: translateY(-4px);
        }
        .about-card:hover::after {
            transform: scale(1.1);
        }

        .about-inner {
            display: flex;
            gap: 1.8rem;
            align-items: flex-start;
            position: relative;
            z-index: 1;
        }
        @media (max-width: 600px) {
            .about-inner {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
        }

        .about-photo {
            flex-shrink: 0;
            width: 120px;
            height: 120px;
            border-radius: var(--radius-sm);
            background: linear-gradient(145deg, rgba(227,30,30,0.08), rgba(107,16,16,0.1));
            border: 2px solid var(--line);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            overflow: hidden;
            transition: all 0.4s ease;
            position: relative;
        }
        .about-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: inherit;
        }
        .about-card:hover .about-photo {
            border-color: var(--line-hover);
        }
        .about-photo svg {
            width: 32px;
            height: 32px;
            stroke: var(--accent);
            opacity: 0.4;
        }
        .about-photo span {
            font-size: 0.7rem;
            color: var(--ink-dim);
            text-align: center;
            padding: 0 0.5rem;
        }

        .about-text {
            flex: 1;
            min-width: 0;
        }
        .about-text p {
            color: var(--ink-muted);
            line-height: 1.9;
        }
        .about-text p + p { margin-top: 1rem; }

        .timeline {
            position: relative;
            padding-left: 2.4rem;
        }
        .timeline::before {
            content: '';
            position: absolute;
            left: 8px;
            top: 10px;
            bottom: 10px;
            width: 2px;
            background: linear-gradient(180deg, var(--accent) 0%, rgba(227,30,30,0.08) 80%, transparent 100%);
        }
        .timeline-item {
            position: relative;
            padding-bottom: 2.2rem;
        }
        .timeline-item:last-child { padding-bottom: 0; }
        .timeline-dot {
            position: absolute;
            left: -2.4rem;
            top: 7px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--bg-deep);
            border: 2.5px solid var(--accent);
            box-shadow: 0 0 0 4px rgba(227,30,30,0.08);
            transition: all 0.3s ease;
        }
        .timeline-item:hover .timeline-dot {
            box-shadow: 0 0 0 6px rgba(227,30,30,0.12), 0 0 14px var(--accent-glow);
            transform: scale(1.1);
        }
        .timeline-item.current .timeline-dot {
            background: var(--accent);
            box-shadow: 0 0 0 4px rgba(227,30,30,0.1), 0 0 16px var(--accent-glow);
            animation: pulse-dot 2.2s infinite;
        }
        .timeline-content {
            background: var(--bg-card);
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            padding: 1.4rem 1.7rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .timeline-content::before {
            content: '';
            position: absolute;
            left: 0; top: 0; bottom: 0;
            width: 3px;
            background: var(--accent);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .timeline-content:hover {
            transform: translateX(8px);
            border-color: var(--line-hover);
            box-shadow: var(--shadow);
        }
        .timeline-content:hover::before { opacity: 1; }
        .timeline-school {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: var(--step-0);
            color: var(--ink);
            margin-bottom: 0.4rem;
            line-height: 1.35;
        }
        .timeline-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.7rem;
            align-items: center;
        }
        .timeline-year {
            font-size: var(--step--1);
            color: var(--accent-bright);
            font-weight: 600;
            letter-spacing: 0.02em;
            background: var(--accent-weak);
            padding: 0.2rem 0.75rem;
            border-radius: 6px;
        }
        .timeline-level {
            font-size: var(--step--1);
            color: var(--ink-dim);
        }

        .family-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }
        @media (max-width: 640px) {
            .family-grid { grid-template-columns: 1fr; }
        }
        .family-card {
            background: var(--bg-card);
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            padding: 2rem;
            text-align: center;
            transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .family-card::before {
            content: '';
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 35%;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            opacity: 0.5;
            transition: all 0.4s ease;
        }
        .family-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 48px rgba(227,30,30,0.08);
            border-color: var(--line-hover);
        }
        .family-card:hover::before {
            width: 75%;
            opacity: 1;
        }
        .family-photo-wrap {
            width: 100%;
            aspect-ratio: 4/3;
            border-radius: var(--radius-sm);
            background: linear-gradient(145deg, rgba(227,30,30,0.05), rgba(107,16,16,0.08));
            border: 2px solid var(--line);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.8rem;
            margin-bottom: 1.5rem;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }
        .family-card:hover .family-photo-wrap {
            border-color: var(--line-hover);
            box-shadow: inset 0 0 40px rgba(227,30,30,0.04);
        }
        .family-photo-wrap img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
            display: block;
        }
        .family-photo-wrap svg {
            width: 40px;
            height: 40px;
            stroke: var(--accent);
            opacity: 0.4;
        }
        .family-photo-wrap span {
            font-size: var(--step--1);
            color: var(--ink-dim);
        }
        .family-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(145deg, var(--accent), #6b1010);
            margin: 0 auto 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.4rem;
            font-weight: 700;
            color: white;
            box-shadow: 0 0 0 4px rgba(227,30,30,0.08);
            transition: all 0.4s ease;
        }
        .family-card:hover .family-avatar {
            transform: scale(1.08);
            box-shadow: 0 0 20px rgba(227,30,30,0.15);
        }
        .family-name {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: var(--step-1);
            color: var(--ink);
            margin-bottom: 0.2rem;
        }
        .family-role {
            font-size: var(--step-0);
            color: var(--accent-bright);
            font-weight: 500;
        }
        .family-note {
            font-size: var(--step--1);
            color: var(--ink-dim);
            margin-top: 0.7rem;
            line-height: 1.6;
        }

        .coming-soon {
            background: var(--bg-card);
            border: 1.5px dashed var(--line);
            border-radius: var(--radius);
            padding: calc(var(--space) * 2);
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }
        .coming-soon:hover {
            border-color: var(--line-hover);
            box-shadow: 0 12px 40px rgba(227,30,30,0.06);
        }
        .coming-soon::before {
            content: '';
            position: absolute;
            top: -40%;
            left: 50%;
            transform: translateX(-50%);
            width: 250px; height: 250px;
            background: radial-gradient(circle, rgba(227,30,30,0.06) 0%, transparent 70%);
            animation: float-orb-1 10s ease-in-out infinite;
        }
        .coming-soon-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.4rem;
            border-radius: var(--radius-sm);
            background: var(--accent-weak);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            border: 1px solid var(--line);
            animation: avatar-float 5s ease-in-out infinite;
        }
        .coming-soon-icon svg {
            width: 36px;
            height: 36px;
            stroke: var(--accent);
        }
        .coming-soon h3 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: var(--step-1);
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 1;
        }
        .coming-soon p {
            color: var(--ink-dim);
            font-size: var(--step-0);
            max-width: 420px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .contact-section { max-width: 1000px; }
        .contact-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }
        @media (max-width: 700px) {
            .contact-wrapper { grid-template-columns: 1fr; }
        }
        .contact-card {
            background: var(--bg-card);
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            padding: 2rem 1.8rem;
            text-decoration: none;
            color: inherit;
            transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .contact-card::before {
            content: '';
            position: absolute;
            left: 0; top: 0; bottom: 0;
            width: 3px;
            background: var(--accent);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .contact-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(227,30,30,0.1) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }
        .contact-card:hover {
            border-color: var(--line-hover);
            transform: translateY(-6px);
            box-shadow: 0 16px 48px rgba(227,30,30,0.1);
        }
        .contact-card:hover::before { opacity: 1; }
        .contact-card:hover::after { opacity: 1; }
        .contact-card-header {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .contact-card-icon {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            background: var(--accent-weak);
            border: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.35s ease;
        }
        .contact-card:hover .contact-card-icon {
            background: rgba(227,30,30,0.15);
            transform: scale(1.08) rotate(-4deg);
            box-shadow: 0 0 20px rgba(227,30,30,0.1);
        }
        .contact-card-icon svg {
            width: 24px;
            height: 24px;
            stroke: var(--accent);
            transition: transform 0.35s ease;
        }
        .contact-card:hover .contact-card-icon svg {
            transform: scale(1.1);
        }
        .contact-card-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: var(--step-1);
            font-weight: 600;
            color: var(--ink);
        }
        .contact-card-body {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            padding-left: 0;
        }
        .contact-card-label {
            font-size: var(--step--1);
            color: var(--accent-bright);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .contact-card-value {
            font-size: var(--step-0);
            color: var(--ink-muted);
            word-break: break-all;
            font-family: 'Inter', monospace;
            letter-spacing: 0.01em;
            line-height: 1.5;
        }
        .contact-card-arrow {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: var(--accent-weak);
            border: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: translate(-8px, 8px);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .contact-card-arrow svg {
            width: 16px;
            height: 16px;
            stroke: var(--accent);
        }
        .contact-card:hover .contact-card-arrow {
            opacity: 1;
            transform: translate(0, 0);
        }
        .contact-card.facebook {
            grid-column: 1 / -1;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 1.2rem;
            padding: 1.8rem;
        }
        .contact-card.facebook .contact-card-icon {
            width: 64px;
            height: 64px;
            border-radius: 18px;
        }
        .contact-card.facebook .contact-card-icon svg {
            width: 28px;
            height: 28px;
        }
        .contact-card.facebook .contact-card-title {
            font-size: var(--step-1);
        }
        .contact-card.facebook .contact-card-label {
            font-size: var(--step--1);
        }
        @media (max-width: 700px) {
            .contact-card.facebook {
                flex-direction: column;
                gap: 0.8rem;
                padding: 1.5rem;
            }
        }

        footer {
            text-align: center;
            padding: 2.5rem var(--space) 4rem;
            color: var(--ink-dim);
            font-size: var(--step--1);
            border-top: 1px solid var(--line);
            margin-top: 1rem;
            position: relative;
        }
        footer::before {
            content: '';
            position: absolute;
            top: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
        }
        footer span {
            color: var(--accent);
            font-weight: 500;
        }

        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .reveal-delay-1 { transition-delay: 0.12s; }
        .reveal-delay-2 { transition-delay: 0.24s; }
        .reveal-delay-3 { transition-delay: 0.36s; }
        .reveal-delay-4 { transition-delay: 0.48s; }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            .scroll-hint, .hero-avatar, .hero-avatar-ring, .coming-soon-icon,
            .logo-dot, .timeline-item.current .timeline-dot, .orb, .section-label::before,
            .memoji-wrap, .memoji-aura, .memoji-aura-2, .memoji-breathe, .memoji-blink, .memoji-shadow-breathe,
            .memoji-orbiter, 
            .reveal {
                opacity: 1;
                transform: none;
                transition: none;
            }
            body.scrolled-past-hero section {
                transform: none;
            }
        }

        @media (max-width: 640px) {
            .hero-avatar { width: 135px; height: 135px; font-size: 2.3rem; }
            .hero h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.2rem); }
            .timeline { padding-left: 1.9rem; }
            .timeline-dot { left: -1.9rem; width: 15px; height: 15px; }
            .timeline::before { left: 6px; }
            .hero-badges { gap: 0.5rem; }
            .badge { padding: 0.4rem 0.9rem; }
            .orb-1 { width: 300px; height: 300px; }
            .orb-2 { width: 250px; height: 250px; }
            .orb-3 { width: 200px; height: 200px; }
            .contact-card { padding: 1.6rem 1.4rem; }
        }

        @media print {
            body { background: #fff; color: #000; cursor: auto; }
            nav, .scroll-hint, .nav-overlay, footer, .orb, #particles,
            .cursor-main, .cursor-trail-container, .memoji-wrap {
                display: none !important;
            }
            section { padding: 1.5rem 0; max-width: 100%; }
            .about-card, .timeline-content, .family-card, .coming-soon, .contact-card {
                background: #f5f5f5;
                border: 1px solid #ddd;
                break-inside: avoid;
            }
            .reveal { opacity: 1; transform: none; }
        }
        @page { size: A4; margin: 18mm; }

        /* ===== SLIDE PAGES (display-based, zero click-blocking issues) ===== */
        html, body {
            overflow: hidden;
            height: 100%;
        }
        .slide-page {
            display: none;
            width: 100%;
            min-height: 100vh;
            min-height: 100dvh;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .slide-page.active {
            display: block;
        }
        /* Hero section uses flex, so its parent needs to accommodate */
        .slide-page.active:has(.hero) {
            display: flex;
            flex-direction: column;
        }
        .slide-page::-webkit-scrollbar { display: none; }
        .slide-page { -ms-overflow-style: none; scrollbar-width: none; }

        /* Slide nav - FIXED, always visible, bottom right */
        .slide-nav {
            position: fixed;
            bottom: 3.5rem;
            right: 2.5rem;
            display: flex;
            gap: 1rem;
            z-index: 9999;
            background: rgba(6,6,6,0.75);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            padding: 0.7rem 1.2rem;
            border-radius: 16px;
            border: 1px solid var(--line);
            box-shadow: 0 10px 40px rgba(0,0,0,0.4);
        }
        .slide-nav-btn {
            background: var(--bg-card);
            border: 1.5px solid var(--line);
            color: var(--ink-muted);
            padding: 0.6rem 1.4rem;
            border-radius: 12px;
            font-family: 'Space Grotesk', sans-serif;
            font-size: var(--step--1);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            letter-spacing: 0.02em;
        }
        .slide-nav-btn:hover:not(:disabled) {
            border-color: var(--line-hover);
            background: var(--accent-weak);
            color: var(--accent-bright);
            box-shadow: 0 0 20px rgba(227,30,30,0.1);
            transform: translateY(-2px);
        }
        .slide-nav-btn:disabled {
            opacity: 0.25;
            cursor: not-allowed;
        }
        .slide-nav-btn svg {
            width: 18px; height: 18px;
            stroke: currentColor;
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .slide-counter {
            display: flex;
            align-items: center;
            padding: 0 0.4rem;
            color: var(--ink-dim);
            font-family: 'Space Grotesk', sans-serif;
            font-size: var(--step--1);
            font-weight: 500;
            letter-spacing: 0.05em;
            min-width: 3.5ch;
            justify-content: center;
        }
        .slide-counter .current { color: var(--accent-bright); font-weight: 700; }

        @media (max-width: 640px) {
            .slide-nav {
                padding: 0.55rem 0.9rem;
                gap: 0.7rem;
                bottom: 2.5rem;
                right: 1.5rem;
            }
            .slide-nav-btn {
                padding: 0.5rem 1rem;
                font-size: 0.75rem;
            }
            .slide-nav-btn svg { width: 16px; height: 16px; }
        }