/*
Theme Name: Haohan Site 3
Version: 1.0
Author: Bingxian
Description: 浩瀚购销商城三号官网 - 暗夜交易终端风格
*/
:root {
  --bg-primary: #0A0A0A;
  --bg-secondary: #111111;
  --bg-card: #1A1A1A;
  --bg-card-hover: #222222;
  --text-primary: #E8E8E8;
  --text-secondary: #999999;
  --text-muted: #666666;
  --gold: #C99A2E;
  --gold-light: #E0B84A;
  --wine: #8B2252;
  --border: #2A2A2A;
  --border-light: #333333;
  --container: 1200px;
  --nav-height: 64px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg-primary); color:var(--text-primary); line-height:1.6; }
a { color:var(--gold); text-decoration:none; transition:color 0.2s; }
a:hover { color:var(--gold-light); }
img { max-width:100%; height:auto; }
.container { max-width:var(--container); margin:0 auto; padding:0 20px; }

/* Nav */
.hh-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(10,10,10,0.95); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); height:var(--nav-height);
}
.hh-nav .container { display:flex; align-items:center; justify-content:space-between; height:100%; }
.hh-nav .logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; color:var(--gold); }
.hh-nav .logo span { color:var(--text-primary); font-size:14px; font-weight:400; }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { color:var(--text-secondary); font-size:14px; font-weight:500; transition:color 0.2s; }
.nav-links a:hover,.nav-links a.active { color:var(--gold); }

.mobile-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; z-index:1001; position:relative; }
.mobile-toggle span { width:24px; height:2px; background:#E8E8E8; transition:0.3s; border-radius:1px; display:block; }

.mobile-nav {
  display:none; position:fixed; top:var(--nav-height); left:0; right:0;
  background:rgba(10,10,10,0.98); border-bottom:1px solid var(--border);
  padding:20px; z-index:999;
}
.mobile-nav a { display:block; padding:12px 0; color:var(--text-secondary); border-bottom:1px solid var(--border); font-size:15px; }
.mobile-nav a:hover { color:var(--gold); }
.mobile-nav.open { display:block; z-index:1000; }

/* Ticker */
.ticker { background:var(--bg-secondary); border-bottom:1px solid var(--border); padding:8px 0; overflow:hidden; margin-top:var(--nav-height); }
.ticker-items { display:flex; gap:40px; animation:tickerScroll 30s linear infinite; }
.ticker-item { display:flex; align-items:center; gap:8px; white-space:nowrap; font-size:13px; }
.ticker-item .name { color:var(--text-secondary); }
.ticker-item .price { color:var(--text-primary); font-weight:600; }
.ticker-item .change { font-size:12px; font-weight:600; }
.ticker-item .change.up { color:#00E6A7; }
.ticker-item .change.down { color:#FF4757; }
@keyframes tickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Hero */
.hero { padding:140px 0 80px; background:linear-gradient(180deg,#0A0A0A 0%,#111111 100%); position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:radial-gradient(ellipse at 30% 20%,rgba(201,154,46,0.06) 0%,transparent 60%); }
.hero-content { position:relative; z-index:1; }
.hero h1 { font-size:44px; font-weight:700; margin-bottom:16px; line-height:1.3; }
.hero .gold { color:var(--gold); }
.hero .subtitle { font-size:17px; color:var(--text-secondary); margin-bottom:32px; max-width:600px; line-height:1.8; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; }

/* Buttons */
.btn-primary,.btn-outline { display:inline-block; padding:14px 32px; border-radius:6px; font-size:15px; font-weight:600; cursor:pointer; transition:all 0.2s; border:none; }
.btn-primary { background:var(--gold); color:var(--bg-primary); }
.btn-primary:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn-outline { background:transparent; border:1px solid var(--gold); color:var(--gold); }
.btn-outline:hover { background:rgba(201,154,46,0.1); }
.btn { display:inline-block; padding:10px 24px; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; border:none; transition:all 0.2s; }
.btn-primary-lg { background:var(--gold); color:var(--bg-primary); padding:14px 32px; font-size:15px; }
.btn-outline-lg { background:transparent; border:1px solid var(--gold); color:var(--gold); padding:14px 32px; font-size:15px; }

/* Section */
.section { padding:64px 20px; }
.section-title { font-size:28px; font-weight:700; margin-bottom:8px; text-align:center; }
.section-title .accent { color:var(--gold); }
.section-desc { text-align:center; color:var(--text-secondary); margin-bottom:40px; font-size:15px; }

/* Product Grid */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.product-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:32px 24px; text-align:center; transition:all 0.3s; }
.product-card:hover { border-color:var(--gold); transform:translateY(-4px); box-shadow:0 8px 32px rgba(201,154,46,0.1); }
.product-icon { font-size:48px; display:block; margin-bottom:16px; }
.product-card h3 { font-size:20px; font-weight:600; margin-bottom:8px; }
.product-card .price { font-size:28px; font-weight:700; color:var(--gold); margin-bottom:4px; }
.product-card .price .unit { font-size:14px; color:var(--text-secondary); font-weight:400; }
.product-card .desc { font-size:13px; color:var(--text-secondary); margin-top:8px; }

/* Trust */
.trust-bar { padding:40px 0; background:var(--bg-secondary); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-items { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.trust-item .num { font-size:24px; font-weight:700; color:var(--gold); margin-bottom:4px; }
.trust-item .label { font-size:13px; color:var(--text-secondary); }

/* News */
.news-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.news-item { display:flex; gap:16px; padding:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; transition:border-color 0.2s; }
.news-item:hover { border-color:var(--gold); }
.news-thumb { width:120px; min-width:120px; height:80px; border-radius:6px; background:var(--bg-card-hover); display:flex; align-items:center; justify-content:center; font-size:28px; }
.news-info h4 { font-size:15px; font-weight:600; margin-bottom:6px; line-height:1.5; }
.news-info h4 a { color:var(--text-primary); }
.news-info p { font-size:13px; color:var(--text-secondary); }

/* CTA */
.cta-section { padding:80px 0; background:linear-gradient(135deg,rgba(139,34,82,0.1),rgba(201,154,46,0.06)); border-top:1px solid var(--border); text-align:center; }
.cta-section h2 { font-size:32px; font-weight:700; margin-bottom:12px; }
.cta-section p { color:var(--text-secondary); margin-bottom:24px; }

/* Footer */
.hh-footer { background:var(--bg-secondary); border-top:1px solid var(--border); padding:48px 0 24px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; margin-bottom:32px; }
.footer-brand h3 { font-size:18px; font-weight:700; color:var(--gold); margin-bottom:8px; }
.footer-brand p { font-size:13px; color:var(--text-secondary); line-height:1.7; }
.footer-col h4 { font-size:14px; font-weight:600; margin-bottom:12px; color:var(--text-primary); }
.footer-col ul { list-style:none; }
.footer-col ul li a { font-size:13px; color:var(--text-secondary); display:block; padding:4px 0; }
.footer-col ul li a:hover { color:var(--gold); }
.footer-bottom { border-top:1px solid var(--border); padding-top:16px; display:flex; justify-content:space-between; font-size:12px; color:var(--text-muted); }

/* Page Content */
.page-content { padding:calc(var(--nav-height) + 40px) 20px 60px; min-height:60vh; }
.breadcrumb { padding:calc(var(--nav-height) + 16px) 20px 16px; max-width:var(--container); margin:0 auto; f

... [OUTPUT TRUNCATED - 2577 chars omitted out of 22577 total] ...

:16px; }
.download-card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
.download-card p { font-size:13px; color:var(--text-secondary); margin-bottom:16px; }

/* Text center */
.text-center { text-align:center; }
.mt-20 { margin-top:20px; }

/* Dropdown Menu */
.nav-dropdown { position:relative; }
.nav-dropdown .dropdown-toggle { cursor:pointer; }
.nav-dropdown .dropdown-menu {
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:rgba(26,26,26,0.98); border:1px solid var(--border); border-radius:8px;
  padding:8px 0; min-width:160px; z-index:1001; box-shadow:0 8px 24px rgba(0,0,0,0.4);
  opacity:0; visibility:hidden; transition:opacity 0.2s, visibility 0.2s;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.open .dropdown-menu { display:block; opacity:1; visibility:visible; }
.dropdown-menu a {
  display:block; padding:10px 20px; font-size:13px; color:var(--text-secondary);
  white-space:nowrap; transition:all 0.15s;
}
.dropdown-menu a:hover { color:var(--gold); background:rgba(201,154,46,0.08); }

/* News Dual Column (参考1号站) */
.news-dual { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.news-column h3 { font-size:13px; color:var(--text-muted); letter-spacing:2px; margin-bottom:16px; text-transform:uppercase; }
.news-list-item {
  display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--border);
  transition:border-color 0.2s;
}
.news-list-item:hover { border-color:var(--gold); }
.news-date-block {
  min-width:56px; text-align:center; flex-shrink:0;
}
.news-date-block .day { font-size:28px; font-weight:700; color:var(--gold); line-height:1; }
.news-date-block .month { font-size:11px; color:var(--text-muted); margin-top:4px; }
.news-list-item h4 { font-size:14px; font-weight:600; line-height:1.6; margin-bottom:4px; }
.news-list-item h4 a { color:var(--text-primary); transition:color 0.2s; }
.news-list-item h4 a:hover { color:var(--gold); }
.news-list-item p { font-size:12px; color:var(--text-muted); line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }

/* Download Cards Enhanced */
.download-trio { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:900px; margin:0 auto; }
.download-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:32px 24px; text-align:center; transition:all 0.3s; }
.download-card:hover { border-color:var(--gold); transform:translateY(-4px); box-shadow:0 8px 24px rgba(201,154,46,0.1); }
.download-card .dl-icon { width:64px; height:64px; margin:0 auto 16px; border-radius:16px; background:linear-gradient(135deg,rgba(201,154,46,0.12),rgba(139,34,82,0.08)); display:flex; align-items:center; justify-content:center; }
.download-card .dl-icon svg { width:32px; height:32px; fill:var(--gold); }
.download-card h3 { font-size:18px; font-weight:600; margin-bottom:6px; }
.download-card .dl-sub { font-size:13px; color:var(--text-secondary); margin-bottom:16px; }
.download-card .dl-features { font-size:12px; color:var(--text-muted); margin-bottom:20px; line-height:1.8; }
.download-card .btn-primary-lg { width:100%; }

/* Mobile */
@media (max-width: 768px) {
  .nav-dropdown .dropdown-menu { display:none !important; }
  .news-dual { grid-template-columns:1fr; gap:16px; }
  .download-trio { grid-template-columns:1fr; }
}

@media (max-width: 768px) {
  .nav-links { display:none !important; }
  .mobile-toggle { display:flex !important; }
  .mobile-nav.open { display:block; }
  .hero { padding:110px 0 50px; }
  .hero h1 { font-size:28px; }
  .hero .subtitle { font-size:15px; }
  .btn-primary,.btn-outline { padding:12px 24px; font-size:14px; }
  .product-grid { grid-template-columns:1fr; gap:16px; }
  .product-card { padding:24px 20px; }
  .trust-items { grid-template-columns:repeat(2,1fr); gap:20px; }
  .trust-item .num { font-size:22px; }
  .news-grid { grid-template-columns:1fr; }
  .product-detail { grid-template-columns:1fr; gap:24px; }
  .product-gallery { padding:32px; }
  .product-gallery-glyph { font-size:80px; }
  .product-name { font-size:22px; }
  .product-price { font-size:28px; }
  .highlights-grid { grid-template-columns:1fr; gap:16px; }
  .highlight-card { padding:20px; }
  .params-table td { padding:10px 14px; font-size:13px; }
  .params-table td:first-child { width:100px; }
  .related-grid { grid-template-columns:1fr; }
  .cta-band { padding:36px 20px; }
  .cta-title { font-size:22px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:16px; }
  .hh-footer { padding:32px 0 16px; }
  .footer-bottom { flex-direction:column; gap:4px; text-align:center; font-size:11px; }
  .steps-grid { grid-template-columns:1fr 1fr; }
  .download-grid { grid-template-columns:1fr; }
}

/* ===== 内页侧栏布局 V3 ===== */
.content-with-sidebar {
    display: flex;
    gap: 36px;
    align-items: flex-start;
}
.content-main {
    flex: 1;
    min-width: 0;
}
.content-sidebar {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.sw {
    background: #141414;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    padding: 24px;
}
.sw-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #2A2A2A;
}
.sw-head svg { flex-shrink: 0; stroke: #C99A2E; fill: none; }
.sw-head span { font-size: 15px; font-weight: 700; color: #C99A2E; letter-spacing: 0.02em; }
.news-list { list-style: none; padding: 0; margin: 0; }
.news-item {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 0; border-bottom: 1px solid #1E1E1E;
}
.news-item:first-child { padding-top: 0; }
.news-item:last-child { border-bottom: none; padding-bottom: 2px; }
.news-rank {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: #222; color: #555; margin-top: 1px;
}
.news-rank.r1 { background: linear-gradient(135deg, #C99A2E, #D4AD4F); color: #0A0A0A; }
.news-rank.r2 { background: linear-gradient(135deg, #A07B25, #B89030); color: #0A0A0A; }
.news-rank.r3 { background: linear-gradient(135deg, #7D6020, #927028); color: #E8E8E8; }
.news-body { flex: 1; min-width: 0; }
.news-title {
    color: #C8C8C8; font-size: 14px; line-height: 1.6; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color 0.15s;
}
.news-title:hover { color: #C99A2E; }
.news-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: #555; }
.cat-tag { padding: 1px 6px; background: rgba(201,154,46,0.08); border-radius: 3px; color: #C99A2E; font-size: 11px; }
.contact-block { display: flex; flex-direction: column; gap: 0; }
.ct-phone { display: flex; align-items: center; gap: 14px; }
.ct-phone-icon {
    width: 44px; height: 44px; border-radius: 10px; background: rgba(201,154,46,0.08);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ct-phone-info { display: flex; flex-direction: column; }
.ct-phone-label { font-size: 12px; color: #666; letter-spacing: 0.04em; }
.ct-phone-num {
    font-size: 18px; font-weight: 700; color: #E8E8E8; font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em; text-decoration: none; transition: color 0.15s;
}
.ct-phone-num:hover { color: #C99A2E; }
.ct-divider { height: 1px; background: #2A2A2A; margin: 20px 0 16px; }
.ct-qr { display: flex; align-items: center; justify-content: space-between; }
.ct-qr-info { display: flex; flex-direction: column; gap: 4px; }
.ct-qr-label { font-size: 14px; color: #D0D0D0; font-weight: 600; }
.ct-qr-hint { font-size: 12px; color: #555; }
.ct-qr-box {
    width: 64px; height: 64px; border-radius: 10px; border: 1px solid #2A2A2A;
    overflow: hidden; cursor: pointer; transition: border-color 0.15s;
    background: #1A1A1A; display: flex; align-items: center; justify-content: center;
}
.ct-qr-box:hover { border-color: #C99A2E; }
.ct-qr-box img { width: 64px; height: 64px; object-fit: cover; display: block; }
.qual-list { display: flex; flex-direction: column; gap: 16px; }
.qual-card {
    display: flex; align-items: flex-start; gap: 14px; padding: 14px;
    background: #1A1A1A; border: 1px solid #222; border-radius: 10px;
    transition: border-color 0.2s;
}
.qual-card:hover { border-color: rgba(201,154,46,0.3); }
.qual-icon {
    width: 36px; height: 36px; border-radius: 8px; background: rgba(201,154,46,0.08);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.qual-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qual-name { font-size: 14px; font-weight: 600; color: #D0D0D0; line-height: 1.3; }
.qual-sub { font-size: 12px; color: #666; line-height: 1.4; }
@media (max-width: 768px) {
    .content-with-sidebar { flex-direction: column; }
    .content-sidebar { width: 100%; }
}

/* ===== 资讯缩略图 ===== */
.news-thumb {
    display: block;
    flex-shrink: 0;
    margin-right: 12px;
    width: 120px;
}
.news-thumb img {
    width: 120px;
    height: auto;
    border-radius: 6px;
    display: block;
}
.news-list-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #1E1E1E;
}

/* ===== 新闻卡片网格 ===== */
.news-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.news-card {
    display: block;
    background: #141414;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, border-color 0.2s;
}
.news-card:hover {
    transform: translateY(-2px);
    border-color: #C99A2E;
}
.news-card-img {
    width: 100%;
    height: 180px;
    overflow: hidden;
}
.news-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.news-card:hover .news-card-img img {
    transform: scale(1.05);
}
.news-card-img-placeholder {
    background: linear-gradient(135deg, #1B2838, #2C3E50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
}
.news-card-body {
    padding: 16px;
}
.news-card-date {
    color: #666;
    font-size: 12px;
    margin-bottom: 6px;
}
.news-card-title {
    color: #E8E8E8;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card:hover .news-card-title {
    color: #C99A2E;
}

/* 移动端 */
@media (max-width: 768px) {
    .news-card-grid {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .news-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}