:root {
    --primary-blue: #0078FF;
    --primary-dark: #003CF1;
    --secondary-blue: #0A82FF;
    --background-dark: #000000;
    --text-white: #FFFFFF;
    --text-gray: rgba(255, 255, 255, 0.85);
    --text-light: rgba(255, 255, 255, 0.65);
    --design-width: 1414;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: #000;
    font-family: 'PingFang SC Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
}

.developercommunity-page {
    min-height: 100vh;
    position: relative;
}

/* 主容器 - 限制最大宽度并居中 */
.main-container {
    position: relative;
    max-width: 1414px;
    margin: 0 auto;
    width: 100%;
}

/* 页面缩放容器 */
.page-scale {
    width: 100%;
    padding-top: min(150px, calc(150 / 1414 * 100vw));
}

.background-visuals {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.background-visuals .gradient-1 {
    position: absolute;
    width: min(1142px, calc(1142 / 1414 * 100vw));
    height: min(1142px, calc(1142 / 1414 * 100vw));
    left: min(-300px, calc(-300 / 1414 * 100vw));
    top: min(-300px, calc(-300 / 1414 * 100vw));
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(10, 130, 255, 0.15) 0%, rgba(168, 55, 255, 0) 100%);
    animation: float 20s ease-in-out infinite;
}

.background-visuals .gradient-2 {
    position: absolute;
    width: min(1142px, calc(1142 / 1414 * 100vw));
    height: min(1142px, calc(1142 / 1414 * 100vw));
    right: min(-400px, calc(-400 / 1414 * 100vw));
    top: min(200px, calc(200 / 1414 * 100vw));
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(168, 55, 255, 0.1) 0%, rgba(168, 55, 255, 0) 100%);
    animation: float 25s ease-in-out infinite;
    animation-delay: 5s;
}

/* 星星样式 */
.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.star {
    position: absolute;
    width: 1px;
    height: 1px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.4);
    animation: twinkle 4s ease-in-out infinite;
}

.star.small { width: 1px; height: 1px; }
.star.medium { width: 2px; height: 2px; }
.star.large { width: 3px; height: 3px; }

@keyframes twinkle {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}

@keyframes float {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(20px, -20px) rotate(180deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

section {
    position: relative;
    z-index: 10;
}

.section-header {
    text-align: center;
    margin-bottom: min(55px, calc(55 / 1414 * 100vw));
}
.dc-rights .section-header {
    text-align: center;
    margin-bottom: min(15px, calc(15 / 1414 * 100vw));
}

.section-title {
    font-size: min(30px, calc(30 / 1414 * 100vw));
    font-weight: 500;
    color: #fff;
    font-family: "PingFang SC Regular";
    line-height: 1;
    margin-bottom: min(11px, calc(11 / 1414 * 100vw));
}

.section-subtitle {
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 600;
    color: #A2A2A2;
    font-family: "PingFang SC Semibold";
}

.dc-hero {
    /*padding: min(155px, calc(155 / 1414 * 100vw)) 0 min(90px, calc(90 / 1414 * 100vw));*/
}

.dc-hero-title {
    text-align: center;
    /*margin-bottom: min(40px, calc(40 / 1414 * 100vw));*/
    z-index: 10;
    font-family: "PingFang SC Semibold";
}

.dc-hero-title h1 {
    font-size: min(45px, calc(45 / 1414 * 100vw));
    /*font-weight: 600;*/
    background: linear-gradient(90deg, rgba(31, 128, 255, 1) 0%, rgba(255, 255, 255, 1) 66.8%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin:0 auto min(15px, calc(15 / 1414 * 100vw));
    width: min(300px, calc(300 / 1414 * 100vw));

}

.dc-hero-title p {
    font-size: min(25px, calc(25 / 1414 * 100vw));
    width:min(363px, calc(400 / 1414 * 100vw));
    /*font-weight: 600;*/
    background: linear-gradient(90deg, rgba(31, 128, 255, 1) 10%, rgba(255, 255, 255, 1) 75%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 auto;
}

.dc-hero-visual {
    position: relative;
    width: min(1098px, calc(1098 / 1414 * 100vw));
    height: min(823px, calc(823 / 1414 * 100vw));
    margin: 0 auto;
    top: max(-90px, calc(-90 / 1414 * 100vw));
}

.dc-hero-video {
    position: absolute;
    left: 50%;
    top: 50%;
        width: min(1098px, calc(1098 / 1414 * 100vw));
    /* height: min(823px, calc(823 / 1414 * 100vw)); */
    /* height: 100%; */
    max-width: none;
    max-height: none;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    object-fit: contain;
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 55%, rgba(0,0,0,0.85) 65%, rgba(0,0,0,0.3) 80%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 55%, rgba(0,0,0,0.85) 65%, rgba(0,0,0,0.3) 80%, rgba(0,0,0,0) 100%);
}

.dc-hero-glow {
    position: absolute;
    opacity: 0.9;
}

.glow-left { 
    left: min(-120px, calc(-120 / 1414 * 100vw)); 
    bottom: min(80px, calc(80 / 1414 * 100vw)); 
    width: min(320px, calc(320 / 1414 * 100vw)); 
}
.glow-right { 
    right: min(-140px, calc(-140 / 1414 * 100vw)); 
    top: min(360px, calc(360 / 1414 * 100vw)); 
    width: min(332px, calc(332 / 1414 * 100vw)); 
}
.glow-top { 
    right: min(40px, calc(40 / 1414 * 100vw)); 
    top: min(-40px, calc(-40 / 1414 * 100vw)); 
    width: min(431px, calc(431 / 1414 * 100vw)); 
}

.dc-positioning {
    position: relative;
    z-index: 20;
    margin-top: min(90px, calc(90 / 1414 * 100vw)); 
    /*padding: min(40px, calc(40 / 1414 * 100vw)) 0 min(80px, calc(80 / 1414 * 100vw));*/
}

.positioning-swiper {
    width: min(1414px, 100vw);
    margin: 0 auto;
}

.positioning-slide {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    min-height: min(520px, calc(520 / 1414 * 100vw));
}

.positioning-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 渐变遮罩层 - 从右向左渐变 */
.positioning-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, transparent 28%, #000000 100%);
    pointer-events: none;
    z-index: 1;
}

.positioning-text {
    position: absolute;
    right: min(108px, calc(108 / 1414 * 100vw));
    top: 50%;
    transform: translateY(-50%);
    width: min(520px, calc(520 / 1414 * 100vw));
    font-size: min(16px, calc(16 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    z-index: 2;
}

.positioning-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: min(2px, calc(2 / 1414 * 100vw)) solid white;
    border-radius: 9999px;
    width: min(52px, calc(52 / 1414 * 100vw));
    height: min(50px, calc(50 / 1414 * 100vw));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 min(4px, calc(4 / 1414 * 100vw)) min(12px, calc(12 / 1414 * 100vw)) rgba(0, 0, 0, 0.2);
    z-index: 20;
    pointer-events: auto;
}

.positioning-btn:hover {
    background: #1F80FF;
    border-color: #1F80FF;
}

.positioning-btn img {
    width: min(24px, calc(24 / 1414 * 100vw));
    height: min(24px, calc(24 / 1414 * 100vw));
    pointer-events: none;
    display: block;
}

.positioning-btn-prev {
    left: min(43px, calc(43 / 1414 * 100vw));
}

.positioning-btn-next {
    right: min(43px, calc(43 / 1414 * 100vw));
}

.positioning-btn-prev img {
    /* content在cdn_assets.html中定义 */
}

.positioning-btn-next img {
    /* content在cdn_assets.html中定义 */
}

.positioning-btn-prev:hover img {
    /* content在cdn_assets.html中定义 */
}

.positioning-btn-next:hover img {
    /* content在cdn_assets.html中定义 */
}

.dc-activities {
    padding: min(160px, calc(160 / 1414 * 100vw)) 0 min(90px, calc(90 / 1414 * 100vw));
    position: relative;
    z-index: 10;
}

.activities-bg-decoration {
    position: absolute;
    top: min(-200px, calc(-200 / 1414 * 100vw));
    right: 0;
    width: min(400px, calc(400 / 1414 * 100vw));
    height: auto;
    z-index: -1;
    pointer-events: none;
}

.activities-bg-decoration img {
    width: 100%;
    height: auto;
    display: block;
}

.dc-activities .section-header,
.dc-activities .activities-grid {
    position: relative;
    z-index: 1;
}

.activities-grid {
    width: min(1200px, calc(1200 / 1414 * 100vw));
    margin: 0 auto;
    display: flex;
    gap: min(16px, calc(16 / 1414 * 100vw));
    align-items: flex-start;
}

.activity-card {
    position: relative;
    height: min(551px, calc(551 / 1414 * 100vw));
    border-radius: min(12px, calc(12 / 1414 * 100vw));
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(10, 130, 255, 0.6);
    flex: 1;
    transition: flex 0.5s ease, transform 0.5s ease, border-color 0.5s ease, background 0.5s ease;
    /* background在cdn_assets.html中定义 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.activity-card.active {
    flex: 2;
    /* 背景样式已移至 cdn_assets.html */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.activity-card.inactive {
    /* 背景样式已移至 cdn_assets.html */
    /*background-size: cover;*/
    border-color: rgba(0, 0, 0, 0.6);
}

.activity-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    opacity: 0.95;
}

.activity-card.inactive .activity-bg {
    filter: grayscale(0.2) brightness(0.55);
}

.activity-title {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -100%);
    width: 90%;
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 600;
    z-index: 2;
    text-align: center;
    transition: all 0.5s ease;
    font-family: "PingFang SC Semibold";
}

.activity-desc {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, 0);
    margin-top: min(10px, calc(10 / 1414 * 100vw));
    width: 90%;
    padding: min(8px, calc(8 / 1414 * 100vw));
    font-size: min(16px, calc(16 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.8);
    z-index: 2;
    text-align: center;
    background: transparent;
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    opacity: 0;
    transition: all 0.5s ease;
}

/* 未选中状态：标题和描述都居中显示，宽度自适应 */
.activity-card.inactive .activity-title {
    opacity: 1;
}

.activity-card.inactive .activity-desc {
    opacity: 1;
    width: 90%;
}

/* 选中状态：标题隐藏，描述显示在底部 */
.activity-card.active .activity-title {
    opacity: 0;
}

.activity-card.active .activity-desc {
    opacity: 1;
    left: min(40px, calc(40 / 1414 * 100vw));
    top: auto;
    bottom: min(24px, calc(24 / 1414 * 100vw));
    transform: none;
    width: min(380px, calc(380 / 1414 * 100vw));
    padding: min(16px, calc(16 / 1414 * 100vw)) min(30px, calc(30 / 1414 * 100vw));
    background: rgba(0, 60, 241, 0.9);
    font-size: min(20px,calc(20/1414*100vw));
    /*文字居左对齐*/
    text-align: left;
}

.activity-tag {
    position: absolute;
    left: min(28px, calc(28 / 1414 * 100vw));
    bottom: min(24px, calc(24 / 1414 * 100vw));
    padding: min(8px, calc(8 / 1414 * 100vw)) min(14px, calc(14 / 1414 * 100vw));
    background: rgba(0, 60, 241, 0.9);
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    font-size: min(14px, calc(14 / 1414 * 100vw));
    z-index: 2;
    display: none;
}

.activity-card.active .activity-tag {
    display: block;
}

.activity-icon,
.activity-mini {
    position: absolute;
    right: min(25px, calc(25 / 1414 * 100vw));
    top: min(22px, calc(22 / 1414 * 100vw));
    width: min(43px, calc(43 / 1414 * 100vw));
    height: min(43px, calc(43 / 1414 * 100vw));
    z-index: 2;
    opacity: 0.9;
    transition: all 0.5s ease;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 背景样式已移至 cdn_assets.html */
.activity-card .activity-icon,
.activity-card .activity-mini {
    /* background-image在cdn_assets.html中定义 */
}

/* active 状态的卡片显示 hover */
.activity-card.active .activity-icon,
.activity-card.active .activity-mini {
    /* background-image在cdn_assets.html中定义 */
}

/* inactive 状态的卡片显示 no-hover */
.activity-card.inactive .activity-icon,
.activity-card.inactive .activity-mini {
    /* background-image在cdn_assets.html中定义 */
}

.dc-rights {
    padding: min(40px, calc(40 / 1414 * 100vw)) 0 0;
    position: relative;
}

.rights-left-bg {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: min(291px, calc(291 / 1414 * 100vw));
    height: min(752px, calc(752 / 1414 * 100vw));
    z-index: 1;
    pointer-events: none;
}

.rights-left-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rights-stage {
    position: relative;
    width: min(1414px, calc(1414 / 1414 * 100vw));
    height: min(520px, calc(520 / 1414 * 100vw));
    margin: 0 auto;
}

.rights-bg {
    position: absolute;
    left: 50%;
    top: min(20px, calc(20 / 1414 * 100vw));
    width: min(520px, calc(520 / 1414 * 100vw));
    transform: translateX(-50%);
    opacity: 0.9;
}

.rights-glow {
    position: absolute;
    left: min(60px, calc(60 / 1414 * 100vw));
    top: min(200px, calc(200 / 1414 * 100vw));
    width: min(360px, calc(360 / 1414 * 100vw));
    opacity: 0.6;
}

.rights-orb {
    position: absolute;
    right: min(-40px, calc(-40 / 1414 * 100vw));
    top: min(160px, calc(160 / 1414 * 100vw));
    width: min(280px, calc(280 / 1414 * 100vw));
    opacity: 0.8;
}

.rights-item {
    position: absolute;
    width: min(360px, calc(360 / 1414 * 100vw));
    font-size: min(16px, calc(16 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
}

.rights-label {
    display: inline-block;
    width: min(175px, calc(175 / 1414 * 100vw));
    height: min(47px, calc(47 / 1414 * 100vw));
    line-height: min(47px, calc(47 / 1414 * 100vw));
    text-align: center;
    border-radius: min(5px, calc(5 / 1414 * 100vw));
    margin-bottom: min(10px, calc(10 / 1414 * 100vw));
    font-size: min(18px, calc(18 / 1414 * 100vw));
    background: transparent;
    position: relative;
    transition: all 0.3s ease;
}

/* 渐变边框效果 */
.rights-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: min(5px, calc(5 / 1414 * 100vw));
    padding: min(1px, calc(1 / 1414 * 100vw));
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(31, 128, 255, 0.7);
    pointer-events: none;
    z-index: 1;
}

/* 鼠标停留时显示背景 */
.rights-label:hover {
    background: radial-gradient(ellipse 155% 240% at 3% -18%, #003CF1 0%, rgba(0, 0, 0, 0) 51%, #0A82FF 95%);
    transform: translateY(min(-2px, calc(-2 / 1414 * 100vw)));
}

.rights-personal .rights-label,
.rights-enterprise .rights-label {
    display: inline-block;
    margin-left: auto;
    float: right;
}

.rights-item p {
    clear: both;
}

.rights-personal { 
    left: min(190px, calc(190 / 1414 * 100vw)); 
    top: min(40px, calc(40 / 1414 * 100vw)); 
    width: min(400px, calc(400 / 1414 * 100vw)); 
}
.rights-enterprise { 
    left: min(141px, calc(141 / 1414 * 100vw));
    bottom: min(170px, calc(170 / 1414 * 100vw));
     width: min(349px, calc(349 / 1414 * 100vw)); 
}
.rights-platform { 
    right: min(125px, calc(125 / 1414 * 100vw)); 
    top: min(60px, calc(60 / 1414 * 100vw)); 
    width: min(481px, calc(481 / 1414 * 100vw)); 
}
.rights-universal { 
    right: min(125px, calc(125 / 1414 * 100vw)); 
    bottom: min(120px, calc(120 / 1414 * 100vw)); 
    width: min(347px, calc(347 / 1414 * 100vw)); 
}

/* ============================================
   滚动渐入动画效果（参考首页）
   ============================================ */

/* 基础动画类：初始隐藏状态 */
.scroll-animate-up {
    opacity: 0;
    transform: translateY(min(200px, calc(200 / 1414 * 100vw)));
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 300ms;
    /* margin-top: min(90px, calc(90 / 1414 * 100vw));  */
}

.scroll-animate-left {
    opacity: 0;
    transform: translateX(max(-220px, calc(-220 / 1414 * 100vw)));
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 400ms;
}

.scroll-animate-right {
    opacity: 0;
    transform: translateX(min(220px, calc(220 / 1414 * 100vw)));
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 800ms;
}

/* 激活状态：显示并移除偏移 */
.scroll-animate-up.visible,
.scroll-animate-left.visible,
.scroll-animate-right.visible {
    opacity: 1;
    transform: translate(0);
}