:root{ --bg:#121019; --bg-elev:#1c1926; --line:#332e40; --text:#f3f0ea; --text-dim:#a49dae; --amber:#f2a93b; --cyan:#3fd0c9; --pink:#c14f7a; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); color:var(--text); font-family:'Inter',-apple-system,Segoe UI,Arial,sans-serif; line-height:1.7; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(ellipse 720px 340px at 50% -120px, rgba(242,169,59,.18), transparent 70%); }
.wrap{ max-width:720px; margin:0 auto; padding:28px 20px 60px; }
header{ display:flex; align-items:center; gap:14px; margin-bottom:28px; }
header a{ color:inherit; text-decoration:none; display:flex; align-items:center; gap:14px; }
.mark{ width:44px; height:44px; border-radius:12px; overflow:hidden; flex-shrink:0; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.mark svg{ display:block; width:100%; height:100%; }
.brand{ font-family:'Bebas Neue',sans-serif; font-size:30px; letter-spacing:1px; line-height:1; direction:ltr; }
.tag{ font-size:12.5px; color:var(--text-dim); }
h1{ font-family:'Bebas Neue',sans-serif; font-size:40px; letter-spacing:.5px; margin:0 0 6px; font-weight:400; }
h2{ font-size:19px; margin:30px 0 8px; }
h3{ font-size:15.5px; margin:20px 0 6px; }
p,li{ font-size:15px; color:#ddd7e6; }
.meta{ color:var(--text-dim); font-size:13px; margin-bottom:22px; }
ul{ padding-right:20px; }
a{ color:var(--amber); }
.card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin:18px 0; }
footer{ margin-top:48px; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--text-dim); display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; text-align:center; }
footer a{ color:var(--text-dim); }
.hero{ text-align:center; padding:40px 0 20px; }
.hero .mark{ width:96px; height:96px; border-radius:24px; margin:0 auto 18px; }
.hero h1{ font-size:56px; }
.hero p{ font-size:17px; color:var(--text-dim); max-width:460px; margin:0 auto 26px; }
.btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{ display:inline-block; padding:12px 22px; border-radius:12px; font-weight:700; text-decoration:none; font-size:14.5px; }
.btn-primary{ background:var(--amber); color:#171320; }
.btn-ghost{ border:1px solid var(--line); color:var(--text); }
.soon{ font-size:12px; color:var(--text-dim); margin-top:10px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:34px; }
.grid .card{ margin:0; }
.grid h3{ margin:0 0 6px; }
.grid p{ margin:0; font-size:13.5px; }

/* inside the app the page has its own header, so hide ours */
.embed header{ display:none; }
.embed .wrap{ padding-top:8px; }

table.fees{ width:100%; border-collapse:collapse; margin:10px 0 18px; font-size:13.5px; }
table.fees th, table.fees td{ border:1px solid var(--line); padding:8px 10px; text-align:center; vertical-align:top; }
table.fees th{ background:var(--bg-elev); color:var(--text-dim); font-weight:600; }
table.fees td:first-child{ text-align:right; font-weight:700; }
table.fees small{ display:block; color:var(--text-dim); font-size:11.5px; margin-top:2px; }

/* entity cards: lit edge + soft glow in each entity's theme colour, like the app's feed cards */
.ecard{ position:relative; overflow:hidden; border-color:color-mix(in srgb, var(--ec) 35%, var(--line)); background:color-mix(in srgb, var(--ec) 5%, var(--bg-elev)); }
.ecard::before{ content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:var(--ec); border-radius:0 3px 3px 0; box-shadow:0 0 18px 2px color-mix(in srgb, var(--ec) 55%, transparent); }
.ecard::after{ content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:140px; pointer-events:none; background:linear-gradient(270deg, color-mix(in srgb, var(--ec) 12%, transparent), transparent); }
.ecard > *{ position:relative; z-index:1; }
.ecard h3{ color:var(--ec); }
.ecard-cyan{ --ec:var(--cyan); }
.ecard-pink{ --ec:var(--pink); }
.ecard-amber{ --ec:var(--amber); }

/* ---- intro: the app's loader animation, shown for one 4s cycle on the landing page ---- */
#intro{ position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:radial-gradient(ellipse 720px 340px at 50% -120px, rgba(242,169,59,.18), transparent 70%), var(--bg);
  opacity:1; transition:opacity .5s ease; }
#intro.off{ opacity:0; pointer-events:none; }
html.intro-on body{ overflow:hidden; }
.busy-text{ font-size:13px; font-weight:700; color:var(--text-dim); letter-spacing:.2px; }
  .busy-mark{ position:relative; width:92px; height:92px; }
  .busy-mark .busy-glow{ position:absolute; inset:-26px; border-radius:50%;
    background:radial-gradient(circle, color-mix(in srgb, #f2a93b 38%, transparent), transparent 62%);
    animation:busyGlow 4s ease-in-out infinite; }
  .busy-mark .busy-glow-pink{ background:radial-gradient(circle, color-mix(in srgb, #c14f7a 45%, transparent), transparent 62%);
    animation:busyGlowPink 4s ease-in-out infinite; }
  .busy-mark svg{ position:relative; width:100%; height:100%; display:block; overflow:hidden; border-radius:22px; filter:drop-shadow(0 10px 30px rgba(0,0,0,0.45)); }
  .busy-mark .tri{ transform-box:fill-box; transform-origin:center; }
  .busy-mark .tri-cyan{ animation:busyCyan 4s cubic-bezier(.65,0,.25,1) infinite; }
  .busy-mark .tri-amber{ animation:busyAmber 4s cubic-bezier(.65,0,.25,1) infinite; }
  .busy-mark .busy-pink{ animation:busyPink 4s ease-in-out infinite; }
  .busy-text{ font-size:13px; font-weight:700; color:var(--text-dim); letter-spacing:.2px; animation:busyText 4s ease-in-out infinite; }
  /* one 4s cycle: drift apart and back, then eight alternating quarter-turns
     (cyan, amber, cyan, amber…) with the producer pink showing through the gaps,
     until both triangles are back where they started — so the loop is seamless */
  @keyframes busyCyan{
    0%,3%   { transform:rotate(0deg) translate(0,0); }
    10%     { transform:rotate(0deg) translate(10px,-10px); }
    17%,19% { transform:rotate(0deg) translate(0,0); }
    29%,39% { transform:rotate(90deg) translate(0,0); }
    49%,59% { transform:rotate(180deg) translate(0,0); }
    69%,79% { transform:rotate(270deg) translate(0,0); }
    89%,100%{ transform:rotate(360deg) translate(0,0); } }
  @keyframes busyAmber{
    0%,3%   { transform:rotate(0deg) translate(0,0); }
    10%     { transform:rotate(0deg) translate(-10px,10px); }
    17%,29% { transform:rotate(0deg) translate(0,0); }
    39%,49% { transform:rotate(90deg) translate(0,0); }
    59%,69% { transform:rotate(180deg) translate(0,0); }
    79%,89% { transform:rotate(270deg) translate(0,0); }
    99%,100%{ transform:rotate(360deg) translate(0,0); } }
  @keyframes busyPink{ 0%,17%{ opacity:0; } 21%,97%{ opacity:1; } 100%{ opacity:0; } }
  @keyframes busyGlow{ 0%,100%{ transform:scale(1.1); opacity:.9; } 10%{ transform:scale(1.2); opacity:1; } 24%,92%{ opacity:.12; } }
  @keyframes busyGlowPink{ 0%,17%,100%{ opacity:0; transform:scale(.9); } 24%,94%{ opacity:1; transform:scale(1.15); } }
  @keyframes busyText{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

@media (prefers-reduced-motion: reduce){ #intro{ display:none; } }