:root { --ink:#173e56; --muted:#57717d; --blue:#1598d0; --orange:#f47d38; --lime:#acd02c; --yellow:#f8c832; --cream:#fffdf4; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:#fff; font-family:'Nunito',sans-serif; }
.page-shell { min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden; padding:32px 18px; background:radial-gradient(circle at 10% 15%, #fff8df 0 9%, transparent 24%), radial-gradient(circle at 91% 83%, #edf9fd 0 11%, transparent 29%), #fff; }
.welcome-card { width:min(100%, 470px); position:relative; z-index:2; padding:38px 42px 35px; text-align:center; background:#fff; border:1px solid #edf0f1; border-radius:34px; box-shadow:0 18px 60px rgba(31,91,112,.10); animation:rise .75s ease both; }
.brand-logo { display:block; width:min(100%, 355px); height:auto; margin:0 auto 22px; object-fit:contain; }
.contact-box { padding:17px 18px 15px; background:#fffefa; border:1px solid #e7ecee; border-radius:22px; box-shadow:0 6px 18px rgba(31,91,112,.06); }.contact-title { margin:0 0 10px; font-size:14px; font-weight:800; color:var(--blue); letter-spacing:.5px; }.contact-title i { color:var(--orange); margin-right:4px; }.contact-row { display:flex; align-items:center; justify-content:center; gap:11px; color:var(--ink); font-size:16px; font-weight:700; line-height:2; text-decoration:none; transition:color .2s, transform .2s; }.contact-row:hover { color:var(--orange); transform:translateY(-1px); }.contact-icon { display:inline-grid; place-items:center; width:23px; height:23px; color:var(--orange); font-size:16px; }
.construction { display:flex; align-items:center; gap:10px; justify-content:center; margin-top:24px; color:#9aa3a7; }.construction p { margin:0; font-size:12px; font-weight:600; letter-spacing:.15px; white-space:nowrap; }.construction p i { margin-right:5px; color:#aab3b6; }.construction-line { width:25px; height:1px; background:#d5dcde; }
.bubble { position:absolute; border-radius:50%; filter:blur(.2px); opacity:.65; }.bubble-one { width:150px; height:150px; left:-52px; top:14%; background:#fff0c4; }.bubble-two { width:210px; height:210px; right:-85px; bottom:8%; background:#dff2fa; }.star { position:absolute; color:var(--yellow); font-size:29px; z-index:1; animation:float 4s ease-in-out infinite; }.star-one { top:17%; left:18%; }.star-two { right:18%; top:25%; color:var(--orange); font-size:22px; animation-delay:1.2s; }
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } @keyframes float { 50% { transform:translateY(-8px) rotate(10deg); } }
@media (max-width:520px) { .welcome-card { padding:30px 23px 30px; border-radius:27px; }.brand-logo { width:min(100%, 330px); }.bubble-one { left:-100px; }.star-one { left:8%; }.star-two { right:8%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }