/* Reset & Base Styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Orbitron', sans-serif;
      background: #0f0f0f;
      color: #ddd;
      overflow-x: hidden;
    }
    
    /* Cyberpunk Glow Variables */
    :root {
      --primary-neon: #ff00c8;
      --secondary-neon: #00ffe7;
      --accent-neon: #ffae00;
    }

    /* Glow Effects & Utilities */
    .neon-text {
      text-shadow:
        0 0 5px var(--primary-neon),
        0 0 10px var(--primary-neon),
        0 0 20px var(--primary-neon);
    }
    .glow-btn {
      display: inline-block;
      background: transparent;
      border: 2px solid var(--secondary-neon);
      color: var(--secondary-neon);
      padding: 0.75rem 1.5rem;
      text-transform: uppercase;
      font-weight: 700;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: 0.3s ease;
      text-decoration: none; /* remove underline */
    }
    .glow-btn::before {
      content: '';
      position: absolute;
      top: 0; 
      left: 0;
      width: 0; 
      height: 100%;
      background: var(--secondary-neon);
      transition: 0.3s ease;
      z-index: -1;
    }
    .glow-btn:hover {
      color: #fff;
    }
    .glow-btn:hover::before {
      width: 100%;
    }

    /* Sticky Navigation */
    nav {
      position: -webkit-sticky; /* for Safari */
      position: sticky;
      top: 0;
      z-index: 999;
      
      background-color: #0f0f0f;
      border-bottom: 1px solid #333;
      padding: 1rem 2rem;

      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    nav ul {
      list-style: none;
      display: flex;
      gap: 1.5rem;
    }
    nav ul li a {
      color: var(--secondary-neon);
      text-decoration: none;
      font-weight: bold;
      border-bottom: 2px solid transparent;
      transition: 0.3s;
    }
    nav ul li a:hover {
      border-bottom: 2px solid var(--secondary-neon);
    }

    /* Hero Section */
    header {
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(
        rgba(15, 15, 15, 0.7),
        rgba(15, 15, 15, 0.7)
      ),
      url('./images/KillSyncHeadshot.png');
      background-size: cover;
      background-position: center;
      text-align: center;
      position: relative;
      padding: 0 1rem; 
    }
    header .overlay {
      position: absolute;
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
      z-index: 1;
      pointer-events: none;
    }
    header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      z-index: 2;
    }
    header p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
      z-index: 2;
      color: #ccc;
    }

    /* Main Content Section */
    section {
      padding: 4rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    section h2 {
      font-size: 2rem;
      margin-bottom: 2rem;
      text-align: center;
      position: relative;
    }
    section h2::after {
      content: '';
      display: block;
      margin: 0.5rem auto 0 auto;
      width: 60px;
      height: 3px;
      background: var(--primary-neon);
    }

    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
    }
    .feature-box {
      background: #1a1a1a;
      border: 1px solid #333;
      padding: 1.5rem;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .feature-box:hover {
      transform: translateY(-3px);
      box-shadow: 0 0 15px var(--primary-neon);
    }
    .feature-box h3 {
      font-size: 1.4rem;
      margin-bottom: 1rem;
      color: var(--primary-neon);
    }
    .feature-box p {
      line-height: 1.4;
      color: #bbb;
    }

    /* Commands Section */
    .commands-list {
      margin-top: 2rem;
      border: 1px solid #333;
      border-radius: 8px;
      overflow: hidden;
    }
    .commands-list table {
      width: 100%;
      border-collapse: collapse;
    }
    .commands-list th, 
    .commands-list td {
      text-align: left;
      padding: 1rem;
      border-bottom: 1px solid #333;
    }
    .commands-list th {
      background: #191919;
      color: var(--accent-neon);
    }
    .commands-list tr:hover {
      background: #2a2a2a;
    }

    /* CTA (Footer) Section */
    .cta-section {
      background: #121212;
      text-align: center;
      padding: 3rem 2rem;
      position: relative;
    }
    .cta-section h2 {
      margin-bottom: 1rem;
    }
    .cta-section p {
      margin-bottom: 2rem;
      color: #aaa;
    }

    /* Footer */
    footer {
      background: #0a0a0a;
      text-align: center;
      padding: 1rem;
      font-size: 0.85rem;
      color: #666;
    }

    /* Media Queries (Basic) */
    @media (max-width: 768px) {
      header h1 {
        font-size: 2rem;
      }
      .features {
        grid-template-columns: 1fr;
      }
      /* For a stacked mobile nav, uncomment:
      nav ul {
        flex-direction: column;
        align-items: flex-end; 
      } */
    }
/* --- drop-down container ---------------------------------------- */
.has-sub{ position:relative; }

/* hidden by default */
.sub-nav{
    display:none;
    position:absolute;
    right:0;
    background:#111;
    border:1px solid var(--secondary-neon);
    list-style:none;
    padding:.5rem 0;
    min-width:160px;
    z-index:1000;
}

/* show on hover (desktop) */
.has-sub:hover .sub-nav{ display:block; }

/* links inside drop-down */
.sub-nav a{
    display:block;
    padding:.45rem 1rem;
    color:var(--secondary-neon);
    text-decoration:none;
    white-space:nowrap;
}
.sub-nav a:hover{
    background:#222;
}

/* --- small screen tweak: stack vertically under 600 px ---------- */
@media(max-width:600px){
    .main-nav{
        flex-wrap:wrap;
        gap:.75rem;
    }
}

/* dropdown container should be positioned under the input in your nav */
.nav-search { position: relative; }
.nav-search-results {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #0f0f10; border: 1px solid #2b6b86;
  border-radius: 8px; margin-top: 6px; z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); 
}
.nav-search-list { list-style: none; margin: 0; padding: .35rem 0; }
.nav-search-item { padding: .35rem .6rem; }
.nav-search-item.active, .nav-search-item:hover { background: #171a1d; }
.nav-search-link { display: flex; gap: .5rem; align-items: center; color: #ddd; text-decoration: none; }
.nav-badge { font-size: .7rem; text-transform: lowercase; border: 1px solid #244; border-radius: 999px; padding: 2px 6px; }
.nav-badge.nav-character   { color: #00ffe7; border-color: #0aa; }
.nav-badge.nav-corporation { color: #ffae00; border-color: #7a5600; }
.nav-badge.nav-alliance    { color: #ff00c8; border-color: #7a0063; }
.nav-badge.nav-system      { color: #9ad16a; border-color: #365d24; }
.nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-search-more {
  display: block; padding: .5rem .6rem; border-top: 1px solid #233a48;
  color: #00ffe7; text-decoration: none;
}
.nav-search-more:hover { background: #14181b; }

.cardwrap{
  display:flex;
  justify-content:center;   /* center left/right */
  align-items:flex-start;   /* change to center for vertical centering */
  padding: 1rem 1rem;
  clear: both;              /* in case header uses floats */
}

/* card already has a width; auto margins finish the centering */
.card{
  margin: 0 auto;           /* centers horizontally */
}

 
@media (min-height: 700px){
  .cardwrap{
    min-height: calc(100vh - 240px); /* header+footer approx */
    align-items: center;              /* vertical center */
  }
}h1 { margin:0 0 6px; font-size:1.6rem; color:#fff; }
p  { margin:.4rem 0 1rem; color:var(--muted); }
.actions { margin-top:16px; display:flex; gap:12px; align-items:center; }
.btn {
  appearance:none; display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:6px; border:1px solid #2a2a2a; background:#111; color:#fff;
  text-decoration:none; font-weight:600; font-size:1rem; cursor:pointer;
  box-shadow:0 0 0 0 rgba(0,0,0,0);
}
.btn:hover { border-color:#333; }
.btn.neon { border-color:var(--neon); box-shadow:0 0 12px #00ffe733 inset; }
.btn svg { margin-right:.5rem; }
.hint { font-size:.85rem; color:#8c8c8c; margin-top:10px; }
.small { font-size:.8rem; color:#7a7a7a; margin-top:6px; }
.brand { color:var(--pink); text-shadow:0 0 8px var(--pink); font-weight:700; }
</style>
<?php if ($auto): ?>
<script>
  // gentle auto-redirect after a moment; user still sees the page
  setTimeout(function(){ location.href = <?= json_encode($authUrl, JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT) ?>; }, 900);
</script>
<?php endif; ?>
<style>
/* --- KillSync FAQ styling (scoped by #faq) --- */
/* Fallbacks in case theme vars aren't present */
:root{
  --bg-0:#0b0e12; --card-0:#11161f; --card-1:#0e141c;
  --text-0:#e6f2ff; --muted-0:#8aa0b2;
  --pink-0:#ff2ba6; --cyan-0:#11f1ff; --neon-0:#11f1ff;
  --border-0:#1a2433; --radius-0:12px;
}

/* Card container */
#faq{
  width: 100%;
  max-width: 980px;
  padding: 26px 28px 34px;
  background: linear-gradient(180deg,var(--card-0),var(--card-1));
  border: 1px solid var(--border-0);
  border-radius: var(--radius-0);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
  color: var(--text-0);
}

/* Headline */
#faq h1{
  margin: 0 0 14px;
  font-size: 1.9rem;
  line-height: 1.25;
  letter-spacing:.2px;
}
#faq h1 .brand{
  color: var(--pink-0);
  text-shadow: 0 0 10px rgba(255,43,166,.45);
}

/* TL;DR list */
#faq > p strong{ display:block; margin:6px 0 8px; font-size:1.05rem; }
#faq > ul{
  margin: 0 0 22px 0; padding-left: 18px;
}
#faq > ul li{ margin: 6px 0; color: var(--muted-0); }

/* Section blocks */
#faq section{
  margin: 18px 0 20px;
  padding: 16px 16px 18px;
  border: 1px solid var(--border-0);
  border-radius: 10px;
  background: rgba(7,10,15,.55);
}

/* Section headings with neon accent line */
#faq section > h2{
  position: relative;
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing:.2px;
}
#faq section > h2::after{
  content:'';
  display:block;
  height:2px;
  margin-top:8px;
  background: linear-gradient(90deg, var(--pink-0), var(--cyan-0) 60%, transparent 100%);
  box-shadow: 0 0 10px rgba(17,241,255,.6);
}

/* Body text + lists */
#faq p{ margin: 8px 0 12px; color: var(--muted-0); }
#faq ul, #faq ol{ margin: 8px 0 8px 18px; }
#faq li{ margin: 6px 0; }
#faq a{ color: var(--cyan-0); text-decoration: none; }
#faq a:hover{ text-decoration: underline; }

/* Small callouts (strong + code pairs look tidy) */
#faq strong{ color: #dbeaff; }
#faq code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95em; padding: 1px 6px; border-radius: 6px;
  background: #0a0f16; border:1px solid #122030; color:#bfe7ff;
}

/* Ordered-list spacing in “flows/setup” sections */
#faq ol{ padding-left: 20px; }
#faq ol li{ margin: 8px 0; }

/* Responsive */
@media (max-width: 720px){
  #faq{ padding: 20px 16px 24px; border-radius: 10px; }
  #faq h1{ font-size: 1.55rem; }
  #faq section{ padding: 14px; }
}
</style>

<style>
/* --- Additions for Filters FAQ: tables + code blocks --- */
#faq table{
  width:100%;
  border-collapse: collapse;
  margin: 8px 0 14px;
  background: rgba(8,12,18,.55);
  border:1px solid var(--border-0);
  border-radius: 8px;
  overflow: hidden;
}
#faq thead th{
  text-align:left;
  font-weight:700;
  padding:10px 12px;
  background: rgba(20,28,38,.7);
  border-bottom:1px solid var(--border-0);
}
#faq tbody td{
  padding:10px 12px;
  border-bottom:1px solid rgba(26,36,51,.7);
  color: var(--muted-0);
}
#faq tbody tr:last-child td{ border-bottom:0; }

#faq pre{
  margin:10px 0 12px;
  padding:12px 14px;
  background:#0a0f16;
  border:1px solid #122030;
  border-radius:8px;
  overflow:auto;
  font-size:.95em;
  line-height:1.35;
  color:#cfe9ff;
}
#faq .callout{
  border:1px solid var(--border-0);
  background: rgba(14,18,26,.6);
  padding:10px 12px;
  border-radius:8px;
  margin:8px 0 12px;
}
#faq .muted{ color: var(--muted-0); }
#faq .note{ font-style: italic; color: var(--muted-0); }
#faq .pill{
  display:inline-block; padding:2px 8px; border-radius:999px;
  border:1px solid var(--border-0); background:rgba(7,10,15,.55);
  font-size:.88em; margin-right:6px;
}
    .cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:12px 0 4px;}
    .cta{padding:12px 16px; border:1px solid #2a2f3a; border-radius:10px; text-decoration:none; color:#e7f4ff;}
    .cta.primary{border-color:#11f1ff; box-shadow:0 0 12px rgba(17,241,255,.25) inset;}
 
    .tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; padding:18px;}
    .tile{border:1px solid #1a2433; border-radius:12px; padding:16px; background:linear-gradient(180deg,#11161f,#0e141c);}
    .tile h3{margin:0 0 8px;}
    .tile p{color:#9fb2c3; min-height:64px;}
    .tile .links{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap;}
    .ticker-embed{padding:10px 18px 0;}
    .ticker-iframe{width:100%; height:480px; border:1px solid #1a2433; border-radius:10px;}

.hero {
  position: relative;
  padding: 72px 18px 48px;
  text-align: center;
  isolation: isolate; /* lets overlay stack cleanly */
}

.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 10%, transparent 0%, rgba(0,0,0,.45) 70%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.55) 100%);
  z-index: -1;
}

.hero .hero-plate {
  display: inline-block;
  padding: 14px 18px;
  margin: 0 auto 10px;
  border-radius: 12px;
  background: rgba(8, 12, 18, .45);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(4px);
}
@media (max-width: 560px){
  .hero .hero-plate{ padding: 10px 12px; }
}

.hero h1 { margin: 0 0 6px; font-size: 1.8rem; line-height: 1.15; }
.hero p  { margin: 4px 0 6px; font-size: 1.1rem; color: #d6e6ff; opacity: .92; }

.pill, .pillstat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .92rem; line-height: 1;
  border: 1px solid #0f3a48;
  background: linear-gradient(180deg, rgba(10,18,24,.75), rgba(8,14,20,.65));
  color: #c8f6ff;
  box-shadow: 0 0 0 1px rgba(17,241,255,.12) inset, 0 6px 18px rgba(0,0,0,.35);
  backdrop-filter: blur(5px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pill:hover, .pill:focus-visible, .pillstat:hover, .pillstat:focus-visible {
  transform: translateY(-1px);
  border-color: #11f1ff;
  box-shadow: 0 0 0 1px rgba(17,241,255,.28) inset, 0 8px 22px rgba(0,0,0,.45);
  outline: none;
}

 

.cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:14px 0 4px; }
.cta {
  padding: 12px 16px;
  border: 1px solid #2a2f3a;
  border-radius: 12px;
  text-decoration: none;
  color: #e7f4ff;
  background: linear-gradient(180deg, rgba(12,16,22,.7), rgba(10,14,20,.55));
  box-shadow: 0 8px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.cta.primary {
  border-color: #11f1ff;
  box-shadow: 0 10px 24px rgba(0,0,0,.4), inset 0 0 0 1px rgba(17,241,255,.16);
}
.cta:hover, .cta:focus-visible {
  transform: translateY(-1px);
  border-color: #11f1ff;
  box-shadow: 0 12px 30px rgba(0,0,0,.48), inset 0 0 0 1px rgba(17,241,255,.22);
  outline: none;
}
.cta--underline {
  position: relative;
}
.cta--underline::after {
  content:"";
  position:absolute; left:50%; bottom:-2px; width:0; height:2px;
  background: linear-gradient(90deg, #ff2ba6, #11f1ff);
  transition: width .2s ease, left .2s ease;
  box-shadow: 0 0 10px rgba(17,241,255,.45);
}
.cta--underline:hover::after, .cta--underline:focus-visible::after {
  width: 80%; left:10%;
}

.hero .tile, .hero .links .cta { filter: none; }
.faq-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:12px;
}

.faq-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.faq-card h4{ margin:0 0 6px; }
.faq-card p{ margin:4px 0 10px; color:#c9d7e6; flex:1 1 auto; }

.faq-card .cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  min-height:40px;
  padding:10px 16px;
  border-radius:12px;
  font-size:.95rem;
  line-height:1.1;
  border:1px solid #2a2f3a;
  background:linear-gradient(180deg, rgba(12,16,22,.7), rgba(10,14,20,.55));
}

.faq-card .cta:hover, .faq-card .cta:focus-visible{
  transform:translateY(-1px);
  border-color:#11f1ff;
  box-shadow:0 12px 30px rgba(0,0,0,.48), inset 0 0 0 1px rgba(17,241,255,.22);
  outline:none;
}

@media (max-width:480px){
  .faq-cards{ grid-template-columns:1fr; }
}
.pill--ticker{
  position: relative;
  display: inline-flex;        /* keeps text nicely centered */
  align-items: center;
  padding-left: 28px;          /* room for the dot */
}

.pill--ticker .ping{
  position: absolute;
  left: 10px;                  /* tweak to taste */
  top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5f5f;
  box-shadow: 0 0 0 0 rgba(255,95,95,.7);
  transform: translateY(-50%);
  animation: pulse 1.6s ease-out infinite;
}

@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,95,95,.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255,95,95,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,95,95,0); }
}

@media (prefers-reduced-motion: reduce){
  .pill--ticker .ping{ animation: none; }
}

    #faq{max-width:980px;margin:24px auto;}