* { box-sizing: border-box; }
:root {
  color-scheme: dark;
  --bg: #080d18;
  --text: #f4f7ff;
  --muted: #9ba8bd;
  --blue: #68a9ff;
  --cyan: #5de2df;
}
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh; overflow-x: hidden; display: grid; place-items: center;
  padding: 28px; background: var(--bg); color: var(--text);
  font-family: 'DM Sans', sans-serif; position: relative;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22;
  background-image: linear-gradient(rgba(120,155,205,.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(120,155,205,.08) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse at center, black, transparent 78%);
}
.ambient { position: fixed; width: 420px; height: 420px; border-radius: 50%; filter: blur(110px); opacity: .16; pointer-events: none; }
.ambient-one { background: #1769d2; top: -220px; left: -120px; }
.ambient-two { background: #00a9a2; bottom: -260px; right: -120px; }
.page-shell { width: min(100%, 900px); min-height: min(760px, calc(100vh - 56px)); display: flex; flex-direction: column; position: relative; z-index: 1; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px 26px; border-bottom: 1px solid rgba(160,185,220,.13); }
.brand { display: inline-flex; gap: 11px; align-items: center; color: #dbe7f8; text-decoration: none; font-size: 11px; letter-spacing: .18em; font-weight: 700; }
.brand-mark { display: flex; align-items: end; gap: 3px; height: 19px; }
.brand-mark span { width: 4px; border-radius: 5px; background: linear-gradient(var(--cyan), var(--blue)); }
.brand-mark span:nth-child(1) { height: 10px; }.brand-mark span:nth-child(2) { height: 17px; }.brand-mark span:nth-child(3) { height: 13px; }
.status, .verified { display: inline-flex; align-items: center; gap: 8px; color: #a8b8cc; font-size: 10px; letter-spacing: .13em; font-weight: 700; }
.status i, .verified i { width: 7px; height: 7px; border-radius: 50%; background: #55d6a1; box-shadow: 0 0 12px #55d6a1; }
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 18px 72px; }
.eyebrow { display: flex; align-items: center; gap: 13px; color: #7f95b2; font-size: 10px; font-weight: 700; letter-spacing: .24em; }
.eyebrow-line { width: 25px; height: 1px; background: #36506f; }
.lock-wrap { width: 92px; height: 92px; display: grid; place-items: center; margin: 28px 0 25px; border: 1px solid rgba(105,169,255,.3); border-radius: 28px; background: linear-gradient(145deg, rgba(56,116,190,.18), rgba(18,34,57,.5)); box-shadow: 0 0 55px rgba(51,133,232,.12), inset 0 1px rgba(255,255,255,.08); position: relative; }
.lock-wrap svg { width: 43px; fill: none; stroke: #8fc4ff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lock-halo { position: absolute; inset: -9px; border: 1px solid rgba(105,169,255,.1); border-radius: 34px; }
h1 { margin: 0; font: 700 clamp(42px, 7vw, 72px)/1.04 'Space Grotesk', sans-serif; letter-spacing: -.055em; }
h1 span { color: transparent; background: linear-gradient(100deg, #79b7ff 10%, #5de2df 90%); background-clip: text; -webkit-background-clip: text; }
.intro { max-width: 490px; margin: 21px auto 32px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.domain-card { width: min(100%, 490px); display: flex; align-items: center; gap: 14px; padding: 17px 19px; border: 1px solid rgba(135,173,220,.2); border-radius: 15px; background: rgba(18,30,49,.72); box-shadow: 0 15px 50px rgba(0,0,0,.16); text-align: left; }
.domain-icon { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; border-radius: 11px; color: #9bcaff; background: rgba(73,139,220,.14); font-size: 20px; }
.domain-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.small-label { color: #8195af; font-size: 9px; letter-spacing: .16em; font-weight: 700; }
.domain-info strong { overflow-wrap: anywhere; color: #eef5ff; font: 600 17px 'Space Grotesk', sans-serif; }
.verified { color: #8bdcb9; font-size: 9px; letter-spacing: .1em; }
.notice { width: min(100%, 490px); display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 15px 18px; border: 1px solid rgba(93,226,223,.13); border-radius: 12px; background: rgba(23,91,91,.09); text-align: left; }
.notice-icon { color: var(--cyan); font-size: 17px; padding-top: 1px; }
.notice p { margin: 0; color: #91a7b9; font-size: 12px; line-height: 1.7; }
.notice strong { color: #dce9f5; font-weight: 600; }
.footer { display: flex; justify-content: space-between; gap: 14px; padding: 21px 2px 8px; border-top: 1px solid rgba(160,185,220,.13); color: #718198; font-size: 10px; letter-spacing: .04em; }
.footer-right { letter-spacing: .12em; font-size: 9px; }.footer-right b { color: #4f829e; padding: 0 5px; }
@media (max-width: 560px) {
  body { padding: 18px; }
  .page-shell { min-height: calc(100vh - 36px); }
  .topbar { padding-bottom: 20px; }
  .brand { font-size: 9px; }.status { font-size: 8px; letter-spacing: .08em; }
  .hero { padding: 48px 0 55px; }
  .intro { font-size: 14px; margin-top: 17px; }
  .domain-card { padding: 14px; gap: 10px; }.domain-info strong { font-size: 15px; }
  .verified { font-size: 8px; gap: 5px; }
  .footer { flex-direction: column; align-items: center; text-align: center; }
}