:root{
    --bg-deep: #0A0E13;
    --bg-panel: #10161D;
    --bg-panel-2: #141C24;
    --line: #212B34;
    --line-soft: #1A222A;
    --text-primary: #E7EDF2;
    --text-muted: #8A99A6;
    --text-dim: #5C6975;
    --signal: #FF9F45;
    --signal-dim: #9C6636;
    --cyan: #5FD3C4;
    --cyan-dim: #2E5C55;
    --radius-s: 3px;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
    --sans: 'IBM Plex Sans', -apple-system, sans-serif;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }

  body{
    margin:0;
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: var(--sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  a{ color: inherit; }

  ::selection{ background: var(--signal); color: #0A0E13; }

  .grain-overlay{
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 200;
    opacity: 0.035;
    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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- NAV ---------- */
  .nav{
    position: fixed; top:0; left:0; right:0;
    z-index: 100;
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 40px;
    background: rgba(10,14,19,0.72);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-id{
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    display:flex; align-items:center; gap:10px;
  }
  .nav-id .dot{
    width:7px; height:7px; border-radius:50%;
    background: var(--signal);
    box-shadow: 0 0 8px var(--signal);
    animation: blink 2.4s ease-in-out infinite;
  }
  @keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }
  .nav-links{
    display:flex; gap: 32px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text-muted);
  }
  .nav-links a{ text-decoration:none; position:relative; padding: 4px 0; }
  .nav-links a:hover{ color: var(--text-primary); }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
    background: var(--signal); transition: width 0.25s ease;
  }
  .nav-links a:hover::after{ width:100%; }
  .nav-links span{ color: var(--text-dim); margin-right: 6px; }
  @media (max-width: 720px){ .nav-links{ display:none; } }

  .nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:34px; height:34px;
    background:none; border:none; cursor:pointer;
    padding:0;
  }
  .nav-toggle span{
    display:block; height:1px; width:100%;
    background: var(--text-primary);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
  @media (max-width: 720px){ .nav-toggle{ display:flex; } }

  .mobile-menu{
    position: fixed; inset: 0;
    background: rgba(10,14,19,0.98);
    backdrop-filter: blur(6px);
    z-index: 99;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap: 30px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .mobile-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
  .mobile-menu a{
    font-family: var(--mono);
    font-size: 20px;
    text-decoration: none;
    color: var(--text-primary);
  }
  .mobile-menu a span{ color: var(--text-dim); margin-right: 12px; }
  .mobile-menu a:hover{ color: var(--signal); }
  @media (min-width: 721px){ .mobile-menu{ display:none; } }

  /* ---------- HERO ---------- */
  .hero{
    position: relative;
    min-height: 100svh;
    display:flex; flex-direction:column; justify-content:center;
    padding: 140px 40px 80px;
    overflow: hidden;
    border-bottom: 1px solid var(--line-soft);
  }
  #spectrum{
    position:absolute; inset:0; width:100%; height:100%;
    opacity: 0.55;
  }
  .hero-scanline{
    position:absolute; inset:0;
    background: repeating-linear-gradient(
      to bottom, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 3px
    );
    pointer-events:none;
  }
  .hero-fade{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(10,14,19,0.15) 0%, rgba(10,14,19,0.55) 55%, var(--bg-deep) 100%);
  }
  .hero-inner{
    position: relative; z-index: 2;
    max-width: 900px;
  }
  .hero-eyebrow{
    font-family: var(--mono);
    font-size: 13px;
    color: var(--cyan);
    margin: 0 0 22px;
    display:flex; align-items:center; gap: 10px;
  }
  .hero-eyebrow .bracket{ color: var(--text-dim); }
  .hero h1{
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0 0 28px;
    font-weight: 600;
    max-width: 15ch;
  }
  .hero h1 em{
    font-style: normal;
    color: var(--signal);
  }
  .hero-sub{
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 62ch;
    margin: 0 0 40px;
  }
  .hero-sub strong{ color: var(--text-primary); font-weight: 500; }
  .hero-actions{
    display:flex; gap: 16px; flex-wrap: wrap;
    margin-bottom: 56px;
  }
  .btn{
    font-family: var(--mono);
    font-size: 13px;
    padding: 13px 24px;
    border-radius: var(--radius-s);
    text-decoration:none;
    display:inline-flex; align-items:center; gap:8px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
  }
  .btn-primary{
    background: var(--signal);
    color: #0A0E13;
    font-weight: 600;
  }
  .btn-primary:hover{ background: #ffb066; }
  .btn-ghost{
    border-color: var(--line);
    color: var(--text-primary);
  }
  .btn-ghost:hover{ border-color: var(--cyan); color: var(--cyan); }

  .hero-readout{
    display:flex; gap: 44px; flex-wrap: wrap;
    font-family: var(--mono);
    padding-top: 28px;
    border-top: 1px solid var(--line-soft);
  }
  .readout-item .num{
    font-size: 1.6rem;
    color: var(--text-primary);
    font-weight: 600;
  }
  .readout-item .num span{ color: var(--signal); }
  .readout-item .label{
    font-size: 11.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
  }

  /* ---------- SECTION SHELL ---------- */
  section{ padding: 110px 40px; max-width: 1180px; margin: 0 auto; }
  .section-head{
    display:flex; align-items:baseline; justify-content:space-between;
    gap: 20px; margin-bottom: 56px;
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 22px;
  }
  .section-head h2{
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin:0;
  }
  .section-tag{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
  }

  /* ---------- EXPERIENCE ---------- */
  .timeline{ position:relative; }
  .timeline::before{
    content:'';
    position:absolute; left: 7px; top: 10px; bottom: 10px;
    width: 1px; background: var(--line);
  }
  .role{
    position: relative;
    padding-left: 44px;
    margin-bottom: 76px;
  }
  .role:last-child{ margin-bottom: 0; }
  .role::before{
    content:'';
    position:absolute; left:0; top: 6px;
    width: 15px; height: 15px; border-radius:50%;
    background: var(--bg-deep);
    border: 2px solid var(--signal-dim);
  }
  .role.current::before{
    border-color: var(--signal);
    box-shadow: 0 0 0 4px rgba(255,159,69,0.12);
  }
  .role-meta{
    display:flex; flex-wrap:wrap; align-items: baseline; gap: 10px 16px;
    margin-bottom: 6px;
  }
  .role-title{ font-size: 1.35rem; font-weight: 600; }
  .role-current-tag{
    font-family: var(--mono); font-size: 11px; color: var(--signal);
    border: 1px solid var(--signal-dim);
    padding: 2px 8px; border-radius: 20px;
    letter-spacing: 0.04em;
  }
  .role-org{
    font-family: var(--mono);
    color: var(--cyan);
    font-size: 14px;
    margin-bottom: 4px;
  }
  .role-dates{
    font-family: var(--mono);
    color: var(--text-dim);
    font-size: 12.5px;
    margin-bottom: 22px;
  }
  .role-points{
    list-style: none; margin:0; padding:0;
    display:grid; gap: 13px;
    max-width: 760px;
  }
  .role-points li{
    position: relative;
    padding-left: 20px;
    color: var(--text-muted);
    font-size: 15px;
  }
  .role-points li::before{
    content: '›';
    position: absolute; left:0; top:-1px;
    color: var(--signal);
    font-family: var(--mono);
  }
  .role-points li strong{ color: var(--text-primary); font-weight: 500; }
  .role-tech{
    display:flex; flex-wrap:wrap; gap: 8px;
    margin-top: 22px;
  }
  .tech-pill{
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-muted);
    border: 1px solid var(--line);
    padding: 5px 11px;
    border-radius: 20px;
  }

  /* ---------- PROJECTS ---------- */
  .projects-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
  }
  @media (max-width: 800px){ .projects-grid{ grid-template-columns: 1fr; } }
  .project{
    background: var(--bg-panel);
    padding: 36px;
    position: relative;
    overflow:hidden;
    transition: background 0.25s ease;
  }
  .project:hover{ background: var(--bg-panel-2); }
  .project-index{
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-dim);
    margin-bottom: 18px;
    display:block;
  }
  .project h3{
    font-size: 1.2rem; font-weight: 600;
    margin: 0 0 12px;
    letter-spacing: -0.005em;
  }
  .project p{
    color: var(--text-muted);
    font-size: 14.5px;
    margin: 0 0 20px;
    max-width: 46ch;
  }
  .project-metric{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--cyan);
    display:flex; align-items:center; gap:8px;
    margin-bottom: 20px;
  }
  .project-metric::before{ content:'▲'; font-size: 9px; }
  .project-tags{ display:flex; flex-wrap:wrap; gap:8px; }
  .project-tags span{
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-dim);
    letter-spacing: 0.02em;
  }
  .project-tags span:not(:last-child)::after{ content:'·'; margin-left:8px; color: var(--line); }

  /* ---------- SKILLS (instrument panel) ---------- */
  .panel{
    border: 1px solid var(--line-soft);
    background: var(--bg-panel);
  }
  .panel-row{
    display:grid;
    grid-template-columns: 200px 1fr;
    border-bottom: 1px solid var(--line-soft);
  }
  .panel-row:last-child{ border-bottom:none; }
  @media (max-width: 700px){ .panel-row{ grid-template-columns: 1fr; } }
  .panel-label{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 22px 24px;
    border-right: 1px solid var(--line-soft);
    display:flex; align-items:center;
  }
  @media (max-width: 700px){ .panel-label{ border-right:none; border-bottom:1px solid var(--line-soft); } }
  .panel-values{
    padding: 20px 24px;
    display:flex; flex-wrap:wrap; gap: 10px;
    align-items:center;
  }
  .skill-chip{
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--bg-panel-2);
    border: 1px solid var(--line);
    padding: 7px 13px;
    border-radius: var(--radius-s);
  }

  /* ---------- EDUCATION ---------- */
  .edu-card{
    display:flex; justify-content:space-between; align-items:flex-start;
    flex-wrap:wrap; gap: 20px;
    padding: 32px;
    border: 1px solid var(--line-soft);
    background: var(--bg-panel);
  }
  .edu-card h3{ margin:0 0 6px; font-size: 1.25rem; font-weight:600; }
  .edu-card p{ margin:0; color: var(--text-muted); font-size: 14.5px; }
  .edu-dates{
    font-family: var(--mono); color: var(--text-dim); font-size: 12.5px;
    white-space: nowrap;
  }

  /* ---------- CONTACT / FOOTER ---------- */
  .contact{
    text-align:center;
    padding-top: 100px;
    padding-bottom: 60px;
  }
  .contact .section-tag{ display:block; margin-bottom: 18px; }
  .contact h2{
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    max-width: 16ch;
    margin: 0 auto 36px;
  }
  .contact h2 em{ font-style: normal; color: var(--signal); }
  .contact-links{
    display:flex; justify-content:center; gap: 18px; flex-wrap: wrap;
    margin-bottom: 90px;
  }
  footer{
    border-top: 1px solid var(--line-soft);
    padding: 26px 40px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap: 10px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-dim);
  }

  /* ---------- RESPONSIVE REFINEMENTS ---------- */
  @media (max-width: 600px){
    .nav{ padding: 14px 20px; }
    .hero{ padding: 110px 20px 56px; }
    section{ padding: 72px 20px; }
    footer{ padding: 20px; text-align:center; justify-content:center; }
    .hero-readout{ gap: 26px; }
    .role{ padding-left: 32px; }
    .project{ padding: 26px; }
    .edu-card{ padding: 24px; }
  }
  @media (max-width: 420px){
    .hero-actions{ flex-direction: column; align-items: stretch; }
    .btn{ justify-content:center; }
    .contact-links{ flex-direction: column; align-items: stretch; }
  }