:root{
    --bg:#eef1f6;
    --bg-card:#ffffff;
    --ink:#141924;
    --ink-muted:#5b6472;
    --line:#d7dee8;
    --accent:#2a54d6;
    --accent-soft:rgba(42,84,214,0.08);
    --ok:#1c8f5a;
    --ok-soft:rgba(28,143,90,0.1);
    --warn:#b45f06;
    --danger:#b42318;
    --radius:10px;
    --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    --sans:'IBM Plex Sans', -apple-system, sans-serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  body{
    background:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px),
      var(--bg);
    background-size:40px 40px, 40px 40px, 100% 100%;
    background-attachment:fixed;
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  @supports (-webkit-touch-callout: none){
    body{ background-attachment:scroll; }
  }
  @media (max-width: 991px){
    body{ background-attachment:scroll; }
  }

  ::selection{background:var(--accent-soft); color:var(--accent);}
  a{color:var(--accent); text-decoration:none;}
  a:hover{text-decoration:underline;}
  .mono{font-family:var(--mono);}

  .sidenav{
    position:fixed;
    top:0; left:0; bottom:0;
    width:230px;
    background:var(--bg-card);
    border-right:1px solid var(--line);
    padding:28px 22px;
    display:flex;
    flex-direction:column;
    z-index:1000;
  }
  .sidenav .logo{
    font-family:var(--mono);
    font-size:0.92rem;
    font-weight:600;
    color:var(--ink);
    margin-bottom:38px;
    letter-spacing:-0.02em;
  }
  .sidenav .logo span{color:var(--accent);}
  .sidenav .route{
    display:block;
    font-family:var(--mono);
    font-size:0.82rem;
    color:var(--ink-muted);
    padding:7px 0;
    border-left:2px solid transparent;
    padding-left:12px;
    margin-left:-13px;
    transition:color .15s ease, border-color .15s ease;
  }
  .sidenav .route:hover, .sidenav .route.active{
    color:var(--accent);
    border-left-color:var(--accent);
    text-decoration:none;
  }
  .sidenav .route .verb{color:var(--ok); font-weight:600; margin-right:6px;}
  .sidenav .status{
    margin-top:auto;
    font-family:var(--mono);
    font-size:0.75rem;
    color:var(--ok);
    display:flex;
    align-items:center;
    gap:7px;
  }
  .status-dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--ok);
    box-shadow:0 0 0 3px var(--ok-soft);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.45;} }
  .sidenav .social{margin-top:14px; display:flex; gap:14px;}
  .sidenav .social a{color:var(--ink-muted); font-size:1.05rem;}
  .sidenav .social a:hover{color:var(--accent);}

  .mobile-topbar{
    display:none;
    position:sticky; top:0; z-index:1000;
    background:var(--bg-card);
    border-bottom:1px solid var(--line);
    padding:14px 18px;
    align-items:center;
    justify-content:space-between;
    font-family:var(--mono);
  }

  #mobileNav{
    max-height:80vh;
    overflow-y:auto;
    background:var(--bg-card);
  }
  #mobileNav .offcanvas-header{
    border-bottom:1px solid var(--line);
    padding:16px 20px;
  }
  #mobileNav .offcanvas-body{padding:8px 20px 20px;}
  #mobileNav .route{font-size:0.95rem; padding:11px 0; border-bottom:1px dashed var(--line);}
  #mobileNav .route:last-child{border-bottom:none;}
  #mobileNav .btn-close{ background-size:14px; opacity:0.6; }
  #mobileNav .btn-close:hover{opacity:1;}

  main{margin-left:230px; padding:0 48px;}
  section{padding:96px 0 30px; scroll-margin-top:30px;}
  section .eyebrow{
    font-family:var(--mono);
    font-size:0.78rem;
    color:var(--accent);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:10px;
  }
  section h2{
    font-family:var(--mono);
    font-size:1.55rem;
    font-weight:700;
    margin-bottom:28px;
    letter-spacing:-0.02em;
  }
  .max-w{max-width:760px;}

  .hero{padding-top:76px;}
  .hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;}
  .hero-kicker{
    font-family:var(--mono);
    font-size:0.85rem;
    color:var(--ok);
    margin-bottom:16px;
  }
  .hero h1{
    font-size:2.7rem;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-0.02em;
    margin-bottom:18px;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--accent);
    border-bottom:3px solid var(--accent-soft);
  }
  .hero p.lead{
    color:var(--ink-muted);
    font-size:1.08rem;
    max-width:480px;
    margin-bottom:30px;
  }
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

  .btn-terminal{
    font-family:var(--mono);
    font-size:0.88rem;
    font-weight:600;
    padding:12px 22px;
    border-radius:8px;
    border:1.5px solid var(--ink);
    background:var(--ink);
    color:#fff;
    display:inline-flex; align-items:center; gap:8px;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-terminal:hover{
    color:#fff; text-decoration:none;
    transform:translateY(-2px);
    box-shadow:0 6px 0 0 var(--line);
  }
  .btn-terminal.ghost{
    background:transparent; color:var(--ink);
    border-color:var(--line);
  }
  .btn-terminal.ghost:hover{
    box-shadow:0 6px 0 0 var(--accent-soft);
    border-color:var(--ink);
    color:var(--ink);
  }

  .term{
    background:#12141c;
    border-radius:10px;
    box-shadow:0 20px 50px -20px rgba(20,25,36,0.35);
    overflow:hidden;
    border:1px solid #262b3a;
  }
  .term-bar{
    display:flex; align-items:center; gap:8px;
    padding:11px 14px;
    background:#1a1e29;
    border-bottom:1px solid #262b3a;
  }
  .term-dot{width:10px; height:10px; border-radius:50%;}
  .term-dot.r{background:#ff5f57;}
  .term-dot.y{background:#febc2e;}
  .term-dot.g{background:#28c840;}
  .term-tab{
    margin-left:10px;
    font-family:var(--mono);
    font-size:0.74rem;
    color:#8b93a7;
  }
  .term-body{
    padding:22px 20px 26px;
    font-family:var(--mono);
    font-size:0.86rem;
    color:#c4cadb;
    min-height:220px;
  }
  .term-body .prompt{color:#5fd88f;}
  .term-line{margin-bottom:14px;}
  .term-out{color:#e7eaf2; margin-left:0; margin-top:4px;}
  .cursor{
    display:inline-block;
    width:7px; height:1em;
    background:#5fd88f;
    vertical-align:text-bottom;
    animation:blink 1s step-end infinite;
    margin-left:2px;
  }
  @keyframes blink{50%{opacity:0;}}

  .about-meta{
    display:flex; flex-wrap:wrap; gap:10px 26px;
    font-family:var(--mono);
    font-size:0.82rem;
    color:var(--ink-muted);
    margin-top:22px;
    padding-top:22px;
    border-top:1px dashed var(--line);
  }
  .about-meta span::before{content:"// "; color:var(--accent);}

  .timeline{position:relative; padding-left:26px;}
  .timeline::before{
    content:"";
    position:absolute; left:5px; top:6px; bottom:6px;
    width:2px;
    background:repeating-linear-gradient(var(--line), var(--line) 4px, transparent 4px, transparent 9px);
  }
  .commit{position:relative; margin-bottom:44px;}
  .commit:last-child{margin-bottom:0;}
  .commit::before{
    content:"";
    position:absolute; left:-26px; top:6px;
    width:12px; height:12px; border-radius:50%;
    background:var(--bg-card);
    border:2.5px solid var(--accent);
  }
  .commit .hash{
    font-family:var(--mono);
    font-size:0.78rem;
    color:var(--ink-muted);
    margin-bottom:4px;
  }
  .commit .hash .range{color:var(--accent); font-weight:600;}
  .commit h3{font-size:1.12rem; font-weight:700; margin-bottom:2px;}
  .commit .company{color:var(--ink-muted); font-size:0.95rem; margin-bottom:12px; font-style:italic;}
  .commit ul{margin:0; padding-left:20px;}
  .commit li{margin-bottom:7px; color:#33394a;}

  .proj-card{
    background:var(--bg-card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    height:100%;
    display:flex; flex-direction:column;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .proj-card:hover{
    transform:translateY(-4px);
    border-color:var(--accent);
    box-shadow:0 14px 30px -18px rgba(42,84,214,0.35);
  }
  .proj-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px;}
  .proj-card h3{font-size:1.08rem; font-weight:700; margin:0;}
  .badge-status{
    font-family:var(--mono);
    font-size:0.68rem;
    padding:3px 9px;
    border-radius:20px;
    white-space:nowrap;
    font-weight:600;
  }
  .badge-status.live{background:var(--ok-soft); color:var(--ok);}
  .badge-status.soon{background:rgba(180,95,6,0.1); color:var(--warn);}
  .proj-card p{color:var(--ink-muted); font-size:0.92rem; flex-grow:1;}
  .tech-pills{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 16px;}
  .pill{
    font-family:var(--mono);
    font-size:0.68rem;
    padding:3px 9px;
    background:var(--accent-soft);
    color:var(--accent);
    border-radius:5px;
  }
  .proj-link{
    font-family:var(--mono);
    font-size:0.83rem;
    font-weight:600;
    display:inline-flex; align-items:center; gap:6px;
    padding-top:12px;
    border-top:1px solid var(--line);
  }

  .skill-row{margin-bottom:22px;}
  .skill-label{
    font-family:var(--mono);
    font-size:0.78rem;
    color:var(--accent);
    margin-bottom:9px;
  }
  .skill-label::before{content:"// ";}
  .skill-tags{display:flex; flex-wrap:wrap; gap:8px;}
  .skill-tags .pill{background:var(--bg-card); border:1px solid var(--line); color:var(--ink);}

  .review-form, .review-list-wrap{
    background:var(--bg-card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    height:100%;
  }
  .review-form h3, .review-list-wrap h3{
    font-family:var(--mono);
    font-size:0.95rem;
    font-weight:700;
    margin-bottom:6px;
  }
  .review-form .hint, .review-empty{
    font-family:var(--mono);
    font-size:0.78rem;
    color:var(--ink-muted);
    margin-bottom:16px;
  }
  .review-form label{
    display:block;
    font-family:var(--mono);
    font-size:0.75rem;
    color:var(--accent);
    margin-bottom:6px;
  }
  .review-form .field{margin-bottom:16px;}
  .review-form input, .review-form textarea{
    width:100%;
    font-family:var(--sans);
    font-size:0.95rem;
    color:var(--ink);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 12px;
  }
  .review-form input:focus, .review-form textarea:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  .review-form textarea{min-height:96px; resize:vertical;}
  .emoji-pick{display:flex; flex-wrap:wrap; gap:8px;}
  .emoji-pick button{
    width:52px; height:52px;
    font-size:1.55rem;
    line-height:1;
    border:1.5px solid var(--line);
    background:var(--bg);
    border-radius:10px;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .emoji-pick button:hover{border-color:var(--accent); transform:translateY(-2px);}
  .emoji-pick button[aria-pressed="true"]{
    border-color:var(--accent);
    background:var(--accent-soft);
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  .emoji-legend{
    display:flex;
    justify-content:space-between;
    font-family:var(--mono);
    font-size:0.68rem;
    color:var(--ink-muted);
    margin-top:8px;
  }
  .form-error{
    font-family:var(--mono);
    font-size:0.78rem;
    color:var(--danger);
    min-height:1.2em;
    margin:4px 0 12px;
  }
  .form-ok{
    font-family:var(--mono);
    font-size:0.78rem;
    color:var(--ok);
    margin-bottom:8px;
  }
  .review-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:560px;
    overflow-y:auto;
  }
  .review-card{
    display:grid;
    grid-template-columns:52px 1fr;
    gap:12px;
    border:1px solid var(--line);
    border-radius:8px;
    padding:14px;
    background:var(--bg);
  }
  .review-card .face{
    font-size:1.8rem;
    line-height:52px;
    text-align:center;
    background:var(--bg-card);
    border:1px solid var(--line);
    border-radius:8px;
  }
  .review-card .who{
    font-weight:700;
    font-size:0.98rem;
    margin:0;
  }
  .review-card .when{
    font-family:var(--mono);
    font-size:0.72rem;
    color:var(--ink-muted);
  }
  .review-card .body{
    margin:6px 0 0;
    color:#33394a;
    font-size:0.92rem;
  }
  .review-empty{
    border:1px dashed var(--line);
    border-radius:8px;
    padding:28px 16px;
    text-align:center;
    margin:0;
  }

  .contact-box{
    background:var(--bg-card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:32px;
  }
  .copy-row{
    display:flex; align-items:center; gap:12px;
    font-family:var(--mono);
    font-size:0.95rem;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:8px;
    padding:12px 16px;
    margin-top:16px;
    flex-wrap:wrap;
  }
  .copy-row span{word-break:break-all;}
  .copy-btn{
    margin-left:auto;
    background:none; border:none;
    color:var(--accent);
    font-family:var(--mono);
    font-size:0.78rem;
    font-weight:600;
    cursor:pointer;
  }
  .contact-links{display:flex; gap:16px; margin-top:22px; flex-wrap:wrap;}
  .contact-links a{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:0.85rem;
    color:var(--ink);
    border:1px solid var(--line);
    padding:9px 16px;
    border-radius:8px;
    transition:border-color .15s ease, color .15s ease;
  }
  .contact-links a:hover{border-color:var(--accent); color:var(--accent); text-decoration:none;}

  footer{
    font-family:var(--mono);
    font-size:0.76rem;
    color:var(--ink-muted);
    padding:36px 0 60px;
    border-top:1px dashed var(--line);
    margin-top:60px;
  }

  .reveal{opacity:1;}
  .js-enhanced .reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
  .js-enhanced .reveal.in{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1; transform:none; transition:none;}
    .status-dot{animation:none;}
    .cursor{animation:none;}
  }

  @media (max-width: 991px){
    .sidenav{display:none;}
    .mobile-topbar{display:flex;}
    main{margin-left:0; padding:0 20px;}
    .hero-grid{grid-template-columns:1fr; gap:36px;}
    .hero h1{font-size:2.1rem;}
    section{padding:64px 0 20px;}
  }