* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  line-height: 1.8;
  color: #e8eefc;
  background: radial-gradient(circle at top, #13213d 0%, #08101f 45%, #050914 100%);
}
a { color: #7fb3ff; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; border-radius: 18px; }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.topbar { position: sticky; top: 0; background: rgba(5,9,20,.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.08); z-index: 10; }
.navwrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 700; }
.brand img { width: 42px; height: 42px; object-fit: cover; border-radius: 12px; }
.nav { display: flex; gap: 16px; flex-wrap: wrap; }
.hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; padding: 56px 0 24px; align-items: center; }
.eyebrow { color: #93b7ff; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.08; margin: 10px 0 18px; }
.lead { font-size: 18px; color: #c8d6f7; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 24px 0; }
.btn { padding: 12px 20px; border-radius: 999px; font-weight: 700; }
.primary { background: linear-gradient(135deg, #6ea8ff, #3a6df0); color: #fff; }
.secondary { border: 1px solid rgba(255,255,255,.2); color: #fff; }
.highlights { padding-left: 18px; color: #d5def7; }
.cardgrid, .feature-list, .linkgrid, .footgrid { display: grid; gap: 18px; }
.cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px 0; }
.card, .panel, .content-block, .feature { background: rgba(9,16,31,.82); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 24px; box-shadow: 0 18px 60px rgba(0,0,0,.22); }
.content-block { margin: 18px auto; }
.feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 0; }
.feature img { height: 220px; width: 100%; object-fit: cover; margin-bottom: 16px; }
.linkgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.linkgrid a { padding: 14px 16px; background: rgba(255,255,255,.05); border-radius: 14px; }
.footer { border-top: 1px solid rgba(255,255,255,.08); margin-top: 34px; padding: 24px 0; color: #9fb1d9; }
.footgrid { grid-template-columns: 1fr auto; align-items: center; }
.footgrid div { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .hero, .cardgrid, .feature-list, .linkgrid, .footgrid { grid-template-columns: 1fr; }
}