/* ==========================================================================
   lilliv · PLUGGBLOCK —— 个人名片页样式表
   结构：设计令牌 → 基础重置 → 布局容器 → 导航 → 首屏 → 通用区块
        → 卡片 → 联系 → 页脚 → 动效 → 响应式 → 无障碍偏好
   ========================================================================== */

/* ---------- 设计令牌 ---------- */
:root{
  --blue:#5B8DEF;
  --blue-deep:#4A90D9;
  --blue-soft:rgba(91,141,239,.10);
  --bg:#f7f8fa;
  --card:#ffffff;
  --ink:#2b2f36;
  --ink-2:#5a6169;
  --ink-3:#9aa1ab;
  --line:#e8eaee;
  --shadow:0 1px 2px rgba(20,30,50,.04), 0 8px 24px rgba(20,30,50,.06);
  --radius:20px;
  --maxw:900px;
  --nav-h:64px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- 基础重置 ---------- */
*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Inter,sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 极淡的顶部光晕，避免大面积纯白的单调 */
body::before{
  content:"";
  position:fixed;
  inset:-30% 0 auto 0;
  height:70vh;
  background:radial-gradient(60% 60% at 50% 0%, rgba(91,141,239,.10), rgba(91,141,239,0) 70%);
  pointer-events:none;
  z-index:0;
}

a{color:var(--blue-deep);text-decoration:none}
img{max-width:100%;display:block}

/* ---------- 布局容器 ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:1;
}

/* ---------- 顶部导航 ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(247,248,250,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.nav.scrolled{
  border-bottom-color:var(--line);
  background:rgba(247,248,250,.92);
}

.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  font-weight:700;
  font-size:15px;
  letter-spacing:.14em;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:9px;
}
.brand-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 4px var(--blue-soft);
}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  position:relative;
  padding:8px 14px;
  border-radius:999px;
  font-size:14.5px;
  color:var(--ink-2);
  transition:color .2s ease, background .2s ease;
}
.nav-links a:hover{color:var(--ink);background:rgba(43,47,54,.045)}
.nav-links a.active{color:var(--blue-deep);background:var(--blue-soft);font-weight:600}

/* ---------- 首屏 ---------- */
.hero{
  min-height:calc(100vh - var(--nav-h));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:64px 0 72px;
}

.avatar{
  width:132px;
  height:132px;
  border-radius:50%;
  padding:4px;
  background:linear-gradient(145deg,#dfe8fb,#f6f8fc 45%,#e3ebfa);
  box-shadow:0 10px 30px rgba(74,144,217,.18);
  animation:rise .7s var(--ease) both;
}
.avatar img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  background:#eef2f9;
  /* 占位图：换成自己的照片时，把 <img src> 改成图片地址即可 */
}

.name{
  margin:26px 0 0;
  font-size:clamp(38px,7vw,60px);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:700;
  animation:rise .7s .06s var(--ease) both;
}

.tagline{
  margin:16px 0 0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--blue-deep);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.16em;
  box-shadow:var(--shadow);
  animation:rise .7s .12s var(--ease) both;
}
.tagline i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
  display:inline-block;
}

.hero-actions{
  margin-top:36px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  animation:rise .7s .18s var(--ease) both;
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:46px;
  padding:0 24px;
  border-radius:999px;
  font-size:14.5px;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease, background .2s ease, color .2s ease;
  will-change:transform;
}
.btn-primary{
  background:linear-gradient(180deg,var(--blue),var(--blue-deep));
  color:#fff;
  box-shadow:0 6px 18px rgba(74,144,217,.30);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(74,144,217,.36)}
.btn-primary:active{transform:translateY(0)}

.btn-ghost{
  background:var(--card);
  color:var(--ink);
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.btn-ghost:hover{transform:translateY(-2px);border-color:#d9e2f2;color:var(--blue-deep)}

/* ---------- 通用区块 ---------- */
section{
  padding:84px 0;
  scroll-margin-top:var(--nav-h);
}
.section-head{margin-bottom:28px}

.eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--blue-deep);
  text-transform:uppercase;
  margin:0 0 8px;
}

h2{
  margin:0;
  font-size:clamp(24px,3.4vw,30px);
  letter-spacing:-.02em;
  font-weight:700;
}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:32px;
}

.about p{margin:0 0 14px;color:var(--ink-2)}
.about p:last-child{margin-bottom:0}
.about strong{color:var(--ink);font-weight:650}

.facts{
  margin-top:24px;
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.fact{
  padding:16px 18px;
  border-radius:14px;
  background:linear-gradient(180deg,#fbfcfe,#f5f8fd);
  border:1px solid #edf1f8;
}
.fact-k{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--ink-3);
  text-transform:uppercase;
  margin:0 0 4px;
}
.fact-v{margin:0;font-weight:650;font-size:15px}

/* ---------- 联系 ---------- */
.contact-lead{margin:0 0 24px;color:var(--ink-2)}

.socials{display:flex;flex-wrap:wrap;gap:12px}
.social{
  width:52px;
  height:52px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--ink-2);
  box-shadow:var(--shadow);
  transition:transform .18s ease, color .2s ease, border-color .2s ease, box-shadow .22s ease;
}
.social:hover{
  transform:translateY(-3px);
  color:var(--blue-deep);
  border-color:#d7e3f8;
  box-shadow:0 10px 22px rgba(74,144,217,.16);
}
.social svg{
  width:22px;
  height:22px;
  display:block;
  overflow:visible;
}

.mail{
  margin-top:24px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink-2);
  font-size:14.5px;
}
.mail b{color:var(--blue-deep);font-weight:600}

/* ---------- 页脚 ---------- */
footer{
  border-top:1px solid var(--line);
  padding:30px 0 40px;
}
.foot-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--ink-3);
  font-size:13px;
}
.foot-inner .to-top{color:var(--ink-2)}
.foot-inner .to-top:hover{color:var(--blue-deep)}

/* ---------- 动效 ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in{opacity:1;transform:none}

@keyframes rise{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  :root{--nav-h:58px}

  .wrap{padding:0 20px}
  .nav-inner{height:var(--nav-h);padding:0 20px}
  .nav-links{gap:0}
  .nav-links a{padding:8px 11px;font-size:13.5px}
  .brand{font-size:13px;letter-spacing:.1em}

  .hero{min-height:calc(100vh - var(--nav-h));padding:48px 0 56px}
  .avatar{width:108px;height:108px}

  section{padding:64px 0}
  .card{padding:24px;border-radius:18px}

  .hero-actions{width:100%}
  .btn{flex:1 1 0;min-width:140px}

  .social{width:48px;height:48px;border-radius:14px}

  .foot-inner{justify-content:center;text-align:center}
}

/* ---------- 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}