/* 唯代精密智造 - 主样式 v4.0 */
:root {
    --primary: #0f172a;
    --primary-light: #1e293b;
    --primary-dark: #020617;
    --accent: #00A3B4;
    --accent-hover: #00B8C8;
    --accent-dim: rgba(0,163,180,0.1);
    --text: #1a1a2e;
    --text-light: #64748b;
    --text-muted: #94a3b8;
    --bg: #fff;
    --bg-dark: #f1f5f9;
    --bg-card: #fff;
    --border: #e2e8f0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow: 0 4px 24px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 48px rgba(0,0,0,0.12);
    --radius: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --font: -apple-system,'PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family:var(--font); color:var(--text); line-height:1.7;
    -webkit-font-smoothing:antialiased; background:var(--bg);
}
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
a { color:var(--accent); text-decoration:none; transition:color .2s; }
a:hover { color:var(--accent-hover); }
img { max-width:100%; height:auto; }

/* Buttons */
.btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 28px; border-radius:var(--radius); font-size:14px; font-weight:600;
    transition:all .25s; cursor:pointer; border:none; text-decoration:none;
}
.btn-primary {
    background:linear-gradient(135deg,var(--accent),#07809d);
    color:#fff; box-shadow:0 2px 12px rgba(8,145,178,0.3);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 20px rgba(8,145,178,0.4); color:#fff; }
.btn-outline-light { background:transparent; border:1.5px solid rgba(255,255,255,.3); color:#fff; }
.btn-outline-light:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); }
.btn-sm { padding:6px 16px; font-size:13px; }

/* Section */
.section { padding:30px 0; }
.section-dark { background:var(--primary); color:#fff; }
.section-dark-2 { background:var(--primary-dark); color:#fff; }
.section-header { text-align:center; margin-bottom:48px; }
.section-tag {
    display:inline-block; padding:4px 14px; border-radius:20px;
    background:var(--accent-dim); color:var(--accent); font-size:12px;
    font-weight:700; letter-spacing:2px; margin-bottom:12px;
}
.section-header h2 { font-size:32px; font-weight:800; margin-bottom:8px; color:var(--primary); }
.section-dark .section-header h2 { color:#fff; }
.section-header p { color:var(--text-light); font-size:15px; }

/* Topbar */
.topbar {
    background:var(--primary); padding:6px 0; font-size:12px; border-bottom:1px solid rgba(255,255,255,.05);
}
.topbar .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px; }
.topbar-left { color:var(--text-muted); }
.topbar-right a { color:var(--text-muted); font-size:13px; }
.topbar-right a:hover { color:var(--accent); }

/* Header */
.header {
    background:var(--primary); padding:0; position:sticky; top:0; z-index:100;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.header .container { display:flex; align-items:center; height:56px; gap:24px; }
.logo a { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:700; color:#fff; }
.logo img { height:36px; }

/* Nav */
.nav { flex:1; }
.nav-list { display:flex; list-style:none; gap:4px; margin:0; padding:0; }
.nav-list > li { position:relative; }
.nav-list > li > a {
    display:block; padding:8px 16px; color:rgba(255,255,255,.65); font-size:14px;
    font-weight:500; border-radius:6px; transition:all .2s;
}
.nav-list > li > a:hover,
.nav-list > li > a.active { color:#fff; background:rgba(255,255,255,.08); }
.nav-toggle { display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; padding:4px 8px; }

/* Sub-nav */
.sub-nav {
    position:absolute; top:100%; left:0; min-width:200px; background:var(--primary-light);
    border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:6px;
    display:none; box-shadow:var(--shadow-lg); z-index:50;
}
.has-sub:hover .sub-nav { display:block; }
.sub-nav li { list-style:none; position:relative; }
.sub-nav a {
    display:block; padding:8px 14px; color:rgba(255,255,255,.7); font-size:13px;
    border-radius:4px; transition:all .15s;
}
.sub-nav a:hover { background:rgba(255,255,255,.08); color:#fff; }
.sub-nav-2 { display:none; position:absolute; left:100%; top:0; min-width:220px;
    background:var(--primary-light); border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius); padding:6px; }
.sub-nav li:hover .sub-nav-2 { display:block; }

/* Search */
.nav-search { flex-shrink:0; }
.nav-search input {
    padding:6px 14px; border:1px solid rgba(255,255,255,.15); border-radius:20px;
    background:rgba(255,255,255,.06); color:#fff; font-size:13px; width:180px;
    outline:none; transition:all .25s;
}
.nav-search input:focus { border-color:var(--accent); width:220px; background:rgba(255,255,255,.1); }
.nav-search input::placeholder { color:var(--text-muted); }

/* Hero */
.hero {
    position:relative;
    background: linear-gradient(135deg,var(--primary) 0%,#1a2a4a 50%,var(--primary) 100%);
    padding:40px 0; overflow:hidden; color:#fff;
}
.hero-bg {
    position:absolute; inset:0; opacity:.03;
    background-image:radial-gradient(circle at 25% 50%,var(--accent) 0%,transparent 50%),
                     radial-gradient(circle at 75% 50%,rgba(255,255,255,.1) 0%,transparent 50%);
}
.hero-pattern {
    position:absolute; inset:0; opacity:.04;
    background-image:linear-gradient(30deg,var(--accent) 12%,transparent 12%),
                     linear-gradient(-30deg,var(--accent) 12%,transparent 12%);
    background-size:60px 104px;
}
.hero-shape-1 {
    position:absolute; width:400px; height:400px; border-radius:50%;
    background:radial-gradient(circle,rgba(0,163,180,.15),transparent 70%);
    top:-100px; right:-100px; animation:pulse-slow 8s ease-in-out infinite;
}
.hero-shape-2 {
    position:absolute; width:300px; height:300px; border-radius:50%;
    background:radial-gradient(circle,rgba(8,145,178,.1),transparent 70%);
    bottom:-80px; left:-80px; animation:pulse-slow 10s ease-in-out infinite reverse;
}
.hero-lines {
    position:absolute; inset:0; opacity:.03;
    background:repeating-linear-gradient(90deg,transparent,transparent 80px,var(--accent) 80px,var(--accent) 81px);
}
@keyframes pulse-slow { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.hero .container { position:relative; z-index:2; }
.hero-content { max-width:720px; }
.hero-tag {
    display:inline-block; padding:4px 14px; border-radius:20px;
    background:rgba(0,163,180,.15); color:var(--accent); font-size:13px; font-weight:600;
    letter-spacing:1px; margin-top:20px; margin-bottom:20px;
}
.hero-content h1 { font-size:44px; font-weight:800; line-height:1.2; margin-bottom:16px; }
.hero-content h1 span { color:var(--accent); }
.hero-content p { font-size:17px; color:rgba(255,255,255,.6); line-height:1.8; margin-bottom:32px; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }

/* Cards */
.card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:24px; transition:all .3s;
}
.card:hover { border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-2px); }

/* Series Grid */
.series-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.featured-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }.featured-card {    display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius);    overflow:hidden; background:#fff; text-decoration:none; transition:all .3s;}.featured-card:hover { border-color:var(--accent); box-shadow:var(--shadow-lg); transform:translateY(-4px); }.featured-img { height:160px; overflow:hidden; }.featured-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }.featured-card:hover .featured-img img { transform:scale(1.08); }.featured-body { padding:14px 16px 16px; }.featured-body h3 { font-size:14px; font-weight:600; margin:4px 0 4px; color:var(--text); }.featured-body p { font-size:12px; color:var(--text-light); }
.series-card {
    display:flex; flex-direction:column;
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; transition:all .3s; text-decoration:none; color:var(--text);
}
.series-card:hover {
    border-color:var(--accent); box-shadow:var(--shadow-lg); transform:translateY(-4px);
}
.series-card-top {
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    padding:32px 24px 24px; color:#fff;
}
.series-icon { font-size:36px; margin-bottom:12px; }
.series-card-top h3 { font-size:18px; font-weight:700; margin-bottom:4px; }
.series-count { font-size:13px; color:var(--accent); font-weight:600; }
.series-card-body { padding:16px 24px 20px; flex:1; }
.series-products { list-style:none; display:flex; flex-direction:column; gap:6px; }
.series-products li {
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 0; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-light);
}
.series-products li.more { color:var(--accent); font-weight:600; border-bottom:none; justify-content:center; }

/* About Preview */
.about-preview { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.about-image-svg { text-align:center; padding:40px; }
.about-image-svg .big-icon { font-size:48px; margin-bottom:8px; }
.about-image-svg .big-icon img { font-size:inherit; }
.about-image-svg p { font-size:14px; color:rgba(255,255,255,.5); margin-top:16px; }
.about-text h2 { font-size:28px; font-weight:800; margin-bottom:16px; }
.about-text p { font-size:15px; color:rgba(255,255,255,.65); margin-bottom:12px; line-height:1.8; }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:24px; }
.stat-box { text-align:center; padding:16px; background:rgba(255,255,255,.05); border-radius:var(--radius); }
.stat-box .num { display:block; font-size:24px; font-weight:800; color:var(--accent); }
.stat-box .label { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* Apps */
.apps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.app-card {
    text-align:center; padding:36px 24px; background:var(--bg-card);
    border:1px solid var(--border); border-radius:var(--radius-lg); transition:all .3s;
}
.app-card:hover { border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-4px); }
.app-icon-wrap { font-size:40px; margin-bottom:12px; }
.app-card h3 { font-size:16px; font-weight:700; margin-bottom:8px; }
.app-card p { font-size:13px; color:var(--text-light); }

/* Products Grid */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.product-card {
    display:flex; flex-direction:column;
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; transition:all .3s; text-decoration:none; color:var(--text);
}
.product-card:hover { border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-3px); }
.product-card-img {
    height:180px; background:linear-gradient(135deg,var(--primary),var(--primary-light));
    display:flex; align-items:center; justify-content:center; font-size:36px; color:rgba(255,255,255,.3);
}
.product-card-body { padding:16px 20px 20px; flex:1; display:flex; flex-direction:column; }
.product-card-model { font-size:11px; font-weight:700; color:var(--accent); letter-spacing:1px; margin-bottom:4px; }
.product-card-body h3 { font-size:15px; font-weight:600; margin-bottom:6px; }
.product-card-body p { font-size:13px; color:var(--text-light); flex:1; }
.product-card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }

/* Product Detail */
.product-detail { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.product-image-lg {
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    border-radius:var(--radius-lg); height:400px; display:flex; align-items:center; justify-content:center;
    font-size:64px; color:rgba(255,255,255,.2);
}
.product-info h1 { font-size:28px; font-weight:800; margin-bottom:4px; }
.product-model-tag {
    display:inline-block; padding:2px 10px; border-radius:4px;
    background:var(--accent-dim); color:var(--accent); font-size:12px; font-weight:700;
    letter-spacing:1px; margin-bottom:16px;
}
.product-summary { font-size:15px; color:var(--text-light); line-height:1.8; margin-bottom:24px; }
.specs-table {
    width:100%; border-collapse:separate; border-spacing:0;
    margin-bottom:24px;
    border:1px solid var(--border);
    border-radius:10px; overflow:hidden;
    font-size:14px;
}
.specs-table tr { background:#fff; transition:background .12s; }
.specs-table tr:nth-child(even) { background:#f8fafc; }
.specs-table tr:hover { background:#f1f5f9; }
.specs-table td {
    padding:11px 16px;
    border-bottom:1px solid #f1f5f9;
    line-height:1.6;
}
.specs-table tr:last-child td { border-bottom:none; }
.specs-table td:first-child {
    font-weight:600; color:var(--accent);
    width:130px; white-space:nowrap;
    background:rgba(0,163,180,0.03);
    border-right:1px solid #f1f5f9;
}
.specs-table td:last-child { color:var(--text); }

/* Specs table inner borders */
.specs-table tr:not(:last-child) td { border-bottom:1px solid #f1f5f9; }

/* Product nav */
.product-nav { display:flex; justify-content:space-between; margin-top:48px; padding-top:24px; border-top:1px solid var(--border); }
.product-nav a { font-size:14px; color:var(--text-light); }
.product-nav a:hover { color:var(--accent); }

/* Category page */
.category-header {
    text-align:center; padding:60px 0 40px;
    background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; margin-bottom:48px;
}
.category-header h1 { font-size:32px; font-weight:800; margin-bottom:8px; }
.category-header p { color:rgba(255,255,255,.5); }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.contact-info-card { padding:32px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); }
.contact-info-card h3 { font-size:18px; font-weight:700; margin-bottom:16px; }
.contact-info-card p { font-size:14px; color:var(--text-light); margin-bottom:8px; display:flex; gap:8px; }
.contact-form { padding:32px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); }
.contact-form label { display:block; font-size:13px; font-weight:600; margin-bottom:4px; color:var(--text); }
.contact-form input,.contact-form textarea {
    width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:6px;
    font-size:14px; font-family:var(--font); outline:none; transition:border-color .2s; margin-bottom:16px;
}
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--accent); }
.contact-form textarea { height:120px; resize:vertical; }
.form-success { padding:16px; background:#ecfdf5; border:1px solid #6ee7b7; border-radius:var(--radius); color:#065f46; font-size:14px; }

/* Breadcrumb */
.breadcrumb { padding:16px 0; font-size:13px; color:var(--text-muted); }
.breadcrumb a { color:var(--text-muted); }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb span { color:var(--text-light); }

/* Search */
.search-box { max-width:600px; margin:0 auto 40px; }
.search-box input {
    width:100%; padding:14px 20px; border:2px solid var(--border); border-radius:var(--radius-lg);
    font-size:16px; outline:none; transition:border-color .2s;
}
.search-box input:focus { border-color:var(--accent); }
.search-results-count { text-align:center; color:var(--text-light); margin-bottom:24px; }

/* Footer */
.footer { background:var(--primary); color:rgba(255,255,255,.6); padding:60px 0 0; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:40px; }
.footer-col h4 { color:#fff; font-size:15px; font-weight:700; margin-bottom:16px; }
.footer-col p { font-size:13px; line-height:1.8; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:6px; }
.footer-col ul a { color:rgba(255,255,255,.5); font-size:13px; }
.footer-col ul a:hover { color:var(--accent); }
.footer-bottom { margin-top:40px; padding:20px 0; border-top:1px solid rgba(255,255,255,.06); text-align:center; font-size:13px; }

/* Float */
.float-actions { position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:8px; z-index:999; }
.float-btn {
    width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:18px; box-shadow:var(--shadow-lg); transition:all .2s; border:none; cursor:pointer;
}
.float-phone { background:var(--accent); }
.float-wechat { background:#07c160; }
.float-top { background:var(--primary); }
.float-btn:hover { transform:scale(1.1); color:#fff; }

/* 404 */
.error-page { text-align:center; padding:100px 0; }
.error-page h1 { font-size:80px; font-weight:900; color:var(--accent); margin-bottom:8px; }
.error-page p { color:var(--text-light); font-size:16px; margin-bottom:32px; }

/* Product Filter */
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; justify-content:center; }
.filter-btn {
    padding:8px 20px; border:1px solid var(--border); border-radius:20px;
    background:var(--bg); font-size:13px; cursor:pointer; transition:all .2s; color:var(--text-light);
}
.filter-btn:hover,.filter-btn.active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.category-section { transition:opacity .3s; }
.product-card-img svg { opacity:.7; transition:opacity .3s; }
.product-card:hover .product-card-img svg { opacity:1; }

/* Responsive */
/* Hero Carousel - Full width image slideshow */
.hero-carousel {
    position:relative; width:100vw; overflow:hidden; max-width:100%;
    background:var(--primary-dark);
}
.carousel-container {
    position:relative; width:100%; max-height:500px; overflow:hidden;
}
.carousel-track {
    position:relative; width:100%;
}
.carousel-slide {
    position:absolute; top:0; left:0; width:100%; height:100%;
    opacity:0; transition:opacity 1s ease; z-index:1;
}
.carousel-slide.active {
    position:relative; opacity:1; z-index:2;
}
.carousel-slide img {
    width:100%; height:auto; display:block; max-height:500px;
    object-fit:cover; object-position:center;
}
.carousel-dots {
    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
    display:flex; gap:10px; z-index:10;
}
.dot {
    width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.4);
    cursor:pointer; transition:all .3s;
}
.dot.active { background:#fff; transform:scale(1.2); }
.dot:hover { background:rgba(255,255,255,.7); }


/* Carousel overlay titles */
.carousel-overlay {
    position:absolute; inset:0; z-index:5;
    background:transparent;
    display:flex; align-items:center;
}
.carousel-overlay-content {
    padding:60px; max-width:600px;
}
.carousel-subtitle {
    display:inline-block; font-size:13px; letter-spacing:3px; font-weight:600;
    color:rgba(255,255,255,.7); margin-bottom:12px;
}
.carousel-title {
    font-size:42px; font-weight:800; color:#fff; margin:0 0 12px 0; line-height:1.1;
}
.carousel-desc {
    font-size:15px; color:rgba(255,255,255,.65); margin:0; line-height:1.6;
}
@media(max-width:768px) {
    .carousel-overlay-content { padding:30px; }
    .carousel-title { font-size:24px; }
    .carousel-desc { font-size:13px; }
}

@media(max-width:768px) {
    .hero-content h1 { font-size:28px; }
    .hero { padding:60px 0 48px; }
    .section { padding:48px 0; }
    .about-preview,.product-detail,.contact-grid { grid-template-columns:1fr; gap:24px; }
    .stats-row { grid-template-columns:repeat(2,1fr); }
    .nav-toggle { display:block; }
    .nav-list {
        display:none; position:absolute; top:64px; left:0; right:0;
        background:var(--primary); flex-direction:column; padding:12px;
        border-bottom:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow-lg);
    }
    .nav-list.show { display:flex; }
    .sub-nav,.sub-nav-2 { position:static; display:none; border:none; padding-left:16px; background:transparent; }
    .has-sub:hover .sub-nav { display:none; }
    .has-sub.open .sub-nav { display:block; }
    .nav-search { display:none; }
    .featured-grid { grid-template-columns:repeat(2,1fr); }
    .series-grid { grid-template-columns:1fr; }
    .products-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .product-card-img { height:120px; }
    .product-image-lg { height:200px; }
    .specs-table { font-size:13px; }
    .specs-table td:first-child { width:90px; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:24px; }
}
@media(max-width:480px) {
    .products-grid { grid-template-columns:1fr; }
    .topbar-right{display:none}
    .footer-grid{grid-template-columns:1fr}
}