:root {
  --bg: #04060a;
  --fg: #d7e3f4;
  --dim: #6b7a90;
  --acc: #00ffa3;
  --acc2: #00c8ff;
  --acc3: #b46bff;
  --glass: rgba(10, 18, 28, 0.55);
  --line: rgba(0, 255, 163, 0.18);
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  overflow-x: hidden;
}
::selection { background: var(--acc); color: #000; }

#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; }

.scanlines {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.scanlines::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.75));
}

/* gutter line numbers */
.gutter {
  position: fixed; left: 0; top: 0; bottom: 0; width: 52px; z-index: 2;
  border-right: 1px solid var(--line); overflow: hidden;
  font: 12px/22px var(--mono); color: rgba(107,122,144,0.5); text-align: right;
  padding-right: 10px; pointer-events: none;
}
#gutter-lines { will-change: transform; }
#gutter-lines .on { color: var(--acc); }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 20; }
#progress-bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--acc), var(--acc2), var(--acc3));
  box-shadow: 0 0 12px var(--acc);
}

/* nav */
.nav {
  position: fixed; top: 0; left: 52px; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 32px;
  background: linear-gradient(180deg, rgba(4,6,10,0.85), transparent);
}
.logo { font: 800 20px var(--mono); color: var(--fg); text-decoration: none; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 10px; }
.logo img { height: 34px; width: auto; filter: drop-shadow(0 0 10px rgba(0,255,163,0.35)); transition: filter .3s, transform .3s; }
.logo:hover img { filter: drop-shadow(0 0 16px rgba(0,255,163,0.7)); transform: scale(1.06); }
.foot-logo { width: 150px; margin-bottom: 14px; opacity: .9; filter: drop-shadow(0 0 20px rgba(0,255,163,0.25)); }
.logo .br { color: var(--acc); }
.nav nav { display: flex; gap: 26px; }
.nav nav a { font: 13px var(--mono); color: var(--dim); text-decoration: none; transition: color .2s; }
.nav nav a:hover { color: var(--acc); }

/* panels */
main { position: relative; z-index: 3; }
.panel {
  min-height: 100vh; padding: 120px 8vw 80px calc(52px + 8vw);
  display: flex; flex-direction: column; justify-content: center;
}
.kicker { font: 13px var(--mono); color: var(--acc); margin-bottom: 18px; letter-spacing: .5px; }
h1, h2 { font-family: var(--sans); font-weight: 700; line-height: 1.02; letter-spacing: -1.5px; }
h1 { font-size: clamp(44px, 8vw, 116px); max-width: 12ch; text-shadow: 0 0 40px rgba(0,255,163,0.25); }
h2 { font-size: clamp(34px, 5.4vw, 72px); margin-bottom: 36px; }
.lead { font-size: 19px; line-height: 1.6; color: #b5c3d8; max-width: 60ch; }

.typed {
  margin-top: 30px; font: 15px/1.7 var(--mono); color: #6fe0ff;
  min-height: 8.6em; white-space: pre-wrap;
  align-self: flex-start; width: min(620px, 100%);
  padding: 18px 22px;
  background: rgba(3, 7, 12, 0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-left: 2px solid var(--acc);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
}
.typed .k { color: #c99bff; } .typed .s { color: var(--acc); } .typed .c { color: #8a9ab3; }
.caret { color: var(--acc); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.cta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.btn {
  display: inline-block; font: 600 14px var(--mono); text-decoration: none;
  color: var(--fg); padding: 14px 22px; border: 1px solid var(--line);
  background: rgba(0,0,0,0.35); position: relative; overflow: hidden;
  transition: color .25s, border-color .25s, box-shadow .25s;
}
.btn::before { content: "> "; color: var(--acc); }
.btn:hover { border-color: var(--acc); box-shadow: 0 0 24px rgba(0,255,163,0.25); }
.btn.primary { background: var(--acc); color: #001a10; border-color: var(--acc); }
.btn.primary::before { color: #001a10; }
.btn.primary:hover { box-shadow: 0 0 36px rgba(0,255,163,0.6); }
.btn.big { padding: 18px 30px; font-size: 16px; margin-top: 28px; }

.scroll-hint { position: absolute; bottom: 36px; font: 12px var(--mono); color: var(--dim); }
.scroll-hint span { display: inline-block; animation: bob 1.6s ease-in-out infinite; color: var(--acc); }
@keyframes bob { 50% { transform: translateY(6px); } }
.hero { position: relative; }
/* soft dark wash behind the hero text so it reads over the 3D scene */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 25% 55%, rgba(4,6,10,0.78), rgba(4,6,10,0.35) 60%, transparent 80%);
}
.hero h1 { text-shadow: 0 0 40px rgba(0,255,163,0.25), 0 4px 30px rgba(0,0,0,0.8); }

/* glass card */
.glass {
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); padding: 48px; max-width: 900px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.02);
}
.stack { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.stack span {
  font: 13px var(--mono); padding: 7px 12px; border: 1px solid var(--line); color: var(--acc2);
  background: rgba(0,200,255,0.05);
}
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.stats b { display: block; font: 800 46px var(--mono); color: var(--acc); }
.stats small { font: 12px var(--mono); color: var(--dim); }

/* works */
.works { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; perspective: 1400px; }
.project {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 0;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px);
  transform-style: preserve-3d; transition: transform .15s ease-out, box-shadow .3s;
}
.project:hover { box-shadow: 0 0 60px rgba(0,255,163,0.18); }
.browser { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); font: 12px var(--mono); color: var(--dim);
}
.bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.bar i:nth-child(2) { background: #febc2e; } .bar i:nth-child(3) { background: #28c840; }
.bar span { margin-left: 10px; }
.screen {
  position: relative; flex: 1; min-height: 300px; overflow: hidden;
  background: radial-gradient(circle at 30% 30%, rgba(0,200,255,0.18), transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(180,107,255,0.2), transparent 55%), #050a12;
}
.screen-code {
  position: absolute; inset: 0; padding: 14px; font: 11px/1.5 var(--mono);
  color: rgba(0,255,163,0.35); white-space: pre; transform: translateZ(20px);
}
.screen-title {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 800 clamp(30px, 4vw, 54px) var(--sans); letter-spacing: 4px;
  text-shadow: 0 0 30px rgba(0,255,163,0.6); transform: translateZ(60px);
}
.screen-title span { color: var(--acc); font-size: .5em; letter-spacing: 1px; }
.meta { padding: 34px; display: flex; flex-direction: column; gap: 14px; transform: translateZ(40px); }
.meta h3 { font-size: 32px; }
.meta p { color: #b5c3d8; line-height: 1.6; }
.tag { font: 12px var(--mono); color: var(--acc) !important; text-transform: uppercase; letter-spacing: 2px; }
.chips { display: flex; gap: 8px; list-style: none; flex-wrap: wrap; }
.chips li { font: 12px var(--mono); padding: 5px 10px; border: 1px solid var(--line); color: var(--acc2); }
.meta .btn { align-self: flex-start; margin-top: 8px; }

/* works: 2-column grid of cards, screenshot on top + details below */
.works { grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1240px; }
.project, .project.flip { grid-template-columns: 1fr; display: flex; flex-direction: column; }
.project .browser, .project.flip .browser { order: 0; border-right: 0; border-left: 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; overflow: hidden; }
.project .meta { flex: 1; padding: 26px 28px 30px; }
.project .meta h3 { font-size: 26px; }
.project .meta p { font-size: 15px; }
.project .meta .btn { margin-top: auto; }
.shot { position: relative; flex: 1; overflow: hidden; background: #050a12; aspect-ratio: 16 / 10; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .6s; filter: saturate(.92); }
.shot::after { content: "open ↗"; position: absolute; right: 14px; bottom: 14px; font: 600 12px var(--mono); color: #001a10; background: var(--acc); padding: 6px 10px; opacity: 0; transform: translateY(8px); transition: all .35s; }
.project:hover .shot img { transform: scale(1.04); filter: saturate(1.05); }
.project:hover .shot::after { opacity: 1; transform: none; }
.project.ghost { display: grid; place-items: center; border-style: dashed; min-height: 300px; }

/* "next project" live build card */
.nextbuild { border-style: dashed; background: rgba(4,8,14,0.82); }
.nextbuild .bar { gap: 7px; }
.nb-tab { color: var(--fg) !important; }
.nb-tab b { color: var(--acc3); font-weight: 400; }
.nb-live { margin-left: auto !important; font-size: 11px; color: var(--warn, #febc2e); transition: color .3s; }
.nb-live.ok { color: var(--acc); }
.nb-editor { display: flex; font: 12.5px/1.75 var(--mono); padding: 14px 0; border-bottom: 1px solid var(--line); min-height: 196px; }
.nb-gutter { width: 40px; text-align: right; padding-right: 12px; color: rgba(107,122,144,0.5); user-select: none; }
.nb-gutter div.on { color: var(--acc); }
.nb-code { margin: 0; flex: 1; white-space: pre; overflow: hidden; color: var(--fg); }
.nb-code .k { color: var(--acc3); } .nb-code .t { color: var(--acc2); } .nb-code .s { color: var(--acc); }
.nb-code .a { color: #febc2e; } .nb-code .c { color: var(--dim); }
.nb-caret { display: inline-block; width: 7px; height: 1.1em; background: var(--acc); vertical-align: -2px; animation: blink 1s steps(1) infinite; }

.nb-preview { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.nb-url { font: 11px var(--mono); color: var(--dim); background: rgba(0,0,0,0.4); border: 1px solid var(--line); padding: 5px 10px; margin-bottom: 10px; }
.nb-url b { color: var(--acc2); font-weight: 400; transition: color .3s; }
.nb-url.ok b { color: var(--acc); }
.nb-page { position: relative; height: 150px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(0,200,255,0.05), rgba(180,107,255,0.05)); padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.nb-page::after { content: ""; position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(transparent, rgba(0,255,163,0.12), transparent); animation: scan 2.6s linear infinite; }
@keyframes scan { to { top: 100%; } }
.nb-blk { opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.nb-blk.on { opacity: 1; transform: none; }
.nb-blk span, .nb-blk i { display: block; background: rgba(215,227,244,0.16); border-radius: 2px; }
.nb-blk.on span, .nb-blk.on i { animation: shimmer 1.6s ease-in-out 1; }
@keyframes shimmer { 0% { background: var(--acc); box-shadow: 0 0 12px var(--acc); } 100% { background: rgba(215,227,244,0.16); box-shadow: none; } }
.nb-nav { display: flex; align-items: center; gap: 8px; }
.nb-nav i { width: 14px; height: 14px; border-radius: 50%; margin-right: auto; }
.nb-nav span { width: 30px; height: 5px; }
.nb-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
.nb-h1 { width: 62%; height: 12px; } .nb-h2 { width: 40%; height: 6px; }
.nb-btns { display: flex; justify-content: center; gap: 8px; }
.nb-btns span { width: 52px; height: 13px; }
.nb-btns span:first-child { background: rgba(0,255,163,0.45); }
.nb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; }
.nb-cards span { height: 100%; min-height: 26px; }

.nb-term { padding: 12px 18px; font: 12px/1.6 var(--mono); color: var(--dim); }
.nb-term p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-term p span { color: var(--fg); }
.nb-term p .ok { color: var(--acc); }
.nb-prog { height: 3px; background: rgba(255,255,255,0.06); margin-top: 8px; overflow: hidden; }
.nb-prog span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc3), var(--acc2), var(--acc)); box-shadow: 0 0 10px var(--acc); transition: width .4s ease; }
.nb-cta { margin-top: auto; padding: 16px 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px dashed var(--line); }
.nb-cta p { font: 12px var(--mono); color: var(--dim); }
.nb-cta p b { color: var(--fg); font-weight: 400; }
.ghost-inner { text-align: center; padding: 30px; }
.ghost-inner pre { font: 14px/1.6 var(--mono); color: var(--acc3); text-align: left; margin-bottom: 18px; }
.ghost-inner p { font: 13px/1.6 var(--mono); color: var(--dim); }

/* terminal */
.terminal {
  max-width: 900px; background: rgba(2,6,10,0.85); border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(0,255,163,0.08);
}
.term-body { padding: 22px; font: 14px/1.9 var(--mono); min-height: 340px; }
.term-body .p { color: var(--acc); } .term-body .ok { color: #28c840; }
.term-body .d { color: var(--dim); } .term-body .h { color: var(--acc2); }

/* contact */
.contact { align-items: flex-start; }
.snippet { margin-top: 26px; font: 16px var(--mono); color: var(--fg); padding: 16px 18px; background: rgba(0,0,0,0.4); border-left: 2px solid var(--acc); overflow-x: auto; }
.snippet .k { color: var(--acc3); } .snippet .f { color: var(--acc2); } .snippet .s { color: var(--acc); }
.cform { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.cform[hidden] { display: none; }
/* keep browser autofill on-theme (Chrome paints autofilled inputs white) */
.cform input:-webkit-autofill, .cform input:-webkit-autofill:hover, .cform input:-webkit-autofill:focus, .cform textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px #03070c inset;
  box-shadow: 0 0 0 1000px #03070c inset;
  caret-color: var(--acc);
  transition: background-color 9999s ease-out 0s;
}
.crow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform label { display: flex; flex-direction: column; gap: 6px; }
.cform label span { font: 12px var(--mono); color: var(--acc3); }
.cform input, .cform textarea {
  font: 14px var(--mono); color: var(--fg); background: rgba(0,0,0,0.45);
  border: 1px solid var(--line); padding: 12px 14px; outline: none; resize: vertical; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.cform input::placeholder, .cform textarea::placeholder { color: rgba(0,255,163,0.35); }
.cform input:focus, .cform textarea:focus { border-color: var(--acc); box-shadow: 0 0 18px rgba(0,255,163,0.2); }
.cform .btn { align-self: flex-start; margin-top: 4px; cursor: pointer; font-family: var(--mono); }
.cform .btn:disabled { opacity: .6; cursor: wait; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cstatus { font: 13px var(--mono); min-height: 1.4em; }
.cstatus.ok { color: var(--acc); } .cstatus.err { color: #ff6b6b; }
@media (max-width: 900px) { .crow { grid-template-columns: 1fr; } .cform .btn { width: 100%; text-align: center; } }
/* booking */
.booking { max-width: 980px; background: rgba(2,6,10,0.85); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(0,200,255,0.08); }
.bk-body { padding: 24px; }
.bk-label { font: 13px var(--mono); color: var(--acc); margin-bottom: 14px; }
.bk-label span { color: var(--dim); }
.bk-empty { font: 13px var(--mono); color: var(--dim); }
.bk-dates { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 18px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.bk-date {
  flex: 0 0 auto; width: 78px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(0,0,0,0.4); border: 1px solid var(--line); color: var(--fg); cursor: pointer; font-family: var(--mono);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.bk-date small { font-size: 11px; color: var(--dim); text-transform: uppercase; }
.bk-date b { font-size: 24px; font-weight: 800; }
.bk-date i { font-style: normal; font-size: 10px; color: var(--acc2); margin-top: 4px; }
.bk-date:hover { border-color: var(--acc2); }
.bk-date.on { border-color: var(--acc); background: rgba(0,255,163,0.08); box-shadow: 0 0 20px rgba(0,255,163,0.2); }
.bk-date.on b { color: var(--acc); }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.bk-times .bk-label { grid-column: 1 / -1; margin-bottom: 4px; }
.bk-time { padding: 11px 6px; font: 13px var(--mono); background: transparent; color: var(--fg); border: 1px solid var(--line); cursor: pointer; transition: all .2s; }
.bk-time:hover { border-color: var(--acc); color: var(--acc); }
.bk-time.on { background: var(--acc); color: #001a10; border-color: var(--acc); font-weight: 600; }
.bk-form { margin-top: 24px; padding-top: 22px; border-top: 1px dashed var(--line); }
.bk-picked { font: 13px var(--mono); color: var(--dim); }
.bk-picked b { color: var(--acc2); font-weight: 400; }
#bk-status { margin-top: 14px; }
@media (max-width: 900px) { .bk-body { padding: 16px; } .bk-times { grid-template-columns: repeat(3, 1fr); } .bk-time { font-size: 12px; padding: 10px 2px; } }
footer { margin-top: 80px; font: 12px var(--mono); color: var(--dim); }

/* reveal */
.reveal { opacity: 0; transform: translateY(60px) rotateX(12deg); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.project.reveal.in { transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }

@media (max-width: 900px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .gutter { display: none; }
  .nav {
    left: 0; padding: 12px 16px;
    background: rgba(4,6,10,0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .logo { font-size: 17px; }
  .nav nav { display: none; }
  .panel { padding: 90px 16px 56px; min-height: auto; }
  .hero { min-height: 100vh; }
  h1 { font-size: clamp(38px, 12vw, 60px); letter-spacing: -1px; }
  h2 { font-size: clamp(30px, 9vw, 44px); margin-bottom: 24px; letter-spacing: -1px; }
  .lead { font-size: 16px; }
  .glass, .terminal, .contact .card { width: 100%; max-width: 100%; min-width: 0; }
  .glass { padding: 22px 18px; }
  .term-body { padding: 16px 14px; font-size: 12px; line-height: 1.7; min-height: 0; }
  .term-body div { white-space: pre-wrap; word-break: break-word; }
  .snippet { font-size: 13px; white-space: pre-wrap; word-break: break-word; }
  .btn { padding: 12px 16px; font-size: 13px; }
  .btn.big { width: 100%; text-align: center; }
  .cta-row .btn { flex: 1 1 100%; text-align: center; }
  .meta { padding: 22px 18px; }
  .meta h3 { font-size: 26px; }
  .screen { min-height: 220px; }
  .stats b { font-size: 36px; }
  .scroll-hint { bottom: 20px; }
  footer { margin-top: 48px; }
  .works, .project, .project.flip { grid-template-columns: 1fr; }
  .browser, .project.flip .browser { border-right: 0; border-left: 0; border-bottom: 1px solid var(--line); order: 0; }
  .stats { grid-template-columns: 1fr; }
  .typed { font-size: 12px; padding: 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}