:root {
  --navy: #0B2C48;
  --ink: #0B1B2B;
  --yellow: #FFCF3F;
  --gutter: clamp(20px, 5vw, 64px);
  --s: clamp(54px, 15vw, 116px); /* logo tile size */
}

html, body { margin: 0; background: #0F66A2; }
body { font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }

.teaser {
  position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(36px, 6vh, 56px); padding: 80px var(--gutter) 96px; text-align: center;
  background:
    radial-gradient(800px 560px at 50% 42%, rgba(255, 214, 120, .30), rgba(255, 214, 120, 0) 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px 44px),
    linear-gradient(180deg, #3CA2DB 0%, #2391D0 30%, #147CB9 62%, #0F66A2 100%);
}

/* Background tiles */
.float { position: absolute; aspect-ratio: 1; animation: float 7s ease-in-out var(--d) infinite; }
.float img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 14px 16px rgba(4, 32, 64, .35)); }
.float.far img { filter: blur(2px) drop-shadow(0 10px 12px rgba(4, 32, 64, .35)); opacity: .8; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--r)); }
  50% { transform: translateY(-12px) rotate(calc(var(--r) * .7)); }
}

/* Logo: tiles fall in, a swipe lights them up, then the word frame appears */
.logo {
  position: relative; z-index: 1; margin: 0;
  display: flex; gap: calc(var(--s) * .1); transform: rotate(-2deg);
}
.logo::before {
  content: ""; position: absolute; inset: calc(var(--s) * -.13);
  border-radius: calc(var(--s) * .36); border: max(3px, calc(var(--s) * .03)) solid rgba(255, 207, 63, .65);
  box-shadow: 0 0 60px rgba(255, 200, 60, .4);
  animation: frame .5s ease-out 2.2s both;
}
.lt {
  position: relative; display: block; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .23);
  animation:
    drop .9s calc(var(--i) * .09s + .2s) both,
    glow .25s ease-out calc(var(--i) * .12s + 1.55s) both;
}
.lt img {
  position: absolute; left: -4.85%; top: -4.85%; width: 112.6%; height: 112.6%; max-width: none;
  filter: drop-shadow(0 8px 10px rgba(4, 32, 64, .35));
}
@keyframes drop {
  0% { transform: translateY(-100vh) rotate(calc((var(--i) - 2) * 9deg)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  62% { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  80% { transform: translateY(-12%); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  100% { transform: translateY(0); }
}
@keyframes glow {
  from { box-shadow: 0 0 0 0 rgba(255, 207, 63, 0), 0 0 0 0 rgba(255, 200, 60, 0); }
  to { box-shadow: 0 0 0 max(4px, calc(var(--s) * .045)) var(--yellow), 0 0 34px 4px rgba(255, 200, 60, .55); }
}
@keyframes frame {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

/* Copy */
.copy {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px;
  animation: rise .7s ease-out 2.4s both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.soon {
  margin: 0; font-weight: 800; font-size: clamp(40px, 6.4vw, 80px); line-height: 1;
  letter-spacing: -1.5px; color: #fff; text-wrap: balance;
}
.soon span { color: var(--yellow); }
.sub { margin: 0; font-weight: 600; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: #E3F2FC; }
.follow {
  margin-top: 18px; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 22px 0 10px;
  border-radius: 999px; background: var(--ink); color: #fff; border: 1px solid rgba(255, 255, 255, .25);
  font-weight: 800; font-size: 16px;
}
.follow:hover { border-color: var(--yellow); }
.fb-icon {
  width: 32px; height: 32px; border-radius: 50%; background: #1877F2;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff;
}

.foot {
  position: absolute; left: 0; right: 0; bottom: 28px;
  font-weight: 700; font-size: 13px; letter-spacing: 2px; color: rgba(227, 242, 252, .7);
}
.foot span { color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  .float, .logo::before, .lt, .copy { animation-duration: 0s; animation-delay: 0s; }
  .float { animation: none; transform: rotate(var(--r)); }
}