@font-face {
  font-family:"Space Grotesk"; src:url("/assets/fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
:root {
  --bg:#0d1117; --bg2:#131a24; --bg3:#1a2333; --line:#2b3442;
  --text:#e8eef6; --mut:#93a0b4; --acc:#7ee787; --acc-hot:#39d353;
  --acc-dim:#2ea04370; --blue:#6cb2ff;
  --mono:ui-monospace,"Cascadia Code",Consolas,Menlo,monospace;
  --disp:"Space Grotesk",system-ui,sans-serif;
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body {
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text); background:var(--bg); overflow-x:hidden;
}
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 25px 35px, #ffffff24, transparent),
    radial-gradient(1px 1px at 160px 130px, #ffffff18, transparent),
    radial-gradient(1.5px 1.5px at 320px 90px, #7ee7871f, transparent),
    radial-gradient(1px 1px at 480px 210px, #ffffff20, transparent),
    radial-gradient(1px 1px at 90px 280px, #6cb2ff1a, transparent);
  background-size:520px 340px;
}
.orb { position:fixed; border-radius:50%; filter:blur(90px); z-index:-3; pointer-events:none; }
.orb.a { width:520px; height:520px; right:-140px; top:-160px; background:#1b4d3a66; animation:drift 26s ease-in-out infinite alternate; }
.orb.b { width:440px; height:440px; left:-160px; bottom:-120px; background:#173a5e55; animation:drift 32s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform:translate(0,0) scale(1); } to { transform:translate(-60px,50px) scale(1.15); } }

nav {
  position:fixed; top:0; left:0; right:0; z-index:10;
  background:#0d111799; backdrop-filter:blur(12px); border-bottom:1px solid #2b344288;
}
.nav-in { max-width:920px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:22px; }
.logo { font:700 1.05rem var(--disp); color:var(--text); letter-spacing:.5px; }
.logo span { color:var(--acc); }
.nav-links { display:flex; gap:18px; margin-left:auto; font:.85rem var(--mono); }
.nav-links a { color:var(--mut); }
.nav-links a:hover { color:var(--text); text-decoration:none; }
.lang { font:.82rem var(--mono); color:var(--mut); margin-left:auto; white-space:nowrap; }
.lang b { color:var(--acc); font-weight:600; }
.lang a { color:var(--mut); }
.lang a:hover { color:var(--text); text-decoration:none; }
.nav-links + .lang { margin-left:0; padding-left:18px; border-left:1px solid var(--line); }
.nav-cta {
  font:600 .8rem var(--mono); color:#0d1117; background:var(--acc);
  padding:7px 15px; border-radius:8px; white-space:nowrap;
}
.nav-cta:hover { background:var(--acc-hot); text-decoration:none; }
@media (max-width:720px) { .nav-links { display:none; } .lang { margin-left:auto; } }

main { max-width:920px; margin:0 auto; padding:120px 24px 80px; }
.prompt { font:14px var(--mono); color:var(--mut); margin-bottom:20px; }
.prompt b { color:var(--acc); font-weight:600; }
h1 {
  font:700 clamp(2.6rem, 8vw, 4.6rem)/1.02 var(--disp);
  letter-spacing:-2px; text-transform:uppercase; margin-bottom:14px;
}
.role {
  font:600 clamp(1.05rem, 3vw, 1.5rem) var(--disp); letter-spacing:.5px;
  background:linear-gradient(90deg, var(--acc), var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:10px;
}
.stack-line { font:.95rem var(--mono); color:var(--mut); margin-bottom:26px; }
.chips { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:34px; }
.chip {
  background:var(--bg3); border:1px solid var(--line); border-radius:18px;
  padding:5px 14px; font-size:.84rem;
}
.chip.hot {
  color:var(--acc); border-color:var(--acc-dim);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { box-shadow:0 0 0 #2ea04300; } 50% { box-shadow:0 0 16px #2ea04340; } }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; }
.btn {
  font:600 .92rem var(--mono); padding:12px 22px; border-radius:10px;
  border:1px solid var(--line); color:var(--text); background:var(--bg2);
  transition:transform .15s, border-color .15s, background .15s;
}
.btn:hover { text-decoration:none; transform:translateY(-2px); border-color:var(--acc-dim); }
.btn.primary { background:var(--acc); color:#0d1117; border-color:var(--acc); }
.btn.primary:hover { background:var(--acc-hot); }

.marquee { overflow:hidden; border-block:1px solid var(--line); margin:52px 0; padding:13px 0; }
.track { display:flex; gap:44px; width:max-content; animation:slide 42s linear infinite; }
.marquee:hover .track { animation-play-state:paused; }
.track span { font:.82rem var(--mono); color:var(--mut); letter-spacing:2px; text-transform:uppercase; white-space:nowrap; }
.track i { color:var(--acc); font-style:normal; }
@keyframes slide { to { transform:translateX(-50%); } }

h2 {
  font:600 1.05rem var(--mono); color:var(--acc); margin:3rem 0 1.1rem;
  display:flex; align-items:center; gap:12px;
}
h2 .no { color:var(--mut); font-weight:400; }
h2::after { content:""; flex:1; height:1px; background:var(--line); }

.facts {
  background:var(--bg2); border:1px solid var(--line); border-left:3px solid var(--acc);
  border-radius:12px; padding:20px 24px;
}
.facts li { margin:.5rem 0 .5rem 1.2rem; }
.facts li::marker { color:var(--acc); }

ul.skills { list-style:none; padding:0; display:grid; gap:12px; }
ul.skills li {
  display:grid; grid-template-columns:220px 1fr; gap:16px; padding:15px 18px;
  background:linear-gradient(180deg, var(--bg2), var(--bg)); border:1px solid var(--line);
  border-radius:12px; transition:border-color .15s, transform .15s;
}
ul.skills li:hover { border-color:#4d5969; transform:translateX(4px); }
ul.skills b { font:600 .84rem var(--mono); color:var(--acc); }

.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.proj {
  background:var(--bg2); border:1px solid var(--line); border-radius:12px;
  padding:20px 20px 16px; position:relative; overflow:hidden;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.proj::before {
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, var(--acc), transparent 65%); opacity:0;
  transition:opacity .15s;
}
.proj:hover { transform:translateY(-3px); border-color:var(--acc-dim); box-shadow:0 10px 32px #2ea0431c; }
.proj:hover::before { opacity:1; }
.proj h3 { font:600 1.02rem var(--disp); margin-bottom:7px; }
.proj p { font-size:.88rem; color:#b5bfcc; margin-bottom:12px; }
.proj .links { display:flex; flex-wrap:wrap; gap:8px; }
.proj a {
  font:.76rem var(--mono); color:var(--acc); background:var(--bg3);
  border:1px solid var(--line); border-radius:7px; padding:4px 10px;
}
.proj a:hover { text-decoration:none; border-color:var(--acc-dim); }
.proj a.demo { background:var(--acc); color:#0d1117; border-color:var(--acc); }
.proj a.demo:hover { background:var(--acc-hot); }

.story {
  background:linear-gradient(180deg, var(--bg2), var(--bg));
  border:1px solid var(--line); border-radius:12px; padding:22px 26px;
}
.story p { color:#c4ccd6; }

details {
  background:var(--bg2); border:1px solid var(--line); border-radius:12px;
  padding:14px 20px; margin:.6rem 0; transition:border-color .15s;
}
details[open] { border-color:var(--acc-dim); }
summary { font-weight:600; cursor:pointer; list-style:none; display:flex; align-items:center; gap:11px; }
summary::-webkit-details-marker { display:none; }
summary::before { content:">"; font:600 .9rem var(--mono); color:var(--acc); }
details[open] summary::before { content:"v"; }
details p { margin-top:.7rem; font-size:.93rem; color:#b5bfcc; }

footer { border-top:1px solid var(--line); margin-top:3.4rem; padding-top:1.5rem; font:.85rem var(--mono); color:var(--mut); }
footer a { color:var(--acc); }
.last-line { margin-top:.6rem; color:#6b7686; }

[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].in { opacity:1; transform:none; }

@media (max-width:640px) {
  .grid { grid-template-columns:1fr; }
  ul.skills li { grid-template-columns:1fr; gap:5px; }
}
@media (prefers-reduced-motion:reduce) {
  .track, .orb, .chip.hot { animation:none; }
  [data-reveal] { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}
@media print {
  body { background:#fff; color:#111; }
  body::before, .orb, nav, .marquee { display:none; }
  main { padding-top:10px; }
  .facts, .proj, details, .story, ul.skills li, .btn { background:#fff; border-color:#ccc; box-shadow:none; }
  h1 { color:#000; }
  .role { -webkit-text-fill-color:#0a6e2c; color:#0a6e2c; }
  h2, ul.skills b, .proj a, footer a, .chip.hot { color:#0a6e2c; }
  .cta-row { display:none; }
}