/* ============================================
   巡界科技 - 主样式表
   版本：2.0（优化版）
   更新日期：2026-05-27
   ============================================ */

/* === 1. Reset & Base === */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:'PingFang SC','Microsoft YaHei',-apple-system,BlinkMacSystemFont,sans-serif;
    line-height:1.7;
    color:#1a1a2e;
    overflow-x:hidden;
    background:#FEF5F5
}

/* === 2. Scrollbar === */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#f1f1f1}
::-webkit-scrollbar-thumb{background:#D42426;border-radius:3px}

/* === 3. CSS Variables === */
:root{
    --primary:#D42426;
    --primary-dark:#B71C1C;
    --secondary:#E53935;
    --gradient-1:linear-gradient(135deg,#D42426 0%,#E53935 55%,#FF6F61 100%);
    --gradient-2:linear-gradient(135deg,#10172f 0%,#16213e 100%);
    --gradient-hero:linear-gradient(135deg,rgba(12,24,48,.18) 0%,rgba(212,36,38,.12) 50%,rgba(0,188,140,.10) 100%)
}

/* === 4. Accessibility === */
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
:focus-visible{
    outline:3px solid #D42426;
    outline-offset:2px;
    border-radius:4px
}

/* === 5. Header & Navigation === */
header{
    background:rgba(16,23,47,.96);
    position:fixed;
    top:0;
    width:100%;
    z-index:1000;
    border-bottom:1px solid rgba(255,255,255,.08);
    transition:.3s
}
header.scrolled{
    background:rgba(16,23,47,.92);
    backdrop-filter:blur(18px);
    box-shadow:0 8px 28px rgba(0,0,0,.18)
}
nav{
    height:64px;
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between
}

/* --- Logo --- */
.logo{
    font-size:1.5rem;
    font-weight:700;
    color:#fff;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap
}
.logo-img{
    width:38px;
    height:38px;
    background:#fff;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    box-shadow:0 4px 14px rgba(212,36,38,.42);
    object-fit:cover;
    object-position:center
}
.footer-logo-img{
    width:50px;
    height:50px;
    border-radius:14px;
    object-fit:cover;
    object-position:center;
    background:#fff;
    box-shadow:0 3px 16px rgba(212,36,38,.3);
    flex-shrink:0
}

/* --- Nav Links --- */
nav ul{list-style:none;display:flex;gap:2px}
nav ul li a{
    color:rgba(255,255,255,.76);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    padding:8px 13px;
    border-radius:8px;
    transition:.25s
}
nav ul li a:hover{color:#fff;background:rgba(255,255,255,.08)}
nav ul li a.active{color:#fff;background:rgba(212,36,38,.5)}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}

/* === 6. Hero Section === */
.hero{
    height:100vh;
    min-height:620px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;
    position:relative;
    overflow:hidden;
    background:#11233f
}
.hero-bg{position:absolute;inset:0;background:var(--gradient-hero);z-index:0}
.hero-bg:before{
    content:'';
    position:absolute;
    inset:0;
    background:url('assets/hero-bg.png') center/cover no-repeat;
    opacity:1
}
.hero-particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.particle{
    position:absolute;
    width:6px;
    height:6px;
    background:rgba(255,255,255,.38);
    border-radius:50%;
    animation:floatUp linear infinite
}
@keyframes floatUp{
    0%{transform:translateY(100vh);opacity:0}
    15%{opacity:1}
    90%{opacity:1}
    100%{transform:translateY(-10vh);opacity:0}
}
.hero-content{position:relative;z-index:2;padding:0 24px;max-width:900px}
.hero-content-minimal{
    width:100%;
    max-width:1200px;
    height:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding-bottom:120px
}

/* --- CTA Buttons --- */
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-cta-floating{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    padding:10px;
    box-shadow:0 16px 44px rgba(0,0,0,.16)
}
.cta-primary,.cta-secondary{
    padding:16px 36px;
    border-radius:50px;
    font-weight:600;
    font-size:1.05rem;
    text-decoration:none;
    transition:.3s;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px
}
.cta-primary{background:#fff;color:#D42426;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.cta-primary:hover,.cta-secondary:hover{transform:translateY(-3px)}
.cta-secondary{
    background:rgba(255,255,255,.14);
    color:#fff;
    border:1.5px solid rgba(255,255,255,.25);
    backdrop-filter:blur(4px)
}
.hero-cta-floating .cta-primary,
.hero-cta-floating .cta-secondary{padding:12px 28px;font-size:15px}

/* --- Scroll Indicator --- */
.scroll-indicator{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2}
.scroll-indicator span{
    display:block;
    width:20px;
    height:34px;
    border:2px solid rgba(255,255,255,.5);
    border-radius:12px;
    position:relative
}
.scroll-indicator span:before{
    content:'';
    position:absolute;
    top:6px;
    left:50%;
    width:3px;
    height:8px;
    background:#fff;
    border-radius:2px;
    transform:translateX(-50%);
    animation:scrollDown 2s infinite
}
@keyframes scrollDown{
    0%{opacity:1;top:6px}
    100%{opacity:0;top:18px}
}

/* === 7. Container === */
.container{max-width:1200px;margin:0 auto;padding:0 24px;text-align:left}
section{padding:80px 0}

/* === 8. Stats Section === */
.stats-section{background:var(--gradient-2);color:#fff;padding:70px 0}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    max-width:1000px;
    margin:0 auto;
    padding:0 24px;
    align-items:stretch
}
.stat-item{
    text-align:center;
    padding:32px 16px;
    background:rgba(255,255,255,.06);
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s
}
.stat-item:hover{background:rgba(255,255,255,.1);transform:translateY(-6px)}
.stat-number{
    font-size:3rem;
    font-weight:800;
    background:linear-gradient(135deg,#D42426,#FF6F61);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:6px;
    white-space:nowrap
}
.stat-label{font-size:1rem;color:rgba(255,255,255,.75)}

/* === 9. Features Bar === */
.features-bar{background:#fff;border-top:1px solid #f0f0f5;border-bottom:1px solid #f0f0f5;padding:40px 0}
.features-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    max-width:1000px;
    margin:0 auto;
    padding:0 24px;
    align-items:center
}
.feature-item{text-align:center;padding:16px}
.feature-item .icon{font-size:2.2rem;margin-bottom:10px}
.feature-item h4{font-size:1rem;color:#1a1a2e;margin-bottom:4px}
.feature-item p{font-size:13px;color:#999}

/* === 10. Section Headers === */
.section-header{text-align:center;margin-bottom:50px}
.section-header h2{font-size:2.2rem;color:#1a1a2e;margin-bottom:12px}
.section-header h2:after{
    content:'';
    display:block;
    width:60px;
    height:4px;
    background:var(--gradient-1);
    margin:16px auto 0;
    border-radius:2px
}
.section-header p{color:#777;font-size:1.05rem;margin-top:8px}

/* === 11. Cards === */
.card-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:28px;
    align-items:stretch;
    justify-items:stretch
}
.card{
    background:#fff;
    border-radius:20px;
    box-shadow:0 4px 24px rgba(0,0,0,.06);
    overflow:hidden;
    transition:.35s;
    position:relative;
    border:1px solid #f0f0f5
}
.card:hover{
    transform:translateY(-8px);
    box-shadow:0 16px 48px rgba(212,36,38,.12);
    border-color:rgba(212,36,38,.15)
}
.card img{width:100%;height:200px;object-fit:cover;transition:.5s}
.card:hover img{transform:scale(1.05)}
.card-content{padding:24px}
.card-content h3{font-size:1.25rem;margin-bottom:8px;color:#1a1a2e}
.card-content p{color:#666;font-size:14px;line-height:1.7;margin-bottom:4px}

/* === 12. Buttons === */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:10px 24px;
    background:var(--gradient-1);
    color:#fff;
    text-decoration:none;
    border-radius:25px;
    margin-top:12px;
    font-weight:600;
    font-size:14px;
    transition:.3s;
    box-shadow:0 4px 16px rgba(212,36,38,.3)
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,36,38,.45)}
.btn-lg{padding:14px 32px;font-size:16px;border-radius:30px}

/* === 13. Tags === */
.tag{
    display:inline-block;
    padding:6px 16px;
    background:linear-gradient(135deg,#FFF0F0,#FFE0E0);
    color:#D42426;
    border-radius:20px;
    font-size:13px;
    margin:4px;
    transition:.3s;
    font-weight:500
}

/* === 14. Gallery === */
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
    margin-top:40px
}
.gallery-grid img{
    width:100%;
    height:200px;
    object-fit:cover;
    border-radius:16px;
    transition:.4s;
    box-shadow:0 4px 16px rgba(0,0,0,.06)
}
.gallery-grid img:hover{transform:scale(1.03);box-shadow:0 12px 40px rgba(0,0,0,.12)}

/* === 15. Tables === */
.table-wrapper{
    overflow-x:auto;
    margin-top:24px;
    border-radius:16px;
    box-shadow:0 4px 20px rgba(0,0,0,.06)
}
table{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
table th{
    background:var(--gradient-1);
    color:#fff;
    padding:16px 20px;
    font-weight:600;
    text-align:left;
    vertical-align:middle
}
table td{padding:14px 20px;border-bottom:1px solid #f0f0f5;color:#444;vertical-align:middle}
table tbody tr:hover{background:rgba(212,36,38,.04)}

/* === 16. CTA Banner === */
.cta-banner{
    background:var(--gradient-1);
    padding:80px 24px;
    text-align:center;
    color:#fff;
    position:relative;
    overflow:hidden
}
.cta-banner:before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 30% 50%,rgba(255,255,255,.1),transparent 60%)
}
.cta-banner h2{font-size:2.2rem;margin-bottom:12px;position:relative}
.cta-banner p{font-size:1.1rem;opacity:.85;margin-bottom:28px;position:relative}
.cta-banner .btn{background:#fff;color:#D42426;box-shadow:0 8px 24px rgba(0,0,0,.15);position:relative}

/* === 17. About Section === */
.about-section{background:#fff;text-align:center;position:relative;overflow:hidden}
.about-section:before{
    content:'⛳';
    position:absolute;
    top:-20px;
    right:-20px;
    font-size:200px;
    opacity:.04
}
.about-section h2{font-size:2.2rem;margin-bottom:20px;color:#1a1a2e}
.about-section p{max-width:800px;margin:0 auto;font-size:1.1rem;line-height:1.9;color:#555}

/* === 18. Page Hero (Sub-pages) === */
.page-hero{
    background:var(--gradient-1);
    padding:110px 24px 64px;
    text-align:center;
    color:#fff;
    position:relative;
    overflow:hidden
}
.page-hero:after{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 80% 30%,rgba(255,255,255,.12),transparent 50%)
}
.page-hero h1{font-size:2.5rem;font-weight:800;margin-bottom:8px;position:relative;z-index:1}
.page-hero p{font-size:1.1rem;opacity:.84;position:relative;z-index:1}

/* === 19. Content Section === */
.content-section{padding:60px 24px}
.content-section h3{
    font-size:1.5rem;
    color:#1a1a2e;
    margin-bottom:20px;
    position:relative;
    padding-left:16px
}
.content-section h3:before{
    content:'';
    position:absolute;
    left:0;
    top:4px;
    width:4px;
    height:24px;
    background:var(--gradient-1);
    border-radius:2px
}
.content-section p{color:#555;font-size:15px;line-height:1.9;margin-bottom:12px}

/* === 20. Footer === */
footer{background:var(--gradient-2);color:#fff;padding:60px 0 30px}

/* --- Footer Center Layout (Index) --- */
.footer-grid-center{
    max-width:900px;
    margin:0 auto;
    padding:20px 20px;
    text-align:center
}
.footer-brand-inline{
    display:inline-flex;
    align-items:center;
    gap:14px
}
.footer-brand-text{text-align:left}
.footer-brand-title{
    font-size:24px;
    font-weight:700;
    color:#fff;
    margin:0 0 4px 0;
    line-height:1.2
}
.footer-brand-slogan{
    font-size:13px;
    color:rgba(255,255,255,.8);
    margin:0;
    line-height:1.5
}

/* --- Footer Grid (Sub-pages) --- */
.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:40px;
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
    align-items:start
}
.footer-brand .logo-text{font-size:1.4rem;font-weight:700;margin-bottom:12px}
.footer-brand p{color:rgba(255,255,255,.6);font-size:14px;line-height:1.8}
.footer-col h4{font-size:15px;margin-bottom:16px;color:rgba(255,255,255,.9)}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px}
.footer-col a{
    color:rgba(255,255,255,.55);
    text-decoration:none;
    font-size:14px;
    transition:.3s
}
.footer-col a:hover{color:#fff}
.footer-bottom{
    max-width:1200px;
    margin:40px auto 0;
    padding:20px 24px 0;
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    font-size:13px;
    color:rgba(255,255,255,.45)
}

.icp-beian{
    display:inline-block;
    margin:4px 8px
}
.icp-beian a{
    color:rgba(255,255,255,.4);
    text-decoration:none;
    font-size:12px
}
.icp-beian a:hover{
    color:rgba(255,255,255,.7);
    text-decoration:underline
}

/* === 21. Back to Top === */
.back-to-top{
    position:fixed;
    bottom:30px;
    right:30px;
    width:48px;
    height:48px;
    background:var(--gradient-1);
    color:#fff;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-size:1.4rem;
    opacity:0;
    visibility:hidden;
    transition:.3s;
    box-shadow:0 6px 20px rgba(212,36,38,.4);
    z-index:999
}
.back-to-top.show{opacity:1;visibility:visible}
.back-to-top:hover{transform:translateY(-4px)}

/* === 22. Animations === */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* === 23. Responsive === */
@media(max-width:900px){
    .nav-toggle{display:block}
    nav ul{
        display:none;
        position:absolute;
        top:64px;
        left:0;
        right:0;
        background:rgba(16,23,47,.98);
        flex-direction:column;
        padding:12px;
        border-bottom:1px solid rgba(255,255,255,.08)
    }
    nav ul.open{display:flex}
    nav ul li a{display:block;padding:12px 16px}
    .stats-grid,.features-grid{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
    .hero{min-height:560px;height:78vh}
    .hero-bg:before{background-position:center top}
    .hero-content-minimal{padding:0 16px 84px}
    .hero-cta-floating{width:100%;border-radius:24px;flex-direction:column}
    .hero-cta-floating .cta-primary,
    .hero-cta-floating .cta-secondary{width:100%;justify-content:center}
}

@media(max-width:600px){
    section{padding:50px 0}
    .stats-grid{gap:12px}
    .stat-number{font-size:2rem}
    .stat-item{padding:20px 12px}
    .features-grid{gap:12px}
    .card-container{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr;text-align:center}
    .page-hero h1{font-size:1.8rem}
    .hero-cta-floating .cta-primary,
    .hero-cta-floating .cta-secondary{padding:12px 18px;font-size:14px}
}