@import url("https://registry.npmmirror.com/shed-fonts/latest/files/DingTalk%20JinBuTi/Regular/result.css"); 

.yunyoo-bg-banner{
    background: linear-gradient(180deg,
        rgba(255, 210, 160, .68) 0%,
        rgba(255, 224, 190, .45) 34%,
        rgba(255, 240, 220, .18) 72%);
}
.dark-mode .yunyoo-bg-banner{
    background: linear-gradient(180deg,
        rgba(80, 42, 12, .42) 0%,
        rgba(50, 28, 10, .26) 34%,
        rgba(12, 14, 20, 0) 72%);
}
.yunyoo-bg-header{
    background: linear-gradient(180deg,
        rgba(255, 210, 160, .55) 0%,
        rgba(255, 240, 220, 0) 100%);
}
.dark-mode .yunyoo-bg-header{
    background: linear-gradient(180deg,
        rgba(80, 42, 12, .35) 0%,
        rgba(12, 14, 20, 0) 100%);
}
.bx-tada {
    -webkit-animation: tada 1.5s ease infinite;
    animation: tada 1.5s ease infinite;
}
.yy-dtjbt-text {
  font-family: DingTalk JinBuTi;
}
.yy-b-f {
  -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}


.yunyoo-gradient-text-1 {
    background-image: linear-gradient(75deg, rgb(167 112 239) 0%, rgb(207 139 243) 50%, rgb(253 185 155) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    display: inline-block;
    text-align: left;
    opacity: 1;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.yunyoo-gradient-text-1:hover {
    opacity: 0.8;
}



.location-servers--style-bordered {
  padding: 60px;
  border: 1px solid #dfe6ec;
  border-radius: 5px;
}

.location-servers-map {
  position: relative; }

.location-server-item {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 99px;
  box-shadow: 0px 0px 0px 0px #ececec;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease; 
  border-width: 1px; 
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  animation: anim 2s 0s linear infinite both;
}
		@keyframes anim {
		    0% {box-shadow: 0px 0px 0px 0px #e2e2e2f0;}
		    75% {box-shadow: 0px 0px 0px 12px #ffffff00;}
		    100% {box-shadow: 0px 0px 0px 12px #ffffff00;}
		}

.location-server-item:hover {
  border: 3px solid #fff; 
}

.location-server-item-border-dark {
  border: 2px solid #fff; 
}

.locations-servers-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.locations-server-item {
  font-weight: 500;
  color: #80868d;
  margin: 15px 30px; }
  .locations-server-item .count {
    font-weight: 700;
    color: var(--white-color); }


@-webkit-keyframes tada {
    from {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    10%,20% {
        -webkit-transform: scale3d(.95,.95,.95) rotate3d(0,0,1,-10deg);
        transform: scale3d(.95,.95,.95) rotate3d(0,0,1,-10deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale3d(1,1,1) rotate3d(0,0,1,10deg);
        transform: scale3d(1,1,1) rotate3d(0,0,1,10deg)
    }

    40%,60%,80% {
        -webkit-transform: scale3d(1,1,1) rotate3d(0,0,1,-10deg);
        transform: scale3d(1,1,1) rotate3d(0,0,1,-10deg)
    }

    to {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

@keyframes tada {
    from {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    10%,20% {
        -webkit-transform: scale3d(.95,.95,.95) rotate3d(0,0,1,-10deg);
        transform: scale3d(.95,.95,.95) rotate3d(0,0,1,-10deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale3d(1,1,1) rotate3d(0,0,1,10deg);
        transform: scale3d(1,1,1) rotate3d(0,0,1,10deg)
    }

    40%,60%,80% {
        -webkit-transform: rotate3d(0,0,1,-10deg);
        transform: rotate3d(0,0,1,-10deg)
    }

    to {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}
:root {
    --yunyoo-bg-url-hero75: url(../img/bg/hero@75.jpg);

}
.dark-mode {
    --yunyoo-bg-url-hero75: url(../img/bg/hero-dark@75.jpg);

}

/* ============================================================
   顶栏：Logo 居左 + 登录/注册居右，滚动动态高斯模糊
   ============================================================ */
.yy-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1035;
    background: transparent;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition: background-color .35s ease, box-shadow .35s ease,
        transform .4s ease,
        -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}
/* 手机端下滑自动隐藏（配合 JS .yy-hide） */
.yy-topbar.yy-hide {
    transform: translateY(-110%);
}
.yy-topbar .navbar {
    padding: .45rem 0;
}
/* 滚动后高斯模糊；顶部时全透明 */
.yy-topbar.yy-scrolled {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .06);
}
.dark-mode .yy-topbar.yy-scrolled {
    background: rgba(18, 20, 29, .72);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .28);
}
/* 模糊顶栏上的按钮适配 */
.yy-topbar.yy-scrolled .yy-btn-ghost {
    color: var(--bs-gray-700);
    background: rgba(125, 135, 155, .12);
    border-color: rgba(125, 135, 155, .16);
}
.yy-topbar.yy-scrolled .yy-btn-ghost:hover {
    color: var(--bs-gray-900);
    background: rgba(125, 135, 155, .2);
}
.dark-mode .yy-topbar.yy-scrolled .yy-btn-ghost {
    color: #cbd5e1;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .10);
}
.yy-topbar.yy-scrolled .yy-btn-solid {
    color: #fff;
    background: linear-gradient(135deg, #fb923c, #f97316);
    box-shadow: 0 4px 14px rgba(249, 115, 22, .35);
}
.yy-topbar.yy-scrolled .yy-btn-solid:hover {
    box-shadow: 0 6px 18px rgba(249, 115, 22, .38);
}
/* Logo */
.yy-topbar.yy-scrolled .yy-topbar-logo img {
    filter: none;
}
.yy-topbar-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.yy-topbar-logo {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    transition: transform .25s ease-out;
}
.yy-topbar-logo:hover {
    transform: scale(1.03) rotate(-1deg);
}
.yy-topbar-logo img {
    height: 42px;
    width: auto;
    display: block;
}
/* fixed 顶栏补偿：让内容不被遮挡 */
body.has-navbar-mobile {
    padding-top: 62px;
}
@media (max-width: 767.98px) {
    body.has-navbar-mobile {
        padding-top: 72px;
    }
}
.yy-topbar-side {
    display: flex;
    align-items: center;
    gap: .6rem;
}
/* 手机端顶栏稍高一些，呼吸感更好 */
@media (max-width: 767.98px) {
    .yy-topbar .navbar { padding: .8rem 0; }
    .yy-topbar-logo img { height: 40px; }
    .yy-topbar-side .yy-btn-ghost,
    .yy-topbar-side .yy-btn-solid {
        padding: .5rem 1.25rem;
        font-size: .88rem;
    }
}

/* ============================================================
   iOS 大圆角按钮（非胶囊）
   ============================================================ */
.yy-btn-ghost,
.yy-btn-solid {
    border-radius: 16px;
    padding: .6rem 1.5rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    transition: transform .25s ease-out,
        box-shadow .25s ease, background-color .2s ease, color .2s ease;
}
/* 大号（hero 主按钮） */
.btn-lg.yy-btn-ghost,
.btn-lg.yy-btn-solid {
    padding: .85rem 2rem;
    font-size: 1.08rem;
    border-radius: 18px;
}
/* 小号（底部小按钮） */
.btn-sm.yy-btn-ghost,
.btn-sm.yy-btn-solid {
    padding: .5rem 1.1rem;
    font-size: .85rem;
    border-radius: 13px;
}
.yy-btn-ghost {
    color: var(--bs-gray-700);
    background: rgba(125, 135, 155, .12);
    border: 1px solid rgba(125, 135, 155, .16);
}
.dark-mode .yy-btn-ghost {
    color: #cbd5e1;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .10);
}
.yy-btn-ghost:hover {
    color: var(--bs-gray-900);
    background: rgba(125, 135, 155, .2);
    transform: translateY(-1px) scale(1.02);
}
.yy-btn-solid {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, #fb923c, #f97316);
    box-shadow: 0 4px 14px rgba(249, 115, 22, .35);
}
.yy-btn-solid:hover {
    color: #fff;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 18px rgba(249, 115, 22, .38);
}
.yy-btn-solid:active,
.yy-btn-ghost:active {
    transform: scale(.94);
}

/* ============================================================
   滑入进场动效（配合 IntersectionObserver 使用）
   ============================================================ */
.yy-reveal,
.yy-reveal-side,
.yy-reveal-pop {
    /* 动画元素先隐藏；JS 加载失败时由下方 fallback 显示 */
    opacity: 0;
    transition:
        opacity .65s cubic-bezier(.25, .1, .25, 1),
        transform .7s cubic-bezier(.25, .1, .25, 1);
    transition-delay: var(--yy-d, 0s);
    will-change: opacity, transform;
}
.yy-reveal {
    transform: translateY(22px);
}
.yy-reveal-side {
    transform: translateX(-28px);
}
.yy-reveal-pop {
    transform: scale(.92);
}
.yy-reveal.yy-in,
.yy-reveal-side.yy-in,
.yy-reveal-pop.yy-in {
    opacity: 1;
    transform: none;
}
/* 无 JS 或 JS 异常时的安全兜底：2.5s 后自动可见 */
@keyframes yy-reveal-fallback {
    to { opacity: 1; transform: none; }
}
.no-js .yy-reveal,
.no-js .yy-reveal-side,
.no-js .yy-reveal-pop {
    opacity: 1;
    transform: none;
}

/* ============================================================
   简洁白卡模块（参考截图 2：数据条 + 特性卡）
   ============================================================ */
.yy-glass {
    background: #fff;
    border: 1px solid rgba(220, 225, 234, .55);
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .04);
    transition: transform .25s ease-out,
        box-shadow .25s ease, border-color .25s ease;
}
.dark-mode .yy-glass {
    background: #1a1d28;
    border-color: rgba(255, 255, 255, .07);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
}
.yy-glass:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
    border-color: rgba(249, 115, 22, .22);
}
.dark-mode .yy-glass:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
}
/* 白色卡片模块内文字颜色兜底，防止继承到白色字体 */
.yy-glass, .yy-stat, .yy-flow, .yy-ops-card, .yy-terminal {
    color: #374151;
}
.yy-glass h1, .yy-glass h2, .yy-glass h3, .yy-glass h4, .yy-glass h5, .yy-glass h6,
.yy-stat h1, .yy-stat h2, .yy-stat h3, .yy-stat h4, .yy-stat h5, .yy-stat h6,
.yy-flow h1, .yy-flow h2, .yy-flow h3, .yy-flow h4, .yy-flow h5, .yy-flow h6,
.yy-ops-card h1, .yy-ops-card h2, .yy-ops-card h3, .yy-ops-card h4, .yy-ops-card h5, .yy-ops-card h6 {
    color: #1f2937;
}
.dark-mode .yy-glass, .dark-mode .yy-stat, .dark-mode .yy-flow, .dark-mode .yy-ops-card, .dark-mode .yy-terminal {
    color: #d1d5db;
}
.dark-mode .yy-glass h1, .dark-mode .yy-glass h2, .dark-mode .yy-glass h3, .dark-mode .yy-glass h4, .dark-mode .yy-glass h5, .dark-mode .yy-glass h6,
.dark-mode .yy-stat h1, .dark-mode .yy-stat h2, .dark-mode .yy-stat h3, .dark-mode .yy-stat h4, .dark-mode .yy-stat h5, .dark-mode .yy-stat h6,
.dark-mode .yy-flow h1, .dark-mode .yy-flow h2, .dark-mode .yy-flow h3, .dark-mode .yy-flow h4, .dark-mode .yy-flow h5, .dark-mode .yy-flow h6,
.dark-mode .yy-ops-card h1, .dark-mode .yy-ops-card h2, .dark-mode .yy-ops-card h3, .dark-mode .yy-ops-card h4, .dark-mode .yy-ops-card h5, .dark-mode .yy-ops-card h6 {
    color: #e5e7eb;
}
/* 简洁图标格子 */
.yy-icon-tile {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #fff;
    background: linear-gradient(135deg, #fdba74, #f97316);
    box-shadow: 0 6px 16px rgba(249, 115, 22, .18);
    transition: transform .3s ease;
}
.yy-glass:hover .yy-icon-tile {
    transform: scale(1.06) rotate(-3deg);
}

/* ============================================================
   首页 Hero：大字标题 + 副标题 + 小灰字
   ============================================================ */
.yy-hero-title {
    font-size: clamp(2.8rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .04em;
}
.yy-hero-sub {
    display: inline-block;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.3;
    background: linear-gradient(120deg, #ea580c, #f97316 50%, #fb923c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dark-mode .yy-hero-sub {
    background: linear-gradient(120deg, #fb923c, #fdba74);
    -webkit-background-clip: text;
    background-clip: text;
}
.yy-hero-note {
    font-size: 1.05rem;
    color: #7d8590;
    letter-spacing: .02em;
    line-height: 1.7;
}
.dark-mode .yy-hero-note {
    color: #8b93a3;
}

/* ============================================================
   猫娘趴在"大橘云"标题上
   ============================================================ */
.yy-hero-catgirl {
    position: absolute;
    top: -40px;
    right: 18%;
    width: 150px;
    height: auto;
    z-index: 10;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .12));
    transform-origin: bottom center;
    transition: transform .4s ease-out;
}
@media (min-width: 1200px) {
    .yy-hero-catgirl {
        width: 180px;
        top: -48px;
        right: 20%;
    }
}

/* ============================================================
   Hero 鼠标视差（JS 配合 data-yy-depth 使用）
   ============================================================ */
.yy-hero-parallax [data-yy-depth] {
    transition: transform .15s ease-out;
    will-change: transform;
}

/* ============================================================
   首页徽章 chip（iOS 胶囊）
   ============================================================ */
.yy-chip {
    display: inline-flex;
    align-items: center;
    padding: .4rem 1rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: #c2410c;
    background: rgba(249, 115, 22, .10);
    border: 1px solid rgba(249, 115, 22, .22);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: transform .25s ease-out, background-color .2s ease;
}
.dark-mode .yy-chip {
    color: #fdba74;
    background: rgba(249, 115, 22, .12);
    border-color: rgba(249, 115, 22, .28);
}
.yy-chip:hover {
    transform: scale(1.03);
    background: rgba(249, 115, 22, .16);
}

/* ============================================================
   IDC 实力数据条（参考截图 2）
   ============================================================ */
.yy-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 767.98px) {
    .yy-stats { grid-template-columns: repeat(2, 1fr); }
}
.yy-stat {
    text-align: center;
    padding: 1.6rem 1rem;
    background: #fff;
    border: 1px solid rgba(220, 225, 234, .65);
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
}
.dark-mode .yy-stat {
    background: #1a1d28;
    border-color: rgba(255, 255, 255, .07);
}
.yy-stat-num {
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 700;
    line-height: 1.1;
    color: #f97316;
}
.yy-stat-label {
    font-size: .78rem;
    color: #6b7280;
    margin-top: .35rem;
}
.dark-mode .yy-stat-label { color: #9ca3af; }

/* ============================================================
   可爱字体：标题、徽章、数字、卡片标题统一使用钉钉进步体
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.yy-chip, .yy-stat-num, .yy-gcard-title,
.yy-btn-solid, .yy-btn-ghost,
.yy-stat-label {
    font-family: "DingTalk JinBuTi", "PingFang SC", "HarmonyOS Sans SC", var(--bs-body-font-family), sans-serif;
}

/* ============================================================
   底栏：灰色调 + 与页面交接处渐变过渡
   ============================================================ */
footer.yy-footer {
    background: linear-gradient(180deg,
        var(--bs-body-bg, #fff) 0%,
        #f2f3f6 16%,
        #e9ebf0 45%,
        #e6e8ee 100%);
    color: #3b3f46;
}
.dark-mode footer.yy-footer {
    background: linear-gradient(180deg,
        var(--bs-body-bg, #12141d) 0%,
        #181b25 16%,
        #1c1f2b 45%,
        #1e2130 100%);
    color: #cbd5e1;
}
footer.yy-footer h5.text-white,
footer.yy-footer .yy-foot-title {
    color: #33373f;
}
.dark-mode footer.yy-footer h5.text-white,
.dark-mode footer.yy-footer .yy-foot-title {
    color: #e2e8f0;
}
footer.yy-footer .nav-link.text-muted {
    color: #6f747d !important;
}
.dark-mode footer.yy-footer .nav-link.text-muted {
    color: #9aa2b1 !important;
}
footer.yy-footer .text-muted,
footer.yy-footer .yy-copyright,
footer.yy-footer .beian-link {
    color: #8a8f98 !important;
}
.dark-mode footer.yy-footer .text-muted,
.dark-mode footer.yy-footer .yy-copyright,
.dark-mode footer.yy-footer .beian-link {
    color: #8b93a3 !important;
}
footer.yy-footer hr {
    opacity: .14;
}
footer.yy-footer .text-primary-hover:hover {
    color: #f97316 !important;
}

/* ============================================================
   操作便捷（参考截图 3：终端窗口 + 部署流程）
   ============================================================ */
.yy-ops-section {
    padding: 1rem 0 3rem;
}
.yy-terminal {
    background: #fff;
    border: 1px solid rgba(220, 225, 234, .65);
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
    overflow: hidden;
    transition: transform .25s ease-out, box-shadow .25s ease;
}
.dark-mode .yy-terminal {
    background: #1a1d28;
    border-color: rgba(255, 255, 255, .07);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .32);
}
.yy-terminal:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .08);
}
.yy-terminal-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1rem;
    background: #f8f9fb;
    border-bottom: 1px solid rgba(220, 225, 234, .65);
}
.dark-mode .yy-terminal-head {
    background: #21242f;
    border-bottom-color: rgba(255, 255, 255, .07);
}
.yy-terminal-head span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.yy-terminal-head span:nth-child(1) { background: #ff5f56; }
.yy-terminal-head span:nth-child(2) { background: #ffbd2e; }
.yy-terminal-head span:nth-child(3) { background: #27c93f; }
.yy-terminal-body {
    margin: 0;
    padding: 1rem 1.2rem;
    background: #0e1116;
    color: #a7f3d0;
    font-family: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
    font-size: .78rem;
    line-height: 1.7;
    overflow-x: auto;
    white-space: pre-wrap;
}
.dark-mode .yy-terminal-body {
    background: #0a0c10;
}
.yy-flow {
    background: #fff;
    border: 1px solid rgba(220, 225, 234, .65);
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
    padding: 1.2rem 1.4rem;
    height: 100%;
    transition: transform .25s ease-out, box-shadow .25s ease;
}
.dark-mode .yy-flow {
    background: #1a1d28;
    border-color: rgba(255, 255, 255, .07);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .32);
}
.yy-flow:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .08);
}
.yy-flow-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.yy-flow-head h5 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}
.yy-link {
    font-size: .85rem;
    color: #f97316;
    text-decoration: none;
    font-weight: 600;
    transition: color .25s ease;
}
.yy-link:hover {
    color: #fb923c;
}
.yy-flow-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.yy-flow-list li {
    display: flex;
    gap: .85rem;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(220, 225, 234, .5);
}
.dark-mode .yy-flow-list li {
    border-bottom-color: rgba(255, 255, 255, .07);
}
.yy-flow-list li:last-child { border-bottom: 0; }
.yy-flow-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(249, 115, 22, .10);
    color: #f97316;
    font-size: .85rem;
    flex-shrink: 0;
}
.yy-ops-card {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: #fff;
    border: 1px solid rgba(220, 225, 234, .65);
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
    padding: 1.3rem;
    height: 100%;
    transition: transform .25s ease-out, box-shadow .25s ease;
}
.dark-mode .yy-ops-card {
    background: #1a1d28;
    border-color: rgba(255, 255, 255, .07);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .32);
}
.yy-ops-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .08);
}
.yy-ops-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #fb923c, #f97316);
    box-shadow: 0 6px 16px rgba(249, 115, 22, .22);
    font-size: 1rem;
    flex-shrink: 0;
}

/* ============================================================
   底栏：缩小文字占比、修正排版
   ============================================================ */
footer .yy-foot-text {
    font-size: .8rem;
    line-height: 1.7;
}
footer h5.text-white {
    font-size: .9rem;
    margin-bottom: .75rem;
}
footer .nav-link {
    padding: .15rem 0;
    font-size: .8rem;
}
footer .beian-info a,
footer .beian-info span {
    font-size: .72rem;
}
footer .beian-info img {
    height: 14px;
    width: 14px;
}
footer .yy-copyright {
    font-size: .78rem;
}

/* ============================================================
   他们也在使用大橘云：大圆角卡片组成的自转星球（密集版）
   ============================================================ */
.yy-globe-wrap {
    position: relative;
    height: 680px;
    perspective: 1500px;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    /* 四周虚化渐隐 */
    -webkit-mask-image: radial-gradient(ellipse 76% 66% at 50% 50%, #000 52%, transparent 80%);
    mask-image: radial-gradient(ellipse 76% 66% at 50% 50%, #000 52%, transparent 80%);
}
.yy-globe-wrap:active {
    cursor: grabbing;
}
/* 星球背后的光晕 */
.yy-globe-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 86%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(249, 115, 22, .26) 0%,
            rgba(249, 115, 22, .12) 42%,
            rgba(249, 115, 22, 0) 68%);
    filter: blur(46px);
    pointer-events: none;
}
/* 星球本体（若隐若现的球面） */
.yy-globe-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%,
            rgba(255, 255, 255, .30) 0%,
            rgba(253, 186, 116, .14) 34%,
            rgba(249, 115, 22, .10) 62%,
            rgba(249, 115, 22, .04) 100%);
    border: 1px solid rgba(249, 115, 22, .14);
    box-shadow: inset 0 0 80px rgba(249, 115, 22, .12);
    pointer-events: none;
}
.dark-mode .yy-globe-core {
    background:
        radial-gradient(circle at 34% 30%,
            rgba(255, 255, 255, .10) 0%,
            rgba(249, 115, 22, .08) 40%,
            rgba(249, 115, 22, .03) 100%);
    border-color: rgba(249, 115, 22, .18);
}
.yy-globe-tilt {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(-12deg);
}
/* 球心若隐若现的「大橘云」 */
.yy-globe-word {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "DingTalk JinBuTi", "PingFang SC", sans-serif;
    font-size: clamp(3rem, 8.5vw, 5.2rem);
    font-weight: 800;
    letter-spacing: .12em;
    white-space: nowrap;
    color: #f97316;
    opacity: .13;
    filter: blur(.4px);
    pointer-events: none;
    user-select: none;
    -webkit-animation: yy-word-pulse 5.5s ease-in-out infinite;
    animation: yy-word-pulse 5.5s ease-in-out infinite;
}
.dark-mode .yy-globe-word {
    color: #fb923c;
}
@-webkit-keyframes yy-word-pulse {
    0%, 100% { opacity: .09; }
    50%      { opacity: .22; }
}
@keyframes yy-word-pulse {
    0%, 100% { opacity: .09; }
    50%      { opacity: .22; }
}
/* 卡片与球心的连接细线 */
.yy-gcard-line {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 1px;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, rgba(249, 115, 22, .38), rgba(249, 115, 22, .03));
    pointer-events: none;
    will-change: transform, opacity;
}

/* 密集版（电脑端卡片翻倍） */
.yy-globe-dense .yy-gcard {
    width: 128px;
}
.yy-globe-dense .yy-gcard-in {
    padding: .45rem .55rem;
    border-radius: 13px;
}
.yy-globe-dense .yy-gcard-logo {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    border-radius: 8px;
    font-size: .72rem;
}
.yy-globe-dense .yy-gcard-title {
    font-size: .71rem;
}

/* 单张卡片 */
.yy-gcard {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 148px;
    will-change: transform, opacity;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.yy-gcard-in {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .10);
    padding: .55rem .7rem;
    transition: transform .25s ease-out,
        box-shadow .25s ease, border-color .25s ease;
}
.dark-mode .yy-gcard-in {
    background: rgba(30, 34, 48, .78);
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.yy-gcard-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.yy-gcard-logo {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .85rem;
    overflow: hidden;
    background: linear-gradient(135deg, #fb923c, #f97316);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.yy-gcard-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.yy-gcard-title {
    font-size: .78rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.dark-mode .yy-gcard-title {
    color: #e5e7eb;
}
.yy-gcard-desc {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    font-size: .68rem;
    line-height: 1.5;
    color: #6b7280;
    transition: max-height .35s ease, opacity .3s ease, margin-top .3s ease;
}
.dark-mode .yy-gcard-desc {
    color: #9ca3af;
}
.yy-gcard:hover .yy-gcard-in,
.yy-gcard.active .yy-gcard-in {
    transform: scale(1.06);
    border-color: rgba(249, 115, 22, .55);
    box-shadow: 0 12px 30px rgba(249, 115, 22, .22);
}
.yy-gcard:hover .yy-gcard-desc,
.yy-gcard.active .yy-gcard-desc {
    max-height: 110px;
    opacity: 1;
    margin-top: .45rem;
}

/* 手机端 */
@media (max-width: 575.98px) {
    .yy-globe-wrap {
        height: 520px;
    }
    .yy-gcard {
        width: 122px;
    }
    .yy-gcard-in {
        padding: .45rem .55rem;
        border-radius: 13px;
    }
    .yy-gcard-logo {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
        border-radius: 8px;
        font-size: .7rem;
    }
    .yy-gcard-title {
        font-size: .7rem;
    }
    .yy-gcard-desc {
        font-size: .64rem;
    }
}

/* ============================================================
   我们的主机支持什么：双行无限滚动 Logo 走马灯
   ============================================================ */
.yy-support-section {
    padding: 2rem 0 2.5rem;
    overflow: hidden;
}
.yy-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: .6rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.yy-marquee-track {
    display: flex;
    gap: 1.2rem;
    width: max-content;
}
.yy-marquee--left .yy-marquee-track {
    -webkit-animation: yy-mq-left 32s linear infinite;
    animation: yy-mq-left 32s linear infinite;
}
.yy-marquee--right .yy-marquee-track {
    -webkit-animation: yy-mq-right 32s linear infinite;
    animation: yy-mq-right 32s linear infinite;
}
.yy-marquee:hover .yy-marquee-track {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
@-webkit-keyframes yy-mq-left {
    0%   { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@-webkit-keyframes yy-mq-right {
    0%   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes yy-mq-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes yy-mq-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
.yy-marquee-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: .7rem .9rem .55rem;
    background: #fff;
    border: 1px solid rgba(220, 225, 234, .55);
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 600;
    color: #374151;
    transition: transform .25s ease-out, box-shadow .25s ease, border-color .25s ease;
    flex-shrink: 0;
}
.dark-mode .yy-marquee-item {
    background: #1a1d28;
    border-color: rgba(255, 255, 255, .07);
    color: #d1d5db;
}
.yy-marquee-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(249, 115, 22, .12);
    border-color: rgba(249, 115, 22, .25);
}
.yy-marquee-item img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* 尊重系统的减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
    .yy-topbar,
    .yy-topbar-logo,
    .yy-gcard-in,
    .yy-gcard-desc,
    .yy-gcard-line,
    .yy-glass,
    .yy-icon-tile,
    .yy-reveal,
    .yy-reveal-side,
    .yy-reveal-pop,
    .yy-terminal,
    .yy-flow,
    .yy-ops-card,
    .yy-btn-ghost,
    .yy-btn-solid,
    .yy-chip {
        transition: none !important;
        animation: none !important;
    }
    .yy-globe-word {
        animation: none !important;
    }
    .yy-marquee-track {
        animation: none !important;
    }
    .yy-hero-parallax [data-yy-depth] {
        transition: none !important;
    }
}