:root{
  --pink:#FF6B9D; --orange:#FFA06B; --purple:#A06BFF; --blue:#6BC5FF; --teal:#5DCAA5;
  --grad:linear-gradient(135deg,#FF6B9D,#FFA06B,#A06BFF,#6BC5FF);
  --ink:#1f2233; --muted:#5b5f73; --bg:#fff7fb; --card:#ffffff;
  --radius:18px; --shadow:0 10px 30px rgba(160,107,255,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.7;
}
a{color:inherit;text-decoration:none}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;backdrop-filter:blur(12px);background:rgba(255,247,251,.7);border-bottom:1px solid rgba(160,107,255,.1)}
.nav__logo{font-weight:700;font-size:20px}
.nav__logo span{color:var(--pink)}
.nav__links{display:flex;gap:26px;list-style:none}
.nav__links a{font-weight:500}
.nav__links a:hover{color:var(--purple)}
.nav__toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:var(--ink)}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.hero__bg{position:absolute;inset:0;background:url("assets/hero.png") center/cover no-repeat;opacity:.55}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,247,251,.2),rgba(255,247,251,.85))}
.hero__inner{position:relative;z-index:2;max-width:680px;padding:0 20px}
.hero__avatar{width:140px;height:140px;margin:0 auto 22px;border-radius:50%;padding:4px;background:var(--grad);box-shadow:var(--shadow)}
.hero__avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#fff}
.hero__title{font-size:clamp(30px,6vw,52px);font-weight:700;line-height:1.2}
.hero__subtitle{margin-top:10px;font-size:clamp(15px,2.4vw,19px);color:var(--muted);font-weight:500}
.hero__desc{margin:18px auto 0;max-width:520px;color:var(--muted)}
.hero__cta{margin-top:28px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero__scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:30px;color:var(--purple);z-index:2;animation:bob 1.8s infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* buttons */
.btn{padding:12px 26px;border-radius:999px;font-weight:600;transition:transform .2s,box-shadow .2s}
.btn--primary{background:var(--grad);color:#fff;box-shadow:var(--shadow)}
.btn--primary:hover{transform:translateY(-2px)}
.btn--ghost{border:2px solid var(--purple);color:var(--purple)}
.btn--ghost:hover{background:var(--purple);color:#fff}

/* sections */
.section{max-width:1040px;margin:0 auto;padding:90px 24px}
.section--alt{background:linear-gradient(180deg,#fff,rgba(160,107,255,.05))}
.section__title{font-size:clamp(24px,4vw,36px);font-weight:700;text-align:center;margin-bottom:40px}
.section__title::after{content:"";display:block;width:60px;height:4px;border-radius:4px;background:var(--grad);margin:14px auto 0}

/* about */
.about{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:start}
.about__text p{margin-bottom:14px;color:#374151}
.about__card{background:var(--card);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.about__card h3{margin-bottom:14px;font-size:19px}
.skills{list-style:none;display:flex;flex-direction:column;gap:10px}
.skills li{display:flex;gap:10px;align-items:center;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.tag{background:rgba(160,107,255,.1);color:var(--purple);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600}

/* projects */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(160,107,255,.2)}
.card__cover{height:130px;background:linear-gradient(135deg,var(--c1),var(--c2))}
.card__body{padding:20px}
.card__body h3{font-size:18px;margin-bottom:8px}
.card__body p{color:var(--muted);font-size:14px}
.card__tags{margin-top:14px;display:flex;gap:8px}
.card__tags span{background:rgba(107,197,255,.15);color:#2c7fb8;padding:4px 10px;border-radius:999px;font-size:12px}

/* contact */
.contact{text-align:center;max-width:560px;margin:0 auto;background:var(--card);border-radius:var(--radius);padding:40px 26px;box-shadow:var(--shadow)}
.contact__lead{color:var(--muted);margin-bottom:18px}
.contact__mail{display:inline-block;font-size:22px;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact__socials{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.chip{border:2px solid rgba(160,107,255,.3);color:var(--purple);padding:8px 18px;border-radius:999px;font-weight:600;transition:.2s}
.chip:hover{background:var(--purple);color:#fff;border-color:var(--purple)}

/* footer */
.footer{text-align:center;padding:30px;color:var(--muted);font-size:14px}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.show{opacity:1;transform:none}

/* responsive */
@media(max-width:860px){
  .about{grid-template-columns:1fr}
  .projects{grid-template-columns:1fr}
  .nav__toggle{display:block}
  .nav__links{position:absolute;top:60px;right:16px;flex-direction:column;background:#fff;padding:16px 22px;border-radius:14px;box-shadow:var(--shadow);display:none;gap:14px}
  .nav__links.open{display:flex}
}

.ai-note{margin-top:12px;font-size:12px;color:var(--muted)}
.project-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.project-links a{color:#6950a1;text-decoration:underline;text-underline-offset:4px}
section{scroll-margin-top:75px}a:focus-visible,button:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.hero__scroll{animation:none}.btn,.card{transition:none}}