/* ==========================================================================
   磐石投影官网 · SaaSy Dark 主题层
   模板来源：PaulleDemon/awesome-landing-pages（MIT）src/saas/SaaSyDark
   - 深色 [data-theme="dark"]：SaaSy Dark 原版配色（#000 / #7e22ce / #080808 / #1F2123）
   - 浅色 :root：沿用 UI 规范 §2.1 现有配色（site.css 的 oklch token）
   - 两主题布局与特效完全一致，颜色全部走变量
   加载顺序：tailwind.css → site.css → saasy.css → bootstrap-icons.min.css
   注意：不使用任何境外 CDN / Google Fonts，字体全部自托管。
   ========================================================================== */

/* ---------- 自托管 Ubuntu 字体（原模板 Google Fonts 改为本地文件） ---------- */
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/ubuntu-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/ubuntu-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/ubuntu-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   主题变量
   ========================================================================== */

:root {
  /* 字体：拉丁 Ubuntu，中文回落系统字体（两主题一致） */
  --font-body: "Ubuntu", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --font-display: "Ubuntu", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;

  /* ---- 浅色（UI 规范 §2.1 现有配色） ---- */
  --bg-color: var(--background);
  --text-body: var(--muted-foreground);
  --header-link: var(--muted-foreground);
  --header-link-hover: var(--foreground);
  --footer-link: var(--muted-foreground);
  --footer-link-hover: var(--foreground);
  --cta-bg: var(--primary);
  --cta-fg: var(--primary-foreground);
  --glow: rgba(239, 44, 193, 0.45);             /* 按钮/图片光晕：品牌品红 */
  --panel-shadow: var(--shadow-card-hover);       /* 移动端菜单投影 */
  --primary-text-color: var(--brand-magenta);
  --gradient-text-bg: linear-gradient(90deg, #fc4c02 5%, #ef2cc1 55%, #7b6fff 98%);
  --hero-blob: linear-gradient(90deg, #fc4c0291 8%, #ef2cc1ae 31%, #bdbbffcc 76%, #7b6fffaa 89%);
  --border-gradient-c: linear-gradient(180deg, rgba(1, 1, 32, 0.4) 35%, rgba(1, 1, 32, 0) 71%);
}

[data-theme="dark"] {
  /* ---- 深色：SaaSy Dark 原版配色（覆盖 site.css 的深色 token） ---- */
  --background: #000000;
  --foreground: #ffffff;
  --card: #080808;
  --card-foreground: #ffffff;
  --muted: #141414;
  --muted-foreground: #9ca3af;
  --primary: #7e22ce;
  --primary-foreground: #fdfdfd;
  --secondary: #080808;
  --secondary-foreground: #ffffff;
  --accent: #a855f7;
  --border: #1f2123;
  --border-strong: #2e3134;
  --input: #1f2123;
  --ring: #7e22ce;
  --shadow-card-rest: none;
  --shadow-card-hover: none;

  /* ---- SaaSy 结构变量（深色 = 模板原值） ---- */
  --bg-color: #000000;
  --text-body: #d1d5db;
  --header-link: #b1b1b1;
  --header-link-hover: #ffffff;
  --footer-link: #c7c6c6;
  --footer-link-hover: #ffffff;
  --cta-bg: #ffffff;
  --cta-fg: #000000;
  --glow: rgba(126, 34, 206, 0.55);
  --panel-shadow: 3px 0 3px 2px #9f9f9f;
  --primary-text-color: #7e22ce;
  --gradient-text-bg: linear-gradient(90deg, rgba(215, 215, 215, 1) 18%, rgba(136, 136, 136, 1) 71%);
  --hero-blob: linear-gradient(90deg, #7e22ce91 8%, #625aafae 31%, #7badbbbc 76%, #54d2d0ca 89%);
  --border-gradient-c: linear-gradient(180deg, rgba(219, 215, 213, 1) 35%, rgba(214, 211, 233, 0) 71%);
}

/* ==========================================================================
   Preflight 修正（tailwind 会清掉列表符号/链接下划线，这里补回语义）
   ========================================================================== */

html {
  scroll-behavior: smooth; /* 模板原效果：锚点平滑滚动 */
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.timeline__list {
  list-style: disc;
}
p a,
li a,
dd a,
.notice a,
.feature__text a,
.hero__lead a,
.faq .content a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* preflight 清零了标题/段落的 UA 外边距：section 标题组用 flex gap 复原节奏 */
.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.section__head .section__title {
  margin-top: 0;
}
section[id] {
  scroll-margin-top: 76px; /* 深色顶栏为 sticky 时锚点不被遮挡 */
}
main {
  display: block;
  flex: 1 0 auto;
}

/* 内容页外壳：去掉分隔线，贴近 SaaSy 的留白分节 */
.hero,
.section {
  border-bottom: 0;
}

/* ==========================================================================
   语义色类（两主题自动换色，布局不变）
   ========================================================================== */

.t-head {
  color: var(--foreground);
}
.t-body {
  color: var(--text-body);
}
.t-dim {
  color: var(--muted-foreground);
}

/* 卡片面板：替代模板 tw-bg-secondary / tw-border-outlineColor */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
}
.panel--accent {
  background: var(--card);
  border: 2px solid var(--primary);
}

/* 图片光晕：替代模板硬编码 tw-shadow-[rgba(170,49,233,…)] */
.img-glow {
  box-shadow: 0 10px 25px -5px var(--glow);
}
/* 横幅类图片在卡片内完整显示（避免 object-cover 裁掉文字） */
.img-contain {
  object-fit: contain;
}
.glow-primary {
  box-shadow: 0 12px 24px -8px var(--glow);
}

/* ==========================================================================
   按钮扩展（基础 .btn 来自 site.css；此处只做 SaaSy 风格变体）
   ========================================================================== */

.btn--pop {
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.3s, box-shadow 0.3s;
}
.btn--pop:hover {
  transform: scale(1.03);
}
.btn--invert {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border-strong);
}
.btn--invert:hover {
  background: var(--foreground);
  color: var(--background);
}
.btn--pill {
  border-radius: 999px;
}
.btn--pop.btn--pill {
  border-radius: 999px;
}

/* 顶栏 CTA（模板：白底黑字药丸；浅色：我们的主色药丸） */
.sa-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.3s, filter 0.2s;
}
.sa-cta:hover {
  transform: translateY(-1px);
  filter: brightness(0.92);
}
/* 箭头单独右滑，保留“向右”动感；药丸本体不横移，避免被顶栏裁剪容器切边 */
.sa-cta i {
  transition: transform 0.3s;
}
.sa-cta:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   顶栏（模板：首页为绝对定位浮层；内容页 sticky 同款）
   ========================================================================== */

.sa-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  padding: 0 5%;
  color: var(--header-link);
  background: transparent;
}
.sa-header--sticky {
  position: sticky;
  background: var(--bg-color);
  border-bottom: 1px solid var(--border);
}
.sa-header .site-logo {
  color: var(--foreground);
  text-decoration: none;
}

#collapsed-header-items {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  transition: width 0.3s ease, opacity 0.3s ease;
}
.sa-header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
.sa-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-links {
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 15px;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s, background-color 0.3s;
}
.header-links:hover {
  color: var(--header-link-hover);
}
.header-links[aria-current="page"] {
  color: var(--foreground);
  font-weight: 500;
}

#collapse-btn {
  display: none;
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 70;
  padding: 0;
  border: 0;
  background: none;
  color: var(--foreground);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* 模板辅助类修正（模板写 opacity:100，这里规范为 1） */
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1 !important;
}

@media not all and (min-width: 1024px) {
  .sa-header {
    padding: 0 16px;
  }
  #collapsed-header-items {
    position: fixed;
    right: 0;
    top: 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    opacity: 0;
    height: 100vh;
    height: 100dvh;
    width: 0vw;
    padding: 5% 16px;
    background-color: var(--bg-color);
    color: var(--foreground);
    overflow-y: auto;
    box-shadow: var(--panel-shadow);
    z-index: 60;
  }
  .sa-header__nav {
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    margin: 48px 0 0;
  }
  .sa-header__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 14px;
  }
  .sa-header__actions .theme-toggle {
    align-self: flex-end;
  }
  .sa-cta {
    justify-content: center;
  }
  #collapse-btn {
    display: block;
  }
}

/* ==========================================================================
   英雄区（模板组件）
   ========================================================================== */

.gradient-text {
  background-image: var(--gradient-text-bg);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-img-bg-grad {
  background-image: var(--hero-blob);
  filter: blur(50px);
  opacity: 0.5;
  z-index: 0; /* 光晕垫底：不得盖住产品截图 */
}
/* 英雄区截图容器置于光晕之上（两者都是定位元素，需显式分层） */
#dashboard {
  position: relative;
  z-index: 1;
}

/* 英雄区说明行（小字） */
.hero-note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  color: var(--muted-foreground);
}

/* 产品关键词走马灯 */
.carousel-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  max-width: 800px;
}
.carousel {
  display: flex;
  align-items: center;
  width: max-content;
  animation: scroll 10s linear infinite;
}
.carousel-img {
  display: inline-flex;
  align-items: center;
  margin: 0 8px;
}
.carousel-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-body);
  font-size: 15px;
  white-space: nowrap;
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   #dashboard（窗口式滑块的 3D 台面 + 发光）
   ========================================================================== */

#dashboard {
  transform: perspective(1200px) rotateX(70deg) scale(0.8) translateY(12px);
  transition: box-shadow 0.4s ease;
}
#dashboard.is-glow {
  box-shadow: 0 15px 25px -5px var(--glow);
}
/* 滑块嵌入台面：由台面提供圆角裁切与光晕 */
#dashboard .slider--showcase {
  margin: 0;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ==========================================================================
   卡片图像渐变边框（模板 border-gradient）
   ========================================================================== */

.border-gradient {
  padding: 2px;
  border-radius: 10px;
  background-image: var(--border-gradient-c);
}
.border-gradient > div {
  background-color: var(--bg-color);
  border-radius: 8px;
}

/* ==========================================================================
   FAQ 手风琴
   ========================================================================== */

.faq {
  background: var(--card);
  border: 1px solid var(--border);
}
.faq-accordion {
  display: flex;
  width: 100%;
  padding: 15px 18px;
  background-color: inherit;
  border: 0;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.4s;
}
.faq-accordion:hover {
  background-color: var(--muted);
}
.faq-accordion.active .content {
  transition: all 0.4s ease-out 0s;
}
.faq .content {
  padding: 0 18px;
  color: var(--text-body);
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease-out 0s;
}
.faq-accordion .bi {
  transition: transform 0.3s;
}
.faq-accordion.active .bi {
  transform: rotate(45deg);
}

/* ==========================================================================
   页脚（模板结构 + 我们的链接）
   ========================================================================== */

.sa-footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  padding: 5% 5% 24px;
  color: var(--text-body);
  font-size: 15px;
}
.sa-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 250px;
  text-align: center;
}
.sa-footer__brand .site-logo {
  color: var(--foreground);
}
.sa-footer__slogan {
  color: var(--muted-foreground);
  font-size: 13px;
}
.sa-footer__col {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 250px;
}
.sa-footer__col h2 {
  margin: 0;
  color: var(--foreground);
  font-weight: 500;
}
.footer-link {
  color: var(--footer-link);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-link:hover {
  color: var(--footer-link-hover);
}
.sa-footer__bottom {
  width: 100%;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted-foreground);
  font-size: 13px;
}

@media (max-width: 760px) {
  .sa-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px;
  }
  .sa-footer__col {
    align-items: center;
  }
}

/* ==========================================================================
   动效降级：偏好减少动效时直接摆正台面，内容保持可见
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #dashboard {
    transform: perspective(1200px) rotateX(0deg) scale(1) translateY(0);
  }
}