:root{
    --ink: #0D1321;
    --surface: #141B2E;
    --surface-2: #1B2438;
    --text: #E7E5E0;
    --muted: #8B93A7;
    --amber: #F2A65A;
    --teal: #5FC9C9;
    --border: rgba(232, 230, 225, 0.08);

    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --nav-height: 76px;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  body{
    font-family: var(--font-body);
    background: var(--ink);
    color: var(--text);
    min-height: 200vh; /* just so you can see the fixed nav behavior while scrolling */
  }

  a{ color: inherit; text-decoration: none; }

  /* ---------- NAV ---------- */

  .site-nav{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-height);
    z-index: 1000;
    background: rgba(13, 19, 33, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }

  .nav-inner{
    max-width: 1160px;
    height: 100%;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Logo: <NBV/> with blinking cursor */
  .logo{
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
  }
  .logo .bracket{ color: var(--muted); }
  .logo .name{ color: var(--text); font-weight: 700; }
  .logo .slash{ color: var(--muted); }
  .logo .cursor{
    display: inline-block;
    width: 2px;
    height: 18px;
    background: var(--amber);
    margin-left: 6px;
    animation: blink 1.1s steps(1) infinite;
  }
  @keyframes blink{
    0%, 49%{ opacity: 1; }
    50%, 100%{ opacity: 0; }
  }

  /* Desktop nav links styled as file paths */
  .nav-links{
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 14.5px;
  }

  .nav-links li a{
    position: relative;
    color: var(--muted);
    padding: 6px 2px;
    transition: color 0.2s ease;
  }

  .nav-links li a .path-root{
    color: var(--muted);
    opacity: 0.6;
  }

  .nav-links li a:hover,
  .nav-links li a:focus-visible{
    color: var(--teal);
  }

  .nav-links li a.active{
    color: var(--amber);
  }

  .nav-links li a.active .path-root{
    color: var(--amber);
    opacity: 0.7;
  }

  /* underline reveal on hover/active */
  .nav-links li a::after{
    content: '';
    position: absolute;
    left: 2px; right: 2px;
    bottom: -4px;
    height: 1px;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
  }
  .nav-links li a:hover::after{ transform: scaleX(1); }
  .nav-links li a.active::after{
    background: var(--amber);
    transform: scaleX(1);
  }

  .nav-cta{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    padding: 9px 18px;
    border: 1px solid var(--amber);
    border-radius: 4px;
    color: var(--amber);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .nav-cta:hover{
    background: var(--amber);
    color: var(--ink);
  }

  .desktop-only{ display: flex; align-items: center; gap: 28px; }

  /* ---------- MOBILE TOGGLE ---------- */

  .nav-toggle{
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 1100;
  }

  .nav-toggle .bar{
    position: absolute;
    left: 5px; right: 5px;
    height: 2px;
    background: var(--text);
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
  }
  .nav-toggle .bar:nth-child(1){ top: 10px; }
  .nav-toggle .bar:nth-child(2){ top: 16px; }
  .nav-toggle .bar:nth-child(3){ top: 22px; }

  .nav-toggle[aria-expanded="true"] .bar:nth-child(1){
    top: 16px; transform: rotate(45deg); background: var(--amber);
  }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2){
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3){
    top: 16px; transform: rotate(-45deg); background: var(--amber);
  }

  /* ---------- MOBILE PANEL (terminal style) ---------- */

  .mobile-panel{
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    z-index: 999;
  }

  .mobile-panel.open{
    max-height: 420px;
  }

  .mobile-panel-inner{
    padding: 18px 24px 28px;
    font-family: var(--font-mono);
  }

  .mobile-panel .terminal-line{
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 14px;
    opacity: 0.7;
  }

  .mobile-links{
    list-style: none;
    display: flex;
    flex-direction: column;
  }

  .mobile-links li a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 4px;
    font-size: 16px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }

  .mobile-links li a .prompt{
    color: var(--amber);
  }

  .mobile-links li a.active{ color: var(--amber); }
  .mobile-links li a.active .prompt{ color: var(--teal); }

  .mobile-links li:last-child a{ border-bottom: none; }

  .mobile-cta-wrap{ margin-top: 18px; }

  .mobile-cta{
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    padding: 11px 22px;
    border: 1px solid var(--amber);
    border-radius: 4px;
    color: var(--amber);
  }

  /* ---------- RESPONSIVE BREAKPOINT ---------- */

  @media (max-width: 860px){
    .desktop-only{ display: none; }
    .nav-toggle{ display: block; }
    .nav-inner{ padding: 0 20px; }
  }

  @media (min-width: 861px){
    .mobile-panel{ display: none; }
  }

  @media (prefers-reduced-motion: reduce){
    .logo .cursor{ animation: none; opacity: 1; }
    .mobile-panel, .nav-toggle .bar{ transition: none; }
  }

  /* demo filler so scroll/fixed behavior is visible */
  .demo-note{
    padding: 140px 32px 40px;
    max-width: 700px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
  }
  .demo-note code{
    font-family: var(--font-mono);
    color: var(--teal);
    background: var(--surface-2);
    padding: 2px 6px;
    border-radius: 3px;
  }


  
  .about-section{
    padding: 100px 32px;
  }

  .about-inner{
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 72px;
    align-items: start;
  }

  .about-eyebrow{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--amber);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
  }
  .about-eyebrow::before{ content: '// '; color: var(--muted); }

  .about-heading{
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    margin-bottom: 28px;
    line-height: 1.25;
  }

  /* --- photo, framed like an editor window --- */

  .photo-frame{
    position: relative;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
  }

  .photo-frame-bar{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
  }

  .photo-frame-bar .dot{
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--muted);
    opacity: 0.5;
  }

  .photo-frame-bar .filename{
    margin-left: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
  }

  .photo-frame-body{
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--surface-2);
  }

  .photo-frame-body img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.92);
  }

  /* --- right side: intro + info card --- */

  .about-text{
    color: var(--muted);
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 36px;
  }

  .about-text p{ margin-bottom: 18px; }
  .about-text strong{ color: var(--text); font-weight: 600; }

  /* info card styled like a JS object literal */
  .info-card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 22px 26px;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 2;
  }

  .info-card .line{ color: var(--muted); }
  .info-card .brace{ color: var(--muted); opacity: 0.6; }
  .info-card .key{ color: var(--teal); }
  .info-card .value{ color: var(--amber); }
  .info-card .indent{ padding-left: 22px; display: block; }

  /* ---------- RESPONSIVE ---------- */

  @media (max-width: 860px){
    .about-inner{
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .photo-frame{
      max-width: 340px;
      margin: 0 auto;
    }
  }

  @media (max-width: 480px){
    .about-section{ padding: 70px 20px; }
    .info-card{ font-size: 13px; padding: 18px 20px; }
  }
.education-section{
    background: var(--ink);
    color: var(--text);
    padding: 100px 32px;
  }

  .education-inner{
    max-width: 900px;
    margin: 0 auto;
  }

  .education-eyebrow{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--amber);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
  }
  .education-eyebrow::before{ content: '// '; color: var(--muted); }

  .education-heading{
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    margin-bottom: 8px;
  }

  .education-subheading{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 56px;
  }
  .education-subheading .cmd{ color: var(--teal); }

  /* --- git-log style timeline --- */

  .commit-log{
    position: relative;
    padding-left: 8px;
  }

  /* the vertical branch line */
  .commit-log::before{
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 15px;
    width: 2px;
    background: var(--border);
  }

  .commit{
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 24px;
    padding-bottom: 46px;
  }

  .commit:last-child{ padding-bottom: 0; }

  .commit-node{
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 6px;
  }

  .commit-node .dot{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--teal);
    z-index: 2;
  }

  .commit.current .commit-node .dot{
    background: var(--amber);
    border-color: var(--amber);
    box-shadow: 0 0 0 4px rgba(242, 166, 90, 0.15);
  }

  .commit-body{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 24px;
  }

  .commit-meta{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }

  .commit-degree{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--text);
  }

  .commit-date{
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
  }

  .commit-institution{
    font-size: 14.5px;
    color: var(--muted);
  }

  .commit-tag{
    display: inline-block;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--teal);
    background: rgba(95, 201, 201, 0.08);
    border: 1px solid rgba(95, 201, 201, 0.25);
    border-radius: 4px;
    padding: 3px 9px;
  }

  .commit.current .commit-tag{
    color: var(--amber);
    background: rgba(242, 166, 90, 0.08);
    border-color: rgba(242, 166, 90, 0.3);
  }

  /* ---------- RESPONSIVE ---------- */

  @media (max-width: 600px){
    .education-section{ padding: 70px 20px; }
    .commit{ grid-template-columns: 26px 1fr; column-gap: 16px; }
    .commit-log::before{ left: 12px; }
    .commit-node .dot{ width: 12px; height: 12px; }
    .commit-body{ padding: 16px 18px; }
    .commit-meta{ flex-direction: column; align-items: flex-start; gap: 4px; }
    .commit-degree{ font-size: 15.5px; }
  }

  .experience-section{
    background: var(--ink);
    color: var(--text);
    padding: 100px 32px;
  }

  .experience-inner{
    max-width: 900px;
    margin: 0 auto;
  }

  .experience-eyebrow{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--amber);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
  }
  .experience-eyebrow::before{ content: '// '; color: var(--muted); }

  .experience-heading{
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    margin-bottom: 8px;
  }

  .experience-subheading{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 44px;
  }
  .experience-subheading .cmd{ color: var(--teal); }

  /* --- process table header (desktop only) --- */

  .process-header{
    display: grid;
    grid-template-columns: 90px 1fr 170px 110px;
    gap: 16px;
    padding: 0 24px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
  }

  /* --- job card --- */

  .job{
    display: grid;
    grid-template-columns: 90px 1fr 170px 110px;
    gap: 16px;
    align-items: start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
  }

  .job:last-child{ border-bottom: none; }

  .job-status{
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 3px;
    font-family: var(--font-mono);
    font-size: 12px;
  }

  .status-dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--muted);
    flex-shrink: 0;
  }

  .job.running .status-dot{
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(111, 207, 122, 0.18);
    animation: pulse 1.6s ease-in-out infinite;
  }

  @keyframes pulse{
    0%, 100%{ box-shadow: 0 0 0 4px rgba(111, 207, 122, 0.18); }
    50%{ box-shadow: 0 0 0 7px rgba(111, 207, 122, 0.1); }
  }

  .job.running .status-text{ color: var(--green); }
  .job:not(.running) .status-text{ color: var(--muted); }

  .job-main .role{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 4px;
  }

  .job-main .company{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--teal);
    margin-bottom: 10px;
  }

  .job-main .desc{
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 520px;
  }

  .job-duration{
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--muted);
    padding-top: 4px;
  }

  .job-pid{
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--muted);
    padding-top: 4px;
  }

  /* ---------- RESPONSIVE ---------- */

  @media (max-width: 760px){
    .process-header{ display: none; }

    .job{
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 18px 4px;
    }

    .job-status{ order: 3; padding-top: 0; }
    .job-duration{ order: 2; padding-top: 0; }
    .job-pid{ display: none; }

    .job-main .desc{ max-width: 100%; }
  }

  @media (max-width: 480px){
    .experience-section{ padding: 70px 20px; }
  }

   .projects-section{
    background: var(--ink);
    color: var(--text);
    padding: 100px 32px;
  }

  .projects-inner{
    max-width: 1160px;
    margin: 0 auto;
  }

  .projects-eyebrow{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--amber);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
  }
  .projects-eyebrow::before{ content: '// '; color: var(--muted); }

  .projects-heading{
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    margin-bottom: 8px;
  }

  .projects-subheading{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 48px;
  }
  .projects-subheading .cmd{ color: var(--teal); }

  /* --- grid (desktop / tablet) --- */

  .projects-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  /* --- card --- */

  .project-card{
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease;
  }

  .project-card:hover{
    border-color: rgba(95, 201, 201, 0.35);
    transform: translateY(-4px);
  }

  .card-tab{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
  }

  .card-tab .dot{
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--muted);
    opacity: 0.5;
  }

  .card-tab .slug{
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-body{
    padding: 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .card-title{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 10px;
  }

  .card-desc{
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 18px;
    flex: 1;
  }

  .card-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
  }

  .card-tags span{
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--teal);
    background: rgba(95, 201, 201, 0.08);
    border: 1px solid rgba(95, 201, 201, 0.25);
    border-radius: 4px;
    padding: 3px 8px;
  }

  .card-links{
    display: flex;
    gap: 10px;
  }

  .card-links a{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .card-links a svg{
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }

  .link-demo{
    color: var(--ink);
    background: var(--amber);
    border: 1px solid var(--amber);
  }
  .link-demo:hover{
    background: transparent;
    color: var(--amber);
  }

  .link-github{
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
  }
  .link-github:hover{
    border-color: var(--teal);
    color: var(--teal);
  }

  /* ---------- RESPONSIVE ---------- */

  @media (max-width: 980px){
    .projects-grid{ grid-template-columns: repeat(2, 1fr); }
  }

  /* mobile: horizontal sliding cards */
  @media (max-width: 700px){
    .projects-section{ padding: 70px 0 70px 20px; }

    .projects-inner{ padding-right: 0; }

    .projects-eyebrow,
    .projects-heading,
    .projects-subheading{ padding-right: 20px; }

    .projects-grid{
      display: flex;
      grid-template-columns: none;
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-right: 20px;
      padding-bottom: 12px;
      scrollbar-width: none;
    }

    .projects-grid::-webkit-scrollbar{ display: none; }

    .project-card{
      flex: 0 0 82%;
      scroll-snap-align: start;
    }

    .project-card:hover{ transform: none; }
  }

  @media (max-width: 420px){
    .project-card{ flex: 0 0 88%; }
  }

  .skills-section{
    background: var(--ink);
    color: var(--text);
    padding: 100px 0;
    overflow: hidden;
  }

  .skills-inner{
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 32px;
  }

  .skills-eyebrow{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--amber);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
  }
  .skills-eyebrow::before{ content: '// '; color: var(--muted); }

  .skills-heading{
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    margin-bottom: 8px;
  }

  .skills-subheading{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 48px;
  }
  .skills-subheading .cmd{ color: var(--teal); }

  /* --- marquee viewport with edge fade --- */

  .marquee-row{
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }

  .marquee-track{
    display: flex;
    width: max-content;
    gap: 18px;
    animation: scroll-left 26s linear infinite;
  }

  .marquee-row.reverse .marquee-track{
    animation-name: scroll-right;
    animation-duration: 30s;
  }

  .marquee-row:hover .marquee-track{
    animation-play-state: paused;
  }

  @keyframes scroll-left{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }

  @keyframes scroll-right{
    from{ transform: translateX(-50%); }
    to{ transform: translateX(0); }
  }

  /* --- logo tile --- */

  .tech-tile{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    white-space: nowrap;
    transition: border-color 0.25s ease, transform 0.25s ease;
  }

  .tech-tile:hover{
    border-color: rgba(95, 201, 201, 0.35);
    transform: translateY(-2px);
  }

  .tech-tile img{
    width: 26px;
    height: 26px;
    flex-shrink: 0;
  }

  .tech-tile img.invert{
    filter: invert(1) brightness(1.6);
  }

  .tech-tile span{
    font-family: var(--font-mono);
    font-size: 13.5px;
    color: var(--muted);
  }

  /* ---------- RESPONSIVE ---------- */

  @media (max-width: 700px){
    .skills-section{ padding: 70px 0; }
    .skills-inner{ padding: 0 20px; }
    .marquee-track{ gap: 12px; animation-duration: 20s; }
    .marquee-row.reverse .marquee-track{ animation-duration: 24s; }
    .tech-tile{ padding: 10px 16px; }
    .tech-tile img{ width: 22px; height: 22px; }
    .tech-tile span{ font-size: 12.5px; }
  }

  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation: none; }
    .marquee-row{ overflow-x: auto; }
  }
 .contact-section{
    background: var(--ink);
    color: var(--text);
    padding: 100px 32px 120px;
  }

  .contact-inner{
    max-width: 1160px;
    margin: 0 auto;
  }

  .contact-eyebrow{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--amber);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
  }
  .contact-eyebrow::before{ content: '// '; color: var(--muted); }

  .contact-heading{
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    margin-bottom: 8px;
  }

  .contact-subheading{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 48px;
  }
  .contact-subheading .cmd{ color: var(--teal); }

  .contact-grid{
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    align-items: start;
  }

  /* --- left: info card --- */

  .contact-info-card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }

  .info-card-tab{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
  }
  .info-card-tab .dot{
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--muted);
    opacity: 0.5;
  }
  .info-card-tab .filename{
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
  }

  .info-card-body{
    padding: 26px 24px;
  }

  .info-row{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
  .info-row:last-child{ border-bottom: none; }

  .info-row .icon{
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 7px;
    background: rgba(95, 201, 201, 0.08);
    border: 1px solid rgba(95, 201, 201, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .info-row .icon svg{
    width: 16px;
    height: 16px;
    stroke: var(--teal);
    fill: none;
    stroke-width: 2;
  }

  .info-row .label{
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
  }

  .info-row .value{
    font-size: 14.5px;
    color: var(--text);
    word-break: break-word;
  }

  .info-row .value.status-open{
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 13px;
  }
  .info-row .value.status-open::before{
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    margin-right: 7px;
  }

  /* --- right: form styled like a terminal input block --- */

  .contact-form-card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }

  .form-card-tab{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
  }
  .form-card-tab .dot{
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--muted);
    opacity: 0.5;
  }
  .form-card-tab .filename{
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
  }

  .contact-form{
    padding: 30px 30px 26px;
  }

  .form-group{
    margin-bottom: 22px;
  }

  .form-group label{
    display: block;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--teal);
    margin-bottom: 8px;
  }
  .form-group label .prompt{
    color: var(--amber);
    margin-right: 4px;
  }

  .form-group input,
  .form-group textarea{
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 13px 14px;
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--text);
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .form-group input::placeholder,
  .form-group textarea::placeholder{
    color: var(--muted);
    opacity: 0.7;
  }

  .form-group input:focus,
  .form-group textarea:focus{
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(95, 201, 201, 0.15);
  }

  .form-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .submit-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ink);
    background: var(--amber);
    border: 1px solid var(--amber);
    border-radius: 6px;
    padding: 13px 26px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .submit-btn:hover{
    background: transparent;
    color: var(--amber);
  }

  .submit-btn svg{
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }

  .form-status{
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--green);
    display: none;
  }
  .form-status.visible{ display: block; }
  .form-status::before{ content: '$ '; color: var(--muted); }

  /* ---------- RESPONSIVE ---------- */

  @media (max-width: 900px){
    .contact-grid{
      grid-template-columns: 1fr;
      gap: 32px;
    }
  }

  @media (max-width: 560px){
    .contact-section{ padding: 70px 20px 90px; }
    .contact-form{ padding: 24px 20px 22px; }
    .info-card-body{ padding: 22px 18px; }
    .form-row{ grid-template-columns: 1fr; gap: 0; }
    .submit-btn{ width: 100%; justify-content: center; }
  }
  .site-footer{
    background: var(--surface);
    color: var(--text);
    border-top: 1px solid var(--border);
    padding: 64px 32px 0;
  }

  .footer-inner{
    max-width: 1160px;
    margin: 0 auto;
  }

  .footer-top{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
  }

  /* --- brand column --- */

  .footer-logo{
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 14px;
  }
  .footer-logo .bracket{ color: var(--muted); }
  .footer-logo .name{ color: var(--text); font-weight: 700; }
  .footer-logo .slash{ color: var(--muted); }
  .footer-logo .cursor{
    display: inline-block;
    width: 2px;
    height: 16px;
    background: var(--amber);
    margin-left: 6px;
    animation: blink 1.1s steps(1) infinite;
  }
  @keyframes blink{
    0%, 49%{ opacity: 1; }
    50%, 100%{ opacity: 0; }
  }

  .footer-tagline{
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 320px;
    margin-bottom: 22px;
  }

  .footer-socials{
    display: flex;
    gap: 12px;
  }

  .footer-socials a{
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--muted);
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }

  .footer-socials a:hover{
    border-color: var(--teal);
    color: var(--teal);
    transform: translateY(-3px);
  }

  .footer-socials a svg{
    width: 17px;
    height: 17px;
  }

  /* --- link columns --- */

  .footer-col-title{
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--amber);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
  }
  .footer-col-title::before{ content: '// '; color: var(--muted); }

  .footer-links{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .footer-links a{
    font-size: 14px;
    color: var(--muted);
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-flex;
    align-items: center;
  }

  .footer-links a::before{
    content: '~/';
    font-family: var(--font-mono);
    color: var(--muted);
    opacity: 0.5;
    margin-right: 6px;
    transition: opacity 0.2s ease;
  }

  .footer-links a:hover{
    color: var(--teal);
  }
  .footer-links a:hover::before{
    opacity: 1;
    color: var(--teal);
  }

  .footer-contact-item{
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 12px;
    word-break: break-word;
  }

  .footer-contact-item a{
    color: var(--muted);
    transition: color 0.2s ease;
  }
  .footer-contact-item a:hover{ color: var(--teal); }

  /* --- bottom bar --- */

  .footer-bottom{
    border-top: 1px solid var(--border);
    padding: 22px 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }

  .footer-bottom p{
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--muted);
  }

  .footer-status{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--muted);
  }

  .footer-status .dot{
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #6FCF7A;
    box-shadow: 0 0 0 3px rgba(111, 207, 122, 0.18);
    animation: pulse 1.6s ease-in-out infinite;
  }

  @keyframes pulse{
    0%, 100%{ box-shadow: 0 0 0 3px rgba(111, 207, 122, 0.18); }
    50%{ box-shadow: 0 0 0 6px rgba(111, 207, 122, 0.1); }
  }

  /* ---------- RESPONSIVE ---------- */

  @media (max-width: 860px){
    .footer-top{
      grid-template-columns: 1fr 1fr;
      gap: 36px;
    }
    .footer-top > :first-child{
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 560px){
    .site-footer{ padding: 50px 20px 0; }
    .footer-top{
      grid-template-columns: 1fr;
      gap: 30px;
      padding-bottom: 36px;
    }
    .footer-tagline{ max-width: 100%; }
    .footer-bottom{
      flex-direction: column;
      align-items: flex-start;
      padding: 20px 0 24px;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .footer-logo .cursor,
    .footer-status .dot{ animation: none; opacity: 1; }
  }

  
  .cert-section{
    background: var(--ink);
    color: var(--text);
    padding: 100px 32px;
  }

  .cert-inner{
    max-width: 1160px;
    margin: 0 auto;
  }

  .cert-eyebrow{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--amber);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
  }
  .cert-eyebrow::before{ content: '// '; color: var(--muted); }

  .cert-heading{
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    margin-bottom: 8px;
  }

  .cert-subheading{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 48px;
  }
  .cert-subheading .cmd{ color: var(--teal); }

  /* --- grid --- */

  .cert-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  /* --- card --- */

  .cert-card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s ease, transform 0.25s ease;
  }

  .cert-card:hover{
    border-color: rgba(242, 166, 90, 0.35);
    transform: translateY(-4px);
  }

  .cert-top{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
  }

  .cert-badge{
    width: 44px;
    height: 44px;
    border-radius: 9px;
    background: rgba(242, 166, 90, 0.08);
    border: 1px solid rgba(242, 166, 90, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .cert-badge svg{
    width: 22px;
    height: 22px;
    stroke: var(--amber);
    fill: none;
    stroke-width: 1.8;
  }

  .cert-verified{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--teal);
    background: rgba(95, 201, 201, 0.08);
    border: 1px solid rgba(95, 201, 201, 0.25);
    border-radius: 4px;
    padding: 4px 8px;
    white-space: nowrap;
  }

  .cert-verified svg{
    width: 11px;
    height: 11px;
  }

  .cert-title{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .cert-issuer{
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 4px;
  }

  .cert-date{
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
    opacity: 0.8;
    margin-bottom: 20px;
  }

  .cert-link{
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--amber);
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }

  .cert-link svg{
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform 0.2s ease;
  }

  .cert-link:hover svg{
    transform: translate(2px, -2px);
  }

  /* ---------- RESPONSIVE ---------- */

  @media (max-width: 980px){
    .cert-grid{ grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 640px){
    .cert-section{ padding: 70px 20px; }
    .cert-grid{ grid-template-columns: 1fr; gap: 16px; }
    .cert-card{ padding: 20px; }
  }

  .logo{
    display: inline-flex;
    align-items: center;
    height: 100%;
  }

  .logo .signature-img{
    height: 42px;
    width: auto;
    display: block;
    /* subtle glow so it doesn't feel flat against the dark nav */
    filter: drop-shadow(0 0 10px rgba(242, 166, 90, 0.12));
    transition: transform 0.25s ease, filter 0.25s ease;
  }

  .logo:hover .signature-img{
    transform: translateY(-1px);
    filter: drop-shadow(0 0 14px rgba(242, 166, 90, 0.22));
  }

  /* uncomment / apply this class on the <img> if your signature is dark strokes
     and disappears against the dark navbar background */
  .logo .signature-img.invert{
    filter: invert(1) brightness(1.8) drop-shadow(0 0 10px rgba(242, 166, 90, 0.12));
  }

  @media (max-width: 420px){
    .logo .signature-img{ height: 34px; }
  }