.fx__grid,
.fx__aurora,
.fx__glow {
  position:absolute;
  pointer-events:none;
}

.fx__grid {
  inset:0;
  background-image:linear-gradient(var(--line-1) 1px,transparent 1px),linear-gradient(90deg,var(--line-1) 1px,transparent 1px);
  background-size:var(--sp-10) var(--sp-10);
  opacity:.55;
}

.fx__aurora {
  top:var(--sp-20);
  right:calc(-1 * var(--sp-24));
  width:76%;
  height:58%;
  border-radius:var(--r-pill);
  background:var(--grad-ai-soft);
  filter:blur(var(--sp-16));
  opacity:.9;
  transform:rotate(-8deg);
}

.fx__glow {
  top:18%;
  left:14%;
  width:72%;
  height:64%;
  border-radius:var(--r-pill);
  background:var(--grad-ai-soft);
  filter:blur(var(--sp-12));
  opacity:.72;
}

.home-hero {
  background:var(--bg-0);
}

.home-hero__layout {
  display:grid;
  min-width:0;
  align-items:center;
  gap:var(--sp-12);
}

.home-hero__copy {
  min-width:0;
}

.home-hero__trust {
  display:flex;
  margin:0 0 var(--sp-8);
  padding:0;
  flex-wrap:wrap;
  gap:var(--sp-2) var(--sp-5);
  color:var(--fg-2);
  font-family:var(--font-num);
  font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;
  list-style:none;
}

.home-hero__trust-item {
  position:relative;
  padding-left:var(--sp-4);
}

.home-hero__trust-item::before {
  position:absolute;
  top:.7em;
  left:0;
  width:var(--sp-1);
  height:var(--sp-1);
  border-radius:var(--r-pill);
  background:var(--teal-400);
  content:"";
}

/* 外框与标题栏统一由 .shot / .shot__bar 提供；这里只留尺寸。
   首屏这一张给一档更重的阴影，让它从背景里浮起来。 */
.home-workbench {
  width:min(100%,260px);
  margin:0 auto;
  box-shadow:var(--shadow-4);
}

.home-industries {
  background:var(--bg-1);
}

.home-industries__intro {
  max-width:var(--container-text);
  margin:0 auto var(--sp-10);
  text-align:center;
}

.home-industries__title {
  margin-bottom:var(--sp-3);
  font-size:var(--fs-h3);
}

.home-industries__copy {
  color:var(--fg-2);
  font-size:var(--fs-lead);
}

.home-industry-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-6) var(--sp-4);
}

.home-industry {
  display:grid;
  min-width:0;
  place-items:center;
  gap:var(--sp-2);
  color:var(--fg-2);
  text-align:center;
}

.home-industry:last-child {
  grid-column:1 / -1;
}

.home-industry__icon {
  color:var(--brand-300);
}

.home-industry__label {
  font-size:var(--fs-sm);
}

.home-pain {
  overflow:hidden;
  padding-top:var(--sp-10);
}

.home-pain::after {
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:2px;
  background:var(--grad-gold);
  opacity:.55;
  content:"";
}

.home-pain__quote {
  position:absolute;
  top:var(--sp-1);
  left:var(--sp-5);
  color:var(--line-3);
  font-family:var(--font-num);
  font-size:var(--fs-h2);
  line-height:1;
}

.home-pain .card__title {
  position:relative;
}

.home-ai {
  overflow:hidden;
}

.home-ai__inner {
  position:relative;
  z-index:var(--z-raised);
}

.home-ai__showcase {
  display:grid;
  min-width:0;
  gap:var(--sp-6);
}

/* 外框统一由 .shot 提供（04-components.css） */

.home-ai-card {
  display:flex;
  height:100%;
  flex-direction:column;
  color:var(--fg-1);
  text-decoration:none;
}

.home-ai-card:hover {
  color:var(--fg-1);
}

/* Keep card headings from leaving a single orphaned character at the
   intermediate desktop widths where the copy column is narrower. */
.home-ai-card .card__title,
.home-platform .card__title,
.home-module__title {
  text-wrap:balance;
}

.home-card-link {
  display:inline-flex;
  margin-top:auto;
  padding-top:var(--sp-5);
  color:var(--brand-300);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semi);
}

.home-platform {
  display:flex;
  min-height:100%;
  flex-direction:column;
}

.home-platform__icon {
  display:grid;
  width:var(--sp-16);
  height:var(--sp-16);
  margin-bottom:var(--sp-5);
  place-items:center;
  border:1px solid var(--line-brand);
  border-radius:var(--r-md);
  background:var(--bg-2);
  color:var(--brand-300);
}

/* 四端预览的设备框。此前 04-components.css 里还有一份 .device 定义
   （2px 边、--r-lg、--bg-2、shadow-2），与这里逐条冲突，已删除那一份。
   圆角统一到 --r-lg，与全站截图外框 .shot 保持同一套语言。 */
.device {
  position:relative;
  display:grid;
  width:100%;
  aspect-ratio:4 / 3;
  margin:var(--sp-6) 0 0;
  padding:var(--sp-3);
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:var(--bg-0);
}

.device__image {
  width:100%;
  max-height:100%;
  object-fit:contain;
}

.device--phone .device__image {
  width:auto;
  height:100%;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
}

/* Give the four platform previews enough vertical room to read the
   interface, while preserving a compact 4:3 frame on phones and tablets. */
.home-platforms .device {
  aspect-ratio:4 / 3;
}

.home-modules {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-3);
}

.home-module {
  min-width:0;
  padding:var(--sp-3);
  overflow:hidden;
}

.home-module__summary {
  display:flex;
  min-width:0;
  min-height:116px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:var(--sp-3);
  cursor:pointer;
  list-style:none;
}

.home-module__summary::-webkit-details-marker {
  display:none;
}

.home-module__summary::marker {
  content:"";
}

.home-module .card__icon {
  margin:0;
  flex:none;
}

.home-module__title {
  max-width:100%;
  color:var(--fg-1);
  font-size:var(--fs-body);
  font-weight:var(--fw-bold);
  line-height:var(--lh-snug);
}

.home-module__reveal {
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:opacity var(--d-2) var(--e-out);
}

.home-module__copy {
  min-height:0;
  margin:0;
  overflow:hidden;
  color:var(--fg-2);
  font-size:var(--fs-xs);
}

.home-module:hover .home-module__reveal,
.home-module:focus-within .home-module__reveal,
.home-module[open] .home-module__reveal {
  grid-template-rows:1fr;
  opacity:1;
}

.home-module:hover .home-module__copy,
.home-module:focus-within .home-module__copy,
.home-module[open] .home-module__copy {
  padding-top:var(--sp-4);
}

.home-modules__facts {
  margin:var(--sp-8) 0 0;
  padding:var(--sp-5);
  border:1px solid var(--line-1);
  border-radius:var(--r-md);
  background:var(--bg-2);
  color:var(--fg-2);
  font-family:var(--font-num);
  font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;
  text-align:center;
}

.home-section-link {
  margin-top:var(--sp-8);
}

/* 五条差异化是一个连续列表，两组之间不再插入章节分隔线，
   避免读者误以为「换了一个主题」。间距与组内保持一致。 */
.home-diff__group--continuation {
  margin-top:var(--sp-section-sm);
}

.home-diff__title {
  margin-bottom:var(--sp-4);
}

.home-diff__group .split__media {
  box-shadow:var(--shadow-2);
}

.home-diff__image {
  width:100%;
}.home-metrics__inner {
  position:relative;
  z-index:var(--z-raised);
}

.home-metrics__band {
  position:absolute;
  top:50%;
  right:0;
  left:0;
  height:1px;
  background:var(--grad-line);
  opacity:.55;
}.home-cta {
  margin-top:0;
  grid-template-columns:1fr;
}

.home-cta__meta {
  margin-top:var(--sp-4);
  color:var(--fg-3);
  font-size:var(--fs-sm);
}

.home-cta__art {
  width:var(--sp-24);
  height:var(--sp-24);
  color:var(--brand-300);
}

@media (min-width:640px) {
  .fx__grid {
    background-size:var(--sp-16) var(--sp-16);
  }
  .home-industry-list {
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .home-industry:last-child {
    grid-column:auto;
  }
  .home-ai__showcase {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .home-ai__visual {
    grid-column:1 / -1;
  }
  .home-modules {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--sp-4);
  }
  .home-module {
    padding:var(--sp-5);
  }}

/* Scale the workbench continuously through the tablet range. This keeps the
   stacked portrait layout from looking undersized and hands the two-column
   layout a visual that fills its column naturally. */
@media (min-width:640px) and (max-width:899px) {
  .home-workbench {
    width:min(100%,clamp(300px,52vw,380px));
  }
}

@media (min-width:900px) {
  .fx__aurora {
    filter:blur(var(--sp-24));
  }
  .fx__glow {
    filter:blur(var(--sp-20));
  }
  .home-hero__layout {
    grid-template-columns:minmax(0,6fr) minmax(340px,5fr);
    gap:var(--sp-10);
  }
  .home-workbench {
    width:min(100%,460px);
    margin-right:0;
    transform:rotate(-1deg);
  }
  .home-ai__showcase {
    grid-template-columns:minmax(0,1fr) minmax(320px,1.1fr) minmax(0,1fr);
    grid-template-rows:repeat(2,minmax(0,1fr));
    align-items:stretch;
  }
  .home-ai__visual {
    grid-row:1 / 3;
    grid-column:2;
    align-self:center;
  }
  .home-ai-card--one {
    grid-row:1;
    grid-column:1;
  }
  .home-ai-card--two {
    grid-row:1;
    grid-column:3;
  }
  .home-ai-card--three {
    grid-row:2;
    grid-column:1;
  }
  .home-ai-card--four {
    grid-row:2;
    grid-column:3;
  }
  .home-modules {
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  .home-platforms .device {
    aspect-ratio:1 / 1;
  }
}

/* Between the mobile drawer and the wide desktop composition, give the
   showcase and module index enough measure to read comfortably. Keep this
   middle composition through 1279px so the 1200px container breakpoint does
   not also force three independent layout changes in the same frame. */
@media (min-width:900px) and (max-width:1279px) {
  .home-ai__showcase {
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "visual visual"
      "one two"
      "three four";
    grid-template-rows:auto auto auto;
    align-items:stretch;
  }

  .home-ai__visual {
    grid-area:visual;
    width:min(100%,640px);
    margin-inline:auto;
    align-self:start;
  }

  .home-ai-card--one { grid-area:one; }
  .home-ai-card--two { grid-area:two; }
  .home-ai-card--three { grid-area:three; }
  .home-ai-card--four { grid-area:four; }

  .home-modules {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--sp-4);
  }

  /* .cards--4 becomes four columns in the shared layout at 1200px. The
     platform previews need two readable columns until the wide composition
     has enough measure to make all four devices useful side by side. */
  .home-platforms {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .home-module {
    padding:var(--sp-5);
  }
}

@media (min-width:640px) and (max-width:759px) {
  /* The stacked tablet hero should hand the next band back to the reader
     instead of reserving a desktop-sized empty floor below the preview. */
  .hero {
    min-height:min(74svh,620px);
    padding-bottom:var(--sp-8);
  }
}

@media (min-width:1280px) {  .home-cta {
    grid-template-columns:minmax(0,1fr) auto auto;
  }
}

/* Let the enlarged workbench breathe on regular phones without pushing the
   next band too far below the fold. The narrowest tier trims one more gap. */
@media (min-width:360px) and (max-width:639px) {
  .home-hero__layout {
    gap:var(--sp-8);
  }

  .home-workbench {
    width:min(100%,300px);
  }
}

/* Keep the home statement intact on the narrowest phones. At 320px the
   default display tier leaves the final Chinese character on its own line;
   this compact tier also returns a hint of the next section to the first
   viewport without shrinking body copy. */
@media (max-width:359px) {
  .home-hero {
    padding-top:calc(var(--nav-h) + var(--sp-6));
    padding-bottom:var(--sp-4);
  }

  .home-hero__layout {
    gap:var(--sp-4);
  }

  .home-hero h1 {
    margin-bottom:var(--sp-4);
    font-size:23px;
  }

  .home-hero .hero__actions {
    gap:var(--sp-2);
  }

  .home-hero .hero__actions .btn {
    --h:48px;
  }

  .home-workbench {
    width:min(100%,280px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .home-workbench {
    transform:none;
  }
}

/* 「AI 到底帮你省下了什么」：左边说这件事以前怎么做，右边给一个
   一眼能记住的数字。数字来自产品本身的能力，不是客户经营结果——
   后者需要真实客户数据才能写。 */
.impact {
  margin:var(--sp-8) 0 0;
  padding:0;
  border-top:1px solid var(--line-1);
  list-style:none;
}

.impact__row {
  display:grid;
  gap:var(--sp-4);
  padding:var(--sp-6) 0;
  border-bottom:1px solid var(--line-1);
}

.impact__task h3 {
  margin:0;
  font-size:var(--fs-h4);
}

.impact__before {
  margin:var(--sp-2) 0 0;
  color:var(--fg-3);
  font-size:var(--fs-sm);
}

.impact__num {
  margin:0;
  background:var(--grad-brand);
  background-clip:text;
  color:transparent;
  font-family:var(--font-num);
  font-size:clamp(34px,5vw,44px);
  font-weight:var(--fw-bold);
  line-height:1;
  -webkit-background-clip:text;
}

.impact__unit {
  margin-left:var(--sp-2);
  font-size:var(--fs-lead);
  font-weight:var(--fw-semi);
}

.impact__desc {
  margin:var(--sp-3) 0 0;
  color:var(--fg-2);
  font-size:var(--fs-sm);
}

.home-impact__closing {
  max-width:var(--container-text);
  margin:var(--sp-8) 0 0;
  color:var(--fg-2);
  font-size:var(--fs-sm);
}

@media (min-width:900px) {
  .impact__row {
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    align-items:center;
    gap:var(--sp-10);
  }
}