@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #0b0d0f;
  --panel: #111417;
  --panel-2: #15191c;
  --text: #f2f0ea;
  --muted: #9da3a5;
  --line: #2a2f32;
  --accent: #c8ff3d;
  --accent-dark: #8dbf00;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Manrope, system-ui, sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
.container { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }

.nav-wrap {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11,13,15,.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.brand { font-size: 25px; font-weight: 800; letter-spacing: -1px; }
.brand span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 13px; color: #c5c9c9; }
.nav-links a:hover { color: var(--accent); }
.nav-cta { border: 1px solid #555d60; border-radius: 999px; padding: 9px 15px; }
.nav-cta:hover { border-color: var(--accent); }
.menu-btn { display: none; background: none; border: 0; color: var(--text); font-size: 24px; }

.hero { min-height: 650px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; padding-block: 70px 100px; }
.eyebrow { font: 500 11px/1.3 'DM Mono', monospace; letter-spacing: .14em; color: var(--muted); margin: 0 0 20px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 9px; box-shadow: 0 0 18px rgba(200,255,61,.55); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(48px, 6.3vw, 84px); line-height: .99; letter-spacing: -4px; max-width: 780px; margin-bottom: 30px; }
h1 em, h2 em { color: var(--accent); font-style: normal; }
.hero-text { color: var(--muted); max-width: 600px; font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; gap: 14px; align-items: center; border-radius: 999px; padding: 13px 20px; font-size: 13px; font-weight: 700; }
.button.primary { background: var(--accent); color: #0b0d0f; }
.button.primary:hover { background: #d8ff70; transform: translateY(-1px); }
.button.secondary { border: 1px solid var(--line); color: #d6d8d8; }
.button.secondary:hover { border-color: #667074; }

.hero-visual { height: 470px; position: relative; display: grid; place-items: center; }
.core { width: 145px; height: 145px; border: 1px solid var(--accent); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 60px rgba(200,255,61,.08), inset 0 0 40px rgba(200,255,61,.04); z-index: 2; }
.core-label { font: 500 13px/1.4 'DM Mono', monospace; text-align: center; letter-spacing: .08em; }
.orbit { position: absolute; border: 1px solid #272e31; border-radius: 50%; }
.orbit-one { width: 300px; height: 300px; transform: rotate(-24deg) skew(6deg); }
.orbit-two { width: 430px; height: 250px; transform: rotate(35deg); }
.node { position: absolute; padding: 11px 14px; background: #131719; border: 1px solid #303638; min-width: 112px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.node strong { display:block; font: 500 10px 'DM Mono', monospace; color: var(--accent); letter-spacing: .1em; }
.node small { display:block; color: #c6c9c9; font-size: 12px; margin-top: 3px; }
.n1 { top: 52px; left: 7%; } .n2 { top: 17%; right: 1%; }
.n3 { bottom: 21%; right: 2%; } .n4 { bottom: 3%; left: 17%; } .n5 { top: 45%; left: -1%; }

.marquee { overflow: hidden; border-block: 1px solid var(--line); background: #0f1214; }
.marquee-track { width: max-content; display: flex; gap: 28px; align-items:center; padding: 15px 0; animation: scroll 28s linear infinite; font: 500 10px 'DM Mono', monospace; letter-spacing: .1em; color: #aeb4b4; }
.marquee b { color: var(--accent); font-size: 14px; }
@keyframes scroll { to { transform: translateX(-50%); } }

.section { padding-block: 125px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 52px; }
.section-heading h2 { font-size: clamp(38px, 5vw, 62px); line-height: 1.05; letter-spacing: -2.8px; margin: 0; }
.section-heading .eyebrow { margin-bottom: 9px; }

.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.cap-card { padding: 28px 24px 10px 0; min-height: 270px; border-right: 1px solid var(--line); margin-right: 24px; }
.cap-card:last-child { border-right: 0; margin-right: 0; }
.num, .project-num { font: 500 10px 'DM Mono', monospace; color: var(--accent); }
.cap-card h3 { font-size: 20px; letter-spacing: -.5px; margin: 55px 0 13px; }
.cap-card p { color: var(--muted); font-size: 13px; max-width: 245px; }

.stack-section { background: #101315; border-block: 1px solid var(--line); }
.stack-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stack-item { min-height: 160px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s; }
.stack-item:hover { background: #15191c; }
.stack-item span { display:block; font: 500 10px 'DM Mono', monospace; color: #697174; margin-bottom: 40px; }
.stack-item strong { display:block; font-size: 19px; letter-spacing: -.5px; }
.stack-item small { display:block; color: #7f8789; font-size: 11px; margin-top: 3px; }

.project-list { border-top: 1px solid var(--line); }
.project { display: grid; grid-template-columns: 80px 1fr 40px; gap: 25px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.project-main { max-width: 790px; }
.project-type { font: 500 10px 'DM Mono', monospace; color: var(--accent); letter-spacing: .1em; margin-bottom: 9px; }
.project h3 { font-size: 27px; letter-spacing: -1px; margin-bottom: 10px; }
.project p:not(.project-type) { color: var(--muted); font-size: 14px; max-width: 700px; }
.project-arrow { color: var(--accent); font-size: 22px; text-align: right; }
.tags { display:flex; flex-wrap:wrap; gap: 7px; margin-top: 18px; }
.tags span { border: 1px solid #303638; color: #aeb4b4; padding: 5px 9px; font: 400 9px 'DM Mono', monospace; }
.edit-note { color: #6d7577; font-size: 11px; margin-top: 22px; }

.quote-section { background: var(--accent); color: #0b0d0f; }
.quote { padding-block: 100px; }
.quote .eyebrow { color: #455000; }
blockquote { font-size: clamp(35px, 5vw, 63px); line-height: 1.08; letter-spacing: -2.8px; max-width: 950px; margin: 0 0 25px; font-weight: 700; }
.quote-sub { max-width: 600px; font-size: 14px; }

.contact { padding-block: 120px; display:grid; grid-template-columns: 1.1fr .9fr; gap: 70px; }
.contact h2 { font-size: clamp(40px, 5vw, 62px); letter-spacing: -3px; line-height:1.05; margin-bottom: 20px; }
.contact p:not(.eyebrow) { color: var(--muted); max-width: 520px; }
.contact-links { display:flex; flex-direction:column; }
.contact-links a { padding: 18px 0; border-bottom: 1px solid var(--line); display:flex; justify-content:space-between; color:#d7d9d8; font-size:14px; }
.contact-links a:hover { color: var(--accent); }

.footer { border-top:1px solid var(--line); padding-block: 25px; display:flex; justify-content:space-between; color:#666e70; font: 10px 'DM Mono', monospace; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 55px; }
  .hero-visual { height: 400px; }
  .cap-grid { grid-template-columns: repeat(2,1fr); }
  .cap-card { min-height: 230px; border-bottom:1px solid var(--line); padding-bottom:25px; }
  .stack-grid { grid-template-columns: repeat(2,1fr); }
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .container { width: min(calc(100% - 32px), var(--max)); }
  .nav-links { display:none; position:absolute; top:76px; left:0; right:0; padding:18px 20px 25px; background:#0b0d0f; border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; }
  .nav-links.open { display:flex; }
  .menu-btn { display:block; }
  h1 { letter-spacing:-2.5px; font-size:49px; }
  .hero { min-height:auto; padding-bottom:70px; }
  .hero-visual { height:340px; transform:scale(.82); margin:-20px -35px; }
  .section { padding-block:85px; }
  .section-heading { display:block; margin-bottom:38px; }
  .section-heading h2 { margin-top: 12px; }
  .cap-grid, .stack-grid { grid-template-columns:1fr; }
  .cap-card { border-right:0; margin-right:0; min-height:0; padding:25px 0 30px; }
  .cap-card h3 { margin-top:35px; }
  .project { grid-template-columns: 42px 1fr; gap:10px; }
  .project-arrow { display:none; }
  .project h3 { font-size:22px; }
  blockquote { letter-spacing:-1.7px; }
  .contact { padding-block:85px; }
}


.role-section { padding-bottom: 90px; }
.role-intro { display:grid; grid-template-columns: 1fr 1fr; gap:50px; border-top:1px solid var(--line); padding-top:28px; }
.role-date { font:500 10px 'DM Mono',monospace; color:var(--accent); letter-spacing:.1em; }
.role-intro h3 { font-size:30px; letter-spacing:-1px; margin:8px 0 0; }
.role-intro > p { color:var(--muted); font-size:14px; max-width:560px; }
.role-highlights { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:45px; }
.role-highlights > div { background:var(--bg); padding:24px; min-height:190px; }
.role-highlights span { font:500 10px 'DM Mono',monospace; color:#697174; }
.role-highlights strong { display:block; font-size:18px; margin:35px 0 8px; }
.role-highlights p { color:var(--muted); font-size:12px; margin:0; }

.experience-section { background:#101315; border-block:1px solid var(--line); }
.timeline { border-top:1px solid var(--line); }
.timeline > div { display:grid; grid-template-columns:160px 1fr 1fr; gap:30px; align-items:center; padding:24px 0; border-bottom:1px solid var(--line); }
.timeline span { font:500 10px 'DM Mono',monospace; color:var(--accent); }
.timeline h3 { margin:0; font-size:18px; }
.timeline p { margin:0; color:var(--muted); font-size:13px; }

@media (max-width:650px) {
  .role-intro, .role-highlights { grid-template-columns:1fr; }
  .role-highlights { background:transparent; gap:0; }
  .role-highlights > div { border-bottom:1px solid var(--line); padding-inline:0; }
  .timeline > div { grid-template-columns:1fr; gap:5px; }
}