:root {
  --bg: #050807;
  --panel: rgba(16, 25, 22, .64);
  --line: rgba(190, 255, 219, .16);
  --text: #eefbf4;
  --muted: #93a69b;
  --acid: #baff63;
  --aqua: #48e6c1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

.nav {
  align-items: center;
  backdrop-filter: blur(16px);
  background: rgba(5, 8, 7, .45);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 70px;
  justify-content: space-between;
  left: 0;
  padding: 0 4vw;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
}
.brand { font-family: "Courier New", monospace; font-size: 18px; font-weight: 700; }
.brand span { color: var(--acid); font-size: 10px; margin-left: 5px; }
.navLinks { display: flex; gap: 28px; }
.navLinks a, .kicker, .sectionLabel, .panelEyebrow {
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.navLinks a { color: var(--muted); transition: color .2s ease; }
.navLinks a:hover { color: var(--acid); }
.navCv { color: var(--acid) !important; }
.menuButton { display: none; }

.hero {
  align-items: center;
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  padding: 120px 4vw 70px;
  position: relative;
  isolation: isolate;
  z-index: 0;
}
.gridOverlay {
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 70px 70px;
  inset: 0;
  mask-image: radial-gradient(circle at 55% 45%, #000 8%, transparent 72%);
  opacity: .32;
  position: absolute;
}
.hero::before {
  animation: liquidDrift 10s ease-in-out infinite alternate;
  background: radial-gradient(circle, rgba(72, 230, 193, .22), transparent 67%);
  content: "";
  filter: blur(20px);
  height: 62vw;
  position: absolute;
  right: -22vw;
  top: -20vw;
  width: 62vw;
}
.heroCopy { max-width: 850px; position: relative; z-index: 4; }
.status { align-items: center; color: var(--muted); display: flex; font-size: 12px; gap: 9px; margin-bottom: 42px; }
.status span { animation: pulse 1.8s ease infinite; background: var(--acid); border-radius: 50%; box-shadow: 0 0 14px var(--acid); height: 7px; width: 7px; }
.kicker { color: var(--aqua); margin: 0 0 23px; }
.hero h1 {
  font-size: clamp(64px, 8.2vw, 126px);
  font-weight: 600;
  letter-spacing: -.075em;
  line-height: .75;
  margin: 0;
}
.hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(238,251,244,.68); }
.heroIntro { color: #bfcec5; font-size: clamp(17px, 1.6vw, 23px); line-height: 1.5; margin: 48px 0 0; max-width: 600px; }
.heroActions { align-items: center; display: flex; gap: 28px; margin-top: 38px; }
.primaryButton {
  align-items: center;
  background: var(--acid);
  border-radius: 100px 44px 96px 58px;
  color: #081008;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 40px;
  padding: 17px 23px;
  transition: transform .25s ease, border-radius .5s ease;
}
.primaryButton:hover { border-radius: 45px 100px 52px 96px; transform: translateY(-3px); }
.textButton { border-bottom: 1px solid var(--line); color: var(--muted); font-family: "Courier New", monospace; font-size: 12px; padding: 10px 0; }
.heroIndex { bottom: 24px; color: #607068; display: flex; font: 9px "Courier New", monospace; gap: 25px; left: 4vw; letter-spacing: .1em; position: absolute; }

.sphereScene {
  --pointer-x: 0deg;
  --pointer-y: 0deg;
  display: grid;
  height: 1100px;
  left: 62%;
  mask-image: radial-gradient(circle, #000 38%, rgba(0,0,0,.92) 62%, transparent 84%);
  opacity: .58;
  pointer-events: none;
  place-items: center;
  perspective: 900px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.34);
  width: 1100px;
  z-index: -3;
}
.spherePointerLayer {
  display: grid;
  height: 100%;
  place-items: center;
  position: relative;
  transform: rotateX(var(--pointer-y)) rotateY(var(--pointer-x));
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  width: 100%;
}
.numberSphere {
  animation: sphereRotate 21s linear infinite, fluidBreathe 7s ease-in-out infinite;
  height: 450px;
  position: relative;
  transform-style: preserve-3d;
  width: 450px;
}
.numberPoint {
  animation: planetBurst 6.4s var(--burst-delay) cubic-bezier(.58, .02, .22, 1) both 1;
  color: var(--acid);
  font: 11px "Courier New", monospace;
  left: 50%;
  opacity: .72;
  position: absolute;
  text-shadow: 0 0 12px rgba(186, 255, 99, .55);
  top: 50%;
  transform: translate3d(var(--x), var(--y), var(--z));
}
.numberPoint:nth-child(3n) { color: var(--aqua); }
.numberPoint:nth-child(5n) { color: #ffffff; text-shadow: 0 0 16px rgba(255,255,255,.65); }
.liquidHalo {
  border: 1px solid rgba(72, 230, 193, .32);
  filter: drop-shadow(0 0 24px rgba(72, 230, 193, .15));
  height: 580px;
  position: absolute;
  width: 580px;
}
.haloOne { animation: morph 9s ease-in-out infinite alternate, haloRotate 18s linear infinite; border-radius: 42% 58% 63% 37% / 44% 38% 62% 56%; }
.haloTwo { animation: morph 7s -2s ease-in-out infinite alternate-reverse, haloRotate 25s linear infinite reverse; border-color: rgba(186,255,99,.18); height: 680px; width: 680px; }
.orbitLabel { color: var(--muted); font: 9px "Courier New", monospace; letter-spacing: .15em; position: absolute; }
.labelOne { right: 7%; top: 21%; }
.labelTwo { bottom: 20%; left: 6%; }

.section { padding: 120px 4vw; position: relative; }
.sectionLabel { align-items: center; color: var(--muted); display: flex; gap: 14px; margin-bottom: 48px; }
.sectionLabel span { color: var(--acid); }
.fluidPanel {
  backdrop-filter: blur(18px);
  background: linear-gradient(145deg, rgba(20, 33, 28, .78), rgba(8, 14, 12, .5));
  border: 1px solid var(--line);
  border-radius: 42px 72px 46px 68px / 58px 44px 74px 52px;
  overflow: hidden;
  position: relative;
}
.fluidPanel::after {
  background: radial-gradient(circle, rgba(72,230,193,.12), transparent 70%);
  content: "";
  height: 240px;
  position: absolute;
  right: -100px;
  top: -110px;
  width: 240px;
}
.profile { display: grid; gap: 4vw; grid-template-columns: .32fr 1fr; }
.profilePanel { display: grid; gap: 7vw; grid-template-columns: 1.1fr .9fr; padding: 65px; }
.profilePanel p { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0; }
.profilePanel .lead { color: var(--text); font-size: clamp(28px, 3.2vw, 50px); letter-spacing: -.04em; line-height: 1.15; }
.lead strong { color: var(--acid); font-weight: 500; }

.work { background: linear-gradient(180deg, transparent, rgba(17,38,30,.28), transparent); }
.projectList { display: grid; gap: 22px; }
.project { padding: 44px 50px; transition: border-radius .6s ease, border-color .3s ease, transform .3s ease; }
.project:nth-child(even) { border-radius: 75px 38px 82px 48px / 45px 76px 40px 70px; }
.project:hover { border-color: rgba(186,255,99,.46); border-radius: 35px 78px 42px 90px / 80px 38px 76px 44px; transform: translateY(-4px); }
.projectTop { align-items: center; display: flex; justify-content: space-between; }
.projectTop p, .projectStack { color: var(--muted); font: 10px "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.projectId { color: var(--acid); font: 12px "Courier New", monospace; }
.project h2 { font-size: clamp(32px, 4vw, 62px); font-weight: 500; letter-spacing: -.045em; margin: 38px 0 12px; }
.projectStack { color: var(--aqua); }
.projectDetails { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; margin-top: 38px; max-width: 1000px; }
.projectDetails p { color: #a9b9b0; font-size: 14px; line-height: 1.65; margin: 0; }
.caseStudyGrid { display: grid; gap: 28px 42px; grid-template-columns: 1fr 1fr; margin-top: 38px; max-width: 1100px; }
.caseStudyGrid div { border-top: 1px solid var(--line); padding-top: 17px; }
.caseStudyGrid span { color: var(--acid); font: 9px "Courier New", monospace; letter-spacing: .12em; text-transform: uppercase; }
.caseStudyGrid p { color: #a9b9b0; font-size: 14px; line-height: 1.65; margin: 10px 0 0; }
.projectAction { display: inline-block; font: 10px "Courier New", monospace; letter-spacing: .1em; margin-top: 34px; text-transform: uppercase; }
.projectAction:not(.mutedAction) { border-bottom: 1px solid var(--acid); color: var(--acid); padding-bottom: 6px; }
.mutedAction { color: #607068; }

.skillGroups { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; }
.skillGroup { min-height: 190px; padding: 34px; }
.skillGroup p:last-child { color: #b7c5bd; font-size: 14px; line-height: 1.75; margin: 0; }
.skillsLayout { display: grid; gap: 22px; grid-template-columns: 1.35fr .65fr; }
.skillPanel, .learningPanel { padding: 50px; }
.panelEyebrow { color: var(--aqua); margin: 0 0 35px; }
.skillCloud { display: flex; flex-wrap: wrap; gap: 10px; }
.skillCloud span {
  animation: tagFloat 4s ease-in-out infinite;
  border: 1px solid var(--line);
  border-radius: 50px 32px 47px 28px;
  color: #c8d6ce;
  font-size: 13px;
  padding: 12px 16px;
}
.learningPanel ol { list-style: none; margin: 0; padding: 0; }
.learningPanel li { align-items: center; border-top: 1px solid var(--line); display: flex; font-size: 14px; gap: 17px; padding: 17px 0; }
.learningPanel li span { color: var(--acid); font: 9px "Courier New", monospace; }
.environmentStrip { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; gap: 4vw; grid-template-columns: .3fr 1fr; margin-top: 60px; padding: 30px 0; }
.environmentStrip span { color: var(--acid); font: 10px "Courier New", monospace; letter-spacing: .12em; }
.environmentStrip p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; }

.timeline { display: grid; gap: 24px; }
.timelineItem { display: grid; gap: 5vw; grid-template-columns: .24fr 1fr; padding: 52px; }
.date { color: var(--acid); font: 12px "Courier New", monospace; }
.timeline h2 { font-size: clamp(29px, 3.5vw, 52px); font-weight: 500; letter-spacing: -.04em; margin: 0 0 10px; }
.timeline h3 { color: var(--aqua); font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0 0 28px; }
.timelineItem div:last-child > p:not(.panelEyebrow) { color: var(--muted); line-height: 1.7; max-width: 870px; }

.languageGrid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.languageGrid div { align-items: center; display: flex; justify-content: space-between; padding: 28px; }
.languageGrid strong { font-size: 18px; }
.languageGrid span { color: var(--muted); font: 9px "Courier New", monospace; text-transform: uppercase; }

.contact { min-height: 85vh; overflow: hidden; padding-bottom: 35px; }
.contactGlow { animation: liquidDrift 10s ease-in-out infinite alternate; background: var(--aqua); border-radius: 42% 58% 63% 37% / 44% 38% 62% 56%; filter: blur(100px); height: 400px; opacity: .14; position: absolute; right: -80px; top: 10%; width: 400px; }
.contact h2 { font-size: clamp(58px, 10vw, 145px); font-weight: 500; letter-spacing: -.07em; line-height: .88; margin: 30px 0 85px; max-width: 1100px; position: relative; }
.contact h2 span { color: var(--acid); }
.contactLinks { position: relative; }
.contactLinks a { align-items: center; border-top: 1px solid var(--line); display: grid; font-size: clamp(19px, 2.5vw, 35px); grid-template-columns: .2fr 1fr auto; padding: 22px 0; transition: color .2s ease, padding .25s ease; }
.contactLinks a:last-child { border-bottom: 1px solid var(--line); }
.contactLinks a:hover { color: var(--acid); padding-left: 12px; }
.contactLinks small { color: var(--muted); font: 10px "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
footer { color: #607068; display: flex; font: 9px "Courier New", monospace; justify-content: space-between; letter-spacing: .08em; margin-top: 80px; text-transform: uppercase; }

@keyframes sphereRotate { to { transform: rotateY(360deg) rotateX(24deg); } }
@keyframes fluidBreathe { 0%,100% { scale: 1 .96; } 50% { scale: .94 1.05; } }
@keyframes digitFlicker { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes planetBurst {
  0%, 13% {
    filter: blur(0);
    opacity: .72;
    transform: translate3d(var(--x), var(--y), var(--z)) scale(1);
  }
  19% {
    filter: blur(.2px);
    opacity: 1;
    transform: translate3d(
      var(--x),
      var(--y),
      var(--z)
    ) scale(1.32);
  }
  48%, 58% {
    filter: blur(.55px);
    opacity: .42;
    transform: translate3d(var(--burst-x), var(--burst-y), var(--burst-z)) scale(.72);
  }
  70% {
    filter: blur(.15px);
    opacity: .88;
    transform: translate3d(
      var(--x),
      var(--y),
      var(--z)
    ) scale(1.2);
  }
  86%, 100% {
    filter: blur(0);
    opacity: .72;
    transform: translate3d(var(--x), var(--y), var(--z)) scale(1);
  }
}
@keyframes morph {
  0% { border-radius: 42% 58% 63% 37% / 44% 38% 62% 56%; scale: 1 .94; }
  50% { border-radius: 62% 38% 38% 62% / 54% 65% 35% 46%; scale: .94 1.04; }
  100% { border-radius: 35% 65% 56% 44% / 65% 38% 62% 35%; scale: 1.04 .96; }
}
@keyframes haloRotate { to { transform: rotate(360deg); } }
@keyframes liquidDrift { to { border-radius: 63% 37% 35% 65% / 38% 59% 41% 62%; transform: translate(-7vw, 8vh) rotate(18deg); } }
@keyframes tagFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pulse { 50% { box-shadow: 0 0 3px var(--acid); opacity: .55; } }
@keyframes revealFluid {
  from { opacity: 0; transform: translateY(45px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@supports (animation-timeline: view()) {
  .fluidPanel {
    animation: revealFluid linear both;
    animation-range: entry 8% cover 34%;
    animation-timeline: view();
  }
}

@media (max-width: 900px) {
  .menuButton {
    background: transparent;
    border: 0;
    display: grid;
    gap: 6px;
    padding: 12px 0 12px 12px;
    position: relative;
    z-index: 22;
  }
  .menuButton span { background: var(--text); display: block; height: 1px; transition: transform .25s ease; width: 28px; }
  .menuButton[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menuButton[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .navLinks {
    align-items: flex-start;
    background: rgba(5,8,7,.97);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0;
    left: 0;
    padding: 95px 24px 30px;
    position: fixed;
    top: 0;
    transform: translateY(-110%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    width: 100%;
    z-index: 21;
  }
  .navLinks.isOpen { transform: translateY(0); }
  .navLinks a { border-top: 1px solid var(--line); font-size: 14px; padding: 17px 0; width: 100%; }
  .hero { padding-top: 135px; }
  .heroCopy { z-index: 5; }
  .sphereScene {
    height: 850px;
    left: 66%;
    opacity: .36;
    top: 50%;
    transform: translate(-50%, -50%) scale(.94);
    width: 850px;
  }
  .heroIndex { display: none; }
  .profile, .profilePanel, .skillsLayout, .environmentStrip, .timelineItem { grid-template-columns: 1fr; }
  .profilePanel { gap: 35px; padding: 35px; }
  .projectDetails { grid-template-columns: 1fr; }
  .caseStudyGrid, .skillGroups { grid-template-columns: 1fr; }
  .languageGrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .nav { padding: 0 20px; }
  .navLinks { gap: 17px; }
  .hero, .section { padding-left: 20px; padding-right: 20px; }
  .hero {
    align-items: flex-start;
    min-height: 100svh;
    padding-bottom: 64px;
    padding-top: 128px;
  }
  .heroCopy { max-width: 100%; min-width: 0; width: 100%; }
  .status {
    align-items: flex-start;
    font-size: 10px;
    line-height: 1.45;
    margin-bottom: 32px;
    max-width: 310px;
  }
  .status span { flex: 0 0 7px; margin-top: 4px; }
  .kicker {
    font-size: 9px;
    line-height: 1.55;
    max-width: 310px;
  }
  .hero h1 {
    font-size: clamp(58px, 17.2vw, 72px);
    letter-spacing: -.065em;
    line-height: .82;
    max-width: 100%;
    overflow-wrap: normal;
  }
  .hero h1 br { display: none; }
  .hero h1 span { display: block; }
  .heroIntro {
    font-size: 16px;
    line-height: 1.55;
    margin-top: 34px;
    max-width: 100%;
  }
  .heroActions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
    width: min(100%, 330px);
  }
  .primaryButton {
    justify-content: space-between;
    width: 100%;
  }
  .textButton {
    display: flex;
    justify-content: space-between;
    padding: 13px 4px;
    width: 100%;
  }
  .sphereScene {
    height: 760px;
    left: 72%;
    opacity: .25;
    top: 42%;
    transform: translate(-50%, -50%) scale(.74);
    width: 760px;
  }
  .section { padding-bottom: 84px; padding-top: 84px; }
  .sectionLabel { margin-bottom: 30px; }
  .profilePanel { padding: 30px 24px; }
  .profilePanel .lead { font-size: 30px; }
  .project { padding: 30px 22px; }
  .project h2 { font-size: 30px; line-height: 1.05; margin-top: 28px; }
  .caseStudyGrid { grid-template-columns: 1fr; }
  .projectTop { align-items: start; gap: 20px; }
  .projectTop p { line-height: 1.45; margin: 0; text-align: right; }
  .skillGroup, .skillPanel, .learningPanel, .timelineItem { padding: 28px 22px; }
  .skillCloud span { padding: 10px 13px; }
  .languageGrid { grid-template-columns: 1fr; }
  .contact { min-height: auto; }
  .contact h2 { font-size: clamp(52px, 16vw, 68px); margin-bottom: 56px; }
  .contactLinks a {
    font-size: clamp(17px, 5vw, 23px);
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow-wrap: anywhere;
  }
  .contactLinks small { grid-column: 1 / -1; }
  footer { flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}