* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Nunito', sans-serif;
     background: linear-gradient(135deg, #ffd6ec, #ffe8f5, #fff4fb);
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     position: relative;
 }

 /* Bolinhas decorativas */
 .circle {
     position: absolute;
     border-radius: 50%;
     background: rgba(255, 255, 255, .3);
     animation: float 10s infinite ease-in-out;
 }

 .circle:nth-child(1) {
     width: 180px;
     height: 180px;
     left: -40px;
     top: 80px;
 }

 .circle:nth-child(2) {
     width: 120px;
     height: 120px;
     right: 60px;
     top: 120px;
     animation-delay: 2s;
 }

 .circle:nth-child(3) {
     width: 220px;
     height: 220px;
     bottom: -80px;
     right: 15%;
     animation-delay: 4s;
 }

 @keyframes float {
     50% {
         transform: translateY(-20px);
     }
 }

 .card {
     width: min(90%, 700px);
     background: rgba(255, 255, 255, .75);
     backdrop-filter: blur(16px);
     border-radius: 30px;
     padding: 55px;
     text-align: center;
     box-shadow:
         0 20px 50px rgba(255, 120, 180, .18),
         inset 0 0 0 2px rgba(255, 255, 255, .4);
 }

 .logo {
     font-size: 70px;
     margin-bottom: 10px;
 }

 h1 {
     color: #ff4fa0;
     font-size: 42px;
     font-weight: 800;
 }

 .subtitle {
     color: #9b5c7f;
     margin: 10px 0 35px;
     font-size: 18px;
 }

 .search {
     display: flex;
     gap: 15px;
 }

 .search input {
     flex: 1;
     border: none;
     outline: none;
     border-radius: 60px;
     padding: 18px 25px;
     font-size: 18px;
     background: #fff;
     box-shadow: 0 8px 20px rgba(255, 140, 190, .18);
     transition: .25s;
 }

 .search input:focus {
     transform: scale(1.02);
     box-shadow: 0 10px 30px rgba(255, 120, 180, .35);
 }

 .search button {
     border: none;
     cursor: pointer;
     border-radius: 60px;
     padding: 18px 32px;
     font-size: 17px;
     font-weight: 700;
     color: white;
     background: linear-gradient(135deg, #ff6ab7, #ff91c8);
     transition: .25s;
     box-shadow: 0 10px 25px rgba(255, 100, 180, .3);
 }

 .search button:hover {
     transform: translateY(-3px);
     box-shadow: 0 15px 35px rgba(255, 100, 180, .4);
 }

 .footer {
     margin-top: 30px;
     color: #c96a9d;
     font-size: 15px;
 }

 .footer span {
     color: #ff4fa0;
 }

 @media(max-width:650px) {

     .card {
         padding: 35px 25px;
     }

     .logo {
         font-size: 55px;
     }

     h1 {
         font-size: 34px;
     }

     .search {
         flex-direction: column;
     }

     .search button {
         width: 100%;
     }

 }