:root{
    --royal:#2563EB;
    --emerald:#10B981;
    --cyan:#06B6D4;
    --navy:#0F172A;
    --navy-soft:#16213a;
    --white:#FFFFFF;
    --slate:#334155;
    --slate-light:#64748B;
    --border-light:#E2E8F0;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
  }

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

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

  body{
    font-family:var(--font-body);
    color:var(--slate);
    background:var(--white);
    line-height:1.6;
    overflow-x:hidden;
  }

  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%; display:block;}

  ::selection{background:var(--cyan); color:var(--navy);}

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

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

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--cyan);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:"";
    width:22px;
    height:1px;
    background:var(--cyan);
    display:inline-block;
  }

  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:600;
    color:var(--navy);
    letter-spacing:-0.01em;
  }

  /* ---------- NAV ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    padding:20px 0;
    transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  }
  header.scrolled{
    background:rgba(15,23,42,0.86);
    backdrop-filter:blur(10px);
    padding:14px 0;
    box-shadow:0 1px 0 rgba(255,255,255,0.06);
  }
  nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand{
    font-family:var(--font-display);
    font-weight:700;
    font-size:19px;
    color:#fff;
    display:flex;
    align-items:center;
    gap:9px;
  }
  .brand .dot{color:var(--cyan);}
  .nav-links{
    display:flex;
    gap:34px;
    font-size:14.5px;
    font-weight:500;
    color:rgba(255,255,255,0.72);
  }
  .nav-links a{transition:color .2s ease; position:relative;}
  .nav-links a:hover{color:#fff;}
  .nav-cta{
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--navy);
    background:var(--cyan);
    padding:9px 18px;
    border-radius:6px;
    font-weight:600;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .nav-cta:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(6,182,212,0.35);}
  .nav-toggle{display:none;}

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

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    background:radial-gradient(ellipse at 70% 20%, #132244 0%, var(--navy) 55%);
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  #hero-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0.95;
  }
  .hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    padding:140px 32px 100px;
  }
  .hero-content{
    max-width:640px;
  }
  .hero-content .eyebrow{color:var(--cyan);}
  .hero h1{
    font-size:clamp(38px, 6vw, 62px);
    line-height:1.06;
    color:#fff;
  }
  .hero h1 .grad{
    background:linear-gradient(90deg, var(--cyan), var(--emerald));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero p.lede{
    margin-top:24px;
    font-size:17.5px;
    color:rgba(255,255,255,0.68);
    max-width:520px;
  }
  .hero-actions{
    margin-top:38px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .btn{
    font-family:var(--font-mono);
    font-size:14px;
    font-weight:500;
    padding:14px 26px;
    border-radius:7px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .btn-primary{
    background:var(--royal);
    color:#fff;
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(37,99,235,0.4);}
  .btn-ghost{
    border:1px solid rgba(255,255,255,0.22);
    color:#fff;
  }
  .btn-ghost:hover{border-color:var(--cyan); color:var(--cyan);}

  .hero-meta{
    margin-top:64px;
    display:flex;
    gap:38px;
    flex-wrap:wrap;
    font-family:var(--font-mono);
    font-size:13px;
    color:rgba(255,255,255,0.5);
  }
  .hero-meta strong{
    display:block;
    font-family:var(--font-display);
    font-size:22px;
    color:#fff;
    font-weight:600;
  }

  .scroll-cue{
    position:absolute;
    bottom:34px;
    left:32px;
    z-index:2;
    font-family:var(--font-mono);
    font-size:11.5px;
    color:rgba(255,255,255,0.45);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .scroll-cue .line{
    width:1px;
    height:34px;
    background:linear-gradient(var(--cyan), transparent);
    animation:pulse-line 2s ease-in-out infinite;
  }
  @keyframes pulse-line{
    0%,100%{opacity:0.3;}
    50%{opacity:1;}
  }

  /* ---------- SECTION SHELL ---------- */
  section{
    padding:110px 0;
  }
  .section-head{
    max-width:620px;
    margin-bottom:60px;
  }
  .section-head h2{
    font-size:clamp(28px,4vw,38px);
  }
  .section-head p{
    margin-top:16px;
    color:var(--slate-light);
    font-size:16px;
  }

  /* ---------- ABOUT ---------- */
  .about{
    background:var(--white);
  }
  .about-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:70px;
    align-items:start;
  }
  .about-text p{
    font-size:16.5px;
    color:var(--slate);
    margin-bottom:18px;
  }
  .about-text strong{color:var(--navy);}

  .stat-card{
    background:var(--navy);
    border-radius:14px;
    padding:34px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .stat{
    border-left:2px solid var(--cyan);
    padding-left:16px;
  }
  .stat .num{
    font-family:var(--font-display);
    font-size:30px;
    font-weight:700;
    color:#fff;
  }
  .stat .label{
    font-family:var(--font-mono);
    font-size:12px;
    color:rgba(255,255,255,0.55);
    margin-top:4px;
    text-transform:uppercase;
    letter-spacing:0.06em;
  }

  /* ---------- EXPERIENCE (git-log style) ---------- */
  .experience{
    background:var(--navy);
  }
  .experience .section-head h2{color:#fff;}
  .experience .section-head p{color:rgba(255,255,255,0.55);}

  .log{
    font-family:var(--font-mono);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    overflow:hidden;
    background:rgba(255,255,255,0.02);
  }
  .log-bar{
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px 20px;
    background:rgba(255,255,255,0.04);
    border-bottom:1px solid rgba(255,255,255,0.08);
    font-size:12.5px;
    color:rgba(255,255,255,0.4);
  }
  .log-bar span.dot{
    width:9px;height:9px;border-radius:50%;
    display:inline-block;
  }
  .log-bar .r{background:#ef4444;}
  .log-bar .y{background:#eab308;}
  .log-bar .g{background:var(--emerald);}
  .log-bar .cmd{margin-left:10px;}

  .commit{
    padding:26px 30px;
    border-bottom:1px solid rgba(255,255,255,0.07);
    position:relative;
    display:grid;
    grid-template-columns:120px 1fr;
    gap:26px;
  }
  .commit:last-child{border-bottom:none;}
  .commit-meta{
    font-size:12px;
    color:var(--cyan);
  }
  .commit-meta .hash{
    color:var(--emerald);
    display:block;
    margin-bottom:6px;
  }
  .commit-meta .date{
    color:rgba(255,255,255,0.4);
  }
  .commit-body h3{
    font-family:var(--font-display);
    color:#fff;
    font-size:19px;
    font-weight:600;
  }
  .commit-body h3 .company{
    color:var(--cyan);
    font-weight:500;
  }
  .commit-body ul{
    margin-top:14px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .commit-body li{
    font-family:var(--font-body);
    font-size:14.5px;
    color:rgba(255,255,255,0.62);
    padding-left:18px;
    position:relative;
  }
  .commit-body li::before{
    content:"+";
    position:absolute;
    left:0;
    color:var(--emerald);
    font-family:var(--font-mono);
  }

  @media (max-width:700px){
    .commit{grid-template-columns:1fr;}
  }

  /* ---------- SKILLS ---------- */
  .skills{background:var(--white);}
  .skill-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  .skill-card{
    border:1px solid var(--border-light);
    border-radius:12px;
    padding:28px;
    transition:border-color .2s ease, transform .2s ease;
  }
  .skill-card:hover{
    border-color:var(--cyan);
    transform:translateY(-3px);
  }
  .skill-card h3{
    font-size:15px;
    font-family:var(--font-mono);
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--royal);
    margin-bottom:16px;
    font-weight:600;
  }
  .chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .chip{
    font-family:var(--font-mono);
    font-size:12.5px;
    padding:6px 12px;
    border-radius:100px;
    background:#F1F5F9;
    color:var(--slate);
  }
  @media (max-width:900px){
    .skill-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:600px){
    .skill-grid{grid-template-columns:1fr;}
  }

  /* ---------- FEATURED PROJECTS ---------- */
  .projects{background:var(--navy);}
  .projects .section-head h2{color:#fff;}
  .projects .section-head p{color:rgba(255,255,255,0.55);}

  .project-list{
    display:flex;
    flex-direction:column;
    gap:1px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    overflow:hidden;
  }
  .project-card{
    background:var(--navy);
    padding:36px 34px;
    display:grid;
    grid-template-columns:44px 1.1fr 1fr;
    gap:28px;
    align-items:start;
    transition:background .25s ease;
  }
  .project-card:hover{background:rgba(255,255,255,0.03);}
  .project-index{
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--cyan);
    padding-top:4px;
  }
  .project-main h3{
    color:#fff;
    font-size:21px;
    font-weight:600;
  }
  .project-main .project-tag{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--emerald);
    margin-bottom:10px;
  }
  .project-main p{
    font-size:14.5px;
    color:rgba(255,255,255,0.62);
    margin-top:12px;
    max-width:480px;
  }
  .project-main .chip-row{margin-top:16px;}
  .project-main .chip{
    background:rgba(255,255,255,0.07);
    color:rgba(255,255,255,0.75);
  }
  .project-highlights{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-top:2px;
  }
  .project-highlights li{
    font-family:var(--font-mono);
    font-size:13px;
    color:rgba(255,255,255,0.55);
    padding-left:16px;
    position:relative;
  }
  .project-highlights li::before{
    content:"›";
    position:absolute;
    left:0;
    color:var(--royal);
  }

  @media (max-width:860px){
    .project-card{grid-template-columns:32px 1fr; }
    .project-highlights{grid-column:2 / 3;}
  }

  /* ---------- EDUCATION + CONTACT ---------- */
  .edu-contact{
    background:linear-gradient(180deg, var(--white) 0%, #F8FAFC 100%);
  }
  .ec-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
  }
  .edu-card{
    border-left:2px solid var(--emerald);
    padding-left:24px;
  }
  .edu-card .eyebrow{color:var(--emerald);}
  .edu-card .eyebrow::before{background:var(--emerald);}
  .edu-card h3{font-size:22px;}
  .edu-card p{color:var(--slate-light); margin-top:6px; font-size:15px;}
  .edu-card .years{
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--slate-light);
    margin-top:10px;
  }

  .contact-card{
    background:var(--navy);
    border-radius:16px;
    padding:44px;
    color:#fff;
  }
  .contact-card h3{color:#fff; font-size:24px; margin-bottom:12px;}
  .contact-card p{color:rgba(255,255,255,0.6); font-size:15px; margin-bottom:26px;}
  .contact-list{display:flex; flex-direction:column; gap:14px;}
  .contact-list a{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:var(--font-mono);
    font-size:14px;
    color:rgba(255,255,255,0.85);
    transition:color .2s ease;
  }
  .contact-list a:hover{color:var(--cyan);}
  .contact-list .ic{
    width:30px;height:30px;
    border-radius:8px;
    background:rgba(255,255,255,0.08);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    color:var(--cyan);
    font-size:14px;
  }

  @media (max-width:800px){
    .about-grid, .ec-grid{grid-template-columns:1fr; gap:40px;}
  }

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--navy);
    padding:28px 0;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .footer-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    font-family:var(--font-mono);
    font-size:12.5px;
    color:rgba(255,255,255,0.4);
  }

  /* reveal on scroll */
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.in{
    opacity:1;
    transform:translateY(0);
  }