:root {
  --ink: #f7f5ff;
  --muted: #b4afc9;
  --night: #060713;
  --night-soft: #0d1024;
  --violet: #9c7cff;
  --pink: #ff78c7;
  --cyan: #74e4f5;
  --line: rgba(255, 255, 255, 0.11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--pink); color: #15091d; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 92px;
  padding: 0 clamp(24px, 5vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; letter-spacing: .18em; }
.brand-star { color: var(--pink); font-size: 21px; animation: twinkle 2.8s infinite; }
.nav-links { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.nav-links > a:not(.nav-pill) { position: relative; color: rgba(255,255,255,.78); }
.nav-links > a:not(.nav-pill)::after { content:""; position:absolute; left:0; bottom:-8px; width:0; height:1px; background:var(--pink); transition:.25s ease; }
.nav-links > a:hover::after { width:100%; }
.nav-pill { padding: 12px 18px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; transition:.25s ease; }
.nav-pill:hover { background: #fff; color: #101225; transform: translateY(-2px); }
.menu-button { display:none; background:none; border:0; padding:12px; color:white; }
.menu-button span { display:block; width:22px; height:1px; background:currentColor; margin:6px 0; }

.hero {
  position: relative;
  min-height: 780px;
  height: 100vh;
  max-height: 1040px;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 112px clamp(24px, 8vw, 132px) 52px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -4;
  background-image: url("./qihe-hero.png");
  background-size: cover;
  background-position: center;
  filter: saturate(.92) contrast(1.04);
  transform: scale(1.01);
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background: linear-gradient(90deg, rgba(4,6,19,.96) 0%, rgba(4,6,19,.78) 32%, rgba(4,6,19,.16) 63%, rgba(4,6,19,.18) 100%),
    linear-gradient(0deg, rgba(6,7,19,.74), transparent 40%);
}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.18;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 110px 110px;
  mask-image: linear-gradient(90deg,#000,transparent 62%);
}
.hero-glow { position:absolute; left:28%; top:35%; width:280px; height:280px; border-radius:50%; background:rgba(115,65,255,.16); filter:blur(70px); z-index:-1; }
.orbit { position:absolute; border:1px solid rgba(188,167,255,.14); border-radius:50%; pointer-events:none; }
.orbit-one { width:430px; height:430px; left:-220px; top:26%; }
.orbit-two { width:86px; height:86px; left:5.5%; top:22%; border-color:rgba(255,120,199,.28); }
.hero-copy { position:relative; z-index:2; width:min(680px,58vw); animation: rise .9s .1s both; }
.eyebrow, .section-kicker { display:flex; align-items:center; gap:12px; color:#c6b9ee; font-size:11px; font-weight:800; letter-spacing:.22em; }
.eyebrow > span { width:36px; height:1px; background:var(--pink); box-shadow:0 0 12px var(--pink); }
.hero h1 { margin:30px 0 24px; font-family: Georgia, "Songti SC", serif; font-size:clamp(48px,6vw,92px); line-height:1.13; font-weight:500; letter-spacing:-.045em; }
.hero h1 em, .works h2 em, .contact h2 em { font-style:normal; color:transparent; background:linear-gradient(100deg,#ba9cff,#ff87cc 58%,#9fe9ff); background-clip:text; -webkit-background-clip:text; }
.hero-copy > p { color:#c2bfd0; font-family:"Songti SC", serif; font-size:15px; line-height:2; letter-spacing:.06em; }
.hero-actions { display:flex; align-items:center; gap:32px; margin-top:42px; }
.primary-button { min-width:190px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:16px 20px; border-radius:5px; background:linear-gradient(115deg,#7c63df,#c064b4); box-shadow:0 12px 32px rgba(107,74,205,.28); font-size:13px; font-weight:800; transition:.3s ease; }
.primary-button:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(143,91,214,.4); }
.text-link { color:#d8d4e3; font-size:13px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.22); padding-bottom:6px; }
.hero-note { position:absolute; left:clamp(24px,5vw,80px); bottom:38px; display:flex; gap:15px; align-items:center; transform-origin:left; font-size:9px; letter-spacing:.2em; color:#8b88a0; }
.note-line { width:42px; height:1px; background:#8b88a0; }
.hero-index { position:absolute; right:clamp(24px,5vw,80px); bottom:34px; display:flex; align-items:baseline; gap:6px; }
.hero-index strong { font-family:Georgia,serif; font-size:34px; font-weight:400; }
.hero-index span { color:#858296; font-size:11px; }

.section-shell { max-width:1240px; margin:0 auto; padding:128px 40px; }
.section-kicker span { display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(156,124,255,.45); border-radius:50%; color:var(--violet); letter-spacing:0; }
.about { position:relative; }
.about::before { content:"✦"; position:absolute; top:19%; right:3%; font-size:80px; color:rgba(156,124,255,.06); }
.about-grid { display:grid; grid-template-columns:1.15fr 1.15fr .7fr; gap:clamp(40px,6vw,88px); align-items:start; margin-top:44px; }
.handwritten { margin:0 0 6px; color:var(--pink); font-family:"Segoe Script","Comic Sans MS",cursive; font-size:18px; transform:rotate(-3deg); }
.about-title h2, .works h2, .contact h2 { margin:0; font-family:Georgia,"Songti SC",serif; font-weight:500; line-height:1.25; letter-spacing:-.035em; }
.about-title h2 { font-size:clamp(38px,4.4vw,64px); }
.about-title h2 span { color:#b2a0ee; }
.about-copy { padding-top:22px; color:#aba8ba; line-height:2; font-family:"Songti SC",serif; font-size:14px; }
.about-copy p { margin:0 0 20px; }
.interest-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.interest-list span { padding:7px 11px; border:1px solid var(--line); border-radius:999px; color:#c6c3cf; font-family:system-ui,sans-serif; font-size:10px; }
.status-card { position:relative; overflow:hidden; padding:24px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:linear-gradient(145deg,rgba(30,31,62,.72),rgba(12,14,32,.76)); box-shadow:0 24px 60px rgba(0,0,0,.26); }
.status-card::after { content:""; position:absolute; width:90px; height:90px; right:-35px; top:-35px; border-radius:50%; background:rgba(255,120,199,.14); filter:blur(15px); }
.status-top { color:#9bffda; font-size:9px; letter-spacing:.18em; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#71f7c7; box-shadow:0 0 10px #71f7c7; margin-right:7px; }
.status-face { margin:34px 0 24px; color:#c3adff; font-family:monospace; font-size:32px; letter-spacing:.1em; }
.status-card strong { font-family:"Songti SC",serif; font-size:15px; }
.status-card p { margin:8px 0 12px; color:#858298; font-size:10px; }
.status-bar { height:4px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden; }
.status-bar span { display:block; width:87%; height:100%; background:linear-gradient(90deg,var(--violet),var(--pink)); box-shadow:0 0 12px var(--pink); }

.works { max-width:1320px; padding-top:80px; }
.works-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:48px; }
.works h2 { margin-top:25px; font-size:clamp(38px,4vw,62px); }
.works-heading > p { width:250px; color:#8e8a9e; font-family:"Songti SC",serif; line-height:1.8; font-size:13px; }
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.work-card { padding:14px 14px 26px; border:1px solid var(--line); border-radius:12px; background:#0a0c1a; transition:.35s ease; }
.work-card:hover { transform:translateY(-8px); border-color:rgba(255,255,255,.25); box-shadow:0 24px 60px rgba(0,0,0,.35); }
.work-art { position:relative; height:270px; overflow:hidden; border-radius:7px; background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.13),transparent 22%), linear-gradient(145deg,#36245c,#151531); }
.work-card.pink .work-art { background:radial-gradient(circle at 60% 25%,rgba(255,255,255,.18),transparent 18%),linear-gradient(145deg,#5e294f,#1f162b); }
.work-card.cyan .work-art { background:radial-gradient(circle at 60% 25%,rgba(118,230,245,.18),transparent 20%),linear-gradient(145deg,#163e55,#161630); }
.work-art::before { content:""; position:absolute; inset:0; opacity:.15; background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(135deg,#000,transparent 75%); }
.work-number { position:absolute; left:18px; top:16px; color:rgba(255,255,255,.45); font-size:10px; letter-spacing:.15em; }
.work-mark { position:absolute; inset:0; display:grid; place-items:center; color:#c5afff; font-family:Georgia,"Songti SC",serif; font-size:84px; text-shadow:0 0 40px currentColor; transform:rotate(-7deg); }
.pink .work-mark { color:#ff9ccf; }
.cyan .work-mark { color:#8ceafa; }
.work-orbit { position:absolute; width:190px; height:190px; border:1px solid rgba(255,255,255,.18); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }
.work-orbit::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; right:14px; top:25px; background:white; box-shadow:0 0 14px white; }
.work-meta { display:flex; justify-content:space-between; margin:22px 4px 12px; color:#777589; font-size:9px; letter-spacing:.17em; }
.work-card h3 { margin:0 4px; font-family:"Songti SC",serif; font-size:24px; letter-spacing:.08em; }
.work-card > p { min-height:54px; margin:12px 4px 20px; color:#8f8c9e; font-family:"Songti SC",serif; font-size:12px; line-height:1.8; }
.work-card > a { margin:0 4px; color:#d4cfdf; font-size:11px; font-weight:700; }
.work-card > a span { float:right; }

.contact { position:relative; overflow:hidden; margin-top:80px; padding:140px 24px 125px; text-align:center; background:radial-gradient(circle at 50% 40%,rgba(119,72,185,.28),transparent 34%),linear-gradient(180deg,#0b0d20,#070816); border-top:1px solid var(--line); }
.contact::before,.contact::after { content:""; position:absolute; width:320px; height:320px; border:1px solid rgba(156,124,255,.08); border-radius:50%; top:30%; }
.contact::before { left:-180px; }
.contact::after { right:-180px; }
.contact-stars { color:#9e8de8; letter-spacing:.8em; opacity:.55; margin-bottom:24px; }
.contact .handwritten { display:inline-block; }
.contact h2 { margin:16px 0 20px; font-size:clamp(44px,5.5vw,78px); }
.contact-copy { margin:0 auto 35px; color:#918da1; font-family:"Songti SC",serif; font-size:13px; }
.email-button { display:grid; grid-template-columns:40px 1fr auto; gap:14px; align-items:center; min-width:min(440px,90vw); margin:0 auto; padding:13px 17px; border:1px solid rgba(255,255,255,.16); border-radius:7px; color:white; background:rgba(255,255,255,.06); cursor:pointer; transition:.25s ease; }
.email-button:hover { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.3); transform:translateY(-2px); }
.mail-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:5px; background:linear-gradient(135deg,#7e68d8,#ba619f); }
.email-button span:nth-child(2) { text-align:left; font-size:12px; letter-spacing:.04em; }
.email-button span:last-child { color:#9995a8; font-size:9px; letter-spacing:.12em; }
.socials { display:flex; justify-content:center; gap:28px; margin-top:34px; color:#777485; font-size:9px; letter-spacing:.16em; }
.socials a:hover { color:var(--pink); }
footer { min-height:88px; padding:0 clamp(24px,5vw,80px); display:flex; justify-content:space-between; align-items:center; color:#625f72; background:#060713; border-top:1px solid rgba(255,255,255,.06); font-size:8px; letter-spacing:.18em; }
footer b { color:var(--pink); }
footer a:hover { color:#d9d5e3; }

@keyframes rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes twinkle { 0%,100% { transform:scale(1) rotate(0); opacity:.7; } 50% { transform:scale(1.3) rotate(35deg); opacity:1; } }

@media (max-width: 900px) {
  .hero { min-height:720px; align-items:flex-end; padding-bottom:120px; }
  .hero-bg { background-position:63% center; }
  .hero::before { background:linear-gradient(0deg,rgba(4,6,19,.97) 8%,rgba(4,6,19,.68) 63%,rgba(4,6,19,.15)),linear-gradient(90deg,rgba(4,6,19,.7),transparent); }
  .hero-copy { width:100%; }
  .hero h1 { font-size:clamp(43px,8.5vw,66px); }
  .about-grid { grid-template-columns:1fr 1fr; }
  .status-card { grid-column:1 / -1; max-width:360px; }
  .work-grid { grid-template-columns:repeat(2,1fr); }
  .work-card:last-child { grid-column:1 / -1; width:calc(50% - 11px); }
}

@media (max-width: 680px) {
  .site-header { height:72px; padding:0 20px; }
  .menu-button { display:block; z-index:3; }
  .nav-links { display:none; position:absolute; top:72px; left:14px; right:14px; padding:24px; flex-direction:column; align-items:stretch; gap:22px; border:1px solid var(--line); border-radius:12px; background:rgba(10,11,28,.96); backdrop-filter:blur(16px); box-shadow:0 18px 50px rgba(0,0,0,.4); }
  .nav-links.is-open { display:flex; }
  .nav-pill { text-align:center; }
  .hero { min-height:760px; padding:96px 22px 112px; }
  .hero-bg { background-position:70% center; }
  .hero h1 { margin-top:22px; font-size:42px; line-height:1.19; }
  .hero-copy > p br { display:none; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:20px; margin-top:30px; }
  .primary-button { min-width:220px; }
  .hero-note { left:22px; bottom:31px; }
  .hero-index { right:22px; bottom:24px; }
  .section-shell { padding:88px 22px; }
  .about-grid { grid-template-columns:1fr; gap:32px; }
  .status-card { grid-column:auto; }
  .works-heading { align-items:start; flex-direction:column; gap:25px; }
  .works-heading > p { width:auto; }
  .work-grid { grid-template-columns:1fr; }
  .work-card:last-child { grid-column:auto; width:auto; }
  .work-art { height:250px; }
  .contact { margin-top:20px; padding:100px 20px 90px; }
  .contact h2 { font-size:43px; }
  .email-button { min-width:0; width:100%; }
  footer { padding:28px 22px; align-items:flex-start; flex-direction:column; gap:14px; }
}

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