:root {
  --clero-primary: #0D9488;
  --clero-primary-dark: #0F766E;
  --clero-blue: #62C7FF;
  --clero-slate-50: #F7F7F3;
  --clero-slate-100: #F1F1EC;
  --clero-slate-200: #E4E6E4;
  --clero-slate-400: #94A3B8;
  --clero-slate-500: #64748B;
  --clero-slate-700: #334155;
  --clero-slate-900: #0F172A;
  --clero-slate-950: #07111B;
  --clero-radius-xl: 24px;
  --clero-radius-2xl: 32px;
  --clero-surface-strong: rgba(255, 255, 255, 0.9);
  --clero-shadow-soft: 0 20px 50px rgba(15, 23, 42, 0.08);
  --clero-shadow-card: 0 28px 80px rgba(15, 23, 42, 0.12);
  --clero-max-content: 1280px;
  --clero-hero-background:
    radial-gradient(circle at top left, rgba(13, 148, 136, 0.08), transparent 28%),
    radial-gradient(circle at top right, rgba(98, 199, 255, 0.05), transparent 24%),
    linear-gradient(180deg, #f1f2ee 0%, #f6f6f2 34%, #fafaf7 100%);
}

.public-page-shell {
  position: relative;
  background: var(--clero-hero-background);
  color: var(--clero-slate-900);
  overflow-x: clip;
}

.public-page-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 420px;
  background:
    radial-gradient(circle at 15% 0%, rgba(13, 148, 136, 0.06), transparent 34%),
    radial-gradient(circle at 85% 10%, rgba(98, 199, 255, 0.05), transparent 28%);
  pointer-events: none;
}

.public-hero-mesh {
  position: relative;
  isolation: isolate;
}

.public-hero-mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 12%, rgba(13, 148, 136, 0.1), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(98, 199, 255, 0.07), transparent 20%),
    radial-gradient(circle at 52% 100%, rgba(15, 118, 110, 0.06), transparent 28%);
  pointer-events: none;
  z-index: -1;
}

.public-surface-card {
  background: var(--clero-surface-strong);
  border: 1px solid rgba(228, 230, 228, 0.92);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(18px);
}

.public-dark-panel {
  background:
    radial-gradient(circle at 18% 16%, rgba(13, 148, 136, 0.1), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(98, 199, 255, 0.08), transparent 22%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.84), transparent 28%),
    linear-gradient(180deg, rgba(251, 252, 251, 0.98) 0%, rgba(245, 248, 247, 0.98) 52%, rgba(239, 244, 245, 0.96) 100%);
  border: 1px solid rgba(226, 232, 240, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 28px 84px rgba(15, 23, 42, 0.07);
}