/* === 首页样式 === */

.home-page {
  padding: 10px 0 26px;
}

/* Hero */
.home-hero {
  text-align: center;
  padding: 18px 0 10px;
}

.home-orb-wrap {
  position: relative;
  width: 178px; height: 178px;
  margin: 0 auto 18px;
}
.home-orb-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(167,139,250,0.5), rgba(140,90,220,0.14) 46%, transparent 70%);
  filter: blur(6px);
  animation: llpulse 6s ease-in-out infinite;
}
.home-logo-img {
  object-fit: cover; object-position: center;
  position: absolute; top: 50%; left: 50%;
  width: 122px; height: 122px;
  margin: -61px 0 0 -61px;
  border-radius: 50%;
  box-shadow: 0 0 46px rgba(167,139,250,0.45), 0 6px 20px rgba(0,0,0,0.4);
  z-index: 2;
}
.home-orb-fallback {
  position: absolute; top: 50%; left: 50%;
  width: 122px; height: 122px;
  margin: -61px 0 0 -61px;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 46px rgba(167,139,250,0.45), 0 6px 20px rgba(0,0,0,0.4);
}
.home-orb-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff, #dcc7ff 28%, #8b5fd6 68%, #4a2a8a);
  box-shadow: inset -6px -8px 20px rgba(40,10,80,0.55);
}

.home-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid var(--accent-border);
}
.home-ring-1 {
  width: 158px; height: 158px;
  margin: -79px 0 0 -79px;
  animation: llspin 26s linear infinite;
}
.home-ring-2 {
  width: 150px; height: 150px;
  margin: -75px 0 0 -75px;
  animation: llorbit 14s linear infinite;
}
.home-ring-3 {
  width: 124px; height: 124px;
  margin: -62px 0 0 -62px;
  animation: llorbit 20s linear infinite reverse;
}
.home-ring-4 {
  width: 168px; height: 168px;
  margin: -84px 0 0 -84px;
  animation: llorbit 9s linear infinite;
  border: none;
}
.home-ring-dot {
  position: absolute; top: -5px; left: 50%;
  width: 11px; height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
}
.home-ring-3 .home-ring-dot { width: 9px; height: 9px; margin-left: -4.5px; top: -4px; }
.home-ring-4 .home-ring-dot { width: 6px; height: 6px; margin-left: -3px; top: -3px; }

.home-title {
  font-family: var(--font-serif);
  font-size: 28.5pt;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.18em;
  margin: 0;
}
.home-subtitle {
  font-size: 9.75pt;
  letter-spacing: 0.42em;
  color: var(--gold);
  margin: 10px 0 0;
}
.home-desc {
  max-width: 300px;
  margin: 14px auto 0;
  color: var(--text-dim);
  line-height: 1.9;
  font-size: 10.5pt;
  text-wrap: pretty;
}

/* Cards */
.home-cards {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 14px;
}

.home-card {
  cursor: pointer;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-card2));
  border: 1px solid var(--border-mid);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: transform 0.2s, border-color 0.2s;
}
.home-card:active { border-color: var(--gold); transform: scale(0.98); }

.home-card-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  flex: none;
}

.home-card-icon-beads {
  display: flex;
  flex: none;
  align-items: center;
}
.bead-sample {
  width: 22px; height: 22px;
  border-radius: 50%;
}
.bead-sample-mid {
  width: 28px; height: 28px;
  margin-left: -6px;
}
.bead-sample + .bead-sample-mid + .bead-sample {
  margin-left: -6px;
}

.home-card-content { flex: 1; }
.home-card-title {
  font-family: var(--font-serif);
  font-size: 14.25pt;
  color: var(--text-primary);
}
.home-card-desc {
  font-size: 9.75pt;
  color: var(--text-subtle);
  margin-top: 4px;
  line-height: 1.6;
}
.home-card-arrow {
  color: var(--gold);
  font-size: 13.5pt;
}

/* Measure card */
.home-measure-card {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  transition: transform 0.2s;
}
.home-measure-card:active { transform: scale(0.98); }
.home-measure-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1.4px solid var(--accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.home-measure-title {
  font-size: 11.25pt;
  color: var(--text-primary);
  font-family: var(--font-serif);
}
.home-measure-desc {
  font-size: 9pt;
  color: var(--text-faint);
  margin-top: 3px;
}