*,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0
    }

    html {
        font-size: 16px;
        overflow: hidden;
        height: 100%
    }

    :root {
        --bg: #faf7f2;
        --surface: #f2ede4;
        --s2: #ebe4d8;
        --v: #4f46e5;
        --v2: #6366f1;
        --v3: #4338ca;
        --cyan: #b45309;
        --white: #1c1917;
        --muted: #57534e;
        --faint: #a8a29e;
        --border: rgba(79, 70, 229, .13);
        --glow: rgba(79, 70, 229, .2);
        --ff-display: 'Playfair Display', Georgia, serif;
        --ff-body: 'DM Sans', sans-serif;
        --ff-mono: 'DM Mono', monospace;
    }

    body {
        background: var(--bg);
        color: var(--white);
        font-family: var(--ff-body);
        overflow: hidden;
        height: 100vh;
        width: 100vw;
    }

    @media(max-width:768px) {
        body {
            cursor: auto;
            overflow: auto;
            height: auto
        }

        html {
            overflow: auto
        }
    }

    body::after {
        content: '';
        position: fixed;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
        opacity: .012;
        pointer-events: none;
        z-index: 9000
    }

    /* TRANSITION */
    #page-transition {
        position: fixed;
        inset: 0;
        z-index: 5000;
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden
    }

    #pt-left,
    #pt-right {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50%;
        background: var(--surface)
    }

    #pt-left {
        left: 0;
        transform: translateX(-100%);
        border-right: 1px solid rgba(124, 58, 237, .3)
    }

    #pt-right {
        right: 0;
        transform: translateX(100%);
        border-left: 1px solid rgba(124, 58, 237, .3)
    }

    #pt-logo {
        position: absolute;
        z-index: 2;
        font-family: var(--ff-mono);
        font-size: 1.1rem;
        letter-spacing: .2em;
        color: var(--v3);
        opacity: 0;
        transform: scale(.8);
        white-space: nowrap
    }

    /* CURSOR */
    #cur-dot,
    #cur-ring {
        position: fixed;
        pointer-events: none;
        z-index: 9999;
        top: 0;
        left: 0
    }

    #cur-dot {
        width: 6px;
        height: 6px;
        background: #fff;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: transform .12s, background .2s
    }

    #cur-ring {
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width .3s, height .3s, border-color .3s
    }

    #cur-ring.h {
        width: 58px;
        height: 58px;
        border-color: var(--v3)
    }

    #cur-dot.h {
        transform: translate(-50%, -50%) scale(2.2);
        background: var(--v3)
    }

    @media(max-width:768px) {

        #cur-dot,
        #cur-ring {
            display: none
        }
    }

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

    /* NAV */
    nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 800;
        padding: 1.2rem 0;
        background: rgba(250, 247, 242, .93);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border)
    }

    .nav-inner {
        max-width: 1300px;
        margin: auto;
        padding: 0 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .nav-logo {
        font-family: var(--ff-mono);
        font-size: .78rem;
        color: var(--muted);
        text-decoration: none;
        letter-spacing: .12em;
        transition: color .3s
    }

    .nav-logo span {
        color: var(--v3)
    }

    .nav-logo:hover {
        color: var(--white)
    }

    .nav-links {
        display: flex;
        gap: 1.5rem;
        list-style: none
    }

    .nav-links a {
        font-family: var(--ff-mono);
        font-size: .7rem;
        letter-spacing: .14em;
        color: var(--muted);
        text-decoration: none;
        text-transform: uppercase;
        transition: color .3s;
        position: relative;
        cursor: pointer
    }

    .nav-links a::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--v3);
        transition: width .35s
    }

    .nav-links a:hover,
    .nav-links a.active {
        color: var(--white)
    }

    .nav-links a:hover::after,
    .nav-links a.active::after {
        width: 100%
    }

    .nav-burger {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 4px
    }

    .nav-burger span {
        width: 22px;
        height: 1.5px;
        background: var(--muted);
        transition: all .3s;
        display: block
    }

    .nav-mobile-menu {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: rgba(250, 247, 242, .98);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        padding: 1rem 2rem;
        z-index: 799;
        flex-direction: column;
        gap: .5rem
    }

    .nav-mobile-menu.open {
        display: flex
    }

    .nav-mobile-menu a {
        font-family: var(--ff-mono);
        font-size: .78rem;
        letter-spacing: .14em;
        color: var(--muted);
        text-decoration: none;
        text-transform: uppercase;
        padding: .6rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, .05);
        cursor: pointer
    }

    .nav-mobile-menu a.active,
    .nav-mobile-menu a:hover {
        color: var(--v3)
    }

    @media(max-width:768px) {
        .nav-links {
            display: none
        }

        .nav-burger {
            display: flex
        }
    }

    /* DOTS */
    #dots {
        position: fixed;
        right: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 800;
        display: flex;
        flex-direction: column;
        gap: .8rem
    }

    .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        border: 1px solid var(--faint);
        background: transparent;
        cursor: pointer;
        transition: all .3s;
        display: block
    }

    .dot.active {
        background: var(--v3);
        border-color: var(--v3);
        transform: scale(1.4)
    }

    @media(max-width:768px) {
        #dots {
            display: none
        }
    }

    /* PROGRESS */
    #progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--v), var(--cyan));
        z-index: 900;
        width: 0%;
        transition: width .35s;
        box-shadow: 0 0 10px var(--glow)
    }

    /* SECTIONS */
    #sections {
        position: fixed;
        inset: 0;
        overflow: hidden;
        max-width: 100vw;

    }

    .section {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        visibility: hidden;
        opacity: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-top: 70px;
        padding-bottom: 60px
    }

    .section::-webkit-scrollbar {
        display: none
    }

    .section {
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .section.active {
        visibility: visible;
        opacity: 1
    }

    @media(max-width:768px) {
        #sections {
            position: static;
            overflow: visible
        }

        .section {
            position: static;
            visibility: visible;
            opacity: 1;
            min-height: auto;
            padding-top: 80px;
            padding-bottom: 40px;
            overflow: visible;
            display: block
        }

        .section>* {
            margin: 0 auto
        }
    }

    /* TICKER */
    .ticker-wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        background: rgba(242, 237, 228, .97);
        border-top: 1px solid var(--border);
        overflow: hidden;
        padding: .65rem 0;
        z-index: 700;
    }

    .ticker-track {
        display: flex;
        width: max-content;
        animation: ticker 30s linear infinite
    }

    .ticker-track:hover {
        animation-play-state: paused
    }

    @keyframes ticker {
        from {
            transform: translateX(0)
        }

        to {
            transform: translateX(-50%)
        }
    }

    .ticker-item {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: 0 1.8rem;
        font-family: var(--ff-mono);
        font-size: .68rem;
        letter-spacing: .08em;
        color: var(--muted);
        text-transform: uppercase;
        white-space: nowrap
    }

    .ticker-item i {
        color: var(--v3);
        font-size: .72rem
    }

    /* UTILS */
    .wrap {
        max-width: 1300px;
        width: 100%;
        padding: 0 2rem;
        margin: auto
    }

    .s-tag {
        font-family: var(--ff-mono);
        font-size: .68rem;
        letter-spacing: .22em;
        color: var(--v3);
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: .7rem;
        margin-bottom: .9rem
    }

    .s-tag::before {
        content: '';
        width: 18px;
        height: 1px;
        background: var(--v3)
    }

    .s-title {
        font-family: var(--ff-display);
        font-size: clamp(2rem, 4vw, 3.6rem);
        font-weight: 900;
        letter-spacing: -.03em;
        line-height: 1.05;
        margin-bottom: .8rem
    }

    .s-title em {
        font-style: italic;
        font-weight: 400;
        color: var(--v3)
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        padding: .72rem 1.5rem;
        border: 1px solid rgba(255, 255, 255, .14);
        color: var(--white);
        font-family: var(--ff-mono);
        font-size: .7rem;
        letter-spacing: .1em;
        text-decoration: none;
        border-radius: 3px;
        transition: all .35s;
        text-transform: uppercase;
        cursor: pointer;
        background: transparent
    }

    .btn:hover {
        background: var(--v);
        border-color: var(--v);
        box-shadow: 0 0 24px var(--glow)
    }

    .btn-primary {
        background: rgba(124, 58, 237, .25);
        border-color: rgba(196, 181, 253, .3)
    }

    .btn-primary:hover {
        background: var(--v)
    }

    .glow-blob {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        filter: blur(90px);
        opacity: .09
    }

    .gb1 {
        width: 500px;
        height: 500px;
        background: var(--v);
        top: -80px;
        right: -120px
    }

    .gb2 {
        width: 340px;
        height: 340px;
        background: var(--cyan);
        bottom: -80px;
        left: -80px
    }

    .gb3 {
        width: 420px;
        height: 420px;
        background: var(--v2);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: .06
    }

    /* ══ HERO ══ */
    #s-home {
        background: transparent;
        z-index: 1;
        overflow: hidden
    }

    .hero-content {
        max-width: 1300px;
        width: 100%;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
        position: relative;
        z-index: 3;
        pointer-events: none
    }

    .hero-content a,
    .hero-content button,
    .hero-content .soc {
        pointer-events: all
    }

    .hero-tag {
        font-family: var(--ff-mono);
        font-size: .68rem;
        letter-spacing: .22em;
        color: var(--v3);
        text-transform: uppercase;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: .7rem
    }

    .hero-tag::before {
        content: '';
        width: 18px;
        height: 1px;
        background: var(--v3)
    }

    .hero-name {
        font-family: var(--ff-display);
        font-size: clamp(2.8rem, 5vw, 6rem);
        font-weight: 900;
        line-height: .93;
        letter-spacing: -.03em;
        margin-bottom: .8rem
    }

    .hero-name em {
        font-style: italic;
        font-weight: 400;
        color: var(--v3)
    }

    .hero-role {
        font-family: var(--ff-mono);
        font-size: .82rem;
        letter-spacing: .16em;
        color: var(--muted);
        text-transform: uppercase;
        margin-bottom: 1.5rem;
        min-height: 1.5em
    }

    .cursor-blink {
        animation: blink 1s infinite;
        color: var(--cyan)
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1
        }

        50% {
            opacity: 0
        }
    }

    .hero-desc {
        font-size: .9rem;
        line-height: 1.88;
        color: var(--muted);
        max-width: 420px;
        margin-bottom: 1.8rem
    }

    .hero-desc strong {
        color: var(--white);
        font-weight: 500
    }

    .hero-actions {
        display: flex;
        gap: .8rem;
        flex-wrap: wrap;
        margin-bottom: 1.6rem
    }

    .hero-socials {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap
    }

    .soc {
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--muted);
        font-size: .75rem;
        text-decoration: none;
        transition: all .3s;
        position: relative;
        overflow: hidden
    }

    .soc::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--v);
        transform: scale(0);
        border-radius: 50%;
        transition: transform .3s
    }

    .soc i {
        position: relative;
        z-index: 1
    }

    .soc:hover::before {
        transform: scale(1)
    }

    .soc:hover {
        color: #fff;
        border-color: var(--v)
    }

    .scroll-hint {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .4rem;
        font-family: var(--ff-mono);
        font-size: .6rem;
        letter-spacing: .15em;
        color: var(--faint);
        text-transform: uppercase;
        animation: hintBob 2.2s ease-in-out infinite;
        z-index: 4
    }

    @keyframes hintBob {

        0%,
        100% {
            transform: translateX(-50%) translateY(0)
        }

        50% {
            transform: translateX(-50%) translateY(5px)
        }
    }

    /* HERO RIGHT — CINEMATIC CANVAS */
    .hero-right {
        position: relative;
        height: 520px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden
    }

    .hero-right canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%
    }

    @media(max-width:768px) {
        .hero-content {
            grid-template-columns: 1fr;
            gap: 1rem;
            padding: 1.5rem
        }

        .hero-right {
            display: none
        }

        .projects-header {
            flex-direction: column;
            align-items: flex-start;
            gap: .5rem
        }
    }

    /* ══ ABOUT ══ */
    #s-about {
        background: linear-gradient(155deg, #f5f0e8 0%, #ede6d8 100%);
        z-index: 1
    }

    .about-wrap {
        display: grid;
        grid-template-columns: 1fr 1.15fr;
        gap: 4rem;
        align-items: center
    }

    .about-img-frame {
        width: 100%;
        max-width: 310px;
        aspect-ratio: 3/4;
        background: var(--s2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
        border-radius: 2px;
        overflow: hidden;
        position: relative
    }

    .about-img-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        filter: grayscale(20%);
        transition: filter .5s
    }

    .about-img-frame:hover img {
        filter: grayscale(0%)
    }

    .about-img-frame::before,
    .about-img-frame::after {
        content: '';
        position: absolute;
        width: 22px;
        height: 22px;
        border-color: var(--v3);
        border-style: solid;
        z-index: 3
    }

    .about-img-frame::before {
        top: -1px;
        left: -1px;
        border-width: 2px 0 0 2px
    }

    .about-img-frame::after {
        bottom: -1px;
        right: -1px;
        border-width: 0 2px 2px 0
    }

    .about-badge {
        position: absolute;
        right: -1rem;
        bottom: 2rem;
        background: var(--surface);
        border: 1px solid var(--border);
        padding: .9rem 1.1rem;
        text-align: center
    }

    .about-badge .num {
        font-family: var(--ff-display);
        font-size: 2.2rem;
        font-weight: 900;
        color: var(--v3);
        line-height: 1;
        display: block
    }

    .about-badge .lbl {
        font-family: var(--ff-mono);
        font-size: .58rem;
        letter-spacing: .1em;
        color: var(--muted);
        text-transform: uppercase
    }

    .info-rows {
        margin-top: 1.2rem;
        display: flex;
        flex-direction: column;
        gap: .3rem
    }

    .info-row {
        display: flex;
        align-items: center;
        gap: .75rem;
        font-size: .84rem;
        color: var(--muted);
        padding: .45rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, .035)
    }

    .info-row i {
        color: var(--v3);
        width: 14px;
        font-size: .74rem
    }

    .info-row strong {
        color: var(--white);
        font-weight: 500
    }

    .info-row a {
        color: var(--v3);
        text-decoration: none
    }

    .pills {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
        margin-top: 1.2rem
    }

    .pill {
        padding: .24rem .72rem;
        border: 1px solid var(--border);
        border-radius: 2px;
        font-family: var(--ff-mono);
        font-size: .63rem;
        color: var(--muted);
        letter-spacing: .06em;
        transition: all .3s;
        cursor: default
    }

    .pill:hover {
        border-color: var(--v3);
        color: var(--v3);
        background: rgba(124, 58, 237, .06)
    }

    /* ══ SKILLS ══ */
    #s-skills {
        background: var(--bg);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
        z-index: 1
    }

    .skills-head {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: end;
        margin-bottom: 2.5rem
    }

    .skills-note {
        font-size: .86rem;
        color: var(--muted);
        line-height: 1.88;
        border-left: 1px solid var(--border);
        padding-left: 2rem
    }

    .skill-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--border)
    }

    .skill-block {
        background: var(--bg);
        padding: 1.3rem 1.2rem;
        transition: background .32s;
        position: relative;
        overflow: hidden
    }

    .skill-block::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--v3);
        transition: width .42s
    }

    .skill-block:hover {
        background: var(--surface);
        box-shadow: 0 4px 16px rgba(79, 70, 229, .1);
    }

    .skill-block:hover::after {
        width: 100%
    }

    .sb-icon {
        width: 28px;
        height: 28px;
        border: 1px solid var(--border);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--v3);
        font-size: .75rem;
        margin-bottom: .8rem;
        transition: all .32s
    }

    .skill-block:hover .sb-icon {
        background: var(--v);
        border-color: var(--v);
        color: #fff
    }

    .skill-block h4 {
        font-size: .78rem;
        font-weight: 600;
        color: var(--white);
        margin-bottom: .5rem;
        letter-spacing: .03em
    }

    .st-list {
        display: flex;
        flex-wrap: wrap;
        gap: .16rem
    }

    .st {
        font-family: var(--ff-mono);
        font-size: .58rem;
        color: var(--muted);
        letter-spacing: .04em
    }

    .st::after {
        content: '·';
        margin-left: .2rem;
        color: var(--faint);
        opacity: .6
    }

    .st:last-child::after {
        display: none
    }

    /* ══ PROJECTS ══ */
    #s-projects {
        background: linear-gradient(170deg, #f5f0e8 0%, #ede6d8 100%);
        z-index: 1;
        overflow: hidden;
        padding-top: 100px;
        padding-bottom: 80px;
    }

    .projects-inner {
        width: 100%
    }

    .projects-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 2rem
    }

    .projects-header-right {
        font-family: var(--ff-mono);
        font-size: .66rem;
        letter-spacing: .1em;
        color: var(--muted)
    }

    .fan-stage {
        position: relative;
        width: 100%;
        height: 460px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: none;
        user-select: none
    }

    @media(max-width:768px) {
        .fan-stage {
            height: 400px
        }
    }

    .fan-card {
        position: absolute;
        width: 190px;
        height: 265px;
        border-radius: 16px;
        overflow: hidden;
        cursor: grab;
        transform-origin: 50% 50%;
        box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
        transition: box-shadow .35s;
        user-select: none;
        will-change: transform
    }

    .fan-card.active-card {
        cursor: pointer;
        box-shadow: 0 0 40px rgba(124, 58, 237, .7), 0 20px 60px rgba(0, 0, 0, .7)
    }

    @media(max-width:768px) {
        .fan-card {
            width: 150px;
            height: 210px
        }
    }

    .fan-card-img {
        width: 100%;
        height: 70%;
        display: block;
        background: var(--s2)
    }

    .fan-card-body {
        height: 30%;
        background: linear-gradient(180deg, rgba(9, 9, 26, 0), rgba(9, 9, 26, 1));
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: .7rem .9rem;
        pointer-events: none
    }

    .fc-num {
        font-family: var(--ff-mono);
        font-size: .48rem;
        color: var(--v3);
        letter-spacing: .15em;
        margin-bottom: .15rem
    }

    .fc-name {
        font-family: var(--ff-display);
        font-size: .78rem;
        font-weight: 700;
        color: var(--white);
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .fc-name em {
        font-style: italic;
        font-weight: 400;
        color: var(--v3)
    }

    .fan-cta {
        position: absolute;
        z-index: 25;
        background: rgba(255, 255, 255, .96);
        color: #111;
        font-family: var(--ff-display);
        font-size: .9rem;
        font-style: italic;
        padding: .5rem 1.4rem;
        border-radius: 40px;
        cursor: pointer;
        box-shadow: 0 4px 24px rgba(0, 0, 0, .3);
        transition: background .25s, opacity .4s, transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, left .5s, top .5s;
        white-space: nowrap;
        border: none;
        letter-spacing: .01em;
        pointer-events: all;
        left: calc(50% + 30px);
        top: 50%;
        transform: translate(-50%, -50%)
    }

    .fan-cta:hover {
        background: #fff;
        box-shadow: 0 10px 40px rgba(124, 58, 237, .45)
    }

    .fan-cta.wheel-mode {
        top: 78%;
        transform: translate(-50%, 0) scale(1)
    }

    .fan-cta.hidden-cta {
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(.6)
    }

    .wheel-label {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 26;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .3rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity .35s
    }

    .wheel-label.visible {
        opacity: 1
    }

    .wheel-label-name {
        font-family: var(--ff-display);
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--white);
        text-align: center;
        line-height: 1.2;
        text-shadow: 0 2px 12px rgba(0, 0, 0, .8)
    }

    .wheel-label-name em {
        font-style: italic;
        font-weight: 400;
        color: var(--v3)
    }

    .wheel-label-tag {
        font-family: var(--ff-mono);
        font-size: .55rem;
        letter-spacing: .18em;
        color: var(--v3);
        text-transform: uppercase
    }

    .wheel-ring {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        transition: opacity .5s
    }

    .wheel-ring.visible {
        opacity: 1
    }

    .fan-card.spin-in {
        animation: spinIn .6s cubic-bezier(.34, 1.56, .64, 1) forwards
    }

    @keyframes spinIn {
        from {
            transform: rotate(360deg) scale(0);
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    /* PROJECTS MODAL */
    #proj-modal {
        position: fixed;
        inset: 0;
        z-index: 4000;
        display: flex;
        align-items: flex-end;
        pointer-events: none;
        opacity: 0
    }

    #proj-modal.open {
        pointer-events: all;
        opacity: 1
    }

    #proj-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(28, 25, 23, .45);
        backdrop-filter: blur(10px);
        cursor: pointer
    }

    #proj-modal-sheet {
        position: relative;
        z-index: 1;
        width: 100%;
        max-height: 82vh;
        background: #faf7f2;
        border-top: 1px solid var(--border);
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
        border-radius: 18px 18px 0 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform .5s cubic-bezier(.32, 1, .68, 1);
        box-shadow: 0 -20px 80px rgba(0, 0, 0, .6)
    }

    #proj-modal.open #proj-modal-sheet {
        transform: translateY(0)
    }

    #proj-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.2rem 2rem;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
        background: var(--surface)
    }

    .pm-title {
        font-family: var(--ff-display);
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--white)
    }

    .pm-title em {
        font-style: italic;
        font-weight: 400;
        color: var(--v3)
    }

    .pm-count {
        font-family: var(--ff-mono);
        font-size: .65rem;
        letter-spacing: .1em;
        color: var(--muted)
    }

    .pm-close {
        width: 34px;
        height: 34px;
        border: 1px solid var(--border);
        background: transparent;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--muted);
        font-size: .8rem;
        cursor: pointer;
        transition: all .25s;
        flex-shrink: 0
    }

    .pm-close:hover {
        background: var(--v);
        border-color: var(--v);
        color: #fff
    }

    #proj-modal-body {
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1;
        padding: 1rem 0;
        overscroll-behavior: contain
    }

    #proj-modal-body::-webkit-scrollbar {
        width: 4px
    }

    #proj-modal-body::-webkit-scrollbar-track {
        background: transparent
    }

    #proj-modal-body::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 4px
    }

    .proj-row {
        display: grid;
        grid-template-columns: 90px 1fr auto;
        gap: 1.4rem;
        align-items: center;
        padding: 1.1rem 2rem;
        cursor: pointer;
        transition: background .25s;
        position: relative;
        border-bottom: 1px solid rgba(150, 100, 255, .06)
    }

    .proj-row::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0;
        background: var(--v);
        transition: width .3s;
        border-radius: 0 2px 2px 0
    }

    .proj-row:hover {
        background: rgba(124, 58, 237, .06)
    }

    .proj-row:hover::before {
        width: 3px
    }

    .proj-row:last-child {
        border-bottom: none
    }

    .pr-thumb {
        width: 90px;
        height: 60px;
        border-radius: 8px;
        overflow: hidden;
        background: var(--s2);
        flex-shrink: 0;
        transition: transform .3s, box-shadow .3s
    }

    .proj-row:hover .pr-thumb {
        transform: scale(1.04);
        box-shadow: 0 6px 20px rgba(124, 58, 237, .3)
    }

    .pr-thumb-inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .pr-num {
        font-family: var(--ff-mono);
        font-size: .57rem;
        letter-spacing: .15em;
        color: var(--v3)
    }

    .pr-name {
        font-family: var(--ff-display);
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--white);
        margin: .15rem 0 .35rem
    }

    .pr-name em {
        font-style: italic;
        font-weight: 400;
        color: var(--v3)
    }

    .pr-brief {
        font-size: .77rem;
        color: var(--muted);
        line-height: 1.55
    }

    .pr-chips {
        display: flex;
        flex-wrap: wrap;
        gap: .22rem;
        margin-top: .45rem
    }

    .pr-chip {
        font-family: var(--ff-mono);
        font-size: .54rem;
        padding: .16rem .48rem;
        background: rgba(124, 58, 237, .1);
        border: 1px solid rgba(196, 181, 253, .16);
        color: var(--v3);
        border-radius: 2px
    }

    .pr-actions {
        display: flex;
        flex-direction: column;
        gap: .35rem;
        align-items: flex-end;
        flex-shrink: 0
    }

    .pj-link {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        font-family: var(--ff-mono);
        font-size: .59rem;
        letter-spacing: .07em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--muted);
        padding: .28rem .62rem;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 2px;
        transition: all .25s;
        white-space: nowrap
    }

    .pj-link:hover {
        background: var(--v);
        border-color: var(--v);
        color: #fff
    }

    .pj-link-main {
        background: rgba(124, 58, 237, .18);
        border-color: rgba(196, 181, 253, .24);
        color: var(--v3)
    }

    .pj-link-main:hover {
        background: var(--v)
    }

    @media(max-width:600px) {
        .proj-row {
            grid-template-columns: 70px 1fr;
            gap: .9rem
        }

        .pr-actions {
            display: none
        }

        #proj-modal-sheet {
            max-height: 88vh;
            border-radius: 14px 14px 0 0
        }

        #proj-modal-header {
            padding: 1rem 1.2rem
        }

        .proj-row {
            padding: .9rem 1.2rem
        }

        .pr-thumb {
            width: 70px;
            height: 48px
        }
    }

    /* ══ CONTACT ══ */
    #s-contact {
        background: var(--bg);
        z-index: 1
    }

    .contact-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: start
    }

    .contact-big {
        font-family: var(--ff-display);
        font-size: clamp(2.4rem, 4.5vw, 4.4rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -.03em;
        margin-bottom: 1.4rem
    }

    .contact-big em {
        font-style: italic;
        font-weight: 400;
        color: transparent;
        -webkit-text-stroke: 1px rgba(255, 255, 255, .22)
    }

    .contact-big .hl {
        color: var(--v3)
    }

    .contact-note {
        font-size: .86rem;
        color: var(--muted);
        line-height: 1.82;
        margin-bottom: 1.8rem
    }

    .c-links {
        display: flex;
        flex-direction: column;
        gap: .6rem
    }

    .c-link {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: .75rem 1rem;
        border: 1px solid var(--border);
        text-decoration: none;
        color: var(--muted);
        font-size: .82rem;
        transition: all .32s;
        position: relative;
        overflow: hidden
    }

    .c-link::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0;
        background: var(--v);
        transition: width .32s;
        z-index: 0
    }

    .c-link:hover::before {
        width: 3px
    }

    .c-link:hover {
        border-color: rgba(124, 58, 237, .35);
        color: var(--white)
    }

    .c-link i {
        color: var(--v3);
        width: 14px;
        font-size: .78rem;
        position: relative;
        z-index: 1
    }

    .c-link span {
        position: relative;
        z-index: 1
    }

    .contact-form {
        display: flex;
        flex-direction: column;
        gap: .8rem
    }

    .ff {
        position: relative
    }

    .ff label {
        display: block;
        font-family: var(--ff-mono);
        font-size: .6rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--faint);
        margin-bottom: .38rem
    }

    .ff input,
    .ff textarea {
        width: 100%;
        background: #fff;
        border: 1px solid var(--border);
        padding: .75rem .9rem;
        color: var(--white);
        font-family: var(--ff-body);
        font-size: .86rem;
        outline: none;
        transition: border-color .3s;
        border-radius: 0
    }

    .ff textarea {
        min-height: 100px;
        resize: vertical
    }

    .ff input::placeholder,
    .ff textarea::placeholder {
        color: var(--faint);
        font-size: .8rem
    }

    .ff input:focus,
    .ff textarea:focus {
        border-color: var(--v);
        box-shadow: 0 0 0 1px var(--v)
    }

    .btn-submit {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        padding: .85rem 1.8rem;
        background: var(--v);
        border: none;
        cursor: pointer;
        color: #fff;
        font-family: var(--ff-body);
        font-size: .82rem;
        font-weight: 500;
        letter-spacing: .06em;
        text-transform: uppercase;
        transition: all .32s;
        position: relative;
        overflow: hidden
    }

    .btn-submit::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, .14), transparent);
        transform: translateX(-100%);
        transition: transform .5s
    }

    .btn-submit:hover::after {
        transform: translateX(100%)
    }

    .btn-submit:hover {
        background: var(--v2);
        box-shadow: 0 8px 26px rgba(124, 58, 237, .38)
    }

    /* FOOTER */
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 699;
        background: rgba(250, 247, 242, .97);
        backdrop-filter: blur(16px);
        border-top: 2px solid var(--v3);
        padding: 1rem 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        font-family: var(--ff-mono);
        font-size: .75rem;
        color: var(--muted);
        letter-spacing: .08em;
    }

    footer span {
        color: var(--v3)
    }

    footer a {
        color: inherit;
        text-decoration: none;
        transition: color .3s
    }

    footer a:hover {
        color: var(--v3)
    }

    @media(max-width:768px) {
        footer {
            flex-direction: column;
            gap: .3rem;
            text-align: center;
            padding: .7rem 1rem;
            font-size: .7rem;
            overflow: hidden;
            word-break: break-word;
        }
    }

    #btt {
        position: fixed;
        bottom: 3.2rem;
        right: 1.5rem;
        width: 34px;
        height: 34px;
        border: 1px solid var(--border);
        background: var(--surface);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--muted);
        font-size: .75rem;
        cursor: pointer;
        transition: all .3s;
        opacity: 0;
        pointer-events: none;
        z-index: 750
    }

    #btt.show {
        opacity: 1;
        pointer-events: all
    }

    #btt:hover {
        background: var(--v);
        color: #fff;
        border-color: var(--v)
    }

    /* RESPONSIVE */
    @media(max-width:1100px) {
        .skill-grid {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media(max-width:768px) {
        .about-wrap {
            grid-template-columns: 1fr;
            gap: 1.5rem
        }

        .about-visual-col {
            display: flex;
            justify-content: center
        }

        .about-img-frame {
            max-width: 200px
        }

        .about-badge {
            right: 0;
            bottom: 1rem
        }

        .skills-head {
            grid-template-columns: 1fr;
            gap: 1rem;
            margin-bottom: 1.5rem
        }

        .skills-note {
            border-left: none;
            padding-left: 0;
            border-top: 1px solid var(--border);
            padding-top: .8rem
        }

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

        .fan-stage {
            height: 420px;
            margin-top: 2rem;
        }

        .fan-card {
            width: 160px;
            height: 220px
        }

        .proj-row {
            grid-template-columns: 1fr;
            gap: .8rem
        }

        .pr-actions {
            flex-direction: row;
            align-items: flex-start
        }

        .contact-wrap {
            grid-template-columns: 1fr;
            gap: 2rem
        }

        .wrap {
            padding: 0 1.2rem
        }

        #s-home {
            padding-top: 70px;
            padding-bottom: 70px;
            min-height: 100vh;
            display: flex;
            align-items: center
        }
    }

    @media(max-width:480px) {
        .fan-card {
            width: 140px;
            height: 195px
        }

        .fan-stage {
            height: 420px;
            margin-top: 2rem;
        }

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

        .s-title {
            font-size: 1.8rem
        }
    }

    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
        position: relative;
    }


    @media(max-width: 768px) {
        .projects-header {
            text-align: center;
            align-items: center;
        }

        .projects-header-right {
            text-align: center;
        }

        .fan-stage {
            overflow: visible;
        }
    }