:root{
    --bg:#0b0e13;
    --surface:#12161d;
    --surface-2:#171c24;
    --line:#232a35;
    --text:#e9ecf1;
    --muted:#8b94a3;
    --accent:#5fe0c4;
    --accent-2:#f0a868;
    --mono:'JetBrains Mono', monospace;
    --accent-font:'Space Grotesk', sans-serif;
    --display:'Bricolage Grotesque', sans-serif;
    --body:'Inter', sans-serif;
    --maxw:1180px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--body);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--accent);color:#0b0e13;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
  .eyebrow{
    font-family:var(--accent-font);
    font-size:12.5px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--accent);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{content:'';width:18px;height:1px;background:var(--accent);display:inline-block;}
  h1,h2,h3{font-family:var(--display);letter-spacing:-0.02em;}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(11,14,19,.72);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:var(--maxw);margin:0 auto;padding:16px 32px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{
    font-family:var(--accent-font);font-weight:600;font-size:15px;color:var(--text);
    display:flex;align-items:center;gap:8px;
  }
  .logo .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);}
  .nav-links{display:flex;gap:36px;align-items:center;}
  .nav-links a{
    font-family:var(--accent-font);font-size:13px;color:var(--muted);
    transition:color .2s;
  }
  .nav-links a:hover{color:var(--text);}
  .nav-cta{
    font-family:var(--accent-font);font-size:13px;padding:9px 18px;
    border:1px solid var(--accent);color:var(--accent);border-radius:2px;
    transition:background .2s, color .2s;
  }
  .nav-cta:hover{background:var(--accent);color:#0b0e13;}
  .nav-toggle{display:none;}

  /* ---------- HERO ---------- */
  .hero{
    padding:180px 0 120px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid var(--line);
  }
  .hero::before{
    content:'';
    position:absolute;top:-200px;right:-200px;
    width:600px;height:600px;border-radius:50%;
    background:radial-gradient(circle, rgba(95,224,196,.10), transparent 70%);
    pointer-events:none;
  }
  .hero-grid{
    display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start;position:relative;z-index:1;
  }
  .hero-name{
    font-size:clamp(42px,6vw,74px);
    font-weight:800;
    line-height:.98;
    margin-top:18px;
  }
  .hero-name .accent-word{color:var(--accent);font-style:normal;}
  .hero-role{
    font-family:var(--accent-font);
    font-size:15px;
    color:var(--muted);
    margin-top:18px;
    max-width:520px;
  }
  .hero-desc{
    margin-top:22px;
    font-size:16.5px;
    color:#c7cdd7;
    max-width:520px;
  }
  .hero-actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;}
  .btn{
    font-family:var(--accent-font);font-size:13.5px;
    padding:13px 24px;border-radius:2px;
    display:inline-flex;align-items:center;gap:8px;
    transition:transform .18s, background .18s, border-color .18s, color .18s;
  }
  .btn-primary{background:var(--accent);color:#0b0e13;font-weight:600;}
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-ghost{border:1px solid var(--line);color:var(--text);}
  .btn-ghost:hover{border-color:var(--muted);transform:translateY(-2px);}

  /* terminal card */
  .terminal{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  }
  .terminal-bar{
    display:flex;align-items:center;gap:7px;
    padding:12px 14px;
    background:var(--surface-2);
    border-bottom:1px solid var(--line);
  }
  .terminal-bar span{width:11px;height:11px;border-radius:50%;background:#3a4150;}
  .terminal-bar span:nth-child(1){background:#f0716a;}
  .terminal-bar span:nth-child(2){background:#f0c168;}
  .terminal-bar span:nth-child(3){background:#5fe0c4;}
  .terminal-label{
    margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);
  }
  .terminal-body{
    padding:22px 20px;
    font-family:var(--mono);
    font-size:13.5px;
    color:#c7cdd7;
    min-height:230px;
  }
  .terminal-body .line{margin-bottom:10px;display:flex;gap:8px;}
  .terminal-body .prompt{color:var(--accent);}
  .terminal-body .out{color:var(--muted);padding-left:20px;}
  #typed-line::after{
    content:'';display:inline-block;width:7px;height:15px;background:var(--accent);
    margin-left:2px;animation:blink 1s steps(1) infinite;vertical-align:-2px;
  }
  @keyframes blink{50%{opacity:0;}}

  .hero-stack{
    display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;
  }
  .stack-chip{
    font-family:var(--accent-font);font-size:11.5px;color:var(--muted);
    border:1px solid var(--line);padding:6px 12px;border-radius:20px;
  }

  /* ---------- SECTION HEADERS ---------- */
  section{padding:110px 0;border-bottom:1px solid var(--line);}
  .section-head{margin-bottom:56px;max-width:640px;}
  .section-head h2{font-size:clamp(28px,3.4vw,40px);margin-top:14px;font-weight:700;}
  .section-head p{color:var(--muted);margin-top:14px;font-size:15.5px;}

  /* ---------- FRAMEWORKS ---------- */
  .fw-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .fw-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    padding:26px 24px 22px;
    transition:border-color .2s, transform .2s;
  }
  .fw-card:hover{border-color:#39424f;transform:translateY(-4px);}
  .fw-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
  .fw-card-head h3{font-size:16px;font-weight:600;}
  .fw-index{font-family:var(--accent-font);font-size:11px;color:var(--muted);}
  .fw-list{list-style:none;display:flex;flex-direction:column;gap:12px;}
  .fw-list li{
    display:flex;align-items:center;gap:11px;
    font-size:14px;color:#c7cdd7;
  }
  .fw-list li .bullet{
    width:6px;height:6px;border-radius:50%;background:var(--accent-2);flex-shrink:0;
  }
  .fw-list li .level{
    margin-left:auto;font-family:var(--accent-font);font-size:10.5px;color:var(--muted);
  }

  /* ---------- PROJECTS CAROUSEL ---------- */
  .carousel-head{
    display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;flex-wrap:wrap;gap:20px;
  }
  .carousel-controls{display:flex;gap:10px;}
  .car-btn{
    width:44px;height:44px;border-radius:50%;
    border:1px solid var(--line);background:var(--surface);color:var(--text);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:border-color .2s, background .2s;
  }
  .car-btn:hover{border-color:var(--accent);}
  .car-btn:disabled{opacity:.35;cursor:not-allowed;}
  .car-btn svg{width:18px;height:18px;}

  .carousel-viewport{overflow:hidden;position:relative;}
  .carousel-track{
    display:flex;gap:24px;
    transition:transform .5s cubic-bezier(.65,0,.35,1);
    /* cursor:pointer; */
  }
  .carousel-track.dragging{
    /* cursor:pointer; */
    transition:none;
  }
  .project-card{
    flex:0 0 calc(33.333% - 16px);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    display:flex;flex-direction:column;
    user-select:none;
  }
  .project-thumb{
    aspect-ratio:16/9;
    background:linear-gradient(135deg,var(--surface-2),#1b212b);
    position:relative;
    display:flex;align-items:center;justify-content:center;
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .project-thumb .browser-chrome{
    position:absolute;top:0;left:0;right:0;
    display:flex;align-items:center;gap:6px;padding:9px 10px;
    background:rgba(0,0,0,.25);
  }
  .project-thumb .browser-chrome span{width:7px;height:7px;border-radius:50%;background:#3a4150;flex-shrink:0;}
  .project-thumb .mono-url{
    font-family:var(--mono);font-size:11px;color:var(--muted);
    margin-left:6px;
    flex:1;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .project-thumb .glyph{font-family:var(--display);font-weight:800;font-size:34px;color:var(--line);letter-spacing:-.02em;}
  .project-body{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1;}
  .project-tag{font-family:var(--accent-font);font-size:10.5px;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;}
  .project-body h3{font-size:18px;font-weight:700;}
  .project-body p{font-size:13.5px;color:var(--muted);}
  .project-link{
    margin-top:auto;font-family:var(--accent-font);font-size:12.5px;
    display:flex;align-items:center;gap:6px;color:var(--text);
    padding-top:10px;border-top:1px solid var(--line);
    white-space:nowrap;overflow:hidden;
  }
  .project-link span{overflow:hidden;text-overflow:ellipsis;}
  .project-link svg{flex-shrink:0;}
  .project-link svg{width:13px;height:13px;transition:transform .2s;}
  .project-link:hover svg{transform:translate(2px,-2px);}

  .carousel-dots{display:flex;gap:8px;margin-top:32px;justify-content:center;}
  .carousel-dots button{
    width:8px;height:8px;border-radius:50%;border:none;background:var(--line);cursor:pointer;padding:0;
    transition:background .2s, width .2s;
  }
  .carousel-dots button.active{background:var(--accent);width:22px;border-radius:5px;}

  /* ---------- ABOUT / STATS strip ---------- */
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
  .about-copy p{color:#c7cdd7;font-size:16px;margin-bottom:16px;}
  .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
  .stat{background:var(--surface);padding:26px;}
  .stat .num{font-family:var(--display);font-size:32px;font-weight:800;color:var(--accent);}
  .stat .label{font-family:var(--accent-font);font-size:11.5px;color:var(--muted);margin-top:6px;}

  /* ---------- CONTACT ---------- */
  .contact{border-bottom:none;padding-bottom:80px;}
  .contact-inner{
    text-align:center;
    padding:70px 40px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    position:relative;
    overflow:hidden;
  }
  .contact-inner::before{
    content:'';position:absolute;bottom:-120px;left:50%;transform:translateX(-50%);
    width:500px;height:300px;border-radius:50%;
    background:radial-gradient(circle, rgba(240,168,104,.12), transparent 70%);
  }
  .contact-inner h2{font-size:clamp(28px,4vw,42px);position:relative;z-index:1;}
  .contact-inner p{color:var(--muted);margin-top:14px;max-width:460px;margin-left:auto;margin-right:auto;position:relative;z-index:1;}
  .contact-actions{display:flex;gap:14px;justify-content:center;margin-top:32px;position:relative;z-index:1;flex-wrap:wrap;}

  footer{padding:36px 0;}
  .footer-inner{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  }
  .footer-inner .copy{font-family:var(--accent-font);font-size:12px;color:var(--muted);}
  .social-links{display:flex;gap:22px;}
  .social-links a{font-family:var(--accent-font);font-size:12.5px;color:var(--muted);transition:color .2s;}
  .social-links a:hover{color:var(--accent);}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr;}
    .fw-groups{grid-template-columns:1fr;}
    .project-card{flex:0 0 calc(50% - 12px);}
    .about-grid{grid-template-columns:1fr;}
    .nav-links{display:none;}
  }
  @media(max-width:600px){
    .wrap{padding:0 20px;}
    .hero{padding:140px 0 80px;}
    .project-card{flex:0 0 100%;}
    section{padding:80px 0;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  }