/* ============================================================
   SYSLX - the public site.

   This is the site's own stylesheet, exactly as it was: it lived inline in index.html
   and is here so download.php, privacy.php and terms.php share one copy instead of
   repeating it. Nothing below was restyled. The only edits since:

     * the accent follows the logo (#D800F0) rather than the violet it used to be.
     * rules the pages that did not exist in the old site need are at the bottom, under
       "pages the old site did not have", so it stays clear what is original.
   ============================================================ */

:root{
  --bg:#07060d; --surface:rgba(18,16,34,.7); --surface-2:rgba(24,21,48,.6);
  --border:rgba(168,139,250,.16); --border-2:rgba(168,139,250,.3);
  --primary:#D800F0; --primary-700:#6d28d9; --cyan:#22d3ee;
  --text:#f4f2fb; --muted:#a79fc4; --faint:#776f99;
  --r:14px; --r-lg:20px;
  --font:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --brand:"Orbitron",var(--font);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; letter-spacing:-.02em; }
img{ max-width:100%; display:block; }

/* backdrop: subtle glows + faint wallpaper, no glitch */
.bg{ position:fixed; inset:0; z-index:-2; background:
  radial-gradient(1000px 600px at 75% -10%, rgba(216,0,240,.22), transparent 60%),
  radial-gradient(800px 500px at 10% 110%, rgba(34,211,238,.12), transparent 55%),
  var(--bg); }
.bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,6,13,.82), rgba(7,6,13,.94)), url("/assets/syslx-wallpaper.png");
  background-size:cover; background-position:center; opacity:.18; }

.container{ width:min(1140px,100%); margin:0 auto; padding:0 22px; }

/* nav */
.nav{ position:sticky; top:0; z-index:20; backdrop-filter:blur(14px);
  background:rgba(7,6,13,.6); border-bottom:1px solid var(--border); }
.nav-inner{ display:flex; align-items:center; gap:16px; height:66px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--brand); font-weight:800; font-size:18px; letter-spacing:.16em; text-transform:uppercase; }
.brand img{ width:34px; height:34px; filter:drop-shadow(0 0 12px rgba(216,0,240,.55)); }
.brand span{ background:linear-gradient(90deg,#fff,var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:24px; }
.nav-links a.lnk{ color:var(--muted); font-weight:500; font-size:14px; transition:color .15s; }
.nav-links a.lnk:hover{ color:var(--text); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:11px 20px; border-radius:var(--r);
  font-weight:600; font-size:14px; border:1px solid transparent; cursor:pointer; transition:transform .14s,box-shadow .18s,background .18s;
  background:linear-gradient(135deg,var(--primary-700),var(--primary)); color:#fff; box-shadow:0 8px 22px rgba(109,40,217,.4); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(109,40,217,.55); }
.btn svg{ width:18px; height:18px; }
.btn.ghost{ background:var(--surface-2); border-color:var(--border); color:var(--text); box-shadow:none; }
.btn.ghost:hover{ border-color:var(--border-2); background:rgba(33,28,61,.7); }
.btn.discord{ background:linear-gradient(135deg,#5865f2,#4752c4); box-shadow:0 8px 22px rgba(88,101,242,.4); }
.btn.lg{ padding:15px 26px; font-size:15.5px; border-radius:var(--r); }

/* hero */
.hero{ text-align:center; padding:84px 0 64px; }
.chips{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:var(--surface); border:1px solid var(--border); color:var(--muted); }
.chip.status{ color:var(--cyan); border-color:rgba(34,211,238,.35); }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:pulse 1.8s infinite ease-in-out; }
@keyframes pulse{ 0%,100%{ opacity:.6; transform:scale(.85);} 50%{ opacity:1; transform:scale(1.1);} }
.hero h1{ font-family:var(--brand); font-weight:800; font-size:clamp(48px,8vw,96px); line-height:1; text-transform:uppercase; letter-spacing:.04em;
  text-shadow:0 0 50px rgba(216,0,240,.4); }
.hero h1 .v{ background:linear-gradient(90deg,var(--cyan),var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ max-width:60ch; margin:20px auto 0; color:var(--muted); font-size:clamp(16px,2.2vw,19px); }
.cta{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:34px; }

/* sections */
section.block{ padding:54px 0; }
.sec-head{ text-align:center; margin-bottom:38px; }
.sec-head h2{ font-size:clamp(26px,4vw,38px); }
.sec-head p{ color:var(--muted); margin-top:10px; }

.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feat{ background:linear-gradient(180deg,var(--surface),rgba(16,14,30,.5)); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px; transition:transform .18s,border-color .18s; }
.feat:hover{ transform:translateY(-4px); border-color:var(--border-2); }
.feat .ic{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px;
  background:rgba(216,0,240,.14); color:var(--primary); border:1px solid var(--border-2); }
.feat .ic svg{ width:24px; height:24px; }
.feat h3{ font-size:17px; margin-bottom:6px; }
.feat p{ color:var(--muted); font-size:14px; margin:0; }

.review-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.review{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; display:flex; flex-direction:column; gap:12px; }
.stars{ color:#fbbf24; font-size:14px; letter-spacing:2px; }
.review p{ margin:0; font-size:14px; color:var(--text); flex:1; }
.review .who{ font-size:12px; color:var(--faint); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }

.cta-band{ text-align:center; background:linear-gradient(135deg,rgba(216,0,240,.14),rgba(34,211,238,.08));
  border:1px solid var(--border-2); border-radius:var(--r-lg); padding:46px 24px; margin:20px 0; }
.cta-band h2{ font-size:clamp(24px,4vw,34px); }
.cta-band p{ color:var(--muted); margin:10px auto 26px; max-width:46ch; }

footer{ border-top:1px solid var(--border); padding:26px 0; }
.foot-inner{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; color:var(--faint); font-size:13px; }
footer a{ color:var(--cyan); } footer a:hover{ text-decoration:underline; }

@media (max-width:900px){ .features{ grid-template-columns:repeat(2,1fr);} .review-grid{ grid-template-columns:repeat(2,1fr);} .nav-links{ gap:14px; } .nav-links a.lnk{ display:none; } }
@media (max-width:540px){ .features,.review-grid{ grid-template-columns:1fr; } .hero{ padding:56px 0 44px; } }
/* Below about 400px the wordmark and the two header buttons need more width than the
   header has, and the X of SYSLX ran under the Panel button. The logo stays; the word
   goes, on the one size where it did not fit. */
@media (max-width:400px){ .brand span{ display:none; } .brand{ gap:0; } }
@media (prefers-reduced-motion:reduce){ .dot{ animation:none; } html{ scroll-behavior:auto; } .btn{ transition:none; } }
  

/* Keyboard focus, in the brand colour rather than whatever the browser draws. Added to
   the original stylesheet; nothing above changed. */
.btn:focus-visible, .lnk:focus-visible, .brand:focus-visible, a:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px;
}

/* Dark browser-drawn widgets (scrollbar, select lists) to match the page. */
:root { color-scheme: dark; }

/* ============================================================
   Pages the old site did not have: download.php, privacy.php, terms.php, 404.html.
   They reuse the landing page's surfaces (the .feat card, the hero, the CTA row) so a
   visitor moving between pages sees one site. Nothing above this line changed.
   ============================================================ */
.wrap{ width:min(1140px,100%); margin:0 auto; padding:0 22px; }

/* Long-form text (privacy, terms): a readable measure, centred, with room above and below. */
.prose{ max-width:76ch; padding-top:56px; padding-bottom:72px; }
.prose h1{ font-size:clamp(32px,5vw,44px); margin-bottom:8px; }
.prose h2{ font-size:clamp(20px,3vw,26px); margin:38px 0 12px; }
.prose p{ margin:0 0 14px; color:var(--muted); }
.prose ul{ margin:0 0 16px; padding-left:22px; color:var(--muted); }
.prose li{ margin:6px 0; }
.prose li strong, .prose p strong{ color:var(--text); font-weight:600; }
.prose code{ font-family:"JetBrains Mono",ui-monospace,Consolas,monospace; font-size:.9em; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:1px 6px; }
.center-text{ text-align:center; }
.hero .prose{ padding-top:0; padding-bottom:0; }

/* Text tones and spacing used by those pages. */
.muted{ color:var(--muted); }
.faint{ color:var(--faint); }
.text-primary{ color:var(--cyan); } .text-primary:hover{ text-decoration:underline; }
.text-strong{ color:var(--text); }
.m-0{ margin:0; } .mt-16{ margin-top:16px; } .mt-18{ margin-top:18px; } .mt-26{ margin-top:26px; }

/* Download: a shorter hero with a label above the title, then card rows. */
.hero-compact{ padding:64px 0 52px; }
.eyebrow{ display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:14px; }
.section-tight{ padding:0 0 72px; }
.grid{ display:grid; gap:18px; }
.grid.three{ grid-template-columns:repeat(3,1fr); }
.grid.two{ grid-template-columns:repeat(2,1fr); }
.card{ background:linear-gradient(180deg,var(--surface),rgba(16,14,30,.5)); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:24px; }
.card h3{ font-size:17px; margin-bottom:8px; }
.card p{ color:var(--muted); font-size:14.5px; margin:0; }
.card p + p{ margin-top:10px; }
.card a.text-primary{ color:var(--cyan); }

/* 404 and the "back shortly" page. */
.hero-404{ padding:110px 0 120px; }
.hero h1.code-404{ font-family:var(--brand); font-weight:800; font-size:clamp(72px,16vw,150px); line-height:1; letter-spacing:.06em;
  background:linear-gradient(90deg,var(--cyan),var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:8px; }
.hero-404 .btn{ margin:4px; }

@media (max-width:900px){ .grid.three{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .grid.three, .grid.two{ grid-template-columns:1fr; } .prose{ padding-top:36px; padding-bottom:56px; } .hero-404{ padding:72px 0 80px; } }