/* ============================================================
   UBeLong — Circles
   Themed communities that live inside the members site.
   Each Circle has its own feel, chat, events, and featured
   profiles — but they all share one verified membership.
   ============================================================ */

/* ---------- Hero ---------- */
.cir-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 12% 0%, #1a5e5b 0%, #0d3b3a 55%, #082726 100%);
  color: var(--text-on-deep);
  padding-block: clamp(64px, 10vw, 128px);
}
.cir-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 82% 18%, rgba(234,166,69,.22), transparent 42%),
    radial-gradient(circle at 92% 78%, rgba(111,181,174,.18), transparent 46%);
  pointer-events: none;
}
.cir-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 62ch;
}
.cir-hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  margin-bottom: .4em;
}
.cir-hero h1 .hl { color: var(--amber-300); }
.cir-hero__sub {
  font-size: clamp(1.08rem, 2.1vw, 1.32rem);
  color: var(--text-on-deep-muted);
  max-width: 56ch;
}
.cir-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 1.8em;
}
.cir-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 1.6em;
  font-size: .95rem;
  color: var(--text-on-deep-muted);
}
.cir-hero__trust span { white-space: nowrap; }

/* ---------- Section intro ---------- */
.cir-intro { max-width: 62ch; margin-inline: auto; text-align: center; }

/* ---------- Circle cards ---------- */
.cir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 3vw, 28px);
  margin-top: clamp(34px, 5vw, 52px);
}
.cir-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 34px);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cir-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.cir-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--cir-a, #2d8a83), var(--cir-b, #eaa645));
}
.cir-card__ic {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  border-radius: var(--r-md);
  background: var(--cir-soft, var(--teal-100));
  margin-bottom: 1em;
}
.cir-card__theme {
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: var(--teal-900);
  margin: 0 0 .12em;
  letter-spacing: -.01em;
}
.cir-card__kind {
  display: inline-block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cir-a, var(--teal-600));
  margin-bottom: .7em;
}
.cir-card__desc {
  color: var(--text-soft);
  font-size: 1rem;
  margin: 0 0 1.1em;
}
.cir-card__feat {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
  display: grid;
  gap: .55em;
}
.cir-card__feat li {
  display: flex;
  gap: .6em;
  align-items: flex-start;
  font-size: .95rem;
  color: var(--ink-soft);
}
.cir-card__feat svg {
  width: 18px; height: 18px; flex: none; margin-top: .18em;
  color: var(--cir-a, var(--teal-600));
}
.cir-card__cta { margin-top: auto; }

/* Per-circle accents */
.cir-card--screen  { --cir-a:#2d8a83; --cir-b:#6fb5ae; --cir-soft:#d6ece9; }
.cir-card--coaster { --cir-a:#c8771a; --cir-b:#eaa645; --cir-soft:#fcefda; }
.cir-card--table   { --cir-a:#6a4fb6; --cir-b:#9b7fe0; --cir-soft:#ece6fb; }

/* ---------- How it works ---------- */
.cir-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 3vw, 30px);
  margin-top: clamp(34px, 5vw, 52px);
}
.cir-step { text-align: center; }
.cir-step__num {
  width: 54px; height: 54px; margin: 0 auto .8em;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--teal-900); color: var(--amber-300);
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 600;
}
.cir-step h3 { font-size: 1.22rem; margin-bottom: .35em; }
.cir-step p { color: var(--text-soft); margin: 0; }

/* ---------- What every circle has ---------- */
.cir-feat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(16px, 2.6vw, 26px);
  margin-top: clamp(30px, 4vw, 44px);
}
.cir-feat__item {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md);
  padding: 24px;
}
.cir-feat__ic { font-size: 1.7rem; margin-bottom: .5em; }
.cir-feat__item h4 { color: #fff; font-size: 1.1rem; margin-bottom: .3em; }
.cir-feat__item p { color: var(--text-on-deep-muted); margin: 0; font-size: .96rem; }

/* ---------- FAQ ---------- */
.cir-faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.cir-faq details {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 22px;
}
.cir-faq summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--teal-900);
  font-weight: 600;
  list-style: none;
}
.cir-faq summary::-webkit-details-marker { display: none; }
.cir-faq summary::after { content: "+"; float: right; color: var(--amber-500); font-weight: 700; }
.cir-faq details[open] summary::after { content: "\2013"; }
.cir-faq p { margin: .7em 0 0; color: var(--text-soft); }

/* ---------- Final CTA ---------- */
.cir-final {
  text-align: center;
  background: linear-gradient(135deg, #124745, #0d3b3a);
  color: var(--text-on-deep);
  border-radius: var(--r-xl);
  padding: clamp(38px, 6vw, 68px) clamp(24px, 5vw, 60px);
}
.cir-final h2 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.cir-final p { color: var(--text-on-deep-muted); max-width: 54ch; margin: .6em auto 0; }
.cir-final__btns {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 1.8em;
}

/* ---------- Coming-soon pill ---------- */
.cir-soon {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--amber-100); color: var(--amber-600);
  border-radius: var(--r-full);
  padding: .4em 1em;
  font-size: .82rem; font-weight: 700;
}

@media (max-width: 640px) {
  .cir-card { padding: 22px; }
  .cir-hero__cta .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Members link on the public Circles hero
   ============================================================ */

.cir-hero__member { margin-top: 1.1em; color: var(--text-on-deep-muted); font-size: .92rem; }
.cir-hero__member a { color: var(--amber-300); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cir-hero__member a:hover { color: #fff; }