/* ============================================================
   home.css — 咔嗒Lab 首页 · 经典高级 / Apple 产品官网风
   Scoped to .ah (content) and .ka[data-page="home"] (nav override).
   Other pages are untouched.
   ============================================================ */

/* Apple-ish palette, independent of the neumorphic --soft system */
.ka[data-page="home"] {
  --ah-bg: #fbfbfd;
  --ah-alt: #f5f5f7;
  --ah-card: #ffffff;
  --ah-ink: #1d1d1f;
  --ah-sub: #6e6e73;
  --ah-line: rgba(0,0,0,0.10);
  --ah-accent: var(--accent);
  background: var(--ah-bg);
  min-height: 100vh;
}
:root[data-theme="dark"] .ka[data-page="home"] {
  --ah-bg: #000000;
  --ah-alt: #0b0b0c;
  --ah-card: #161617;
  --ah-ink: #f5f5f7;
  --ah-sub: #a1a1a6;
  --ah-line: rgba(255,255,255,0.12);
}

.ah {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Noto Sans SC", system-ui, sans-serif;
  color: var(--ah-ink);
  -webkit-font-smoothing: antialiased;
}
.ah * { box-sizing: border-box; }
.ah .wrap { max-width: 1024px; margin: 0 auto; padding: 0 24px; }
.ah .link {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--ah-accent); font-size: 17px; font-weight: 400; cursor: pointer;
  transition: opacity .2s;
}
.ah .link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ah .link .chev { font-size: 1.05em; line-height: 1; transform: translateY(0.5px); }

/* ---- Apple-style nav override (home only) ---- */
.ka[data-page="home"] .ka-navwrap { position: sticky; top: 0; z-index: 50; padding: 0; }
.ka[data-page="home"] .ka-navwrap::before { display: none; }
.ka[data-page="home"] .ka-navwrap .kc { max-width: none; padding: 0; }
.ka[data-page="home"] .ka-nav {
  max-width: 1024px; margin: 0 auto;
  background: color-mix(in srgb, var(--ah-bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--ah-line);
  padding: 0 22px; height: 52px; gap: 22px;
}
.ka[data-page="home"] .ka-nav .links { gap: 2px; margin-left: 18px; }
.ka[data-page="home"] .ka-nav .links a {
  color: var(--ah-ink); opacity: .85; font-size: 13.5px; font-weight: 400;
  padding: 8px 13px; border-radius: 8px; box-shadow: none !important;
}
.ka[data-page="home"] .ka-nav .links a:hover { opacity: 1; background: color-mix(in srgb, var(--ah-ink) 6%, transparent); }
.ka[data-page="home"] .ka-nav .links a.on { opacity: 1; }
.ka[data-page="home"] .ka-nav .theme-toggle { box-shadow: none; border: 1px solid var(--ah-line); color: var(--ah-ink); }
.ka[data-page="home"] .ka-nav .btn-accent {
  background: var(--ah-accent); color: #fff; box-shadow: none;
  padding: 8px 16px !important; font-size: 13px !important; border-radius: 980px;
}
.ka[data-page="home"] .ka-nav .btn-accent:hover { filter: brightness(1.06); transform: none; }

/* ---- HERO ---- */
.ah-hero { text-align: center; padding: 96px 24px 80px; background: var(--ah-bg); }
.ah-kicker { font-size: 21px; font-weight: 600; color: var(--ah-accent); margin: 0 0 14px; letter-spacing: -.01em; }
.ah-h1 {
  font-size: clamp(44px, 7vw, 88px); font-weight: 700; line-height: 1.04;
  letter-spacing: -.03em; margin: 0 auto 22px; max-width: 14em; color: var(--ah-ink);
}
.ah-sub {
  font-size: clamp(18px, 2vw, 24px); line-height: 1.45; font-weight: 400;
  color: var(--ah-sub); max-width: 30em; margin: 0 auto 26px; letter-spacing: -.01em;
}
.ah-hero .ah-links { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.ah-hero .link { font-size: 19px; }

/* hero showpiece — "connect" orbit: hub + 4 module nodes + signal lines */
.ah-orbit { position: relative; max-width: 980px; margin: 56px auto 0; aspect-ratio: 1000 / 460; }
.ah-orbit-glow { position: absolute; left: 50%; top: 50%; width: 70%; height: 90%; transform: translate(-50%, -50%); pointer-events: none; opacity: .3; transition: opacity .5s ease;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--ah-accent) 26%, transparent), transparent 72%); filter: blur(10px); }
.ah-orbit.is-on .ah-orbit-glow { opacity: 1; }
.ah-orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* default: disconnected (lines hidden). On hover they "咔嗒" snap-draw from hub to each node. */
.ah-orbit-lines line {
  stroke: color-mix(in srgb, var(--ah-accent) 70%, transparent); stroke-width: 1.6; fill: none; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .42s cubic-bezier(.5,0,.2,1);
}
.ah-orbit.is-on .ah-orbit-lines line { stroke-dashoffset: 0; }
.ah-orbit.is-on .ah-orbit-lines line:nth-child(1) { transition-delay: .08s; }
.ah-orbit.is-on .ah-orbit-lines line:nth-child(2) { transition-delay: .14s; }
.ah-orbit.is-on .ah-orbit-lines line:nth-child(3) { transition-delay: .20s; }
.ah-orbit.is-on .ah-orbit-lines line:nth-child(4) { transition-delay: .26s; }

.ah-node {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: clamp(13px, 1.4vw, 16px); font-weight: 500; color: var(--ah-ink); opacity: .58;
  padding: 11px 18px; border-radius: 980px; cursor: pointer;
  background: color-mix(in srgb, var(--ah-card) 86%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--ah-line); transition: transform .3s cubic-bezier(.34,1.4,.64,1), border-color .3s ease, box-shadow .3s ease, opacity .4s ease;
}
.ah-node .nd { width: 8px; height: 8px; border-radius: 50%; background: var(--ah-sub); flex: 0 0 auto; transition: background .3s ease, box-shadow .3s ease; }
.ah-node:hover { transform: translate(-50%, -50%) scale(1.06); border-color: color-mix(in srgb, var(--ah-accent) 60%, transparent); box-shadow: 0 12px 30px -12px color-mix(in oklch, var(--ah-accent) 50%, transparent); }
.ah-orbit.is-on .ah-node { opacity: 1; border-color: color-mix(in srgb, var(--ah-accent) 42%, transparent); transform: translate(-50%, -50%) scale(1.04); }
.ah-orbit.is-on .ah-node .nd { background: var(--ah-accent); box-shadow: 0 0 10px color-mix(in oklch, var(--ah-accent) 75%, transparent); }
.ah-orbit.is-on .ah-node.n1 { transition-delay: .12s; }
.ah-orbit.is-on .ah-node.n2 { transition-delay: .18s; }
.ah-orbit.is-on .ah-node.n3 { transition-delay: .24s; }
.ah-orbit.is-on .ah-node.n4 { transition-delay: .30s; }
.ah-node.n1 { left: 13%; top: 24%; }
.ah-node.n2 { left: 87%; top: 20%; }
.ah-node.n3 { left: 20%; top: 82%; }
.ah-node.n4 { left: 80%; top: 80%; }

.ah-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(120px, 16vw, 176px); height: clamp(120px, 16vw, 176px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(closest-side, var(--ah-card), color-mix(in srgb, var(--ah-card) 88%, transparent));
  border: 1px solid var(--ah-line); box-shadow: 0 24px 60px -20px color-mix(in oklch, var(--ah-accent) 30%, transparent); transition: box-shadow .4s ease; }
.ah-orbit.is-on .ah-hub { box-shadow: 0 24px 60px -18px color-mix(in oklch, var(--ah-accent) 60%, transparent); animation: ahclick .5s cubic-bezier(.34,1.56,.64,1); }
.ah-hub-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--ah-accent); opacity: 0; }
.ah-orbit.is-on .ah-hub-ring { animation: ahring 1.7s ease-out infinite; }
.ah-hub-label { font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.03em; color: var(--ah-ink); display: inline-flex; align-items: center; gap: 6px; }
.ah-hub-dot { width: clamp(8px, 1.1vw, 12px); height: clamp(8px, 1.1vw, 12px); border-radius: 50%; background: var(--ah-accent); box-shadow: 0 0 12px color-mix(in oklch, var(--ah-accent) 70%, transparent); transition: transform .3s ease; }
.ah-orbit.is-on .ah-hub-dot { animation: ahbeat 1.7s ease-out infinite; }
@keyframes ahring { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.4); opacity: 0; } 100% { opacity: 0; } }
@keyframes ahbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }
@keyframes ahclick { 0% { transform: translate(-50%, -50%) scale(.84); } 60% { transform: translate(-50%, -50%) scale(1.07); } 100% { transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ah-hub-ring, .ah-hub-dot, .ah-orbit.is-on .ah-hub { animation: none; } .ah-orbit-lines line { transition: none; } }
@media (max-width: 620px) { .ah-orbit { aspect-ratio: 1 / 1; max-width: 360px; } .ah-node { padding: 8px 13px; } }

/* ---- FEATURE ROWS ---- */
.ah-feature { padding: 92px 24px; }
.ah-feature.alt { background: var(--ah-alt); }
.ah-feature .inner { max-width: 1024px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ah-feature.flip .copy { order: 2; }
.ah-feature .eyebrow2 { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--ah-accent); margin: 0 0 14px; text-transform: none; font-family: inherit; }
.ah-feature h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 18px; color: var(--ah-ink); }
.ah-feature .fsub { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--ah-sub); margin: 0 0 22px; letter-spacing: -.005em; }
.ah-feature .fstat { display: flex; gap: 30px; margin: 0 0 24px; }
.ah-feature .fstat .v { font-size: 26px; font-weight: 700; color: var(--ah-ink); letter-spacing: -.02em; }
.ah-feature .fstat .l { font-size: 13px; color: var(--ah-sub); margin-top: 2px; }

/* preview panels (lightweight product shots) */
.ahp { background: var(--ah-card); border: 1px solid var(--ah-line); border-radius: 22px; padding: 22px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.18); }
:root[data-theme="dark"] .ahp { box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.ahp-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ahp-h .t { font-size: 13px; font-weight: 600; color: var(--ah-ink); }
.ahp-h .m { font-family: var(--font-mono); font-size: 11px; color: var(--ah-sub); }
.ahp-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ah-line); }
.ahp-row:first-of-type { border-top: none; }
.ahp-row .d { font-family: var(--font-mono); font-size: 13px; color: var(--ah-accent); white-space: nowrap; }
.ahp-row .x { flex: 1; min-width: 0; }
.ahp-row .x .a { font-size: 13.5px; font-weight: 600; color: var(--ah-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ahp-row .x .b { font-size: 12px; color: var(--ah-sub); margin-top: 2px; }
.ahp-chip { font-size: 11px; font-family: var(--font-mono); color: var(--ah-accent); padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ah-accent) 12%, transparent); white-space: nowrap; }
.ahp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ahp-mini { border: 1px solid var(--ah-line); border-radius: 14px; padding: 14px; }
.ahp-mini .cat { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ah-sub); margin-bottom: 8px; }
.ahp-mini .cat i { width: 16px; height: 16px; border-radius: 5px; display: inline-block; }
.ahp-mini .nm { font-size: 13px; font-weight: 600; color: var(--ah-ink); line-height: 1.3; margin-bottom: 5px; }
.ahp-mini .bl { font-size: 11.5px; line-height: 1.5; color: var(--ah-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ahp-post { display: flex; gap: 11px; padding: 12px 0; border-top: 1px solid var(--ah-line); }
.ahp-post:first-of-type { border-top: none; }
.ahp-post .av { width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto; }
.ahp-post .nm { font-size: 12.5px; font-weight: 600; color: var(--ah-ink); }
.ahp-post .tt { font-size: 13px; color: var(--ah-sub); margin-top: 3px; line-height: 1.4; }

/* ---- events strip ---- */
.ah-events { padding: 92px 24px; background: var(--ah-bg); }
.ah-events .head { max-width: 1024px; margin: 0 auto 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.ah-events h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--ah-ink); }
.ah-evgrid { max-width: 1024px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ah-ev { background: var(--ah-card); border: 1px solid var(--ah-line); border-radius: 20px; padding: 24px; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; min-height: 190px; }
.ah-ev:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(0,0,0,.25); }
.ah-ev .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ah-ev .date { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--ah-ink); letter-spacing: -.01em; }
.ah-ev .date span { font-size: 11px; color: var(--ah-sub); margin-left: 7px; }
.ah-ev h3 { font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0 0 8px; color: var(--ah-ink); }
.ah-ev .org { font-size: 13px; color: var(--ah-sub); margin-top: auto; }

/* ---- closing CTA ---- */
.ah-cta { padding: 110px 24px; text-align: center; background: var(--ah-alt); }
.ah-cta h2 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 700; letter-spacing: -.03em; margin: 0 0 16px; color: var(--ah-ink); }
.ah-cta p { font-size: clamp(17px,1.6vw,21px); color: var(--ah-sub); margin: 0 auto 30px; max-width: 28em; line-height: 1.5; }
.ah-cta .btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.ah-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 980px; padding: 13px 28px; font-size: 17px; font-weight: 500; cursor: pointer; transition: filter .2s, transform .2s; border: none; }
.ah-btn-primary { background: var(--ah-accent); color: #fff; }
.ah-btn-primary:hover { filter: brightness(1.07); }
.ah-btn-ghost { background: transparent; color: var(--ah-accent); border: 1px solid color-mix(in srgb, var(--ah-accent) 40%, transparent); }
.ah-btn-ghost:hover { background: color-mix(in srgb, var(--ah-accent) 8%, transparent); }

/* reuse reveal */
.ah .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.ah .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ah .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .ah-feature .inner { grid-template-columns: 1fr; gap: 30px; }
  .ah-feature.flip .copy { order: 0; }
  .ah-evgrid { grid-template-columns: 1fr; }
  .ka[data-page="home"] .ka-nav .links { display: none; }
}
@media (max-width: 620px) {
  .ah-hero { padding: 64px 20px 56px; }
  .ah-feature { padding: 64px 20px; }
  .ah-events, .ah-cta { padding: 64px 20px; }
}