/*!
 * CloudOps Theme - index.css
 * 首页专属样式
 */

/* ============ HERO ============ */
.hero {
    background: linear-gradient(135deg, #001A66 0%, #003D99 40%, #0066FF 100%);
    position: relative;
    overflow: hidden;
    padding: 100px 0 120px;
    color: #fff;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(800px 400px at 90% 10%, rgba(77, 143, 255, 0.3), transparent 60%),
        radial-gradient(600px 400px at 10% 90%, rgba(0, 180, 216, 0.15), transparent 60%);
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 80%);
    pointer-events: none;
    opacity: 0.6;
}

.hero-inner { position: relative; text-align: center; z-index: 1; }
.hero .badge-hero {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 24px;
}
.hero .badge-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(0, 180, 216, 0.3);
    font-size: 10px;
}

.hero h1 {
    font-size: clamp(38px, 5.5vw, 60px);
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
    letter-spacing: -0.03em;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    white-space: pre-line;
}
.hero-sub {
    font-size: 17px;
    color: var(--ink-white-soft);
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto 44px;
    white-space: pre-line;
}

/* 搜索框 */
.hero-search { max-width: 720px; margin: 0 auto 32px; }
.hero-search-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    justify-content: center;
}
.hero-search-tab {
    padding: 10px 24px;
    color: var(--ink-white-soft);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid transparent;
    border-bottom: 0;
    transition: all var(--t-base);
}
.hero-search-tab.active {
    background: #fff;
    color: var(--blue);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}
.hero-search-tab:not(.active):hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.hero-search-box {
    background: #fff;
    border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 24px 60px rgba(0, 26, 102, 0.4);
}
.hero-search-box input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 14px 18px;
    color: var(--ink);
    font-size: 15px;
    font-family: var(--font);
}
.hero-search-box input::placeholder { color: var(--ink-dim); }
.hero-search-box .btn-search {
    background: var(--blue);
    color: #fff;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--t-fast);
    cursor: pointer;
    border: 0;
    font-size: 14.5px;
    font-family: var(--font);
}
.hero-search-box .btn-search:hover {
    background: var(--blue-hover);
    transform: translateY(-1px);
}

/* 后缀价格 */
.hero-tld {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    max-width: 720px;
    margin: 0 auto;
}
.hero-tld-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: #fff;
    text-decoration: none;
    transition: opacity var(--t-fast);
}
.hero-tld-item:hover { opacity: 0.85; color: #fff; }
.hero-tld-item .tld { font-weight: 600; font-size: 15px; }
.hero-tld-item .price { font-size: 13px; color: var(--ink-white-soft); }

/* 信任数据 */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 920px;
    margin: 80px auto 0;
    padding-top: 48px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.hs-item { text-align: center; }
.hs-num {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.025em;
    line-height: 1;
}
.hs-num small {
    font-size: 18px;
    color: #4D8FFF;
    margin-left: 2px;
    font-weight: 600;
}
.hs-label {
    font-size: 13px;
    color: var(--ink-white-soft);
    margin-top: 10px;
}

/* ============ Quick Products 卡片 ============ */
.quick-products { padding: 80px 0; background: var(--bg-white); }
.quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.qp-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    transition: all var(--t-slow);
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
}
.qp-card:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-2);
    transform: translateY(-4px);
    color: var(--ink);
}
.qp-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--blue-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-slow);
}
.qp-card:hover::after { transform: scaleX(1); }

.qp-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    background: var(--bg-blue-soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: all var(--t-base);
}
.qp-card:hover .qp-icon {
    background: var(--blue);
    color: #fff;
    transform: scale(1.05);
}

.qp-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }
.qp-desc {
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 20px;
    line-height: 1.55;
    min-height: 36px;
}
.qp-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.qp-price { display: flex; align-items: baseline; gap: 2px; }
.qp-price .from { font-size: 11px; color: var(--ink-dim); margin-right: 4px; }
.qp-price .num { font-size: 22px; font-weight: 700; color: var(--blue); letter-spacing: -0.02em; }
.qp-price .unit { font-size: 12px; color: var(--ink-dim); margin-left: 2px; }
.qp-arrow {
    color: var(--ink-dim);
    font-size: 18px;
    transition: all var(--t-base);
}
.qp-card:hover .qp-arrow { color: var(--blue); transform: translateX(4px); }

/* ============ SSL 区 ============ */
.ssl-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 48px;
}
.ssl-segment {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 2px;
}
.ssl-segment button {
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--ink-soft);
    font-weight: 500;
    transition: all var(--t-base);
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font);
}
.ssl-segment button.active {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.25);
}
.ssl-segment button:not(.active):hover {
    background: var(--bg-soft);
    color: var(--ink);
}

.ssl-brands {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ssl-brand {
    padding: 8px 18px;
    border-radius: var(--radius-md);
    font-size: 13px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    transition: all var(--t-fast);
    cursor: pointer;
    font-weight: 500;
}
.ssl-brand.active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.ssl-brand:hover:not(.active) { border-color: var(--blue); color: var(--blue); }

.ssl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* 价格卡 */
.price-card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    padding: 36px 32px;
    position: relative;
    transition: all var(--t-slow);
    display: flex;
    flex-direction: column;
}
.price-card:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-2);
    transform: translateY(-3px);
}
.price-card.featured {
    border-color: var(--blue);
    background: linear-gradient(180deg, #fff 0%, #F5F8FC 100%);
    box-shadow: 0 0 0 1px var(--blue), 0 16px 40px rgba(0, 102, 255, 0.15);
    transform: translateY(-4px);
}
.price-card.featured::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), var(--blue-light));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.pc-tag {
    position: absolute;
    top: 24px; right: 24px;
    background: var(--bg-blue-soft);
    color: var(--blue);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.price-card.featured .pc-tag { background: var(--blue); color: #fff; }

.pc-type {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
    text-transform: uppercase;
    margin-bottom: 14px;
    font-weight: 600;
}
.pc-name { font-size: 22px; font-weight: 700; margin-bottom: 8px; color: var(--ink); letter-spacing: -0.02em; }
.pc-brand { font-size: 13px; color: var(--ink-soft); margin-bottom: 24px; min-height: 20px; }
.pc-brand img { height: 24px; }

.pc-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
}
.pc-price .currency { font-size: 16px; color: var(--ink-soft); font-weight: 500; }
.pc-price .amount {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--blue);
    line-height: 1;
}
.pc-price .unit { font-size: 14px; color: var(--ink-dim); margin-left: 4px; }

.pc-feat {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.pc-feat li {
    font-size: 14px;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 10px;
}
.pc-feat li::before {
    content: '';
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--bg-blue-soft);
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><path d='M4 9L7.5 12.5L14 5.5' stroke='%230066FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
}

.pc-btn {
    display: block;
    text-align: center;
    width: 100%;
    padding: 13px 0;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    background: var(--bg-soft);
    color: var(--ink);
    transition: all var(--t-fast);
    font-family: var(--font);
    border: 1px solid var(--line);
    text-decoration: none;
}
.pc-btn:hover {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    box-shadow: var(--shadow-blue);
}
.price-card.featured .pc-btn { background: var(--blue); color: #fff; border-color: var(--blue); }
.price-card.featured .pc-btn:hover { background: var(--blue-hover); box-shadow: var(--shadow-blue-strong); }

.ssl-section-foot { text-align: center; margin-top: 32px; }
.ssl-section-foot a { color: var(--blue); font-weight: 600; }

/* ============ DataCenter Tabs + Server Cards ============ */
.dc-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 40px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}
.dc-tab {
    flex: 1;
    min-width: 120px;
    padding: 14px 12px;
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: all var(--t-base);
    background: transparent;
    color: var(--ink-soft);
    border: 0;
}
.dc-tab.active {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.25);
}
.dc-tab:hover:not(.active) { background: var(--bg-soft); color: var(--ink); }
.dc-tab .country { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.dc-tab .name { font-size: 11px; opacity: 0.7; letter-spacing: 0.04em; }

.server-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.server-card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: all var(--t-slow);
    display: flex;
    flex-direction: column;
}
.server-card:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-2);
    transform: translateY(-3px);
}
.server-card.featured {
    border-color: var(--blue);
    box-shadow: 0 0 0 1px var(--blue), 0 16px 40px rgba(0, 102, 255, 0.15);
    transform: translateY(-4px);
}
.server-card.featured .sc-head {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
    color: #fff;
}
.server-card.featured .sc-head .sc-name { color: #fff; }

.sc-head {
    padding: 28px 32px 24px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    position: relative;
}
.sc-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blue);
    background: var(--bg-blue-soft);
    padding: 3px 9px;
    border-radius: var(--radius-xs);
    margin-bottom: 12px;
}
.server-card.featured .sc-tag {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.sc-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    color: var(--ink);
}
.sc-price-row { display: flex; align-items: baseline; gap: 4px; }
.sc-currency { font-size: 15px; color: var(--ink-soft); font-weight: 500; }
.server-card.featured .sc-currency { color: rgba(255, 255, 255, 0.85); }
.sc-num {
    font-size: 38px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: -0.03em;
    line-height: 1;
}
.server-card.featured .sc-num { color: #fff; }
.sc-unit { font-size: 13px; color: var(--ink-dim); margin-left: 4px; }
.server-card.featured .sc-unit { color: rgba(255, 255, 255, 0.85); }

.sc-body {
    padding: 24px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sc-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
}
.sc-specs li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 13.5px;
}
.sc-specs li:last-child { border-bottom: 0; }
.sc-specs .lbl { color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.sc-specs .lbl-icon {
    width: 18px; height: 18px;
    border-radius: var(--radius-xs);
    background: var(--bg-blue-soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}
.sc-specs .val { font-weight: 600; color: var(--ink); }

.sc-foot { margin-top: auto; }
.sc-btn {
    display: block;
    text-align: center;
    width: 100%;
    padding: 13px 0;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    background: var(--bg-soft);
    color: var(--ink);
    transition: all var(--t-fast);
    border: 1px solid var(--line);
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font);
}
.sc-btn:hover {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    box-shadow: var(--shadow-blue);
}
.server-card.featured .sc-btn {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}
.server-card.featured .sc-btn:hover { background: var(--blue-hover); }

.section-foot-cta { text-align: center; margin-top: 36px; }
.section-foot-cta a { color: var(--blue); font-weight: 600; }

/* ============ Global Network Map ============ */
.map-wrapper {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 300px;
}
.map-canvas {
    position: relative;
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0, 102, 255, 0.04), transparent 70%),
        linear-gradient(180deg, #FAFBFD 0%, #F5F8FC 100%);
    overflow: hidden;
    padding: 40px 30px;
}
.map-svg-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1000 / 500;
    max-height: 540px;
}
.map-svg { width: 100%; height: 100%; display: block; }
.map-grid-line {
    stroke: #D5DCE5;
    stroke-width: 0.4;
    fill: none;
    stroke-dasharray: 2 4;
    opacity: 0.45;
}
.map-dot { fill: #C2CCD8; transition: fill var(--t-slow); }
.map-link {
    stroke: url(#linkGradient);
    stroke-width: 1.2;
    fill: none;
    stroke-dasharray: 0 1000;
    animation: linkDraw 3s linear infinite;
    opacity: 0.6;
}
@keyframes linkDraw {
    0% { stroke-dasharray: 0 1000; }
    50% { stroke-dasharray: 800 1000; }
    100% { stroke-dasharray: 1000 0; opacity: 0; }
}

.map-node {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.map-node-ring {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--blue);
    animation: ringPulse 2.5s ease-out infinite;
}
.map-node-ring.delay { animation-delay: 1.25s; }
@keyframes ringPulse {
    0% { width: 10px; height: 10px; border-width: 1.5px; opacity: 0.9; }
    100% { width: 48px; height: 48px; border-width: 0.5px; opacity: 0; }
}
.map-node-core {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15), 0 0 14px rgba(0, 102, 255, 0.5);
    cursor: pointer;
    transition: all var(--t-base);
}
.map-node:hover .map-node-core {
    background: var(--cyan);
    width: 14px; height: 14px;
    box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.2), 0 0 20px rgba(0, 180, 216, 0.7);
}
.map-node.active .map-node-core {
    background: var(--cyan);
    width: 14px; height: 14px;
    box-shadow: 0 0 0 5px rgba(0, 180, 216, 0.18), 0 0 24px rgba(0, 180, 216, 0.8);
}
.map-node.active .map-node-ring { border-color: var(--cyan); }
.map-node-label {
    position: absolute;
    left: 50%; top: -32px;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.map-node-label::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--ink);
    border-bottom: 0;
}
.map-node:hover .map-node-label,
.map-node.active .map-node-label { opacity: 1; }

.map-node.hub .map-node-core {
    width: 14px; height: 14px;
    background: var(--cyan);
    box-shadow: 0 0 0 5px rgba(0, 180, 216, 0.18), 0 0 28px rgba(0, 180, 216, 0.7);
}
.map-node.hub .map-node-ring { border-color: var(--cyan); }
.map-node.hub .map-node-label { opacity: 1; }

.map-aside {
    background: #fff;
    border-left: 1px solid var(--line);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
}
.map-aside-head {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.map-aside-head .live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--success);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.map-aside-head .live::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--success);
    animation: livePulse 2s infinite;
}
.map-aside-head h4 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.map-aside-head p { font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 0; }

.node-list {
    flex: 1;
    overflow-y: auto;
    margin: 0 -8px;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 440px;
}
.node-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--t-fast);
    border: 1px solid transparent;
}
.node-item:hover { background: var(--bg-soft); }
.node-item.active { background: var(--bg-blue-soft); border-color: rgba(0, 102, 255, 0.2); }
.node-flag { font-size: 16px; flex-shrink: 0; line-height: 1; }
.node-info { flex: 1; min-width: 0; }
.node-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}
.node-code { font-size: 11px; color: var(--ink-dim); margin-top: 1px; letter-spacing: 0.04em; }
.node-ping {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--blue);
    background: var(--bg-blue-soft);
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    font-feature-settings: "tnum";
}
.node-item.active .node-ping { background: var(--blue); color: #fff; }

/* 网络数据卡 */
.network-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
}
.ns-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
}
.ns-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    background: var(--bg-blue-soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 14px;
}
.ns-num { font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -0.025em; line-height: 1; }
.ns-num .unit { font-size: 14px; color: var(--blue); margin-left: 4px; font-weight: 600; }
.ns-label { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }

/* ============ 优势特性 ============ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.feat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    transition: all var(--t-base);
    position: relative;
}
.feat-card:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}
.feat-icon {
    width: 56px; height: 56px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 102, 255, 0.2);
}
.feat-title { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 12px; color: var(--ink); }
.feat-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.7; }

/* ============ FAQ ============ */
.faq-wrap {
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--t-base);
}
.faq-item:hover { border-color: var(--blue); }
.faq-item.open { border-color: var(--blue); box-shadow: var(--shadow-1); }
.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 26px;
    cursor: pointer;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink);
    gap: 14px;
}
.faq-q-num {
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
    min-width: 32px;
    font-feature-settings: "tnum";
}
.faq-q-text { flex: 1; }
.faq-q-icon {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-slow);
    flex-shrink: 0;
    color: var(--ink-soft);
    font-size: 14px;
}
.faq-item.open .faq-q-icon { background: var(--blue); color: #fff; transform: rotate(45deg); }
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-slow), padding var(--t-slow);
    padding: 0 26px;
}
.faq-item.open .faq-a { max-height: 500px; padding: 0 26px 22px; padding-left: 72px; }
.faq-a-content {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.75;
}

/* ============ Bottom CTA ============ */
.cta-section {
    background: linear-gradient(135deg, #001A66 0%, #0066FF 100%);
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    color: #fff;
}
.cta-section::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(800px 400px at 20% 50%, rgba(77, 143, 255, 0.3), transparent 60%),
        radial-gradient(800px 400px at 80% 50%, rgba(0, 180, 216, 0.15), transparent 60%);
    pointer-events: none;
}
.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    position: relative;
    z-index: 1;
}
.cta-text h2 {
    font-size: clamp(28px, 3.2vw, 38px);
    color: #fff;
    margin-bottom: 14px;
    letter-spacing: -0.025em;
}
.cta-text p {
    color: var(--ink-white-soft);
    font-size: 16px;
    max-width: 560px;
    line-height: 1.6;
    margin: 0;
}
.cta-actions { display: flex; gap: 12px; flex-shrink: 0; }
.btn-cta-primary {
    color: var(--blue);
    background: #fff;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 15px;
    border-radius: var(--radius-md);
    transition: all var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.btn-cta-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    color: var(--blue);
}
.btn-cta-ghost {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    padding: 14px 28px;
    font-weight: 600;
    font-size: 15px;
    border-radius: var(--radius-md);
    transition: all var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.btn-cta-ghost:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* ============ Hero banner 模式 (轮播 banner，当没启用域名模块时用) ============ */
.hero-banner-swiper {
    position: relative;
    overflow: hidden;
    min-height: 480px;
}
.hero-banner-slide {
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 80px 0;
    display: flex;
    align-items: center;
    min-height: 480px;
}
.hero-banner-slide::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0, 26, 102, 0.7) 0%, transparent 70%);
}
.hero-banner-slide .container { position: relative; z-index: 1; }
.hero-banner-slide h1 {
    font-size: clamp(32px, 4.4vw, 52px);
    color: #fff;
    margin-bottom: 16px;
    font-weight: 700;
    letter-spacing: -0.025em;
    max-width: 680px;
}
.hero-banner-slide p {
    font-size: 18px;
    color: var(--ink-white-soft);
    max-width: 580px;
    margin: 0 0 24px;
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
    .quick-grid { grid-template-columns: repeat(2, 1fr); }
    .ssl-grid, .server-grid, .features-grid { grid-template-columns: repeat(2, 1fr); }
    .map-wrapper { grid-template-columns: 1fr; }
    .map-aside { border-left: 0; border-top: 1px solid var(--line); }
    .node-list { max-height: 280px; }
    .network-stats { grid-template-columns: repeat(2, 1fr); }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
    .quick-grid, .ssl-grid, .server-grid, .features-grid { grid-template-columns: 1fr; }
    .network-stats { grid-template-columns: 1fr 1fr; }
    .hero-stats { grid-template-columns: 1fr 1fr; gap: 24px; }
    .hero { padding: 64px 0 80px; }
    .hero-tld { gap: 14px; }
    .cta-inner { flex-direction: column; text-align: center; align-items: stretch; }
    .cta-actions { justify-content: center; flex-wrap: wrap; }
}