*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  background:#040816;
  color:#fff;
  font-family:"Noto Sans TC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
img{
  display:block;
  max-width:100%
}
a{
  text-decoration:none
}
.page-shell{
  min-height:100vh;
  background:
    radial-gradient(circle at top,#42106f 0%,rgba(66,16,111,0) 35%),
    radial-gradient(circle at bottom,#004fff33 0%,rgba(0,79,255,0) 40%),
    linear-gradient(180deg,#040816 0%,#090f1d 52%,#050913 100%)
}
.page{
  width:100%;
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  padding-bottom:120px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border-left:1px solid rgba(255,255,255,.06);
  border-right:1px solid rgba(255,255,255,.06)
}
.hero{
  position:relative;
  overflow:hidden;
  padding:calc(16px + env(safe-area-inset-top)) 16px 12px
}
.hero-glow{
  position:absolute;
  border-radius:999px;
  filter:blur(64px);
  opacity:.55;
  pointer-events:none
}
.hero-glow-1{
  top:-10px;
  left:-30px;
  width:180px;
  height:180px;
  background:#ff33c7
}
.hero-glow-2{
  right:-20px;
  top:100px;
  width:170px;
  height:170px;
  background:#00d6ff
}
.badge{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:#f7ddff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.22em
}
.hero-card,.cover-card,.service-card,.advantage-card,.seo-media-card{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  box-shadow:0 20px 50px rgba(0,0,0,.28);
  backdrop-filter:blur(14px)
}
.hero-card{
  position:relative;
  z-index:1;
  margin-top:14px;
  padding:22px 18px;
  border-radius:28px
}
.brand-logo{
  width:110px;
  height:110px;
  margin:0 auto 14px;
  border-radius:24px;
  object-fit:cover;
  box-shadow:0 10px 30px rgba(24,153,255,.35)
}
.hero h1{
  margin:0;
  text-align:center;
  font-size:30px;
  line-height:1.2;
  font-weight:900
}
.hero-text{
  margin:14px 0 0;
  color:rgba(255,255,255,.82);
  text-align:center;
  line-height:1.9;
  font-size:15px
}
.hero-actions{
  margin-top:18px
}
.primary-btn,.sticky-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:56px;
  border-radius:18px;
  font-weight:800;
  letter-spacing:.02em;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease
}
.primary-btn{
  background:linear-gradient(135deg,#f64cc8 0%,#27c6ff 100%);
  color:#fff;
  box-shadow:0 12px 34px rgba(28,196,255,.28)
}
.primary-btn:active,.sticky-btn:active{
  transform:scale(.98)
}
.cover-card{
  position:relative;
  z-index:1;
  margin-top:14px;
  overflow:hidden;
  border-radius:24px
}
.cover-card img{
  width:100%;
  aspect-ratio:1200/462;
  object-fit:cover
}
.section{
  padding:22px 16px 8px
}
.section-alt{
  padding-top:8px
}
.section-head span{
  display:inline-block;
  color:#7fdcff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em
}
.section-head h2{
  margin:10px 0 0;
  font-size:26px;
  line-height:1.25;
  font-weight:900
}
.section-head p{
  margin:12px 0 0;
  color:rgba(255,255,255,.74);
  line-height:1.9;
  font-size:15px
}
.service-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:16px
}
.service-card{
  position:relative;
  padding:18px 16px 16px;
  border-radius:22px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease
}
.service-card::before{
  content:"";
  position:absolute;
  inset:auto -40px -60px auto;
  width:120px;
  height:120px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(39,198,255,.16) 0%,rgba(39,198,255,0) 70%);
  pointer-events:none
}
.service-card:active{
  transform:scale(.985)
}
.service-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px
}
.service-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-bottom:14px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(246,76,200,.22),rgba(39,198,255,.22));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  font-size:20px
}
.service-card h3{
  margin:0;
  font-size:16px;
  line-height:1.45;
  font-weight:800
}
.service-card p{
  margin:10px 0 0;
  color:rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.75
}
.service-tag{
  flex-shrink:0;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#8ddfff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em
}
.live-card{
  border-color:rgba(255,90,120,.3);
  box-shadow:0 20px 50px rgba(0,0,0,.28),0 0 0 1px rgba(255,90,120,.08) inset
}
.live-card::after{
  content:"";
  position:absolute;
  top:-20px;
  right:-10px;
  width:90px;
  height:90px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,70,90,.22) 0%,rgba(255,70,90,0) 72%);
  pointer-events:none
}
.live-tag{
  background:rgba(255,70,90,.16);
  border-color:rgba(255,90,120,.28);
  color:#ff8aa0;
  box-shadow:0 0 18px rgba(255,70,90,.18)
}
.advantage-list{
  display:grid;
  gap:12px;
  margin-top:16px
}
.advantage-card{
  position:relative;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.04));
  overflow:hidden
}
.advantage-card::before{
  content:"";
  position:absolute;
  top:-30px;
  right:-20px;
  width:110px;
  height:110px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(246,76,200,.14) 0%,rgba(246,76,200,0) 72%);
  pointer-events:none
}
.advantage-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px
}
.advantage-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(246,76,200,.22),rgba(39,198,255,.2));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  font-size:20px
}
.advantage-card h3{
  margin:0;
  color:#ffb4ff;
  font-size:18px;
  font-weight:800
}
.advantage-card p{
  margin:10px 0 0;
  color:rgba(255,255,255,.74);
  line-height:1.85;
  font-size:14px
}
.seo-section{
  padding-bottom:24px
}
.seo-media-card{
  margin-top:16px;
  overflow:hidden;
  border-radius:24px
}
.seo-media-card img{
  width:100%;
  aspect-ratio:1200/630;
  object-fit:cover
}
.seo-copy{
  padding:18px
}
.seo-copy h3{
  margin:0;
  font-size:22px;
  line-height:1.3;
  font-weight:900
}
.seo-copy p{
  margin:12px 0 0;
  color:rgba(255,255,255,.76);
  line-height:1.9;
  font-size:15px
}
.sticky-wrap{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  pointer-events:none;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom))
}
.sticky-bar{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:rgba(7,11,22,.78);
  box-shadow:0 12px 36px rgba(0,0,0,.28);
  backdrop-filter:blur(12px);
  pointer-events:auto
}
.sticky-btn{
  background:#ffffff;
  color:#10172e;
  box-shadow:0 12px 30px rgba(0,0,0,.2)
}
@media (max-width:380px){
  .hero h1{
    font-size:26px
  }
  .section-head h2{
    font-size:22px
  }
  .service-grid{
    grid-template-columns:1fr
  }
}