:root{--p:#00E5FF;--pd:#0055FF;--a:#7B61FF;--bg:#0a0e27;--bg2:#0f1535;--card:rgba(255,255,255,0.04);--tx:#fff;--tx2:#b0c4de;--mu:#8892b0;--gl:rgba(255,255,255,0.05);--bd:1px solid rgba(255,255,255,0.1);--nh:80px;--tr:all .4s cubic-bezier(.4,0,.2,1);--primary-color:var(--p);--gradient-primary:linear-gradient(135deg,var(--p),var(--pd));--glass-bg:rgba(255,255,255,0.03);--glass-border:1px solid rgba(255,255,255,0.05);--transition-smooth:all 0.3s cubic-bezier(0.4,0,0.2,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--tx);line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:var(--tr)}
img{max-width:100%;height:auto;display:block}

/* ===== Header / Navigation ===== */
.hd,.header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nh);background:rgba(10,14,39,.9);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.05)}
.nc,.nav-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:100%}
.lo img,.logo img{height:38px}
.nm,.nav-menu{display:flex;gap:32px;list-style:none}
.na,.nav-link{color:var(--tx2);font-size:15px;font-weight:500;padding:8px 0;position:relative}
.na:hover,.na.act,.nav-link:hover,.nav-link.active{color:var(--p)}
.na.act::after,.nav-link.active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--p);border-radius:1px}
.mb,.mobile-toggle{display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer}

/* ===== Hero Section ===== */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:var(--nh);background:linear-gradient(135deg,var(--bg),#0d1233,var(--bg))}
.hero h1{font-size:3rem;font-weight:800;margin-bottom:16px}
.hero p{font-size:1.2rem;color:var(--tx2);max-width:600px;margin:0 auto 32px}
.gr,.glow-text,.gradient-text{background:linear-gradient(135deg,var(--p),var(--pd),var(--a));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.btn{display:inline-block;padding:14px 32px;border-radius:12px;font-size:15px;font-weight:600;transition:var(--tr);cursor:pointer;border:none}
.bp,.btn-primary{background:linear-gradient(135deg,var(--p),var(--a));color:var(--bg)}
.bp:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,229,255,.3)}
.bg,.btn-glass{background:var(--gl);border:var(--bd);color:var(--tx2)}
.bg:hover,.btn-glass:hover{border-color:var(--p);color:var(--p)}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ===== Sections ===== */
.sec,.section{padding:100px 0}
.sh,.section-title{text-align:center;margin-bottom:60px}
.sh h2,.section-title h2{font-size:2.2rem;font-weight:800;margin-bottom:16px}
.sh p,.section-subtitle{color:var(--tx2);font-size:1.1rem}
.ct,.container{max-width:1200px;margin:0 auto;padding:0 20px}
.gd,.services-grid,.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* ===== Service Cards ===== */
.sc,.service-card{background:var(--card);border:var(--bd);border-radius:16px;padding:32px;transition:var(--tr);text-align:center}
.sc:hover,.service-card:hover{transform:translateY(-4px);border-color:rgba(0,229,255,.3)}
.hc,.icon-box{font-size:48px;margin-bottom:16px}
.sc h3,.service-card h3{font-size:1.2rem;font-weight:700;margin-bottom:10px}
.sc p,.service-card p{color:var(--mu);font-size:14px;line-height:1.6}

/* ===== Case Cards ===== */
.ca,.case-card{background:var(--card);border:var(--bd);border-radius:16px;overflow:hidden;transition:var(--tr)}
.ca:hover,.case-card:hover{transform:translateY(-4px);border-color:rgba(0,229,255,.3)}
.ci,.case-img{width:100%;height:200px;overflow:hidden;background:#1a1f3a;background-size:cover;background-position:center}
.ci img{width:100%;height:100%;object-fit:cover;transition:var(--tr)}
.ca:hover .ci img,.case-card:hover .case-img img{transform:scale(1.05)}
.cif{width:100%;height:200px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1f3a,#0d1233);color:var(--mu);font-size:14px}
.cfo,.case-info{padding:20px}
.cc,.case-tag{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;background:rgba(0,229,255,.15);color:var(--p);margin-bottom:10px}
.ct2{font-size:1.05rem;font-weight:700;margin-bottom:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.case-info h3,.cfo h3{font-size:1.05rem;font-weight:700;margin-bottom:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cd,.case-info p{color:var(--mu);font-size:14px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== Pagination ===== */
.pg{display:flex;justify-content:center;gap:8px;margin-top:40px}
.pg button{padding:10px 16px;border-radius:8px;border:var(--bd);background:var(--gl);color:var(--tx2);font-size:14px;cursor:pointer;transition:var(--tr)}
.pg button:hover,.pg button.act{border-color:var(--p);color:var(--p);background:rgba(0,229,255,.1)}
.pg button:disabled{opacity:.3;cursor:not-allowed}

/* ===== Detail Page ===== */
.dp{min-height:100vh;padding-top:calc(var(--nh) + 50px);padding-bottom:80px}
.bk{display:inline-flex;align-items:center;gap:8px;color:var(--p);font-size:15px;font-weight:500;margin-bottom:32px;transition:var(--tr)}
.bk:hover{letter-spacing:1px;background:rgba(0,229,255,.1);border-radius:8px;padding:6px 12px;margin-left:-12px}
.dh{margin-bottom:40px;text-align:center}
.dca{display:inline-block;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;background:rgba(0,229,255,.15);color:var(--p);margin-bottom:20px}
.dt{font-size:2.2rem;font-weight:800;line-height:1.4;margin-bottom:16px;color:var(--tx)}
.dm{color:var(--mu);font-size:14px;display:flex;align-items:center;justify-content:center;gap:12px}
.dcv{width:100%;border-radius:16px;overflow:hidden;margin:32px 0;background:#1a1f3a;box-shadow:0 10px 30px rgba(0,0,0,0.3)}
.dcv img{width:100%;height:auto;max-height:500px;object-fit:cover;display:block;margin:0 auto}

/* Safely Styled Container */
.dc {
    line-height: 1.9;
    font-size: 16px;
    color: var(--tx2);
    background: var(--card);
    border: var(--bd);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* Safe override for WYSIWYG inline styles on dark theme */
.dc p, .dc span, .dc div, .dc li, .dc td, .dc th {
    color: var(--tx2) !important;
    background-color: transparent !important;
}

.dc h1, .dc h2, .dc h3, .dc h4, .dc h5, .dc h6,
.dc h1 *, .dc h2 *, .dc h3 *, .dc h4 *, .dc h5 *, .dc h6 *,
.dc strong, .dc b, .dc strong *, .dc b * {
    color: var(--tx) !important;
    background-color: transparent !important;
}

.dc a, .dc a * {
    color: var(--p) !important;
}

.dc p { margin-bottom: 20px !important; }
.dc h2 { font-size: 1.5rem !important; font-weight: 700 !important; color: var(--tx) !important; margin: 32px 0 16px !important; padding-left: 16px !important; border-left: 4px solid var(--p) !important; }
.dc h3, .dc h4 { font-size: 1.25rem !important; font-weight: 600 !important; color: var(--tx) !important; margin: 24px 0 12px !important; }
.dc img { max-width: 100% !important; height: auto !important; border-radius: 12px !important; margin: 32px auto !important; display: block !important; box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; border: 1px solid rgba(255,255,255,0.05) !important; }
.dc ul, .dc ol { margin: 16px 0 20px 24px !important; }
.dc li { margin-bottom: 10px !important; }

/* ===== Footer ===== */
.ft,.footer{background:var(--bg2);border-top:1px solid rgba(255,255,255,.05);padding:60px 0 30px}
.fg,.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px}
.ft h4,.footer h4,.footer-links h4,.footer-contact h4{color:var(--tx);font-size:16px;margin-bottom:16px}
.ft ul,.footer ul{list-style:none}
.ft li,.footer li{margin-bottom:10px;color:var(--mu);font-size:14px}
.ft a:hover,.footer a:hover{color:var(--p)}
.fb,.footer-bottom{text-align:center;padding-top:30px;border-top:1px solid rgba(255,255,255,.05);color:var(--mu);font-size:13px}

/* ===== About / Contact ===== */
.sg{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.ag{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:60px}
.hg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cg{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.cf input,.cf textarea{width:100%;padding:14px 20px;border-radius:12px;border:var(--bd);background:var(--gl);color:var(--tx);font-size:15px;margin-bottom:16px;font-family:inherit}
.cf textarea{min-height:120px;resize:vertical}
.cf input:focus,.cf textarea:focus{outline:none;border-color:var(--p)}

/* ===== Utilities ===== */
.mu,.text-muted{color:var(--mu)}
.mt3,.mt-3{margin-top:1rem}.mt-2{margin-top:.5rem}
.mt5{margin-top:3rem}
.tc,.text-center{text-align:center}
.fb2{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:32px}

/* ===== Hero Decorative ===== */
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-bg-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 0%,var(--bg) 75%)}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px}
.hero-content{position:relative;z-index:1;max-width:800px;padding:0 20px}

/* ========================================
   📱 手机端适配 (Responsive)
   ======================================== */

/* Tablet: 1024px */
@media(max-width:1024px){
.gd,.services-grid,.cases-grid,.hg{grid-template-columns:repeat(2,1fr)}
}

/* Mobile: 768px */
@media(max-width:768px){
:root{--nh:60px}
.mb,.mobile-toggle{display:block;font-size:28px}
.nm,.nav-menu{
    position:fixed;top:var(--nh);left:0;right:0;
    background:rgba(10,14,39,.98);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
    flex-direction:column;padding:24px 20px;gap:8px;
    transform:translateY(-100%);opacity:0;transition:var(--tr);pointer-events:none;
    border-bottom:1px solid rgba(255,255,255,.05);
    border-bottom-left-radius:24px;border-bottom-right-radius:24px;
    box-shadow:0 20px 50px rgba(0,0,0,.5);
    max-height:calc(100vh - var(--nh));overflow-y:auto;z-index:999
}
.nm.open,.nav-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}
.na,.nav-link{
    padding:16px 20px;font-size:16px;font-weight:600;
    background:rgba(255,255,255,.02);border-radius:12px;
    text-align:center;transition:var(--tr)
}
.na.act,.na:hover,.nav-link.active{background:rgba(0,229,255,.1);color:var(--p)}
.na.act::after{display:none} /* Hide underline on mobile */

/* Horizontal Scroll for Tags */
.fb2{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:12px;gap:12px;
    scrollbar-width:none; /* Firefox */
}
.fb2::-webkit-scrollbar{display:none} /* Chrome */
.fb2 .btn{flex-shrink:0;padding:10px 24px;font-size:14px;border-radius:24px}

.gd,.services-grid,.cases-grid,.sg,.ag,.cg{grid-template-columns:1fr;gap:24px}
.ci,.case-img,.cif{height:200px}
.hero{min-height:auto;padding:140px 20px 80px}
.hero h1{font-size:2.2rem;margin-bottom:16px;line-height:1.3}
.hero p{font-size:1.1rem;padding:0 10px;margin-bottom:32px;opacity:0.9}
.hero-btns{display:flex;flex-direction:column;gap:16px;align-items:center;width:100%}
.hero-btns .btn{width:100%;max-width:320px;text-align:center}

.sh,.section-title{margin-bottom:40px}
.sh h2,.section-title h2{font-size:1.8rem;margin-bottom:12px}
.sh p,.section-subtitle{font-size:1rem}
.sc,.service-card{padding:30px 24px}
.hc,.icon-box{font-size:40px;margin-bottom:16px}
.dt{font-size:1.8rem;line-height:1.4}.dc{font-size:16px;padding:30px 20px;border-radius:20px}.dc h2{font-size:1.4rem}
.fg,.footer-grid{grid-template-columns:1fr;gap:32px}
.hg{grid-template-columns:1fr}
.sec,.section{padding:80px 0}
.ft,.footer{padding:50px 0 20px}
.footer-contact ul li,.footer li{font-size:14px;line-height:1.8}
.ca,.case-card{margin-bottom:8px}
.cfo,.case-info{padding:20px}
.ct2{font-size:1.1rem;margin-bottom:10px}
.cd,.case-info p{font-size:14px;opacity:0.9}
.pg button{padding:10px 16px;font-size:14px}
.lo img,.logo img{height:32px}
.dc p { text-indent: 0 !important; margin-bottom: 20px !important; line-height: 1.9; }
.dc img { margin: 24px auto !important; border-radius: 12px !important; }
.mt5 { text-align: center; margin-top: 2rem; }
}

/* Small Mobile: 480px */
@media(max-width:480px){
.hero{padding:120px 16px 60px}
.hero h1{font-size:1.8rem}
.hero p{font-size:0.95rem;margin-bottom:24px}
.sh h2,.section-title h2{font-size:1.5rem}
.sh p,.section-subtitle{font-size:0.9rem}
.dt{font-size:1.5rem;line-height:1.4}
.dc{font-size:15px;line-height:1.8;padding:24px 16px;border-radius:16px}
.bk{font-size:14px;margin-bottom:20px;padding:8px 12px;background:rgba(255,255,255,0.03);border-radius:12px;border:1px solid rgba(255,255,255,0.05)}
.dcv{margin:20px 0;border-radius:12px}
.ci,.case-img,.cif{height:180px}
.cfo,.case-info{padding:16px}
.ct2{font-size:1rem}
.cd,.case-info p{font-size:13px}
.ft,.footer{padding:40px 0 20px}
.fg,.footer-grid{gap:24px}
.footer li{font-size:13px}
.fb,.footer-bottom{font-size:12px;padding-top:24px}
.lo img,.logo img{height:28px}
.sc,.service-card{padding:24px 20px}
.hc,.icon-box{font-size:36px}
}