/* nexus-public.css — Public landing page for nexus.nw */
/* Standalone — no shell. Own theme vars scoped to .nx-public */

html, body { margin: 0; padding: 0; }

.nx-public {

    --bg:       #0f1117;

    --bg2:      #131720;

    --bg3:      #1e2535;

    --t1:       #f1f5f9;

    --t2:       #94a3b8;

    --t3:       #475569;

    --bd:       #1e2535;

    --acc:      #0ea5e9;

    --acc-bg:   #0c2a3d;

    --acc-t:    #38bdf8;

    --spark:    #f59e0b;

    --spk-bg:   #291800;

    --spk-t:    #fcd34d;

    --col:      #8b5cf6;

    --col-bg:   #1e1040;

    --col-t:    #c4b5fd;

    --grn:      #22c55e;

    --grn-bg:   #052e16;

    --grn-t:    #86efac;

    --rose-bg:  #2d0a1e;

    --rose-t:   #f9a8d4;

    font-family: 'Outfit', system-ui, sans-serif;

    background: var(--bg);

    color: var(--t1);

    width: 100%;

    transition: background 0.2s, color 0.2s;

}



.nx-public.light {

    --bg:       #ffffff;

    --bg2:      #f8fafc;

    --bg3:      #f1f5f9;

    --t1:       #0f172a;

    --t2:       #475569;

    --t3:       #94a3b8;

    --bd:       #e2e8f0;

    --acc:      #0ea5e9;

    --acc-bg:   #e0f2fe;

    --acc-t:    #0369a1;

    --spark:    #f59e0b;

    --spk-bg:   #fef3c7;

    --spk-t:    #92400e;

    --col:      #8b5cf6;

    --col-bg:   #ede9fe;

    --col-t:    #5b21b6;

    --grn:      #16a34a;

    --grn-bg:   #dcfce7;

    --grn-t:    #14532d;

    --rose-bg:  #fdf2f8;

    --rose-t:   #9d174d;

}



/* NAV */

.nx-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 40px; background: var(--bg); border-bottom: 0.5px solid var(--bd); position: sticky; top: 0; z-index: 100; }

.nx-logo { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 500; color: var(--t1); text-decoration: none; }

.nx-lmark { width: 28px; height: 28px; background: var(--acc); border-radius: 7px; display: flex; align-items: center; justify-content: center; }

.nx-lmark svg { width: 16px; height: 16px; fill: #fff; }

.nx-bar-r { display: flex; align-items: center; gap: 10px; }

.nx-tbtn { width: 32px; height: 32px; border-radius: 7px; border: 0.5px solid var(--bd); background: var(--bg2); color: var(--t2); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; line-height: 1; }

.nx-si { padding: 7px 16px; border-radius: 7px; border: 0.5px solid var(--bd); background: transparent; color: var(--t2); font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block; }

.nx-cb { padding: 7px 18px; border-radius: 7px; border: none; background: var(--acc); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block; }



/* HERO */

.nx-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; border-bottom: 0.5px solid var(--bd); }

.nx-hero-l { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; }

.nx-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; background: var(--acc-bg); color: var(--acc-t); font-size: 11px; margin-bottom: 16px; border: 0.5px solid var(--acc); width: fit-content; }

.nx-badge svg { width: 11px; height: 11px; fill: currentColor; }

.nx-h1 { font-size: 32px; font-weight: 500; line-height: 1.22; color: var(--t1); margin-bottom: 12px; }

.nx-h1 em { font-style: normal; color: var(--acc); }

.nx-hsub { font-size: 14px; color: var(--t2); line-height: 1.7; margin-bottom: 22px; max-width: 480px; }

.nx-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

.nx-cp { padding: 10px 22px; border-radius: 7px; background: var(--acc); color: #fff; font-size: 14px; font-weight: 500; border: none; cursor: pointer; text-decoration: none; display: inline-block; }

.nx-cg { padding: 10px 18px; border-radius: 7px; background: transparent; color: var(--t2); font-size: 14px; border: 0.5px solid var(--bd); cursor: pointer; text-decoration: none; display: inline-block; }

.nx-hnote { font-size: 12px; color: var(--t3); }

.nx-hero-r { background: var(--bg2); border-left: 0.5px solid var(--bd); padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }



/* MOCK POSTS */

.nx-post-mock { background: var(--bg); border: 0.5px solid var(--bd); border-radius: 10px; padding: 14px 16px; }

.nx-pm-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }

.nx-av { width: 32px; height: 32px; border-radius: 50%; background: var(--acc-bg); border: 1.5px solid var(--acc); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--acc-t); flex-shrink: 0; }

.nx-av.g { background: var(--grn-bg); border-color: var(--grn); color: var(--grn-t); }

.nx-pm-name { font-size: 13px; font-weight: 500; color: var(--t1); }

.nx-pm-une { font-size: 11px; color: var(--t3); }

.nx-pm-body { font-size: 13px; color: var(--t2); line-height: 1.6; margin-bottom: 10px; }

.nx-pm-sparks { display: flex; gap: 6px; flex-wrap: wrap; }

.nx-spark-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; background: var(--spk-bg); color: var(--spk-t); font-size: 11px; border: 0.5px solid var(--spark); }

.nx-spark-chip svg { width: 10px; height: 10px; stroke: var(--spk-t); fill: none; stroke-width: 2; }



/* IDENTITY BAR */

.nx-id-bar { background: var(--acc-bg); border-bottom: 0.5px solid var(--acc); padding: 16px 48px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.nx-id-label { font-size: 13px; color: var(--acc-t); white-space: nowrap; font-weight: 500; }

.nx-id-search { display: flex; flex: 1; min-width: 280px; max-width: 480px; border-radius: 8px; border: 1.5px solid var(--acc); overflow: hidden; background: var(--bg); }

.nx-id-in { flex: 1; padding: 9px 14px; border: none; background: transparent; color: var(--t1); font-size: 14px; outline: none; }

.nx-id-sfx { padding: 9px 10px 9px 0; color: var(--acc); font-size: 14px; font-weight: 500; background: transparent; }

.nx-id-go { padding: 0 20px; background: var(--acc); color: #fff; border: none; font-size: 13px; font-weight: 500; cursor: pointer; }

.nx-id-note { font-size: 12px; color: var(--acc-t); opacity: 0.8; }



/* SECTIONS */

.nx-section { padding: 48px 48px; }

.nx-sec-h { font-size: 20px; font-weight: 500; color: var(--t1); margin-bottom: 6px; }

.nx-sec-s { font-size: 14px; color: var(--t2); margin-bottom: 28px; }



/* FEATURES */

.nx-feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.nx-fc { background: var(--bg2); border-radius: 10px; border: 0.5px solid var(--bd); padding: 18px; }

.nx-fi { width: 34px; height: 34px; border-radius: 8px; background: var(--acc-bg); display: flex; align-items: center; justify-content: center; margin-bottom: 11px; }

.nx-fi svg { width: 17px; height: 17px; stroke: var(--acc); fill: none; stroke-width: 2; }

.nx-fh { font-size: 13px; font-weight: 500; color: var(--t1); margin-bottom: 5px; }

.nx-fp { font-size: 12px; color: var(--t2); line-height: 1.6; }



/* SPARKS */

.nx-sparks-sec { background: var(--bg2); border-top: 0.5px solid var(--bd); border-bottom: 0.5px solid var(--bd); padding: 48px 48px; }

.nx-sparks-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

.nx-spark-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; background: var(--spk-bg); color: var(--spk-t); font-size: 11px; font-weight: 500; margin-bottom: 12px; border: 0.5px solid var(--spark); }

.nx-spark-badge svg { width: 11px; height: 11px; fill: currentColor; }

.nx-sparks-h { font-size: 22px; font-weight: 500; color: var(--t1); margin-bottom: 8px; }

.nx-sparks-p { font-size: 14px; color: var(--t2); line-height: 1.7; margin-bottom: 20px; }

.nx-st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.nx-st { background: var(--bg); border: 0.5px solid var(--bd); border-radius: 9px; padding: 12px 13px; display: flex; align-items: flex-start; gap: 9px; }

.nx-sp { width: 26px; height: 26px; border-radius: 7px; background: var(--spk-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.nx-sp svg { width: 12px; height: 12px; stroke: var(--spk-t); fill: none; stroke-width: 2; }

.nx-sth { font-size: 12px; font-weight: 500; color: var(--t1); margin-bottom: 2px; }

.nx-stp { font-size: 11px; color: var(--t3); }



/* COLISEUM */

.nx-col-box { background: var(--col-bg); border: 0.5px solid var(--col); border-radius: 10px; padding: 20px; }

.nx-col-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }

.nx-col-ico { width: 38px; height: 38px; border-radius: 9px; background: var(--col); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.nx-col-ico svg { width: 20px; height: 20px; fill: #fff; }

.nx-col-h { font-size: 15px; font-weight: 500; color: var(--col-t); }

.nx-col-p { font-size: 13px; color: var(--t2); line-height: 1.6; margin-bottom: 14px; }

.nx-col-steps { display: flex; flex-direction: column; gap: 7px; }

.nx-col-step { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--t2); }

.nx-col-num { width: 20px; height: 20px; border-radius: 50%; background: var(--col-bg); border: 0.5px solid var(--col); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; color: var(--col-t); flex-shrink: 0; }



/* ECOSYSTEM */

.nx-eco { padding: 48px 48px; background: var(--bg); border-top: 0.5px solid var(--bd); }

.nx-eco-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }

.nx-eco-card { background: var(--bg2); border: 0.5px solid var(--bd); border-radius: 10px; padding: 14px; }

.nx-eco-name { font-size: 13px; font-weight: 500; color: var(--t1); margin-bottom: 5px; }

.nx-eco-desc { font-size: 11px; color: var(--t2); line-height: 1.5; margin-bottom: 8px; }

.nx-eco-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 500; }

.eco-social   { background: var(--acc-bg); color: var(--acc-t); }

.eco-media    { background: var(--col-bg);  color: var(--col-t); }

.eco-news     { background: var(--grn-bg);  color: var(--grn-t); }

.eco-commerce { background: var(--spk-bg);  color: var(--spk-t); }

.eco-realty   { background: var(--rose-bg); color: var(--rose-t); }

.eco-identity { background: var(--acc-bg);  color: var(--acc-t); }



/* COMPARE */

.nx-cmp { padding: 48px 48px; background: var(--bg2); border-top: 0.5px solid var(--bd); }

.nx-cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }

.nx-cc { background: var(--bg); border-radius: 10px; border: 0.5px solid var(--bd); padding: 20px; }

.nx-cc.ours { border-color: var(--acc); border-width: 1.5px; }

.nx-cc-lbl { font-size: 11px; color: var(--t3); letter-spacing: 0.06em; margin-bottom: 5px; }

.nx-cc-name { font-size: 16px; font-weight: 500; margin-bottom: 14px; }

.nx-cc-name.blue { color: var(--acc); }

.nx-cc-name.gray { color: var(--t3); }

.nx-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.nx-row { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--t2); }

.nx-dt { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 500; }

.nx-dt.y { background: var(--acc-bg); color: var(--acc-t); }

.nx-dt.n { background: var(--bg3); color: var(--t3); }



/* BOTTOM CTA */

.nx-bot { padding: 52px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; background: var(--bg); border-top: 0.5px solid var(--bd); }

.nx-bot-l h2 { font-size: 26px; font-weight: 500; color: var(--t1); margin-bottom: 10px; }

.nx-bot-l p { font-size: 14px; color: var(--t2); line-height: 1.7; margin-bottom: 22px; }

.nx-bot-cta { padding: 12px 30px; border-radius: 8px; background: var(--acc); color: #fff; font-size: 14px; font-weight: 500; border: none; cursor: pointer; text-decoration: none; display: inline-block; margin-bottom: 12px; }

.nx-bot-si { font-size: 13px; color: var(--t3); }

.nx-bot-si a { color: var(--acc); text-decoration: none; }

.nx-bot-r { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.nx-stat { background: var(--bg2); border: 0.5px solid var(--bd); border-radius: 10px; padding: 16px; }

.nx-stat-n { font-size: 22px; font-weight: 500; color: var(--acc); margin-bottom: 4px; }

.nx-stat-l { font-size: 12px; color: var(--t2); }