/* ═══ 2026-04-30 GLASS PLACARDS · float floating text on low-opacity white panels so the cosmic backdrop shows through ═══ */

.hero-title,
.hero-tag,
.stats,
.section-head,
.lb-card,
.hero-pill-row,
.hero-cta-row {
  position: relative;
  z-index: 2;
}

/* Hero title — "A universe at a push of a [button]" */
.hero-title {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(0, 0, 0, 0.85) !important;
  border-radius: 18px !important;
  padding: 22px 36px !important;
  margin: 0 auto 14px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08) !important;
}

/* Tagline */
.hero-tag {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(0, 0, 0, 0.85) !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  margin: 0 auto 18px !important;
}

/* Stats — same boost */
.stats {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(0, 0, 0, 0.85) !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
}

/* Section head */
.section-head {
  background: rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(0, 0, 0, 0.85) !important;
  border-radius: 18px !important;
  padding: 18px 28px !important;
}

/* Stats row — wrap the whole row + each stat as its own mini placard */
.stats {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(0, 0, 0, 0.85);
  border-radius: 18px;
  padding: 16px 18px;
  display: inline-flex;
  gap: 24px;
  margin-top: 10px;
}
.stats .stat {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 12px;
  padding: 10px 16px;
}

/* Section heads — "Six steps. Then you're in it." etc. */
.section-head {
  display: inline-block;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(0, 0, 0, 0.85);
  border-radius: 18px;
  padding: 18px 28px;
  margin-bottom: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* Container holding section-head — center-align it */
.section .container > .section-head:first-child {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Launch banner ("race to 101 live sites") */
.lb-card {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(0, 0, 0, 0.85) !important;
}

/* Hero pill row (Already have a plan? + V1-B shipping badge) */
.hero-pill-row {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(0, 0, 0, 0.7);
  border-radius: 999px;
  padding: 6px 12px !important;
  display: inline-flex !important;
  width: max-content;
  margin: 0 auto 16px !important;
}

/* CTA row (Claim your universe + See what's inside) */
.hero-cta-row {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(0, 0, 0, 0.7);
  border-radius: 999px;
  padding: 8px 14px;
  display: inline-flex;
  gap: 10px;
  width: max-content;
  margin: 0 auto 28px;
}

/* Center the hero block so all placards line up */
.hero-title .line1, .hero-title .line2 { display: block; }

/* Center the placards within the hero — the parent is a section with text-align defaults
   that don't center inline-block children consistently. Force max-content + auto margins. */
.hero-title,
.hero-tag,
.hero-pill-row,
.hero-cta-row {
  margin-left: auto !important;
  margin-right: auto !important;
  width: max-content !important;
  max-width: calc(100% - 40px) !important;
}
/* Stats row also centered */
.stats { margin-left: auto !important; margin-right: auto !important; width: max-content !important; }
/* If the section parent doesn't center inline-block, force flex column on its container */
section .container,
.section .container { text-align: center; }

/* Generic placard utility (apply via .glass-placard) */
.glass-placard {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(0, 0, 0, 0.85) !important;
  border-radius: 18px !important;
  padding: 22px 36px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: calc(100% - 40px) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08) !important;
}