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

 :root {
     --bg: #0a0a0f;
     --bg2: #111118;
     --surface: #16161f;
     --border: rgba(255, 255, 255, 0.07);
     --accent: #c8f53e;
     --accent2: #ff6b6b;
     --text: #e8e8f0;
     --muted: #6b6b80;
     --font-display: 'Syne', sans-serif;
     --font-mono: 'DM Mono', monospace;
 }

 html {
     scroll-behavior: smooth;
 }

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

 @media (hover: none) {
     body {
         cursor: auto;
     }

     .cursor {
         display: none;
     }
 }

 /* ── Custom cursor ── */
 .cursor {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 9999;
     pointer-events: none;
 }

 .cursor-dot {
     width: 8px;
     height: 8px;
     background: var(--accent);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     transition: transform .1s, width .25s, height .25s, background .25s;
 }

 .cursor-ring {
     width: 36px;
     height: 36px;
     border: 1.5px solid rgba(200, 245, 62, .35);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     transition: transform .18s ease, width .25s, height .25s, border-color .25s;
 }

 body:has(a:hover) .cursor-dot,
 body:has(button:hover) .cursor-dot {
     width: 14px;
     height: 14px;
     background: var(--accent2);
 }

 body:has(a:hover) .cursor-ring,
 body:has(button:hover) .cursor-ring {
     width: 54px;
     height: 54px;
     border-color: rgba(255, 107, 107, .5);
 }

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

 /* ── NAV ── */
 nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1.4rem 5vw;
     backdrop-filter: blur(18px);
     border-bottom: 1px solid var(--border);
     background: rgba(10, 10, 15, .7);
 }

 .nav-logo {
     font-family: var(--font-display);
     font-weight: 800;
     font-size: 1.1rem;
     color: var(--text);
     text-decoration: none;
     letter-spacing: -.02em;
 }

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

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

 .nav-links a {
     color: var(--muted);
     text-decoration: none;
     font-size: .8rem;
     letter-spacing: .12em;
     text-transform: uppercase;
     transition: color .2s;
 }

 .nav-links a:hover {
     color: var(--accent);
 }

 .nav-cta {
     background: var(--accent);
     color: var(--bg);
     font-family: var(--font-display);
     font-weight: 700;
     font-size: .8rem;
     letter-spacing: .05em;
     text-transform: uppercase;
     padding: .55rem 1.4rem;
     border-radius: 3px;
     text-decoration: none;
     transition: background .2s, transform .15s;
 }

 .nav-cta:hover {
     background: #d8ff55;
     transform: translateY(-1px);
 }

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

 .burger span {
     width: 24px;
     height: 2px;
     background: var(--text);
     transition: .3s;
 }

 /* ── HERO ── */
 #hero {
     position: relative;
     min-height: 100svh;
     display: grid;
     place-items: center;
     padding: 8rem 5vw 4rem;
     overflow: hidden;
 }

 .hero-grid-bg {
     position: absolute;
     inset: 0;
     z-index: 0;
     background-image:
         linear-gradient(rgba(200, 245, 62, .04) 1px, transparent 1px),
         linear-gradient(90deg, rgba(200, 245, 62, .04) 1px, transparent 1px);
     background-size: 60px 60px;
     mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
 }

 .hero-blob {
     position: absolute;
     border-radius: 50%;
     filter: blur(100px);
     opacity: .18;
     z-index: 0;
 }

 .hero-blob-1 {
     width: 500px;
     height: 500px;
     background: radial-gradient(circle, #c8f53e 0%, transparent 70%);
     top: -100px;
     right: -80px;
     animation: floatBlob 12s ease-in-out infinite;
 }

 .hero-blob-2 {
     width: 380px;
     height: 380px;
     background: radial-gradient(circle, #ff6b6b 0%, transparent 70%);
     bottom: 0;
     left: -80px;
     animation: floatBlob 15s ease-in-out infinite reverse;
 }

 @keyframes floatBlob {

     0%,
     100% {
         transform: translate(0, 0) scale(1);
     }

     33% {
         transform: translate(30px, -40px) scale(1.05);
     }

     66% {
         transform: translate(-20px, 20px) scale(.96);
     }
 }

 .hero-content {
     position: relative;
     z-index: 1;
     text-align: center;
     max-width: 860px;
 }

 .hero-tag {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     background: rgba(200, 245, 62, .08);
     border: 1px solid rgba(200, 245, 62, .2);
     color: var(--accent);
     font-size: .75rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     padding: .35rem .9rem;
     border-radius: 100px;
     margin-bottom: 1.8rem;
     animation: fadeUp .8s .1s both;
 }

 .hero-tag::before {
     content: '';
     width: 6px;
     height: 6px;
     background: var(--accent);
     border-radius: 50%;
     animation: pulse 2s infinite;
 }

 @keyframes pulse {

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

     50% {
         opacity: .4;
         transform: scale(1.4);
     }
 }

 .hero-title {
     font-family: var(--font-display);
     font-size: clamp(2rem, 11vw, 7rem);
     font-weight: 800;
     line-height: .95;
     letter-spacing: -.04em;
     animation: fadeUp .8s .2s both;
 }

 .hero-title .line-accent {
     color: var(--accent);
 }

 .hero-title .line-stroke {
     -webkit-text-stroke: 1.5px rgba(255, 255, 255, .25);
     color: transparent;
 }

 .hero-sub {
     margin-top: 1.8rem;
     color: var(--muted);
     font-size: .95rem;
     max-width: 480px;
     margin-left: auto;
     margin-right: auto;
     animation: fadeUp .8s .35s both;
 }

 .hero-actions {
     margin-top: 2.5rem;
     display: flex;
     gap: 1rem;
     justify-content: center;
     flex-wrap: wrap;
     animation: fadeUp .8s .5s both;
 }

 .btn-primary {
     background: var(--accent);
     color: var(--bg);
     font-family: var(--font-display);
     font-weight: 700;
     font-size: .9rem;
     padding: .85rem 2rem;
     border-radius: 4px;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     transition: transform .15s, box-shadow .2s;
     box-shadow: 0 0 0 0 rgba(200, 245, 62, .4);
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 32px rgba(200, 245, 62, .25);
 }

 .btn-ghost {
     border: 1px solid var(--border);
     color: var(--text);
     font-family: var(--font-display);
     font-weight: 600;
     font-size: .9rem;
     padding: .85rem 2rem;
     border-radius: 4px;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     transition: border-color .2s, background .2s;
 }

 .btn-ghost:hover {
     border-color: rgba(255, 255, 255, .25);
     background: rgba(255, 255, 255, .04);
 }

 .hero-scroll {
     position: absolute;
     bottom: 2.5rem;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: .5rem;
     color: var(--muted);
     font-size: .7rem;
     letter-spacing: .12em;
     text-transform: uppercase;
     animation: fadeUp .8s .8s both;
 }

 .scroll-line {
     width: 1px;
     height: 50px;
     background: linear-gradient(to bottom, var(--accent), transparent);
     animation: scrollLine 2s ease-in-out infinite;
 }

 @keyframes scrollLine {

     0%,
     100% {
         opacity: 1;
         height: 50px;
     }

     50% {
         opacity: .3;
         height: 30px;
     }
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(24px);
     }

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

 /* ── MARQUEE ── */
 .marquee-wrap {
     overflow: hidden;
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     background: var(--bg2);
     padding: 1rem 0;
     position: relative;
     z-index: 1;
 }

 .marquee-track {
     display: flex;
     gap: 3rem;
     width: max-content;
     animation: marquee 28s linear infinite;
 }

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

 @keyframes marquee {
     from {
         transform: translateX(0);
     }

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

 .marquee-item {
     color: var(--muted);
     font-size: .8rem;
     letter-spacing: .15em;
     text-transform: uppercase;
     white-space: nowrap;
     display: flex;
     align-items: center;
     gap: .8rem;
 }

 .marquee-item::before {
     content: '✦';
     color: var(--accent);
     font-size: .6rem;
 }

 /* ── SECTION SHARED ── */
 section {
     padding: 7rem 5vw;
     position: relative;
     z-index: 1;
 }

 .section-tag {
     font-size: .72rem;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: .8rem;
     display: flex;
     align-items: center;
     gap: .6rem;
 }

 .section-tag::before {
     content: '—';
 }

 .section-title {
     font-family: var(--font-display);
     font-weight: 800;
     font-size: clamp(2rem, 4vw, 3.2rem);
     letter-spacing: -.03em;
     line-height: 1.05;
 }

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

 .about-visual {
     position: relative;
     aspect-ratio: 4/5;
     border-radius: 8px;
     overflow: hidden;
 }

 .about-img-placeholder {
     width: 100%;
     height: 100%;
     background: var(--surface);
     display: grid;
     place-items: center;
     font-size: 5rem;
 }

 .about-img-placeholder img {
     width: 90%;
     height: 90%;
     border-radius: 0.5rem;
 }

 .about-frame {
     position: absolute;
     inset: 0;
     border: 1px solid rgba(200, 245, 62, .15);
     border-radius: 8px;
 }

 .about-corner {
     position: absolute;
     width: 20px;
     height: 20px;
     border-color: var(--accent);
 }

 .about-corner-tl {
     top: -1px;
     left: -1px;
     border-top: 2px solid;
     border-left: 2px solid;
     border-radius: 2px 0 0 0;
 }

 .about-corner-br {
     bottom: -1px;
     right: -1px;
     border-bottom: 2px solid;
     border-right: 2px solid;
     border-radius: 0 0 2px 0;
 }

 .about-badge {
     position: absolute;
     bottom: 2rem;
     left: -1.5rem;
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 6px;
     padding: 1rem 1.2rem;
     backdrop-filter: blur(12px);
 }

 .badge-num {
     font-family: var(--font-display);
     font-size: 2rem;
     font-weight: 800;
     color: var(--accent);
     line-height: 1;
 }

 .badge-label {
     font-size: .72rem;
     color: var(--muted);
     margin-top: .2rem;
 }

 .about-text .section-title {
     margin-bottom: 1.5rem;
 }

 .about-text p {
     color: var(--muted);
     margin-bottom: 1rem;
 }

 .about-skills-list {
     display: flex;
     flex-wrap: wrap;
     gap: .5rem;
     margin-top: 2rem;
 }

 .skill-tag {
     background: var(--surface);
     border: 1px solid var(--border);
     color: var(--text);
     font-size: .75rem;
     padding: .35rem .8rem;
     border-radius: 3px;
     transition: border-color .2s, color .2s;
 }

 .skill-tag:hover {
     border-color: var(--accent);
     color: var(--accent);
 }

 /* ── PROJECTS ── */
 #projects {
     background: var(--bg2);
 }

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

 .view-all {
     color: var(--accent);
     text-decoration: none;
     font-size: .8rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     display: flex;
     align-items: center;
     gap: .4rem;
     transition: gap .2s;
 }

 .view-all:hover {
     gap: .8rem;
 }

 .projects-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 1.5px;
 }

 .project-card {
     background: var(--surface);
     padding: 2.5rem;
     position: relative;
     overflow: hidden;
     transition: background .2s;
     cursor: pointer;
 }

 .project-card::after {
     content: '';
     position: absolute;
     inset: 0;
     opacity: 0;
     background: linear-gradient(135deg, rgba(200, 245, 62, .06) 0%, transparent 60%);
     transition: opacity .3s;
     pointer-events: none;
     /* ← esto es todo lo que falta */
     pointer-events: none;
     z-index: 0;
 }

 .project-card:hover {
     background: #1a1a25;
 }

 .project-card:hover::after {
     opacity: 1;
 }

 .project-card:first-child {
     grid-column: span 2;
 }

 .project-num {
     font-size: .7rem;
     letter-spacing: .15em;
     color: var(--muted);
     margin-bottom: 1.5rem;
 }

 .project-type {
     display: inline-block;
     font-size: .68rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--accent);
     background: rgba(200, 245, 62, .08);
     padding: .2rem .6rem;
     border-radius: 2px;
     margin-bottom: 1rem;
 }

 .project-title {
     font-family: var(--font-display);
     font-weight: 700;
     font-size: clamp(1.3rem, 2.5vw, 1.8rem);
     letter-spacing: -.02em;
     line-height: 1.1;
     margin-bottom: 1rem;
 }

 .project-desc {
     color: var(--muted);
     font-size: .85rem;
     line-height: 1.65;
 }

 .project-stack {
     display: flex;
     flex-wrap: wrap;
     gap: .4rem;
     margin-top: 1.5rem;
 }

 .stack-tag {
     font-size: .7rem;
     color: var(--muted);
     border: 1px solid var(--border);
     padding: .2rem .6rem;
     border-radius: 2px;
 }

 .project-link {
     position: absolute;
     top: 2rem;
     right: 2rem;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     border: 1px solid var(--border);
     display: grid;
     place-items: center;
     color: var(--muted);
     text-decoration: none;
     z-index: 1;
     transition: background .2s, color .2s, transform .2s, border-color .2s;
 }

 .project-link:hover {
     background: var(--accent);
     color: var(--bg);
     border-color: var(--accent);
     transform: rotate(45deg);
 }

 /* ── SERVICES ── */
 /* #services {} */

 .services-header {
     max-width: 560px;
     margin-bottom: 4rem;
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 1px;
     background: var(--border);
     border: 1px solid var(--border);
 }

 .service-card {
     background: var(--bg);
     padding: 2.5rem 2rem;
     transition: background .2s;
 }

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

 .service-icon {
     font-size: 3rem;
     margin-bottom: 1.5rem;
     display: block;
     text-align: center;
     color: var(--accent);
 }

 .service-name {
     font-family: var(--font-display);
     font-weight: 700;
     font-size: 1.1rem;
     letter-spacing: -.01em;
     margin-bottom: .8rem;
     text-align: center;
 }

 .service-desc {
     color: var(--muted);
     font-size: .82rem;
     line-height: 1.65;
 }

 /* ── STATS ── */
 .stats-band {
     background: var(--accent);
     padding: 4rem 5vw;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 3rem 6rem;
 }

 .stat-item {
     text-align: center;
 }

 .stat-num {
     font-family: var(--font-display);
     font-size: clamp(1.5rem, 3vw, 2rem);
     font-weight: 800;
     color: var(--bg);
     letter-spacing: -.04em;
     line-height: 1;
 }

 .stat-label {
     font-size: .75rem;
     letter-spacing: .12em;
     color: rgba(10, 10, 15, .6);
     text-transform: uppercase;
     margin-top: .4rem;
 }

 /* ── CONTACT ── */
 /* ── CONTACT ── */
 #contact {
     background: var(--bg2);
 }

 .contact-layout {
     display: grid;
     grid-template-columns: 1fr 1.4fr;
     gap: 5rem;
     align-items: start;
     max-width: 1100px;
     margin: 0 auto;
 }

 .contact-info .section-title {
     margin-bottom: 1.2rem;
 }

 .contact-info>p {
     color: var(--muted);
     margin-bottom: 2.5rem;
     line-height: 1.75;
 }

 .contact-links {
     display: flex;
     flex-direction: column;
     gap: .75rem;
 }

 .contact-link {
     border: 1px solid var(--border);
     color: var(--text);
     padding: .75rem 1.2rem;
     border-radius: 4px;
     text-decoration: none;
     font-size: .82rem;
     letter-spacing: .06em;
     display: flex;
     align-items: center;
     gap: .7rem;
     transition: border-color .2s, background .2s, color .2s;
 }

 .contact-link:hover {
     border-color: var(--accent);
     background: rgba(200, 245, 62, .06);
     color: var(--accent);
 }

 .contact-link-icon {
     width: 28px;
     height: 28px;
     background: var(--surface);
     border-radius: 3px;
     display: grid;
     place-items: center;
     font-size: .85rem;
     flex-shrink: 0;
 }

 .contact-availability {
     margin-top: 2.5rem;
     padding: 1.2rem 1.4rem;
     background: rgba(200, 245, 62, .06);
     border: 1px solid rgba(200, 245, 62, .18);
     border-radius: 6px;
 }

 .avail-dot {
     display: inline-block;
     width: 8px;
     height: 8px;
     background: var(--accent);
     border-radius: 50%;
     margin-right: .5rem;
     animation: pulse 2s infinite;
 }

 .avail-text {
     font-size: .78rem;
     color: var(--accent);
     letter-spacing: .06em;
 }

 .avail-sub {
     font-size: .74rem;
     color: var(--muted);
     margin-top: .35rem;
 }

 .contact-form-wrap {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 8px;
     padding: 2.5rem;
 }

 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
 }

 .form-group {
     display: flex;
     flex-direction: column;
     gap: .45rem;
     margin-bottom: 1.2rem;
 }

 .form-group label {
     font-size: .72rem;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--muted);
 }

 .form-group input,
 .form-group select,
 .form-group textarea {
     background: var(--bg);
     border: 1px solid var(--border);
     color: var(--text);
     font-family: var(--font-mono);
     font-size: .85rem;
     padding: .8rem 1rem;
     border-radius: 4px;
     outline: none;
     width: 100%;
     transition: border-color .2s, box-shadow .2s;
     appearance: none;
     -webkit-appearance: none;
 }

 .form-group select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b80' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 1rem center;
     padding-right: 2.5rem;
     cursor: pointer;
 }

 .form-group select option {
     background: var(--bg2);
 }

 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     border-color: var(--accent);
     box-shadow: 0 0 0 3px rgba(200, 245, 62, .1);
 }

 .form-group input::placeholder,
 .form-group textarea::placeholder {
     color: var(--muted);
     opacity: .6;
 }

 .form-group textarea {
     resize: vertical;
     min-height: 130px;
     line-height: 1.6;
 }

 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--accent2);
     box-shadow: 0 0 0 3px rgba(255, 107, 107, .1);
 }

 .form-error-msg {
     font-size: .72rem;
     color: var(--accent2);
     display: none;
 }

 .form-group.has-error .form-error-msg {
     display: block;
 }

 .form-submit {
     width: 100%;
     padding: 1rem;
     background: var(--accent);
     color: var(--bg);
     font-family: var(--font-display);
     font-weight: 700;
     font-size: .95rem;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: .6rem;
     transition: background .2s, transform .15s, box-shadow .2s;
 }

 .form-submit:hover {
     background: #d8ff55;
     transform: translateY(-1px);
     box-shadow: 0 8px 28px rgba(200, 245, 62, .25);
 }

 .form-submit:active {
     transform: translateY(0);
 }

 .form-submit.loading {
     pointer-events: none;
     opacity: .8;
 }

 .form-submit .btn-spinner {
     display: none;
     width: 16px;
     height: 16px;
     border: 2px solid rgba(10, 10, 15, .3);
     border-top-color: var(--bg);
     border-radius: 50%;
     animation: spin .7s linear infinite;
 }

 .form-submit.loading .btn-spinner {
     display: block;
 }

 .form-submit.loading .btn-text {
     display: none;
 }

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

 .form-success {
     display: none;
     text-align: center;
     padding: 3rem 1rem;
 }

 .form-success.show {
     display: block;
 }

 .success-icon {
     font-size: 3rem;
     margin-bottom: 1rem;
     animation: popIn .5s cubic-bezier(.175, .885, .32, 1.275) both;
 }

 @keyframes popIn {
     from {
         transform: scale(0);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }

 .success-title {
     font-family: var(--font-display);
     font-size: 1.4rem;
     font-weight: 700;
     margin-bottom: .5rem;
 }

 .success-sub {
     color: var(--muted);
     font-size: .85rem;
 }

 @media (max-width: 860px) {
     .contact-layout {
         grid-template-columns: 1fr;
         gap: 3rem;
     }

     .contact-links {
         flex-direction: row;
         flex-wrap: wrap;
     }
 }

 @media (max-width: 520px) {
     .form-row {
         grid-template-columns: 1fr;
     }

     .contact-form-wrap {
         padding: 1.5rem;
     }
 }

 /* ── FOOTER ── */
 footer {
     padding: 2rem 5vw;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 1rem;
     border-top: 1px solid var(--border);
     font-size: .75rem;
     color: var(--muted);
 }

 footer a {
     color: var(--muted);
     text-decoration: none;
 }

 footer a:hover {
     color: var(--accent);
 }

 /* ── SCROLL REVEAL ── */
 .reveal {
     opacity: 0;
     transform: translateY(32px);
     transition: opacity .7s ease, transform .7s ease;
 }

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

 /* ── RESPONSIVE ── */
 @media (max-width: 900px) {
     #about {
         grid-template-columns: 1fr;
         gap: 3rem;
     }

     .about-visual {
         max-width: 360px;
     }

     .about-badge {
         left: .5rem;
     }

     .project-card:first-child {
         grid-column: span 1;
     }
 }

 @media (max-width: 640px) {

     .nav-links,
     .nav-cta {
         display: none;
     }

     .burger {
         display: flex;
     }

     nav.open .nav-links {
         display: flex;
         flex-direction: column;
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         gap: 0;
         background: rgba(10, 10, 15, .97);
         border-top: 1px solid var(--border);
         backdrop-filter: blur(20px);
     }

     nav.open .nav-links a {
         display: block;
         padding: 1.2rem 5vw;
         border-bottom: 1px solid var(--border);
     }

     nav {
         flex-wrap: wrap;
     }

     .stats-band {
         gap: 2rem 3rem;
     }
 }