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

:root {
  font-family: Inter, system-ui, sans-serif;
  color: #edf3ff;
  background: #070b14;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --bg: #070b14;
  --surface: #0d1322;
  --surface-2: #111a2e;
  --text: #edf3ff;
  --muted: #98a5bd;
  --accent: #7ef0c6;
  --accent-2: #7aa7ff;
  --line: rgba(255,255,255,.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 80% 0%, rgba(58,93,160,.18), transparent 32%), var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: 112px 0; }

.nav-wrap { position: sticky; top: 0; z-index: 20; background: rgba(7,11,20,.82); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.nav { min-height: 74px; display: flex; align-items: center; justify-content: space-between; }
.brand { font-size: 1.25rem; font-weight: 800; letter-spacing: -.04em; }
.brand span { color: var(--accent); }
.nav-links { display: flex; gap: 30px; color: var(--muted); font-size: .92rem; }
.nav-links a:hover { color: var(--text); }
.menu-button { display: none; background: transparent; border: 0; color: var(--text); }

.hero { min-height: calc(100vh - 74px); display: grid; grid-template-columns: 1.22fr .78fr; gap: 70px; align-items: center; }
.eyebrow, .kicker { font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; color: var(--accent); }
.eyebrow { display: inline-flex; gap: 9px; align-items: center; padding: 9px 12px; border: 1px solid rgba(126,240,198,.22); border-radius: 999px; background: rgba(126,240,198,.06); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
h1 { margin: 24px 0; font-size: clamp(3.5rem, 7vw, 6.7rem); line-height: .98; letter-spacing: -.065em; }
h1 span { color: var(--accent); display: block; }
.hero-text { max-width: 720px; color: var(--muted); font-size: 1.11rem; line-height: 1.8; }
.hero-actions, .project-actions, .contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 10px; padding: 14px 18px; font-weight: 700; font-size: .92rem; transition: .2s ease; border: 1px solid transparent; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--accent); color: #07110e; }
.button.secondary { border-color: var(--line); background: rgba(255,255,255,.025); }
.button.small { padding: 11px 14px; font-size: .84rem; }
.hero-card { border: 1px solid var(--line); background: linear-gradient(150deg, rgba(17,26,46,.94), rgba(8,13,24,.96)); border-radius: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.38); overflow: hidden; transform: rotate(1.5deg); }
.code-heading { height: 46px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 7px; padding: 0 16px; }
.code-heading span { width: 9px; height: 9px; border-radius: 50%; background: #35405a; }
.hero-card pre { margin: 0; padding: 34px; overflow: auto; font: 500 .92rem/1.9 'DM Mono', monospace; color: #c9d7f1; }

.section-heading { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 50px; }
.section-heading > span { font: 500 .76rem 'DM Mono', monospace; color: var(--accent); padding-top: 5px; }
.section-heading p { margin: 0 0 9px; }
h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 4.2rem); letter-spacing: -.05em; }
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; }
.lead-copy { font-size: clamp(1.55rem, 3vw, 2.55rem); line-height: 1.3; letter-spacing: -.035em; margin: 0; }
.about-details > p { color: var(--muted); line-height: 1.85; margin-top: 0; }
.mini-facts { display: grid; gap: 13px; margin-top: 32px; }
.mini-facts span { display: flex; gap: 11px; align-items: center; color: #ced8ea; }

.projects-section { background: rgba(255,255,255,.018); border-block: 1px solid var(--line); }
.timeline-shell { overflow-x: auto; padding: 10px 0 26px; scrollbar-width: thin; scrollbar-color: #31415e transparent; }
.timeline { min-width: max-content; display: flex; gap: 28px; position: relative; padding-top: 30px; }
.timeline::before { content: ''; position: absolute; left: 0; right: 0; top: 49px; height: 1px; background: linear-gradient(90deg, var(--accent), rgba(122,167,255,.25)); }
.project-card { width: 390px; min-height: 530px; padding: 44px 26px 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); position: relative; display: flex; flex-direction: column; white-space: normal; }
.timeline-marker { position: absolute; top: 0; left: 26px; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #07110e; font: 600 .76rem 'DM Mono', monospace; z-index: 2; }
.timeline-marker.muted { background: #27344d; color: #dce6f7; }
.project-date { color: var(--accent); font: 500 .76rem 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
.project-preview { height: 150px; border-radius: 13px; background: linear-gradient(135deg, #1d355f, #0d1830 60%, #0f2b29); margin: 8px 0 24px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.pitch-lines { position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.23); }
.pitch-lines span:nth-child(1) { position:absolute; left:50%; top:0; bottom:0; border-left:1px solid rgba(255,255,255,.23); }
.pitch-lines span:nth-child(2) { position:absolute; width:40px; height:40px; border:1px solid rgba(255,255,255,.23); border-radius:50%; left:calc(50% - 20px); top:calc(50% - 20px); }
.pitch-lines span:nth-child(3), .pitch-lines span:nth-child(4) { position:absolute; top:24%; bottom:24%; width:44px; border:1px solid rgba(255,255,255,.23); }
.pitch-lines span:nth-child(3) { left:0; border-left:0; }
.pitch-lines span:nth-child(4) { right:0; border-right:0; }
.preview-label { position:absolute; right:12px; bottom:10px; font:500 .66rem 'DM Mono',monospace; color:var(--accent); text-transform:uppercase; }
.project-card h3 { font-size: 1.45rem; margin: 0 0 12px; }
.project-card > p:not(.project-date) { color: var(--muted); line-height: 1.65; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.tags span, .skills-grid span { border: 1px solid var(--line); color: #cbd6e9; background: rgba(255,255,255,.025); border-radius: 999px; padding: 7px 10px; font-size: .74rem; }
.project-actions { margin-top: auto; padding-top: 22px; }
.placeholder-card { justify-content: center; border-style: dashed; opacity: .68; }
.scroll-hint { text-align: right; color: var(--muted); font-size: .78rem; }

.resume-topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:36px; padding-bottom:30px; border-bottom:1px solid var(--line); }
.resume-topbar p { color:var(--muted); }
.experience-list { display:grid; }
.experience-item { display:grid; grid-template-columns: .34fr .66fr; gap:50px; padding:36px 0; border-bottom:1px solid var(--line); }
.experience-meta p { color:var(--accent); font:500 .74rem 'DM Mono',monospace; }
.experience-meta h3 { margin:10px 0 0; font-size:1.1rem; }
.experience-item h4 { margin:0 0 17px; font-size:1.35rem; }
.experience-item ul { margin:0; padding-left:20px; color:var(--muted); line-height:1.75; }
.education-card { display:flex; gap:20px; align-items:flex-start; margin-top:44px; padding:26px; border:1px solid var(--line); background:var(--surface); border-radius:16px; }
.education-card h3 { margin:5px 0 10px; }
.education-card p:last-child { color:var(--muted); margin:0; }
.skills-block { margin-top:44px; }
.skills-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }

.contact-section { padding-top:40px; }
.contact-card { padding:54px; border-radius:24px; border:1px solid rgba(126,240,198,.22); background:linear-gradient(135deg, rgba(126,240,198,.09), rgba(122,167,255,.07)); display:flex; align-items:center; justify-content:space-between; gap:50px; }
.contact-card p:not(.kicker) { color:var(--muted); max-width:650px; line-height:1.7; }
.footer { min-height:100px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.84rem; }
.footer div { display:flex; gap:16px; }

@media (max-width: 820px) {
  .section { padding: 82px 0; }
  .hero { grid-template-columns:1fr; padding-top:70px; min-height:auto; }
  .hero-card { transform:none; }
  .about-grid, .experience-item { grid-template-columns:1fr; gap:24px; }
  .contact-card { align-items:flex-start; flex-direction:column; }
  .menu-button { display:block; }
  .nav-links { display:none; position:absolute; left:20px; right:20px; top:68px; flex-direction:column; padding:22px; background:#0c1322; border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.45); }
  .nav-links.open { display:flex; }
}

@media (max-width: 560px) {
  .container { width:min(100% - 28px,1120px); }
  h1 { font-size:3.25rem; }
  .project-card { width:315px; }
  .resume-topbar { align-items:flex-start; flex-direction:column; }
  .contact-card { padding:32px 24px; }
  .button { width:100%; }
  .project-actions .button { width:auto; flex:1; }
  .hero-actions, .contact-actions { width:100%; }
  .hero-card pre { padding:24px 18px; font-size:.76rem; }
}

.menu-icon { display: inline-block; font-size: 1.45rem; line-height: 1; }
.education-icon { font-size: 1.8rem; width: 30px; flex: 0 0 30px; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .button { transition: none; }
}

.project-preview{
    position:relative;
    overflow:hidden;
}

.project-preview img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.preview-label{
    position:absolute;
    right:18px;
    bottom:18px;
}