:root{
    --bg:#0a0e0f;
    --panel:#0e1514;
    --panel-2:#10191a;
    --line:#1c2b29;
    --signal:#3dffa0;
    --signal-dim:#1f8f5c;
    --warn:#ff6b3d;
    --cyan:#7de0d3;
    --text:#cfe0dc;
    --text-dim:#7c9290;
    --text-faint:#4d6361;
    --mono: 'JetBrains Mono','IBM Plex Mono',ui-monospace,Consolas,monospace;
    --sans: 'IBM Plex Sans',-apple-system,Segoe UI,Roboto,sans-serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    line-height:1.6;
    overflow-x:hidden;
  }

  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      repeating-linear-gradient(0deg, rgba(61,255,160,0.025) 0px, rgba(61,255,160,0.025) 1px, transparent 1px, transparent 3px);
    pointer-events:none;
    z-index:9999;
    mix-blend-mode:overlay;
  }

  ::selection{background:var(--signal-dim); color:#000;}

  a{color:var(--cyan); text-decoration:none;}
  a:hover{color:var(--signal);}

  :focus-visible{
    outline:2px solid var(--signal);
    outline-offset:3px;
  }

  .wrap{max-width:1100px; margin:0 auto; padding:0 28px;}

  /* ---------- NAV ---------- */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(10,14,15,0.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1100px; margin:0 auto; padding:14px 28px;
    display:flex; align-items:center; justify-content:space-between;
    font-family:var(--mono); font-size:13px;
  }
  .nav-logo{color:var(--signal); font-weight:600; letter-spacing:0.5px;}
  .nav-logo .dim{color:var(--text-dim);}
  .nav-links{display:flex; gap:24px;}
  .nav-links a{color:var(--text-dim); font-size:12.5px; letter-spacing:0.5px; text-transform:uppercase;}
  .nav-links a:hover{color:var(--signal);}
  .nav-status{display:flex; align-items:center; gap:6px; color:var(--text-faint); font-size:11px;}
  .dot{width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 6px var(--signal); animation:blink 2s infinite;}
  @keyframes blink{0%,100%{opacity:1;} 50%{opacity:0.35;}}

  @media (max-width:680px){
    .nav-links{display:none;}
  }

  /* ---------- HERO / TERMINAL BOOT ---------- */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding-top:90px; padding-bottom:60px;
    position:relative;
    overflow:hidden;
  }

  /* ---- background photo slideshow ---- */
  .hero-bg{
    position:absolute; inset:0; z-index:0;
  }
  .hero-bg-slide{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    filter:blur(3px) brightness(0.55) saturate(0.9);
    opacity:0;
    transform:scale(1.06);
    transition:opacity 2.2s ease, transform 9s ease;
  }
  .hero-bg-slide.active{
    opacity:1;
    transform:scale(1.0);
  }
  .hero-bg-overlay{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(10,14,15,0.55) 0%, rgba(10,14,15,0.85) 60%, var(--bg) 100%);
  }

  .hero-content{
    position:relative; z-index:1;
  }

  /* hero-grid removed; replaced by hero-split */

  /* ---- hero split: desc left / skills right ---- */
  .hero-intro{
    margin-bottom:22px;
    opacity:0; animation:fadeIn 0.6s forwards; animation-delay:0.15s;
  }
  .hero-split{
    display:grid;
    grid-template-columns:1fr 1.45fr;
    gap:32px;
    align-items:start;
    margin-bottom:38px;
    opacity:0; animation:fadeIn 0.6s forwards; animation-delay:0.35s;
  }
  .hero-desc-col{
    display:flex; flex-direction:column; gap:20px;
  }
  .hero-sub{ margin:0; }
  .hero-skills-col{}
  .hero-skills-inline{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .hero-skills-inline .skill-card{
    padding:14px 14px 12px;
  }
  .hero-skills-inline .skill-head{
    font-size:11.5px; margin-bottom:8px;
  }
  .hero-skills-inline .meter{margin-bottom:10px;}
  .hero-skills-inline .tag-chip{font-size:10px; padding:2px 6px;}

  @media (max-width:900px){
    .hero-split{grid-template-columns:1fr;}
    .hero-skills-inline{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:560px){
    .hero-skills-inline{grid-template-columns:1fr;}
  }


  .hero-top{
    display:flex; align-items:center; gap:26px;
    margin-bottom:22px; flex-wrap:wrap;
  }
  .hero-photo{
    width:108px; height:108px; border-radius:50%;
    object-fit:cover;
    border:2px solid var(--signal-dim);
    box-shadow:0 0 0 5px rgba(61,255,160,0.06), 0 10px 30px -10px rgba(0,0,0,0.7);
    flex-shrink:0;
  }
  .hero-top-text{min-width:0;}

  .hero-name{
    font-family:var(--mono);
    font-size:clamp(26px, 4.4vw, 42px);
    font-weight:700;
    color:var(--text);
    margin:0 0 6px;
    letter-spacing:-0.5px;
    line-height:1.15;
  }
  .hero-name .blink-cursor{
    display:inline-block; width:0.45em; height:0.8em;
    background:var(--signal); margin-left:6px;
    animation:cursor 1s steps(1) infinite;
    vertical-align:-0.05em;
  }
  @keyframes cursor{0%,49%{opacity:1;} 50%,100%{opacity:0;}}

  .hero-role{
    font-family:var(--mono); font-size:14.5px; color:var(--signal);
    margin:0;
  }

  /* hero-skills-snap removed; full skill cards now embedded in hero */

  .hero-sub{
    max-width:560px; color:var(--text-dim); font-size:15.5px;
    margin:0;
  }
  .hero-cta{
    margin-top:24px; margin-bottom:38px; display:flex; gap:14px; flex-wrap:wrap;
    opacity:0; animation:fadeIn 0.6s forwards; animation-delay:0.65s;
  }

  .terminal{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 0 0 1px rgba(61,255,160,0.04), 0 30px 80px -40px rgba(0,0,0,0.8);
    opacity:0; animation:fadeIn 0.6s forwards; animation-delay:0.85s;
  }
  .terminal-bar{
    display:flex; align-items:center; gap:8px;
    padding:10px 14px;
    background:var(--panel-2);
    border-bottom:1px solid var(--line);
    font-family:var(--mono); font-size:11px; color:var(--text-faint);
  }
  .terminal-bar .tdot{width:9px; height:9px; border-radius:50%;}
  .terminal-bar .tdot:nth-child(1){background:#ff5f56;}
  .terminal-bar .tdot:nth-child(2){background:#ffbd2e;}
  .terminal-bar .tdot:nth-child(3){background:#27c93f;}
  .terminal-title{margin-left:8px;}
  .terminal-body{
    padding:26px 28px 30px;
    font-family:var(--mono);
    font-size:13.5px;
    color:var(--text-dim);
  }
  .terminal-body .ln{margin-bottom:5px; opacity:0; animation:fadeIn 0.4s forwards;}
  .terminal-body .ok{color:var(--signal);}
  .terminal-body .tag{color:var(--cyan);}
  .terminal-body .warn{color:var(--warn);}
  @keyframes fadeIn{to{opacity:1;}}

  @media (max-width:560px){
    .hero-top{flex-direction:column; align-items:flex-start; text-align:left;}
    .hero-photo{width:84px; height:84px;}
  }
  .btn{
    font-family:var(--mono); font-size:13px;
    padding:11px 20px; border-radius:10px;
    border:1px solid var(--signal-dim);
    color:var(--signal); background:transparent;
    cursor:pointer; transition:all 0.2s;
    letter-spacing:0.3px;
  }
  .btn:hover{background:rgba(61,255,160,0.08); border-color:var(--signal); box-shadow:0 0 18px -6px var(--signal);}
  .btn.ghost{border-color:var(--line); color:var(--text-dim);}
  .btn.ghost:hover{border-color:var(--text-dim); color:var(--text);}

  /* ---------- SECTION SCAFFOLD ---------- */
  section{padding:90px 0;}
  .sec-head{
    display:flex; align-items:baseline; gap:14px; margin-bottom:36px;
  }
  .sec-num{font-family:var(--mono); color:var(--signal-dim); font-size:13px;}
  .sec-title{
    font-family:var(--mono); font-size:clamp(22px,3vw,30px);
    color:var(--text); font-weight:600; margin:0;
  }
  .sec-rule{flex:1; height:1px; background:var(--line);}

  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start;
  }
  @media (max-width:760px){ .about-grid{grid-template-columns:1fr;} }
  .about-text p{color:var(--text-dim); font-size:15.5px; margin:0 0 16px;}
  .about-text strong{color:var(--text); font-weight:600;}
  .specs{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    font-family:var(--mono); font-size:12.5px; overflow:hidden;
  }
  .specs-head{
    padding:10px 16px; background:var(--panel-2); color:var(--text-faint);
    border-bottom:1px solid var(--line); letter-spacing:0.5px;
  }
  .specs-row{
    display:flex; justify-content:space-between;
    padding:10px 16px; border-bottom:1px solid var(--line);
    color:var(--text-dim);
  }
  .specs-row:last-child{border-bottom:none;}
  .specs-row span:last-child{color:var(--cyan); text-align:right;}

  /* ---------- SKILLS ---------- */
  .skills-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  }
  @media (max-width:760px){ .skills-grid{grid-template-columns:1fr;} }
  .skill-card{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:20px 20px 18px;
    transition:border-color 0.25s, transform 0.25s;
  }
  .skill-card:hover{border-color:var(--signal-dim); transform:translateY(-2px);}
  .skill-head{
    display:flex; align-items:center; justify-content:space-between;
    font-family:var(--mono); font-size:13px; color:var(--text); margin-bottom:12px;
  }
  .skill-head .pct{color:var(--signal); font-size:12px;}
  .meter{height:4px; background:var(--line); border-radius:4px; overflow:hidden; margin-bottom:14px;}
  .meter-fill{height:100%; background:linear-gradient(90deg,var(--signal-dim),var(--signal)); border-radius:4px;}
  .skill-tags{display:flex; flex-wrap:wrap; gap:6px;}
  .tag-chip{
    font-family:var(--mono); font-size:11px; color:var(--text-dim);
    border:1px solid var(--line); padding:3px 8px; border-radius:8px;
  }

  /* ---------- PROJECTS ---------- */
  .project{
    background:var(--panel); border:1px solid var(--line); border-radius:18px;
    margin-bottom:32px; overflow:hidden;
  }
  .project-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 22px; background:var(--panel-2); border-bottom:1px solid var(--line);
    flex-wrap:wrap; gap:10px;
  }
  .project-title{
    font-family:var(--mono); font-size:16px; color:var(--text); font-weight:600;
    display:flex; align-items:center; gap:10px;
  }
  .status-pill{
    font-family:var(--mono); font-size:10.5px; padding:3px 9px; border-radius:20px;
    border:1px solid var(--signal-dim); color:var(--signal); letter-spacing:0.4px;
  }
  .status-pill.archived{border-color:var(--text-faint); color:var(--text-faint);}
  .project-body{padding:24px 22px 26px;}
  .project-desc{color:var(--text-dim); font-size:15px; margin:0 0 20px; max-width:680px;}

  .project-media{
    display:grid; grid-template-columns:1.1fr 1fr; gap:18px; margin-bottom:22px;
  }
  @media (max-width:760px){ .project-media{grid-template-columns:1fr;} }
  .media-box{
    border-radius:14px; overflow:hidden; border:1px solid var(--line);
    background:#000; position:relative;
  }
  .media-box video, .media-box img{width:100%; height:100%; object-fit:cover; display:block;}
  .media-caption{
    font-family:var(--mono); font-size:10.5px; color:var(--text-faint);
    padding:7px 10px; background:var(--panel-2); border-top:1px solid var(--line);
  }
  .photo-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .photo-grid .media-box{aspect-ratio:4/3;}

  .feature-list{
    display:grid; grid-template-columns:repeat(2,1fr); gap:10px 22px;
    margin:0 0 22px; padding:0; list-style:none;
  }
  @media (max-width:600px){ .feature-list{grid-template-columns:1fr;} }
  .feature-list li{
    font-size:14px; color:var(--text-dim);
    padding-left:20px; position:relative;
  }
  .feature-list li::before{
    content:"▸"; color:var(--signal); position:absolute; left:0; top:0;
  }

  .project-footer{
    display:flex; gap:12px; flex-wrap:wrap; align-items:center;
    padding-top:18px; border-top:1px solid var(--line);
  }
  .dl-btn{
    font-family:var(--mono); font-size:12.5px;
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 16px; border-radius:10px;
    border:1px solid var(--cyan); color:var(--cyan);
    transition:all 0.2s;
  }
  .dl-btn:hover{background:rgba(125,224,211,0.08); box-shadow:0 0 16px -6px var(--cyan);}
  .stack-line{font-family:var(--mono); font-size:11.5px; color:var(--text-faint);}
  .stack-line .cyan{color:var(--cyan);}

  /* ---------- CONTACT ---------- */
  .contact-panel{
    background:var(--panel); border:1px solid var(--line); border-radius:18px;
    padding:36px; display:grid; grid-template-columns:1fr 1fr; gap:40px;
  }
  @media (max-width:760px){ .contact-panel{grid-template-columns:1fr; padding:26px;} }
  .contact-left p{color:var(--text-dim); font-size:15px; margin:0 0 22px;}
  .contact-links{display:flex; flex-direction:column; gap:14px;}
  .contact-link{
    display:flex; align-items:center; gap:12px;
    font-family:var(--mono); font-size:14px; color:var(--text);
    padding:10px 0; border-bottom:1px solid var(--line);
  }
  .contact-link .lbl{color:var(--text-faint); width:70px; font-size:11.5px; text-transform:uppercase;}
  .contact-link:hover .lbl{color:var(--signal-dim);}

  form{display:flex; flex-direction:column; gap:14px;}
  .field label{
    display:block; font-family:var(--mono); font-size:11px; color:var(--text-faint);
    margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px;
  }
  .field input, .field textarea{
    width:100%; background:var(--bg); border:1px solid var(--line); border-radius:10px;
    color:var(--text); font-family:var(--sans); font-size:14px; padding:10px 12px;
    resize:vertical;
  }
  .field input:focus, .field textarea:focus{border-color:var(--signal-dim); outline:none;}
  .field textarea{min-height:90px;}
  .submit-btn{align-self:flex-start; margin-top:4px; cursor:pointer;}

  footer{
    border-top:1px solid var(--line); padding:26px 0 40px;
    font-family:var(--mono); font-size:11.5px; color:var(--text-faint);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-delay:0s !important;}
    html{scroll-behavior:auto;}
  }