:root {
     --accent: #4f46e5;
     --accent-light: #818cf8;
     --ink: #0d0d14;
     --line: rgba(13, 13, 20, 0.08);
 }

 html {
     scroll-padding-top: 96px;
 }

 body {
     font-family: 'Inter', sans-serif;
     background-color: #f7f7fb;
     color: var(--ink);
     overflow-x: hidden;
 }

 ::selection {
     background: var(--accent);
     color: #fff;
 }

 /* ---------- Ambient background ---------- */
 .bg-stage {
     position: fixed;
     inset: 0;
     z-index: -1;
     overflow: hidden;
     background:
         radial-gradient(120% 90% at 80% 0%, #ffffff 0%, #f7f7fb 55%, #f2f2f8 100%);
 }

 .bg-grid {
     position: absolute;
     inset: -20%;
     background-image:
         linear-gradient(to right, rgba(13, 13, 20, .045) 1px, transparent 1px),
         linear-gradient(to bottom, rgba(13, 13, 20, .045) 1px, transparent 1px);
     background-size: 64px 64px;
     mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%);
     -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%);
     animation: gridDrift 40s linear infinite;
     will-change: transform;
 }

 /* Parallax layers are moved with the `translate` property so the JS never
     fights the `transform` used by the float and reveal animations. */
 .parallax {
     will-change: translate;
 }

 @keyframes gridDrift {
     0% {
         transform: translate3d(0, 0, 0);
     }

     100% {
         transform: translate3d(-64px, -64px, 0);
     }
 }

 .blob {
     position: absolute;
     border-radius: 50%;
     filter: blur(64px);
     opacity: .5;
     will-change: transform;
     transform: translateZ(0);
     contain: paint;
 }

 .blob-1 {
     top: -12%;
     left: -8%;
     width: 46vw;
     height: 46vw;
     background: #dfe4ff;
     animation: float1 24s ease-in-out infinite alternate;
 }

 .blob-2 {
     bottom: -18%;
     right: -10%;
     width: 52vw;
     height: 52vw;
     background: #f0e6ff;
     animation: float2 30s ease-in-out infinite alternate;
 }

 .blob-3 {
     top: 45%;
     left: 32%;
     width: 34vw;
     height: 34vw;
     background: #dff2ff;
     animation: float3 26s ease-in-out infinite alternate;
 }

 @keyframes float1 {
     0% {
         transform: translate(0, 0) scale(1);
     }

     100% {
         transform: translate(12%, 14%) scale(1.12);
     }
 }

 @keyframes float2 {
     0% {
         transform: translate(0, 0) scale(1.05);
     }

     100% {
         transform: translate(-14%, -8%) scale(.92);
     }
 }

 @keyframes float3 {
     0% {
         transform: translate(0, 0) scale(.95);
     }

     100% {
         transform: translate(8%, -12%) scale(1.15);
     }
 }

 /* ---------- Cursor (fine pointers only) ---------- */
 @media (pointer: fine) {
     body {
         cursor: none;
     }

     a,
     button,
     input,
     .tilt-card {
         cursor: none;
     }
 }

 #cursor-dot,
 #cursor-ring {
     position: fixed;
     top: 0;
     left: 0;
     pointer-events: none;
     border-radius: 50%;
     z-index: 9999;
     margin-left: -6px;
     margin-top: -6px;
 }

 #cursor-dot {
     width: 12px;
     height: 12px;
     background: var(--accent);
     will-change: transform;
 }

 #cursor-ring {
     width: 40px;
     height: 40px;
     margin-left: -20px;
     margin-top: -20px;
     border: 1.5px solid rgba(79, 70, 229, .4);
     z-index: 9998;
     will-change: transform;
     transition: background-color .3s ease, border-color .3s ease;
 }

 #cursor-ring.grow {
     background: rgba(79, 70, 229, .07);
     border-color: rgba(79, 70, 229, .22);
 }

 /* ---------- Scroll progress ---------- */
 #progress {
     position: fixed;
     top: 0;
     left: 0;
     height: 3px;
     width: 0%;
     background: linear-gradient(90deg, var(--accent), var(--accent-light), #22d3ee);
     z-index: 70;
     transition: width .1s linear;
 }

 /* ---------- Entrance / scroll reveals ---------- */
 .reveal {
     opacity: 0;
     transform: translateY(34px);
     transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
 }

 .reveal.in {
     opacity: 1;
     transform: none;
 }

 .reveal-left {
     opacity: 0;
     transform: translateX(-40px);
     transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
 }

 .reveal-left.in {
     opacity: 1;
     transform: none;
 }

 .reveal-scale {
     opacity: 0;
     transform: scale(.9);
     transition: opacity .7s cubic-bezier(.34, 1.4, .64, 1), transform .7s cubic-bezier(.34, 1.4, .64, 1);
 }

 .reveal-scale.in {
     opacity: 1;
     transform: none;
 }

 .word-mask {
     overflow: hidden;
     display: inline-block;
     vertical-align: bottom;
     padding-bottom: .08em;
 }

 .word {
     display: inline-block;
     transform: translateY(112%) rotate(4deg);
     opacity: 0;
     transition: transform 1s cubic-bezier(.22, 1, .36, 1), opacity .7s ease;
 }

 .loaded .word {
     transform: none;
     opacity: 1;
 }

 /* ---------- Gradient text sweep ---------- */
 .grad-text {
     background: linear-gradient(100deg, #4f46e5 0%, #818cf8 30%, #22d3ee 50%, #818cf8 70%, #4f46e5 100%);
     background-size: 250% auto;
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     animation: sweep 7s linear infinite;
 }

 @keyframes sweep {
     to {
         background-position: 250% center;
     }
 }

 /* ---------- Typewriter ---------- */
 #role {
     border-right: 2px solid var(--accent);
     padding-right: 3px;
 }

 .blink-off {
     border-color: transparent;
 }

 /* ---------- Marquee ---------- */
 .marquee {
     display: flex;
     width: max-content;
     animation: slide 38s linear infinite;
 }

 .marquee:hover {
     animation-play-state: paused;
 }

 @keyframes slide {
     to {
         transform: translateX(-50%);
     }
 }

 .marquee-mask {
     mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
     -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
 }

 /* ---------- Cards ---------- */
 .tilt-wrap {
     perspective: 1000px;
 }

 .tilt-card {
     transform-style: preserve-3d;
     transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
 }

 .tilt-card:hover {
     box-shadow: 0 26px 60px -22px rgba(79, 70, 229, .35);
     border-color: rgba(79, 70, 229, .35);
 }

 .tilt-inner {
     transform: translateZ(24px);
 }

 .shine {
     position: relative;
     overflow: hidden;
 }

 .shine::after {
     content: '';
     position: absolute;
     top: 0;
     left: -120%;
     width: 60%;
     height: 100%;
     background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
     transform: skewX(-18deg);
     transition: left .8s cubic-bezier(.22, 1, .36, 1);
 }

 .shine:hover::after {
     left: 130%;
 }

 /* ---------- Magnetic ---------- */
 .magnetic {
     display: inline-flex;
     transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1);
     will-change: transform;
 }

 /* ---------- Nav ---------- */
 .nav-link {
     position: relative;
 }

 .nav-link::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: -6px;
     height: 2px;
     width: 0;
     background: var(--accent);
     border-radius: 2px;
     transition: width .35s cubic-bezier(.22, 1, .36, 1);
 }

 .nav-link:hover::after,
 .nav-link.active::after {
     width: 100%;
 }

 #mobile-menu {
     clip-path: inset(0 0 100% 0);
     transition: clip-path .5s cubic-bezier(.22, 1, .36, 1);
 }

 #mobile-menu.open {
     clip-path: inset(0 0 0 0);
 }

 #mobile-menu a {
     opacity: 0;
     transform: translateY(18px);
     transition: all .5s cubic-bezier(.22, 1, .36, 1);
 }

 #mobile-menu.open a {
     opacity: 1;
     transform: none;
 }

 .burger span {
     transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
 }

 .burger.open span:nth-child(1) {
     transform: translateY(6px) rotate(45deg);
 }

 .burger.open span:nth-child(2) {
     opacity: 0;
 }

 .burger.open span:nth-child(3) {
     transform: translateY(-6px) rotate(-45deg);
 }

 /* ---------- Floating contact rail ---------- */
 #rail {
     z-index: 60;
 }

 .rail-btn {
     display: flex;
     align-items: center;
     gap: 0;
     height: 54px;
     padding: 0 17px;
     border-radius: 999px;
     background: rgba(255, 255, 255, .92);
     backdrop-filter: blur(12px);
     border: 1px solid rgba(13, 13, 20, .08);
     box-shadow: 0 10px 30px -12px rgba(13, 13, 20, .35);
     transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease, background-color .4s ease, gap .4s cubic-bezier(.22, 1, .36, 1);
     opacity: 0;
     transform: translateX(70px);
 }

 .rail-btn.in {
     opacity: 1;
     transform: none;
 }

 .rail-btn:hover {
     transform: translateX(-6px) scale(1.04);
     box-shadow: 0 18px 40px -14px rgba(79, 70, 229, .55);
     gap: 10px;
 }

 .rail-label {
     max-width: 0;
     overflow: hidden;
     white-space: nowrap;
     font-size: 13px;
     font-weight: 600;
     letter-spacing: .01em;
     transition: max-width .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
     opacity: 0;
 }

 .rail-btn:hover .rail-label {
     max-width: 130px;
     opacity: 1;
 }

 .rail-pulse {
     position: absolute;
     inset: 0;
     border-radius: 999px;
     border: 2px solid currentColor;
     opacity: .55;
     animation: pulseRing 2.6s cubic-bezier(.22, 1, .36, 1) infinite;
 }

 @keyframes pulseRing {
     0% {
         transform: scale(1);
         opacity: .5;
     }

     70% {
         transform: scale(1.35);
         opacity: 0;
     }

     100% {
         transform: scale(1.35);
         opacity: 0;
     }
 }

 #to-top {
     opacity: 0;
     pointer-events: none;
     transform: translateY(14px) scale(.8);
     transition: all .4s cubic-bezier(.22, 1, .36, 1);
 }

 #to-top.show {
     opacity: 1;
     pointer-events: auto;
     transform: none;
 }

 #to-top.show:hover {
     transform: translateX(-6px) scale(1.06);
 }

 /* ---------- Timeline ---------- */
 #timeline {
     --tl-gutter: 2.25rem;
     padding-left: var(--tl-gutter);
 }

 @media (min-width: 640px) {
     #timeline {
         --tl-gutter: 2.75rem;
     }
 }

 .tl-line {
     position: absolute;
     left: 0;
     top: 8px;
     bottom: 0;
     width: 2px;
     background: var(--line);
     overflow: hidden;
 }

 .tl-fill {
     display: block;
     width: 100%;
     height: 0;
     background: linear-gradient(180deg, var(--accent), var(--accent-light));
     transition: height 1.4s cubic-bezier(.22, 1, .36, 1);
 }

 .tl-dot::before {
     content: '';
     position: absolute;
     left: calc(var(--tl-gutter) * -1 + 1px);
     top: 8px;
     width: 16px;
     height: 16px;
     box-sizing: border-box;
     transform: translateX(-50%);
     border-radius: 50%;
     background: #fff;
     border: 3px solid var(--accent);
     box-shadow: 0 0 0 5px rgba(79, 70, 229, .12);
     transition: transform .35s ease, box-shadow .35s ease;
 }

 .tl-dot:hover::before {
     transform: translateX(-50%) scale(1.3);
     box-shadow: 0 0 0 8px rgba(79, 70, 229, .14);
 }

 /* ---------- Project filter ---------- */
 .chip-filter {
     transition: all .3s cubic-bezier(.22, 1, .36, 1);
 }

 .chip-filter.on {
     background: var(--ink);
     color: #fff;
     border-color: var(--ink);
 }

 .proj {
     transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
 }

 .proj.hide {
     opacity: 0;
     transform: scale(.94);
     position: absolute;
     pointer-events: none;
     visibility: hidden;
 }

 /* ---------- Orbit badges ---------- */
 .orbit {
     animation: orbitFloat 6s ease-in-out infinite;
 }

 .orbit-slow {
     animation: orbitFloat 8s ease-in-out infinite reverse;
 }

 @keyframes orbitFloat {

     0%,
     100% {
         transform: translateY(0) rotate(0deg);
     }

     50% {
         transform: translateY(-14px) rotate(3deg);
     }
 }

 .ring-spin {
     animation: spin 22s linear infinite;
 }

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

 .scroll-cue span {
     animation: cueDrop 1.8s ease-in-out infinite;
 }

 @keyframes cueDrop {

     0%,
     100% {
         transform: translateY(0);
         opacity: .35;
     }

     50% {
         transform: translateY(7px);
         opacity: 1;
     }
 }

 /* ---------- Accessibility ---------- */
 a:focus-visible,
 button:focus-visible {
     outline: 3px solid var(--accent);
     outline-offset: 3px;
     border-radius: 6px;
 }

 @media (prefers-reduced-motion: reduce) {
     html {
         scroll-behavior: auto;
     }

     *,
     *::before,
     *::after {
         animation-duration: .001ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: .001ms !important;
     }

     .reveal,
     .reveal-left,
     .reveal-scale,
     .word,
     .rail-btn {
         opacity: 1 !important;
         transform: none !important;
     }

     body {
         cursor: auto !important;
     }
 }