* { box-sizing: border-box; } :root { --bg-1: #050816; --bg-2: #0a1020; --text: #ffffff; --muted: rgba(255, 255, 255, 0.7); --border: rgba(255, 255, 255, 0.12); --panel: rgba(255, 255, 255, 0.04); --panel-hover: rgba(255, 255, 255, 0.08); } html, body { margin: 0; min-height: 100%; font-family: Inter, Arial, sans-serif; color: var(--text); background: radial-gradient(circle at top, rgba(120, 119, 198, 0.14), transparent 32%), linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-1) 100%); } body { min-height: 100vh; } .page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px 24px; text-align: center; } .hero { width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .logo { width: min(340px, 72vw); height: auto; display: block; } .code { margin: 0; font-size: clamp(1rem, 3vw, 1.1rem); line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } h1 { margin: 0; font-size: clamp(2.5rem, 7vw, 4.8rem); line-height: 0.98; font-weight: 700; letter-spacing: -0.05em; } p { margin: 0; max-width: 560px; font-size: 1.02rem; line-height: 1.5; color: var(--muted); } .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; } .button { display: inline-flex; align-items: center; justify-content: center; min-width: 156px; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); text-decoration: none; font-size: 1rem; line-height: 1; transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; backdrop-filter: blur(12px); } .button:hover { background: var(--panel-hover); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-1px); } footer { margin-top: 56px; font-size: 0.95rem; color: rgba(255, 255, 255, 0.5); } @media (max-width: 520px) { .page { padding-top: 40px; padding-bottom: 24px; } .hero { gap: 14px; } .actions { flex-direction: column; width: 100%; } .button { width: min(220px, 100%); } footer { margin-top: 40px; } }
