: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); }