:root {
  --bg: #05030d;
  --ink: #eef6fb;
  --muted: #9fb3c2;
  --cyan: #00e5ff;
  --pink: #ff5ec8;
  --line: rgba(255, 255, 255, .14);
  --glass: rgba(255, 255, 255, .06);
  --mono: ui-monospace, "SF Mono", Consolas, "Cascadia Code", monospace;
  --pad: clamp(20px, 7vw, 120px);
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(ellipse at 50% 120%, #1a0b3a 0%, var(--bg) 60%) fixed;
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
.mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }

#field { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40vmax 40vmax at 85% 20%, rgba(var(--glow, 0,229,255), .10), transparent 70%),
    radial-gradient(35vmax 35vmax at 10% 90%, rgba(255, 94, 200, .07), transparent 70%);
  transition: background .6s;
}
main { position: relative; z-index: 1; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  background: rgba(5, 3, 13, .5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.logo { font-family: var(--mono); text-decoration: none; color: var(--cyan); font-weight: 600; }
.links { display: flex; gap: 28px; }
.links a { text-decoration: none; color: var(--muted); font-size: 14px; transition: color .2s; }
.links a:hover { color: #fff; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--cyan), var(--pink)); }

/* ---------- common ---------- */
section { position: relative; }
.pad { padding: 0 var(--pad); }
.eyebrow { margin: 0 0 18px; color: var(--cyan); letter-spacing: .25em; font-size: 13px; }
.title { margin: 0 0 40px; font-size: clamp(34px, 5vw, 68px); line-height: 1.15; letter-spacing: -.01em; max-width: 12em; }
.line { display: block; overflow: hidden; padding-bottom: .06em; }
.line > span { display: inline-block; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 14px; font-size: 15px; text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn.primary { color: #05030d; font-weight: 650; background: linear-gradient(90deg, var(--cyan), var(--pink)); }
.btn.primary:hover { box-shadow: 0 0 28px rgba(0, 229, 255, .45); transform: translateY(-2px); }
.btn.ghost { color: #9ff4ff; border: 1px solid rgba(0, 229, 255, .35); }
.btn.is-disabled { opacity: .55; cursor: default; }
.btn.is-disabled:hover { transform: none; box-shadow: none; }

/* ---------- hero ---------- */
#hero { min-height: 100svh; display: flex; align-items: center; padding: 0 var(--pad); }
.kicker { margin: 0; color: var(--pink); letter-spacing: .2em; }
.name { margin: 18px 0 14px; font-size: clamp(64px, 13vw, 180px); line-height: 1; letter-spacing: -.02em; }
.glitch { position: relative; display: inline-block; text-shadow: 0 0 22px rgba(0, 229, 255, .5), 0 0 60px rgba(255, 94, 200, .3); }
.glitch::before, .glitch::after { content: attr(data-t); position: absolute; inset: 0; pointer-events: none; }
.glitch::before { color: var(--cyan); clip-path: inset(0 0 58% 0); animation: glitch 4s infinite steps(1); }
.glitch::after { color: var(--pink); clip-path: inset(58% 0 0 0); animation: glitch 4s infinite steps(1) reverse; }
@keyframes glitch { 0%, 92%, 100% { transform: none; } 94% { transform: translate(-5px, 1px); } 97% { transform: translate(5px, -2px); } }
.sub { margin: 0; font-size: clamp(16px, 2vw, 22px); color: var(--muted); }
.typed { color: #9ff4ff; }
.typed::after { content: "▋"; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.scroll-hint { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; font-size: 12px; letter-spacing: .3em; color: var(--muted); }
.scroll-hint::after { content: ""; display: block; width: 1px; height: 40px; margin: 10px auto 0; background: linear-gradient(var(--cyan), transparent); animation: drop 1.8s ease-in-out infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- strengths & stats ---------- */
#strengths, #stats { min-height: 100svh; display: flex; align-items: center; padding: 120px 0; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 820px; perspective: 900px; }
.card, .stat {
  padding: 24px; border-radius: 22px;
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.slot { perspective: 900px; }
.card { height: 100%; transform-style: preserve-3d; transition: border-color .3s; }
.card:hover { border-color: rgba(0, 229, 255, .45); }
.card .ic { font-size: 26px; color: var(--cyan); }
.card h3 { margin: 14px 0 8px; font-size: 20px; }
.card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 820px; }
.stat b {
  display: block; font-size: clamp(44px, 6vw, 80px); line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #fff, #b8f6ff 50%, #ffb3e6); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { display: block; margin-top: 12px; color: var(--muted); font-size: 14px; }

/* ---------- projects ---------- */
#projects { padding: 110px 0 60px; }
.projects-head { display: flex; justify-content: space-between; align-items: baseline; }
.counter { margin: 0; color: var(--muted); font-size: 14px; }
.counter b { color: #fff; font-size: 22px; }
.scenes { display: grid; gap: 80px; margin-top: 30px; }
.scene { position: relative; padding: 0 var(--pad); }
.stage { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.num {
  margin: 0; font: 900 clamp(80px, 12vw, 170px)/.9 var(--mono);
  color: transparent; -webkit-text-stroke: 1.5px var(--accent); text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 35%, transparent);
}
.scene h3 { margin: 18px 0 12px; font-size: clamp(26px, 3.4vw, 44px); }
.desc { margin: 0 0 20px; color: var(--muted); line-height: 1.8; max-width: 30em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font: 13px var(--mono); padding: 5px 11px; border-radius: 99px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.shot {
  aspect-ratio: 16 / 10; border-radius: 22px; padding: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, transparent), rgba(255, 255, 255, .03));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--accent) 55%, transparent);
}
.screen {
  position: relative; height: 100%; border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 55%),
    linear-gradient(160deg, #10101c, #07060f);
}
.screen i { position: absolute; left: 8%; height: 9%; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.screen i:nth-child(1) { top: 14%; width: 40%; background: color-mix(in srgb, var(--accent) 60%, transparent); }
.screen i:nth-child(2) { top: 32%; width: 62%; }
.screen i:nth-child(3) { top: 50%; width: 50%; }

/* desktop pinned scenes: enabled by JS only, so no-JS / reduced-motion stays readable */
#projects.is-pinned { height: 100vh; padding: 0; overflow: hidden; }
#projects.is-pinned .projects-head { position: absolute; top: 96px; left: 0; right: 0; z-index: 3; }
#projects.is-pinned .scenes { position: absolute; inset: 0; margin: 0; display: block; }
#projects.is-pinned .scene { position: absolute; inset: 0; display: flex; align-items: center; }
.scene .bg { display: none; }
#projects.is-pinned .scene .bg {
  display: block; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60vmax 60vmax at 70% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), rgba(5, 3, 13, .35);
}
#projects.is-pinned .num { color: transparent; -webkit-text-stroke: 0; text-shadow: none; }
#projects.is-pinned .stage { width: 100%; padding-top: 40px; }

/* ---------- contact ---------- */
#contact { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.big { margin: 0; font-size: clamp(52px, 10vw, 140px); line-height: 1.05; }
.big em { font-style: normal; color: var(--pink); text-shadow: 0 0 30px rgba(255, 94, 200, .6); }
footer { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; font-size: 12px; color: #6f7c8c; }
footer p { margin: 4px 0; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  .links { display: none; }
  .cards, .stat-row { grid-template-columns: 1fr; gap: 12px; }
  .stage { grid-template-columns: 1fr; }
  .shot { order: -1; }
  .scenes { gap: 64px; }
  #strengths, #stats { padding: 90px 0; }
  .stat { display: flex; align-items: baseline; gap: 16px; }
  .stat span { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}