/* Philosophy proof sequence: principles -> six system paths -> residential cases. */
html body[data-page="philosophy"] main > #home-capabilities {
  width: min(1704px, calc(100vw - 72px));
  margin: clamp(72px, 7vw, 112px) auto;
  padding: clamp(34px, 3vw, 52px);
  box-sizing: border-box;
  border: 1px solid rgba(20, 35, 54, .1);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 0%, rgba(69, 92, 255, .12), transparent 31%),
    radial-gradient(circle at 4% 100%, rgba(0, 202, 214, .12), transparent 28%),
    #f6f7fb;
  box-shadow: 0 30px 90px rgba(21, 37, 62, .09);
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, .72fr);
  align-items: end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: clamp(28px, 2.6vw, 42px);
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-kicker {
  margin: 0 0 12px;
  color: #4a55de;
  font: 650 12px/1.2 "SF Pro Display", "PingFang SC", sans-serif;
  letter-spacing: .18em;
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-head h2 {
  margin: 0;
  color: #111a2d;
  font: 560 clamp(30px, 3vw, 40px)/1.1 "SF Pro Display", "PingFang SC", sans-serif;
  letter-spacing: -.045em;
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-head > p {
  max-width: 620px;
  margin: 0 0 4px;
  color: #536078;
  font: 400 clamp(15px, 1.08vw, 18px)/1.8 "SF Pro Text", "PingFang SC", sans-serif;
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-card {
  --card-bg: #17233e;
  --card-fg: #fff;
  --card-muted: rgba(255,255,255,.72);
  --card-line: rgba(255,255,255,.28);
  position: relative;
  display: grid;
  min-height: 250px;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  color: var(--card-fg);
  background: var(--card-bg);
  text-decoration: none;
  isolation: isolate;
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-card::before {
  position: absolute;
  z-index: -1;
  right: -18%;
  bottom: -46%;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid var(--card-line);
  border-radius: 50%;
  box-shadow: 0 0 0 34px color-mix(in srgb, var(--card-line) 54%, transparent), 0 0 0 72px color-mix(in srgb, var(--card-line) 30%, transparent);
  content: "";
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-card::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 42%);
  content: "";
}

html body[data-page="philosophy"] #home-capabilities .is-air { grid-column: span 5; --card-bg: linear-gradient(135deg, #075aff, #00a6ff); }
html body[data-page="philosophy"] #home-capabilities .is-five { grid-column: span 4; --card-bg: linear-gradient(135deg, #6647ff, #a13dff); }
html body[data-page="philosophy"] #home-capabilities .is-basement { grid-column: span 3; --card-bg: linear-gradient(145deg, #082c43, #096f83); }
html body[data-page="philosophy"] #home-capabilities .is-water { grid-column: span 3; --card-bg: linear-gradient(135deg, #00a5b8, #30d1bf); }
html body[data-page="philosophy"] #home-capabilities .is-delivery { grid-column: span 5; --card-bg: linear-gradient(135deg, #ff5c31, #ff9b2f); }
html body[data-page="philosophy"] #home-capabilities .is-lifecycle {
  grid-column: span 4;
  --card-bg: linear-gradient(135deg, #c9f14a, #f4e94c);
  --card-fg: #152218;
  --card-muted: rgba(21,34,24,.66);
  --card-line: rgba(21,34,24,.18);
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-no {
  align-self: start;
  justify-self: start;
  padding: 7px 10px;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  color: var(--card-muted);
  font: 650 11px/1 "SF Mono", sans-serif;
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-symbol {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 66px;
  height: 66px;
  color: var(--card-fg);
  opacity: .88;
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-symbol svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-copy {
  align-self: end;
  display: grid;
  gap: 5px;
  max-width: calc(100% - 48px);
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-copy small {
  color: var(--card-muted);
  font: 650 10px/1.2 "SF Pro Display", sans-serif;
  letter-spacing: .16em;
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-copy strong {
  color: var(--card-fg);
  font: 580 clamp(24px, 2vw, 32px)/1.1 "SF Pro Display", "PingFang SC", sans-serif;
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-copy > span {
  color: var(--card-muted);
  font: 420 clamp(13px, .96vw, 16px)/1.55 "SF Pro Text", "PingFang SC", sans-serif;
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-arrow {
  position: absolute;
  right: 21px;
  bottom: 20px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--card-line);
  border-radius: 50%;
  color: var(--card-fg);
  font: 400 19px/1 sans-serif;
}

html body[data-page="philosophy"] #home-capabilities .zf-home-capability-live {
  position: absolute;
  top: 30px;
  right: 98px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #6330e5;
  background: rgba(255,255,255,.9);
  font: 650 11px/1 "PingFang SC", sans-serif;
}

@media (max-width: 1100px) {
  html body[data-page="philosophy"] main > #home-capabilities {
    width: calc(100vw - 32px);
    padding: 28px;
  }
  html body[data-page="philosophy"] #home-capabilities .zf-home-capability-head { grid-template-columns: 1fr; gap: 16px; }
  html body[data-page="philosophy"] #home-capabilities .zf-home-capability-card { grid-column: span 6 !important; }
}

@media (max-width: 640px) {
  html body[data-page="philosophy"] main > #home-capabilities {
    width: calc(100vw - 20px);
    margin-block: 54px;
    padding: 22px 14px 14px;
    border-radius: 24px;
  }
  html body[data-page="philosophy"] #home-capabilities .zf-home-capability-head { margin-bottom: 22px; }
  html body[data-page="philosophy"] #home-capabilities .zf-home-capability-head h2 { font-size: 30px; }
  html body[data-page="philosophy"] #home-capabilities .zf-home-capability-grid { gap: 10px; }
  html body[data-page="philosophy"] #home-capabilities .zf-home-capability-card {
    grid-column: span 12 !important;
    min-height: 198px;
    padding: 20px;
    border-radius: 20px;
  }
  html body[data-page="philosophy"] #home-capabilities .zf-home-capability-symbol { width: 56px; height: 56px; }
  html body[data-page="philosophy"] #home-capabilities .zf-home-capability-live { top: 26px; right: 84px; }
}