:root{
  --navy:#0a2540;
  --accent-red:#e50928;
  --soft-white:#f9f9f9;
  --purple:#673de6;
}
html,body{height:100%;margin:0;font-family:'Poppins',sans-serif;background:linear-gradient(135deg,var(--soft-white) 0%,#f3f3ff 100%);color:var(--navy);}
.wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.card{max-width:820px;width:100%;text-align:center;padding:40px;border-radius:24px;background:#fff;box-shadow:0 12px 35px rgba(103,61,230,0.15);animation:floaty 7s ease-in-out infinite;transition:transform .3s, box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 45px rgba(103,61,230,0.22)}

.logo-plate{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:22px}
.logo-plate img{width:100px;height:auto;border-radius:18px;box-shadow:0 4px 14px rgba(103,61,230,0.2)}
.brand{font-weight:700;font-size:20px;letter-spacing:0.8px;color:var(--navy)}
.subtitle{font-size:13px;opacity:0.7;color:#555}

h1{font-size:clamp(24px,6vw,42px);margin:10px 0 12px;font-weight:700;letter-spacing:0.8px;
  background:linear-gradient(90deg,var(--purple),var(--accent-red));-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative;display:inline-block}
h1::after{content:"";position:absolute;left:50%;bottom:-6px;width:0;height:2px;background:linear-gradient(90deg,var(--accent-red),var(--purple));border-radius:3px;transition:all .5s cubic-bezier(.4,0,.2,1);transform:translateX(-50%)}
.card:hover h1::after{width:70%}

p.lead{margin:0 auto 22px;max-width:680px;font-size:clamp(15px,1.6vw,18px);opacity:0.95;line-height:1.6;color:#333;padding:0 8px}

.message{display:inline-block;padding:12px 22px;border-radius:16px;background:linear-gradient(90deg,rgba(103,61,230,0.1),rgba(229,9,40,0.1));font-weight:600;font-size:13px;letter-spacing:0.5px;color:var(--navy);box-shadow:0 2px 6px rgba(0,0,0,0.05)}

.dot{width:10px;height:10px;border-radius:50%;background:var(--accent-red);display:inline-block;margin-left:8px;position:relative;box-shadow:0 0 0 rgba(229,9,40,0.4);animation:pulse 1.6s infinite ease-out}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,9,40,0.4)}50%{box-shadow:0 0 0 10px rgba(229,9,40,0.1)}100%{box-shadow:0 0 0 0 rgba(229,9,40,0)}}

@keyframes floaty{0%{transform:translateY(0px)}50%{transform:translateY(-6px)}100%{transform:translateY(0px)}}

@media(max-width:600px){
  .card{padding:24px 16px;border-radius:18px}
  .logo-plate img{width:80px;border-radius:14px}
  h1{font-size:22px}
  p.lead{font-size:14px}
  .message{font-size:12px;padding:10px 18px}
}