/* ==========================================================================
   Taimei Wiz.AI (文思 AI) — AI Platform page
   Native CSS, 1440px design, dark theme, pixel-based positioning.
   公共 header/footer 由 common/*.css 负责。
   ========================================================================== */

:root {
  --page-width: 1440px;
  --blue: #0A47ED;
  --deep-blue: #000F60;
  --cyan: #00D8E3;
  --light-blue: #5EA4FF;
  --soft-blue: #7CB1F3;
  --white: #FFFFFF;

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-cn: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  background: #000000;
  color: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 不能在 body 上设置 overflow-x: hidden：html 已设置时 body 会自身
     成为滚动容器（overflow-y 计算为 auto），出现第二条垂直滚动条。 */
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

.page {
  position: relative;
  z-index: 0;
  width: var(--page-width);
  margin: 0 auto;
  /* 不裁剪：背景/装饰需延伸到视口边缘，横向溢出由 html/body overflow-x hidden 兜底 */
}

/* ==========================================================================
   背景装饰 — 两个径向蒙版组（对应设计稿 Mask group）
   组内蒙版同时作用于抽象图与彩色光晕椭圆
   ========================================================================== */

/* 容器比内容更宽（±2300px），保证横向不裁切到可见光晕；
   top/bottom 锚定页面首尾，纵向裁掉超出页脚底部的装饰，
   避免 footer 下方多出可滚动的空白与漏光。
   中线与页面中线一致（left+width/2 = 50%），子元素仍按 50% 定位。 */
.decor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 2300px);
  width: 4600px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.decor__group {
  position: absolute;
}

/* 设计稿 Mask group：1440×1982 @ (0,637)；宽屏稿（1920）组宽 = 视口宽。
   ≤1440 视口锁定 1440px 与原稿一致；>1440 随视口加宽，让蓝紫渐变铺满屏幕。
   蒙版百分比与设计稿一致、半径随组宽等比放大；抽象图同步横向拉伸铺满组宽
   （图片边缘本就趋黑，与黑底自然融合），宽屏不会出现竖向硬边。 */
.decor__group--top {
  top: 637px;
  left: 50%;
  transform: translateX(-50%);
  width: max(1440px, 100vw);
  height: 1982px;
  /* circle 径向蒙版（farthest-corner）：77% 内全不透明。
     注意：小半径/closest-side 椭圆会把背景压成小光斑、页面大面积发黑；
     宽屏（>1440）改用 ellipse farthest-corner 见下方媒体查询。 */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 77%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 77%, transparent 100%);
}

/* 随组宽横向拉伸铺满：对应设计稿 x=-4.01、宽=组宽+6（1440 时 -4..1442） */
.decor__group--top .decor__abstract {
  position: absolute;
  top: -265px;
  left: -4px;
  width: calc(100% + 6px);
  height: 2239px;
  object-fit: cover;
  /* 装饰组的盒子（group）在 y637（上）与 y2619（下）处被硬裁切，而径向蒙版
     在这两条边上的不透明度并不为 0，于是抽象图的上下边会留下一条硬边（视觉断层）。
     纵向渐显/渐隐让内容在组的两条边界上收敛到 0：
       - 265px = 组上边 y637（图相对组上移 265）；505px 处渐显完成（page 877）
       - 100%-240px = page 2371，100% = page 2611 处渐隐完成 */
  -webkit-mask-image: linear-gradient(180deg, transparent 265px, #000 505px, #000 calc(100% - 240px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 265px, #000 505px, #000 calc(100% - 240px), transparent 100%);
}

.decor__group--top .decor__glow {
  position: absolute;
  top: -1px;
  left: calc(50% - 78px);
  width: 1506px;
  height: 1628px;
  border-radius: 50%;
  background: linear-gradient(134deg, rgba(234, 177, 254, 1) 0%, rgba(211, 86, 255, 1) 12%, rgba(36, 94, 255, 1) 79%);
  filter: blur(127px);
  /* 光晕盒顶在 page y636，同样会被组的硬裁切切断。与抽象图一样做纵向渐显：
     1px = 组上边 y637，241px 处渐显完成（page 877），两段渐显位置保持一致。 */
  -webkit-mask-image: linear-gradient(180deg, transparent 1px, #000 241px);
  mask-image: linear-gradient(180deg, transparent 1px, #000 241px);
}

/* 设计稿 3249×1438，左缘锚定视口 x=-1538（不随内容居中）。
   宽屏稿组宽 3729 = 100vw + 1809：>1440 向右扩展铺满视口，
   ≤1440 取值与原布局完全一致。 */
.decor__group--bottom {
  top: 2397px;
  left: calc(50% - max(2258px, calc(1538px + 50vw)));
  width: max(3249px, calc(100vw + 1809px));
  height: 1438px;
  /* 截止点由 74% 放宽到 82%：设计稿两版在右缘 y2900-3600 处仍有淡蓝残留
     （如窄屏 (1439,3300)=#172860、宽屏 (1919,3300)=#112457），
     74% 会让该区域直接压黑。82% 同时满足窄/宽屏的淡出位置。 */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 37%, transparent 82%);
  mask-image: radial-gradient(circle at 50% 50%, #000 37%, transparent 82%);
}

/* 宽屏稿 2719 = 100vw + 799，随组同步向右拉伸；left 锚定组左缘不变 */
.decor__group--bottom .decor__abstract {
  position: absolute;
  top: -4px;
  left: 1275px;
  width: max(2239px, calc(100vw + 799px));
  height: 1444px;
  object-fit: cover;
  /* 组在 y2397（page）处被硬裁切，径向蒙版在该处仍有约 37% 不透明度，
     抽象图顶边会与上方顶部组的内容形成一条硬边（视觉断层）。
     纵向渐显让内容在组顶边收敛到 0，接缝消失。 */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 240px);
  mask-image: linear-gradient(180deg, transparent 0, #000 240px);
}

/* 宽屏稿光晕随视口右移 (100vw-1440px)/2：643 → 883 @1920，尺寸不变 */
.decor__group--bottom .decor__glow {
  position: absolute;
  top: 215px;
  left: max(643px, calc(50vw - 77px));
  width: 1635px;
  height: 1657px;
  border-radius: 50%;
  background: linear-gradient(134deg, rgba(234, 177, 254, 1) 0%, rgba(211, 86, 255, 1) 12%, rgba(22, 139, 239, 1) 79%);
  filter: blur(127px);
}

/* 宽屏（>1440）顶部组蒙版改用 ellipse farthest-corner。
   ≤1440 保持 circle，与已验收的窄屏渲染完全一致。
   底部组不使用 ellipse：其组为 3249/3729×1438 的扁长形，ellipse 的 ry 很小，
   会把右下缘（设计稿仍有淡蓝）整片压黑，故底部始终使用上面的 circle。 */
@media (min-width: 1441px) {
  .decor__group--top {
    -webkit-mask-image: radial-gradient(ellipse farthest-corner at 50% 50%, #000 77%, transparent 100%);
    mask-image: radial-gradient(ellipse farthest-corner at 50% 50%, #000 77%, transparent 100%);
  }
}

/* ==========================================================================
   Banner（0-800）
   ========================================================================== */

.banner {
  position: relative;
  height: 800px;
  z-index: 1;
}

.banner__grad {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 15, 96, 1) 10%, rgba(0, 15, 96, 0) 90%);
  pointer-events: none;
}

/* 设计稿（窄/宽屏一致）中该 SVG 位于 (-90, -153)、1245×788；
   素材本身与设计稿上下镜像，故仍需 scaleY(-1)，但偏移必须用设计稿的 -90/-153，
   否则波浪会整体下移 153px 并溢出到 banner 之外（与下方装饰区重叠）。
   以设计稿窄屏截图逐像素比对：修正后平均色差 60.5 → 14.0。 */
.banner__wave {
  position: absolute;
  top: -153px;
  left: -90px;
  width: 1245px;
  height: 788px;
  transform: scaleY(-1);
  pointer-events: none;
}

.banner__text {
  position: absolute;
  top: 212px;
  left: 180px;
  width: 540px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.banner__logo {
  width: 300px;
  height: 60px;
}

.banner__subtitle {
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  color: var(--cyan);
}

.banner__desc {
  font-size: 18px;
  line-height: 30px;
  color: var(--soft-blue);
}

/* ---- 视频卡（720,189 680×383） ---- */

.video {
  position: absolute;
  top: 189px;
  left: 720px;
  width: 680px;
  height: 383px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(10, 71, 237, 1);
  cursor: pointer;
}

.video__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(10, 71, 237, 1) 0%, rgba(49, 0, 141, 1) 100%);
}

.video__poster {
  position: absolute;
  top: -1px;
  left: -3px;
  width: 684px;
  height: 385px;
  object-fit: cover;
}

.video__blur {
  position: absolute;
  top: -42px;
  left: -137px;
  width: 630px;
  height: 765px;
  background: #0B79FF;
  filter: blur(112px);
}

.video__brand {
  position: absolute;
  top: 39px;
  left: 30px;
  width: 118px;
  height: 43px;
  z-index: 1;
}

.video__diy {
  position: absolute;
  top: 211px;
  left: 30px;
  width: 185px;
  height: 36px;
  z-index: 1;
}

.video__tagline {
  position: absolute;
  top: 265px;
  left: 30px;
  width: 310px;
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
  color: var(--light-blue);
  white-space: pre-line;
  z-index: 1;
}

/* 设计稿：首行 AI-Driven. 为加粗浅蓝，其余为 #5EA4FF */
.video__tagline::first-line {
  color: #C4DFFF;
  font-weight: 700;
}

.video__play {
  position: absolute;
  top: 149px;
  left: 297px;
  width: 85px;
  height: 85px;
  background: rgba(217, 217, 217, 0.2);
  border-radius: 6px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(90deg);
  z-index: 1;
}

/* ==========================================================================
   More Benefits 简介（标题 800 / 描述 884）
   ========================================================================== */

.benefits-title {
  position: relative;
  z-index: 1;
  width: 1280px;
  margin: 0 0 0 80px;
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  text-align: center;
  color: var(--cyan);
}

.benefits-desc {
  position: relative;
  z-index: 1;
  width: 740px;
  margin: 24px 0 0 350px;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  color: var(--white);
}

/* ==========================================================================
   AI Agent 关系图（1025-1497，1080×472）
   ========================================================================== */

.network {
  position: relative;
  z-index: 1;
  width: 1080px;
  height: 472px;
  margin: 51px 0 0 180px;
}

/* 光束 */
.network__light {
  position: absolute;
  top: 128px;
  left: 171px;
  width: 738px;
  height: 225px;
  z-index: 0;
}

/* 底部大面积辐射光（向边缘衰减，避免硬边） */
.network__floor {
  position: absolute;
  top: 182px;
  left: 0;
  width: 1080px;
  height: 290px;
  background: radial-gradient(50% 50% at 52% 40%, rgba(94, 164, 255, 0) 0%, rgba(94, 164, 255, 0.28) 55%, rgba(94, 164, 255, 0) 100%);
  z-index: 0;
}

.network__ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid var(--cyan);
  z-index: 1;
}

.network__ring--outer {
  top: 0;
  left: 148px;
  width: 785px;
  height: 188px;
  border-width: 6px;
}

.network__ring--inner {
  top: 4px;
  left: 203px;
  width: 675px;
  height: 134px;
  border-width: 3px;
  box-shadow: 0 8px 6px rgba(0, 216, 227, 0.4);
}

.network__logo {
  position: absolute;
  top: 27px;
  left: 393px;
  width: 300px;
  height: 60px;
  z-index: 2;
}

/* Trials 底座三层光晕 */
.network__podium {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}

.network__podium--halo {
  top: 253px;
  left: 318px;
  width: 443px;
  height: 120px;
  background: radial-gradient(circle at 52% 40%, rgba(94, 164, 255, 0) 0%, rgba(94, 164, 255, 1) 97%);
}

.network__podium--core {
  top: 253px;
  left: 349px;
  width: 381px;
  height: 93px;
  background: rgba(0, 216, 227, 0.2);
  box-shadow: 0 7px 11px rgba(0, 216, 227, 1);
}

.network__podium--bar {
  top: 292px;
  left: 402px;
  width: 275px;
  height: 15px;
  background: rgba(0, 216, 227, 0.8);
  filter: blur(3px);
}

.network__trials {
  position: absolute;
  top: 241px;
  left: 419px;
  width: 242px;
  height: 56px;
  z-index: 2;
}

/* 沿弧线排布的描述文字 */
.network__arc {
  position: absolute;
  top: 194px;
  left: 9px;
  z-index: 1;
  pointer-events: none;
}

.network__arc-text {
  font-family: var(--font);
  font-size: 12px;
  fill: var(--cyan);
  letter-spacing: 0.4px;
}

.chip {
  position: absolute;
  display: flex;
  align-items: center;
  padding: 4px 20px;
  border-radius: 20px;
  font-size: 12px;
  line-height: 22px;
  white-space: nowrap;
  z-index: 3;
}

.chip--agent {
  background: var(--cyan);
  color: var(--white);
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
}

.chip--soft {
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--white);
}

/* ==========================================================================
   Why Wiz.AI（标题 1652 / 内容 1793-2881）
   ========================================================================== */

.why-title {
  position: relative;
  z-index: 1;
  width: 1080px;
  margin: 155px 0 0 180px;
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  text-align: center;
  color: var(--white);
}

.why {
  position: relative;
  z-index: 1;
  width: 1440px;
  height: 1088px;
  margin-top: 81px;
}

.why__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 100%;
}

/* 文字在图片之上（设计稿中文字叠于图片渐隐区） */
.why__text {
  position: absolute;
  top: 0;
  left: 180px;
  width: 644px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}

/* 第二块：文字在右（720,2174） */
.why__item--2 .why__text {
  top: 381px;
  left: 720px;
}

/* 第三块：文字（180,2619） */
.why__item--3 .why__text {
  top: 826px;
}

.why__item-title {
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  color: var(--white);
}

.why__item-sub {
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  color: var(--cyan);
}

.why__item-list {
  font-size: 18px;
  line-height: 30px;
  color: var(--white);
  text-align: justify;
  white-space: pre-line;
}

/* 图片：渐变蒙版淡出（对应设计稿 Mask group，非灰色覆盖）。
   贴边图片向视口边缘延伸（50vw 溢出部分），蒙版用像素锚点保持淡出节奏 */
.why__media {
  position: absolute;
  top: 0;
  height: 300px;
  overflow: hidden;
  z-index: 1;
}

.why__media img {
  position: absolute;
  object-fit: cover;
}

.why__item--1 .why__media img {
  top: -61.91px;
  left: -9px;
  width: 909px;
  height: 457.5px;
}

/* 右侧图：从左透明 612px 处淡入，延伸至视口右边缘 */
.why__media--right {
  left: 540px;
  width: max(900px, calc(50vw + 180px));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 612px);
  mask-image: linear-gradient(90deg, transparent 0, #000 612px);
}

.why__media--left {
  left: min(0px, calc(720px - 50vw));
  width: max(900px, calc(50vw + 180px));
  -webkit-mask-image: linear-gradient(90deg, #000 calc(50vw - 432px), transparent calc(50vw - 27px));
  mask-image: linear-gradient(90deg, #000 calc(50vw - 432px), transparent calc(50vw - 27px));
}

.why__media--wide {
  left: 351px;
  width: max(1089px, calc(50vw + 369px));
}

/* 第二块图片（0,2187）：相对区块 top 394，带 4px 模糊 */
.why__item--2 .why__media {
  top: 394px;
}

.why__item--2 .why__media img {
  top: -100px;
  left: -129.63px;
  width: 900px;
  height: 504.17px;
  filter: blur(4px);
  transform: scale(1.06);
}

.why__item--3 .why__media img {
  top: -120px;
  left: 309px;
  width: 779px;
  height: 520px;
}

/* 第三块图片（351,2581）：相对区块 top 788，透明 327px → 不透明 740px */
.why__item--3 .why__media {
  top: 788px;
  -webkit-mask-image: linear-gradient(90deg, transparent 327px, #000 740px);
  mask-image: linear-gradient(90deg, transparent 327px, #000 740px);
}

/* ==========================================================================
   三个 Agent 卡片（3036-3236，420×200 ×3）
   ========================================================================== */

.agents {
  position: relative;
  z-index: 1;
  width: 1280px;
  margin: 155px 0 100px 80px;
  display: flex;
  gap: 10px;
}

.agent {
  position: relative;
  width: 420px;
  height: 200px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, rgba(10, 71, 237, 0) 0%, rgba(10, 71, 237, 0.2) 100%);
}

.agent__title {
  position: absolute;
  top: 30px;
  left: 40px;
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  color: var(--white);
}

/* 设计稿：透明底 + 白色文字 + 白色箭头 */
.agent__btn {
  position: absolute;
  top: 137px;
  left: 237px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 10.5px 32px;
  border-radius: 9999px;
  color: var(--white);
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
}

.agent__btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ==========================================================================
   Request a Demo（3336-3816，1100×480）
   ========================================================================== */

.demo {
  position: relative;
  z-index: 1;
  width: 1100px;
  height: 480px;
  margin: 100px 0 0 170px;
  border-radius: 20px;
  overflow: hidden;
}

.demo__pattern {
  position: absolute;
  top: 3px;
  left: 0;
  width: 1100px;
  height: 473px;
  border-radius: 15px;
  opacity: 0.43;
}

.demo__glow {
  position: absolute;
  top: -311px;
  left: 208px;
  width: 686px;
  height: 622px;
  border-radius: 50%;
  background: rgba(10, 71, 237, 0.6);
  filter: blur(152px);
}

.demo__title {
  position: absolute;
  top: 76px;
  left: 10px;
  width: 1080px;
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: -0.0506em;
  text-align: center;
  color: var(--white);
  white-space: pre-line;
  z-index: 1;
}

/* 申请试用入口：由原「邮箱输入 + 加入太美」表单改为跳转 /trial 的按钮 */
.demo__cta {
  position: absolute;
  top: 216px;
  left: 350px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 40px;
  background: var(--white);
  color: #000000;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.0101em;
  white-space: nowrap;
  transition: filter 0.2s ease;
}

.demo__cta:hover {
  filter: brightness(0.94);
}

.demo__note {
  position: absolute;
  top: 292px;
  left: 312px;
  width: 476px;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  z-index: 1;
}

/* 页脚覆盖在装饰层之上 */
.page .footer {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   视频灯箱（点击视频卡弹出播放）
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  padding: 40px;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 32px;
  width: 48px;
  height: 48px;
  font-size: 40px;
  line-height: 1;
  color: #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.lightbox__content {
  max-width: 960px;
  width: 100%;
  text-align: center;
}

.lightbox__content video {
  display: block;
  width: 100%;
  border-radius: 16px;
  background: #000;
}

/* ==========================================================================
   窄屏 PC（980px–1439px）：修正 .banner__grad 全屏出血层的对齐
   该层用「left: 50% + translateX(-50%)」把 100vw 铺满视口，这个写法以
   「.page(1440px) 居中」为前提。视口窄于 1440px 时 CSS 会把 .page 的
   margin:auto 解析为 0（不产生负边距），.page 左边缘落在 0 而非居中，
   该层因此整体右移 G = 720 - 视口宽/2，左侧露出断缝。
   这里直接钉在左边缘，并清掉 translateX(-50%)——否则会被推左半个视口出屏；
   ≥1440px 不命中本规则，PC 效果不变。
   ========================================================================== */

@media (min-width: 980px) and (max-width: 1439px) {
  .banner__grad {
    left: 0;
    transform: none;
  }
}