
:root{
  --brand:#0e5ba8;
  --brand-alt:#ff7a00;
  --text:#1a1a1a;
  --muted:#666;
  --bg:#ffffff;
  --bg-alt:#f7f9fc;
  --border:#e6e9ef;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,PingFang SC,Microsoft YaHei;color:var(--text);background:#fff}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.85}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:100}
.topbar{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700}
nav ul{display:flex;gap:14px;list-style:none;padding:0;margin:0}
nav a{display:inline-block;padding:10px 12px;border-radius:8px}
nav a.active, nav a:hover{background:var(--bg-alt)}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:10px 16px;border-radius:8px;transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn-outline{background:transparent;border:0;color:var(--brand);padding:0}
.hero{background:linear-gradient(180deg,#f3f7ff,transparent);padding:56px 0}
.hero h1{font-size:34px;margin:0 0 8px}
.hero p{color:var(--muted);margin:0 0 24px}
.section{padding:40px 0}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 4;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-1px)}
.notice{padding:12px;border-left:4px solid var(--brand);background:#f7fbff;border:1px solid var(--border);border-radius:8px}
footer{margin-top:40px;border-top:1px solid var(--border);background:#fff}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px;padding:24px 0}
.small{font-size:12px;color:var(--muted)}
.partner-logos{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.partner-logos .logo-box{width:120px;height:40px;border:1px dashed var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px;background:#fff}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testimonials .item{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px}
/* mobile nav */
.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);border-radius:8px;background:#fff}
.nav-overlay{display:none}
@media (max-width: 960px){ .card{grid-column:span 6} .footer-inner{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){
  nav ul{
    display:none;
    position:fixed;top:64px;right:0;bottom:0;
    width:78%;max-width:340px;background:#fff;
    flex-direction:column;gap:0;padding:12px;border-left:1px solid var(--border);
    box-shadow:-8px 0 18px rgba(0,0,0,.08);
    z-index:1001; transform: translateX(100%); opacity:0; transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle{display:inline-flex;z-index:1002}
  header .nav-overlay{display:none;position:fixed;left:0;right:0;top:64px;bottom:0;background:rgba(0,0,0,.3);z-index:1000}
  header.mobile-open nav ul{display:flex;transform:translateX(0);opacity:1}
  header.mobile-open .nav-overlay{display:block}
  .card{grid-column:span 12}
  .footer-inner{grid-template-columns:1fr}
}
/* cookie bar */
.cookiebar{position:fixed;left:0;right:0;bottom:0;background:#0e5ba8;color:#fff;padding:10px;display:none;z-index:9999}
.cookiebar .inner{max-width:1200px;margin:0 auto;display:flex;gap:10px;align-items:center;justify-content:space-between}
.cookiebar button{background:#fff;color:#0e5ba8;border:0;padding:8px 12px;border-radius:6px}
