/* ==========================================================
   Orbit shared styles
   Colors, fonts, top menu, light/dark switch and pop-up messages
   used by every page. Change something here and it changes everywhere.
   ========================================================== */

/* ---------- Fonts (stored with the site in the fonts folder) ---------- */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;src:url("fonts/bricolage-grotesque.woff2") format("woff2-variations"),url("fonts/bricolage-grotesque.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-display:swap;font-weight:400 700;src:url("fonts/instrument-sans.woff2") format("woff2-variations"),url("fonts/instrument-sans.woff2") format("woff2")}

/* ---------- Colors: dark mode (default) ---------- */
:root{
  --bg:#1b1d16; --text:#f4f1e9; --muted:#c9c7bb; --soft:#8f8d82; --line:#34362c; --line-2:#5a5c50;
  --card:#26281f; --chip:#26281f; --chip-bd:#3a3c32; --field:#1b1d16; --placeholder:#6f6d63;
  --card-hover:#7a7c6e; --ghost-hover:#7a7c6e;
  --accent:#caff45; --accent-text:#1b1d16;
  --btn:#caff45; --btn-text:#1b1d16; --btn-glow:rgba(202,255,69,.25);
  --ring:#caff45; --logo-p:#f4f1e9; --focus:#caff45; --error:#ff8a73;
  --bar:#caff45; --bar-track:#34362c; --tag:#caff45; --tag-text:#1b1d16;
  --overlay:rgba(27,29,22,.84); --overlay-text:#f4f1e9; --tag-bg:rgba(27,29,22,.84);
  /* home page hero */
  --slice:#caff45; --pitch:#f4f1e9; --picon:#1b1d16; --center:#1b1d16; --center-ring:#3a3c32; --rim:#2c2e25;
  --orbit-1:rgba(244,241,233,.1); --orbit-2:rgba(244,241,233,.08);
  --moon:#caff45; --moon-glow:0 0 0 5px rgba(202,255,69,.14),0 0 22px rgba(202,255,69,.5); --moon-2:#f4f1e9;
  --dot:#caff45; --coin-shadow:drop-shadow(0 30px 50px rgba(0,0,0,.45)); --grain:.035;
  /* type and motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- Colors: light mode ---------- */
:root[data-theme="light"]{
  --bg:#f4f1e9; --text:#171711; --muted:#55544b; --soft:#7a786d; --line:#d8d4c8; --line-2:#b9b4a5;
  --card:#fbfaf6; --chip:#fbfaf6; --chip-bd:#d8d4c8; --field:#f4f1e9; --placeholder:#9a978b;
  --card-hover:#8a8577; --ghost-hover:#8a8577;
  --accent:#caff45; --accent-text:#171711;
  --btn:#171711; --btn-text:#f4f1e9; --btn-glow:rgba(23,23,17,.18);
  --ring:#6c9a0f; --logo-p:#171711; --focus:#6c9a0f; --error:#b3321c;
  --bar:#171711; --bar-track:#e6e2d7; --tag:#caff45; --tag-text:#171711;
  --overlay:rgba(251,250,246,.9); --overlay-text:#171711; --tag-bg:rgba(251,250,246,.9);
  --slice:#171711; --pitch:#caff45; --picon:#171711; --center:#f4f1e9; --center-ring:#d8d4c8; --rim:#e2ddd0;
  --orbit-1:rgba(23,23,17,.12); --orbit-2:rgba(23,23,17,.1);
  --moon:#6c9a0f; --moon-glow:0 0 0 5px rgba(108,154,15,.14); --moon-2:#171711;
  --dot:#6c9a0f; --coin-shadow:drop-shadow(0 24px 40px rgba(60,50,20,.18)); --grain:.03;
}

/* ---------- Basics ---------- */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .35s,color .35s}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
::placeholder{color:var(--placeholder)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Top menu ---------- */
nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;padding:0 clamp(16px,4vw,56px);padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.045em;line-height:1}
.brand span{margin-top:-3px}
.mark{width:40px;height:40px;display:block;flex:none;overflow:visible}
.mark .planet{fill:var(--ring);stroke:var(--bg);stroke-width:3}
:root[data-theme="light"] .mark{filter:drop-shadow(0 1px 1.5px rgba(23,23,17,.35))}
.logo-p{fill:var(--logo-p)}
.links{display:flex;gap:32px;font-size:15px;font-weight:600;color:var(--muted)}
.links a{position:relative;padding:6px 0;transition:color .2s}
.links a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--ring);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.links a:hover,.links a[aria-current="page"]{color:var(--text)}
.links a:hover:after,.links a[aria-current="page"]:after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:10px}
.theme-btn,.menu-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;background:transparent;color:var(--text);cursor:pointer;transition:background .2s,transform .3s var(--ease)}
.theme-btn:hover,.menu-btn:hover{background:var(--card)}
.theme-btn:active{transform:rotate(-30deg)}
.theme-btn svg{width:20px;height:20px}
.theme-btn .moon-ic{display:none}
:root[data-theme="light"] .theme-btn .sun-ic{display:none}
:root[data-theme="light"] .theme-btn .moon-ic{display:block}
.wallet{height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--btn);color:var(--btn-text);font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.wallet:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--btn-glow)}
.wallet:active{transform:none}
.wallet.is-connected{background:var(--card);color:var(--text);border:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.wallet.is-connected:before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--ring);vertical-align:1px}
.wallet.is-wrong{background:#ff7a6b;color:#1b1d16}
.wallet-menu{position:absolute;z-index:70;min-width:220px;padding:6px;border:1px solid var(--line-2);border-radius:16px;background:var(--card);box-shadow:0 20px 40px rgba(0,0,0,.35);display:grid}
.wallet-menu a,.wallet-menu button{display:block;width:100%;padding:11px 12px;border:0;border-radius:10px;background:transparent;text-align:left;font-size:14px;font-weight:600;color:var(--text);cursor:pointer}
.wallet-menu a:hover,.wallet-menu button:hover,.wallet-menu a:focus-visible,.wallet-menu button:focus-visible{background:var(--line);outline:none}
.menu-btn{display:none}
.menu-btn span,.menu-btn span:before,.menu-btn span:after{display:block;width:16px;height:2px;background:var(--text);border-radius:2px;content:"";transition:.2s}
.menu-btn span{position:relative}
.menu-btn span:before{position:absolute;top:-5px}
.menu-btn span:after{position:absolute;top:5px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span:before{top:0;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:after{top:0;transform:rotate(-45deg)}
.mobile-nav{display:none;position:absolute;z-index:10;top:70px;left:16px;right:16px;padding:8px;background:var(--card);border:1px solid var(--line-2);border-radius:18px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.mobile-nav.open{display:grid}
.mobile-nav a{padding:14px 16px;border-radius:12px;font-weight:600}
.mobile-nav a:hover{background:var(--line)}

/* ---------- Pop-up message at the bottom ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:60;max-width:min(440px,calc(100vw - 32px));padding:14px 18px;border-radius:14px;background:var(--text);color:var(--bg);font-size:14px;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.3);transform:translate(-50%,140px);opacity:0;transition:transform .35s var(--ease),opacity .35s}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ---------- $ORBIT bar at the very top ---------- */
.coin-bar{position:relative;z-index:6;display:flex;align-items:center;justify-content:center;gap:10px 22px;flex-wrap:wrap;min-height:48px;padding:6px clamp(16px,4vw,56px);background:var(--accent);color:#1b1d16;font-size:14px;line-height:1.3}
.coin-bar strong{font-weight:800}
.cb-name{display:flex;align-items:center;gap:8px;font-weight:800}
.cb-logo{width:24px;height:24px;flex:none}
.cb-sep{width:1px;height:22px;background:rgba(27,29,22,.25)}
.cb-ca{display:flex;align-items:center;gap:8px}
.cb-copy{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(27,29,22,.35);border-radius:8px;background:transparent;color:#1b1d16;cursor:pointer}
.cb-copy:hover{background:rgba(27,29,22,.08)}
.cb-copy svg{width:14px;height:14px}
.cb-buy{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;border-radius:999px;background:#1b1d16;color:#caff45;font-weight:800;transition:transform .2s}
.cb-buy:hover{transform:translateY(-1px)}
.cb-buy img{width:12px;height:17px;object-fit:contain}
.coin-bar :focus-visible{outline-color:#1b1d16}
@media(max-width:640px){
  .coin-bar{gap:8px 12px;font-size:13px}
  .cb-long,.cb-sep{display:none}
  .cb-buy{height:32px;padding:0 12px}
}

/* ---------- Shared footer (added to every page by orbit.js) ---------- */
.site-foot{border-top:1px solid var(--line);padding:28px clamp(16px,4vw,56px) calc(24px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--soft)}
.sf-top{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
.sf-brand{display:flex;flex-direction:column;gap:4px}
.sf-brand strong{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.045em;color:var(--text)}
.sf-links{display:flex;flex-wrap:wrap;gap:8px 22px;font-weight:600;color:var(--muted)}
.sf-links a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.foot-pons{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--muted)}
.foot-pons img{width:14px;height:19px;object-fit:contain}
.sf-fine{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--soft);max-width:900px}
.sf-fine a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Simple text pages (Terms, Risk notice, 404) ---------- */
.doc{max-width:760px;margin:0 auto;padding:clamp(48px,7vw,88px) clamp(20px,4vw,32px) 80px}
.doc h1{margin:0 0 10px;font-family:var(--display);font-size:clamp(40px,6vw,64px);font-weight:800;letter-spacing:-.05em;line-height:.95}
.doc .updated{margin:0 0 36px;color:var(--soft);font-size:14px}
.doc h2{margin:36px 0 10px;font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.03em}
.doc p,.doc li{font-size:16px;line-height:1.7;color:var(--muted)}
.doc ul{padding-left:22px}
.doc strong{color:var(--text)}
.doc a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.doc .callout{margin:0 0 28px;padding:16px 18px;border:1px solid var(--line-2);border-radius:16px;background:var(--card);font-size:15px;line-height:1.6;color:var(--text)}
.lost{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:64px 20px}
.lost .big-o{width:120px;height:120px}
.lost h1{margin:0;font-family:var(--display);font-size:clamp(40px,7vw,72px);font-weight:800;letter-spacing:-.05em;line-height:.95}
.lost p{margin:0;max-width:440px;color:var(--muted);line-height:1.6}
.lost .row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.lost .row a{height:46px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;font-weight:700;border:1px solid var(--line-2)}
.lost .row a.main{background:var(--btn);color:var(--btn-text);border-color:transparent}

/* ---------- Smaller screens ---------- */
@media(max-width:1000px){
  .links{display:none}
  .menu-btn{display:grid}
}
@media(max-width:640px){
  .nav-right{gap:6px}
  .theme-btn,.menu-btn{width:40px;height:40px}
  .wallet{height:40px;padding:0 12px;font-size:13px}
  .brand{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important}
}