/* ============ TOKENS ============ */
 :root {
     --bg: #050505;
     --bg-2: #0e0e0e;
     --card: #151515;
     --gold: #D4AF37;
     --gold-soft: rgba(212, 175, 55, .35);
     --text: #ffffff;
     --text-2: #b8b8b8;
     --text-3: #7a7a7a;
     --border: rgba(255, 255, 255, .08);
     --border-strong: rgba(255, 255, 255, .16);
     --serif: 'Playfair Display', 'Cormorant Garamond', serif;
     --sans: 'Inter', -apple-system, sans-serif;
     --mono: 'JetBrains Mono', monospace;
     --ambient: rgba(212, 175, 55, 0.05);
     --ease: cubic-bezier(.16, .84, .44, 1);
     --dur-s: .4s;
     --dur-m: .8s;
     --dur-l: 1.4s;
 }


 .content-bg-wrap {
     position: relative;
     isolation: isolate;
 }

 .content-bg__c {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     pointer-events: none;
     display: block;
 }

 .content-bg__wash {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: none;
     background:
         radial-gradient(80% 62% at 50% 46%, color-mix(in oklab, var(--gold) 9%, transparent), transparent 68%),
         radial-gradient(120% 100% at 50% 50%, transparent 45%, rgba(0, 0, 0, .8) 100%);
 }

 @media (prefers-reduced-motion: reduce) {

     .content-bg__c,
     .content-bg__wash {
         display: none;
     }
 }

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

 html {
     scroll-behavior: auto;
 }

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

     * {
         animation-duration: .01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: .01ms !important;
         scroll-behavior: auto !important;
     }
 }

 body.dev-mode {
     filter: invert(1) hue-rotate(180deg);
 }

 body.dev-mode .cursor-dot,
 body.dev-mode .cursor-ring {
     filter: invert(1) hue-rotate(180deg);
 }

 body {
     background: var(--bg);
     color: var(--text);
     font-family: var(--sans);
     font-weight: 300;
     overflow-x: hidden;
     cursor: none;
     position: relative;
 }

 body::before {
     content: '';
     position: fixed;
     inset: 0;
     background:
         radial-gradient(ellipse 60% 40% at 50% 0%, var(--ambient), transparent 70%),
         linear-gradient(var(--bg), var(--bg));
     pointer-events: none;
     z-index: 0;
     transition: background var(--dur-l) var(--ease);
 }

 @media (pointer:coarse) {
     body {
         cursor: auto;
     }
 }

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

 a {
     color: inherit;
     text-decoration: none;
 }

 button {
     font-family: inherit;
     background: none;
     border: none;
     color: inherit;
     cursor: none;
 }

 @media (pointer:coarse) {
     button {
         cursor: pointer;
     }
 }

 img {
     max-width: 100%;
     display: block;
 }

 :focus-visible {
     outline: 1.5px solid var(--gold);
     outline-offset: 4px;
 }

 .wrap {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 40px;
 }

 @media (max-width:640px) {
     .wrap {
         padding: 0 22px;
     }
 }

 .eyebrow {
     font-family: var(--mono);
     font-size: 11px;
     letter-spacing: .28em;
     text-transform: uppercase;
     color: var(--gold);
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 22px;
 }

 .eyebrow::before {
     content: '';
     width: 28px;
     height: 1px;
     background: var(--gold);
 }

 .section-title {
     font-family: var(--serif);
     font-weight: 500;
     font-size: clamp(32px, 4.4vw, 54px);
     line-height: 1.15;
     letter-spacing: -.01em;
 }

 .section-sub {
     font-size: 16px;
     color: var(--text-2);
     font-weight: 300;
     max-width: 560px;
     line-height: 1.7;
     margin-top: 18px;
 }

 section {
     position: relative;
     padding: 150px 0;
     z-index: 1;
 }

 @media (max-width:768px) {
     section {
         padding: 100px 0;
     }
 }

 .section-head {
     margin-bottom: 70px;
 }

 /* reveal on scroll */
 .reveal {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity 1s var(--ease), transform 1s var(--ease);
 }

 .reveal.in {
     opacity: 1;
     transform: translateY(0);
 }

 .reveal-stag>* {
     opacity: 0;
     transform: translateY(24px);
     transition: opacity .8s var(--ease), transform .8s var(--ease);
 }

 .reveal-stag.in>* {
     opacity: 1;
     transform: translateY(0);
 }

 .reveal-stag.in>*:nth-child(1) {
     transition-delay: .05s;
 }

 .reveal-stag.in>*:nth-child(2) {
     transition-delay: .12s;
 }

 .reveal-stag.in>*:nth-child(3) {
     transition-delay: .19s;
 }

 .reveal-stag.in>*:nth-child(4) {
     transition-delay: .26s;
 }

 .reveal-stag.in>*:nth-child(5) {
     transition-delay: .33s;
 }

 .reveal-stag.in>*:nth-child(6) {
     transition-delay: .40s;
 }

 .reveal-stag.in>*:nth-child(7) {
     transition-delay: .47s;
 }

 .reveal-stag.in>*:nth-child(8) {
     transition-delay: .54s;
 }

 /* ============ CURSOR ============ */

 .cursor-logo {
     position: fixed;
     top: 0;
     left: 0;
     pointer-events: none;
     z-index: 9999;
     width: 30px;
     height: 30px;
     transform: translate(-50%, -50%);
     transition: width .25s var(--ease), height .25s var(--ease), opacity .2s;
     opacity: .85;
 }

 .cursor-logo svg {
     width: 100%;
     height: 100%;
 }

 .cursor-logo path {
     fill: none;
     stroke: var(--gold);
     stroke-width: 6;
     stroke-linecap: round;
     filter: drop-shadow(0 0 4px rgba(212, 175, 55, .5));
 }

 .cursor-logo.hover {
     width: 44px;
     height: 44px;
     opacity: 1;
 }

 @media (pointer:coarse) {
     .cursor-logo {
         display: none;
     }
 }


 /* ============ CUSTOM SCROLLBAR ============ */
 ::-webkit-scrollbar {
     width: 6px;
 }

 ::-webkit-scrollbar-track {
     background: var(--bg);
 }

 ::-webkit-scrollbar-thumb {
     background: var(--gold-soft);
     border-radius: 10px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: var(--gold);
 }

 /* ============ LOADER ============ */
 #loader {
     position: fixed;
     inset: 0;
     background: var(--bg);
     z-index: 10000;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     gap: 26px;
     transition: opacity .9s var(--ease), visibility .9s;
 }

 #loader.done {
     opacity: 0;
     visibility: hidden;
 }

 #loader svg {
     width: 88px;
     height: 88px;
 }

 #loader path {
     fill: none;
     stroke: var(--gold);
     stroke-width: 3;
     stroke-linecap: round;
     stroke-dasharray: 500;
     stroke-dashoffset: 500;
     animation: draw 20s var(--ease) forwards;
     filter: drop-shadow(0 0 6px rgba(212, 175, 55, .5));
 }

 #loader path {
     animation-delay: .5s;
 }

 @keyframes draw {
     to {
         stroke-dashoffset: 0;
     }
 }

 .loader-label {
     font-family: var(--mono);
     font-size: 20px;
     letter-spacing: .3em;
     color: var(--text-3);
     text-transform: uppercase;
     opacity: 0;
     animation: fadein .6s ease forwards 1.5s;
 }

 @keyframes fadein {
     to {
         opacity: 1;
     }
 }

 /* ============ NAV ============ */
 header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 500;
     padding: 26px 0;
     transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s;
     border-bottom: 1px solid transparent;
 }

 header.scrolled {
     background: rgba(5, 5, 5, .72);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     padding: 16px 0;
     border-color: var(--border);
 }

 nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 10px;
     font-family: var(--mono);
     font-size: 13px;
     letter-spacing: .1em;
 }

 .brand svg {
     width: 26px;
     height: 26px;
 }

 .brand svg path,
 .brand svg circle {
     fill: none;
     stroke: var(--gold);
     stroke-width: 5;
 }

 .nav-links {
     display: flex;
     gap: 36px;
     list-style: none;
 }

 .nav-links a {
     font-size: 13px;
     letter-spacing: .03em;
     color: var(--text-2);
     position: relative;
     padding: 4px 0;
     transition: color .3s;
 }

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

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

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

 .nav-right {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .kbd-hint {
     display: flex;
     align-items: center;
     gap: 8px;
     font-family: var(--mono);
     font-size: 11px;
     color: var(--text-3);
     border: 1px solid var(--border);
     padding: 6px 10px;
     border-radius: 6px;
     transition: border-color .3s, color .3s;
 }

 .kbd-hint:hover {
     border-color: var(--gold-soft);
     color: var(--text-2);
 }

 .menu-toggle {
     display: none;
 }

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

     .menu-toggle {
         display: block;
     }
 }

 /* ============ COMMAND PALETTE ============ */
 #palette-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .72);
     backdrop-filter: blur(6px);
     z-index: 9000;
     display: flex;
     align-items: flex-start;
     justify-content: center;
     padding-top: 14vh;
     opacity: 0;
     visibility: hidden;
     transition: opacity .3s var(--ease), visibility .3s;
 }

 #palette-overlay.open {
     opacity: 1;
     visibility: visible;
 }

 .palette {
     width: min(560px, 88vw);
     background: var(--bg-2);
     border: 1px solid var(--border-strong);
     border-radius: 12px;
     box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
     overflow: hidden;
     transform: translateY(-14px);
     transition: transform .3s var(--ease);
 }

 #palette-overlay.open .palette {
     transform: translateY(0);
 }

 .palette input {
     width: 100%;
     padding: 20px 22px;
     background: transparent;
     border: none;
     border-bottom: 1px solid var(--border);
     color: var(--text);
     font-size: 15px;
     font-family: var(--sans);
 }

 .palette input::placeholder {
     color: var(--text-3);
 }

 .palette-list {
     max-height: 320px;
     overflow-y: auto;
     padding: 8px;
 }

 .palette-item {
     padding: 12px 14px;
     border-radius: 8px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 14px;
     color: var(--text-2);
     transition: background .2s;
 }

 .palette-item .tag {
     font-family: var(--mono);
     font-size: 10px;
     color: var(--text-3);
 }

 .palette-item.active,
 .palette-item:hover {
     background: rgba(212, 175, 55, .08);
     color: var(--text);
 }

 /* ============ HERO ============ */
 #hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     position: relative;
     padding: 0 24px;
     overflow: hidden;
 }

 .hero-video {
     position: absolute;
     inset: 0;
     z-index: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: grayscale(.3) brightness(1) contrast(1.1);
 }

 .hero-video-overlay {
     position: absolute;
     inset: 0;
     z-index: 1;
     background:
         radial-gradient(ellipse 70% 60% at 50% 40%, transparent 0%, var(--bg) 90%),
         linear-gradient(rgba(5, 5, 5, .5), rgba(5, 5, 5, .5));
 }

 .hero-inner {
     position: relative;
     z-index: 2;
 }

 .hero-eyebrow {
     font-family: var(--mono);
     font-size: 12px;
     letter-spacing: .35em;
     color: var(--gold);
     text-transform: uppercase;
     opacity: 0;
     animation: heroIn .9s var(--ease) forwards .2s;
 }

 .hero-name {
     font-family: var(--serif);
     font-weight: 500;
     font-size: clamp(46px, 9vw, 110px);
     line-height: 1;
     margin: 22px 0 18px;
     letter-spacing: -.01em;
     opacity: 0;
     animation: heroIn 1s var(--ease) forwards .4s;
 }

 .hero-subtitle-wrap {
     height: 34px;
     overflow: hidden;
     margin-bottom: 26px;
     opacity: 0;
     animation: heroIn 1s var(--ease) forwards .65s;
 }

 .hero-subtitle {
     font-family: var(--serif);
     font-style: italic;
     font-size: 22px;
     color: var(--text-2);
     transition: transform .7s var(--ease), opacity .7s var(--ease);
     color: var(--gold);
 }

 .hero-tagline {
     color: var(--text-2);
     font-size: 16px;
     max-width: 480px;
     margin: 0 auto 46px;
     line-height: 1.8;
     font-weight: 300;
     opacity: 0;
     animation: heroIn 1s var(--ease) forwards .85s;
 }

 @keyframes heroIn {
     from {
         opacity: 0;
         transform: translateY(18px);
     }

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

 .hero-btns {
     display: flex;
     gap: 18px;
     justify-content: center;
     flex-wrap: wrap;
     opacity: 0;
     animation: heroIn 1s var(--ease) forwards 1.05s;
 }

 .btn {
     font-family: var(--sans);
     font-size: 13px;
     letter-spacing: .05em;
     padding: 15px 30px;
     border-radius: 2px;
     position: relative;
     overflow: hidden;
     transition: transform .3s var(--ease), border-color .3s, color .3s;
     display: inline-block;
 }

 .btn-primary {
     background: var(--gold);
     color: #0a0a0a;
     font-weight: 500;
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 14px 30px -10px rgba(212, 175, 55, .5);
 }

 /* ======================= */



 /* ================================================= */

 .btn-ghost {
     border: 1px solid var(--border-strong);
     color: var(--text);
 }

 .btn-ghost:hover {
     border-color: var(--gold);
     color: var(--gold);
     transform: translateY(-2px);
 }

 .scroll-indicator {
     position: absolute;
     bottom: 40px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 2;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     opacity: .6;
 }

 .scroll-indicator .line {
     width: 1px;
     height: 44px;
     background: linear-gradient(var(--gold), transparent);
     animation: scrollpulse 2.2s ease-in-out infinite;
 }

 @keyframes scrollpulse {

     0%,
     100% {
         transform: scaleY(1);
         opacity: .5;
     }

     50% {
         transform: scaleY(1.3);
         opacity: 1;
     }
 }

 .scroll-indicator span {
     font-family: var(--mono);
     font-size: 10px;
     letter-spacing: .3em;
     color: var(--text-3);
 }

 /* ============ ABOUT ============ */
 #about {
     z-index: 48;
     box-shadow:
         0 30px 50px -5px rgba(51, 50, 50, 0.131),
         0 30px 50px -5px rgba(59, 58, 58, 0.204);
     border-bottom: solid 1px rgba(61, 61, 59, 0.287);
     top: 8px;
     opacity: 1;

 }

 .about-grid {
     display: grid;
     grid-template-columns: .85fr 1.15fr;
     gap: 80px;
     align-items: start;
 }

 @media (max-width:900px) {
     .about-grid {
         grid-template-columns: 1fr;
         gap: 50px;
     }
 }

 .portrait-frame {
     aspect-ratio: 8/11;
     border: 1px solid var(--border-strong);
     padding: 14px;
     position: relative;
     /* overflow: hidden; */
 }

 .portrait-frame::before {
     content: '';
     position: absolute;
     inset: 0;
     border: 1px solid var(--gold-soft);
     margin: -8px;

 }

 .flip-card {
     background-color: transparent;
     width: 100%;
     height: 100%;
     perspective: 1000px;
     font-family: var(--serif);
 }

 .title {
     font-size: 1.5em;
     font-weight: 900;
     text-align: center;
     margin: 0;
 }

 .flip-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     transition: transform 0.8s;
     transform-style: preserve-3d;
 }

 .flip {
     padding-left: 8%;
 }

 .flip-card:hover .flip-card-inner {
     transform: rotateY(180deg);
 }

 .flip-card-front,
 .flip-card-back {
     box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2);
     position: absolute;
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 100%;
     height: 100%;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
 }

 .portrait-video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: grayscale(1) contrast(1.1);
     display: block;
 }

 #sound-on {
     margin-top: 15px;
     opacity: 0.3;

 }

 #sound-on:hover {
     opacity: 1;
 }

 .flip-card-back {
     background: radial-gradient(circle at 20% 20%,
             rgba(30, 75, 150, 0.28) 0%,
             transparent 40%),
         radial-gradient(circle at 80% 80%,
             rgba(20, 50, 110, 0.22) 0%,
             transparent 45%),
         linear-gradient(135deg,
             #020617 0%,
             #07142B 45%,
             #0B1F3A 100%);
     color: white;
     transform: rotateY(180deg);
 }


 .about-story p {
     color: var(--text-2);
     line-height: 2;
     margin-bottom: 22px;
     font-weight: 300;
     font-size: 15.5px;
 }

 .about-story strong {
     color: var(--text);
     font-weight: 500;
 }

 .mini-timeline {
     margin-top: 40px;
     border-left: 1px solid var(--border);
     padding-left: 26px;
     display: flex;
     flex-direction: column;
     gap: 22px;
 }

 .mini-timeline div {
     position: relative;
 }

 .mini-timeline div::before {
     content: '';
     position: absolute;
     left: -31px;
     top: 5px;
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--gold);
 }

 .mini-timeline .yr {
     font-family: var(--mono);
     font-size: 11px;
     color: var(--gold);
     letter-spacing: .1em;
 }

 .mini-timeline .desc {
     font-size: 14px;
     color: var(--text-2);
     margin-top: 2px;
 }

 /* ================================================ */
 #more-text {
     display: none;
 }

 /* Style the button */
 #toggle-btn {
     background: none;
     border: none;
     color: var(--gold-soft);
     cursor: pointer;
     font-size: 1rem;
     font-weight: bold;
     padding: 0;
 }

 #toggle-btn:hover {
     text-decoration: underline;
     color: var(--gold);
 }


 /* ============ SKILLS ============ */
 /* ============ TECH ORBIT ============ */
 .tech-orbit {
     position: absolute;
     top: -100px;
     right: -90px;
     /* ← you said you'll adjust this, this is just a starting point */
     width: 420px;
     height: 420px;
     z-index: 1;
     pointer-events: auto;
 }

 .tech-orbit__ring {
     position: relative;
     inset: 0;
     border: 1px solid var(--border-strong);
     border-radius: 50%;
     background: radial-gradient(circle, rgba(212, 175, 55, .04), transparent 70%);
 }

 .tech-orbit__ring::before {
     content: '';
     position: absolute;
     inset: 30px;
     border: 1px dashed var(--gold-soft);
     border-radius: 50%;
 }

 .tech-orbit__track {
     position: absolute;
     inset: 0;
     animation: orbitSpin 28s linear infinite;
 }

 .tech-orbit:hover .tech-orbit__track {
     animation-play-state: paused;
 }

 .tech-orbit:hover .tech-orbit__spin {
     animation-play-state: paused;
 }

 .tech-orbit__item {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
 }

 .tech-orbit__fix {
     position: absolute;
     top: 0;
     left: 0;
 }

 .tech-orbit__spin {
     animation: orbitCounter 28s linear infinite;
 }

 .tech-orbit__icon {
     top: -100px;
     right: -100px;
     margin: -35px;
     padding: 3px;
     border-radius: 50%;
     background: var(--card);
     border: 1.5px solid var(--gold);
     box-shadow: 0 10px 24px -10px rgba(212, 175, 55, .4);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: row;
     transition: border-color .3s, transform .3s;
 }

 .tech-orbit__icon:hover {
     border: 1px solid var(--gold-soft);
     transform: translateY(-4px);
     transform: scale(1.12);
 }

 .tech-orbit__icon img {
     width: 50px;
     height: 50px;
     object-fit: contain;
 }

 .tech-orbit__center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-family: var(--mono);
     font-size: 9px;
     letter-spacing: .15em;
     color: var(--text-3);
     text-transform: uppercase;
     text-align: center;
     width: 200px;
     pointer-events: none;
 }

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

     to {
         transform: rotate(360deg);
     }
 }

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

     to {
         transform: rotate(-360deg);
     }
 }

 .tech-txt {
     position: absolute;
     right: 3vh;
     top: 12vh;
     font-family: var(--mono);
     font-size: 15px;
     letter-spacing: .28em;
     text-transform: uppercase;
     color: var(--gold-soft);
 }

 @media (prefers-reduced-motion: reduce) {

     .tech-orbit__track,
     .tech-orbit__spin {
         animation: none;
     }
 }

 @media (max-width:768px) {

     .tech-orbit,
     .tech-txt {
         display: none;
     }


 }

 /* ================================================================================================================================= */

 #skills {
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
     overflow: hidden;
 }

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

 @media (max-width:900px) {
     .skills-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width:560px) {
     .skills-grid {
         grid-template-columns: 1fr;
     }
 }

 .skill-card {
     background: var(--bg-2);
     padding: 36px 28px;
     transition: background .4s var(--ease);
 }

 .skill-card:hover {
     background: var(--card);
 }

 .skill-card h4 {
     font-family: var(--serif);
     font-weight: 500;
     font-size: 19px;
     margin-bottom: 18px;
     color: var(--text);
 }

 .skill-card ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .skill-card li {
     font-size: 13.5px;
     color: var(--text-2);
     display: flex;
     align-items: center;
     gap: 10px;
     transition: color .3s, transform .3s;
 }

 .skill-card li::before {
     content: '';
     width: 4px;
     height: 4px;
     border-radius: 50%;
     background: var(--gold);
     opacity: .6;
     flex-shrink: 0;
 }

 .skill-card li:hover {
     color: var(--text);
     transform: translateX(3px);
 }

 /* ============ TECH STACK ============ */
 .tech-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
 }

 .tech-chip {
     border: 1px solid var(--border);
     padding: 12px 20px;
     border-radius: 30px;
     font-size: 13px;
     letter-spacing: .02em;
     color: var(--text-2);
     font-family: var(--mono);
     transition: all .35s var(--ease);
     cursor: none;
 }

 @media (pointer:coarse) {
     .tech-chip {
         cursor: default;
     }
 }

 .tech-chip:hover {
     border-color: var(--gold);
     color: var(--gold);
     transform: translateY(-4px);
     box-shadow: 0 10px 24px -10px rgba(212, 175, 55, .4);
 }

 @media (min-width:768px) {

     .tech-eye,
     .tech-grid {
         display: none;
     }
 }

 /* ============ PROJECTS ============ */
 .project-card {
     border: 1px solid var(--border);
     background: var(--bg-2);
     margin-bottom: 26px;
     overflow: hidden;
     transition: border-color .4s var(--ease);
 }

 .project-card:hover {
     border-color: var(--border-strong);
 }

 .project-top {
     display: grid;
     grid-template-columns: .9fr 1.1fr;
 }

 @media (max-width:820px) {
     .project-top {
         grid-template-columns: 1fr;
     }
 }

 .project-media {
     aspect-ratio: 13/11;
     background: linear-gradient(135deg, #111, #050505);
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     border-right: 1px solid var(--border);
 }

 .project-media img {
     width: 100%;
     height: 100%;
     object-fit: fill;
 }

 @media (max-width:820px) {
     .project-media {
         border-right: none;
         border-bottom: 1px solid var(--border);
     }
 }

 .project-media::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(120deg, transparent 40%, rgba(212, 175, 55, 0.155) 50%, transparent 60%);
     background-size: 220% 220%;
     background-position: 0 0;
     transition: background-position 1.1s var(--ease);
 }

 .project-card:hover .project-media::after {
     background-position: 100% 100%;
 }

 .project-body {
     padding: 40px;
     display: flex;
     flex-direction: column;
 }

 .project-body h3 {
     font-family: var(--serif);
     font-size: 26px;
     font-weight: 500;
     margin-bottom: 10px;
 }

 .project-tag {
     font-family: var(--mono);
     font-size: 10.5px;
     color: var(--gold);
     letter-spacing: .2em;
     text-transform: uppercase;
     margin-bottom: 14px;
 }

 .project-body p {
     color: var(--text-2);
     font-size: 14.5px;
     line-height: 1.85;
     font-weight: 300;
 }

 .project-stack {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin: 20px 0;
 }

 .project-stack span {
     font-family: var(--mono);
     font-size: 10.5px;
     color: var(--text-3);
     border: 1px solid var(--border);
     padding: 4px 10px;
     border-radius: 20px;
 }

 .project-links {
     display: flex;
     gap: 26px;
     margin-top: auto;
     padding-top: 14px;
 }

 .project-links a {
     font-size: 12.5px;
     letter-spacing: .05em;
     color: var(--text);
     border-bottom: 1px solid var(--gold-soft);
     padding-bottom: 2px;
     transition: border-color .3s, color .3s;
 }

 .project-links a:hover {
     color: var(--gold);
     border-color: var(--gold);
 }

 .project-more-toggle {
     font-family: var(--mono);
     font-size: 11px;
     letter-spacing: .15em;
     color: var(--text-3);
     text-transform: uppercase;
     margin-top: 18px;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 .project-more-toggle:hover {
     color: var(--gold);
 }

 .project-more-toggle svg {
     width: 10px;
     height: 10px;
     transition: transform .3s var(--ease);
 }

 .project-card.expanded .project-more-toggle svg {
     transform: rotate(180deg);
 }

 .project-detail {
     max-height: 0;
     overflow: hidden;
     transition: max-height .5s var(--ease);
     border-top: 1px solid var(--border);
 }

 .project-card.expanded .project-detail {
     max-height: 600px;
 }

 .project-detail-inner {
     padding: 34px 40px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 34px;
 }

 @media (max-width:640px) {
     .project-detail-inner {
         grid-template-columns: 1fr;
     }
 }

 .project-detail-inner h5 {
     font-family: var(--mono);
     font-size: 11px;
     letter-spacing: .2em;
     color: var(--gold);
     text-transform: uppercase;
     margin-bottom: 10px;
 }

 .project-detail-inner p {
     font-size: 13.5px;
     color: var(--text-2);
     line-height: 1.8;
 }

 /* ============ TIMELINE ============ */
 /* ============ JOURNEY — BLUEPRINT ASCENT ============ */
 .journey-graph {
     position: relative;
     padding: 20px 0 60px;
 }

 .journey-svg {
     width: 100%;
     height: auto;
     display: block;
     overflow: visible;
 }

 .jg-grid line {
     stroke: var(--border);
     stroke-width: 1;
 }

 .jg-path {
     fill: none;
     stroke: var(--gold);
     stroke-width: 2;
     stroke-linecap: round;
     stroke-dasharray: 1900;
     stroke-dashoffset: 1900;
     transition: stroke-dashoffset 2.2s var(--ease);
 }

 .journey-graph.in .jg-path {
     stroke-dashoffset: 0;
 }

 .jg-nodes circle {
     fill: var(--bg-2);
     stroke: var(--gold);
     stroke-width: 2;
     opacity: 0;
     transition: opacity .6s var(--ease);
 }

 .journey-graph.in .jg-nodes circle {
     opacity: 1;
     transition-delay: 1.8s;
 }

 .jg-point {
     position: absolute;
     transform: translate(-50%, -100%);
     width: 230px;
     opacity: 0;
     transition: opacity .8s var(--ease), transform .8s var(--ease);
 }

 .jg-point-alt {
     transform: translate(-50%, 40px);
 }

 .journey-graph.in .jg-point {
     opacity: 1;
     transform: translate(-50%, calc(-100% - 26px));
 }

 .journey-graph.in .jg-point-alt {
     opacity: 1;
     transform: translate(-50%, 66px);
 }

 .jg-point:nth-of-type(1) {
     transition-delay: .3s;
 }

 .jg-point:nth-of-type(2) {
     transition-delay: .55s;
 }

 .jg-point:nth-of-type(3) {
     transition-delay: .8s;
 }

 .jg-point:nth-of-type(4) {
     transition-delay: 1.05s;
 }

 .jg-point:nth-of-type(5) {
     transition-delay: 1.3s;
 }

 .jg-point:nth-of-type(6) {
     transition-delay: 1.55s;
 }

 .jg-point:nth-of-type(7) {
     transition-delay: 1.8s;
 }


 .jg-leader {
     position: absolute;
     left: 50%;
     width: 1px;
     background: var(--border-strong);
 }

 .jg-leader-down {
     top: 100%;
     height: 26px;
 }

 .jg-leader-up {
     bottom: 100%;
     height: 40px;
 }

 .jg-card {
     border: 1px solid var(--border);
     background: var(--card);
     padding: 18px 20px;
     transition: border-color .3s;
 }

 .jg-card:hover {
     border-color: var(--gold-soft);
 }

 .jg-tag {
     font-family: var(--mono);
     font-size: 10px;
     letter-spacing: .2em;
     color: var(--gold);
     margin-bottom: 8px;
 }

 .jg-card h4 {
     font-family: var(--serif);
     font-size: 16.5px;
     font-weight: 500;
     margin-bottom: 6px;
 }

 .jg-card p {
     font-size: 12.5px;
     color: var(--text-2);
     line-height: 1.65;
 }

 @media (max-width:900px) {
     .journey-graph {
         padding-bottom: 0;
     }

     .jg-point,
     .jg-point-alt {
         position: static;
         transform: none !important;
         opacity: 1;
         width: 100%;
         margin-bottom: 20px;
     }

     .jg-leader {
         display: none;
     }

     .journey-svg {
         display: none;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .jg-path {
         stroke-dashoffset: 0;
         transition: none;
     }

     .jg-nodes circle {
         opacity: 1;
     }

     .jg-point,
     .jg-point-alt {
         opacity: 1;
         transform: none;
     }
 }

 /* ============ QUOTES ============ */


 #quotes {
     text-align: center;
 }

 .quote {
     margin-top: 70px;
 }

 .quote-box {
     max-width: 720px;
     margin: 0 auto;
     min-height: 130px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .quote-text {
     font-family: var(--serif);
     font-style: italic;
     font-size: clamp(20px, 2.6vw, 30px);
     color: var(--text);
     line-height: 1.6;
     opacity: 0;
     transition: opacity 1s var(--ease);
 }

 .quote-text.show {
     opacity: 1;
 }

 /* ============ ACHIEVEMENTS ============ */


 .container {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 10%;
 }

 .container .glass {
     overflow: hidden;
     position: relative;
     width: 400px;
     height: 300px;
     background: linear-gradient(#fff2, transparent);
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
     display: flex;
     justify-content: center;
     align-items: center;
     transition: 0.5s;
     border-radius: 10px;
     margin: 0 -100px;
     backdrop-filter: blur(10px);
     transform: rotate(calc(var(--r) * 1deg));
 }

 .container:hover .glass {
     transform: rotate(0deg);
     margin: 0 10px;
 }

 .container .glass::before {
     content: attr(data-text);
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 40px;
     background: rgba(0, 0, 0, 0.609);
     display: flex;
     justify-content: center;
     text-align: center;
     align-items: center;
     color: #fff;

 }

 .container .glass img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .certi {
     margin-left: 20%;
 }

 @media (max-width: 900px) {
     .container {
         flex-direction: column;
         gap: 1.25rem;
     }

     .container .glass {
         width: min(500vw, 600px);
         height: min(400vw, 450px);
         margin: 0;
         transform: none;
     }

     .container:hover .glass {
         margin: 0;
     }
 }

 @media (max-width: 480px) {
     .container {
         flex-direction: column;
         gap: 1.25rem;
     }

     .container .glass {
         width: min(70vw, 220px);
         height: min(60vw, 190px);
         margin: 0;
         transform: none;
     }

     .container:hover .glass {
         margin: 0;
     }
 }


 /* ============ RESUME ============ */
 .resume-box {
     display: flex;
     gap: 60px;
     align-items: center;
 }

 @media (max-width:800px) {
     .resume-box {
         flex-direction: column;
     }
 }

 .resume-paper {
     width: 280px;
     aspect-ratio: 8.5/11;
     background: linear-gradient(160deg, #f8f6f0, #e9e6dc);
     color: #111;
     padding: 26px;
     font-family: var(--sans);
     flex-shrink: 0;
     box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
     transform: rotate(-10deg);
     transition: transform .5s var(--ease);
 }

 .resume-box:hover .resume-paper {
     transform: rotate(0deg);
 }

 .resume-paper h5 {
     font-family: var(--serif);
     font-size: 15px;
     border-bottom: 1px solid #ccc;
     padding-bottom: 8px;
     margin-bottom: 10px;
 }

 .resume-paper .ln {
     height: 5px;
     background: #d8d5cb;
     border-radius: 2px;
     margin-bottom: 8px;
 }

 .resume-paper .ln.short {
     width: 60%;
 }

 .resume-text p {
     color: var(--text-2);
     font-size: 14.5px;
     line-height: 1.9;
     margin-bottom: 26px;
     max-width: 420px;
 }


 .resume-button {
     padding: 0;
     position: relative;
     top: 80%;
     left: 40%;
     transform: translate(-50%, -50%);
     margin: 10%;
     margin-top: 20%;
     display: contents;
 }

 .bb {
     background: #222;
     display: block;
     height: 40px;
     width: 168px;
     margin: -50px 0 0 10px;
     text-align: center;
     font: 12px/45px Helvetica, Verdana, sans-serif;
     color: #fff;
     position: absolute;
     z-index: -1;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
     box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     -ms-transition: all 0.5s ease;
     transition: all 0.5s ease;
 }

 .bb {
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
     -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
     box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
 }

 .resume-button:hover .top {
     margin: -80px 0 0 10px;
     line-height: 35px;
 }

 .resume-button:hover .bottom {
     margin: -10px 0 0 10px;
 }

 .resume-button:active .bottom {
     margin: -20px 0 0 10px;
 }

 .resume-button:active .top {
     margin: -70px 0 0 10px;
 }

 /* ============ GALLERY ============ */

 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px;
 }

 .gallery-item {
     aspect-ratio: 1 / 1;
     background: var(--bg-2);
     border: 2px solid var(--border);
     position: relative;
     overflow: hidden;
     transition: border-color 0.2s;
 }

 .gallery-item img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: contain;
     transition: transform 0.6s var(--ease);
 }

 .gallery-item:hover {
     border-color: var(--gold);
 }

 .gallery-item:hover img {
     transform: scale(1.05);
 }

 .gallery-item span {
     position: absolute;
     bottom: 12px;
     left: 12px;
     right: 12px;

     z-index: 2;

     font-family: var(--mono);
     font-size: clamp(0.65rem, 1vw, 0.95rem);
     letter-spacing: 0.05em;
     color: var(--text);

     text-transform: uppercase;

     padding: 10px 12px;

     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);

     background: rgba(0, 0, 0, 0.25);
 }


 @media (max-width: 768px) {
     .gallery-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 12px;
     }

     .gallery-item span {
         bottom: 8px;
         left: 8px;
         right: 8px;
         padding: 8px 10px;
     }
 }


 @media (max-width: 480px) {
     .gallery-grid {
         grid-template-columns: 1fr;
         gap: 12px;
     }

     .gallery-item {
         aspect-ratio: 4 / 3;
     }

     .gallery-item span {
         font-size: 0.7rem;
         bottom: 10px;
         left: 10px;
         right: 10px;
     }
 }

 /* ============ TERMINAL ============ */
 .terminal {
     border: 1px solid var(--border-strong);
     background: #0a0a0a;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7);
 }

 .terminal-bar {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 12px 16px;
     border-bottom: 1px solid var(--border);
     background: #0e0e0e;
 }

 .terminal-bar .dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
 }

 .terminal-bar .dot:nth-child(1) {
     background: #ff5f56;
 }

 .terminal-bar .dot:nth-child(2) {
     background: #ffbd2e;
 }

 .terminal-bar .dot:nth-child(3) {
     background: #27c93f;
 }

 .terminal-bar span {
     margin-left: 14px;
     font-family: var(--mono);
     font-size: 11.5px;
     color: var(--text-3);
 }

 .terminal-body {
     padding: 24px;
     font-family: var(--mono);
     font-size: 13.5px;
     height: 340px;
     overflow-y: auto;
 }

 .terminal-body .line {
     margin-bottom: 8px;
     color: var(--text-2);
     line-height: 1.7;
     white-space: pre-wrap;
 }

 .terminal-body .prompt-line {
     display: flex;
     gap: 8px;
     color: var(--gold);
 }

 .terminal-input-row {
     display: flex;
     gap: 8px;
     align-items: center;
 }

 .terminal-input-row span {
     color: var(--gold);
 }

 #term-input {
     background: transparent;
     border: none;
     color: var(--text);
     font-family: var(--mono);
     font-size: 13.5px;
     flex: 1;
 }



 /* ============ CONTACT ============ */
 .contact-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 70px;
 }

 @media (max-width:800px) {
     .contact-grid {
         grid-template-columns: 1fr;
         gap: 50px;
     }
 }

 .field {
     margin-bottom: 22px;
 }

 .field label {
     display: block;
     font-family: var(--mono);
     font-size: 10.5px;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: var(--text-3);
     margin-bottom: 10px;
 }

 .field input,
 .field textarea {
     width: 100%;
     background: var(--bg-2);
     border: 1px solid var(--border);
     border-radius: 6px;
     padding: 14px 16px;
     color: var(--text);
     font-family: var(--sans);
     font-size: 14px;
     transition: border-color .35s, box-shadow .35s;
 }

 .field textarea {
     min-height: 120px;
     resize: vertical;
 }

 .field input:focus,
 .field textarea:focus {
     border-color: var(--gold);
     box-shadow: 0 0 0 3px rgba(212, 175, 55, .1);
     outline: none;
 }

 .contact-info {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .contact-row {
     display: flex;
     justify-content: space-between;
     padding: 16px 0;
     border-bottom: 1px solid var(--border);
 }

 .contact-row .k {
     font-family: var(--mono);
     font-size: 11px;
     color: var(--text-3);
     letter-spacing: .1em;
     text-transform: uppercase;
 }

 .contact-row .v {
     font-size: 14px;
     color: var(--text);
     transition: color .3s;
 }

 .contact-row a.v:hover {
     color: var(--gold);
 }

 .form-status {
     font-family: var(--mono);
     font-size: 12px;
     color: var(--gold);
     min-height: 18px;
     margin-top: 12px;
 }

 .button {
     --primary: #ff5569;
     --neutral-1: #2e2e2e;
     --neutral-2: #1a1a1a;
     --radius: 14px;
     cursor: pointer;
     border-radius: var(--radius);
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
     border: none;
     box-shadow: 0 0.5px 0.5px 1px rgba(0, 0, 0, 0.2),
         0 10px 20px rgba(0, 0, 0, 0.2), 0 4px 5px 0px rgba(0, 0, 0, 0.05);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     transition: all 0.3s ease;
     min-width: 200px;
     padding: 20px;
     height: 50px;
     font-family: "Galano Grotesque", Poppins, Montserrat, sans-serif;
     font-style: normal;
     font-size: 18px;
     font-weight: 600;
     color: #ffffff;
     background: var(--neutral-1);
 }

 .button:hover {
     transform: scale(1.02);
     box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
         0 15px 30px rgba(0, 0, 0, 0.3), 0 10px 3px -3px rgba(0, 0, 0, 0.04);
 }

 .button:active {
     transform: scale(1);
     box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
         0 10px 3px -3px rgba(0, 0, 0, 0.2);
 }

 .button:after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: var(--radius);
     border: 2.5px solid transparent;
     background: linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box,
         linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45)) border-box;
     z-index: 0;
     transition: all 0.4s ease;
 }

 .button:hover::after {
     transform: scale(1.05, 1.1);
     box-shadow: inset 0 -1px 3px 0 rgba(50, 50, 50, 1);
     /* Adjusted shine colour to a darker tone */
 }

 .button::before {
     content: "";
     inset: 7px 6px 6px 6px;
     position: absolute;
     background: linear-gradient(to top, var(--neutral-1), var(--neutral-2));
     border-radius: 30px;
     filter: blur(0.5px);
     z-index: 2;
 }

 .state p {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .state .icon {
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     margin: auto;
     transform: scale(1.25);
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .state .icon svg {
     overflow: visible;
 }

 /* Outline */
 .outline {
     position: absolute;
     border-radius: inherit;
     overflow: hidden;
     z-index: 1;
     opacity: 0;
     transition: opacity 0.4s ease;
     inset: -2px -3.5px;
 }

 .outline::before {
     content: "";
     position: absolute;
     inset: -100%;
     background: conic-gradient(from 180deg,
             transparent 60%,
             rgb(22, 22, 22) 80%,
             transparent 100%);
     animation: spin 2s linear infinite;
     animation-play-state: paused;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .button:hover .outline {
     opacity: 1;
 }

 .button:hover .outline::before {
     animation-play-state: running;
 }

 /* Letters */
 .state p span {
     display: block;
     opacity: 0;
     animation: slideDown 0.8s ease forwards calc(var(--i) * 0.03s);
 }

 .button:hover p span {
     opacity: 1;
     animation: wave 0.5s ease forwards calc(var(--i) * 0.02s);
 }

 .button:focus p span {
     opacity: 1;
     animation: disapear 0.6s ease forwards calc(var(--i) * 0.03s);
 }

 @keyframes wave {
     30% {
         opacity: 1;
         transform: translateY(4px) translateX(0) rotate(0);
     }

     50% {
         opacity: 1;
         transform: translateY(-3px) translateX(0) rotate(0);
         color: var(--primary);
     }

     100% {
         opacity: 1;
         transform: translateY(0) translateX(0) rotate(0);
     }
 }

 @keyframes slideDown {
     0% {
         opacity: 0;
         transform: translateY(-20px) translateX(5px) rotate(-90deg);
         color: var(--primary);
         filter: blur(5px);
     }

     30% {
         opacity: 1;
         transform: translateY(4px) translateX(0) rotate(0);
         filter: blur(0);
     }

     50% {
         opacity: 1;
         transform: translateY(-3px) translateX(0) rotate(0);
     }

     100% {
         opacity: 1;
         transform: translateY(0) translateX(0) rotate(0);
     }
 }

 @keyframes disapear {
     from {
         opacity: 1;
     }

     to {
         opacity: 0;
         transform: translateX(5px) translateY(20px);
         color: var(--primary);
         filter: blur(5px);
     }
 }

 /* Plane */
 .state--default .icon svg {
     animation: land 0.6s ease forwards;
 }

 .button:hover .state--default .icon {
     transform: rotate(45deg) scale(1.25);
 }

 .button:focus .state--default svg {
     animation: takeOff 0.8s linear forwards;
 }

 .button:focus .state--default .icon {
     transform: rotate(0) scale(1.25);
 }

 @keyframes takeOff {
     0% {
         opacity: 1;
     }

     60% {
         opacity: 1;
         transform: translateX(70px) rotate(45deg) scale(2);
     }

     100% {
         opacity: 0;
         transform: translateX(160px) rotate(45deg) scale(0);
     }
 }

 @keyframes land {
     0% {
         transform: translateX(-60px) translateY(30px) rotate(-50deg) scale(2);
         opacity: 0;
         filter: blur(3px);
     }

     100% {
         transform: translateX(0) translateY(0) rotate(0);
         opacity: 1;
         filter: blur(0);
     }
 }

 /* Contrail */
 .state--default .icon:before {
     content: "";
     position: absolute;
     top: 50%;
     height: 2px;
     width: 0;
     left: -5px;
     background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5));
 }

 .button:focus .state--default .icon:before {
     animation: contrail 0.8s linear forwards;
 }

 @keyframes contrail {
     0% {
         width: 0;
         opacity: 1;
     }

     8% {
         width: 15px;
     }

     60% {
         opacity: 0.7;
         width: 80px;
     }

     100% {
         opacity: 0;
         width: 160px;
     }
 }

 /* States */
 .state {
     padding-left: 29px;
     z-index: 2;
     display: flex;
     position: relative;
 }

 .state--default span:nth-child(4) {
     margin-right: 5px;
 }

 .state--sent {
     display: none;
 }

 .state--sent svg {
     transform: scale(1.25);
     margin-right: 8px;
 }

 .button:focus .state--default {
     position: absolute;
 }

 .button:focus .state--sent {
     display: flex;
 }

 .button:focus .state--sent span {
     opacity: 0;
     animation: slideDown 0.8s ease forwards calc(var(--i) * 0.2s);
 }

 .button:focus .state--sent .icon svg {
     opacity: 0;
     animation: appear 1.2s ease forwards 0.8s;
 }

 @keyframes appear {
     0% {
         opacity: 0;
         transform: scale(4) rotate(-40deg);
         color: var(--primary);
         filter: blur(4px);
     }

     30% {
         opacity: 1;
         transform: scale(0.6);
         filter: blur(1px);
     }

     50% {
         opacity: 1;
         transform: scale(1.2);
         filter: blur(0);
     }

     100% {
         opacity: 1;
         transform: scale(1);
     }
 }


 /* ============ CONTACT OUTRO VIDEO ============ */
 .contact-video-wrap {
     width: 200px;
     height: 200px;
     overflow: hidden;
     position: relative;
     mix-blend-mode: screen;
     -webkit-mask-image: radial-gradient(ellipse at center, black 100%, transparent 100%);
     mask-image: radial-gradient(ellipse at center, black 100%, transparent 100%);
 }

 .contact-video {
     width: 200px;
     height: 250px;
     object-fit: fill;
     filter: grayscale(1) brightness(1) contrast(3.1);
     display: block;
     mix-blend-mode: screen;
     -webkit-mask-image: radial-gradient(ellipse at center, black 100%, transparent 100%);
     mask-image: radial-gradient(ellipse at center, black 100%, transparent 100%);
 }

 .contact-video-wrap::after {
     height: 100%;
     width: 100%;
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, transparent 100%, rgba(5, 5, 5, .7) 100%);
     pointer-events: none;
 }

 /* Responsive adjustments */
 @media (max-width:900px) {
     .contact-video-wrap {
         height: 100px;
         width: 80px;
     }

     .contact-video {
         height: 100px;
         width: 80px;
     }
 }

 @media (max-width:640px) {
     .contact-video-wrap {
         height: 100px;
         width: 80px;
     }

     .contact-video {
         height: 100px;
         width: 80px;
     }
 }


 /* ============ FOOTER ============ */
 footer {
     padding: 50px 0;
     border-top: 1px solid var(--border);
     background-color: #000;
 }

 .footer-inner {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 16px;
 }

 .footer-inner p {
     font-size: 12.5px;
     color: var(--text-3);
     letter-spacing: .02em;
     z-index: 999;
 }

 .footer-inner strong {
     color: var(--text-2);
     font-weight: 400;
 }

 .footer-social {
     display: flex;
     gap: 22px;
     z-index: 999;
 }

 .footer-social a {
     font-family: var(--mono);
     font-size: 11px;
     color: var(--text-3);
     transition: color .3s;
 }

 .footer-social a:hover {
     color: var(--gold);
 }

 @media (max-width:900px) {
     .footer-inner {
         flex-direction: column;
     }
 }

 /* <!-- =====Easter Egg==== --> */

 .easter-egg {
     position: fixed;
     bottom: 50px;
     right: 30px;
     margin-left: auto;

     padding: 40px 40px;
     border: 1px solid rgba(90, 149, 243, 0.3);
     border-radius: 14px;

     background: rgba(2, 6, 23, 0.9);
     backdrop-filter: blur(15px);

     color: white;

     opacity: 0;
     transform: translateY(15px);
     pointer-events: none;

     transition: 0.3s ease;

     z-index: 9999;
 }

 .easter-egg.show {
     opacity: 1;
     transform: translateY(0);
 }

 .easter-egg span {
     display: block;
     font-size: 15px;
     font-weight: 600;
 }

 .easter-egg small {
     display: block;
     margin-top: 5px;
     color: #94a3b8;
 }