/* ============================================
   三晶科技 - 前台默认模板样式
   参考新网风格，蓝色商务风，响应式
   ============================================ */

/* 重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    background: #fff;
}
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ========== 顶部导航 ========== */
.header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo img { height: 40px; }
.logo-text {
    font-size: 20px;
    font-weight: bold;
    color: #1677ff;
}
.nav {
    display: block;
    height: 70px;
    font-size: 0;
}
.nav > a {
    font-size: 15px;
    color: #333;
    padding: 0 20px;
    height: 70px;
    line-height: 70px;
    position: relative;
    transition: color 0.2s;
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: top;
}
.nav > a:hover, .nav > a.active {
    color: #1677ff;
}
.nav > a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    background: #1677ff;
}
.nav-item-dropdown {
    position: relative;
}
.nav-item-dropdown:hover .dropdown-menu {
    display: block;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}
.btn-login {
    padding: 8px 20px;
    border: 1px solid #1677ff;
    color: #1677ff;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s;
}
.btn-login:hover {
    background: #1677ff;
    color: #fff;
}
.btn-register {
    padding: 8px 20px;
    background: #1677ff;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    transition: background 0.2s;
}
.btn-register:hover {
    background: #0958d9;
}
.mobile-menu-btn {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

/* ========== Banner区域 ========== */
.banner {
    background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
    color: #fff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}
.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
.banner-content {
    flex: 1;
    max-width: 600px;
}
.banner h1 {
    font-size: 42px;
    margin-bottom: 20px;
    line-height: 1.3;
}
.banner p {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
}
.banner-btns {
    display: flex;
    gap: 15px;
}
.banner-btn-primary {
    padding: 14px 36px;
    background: #fff;
    color: #1677ff;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    transition: transform 0.2s;
}
.banner-btn-primary:hover {
    transform: translateY(-2px);
}
.banner-btn-outline {
    padding: 14px 36px;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 6px;
    font-size: 16px;
    transition: background 0.2s;
}
.banner-btn-outline:hover {
    background: rgba(255,255,255,0.1);
}
.banner-image {
    flex: 1;
    text-align: right;
}
.banner-image img {
    max-width: 400px;
}

/* ========== 快速入口 ========== */
.quick-entry {
    background: #fff;
    padding: 40px 0;
    margin-top: -40px;
    position: relative;
    z-index: 10;
}
.quick-entry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.quick-item {
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    transition: all 0.2s;
    cursor: pointer;
}
.quick-item:hover {
    background: #f0f7ff;
}
.quick-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, #1677ff, #69b1ff);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
}
.quick-item h4 {
    font-size: 16px;
    margin-bottom: 6px;
    color: #333;
}
.quick-item p {
    font-size: 12px;
    color: #999;
}

/* ========== 产品区域 ========== */
.section {
    padding: 60px 0;
}
.section-title {
    text-align: center;
    margin-bottom: 40px;
}
.section-title h2 {
    font-size: 32px;
    margin-bottom: 12px;
    color: #222;
}
.section-title p {
    font-size: 15px;
    color: #666;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.product-card {
    background: #fff;
    border: 1px solid #e8ebf0;
    border-radius: 12px;
    padding: 30px 24px;
    transition: all 0.3s;
    position: relative;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    box-shadow: 0 8px 30px rgba(22,119,255,0.15);
    transform: translateY(-4px);
    border-color: #1677ff;
}
.product-card.hot::before {
    content: '热门';
    position: absolute;
    top: 0;
    right: 20px;
    background: #ff4d4f;
    color: #fff;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 0 0 6px 6px;
}
.product-icon {
    width: 48px;
    height: 48px;
    background: #e6f4ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}
.product-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #222;
}
.product-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
    min-height: 40px;
}
.product-price {
    margin-bottom: 20px;
}
.product-price .price {
    font-size: 28px;
    color: #ff4d4f;
    font-weight: bold;
}
.product-price .unit {
    font-size: 13px;
    color: #999;
}
.product-features {
    margin-bottom: 20px;
}
.product-features li {
    font-size: 13px;
    color: #666;
    padding: 4px 0;
    padding-left: 18px;
    position: relative;
}
.product-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #52c41a;
}
.product-btn {
    display: block;
    text-align: center;
    padding: 10px;
    border: 1px solid #1677ff;
    color: #1677ff;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
    margin-top: auto;
}
.product-btn:hover {
    background: #1677ff;
    color: #fff;
}

/* ========== 定制开发模块 ========== */
.custom-dev {
    background: #f8f9fa;
}
.custom-dev-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
}
.custom-dev-intro p {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
}
.module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}
.module-card {
    background: #fff;
    border: 2px solid #e8ebf0;
    border-radius: 12px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.module-card.selected {
    border-color: #1677ff;
    background: #f0f7ff;
}
.module-card.selected::after {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: #1677ff;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.module-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.module-icon {
    width: 40px;
    height: 40px;
    background: #e6f4ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.module-card h4 {
    font-size: 16px;
    color: #222;
}
.module-card p {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.6;
}
.module-price {
    font-size: 20px;
    color: #ff4d4f;
    font-weight: bold;
}
.module-price .unit {
    font-size: 12px;
    color: #999;
    font-weight: normal;
}
.custom-summary {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.summary-info h4 {
    font-size: 18px;
    margin-bottom: 8px;
}
.summary-info p {
    color: #666;
    font-size: 14px;
}
.summary-total {
    text-align: right;
}
.summary-total .label {
    font-size: 14px;
    color: #666;
}
.summary-total .amount {
    font-size: 36px;
    color: #ff4d4f;
    font-weight: bold;
}
.summary-total .amount .unit {
    font-size: 16px;
}
.summary-btn {
    padding: 14px 40px;
    background: #1677ff;
    color: #fff;
    border-radius: 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.summary-btn:hover {
    background: #0958d9;
}
.summary-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* 定制开发通栏按钮 */
.custom-dev-cta {
    margin-top: 30px;
    text-align: center;
}
.custom-dev-btn {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    padding: 16px 40px;
    background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
    color: #fff;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(22,119,255,0.3);
}
.custom-dev-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(22,119,255,0.4);
    color: #fff;
}

/* ========== 优势区域 ========== */
.advantages {
    background: #fff;
}
.advantage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.advantage-item {
    text-align: center;
    padding: 20px;
}
.advantage-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #1677ff, #69b1ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
}
.advantage-item h4 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #222;
}
.advantage-item p {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
}

/* ========== 数据统计 ========== */
.stats {
    background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
    color: #fff;
    padding: 50px 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}
.stat-item .number {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 8px;
}
.stat-item .label {
    font-size: 15px;
    opacity: 0.9;
}

/* ========== 页脚 ========== */
.footer {
    background: #1d2129;
    color: #86909c;
    padding: 50px 0 20px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
.footer-brand h3 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 15px;
}
.footer-brand p {
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 15px;
}
.footer-contact p {
    font-size: 13px;
    margin-bottom: 8px;
}
.footer-col h4 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 18px;
}
.footer-col li {
    margin-bottom: 10px;
}
.footer-col a {
    font-size: 13px;
    color: #86909c;
    transition: color 0.2s;
}
.footer-col a:hover {
    color: #1677ff;
}
.footer-bottom {
    border-top: 1px solid #2e3440;
    padding-top: 20px;
    text-align: center;
    font-size: 12px;
}
.footer-bottom p {
    margin-bottom: 6px;
}

/* ========== 响应式 ========== */
@media (max-width: 992px) {
    .nav { display: none; }
    .mobile-menu-btn { display: block; }
    .banner h1 { font-size: 32px; }
    .banner-inner { flex-direction: column; text-align: center; }
    .banner-image { display: none; }
    .banner-btns { justify-content: center; }
    .quick-entry-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .module-grid { grid-template-columns: repeat(2, 1fr); }
    .advantage-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .container { padding: 0 15px; }
    .header-inner { height: 60px; }
    .logo-text { font-size: 16px; }
    .btn-login, .btn-register { padding: 6px 14px; font-size: 13px; }
    .banner { padding: 50px 0; }
    .banner h1 { font-size: 24px; }
    .banner p { font-size: 15px; }
    .banner-btn-primary, .banner-btn-outline { padding: 10px 24px; font-size: 14px; }
    .quick-entry-grid { grid-template-columns: 1fr; padding: 20px; }
    .product-grid { grid-template-columns: 1fr; }
    .module-grid { grid-template-columns: 1fr; }
    .advantage-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .stat-item .number { font-size: 32px; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .section { padding: 40px 0; }
    .section-title h2 { font-size: 24px; }
    .custom-summary { flex-direction: column; text-align: center; }
    .summary-total { text-align: center; }
}

/* 移动端菜单 */
.mobile-nav {
    display: none;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 0;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 999;
}
.mobile-nav a {
    display: block;
    padding: 14px 20px;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    line-height: 1.5;
}
.mobile-nav > a:last-child { border-bottom: none; }

/* ========== 拼图滑块验证 ========== */
.slider-captcha {
    margin: 20px 0;
}
.puzzle-area {
    user-select: none;
}
.refresh-btn:hover {
    background: #fff !important;
    color: #1677ff !important;
}
.slider-track {
    position: relative;
    width: 100%;
    height: 40px;
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
}
.slider-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 40px;
    background: #1677ff;
    opacity: 0.3;
    transition: width 0.2s;
}
.slider-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #666;
    transition: left 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    z-index: 2;
}
.slider-btn:hover {
    background: #1677ff;
    color: #fff;
    border-color: #1677ff;
}
.slider-btn.success {
    background: #52c41a;
    color: #fff;
    border-color: #52c41a;
}
.slider-tip {
    text-align: center;
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
}
.slider-tip.success {
    color: #52c41a;
}
.slider-tip.fail {
    color: #ff4d4f;
}

/* ========== 拼图验证弹窗 ========== */
.captcha-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
.captcha-modal.show {
    display: block;
}
.captcha-modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}
.captcha-modal-content {
    position: relative;
    width: 380px;
    max-width: 90%;
    margin: 100px auto 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    overflow: hidden;
}
.captcha-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.captcha-close {
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}
.captcha-close:hover {
    color: #333;
}
.captcha-modal-body {
    padding: 20px;
}
.captcha-tip {
    text-align: center;
    font-size: 13px;
    color: #999;
    margin: 15px 0 10px;
}
.captcha-tip.success {
    color: #52c41a;
}
.captcha-tip.fail {
    color: #ff4d4f;
}
.captcha-track {
    position: relative;
    width: 100%;
    height: 40px;
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
}
.captcha-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 40px;
    background: #1677ff;
    opacity: 0.3;
    transition: width 0.2s;
}
.captcha-slider {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 38px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #666;
    transition: left 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    z-index: 2;
    user-select: none;
}
.captcha-slider:hover {
    background: #1677ff;
    color: #fff;
    border-color: #1677ff;
}
.captcha-slider.success {
    background: #52c41a;
    color: #fff;
    border-color: #52c41a;
}

/* ========== 导航下拉菜单 ========== */
.nav-item-dropdown {
    position: relative;
    overflow: visible;
}
.nav-item-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 160px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 8px 0;
    z-index: 1000;
}
.nav-item-dropdown:hover .dropdown-menu {
    display: block !important;
}
.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
    line-height: 1.5;
    height: auto;
}
.dropdown-menu a:hover {
    background: #f0f7ff;
    color: #1677ff;
}
@media (max-width: 768px) {
    .nav-item-dropdown {
        display: none;
    }
}

/* ========== 移动端折叠菜单 ========== */
.mobile-menu-parent {
    padding: 14px 20px !important;
    font-size: 15px !important;
    color: #333 !important;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5 !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    line-height: 1.5 !important;
    text-decoration: none !important;
}
.mobile-menu-parent:hover {
    background: #f5f7fa;
}
.mobile-arrow {
    font-size: 12px;
    color: #999;
    transition: transform 0.2s;
}
.mobile-submenu {
    display: none;
    background: #f0f4f8 !important;
    overflow: hidden;
    border-left: 3px solid #1677ff;
}
.mobile-submenu a {
    padding: 12px 20px 12px 40px !important;
    font-size: 14px !important;
    color: #555 !important;
    border-bottom: 1px solid #e4e9ef !important;
    background: #f0f4f8 !important;
}
.mobile-submenu a:hover {
    background: #e6edf5 !important;
    color: #1677ff !important;
}
}

/* ========== 登录页验证码登录图标 ========== */
.login-divider {
    display: flex;
    align-items: center;
    margin: 24px 0 16px;
    color: #999;
    font-size: 13px;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8e8e8;
}
.login-divider span {
    padding: 0 16px;
}
.login-icons {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 20px;
}
.login-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}
.login-icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.login-icon-btn .tooltip {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.login-icon-btn:hover .tooltip {
    opacity: 1;
}
.login-icon-sms {
    background: #e6f7ff;
    color: #1890ff;
    border: 1px solid #91d5ff;
}
.login-icon-email {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

/* ========== 页面Banner ========== */
.page-banner {
    background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
    color: #fff;
    padding: 60px 0;
    text-align: center;
}
.page-banner h1 {
    font-size: 32px;
    margin-bottom: 10px;
}
.page-banner p {
    font-size: 16px;
    opacity: 0.9;
}

/* ========== 产品列表页 ========== */
.product-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.product-tab {
    padding: 10px 24px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}
.product-tab:hover {
    border-color: #1677ff;
    color: #1677ff;
}
.product-tab.active {
    background: #1677ff;
    color: #fff;
    border-color: #1677ff;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.product-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
    position: relative;
}
.product-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateY(-4px);
}
.product-card.featured {
    border-color: #1677ff;
    box-shadow: 0 4px 16px rgba(22,119,255,0.15);
}
.product-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #ff4d4f;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
}
.product-card-header {
    padding: 24px;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
}
.product-card-header h3 {
    font-size: 20px;
    margin-bottom: 6px;
    color: #222;
}
.product-card-header p {
    color: #999;
    font-size: 13px;
}
.product-card-body {
    padding: 24px;
}
.product-price {
    text-align: center;
    margin-bottom: 20px;
}
.product-price .price-num {
    font-size: 36px;
    color: #1677ff;
    font-weight: bold;
}
.product-price .price-unit {
    color: #999;
    font-size: 14px;
}
.product-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.product-features li {
    padding: 8px 0;
    color: #555;
    font-size: 14px;
    border-bottom: 1px dashed #f0f0f0;
}
.product-features li:last-child {
    border-bottom: none;
}
.product-card-footer {
    padding: 20px 24px;
    text-align: center;
}

/* ========== 域名价格 ========== */
.domain-section {
    text-align: center;
}
.domain-search-box {
    background: #f5f7fa;
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 30px;
}
.domain-search-box h3 {
    font-size: 24px;
    margin-bottom: 10px;
}
.domain-search-box p {
    color: #666;
    margin-bottom: 20px;
}
.domain-price-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.domain-price-item {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}
.domain-suffix {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #1677ff;
    margin-bottom: 8px;
}
.domain-price {
    color: #666;
    font-size: 14px;
}

/* ========== SSL卡片 ========== */
.ssl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ssl-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.ssl-card.featured {
    border-color: #1677ff;
    box-shadow: 0 4px 16px rgba(22,119,255,0.15);
}
.ssl-card-header {
    padding: 24px;
    text-align: center;
    color: #fff;
}
.ssl-card-header.free { background: linear-gradient(135deg, #52c41a, #389e0d); }
.ssl-card-header.pro { background: linear-gradient(135deg, #1677ff, #0958d9); }
.ssl-card-header.ev { background: linear-gradient(135deg, #722ed1, #531dab); }
.ssl-card-header h3 { font-size: 22px; margin-bottom: 6px; }
.ssl-card-header p { opacity: 0.9; font-size: 13px; }
.ssl-card-body { padding: 24px; }
.ssl-price { text-align: center; margin-bottom: 20px; }
.ssl-price .price-num { font-size: 36px; color: #1677ff; font-weight: bold; }
.ssl-price .price-unit { color: #999; font-size: 14px; }
.ssl-price .free-text { font-size: 36px; color: #52c41a; font-weight: bold; }
.ssl-features { list-style: none; padding: 0; margin: 0; }
.ssl-features li { padding: 8px 0; color: #555; font-size: 14px; border-bottom: 1px dashed #f0f0f0; }
.ssl-features li:last-child { border-bottom: none; }
.ssl-card-footer { padding: 20px 24px; text-align: center; }

/* ========== 产品详情页 ========== */
.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 30px;
    align-items: start;
}
.config-panel {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.panel-title {
    font-size: 18px;
    color: #222;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #1677ff;
    display: inline-block;
}
.config-item {
    margin-bottom: 28px;
}
.config-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.config-label span:first-child {
    font-size: 15px;
    color: #333;
    font-weight: 500;
}
.config-value {
    color: #1677ff;
    font-weight: bold;
    font-size: 15px;
}
.config-slider input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    background: #e8e8e8;
    border-radius: 3px;
    outline: none;
}
.config-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #1677ff;
    border-radius: 50%;
    cursor: pointer;
}
.slider-marks {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12px;
    color: #999;
}
.config-desc {
    color: #999;
    font-size: 12px;
    margin-top: 8px;
}
.config-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.option-card {
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.option-card:hover {
    border-color: #91d5ff;
}
.option-card.selected {
    border-color: #1677ff;
    background: #f0f7ff;
}
.option-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.option-card input[type="radio"], .option-card input[type="checkbox"] {
    display: none;
}
.option-name {
    display: block;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}
.option-desc {
    display: block;
    font-size: 12px;
    color: #fa8c16;
    margin-top: 4px;
}
.addon-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.addon-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.addon-item:hover {
    border-color: #91d5ff;
}
.addon-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.addon-info {
    flex: 1;
}
.addon-name {
    display: block;
    font-size: 14px;
    color: #333;
}
.addon-desc {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}
.addon-price {
    color: #1677ff;
    font-weight: bold;
    font-size: 14px;
}
.addon-price.free {
    color: #52c41a;
}

/* 价格汇总 */
.price-summary {
    position: sticky;
    top: 20px;
}
.summary-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.summary-card h3 {
    font-size: 18px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.summary-list {
    margin-bottom: 16px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #555;
}
.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 2px solid #f0f0f0;
    margin-bottom: 16px;
}
.summary-total span:first-child {
    font-size: 16px;
    color: #333;
}
.total-price {
    font-size: 28px;
    color: #ff4d4f;
    font-weight: bold;
}
.summary-tip {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin-top: 12px;
    line-height: 1.8;
}

/* ========== 域名注册页 ========== */
.domain-search-section {
    margin-bottom: 40px;
}
.domain-search-box-large {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
    padding: 50px;
    border-radius: 16px;
    text-align: center;
}
.domain-search-box-large h2 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #222;
}
.domain-search-box-large p {
    color: #666;
    margin-bottom: 30px;
}
.domain-search-form {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    gap: 0;
}
.domain-search-input {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid #d9d9d9;
    border-right: none;
    border-radius: 8px 0 0 8px;
    font-size: 16px;
    outline: none;
}
.domain-search-input:focus {
    border-color: #1677ff;
}
.domain-suffix-select {
    padding: 14px 12px;
    border: 2px solid #d9d9d9;
    border-right: none;
    font-size: 16px;
    background: #fff;
    cursor: pointer;
    outline: none;
}
.domain-result-section {
    margin-bottom: 40px;
}
.domain-result-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.domain-result-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
}
.domain-result-item.available {
    border-left: 4px solid #52c41a;
}
.domain-result-item.taken {
    border-left: 4px solid #ff4d4f;
}
.result-domain {
    flex: 1;
    font-size: 18px;
    font-weight: 500;
}
.result-status {
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 4px;
}
.domain-result-item.available .result-status {
    background: #f6ffed;
    color: #52c41a;
}
.domain-result-item.taken .result-status {
    background: #fff1f0;
    color: #ff4d4f;
}
.result-price {
    font-size: 16px;
    color: #1677ff;
    font-weight: bold;
    min-width: 80px;
}
.domain-price-section {
    margin-bottom: 40px;
}
.domain-price-table {
    overflow-x: auto;
}
.domain-price-table table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}
.domain-price-table th, .domain-price-table td {
    padding: 14px 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.domain-price-table th {
    background: #fafafa;
    color: #333;
    font-weight: 600;
}
.domain-price-table tr:hover {
    background: #fafafa;
}
.btn-link {
    color: #1677ff;
    text-decoration: none;
    font-size: 14px;
}
.btn-link:hover {
    text-decoration: underline;
}

/* ========== SSL页面 ========== */
.ssl-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 50px;
}
.ssl-card-large {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s;
}
.ssl-card-large:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateY(-4px);
}
.ssl-card-large.featured {
    border-color: #1677ff;
    box-shadow: 0 4px 16px rgba(22,119,255,0.15);
}
.ssl-subtitle {
    margin: 0;
}
.ssl-card-body {
    padding: 24px;
}
.ssl-price-large {
    text-align: center;
    margin-bottom: 20px;
}
.ssl-price-large .price-num {
    font-size: 40px;
    color: #1677ff;
    font-weight: bold;
}
.ssl-price-large .price-unit {
    color: #999;
    font-size: 14px;
}
.ssl-price-large .free-text {
    font-size: 40px;
    color: #52c41a;
    font-weight: bold;
}
.ssl-features-large {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ssl-features-large li {
    padding: 10px 0;
    color: #555;
    font-size: 14px;
    border-bottom: 1px dashed #f0f0f0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ssl-features-large li:last-child {
    border-bottom: none;
}
.ssl-features-large .check {
    color: #52c41a;
    font-weight: bold;
}
.ssl-features-large .cross {
    color: #ff4d4f;
}
.ssl-features-large li.disabled {
    color: #ccc;
}
.ssl-card-footer {
    padding: 20px 24px;
}

/* 优势区块 */
.domain-advantages, .ssl-advantages {
    margin-bottom: 50px;
}
.advantage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.advantage-item {
    text-align: center;
    padding: 30px 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
}
.advantage-icon {
    font-size: 40px;
    margin-bottom: 16px;
}
.advantage-item h4 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #222;
}
.advantage-item p {
    color: #666;
    font-size: 13px;
    line-height: 1.6;
}

/* 申请流程 */
.ssl-process {
    margin-bottom: 50px;
}
.process-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.step-item {
    text-align: center;
    padding: 20px;
    flex: 1;
    min-width: 150px;
}
.step-num {
    width: 48px;
    height: 48px;
    background: #1677ff;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    margin: 0 auto 12px;
}
.step-item h4 {
    font-size: 15px;
    margin-bottom: 6px;
    color: #222;
}
.step-item p {
    color: #999;
    font-size: 12px;
}
.step-arrow {
    color: #d9d9d9;
    font-size: 24px;
    padding: 0 10px;
}

/* FAQ */
.ssl-faq {
    margin-bottom: 30px;
}
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}
.faq-item h4 {
    padding: 16px 20px;
    margin: 0;
    font-size: 15px;
    color: #333;
    cursor: pointer;
    background: #fafafa;
}
.faq-answer {
    display: none;
    padding: 16px 20px;
    color: #666;
    font-size: 14px;
    line-height: 1.8;
    border-top: 1px solid #f0f0f0;
}

.section-title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 30px;
    color: #222;
}

/* 按钮通用 */
.btn-primary {
    display: inline-block;
    padding: 10px 24px;
    background: #1677ff;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-primary:hover {
    background: #0958d9;
}
.btn-primary.btn-lg {
    padding: 14px 32px;
    font-size: 16px;
}
.btn-primary.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}
.btn-secondary {
    display: inline-block;
    padding: 10px 24px;
    background: #fff;
    color: #666;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}

/* ========== 响应式 ========== */
@media (max-width: 992px) {
    .product-grid, .ssl-grid, .ssl-products {
        grid-template-columns: repeat(2, 1fr);
    }
    .product-detail-layout {
        grid-template-columns: 1fr;
    }
    .price-summary {
        position: static;
    }
    .advantage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .domain-price-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .page-banner {
        padding: 40px 20px;
    }
    .page-banner h1 {
        font-size: 24px;
    }
    .product-grid, .ssl-grid, .ssl-products {
        grid-template-columns: 1fr;
    }
    .config-panel {
        padding: 20px;
    }
    .domain-search-box-large {
        padding: 30px 20px;
    }
    .domain-search-form {
        flex-direction: column;
        gap: 10px;
    }
    .domain-search-input, .domain-suffix-select {
        border-radius: 8px;
        border-right: 2px solid #d9d9d9;
    }
    .advantage-grid {
        grid-template-columns: 1fr;
    }
    .process-steps {
        flex-direction: column;
    }
    .step-arrow {
        transform: rotate(90deg);
    }
    .domain-price-grid {
        grid-template-columns: 1fr;
    }
    .product-tabs {
        gap: 6px;
    }
    .product-tab {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* ========== 产品分类入口 ========== */
.product-categories {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 50px;
}
.product-cat-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    display: block;
}
.product-cat-card:hover {
    border-color: #1677ff;
    box-shadow: 0 4px 16px rgba(22,119,255,0.15);
    transform: translateY(-4px);
}
.cat-icon {
    font-size: 36px;
    margin-bottom: 12px;
}
.product-cat-card h3 {
    font-size: 16px;
    color: #222;
    margin-bottom: 8px;
}
.product-cat-card p {
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
    line-height: 1.5;
}
.cat-link {
    font-size: 13px;
    color: #1677ff;
}
.section-block {
    margin-bottom: 50px;
}
.section-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
    font-size: 14px;
}

/* ========== 配置页大滑块 ========== */
.config-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    margin-right: 8px;
}
.config-icon.cpu { background: #1677ff; }
.config-icon.memory { background: #52c41a; }
.config-icon.storage { background: #fa8c16; }
.config-icon.bandwidth { background: #722ed1; }
.config-slider-large input[type="range"] {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    background: linear-gradient(to right, #1677ff 0%, #1677ff var(--progress, 50%), #e8e8e8 var(--progress, 50%), #e8e8e8 100%);
    border-radius: 4px;
    outline: none;
}
.config-slider-large input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: #fff;
    border: 3px solid #1677ff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.config-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background: #fff;
    cursor: pointer;
}
.config-select:focus {
    border-color: #1677ff;
}

/* ========== 服务器租用页 ========== */
.server-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 40px;
}
.server-tab {
    padding: 12px 40px;
    border: 1px solid #d9d9d9;
    background: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}
.server-tab:first-child {
    border-radius: 8px 0 0 8px;
}
.server-tab:last-child {
    border-radius: 0 8px 8px 0;
    border-left: none;
}
.server-tab.active {
    background: #1677ff;
    color: #fff;
    border-color: #1677ff;
}
.server-advantages {
    margin-top: 50px;
}

/* 弹窗 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.modal-content {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    overflow: hidden;
}
.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3 {
    margin: 0;
    font-size: 18px;
}
.modal-close {
    font-size: 24px;
    cursor: pointer;
    color: #999;
    line-height: 1;
}
.modal-body {
    padding: 24px 20px;
}
.contact-info {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}
.contact-info p {
    margin: 8px 0;
    color: #555;
    font-size: 14px;
}

/* ========== 域名价格表美化 ========== */
.domain-search-large {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
    padding: 50px;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 40px;
}
.domain-search-large h2 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #222;
}
.domain-search-large p {
    color: #666;
    margin-bottom: 30px;
}
.domain-search-form-large {
    display: flex;
    max-width: 650px;
    margin: 0 auto;
}
.domain-input-large {
    flex: 1;
    padding: 16px 20px;
    border: 2px solid #d9d9d9;
    border-right: none;
    border-radius: 8px 0 0 8px;
    font-size: 16px;
    outline: none;
}
.domain-input-large:focus {
    border-color: #1677ff;
}
.domain-suffix-large {
    padding: 16px 12px;
    border: 2px solid #d9d9d9;
    border-right: none;
    font-size: 16px;
    background: #fff;
    cursor: pointer;
    outline: none;
}
.domain-price-table-wrap {
    overflow-x: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.domain-price-table-beautiful {
    width: 100%;
    border-collapse: collapse;
}
.domain-price-table-beautiful th {
    background: #fafafa;
    padding: 16px 20px;
    text-align: center;
    font-size: 14px;
    color: #333;
    font-weight: 600;
    border-bottom: 2px solid #1677ff;
}
.domain-price-table-beautiful td {
    padding: 16px 20px;
    text-align: center;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
}
.domain-price-table-beautiful tr:hover {
    background: #fafbff;
}
.domain-price-table-beautiful tr.hot-row {
    background: #fffbe6;
}
.suffix-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
}
.suffix-badge.com { background: #e6f7ff; color: #1677ff; }
.suffix-badge.cn { background: #f6ffed; color: #52c41a; }
.suffix-badge.net { background: #fff7e6; color: #fa8c16; }
.suffix-badge.org { background: #f9f0ff; color: #722ed1; }
.suffix-badge.comcn { background: #fff1f0; color: #f5222d; }
.suffix-badge.netcn { background: #e6fffb; color: #13c2c2; }
.hot-tag {
    display: inline-block;
    background: #ff4d4f;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
}
.price-text {
    color: #ff4d4f;
    font-weight: bold;
    font-size: 16px;
}
.price-text.hot {
    color: #52c41a;
}
.result-title {
    font-size: 20px;
    margin-bottom: 20px;
    color: #222;
}

/* ========== SSL证书新样式 ========== */
.ssl-standard-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 40px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ssl-standard-tab {
    flex: 1;
    max-width: 400px;
    padding: 18px;
    border: none;
    background: #f5f5f5;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    color: #666;
}
.ssl-standard-tab.active {
    background: #1677ff;
    color: #fff;
}
.ssl-card-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}
.ssl-product-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 24px 20px;
    position: relative;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}
.ssl-product-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateY(-4px);
}
.ssl-product-card.featured {
    border-color: #1677ff;
    box-shadow: 0 4px 16px rgba(22,119,255,0.15);
}
.hot-ribbon {
    position: absolute;
    top: 12px;
    right: -28px;
    background: #ff4d4f;
    color: #fff;
    padding: 4px 32px;
    font-size: 12px;
    transform: rotate(45deg);
}
.ssl-product-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.ssl-type-tag {
    background: #f0f0f0;
    color: #666;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}
.ssl-type-tag.gm {
    background: #fff7e6;
    color: #fa8c16;
}
.ssl-level {
    font-size: 16px;
    font-weight: bold;
    color: #222;
}
.ssl-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.brand-logo {
    background: #1677ff;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}
.brand-logo.gm {
    background: #fa8c16;
}
.brand-name {
    color: #666;
    font-size: 13px;
}
.ssl-product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.spec-item {
    background: #fafafa;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}
.spec-value {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #222;
    margin-bottom: 4px;
}
.spec-label {
    display: block;
    font-size: 11px;
    color: #999;
}
.ssl-product-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    flex: 1;
}
.ssl-product-features li {
    padding: 6px 0;
    font-size: 13px;
    color: #555;
}
.ssl-product-price {
    text-align: center;
    margin-bottom: 16px;
    padding: 12px 0;
    border-top: 1px dashed #f0f0f0;
}
.ssl-product-price .price-num {
    font-size: 32px;
    color: #ff4d4f;
    font-weight: bold;
}
.ssl-product-price .price-unit {
    color: #999;
    font-size: 14px;
}
.ssl-product-price .price-tag.free {
    font-size: 32px;
    color: #52c41a;
    font-weight: bold;
}
.gm-notice {
    background: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 30px;
    color: #874d00;
    font-size: 14px;
}
.ssl-advantages-section {
    margin-top: 40px;
}

/* ========== 视频转码页 ========== */
.video-intro {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    margin-bottom: 50px;
    align-items: start;
}
.intro-text h2 {
    font-size: 28px;
    margin-bottom: 16px;
    color: #222;
}
.intro-text > p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 15px;
}
.intro-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.intro-feature {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.feature-icon {
    font-size: 28px;
    flex-shrink: 0;
}
.intro-feature h4 {
    font-size: 15px;
    margin-bottom: 4px;
    color: #222;
}
.intro-feature p {
    font-size: 13px;
    color: #999;
    line-height: 1.5;
}
.cta-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 30px 24px;
    text-align: center;
    position: sticky;
    top: 20px;
}
.cta-card h3 {
    font-size: 20px;
    margin-bottom: 16px;
    color: #222;
}
.cta-price {
    font-size: 42px;
    color: #1677ff;
    font-weight: bold;
    margin-bottom: 8px;
}
.cta-price span {
    font-size: 16px;
    color: #999;
    font-weight: normal;
}
.cta-desc {
    color: #999;
    font-size: 13px;
    margin-bottom: 20px;
}
.trial-note {
    color: #52c41a;
    font-size: 12px;
    margin-top: 12px;
}
.video-features {
    margin-bottom: 50px;
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.feature-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 30px 24px;
    text-align: center;
    transition: all 0.3s;
}
.feature-card:hover {
    border-color: #1677ff;
    box-shadow: 0 4px 16px rgba(22,119,255,0.1);
}
.feature-icon-large {
    font-size: 40px;
    margin-bottom: 16px;
}
.feature-card h4 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #222;
}
.feature-card p {
    font-size: 13px;
    color: #999;
    line-height: 1.6;
}
.api-section {
    margin-bottom: 50px;
}
.api-code-block {
    background: #1e1e1e;
    border-radius: 12px;
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
}
.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #2d2d2d;
    color: #ccc;
    font-size: 13px;
}
.copy-btn {
    cursor: pointer;
    color: #1677ff;
}
.code-content {
    padding: 20px;
    margin: 0;
    overflow-x: auto;
}
.code-content code {
    color: #d4d4d4;
    font-size: 13px;
    line-height: 1.6;
    font-family: 'Courier New', monospace;
}
.api-desc {
    text-align: center;
    color: #666;
    margin-top: 16px;
    font-size: 14px;
}
.billing-section {
    margin-bottom: 50px;
}
.billing-table-wrap {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.billing-table {
    width: 100%;
    border-collapse: collapse;
}
.billing-table th {
    background: #1677ff;
    color: #fff;
    padding: 14px 20px;
    text-align: center;
    font-size: 14px;
}
.billing-table td {
    padding: 14px 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #555;
}
.billing-table tr:hover {
    background: #fafbff;
}
.billing-note {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin-top: 12px;
}
.usecase-section {
    margin-bottom: 30px;
}
.usecase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.usecase-item {
    text-align: center;
    padding: 30px 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
}
.usecase-icon {
    font-size: 36px;
    margin-bottom: 12px;
}
.usecase-item h4 {
    font-size: 15px;
    margin-bottom: 8px;
    color: #222;
}
.usecase-item p {
    font-size: 13px;
    color: #999;
    line-height: 1.5;
}

/* ========== 新页面响应式 ========== */
@media (max-width: 992px) {
    .product-categories {
        grid-template-columns: repeat(3, 1fr);
    }
    .ssl-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .video-intro {
        grid-template-columns: 1fr;
    }
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .usecase-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .product-categories {
        grid-template-columns: repeat(2, 1fr);
    }
    .ssl-card-grid {
        grid-template-columns: 1fr;
    }
    .intro-features {
        grid-template-columns: 1fr;
    }
    .feature-grid {
        grid-template-columns: 1fr;
    }
    .usecase-grid {
        grid-template-columns: 1fr;
    }
    .domain-search-large {
        padding: 30px 20px;
    }
    .domain-search-form-large {
        flex-direction: column;
        gap: 10px;
    }
    .domain-input-large, .domain-suffix-large {
        border-radius: 8px;
        border-right: 2px solid #d9d9d9;
    }
    .server-tab {
        padding: 12px 20px;
        font-size: 14px;
    }
    .ssl-standard-tab {
        font-size: 14px;
        padding: 14px;
    }
}

/* ========== 域名后缀卡片 ========== */
.domain-suffix-section {
    margin-bottom: 50px;
}
.domain-suffix-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.domain-suffix-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    transition: all 0.3s;
}
.domain-suffix-card:hover {
    border-color: #1677ff;
    box-shadow: 0 4px 16px rgba(22,119,255,0.15);
    transform: translateY(-4px);
}
.suffix-logo {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 16px;
    line-height: 1;
}
.suffix-logo.com { color: #1677ff; }
.suffix-logo.net { color: #fa8c16; }
.suffix-logo.cn { color: #52c41a; }
.suffix-logo.gov { color: #f5222d; }
.suffix-logo.top { color: #722ed1; }
.suffix-info h4 {
    font-size: 14px;
    color: #333;
    margin-bottom: 6px;
}
.suffix-info p {
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
    line-height: 1.5;
    min-height: 36px;
}
.suffix-price {
    font-size: 24px;
    color: #ff4d4f;
    font-weight: bold;
    margin-bottom: 12px;
}
.suffix-price span {
    font-size: 12px;
    color: #999;
    font-weight: normal;
}
.btn-sm {
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 6px;
}

@media (max-width: 992px) {
    .domain-suffix-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .domain-suffix-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== 开发与运维页（整体比SSL小35%） ========== */
.devops-tabs {
    display: flex;
    justify-content: flex-start;
    gap: 0;
    margin-bottom: 30px;
}
.devops-tab {
    padding: 10px 28px;
    border: 1px solid #d9d9d9;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;
}
.devops-tab:first-child {
    border-radius: 6px 0 0 6px;
}
.devops-tab:last-child {
    border-radius: 0 6px 6px 0;
    border-left: none;
}
.devops-tab.active {
    background: #1677ff;
    color: #fff;
    border-color: #1677ff;
}
.dev-intro, .ops-intro {
    margin-bottom: 24px;
}
.dev-intro h3, .ops-intro h3 {
    font-size: 18px;
    margin-bottom: 6px;
    color: #222;
}
.dev-intro p, .ops-intro p {
    color: #666;
    font-size: 13px;
}

/* 定制开发布局 */
.dev-modules-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
}
.dev-module-category {
    margin-bottom: 20px;
}
.dev-module-category h4 {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #1677ff;
    display: inline-block;
}
.dev-module-item {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}
.dev-module-item:hover {
    border-color: #1677ff;
    background: #f0f7ff;
}
.dev-module-item.selected {
    border-color: #1677ff;
    background: #e6f0ff;
}
.dev-module-info {
    flex: 1;
}
.dev-module-info h5 {
    font-size: 13px;
    color: #222;
    margin-bottom: 2px;
}
.dev-module-info p {
    font-size: 11px;
    color: #999;
    margin: 0;
}
.dev-module-meta {
    text-align: right;
    margin-left: 12px;
    flex-shrink: 0;
}
.dev-module-price {
    font-size: 15px;
    color: #ff4d4f;
    font-weight: bold;
    display: block;
}
.dev-module-days {
    font-size: 11px;
    color: #999;
    display: block;
    margin-top: 2px;
}
.dev-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.dev-selected-count {
    font-size: 12px;
    color: #666;
    margin-left: auto;
}
.dev-selected-count span {
    color: #1677ff;
    font-weight: bold;
}

/* 价格汇总 */
.dev-price-summary {
    position: sticky;
    top: 20px;
}
.dev-summary-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 18px;
}
.dev-summary-card h4 {
    font-size: 15px;
    margin-bottom: 12px;
    color: #222;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.dev-selected-list {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 12px;
}
.dev-selected-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 12px;
    color: #555;
    border-bottom: 1px dashed #f0f0f0;
}
.dev-selected-meta {
    color: #999;
    font-size: 11px;
    text-align: right;
}
.dev-empty-tip {
    color: #bbb;
    font-size: 12px;
    text-align: center;
    padding: 20px 0;
}
.dev-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 2px solid #f0f0f0;
    margin-bottom: 12px;
}
.dev-total-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}
.dev-total-days {
    font-size: 11px;
    color: #999;
}
.dev-total-days span {
    color: #1677ff;
    font-weight: bold;
}
.dev-total-price {
    font-size: 22px;
    color: #ff4d4f;
    font-weight: bold;
}
.dev-summary-tip {
    font-size: 11px;
    color: #999;
    margin-top: 10px;
    line-height: 1.6;
}

/* 运维服务 */
.ops-service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}
.ops-service-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 20px 16px;
    text-align: center;
    position: relative;
    transition: all 0.3s;
}
.ops-service-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}
.ops-service-card.featured {
    border-color: #1677ff;
    box-shadow: 0 2px 12px rgba(22,119,255,0.15);
}
.ops-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff4d4f;
    color: #fff;
    font-size: 11px;
    padding: 2px 12px;
    border-radius: 10px;
}
.ops-icon {
    font-size: 32px;
    margin-bottom: 10px;
}
.ops-service-card h4 {
    font-size: 15px;
    margin-bottom: 10px;
    color: #222;
}
.ops-service-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 14px 0;
    text-align: left;
}
.ops-service-card li {
    font-size: 12px;
    color: #666;
    padding: 4px 0;
    padding-left: 16px;
    position: relative;
}
.ops-service-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #52c41a;
    font-size: 11px;
}
.ops-price {
    font-size: 22px;
    color: #1677ff;
    font-weight: bold;
}
.ops-price span {
    font-size: 12px;
    color: #999;
    font-weight: normal;
}
.ops-cta {
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
    border-radius: 12px;
}
.ops-cta h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #222;
}
.ops-cta p {
    color: #666;
    margin-bottom: 16px;
    font-size: 13px;
}

@media (max-width: 992px) {
    .dev-modules-layout {
        grid-template-columns: 1fr;
    }
    .ops-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .ops-service-grid {
        grid-template-columns: 1fr;
    }
    .devops-tab {
        padding: 8px 18px;
        font-size: 13px;
    }
}