:root { color-scheme: light; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; color: #172b4d; background: #f3f7ff; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: radial-gradient(circle at 85% 5%, #dce9ff 0, transparent 30rem), #f3f7ff; }
.page-shell { width: min(100%, 520px); min-height: 100dvh; margin: auto; padding: max(28px, env(safe-area-inset-top)) 20px 24px; display: flex; flex-direction: column; }
.hero { display: flex; align-items: center; gap: 14px; padding: 16px 0 28px; }
.brand-mark { width: 52px; aspect-ratio: 1; display: grid; place-items: center; color: #fff; font-size: 25px; font-weight: 800; border-radius: 17px; background: linear-gradient(145deg, #2774ff, #1245bd); box-shadow: 0 10px 24px #155eef45; }
.hero-copy p { margin: 4px 0 0; color: #6a7b9a; font-size: 14px; }.eyebrow { color: #276bf4 !important; font-size: 10px !important; font-weight: 800; letter-spacing: .15em; }.hero h1 { margin: 0; font-size: 24px; letter-spacing: .02em; }
.notice { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 20px; padding: 13px 14px; color: #4a638c; font-size: 13px; line-height: 1.5; border: 1px solid #dbe8ff; border-radius: 14px; background: #fff9; }.notice span { color: #2469ee; }.notice p { margin: 0; }
.services { display: grid; gap: 13px; }.service-card { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 14px; color: inherit; text-decoration: none; background: #fff; border: 1px solid #e7edf8; border-radius: 18px; box-shadow: 0 8px 20px #3959830d; transition: transform .18s, box-shadow .18s, border-color .18s; }.service-card:hover, .service-card:focus-visible { transform: translateY(-2px); border-color: #8fb6ff; box-shadow: 0 12px 28px #1a59b626; outline: none; }.service-icon { width: 48px; flex: none; aspect-ratio: 1; display: grid; place-items: center; border-radius: 15px; color: #fff; font-size: 14px; font-weight: 800; }.blue { background: linear-gradient(135deg, #4389ff, #1556d5); }.violet { background: linear-gradient(135deg, #9b6cff, #6842d5); }.service-copy { display: grid; gap: 5px; }.service-copy strong { font-size: 16px; }.service-copy small { color: #7c8ba5; font-size: 12px; }.arrow { margin-left: auto; color: #3975e7; font-size: 22px; }
.domain-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; padding: 16px; border: 1px solid #dce8fc; border-radius: 17px; background: linear-gradient(110deg, #edf5ff, #f7faff); }.domain-card p { margin: 0 0 5px; color: #71809b; font-size: 12px; }.domain-card strong { font-size: 14px; }.domain-card span { padding: 7px 9px; color: #165edb; font-size: 11px; font-weight: 700; white-space: nowrap; border-radius: 99px; background: #dceaff; }footer { margin-top: auto; padding-top: 34px; color: #8895aa; text-align: center; font-size: 11px; line-height: 1.55; }footer p { margin: 3px 0; }
@media (min-width: 521px) { body { padding: 24px 0; }.page-shell { min-height: calc(100dvh - 48px); border-radius: 28px; background: #ffffffa6; box-shadow: 0 15px 50px #153e7620; } }