/* ============================================
   CUBIE FX — global navbar + footer
   Class names are prefixed so they never collide with page CSS.
   ============================================ */
:root{
  --cfx-bg:#05070E;
  --cfx-bg2:#080B14;
  --cfx-card:#0C1020;
  --cfx-line:rgba(255,255,255,.07);
  --cfx-line2:rgba(255,255,255,.13);
  --cfx-ink:#EDF0F8;
  --cfx-muted:#98A0B6;
  --cfx-muted2:#666E85;
  --cfx-bl:#4A8CFF;
  --cfx-grad:linear-gradient(100deg,#5B5BF5,#7C5CFF);
  --cfx-wrap:1400px;
}

/* ---------- NAVBAR ---------- */
.cfx-nav{position:sticky;top:0;z-index:200;background:rgba(5,7,14,.92);
  backdrop-filter:blur(20px);border-bottom:1px solid var(--cfx-line);
  font-family:"Inter",system-ui,sans-serif}
.cfx-nav *{box-sizing:border-box}
.cfx-nav-in{max-width:var(--cfx-wrap);margin:0 auto;padding:0 22px;
  display:flex;align-items:center;height:66px;gap:16px}
.cfx-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cfx-ink);flex:none}
.cfx-logo img{width:30px;height:30px;object-fit:contain}
.cfx-logo span{font-family:"Manrope",system-ui,sans-serif;font-weight:800;font-size:18px;letter-spacing:-.02em}
.cfx-logo b{color:var(--cfx-bl);font-weight:800}

.cfx-links{display:flex;align-items:center;gap:26px;margin:0 auto;
  font-size:13.5px;font-weight:500;color:var(--cfx-muted)}
.cfx-links a{position:relative;padding:6px 0;text-decoration:none;color:inherit;white-space:nowrap;transition:color .16s}
.cfx-links a:hover{color:var(--cfx-ink)}
.cfx-links a.on{color:var(--cfx-ink);font-weight:600}
.cfx-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  border-radius:2px;background:var(--cfx-grad)}

.cfx-right{display:flex;align-items:center;gap:10px;flex:none}
.cfx-ib{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  color:var(--cfx-muted);background:none;border:0;cursor:pointer;position:relative;
  text-decoration:none;flex:none;transition:all .16s}
.cfx-ib:hover{color:var(--cfx-ink);background:rgba(255,255,255,.05)}
.cfx-ib svg{width:18px;height:18px}
.cfx-ib .cfx-dot{position:absolute;top:-2px;right:-2px;background:#EF4444;color:#fff;
  font-size:9px;font-weight:800;min-width:16px;height:16px;border-radius:8px;
  display:grid;place-items:center;padding:0 4px;font-family:"Manrope",sans-serif}

.cfx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;
  padding:10px 18px;font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:13px;
  border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .16s,background .18s,border-color .18s}
.cfx-btn.grad{background:var(--cfx-grad);color:#fff;box-shadow:0 8px 22px rgba(91,91,245,.3)}
.cfx-btn.grad:hover{transform:translateY(-2px)}
.cfx-btn.outline{background:transparent;border:1px solid var(--cfx-line2);color:var(--cfx-ink)}
.cfx-btn.outline:hover{background:rgba(255,255,255,.05)}

/* account menu */
.cfx-acc{position:relative;flex:none}
.cfx-acc-btn{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid var(--cfx-line);cursor:pointer;
  color:var(--cfx-ink);font-family:"Inter",sans-serif}
.cfx-acc-btn .cfx-pic{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;
  display:grid;place-items:center;font-family:"Manrope",sans-serif;font-weight:800;font-size:11px;
  color:#fff;background:linear-gradient(140deg,#5B5BF5,#A855F7)}
.cfx-acc-btn .cfx-nm{text-align:left;line-height:1.25}
.cfx-acc-btn .cfx-nm b{display:block;font-size:12px;font-weight:700}
.cfx-acc-btn .cfx-nm span{font-size:10.5px;color:var(--cfx-muted2)}
.cfx-acc-btn svg{width:13px;height:13px;color:var(--cfx-muted2)}

.cfx-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:214px;
  background:#10152A;border:1px solid var(--cfx-line2);border-radius:13px;padding:7px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);display:none;z-index:210}
.cfx-menu.open{display:block}
.cfx-menu a,.cfx-menu button{display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 11px;border-radius:9px;color:var(--cfx-muted);font-size:12.5px;
  text-decoration:none;background:none;border:0;cursor:pointer;font-family:"Inter",sans-serif;text-align:left}
.cfx-menu a:hover,.cfx-menu button:hover{background:rgba(255,255,255,.05);color:var(--cfx-ink)}
.cfx-menu svg{width:15px;height:15px;flex:none}
.cfx-menu .cfx-sep{height:1px;background:var(--cfx-line);margin:6px 4px}
.cfx-menu .cfx-out{color:#F87171}
.cfx-menu .cfx-out:hover{background:rgba(239,68,68,.1);color:#F87171}
.cfx-menu .cfx-head{padding:9px 11px 10px;border-bottom:1px solid var(--cfx-line);margin-bottom:6px}
.cfx-menu .cfx-head b{display:block;font-size:13px;font-family:"Manrope",sans-serif}
.cfx-menu .cfx-head span{font-size:11px;color:var(--cfx-muted2)}

.cfx-burger{display:none;background:none;border:0;color:var(--cfx-ink);padding:6px;cursor:pointer}
.cfx-burger svg{width:22px;height:22px}

/* ---------- FOOTER ---------- */
.cfx-foot{border-top:1px solid var(--cfx-line);background:var(--cfx-bg2);
  padding:42px 0 24px;margin-top:auto;font-family:"Inter",system-ui,sans-serif;color:var(--cfx-ink)}
.cfx-foot *{box-sizing:border-box}
.cfx-foot-in{max-width:var(--cfx-wrap);margin:0 auto;padding:0 22px}
.cfx-fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:26px}
.cfx-fbrand p{font-size:12.5px;color:var(--cfx-muted2);line-height:1.7;max-width:250px;margin:12px 0 0}
.cfx-fbrand .cfx-by{display:block;font-size:11.5px;color:var(--cfx-muted2);margin-top:9px}
.cfx-fbrand .cfx-by b{font-family:"Manrope",sans-serif;font-weight:800;
  background:linear-gradient(100deg,#7C8BFF,#C084FC);-webkit-background-clip:text;background-clip:text;color:transparent}
.cfx-fcol h4{font-family:"Manrope",sans-serif;font-size:13px;font-weight:800;margin:0 0 12px}
.cfx-fcol a{display:block;font-size:12.5px;color:var(--cfx-muted2);padding:4px 0;text-decoration:none;transition:color .16s}
.cfx-fcol a:hover{color:var(--cfx-ink)}
.cfx-socials{display:flex;gap:9px;margin-top:14px}
.cfx-socials a{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.05);
  display:grid;place-items:center;color:var(--cfx-muted);padding:0}
.cfx-socials a:hover{background:var(--cfx-grad);color:#fff}
.cfx-socials svg{width:15px;height:15px}
.cfx-fbase{margin-top:26px;padding-top:18px;border-top:1px solid var(--cfx-line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:12px;color:var(--cfx-muted2)}
.cfx-fbase a{color:#A78BFA;font-weight:600;text-decoration:none}
.cfx-fbase a:hover{text-decoration:underline}
.cfx-heart{color:#EF4444;font-style:normal}

/* the footer always sits at the bottom, even on short pages */
html,body{min-height:100%}
body{display:flex;flex-direction:column;min-height:100vh}
body > .cfx-foot{flex:none}

@media (max-width:1080px){
  .cfx-fgrid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:920px){
  .cfx-links{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:15px;background:rgba(8,11,20,.98);padding:20px 22px;
    border-bottom:1px solid var(--cfx-line);margin:0}
  .cfx-links.open{display:flex}
  .cfx-burger{display:grid}
  .cfx-right .cfx-btn.outline{display:none}
  .cfx-acc-btn .cfx-nm{display:none}
}
@media (max-width:620px){
  .cfx-fgrid{grid-template-columns:1fr 1fr}
  .cfx-fbase{flex-direction:column}
  .cfx-nav-in{padding:0 16px;gap:10px}
}
@media (prefers-reduced-motion:reduce){.cfx-nav *,.cfx-foot *{transition:none!important}}

/* ============================================
   One layout for every page
   ============================================ */

/* Every page centres on the same column width, so moving between the
   marketing pages and the app does not shift the content sideways. */
.cfx-nav-in,.cfx-foot-in{max-width:var(--cfx-wrap)}
body > .wrap,
body > main > .wrap,
body > section > .wrap{max-width:var(--cfx-wrap)!important}
body > .app{max-width:var(--cfx-wrap);margin:0 auto;width:100%;flex:1;min-height:0}

/* The sidebar stays put while the page scrolls. */
body > .app > .side,
body > .app > aside.side,
body > .app > .rail{
  position:sticky;
  top:66px;
  height:calc(100vh - 66px);
  overflow-y:auto;
  overscroll-behavior:contain;
  align-self:flex-start;
  flex:none;
}

/* Sticky panels inside a page sit below the navbar rather than under it. */
body .toc,
body .side-sticky{top:82px}

/* Page content should never be shorter than the viewport, so the footer
   does not float up on near-empty pages. */
body > .app > .main{flex:1;min-width:0}

@media (max-width:980px){
  body > .app > .side,
  body > .app > aside.side,
  body > .app > .rail{position:fixed;top:66px;height:calc(100vh - 66px);z-index:80}
}