:root {
  --bg: #0c0c09;
  --panel: #23272c;
  --panel-alt: #1b1c1d;
  --text: #e7e7e7;
  --muted: #bbb;
  --accent: #d8711c;
  --accent-hover: #f28c2b;
  --teal: #06bb8d;
  --card-border: #32302f;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  background: radial-gradient(1200px 800px at 70% -10%, rgba(255,255,255,0.06), transparent 60%) var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.wrap { width: min(1280px, 92vw); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, var(--panel), var(--panel-alt));
  border-bottom: 1px solid var(--card-border);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 0;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { width: 36px; height: 36px; }
.brand-name { font-weight: 700; letter-spacing: 0.3px; }

.nav a {
  margin: 0 10px; text-decoration: none; color: var(--muted);
}
.nav a:hover { color: var(--text); }

.btn {
  display: inline-block; padding: 10px 16px; border-radius: 10px; text-decoration: none; 
  background: var(--panel-alt); color: var(--text); border: 1px solid var(--card-border);
  transition: transform .05s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #111; font-weight: 700; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.ghost { background: transparent; border-color: var(--card-border); }
.btn.subtle { background: #121314; }
.btn.block { display: block; text-align: center; width: 100%; }

.hero {
  padding: 64px 0 32px;
  background: linear-gradient(180deg, rgba(216,113,28,0.08), transparent 45%);
}
.hero .grid {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px;
}
.hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; margin: 0 0 8px; }
.hero p { color: var(--muted); margin: 0 0 18px; }
.hero .accent { color: var(--accent); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-alt));
  border: 1px solid var(--card-border); border-radius: 14px; padding: 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.card h3 { margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.status { list-style: none; padding: 0; margin: 0 0 12px; color: var(--muted); }
.status .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; }
.status .live { background: var(--teal); }
.status .warn { background: var(--accent); }

.section { padding: 56px 0; }
.section.alt { background: rgba(255,255,255,0.02); }
.section h2 { font-size: 28px; margin: 0 0 8px; }
.section p { color: var(--muted); max-width: 72ch; }

.features { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 18px; }
.feature { background: #121314; border: 1px solid var(--card-border); border-radius: 12px; padding: 16px; }

.site-footer {
  border-top: 1px solid var(--card-border);
  background: var(--panel); padding: 20px 0; color: var(--muted);
}

@media (max-width: 880px) {
  .hero .grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
}

/* --- SLINS helpers --- */
.center    { text-align: center; }
.centered  { display:block; margin-left:auto; margin-right:auto; }
.stack     { display:flex; flex-direction:column; align-items:center; gap:12px; }

.img-md    { max-width: 620px; width:100%; height:auto; border-radius:12px; }
.img-lg    { max-width:1000px; width:100%; height:auto; border-radius:12px; }

/* --- layout tweaks for Join section --- */
.img-sm { max-width: 480px; width: 100%; height: auto; border-radius: 12px; }
.hero-actions.center { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-actions.center .btn { min-width: 220px; }

/* --- layout tweaks for Join section --- */
.img-sm { max-width: 480px; width: 100%; height: auto; border-radius: 12px; }
.hero-actions.center { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-actions.center .btn { min-width: 220px; }

/* --- overrides for Join section --- */
.img-sm { max-width: 420px; }                 /* smaller Join image */
#join .hero-actions { margin-top: 12px; }     /* little breathing room */
#join .hero-actions.center .btn {
  min-width: 200px;                           /* slightly slimmer buttons */
  padding: 10px 16px;                         /* not chunky */
  font-size: 15px;
}

/* smaller about image */
.img-about { max-width: 480px; width:100%; height:auto; border-radius:12px; }

/* ===== SLINS :: AllianceAuth-inspired theme ===== */

/* Palette (auth-style): charcoal panels + orange accent */
:root{
  --bg:#0f1114;
  --panel:#1b1e23;
  --panel-alt:#20242a;
  --text:#e9e9ea;
  --muted:#b6bcc6;
  --accent:#ff8a1d;
  --accent-hover:#ff9f3b;
  --teal:#06bb8d;
  --card-border:#2a2f36;
}

/* background + type */
body{
  background: radial-gradient(1100px 700px at 70% -10%, rgba(255,255,255,.04), transparent 55%) var(--bg);
  color:var(--text);
}

/* header/nav like AA (dark bar, soft glow) */
.site-header{
  background:linear-gradient(180deg,#22262c,#1b1e23);
  border-bottom:1px solid var(--card-border);
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
.nav a{
  color:var(--muted);
  padding:8px 10px;
  border-radius:10px;
}
.nav a:hover{ color:var(--text); background:rgba(255,255,255,.04); }

/* cards/panels */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-alt));
  border:1px solid var(--card-border);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* headings with accent underline */
section h2{ position:relative; }
section h2::after{
  content:""; display:block; width:64px; height:3px; margin-top:8px;
  background:var(--accent); border-radius:2px;
}

/* links */
a{ color:#ffb468; }
a:hover{ color:#ffd29b; }

/* buttons – AA-like orange pills */
.btn{ border-radius:999px; border:1px solid transparent; padding:10px 16px; }
.btn.primary{
  color:#111;
  background:linear-gradient(180deg,var(--accent),var(--accent-hover));
  border-color:#e97d15;
  box-shadow:0 2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn.primary:hover{ filter:brightness(1.05); }
.btn.ghost{ color:var(--accent); background:transparent; border-color:rgba(255,138,29,.55); }
.btn.ghost:hover{ background:rgba(255,138,29,.12); color:#ffd9b0; }

/* keep “block” buttons from turning into giant bars unless needed */
.btn.block{ display:inline-flex; width:auto; align-self:center; }

/* helper classes you’re using */
.center{ text-align:center; }
.centered{ display:block; margin-left:auto; margin-right:auto; }
.stack{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.img-sm{ max-width:420px; width:100%; height:auto; border-radius:12px; }
.img-about{ max-width:720px; width:100%; height:auto; border-radius:12px; }
.img-lg{ max-width:1000px; width:100%; height:auto; border-radius:12px; }

/* subtle badge/pill (AA vibe) */
.badge,.pill{
  background:rgba(255,138,29,.16);
  color:#ffd29b;
  border:1px solid rgba(255,138,29,.28);
  border-radius:999px;
  padding:2px 10px;
  font-size:12px;
}

/* ===== SLINS layout polish ===== */

/* spacing scale */
:root { --space-1:6px; --space-2:10px; --space-3:16px; --space-4:24px; --space-5:36px; --radius:16px; }
section { padding: var(--space-5) 0; }

/* container width */
.wrap { width: min(1120px, 92vw); margin: 0 auto; }

/* headings */
h1,h2,h3 { letter-spacing:.2px }
h1 { font-size: clamp(28px, 3.2vw, 36px); margin: 0 0 var(--space-3); }
h2 { font-size: clamp(22px, 2.5vw, 28px); margin: 0 0 var(--space-3); }
h3 { font-size: clamp(18px, 2.0vw, 20px); }

/* grid utilities */
.grid { display:grid; gap: var(--space-3); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

/* cards */
.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-alt));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.card h3 { margin-top: 0; }

/* CTA banner */
.cta {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: linear-gradient(180deg, var(--panel), var(--panel-alt));
}
.cta .inner { position: relative; z-index: 2; padding: var(--space-5); text-align:center; }
.cta img.bg {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.18; filter:grayscale(10%) contrast(110%);
}

/* subtle text */
.muted { color: var(--muted); }

/* tidy hero/Join */
#join .hero-actions.center { display:flex; flex-direction:column; align-items:center; gap:12px; }
.img-sm { max-width:420px; width:100%; height:auto; border-radius:12px; }
.img-about { max-width:720px; width:100%; height:auto; border-radius:12px; }
.centered { display:block; margin-left:auto; margin-right:auto; }
/* ===== Top Navigation ===== */
.site-header{position:sticky;top:0;z-index:100;background:linear-gradient(180deg,var(--panel),var(--panel-alt));border-bottom:1px solid var(--card-border)}
.topnav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:28px;height:28px}
.brand-name{font-weight:700;letter-spacing:.2px}
.nav-links{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.nav-links a{text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:10px}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-cta .btn{padding:8px 12px}
@media (max-width:860px){.topnav{flex-direction:column;align-items:stretch}.nav-links,.nav-cta{justify-content:center}}

/* Home tweaks */
.pill{display:inline-block;padding:6px 10px;border:1px solid var(--card-border);border-radius:9999px;background:rgba(255,255,255,.04)}
.img-icon{width:28px;height:28px;vertical-align:middle;margin-right:6px}

/* ===== Global polish (overrides) ===== */
:root {
  --maxw: 1280px;       /* ensure consistent wrap width */
  --gap: 16px;
}
.wrap { width: min(var(--maxw), 92vw); margin: 0 auto; }

/* Headings & text rhythm */
h1 { font-size: clamp(28px, 3.2vw, 36px); line-height: 1.2; margin: 0 0 8px; }
h2 { font-size: clamp(22px, 2.3vw, 26px); line-height: 1.25; margin: 0 0 6px; }
h3 { font-size: clamp(18px, 1.8vw, 20px); line-height: 1.3; margin: 0 0 4px; }
p, ul, ol { margin: 6px 0; }

/* Sections */
.section { padding: 28px 0; }
@media (max-width: 860px) {
  .section { padding: 22px 0; }
}

/* Grids */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1020px) { .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px)  { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Cards */
.card { background: linear-gradient(180deg, var(--panel), var(--panel-alt)); border: 1px solid var(--card-border); border-radius: 14px; padding: 16px; }
.card.center{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;         /* centers children horizontally */
}
.card.center p,
.card.center .muted{
  margin-left: auto;
  margin-right: auto;          /* centers the paragraph block */
  max-width: 60ch;             /* keep a nice reading width */
  text-align: center;          /* ensure text is centered too */
}
/* Hero */
.hero .hero-actions { margin-top: 10px; }
.hero .btn { margin: 2px 6px; }

/* Buttons */
.btn { display:inline-block; padding: 9px 14px; border-radius: 12px; text-decoration:none; border:1px solid var(--card-border); }
.btn.primary { background: var(--accent); color: #000; border-color: transparent; }
.btn.primary:hover { filter: brightness(1.05); }
.btn.ghost { background: transparent; color: var(--text); }
.btn.ghost:hover { background: rgba(255,255,255,.06); }

/* Images */
.img-sm { max-width: 320px; height: auto; border-radius: 10px; }
.img-about { max-width: 520px; height: auto; border-radius: 12px; }
.centered { display:block; margin-left:auto; margin-right:auto; }

/* Lists in Join/How-To blocks */
ol.muted, ul.muted { padding-left: 1.2rem; }

/* Footer space under last section */
main > .section:last-of-type { padding-bottom: 40px; }

/* === Auth-inspired palette overrides (safe) === */
:root {
  /* keep darks; warm up the accent to match Auth tone */
  --accent: #f28c2b;
  --accent-hover: #ff9a3a;
  --link: #06bb8d;
}

/* Active nav state */
.nav-links a.active { 
  color: var(--text);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--card-border);
}

/* Footer */
.site-footer {
  margin-top: 24px;
  background: linear-gradient(180deg, var(--panel), var(--panel-alt));
  border-top: 1px solid var(--card-border);
}
.foot-grid {
  display: grid; gap: 16px; padding: 18px 0;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.foot-col h4 { margin: 0 0 8px; font-size: 16px; }
.foot-col p, .foot-col a { color: var(--muted); margin: 4px 0; text-decoration:none; }
.foot-col a:hover { color: var(--text); }
.foot-actions .btn { margin-right: 8px; }
.foot-bottom {
  border-top: 1px solid var(--card-border);
  padding: 12px 0; font-size: 13px; color: var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
@media (max-width: 860px){ .foot-grid { grid-template-columns: 1fr; } }

/* === Auth-aligned palette (subtle, high-contrast) === */
:root{
  --bg:#0b0c0e;           /* slightly deeper background */
  --panel:#191c1f;        /* cards/nav */
  --panel-alt:#121416;    /* panel gradient base */
  --text:#e6e8ea;         /* main text */
  --muted:#b4bcc4;        /* secondary text */
  --card-border:#2a2e33;  /* card borders */
  --accent:#e07a1a;       /* primary accent (matches Auth warmer orange) */
  --accent-hover:#ff9436; /* hover accent */
  --link:#14c8a8;         /* link/teal accent (Auth green-teal vibe) */
  --focus:#46d1b8;        /* focus ring */
}

/* Links subtly tinted toward Auth teal */
a { color: var(--link); }
a:hover { filter: brightness(1.05); }

/* Buttons — improved focus & hover */
.btn:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn.primary { background: var(--accent); color:#000; border-color: transparent; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--text); }
.btn.ghost:hover { background: rgba(255,255,255,.06); }

/* Apply button: uses teal for instant visual separation from 'Authenticate' */
.btn.apply { background: var(--link); color:#000; border-color: transparent; }
.btn.apply:hover { filter: brightness(1.07); }

/* Active nav state a bit bolder */
.nav-links a.active{
  color: var(--text);
  background: rgba(255,255,255,.10);
  border: 1px solid var(--card-border);
}

/* Slightly stronger card contrast */
.card{
  background: linear-gradient(180deg, var(--panel), var(--panel-alt));
  border: 1px solid var(--card-border);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 6px 18px rgba(0,0,0,.35);
}
.nav-links a.active{ position:relative; }
.nav-links a.active::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-6px; height:2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Skip to content */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;z-index:9999;
  background:var(--link);color:#000;padding:8px 12px;border-radius:10px;outline:2px solid var(--focus)}

/* Top nav pills + active state in Auth accent */
.topnav .nav-links a{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background .15s ease, transform .08s ease;
}
.topnav .nav-links a:hover{ background: rgba(255,255,255,.06); }

/* Active page = same color as primary buttons */
.topnav .nav-links a.active{
  background: var(--accent);   /* uses your Auth orange */
  color: #000;
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.25);
}
.topnav .nav-links a.active:hover{ filter: brightness(1.05); }