/* ════════════════ HERO ════════════════ */
.hero {
  position: relative; min-height: 100svh; max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(28px, 5vw, 80px);
  padding: 132px var(--gutter) 72px;
}
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 12px; border-radius: 999px;
  font: 600 12px/1 var(--sans); letter-spacing: .06em; color: var(--ink-2);
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--hair);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--money); box-shadow: 0 0 10px var(--money); }
.live-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--money); animation: ping 2.4s ease-out infinite; }
@keyframes ping { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.h1 {
  font-family: var(--display); font-weight: 900; letter-spacing: -.02em;
  font-size: clamp(44px, 5.6vw, 96px); line-height: .92; margin: 28px 0 28px; text-wrap: balance;
}
.h1 .line { display: block; }
.js .h1 .line { opacity: 0; filter: blur(16px); transform: translateY(.18em); animation: lineIn 1.6s var(--ease) forwards; }
.js .h1 .line:nth-child(2) { animation-delay: .28s; }
@keyframes lineIn { to { opacity: 1; filter: blur(0); transform: none; } }
.h1 .glow {
  font-style: italic; padding-right: .08em;
  background: linear-gradient(100deg, var(--mint-hi) 0%, var(--mint) 30%, var(--icon-amber-b) 52%, var(--mint) 72%, var(--mint-hi) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: lineIn 1.6s var(--ease) .28s forwards, sheen 9s linear 2s infinite;
  filter: drop-shadow(0 0 28px rgba(135,189,159,.28));
}
.no-js .h1 .glow, html:not(.js) .h1 .glow { color: var(--mint); }
@keyframes sheen { to { background-position: -220% 0; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.js .hero-copy > .fade { opacity: 0; filter: blur(8px); animation: lineIn 1.4s var(--ease) forwards; }
.js .hero-copy > .fade.f1 { animation-delay: .05s; }
.js .hero-copy > .fade.f4 { animation-delay: .55s; }
@media (prefers-reduced-motion: reduce) {
  .js .h1 .line, .js .hero-copy > .fade { animation: none; opacity: 1; filter: none; transform: none; }
  .h1 .glow { animation: none; }
}

/* the stage around the phone */
.stage { position: relative; display: grid; place-items: center; min-height: min(660px, calc(100svh - 120px)); perspective: 1400px; }
.orbit { position: absolute; width: 132%; max-width: 720px; aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; rotate: -18deg; pointer-events: none; }
.orbit svg { width: 100%; height: 100%; overflow: visible; animation: spin 140s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.halo { position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(123,180,148,.30), rgba(31,92,64,.18) 50%, transparent 72%); filter: blur(10px); animation: halo 7s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.08); opacity: .75; } }
.float-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 16px;
  font: 600 13px/1 var(--sans); color: #fff; white-space: nowrap;
  background: rgba(18,26,22,.55); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255,255,255,.06), 0 20px 40px -18px rgba(0,0,0,.8);
  translate: calc(var(--px, 0) * var(--depth, 10px)) calc(var(--py, 0) * var(--depth, 10px));
  animation: bob 7s ease-in-out infinite; transition: translate .8s var(--ease);
}
.float-chip small { font-weight: 500; color: var(--ink-3); }
.float-chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.chip-lang { top: 12%; left: -2%; --depth: 22px; }
.chip-sent { top: 30%; right: -4%; --depth: -18px; animation-delay: -2s; }
.chip-paid { bottom: 14%; left: -6%; --depth: 16px; animation-delay: -4s; }
.chip-paid .ok { width: 20px; height: 20px; border-radius: 50%; background: var(--money); color: var(--canvas); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
@keyframes bob { 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .float-chip, .halo, .orbit svg { animation: none; } }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 120px; text-align: left; }
  .stage { min-height: 560px; margin-top: 12px; }
  .chip-lang { left: 0; } .chip-sent { right: 0; } .chip-paid { left: 2%; }
}
@media (max-width: 520px) {
  .h1 { font-size: clamp(40px, 11.5vw, 54px); }
  .hero-cta .btn { flex: 1 1 100%; }
  .stage { min-height: 520px; }
  .float-chip { font-size: 12px; padding: 8px 11px; }
  .chip-sent { top: 22%; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none !important; }
}
.js .h1 .line.glow { animation: glowIn 1.6s var(--ease) .28s forwards, sheen 9s linear 2s infinite; }
@keyframes glowIn {
  from { opacity: 0; transform: translateY(.18em); filter: blur(16px) drop-shadow(0 0 0 rgba(135,189,159,0)); }
  to   { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 28px rgba(135,189,159,.3)); }
}
@media (prefers-reduced-motion: reduce) { .js .h1 .line.glow { animation: none; opacity: 1; transform: none; filter: none; } }