/* ══════════════════════════════════════════════════════════════
   corepush.cloud 官网（index.html）独立布局样式
   依赖共享 style.css（token + 通用组件）。依据
   docs/superpowers/prototypes/ui-v2/site.html 与 ui-spec.md 落地。
   ══════════════════════════════════════════════════════════════ */

:root{ --shell:1200px; }

html{ scroll-padding-top:88px; }
h1,h2,h3{ font-weight:600; line-height:1.3; letter-spacing:-.01em; }

.skip-link{
  position:absolute; left:var(--s4); top:-64px; z-index:var(--z-toast);
  background:var(--accent); color:var(--accent-ink); font-weight:600;
  padding:10px 16px; border-radius:var(--r-sm); transition:top var(--dur-2) var(--ease);
}
.skip-link:focus{ top:var(--s4); }

.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 var(--s6); }
@media (max-width:640px){ .shell{ padding:0 var(--s4); } }

/* ── 导航 ── */
.nav{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:rgba(10,13,20,.80); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__in{ display:flex; align-items:center; gap:var(--s6); height:68px; }
.brand{ display:flex; align-items:center; gap:10px; margin-right:var(--s2); }
.brand__mark{
  width:32px; height:32px; border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--accent),#1E7FB8);
  display:grid; place-items:center; color:var(--accent-ink);
  box-shadow:0 4px 14px var(--accent-glow);
}
.brand__name{ font-size:16px; font-weight:700; letter-spacing:.2px; white-space:nowrap; }
.brand__name em{ color:var(--accent); font-style:normal; }
.nav__links{ display:flex; align-items:center; gap:var(--s1); flex:1; }
.nav__link{
  padding:8px var(--s3); border-radius:var(--r-sm);
  font-size:var(--fs-label); font-weight:500; color:var(--text-2);
  transition:color var(--dur-1), background var(--dur-1);
}
.nav__link:hover{ color:var(--text-1); background:var(--surface-2); }
.nav__cta{ display:flex; align-items:center; gap:var(--s2); }
.nav__cta .btn{ height:36px; padding:0 var(--s4); font-size:var(--fs-label); border-radius:var(--r-sm); }
.nav__toggle{ display:none; background:transparent; border:1px solid transparent; cursor:pointer; color:var(--text-2); width:40px; height:40px; border-radius:var(--r-md); align-items:center; justify-content:center; }
.nav__toggle:hover{ background:var(--surface-2); color:var(--text-1); }
@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .nav__cta .btn--outline{ display:none; }
}
.mobile-menu{ display:none; flex-direction:column; gap:4px; padding:var(--s3) 0 var(--s4); }
.mobile-menu.is-open{ display:flex; }
.mobile-menu a{ padding:10px var(--s4); border-radius:var(--r-sm); font-size:var(--fs-body); color:var(--text-2); }
.mobile-menu a:hover{ background:var(--surface-2); color:var(--text-1); }

/* ── Hero ── */
.hero{
  position:relative; overflow:hidden;
  padding:var(--s16) 0 var(--s12);
  background:
    radial-gradient(820px 460px at 8% -12%, rgba(61,199,245,.18), transparent 68%),
    radial-gradient(680px 400px at 92% 0%, rgba(63,224,160,.10), transparent 70%),
    var(--surface-0);
}
.hero__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(760px 420px at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(760px 420px at 50% 0%, #000 30%, transparent 78%);
}
.hero__in{ position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:var(--s12); align-items:center; }
@media (max-width:1000px){ .hero__in{ grid-template-columns:1fr; gap:var(--s8); } }
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:5px var(--s3) 5px 10px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line);
  font-size:var(--fs-caption); color:var(--text-2); margin-bottom:var(--s5);
}
.hero__title{ font-size:clamp(32px,4.4vw,54px); line-height:1.1; letter-spacing:-.03em; font-weight:700; }
.hero__title em{
  font-style:normal;
  background:linear-gradient(100deg, var(--accent), var(--ok));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lede{ font-size:17px; line-height:1.75; color:var(--text-2); max-width:560px; margin-top:var(--s5); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s8); }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:var(--s5); margin-top:var(--s8);
  padding-top:var(--s6); border-top:1px solid var(--line-subtle);
}
.hero__meta div{ display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-label); color:var(--text-2); }
.hero__meta .icon-sm{ color:var(--accent); }

.term{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--e3); }
.term__bar{ display:flex; align-items:center; gap:var(--s2); padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); background:var(--surface-1); }
.term__dots{ display:flex; gap:6px; }
.term__dots i{ width:10px; height:10px; border-radius:50%; background:var(--surface-4); display:block; }
.term__dots i:first-child{ background:#FF6B7A; }
.term__dots i:nth-child(2){ background:#FFC24B; }
.term__dots i:last-child{ background:#3FE0A0; }
.term__title{ font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--text-3); flex:1; text-align:center; }
.term__body{ padding:var(--s4) var(--s5); font-family:var(--font-mono); font-size:var(--fs-label); line-height:1.95; color:var(--text-2); overflow-x:auto; }
.term__body .ok{ color:var(--ok); } .term__body .ac{ color:var(--accent); }
.term__body .mu{ color:var(--text-3); } .term__body .wa{ color:var(--warn); }
.term__body b{ color:var(--text-1); font-weight:500; }
.caret{ display:inline-block; width:8px; height:15px; background:var(--accent); vertical-align:-2px; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ── 指标条 ── */
.stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface-1); }
.stats__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:var(--s6) var(--s5); border-right:1px solid var(--line-subtle); }
.stat:last-child{ border-right:none; }
.stat__v{ font-family:var(--font-mono); font-size:26px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.stat__v small{ font-size:13px; font-weight:600; color:var(--text-2); font-family:var(--font-ui); margin-left:2px; }
.stat__k{ font-size:var(--fs-label); color:var(--text-2); margin-top:6px; }
@media (max-width:820px){
  .stats__in{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-bottom:1px solid var(--line-subtle); }
  .stat:nth-child(2n){ border-right:none; }
}

/* ── 区块 ── */
.section{ padding:var(--s16) 0; }
.section--alt{ background:var(--surface-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section__head{ max-width:660px; margin-bottom:var(--s10); }
.section__head h2{ font-size:clamp(24px,2.6vw,32px); letter-spacing:-.02em; }
.section__head p{ font-size:15px; color:var(--text-2); margin-top:var(--s3); line-height:1.7; }
.tag{ display:inline-block; font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--accent); letter-spacing:.06em; margin-bottom:var(--s3); }

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--s4); }
.card{
  position:relative; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3);
  transition:border-color var(--dur-2), transform var(--dur-2) var(--ease);
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(320px 140px at 20% 0%, var(--accent-soft), transparent 70%);
  opacity:0; transition:opacity var(--dur-3);
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.card:hover::after{ opacity:1; }
.card__ico{
  width:42px; height:42px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);
}
.card h3{ font-size:var(--fs-h2); position:relative; }
.card p{ font-size:var(--fs-body); color:var(--text-2); line-height:1.7; position:relative; }
.card__meta{ margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--line-subtle); font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--text-3); }

/* ── 表格 ── */
.table-wrap{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2); }
.table-wrap table{ width:100%; border-collapse:collapse; font-size:var(--fs-body); }
.table-wrap th{ text-align:left; padding:var(--s3) var(--s5); font-size:var(--fs-caption); font-weight:600; color:var(--text-2); background:var(--surface-1); border-bottom:1px solid var(--line); white-space:nowrap; }
.table-wrap td{ padding:var(--s3) var(--s5); border-bottom:1px solid var(--line-subtle); vertical-align:middle; }
.table-wrap tbody tr:last-child td{ border-bottom:none; }
.table-wrap tbody tr{ transition:background var(--dur-1); }
.table-wrap tbody tr:hover{ background:var(--surface-3); }
@media (max-width:640px){ .table-wrap{ overflow-x:auto; } .table-wrap table{ min-width:560px; } }

/* ── 快速开始 ── */
.steps{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--s8); align-items:start; }
@media (max-width:960px){ .steps{ grid-template-columns:1fr; } }
.tabs{ display:inline-flex; padding:3px; gap:2px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--s4); }
.tabs button{ height:32px; padding:0 var(--s4); border:none; border-radius:var(--r-xs); background:transparent; color:var(--text-2); font-size:var(--fs-label); font-weight:600; cursor:pointer; transition:background var(--dur-1), color var(--dur-1); }
.tabs button:hover{ color:var(--text-1); }
.tabs button[aria-selected="true"]{ background:var(--surface-0); color:var(--accent); box-shadow:var(--e1); }
.code{ position:relative; background:var(--surface-0); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); padding-right:56px; font-family:var(--font-mono); font-size:var(--fs-label); line-height:1.9; color:var(--text-2); overflow-x:auto; }
.code b{ color:var(--accent); font-weight:400; } .code i{ color:var(--text-3); font-style:normal; } .code em{ color:var(--ok); font-style:normal; }
.code__copy{ position:absolute; top:var(--s3); right:var(--s3); width:34px; height:34px; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); color:var(--text-2); cursor:pointer; transition:color var(--dur-1), border-color var(--dur-1); }
.code__copy:hover{ color:var(--accent); border-color:var(--accent-line); }
.steplist{ display:flex; flex-direction:column; gap:var(--s5); }
.step{ display:grid; grid-template-columns:30px 1fr; gap:var(--s4); }
.step__n{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-family:var(--font-mono); font-size:var(--fs-label); font-weight:700; }
.step h3{ font-size:var(--fs-h2); margin-bottom:5px; }
.step p{ font-size:var(--fs-body); color:var(--text-2); line-height:1.7; }

/* ── 固件下载 ── */
.fw-toolbar{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s5); }
.fw-toolbar .search{ position:relative; display:flex; align-items:center; flex:1; min-width:200px; }
.fw-toolbar .search .icon-sm{ position:absolute; left:11px; color:var(--text-3); pointer-events:none; }
.fw-toolbar .input{ height:38px; width:100%; padding:0 var(--s3) 0 34px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); font-size:var(--fs-body); color:var(--text-1); transition:border-color var(--dur-1), box-shadow var(--dur-1); }
.fw-toolbar .input::placeholder{ color:var(--text-3); }
.fw-toolbar .input:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.seg{ display:inline-flex; padding:3px; gap:2px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); }
.seg button{ height:30px; padding:0 var(--s3); border:none; border-radius:var(--r-xs); background:transparent; color:var(--text-2); font-size:var(--fs-label); font-weight:600; cursor:pointer; transition:background var(--dur-1), color var(--dur-1); }
.seg button[aria-pressed="true"]{ background:var(--surface-0); color:var(--accent); box-shadow:var(--e1); }
.hash{ font-family:var(--font-mono); font-size:var(--fs-label); color:var(--text-3); }

/* ── CTA / 页脚 / Toast ── */
.cta{ position:relative; overflow:hidden; text-align:center; padding:var(--s16) var(--s6); background:radial-gradient(700px 380px at 50% 110%, rgba(61,199,245,.20), transparent 70%), var(--surface-1); border-top:1px solid var(--line); }
.cta h2{ font-size:clamp(24px,2.8vw,34px); letter-spacing:-.02em; }
.cta p{ font-size:15px; color:var(--text-2); margin-top:var(--s3); max-width:520px; margin-left:auto; margin-right:auto; }
.cta__actions{ display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; margin-top:var(--s8); }
.footer{ background:var(--surface-0); border-top:1px solid var(--line); padding:var(--s10) 0 var(--s6); }
.footer__in{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:var(--s8); }
@media (max-width:820px){ .footer__in{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__in{ grid-template-columns:1fr; } }
.footer h4{ font-size:var(--fs-label); font-weight:600; color:var(--text-1); margin-bottom:var(--s4); }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:var(--s2); }
.footer a{ font-size:var(--fs-label); color:var(--text-2); transition:color var(--dur-1); }
.footer a:hover{ color:var(--accent); }
.footer__desc{ font-size:var(--fs-label); color:var(--text-2); margin-top:var(--s4); max-width:280px; line-height:1.7; }
.footer__bottom{ display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s10); padding-top:var(--s5); border-top:1px solid var(--line-subtle); font-size:var(--fs-caption); color:var(--text-3); }
.toasts{ position:fixed; right:var(--s5); bottom:var(--s5); z-index:var(--z-toast); display:flex; flex-direction:column; gap:var(--s2); max-width:340px; }
.toast{ display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3) var(--s4); border-radius:var(--r-md); background:var(--surface-3); border:1px solid var(--line-strong); box-shadow:var(--e2); font-size:var(--fs-label); animation:slide-in var(--dur-3) var(--ease); }
@keyframes slide-in{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }
.toast--ok{ border-color:var(--ok-line); } .toast--ok .icon-sm{ color:var(--ok); }
.toast--info .icon-sm{ color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}