{} *{} {} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root { --bg1: #0b1220; --bg2: #0f1b33; --card: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.12); --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.70); --button: #ffffff; --buttonText: #0b1220; --shadow: 0 20px 60px rgba(0,0,0,0.45); --radius: 18px; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: radial-gradient(900px 600px at 15% 20%, rgba(90,160,255,0.20), transparent 60%), radial-gradient(900px 600px at 85% 25%, rgba(255,130,180,0.18), transparent 60%), linear-gradient(180deg, #0b1220, #0f1b33); } .wrap { width: 100%; max-width: 820px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px 28px; backdrop-filter: blur(10px); } .top { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; } .brand { display: flex; gap: 14px; align-items: center; } .logo { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05)); border: 1px solid var(--border); display: grid; place-items: center; font-weight: 800; letter-spacing: 0.5px; } h1 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.1; margin: 6px 0 10px; } p { margin: 0 0 14px; color: var(--muted); font-size: 16px; line-height: 1.5; } .ctaRow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; align-items: center; } .btn { appearance: none; border: 0; border-radius: 999px; padding: 14px 18px; font-weight: 700; font-size: 16px; cursor: pointer; background: var(--button); color: var(--buttonText); transition: transform 120ms ease, opacity 120ms ease; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); opacity: 0.9; } .btnSecondary { background: transparent; color: var(--text); border: 1px solid var(--border); font-weight: 650; } .chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .chip { border: 1px solid var(--border); background: rgba(255,255,255,0.04); padding: 8px 10px; border-radius: 999px; font-size: 13px; color: var(--muted); } .fineprint { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,0.55); } .divider { height: 1px; background: rgba(255,255,255,0.10); margin: 22px 0; } .footer { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 10px; color: rgba(255,255,255,0.55); font-size: 12px; } .footer a { color: rgba(255,255,255,0.70); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,0.35); } .icon { width: 18px; height: 18px; display: inline-block; } :root { --bg1: #0b1220; --bg2: #0f1b33; --card: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.12); --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.70); --button: #ffffff; --buttonText: #0b1220; --shadow: 0 20px 60px rgba(0,0,0,0.45); --radius: 18px; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; background: radial-gradient(900px 600px at 15% 20%, rgba(90,160,255,0.20), transparent 60%), radial-gradient(900px 600px at 85% 25%, rgba(255,130,180,0.18), transparent 60%), linear-gradient(180deg, var(--bg1), var(--bg2)); display: grid; place-items: center; padding: 24px; } .wrap { width: 100%; max-width: 820px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px 28px; backdrop-filter: blur(10px); } .top { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; } .brand { display: flex; gap: 14px; align-items: center; } .logo { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05)); border: 1px solid var(--border); display: grid; place-items: center; font-weight: 800; letter-spacing: 0.5px; } h1 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.1; margin: 6px 0 10px; } p { margin: 0 0 14px; color: var(--muted); font-size: 16px; line-height: 1.5; } .ctaRow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; align-items: center; } .btn { appearance: none; border: 0; border-radius: 999px; padding: 14px 18px; font-weight: 700; font-size: 16px; cursor: pointer; background: var(--button); color: var(--buttonText); transition: transform 120ms ease, opacity 120ms ease; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); opacity: 0.9; } .btnSecondary { background: transparent; color: var(--text); border: 1px solid var(--border); font-weight: 650; } .chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .chip { border: 1px solid var(--border); background: rgba(255,255,255,0.04); padding: 8px 10px; border-radius: 999px; font-size: 13px; color: var(--muted); } .fineprint { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,0.55); } .divider { height: 1px; background: rgba(255,255,255,0.10); margin: 22px 0; } .footer { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 10px; color: rgba(255,255,255,0.55); font-size: 12px; } .footer a { color: rgba(255,255,255,0.70); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,0.35); } .icon { width: 18px; height: 18px; display: inline-block; }