:root{
    --ink:#0b0d12;
    --panel:#141820;
    --line:#2a3140;
    --hair:rgba(255,255,255,0.07);
    --paper:#e8edf5;
    --dim:#8b95a8;
    --accent:#fbbf24;
    --accent2:#fcd34d;
    --yellow:#d4a017;
    --mono:'DM Mono', monospace;
    --sans:'Inter', sans-serif;
    --cyber:'Figtree', sans-serif;
    --ease:cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; overflow-x:hidden;}

  ::-webkit-scrollbar{width:11px;}
  ::-webkit-scrollbar-track{background:var(--ink);}
  ::-webkit-scrollbar-thumb{background:var(--line); border:2px solid var(--ink); border-radius:6px;}
  ::-webkit-scrollbar-thumb:hover{background:var(--accent2);}
  html{scrollbar-color:var(--line) var(--ink); scrollbar-width:thin;}

  .reveal{opacity:0; transform:translateY(18px); transition:opacity 0.9s var(--ease), transform 0.9s var(--ease);}
  .reveal.in-view{opacity:1; transform:translateY(0);}

  .fab{
    position:fixed; bottom:22px; z-index:20;
    width:42px; height:42px; display:flex; align-items:center; justify-content:center;
    background:var(--panel);
    border:1px solid var(--line); border-radius:6px;
    color:var(--accent); cursor:pointer;
    transition:border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease), color 0.25s var(--ease);
  }
  .fab svg{width:18px; height:18px; display:block;}
  .fab:hover{
    border-color:var(--accent); color:var(--accent);
    box-shadow:0 0 18px rgba(251,191,36,0.45);
    transform:translateY(-2px);
  }
  .fab:active{transform:translateY(0);}

  .back-to-top{
    right:22px;
    opacity:0; pointer-events:none; transition:opacity 0.35s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .back-to-top.show{opacity:1; pointer-events:auto;}

  .sound-toggle{right:74px;}
  .sound-toggle .icon-off{display:none;}
  .sound-toggle.muted{color:var(--dim);}
  .sound-toggle.muted .icon-on{display:none;}
  .sound-toggle.muted .icon-off{display:block;}
  .sound-toggle.muted:hover{color:var(--accent2); border-color:var(--accent2); box-shadow:0 0 18px rgba(252,211,77,0.4);}
  body{background:var(--ink); color:var(--paper); font-family:var(--sans); line-height:1.75; font-size:16px;}
  a{color:inherit;}

  #boot-wrap{
    opacity:0;
    filter:blur(9px) brightness(1.4);
    transition:opacity 1.1s var(--ease), filter 1.1s var(--ease);
  }
  #boot-wrap.loaded{
    opacity:1;
    filter:blur(0) brightness(1);
  }
  ::selection{background:var(--accent); color:#0b0d12;}

  nav{
    position:sticky; top:0; z-index:20;
    padding:14px 6vw; background:rgba(11,13,18,0.88);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(251,191,36,0.18);
    font-family:var(--cyber);
  }
  .nav-window{
    max-width:760px; width:fit-content; margin:0 auto;
    border-radius:8px 8px 0 0; overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,0.55), 0 0 0 1px #0a2e94;
  }
  .xp-titlebar{
    position:relative;
    display:flex; align-items:center; justify-content:space-between;
    padding:4px 10px;
    background:linear-gradient(180deg,#2b8aff 0%,#0154e5 30%,#0154e5 55%,#016bfd 80%,#0756da 100%);
    box-shadow:0 2px 6px rgba(0,0,0,0.5);
    border-bottom:1px solid #0a2e94;
    overflow:hidden;
  }
  .xp-title{
    position:relative; z-index:1;
    display:flex; align-items:center; gap:8px;
    font-family:Tahoma, Verdana, sans-serif; font-weight:bold; font-size:0.82rem;
    color:#fff; text-shadow:0 1px 1px rgba(0,0,0,0.4);
  }
  .xp-controls{position:relative; z-index:1; display:flex; gap:2px;}

  .xp-btn{
    width:21px; height:19px; display:flex; align-items:center; justify-content:center;
    border:1px solid #4a7ec9; border-radius:3px; cursor:pointer;
    background:linear-gradient(180deg,#eef5ff 0%,#bcd9fb 45%,#8fbdf0 55%,#5c96de 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.08);
    color:#0d3a7a; font-family:Tahoma, sans-serif; font-size:0.72rem; font-weight:bold;
    transition:filter 0.25s var(--ease), background 0.25s var(--ease);
  }
  .xp-btn:hover{background:linear-gradient(180deg,#ffffff 0%,#d3e8ff 45%,#a9cdf5 55%,#75a8e8 100%);}
  .xp-btn.xp-close{
    margin-left:3px;
    border-color:#8a1f1f; color:#fff;
    background:linear-gradient(180deg,#ff8a7a 0%,#e6402a 45%,#d42a13 55%,#a81c0c 100%);
  }
  .xp-btn.xp-close:hover{background:linear-gradient(180deg,#ffb0a0 0%,#f4533a 45%,#e63d1f 55%,#c22a12 100%);}
  .nav-toggle{display:none; font-size:0.85rem;}
  .nav-links{
    display:flex; gap:2px; list-style:none; font-size:0.82rem; margin:0;
    padding:6px 12px; font-family:Tahoma, Verdana, sans-serif;
    background:linear-gradient(180deg,#f6f9ff,#dde6f6);
    border-bottom:2px solid #7a9bd6;
    justify-content:flex-start;
  }
  .nav-links li a{
    display:block; padding:5px 13px; border-radius:3px; text-decoration:none;
    color:#14328a; font-weight:500; transition:background 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.25s var(--ease);
  }
  .nav-links li a:hover{
    background:linear-gradient(180deg,#c9e2ff,#8fbdf2);
    box-shadow:inset 0 0 0 1px #5b93d9;
    color:#00287a;
  }
  .nav-links li a.active{
    background:linear-gradient(180deg,#a9cfff,#6fa3ec);
    box-shadow:inset 0 0 0 1px #3f6fb8, inset 0 1px 3px rgba(0,0,0,0.15);
    color:#001e63; font-weight:700;
  }

  .hero{
    max-width:900px; margin:0 auto; padding:104px 6vw 84px; text-align:center;
  }
  .hero-inner{
    display:flex; align-items:center; justify-content:center; gap:44px; flex-wrap:wrap;
  }
  .ascii-wrap{position:relative; display:flex; flex:0 0 auto; margin:0 auto;}
  .ascii-wrap::before{
    content:''; position:absolute; inset:-20%; z-index:-1;
    background:radial-gradient(closest-side, rgba(251,191,36,0.16), transparent 72%);
    animation:glow-pulse 4s ease-in-out infinite;
  }
  @keyframes glow-pulse{
    0%,100%{opacity:0.6; transform:scale(0.96);}
    50%{opacity:1; transform:scale(1.04);}
  }
  .hero-text{flex:1 1 320px; min-width:280px; display:flex; flex-direction:column; align-items:center;}
  .ascii-art{
    font-family:var(--mono);
    font-size:clamp(0.42rem,1.6vw,0.62rem);
    line-height:1.05;
    color:var(--accent);
    text-shadow:0 0 6px rgba(251,191,36,0.45);
    white-space:pre;
    overflow:hidden;
    flex:0 0 auto;
    margin:0 auto;
  }
  .ascii-small{
    font-family:var(--mono);
    font-size:clamp(0.38rem,1.3vw,0.52rem);
    line-height:1.05;
    color:var(--accent2);
    text-shadow:0 0 5px rgba(179,179,179,0.4);
    white-space:pre;
    overflow-x:auto;
    overflow-y:hidden;
    text-align:center;
    margin:0 auto 24px;
    opacity:0.9;
  }
  @media (max-width:700px){
    .hero-inner{flex-direction:column; align-items:center;}
    .ascii-wrap{margin:0 0 22px;}
  }
  @media (max-width:480px){
    .ascii-wrap{display:none;}
  }
  .prompt{font-family:var(--cyber); font-weight:900; color:var(--accent); font-size:1rem; letter-spacing:0.04em; margin-bottom:16px;}
  .hero h1{font-family:var(--cyber); font-size:clamp(1.9rem,4.5vw,2.6rem); font-weight:900; margin-bottom:14px; letter-spacing:0.03em;}
  .hero h1 .cursor{display:inline-block; width:12px; height:0.9em; background:var(--accent); margin-left:6px; animation:blink 0.8s step-end infinite;}
  @keyframes blink{50%{opacity:0;}}
  .hero p{color:var(--dim); max-width:56ch; font-size:1.02rem; margin:0 auto 30px;}
  #typedText .char{
    opacity:0;
    filter:blur(3px);
    transition:opacity 0.6s var(--ease), filter 0.6s var(--ease);
  }
  #typedText.revealed .char{
    opacity:1;
    filter:blur(0);
  }
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
  .btn{
    font-family:var(--cyber); font-weight:900; font-size:0.8rem; padding:12px 22px; border-radius:5px; 
    text-decoration:none; border:1px solid var(--line); transition:all 0.35s var(--ease); color: var(--paper);
  }
  .btn-primary{background:var(--accent); color:#0b0d12; border-color:var(--accent); font-weight:600;}
  .btn-primary:hover{
    background:#fcd34d;
    box-shadow:0 0 22px rgba(251,191,36,0.55);
    transform: scale(1.04);
  }
  .btn-ghost:hover{border-color:var(--accent); color:var(--accent); transform: scale(1.04);}

  section{max-width:860px; margin:0 auto; padding:84px 6vw; border-top:1px solid var(--hair); text-align:center; scroll-margin-top:var(--nav-h, 110px); position:relative;}
  section:nth-of-type(even)::before{
    content:''; position:absolute; top:0; bottom:0; left:50%; width:100vw;
    transform:translateX(-50%); z-index:-1;
    background:linear-gradient(180deg, rgba(251,191,36,0.03), rgba(251,191,36,0.015));
  }
  .eyebrow{font-family:var(--cyber); font-weight:900; font-size:0.8rem; letter-spacing:0.2em; color:var(--accent); text-transform:uppercase; margin-bottom:12px;}
  h2{font-family:var(--cyber); font-size:1.5rem; font-weight:900; margin-bottom:36px; letter-spacing:0.02em; position:relative; display:inline-block; cursor:default; color:var(--paper);}
  h2:hover{animation:glitch 0.4s linear;}
  h2:hover::before, h2:hover::after{
    content:attr(data-text); position:absolute; top:0; left:0; width:100%; overflow:hidden;
  }
  h2:hover::before{color:var(--accent); clip-path:inset(0 0 60% 0); transform:translate(-2px,-1px);}
  h2:hover::after{content:attr(data-text); color:var(--yellow); clip-path:inset(60% 0 0 0); transform:translate(2px,1px);}
  @keyframes glitch{
    0%,100%{transform:translate(0,0);}
    20%{transform:translate(-1px,1px);}
    40%{transform:translate(1px,-1px);}
    60%{transform:translate(-1px,-1px);}
    80%{transform:translate(1px,1px);}
  }

  .skill-group{text-align:left; margin-bottom:40px;}
  .skill-group:last-child{margin-bottom:0;}
  .skill-group-title{
    font-family:var(--mono); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--accent2); margin-bottom:16px; font-weight:500;
  }
  .skill-list{
    list-style:none; display:flex; flex-wrap:wrap; gap:10px; text-align:left;
  }
  .skill-list li{
    font-family:var(--mono); font-size:0.88rem; color:var(--paper);
    padding:8px 14px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:6px;
    position:relative;
    transition:border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .skill-list li:not(:last-child)::after{content:none;}
  .skill-list li::before{content:none;}
  .skill-list li:hover{
    border-color:var(--accent);
    background:rgba(251,191,36,0.12);
    color:#fff;
    box-shadow:0 0 14px rgba(251,191,36,0.25);
    transform:translateY(-1px);
  }

  .skill-offensive .skill-group-title{color:#fbbf24;}
  .skill-offensive .skill-list li{border-color:rgba(251,191,36,0.4);}
  .skill-offensive .skill-list li:hover{border-color:#fbbf24; background:rgba(251,191,36,0.15); box-shadow:0 0 14px rgba(251,191,36,0.28);}

  .skill-systems .skill-group-title{color:#34d399;}
  .skill-systems .skill-list li{border-color:rgba(52,211,153,0.4);}
  .skill-systems .skill-list li:hover{border-color:#34d399; background:rgba(52,211,153,0.12); box-shadow:0 0 14px rgba(52,211,153,0.28);}

  .skill-practice .skill-group-title{color:#2dd4bf;}
  .skill-practice .skill-list li{border-color:rgba(45,212,191,0.4);}
  .skill-practice .skill-list li:hover{border-color:#2dd4bf; background:rgba(45,212,191,0.12); box-shadow:0 0 14px rgba(45,212,191,0.28);}

  .cert-list{list-style:none; text-align:left; border-top:1px solid var(--hair);}
  .cert-list li{
    display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
    font-family:var(--mono); font-size:0.95rem; color:var(--paper);
    padding:16px 4px; border-bottom:1px solid var(--hair);
    transition:padding-left 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
  }
  .cert-list li span{
    color:var(--accent2); font-size:0.8rem; white-space:nowrap;
    background:rgba(251,191,36,0.1); padding:3px 10px; border-radius:4px; border:1px solid rgba(251,191,36,0.25);
  }
  .cert-list li:hover{padding-left:12px; border-color:var(--accent); background:rgba(251,191,36,0.04);}

  .project-list{display:flex; flex-direction:column; text-align:left; border-top:1px solid var(--hair);}
  .project{
    padding:24px 6px; border-bottom:1px solid var(--hair);
    transition:padding-left 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
  }
  a.project{text-decoration:none; color:inherit; display:block;}
  .project-link-arrow{
    color:var(--accent); font-size:0.85em; opacity:0.7; display:inline-block;
    transition:transform 0.25s var(--ease), opacity 0.25s var(--ease);
  }
  a.project:hover .project-link-arrow{transform:translate(3px,-3px); opacity:1;}
  .project:hover{padding-left:14px; border-color:rgba(251,191,36,0.35); background:rgba(251,191,36,0.04);}
  .project:hover h3{color:var(--accent);}
  .project h3{font-family:var(--cyber); font-weight:900; font-size:1.05rem; margin-bottom:8px; transition:color 0.25s var(--ease);}
  .project p{color:var(--dim); font-size:0.95rem; margin-bottom:14px; max-width:62ch; line-height:1.65;}
  .tag-row{display:flex; flex-wrap:wrap; gap:8px;}
  .tag{
    font-family:var(--mono); font-size:0.72rem; padding:4px 10px;
    color:var(--accent2); background:rgba(251,191,36,0.1);
    border:1px solid rgba(251,191,36,0.22); border-radius:4px;
  }
  .tag:not(:last-child)::after{content:none;}

  .xp-window{
    max-width:520px; margin:0 auto; border-radius:8px 8px 0 0; overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,0.6), 0 0 0 1px #0a2e94;
    text-align:left;
  }
  .xp-window .xp-titlebar{padding:5px 10px;}
  .xp-window .xp-title{font-size:0.76rem;}
  .xp-window .xp-btn{width:18px; height:16px; font-size:0.65rem;}
  .contact-links{
    display:flex; flex-direction:column; font-family:Tahoma, Verdana, sans-serif; font-size:0.85rem;
    background:linear-gradient(180deg,#fdfefe,#eef2f9);
    padding:8px; gap:2px;
    box-shadow:inset 0 0 0 1px #a9b8d6;
  }
  .contact-links a{
    display:flex; align-items:center; gap:10px;
    text-decoration:none; color:#14328a; padding:8px 10px;
    border:1px dotted transparent; border-radius:2px; transition:0.12s;
  }
  .contact-links a:hover{
    background:linear-gradient(180deg,#c9e2ff,#a8cdfb);
    border:1px dotted #4d7fc9;
    color:#00287a;
    padding-left:10px;
  }
  .contact-icon{
    width:16px; height:16px; flex-shrink:0;
    font-size:15px; line-height:16px; text-align:center;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,0.3));
  }

  .terminal-window{
    max-width:640px;
    box-shadow:0 6px 18px rgba(0,0,0,0.6), 0 0 0 1px #000;
  }
  .terminal-window .xp-titlebar{
    display:flex; align-items:center;
    padding:10px 14px;
    background:linear-gradient(180deg,#2a2a2a,#161616);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
    border-bottom:1px solid #000;
  }
  .terminal-titlebar-col{flex:1; display:flex; align-items:center;}
  .terminal-dots{gap:8px;}
  .terminal-dot{width:12px; height:12px; border-radius:50%; display:inline-block; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25);}
  .terminal-dot.red{background:#ff5f56;}
  .terminal-dot.yellow{background:#ffbd2e;}
  .terminal-dot.green{background:#27c93f;}
  .terminal-window .xp-title{
    justify-content:center; text-align:center;
    font-family:var(--mono); font-weight:400; font-size:0.78rem;
    color:var(--dim); text-shadow:none;
  }
  .terminal-body{
    background:#050202; color:var(--paper); font-family:var(--mono); font-size:0.88rem;
    padding:14px 16px; height:260px; overflow-y:auto; line-height:1.6;
    border-bottom:1px solid var(--line); cursor:text;
  }
  .terminal-line{white-space:pre-wrap; word-break:break-word; margin-bottom:3px;}
  .terminal-line.cmd{color:var(--accent2);}
  .terminal-line.err{color:var(--yellow);}
  .terminal-hl{color:var(--accent);}
  .terminal-input-row{
    display:flex; align-items:center; gap:8px; padding:10px 16px;
    background:#050202; font-family:var(--mono); font-size:0.88rem;
  }
  .terminal-prompt{color:var(--accent2); white-space:nowrap;}
  .terminal-input{
    flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--paper);
    font-family:var(--mono); font-size:0.88rem; caret-color:var(--accent);
  }
  .terminal-body::-webkit-scrollbar{width:8px;}
  .terminal-body::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}
  .terminal-hint{font-family:var(--mono); font-size:0.78rem; color:var(--dim); margin-top:12px;}

  footer{text-align:center; font-family:var(--cyber); font-size:0.78rem; color:var(--dim); padding:30px 6vw;}
  .footer-note{font-family:var(--mono); font-size:0.7rem; color:var(--dim); opacity:0.55; margin-top:6px; letter-spacing:0.02em;}

  @media (max-width:700px){
    nav{padding:14px 4vw;}
    .nav-toggle{display:flex;}
    .nav-window{max-width:440px; width:100%;}
    .xp-titlebar{padding:6px 8px 6px 12px; gap:8px;}
    .xp-title{font-size:0.66rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1 1 auto;}
    .xp-controls{gap:5px; flex-shrink:0;}
    .xp-btn{width:38px; height:34px; font-size:0.95rem; border-radius:3px;}
    .nav-links{
      flex-direction:column; gap:0; font-size:1rem; padding:0;
      max-height:0; overflow:hidden; border-bottom:none;
      transition:max-height 0.3s var(--ease);
    }
    .nav-links.open{max-height:360px; padding:6px 0; border-bottom:2px solid #7a9bd6;}
    .nav-links li a{display:block; padding:14px 16px; border-radius:0;}
  }

  @media (max-width:420px){
    .xp-title{font-size:0.58rem;}
    .xp-btn{width:34px; height:32px; font-size:0.88rem;}
    .xp-controls{gap:4px;}
  }

  @keyframes xp-shake{
    0%,100%{transform:translateX(0);}
    20%{transform:translateX(-6px);}
    40%{transform:translateX(6px);}
    60%{transform:translateX(-4px);}
    80%{transform:translateX(4px);}
  }
  .xp-titlebar.shake{animation:xp-shake 0.4s linear;}
  .scanlines{
    position:fixed; inset:0; pointer-events:none; z-index:5;
    background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 3px);
  }

  .skip-link{
    position:fixed; top:-100px; left:12px; z-index:9999;
    background:var(--accent); color:#000; font-family:var(--mono); font-weight:600;
    font-size:0.85rem; padding:10px 16px; border-radius:4px; text-decoration:none;
    transition:top 0.2s var(--ease);
  }
  .skip-link:focus{top:12px;}
  a:focus-visible, button:focus-visible, input:focus-visible, .terminal-input:focus-visible{
    outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
  }
  .xp-btn:focus-visible{outline-offset:1px;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *, *::before, *::after{
      animation-duration:0.001ms !important; animation-iteration-count:1 !important;
      transition-duration:0.001ms !important; scroll-behavior:auto !important;
    }
    .reveal{opacity:1; transform:none;}
    #boot-wrap{opacity:1; filter:none;}
    #typedText .char{transition-delay:0s !important; opacity:1; filter:none;}
    .scanlines{display:none;}
  }

  .scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:0%; z-index:30;
    background:linear-gradient(90deg, var(--accent), var(--accent2));
    box-shadow:0 0 8px rgba(251,191,36,0.55);
    transition:width 0.1s linear;
  }



  :root{
    --dim:#9ba4b8; 
  }

  body{
    background:
      radial-gradient(900px 500px at 50% -8%, rgba(251,191,36,0.06), transparent 60%),
      var(--ink);
  }

  .hero{position:relative;}
  .hero::before{
    content:'';
    position:absolute; left:50%; top:32%; width:520px; height:520px;
    transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
    background:radial-gradient(closest-side, rgba(251,191,36,0.10), transparent 72%);
  }

  h2{
    text-shadow:0 0 20px rgba(251,191,36,0.14);
  }

  section{ padding:96px 6vw; }

  .skill-list li{ border-radius:9px; padding:9px 16px; }
  .tag{ border-radius:5px; }
  .btn{ border-radius:7px; }

  .cert-list{
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
  }
  .cert-list li{ padding:17px 16px; border-bottom:1px solid var(--hair); }
  .cert-list li:last-child{ border-bottom:none; }
  .cert-list li:hover{ padding-left:20px; }

  .project-list{ border-top:none; gap:14px; }
  .project{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    padding:24px 22px;
    transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  }
  .project:hover{
    padding-left:22px;
    transform:translateY(-3px);
    border-color:rgba(251,191,36,0.4);
    box-shadow:0 14px 30px rgba(0,0,0,0.35);
    background:rgba(251,191,36,0.045);
  }

  .xp-window, .terminal-window{
    border-radius:10px 10px 0 0;
  }


  .hero h1{
    background:linear-gradient(90deg, var(--paper) 0%, var(--paper) 55%, var(--accent2) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero h1 .cursor{ background:var(--accent); } /* keep the blinking caret solid, not gradient-clipped */


  .xp-window, .terminal-window{
    transition:box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
  }
  .xp-window:hover, .terminal-window:hover{
    box-shadow:0 10px 32px rgba(0,0,0,0.5), 0 0 0 1px #0a2e94, 0 0 40px rgba(251,191,36,0.10);
    transform:translateY(-2px);
  }

  .btn{ position:relative; overflow:hidden; }
  .btn::after{
    content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
    transform:skewX(-18deg);
    transition:left 0.6s var(--ease);
  }
  .btn:hover::after{ left:130%; }


  .grain-overlay{
    position:fixed; inset:0; z-index:6; pointer-events:none;
    opacity:0.035; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .project{
    transform-style:preserve-3d;
    will-change:transform;
  }

  .brand-icon{
    display:inline-block; vertical-align:-3px; flex-shrink:0;
    width:18px; height:18px; margin-right:8px;
    fill:currentColor; color:var(--accent2);
    transition:color 0.25s var(--ease);
  }
  .project h3 .brand-icon{ color:var(--accent2); }
  .project:hover h3 .brand-icon{ color:var(--accent); }

  .contact-brand-icon{
    width:16px; height:16px; margin-right:0;
    color:#14328a;
  }
  .contact-links a:hover .contact-brand-icon{ color:#00287a; }


  .terminal-body{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }