/* ============================================================
   TaoBoy 知命童子 · 首页「正式上市」改版 — Launch Layer
   叠加在 style.css 之上的"上市喜庆层"（朱砂/暖金/灯彩暖光，克制不廉价）
   引入顺序：先 style.css（基础层）后 taoboy-launch.css（叠加层）
   仅首页（index.html）引用。
   ============================================================ */

:root {
  /* ---- Launch accents（上市喜庆层）---- */
  --launch-cinnabar:     #C4503E;  /* 上市主喜色：朱砂红 */
  --launch-cinnabar-deep:#A23C2C;
  --launch-amber:        #E0A94F;  /* 暖金 */
  --launch-amber-soft:   #F0D8A8;
  --lantern-glow:        #F6E2BE;  /* 灯彩暖光 */
  --festive-ground:      #FBF3E6;  /* 上市区暖底 */
  --ribbon-grad:         linear-gradient(135deg,#C4503E 0%,#A23C2C 100%);
  --amber-grad:          linear-gradient(180deg,#ECC878 0%,#E0A94F 55%,#CE9438 100%);

  --cta-glow:   0 10px 28px rgba(196,80,62,.26), 0 2px 6px rgba(196,80,62,.18);
  --amber-glow: 0 10px 26px rgba(224,169,79,.32), 0 2px 6px rgba(206,148,56,.2);
}

/* ============================================================
   1. 上市公告条 / Announcement bar
   ============================================================ */
.lc-announce {
  position: relative; z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 11px 48px 11px 20px;
  background: var(--ink-teal);
  color: var(--on-dark);
  font-size: 14px; letter-spacing: .01em;
  overflow: hidden;
}
.lc-announce[hidden] { display: none; }
.lc-announce::before { /* 暖光自左侧渗入，灯彩感 */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 180% at 0% 50%, rgba(224,169,79,.30) 0%, rgba(224,169,79,0) 55%);
  pointer-events: none;
}
.lc-announce__tag {
  position: relative; z-index: 1;
  font-family: var(--font-sans); font-weight: 700; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: #2A1A14; background: var(--amber-grad);
  padding: 4px 11px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  white-space: nowrap;
}
.lc-announce__txt { position: relative; z-index: 1; }
.lc-announce__txt b { color: var(--launch-amber-soft); font-weight: 600; }
.lc-announce__cta {
  position: relative; z-index: 1;
  color: var(--on-dark); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(244,241,233,.45); padding-bottom: 1px;
  white-space: nowrap;
}
.lc-announce__cta:hover { color: #fff; border-color: #fff; }
.lc-announce__close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 1;
  background: transparent; border: none; color: var(--on-dark-soft); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 6px; border-radius: 6px;
}
.lc-announce__close:hover { color: #fff; background: rgba(255,255,255,.1); }

/* ============================================================
   2. 上市徽标 / 绶带 / 印章
   ============================================================ */
.lc-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 12px; border-radius: var(--r-pill);
  background: rgba(196,80,62,.08);
  border: 1px solid rgba(196,80,62,.28);
  color: var(--launch-cinnabar-deep);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.lc-badge__pulse {
  position: relative; width: 8px; height: 8px; border-radius: 50%;
  background: var(--launch-cinnabar); flex-shrink: 0;
}
.lc-badge__pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--launch-cinnabar);
  animation: lc-pulse 2.2s ease-out infinite;
}
@keyframes lc-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.lc-badge__en { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--launch-cinnabar); }
@media (prefers-reduced-motion: reduce) { .lc-badge__pulse::after { animation: none; } }

/* 印章式上市标记（朱砂方印）*/
.lc-seal {
  font-family: var(--font-serif); writing-mode: vertical-rl; font-size: 15px; letter-spacing: .32em;
  color: #FFF3EC; background: var(--ribbon-grad);
  padding: 14px 9px; border-radius: 8px;
  box-shadow: var(--cta-glow);
  border: 1px solid rgba(255,255,255,.22);
}

/* ============================================================
   3. CTA 强化（层级：朱砂 ＞ 暖金 ＞ 青绿描边）
   ============================================================ */
.lc-btn-amber {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 56px; padding: 0 34px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 16px; font-weight: 600;
  color: #3A2410; background: var(--amber-grad);
  border: 1px solid rgba(206,148,56,.5); cursor: pointer; text-decoration: none;
  box-shadow: var(--amber-glow); transition: transform .12s, box-shadow .2s, filter .18s;
  white-space: nowrap;
}
.lc-btn-amber:hover { filter: brightness(1.04); box-shadow: 0 14px 34px rgba(224,169,79,.4); }
.lc-btn-amber:active { transform: translateY(1px); }

.lc-btn-cinnabar {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 56px; padding: 0 34px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 16px; font-weight: 600;
  color: #FFF7EC; background: var(--ribbon-grad);
  border: 1px solid rgba(162,60,44,.5); cursor: pointer; text-decoration: none;
  box-shadow: var(--cta-glow); transition: transform .12s, box-shadow .2s, filter .18s;
  white-space: nowrap;
}
.lc-btn-cinnabar:hover { filter: brightness(1.05); box-shadow: 0 14px 32px rgba(196,80,62,.36); }
.lc-btn-cinnabar:active { transform: translateY(1px); }

.lc-btn-cinnabar:focus-visible,
.lc-btn-amber:focus-visible { outline: 2px solid var(--launch-amber); outline-offset: 2px; }

/* 深底上的反白描边次级按钮（CTA 贯穿条用）*/
.btn-ghost-ondark {
  background: transparent; color: var(--on-dark);
  border-color: rgba(244,241,233,.4);
}
.btn-ghost-ondark:hover { background: rgba(255,255,255,.08); border-color: var(--on-dark); }

/* ============================================================
   4. 中段 CTA 贯穿条 / mid-page CTA band
   ============================================================ */
.lc-cta-band {
  position: relative; overflow: hidden;
  background: var(--ink-teal); color: var(--on-dark);
  border-radius: var(--r-xl); padding: 52px 48px; text-align: center;
}
.lc-cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 140% at 50% -10%, rgba(224,169,79,.22) 0%, rgba(224,169,79,0) 60%);
  pointer-events: none;
}
.lc-cta-band > * { position: relative; z-index: 1; }
.lc-cta-band h2 { font-family: var(--font-serif); font-size: var(--fz-h2); margin: 14px 0 10px; color: var(--on-dark); font-weight: 600; }
.lc-cta-band p { color: var(--on-dark-soft); font-size: var(--fz-lead); margin: 0 auto 28px; max-width: 34em; }
.lc-cta-band__row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* eyebrow 变体：居中 / 深底 / 朱砂 */
.lc-eyebrow-center { justify-content: center; }
.lc-eyebrow-ondark { color: var(--launch-amber-soft); }
.lc-eyebrow-ondark::before { background: rgba(224,169,79,.55); }
.lc-eyebrow-cinnabar { color: var(--launch-cinnabar); }
.lc-eyebrow-cinnabar::before { background: var(--launch-cinnabar); }

/* 居中段落标题（上市优惠区 / 收尾区）*/
.lc-sec-head--center { text-align: center; max-width: 640px; margin: 0 auto var(--s-7); }
.lc-offer-note { text-align: center; max-width: 640px; margin: 24px auto 0; font-size: 13px; color: var(--secondary-text); }

/* ============================================================
   5. 上市优惠 / 订阅权益区
   ============================================================ */
.lc-offer-ground { background: var(--festive-ground); }

.lc-offer-strip-wrap { display: flex; justify-content: center; margin-bottom: 28px; }
.lc-offer-strip {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  background: rgba(196,80,62,.07); border: 1px solid rgba(196,80,62,.22);
  color: var(--launch-cinnabar-deep); border-radius: var(--r-pill);
  padding: 10px 20px; font-size: 14px;
}
.lc-offer-strip b { font-weight: 600; }
.lc-offer-strip .sep { width: 1px; height: 14px; background: rgba(196,80,62,.3); }

.lc-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); align-items: stretch; }
.lc-plan {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--card-surface); padding: 30px 26px; box-shadow: var(--shadow-1);
}
.lc-plan__name { font-family: var(--font-serif); font-size: 20px; font-weight: 600; }
.lc-plan__sub { font-size: 13px; color: var(--secondary-text); margin-top: -8px; }
.lc-plan__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.lc-plan__price .num { font-family: var(--font-serif); font-size: 40px; font-weight: 600; color: var(--ink-teal); line-height: 1; }
.lc-plan__price .unit { font-size: 13px; color: var(--secondary-text); }
.lc-plan__price .was { font-size: 14px; color: var(--tertiary-text); text-decoration: line-through; margin-left: 4px; }
.lc-plan__permonth { font-size: 14px; color: var(--secondary-text); margin-top: -6px; }
.lc-plan__metrics { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lc-plan__total { font-size: 13px; color: var(--tertiary-text); }
.lc-plan__save {
  font-size: 12.5px; font-weight: 600; color: var(--launch-cinnabar-deep);
  background: rgba(196,80,62,.10); border: 1px solid rgba(196,80,62,.22);
  border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap;
}
.lc-plan__localnote { font-size: 12px; color: var(--tertiary-text); margin: 2px 0 0; line-height: 1.5; }
/* 季付「最受歡迎」角标：青绿底，与年付朱砂「上市最超值」区分 */
.lc-plan__flag--popular { background: var(--ink-teal); color: var(--on-dark); box-shadow: var(--shadow-2); }
.lc-plan__list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 11px; }
.lc-plan__list li { display: flex; gap: 10px; font-size: 14px; color: var(--secondary-text); line-height: 1.5; }
.lc-plan__list li::before {
  content: ""; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  background: var(--teal-container) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232F5D58' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.lc-plan .btn, .lc-plan .lc-btn-cinnabar, .lc-plan .lc-btn-amber { margin-top: auto; width: 100%; }

/* 推荐套餐：上市主推，朱砂+金高光 */
.lc-plan--featured {
  border-color: var(--launch-amber); background: linear-gradient(180deg, #FFFDF8 0%, #FBF3E6 100%);
  box-shadow: var(--shadow-3); transform: translateY(-6px);
}
.lc-plan--featured .lc-plan__name { color: var(--launch-cinnabar-deep); }
.lc-plan__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #FFF7EC; background: var(--ribbon-grad); padding: 5px 16px; border-radius: var(--r-pill);
  box-shadow: var(--cta-glow); white-space: nowrap;
}

/* ============================================================
   6. Hero（上市版）圆盘大图运用
   ============================================================ */
.lc-hero {
  position: relative; overflow: hidden; padding: 56px 32px 72px;
  background:
    radial-gradient(70% 90% at 78% 28%, var(--lantern-glow) 0%, rgba(246,226,190,0) 55%),
    linear-gradient(180deg, rgba(247,245,240,0) 50%, var(--warm-white) 100%);
}
.lc-hero__inner {
  position: relative; z-index: 2; max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-7); align-items: center;
}
.lc-hero__copy { max-width: 760px; }
.lc-hero__title {
  font-family: var(--font-serif); font-weight: 600; font-size: var(--fz-display);
  line-height: 1.16; margin: 20px 0 0; color: var(--ink-teal); text-wrap: balance;
}
html[lang="en"] .lc-hero__title { font-size: clamp(36px, 4.8vw, 58px); }
.lc-hero__title em { font-style: normal; color: var(--launch-cinnabar); }
.lc-hero__sub { font-size: var(--fz-lead); color: var(--secondary-text); margin: 22px 0 0; max-width: 32em; line-height: 1.6; }
html[lang="en"] .lc-hero__sub { font-size: 17px; }
.lc-hero__cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; align-items: center; }
.lc-hero__trust { display: flex; gap: 20px; margin-top: 24px; flex-wrap: wrap; }
.lc-hero__trust .i { font-size: 13px; color: var(--secondary-text); display: flex; align-items: center; gap: 8px; }
.lc-hero__trust .i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--launch-amber); }
.lc-hero__calendar { display: inline-block; font-size: 13px; color: var(--secondary-text); margin-top: 26px; transition: color .15s; }
.lc-hero__calendar:hover { color: var(--deep-teal); }

/* 圆盘主视觉（前景方案 A）*/
.lc-disc { position: relative; display: flex; justify-content: center; align-items: center; }
.lc-disc__halo {
  position: absolute; width: 108%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(246,226,190,.85) 0%, rgba(246,226,190,0) 62%);
}
.lc-disc__img {
  position: relative; z-index: 2; width: min(440px, 92%); height: auto;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 22px 44px rgba(35,48,46,.22));
  animation: lc-rotate 120s linear infinite;
}
@media (min-width: 921px) {
  html[lang="en"] .lc-disc { align-self: start; margin-top: clamp(32px, 3vw, 52px); }
}
@keyframes lc-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lc-disc__img { animation: none; } }
.lc-disc__seal { position: absolute; right: 4%; top: 6%; z-index: 3; }

/* ============================================================
   7. 收尾注册区（Hero 同款暖光底，居中）
   ============================================================ */
.lc-hero--center { padding: 72px 32px; text-align: center; }
.lc-hero--center .lc-hero__inner { display: block; max-width: 640px; }
.lc-hero--center .lc-badge { margin: 0 auto; }
.lc-hero--center h2 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fz-h1); color: var(--ink-teal); margin: 18px 0 0; line-height: 1.2; }
.lc-hero--center p { font-size: var(--fz-lead); color: var(--secondary-text); margin: 18px 0 0; }
.lc-hero--center .lc-hero__cta { justify-content: center; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 920px) {
  .lc-hero { padding: 56px 32px 64px; }
  .lc-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .lc-disc { order: -1; }
  .lc-disc__img { width: min(220px, 60%); animation: none; }
  .lc-plan-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .lc-plan--featured { transform: none; order: -1; }
  .lc-announce { flex-wrap: wrap; padding: 10px 40px 10px 16px; gap: 8px; font-size: 13px; }
  .lc-cta-band { padding: 44px 28px; }
}
@media (max-width: 560px) {
  .lc-hero { padding: 44px 20px 52px; }
  .lc-hero--center { padding: 52px 20px; }
  .lc-disc__img { width: min(170px, 56%); }
  .lc-hero__cta .lc-btn-amber,
  .lc-hero__cta .lc-btn-cinnabar,
  .lc-hero__cta .btn { width: 100%; }
  .lc-cta-band__row { flex-direction: column; }
  .lc-cta-band__row > * { width: 100%; }
}