:root{
  --purple-700:#6D28D9; --purple-600:#7C3AED; --purple-500:#8B5CF6; --purple-400:#A78BFA;
  --bg-950:#06050C; --bg-900:#0B0A13;
  --glass:#ffffff12; --glass-2:#ffffff0a; --border:#ffffff24;
  --text-100:#F3F4F6; --text-300:#E5E7EB; --text-500:#CBD5E1; --text-700:#94A3B8;
  --container: min(1180px, 92vw);
  --nav-h: 72px;
  --radius:20px; --r-sm:14px;
  --shadow-lg:0 20px 60px rgba(0,0,0,.45);
  --h1: clamp(36px, 3.2vw + 16px, 56px);
  --h2: clamp(24px, 1.2vw + 12px, 32px);
  --h3: clamp(18px, .6vw + 10px, 22px);
  --lead: 17px;
  --gap: 20px;
  --section-gap: clamp(48px, 8vw, 72px);
}

*{box-sizing:border-box}
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--text-300);
  background:
    radial-gradient(1200px 800px at 75% -10%, #2a1a5a44, transparent 60%),
    radial-gradient(900px 500px at -10% 20%, #33105a55, transparent 60%),
    linear-gradient(180deg, var(--bg-900), var(--bg-950));
  font:400 16px/1.65 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

h1,h2,h3{font-family:Poppins, Inter; color:var(--text-100); margin:0 0 .6rem; letter-spacing:.2px}
h1{font-size:var(--h1); line-height:1.12}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
p{margin:.25rem 0 1rem; color:var(--text-500); font-size:var(--lead)}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}

.container{ width:var(--container); margin:0 auto; }
.section{ padding:var(--section-gap) 0; scroll-margin-top: calc(var(--nav-h) + 16px) }
.section > .container > h2 { margin-bottom: .25rem; }

.small{ font-size:.95rem; color:var(--text-700); }
.center{ text-align:center; }
.ul-clean{ margin:0; padding-left:18px; color:var(--text-500); line-height:1.6; }

.bg-anim{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.blob{
  position:absolute; width:520px; height:520px; border-radius:50%;
  filter: blur(80px); opacity:.18; mix-blend:screen;
  background: radial-gradient(circle at 30% 30%, #8B5CF6, #4c2a91 60%, transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
.blob.b1{ left:-140px; top:-80px; animation-delay:-2s; }
.blob.b2{ right:-160px; top:40vh; animation-delay:-9s; }
.blob.b3{ left:30vw; bottom:-180px; animation-delay:-15s; }
@keyframes drift{ from{ transform: translate3d(0,0,0) scale(1) rotate(.2deg); } to{ transform: translate3d(20px,-24px,0) scale(1.06) rotate(1deg);} }
@media (prefers-reduced-motion: reduce){ .blob{ animation:none } html{ scroll-behavior:auto } }

header.nav{
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  background:linear-gradient(180deg, rgba(11,10,19,.98), rgba(11,10,19,.92));
  border-bottom:1px solid #ffffff18; backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.nav-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px }
.brand{ display:flex; align-items:center; gap:10px }
.brand img{ width:36px; height:36px; object-fit:contain; border-radius:8px }
.brand strong{ font:700 18px Poppins }

.nav-actions{ display:flex; align-items:center; gap:8px }

nav.primary{ display:flex; align-items:center; gap:8px }
nav.primary > a, .menu > a{
  padding:10px 12px; border-radius:12px; font-weight:600; opacity:.95;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
nav.primary > a:hover, .menu > a:hover, nav.primary a[aria-current="true"]{
  background:var(--glass); opacity:1; box-shadow:0 0 0 2px #a78bfa22 inset; transform: translateY(-1px);
}

.menu{ position:relative; }
.menu:hover .menu-list{ opacity:1; transform:translateY(0); pointer-events:auto; }
.menu-list{
  position:absolute; top:110%; left:0; min-width:220px; padding:8px;
  display:grid; gap:6px; border:1px solid var(--border); border-radius:14px;
  background:linear-gradient(180deg,#0b0a13ee,#0b0a13f2); backdrop-filter: blur(8px);
  box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(6px); pointer-events:none; transition: .18s ease;
}
.menu-list a{ padding:10px 12px; border-radius:10px; }
.menu-list a:hover{ background:var(--glass) }

.hamburger{ display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:var(--glass); cursor:pointer; font-weight:800 }
.hamburger:focus-visible{ outline:2px solid #22D3EE; outline-offset:2px }
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px); opacity:0; pointer-events:none; transition:.2s ease; z-index:90 }
nav.drawer{
  position:fixed; inset:0 0 0 auto; width:min(86vw, 360px); height:100dvh; padding:16px; gap:8px; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0b0a13f2,#0b0a13ee); border-left:1px solid var(--border); transform:translateX(100%);
  transition: transform .25s ease; z-index:99;
}
nav.drawer a{ padding:12px; border-radius:12px; }
body.nav-open .scrim{ opacity:1; pointer-events:auto }
body.nav-open nav.drawer{ transform:translateX(0) }

.btn{
  position:relative; display:inline-flex; align-items:center; gap:8px; padding:12px 16px;
  border-radius:var(--r-sm); border:1px solid var(--border); background:var(--glass);
  font-weight:700; transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden; color:var(--text-300);
}
.btn:hover{ transform: translateY(-1px); border-color:#bda5ff55; box-shadow:0 12px 32px rgba(124,58,237,.25) }
.btn.primary{
  background:linear-gradient(180deg, var(--purple-600), var(--purple-500));
  color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(124,58,237,.35)
}
.btn.ghost{ background:transparent }
.btn:focus-visible{ outline:2px solid #22D3EE; outline-offset:2px }
.btn::after{
  content:""; position:absolute; inset:0 -200% 0 auto; width:45%;
  background:linear-gradient(120deg, transparent 0%, #ffffff44 45%, transparent 60%);
  transform:skewX(-20deg) translateX(-120%); transition: transform .7s ease; pointer-events:none;
}
.btn:hover::after{ transform:skewX(-20deg) translateX(260%); }

.hero{ position:relative; overflow:hidden; padding: 100px 0 64px }
.hero .stars{
  position:absolute; inset:-10% -10% 0; pointer-events:none;
  background-image:
    radial-gradient(#ffffff66 1px, transparent 1px),
    radial-gradient(#ffffff44 1px, transparent 1px);
  background-size: 2px 2px, 3px 3px; background-position: 0 0, 20px 20px;
  opacity:.1; z-index:0; animation: twinkle 8s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{ opacity:.09; transform:translateY(0) } to{ opacity:.14; transform:translateY(-6px) } }
.hero .orb{
  position:absolute; right:-240px; top:-180px; width:clamp(540px, 38vw, 760px); aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, #c7b5ff 20%, #7C3AED 55%, #2b1055 80%);
  box-shadow:0 0 120px 60px #7c3aed55, 0 0 180px 80px #4b2a9140 inset; opacity:.42; z-index:0; pointer-events:none;
}
.hero .content{ position:relative; z-index:1 }
.tag{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .75rem; border-radius:999px; font-size:14px; border:1px solid var(--border); background:var(--glass) }
.status{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px }
.pill{
  padding:.5rem .7rem; border-radius:999px; border:1px solid var(--border);
  background:linear-gradient(180deg, var(--glass), var(--glass-2));
  box-shadow:inset 0 0 0 1px #a78bfa22; font-weight:600
}
.dot{ width:8px; height:8px; border-radius:999px; display:inline-block; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.25) }
.dot.off{ background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.25) }

.grid{ display:grid; gap:var(--gap) }
.grid-2{ grid-template-columns:repeat(2,1fr) }
.grid-3{ grid-template-columns:repeat(3,1fr) }
.grid-4{ grid-template-columns:repeat(4,1fr) }

.card{
  background:var(--glass); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; backdrop-filter: blur(10px); box-shadow:var(--shadow-lg);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  will-change: transform; position:relative;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px #a78bfa33 inset;
  background: linear-gradient(180deg, #ffffff16, #ffffff0a);
  border-color:#ffffff33;
}

.feature{ padding:16px; border-radius:16px; border:1px solid var(--border); background:linear-gradient(180deg,#ffffff0c,#ffffff06) }
.icon{ width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:#ffffff10; border:1px solid var(--border); margin-bottom:8px }

.stat{ text-align:center; padding:18px; border:1px solid var(--border); border-radius:16px; background:linear-gradient(180deg,#ffffff0a,#ffffff05) }
.stat b{ display:block; font-size:24px; color:#fff }

.faction-card{ overflow:hidden; display:flex; flex-direction:column }
.faction-card .img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.faction-card .img.logo{
  object-fit:contain; background:#0b0a13; padding:12px; border-bottom:1px solid var(--border);
  transition: filter .2s ease, box-shadow .25s ease;
}
.faction-card:hover .img.logo{
  filter: drop-shadow(0 0 18px rgba(124,58,237,.4));
  box-shadow: inset 0 0 0 1px #a78bfa33;
}
.faction-card .body{ padding:16px; display:grid; gap:10px }

.gallery-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.gallery-item{ position:relative; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:#0b0a13; }
.gallery-item img{
  width:100%; height:100%; aspect-ratio:16/9; object-fit:cover;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  cursor:zoom-in;
}
.gallery-item img:hover{ transform: translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.5); filter:saturate(1.06); }

.testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.quote{
  position:relative; background:linear-gradient(180deg,#ffffff12,#ffffff08);
  border:1px solid var(--border); border-radius:18px; padding:20px;
}
.quote::before{ content:"“"; position:absolute; top:-6px; left:12px; font:700 64px/0.8 Poppins; color:#a78bfa33; pointer-events:none; }
.quote p{ color:var(--text-300); font-size:15px }
.quote .by{ display:flex; align-items:center; gap:10px; margin-top:10px; color:var(--text-700); font-weight:600 }
.avatar{ width:36px; height:36px; border-radius:50%; background: radial-gradient(100% 100% at 30% 20%, #2b1055, #0b0a13); border:1px solid var(--border); display:grid; place-items:center; font-weight:800; color:#c7b5ff; }

.faq{ max-width:1000px; margin:0 auto; }
.faq details{
  border:1px solid var(--border); border-radius:16px;
  background:linear-gradient(180deg,#ffffff12,#ffffff08);
  padding:14px 16px; transition: border-color .2s ease, background .2s ease;
}
.faq details+details{ margin-top:10px; }
.faq details[open]{ background:linear-gradient(180deg,#ffffff18,#ffffff0d); border-color:#ffffff33; }
.faq summary{ cursor:pointer; list-style:none; font-weight:700; display:flex; align-items:center; gap:10px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .chev{ transition: transform .25s ease; opacity:.9 }
.faq details[open] summary .chev{ transform: rotate(90deg); }
.faq .a{ color:var(--text-500); margin:.6rem 0 0 28px; }

footer{ border-top:1px solid var(--border); background:linear-gradient(180deg, #0b0a13, #090814) }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap:24px; align-items:start; padding:36px 0; }
.link{ display:block; padding:.25rem 0; color:var(--text-500); }
.link:hover{ color:#fff }

#toTop{
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--border); background:var(--glass); color:#fff; font-weight:800;
  cursor:pointer; box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
#toTop.show{ display:flex; }
#toTop:hover{ transform:translateY(-2px); border-color:#ffffff44; }

.lb{
  position:fixed; inset:0; display:grid; place-items:center; z-index:120;
  background:rgba(0,0,0,.65); backdrop-filter: blur(6px);
  opacity:0; pointer-events:none; transition: opacity .25s ease;
}
.lb.open{ opacity:1; pointer-events:auto; }
.lb-inner{
  position:relative; width:min(86vw,1400px); max-height:86vh;
  border-radius:16px; background:#0b0a13; border:1px solid #ffffff2a; padding:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.6); overflow:hidden; display:flex; flex-direction:column; align-items:center;

  isolation: isolate;
}
.lb-viewport{
  width:100%; height:min(74vh, calc(86vh - 70px));
  display:grid; place-items:center; background:#0b0a13; border-radius:12px;

  position: relative; z-index: 1;
}
.lb-img{
  max-width:100%; max-height:100%; object-fit:contain; display:block; border-radius:12px;
  transform: scale(.975); opacity:0; transition: transform .25s ease, opacity .25s ease;
  cursor: zoom-in;

  position: relative; z-index: 1;
}
.lb.ready .lb-img{ transform: scale(1); opacity:1; }
.lb-caption{ margin-top:8px; color:var(--text-700); text-align:center; font-size:.95rem; min-height:1rem; }

.lb-btn{
  position:absolute; width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center; border:1px solid var(--border); background:var(--glass);
  cursor:pointer; font-weight:800; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;

  z-index: 5; pointer-events:auto;
}
.lb-btn:hover{ transform:translateY(-1px); border-color:#ffffff44; box-shadow:0 12px 28px rgba(0,0,0,.45); }
.lb-close{ top:10px; right:10px; z-index:6; }
.lb-prev{ left:10px; top:50%; transform:translateY(-50%); }
.lb-next{ right:10px; top:50%; transform:translateY(-50%); }
.lb-btn:focus-visible{ outline:2px solid #22D3EE; outline-offset:2px }

@media (max-width: 1280px){
  .gallery-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .testimonials{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 980px){
  .grid-4{ grid-template-columns:repeat(2,1fr) }
  .grid-3{ grid-template-columns:repeat(2,1fr) }
  .footer-grid{ grid-template-columns: 1fr; }
  .hamburger{ display:grid; place-items:center }
  nav.primary{ display:none }
}
@media (max-width: 720px){
  .grid-2{ grid-template-columns:1fr }
  .gallery-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .testimonials{ grid-template-columns:1fr; }
  .lb-prev, .lb-next{ width:60px; height:60px; }
}