:root {
      --bg: #0b0d10;
      --panel: #11151a;
      --panel2: #151a20;
      --text: #edf1f5;
      --muted: #9aa5b1;
      --line: #29313a;
      --accent: #b7f36b;
      --accent-dark: #17220d;
      --max: 1120px
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 90px
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: Manrope, system-ui, sans-serif;
      line-height: 1.65
    }

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

    button {
      font: inherit
    }

    .wrap {
      width: min(var(--max), calc(100% - 40px));
      margin: auto
    }

    .mono {
      font-family: "DM Mono", monospace;
      color: var(--accent);
      font-size: .78rem;
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(11, 13, 16, .86);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(255, 255, 255, .07)
    }

    .nav-inner {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .brand {
      font-weight: 800;
      letter-spacing: -.04em;
      font-size: 1.1rem
    }

    .brand span {
      color: var(--accent)
    }

    .nav-links {
      display: flex;
      gap: 27px;
      align-items: center;
      font-size: .87rem;
      color: #c0c8d0
    }

    .nav-links a:hover {
      color: var(--accent)
    }

    .nav-cta,
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 1px solid var(--accent);
      border-radius: 6px;
      padding: 11px 16px;
      font-weight: 700;
      font-size: .88rem;
      transition: .2s
    }

    .nav-cta,
    .btn.primary {
      background: var(--accent);
      color: #11180b
    }

    .nav-cta:hover,
    .btn.primary:hover {
      background: #d0ff9a;
      transform: translateY(-2px)
    }

    .btn.secondary {
      border-color: var(--line);
      color: var(--text)
    }

    .btn.secondary:hover {
      border-color: var(--accent);
      color: var(--accent)
    }

    .menu-btn {
      display: none;
      background: none;
      border: 1px solid var(--line);
      color: var(--text);
      border-radius: 5px;
      padding: 8px 10px
    }

    .hero {
      padding: 104px 0 82px;
      position: relative;
      overflow: hidden
    }

    .hero:after {
      content: "";
      position: absolute;
      width: 460px;
      height: 460px;
      right: -100px;
      top: 20px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(183, 243, 107, .10), transparent 68%);
      pointer-events: none
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 70px;
      align-items: center;
      position: relative;
      z-index: 1
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px
    }

    .dot {
      width: 8px;
      height: 8px;
      background: var(--accent);
      border-radius: 50%;
      box-shadow: 0 0 15px #b7f36b80
    }

    .hero h1 {
      font-size: clamp(2.8rem, 6vw, 5.3rem);
      line-height: 1.04;
      letter-spacing: -.075em;
      margin: 0 0 25px;
      max-width: 760px
    }

    .hero h1 em {
      font-style: normal;
      color: var(--accent)
    }

    .hero p {
      max-width: 610px;
      color: var(--muted);
      font-size: 1.05rem;
      margin: 0 0 30px
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .meta-item strong {
      display: block;
      font-size: 1.1rem
    }

    .meta-item span {
      font-size: .78rem;
      color: var(--muted)
    }

    .terminal {
      background: #0f1317;
      border: 1px solid #2b343d;
      border-radius: 12px;
      box-shadow: 0 25px 80px #0005;
      overflow: hidden;
      transform: rotate(1deg)
    }

    .terminal-top {
      height: 42px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      padding: 0 14px;
      gap: 7px
    }

    .traffic {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #46515c
    }

    .terminal-title {
      font: .72rem "DM Mono", monospace;
      color: #7f8a96;
      margin-left: auto;
      margin-right: auto
    }

    .terminal-body {
      padding: 25px 23px 29px;
      font: .78rem/2 "DM Mono", monospace;
      color: #c0cad4
    }

    .code-muted {
      color: #687582
    }

    .code-green {
      color: var(--accent)
    }

    .code-blue {
      color: #8bc9ff
    }

    .code-orange {
      color: #ffc078
    }

    .code-indent {
      padding-left: 18px
    }

    .terminal-foot {
      display: flex;
      justify-content: space-between;
      border-top: 1px solid var(--line);
      padding: 12px 18px;
      color: #7e8995;
      font: .68rem "DM Mono", monospace
    }

    section {
      padding: 82px 0
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 25px;
      margin-bottom: 34px
    }

    .section-head h2 {
      font-size: clamp(1.8rem, 4vw, 2.7rem);
      letter-spacing: -.06em;
      line-height: 1.15;
      margin: 9px 0 0
    }

    .section-head p {
      color: var(--muted);
      max-width: 430px;
      margin: 0;
      font-size: .92rem
    }

    .projects {
      background: #0e1115;
      border-top: 1px solid #1b2229;
      border-bottom: 1px solid #1b2229
    }

    .project-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px
    }

    .project-card {
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      transition: .25s
    }

    .project-card:hover {
      transform: translateY(-4px);
      border-color: #61794a
    }

    .project-art {
      height: 260px;
      background: linear-gradient(135deg, #1a242c, #11151a);
      padding: 0;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .project-art:before {
      content: "";
      position: absolute;
      width: 210px;
      height: 210px;
      border: 1px solid #b7f36b3b;
      border-radius: 50%;
      right: -20px;
      top: -80px
    }

    .project-art:after {
      content: "";
      position: absolute;
      width: 160px;
      height: 160px;
      border: 1px solid #b7f36b25;
      border-radius: 50%;
      right: 8px;
      top: -54px
    }

    .project-image {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }


    .project-number {
      position: absolute;
      z-index: 3;
      left: 20px;
      top: 17px;
      color: #d9e5ec;
      background: #11151aeb;
      border: 1px solid #3b4850;
      border-radius: 4px;
      padding: 5px 8px;
      font: .7rem "DM Mono", monospace
    }

    .project-content {
      padding: 22px
    }

    .project-top {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      align-items: center
    }

    .project-top h3 {
      margin: 0;
      font-size: 1.15rem;
      letter-spacing: -.03em
    }

    .project-top a {
      color: var(--accent);
      font-size: 1.1rem
    }

    .project-content p {
      color: var(--muted);
      font-size: .88rem;
      margin: 12px 0 18px
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px
    }

    .tag {
      border: 1px solid #303943;
      background: #171d23;
      color: #b7c0c9;
      padding: 5px 9px;
      border-radius: 4px;
      font: .68rem "DM Mono", monospace
    }

    .two-col {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 150px
    }

    .intro-copy {
      color: var(--muted);
      max-width: 380px
    }

    .about-image {
      display: block;
      width: 100%;
      max-width: 280px;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      margin-top: 24px;
      border: 1px solid var(--line);
      border-radius: 8px
    }

    .timeline {
      border-left: 1px solid var(--line);
      padding-left: 26px;
      display: grid;
      gap: 28px
    }

    .timeline-item {
      position: relative
    }

    .timeline-item:before {
      content: "";
      position: absolute;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--accent);
      left: -31px;
      top: 8px;
      box-shadow: 0 0 0 5px var(--bg)
    }

    .timeline-date {
      font: .72rem "DM Mono", monospace;
      color: var(--accent)
    }

    .timeline-item h3 {
      font-size: 1.05rem;
      margin: 5px 0
    }

    .timeline-item p {
      margin: 0;
      color: var(--muted);
      font-size: .88rem
    }

    .timeline-item .sub {
      font-size: .8rem;
      color: #6f7b87;
      margin-bottom: 7px
    }

    .skills {
      background: #0e1115;
      border-top: 1px solid #1b2229;
      border-bottom: 1px solid #1b2229
    }

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

    .skill-box {
      padding: 22px;
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 8px
    }

    .skill-box .icon {
      font-size: 1.3rem;
      color: var(--accent)
    }

    .skill-box h3 {
      font-size: .98rem;
      margin: 12px 0 14px
    }

    .skill-box .tags {
      gap: 7px
    }

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

    .cert-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 20px;
      overflow: hidden;
      background: var(--panel)
    }

    .cert-image {
      width: calc(100% + 40px);
      height: 150px;
      display: block;
      object-fit: cover;
      margin: -20px -20px 18px;
      border-bottom: 1px solid var(--line)
    }

    .cert-top {
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .cert-icon {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 8px;
      background: var(--accent-dark);
      color: var(--accent);
      font-weight: 800
    }

    .cert-card h3 {
      font-size: .96rem;
      margin: 18px 0 5px
    }

    .cert-card p {
      font-size: .8rem;
      color: var(--muted);
      margin: 0
    }

    .cert-date {
      display: block;
      margin-top: 18px;
      color: #77838e;
      font: .68rem "DM Mono", monospace
    }

    .contact {
      padding: 95px 0
    }

    .contact-box {
      border: 1px solid #35402d;
      border-radius: 12px;
      padding: clamp(28px, 6vw, 62px);
      background: radial-gradient(ellipse at 90% 0%, #b7f36b12, transparent 48%), var(--panel)
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 40px;
      align-items: center
    }

    .contact h2 {
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      line-height: 1.08;
      letter-spacing: -.07em;
      margin: 12px 0 18px
    }

    .contact p {
      color: var(--muted);
      max-width: 520px
    }

    .contact-links {
      display: grid;
      gap: 10px
    }

    .contact-link {
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: .87rem
    }

    .contact-link:hover {
      border-color: var(--accent);
      color: var(--accent)
    }

    .contact-link span {
      color: var(--muted);
      font-size: .75rem
    }

    .footer {
      border-top: 1px solid var(--line);
      padding: 23px 0;
      color: #78838d;
      font-size: .76rem
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      flex-wrap: wrap
    }

    .footer a:hover {
      color: var(--accent)
    }

    .hint {
      font-size: .76rem;
      color: #6f7b87;
      margin-top: 20px
    }

    @media(max-width:800px) {

      .hero-grid,
      .two-col,
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 38px
      }

      .hero {
        padding: 75px 0 65px
      }

      .terminal {
        max-width: 520px
      }

      .project-grid {
        grid-template-columns: 1fr 1fr
      }

      .skill-grid,
      .cert-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .section-head {
        align-items: start;
        flex-direction: column
      }

      .nav-links {
        display: none;
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        background: #101419;
        padding: 20px;
        width: 100%;
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        align-items: flex-start
      }

      .nav-links.open {
        display: flex
      }

      .menu-btn {
        display: block
      }

      .nav-cta {
        display: none
      }
    }

    @media(max-width:540px) {
      .wrap {
        width: min(var(--max), calc(100% - 30px))
      }

      .project-grid,
      .skill-grid,
      .cert-grid {
        grid-template-columns: 1fr
      }

      .hero h1 {
        font-size: 3rem
      }

      .project-art {
        height: 170px
      }

      .contact-box {
        padding: 25px
      }

      .terminal-body {
        font-size: .7rem;
        padding: 20px 15px
      }
    }