@charset "utf-8";
/* ==========================================================================
   在线开盘页专属样式（onlineOpening_2026.html）
   颜色 / 阴影 / 缓动 / 圆角 / 顶栏高度引用 base_2026.css :root；宽度断点集中在文件末尾。
   ========================================================================== */

/* ===== 步骤 ===== */
.sp-page .psteps{ display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }

.sp-page .psteps--4{ grid-template-columns: repeat(4, 1fr); }

.sp-page .pstep{
  border: 1px solid var(--line); background: var(--paper);
  padding: 30px 28px 34px; overflow: hidden;
}

.sp-page .pstep__no{
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 34px; font-weight: 700; line-height: 1;
  color: rgba(43,92,230,.16); letter-spacing: -.04em;
}

.sp-page .pstep__no::after{ content: ""; flex: 1; height: 1px; background: var(--line); }

.sp-page .pstep b{ display: block; margin: 18px 0 10px; font-size: 18px; letter-spacing: -.02em; color: var(--ink); }

.sp-page .pstep p{ margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--ink-4); }

.sp-page .opening-solution{
  position: relative; overflow: hidden; padding: 94px 0;
  background: var(--paper); scroll-margin-top: var(--header-h);
}

.sp-page .opening-solution::before{
  content: ""; position: absolute; inset: 0 0 0 47%; pointer-events: none;
  background-image: linear-gradient(rgba(43,92,230,.042) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(43,92,230,.042) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse at 58% 48%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse at 58% 48%, #000, transparent 72%);
}

.sp-page .opening-solution__grid{
  position: relative; display: grid;
  grid-template-columns: minmax(400px,.88fr) minmax(560px,1.12fr);
  align-items: center; gap: 38px; min-height: 560px;
}

.sp-page .opening-solution__copy{ position: relative; z-index: 2; max-width: 590px; }

.sp-page .opening-solution__label{
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px; color: var(--brand);
}

.sp-page .opening-solution__label i{ display: block; width: 18px; height: 1px; background: rgba(43,92,230,.35); }

.sp-page .opening-solution__label small{
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em;
}

.sp-page .opening-solution h2{
  margin: 0; font-size: 44px; line-height: 1.18; letter-spacing: -.045em; color: var(--ink);
}

.sp-page .opening-solution__intro{ margin-top: 27px; color: var(--ink-3); font-size: 15px; line-height: 1.92; }

.sp-page .opening-solution__intro p{ margin: 0; }

.sp-page .opening-solution__intro strong{ color: var(--ink); font-weight: 600; }

.sp-page .opening-solution__stages{
  display: flex; flex-wrap: wrap; gap: 22px; margin-top: 29px;
  color: var(--ink-4); font-size: 12px; font-weight: 600;
}

.sp-page .opening-solution__stages span{ display: inline-flex; align-items: center; gap: 8px; }

.sp-page .opening-solution__stages i{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px rgba(43,92,230,.09);
}

.sp-page .opening-solution__scope{
  margin-top: 27px; padding: 21px 23px;
  background: linear-gradient(120deg, var(--tint), rgba(247,250,255,.5));
}

.sp-page .opening-solution__scope small{
  display: block; margin-bottom: 9px; color: var(--brand);
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
}

.sp-page .opening-solution__scope p{ margin: 0; color: var(--ink-4); font-size: 13px; line-height: 1.82; }

.sp-page .opening-solution__visual{
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  min-height: 500px; margin: -18px -92px -18px -36px; pointer-events: none;
}

.sp-page .opening-solution__visual::before{
  content: ""; position: absolute; inset: 16% 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(43,92,230,.13), rgba(43,92,230,.035) 48%, transparent 72%);
  filter: blur(20px);
}

.sp-page .opening-solution__visual img{
  display: block; width: 116%; max-width: none; height: auto; max-height: 610px;
  object-fit: contain; filter: saturate(.88) contrast(.99);
}

/* ===== 响应式 ===== */
/* ===== ≤1024px ===== */
@media (max-width: 1024px){
  .sp-page .psteps{ grid-template-columns: repeat(2, 1fr); }
  .sp-page .opening-solution__grid{ grid-template-columns: 1fr; gap: 10px; min-height: 0; }
  .sp-page .opening-solution__copy{ max-width: 760px; }
  .sp-page .opening-solution__visual{ min-height: 370px; margin: -8px -54px -28px; }
}

/* ===== ≤768px ===== */
@media (max-width: 768px){
  .sp-page .psteps{ grid-template-columns: 1fr; }
  /* ===== 在线开盘 ===== */
  .sp-page .opening-solution{ padding: 48px 0; }
  .sp-page .opening-solution::before{ inset: 45% 0 0; }
  .sp-page .opening-solution__label{ margin-bottom: 16px; }
  .sp-page .opening-solution h2{ font-size: 33px; }
  .sp-page .opening-solution__intro{ margin-top: 20px; font-size: 14.5px; line-height: 1.82; }
  .sp-page .opening-solution__stages{ gap: 17px; margin-top: 23px; }
  .sp-page .opening-solution__scope{ margin-top: 22px; padding: 18px 17px; }
  .sp-page .opening-solution__scope p{ font-size: 12.5px; line-height: 1.78; }
  .sp-page .opening-solution__visual{ min-height: 250px; margin: 4px -36px -24px; }
  .sp-page .opening-solution__visual img{ width: 80%; max-height: 330px; }
}

/* ===== ≤480px ===== */
@media (max-width: 480px){
  .sp-page .opening-solution__visual{ margin: 4px -24px -24px; }
  .sp-page .opening-solution{ padding: 32px 0; }
}