/* Linkrra Pearl Pool — shared design system
   Canonical tokens, typography base, nav, footer, buttons and the
   constellation/blob background, extracted from index.html so every
   page on pool.linkrra.com shares one chrome. Page-specific styles
   (hero, cards, tables, forms, app UI) stay inline per page and are
   free to override anything here — this file is linked in <head>
   BEFORE each page's own <style> block, so later same-specificity
   rules in the page always win. */

:root{--bg:#050608;--bg2:#0a0b0f;--card:#0d0e13;--line:#1c1d24;--ink:#f3f4f7;--mut:#8f929c;--acc:#f3f4f7;--acc2:#aeb1ba;--teal:#16b89a;--gold:#e0a83c}
html[data-theme="light"]{--bg:#f7f7f8;--bg2:#ffffff;--card:#ffffff;--line:#e2e3e7;--ink:#14151a;--mut:#6b6d76;--acc:#14151a;--acc2:#54565f;--teal:#0e9a80;--gold:#b8790a}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:Inter,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
a{color:inherit;text-decoration:none}

/* theme toggle */
.theme-toggle{width:36px;height:36px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s;padding:0;margin-right:14px}
.theme-toggle:hover{border-color:var(--mut);background:color-mix(in srgb, var(--ink) 4%, transparent)}
.theme-toggle .icon-moon{display:none}
html[data-theme="light"] .theme-toggle .icon-sun{display:none}
html[data-theme="light"] .theme-toggle .icon-moon{display:inline-flex}

/* nav */
nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{max-width:1080px;display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{font-family:Fraunces,serif;font-weight:600;font-size:21px;color:var(--ink)}.brand b{color:var(--acc)}
.nav-links{display:flex;gap:26px;font-size:14px;color:var(--mut)}
.nav-links a{color:var(--mut)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
@media(max-width:720px){.nav-links{display:none}}

/* buttons */
.btn{background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:11px;font-weight:600;font-size:14px;border:0;cursor:pointer;display:inline-block}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}

/* constellation background ("holograms") — same system as linkrra.com */
.bgfx{position:fixed;inset:0;overflow:hidden;z-index:-2;pointer-events:none}
#net{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(120px);opacity:.1;z-index:0;pointer-events:none}
.blob.b1{width:640px;height:640px;background:#3d4a6b;top:-150px;right:-130px;opacity:.1;animation:drift1 20s ease-in-out infinite}
.blob.b2{width:460px;height:460px;background:#2c2f3a;top:780px;left:-120px;opacity:.16;animation:drift2 26s ease-in-out infinite}
.blob.b3{width:420px;height:420px;background:#39415e;top:1700px;right:-80px;opacity:.08;animation:drift3 23s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,50px) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,-55px) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-55px,-45px) scale(1.14)}}
@media(prefers-reduced-motion:reduce){.blob{animation:none!important}}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0;color:var(--mut);font-size:13px;text-align:center;margin-top:30px}
.flinks{display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap;margin:16px auto 4px;font-size:13.5px}
.flinks a{color:var(--acc2)}
.flinks a:hover{color:var(--ink)}
.disc{font-size:11px;color:#5c5e67;max-width:760px;margin:14px auto 0;line-height:1.5}
