/* ============================================================
   PLAN CARD REDESIGN  –  cards.css
   Overrides .card from style.css via higher specificity
   ============================================================ */

/* ── Tier color tokens ─────────────────────────────────────── */
:root {
  --c-trial:      #f0a500;
  --c-neural:     #00bfff;
  --c-plus:       #9b5fff;
  --c-ultra:      #00e0a0;
  --c-enterprise: #b8cfe0;
}

/* ── Card base: frosted glass panel ───────────────────────── */
.features .card {
  position: relative;
  background: rgba(8, 8, 20, 0.76);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  overflow: hidden;
  padding: 2rem 1.75rem 1.75rem;
  transition: transform 0.32s cubic-bezier(.22,.68,0,1.2),
              box-shadow 0.32s ease;
  opacity: 0;
  animation: cardReveal 0.6s cubic-bezier(.22,.68,0,1.15) both;
}

@keyframes cardReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.features .card:nth-child(1) { animation-delay: 0.05s; }
.features .card:nth-child(2) { animation-delay: 0.12s; }
.features .card:nth-child(3) { animation-delay: 0.20s; }
.features .card:nth-child(4) { animation-delay: 0.28s; }
.features .card:nth-child(5) { animation-delay: 0.36s; }
.features .card:nth-child(6) { animation-delay: 0.44s; }

/* ── Top accent stripe ─────────────────────────────────────── */
.features .card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tier-color, rgba(255,255,255,0.10));
  pointer-events: none;
  z-index: 1;
}

/* ── Ambient glow behind card ──────────────────────────────── */
.features .card::after {
  content: "";
  position: absolute;
  top: -25px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 90px;
  background: var(--tier-color, rgba(255,255,255,0.04));
  filter: blur(42px);
  opacity: 0.14;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.features .card > * { position: relative; z-index: 1; }

/* ── Hover: lift + tier glow ring ──────────────────────────── */
.features .card:hover {
  transform: translateY(-7px);
  box-shadow:
    0 28px 64px rgba(0,0,0,0.55),
    0 0 0 1px var(--tier-color, rgba(255,255,255,0.10)),
    0 0 42px -12px var(--tier-color, transparent);
}

/* ── Tier class wiring ─────────────────────────────────────── */
/* Trial + Plus badges float above the card — both need overflow visible.
   Must match .features .card specificity (0-2-0) to win. */
.card-trial      { --tier-color: var(--c-trial); }
.card-neural     { --tier-color: var(--c-neural); }
.card-plus       { --tier-color: var(--c-plus); }
.card-ultra      { --tier-color: var(--c-ultra); }
.card-enterprise { --tier-color: var(--c-enterprise); }
.features .card-trial,
.features .card-plus { overflow: visible; }

/* border per tier (overrides inline styles) */
.card-trial      { border: 1px solid rgba(240,165,0,0.28) !important; }
.card-neural     { border: 1px solid rgba(0,191,255,0.18) !important; }
.card-plus       { border: 1px solid rgba(155,95,255,0.38) !important; }
.card-ultra      { border: 1px solid rgba(0,224,160,0.22) !important; }
.card-enterprise { border: 1px solid rgba(184,207,224,0.18) !important; }

/* overflow:visible cards can't clip ::before to the card's border-radius.
   Disable it and use border-top instead — borders always follow border-radius
   regardless of overflow. Specificity 0-2-0 beats the 0-1-0 !important below. */
.features .card-trial::before,
.features .card-plus::before { display: none; }
.features .card-trial { border-top-width: 3px !important; border-top-color: var(--c-trial) !important; }
.features .card-plus  { border-top-width: 3px !important; border-top-color: var(--c-plus)  !important; }

/* ── Featured card (Neural Plus) ──────────────────────────── */
.card-featured {
  background: rgba(12, 6, 26, 0.84) !important;
}
.card-featured::after {
  opacity: 0.24;
  width: 260px; height: 120px;
}

/* ── "Most Popular" badge ──────────────────────────────────── */
.card-popular-badge {
  background: linear-gradient(90deg, #9b5fff, #6b30cc);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 13px;
  border-radius: 20px;
  box-shadow: 0 0 18px rgba(155,95,255,0.5);
  white-space: nowrap;
}
/* Specificity 0-3-0 overrides .features .card > * (0-2-0) position:relative */
.features .card .card-popular-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* ── Tier headings ─────────────────────────────────────────── */
.features .card h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--tier-color, #d8e4f0);
  margin: 0 0 0.3rem;
  text-shadow: 0 0 20px var(--tier-color, transparent);
}

.features .card h3 {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1.2rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* ── Feature list ──────────────────────────────────────────── */
.features .card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.features .card ul li {
  position: relative;
  padding-left: 1.3rem;
  font-family: 'Exo 2', sans-serif;
  font-size: 0.875rem;
  color: rgba(210,215,232,0.87);
  line-height: 1.55;
  margin-bottom: 0.44rem;
}

.features .card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px; height: 6px;
  background: var(--tier-color, rgba(200,200,220,0.45));
  border-radius: 50%;
  box-shadow: 0 0 5px var(--tier-color, transparent);
}

/* ── Fine-print paragraphs ─────────────────────────────────── */
.features .card > p {
  font-family: 'Exo 2', sans-serif;
  font-size: 0.74rem;
  color: rgba(160,165,185,0.62);
  margin-bottom: 0.9rem;
  line-height: 1.5;
}

/* ── CTA buttons ───────────────────────────────────────────── */
.features .card .hero-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 0.72rem 1.25rem;
  border-radius: 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.15s ease;
}

.card-trial .hero-button {
  background: rgba(240,165,0,0.16);
  border-color: rgba(240,165,0,0.44);
  box-shadow: 0 4px 18px -5px rgba(240,165,0,0.32);
}
.card-trial .hero-button:hover {
  background: rgba(240,165,0,0.32);
  box-shadow: 0 6px 24px -4px rgba(240,165,0,0.52);
  transform: translateY(-2px);
}

.card-neural .hero-button {
  background: rgba(0,191,255,0.13);
  border-color: rgba(0,191,255,0.38);
  box-shadow: 0 4px 18px -5px rgba(0,191,255,0.28);
}
.card-neural .hero-button:hover {
  background: rgba(0,191,255,0.28);
  box-shadow: 0 6px 24px -4px rgba(0,191,255,0.48);
  transform: translateY(-2px);
}

.card-plus .hero-button {
  background: rgba(155,95,255,0.18);
  border-color: rgba(155,95,255,0.50);
  box-shadow: 0 4px 18px -5px rgba(155,95,255,0.38);
}
.card-plus .hero-button:hover {
  background: rgba(155,95,255,0.36);
  box-shadow: 0 6px 24px -4px rgba(155,95,255,0.58);
  transform: translateY(-2px);
}

.card-ultra .hero-button {
  background: rgba(0,224,160,0.13);
  border-color: rgba(0,224,160,0.40);
  box-shadow: 0 4px 18px -5px rgba(0,224,160,0.28);
}
.card-ultra .hero-button:hover {
  background: rgba(0,224,160,0.28);
  box-shadow: 0 6px 24px -4px rgba(0,224,160,0.50);
  transform: translateY(-2px);
}

.card-enterprise .hero-button {
  background: rgba(184,207,224,0.10);
  border-color: rgba(184,207,224,0.34);
  box-shadow: 0 4px 18px -5px rgba(184,207,224,0.20);
}
.card-enterprise .hero-button:hover {
  background: rgba(184,207,224,0.24);
  box-shadow: 0 6px 24px -4px rgba(184,207,224,0.40);
  transform: translateY(-2px);
}

/* ── PayPal button wrapper ─────────────────────────────────── */
.features .card [id^="paypal-"] {
  max-width: 100%;
  overflow: hidden;
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .features .card {
    padding: 1.6rem 1.4rem 1.4rem;
  }
  .features .card h3 {
    font-size: 1.35rem;
  }
  .features .card .hero-button {
    font-size: 0.67rem;
  }
}