:root {
      --bg: #07080d;
      --ink: #f1f4ff;
      --muted: #8d92a6;
      --soft: #c7ccd8;
      --panel: rgba(18, 20, 30, 0.78);
      --panel-strong: #12141e;
      --line: rgba(255, 255, 255, 0.1);
      --line-strong: rgba(255, 255, 255, 0.18);
      --green: #19f5a7;
      --blue: #6aa8ff;
      --rose: #ff6f91;
      --amber: #ffd166;
      --shadow: 0 26px 80px rgba(0, 0, 0, 0.36);
      --radius: 8px;
      --nav-h: 78px;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--nav-h);
    }

    body {
      min-height: 100vh;
      overflow-x: hidden;
      background:
        linear-gradient(115deg, rgba(25, 245, 167, 0.08), transparent 34%),
        linear-gradient(245deg, rgba(255, 111, 145, 0.08), transparent 30%),
        linear-gradient(180deg, #07080d 0%, #0c0d15 46%, #080910 100%);
      color: var(--ink);
      font-family: "DM Sans", system-ui, sans-serif;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -3;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), transparent 78%);
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 999;
      pointer-events: none;
      opacity: 0.42;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
    }

    a {
      color: inherit;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    .spotlight {
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background: radial-gradient(520px circle at var(--x, 50%) var(--y, 32%), rgba(25, 245, 167, 0.13), transparent 48%);
      transition: opacity 0.25s ease;
    }

    .backdrop-lines {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        linear-gradient(90deg, transparent 0 12%, rgba(255, 255, 255, 0.055) 12% 12.08%, transparent 12.08% 100%),
        linear-gradient(90deg, transparent 0 58%, rgba(255, 255, 255, 0.045) 58% 58.08%, transparent 58.08% 100%),
        linear-gradient(90deg, transparent 0 88%, rgba(255, 255, 255, 0.035) 88% 88.08%, transparent 88.08% 100%);
      opacity: 0.48;
    }

    .page-shell {
      position: relative;
      z-index: 1;
    }

    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5vw;
      background: rgba(7, 8, 13, 0.78);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(22px);
    }

    .nav-logo {
      display: inline-grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(25, 245, 167, 0.34);
      color: var(--green);
      font-family: "Bebas Neue", sans-serif;
      font-size: 1.45rem;
      letter-spacing: 0.08em;
      text-decoration: none;
      box-shadow: inset 0 0 24px rgba(25, 245, 167, 0.08);
    }

    .nav-links {
      display: flex;
      gap: clamp(1rem, 3vw, 2.4rem);
      list-style: none;
    }

    .nav-links a {
      position: relative;
      color: var(--muted);
      font-family: "DM Mono", monospace;
      font-size: 0.72rem;
      letter-spacing: 0.11em;
      text-decoration: none;
      text-transform: uppercase;
      transition: color 0.2s ease;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 100%;
      height: 1px;
      background: var(--green);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.28s ease;
    }

    .nav-links a:hover,
    .nav-links a.is-active {
      color: var(--ink);
    }

    .nav-links a:hover::after,
    .nav-links a.is-active::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    .hero {
      min-height: 100vh;
      display: grid;
      align-items: center;
      padding: calc(var(--nav-h) + 4rem) 5vw 5rem;
    }

    .hero-layout {
      width: min(1180px, 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(310px, 0.65fr);
      gap: clamp(2rem, 6vw, 5rem);
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      margin-bottom: 1.25rem;
      color: var(--green);
      font-family: "DM Mono", monospace;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 34px;
      height: 1px;
      background: currentColor;
      opacity: 0.7;
    }

    .hero-title {
      max-width: 820px;
      font-family: "Bebas Neue", sans-serif;
      font-size: clamp(4.3rem, 11vw, 10rem);
      letter-spacing: 0.035em;
      line-height: 0.84;
    }

    .hero-title .stroke {
      display: block;
      color: transparent;
      -webkit-text-stroke: 1px rgba(241, 244, 255, 0.52);
      text-shadow: none;
    }

    .hero-copy {
      max-width: 640px;
      margin-top: 1.5rem;
      color: var(--soft);
      font-size: clamp(1rem, 2vw, 1.2rem);
      font-weight: 300;
      line-height: 1.8;
    }

    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      margin-top: 1.7rem;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0.35rem 0.78rem;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.045);
      color: var(--soft);
      border-radius: 999px;
      font-family: "DM Mono", monospace;
      font-size: 0.72rem;
      letter-spacing: 0.04em;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.85rem;
      margin-top: 2.1rem;
    }

    .btn {
      position: relative;
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      overflow: hidden;
      border-radius: 4px;
      padding: 0.78rem 1.15rem;
      border: 1px solid transparent;
      color: var(--ink);
      font-family: "DM Mono", monospace;
      font-size: 0.74rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-decoration: none;
      text-transform: uppercase;
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }

    .btn::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
      transform: translateX(-120%);
      transition: transform 0.55s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn:hover::before {
      transform: translateX(120%);
    }

    .btn-primary {
      background: var(--green);
      color: #07100c;
      box-shadow: 0 18px 44px rgba(25, 245, 167, 0.14);
    }

    .btn-ghost {
      border-color: var(--line-strong);
      background: rgba(255, 255, 255, 0.035);
    }

    .profile-card {
      position: relative;
      min-height: 530px;
      display: grid;
      align-content: end;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%),
        var(--panel);
      box-shadow: var(--shadow);
      transform-style: preserve-3d;
    }

    .profile-card::before {
      content: "";
      position: absolute;
      inset: 18px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 6px;
      pointer-events: none;
    }

    .avatar-wrap {
      position: absolute;
      top: 54px;
      left: 50%;
      width: min(250px, 62%);
      aspect-ratio: 1;
      transform: translateX(-50%);
      border: 1px solid rgba(25, 245, 167, 0.34);
      border-radius: 50%;
      padding: 10px;
      background:
        linear-gradient(135deg, rgba(25, 245, 167, 0.18), rgba(106, 168, 255, 0.1)),
        rgba(255, 255, 255, 0.04);
      animation: floaty 6s ease-in-out infinite;
    }

    .avatar-wrap::after {
      content: "";
      position: absolute;
      inset: -18px;
      border: 1px dashed rgba(255, 255, 255, 0.18);
      border-radius: 50%;
      animation: spin 18s linear infinite;
    }

    .hero-avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      filter: saturate(1.08) contrast(1.05);
    }

    .card-terminal {
      position: relative;
      margin: 0 18px 18px;
      padding: 1.25rem;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: rgba(7, 8, 13, 0.72);
      backdrop-filter: blur(18px);
    }

    .terminal-top {
      display: flex;
      gap: 0.4rem;
      margin-bottom: 1rem;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--rose);
    }

    .dot:nth-child(2) {
      background: var(--amber);
    }

    .dot:nth-child(3) {
      background: var(--green);
    }

    .terminal-line {
      color: var(--soft);
      font-family: "DM Mono", monospace;
      font-size: 0.78rem;
      line-height: 1.9;
    }

    .terminal-line span {
      color: var(--green);
    }

    .section {
      width: min(1120px, 100%);
      margin: 0 auto;
      padding: 6.5rem 5vw;
    }

    .section-header {
      display: grid;
      grid-template-columns: auto auto 1fr;
      gap: 1rem;
      align-items: center;
      margin-bottom: 3rem;
    }

    .section-num {
      color: var(--green);
      font-family: "DM Mono", monospace;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
    }

    .section-title {
      color: var(--ink);
      font-family: "Bebas Neue", sans-serif;
      font-size: clamp(2.3rem, 6vw, 4.4rem);
      letter-spacing: 0.05em;
      line-height: 0.9;
    }

    .section-line {
      height: 1px;
      background: linear-gradient(90deg, var(--line-strong), transparent);
    }

    .about-grid,
    .contact-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
      gap: clamp(2rem, 5vw, 4.5rem);
      align-items: start;
    }

    .lead p {
      color: var(--soft);
      font-size: 1.04rem;
      font-weight: 300;
      line-height: 1.9;
    }

    .lead p+p {
      margin-top: 1.25rem;
    }

    strong {
      color: var(--ink);
      font-weight: 700;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.85rem;
    }

    .stat {
      min-height: 142px;
      padding: 1.2rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    }

    .stat:hover {
      transform: translateY(-5px);
      border-color: rgba(25, 245, 167, 0.4);
      background: rgba(25, 245, 167, 0.055);
    }

    .stat-num {
      color: var(--green);
      font-family: "Bebas Neue", sans-serif;
      font-size: 3.2rem;
      line-height: 1;
    }

    .stat-label {
      max-width: 10rem;
      margin-top: 0.55rem;
      color: var(--muted);
      font-family: "DM Mono", monospace;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      line-height: 1.5;
      text-transform: uppercase;
    }

    .skills-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }

    .skill-card {
      position: relative;
      overflow: hidden;
      min-height: 260px;
      padding: 1.35rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      transition: transform 0.25s ease, border-color 0.25s ease;
    }

    .skill-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(25, 245, 167, 0.13), transparent 42%, rgba(106, 168, 255, 0.08));
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .skill-card:hover {
      transform: translateY(-7px);
      border-color: rgba(106, 168, 255, 0.36);
    }

    .skill-card:hover::before {
      opacity: 1;
    }

    .skill-index {
      position: relative;
      color: var(--muted);
      font-family: "DM Mono", monospace;
      font-size: 0.72rem;
    }

    .skill-card-title {
      position: relative;
      margin-top: 3.3rem;
      color: var(--ink);
      font-family: "Bebas Neue", sans-serif;
      font-size: 2rem;
      letter-spacing: 0.05em;
    }

    .skill-tags {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-top: 1.15rem;
    }

    .tag {
      display: inline-flex;
      min-height: 30px;
      align-items: center;
      padding: 0.32rem 0.7rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.045);
      color: var(--soft);
      font-size: 0.82rem;
      font-weight: 300;
    }

    .projects-list {
      display: grid;
      gap: 0.85rem;
    }

    .featured-overview {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
      gap: 1.25rem;
      align-items: stretch;
      margin-bottom: 1.25rem;
      padding: 1rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(25, 245, 167, 0.08), transparent 42%),
        rgba(18, 20, 30, 0.76);
      box-shadow: var(--shadow);
    }

    .overview-video {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 360px;
      object-fit: cover;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #05060a;
    }

    .overview-content {
      display: grid;
      align-content: space-between;
      gap: 1.4rem;
      padding: 0.35rem;
    }

    .overview-kicker {
      color: var(--green);
      font-family: "DM Mono", monospace;
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .overview-title {
      margin-top: 0.7rem;
      color: var(--ink);
      font-family: "Bebas Neue", sans-serif;
      font-size: clamp(2.1rem, 5vw, 3.3rem);
      letter-spacing: 0.045em;
      line-height: 0.95;
    }

    .overview-copy {
      margin-top: 0.85rem;
      color: var(--soft);
      font-size: 0.98rem;
      font-weight: 300;
      line-height: 1.7;
    }

    .overview-shots {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.55rem;
    }

    .overview-shots img {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border: 1px solid var(--line);
      border-radius: 5px;
      filter: saturate(1.06);
    }

    .project-feature-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      margin-bottom: 1.25rem;
    }

    .project-feature-grid--single {
      grid-template-columns: minmax(0, 420px);
    }

    .project-feature-card {
      display: grid;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 34%),
        var(--panel);
      box-shadow: var(--shadow);
      text-decoration: none;
      transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    }

    .project-feature-card:hover {
      transform: translateY(-6px);
      border-color: rgba(25, 245, 167, 0.35);
      background:
        linear-gradient(180deg, rgba(25, 245, 167, 0.08), transparent 34%),
        rgba(18, 20, 30, 0.9);
    }

    .project-feature-cover {
      display: block;
      width: 100%;
      aspect-ratio: 4.7 / 5;
      object-fit: cover;
      background: #05060a;
      filter: saturate(1.05) contrast(1.03);
    }

    .project-feature-body {
      display: grid;
      gap: 0.6rem;
      padding: 1rem 1rem 1.15rem;
    }

    .project-feature-kicker {
      color: var(--green);
      font-family: "DM Mono", monospace;
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .project-feature-title {
      color: var(--ink);
      font-family: "Bebas Neue", sans-serif;
      font-size: 2rem;
      letter-spacing: 0.045em;
      line-height: 0.9;
    }

    .project-feature-copy {
      color: var(--soft);
      font-size: 0.92rem;
      font-weight: 300;
      line-height: 1.6;
    }

    .project-feature-link {
      color: var(--blue);
      font-family: "DM Mono", monospace;
      font-size: 0.66rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .project-page {
      width: min(1120px, 100%);
      margin: 0 auto;
      padding: calc(var(--nav-h) + 4rem) 5vw 3rem;
    }

    .project-shell {
      display: grid;
      gap: 3rem;
    }

    .project-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
      gap: clamp(2rem, 5vw, 4.2rem);
      align-items: center;
    }

    .project-page-title {
      max-width: 820px;
    }

    .project-page-copy {
      max-width: 62ch;
    }

    .project-switcher {
      display: flex;
      flex-wrap: wrap;
      gap: 0.7rem;
      margin-top: 1.15rem;
    }

    .project-switcher a {
      border-color: var(--line-strong);
    }

    .project-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 42%),
        var(--panel);
      box-shadow: var(--shadow);
    }

    .project-card-cover {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      background: #05060a;
    }

    .project-card-body {
      display: grid;
      gap: 0.9rem;
      padding: 1rem;
    }

    .project-media-section {
      width: 100%;
      padding: 0;
    }

    .project-video-panel {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 36%),
        var(--panel);
      box-shadow: var(--shadow);
    }

    .project-video {
      display: block;
      width: 100%;
      max-height: 78vh;
      aspect-ratio: var(--video-ratio, 16 / 9);
      object-fit: contain;
      background: #05060a;
    }

    .project-card-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.7rem;
      margin-top: 0.1rem;
    }

    .project-card-stat {
      padding: 0.8rem 0.85rem;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: rgba(7, 8, 13, 0.68);
    }

    .project-card-stat strong {
      display: block;
      color: var(--green);
      font-family: "Bebas Neue", sans-serif;
      font-size: 1.45rem;
      letter-spacing: 0.05em;
      line-height: 1;
    }

    .project-card-stat span {
      color: var(--muted);
      font-family: "DM Mono", monospace;
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .project-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      grid-auto-flow: dense;
      gap: 0.85rem;
    }

    .project-gallery--preview {
      display: block;
    }

    .screenshot-preview {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
      gap: 1rem;
      align-items: stretch;
    }

    .screenshot-stage {
      position: relative;
      display: grid;
      place-items: center;
      min-height: min(72vh, 720px);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(25, 245, 167, 0.08), transparent 38%),
        rgba(7, 8, 13, 0.88);
      box-shadow: var(--shadow);
      color: inherit;
      cursor: zoom-in;
    }

    .screenshot-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: 0.42;
    }

    .screenshot-stage-image {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      max-height: min(72vh, 720px);
      padding: clamp(0.7rem, 2vw, 1.2rem);
      object-fit: contain;
      filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.36));
      animation: previewIn 0.46s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .screenshot-stage-image.is-changing {
      animation: previewSwap 0.46s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .screenshot-preview-meta {
      display: grid;
      align-content: start;
      gap: 0.7rem;
      padding: 1rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
    }

    .screenshot-preview-meta .overview-title {
      font-size: 2.15rem;
    }

    .screenshot-rail {
      grid-column: 1 / -1;
      display: flex;
      gap: 0.65rem;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      padding: 0.1rem 0 0.8rem;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scrollbar-color: rgba(25, 245, 167, 0.55) rgba(255, 255, 255, 0.08);
    }

    .screenshot-rail::-webkit-scrollbar {
      height: 8px;
    }

    .screenshot-rail::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 999px;
    }

    .screenshot-rail::-webkit-scrollbar-thumb {
      background: rgba(25, 245, 167, 0.55);
      border-radius: 999px;
    }

    .screenshot-thumb {
      position: relative;
      display: grid;
      flex: 0 0 clamp(92px, 13vw, 138px);
      overflow: hidden;
      min-height: 112px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: rgba(18, 20, 30, 0.74);
      cursor: pointer;
      scroll-snap-align: center;
      transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    }

    .screenshot-thumb:hover,
    .screenshot-thumb.is-active {
      transform: translateY(-4px);
      border-color: rgba(25, 245, 167, 0.52);
      background: rgba(25, 245, 167, 0.07);
    }

    .screenshot-thumb img {
      width: 100%;
      height: 100%;
      min-height: 112px;
      object-fit: contain;
      padding: 0.35rem;
      background: #05060a;
    }

    .screenshot-thumb span {
      position: absolute;
      right: 0.45rem;
      bottom: 0.45rem;
      display: inline-grid;
      place-items: center;
      min-width: 30px;
      height: 24px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(7, 8, 13, 0.82);
      color: var(--soft);
      font-family: "DM Mono", monospace;
      font-size: 0.62rem;
    }

    .shot-card {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(18, 20, 30, 0.7);
      box-shadow: var(--shadow);
      cursor: zoom-in;
      transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
      aspect-ratio: var(--ratio, 4 / 5);
    }

    .shot-card:hover {
      transform: translateY(-5px);
      border-color: rgba(25, 245, 167, 0.36);
      background: rgba(25, 245, 167, 0.05);
    }

    .shot-card img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1);
      transition: transform 0.35s ease;
      background: #05060a;
    }

    .shot-card:hover img {
      transform: scale(1.04);
    }

    .shot-card figcaption {
      padding: 0.74rem 0.85rem;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-family: "DM Mono", monospace;
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .lightbox {
      width: min(92vw, 1120px);
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--ink);
    }

    .lightbox::backdrop {
      background: rgba(5, 6, 10, 0.82);
      backdrop-filter: blur(10px);
    }

    .lightbox-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: calc(var(--radius) + 2px);
      background: rgba(18, 20, 30, 0.96);
      box-shadow: var(--shadow);
    }

    .lightbox-image {
      display: block;
      width: 100%;
      max-height: 82vh;
      object-fit: contain;
      background: #05060a;
    }

    .lightbox-caption {
      padding: 0.9rem 1rem 1rem;
      border-top: 1px solid var(--line);
      color: var(--soft);
      font-family: "DM Mono", monospace;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .lightbox-close {
      position: absolute;
      top: 0.85rem;
      right: 0.85rem;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: rgba(7, 8, 13, 0.88);
      color: var(--ink);
      cursor: pointer;
    }

    @keyframes previewIn {
      from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes previewSwap {
      0% {
        opacity: 0;
        transform: translateX(18px) scale(0.98);
      }

      100% {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
    }

    @keyframes cardFloat {
      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-6px);
      }
    }

    .preview-hero {
      width: min(1120px, 100%);
      margin: 0 auto;
      padding: calc(var(--nav-h) + 4rem) 5vw 3rem;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.72fr);
      gap: clamp(2rem, 5vw, 4.5rem);
      align-items: start;
    }

    .preview-title {
      max-width: 820px;
    }

    .preview-copy {
      max-width: 64ch;
    }

    .preview-panel {
      display: grid;
      gap: 0.85rem;
    }

    .preview-summary {
      display: grid;
      gap: 0.45rem;
      padding: 1.15rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(106, 168, 255, 0.07), transparent 44%),
        var(--panel);
      text-decoration: none;
      transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    }

    .preview-summary:hover {
      transform: translateY(-4px);
      border-color: rgba(25, 245, 167, 0.36);
      background:
        linear-gradient(135deg, rgba(25, 245, 167, 0.08), transparent 44%),
        rgba(18, 20, 30, 0.9);
    }

    .preview-summary-kicker {
      color: var(--green);
      font-family: "DM Mono", monospace;
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .preview-summary-title {
      color: var(--ink);
      font-family: "Bebas Neue", sans-serif;
      font-size: 2rem;
      letter-spacing: 0.04em;
      line-height: 0.9;
    }

    .preview-summary-copy {
      color: var(--soft);
      font-size: 0.92rem;
      font-weight: 300;
      line-height: 1.6;
    }

    .preview-section {
      padding-top: 4.5rem;
    }

    .preview-note {
      color: var(--green);
      font-family: "DM Mono", monospace;
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .preview-media-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.85rem;
      margin-top: 1rem;
    }

    .preview-media-grid--videos {
      grid-template-columns: minmax(0, 1fr);
    }

    .preview-media {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(18, 20, 30, 0.64);
      box-shadow: var(--shadow);
    }

    .preview-media img,
    .preview-media video {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      background: #05060a;
    }

    .preview-media figcaption {
      padding: 0.78rem 0.9rem;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-family: "DM Mono", monospace;
      font-size: 0.64rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .project-item {
      position: relative;
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr) auto;
      gap: 1.5rem;
      align-items: center;
      overflow: hidden;
      min-height: 116px;
      padding: 1.35rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(18, 20, 30, 0.62);
      text-decoration: none;
      transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    }

    .project-item::before {
      content: "";
      position: absolute;
      inset: 0;
      width: 4px;
      background: var(--green);
      transform: scaleY(0);
      transform-origin: bottom;
      transition: transform 0.25s ease;
    }

    .project-item:hover {
      transform: translateX(8px);
      border-color: rgba(25, 245, 167, 0.32);
      background: rgba(25, 245, 167, 0.045);
    }

    .project-item:hover::before {
      transform: scaleY(1);
    }

    .project-year {
      color: var(--muted);
      font-family: "DM Mono", monospace;
      font-size: 0.72rem;
    }

    .project-name {
      color: var(--ink);
      font-family: "Bebas Neue", sans-serif;
      font-size: clamp(1.6rem, 4vw, 2.2rem);
      letter-spacing: 0.045em;
      line-height: 1;
    }

    .project-desc {
      max-width: 650px;
      margin-top: 0.45rem;
      color: var(--muted);
      font-size: 0.94rem;
      font-weight: 300;
      line-height: 1.55;
    }

    .project-stack {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.45rem;
      max-width: 230px;
    }

    .project-badge {
      border: 1px solid rgba(106, 168, 255, 0.34);
      border-radius: 999px;
      color: var(--blue);
      font-family: "DM Mono", monospace;
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      padding: 0.28rem 0.6rem;
      text-transform: uppercase;
    }

    .project-arrow {
      display: inline-block;
      margin-left: 0.4rem;
      color: var(--green);
      transition: transform 0.25s ease;
    }

    .project-item:hover .project-arrow {
      transform: translate(4px, -4px);
    }

    .contact-panel {
      padding: 1.4rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
    }

    .contact-details {
      display: grid;
      gap: 0.85rem;
      margin-top: 1.8rem;
    }

    .contact-row {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 1rem;
      align-items: baseline;
    }

    .contact-key {
      color: var(--green);
      font-family: "DM Mono", monospace;
      font-size: 0.66rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .contact-val {
      color: var(--soft);
      font-size: 0.95rem;
      font-weight: 300;
      overflow-wrap: anywhere;
      text-decoration: none;
    }

    .contact-val:hover {
      color: var(--green);
    }

    .contact-form {
      display: grid;
      gap: 1rem;
    }

    .form-group {
      display: grid;
      gap: 0.45rem;
    }

    .form-label {
      color: var(--muted);
      font-family: "DM Mono", monospace;
      font-size: 0.66rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .form-control {
      width: 100%;
      min-height: 46px;
      padding: 0.85rem 0.95rem;
      border: 1px solid var(--line);
      border-radius: 4px;
      outline: 0;
      background: rgba(7, 8, 13, 0.74);
      color: var(--ink);
      font-size: 0.94rem;
      font-weight: 300;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .form-control:focus {
      border-color: rgba(25, 245, 167, 0.72);
      background: rgba(7, 8, 13, 0.94);
      box-shadow: 0 0 0 4px rgba(25, 245, 167, 0.1);
    }

    .form-control::placeholder {
      color: #666c7e;
    }

    textarea.form-control {
      min-height: 132px;
      resize: vertical;
    }

    select.form-control option {
      background: var(--panel-strong);
    }

    .btn-submit {
      justify-self: start;
      border: 0;
      cursor: pointer;
    }

    footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1.2rem;
      flex-wrap: wrap;
      padding: 2rem 5vw;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-family: "DM Mono", monospace;
      font-size: 0.72rem;
      letter-spacing: 0.04em;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 1.4rem;
    }

    .footer-links a {
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-links a:hover {
      color: var(--green);
    }

    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity 0.7s ease, transform 0.7s ease;
      transition-delay: var(--delay, 0ms);
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .hero .reveal {
      transform: translateY(18px);
    }

    @keyframes floaty {

      0%,
      100% {
        transform: translateX(-50%) translateY(0);
      }

      50% {
        transform: translateX(-50%) translateY(-12px);
      }
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @media (max-width: 920px) {

      .hero-layout,
      .about-grid,
      .contact-grid {
        grid-template-columns: 1fr;
      }

      .profile-card {
        width: min(430px, 100%);
        min-height: 500px;
        margin: 0 auto;
      }

      .skills-grid {
        grid-template-columns: 1fr;
      }

      .featured-overview {
        grid-template-columns: 1fr;
      }

      .project-feature-grid,
      .preview-hero {
        grid-template-columns: 1fr;
      }

      .preview-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .project-hero,
      .screenshot-preview {
        grid-template-columns: 1fr;
      }

      .screenshot-stage {
        min-height: min(68vh, 620px);
      }
    }

    @media (max-width: 720px) {
      :root {
        --nav-h: 66px;
      }

      nav {
        padding: 0 1rem;
      }

      .nav-logo {
        width: 40px;
        height: 40px;
      }

      .nav-links {
        gap: 0.85rem;
      }

      .nav-links a {
        font-size: 0.62rem;
        letter-spacing: 0.05em;
      }

      .hero {
        padding: calc(var(--nav-h) + 2.5rem) 1rem 4rem;
      }

      .section {
        padding: 5rem 1rem;
      }

      .section-header {
        grid-template-columns: auto 1fr;
      }

      .section-line {
        grid-column: 1 / -1;
      }

      .project-item {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        align-items: start;
      }

      .project-stack {
        justify-content: flex-start;
      }

      .overview-video {
        /* min-height: 260px; */
        max-width: 100%;
        height: auto;
        object-fit: contain;
      }

      .project-feature-grid,
      .project-gallery {
        grid-template-columns: 1fr;
      }

      .screenshot-stage {
        min-height: 460px;
      }

      .screenshot-thumb {
        flex-basis: 112px;
      }

      .preview-media-grid {
        grid-template-columns: 1fr;
      }

      .project-card-meta {
        grid-template-columns: 1fr;
      }

      footer {
        padding: 1.8rem 1rem;
      }
    }

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

      .hero-title {
        font-size: clamp(4rem, 22vw, 5.6rem);
      }

      .hero-actions,
      .btn {
        width: 100%;
      }

      .stats {
        grid-template-columns: 1fr;
      }

      .profile-card {
        min-height: 460px;
      }

      .overview-shots {
        grid-template-columns: 1fr;
      }

      .contact-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
      }

      .reveal {
        opacity: 1;
        transform: none;
      }
    }