/* xnamec landing page. Extracted from index.html so the page runs under a CSP
   with no 'unsafe-inline' for scripts or styles. */
:root{
  --bg:#0A0A0A; --ink:#FFFFFF;
  --muted:rgba(255,255,255,.6); --faint:rgba(255,255,255,.36);
  --line:rgba(255,255,255,.08);
  --g1:#833AB4; --g2:#C13584; --g3:#E1306C; --g4:#FD8D32;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Noto Sans SC','Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink); min-height:100dvh; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
body::before{
  content:'';position:fixed;inset:-20%;pointer-events:none;z-index:0;
  background:
   radial-gradient(circle at 18% 14%,rgba(131,58,180,.46),transparent 52%),
   radial-gradient(circle at 84% 82%,rgba(253,141,50,.34),transparent 52%),
   radial-gradient(circle at 84% 16%,rgba(225,48,108,.3),transparent 48%);
  animation:drift 16s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(2.5%,-2.5%) scale(1.05)}}
.wrap{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:0 24px;
  padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:56px}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar .langsw{
  --sw-line:rgba(255,255,255,.16); --sw-bg:rgba(255,255,255,.05);
  --sw-ink:rgba(255,255,255,.55);  --sw-ink-on:#fff;
  --sw-active:rgba(255,255,255,.15);--sw-focus:rgba(253,141,50,.9);
}
.back{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted);padding:8px 0}
.hero{margin-top:32px;text-align:center}
.logo{font-size:42px;font-weight:800;letter-spacing:-.02em}
.tagline{margin-top:14px;font-size:17px;font-weight:700}
.sub{margin-top:8px;font-size:12.5px;color:var(--muted)}

.stage{margin:36px auto 0;width:min(320px,84vw);aspect-ratio:90/54;position:relative}
.minicard{
  position:absolute;inset:0;border-radius:18px;padding:18px;
  background:linear-gradient(135deg,var(--g1),var(--g2) 40%,var(--g3) 65%,var(--g4));
  box-shadow:0 26px 60px rgba(193,53,132,.42),0 8px 20px rgba(0,0,0,.5);
  display:flex;flex-direction:column;justify-content:space-between;
  animation:float 5.5s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-8px) rotate(-1.2deg)}}
.mc-top{display:flex;align-items:center;gap:11px}
.mc-ava{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.24);border:2px solid rgba(255,255,255,.7);display:grid;place-items:center;font-weight:800;font-size:16px}
.mc-name{font-size:16px;font-weight:800}
.mc-tag{font-size:10.5px;color:rgba(255,255,255,.85);margin-top:2px}
/* Keep the last chip clear of the corner wordmark — the English chip labels
   are long enough to run underneath it otherwise. */
.mc-chips{display:flex;gap:6px;flex-wrap:wrap;padding-right:54px}
.mc-chips span{font-size:9.5px;font-weight:600;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.2)}
.mc-brand{position:absolute;right:14px;bottom:12px;font-size:9px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.75)}

/* Founder card — the demo card's design with real content. The fixed 90/54
   ratio is traded for a min-height of the same size so a longer message grows
   the card instead of spilling out of it; everything else is inherited. */
.stage-me{margin-top:14px;aspect-ratio:auto}
.stage-me .minicard{position:relative;inset:auto;
  min-height:calc(min(320px,84vw) * 54 / 90);
  animation-delay:-2.75s}          /* out of phase with the demo card above */
.mc-badge{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.04em;
  padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.22)}
.mc-body{margin:14px 0 4px;padding-right:52px;   /* clear the corner wordmark */
  font-size:11.5px;line-height:1.72;color:rgba(255,255,255,.95);text-wrap:pretty}

/* ── Company card ──────────────────────────────────────────────────────────
   Same card as the two above — structure, sizing, float — dressed in the
   Work-card scheme from the homepage so the business details read as a
   different kind of card. The values below are lifted verbatim from the
   `.work` rules and :root tokens in assets/universe.css (--navy #070b1f,
   --gold #e8c98a, --gold-soft #c9a869, --parchment #f3ead6, --ink #e7e4f0,
   --line rgba(232,201,138,.35)); nothing here is a new colour. They are
   restated rather than imported because xnamec.css owns its own :root, whose
   --ink / --line mean something else entirely on this page. */
.stage-co{margin-top:14px;aspect-ratio:auto}
.stage-co .minicard{position:relative;inset:auto;
  min-height:calc(min(320px,84vw) * 54 / 90);
  animation-delay:-1.4s;                       /* third phase of the three cards */
  /* .work body colour, opaque enough that the page's warm glow cannot tint it */
  background:rgba(12,17,44,.94);
  border:1px solid rgba(232,201,138,.35);      /* --line */
  box-shadow:0 26px 60px rgba(232,201,138,.13),0 8px 20px rgba(0,0,0,.55);
  color:#e7e4f0;                               /* --ink */
}
.stage-co .mc-ava{background:rgba(232,201,138,.12);border:2px solid rgba(232,201,138,.5);
  color:#e8c98a}                               /* --gold */
.stage-co .mc-ava svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stage-co .mc-name{font-size:14.5px;letter-spacing:.01em;color:#f3ead6}  /* --parchment */
.stage-co .mc-badge{color:#f0d9a4;background:rgba(232,201,138,.08);
  border:1px solid rgba(232,201,138,.45)}      /* .work-badge */
.stage-co .mc-brand{color:rgba(232,201,138,.6)}

.mc-rows{list-style:none;margin:15px 0 2px;padding-right:52px;
  display:flex;flex-direction:column;gap:4px}
.mc-rows li{display:flex}
.mc-rows .r{display:flex;align-items:center;gap:9px;min-height:26px;
  font-size:11.5px;line-height:1.5;color:#e7e4f0;text-decoration:none}
.mc-rows a.r{color:#f3ead6}
.mc-rows a.r:hover{color:#fff}
.mc-rows a.r:focus-visible{outline:2px solid rgba(232,201,138,.9);outline-offset:3px;border-radius:6px}
.mc-rows svg{flex:0 0 auto;width:14px;height:14px;fill:none;stroke:#e8c98a;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mc-rows .v{overflow-wrap:anywhere}

/* Early-access line, sat right above the CTA stack */
.early{margin:34px auto 0;display:flex;align-items:center;justify-content:center;gap:8px;
  width:fit-content;max-width:100%;text-align:center;
  font-size:12.5px;font-weight:700;letter-spacing:.01em;color:#FFD9A8;
  background:rgba(253,141,50,.1);border:1px solid rgba(253,141,50,.34);
  border-radius:999px;padding:8px 16px}
.early .dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:linear-gradient(90deg,var(--g3),var(--g4))}

/* Real registered-user count. Rendered only when the endpoint returns a number
   at or above the threshold, so [hidden] is the normal state. */
.usercount{margin:9px auto 0;display:flex;align-items:center;justify-content:center;gap:7px;
  width:fit-content;max-width:100%;text-align:center;
  font-size:12px;font-weight:600;color:var(--muted)}
.usercount::before{content:'';flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:#4ADE80}

.cta{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.btn{display:block;border-radius:16px;padding:16px 18px;font-size:14.5px;font-weight:700;text-align:center;transition:transform .12s ease}
.btn:active{transform:scale(.97)}
.btn.web{background:linear-gradient(90deg,var(--g2),var(--g4));box-shadow:0 14px 34px rgba(193,53,132,.35)}
.btn.apk{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;gap:3px;align-items:center}
.btn.apk small{font-size:11px;font-weight:500;color:var(--muted)}
.btn.apk.soon{opacity:.72;cursor:default}
.btn.apk.soon .lbl{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.btn.apk.soon .badge{font-size:10px;font-weight:700;letter-spacing:.06em;color:#FFD34D;
  border:1px solid rgba(255,211,77,.5);border-radius:999px;padding:2px 8px}
.sha{margin-top:12px;text-align:center;font-size:11px;color:var(--faint);line-height:1.7}
.sha code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.sha a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

.card{margin-top:20px;background:rgba(20,20,24,.86);border:1px solid var(--line);border-radius:24px;padding:24px 22px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.card h3{font-size:14px;font-weight:800}
.card a{color:#FFBE85;text-decoration:underline;text-underline-offset:3px}
.steps{margin-top:16px;display:flex;flex-direction:column;gap:14px;list-style:none}
.steps li{display:flex;gap:12px;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.88)}
.steps b{flex:0 0 auto;width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,var(--g2),var(--g4));display:grid;place-items:center;font-size:12px;font-weight:800}
.note{margin-top:13px;font-size:11.5px;color:var(--faint);line-height:1.7}
.body{margin-top:12px;font-size:13px;line-height:1.8;color:rgba(255,255,255,.85)}
.mono{margin-top:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;line-height:1.9;color:var(--muted);background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:12px;padding:12px 14px;overflow-x:auto;white-space:pre}

/* Footer. The company details used to sit here; they now live in the company
   card near the top of the page, so only the links remain. */
.xfoot{margin-top:44px;text-align:center;font-size:11px;color:var(--faint);line-height:2}
.xlinks{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 16px;margin-bottom:16px;line-height:1.9}
.xfoot a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.xfoot a:hover{color:var(--ink)}
[hidden]{display:none!important}

@media (prefers-reduced-motion:reduce){
  body::before,.minicard{animation:none}
}