/* ============================================================
   坦途 Tantu — Custom Styles
   设计基调：稳重专业 · 金色点缀 · 现代极简
   ============================================================ */

/* ---- CSS Variables ---- */
:root {
    --cc-navy: #2a3a56;
    --cc-navy-light: #3a4f73;
    --cc-navy-dark: #1a2538;
    --cc-gold: #c9a96e;
    --cc-gold-dark: #b8943a;
    --cc-gold-darker: #96732e;
    --cc-cream: #fdfbf7;
    --cc-cream-dark: #faf5eb;
    --cc-ink: #1a1e2b;
    --cc-radius: 1.25rem;
    --cc-transition: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(26,30,43,0.12); border-radius: 3px; }

/* ---- Selection ---- */
::selection { background: rgba(26,37,56,0.12); color: var(--cc-ink); }

/* ============================================================
   Navigation
   ============================================================ */
.cc-nav {
    background: rgba(253,251,247,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: all var(--cc-transition);
}

.cc-nav-scrolled {
    background: rgba(253,251,247,0.96);
    border-bottom: 1px solid rgba(26,30,43,0.06);
    box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}

.cc-logo-mark {
    background: linear-gradient(135deg, var(--cc-navy-dark) 0%, var(--cc-navy) 100%);
    box-shadow: 0 4px 12px rgba(26,37,56,0.25);
}

.cc-nav-link {
    position: relative;
    color: rgba(26,30,43,0.7);
    font-family: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color var(--cc-transition);
}

.cc-nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--cc-gold-dark);
    transition: width 0.25s;
}

.cc-nav-link:hover { color: var(--cc-gold-darker); }
.cc-nav-link:hover::after { width: 100%; }

/* Buttons */
.cc-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(26,30,43,0.18);
    color: var(--cc-navy);
    border-radius: 9999px;
    font-weight: 500;
    transition: all 0.25s;
}

.cc-btn-outline:hover {
    border-color: var(--cc-gold-dark);
    color: var(--cc-gold-darker);
}

.cc-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cc-navy-dark) 0%, var(--cc-navy) 100%);
    color: #fdfbf7;
    border-radius: 9999px;
    font-weight: 500;
    transition: all 0.25s;
}

.cc-btn-primary:hover {
    background: linear-gradient(135deg, var(--cc-navy) 0%, var(--cc-navy-light) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(26,37,56,0.2);
}

.cc-btn-submit {
    background: var(--cc-gold-dark);
    color: #fdfbf7;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(184,148,58,0.25);
}

.cc-btn-submit:hover {
    background: var(--cc-gold-darker);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(184,148,58,0.35);
}

/* Mobile links */
.cc-mobile-link {
    display: block;
    color: var(--cc-ink);
    transition: color var(--cc-transition);
    font-family: 'Noto Serif SC', 'Source Han Serif SC', serif;
}

.cc-mobile-link:hover { color: var(--cc-gold-dark); }

/* ============================================================
   Hero Section
   ============================================================ */
.cc-hero-badge {
    background: rgba(184,148,58,0.06);
    border: 1px solid rgba(184,148,58,0.15);
}

/* ============================================================
   Section Tags
   ============================================================ */
.cc-section-tag {
    display: inline-block;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cc-gold-darker);
    padding: 4px 14px;
    border: 1px solid rgba(184,148,58,0.25);
    border-radius: 9999px;
    font-weight: 500;
}

/* ============================================================
   Cards — Positioning / Features
   ============================================================ */
.cc-card {
    background: #fff;
    border: 1px solid rgba(26,30,43,0.06);
    border-radius: 16px;
    transition: all 0.3s;
}

.cc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.05);
    border-color: rgba(184,148,58,0.2);
}

.cc-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(184,148,58,0.08), rgba(184,148,58,0.03));
    border-radius: 16px;
    color: var(--cc-gold-darker);
}

/* ============================================================
   Divider
   ============================================================ */
.cc-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(26,30,43,0.06), transparent);
}

/* ============================================================
   Moat Cards
   ============================================================ */
.cc-moat-card {
    background: #fff;
    border: 1px solid rgba(26,30,43,0.06);
    border-radius: 16px;
    transition: all 0.3s;
}

.cc-moat-card:hover {
    border-color: rgba(42,58,86,0.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.04);
}

.cc-moat-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Pricing Cards
   ============================================================ */
.cc-pricing-card {
    background: #fff;
    border: 1px solid rgba(26,30,43,0.06);
    border-radius: 18px;
    transition: all 0.3s;
}

.cc-pricing-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}

.cc-pricing-card.featured {
    border-color: rgba(184,148,58,0.3);
    background: rgba(184,148,58,0.03);
}

/* ============================================================
   Product Cards
   ============================================================ */
.cc-product-card {
    background: #fff;
    border: 1px solid rgba(26,30,43,0.06);
    border-radius: 20px;
    transition: all 0.3s;
}

.cc-product-card:hover {
    border-color: rgba(184,148,58,0.15);
    box-shadow: 0 8px 32px rgba(0,0,0,0.04);
}

.cc-product-number {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    line-height: 1;
}

.cc-product-badge {
    display: inline-block;
    font-family: system-ui, -apple-system, sans-serif;
    background: rgba(42,58,86,0.06);
    color: var(--cc-navy-light);
    font-weight: 500;
}

.cc-product-badge-gold {
    background: rgba(184,148,58,0.08);
    color: var(--cc-gold-darker);
}

/* Sub-cards */
.cc-sub-card {
    background: rgba(26,37,56,0.02);
    border: 1px solid rgba(26,37,56,0.04);
    transition: all 0.25s;
}

.cc-sub-card:hover {
    background: rgba(26,37,56,0.04);
}

.cc-sub-card-gold {
    background: rgba(184,148,58,0.03);
    border: 1px solid rgba(184,148,58,0.08);
}

.cc-sub-card-gold:hover {
    background: rgba(184,148,58,0.06);
}

/* ============================================================
   Notes
   ============================================================ */
.cc-note {
    background: rgba(26,37,56,0.02);
    border: 1px solid rgba(26,37,56,0.05);
    border-radius: 14px;
}

.cc-note-icon {
    background: rgba(184,148,58,0.08);
    color: var(--cc-gold-darker);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Roadmap Steps / Timeline
   ============================================================ */
.cc-step-number {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    line-height: 0.8;
    pointer-events: none;
    user-select: none;
}

.cc-step-dot {
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 0 0 6px rgba(184,148,58,0.08);
}

/* ============================================================
   Form Inputs
   ============================================================ */
.cc-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(184,148,58,0.1);
}

/* ============================================================
   Push Demo Block
   ============================================================ */
.cc-push-demo {
    background: #1a1e2b;
    border-radius: 14px;
    padding: 22px 26px;
    font-family: "SF Mono","Cascadia Code","Consolas",monospace;
    font-size: 0.82rem;
    line-height: 2;
    color: #c8cdd6;
    overflow-x: auto;
}

/* ============================================================
   Table
   ============================================================ */
.cc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.cc-table thead { background: rgba(26,37,56,0.03); }
.cc-table th {
    text-align: left;
    padding: 10px 16px;
    color: var(--cc-navy-light);
    font-weight: 600;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}
.cc-table td {
    padding: 10px 16px;
    color: #4a5568;
    border-bottom: 1px solid rgba(26,37,56,0.04);
}
.cc-table tr:hover td { background: rgba(26,37,56,0.01); }
.cc-table .highlight-row td { color: var(--cc-gold-darker); font-weight: 600; }

/* ============================================================
   Pulse Dot Animation
   ============================================================ */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* ============================================================
   Fade-in Animation for Cards
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.cc-card,
.cc-moat-card,
.cc-pricing-card,
.cc-product-card { animation: fadeInUp 0.6s ease both; }

.cc-card:nth-child(2) { animation-delay: 0.1s; }
.cc-card:nth-child(3) { animation-delay: 0.2s; }
.cc-moat-card:nth-child(2) { animation-delay: 0.1s; }
.cc-moat-card:nth-child(3) { animation-delay: 0.2s; }

/* ============================================================
   Responsive: Mobile adjustments
   ============================================================ */
@media (max-width: 767px) {
    .cc-card,
    .cc-moat-card,
    .cc-pricing-card { border-radius: 1rem; }
    .cc-product-number { font-size: 3rem; }
    .cc-step-number { font-size: 3.5rem; }
}

/* ============================================================
   Print styles
   ============================================================ */
@media print {
    .cc-nav { position: static; }
    .cc-btn-outline,
    .cc-btn-primary,
    .cc-btn-submit { display: none; }
    body { font-size: 11pt; }
}