:root{
    --gotham-black:#0a0c10;
    --surface:#14171d;
    --surface-2:#1b1f27;
    --line:#262b34;
    --signal:#f2b90c;
    --signal-dim:#8a6c14;
    --fog:#8b93a1;
    --bone:#e9e7e0;
    --alert:#a5333a;
    --radius:2px;
  }


  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--gotham-black);
    color:var(--bone);
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
  }
  ::selection{background:var(--signal);color:var(--gotham-black);}

  a{color:inherit;text-decoration:none;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .display{font-family:'Oswald',sans-serif;text-transform:uppercase;}

  .wrap{max-width:1080px;margin:0 auto;padding:0 32px;}

  /* focus visibility */
  a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
  }

  /* ---------- NAV ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(10,12,16,0.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  nav.wrap{
    display:flex;align-items:center;justify-content:space-between;
    height:64px;
  }
  .brand{
    font-family:'IBM Plex Mono',monospace;
    font-size:30px;letter-spacing:0.12em;
    color:var(--signal);
  }
  .brand span{color:var(--fog);}
  .navlinks{display:flex;gap:28px;list-style:none;flex-direction:row;}
  .navlinks.active{flex-direction:column;gap:0;position:absolute;top:64px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);padding:16px 32px;flex-direction:column;}
  .navlinks a{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;letter-spacing:0.08em;
    color:var(--fog);text-transform:uppercase;
    transition:color .2s;
    position:relative;
    padding-bottom:4px;
  }
  .navlinks a::after{
    content:'';position:absolute;left:0;bottom:0;
    width:0;height:1px;background:var(--signal);
    transition:width .25s ease;
  }
  .navlinks a:hover{color:var(--signal);}
  .navlinks a:hover::after{width:100%;}
  .navtoggle{display:none;background:none;border:1px solid var(--line);color:var(--bone);padding:8px 10px;font-family:'IBM Plex Mono',monospace;font-size:12px;cursor:pointer;}
  .navtoggle i{font-size:20px;}

  #resumeLink{
    margin-left:auto;
  }
  #resumeLink a.btn{
    text-align:center;
    padding:8px 10px;
    font-size:12px;
    box-shadow:0 0 22px rgba(242,185,12,0.45);
  }
  #resumeLink a.btn:hover{
    background:var(--signal);
    color:var(--gotham-black);
    box-shadow:0 0 22px rgba(242,185,12,0.45);
  }

  @media (max-width:760px){
    .navlinks{display:none;}
    .navlinks.active{display:flex;}
    .navtoggle{display:block;margin-left:auto;}
    .navlinks li{padding:12px 0;border-bottom:1px solid var(--line);}
    .navlinks li:last-child{border-bottom:none;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;
    padding-top:64px;
    overflow:hidden;
  }
  .beam{
    position:absolute;
    top:-20%;left:50%;
    width:2200px;height:2200px;
    transform:translateX(-50%);
    background:conic-gradient(from 170deg at 50% 0%, transparent 0deg, rgba(242,185,12,0.10) 8deg, rgba(242,185,12,0.03) 16deg, transparent 26deg, transparent 360deg);
    pointer-events:none;
    animation:sweep 14s ease-in-out infinite;
    transform-origin:50% 0%;
  }
  @keyframes sweep{
    0%,100%{transform:translateX(-50%) rotate(-6deg);}
    50%{transform:translateX(-50%) rotate(6deg);}
  }

  /* ---------- BAT SIGNAL ---------- */
  .signal-wrap{
    position:absolute;
    top:8%;left:50%;
    transform:translateX(-50%);
    width:340px;height:340px;
    pointer-events:none;
    z-index:1;
  }
  .signal-glow{
    position:absolute;inset:0;
    border-radius:50%;
    background:radial-gradient(circle, rgba(242,185,12,0.22) 0%, rgba(242,185,12,0.08) 38%, transparent 70%);
    animation:glowpulse 4s ease-in-out infinite;
    filter:blur(2px);
  }
  @keyframes glowpulse{
    0%,100%{opacity:0.6;transform:scale(1);}
    50%{opacity:1;transform:scale(1.06);}
  }
  .signal-mark{
    position:absolute;top:50%;left:50%;
    width:150px;height:150px;
    transform:translate(-50%,-50%);
    fill:var(--signal);
    opacity:0;
    filter:drop-shadow(0 0 18px rgba(242,185,12,0.55));
    animation:flicker-in 2.4s ease-out 0.3s forwards, batpulse 4s ease-in-out 2.7s infinite;
  }
  @keyframes flicker-in{
    0%{opacity:0;}
    8%{opacity:0.7;}
    12%{opacity:0;}
    20%{opacity:0.5;}
    24%{opacity:0.1;}
    32%{opacity:0.9;}
    38%{opacity:0.3;}
    46%{opacity:1;}
    100%{opacity:1;}
  }
  @keyframes batpulse{
    0%,100%{filter:drop-shadow(0 0 18px rgba(242,185,12,0.55));}
    50%{filter:drop-shadow(0 0 30px rgba(242,185,12,0.85));}
  }
  @media (max-width:640px){
    .signal-wrap{width:220px;height:220px;top:6%;}
    .signal-mark{width:100px;height:100px;}
  }
  .noise{
    position:absolute;inset:0;
    background-image:radial-gradient(circle at 20% 30%, rgba(255,255,255,0.02) 0%, transparent 40%),
                      radial-gradient(circle at 80% 70%, rgba(255,255,255,0.015) 0%, transparent 45%);
    pointer-events:none;
  }
  .status-line{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;color:var(--fog);
    display:flex;align-items:center;gap:10px;
    margin-bottom:28px;letter-spacing:0.04em;
  }
  .dot{width:7px;height:7px;border-radius:50%;background:#3fb950;box-shadow:0 0 8px #3fb950;animation:pulse 2s ease-in-out infinite;flex-shrink:0;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}

  .hero h1{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    font-weight:600;
    font-size:clamp(42px,8vw,96px);
    line-height:0.98;
    letter-spacing:0.01em;
    color:var(--bone);
    max-width:900px;
  }
  .hero h1 .accent{color:var(--signal);animation:dotglow 2.4s ease-in-out infinite;}
  @keyframes dotglow{
    0%,100%{text-shadow:0 0 10px rgba(242,185,12,0.4);}
    50%{text-shadow:0 0 22px rgba(242,185,12,0.85);}
  }
  .hero .role{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(13px,1.6vw,16px);
    color:var(--fog);
    margin-top:20px;
    letter-spacing:0.06em;
    max-width:600px;
  }
  .hero .tagline{
    margin-top:24px;
    max-width:560px;
    color:var(--fog);
    font-size:16px;
  }
  .hero-cta{
    margin-top:40px;
    display:flex;gap:16px;flex-wrap:wrap;
  }
  .btn{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;letter-spacing:0.06em;
    padding:14px 26px;
    border:1px solid var(--signal);
    color:var(--signal);
    background:transparent;
    text-transform:uppercase;
    transition:all .2s;
    cursor:pointer;
    display:inline-block;
  }
  .btn:hover{background:var(--signal);color:var(--gotham-black);box-shadow:0 0 22px rgba(242,185,12,0.45);}
  .btn.ghost{border-color:var(--line);color:var(--fog);}
  .btn.ghost:hover{border-color:var(--fog);color:var(--bone);background:transparent;}

  .scroll-hint{
    position:absolute;bottom:36px;left:32px;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;color:var(--fog);
    display:flex;align-items:center;gap:10px;
    letter-spacing:0.08em;
  }
  .scroll-hint .bar{width:1px;height:36px;background:linear-gradient(to bottom, var(--signal), transparent);animation:grow 2s ease-in-out infinite;}
  @keyframes grow{0%{opacity:0.2;}50%{opacity:1;}100%{opacity:0.2;}}

  /* ---------- SECTION SHARED ---------- */
  section{padding:120px 0;position:relative;}
  .section-head{margin-bottom:56px;}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;color:var(--signal);
    letter-spacing:0.14em;
    display:flex;align-items:center;gap:12px;
    margin-bottom:14px;
  }
  .eyebrow::before{content:'';width:24px;height:1px;background:var(--signal);}
  .section-head h2{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    font-weight:600;
    font-size:clamp(28px,4vw,44px);
    color:var(--bone);
  }
  .section-head p{color:var(--fog);max-width:560px;margin-top:14px;}

  /* ---------- PROFILE ---------- */
  #profile .grid{
    display:grid;grid-template-columns:1fr 1fr;gap:60px;
    align-items:start;
  }
  #profile p{color:var(--fog);font-size:16.5px;margin-bottom:18px;}
  #profile p strong{color:var(--bone);font-weight:500;}
  .dossier{
    border:1px solid var(--line);
    background:var(--surface);
    padding:28px;
  }
  .dossier-row{
    display:flex;justify-content:space-between;
    padding:12px 0;border-bottom:1px solid var(--line);
    font-family:'IBM Plex Mono',monospace;font-size:13px;
    transition:padding-left .2s ease;
  }
  .dossier-row:hover{padding-left:6px;}
  .dossier-row:hover span:first-child{color:var(--signal);}
  .dossier-row:last-child{border-bottom:none;}
  .dossier-row span:first-child{color:var(--fog);}
  .dossier-row span:last-child{color:var(--bone);text-align:right;}

  @media (max-width:820px){
    #profile .grid{grid-template-columns:1fr;gap:36px;}
  }

  /* ---------- ARSENAL / SKILLS ---------- */
  .arsenal-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .compartment{
    background:var(--gotham-black);
    padding:28px 24px;
    transition:background .25s ease, transform .25s ease;
  }
  .compartment:hover{
    background:var(--surface);
    transform:translateY(-3px);
  }
  .compartment h3{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;color:var(--signal);
    letter-spacing:0.1em;text-transform:uppercase;
    margin-bottom:16px;
  }
  .compartment ul{list-style:none;}
  .compartment li{
    color:var(--fog);font-size:14.5px;
    padding:5px 0;
    position:relative;padding-left:16px;
  }
  .compartment li::before{
    content:'';position:absolute;left:0;top:13px;
    width:5px;height:1px;background:var(--fog);
  }
  @media (max-width:820px){
    .arsenal-grid{grid-template-columns:1fr;}
  }

  /* ---------- FIELD LOG / EXPERIENCE ---------- */
  .log-entry{
    display:grid;grid-template-columns:160px 1fr;gap:32px;
    padding:32px 0;border-top:1px solid var(--line);
  }
  .log-entry:last-child{border-bottom:1px solid var(--line);}
  .log-date{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;color:var(--signal);letter-spacing:0.06em;
  }
  .log-content h3{
    font-family:'Oswald',sans-serif;text-transform:uppercase;
    font-size:20px;color:var(--bone);margin-bottom:4px;font-weight:500;
  }
  .log-content .org{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;color:var(--fog);margin-bottom:14px;
  }
  .log-content ul{list-style:none;}
  .log-content li{
    color:var(--fog);font-size:15px;padding:5px 0 5px 18px;position:relative;
  }
  .log-content li::before{
    content:'›';position:absolute;left:0;color:var(--signal);
  }
  @media (max-width:640px){
    .log-entry{grid-template-columns:1fr;gap:10px;}
  }

  /* ---------- CASE FILES / PROJECTS ---------- */
  .cases{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);}
  .case{
    background:var(--gotham-black);
    padding:36px;
    display:grid;grid-template-columns:1fr 1.4fr;gap:40px;
    transition:background .25s ease, box-shadow .25s ease;
  }
  .case:hover{
    background:var(--surface);
    box-shadow:inset 3px 0 0 var(--signal);
  }
  .case-num{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;color:var(--signal-dim);letter-spacing:0.1em;margin-bottom:10px;
  }
  .case h3{
    font-family:'Oswald',sans-serif;text-transform:uppercase;
    font-size:26px;color:var(--bone);font-weight:500;margin-bottom:6px;
  }
  .case .stack{
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--signal);
    margin-bottom:16px;letter-spacing:0.02em;
  }
  .case .desc{color:var(--fog);font-size:14px;margin-bottom:18px;}
  .case ul{list-style:none;}
  .case li{color:var(--fog);font-size:14.5px;padding:6px 0 6px 18px;position:relative;}
  .case li::before{content:'›';position:absolute;left:0;color:var(--signal);}
  @media (max-width:760px){
    .case{grid-template-columns:1fr;gap:16px;}
  }

  .projectLink a{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;color:var(--signal);
    padding: 10px;
    text-decoration:underline;
  }

  /* ---------- EDUCATION ---------- */
  .edu-row{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:22px 0;border-top:1px solid var(--line);
    flex-wrap:wrap;gap:8px;
  }
  .edu-row:last-child{border-bottom:1px solid var(--line);}
  .edu-row h3{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:18px;color:var(--bone);font-weight:500;}
  .edu-row .school{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--fog);}
  .edu-row .yr{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--signal);white-space:nowrap;}

  /* ---------- CONTACT ---------- */
  #contact{
    text-align:center;
    padding-bottom:100px;
  }
  #contact .eyebrow{justify-content:center;}
  #contact .eyebrow::before{display:none;}
  #contact h2{margin:0 auto;}
  #contact p{color:var(--fog);max-width:480px;margin:18px auto 40px;}
  .contact-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;}
  .contact-links .btn i{margin-right:8px;}

  footer{
    border-top:1px solid var(--line);
    padding:28px 0;
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;color:var(--fog);
    display:flex;justify-content:space-between;
    letter-spacing:0.04em;
  }
  footer .wrap{display:flex;justify-content:space-between;width:100%;flex-wrap:wrap;gap:8px;}

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

  #footerLogo{
    width:24px;height:24px;
  }