/* =========================================================
   components.css — Cute / Toy-like 糖果贴纸版
   构成：圆润块面 + 厚描边 + 轻微旋转散布 + 弹性动效
   母题：全站由「点点」贯穿 —— 圆点 logo、点阵背景、虚线、圆点编号
   ========================================================= */

/* =========================================================
   1. 顶部工具条 —— 一块浮起来的圆角卡片，不再是硬边 HUD
   ========================================================= */
.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 12px clamp(10px, 2.4vw, 24px);
}

.bar__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 18px 20px;
  background: var(--color-surface);
  border: var(--stroke) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--pop);
}

/* Logo：一枚会眨眼的圆点脸（点点本人） */
.bar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: 0.01em;
}
.bar__mark {
  position: relative;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--candy-sky);
  border: var(--stroke) solid var(--color-border);
}
.bar__mark::before,
.bar__mark::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 6px; height: 7px;
  border-radius: 50%;
  background: var(--color-ink);
  animation: blink 4.5s var(--ease-inout) infinite;
}
.bar__mark::before { left: 7px; }
.bar__mark::after  { right: 7px; }
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}

.bar__readout {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  font-family: var(--font-label);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  white-space: nowrap;
  overflow: hidden;
}
.bar__readout b { color: var(--color-ink); }
.bar__readout span {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-tint);
}

.bar__nav { display: flex; align-items: center; gap: clamp(6px, 1.4vw, var(--space-4)); }
.bar__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-pop);
}
.bar__nav a:hover { background: var(--candy-lemon); color: var(--color-ink); transform: translateY(-2px); }
.bar__nav a.is-active { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }

/* 关卡流送进度：圆头糖果条 */
.bar__progress {
  position: absolute;
  left: 18px; right: 18px; bottom: 8px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: #ffe9d2;
  overflow: hidden;
}
.bar__progress i {
  display: block;
  height: 100%;
  width: var(--scroll, 0%);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--candy-lemon), var(--color-accent));
}

@media (max-width: 1080px) {
  .bar__readout { display: none; }
  .bar__inner { grid-template-columns: auto 1fr; }
  .bar__nav { justify-content: flex-end; }
}
@media (max-width: 640px) {
  .bar__nav a { padding: 6px 10px; font-size: var(--step--2); }
  .bar__nav a[href="#pipeline"] { display: none; }
  .bar__brand span { display: none; }
}

/* =========================================================
   2. 首屏 —— 大圆脸 + 手写体标题 + 漂浮贴纸
   ========================================================= */
.hero {
  position: relative;
  padding-top: calc(var(--bar-h) + clamp(40px, 7vw, 96px));
  padding-bottom: clamp(48px, 7vw, var(--space-7));
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.hero__eyebrow { grid-column: 1 / 9; grid-row: 1; }

.hero__title {
  grid-column: 1 / 10;
  grid-row: 2;
  margin-top: var(--space-5);
  font-family: var(--font-cn-display);
  font-size: var(--step-hero);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.01em;
  color: var(--color-ink);
}
.hero__title .line { display: block; }
.hero__title .line:nth-child(2) { padding-left: 4.5vw; }
.hero__title em {
  font-style: normal;
  position: relative;
  padding: 0 0.1em;
  white-space: nowrap;
}
/* 荧光笔涂色：可爱版强调 */
.hero__title em::before {
  content: "";
  position: absolute;
  left: -0.05em; right: -0.05em; bottom: 0.06em;
  height: 0.42em;
  background: var(--candy-lemon);
  border-radius: var(--radius-pill);
  z-index: -1;
}

.hero__sub {
  grid-column: 1 / 7;
  grid-row: 3;
  margin-top: var(--space-4);
  font-family: var(--font-label);
  font-size: clamp(0.78rem, 1.2vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.hero__lede { grid-column: 1 / 6; grid-row: 4; margin-top: var(--space-4); }

/* 大号圆脸立绘（占位：换成你的头像也很合适） */
.hero__face {
  grid-column: 10 / 13;
  grid-row: 2 / 5;
  justify-self: end;
  width: clamp(120px, 15vw, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: var(--stroke) solid var(--color-border);
  background: radial-gradient(70% 70% at 30% 25%, #fff, var(--candy-sky) 70%);
  box-shadow: var(--pop-lg);
  position: relative;
  animation: floaty 5.5s var(--ease-inout) infinite;
}
.hero__face::before,
.hero__face::after {
  content: "";
  position: absolute;
  width: 9%;
  aspect-ratio: 3 / 4;
  border-radius: 50%;
  background: var(--color-ink);
  animation: blink 4.5s var(--ease-inout) infinite;
}
.hero__face::before { left: 28%; top: 38%; }
.hero__face::after  { right: 28%; top: 38%; }
/* 腮红：可爱担当 */
.hero__face i {
  position: absolute;
  bottom: 26%;
  width: 13%;
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.55;
}
.hero__face i:first-child { left: 15%; }
.hero__face i:last-child  { right: 15%; }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-12px) rotate(1.5deg); }
}

/* 漂浮贴纸：破掉网格的存在感担当 */
.sticker {
  position: absolute;
  z-index: 3;
  padding: 8px 16px;
  background: var(--color-surface);
  border: var(--stroke) solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--pop);
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-pop);
}
.sticker:hover { transform: var(--sticker-rot) scale(1.08) !important; }
.sticker--1 { --sticker-rot: rotate(-7deg); top: 22%; right: 6%;  transform: rotate(-7deg); background: var(--candy-lemon); }
.sticker--2 { --sticker-rot: rotate(6deg);  top: 46%; right: 2%;  transform: rotate(6deg);  background: var(--candy-mint); }
.sticker--3 { --sticker-rot: rotate(-4deg); top: 68%; right: 12%; transform: rotate(-4deg); background: var(--candy-lavender); }

/* 资料卡：薄荷底、圆角、错位压住"标题-正文"之间的留白 */
.hero__card {
  grid-column: 7 / 11;
  grid-row: 4 / 6;
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--color-surface-alt);
  border: var(--stroke) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--pop);
}
.hero__card .row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: var(--space-3);
  padding-block: var(--space-2);
  font-size: var(--step--1);
  border-bottom: 2px dotted rgba(42, 27, 20, 0.2);
}
.hero__card .row:last-child { border-bottom: 0; }
.hero__card dt {
  font-family: var(--font-label);
  font-weight: 800;
  letter-spacing: var(--track-label);
  color: var(--color-ink-faint);
  padding-top: 2px;
}
.hero__card dd { margin: 0; color: var(--color-ink-soft); line-height: 1.75; }
.hero__card dd strong { color: var(--color-ink); font-weight: 700; }

.hero__cue {
  grid-column: 1 / 5;
  grid-row: 6;
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}
.hero__cue b {
  color: var(--color-accent);
  animation: bounce 1.8s var(--ease-inout) infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

@media (max-width: 1024px) {
  .sticker { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .hero__face { justify-self: start; width: 120px; }
  .hero__title .line:nth-child(2) { padding-left: 0; }
  .hero__card { margin-top: var(--space-5); }
}

/* 手机上看不到贴纸时的补偿：一排可爱标签 */
.hero__tags { display: none; gap: 8px; flex-wrap: wrap; margin-top: var(--space-3); }
@media (max-width: 1024px) { .hero__tags { display: flex; } }

/* =========================================================
   3. 跑马灯 —— 一条歪着的柠檬色缎带
   ========================================================= */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 14px;
  background: var(--candy-lemon);
  border-block: 3px solid var(--color-border);
  transform: rotate(-1.1deg) scale(1.03);
  box-shadow: var(--pop);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-4);
  animation: slide 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-right: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}
.marquee__group i { font-style: normal; color: var(--color-accent); font-size: var(--step--1); }
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================
   4. 能力 —— 四张歪着的糖果卡 + 圆头进度条
   ========================================================= */
.about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, var(--space-7)); align-items: start; }

.about__quote {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--stroke) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-sm);
  font-family: var(--font-cn-display);
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  line-height: 1.7;
  color: var(--color-ink);
  max-width: 26ch;
  /* 用独立的 rotate 属性，避免被 .reveal 的 transform 覆盖 */
  rotate: -1deg;
}

.console { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

.meter {
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--stroke) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-sm);
  /* 注意过渡的是 rotate / translate 独立属性，不是 transform */
  transition: rotate var(--dur-base) var(--ease-pop),
              translate var(--dur-base) var(--ease-pop),
              box-shadow var(--dur-base) var(--ease-out);
}
/* 四张卡各自轻微歪一点，hover 时扶正并微微浮起（rotate / translate 为独立属性，
   不会被 .reveal.is-in 的 transform: none 吃掉） */
.meter:nth-child(1) { rotate: -1.4deg; }
.meter:nth-child(2) { rotate: 1.2deg; }
.meter:nth-child(3) { rotate: 1deg; }
.meter:nth-child(4) { rotate: -1.1deg; }
.meter:hover { rotate: 0deg; translate: 0 -6px; box-shadow: var(--pop-lg); }

.meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.meter__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--color-ink);
}
.meter__val {
  font-family: var(--font-label);
  font-weight: 800;
  font-size: var(--step--1);
  color: var(--color-ink);              /* 深字压珊瑚：5.8:1（白字只有 3:1，不可用） */
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  font-variant-numeric: tabular-nums;
}
.meter__track {
  position: relative;
  height: 16px;
  border-radius: var(--radius-pill);
  background: #ffe9d2;
  border: 2px solid var(--color-border);
  overflow: hidden;
}
.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;                                   /* 进入视口才生长，见 .console.grown */
  border-radius: var(--radius-pill);
  background: repeating-linear-gradient(115deg, var(--fill-a, #ff5c77) 0 12px, var(--fill-b, #ff8fa3) 12px 24px);
  transition: width 1.1s var(--ease-pop);
}
.console.grown .meter__fill { width: var(--lvl, 0%); }
.console.grown .meter:nth-child(2) .meter__fill { transition-delay: 90ms; }
.console.grown .meter:nth-child(3) .meter__fill { transition-delay: 180ms; }
.console.grown .meter:nth-child(4) .meter__fill { transition-delay: 270ms; }
.meter__note { margin-top: var(--space-3); font-size: var(--step--2); color: var(--color-ink-soft); line-height: 1.7; }

@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
  .console { grid-template-columns: 1fr; }
}

/* =========================================================
   5. 作品 —— 一张大精选卡 + 错位散布的项目卡
   ========================================================= */
.works__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* 程序化封面 —— 依旧零图片资产，这次是糖果色块 */
.cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: var(--stroke) solid var(--color-border);
  border-radius: var(--radius-lg);
  isolation: isolate;
  background: var(--candy-sky);
}
.cover::before { content: ""; position: absolute; inset: 0; z-index: 0; }
/* 点阵叠加：和全站母题呼应 */
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.55) 2px, transparent 2px);
  background-size: 14px 14px;
  opacity: 0.5;
}

/* A. 海湾：泡泡 + 波浪色块 */
.cover--bay {
  background: linear-gradient(180deg, var(--candy-lavender), #bfe5ff 60%, var(--candy-mint));
}
.cover--bay::before {
  background-image:
    repeating-radial-gradient(circle at 20% 72%, rgba(255, 255, 255, 0.75) 0 8px, transparent 8px 26px),
    radial-gradient(60% 34% at 50% 96%, rgba(127, 216, 190, 0.95), transparent 70%),
    radial-gradient(38% 26% at 22% 78%, rgba(255, 255, 255, 0.8), transparent 70%);
}

/* B. 街巷：竖条 + 圆窗 */
.cover--city {
  background: linear-gradient(180deg, #2f2a4a, #4b3f72 55%, var(--candy-peach));
}
.cover--city::before {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 18px, transparent 18px 34px),
    radial-gradient(70% 40% at 50% 84%, rgba(255, 215, 94, 0.85), transparent 66%),
    repeating-linear-gradient(0deg, rgba(255, 215, 94, 0.5) 0 3px, transparent 3px 12px);
  background-size: auto, auto, 100% 60%;
  background-position: 0 0, 0 0, 0 100%;
  background-repeat: repeat, no-repeat, repeat;
}

/* C. 手绘山水：叠圆 */
.cover--paper { background: linear-gradient(180deg, #fff3d6, var(--candy-peach)); }
.cover--paper::before {
  background-image:
    radial-gradient(34% 60% at 24% 88%, var(--candy-mint) 0 60%, transparent 62%),
    radial-gradient(30% 46% at 52% 92%, var(--candy-sky) 0 60%, transparent 62%),
    radial-gradient(46% 70% at 82% 90%, var(--candy-lavender) 0 60%, transparent 62%);
}

/* D. 射线：柠檬放射 */
.cover--ray { background: radial-gradient(50% 50% at 50% 50%, #fff2b8, var(--candy-lemon)); }
.cover--ray::before {
  background-image: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.7) 0deg 7deg, transparent 7deg 16deg);
}

/* ---- 精选卡 ---- */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0;
  background: var(--color-surface);
  border: var(--stroke) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--pop);
  overflow: hidden;
  transition: rotate var(--dur-base) var(--ease-pop),
              translate var(--dur-base) var(--ease-pop),
              box-shadow var(--dur-base) var(--ease-out);
}
.feature:hover { translate: 0 -6px; rotate: -0.6deg; box-shadow: var(--pop-lg); }
.feature .cover { border-radius: 0; border: 0; border-right: var(--stroke) solid var(--color-border); aspect-ratio: auto; }
.feature__body { padding: clamp(22px, 3vw, var(--space-6)); display: flex; flex-direction: column; gap: var(--space-3); }

.feature__badge {
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--candy-lemon);
  border: 2px solid var(--color-border);
  font-family: var(--font-label);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: var(--track-label);
}
.feature__title {
  font-family: var(--font-cn-display);
  font-size: clamp(1.5rem, 3vw, var(--step-4));
  line-height: 1.3;
}
.feature__title small {
  display: block;
  margin-top: 2px;
  font-family: var(--font-label);
  font-weight: 800;
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.feature__desc { color: var(--color-ink-soft); line-height: 1.9; font-size: var(--step-0); }

/* 数据做成四枚小圆牌 */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.meta-grid > div {
  padding: 10px 8px;
  text-align: center;
  background: var(--color-bg-tint);
  border-radius: var(--radius-md);
  border: 2px dotted rgba(42, 27, 20, 0.25);
}
.meta-grid dt { font-family: var(--font-label); font-size: var(--step--2); font-weight: 800; letter-spacing: var(--track-label); color: var(--color-ink-faint); }
.meta-grid dd { margin: 2px 0 0; font-family: var(--font-display); font-size: var(--step-1); color: var(--color-ink); font-variant-numeric: tabular-nums; }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-2); }
.tag {
  font-family: var(--font-label);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
}

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature .cover { border-right: 0; border-bottom: var(--stroke) solid var(--color-border); aspect-ratio: 16 / 10; }
}

/* ---- 项目卡：三列错位，不是齐整卡片网格 ---- */
.cards {
  margin-top: clamp(36px, 5vw, var(--space-7));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, var(--space-5));
  align-items: start;
}
.card {
  display: block;
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--stroke) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-sm);
  transition: rotate var(--dur-base) var(--ease-pop),
              translate var(--dur-base) var(--ease-pop),
              box-shadow var(--dur-base) var(--ease-out);
}
/* 错位：每张卡的初始角度与纵向偏移都不同，打破齐整网格 */
.card:nth-child(1) { translate: 0 0;    rotate: -1deg; }
.card:nth-child(2) { translate: 0 22px; rotate: 0.8deg; }
.card:nth-child(3) { translate: 0 -8px; rotate: 1.4deg; }
.card:nth-child(4) { translate: 0 14px; rotate: 1deg; }
.card:nth-child(5) { translate: 0 -14px; rotate: -1.3deg; }
.card:hover { translate: 0 -8px; rotate: 0deg; box-shadow: var(--pop-lg); }
.card .cover { aspect-ratio: 4 / 3; border-width: 2px; border-radius: var(--radius-md); }
.card__title {
  margin-top: var(--space-3);
  font-family: var(--font-cn-display);
  font-size: var(--step-1);
  line-height: 1.35;
}
.card__meta {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--color-ink-faint);
}
.card__desc { margin-top: var(--space-2); font-size: var(--step--1); line-height: 1.8; color: var(--color-ink-soft); }

@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .cards { grid-template-columns: 1fr; }
  .card { translate: 0 0 !important; rotate: 0deg !important; }
}

/* =========================================================
   6. 流程 —— 竖向点阵时间轴
   ========================================================= */
.pipeline {
  position: relative;
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
  padding-left: clamp(34px, 5vw, 56px);
}
/* 竖轴：虚线点，呼应「点点」 */
.pipeline::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 12px;
  bottom: 12px;
  width: 0;
  border-left: 3px dotted rgba(42, 27, 20, 0.3);
}
.step {
  position: relative;
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--stroke) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-sm);
  transition: translate var(--dur-base) var(--ease-pop), box-shadow var(--dur-base) var(--ease-out);
}
.step:hover { translate: 6px 0; box-shadow: var(--pop); }
/* 轴上的圆点*/
.step::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(34px, 5vw, 56px) + 3px);
  top: 30px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  border: var(--stroke) solid var(--color-border);
}
.step__idx {
  font-family: var(--font-label);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}
.step h3 {
  margin-top: var(--space-1);
  font-family: var(--font-cn-display);
  font-size: var(--step-2);
  line-height: 1.3;
}
.step p { margin-top: var(--space-2); font-size: var(--step--1); line-height: 1.9; color: var(--color-ink-soft); }

/* =========================================================
   7. 联系 + 页脚
   ========================================================= */
.contact__card {
  padding: clamp(26px, 4vw, var(--space-6));
  background: var(--color-surface);
  border: var(--stroke) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--pop);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, var(--space-6));
  align-items: end;
}

.contact__mail {
  display: inline-block;
  margin-top: var(--space-4);
  padding: 6px 18px;
  background: var(--candy-lemon);
  border: var(--stroke) solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3.4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--dur-base) var(--ease-pop), background var(--dur-fast) var(--ease-out);
  word-break: break-all;
}
.contact__mail:hover { background: var(--color-accent); color: var(--color-ink); transform: rotate(-1.5deg) scale(1.03); }

.contact__links { display: flex; flex-direction: column; gap: var(--space-2); }
.contact__links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 8px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-tint);
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--color-ink);
  transition: transform var(--dur-fast) var(--ease-pop), background var(--dur-fast) var(--ease-out);
}
.contact__links a:hover { transform: translateX(5px); background: var(--candy-mint); }
.contact__links a span:last-child { color: var(--color-ink-faint); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 12px var(--space-5);
  background: var(--color-accent);
  color: var(--color-ink);       /* 深字压珊瑚 = 5.8:1；此处绝不可用白字 */
  border: var(--stroke) solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--pop-sm);
  font-family: var(--font-label);
  font-size: var(--step-0);
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-pop), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* 悬停只做位移 + 描边阴影 + 换柠檬底，不下潜到更深的珊瑚（那会让深字跌破 4.5:1） */
.btn:hover { transform: translateY(-3px); box-shadow: var(--pop); background: var(--candy-lemon); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--ghost { background: var(--color-surface); color: var(--color-ink); }
.btn--ghost:hover { background: var(--candy-sky); }

.available {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border: 2px dashed var(--color-accent);
  border-radius: var(--radius-pill);
  background: rgba(255, 92, 119, 0.08);
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--color-ink);
}
.available b { color: var(--color-accent); }

@media (max-width: 900px) { .contact__card { grid-template-columns: 1fr; align-items: start; } }

.site-footer {
  margin-top: var(--space-8);
  padding: var(--space-5) 0 var(--space-6);
  background: var(--color-bg-tint);
  border-top: var(--stroke) solid var(--color-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-label);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}