/* =========================================================
   MARKETING SHARED CLASSES — every new marketing page MUST use these
   (do not invent one-off card/CTA CSS; extend this file instead)

   Hero:     .hero--centered + .hero-title / .hero-subtext (ffm-hero.css)
   Badges:   .section-badge  ·  pill: .qr-badge-style via .section-badge
   Cards:    .creator-card  (hover: lift + glow + border)  ·  .creator-card-icon
   Steps:    .steps-flow  ·  .step-merged  ·  .step-header  ·  .step-badge  ·  .step-body
   Sections: .section-dark  ·  .section-sub  ·  .fans-glow--*
   CTA:      .section-photo  ·  .cta-btn / .cta-btn-outline (ffm-hero.css buttons)
   Buttons:  .btn / .btn-ffm / .public-shell-button (shared centred button base)
   ========================================================= */

/* FFM sitewide layout polish — spacing, header, footer, hero alignment */

/* ── 1) Page gutters (wider left/right margins) ── */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  padding-left: 1.35rem !important;
  padding-right: 1.35rem !important;
}
@media (min-width: 640px) {
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    padding-left: 1.85rem !important;
    padding-right: 1.85rem !important;
  }
}
@media (min-width: 1024px) {
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    padding-left: 2.75rem !important;
    padding-right: 2.75rem !important;
  }
}
.explore-shell {
  padding-left: 1.35rem !important;
  padding-right: 1.35rem !important;
}
@media (min-width: 640px) {
  .explore-shell {
    padding-left: 1.85rem !important;
    padding-right: 1.85rem !important;
  }
}
@media (min-width: 1024px) {
  .explore-shell {
    padding-left: 2.75rem !important;
    padding-right: 2.75rem !important;
  }
}

/* ── 2) Header: tighter bar, bigger FFM mark + hamburger ── */
.public-shell-topbar {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.public-shell-topbar.scrolled {
  border-bottom: 0 !important;
}
.public-shell-topbar .inner {
  min-height: 52px !important;
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
  gap: 0.5rem !important;
}
.public-shell-brand {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
}
.public-shell-brand img {
  height: 55px !important;
  width: auto !important;
}
.public-shell-hamburger {
  display: flex !important;
  min-width: 58px !important;
  min-height: 58px !important;
  padding: 0.45rem !important;
  margin: 0 !important;
}
.public-shell-hamburger svg,
.public-shell-hamburger i {
  width: 40px !important;
  height: 40px !important;
}
@media (min-width: 992px) {
  .public-shell-hamburger {
    display: none !important;
  }
  .public-shell-topbar .inner {
    min-height: 60px !important;
  }
  .public-shell-brand img {
    height: 52px !important;
  }
}

/* ── 3) Footer (mobile): centered stack — crypto, policies, follow ── */
.public-shell-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.public-shell-footer .footer-links {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.public-shell-footer .footer-links h3 {
  margin-top: 0 !important;
}
.public-shell-footer .footer-links span {
  display: block;
  padding: 0.35rem 0;
  color: #9ca3af;
  font-size: 0.75rem;
  line-height: 1.4;
}
.public-shell-footer .footer-links a {
  display: block;
  padding: 0.35rem 0;
  color: #9ca3af;
  font-size: 0.75rem;
  line-height: 1.4;
}

.footer-bottom,
.public-shell-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

@media (max-width: 767.98px) {
  .public-shell-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .footer-bottom,
  .public-shell-footer .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.85rem !important;
    padding: 1rem 0 !important;
  }
  .footer-bottom > *,
  .public-shell-footer .footer-bottom > * {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
    gap: 0.35rem 0.55rem !important;
  }
  .footer-legal {
    order: 1;
  }
  .footer-policies {
    order: 2;
  }
  .footer-follow,
  .public-shell-footer .footer-follow {
    order: 3;
  }
  .footer-policies span[style*="#4b5563"],
  .footer-bottom span[style*="4b5563"] {
    display: inline !important;
  }
}

/* ── 4) Hero copy: center on mobile, left on desktop ── */
@media (max-width: 767.98px) {
  .home-hero,
  .home-hero .hero-grid,
  .home-hero h1,
  .home-hero p,
  .home-hero .hero-eyebrow,
  .home-hero .hero-text,
  .fans-hero,
  .fans-hero .hero-text,
  .fans-hero h1,
  .fans-hero p,
  .celeb-hero,
  .celeb-hero h1,
  .celeb-hero p,
  .casting-hero,
  .casting-hero h1,
  .casting-hero p,
  .creator-hero,
  .creator-hero h1,
  .creator-hero .hero-sub,
  .biz-hero,
  .biz-hero h1,
  .biz-hero p,
  .contact-hero,
  .contact-hero h1,
  .contact-hero > .container > p,
  .support-hero,
  .support-hero h1,
  .support-hero p,
  .page-hero,
  .page-hero h1,
  .page-hero p,
  .auth-hero,
  .auth-hero h1,
  .auth-hero p {
    text-align: center !important;
  }
  .home-hero h1,
  .fans-hero h1,
  .celeb-hero h1,
  .casting-hero h1,
  .creator-hero h1,
  .biz-hero h1,
  .contact-hero h1,
  .support-hero h1,
  .page-hero h1 {
    max-width: min(100%, 36rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .home-hero p,
  .fans-hero p,
  .celeb-hero p,
  .casting-hero p,
  .creator-hero .hero-sub,
  .biz-hero p,
  .contact-hero > .container > p,
  .support-hero p,
  .page-hero p {
    max-width: min(100%, 34rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-eyebrow {
    display: inline-flex !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* Desktop heroes stay left-aligned (except already-centered page heroes) */
@media (min-width: 768px) {
  .celeb-hero h1,
  .celeb-hero p,
  .fans-hero h1,
  .fans-hero p {
    text-align: left !important;
  }
}

/* ── 5) Celebrities / Fans: center icon & button rows on mobile ── */
@media (max-width: 767.98px) {
  .hero-btns,
  .home-cta,
  .support-hero-btns,
  .founder-follow-icons,
  .founder-follow,
  .footer-social,
  .contact-pill,
  .film-tags,
  .talent-grid,
  .fans-card-icon,
  .creator-card-icon {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-btns,
  .home-cta,
  .support-hero-btns {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .hero-btns .cta-btn,
  .hero-btns .cta-btn-outline,
  .home-cta .btn,
  .support-hero-btns .support-btn {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .celeb-badge {
    display: inline-flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .contact-badge {
    display: inline-flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── 6) Footer “Coming Soon” column balance ── */
.public-shell-footer .footer-links:last-child {
  justify-content: flex-start;
}
.public-shell-footer .footer-grid > .footer-links {
  min-width: 0;
}
.public-shell-footer .footer-links h3 {
  flex-shrink: 0;
}

/* ── Founder / movie-castings callout (shared) ── */
.celeb-founder-strip {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.25rem;
  align-items: center;
  margin-top: 1.75rem;
  padding: 1.15rem 1.25rem;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.celeb-founder-photo {
  width: 180px;
  height: 120px;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 14px;
  border: 2px solid rgba(249, 115, 22, 0.55);
  box-shadow: 0 0 28px rgba(249, 115, 22, 0.25);
}
.celeb-founder-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fb923c;
  margin-bottom: 0.25rem;
}
.celeb-founder-name {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 900;
  color: #fff;
  margin: 0 0 0.4rem;
}
.celeb-founder-copy p {
  color: #e2e8f0;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 0.85rem;
}
@media (max-width: 767.98px) {
  .celeb-founder-strip {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .celeb-founder-photo {
    width: min(100%, 280px);
    height: 150px;
  }
  .celeb-founder-copy p {
    text-align: center !important;
  }
}

/* ── Mobile section rhythm (previous pass) ── */
@media (max-width: 767.98px) {
  .section,
  .section-sm {
    padding: 1rem 0 !important;
  }
  .section-dark {
    padding: 1rem 0 !important;
  }
  .section-gradient {
    padding: 1.15rem 0 !important;
  }
  .section-photo {
    padding: 1.25rem 0 !important;
  }
  .section-dark h2,
  .section-photo h2 {
    margin-bottom: 0.35rem !important;
  }
  .section-sub,
  .form-section-sub {
    margin-bottom: 0.9rem !important;
  }
  .content-grid {
    gap: 0.85rem !important;
  }
  .fans-grid,
  .creators-grid,
  .model-grid,
  .partner-cards,
  .grid-4,
  .waitlist-grid,
  .steps-flow,
  .contact-grid,
  .faq-grid,
  .contact-options {
    gap: 0.65rem !important;
  }
  .fans-card,
  .creator-card,
  .model-card,
  .partner-card,
  .waitlist-card,
  .step-merged {
    padding: 1.05rem !important;
  }
  .why-fans-card,
  .why-creators-card {
    position: static !important;
    margin-top: 0 !important;
    padding: 1.15rem 1rem !important;
  }
  .why-fans-card h3,
  .why-creators-card h3 {
    margin-bottom: 0.85rem !important;
    font-size: 1.2rem !important;
  }
  .why-fans-item,
  .why-creators-item {
    margin-bottom: 0.7rem !important;
  }
  .film-tags {
    margin-bottom: 0.85rem !important;
  }
  .quote-block {
    margin-bottom: 0.75rem !important;
  }
  .founder-text p {
    margin-bottom: 0.85rem !important;
  }
  .founder-follow {
    margin-top: 0.85rem !important;
    padding-top: 0.85rem !important;
  }
  .social-strip {
    padding: 1.15rem 0 !important;
  }
  .steps-flow {
    margin-bottom: 0.75rem !important;
  }
  .section-photo p {
    margin-bottom: 1rem !important;
  }
  .explore-shell .explore-grid {
    gap: 1rem !important;
  }
  .explore-search {
    margin-bottom: 0.85rem !important;
  }
  .filter-section {
    margin-bottom: 0.85rem !important;
  }
  .explore-sidebar {
    margin-top: 0.85rem !important;
  }
}

/* Footer bottom: 2 centered rows (legal/crypto then social) */
.footer-bottom--2row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  text-align: center !important;
}
.footer-bottom--2row .footer-legal--row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.35rem 0.5rem !important;
  width: 100% !important;
}
.footer-bottom--2row .footer-follow--row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
}
@media (max-width: 767.98px) {
  .footer-bottom--2row .footer-legal--row {
    flex-direction: column !important;
    gap: 0.55rem !important;
    width: 100% !important;
  }
  .footer-bottom--2row .footer-copy {
    width: 100% !important;
    text-align: center !important;
  }
  .footer-legal-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.45rem !important;
    width: 100% !important;
  }
  .footer-lbl-full { display: none !important; }
  .footer-lbl-short { display: inline !important; }
  .footer-sep { display: inline-flex !important; color: #4b5563 !important; }
  .footer-sep-full { display: none !important; }
  .footer-sep-short { display: inline !important; }
}

/* Desktop: full labels, one row */
.footer-lbl-short { display: none; }
.footer-lbl-full { display: inline; }
.footer-sep-short { display: none; }
.footer-sep-full { display: inline; }
.footer-legal-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

/* -- Marketing shared components (For Creators reference) -- */
.section-dark {
  padding: 2rem 0;
  background: linear-gradient(to right bottom, #111827, #1f2937, #111827);
}
.section-dark h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  color: #fff;
  text-align: center;
  margin-bottom: 1rem;
}
.section-sub {
  text-align: center;
  color: #d1d5db;
  max-width: 600px;
  margin: 0 auto 2.5rem;
  font-size: 1rem;
  line-height: 1.7;
}
.creator-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.25rem; border-radius: 999px;
  background: linear-gradient(135deg, rgba(249,115,22,.2), rgba(168,85,247,.2));
  border: 1px solid rgba(249,115,22,.3);
  color: #fdba74;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 1.5rem;
}
.section-badge {
  font-size: .75rem;
  font-weight: 700;
  color: #fb923c;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .4rem;
}
.fans-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.fans-glow--orange {
  width: 420px; height: 420px; top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(249,115,22,.22), transparent 70%);
}
.fans-glow--purple {
  width: 380px; height: 380px; bottom: -100px; left: -60px;
  background: radial-gradient(circle, rgba(168,85,247,.20), transparent 70%);
}
.fans-glow--pink {
  width: 300px; height: 300px; top: 40%; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(236,72,153,.10), transparent 70%);
}
.creators-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  align-items: stretch;
}
.creator-card {
  background: rgba(31,41,55,.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(55,65,81,.3);
  border-radius: 12px;
  padding: 1.4rem;
  transition: all .3s ease;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}
@media (hover: hover) {
.creator-card:hover {
  border-color: rgba(249,115,22,.5);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,.25);
}
}
.creator-card-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .75rem; color: #fff;
}
.creator-card-icon i,
.creator-card-icon svg.lucide {
  width: 1.25rem; height: 1.25rem; color: #fff;
}
.creator-card h4 {
  color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: .25rem;
}
.creator-card p {
  color: #d1d5db; font-size: .875rem; line-height: 1.45; margin: 0;
}
.steps-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto 2rem;
  position: relative;
}
.steps-flow::before {
  content: '';
  position: absolute; top: 3rem; left: 16.66%; right: 16.66%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(249,115,22,.3), rgba(168,85,247,.3), transparent);
  z-index: 0;
}
.step-merged {
  position: relative; z-index: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: .75rem;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
@media (hover: hover) {
.step-merged:hover {
  border-color: rgba(249,115,22,.35);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,.25);
}
}
.step-header { display: flex; align-items: center; gap: .75rem; }
.step-badge {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--home-gradient, linear-gradient(135deg, #f97316, #a855f7));
  color: #fff; font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.step-header h4 { color: #fff; font-size: 1rem; font-weight: 700; margin: 0; }
.step-body { padding-left: 3.25rem; }
.step-body p { color: #d1d5db; font-size: .85rem; line-height: 1.55; margin: 0; }
.cta-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.75rem; border-radius: 12px;
  background: var(--home-gradient, linear-gradient(135deg, #f97316, #a855f7));
  color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none;
  transition: all .3s ease;
  box-shadow: 0 14px 28px rgba(249,115,22,.3);
}
.cta-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 30px rgba(249,115,22,.4);
  color: #fff;
}
.cta-btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.75rem; border-radius: 12px;
  background: rgba(30,41,59,.8);
  border: 1px solid rgba(255,255,255,.15);
  color: #e2e8f0; font-weight: 700; font-size: 1rem; text-decoration: none;
  transition: all .3s ease;
}
.cta-btn-outline:hover {
  background: rgba(51,65,85,.9);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-2px);
}
.section-photo {
  position: relative; overflow: hidden;
  background: linear-gradient(rgba(0,0,0,.5), rgba(15,23,42,.5)), url("/s3fans/files/ffmherobackground.jpg") center/cover no-repeat;
  padding: 3.5rem 0 5rem;
  text-align: center;
}
.section-photo h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 900; color: #fff; margin-bottom: .5rem;
}
.section-photo p {
  color: #d1d5db; font-size: 1rem; max-width: 500px; margin: 0 auto 2rem; line-height: 1.7;
}
@media (max-width: 768px) {
  .creators-grid, .steps-flow { grid-template-columns: 1fr; }
  .steps-flow::before { display: none; }
  .step-body { padding-left: 0; }
}

/* ── Icon feature/benefit cards: centre icon + title + text under 768px ── */
/* One shared rule — desktop unchanged. Covers Home / For Creators / For Fans /
   Celebrities / Business / Casting / QR Sign-Ups / Support / Live Streams /
   Revenue. :has() keeps directory/profile cards left-aligned. */
@media (max-width: 767.98px) {
  .card:has(.feature-icon),
  .fan-card,
  .fans-card:has(.fans-card-icon),
  .card-item:has(.card-icon),
  .partner-card:has(.partner-card-icon),
  .talent-card:has(.talent-card-icon),
  .support-card:has(.support-card-icon),
  .stream-card:has(.stream-icon),
  .contact-option:has(.contact-option-icon),
  .founder-card:has(.founder-icon),
  .creator-card:has(.creator-card-icon) {
    text-align: center;
  }
  .card .feature-icon,
  .fan-card i,
  .fan-card svg.lucide,
  .fans-card-icon,
  .card-icon,
  .partner-card-icon,
  .talent-card-icon,
  .support-card-icon,
  .stream-icon,
  .contact-option-icon,
  .founder-icon,
  .creator-card-icon {
    margin-left: auto;
    margin-right: auto;
  }
}