* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; min-height: 100vh; background: linear-gradient(135deg, #0f172a, #1e3a8a); color: #fff; } .coming-soon { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden; } .overlay { position: absolute; inset: 0; background: radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 55%); } .content { position: relative; z-index: 2; max-width: 700px; width: 100%; text-align: center; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 24px; padding: 50px 30px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .badge { display: inline-block; padding: 8px 16px; margin-bottom: 20px; background: #f97316; color: #fff; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; } h1 { font-size: 3rem; line-height: 1.2; margin-bottom: 16px; } p { font-size: 1rem; line-height: 1.8; color: rgba(255, 255, 255, 0.85); margin-bottom: 32px; } .countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; } .box { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 18px; padding: 18px 10px; } .box span { display: block; font-size: 2rem; font-weight: 700; margin-bottom: 6px; } .box small { font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); } .notify-form { display: flex; gap: 12px; margin-bottom: 28px; } .notify-form input { flex: 1; padding: 14px 16px; border: none; outline: none; border-radius: 12px; font-size: 1rem; } .notify-form button { padding: 14px 24px; border: none; border-radius: 12px; background: #f97316; color: #fff; font-weight: 600; cursor: pointer; transition: 0.3s ease; } .notify-form button:hover { background: #ea580c; } .social-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; } .social-links a { color: #fff; text-decoration: none; font-size: 0.95rem; opacity: 0.85; transition: 0.3s ease; } .social-links a:hover { opacity: 1; text-decoration: underline; } @media (max-width: 768px) { h1 { font-size: 2.2rem; } .countdown { grid-template-columns: repeat(2, 1fr); } .notify-form { flex-direction: column; } } @media (max-width: 480px) { .content { padding: 35px 20px; } h1 { font-size: 1.8rem; } .countdown { grid-template-columns: 1fr 1fr; } }