/* ============================================================
   UEChain — mobile.css
   Loaded only on screens ≤ 767px via <link media="(max-width:767px)">
   NEVER modify desktop CSS rules. Use !important to override inline styles.
   ============================================================ */

/* ── Hide desktop-only elements ───────────────────────────── */
.d-only { display: none !important; }

/* ── Base / Font ──────────────────────────────────────────── */
.ue {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Noto Sans TC", "Helvetica Neue", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.47 !important;
  letter-spacing: -0.01em !important;
  -webkit-font-smoothing: antialiased;
}

/* No font-weight 900 on mobile */
.ue .h1, .ue h1 { font-weight: 600 !important; }
.ue .h2, .ue h2 { font-weight: 600 !important; }

/* Wrap — Apple side padding 20px */
.ue .wrap { padding-left: 20px !important; padding-right: 20px !important; }

/* Section vertical padding */
.ue section { padding-top: 48px !important; padding-bottom: 48px !important; }

/* ── Header ──────────────────────────────────────────────── */
.ue header {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  background: rgba(3,11,31,0.88) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: none !important;
}
.ue header > .wrap {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 8px 0 20px !important;
}
/* Logo 26px high */
.ue header > .wrap a img {
  height: 26px !important;
}

/* ── Mobile nav overlay — upgrade to spec ─────────────────── */
/* Large nav links: 22px / 600 */
.nav-mobile a:not([data-portal-action]):not([href="/en"]) {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.14 !important;
  padding: 10px 0 !important;
  border-bottom: none !important;
  color: #F5F7FA !important;
}
/* Small links (login, register, lang) */
.nav-mobile a[data-portal-action],
.nav-mobile a[href="/en"],
.nav-mobile .nav-lang-switch {
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #A9BBD6 !important;
  padding: 8px 0 !important;
  border-bottom: none !important;
}
/* Login: larger + blue */
.nav-mobile a[data-portal-action="login"] {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #6FE3FF !important;
}
.nav-mobile {
  padding: 12px 20px 80px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}
.nav-mobile-top {
  margin-bottom: 4px !important;
  padding-top: 4px !important;
}
.nav-mobile-logo {
  height: 26px !important;
}

/* ── Hero section ─────────────────────────────────────────── */
section#top {
  padding: 36px 20px 40px !important;
  position: relative !important;
  overflow: hidden !important;
}
section#top .wrap.hero {
  display: block !important;
  padding: 0 !important;
}
section#top h1.h1 {
  font-size: 34px !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  max-width: 280px !important;
  margin-top: 8px !important;
}
/* Hero eyebrow */
section#top .wrap > div > div:first-child {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.33 !important;
}
/* Hero body text */
section#top > .wrap > div > p {
  font-size: 17px !important;
  line-height: 1.47 !important;
  color: #A9BBD6 !important;
  max-width: 100% !important;
  margin-top: 14px !important;
}
/* Hero CTA buttons */
section#top a.btnp {
  border-radius: 980px !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  padding: 14px 22px !important;
  box-shadow: none !important;
}
/* Hero secondary CTA: pill border button (same height as register) */
section#top a.btns {
  border-radius: 980px !important;
  background: #071A3D !important;
  border: 1px solid #2A4C86 !important;
  color: #EAF4FF !important;
  font-size: 17px !important;
  padding: 14px 28px !important;
  text-align: center !important;
}
section#top div[style*="display: flex; flex-wrap: wrap; gap: 14px"] {
  margin-top: 24px !important;
  gap: 12px !important;
}
/* Hero 2×2 stats — redesign as #0B1C3A card grid */
section#top .g4 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1px !important;
  background: #1B3260 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: none !important;
  margin-top: 36px !important;
  max-width: 100% !important;
}
section#top .g4 > div {
  background: #081833 !important;
  padding: 16px !important;
  border: none !important;
  border-top: none !important;
}
section#top .g4 > div > div:first-child {
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.21 !important;
}
section#top .g4 > div > div:last-child {
  font-size: 12px !important;
  line-height: 1.33 !important;
  margin-top: 4px !important;
  color: #A9BBD6 !important;
}

/* ── Evidence ticker — hidden on mobile ───────────────────── */
.ue .ticker,
.ue div.ticker {
  display: none !important;
}

/* ── WHY section ──────────────────────────────────────────── */
section#why {
  background: #061226 !important;
  padding: 48px 20px !important;
}
section#why h2.h2 {
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
/* WHY questions card: bg #0B1C3A, radius 18px, no border */
section#why .split { display: block !important; }
section#why .split > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
section#why .g2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-top: 24px !important;
}
section#why .g2 > div {
  background: #0B1C3A !important;
  border: none !important;
  border-radius: 18px !important;
}

/* ── HOW section ──────────────────────────────────────────── */
section#how {
  padding: 48px 20px !important;
}
section#how h2.h2 {
  font-size: 24px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
/* 4 step cards as vertical stack */
section#how > .wrap > div > .g4 {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 24px !important;
}
section#how > .wrap > div > .g4 > div {
  background: #0B1C3A !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 18px !important;
}
/* Scarce data banner */
section#how > .wrap > div > div[style*="background: #081B40"][style*="border-radius: 22px"] {
  border-radius: 18px !important;
  border: none !important;
  background: #0B1C3A !important;
}
section#how .g5 { gap: 10px !important; }

/* ── ARCH section ─────────────────────────────────────────── */
section#arch {
  padding: 48px 20px !important;
}
section#arch h2.h2 {
  font-size: 24px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
section#arch .split { display: block !important; }
/* Architecture layers as single list card */
section#arch .layer {
  display: flex !important;
  gap: 14px !important;
  padding: 13px 18px !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid #1B3260 !important;
  background: #0B1C3A !important;
}
section#arch .layer:first-child { border-radius: 18px 18px 0 0 !important; }
section#arch .layer:last-child { border-radius: 0 0 18px 18px !important; border-bottom: none !important; }
section#arch .layer > div:first-child {
  font-size: 19px !important;
  font-weight: 600 !important;
  min-width: 28px !important;
  flex-shrink: 0 !important;
}
section#arch .layer > div:nth-child(2) > div:first-child {
  font-size: 17px !important;
}
section#arch .layer > div:nth-child(2) > div:last-child {
  font-size: 12px !important;
}
section#arch .ltag { display: none !important; }
section#arch .split > div:first-child { margin-bottom: 24px !important; }

/* ── MODELS — horizontal rail ─────────────────────────────── */
section#models {
  padding: 48px 0 !important;
  background: #061226 !important;
}
section#models h2.h2 {
  padding: 0 20px !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
section#models > .wrap { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
section#models .g4 {
  display: flex !important;
  flex-direction: column !important;
  overflow-x: visible !important;
  gap: 12px !important;
  padding: 0 20px !important;
  margin-top: 24px !important;
}
section#models .g4 > div {
  width: auto !important;
  min-width: 0 !important;
  flex: none !important;
  background: #0B1C3A !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 22px 20px !important;
}

/* ── CASES — horizontal rail ──────────────────────────────── */
section#cases {
  padding: 48px 0 !important;
  background: #061226 !important;
}
section#cases h2.h2 {
  padding: 0 20px !important;
  font-size: 24px !important;
  font-weight: 600 !important;
}
section#cases > .wrap { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
section#cases .g3,
section#cases .g4 {
  display: flex !important;
  flex-direction: column !important;
  overflow-x: visible !important;
  gap: 12px !important;
  padding: 0 20px !important;
  margin-top: 20px !important;
}
section#cases .g3 > div,
section#cases .g4 > div {
  width: auto !important;
  min-width: 0 !important;
  flex: none !important;
  background: #0B1C3A !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 18px !important;
}

/* ── GET STARTED + PLANS ──────────────────────────────────── */
section#start {
  padding: 48px 20px !important;
}
section#start h2.h2 {
  font-size: 24px !important;
  font-weight: 600 !important;
}
section#start .g3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
section#start .g3 > div {
  background: #0B1C3A !important;
  border: none !important;
  border-radius: 18px !important;
}
section#start .split { display: block !important; }
section#start .split > div:first-child { margin-bottom: 24px !important; }

/* ── FAQ ──────────────────────────────────────────────────── */
section#faq {
  padding: 48px 20px !important;
}
section#faq h2.h2 {
  font-size: 24px !important;
  font-weight: 600 !important;
}
section#faq .split { display: block !important; }
section#faq .split > div:first-child { margin-bottom: 24px !important; }
/* FAQ items: divider-line style (no box) */
section#faq div[style*="background: #081B40"][style*="border: 1px solid"][style*="border-radius: 16px"],
section#faq .faq-item {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid #1B3260 !important;
  border-radius: 0 !important;
}
section#faq .faqbtn {
  font-size: 17px !important;
  padding: 16px 0 !important;
  font-weight: 600 !important;
}
section#faq .faq-answer {
  padding: 0 0 16px !important;
}
section#faq .faq-icon {
  font-size: 20px !important;
}

/* ── FINAL CTA ────────────────────────────────────────────── */
section#contact {
  padding: 0 20px 48px !important;
}
section#contact > .wrap > div {
  padding: 36px 20px !important;
  border-radius: 18px !important;
}
section#contact h2.h2 {
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
}
section#contact img.squid {
  width: 80px !important;
  height: 88px !important;
  right: 20px !important;
  bottom: -20px !important;
}

/* ── CONTACT FORM ─────────────────────────────────────────── */
section#contact-form {
  padding: 48px 20px !important;
}
section#contact-form .split { display: block !important; }
section#contact-form .split > div:first-child { margin-bottom: 24px !important; }
section#contact-form h2.h2 {
  font-size: 24px !important;
  font-weight: 600 !important;
}
section#contact-form .contact-box {
  padding: 20px !important;
  border-radius: 18px !important;
  border: none !important;
  box-shadow: none !important;
  background: #0B1C3A !important;
}
/* Inputs: 17px, min-height 52px, radius 12px (prevents iOS auto-zoom) */
section#contact-form input,
section#contact-form select,
section#contact-form textarea {
  font-size: 17px !important;
  min-height: 52px !important;
  border-radius: 12px !important;
}
section#contact-form .g2 {
  grid-template-columns: 1fr !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Submit button full-width pill */
section#contact-form button[type="submit"] {
  border-radius: 980px !important;
  align-self: stretch !important;
  width: 100% !important;
  justify-content: center !important;
}

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  padding: 28px 20px !important;
}
footer .wrap {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
footer .wrap > div:last-child {
  align-items: flex-start !important;
}

/* ── Sticky bottom bar ───────────────────────────────────── */
.m-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(3,11,31,0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid #1B3260;
  padding: 10px 20px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.m-sticky-bar-login {
  color: #A9BBD6;
  font-size: 17px;
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.m-sticky-bar-register {
  background: #6FE3FF;
  color: #03122E !important;
  font-size: 17px;
  font-weight: 500;
  border-radius: 980px;
  padding: 11px 22px;
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
/* Extra bottom clearance so sticky bar doesn't overlap content */
.ue { padding-bottom: 72px !important; }

/* ── HOW section: step items — number left, text right ──────── */
/* ZH: each .g4 > div is a flex column; convert to 2-col grid */
section#how > .wrap > div > .g4 > div {
  display: grid !important;
  grid-template-columns: 48px 1fr !important;
  grid-template-rows: auto auto auto !important;
  gap: 4px 14px !important;
  align-items: start !important;
  /* background / radius from earlier rule above still applies */
}
/* Number badge: left col, span all 3 rows */
section#how > .wrap > div > .g4 > div > div:first-child {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 18px !important;
  border-radius: 14px !important;
  align-self: start !important;
  box-shadow: none !important;
}
/* Title */
section#how > .wrap > div > .g4 > div > div:nth-child(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  align-self: center !important;
}
/* Description */
section#how > .wrap > div > .g4 > div > p {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 4px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.43 !important;
  color: #A9BBD6 !important;
}
/* Tags */
section#how > .wrap > div > .g4 > div > div:last-child {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin-top: 8px !important;
}
section#how > .wrap > div > .g4 > div > div:last-child span {
  font-size: 11px !important;
  padding: 3px 8px !important;
}

/* ── Models section heading — center on mobile ──────────────── */
section#models > .wrap > div:first-child {
  text-align: center !important;
  justify-content: center !important;
}
section#models > .wrap > div:first-child > div {
  text-align: center !important;
  align-items: center !important;
}
section#models > .wrap > div:first-child > p {
  text-align: center !important;
  max-width: 320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: balance;
  -webkit-text-wrap: balance;
}
section#models h2.h2 {
  text-align: center !important;
  padding: 0 20px !important;
}

/* ── GET STARTED: squid positioned top-right on mobile ──────── */
section#start { position: relative !important; }

/* ── GET STARTED: extra gap between steps and Dashboard card ── */
section#start div[style*="position: relative"][style*="margin-top: 8px"] {
  margin-top: 28px !important;
}