/* ==========================================================================
   名爵官方app下载 内页骨架：左右分屏对照
   Hero 上下分层 + 双栏（Android | iOS）并排 + 中缝分隔
   ========================================================================== */

:root {
  --sp-bg: #070c16;
  --sp-panel: #0d1726;
  --sp-green: #22c55e;
  --sp-blue: #3b82f6;
  --sp-text: #e6edf7;
  --sp-muted: #8595ad;
  --sp-line: rgba(255, 255, 255, .08);
}

body.sp-page { background: var(--sp-bg); color: var(--sp-text); }

.sp-page .site-header { background: rgba(7, 12, 22, .88); border-bottom-color: rgba(255, 255, 255, .07); }
.sp-page .brand-text { color: #fff; }
.sp-page .site-nav a { color: #8b98ae; }
.sp-page .site-nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sp-page .site-nav a.is-active { color: #fff; background: rgba(244, 63, 94, .16); }
.sp-page .nav-toggle { background: transparent; border-color: rgba(255, 255, 255, .18); }
.sp-page .nav-toggle span { background: #fff; }

@media (max-width: 1060px) {
  .sp-page .site-nav { background: #0d1726; border-bottom-color: rgba(255, 255, 255, .1); }
  .sp-page .site-nav a { color: #8b98ae; }
}

/* ---------------- Hero ---------------- */
.sp-hero {
  position: relative;
  overflow: hidden;
  padding: 74px 0 60px;
  background:
    radial-gradient(660px 400px at 24% 6%, rgba(34, 197, 94, .16), transparent 62%),
    radial-gradient(660px 400px at 78% 6%, rgba(59, 130, 246, .16), transparent 62%),
    var(--sp-bg);
}

.sp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 72px);
  mask-image: linear-gradient(180deg, #000, transparent 76%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 76%);
  pointer-events: none;
}

.sp-hero-top {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 44px;
}

.sp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 3px;
  color: #fda4af;
}

.sp-kicker::before,
.sp-kicker::after {
  content: "";
  width: 26px;
  height: 1px;
  background: #fda4af;
  opacity: .6;
}

.sp-hero h1 {
  margin: 20px auto 16px;
  max-width: 880px;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: -.7px;
  text-wrap: balance;
}

.sp-hero h1 em { font-style: normal; color: #fda4af; }

.sp-hero .lead {
  max-width: 660px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.9;
  color: var(--sp-muted);
}

.sp-hero .lead strong { color: var(--sp-text); }

.sp-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px;
  margin-top: 28px;
}

.sp-actions .btn-primary {
  background: linear-gradient(135deg, #f43f5e, #be123c);
  color: #fff;
  box-shadow: 0 16px 34px rgba(190, 18, 60, .34);
}

.sp-actions .btn-room {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .04);
  color: #fff;
}

.sp-actions .btn-room b { color: #fda4af; letter-spacing: 1.5px; }

.sp-hero-visual {
  position: relative;
  z-index: 2;
  width: min(100%, 760px);
  margin: 40px auto 0;
}

.sp-hero-visual img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 36px 70px rgba(0, 0, 0, .55);
}

/* ---------------- 分屏主体 ---------------- */
.sp-section { padding: 0 0 84px; }

.split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  border: 1px solid var(--sp-line);
  border-radius: 20px;
  background: linear-gradient(180deg, #0b1422, #080d18);
  overflow: hidden;
}

.split-seam {
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .16) 0 8px, transparent 8px 16px);
}

.split-side { padding: 40px 38px 44px; }

.split-side header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--sp-line);
}

.split-side .os {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 15px;
  font-size: 24px;
}

.split-side.android .os { background: rgba(34, 197, 94, .14); color: #4ade80; }
.split-side.ios .os { background: rgba(59, 130, 246, .14); color: #93c5fd; }

.split-side h2 { font-size: 21px; font-weight: 900; }
.split-side header p { font-size: 12.5px; color: var(--sp-muted); margin-top: 3px; font-family: var(--mono); }

.split-side ol { display: grid; gap: 0; counter-reset: sp; }

.split-side ol li {
  counter-increment: sp;
  position: relative;
  padding: 15px 0 15px 46px;
  border-bottom: 1px dashed rgba(255, 255, 255, .07);
  font-size: 14.5px;
  line-height: 1.8;
  color: #a3b1c6;
}

.split-side ol li:last-child { border-bottom: 0; }

.split-side ol li::before {
  content: counter(sp);
  position: absolute;
  left: 0; top: 15px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
}

.split-side.android ol li::before { background: rgba(34, 197, 94, .12); color: #4ade80; }
.split-side.ios ol li::before { background: rgba(59, 130, 246, .12); color: #93c5fd; }

.split-side ol li strong { color: #fff; }

.split-cta {
  display: block;
  margin-top: 24px;
  padding: 14px 20px;
  border-radius: 11px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  transition: transform .2s, opacity .2s;
}

.split-cta:hover { transform: translateY(-2px); }
.split-side.android .split-cta { background: linear-gradient(135deg, #4ade80, #16a34a); color: #04240f; }
.split-side.ios .split-cta { background: linear-gradient(135deg, #60a5fa, #2563eb); color: #fff; }

.split-meta {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: #5d6b82;
  text-align: center;
}

/* ---------------- 对照表 ---------------- */
.sp-block { padding: 0 0 84px; }

.sp-head { max-width: 700px; margin-bottom: 30px; }

.sp-head .k {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 3px;
  color: #fda4af;
}

.sp-head h2 {
  margin: 12px 0 10px;
  font-size: clamp(23px, 3vw, 34px);
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
  text-wrap: balance;
}

.sp-head p { font-size: 15px; color: var(--sp-muted); }

.cmp {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--sp-line);
  border-radius: 16px;
  overflow: hidden;
  font-size: 14px;
}

.cmp thead th {
  padding: 16px 20px;
  text-align: left;
  background: rgba(255, 255, 255, .03);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 1.5px;
  color: #7b8798;
  font-weight: 400;
  border-bottom: 1px solid var(--sp-line);
}

.cmp thead th:nth-child(2) { color: #4ade80; }
.cmp thead th:nth-child(3) { color: #93c5fd; }

.cmp td {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: #a3b1c6;
}

.cmp tr:last-child td { border-bottom: 0; }
.cmp td:first-child { color: #fff; font-weight: 700; }

/* ---------------- 校验提示 ---------------- */
.sp-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  margin-top: 24px;
  padding: 26px 28px;
  border-radius: 16px;
  border: 1px solid rgba(250, 204, 21, .26);
  background: rgba(250, 204, 21, .05);
}

.sp-note .i {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(250, 204, 21, .14);
  color: #facc15;
  font-family: var(--mono);
  font-weight: 700;
}

.sp-note h3 { font-size: 15.5px; font-weight: 800; color: #fde68a; margin-bottom: 6px; }
.sp-note p { font-size: 13.5px; line-height: 1.85; color: #bdb08c; }
.sp-note a { color: #facc15; }

/* ---------------- 相关 ---------------- */
.sp-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.sp-related a {
  padding: 22px;
  border-radius: 12px;
  border: 1px solid var(--sp-line);
  background: rgba(255, 255, 255, .02);
  transition: border-color .2s, transform .2s;
}

.sp-related a:hover { border-color: rgba(244, 63, 94, .4); transform: translateY(-3px); }
.sp-related strong { display: block; font-size: 14.5px; color: #fff; margin-bottom: 4px; }
.sp-related span { font-size: 12.5px; color: var(--sp-muted); }

/* 入场 */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; }
  .split-seam {
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 8px, transparent 8px 16px);
  }
  .sp-related { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sp-hero { padding: 48px 0 46px; }
  .sp-hero h1 { font-size: 28px; }
  .sp-actions .btn { width: 100%; }
  .split-side { padding: 26px 20px 30px; }
  .sp-section, .sp-block { padding-bottom: 60px; }
  .cmp thead th, .cmp td { padding: 12px 12px; font-size: 13px; }
  .cmp thead th:nth-child(4), .cmp td:nth-child(4) { display: none; }
  .sp-note { grid-template-columns: 1fr; padding: 20px; }
}