@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* ── Brand tokens ──────────────────────────── */
html[data-brand="dr-setheka"],
html[data-brand="dr-setheka"].dark {
  background: #F5F1E8;
}
html[data-brand="dr-setheka"] body {
  background: #F5F1E8;
  color: #1A2123;
}
html[data-brand="dr-setheka"] {
  --s-bg:     #F5F1E8;
  --s-text:   #1A2123;
  --s-muted:  #7A8790;
  --s-accent: #0f766e;
  --s-line-a: rgba(15,118,110,0.20);
}

/* ── Shell: full viewport, centred ─────────── */
.s-shell {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 28px;
  background-color: var(--s-bg);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 0%,   rgba(15,118,110,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(15,118,110,0.06) 0%, transparent 55%);
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* ── Card ──────────────────────────────────── */
.s-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  max-width: 620px;
  width: 100%;
}

/* ── Logo ──────────────────────────────────── */
.s-logo {
  display: block;
  width: min(500px, 100%);
  height: auto;
  /* PNG already has a white/transparent bg — show it cleanly */
  animation: s-fadeUp .8s cubic-bezier(.22,1,.36,1) both;
}

/* ── Rule ──────────────────────────────────── */
.s-rule {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--s-accent), transparent);
  margin: 20px 0 24px;
  animation: s-fadeUp .8s .08s cubic-bezier(.22,1,.36,1) both;
}

/* ── Eyebrow badge ─────────────────────────── */
.s-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid var(--s-line-a);
  border-radius: 999px;
  background: rgba(15,118,110,0.07);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--s-accent);
  margin-bottom: 18px;
  animation: s-fadeUp .8s .14s cubic-bezier(.22,1,.36,1) both;
}
.s-eyebrow-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  animation: s-pulse 2.4s ease infinite;
}

/* ── Body ──────────────────────────────────── */
.s-body {
  font-size: .92rem;
  line-height: 1.75;
  color: var(--s-muted);
  font-weight: 300;
  max-width: 38ch;
  margin: 0;
  animation: s-fadeUp .8s .20s cubic-bezier(.22,1,.36,1) both;
}

/* ── Animations ────────────────────────────── */
@keyframes s-fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes s-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.72); }
}

/* ── Mobile ────────────────────────────────── */
@media (max-width: 500px) {
  .s-shell { padding: 48px 20px; }
  .s-logo { width: min(380px, 100%); }
}