/* AI 教室 · 未登录首页

   视觉基线来自 Gifo SaaS：悬浮白色导航、蓝紫云感首屏、深紫大标题、
   淡紫功能卡和紫色渐变按钮。所有样式只作用于 #view-landing。
   白牌规则不变：页面里不写死平台品牌，品牌统一由 data-brand-name 注入。 */

#view-landing {
  --lp-ink: #250a63;
  --lp-ink-2: #615d73;
  --lp-ink-3: #918ca3;
  --lp-purple: #594bec;
  --lp-purple-light: #887cf8;
  --lp-blue: #3898e8;
  --lp-lavender: #f3f0ff;
  --lp-lavender-2: #e9e5ff;
  --lp-sky: #eaf6ff;
  --lp-line: rgba(37, 10, 99, .11);
  --lp-line-soft: rgba(37, 10, 99, .075);
  --lp-surface: #fff;
  --lp-bg: #fbfbff;
  --lp-soft: #f6f4ff;
  --lp-shadow: 0 12px 36px rgba(37, 10, 99, .075);
  --lp-shadow-lg: 0 30px 80px rgba(48, 24, 130, .15);
  --lp-radius: 12px;
  --lp-radius-lg: 20px;
  --lp-ease: cubic-bezier(.23, 1, .32, 1);
  --lp-section-space: clamp(78px, 8.5vw, 118px);

  display: block;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.65;
}

#view-landing.hidden { display: none !important; }
html.has-session #view-landing { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

#view-landing button,
#view-landing a { -webkit-tap-highlight-color: transparent; }
#view-landing button:focus-visible,
#view-landing a:focus-visible {
  outline: 3px solid rgba(89, 75, 236, .28);
  outline-offset: 3px;
}

/* ---------- 悬浮导航 ---------- */

.lp-nav {
  position: sticky;
  top: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(1240px, calc(100% - 40px));
  min-height: 70px;
  margin: 16px auto 0;
  padding: 12px 20px 12px 22px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 35px rgba(42, 18, 112, .08);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transition: background .2s var(--lp-ease), box-shadow .2s var(--lp-ease);
}
.lp-nav.scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 14px 38px rgba(42, 18, 112, .12);
}
.lp-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--lp-ink);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.035em;
  text-decoration: none;
}
.lp-nav-brand img {
  display: block;
  width: auto;
  height: 29px;
  max-width: 128px;
  object-fit: contain;
}
.lp-nav-dot {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 7px 4px 7px 4px;
  background: linear-gradient(145deg, #b9b2ff, #5e50ee);
  box-shadow: inset 0 0 0 4px #e6e2ff;
}
html.has-brand-logo .lp-nav-dot,
html.has-brand-logo .lp-brand-mark-dot { display: none; }
.lp-nav-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.lp-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.35vw, 34px);
}
.lp-nav-links a {
  color: var(--lp-ink);
  font-size: 14px;
  font-weight: 520;
  text-decoration: none;
  transition: color .15s var(--lp-ease);
}
.lp-nav-links a:hover { color: var(--lp-purple); }
.lp-nav-login {
  padding: 9px 11px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--lp-ink-2);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s var(--lp-ease), color .15s var(--lp-ease);
}
.lp-nav-login:hover { background: var(--lp-lavender); color: var(--lp-ink); }
.lp-nav-cta,
.lp-cta-primary,
.lp-cta-ghost {
  border: 0;
  border-radius: 100px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  padding: 11px 22px;
  cursor: pointer;
  transition: transform .12s var(--lp-ease), box-shadow .18s var(--lp-ease),
    background .18s var(--lp-ease), color .18s var(--lp-ease);
}
.lp-nav-cta,
.lp-cta-primary {
  background: linear-gradient(180deg, var(--lp-purple-light), var(--lp-purple));
  color: #fff;
  box-shadow: 0 9px 20px rgba(89, 75, 236, .23);
}
.lp-nav-cta:hover,
.lp-cta-primary:hover {
  background: linear-gradient(180deg, #958aff, #5143df);
  box-shadow: 0 12px 25px rgba(89, 75, 236, .30);
}
.lp-nav-cta:active,
.lp-cta-primary:active,
.lp-cta-ghost:active { transform: scale(.98); }
.lp-cta-ghost {
  border: 1px solid rgba(37, 10, 99, .09);
  background: rgba(255, 255, 255, .8);
  color: var(--lp-ink);
  box-shadow: 0 5px 20px rgba(37, 10, 99, .045);
}
.lp-cta-ghost:hover { background: #fff; }

/* ---------- 蓝紫云感首屏 ---------- */

.lp-hero {
  position: relative;
  margin-top: -86px;
  padding: 150px clamp(16px, 4vw, 48px) clamp(70px, 8vw, 108px);
  overflow: hidden;
}
.lp-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 58% at 50% 106%, rgba(255, 255, 255, .98) 0 22%, transparent 67%),
    radial-gradient(48% 48% at 18% 70%, rgba(255, 255, 255, .7), transparent 67%),
    radial-gradient(55% 55% at 82% 25%, rgba(203, 230, 255, .93), transparent 72%),
    linear-gradient(128deg, #f7fcff 0%, #dceeff 34%, #e9e6ff 67%, #fdfbff 100%);
}
.lp-hero-bg::before,
.lp-hero-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  filter: blur(24px);
}
.lp-hero-bg::before {
  right: 7%;
  bottom: -72px;
  width: 420px;
  height: 200px;
  box-shadow:
    -240px 80px 70px 40px rgba(255, 255, 255, .9),
    -70px 30px 65px 45px rgba(255, 255, 255, .88);
}
.lp-hero-bg::after {
  left: -70px;
  bottom: 15%;
  width: 260px;
  height: 150px;
  opacity: .72;
  box-shadow:
    80px -45px 60px 24px rgba(255, 255, 255, .8),
    150px 30px 70px 40px rgba(255, 255, 255, .72);
}
.lp-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1180px, 100%);
  margin: 0 auto;
}
.lp-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  text-align: center;
}
.lp-eyebrow,
.lp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--lp-purple);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .055em;
}
.lp-eyebrow {
  padding: 8px 15px 8px 11px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 100px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 2px 8px rgba(58, 35, 143, .06);
}
.lp-eyebrow::before,
.lp-kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 6px 3px 6px 3px;
  background: linear-gradient(145deg, #beb7ff, #6657ee);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55);
}
.lp-hero-title {
  margin: 24px 0 0;
  color: var(--lp-ink);
  font-size: clamp(48px, 5.1vw, 70px);
  font-weight: 590;
  letter-spacing: -.052em;
  line-height: 1.03;
  text-wrap: balance;
}
.lp-hero-title span { display: block; }
.lp-hero-title span:nth-child(2) {
  background: linear-gradient(100deg, #594bec 10%, #3898e8 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.lp-hero-sub {
  max-width: 670px;
  margin: 23px 0 0;
  color: var(--lp-ink-2);
  font-size: clamp(14.5px, 1.35vw, 16.5px);
  line-height: 1.82;
  text-wrap: balance;
}
.lp-hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.lp-hero-cta .lp-cta-primary,
.lp-hero-cta .lp-cta-ghost {
  padding: 14px 27px;
  font-size: 14px;
}
.lp-hero-note {
  margin: 14px 0 0;
  color: rgba(37, 10, 99, .53);
  font-size: 12px;
}

/* 首屏的产品视图：把三层角色压进一张悬浮工作台 */
.lp-role-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(1040px, 100%);
  margin: 48px auto 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 22px;
  background: rgba(255, 255, 255, .73);
  box-shadow:
    0 34px 90px rgba(53, 25, 143, .16),
    0 4px 18px rgba(53, 25, 143, .07);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}
.lp-role-map::after {
  content: "";
  position: absolute;
  inset: 16% 8% -16%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(113, 91, 245, .18);
  filter: blur(45px);
}
.lp-role-map-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px 7px;
  color: var(--lp-ink-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .05em;
}
.lp-role-map-head b { color: var(--lp-ink-2); }
.lp-map-card {
  --map-color: #4b7fe8;
  padding: 18px 18px 17px;
  border: 1px solid rgba(37, 10, 99, .075);
  border-radius: 15px;
  background: linear-gradient(145deg, #f0f7ff, #fbfdff);
}
.lp-map-card.is-teacher {
  --map-color: #705ff1;
  background: linear-gradient(145deg, #f1efff, #fbfaff);
}
.lp-map-card.is-student {
  --map-color: #d6739b;
  background: linear-gradient(145deg, #fff1f6, #fffcfe);
}
.lp-map-head {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.lp-map-index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .84);
  color: var(--map-color);
  font-size: 10px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(37, 10, 99, .05);
}
.lp-map-head div { display: grid; min-width: 0; }
.lp-map-head b {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
}
.lp-map-head small {
  margin-top: 2px;
  color: var(--lp-ink-3);
  font-size: 11px;
}
.lp-map-scope {
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 100px;
  background: rgba(255, 255, 255, .7);
  color: var(--lp-ink-2);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
.lp-map-tags {
  display: flex;
  gap: 6px;
  margin: 13px 0 0 41px;
  flex-wrap: wrap;
}
.lp-map-tags span {
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 7px;
  background: rgba(255, 255, 255, .68);
  color: color-mix(in srgb, var(--map-color) 70%, #36304f);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 通用分区 ---------- */

.lp-section {
  padding: var(--lp-section-space) clamp(16px, 4vw, 48px);
  background: #fff;
}
.lp-section.alt {
  background:
    radial-gradient(50% 55% at 82% 12%, rgba(222, 215, 255, .55), transparent 74%),
    linear-gradient(180deg, #fbfaff 0%, #f5f2ff 52%, #fff 100%);
}
.lp-section-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}
.lp-section-intro {
  max-width: 780px;
  margin: 0 auto clamp(42px, 5vw, 62px);
  text-align: center;
}
.lp-section-intro h2,
.lp-plan-copy h2,
.lp-boundary-copy h2 {
  margin: 13px 0 0;
  color: var(--lp-ink);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 590;
  letter-spacing: -.047em;
  line-height: 1.12;
  text-wrap: balance;
}
.lp-section-intro p,
.lp-plan-copy > p,
.lp-boundary-copy > p {
  max-width: 700px;
  margin: 17px auto 0;
  color: var(--lp-ink-2);
  font-size: 14.5px;
  line-height: 1.82;
  text-wrap: balance;
}
.lp-kicker {
  padding: 0 4px;
}
.lp-kicker::before {
  width: 12px;
  height: 12px;
  border-radius: 5px 2px 5px 2px;
}

/* ---------- 三个角色 ---------- */

.lp-roles-section {
  background:
    radial-gradient(45% 45% at 50% 15%, rgba(235, 230, 255, .8), transparent 78%),
    #fff;
}
.lp-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.lp-role-card {
  --role-color: #587fe8;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 28px 26px 24px;
  overflow: hidden;
  border: 1px solid rgba(37, 10, 99, .075);
  border-radius: 20px;
  background: linear-gradient(145deg, #eff7ff, #fff);
  box-shadow: 0 16px 38px rgba(37, 10, 99, .055);
}
.lp-role-card.lp-role-teacher {
  --role-color: #6657ed;
  background: linear-gradient(145deg, #f0edff, #fff);
}
.lp-role-card.lp-role-student {
  --role-color: #c86c93;
  background: linear-gradient(145deg, #fff0f5, #fff);
}
.lp-role-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lp-role-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 11px;
  background: rgba(255, 255, 255, .72);
  color: var(--role-color);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  box-shadow: 0 3px 12px rgba(37, 10, 99, .045);
}
.lp-role-badge {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 100px;
  background: rgba(255, 255, 255, .68);
  color: var(--role-color);
  font-size: 11px;
  font-weight: 700;
}
.lp-role-card h3 {
  margin: 27px 0 0;
  color: var(--lp-ink);
  font-size: 23px;
  font-weight: 610;
  letter-spacing: -.035em;
  line-height: 1.28;
  text-wrap: balance;
}
.lp-role-card > p {
  margin: 10px 0 0;
  color: var(--lp-ink-2);
  font-size: 13px;
  line-height: 1.75;
}
.lp-role-card ul {
  display: grid;
  gap: 11px;
  margin: 22px 0 26px;
  padding: 0;
  list-style: none;
}
.lp-role-card li {
  position: relative;
  padding-left: 19px;
  color: var(--lp-ink-2);
  font-size: 13px;
  line-height: 1.7;
}
.lp-role-card li::before {
  content: "";
  position: absolute;
  top: .63em;
  left: 0;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: var(--role-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--role-color) 18%, transparent);
}
.lp-role-visible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid rgba(37, 10, 99, .08);
  color: var(--lp-ink-3);
  font-size: 11.5px;
}
.lp-role-visible b { color: var(--lp-ink); font-size: 12.5px; }

/* ---------- 计划对话 ---------- */

.lp-plan-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr);
  gap: clamp(44px, 6vw, 78px);
  align-items: center;
}
.lp-plan-copy h2 { max-width: 610px; }
.lp-plan-title span { display: block; }
.lp-plan-copy > p { max-width: 560px; margin-left: 0; text-align: left; }
.lp-plan-points {
  display: grid;
  gap: 10px;
  margin-top: 30px;
}
.lp-plan-points > div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(37, 10, 99, .075);
  border-radius: 12px;
  background: rgba(255, 255, 255, .62);
}
.lp-plan-points b {
  color: var(--lp-ink);
  font-size: 13px;
  font-weight: 650;
}
.lp-plan-points span {
  color: var(--lp-ink-2);
  font-size: 13px;
  line-height: 1.72;
}
.lp-chat-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 20px;
  background: var(--lp-lavender);
  box-shadow:
    0 28px 70px rgba(58, 31, 144, .13),
    0 0 0 1px rgba(89, 75, 236, .055);
}
.lp-shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 15px;
  border-bottom: 1px solid rgba(37, 10, 99, .075);
  background: rgba(255, 255, 255, .86);
}
.lp-shot-bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d8d2f2;
}
.lp-shot-bar b {
  margin-left: auto;
  color: var(--lp-ink-3);
  font-size: 10.5px;
  font-weight: 650;
}
.lp-chat-shot a { display: block; background: #f5f2ff; }
.lp-chat-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 650px;
  object-fit: cover;
  object-position: top center;
}
.lp-chat-shot figcaption {
  margin: 0;
  padding: 14px 18px 16px;
  background: #fff;
  color: var(--lp-ink-3);
  font-size: 11.5px;
  line-height: 1.65;
}

/* ---------- 一天怎么跑 ---------- */

.lp-day-section {
  background:
    radial-gradient(44% 48% at 50% 5%, rgba(228, 246, 255, .72), transparent 75%),
    #fff;
}
.lp-day-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.lp-day-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 350px;
  padding: 18px 18px 23px;
  overflow: hidden;
  border: 1px solid rgba(37, 10, 99, .075);
  border-radius: 20px;
  background: linear-gradient(145deg, #edf7ff, #fff);
  box-shadow: 0 15px 36px rgba(37, 10, 99, .055);
}
.lp-day-card:nth-child(2) { background: linear-gradient(145deg, #f1eeff, #fff); }
.lp-day-card:nth-child(3) { background: linear-gradient(145deg, #f8efff, #fff); }
.lp-day-card:nth-child(4) { background: linear-gradient(145deg, #edf9ff, #fff); }
.lp-day-num {
  position: absolute;
  top: 29px;
  left: 29px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 12px;
  background: rgba(255, 255, 255, .86);
  color: var(--lp-purple);
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 5px 16px rgba(37, 10, 99, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lp-day-media {
  position: relative;
  aspect-ratio: 1.84 / 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 13px;
  background: #f3f1fb;
}
.lp-day-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.lp-day-card h3 {
  margin: 20px 5px 0;
  color: var(--lp-ink);
  font-size: 20px;
  font-weight: 610;
  letter-spacing: -.03em;
}
.lp-day-card p {
  margin: 8px 5px 0;
  color: var(--lp-ink-2);
  font-size: 13px;
  line-height: 1.72;
}
.lp-day-title span { white-space: nowrap; }

/* ---------- 品牌与数据 ---------- */

.lp-boundary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(370px, .84fr);
  gap: clamp(44px, 7vw, 88px);
  align-items: center;
}
.lp-boundary-copy > p { max-width: 590px; margin-left: 0; text-align: left; }
.lp-boundary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}
.lp-boundary-list > div {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 15px;
  border: 1px solid rgba(37, 10, 99, .075);
  border-radius: 13px;
  background: rgba(255, 255, 255, .6);
}
.lp-boundary-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 11px;
  background: linear-gradient(145deg, #e7e3ff, #f8f7ff);
  color: var(--lp-purple);
  font-size: 10px;
  font-weight: 800;
}
.lp-boundary-list b {
  display: block;
  color: var(--lp-ink);
  font-size: 13.5px;
  font-weight: 650;
}
.lp-boundary-list p {
  margin: 4px 0 0;
  color: var(--lp-ink-2);
  font-size: 12px;
  line-height: 1.68;
}
.lp-brand-panel {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 20px;
  background:
    radial-gradient(80% 75% at 92% 3%, rgba(203, 235, 255, .9), transparent 62%),
    linear-gradient(145deg, #f0edff, #faf9ff);
  box-shadow:
    0 24px 60px rgba(48, 24, 130, .10),
    inset 0 0 0 1px rgba(89, 75, 236, .045);
}
.lp-brand-panel-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 2px 2px 16px;
}
.lp-brand-mark {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  overflow: hidden;
  border-radius: 13px;
  background: linear-gradient(145deg, #a89fff, var(--brand, var(--lp-purple)));
  box-shadow: 0 7px 17px rgba(89, 75, 236, .19);
}
.lp-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.lp-brand-mark-dot {
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 5px;
}
.lp-brand-panel-head > div { display: grid; min-width: 0; }
.lp-brand-panel-head b {
  overflow: hidden;
  max-width: 200px;
  color: var(--lp-ink);
  font-size: 13.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-brand-panel-head small {
  margin-top: 1px;
  color: var(--lp-ink-3);
  font-size: 10.5px;
}
.lp-private-pill {
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 100px;
  background: rgba(255, 255, 255, .74);
  color: #4970a2;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}
.lp-brand-preview {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 280px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(37, 10, 99, .09);
}
.lp-brand-preview-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding-top: 22px;
  background: linear-gradient(180deg, #301573, #27105e);
}
.lp-brand-preview-side span {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .14);
}
.lp-brand-preview-side span.on {
  background: linear-gradient(145deg, #a89fff, var(--brand, var(--lp-purple)));
}
.lp-brand-preview-main { padding: 28px 24px; }
.lp-preview-line {
  display: block;
  height: 9px;
  margin-bottom: 14px;
  border-radius: 100px;
  background: #f0edfa;
}
.lp-preview-line.w60 { width: 60%; height: 14px; background: #e2ddf6; }
.lp-preview-line.w90 { width: 90%; }
.lp-preview-line.w76 { width: 76%; }
.lp-preview-line.w84 { width: 84%; }
.lp-preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 24px 0;
}
.lp-preview-metrics span {
  display: grid;
  gap: 11px;
  padding: 13px 12px;
  border-radius: 11px;
  background: #f7f5ff;
}
.lp-preview-metrics b { color: var(--lp-ink-2); font-size: 9.5px; font-weight: 650; }
.lp-preview-metrics i {
  display: block;
  width: 62%;
  height: 15px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--brand, var(--lp-purple)) 22%, white);
}
.lp-brand-panel-note {
  margin: 14px 2px 0;
  color: var(--lp-ink-3);
  font-size: 10.5px;
  text-align: center;
}
.lp-fact-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1120px, 100%);
  margin: clamp(46px, 6vw, 72px) auto 0;
  overflow: hidden;
  border: 1px solid rgba(37, 10, 99, .075);
  border-radius: 18px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 15px 38px rgba(37, 10, 99, .045);
}
.lp-fact {
  padding: 27px 26px;
  text-align: center;
}
.lp-fact + .lp-fact { border-left: 1px solid rgba(37, 10, 99, .075); }
.lp-fact b {
  display: block;
  color: var(--lp-ink);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 590;
  letter-spacing: -.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lp-fact span {
  display: block;
  margin-top: 9px;
  color: var(--lp-ink-3);
  font-size: 11.5px;
}

/* ---------- FAQ 与收尾 ---------- */

.lp-trial-section {
  background:
    radial-gradient(44% 44% at 50% 108%, rgba(220, 213, 255, .45), transparent 77%),
    #fff;
}
.lp-faq {
  width: min(820px, 100%);
  margin: 0 auto;
}
.lp-faq-list {
  display: grid;
  gap: 9px;
}
.lp-faq-item {
  overflow: hidden;
  border: 1px solid rgba(37, 10, 99, .075);
  border-radius: 12px;
  background: rgba(255, 255, 255, .84);
  transition: background .18s var(--lp-ease), border-color .18s var(--lp-ease);
}
.lp-faq-item.open {
  border-color: rgba(89, 75, 236, .18);
  background: #fff;
}
.lp-faq-item h3 { margin: 0; }
.lp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 14px;
  padding: 19px 20px;
  border: 0;
  background: transparent;
  color: var(--lp-ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 610;
  text-align: left;
  cursor: pointer;
}
.lp-faq-q::after {
  content: "+";
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(37, 10, 99, .10);
  border-radius: 50%;
  color: var(--lp-purple);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s var(--lp-ease), background .2s var(--lp-ease);
}
.lp-faq-item.open .lp-faq-q::after {
  transform: rotate(45deg);
  background: var(--lp-lavender);
}
.lp-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s var(--lp-ease);
}
.lp-faq-a-inner {
  padding: 0 22px 20px;
  color: var(--lp-ink-2);
  font-size: 13px;
  line-height: 1.8;
}
.lp-faq-a-inner p { margin: 0 0 7px; }
.lp-faq-a-inner p:last-child { margin-bottom: 0; }
.lp-faq-a-inner b { color: var(--lp-ink); }
.lp-final {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: min(980px, 100%);
  margin: clamp(54px, 7vw, 84px) auto 0;
  padding: clamp(32px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 20px;
  background:
    radial-gradient(58% 100% at 100% 0%, rgba(195, 232, 255, .9), transparent 66%),
    linear-gradient(135deg, #ede9ff, #f8f5ff);
  box-shadow: 0 28px 70px rgba(53, 28, 140, .11);
}
.lp-final::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: -90px;
  width: 300px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  filter: blur(25px);
}
.lp-final > div { position: relative; z-index: 1; }
.lp-final .lp-kicker { color: var(--lp-purple); }
.lp-final h2 {
  margin: 10px 0 0;
  color: var(--lp-ink);
  font-size: clamp(27px, 3.2vw, 38px);
  font-weight: 590;
  letter-spacing: -.04em;
  line-height: 1.18;
  text-wrap: balance;
}
.lp-final p {
  margin: 10px 0 0;
  color: var(--lp-ink-2);
  font-size: 13px;
}
.lp-final-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
  flex-wrap: wrap;
}
.lp-final .lp-cta-ghost { background: rgba(255, 255, 255, .78); }
.lp-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 24px 44px;
  background: #fff;
  color: var(--lp-ink-3);
  font-size: 11.5px;
  text-align: center;
}
.lp-footer-info {
  display: flex;
  justify-content: center;
  gap: 23px;
  flex-wrap: wrap;
}

#lp-roles,
#lp-plan,
#lp-day,
#lp-faq { scroll-margin-top: 104px; }

/* ---------- 滚动进场 ---------- */

.lp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .64s var(--lp-ease), transform .64s var(--lp-ease);
}
.lp-reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .lp-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 响应式 ---------- */

@media (max-width: 1080px) {
  .lp-nav { width: calc(100% - 32px); }
  .lp-hero-title { font-size: clamp(46px, 5.8vw, 62px); }
  .lp-role-map { width: min(980px, 100%); }
  .lp-map-scope { display: none; }
  .lp-map-head { grid-template-columns: 31px minmax(0, 1fr); }
  .lp-map-tags { margin-left: 0; }
}

@media (max-width: 880px) {
  .lp-nav-links { display: none; }
  .lp-hero {
    margin-top: -86px;
    padding-top: 146px;
  }
  .lp-role-map {
    grid-template-columns: 1fr;
    width: min(680px, 100%);
  }
  .lp-map-card + .lp-map-card { margin-top: 0; }
  .lp-map-head { grid-template-columns: 31px minmax(0, 1fr) auto; }
  .lp-map-scope { display: inline-flex; }
  .lp-map-tags { margin-left: 41px; }
  .lp-role-grid {
    grid-template-columns: 1fr;
    max-width: 680px;
    margin: 0 auto;
  }
  .lp-role-card { min-height: 0; }
  .lp-plan-layout,
  .lp-boundary-layout { grid-template-columns: 1fr; }
  .lp-plan-copy,
  .lp-boundary-copy { max-width: 690px; }
  .lp-chat-shot { max-width: 720px; }
  .lp-brand-panel { max-width: 580px; }
}

@media (max-width: 680px) {
  #view-landing { --lp-section-space: 66px; }
  .lp-nav {
    top: 10px;
    width: calc(100% - 20px);
    min-height: 58px;
    margin-top: 10px;
    padding: 9px 11px 9px 14px;
    border-radius: 11px;
  }
  .lp-nav-brand { max-width: 56vw; font-size: 16px; }
  .lp-nav-dot { width: 17px; height: 17px; }
  .lp-nav-login { display: none; }
  .lp-nav-cta { padding: 9px 15px; font-size: 12.5px; }
  .lp-hero {
    margin-top: -70px;
    padding: 124px 14px 62px;
  }
  .lp-eyebrow { padding: 7px 12px 7px 9px; font-size: 10.5px; }
  .lp-hero-title {
    margin-top: 20px;
    font-size: clamp(40px, 11.7vw, 52px);
    letter-spacing: -.05em;
    line-height: 1.05;
  }
  .lp-hero-sub { margin-top: 19px; font-size: 14px; line-height: 1.78; }
  .lp-hero-cta { width: 100%; margin-top: 24px; }
  .lp-hero-cta .lp-cta-primary,
  .lp-hero-cta .lp-cta-ghost { flex: 1 1 145px; }
  .lp-role-map {
    margin-top: 34px;
    padding: 10px;
    border-radius: 17px;
  }
  .lp-map-card { padding: 15px 14px 14px; }
  .lp-map-head { grid-template-columns: 31px minmax(0, 1fr); }
  .lp-map-scope { display: none; }
  .lp-map-tags { margin-left: 0; gap: 5px; }
  .lp-role-map-head { padding: 5px 6px 7px; }
  .lp-section-intro { margin-bottom: 36px; }
  .lp-section-intro h2,
  .lp-plan-copy h2,
  .lp-boundary-copy h2 { font-size: clamp(31px, 9vw, 40px); }
  .lp-role-card { padding: 24px 20px 21px; }
  .lp-plan-points > div {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 14px;
  }
  .lp-chat-shot { border-radius: 16px; }
  .lp-chat-shot img { max-height: 530px; }
  .lp-day-grid { grid-template-columns: 1fr; }
  .lp-day-title span { display: block; }
  .lp-day-media { aspect-ratio: 1.75 / 1; }
  .lp-boundary-list { grid-template-columns: 1fr; }
  .lp-brand-panel { padding: 14px; border-radius: 17px; }
  .lp-brand-preview { grid-template-columns: 46px minmax(0, 1fr); min-height: 235px; }
  .lp-brand-preview-main { padding: 23px 17px; }
  .lp-preview-metrics { gap: 6px; }
  .lp-preview-metrics span { padding: 11px 8px; }
  .lp-fact-row { grid-template-columns: 1fr; }
  .lp-fact + .lp-fact {
    border-top: 1px solid rgba(37, 10, 99, .075);
    border-left: 0;
  }
  .lp-faq-q { padding: 17px 17px; font-size: 14px; }
  .lp-faq-a-inner { padding: 0 18px 18px; }
  .lp-final {
    align-items: stretch;
    flex-direction: column;
    gap: 24px;
    padding: 29px 24px;
    border-radius: 17px;
  }
  .lp-final-actions { width: 100%; }
  .lp-final-actions button { flex: 1 1 145px; }
  .lp-footer-info { gap: 8px 17px; }
}

@media (max-width: 390px) {
  .lp-nav { gap: 8px; }
  .lp-nav-brand { max-width: 52vw; font-size: 14.5px; }
  .lp-hero-title { font-size: clamp(38px, 11.5vw, 45px); }
  .lp-plan-points > div { grid-template-columns: 1fr; gap: 5px; }
  .lp-brand-panel-head b { max-width: 140px; }
  .lp-private-pill { display: none; }
}