/* ============================================================
   停车计时 · 专属组件样式
   复用 components.css 骨架与 earthonline/site.css 同名模块
   （hero / usp / download / shots / subhero / ethos / crumb / footer__beian），
   在此之上增加停车计时特有的视觉与交互模块。
   主色为青蓝（取自 App 图标 #00a9ff），与「光与我」家族同源。
   ============================================================ */

/* ---------- Hero 两栏布局（左文案 / 右倒计时圆环） ---------- */
@media (min-width: 880px) {
  .hero { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--space-32); }
  .hero__inner { max-width: none; }
  .hero__lede { margin-left: 0; margin-right: 0; }
  .hero__cta { justify-content: flex-start; }
  .hero__scroll { display: none; }
}
.hero__side {
  display: grid; place-items: center; position: relative; z-index: 1;
  margin-top: var(--space-32);
}
@media (min-width: 880px) { .hero__side { margin-top: 0; } }

/* ---------- 复用 earthonline 同名通用模块（保持一致） ---------- */
/* 品牌条 */
.brandstrip {
  display: flex; gap: var(--space-8); justify-content: center; flex-wrap: wrap;
  margin: 0 auto var(--space-20); max-width: 560px;
}
.brandstrip__chip {
  font-size: var(--font-size-xs); letter-spacing: 0.04em; color: var(--color-text-soft);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-full); padding: var(--space-4) var(--space-12);
}
/* 通用小卡片网格（亮点 / 功能） */
.usp {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-16); max-width: 1080px; margin: 0 auto;
}
.usp__item {
  background: var(--color-surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: var(--glass-border); border-radius: var(--radius-xl);
  padding: var(--space-24) var(--space-20); box-shadow: var(--glass-inner-glow);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.usp__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), var(--glass-inner-glow); border-color: transparent; }
.usp__icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--color-accent-soft); margin-bottom: var(--space-16);
}
.usp__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.usp__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-8); }
.usp__text { color: var(--color-text-soft); font-size: var(--font-size-base); margin: 0; }

/* ---------- 痛点钩子（红/警报感的真实场景） ---------- */
.pain {
  max-width: 860px; margin: 0 auto; text-align: center;
}
.pain__quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  line-height: 1.3; font-weight: 700; margin: 0 auto var(--space-24);
}
.pain__quote b { color: var(--color-danger); }
.pain__sub { color: var(--color-text-soft); font-size: var(--font-size-lg); margin: 0; }

/* ---------- 倒计时圆环展示（首页 Hero 右侧 / 功能页） ---------- */
.ring {
  position: relative; width: min(320px, 78vw); aspect-ratio: 1 / 1; margin: 0 auto;
}
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--color-border); stroke-width: 14; }
.ring__progress {
  fill: none; stroke: url(#ringGrad); stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: 880; stroke-dashoffset: 300;
  filter: drop-shadow(0 0 10px var(--color-accent-glow));
}
.ring__center {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px;
}
.ring__time { font-size: clamp(2.2rem, 7vw, 3rem); font-weight: var(--font-weight-extrabold); letter-spacing: 0.02em; }
.ring__label { font-size: var(--font-size-sm); color: var(--color-text-soft); }
.ring__state {
  display: inline-block; margin-top: var(--space-8); font-size: var(--font-size-xs);
  font-weight: 700; padding: 2px var(--space-12); border-radius: var(--radius-full);
  background: var(--color-warn-soft); color: var(--color-warn);
}

/* 计费状态三色示意 */
.ring--safe .ring__state { background: var(--color-safe-soft); color: var(--color-safe); }
.ring--danger .ring__state { background: var(--color-danger-soft); color: var(--color-danger); }

/* ---------- 截图展廊（可点击放大 lightbox） ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-16); }
.gallery__item {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-surface);
  box-shadow: var(--glass-inner-glow); cursor: zoom-in;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease;
}
.gallery__item:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-lg), var(--glass-inner-glow); }
.gallery__item img { width: 100%; height: auto; display: block; }
.gallery__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: var(--font-size-xs); color: #fff; padding: var(--space-16) var(--space-12) var(--space-8);
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
}

/* lightbox 浮层 */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: var(--space-24);
  background: rgba(8, 18, 28, 0.86); backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.lightbox__close {
  position: absolute; top: var(--space-24); right: var(--space-24);
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 1.4rem; line-height: 1;
}

/* ---------- 功能页 Bento（六大功能深度） ---------- */
.feat { display: grid; grid-template-columns: 1fr; gap: var(--space-16); }
@media (min-width: 760px) { .feat { grid-template-columns: repeat(2, 1fr); } }
.feat__card {
  position: relative; display: grid; gap: var(--space-12);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl); padding: var(--space-32) var(--space-24);
  box-shadow: var(--glass-inner-glow); overflow: hidden;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease;
}
.feat__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), var(--glass-inner-glow); }
.feat__card--wide { grid-column: 1 / -1; }
.feat__head { display: flex; align-items: center; gap: var(--space-12); }
.feat__icon {
  flex: none; width: 48px; height: 48px; border-radius: var(--radius-md);
  display: grid; place-items: center; font-size: 1.4rem; background: var(--color-accent-soft);
}
.feat__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feat__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.feat__desc { color: var(--color-text-soft); font-size: var(--font-size-base); margin: 0; }
.feat__list { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; gap: var(--space-8); }
.feat__list li { font-size: var(--font-size-sm); color: var(--color-text-soft); padding-left: 1.3rem; position: relative; }
.feat__list li::before { content: "▹"; position: absolute; left: 0; top: 0; color: var(--color-accent); font-weight: 700; }
.feat__media { margin-top: var(--space-8); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-solid); }
.feat__media img { width: 100%; height: auto; display: block; }

/* 联动能力三联 */
.linkage { display: grid; grid-template-columns: 1fr; gap: var(--space-16); }
@media (min-width: 680px) { .linkage { grid-template-columns: repeat(3, 1fr); } }
.linkage__item {
  text-align: center; padding: var(--space-24) var(--space-16);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--glass-inner-glow);
}
.linkage__emoji { font-size: 1.8rem; display: block; margin-bottom: var(--space-8); }
.linkage__emoji svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.linkage__name { font-weight: var(--font-weight-bold); margin-bottom: 4px; }
.linkage__text { font-size: var(--font-size-sm); color: var(--color-text-soft); margin: 0; }

/* 下载页：步骤 */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--space-16); max-width: 760px; margin: var(--space-32) auto 0; }
@media (min-width: 680px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-24) var(--space-20); text-align: center;
  box-shadow: var(--glass-inner-glow);
}
.step__num {
  width: 40px; height: 40px; margin: 0 auto var(--space-12);
  display: grid; place-items: center; border-radius: 50%;
  font-weight: var(--font-weight-extrabold); color: var(--color-btn-primary-text);
  background: var(--gradient-accent);
}
.step__title { font-weight: var(--font-weight-bold); margin-bottom: 4px; }
.step__text { font-size: var(--font-size-sm); color: var(--color-text-soft); margin: 0; }

/* about 页：理念卡 */
.ethos { display: grid; grid-template-columns: 1fr; gap: var(--space-16); margin-top: var(--space-32); }
@media (min-width: 760px) { .ethos { grid-template-columns: repeat(3, 1fr); } }

/* 子页通用标题区（复用 earthonline 同名） */
.subhero { padding: 9rem clamp(1.2rem, 5vw, var(--space-48)) var(--space-64); text-align: center; max-width: 820px; margin: 0 auto; }
.subhero__title { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: var(--font-weight-extrabold); margin-bottom: var(--space-16); }
.subhero__lede { color: var(--color-text-soft); font-size: clamp(var(--font-size-base), 2.2vw, var(--font-size-xl)); margin: 0 auto; max-width: 560px; }
.crumb { padding: 6.5rem clamp(1.2rem, 5vw, var(--space-48)) 0; max-width: 1120px; margin: 0 auto; }
.crumb a { color: var(--color-text-soft); font-size: var(--font-size-sm); transition: color 0.25s ease; }
.crumb a:hover { color: var(--color-accent); }

/* 下载区块（首页与下载页复用） */
.download { text-align: center; }
.download__cta { display: flex; gap: var(--space-16); justify-content: center; flex-wrap: wrap; margin-top: var(--space-24); }
.download__store {
  display: inline-flex; align-items: center; gap: var(--space-12);
  padding: var(--space-16) var(--space-32); border-radius: var(--radius-full);
  background: var(--gradient-accent); color: var(--color-btn-primary-text);
  font-weight: var(--font-weight-bold); font-size: var(--font-size-lg);
  box-shadow: var(--shadow-btn-primary); transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.download__store:hover { transform: translateY(-3px); box-shadow: var(--shadow-btn-primary-hover); }
.download__store svg { width: 26px; height: 26px; }
.download__meta { margin-top: var(--space-16); color: var(--color-text-soft); font-size: var(--font-size-sm); }
.download__meta a { color: var(--color-accent); }

/* 设备截图轮播（复用同名） */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-16); margin-top: var(--space-40); }
.shots__item { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); }
.shots__item img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; }
.shots__item:hover img { transform: scale(1.03); }

/* 站点标记（属于光与我家族） */
.family-note { font-size: var(--font-size-sm); color: var(--color-text-soft); text-align: center; margin-top: var(--space-20); }
.family-note a { color: var(--color-accent); }

/* 页脚备案号（底部居中，独占一行） */
.footer__beian {
  flex-basis: 100%;
  order: 3;
  margin-top: var(--space-4);
}
.footer__beian a {
  color: #8e89a8;
  font-size: 0.82rem;
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer__beian a:hover { color: var(--color-accent); }

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .hero__visual-orb, .ring__progress { animation: none !important; }
}