/* service-brand.css - Auto extracted */

:root {
  --ac: #db2777;
  --ac-light: #ec4899;
  --ac-dark: #be185d;
  --ac-bg: rgba(219,39,119,0.08);
  --ac-glow: rgba(219,39,119,0.25);
  --dark: #0f172a;
  --text: #334155;
  --text-light: #64748b;
  --white: #ffffff;
  --bg: #fdf2f8;
  --border: #e2e8f0;
  --gradient: linear-gradient(135deg, #db2777, #f472b6);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Noto Sans SC', sans-serif; color: var(--text); background: var(--white); line-height: 1.7; overflow-x: hidden; }

@keyframes fadeUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes slideX { 0%,100%{transform:translateX(0)} 50%{transform:translateX(10px)} }
.anim { opacity:0; }
.anim.visible { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

/* 导航 */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:0 48px; height:72px; display:flex; align-items:center; justify-content:space-between; transition:all 0.3s; background:transparent; }
.nav.scrolled { background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); box-shadow:0 2px 20px rgba(0,0,0,0.06); }
.nav-logo img { height:32px; }
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a { text-decoration:none; color:var(--text); font-weight:500; font-size:15px; transition:color 0.3s; }
.nav-links a:hover { color:var(--ac); }
.nav-cta { padding:8px 24px; background:var(--gradient); color:var(--white)!important; border-radius:8px; font-weight:500; text-decoration:none; font-size:14px; transition:all 0.3s; }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 6px 20px var(--ac-glow); }
.nav-mb { display:none; background:none; border:none; font-size:24px; color:var(--dark); cursor:pointer; }
@media(max-width:768px){ .nav{padding:0 20px} .nav-links,.nav-cta{display:none} .nav-mb{display:block} }

/* Banner */
.banner { position:relative; min-height:100vh; display:flex; align-items:center; padding:120px 48px 80px; background:linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #fff1f2 100%); overflow:hidden; }
.banner-shape { position:absolute; border-radius:50%; opacity:0.3; filter:blur(80px); }
.banner-shape.s1 { width:600px; height:600px; background:var(--gradient); top:-200px; right:-100px; animation:float 10s ease-in-out infinite; }
.banner-shape.s2 { width:400px; height:400px; background:linear-gradient(135deg, #f472b6, #fb7185); bottom:-100px; left:-50px; animation:float 8s ease-in-out infinite reverse; }
.banner-shape.s3 { width:300px; height:300px; background:linear-gradient(135deg, #fbbf24, #f59e0b); top:30%; left:10%; animation:float 6s ease-in-out infinite; }
.banner-cnt { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1; }
.banner-left { }
.banner-tag { display:inline-flex; align-items:center; gap:8px; background:var(--ac-bg); color:var(--ac); padding:8px 20px; border-radius:999px; font-size:13px; font-weight:600; margin-bottom:24px; }
.banner-title { font-size:56px; font-weight:900; color:var(--dark); line-height:1.15; margin-bottom:24px; }
.banner-title span { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.banner-desc { font-size:18px; color:var(--text-light); line-height:1.8; margin-bottom:32px; max-width:520px; }
.banner-btns { display:flex; gap:16px; flex-wrap:wrap; }
.btn-primary { display:inline-flex; align-items:center; gap:8px; padding:16px 36px; background:var(--gradient); color:var(--white); border-radius:12px; font-size:16px; font-weight:700; text-decoration:none; transition:all 0.3s; box-shadow:0 8px 24px var(--ac-glow); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 32px var(--ac-glow); }
.btn-secondary { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; border:2px solid var(--ac); color:var(--ac); border-radius:12px; font-size:15px; font-weight:600; text-decoration:none; transition:all 0.3s; }
.btn-secondary:hover { background:var(--ac); color:var(--white); }
.banner-stats { display:flex; gap:48px; margin-top:48px; }
.stat-item { text-align:left; }
.stat-num { font-size:40px; font-weight:900; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.stat-label { font-size:14px; color:var(--text-light); margin-top:8px; }
.banner-right { position:relative; }
.works-preview { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.work-item { border-radius:16px; overflow:hidden; box-shadow:0 12px 32px rgba(219,39,119,0.15); transition:all 0.4s; }
.work-item:hover { transform:scale(1.05) rotate(2deg); box-shadow:0 20px 40px rgba(219,39,119,0.25); }
.work-item img { width:100%; height:140px; object-fit:cover; }
.work-placeholder { width:100%; height:140px; background:var(--gradient); display:flex; align-items:center; justify-content:center; }
.work-placeholder i { font-size:40px; color:var(--white); opacity:0.8; }
@media(max-width:1024px){ .banner-cnt{grid-template-columns:1fr; text-align:center} .banner-desc{margin:0 auto 32px} .banner-btns{justify-content:center} .banner-stats{justify-content:center} .banner-right{display:none} }
@media(max-width:768px){ .banner{padding:100px 20px 60px} .banner-title{font-size:36px} .banner-stats{flex-direction:column; gap:20px; align-items:center} }

/* 通用 */
.section { padding:100px 48px; }
.section-alt { background:var(--bg); }
.container { max-width:1200px; margin:0 auto; }
.section-hd { text-align:center; margin-bottom:60px; }
.section-tag { display:inline-flex; align-items:center; gap:8px; background:var(--ac-bg); color:var(--ac); padding:8px 20px; border-radius:999px; font-size:13px; font-weight:600; margin-bottom:16px; }
.section-title { font-size:42px; font-weight:900; color:var(--dark); margin-bottom:16px; }
.section-title span { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section-desc { font-size:17px; color:var(--text-light); max-width:640px; margin:0 auto; }
@media(max-width:768px){ .section{padding:60px 20px} .section-title{font-size:28px} }

/* 服务范围 */
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.service-card { background:var(--white); border-radius:20px; padding:36px; border:1px solid var(--border); transition:all 0.4s; position:relative; overflow:hidden; }
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--gradient); transform:scaleX(0); transition:transform 0.4s; }
.service-card:hover::before { transform:scaleX(1); }
.service-card:hover { transform:translateY(-10px); box-shadow:0 20px 50px rgba(219,39,119,0.12); border-color:transparent; }
.service-icon { width:64px; height:64px; border-radius:16px; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--white); margin-bottom:24px; }
.service-card h3 { font-size:20px; font-weight:700; color:var(--dark); margin-bottom:12px; }
.service-card p { font-size:15px; color:var(--text-light); line-height:1.7; }
@media(max-width:1024px){ .service-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:768px){ .service-grid{grid-template-columns:1fr} }

/* 设计理念 */
.philosophy-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.philosophy-card { background:var(--white); border-radius:20px; padding:32px 24px; text-align:center; border:1px solid var(--border); transition:all 0.4s; }
.philosophy-card:hover { transform:translateY(-8px); box-shadow:0 16px 40px rgba(219,39,119,0.12); border-color:var(--ac); }
.philosophy-icon { width:56px; height:56px; border-radius:50%; background:var(--ac-bg); display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--ac); margin:0 auto 16px; transition:all 0.4s; }
.philosophy-card:hover .philosophy-icon { background:var(--gradient); color:var(--white); transform:scale(1.1); }
.philosophy-card h3 { font-size:16px; font-weight:700; color:var(--dark); margin-bottom:8px; }
.philosophy-card p { font-size:14px; color:var(--text-light); line-height:1.6; }
@media(max-width:1024px){ .philosophy-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:768px){ .philosophy-grid{grid-template-columns:1fr} }

/* 成果数据 */
.result-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.result-card { background:var(--white); border-radius:20px; padding:36px 24px; text-align:center; border:1px solid var(--border); transition:all 0.3s; }
.result-card:hover { transform:translateY(-6px); box-shadow:0 12px 32px rgba(219,39,119,0.1); border-color:var(--ac); }
.result-icon { width:52px; height:52px; border-radius:14px; background:var(--ac-bg); display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--ac); margin:0 auto 16px; }
.result-num { font-size:40px; font-weight:900; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.result-label { font-size:14px; color:var(--text-light); margin-top:8px; }
@media(max-width:1024px){ .result-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:768px){ .result-grid{grid-template-columns:1fr} }

/* 优势 */
.adv-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.adv-card { background:var(--white); border-radius:20px; padding:32px 24px; text-align:center; border:1px solid var(--border); transition:all 0.4s; }
.adv-card:hover { transform:translateY(-8px); box-shadow:0 16px 40px rgba(219,39,119,0.12); border-color:var(--ac); }
.adv-icon { width:64px; height:64px; border-radius:50%; background:var(--ac-bg); display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--ac); margin:0 auto 20px; transition:all 0.4s; }
.adv-card:hover .adv-icon { background:var(--gradient); color:var(--white); transform:scale(1.1); }
.adv-card h3 { font-size:16px; font-weight:700; color:var(--dark); margin-bottom:8px; }
.adv-card p { font-size:14px; color:var(--text-light); line-height:1.6; }
@media(max-width:1024px){ .adv-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:768px){ .adv-grid{grid-template-columns:1fr} }

/* 流程 */
.process-grid { display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; }
.process-step { text-align:center; width:160px; position:relative; }
.process-circle { width:80px; height:80px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:32px; color:var(--white); box-shadow:0 8px 24px var(--ac-glow); transition:all 0.3s; }
.process-step:hover .process-circle { transform:scale(1.1); }
.process-num { font-size:12px; font-weight:700; color:var(--text-light); margin-bottom:8px; letter-spacing:2px; }
.process-step h4 { font-size:15px; font-weight:700; color:var(--dark); margin-bottom:6px; }
.process-step p { font-size:13px; color:var(--text-light); }
.process-arrow { width:60px; height:2px; background:var(--gradient); margin:0 8px; margin-bottom:70px; }
@media(max-width:768px){ .process-grid{flex-direction:column} .process-arrow{width:2px; height:40px; margin:0} }

/* CTA */
.cta { background:var(--gradient); padding:100px 48px; text-align:center; }
.cta-cnt { max-width:800px; margin:0 auto; }
.cta h2 { font-size:48px; font-weight:900; color:var(--white); margin-bottom:20px; }
.cta p { font-size:18px; color:rgba(255,255,255,0.9); margin-bottom:40px; }
.cta-btns { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.cta-btn-primary { display:inline-flex; align-items:center; gap:10px; padding:18px 40px; background:var(--white); color:var(--ac); border-radius:12px; font-size:17px; font-weight:700; text-decoration:none; transition:all 0.3s; }
.cta-btn-primary:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.2); }
.cta-btn-secondary { display:inline-flex; align-items:center; gap:10px; padding:16px 36px; border:2px solid rgba(255,255,255,0.5); color:var(--white); border-radius:12px; font-size:16px; font-weight:600; text-decoration:none; transition:all 0.3s; }
.cta-btn-secondary:hover { background:rgba(255,255,255,0.15); border-color:var(--white); }
@media(max-width:768px){ .cta{padding:60px 20px} .cta h2{font-size:32px} }

/* Footer */
.footer { background:#0f172a; padding:60px 48px 32px; }
.ft-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.ft-brand img { height:32px; margin-bottom:16px; filter:brightness(0) invert(1); }
.ft-brand p { font-size:14px; color:#64748b; line-height:1.8; }
.ft-col h4 { font-size:15px; font-weight:700; color:#e2e8f0; margin-bottom:16px; }
.ft-col ul { list-style:none; }
.ft-col li { margin-bottom:10px; }
.ft-col a { font-size:14px; color:#64748b; text-decoration:none; transition:color 0.3s; }
.ft-col a:hover { color:var(--ac-light); }
.ft-bottom { text-align:center; padding-top:32px; border-top:1px solid #1e293b; }
.ft-bottom p { font-size:13px; color:#475569; }
@media(max-width:768px){ .footer{padding:40px 20px 24px} .ft-grid{grid-template-columns:1fr 1fr; gap:24px} }

.progress-bar { position:fixed; top:0; left:0; height:3px; background:var(--gradient); z-index:9999; transition:width 0.1s; }