/* ============================================================================
   PredixHub — the PUBLIC marketing site (landing, features, guide, leaderboard,
   hall of fame, for-servers). ONE stylesheet for the chrome every page shares:
   tokens, type, buttons, the nav and the footer. Page-specific blocks stay in
   that page's own <style>.

   Before this file each marketing page carried its own copy of the tokens, the
   nav and the footer — five copies that had already started to drift (different
   nav links, three different max-widths). Change the chrome here, once.

   COLOUR LAW: green #34e07e = YOUR SERVER. violet #b46cff = THE GLOBAL LADDER.
   gold #f5c451 = tier/honour accent. Nothing else borrows those three.
   ============================================================================ */
:root{
  --bg:#0b0d10; --panel:#14171c; --panel-2:#1a1d22; --panel-3:#20242b;
  --ink:#eef2f1; --dim:#a7b0ba; --faint:#5b626c; --hair:rgba(255,255,255,.09);
  --green:#34e07e; --violet:#b46cff; --gold:#f5c451; --dead:#f87171;
  --f:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --nav-h:60px;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;width:100%}
.wrap-narrow{max-width:940px;margin:0 auto;padding:0 24px;width:100%}
.m{font-family:var(--m);font-variant-numeric:tabular-nums}
main{flex:1 0 auto}

/* ---------------- type ---------------- */
.eyebrow{font-family:var(--m);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.eyebrow.g{color:var(--green)} .eyebrow.v{color:var(--violet)} .eyebrow.gold{color:var(--gold)}
.h2{font-weight:800;font-size:clamp(1.6rem,3.6vw,2.5rem);letter-spacing:-.025em;line-height:1.04;margin:0;text-wrap:balance}
.sub{color:var(--dim);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.6;max-width:60ch;margin:16px 0 0}
.sub b{color:var(--ink);font-weight:600}
section{padding:clamp(56px,8vh,96px) 0;border-top:1px solid var(--hair)}
section[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:.92rem;padding:12px 20px;border-radius:11px;border:1px solid var(--hair);cursor:pointer;background:transparent;color:var(--ink);font-family:var(--f);white-space:nowrap;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--violet);border-color:var(--violet);color:#16091f}
.btn-solid:hover{background:#c488ff}
.btn-g{border-color:rgba(52,224,126,.5);color:var(--green)}
.btn-g:hover{background:rgba(52,224,126,.08)}
.btn-v{border-color:rgba(180,108,255,.5);color:var(--violet)}
.btn-v:hover{background:rgba(180,108,255,.08)}
.btn-lg{padding:15px 26px;font-size:1rem;border-radius:13px}
.dsc{width:17px;height:17px;flex:0 0 auto;fill:currentColor}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(11,13,16,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.nav-in{max-width:1120px;margin:0 auto;padding:0 24px;min-height:var(--nav-h);display:flex;align-items:center;gap:14px}
/* The brand lockup, matched to the one in the app sidebar (.dx2-brand): the round logo with its green
   halo, then the wordmark at weight 700 with "Hub" in the accent. It used to be a hand-drawn SVG and a
   heavier, smaller wordmark, so the marketing site and the product did not look like the same company. */
.mark{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto;color:var(--ink)}
.mark .logo{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(52,224,126,.35),0 0 16px -2px rgba(52,224,126,.45)}
.mark .word{font-weight:700;font-size:1.18rem;letter-spacing:-.02em;line-height:1}
.mark b{color:var(--green);font-weight:700}
@media(max-width:600px){
  .mark .logo{width:27px;height:27px}
  .mark .word{font-size:1.06rem}
}
.nav-menu{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav-menu a{font-size:.86rem;font-weight:600;color:var(--dim);padding:8px 11px;border-radius:9px;white-space:nowrap}
.nav-menu a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.nav-menu a.on{color:var(--ink)}
.nav-menu a.on::after{content:'';display:block;height:2px;border-radius:2px;background:var(--green);margin:5px 11px -8px}
.nav-cta{display:flex;align-items:center;gap:8px;margin-left:10px}
.nav-cta .btn{padding:8px 14px;font-size:.83rem}
.nav-toggle{display:none;margin-left:auto;width:38px;height:38px;border-radius:10px;border:1px solid var(--hair);background:transparent;color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* Phone-only bits of the bar: Log in sits beside the burger, and the community link joins the panel.
   Both are display:none here and switched on in the ≤880px block below. */
.nav-login{display:none}
.nav-discord{display:none}
@media(max-width:1000px){
  .nav-menu a{padding:8px 8px;font-size:.82rem}
  .nav-cta .btn{padding:8px 11px;font-size:.78rem}
}
@media(max-width:880px){
  .nav-toggle{display:inline-flex;margin-left:0}
  /* Log in takes the auto margin the burger used to hold, so the two sit together on the right. */
  .nav-login{display:inline-flex;margin-left:auto;padding:8px 14px;font-size:.83rem;flex:0 0 auto}
  .nav-cta-login{display:none} /* it is already in the bar — offering it twice is clutter, not convenience */
  .nav-menu{position:absolute;left:0;right:0;top:100%;margin:0;display:none;flex-direction:column;align-items:stretch;gap:2px;
    padding:12px 16px 18px;background:#0e1116;border-bottom:1px solid var(--hair);box-shadow:0 24px 40px -28px #000}
  .nav.open .nav-menu{display:flex}
  .nav-menu a{padding:12px 10px;font-size:.95rem;color:var(--ink)}
  .nav-menu a.on::after{margin:6px 10px -6px;width:26px}
  /* Filled green, like the community button on the home: an outline link next to a solid "Add to Discord"
     read as decoration rather than a second way in. */
  .nav-discord{display:inline-flex;background:var(--green);border-color:var(--green);color:#04240f}
  .nav-discord:hover{background:#57e996}
  .nav-discord .dsc{width:16px;height:16px}
  .nav-cta{margin:10px 0 0;flex-direction:column;align-items:stretch;gap:9px}
  .nav-cta .btn{padding:12px 16px;font-size:.9rem}
}
/* Under ~380px the wordmark, the button and the burger stop fitting on one line — shrink the button, not
   the tap target. */
@media(max-width:380px){
  .nav-login{padding:8px 11px;font-size:.78rem}
  .nav-in{gap:10px}
}

/* ---------------- the Discord "verified app" badge ----------------
   Anything marked data-verified is HIDDEN until the site has confirmed, from Discord's own flag (via
   /api/public → the bot's /app-identity), that this app really does carry the verified badge. The claim is
   never in the markup as a fact — the markup only says "show this IF it is true". Fails closed: no answer,
   no badge. */
[data-verified]{display:none}
.verified-app [data-verified]{display:inline-flex}
.vbadge{align-items:center;gap:7px;font-family:var(--m);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:#8ea1ff;background:rgba(88,101,242,.12);border:1px solid rgba(88,101,242,.42);border-radius:999px;padding:6px 12px}
.vbadge svg{width:13px;height:13px;flex:0 0 auto;fill:currentColor}

/* ---------------- footer ---------------- */
.site-footer{flex-shrink:0;border-top:1px solid var(--hair);padding:44px 0 52px;margin-top:0}
.f-cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
@media(max-width:820px){ .f-cols{grid-template-columns:1fr 1fr;gap:26px} }
@media(max-width:480px){ .f-cols{grid-template-columns:1fr} }
.f-brand .mark{margin-bottom:12px}
.f-brand .mark .word{font-size:1.1rem}
.f-brand p{margin:0;color:var(--faint);font-size:.82rem;line-height:1.6;max-width:34ch}
.f-col h4{font-family:var(--m);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 12px}
.f-col a{display:block;color:var(--dim);font-size:.86rem;padding:4px 0}
.f-col a:hover{color:var(--ink)}
.f-col a.join{color:var(--green);font-weight:600}
.f-legal{margin:34px 0 0;padding-top:20px;border-top:1px solid var(--hair);font-family:var(--m);font-size:.66rem;line-height:1.7;color:#454c55;max-width:88ch}

@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }