@font-face {
  font-family: "Syne";
  src: url("assets/fonts/syne-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --bg: #111216;
  --panel: #17181d;
  --panel-2: #202127;
  --ink: #f8f8f5;
  --muted: #92949c;
  --line: rgba(255,255,255,.11);
  --lime: #b8ff37;
  --pad: clamp(20px, 4.5vw, 72px);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--muted); background: var(--bg); font-family: Syne, "Microsoft YaHei", "PingFang SC", Arial, sans-serif; font-size: 16px; line-height: 1.7; overflow-x: hidden; }
body.loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { color: inherit; font: inherit; }
::selection { color: #111216; background: var(--lime); }
.container { width: min(var(--container), calc(100% - var(--pad) * 2)); margin: 0 auto; }
.section { padding: clamp(100px, 12vw, 170px) 0; border-top: 1px solid var(--line); }
section[id] { scroll-margin-top: 92px; }
.section-kicker, .eyebrow { margin: 0 0 20px; color: var(--lime); font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
h1, h2, h3, h4, p { margin-top: 0; }
h2 { margin-bottom: 0; color: var(--ink); font-size: clamp(44px, 7vw, 94px); line-height: .94; letter-spacing: -.055em; }
h2 em { color: var(--lime); font-style: normal; }
.cn-note { display: block; margin-top: 9px; color: #777a82; font-family: inherit; font-size: .78em; line-height: 1.65; font-weight: 400; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.75,.25,1); }
.reveal.on { opacity: 1; transform: none; }

.preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg); transition: opacity .5s, visibility .5s; }
.preloader span { width: 58px; height: 58px; border: 2px solid var(--line); border-top-color: var(--lime); border-radius: 50%; animation: spin 1s linear infinite; }
.preloader.done { opacity: 0; visibility: hidden; }
@keyframes spin { to { transform: rotate(360deg); } }
.page-progress { position: fixed; z-index: 70; inset: 0 0 auto; height: 2px; }
.page-progress i { display: block; width: 0; height: 100%; background: var(--lime); }

.header { position: fixed; z-index: 60; inset: 0 0 auto; padding: 24px 0; transition: padding .25s, background .25s, border-color .25s; border-bottom: 1px solid transparent; }
.header.scrolled { padding: 15px 0; background: rgba(17,18,22,.9); border-color: var(--line); backdrop-filter: blur(15px); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; }
.logo { width: fit-content; color: var(--ink); font-size: 25px; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.logo sup { color: var(--lime); font-size: 7px; vertical-align: top; margin-left: 3px; }
.desktop-nav { display: flex; gap: 28px; }
.desktop-nav a { color: #adaeb3; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; transition: color .2s; }
.desktop-nav a:hover { color: var(--ink); }
.header-cta { justify-self: end; display: flex; gap: 10px; align-items: center; color: var(--ink); font-size: 12px; font-weight: 700; }
.header-cta span { color: var(--lime); }
.nav-toggle { display: none; justify-self: end; width: 45px; height: 45px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); place-content: center; gap: 6px; }
.nav-toggle i { display: block; width: 20px; height: 2px; background: var(--bg); transition: transform .25s; }
.nav-toggle.active i:first-child { transform: rotate(45deg) translate(3px,3px); }
.nav-toggle.active i:last-child { transform: rotate(-45deg) translate(3px,-3px); }
.mobile-nav { position: fixed; inset: 75px 0 auto; z-index: 55; display: none; padding: 30px var(--pad) 38px; background: var(--ink); color: var(--bg); transform: translateY(-120%); transition: transform .35s ease; }
.mobile-nav.open { transform: none; }
.mobile-nav a { padding: 12px 0; font-size: 26px; font-weight: 700; border-bottom: 1px solid rgba(0,0,0,.15); }

.hero { min-height: 100svh; padding-top: 135px; display: flex; align-items: center; overflow: hidden; border: 0; }
.hero-grid { position: relative; min-height: 700px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.hero-portrait { position: relative; z-index: 1; width: min(610px, 47vw); aspect-ratio: 1; }
.portrait-frame { position: absolute; inset: 8%; overflow: hidden; border-radius: 52% 48% 59% 41% / 53% 40% 60% 47%; animation: blob 26s linear infinite; box-shadow: 0 35px 80px rgba(0,0,0,.45); }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
@keyframes blob { 0%,100% { border-radius: 52% 48% 59% 41% / 53% 40% 60% 47%; } 33% { border-radius: 39% 61% 47% 53% / 63% 39% 61% 37%; } 66% { border-radius: 62% 38% 35% 65% / 43% 61% 39% 57%; } }
.portrait-orbit { position: absolute; inset: 0; border: 1px solid rgba(184,255,55,.23); border-radius: 50%; animation: spin 18s linear infinite; }
.portrait-orbit:after { content: ""; position: absolute; left: 12%; top: 11%; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); }
.portrait-orbit i { position: absolute; inset: 7%; border: 1px solid var(--line); border-radius: 50%; }
.portrait-orbit i:last-child { inset: 20%; border-color: rgba(184,255,55,.15); }
.hero-portrait > p { position: absolute; margin: 0; left: 0; bottom: 0; color: var(--lime); font-size: 9px; letter-spacing: .15em; }
.hero-copy { position: relative; z-index: 2; margin-left: -8%; }
.hero h1 { margin: 0; color: var(--ink); font-size: clamp(78px, 11vw, 158px); line-height: .72; letter-spacing: -.075em; }
.hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(248,248,245,.52); }
.hero-subtitle { margin: 34px 0 17px; color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; }
.hero-intro { max-width: 620px; margin: 0; color: #b0b2b8; font-size: clamp(16px, 1.5vw, 20px); }
.round-link { margin-top: 37px; display: flex; align-items: center; gap: 20px; width: fit-content; color: var(--ink); font-size: 12px; font-weight: 700; }
.round-link b { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--lime); transition: .25s; }
.round-link:hover b { background: var(--lime); color: var(--bg); border-color: var(--lime); }
.hero-stats { position: absolute; z-index: 3; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); width: min(620px, 55%); border-top: 1px solid var(--line); }
.hero-stats div { padding: 20px 20px 0; border-left: 1px solid var(--line); }
.hero-stats strong { display: block; color: var(--lime); font-size: clamp(23px, 3vw, 40px); line-height: 1; }
.hero-stats span { display: block; margin-top: 10px; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }

.section-head { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(55px, 10vw, 150px); align-items: end; margin-bottom: 75px; }
.section-head > div:last-child p { margin: 0; color: #b3b4b9; font-size: 15px; }
.skill-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.skill-card { min-height: 370px; padding: 27px; display: flex; flex-direction: column; background: var(--ink); color: var(--bg); transition: background .3s, color .3s; }
.skill-card:hover { background: var(--panel-2); color: var(--ink); }
.skill-card > span { color: #62646b; font-size: 10px; font-weight: 700; }
.skill-icon { margin: 38px 0 auto; color: var(--lime); font-size: 58px; font-weight: 400; }
.skill-card h3 { margin-bottom: 15px; font-size: 27px; line-height: 1.1; }
.skill-card p { margin-bottom: 14px; font-size: 13px; line-height: 1.65; }
.skill-card small { display: block; color: #74767d; font-family: inherit; font-size: 10px; line-height: 1.5; }

.backend { position: relative; overflow: hidden; background: #0c0d10; }
.backend-grid { position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(184,255,55,.13) 1px,transparent 1px), linear-gradient(90deg,rgba(184,255,55,.13) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg,black,transparent); }
.backend .container { position: relative; }
.backend-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 20px; align-items: center; padding: 27px; border: 1px solid rgba(184,255,55,.27); background: rgba(184,255,55,.035); }
.backend-flow div { min-width: 0; }
.backend-flow span { color: var(--lime); font-size: 9px; }
.backend-flow strong { display: block; color: var(--ink); font-size: 15px; letter-spacing: .08em; }
.backend-flow small { display: block; overflow: hidden; color: #6f7278; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.backend-flow > i { color: var(--lime); font-style: normal; }
.backend-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 35px; background: var(--line); border: 1px solid var(--line); }
.backend-card { min-height: 350px; padding: 32px; display: flex; flex-direction: column; background: var(--panel); }
.backend-card > div { display: flex; justify-content: space-between; }
.backend-card b { color: #666870; font-size: 9px; letter-spacing: .12em; }
.status { padding: 6px 8px; border: 1px solid currentColor; border-radius: 20px; font-size: 8px; letter-spacing: .12em; }
.status.practiced { color: var(--lime); }
.status.focus { color: #ad86ff; }
.backend-card h3 { margin: auto 0 20px; color: var(--ink); font-size: clamp(30px, 4vw, 52px); line-height: 1; letter-spacing: -.04em; }
.backend-card p { max-width: 590px; margin: 0 0 13px; color: #b5b6bb; font-size: 14px; }
.backend-card small { display: block; color: #72747b; font-family: inherit; font-size: 11px; }
.backend-card-focus { background: #161121; }

.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px 30px; }
.work-card:nth-child(even) { margin-top: 80px; }
.work-card figure { position: relative; margin: 0 0 27px; aspect-ratio: 4/3; overflow: hidden; background: var(--panel); }
.work-card figure:after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.08); pointer-events: none; }
.work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease, opacity .4s; }
.work-card:hover img { transform: scale(1.025); opacity: .55; }
.work-card > div { padding-right: 6%; }
.card-label { margin-bottom: 10px; color: var(--lime); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.card-label.direction { color: #9f7be9; }
.work-card h3 { margin-bottom: 13px; color: var(--ink); font-size: clamp(29px, 3.5vw, 49px); line-height: 1.1; }
.work-card p { margin-bottom: 10px; font-size: 13px; }
.work-card small { color: #6f7178; font-family: inherit; font-size: 11px; }
.work-card.verified figure { outline: 1px solid var(--lime); outline-offset: 5px; }
.saas-card { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr .85fr; margin-top: 0 !important; border: 1px solid var(--line); background: var(--panel); }
.saas-card figure { min-height: 460px; margin: 0; outline: 0 !important; }
.saas-card > div { align-self: end; padding: 44px; }
.saas-card .card-label { color: var(--lime); }
.saas-visual { display: grid; place-items: center; padding: clamp(28px,5vw,65px); background: radial-gradient(circle at 68% 28%,rgba(184,255,55,.16),transparent 35%),#0b0d10; }
.saas-window { width: 100%; border: 1px solid rgba(184,255,55,.33); background: #12151a; box-shadow: 28px 28px 0 rgba(184,255,55,.045); }
.saas-top { height: 42px; padding: 0 14px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--line); }
.saas-top span { width: 7px; height: 7px; border-radius: 50%; background: #444850; }
.saas-top span:first-child { background: var(--lime); }
.saas-top b { margin-left: auto; color: #6f747c; font-size: 7px; letter-spacing: .11em; }
.saas-layout { min-height: 265px; display: grid; grid-template-columns: 72px 1fr; }
.saas-layout aside { padding: 22px 16px; border-right: 1px solid var(--line); }
.saas-layout aside i { display: block; width: 100%; height: 5px; margin-bottom: 18px; border-radius: 5px; background: #333840; }
.saas-main { padding: 22px; }
.saas-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.saas-metrics i { height: 45px; border: 1px solid var(--line); background: linear-gradient(135deg,rgba(184,255,55,.12),transparent); }
.saas-chart { position: relative; height: 115px; margin-top: 13px; overflow: hidden; border: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 28px 28px; }
.saas-chart span { position: absolute; left: 4%; right: 4%; bottom: 20%; height: 55%; border-top: 2px solid var(--lime); transform: skewY(-9deg); filter: drop-shadow(0 0 8px rgba(184,255,55,.5)); }
.saas-rows { margin-top: 14px; }
.saas-rows i { display: block; height: 6px; margin-top: 8px; background: linear-gradient(90deg,#363a42 65%,transparent 65%); }

.awards { background: #0c0d10; }
.awards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.award-card { min-height: 460px; border: 1px solid var(--line); background: radial-gradient(circle at 82% 18%,rgba(184,255,55,.12),transparent 30%),var(--panel); }
.award-card > div { height: 100%; padding: 34px; display: flex; flex-direction: column; }
.award-card span { color: var(--lime); font-size: 8px; letter-spacing: .12em; }
.award-number { margin: 25px 0 auto; color: transparent; -webkit-text-stroke: 1px rgba(184,255,55,.34); font-size: clamp(100px,14vw,190px); line-height: .72; letter-spacing: -.08em; text-align: right; }
.award-card h3 { margin: auto 0 20px; color: var(--ink); font-size: clamp(30px,3.5vw,48px); line-height: .98; letter-spacing: -.04em; }
.award-card p { margin-bottom: 18px; font-size: 12px; line-height: 1.65; }
.award-card strong { color: var(--ink); font-size: 15px; }
.award-card small { display: block; margin-top: 10px; color: #73767d; font-family: inherit; font-size: 10px; line-height: 1.6; }

.experience { background: var(--panel); }
.experience-title { display: grid; grid-template-columns: 1fr 350px; gap: 50px; align-items: end; margin-bottom: 70px; }
.experience-title > p { margin: 0; }
.expo { position: relative; margin: 0 0 70px; height: 430px; overflow: hidden; }
.expo:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(17,18,22,.62),transparent 50%); }
.expo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); }
.expo figcaption { position: absolute; z-index: 2; left: 20px; bottom: 17px; color: var(--lime); font-size: 9px; letter-spacing: .13em; }
.experience-list { border-bottom: 1px solid var(--line); }
.experience-item { display: grid; grid-template-columns: 370px 1fr; gap: 70px; padding: 39px 0; border-top: 1px solid var(--line); }
.experience-item > div:first-child { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: start; }
.experience-item strong { color: var(--lime); font-size: clamp(34px, 5vw, 64px); line-height: .9; letter-spacing: -.04em; }
.experience-item > div:first-child span { padding-top: 7px; font-size: 8px; letter-spacing: .1em; }
.experience-item > div:last-child > p:first-child { margin: 0 0 8px; color: var(--lime); font-size: 9px; }
.experience-item h3 { margin-bottom: 3px; color: var(--ink); font-size: 27px; line-height: 1.2; }
.experience-item h4 { margin-bottom: 15px; color: #b4b6bc; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.experience-item > div:last-child > p { margin-bottom: 10px; font-size: 13px; }
.experience-item small { color: #72747b; font-family: inherit; font-size: 11px; }

.contact { min-height: 90svh; display: flex; align-items: center; }
.contact-heading { display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: end; }
.contact-heading > p { margin: 0; }
.contact-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 100px; background: var(--line); border: 1px solid var(--line); }
.contact-links a { min-width: 0; padding: 30px; display: grid; grid-template-columns: 1fr auto; background: var(--panel); transition: background .25s, color .25s; }
.contact-links a:hover { color: var(--bg); background: var(--lime); }
.contact-links span { grid-column: 1/-1; margin-bottom: 35px; color: var(--lime); font-size: 9px; letter-spacing: .14em; }
.contact-links a:hover span { color: #344700; }
.contact-links strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: clamp(21px, 3vw, 38px); line-height: 1; white-space: nowrap; text-overflow: ellipsis; }
.contact-links a:hover strong { color: var(--bg); }
.contact-links i { color: var(--lime); font-size: 24px; font-style: normal; }
.contact-links a:hover i { color: var(--bg); }
.contact-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; margin-top: 90px; padding-top: 22px; border-top: 1px solid var(--line); }
.contact-footer p { margin: 0; color: var(--ink); font-size: 11px; }
.contact-footer p:nth-child(2) { justify-self: center; text-align: center; }
.contact-footer span { color: #6e7077; font-size: 8px; letter-spacing: .1em; }
.contact-footer a { justify-self: end; color: var(--lime); font-size: 9px; letter-spacing: .1em; }

@media (max-width: 980px) {
  .desktop-nav, .header-cta { display: none; }
  .header-inner { grid-template-columns: 1fr auto; }
  .nav-toggle, .mobile-nav { display: grid; }
  .hero { padding-top: 115px; }
  .hero-grid { min-height: 850px; }
  .hero-portrait { position: absolute; top: 15px; left: -12%; width: 68vw; opacity: .86; }
  .hero-copy { grid-column: 1/-1; margin: 230px 0 130px auto; width: 66%; }
  .hero-stats { width: 72%; }
  .skill-grid { grid-template-columns: 1fr 1fr; }
  .section-head { grid-template-columns: 1fr; }
  .backend-flow { grid-template-columns: 1fr 1fr; }
  .backend-flow > i { display: none; }
  .backend-flow div { padding: 10px; border-bottom: 1px solid var(--line); }
  .experience-item { grid-template-columns: 300px 1fr; gap: 45px; }
}

@media (max-width: 650px) {
  .section { padding: 90px 0; }
  .header { padding: 15px 0; }
  .mobile-nav { inset-block-start: 75px; }
  .hero { min-height: 830px; }
  .hero-grid { min-height: 760px; align-items: end; }
  .hero-portrait { top: 10px; left: -26%; width: 112vw; }
  .hero-portrait > p { left: 23%; }
  .portrait-frame { inset: 13%; }
  .hero-copy { width: 100%; margin: 285px 0 145px; }
  .hero h1 { font-size: 24vw; }
  .hero-intro { font-size: 14px; }
  .hero-stats { left: 0; right: 0; width: 100%; }
  .hero-stats div { padding: 14px 9px 0; }
  .hero-stats strong { font-size: 22px; }
  .hero-stats span { font-size: 6px; }
  .section-head { gap: 30px; margin-bottom: 50px; }
  .skill-grid { grid-template-columns: 1fr; }
  .skill-card { min-height: 310px; }
  .backend-flow { grid-template-columns: 1fr; }
  .backend-cards { grid-template-columns: 1fr; }
  .backend-card { min-height: 330px; padding: 25px; }
  .work-grid { grid-template-columns: 1fr; gap: 55px; }
  .work-card:nth-child(even) { margin-top: 0; }
  .saas-card { grid-template-columns: 1fr; }
  .saas-card figure { min-height: 350px; }
  .saas-card > div { padding: 25px; }
  .saas-layout { grid-template-columns: 52px 1fr; }
  .awards-grid { grid-template-columns: 1fr; }
  .award-card { min-height: 420px; }
  .experience-title, .contact-heading { grid-template-columns: 1fr; gap: 30px; }
  .expo { height: 260px; }
  .experience-item { grid-template-columns: 1fr; gap: 25px; }
  .experience-item > div:first-child { grid-template-columns: 1fr 1fr; }
  .contact-links { grid-template-columns: 1fr; margin-top: 65px; }
  .contact-links a { padding: 25px 20px; }
  .contact-links strong { font-size: 21px; }
  .contact-footer { grid-template-columns: 1fr; gap: 20px; }
  .contact-footer p:nth-child(2), .contact-footer a { justify-self: start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}