@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap');

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  min-height: 100vh;
}

.logo-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 52px;
color: #FFC300;
 --amp: 8px;         /* wave height: increase for bigger waves */
  --dur: 3s;         /* wave speed: lower = faster */
    display: inline-block;

}
.logo-text span {
  display: inline-block;
  color: #FFC300; /* bright, readable yellow */
  text-shadow: 2px 2px 4px rgba(0,0,0,.25);
  transform-origin: 50% 80%;
  animation: waveY var(--dur) linear infinite;
  animation-delay: calc(var(--i) * 0.12s); /* phase shift for the wave */
}

/* smooth, sine-like motion with slight tilt/squish for life */
@keyframes waveY {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  12.5%{ transform: translateY(calc(var(--amp) * -0.55)) rotate(-2deg) scale(1.02); }
  25%  { transform: translateY(calc(var(--amp) * -1)) rotate(-3deg) scale(1.05); }
  37.5%{ transform: translateY(calc(var(--amp) * -0.55)) rotate(-2deg) scale(1.02); }
  50%  { transform: translateY(0) rotate(0deg) scale(1); }
  62.5%{ transform: translateY(calc(var(--amp) * 0.55)) rotate(2deg) scale(0.98); }
  75%  { transform: translateY(var(--amp)) rotate(3deg) scale(0.95); }
  87.5%{ transform: translateY(calc(var(--amp) * 0.55)) rotate(2deg) scale(0.98); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

 

.custom-container {
  max-width: 480px;
  margin-top: 60px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: 36px 32px 28px 32px;
  text-align: center;
}

.transcription-box {
  background: #f4f8fb;
  border-radius: 8px;
  padding: 1.2em;
  margin-top: 1.5em;
  font-size: 1.08rem;
  color: #2d3a4b;
  word-break: break-word;
  box-shadow: 0 2px 8px rgba(79, 140, 255, 0.07);
}

.btn-gradient {
  background: linear-gradient(90deg, #4f8cff 0%, #3358e0 100%);
  color: #fff;
  border: none;
  transition: background 0.2s;
}

.btn-gradient:hover {
  background: linear-gradient(90deg, #3358e0 0%, #4f8cff 100%);
  color: #fff;
}
img{
  width: 55%;
}