/* Modern touches: frosted sticky header, hero backdrop, gradient headline, live badge,
   scroll reveal. */

html, body { overflow-x: clip; }

.top-bar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247, 250, 249, .72);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(220, 230, 229, .7);
}
.top-bar .top { padding-block: 14px; }

.hero-zone { position: relative; isolation: isolate; overflow-x: clip; }
.hero-zone::before {
  content: ""; position: absolute; inset: -80px 0 0; z-index: -2;
  background-image: radial-gradient(rgba(14, 107, 115, .16) 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 45%, #000 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 45%, #000 15%, transparent 75%);
}
.hero-zone::after {
  content: ""; position: absolute; inset: -120px -10% 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(20, 145, 155, .22), transparent) 18% 30% / 520px 520px no-repeat,
    radial-gradient(closest-side, rgba(14, 107, 115, .16), transparent) 90% 70% / 460px 460px no-repeat,
    radial-gradient(closest-side, rgba(180, 83, 9, .07), transparent) 55% 95% / 380px 380px no-repeat;
  filter: blur(20px);
  animation: drift 18s ease-in-out infinite alternate;
}
/* Left-to-right mirror: the dot grid and glows sit behind the phone, which is on the right in English. */
[dir="ltr"] .hero-zone::before {
  mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 15%, transparent 75%);
}
[dir="ltr"] .hero-zone::after { background-position: 82% 30%, 10% 70%, 45% 95%; }
@keyframes drift { to { transform: translate3d(-2%, 3%, 0) scale(1.05); } }

h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent-ink) 0%, var(--accent) 40%, var(--accent-2) 75%, var(--accent) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 8s ease-in-out infinite alternate;
}
@keyframes sheen { to { background-position: 100% 0; } }

.badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(14, 107, 115, .18); }
.live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.live::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse { to { transform: scale(3); opacity: 0; } }

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s, transform .7s; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-zone::after, h1 em, .live::after { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}