/* components.css — nav, buttons, kicker/headline, stat, pain, capability, tool, video, form, footer */

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--canvas);border-bottom:1px solid var(--hairline)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.nav__logo{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
.nav__logo small{display:block;font-size:11px;font-weight:300;color:var(--muted);letter-spacing:.06em}
.nav__links{display:flex;align-items:center;gap:var(--sp-5)}
.nav__link{font-size:var(--fs-body-sm);color:var(--ink)}
.nav__link:hover{color:var(--primary)}
.nav__link[aria-current="true"]{color:var(--primary);text-decoration:underline;text-underline-offset:6px}
.nav__toggle{display:none;position:relative;width:48px;height:48px;background:none;border:0;cursor:pointer;padding:12px}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{content:"";display:block;width:24px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s;margin-inline:auto}
.nav__toggle span::before{transform:translateY(-8px)}
.nav__toggle span::after{transform:translateY(6px)}
.nav--open .nav__toggle span{background:transparent}
.nav--open .nav__toggle span::before{transform:translateY(-1px) rotate(45deg)}
.nav--open .nav__toggle span::after{transform:translateY(-1px) rotate(-45deg)}

/* buttons + type accents */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 var(--sp-6);border-radius:var(--radius);font-weight:700;font-size:var(--fs-body-sm);letter-spacing:.03em;border:1px solid transparent;cursor:pointer;transition:.15s}
.btn--primary{background:var(--primary);color:var(--on-dark)}
.btn--primary:hover{background:var(--primary-active)}
.btn--on-dark{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.5)}
.btn--on-dark:hover{background:rgba(255,255,255,.12);border-color:var(--on-dark)}
.link-more{font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
.link-more:hover{text-decoration:underline;text-underline-offset:4px}
.band--dark .link-more{color:var(--link-on-dark)}
.section-cta{margin-top:var(--sp-5)}
.kicker{font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-3)}
.band--dark .kicker{color:var(--on-dark-soft)}
/* max-width 用 em 而非 ch：ch 是「0」的宽度，中文字宽约为它的 1.6 倍，18ch 实际只有 11 字/行，
   多处标题因此落下孤字。balance 让浏览器把末行补齐；不支持的浏览器按普通换行降级。 */
.headline{font-size:var(--fs-display-md);line-height:1.15;color:var(--ink);max-width:15em;overflow-wrap:break-word;text-wrap:balance}
.band--dark .headline{color:var(--on-dark)}
.lead{font-weight:300;font-size:var(--fs-title-md);color:var(--body);margin-top:var(--sp-4);max-width:60ch}
.band--dark .lead{color:var(--on-dark-soft)}
/* 品牌名整词不断行：1024–1366px 下左栏宽度（含 hero 滚动内缩）小于 PavementCracker 的
   64px 词宽，不锁定会断成「PavementCrack / er」，且随滚动内缩归零而重排跳动。 */
.headline--xl{font-size:var(--fs-display-xl);white-space:nowrap}
.headline--lg{font-size:var(--fs-display-lg)}
.headline--center{max-width:20ch;margin-inline:auto}
.lead--center{margin-inline:auto}
.text-center{text-align:center}
.actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-5);flex-wrap:wrap}
.manifesto{font-size:var(--fs-title-lg);font-weight:700;margin:0 auto;max-width:40ch}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}
.chip{font-size:var(--fs-body-sm);color:var(--body);border:1px solid var(--hairline-strong);padding:6px 12px}

/* stat / pain / capability / tool / video / form / footer */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);margin-top:var(--sp-6)}
.stat{border-top:2px solid var(--primary);padding-top:var(--sp-3)}
.stat__num{font-family:Inter,sans-serif;font-weight:700;font-size:var(--fs-display-sm);font-variant-numeric:tabular-nums;color:var(--ink)}
.band--dark .stat__num{color:var(--on-dark)}
.stat__label{font-size:var(--fs-body-sm);color:var(--muted)}
.band--dark .stat__label{color:var(--on-dark-soft)}
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-6)}
.pain{background:var(--surface-dark-elevated);padding:var(--sp-5);border-top:2px solid var(--d-pothole)}
.pain__no{font-family:Inter;font-weight:700;color:var(--d-pothole)}
.pain__title{font-size:var(--fs-title-md);color:var(--on-dark);margin:var(--sp-2) 0}
.cap{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:center}
.cap__media img,.cap__media video{width:100%;border:1px solid var(--hairline)}
.cap__media--narrow{margin:var(--sp-6) auto 0;max-width:400px}
.band--dark .cap__media img{border-color:var(--hairline-dark)}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-top:var(--sp-6)}
.tool{background:var(--surface-dark-elevated);padding:var(--sp-5)}
.tool__name{font-size:var(--fs-title-sm);color:var(--on-dark);font-weight:700}
.tool__desc{font-size:var(--fs-body-sm);color:var(--on-dark-soft);margin-top:var(--sp-2)}
.card-link{display:block;text-decoration:none;color:inherit;cursor:pointer}
.card-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.card-clip{display:block;width:100%;aspect-ratio:16/9;height:auto;background:#000;border:1px solid var(--hairline);margin:0 0 var(--sp-3)}
.band--dark .card-clip{border-color:var(--hairline-dark)}
.card-link:hover .card-clip{border-color:var(--primary)}
.band--dark .card-link:hover .card-clip{border-color:var(--link-on-dark)}
.dual{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.dual--spaced{margin-top:var(--sp-6)}
.dual__h{font-size:var(--fs-title-md);color:var(--ink);margin-bottom:var(--sp-2)}
.video{position:relative;background:#000}
.video video{display:block;width:100%;height:auto}
.video--spaced{margin-top:var(--sp-6)}
#cap-flywheel .lead{text-wrap:pretty}
.feature-video{margin-top:var(--sp-6)}
.feature-video__frame{background:#08121d;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 16px 40px rgba(1,51,94,.12)}
.feature-video__media{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#08121d;outline:1px solid rgba(0,0,0,.1);outline-offset:-1px}
.feature-video__caption{display:flex;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-3);font-size:var(--fs-body-sm);color:var(--muted);text-wrap:pretty}
.feature-video__caption strong{color:var(--ink)}
.form{display:grid;gap:var(--sp-4);max-width:520px;text-align:left}
html:not(.js) .form{display:none} /* 表单提交依赖 JS；无 JS 时企微二维码是唯一通道 */
.form__field{display:grid;gap:var(--sp-1)}
.form__label{font-size:var(--fs-body-sm);font-weight:700;color:var(--ink)}
.form__input{width:100%;height:48px;padding:0 var(--sp-4);background:var(--canvas);border:1px solid var(--hairline-strong);border-radius:var(--radius);font:inherit;color:var(--ink);transition:background-color .16s ease-out,border-color .16s ease-out}
/* sink —— hover 下沉反馈：凡带边框的盒体统一手感。配方对齐 claude.ai 实测：平涂灰填充 + 描边收紧，无位移；
   深色表面纯变灰感知太弱，换“压暗 + 内阴影”补偿；媒体框无底色可填，用 ::after 叠层内阴影 */
.form__input:hover,.form__input:focus{background:var(--sink-fill-soft);border-color:var(--hairline-hover)}
.form__input:focus{border-color:var(--ink);border-width:2px;padding-inline:calc(var(--sp-4) - 1px)}
.chip,.qr{transition:background-color .16s ease-out,border-color .16s ease-out}
.chip:hover,.qr:hover{background:var(--sink-fill)}
.chip:hover{border-color:var(--hairline-hover)}
.pain,.tool{transition:background-color .16s ease-out,box-shadow .16s ease-out}
.pain:hover,.tool:hover{background:var(--surface-dark-sunk);box-shadow:inset 0 2px 5px rgba(0,0,0,.35)}
.cap__media{position:relative}
.cap__media img,.cap__media video{transition:border-color .16s ease-out}
.cap__media:hover img,.cap__media:hover video{border-color:var(--hairline-strong)}
.cap__media::after,.video::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 2px 5px rgba(0,0,0,.14);opacity:0;transition:opacity .16s ease-out}
.cap__media:hover::after,.video:hover::after{opacity:1}
/* 首屏实时场景：盖在静帧上，加载完再渐显。静帧始终占位，所以这里不参与布局
   （absolute），画布尺寸由 img 撑出来的框决定，两者机位一致故渐变无跳切。 */
.hero3d{position:absolute;inset:0;display:block;width:100%;height:100%;border:1px solid var(--hairline-dark);opacity:0;pointer-events:none;transition:opacity .5s ease-out}
.cap__media--3d.is-live .hero3d{opacity:1}
/* RGBA Cycles photography carries real contact shadows onto the hero stage,
   without a framed image plate, CSS blur, or masks over the subject. */
#hero{background-color:var(--hero-stage)}
#hero .cap__media--3d img{border:0;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,#000 87%,transparent);mask-composite:intersect}
#hero .cap__media--3d::after{display:none}
/* 静帧留在不透明画布下方：既保留 LCP/无障碍描述，也能在 WebGL 上下文丢失时兜底。 */
@media (prefers-reduced-motion:reduce){.hero3d{transition:none}}
@media (prefers-reduced-motion:reduce){.form__input,.chip,.qr,.pain,.tool,.cap__media img,.cap__media video,.cap__media::after,.video::after{transition:none}}
textarea.form__input{height:auto;padding:var(--sp-3) var(--sp-4);resize:vertical;min-height:96px}
/* 蜜罐：移出视口而非 display:none —— 部分脚本会跳过不可见字段，移出视口的照填不误。
   真人看不到，读屏被 aria-hidden 挡住，键盘被 tabindex=-1 跳过。 */
.form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__hint{font-size:var(--fs-caption);color:var(--muted)}
.form__hint a{color:var(--primary);text-decoration:underline}
.form__error{color:var(--error);font-size:var(--fs-body-sm);min-height:1.2em}
.form__success{font-weight:700;font-size:var(--fs-title-md)}
.cta-grid{display:grid;grid-template-columns:1fr auto;gap:var(--sp-7);align-items:start;justify-content:center;margin-top:var(--sp-6);text-align:left}
/* 遮罩色 = --surface-dark(#1a2129) @ .85/.94，改主题色时需同步 */
#cta{background:linear-gradient(rgba(26,33,41,.85),rgba(26,33,41,.94)),url("../assets/img/vision-beacon.webp?v=43405a41c573") center/cover}
#cta .form__label{color:var(--on-dark)}
#cta .form__hint{color:var(--on-dark-soft)}
#cta .form__hint a{color:var(--link-on-dark)}
#cta .form__error{color:var(--error-on-dark)}
#cta .form__success{color:var(--on-dark)}
.qr{display:inline-block;background:var(--canvas);padding:var(--sp-5);text-align:center}
.cta-grid .qr{margin:0}
.qr__img{width:200px;height:200px;display:block;margin:0 auto}
.qr__label{color:var(--ink);font-size:var(--fs-body-sm);font-weight:700;line-height:1.4;margin-top:var(--sp-3)}
.footer{background:var(--surface-soft);color:var(--body);padding-block:var(--sp-7)}
.footer__cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-5)}
.footer__col h3{font-size:var(--fs-body-sm);color:var(--ink);margin-bottom:var(--sp-2)}
.footer__col a{color:var(--primary)}
.footer__muted{color:var(--muted)}
.footer__copy{margin-top:var(--sp-5);font-size:var(--fs-body-sm);color:var(--muted);border-top:1px solid var(--hairline);padding-top:var(--sp-4)}

/* reveal — progressive enhancement: only hidden when JS is active */
.js .reveal{opacity:0;transform:translateY(16px)}
.reveal.is-visible{opacity:1;transform:none;transition:opacity .5s,transform .5s}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* responsive */
@media (max-width:1023.98px){
  .tools{grid-template-columns:repeat(2,1fr)}
  .footer__cols{grid-template-columns:1fr 1fr}
  /* 汉堡菜单覆盖整个 ≤1023.98px：六项导航 + CTA 按钮在 768px 处横排放不下，
     会折行压住 logo 并把按钮挤出容器。沿用既有断点，不新增第三档。
     JS 侧 mobileMq 必须同步（main.js）——两边不一致会让 inert 与 aria 状态错位。 */
  .js .nav__toggle{display:block}
  .js .nav__links{position:fixed;inset:var(--nav-h) 0 0 0;flex-direction:column;background:var(--canvas);padding:var(--sp-5);gap:var(--sp-4);border-bottom:1px solid var(--hairline);transform:translateY(-120%);transition:transform .25s,visibility .25s;overflow-y:auto;visibility:hidden}
  .js .nav--open .nav__links{transform:none;visibility:visible}
  /* 无 JS 回退：菜单按钮不可用，导航链接以换行内联形式常驻 */
  html:not(.js) .nav__inner{height:auto;min-height:var(--nav-h);flex-wrap:wrap;padding-block:var(--sp-2)}
  html:not(.js) .nav__links{flex-wrap:wrap;gap:var(--sp-3) var(--sp-4)}
}
@media (max-width:767.98px){
  .stats,.pains,.cap,.tools,.dual,.footer__cols,.cta-grid{grid-template-columns:1fr}
  .feature-video__caption{display:grid;gap:var(--sp-1)}
  .cta-grid{justify-items:center}
}