:root{--bg:#0b0c10;--text:#e7ecef;--muted:#9aa4ae;--card:#111326;--ring:#27284b}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.container{max-width:1100px;margin:0 auto;padding:1.25rem}
.site-header{position:sticky;top:0;background:linear-gradient(180deg,rgba(14,14,26,.9),rgba(14,14,26,.8));backdrop-filter:blur(6px);border-bottom:1px solid var(--ring);z-index:10}
.logo{color:var(--text);text-decoration:none;font-weight:800}
.site-nav{display:flex;gap:1rem;margin:.5rem 0}
.site-nav a{color:var(--text);text-decoration:none;opacity:.85}
.site-nav a:hover{opacity:1}

.hero{border:1px solid var(--ring);border-radius:18px;padding:2rem;background:
 radial-gradient(60% 80% at 30% 20%, rgba(162,28,175,.25), transparent 60%),
 radial-gradient(70% 90% at 70% 30%, rgba(14,165,233,.2), transparent 60%),
 radial-gradient(50% 60% at 50% 80%, rgba(255,255,255,.05), transparent 80%);}
.hero img.logo-image{display:block;margin:0 auto;max-width:540px;width:92%;height:auto}

/* Tagline image container */
.hero .tagline{display:block;text-align:center}
.hero .tagline img{display:block;margin:0 auto;max-width:960px;width:100%;height:auto}

.badge{display:inline-block;font-size:.75rem;color:#c7b7ff;border:1px dashed var(--ring);padding:.25rem .5rem;border-radius:999px;margin-bottom:.5rem}
.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;padding:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1.25rem}

.character{display:flex;gap:.9rem;align-items:flex-start}
.character img.thumb{width:96px;height:96px;border-radius:12px;border:1px solid var(--ring);object-fit:cover;background:#222;cursor:pointer}
.character .bio p{margin:.25rem 0 0;color:#ccd6dd}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin-top:1rem}
.gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;border:1px solid var(--ring);cursor:pointer;background:#222}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;padding:1rem;z-index:50}
.modal.open{display:flex}
.modal-card{max-width:900px;width:100%;background:#0f1122;border:1px solid var(--ring);border-radius:14px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--ring)}
.modal-body{display:grid;grid-template-columns:280px 1fr;gap:1rem;padding:1rem}
.modal-body img{width:100%;border-radius:10px;border:1px solid var(--ring);object-fit:cover;background:#222}
.modal-close{background:transparent;border:1px solid var(--ring);color:#fff;border-radius:8px;padding:.3rem .6rem;cursor:pointer}
@media (max-width:720px){.modal-body{grid-template-columns:1fr}}

.site-footer{border-top:1px solid var(--ring);margin-top:2rem}
.site-footer .container{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}