/* === 阿里邮箱西南服务中心 - 全局设计系统 === */
:root {
  --color-primary: #1677FF;
  --color-primary-dark: #0958D9;
  --color-primary-light: #4096FF;
  --color-accent: #FF6A00;
  --color-accent-light: #FF8800;
  --color-bg: #FFFFFF;
  --color-bg-gray: #F7F8FA;
  --color-text: #1D2129;
  --color-text-secondary: #4E5969;
  --color-text-muted: #86909C;
  --color-border: #E5E6EB;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.08);
  --shadow-blue: 0 4px 20px rgba(22,119,255,.2);
}

/* === Header === */
.site-header{
  position:fixed;top:0;left:0;width:100%;height:64px;
  background:var(--color-bg);z-index:1000;display:flex;align-items:center;
  border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm)
}
.header-inner{
  width:100%;max-width:1200px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between
}
.header-logo{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:var(--color-text);white-space:nowrap;flex-shrink:0}
.header-logo img{height:36px}
.header-nav{display:flex;align-items:center;gap:4px}
.header-nav a{padding:8px 16px;font-size:14px;font-weight:500;color:var(--color-text-secondary);border-radius:4px}
.header-nav a:hover{color:var(--color-primary)}
.header-nav a.active{color:var(--color-primary);font-weight:600}
.header-cta{padding:8px 20px;background:var(--color-primary);color:#fff!important;font-size:14px;font-weight:500;border-radius:4px}
.header-cta:hover{background:var(--color-primary-dark)}

/* === Top Banner === */
.top-banner{
  background:linear-gradient(90deg,var(--color-accent) 0%,var(--color-accent-light) 100%);
  color:#fff;text-align:center;padding:8px 20px;
  font-size:13px;font-weight:500;letter-spacing:.5px
}
.top-banner strong{font-weight:700}
.top-banner a{color:#fff;text-decoration:underline}

/* === Page Title Hero === */
.page-hero{
  background:linear-gradient(135deg,#F0F5FF 0%,#E8F0FF 50%,#F5F0FF 100%);
  padding:60px 24px;text-align:center
}
.page-hero h1{font-size:42px;font-weight:800;color:var(--color-text);margin-bottom:12px}
.page-hero p{font-size:16px;color:var(--color-text-muted);max-width:600px;margin:0 auto}

/* === Section === */
.section{padding:80px 24px}
.section-alt{background:linear-gradient(180deg,#F8FAFF 0%,#fff 100%)}
.section-inner{max-width:1200px;margin:0 auto}
.section-header{text-align:center;margin-bottom:56px}
.section-header h2{font-size:36px;font-weight:800;color:var(--color-text);margin-bottom:12px}
.section-header p{font-size:15px;color:var(--color-text-muted)}

/* === Footer === */
.site-footer{background:linear-gradient(180deg,#1a1a2e 0%,#16213e 100%);color:#fff;padding:64px 24px 32px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand h3{font-size:20px;font-weight:800;margin-bottom:16px}
.footer-brand p{font-size:14px;color:rgba(255,255,255,.6);line-height:1.8}
.footer-col h4{font-size:14px;font-weight:700;color:#fff;margin-bottom:20px;letter-spacing:.5px}
.footer-col a{display:block;font-size:14px;color:rgba(255,255,255,.6);margin-bottom:12px;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-col p{font-size:14px;color:rgba(255,255,255,.6);margin-bottom:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-bottom .copy{font-size:13px;color:rgba(255,255,255,.5)}
.footer-bottom .legal{display:flex;gap:24px;font-size:13px;color:rgba(255,255,255,.5)}

/* === Responsive === */
@media(max-width:768px){
  .header-nav{display:none}
  .page-hero{padding:40px 16px}
  .page-hero h1{font-size:28px}
  .section{padding:60px 16px}
  .section-header h2{font-size:28px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;text-align:center}
}
body.dcc-has-banner{padding-bottom:56px}
@media(max-width:768px){body.dcc-has-banner{padding-bottom:48px}}