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

/* ── Variables ── */
:root {
  --ink: #10101a;
  --paper: #faf9f5;
  --blue: #5278ff;
  --yellow: #ffd83d;
  --purple: #a56cff;
  --mint: #46dfbd;
  --lav: #e9e6ff;
  --red: #ff4d6d;
  --orange: #ff7f51;
  --cyan: #00e5ff;
  --card1: var(--mint);
  --card2: var(--yellow);
  --card3: #88a5ff;
  --bg: var(--paper);
  --fg: var(--ink);
  --border-clr: var(--ink);
  --shadow-clr: var(--ink);
  --nav-bg: rgba(250, 249, 245, 0.92);
  --terminal-bg: #111524;
  --terminal-text: #fff;
  --stat1-bg: var(--lav);
  --stat2-bg: var(--mint);
  --stat3-bg: var(--yellow);
  --section-bg: var(--lav);
  --footer-bg: #111524;
  --about-bg: #fff;
  --tech-bg: #fff;
  --retro-bg: #18203a;
  --retro-color: #59ffbb;
  --cursor-color: #5278ff;
}

[data-theme="dark"] {
  --ink: #ccc9d6;
  --paper: #1c1b22;
  --border-clr: #3a3848;
  --shadow-clr: #3a3848;
  --blue: #8faeff;
  --yellow: #f5c842;
  --purple: #b896f5;
  --mint: #3dc9a0;
  --lav: #26243a;
  --red: #f07088;
  --orange: #f0956a;
  --cyan: #5de0f5;
  --card1: #1a2e27;
  --card2: #28260f;
  --card3: #1d2545;
  --bg: var(--paper);
  --fg: var(--ink);
  --nav-bg: rgba(28, 27, 34, 0.93);
  --terminal-bg: #13121a;
  --terminal-text: #ccc9d6;
  --stat1-bg: #22203a;
  --stat2-bg: #162820;
  --stat3-bg: #26230e;
  --section-bg: #171620;
  --footer-bg: #13121a;
  --about-bg: #201f2b;
  --tech-bg: #201f2b;
  --retro-bg: #0f0e17;
  --retro-color: #3dc9a0;
  --cursor-color: #b896f5;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; transition: background-color .25s, color .18s, border-color .18s; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Space Grotesk", sans-serif; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: auto; padding: 0 24px; }

/* ── Header ── */
header { padding: 18px 0; position: sticky; top: 0; background: var(--nav-bg); backdrop-filter: blur(10px); z-index: 10; }
.nav { border: 3px solid var(--border-clr); box-shadow: 5px 5px 0 var(--shadow-clr); background: var(--about-bg); display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.logo { font-weight: 700; font-size: 21px; }
.logo span { display: inline-block; background: var(--yellow); border: 2px solid var(--border-clr); padding: 7px 11px; color: #10101a; }
nav { display: flex; gap: 26px; font-weight: 700; font-size: 14px; }
nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.status { background: var(--mint); border: 2px solid var(--border-clr); padding: 9px 14px; font-weight: 700; box-shadow: 3px 3px 0 var(--shadow-clr); color: #10101a; }

/* ── Theme Toggle ── */
.nav-right { display: flex; gap: 10px; align-items: center; }
.theme-btn {
  border: 2px solid var(--border-clr); padding: 8px 12px; font-weight: 700; font-size: 13px;
  box-shadow: 3px 3px 0 var(--shadow-clr); background: var(--purple);
  cursor: pointer; font-family: "DM Mono", monospace; color: #fff;
  display: flex; align-items: center; gap: 6px;
  transition: transform .1s, box-shadow .1s;
}
.theme-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-clr); }
.theme-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow-clr); }
.theme-icon { font-size: 16px; }

/* ── Hero ── */
.hero { padding: 70px 0 50px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; }
.kicker { display: inline-block; background: var(--yellow); border: 3px solid var(--border-clr); padding: 8px 13px; font-family: "DM Mono"; font-weight: 700; box-shadow: 4px 4px 0 var(--shadow-clr); color: #10101a; }
h1 { font-size: clamp(62px, 8vw, 112px); line-height: .83; margin: 26px 0; font-weight: 700; letter-spacing: -6px; color: var(--fg); }
h1 .blue { color: var(--blue); -webkit-text-stroke: 2px var(--border-clr); text-shadow: 3px 3px 0 var(--shadow-clr); }
.lead { font-family: "DM Mono"; font-size: 17px; line-height: 1.6; max-width: 650px; }
.actions { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.btn { border: 3px solid var(--border-clr); padding: 14px 20px; font-weight: 700; box-shadow: 5px 5px 0 var(--shadow-clr); background: var(--about-bg); cursor: pointer; display: inline-block; }
.btn.primary { background: var(--purple); color: #fff; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--shadow-clr); transition: transform .1s, box-shadow .1s; }
.btn:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--shadow-clr); }

/* ── Terminal ── */
.terminal { background: var(--terminal-bg); color: var(--terminal-text); border: 3px solid var(--border-clr); box-shadow: 8px 8px 0 var(--shadow-clr); border-radius: 10px; overflow: hidden; }
.termbar { background: var(--purple); padding: 10px; display: flex; gap: 7px; align-items: center; border-bottom: 3px solid var(--border-clr); }
.termbar-title { font: 700 12px "DM Mono"; color: #fff; margin-left: 8px; opacity: .8; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: #ff5e5e; border: 1px solid rgba(0,0,0,.3); }
.dot:nth-child(2) { background: var(--yellow); }
.dot:nth-child(3) { background: var(--mint); }
pre { margin: 0; padding: 25px; font: 14px/1.8 "DM Mono"; white-space: pre-wrap; }
.pink { color: #ff7ccf; }
.green { color: #62e6b6; }
.t-cyan { color: #6bdcff; }
.orange-t { color: #ffaa5e; }
.comment { color: #5a6080; }
.cursor { display: inline-block; width: 10px; height: 17px; background: var(--cursor-color); animation: blink 1s step-end infinite; vertical-align: text-bottom; margin-left: 2px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── Stats ── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.stat { border: 3px solid var(--border-clr); padding: 18px; background: var(--about-bg); box-shadow: 4px 4px 0 var(--shadow-clr); text-align: center; }
.stat b { font-size: 28px; display: block; }
.stat:nth-child(1) { background: var(--stat1-bg); }
.stat:nth-child(2) { background: var(--stat2-bg); }
.stat:nth-child(3) { background: var(--stat3-bg); }

/* ── Sections ── */
.section { padding: 65px 0; }
.section-title { font-size: 58px; letter-spacing: -3px; margin: 0 0 25px; }
.marker { box-shadow: inset 0 -14px 0 var(--yellow); }

/* ── Stack ── */
.stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tech { border: 3px solid var(--border-clr); box-shadow: 4px 4px 0 var(--shadow-clr); padding: 18px 12px; text-align: center; background: var(--tech-bg); font-weight: 700; cursor: default; position: relative; overflow: hidden; }
.tech:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow-clr); transition: transform .12s, box-shadow .12s; }
.tech small { font: 11px "DM Mono"; display: block; margin-top: 7px; opacity: .7; }
.tech-badge { position: absolute; top: 6px; right: 6px; background: var(--mint); border: 1px solid var(--border-clr); font: 700 9px "DM Mono"; padding: 2px 5px; color: #10101a; }

/* ── Projects ── */
.projects { background: var(--section-bg); padding: 70px 0; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { min-height: 300px; border: 3px solid var(--border-clr); box-shadow: 7px 7px 0 var(--shadow-clr); padding: 25px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .12s, box-shadow .12s; }
.card:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--shadow-clr); }
.card:nth-child(1) { background: var(--card1); }
.card:nth-child(2) { background: var(--card2); }
.card:nth-child(3) { background: var(--card3); }
.number { font: 700 13px "DM Mono"; background: var(--border-clr); color: var(--bg); padding: 5px 8px; display: inline-block; }
.card h3 { font-size: 32px; line-height: .95; margin: 20px 0 8px; }
.tags { display: flex; gap: 7px; flex-wrap: wrap; }
.tag { border: 2px solid var(--border-clr); padding: 5px 8px; font: 700 11px "DM Mono"; background: rgba(255,255,255,.15); }
.card-links { display: flex; gap: 8px; margin-top: 10px; }
.card-link { border: 2px solid var(--border-clr); padding: 6px 10px; font: 700 11px "DM Mono"; background: rgba(0,0,0,.15); display: flex; align-items: center; gap: 4px; }
.card-link:hover { background: rgba(0,0,0,.3); }

/* ── Geek Console Bar ── */
.geek-bar { background: var(--terminal-bg); border: 3px solid var(--border-clr); box-shadow: 6px 6px 0 var(--shadow-clr); padding: 16px 20px; margin-bottom: 18px; font: 13px "DM Mono"; color: #59ffbb; overflow: hidden; }
.geek-bar .gb-line { margin: 0; line-height: 1.7; }
.geek-bar .gb-prompt { color: #5a6080; }
.geek-bar .gb-cmd { color: #6bdcff; }
.geek-bar .gb-out { color: #59ffbb; }
.geek-bar .gb-warn { color: #ffaa5e; }

/* ── Achievements ── */
.achievements { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.ach { border: 3px solid var(--border-clr); box-shadow: 4px 4px 0 var(--shadow-clr); padding: 14px 10px; text-align: center; background: var(--tech-bg); }
.ach-icon { font-size: 24px; display: block; margin-bottom: 6px; }
.ach-label { font: 700 11px "DM Mono"; display: block; }
.ach-sub { font: 400 10px "DM Mono"; display: block; opacity: .6; margin-top: 3px; }

/* ── About ── */
.about { border: 3px solid var(--border-clr); box-shadow: 7px 7px 0 var(--shadow-clr); padding: 35px; display: grid; grid-template-columns: 180px 1fr auto; gap: 30px; align-items: center; background: var(--about-bg); }
.retro { height: 130px; border: 3px solid var(--border-clr); background: var(--retro-bg); display: grid; place-items: center; color: var(--retro-color); font: 700 50px "DM Mono"; box-shadow: 6px 6px 0 var(--shadow-clr); }
.about-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.about-badge { border: 2px solid var(--border-clr); padding: 4px 8px; font: 700 10px "DM Mono"; background: var(--purple); color: #fff; }

/* ── Footer ── */
footer { background: var(--footer-bg); color: #e8e6f0; padding: 45px 0; margin-top: 70px; }
.footer { display: flex; justify-content: space-between; align-items: center; }
.social { display: flex; gap: 10px; }
.social a { border: 2px solid rgba(255,255,255,.4); padding: 10px 14px; transition: border-color .15s; }
.social a:hover { border-color: #fff; }
.footer-geek { font: 12px "DM Mono"; color: #5a6080; margin-top: 6px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 48px; gap: 42px; }
  h1 { font-size: clamp(58px, 11vw, 88px); letter-spacing: -4px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .card:last-child { grid-column: 1 / -1; }
  .about { grid-template-columns: 130px 1fr; }
  .about .btn { grid-column: 1 / -1; justify-self: start; }
  .achievements { grid-template-columns: repeat(2, 1fr); }
  .stack { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .hero { padding: 38px 0 30px; gap: 32px; }
  h1 { font-size: clamp(49px, 14.5vw, 76px); line-height: .88; letter-spacing: -3px; margin: 20px 0; }
  .lead { font-size: 14px; }
  .section-title { font-size: clamp(40px, 11vw, 55px); letter-spacing: -2px; margin-bottom: 20px; }
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .card, .card:last-child { grid-column: auto; min-height: 270px; }
  .about { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .achievements { grid-template-columns: 1fr 1fr; }
  .footer { flex-direction: column; gap: 25px; align-items: flex-start; }
  .stats { grid-template-columns: 1fr; }
  .stat { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; }
  .stat b { font-size: 20px; }
}
@media (max-width: 400px) {
  .actions { flex-direction: column; align-items: stretch; }
  .btn { text-align: center; }
  .nav-right { gap: 6px; }
  .status { display: none; }
}