:root {

      --bg: #070A13;

      --bg-alt: #0C1120;

      --surface: #10152A;

      --surface-hi: #151B33;

      --line: rgba(255, 255, 255, 0.08);

      --blue: #0A5CFE;

      --violet: #7451F3;

      --text: #F4F6FB;

      --text-dim: #8B93A7;

      --text-dimmer: #5B6178;

      --radius: 14px;

    }



    * {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }



    html {

      scroll-behavior: smooth;

    }



    body {

      background: var(--bg);

      color: var(--text);

      font-family: 'Chakra Petch', sans-serif;

      overflow-x: hidden;

      -webkit-font-smoothing: antialiased;

    }



    ::selection {

      background: var(--blue);

      color: #fff;

    }



    a {

      color: inherit;

      text-decoration: none;

    }



    .mono {

      font-family: 'Fira Code', monospace;

    }



    .display {

      font-family: 'Chakra Petch', sans-serif;

    }



    /* ---------- background canvas ---------- */

    #graph-canvas {

      position: fixed;

      inset: 0;

      width: 100%;

      height: 100%;

      z-index: 0;

      opacity: 0.9;

    }



    .grain {

      position: fixed;

      inset: 0;

      z-index: 1;

      pointer-events: none;

      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");

      mix-blend-mode: overlay;

    }



    /* ---------- layout shell ---------- */

    header {

      position: fixed;

      top: 0;

      left: 0;

      right: 0;

      z-index: 50;

      display: flex;

      align-items: center;

      justify-content: space-between;

      padding: 22px 48px;

      backdrop-filter: blur(10px);

      background: linear-gradient(to bottom, rgba(7, 10, 19, 0.75), rgba(7, 10, 19, 0));

      transition: background .3s ease;

    }



    header .logo {

      display: flex;

      align-items: center;

      gap: 12px;

      font-weight: 600;

      font-size: 16px;

      letter-spacing: -0.01em;

    }



    header .logo img {

      height: 40px;

      width: 40px;

      object-fit: cover;

      border-radius: 50%;

      border: 1px solid rgba(255, 255, 255, 0.15);

    }



    nav {

      display: flex;

      gap: 36px;

      align-items: center;

    }



    nav a {

      font-size: 14px;

      color: var(--text-dim);

      font-weight: 500;

      letter-spacing: 0.01em;

      position: relative;

      padding: 4px 0;

      transition: color .25s ease;

    }



    nav a:hover {

      color: var(--text);

    }



    nav a::after {

      content: '';

      position: absolute;

      left: 0;

      bottom: -2px;

      height: 1px;

      width: 0;

      background: var(--blue);

      transition: width .25s ease;

    }



    nav a:hover::after {

      width: 100%;

    }



    .btn {

      display: inline-flex;

      align-items: center;

      gap: 8px;

      padding: 11px 22px;

      border-radius: 0;

      clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);

      font-size: 14px;

      font-weight: 600;

      border: 1px solid var(--line);

      transition: all .25s ease;

      white-space: nowrap;

    }



    .btn-primary {

      background: linear-gradient(135deg, var(--blue), var(--violet));

      color: #fff;

      border: none;

      box-shadow: 0 4px 24px rgba(10, 92, 254, 0.25);

    }



    .btn-primary:hover {

      transform: translateY(-2px);

      box-shadow: 0 8px 32px rgba(10, 92, 254, 0.4);

    }



    .btn-ghost {

      color: var(--text);

    }



    .btn-ghost:hover {

      background: var(--surface);

      border-color: rgba(255, 255, 255, 0.16);

    }



    main {

      position: relative;

      z-index: 2;

    }



    section {

      padding: 140px 48px;

      max-width: 1180px;

      margin: 0 auto;

      position: relative;

    }



    section:not(.hero) {

      background: rgba(7, 10, 19, 0.72);

      backdrop-filter: blur(6px);

      border-radius: 32px;

      max-width: 1180px;

    }



    .eyebrow {

      font-family: 'Fira Code', monospace;

      font-size: 12px;

      letter-spacing: 0.14em;

      text-transform: uppercase;

      color: var(--blue);

      margin-bottom: 18px;

      display: flex;

      align-items: center;

      gap: 10px;

    }



    .eyebrow::before {

      content: '';

      width: 24px;

      height: 1px;

      background: var(--blue);

    }



    h2.section-title {

      font-family: 'Chakra Petch', sans-serif;

      font-weight: 600;

      font-size: clamp(28px, 4vw, 42px);

      letter-spacing: -0.01em;

      margin-bottom: 16px;

      max-width: 640px;

    }



    .section-sub {

      color: var(--text-dim);

      font-size: 16px;

      max-width: 560px;

      line-height: 1.6;

      margin-bottom: 56px;

    }



    /* ---------- hero ---------- */

    .hero {

      min-height: 100vh;

      display: flex;

      flex-direction: column;

      justify-content: center;

      padding-top: 100px;

      padding-bottom: 60px;

      position: relative;

      overflow: hidden;

    }



    .hero .eyebrow {

      margin-bottom: 20px;

    }



    .hero h1 {

      font-family: 'Chakra Petch', sans-serif;

      font-weight: 700;

      font-size: clamp(32px, 5vw, 68px);

      line-height: 1.02;

      letter-spacing: -0.02em;

      max-width: 800px;

    }



    .hero h1 .grad {

      background: linear-gradient(120deg, var(--blue), var(--violet) 60%, #B18CFF);

      -webkit-background-clip: text;

      background-clip: text;

      color: transparent;

      animation: cyberGlitch 3s infinite;

      display: inline-block;

    }



    @keyframes cyberGlitch {



      0%,

      14%,

      16%,

      100% {

        text-shadow: none;

        opacity: 1;

        transform: translate(0);

      }



      15% {

        text-shadow: 2px 0 var(--blue), -2px 0 var(--violet);

        opacity: 0.8;

        transform: translate(1px, -1px);

      }



      15.5% {

        text-shadow: -2px 0 var(--blue), 2px 0 var(--violet);

        opacity: 0.9;

        transform: translate(-1px, 1px);

      }

    }



    .hero-role {

      margin-top: 20px;

      font-size: clamp(16px, 1.8vw, 20px);

      color: var(--text-dim);

      font-weight: 500;

      display: flex;

      align-items: center;

      gap: 12px;

      flex-wrap: wrap;

    }



    .hero-role .cursor {

      color: var(--blue);

      animation: cyberBlink 0.6s steps(2, start) infinite;

    }



    @keyframes cyberBlink {



      0%,

      100% {

        opacity: 1;

      }



      50% {

        opacity: 0;

      }

    }



    .hero-desc {

      margin-top: 20px;

      max-width: 560px;

      color: var(--text-dim);

      font-size: 15px;

      line-height: 1.6;

    }



    .hero-cta {

      margin-top: 32px;

      display: flex;

      gap: 16px;

      flex-wrap: wrap;

    }



    .hero-stats {

      margin-top: 80px;

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      gap: 16px;

      max-width: 100%;

    }



    .stat {

      background: linear-gradient(145deg, rgba(20, 25, 45, 0.7), rgba(10, 15, 30, 0.5));

      padding: 28px 18px;

      border: 1px solid rgba(255, 255, 255, 0.08);

      border-radius: 0;

      clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);

      position: relative;

      overflow: hidden;

      backdrop-filter: blur(10px);

      transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;

    }



    .stat::before {

      content: '';

      position: absolute;

      top: 0;

      left: -100%;

      width: 50%;

      height: 100%;

      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);

      transform: skewX(-20deg);

      transition: 0.5s;

      pointer-events: none;

    }



    .stat:hover::before {

      left: 150%;

    }



    .stat:hover {

      transform: translateY(-8px);

      box-shadow: 0 20px 40px rgba(10, 92, 254, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);

      border-color: rgba(116, 81, 243, 0.4);

    }



    .stat .num {

      font-family: 'Chakra Petch', sans-serif;

      font-size: 38px;

      font-weight: 700;

      color: var(--text);

      line-height: 1;

    }



    .stat .num span {

      background: linear-gradient(120deg, var(--blue), var(--violet));

      -webkit-background-clip: text;

      background-clip: text;

      color: transparent;

    }



    .stat .label {

      margin-top: 12px;

      font-size: 14px;

      font-weight: 500;

      color: var(--text-dim);

      letter-spacing: 0.02em;

      line-height: 1.4;

    }



    /* ---------- hero grid + video ---------- */

    .hero-grid {

      display: flex;

      align-items: center;

    }



    .hero-copy {

      width: 55%;

      position: relative;

      z-index: 2;

    }



    .hero-video-wrap {

      position: absolute;

      right: -25vw;

      /* Move further right to hide crop */

      top: 2vh;

      width: 75vw;

      height: 115vh;

      z-index: 1;

      pointer-events: none;

      /* So it doesn't block clicks on text */

    }



    .hero-video-frame {

      width: 100%;

      height: 100%;

      display: flex;

      justify-content: flex-end;

      align-items: flex-end;

    }



    .hero-video-frame video {

      height: 100%;

      width: 100%;

      object-fit: cover;

      object-position: center 70%;

      /* Move the person visually down */

      display: block;

      mix-blend-mode: screen;

      /* Removes black background */

      filter: none;

      /* Removed color effect for normal high quality */



      /* Crop bottom 10% to completely hide the Gemini logo */

      clip-path: inset(0 0 10% 0);



      /* Fade both the left and right edges smoothly into the background so there are no hard rectangular lines */

      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);

      mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);

    }



    /* ---------- about ---------- */

    .about-grid {

      display: flex;

      flex-direction: column;

      gap: 64px;

      align-items: center;

      text-align: center;

    }



    .about-text p {

      color: var(--text-dim);

      font-size: 16px;

      line-height: 1.8;

      margin-bottom: 18px;

      text-align: center;

    }



    .about-text p strong {

      color: var(--text);

      font-weight: 600;

    }



    .skill-group {

      margin-bottom: 22px;

      text-align: center;

      display: flex;

      flex-direction: column;

      align-items: center;

    }



    .skill-group .g-title {

      font-family: 'JetBrains Mono', monospace;

      font-size: 11px;

      text-transform: uppercase;

      letter-spacing: 0.08em;

      color: var(--text-dimmer);

      margin-bottom: 10px;

    }



    .chips {

      display: flex;

      flex-wrap: nowrap;

      gap: 24px;

      margin-top: 16px;

      justify-content: center;

      overflow-x: auto;

      padding-bottom: 20px;

      padding-top: 10px;

      scrollbar-width: none;

      -ms-overflow-style: none;

      mask-image: linear-gradient(to right, black 85%, transparent 100%);

      -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);

    }



    .chips::-webkit-scrollbar {

      display: none;

    }



    .chip {

      display: flex;

      flex-direction: column;

      align-items: center;

      gap: 12px;

      cursor: pointer;

      flex-shrink: 0;

    }



    .chip .icon-wrap {

      width: 64px;

      height: 64px;

      background: rgba(10, 15, 30, 0.8);

      border: 1px solid rgba(10, 92, 254, 0.2);

      border-radius: 12px;

      display: flex;

      justify-content: center;

      align-items: center;

      position: relative;

      overflow: hidden;

      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);

      transform: perspective(800px) rotateX(25deg) rotateY(-15deg);

      transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;

    }



    .chip .icon-wrap::before {

      content: '';

      position: absolute;

      top: -100%;

      left: -100%;

      width: 300%;

      height: 300%;

      background: repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(10, 92, 254, 0.15) 4px, rgba(10, 92, 254, 0.15) 5px);

      opacity: 0;

      transition: opacity 0.3s;

      pointer-events: none;

    }



    .chip:hover .icon-wrap {

      transform: perspective(800px) rotateX(0deg) rotateY(0deg) scale(1.15) translateY(-8px);

      box-shadow:

        0 20px 40px rgba(10, 92, 254, 0.5),

        inset 0 0 25px rgba(116, 81, 243, 0.6),

        0 0 15px var(--blue);

      border-color: var(--blue);

      background: rgba(10, 20, 45, 0.95);

    }



    .chip:hover .icon-wrap::before {

      opacity: 1;

      animation: serverScan 2s linear infinite;

    }



    .chip:hover .icon-wrap::after {

      content: '';

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      height: 2px;

      background: #fff;

      box-shadow: 0 0 10px #fff, 0 0 20px var(--blue);

      animation: scanline 1.5s ease-in-out infinite alternate;

      pointer-events: none;

    }



    @keyframes serverScan {

      0% {

        transform: translateY(0);

      }



      100% {

        transform: translateY(10px);

      }

    }



    @keyframes scanline {

      0% {

        top: 0;

        opacity: 0;

      }



      10% {

        opacity: 1;

      }



      90% {

        opacity: 1;

      }



      100% {

        top: 100%;

        opacity: 0;

      }

    }



    .chip img {

      height: 32px;

      width: 32px;

      object-fit: contain;

      filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));

    }



    .chip .text-wrap {

      font-size: 14px;

      font-weight: 600;

      color: #ffffff;

      letter-spacing: 0.02em;

      text-align: center;

      transition: color 0.3s ease;

    }



    .chip:hover .text-wrap {

      color: var(--text);

    }



    @keyframes floatingIcon {

      0% {

        transform: perspective(600px) rotateX(15deg) rotateY(-10deg) translateY(0);

      }



      100% {

        transform: perspective(600px) rotateX(15deg) rotateY(-10deg) translateY(-8px);

      }

    }



    /* ---------- experience timeline ---------- */

    .timeline {

      position: relative;

      max-width: 820px;

    }



    .timeline::before {

      content: '';

      position: absolute;

      left: 7px;

      top: 6px;

      bottom: 6px;

      width: 1px;

      background: linear-gradient(to bottom, var(--blue), transparent 95%);

    }



    .t-item {

      position: relative;

      padding-left: 42px;

      padding-bottom: 52px;

    }



    .t-item:last-child {

      padding-bottom: 0;

    }



    .t-node {

      position: absolute;

      left: 0;

      top: 4px;

      width: 15px;

      height: 15px;

      border-radius: 50%;

      background: var(--bg);

      border: 2px solid var(--blue);

      box-shadow: 0 0 0 4px rgba(10, 92, 254, 0.12);

    }



    .t-head {

      display: flex;

      justify-content: space-between;

      align-items: baseline;

      flex-wrap: wrap;

      gap: 8px;

      margin-bottom: 6px;

    }



    .t-role {

      font-family: 'Space Grotesk', sans-serif;

      font-size: 19px;

      font-weight: 600;

    }



    .t-org {

      color: var(--blue);

      font-size: 15px;

      font-weight: 500;

    }



    .t-date {

      font-family: 'JetBrains Mono', monospace;

      font-size: 12px;

      color: var(--text-dimmer);

    }



    .t-item ul {

      margin-top: 12px;

      padding-left: 18px;

    }



    .t-item li {

      color: var(--text-dim);

      font-size: 14.5px;

      line-height: 1.7;

      margin-bottom: 6px;

    }



    /* ---------- projects ---------- */

    .proj-grid {

      display: grid;

      grid-template-columns: repeat(2, 1fr);

      gap: 20px;

    }



    .proj-card {

      background: var(--surface);

      border: 1px solid var(--line);

      border-radius: 0;

      clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);

      padding: 32px;

      position: relative;

      overflow: hidden;

      transition: transform .3s ease, border-color .3s ease, filter .3s ease;

    }



    .proj-card::before {

      content: '';

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      height: 2px;

      background: linear-gradient(90deg, var(--blue), var(--violet));

      transform: scaleX(0);

      transform-origin: left;

      transition: transform .4s ease;

    }



    .proj-card:hover {

      transform: translateY(-4px);

      border-color: rgba(116, 81, 243, 0.35);

      filter: drop-shadow(0 8px 16px rgba(10, 92, 254, 0.15));

    }



    .proj-card:hover::before {

      transform: scaleX(1);

    }



    .proj-card.wide {

      grid-column: span 2;

    }



    .proj-tag {

      font-family: 'Fira Code', monospace;

      font-size: 11px;

      color: var(--violet);

      text-transform: uppercase;

      letter-spacing: 0.06em;

      margin-bottom: 14px;

      display: block;

    }



    .proj-card h3 {

      font-family: 'Chakra Petch', sans-serif;

      font-size: 21px;

      font-weight: 600;

      margin-bottom: 10px;

    }



    .proj-card p {

      color: var(--text-dim);

      font-size: 14.5px;

      line-height: 1.7;

      margin-bottom: 18px;

    }



    .stack {

      display: flex;

      flex-wrap: wrap;

      gap: 7px;

    }



    .stack span {

      font-family: 'Fira Code', monospace;

      font-size: 11px;

      padding: 4px 10px;

      border-radius: 0;

      clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);

      background: var(--bg-alt);

      color: var(--text-dim);

      border: 1px solid var(--line);

    }



    /* ---------- achievements ---------- */

    .ach-grid {

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 20px;

    }



    .ach-card {

      background: var(--surface);

      border: 1px solid var(--line);

      border-radius: 0;

      clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);

      padding: 26px;

    }



    .ach-card .ic {

      margin-bottom: 20px;

      width: 48px;

      height: 48px;

      display: flex;

      justify-content: center;

      align-items: center;

      border-radius: 12px;

      background: linear-gradient(135deg, rgba(10, 92, 254, 0.15), rgba(116, 81, 243, 0.05));

      border: 1px solid rgba(10, 92, 254, 0.3);

      color: var(--blue);

      box-shadow: 0 4px 16px rgba(10, 92, 254, 0.15);

      transition: all 0.3s ease;

    }



    .ach-card .ic svg {

      width: 24px;

      height: 24px;

      stroke-width: 1.7;

    }



    .ach-card:hover .ic {

      background: linear-gradient(135deg, rgba(10, 92, 254, 0.25), rgba(116, 81, 243, 0.15));

      transform: translateY(-3px) scale(1.05);

      box-shadow: 0 8px 24px rgba(10, 92, 254, 0.3);

      border-color: rgba(116, 81, 243, 0.5);

    }



    .ach-card h4 {

      font-family: 'Space Grotesk', sans-serif;

      font-size: 16px;

      margin-bottom: 8px;

    }



    .ach-card p {

      color: var(--text-dim);

      font-size: 13.5px;

      line-height: 1.6;

    }



    /* ---------- achievements gallery ---------- */

    .gallery-title {

      margin-top: 80px;

      font-size: 24px !important;

    }



    .gallery-grid {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

      gap: 20px;

      margin-top: 32px;

    }



    .gallery-img {

      width: 100%;

      height: 220px;

      object-fit: cover;

      border-radius: var(--radius);

      border: 1px solid var(--line);

      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

    }



    .gallery-img:hover {

      transform: translateY(-4px);

      box-shadow: 0 12px 32px rgba(10, 92, 254, 0.2);

      border-color: rgba(116, 81, 243, 0.35);

    }



    /* ---------- contact / footer ---------- */

    .contact {

      text-align: center;

      padding-top: 100px;

      padding-bottom: 60px;

    }



    .contact h2 {

      font-family: 'Space Grotesk', sans-serif;

      font-weight: 700;

      font-size: clamp(32px, 5vw, 56px);

      letter-spacing: -0.02em;

      max-width: 720px;

      margin: 0 auto 24px;

    }



    .contact p.section-sub {

      margin: 0 auto 40px;

    }



    .contact-links {

      display: flex;

      justify-content: center;

      gap: 16px;

      flex-wrap: wrap;

      margin-top: 36px;

    }



    footer {

      border-top: 1px solid var(--line);

      padding: 28px 48px;

      display: flex;

      justify-content: space-between;

      color: var(--text-dimmer);

      font-size: 13px;

      flex-wrap: wrap;

      gap: 12px;

      position: relative;

      z-index: 2;

    }



    [data-reveal] {

      opacity: 0;

      transform: translateY(24px);

      transition: opacity .7s ease, transform .7s ease;

    }



    [data-reveal].in {

      opacity: 1;

      transform: translateY(0);

    }

@media (max-width: 992px) {
  .hero-grid {
    flex-direction: column;
    text-align: center;
  }
  .hero-copy {
    width: 100%;
  }
  .hero-video-wrap {
    position: relative;
    right: 0;
    top: 0;
    width: 100%;
    height: 50vh;
    margin-top: 40px;
  }
  .hero-video-frame video {
    object-position: center;
    clip-path: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  header {
    padding: 16px 24px;
  }
  nav {
    display: none;
  }
}

@media (max-width: 768px) {
  section {
    padding: 80px 24px;
  }
  .hero h1 {
    font-size: clamp(28px, 8vw, 42px);
  }
  .projects-grid, .about-grid {
    gap: 32px;
  }
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-item.wide, .bento-item.tall {
    grid-column: span 1;
    grid-row: span 1;
  }
}

@media (max-width: 480px) {
  .hero-stats {
    grid-template-columns: 1fr;
  }
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn {
    justify-content: center;
  }
}