/* ============================================================
   主页 · 自我介绍 — main page styles
   ============================================================ */

/* ---------- HERO ---------- */
.hero {
  min-height: 100svh; position: relative;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  padding: 110px 0 90px;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-glow {
  position: absolute; width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 73, 47, .13), transparent 62%);
  top: -280px; right: -200px; pointer-events: none;
  filter: blur(10px);
  animation: glow-drift 14s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-70px, 60px) scale(1.12); }
}
.hero-shell { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .26em;
  color: var(--ink-dim); text-transform: uppercase;
  padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(16, 18, 24, .55); backdrop-filter: blur(6px);
  margin-bottom: 34px;
}
.hero-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--verm-bright);
  box-shadow: 0 0 12px var(--verm); animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }

.hero-title {
  font-size: clamp(46px, 8.6vw, 108px);
  font-weight: 850; line-height: 1.08; letter-spacing: -.02em;
  margin-bottom: 30px;
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--verm-bright) 10%, var(--amber) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead {
  max-width: 640px; color: var(--ink-dim); font-size: clamp(16px, 1.6vw, 19px);
  margin-bottom: 44px;
}
.hero-lead strong { color: var(--ink); font-weight: 650; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.bp-m { display: none; }
@media (max-width: 640px) { .bp-m { display: inline; } }

.hero-foot {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 28px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em;
  color: var(--ink-faint);
}
.hero-foot .tc { color: var(--amber); }
.hero-scroll { display: inline-flex; align-items: center; gap: 10px; }
.hero-scroll::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(var(--ink-faint), transparent);
  animation: scroll-hint 2s ease-in-out infinite;
}
@keyframes scroll-hint { 0%, 100% { opacity: .3; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 760px) { .hero-foot { padding: 0 18px; } .hero-foot .right { display: none; } }

/* ---------- STATS 数字速览 ---------- */
.stats { border-bottom: 1px solid var(--line); }
.stats-shell {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 56px 0 30px; gap: 28px;
}
.stat b {
  font-size: clamp(34px, 4vw, 52px); font-weight: 800; letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.stat b i { font-style: normal; font-size: .5em; color: var(--verm-bright); font-weight: 700; }
.stat span { display: block; margin-top: 6px; color: var(--ink-dim); font-size: 14px; }
.stat-note {
  grid-column: 1 / -1; font-size: 12px; color: var(--ink-faint);
  padding-bottom: 26px;
  display: flex; align-items: center; gap: 8px;
}
.stat-note::before { content: "※"; }
@media (max-width: 860px) {
  .stats-shell { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ABOUT ---------- */
.about-grid { display: grid; grid-template-columns: 1.35fr .8fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.about-copy p { color: var(--ink-dim); margin-top: 22px; font-size: 17px; max-width: 560px; }
.about-copy p strong { color: var(--ink); font-weight: 650; }
.about-copy .first { font-size: 20px; color: var(--ink); margin-top: 8px; }
.now-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; position: sticky; top: 96px;
}
.now-card h3 {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em;
  color: var(--ink-faint); text-transform: uppercase; font-weight: 500;
  display: flex; justify-content: space-between; margin-bottom: 18px;
}
.now-card h3 i { color: var(--green); font-style: normal; }
.now-item { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.now-item:first-of-type { border-top: 0; padding-top: 0; }
.now-item .n { font-family: var(--font-mono); font-size: 11px; color: var(--verm-bright); padding-top: 4px; }
.now-item b { display: block; font-size: 15px; font-weight: 650; }
.now-item span { font-size: 13px; color: var(--ink-faint); display: block; margin-top: 2px; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .now-card { position: static; } }

/* ---------- CAPABILITIES ---------- */
.caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 54px; }
.cap {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; position: relative; overflow: hidden;
  transition: transform .4s var(--ease-out), border-color .4s;
}
.cap::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 200px at var(--mx, 50%) var(--my, -20%), rgba(232, 73, 47, .12), transparent 70%);
  opacity: 0; transition: opacity .4s;
}
.cap:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.cap:hover::before { opacity: 1; }
.cap .idx { font-family: var(--font-mono); font-size: 11px; color: var(--verm-bright); letter-spacing: .18em; }
.cap h3 { font-size: 20px; font-weight: 750; margin: 14px 0 10px; }
.cap p { font-size: 14px; color: var(--ink-dim); min-height: 66px; }
.cap-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cap-tags span {
  font-size: 12px; color: var(--ink-dim); padding: 5px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(241, 238, 229, .02);
}
.cap-visual { margin: 22px 0 4px; height: 74px; }
@media (max-width: 900px) { .caps-grid { grid-template-columns: 1fr; } .cap p { min-height: 0; } }

/* ---------- PROCESS ---------- */
.process { background: var(--bg-raise); border-block: 1px solid var(--line); }
.process-track { margin-top: 70px; position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.process-track::before {
  content: ""; position: absolute; top: 23px; left: 12px; right: 12px; height: 1px;
  background: var(--line-strong);
}
.process-track::after {
  content: ""; position: absolute; top: 23px; left: 12px; height: 1px;
  background: linear-gradient(90deg, var(--verm), var(--amber));
  width: var(--p, 0%); transition: width 1.6s var(--ease-out);
  box-shadow: 0 0 12px rgba(232, 73, 47, .6);
}
.process-step .dot {
  width: 46px; height: 46px; border-radius: 50%; position: relative; z-index: 1;
  background: var(--bg-raise); border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim);
  transition: border-color .3s, color .3s, box-shadow .3s;
}
.process-step:hover .dot { border-color: var(--verm); color: var(--verm-bright); box-shadow: 0 0 18px rgba(232, 73, 47, .3); }
.process-step h3 { font-size: 16.5px; font-weight: 700; margin: 18px 0 6px; }
.process-step p { font-size: 13px; color: var(--ink-faint); }
.process-note {
  margin-top: 54px; display: flex; gap: 12px; align-items: baseline;
  color: var(--ink-dim); font-size: 15px;
}
.process-note .mono { flex-shrink: 0; }
@media (max-width: 900px) {
  .process-track { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .process-track::before, .process-track::after { display: none; }
}
@media (max-width: 560px) { .process-track { grid-template-columns: repeat(2, 1fr); } }

/* ---------- WORKS teaser ---------- */
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 54px; }
.work-card {
  border-radius: var(--radius); overflow: hidden; position: relative;
  background: var(--panel); border: 1px solid var(--line);
  transition: transform .45s var(--ease-out), border-color .45s, box-shadow .45s;
  transform-style: preserve-3d; will-change: transform;
  display: flex; flex-direction: column;
}
.work-card:hover { border-color: var(--line-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.work-thumb { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.work-thumb .scene { position: absolute; inset: 0; transition: transform .8s var(--ease-out); }
.work-card:hover .work-thumb .scene { transform: scale(1.06); }
.scene-1 { background:
  radial-gradient(120% 90% at 20% 10%, #2A3242 0%, transparent 55%),
  radial-gradient(90% 80% at 85% 90%, rgba(232, 73, 47, .5), transparent 60%),
  linear-gradient(160deg, #131A24, #0C0E14); }
.scene-2 { background:
  radial-gradient(110% 90% at 80% 15%, #3A2E20 0%, transparent 55%),
  radial-gradient(90% 80% at 15% 85%, rgba(217, 164, 74, .45), transparent 60%),
  linear-gradient(200deg, #1A1712, #0D0C0A); }
.scene-3 { background:
  radial-gradient(120% 100% at 50% 0%, #26303A 0%, transparent 60%),
  radial-gradient(80% 70% at 80% 80%, rgba(120, 160, 220, .35), transparent 60%),
  linear-gradient(180deg, #12181F, #0B0D12); }
.work-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8, 9, 12, .88));
}
.play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; z-index: 2;
  border: 1px solid rgba(241, 238, 229, .4); backdrop-filter: blur(4px);
  background: rgba(10, 11, 15, .45);
  display: grid; place-items: center;
  transition: transform .35s var(--ease-spring), background-color .3s, border-color .3s;
}
.play-btn svg { width: 16px; height: 16px; fill: var(--ink); margin-left: 2px; }
.work-card:hover .play-btn { transform: translate(-50%, -50%) scale(1.12); background: var(--verm); border-color: var(--verm); }
.dur-chip {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--ink); background: rgba(8, 9, 12, .7); border: 1px solid var(--line);
  padding: 4px 9px; border-radius: 6px;
}
.work-info { padding: 20px 22px 22px; position: relative; z-index: 2; margin-top: -34px; }
.work-info h3 { font-size: 18px; font-weight: 750; }
.work-info .meta { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.work-stat {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--ink-dim);
}
.work-stat b { color: var(--ink); font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
.work-stat b i { font-style: normal; font-size: 11px; color: var(--ink-faint); font-weight: 500; margin-left: 3px; }
@media (max-width: 900px) { .works-grid { grid-template-columns: 1fr; max-width: 480px; } }

/* ---------- SYSTEMS ---------- */
.systems { border-top: 1px solid var(--line); }
.systems-inner { display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); padding: 44px 0; flex-wrap: wrap; }
.systems-copy { max-width: 380px; }
.systems-copy h3 { font-size: 17px; font-weight: 700; }
.systems-copy p { font-size: 13.5px; color: var(--ink-faint); margin-top: 6px; }
.system-chips { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.system-chips a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--ink-dim); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; transition: color .25s, border-color .25s, transform .25s var(--ease-out);
}
.system-chips a:hover { color: var(--ink); border-color: var(--verm); transform: translateY(-2px); }
.system-chips a i { color: var(--green); font-style: normal; margin-right: 7px; }

/* ---------- CLOSING ---------- */
.closing { text-align: center; padding: clamp(110px, 16vh, 180px) 0; position: relative; overflow: hidden; }
.closing::before {
  content: ""; position: absolute; left: 50%; bottom: -340px; transform: translateX(-50%);
  width: 900px; height: 480px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(232, 73, 47, .16), transparent 65%);
  pointer-events: none;
}
.closing .h2 { font-size: clamp(36px, 6vw, 76px); }
.closing p { color: var(--ink-dim); margin: 24px auto 44px; max-width: 520px; }
.closing-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }