/* ===========================================================
   havek.mu — ajustes que o Tailwind CDN não cobre
   =========================================================== */

:root {
  --gold: #e8c372;
  --gold-deep: #b8893a;
  --mublue: #1e6fff;
  --ksred: #c41e1e;
}

body {
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(30, 111, 255, .10), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(196, 30, 30, .08), transparent 60%),
    #05060a;
  background-attachment: fixed;
}

/* ---- Logo hexágono ---- */
.hex {
  width: 40px;
  height: 40px;
  background: linear-gradient(160deg, rgba(30, 111, 255, .25), rgba(30, 111, 255, .05));
  border: 1px solid rgba(30, 111, 255, .45);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  box-shadow: 0 0 18px rgba(30, 111, 255, .25);
}

/* ---- Nav links com underline glow ---- */
.nav-link {
  position: relative;
  color: #cbd5e1;
  transition: color .2s;
}
.nav-link:hover { color: #fff; }
.nav-link.is-active { color: #fff; }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -26px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mublue), transparent);
  box-shadow: 0 0 12px var(--mublue);
}

/* ---- Texto dourado (títulos display) ---- */
.gold-text {
  background: linear-gradient(180deg, #fbe7be 0%, var(--gold) 45%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 18px rgba(232, 195, 114, .15);
}

.ornament {
  color: var(--gold-deep);
  opacity: .8;
}

/* ---- Cards de servidor ---- */
.server-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(10, 12, 20, .55);
  backdrop-filter: blur(6px);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.server-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .9;
}
.server-card.blue::before {
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(30, 111, 255, .28), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(10, 40, 120, .35), transparent 60%),
    linear-gradient(160deg, #0a1330, #060912);
}
.server-card.red::before {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(196, 30, 30, .30), transparent 55%),
    radial-gradient(120% 90% at 0% 100%, rgba(90, 12, 12, .40), transparent 60%),
    linear-gradient(160deg, #2a0c0c, #0a0606);
}
.server-card > * { position: relative; z-index: 1; }

.server-card.blue { border-color: rgba(30, 111, 255, .25); }
.server-card.red  { border-color: rgba(196, 30, 30, .25); }
.server-card.blue:hover {
  transform: translateY(-4px);
  border-color: rgba(30, 111, 255, .6);
  box-shadow: 0 18px 50px rgba(30, 111, 255, .25);
}
.server-card.red:hover {
  transform: translateY(-4px);
  border-color: rgba(196, 30, 30, .6);
  box-shadow: 0 18px 50px rgba(196, 30, 30, .25);
}

/* ---- Logo textual do servidor (placeholder até PNG) ---- */
.server-logo {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: .95;
}
.server-logo .big {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
}

/* ---- Botão JOGAR ---- */
.btn-play {
  position: relative;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  transition: transform .15s, box-shadow .2s, filter .2s;
  clip-path: polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%);
}
.btn-play.blue {
  background: linear-gradient(180deg, #4f96ff, #1e6fff 55%, #0c3fae);
  box-shadow: 0 0 24px rgba(30, 111, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  color: #fff;
}
.btn-play.red {
  background: linear-gradient(180deg, #ff5a5a, #c41e1e 55%, #7a0d0d);
  box-shadow: 0 0 24px rgba(196, 30, 30, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  color: #fff;
}
.btn-play:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ---- Feature icons (fileira dentro do card) ---- */
.feat-icon { color: #cfe0ff; }
.red .feat-icon { color: #ffd2d2; }

/* ---- Faixa de highlights ---- */
.highlight-strip {
  border: 1px solid rgba(232, 195, 114, .12);
  background: linear-gradient(180deg, rgba(20, 16, 8, .5), rgba(8, 8, 12, .5));
  border-radius: 16px;
}

/* ---- Online dot ---- */
.online-dot {
  width: 9px; height: 9px; border-radius: 9999px;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  display: inline-block;
}

/* ---- Generic section card ---- */
.glass {
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(12, 14, 22, .55);
  backdrop-filter: blur(6px);
  border-radius: 16px;
}

/* ===========================================================
   MuWorld Crypto — seção do token MWLD
   =========================================================== */

/* selo "EM BREVE · PRÉ-VENDA" */
.crypto-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  padding: .4rem .9rem;
  border-radius: 9999px;
  border: 1px solid rgba(232, 195, 114, .35);
  background: linear-gradient(180deg, rgba(232, 195, 114, .14), rgba(232, 195, 114, .04));
  box-shadow: 0 0 22px rgba(232, 195, 114, .18);
}

/* ---- Hero da seção (banner + moeda flutuante) ---- */
.crypto-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(232, 195, 114, .18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.crypto-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}
.crypto-hero-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232, 195, 114, .12), transparent 55%),
    linear-gradient(180deg, rgba(5, 6, 10, .55) 0%, rgba(5, 6, 10, .80) 70%, rgba(5, 6, 10, .95) 100%);
}
.crypto-hero-inner {
  position: relative;
  z-index: 1;
  padding: 3rem 1.5rem 3.25rem;
  text-align: center;
}
@media (min-width: 640px) {
  .crypto-hero-inner { padding: 4rem 2.5rem; }
}

/* moeda flutuante */
.crypto-coin-wrap {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border-radius: 9999px;
  padding: 6px;
  background: conic-gradient(from 0deg, var(--gold), #fbe7be, var(--gold-deep), var(--gold));
  box-shadow: 0 0 50px rgba(232, 195, 114, .45);
  animation: coin-float 5s ease-in-out infinite;
}
.crypto-coin {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
  display: block;
  border: 3px solid #05060a;
}
@keyframes coin-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.crypto-symbol-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  color: #fff;
  padding: .45rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(232, 195, 114, .4);
  background: rgba(232, 195, 114, .10);
}

/* selos de característica */
.crypto-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: 12px;
  font-weight: 600;
  color: #e9eef9;
  padding: .4rem .85rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
}
.crypto-badge i { color: var(--gold); }

/* ---- Variante GOLD do card de servidor (passo 02) ---- */
.server-card.gold::before {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232, 195, 114, .26), transparent 55%),
    radial-gradient(120% 90% at 0% 100%, rgba(120, 86, 24, .35), transparent 60%),
    linear-gradient(160deg, #1c1606, #0a0805);
}
.server-card.gold { border-color: rgba(232, 195, 114, .28); }
.server-card.gold:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 195, 114, .6);
  box-shadow: 0 18px 50px rgba(232, 195, 114, .22);
}

/* ---- Variante GOLD do botão ---- */
.btn-play.gold {
  background: linear-gradient(180deg, #f6dca0, var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 0 24px rgba(232, 195, 114, .45), inset 0 1px 0 rgba(255, 255, 255, .45);
  color: #2a1d05;
}

/* ---- Imagem dos passos "como funciona" ---- */
.crypto-step-img {
  position: relative;
  height: 180px;
  overflow: hidden;
}
.crypto-step-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.server-card:hover .crypto-step-img img { transform: scale(1.06); }
.crypto-step-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 12, 20, .9) 100%);
}
.crypto-step-n {
  position: absolute;
  bottom: .5rem;
  left: .85rem;
  z-index: 1;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(232, 195, 114, .65);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}

/* ---- Roadmap (fases) ---- */
.crypto-phase {
  position: relative;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(12, 14, 22, .55);
  backdrop-filter: blur(6px);
  transition: border-color .25s, transform .25s;
}
.crypto-phase:hover { transform: translateY(-3px); }
.crypto-phase.live { border-color: rgba(34, 197, 94, .35); }
.crypto-phase-dot {
  width: 11px; height: 11px; border-radius: 9999px; display: inline-block;
}
.crypto-phase-dot.live { background: #22c55e; box-shadow: 0 0 12px #22c55e; }
.crypto-phase-dot.next { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.crypto-phase-dot.soon { background: #64748b; }
.crypto-phase-status {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: .2rem .55rem;
  border-radius: 9999px;
}
.crypto-phase-status.live { color: #4ade80; background: rgba(34, 197, 94, .14); }
.crypto-phase-status.next { color: var(--gold); background: rgba(232, 195, 114, .14); }
.crypto-phase-status.soon { color: #94a3b8; background: rgba(148, 163, 184, .12); }

/* ---- Bloco CTA ---- */
.crypto-cta {
  border-radius: 20px;
  padding: 2.5rem 1.5rem;
  border: 1px solid rgba(232, 195, 114, .18);
  background:
    radial-gradient(100% 120% at 50% 0%, rgba(232, 195, 114, .10), transparent 60%),
    rgba(10, 12, 20, .55);
}

/* divider ornamentado */
.divider-orn {
  display: flex; align-items: center; gap: 1rem; justify-content: center;
  color: var(--gold-deep);
}
.divider-orn::before, .divider-orn::after {
  content: ""; height: 1px; flex: 1; max-width: 220px;
  background: linear-gradient(90deg, transparent, rgba(232, 195, 114, .5), transparent);
}

/* ---- Vitrine de ebooks (cards com capa real + brilho) ---- */
.ebook-cover {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.ebook-cover img {
  width: 100%;
  aspect-ratio: 1 / 1.28;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform .45s ease;
}
.group:hover .ebook-cover img { transform: scale(1.06); }
.ebook-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(5, 6, 10, .82));
  pointer-events: none;
}
.ebook-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .14em;
  padding: 4px 11px;
  border-radius: 999px;
  color: #14100a;
  background: linear-gradient(135deg, #fbe7be, #e8c372 55%, #b8893a);
  box-shadow: 0 0 18px rgba(232, 195, 114, .5);
  animation: badge-glow 2.4s ease-in-out infinite;
}
@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(232, 195, 114, .35); }
  50%      { box-shadow: 0 0 26px rgba(232, 195, 114, .75); }
}
.ebook-price-old {
  color: #7c8aa5;
  text-decoration: line-through;
  font-size: .82rem;
  font-weight: 600;
}
.ebook-price {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1;
  color: #e8c372;
  text-shadow: 0 0 20px rgba(232, 195, 114, .4);
}
.server-card.ebook {
  box-shadow: 0 0 0 1px rgba(232, 195, 114, .14), 0 12px 40px rgba(0, 0, 0, .45);
}
.server-card.ebook:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 195, 114, .5);
  box-shadow: 0 0 0 1px rgba(232, 195, 114, .3), 0 22px 60px rgba(232, 195, 114, .18);
}