:root {
  color-scheme: dark;
  --bg: #130a19;
  --panel: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .13);
  --text: #fff8ff;
  --muted: #b8a9c4;
  --pink: #f04fb4;
  --violet: #9f53e6;
  --cyan: #20d7ff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
.icon { width: 1.15em; height: 1.15em; display: block; flex-shrink: 0; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.menu-button .icon { width: 26px; height: 26px; }
.ao-socials .icon { width: 18px; height: 18px; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 30; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 7vw, 230px); background: rgba(20, 16, 34, .78); backdrop-filter: blur(24px); border-bottom: 1px solid rgba(255,255,255,.06); }
.brand { display: inline-flex; align-items: center; min-width: 190px; }
.brand img { width: 178px; height: auto; }
.desktop-nav { display: flex; gap: 44px; color: #d4c9db; }
.desktop-nav a { transition: color .22s ease, transform .22s ease; }
.desktop-nav a:hover { color: #fff; transform: translateY(-1px); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.language { position: relative; }
.language button, .workbench, .menu-button { height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--line); color: white; background: rgba(255,255,255,.04); border-radius: 999px; padding: 0 24px; font-size: 16px; font-weight: 800; cursor: pointer; transition: transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease; }
.language > button:hover { color: #fff; border-color: rgba(240,79,180,.55); background: rgba(240,79,180,.18); }
.workbench { border-color: rgba(240,79,180,.5); background: rgba(240,79,180,.16); min-width: 178px; }
.workbench:hover { transform: translateY(-3px); border-color: rgba(240,79,180,.88); background: rgba(240,79,180,.25); }
.language-menu { position: absolute; right: 0; top: 54px; width: 210px; max-height: 340px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(19,10,25,.96); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.language-menu button { width: 100%; height: 36px; justify-content: flex-start; border: 0; border-radius: 8px; padding: 0 10px; background: transparent; color: #ddd1e6; cursor: pointer; }
.language-menu button:hover { background: rgba(255,255,255,.08); color: #fff; }
.menu-button { display: none; width: 54px; padding: 0; font-size: 26px; border-radius: 8px; }
.hero { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 126px 20px 80px; }
.ao-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.96) brightness(.78); }
.hero-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 50% 32%, rgba(255,70,175,.18), transparent 30%), linear-gradient(90deg, rgba(13,7,23,.62), rgba(15,36,49,.42), rgba(13,7,23,.62)); }
.grid-lines { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 80px 80px; }
.hero-content { position: relative; z-index: 2; width: min(1120px, 100%); text-align: center; display: grid; justify-items: center; }
.pill { display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px; border-radius: 999px; color: #eee4f1; background: rgba(35,27,54,.78); border: 1px solid rgba(255,255,255,.07); font-size: 16px; }
.pill i { width: 10px; height: 10px; border-radius: 999px; background: var(--pink); box-shadow: 0 0 18px var(--pink); }
h1 { margin: 42px 0 22px; font-size: clamp(54px, 7vw, 96px); line-height: .98; letter-spacing: 0; font-weight: 900; }
h1 span, .section-head span { color: var(--pink); background: linear-gradient(100deg, var(--pink), var(--violet), #ffc1e2); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #efe5f0, #f28dcc, #b982ee, #f28dcc, #efe5f0);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: hero-title-shimmer 4s linear infinite;
}
@keyframes hero-title-shimmer {
  to { background-position: 200% center; }
}
.hero p { max-width: 760px; margin: 0; color: #cfc4d6; font-size: 22px; line-height: 1.75; }
.hero-buttons { display: flex; gap: 18px; margin-top: 38px; flex-wrap: wrap; justify-content: center; }
.primary-cta, .secondary-cta, .ao-pricing-grid a, .final-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border-radius: 999px; padding: 0 30px; font-weight: 800; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; }
.primary-cta, .ao-pricing-grid a, .final-cta a { background: linear-gradient(100deg, #dc3fba, #9556e9); color: white; box-shadow: 0 18px 50px rgba(218,64,188,.28); }
.secondary-cta { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: white; }
.works-cta { position: relative; overflow: visible; }
.works-cta-tip {
  position: absolute;
  left: calc(100% + 18px);
  top: 50%;
  width: 210px;
  aspect-ratio: 16 / 10;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 8px;
  background: rgba(12,7,16,.92);
  box-shadow: 0 18px 46px rgba(0,0,0,.36), 0 0 0 1px rgba(240,79,180,.08);
  transform: translateY(-50%);
  pointer-events: none;
}
.works-cta-tip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 45%, rgba(8,4,12,.74));
}
.works-cta-tip video { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.92) saturate(1.05); }
.works-cta-tip b {
  position: absolute;
  left: 10px;
  bottom: 9px;
  z-index: 3;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  color: white;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
}
.primary-cta:hover, .final-cta a:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 26px 70px rgba(218,64,188,.42); }
.secondary-cta:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.11); box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.stats { width: min(900px, 100%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 92px; }
.stats div { display: grid; gap: 8px; }
.stats strong { font-size: 42px; line-height: 1; }
.stats span { color: #a99bb2; font-size: 15px; }
.section, .ao-section { padding: 110px 22px; }
.ao-section-inner { width: min(1180px, 100%); margin: 0 auto; }
.ao-relative { position: relative; }
.section-head { width: min(980px, 100%); margin: 0 auto 48px; text-align: center; }
.section-head h2 { margin: 0 0 18px; font-size: clamp(42px, 5vw, 72px); font-weight: 900; letter-spacing: 0; }
.section-head p { margin: 0 auto; max-width: 760px; color: var(--muted); font-size: 22px; line-height: 1.55; }
.ao-showcase-section { background: #140b1a; }
.ao-showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ao-work-card { position: relative; min-height: 396px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: #150d1a; box-shadow: 0 18px 54px rgba(0,0,0,.24); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.ao-work-card:hover { transform: translateY(-6px); border-color: rgba(240,79,180,.3); box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.ao-work-image { position: absolute; inset: 0 0 auto; height: 69%; overflow: hidden; background: #24142c; }
.ao-work-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,8,22,.02) 0%, rgba(16,8,22,.05) 45%, rgba(20,11,26,.28) 78%, rgba(20,11,26,.72) 100%); pointer-events: none; }
.ao-work-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ao-work-card:hover .ao-work-image img { transform: scale(1.05); }
.ao-work-image > span { position: absolute; left: 14px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; color: #fff; background: rgba(20,18,28,.58); backdrop-filter: blur(12px); font-size: 12px; font-weight: 800; line-height: 1; }
.ao-work-image > b { position: absolute; right: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; color: #fff; background: linear-gradient(100deg, rgba(240,79,180,.78), rgba(185,130,238,.7)); backdrop-filter: blur(12px); font-size: 12px; font-weight: 800; line-height: 1; }
.ao-work-image strong { position: absolute; right: 12px; bottom: 34px; z-index: 2; height: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border-radius: 6px; color: #fff; background: rgba(0,0,0,.58); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(12px); font-size: 12px; font-weight: 800; line-height: 1; opacity: .96; }
.ao-work-image strong .icon { width: 13px; height: 13px; }
.ao-work-image strong span { position: static; display: block; padding: 0; border-radius: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; line-height: 1; }
.ao-work-play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 58px; height: 58px; border-radius: 999px; transform: translate(-50%, -50%) scale(1); display: grid; place-items: center; color: white; background: rgba(31,25,41,.72); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(18px); font-size: 30px; opacity: 1; cursor: pointer; box-shadow: 0 14px 36px rgba(0,0,0,.28); transition: transform .24s ease, background .24s ease, box-shadow .24s ease, border-color .24s ease; }
.ao-work-card:hover .ao-work-play { background: linear-gradient(100deg, #dc3fba, #9556e9); border-color: rgba(255,255,255,.58); box-shadow: 0 18px 50px rgba(220,63,186,.5), 0 0 28px rgba(149,86,233,.34); transform: translate(-50%, -50%) scale(1.12); }
.ao-work-play:hover { transform: translate(-50%, -50%) scale(1.2); background: linear-gradient(100deg, #ee55c9, #a665ff); box-shadow: 0 22px 58px rgba(220,63,186,.58), 0 0 34px rgba(149,86,233,.42); }
.ao-work-play .icon { width: 28px; height: 28px; margin-left: 3px; }
.ao-work-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; min-height: 142px; padding: 24px 20px 18px; display: flex; flex-direction: column; justify-content: flex-end; background: #140b1a; }
.ao-work-info::before { content: ""; position: absolute; left: 0; right: 0; top: -36px; height: 36px; background: linear-gradient(180deg, rgba(20,11,26,0), #140b1a); pointer-events: none; }
.ao-work-info::after { content: "AI 创作   精选"; position: relative; display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin-top: 12px; padding: 0 9px; height: 22px; border-radius: 999px; color: #dcc8ea; border: 1px solid rgba(160,83,230,.42); background: rgba(40,20,56,.35); font-size: 11px; font-weight: 700; white-space: pre; }
.ao-work-info b { display: inline-flex; margin-bottom: 9px; color: var(--pink); font-size: 13px; }
article h3 { margin: 0 0 8px; font-size: 20px; font-weight: 850; }
article p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.features { background: linear-gradient(180deg, transparent, rgba(43,22,57,.72), transparent); }
.steps { width: min(1180px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps article { border: 1px solid var(--line); background: rgba(255,255,255,.055); border-radius: 8px; padding: 24px; backdrop-filter: blur(20px); }
.steps b { color: var(--pink); font-size: 18px; }
.ao-pricing-section { background: radial-gradient(circle at 50% 20%, rgba(157,83,230,.2), transparent 45%); }
.ao-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.ao-pricing-grid article { position: relative; min-height: 570px; display: flex; flex-direction: column; gap: 15px; padding: 30px; border-radius: 24px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); backdrop-filter: blur(22px); box-shadow: inset 0 0 40px rgba(255,255,255,.04); }
.ao-pricing-grid .featured { border-color: rgba(240,79,180,.58); background: linear-gradient(180deg, rgba(240,79,180,.2), rgba(255,255,255,.06)); transform: scale(1.045); z-index: 2; box-shadow: 0 28px 90px rgba(240,79,180,.24), inset 0 0 55px rgba(255,255,255,.06); }
.ao-pricing-grid em { position: absolute; right: 24px; top: 22px; padding: 6px 12px; border-radius: 999px; background: linear-gradient(100deg, #dc3fba, #9556e9); font-style: normal; font-size: 13px; font-weight: 800; }
.ao-price { font-size: 48px; line-height: 1; font-weight: 900; color: #fff; }
.ao-pricing-grid ul { display: grid; gap: 12px; margin: 8px 0 0; padding: 0; color: #d7cddd; list-style: none; }
.ao-pricing-grid li { display: flex; gap: 9px; }
.ao-pricing-grid li::before { content: "✓"; color: #42e8d4; font-weight: 900; }
.ao-pricing-grid a { margin-top: auto; align-self: stretch; min-height: 52px; }
.ao-pricing-grid a:hover { transform: translateY(-3px); box-shadow: 0 22px 60px rgba(218,64,188,.38); }
.ao-pricing-grid article:not(.featured) a {
  border: 1px solid rgba(240,79,180,.5);
  background: rgba(240,79,180,.16);
  box-shadow: none;
}
.ao-pricing-grid article:not(.featured) a:hover {
  border-color: rgba(240,79,180,.88);
  background: rgba(240,79,180,.25);
  box-shadow: 0 18px 52px rgba(240,79,180,.2);
}
.final-cta { width: min(1120px, calc(100% - 44px)); margin: 30px auto 100px; padding: 58px 28px; text-align: center; border: 1px solid rgba(240,79,180,.38); border-radius: 8px; background: radial-gradient(circle at 50% 0, rgba(240,79,180,.25), rgba(255,255,255,.05) 48%, rgba(255,255,255,.03)); }
.final-cta h2 { margin: 0 0 28px; font-size: clamp(32px, 5vw, 58px); line-height: 1.12; }
.ao-footer { padding: 72px 22px 32px; border-top: 1px solid rgba(255,255,255,.08); background: #100714; color: var(--muted); }
.ao-footer-grid { width: min(1180px, 100%); margin: 0 auto; display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 42px; }
.ao-footer img { width: 210px; margin-bottom: 18px; }
.ao-footer p { max-width: 360px; line-height: 1.7; }
.ao-footer nav { display: grid; align-content: start; gap: 12px; }
.ao-footer h3 { margin: 0 0 8px; color: #fff; font-size: 16px; }
.ao-footer a { color: #b8a9c4; transition: color .22s ease; }
.ao-footer a:hover { color: #fff; }
.ao-socials { display: flex; gap: 10px; margin-top: 22px; }
.ao-socials a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #fff; }
.ao-copyright { width: min(1180px, 100%); margin: 44px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; gap: 18px; font-size: 14px; }
.video-modal[hidden] { display: none; }
.video-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(7,3,10,.82); backdrop-filter: blur(18px); }
.video-modal__panel {
  position: relative;
  width: min(1100px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: #130d19;
  box-shadow: 0 34px 110px rgba(0,0,0,.62);
}
.video-modal__close {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(0,0,0,.36);
  color: white;
  cursor: pointer;
  font-size: 24px;
  backdrop-filter: blur(16px);
}
.video-modal__close .icon { width: 22px; height: 22px; }
.video-modal__stage { position: relative; aspect-ratio: 16 / 9; background: #050308; }
.video-modal__poster, .video-modal__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #050308; }
.video-modal__video { opacity: 0; transition: opacity .25s ease; }
.video-modal.is-ready .video-modal__video { opacity: 1; }
.video-modal.is-ready .video-modal__poster, .video-modal.is-ready .video-modal__loading { opacity: 0; pointer-events: none; }
.video-modal__loading {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.44);
  color: #fff;
  font-weight: 800;
  transition: opacity .2s ease;
}
.video-modal__loading .icon { width: 16px; height: 16px; animation: spin 1s linear infinite; }
.video-modal__caption { min-height: 50px; padding: 16px 20px; color: #fff; font-weight: 800; }
@keyframes spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 900px) {
  .site-header { padding: 0 28px; }
  .desktop-nav, .desktop-workbench { display: none; }
  .menu-button { display: inline-flex; }
  .brand { min-width: 0; }
  .brand img { width: 168px; }
  .hero { align-items: center; padding-top: 118px; min-height: 980px; }
  .hero-content { align-content: start; }
  h1 { font-size: clamp(42px, 9vw, 66px); margin-top: 44px; line-height: 1.05; }
  .hero p { font-size: 20px; max-width: 720px; line-height: 1.65; }
  .pill { font-size: 17px; padding: 12px 20px; }
  .primary-cta, .secondary-cta { width: min(300px, 100%); min-height: 62px; font-size: 18px; }
  .hero-buttons { flex-direction: column; align-items: center; padding-bottom: 130px; }
  .works-cta-tip { left: 50%; top: calc(100% + 16px); width: 190px; transform: translateX(-50%); }
  .stats { grid-template-columns: repeat(2, 1fr); margin-top: 76px; row-gap: 34px; }
  .stats strong { font-size: 34px; }
  .stats span { font-size: 16px; }
  .ao-showcase-grid, .steps, .ao-pricing-grid, .ao-footer-grid { grid-template-columns: 1fr; }
  .ao-pricing-grid .featured { transform: none; }
  .ao-copyright { flex-direction: column; }
}
@media (max-width: 560px) {
  .site-header { height: 70px; padding: 0 18px; }
  .brand img { width: 128px; }
  .header-actions { gap: 8px; }
  .language { display: block; }
  .language > button { height: 42px; padding: 0 10px; font-size: 13px; gap: 5px; }
  .language-menu { right: -48px; top: 48px; width: 176px; }
  .menu-button { width: 42px; height: 42px; font-size: 30px; border: 0; background: transparent; }
  .hero { min-height: 930px; padding: 112px 18px 58px; }
  h1 { font-size: 42px; margin: 34px 0 18px; }
  .hero p { font-size: 18px; line-height: 1.62; }
  .hero-buttons { padding-bottom: 114px; }
  .works-cta-tip { width: 168px; top: calc(100% + 14px); }
  .video-modal { padding: 14px; }
  .video-modal__panel { border-radius: 12px; }
  .video-modal__close { right: 10px; top: 10px; width: 38px; height: 38px; }
  .stats { gap: 28px 20px; margin-top: 58px; }
  .stats strong { font-size: 32px; }
  .stats span { font-size: 15px; }
  .section, .ao-section { padding: 82px 22px; }
  .section-head h2 { font-size: 40px; }
  .section-head p { font-size: 18px; }
}