: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', '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: 120px;
}

.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;
}

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

.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;
}

.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.2;
}

.dc-hero-title p {
    font-size: min(25px, calc(25 / 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;
}

.dc-hero-visual {
    position: relative;
    width: min(1098px, calc(1098 / 1414 * 100vw));
    height: min(823px, calc(823 / 1414 * 100vw));
    margin: 0 auto;
    top: min(-20px, calc(-20 / 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;
    /*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-text {
    position: absolute;
    right: min(108px, calc(108 / 1414 * 100vw));
    top: min(160px, calc(160 / 1414 * 100vw));
    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;
}

.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: url('/assets/design/about/arrow_forward-left.png');
}

.positioning-btn-next img {
    content: url('/assets/design/about/arrow_forward-right.png');
}

.positioning-btn-prev:hover img {
    content: url('/assets/design/about/arrow_forward-hover-left.png');
}

.positioning-btn-next:hover img {
    content: url('/assets/design/about/arrow_forward-hover-right.png');
}

.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: url('/assets/design/robot4s/no-hover.png') no-repeat center;
    background-size: cover;
}

.activity-card.active {
    flex: 2;
    background: url('/assets/design/robot4s/hover.png') no-repeat center;
    background-size: cover;
}

.activity-card.inactive {
    background: url('/assets/design/robot4s/no-hover.png') no-repeat center;
    /*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;
}

.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;
}

/* 统一使用 no-hover 作为默认状态 */
.activity-card .activity-icon,
.activity-card .activity-mini {
    background-image: url('/assets/design/robot4s/no-hover.png');
}

/* active 状态的卡片显示 hover */
.activity-card.active .activity-icon,
.activity-card.active .activity-mini {
    background-image: url('/assets/design/robot4s/hover.png');
}

/* inactive 状态的卡片显示 no-hover */
.activity-card.inactive .activity-icon,
.activity-card.inactive .activity-mini {
    background-image: url('/assets/design/robot4s/no-hover.png');
}

.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(6px, calc(6 / 1414 * 100vw));
    margin-bottom: min(10px, calc(10 / 1414 * 100vw));
    font-size: min(18px, calc(18 / 1414 * 100vw));
    background: radial-gradient(ellipse 155% 240% at 3% -18%, #003CF1 0%, rgba(0, 0, 0, 0) 51%, #0A82FF 95%);
    /* border: 1px solid rgba(10, 130, 255, 0.7); */
}

.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(200px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 300ms;
}

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

.scroll-animate-right {
    opacity: 0;
    transform: translateX(220px);
    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);
}

@media (max-width: 1280px) {
    .dc-hero-visual,
    .positioning-swiper,
    .activities-grid,
    .rights-stage,
    .footer-visual-content {
        width: 92%;
    }
    .dc-hero-visual {
        /* height: min(550px, calc(550 / 1414 * 100vw)); */
    }
    .dc-hero-visual::after {
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
    }
    .activities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .activity-card {
        height: min(420px, calc(420 / 1414 * 100vw));
    }
    .rights-bg { left: 50%; transform: translateX(-50%); }
}

@media (max-width: 900px) {
    .dc-hero-title h1 { font-size: min(36px, calc(36 / 1414 * 100vw)); }
    .dc-hero-title p { font-size: min(20px, calc(20 / 1414 * 100vw)); }
    .dc-hero-visual {
        width: 100%;
        /* height: min(450px, calc(450 / 1414 * 100vw)); */
    }
    .rights-enterprise .rights-label, .rights-personal .rights-label{
        float: left;
    }
    .dc-hero-visual::after {
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
    }
    .positioning-text { position: static; padding: min(20px, calc(20 / 1414 * 100vw)); width: auto; }
    .activities-grid { grid-template-columns: 1fr; }
    .activity-card { height: min(360px, calc(360 / 1414 * 100vw)); }
    .rights-stage { height: auto; min-height: min(520px, calc(520 / 1414 * 100vw)); }
    .rights-item { position: static; width: auto; margin-bottom: min(20px, calc(20 / 1414 * 100vw)); }
    .rights-bg, .rights-glow, .rights-orb { display: none; }
}