{} *{} {} #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; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Lato', sans-serif; background-color: #0f0f0f; color: #f5f0e8; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem; position: relative; overflow-x: hidden; } body::before { content: ''; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 20%, rgba(123, 76, 255, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(123, 76, 255, 0.05) 0%, transparent 50%); pointer-events: none; z-index: 0; } .container { max-width: 600px; width: 100%; text-align: center; position: relative; z-index: 1; animation: fadeUp 0.8s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .badge { display: inline-block; font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #7b4cff; border: 1px solid rgba(123, 76, 255, 0.4); padding: 6px 16px; border-radius: 100px; margin-bottom: 2rem; animation: fadeUp 0.8s ease 0.1s both; } .checkmark { width: 72px; height: 72px; border-radius: 50%; background: rgba(123, 76, 255, 0.12); border: 1.5px solid rgba(123, 76, 255, 0.3); display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; animation: fadeUp 0.8s ease 0.15s both; } .checkmark svg { width: 32px; height: 32px; stroke: #7b4cff; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: drawCheck 0.6s ease 0.6s forwards; } @keyframes drawCheck { to { stroke-dashoffset: 0; } } h1 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 700; color: #f5f0e8; line-height: 1.2; margin-bottom: 1rem; animation: fadeUp 0.8s ease 0.2s both; } h1 span { color: #7b4cff; } .subtitle { font-size: 1rem; font-weight: 300; color: rgba(245, 240, 232, 0.6); line-height: 1.7; margin-bottom: 3rem; animation: fadeUp 0.8s ease 0.3s both; } .divider { width: 48px; height: 1px; background: rgba(123, 76, 255, 0.4); margin: 0 auto 3rem; animation: fadeUp 0.8s ease 0.35s both; } .next-steps { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 3rem; animation: fadeUp 0.8s ease 0.4s both; } .step-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; text-align: left; } .step-card:hover { background: rgba(123, 76, 255, 0.08); border-color: rgba(123, 76, 255, 0.3); transform: translateY(-2px); } .step-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(123, 76, 255, 0.12); border: 1px solid rgba(123, 76, 255, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .step-icon svg { width: 18px; height: 18px; stroke: #7b4cff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .step-content p.step-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 240, 232, 0.35); margin-bottom: 2px; } .step-content p.step-title { font-size: 14px; font-weight: 400; color: rgba(245, 240, 232, 0.85); line-height: 1.4; } .step-arrow { margin-left: auto; flex-shrink: 0; } .step-arrow svg { width: 16px; height: 16px; stroke: rgba(245, 240, 232, 0.25); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .cta-button { display: inline-block; background: #7b4cff; color: #fff; font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; padding: 14px 32px; border-radius: 100px; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; margin-bottom: 3rem; animation: fadeUp 0.8s ease 0.5s both; } .cta-button:hover { background: #6a3de0; transform: translateY(-2px); } .signature { animation: fadeUp 0.8s ease 0.6s both; } .signature img { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid rgba(123, 76, 255, 0.3); margin-bottom: 0.75rem; display: block; margin-left: auto; margin-right: auto; } .signature p.name { font-family: 'Playfair Display', serif; font-size: 15px; color: #f5f0e8; margin-bottom: 2px; } .signature p.role { font-size: 12px; font-weight: 300; color: rgba(245, 240, 232, 0.4); } @media (max-width: 480px) { h1 { font-size: 1.8rem; } .step-card { padding: 1rem 1.25rem; } }