/* ===========================
   FLAME UI – Shared Styling
   =========================== */

/* Freedom Card */
.freedom-card {
  background: linear-gradient(145deg, #1b1b1b, #232323);
  border: 1px solid rgba(255, 120, 0, 0.35); /* ember border */
  border-radius: 14px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 0 15px rgba(255, 120, 0, 0.25); /* flame glow */
  transition: all 0.25s ease-in-out;
}

/* Hover / tap pop */
.freedom-card:hover,
.freedom-card:active {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 25px rgba(255, 140, 0, 0.35);
  border-color: rgba(255, 140, 0, 0.6);
}

/* Title inside card */
.freedom-card h2,
.freedom-card .title {
  color: #ffb347; /* warm flame gold */
  text-shadow: 0 0 6px rgba(255, 120, 0, 0.5);
  margin-bottom: 0.75rem;
}

/* Paragraph text */
.freedom-card p {
  color: #ddd;
  line-height: 1.5;
}

/* ===========================
   CTA Buttons – Shared Base
   =========================== */
.cta-button {
  display: inline-block;
  margin: 0.5rem 0.25rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* Daily Nail – golden ember */
.daily-nail {
  background: linear-gradient(145deg, #ffcc66, #ff9933);
  color: #222;
  box-shadow: 0 0 14px rgba(255, 160, 0, 0.4);
}
.daily-nail:hover,
.daily-nail:active {
  background: linear-gradient(145deg, #ffd27f, #ffa64d);
  box-shadow: 0 0 22px rgba(255, 180, 0, 0.65);
  transform: translateY(-2px) scale(1.03);
}

/* Ældur Störmbringër – storm blue */
.stormbringer {
  background: linear-gradient(145deg, #3399ff, #0066ff);
  box-shadow: 0 0 14px rgba(0, 120, 255, 0.4);
}
.stormbringer:hover,
.stormbringer:active {
  background: linear-gradient(145deg, #4da6ff, #1a75ff);
  box-shadow: 0 0 22px rgba(0, 140, 255, 0.65);
  transform: translateY(-2px) scale(1.03);
}

/* Enter the Freedoms – flame red */
.enter-link {
  background: linear-gradient(145deg, #ff6a00, #ff3d00);
  box-shadow: 0 0 14px rgba(255, 90, 0, 0.4);
}
.enter-link:hover,
.enter-link:active {
  background: linear-gradient(145deg, #ff8c1a, #ff4d1a);
  box-shadow: 0 0 22px rgba(255, 120, 0, 0.65);
  transform: translateY(-2px) scale(1.03);
}