:root{
  --bg:#251E56;
  --r-card:20px;--r-icon:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:#ddd6fe;line-height:1.65;overflow-x:hidden}
::selection{background:rgba(139,92,246,.4);color:#fff}

html,body{height:100%;overflow:hidden}
body{display:flex;flex-direction:column;height:100vh}

/* .banner {
  background-image: radial-gradient(circle at 10% 20%, #794efe 0%, #a68cfb 90%);
  background-size: 400%;
  background-position: 0 100%;
  animation: Banner_gradient__1iGeC 7.5s ease-in-out infinite;
  transform: translateZ(0);
  z-index: 1;
} */

/* @keyframes Banner_gradient__1iGeC {
  50% {
    background-position: 100% 0;
  }
} */

.main-stage{
  background-image: radial-gradient(circle at 10% 20%, #794efe 0%, #a68cfb 90%);
  background-size: 400%;
  background-position: 0 100%;
  animation: Banner_gradient__1iGeC 7.5s ease-in-out infinite;
  transform: translateZ(0);
  z-index: 1;
  color:#fff;
  padding:48px 28px 36px;
  position:relative;overflow:hidden;
  flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
}
.main-stage::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle 420px at 50% 12%,
      rgba(192,132,252,.35) 0%,
      rgba(139,92,246,.15) 40%,
      transparent 70%
    ),
    radial-gradient(circle 180px at(18%,22%),
      rgba(167,139,250,.20) 0%,transparent 65%
    ),
    radial-gradient(circle 140px at(78%,16%),
      rgba(129,140,248,.18) 0%,transparent 60%
    );
  pointer-events:none;z-index:0;
}
.main-stage::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle 300px at(76%,62%),
      rgba(99,102,241,.28) 0%,
      transparent 65%
    ),
    radial-gradient(circle 120px at(14%,58%),
      rgba(168,85,247,.16) 0%,transparent 60%
    ),
    radial-gradient(circle 100px at(50%,82%),
      rgba(139,92,246,.12) 0%,transparent 55%
    );
  pointer-events:none;z-index:0;
}

.stage-inner{position:relative;z-index:2;max-width:1440px;width:100%;margin:0 auto;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}

.hero-area{text-align:center;margin-bottom:20px}
.hero-area h1{font-size:clamp(34px,5vw,48px);font-weight:900;line-height:1.15;letter-spacing:.02em;margin-bottom:10px}
.hero-area h1 .l1{color:#f5f3ff;display:block}
.hero-area h1 .l2{color:#C4B5FD;display:block}
.hero-area p{font-size:14px;color:rgba(245,243,255,.52);line-height:1.65;max-width:480px;margin:0 auto}

.divider{width:110px;height:1px;background:linear-gradient(90deg,transparent,rgba(196,181,253,.38),transparent);margin:0 auto 18px;border-radius:1px}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1440px;width:100%;margin:0 auto}
.card{
  background:rgba(255,255,255,.10);border:1px solid rgba(199,182,255,.18);
  border-radius:var(--r-card);padding:clamp(24px,3vw,36px) clamp(20px,2.5vw,28px);position:relative;overflow:hidden;min-height:280px;display:flex;flex-direction:column;
  cursor:pointer;text-decoration:none;display:block;min-width:0;
  transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease,background .35s ease;
}
.card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.14);
  border-color:rgba(139,92,246,.42);
  box-shadow:0 24px 80px rgba(17,15,39,.5),0 0 90px rgba(139,92,246,.12);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease,background .25s ease;
}

.c-warm:hover{border-color:rgba(99,102,242,.42)}
.c-warm .icon-box{background:rgba(99,102,242,.30);border:1px solid rgba(99,102,247,.42)}
.c-warm .icon-box svg{color:#EDE9FE}
.c-warm .card-top{background:linear-gradient(90deg,#6366F1,#4338CA)}
.c-warm .go-color{color:#EDE9FE}
.c-warm .st-dot{background:#6366F1;box-shadow:0 0 12px rgba(99,102,241,.55)}

.c-amber:hover{border-color:rgba(139,92,246,.42)}
.c-amber .icon-box{background:rgba(139,92,246,.45);border:1px solid rgba(139,92,246,.42)}
.c-amber .icon-box svg{color:#F5F3FF}
.c-amber .card-top{background:linear-gradient(90deg,#A855F7,#7C3AED)}
.c-amber .go-color{color:#F5F3FF}
.c-amber .st-dot{background:#A855F7;box-shadow:0 0 12px rgba(168,85,247,.55)}

.card-top{position:absolute;top:0;left:clamp(12px,2vw,20px);right:clamp(12px,2vw,20px);height:3px;border-radius:0 0 3px 3px;opacity:0;transition:opacity .3s ease,left .35s ease,right .35s ease,top .35s ease,height .35s ease}
.card:hover .card-top{opacity:1;left:0;right:0;top:0;height:3px}
.icon-box{width:clamp(40px,5vw,52px);height:clamp(40px,5vw,52px);border-radius:var(--r-icon);display:flex;align-items:center;justify-content:center;margin-bottom:clamp(10px,1.2vw,16px)}
.icon-box svg{width:clamp(20px,2.8vw,26px);height:clamp(20px,2.8vw,26px)}
.card h3{font-size:clamp(15px,1.8vw,19px);font-weight:700;letter-spacing:-.01em;margin-bottom:6px;display:flex;align-items:center;gap:8px;color:#fff}
.badge{font-size:9px;font-weight:700;letter-spacing:.5px;padding:2px 7px;border-radius:6px;border:1px solid;color:#EDE9FE;background:rgba(196,181,253,.20);border-color:rgba(196,181,253,.35)}
.pitch{font-size:clamp(13px,1.5vw,15.5px);font-weight:600;line-height:1.45;margin-bottom:clamp(7px,1vw,11px);color:#f5f3ff}
.scene{font-size:clamp(11.5px,1.3vw,13px);color:rgba(245,243,255,.85);line-height:1.6;margin-bottom:clamp(12px,1.5vw,18px)}
.scene strong{color:rgba(245,243,255,.90)}
.card-ft{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);margin-top:auto}
.go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;transition:gap .2s ease}
.go svg{width:15px;height:15px;transition:transform .2s ease}
.card:hover .go{gap:10px}.card:hover .go svg{transform:translateX(3px)}
.st-dot{width:7px;height:7px;border-radius:50%;animation:pulse-dot 2.5s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}

.coming{
  grid-column:1/-1;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 20px;border-radius:12px;
  font-size:12px;color:rgba(245,243,255,.50);letter-spacing:.8px;
  justify-content:center;width:fit-content;margin:0 auto;
  transition:color .25s ease;
}
.coming::before{content:'';width:5px;height:5px;border-radius:50%;background:rgba(196,181,253,.70);animation:pulse-dot 2.5s ease-in-out infinite}
.coming:hover{color:rgba(245,243,255,.75)}

.footer{background:var(--bg);color:rgba(245,243,255,.32);padding:20px 28px;text-align:center;font-size:13px;flex-shrink:0}
.footer > div{flex-wrap:wrap;gap:36px}
.footer-brand{display:flex;align-items:center;justify-content:center;gap:9px;font-size:16px;font-weight:700;color:#fff;margin-bottom:6px}
.footer-contact{display:flex;flex-direction:column;align-items:center;color:rgba(245,243,255,.5)}

.up{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.up.on{opacity:1;transform:translateY(0)}
.up-d1{transition-delay:.12s}.up-d2{transition-delay:.24s}.up-d3{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.up{opacity:1;transform:none}html{scroll-behavior:auto}}
@media(max-width:720px){.grid{grid-template-columns:1fr;max-width:480px}}
@media(max-width:480px){.hero-area h1{font-size:26px}.hero-area p{font-size:13px}.main-stage{padding:40px 16px 28px}.card{padding:14px 14px}body{-webkit-text-size-adjust:100%}
.footer > div{flex-direction:column;gap:20px}}