/* ===== GLOBAL RESET & VARIABLES ===== */
         *,
         *::before,
         *::after {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
         }

         :root {
           --bg: #000;
           --bg1: #080808;
           --bg2: #0d0d0d;
           --bg3: #111;
           --card: #141414;
           --border: #1e1e1e;
           --border2: #2a2a2a;
           --text1: #f5f5f5;
           --text2: #8a8a8a;
           --text3: #444;
           --accent: #e8e8e8;
           --hl: #fff;
           --font: "Outfit", sans-serif;
           --mono: "JetBrains Mono", monospace;
           --sg: "Space Grotesk", sans-serif;
           --card-hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
           --btn-hover-transform: translateY(-2px);
         }

         :root.light {
           --bg: #f8f9fa;
           --bg1: #ffffff;
           --bg2: #f1f3f5;
           --bg3: #e9ecef;
           --card: #ffffff;
           --border: #dee2e6;
           --border2: #ced4da;
           --text1: #212529;
           --text2: #495057;
           --text3: #6c757d;
           --accent: #e8e8e8;
           --hl: #000000;
           --card-hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
         }

         body,
         body * {
           transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
         }

         html {
           scroll-behavior: smooth;
         }

         body {
           background: var(--bg);
           color: var(--text1);
           font-family: var(--font);
           font-size: 15px;
           line-height: 1.65;
           overflow-x: hidden;
         }

         ::-webkit-scrollbar {
           width: 3px;
         }
         ::-webkit-scrollbar-track {
           background: var(--bg);
         }
         ::-webkit-scrollbar-thumb {
           background: var(--border2);
         }

         .wrap {
           max-width: 1080px;
           margin: 0 auto;
           padding: 0 36px;
         }
         @media(max-width:640px) {
           .wrap {
             padding: 0 20px;
           }
         }

         /* ===== NAV ===== */
         nav {
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           z-index: 200;
           padding: 16px 0;
           border-bottom: 1px solid transparent;
           transition: background .35s, border-color .35s, backdrop-filter .35s;
         }
         nav.scrolled {
           background: rgba(0, 0, 0, .9);
           backdrop-filter: blur(20px);
           border-color: var(--border);
         }
         .light nav.scrolled {
           background: rgba(255, 255, 255, .95);
           backdrop-filter: blur(20px);
           border-color: var(--border);
         }
         .nav-inner {
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 16px;
         }
         .logo {
           font-family: var(--mono);
           font-size: 14px;
           font-weight: 500;
           color: var(--text1);
           text-decoration: none;
           letter-spacing: .05em;
         }
         .logo span {
           color: var(--text3);
         }
         .nav-menu {
           display: flex;
           align-items: center;
           gap: 2px;
         }
         .nav-menu a {
           font-size: 13px;
           font-weight: 500;
           color: var(--text2);
           text-decoration: none;
           padding: 7px 13px;
           border-radius: 7px;
           transition: color .15s, background .15s;
           letter-spacing: .01em;
         }
         .nav-menu a:hover {
           color: var(--text1);
           background: rgba(255, 255, 255, .05);
         }
         .light .nav-menu a:hover {
           background: rgba(0, 0, 0, .04);
         }
         .nav-cta {
           font-size: 13px;
           font-weight: 600;
           padding: 8px 18px;
           border-radius: 8px;
           text-decoration: none;
           transition: opacity .15s, transform .15s;
           letter-spacing: .01em;
           background: var(--hl);
           color: #000;
         }
         .light .nav-cta {
           background: var(--hl);
           color: #fff;
         }
         .nav-cta:hover {
           opacity: .85;
           transform: translateY(-1px);
         }

         .btn-white {
           display: inline-flex;
           align-items: center;
           gap: 7px;
           padding: 10px 22px;
           border-radius: 8px;
           background: var(--hl);
           color: #000;
           font-size: 13px;
           font-weight: 600;
           text-decoration: none;
           transition: opacity 0.15s, transform 0.15s;
           letter-spacing: 0.01em;
           border: none;
           cursor: pointer;
         }
         .btn-white:hover {
           opacity: 0.85;
           transform: translateY(-1px);
         }
         .light .btn-white {
           background: var(--hl);
           color: #ffffff;
         }
         .light .btn-white svg {
           stroke: #ffffff;
         }

         .btn-ghost {
           display: inline-flex;
           align-items: center;
           gap: 7px;
           padding: 9px 22px;
           border-radius: 8px;
           border: 1px solid var(--border2);
           background: transparent;
           color: var(--text1);
           font-size: 13px;
           font-weight: 500;
           text-decoration: none;
           transition: border-color .15s, background .15s;
         }
         .btn-ghost:hover {
           border-color: var(--text2);
           background: rgba(255, 255, 255, .04);
         }
         .light .btn-ghost:hover {
           background: rgba(0, 0, 0, .04);
         }

         .nav-toggle {
           display: none;
           width: 36px;
           height: 36px;
           background: rgba(255, 255, 255, .06);
           border: 1px solid var(--border2);
           border-radius: 8px;
           cursor: pointer;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           gap: 5px;
           flex-shrink: 0;
         }
         .nav-toggle span {
           display: block;
           width: 16px;
           height: 1.5px;
           background: var(--text1);
           border-radius: 2px;
           transition: transform .3s, opacity .3s;
           transform-origin: center;
         }
         .nav-toggle.active span:nth-child(1) {
           transform: translateY(6.5px) rotate(45deg);
         }
         .nav-toggle.active span:nth-child(2) {
           opacity: 0;
           transform: scaleX(0);
         }
         .nav-toggle.active span:nth-child(3) {
           transform: translateY(-6.5px) rotate(-45deg);
         }

         .mobile-drawer {
           display: none;
           position: fixed;
           top: 57px;
           left: 0;
           right: 0;
           bottom: 0;
           background: rgba(0, 0, 0, .97);
           backdrop-filter: blur(24px);
           z-index: 199;
           flex-direction: column;
           padding: 32px 20px 40px;
           gap: 4px;
           border-top: 1px solid var(--border);
           overflow-y: auto;
         }
         .light .mobile-drawer {
           background: rgba(255, 255, 255, .97);
         }
         .mobile-drawer.open {
           display: flex;
         }
         .mobile-drawer a {
           font-size: 18px;
           font-weight: 600;
           color: var(--text2);
           text-decoration: none;
           padding: 14px 16px;
           border-radius: 10px;
           transition: color .15s, background .15s;
           border: 1px solid transparent;
         }
         .mobile-drawer a:hover {
           color: var(--text1);
           background: rgba(255, 255, 255, .04);
           border-color: var(--border2);
         }
         .light .mobile-drawer a:hover {
           background: rgba(0, 0, 0, .04);
         }
         .mobile-drawer .m-cta {
           margin-top: 16px;
           font-size: 16px;
           font-weight: 700;
           color: #000;
           background: var(--hl);
           padding: 15px;
           border-radius: 10px;
           text-align: center;
           border: 1px solid var(--hl);
         }
         .light .mobile-drawer .m-cta {
           color: #fff;
           background: var(--hl);
         }
         .mobile-drawer .m-cta:hover {
           opacity: .85;
         }

         @media(max-width:760px) {
           .nav-menu {
             display: none;
           }
           .nav-toggle {
             display: flex;
           }
         }

         .theme-toggle {
           width: 36px;
           height: 36px;
           background: rgba(255, 255, 255, 0.06);
           border: 1px solid var(--border2);
           border-radius: 8px;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           color: var(--text2);
           transition: all 0.2s ease;
           flex-shrink: 0;
         }
         .theme-toggle:hover {
           color: var(--text1);
           border-color: var(--border2);
           background: rgba(255, 255, 255, 0.1);
         }
         .light .theme-toggle {
           background: rgba(0, 0, 0, 0.04);
         }
         .light .theme-toggle:hover {
           background: rgba(0, 0, 0, 0.08);
         }

         /* ===== HERO ===== */
         #hero {
           min-height: auto;
           padding-top: 120px;
           padding-bottom: 80px;
           padding: 108px 0 72px;
           display: flex;
           align-items: center;
         }
         .hero-grid {
           display: grid;
           grid-template-columns: 1fr 320px;
           gap: 56px;
           align-items: center;
           width: 100%;
         }
         @media(max-width:860px) {
           .hero-grid {
             grid-template-columns: 1fr;
             gap: 0;
           }
           .hero-photo-col {
             order: 2;
             margin-top: 36px;
           }
         }
         .hero-tag {
           font-family: var(--mono);
           font-size: 11px;
           font-weight: 400;
           color: var(--text3);
           letter-spacing: .1em;
           text-transform: uppercase;
           margin-bottom: 18px;
         }
         .hero-name {
           font-family: var(--sg);
           font-size: clamp(42px, 5.8vw, 74px);
           font-weight: 300;
           line-height: 1.01;
           letter-spacing: -.04em;
           color: var(--hl);
           margin-bottom: 10px;
         }
         .hero-role {
           font-size: clamp(16px, 2vw, 22px);
           font-weight: 300;
           color: var(--text2);
           letter-spacing: -.01em;
           margin-bottom: 22px;
           line-height: 1.3;
         }
         .hero-bio {
           font-size: 15px;
           color: var(--text2);
           line-height: 1.8;
           max-width: 440px;
           margin-bottom: 32px;
           font-weight: 300;
         }
         .hero-actions {
           display: flex;
           gap: 12px;
           flex-wrap: wrap;
           margin-bottom: 36px;
         }
         .hero-socials {
           display: flex;
           align-items: center;
           gap: 8px;
           margin-bottom: 36px;
         }
         .social-link {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           width: 36px;
           height: 36px;
           border-radius: 8px;
           border: 1px solid var(--border2);
           background: rgba(255, 255, 255, .03);
           color: var(--text2);
           text-decoration: none;
           transition: color .15s, border-color .15s, background .15s;
         }
         .social-link:hover {
           color: var(--text1);
           border-color: var(--text2);
           background: rgba(255, 255, 255, .07);
         }
         .light .social-link:hover {
           background: rgba(0, 0, 0, .07);
         }
         .social-link svg {
           width: 15px;
           height: 15px;
           fill: none;
           stroke: currentColor;
           stroke-width: 1.7;
         }
         .hero-stats {
           display: flex;
           gap: 28px;
           border-top: 1px solid var(--border);
           padding-top: 24px;
           flex-wrap: wrap;
         }
         .hero-stat-n {
           font-family: var(--mono);
           font-size: 24px;
           font-weight: 600;
           color: var(--hl);
           letter-spacing: -.02em;
         }
         .hero-stat-l {
           font-size: 11px;
           color: var(--text3);
           text-transform: uppercase;
           letter-spacing: .07em;
           margin-top: 2px;
         }

         .hero-photo-col {
           display: flex;
           justify-content: center;
           align-items: flex-start;
         }
         .photo-wrap {
           position: relative;
           width: 100%;
           max-width: 300px;
         }
         @media(max-width:860px) {
           .photo-wrap {
             max-width: 240px;
           }
         }
         .photo-wrap img {
           width: 100%;
           aspect-ratio: 3/4;
           object-fit: cover;
           object-position: center top;
           display: block;
           filter: grayscale(100%) contrast(1.1);
         }
         .light .photo-wrap img {
           filter: none;
         }

         /* ===== SECTION COMMON ===== */
         section:not(#hero) {
           padding: 72px 0;
         }
         .sec-tag {
           font-family: var(--mono);
           font-size: 11px;
           color: var(--text3);
           text-transform: uppercase;
           letter-spacing: .1em;
           margin-bottom: 10px;
         }
         .sec-title {
           font-family: var(--sg);
           font-size: clamp(22px, 3vw, 34px);
           font-weight: 700;
           letter-spacing: -.025em;
           color: var(--hl);
           margin-bottom: 6px;
           line-height: 1.1;
         }
         .sec-desc {
           font-size: 14px;
           color: var(--text3);
           max-width: 480px;
         }
         .sec-hdr {
           margin-bottom: 44px;
         }

         /* ===== SERVICES ===== */
         #services {
           background: var(--bg);
         }
         .services-grid {
           display: grid;
           grid-template-columns: repeat(4, 1fr);
           gap: 12px;
         }
         @media(max-width:900px) {
           .services-grid {
             grid-template-columns: repeat(2, 1fr);
           }
         }
         @media(max-width:500px) {
           .services-grid {
             grid-template-columns: 1fr;
           }
         }
         .svc {
           background: var(--card);
           border: 1px solid var(--border);
           border-radius: 12px;
           padding: 22px 18px;
           transition: all 0.25s ease;
         }
         .svc:hover {
           border-color: var(--border2);
           transform: translateY(-4px);
           box-shadow: var(--card-hover-shadow);
         }
         .svc-num {
           font-family: var(--mono);
           font-size: 10px;
           color: var(--text3);
           letter-spacing: .08em;
           margin-bottom: 14px;
         }
         .svc-title {
           font-size: 15px;
           font-weight: 600;
           color: var(--hl);
           margin-bottom: 8px;
           letter-spacing: -.01em;
         }
         .svc-desc {
           font-size: 13px;
           color: var(--text2);
           line-height: 1.7;
           margin-bottom: 14px;
         }
         .svc-tags {
           display: flex;
           flex-wrap: wrap;
           gap: 5px;
         }
         .stag {
           font-size: 11px;
           font-weight: 500;
           padding: 3px 8px;
           border-radius: 4px;
           background: rgba(255, 255, 255, .04);
           border: 1px solid var(--border);
           color: var(--text3);
         }

         /* ===== SKILLS ===== */
         #skills {
           background: var(--bg);
         }
         .skills-grid {
           display: grid;
           grid-template-columns: repeat(4, 1fr);
           gap: 12px;
         }
         @media(max-width:900px) {
           .skills-grid {
             grid-template-columns: repeat(2, 1fr);
           }
         }
         @media(max-width:500px) {
           .skills-grid {
             grid-template-columns: 1fr;
           }
         }
         .skill-card {
           background: var(--card);
           border: 1px solid var(--border);
           border-radius: 12px;
           padding: 22px 18px;
           transition: all 0.25s ease;
         }
         .skill-card:hover {
           border-color: var(--border2);
           transform: translateY(-4px);
           box-shadow: var(--card-hover-shadow);
         }
         .sk-cat {
           font-size: 14px;
           font-weight: 700;
           color: var(--hl);
           letter-spacing: 0.02em;
           margin-bottom: 14px;
           text-transform: uppercase;
           border-left: 2px solid var(--border2);
           padding-left: 10px;
         }
         .sk-items {
           display: flex;
           flex-direction: column;
           gap: 8px;
         }
         .sk-item {
           font-size: 13px;
           color: var(--text2);
           display: flex;
           align-items: center;
           gap: 7px;
         }
         .sk-item::before {
           content: "";
           width: 3px;
           height: 3px;
           border-radius: 50%;
           background: var(--border2);
           flex-shrink: 0;
         }

         /* ===== EXPERIENCE ===== */
         #experience {
           background: var(--bg);
         }
         .exp-list {
           display: flex;
           flex-direction: column;
         }
         .exp-row {
           display: grid;
           grid-template-columns: 140px 1fr;
           gap: 28px;
           padding: 22px 0;
           border-bottom: 1px solid var(--border);
           align-items: start;
         }
         .exp-row:last-child {
           border-bottom: none;
         }
         @media(max-width:580px) {
           .exp-row {
             grid-template-columns: 1fr;
             gap: 6px;
           }
         }
         .exp-date {
           font-family: var(--mono);
           font-size: 10px;
           color: var(--text3);
           padding-top: 3px;
           letter-spacing: .04em;
         }
         .exp-role {
           font-size: 15px;
           font-weight: 600;
           color: var(--hl);
           margin-bottom: 2px;
           letter-spacing: -.01em;
         }
         .exp-co {
           font-size: 12px;
           color: var(--text3);
           margin-bottom: 7px;
         }
         .exp-desc {
           font-size: 14px;
           color: var(--text2);
           line-height: 1.75;
         }

         /* ===== TESTIMONIALS ===== */
         #testimonials {
           background: var(--bg1);
         }
         .test-grid {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 12px;
         }
         @media(max-width:800px) {
           .test-grid {
             grid-template-columns: repeat(2, 1fr);
           }
         }
         @media(max-width:480px) {
           .test-grid {
             grid-template-columns: 1fr;
           }
         }
         .test-card {
           background: var(--card);
           border: 1px solid var(--border);
           border-radius: 12px;
           padding: 22px;
           transition: all 0.25s ease;
         }
         .test-card:hover {
           border-color: var(--border2);
           transform: translateY(-4px);
           box-shadow: var(--card-hover-shadow);
         }
         .test-stars {
           color: var(--hl);
           font-size: 11px;
           letter-spacing: 2px;
           margin-bottom: 12px;
         }
         .test-quote {
           font-size: 14px;
           color: var(--text2);
           line-height: 1.75;
           margin-bottom: 18px;
           font-style: italic;
         }
         .test-author {
           display: flex;
           align-items: center;
           gap: 10px;
         }
         .test-av {
           width: 32px;
           height: 32px;
           border-radius: 50%;
           background: var(--bg3);
           border: 1px solid var(--border2);
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 11px;
           font-weight: 700;
           color: var(--text2);
           font-family: var(--mono);
           flex-shrink: 0;
         }
         .test-name {
           font-size: 12px;
           font-weight: 600;
           color: var(--text1);
         }
         .test-role {
           font-size: 11px;
           color: var(--text3);
         }

         /* ===== ABOUT ===== */
         #about {
           background: var(--bg1);
         }
         .about-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 64px;
           align-items: start;
         }
         @media(max-width:800px) {
           .about-grid {
             grid-template-columns: 1fr;
             gap: 36px;
           }
         }
         .about-p {
           font-size: 14px;
           color: var(--text2);
           line-height: 1.85;
           margin-bottom: 12px;
           font-weight: 300;
         }
         .approach-cards {
           display: flex;
           flex-direction: column;
           gap: 10px;
           margin-top: 28px;
         }
         .apcard {
           display: flex;
           gap: 14px;
           align-items: flex-start;
           padding: 14px 16px;
           background: var(--card);
           border: 1px solid var(--border);
           border-radius: 10px;
           transition: all 0.25s ease;
         }
         .apcard:hover {
           border-color: var(--border2);
           transform: translateX(4px);
         }
         .ap-icon {
           font-size: 14px;
           flex-shrink: 0;
           margin-top: 2px;
         }
         .ap-title {
           font-size: 13px;
           font-weight: 600;
           color: var(--text1);
           margin-bottom: 2px;
         }
         .ap-desc {
           font-size: 13px;
           color: var(--text2);
           line-height: 1.6;
         }

         /* ===== CONTACT ===== */
         #contact {
           background: var(--bg);
         }
         .contact-grid {
           display: grid;
           grid-template-columns: 1fr 1.4fr;
           gap: 64px;
           align-items: start;
         }
         @media(max-width:800px) {
           .contact-grid {
             grid-template-columns: 1fr;
             gap: 40px;
           }
         }
         .contact-copy {
           font-size: 14px;
           color: var(--text2);
           line-height: 1.8;
           margin-bottom: 24px;
         }
         .clinks {
           display: flex;
           flex-direction: column;
           gap: 8px;
         }
         .clink {
           display: flex;
           align-items: center;
           gap: 12px;
           padding: 12px 14px;
           background: var(--card);
           border: 1px solid var(--border);
           border-radius: 10px;
           text-decoration: none;
           transition: all 0.25s ease;
         }
         .clink:hover {
           border-color: var(--border2);
           transform: translateX(6px);
         }
         .clink-icon {
           width: 44px;
           height: 44px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 12px;
           background: rgba(255, 255, 255, .04);
           border: 1px solid rgba(255, 255, 255, .08);
           color: var(--text1);
           flex-shrink: 0;
         }
         .light .clink-icon {
           background: rgba(0, 0, 0, .04);
           border-color: var(--border);
         }
         .clink-lbl {
           font-size: 11px;
           font-weight: 700;
           letter-spacing: .07em;
           text-transform: uppercase;
           color: var(--text3);
           margin-bottom: 1px;
         }
         .clink-val {
           font-size: 14px;
           font-weight: 500;
           color: var(--text1);
         }

         .form {
           display: flex;
           flex-direction: column;
           gap: 12px;
         }
         .frow {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 10px;
         }
         @media(max-width:450px) {
           .frow {
             grid-template-columns: 1fr;
           }
         }
         .fg {
           display: flex;
           flex-direction: column;
           gap: 5px;
         }
         .fl {
           font-size: 10px;
           font-weight: 700;
           letter-spacing: .09em;
           text-transform: uppercase;
           color: var(--text3);
         }
         .fi,
         .fta {
           width: 100%;
           padding: 10px 13px;
           background: var(--card);
           border: 1px solid var(--border);
           border-radius: 8px;
           color: var(--text1);
           font-family: var(--font);
           font-size: 13px;
           outline: none;
           transition: border-color .15s;
         }
         .fi::placeholder,
         .fta::placeholder {
           color: var(--text3);
         }
         .fi:focus,
         .fta:focus {
           border-color: var(--border2);
         }
         .fta {
           resize: vertical;
           min-height: 100px;
           line-height: 1.6;
         }
         .fsub {
           display: inline-flex;
           align-items: center;
           gap: 7px;
           padding: 11px 24px;
           border-radius: 8px;
           background: var(--hl);
           color: #000;
           font-family: var(--font);
           font-size: 13px;
           font-weight: 600;
           border: none;
           cursor: pointer;
           transition: opacity .15s, transform .15s;
           align-self: flex-start;
           letter-spacing: .01em;
         }
         .light .fsub {
           color: #fff;
         }
         .fsub:hover {
           opacity: .85;
           transform: translateY(-1px);
         }
         .form-note {
           margin-top: 14px;
           font-size: 12px;
           color: var(--text3);
         }

         .custom-select {
           position: relative;
           width: 100%;
           user-select: none;
         }
         .custom-select-trigger {
           width: 100%;
           height: 54px;
           padding: 0 18px;
           background: var(--card);
           border: 1px solid var(--border);
           border-radius: 10px;
           color: var(--text2);
           font-family: var(--font);
           font-size: 13px;
           font-weight: 500;
           line-height: 54px;
           cursor: pointer;
           transition: all 0.2s ease;
           position: relative;
         }
         .custom-select-trigger::after {
           content: "";
           position: absolute;
           right: 18px;
           top: 50%;
           transform: translateY(-50%);
           width: 14px;
           height: 14px;
           background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
           background-repeat: no-repeat;
           background-size: contain;
           transition: transform 0.2s;
         }
         .custom-select.open .custom-select-trigger::after {
           transform: translateY(-50%) rotate(180deg);
         }
         .custom-select-trigger:hover {
           border-color: var(--border2);
         }
         .custom-select-options {
           position: absolute;
           top: calc(100% + 5px);
           left: 0;
           right: 0;
           background: var(--card);
           border: 1px solid var(--border);
           border-radius: 10px;
           max-height: 250px;
           overflow-y: auto;
           z-index: 100;
           display: none;
         }
         .custom-select.open .custom-select-options {
           display: block;
         }
         .custom-select-options div {
           padding: 12px 18px;
           color: var(--text2);
           font-family: var(--font);
           font-size: 13px;
           cursor: pointer;
           transition: background 0.1s;
         }
         .custom-select-options div:hover {
           background: var(--bg2);
           color: var(--text1);
         }
         .custom-select-options div.selected {
           background: var(--border2);
           color: var(--text1);
           font-weight: 500;
         }

         /* ===== FOOTER ===== */
         footer {
           background: var(--bg1);
           border-top: 1px solid var(--border);
           padding: 28px 0;
         }
         .footer-row {
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 16px;
           flex-wrap: wrap;
         }
         .footer-name {
           font-family: var(--mono);
           font-size: 13px;
           font-weight: 500;
           color: var(--text2);
         }
         .footer-copy {
           font-size: 11px;
           color: var(--text3);
           margin-top: 3px;
         }
         .footer-links {
           display: flex;
           gap: 14px;
           align-items: center;
         }
         .footer-links a {
           font-size: 12px;
           color: var(--text3);
           text-decoration: none;
           transition: color .15s;
         }
         .footer-links a:hover {
           color: var(--text1);
         }
         .footer-socials {
           display: flex;
           gap: 8px;
         }
         .footer-socials .social-link {
           width: 30px;
           height: 30px;
           border-radius: 6px;
         }

         /* ===== FADE ===== */
         .fade {
           opacity: 0;
           transform: translateY(16px);
           transition: opacity .5s ease, transform .5s ease;
         }
         .fade.show {
           opacity: 1;
           transform: none;
         }

         /* ===== PROJECTS LINK BUTTON (in hero) ===== */
         .btn-projects {
           display: inline-flex;
           align-items: center;
           gap: 7px;
           padding: 10px 24px;
           border-radius: 8px;
           background: var(--card);
           border: 1px solid var(--border2);
           color: var(--text1);
           font-size: 13px;
           font-weight: 600;
           text-decoration: none;
           transition: all 0.2s ease;
           letter-spacing: 0.01em;
         }
         .btn-projects:hover {
           border-color: var(--text2);
           transform: translateY(-2px);
           box-shadow: var(--card-hover-shadow);
         }
         .btn-projects svg {
           width: 14px;
           height: 14px;
           stroke: currentColor;
           fill: none;
           stroke-width: 2;
         }