:root { --blue:#1463dc; --ink:#12213a; --muted:#65738a; --line:#e7edf6; --pale:#f4f8ff; --green:#14845d; --amber:#a96908; }
* { box-sizing:border-box; }
body { margin:0; background:#fff; color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.shell { max-width:1180px; margin:auto; padding:0 28px 64px; }
.topbar { height:84px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:21px; font-weight:760; text-decoration:none; letter-spacing:-.7px; }.brand > span:last-child span { color:var(--blue); }.brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; background:var(--blue); color:#fff; font-size:17px; }
.secure { color:var(--muted); font-size:14px; display:flex; gap:7px; align-items:center; }.secure i { width:8px; height:8px; background:var(--green); border-radius:100%; }
.hero { padding:70px 0 42px; display:flex; justify-content:space-between; gap:24px; align-items:flex-end; }.eyebrow { color:var(--blue); font-size:12px; font-weight:800; letter-spacing:1.3px; margin:0 0 12px; }.hero h1,.next-steps h2 { margin:0; letter-spacing:-1.5px; font-size:42px; }.hero-copy { max-width:590px; color:var(--muted); line-height:1.65; margin:13px 0 0; font-size:16px; }.service-status { background:#ecfaf4; color:#116344; border-radius:999px; padding:10px 14px; white-space:nowrap; font-size:14px; font-weight:650; display:flex; align-items:center; gap:8px; }.pulse { display:inline-block; width:8px; height:8px; background:#1ab67d; border-radius:50%; box-shadow:0 0 0 4px #d5f3e6; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.card { border:1px solid var(--line); border-radius:16px; padding:21px; min-height:226px; background:#fff; box-shadow:0 7px 20px rgba(31,72,131,.035); }.primary-card { background:linear-gradient(140deg,#f4f8ff,#fff); border-color:#cfe0fb; }.card-top { display:flex; justify-content:space-between; align-items:center; }.icon { display:grid; place-items:center; width:36px; height:36px; background:#eaf2ff; color:var(--blue); border-radius:10px; font-weight:800; font-size:19px; }.badge { font-size:11px; padding:5px 8px; border-radius:999px; background:#fff7e7; color:var(--amber); font-weight:750; }.badge.connected,.badge.ready,.badge.active { background:#eaf8f1; color:var(--green); }.card-label { margin:25px 0 7px; font-size:13px; color:var(--muted); }.card h2 { font-size:18px; margin:0; letter-spacing:-.4px; }.card-detail { color:var(--muted); font-size:13px; line-height:1.5; margin:8px 0 0; }.card-foot { color:var(--blue); font-size:12px; font-weight:650; margin:18px 0 0; } code { color:#315275; font-size:11px; overflow-wrap:anywhere; }
.notice { margin-top:28px; display:flex; gap:14px; align-items:flex-start; border:1px solid #d9e9ff; background:var(--pale); padding:20px; border-radius:15px; }.notice-icon { display:grid; place-items:center; flex:0 0 23px; width:23px; height:23px; color:#fff; background:var(--blue); border-radius:50%; font-size:13px; font-family:Georgia,serif; }.notice strong { font-size:14px; }.notice p { margin:5px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
.next-steps { margin-top:54px; border-top:1px solid var(--line); padding-top:33px; display:flex; align-items:center; justify-content:space-between; gap:45px; }.next-steps h2 { font-size:26px; }.next-steps ol { max-width:480px; color:var(--muted); line-height:1.8; font-size:14px; margin:0; padding-left:23px; }
@media (max-width:850px) { .cards { grid-template-columns:repeat(2,1fr); }.hero,.next-steps { align-items:flex-start; flex-direction:column; }.hero { padding-top:48px; }.next-steps { gap:20px; } }
@media (max-width:540px) { .shell { padding:0 18px 40px; }.topbar { height:68px; }.secure { font-size:12px; }.hero h1 { font-size:34px; }.cards { grid-template-columns:1fr; }.card { min-height:190px; }.service-status { white-space:normal; }.hero { padding-bottom:28px; } }