/* ===== 越舟机械官网 — 共享样式表 ===== */
/* 所有页面公共 CSS 变量、基础样式、Header/Footer */

/* ===== CSS 变量（暖调深色工业制造风格） ===== */
:root {
    --primary: #0c1929;
    --primary-warm: #152436;
    --secondary: #1e3756;
    --accent: #c9952d;
    --accent-light: #d4a843;
    --accent-dark: #a67c24;
    --accent-bright: #e8b84b;
    --text: #1e293b;
    --text-light: #64748b;
    --text-muted: #94a3b8;
    --bg-light: #f7f5f2;
    --bg-warm: #faf8f5;
    --white: #ffffff;
    --border: #e5e1db;
    --border-light: #f0ede8;
    /* 品牌金调发光 */
    --accent-glow-soft: rgba(201,149,45,0.15);
    --accent-glow: rgba(201,149,45,0.25);
    --accent-glow-strong: rgba(201,149,45,0.38);
    --accent-glow-line: rgba(201,149,45,0.5);
    --accent-glow-bubble: rgba(201,149,45,0.55);
    --accent-subtle: rgba(201,149,45,0.07);
    --accent-soft: rgba(201,149,45,0.12);
    --accent-soft-strong: rgba(201,149,45,0.18);
    --accent-medium: rgba(201,149,45,0.22);
    --accent-light-alpha: rgba(212,168,67,0.4);
    --accent-icon-start: rgba(201,149,45,0.12);
    --accent-icon-end: rgba(201,149,45,0.03);
    --accent-border-soft: rgba(201,149,45,0.35);
    --accent-subtle-dark: rgba(201,149,45,0.06);
    /* 主色半透 */
    --primary-a05: rgba(12,25,41,0.05);
    --primary-a28: rgba(12,25,41,0.25);
    --primary-a35: rgba(12,25,41,0.3);
    --primary-a55: rgba(12,25,41,0.5);
    /* 白色半透层 */
    --white-a1: rgba(255,255,255,0.1);
    --white-a15: rgba(255,255,255,0.15);
    --white-a25: rgba(255,255,255,0.25);
    --white-a3: rgba(255,255,255,0.3);
    --white-a32: rgba(255,255,255,0.32);
    --white-a35: rgba(255,255,255,0.35);
    --white-a4: rgba(255,255,255,0.4);
    --white-a5: rgba(255,255,255,0.5);
    --white-a6: rgba(255,255,255,0.6);
    --white-a60: rgba(255,255,255,0.6);
    --white-a7: rgba(255,255,255,0.7);
    --white-a75: rgba(255,255,255,0.75);
    --white-a8: rgba(255,255,255,0.8);
    --white-a82: rgba(255,255,255,0.82);
    --white-a85: rgba(255,255,255,0.85);
    --white-a9: rgba(255,255,255,0.9);
    --white-a92: rgba(255,255,255,0.92);
    --white-a95: rgba(255,255,255,0.95);
    /* 黑色半透层 */
    --black-a04: rgba(0,0,0,0.04);
    --black-a06: rgba(0,0,0,0.06);
    --black-a08: rgba(0,0,0,0.08);
    --black-a1: rgba(0,0,0,0.1);
    --black-a12: rgba(0,0,0,0.12);
    --black-a14: rgba(0,0,0,0.14);
    --black-a15: rgba(0,0,0,0.15);
    --black-a16: rgba(0,0,0,0.16);
    --black-a18: rgba(0,0,0,0.18);
    --black-a2: rgba(0,0,0,0.2);
    --black-a22: rgba(0,0,0,0.22);
    --black-a28: rgba(0,0,0,0.28);
    /* 功能色 */
    --blue-accent: #3b82b6;
    --blue-light: #60a5d0;
    --blue-soft: #93bbd8;
    --cta-orange: #e07830;
    --cta-orange-dark: #c56828;
    --cta-orange-light: #f08c44;
    --cta-shadow: rgba(224,120,48,0.28);
    --orange-light: #f08c44;
    --orange: #e07830;
    --orange-dark: #b85a20;
    --orange-shadow: rgba(224,120,48,0.35);
    --success: #22c55e;
    /* 动效 */
    --ease-out-smooth: cubic-bezier(0.22,1,0.36,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
    /* 场景色 */
    --advantages-bg-start: #f5f0e8;
    --advantages-bg-end: #eae3d6;
    --modal-overlay: rgba(12,25,41,0.75);
    --header-scrolled-bg: rgba(255,255,255,0.72);
    --media-bg-start: #f8f7f4;
    --media-bg-end: #f0ede6;
    --media-bg-hover-start: #f5f0e8;
    --media-bg-hover-end: #ebe4d6;
    --modal-img-bg: #f5f2ed;
}

/* ===== 基础重置与全局 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter','Noto Sans SC',-apple-system,sans-serif;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== 无障碍 ===== */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
    position: absolute; top: -100px; left: 8px;
    background: var(--accent); color: #fff;
    padding: 8px 16px; border-radius: 6px;
    font-weight: 600; z-index: 9999;
    text-decoration: none; transition: top 0.3s;
}
.skip-link:focus { top: 8px; }

/* ===== 通用容器 ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 40px; }

/* ===== 子页面 Header（粘性半透明） ===== */
.header {
    background: rgba(250,249,246,0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo-section { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo-img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; }
.logo-text { display: flex; flex-direction: column; }
.logo { font-size: 18px; font-weight: 700; color: var(--primary); letter-spacing: 0.5px; line-height: 1.2; }
.company-tagline { font-size: 11px; color: var(--accent); font-weight: 600; letter-spacing: 0.3px; margin-top: 2px; }

/* ===== 通用返回按钮 ===== */
.back-btn {
    color: var(--primary); text-decoration: none;
    font-size: 14px; font-weight: 500;
    padding: 8px 18px;
    border: 1px solid var(--border); border-radius: 50px;
    transition: all 0.3s ease; background: var(--white);
}
.back-btn:hover {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent-dark);
    box-shadow: 0 2px 12px var(--accent-glow-soft);
}

/* ===== 面包屑 ===== */
.breadcrumb {
    position: relative; font-size: 13px;
    color: rgba(255,255,255,0.5); margin-bottom: 20px;
}
.breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.3s; }
.breadcrumb a:hover { color: var(--accent-bright); }
.breadcrumb span { color: rgba(255,255,255,0.35); margin: 0 8px; }

/* ===== Section 标题通用 ===== */
.section-header { text-align: center; margin-bottom: 50px; }
.section-title {
    font-size: clamp(28px,3.5vw,40px);
    font-weight: 800; color: var(--primary);
    margin-bottom: 12px; letter-spacing: -0.5px;
}
.section-subtitle {
    font-size: 16px; color: var(--text-light);
    max-width: 600px; margin: 0 auto;
}

/* ===== CTA 按钮 ===== */
.cta-btn {
    display: inline-block;
    padding: 14px 40px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700; font-size: 15px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 28px var(--accent-glow);
}
.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px var(--accent-glow-strong);
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
}

/* ===== CTA Section ===== */
.cta-section {
    background: linear-gradient(180deg, var(--bg-warm) 0%, var(--white) 100%);
    padding: 70px 24px; text-align: center;
}
.cta-section h2 {
    font-size: clamp(24px,3.5vw,32px);
    font-weight: 800; color: var(--primary);
    margin-bottom: 10px; letter-spacing: -0.3px;
}
.cta-section p { color: var(--text-light); margin-bottom: 28px; font-size: 16px; }
.cta-qr {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; margin-top: 28px;
}
.cta-qr-img { width: 80px; height: 80px; border-radius: 8px; border: 2px solid var(--accent); flex-shrink: 0; }
.cta-qr-label { font-size: 13px; color: var(--text-light); text-align: left; line-height: 1.5; }
.cta-qr-label strong { color: var(--accent-dark); }

/* ===== Footer ===== */
.footer {
    background: var(--primary);
    color: rgba(255,255,255,0.5);
    padding: 28px 24px;
    text-align: center;
    font-size: 13px; letter-spacing: 0.3px;
}
.footer a { color: rgba(255,255,255,0.7); text-decoration: none; margin: 0 10px; transition: color 0.3s; }
.footer a:hover { color: var(--accent-bright); }
.footer-links { margin-top: 10px; }

/* ===== 产品标签 ===== */
.product-tag {
    display: inline-block;
    font-size: 11px; font-weight: 700;
    padding: 4px 12px; border-radius: 50px;
    margin-bottom: 8px;
}
.product-tag.hot {
    background: rgba(201,149,45,0.15); color: var(--accent-dark);
}
.product-tag.custom {
    background: rgba(59,130,182,0.12); color: var(--blue-accent);
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .container { padding: 0 20px; }
    .container-wide { padding: 0 20px; }
    .logo { font-size: 15px; }
    .company-tagline { font-size: 10px; }
    .back-btn { font-size: 12px; padding: 6px 14px; }
    .section-title { font-size: 24px; }
    .section-subtitle { font-size: 14px; }
}