.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.quick svg,.sicon svg,.device h3 svg,.pc-card h3 svg,.mobile-bottom-nav svg{
  width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}
.device h3 svg,.pc-card h3 svg{width:22px;height:22px;flex:none}
#icon-apple,#icon-windows{fill:currentColor;stroke:none}

body{
  background:
    radial-gradient(circle at 74% 7%,rgba(57,92,181,.12),transparent 34rem),
    radial-gradient(circle at 5% 23%,rgba(63,46,144,.09),transparent 30rem),
    #070a12 !important;
}
.wrap{max-width:1240px !important}

.hero{
  grid-template-columns:.82fr 1.18fr !important;
  gap:54px !important;
  min-height:560px !important;
  padding:50px 8px 56px !important;
}
.hero h1{font-size:clamp(42px,3.7vw,52px) !important;line-height:1.08 !important;white-space:nowrap}
.hero .sub{max-width:600px}
.hero-img{
  position:relative;
  isolation:isolate;
  padding:1px;
  border-radius:28px;
  background:linear-gradient(135deg,rgba(139,185,255,.34),rgba(139,124,255,.08) 48%,rgba(255,255,255,.08));
  box-shadow:0 35px 95px rgba(0,0,0,.5),0 0 80px rgba(47,125,244,.09);
}
.hero-img::before{
  content:"";position:absolute;inset:12% 8%;z-index:-1;border-radius:50%;
  background:rgba(77,111,235,.22);filter:blur(70px)
}
.hero-img img{
  aspect-ratio:16/9;object-fit:cover;object-position:center;border:0 !important;border-radius:27px !important;
  background:#080b13 !important;box-shadow:none !important
}
.hero-img::after{
  content:"";position:absolute;inset:0;border-radius:28px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 -70px 80px rgba(3,6,14,.26)
}
.quick{gap:10px !important}
.quick a{
  min-height:112px !important;padding:16px 10px !important;border-radius:18px !important;
  background:rgba(15,21,34,.86) !important;box-shadow:none !important;
  transition:transform .2s ease,border-color .2s ease,background .2s ease !important
}
.quick a:hover{transform:translateY(-3px);border-color:rgba(110,168,255,.32) !important;background:rgba(21,30,49,.96) !important}
.quick .icon{margin:0 0 9px !important;color:#83b4ff;font-size:26px !important;line-height:1}
.quick .icon svg{width:28px;height:28px}
.quick h3{font-size:15px !important;white-space:nowrap}
.quick p{font-size:12px !important;white-space:nowrap}
.intro-link{margin-top:18px !important;padding:10px 14px !important;font-size:14px}

.flow{
  margin:0 0 26px !important;padding:12px !important;gap:8px !important;
  border:1px solid rgba(148,163,184,.12);background:rgba(12,17,29,.72) !important;
  box-shadow:none !important
}
.flow-item{
  min-height:112px;padding:17px 16px !important;text-align:left !important;
  display:grid;grid-template-columns:38px 1fr;column-gap:13px;align-content:center;
  background:transparent !important;border:0 !important;box-shadow:none !important
}
.flow-num{grid-row:1/3;margin:0 !important;width:34px;height:34px}
.flow-item h3{margin:0 0 4px !important;font-size:16px !important}
.flow-item p{font-size:13px !important;line-height:1.55 !important}

.section{
  margin-top:22px !important;padding:30px !important;border-radius:28px !important;
  background:linear-gradient(145deg,rgba(17,23,37,.92),rgba(10,14,24,.96)) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.25) !important
}
.section::before{opacity:.55}
.section-head{position:relative;z-index:1;align-items:center !important;margin-bottom:24px !important}
.section-head .sicon{
  width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:14px;
  color:#8db9ff;background:rgba(60,116,224,.12);border:1px solid rgba(110,168,255,.18);font-size:24px !important
}
.section-head .sicon svg{width:24px;height:24px}
.section-head h2{font-size:27px !important}

.tv-area{grid-template-columns:1.08fr .92fr !important}
.mobile-area{grid-template-columns:.92fr 1.08fr !important}
.pc-area{grid-template-columns:.92fr 1.08fr !important}
.show-img,.mobile-img,.pc-img{position:relative;overflow:hidden;border-radius:22px;background:#090c14}
.show-img img,.mobile-img img,.pc-img img{
  width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;border:0 !important;border-radius:22px !important;box-shadow:none !important
}
.methods{gap:10px !important}
.method{padding:17px !important;border-radius:18px !important;background:rgba(26,39,63,.36) !important}
.method h3{font-size:17px !important;margin-bottom:9px !important}
.line{font-size:14px;margin:7px 0 !important;font-weight:650 !important}
.num{width:22px !important;height:22px !important;font-size:12px !important}
.method .btn{padding:10px 14px !important;border-radius:11px !important;font-size:14px}

.device-list,.pc-buttons{gap:10px !important}
.device,.pc-card{
  min-height:190px !important;padding:17px !important;border-radius:17px !important;
  background:rgba(15,21,34,.82) !important;box-shadow:none !important
}
.device h3,.pc-card h3{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px !important}
.device p,.pc-card p{min-height:0 !important;font-size:12px !important}
.device a,.pc-card a{padding:10px 8px !important;border-radius:11px !important;font-size:13px}
.system-mark{
  width:22px;height:22px;display:grid;place-items:center;flex:none;border:1px solid currentColor;border-radius:7px;
  color:#8db9ff;font-size:12px;font-weight:900
}

.faq{gap:10px !important}
.faq-card{padding:17px !important;border-radius:17px !important;background:rgba(15,21,34,.82) !important;box-shadow:none !important}
.faq-card h3{font-size:15px !important}.faq-card p{font-size:13px !important}
.help{background:linear-gradient(135deg,rgba(28,61,120,.48),rgba(17,20,38,.96)) !important}

.mobile-bottom-nav svg{display:block;width:21px;height:21px;margin:0 auto;color:currentColor}

@media(max-width:760px){
  .hero{grid-template-columns:1fr !important;gap:24px !important;min-height:auto !important;padding:22px 2px 32px !important}
  .hero>div:first-child{order:2}
  .hero-img{order:1;border-radius:20px}
  .hero-img img{border-radius:19px !important}
  .hero-img::after{border-radius:20px}
  .hero h1{font-size:clamp(36px,10.5vw,48px) !important;letter-spacing:-2px !important}
  .hero h1{white-space:normal}
  .quick{width:100% !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important}
  .quick a{min-height:100px !important;padding:12px 4px !important}
  .quick h3{font-size:13px !important;white-space:nowrap !important}
  .quick p{font-size:10px !important;white-space:nowrap !important}
  .flow{grid-template-columns:1fr !important;padding:8px !important}
  .flow-item{min-height:86px;border-bottom:1px solid rgba(148,163,184,.1) !important}
  .flow-item:last-child{border-bottom:0 !important}
  .section{padding:18px !important;border-radius:22px !important}
  .section-head{margin-bottom:18px !important}
  .section-head .sicon{width:40px;height:40px;border-radius:12px}
  .section-head h2{font-size:22px !important}
  .tv-area,.mobile-area,.pc-area{grid-template-columns:1fr !important;gap:18px !important}
  .show-img img,.mobile-img img,.pc-img img{aspect-ratio:16/10}
  .mobile-img img{object-position:64% center}
  .device-list,.pc-buttons{grid-template-columns:1fr !important}
  .device,.pc-card{min-height:0 !important;text-align:left !important}
  .device h3,.pc-card h3{justify-content:flex-start}
  .device a,.pc-card a{text-align:center}
}