/* 01 面板 */
.cta {
position: relative;
overflow: hidden;
margin: 60px auto 0;
padding: 70px 60px;
border-radius: 20px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
background: #0b0b0d;
color: var(--bg);
text-align: center;
}

/* 02 渐变分层 */
.cta::before {
position: absolute;
inset: 0;
background:
radial-gradient(88% 130% at 78% 8%, rgba(255,100,0,.26), rgba(255,100,0,0) 58%),
linear-gradient(180deg, rgba(255,100,0,.20), rgba(255,100,0,0) 46%, rgba(0,0,0,.55));
content: "";
}

/* 03 圆点画布 */
.cta-dots {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}

/* 04 内容 */
.cta-body {
position: relative;
z-index: 1;
}
.cta-title {
font-size: 24px;
font-weight: 700;
}
.cta-desc {
margin: 15px 0 0;
color: rgba(255,255,255,.72);
font-size: 16px;
}

/* 05 按钮 */
.cta .cta-btn {
display: inline-flex;
margin: 30px 0 0;
padding: 0 30px;
border: 0;
border-radius: 999px;
background: var(--orange);
color: var(--bg);
font-size: 16px;
font-weight: 500;
line-height: 50px;
text-decoration: none;
transition: transform .3s, box-shadow .3s;
align-items: center;
gap: 10px;
}
.cta .cta-btn:hover {
box-shadow: 0 14px 30px rgba(255,100,0,.34);
background: var(--orange);
color: var(--bg);
transform: translateY(-3px);
}
.cta .cta-btn:focus-visible {
outline: 2px solid var(--bg);
outline-offset: 3px;
}
.cta .cta-btn .icon,
.cta .cta-btn .qx-icon {
display: block;
width: 16px;
height: 16px;
color: var(--bg);
flex: none;
}

/* 06 响应式 */
@media (max-width: 999px) {
.cta {
padding: 60px 40px;
}
}
@media (max-width: 666px) {
.cta {
padding: 40px 30px;
}
}

/* 07 降级动效 */
@media (prefers-reduced-motion: reduce) {
.cta .cta-btn:hover {
transform: none;
}
}