@font-face { font-family: "Inter"; src: url("./fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("./fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("./fonts/Tajawal-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("./fonts/Tajawal-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Semantic tokens mirror apps/mobile/docs/design-stuff/design-system/qs-tokens.css */
:root {
  --qs-background: #F8F9FA;
  --qs-text: #1A1D21;
  --qs-text-secondary: #6B7280;
  --qs-text-on-tint: #FFFFFF;
  --qs-tint: #0D9488;
  --qs-accent: #F97316;
  --qs-border: #E5E7EB;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  background: var(--qs-background);
  color: var(--qs-text);
  font-family: "Tajawal", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.en { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px 32px;
}

/* Coin-join mark, ported from the onboarding QSMark / canvas-mark.jsx:
   teal springs in from top-left, orange follows 120ms later from
   bottom-right. The orange is translucent like the app icon, so the
   overlap is a natural blend while they move (no separate lens layer).
   One 3.6s cycle: 0.2s beat, 1.1s entry, hold, 0.4s fade, restart. */
.mark { --s: clamp(104px, 12vw, 136px); width: var(--s); height: var(--s); position: relative; margin-bottom: 16px; }
.coin {
  position: absolute;
  width: calc(var(--s) * 0.56);
  height: calc(var(--s) * 0.56);
  border-radius: 50%;
  animation: coin-move 3.6s infinite, coin-fade 3.6s infinite;
}
.coin-teal { top: calc(var(--s) * 0.1); left: calc(var(--s) * 0.1); background: var(--qs-tint); --from: calc(var(--s) * -0.275); }
.coin-orange { bottom: calc(var(--s) * 0.1); right: calc(var(--s) * 0.1); background: rgba(249, 115, 22, 0.9); --from: calc(var(--s) * 0.275); animation-delay: 120ms; }
@keyframes coin-move {
  0%, 5.5% { transform: translate(var(--from), var(--from)) scale(0.6); animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1.05); }
  36.1%, 94.4% { transform: translate(0, 0) scale(1); animation-timing-function: step-end; }
  100% { transform: translate(var(--from), var(--from)) scale(0.6); }
}
@keyframes coin-fade {
  0%, 5.5% { opacity: 0; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  16.7%, 83.3% { opacity: 1; animation-timing-function: ease-in; }
  94.4%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .coin { animation: none; } }

h1 { margin: 0; font-size: clamp(44px, 5.5vw, 68px); line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
h1 .en { display: block; font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; color: var(--qs-text-secondary); margin-top: 6px; letter-spacing: 0; }

.tagline { margin: 16px 0 0; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; font-weight: 700; max-width: 24ch; }
.tagline.en { margin-top: 6px; font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; color: var(--qs-text-secondary); max-width: 40ch; }

hr { width: 32px; height: 1px; border: 0; margin: 18px auto; background: var(--qs-border); }

.lead { margin: 0; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.6; color: var(--qs-text-secondary); max-width: 48ch; }
.lead.en { font-size: clamp(14px, 1.4vw, 16px); margin-top: 8px; }
/* The status line: teal gradient text that fades in once, then the
   gradient keeps sliding so it has a little life without distracting. */
.soon {
  margin: 18px 0 0;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.1;
  font-weight: 700;
  background: linear-gradient(90deg, #134E4A, #0D9488, #2DD4BF, #0D9488, #134E4A);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: soon-fade 900ms ease-out 500ms both, soon-drift 5s linear infinite;
}
.soon .en { display: block; font-size: clamp(24px, 3vw, 34px); font-weight: 600; margin-top: 4px; }
@keyframes soon-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes soon-drift {
  from { background-position: 0% 50%; }
  to { background-position: 150% 50%; }
}
@media (prefers-reduced-motion: reduce) { .soon { animation: none; } }

footer {
  background: var(--qs-tint);
  color: var(--qs-text-on-tint);
  text-align: center;
  padding: 22px 16px;
  font-size: 13px;
}
footer a { color: inherit; text-decoration: none; font-weight: 600; }
footer a:hover { text-decoration: underline; }