/* ─── TOKENS ─────────────────────────────────────────────── */
    :root {
      --bg:        #07070c;
      --surface:   #0e0e18;
      --surface2:  #14142280;
      --border:    rgba(0,245,212,0.10);
      --dim:       #1e1e2e;
      --cyan:      #00f5d4;
      --magenta:   #ff2d78;
      --yellow:    #ffd60a;
      --text:      #e8e6f0;
      --muted:     #5a5a72;
      --display:   'Bebas Neue', 'Arial Black', sans-serif;
      --mono:      'Space Mono', 'Courier New', monospace;
      --ease:      cubic-bezier(0.4,0,0.2,1);
    }

    /* ─── RESET ──────────────────────────────────────────────── */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      background:var(--bg);
      color:var(--text);
      font-family:var(--mono);
      font-size:14px;
      line-height:1.7;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}

    ::-webkit-scrollbar{width:3px}
    ::-webkit-scrollbar-track{background:var(--bg)}
    ::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:2px}

    /* ─── GRAIN OVERLAY ──────────────────────────────────────── */
    body::after{
      content:'';
      position:fixed;inset:0;
      pointer-events:none;
      z-index:9999;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      opacity:.4;
    }

    /* ─── NAV ────────────────────────────────────────────────── */
    nav{
      position:fixed;top:0;left:0;right:0;
      z-index:1000;
      display:flex;align-items:center;justify-content:space-between;
      padding:1.1rem 3rem;
      background:rgba(7,7,12,0.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid var(--border);
    }
    .nav-logo{
      font-family:var(--display);
      font-size:1.5rem;letter-spacing:.12em;
      color:var(--cyan);
      cursor:pointer;
      user-select:none;
    }
    .g-fall{
      display:inline-block;
      line-height:1;
      transform-origin:100% 78%;
    }
    .nav-word{ cursor:pointer; }
    @keyframes gFall{
      0%   {transform:rotate(0deg)}
      42%  {transform:rotate(-176deg)}
      56%  {transform:rotate(-150deg)}
      68%  {transform:rotate(-168deg)}
      78%  {transform:rotate(-155deg)}
      86%  {transform:rotate(-163deg)}
      92%  {transform:rotate(-158deg)}
      96%  {transform:rotate(-161deg)}
      100% {transform:rotate(-160deg)}
    }
    .g-fall.falling{
      animation:gFall 1.1s cubic-bezier(.3,0,.2,1) forwards;
    }
    @keyframes gReturn{
      0%   {transform:rotate(-160deg)}
      55%  {transform:rotate(10deg)}
      72%  {transform:rotate(-4deg)}
      86%  {transform:rotate(2deg)}
      100% {transform:rotate(0deg)}
    }
    .g-fall.returning{
      animation:gReturn .6s cubic-bezier(.4,0,.2,1) forwards;
    }
    .nav-links{display:flex;gap:2rem;list-style:none}
    .nav-links a{
      font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
      color:var(--muted);
      transition:color .25s var(--ease);
    }
    .nav-links a:hover,.nav-links a.active{color:var(--cyan)}
    .nav-toggle{
      display:none;flex-direction:column;gap:5px;
      background:none;border:none;cursor:pointer;padding:4px;
    }
    .nav-toggle span{
      width:22px;height:1.5px;background:var(--text);
      transition:.3s var(--ease);display:block;
    }

    /* ─── HERO ───────────────────────────────────────────────── */
    .hero{
      position:relative;min-height:100vh;
      display:flex;flex-direction:column;justify-content:center;
      padding:0 3rem;overflow:hidden;
    }
    /* animated grid */
    .hero-grid{
      position:absolute;inset:0;
      background-image:
        linear-gradient(rgba(0,245,212,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,245,212,.04) 1px,transparent 1px);
      background-size:64px 64px;
      animation:gridMove 28s linear infinite;
      will-change:background-position;
    }
    @keyframes gridMove{
      0%{background-position:0 0}
      100%{background-position:64px 64px}
    }
    /* scanlines */
    .hero::before{
      content:'';position:absolute;inset:0;
      background:repeating-linear-gradient(
        0deg,transparent,transparent 3px,
        rgba(0,0,0,.07) 3px,rgba(0,0,0,.07) 4px);
      pointer-events:none;z-index:1;
    }
    /* diagonal glow */
    .hero::after{
      content:'';position:absolute;
      top:0;right:0;width:45%;height:100%;
      background:linear-gradient(150deg,transparent 0%,rgba(0,245,212,.025) 50%,transparent 100%);
      clip-path:polygon(30% 0,100% 0,100% 100%,0 100%);
      pointer-events:none;
    }
    .hero-content{
      position:relative;z-index:2;
      max-width:1200px;margin:0 auto;width:100%;
    }
    .hero-eyebrow{
      display:flex;align-items:center;gap:1rem;
      margin-bottom:1.8rem;
    }
    .hero-eyebrow::before{
      content:'';width:36px;height:1px;background:var(--cyan);
    }
    .hero-eyebrow span{
      font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
      color:var(--cyan);
    }
    .hero-name{
      font-family:var(--display);
      font-size:clamp(4.5rem,13vw,13rem);
      line-height:.9;letter-spacing:-.01em;
      color:var(--text);text-transform:uppercase;
      animation:glitch 5s steps(1) infinite;
    }
    @keyframes glitch{
      /* idle */
      0%,66%,100%{transform:none;text-shadow:none;clip-path:none}

      /* — first burst — */
      68%{
        transform:translateX(-5px);
        text-shadow:5px 0 var(--magenta),-5px 0 var(--cyan);
        clip-path:inset(15% 0 65% 0);
      }
      69%{
        transform:translateX(5px);
        text-shadow:-5px 0 var(--magenta),5px 0 var(--cyan);
        clip-path:inset(60% 0 10% 0);
      }
      70%{transform:none;text-shadow:none;clip-path:none}
      71%{
        transform:translateX(-2px) skewX(-4deg);
        text-shadow:2px 0 var(--cyan);
        clip-path:inset(40% 0 40% 0);
      }
      72%{transform:none;text-shadow:none;clip-path:none}

      /* — brief pause — */

      /* — second burst — */
      76%{
        transform:translateX(4px);
        text-shadow:-4px 0 var(--magenta),4px 0 var(--cyan);
        clip-path:inset(25% 0 55% 0);
      }
      77%{
        transform:translateX(-4px) skewX(3deg);
        text-shadow:4px 0 var(--magenta);
        clip-path:inset(55% 0 20% 0);
      }
      78%{transform:none;text-shadow:none;clip-path:none}
      79%{
        transform:translateX(2px);
        text-shadow:-2px 0 var(--cyan);
        clip-path:inset(35% 0 35% 0);
      }
      80%{transform:none;text-shadow:none;clip-path:none}
    }
    .hero-subtitle{
      margin-top:1.5rem;
      font-size:clamp(.7rem,1.4vw,.95rem);
      letter-spacing:.22em;text-transform:uppercase;
      color:var(--muted);
      display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
    }
    .hero-subtitle .dot{
      width:4px;height:4px;border-radius:50%;
      background:var(--magenta);flex-shrink:0;
    }
    .hero-tagline{
      margin-top:2rem;
      font-size:clamp(.85rem,1.8vw,1.05rem);
      color:var(--text);max-width:520px;line-height:1.9;
    }
    .hero-tagline em{color:var(--cyan);font-style:normal}
    .hero-cta{
      margin-top:3rem;
      display:flex;gap:1.2rem;flex-wrap:wrap;
    }
    .btn{
      display:inline-flex;align-items:center;gap:.6rem;
      padding:.8rem 1.8rem;
      font-family:var(--mono);font-size:.65rem;
      font-weight:700;letter-spacing:.14em;text-transform:uppercase;
      cursor:pointer;border:none;
      clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
      transition:.25s var(--ease);
    }
    .btn-fill{background:var(--cyan);color:var(--bg)}
    .btn-fill:hover{background:var(--magenta);transform:translateY(-2px)}
    .btn-ghost{
      background:transparent;color:var(--text);
      border:1px solid var(--dim);
    }
    .btn-ghost:hover{
      border-color:var(--cyan);color:var(--cyan);
      transform:translateY(-2px);
    }
    .hero-scroll{
      position:absolute;bottom:2.5rem;left:50%;
      transform:translateX(-50%);
      display:flex;flex-direction:column;align-items:center;gap:.5rem;
      z-index:2;cursor:pointer;
    }
    .hero-scroll span{
      font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
      color:var(--muted);
    }
    .scroll-line{
      width:1px;height:36px;
      background:linear-gradient(to bottom,var(--cyan),transparent);
      animation:scrollPulse 2s ease-in-out infinite;
    }
    @keyframes scrollPulse{
      0%,100%{opacity:.3;transform:scaleY(1)}
      50%{opacity:1;transform:scaleY(1.3)}
    }

    /* ─── SECTION WRAPPER ────────────────────────────────────── */
    .section{
      padding:8rem 3rem;
      max-width:1200px;margin:0 auto;
      opacity:0;transform:translateY(40px);
      transition:opacity .75s ease,transform .75s ease;
    }
    .section.visible{opacity:1;transform:none}
    .sep{
      width:100%;height:1px;
      background:linear-gradient(to right,transparent,var(--border),transparent);
    }
    .section-header{
      display:flex;align-items:baseline;gap:1.5rem;
      margin-bottom:5rem;
    }
    .section-num{
      font-family:var(--display);
      font-size:clamp(4rem,9vw,7rem);
      line-height:1;color:var(--dim);user-select:none;
    }
    .section-label{
      display:block;
      font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;
      color:var(--cyan);margin-bottom:.25rem;
    }
    .section-title{
      font-family:var(--display);
      font-size:clamp(2.2rem,4.5vw,3.8rem);
      letter-spacing:.05em;line-height:1;color:var(--text);
    }

    /* ─── ABOUT ──────────────────────────────────────────────── */
    .about-grid{
      display:grid;grid-template-columns:1fr 1fr;
      gap:5rem;align-items:start;
    }
    /* profile image */
    .profile-wrap{position:relative;width:220px;height:280px;margin-bottom:2.5rem}
    .profile-wrap::before{
      content:'';position:absolute;top:-8px;left:-8px;
      width:36px;height:36px;
      border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);
      z-index:5;
    }
    .profile-wrap::after{
      content:'';position:absolute;bottom:-8px;right:-8px;
      width:36px;height:36px;
      border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan);
      z-index:5;
    }

    /* image box — holds all fx */
    .profile-img-box{
      position:relative;width:100%;height:100%;overflow:hidden;
      clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
      cursor:pointer;
    }

    /* the actual photo */
    .profile-img-box img{
      width:100%;height:100%;object-fit:cover;display:block;
      filter:grayscale(45%) contrast(1.08) brightness(0.88);
      transition:filter .5s ease;
      will-change:filter,transform;
    }
    .profile-img-box:hover img{
      filter:grayscale(0%) contrast(1.05) brightness(1.0);
      animation:imgGlitch .55s steps(1) 1;
    }
    @keyframes imgGlitch{
      0%  {transform:none;filter:grayscale(0%) contrast(1.05)}
      14% {transform:translateX(-5px);
           filter:grayscale(0%) contrast(1.3) hue-rotate(20deg) saturate(2.5)}
      28% {transform:translateX(5px) skewX(-3deg);
           filter:grayscale(0%) contrast(1.1) hue-rotate(-20deg)}
      42% {transform:translateX(-3px);
           filter:grayscale(0%) contrast(1.4) brightness(1.3)}
      56% {transform:translateX(2px) skewX(2deg);
           filter:grayscale(0%) contrast(1.2)}
      70% {transform:none;filter:grayscale(0%) contrast(1.05)}
      100%{transform:none;filter:grayscale(0%) contrast(1.05)}
    }

    /* sweeping cyan scan line */
    .profile-img-box::before{
      content:'';
      position:absolute;left:0;right:0;height:2px;
      background:linear-gradient(to right,transparent 0%,rgba(0,245,212,.9) 50%,transparent 100%);
      box-shadow:0 0 8px rgba(0,245,212,.7),0 0 24px rgba(0,245,212,.3);
      animation:scanDown 3.5s ease-in-out infinite;
      z-index:3;pointer-events:none;
    }
    @keyframes scanDown{
      0%  {top:-4%;opacity:0}
      4%  {opacity:1}
      96% {opacity:.7}
      100%{top:104%;opacity:0}
    }

    /* persistent CRT scanline texture + cyan tint vignette */
    .profile-img-box::after{
      content:'';position:absolute;inset:0;
      background:
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 3px,
          rgba(0,0,0,.1) 3px,
          rgba(0,0,0,.1) 4px
        ),
        radial-gradient(ellipse at center,transparent 55%,rgba(0,245,212,.08) 100%);
      pointer-events:none;z-index:2;
      transition:opacity .4s;
    }
    .profile-img-box:hover::after{opacity:.4}
    .about-name{
      font-family:var(--display);font-size:2.4rem;
      letter-spacing:.05em;color:var(--text);margin-bottom:.2rem;
    }
    .about-role{
      font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
      color:var(--cyan);margin-bottom:1.5rem;
    }
    .about-bio{font-size:.82rem;color:var(--muted);line-height:1.9}

    /* ─── ABOUT TERMINAL ─────────────────────────────────── */
    .about-terminal{
      margin-top:1.5rem;
      background:rgba(0,0,0,.3);
      border:1px solid rgba(0,245,212,.12);
      border-left:3px solid var(--cyan);
      padding:.9rem 1.3rem;
      display:flex;flex-direction:column;gap:.4rem;
    }
    .term-row{
      display:grid;
      grid-template-columns:.8rem 9rem 1fr;
      align-items:center;gap:.5rem;
      font-size:.72rem;font-family:var(--mono);
      opacity:0;transform:translateX(-8px);
      transition:opacity .35s var(--ease),transform .35s var(--ease);
    }
    .about-terminal.visible .term-row:nth-child(1){opacity:1;transform:none;transition-delay:.08s}
    .about-terminal.visible .term-row:nth-child(2){opacity:1;transform:none;transition-delay:.22s}
    .about-terminal.visible .term-row:nth-child(3){opacity:1;transform:none;transition-delay:.36s}
    .about-terminal.visible .term-row:nth-child(4){opacity:1;transform:none;transition-delay:.50s}
    .about-terminal.visible .term-row:nth-child(5){opacity:1;transform:none;transition-delay:.64s}
    .term-prompt{color:var(--cyan);opacity:.5;justify-self:center}
    .term-key{color:var(--muted);letter-spacing:.06em}
    .term-val{color:var(--text)}
    .term-cursor{
      width:7px;height:.85em;background:var(--cyan);
      display:inline-block;
      animation:termBlink .85s step-end infinite;
    }
    @keyframes termBlink{50%{opacity:0}}

    /* contact cards */
    .contact-stack{display:flex;flex-direction:column;gap:.7rem}
    .contact-section-label{
      font-size:.58rem;letter-spacing:.25em;text-transform:uppercase;
      color:var(--cyan);margin-bottom:1.2rem;
    }
    .cc{
      display:flex;align-items:center;gap:1rem;
      padding:.9rem 1.2rem;
      background:var(--surface);border:1px solid var(--border);
      clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
      transition:.25s var(--ease);
    }
    .cc:hover{border-color:rgba(0,245,212,.3);background:var(--surface2)}
    .cc-icon{
      width:34px;height:34px;display:flex;align-items:center;justify-content:center;
      color:var(--cyan);flex-shrink:0;
    }
    .cc-icon svg{width:17px;height:17px}
    .cc-lbl{
      display:block;font-size:.58rem;letter-spacing:.14em;
      text-transform:uppercase;color:var(--muted);margin-bottom:.1rem;
    }
    .cc-val{font-size:.78rem;color:var(--text)}
    .cc-val a{color:var(--text);transition:color .2s}
    .cc-val a:hover{color:var(--cyan)}

    /* ─── SKILLS ─────────────────────────────────────────────── */
    .skills-grid{
      display:grid;grid-template-columns:repeat(2,1fr);
      gap:1.4rem 4rem;
    }
    .skill-cat{
      grid-column:1/-1;
      font-size:.58rem;letter-spacing:.25em;text-transform:uppercase;
      color:var(--magenta);padding-bottom:.3rem;
      border-bottom:1px solid var(--dim);
      margin-top:2rem;
    }
    .skill-cat:first-child{margin-top:0}
    .skill-row{}
    .skill-hdr{
      display:flex;justify-content:space-between;
      align-items:baseline;margin-bottom:.55rem;
    }
    .skill-name{
      font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
      color:var(--text);
    }
    .skill-pct{
      font-size:.65rem;color:var(--muted);
      font-variant-numeric:tabular-nums;
    }
    .skill-track{width:100%;height:2px;background:var(--dim);position:relative}
    .skill-fill{
      height:100%;width:0;
      background:linear-gradient(to right,var(--cyan),var(--magenta));
      transition:width 1.3s var(--ease);
      position:relative;
      overflow:hidden;
    }
    /* shimmer: 40% wide, translateX goes from -100% to +300% of itself
       = crosses from off-left to off-right of the fill, clipped by overflow:hidden */
    .skill-fill::before{
      content:'';
      position:absolute;
      top:0;bottom:0;left:0;
      width:40%;
      background:linear-gradient(to right,
        transparent 0%,
        rgba(255,255,255,.4) 25%,
        #fff 50%,
        rgba(255,255,255,.4) 75%,
        transparent 100%
      );
      mix-blend-mode:screen;
      filter:brightness(1.8);
      transform:translateX(-100%);
      pointer-events:none;
    }
    .skill-fill.lit::before{
      animation:barShimmer 15s ease-in-out infinite;
      animation-delay:var(--shimmer-delay, 1.25s);
    }
    @keyframes barShimmer{
      0%      {transform:translateX(-100%)}
      33.33%  {transform:translateX(300%)}
      33.34%  {transform:translateX(-100%)}
      100%    {transform:translateX(-100%)}
    }
    .skill-fill::after{
      content:'';position:absolute;right:0;top:50%;
      transform:translateY(-50%);
      width:4px;height:4px;border-radius:50%;
      background:rgba(255,255,255,.95);
      opacity:0;transition:opacity .3s .8s;
    }
    .skill-fill.lit::after{opacity:1}

    /* ─── PROJECTS ───────────────────────────────────────────── */
    .projects-grid{
      display:grid;grid-template-columns:repeat(2,1fr);
      gap:1.4rem;
    }
    .pcard{
      background:var(--surface);border:1px solid var(--border);
      padding:2rem;
      clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
      position:relative;overflow:hidden;
      transition:.3s var(--ease);cursor:default;
    }
    .pcard::before{
      content:attr(data-num);
      font-family:var(--display);font-size:6.5rem;
      position:absolute;bottom:-1rem;right:0.4rem;
      color:var(--dim);line-height:1;pointer-events:none;
      transition:.3s var(--ease);
    }
    .pcard:hover{
      border-color:rgba(0,245,212,.28);
      background:#0e0e20;
      transform:translateY(-3px);
      box-shadow:0 20px 60px rgba(0,245,212,.07);
    }
    .pcard:hover::before{color:rgba(0,245,212,.06)}
    .pcard-date{
      font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;
      color:var(--magenta);margin-bottom:.7rem;
    }
    .pcard-title{
      font-family:var(--display);font-size:1.35rem;
      letter-spacing:.04em;color:var(--text);
      margin-bottom:.7rem;line-height:1.1;
    }
    .pcard-desc{
      font-size:.76rem;color:var(--muted);
      line-height:1.85;margin-bottom:1.4rem;
      position:relative;z-index:1;
    }
    .tags{display:flex;flex-wrap:wrap;gap:.35rem;position:relative;z-index:1}
    .tag{
      font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
      padding:.2rem .55rem;
      background:var(--surface2);border:1px solid var(--border);
      color:var(--cyan);
    }

    /* ─── EDUCATION ──────────────────────────────────────────── */
    .edu-timeline{position:relative;padding-left:3rem}
    .edu-timeline::before{
      content:'';position:absolute;
      left:0;top:8px;bottom:8px;width:1px;
      background:linear-gradient(to bottom,var(--cyan),var(--magenta),transparent);
    }
    .edu-item{position:relative;padding-bottom:3.5rem}
    .edu-item:last-child{padding-bottom:0}
    .edu-dot{
      position:absolute;left:-3rem;top:7px;
      width:10px;height:10px;border-radius:50%;
      background:var(--bg);border:2px solid var(--cyan);
      transform:translateX(-4px);
    }
    .edu-dot::after{
      content:'';position:absolute;inset:-4px;border-radius:50%;
      border:1px solid rgba(0,245,212,.2);
      animation:ping 2.5s ease-in-out infinite;
    }
    .edu-item:nth-child(2) .edu-dot{border-color:var(--magenta)}
    .edu-item:nth-child(2) .edu-dot::after{border-color:rgba(255,45,120,.2)}
    .edu-item:nth-child(3) .edu-dot{border-color:var(--yellow)}
    .edu-item:nth-child(3) .edu-dot::after{border-color:rgba(255,214,10,.2)}
    @keyframes ping{
      0%,100%{transform:scale(1);opacity:.5}
      50%{transform:scale(2.2);opacity:0}
    }
    /* Education glitch reveal */
    .edu-item{ opacity:0; }

    @keyframes eduReveal {
      0%   { opacity:0; transform:translateX(-18px); }
      10%  { opacity:1; transform:translateX(9px);
             text-shadow:5px 0 var(--magenta),-5px 0 var(--cyan);
             filter:brightness(2) saturate(3); }
      15%  { transform:translateX(-8px);
             text-shadow:-4px 0 var(--magenta),4px 0 var(--cyan); }
      20%  { transform:translateX(5px); text-shadow:none; filter:none; }
      25%  { transform:translateX(-3px); }
      30%  { transform:none; }
      55%  { transform:none; opacity:1; }
      57%  { transform:translateX(-4px); opacity:.75;
             filter:brightness(1.6);
             text-shadow:3px 0 var(--cyan); }
      60%  { transform:translateX(4px);
             text-shadow:-3px 0 var(--magenta); }
      63%  { transform:none; opacity:1; filter:none; text-shadow:none; }
      100% { transform:none; opacity:1; }
    }
    .edu-glitch { animation:eduReveal .9s ease-out forwards; }

    .edu-period{
      font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
      color:var(--muted);margin-bottom:.4rem;
    }
    .edu-degree{
      font-family:var(--display);font-size:1.65rem;
      letter-spacing:.04em;color:var(--text);
      line-height:1.1;margin-bottom:.35rem;
    }
    .edu-school{font-size:.78rem;color:var(--cyan)}

    /* ─── LANGUAGES ──────────────────────────────────────────── */
    .lang-grid{
      display:grid;grid-template-columns:repeat(2,1fr);
      gap:1.4rem;
    }
    .lcard{
      position:relative;
      padding:2rem;background:var(--surface);border:1px solid var(--border);
      clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px));
      transition:border-color .25s var(--ease), background .25s var(--ease);
      opacity:0;
    }
    .lcard:hover{border-color:rgba(0,245,212,.22);background:#0e0e20}
    .lcard.lang-active{
      border-color:rgba(255,30,30,.8) !important;
      background:rgba(255,10,10,.04) !important;
      animation:holoFlicker 3s ease-in-out infinite !important;
    }
    @keyframes holoFlicker{
      0%,100%{opacity:1;box-shadow:0 0 16px rgba(255,30,30,.25),inset 0 0 18px rgba(255,30,30,.06);border-color:rgba(255,40,40,.8)}
      20%    {opacity:1;box-shadow:0 0 8px  rgba(255,30,30,.12),inset 0 0 8px  rgba(255,30,30,.03);border-color:rgba(255,40,40,.45)}
      40%    {opacity:1;box-shadow:0 0 28px rgba(255,30,30,.4), inset 0 0 24px rgba(255,30,30,.09);border-color:rgba(255,60,60,.95)}
      55%    {opacity:1;box-shadow:0 0 6px  rgba(255,30,30,.1), inset 0 0 6px  rgba(255,30,30,.02);border-color:rgba(255,30,30,.3)}
      75%    {opacity:1;box-shadow:0 0 22px rgba(255,30,30,.3), inset 0 0 20px rgba(255,30,30,.07);border-color:rgba(255,50,50,.85)}
    }
    .lcard.lang-active .lcard-name{
      color:#ff3333 !important;
      text-shadow:0 0 8px rgba(255,40,40,.95),0 0 20px rgba(255,40,40,.5),0 0 40px rgba(255,30,30,.25) !important;
    }
    .lcard.lang-active .lcard-lvl{ color:rgba(255,100,100,.8) !important; }
    .contam-beam{
      position:fixed;z-index:11000;pointer-events:none;
      box-shadow:0 0 12px rgba(255,30,30,.8),0 0 28px rgba(255,30,30,.4);
    }
    .lcard::after{
      content:'';
      position:absolute;inset:0;
      background:radial-gradient(
        circle at var(--mx,50%) var(--my,50%),
        rgba(0,245,212,.13) 0%,
        rgba(0,245,212,.04) 35%,
        transparent 65%
      );
      pointer-events:none;z-index:1;
      opacity:0;transition:opacity .35s;
    }
    .lcard:hover::after{opacity:1}

    @keyframes langSlideLeft{
      0%  {transform:translateX(-55px) skewX(5deg);opacity:0;filter:brightness(2.5)}
      50% {transform:translateX(7px)   skewX(-1deg);opacity:1;filter:brightness(1.4)}
      70% {transform:translateX(-4px);filter:brightness(1)}
      85% {transform:translateX(2px)}
      100%{transform:translateX(0) skewX(0);opacity:1;filter:brightness(1)}
    }
    @keyframes langSlideRight{
      0%  {transform:translateX(55px)  skewX(-5deg);opacity:0;filter:brightness(2.5)}
      50% {transform:translateX(-7px)  skewX(1deg); opacity:1;filter:brightness(1.4)}
      70% {transform:translateX(4px);filter:brightness(1)}
      85% {transform:translateX(-2px)}
      100%{transform:translateX(0) skewX(0);opacity:1;filter:brightness(1)}
    }
    .lcard.slide-left  {animation:langSlideLeft  .75s cubic-bezier(.4,0,.2,1) forwards}
    .lcard.slide-right {animation:langSlideRight .75s cubic-bezier(.4,0,.2,1) forwards}
    .lcard-hdr{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}
    .lcard-flag{
      position:relative;
      width:42px;height:42px;border-radius:50%;
      background:var(--dim);border:1px solid var(--border);
      display:flex;align-items:center;justify-content:center;
      flex-shrink:0;overflow:hidden;
    }

    /* shimmer sweep */
    .lcard-flag::after{
      content:'';
      position:absolute;
      top:0;bottom:0;width:45%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
      animation:flagShimmer 4s ease-in-out infinite;
      pointer-events:none;z-index:2;
    }
    @keyframes flagShimmer{
      0%  {transform:translateX(-180%);opacity:0}
      12% {opacity:1}
      88% {opacity:.7}
      100%{transform:translateX(280%);opacity:0}
    }

    /* bob + breathe */
    @keyframes flagFloat{
      0%,100%{transform:scale(1)   translateY(0px)}
      50%    {transform:scale(1.07) translateY(-3px)}
    }
    .lcard-flag img{
      width:100%;height:100%;object-fit:cover;border-radius:50%;
      position:relative;z-index:1;
      animation:flagFloat 3.2s ease-in-out infinite;
    }

    /* stagger each flag so they never bob in unison */
    .lcard:nth-child(1) .lcard-flag img  { animation-delay:  0s    }
    .lcard:nth-child(2) .lcard-flag img  { animation-delay: -0.8s  }
    .lcard:nth-child(3) .lcard-flag img  { animation-delay: -1.6s  }
    .lcard:nth-child(4) .lcard-flag img  { animation-delay: -2.4s  }
    .lcard:nth-child(1) .lcard-flag::after { animation-delay:  0s    }
    .lcard:nth-child(2) .lcard-flag::after { animation-delay: -1s    }
    .lcard:nth-child(3) .lcard-flag::after { animation-delay: -2s    }
    .lcard:nth-child(4) .lcard-flag::after { animation-delay: -3s    }
    .lcard-name{
      font-family:var(--display);font-size:1.6rem;
      letter-spacing:.04em;color:var(--text);line-height:1;
    }
    .lcard-lvl{
      font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
      color:var(--muted);
    }
    .lcard-track{width:100%;height:2px;background:var(--dim);margin-bottom:1rem}
    .lcard-fill{
      height:100%;width:0;
      transition:width 1.2s var(--ease);
    }
    .lang-native  .lcard-fill{background:linear-gradient(to right,#4ade80,#22d3ee)}
    .lang-fluent  .lcard-fill{background:linear-gradient(to right,#60a5fa,#818cf8)}
    .lang-basic   .lcard-fill{background:linear-gradient(to right,#fbbf24,#f59e0b)}
    .lcard-desc{font-size:.73rem;color:var(--muted);line-height:1.75}

    /* ─── CONTACT FINALE ─────────────────────────────────────── */
    .contact-finale{
      background:var(--surface);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      padding:7rem 3rem;
      opacity:0;transform:translateY(40px);
      transition:opacity .75s ease,transform .75s ease;
    }
    .contact-finale.visible{opacity:1;transform:none}
    .contact-inner{
      max-width:1200px;margin:0 auto;
      display:grid;grid-template-columns:1fr auto;
      gap:4rem;align-items:center;
    }
    .contact-headline{
      font-family:var(--display);
      font-size:clamp(3rem,7vw,7.5rem);
      line-height:.93;letter-spacing:.02em;
    }
    .contact-headline span{display:block;color:var(--dim)}
    .contact-headline span.hi{color:var(--cyan)}
    .contact-list{display:flex;flex-direction:column;gap:1rem}
    .contact-item{
      display:flex;align-items:center;gap:.75rem;
      font-size:.8rem;color:var(--muted);
      transition:color .2s;
    }
    .contact-item:hover{color:var(--cyan)}
    .contact-item::before{content:'→';color:var(--cyan)}

    /* ─── FOOTER ─────────────────────────────────────────────── */
    footer{
      padding:1.8rem 3rem;
      max-width:1200px;margin:0 auto;
      display:flex;justify-content:space-between;align-items:center;
      font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
      color:var(--muted);
    }

    /* ─── BORDER GLITCH FLICKER ─────────────────────────────── */
    @keyframes borderFlicker {
      0%   { box-shadow: none; }
      7%   { box-shadow: 0 0 0 1px rgba(0,245,212,.95), 0 0 14px rgba(0,245,212,.4); }
      9%   { box-shadow: none; }
      18%  { box-shadow: 0 0 0 1px rgba(0,245,212,.7), 0 0 8px rgba(0,245,212,.2); }
      20%  { box-shadow: none; }
      31%  { box-shadow: 0 0 0 1px rgba(0,245,212,.9), 0 0 18px rgba(0,245,212,.35); }
      33%  { box-shadow: none; }
      46%  { box-shadow: 0 0 0 1px rgba(0,245,212,.6); }
      48%  { box-shadow: none; }
      62%  { box-shadow: 0 0 0 1px rgba(0,245,212,.8), 0 0 10px rgba(0,245,212,.25); }
      64%  { box-shadow: none; }
      76%  { box-shadow: 0 0 0 1px rgba(0,245,212,.5); }
      88%  { box-shadow: 0 0 0 1px rgba(0,245,212,.3); }
      100% { box-shadow: none; }
    }
    .glitch-border { animation: borderFlicker 1.3s ease-out; }

    /* ─── ENTRANCE ───────────────────────────────────────────── */
    .fu{
      opacity:0;transform:translateY(28px);
      transition:opacity .6s ease,transform .6s ease;
    }
    .fu.visible{opacity:1;transform:none}

    /* ─── PROJECT CARD HINT ──────────────────────────────────── */
    /* cursor spotlight inside card */
    .pcard::after{
      content:'';
      position:absolute;inset:0;
      background:radial-gradient(
        circle at var(--mx,50%) var(--my,50%),
        rgba(0,245,212,.13) 0%,
        rgba(0,245,212,.04) 35%,
        transparent 65%
      );
      pointer-events:none;z-index:1;
      opacity:0;transition:opacity .35s;
    }
    .pcard:hover::after{opacity:1}

    .pcard-hint{
      font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
      color:var(--muted);margin-top:1rem;
      position:relative;z-index:1;
      transition:color .2s;
    }
    .pcard:hover .pcard-hint{color:var(--cyan)}

    /* ─── PROJECT MODAL ──────────────────────────────────────── */
    .modal-backdrop{
      display:none;
      position:fixed;inset:0;z-index:2000;
      background:rgba(7,7,12,.92);
      backdrop-filter:blur(12px);
      align-items:flex-start;justify-content:center;
      overflow-y:auto;
      padding:2rem 1.5rem;
    }
    .modal-backdrop.open{display:flex}

    .modal{
      position:relative;
      width:100%;max-width:960px;
      background:var(--surface);
      border:1px solid var(--border);
      clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
      margin:auto;
      overflow:hidden;
    }
    .modal.entering{
      animation:modalIn 1.4s var(--ease) forwards;
    }
    @keyframes modalIn{
      0%  {opacity:0;transform:translateY(-14px) scale(.97);filter:brightness(7)}
      8%  {opacity:1;transform:translateX(-14px) scale(1);
           filter:hue-rotate(100deg) brightness(3) saturate(6)}
      16% {transform:translateX(14px) skewX(-3deg);
           filter:hue-rotate(-100deg) brightness(2.5)}
      24% {transform:translateX(-8px) skewX(2.5deg);filter:brightness(2)}
      32% {transform:translateX(6px);filter:hue-rotate(40deg) brightness(1.6)}
      40% {transform:translateX(-3px);filter:brightness(1.3)}
      50% {transform:none;filter:brightness(1.1)}
      60% {transform:none;filter:brightness(1)}
      100%{opacity:1;transform:none;filter:none}
    }

    /* cyan scan line sweeping down on open */
    .modal.entering::after{
      content:'';
      position:absolute;left:0;right:0;height:3px;top:0;
      background:linear-gradient(to right,transparent,var(--cyan),transparent);
      box-shadow:0 0 14px var(--cyan),0 0 32px rgba(0,245,212,.5);
      animation:modalScan 1.4s ease-out forwards;
      pointer-events:none;z-index:200;
    }
    @keyframes modalScan{
      0%  {top:0%;opacity:1}
      90% {opacity:.7}
      100%{top:100%;opacity:0}
    }

    /* backdrop strobe on open */
    @keyframes backdropFlash{
      0%  {opacity:0}
      12% {opacity:.88}
      16% {opacity:.1}
      22% {opacity:.92}
      28% {opacity:.35}
      36% {opacity:.97}
      100%{opacity:1}
    }

    .modal-header{
      display:flex;align-items:center;justify-content:space-between;
      padding:1.75rem 2rem 1.25rem;
      border-bottom:1px solid var(--border);
    }
    .modal-title-wrap{display:flex;align-items:center;gap:.75rem}
    .modal-icon{color:var(--cyan)}
    .modal-icon svg{width:20px;height:20px}
    .modal-title{
      font-family:var(--display);font-size:1.6rem;
      letter-spacing:.04em;color:var(--text);line-height:1.1;
    }
    .modal-close{
      background:none;border:none;cursor:pointer;
      color:var(--muted);padding:.4rem;
      transition:color .2s;
    }
    .modal-close:hover{color:var(--magenta)}
    .modal-close svg{width:20px;height:20px}

    .modal-toolbar{
      display:flex;align-items:center;justify-content:space-between;
      flex-wrap:wrap;gap:.75rem;
      padding:1.25rem 2rem;
    }
    .modal-btn{
      display:inline-flex;align-items:center;gap:.5rem;
      padding:.6rem 1.2rem;
      font-family:var(--mono);font-size:.62rem;
      font-weight:700;letter-spacing:.12em;text-transform:uppercase;
      cursor:pointer;border:1px solid var(--border);
      background:var(--surface2);color:var(--text);
      clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
      transition:.2s var(--ease);
    }
    .modal-btn:hover{border-color:var(--cyan);color:var(--cyan)}
    .modal-btn.disabled{opacity:.35;pointer-events:none}
    .modal-btn svg{width:15px;height:15px}

    .modal-body{padding:0 2rem 2rem}

    .modal-pdf-wrap{
      position:relative;margin-bottom:2rem;
      border:1px solid var(--border);
    }
    .modal-pdf-wrap iframe{
      width:100%;height:70vh;
      background:var(--dim);display:block;
    }
    .modal-no-pdf{
      padding:4rem;text-align:center;
      font-size:.8rem;color:var(--muted);
      letter-spacing:.1em;text-transform:uppercase;
    }

    .modal-video-label{
      display:flex;align-items:center;gap:.6rem;
      font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;
      color:var(--cyan);margin-bottom:1rem;
    }
    .modal-video-label svg{width:16px;height:16px}
    .modal-video-wrap video{
      width:100%;
      border:1px solid var(--border);display:block;
    }
    .modal-no-video{
      padding:2.5rem;text-align:center;
      font-size:.75rem;color:var(--muted);
      letter-spacing:.1em;text-transform:uppercase;
      border:1px solid var(--dim);
    }

    /* ─── RESPONSIVE ─────────────────────────────────────────── */
    @media(max-width:768px){
      nav{padding:1rem 1.5rem}
      .nav-links{
        display:none;
        position:fixed;inset:0;
        background:rgba(7,7,12,.97);
        flex-direction:column;
        justify-content:center;align-items:center;
        gap:2.5rem;z-index:999;
      }
      .nav-links.open{display:flex}
      .nav-links.open a{font-size:1.1rem}
      .nav-toggle{display:flex}
      .hero,.section{padding-left:1.5rem;padding-right:1.5rem}
      .section{padding-top:5rem;padding-bottom:5rem}
      .about-grid{grid-template-columns:1fr;gap:3rem}
      .skills-grid{grid-template-columns:1fr;gap:1.2rem 0}
      .projects-grid{grid-template-columns:1fr}
      .lang-grid{grid-template-columns:1fr}
      .contact-inner{grid-template-columns:1fr}
      .contact-finale{padding:4rem 1.5rem}
      footer{flex-direction:column;gap:.5rem;text-align:center;padding:1.5rem}
    }
    @media(max-width:480px){
      .section-num{font-size:3.5rem}
      .section-header{gap:1rem}
    }