/* ===========================
   THEME & RESET
=========================== */
:root{
  --bg-url: url("assets/bg-space.jpg");

  --violet: 274 100% 60%;
  --violet-dark: 274 60% 40%;
  --gold: 44 96% 55%;
  --text: 220 14% 90%;
  --muted: 220 10% 70%;
  --glass: 0 0% 100% / 0.06;
  --glass-strong: 0 0% 100% / 0.12;

  --navbar-h: 72px; /* altura da topbar fixa */
}

*{ box-sizing: border-box; }

html, body{
  /* liberar scroll vertical e evitar duplo scroll */
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}

body{
  margin: 0;
  color: hsl(var(--text));
  background: black;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* util */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===========================
   TOP BAR
=========================== */
.topbar{
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--navbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(12px, 2.5vw, 28px);
  z-index: 50;
  backdrop-filter: blur(6px);
  background: transparent; /* sem fundo sólido */
  pointer-events: auto;
}

.topbar__left{ display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }

.logo{
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: hsl(var(--text));
  font-weight: 900; letter-spacing: .2em; text-transform: uppercase;
}

.logo-img{
  height: 44px;
  width: auto;
  display: block;
  object-fit: contain;
  margin-left: 0;
  filter: drop-shadow(0 0 8px rgba(150, 0, 255, 0.4));
}

.nav{ display: flex; gap: clamp(10px, 2vw, 22px); }
.nav__link{
  position: relative;
  color: hsl(var(--muted));
  text-decoration: none; font-weight: 600;
}
.nav__link::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px;
  background: linear-gradient(90deg, hsla(var(--violet)/0), hsl(var(--violet)), hsla(var(--violet)/0));
  transform: scaleX(0); transform-origin: center; transition: .25s ease;
}
.nav__link:hover{ color: #fff; }
.nav__link:hover::after{ transform: scaleX(1); }
.nav__link--active{ color:#fff; }
.nav__link--active::after{ transform: scaleX(1); }

.topbar__right{ display: flex; align-items: center; gap: 10px; }
.cta{
  border: 1px solid hsl(var(--violet-dark));
  color: hsl(var(--violet-dark));
  background: hsla(var(--glass));
  padding: 10px 16px; border-radius: 14px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; transition: .25s ease; backdrop-filter: blur(6px);
}
.cta:hover{
  border-color: hsl(var(--violet));
  color: white; background: hsla(var(--glass-strong));
  box-shadow: 0 0 24px hsla(var(--violet)/.25), inset 0 0 14px hsla(var(--violet)/.15);
}

/* ===========================
   BACKGROUND LAYERS
=========================== */
.starfield{
  position: fixed; inset: 0; z-index: -2; /* fica atrás de tudo */
  pointer-events: none; /* não bloqueia cliques/scroll */
}

.bg{
  position: absolute; inset: 0;
  background-image: var(--bg-url);
  background-size: cover; background-position: center;
  filter: saturate(1.1) contrast(1.05);
  transform: translateZ(0);
}

#stars{
  position: absolute; inset: 0; display: block; opacity: .85;
}

.vignette{
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(140vmax 100vmax at 50% 45%, hsla(var(--violet)/.08), transparent 60%),
    radial-gradient(120vmax 90vmax at 80% 10%, hsla(var(--gold)/.10), transparent 65%),
    radial-gradient(100vmax 100vmax at 50% 70%, rgba(0,0,0,.0), rgba(0,0,0,.6) 70%);
  mix-blend-mode: multiply;
}

/* opcional: camada interativa separada (não deve bloquear scroll) */
.scene{
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}

/* ===========================
   LAYOUT BASE DE PÁGINA
=========================== */
/* regra geral: empurrar conteúdo para baixo da navbar fixa
   e garantir espaço pro footer (scroll total) */
main{
  position: relative;
  z-index: 5;
  min-height: calc(100vh - var(--navbar-h));
  margin-top: var(--navbar-h);
  padding: clamp(16px, 4vw, 64px);
  padding-bottom: 6rem; /* espaço pro footer */
}

/* ===========================
   MANIFESTO (texto sem pedra)
=========================== */
.manifesto-center{ /* se usar uma wrapper específica */
  display: grid; place-items: center;
}

.manifesto-card{
  --card-bg: 0 0% 0% / .38;
  max-width: 72ch;
  color: #f6ead1;
  background: hsl(var(--card-bg));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 28px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  text-shadow: 0 1px 8px rgba(0,0,0,.75);
}

.manifesto-head h1{
  margin: 0 0 .35rem;
  font-size: clamp(26px, 2.6vw + 12px, 44px);
  letter-spacing: .08em;
}
.manifesto-head .subtitle{
  margin: 0 0 1rem; color:#cebfa0; font-size:.95rem;
}

/* se usar o canvas do anel */
#meteorRing{
  position: fixed; inset: 0;
  z-index: 3; /* abaixo do main (5), acima do fundo (-2) */
  pointer-events: none;
}

/* ===========================
   SWARM PAGE
=========================== */
.swarm-center{ /* herda as regras de main */
}

.swarm-hero h1{
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(28px, 2.8vw + 12px, 52px);
  letter-spacing: .04em;
  margin: 0 0 .4rem;
}
.swarm-hero .lead{
  max-width: 80ch;
  color: #e8dcc4;
}

.swarm-card{
  background: hsl(0 0% 0% / .38);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: clamp(16px, 2.6vw, 28px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.swarm-card h2{ margin: 0 0 .6rem; color:#ffe8b8; }
.muted{ color:#cbbfa5; }

/* Mesh diagram */
.mesh-wrap{ display:grid; place-items:center; margin-top:.4rem; }
.mesh{ width:100%; max-width:900px; height:auto; }
.node{ fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.28); stroke-width:1.5; }
.node.aion{ filter: drop-shadow(0 0 8px rgba(154,208,255,.3)); }
.node.exon{ filter: drop-shadow(0 0 8px rgba(255,154,172,.25)); }
.node.nova{ filter: drop-shadow(0 0 8px rgba(199,179,255,.25)); }
.node.eirya{ filter: drop-shadow(0 0 10px rgba(255,215,122,.35)); }
.edge{ stroke: url(#g1); stroke-width:2; opacity:.75; animation: flow 2.6s linear infinite;
       stroke-dasharray: 8 12; stroke-linecap: round; }
@keyframes flow{ to{ stroke-dashoffset:-400; } }
.label{ text-anchor: middle; dominant-baseline: middle; font-weight:800; fill:#fff; font-size:14px; }
.sublabel{ text-anchor: middle; dominant-baseline: middle; font-size:10px; fill:#e8dcc4; }

/* UI de latência (se usar) */
.latency-ui{ display:grid; gap:.6rem; }
.lat-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.lat-box{ background: hsl(0 0% 0% / .28); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px; }
.lat-box.best{ border-color: rgba(255,215,122,.6); box-shadow: 0 0 24px rgba(255,215,122,.15) inset; }
.lat-val{ font-size: clamp(18px, 2vw, 28px); font-weight:800; }
.micro{ font-size: 12px; }

/* IA roles */
.roles-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
}
.role{
  background: hsl(0 0% 0% / .34);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 14px;
}
.role h3{ margin:.2rem 0 .4rem; }
.role.aion h3{ color:#9ad0ff; }
.role.exon h3{ color:#ff9aac; }
.role.nova h3{ color:#c7b3ff; }
.role.eirya h3{ color:#ffd77a; }

.swarm-cta{ display:grid; place-items:center; gap:.3rem; margin-top:.6rem; }
.cta.xl{ padding:14px 22px; font-size:14px; }

/* ===========================
   ABOUT PAGE
=========================== */
.about-center{ /* herda as regras de main */ }

.about-hero{
  margin: 0 auto;
  max-width: 800px;
  text-align: center;
  animation: fadeUp 1.2s ease-out forwards;
}
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(40px); }
  to{ opacity:1; transform: translateY(0); }
}
.about-hero h1{
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #d9a441, #fef5d0);
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(255, 200, 100, 0.3));
  margin-bottom: 12px;
}
.about-hero .brand{ color:#ffd77a; }
.about-hero .lead{ max-width: 90ch; color:#e8dcc4; margin: 0 auto; }

.about-card{
  background: hsl(0 0% 0% / .38);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: clamp(16px, 2.6vw, 28px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.about-card h2{ margin: 0 0 .6rem; color:#ffe8b8; }

.team-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
}
.member{
  background: hsl(0 0% 0% / .30);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 14px;
  display:grid; gap:6px; text-align: left;
}
.member .avatar{
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 12px; filter: brightness(.95) contrast(1.05);
}
.member h3{ margin:.4rem 0 0; }
.member .role{ color:#cbbfa5; margin:0; }
.member .bio{ margin:.2rem 0 0; color:#e8dcc4; }
.member .links{ display:flex; gap:10px; flex-wrap:wrap; }
.member .links a{
  color:#fff; text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.3);
}
.member .links a:hover{ color:#ffd77a; border-color:#ffd77a; }

.values .value-list{ margin:.4rem 0 0; display:grid; gap:.4rem; }

.timeline{
  margin:.4rem 0 0; padding-left:1.2rem; display:grid; gap:.4rem;
}
.timeline span{
  color:#ffd77a; font-weight:800; margin-right:.35rem;
}

.contact-grid{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:.4rem;
}
.contact-pill{
  padding:8px 12px; border-radius:999px; text-decoration:none; color:#fff;
  border:1px solid rgba(255,255,255,.18);
  background: hsl(0 0% 0% / .24);
}
.contact-pill:hover{ border-color:#ffd77a; color:#ffd77a; }

/* ===========================
   PLANETAS CLICÁVEIS (se usados)
=========================== */
.planet{
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  background: none; border: none; cursor: pointer;
  pointer-events: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.planet img{
  display: block; width: var(--size, 80px); height: auto;
  border-radius: 50%;
  box-shadow: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  animation: float 6s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }
.planet:hover img{
  transform: scale(1.08);
  filter: brightness(1.2);
  box-shadow: 0 0 40px hsla(274, 100%, 60%, 0.55);
}

/* Tooltip */
.tooltip{
  position: fixed; z-index: 20; pointer-events: none;
  background: hsla(var(--glass-strong));
  color: #fff; border: 1px solid hsla(var(--violet)/.35); border-radius: 10px;
  padding: 8px 12px; font-size: 14px; line-height: 1.2; opacity: 0; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease; backdrop-filter: blur(8px);
}
.tooltip strong{ color: hsl(var(--gold)); }

/* ===========================
   MODAL
=========================== */
.modal{ border: none; padding: 0; background: none; }
.modal::backdrop{ background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.modal__card{
  width: min(92vw, 440px); margin: 10vh auto; padding: 22px;
  background: hsla(var(--glass-strong)); border: 1px solid hsla(var(--violet)/.35);
  border-radius: 18px; color: #fff; box-shadow: 0 10px 45px rgba(0,0,0,.45);
}
.modal__card h2{ margin: 0 0 6px; }
.field{ display: grid; gap: 6px; margin: 12px 0 6px; }
.field input{
  padding: 10px 12px; border-radius: 10px; border: 1px solid hsla(var(--violet)/.25);
  background: rgba(0,0,0,.35); color: #fff; outline: none;
}
.field input:focus{ border-color: hsl(var(--violet)); box-shadow: 0 0 0 3px hsla(var(--violet)/.25); }
.actions{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.actions .ghost{ background: transparent; border: 1px solid rgba(255,255,255,.16); color: #fff; padding: 8px 12px; border-radius: 10px; }
.actions .primary{ background: hsl(var(--violet-dark)); color: #fff; border: 0; padding: 8px 14px; border-radius: 10px; }
.actions .primary:hover{ background: hsl(var(--violet)); }

/* ===========================
   FOOTER GLOBAL.
=========================== */
.about-footer{
  text-align: center;
  margin: 80px 0 40px;
  color: hsl(var(--muted));
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  opacity: 0.9;
}
.about-footer p{
  margin: 0;
  text-shadow: 0 0 6px rgba(255, 240, 190, 0.15);
}

/* ===========================
   RESPONSIVO
=========================== */
@media (max-width: 1100px){
  .roles-grid{ grid-template-columns: repeat(2, 1fr); }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .lat-row{ grid-template-columns: 1fr; }
  .roles-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: 1fr; }
}
/* ================= TEAM SECTION ================= */
.section-team {
  margin-top: 64px;
  text-align: center;
}

.section-team h2 {
  color: #ffd980;
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 28px;
}

.member-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  backdrop-filter: blur(4px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.member-card.active,
.member-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,217,128,0.6);
  box-shadow: 0 0 24px rgba(255,217,128,0.18);
}

.member-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,217,128,0.7);
  box-shadow: 0 0 12px rgba(255,217,128,0.25);
  margin: 6px auto 10px;
  background: rgba(0,0,0,0.4);
}

.member-name {
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 6px;
  color: #ffd980;
}

.member-role {
  font-size: .9rem;
  color: hsl(var(--muted));
  margin-bottom: 12px;
}

.member-links {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.icon-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,217,128,0.7);
  box-shadow: 0 0 16px rgba(255,217,128,0.25);
}

.icon {
  width: 18px;
  height: 18px;
  fill: #f0e8d8;
}
/* ===== ANIMAÇÃO DE ROTAÇÃO SUAVE DOS PLANETAS ===== */
@keyframes spinPlanet {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.planet {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.25s ease-out;
  filter: drop-shadow(0 0 8px rgba(255, 215, 100, 0.25));
}

.planet:hover {
  transform: translate(-50%, -50%) scale(1.07);
}

.planet img {
  width: clamp(48px, 6vw, 120px);
  height: auto;
  user-select: none;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
}
/* ===========================
   CHAT PAGE (AI PROMPT)
=========================== */
.chat-center {
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--navbar-h));
  margin-top: var(--navbar-h);
  padding: clamp(16px, 4vw, 64px);
}

/* Cartão principal do chat */
.chat-card {
  width: min(90vw, 780px);
  height: 70vh;
  background: hsla(240, 6%, 7%, 0.096); /* vidro translúcido */
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(0px) saturate(100%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  color: #e8dcc4;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}

/* Mensagens */
.msg {
  display: flex;
  align-items: flex-start;
}
.msg.user {
  justify-content: flex-end;
}
.msg.ia {
  justify-content: flex-start;
}

.msg-bubble {
  max-width: 75%;
  padding: 12px 18px;
  border-radius: 16px;
  line-height: 1.6;
  font-size: 1rem;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transition: transform 0.25s ease;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.msg-bubble:hover {
  transform: scale(1.02);
}

.msg.user .msg-bubble {
  background: linear-gradient(145deg, hsl(261, 60%, 36%), hsl(261, 70%, 46%));
  color: #fff;
  border-top-right-radius: 4px;
  box-shadow: 0 0 14px hsla(261, 70%, 50%, 0.35);
}
.msg.ia .msg-bubble {
  background: rgba(20, 20, 30, 0.55);
  border: 1px solid hsla(261, 70%, 70%, 0.25);
  color: #e8dcc4;
  border-top-left-radius: 4px;
}

/* Input */
.chat-input {
  display: flex;
  gap: 10px;
  padding: 14px;
  background: hsla(0, 0%, 0%, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) saturate(160%);
}

.chat-input input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #f2f0e9;
  outline: none;
  font-size: 0.95rem;
}
.chat-input input:focus {
  border-color: hsl(261, 70%, 60%);
  box-shadow: 0 0 0 3px hsla(261, 70%, 60%, 0.2);
}

.send-btn {
  border: 1px solid hsl(261, 70%, 50%);
  background: hsl(261, 70%, 45%);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  padding: 10px 16px;
  transition: all 0.25s ease;
}
.send-btn:hover {
  background: hsl(261, 70%, 55%);
  box-shadow: 0 0 10px hsla(261, 70%, 60%, 0.4);
}

/* === EIRYA CHIBI NAV ICON === */
.eirya-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.eirya-chibi {
  width: 38px;
  height: 38px;
  object-fit: contain;
  transition: transform 0.25s ease, filter 0.25s ease;
  filter: drop-shadow(0 0 6px rgba(255, 230, 180, 0.3));
}

.eirya-link:hover .eirya-chibi {
  transform: scale(1.15);
  filter: drop-shadow(0 0 10px rgba(255, 230, 180, 0.6));
}