/* =====================================================
   Jianliao IM · Ultimate Commercial System (H5 first)
   White + Stable + Trust · Dark Anchors · Controlled Motion
===================================================== */

/* ============== Reset ============== */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 16px; }

:root{
  /* White System */
  --bg: #ffffff;
  --bg-soft: #f7f8fb;

  /* Ink */
  --ink: #0b1220;
  --muted: #667085;

  /* Dark Anchors */
  --dark: #0b0f19;
  --dark-2: #020617;
  --card-dark: #0b1220;

  /* Lines */
  --line: rgba(2,6,23,.10);
  --line-2: rgba(255,255,255,.10);

  /* Brand (更稳更高级) */
  --brand: #1d4ed8;     /* 深一点，更“企业” */
  --brand-2: #38bdf8;   /* 高光 */
  --brand-3: #0ea5e9;

  /* Radius */
  --radius: 16px;
  --radius-2: 20px;
  --radius-3: 24px;

  /* Shadows (更干净、层次更像产品官网) */
  --shadow: 0 14px 34px rgba(2,6,23,.10);
  --shadow-2: 0 40px 90px rgba(0,0,0,.55);
  --shadow-3: 0 22px 60px rgba(2,6,23,.16);

  /* Motion */
  --ease: cubic-bezier(.2,.9,.2,1);

  /* Safe area for iPhone */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

body{
  margin: 0;
  font-family:
    -apple-system,BlinkMacSystemFont,
    "Segoe UI","PingFang SC","Hiragino Sans GB",
    "Microsoft YaHei", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  padding-top: var(--header-h, 72px);
}

body.nav-open{ overflow: hidden; }

a, button { -webkit-tap-highlight-color: transparent; }
button{ font-family: inherit; }

/* ============== Layout ============== */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

section{
  padding: 108px 0;
}

@media (max-width: 900px){
  section{ padding: 86px 0; }
}

/* ============== Typography ============== */
h1{
  font-size: 44px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: #fff;
}

h2{
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

h3{
  font-size: 16px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

p{ margin: 0; color: var(--muted); font-size: 15px; }

.section-desc{
  max-width: 860px;
  color: rgba(255,255,255,.65);
}

.section-head{ margin-bottom: 34px; }
.section-head .section-desc{ color: var(--muted); }

.section-head--dark .section-desc{
  color: rgba(255,255,255,.65);
}

/* ============== Header ============== */
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1500;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header.scrolled{
  box-shadow: 0 12px 26px rgba(2,6,23,.08);
}

.header-inner{
  display: flex;
  align-items: center;
  height: 64px;
  gap: 14px;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.brand-logo{
  width: 28px; height: 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #111827, #334155);
  box-shadow: 0 12px 20px rgba(2,6,23,.18);
}

.brand-badge{
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: #374151;
}

.nav-actions{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-link{
  font-size: 14px;
  color: #111827;
  text-decoration: none;
  opacity: .75;
}

.nav-link:hover{ opacity: 1; }

/* 手机端：避免顶部拥挤 */
@media (max-width: 900px){
  .nav-actions .nav-link{ display: none; }
  .nav-actions{ gap: 10px; }
}

/* ============== Navigation H5 ============== */
.nav{
  position: fixed;
  top: 0;
  right: 0;
  width: 78%;
  max-width: 340px;
  height: 100vh;
  padding: 84px 22px 22px;
  background: rgba(2,6,23,.98);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transform: translateX(105%);
  transition: transform .35s var(--ease);
  z-index: 260;
  border-left: 1px solid rgba(255,255,255,.08);
}

.nav.open{ transform: translateX(0); }

.nav a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: 16px;
  padding: 10px 10px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.06);
}

.nav a:hover{
  border-color: rgba(56,189,248,.25);
  background: rgba(56,189,248,.06);
}

.nav-toggle{
  margin-left: 6px;
  font-size: 20px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: #fff;
  color: #111827;
  border-radius: 12px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-mask{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
  z-index: 240;
}
.nav-mask.show{
  opacity: 1;
  pointer-events: auto;
}

/* ============== Buttons ============== */
.btn{
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: #111827;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  box-shadow: 0 10px 20px rgba(2,6,23,.06);
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(2,6,23,.10);
}

.btn:active{ transform: translateY(0); }

.btn.primary{
  border: none;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 22px 40px rgba(29,78,216,.24);
}

.btn.ghost{
  background: transparent;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
}

/* ============== Pills ============== */
.pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.pill--light{
  border: 1px solid var(--line);
  background: #fff;
  color: #111827;
  box-shadow: 0 10px 18px rgba(2,6,23,.06);
}

/* ============== Hero (Dark Anchor) ============== */
.hero{
  position: relative;
  padding: 120px 0 96px;
  overflow: hidden;
}

.hero--dark{
  background: radial-gradient(1100px 520px at 70% 0%, rgba(29,78,216,.36), transparent 60%),
              radial-gradient(900px 520px at 0% 60%, rgba(56,189,248,.14), transparent 60%),
              var(--dark);
}

.hero-bg{
  position: absolute;
  inset: -2px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%),
    radial-gradient(900px 400px at 60% 0%, rgba(255,255,255,.06), transparent 60%);
  pointer-events: none;
}

.hero-inner{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  z-index: 2;
}

/* Calm hero */
.hero-inner--calm{
  min-height: min(86vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-center{ max-width: 880px; }

.hero-kicker{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.hero-kicker--calm{
  justify-content: center;
  margin-bottom: 22px;
}

.hero-title{
  font-size: 52px;
  line-height: 1.16;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}

.hero-desc{
  color: rgba(255,255,255,.72);
  font-size: 16px;
  max-width: 720px;
}

.hero-desc--calm{
  font-size: 18px;
  max-width: 640px;
  margin: 0 auto;
  color: rgba(255,255,255,.72);
}

.hero-actions{
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-actions--calm{
  margin-top: 38px;
  justify-content: center;
}

.hero-divider{
  margin: 56px auto 36px;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
}

.hero-facts{
  display: flex;
  justify-content: center;
  gap: 42px;
  font-size: 14px;
}

.hero-facts div{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-facts strong{
  color: rgba(255,255,255,.86);
  font-weight: 800;
}

.hero-facts span{
  color: rgba(255,255,255,.58);
}

/* H5 hero 细节：更呼吸 */
@media (max-width: 900px){
  .hero{ padding: 108px 0 76px; }
  .hero-title{ font-size: 40px; }
  .hero-desc--calm{ font-size: 16px; }
  .hero-divider{ margin: 44px auto 28px; }
  .hero-facts{
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero-facts div{
    min-width: 140px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
  }
}

/* ============== Trust Strip (White breathing) ============== */
.trust-strip{
  padding: 34px 0;
  background: linear-gradient(180deg, var(--bg-soft), #fff);
  border-bottom: 1px solid var(--line);
}
.trust-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
}
.trust-title{ font-weight: 900; letter-spacing: -0.01em; }
.trust-desc{ color: var(--muted); font-size: 14px; margin-top: 4px; }

.trust-right{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.trust-chip{
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 16px rgba(2,6,23,.05);
  font-weight: 900;
  font-size: 13px;
  color: #111827;
}

/* ============== Product Showcase (Dark Anchor) ============== */
.product-showcase{
  position: relative;
  background: var(--dark-2);
  padding: 80px 0;
  overflow: hidden;
}

.showcase-bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 80% 10%, rgba(29,78,216,.50), transparent 60%),
    radial-gradient(900px 420px at 10% 80%, rgba(56,189,248,.14), transparent 60%);
  pointer-events: none;
}

.section-head--dark h2{ color: #fff; }
.section-head--dark .section-desc{ color: rgba(255,255,255,.65); }

/* ============== iPhone Stage ================= */
.iphone-stage{
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px; /* 原来太松 */
  align-items: center;
}

.iphone-mockup{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Caption */
.mockup-caption{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: rgba(255,255,255,.66);
  font-size: 13px;
}


/* Gallery */
.iphone-gallery{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}


.iphone-frame{
  width: min(72vw, 300px); /* 关键：整体缩小 */
  aspect-ratio: 9 / 19.5;
  border-radius: 44px;
  background: #000;
  padding: 12px;
  box-shadow:
    0 62px 150px rgba(0,0,0,.88),
    inset 0 0 0 1px rgba(255,255,255,.08);
  position: relative;
}

.iphone-frame::before{
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 126px;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 0 0 14px 14px;
  background: #000;
  z-index: 2;
}

.iphone-screen{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
  cursor: zoom-in;
  transition: transform .6s var(--ease), filter .6s var(--ease);
}

.iphone-screen:hover{
  transform: scale(1.02);
  filter: saturate(1.02);
}


.cap-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(56,189,248,.9);
  box-shadow: 0 0 0 6px rgba(56,189,248,.12);
}

.gallery-item{
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  cursor: pointer;
  text-align: left;
  color: #fff;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.gallery-item img{
  width: 100%;
  border-radius: 10px;
  opacity: .92;
}

.gallery-item span{
  font-size: 13px;
  color: rgba(255,255,255,.78);
  font-weight: 800;
}

.gallery-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(0,0,0,.62);
  border-color: rgba(56,189,248,.30);
}

/* Mobile: 画廊变为“横向大卡片”，不再拥挤 */
@media (max-width: 900px){

  
  .gallery-item{
    min-width: 68vw;
    max-width: 360px;
    scroll-snap-align: start;
  }
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
}
.lightbox.open{ display: block; }
.lightbox-mask{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.85);
  backdrop-filter: blur(8px);
}
.lightbox-body{
  position: relative;
  z-index: 2;
  max-width: 440px;
  margin: 5vh auto;
  padding: 16px;
  border-radius: 28px;
  background: #000;
  box-shadow: 0 60px 140px rgba(0,0,0,.85);
}
.lightbox-body img{
  width: 100%;
  border-radius: 22px;
}
.lightbox-title{
  margin-top: 12px;
  text-align: center;
  color: rgba(255,255,255,.75);
  font-size: 14px;
}
.lightbox-close{
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

/* ============== Multi Platform ===== */
.multi-platform{ background: #fff; }

.platform-grid{
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
}

.platform-card{
  padding: 28px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.platform-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-3);
  border-color: rgba(29,78,216,.18);
}

/* “多端图太小”的根本修复：做成媒体舞台（移动端更大） */
.platform-media{
  height: 140px;
  border-radius: 16px;
  margin-bottom: 20px;
  background: linear-gradient(135deg,#0b1220,#111c33);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}

.platform-media::after{
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(260px 140px at 30% 10%, rgba(56,189,248,.16), transparent 60%),
    radial-gradient(260px 160px at 90% 70%, rgba(29,78,216,.20), transparent 60%);
  pointer-events: none;
}

/* device blocks */
.device{
  position: absolute;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 26px 70px rgba(0,0,0,.40);
  backdrop-filter: blur(6px);
}

.platform-media--phone .phone-a{
  width: 86px; height: 126px;
  border-radius: 22px;
  left: 18px; top: 12px;
}
.platform-media--phone .phone-b{
  width: 90px; height: 132px;
  border-radius: 22px;
  left: 110px; top: 6px;
  transform: rotate(2deg);
  border-color: rgba(56,189,248,.22);
}

.platform-media--desktop .desktop-a{
  width: 76%;
  height: 58%;
  border-radius: 16px;
  left: 14%;
  top: 16%;
}
.platform-media--desktop .desktop-b{
  width: 34%;
  height: 40%;
  border-radius: 14px;
  left: 10%;
  top: 40%;
  transform: rotate(-2deg);
  border-color: rgba(29,78,216,.22);
}

.platform-media--server .server-a{
  width: 70%;
  height: 22%;
  border-radius: 14px;
  left: 15%;
  top: 20%;
}
.platform-media--server .server-b{
  width: 70%;
  height: 22%;
  border-radius: 14px;
  left: 15%;
  top: 52%;
  border-color: rgba(56,189,248,.18);
}

/* Mobile: 单列 + 更大的媒体区（解决“图片太小”） */
@media (max-width: 900px){
  .platform-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .platform-card{ padding: 20px; }
  .platform-media{ height: 200px; } /* 关键：移动端放大 */
  .platform-media--phone .phone-a{ width: 110px; height: 168px; left: 16px; top: 18px; }
  .platform-media--phone .phone-b{ width: 118px; height: 176px; left: 132px; top: 10px; }
}

/* ===== Architecture Proof ===== */
.arch-grid{
  margin-top: 42px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}

.arch-metrics{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 22px;
}

.arch-metrics div{
  padding: 22px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.arch-metrics strong{
  font-size: 28px;
  display: block;
}

.arch-panel{
  background: #020617;
  color: #cbd5f5;
  border-radius: 18px;
  padding: 28px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  box-shadow: var(--shadow-2);
  overflow: auto;
}

/* Mobile: 架构区必须单列，避免挤压错位 */
@media (max-width: 900px){
  .arch-grid{ grid-template-columns: 1fr; gap: 18px; }
  .arch-metrics{ grid-template-columns: 1fr; gap: 14px; }
}

/* ============== Feature Cards (White order) ============== */
.cap-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 22px;
}

.cap-item{
  border-radius: 16px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.cap-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 52px rgba(2,6,23,.12);
  border-color: rgba(29,78,216,.18);
}

.cap-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: .06em;
  color: #0b1220;
  background: linear-gradient(180deg, #ffffff, #f2f5ff);
  border: 1px solid rgba(29,78,216,.14);
  box-shadow: 0 18px 28px rgba(29,78,216,.10);
  margin-bottom: 10px;
}

.divider{
  margin: 44px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(2,6,23,.14), transparent);
}

/* ============== Concept (Explain + Black panel) ============== */
.concept{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.concept-title{ font-size: 18px; margin: 0 0 8px; }
.concept-desc{ color: var(--muted); font-size: 14px; max-width: 720px; }

.concept-list{
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}
.concept-row{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}
.concept-row:first-child{ border-top: none; }
.concept-key{ font-weight: 900; color: #111827; font-size: 13px; }
.concept-val{ color: #4b5563; font-size: 13px; }

.black-panel{
  border-radius: 18px;
  background: rgba(2,6,23,.94);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.black-panel-head{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
}
.black-panel-title{
  margin-left: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  letter-spacing: .04em;
}
.black-panel-body{
  padding: 16px;
  display: grid;
  gap: 10px;
  color: rgba(255,255,255,.80);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}
.arch-line{
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.arch-tag{ color: rgba(56,189,248,.92); font-weight: 900; }
.arch-foot{ margin-top: 4px; color: rgba(255,255,255,.65); }

/* ============== Scenes (Dark Anchor) ============== */
.scenes-dark{
  background: radial-gradient(900px 420px at 70% 0%, rgba(29,78,216,.32), transparent 60%),
              var(--dark-2);
  color: #fff;
}

.scene-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 22px;
}

.scene-item{
  border-radius: 16px;
  padding: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 50px rgba(0,0,0,.35);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.scene-item:hover{
  transform: translateY(-4px);
  border-color: rgba(56,189,248,.20);
}
.scene-title{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  letter-spacing: -0.01em;
}
.scene-desc{
  color: rgba(255,255,255,.65);
  font-size: 13px;
  margin-top: 6px;
}

/* ============== CTA (White + controlled) ============== */
.cta{
  background: linear-gradient(180deg, #fff, var(--bg-soft));
}
.cta-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  border-radius: 22px;
  padding: 26px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 28px 70px rgba(2,6,23,.10);
}
.cta h2{ margin: 0 0 10px; }
.cta-desc{ color: var(--muted); font-size: 14px; }
.cta-badges{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.cta-right{ display: flex; flex-wrap: wrap; gap: 12px; }

/* ============== Footer ============== */
.footer{
  padding: 46px 0 calc(46px + 72px + var(--safe-b)); /* 预留 Dock 空间（H5 关键） */
  border-top: 1px solid var(--line);
  background: #fff;
}

.footer-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.footer-brand{
  font-weight: 900;
  letter-spacing: -0.01em;
}
.footer-sub{
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}
.footer-copy{
  color: #9ca3af;
  font-size: 12px;
  margin-top: 10px;
}
.footer-right{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-right a{
  color: #374151;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}
.footer-right a:hover{ color: #111827; }

/* ============== Cursor Glow (controlled) ============== */
.cursor-glow{
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle,
    rgba(56,189,248,.16),
    rgba(56,189,248,.08),
    transparent 60%);
  mix-blend-mode: screen;
  z-index: 1;
  transition: opacity .25s var(--ease);
}

/* ============== Desktop ============== */
@media (min-width: 960px){
  section{ padding: 150px 0; }

  .trust-inner{ grid-template-columns: 1fr 1.2fr; }

  .cap-grid{ grid-template-columns: repeat(3, 1fr); gap: 18px; }

  .concept{ grid-template-columns: 1.08fr .92fr; gap: 26px; }

  .scene-grid{ grid-template-columns: repeat(3, 1fr); gap: 18px; }

  .cta-inner{ grid-template-columns: 1.2fr .8fr; padding: 34px; }

  /* Desktop: nav inline */
  .nav{
    position: static;
    height: auto;
    width: auto;
    transform: none;
    flex-direction: row;
    padding: 0;
    background: transparent;
    border: none;
    gap: 10px;
  }
  .nav a{
    font-size: 14px;
    color: #111827;
    border: 1px solid transparent;
    background: transparent;
    padding: 8px 10px;
  }
  .nav a:hover{
    border-color: rgba(29,78,216,.16);
    background: rgba(29,78,216,.05);
  }

  .nav-toggle{ display: none; }
}

/* Small screens typography */
@media (max-width: 420px){
  h1{ font-size: 36px; }
  h2{ font-size: 26px; }
}

/* ================= Support Dock (Mobile High-End) ================= */

.support-dock{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + var(--safe-b));
  z-index: 350;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 26px 70px rgba(2,6,23,.18);
  backdrop-filter: blur(10px);
}

.dock-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 12px 12px;
  cursor: pointer;
  background: #fff;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}

.dock-btn:active{ transform: translateY(1px); }

.dock-btn--primary{
  border: none;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 18px 40px rgba(29,78,216,.22);
}

.dock-btn--ghost{
  background: rgba(2,6,23,.96);
  color: rgba(255,255,255,.90);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 56px rgba(0,0,0,.25);
}

.dock-ic{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

.dock-btn--primary .dock-ic{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.16);
}

.dock-txt{
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.dock-txt strong{ font-size: 13px; font-weight: 900; }
.dock-txt em{ font-style: normal; font-size: 11px; opacity: .78; }

/* Desktop: 不显示 Dock */
@media (min-width: 960px){
  .support-dock{ display: none; }
  .footer{ padding-bottom: 46px; }
}

/* ================= Support Modal ================= */
.support-modal{
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
}
.support-modal.open{ display: block; }

.support-mask{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.78);
  backdrop-filter: blur(8px);
}

.support-panel{
  position: relative;
  z-index: 2;
  width: min(720px, calc(100% - 24px)); /* 原来 920px */
  margin: 6vh auto;                     /* 原来 8vh */  
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 40px 120px rgba(2,6,23,.35);
  overflow: hidden;
}

.support-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(180deg, #fff, var(--bg-soft));
  border-bottom: 1px solid var(--line);
}
.support-title{
  font-weight: 900;
  letter-spacing: -0.01em;
}
.support-close{
  width: 38px; height: 38px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-size: 22px;
}

.support-body{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 18px;
}

.support-card{
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(2,6,23,.08);
}

.support-k{
  font-size: 12px;
  font-weight: 900;
  color: #111827;
  letter-spacing: .02em;
  margin-bottom: 10px;
}

.support-qr{
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.support-qr img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.support-tip{
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.support-v{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-weight: 800;
  color: #111827;
}

.mini-btn{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 900;
}

.support-note{
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.support-foot{
  padding: 16px 18px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-soft), #fff);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 900px){
  .support-panel{ margin: 6vh auto; }
  .support-body{ grid-template-columns: 1fr; }
}


/* ================= Gallery 高级 Hover ================= */
.gallery-item {
  transition:
    transform .35s cubic-bezier(.2,.9,.2,1),
    box-shadow .35s cubic-bezier(.2,.9,.2,1),
    border-color .35s;
}
.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(0,0,0,.55);
}

/* ================= 客服悬浮（桌面） ================= */
.floating-support {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(2,6,23,.92);
  color: #fff;
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.floating-support:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 120px rgba(0,0,0,.65);
}
.floating-support span {
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .floating-support {
    display: none;
  }
}


/* ================= PATCH: Pricing Layout ================= */

.pricing-hero .hero-desc--calm{ max-width: 720px; }

.pricing{ background: linear-gradient(180deg, #fff, #f7f8fb); }

.pricing .hero--dark{
  background:
    radial-gradient(900px 420px at 70% 0%, rgba(29,78,216,.36), transparent 60%),
    var(--dark);
}

.pricing-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.price-card{
  position: relative;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 18px 46px rgba(2,6,23,.08);
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

.price-head h3{
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.price-sub{
  margin: 0;
  color: rgba(2,6,23,.55);
  font-size: 13px;
}

.price-main{
  margin: 14px 0 10px;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.price-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  color: rgba(2,6,23,.72);
  font-size: 13px;
}

.price-list li{
  padding-left: 18px;
  position: relative;
}

.price-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(37,99,235,.95);
  font-weight: 900;
}

.price-foot{
  margin-top: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
}

.price-card.highlight{
  background: radial-gradient(420px 220px at 80% 0%, rgba(37,99,235,.18), transparent 55%),
              #0b1220;
  border-color: rgba(255,255,255,.10);
  color: #fff;
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
}

.price-card.highlight .price-sub{ color: rgba(255,255,255,.70); }
.price-card.highlight .price-list{ color: rgba(255,255,255,.78); }
.price-card.highlight .price-list li::before{ color: rgba(56,189,248,.95); }

.price-badge{
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(56,189,248,.14);
  border: 1px solid rgba(56,189,248,.25);
  color: rgba(255,255,255,.90);
  font-size: 12px;
  font-weight: 900;
}

.pricing-private{ background: #fff; }

.private-grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.private-item{
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(2,6,23,.10);
  background: #fff;
  box-shadow: 0 14px 34px rgba(2,6,23,.06);
}

.private-item h4{
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.private-item p{
  margin: 0;
  color: rgba(2,6,23,.60);
  font-size: 13px;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 980px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .price-card{ min-height: unset; }
  .private-grid{ grid-template-columns: 1fr; }
}

body.nav-open .support-dock {
  pointer-events: none;
  opacity: .4;
}

/* ================= H5 Product Showcase Fix 重做H5布局 ================= */
@media (max-width: 900px){

  /* Stage 改为纵向、更紧凑 */
  .iphone-stage{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* 主 iPhone 再缩一点，避免霸屏 */
  .iphone-frame{
    width: min(70vw, 280px);
  }

  /* ===== 关键：Gallery 改为横向滑动条 ===== */
  .iphone-gallery{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .iphone-gallery::-webkit-scrollbar{
    display: none;
  }

  .gallery-item{
    flex: 0 0 72%;
    max-width: 300px;
    min-width: unset;
    scroll-snap-align: start;
    border-radius: 18px;
  }

  .gallery-item img{
    border-radius: 12px;
  }
}

/* 产品展示菜单效果 */
.gallery-item.active{
  border-color: rgba(56,189,248,.45);
  box-shadow: 0 30px 90px rgba(56,189,248,.25);
}


/* ===== Product Gallery swap motion ===== */
.iphone-screen{
  transition: opacity .18s var(--ease), transform .22s var(--ease);
  will-change: opacity, transform;
}

.iphone-screen.is-switching{
  opacity: .08;
  transform: translateY(2px) scale(.995);
}

.gallery-item.active{
  border-color: rgba(56,189,248,.45);
  box-shadow: 0 30px 90px rgba(56,189,248,.22);
}