/*
 * 88BB Home AI Production v1.1
 * Homepage-only, text-first hero principle card.
 * Does not modify shared Header, Footer, Drawer, or other pages.
 */
body[data-page="home"] .home-ai-principle-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 385px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid rgba(112, 231, 239, .26);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 18%, rgba(111, 89, 255, .18), transparent 31%),
    radial-gradient(circle at 18% 86%, rgba(70, 228, 222, .12), transparent 35%),
    linear-gradient(145deg, rgba(8, 20, 34, .94), rgba(6, 13, 27, .9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 26px 70px rgba(0, 0, 0, .34);
}

body[data-page="home"] .home-ai-principle-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .34;
  background-image:
    linear-gradient(rgba(96, 224, 238, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 224, 238, .075) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(110deg, rgba(0,0,0,.95), transparent 88%);
}

body[data-page="home"] .home-ai-principle-card::after {
  content: "AI";
  position: absolute;
  right: clamp(18px, 4vw, 42px);
  top: 50%;
  z-index: -1;
  transform: translateY(-52%);
  font-size: clamp(112px, 12vw, 180px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(99, 224, 239, .12);
  text-shadow: 0 0 44px rgba(94, 220, 235, .05);
  user-select: none;
}

body[data-page="home"] .home-ai-principle-copy {
  position: relative;
  z-index: 1;
  width: min(100%, 470px);
}

body[data-page="home"] .home-ai-principle-copy .home-kicker {
  margin: 0 0 14px;
  color: #68e6ed;
  letter-spacing: .12em;
}

body[data-page="home"] .home-ai-principle-copy h3 {
  max-width: 430px;
  margin: 0 0 18px;
  font-size: clamp(26px, 2.25vw, 35px);
  line-height: 1.16;
  letter-spacing: -.035em;
  color: #f7fbff;
  text-wrap: balance;
}

body[data-page="home"] .home-ai-principle-copy > p:not(.home-kicker) {
  max-width: 455px;
  margin: 0;
  color: rgba(224, 236, 247, .76);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.78;
}

body[data-page="home"] .home-ai-principle-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

body[data-page="home"] .home-ai-principle-points span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(100, 226, 237, .2);
  border-radius: 999px;
  background: rgba(10, 25, 38, .72);
  color: rgba(235, 247, 255, .86);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .025em;
}

@media (max-width: 1180px) {
  body[data-page="home"] .home-hero-visual.home-hero-andy {
    min-height: auto !important;
  }

  body[data-page="home"] .home-ai-principle-card {
    min-height: 330px;
  }

  body[data-page="home"] .home-ai-principle-copy {
    width: min(100%, 590px);
  }

  body[data-page="home"] .home-ai-principle-copy h3,
  body[data-page="home"] .home-ai-principle-copy > p:not(.home-kicker) {
    max-width: 560px;
  }
}

@media (max-width: 760px) {
  body[data-page="home"] .home-ai-principle-card {
    min-height: auto;
    padding: 28px 22px;
    border-radius: 22px;
  }

  body[data-page="home"] .home-ai-principle-card::after {
    right: 20px;
    top: 30px;
    transform: none;
    font-size: 92px;
  }

  body[data-page="home"] .home-ai-principle-copy h3 {
    font-size: clamp(25px, 7vw, 32px);
  }

  body[data-page="home"] .home-ai-principle-copy > p:not(.home-kicker) {
    font-size: 14px;
    line-height: 1.72;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .home-ai-principle-card,
  body[data-page="home"] .home-ai-principle-card * {
    animation: none !important;
    transition: none !important;
  }
}


/* Typography refinement v1.1
 * Keep meaningful Chinese phrases together and add a restrained premium gradient
 * to major display headings. Body copy remains solid for readability.
 */
body[data-page="home"] .home-hero-title,
body[data-page="home"] .home-ai-principle-copy h3,
body[data-page="home"] .home-section-head h2,
body[data-page="home"] .home-section-copy h2,
body[data-page="home"] .home-market-head h2,
body[data-page="home"] .home-radar-head h3,
body[data-page="home"] .home-contact-soft h2 {
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: pretty;
}

body[data-page="home"] .home-ai-principle-copy h3 {
  max-width: 100%;
  font-size: clamp(25px, 2.05vw, 33px);
  line-height: 1.18;
  letter-spacing: -.032em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body[data-page="home"] .home-hero-title,
  body[data-page="home"] .home-ai-principle-copy h3,
  body[data-page="home"] .home-section-head h2,
  body[data-page="home"] .home-section-copy h2,
  body[data-page="home"] .home-market-head h2,
  body[data-page="home"] .home-radar-head h3,
  body[data-page="home"] .home-contact-soft h2 {
    color: #f7fbff;
    background-image: linear-gradient(
      105deg,
      #ffffff 0%,
      #f1fbff 28%,
      #bceff2 58%,
      #d8c9ff 100%
    );
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Preserve the warm risk-first identity instead of turning it cyan-purple. */
  body[data-page="home"] .home-risk-boundary h2 {
    background-image: linear-gradient(105deg, #fff4d0 0%, #f8d98d 52%, #fff0b8 100%);
  }
}

@media (max-width: 760px) {
  body[data-page="home"] .home-ai-principle-copy h3 {
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.2;
  }
}

/* ========================================================================
 * 88BB Home AI Production v1.3 | Final homepage typography and visibility
 * Scope: homepage only. Shared Header, Footer, Drawer and business logic stay
 * untouched. The 1180px site rail is preserved; only editorial headings are
 * allowed to use more of that rail.
 * ======================================================================== */

/* Stable Chinese/English line breaking for display copy. */
body[data-page="home"] .home-hero-title,
body[data-page="home"] .home-ai-principle-copy h3,
body[data-page="home"] .home-section-head h2,
body[data-page="home"] .home-section-copy h2,
body[data-page="home"] .home-community-panel h2,
body[data-page="home"] .home-market-head h2,
body[data-page="home"] .home-radar-head h3,
body[data-page="home"] .home-contact-soft h2,
body[data-page="home"] .home-risk-copy h2 {
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
  text-rendering: optimizeLegibility;
}

/* Make the right-side AI principle statement feel deliberate, never cramped. */
body[data-page="home"] .home-ai-principle-copy {
  width: min(100%, 490px);
}

body[data-page="home"] .home-ai-principle-copy h3 {
  max-width: 470px;
  font-size: clamp(26px, 2vw, 32px);
  line-height: 1.16;
  letter-spacing: -.032em;
}

body[data-page="home"] .home-ai-principle-copy > p:not(.home-kicker) {
  max-width: 470px;
}

/* Premium gradient for major editorial headings only. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body[data-page="home"] .home-hero-title,
  body[data-page="home"] .home-ai-principle-copy h3,
  body[data-page="home"] .home-section-head h2,
  body[data-page="home"] .home-section-copy h2,
  body[data-page="home"] .home-community-panel h2,
  body[data-page="home"] .home-market-head h2,
  body[data-page="home"] .home-radar-head h3,
  body[data-page="home"] .home-contact-soft h2 {
    color: #f7fbff;
    background: linear-gradient(
      102deg,
      #ffffff 0%,
      #eefcff 30%,
      #aeeaf0 62%,
      #d5c5ff 100%
    );
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 12px 34px rgba(94, 221, 235, .08);
  }
}

/* Full-width editorial headings above four-card grids.
 * At 1180px rail width, 38–40px typography carries about 25–26 Chinese
 * characters before wrapping. It does not widen the page itself.
 */
@media (min-width: 981px) {
  body[data-page="home"] #platform-overview .home-section-head,
  body[data-page="home"] #start-path .home-section-head,
  body[data-page="home"] #today .home-section-head,
  body[data-page="home"] #system .home-section-head,
  body[data-page="home"] #tools .home-section-head,
  body[data-page="home"] #membership .home-section-head,
  body[data-page="home"] #faq .home-section-head {
    max-width: 1120px !important;
  }

  body[data-page="home"] #platform-overview .home-section-head h2,
  body[data-page="home"] #start-path .home-section-head h2,
  body[data-page="home"] #today .home-section-head h2,
  body[data-page="home"] #system .home-section-head h2,
  body[data-page="home"] #tools .home-section-head h2,
  body[data-page="home"] #membership .home-section-head h2,
  body[data-page="home"] #faq .home-section-head h2 {
    max-width: 1120px !important;
    font-size: clamp(38px, 2.85vw, 40px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.038em !important;
  }

  body[data-page="home"] #platform-overview .home-section-head > p:not(.home-kicker),
  body[data-page="home"] #start-path .home-section-head > p:not(.home-kicker),
  body[data-page="home"] #today .home-section-head > p:not(.home-kicker),
  body[data-page="home"] #system .home-section-head > p:not(.home-kicker),
  body[data-page="home"] #tools .home-section-head > p:not(.home-kicker),
  body[data-page="home"] #membership .home-section-head > p:not(.home-kicker),
  body[data-page="home"] #faq .home-section-head > p:not(.home-kicker) {
    max-width: 900px;
  }

  /* Two-column story sections need a smaller but still commanding scale. */
  body[data-page="home"] #edge-ai .home-section-copy h2,
  body[data-page="home"] #training .home-section-copy h2,
  body[data-page="home"] #learning .home-section-copy h2 {
    max-width: 100% !important;
    font-size: clamp(34px, 2.55vw, 38px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.035em !important;
  }

  body[data-page="home"] #edge-ai .home-section-copy > p:not(.home-kicker),
  body[data-page="home"] #training .home-section-copy > p:not(.home-kicker),
  body[data-page="home"] #learning .home-section-copy > p:not(.home-kicker) {
    line-height: 1.75;
  }
}

/* Risk-first closing block: use a guaranteed high-contrast gold title.
 * Do not use transparent text clipping here—the title must remain visible in
 * every browser, Android WebView and cache state.
 */
body[data-page="home"] #risk-boundary {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-page="home"] #risk-boundary > img {
  display: none !important;
}

body[data-page="home"] #risk-boundary .home-risk-copy {
  max-width: 100% !important;
}

body[data-page="home"] #risk-boundary .home-risk-copy h2 {
  max-width: 1040px !important;
  margin-bottom: 18px;
  color: #f8d98d !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #f8d98d !important;
  font-size: clamp(36px, 3vw, 44px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
  text-shadow:
    0 0 24px rgba(248, 217, 141, .18),
    0 12px 32px rgba(0, 0, 0, .28) !important;
}

body[data-page="home"] #risk-boundary .home-risk-copy > p {
  max-width: 980px;
}

body[data-page="home"] #risk-boundary .home-risk-tiles {
  max-width: 1080px;
}

/* Tablet: retain full content width but avoid desktop-sized display text. */
@media (min-width: 761px) and (max-width: 980px) {
  body[data-page="home"] .home-section-head {
    max-width: 100% !important;
  }

  body[data-page="home"] .home-section-head h2,
  body[data-page="home"] .home-section-copy h2 {
    max-width: 100% !important;
    font-size: clamp(34px, 4.3vw, 39px) !important;
    line-height: 1.14 !important;
  }
}

/* Mobile: balanced wrapping, no orphaned single-character lines. */
@media (max-width: 760px) {
  body[data-page="home"] .home-section-head,
  body[data-page="home"] .home-section-copy {
    max-width: 100% !important;
  }

  body[data-page="home"] .home-section-head h2,
  body[data-page="home"] .home-section-copy h2,
  body[data-page="home"] .home-community-panel h2,
  body[data-page="home"] .home-contact-soft h2 {
    max-width: 100% !important;
    font-size: clamp(28px, 8vw, 34px) !important;
    line-height: 1.16 !important;
    letter-spacing: -.03em !important;
  }

  body[data-page="home"] .home-ai-principle-copy h3 {
    max-width: 100%;
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.18;
  }

  body[data-page="home"] #risk-boundary .home-risk-copy h2 {
    font-size: clamp(29px, 8.2vw, 36px) !important;
    line-height: 1.16 !important;
  }

  body[data-page="home"] #risk-boundary .home-risk-tiles {
    grid-template-columns: 1fr;
  }
}