:root {
    --g:   #39FF14;
    --g2:  rgba(57,255,20,0.12);
    --g3:  rgba(57,255,20,0.06);
    --g4:  rgba(57,255,20,0.22);

    --amber: #FFB830;
    --blue:  #4DA6FF;

    --bg:  #000000;
    --s1:  #0A0A0A;
    --s2:  #111111;
    --s3:  #1A1A1A;

    --line:  rgba(255,255,255,0.08);
    --line2: rgba(57,255,20,0.15);

    --th: #F2F2F2;
    --tm: #AAAAAA;
    --tl: #666666;

    --mono: 'JetBrains Mono', 'Courier New', monospace;
    --sans: 'DM Sans', system-ui, sans-serif;

    /* layout */
    --max: 1080px;
    --px:  5vw;
    }

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
    background:var(--bg);
    color:var(--th);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
    }

    /* ══════════════════════════════════════════════
    CRT EFFECT — togglable via body.crt class
    ══════════════════════════════════════════════ */

    /* Scanlines overlay */
    .crt-overlay{
    content:'';
    position:fixed;inset:0;pointer-events:none;z-index:9995;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.18) 3px,
        rgba(0,0,0,0.18) 4px
    );
    opacity:0;transition:opacity .35s ease;
    }
    body.crt .crt-overlay{ opacity:1; }

    /* Vignette */
    .crt-vignette{
    position:fixed;inset:0;pointer-events:none;z-index:9994;
    background:radial-gradient(ellipse 85% 80% at 50% 50%, transparent 60%, rgba(0,0,0,0.65) 100%);
    opacity:0;transition:opacity .35s ease;
    }
    body.crt .crt-vignette{ opacity:1; }

    /* Green phosphor tint */
    body.crt{
    filter: saturate(1.1) contrast(1.05);
    }

    /* Flicker animation */
    @keyframes crt-flicker{
    0%,100%{opacity:1}
    92%{opacity:1}
    93%{opacity:.97}
    94%{opacity:1}
    96%{opacity:.98}
    97%{opacity:1}
    }
    body.crt main, body.crt nav, body.crt footer{
    animation: crt-flicker 6s infinite;
    }

    /* Subtle horizontal jitter on text when CRT on */
    body.crt .hero-name{
    text-shadow: 1px 0 rgba(57,255,20,.15), -1px 0 rgba(57,255,20,.08);
    }
    body.crt .sec-title{
    text-shadow: 1px 0 rgba(57,255,20,.12), -1px 0 rgba(57,255,20,.06);
    }

    /* ── CRT TOGGLE BUTTON ── */
    .crt-toggle{
    position:fixed;top:0;right:0;z-index:9999;
    display:flex;align-items:center;gap:.5rem;
    font-family:var(--mono);font-size:.62rem;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--tl);
    background:rgba(0,0,0,.85);
    border:1px solid var(--line);
    border-top:none;border-right:none;
    padding:.45rem .9rem;
    cursor:pointer;
    transition:color .2s,border-color .2s,background .2s;
    user-select:none;
    }
    .crt-toggle:hover{ color:var(--tm); border-color:rgba(255,255,255,.15); }
    body.crt .crt-toggle{
    color:var(--g);
    border-color:var(--line2);
    background:rgba(0,0,0,.9);
    }
    .crt-toggle-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--line);
    transition:background .2s, box-shadow .2s;
    flex-shrink:0;
    }
    body.crt .crt-toggle-dot{
    background:var(--g);
    box-shadow:0 0 5px var(--g);
    }

    /* ── SCAN LINE TEXTURE (always-on subtle version) ── */
    body::after{
    content:'';
    position:fixed;inset:0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.025) 2px,
        rgba(0,0,0,0.025) 4px
    );
    pointer-events:none;z-index:9990;
    }

    /* ── SCROLL PROGRESS ── */
    .prog{
    position:fixed;top:0;left:0;height:1px;
    background:var(--g);z-index:200;
    transform-origin:left;transform:scaleX(0);
    box-shadow:0 0 8px var(--g);
    }

    /* ══════════════════════════════════════════════
    NAV
    ══════════════════════════════════════════════ */
    nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    border-bottom:1px solid var(--line);
    background:rgba(0,0,0,0.95);
    backdrop-filter:blur(12px);
    display:flex;align-items:center;justify-content:space-between;
    padding:.875rem var(--px);
    }
    .nav-inner{
    width:100%;max-width:var(--max);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    }
    .nav-id{
    display:flex;align-items:center;gap:.75rem;
    font-family:var(--mono);font-size:.75rem;font-weight:500;
    color:var(--tm);text-decoration:none;letter-spacing:.05em;
    }
    .nav-id .bracket{color:var(--g)}
    .nav-id .slash{color:var(--tl);margin:0 .1em}
    .nav-links{display:flex;gap:0;list-style:none}
    .nav-links li{border-left:1px solid var(--line)}
    .nav-links li:last-child{border-right:1px solid var(--line)}
    .nav-links a{
    display:block;padding:.5rem 1.25rem;
    font-family:var(--mono);font-size:.7rem;font-weight:400;
    letter-spacing:.08em;text-transform:uppercase;
    color:var(--tl);text-decoration:none;
    transition:color .15s,background .15s;
    }
    .nav-links a:hover{color:var(--g);background:var(--g3)}
    .nav-status{
    display:flex;align-items:center;gap:.6rem;
    font-family:var(--mono);font-size:.68rem;
    color:var(--g);letter-spacing:.08em;
    }
    .nav-status::before{
    content:'';width:6px;height:6px;
    background:var(--g);border-radius:50%;
    animation:blink 1.8s ease-in-out infinite;
    }
    @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

    /* ══════════════════════════════════════════════
    HERO
    ══════════════════════════════════════════════ */
    .hero{
    min-height:100vh;
    padding:8rem var(--px) 4rem;
    display:flex;
    align-items:center;
    position:relative;
    border-bottom:1px solid var(--line);
    }
    .hero-inner{
    width:100%;max-width:var(--max);margin:0 auto;
    display:grid;
    grid-template-columns:1fr 420px;
    gap:4rem;
    align-items:center;
    }

    /* grid background lines */
    .hero::before{
    content:'';
    position:absolute;inset:0;
    background-image:
        linear-gradient(var(--line) 1px,transparent 1px),
        linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse 80% 60% at 60% 50%,black 0%,transparent 100%);
    pointer-events:none;
    }

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

    .hero-tag{
    display:inline-flex;align-items:center;gap:.6rem;
    font-family:var(--mono);font-size:.68rem;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;
    color:var(--g);
    margin-bottom:2.5rem;
    }
    .hero-tag::before{
    content:'>';
    color:var(--g);font-weight:700;
    }

    .hero-name{
    font-family:var(--mono);
    font-size:clamp(2.8rem,5vw,5rem);
    font-weight:700;
    line-height:1;
    letter-spacing:-.03em;
    color:var(--th);
    margin-bottom:.5rem;
    opacity:0;
    animation:slidein .8s .1s forwards cubic-bezier(.16,1,.3,1);
    }
    .hero-role{
    font-family:var(--mono);
    font-size:clamp(1rem,2vw,1.5rem);
    font-weight:300;
    color:var(--g);
    margin-bottom:2rem;
    opacity:0;
    animation:slidein .8s .25s forwards cubic-bezier(.16,1,.3,1);
    }
    .hero-role .cursor-blink{
    display:inline-block;
    background:var(--g);
    width:2px;height:1.1em;
    vertical-align:text-bottom;
    margin-left:2px;
    animation:blink .9s step-end infinite;
    }
    .hero-desc{
    font-size:1rem;font-weight:300;color:var(--tm);
    max-width:540px;line-height:1.75;
    margin-bottom:2.5rem;
    opacity:0;
    animation:slidein .8s .4s forwards cubic-bezier(.16,1,.3,1);
    }
    @keyframes slidein{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}

    .hero-ctas{
    display:flex;gap:.75rem;flex-wrap:wrap;
    opacity:0;animation:slidein .8s .55s forwards cubic-bezier(.16,1,.3,1);
    }
    .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.7rem 1.5rem;
    font-family:var(--mono);font-size:.72rem;font-weight:500;
    letter-spacing:.08em;text-transform:uppercase;
    text-decoration:none;cursor:pointer;
    transition:all .2s;border:1px solid;
    }
    .btn-g{
    background:var(--g);color:#000;border-color:var(--g);
    box-shadow:0 0 20px rgba(57,255,20,.3);
    }
    .btn-g:hover{background:transparent;color:var(--g);box-shadow:0 0 30px rgba(57,255,20,.5)}
    .btn-o{
    background:transparent;color:var(--tm);border-color:var(--line);
    }
    .btn-o:hover{color:var(--th);border-color:var(--tm)}

    /* Hero Right — system stats */
    .hero-right{
    position:relative;z-index:2;
    opacity:0;animation:fadein .8s .6s forwards cubic-bezier(.16,1,.3,1);
    }
    @keyframes fadein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

    .sys-panel{
    border:1px solid var(--line2);
    background:var(--s1);
    font-family:var(--mono);
    }
    .sys-header{
    border-bottom:1px solid var(--line);
    padding:.6rem 1rem;
    display:flex;align-items:center;justify-content:space-between;
    }
    .sys-title{font-size:.65rem;color:var(--tl);letter-spacing:.15em;text-transform:uppercase}
    .sys-dots{display:flex;gap:.35rem}
    .sys-dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
    .sys-dot.active{background:var(--g);box-shadow:0 0 6px var(--g)}
    .sys-body{padding:1.25rem}
    .sys-row{
    display:flex;align-items:baseline;justify-content:space-between;
    padding:.5rem 0;border-bottom:1px solid var(--line);
    font-size:.72rem;
    }
    .sys-row:last-child{border-bottom:none}
    .sys-key{color:var(--tl);letter-spacing:.05em}
    .sys-val{color:var(--th);font-weight:500}
    .sys-val.green{color:var(--g)}
    .sys-val.amber{color:var(--amber)}
    .sys-bar-wrap{
    margin-top:1.25rem;padding-top:1.25rem;
    border-top:1px solid var(--line);
    }
    .sys-bar-label{
    display:flex;justify-content:space-between;
    font-size:.62rem;color:var(--tl);margin-bottom:.5rem;letter-spacing:.08em;
    }
    .sys-bar-track{
    height:3px;background:var(--s3);border-radius:0;overflow:hidden;margin-bottom:.75rem;
    }
    .sys-bar-fill{
    height:100%;background:var(--g);
    transform-origin:left;transform:scaleX(0);
    transition:transform 1.2s cubic-bezier(.16,1,.3,1);
    box-shadow:0 0 6px var(--g);
    }

    /* ══════════════════════════════════════════════
    SECTION CHROME
    ══════════════════════════════════════════════ */
    .sec{padding:5rem var(--px);border-bottom:1px solid var(--line)}
    .sec-inner{max-width:var(--max);margin:0 auto}

    .sec-head{
    display:flex;align-items:flex-end;justify-content:space-between;
    margin-bottom:3rem;padding-bottom:1.5rem;
    border-bottom:1px solid var(--line);
    }
    .sec-id{
    font-family:var(--mono);font-size:.65rem;color:var(--tl);
    letter-spacing:.15em;text-transform:uppercase;
    margin-bottom:.5rem;
    }
    .sec-title{
    font-family:var(--mono);
    font-size:clamp(1.5rem,3vw,2.4rem);
    font-weight:700;letter-spacing:-.03em;
    color:var(--th);line-height:1.1;
    }
    .sec-title span{color:var(--g)}
    .sec-note{
    font-family:var(--mono);font-size:.7rem;
    color:var(--tl);text-align:right;
    max-width:220px;line-height:1.5;
    }

    /* REVEAL */
    .rv{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
    .rv.on{opacity:1;transform:none}
    .d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

    /* ══════════════════════════════════════════════
    STACK — tech skills
    ══════════════════════════════════════════════ */
    #stack{background:var(--s1)}
    .stack-categories{display:flex;flex-direction:column;gap:0}
    .stack-cat{
    display:grid;grid-template-columns:160px 1fr;
    border-bottom:1px solid var(--line);
    }
    .stack-cat:last-child{border-bottom:none}
    .stack-cat-name{
    font-family:var(--mono);font-size:.65rem;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;
    color:var(--tl);
    padding:1.25rem 1.5rem 1.25rem 0;
    border-right:1px solid var(--line);
    display:flex;align-items:center;
    }
    .stack-pills{
    padding:1.25rem 0 1.25rem 1.5rem;
    display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
    }
    .pill{
    font-family:var(--mono);font-size:.7rem;font-weight:400;
    padding:.3rem .75rem;
    border:1px solid var(--line);
    color:var(--tm);
    transition:border-color .2s,color .2s,background .2s;
    letter-spacing:.04em;
    }
    .pill:hover{border-color:var(--g);color:var(--g);background:var(--g3)}
    .pill.featured{border-color:var(--g4);color:var(--g)}

    /* ══════════════════════════════════════════════
    PROYECTOS WEB
    ══════════════════════════════════════════════ */
    #proyectos{background:var(--bg)}
    .proj-list{display:flex;flex-direction:column;gap:0}
    .proj-item{
    display:grid;
    grid-template-columns:48px 1fr auto;
    gap:0;
    border-bottom:1px solid var(--line);
    transition:background .2s;
    text-decoration:none;color:inherit;
    position:relative;
    }
    .proj-item::before{
    content:'';
    position:absolute;left:0;top:0;bottom:0;width:2px;
    background:var(--g);transform:scaleY(0);transform-origin:bottom;
    transition:transform .3s cubic-bezier(.16,1,.3,1);
    }
    .proj-item:hover::before{transform:scaleY(1)}
    .proj-item:hover{background:var(--s1)}
    .proj-num{
    font-family:var(--mono);font-size:.65rem;color:var(--tl);
    padding:1.75rem 0 1.75rem 1.25rem;
    display:flex;align-items:flex-start;
    border-right:1px solid var(--line);
    letter-spacing:.05em;
    }
    .proj-content{
    padding:1.75rem 2rem;
    }
    .proj-tags{
    display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.6rem;
    }
    .tag{
    font-family:var(--mono);font-size:.58rem;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;
    padding:.15rem .5rem;
    background:var(--s3);
    color:var(--tl);
    border:1px solid var(--line);
    }
    .tag.t-green{color:var(--g);border-color:var(--line2);background:var(--g3)}
    .tag.t-amber{color:var(--amber);border-color:rgba(255,184,48,.2);background:rgba(255,184,48,.06)}
    .proj-name{
    font-family:var(--mono);font-size:1.05rem;font-weight:700;
    color:var(--th);margin-bottom:.4rem;letter-spacing:-.01em;
    }
    .proj-desc{
    font-size:.875rem;color:var(--tm);font-weight:300;line-height:1.6;
    }
    .proj-arrow{
    padding:1.75rem 1.75rem 1.75rem 0;
    display:flex;align-items:center;
    color:var(--tl);
    font-family:var(--mono);font-size:.8rem;
    transition:color .2s,transform .2s;
    }
    .proj-item:hover .proj-arrow{color:var(--g);transform:translateX(4px)}

    /* ══════════════════════════════════════════════
    HERRAMIENTAS — Focus Tracker separado de Plugins
    ══════════════════════════════════════════════ */
    #herramientas{background:var(--s1)}

    /* Sub-section headers inside herramientas */
    .tool-group{ margin-bottom:3rem; }
    .tool-group:last-child{ margin-bottom:0; }
    .tool-group-hdr{
    display:flex;align-items:center;gap:1rem;
    padding:.75rem 0;
    border-bottom:1px solid var(--line2);
    margin-bottom:1.5rem;
    }
    .tool-group-label{
    font-family:var(--mono);font-size:.65rem;font-weight:500;
    letter-spacing:.18em;text-transform:uppercase;
    color:var(--g);
    }
    .tool-group-count{
    font-family:var(--mono);font-size:.62rem;color:var(--tl);
    border:1px solid var(--line);padding:.1rem .45rem;
    }
    .tool-group-line{flex:1;height:1px;background:var(--line)}

    /* ── Focus Tracker card (full-width horizontal) ── */
    .ft-card{
    display:grid;grid-template-columns:1fr 1fr;gap:3rem;
    border:1px solid var(--line2);background:var(--bg);
    padding:2rem;
    text-decoration:none;color:inherit;
    transition:background .2s;
    position:relative;overflow:hidden;
    }
    .ft-card::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
    background:var(--g);transform:scaleY(0);transform-origin:bottom;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
    }
    .ft-card:hover::before{transform:scaleY(1)}
    .ft-card:hover{background:var(--s2)}
    .ft-left{}
    .ft-right{}
    .ft-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
    .ft-ico{
    width:44px;height:44px;
    border:1px solid var(--line2);background:var(--g3);
    display:flex;align-items:center;justify-content:center;
    color:var(--g);flex-shrink:0;
    }
    .ft-ico svg{width:22px;height:22px}
    .ft-badge{
    font-family:var(--mono);font-size:.6rem;font-weight:500;
    letter-spacing:.15em;text-transform:uppercase;
    color:var(--g);padding:.25rem .6rem;
    border:1px solid var(--line2);background:var(--g3);
    white-space:nowrap;height:fit-content;
    }
    .ft-name{
    font-family:var(--mono);font-size:1.25rem;font-weight:700;
    color:var(--th);margin-bottom:.5rem;letter-spacing:-.02em;
    }
    .ft-desc{
    font-size:.875rem;color:var(--tm);font-weight:300;
    line-height:1.65;margin-bottom:1.5rem;
    }
    .ft-meta{
    padding-top:1.25rem;border-top:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;
    }
    .ft-stack{display:flex;gap:.4rem;flex-wrap:wrap}

    /* ── Plugins grid ── */
    .plugins-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:1px;background:var(--line);
    }
    .plugin-item{
    background:var(--bg);padding:1.5rem;
    display:flex;flex-direction:column;
    text-decoration:none;color:inherit;
    transition:background .2s;
    position:relative;
    }
    .plugin-item:hover{background:var(--s2)}
    .plugin-item::after{
    content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
    background:var(--g);transform:scaleX(0);transform-origin:left;
    transition:transform .3s ease;
    }
    .plugin-item:hover::after{transform:scaleX(1)}
    .pi-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem}
    .pi-ico{
    width:34px;height:34px;
    border:1px solid var(--line);background:var(--s3);
    display:flex;align-items:center;justify-content:center;
    color:var(--g);flex-shrink:0;
    transition:background .2s,border-color .2s;
    }
    .pi-ico svg{width:16px;height:16px}
    .plugin-item:hover .pi-ico{background:var(--g3);border-color:var(--line2)}
    .pi-link{
    font-family:var(--mono);font-size:.6rem;color:var(--tl);
    display:flex;align-items:center;gap:.3rem;text-decoration:none;
    transition:color .2s;
    }
    .pi-link:hover, .plugin-item:hover .pi-link{color:var(--g)}
    .pi-link svg{width:10px;height:10px}
    .pi-name{
    font-family:var(--mono);font-size:.88rem;font-weight:700;
    color:var(--th);margin-bottom:.4rem;letter-spacing:-.01em;line-height:1.2;
    }
    .pi-desc{
    font-size:.8rem;color:var(--tm);font-weight:300;
    line-height:1.6;flex:1;margin-bottom:1rem;
    }
    .pi-tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:auto}
    .pi-tag{
    font-family:var(--mono);font-size:.58rem;color:var(--tl);
    border:1px solid var(--line);padding:.12rem .45rem;
    letter-spacing:.04em;
    }

    /* ══════════════════════════════════════════════
    EXPERIENCIA — timeline
    ══════════════════════════════════════════════ */
    #experiencia{background:var(--bg)}
    .timeline{position:relative;display:flex;flex-direction:column;gap:0}
    .timeline::before{
    content:'';position:absolute;left:160px;top:0;bottom:0;width:1px;
    background:var(--line);
    }
    .tl-item{
    display:grid;grid-template-columns:160px 1fr;
    gap:0;padding:2rem 0;
    border-bottom:1px solid var(--line);
    position:relative;
    }
    .tl-item::before{
    content:'';position:absolute;left:156px;top:2.4rem;
    width:9px;height:9px;
    border:1px solid var(--g);background:var(--bg);
    z-index:2;
    transition:background .2s;
    }
    .tl-item:hover::before{background:var(--g)}
    .tl-date{
    font-family:var(--mono);font-size:.68rem;color:var(--tl);
    letter-spacing:.06em;padding-right:2rem;
    padding-top:.15rem;
    }
    .tl-content{padding-left:2rem}
    .tl-role{
    font-family:var(--mono);font-size:.98rem;font-weight:700;
    color:var(--th);margin-bottom:.25rem;letter-spacing:-.01em;
    }
    .tl-org{
    font-family:var(--mono);font-size:.72rem;color:var(--g);
    letter-spacing:.05em;margin-bottom:.75rem;
    }
    .tl-desc{font-size:.875rem;color:var(--tm);font-weight:300;line-height:1.65;max-width:560px}

    /* ══════════════════════════════════════════════
    CONTACTO
    ══════════════════════════════════════════════ */
    #contacto{background:var(--s1)}
    .contact-split{
    display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;
    }
    .contact-left{}
    .contact-pre{
    font-family:var(--mono);font-size:.75rem;font-weight:300;
    color:var(--tm);line-height:1.8;margin-bottom:2rem;
    border-left:2px solid var(--g);
    padding-left:1.25rem;
    max-width:420px;
    }
    .contact-links{display:flex;flex-direction:column;gap:0}
    .c-link{
    display:flex;align-items:center;gap:1rem;
    padding:1rem 0;border-bottom:1px solid var(--line);
    text-decoration:none;color:inherit;
    transition:background .2s;
    }
    .c-link:hover .c-link-text{color:var(--g)}
    .c-link-ico{
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line);color:var(--tl);flex-shrink:0;
    transition:border-color .2s,color .2s,background .2s;
    }
    .c-link-ico svg{width:16px;height:16px}
    .c-link:hover .c-link-ico{border-color:var(--g);color:var(--g);background:var(--g3)}
    .c-link-text{
    font-family:var(--mono);font-size:.78rem;color:var(--tm);
    transition:color .2s;
    }
    .c-link-arrow{margin-left:auto;color:var(--tl);font-family:var(--mono);font-size:.75rem}

    .contact-form{}
    .form-terminal{
    border:1px solid var(--line2);background:var(--bg);
    }
    .ft-header{
    border-bottom:1px solid var(--line);
    padding:.5rem 1rem;
    display:flex;align-items:center;gap:.75rem;
    }
    .ft-prompt{font-family:var(--mono);font-size:.65rem;color:var(--g);letter-spacing:.08em}
    .ft-body{padding:1.5rem}
    .fg{margin-bottom:1.25rem}
    .fg label{
    display:flex;align-items:center;gap:.5rem;
    font-family:var(--mono);font-size:.65rem;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--tl);margin-bottom:.4rem;
    }
    .fg label .lnum{color:var(--line);margin-right:.25em}
    .fg input,.fg select,.fg textarea{
    width:100%;background:var(--s2);border:1px solid var(--line);
    border-radius:0;padding:.7rem .9rem;
    font-family:var(--mono);font-size:.82rem;
    color:var(--th);outline:none;
    transition:border-color .2s,background .2s;
    }
    .fg input:focus,.fg select:focus,.fg textarea:focus{
    border-color:var(--g);background:var(--s3);
    }
    .fg input::placeholder,.fg textarea::placeholder{color:var(--tl)}
    .fg select option{background:var(--s2)}
    .fg textarea{resize:vertical;min-height:100px}
    .fg.half-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
    .btn-submit{
    width:100%;padding:.8rem 1.5rem;
    font-family:var(--mono);font-size:.72rem;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;
    background:var(--g);color:#000;border:1px solid var(--g);
    cursor:pointer;
    transition:all .2s;
    box-shadow:0 0 20px rgba(57,255,20,.25);
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    }
    .btn-submit:hover{background:transparent;color:var(--g);box-shadow:0 0 30px rgba(57,255,20,.4)}
    .btn-submit svg{width:14px;height:14px}

    /* ══════════════════════════════════════════════
    FOOTER
    ══════════════════════════════════════════════ */
    footer{
    border-top:1px solid var(--line);
    background:var(--bg);
    padding:2rem var(--px);
    display:flex;align-items:center;justify-content:space-between;
    }
    .foot-inner{
    width:100%;max-width:var(--max);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    }
    .foot-left{
    font-family:var(--mono);font-size:.65rem;color:var(--tl);letter-spacing:.08em;
    }
    .foot-left a{color:var(--tm);text-decoration:none;transition:color .15s}
    .foot-left a:hover{color:var(--g)}
    .foot-right{
    font-family:var(--mono);font-size:.65rem;color:var(--tl);
    display:flex;align-items:center;gap:1.5rem;
    }
    .foot-right a{color:var(--tl);text-decoration:none;transition:color .15s;letter-spacing:.05em}
    .foot-right a:hover{color:var(--g)}

    /* ══════════════════════════════════════════════
    RESPONSIVE
    ══════════════════════════════════════════════ */
    @media(max-width:900px){
    nav{padding:.875rem 1.25rem}
    .nav-links{display:none}
    .hero{padding:7rem 1.25rem 3rem}
    .hero-inner{grid-template-columns:1fr}
    .hero-right{display:none}
    .sec{padding:4rem 1.25rem}
    .stack-cat{grid-template-columns:1fr;gap:0}
    .stack-cat-name{border-right:none;border-bottom:1px solid var(--line);padding:.75rem 0}
    .stack-pills{padding:.75rem 0}
    .proj-item{grid-template-columns:36px 1fr auto}
    .proj-num{padding:.75rem 0 .75rem .75rem}
    .proj-content{padding:1.25rem .75rem}
    .proj-arrow{padding:.75rem .75rem .75rem 0}
    /* tools */
    .ft-card{grid-template-columns:1fr}
    .plugins-grid{grid-template-columns:1fr}
    /* timeline */
    .timeline::before{left:80px}
    .tl-item{grid-template-columns:80px 1fr}
    .tl-item::before{left:76px}
    /* contact */
    .contact-split{grid-template-columns:1fr}
    .sec-head{flex-direction:column;align-items:flex-start;gap:.5rem}
    .sec-note{text-align:left;max-width:100%}
    /* footer */
    footer{padding:1.5rem 1.25rem}
    .foot-inner{flex-direction:column;gap:1rem;text-align:center}
    .foot-right{flex-wrap:wrap;justify-content:center}
    .fg.half-row{grid-template-columns:1fr}
    .crt-toggle{font-size:.55rem;padding:.4rem .65rem}
    }