/*
 * ALX Liquid Glass Theme Override
 * 说明：仅覆盖法律说明页视觉主题，不改原有文案、表单字段、接口地址和业务 JS。
 */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #7dd3fc;
  --secondary: #06b6d4;
  --accent: #8b5cf6;
  --bg: #f7fbff;
  --bg-dark: #0b1220;
  --text: #102033;
  --text-light: #5d7088;
  --text-white: #ffffff;
  --white: rgba(255, 255, 255, 0.72);
  --border: rgba(255, 255, 255, 0.46);
  --liquid-border: rgba(255,255,255,.62);
  --liquid-inner: rgba(255,255,255,.36);
  --liquid-shadow: 0 28px 80px rgba(21, 78, 155, .16), 0 8px 26px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.78);
  --liquid-shadow-soft: 0 18px 46px rgba(21, 78, 155, .12), inset 0 1px 0 rgba(255,255,255,.65);
  --radius: 18px;
  --radius-lg: 28px;
  --transition: all .28s cubic-bezier(.2,.8,.2,1);
}

* { -webkit-tap-highlight-color: transparent; }
html { background: #f7fbff; }
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(125,211,252,.60), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(196,181,253,.58), transparent 30%),
    radial-gradient(circle at 68% 78%, rgba(103,232,249,.38), transparent 34%),
    linear-gradient(135deg, #fbfdff 0%, #edf7ff 45%, #f8fbff 100%) !important;
  color: var(--text) !important;
  min-height: 100vh;
  overflow-x: clip;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: -1;
  filter: blur(4px);
}
body::before {
  width: 42vw;
  height: 42vw;
  min-width: 320px;
  min-height: 320px;
  left: -14vw;
  top: 10vh;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(14,165,233,.23), transparent 68%);
}
body::after {
  width: 46vw;
  height: 46vw;
  min-width: 340px;
  min-height: 340px;
  right: -16vw;
  bottom: 6vh;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(168,85,247,.18), transparent 70%);
}
body.dark {
  --bg: #0b1220;
  --text: #edf6ff;
  --text-light: #b7c8da;
  --white: rgba(15, 23, 42, .62);
  --border: rgba(148, 163, 184, .22);
  --liquid-border: rgba(255,255,255,.20);
  --liquid-inner: rgba(255,255,255,.10);
  --liquid-shadow: 0 30px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 10% 10%, rgba(37,99,235,.28), transparent 30%),
    radial-gradient(circle at 86% 16%, rgba(139,92,246,.24), transparent 33%),
    linear-gradient(135deg,#06111f 0%,#0b1220 54%,#12172a 100%) !important;
}

/* Liquid glass primitives */
.header.scrolled,
.navbar,
.stats-grid,
.feature-card,
.carousel,
.role-card,
.tabs-container,
.progress-container,
.counter-grid,
.faq-list,
.contact-info,
.contact-form-card,
.auth-card,
.cta-banner,
.qr-float-panel,
.toast,
.theme-toggle,
.back-to-top,
.carousel-slide {
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.42)) !important;
  border: 1px solid var(--liquid-border) !important;
  box-shadow: var(--liquid-shadow) !important;
  backdrop-filter: blur(24px) saturate(1.75) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.75) !important;
}
body.dark .header.scrolled,
body.dark .navbar,
body.dark .stats-grid,
body.dark .feature-card,
body.dark .carousel,
body.dark .role-card,
body.dark .tabs-container,
body.dark .progress-container,
body.dark .counter-grid,
body.dark .faq-list,
body.dark .contact-info,
body.dark .contact-form-card,
body.dark .auth-card,
body.dark .cta-banner,
body.dark .qr-float-panel,
body.dark .toast,
body.dark .theme-toggle,
body.dark .back-to-top,
body.dark .carousel-slide {
  background: linear-gradient(135deg, rgba(15,23,42,.72), rgba(30,41,59,.42)) !important;
}

.header,
.navbar {
  padding-top: max(12px, env(safe-area-inset-top)) !important;
}
.header.scrolled,
.navbar {
  background: linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.38)) !important;
  border-bottom: 1px solid rgba(255,255,255,.58) !important;
  box-shadow: 0 14px 45px rgba(15, 66, 120, .10), inset 0 1px 0 rgba(255,255,255,.80) !important;
}
.logo-icon,
.nav-logo-icon {
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.95), rgba(255,255,255,.20) 34%, transparent 36%),
    linear-gradient(135deg, #38bdf8, #2563eb 50%, #8b5cf6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 12px 24px rgba(37,99,235,.25) !important;
}
.logo-text,
.nav-logo,
.header.scrolled .logo-text,
.header.scrolled .nav-link,
.nav-links a {
  color: var(--text) !important;
}
.nav-link,
.nav-links a {
  border-radius: 999px;
  padding: 8px 10px;
}
.nav-link:hover,
.nav-links a:hover {
  color: #0f62d9 !important;
  background: rgba(255,255,255,.34) !important;
}
.nav-cta,
.btn,
.btn-primary,
.btn-submit,
.btn-white,
.btn-cta-white,
.btn-cta-outline,
.btn-outline {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.46), rgba(255,255,255,.16)),
    linear-gradient(135deg, #1d9bf0, #2563eb 54%, #7c3aed) !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(37,99,235,.25), inset 0 1px 0 rgba(255,255,255,.46) !important;
  transform: translateZ(0);
}
.btn-outline,
.btn-cta-outline {
  background: linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.28)) !important;
  color: #1856ad !important;
}
.nav-cta:hover,
.btn:hover,
.btn-primary:hover,
.btn-submit:hover,
.btn-white:hover,
.btn-outline:hover,
.btn-cta-white:hover,
.btn-cta-outline:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 22px 48px rgba(37,99,235,.30), inset 0 1px 0 rgba(255,255,255,.58) !important;
}

/* Home page */
.hero {
  background:
    radial-gradient(circle at 16% 18%, rgba(125,211,252,.70), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(196,181,253,.62), transparent 32%),
    radial-gradient(circle at 50% 88%, rgba(14,165,233,.22), transparent 38%),
    linear-gradient(145deg, #f9fdff 0%, #eaf7ff 44%, #f7f5ff 100%) !important;
  isolation: isolate;
}
.hero::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,.32), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.26), transparent 58%) !important;
}
.hero-grid-bg {
  opacity: .45 !important;
  background-image:
    linear-gradient(rgba(37,99,235,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.10) 1px, transparent 1px) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 100%);
}
.hero-content {
  background: linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 38px;
  padding: clamp(26px, 5vw, 58px);
  box-shadow: 0 34px 90px rgba(21,78,155,.12), inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
}
.hero-badge {
  color: #1b4b80 !important;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.28)) !important;
  border: 1px solid rgba(255,255,255,.66) !important;
  box-shadow: var(--liquid-shadow-soft) !important;
}
.hero-title,
.hero h1 {
  color: #0c2036 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}
.hero-title .highlight,
.hero h1 .highlight {
  background: linear-gradient(90deg, #0284c7, #2563eb, #7c3aed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.hero-subtitle,
.hero p {
  color: #536a84 !important;
}
.hero-stat-num,
.hero-stat-label {
  color: #17324f !important;
}
.hero-stats {
  gap: 14px !important;
}
.hero-stat {
  min-width: 136px;
  padding: 14px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.44);
  border: 1px solid rgba(255,255,255,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.particle {
  background: rgba(37,99,235,.18) !important;
  box-shadow: 0 0 24px rgba(14,165,233,.35);
}

.section,
.carousel-section,
.counter-section,
.progress-section,
.tabs-section,
.cta-section,
.contact-section,
.stats-section {
  background: transparent !important;
}
.section-tag {
  border-radius: 999px !important;
  background: rgba(255,255,255,.56) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  color: #1d65c1 !important;
  padding: 8px 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}
.section-title,
.feature-title,
.footer-title,
.contact-info h3,
.contact-form-card h3,
.accordion-header,
.role-card h3,
.auth-card h2 {
  color: var(--text) !important;
}
.section-desc,
.feature-desc,
.footer,
.footer a,
.stat-label,
.accordion-body,
.contact-info p,
.auth-sub {
  color: var(--text-light) !important;
}
.stats-grid,
.features-grid,
.roles-grid,
.contact-wrapper {
  position: relative;
}
.feature-card,
.role-card,
.stat-item,
.counter-item,
.progress-item,
.accordion-item,
.contact-feature,
.form-check,
.tab-content,
.tab-btn {
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.52) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,.20)) !important;
  box-shadow: 0 18px 44px rgba(21,78,155,.10), inset 0 1px 0 rgba(255,255,255,.68) !important;
  backdrop-filter: blur(18px) saturate(1.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.55);
}
.feature-card:hover,
.role-card:hover,
.stat-item:hover,
.accordion-item:hover,
.contact-form-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 28px 72px rgba(21,78,155,.18), inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.feature-icon,
.counter-icon,
.slide-icon {
  border-radius: 22px !important;
  background: radial-gradient(circle at 26% 24%, rgba(255,255,255,.90), rgba(255,255,255,.12) 34%, transparent 36%), linear-gradient(135deg, #67e8f9, #3b82f6 55%, #8b5cf6) !important;
  color: #fff !important;
  box-shadow: 0 16px 32px rgba(37,99,235,.23), inset 0 1px 0 rgba(255,255,255,.56) !important;
}
.carousel-slide {
  color: var(--text) !important;
}
.carousel-btn,
.carousel-dots button,
.tab-btn.active {
  background: linear-gradient(135deg, #38bdf8, #2563eb 56%, #7c3aed) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.56) !important;
  box-shadow: 0 14px 28px rgba(37,99,235,.23), inset 0 1px 0 rgba(255,255,255,.42) !important;
}
.progress-fill {
  background: linear-gradient(90deg, #22d3ee, #2563eb, #8b5cf6) !important;
  box-shadow: 0 0 18px rgba(37,99,235,.25);
}
.accordion-item {
  overflow: hidden;
}
.form-input,
.form-textarea,
.form-group input {
  border-radius: 16px !important;
  background: rgba(255,255,255,.54) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 24px rgba(21,78,155,.06) !important;
}
.form-input:focus,
.form-textarea:focus,
.form-group input:focus {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(37,99,235,.48) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.footer {
  background: rgba(11, 18, 32, .86) !important;
  border-top: 1px solid rgba(255,255,255,.10);
}
.footer * { color: rgba(237,246,255,.78) !important; }
.loader {
  background: linear-gradient(135deg, #e0f2fe, #eff6ff 45%, #f5f3ff) !important;
}
.loader-spinner {
  border-color: rgba(37,99,235,.15) !important;
  border-top-color: #2563eb !important;
}

/* Login / Register */
.navbar + .hero {
  min-height: unset !important;
  padding-top: max(108px, calc(92px + env(safe-area-inset-top))) !important;
  padding-bottom: 62px !important;
}
.auth-wrapper {
  position: relative;
  padding-top: 46px !important;
}
.auth-card {
  border-radius: 30px !important;
  padding: clamp(26px, 5vw, 42px) !important;
}
.auth-card::before,
.contact-form-card::before,
.feature-card::before,
.role-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.55), transparent 38%, rgba(255,255,255,.16));
  opacity: .7;
}
.auth-card,
.contact-form-card,
.feature-card,
.role-card { position: relative; overflow: hidden; }
.auth-card > *,
.contact-form-card > *,
.feature-card > *,
.role-card > * { position: relative; z-index: 1; }
.auth-divider { border-top-color: rgba(255,255,255,.58) !important; }
.auth-divider span {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 999px;
}
.agreement a,
.auth-footer a { color: #1d65c1 !important; }
.toast-container { top: max(80px, calc(72px + env(safe-area-inset-top))) !important; }
.theme-toggle,
.back-to-top {
  width: 48px !important;
  height: 48px !important;
  border-radius: 18px !important;
}

@media (max-width: 900px) {
  .hero-content { border-radius: 30px; }
  .hero-stats { justify-content: center; }
}

@media (max-width: 768px) {
  body { overflow-x: hidden; }
  .container { padding-left: 18px !important; padding-right: 18px !important; }
  .header,
  .navbar {
    left: 10px !important;
    right: 10px !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    width: auto !important;
    border-radius: 24px !important;
    padding: 12px 14px !important;
  }
  .header.scrolled,
  .navbar {
    background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.42)) !important;
  }
  .mobile-toggle span,
  .nav-toggle span { background: var(--text) !important; }
  .nav-links,
  .header .nav-links {
    position: fixed !important;
    top: max(74px, calc(62px + env(safe-area-inset-top))) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - 92px - env(safe-area-inset-top)) !important;
    overflow-y: auto !important;
    border-radius: 26px !important;
    padding: 16px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.50)) !important;
    border: 1px solid rgba(255,255,255,.68) !important;
    box-shadow: 0 24px 64px rgba(15,66,120,.18), inset 0 1px 0 rgba(255,255,255,.76) !important;
    backdrop-filter: blur(24px) saturate(1.7) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.7) !important;
    transform: translateY(-12px) scale(.98) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: var(--transition) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    z-index: 1001 !important;
  }
  .nav-links.active,
  .header .nav-links.mobile-open {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    right: 10px !important;
  }
  .nav-links li,
  .nav-links a {
    width: 100% !important;
    text-align: center !important;
  }
  .nav-links a,
  .nav-link {
    display: block !important;
    padding: 13px 14px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.42) !important;
  }
  .nav-cta { display: none !important; }
  .hero {
    min-height: auto !important;
    padding-top: max(108px, calc(96px + env(safe-area-inset-top))) !important;
    padding-bottom: 54px !important;
  }
  .hero-content {
    padding: 24px 18px !important;
    border-radius: 28px !important;
  }
  .hero-title,
  .hero h1 { font-size: clamp(1.8rem, 9vw, 2.55rem) !important; }
  .hero-subtitle,
  .hero p { font-size: .98rem !important; }
  .hero-stat { min-width: calc(50% - 8px); padding: 12px 10px; }
  .stats-grid,
  .features-grid,
  .roles-grid,
  .counter-grid,
  .contact-wrapper { gap: 16px !important; }
  .feature-card,
  .role-card,
  .contact-info,
  .contact-form-card,
  .auth-card { border-radius: 26px !important; }
  .auth-wrapper { padding-left: 14px !important; padding-right: 14px !important; }
  .toast-container { left: 14px !important; right: 14px !important; }
  .toast { min-width: 0 !important; max-width: none !important; }
}

@media (max-width: 480px) {
  .hero-stat { min-width: 100%; }
  .section-title { font-size: 1.72rem !important; }
  .auth-card { padding: 24px 18px !important; }
  .theme-toggle { bottom: max(16px, env(safe-area-inset-bottom)) !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header.scrolled,
  .navbar,
  .stats-grid,
  .feature-card,
  .carousel,
  .role-card,
  .tabs-container,
  .progress-container,
  .counter-grid,
  .faq-list,
  .contact-info,
  .contact-form-card,
  .auth-card,
  .cta-banner,
  .qr-float-panel,
  .toast,
  .theme-toggle,
  .back-to-top,
  .carousel-slide {
    background: rgba(255,255,255,.94) !important;
  }
}

/* ==========================================
   ALX Mobile Polish v20260616m2
   目标：优化法律说明页的手机阅读体验和页面层次。
   ========================================== */
.logo-icon,
.nav-logo-icon {
  flex: 0 0 auto !important;
  overflow: hidden !important;
}
.logo-text,
.nav-logo {
  white-space: nowrap !important;
}
.hero-subtitle,
.hero p {
  text-wrap: balance;
  word-break: keep-all;
}
.auth-helper-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: -6px 0 18px;
  font-size: .84rem;
  color: var(--text-light);
}
.auth-helper-row a {
  color: #1d65c1 !important;
  font-weight: 600;
}
.auth-helper-row a:hover {
  text-decoration: underline;
}
.agreement-check {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--text-light);
}
.agreement-check input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #2563eb;
  flex: 0 0 auto;
}
.agreement-check a {
  color: #1d65c1 !important;
  font-weight: 600;
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }
  .header,
  .navbar {
    min-height: 64px !important;
  }
  .logo-text,
  .nav-logo {
    font-size: 1.05rem !important;
    letter-spacing: -.01em;
  }
  .hero,
  .navbar + .hero {
    min-height: auto !important;
    padding-top: max(96px, calc(88px + env(safe-area-inset-top))) !important;
    padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }
  .hero-content {
    max-width: 100% !important;
    padding: 20px 14px 22px !important;
    border-radius: 28px !important;
  }
  .hero-badge {
    max-width: 100%;
    margin-bottom: 18px !important;
    padding: 9px 15px !important;
    font-size: .88rem !important;
    line-height: 1.35 !important;
  }
  .hero-title,
  .hero h1 {
    margin-bottom: 16px !important;
    font-size: clamp(1.95rem, 8.2vw, 2.55rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -.035em !important;
  }
  .hero-subtitle,
  .hero p {
    max-width: 100% !important;
    margin-bottom: 18px !important;
    font-size: .97rem !important;
    line-height: 1.62 !important;
  }
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }
  .hero-stat {
    min-width: 0 !important;
    width: auto !important;
    padding: 11px 5px !important;
    border-radius: 20px !important;
  }
  .hero-stat-num {
    font-size: clamp(1.35rem, 5.8vw, 1.78rem) !important;
    line-height: 1.08 !important;
  }
  .hero-stat-label {
    font-size: .76rem !important;
    line-height: 1.3 !important;
    margin-top: 4px;
  }
  .hero-actions {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: stretch !important;
    justify-content: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .hero-actions .btn,
  .hero .btn {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 0 !important;
    min-height: 48px !important;
    padding: 12px 8px !important;
    font-size: .9rem !important;
    white-space: nowrap;
  }
  .stats-section {
    margin-top: -34px !important;
    margin-bottom: 58px !important;
  }
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 18px !important;
    border-radius: 26px !important;
  }
  .stat-item,
  .counter-item {
    padding: 18px 10px !important;
  }
  .stat-number,
  .counter-item h3 {
    font-size: 1.55rem !important;
    line-height: 1.1 !important;
  }
  .section,
  .carousel-section,
  .counter-section,
  .progress-section,
  .tabs-section,
  .cta-section,
  .contact-section {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }
  .auth-wrapper {
    padding-top: 24px !important;
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }
  .auth-card {
    padding: 24px 18px !important;
    border-radius: 26px !important;
  }
  .form-group {
    margin-bottom: 16px !important;
  }
  .form-group input,
  .form-input,
  .form-textarea {
    min-height: 46px !important;
    font-size: 16px !important;
  }
  .auth-helper-row {
    flex-direction: row;
    margin: -2px 0 16px;
  }
  .agreement-check {
    justify-content: flex-start;
    text-align: left;
  }
  .qr-float {
    right: 10px !important;
    bottom: calc(150px + env(safe-area-inset-bottom)) !important;
    opacity: .72;
    transform: translateX(4px) scale(.92);
    transition: opacity .22s ease, transform .22s ease;
  }
  .qr-float:focus-within,
  .qr-float:hover,
  body.alx-scrolled-past-hero .qr-float {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  .qr-float-btn,
  .theme-toggle,
  .back-to-top {
    width: 44px !important;
    height: 44px !important;
    border-radius: 18px !important;
  }
  .qr-float-panel {
    right: 0 !important;
    bottom: 52px !important;
    width: 150px !important;
  }
  .theme-toggle {
    right: 10px !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    opacity: .9;
  }
  .back-to-top {
    right: 10px !important;
    bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 430px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .header,
  .navbar {
    left: 8px !important;
    right: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .hero-content {
    padding: 19px 13px 20px !important;
  }
  .hero-title,
  .hero h1 {
    font-size: clamp(1.82rem, 8vw, 2.22rem) !important;
  }
  .hero-subtitle,
  .hero p {
    font-size: .94rem !important;
  }
  .hero-stat {
    padding: 9px 4px !important;
    border-radius: 18px !important;
  }
  .hero-stat-num {
    font-size: 1.42rem !important;
  }
  .hero-stat-label {
    font-size: .71rem !important;
  }
  .hero-actions .btn,
  .hero .btn {
    font-size: .84rem !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

@media (max-width: 340px) {
  .hero-actions {
    flex-direction: column !important;
  }
}

@media (max-height: 740px) and (max-width: 768px) {
  .hero,
  .navbar + .hero {
    padding-top: max(88px, calc(82px + env(safe-area-inset-top))) !important;
    padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  }
  .hero-badge {
    margin-bottom: 14px !important;
  }
  .hero-title,
  .hero h1 {
    margin-bottom: 12px !important;
  }
  .hero-subtitle,
  .hero p {
    margin-bottom: 14px !important;
  }
  .hero-stats {
    margin-bottom: 14px !important;
  }
}


/* ==========================================
   ALX Visual Polish v20260616m3
   目标：优化系统场景展示、系统能力覆盖、为什么选择我们、计数与 CTA 字体颜色。
   ========================================== */
:root {
  --alx-ink: #10243d;
  --alx-muted: #526981;
  --alx-soft: rgba(255,255,255,.68);
  --alx-soft-2: rgba(255,255,255,.36);
  --alx-line: rgba(255,255,255,.72);
  --alx-blue: #2563eb;
  --alx-cyan: #22d3ee;
  --alx-purple: #7c3aed;
}

/* 统一文字层级：避免白底/浅玻璃上出现过淡白字 */
.section-title,
.scenario-card h3,
.advantage-card h3,
.capability-card strong,
.capability-name,
.counter-item h3,
.counter-item p,
.cta-banner h2,
.cta-banner p,
.tab-content h3,
.tab-content p {
  text-shadow: 0 1px 0 rgba(255,255,255,.76) !important;
}
.scenario-card h3,
.advantage-card h3,
.capability-name,
.counter-item h3,
.cta-banner h2 {
  color: var(--alx-ink) !important;
}
.scenario-card p,
.advantage-card p,
.capability-card p,
.counter-item p,
.cta-banner p {
  color: var(--alx-muted) !important;
}

/* 系统场景展示：从大轮播改为清晰流程卡片 */
.scenario-section {
  position: relative;
  overflow: hidden;
}
.scenario-section::before {
  content: "";
  position: absolute;
  inset: 8% -10% auto;
  height: 340px;
  background:
    radial-gradient(circle at 20% 35%, rgba(34,211,238,.22), transparent 36%),
    radial-gradient(circle at 78% 26%, rgba(124,58,237,.18), transparent 34%);
  pointer-events: none;
  filter: blur(4px);
}
.scenario-board {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.30)) !important;
  border: 1px solid var(--alx-line) !important;
  box-shadow: 0 28px 80px rgba(21,78,155,.14), inset 0 1px 0 rgba(255,255,255,.82) !important;
  backdrop-filter: blur(24px) saturate(1.65);
  -webkit-backdrop-filter: blur(24px) saturate(1.65);
}
.scenario-flow {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr max-content 1fr max-content;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: #1e5eb8;
  font-weight: 800;
  letter-spacing: .02em;
}
.scenario-flow span {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.scenario-flow i {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--alx-cyan), var(--alx-blue), var(--alx-purple));
  opacity: .78;
}
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.scenario-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  align-items: start;
  padding: 22px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.78), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.66), rgba(255,255,255,.26)) !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  box-shadow: 0 18px 48px rgba(21,78,155,.10), inset 0 1px 0 rgba(255,255,255,.76) !important;
  min-height: 180px;
}
.scenario-card-primary {
  background:
    radial-gradient(circle at 18% 10%, rgba(34,211,238,.22), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.76), rgba(239,246,255,.38)) !important;
}
.scenario-icon,
.advantage-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  font-size: 1.55rem;
  background:
    radial-gradient(circle at 26% 22%, rgba(255,255,255,.95), rgba(255,255,255,.18) 36%, transparent 38%),
    linear-gradient(135deg, #67e8f9, #2563eb 56%, #8b5cf6) !important;
  box-shadow: 0 14px 30px rgba(37,99,235,.22), inset 0 1px 0 rgba(255,255,255,.62) !important;
}
.scenario-card h3 {
  margin: 0 0 8px !important;
  font-size: 1.14rem !important;
  line-height: 1.35 !important;
}
.scenario-card p {
  margin: 0 0 14px !important;
  line-height: 1.72 !important;
  font-size: .94rem !important;
}
.scenario-card ul,
.advantage-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.scenario-card li,
.advantage-tags span {
  padding: 6px 10px;
  border-radius: 999px;
  color: #1d5fae;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.76);
  font-size: .78rem;
  font-weight: 700;
}

/* 为什么选择我们：改为三张高对比优势卡 */
.advantage-section {
  position: relative;
  overflow: hidden;
}
.advantage-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.advantage-card {
  position: relative;
  overflow: hidden;
  padding: 26px 22px;
  min-height: 270px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.30)) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 22px 62px rgba(21,78,155,.12), inset 0 1px 0 rgba(255,255,255,.80) !important;
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
}
.advantage-card::after {
  content: "";
  position: absolute;
  inset: auto -18% -34% 34%;
  height: 160px;
  background: radial-gradient(circle, rgba(37,99,235,.16), transparent 66%);
  pointer-events: none;
}
.advantage-card-strong {
  background:
    radial-gradient(circle at 22% 18%, rgba(34,211,238,.23), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(238,242,255,.36)) !important;
  transform: translateY(-8px);
}
.advantage-card h3 {
  margin: 16px 0 10px !important;
  font-size: 1.18rem !important;
}
.advantage-card p {
  margin: 0 0 18px !important;
  line-height: 1.75 !important;
  font-size: .94rem !important;
}

/* 系统能力覆盖：更清晰的卡片式进度，不再边到边贴屏 */
.capability-section {
  position: relative;
  overflow: hidden;
}
.capability-grid {
  max-width: 1020px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.capability-card {
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.30)) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 20px 56px rgba(21,78,155,.11), inset 0 1px 0 rgba(255,255,255,.80) !important;
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
}
.capability-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.capability-name {
  font-size: 1.02rem;
  font-weight: 900;
}
.capability-head strong {
  flex: 0 0 auto;
  color: #1f5fbe !important;
  font-size: 1.35rem;
  font-weight: 900;
}
.capability-card p {
  min-height: 52px;
  margin: 0 0 16px;
  line-height: 1.65;
  font-size: .92rem;
}
.capability-card .progress-bar,
.progress-container .progress-bar {
  height: 12px !important;
  padding: 2px;
  background: rgba(226,239,255,.88) !important;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: inset 0 1px 2px rgba(15,66,120,.08);
}
.capability-card .progress-fill,
.progress-container .progress-fill {
  height: 100% !important;
  border-radius: 999px !important;
  min-width: 8px;
}

/* 底部计数区：修复白字过浅、图标像压在进度条上的问题 */
.counter-section {
  background:
    radial-gradient(circle at 18% 12%, rgba(34,211,238,.26), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(124,58,237,.18), transparent 34%),
    linear-gradient(145deg, #e8f8ff 0%, #eef7ff 48%, #f7f4ff 100%) !important;
  color: var(--alx-ink) !important;
}
.counter-section::before {
  background:
    linear-gradient(rgba(37,99,235,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.075) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  opacity: .55 !important;
}
.counter-grid {
  gap: 18px !important;
}
.counter-item {
  overflow: hidden;
  padding: 26px 18px 22px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.34)) !important;
  border: 1px solid rgba(255,255,255,.74) !important;
  box-shadow: 0 22px 62px rgba(21,78,155,.12), inset 0 1px 0 rgba(255,255,255,.82) !important;
  backdrop-filter: blur(22px) saturate(1.65) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.65) !important;
}
.counter-icon {
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.45rem !important;
  border-radius: 20px !important;
}
.counter-item h3,
.counter-suffix {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--alx-ink) !important;
}
.counter-item h3 {
  font-size: clamp(2rem, 4.8vw, 2.65rem) !important;
  margin-bottom: 8px !important;
}
.counter-suffix {
  font-size: .58em !important;
  font-weight: 800 !important;
}
.counter-bar {
  width: 42px !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--alx-cyan), var(--alx-blue), var(--alx-purple)) !important;
  opacity: .78;
}

/* CTA：修复浅色玻璃上白字不清晰 */
.cta-banner {
  background:
    radial-gradient(circle at 18% 18%, rgba(34,211,238,.28), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.30)) !important;
  border: 1px solid rgba(255,255,255,.74) !important;
  box-shadow: 0 24px 72px rgba(21,78,155,.14), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
.cta-banner h2 {
  color: var(--alx-ink) !important;
  font-weight: 900 !important;
}
.cta-banner p {
  color: #4f667f !important;
  opacity: 1 !important;
}
.cta-actions .btn-cta-white {
  background: linear-gradient(135deg, #38bdf8, #2563eb 56%, #7c3aed) !important;
  color: #fff !important;
}
.cta-actions .btn-cta-outline {
  background: rgba(255,255,255,.68) !important;
  color: #1456b0 !important;
}

@media (max-width: 900px) {
  .advantage-grid,
  .capability-grid,
  .scenario-grid {
    grid-template-columns: 1fr !important;
  }
  .advantage-card-strong {
    transform: none;
  }
  .scenario-card {
    min-height: 0;
  }
}

@media (max-width: 768px) {
  .scenario-board {
    padding: 16px !important;
    border-radius: 28px !important;
  }
  .scenario-flow {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .scenario-flow i {
    display: none;
  }
  .scenario-flow span {
    text-align: center;
    padding: 7px 6px !important;
    font-size: .78rem !important;
  }
  .scenario-card {
    grid-template-columns: 46px 1fr !important;
    gap: 12px !important;
    padding: 17px 15px !important;
    border-radius: 24px !important;
  }
  .scenario-icon,
  .advantage-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 18px !important;
    font-size: 1.22rem !important;
  }
  .scenario-card h3 {
    font-size: 1rem !important;
    margin-bottom: 6px !important;
  }
  .scenario-card p {
    font-size: .88rem !important;
    line-height: 1.62 !important;
    margin-bottom: 10px !important;
  }
  .scenario-card li,
  .advantage-tags span {
    font-size: .72rem !important;
    padding: 5px 8px !important;
  }
  .advantage-card {
    min-height: 0 !important;
    padding: 20px 17px !important;
    border-radius: 26px !important;
  }
  .advantage-card h3 {
    margin-top: 13px !important;
  }
  .advantage-card p {
    font-size: .9rem !important;
    line-height: 1.68 !important;
  }
  .capability-card {
    padding: 17px 15px !important;
    border-radius: 24px !important;
  }
  .capability-head strong {
    font-size: 1.18rem !important;
  }
  .capability-card p {
    min-height: 0 !important;
    margin-bottom: 12px !important;
    font-size: .88rem !important;
  }
  .counter-section {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }
  .counter-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 14px !important;
  }
  .counter-item {
    padding: 20px 10px 18px !important;
    border-radius: 24px !important;
  }
  .counter-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 16px !important;
    font-size: 1.18rem !important;
  }
  .counter-item h3 {
    font-size: 1.72rem !important;
  }
  .counter-item p {
    color: #405b78 !important;
    font-size: .8rem !important;
    line-height: 1.35 !important;
  }
  .cta-banner {
    padding: 30px 18px !important;
    border-radius: 28px !important;
  }
  .cta-banner h2 {
    font-size: 1.58rem !important;
    line-height: 1.25 !important;
  }
  .cta-banner p {
    font-size: .92rem !important;
    line-height: 1.7 !important;
  }
}

@media (max-width: 360px) {
  .counter-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================
   ALX Full Product Polish v20260616v5
   目标：下半部分视觉统一、法律链接可点击可见、全站提示/弹窗/加载态液态玻璃化。
   ========================================== */
:root {
  --alx-v5-ink: #0f263f;
  --alx-v5-muted: #4f6680;
  --alx-v5-card: rgba(255,255,255,.72);
  --alx-v5-card-2: rgba(255,255,255,.36);
  --alx-v5-line: rgba(255,255,255,.78);
  --alx-v5-shadow: 0 24px 72px rgba(21,78,155,.14), inset 0 1px 0 rgba(255,255,255,.86);
}
.section:not(.hero),
.carousel-section,
.progress-section,
.tabs-section,
.faq,
.cta-section,
.contact-section {
  position: relative;
  overflow: hidden;
}
.section:not(.hero)::before,
.carousel-section::before,
.progress-section::before,
.tabs-section::before,
.faq::before,
.cta-section::before,
.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 12%, rgba(34,211,238,.13), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(124,58,237,.10), transparent 32%);
  opacity: .9;
}
.section > .container,
.carousel-section > .container,
.progress-section > .container,
.tabs-section > .container,
.faq > .container,
.cta-section > .container,
.contact-section > .container { position: relative; z-index: 1; }

/* 场景展示 v5：更像产品流程看板 */
.scenario-board {
  display: grid;
  gap: 20px;
}
.scenario-flow {
  padding: 10px;
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;
}
.scenario-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.scenario-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.28));
}
.scenario-card::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -70px;
  bottom: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.18), transparent 68%);
  pointer-events: none;
}
.scenario-body { position: relative; z-index: 1; }

/* 能力覆盖 v5：避免手机端贴边和白字发灰 */
.capability-card {
  min-height: 174px;
}
.capability-card .progress-bar {
  overflow: visible !important;
}
.capability-card .progress-fill {
  position: relative;
}
.capability-card .progress-fill::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37,99,235,.18), 0 6px 18px rgba(37,99,235,.25);
}

/* 为什么选择我们 v5 */
.advantage-card {
  display: flex;
  flex-direction: column;
}
.advantage-tags { margin-top: auto !important; }
.advantage-card p,
.scenario-card p,
.capability-card p,
.faq-list,
.accordion-body-inner { color: var(--alx-v5-muted) !important; }

/* 数字区 v5：在浅玻璃上保持高对比 */
.counter-item h3,
.counter-item p,
.counter-suffix { opacity: 1 !important; }
.counter-item p { font-weight: 800 !important; }
.counter-grid { align-items: stretch; }

/* FAQ / CTA / Contact 统一玻璃显示框 */
.faq-list,
.accordion-item,
.cta-banner,
.contact-info,
.contact-form-card {
  background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(236,254,255,.38)) !important;
  border: 1px solid var(--alx-v5-line) !important;
  box-shadow: var(--alx-v5-shadow) !important;
  backdrop-filter: blur(24px) saturate(1.68) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.68) !important;
}
.accordion-header { color: var(--alx-v5-ink) !important; font-weight: 900 !important; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: 999px;
  padding: 3px 8px;
  pointer-events: auto !important;
}
.footer-links a:hover { background: rgba(255,255,255,.10); color: #fff !important; }

/* 公开页 Toast / Loading 统一 */
.toast,
.toast-container .toast {
  background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(236,254,255,.58)) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 20px !important;
  color: var(--alx-v5-ink) !important;
  box-shadow: 0 22px 64px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.88) !important;
  backdrop-filter: blur(22px) saturate(1.65) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.65) !important;
}
.toast.error,
.toast-container .toast.error { box-shadow: 0 22px 64px rgba(15,23,42,.16), inset 4px 0 0 rgba(239,68,68,.88), inset 0 1px 0 rgba(255,255,255,.88) !important; }
.toast.success,
.toast-container .toast.success { box-shadow: 0 22px 64px rgba(15,23,42,.16), inset 4px 0 0 rgba(16,185,129,.88), inset 0 1px 0 rgba(255,255,255,.88) !important; }
.toast.info,
.toast-container .toast.info { box-shadow: 0 22px 64px rgba(15,23,42,.16), inset 4px 0 0 rgba(37,99,235,.88), inset 0 1px 0 rgba(255,255,255,.88) !important; }
.loader { backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }

/* 登录注册安全增强的协议区 */
.agreement-check {
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 12px 14px;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 16px;
}
.agreement-check input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: #2563eb; }

@media (max-width: 768px) {
  .section,
  .carousel-section,
  .progress-section,
  .tabs-section,
  .faq,
  .cta-section,
  .contact-section { padding-top: 64px !important; padding-bottom: 64px !important; }
  .section-header { margin-bottom: 24px !important; }
  .scenario-board,
  .faq-list,
  .contact-info,
  .contact-form-card,
  .cta-banner { width: 100%; }
  .scenario-flow { border-radius: 22px; }
  .scenario-grid,
  .capability-grid,
  .advantage-grid { gap: 14px !important; }
  .capability-card { min-height: 0; }
  .contact-wrapper { grid-template-columns: 1fr !important; }
  .footer-links a { padding-left: 0; }
}