:root {
  --primary: #1e3a5f;
  --primary-light: #2a5a8f;
  --accent: #0ea5e9;
  --accent-dark: #0284c7;
  --bg: #ffffff;
  --bg-alt: #f1f5f9;
  --text: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(15,23,42,0.08);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; color:var(--text); line-height:1.7; background:var(--bg); }
img { max-width:100%; height:auto; display:block; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* Header */
.site-header { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.site-header .container { display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo { font-size:18px; font-weight:700; color:var(--primary); letter-spacing:0.5px; }
.nav a { margin-left:28px; font-size:14px; color:var(--text-secondary); text-decoration:none; transition:color .2s; }
.nav a:hover { color:var(--accent); }

/* Hero */
.hero { position:relative; min-height:580px; display:flex; align-items:center; overflow:hidden; margin-top:64px; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; filter:brightness(0.45); }
.hero .container { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.hero-tag { display:inline-block; padding:6px 14px; border-radius:99px; background:rgba(14,165,233,0.15); border:1px solid rgba(14,165,233,0.3); color:#7dd3fc; font-size:13px; margin-bottom:16px; }
.hero h1 { font-size:42px; font-weight:700; color:#fff; line-height:1.2; letter-spacing:1px; }
.hero p { font-size:16px; color:#cbd5e1; margin-top:16px; max-width:520px; line-height:1.8; }
.hero-visual { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius); padding:24px; backdrop-filter:blur(4px); }
.hero-visual img { border-radius:8px; width:100%; height:260px; object-fit:cover; }

/* Section common */
.section { padding:80px 0; }
.section-alt { background:var(--bg-alt); }
.section-header { text-align:center; max-width:720px; margin:0 auto 56px; }
.section-header h2 { font-size:30px; font-weight:700; color:var(--text); letter-spacing:0.5px; }
.section-header p { font-size:15px; color:var(--text-muted); margin-top:12px; line-height:1.8; }

/* Intro */
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.intro-text h3 { font-size:22px; font-weight:700; color:var(--text); margin-bottom:16px; }
.intro-text p { color:var(--text-secondary); font-size:15px; margin-bottom:12px; }
.intro-img { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.intro-img img { width:100%; height:320px; object-fit:cover; }

/* Metrics */
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; }
.metric-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:28px; text-align:center; transition:transform .2s,box-shadow .2s; }
.metric-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.metric-card .num { font-size:32px; font-weight:800; color:var(--primary); }
.metric-card .label { font-size:13px; color:var(--text-muted); margin-top:6px; }

/* Features */
.features-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.feature-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .2s,box-shadow .2s; }
.feature-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.feature-img { aspect-ratio:4/3; max-height:420px; background:#fff; overflow:hidden; border-bottom:1px solid var(--border); }
.feature-img img { width:100%; height:100%; object-fit:contain; }
.feature-body { padding:28px; }
.feature-body h4 { font-size:18px; font-weight:700; color:var(--text); margin-bottom:10px; }
.feature-body p { font-size:14px; color:var(--text-secondary); line-height:1.8; }
.feature-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.feature-tags span { font-size:12px; padding:4px 10px; border-radius:99px; background:#eef2ff; color:#4338ca; }

/* Case */
.case-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.case-img { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.case-img img { width:100%; height:360px; object-fit:cover; }
.case-body h3 { font-size:22px; font-weight:700; color:var(--text); margin-bottom:16px; }
.case-body p { color:var(--text-secondary); font-size:15px; margin-bottom:12px; }
.case-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
.case-stat { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; text-align:center; }
.case-stat .n { font-size:24px; font-weight:800; color:var(--primary); }
.case-stat .t { font-size:12px; color:var(--text-muted); margin-top:4px; }

/* CTA */
.cta-section { background:var(--primary); padding:64px 0; text-align:center; }
.cta-section h2 { color:#fff; font-size:28px; font-weight:700; }
.cta-section p { color:#94a3b8; margin-top:10px; font-size:15px; }
.cta-btn { display:inline-block; margin-top:24px; padding:14px 36px; background:var(--accent); color:#fff; font-size:15px; font-weight:600; border-radius:8px; text-decoration:none; transition:background .2s; }
.cta-btn:hover { background:var(--accent-dark); }

/* Footer */
.footer { background:#0b1220; color:#94a3b8; padding:56px 0 24px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:40px; }
.footer-brand { font-size:16px; font-weight:700; color:#e2e8f0; margin-bottom:10px; }
.footer-desc { font-size:13px; line-height:1.7; color:#64748b; }
.footer h4 { font-size:13px; font-weight:600; color:#e2e8f0; margin-bottom:12px; text-transform:uppercase; letter-spacing:0.5px; }
.footer a, .footer p { font-size:13px; color:#94a3b8; text-decoration:none; line-height:2; }
.footer a:hover { color:#fff; }
.footer-bottom { border-top:1px solid #1e293b; margin-top:36px; padding-top:20px; display:flex; justify-content:space-between; font-size:12px; color:#475569; }

@media (max-width:900px) {
  .hero .container { grid-template-columns:1fr; }
  .intro-grid, .case-grid { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }
  .metrics-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .hero h1 { font-size:30px; }
}
@media (max-width:560px) {
  .metrics-grid { grid-template-columns:1fr; }
  .case-stats { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .nav { display:none; }
}