:root{
  /* Logo palette (approx) */
  --bg0:#060712;
  --bg1:#070a18;
  --panel: rgba(12, 15, 28, .62);
  --panel2: rgba(10, 14, 26, .42);
  --line: rgba(140, 170, 255, .16);

  --cyan:#23e7ff;
  --cyan2:#00c7ff;
  --mag:#ff2bd6;
  --mag2:#ff4aa6;
  --vio:#6b2bff;

  --text:#e9f2ff;
  --muted: rgba(233, 242, 255, .72);

  --r16:16px;
  --r18:18px;
  --r22:22px;
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --shadow2: 0 14px 34px rgba(0,0,0,.45);

  --glowC: 0 0 18px rgba(35,231,255,.45);
  --glowM: 0 0 18px rgba(255,43,214,.35);
}

/* Base */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.55;

  background:
    radial-gradient(1100px 520px at 20% 0%, rgba(35,231,255,.18), transparent 55%),
    radial-gradient(900px 520px at 85% 5%, rgba(255,43,214,.16), transparent 55%),
    radial-gradient(700px 420px at 55% 100%, rgba(107,43,255,.14), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{ color: inherit; text-decoration:none; }
.container{ width:min(1120px, 92vw); margin:0 auto; }

/* Neon grain / scanlines (very subtle) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      transparent 2px,
      transparent 6px
    );
  opacity:.12;
  mix-blend-mode: overlay;
}
body::after{
  content:"";
  position:fixed;
  inset:-200px;
  pointer-events:none;
  background: radial-gradient(circle at 25% 15%, rgba(35,231,255,.10), transparent 55%),
              radial-gradient(circle at 80% 20%, rgba(255,43,214,.10), transparent 55%);
  filter: blur(10px);
  opacity:.8;
}

.brand__logo-img {
  width: 46px;
  height: 46px;
  object-fit: contain;

  padding: 6px;
  border-radius: 14px;

  background: rgba(12, 15, 28, 0.55);
  border: 1px solid rgba(255,255,255,0.15);

  box-shadow:
    0 0 18px rgba(35,231,255,0.45),
    0 0 28px rgba(255,43,214,0.35);
}


/* Topbar */
.topbar{
  position:sticky; top:0; z-index:60;
  background: rgba(6,7,18,.60);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}
.status{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.dot{
  width:10px; height:10px; border-radius:999px;
  background:#5b6a92;
  box-shadow: 0 0 0 6px rgba(91,106,146,.14);
}
.dot--ok{
  background: linear-gradient(180deg, var(--cyan), var(--cyan2));
  box-shadow: 0 0 0 6px rgba(35,231,255,.14), var(--glowC);
}
.status__label{
  letter-spacing:.14em;
  font-weight:800;
  color: rgba(233,242,255,.86);
}
.topbar__actions{ display:flex; gap:10px; }

/* Navbar */
.nav{
  position:sticky; top:44px; z-index:55;
  background: rgba(6,7,18,.52);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}

/* Brand: make it neon capsule */
.brand{ display:flex; align-items:center; gap:12px; }
.brand__logo{
  width:44px; height:44px;
  border-radius: 16px;
  display:grid; place-items:center;
  font-weight:900;
  letter-spacing:.06em;

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, rgba(35,231,255,.85), rgba(255,43,214,.75));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow2), var(--glowC), var(--glowM);
}
.brand__name{ font-weight:900; }
.brand__tag{
  font-size:12px;
  color: var(--muted);
  margin-top:2px;
}

/* Links */
.nav__links{ display:flex; gap:18px; font-size:14px; color: rgba(233,242,255,.82); }
.nav__links a{
  padding:8px 10px;
  border-radius: 12px;
  opacity:.9;
}
.nav__links a:hover{
  opacity:1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(35,231,255,.10) inset;
}

.nav__burger{
  display:none;
  width:46px; height:40px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(12,15,28,.35);
  border-radius:14px;
  cursor:pointer;
}
.nav__burger span{
  display:block; height:2px; width:18px;
  margin:5px auto;
  border-radius:999px;
  background: rgba(233,242,255,.92);
}
.nav__mobile{
  border-top:1px solid var(--line);
  padding:12px 0 16px;
  background: rgba(6,7,18,.45);
}
.nav__mobile a{ display:block; padding:10px 0; color: rgba(233,242,255,.84); }
.nav__mobileActions{ display:flex; gap:10px; padding-top:8px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(12,15,28,.38);
  color: rgba(233,242,255,.92);
  font-weight:800;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(35,231,255,.22);
  box-shadow: var(--glowC);
}

.btn--primary{
  border-color: rgba(35,231,255,.35);
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.22), transparent 50%),
    linear-gradient(135deg, rgba(35,231,255,.90), rgba(255,43,214,.70));
  box-shadow: var(--shadow2), var(--glowC), var(--glowM);
}
.btn--ghost{
  background: rgba(12,15,28,.22);
}
.btn--sm{ padding:10px 12px; border-radius: 12px; font-size:13px; }

/* Hero */
.hero{ padding:64px 0 18px; }
.hero__inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  align-items:start;
}
.pill{
  display:inline-flex; align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(12,15,28,.22);
  color: rgba(233,242,255,.86);
  font-weight:900;
  letter-spacing:.05em;
  box-shadow: 0 0 0 1px rgba(255,43,214,.10) inset;
}
h1{
  font-size: clamp(30px, 3.2vw, 46px);
  margin:14px 0 12px;
  line-height:1.06;
  text-shadow: 0 0 14px rgba(35,231,255,.10);
}
.accent{ color: #c8f6ff; text-shadow: var(--glowC); }
.lead{
  color: var(--muted);
  font-size:16px;
  margin:0 0 18px;
}
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero__meta{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }

/* Meta cards */
.metaCard{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(12,15,28,.26);
  border-radius: 16px;
  padding:12px 14px;
  min-width:140px;
  box-shadow: 0 0 0 1px rgba(35,231,255,.08) inset;
}
.metaCard__value{
  font-weight:900; font-size:18px;
  background: linear-gradient(90deg, rgba(35,231,255,.95), rgba(255,43,214,.85));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.metaCard__label{ color: var(--muted); font-size:12px; margin-top:2px; }

/* Glass card */
.glassCard{
  position:relative;
  border:1px solid rgba(255,255,255,.14);
  background: var(--panel);
  border-radius: var(--r22);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,43,214,.10) inset;
  padding:18px;
  overflow:hidden;
}
.glassCard::before{
  content:"";
  position:absolute; inset:-160px -160px auto auto;
  width:320px; height:320px;
  background: radial-gradient(circle at 30% 30%, rgba(35,231,255,.22), transparent 60%);
  opacity:.9;
  filter: blur(2px);
}
.glassCard::after{
  content:"";
  position:absolute; inset:auto -160px -160px auto;
  width:360px; height:360px;
  background: radial-gradient(circle at 30% 30%, rgba(255,43,214,.18), transparent 60%);
  opacity:.9;
  filter: blur(2px);
}
.glassCard__title{ font-weight:900; margin-bottom:10px; }
.glassCard__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
  border-bottom:1px dashed rgba(140,170,255,.18);
  color: rgba(233,242,255,.84);
}
.glassCard__row strong{ color: rgba(233,242,255,.95); }
.glassCard__divider{ height:1px; background: rgba(140,170,255,.18); margin:10px 0; }
.glassCard__hint{ color: var(--muted); font-size:13px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Soft grid blocks */
.softGrid{ margin-top:14px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; opacity:.6; }
.softGrid > div{
  height:64px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(12,15,28,.18);
  box-shadow: 0 0 0 1px rgba(35,231,255,.06) inset;
}

/* Sections */
.section{ padding:60px 0; }
.section--alt{
  background: rgba(12,15,28,.30);
  border-top:1px solid rgba(140,170,255,.14);
  border-bottom:1px solid rgba(140,170,255,.14);
}
.section--tight{ padding:14px 0 34px; }

.sectionHead h2{
  margin:0 0 10px;
  font-size:30px;
  background: linear-gradient(90deg, rgba(35,231,255,.95), rgba(255,43,214,.75));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.sectionHead p{ margin:0; color: var(--muted); line-height:1.6; }
.sectionFoot{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

/* Stats */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.stat{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(12,15,28,.22);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 0 0 1px rgba(255,43,214,.06) inset;
}
.stat__num{
  font-weight:900; font-size:22px;
  background: linear-gradient(90deg, rgba(35,231,255,.95), rgba(255,43,214,.85));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.stat__label{ color: var(--muted); font-size:12px; margin-top:4px; }

/* Feature cards */
.cards{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.card{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(12,15,28,.22);
  border-radius:16px;
  padding:16px;
  box-shadow: 0 0 0 1px rgba(35,231,255,.06) inset;
}
.card h3{ margin:0 0 10px; }
.card p{ margin:0; color: var(--muted); line-height:1.6; font-size:14px; }

/* Factions */
.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.faction{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(12,15,28,.22);
  border-radius:16px;
  padding:16px;
  box-shadow: 0 0 0 1px rgba(255,43,214,.06) inset;
}
.faction__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.faction p{ color: var(--muted); line-height:1.6; font-size:14px; margin:10px 0 0; }
.faction__foot{ margin-top:12px; }

.tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(12,15,28,.18);
  color: rgba(233,242,255,.84);
  font-size:12px;
  box-shadow: 0 0 0 1px rgba(35,231,255,.06) inset;
}

.badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.14);
  color: rgba(233,242,255,.88);
  background: rgba(12,15,28,.18);
}
.badge--law{ box-shadow: 0 0 0 1px rgba(35,231,255,.12) inset; }
.badge--med{ box-shadow: 0 0 0 1px rgba(34,197,94,.12) inset; }
.badge--gov{ box-shadow: 0 0 0 1px rgba(255,170,0,.12) inset; }
.badge--biz{ box-shadow: 0 0 0 1px rgba(148,163,184,.10) inset; }
.badge--ill{ box-shadow: 0 0 0 1px rgba(255,43,214,.12) inset; }
.badge--custom{ box-shadow: 0 0 0 1px rgba(107,43,255,.12) inset; }
.badge--progress{ box-shadow: 0 0 0 1px rgba(34,197,94,.12) inset; }
.badge--todo{ opacity:.92; }

/* FAQ */
.faq{ margin-top:18px; display:grid; gap:12px; }
.faq__item{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(12,15,28,.22);
  border-radius:16px;
  padding:14px 16px;
  box-shadow: 0 0 0 1px rgba(35,231,255,.05) inset;
}
.faq__item summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__body{ margin-top:10px; color: var(--muted); line-height:1.65; font-size:14px; }
.faq__body ul, .faq__body ol{ margin:8px 0 0 18px; }

/* Team */
.team{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.member{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(12,15,28,.22);
  border-radius:16px;
  padding:16px;
  box-shadow: 0 0 0 1px rgba(255,43,214,.05) inset;
}
.avatar{
  width:44px; height:44px;
  border-radius:16px;
  display:grid; place-items:center;
  font-weight:900;
  margin-bottom:10px;
  background: linear-gradient(135deg, rgba(35,231,255,.25), rgba(255,43,214,.20));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--glowC);
}
.member__name{ font-weight:900; }
.member__role{ color: rgba(233,242,255,.84); font-size:13px; margin-top:4px; }
.member__desc{ color: var(--muted); font-size:13px; line-height:1.6; margin-top:10px; }
.member--cta{ grid-column: span 2; display:flex; flex-direction:column; justify-content:center; }
.member--cta h3{ margin:0 0 8px; }
.member--cta p{ margin:0 0 12px; color: var(--muted); }

/* Timeline */
.timeline{ margin-top:18px; display:grid; gap:12px; }
.milestone{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(12,15,28,.22);
  border-radius:16px;
  padding:16px;
  display:grid;
  grid-template-columns: 170px 1fr auto;
  gap:12px;
  align-items:center;
  box-shadow: 0 0 0 1px rgba(35,231,255,.05) inset;
}
.milestone__date{ color: rgba(233,242,255,.86); font-weight:900; }
.milestone__title{ font-weight:900; }
.milestone__desc{ color: var(--muted); font-size:14px; line-height:1.6; }

/* Gallery */
.gallery{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.shot{
  height:160px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 20% 20%, rgba(35,231,255,.18), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(255,43,214,.16), transparent 55%),
    rgba(12,15,28,.18);
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.shot::after{
  content:"";
  position:absolute; inset:auto -90px -90px auto;
  width:220px; height:220px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 62%);
  transform: rotate(18deg);
}
.shot__label{
  position:absolute; left:12px; bottom:12px;
  font-weight:900;
  background: rgba(6,7,18,.55);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
}

/* CTA */
.cta{
  padding:56px 0;
  border-top:1px solid rgba(140,170,255,.14);
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(35,231,255,.14), transparent 60%),
    radial-gradient(900px 500px at 60% 100%, rgba(255,43,214,.10), transparent 60%),
    rgba(12,15,28,.18);
}
.cta__inner{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(12,15,28,.22);
  border-radius: 22px;
  padding:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,43,214,.06) inset;
}
.cta__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Footer */
.footer{
  padding:28px 0;
  border-top:1px solid rgba(140,170,255,.14);
  background: rgba(6,7,18,.60);
}
.footer__inner{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px;
}
.footer__brand{ font-weight:900; }
.footer__small{ color: var(--muted); font-size:13px; margin-top:6px; }
.footer__links, .footer__contact{
  display:flex; flex-direction:column; gap:8px; color: rgba(233,242,255,.84);
}
.footer__links a:hover, .footer__contact a:hover{ opacity:.9; }

/* Responsive */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .team{ grid-template-columns:repeat(2,1fr); }
  .member--cta{ grid-column: span 2; }
  .milestone{ grid-template-columns: 1fr; align-items:start; }
}
@media (max-width: 760px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .gallery{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .footer__inner{ flex-direction:column; }
}