:root{
  /* Base surfaces */
  --bg:#0f0f0f; --card:#151515; --edge:#333333; --muted:#99aaaa;

  /* Accents */
  --neon:#00ffe7; --pink:#ff00c8;

  /* Entity chips */
  --chip-char:#8be9fd; --chip-corp:#ffd166; --chip-alli:#ff7eb6; --chip-sys:#a0e377;

  /* Extras (overridden per user by head-theme.php) */
  --link: var(--neon);
  --link-hover:#ffffff;
  --radius:10px;
  --shadow-1:0 0 10px rgba(0,0,0,.35);

  /* Security label palette */
  --sec-high-bg:#002f1a; --sec-high-fg:#00e694;
  --sec-low-bg:#333000;  --sec-low-fg:#f0c020;
  --sec-null-bg:#420000; --sec-null-fg:#ff4c4c;
  --sec-unk-bg:#222222;  --sec-unk-fg:#aaaaaa;
}

/* Base */
*{box-sizing:border-box}
body{ background:var(--bg); color:#ddd; font-family:'Orbitron',sans-serif; overflow-x:hidden; }
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); }

/* Shared components */
.wrap{ max-width:1100px; margin:2rem auto; padding:0 1rem; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.row{ margin-top:1.25rem; }

.card{ background:var(--card); border:1px solid var(--edge); border-radius:var(--radius); box-shadow:var(--shadow-1); }
.tile{ background:var(--card); border:1px solid var(--edge); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow-1); }
.tile h3{ margin:0 0 .6rem; color:var(--pink); font-size:1.1rem; }
.small{ color:var(--muted); font-size:.92rem; }
.btn{ display:inline-block; padding:.55rem .85rem; border:1px solid var(--neon); border-radius:8px; background:transparent; color:#ddd; cursor:pointer; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn-danger{ border-color:#b21f2d; color:#f1c0c4; }

/* Chips */
.chip{ font-size:.72rem; font-weight:700; letter-spacing:.02em; padding:.2rem .45rem; border-radius:999px; color:#000 }
.chip.character{ background:var(--chip-char) }
.chip.corporation{ background:var(--chip-corp) }
.chip.alliance{ background:var(--chip-alli) }
.chip.system{ background:var(--chip-sys) }

/* Sec labels */
.sec-label{ margin-left:6px; padding:2px 6px; border-radius:4px; font-size:.75rem; font-weight:700; display:inline-block; }
.sec-high{ background:var(--sec-high-bg); color:var(--sec-high-fg); }
.sec-low { background:var(--sec-low-bg);  color:var(--sec-low-fg); }
.sec-null{ background:var(--sec-null-bg); color:var(--sec-null-fg); }
.sec-unknown{ background:var(--sec-unk-bg); color:var(--sec-unk-fg); }

/* Pagination */
.pagination{ text-align:center; margin-top:30px; font-size:14px; }
.pagination a,
.pagination .current-page,
.pagination .dots{
  display:inline-block; margin:0 4px; padding:6px 10px; border-radius:4px; background:#111; color:var(--neon);
  text-decoration:none; transition:background .2s;
}
.pagination a:hover{ background:#222; }
.pagination .current-page{ background:var(--neon); color:#000; font-weight:700; }

/* Toasts */
.toast{ position:fixed; right:16px; bottom:16px; background:#0f5132; color:#d1e7dd; border:1px solid #145a39;
  padding:.55rem .8rem; border-radius:8px; opacity:0; transform:translateY(8px); transition:all .25s ease; z-index:9999; }
.toast.show{ opacity:1; transform:translateY(0); }
.toast.error{ background:#5c1a1a; color:#f8d7da; border-color:#842029; }

/* Killmails grid (from killmails.php) */

/* Neon title (moved out of pages) */
.neon-title{ display:block; width:fit-content; margin:2rem auto 1rem; text-align:center; font-size:clamp(1.1rem, 2vw + 0.5rem, 2.2rem); font-weight:800; letter-spacing:.02em; text-transform:uppercase; filter:brightness(.75); }
.neon-title .letter{ position:relative; display:inline-block; color:rgba(255,0,200,.75);
  text-shadow:0 0 .4rem rgba(255,0,200,.6), 0 0 .9rem rgba(255,0,200,.5), 0 0 1.6rem rgba(255,0,200,.35);
  animation:flickerBase 5.5s infinite steps(80); will-change:transform, text-shadow, opacity;
  background:linear-gradient(90deg, transparent 0 5%, rgba(255,255,255,.06) 5% 8%, transparent 8% 11%, rgba(255,255,255,.07) 11% 14%, transparent 14% 20%) no-repeat;
  -webkit-background-clip:text; background-clip:text;
}
.neon-title .letter::before, .neon-title .letter::after{ content:attr(data-ch); position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; }
.neon-title .letter::before{ color:#00e5ff; transform:translate(1px,0); text-shadow:1px 0 0 currentColor, 0 0 .9rem currentColor; animation:ghostR 2s infinite; }
.neon-title .letter::after{ color:#ff0066; transform:translate(-1px,0); text-shadow:-1px 0 0 currentColor, 0 0 .9rem currentColor; animation:ghostL 2.2s infinite; }
.neon-title .letter.bad{ animation:flickerBad 2.4s infinite steps(50); }
.neon-title .letter.bad::before{ animation:ghostRBad .45s infinite steps(6); }
.neon-title .letter.bad::after{ animation:ghostLBad .42s infinite steps(6); }
.neon-title .letter.bad.out{ opacity:.12 !important; filter:brightness(.3) saturate(.6); text-shadow:none !important; }
.neon-title .letter.space{ display:inline-block; width:.5em; }
@keyframes flickerBase{0%,3%,7%,100%{opacity:1;filter:brightness(1)}1%{opacity:.9;filter:brightness(1.15)}5%{opacity:.7;filter:brightness(.9)}}
@keyframes ghostR{0%,100%{transform:translate(1px,0)}40%{transform:translate(2px,-.5px)}60%{transform:translate(0,.3px)}}
@keyframes ghostL{0%,100%{transform:translate(-1px,0)}35%{transform:translate(-2px,.5px)}65%{transform:translate(-.5px,-.3px)}}
@keyframes flickerBad{0%,100%{opacity:1;filter:brightness(1.1)}4%{opacity:.35;filter:brightness(.7)}6%{opacity:1}12%{opacity:.5}18%{opacity:1}26%{opacity:.4}}
@keyframes ghostRBad{0%,100%{transform:translate(3px,0)}50%{transform:translate(0,-1px)}}
@keyframes ghostLBad{0%,100%{transform:translate(-3px,0)}50%{transform:translate(0,1px)}}
@media (prefers-reduced-motion:reduce){ .neon-title .letter, .neon-title .letter::before, .neon-title .letter::after{ animation:none !important; } }
  


/* 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;
    }
footer a {
    color: var(--secondary-neon);
    text-decoration: none;
    transition: color 0.3s ease;
}
    /* 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 ---------------------------------------- */
 

/* --- 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; }
 
/* --- 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; }
}
 
/* --- 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;}