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

 :root {
     --expo: cubic-bezier(.16, 1, .3, 1);
     --spring: cubic-bezier(.34, 1.56, .64, 1);
     --smooth: cubic-bezier(.4, 0, .2, 1);
 }

 [data-theme="dark"] {
     --bg: #040409;
     --bg2: #08080f;
     --bg3: #0d0d18;
     --sf: rgba(255, 255, 255, .026);
     --sf2: rgba(255, 255, 255, .05);
     --sf3: rgba(255, 255, 255, .08);
     --bd: rgba(255, 255, 255, .062);
     --bd2: rgba(255, 255, 255, .11);
     --bd3: rgba(255, 255, 255, .17);
     --tx: #EBE5D9;
     --tx2: #79778F;
     --tx3: #3A3A52;
     --tx4: #181826;
     --gd: #C9A96E;
     --gd2: #E8D49E;
     --gd3: #9E7A3A;
     --gg: rgba(201, 169, 110, .13);
     --gg2: rgba(201, 169, 110, .05);
     --gg3: rgba(201, 169, 110, .28);
     --ov: rgba(4, 4, 9, .91);
     --sec: rgba(4, 4, 9, .6);
     --sec2: rgba(8, 8, 15, .66);
 }

 [data-theme="light"] {
     --bg: #F2EDE3;
     --bg2: #E7E1D5;
     --bg3: #D8D0C0;
     --sf: rgba(0, 0, 0, .026);
     --sf2: rgba(0, 0, 0, .05);
     --sf3: rgba(0, 0, 0, .08);
     --bd: rgba(0, 0, 0, .072);
     --bd2: rgba(0, 0, 0, .13);
     --bd3: rgba(0, 0, 0, .19);
     --tx: #0C0C1C;
     --tx2: #484862;
     --tx3: #A5A5BE;
     --tx4: #DDDDF0;
     --gd: #7A4D0C;
     --gd2: #5B3A08;
     --gd3: #C07828;
     --gg: rgba(122, 77, 12, .11);
     --gg2: rgba(122, 77, 12, .04);
     --gg3: rgba(122, 77, 12, .24);
     --ov: rgba(242, 237, 227, .93);
     --sec: rgba(242, 237, 227, .6);
     --sec2: rgba(231, 225, 213, .66);
 }

 ::-webkit-scrollbar {
     width: 2px
 }

 ::-webkit-scrollbar-thumb {
     background: var(--bd2)
 }

 html {
     scroll-behavior: auto;
     scroll-snap-type: y mandatory
 }

 body {
     background: var(--bg);
     color: var(--tx);
     font-family: 'Outfit', sans-serif;
     font-weight: 300;
     overflow-x: hidden;
     cursor: none;
     transition: background .5s, color .5s;
     visibility: hidden
 }

 body.rdy {
     visibility: visible
 }

 /* GRAIN */
 #grain {
     position: fixed;
     inset: 0;
     z-index: 9998;
     pointer-events: none;
     opacity: .018;
     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='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
     transition: opacity .5s
 }

 [data-theme="light"] #grain {
     opacity: .01
 }

 /* GRID OVERLAY */
 #gridlines {
     position: fixed;
     inset: 0;
     z-index: 0;
     pointer-events: none;
     background-image: linear-gradient(rgba(201, 169, 110, .013) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 169, 110, .013) 1px, transparent 1px);
     background-size: 70px 70px
 }

 [data-theme="light"] #gridlines {
     background-image: linear-gradient(rgba(122, 77, 12, .01) 1px, transparent 1px), linear-gradient(90deg, rgba(122, 77, 12, .01) 1px, transparent 1px)
 }

 /* CANVAS + DIM */
 #c3 {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: none
 }

 #cdim {
     position: fixed;
     inset: 0;
     z-index: 2;
     pointer-events: none;
     transition: background .5s
 }

 [data-theme="light"] #cdim {
     background: rgba(242, 237, 227, .44)
 }

 /* LOADER */
 #loader {
     position: fixed;
     inset: 0;
     background: var(--bg);
     z-index: 99999;
     display: grid;
     place-items: center;
     transition: opacity .9s, visibility .9s
 }

 #loader.done {
     opacity: 0;
     visibility: hidden;
     pointer-events: none
 }

 .l-in {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2rem
 }

 .l-wm {
     font-family: 'Cormorant Garant', serif;
     font-size: 2.3rem;
     font-weight: 300;
     color: var(--tx3);
     letter-spacing: .08em
 }

 .l-wm em {
     color: var(--gd);
     font-style: normal
 }

 .l-svg {
     width: 62px;
     height: 62px
 }

 .l-svg circle {
     fill: none;
     stroke: var(--gd);
     stroke-width: 1.4;
     stroke-dasharray: 145;
     stroke-dashoffset: 48;
     stroke-linecap: round;
     transform-origin: 50% 50%;
     animation: lspin 1.7s linear infinite
 }

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

 .l-track {
     width: 145px;
     height: 1px;
     background: var(--bd)
 }

 .l-bar {
     height: 100%;
     background: var(--gd);
     width: 0%;
     transition: width .04s linear
 }

 .l-pct {
     font-family: 'Space Mono', monospace;
     font-size: .54rem;
     color: var(--tx3);
     letter-spacing: .22em
 }

 /* PROGRESS */
 #prog {
     position: fixed;
     top: 0;
     left: 0;
     height: 1.5px;
     background: linear-gradient(90deg, var(--gd), var(--gd2), rgba(201, 169, 110, 0));
     z-index: 900;
     width: 0%;
     pointer-events: none
 }

 /* CURSOR */
 #cdot {
     position: fixed;
     width: 5px;
     height: 5px;
     background: var(--gd);
     border-radius: 50%;
     pointer-events: none;
     z-index: 10002;
     transform: translate(-50%, -50%);
     transition: width .12s, height .12s, opacity .2s
 }

 #cring {
     position: fixed;
     width: 32px;
     height: 32px;
     border: 1px solid rgba(201, 169, 110, .3);
     border-radius: 50%;
     pointer-events: none;
     z-index: 10001;
     transform: translate(-50%, -50%);
     transition: width .3s var(--expo), height .3s var(--expo), background .3s, border-color .3s
 }

 #clabel {
     position: fixed;
     font-family: 'Space Mono', monospace;
     font-size: .4rem;
     color: transparent;
     letter-spacing: .14em;
     text-transform: uppercase;
     z-index: 10003;
     pointer-events: none;
     transform: translate(-50%, -50%);
     white-space: nowrap;
     transition: color .2s;
     user-select: none
 }

 .trail {
     position: fixed;
     border-radius: 50%;
     pointer-events: none;
     z-index: 10000;
     transform: translate(-50%, -50%);
     background: var(--gd)
 }

 body.cl #cdot {
     width: 0;
     height: 0
 }

 body.cl #cring {
     width: 60px;
     height: 60px;
     background: var(--gd);
     border-color: transparent;
     mix-blend-mode: difference
 }

 body.cv #cring {
     width: 68px;
     height: 68px;
     background: transparent;
     border-color: var(--gd);
     border-width: 1px
 }

 body.cv #clabel {
     color: var(--gd)
 }

 /* SIDE DOT NAV */
 #sdnav {
     position: fixed;
     right: 1.9rem;
     top: 50%;
     transform: translateY(-50%);
     z-index: 600;
     display: flex;
     flex-direction: column;
     gap: .65rem;
     opacity: 0;
     transition: opacity .5s
 }

 #sdnav.on {
     opacity: 1
 }

 .sdd {
     width: 4px;
     height: 4px;
     border-radius: 50%;
     background: var(--tx3);
     cursor: none;
     transition: all .3s var(--expo);
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .sdd:hover,
 .sdd.cur {
     background: var(--gd)
 }

 .sdd.cur {
     box-shadow: 0 0 0 3px var(--gg);
     transform: scale(1.9)
 }

 .sdd:hover {
     transform: scale(1.6)
 }

 .sdd-tip {
     position: absolute;
     right: calc(100% + 12px);
     background: var(--bg2);
     border: 1px solid var(--bd);
     border-radius: 2px;
     padding: .17rem .55rem;
     font-family: 'Space Mono', monospace;
     font-size: .46rem;
     color: var(--tx2);
     white-space: nowrap;
     opacity: 0;
     transition: opacity .2s;
     letter-spacing: .1em;
     text-transform: uppercase;
     pointer-events: none
 }

 .sdd:hover .sdd-tip {
     opacity: 1
 }

 /* BTT */
 #btt {
     position: fixed;
     bottom: 2.2rem;
     right: 1.9rem;
     width: 36px;
     height: 36px;
     border: 1px solid var(--bd2);
     background: var(--sec2);
     border-radius: 2px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: none;
     z-index: 600;
     opacity: 0;
     transform: translateY(8px);
     transition: all .35s var(--expo);
     font-size: .6rem;
     color: var(--tx2);
     backdrop-filter: blur(24px)
 }

 #btt.on {
     opacity: 1;
     transform: translateY(0)
 }

 #btt:hover {
     border-color: var(--gd);
     color: var(--gd);
     transform: translateY(-2px)
 }

 /* COMMAND PALETTE */
 #pal {
     position: fixed;
     inset: 0;
     z-index: 10004;
     display: none;
     align-items: flex-start;
     justify-content: center;
     padding-top: 18vh;
     background: rgba(4, 4, 9, .74);
     backdrop-filter: blur(40px)
 }

 #pal.open {
     display: flex
 }

 .pal-box {
     width: 560px;
     max-width: 92vw;
     background: var(--bg2);
     border: 1px solid var(--bd2);
     border-radius: 6px;
     overflow: hidden;
     box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
     animation: palIn .2s var(--expo)
 }

 @keyframes palIn {
     from {
         opacity: 0;
         transform: scale(.95) translateY(-14px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 .pal-row {
     display: flex;
     align-items: center;
     gap: .8rem;
     padding: .85rem 1.2rem;
     border-bottom: 1px solid var(--bd)
 }

 .pal-ic {
     font-size: .66rem;
     color: var(--tx2)
 }

 #pal-inp {
     flex: 1;
     background: none;
     border: none;
     outline: none;
     font-family: 'Space Mono', monospace;
     font-size: .8rem;
     color: var(--tx);
     letter-spacing: .02em
 }

 #pal-inp::placeholder {
     color: var(--tx3)
 }

 .pal-k {
     font-family: 'Space Mono', monospace;
     font-size: .46rem;
     color: var(--tx3);
     border: 1px solid var(--bd2);
     border-radius: 2px;
     padding: .12rem .36rem
 }

 .pal-list {
     max-height: 300px;
     overflow-y: auto;
     padding: .3rem
 }

 .pi {
     display: flex;
     align-items: center;
     gap: .8rem;
     padding: .62rem .95rem;
     border-radius: 3px;
     cursor: none;
     transition: background .12s;
     position: relative
 }

 .pi:hover,
 .pi.hi {
     background: var(--sf2)
 }

 .pi.hi::before {
     content: '';
     position: absolute;
     left: 0;
     top: 15%;
     bottom: 15%;
     width: 2px;
     background: var(--gd);
     border-radius: 1px
 }

 .pi-ic {
     font-size: .75rem;
     width: 20px;
     text-align: center;
     flex-shrink: 0
 }

 .pi-lbl {
     font-size: .78rem;
     color: var(--tx)
 }

 .pi-sub {
     font-family: 'Space Mono', monospace;
     font-size: .48rem;
     color: var(--tx3);
     margin-left: auto;
     letter-spacing: .06em
 }

 .pi-sec {
     padding: .42rem .95rem .18rem;
     font-family: 'Space Mono', monospace;
     font-size: .45rem;
     color: var(--tx3);
     text-transform: uppercase;
     letter-spacing: .16em
 }

 .pi-empty {
     padding: 1.8rem;
     text-align: center;
     font-family: 'Space Mono', monospace;
     font-size: .58rem;
     color: var(--tx3)
 }

 .pal-foot {
     padding: .42rem 1.2rem;
     border-top: 1px solid var(--bd);
     display: flex;
     gap: 1rem;
     align-items: center
 }

 .pal-tip {
     font-family: 'Space Mono', monospace;
     font-size: .43rem;
     color: var(--tx3);
     display: flex;
     align-items: center;
     gap: .28rem
 }

 /* NAV */
 nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 500;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 2.2rem 5rem;
     transition: padding .4s var(--expo), background .4s, border-color .4s;
     border-bottom: 1px solid transparent
 }

 nav.stuck {
     padding: 1.1rem 5rem;
     background: var(--ov);
     backdrop-filter: blur(52px);
     -webkit-backdrop-filter: blur(52px);
     border-color: var(--bd)
 }

 .nlogo {
     font-family: 'Space Mono', monospace;
     font-size: .79rem;
     color: var(--tx);
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: .5rem
 }

 .nlogo em {
     color: var(--gd);
     font-style: normal
 }

 .nldot {
     width: 5px;
     height: 5px;
     background: var(--gd);
     border-radius: 50%;
     animation: gp 2.5s ease-in-out infinite;
     flex-shrink: 0
 }

 @keyframes gp {

     0%,
     100% {
         opacity: 1;
         box-shadow: 0 0 0 0 var(--gg)
     }

     50% {
         opacity: .7;
         box-shadow: 0 0 0 9px transparent
     }
 }

 .nlinks {
     display: flex;
     gap: 2.8rem;
     list-style: none
 }

 .nlinks a {
     font-size: .64rem;
     font-weight: 400;
     color: var(--tx2);
     text-decoration: none;
     letter-spacing: .1em;
     text-transform: uppercase;
     transition: color .25s;
     position: relative;
     padding-bottom: 3px
 }

 .nlinks a::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 1px;
     background: var(--gd);
     transition: width .35s var(--expo)
 }

 .nlinks a:hover,
 .nlinks a.act {
     color: var(--gd)
 }

 .nlinks a:hover::after,
 .nlinks a.act::after {
     width: 100%
 }

 .nact {
     display: flex;
     align-items: center;
     gap: .75rem
 }

 /* command btn */
 .kbtn {
     font-family: 'Space Mono', monospace;
     font-size: .52rem;
     border: 1px solid var(--bd);
     border-radius: 2px;
     padding: .26rem .62rem;
     color: var(--tx3);
     background: var(--sf);
     cursor: none;
     transition: all .25s;
     display: flex;
     align-items: center;
     gap: .35rem
 }

 .kbtn:hover {
     border-color: var(--gd);
     color: var(--gd)
 }

 .kbtn kbd {
     opacity: .5;
     font-family: inherit
 }

 /* theme toggle */
 .tbtn {
     width: 44px;
     height: 24px;
     background: var(--sf2);
     border: 1px solid var(--bd2);
     border-radius: 100px;
     cursor: none;
     position: relative;
     transition: all .3s
 }

 .tbtn::after {
     content: '';
     position: absolute;
     width: 16px;
     height: 16px;
     background: var(--gd);
     border-radius: 50%;
     top: 3px;
     left: 4px;
     transition: transform .36s var(--expo)
 }

 [data-theme="light"] .tbtn::after {
     transform: translateX(19px)
 }

 .ticons {
     position: absolute;
     inset: 0;
     display: flex;
     justify-content: space-between;
     padding: 0 4px;
     align-items: center;
     font-size: .44rem;
     pointer-events: none;
     user-select: none
 }

 /* hire cta */
 .ncta {
     font-family: 'Space Mono', monospace;
     font-size: .64rem;
     font-weight: 700;
     letter-spacing: .07em;
     text-transform: uppercase;
     background: var(--gd);
     color: #040409;
     border: none;
     padding: .47rem 1.18rem;
     border-radius: 2px;
     cursor: none;
     text-decoration: none;
     transition: all .34s var(--expo);
     display: inline-block;
     overflow: hidden;
     position: relative
 }

 [data-theme="light"] .ncta {
     color: #fff
 }

 .ncta::before {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(255, 255, 255, .18);
     transform: translateX(-110%) skewX(-12deg);
     transition: transform .45s
 }

 .ncta:hover::before {
     transform: translateX(110%) skewX(-12deg)
 }

 .ncta:hover {
     background: var(--gd2);
     transform: translateY(-1px);
     box-shadow: 0 8px 24px var(--gg)
 }

 /* hamburger */
 .hbg {
     display: none;
     flex-direction: column;
     gap: 4.5px;
     cursor: none;
     background: none;
     border: none
 }

 .hbg span {
     display: block;
     width: 20px;
     height: 1px;
     background: var(--tx);
     transition: all .3s
 }

 /* mobile menu */
 .mob {
     display: none;
     position: fixed;
     inset: 0;
     background: var(--bg);
     z-index: 499;
     flex-direction: column;
     justify-content: center;
     padding: 5rem
 }

 .mob.open {
     display: flex
 }

 .mob a {
     font-family: 'Cormorant Garant', serif;
     font-size: 4rem;
     font-weight: 600;
     color: var(--tx);
     text-decoration: none;
     line-height: 1.1;
     opacity: 0;
     transform: translateY(18px);
     animation: mobIn .45s ease forwards;
     transition: color .2s
 }

 .mob.open a:nth-child(2) {
     animation-delay: .04s
 }

 .mob.open a:nth-child(3) {
     animation-delay: .08s
 }

 .mob.open a:nth-child(4) {
     animation-delay: .12s
 }

 .mob.open a:nth-child(5) {
     animation-delay: .16s
 }

 .mob a:hover {
     color: var(--gd)
 }

 .mobx {
     position: absolute;
     top: 1.8rem;
     right: 2.2rem;
     background: none;
     border: none;
     color: var(--tx2);
     font-size: 1.2rem;
     cursor: none
 }

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

 /* PAGE */
 .page {
     position: relative;
     z-index: 3
 }

 section {
     min-height: 100vh;
     scroll-snap-align: start;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 9rem 5rem 6rem;
     position: relative;
     overflow: hidden;
     transition: background .5s
 }

 #hero {
     background: transparent;
     padding-bottom: 0
 }

 #about {
     background: var(--sec2)
 }

 #philosophy {
     background: var(--sec)
 }

 #projects {
     background: var(--sec2)
 }

 #skills {
     background: var(--sec)
 }

 #certs {
     background: var(--sec2)
 }

 #contact {
     background: var(--sec)
 }

 /* SHARED */
 .stag {
     display: inline-flex;
     align-items: center;
     gap: .6rem;
     font-family: 'Space Mono', monospace;
     font-size: .56rem;
     color: var(--gd);
     letter-spacing: .2em;
     text-transform: uppercase;
     margin-bottom: 1.4rem
 }

 .stag::before {
     content: '';
     display: block;
     width: 16px;
     height: 1px;
     background: var(--gd)
 }

 .s-h {
     font-family: 'Cormorant Garant', serif;
     font-weight: 300;
     font-size: clamp(2.8rem, 5vw, 4.5rem);
     line-height: 1.04;
     letter-spacing: -.025em;
     margin-bottom: 2.4rem
 }

 .s-h em {
     font-style: italic;
     color: var(--gd)
 }

 .pw {
     position: absolute;
     font-family: 'Cormorant Garant', serif;
     font-size: 20vw;
     font-weight: 700;
     color: rgba(201, 169, 110, .03);
     line-height: 1;
     letter-spacing: -.05em;
     user-select: none;
     pointer-events: none;
     will-change: transform
 }

 [data-theme="light"] .pw {
     color: rgba(122, 77, 12, .038)
 }

 /* REVEALS */
 .rv {
     opacity: 0;
     transform: translateY(36px);
     transition: opacity .95s ease, transform .95s ease
 }

 .rv-l {
     opacity: 0;
     transform: translateX(-36px);
     transition: opacity .95s ease, transform .95s ease
 }

 .rv-r {
     opacity: 0;
     transform: translateX(36px);
     transition: opacity .95s ease, transform .95s ease
 }

 .rv-s {
     opacity: 0;
     transform: scale(.89);
     transition: opacity .95s ease, transform .95s ease
 }

 .rv.in,
 .rv-l.in,
 .rv-r.in,
 .rv-s.in {
     opacity: 1;
     transform: none
 }

 /* Clip reveal: wrapper overflow:hidden, inner starts below */
 .rv-clip {
     overflow: hidden;
     display: block
 }

 .rv-clip span {
     display: block;
     transform: translateY(105%);
     opacity: 0;
     transition: transform 1.05s var(--expo), opacity .5s ease
 }

 .rv-clip.in span {
     transform: translateY(0);
     opacity: 1
 }

 .d1 {
     transition-delay: .07s !important
 }

 .d2 {
     transition-delay: .14s !important
 }

 .d3 {
     transition-delay: .21s !important
 }

 .d4 {
     transition-delay: .28s !important
 }

 .d5 {
     transition-delay: .35s !important
 }

 .d6 {
     transition-delay: .42s !important
 }

 .d7 {
     transition-delay: .49s !important
 }

 .d8 {
     transition-delay: .56s !important
 }

 /* ─── HERO ─── */
 #hero {
     justify-content: center
 }

 /* Corner brackets */
 .hco {
     position: absolute;
     width: 48px;
     height: 48px;
     pointer-events: none;
     opacity: 0;
     animation: cin .8s ease forwards
 }

 .hco.tl {
     top: 10rem;
     left: 5rem;
     border-top: 1px solid var(--gd);
     border-left: 1px solid var(--gd);
     animation-delay: .85s
 }

 .hco.tr {
     top: 10rem;
     right: 5rem;
     border-top: 1px solid var(--gd);
     border-right: 1px solid var(--gd);
     animation-delay: .95s
 }

 .hco.bl {
     bottom: 7rem;
     left: 5rem;
     border-bottom: 1px solid var(--gd);
     border-left: 1px solid var(--gd);
     animation-delay: 1.05s
 }

 .hco.br {
     bottom: 7rem;
     right: 5rem;
     border-bottom: 1px solid var(--gd);
     border-right: 1px solid var(--gd);
     animation-delay: 1.15s
 }

 @keyframes cin {
     to {
         opacity: .22
     }
 }

 /* Scanlines */
 .sln {
     position: absolute;
     left: 0;
     right: 0;
     height: 1px;
     pointer-events: none
 }

 .sln.a {
     top: 28%;
     background: linear-gradient(90deg, transparent, rgba(201, 169, 110, .045), transparent)
 }

 .sln.b {
     top: 67%;
     background: linear-gradient(90deg, transparent, rgba(201, 169, 110, .033), transparent)
 }

 /* Floating code deco */
 .cdec {
     position: absolute;
     font-family: 'Space Mono', monospace;
     font-size: .55rem;
     color: var(--tx3);
     pointer-events: none;
     opacity: 0;
     line-height: 1.9;
     animation: fup .6s ease forwards
 }

 .cdec em {
     color: var(--gd);
     font-style: normal
 }

 @keyframes fup {
     from {
         opacity: 0;
         transform: translateY(14px)
     }

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

 @keyframes blink {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: 0
     }
 }

 @keyframes shim {
     0% {
         left: -100%
     }

     100% {
         left: 200%
     }
 }

 @keyframes lgrow {
     to {
         width: 100%
     }
 }

 @keyframes bob {

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

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

 @keyframes flt {

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

     50% {
         transform: translateY(-11px)
     }
 }

 /* Availability */
 .havail {
     display: inline-flex;
     align-items: center;
     gap: .45rem;
     border: 1px solid rgba(201, 169, 110, .2);
     border-radius: 2px;
     padding: .25rem .78rem;
     font-family: 'Space Mono', monospace;
     font-size: .57rem;
     color: var(--gd);
     margin-bottom: 1.9rem;
     width: fit-content;
     opacity: 0;
     animation: fup .8s ease forwards .2s;
     position: relative;
     overflow: hidden
 }

 .havail::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(201, 169, 110, .1), transparent);
     animation: shim 4s ease-in-out infinite 3.5s
 }

 .ap {
     width: 5px;
     height: 5px;
     background: var(--gd);
     border-radius: 50%;
     animation: gp 2.5s ease-in-out infinite;
     flex-shrink: 0
 }

 /* Label */
 .hey {
     font-family: 'Space Mono', monospace;
     font-size: .57rem;
     color: var(--tx2);
     letter-spacing: .16em;
     text-transform: uppercase;
     margin-bottom: 1.5rem;
     display: flex;
     align-items: center;
     gap: .65rem;
     opacity: 0;
     animation: fup .8s ease forwards .38s
 }

 .hey::before {
     content: '';
     display: block;
     width: 18px;
     height: 1px;
     background: var(--gd)
 }

 /* Split-text heading */
 .hh1 {
     font-family: 'Cormorant Garant', serif;
     font-weight: 300;
     font-size: clamp(3rem, 7vw, 6rem);
     line-height: 1.0;
     letter-spacing: -.03em
 }

 .hh1 .hl {
     display: block;
     overflow: hidden
 }

 .hh1 .hli {
     display: block;
     transform: translateY(110%);
     opacity: 0;
     animation: slideup 1.1s var(--expo) forwards
 }

 .hh1 .hl:nth-child(1) .hli {
     animation-delay: .52s
 }

 .hh1 .hl:nth-child(2) .hli {
     animation-delay: .68s
 }

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

 .hh1 em {
     font-style: italic;
     color: var(--gd);
     position: relative
 }

 .hh1 em::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     height: 1px;
     width: 0;
     background: var(--gd);
     animation: lgrow 1.1s var(--expo) forwards 1.9s
 }

 /* Typewriter */
 .htw {
     display: flex;
     align-items: center;
     gap: .78rem;
     margin: 1.8rem 0;
     opacity: 0;
     animation: fup .9s ease forwards .88s
 }

 .twpre {
     font-family: 'Space Mono', monospace;
     font-size: .54rem;
     color: var(--tx3);
     letter-spacing: .12em;
     text-transform: uppercase
 }

 .twval {
     font-size: .9rem;
     font-weight: 400;
     min-height: 1.4em;
     color: var(--tx)
 }

 .twc {
     color: var(--gd);
     animation: blink .55s step-end infinite
 }

 /* Desc */
 .hdesc {
     font-size: .87rem;
     color: var(--tx2);
     line-height: 2.05;
     max-width: 500px;
     opacity: 0;
     animation: fup .9s ease forwards 1.05s
 }

 /* CTAs */
 .hctas {
     display: flex;
     gap: .78rem;
     margin-top: 2.3rem;
     opacity: 0;
     animation: fup .9s ease forwards 1.2s;
     flex-wrap: wrap
 }

 /* Hero grid */
 .hgrid {
     display: grid;
     grid-template-columns: 1fr 390px;
     gap: 5rem;
     align-items: center;
     position: relative;
     z-index: 4
 }

 /* Buttons */
 .btnf {
     font-family: 'Space Mono', monospace;
     font-size: .62rem;
     font-weight: 700;
     letter-spacing: .07em;
     text-transform: uppercase;
     background: var(--gd);
     color: #040409;
     border: none;
     padding: .82rem 1.85rem;
     border-radius: 2px;
     cursor: none;
     text-decoration: none;
     transition: all .34s var(--expo);
     display: inline-block;
     overflow: hidden;
     position: relative
 }

 [data-theme="light"] .btnf {
     color: #fff
 }

 .btnf::before {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(255, 255, 255, .18);
     transform: translateX(-110%) skewX(-12deg);
     transition: transform .45s
 }

 .btnf:hover::before {
     transform: translateX(110%) skewX(-12deg)
 }

 .btnf:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 30px var(--gg)
 }

 .btno {
     font-family: 'Space Mono', monospace;
     font-size: .62rem;
     font-weight: 400;
     letter-spacing: .07em;
     text-transform: uppercase;
     background: transparent;
     color: var(--tx2);
     border: 1px solid var(--bd2);
     padding: .82rem 1.85rem;
     border-radius: 2px;
     cursor: none;
     text-decoration: none;
     transition: all .3s;
     display: inline-block
 }

 .btno:hover {
     border-color: var(--gd);
     color: var(--gd);
     transform: translateY(-2px)
 }

 .btnsm {
     font-family: 'Space Mono', monospace;
     font-size: .57rem;
     color: var(--tx2);
     border: 1px solid var(--bd);
     padding: .48rem .88rem;
     border-radius: 2px;
     cursor: none;
     text-decoration: none;
     transition: all .3s;
     display: inline-block
 }

 .btnsm:hover {
     border-color: var(--gd);
     color: var(--gd)
 }

 /* Stats card */
 .hstats {
     border: 1px solid var(--bd);
     border-radius: 4px;
     overflow: hidden;
     background: rgba(4, 4, 9, .82);
     backdrop-filter: blur(32px);
     -webkit-backdrop-filter: blur(32px);
     opacity: 0;
     animation: fup .9s ease forwards .85s;
     transition: border-color .3s
 }

 .hstats:hover {
     border-color: var(--bd2)
 }

 [data-theme="light"] .hstats {
     background: rgba(242, 237, 227, .86)
 }

 .hsr {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1.3rem 1.65rem;
     border-bottom: 1px solid var(--bd);
     gap: 1.7rem;
     transition: all .22s;
     cursor: default;
     position: relative;
     overflow: hidden
 }

 .hsr::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 2px;
     background: var(--gd);
     transform: scaleY(0);
     transform-origin: bottom;
     transition: transform .38s var(--expo)
 }

 .hsr:hover::before {
     transform: scaleY(1)
 }

 .hsr:last-child {
     border-bottom: none
 }

 .hsr:hover {
     background: var(--sf)
 }

 .hsn {
     font-family: 'Cormorant Garant', serif;
     font-size: 2.55rem;
     font-weight: 300;
     line-height: 1;
     color: var(--tx)
 }

 .hsn em {
     font-style: normal;
     color: var(--gd);
     font-size: 1.2rem;
     vertical-align: top;
     line-height: 1.6
 }

 .hsl {
     font-family: 'Space Mono', monospace;
     font-size: .52rem;
     color: var(--tx2);
     text-transform: uppercase;
     letter-spacing: .1em;
     text-align: right;
     max-width: 115px;
     line-height: 1.5
 }

 /* Hero bottom */
 .hbot {
     position: absolute;
     bottom: 2.5rem;
     left: 5rem;
     right: 5rem;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     z-index: 4
 }

 .scue {
     display: flex;
     align-items: center;
     gap: .58rem;
     font-family: 'Space Mono', monospace;
     font-size: .51rem;
     color: var(--tx3);
     letter-spacing: .14em;
     text-transform: uppercase;
     opacity: 0;
     animation: fup .9s ease forwards 1.65s
 }

 .sarr {
     width: 22px;
     height: 22px;
     border: 1px solid var(--bd2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .5rem;
     animation: bob 2.4s ease-in-out infinite
 }

 #wvc {
     height: 60px;
     opacity: .25;
     max-width: 280px;
     display: block
 }

 /* ─── MARQUEE ─── */
 .mq {
     border-top: 1px solid var(--bd);
     border-bottom: 1px solid var(--bd);
     padding: .58rem 0;
     overflow: hidden;
     scroll-snap-align: none;
     min-height: auto;
     position: relative;
     z-index: 3;
     background: var(--sec2);
     transition: background .5s
 }

 .mq.b {
     background: var(--sec)
 }

 .mqw {
     display: flex;
     width: max-content
 }

 .mqw.fw {
     animation: mqa 34s linear infinite
 }

 .mqw.rv {
     animation: mqb 27s linear infinite
 }

 .mq:hover .mqw {
     animation-play-state: paused
 }

 .mqit {
     display: flex;
     align-items: center;
     gap: 1.7rem;
     padding: 0 1.7rem;
     font-family: 'Space Mono', monospace;
     font-size: .55rem;
     color: var(--tx3);
     text-transform: uppercase;
     letter-spacing: .12em;
     white-space: nowrap
 }

 .mqit em {
     color: var(--gd);
     font-style: normal
 }

 .mqdot {
     width: 3px;
     height: 3px;
     background: var(--gd);
     border-radius: 50%;
     flex-shrink: 0;
     opacity: .38
 }

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

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

 @keyframes mqb {
     from {
         transform: translateX(-50%)
     }

     to {
         transform: translateX(0)
     }
 }

 /* ─── ABOUT ─── */
 #about {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 7rem;
     align-items: start
 }

 .adesc {
     font-size: .87rem;
     color: var(--tx2);
     line-height: 2.05;
     margin-bottom: 1rem
 }

 .adesc strong {
     color: var(--tx);
     font-weight: 500
 }

 /* Animated blockquote */
 .aq {
     border-left: 2px solid transparent;
     padding-left: 1.45rem;
     margin: 2.2rem 0;
     position: relative;
     transition: border-color .8s
 }

 .aq::before {
     content: '';
     position: absolute;
     left: -2px;
     top: 0;
     height: 0;
     width: 2px;
     background: var(--gd);
     transition: height 1s var(--expo)
 }

 .aq.drawn {
     border-left-color: rgba(201, 169, 110, .15)
 }

 .aq.drawn::before {
     height: 100%
 }

 .aq p {
     font-family: 'Cormorant Garant', serif;
     font-style: italic;
     font-size: 1.3rem;
     line-height: 1.6;
     font-weight: 300
 }

 /* Animated pills */
 .pills {
     display: flex;
     flex-wrap: wrap;
     gap: .38rem;
     margin-top: 1.7rem
 }

 .pill {
     font-family: 'Space Mono', monospace;
     font-size: .55rem;
     border: 1px solid var(--bd);
     border-radius: 2px;
     padding: .26rem .66rem;
     color: var(--tx2);
     letter-spacing: .06em;
     text-transform: uppercase;
     transition: all .28s var(--spring);
     cursor: default
 }

 .pill:hover {
     border-color: var(--gd);
     color: var(--gd);
     transform: translateY(-3px) scale(1.04);
     background: var(--sf);
     box-shadow: 0 6px 16px var(--gg2)
 }

 /* Fun facts */
 .ff-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1px;
     background: var(--bd);
     border-radius: 4px;
     overflow: hidden;
     margin-top: 1.7rem
 }

 .ff {
     background: var(--sf);
     padding: 1.05rem;
     transition: background .2s;
     cursor: default
 }

 .ff:hover {
     background: var(--sf2)
 }

 .ff-ic {
     font-size: .9rem;
     margin-bottom: .25rem
 }

 .ff-lb {
     font-family: 'Space Mono', monospace;
     font-size: .5rem;
     color: var(--tx3);
     text-transform: uppercase;
     letter-spacing: .1em;
     margin-bottom: .17rem
 }

 .ff-vl {
     font-size: .79rem;
     color: var(--tx)
 }

 /* Timeline with draw-on line */
 .tl {
     display: flex;
     flex-direction: column;
     position: relative
 }

 .tl-line {
     position: absolute;
     left: 78px;
     top: 0;
     bottom: 0;
     width: 1px;
     background: var(--gd);
     transform-origin: top;
     transform: scaleY(0);
     transition: transform 1.4s var(--expo)
 }

 .tl-line.on {
     transform: scaleY(1)
 }

 .tli {
     display: grid;
     grid-template-columns: 78px 1fr;
     gap: 1.35rem;
     padding: 1.5rem 0 1.5rem 1.35rem;
     border-bottom: 1px solid var(--bd);
     transition: all .26s;
     position: relative;
     cursor: default
 }

 .tli:first-child {
     border-top: 1px solid var(--bd)
 }

 .tli::before {
     content: '';
     position: absolute;
     left: 74px;
     top: 50%;
     width: 8px;
     height: 8px;
     background: var(--bg2);
     border: 1px solid var(--bd2);
     border-radius: 50%;
     transform: translateY(-50%);
     transition: all .3s;
     z-index: 1
 }

 .tli:hover::before {
     background: var(--gd);
     border-color: var(--gd);
     box-shadow: 0 0 0 4px var(--gg)
 }

 .tli:hover {
     padding-left: 1.9rem;
     background: var(--sf)
 }

 .tly {
     font-family: 'Space Mono', monospace;
     font-size: .58rem;
     color: var(--tx3);
     letter-spacing: .07em;
     padding-top: .15rem
 }

 .tlr {
     font-size: .83rem;
     font-weight: 500;
     color: var(--tx);
     margin-bottom: .2rem
 }

 .tlo {
     font-family: 'Space Mono', monospace;
     font-size: .58rem;
     color: var(--gd);
     margin-bottom: .42rem
 }

 .tld {
     font-size: .77rem;
     color: var(--tx2);
     line-height: 1.75
 }

 /* ─── PHILOSOPHY ─── */
 #philosophy {
     justify-content: center;
     align-items: center;
     text-align: center
 }

 .phibg {
     position: absolute;
     inset: 0;
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     pointer-events: none
 }

 .phibgw {
     font-family: 'Cormorant Garant', serif;
     font-size: 24vw;
     font-weight: 700;
     color: rgba(201, 169, 110, .027);
     user-select: none;
     white-space: nowrap;
     will-change: transform
 }

 [data-theme="light"] .phibgw {
     color: rgba(122, 77, 12, .038)
 }

 .phl {
     position: absolute;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--gd), transparent);
     left: 0;
     width: 100%;
     opacity: 0;
     transition: opacity .7s;
     pointer-events: none
 }

 .phl.in {
     opacity: .09
 }

 /* Character-reveal quote */
 .phic {
     position: relative;
     z-index: 3;
     max-width: 900px
 }

 .phiq {
     font-family: 'Cormorant Garant', serif;
     font-style: italic;
     font-weight: 300;
     font-size: clamp(2rem, 5.5vw, 4.3rem);
     line-height: 1.15;
     letter-spacing: -.02em
 }

 .phiq em {
     font-style: normal;
     color: var(--gd)
 }

 .phiq .ch {
     display: inline;
     opacity: 0;
     transform: translateY(8px);
     transition: opacity .45s ease, transform .45s var(--expo)
 }

 .phiq.rev .ch {
     opacity: 1;
     transform: none
 }

 .phia {
     margin-top: 2.4rem;
     font-family: 'Space Mono', monospace;
     font-size: .57rem;
     color: var(--tx2);
     letter-spacing: .22em;
     text-transform: uppercase
 }

 /* ─── PROJECTS ─── */
 .pjhdr {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 3.4rem;
     position: relative;
     z-index: 4
 }

 .pjct {
     font-family: 'Space Mono', monospace;
     font-size: .55rem;
     color: var(--tx3);
     letter-spacing: .12em
 }

 /* Featured card */
 .pfeat {
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     border: 1px solid var(--bd);
     border-radius: 4px;
     overflow: hidden;
     margin-bottom: 2px;
     transition: border-color .3s;
     position: relative;
     z-index: 4
 }

 .pfeat:hover {
     border-color: var(--bd2)
 }

 .pfv {
     background: rgba(11, 11, 22, .92);
     position: relative;
     min-height: 360px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     transition: background .5s
 }

 [data-theme="light"] .pfv {
     background: rgba(200, 192, 178, .92)
 }

 .pfvbg {
     position: absolute;
     font-family: 'Cormorant Garant', serif;
     font-size: 14rem;
     font-weight: 700;
     color: rgba(201, 169, 110, .05);
     line-height: 1;
     user-select: none;
     will-change: transform
 }

 .pfvlive {
     position: absolute;
     top: 1.35rem;
     left: 1.35rem;
     font-family: 'Space Mono', monospace;
     font-size: .51rem;
     border: 1px solid rgba(201, 169, 110, .25);
     border-radius: 2px;
     padding: .21rem .6rem;
     color: var(--gd);
     display: flex;
     align-items: center;
     gap: .35rem;
     letter-spacing: .1em;
     text-transform: uppercase
 }

 .pfvlive::before {
     content: '';
     width: 4px;
     height: 4px;
     background: var(--gd);
     border-radius: 50%;
     animation: gp 2s infinite
 }

 .pfvlogo {
     font-family: 'Cormorant Garant', serif;
     font-size: 4rem;
     font-weight: 700;
     color: var(--gd);
     letter-spacing: -.04em;
     position: relative;
     z-index: 1;
     transition: transform .5s var(--expo)
 }

 .pfeat:hover .pfvlogo {
     transform: scale(1.09)
 }

 .pfinfo {
     background: rgba(8, 8, 15, .92);
     padding: 2.75rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: background .5s
 }

 [data-theme="light"] .pfinfo {
     background: rgba(216, 208, 194, .92)
 }

 .pfn2 {
     font-family: 'Space Mono', monospace;
     font-size: .52rem;
     color: var(--tx3);
     margin-bottom: .85rem
 }

 .pfname {
     font-family: 'Cormorant Garant', serif;
     font-size: 2.1rem;
     font-weight: 300;
     line-height: 1.06;
     margin-bottom: .65rem;
     letter-spacing: -.02em
 }

 .pfdesc {
     font-size: .81rem;
     color: var(--tx2);
     line-height: 1.95;
     margin-bottom: 1.4rem
 }

 .ptags {
     display: flex;
     flex-wrap: wrap;
     gap: .35rem;
     margin-bottom: 1.35rem
 }

 .ptag {
     font-family: 'Space Mono', monospace;
     font-size: .53rem;
     border: 1px solid var(--bd);
     border-radius: 2px;
     padding: .15rem .52rem;
     color: var(--tx2);
     transition: all .25s
 }

 .ptag:hover {
     border-color: var(--gd);
     color: var(--gd)
 }

 .pfls {
     display: flex;
     gap: .75rem;
     flex-wrap: wrap
 }

 .plm {
     font-family: 'Space Mono', monospace;
     font-size: .59rem;
     font-weight: 700;
     color: #040409;
     background: var(--gd);
     border: none;
     padding: .58rem 1.18rem;
     border-radius: 2px;
     cursor: none;
     text-decoration: none;
     letter-spacing: .06em;
     text-transform: uppercase;
     transition: all .3s var(--expo)
 }

 [data-theme="light"] .plm {
     color: #fff
 }

 .plm:hover {
     background: var(--gd2);
     transform: translateY(-1px)
 }

 .plg {
     font-family: 'Space Mono', monospace;
     font-size: .59rem;
     color: var(--tx2);
     background: transparent;
     border: 1px solid var(--bd);
     border-radius: 2px;
     padding: .58rem 1.18rem;
     cursor: none;
     text-decoration: none;
     letter-spacing: .06em;
     text-transform: uppercase;
     transition: all .3s
 }

 .plg:hover {
     border-color: var(--gd);
     color: var(--gd)
 }

 /* 3D FLIP CARDS */
 .pgrid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2px;
     background: var(--bd);
     position: relative;
     z-index: 4;
     margin-top: 2px
 }

 .pfc {
     background: rgba(8, 8, 15, .88);
     position: relative;
     perspective: 1100px;
     cursor: none;
     min-height: 280px
 }

 [data-theme="light"] .pfc {
     background: rgba(216, 208, 194, .88)
 }

 .pfc-in {
     width: 100%;
     height: 100%;
     min-height: 280px;
     position: relative;
     transform-style: preserve-3d;
     transition: transform .75s var(--expo)
 }

 .pfc:hover .pfc-in {
     transform: rotateY(180deg)
 }

 .pf,
 .pb {
     position: absolute;
     inset: 0;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     padding: 2.1rem;
     display: flex;
     flex-direction: column
 }

 .pb {
     transform: rotateY(180deg);
     background: rgba(12, 12, 24, .97);
     border-left: 1px solid var(--bd)
 }

 [data-theme="light"] .pb {
     background: rgba(206, 198, 184, .97)
 }

 .pcd {
     position: absolute;
     top: 1.1rem;
     right: 1.1rem;
     width: 5px;
     height: 5px;
     border-radius: 50%
 }

 .dlv {
     background: var(--gd);
     box-shadow: 0 0 8px var(--gg);
     animation: gp 2.5s ease-in-out infinite
 }

 .dwp {
     background: var(--tx3)
 }

 .pcn {
     font-family: 'Space Mono', monospace;
     font-size: .52rem;
     color: var(--tx3);
     margin-bottom: .95rem;
     letter-spacing: .1em
 }

 .pct {
     font-family: 'Cormorant Garant', serif;
     font-size: 1.6rem;
     font-weight: 600;
     margin-bottom: .48rem;
     letter-spacing: -.02em;
     transition: color .25s
 }

 .pfc:hover .pct {
     color: var(--gd)
 }

 .pcd2 {
     font-size: .77rem;
     color: var(--tx2);
     line-height: 1.85;
     flex: 1
 }

 .ptg2 {
     display: flex;
     flex-wrap: wrap;
     gap: .3rem;
     margin-top: .8rem
 }

 .ptg2 span {
     font-family: 'Space Mono', monospace;
     font-size: .5rem;
     border: 1px solid var(--bd);
     border-radius: 2px;
     padding: .12rem .46rem;
     color: var(--tx3)
 }

 /* Back */
 .pb-h {
     font-family: 'Space Mono', monospace;
     font-size: .5rem;
     color: var(--tx3);
     margin-bottom: .8rem;
     letter-spacing: .1em;
     text-transform: uppercase
 }

 .pb-b {
     font-size: .75rem;
     color: var(--tx2);
     line-height: 1.78;
     flex: 1
 }

 .pb-ls {
     display: flex;
     flex-direction: column;
     gap: .42rem;
     margin-top: .85rem
 }

 .pb-lk {
     font-family: 'Space Mono', monospace;
     font-size: .54rem;
     color: var(--gd);
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: .28rem;
     transition: gap .2s
 }

 .pb-lk:hover {
     gap: .5rem
 }

 .pb-st {
     font-family: 'Space Mono', monospace;
     font-size: .51rem;
     margin-top: .7rem;
     display: flex;
     align-items: center;
     gap: .32rem
 }

 .pb-st.lv {
     color: var(--gd)
 }

 .pb-st.lv::before {
     content: '';
     width: 4px;
     height: 4px;
     background: var(--gd);
     border-radius: 50%;
     animation: gp 2s infinite
 }

 .pb-st.wp {
     color: var(--tx3)
 }

 /* ─── SKILLS ─── */
 .skl {
     display: grid;
     grid-template-columns: 260px 1fr;
     gap: 5.5rem;
     align-items: start;
     position: relative;
     z-index: 4
 }

 .skdesc {
     font-size: .86rem;
     color: var(--tx2);
     line-height: 1.95
 }

 .sk-note {
     margin-top: 1.8rem;
     border-left: 1px solid var(--bd);
     padding-left: 1.05rem
 }

 .sk-note div {
     font-size: .74rem;
     color: var(--tx2);
     line-height: 2.05
 }

 .sk-note span {
     color: var(--gd)
 }

 /* Circular mini rings */
 .sk-rings {
     display: flex;
     flex-wrap: wrap;
     gap: .85rem;
     margin-top: 1.8rem
 }

 .skr {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: .38rem;
     cursor: default
 }

 .skr-w {
     position: relative;
     width: 46px;
     height: 46px
 }

 .skr-w svg {
     transform: rotate(-90deg)
 }

 .skr-bg {
     fill: none;
     stroke: var(--bd);
     stroke-width: 2.2
 }

 .skr-fg {
     fill: none;
     stroke: var(--gd);
     stroke-width: 2.2;
     stroke-dasharray: 120;
     stroke-dashoffset: 120;
     stroke-linecap: round;
     transition: stroke-dashoffset 1.5s cubic-bezier(.25, .46, .45, .94)
 }

 .skr-lbl {
     font-family: 'Space Mono', monospace;
     font-size: .43rem;
     color: var(--tx2);
     text-transform: uppercase;
     letter-spacing: .07em;
     text-align: center;
     max-width: 52px;
     line-height: 1.3
 }

 /* Bars */
 .skcat {
     margin-bottom: 2.5rem
 }

 .skcl {
     font-family: 'Space Mono', monospace;
     font-size: .52rem;
     color: var(--tx3);
     letter-spacing: .16em;
     text-transform: uppercase;
     padding-bottom: .65rem;
     border-bottom: 1px solid var(--bd);
     margin-bottom: 1.05rem
 }

 .skrow {
     display: flex;
     align-items: center;
     gap: 1.35rem;
     padding: .75rem 0;
     border-bottom: 1px solid rgba(201, 169, 110, .024);
     transition: all .26s;
     position: relative;
     border-radius: 2px
 }

 .skrow::after {
     content: '';
     position: absolute;
     inset: 0;
     background: var(--sf);
     opacity: 0;
     transition: opacity .3s;
     border-radius: 2px;
     pointer-events: none
 }

 .skrow:hover::after {
     opacity: 1
 }

 .skrow:hover {
     padding-left: .42rem
 }

 .sknm {
     font-size: .79rem;
     color: var(--tx);
     font-weight: 400;
     width: 98px;
     flex-shrink: 0;
     position: relative;
     z-index: 1
 }

 .sktr {
     flex: 1;
     height: 1px;
     background: var(--bd);
     position: relative
 }

 .skbar {
     position: absolute;
     left: 0;
     top: -.5px;
     height: 2px;
     width: 0%;
     background: linear-gradient(90deg, var(--gd), rgba(201, 169, 110, .18));
     border-radius: 1px;
     transition: width 1.6s cubic-bezier(.25, .46, .45, .94)
 }

 .skbar::after {
     content: '';
     position: absolute;
     right: -1px;
     top: -2px;
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: var(--gd);
     box-shadow: 0 0 8px var(--gg3);
     opacity: 0;
     transition: opacity .4s .9s
 }

 .skrow:hover .skbar::after {
     opacity: 1
 }

 .skpct {
     font-family: 'Space Mono', monospace;
     font-size: .55rem;
     color: var(--tx3);
     width: 28px;
     text-align: right;
     position: relative;
     z-index: 1
 }

 /* ─── CERTS ─── */
 .cg {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.45rem;
     position: relative;
     z-index: 4
 }

 .cc {
     background: var(--sf);
     border: 1px solid var(--bd);
     border-radius: 4px;
     padding: 2.3rem 1.9rem;
     display: flex;
     flex-direction: column;
     gap: .95rem;
     transition: all .38s var(--expo);
     position: relative;
     overflow: hidden;
     cursor: default
 }

 .cc::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--gd), transparent);
     transform: scaleX(0);
     transition: transform .55s var(--expo)
 }

 .cc::after {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 2px;
     background: linear-gradient(var(--gd), rgba(201, 169, 110, .08));
     transform: scaleY(0);
     transform-origin: top;
     transition: transform .55s var(--expo)
 }

 .cc:hover::before {
     transform: scaleX(1)
 }

 .cc:hover::after {
     transform: scaleY(1)
 }

 .cc:hover {
     background: var(--sf2);
     border-color: var(--bd2);
     transform: translateY(-7px);
     box-shadow: 0 24px 60px rgba(0, 0, 0, .34)
 }

 [data-theme="light"] .cc:hover {
     box-shadow: 0 16px 42px rgba(0, 0, 0, .1)
 }

 .cc-ic {
     font-size: 1.55rem
 }

 .cc-nm {
     font-size: .87rem;
     font-weight: 500
 }

 .cc-is {
     font-family: 'Space Mono', monospace;
     font-size: .57rem;
     color: var(--gd);
     letter-spacing: .05em
 }

 .cc-yr {
     font-family: 'Space Mono', monospace;
     font-size: .54rem;
     color: var(--tx3);
     letter-spacing: .1em;
     margin-top: auto;
     padding-top: .75rem;
     border-top: 1px solid var(--bd)
 }

 .cc-vf {
     font-family: 'Space Mono', monospace;
     font-size: .5rem;
     color: var(--tx3);
     display: flex;
     align-items: center;
     gap: .32rem
 }

 .cc-vf::before {
     content: '✓';
     color: var(--gd)
 }

 /* ─── CONTACT ─── */
 #contact {
     align-items: center;
     text-align: center
 }

 .cong {
     position: absolute;
     inset: 0;
     z-index: 1;
     background: radial-gradient(ellipse at 50% 110%, var(--gg) 0%, transparent 56%);
     pointer-events: none
 }

 /* Orbiting rings */
 .orb {
     position: absolute;
     border-radius: 50%;
     border: 1px solid var(--bd);
     z-index: 1;
     pointer-events: none
 }

 .orb::before {
     content: '';
     position: absolute;
     width: 5px;
     height: 5px;
     background: var(--gd);
     border-radius: 50%;
     top: -2.5px;
     left: 50%;
     transform: translateX(-50%);
     box-shadow: 0 0 10px var(--gg)
 }

 .orb1 {
     width: 380px;
     height: 380px;
     animation: rcw 22s linear infinite
 }

 .orb2 {
     width: 250px;
     height: 250px;
     border-color: var(--bd2);
     animation: rcw 14s linear infinite reverse
 }

 .orb2::before {
     width: 3px;
     height: 3px;
     top: -1.5px
 }

 .orb3 {
     width: 160px;
     height: 160px;
     border-color: var(--bd3);
     animation: rcw 9s linear infinite
 }

 .orb3::before {
     width: 2px;
     height: 2px;
     top: -1px;
     background: var(--gd2);
     box-shadow: none
 }

 @keyframes rcw {
     from {
         transform: rotate(0deg)
     }

     to {
         transform: rotate(360deg)
     }
 }

 .conin {
     position: relative;
     z-index: 4;
     max-width: 740px;
     width: 100%
 }

 .conh {
     font-family: 'Cormorant Garant', serif;
     font-weight: 300;
     font-size: clamp(3.2rem, 9vw, 7.5rem);
     line-height: .95;
     letter-spacing: -.04em;
     margin-bottom: 1.4rem
 }

 .conh em {
     font-style: italic;
     color: var(--gd);
     display: block
 }

 .cond {
     font-size: .87rem;
     color: var(--tx2);
     line-height: 1.95;
     margin-bottom: 3rem
 }

 .concards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: .9rem;
     text-align: left;
     margin-bottom: 2.4rem
 }

 .concard {
     background: var(--sf);
     border: 1px solid var(--bd);
     border-radius: 4px;
     padding: 1.35rem;
     text-decoration: none;
     color: var(--tx);
     transition: all .32s var(--expo);
     position: relative;
     overflow: hidden
 }

 .concard::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: var(--gd);
     transform: scaleX(0);
     transition: transform .38s var(--expo)
 }

 .concard:hover::after {
     transform: scaleX(1)
 }

 .concard:hover {
     background: var(--sf2);
     border-color: var(--bd2);
     transform: translateY(-4px)
 }

 .cc-lb {
     font-family: 'Space Mono', monospace;
     font-size: .5rem;
     color: var(--tx3);
     letter-spacing: .12em;
     text-transform: uppercase;
     margin-bottom: .42rem
 }

 .cc-vl {
     font-size: .79rem;
     color: var(--gd);
     word-break: break-all
 }

 .socrow {
     display: flex;
     gap: .52rem;
     justify-content: center;
     flex-wrap: wrap
 }

 .soc {
     font-family: 'Space Mono', monospace;
     font-size: .59rem;
     border: 1px solid var(--bd);
     border-radius: 2px;
     padding: .48rem .95rem;
     color: var(--tx2);
     text-decoration: none;
     letter-spacing: .08em;
     text-transform: uppercase;
     transition: all .3s
 }

 .soc:hover {
     border-color: var(--gd);
     color: var(--gd);
     transform: translateY(-2px)
 }

 /* ─── FOOTER ─── */
 footer {
     scroll-snap-align: none;
     min-height: auto;
     padding: 2.8rem 5rem;
     border-top: 1px solid var(--bd);
     background: var(--bg2);
     position: relative;
     z-index: 3;
     transition: background .5s
 }

 .fg {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 3rem;
     margin-bottom: 2.3rem
 }

 .fg-logo {
     font-family: 'Space Mono', monospace;
     font-size: .82rem;
     color: var(--tx);
     margin-bottom: .65rem
 }

 .fg-logo em {
     color: var(--gd);
     font-style: normal
 }

 .fg-tg {
     font-size: .79rem;
     color: var(--tx2);
     line-height: 1.75
 }

 .fg-prn {
     font-family: 'Space Mono', monospace;
     font-size: .5rem;
     color: var(--tx3);
     margin-top: .9rem
 }

 .fg-t {
     font-family: 'Space Mono', monospace;
     font-size: .52rem;
     color: var(--tx3);
     letter-spacing: .16em;
     text-transform: uppercase;
     margin-bottom: .8rem
 }

 .fg-ls {
     display: flex;
     flex-direction: column;
     gap: .4rem
 }

 .fg-lk {
     font-size: .79rem;
     color: var(--tx2);
     text-decoration: none;
     transition: color .2s;
     display: flex;
     align-items: center;
     gap: .35rem
 }

 .fg-lk::before {
     content: '';
     width: 4px;
     height: 4px;
     background: var(--tx3);
     border-radius: 50%;
     transition: background .2s;
     flex-shrink: 0
 }

 .fg-lk:hover {
     color: var(--gd)
 }

 .fg-lk:hover::before {
     background: var(--gd)
 }

 .fbot {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 1.4rem;
     border-top: 1px solid var(--bd)
 }

 .fl {
     font-family: 'Space Mono', monospace;
     font-size: .57rem;
     color: var(--tx3)
 }

 .fl em {
     color: var(--gd);
     font-style: normal
 }

 .fst {
     display: flex;
     align-items: center;
     gap: .42rem;
     font-family: 'Space Mono', monospace;
     font-size: .53rem;
     color: var(--tx3)
 }

 .fst::before {
     content: '';
     width: 5px;
     height: 5px;
     background: #4ade80;
     border-radius: 50%;
     animation: gp 3s ease-in-out infinite
 }

 .fr {
     font-family: 'Space Mono', monospace;
     font-size: .57rem;
     color: var(--tx3)
 }

 /* RESPONSIVE */
 @media(max-width:960px) {
     nav {
         padding: 1.3rem 1.8rem
     }

     nav.stuck {
         padding: 1rem 1.8rem
     }

     .nlinks,
     .ncta,
     .kbtn {
         display: none
     }

     .hbg {
         display: flex
     }

     #sdnav,
     #btt {
         display: none
     }

     html {
         scroll-snap-type: none
     }

     section {
         padding: 7rem 1.8rem 5rem
     }

     .hgrid {
         grid-template-columns: 1fr;
         gap: 2.5rem
     }

     .hstats {
         max-width: 360px
     }

     .hbot {
         left: 1.8rem;
         right: 1.8rem
     }

     .hco {
         display: none
     }

     #about {
         grid-template-columns: 1fr;
         gap: 3rem
     }

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

     .pfv {
         min-height: 200px
     }

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

     .skl {
         grid-template-columns: 1fr;
         gap: 2.5rem
     }

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

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

     footer {
         padding: 2rem 1.8rem
     }

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

     .fbot {
         flex-direction: column;
         gap: .6rem;
         text-align: center
     }

     .pw,
     .sln,
     .orb {
         display: none
     }

     #pal {
         padding-top: 10vh
     }
 }