@charset "UTF-8";
:root{
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --text-main:#0b1220;
  --text-sub:#6b7280;
  --bg-main:#f7f8fb;
  --bg-card:#ffffff;
  --border-soft:#e5e7eb;
  --radius-lg:18px;
  --radius-md:14px;
  --shadow-soft: 0 14px 40px rgba(15,23,42,0.08);
  --shadow-soft2: 0 10px 26px rgba(15,23,42,0.06);
  --max-width:1120px;
}

/* comment removed */
.focus-card-dark{
  background: radial-gradient(circle at 20% 0, rgba(37,99,235,0.22) 0, rgba(15,23,42,0.10) 55%, rgba(255,255,255,0.0) 100%), #0b1120;
  border-color: rgba(148,163,184,0.22);
  color: rgba(255,255,255,0.92);
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.focus-card-dark .focus-sub{ color: rgba(255,255,255,0.70); }


*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text","Segoe UI", sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(37,99,235,0.10), rgba(37,99,235,0.0) 55%),
    radial-gradient(900px 500px at 85% 20%, rgba(100,116,139,0.10), rgba(100,116,139,0.0) 60%),
    linear-gradient(to bottom, #f8fafc 0%, #f1f5f9 45%, #eef2f7 100%);
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
.container{
  width:100%;
  max-width: var(--max-width);
  margin:0 auto;
  padding:0 16px;
}

/* comment removed */
.site-header{
  position: sticky;
  top:0;
  z-index: 30;
  background: rgba(247,248,251,0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(229,231,235,0.75);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 0;
  gap: 16px;
}
.nav-left{ display:flex; align-items:center; gap:10px; }
.nav-logo{
  width:34px; height:34px; border-radius:999px;
  background: radial-gradient(circle at 30% 0, #bfdbfe 0, #2563eb 45%, #1d4ed8 100%);
  box-shadow: 0 10px 24px rgba(37,99,235,0.20);
}
.nav-title{ font-weight:800; letter-spacing:.02em; font-size:16px; }
.nav-subtitle{ font-size:11px; color: var(--text-sub); }

.nav-menu{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:14px;
}
.nav-link{
  position:relative;
  color: var(--text-sub);
  padding-bottom:2px;
  cursor:pointer;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--primary), #7c3aed);
  transition: width .22s ease;
}
.nav-link:hover{ color: var(--text-main); }
.nav-link:hover::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; gap:10px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:13px;
  padding: 9px 16px;
  border: 1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-lg{ padding: 11px 18px; font-size:14px; }

.btn-primary{
  color:#fff;
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  box-shadow: 0 18px 44px rgba(37,99,235,0.26);
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 54px rgba(37,99,235,0.34);
}
.btn-outline{
  background: rgba(255,255,255,0.72);
  border-color: rgba(229,231,235,0.9);
  color: var(--text-main);
}
.btn-outline:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(15,23,42,0.08);
}

.nav-toggle{
  display:none;
  width:34px; height:34px;
  border-radius:999px;
  border: 1px solid rgba(229,231,235,0.9);
  background:#fff;
  align-items:center;
  justify-content:center;
  font-size:18px;
  cursor:pointer;
}

/* comment removed */
.hero{ padding: 42px 0 30px; position:relative; }
.hero-v2{ padding-top: 46px; }
.hero-grid{
  display:grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 34px;
  align-items: start;
}
.hero-left{ position:relative; z-index:1; }

.hero-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  padding: 6px 12px;
  border-radius:999px;
  background: rgba(37,99,235,0.10);
  color: #1d4ed8;
  border: 1px solid rgba(37,99,235,0.16);
  margin-bottom: 14px;
}
.hero-tag-dot{
  width:9px; height:9px; border-radius:999px;
  background: radial-gradient(circle, #22c55e, #15803d);
}
.hero-title{
  font-size: 34px;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: .01em;
  margin-bottom: 12px;
}
.hero-desc{
  font-size: 14px;
  color: var(--text-sub);
  max-width: 520px;
  margin-bottom: 18px;
}
.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}

/* comment removed */
.hero-under{
  margin-top: 14px;
  display: grid;
  gap: 14px;
}

.hero-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(229,231,235,0.9);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px);
  color: #374151;
}

.hero-mini-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.hero-mini-card{
  display:block;
  border-radius: 16px;
  border: 1px solid rgba(229,231,235,0.9);
  padding: 14px;
  box-shadow: var(--shadow-soft2);
  transition: transform .16s ease, box-shadow .16s ease;
}
.hero-mini-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(15,23,42,0.12);
}
.hero-mini-card.dark{
  background: radial-gradient(circle at 10% 0, #111827 0, #0b1220 45%, #0b1120 100%);
  border-color: rgba(148,163,184,0.22);
}

.mini-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}
.mini-pill{
  font-size: 11px;
  padding: 4px 10px;
  border-radius:999px;
  background: rgba(37,99,235,0.12);
  color:#1d4ed8;
}
.hero-mini-card.dark .mini-pill{
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
}
.mini-arrow{ font-size:14px; color:#6b7280; }
.hero-mini-card.dark .mini-arrow{ color: rgba(255,255,255,0.7); }

.mini-title{
  font-weight: 800;
  font-size: 13px;
  color: #111827;
  margin-bottom: 6px;
  line-height: 1.35;
}
.hero-mini-card.dark .mini-title{ color: rgba(255,255,255,0.92); }

.mini-sub{
  font-size: 12px;
  color: #6b7280;
  line-height: 1.6;
}
.hero-mini-card.dark .mini-sub{ color: rgba(255,255,255,0.70); }

.hero-trust{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.trust-item{
  border: 1px solid rgba(229,231,235,0.9);
  border-radius: 14px;
  padding: 10px 12px;
}
.trust-k{ font-size: 11px; color:#6b7280; margin-bottom: 3px; }
.trust-v{ font-size: 12px; font-weight: 700; color:#111827; }

/* comment removed */
.hero-right{ position:relative; z-index:1; }
.hero-right-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(229,231,235,0.9);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.hero-right-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}
.hero-right-title{ font-size: 13px; font-weight: 800; color:#0b1220; }
.status-pill{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34,197,94,0.14);
  color: #15803d;
  border: 1px solid rgba(34,197,94,0.20);
}
.status-pill-v2{
  background: rgba(37,99,235,0.10);
  color: #1d4ed8;
  border-color: rgba(37,99,235,0.18);
}
.focus-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.focus-card{
  border-radius: 16px;
  border: 1px solid rgba(229,231,235,0.9);
  padding: 12px 12px;
}
.focus-card-dark{
  background: radial-gradient(circle at 20% 0, rgba(37,99,235,0.22) 0, rgba(15,23,42,0.10) 55%, rgba(255,255,255,0.0) 100%), #0b1120;
  border-color: rgba(148,163,184,0.22);
  color: rgba(255,255,255,0.92);
}
.focus-icon{ font-size: 18px; margin-bottom: 6px; }
.focus-title{ font-weight: 800; font-size: 13px; margin-bottom: 4px; }
.focus-sub{ font-size: 12px; color: #6b7280; }
.focus-card-dark .focus-sub{ color: rgba(255,255,255,0.70); }

.hero-right-footer{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 11px;
  color: #6b7280;
}
.hero-right-progress{
  flex:1;
  height: 8px;
  border-radius: 999px;
  background: rgba(229,231,235,0.85);
  overflow:hidden;
}
.hero-right-progress-inner{
  width: 68%;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

/* comment removed */
.hero-bg-blobs{
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(520px 260px at 20% 10%, rgba(37,99,235,0.18), rgba(37,99,235,0.0) 70%),
    radial-gradient(560px 280px at 80% 30%, rgba(124,58,237,0.14), rgba(124,58,237,0.0) 70%);
  filter: blur(0px);
}

/* comment removed */
.section{ padding: 34px 0 40px; }
.section-head{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-bottom: 16px;
}
.section-head.center{ text-align:center; align-items:center; }
.section-kicker{
  font-size: 12px;
  color: #6b7280;
  letter-spacing: .02em;
}
.section-title{ font-size: 18px; font-weight: 800; }
.section-title-xl{
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .01em;
}
.section-subtitle{
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
  max-width: 760px;
}
.section-desc{
  font-size: 13px;
  color: var(--text-sub);
  max-width: 760px;
}
/* comment removed */
.section {
  padding: 10px 0 32px;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
}

.section-desc {
  font-size: 13px;
  color: var(--text-sub);
  max-width: 380px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.card {
  border-radius: var(--radius-md);
  padding: 16px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background-color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
}

.card-desc {
  font-size: 12px;
  color: var(--text-sub);
  flex: 1;
}

.card-footer-link {
  font-size: 12px;
  color: var(--primary-dark);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.card-footer-link span {
  font-size: 14px;
}

/* comment removed */
.section-mm-video {
  padding-top: 28px;
  padding-bottom: 36px;
}

.section-mm-video .section-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}

.section-mm-video .section-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 18px;
  line-height: 1.6;
}

/* comment removed */
.mm-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .mm-video-grid {
    grid-template-columns: 1fr;
  }
}

.mm-card {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  padding: 14px 14px 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.mm-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  background: #eff6ff;
  color: #1d4ed8;
  margin-bottom: 8px;
}

.mm-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.mm-text {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 8px;
}

.mm-list {
  padding-left: 14px;
  margin: 0;
  list-style: none;
}

.mm-list li {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 2px;
}

/* comment removed */
.site-footer {
  border-top: 1px solid var(--border-soft);
  padding: 16px 0 24px;
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 10px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-link {
  cursor: pointer;
}

.footer-link:hover {
  color: var(--primary-dark);
}

/* comment removed */

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .nav-menu,
  .nav-actions {
    display: none;
  }

  /* comment removed */
  .nav-menu.is-open,
  .nav-actions.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 16px;
    top: 56px;
    padding: 12px;
    border-radius: 14px;
    background-color: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
    min-width: 160px;
    gap: 10px;
  }

  .nav-actions.is-open {
    position: static;
    box-shadow: none;
    flex-direction: row;
    margin-top: 6px;
  }

  .nav-toggle {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  .section-header {
    flex-direction: column;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 24px;
  }
}

/* comment removed */
.section-news {
  padding-top: 28px;
  padding-bottom: 40px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.section-news .section-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}

.section-news .section-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 16px;
  line-height: 1.6;
}

/* comment removed */
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* comment removed */
.news-card {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  padding: 14px 14px 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #9ca3af;
}

.news-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
}

.news-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.5;
}

.news-excerpt {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.6;
  flex: 1;
}

.news-link {
  margin-top: 4px;
  font-size: 12px;
  color: #2563eb;
  text-decoration: none;
}

.news-link:hover {
  text-decoration: underline;
}

.news-more-wrapper {
  text-align: center;
  margin-top: 26px;
}

.news-more-btn {
  display: inline-block;
  padding: 10px 22px;
  font-size: 14px;
  background: #2563eb;
  color: #ffffff;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.25s ease;
}

.news-more-btn:hover {
  background: #1d4ed8;
}

/* comment removed */
.feature-zoom-trigger {
  cursor: pointer;
}

.feature-zoom-trigger:hover {
  text-decoration: underline;
}

/* comment removed */
.feature-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;              /* comment removed */
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* comment removed */
.feature-zoom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
}

/* comment removed */
.feature-zoom-panel {
  position: relative;
  max-width: 720px;
  width: 100%;
  max-height: min(520px, 80vh);
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  padding: 20px 22px 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* comment removed */
.feature-zoom-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: rgba(148, 163, 184, 0.1);
  color: #6b7280;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease;
}

.feature-zoom-close:hover {
  background: rgba(148, 163, 184, 0.25);
  transform: translateY(-1px);
}

/* comment removed */
.feature-zoom-title {
  font-size: 18px;
  font-weight: 600;
  margin-right: 40px;
  margin-bottom: 4px;
}

.feature-zoom-tagline {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 12px;
}

/* comment removed */
.feature-zoom-body {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed #e5e7eb;
  font-size: 13px;
  color: #374151;
  line-height: 1.7;
  overflow-y: auto;
}

/* comment removed */
.feature-zoom-body h4 {
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 4px;
}

/* comment removed */
.feature-zoom-body p {
  margin-bottom: 6px;
}

/* comment removed */
.feature-zoom-body ul {
  padding-left: 18px;
  margin-bottom: 6px;
}

.feature-zoom-body li {
  list-style: disc;
  margin-bottom: 3px;
}

/* comment removed */
@media (max-width: 640px) {
  .feature-zoom-panel {
    max-width: 100%;
    padding: 16px 14px 16px;
    max-height: 85vh;
  }

  .feature-zoom-title {
    font-size: 16px;
  }

  .feature-zoom-tagline {
    font-size: 12px;
  }

  .feature-zoom-body {
    font-size: 12px;
  }
}

/* comment removed */

.hero-focus-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* comment removed */
.hero-focus-card {
  border-radius: var(--radius-lg);
  padding: 16px 16px 14px;
  background: radial-gradient(
    circle at 10% 0,
    #eff6ff 0,
    #ffffff 45%,
    #e5e7eb 100%
  );
  border: 1px solid rgba(229, 231, 235, 0.9);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.2s ease;
}

.hero-focus-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  border-color: var(--primary);
}

/* comment removed */
.hero-focus-card-media {
  background: radial-gradient(
    circle at 0 0,
    #0f172a 0,
    #020617 55%,
    #020617 100%
  );
  border-color: rgba(148, 163, 184, 0.7);
  color: #e5e7eb;
}

/* comment removed */
.hero-focus-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.9);
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.hero-focus-card-media .hero-focus-tag {
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
}

/* comment removed */
.hero-focus-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.hero-focus-desc {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 8px;
  line-height: 1.6;
}

.hero-focus-card-media .hero-focus-desc {
  color: #cbd5f5;
}

.hero-focus-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.hero-focus-list li {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 3px;
}

.hero-focus-card-media .hero-focus-list li {
  color: #9ca3ff;
}

/* comment removed */
@media (max-width: 900px) {
  .hero-focus-grid {
    margin-top: 6px;
  }
}

/* comment removed */

.feature-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

/* comment removed */
.feature-zoom-overlay.is-open {
  pointer-events: auto;
  opacity: 1;
}

/* comment removed */
.feature-zoom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
}

/* comment removed */
.feature-zoom-panel {
  position: relative;
  width: 92%;
  max-width: 780px;
  max-height: 80vh;
  background: #ffffff;
  border-radius: 20px;
  padding: 20px 20px 18px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.55);
  z-index: 1;
  overflow-y: auto;
}

/* comment removed */
.feature-zoom-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.06);
  color: #4b5563;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.12s ease;
}

.feature-zoom-close:hover {
  background: rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

/* comment removed */
.feature-zoom-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.feature-zoom-tagline {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 14px;
}

/* comment removed */
.feature-zoom-body {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.7;
}

.feature-zoom-body h4 {
  font-size: 14px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 4px;
}

.feature-zoom-body ul {
  padding-left: 18px;
  margin: 0 0 6px;
}

.feature-zoom-body li {
  margin-bottom: 3px;
}

/* comment removed */
@media (max-width: 640px) {
  .feature-zoom-panel {
    width: 94%;
    max-height: 84vh;
    padding: 16px 14px 14px;
    border-radius: 16px;
  }

  .feature-zoom-title {
    font-size: 16px;
  }

  .feature-zoom-tagline {
    font-size: 12px;
  }
  
  /* comment removed */
  .hero-under{
    margin-top: 14px;
    display: grid;
    gap: 14px;
  }
  
  .hero-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .chip{
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(229,231,235,0.9);
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    color: #374151;
  }
  
  .hero-mini-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  
  .hero-mini-card{
    display: block;
    border-radius: 16px;
    border: 1px solid rgba(229,231,235,0.9);
    background: #ffffff;
    padding: 14px;
    box-shadow: 0 10px 26px rgba(15,23,42,0.06);
    transition: transform .16s ease, box-shadow .16s ease;
  }
  
  .hero-mini-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(15,23,42,0.10);
  }
  
  .hero-mini-card.dark{
    background: radial-gradient(circle at 10% 0, #111827 0, #0b1220 45%, #0b1120 100%);
    border-color: rgba(148,163,184,0.22);
  }
  
  .mini-card-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  
  .mini-pill{
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(37,99,235,0.12);
    color: #1d4ed8;
  }
  
  .hero-mini-card.dark .mini-pill{
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.92);
  }
  
  .mini-arrow{
    font-size: 14px;
    color: #6b7280;
  }
  
  .hero-mini-card.dark .mini-arrow{
    color: rgba(255,255,255,0.7);
  }
  
  .mini-title{
    font-weight: 700;
    font-size: 13px;
    color: #111827;
    margin-bottom: 6px;
    line-height: 1.35;
  }
  
  .hero-mini-card.dark .mini-title{
    color: rgba(255,255,255,0.92);
  }
  
  .mini-sub{
    font-size: 12px;
    color: #6b7280;
    line-height: 1.6;
  }
  
  .hero-mini-card.dark .mini-sub{
    color: rgba(255,255,255,0.70);
  }
  
  .hero-trust{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  
  .trust-item{
    border: 1px solid rgba(229,231,235,0.9);
    border-radius: 14px;
    background: rgba(255,255,255,0.65);
    padding: 10px 12px;
  }
  
  .trust-k{
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 3px;
  }
  
  .trust-v{
    font-size: 12px;
    font-weight: 600;
    color: #111827;
  }
  
  /* comment removed */
  @media (max-width: 900px){
    .hero-mini-grid{
      grid-template-columns: 1fr;
    }
    .hero-trust{
      grid-template-columns: 1fr;
    }
  
  
.center-wrap{
  display:flex;
  justify-content:center;
}

.not-effort-card{
  max-width: 760px;   /* comment removed */
  width: 100%;
}

}
}


/* =========================
   Glass System (Blue-Gray)
   - Applies glass look to all card-style components without changing HTML
   ========================= */
:root{
  --glass-tint: 226,232,240;
  --glass-alpha: 0.28;
  --glass-alpha-strong: 0.36;
  --glass-alpha-soft: 0.22;
--glass-blur: 22px;
  --glass-border: rgba(255,255,255,0.55);
  --glass-shadow: 0 14px 40px rgba(15,23,42,0.08);
}

/* Unified glass for card-like surfaces */
.card,
.mm-card,
.news-card,
.hero-right-card,
.hero-mini-card,
.focus-card:not(.focus-card-dark),
.trust-item{
  
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18)),
    rgba(var(--glass-tint), var(--glass-alpha));
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
}

/* comment removed */
.hero-right-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.22)),
    rgba(var(--glass-tint), var(--glass-alpha-strong));
}

/* Softer glass for smaller info pills */
.trust-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14)),
    rgba(var(--glass-tint), var(--glass-alpha-soft));
}

/* Keep dark cards as designed */
.hero-mini-card.dark{
  background: radial-gradient(circle at 10% 0, #111827 0, #0b1220 45%, #0b1120 100%);
  border-color: rgba(148,163,184,0.22);
  box-shadow: var(--shadow-soft2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* =========================
   Glass Card Edge Boost (Perspective Impact)
   ========================= */

/* Stronger edges + depth */
.card,
.mm-card,
.news-card,
.hero-right-card,
.hero-mini-card,
.focus-card:not(.focus-card-dark),
.trust-item{
  position: relative;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 -1px 0 rgba(15,23,42,0.06),
    0 18px 42px rgba(15,23,42,0.12),
    0 0 0 1px rgba(37,99,235,0.10);
}

/* Hover impact */
.card:hover,
.mm-card:hover,
.news-card:hover,
.hero-right-card:hover,
.hero-mini-card:hover,
.focus-card:not(.focus-card-dark):hover{
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(15,23,42,0.08),
    0 26px 60px rgba(15,23,42,0.18),
    0 0 0 1px rgba(37,99,235,0.18);
}

/* Hero main card: stronger emphasis */
.hero-right-card{
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(15,23,42,0.08),
    0 28px 70px rgba(15,23,42,0.22),
    0 0 0 1px rgba(37,99,235,0.22);
}

/* Dark cards stay dark and keep their own hover logic */
.hero-mini-card.dark:hover{
  transform: translateY(-2px);
}
.focus-card-dark:hover{
  transform: none;
}


/* comment removed */

.card,
.mm-card,
.news-card,
.hero-right-card,
.hero-mini-card,
.focus-card:not(.focus-card-dark),
.trust-item{
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow:
    /* inner highlight */
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -2px 0 rgba(15,23,42,0.10),
    /* depth */
    0 30px 80px rgba(15,23,42,0.22),
    /* hard edge separation */
    0 0 0 2px rgba(37,99,235,0.22);
}

.card:hover,
.mm-card:hover,
.news-card:hover,
.hero-right-card:hover,
.hero-mini-card:hover,
.focus-card:not(.focus-card-dark):hover{
  transform: translateY(-5px) scale(1.01);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(15,23,42,0.14),
    0 44px 110px rgba(15,23,42,0.30),
    0 0 0 3px rgba(37,99,235,0.35);
}


/* =========================
   3D Card System (v4 base)
   - Adds true depth + specular highlight
   - Works best on desktop; degrades gracefully on touch
   ========================= */

/* 1) Scene perspective: apply to layout containers that hold cards */
.hero-grid,
.card-grid,
.mm-video-grid,
.news-grid,
.hero-focus-grid,
.hero-mini-grid{
  perspective: 1100px;
  perspective-origin: 50% 30%;
}

/* 2) Enable 3D transforms on cards */
.card,
.mm-card,
.news-card,
.hero-right-card,
.hero-mini-card,
.focus-card:not(.focus-card-dark),
.trust-item{
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

/* 3) Specular highlight layer */
.card::before,
.mm-card::before,
.news-card::before,
.hero-right-card::before,
.hero-mini-card::before,
.focus-card:not(.focus-card-dark)::before,
.trust-item::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  background: radial-gradient(900px 420px at 20% 0%, rgba(255,255,255,0.75), rgba(255,255,255,0.0) 55%);
  transform: translateZ(1px);
  transition: opacity 220ms ease;
}

/* 4) Strong 3D hover (desktop) */
@media (hover:hover) and (pointer:fine){
  .card:hover,
  .mm-card:hover,
  .news-card:hover,
  .hero-right-card:hover,
  .hero-mini-card:hover,
  .focus-card:not(.focus-card-dark):hover{
    transform: translateY(-6px) rotateX(7deg) rotateY(-7deg) translateZ(14px) scale(1.01);
  }

  .card:hover::before,
  .mm-card:hover::before,
  .news-card:hover::before,
  .hero-right-card:hover::before,
  .hero-mini-card:hover::before,
  .focus-card:not(.focus-card-dark):hover::before,
  .trust-item:hover::before{
    opacity: 0.9;
  }

  /* comment removed */
  .hero-right-card:hover{
    transform: translateY(-7px) rotateX(8deg) rotateY(8deg) translateZ(18px) scale(1.012);
  }

  /* Trust items: lighter tilt */
  .trust-item:hover{
    transform: translateY(-3px) rotateX(5deg) rotateY(-5deg) translateZ(10px);
  }
}

/* 5) Touch devices: disable aggressive 3D to avoid oddities */
@media (hover:none){
  .card,
  .mm-card,
  .news-card,
  .hero-right-card,
  .hero-mini-card,
  .focus-card:not(.focus-card-dark),
  .trust-item{
    transform: none !important;
  }
  .card::before,
  .mm-card::before,
  .news-card::before,
  .hero-right-card::before,
  .hero-mini-card::before,
  .focus-card:not(.focus-card-dark)::before,
  .trust-item::before{
    display:none;
  }
}

/* 6) Ensure dark cards are not affected */
.hero-mini-card.dark{
  transform-style: preserve-3d;
}
.focus-card-dark{
  transform-style: preserve-3d;
}


/* Liquid Glass dynamic legibility: busy backgrounds become slightly more solid */
.bg-busy{
  --glass-alpha: 0.36;
  --glass-alpha-strong: 0.46;
  --glass-alpha-soft: 0.28;
}


/* =========================
   Dark Liquid Glass (for dark cards)
   ========================= */

/* Dark glass tokens */
:root{
  --glass-dark-tint: 2,6,23;        /* slate-950 */
  --glass-dark-alpha: 0.42;         /* base */
  --glass-dark-alpha-strong: 0.52;  /* stronger */
  --glass-dark-border: rgba(255,255,255,0.18);
  --glass-dark-border-strong: rgba(255,255,255,0.24);
  --glass-dark-shadow: 0 22px 70px rgba(0,0,0,0.35);
}

/* When background is busy, make dark glass a bit more solid for legibility */
.bg-busy{
  --glass-dark-alpha: 0.50;
  --glass-dark-alpha-strong: 0.60;
}

/* Apply dark liquid glass to your dark cards */
.hero-mini-card.dark,
.focus-card-dark{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
    rgba(var(--glass-dark-tint), var(--glass-dark-alpha));
  border: 1px solid var(--glass-dark-border);
  box-shadow: var(--glass-dark-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  color: rgba(255,255,255,0.92);
}

/* Slightly stronger for hero dark mini card */
.hero-mini-card.dark{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)),
    rgba(var(--glass-dark-tint), var(--glass-dark-alpha-strong));
  border-color: var(--glass-dark-border-strong);
}

/* Subtext on dark cards */
.hero-mini-card.dark .hero-mini-sub,
.focus-card-dark .focus-sub{
  color: rgba(255,255,255,0.70);
}

/* Specular highlight for dark glass */
.hero-mini-card.dark::before,
.focus-card-dark::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0.0;
  background: radial-gradient(900px 420px at 20% 0%, rgba(255,255,255,0.32), rgba(255,255,255,0.0) 55%);
  transition: opacity 220ms ease;
}

/* Desktop hover: give dark glass some lift + highlight */
@media (hover:hover) and (pointer:fine){
  .hero-mini-card.dark:hover,
  .focus-card-dark:hover{
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 34px 110px rgba(0,0,0,0.45);
  }
  .hero-mini-card.dark:hover::before,
  .focus-card-dark:hover::before{
    opacity: 0.9;
  }
}


/* =========================
   Pop Interaction (Same pop method as dark cards, keep current colors)
   - Applies to all cards: stronger lift + highlight + edge separation
   ========================= */

.card,
.mm-card,
.news-card,
.hero-right-card,
.hero-mini-card,
.focus-card,
.trust-item{
  position: relative;
  transform-style: preserve-3d;
  will-change: transform, box-shadow, border-color, filter;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

/* Specular highlight layer (does not change base color) */
.card::before,
.mm-card::before,
.news-card::before,
.hero-right-card::before,
.hero-mini-card::before,
.focus-card::before,
.trust-item::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  background: radial-gradient(900px 420px at 20% 0%, rgba(255,255,255,0.70), rgba(255,255,255,0.0) 55%);
  transform: translateZ(1px);
  transition: opacity 220ms ease;
}

/* Desktop hover: strong pop */
@media (hover:hover) and (pointer:fine){
  .card:hover,
  .mm-card:hover,
  .news-card:hover,
  .hero-right-card:hover,
  .hero-mini-card:hover,
  .focus-card:hover,
  .trust-item:hover{
    transform: translateY(-7px) scale(1.012);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,0.92),
      inset 0 -2px 0 rgba(15,23,42,0.12),
      0 44px 120px rgba(15,23,42,0.30),
      0 0 0 3px rgba(37,99,235,0.26);
  }

  .card:hover::before,
  .mm-card:hover::before,
  .news-card:hover::before,
  .hero-right-card:hover::before,
  .hero-mini-card:hover::before,
  .focus-card:hover::before,
  .trust-item:hover::before{
    opacity: 0.95;
  }

  /* Keep your dark-cards hover readable and punchy */
  .hero-mini-card.dark:hover,
  .focus-card-dark:hover{
    box-shadow: 0 44px 120px rgba(0,0,0,0.45);
  }
}

/* Touch devices: disable highlight layer to avoid oddities */
@media (hover:none){
  .card::before,
  .mm-card::before,
  .news-card::before,
  .hero-right-card::before,
  .hero-mini-card::before,
  .focus-card::before,
  .trust-item::before{
    display:none;
  }
}


/* =========================
   Global Background (Blue-Gray Liquid)
   ========================= */
:root{
  --bg-top: #f8fafc;
  --bg-mid: #f1f5f9;
  --bg-bot: #eef2f7;

  --bg-blob-blue: rgba(37,99,235,0.10);
  --bg-blob-slate: rgba(100,116,139,0.10);

  --bg-divider: rgba(148,163,184,0.28);
}

/* Site background */
body{
  background:
    radial-gradient(1200px 600px at 12% -10%, var(--bg-blob-blue), rgba(37,99,235,0.0) 56%),
    radial-gradient(900px 520px at 88% 18%, var(--bg-blob-slate), rgba(100,116,139,0.0) 62%),
    linear-gradient(to bottom, var(--bg-top) 0%, var(--bg-mid) 46%, var(--bg-bot) 100%);
}

/* Hero zone ambiance (works if your hero uses .hero or #home; harmless otherwise) */
.hero,
#home{
  position: relative;
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(37,99,235,0.14), rgba(37,99,235,0.0) 62%),
    radial-gradient(800px 420px at 82% 25%, rgba(100,116,139,0.14), rgba(100,116,139,0.0) 64%);
}

/* Default sections stay transparent for a cleaner “liquid” feel */
.section{
  background: transparent;
}

/* High-density info sections (e.g., news) get a gentle layer */
.section-news{
  border-top: 1px solid var(--bg-divider);
  background: linear-gradient(
    to bottom,
    rgba(241,245,249,0.90),
    rgba(226,232,240,0.88)
  );
}

/* B-mode support: when background is “busy”, slightly calm the page base */
.bg-busy body{
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(37,99,235,0.12), rgba(37,99,235,0.0) 56%),
    radial-gradient(900px 520px at 88% 18%, rgba(100,116,139,0.12), rgba(100,116,139,0.0) 62%),
    linear-gradient(to bottom, #f7fafc 0%, #eef2f7 55%, #e9eef6 100%);
}




/* =========================
   Dynamic Background (Liquid Motion)
   ========================= */
body::before{
  content:"";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(700px 420px at 20% 20%, rgba(37,99,235,0.16), rgba(37,99,235,0.0) 62%),
    radial-gradient(760px 460px at 80% 30%, rgba(100,116,139,0.16), rgba(100,116,139,0.0) 66%),
    radial-gradient(520px 360px at 55% 85%, rgba(59,130,246,0.10), rgba(59,130,246,0.0) 70%);
  filter: blur(18px);
  opacity: 0.9;
  transform: translate3d(0,0,0);
  animation: bgFloat 18s ease-in-out infinite;
}

@keyframes bgFloat{
  0%   { transform: translate3d(-1.2%, -0.8%, 0) scale(1.02); }
  50%  { transform: translate3d( 1.6%,  1.0%, 0) scale(1.05); }
  100% { transform: translate3d(-1.2%, -0.8%, 0) scale(1.02); }
}

@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
}


/* =========================
   Dynamic Glass Blur (Variables)
   ========================= */
:root{
  --glass-blur-dyn: var(--glass-blur);
  --glass-sat-dyn: 1.35;
  --glass-highlight: 0;
}

.card,
.mm-card,
.news-card,
.hero-right-card,
.hero-mini-card,
.focus-card,
.trust-item{
  backdrop-filter: blur(var(--glass-blur-dyn)) saturate(var(--glass-sat-dyn));
  -webkit-backdrop-filter: blur(var(--glass-blur-dyn)) saturate(var(--glass-sat-dyn));
}

.card::before,
.mm-card::before,
.news-card::before,
.hero-right-card::before,
.hero-mini-card::before,
.focus-card::before,
.trust-item::before{
  opacity: calc(var(--glass-highlight) * 0.95);
}


/* =========================
   Top Navigation – Liquid Gradient Glass
   ========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background:
    linear-gradient(
      90deg,
      rgba(248,250,252,0.75) 0%,
      rgba(240,245,255,0.78) 40%,
      rgba(243,240,255,0.78) 60%,
      rgba(248,250,252,0.75) 100%
    );
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  border-bottom: 1px solid rgba(148,163,184,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 8px 24px rgba(15,23,42,0.06);
  transition:
    background 240ms ease,
    backdrop-filter 240ms ease,
    box-shadow 240ms ease;
}

/* Optional: stronger state when your JS adds .nav-scrolled */
.site-header.nav-scrolled{
  background:
    linear-gradient(
      90deg,
      rgba(248,250,252,0.92) 0%,
      rgba(235,242,255,0.94) 40%,
      rgba(236,232,255,0.94) 60%,
      rgba(248,250,252,0.92) 100%
    );
  backdrop-filter: blur(18px) saturate(1.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 10px 32px rgba(15,23,42,0.12);
}

/* =========================
   1) Logo subtle breathing glow
   ========================= */
.site-header :is(.brand, .logo, .nav-brand){
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-header :is(.brand, .logo, .nav-brand)::before{
  content:"";
  position:absolute;
  left: -14px;
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translateY(-50%);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(circle at 35% 35%, rgba(37,99,235,0.35), rgba(37,99,235,0.0) 62%),
    radial-gradient(circle at 70% 55%, rgba(124,58,237,0.22), rgba(124,58,237,0.0) 68%);
  filter: blur(10px);
  animation: logoGlow 5.2s ease-in-out infinite;
}

@keyframes logoGlow{
  0%   { transform: translateY(-50%) scale(0.98); opacity: 0.44; filter: blur(10px); }
  50%  { transform: translateY(-50%) scale(1.05); opacity: 0.70; filter: blur(12px); }
  100% { transform: translateY(-50%) scale(0.98); opacity: 0.44; filter: blur(10px); }
}

@media (prefers-reduced-motion: reduce){
  .site-header :is(.brand, .logo, .nav-brand)::before{ animation: none; }
}

/* ===============================
   梵曜 · 判断引擎™ 右下角胶囊
   =============================== */

.decision-capsule{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
}

.capsule-inner{
  position: relative;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(229,231,235,0.75);
  box-shadow: 0 18px 48px rgba(15,23,42,0.12);
  cursor: default;

  transition: 
    border-radius .28s ease,
    padding .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}

/* 主标题 */
.capsule-title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #111827;
}

/* 英文弱化 */
.capsule-sub{
  font-size: 10px;
  color: #6b7280;
  margin-top: -2px;
}

/* 展开内容（默认隐藏） */
.capsule-expand{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all .28s ease;
}

/* hover 展开 */
.capsule-inner:hover{
  border-radius: 18px;
  padding: 14px 16px;
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(15,23,42,0.18);
}

.capsule-inner:hover .capsule-expand{
  max-height: 200px;
  opacity: 1;
  margin-top: 10px;
}

/* 展开文案 */
.capsule-slogan{
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #111827;
}

.capsule-desc{
  font-size: 12px;
  line-height: 1.7;
  color: #4b5563;
}

/* 标签 */
.capsule-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.capsule-tags span{
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(37,99,235,0.10);
  color: #1d4ed8;
  border: 1px solid rgba(37,99,235,0.14);
}

/* 移动端适当弱化 */
@media (max-width: 768px){
  .decision-capsule{
    right: 12px;
    bottom: 12px;
  }
}


.section-flow-anim {
  padding: 64px 0 80px;
  position: relative;
}

.flow-anim-title {
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 48px;
}

/* 整条流程轨道 */
.flow-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* 节点 */
.flow-node {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(229,231,235,0.7);
  box-shadow: 0 18px 40px rgba(15,23,42,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transform-style: preserve-3d;
  transition: all .35s ease;
  opacity: 0.45;
}

/* 激活态 */
.flow-node.active {
  opacity: 1;
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 28px 64px rgba(37,99,235,0.25);
}

/* 圆点 */
.flow-node .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 0 12px rgba(37,99,235,0.6);
}

/* 标签文字（极简） */
.flow-node .label {
  font-size: 13px;
  font-weight: 800;
  color: #111827;
}

/* 连接线 */
.flow-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(37,99,235,0.2),
    rgba(37,99,235,0.6),
    rgba(37,99,235,0.2)
  );
  background-size: 200% 100%;
  animation: flowLine 2.2s linear infinite;
}

@keyframes flowLine {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

/* hover 3D */
.flow-node:hover {
  transform: translateY(-10px) rotateX(6deg);
  opacity: 1;
}

//* =========================
   右下角：梵曜 · 判断引擎™（铺满空缺版）
   ========================= */

/* 关键：把这个模块固定在 Hero 右下角空位 */
.de-card{
  position: absolute;
  right: 22px;
  bottom: 22px;

  /* 你截图里的空缺区域较大：这里给一个“铺满感”的尺寸 */
  width: min(520px, 42vw);
  max-width: 560px;

  padding: 18px;
  border-radius: 22px;

  border: 1px solid rgba(180,200,255,0.55);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 28px 70px rgba(15,23,42,0.20),
    inset 0 1px 0 rgba(255,255,255,0.75);

  overflow: hidden;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* 轻微 3D 浮起 */
.de-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 34px 90px rgba(15,23,42,0.26),
    inset 0 1px 0 rgba(255,255,255,0.78);
  border-color: rgba(150,180,255,0.75);
}

/* 顶部高光渐变（更“iOS毛玻璃”） */
.de-card::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto -20%;
  height: 220px;
  background: radial-gradient(circle at 30% 40%,
    rgba(37,99,235,0.22),
    rgba(124,58,237,0.12),
    transparent 60%);
  filter: blur(10px);
  pointer-events: none;
}

/* 顶部 */
.de-top{
  position: relative;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.de-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.de-mark{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 30%, #bfdbfe 0, #2563eb 45%, #1d4ed8 100%);
  box-shadow: 0 14px 30px rgba(37,99,235,0.22);
}

.de-name{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .02em;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.de-en{
  font-size: 12px;
  color: rgba(55,65,81,0.72);
}

/* 顶部按钮 */
.de-btn{
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,0.18);
  background: rgba(37,99,235,0.10);
  color: #1d4ed8;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  white-space: nowrap;
}
.de-btn:hover{
  transform: translateY(-1px);
  background: rgba(37,99,235,0.14);
  border-color: rgba(37,99,235,0.28);
}

/* 标题 */
.de-title{
  position: relative;
  font-size: 18px;
  font-weight: 900;
  color: #0b1220;
  margin-bottom: 6px;
  line-height: 1.3;
}

.de-sub{
  position: relative;
  font-size: 12.5px;
  color: rgba(75,85,99,0.78);
  line-height: 1.7;
  margin-bottom: 12px;
}

/* 三列小卡（引擎分层） */
.de-grid{
  position: relative;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.de-item{
  border-radius: 16px;
  border: 1px solid rgba(229,231,235,0.70);
  background: rgba(255,255,255,0.62);
  padding: 10px 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
  transition: transform .16s ease, border-color .16s ease;
}
.de-item:hover{
  transform: translateY(-1px);
  border-color: rgba(160,190,255,0.70);
}

.de-k{
  font-size: 11px;
  color: rgba(107,114,128,0.9);
  margin-bottom: 4px;
}

.de-v{
  font-size: 13px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 6px;
}

.de-d{
  font-size: 12px;
  color: rgba(75,85,99,0.78);
  line-height: 1.6;
}

/* 底部：进度条 + CTA */
.de-footer{
  position: relative;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.de-progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(229,231,235,0.8);
  overflow:hidden;
  border: 1px solid rgba(229,231,235,0.8);
}

.de-progress-bar{
  height: 100%;
  width: 68%;
  background: linear-gradient(90deg, rgba(34,197,94,0.95), rgba(37,99,235,0.70));
}

.de-cta{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.de-cta-k{
  font-size: 11px;
  color: rgba(107,114,128,0.9);
  margin-bottom: 2px;
}
.de-cta-v{
  font-size: 12.5px;
  font-weight: 800;
  color: #111827;
}

.de-cta-btn{
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 14px 32px rgba(37,99,235,0.26);
  transition: transform .14s ease, box-shadow .14s ease;
  white-space: nowrap;
}
.de-cta-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(37,99,235,0.34);
}

/* ========== 响应式：移动端不遮挡内容 ========== */
@media (max-width: 900px){
  .de-card{
    position: static;       /* 取消绝对定位，避免挡住内容 */
    width: 100%;
    max-width: 100%;
    margin-top: 14px;
  }
  .de-grid{
    grid-template-columns: 1fr;
  }
  .de-cta{
    flex-direction: column;
    align-items: stretch;
  }
  .de-cta-btn{
    width: 100%;
    text-align: center;
  }
}


.logo-wrap {
  width: 44px;              /* 和你现在视觉一致，可微调 */
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;           /* 防止被挤压 */
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 关键：自动裁切，不拉伸 */
  display: block;
}



/* =========================
   FY Decision Engine (A) - Left Glass Panel
   只影响弹窗，不改你现有 btn 样式
   ========================= */

.fy-engine-wrapper{
  position: relative;
  display: inline-block;
  /* 3D 场景 */
  perspective: 1200px;
  z-index: 6; /* 防止被 hero 背景层压住 */
}

/* 弹窗：默认隐藏 */
.fy-engine-panel{
  position: absolute;
  top: 50%;
  right: calc(100% + 16px);   /* ✅ 左侧展开 */
  transform: translateY(-50%) translateX(10px) rotateY(10deg) rotateX(4deg);
  transform-origin: right center;

  width: 420px;
  max-width: min(420px, calc(100vw - 28px));
  padding: 16px 16px 14px;

  /* 毛玻璃 + 高斯模糊 */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.20)),
    rgba(226,232,240,0.22);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 18px;

  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);

  /* 立体层次 */
  box-shadow:
    0 42px 120px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(37,99,235,0.16),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(15,23,42,0.10);

  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .28s ease;
  will-change: transform, opacity;

  overflow: hidden; /* 让高光层干净 */
}

/* Hover：显示弹窗 */
@media (hover:hover) and (pointer:fine){
  .fy-engine-wrapper:hover .fy-engine-panel{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0) rotateY(0deg) rotateX(0deg);
  }
}

/* 小屏：改成下方弹出，避免左侧不够空间 */
@media (max-width: 640px){
  .fy-engine-panel{
    top: calc(100% + 12px);
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: min(420px, calc(100vw - 28px));
  }
  .fy-engine-wrapper:hover .fy-engine-panel{
    transform: translateX(-50%) translateY(0);
  }
}

/* 头部 */
.fy-engine-head{
  position: relative;
  padding: 10px 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.fy-engine-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,0.12);
  color: #1d4ed8;
  border: 1px solid rgba(37,99,235,0.18);
  margin-bottom: 10px;
}

.fy-engine-title{
  font-size: 14px;
  font-weight: 900;
  color: #0b1220;
  letter-spacing: .01em;
  margin-bottom: 4px;
}

.fy-engine-sub{
  font-size: 12px;
  color: rgba(55,65,81,0.92);
  line-height: 1.65;
}

/* 内容网格：更紧凑、更高级 */
.fy-engine-grid{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.fy-engine-item{
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  align-items: start;

  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.50);
  background:
    radial-gradient(420px 160px at 20% 0%, rgba(255,255,255,0.55), rgba(255,255,255,0.10) 60%),
    rgba(255,255,255,0.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 14px 30px rgba(15,23,42,0.08);
}

.fy-engine-dot{
  width: 10px;
  height: 10px;
  margin-top: 3px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 10px 22px rgba(37,99,235,0.30);
}

.fy-engine-k{
  font-size: 12px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 2px;
}

.fy-engine-v{
  font-size: 12px;
  color: rgba(75,85,99,0.95);
  line-height: 1.65;
}

/* 底部：一句话收束 + 光泽高光 */
.fy-engine-foot{
  position: relative;
  margin-top: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px dashed rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.22);
  overflow: hidden;
}

.fy-engine-note{
  font-size: 12px;
  color: rgba(17,24,39,0.82);
  font-weight: 700;
}

.fy-engine-glint{
  position: absolute;
  inset: -40% -40% auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.70), rgba(255,255,255,0.0) 60%);
  transform: rotate(18deg);
  opacity: .75;
  pointer-events: none;
}

/* 解决“被遮住”的根因：上层容器如果有 overflow:hidden，需要放开 */
.hero-left,
.hero-actions{
  overflow: visible;
}

/* =========================
   Apple-like Neo Glass Panel
   只影响弹层内容，不改胶囊按钮
   ========================= */

.fy-engine-panel{ padding: 0; }

/* 主容器：克制玻璃 + 细边框 + 大留白 */
.fy-neo{
  position: relative;
  padding: 18px 18px 14px;
  border-radius: 20px;

  background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.18));
  border: 1px solid rgba(255,255,255,0.62);

  backdrop-filter: blur(26px) saturate(1.35);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);

  box-shadow:
    0 45px 120px rgba(15,23,42,0.22),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(15,23,42,0.06);

  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
}

/* 顶部柔光（像 Apple 的高光） */
.fy-neo__shine{
  position: absolute;
  inset: -80px -140px auto auto;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 62%);
  opacity: .45;
  transform: rotate(12deg);
  pointer-events: none;
}

/* Meta 行：极简胶囊 + 分隔点 */
.fy-neo__meta{
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(15,23,42,0.62);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2px;
  margin-bottom: 10px;
}

.fy-neo__pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.fy-neo__sep{ opacity: .55; }
.fy-neo__hint{ opacity: .85; }

/* 标题：更像产品名字 */
.fy-neo__title{
  font-size: 16px;
  font-weight: 900;
  color: #0b1220;
  letter-spacing: .2px;
  margin-bottom: 6px;
}

/* Lead：一段克制解释 */
.fy-neo__lead{
  font-size: 12.8px;
  line-height: 1.65;
  color: rgba(15,23,42,0.68);
}

/* 三卡：细边框玻璃卡 + 留白（非常 Apple） */
.fy-neo__cards{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 520px){
  .fy-neo__cards{ grid-template-columns: repeat(3, 1fr); }
}

.fy-neo__card{
  border-radius: 16px;
  padding: 12px 12px 10px;

  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.50);
  box-shadow:
    0 18px 45px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.65);

  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
}

.fy-neo__cardHead{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.fy-neo__icon{
  width: 22px;
  height: 22px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: rgba(29,78,216,0.95);
  background: rgba(255,255,255,0.40);
  border: 1px solid rgba(255,255,255,0.55);
}

.fy-neo__cardTitle{
  font-size: 12.8px;
  font-weight: 900;
  color: #0b1220;
}

.fy-neo__cardDesc{
  font-size: 12px;
  line-height: 1.55;
  color: rgba(15,23,42,0.64);
}

/* 底部：输出 + CTA（小而精） */
.fy-neo__bottom{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.45);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fy-neo__out{
  font-size: 12px;
  color: rgba(15,23,42,0.62);
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fy-neo__out strong{
  color: rgba(15,23,42,0.80);
  font-weight: 900;
}

.fy-neo__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 12px;

  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  color: rgba(29,78,216,0.95);

  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

/* Hover 下卡片轻浮（克制） */
@media (hover:hover) and (pointer:fine){
  .fy-engine-wrapper:hover .fy-neo__card{
    transform: translateY(-2px) translateZ(10px);
  }
}


/* =========================
   修复：强制恢复胶囊按钮样式
   ========================= */

.fy-engine-trigger{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 28px;
  border-radius: 999px;

  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  color: #ffffff !important;
  font-weight: 600;

  box-shadow: 0 10px 30px rgba(79,70,229,0.35);

  border: none;
  outline: none;
  cursor: pointer;
  white-space: nowrap;
}


/* ========== Mobile: Neo 弹窗可读模式 ========== */

/* 遮罩（默认隐藏） */
.fy-engine-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 999998;
}

/* 弹层本体（默认你桌面端用 fixed 定位；移动端改成居中） */
@media (max-width: 768px), (hover:none) and (pointer:coarse){
  .fy-engine-panel{
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: min(92vw, 520px);
    max-height: min(78vh, 640px);
    overflow: auto;

    transform: translate(-50%, -50%) scale(.98);
    transform-origin: center;
    opacity: 0;
    pointer-events: none;

    z-index: 999999 !important;
  }

  /* 打开状态 */
  .fy-engine-wrapper.is-pop-open .fy-engine-panel{
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }

  .fy-engine-wrapper.is-pop-open + .fy-engine-overlay{
    opacity: 1;
    pointer-events: auto;
  }

  /* 移动端：卡片改为单列更好读 */
  .fy-neo__cards{
    grid-template-columns: 1fr !important;
  }

  /* 移动端：底部两行更稳（避免挤） */
  .fy-neo__bottom{
    flex-direction: column;
    align-items: stretch;
  }
  .fy-neo__cta{
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   Mobile: 居中 Neo Glass 弹窗
   ========================= */

.fy-engine-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 999998;
}

@media (max-width: 768px), (hover:none) and (pointer:coarse){

  .fy-engine-panel{
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: min(92vw, 520px);
    max-height: min(80vh, 640px);
    overflow-y: auto;

    transform: translate(-50%, -50%) scale(.96);
    transform-origin: center;

    opacity: 0;
    pointer-events: none;

    z-index: 999999 !important;
  }

  .fy-engine-wrapper.is-pop-open .fy-engine-panel{
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }

  .fy-engine-wrapper.is-pop-open + .fy-engine-overlay{
    opacity: 1;
    pointer-events: auto;
  }

  /* 移动端内容可读性优化 */
  .fy-neo__cards{
    grid-template-columns: 1fr !important;
  }

  .fy-neo__bottom{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .fy-neo__cta{
    width: 100%;
    justify-content: center;
  }
}