:root {
  --promo-cyan: #67e8f9;
  --promo-violet: #a78bfa;
  --promo-pink: #fb7185;
  --promo-amber: #fbbf24;
  --promo-green: #5ee6a8;
}

/* 首屏转化入口 */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -8%;
  top: 19%;
  width: 48%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(circle, #3b82f624 0, #8b5cf612 42%, transparent 72%);
  filter: blur(12px);
}
.hero h1 { text-shadow: 0 12px 42px #02061780; }
.hero h1 em {
  color: transparent;
  background: linear-gradient(90deg, #dbeafe, var(--promo-cyan), var(--promo-violet));
  -webkit-background-clip: text;
  background-clip: text;
}
.hero .cta-row { align-items: center; margin-top: 34px; }
.hero .btn { min-height: 54px; padding-inline: 27px; }
.hero .btn.primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 48%, #a78bfa 100%);
  box-shadow: 0 12px 34px #22d3ee42, inset 0 1px #ffffff8a;
}
.hero .btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, #ffffff72, transparent);
  animation: ctaShine 3.8s ease-in-out infinite;
}
.hero .btn.secondary {
  border-color: #8b5cf68c;
  background: linear-gradient(135deg, #312e8166, #172554aa);
  box-shadow: inset 0 1px #ffffff17;
}
.hero .micro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 7px 12px;
  border: 1px solid #5ee6a82e;
  border-radius: 999px;
  background: #5ee6a80b;
}
.hero .micro::before { content: "✓"; color: var(--promo-green); font-weight: 900; }
.status-card { border-color: #5ee6a850; box-shadow: 0 22px 70px #02061775, 0 0 34px #5ee6a812; }
.metric-card { border-color: #a78bfa52; background: linear-gradient(160deg, #13233be8, #24164be8); }

/* 套餐区 */
#plans {
  position: relative;
  max-width: calc(var(--max) + 40px);
  border-radius: 34px;
  background: radial-gradient(circle at 8% 22%, #22d3ee12, transparent 25%), radial-gradient(circle at 92% 12%, #fb718512, transparent 27%), linear-gradient(180deg, #0c1930a8, #08111f3d);
}
#plans .section-head > p:last-child {
  display: inline-block;
  margin: 4px 0 0;
  padding: 8px 14px;
  border: 1px solid #67e8f932;
  border-radius: 999px;
  color: #cdefff;
  background: #67e8f90b;
}
.plan {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.plan:hover { transform: translateY(-7px); }
.plan.starter::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--card-accent);
}
.plan.starter:nth-child(1) {
  --card-accent: linear-gradient(90deg, #5ee6a8, #22d3ee);
  background: linear-gradient(155deg, #12352f, #10223a 62%, #0e1a2c);
  border-color: #5ee6a85c;
  box-shadow: 0 18px 45px #041c183b;
}
.plan.starter:nth-child(2) {
  --card-accent: linear-gradient(90deg, #a78bfa, #6366f1);
  background: linear-gradient(155deg, #282051, #15213c 62%, #0e1a2c);
  border-color: #a78bfa5c;
  box-shadow: 0 18px 45px #160c363b;
}
.plan.starter:nth-child(3) {
  --card-accent: linear-gradient(90deg, #fbbf24, #fb7185);
  background: linear-gradient(155deg, #45281b, #24213c 62%, #0e1a2c);
  border-color: #fbbf2478;
  box-shadow: 0 18px 55px #3c180c52;
}
.plan.starter:nth-child(1) .ribbon { background: var(--promo-green); }
.plan.starter:nth-child(2) .ribbon { color: #fff; background: var(--promo-violet); }
.plan.starter:nth-child(3) .ribbon {
  background: linear-gradient(135deg, var(--promo-amber), var(--promo-pink));
  box-shadow: 0 6px 20px #fb718548;
}
.plan.starter .price { color: #fff; text-shadow: 0 7px 24px #0008; }
.plan.starter:nth-child(1) .price { color: #9af4c9; }
.plan.starter:nth-child(2) .price { color: #c4b5fd; }
.plan.starter:nth-child(3) .price { color: #fde68a; }
.plan .btn { align-self: flex-start; margin-top: auto; }
.plan.starter .btn { min-width: 132px; border-color: #ffffff38; background: #ffffff0c; }
.plan.starter .btn:hover { border-color: #ffffff8f; background: #ffffff18; }
.plan.starter.featured .btn.primary {
  color: #221307;
  background: linear-gradient(135deg, #fde68a, #fb7185);
  box-shadow: 0 10px 28px #fb71853d;
}

@keyframes ctaShine {
  0%, 58% { transform: translateX(-120%) skewX(-18deg); }
  82%, 100% { transform: translateX(135%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .btn.primary::after { animation: none; }
  .plan { transition: none; }
}
@media (max-width: 800px) {
  #plans { border-radius: 0; }
  .hero .micro { border-radius: 14px; }
}

/* 云层主题背景 */
body {
  background:
    radial-gradient(circle at 12% 8%, #67e8f91c 0, transparent 25%),
    radial-gradient(circle at 86% 16%, #818cf82b 0, transparent 30%),
    radial-gradient(circle at 52% 68%, #38bdf817 0, transparent 36%),
    linear-gradient(155deg, #071425 0%, #0b2039 38%, #102b4b 72%, #0a1b31 100%);
  background-attachment: fixed;
}

.cloud-bg {
  opacity: .82;
  background-image:
    radial-gradient(ellipse at 18% 18%, #dff8ff15 0 8%, transparent 20%),
    radial-gradient(ellipse at 82% 12%, #bfdbfe13 0 10%, transparent 24%),
    radial-gradient(ellipse at 45% 72%, #e0f2fe0f 0 12%, transparent 27%),
    radial-gradient(ellipse at 94% 76%, #c4b5fd10 0 9%, transparent 22%),
    linear-gradient(180deg, transparent 0 56%, #7dd3fc0b 76%, transparent 100%);
  background-size: 720px 520px, 820px 600px, 920px 680px, 760px 580px, 100% 100%;
}

.cloud {
  color: #dff8ff;
  opacity: .34;
  filter: drop-shadow(0 12px 28px #7dd3fc2e);
  text-shadow: 18px 10px 0 #bfdbfe24, -20px 6px 0 #ffffff1f;
}

.site-header {
  background: linear-gradient(90deg, #071425e8, #0b2039df, #101c3ee8);
  border-bottom-color: #bae6fd1c;
  box-shadow: 0 10px 35px #02061738;
}

.site-footer {
  background: linear-gradient(180deg, transparent, #06111f99);
}

/* 云朵与上升路径组合 Logo */
.brand { gap: 12px; letter-spacing: .02em; }
.brand-mark {
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid #ffffff45;
  border-radius: 14px;
  color: transparent;
  font-size: 0;
  background: linear-gradient(145deg, #67e8f9 0%, #38bdf8 42%, #6366f1 72%, #a78bfa 100%);
  box-shadow: 0 9px 24px #38bdf838, inset 0 1px 1px #ffffff9c;
  transform: rotate(-2deg);
  transition: transform .25s ease, box-shadow .25s ease;
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: 7px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8.2 24.1h14.9a5.1 5.1 0 0 0 .5-10.2A8.2 8.2 0 0 0 8.1 11a6.6 6.6 0 0 0 .1 13.1Z' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='m13 20 6.5-6.5m-4.7 0h4.7v4.7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 3px #17255466);
}

.brand:hover .brand-mark {
  transform: rotate(0) translateY(-2px);
  box-shadow: 0 13px 30px #38bdf850, inset 0 1px 1px #ffffffb8;
}

.brand > span:last-child {
  background: linear-gradient(90deg, #f8fbff, #dbeafe 68%, #a5f3fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 520px) {
  .brand-mark { flex-basis: 38px; width: 38px; height: 38px; border-radius: 13px; }
}

/* 精细化 FAQ */
.faq .section-head {
  margin-bottom: 30px;
}

.faq .section-head > p:last-child {
  max-width: 680px;
  color: #aebfdb;
}

.faq-list {
  display: grid;
  gap: 13px;
  counter-reset: faq-item;
}

.faq-list details {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #2d496c;
  border-radius: 18px;
  background: linear-gradient(145deg, #142943e8, #0d1a2de8);
  box-shadow: 0 12px 35px #02061720;
  counter-increment: faq-item;
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}

.faq-list details::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #67e8f9, #6366f1);
  opacity: .38;
  transition: opacity .24s ease, width .24s ease;
}

.faq-list details:nth-child(3n+2)::before {
  background: linear-gradient(180deg, #a78bfa, #fb7185);
}

.faq-list details:nth-child(3n)::before {
  background: linear-gradient(180deg, #5ee6a8, #38bdf8);
}

.faq-list details:hover {
  transform: translateY(-2px);
  border-color: #67e8f957;
  box-shadow: 0 17px 42px #02061732;
}

.faq-list details[open] {
  border-color: #67e8f970;
  background: linear-gradient(145deg, #17314fe8, #101d33f2);
  box-shadow: 0 18px 48px #02061740, 0 0 30px #22d3ee0b;
}

.faq-list details[open]::before {
  width: 5px;
  opacity: 1;
}

.faq-list summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 76px;
  padding: 20px 70px 20px 74px;
  cursor: pointer;
  list-style: none;
  color: #eaf1ff;
  font-size: 17px;
  font-weight: 800;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before {
  content: counter(faq-item, decimal-leading-zero);
  position: absolute;
  left: 23px;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid #67e8f938;
  border-radius: 11px;
  color: #8cecf8;
  background: #67e8f90c;
  font-size: 12px;
  letter-spacing: .05em;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 23px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  color: #bdefff;
  background: #ffffff08;
  font-size: 22px;
  font-weight: 400;
  transition: transform .24s ease, color .24s ease, background .24s ease;
}

.faq-list details[open] summary::after {
  content: "−";
  transform: rotate(180deg);
  color: #071425;
  background: #67e8f9;
}

.faq-list details p {
  margin: 0;
  padding: 0 72px 24px 74px;
  color: #b4c6e2;
  line-height: 1.9;
}

.faq-list details[open] p {
  animation: faqReveal .22s ease-out;
}

@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .faq-list details,
  .faq-list summary::after { transition: none; }
  .faq-list details[open] p { animation: none; }
}

@media (max-width: 560px) {
  .faq-list summary {
    min-height: 70px;
    padding: 17px 56px 17px 58px;
    font-size: 15px;
  }
  .faq-list summary::before { left: 15px; width: 31px; height: 31px; }
  .faq-list summary::after { right: 14px; width: 30px; height: 30px; }
  .faq-list details p { padding: 0 18px 20px 58px; font-size: 14px; }
}